/*
 * FFL Filters: storefront panel components.
 * Tokens live in tokens.css. This file never sets a webfont or the brand class.
 * 1.2.0 (FFLF-POLISH-2): compact desktop sizes, values open straight under each group, long lists scroll in a capped box,
 * filters apply on click with a loading bar over the products.
 * 1.2.1 (FFLF-POLISH-3): no outer frame, so the panel runs edge to edge in its column; every group starts closed;
 * group headers keep their own colours in every state; values wrap on word boundaries only.
 */
:where(.ffl-filters) {
  /* Compact sizes. Rows are 32px on desktop and go back to the 44px touch target on phones, tablets and touch screens. */
  --ffl-filters-label-size: 15px;   /* 15px group labels */
  --ffl-filters-value-size: 14px;    /* 14px values */
  --ffl-filters-hint-size: 13px;    /* 13px counts, chips, hints */
  --ffl-filters-compact-line-height: 1.3;
  --ffl-filters-panel-padding: var(--ffl-filters-space-3); /* 12px */
  --ffl-filters-group-gap: var(--ffl-filters-space-1);     /* 4px */
  --ffl-filters-pill-height: 40px;       /* group header; the style guide floor for controls */
  --ffl-filters-field-height: 40px;      /* price, range and search boxes */
  --ffl-filters-row-height: 32px;        /* one value row */
  --ffl-filters-chip-height: 28px;
  --ffl-filters-cap-rows: 8;             /* long lists scroll after 8 rows */
  /* 1.2.1: sizes are in px, not rem, because some themes shrink the root font size (OceanWP sets 62.5%). */
}

@media (max-width: 1024px), (pointer: coarse) {
  :where(.ffl-filters) {
    --ffl-filters-pill-height: var(--ffl-filters-control-height);
    --ffl-filters-field-height: var(--ffl-filters-control-height);
    --ffl-filters-row-height: var(--ffl-filters-control-height);
    --ffl-filters-chip-height: var(--ffl-filters-control-height);
  }
}

:where(.ffl-filters) {
  box-sizing: border-box;
  font-family: var(--ffl-filters-font), var(--ffl-filters-font-fallback);
  font-size: var(--ffl-filters-label-size);
  line-height: var(--ffl-filters-compact-line-height);
  color: var(--ffl-filters-text);
  /* No frame of its own: the group pills run edge to edge in the sidebar column. */
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  /* 1.3.0: the panel is its own size container, so Layout Auto follows the space the filters have, not the screen. */
  container-type: inline-size;
  container-name: fflf-panel;
}

:where(.ffl-filters) *,
:where(.ffl-filters) *::before,
:where(.ffl-filters) *::after {
  box-sizing: border-box;
}

/*
 * 1.2.1: reset theme form styles inside the panel so it looks the same on any theme.
 * Two root classes plus the element out-rank theme rules such as button:hover or .widget input[type=number];
 * every component rule below carries the same two root classes plus its own class, so it still wins over this reset.
 */
.ffl-filters.ffl-filters button,
.ffl-filters.ffl-filters input,
.ffl-filters.ffl-filters select,
.ffl-filters.ffl-filters button:where(:hover, :focus, :active),
.ffl-filters.ffl-filters input:where(:hover, :focus, :active),
.ffl-filters.ffl-filters select:where(:hover, :focus, :active) {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  letter-spacing: normal;
  text-transform: none;
  text-shadow: none;
  text-decoration: none;
  box-shadow: none;
  outline: 0;
  transform: none;
  float: none;
}

/* Checkboxes outside the value rows stay native. The value-row boxes are drawn below (1.3.1), and the In Stock
   switch restyles its own. */
.ffl-filters.ffl-filters input:where([type="checkbox"]),
.ffl-filters.ffl-filters input:where([type="checkbox"]):where(:hover, :focus, :active) {
  -webkit-appearance: checkbox;
  appearance: auto;
  border: 0;
  background: none;
}

.ffl-filters.ffl-filters label,
.ffl-filters.ffl-filters legend,
.ffl-filters.ffl-filters fieldset {
  float: none;
  max-width: 100%;
  text-transform: none;
  letter-spacing: normal;
}

/* 1.3.3: themes give fieldsets and their legends a box of their own (Storefront: a #fbfbfb background, padding and a
   negative margin on fieldset legend). The group boxes and their titles stay see-through so the pills sit on the plate;
   the plugin's own classes set any spacing they need. 1.3.4: the same :not(#fflf-no-id) boost as the panel title, so
   an ID-scoped theme rule (such as "#primary fieldset legend") cannot put the box back. :not(#fflf-no-id) never
   matches an element but counts as an ID. The visually hidden legend keeps its own clip rule (margin: -1px). */
.ffl-filters.ffl-filters legend:not(#fflf-no-id):not(.ffl-filters__visually-hidden) {
  background: transparent;
  padding: 0;
  margin: 0;
}

.ffl-filters.ffl-filters fieldset:not(#fflf-no-id) {
  background: transparent;
}

.ffl-filters.ffl-filters .ffl-filters__skip {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ffl-filters.ffl-filters .ffl-filters__skip:focus,
.ffl-filters.ffl-filters .ffl-filters__skip:focus-visible {
  position: static;
  left: auto;
  width: auto;
  height: auto;
  overflow: visible;
  display: inline-flex;
  align-items: center;
  min-height: var(--ffl-filters-control-height);
  margin-bottom: var(--ffl-filters-space-2);
  padding: 0 var(--ffl-filters-control-padding-x);
  color: var(--ffl-filters-text);
}

.ffl-filters.ffl-filters .ffl-filters__visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*
 * The title is a real heading, so themes style it with ID rules such as
 * Astra's "#secondary h2". :not(#fflf-no-id) never matches an element but
 * gives this rule ID-level specificity, which beats those without !important.
 */
.ffl-filters.ffl-filters .ffl-filters__title:not(#fflf-no-id) {
  margin: 0 0 var(--ffl-filters-space-1);
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--ffl-filters-label-size);
  font-weight: 600;
  font-style: normal;
  line-height: var(--ffl-filters-compact-line-height);
  letter-spacing: normal;
  text-transform: none;
  color: var(--ffl-filters-text);
}

.ffl-filters.ffl-filters .ffl-filters__live {
  margin: 0 0 var(--ffl-filters-space-2);
  color: var(--ffl-filters-muted);
  font-size: var(--ffl-filters-hint-size);
}

.ffl-filters.ffl-filters .ffl-filters__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}

.ffl-filters.ffl-filters .ffl-filters__chips li {
  margin: 0;
  padding: 0;
}

.ffl-filters.ffl-filters .ffl-filters__chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--ffl-filters-chip-height);
  max-width: 100%;
  padding: 0 10px 0 12px;
  border: 1px solid var(--ffl-filters-chip-active-border);
  border-radius: var(--ffl-filters-radius-pill);
  background: var(--ffl-filters-chip-active-bg);
  color: var(--ffl-filters-chip-active-text);
  font-size: var(--ffl-filters-hint-size);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
}

.ffl-filters.ffl-filters .ffl-filters__chip-label {
  min-width: 0;
  overflow-wrap: break-word;
}

.ffl-filters.ffl-filters .ffl-filters__chip:hover,
.ffl-filters.ffl-filters .ffl-filters__chip:focus-visible {
  text-decoration: none;
}

.ffl-filters.ffl-filters .ffl-filters__form {
  margin: 0;
}

/* Groups sit 4px apart with no divider. */
.ffl-filters.ffl-filters .ffl-filters__group {
  margin: 0 0 var(--ffl-filters-group-gap);
  padding: 0;
  border: 0;
  min-width: 0;
}

.ffl-filters.ffl-filters .ffl-filters__group-title {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: var(--ffl-filters-label-size);
  font-weight: 600;
  color: var(--ffl-filters-text);
}

/* The group header is one pill. It opens straight to the values; there is no second control inside. */
.ffl-filters.ffl-filters .ffl-filters__toggle {
  display: flex;
  align-items: center;
  gap: var(--ffl-filters-space-2);
  width: 100%;
  min-height: var(--ffl-filters-pill-height);
  margin: 0;
  padding: 4px 12px;
  border: 1px solid var(--ffl-filters-border-subtle);
  border-radius: var(--ffl-filters-radius-pill);
  background: var(--ffl-filters-surface-alt);
  color: inherit;
  font: inherit;
  font-size: var(--ffl-filters-label-size);
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}

.ffl-filters.ffl-filters .ffl-filters__toggle[aria-expanded="true"] {
  border-color: var(--ffl-filters-border);
  background: var(--ffl-filters-surface);
}

.ffl-filters.ffl-filters .ffl-filters__toggle-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
}

.ffl-filters.ffl-filters .ffl-filters__toggle-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--ffl-filters-radius-pill);
  background: var(--ffl-filters-chip-active-bg);
  color: var(--ffl-filters-chip-active-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

.ffl-filters.ffl-filters .ffl-filters__toggle-icon {
  display: block;
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-right: var(--ffl-filters-chevron-stroke) solid var(--ffl-filters-chevron-color);
  border-bottom: var(--ffl-filters-chevron-stroke) solid var(--ffl-filters-chevron-color);
  transform: translateY(-2px) rotate(45deg);
  margin: 0 2px 0 2px;
  transition: transform var(--ffl-filters-transition);
}

.ffl-filters.ffl-filters .ffl-filters__toggle[aria-expanded="true"] .ffl-filters__toggle-icon {
  transform: translateY(2px) rotate(225deg);
}

.ffl-filters.ffl-filters .ffl-filters__options {
  margin: 0;
  padding: 6px 0 8px;
}

.ffl-filters.ffl-filters .ffl-filters__options[hidden] {
  display: none;
}

.ffl-filters.ffl-filters .ffl-filters__list {
  margin: 0;
  padding: 0;
}

/* Long lists stop at 8 rows and scroll inside their own box; the scrollbar stays visible. */
.ffl-filters.ffl-filters .ffl-filters__list--cap {
  max-height: calc(var(--ffl-filters-row-height) * var(--ffl-filters-cap-rows) + 2px);
  overflow-y: scroll;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  border: 1px solid var(--ffl-filters-border-subtle);
  border-radius: var(--ffl-filters-radius);
}

.ffl-filters.ffl-filters .ffl-filters__option {
  display: flex;
  align-items: center;
  gap: var(--ffl-filters-space-2);
  min-height: var(--ffl-filters-row-height);
  padding: 4px 8px;
  margin: 0;
  border-radius: 4px;
  cursor: pointer;
  color: var(--ffl-filters-text);
  font-size: var(--ffl-filters-value-size);
  font-weight: 400;
  line-height: 1.25;
}

.ffl-filters.ffl-filters .ffl-filters__option--depth-1 { padding-left: 24px; }
.ffl-filters.ffl-filters .ffl-filters__option--depth-2 { padding-left: 40px; }
.ffl-filters.ffl-filters .ffl-filters__option--depth-3 { padding-left: 56px; }
.ffl-filters.ffl-filters .ffl-filters__option--depth-4 { padding-left: 72px; }

.ffl-filters.ffl-filters .ffl-filters__option:hover {
  background: var(--ffl-filters-surface-alt);
}

.ffl-filters.ffl-filters .ffl-filters__option input {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--ffl-filters-accent);
}

