/* =========================================================================
   Jazzamatazz — FacetWP, complete stylesheet  (v2)
   =========================================================================
   REPLACES every earlier facet file. Delete these:
     jazzamatazz-facet-colours.css
     jazzamatazz-facet-colour-family.css
     jazzamatazz-facet-chrome.css
     jazzamatazz-facets.css   (the first version of this file)

   30 Sept 2026: filters open as a full-screen white pop-up on mobile AND
   tablet (up to 1024px), with a close X and a Show results button.
   Pairs with the JS snippet 'Jazzamatazz — filter pop-up' (v2).

   WHY v1 DIDN'T WORK
   When you add a CSS class to a FacetWP widget in Elementor, the class
   lands on the WIDGET wrapper, not on the facet itself. The real markup is:

     <div class="elementor-widget ... jz-family-facet">      <- your class
       <div class="elementor-widget-container">
         <div class="facetwp-facet facetwp-type-checkboxes"> <- the facet
           <div class="facetwp-checkbox">...

   So "display: grid" on .jz-family-facet was gridding a box with one child.
   The swatches stacked. Every rule below now walks down to .facetwp-facet.

   ONLY ONE CLASS IS REQUIRED NOW
     jz-family-facet   on the Colour Family facet widget

   Everything else keys off FacetWP's own classes, which exist nowhere else
   on the page, so nothing depends on you putting a wrapper in the right
   place. jz-rail is now optional and only used for the mobile panel.
   ========================================================================= */

:root {
  --jz-red:   #C8102E;
  --jz-ink:   #1A1A1A;   /* headings only */
  --jz-body:  #545454;   /* filter option labels */
  --jz-muted: #8A8A8A;   /* counts */
  --jz-stone: #82807B;   /* quiet UI furniture */
  --jz-line:  #CFC9C0;
}

/* -------------------------------------------------------------------------
   0. SPACING
   FacetWP ships .facetwp-facet { margin-bottom: 20px }. Stacked on top of the
   Elementor container gap and the divider widget's own padding, that is the
   large empty band under every group. The rail should get its spacing from
   the Elementor containers alone, so the facet contributes none.
   ------------------------------------------------------------------------- */
.facetwp-facet { margin-bottom: 0 !important; }

/* -------------------------------------------------------------------------
   1. EMPTY FACETS
   Costume Type, Availability and Size are rendering as blank gaps.
   This collapses the facet. To also hide its heading, wrap each
   heading + facet pair in an Elementor container with the class  jz-group.
   ------------------------------------------------------------------------- */
.facetwp-facet:empty { display: none !important; }
.jz-group:has(.facetwp-facet:empty) { display: none !important; }

/* -------------------------------------------------------------------------
   2. GROUP HEADINGS
   Put the class  jz-facet-label  on each Heading widget in the rail.
   ------------------------------------------------------------------------- */
/* A group heading has to be at least as present as the options under it, or
   the eye has nothing to anchor on. Ink, not grey.

   The asymmetric margin matters more than the weight: a heading sits close to
   its own options and far from the group above, so proximity does the
   grouping. Set the Elementor container gap in the rail to 0 and let these
   margins carry the rhythm, otherwise the two fight and everything ends up
   evenly spaced again, which is the state that reads as a flat list. */
.jz-facet-label,
.jz-facet-label .elementor-heading-title {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--jz-ink) !important;
  line-height: 1.4 !important;
  margin: 34px 0 12px !important;
}

/* the first group needs no gap above it */
.jz-rail > *:first-child .jz-facet-label,
.jz-rail > *:first-child.jz-facet-label,
.jz-rail > .jz-rail-head + * .jz-facet-label,
.jz-rail > .jz-rail-head + .jz-facet-label { margin-top: 0 !important; }

/* -------------------------------------------------------------------------
   3. CHECKBOX FACETS
   ------------------------------------------------------------------------- */
.facetwp-type-checkboxes .facetwp-checkbox,
.facetwp-type-radio .facetwp-checkbox {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 0;
  margin: 0;
  background: none !important;   /* kills FacetWP's default box image */
  font-size: 13px;
  line-height: 1.45;
  color: var(--jz-body);
  transition: color .12s ease;
  cursor: pointer;
}

