/* SKAU AJAX Filter — flyout styles.
   Design tokens shared with the SKAU Flyout Menu (skau-menu) so the two drawers
   are visual siblings: same Lato type, oak/ink palette, timing and squared edges. */
.skau-filter{
  --skau-oak-500:#898981; --skau-oak-600:#74746E;
  /* "sage" vars kept for back-compat; remapped to the menu's monochrome accents. */
  --skau-sage-50:#F7F5F1; --skau-sage-500:#000000; --skau-sage-600:#000000; --skau-sage-700:#000000;
  --skau-ink-0:#FFFFFF; --skau-ink-50:#F7F5F1; --skau-ink-100:#EFEBE4; --skau-ink-200:#DDD8CE; --skau-ink-300:#BEB8AB;
  --skau-ink-700:#212121; --skau-ink-900:#000000; --skau-fg-2:#3E3A33; --skau-fg-3:#8F887B; --skau-line:#DDD8CE;
  --skau-r-el:0; --skau-r-pill:0;
  --skau-font:'Lato','Helvetica Neue',Arial,sans-serif;
  --skau-dur:320ms; --skau-ease:cubic-bezier(0.2,0.7,0.2,1);
}
.skau-filter *{ box-sizing:border-box; }
.skau-num{ font-variant-numeric:tabular-nums; }

/* opener button — mirrors the SKAU Flyout Menu trigger (outline style).
   Fixed 40px height so it lines up exactly with the sort control beside it. */
.skau-openbtn{ display:inline-flex; align-items:center; gap:12px; height:40px; padding:0 16px; border-radius:0;
  border:1px solid var(--skau-ink-900); background:transparent; cursor:pointer;
  font:600 12px/1 var(--skau-font); letter-spacing:.16em; text-transform:uppercase; color:var(--skau-ink-900);
  transition:background var(--skau-dur) var(--skau-ease); }
.skau-openbtn:hover{ background:var(--skau-ink-100); color:var(--skau-ink-900); }
.skau-openbtn svg{ width:18px; height:18px; }