.ffl-filters.ffl-filters .ffl-filters__option-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
}

.ffl-filters.ffl-filters .ffl-filters__option input:checked + .ffl-filters__option-label {
  font-weight: 600;
}

.ffl-filters.ffl-filters .ffl-filters__count {
  flex: 0 0 auto;
  color: var(--ffl-filters-muted);
  font-size: var(--ffl-filters-hint-size);
  font-variant-numeric: tabular-nums;
}

/* No-JavaScript fallback only; the script loads the full list as soon as the group opens. */
.ffl-filters.ffl-filters .ffl-filters__show-all {
  display: inline-flex;
  align-items: center;
  min-height: var(--ffl-filters-row-height);
  margin: var(--ffl-filters-space-1) 0 0;
  padding: 0 8px;
  color: var(--ffl-filters-text);
  font-size: var(--ffl-filters-value-size);
}

.ffl-filters.ffl-filters .ffl-filters__show-all[hidden] {
  display: none;
}

/* Search sits on top of a long list. */
.ffl-filters.ffl-filters .ffl-filters__search {
  position: relative;
  margin: 0 0 6px;
}

.ffl-filters.ffl-filters .ffl-filters__search[hidden] {
  display: none;
}

.ffl-filters.ffl-filters .ffl-filters__search-icon {
  position: absolute;
  left: 12px;
  top: calc(var(--ffl-filters-field-height) / 2 - 7px);
  width: 12px;
  height: 12px;
  border: 2px solid var(--ffl-filters-muted);
  border-radius: 50%;
  pointer-events: none;
}

.ffl-filters.ffl-filters .ffl-filters__search-icon::after {
  content: "";
  position: absolute;
  right: -6px;
  bottom: -4px;
  width: 6px;
  height: 2px;
  background: var(--ffl-filters-muted);
  transform: rotate(45deg);
}

.ffl-filters.ffl-filters .ffl-filters__search-input {
  width: 100%;
  min-height: var(--ffl-filters-field-height);
  margin: 0;
  padding: 0 10px;
  border: 1px solid var(--ffl-filters-border);
  border-radius: var(--ffl-filters-radius);
  background: var(--ffl-filters-surface);
  color: var(--ffl-filters-text);
  font: inherit;
  font-size: var(--ffl-filters-value-size);
}

.ffl-filters.ffl-filters .ffl-filters__search-icon + .ffl-filters__search-input {
  padding-left: 32px;
}

.ffl-filters.ffl-filters .ffl-filters__search-input::placeholder {
  color: var(--ffl-filters-muted);
  opacity: 1;
}

.ffl-filters.ffl-filters .ffl-filters__search-status {
  margin: var(--ffl-filters-space-1) 0 0;
  color: var(--ffl-filters-muted);
  font-size: var(--ffl-filters-hint-size);
}

.ffl-filters.ffl-filters .ffl-filters__search-status:empty {
  display: none;
}

.ffl-filters.ffl-filters .ffl-filters__option[hidden] {
  display: none;
}

/* Price and numeric ranges: two boxes with the unit inside, no slider. */
.ffl-filters.ffl-filters .ffl-filters__price {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 10px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  margin: 0;
}

.ffl-filters.ffl-filters .ffl-filters__price-sep {
  display: block;
  height: 2px;
  background: var(--ffl-filters-border-subtle);
}

.ffl-filters.ffl-filters .ffl-filters__price-field {
  position: relative;
  display: block;
  min-width: 0;
  margin: 0;
}

.ffl-filters.ffl-filters .ffl-filters__price-field input {
  width: 100%;
  min-height: var(--ffl-filters-field-height);
  margin: 0;
  padding: 0 8px;
  border: 1px solid var(--ffl-filters-border);
  border-radius: var(--ffl-filters-radius);
  background: var(--ffl-filters-surface);
  color: var(--ffl-filters-text);
  font: inherit;
  font-size: var(--ffl-filters-value-size);
  -moz-appearance: textfield;
}

.ffl-filters.ffl-filters .ffl-filters__price-field input::-webkit-outer-spin-button,
.ffl-filters.ffl-filters .ffl-filters__price-field input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.ffl-filters.ffl-filters .ffl-filters__price-field input::placeholder {
  color: var(--ffl-filters-muted);
  opacity: 1;
}

.ffl-filters.ffl-filters .ffl-filters__price-field--prefix input {
  padding-left: 22px;
}

.ffl-filters.ffl-filters .ffl-filters__price-field--suffix input {
  padding-right: 28px;
}

.ffl-filters.ffl-filters .ffl-filters__unit {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  pointer-events: none;
}

.ffl-filters.ffl-filters .ffl-filters__unit--pre {
  left: 9px;
}

.ffl-filters.ffl-filters .ffl-filters__unit--suf {
  right: 9px;
}

.ffl-filters.ffl-filters .ffl-filters__currency {
  color: var(--ffl-filters-muted);
  font-size: var(--ffl-filters-hint-size);
}

.ffl-filters.ffl-filters .ffl-filters__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ffl-filters-space-2);
  align-items: center;
  margin-top: var(--ffl-filters-space-3);
}

.ffl-filters.ffl-filters .ffl-filters__apply,
.ffl-filters.ffl-filters .ffl-filters__done,
.ffl-filters.ffl-filters .ffl-filters__open,
.ffl-filters.ffl-filters .ffl-filters__drawer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ffl-filters-control-height);
  padding: 0 var(--ffl-filters-space-4);
  border: 1px solid var(--ffl-filters-accent);
  border-radius: var(--ffl-filters-radius);
  background: var(--ffl-filters-accent);
  color: var(--ffl-filters-accent-contrast);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

/* "Show N products" closes the phone drawer; it uses the chip colours so the contrast fallback covers it too. */
.ffl-filters.ffl-filters .ffl-filters__done {
  display: none;
  flex: 1 1 auto;
  border-color: var(--ffl-filters-chip-active-border);
  background: var(--ffl-filters-chip-active-bg);
  color: var(--ffl-filters-chip-active-text);
}

.ffl-filters.ffl-filters .ffl-filters__clear,
.ffl-filters.ffl-filters .ffl-filters__drawer-close {
  background: var(--ffl-filters-surface);
  color: var(--ffl-filters-text);
  border-color: var(--ffl-filters-border);
}

.ffl-filters.ffl-filters .ffl-filters__clear {
  display: inline-flex;
  align-items: center;
  min-height: var(--ffl-filters-chip-height);
  padding: 0 var(--ffl-filters-space-2);
  font-size: var(--ffl-filters-hint-size);
}

