/* SKAU AJAX Filter — flyout styles. Self-contained tokens so it works without the brand sheet. */
.skau-filter{
  /* Monochrome black to match the SKAU category menu (was sage green). */
  --skau-sage-50:#F1F1F0; --skau-sage-500:#1B1B1A; --skau-sage-600:#1B1B1A; --skau-sage-700:#000000;
  --skau-ink-0:#FFFFFF; --skau-ink-50:#F7F5F1; --skau-ink-200:#DDD8CE; --skau-ink-300:#BEB8AB;
  --skau-ink-900:#000000; --skau-fg-2:#3E3A33; --skau-fg-3:#8F887B; --skau-line:#DDD8CE;
  --skau-r-el:8px; --skau-r-pill:999px;
  --skau-font:inherit;
}
.skau-filter *{ box-sizing:border-box; }
.skau-num{ font-variant-numeric:tabular-nums; }

/* opener button */
.skau-openbtn{ display:inline-flex; align-items:center; gap:10px; padding:10px 16px; border-radius:0;
  border:1px solid var(--skau-ink-900); background:var(--skau-ink-0); cursor:pointer;
  font:600 11px/1 var(--skau-font); letter-spacing:.14em; text-transform:uppercase; color:var(--skau-ink-900);
  transition:background .15s, color .15s; }