/* bar: open button + active-filter chips + sort (pushed right) */
.skau-bar{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
/* Lock both bar controls to the same height/box model so the theme can't desync
   them (Flatsome injects its own button height/line-height). */
.skau-filter .skau-openbtn,
.skau-filter .skau-sort-btn{ height:40px !important; min-height:0 !important; box-sizing:border-box !important; line-height:1 !important; }
.skau-active{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; }

/* sort control — fully custom dropdown (no native <select>), so it looks identical
   on every device and matches the SKAU design. */
.skau-sortwrap{ position:relative; display:inline-flex; align-items:center; margin-left:auto; }
.skau-sort-btn{ display:inline-flex; align-items:center; gap:10px; height:40px; padding:0 12px 0 14px; margin:0;
  border:1px solid var(--skau-line); border-radius:0; background:var(--skau-ink-0); cursor:pointer; max-width:260px;
  font:500 13px/1 var(--skau-font); color:var(--skau-ink-900); transition:border-color var(--skau-dur) var(--skau-ease); }
.skau-sort-btn:hover{ border-color:var(--skau-ink-900); }
.skau-sort-btn .skau-sort-ic{ width:16px; height:16px; flex:none; color:var(--skau-oak-600); }
.skau-sort-btn .skau-sort-label{ flex:1; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.skau-sort-btn .skau-sort-chev{ width:16px; height:16px; flex:none; color:var(--skau-ink-900); transition:transform 200ms var(--skau-ease); }
.skau-sortwrap.skau-open .skau-sort-btn{ border-color:var(--skau-ink-900); }
.skau-sortwrap.skau-open .skau-sort-chev{ transform:rotate(180deg); }

/* dropdown menu */
.skau-sort-menu{ position:absolute; top:calc(100% + 6px); right:0; z-index:100000; min-width:240px; max-width:88vw;
  margin:0; padding:6px 0; list-style:none; background:var(--skau-ink-0); border:1px solid var(--skau-line);
  box-shadow:0 10px 30px rgba(20,19,16,.16); }
.skau-sort-menu[hidden]{ display:none; }
.skau-sort-opt{ display:block; padding:11px 18px; font:400 14px/1.2 var(--skau-font); color:var(--skau-fg-2); cursor:pointer;
  white-space:nowrap; transition:background var(--skau-dur) var(--skau-ease), color var(--skau-dur) var(--skau-ease); }
.skau-sort-opt:hover{ background:var(--skau-ink-50); color:var(--skau-ink-900); }
.skau-sort-opt.is-sel{ color:var(--skau-ink-900); font-weight:600; background:var(--skau-ink-50); }

/* Mobile: FILTRER + Sort share one row (50/50); active chips drop to their own row. */
@media (max-width:600px){
  .skau-bar{ gap:8px; }
  .skau-openbtn{ flex:1 1 0; justify-content:center; padding-left:10px; padding-right:10px; }
  .skau-sortwrap{ flex:1 1 0; margin-left:0; min-width:0; }
  .skau-sort-btn{ width:100%; max-width:none; font-size:12px; padding-left:12px; padding-right:10px; }
  .skau-active{ order:3; flex-basis:100%; }
}
.skau-chip-active{ display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 12px 0 14px; 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 var(--skau-dur) var(--skau-ease); z-index:99998; }
.skau-scrim.skau-open{ opacity:1; pointer-events:auto; }
/* Width/timing/shadow match the SKAU Flyout Menu drawer. */
.skau-flyout{ position:fixed; top:0; left:0; bottom:0; width:384px; max-width:88vw; background:var(--skau-ink-0); z-index:99999;
  transform:translateX(-105%); transition:transform var(--skau-dur) var(--skau-ease); display:flex; flex-direction:column;
  box-shadow:24px 0 60px rgba(20,19,16,.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); }

/* head: logo + boxed close — identical to the SKAU Flyout Menu drawer head */
.skau-fl-head{ display:flex; align-items:center; gap:12px; padding:22px 24px; border-bottom:1px solid var(--skau-line); }
.skau-logo{ display:inline-flex; gap:2px; }
.skau-logo b{ font:800 20px/1 var(--skau-font); letter-spacing:.02em; color:var(--skau-ink-900);
  border-bottom:2.5px solid var(--skau-ink-900); padding-bottom:3px; }
/* site custom logo pulled from WordPress — matches menu logo height */
.skau-logo-img{ height:22px; width:auto; max-width:160px; display:block; object-fit:contain; }
.skau-fl-head .skau-c{ font:600 12px/1 var(--skau-font); color:var(--skau-fg-3); }
.skau-spacer{ flex:1; }
/* boxed X — 38px bordered square with light hover, like the menu close */
.skau-fl-x{ width:38px; height:38px; border:1px solid var(--skau-line); border-radius:0; background:none; padding:0;
  cursor:pointer; display:grid; place-items:center; color:var(--skau-ink-900); transition:background var(--skau-dur) var(--skau-ease); }
.skau-fl-x:hover{ background:var(--skau-ink-100); border-color:var(--skau-line); color:var(--skau-ink-900); }
.skau-fl-x svg{ width:16px; height:16px; display:block; }

.skau-fl-body{ flex:1; overflow-y:auto; overflow-x:hidden; scrollbar-width:none; -ms-overflow-style:none; }
.skau-fl-body::-webkit-scrollbar{ width:0; height:0; }
.skau-facet{ border-bottom:1px solid var(--skau-line); }
/* facet header mirrors the menu's primary toggle row */
.skau-facet-h{ display:flex; align-items:center; gap:12px; width:100%; padding:16px 24px; background:none; border:0; cursor:pointer; text-align:left; transition:background var(--skau-dur) var(--skau-ease); }
.skau-facet-h:hover{ background:var(--skau-ink-50); }
.skau-facet-h .skau-ft{ font:400 21px/1 var(--skau-font); letter-spacing:-0.005em; text-transform:none; color:var(--skau-ink-900); }
.skau-facet-h .skau-sel{ font:600 13px/1 var(--skau-font); color:var(--skau-oak-600); }
.skau-facet-h .skau-chev{ color:var(--skau-oak-600); transition:transform 200ms var(--skau-ease); }
.skau-facet-h .skau-chev svg{ width:18px; height:18px; display:block; }
/* expanded = chevron up, collapsed = chevron down */
.skau-facet-h .skau-chev{ transform:rotate(180deg); }
.skau-facet.skau-collapsed .skau-chev{ transform:rotate(0deg); }
/* expanded body sits on the menu's sub-list cream panel */
.skau-facet-b{ padding:6px 24px 14px; background:var(--skau-ink-50); }
.skau-facet-b--flush{ padding:6px 24px; background:none; }
.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:2px 24px 4px; }
.skau-opt--toggle{ display:flex; align-items:center; gap:12px; padding:6px 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:400 15px/1 var(--skau-font); color:var(--skau-fg-2); }
.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; }