.ffl-filters.ffl-filters :focus-visible {
  /* Keyboard ring in the text colour, so it is visible on any theme and never a store accent red. */
  outline: var(--ffl-filters-focus-ring-width) solid var(--ffl-filters-text, #1F2933);
  outline-offset: var(--ffl-filters-focus-ring-offset);
}

/* Open button is reserved in-flow so the drawer does not shift the page. */
.ffl-filters.ffl-filters .ffl-filters__open {
  display: none;
  width: 100%;
  margin-bottom: var(--ffl-filters-space-3);
}

.ffl-filters.ffl-filters .ffl-filters__drawer-close {
  display: none;
  margin-bottom: var(--ffl-filters-space-3);
}

.ffl-filters.ffl-filters .ffl-filters__backdrop {
  display: none;
}

@media (max-width: 1024px) {
  .ffl-filters.ffl-filters.ffl-filters--drawer {
    border: 0;
    padding: 0;
    background: transparent;
  }

  .ffl-filters.ffl-filters.ffl-filters--drawer .ffl-filters__open {
    display: inline-flex;
  }

  .ffl-filters.ffl-filters.ffl-filters--drawer .ffl-filters__drawer-close {
    display: inline-flex;
  }

  .ffl-filters.ffl-filters.ffl-filters--drawer .ffl-filters__backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(15, 27, 45, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 80ms ease-out;
  }

  .ffl-filters.ffl-filters.ffl-filters--drawer .ffl-filters__drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 100001;
    width: min(352px, 100%);
    overflow: auto;
    padding: var(--ffl-filters-space-4);
    background: var(--ffl-filters-surface);
    border-right: 1px solid var(--ffl-filters-border);
    transform: translateX(-100%);
    transition: transform 80ms ease-out;
    visibility: hidden;
  }

  .ffl-filters.ffl-filters.ffl-filters--drawer.is-open .ffl-filters__backdrop,
  .ffl-filters.ffl-filters.ffl-filters--drawer:target .ffl-filters__backdrop,
  .ffl-filters.ffl-filters.ffl-filters--drawer:has(.ffl-filters__drawer:target) .ffl-filters__backdrop,
  .ffl-filters.ffl-filters.ffl-filters--drawer[data-fflf-open]:not([data-fflf-js]) .ffl-filters__backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .ffl-filters.ffl-filters.ffl-filters--drawer.is-open .ffl-filters__drawer,
  .ffl-filters.ffl-filters.ffl-filters--drawer .ffl-filters__drawer:target,
  .ffl-filters.ffl-filters.ffl-filters--drawer[data-fflf-open]:not([data-fflf-js]) .ffl-filters__drawer {
    transform: translateX(0);
    visibility: visible;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ffl-filters.ffl-filters.ffl-filters--drawer .ffl-filters__drawer,
  .ffl-filters.ffl-filters.ffl-filters--drawer .ffl-filters__backdrop,
  .ffl-filters.ffl-filters .ffl-filters__toggle-icon {
    transition: none;
  }
}

/*
 * 1.1.0 hardening. Theme widget and link rules (Kadence included) must not
 * shrink the panel or recolour its chips and links, so these selectors repeat
 * the root class to win on specificity without !important.
 * The panel is fluid: it fills 100% of whatever column the theme gives it, at any width.
 */
.ffl-filters.ffl-filters,
.widget .ffl-filters.ffl-filters,
.wp-block-group .ffl-filters.ffl-filters {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin-left: 0;
  margin-right: 0;
}

.ffl-filters.ffl-filters .ffl-filters__drawer,
.ffl-filters.ffl-filters .ffl-filters__form {
  max-width: 100%;
  box-sizing: border-box;
}

/* The phone drawer keeps its own width (min(352px, 100%)); only the form is forced full width. */
.ffl-filters.ffl-filters .ffl-filters__form {
  width: 100%;
}

.ffl-filters.ffl-filters a.ffl-filters__chip,
.ffl-filters.ffl-filters a.ffl-filters__chip:link,
.ffl-filters.ffl-filters a.ffl-filters__chip:visited,
.ffl-filters.ffl-filters a.ffl-filters__chip:hover,
.ffl-filters.ffl-filters a.ffl-filters__chip:focus,
.ffl-filters.ffl-filters a.ffl-filters__chip:active {
  gap: 6px;
  background: var(--ffl-filters-chip-active-bg, var(--ffl-filters-accent, #0F1B2D));
  border-color: var(--ffl-filters-chip-active-border, var(--ffl-filters-accent, #0F1B2D));
  color: var(--ffl-filters-chip-active-text, var(--ffl-filters-accent-contrast, #FFFFFF));
  text-decoration: none;
  box-shadow: none;
}

.ffl-filters.ffl-filters a.ffl-filters__chip:hover,
.ffl-filters.ffl-filters a.ffl-filters__chip:focus-visible {
  filter: brightness(1.12);
}

.ffl-filters.ffl-filters .ffl-filters__chip-x {
  font-size: 1.15em;
  line-height: 1;
}

.ffl-filters.ffl-filters a.ffl-filters__clear,
.ffl-filters.ffl-filters a.ffl-filters__clear:visited,
.ffl-filters.ffl-filters a.ffl-filters__clear:hover,
.ffl-filters.ffl-filters a.ffl-filters__show-all,
.ffl-filters.ffl-filters a.ffl-filters__show-all:visited,
.ffl-filters.ffl-filters a.ffl-filters__show-all:hover,
.ffl-filters.ffl-filters a.ffl-filters__drawer-close,
.ffl-filters.ffl-filters a.ffl-filters__drawer-close:visited,
.ffl-filters.ffl-filters a.ffl-filters__drawer-close:hover {
  color: var(--ffl-filters-text, #1F2933);
  text-decoration: underline;
  text-underline-offset: 2px;
  box-shadow: none;
}

.ffl-filters.ffl-filters a.ffl-filters__drawer-close {
  text-decoration: none;
}

.ffl-filters.ffl-filters a.ffl-filters__open,
.ffl-filters.ffl-filters a.ffl-filters__open:visited,
.ffl-filters.ffl-filters a.ffl-filters__open:hover {
  color: var(--ffl-filters-accent-contrast, #FFFFFF);
  text-decoration: none;
}

.ffl-filters.ffl-filters .ffl-filters__clear--chips {
  border: 0;
  padding: 0 var(--ffl-filters-space-1);
  background: transparent;
  color: var(--fflf-plate-text, var(--fflf-text));
}

.ffl-filters.ffl-filters .ffl-filters__group-title--static {
  display: flex;
  align-items: center;
  min-height: 0;
  padding: 4px 12px 0;
}

/* Show products stays in reach while a long panel scrolls, drawer included (no-JavaScript fallback). */
.ffl-filters.ffl-filters .ffl-filters__actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin-left: 0;
  margin-right: 0;
  padding: var(--ffl-filters-space-3) 0;
  /* 1.3.1: see-through on the plate (no solid box behind Show products); only the open drawer fills it. */
  background: transparent;
  border-top: 1px solid var(--ffl-filters-border-subtle, #E4E7EB);
}

.ffl-filters.ffl-filters .ffl-filters__apply {
  flex: 1 1 auto;
}

/*
 * 1.3.2: JS is coming (the inline resolver set data-fflf-boot) but panel.js has not set the panel up yet
 * (data-fflf-js): the no-JS Show products button is held back, so it does not flash before panel.js hides it.
 * 1.3.4: no animation. The paint call clears the mark after 3 s with a timer (Assets::paint_script()), so the button
 * comes back after about 3 s if panel.js never arrives, also when reduce-motion settings cut animations short. When
 * the drawer is opened through its link before panel.js runs (the drawer is the :target), the hold ends at once so
 * the drawer shows its button. 1.3.5: the same when the opener's inline listener (assets/js/opener.js) marked the panel
 * data-fflf-open, which is how the drawer opens when a theme script takes the link and :target never changes.
 * Browsers without :has() drop this rule and simply show the button.
 * Without JavaScript the mark is never set, so the button always shows.
 */
.ffl-filters.ffl-filters[data-fflf-boot]:not([data-fflf-js]):not([data-fflf-open]):not(:has(.ffl-filters__drawer:target)) .ffl-filters__apply,
.ffl-filters.ffl-filters[data-fflf-boot]:not([data-fflf-js]):not([data-fflf-open]):not(:has(.ffl-filters__drawer:target)) .ffl-filters__actions--bare {
  display: none;
}

/*
 * Once the script runs, every click applies on its own, so Show products is hidden.
 * A bare actions bar (no Clear all) disappears with it; on phones the drawer keeps it for "Show N products".
 */
.ffl-filters.ffl-filters[data-fflf-js] .ffl-filters__apply {
  display: none;
}

.ffl-filters.ffl-filters[data-fflf-js] .ffl-filters__actions--bare {
  display: none;
}

@media (max-width: 1024px) {
  .ffl-filters.ffl-filters.ffl-filters--drawer[data-fflf-js] .ffl-filters__actions--bare {
    display: flex;
  }

  .ffl-filters.ffl-filters.ffl-filters--drawer[data-fflf-js] .ffl-filters__done {
    display: inline-flex;
  }
}

/* Toggle display type and the In stock / In store rows: a real switch. */
.ffl-filters.ffl-filters .ffl-filters__option--toggle input::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #FFFFFF;
  transition: transform var(--ffl-filters-transition, 80ms ease-out);
}

.ffl-filters.ffl-filters .ffl-filters__option--toggle input:checked::after {
  transform: translateX(14px);
}

/* In Stock / In store: a pill row with the switch at the end. */
.ffl-filters.ffl-filters .ffl-filters__option--switch {
  min-height: var(--ffl-filters-pill-height);
  padding: 4px 12px;
  border: 1px solid var(--ffl-filters-border-subtle);
  border-radius: var(--ffl-filters-radius-pill);
  background: var(--ffl-filters-surface-alt);
  font-size: var(--ffl-filters-label-size);
  font-weight: 600;
}

.ffl-filters.ffl-filters .ffl-filters__option--switch:hover {
  background: var(--ffl-filters-surface-alt);
}

.ffl-filters.ffl-filters .ffl-filters__option--switch .ffl-filters__option-label {
  flex: 0 1 auto;
}

.ffl-filters.ffl-filters .ffl-filters__option--switch .ffl-filters__count {
  margin-right: auto;
  font-weight: 400;
}

.ffl-filters.ffl-filters .ffl-filters__option--switch input {
  order: 3;
}

.ffl-filters.ffl-filters .ffl-filters__option--switch input:checked + .ffl-filters__option-label {
  font-weight: 600;
}

.ffl-filters.ffl-filters [data-fflf-single] > .ffl-filters__options {
  padding-top: 4px;
}

@media (max-width: 1024px) {
  .ffl-filters.ffl-filters.ffl-filters--collapsible .ffl-filters__open {
    display: inline-flex;
  }

  .ffl-filters.ffl-filters.ffl-filters--collapsible .ffl-filters__drawer {
    display: none;
  }

  .ffl-filters.ffl-filters.ffl-filters--collapsible.is-open .ffl-filters__drawer,
  .ffl-filters.ffl-filters.ffl-filters--collapsible .ffl-filters__drawer:target,
  .ffl-filters.ffl-filters.ffl-filters--collapsible[data-fflf-open]:not([data-fflf-js]) .ffl-filters__drawer {
    display: block;
  }

  .ffl-filters.ffl-filters.ffl-filters--drawer .ffl-filters__drawer {
    display: flex;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ffl-filters.ffl-filters .ffl-filters__option--toggle input::after {
    transition: none;
  }
}

/* Grid wrapper is a swap target only; it must not affect layout. */
.ffl-filters-grid {
  display: contents;
}

/* Loading: the filters stay usable; the products fade to 60% under a 3px bar while the new results load. */
.ffl-filters-grid.is-loading > :not(.ffl-filters-status) {
  opacity: 0.6;
  transition: opacity 120ms ease-out;
}

.ffl-filters-status {
  position: relative;
  z-index: 5;
  height: 0;
  margin: 0;
  pointer-events: none;
}

.ffl-filters-status__bar {
  position: absolute;
  left: 0;
  right: 0;
  top: -8px;
  height: 3px;
  border-radius: 2px;
  background: #E4E7EB;
  overflow: hidden;
}

.ffl-filters-status__bar::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 38%;
  border-radius: 2px;
  /* panel.js copies the panel's resolved accent; the fallback is the saved accent pair, then neutral. */
  background: var(--ffl-filters-status-accent, var(--fflf-accent-saved, #0F1B2D));
  animation: ffl-filters-status 1.1s ease-in-out infinite;
}

.ffl-filters-status__text {
  position: absolute;
  top: 0;
  left: 0;
  padding: 2px 8px 2px 0;
  /* panel.js copies the panel's own surface and text (light or dark set); neutral light pair without it. */
  background: var(--ffl-filters-status-surface, #FFFFFF);
  color: var(--ffl-filters-status-text, #1F2933);
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
}

@keyframes ffl-filters-status {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(270%); }
}

@media (prefers-reduced-motion: reduce) {
  .ffl-filters-grid.is-loading > :not(.ffl-filters-status) {
    transition: none;
  }

  .ffl-filters-status__bar::after {
    animation: none;
    width: 100%;
  }
}

.ffl-filters.ffl-filters .ffl-filters__option--toggle input {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 34px;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: var(--ffl-filters-border, #8a94a3);
  position: relative;
  vertical-align: middle;
}

.ffl-filters.ffl-filters .ffl-filters__option--toggle input:checked {
  background: var(--ffl-filters-accent, #0f1b2d);
}

/* Phones and tablets: when the panel sits in a sidebar below the products, a button above them opens it. */
.ffl-filters-opener-wrap {
  display: none;
}

.ffl-filters-opener-wrap .ffl-filters-opener,
.ffl-filters-opener-wrap .ffl-filters-opener:visited,
.ffl-filters-opener-wrap .ffl-filters-opener:hover {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  margin: 0 0 16px;
  padding: 0 16px;
  border-radius: 4px;
  /* The resolved accent pair (setting, theme button, main, link, neutral), printed by Accent::inline_css(). */
  background: var(--fflf-accent-saved, #0F1B2D);
  color: var(--fflf-accent-saved-text, #FFFFFF);
  font: inherit;
  text-decoration: none;
  /* The panel phone button's two-tone ring: one of the two always clears 3:1 on any page. panel.js measures behind
     the button and sets data-fflf-edge on the wrap: none (the fill already clears 3:1), light or dark. */
  box-shadow: 0 0 0 1px #FFFFFF, 0 0 0 2px #0F1B2D;
}

.ffl-filters-opener-wrap[data-fflf-edge="none"] .ffl-filters-opener { box-shadow: none; }
.ffl-filters-opener-wrap[data-fflf-edge="light"] .ffl-filters-opener { box-shadow: 0 0 0 1px #F3F5F7; }
.ffl-filters-opener-wrap[data-fflf-edge="dark"] .ffl-filters-opener { box-shadow: 0 0 0 1px #1F2933; }

.ffl-filters-opener-wrap .ffl-filters-opener:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

@media (max-width: 1024px) {
  .ffl-filters-opener-wrap {
    display: block;
  }

  .ffl-filters-opener-wrap[hidden] {
    display: none;
  }
}

/* Panel heading turned off (or automatic inside a widget area): hidden on wide screens only. */
@media (min-width: 1025px) {
  .ffl-filters.ffl-filters .ffl-filters__title--wide-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

/*
 * 1.2.1 hardening (FFLF-POLISH-3).
 * Theme button rules (Kadence: button:hover, button:focus, button:active set colour, background and a 2px
 * currentColor border) out-rank a single class, so an open, focused group header lost its label. The root class
 * repeats to win on specificity without !important, and every state sets colour, background, border and outline.
 */
.ffl-filters.ffl-filters .ffl-filters__toggle,
.ffl-filters.ffl-filters .ffl-filters__toggle:hover,
.ffl-filters.ffl-filters .ffl-filters__toggle:focus,
.ffl-filters.ffl-filters .ffl-filters__toggle:active,
.ffl-filters.ffl-filters .ffl-filters__toggle:visited {
  margin: 0;
  padding: 4px 12px;
  border: 1px solid var(--ffl-filters-border-subtle, #D3D8DF);
  border-radius: var(--ffl-filters-radius-pill, 999px);
  background: var(--ffl-filters-surface-alt, #F5F6F8);
  color: var(--ffl-filters-text, #1F2933);
  outline: 0;
  box-shadow: none;
  text-decoration: none;
  text-transform: none;
  letter-spacing: normal;
  font-family: inherit;
  font-size: var(--ffl-filters-label-size);
  font-weight: 600;
  line-height: 1.25;
  opacity: 1;
  transform: none;
  transition: none;
}

.ffl-filters.ffl-filters .ffl-filters__toggle:hover {
  border-color: var(--ffl-filters-border, #8A94A3);
}

.ffl-filters.ffl-filters .ffl-filters__toggle[aria-expanded="true"],
.ffl-filters.ffl-filters .ffl-filters__toggle[aria-expanded="true"]:hover,
.ffl-filters.ffl-filters .ffl-filters__toggle[aria-expanded="true"]:focus,
.ffl-filters.ffl-filters .ffl-filters__toggle[aria-expanded="true"]:active {
  border-color: var(--ffl-filters-border-subtle, #D3D8DF);
  background: var(--ffl-filters-surface-alt, #F5F6F8);
  color: var(--ffl-filters-text, #1F2933);
}

/* Keyboard focus: a visible ring in the text colour, never the store accent. Mouse clicks show no ring. */
.ffl-filters.ffl-filters .ffl-filters__toggle:focus-visible {
  outline: 2px solid var(--ffl-filters-text, #1F2933);
  outline-offset: 2px;
}

.ffl-filters.ffl-filters .ffl-filters__toggle-label {
  color: inherit;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  -webkit-hyphens: manual;
  hyphens: manual;
}

/* Values wrap on word boundaries; a single over-long word breaks only as a last resort. Counts stay on one line. */
.ffl-filters.ffl-filters .ffl-filters__option {
  display: flex;
  align-items: center;
}

.ffl-filters.ffl-filters .ffl-filters__option-label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  -webkit-hyphens: manual;
  hyphens: manual;
}

.ffl-filters.ffl-filters .ffl-filters__count {
  flex: 0 0 auto;
  flex-shrink: 0;
  margin-left: auto;
  padding-left: 4px;
  white-space: nowrap;
  text-align: right;
}

/* In Stock: label and count stay on one line, the switch sits at the end. */
.ffl-filters.ffl-filters .ffl-filters__option--switch .ffl-filters__option-label {
  flex: 0 1 auto;
  white-space: nowrap;
}

.ffl-filters.ffl-filters .ffl-filters__option--switch .ffl-filters__count {
  margin-left: 0;
  margin-right: auto;
}

/* One "Filter products" button on phones: the one above the products is in use, so the panel's own one hides. */
.ffl-filters.ffl-filters[data-fflf-remote-opener] .ffl-filters__open {
  display: none;
}

/* The drawer heading takes focus only so screen readers start there; it is not a control, so no ring. */
.ffl-filters.ffl-filters .ffl-filters__title:focus {
  outline: 0;
}


/* =====================================================================================================================
 * 1.3.0: paired panel tokens (Brandy's adaptive panel tokens, 1.2.2-contrast mockups), the generic accent layers,
 * the phone button edge, and the Above products placement with Layout Auto / Bar / Stacked.
 * The plugin owns its surface and text colours as pairs, so text never sits on a background it was not checked
 * against. Every colour below is a plugin token; there are no per-site values.
 * ================================================================================================================== */

/* Light set: the default, and the safe fallback on any theme. */
:where(.ffl-filters) {
  --fflf-surface: #FFFFFF;
  --fflf-surface-2: #F5F6F8;
  --fflf-input: #FFFFFF;
  --fflf-text: #1F2933;
  --fflf-muted: #52606D;
  --fflf-placeholder: #5E6B78;
  --fflf-border: #7B8594;
  --fflf-divider: #D3D8DF;
  --fflf-accent: #0F1B2D;
  --fflf-accent-text: #FFFFFF;
  --fflf-focus: #1F2933;
  --fflf-control-off: #7B8594;
  --fflf-knob: #FFFFFF;
}

/* Dark set: Auto found a dark background behind the panel, or the admin picked Dark. */
.ffl-filters.ffl-filters[data-fflf-style="dark"] {
  --fflf-surface: #14191D;
  --fflf-surface-2: #1E252B;
  --fflf-input: #0F1417;
  --fflf-text: #F3F5F7;
  --fflf-muted: #B6BEC7;
  --fflf-placeholder: #A9B2BC;
  --fflf-border: #8E99A4;
  --fflf-divider: #3A444D;
  --fflf-accent: #E6EBF0;
  --fflf-accent-text: #0F1B2D;
  --fflf-focus: #F3F5F7;
  --fflf-control-off: #8E99A4;
  --fflf-knob: #14191D;
  color-scheme: dark;
}

/* Accent layer 1: the PHP-stepped values printed once in <head> (fallbacks keep the neutral pair). */
.ffl-filters.ffl-filters[data-fflf-accent="saved"] {
  --fflf-accent: var(--fflf-accent-saved, #0F1B2D);
  --fflf-accent-text: var(--fflf-accent-saved-text, #FFFFFF);
}
.ffl-filters.ffl-filters[data-fflf-accent="saved"][data-fflf-style="dark"] {
  --fflf-accent: var(--fflf-accent-saved-dark, #E6EBF0);
  --fflf-accent-text: var(--fflf-accent-saved-dark-text, #0F1B2D);
}
/* Accent layer 2, markup without data-fflf-accent (cached or third-party): the same saved pairs, else neutral. */
.ffl-filters.ffl-filters:not([data-fflf-accent]) { --fflf-accent: var(--fflf-accent-saved, #0F1B2D); --fflf-accent-text: var(--fflf-accent-saved-text, #FFFFFF); }
.ffl-filters.ffl-filters[data-fflf-style="dark"]:not([data-fflf-accent]) { --fflf-accent: var(--fflf-accent-saved-dark, #E6EBF0); --fflf-accent-text: var(--fflf-accent-saved-dark-text, #0F1B2D); }
/* Layer 3 (panel.js) writes --fflf-accent inline with data-fflf-accent="checked" only when the resolved value fails. */

/* Map the pairs onto the 1.2.1 component tokens. Two classes beat the theme adapter's :where() values. */
.ffl-filters.ffl-filters {
  --ffl-filters-surface: var(--fflf-surface);
  --ffl-filters-surface-alt: var(--fflf-surface-2);
  --ffl-filters-text: var(--fflf-text);
  --ffl-filters-muted: var(--fflf-muted);
  --ffl-filters-border: var(--fflf-border);
  --ffl-filters-border-subtle: var(--fflf-divider);
  --ffl-filters-accent: var(--fflf-accent);
  --ffl-filters-accent-contrast: var(--fflf-accent-text);
  --ffl-filters-chip-active-bg: var(--fflf-accent);
  --ffl-filters-chip-active-text: var(--fflf-accent-text);
  --ffl-filters-chip-active-border: var(--fflf-accent);
  --ffl-filters-chevron-color: var(--fflf-muted);
  --ffl-filters-focus-ring: var(--fflf-focus);

  /* See-through plate: the panel never paints a fill of its own, so it sits on the site, page or sidebar
     background. Only open overlays (lists, popovers, the phone drawer) are opaque, in --fflf-surface, which
     panel.js sets to the page colour it resolves behind the panel (Auto). */
  background: transparent;
  color: var(--fflf-plate-text, var(--fflf-text));
}

/* 1.3.1: until panel.js has resolved the page colour (data-fflf-page-bg), and with JavaScript off, the text that sits
   straight on the see-through plate (count, heading, Clear all, Sort) takes the theme's own text colour, which the
   theme keeps readable on its own page. currentColor in the colour property is the inherited colour. No fill. */
/* 1.3.1: the same when the panel sits straight on a photo or pattern, which cannot be measured (data-fflf-plate). */
.ffl-filters.ffl-filters:not([data-fflf-page-bg]),
.ffl-filters.ffl-filters[data-fflf-plate="theme"] {
  --fflf-plate-text: currentColor;
  --fflf-plate-muted: currentColor;
}

/* Text straight on the plate is checked against the page behind it (--fflf-plate-*, set by panel.js). */
.ffl-filters.ffl-filters .ffl-filters__live { color: var(--fflf-plate-muted, var(--fflf-muted)); }
.ffl-filters.ffl-filters .ffl-filters__clear { color: var(--fflf-plate-text, var(--fflf-text)); background: transparent; text-decoration: underline; }
.ffl-filters.ffl-filters .ffl-filters__option-label { color: var(--fflf-text); }
.ffl-filters.ffl-filters .ffl-filters__count { color: var(--fflf-muted); }
.ffl-filters.ffl-filters .ffl-filters__options { background: var(--fflf-surface); color: var(--fflf-text); }
/* Only open overlays fill (Bar popovers, open accordion bodies, the drawer). The switch rows are always shown on the plate, so their values region stays see-through; the pill keeps its own fill. */
.ffl-filters.ffl-filters .ffl-filters__group--switch > .ffl-filters__options { background: transparent; }
.ffl-filters.ffl-filters .ffl-filters__list--cap { background: var(--fflf-surface); border-color: var(--fflf-border); }
.ffl-filters.ffl-filters .ffl-filters__title:not(#fflf-no-id) { color: var(--fflf-plate-text, var(--fflf-text)); }
.ffl-filters.ffl-filters .ffl-filters__show-all { color: var(--fflf-text); }
.ffl-filters.ffl-filters .ffl-filters__search-status { color: var(--fflf-muted); }

/* Boxes draw their own fill and placeholder colour instead of inheriting the theme's. */
.ffl-filters.ffl-filters .ffl-filters__search-input,
.ffl-filters.ffl-filters .ffl-filters__price-field input { background: var(--fflf-input); color: var(--fflf-text); border-color: var(--fflf-border); }
.ffl-filters.ffl-filters .ffl-filters__search-input::placeholder,
.ffl-filters.ffl-filters .ffl-filters__price-field input::placeholder { color: var(--fflf-placeholder); opacity: 1; }
.ffl-filters.ffl-filters .ffl-filters__unit,
.ffl-filters.ffl-filters .ffl-filters__currency { color: var(--fflf-muted); }
.ffl-filters.ffl-filters .ffl-filters__search-icon { border-color: var(--fflf-muted); }
.ffl-filters.ffl-filters .ffl-filters__search-icon::after { background: var(--fflf-muted); }

/* 1.3.1: the value-row checkbox is drawn from the pair, not the browser's own scheme box (its grey edge can vanish on a
   mid-tone page). Unchecked: a 1px --fflf-border edge on --fflf-input, both stepped by panel.js against the page and
   the pills (3:1). Checked: the accent fill with the tick in --fflf-accent-text. Still a real checkbox, so Space,
   Tab and the focus ring work as before. */
.ffl-filters.ffl-filters .ffl-filters__option:not(.ffl-filters__option--toggle) input:where([type="checkbox"]),
.ffl-filters.ffl-filters .ffl-filters__option:not(.ffl-filters__option--toggle) input:where([type="checkbox"]):where(:hover, :focus, :active) {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  display: inline-block;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--fflf-border);
  border-radius: 3px;
  background: var(--fflf-input);
  cursor: pointer;
}
.ffl-filters.ffl-filters .ffl-filters__option:not(.ffl-filters__option--toggle) input:where([type="checkbox"]):checked {
  border-color: var(--fflf-accent);
  background: var(--fflf-accent);
}
.ffl-filters.ffl-filters .ffl-filters__option:not(.ffl-filters__option--toggle) input:where([type="checkbox"]):checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid var(--fflf-accent-text);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.ffl-filters.ffl-filters .ffl-filters__option:not(.ffl-filters__option--toggle) input:where([type="checkbox"]):disabled {
  opacity: 0.5;
  cursor: default;
}
.ffl-filters.ffl-filters .ffl-filters__option:not(.ffl-filters__option--toggle) input:where([type="checkbox"]):focus-visible {
  outline: 2px solid var(--fflf-focus);
  outline-offset: 2px;
}

/* In Stock switch: track and knob from the pair, so "off" is still a visible control. */
.ffl-filters.ffl-filters .ffl-filters__option--toggle input { background: var(--fflf-control-off); border-color: var(--fflf-control-off); }
.ffl-filters.ffl-filters .ffl-filters__option--toggle input:checked { background: var(--fflf-accent); border-color: var(--fflf-accent); }
.ffl-filters.ffl-filters .ffl-filters__option--toggle input::after { background: var(--fflf-knob); }
.ffl-filters.ffl-filters .ffl-filters__option--toggle input:checked::after { background: var(--fflf-accent-text); }

/* Keyboard focus: ring from the pair, 2px with a 2px gap. */
.ffl-filters.ffl-filters :focus-visible { outline-color: var(--fflf-focus); }

/* Phone button edge, generic. No JS: a two-tone ring that always shows on any background. panel.js measures behind the
   button and sets data-fflf-edge: none (the fill already clears 3:1), light or dark. A one-frame flash is accepted. */
@media (max-width: 1024px) {
  .ffl-filters.ffl-filters.ffl-filters--drawer .ffl-filters__open { box-shadow: 0 0 0 1px #FFFFFF, 0 0 0 2px #0F1B2D; }
  .ffl-filters.ffl-filters.ffl-filters--drawer[data-fflf-edge="none"] .ffl-filters__open { box-shadow: none; }
  .ffl-filters.ffl-filters.ffl-filters--drawer[data-fflf-edge="light"] .ffl-filters__open { box-shadow: 0 0 0 1px #F3F5F7; }
  .ffl-filters.ffl-filters.ffl-filters--drawer[data-fflf-edge="dark"] .ffl-filters__open { box-shadow: 0 0 0 1px #1F2933; }

  /* Phone drawer: same pair as the panel; the plate itself steps aside so only the button sits on the page. */
  .ffl-filters.ffl-filters.ffl-filters--drawer { background: transparent; padding: 0; }
  .ffl-filters.ffl-filters.ffl-filters--drawer .ffl-filters__drawer { background: var(--fflf-surface); border-right-color: var(--fflf-border); }
  /* The open drawer is filled, so the text in it follows the set on that fill (with or without JavaScript). */
  .ffl-filters.ffl-filters.ffl-filters--drawer .ffl-filters__drawer { --fflf-plate-text: var(--fflf-text); --fflf-plate-muted: var(--fflf-muted); color: var(--fflf-text); }
  .ffl-filters.ffl-filters .ffl-filters__actions { background: transparent; border-top-color: var(--fflf-divider); }
  /* 1.3.1: the actions row fills only inside the open drawer, where it sticks over the scrolling groups. */
  .ffl-filters.ffl-filters.ffl-filters--drawer.is-open .ffl-filters__drawer .ffl-filters__actions,
  .ffl-filters.ffl-filters.ffl-filters--drawer .ffl-filters__drawer:target .ffl-filters__actions,
  .ffl-filters.ffl-filters.ffl-filters--drawer[data-fflf-open]:not([data-fflf-js]) .ffl-filters__drawer .ffl-filters__actions { background: var(--fflf-surface); }
}

/* ---------------------------------------------------------------------------------------------------------------
 * Above products. One markup for both looks: the server prints the same groups as the sidebar (a button and a
 * values region); CSS alone decides whether the region is an accordion body (Stacked) or a popover (Bar).
 * ------------------------------------------------------------------------------------------------------------- */
.ffl-filters.ffl-filters.ffl-filters--above { padding: 12px; border-radius: 8px; }
/* 1.3.1: the row (wrap) only from 768px. At 767px and narrower the drawer stays one column, as in the sidebar. */
@media (min-width: 768px) {
  .ffl-filters.ffl-filters.ffl-filters--above .ffl-filters__drawer { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
}
.ffl-filters.ffl-filters.ffl-filters--above .ffl-filters__form { order: 1; flex: 1 1 100%; max-width: 560px; margin-inline: auto; }
.ffl-filters.ffl-filters.ffl-filters--above .ffl-filters__results { order: 2; flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; min-width: 0; }
.ffl-filters.ffl-filters.ffl-filters--above .ffl-filters__results .ffl-filters__live { margin: 0; color: var(--fflf-plate-text, var(--fflf-text)); font-weight: 600; font-size: 14px; }
.ffl-filters.ffl-filters.ffl-filters--above .ffl-filters__results .ffl-filters__chips { flex: 1 1 0; margin: 0; min-width: 0; }
.ffl-filters.ffl-filters.ffl-filters--above .ffl-filters__chip { font-size: 14px; }
.ffl-filters.ffl-filters.ffl-filters--above .ffl-filters__chip-x { margin-left: 8px; font-size: 16px; line-height: 1; }
.ffl-filters.ffl-filters.ffl-filters--above .ffl-filters__clear { font-size: 14px; color: var(--fflf-plate-text, var(--fflf-text)); }
.ffl-filters.ffl-filters.ffl-filters--above .ffl-filters__sort { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--fflf-plate-muted, var(--fflf-muted)); font-size: 14px; }
.ffl-filters.ffl-filters.ffl-filters--above .ffl-filters__sort label { color: var(--fflf-plate-muted, var(--fflf-muted)); font-size: 14px; font-weight: 400; margin: 0; }
.ffl-filters.ffl-filters.ffl-filters--above .ffl-filters__sort select,
.ffl-filters.ffl-filters.ffl-filters--above .ffl-filters__sort select:where(:hover, :focus, :active) {
  -webkit-appearance: menulist; appearance: auto; display: inline-block; width: auto; min-height: 40px; padding: 0 8px 0 12px;
  border: 1px solid var(--fflf-border); border-radius: 6px; background: var(--fflf-input); color: var(--fflf-text); font-size: 14px;
}
.ffl-filters.ffl-filters.ffl-filters--above .ffl-filters__sort select option { background: var(--fflf-input); color: var(--fflf-text); }
.ffl-filters.ffl-filters .ffl-filters__pop-foot { display: none; }
.ffl-filters.ffl-filters.ffl-filters--above .ffl-filters__pop-foot { justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--fflf-divider); font-size: 13px; color: var(--fflf-muted); }
.ffl-filters.ffl-filters.ffl-filters--above .ffl-filters__pop-foot a { color: var(--fflf-text); text-decoration: underline; }
.ffl-filters.ffl-filters .ffl-filters__pop-hint { display: none; }
.ffl-filters.ffl-filters.ffl-filters--above .ffl-filters__pop-hint { margin: 8px 0 0; font-size: 13px; color: var(--fflf-muted); }
.ffl-filters.ffl-filters.ffl-filters--above :focus-visible { outline: 2px solid var(--fflf-focus); outline-offset: 2px; }
@media (min-width: 768px) {
  .ffl-filters.ffl-filters.ffl-filters--above .ffl-filters__title:not(#fflf-no-id) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .ffl-filters.ffl-filters.ffl-filters--above .ffl-filters__pop-hint { display: block; }
}
/* Results row on a mid-width panel: count and sorting share the first line, chips take the next. */
@container fflf-panel (max-width: 999px) {
  .ffl-filters.ffl-filters.ffl-filters--above .ffl-filters__results .ffl-filters__chips { order: 5; flex: 1 1 100%; }
}

/* Phones (767px and narrower) above the products: the one Filter products button and the drawer, as in 1.2.x.
   Count and chips lead the drawer; the theme's own count and sorting show under the button, so ours steps aside. */
@media (max-width: 767px) {
  .ffl-filters.ffl-filters.ffl-filters--above { padding: 0; border-radius: 0; background: transparent; }
  /* One column: the count row and the groups take their own height (a 100% basis would stretch them down the drawer).
     1.3.1: no CSS order here, so the screen follows the DOM. panel.js moves the results row to just after the
     heading (Close, heading, count, chips, groups, Show N, as in the sidebar drawer), and the tab order follows.
     With JavaScript off the row stays after the groups, on screen and in the tab order alike. */
  .ffl-filters.ffl-filters.ffl-filters--above .ffl-filters__results,
  .ffl-filters.ffl-filters.ffl-filters--above .ffl-filters__form { flex: 0 0 auto; order: 0; }
  .ffl-filters.ffl-filters.ffl-filters--above .ffl-filters__sort { display: none; }
  .ffl-filters.ffl-filters.ffl-filters--above .ffl-filters__form { max-width: none; }
}
/* Tablets (768 to 1024px) above the products: no drawer; the panel shows in place (Bar or Stacked). */
@media (min-width: 768px) and (max-width: 1024px) {
  .ffl-filters.ffl-filters.ffl-filters--above.ffl-filters--drawer,
  .ffl-filters.ffl-filters.ffl-filters--above.ffl-filters--collapsible { padding: 12px; background: transparent; }
  .ffl-filters.ffl-filters.ffl-filters--above.ffl-filters--drawer .ffl-filters__open,
  .ffl-filters.ffl-filters.ffl-filters--above.ffl-filters--drawer .ffl-filters__drawer-close,
  .ffl-filters.ffl-filters.ffl-filters--above.ffl-filters--drawer .ffl-filters__backdrop,
  .ffl-filters.ffl-filters.ffl-filters--above.ffl-filters--collapsible .ffl-filters__open { display: none; }
  .ffl-filters.ffl-filters.ffl-filters--above.ffl-filters--drawer .ffl-filters__drawer,
  .ffl-filters.ffl-filters.ffl-filters--above.ffl-filters--drawer.is-open .ffl-filters__drawer,
  .ffl-filters.ffl-filters.ffl-filters--above.ffl-filters--drawer .ffl-filters__drawer:target,
  .ffl-filters.ffl-filters.ffl-filters--above.ffl-filters--drawer[data-fflf-open]:not([data-fflf-js]) .ffl-filters__drawer,
  .ffl-filters.ffl-filters.ffl-filters--above.ffl-filters--collapsible .ffl-filters__drawer {
    position: static; z-index: auto; display: flex; flex-direction: row; flex-wrap: wrap; width: auto; overflow: visible; padding: 0;
    background: transparent; border: 0; transform: none; visibility: visible;
    --fflf-plate-text: inherit; --fflf-plate-muted: inherit; color: inherit;
  }
  .ffl-filters.ffl-filters.ffl-filters--above.ffl-filters--drawer[data-fflf-js] .ffl-filters__actions--bare,
  .ffl-filters.ffl-filters.ffl-filters--above.ffl-filters--drawer[data-fflf-js] .ffl-filters__done { display: none; }
  /* In place here, not a drawer: the actions row stays see-through. */
  .ffl-filters.ffl-filters.ffl-filters--above.ffl-filters--drawer .ffl-filters__drawer .ffl-filters__actions,
  .ffl-filters.ffl-filters.ffl-filters--above.ffl-filters--drawer .ffl-filters__drawer:target .ffl-filters__actions,
  .ffl-filters.ffl-filters.ffl-filters--above.ffl-filters--drawer[data-fflf-open]:not([data-fflf-js]) .ffl-filters__drawer .ffl-filters__actions { background: transparent; }
}

/* On desktop and tablet our results row replaces the theme's "Showing…" line and sort box (gated: Above products only). */
@media (min-width: 768px) {
  body.fflf-above-products .woocommerce-result-count,
  body.fflf-above-products .woocommerce-ordering,
  body.fflf-above-products .wp-block-woocommerce-product-results-count,
  body.fflf-above-products .wp-block-woocommerce-catalog-sorting { display: none !important; }
}

/* Bar, pinned by panel.js (data-fflf-layout-now), from Auto or the admin's choice. */
.ffl-filters.ffl-filters[data-fflf-layout-now="bar"] .ffl-filters__drawer { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.ffl-filters.ffl-filters[data-fflf-layout-now="bar"] .ffl-filters__form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: none; width: 100%; margin-inline: 0; }
.ffl-filters.ffl-filters[data-fflf-layout-now="bar"] .ffl-filters__group { position: relative; margin: 0; flex: 0 0 auto; }
.ffl-filters.ffl-filters[data-fflf-layout-now="bar"] .ffl-filters__group-title { width: auto; }
.ffl-filters.ffl-filters[data-fflf-layout-now="bar"] .ffl-filters__toggle,
.ffl-filters.ffl-filters[data-fflf-layout-now="bar"] .ffl-filters__toggle:hover,
.ffl-filters.ffl-filters[data-fflf-layout-now="bar"] .ffl-filters__toggle:focus,
.ffl-filters.ffl-filters[data-fflf-layout-now="bar"] .ffl-filters__toggle:active,
.ffl-filters.ffl-filters[data-fflf-layout-now="bar"] .ffl-filters__toggle:visited { width: auto; min-height: 40px; padding: 0 12px 0 14px; gap: 8px; border: 1px solid var(--fflf-border); border-radius: 6px; background: var(--fflf-surface); color: var(--fflf-text); white-space: nowrap; }
.ffl-filters.ffl-filters[data-fflf-layout-now="bar"] .ffl-filters__toggle:hover { background: var(--fflf-surface-2); }
.ffl-filters.ffl-filters[data-fflf-layout-now="bar"] .ffl-filters__toggle.has-value,
.ffl-filters.ffl-filters[data-fflf-layout-now="bar"] .ffl-filters__toggle.has-value:hover,
.ffl-filters.ffl-filters[data-fflf-layout-now="bar"] .ffl-filters__toggle.has-value:focus { border-color: var(--fflf-accent); }
.ffl-filters.ffl-filters[data-fflf-layout-now="bar"] .ffl-filters__toggle[aria-expanded="true"],
.ffl-filters.ffl-filters[data-fflf-layout-now="bar"] .ffl-filters__toggle[aria-expanded="true"]:hover,
.ffl-filters.ffl-filters[data-fflf-layout-now="bar"] .ffl-filters__toggle[aria-expanded="true"]:focus,
.ffl-filters.ffl-filters[data-fflf-layout-now="bar"] .ffl-filters__toggle[aria-expanded="true"]:active { background: var(--fflf-surface-2); border-color: var(--fflf-accent); box-shadow: inset 0 0 0 1px var(--fflf-accent); color: var(--fflf-text); }
.ffl-filters.ffl-filters[data-fflf-layout-now="bar"] .ffl-filters__toggle-label { flex: 0 1 auto; white-space: nowrap; }
.ffl-filters.ffl-filters[data-fflf-layout-now="bar"] .ffl-filters__options { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; width: 320px; max-width: calc(100vw - 32px); margin: 0; padding: 12px; background: var(--fflf-surface); border: 1px solid var(--fflf-border); border-radius: 8px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22); }
.ffl-filters.ffl-filters[data-fflf-layout-now="bar"] .ffl-filters__group.is-flip > .ffl-filters__options { left: auto; right: 0; }
.ffl-filters.ffl-filters[data-fflf-layout-now="bar"] .ffl-filters__pop-foot { display: flex; }
.ffl-filters.ffl-filters[data-fflf-layout-now="bar"] .ffl-filters__group--switch > .ffl-filters__options { position: static; width: auto; padding: 0; border: 0; box-shadow: none; background: transparent; }
.ffl-filters.ffl-filters[data-fflf-layout-now="bar"] .ffl-filters__group--switch .ffl-filters__option--switch { min-height: 40px; border-radius: 6px; border: 1px solid var(--fflf-border); background: var(--fflf-surface); gap: 10px; }
.ffl-filters.ffl-filters[data-fflf-layout-now="bar"] .ffl-filters__actions { position: static; flex: 0 0 auto; margin: 0; padding: 0; border: 0; background: transparent; }

/* Bar before (or without) JavaScript: the admin picked Bar, or Auto's container query (720px and wider).
   Above products from 768px; in a sidebar from 1025px, where the phone drawer ends. */
@media (min-width: 768px) {
  .ffl-filters.ffl-filters.ffl-filters--above[data-fflf-layout="bar"]:not([data-fflf-layout-now]) .ffl-filters__drawer { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
  .ffl-filters.ffl-filters.ffl-filters--above[data-fflf-layout="bar"]:not([data-fflf-layout-now]) .ffl-filters__form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: none; width: 100%; margin-inline: 0; }
  .ffl-filters.ffl-filters.ffl-filters--above[data-fflf-layout="bar"]:not([data-fflf-layout-now]) .ffl-filters__group { position: relative; margin: 0; flex: 0 0 auto; }
  .ffl-filters.ffl-filters.ffl-filters--above[data-fflf-layout="bar"]:not([data-fflf-layout-now]) .ffl-filters__group-title { width: auto; }
  .ffl-filters.ffl-filters.ffl-filters--above[data-fflf-layout="bar"]:not([data-fflf-layout-now]) .ffl-filters__toggle,
  .ffl-filters.ffl-filters.ffl-filters--above[data-fflf-layout="bar"]:not([data-fflf-layout-now]) .ffl-filters__toggle:hover,
  .ffl-filters.ffl-filters.ffl-filters--above[data-fflf-layout="bar"]:not([data-fflf-layout-now]) .ffl-filters__toggle:focus,
  .ffl-filters.ffl-filters.ffl-filters--above[data-fflf-layout="bar"]:not([data-fflf-layout-now]) .ffl-filters__toggle:active,
  .ffl-filters.ffl-filters.ffl-filters--above[data-fflf-layout="bar"]:not([data-fflf-layout-now]) .ffl-filters__toggle:visited { width: auto; min-height: 40px; padding: 0 12px 0 14px; gap: 8px; border: 1px solid var(--fflf-border); border-radius: 6px; background: var(--fflf-surface); color: var(--fflf-text); white-space: nowrap; }
  .ffl-filters.ffl-filters.ffl-filters--above[data-fflf-layout="bar"]:not([data-fflf-layout-now]) .ffl-filters__toggle:hover { background: var(--fflf-surface-2); }
  .ffl-filters.ffl-filters.ffl-filters--above[data-fflf-layout="bar"]:not([data-fflf-layout-now]) .ffl-filters__toggle.has-value,
  .ffl-filters.ffl-filters.ffl-filters--above[data-fflf-layout="bar"]:not([data-fflf-layout-now]) .ffl-filters__toggle.has-value:hover,
  .ffl-filters.ffl-filters.ffl-filters--above[data-fflf-layout="bar"]:not([data-fflf-layout-now]) .ffl-filters__toggle.has-value:focus { border-color: var(--fflf-accent); }
  .ffl-filters.ffl-filters.ffl-filters--above[data-fflf-layout="bar"]:not([data-fflf-layout-now]) .ffl-filters__toggle[aria-expanded="true"],
  .ffl-filters.ffl-filters.ffl-filters--above[data-fflf-layout="bar"]:not([data-fflf-layout-now]) .ffl-filters__toggle[aria-expanded="true"]:hover,
  .ffl-filters.ffl-filters.ffl-filters--above[data-fflf-layout="bar"]:not([data-fflf-layout-now]) .ffl-filters__toggle[aria-expanded="true"]:focus,
  .ffl-filters.ffl-filters.ffl-filters--above[data-fflf-layout="bar"]:not([data-fflf-layout-now]) .ffl-filters__toggle[aria-expanded="true"]:active { background: var(--fflf-surface-2); border-color: var(--fflf-accent); box-shadow: inset 0 0 0 1px var(--fflf-accent); color: var(--fflf-text); }
  .ffl-filters.ffl-filters.ffl-filters--above[data-fflf-layout="bar"]:not([data-fflf-layout-now]) .ffl-filters__toggle-label { flex: 0 1 auto; white-space: nowrap; }
  .ffl-filters.ffl-filters.ffl-filters--above[data-fflf-layout="bar"]:not([data-fflf-layout-now]) .ffl-filters__options { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; width: 320px; max-width: calc(100vw - 32px); margin: 0; padding: 12px; background: var(--fflf-surface); border: 1px solid var(--fflf-border); border-radius: 8px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22); }
  .ffl-filters.ffl-filters.ffl-filters--above[data-fflf-layout="bar"]:not([data-fflf-layout-now]) .ffl-filters__group.is-flip > .ffl-filters__options { left: auto; right: 0; }
  .ffl-filters.ffl-filters.ffl-filters--above[data-fflf-layout="bar"]:not([data-fflf-layout-now]) .ffl-filters__pop-foot { display: flex; }
  .ffl-filters.ffl-filters.ffl-filters--above[data-fflf-layout="bar"]:not([data-fflf-layout-now]) .ffl-filters__group--switch > .ffl-filters__options { position: static; width: auto; padding: 0; border: 0; box-shadow: none; background: transparent; }
  .ffl-filters.ffl-filters.ffl-filters--above[data-fflf-layout="bar"]:not([data-fflf-layout-now]) .ffl-filters__group--switch .ffl-filters__option--switch { min-height: 40px; border-radius: 6px; border: 1px solid var(--fflf-border); background: var(--fflf-surface); gap: 10px; }
  .ffl-filters.ffl-filters.ffl-filters--above[data-fflf-layout="bar"]:not([data-fflf-layout-now]) .ffl-filters__actions { position: static; flex: 0 0 auto; margin: 0; padding: 0; border: 0; background: transparent; }
}
@media (min-width: 1025px) {
  .ffl-filters.ffl-filters:not(.ffl-filters--above)[data-fflf-layout="bar"]:not([data-fflf-layout-now]) .ffl-filters__drawer { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
  .ffl-filters.ffl-filters:not(.ffl-filters--above)[data-fflf-layout="bar"]:not([data-fflf-layout-now]) .ffl-filters__form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: none; width: 100%; margin-inline: 0; }
  .ffl-filters.ffl-filters:not(.ffl-filters--above)[data-fflf-layout="bar"]:not([data-fflf-layout-now]) .ffl-filters__group { position: relative; margin: 0; flex: 0 0 auto; }
  .ffl-filters.ffl-filters:not(.ffl-filters--above)[data-fflf-layout="bar"]:not([data-fflf-layout-now]) .ffl-filters__group-title { width: auto; }
  .ffl-filters.ffl-filters:not(.ffl-filters--above)[data-fflf-layout="bar"]:not([data-fflf-layout-now]) .ffl-filters__toggle,
  .ffl-filters.ffl-filters:not(.ffl-filters--above)[data-fflf-layout="bar"]:not([data-fflf-layout-now]) .ffl-filters__toggle:hover,
  .ffl-filters.ffl-filters:not(.ffl-filters--above)[data-fflf-layout="bar"]:not([data-fflf-layout-now]) .ffl-filters__toggle:focus,
  .ffl-filters.ffl-filters:not(.ffl-filters--above)[data-fflf-layout="bar"]:not([data-fflf-layout-now]) .ffl-filters__toggle:active,
  .ffl-filters.ffl-filters:not(.ffl-filters--above)[data-fflf-layout="bar"]:not([data-fflf-layout-now]) .ffl-filters__toggle:visited { width: auto; min-height: 40px; padding: 0 12px 0 14px; gap: 8px; border: 1px solid var(--fflf-border); border-radius: 6px; background: var(--fflf-surface); color: var(--fflf-text); white-space: nowrap; }
  .ffl-filters.ffl-filters:not(.ffl-filters--above)[data-fflf-layout="bar"]:not([data-fflf-layout-now]) .ffl-filters__toggle:hover { background: var(--fflf-surface-2); }
  .ffl-filters.ffl-filters:not(.ffl-filters--above)[data-fflf-layout="bar"]:not([data-fflf-layout-now]) .ffl-filters__toggle.has-value,
  .ffl-filters.ffl-filters:not(.ffl-filters--above)[data-fflf-layout="bar"]:not([data-fflf-layout-now]) .ffl-filters__toggle.has-value:hover,
  .ffl-filters.ffl-filters:not(.ffl-filters--above)[data-fflf-layout="bar"]:not([data-fflf-layout-now]) .ffl-filters__toggle.has-value:focus { border-color: var(--fflf-accent); }
  .ffl-filters.ffl-filters:not(.ffl-filters--above)[data-fflf-layout="bar"]:not([data-fflf-layout-now]) .ffl-filters__toggle[aria-expanded="true"],
  .ffl-filters.ffl-filters:not(.ffl-filters--above)[data-fflf-layout="bar"]:not([data-fflf-layout-now]) .ffl-filters__toggle[aria-expanded="true"]:hover,
  .ffl-filters.ffl-filters:not(.ffl-filters--above)[data-fflf-layout="bar"]:not([data-fflf-layout-now]) .ffl-filters__toggle[aria-expanded="true"]:focus,
  .ffl-filters.ffl-filters:not(.ffl-filters--above)[data-fflf-layout="bar"]:not([data-fflf-layout-now]) .ffl-filters__toggle[aria-expanded="true"]:active { background: var(--fflf-surface-2); border-color: var(--fflf-accent); box-shadow: inset 0 0 0 1px var(--fflf-accent); color: var(--fflf-text); }
  .ffl-filters.ffl-filters:not(.ffl-filters--above)[data-fflf-layout="bar"]:not([data-fflf-layout-now]) .ffl-filters__toggle-label { flex: 0 1 auto; white-space: nowrap; }
  .ffl-filters.ffl-filters:not(.ffl-filters--above)[data-fflf-layout="bar"]:not([data-fflf-layout-now]) .ffl-filters__options { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; width: 320px; max-width: calc(100vw - 32px); margin: 0; padding: 12px; background: var(--fflf-surface); border: 1px solid var(--fflf-border); border-radius: 8px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22); }
  .ffl-filters.ffl-filters:not(.ffl-filters--above)[data-fflf-layout="bar"]:not([data-fflf-layout-now]) .ffl-filters__group.is-flip > .ffl-filters__options { left: auto; right: 0; }
  .ffl-filters.ffl-filters:not(.ffl-filters--above)[data-fflf-layout="bar"]:not([data-fflf-layout-now]) .ffl-filters__pop-foot { display: flex; }
  .ffl-filters.ffl-filters:not(.ffl-filters--above)[data-fflf-layout="bar"]:not([data-fflf-layout-now]) .ffl-filters__group--switch > .ffl-filters__options { position: static; width: auto; padding: 0; border: 0; box-shadow: none; background: transparent; }
  .ffl-filters.ffl-filters:not(.ffl-filters--above)[data-fflf-layout="bar"]:not([data-fflf-layout-now]) .ffl-filters__group--switch .ffl-filters__option--switch { min-height: 40px; border-radius: 6px; border: 1px solid var(--fflf-border); background: var(--fflf-surface); gap: 10px; }
  .ffl-filters.ffl-filters:not(.ffl-filters--above)[data-fflf-layout="bar"]:not([data-fflf-layout-now]) .ffl-filters__actions { position: static; flex: 0 0 auto; margin: 0; padding: 0; border: 0; background: transparent; }
}
@media (min-width: 768px) {
  @container fflf-panel (min-width: 720px) {
    .ffl-filters.ffl-filters.ffl-filters--above[data-fflf-layout="auto"]:not([data-fflf-layout-now]) .ffl-filters__drawer { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
    .ffl-filters.ffl-filters.ffl-filters--above[data-fflf-layout="auto"]:not([data-fflf-layout-now]) .ffl-filters__form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: none; width: 100%; margin-inline: 0; }
    .ffl-filters.ffl-filters.ffl-filters--above[data-fflf-layout="auto"]:not([data-fflf-layout-now]) .ffl-filters__group { position: relative; margin: 0; flex: 0 0 auto; }
    .ffl-filters.ffl-filters.ffl-filters--above[data-fflf-layout="auto"]:not([data-fflf-layout-now]) .ffl-filters__group-title { width: auto; }
    .ffl-filters.ffl-filters.ffl-filters--above[data-fflf-layout="auto"]:not([data-fflf-layout-now]) .ffl-filters__toggle,
    .ffl-filters.ffl-filters.ffl-filters--above[data-fflf-layout="auto"]:not([data-fflf-layout-now]) .ffl-filters__toggle:hover,
    .ffl-filters.ffl-filters.ffl-filters--above[data-fflf-layout="auto"]:not([data-fflf-layout-now]) .ffl-filters__toggle:focus,
    .ffl-filters.ffl-filters.ffl-filters--above[data-fflf-layout="auto"]:not([data-fflf-layout-now]) .ffl-filters__toggle:active,
    .ffl-filters.ffl-filters.ffl-filters--above[data-fflf-layout="auto"]:not([data-fflf-layout-now]) .ffl-filters__toggle:visited { width: auto; min-height: 40px; padding: 0 12px 0 14px; gap: 8px; border: 1px solid var(--fflf-border); border-radius: 6px; background: var(--fflf-surface); color: var(--fflf-text); white-space: nowrap; }
    .ffl-filters.ffl-filters.ffl-filters--above[data-fflf-layout="auto"]:not([data-fflf-layout-now]) .ffl-filters__toggle:hover { background: var(--fflf-surface-2); }
    .ffl-filters.ffl-filters.ffl-filters--above[data-fflf-layout="auto"]:not([data-fflf-layout-now]) .ffl-filters__toggle.has-value,
    .ffl-filters.ffl-filters.ffl-filters--above[data-fflf-layout="auto"]:not([data-fflf-layout-now]) .ffl-filters__toggle.has-value:hover,
    .ffl-filters.ffl-filters.ffl-filters--above[data-fflf-layout="auto"]:not([data-fflf-layout-now]) .ffl-filters__toggle.has-value:focus { border-color: var(--fflf-accent); }
    .ffl-filters.ffl-filters.ffl-filters--above[data-fflf-layout="auto"]:not([data-fflf-layout-now]) .ffl-filters__toggle[aria-expanded="true"],
    .ffl-filters.ffl-filters.ffl-filters--above[data-fflf-layout="auto"]:not([data-fflf-layout-now]) .ffl-filters__toggle[aria-expanded="true"]:hover,
    .ffl-filters.ffl-filters.ffl-filters--above[data-fflf-layout="auto"]:not([data-fflf-layout-now]) .ffl-filters__toggle[aria-expanded="true"]:focus,
    .ffl-filters.ffl-filters.ffl-filters--above[data-fflf-layout="auto"]:not([data-fflf-layout-now]) .ffl-filters__toggle[aria-expanded="true"]:active { background: var(--fflf-surface-2); border-color: var(--fflf-accent); box-shadow: inset 0 0 0 1px var(--fflf-accent); color: var(--fflf-text); }
    .ffl-filters.ffl-filters.ffl-filters--above[data-fflf-layout="auto"]:not([data-fflf-layout-now]) .ffl-filters__toggle-label { flex: 0 1 auto; white-space: nowrap; }
    .ffl-filters.ffl-filters.ffl-filters--above[data-fflf-layout="auto"]:not([data-fflf-layout-now]) .ffl-filters__options { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; width: 320px; max-width: calc(100vw - 32px); margin: 0; padding: 12px; background: var(--fflf-surface); border: 1px solid var(--fflf-border); border-radius: 8px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22); }
    .ffl-filters.ffl-filters.ffl-filters--above[data-fflf-layout="auto"]:not([data-fflf-layout-now]) .ffl-filters__group.is-flip > .ffl-filters__options { left: auto; right: 0; }
    .ffl-filters.ffl-filters.ffl-filters--above[data-fflf-layout="auto"]:not([data-fflf-layout-now]) .ffl-filters__pop-foot { display: flex; }
    .ffl-filters.ffl-filters.ffl-filters--above[data-fflf-layout="auto"]:not([data-fflf-layout-now]) .ffl-filters__group--switch > .ffl-filters__options { position: static; width: auto; padding: 0; border: 0; box-shadow: none; background: transparent; }
    .ffl-filters.ffl-filters.ffl-filters--above[data-fflf-layout="auto"]:not([data-fflf-layout-now]) .ffl-filters__group--switch .ffl-filters__option--switch { min-height: 40px; border-radius: 6px; border: 1px solid var(--fflf-border); background: var(--fflf-surface); gap: 10px; }
    .ffl-filters.ffl-filters.ffl-filters--above[data-fflf-layout="auto"]:not([data-fflf-layout-now]) .ffl-filters__actions { position: static; flex: 0 0 auto; margin: 0; padding: 0; border: 0; background: transparent; }
  }
}
@media (min-width: 1025px) {
  @container fflf-panel (min-width: 720px) {
    .ffl-filters.ffl-filters:not(.ffl-filters--above)[data-fflf-layout="auto"]:not([data-fflf-layout-now]) .ffl-filters__drawer { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
    .ffl-filters.ffl-filters:not(.ffl-filters--above)[data-fflf-layout="auto"]:not([data-fflf-layout-now]) .ffl-filters__form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: none; width: 100%; margin-inline: 0; }
    .ffl-filters.ffl-filters:not(.ffl-filters--above)[data-fflf-layout="auto"]:not([data-fflf-layout-now]) .ffl-filters__group { position: relative; margin: 0; flex: 0 0 auto; }
    .ffl-filters.ffl-filters:not(.ffl-filters--above)[data-fflf-layout="auto"]:not([data-fflf-layout-now]) .ffl-filters__group-title { width: auto; }
    .ffl-filters.ffl-filters:not(.ffl-filters--above)[data-fflf-layout="auto"]:not([data-fflf-layout-now]) .ffl-filters__toggle,
    .ffl-filters.ffl-filters:not(.ffl-filters--above)[data-fflf-layout="auto"]:not([data-fflf-layout-now]) .ffl-filters__toggle:hover,
    .ffl-filters.ffl-filters:not(.ffl-filters--above)[data-fflf-layout="auto"]:not([data-fflf-layout-now]) .ffl-filters__toggle:focus,
    .ffl-filters.ffl-filters:not(.ffl-filters--above)[data-fflf-layout="auto"]:not([data-fflf-layout-now]) .ffl-filters__toggle:active,
    .ffl-filters.ffl-filters:not(.ffl-filters--above)[data-fflf-layout="auto"]:not([data-fflf-layout-now]) .ffl-filters__toggle:visited { width: auto; min-height: 40px; padding: 0 12px 0 14px; gap: 8px; border: 1px solid var(--fflf-border); border-radius: 6px; background: var(--fflf-surface); color: var(--fflf-text); white-space: nowrap; }
    .ffl-filters.ffl-filters:not(.ffl-filters--above)[data-fflf-layout="auto"]:not([data-fflf-layout-now]) .ffl-filters__toggle:hover { background: var(--fflf-surface-2); }
    .ffl-filters.ffl-filters:not(.ffl-filters--above)[data-fflf-layout="auto"]:not([data-fflf-layout-now]) .ffl-filters__toggle.has-value,
    .ffl-filters.ffl-filters:not(.ffl-filters--above)[data-fflf-layout="auto"]:not([data-fflf-layout-now]) .ffl-filters__toggle.has-value:hover,
    .ffl-filters.ffl-filters:not(.ffl-filters--above)[data-fflf-layout="auto"]:not([data-fflf-layout-now]) .ffl-filters__toggle.has-value:focus { border-color: var(--fflf-accent); }
    .ffl-filters.ffl-filters:not(.ffl-filters--above)[data-fflf-layout="auto"]:not([data-fflf-layout-now]) .ffl-filters__toggle[aria-expanded="true"],
    .ffl-filters.ffl-filters:not(.ffl-filters--above)[data-fflf-layout="auto"]:not([data-fflf-layout-now]) .ffl-filters__toggle[aria-expanded="true"]:hover,
    .ffl-filters.ffl-filters:not(.ffl-filters--above)[data-fflf-layout="auto"]:not([data-fflf-layout-now]) .ffl-filters__toggle[aria-expanded="true"]:focus,
    .ffl-filters.ffl-filters:not(.ffl-filters--above)[data-fflf-layout="auto"]:not([data-fflf-layout-now]) .ffl-filters__toggle[aria-expanded="true"]:active { background: var(--fflf-surface-2); border-color: var(--fflf-accent); box-shadow: inset 0 0 0 1px var(--fflf-accent); color: var(--fflf-text); }
    .ffl-filters.ffl-filters:not(.ffl-filters--above)[data-fflf-layout="auto"]:not([data-fflf-layout-now]) .ffl-filters__toggle-label { flex: 0 1 auto; white-space: nowrap; }
    .ffl-filters.ffl-filters:not(.ffl-filters--above)[data-fflf-layout="auto"]:not([data-fflf-layout-now]) .ffl-filters__options { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; width: 320px; max-width: calc(100vw - 32px); margin: 0; padding: 12px; background: var(--fflf-surface); border: 1px solid var(--fflf-border); border-radius: 8px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22); }
    .ffl-filters.ffl-filters:not(.ffl-filters--above)[data-fflf-layout="auto"]:not([data-fflf-layout-now]) .ffl-filters__group.is-flip > .ffl-filters__options { left: auto; right: 0; }
    .ffl-filters.ffl-filters:not(.ffl-filters--above)[data-fflf-layout="auto"]:not([data-fflf-layout-now]) .ffl-filters__pop-foot { display: flex; }
    .ffl-filters.ffl-filters:not(.ffl-filters--above)[data-fflf-layout="auto"]:not([data-fflf-layout-now]) .ffl-filters__group--switch > .ffl-filters__options { position: static; width: auto; padding: 0; border: 0; box-shadow: none; background: transparent; }
    .ffl-filters.ffl-filters:not(.ffl-filters--above)[data-fflf-layout="auto"]:not([data-fflf-layout-now]) .ffl-filters__group--switch .ffl-filters__option--switch { min-height: 40px; border-radius: 6px; border: 1px solid var(--fflf-border); background: var(--fflf-surface); gap: 10px; }
    .ffl-filters.ffl-filters:not(.ffl-filters--above)[data-fflf-layout="auto"]:not([data-fflf-layout-now]) .ffl-filters__actions { position: static; flex: 0 0 auto; margin: 0; padding: 0; border: 0; background: transparent; }
  }
}