.skau-openbtn:hover{ background:var(--skau-ink-900); color:#fff; }
.skau-openbtn svg{ width:15px; height:15px; }
.skau-openbtn .skau-b{ display:inline-flex; align-items:center; justify-content:center; min-width:17px; height:17px;
  padding:0 5px; border-radius:0; background:var(--skau-sage-600); color:#fff; font:700 10px/1 var(--skau-font); }
.skau-openbtn:hover .skau-b{ background:#fff; color:var(--skau-ink-900); }

/* bar: open button + active-filter chips */
.skau-bar{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.skau-active{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.skau-chip-active{ display:inline-flex; align-items:center; gap:8px; padding:8px 10px 8px 13px; border:1px solid var(--skau-ink-200);
  background:var(--skau-ink-0); cursor:pointer; font:600 11px/1 var(--skau-font); letter-spacing:.03em; color:var(--skau-ink-900); }
.skau-chip-active:hover{ border-color:var(--skau-ink-900); }
.skau-chip-active .skau-chip-x{ display:inline-flex; color:var(--skau-fg-3); }
.skau-chip-active:hover .skau-chip-x{ color:var(--skau-ink-900); }
.skau-chip-active .skau-chip-x svg{ width:12px; height:12px; display:block; }
.skau-chip-clear{ border:0; background:none; cursor:pointer; padding:8px 4px; color:var(--skau-fg-2);
  font:700 10px/1 var(--skau-font); letter-spacing:.1em; text-transform:uppercase; }
.skau-chip-clear:hover{ color:var(--skau-ink-900); }

/* scrim + flyout */
/* Light scrim: keeps an outside-click target but lets the product grid stay
   visible so filtering can be watched live behind the open flyout. */
.skau-scrim{ position:fixed; inset:0; background:rgba(20,19,16,.12); opacity:0; pointer-events:none; transition:opacity .25s; z-index:99998; }
.skau-scrim.skau-open{ opacity:1; pointer-events:auto; }
.skau-flyout{ position:fixed; top:0; left:0; bottom:0; width:400px; max-width:90vw; background:var(--skau-ink-0); z-index:99999;
  transform:translateX(-100%); transition:transform .28s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column;
  box-shadow:18px 0 60px rgba(0,0,0,.18); font-family:var(--skau-font); color:var(--skau-ink-900); }
.skau-flyout[hidden]{ display:flex; } /* keep transitionable; visibility via .skau-open */
.skau-flyout.skau-open{ transform:translateX(0); }

.skau-fl-head{ display:flex; align-items:center; gap:14px; padding:22px 24px; border-bottom:1px solid var(--skau-line); }
.skau-fl-head .skau-t{ font:700 16px/1 var(--skau-font); letter-spacing:.02em; }
.skau-fl-head .skau-t .skau-c{ font:600 13px/1 var(--skau-font); color:var(--skau-fg-3); margin-left:8px; }
.skau-spacer{ flex:1; }
/* boxless X — just the icon */
.skau-fl-x{ width:auto; height:auto; border:0; border-radius:0; background:none; padding:4px;
  cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--skau-fg-2); transition:color .15s; }
.skau-fl-x:hover{ color:var(--skau-ink-900); background:none; }
.skau-fl-x svg{ width:20px; height:20px; }

.skau-fl-body{ flex:1; overflow-y:auto; }
.skau-facet{ border-bottom:1px solid var(--skau-line); }
.skau-facet-h{ display:flex; align-items:center; gap:12px; width:100%; padding:11px 24px; background:none; border:0; cursor:pointer; text-align:left; }
.skau-facet-h .skau-ft{ font:700 9.5px/1 var(--skau-font); letter-spacing:.15em; text-transform:uppercase; color:var(--skau-ink-900); }
.skau-facet-h .skau-sel{ font:600 12px/1 var(--skau-font); color:var(--skau-sage-700); }
.skau-facet-h .skau-chev{ color:var(--skau-fg-3); transition:transform .2s; }
.skau-facet-h .skau-chev svg{ width:16px; height:16px; display:block; }
.skau-facet.skau-collapsed .skau-chev{ transform:rotate(-90deg); }
.skau-facet-b{ padding:2px 24px 15px; }
.skau-facet-b--flush{ padding:10px 24px; }
.skau-facet.skau-collapsed .skau-facet-b{ display:none; }

/* content injected at the top of the flyout (admin shortcode / HTML) */
.skau-fl-top{ padding:16px 24px; border-bottom:1px solid var(--skau-line); font:400 13.5px/1.5 var(--skau-font); color:var(--skau-fg-2); }
.skau-fl-top > :first-child{ margin-top:0; }
.skau-fl-top > :last-child{ margin-bottom:0; }

/* on-sale / in-stock — borderless icon rows (not checkboxes) */
.skau-facet--toggle .skau-facet-b--flush{ padding:3px 24px 8px; }
.skau-opt--toggle{ display:flex; align-items:center; gap:12px; padding:8px 0; border:0; cursor:pointer; }
.skau-opt--toggle .skau-toggle-ic{ display:inline-flex; align-items:center; justify-content:center; color:var(--skau-ink-900); }
.skau-opt--toggle .skau-toggle-ic svg{ width:18px; height:18px; display:block; }
.skau-opt--toggle .skau-ol{ flex:1; font:500 14.5px/1 var(--skau-font); color:var(--skau-ink-900); }
.skau-opt--toggle .skau-toggle-check{ display:inline-flex; opacity:0; color:var(--skau-ink-900); transition:opacity .12s; }
.skau-opt--toggle .skau-toggle-check svg{ width:16px; height:16px; display:block; }
.skau-opt--toggle:hover .skau-ol{ color:var(--skau-sage-700); }
.skau-opt--toggle.skau-on .skau-ol{ font-weight:700; }
.skau-opt--toggle.skau-on .skau-toggle-check{ opacity:1; }

/* price-sort radio options */
.skau-opt--radio .skau-radio{ width:18px; height:18px; flex-shrink:0; border:1.5px solid var(--skau-ink-300); border-radius:50%; position:relative; transition:border-color .12s; }
.skau-opt--radio.skau-on .skau-radio{ border-color:var(--skau-ink-900); }
.skau-opt--radio.skau-on .skau-radio:after{ content:""; position:absolute; inset:3px; border-radius:50%; background:var(--skau-ink-900); }
.skau-opt--radio.skau-on .skau-ol{ font-weight:700; }
.skau-opt--radio:hover .skau-ol{ color:var(--skau-sage-700); }

/* facet-heading icon */
.skau-fh-ic{ display:inline-flex; align-items:center; justify-content:center; color:var(--skau-ink-900); margin-right:2px; }
.skau-fh-ic svg, .skau-fh-ic img{ width:15px; height:15px; display:block; }
.skau-fh-ic .dashicons{ font-size:15px; width:15px; height:15px; }

/* checkbox option */
.skau-opt{ display:flex; align-items:center; gap:13px; padding:6px 0; cursor:pointer; }
.skau-opt .skau-box{ width:21px; height:21px; flex-shrink:0; border:1.5px solid var(--skau-ink-300); border-radius:6px;
  background:var(--skau-ink-0); display:flex; align-items:center; justify-content:center; color:#fff; transition:background .12s, border-color .12s; }
.skau-opt .skau-box svg{ width:13px; height:13px; opacity:0; }
.skau-opt.skau-on .skau-box{ background:var(--skau-sage-600); border-color:var(--skau-sage-600); }
.skau-opt.skau-on .skau-box svg{ opacity:1; }
.skau-opt .skau-ol{ flex:1; font:500 14.5px/1 var(--skau-font); color:var(--skau-ink-900); }
.skau-opt .skau-oc{ font:600 12px/1 var(--skau-font); color:var(--skau-fg-3); font-variant-numeric:tabular-nums; }
.skau-opt:hover .skau-ol{ color:var(--skau-sage-700); }
.skau-opt[aria-disabled="true"]{ opacity:.4; cursor:not-allowed; }

/* color swatches */
.skau-swatches{ display:grid; grid-template-columns:repeat(3,1fr); gap:11px; }
.skau-sw{ display:flex; flex-direction:column; align-items:center; gap:9px; cursor:pointer; padding:6px; border-radius:var(--skau-r-el); border:1.5px solid transparent; }
.skau-sw .skau-chip{ width:100%; height:46px; border-radius:6px; border:1px solid rgba(0,0,0,.08); position:relative; }
.skau-sw .skau-chip svg{ position:absolute; inset:0; margin:auto; width:18px; height:18px; color:#fff; opacity:0; filter:drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.skau-sw .skau-sn{ font:600 11.5px/1 var(--skau-font); color:var(--skau-fg-2); }
.skau-sw.skau-on{ border-color:var(--skau-sage-600); background:var(--skau-sage-50); }
.skau-sw.skau-on .skau-chip svg{ opacity:1; }
.skau-sw.skau-on .skau-sn{ color:var(--skau-sage-700); font-weight:700; }

/* range */
.skau-range .skau-vals{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.skau-range .skau-vbox{ flex:1; border:1.5px solid var(--skau-ink-200); border-radius:var(--skau-r-el); padding:10px 13px; }
.skau-range .skau-vbox .skau-vl{ font:700 8.5px/1 var(--skau-font); letter-spacing:.1em; text-transform:uppercase; color:var(--skau-fg-3); margin-bottom:8px; }
.skau-range .skau-vbox .skau-vv{ font:700 16px/1 var(--skau-font); color:var(--skau-ink-900); font-variant-numeric:tabular-nums; }
.skau-range .skau-vbox .skau-vv small{ font:600 11px/1 var(--skau-font); color:var(--skau-fg-3); margin-left:3px; }
.skau-range .skau-dash{ width:14px; height:1.5px; background:var(--skau-ink-300); margin:0 12px; flex-shrink:0; }
.skau-slider{ position:relative; height:30px; }
.skau-slider .skau-track{ position:absolute; left:0; right:0; top:13px; height:4px; background:var(--skau-ink-200); border-radius:2px; }
.skau-slider .skau-fill{ position:absolute; top:13px; height:4px; background:var(--skau-sage-600); border-radius:2px; }
.skau-slider input[type=range]{ -webkit-appearance:none; appearance:none; position:absolute; left:0; right:0; top:0; width:100%; height:30px; margin:0; background:none; pointer-events:none; }
.skau-slider input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; pointer-events:auto; width:22px; height:22px; border-radius:50%; background:var(--skau-ink-0); border:2px solid var(--skau-sage-600); cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.18); }
.skau-slider input[type=range]::-moz-range-thumb{ pointer-events:auto; width:22px; height:22px; border-radius:50%; background:var(--skau-ink-0); border:2px solid var(--skau-sage-600); cursor:pointer; }

/* footer */
.skau-fl-foot{ display:flex; align-items:center; gap:12px; padding:18px 24px; border-top:1px solid var(--skau-line); background:var(--skau-ink-50); }
.skau-reset{ border:0; background:none; cursor:pointer; font:700 11px/1 var(--skau-font); letter-spacing:.08em; text-transform:uppercase; color:var(--skau-fg-2); padding:13px 4px; }
.skau-reset:hover{ color:var(--skau-ink-900); }
.skau-apply{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:16px; border:0; border-radius:var(--skau-r-el);
  background:var(--skau-sage-600); color:#fff; font:700 12px/1 var(--skau-font); letter-spacing:.08em; text-transform:uppercase; cursor:pointer; }
.skau-apply:hover{ background:var(--skau-sage-700); }
.skau-apply .skau-n{ font-variant-numeric:tabular-nums; }

/* options/facets with no products in the current context */
.skau-hidden{ display:none !important; }

/* loading state on the grid — gentle, just a hint while the swap happens */
.skau-loading{ opacity:.7; pointer-events:none; transition:opacity .15s; }