.facetwp-type-checkboxes .facetwp-checkbox:hover { color: var(--jz-ink); }

/* selected reads darker, not heavier, so the row doesn't jump width */
.facetwp-type-checkboxes .facetwp-checkbox.checked {
  color: var(--jz-ink);
  font-weight: 500;
}

/* a real square instead of the background image */
.facetwp-type-checkboxes .facetwp-checkbox::before {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border: 1px solid #B9B3A9;
  background: #FFFFFF;
  transition: background .12s ease, border-color .12s ease;
}
.facetwp-type-checkboxes .facetwp-checkbox:hover::before { border-color: var(--jz-red); }

/* checked fills brand red with a white inset ring */
.facetwp-type-checkboxes .facetwp-checkbox.checked::before {
  background: var(--jz-red);
  border-color: var(--jz-red);
  box-shadow: inset 0 0 0 2px #FFFFFF;
}

/* ---- COLLECTION: hide the "… Pieces" categories ----
   Studios filter by collection, not by piece bucket. This hides them in the
   facet only. To also drop them from the counts, use the indexer snippet in
   the notes rather than this rule. */
.facetwp-facet-collection .facetwp-checkbox[data-value$="-pieces"] {
  display: none !important;
}

.facetwp-counter {
  margin-left: auto;
  font-size: 11px;
  font-weight: 400;
  color: var(--jz-muted);
}