/* menu-style option row — borderless link like the menu's sub-list items; a check
   appears on the right when selected. Type/spacing mirror .skau-flyout-sub a. */
.skau-opt{ display:flex; align-items:center; gap:10px; padding:10px 0 10px 4px; cursor:pointer; }
/* checkbox box repurposed as a right-aligned check mark (no box outline) */
.skau-opt .skau-box{ order:3; width:16px; height:16px; flex-shrink:0; border:0; border-radius:0; background:none;
  display:flex; align-items:center; justify-content:center; color:var(--skau-ink-900); }
.skau-opt .skau-box svg{ width:15px; height:15px; opacity:0; transition:opacity var(--skau-dur) var(--skau-ease); }
.skau-opt.skau-on .skau-box{ background:none; border:0; }
.skau-opt.skau-on .skau-box svg{ opacity:1; }
.skau-opt .skau-ol{ order:1; flex:1; font:400 15px/1.2 var(--skau-font); color:var(--skau-fg-2); transition:color var(--skau-dur) var(--skau-ease); }
.skau-opt.skau-on .skau-ol{ color:var(--skau-ink-900); }
.skau-opt .skau-oc{ order:2; 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-ink-900); }
.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 — mirrors the menu's foot + CTA button */
.skau-fl-foot{ display:flex; align-items:center; gap:12px; padding:18px 24px; border-top:1px solid var(--skau-line); background:var(--skau-ink-0); }
.skau-reset{ display:inline-flex; align-items:center; padding:15px 4px; border:0; border-radius:0;
  background:none; cursor:pointer; font:600 13px/1 var(--skau-font); letter-spacing:.04em; color:var(--skau-fg-2); transition:color var(--skau-dur) var(--skau-ease); }
.skau-reset:hover{ color:var(--skau-ink-900); }
.skau-apply{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:15px 22px; border:1px solid var(--skau-ink-900); border-radius:0;
  background:var(--skau-ink-900); color:var(--skau-ink-0); font:600 13px/1 var(--skau-font); letter-spacing:.04em; cursor:pointer; transition:background var(--skau-dur) var(--skau-ease); }
.skau-apply:hover{ background:var(--skau-ink-700); }
.skau-apply .skau-n{ font-variant-numeric:tabular-nums; }

/* ---------- Defend against theme / plugin bleed ----------
   Themes like Flatsome add margins, transform: scale(), box-shadows, underlines
   or extra borders to buttons/links on hover. (e.g. Flatsome puts ~1em margin on
   every <button>, which knocked the facet-header rows out of alignment.) The
   high-specificity !important resets below keep the drawer looking as designed.
   Mirrors the SKAU Flyout Menu's defensive block. */
.skau-flyout a,
.skau-flyout button{
  margin:0 !important; box-shadow:none !important; border-radius:0 !important; text-shadow:none;
}
.skau-flyout a:hover, .skau-flyout a:focus, .skau-flyout a:active,
.skau-flyout button:hover, .skau-flyout button:focus, .skau-flyout button:active{
  transform:none !important; box-shadow:none !important; text-decoration:none !important; outline:none;
}
.skau-flyout ul, .skau-flyout ol{ margin:0 !important; padding:0 !important; list-style:none !important; }
.skau-flyout li{ margin:0 !important; padding:0 !important; list-style:none !important; }
.skau-flyout li::before{ content:none !important; }

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

/* loading state on the grid: block clicks AND fade the stale/unfiltered cards while
   the request is in flight, so the old rows + theme pager don't sit fully visible for
   the ~2s round-trip before the filtered result swaps in. */
.skau-loading{ pointer-events:none; opacity:.35; transition:opacity .15s ease; }