.facetwp-toggle {
  display: inline-block;
  margin-top: 8px;
  font-size: 11px;
  color: var(--jz-red);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* -------------------------------------------------------------------------
   4. COLOUR FAMILY SWATCHES
   26px circles, six to a row. Targets the facet INSIDE the widget, and
   also works if the class ends up directly on the facet.
   ------------------------------------------------------------------------- */
.jz-family-facet .facetwp-facet,
.facetwp-facet.jz-family-facet {
  display: grid !important;
  grid-template-columns: repeat(6, 26px);
  gap: 9px;
  justify-content: start;
}

.jz-family-facet .facetwp-checkbox {
  position: relative;
  display: block !important;
  width: 26px;
  height: 26px;
  padding: 0;
  margin: 0;
  gap: 0;
  /* font-size:0 hides the label rather than text-indent + overflow:hidden.
     Overflow hidden would have clipped the tooltip below, and the text has to
     stay in the DOM for screen readers. */
  font-size: 0 !important;
  line-height: 0;
  border: 1px solid var(--jz-line);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transition: box-shadow .15s ease, border-color .15s ease;
}

/* ---- tooltip naming the family ----
   Reads the family straight off FacetWP's own data-value, so there is nothing
   to maintain: a family added later gets a tooltip automatically. Slugs are
   single words here, so capitalize is enough to turn "brown" into "Brown". */
.jz-family-facet .facetwp-checkbox::after {
  content: attr(data-value);
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  padding: 4px 8px;
  font-size: 10px;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: capitalize;
  white-space: nowrap;
  color: #FFFFFF;
  background: var(--jz-ink);
  border-radius: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
}
.jz-family-facet .facetwp-checkbox:hover::after,
.jz-family-facet .facetwp-checkbox:focus-visible::after { opacity: 1; }

/* the grid must not clip a tooltip rising out of the top row */
.jz-family-facet .facetwp-facet,
.facetwp-facet.jz-family-facet { overflow: visible; }
.jz-family-facet .facetwp-checkbox::before { content: none !important; }
.jz-family-facet .facetwp-counter { display: none !important; }

.jz-family-facet .facetwp-checkbox.checked {
  border-color: var(--jz-ink);
  box-shadow: inset 0 0 0 2px #FFFFFF, 0 0 0 2px var(--jz-ink);
}
.jz-family-facet .facetwp-checkbox:focus-visible {
  outline: 2px solid var(--jz-red);
  outline-offset: 2px;
}
.jz-family-facet .facetwp-checkbox.disabled { opacity: .25; cursor: default; }

/* the 18 families */
.jz-family-facet .facetwp-checkbox[data-value="black"]  { background: #1A1A1A !important; }
.jz-family-facet .facetwp-checkbox[data-value="blue"]   { background: #3A639E !important; }
/* Not the Brown colourway's own #422A1E: that sits only 18.8 dE from the black
   swatch, which is why the two circles read as the same. This is the family's
   perceptual centre pulled back toward black, since Copper (31 uses) and Brown
   (26) dominate the family and Copper is the light end. 41.8 dE from black and
   34.5 from gold, so it is clearly separate from both neighbours. */
.jz-family-facet .facetwp-checkbox[data-value="brown"]  { background: #7A4A2B !important; }
.jz-family-facet .facetwp-checkbox[data-value="gold"]   { background: #C48C3D !important; }
.jz-family-facet .facetwp-checkbox[data-value="green"]  { background: #0F9F72 !important; }
.jz-family-facet .facetwp-checkbox[data-value="grey"]   { background: #8A8A8A !important; }
.jz-family-facet .facetwp-checkbox[data-value="ivory"]  { background: #F2EDE2 !important; }
.jz-family-facet .facetwp-checkbox[data-value="multi"]  { background: #C9C9C9 !important; }
.jz-family-facet .facetwp-checkbox[data-value="orange"] { background: #E95E48 !important; }
.jz-family-facet .facetwp-checkbox[data-value="pink"]   { background: #EC729E !important; }
.jz-family-facet .facetwp-checkbox[data-value="purple"] { background: #9845B8 !important; }
.jz-family-facet .facetwp-checkbox[data-value="red"]    { background: #D8203A !important; }
.jz-family-facet .facetwp-checkbox[data-value="silver"] { background: #C9CACC !important; }
.jz-family-facet .facetwp-checkbox[data-value="white"]  { background: #FFFFFF !important; }
.jz-family-facet .facetwp-checkbox[data-value="yellow"] { background: #EBCA33 !important; }
.jz-family-facet .facetwp-checkbox[data-value="nude"]   { background: #DEBFA3 !important; }

.jz-family-facet .facetwp-checkbox[data-value="metallic"] {
  background: linear-gradient(135deg, #E6E6EA 0%, #A9A9B0 45%, #F0F0F4 100%) !important;
}
.jz-family-facet .facetwp-checkbox[data-value="print"] {
  background: conic-gradient(#C9C9C9 0deg 90deg, #8A8A8A 90deg 180deg, #C9C9C9 180deg 270deg, #8A8A8A 270deg 360deg) !important;
}

/* pale ones would vanish against the page */
.jz-family-facet .facetwp-checkbox[data-value="white"],
.jz-family-facet .facetwp-checkbox[data-value="ivory"] { border-color: #B0A99E; }

/* -------------------------------------------------------------------------
   5. PRICE SLIDER
   Set Prefix = $ and Decimals = 0 in the facet's own settings.
   CSS cannot add the currency symbol.
   ------------------------------------------------------------------------- */
.facetwp-type-slider .noUi-target {
  height: 2px;
  background: var(--jz-line);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 14px 8px 0;
}
.facetwp-type-slider .noUi-connect { background: var(--jz-ink); }

.facetwp-type-slider .noUi-handle {
  width: 15px !important;
  height: 15px !important;
  top: -7px !important;
  right: -8px !important;
  border: 1px solid var(--jz-ink);
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: none;
  cursor: grab;
}
.facetwp-type-slider .noUi-handle::before,
.facetwp-type-slider .noUi-handle::after { display: none; }
.facetwp-type-slider .noUi-handle:active { cursor: grabbing; }

.facetwp-slider-label {
  margin-top: 14px;
  font-size: 12px;
  color: var(--jz-muted);
}

/* THE GIANT RED BUTTON.
   Best fix: turn "Reset button" OFF in the slider facet settings, since
   Clear all already covers it. This makes it a text link if you keep it. */
.facetwp-slider-reset {
  display: inline-block;
  margin-top: 10px;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: inherit !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1.2 !important;
  color: var(--jz-red) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  box-shadow: none !important;
  cursor: pointer;
}
.facetwp-slider-reset:hover { color: #8F0B20 !important; }

/* -------------------------------------------------------------------------
   6. SEARCH + AUTOCOMPLETE
   The Autocomplete dropdown is jQuery UI and gets appended to <body>, not
   inside the rail, so those rules cannot be scoped to a wrapper class.
   ------------------------------------------------------------------------- */
/* The Go button is positioned INSIDE the input rather than laid out beside it.
   Flex was the obvious way to do that and it was wrong: FacetWP and jQuery UI
   both drop extra elements into this facet (a live-region status node, hint
   text), and a flex container turns every one of them into a visible column
   sitting on top of the field. Absolute positioning touches nothing else. */
.facetwp-type-autocomplete .facetwp-facet,
.facetwp-facet.facetwp-type-autocomplete {
  position: relative;
  z-index: 100;
}

/* The suggestion list is a child of this facet, so raising the list alone
   achieves nothing: it can never paint above a sibling that its own parent
   sits below. The whole widget has to be lifted out of the rail's stacking
   order, which is what this does without needing a class on it. */
.elementor-widget:has(.facetwp-type-autocomplete),
.elementor-widget-container:has(.facetwp-type-autocomplete) {
  position: relative;
  z-index: 100;
}

/* Anything else that lands in here is for screen readers only.
   Not display:none, which would take it away from them too. */
.ui-helper-hidden-accessible,
.facetwp-type-autocomplete [role="status"],
.facetwp-type-autocomplete [aria-live]:not(.fcomplete-wrap) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  pointer-events: none !important;
}

input.facetwp-search,
input.facetwp-autocomplete {
  width: 100%;
  min-width: 0;          /* lets the input shrink inside the flex row */
  height: 40px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 13px;
  color: var(--jz-ink);
  background: #FFFFFF;
  border: 1px solid var(--jz-line);
  border-radius: 0;
  box-sizing: border-box;
  text-overflow: ellipsis;
}

/* room on the right for the button that sits over it */
input.facetwp-autocomplete {
  display: block;
  padding-right: 48px;
}
input.facetwp-search:focus,
input.facetwp-autocomplete:focus { outline: none; border-color: var(--jz-red); }

/* the placeholder is a long sentence, so it runs smaller than the typed text */
input.facetwp-search::placeholder,
input.facetwp-autocomplete::placeholder {
  font-size: 12px;
  color: var(--jz-muted);
  opacity: 1;
}

/* GO becomes a 40px magnifier tucked into the right of the field.
   The label is still there for screen readers, just not drawn. */
.facetwp-autocomplete-update,
input.facetwp-autocomplete-update {
  position: absolute;
  top: 1px;
  right: 1px;
  z-index: 2;
  width: 38px !important;
  height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0 !important;      /* hides the word GO */
  line-height: 0 !important;
  text-indent: 0;
  color: transparent !important;
  background-color: var(--jz-stone) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.3-4.3'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 16px 16px !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background-color .15s ease;
}
/* hover darkens rather than turning red: it is a quiet control, not a CTA */
.facetwp-autocomplete-update:hover,
input.facetwp-autocomplete-update:hover { background-color: #63615D !important; }

/* ---- the suggestion dropdown ----
   FacetWP does NOT use jQuery UI here. It ships its own widget, "fcomplete",
   and the list is .fcomplete-wrap. Every .ui-autocomplete rule I wrote before
   matched nothing, which is why the type size never moved. Those selectors are
   kept below only in case a FacetWP add-on falls back to jQuery UI.

   The item class inside the wrap is not documented, so these rules target the
   wrap's children generically rather than guessing a name. */
.fcomplete-wrap {
  z-index: 999999 !important;
  width: 100% !important;
  max-width: 100% !important;
  left: 0 !important;
  max-height: 320px;
  overflow-y: auto;
  margin: 2px 0 0;
  padding: 0 !important;
  background: #FFFFFF !important;
  border: 1px solid var(--jz-line) !important;
  border-radius: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  font-family: inherit;
}

.fcomplete-wrap,
.fcomplete-wrap * {
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-family: inherit !important;
}

/* The rows are NOT direct children of .fcomplete-wrap. There is a list element
   in between. Styling that intermediate element is what produced the two
   nested boxes: an outer band that lit up whenever the pointer was anywhere
   over the list, plus the row itself. So the wrapper is stripped back to
   nothing and only the rows carry any box of their own. */
.fcomplete-wrap > * {
  display: block !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  list-style: none !important;
}

/* one suggestion */
.fcomplete-wrap li,
.fcomplete-wrap > * > * {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;         /* Boys carries 30 codes */
  -webkit-box-orient: vertical;
  overflow: hidden;
  box-sizing: border-box;
  width: 100% !important;
  padding: 10px 12px !important;
  margin: 0 !important;
  color: var(--jz-body) !important;
  background: #FFFFFF !important;
  border: 0 !important;
  border-bottom: 1px solid #F0EDE8 !important;
  text-decoration: none;
  cursor: pointer;
  transition: background .12s ease;
}
.fcomplete-wrap li:last-child,
.fcomplete-wrap > * > *:last-child { border-bottom: 0 !important; }

/* Hover only, and a warm neutral rather than any red. The rows sit on white
   now, so a couple of shades is enough to read as a state. */
.fcomplete-wrap li:hover,
.fcomplete-wrap > * > *:hover {
  background: #F0ECE5 !important;
  color: var(--jz-ink) !important;
}

/* ---- jQuery UI fallback, harmless if nothing matches ---- */
.ui-autocomplete,
.ui-front {
  z-index: 999999 !important;
}
.ui-autocomplete {
  max-height: 320px;
  overflow-y: auto;
  padding: 0;
  margin: 2px 0 0;
  list-style: none;
  background: #FFFFFF;
  border: 1px solid var(--jz-line);
  border-radius: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .10);
  font-family: inherit;
}
.ui-autocomplete .ui-menu-item {
  padding: 0;
  border: 0;
  border-bottom: 1px solid #F0EDE8;
}
.ui-autocomplete .ui-menu-item:last-child { border-bottom: 0; }

/* jQuery UI has used three different wrappers for a menu item across its
   versions: a bare <div>, a .ui-menu-item-wrapper, and an <a>. Targeting the
   direct child whatever it is catches all of them. */
.ui-autocomplete,
.ui-autocomplete .ui-menu-item,
.ui-autocomplete .ui-menu-item > * {
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-family: inherit;
}

/* Two lines maximum. A few costumes carry a lot of catalogue codes (Boys has
   30), and the whole string still has to be searchable, so it is clamped
   visually rather than shortened in the data. The name leads, so the clamp
   never hides it. */
.ui-autocomplete .ui-menu-item > * {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding: 8px 12px;
  color: var(--jz-body);
  background: none;
  border: 0;
  margin: 0;
  text-decoration: none;
  cursor: pointer;
}
.ui-autocomplete .ui-menu-item > *.ui-state-active,
.ui-autocomplete .ui-menu-item > *.ui-state-focus,
.ui-autocomplete .ui-menu-item > *:hover {
  background: #F6F3EF;
  color: var(--jz-ink);
  border: 0;
  margin: 0;
}
/* (the visually-hidden rule for this lives up in section 6) */

/* -------------------------------------------------------------------------
   7. RESET  (the Clear all, and any per-group ones)
   ------------------------------------------------------------------------- */
.facetwp-type-reset { display: inline-block; line-height: 1; }

.facetwp-reset,
button.facetwp-reset,
a.facetwp-reset,
.facetwp-type-reset .facetwp-facet > * {
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1.2 !important;
  color: var(--jz-red) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  box-shadow: none !important;
  cursor: pointer;
}
.facetwp-reset:hover { color: #8F0B20 !important; }
.facetwp-reset:focus-visible { outline: 2px solid var(--jz-red); outline-offset: 3px; }

/* -------------------------------------------------------------------------
   8. ACTIVE FILTER CHIPS
   Shortcode widget:  [facetwp selections="true"]
   Only renders when something is selected, so it is invisible in the
   Elementor editor. Check it on the front end.
   ------------------------------------------------------------------------- */
.facetwp-selections > ul {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.facetwp-selections > ul > li { display: contents; }
.facetwp-selections .facetwp-selection-label { display: none; }

.facetwp-selections .facetwp-selection-value {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  background: #FFFFFF;
  border: 1px solid var(--jz-line);
  border-radius: 0;
  font-size: 11px;
  line-height: 1.3;
  color: var(--jz-body);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.facetwp-selections .facetwp-selection-value:hover {
  border-color: var(--jz-ink);
  color: var(--jz-ink);
}

/* ONE ×, not two.
   FacetWP prints its own remove element and that is the clickable one, so
   we style theirs and add none of our own. */
.facetwp-selections .facetwp-selection-value > .facetwp-selection-remove,
.facetwp-selections .facetwp-selection-value > span:last-child {
  font-size: 14px;
  line-height: 1;
  color: var(--jz-muted);
  transition: color .15s ease;
}
.facetwp-selections .facetwp-selection-value:hover > .facetwp-selection-remove,
.facetwp-selections .facetwp-selection-value:hover > span:last-child {
  color: var(--jz-red);
}

/* -------------------------------------------------------------------------
   9. RESULT COUNT + SORT  (above the grid)
   ------------------------------------------------------------------------- */
/* Result count.
   The figures are bolded by putting <b> tags in the facet's own "Count text"
   setting, not here: FacetWP prints that line as flat text, so CSS has nothing
   to hook onto to separate the numbers from the words. */
.facetwp-counts,
.facetwp-type-pager .facetwp-counts,
.facetwp-type-pager {
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  color: var(--jz-body) !important;
}
.facetwp-counts b,
.facetwp-counts strong {
  font-weight: 600 !important;
  color: var(--jz-ink) !important;
}

.facetwp-type-sort select,
select.facetwp-sort-select {
  font-family: inherit;
  font-size: 13px;
  color: var(--jz-ink);
  background: #FFFFFF;
  border: 1px solid var(--jz-line);
  border-radius: 0;
  padding: 9px 12px;
  min-width: 190px;
}

/* ------------------------------------------------------------------------
   10. PAGER
   ------------------------------------------------------------------------- */
.facetwp-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding-top: 48px;
}
.facetwp-pager .facetwp-page {
  min-width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--jz-ink);
  background: #FFFFFF;
  border: 1px solid var(--jz-line);
  border-radius: 0;
  text-decoration: none;
  cursor: pointer;
}
.facetwp-pager .facetwp-page:hover { border-color: var(--jz-ink); }
.facetwp-pager .facetwp-page.active {
  background: var(--jz-ink);
  border-color: var(--jz-ink);
  color: #FFFFFF;
  font-weight: 600;
  cursor: default;
}
.facetwp-pager .facetwp-page.prev,
.facetwp-pager .facetwp-page.next {
  padding: 0 16px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.facetwp-pager .facetwp-page.dots {
  border: 0;
  background: none;
  min-width: auto;
  color: var(--jz-muted);
  cursor: default;
}

/* -------------------------------------------------------------------------
   11. LOADING
   ------------------------------------------------------------------------- */
.facetwp-loading {
  opacity: .45;
  transition: opacity .15s ease;
  pointer-events: none;
}

/* -------------------------------------------------------------------------
   12. MOBILE + TABLET FILTER POP-UP  (up to 1024px)
   Needs  jz-rail  on the container holding the whole filter column, and
   jz-filter-toggle  on the filter icon. The JS snippet adds the header bar
   (title + close X) and the Show results button.

   Closed: the rail is gone and the product grid takes the full width.
   Open:   the rail becomes a full-screen white panel with its own scroll,
           a sticky header with a close X, and a sticky Show results button.
           The page behind it is locked so only the panel scrolls.

   One set of facets, repositioned. Never duplicate a facet: FacetWP breaks
   when the same facet appears twice on a page.

   Everything is !important because Elementor's container rules
   (.elementor-element.e-con) and the theme's button rules otherwise win.
   ------------------------------------------------------------------------- */
.jz-rail-head,
.jz-rail-done { display: none !important; }

@media (max-width: 1024px) {

  /* ---- closed ---- */
  .jz-rail { display: none !important; }

  /* rail and grid stack instead of sitting side by side, so the grid
     fills the width. Works whatever the Elementor tablet settings are. */
  .e-con:has(> .jz-rail),
  .e-con-inner:has(> .jz-rail) {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }
  .e-con:has(> .jz-rail) > .e-con,
  .e-con-inner:has(> .jz-rail) > .e-con {
    --width: 100%;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ---- open: full-screen panel ---- */
  .jz-rail.is-open {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 999999 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 0 20px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: #FFFFFF !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

  /* everything inside goes flat white, full width, no grey boxes */
  .jz-rail.is-open .e-con,
  .jz-rail.is-open .e-con-inner {
    --width: 100%;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    background: #FFFFFF !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .jz-rail.is-open .e-con::before { display: none !important; }

  /* sticky header: title left, close X right */
  .jz-rail.is-open .jz-rail-head {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 5;
    margin: 0 -20px 16px;
    padding: 10px 10px 10px 20px;
    background: #FFFFFF;
    border-bottom: 1px solid var(--jz-line);
  }
  .jz-rail-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--jz-ink);
  }
  .jz-rail.is-open .jz-rail-close {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: inherit !important;
    font-size: 28px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    color: var(--jz-ink) !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
  }
  .jz-rail.is-open .jz-rail-close:hover { color: var(--jz-red) !important; }
  .jz-rail.is-open .jz-rail-close:focus:not(:focus-visible) { outline: none !important; }

  /* sticky Show results bar across the full width of the screen */
  .jz-rail.is-open .jz-rail-done {
    display: block !important;
    position: sticky;
    bottom: 0;
    z-index: 5;
    width: calc(100% + 40px) !important;
    margin: 28px -20px 0 !important;
    padding: 17px 0 calc(17px + env(safe-area-inset-bottom)) !important;
    font-family: inherit !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: #FFFFFF !important;
    background: var(--jz-ink) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: 0 -12px 16px #FFFFFF !important;
    cursor: pointer;
  }

  /* lock the page behind the panel */
  html.jz-rail-lock,
  html.jz-rail-lock body {
    overflow: hidden !important;
  }

  /* An Elementor entrance animation leaves a transform on the container,
     and any transform on a parent traps a fixed panel inside that parent
     instead of the screen. Cleared only while the panel is open. */
  html.jz-rail-lock .elementor-element:has(.jz-rail.is-open),
  html.jz-rail-lock .e-con:has(.jz-rail.is-open),
  html.jz-rail-lock .e-con-inner:has(.jz-rail.is-open) {
    transform: none !important;
    animation: none !important;
    filter: none !important;
    will-change: auto !important;
    contain: none !important;
    z-index: auto !important;
  }

  /* ---- toggle icon ---- */
  .jz-filter-toggle { display: inline-flex !important; cursor: pointer; }
  .jz-filter-toggle::after { content: attr(data-count); margin-left: 6px; }

  /* a little more room per swatch for thumbs */
  .jz-family-facet .facetwp-facet { grid-template-columns: repeat(6, 32px); gap: 11px; }
  .jz-family-facet .facetwp-checkbox { width: 32px; height: 32px; }

  /* tap targets */
  .facetwp-type-checkboxes .facetwp-checkbox { padding: 8px 0; }
}

@media (min-width: 1025px) {
  .jz-filter-toggle { display: none !important; }
}
/* LOADING SPINNER */
body.jz-loading .facetwp-template {
  opacity: .4;
  pointer-events: none;
  transition: opacity .15s ease;
}
body.jz-loading::after {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border: 3px solid rgba(0,0,0,.12);
  border-top-color: var(--jz-ink, #111);
  border-radius: 50%;
  animation: jz-spin .7s linear infinite;
  z-index: 99999;
}
@keyframes jz-spin { to { transform: rotate(360deg); } }