/* ==========================================================================
   Ouidoo Gym — Advanced Shop Grid
   WooBeWoo Product Filter (wpf) restyling.

   This is the companion sheet shop.css refers to: the --acc-* tokens below are
   the site palette, and shop.css reads them through var(--acc-*, fallback) so
   the grid and the filter always agree. Loaded on the same pages as shop.css;
   turn it off with the ogs_filter_styles filter.

   Everything is scoped under .wpfMainWrapper. The !important declarations are
   not decoration — WooBeWoo ships id-level and inline styles (#wpfSortProducts,
   the jQuery UI slider, jquery-multiselect) that cannot be outranked otherwise.
   ========================================================================== */

:root {
  --acc-black: #000000;
  --acc-green: #0f6a37;
  --acc-green-dark: #0b4f29;
  --acc-green-tint: rgba(15, 106, 55, 0.07);
  --acc-grey: #6b6b6b;
  --acc-grey-light: #9a9a9a;
  --acc-line: #e7e7e7;
  --acc-line-soft: #f0f0f0;
  --acc-bg: #ffffff;
  --acc-grey-bg: #f5f5f5;
  --acc-star: #ffc107;
  --font-heading: "Montserrat", Helvetica, Arial, sans-serif;
  --font-body: "Poppins", Helvetica, Arial, sans-serif;
  --wpf-field-h: 52px;
}

/* ---------- reset ---------- */

.wpfMainWrapper,
.wpfMainWrapper *,
.wpfMainWrapper *::before,
.wpfMainWrapper *::after {
  box-sizing: border-box;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ---------- layout ---------- */

.wpfMainWrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 28px 28px;
  align-items: start;
  padding: 24px;
  background: var(--acc-bg);
  border: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  color: var(--acc-black);
}

.wpfMainWrapper .wpfFilterWrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.wpfMainWrapper .wpfFilterContent,
.wpfMainWrapper .wpfCheckboxHier {
  width: 100%;
  min-width: 0;
}

/* ---------- block labels ---------- */

/* Blocks with "Show title" enabled render a real .wpfFilterTitle. Our
   data-slug stand-in below must stand down for those, or the block gets
   labelled twice — once properly, once with the raw slug. */
.wpfMainWrapper .wpfFilterWrapper:has(> .wpfFilterTitle)::before,
.wpfMainWrapper .wpfFilterWrapper[data-filter-type="wpfSearchText"]::before {
  content: none !important;
}

/* the plugin ships the remaining filters untitled, so name them from data-slug */
.wpfMainWrapper .wpfFilterWrapper[data-slug]:not([data-slug=""])::before {
  content: attr(data-slug);
  display: block;
  margin-bottom: 2px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: normal;
  line-height: 1;
  text-transform: uppercase;
  color: var(--acc-black);
}

.wpfMainWrapper .wfpDescription {
  display: block;
  margin: 0 0 2px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--acc-black);
}

/* ---------- collapsible titles ---------- */

.wpfMainWrapper .wpfFilterTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 2px;
  padding: 0;
  cursor: pointer;
  user-select: none;
}

/* A collapsible block's title also carries .wfpClickable, which the plugin
   styles as a link at a higher specificity than a bare .wfpTitle rule can
   answer. Listing the compound selectors here — rather than restating the
   declarations in a second block — means each one applies at its own weight
   and the clickable variant matches the block labels exactly. The third form
   covers the build that puts .wfpClickable on the wrapper instead. */
.wpfMainWrapper .wfpTitle,
.wpfMainWrapper .wfpTitle.wfpClickable,
.wpfMainWrapper .wfpClickable .wfpTitle {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--acc-black);
}

.wpfMainWrapper .wpfTitleToggle {
  flex: 0 0 auto;
  font-size: 11px;
  line-height: 1;
  color: var(--acc-grey-light);
  transition: color 0.15s ease;
}

.wpfMainWrapper .wpfFilterTitle:hover .wfpTitle,
.wpfMainWrapper .wpfFilterTitle:hover .wpfTitleToggle {
  color: var(--acc-green);
}

/* ---------- text search ---------- */

.wpfMainWrapper .wpfSingleInputSearch {
  position: relative;
  display: flex;
  width: 100%;
}

.wpfMainWrapper .wpfSingleInputSearch input.passiveFilter {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: var(--wpf-field-h);
  margin: 0;
  padding: 0 46px 0 15px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  color: var(--acc-black);
  background: var(--acc-grey-bg);
  border: 0;
  border-radius: 0 !important;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.wpfMainWrapper .wpfSingleInputSearch input.passiveFilter:hover {
  background: #ececec;
}

/* an inset ring keeps the focus state visible without reintroducing a border */
.wpfMainWrapper .wpfSingleInputSearch input.passiveFilter:focus {
  outline: none;
  background: var(--acc-grey-bg);
  box-shadow: inset 0 0 0 1px var(--acc-black) !important;
}

.wpfMainWrapper .wpfSingleInputSearch input.passiveFilter::placeholder {
  color: var(--acc-grey-light);
  opacity: 1;
}

/* the plugin renders this button empty — supply the magnifier */
.wpfMainWrapper .wpfSingleInputSearch button.js-wpfFilterButtonSearch {
  position: absolute;
  top: 0;
  right: 0;
  width: 46px;
  height: var(--wpf-field-h);
  margin: 0;
  padding: 0;
  font-size: 0;
  background-color: transparent;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7'%3E%3Ccircle cx='7' cy='7' r='5.4'/%3E%3Cpath d='M11 11l4.2 4.2' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 17px 17px;
  border: 0;
  border-radius: 0 !important;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.15s ease;
}

.wpfMainWrapper .wpfSingleInputSearch button.js-wpfFilterButtonSearch:hover {
  opacity: 1;
}

/* ---------- utilities ---------- */

.wpfMainWrapper .wpfHidden {
  display: none !important;
}

/* the plugin measures these buffers to size the price inputs — keep them
   measurable and matched to the readout font, or the values get clipped */
.wpfMainWrapper .wpfVisibleBufferMin,
.wpfMainWrapper .wpfVisibleBufferMax {
  position: absolute !important;
  top: 0;
  left: 0;
  height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  white-space: nowrap !important;
  pointer-events: none;
  font-family: var(--font-heading) !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  letter-spacing: 0.01em !important;
}

.wpfMainWrapper .wpfSrOnly {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- fields ---------- */

/* native selects and the multiselect trigger share one look */
.wpfMainWrapper #wpfSortProducts,
.wpfMainWrapper .wpfFilterContent > select,
.wpfMainWrapper .ms-options-wrap > button {
  display: block;
  width: 100%;
  height: var(--wpf-field-h);
  margin: 0;
  padding: 0 38px 0 15px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  line-height: calc(var(--wpf-field-h) - 4px);
  color: var(--acc-black);
  text-align: left;
  text-transform: none;
  background-color: var(--acc-bg);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23000' d='M.7 0 5 4.3 9.3 0l.7.7L5 5.7 0 .7Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 11px 7px;
  border: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition:
    border-color 0.18s ease,
    background-color 0.18s ease;
}

/* the sort select ships with its own id-level !important styling — match the others */
.wpfMainWrapper select#wpfSortProducts,
.wpfMainWrapper .wpfCheckboxHier .ms-options-wrap > button {
  height: var(--wpf-field-h) !important;
  padding: 0 38px 0 15px !important;
  font-family: var(--font-heading) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--acc-black) !important;
  background-color: var(--acc-grey-bg) !important;
  border: 0 !important;
  border-radius: 0 !important;
  text-transform: none !important;
}

.wpfMainWrapper #wpfSortProducts:hover,
.wpfMainWrapper .wpfFilterContent > select:hover,
.wpfMainWrapper .ms-options-wrap > button:hover {
  border-color: var(--acc-black);
}

.wpfMainWrapper select#wpfSortProducts:hover,
.wpfMainWrapper .wpfCheckboxHier .ms-options-wrap > button:hover {
  border-color: var(--acc-black) !important;
}

.wpfMainWrapper #wpfSortProducts:focus,
.wpfMainWrapper .wpfFilterContent > select:focus,
.wpfMainWrapper .ms-options-wrap > button:focus {
  outline: none;
  border-color: var(--acc-black);
}

/* ==========================================================================
   Chips
   filter.js converts the Sort / Stock selects and the category multiselect
   into these; the On sale and Rating lists are already checkbox rows, so they
   are reshaped into the same chip with CSS alone.
   ========================================================================== */

/* the native control stays in the DOM, driving the plugin, but out of sight */
.wpfMainWrapper .ogs-f-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.wpfMainWrapper .ogs-f-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.wpfMainWrapper .ogs-f-chip,
.wpfMainWrapper .wpfLiLabel {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  margin: 0;
  padding: 0 13px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.2;
  color: var(--acc-grey);
  text-align: left;
  background: var(--acc-grey-bg);
  border: 0;
  border-radius: 0 !important;
  cursor: pointer;
  transition:
    color 0.15s ease,
    background-color 0.15s ease;
}

.wpfMainWrapper .ogs-f-chip:hover,
.wpfMainWrapper .wpfLiLabel:hover {
  color: var(--acc-black);
  background: #ececec;
}

/* selected: solid, the way a chosen variation reads on a product card */
.wpfMainWrapper .ogs-f-chip.is-on,
.wpfMainWrapper .wpfLiLabel:has(input:checked) {
  font-weight: 600;
  color: #ffffff;
  background: var(--acc-black);
}

/* ---------- brands: three-across tiles ----------
   The grey sits on the container, not the tiles, so the logos read as one
   panel rather than nine separate boxes. */

.wpfMainWrapper [data-filter-type="wpfBrand"] .wpfFilterVerScroll,
.wpfMainWrapper [data-filter-type="wpfBrand"] .ogs-f-chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-height: 200px;
  padding: 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--acc-grey-bg);
}

.wpfMainWrapper [data-filter-type="wpfBrand"] .wpfFilterVerScroll::-webkit-scrollbar,
.wpfMainWrapper [data-filter-type="wpfBrand"] .ogs-f-chips::-webkit-scrollbar {
  width: 5px;
}

.wpfMainWrapper [data-filter-type="wpfBrand"] .wpfFilterVerScroll::-webkit-scrollbar-thumb,
.wpfMainWrapper [data-filter-type="wpfBrand"] .ogs-f-chips::-webkit-scrollbar-thumb {
  background: var(--acc-grey-light);
}

.wpfMainWrapper [data-filter-type="wpfBrand"] .wpfFilterVerScroll > li {
  margin: 0;
}

.wpfMainWrapper [data-filter-type="wpfBrand"] .wpfLiLabel,
.wpfMainWrapper [data-filter-type="wpfBrand"] .ogs-f-chip {
  flex-direction: column;
  gap: 6px;
  justify-content: center;
  min-height: 0;
  padding: 13px 11px;
  text-align: center;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.wpfMainWrapper [data-filter-type="wpfBrand"] .wpfDisplay,
.wpfMainWrapper [data-filter-type="wpfBrand"] .wpfValue {
  flex-direction: column;
  gap: 6px;
}

/* A fixed, small frame rather than a ratio: these logos are SVG, which has no
   intrinsic size, and a 5:4 box let a wide mark fill the whole tile. The mark
   is contained inside it, never cropped. */
.wpfMainWrapper [data-filter-type="wpfBrand"] .ogs-f-chip__img,
.wpfMainWrapper [data-filter-type="wpfBrand"] .wpfValue > img {
  display: block;
  width: 100%;
  height: 28px;
  aspect-ratio: auto;
  background: transparent;
}

/* the frame stays transparent so the tile's own background shows through */
.wpfMainWrapper [data-filter-type="wpfBrand"] .ogs-f-chip.is-on .ogs-f-chip__img,
.wpfMainWrapper [data-filter-type="wpfBrand"] .wpfLiLabel:has(input:checked) .ogs-f-chip__img,
.wpfMainWrapper [data-filter-type="wpfBrand"] .wpfLiLabel:has(input:checked) .wpfValue > img {
  background: transparent;
}

.wpfMainWrapper [data-filter-type="wpfBrand"] .ogs-f-chip__img img,
.wpfMainWrapper [data-filter-type="wpfBrand"] .wpfValue > img {
  object-fit: contain;
  object-position: center;
}

.wpfMainWrapper [data-filter-type="wpfBrand"] .wpfFilterTaxNameWrapper,
.wpfMainWrapper [data-filter-type="wpfBrand"] .ogs-f-chip__label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 11px;
  line-height: 1.25;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

/* A brand logo says its own name, so the wording is redundant beside it.
   Hidden from view but kept in the DOM — a grid of unlabelled images would be
   unusable to a screen reader otherwise. Terms with no logo keep their text. */
.wpfMainWrapper [data-filter-type="wpfBrand"] .has-image .wpfFilterTaxNameWrapper,
.wpfMainWrapper [data-filter-type="wpfBrand"] .ogs-f-chip.has-image .ogs-f-chip__label {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* With no caption the tile is just the logo, so it carries no fill of its own
   and the container's grey shows through. The logo always sits at full
   strength — selection is marked with a thin outline instead.

   The outline is drawn as an inset box-shadow rather than a border so it does
   not add to the tile's size and shift the grid when a brand is picked. */
.wpfMainWrapper [data-filter-type="wpfBrand"] .wpfLiLabel:has(.ogs-f-chip__img),
.wpfMainWrapper [data-filter-type="wpfBrand"] .ogs-f-chip.has-image {
  gap: 0;
  margin: 0;
  /* padding, not 0: the logo should sit inside the tile rather than run to
     its edges, and this rule outranks the base tile above */
  padding: 20px 18px;
  background: transparent;
  opacity: 1;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

/* hover uses a softer fill so it stays distinct from the selected white */
.wpfMainWrapper [data-filter-type="wpfBrand"] .wpfLiLabel:has(.ogs-f-chip__img):hover,
.wpfMainWrapper [data-filter-type="wpfBrand"] .ogs-f-chip.has-image:hover {
  background: #ececec;
  box-shadow: none !important;
}

/* selected: a white tile lifting out of the grey panel, fill only */
.wpfMainWrapper [data-filter-type="wpfBrand"] .wpfLiLabel:has(.ogs-f-chip__img):has(input:checked),
.wpfMainWrapper [data-filter-type="wpfBrand"] .ogs-f-chip.has-image.is-on {
  background: #ffffff;
  box-shadow: none !important;
}

/* ---------- image chips (brands, categories with a thumbnail) ---------- */

.wpfMainWrapper .ogs-f-chip.has-image,
.wpfMainWrapper .wpfLiLabel:has(.ogs-f-chip__img) {
  padding: 5px;
}

.wpfMainWrapper .ogs-f-chip__img {
  display: block;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--acc-grey-bg);
}

/* a thumbnail WooBeWoo rendered itself, sized to match ours */
.wpfMainWrapper .wpfValue > img,
.wpfMainWrapper .ms-options ul li label > img {
  display: block;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  aspect-ratio: 1 / 1;
  margin: 0;
  object-fit: contain;
  background: var(--acc-grey-bg);
}

/* WooBeWoo ships `.wpfValue img { margin: 0 5px 0 0 }` as a descendant rule,
   so an image nested any deeper than a direct child keeps that offset and sits
   off-centre. The chip's own flex gap does the spacing, so it goes to zero. */
.wpfMainWrapper .wpfValue img,
.wpfMainWrapper .ms-options ul li label img {
  margin: 0;
}

.wpfMainWrapper .ogs-f-chip__img img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center;
}

/* brand marks are usually drawn for white, so keep a light plate behind them
   even when the chip itself goes black */
.wpfMainWrapper .ogs-f-chip.is-on .ogs-f-chip__img,
.wpfMainWrapper .wpfLiLabel:has(input:checked) .ogs-f-chip__img {
  background: #ffffff;
}

.wpfMainWrapper .ogs-f-chip__count {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 10px;
  line-height: 1;
  color: var(--acc-grey-light);
}

.wpfMainWrapper .ogs-f-chip.is-on .ogs-f-chip__count {
  color: rgba(255, 255, 255, 0.7);
}

/* ---------- on sale + rating, reshaped into the same chip ---------- */

.wpfMainWrapper .wpfFilterVerScroll {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  list-style: none;
}

.wpfMainWrapper .wpfFilterVerScroll > li {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
}

/* the chip is the li's only child, so it has to fill it for grid layouts */
.wpfMainWrapper .wpfFilterVerScroll > li > .wpfLiLabel {
  width: 100%;
}

/* the chip itself says what it is — the tickbox is redundant */
.wpfMainWrapper .wpfFilterVerScroll .wpfCheckbox {
  display: none !important;
}

/* WooBeWoo ships `.wpfFilterContent span { font-size: 13px; font-weight: 600;
   color: #64808e }`, which lands on every span inside a filter block — the
   value, the name, the count. None of that belongs to this palette, and the
   blue-grey fights the chip's own colour, so all three go back to inheriting
   from the chip. Anything that genuinely needs its own size or weight (.wpfCount,
   the price readout) states it further down and still wins. */
.wpfMainWrapper .wpfFilterContent
  span:not(.wpfCount):not(.wpfCurrencySymbol):not(.wpfFilterDelimeter) {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

/* These sit between the chip and .wpfFilterTaxNameWrapper, which takes its
   colour by inheritance. WooBeWoo colours them directly, which breaks that
   chain — the name then inherits the plugin's grey instead of the chip's
   white. Passing the colour through here repairs it for every state at once. */
.wpfMainWrapper .wpfDisplay,
.wpfMainWrapper .wpfValue {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: inherit;
}

/* and stated outright for the selected chip, so it holds even where the
   plugin's own rule outranks the inherit above.

   Rating is excluded: its rows are a plain list rather than a black chip, so
   white text there would be invisible. Because this targets the spans
   directly it beats any colour the row inherits from its label, which is why
   the exclusion has to live here rather than in the rating section. */
.wpfMainWrapper .wpfLiLabel:not([data-ogs-plain]):has(input:checked) .wpfDisplay,
.wpfMainWrapper .wpfLiLabel:not([data-ogs-plain]):has(input:checked) .wpfValue,
.wpfMainWrapper .ogs-f-chip.is-on .wpfDisplay,
.wpfMainWrapper .ogs-f-chip.is-on .wpfValue {
  color: #ffffff;
}

/* rating rows keep the label's own colour */
.wpfMainWrapper [data-filter-type="wpfRating"] .wpfLiLabel:has(input:checked) .wpfDisplay,
.wpfMainWrapper [data-filter-type="wpfRating"] .wpfLiLabel:has(input:checked) .wpfValue,
.wpfMainWrapper [data-filter-type="wpfRating"] .wpfLiLabel:has(input:checked) .wpfFilterTaxNameWrapper {
  color: var(--acc-black);
}

/* ---------- category multiselect ----------
   filter.js replaces this panel with chips and hides the wrapper, so only the
   pieces that still matter when JS has not run are kept here. Without them the
   filter would be unusable rather than merely unstyled. */

.wpfMainWrapper .ms-options-wrap {
  position: relative;
  width: 100%;
}

.wpfMainWrapper .ms-options-wrap > button::after,
.wpfMainWrapper .ms-options-wrap > button::before {
  content: none !important;
  display: none !important;
  border: none !important;
}

.wpfMainWrapper .ms-options {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 30;
  width: 100%;
  max-height: 264px !important;
  padding: 5px 0;
  background: var(--acc-bg);
  border: 1px solid var(--acc-black);
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

.wpfMainWrapper .ms-options ul {
  margin: 0;
  padding: 0;
  list-style: none;
  column-count: 1 !important;
}

.wpfMainWrapper .ms-options ul li {
  margin: 0;
  padding: 0;
  list-style: none;
  border: none;
}

.wpfMainWrapper .ms-options ul li.wpfHidden,
.wpfMainWrapper .ms-options ul li[style*="display: none"],
.wpfMainWrapper .ms-options ul li[style*="display:none"] {
  display: none !important;
}

.wpfMainWrapper .ms-options ul li label {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  margin: 0;
  padding: 10px 14px !important;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4 !important;
  color: var(--acc-black);
  cursor: pointer;
}

.wpfMainWrapper .ms-options ul li label:hover {
  background: var(--acc-grey-bg);
}

/* ---------- on sale ---------- */

/* the chip itself reads "On Sale", so the block label would only repeat it */
.wpfMainWrapper .wpfFilterWrapper[data-slug="on sale"]::before {
  content: none !important;
}

/* ---------- rating ---------- */

/* Stars replace the "4 and up" wording. The glyphs are drawn with ::before so
   they inherit the chip's colour, including when it is selected. */
.wpfMainWrapper [data-slug="rating"] .wpfFilterTaxNameWrapper {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.wpfMainWrapper [data-slug="rating"] .wpfFilterTaxNameWrapper::before {
  font-size: 14px;
  line-height: 1;
  letter-spacing: 1px;
  color: var(--acc-star);
}

.wpfMainWrapper [data-slug="rating"] .wpfLiLabel:has(input:checked) .wpfFilterTaxNameWrapper::before {
  color: var(--acc-star);
}

.wpfMainWrapper [data-slug="rating"] li[data-term-slug="5-5"] .wpfFilterTaxNameWrapper::before {
  content: "\2605\2605\2605\2605\2605";
}

.wpfMainWrapper [data-slug="rating"] li[data-term-slug="4-5"] .wpfFilterTaxNameWrapper::before {
  content: "\2605\2605\2605\2605\2606";
}

.wpfMainWrapper [data-slug="rating"] li[data-term-slug="3-5"] .wpfFilterTaxNameWrapper::before {
  content: "\2605\2605\2605\2606\2606";
}

.wpfMainWrapper [data-slug="rating"] li[data-term-slug="2-5"] .wpfFilterTaxNameWrapper::before {
  content: "\2605\2605\2606\2606\2606";
}

.wpfMainWrapper [data-slug="rating"] li[data-term-slug="1-5"] .wpfFilterTaxNameWrapper::before {
  content: "\2605\2606\2606\2606\2606";
}

/* the name inherits the chip colour rather than setting its own */
.wpfMainWrapper .wpfFilterTaxNameWrapper {
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  color: inherit;
}

.wpfMainWrapper .wpfCount {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 10px;
  line-height: 1;
  color: var(--acc-grey-light);
}

.wpfMainWrapper .wpfLiLabel:has(input:checked) .wpfCount {
  color: rgba(255, 255, 255, 0.7);
}

/* ---------- rating: a plain list, not chips ----------
   Five stacked rows read faster than five wrapped chips, and the stars already
   give each row its own shape. */

.wpfMainWrapper [data-filter-type="wpfRating"] .wpfFilterVerScroll {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  background: transparent;
}

.wpfMainWrapper [data-filter-type="wpfRating"] .wpfFilterVerScroll > li {
  width: 100%;
}

.wpfMainWrapper [data-filter-type="wpfRating"] .wpfLiLabel {
  width: 100%;
  min-height: 0;
  padding: 7px 0;
  color: var(--acc-grey);
  background: transparent;
}

.wpfMainWrapper [data-filter-type="wpfRating"] .wpfLiLabel:hover {
  color: var(--acc-black);
  background: transparent;
}

/* with no fill to invert, the selected row leans on weight and colour */
.wpfMainWrapper [data-filter-type="wpfRating"] .wpfLiLabel:has(input:checked) {
  font-weight: 700;
  color: var(--acc-black);
  background: transparent;
}

/* ---------- price (ion.rangeSlider) ----------
   WooBeWoo moved the price filter off jQuery UI. The markup is now an outer
   .irs wrapper holding .irs-line (the track), .irs-bar (the chosen range) and
   two .irs-handle elements, with the numbers repeated below in .wpfPriceInputs.

   Three things shape what is set here:

   1. Each price block prints its own <style id="wpfBlock_N_style"> carrying the
      colours from WooBeWoo's colour picker, at
      `div.wpfMainWrapper[data-filter="1"] #wpfBlock_N .irs-bar` — (1,3,1),
      ID-level. Rather than fight that with !important on every colour, this
      sets geometry only and lets the admin choice drive the bar and the handle
      border. To recolour the slider, use the plugin's picker, not this file.
   2. Our own reset squares every corner inside .wpfMainWrapper at (0,1,0)
      !important, so a round handle has to outrank it — hence the border-radius.
   3. There are two nested .irs elements, and the skin class (.irs--round here)
      changes if the admin picks a different skin. Keying off
      `.wpfFilterContent > .irs` picks out the outer one by position instead,
      so these rules survive a skin change. */

.wpfMainWrapper .wpfFilterContent > .irs,
.wpfMainWrapper .wpfFilterContent > .irs.irs-with-grid {
  position: relative;
  display: block;
  height: 17px;
  /* side gutters: a handle is centred on its value, so at 0 and 100% half of
     it would sit outside the column and be clipped */
  margin: 10px 9px 0;
  width: auto;
  padding: 0;
  font-family: var(--font-body);
}

/* the inner .irs is only a positioning context; the track draws inside it */
.wpfMainWrapper .wpfFilterContent > .irs > .irs {
  position: static;
  display: block;
  height: 0;
}

.wpfMainWrapper .wpfFilterContent > .irs .irs-line {
  position: absolute;
  top: 7px;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--acc-line);
  border: 0;
  cursor: pointer;
}

/* the track carries tabindex="0", so it needs a visible focus ring of its own */
.wpfMainWrapper .wpfFilterContent > .irs .irs-line:focus-visible {
  outline: 2px solid var(--acc-black);
  outline-offset: 3px;
}

/* background-color comes from the block's own <style> — see note 1 above */
.wpfMainWrapper .wpfFilterContent > .irs .irs-bar {
  position: absolute;
  top: 7px;
  height: 3px;
  border: 0;
}

/* ion.rangeSlider measures the handle at init and scales `left` so it never
   overruns the track. That is why this needs no negative margin and the track
   needs no side gutters — unlike the jQuery UI slider it replaced. */
.wpfMainWrapper .wpfFilterContent > .irs .irs-handle {
  position: absolute;
  top: 0;
  z-index: 2;
  width: 17px;
  height: 17px;
  padding: 0;
  background-color: var(--acc-bg);
  border: 2px solid var(--acc-black);
  border-radius: 50% !important;
  outline: none;
  cursor: grab;
  touch-action: none;
  transition:
    background-color 0.15s ease,
    transform 0.15s ease;
}

/* the round skin draws nothing with these, and the reset would square them */
.wpfMainWrapper .wpfFilterContent > .irs .irs-handle > i {
  display: none !important;
}

/* .state_hover is the class the script adds while dragging */
.wpfMainWrapper .wpfFilterContent > .irs .irs-handle:hover,
.wpfMainWrapper .wpfFilterContent > .irs .irs-handle.state_hover,
.wpfMainWrapper .wpfFilterContent > .irs .irs-handle:focus-visible {
  background-color: var(--acc-green);
  transform: scale(1.15);
}

.wpfMainWrapper .wpfFilterContent > .irs .irs-handle:active {
  cursor: grabbing;
}

/* The floating bubbles, the min/max captions and the tick grid all restate what
   .wpfPriceInputs already shows in editable fields, and five tick labels do not
   fit a 190px column. Hidden with display, not visibility, so the inline
   `visibility: visible` the script writes onto .irs-from / .irs-to cannot bring
   them back. Delete this rule to show the grid. */
.wpfMainWrapper .wpfFilterContent > .irs .irs-from,
.wpfMainWrapper .wpfFilterContent > .irs .irs-to,
.wpfMainWrapper .wpfFilterContent > .irs .irs-single,
.wpfMainWrapper .wpfFilterContent > .irs .irs-min,
.wpfMainWrapper .wpfFilterContent > .irs .irs-max,
.wpfMainWrapper .wpfFilterContent > .irs .irs-grid,
.wpfMainWrapper .wpfFilterContent > .irs .irs-shadow {
  display: none !important;
}

/* ---------- price readout ----------
   WooBeWoo prints: the currency symbol, the min input, a delimiter, the max
   input. There is only one symbol, so the delimiter's ::after supplies the
   second — an <input> cannot carry pseudo-elements of its own.

   These are real, editable number inputs (no readonly attribute), so they are
   given the same filled box as every other field in the panel. Styled as bare
   text they read as static labels and nobody tries typing in them. */

.wpfMainWrapper .wpfPriceInputs {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  font-family: var(--font-heading);
  color: var(--acc-black);
}

/* An <input> cannot hold a pseudo-element, and the symbol is a sibling rather
   than a child, so there is no wrapper to put it inside. It is instead pulled
   back over the field with a negative margin and painted on top — the field's
   left padding is widened to leave room for it.

   pointer-events: none so a click on the symbol still lands in the field. */
.wpfMainWrapper .wpfCurrencySymbol {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  /* 8px flex gap + 11px inset */
  margin: 0 -19px 0 0;
  padding-left: 11px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  color: var(--acc-grey);
  pointer-events: none;
}

/* the en dash, then the second currency symbol before the max field */
/* The dash and the second symbol both live here. Shifting the whole element
   moves only the max field beneath it — the dash keeps its place to the left
   of the symbol. */
.wpfMainWrapper .wpfFilterDelimeter {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  margin: 0 -19px 0 0;
  padding: 0;
  font-size: 0;
  pointer-events: none;
}

.wpfMainWrapper .wpfFilterDelimeter::before {
  content: "\2013";
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  color: var(--acc-grey-light);
}

.wpfMainWrapper .wpfFilterDelimeter::after {
  content: "$";
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  color: var(--acc-grey);
}

/* Divi styles form fields hard enough to keep its own box showing through, so
   the chrome is set at (0,3,0) with !important rather than merely declared.
   flex: 1 1 0 so the two fields share the row evenly whatever the digits. */
.wpfMainWrapper .wpfPriceInputs .wpfPriceRangeField {
  flex: 1 1 0;
  width: auto !important;
  min-width: 0;
  height: 42px !important;
  margin: 0;
  /* left padding clears the symbol overlaid above */
  padding: 0 10px 0 26px !important;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  text-align: left;
  color: var(--acc-black);
  background: var(--acc-grey-bg) !important;
  border: 1px solid var(--acc-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: text;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.wpfMainWrapper .wpfPriceInputs .wpfPriceRangeField:hover {
  background: #ececec !important;
}

.wpfMainWrapper .wpfPriceInputs .wpfPriceRangeField:focus {
  outline: none;
  background: var(--acc-bg) !important;
  border-color: var(--acc-black) !important;
}

/* the spinner arrows would crowd a field this narrow */
.wpfMainWrapper .wpfPriceRangeField::-webkit-outer-spin-button,
.wpfMainWrapper .wpfPriceRangeField::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
}

.wpfMainWrapper .wpfPriceRangeField[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* the hidden step field is a sibling in the same flex row */
.wpfMainWrapper .wpfPriceInputs #wpfDataStep,
.wpfMainWrapper .wpfPriceInputs input[type="hidden"] {
  display: none !important;
}

/* ---------- actions ---------- */

.wpfMainWrapper .wpfFilterButtons {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: stretch;
  gap: 10px;
  margin: 4px 0 0;
  padding: 0;
  border-top: 0;
}

/* shared shape — same proportions as the product card's .ogs-btn */
.wpfMainWrapper button.wpfButton,
.wpfMainWrapper button.wpfClearButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: var(--wpf-field-h);
  margin: 0;
  padding: 0 24px !important;
  font-family: var(--font-heading) !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 0 !important;
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}

/* primary: solid, green on hover.
   The Clear button ships as class="wpfClearButton wpfButton", so the solid
   treatment has to explicitly exclude it rather than rely on source order. */
.wpfMainWrapper button.wpfButton:not(.wpfClearButton) {
  color: #ffffff !important;
  background: var(--acc-black) !important;
}

.wpfMainWrapper button.wpfButton:not(.wpfClearButton):hover {
  color: #ffffff !important;
  background: var(--acc-green) !important;
  border-color: var(--acc-green) !important;
}

/* secondary: the same grey fill as the chips, going solid on hover */
.wpfMainWrapper button.wpfClearButton {
  color: var(--acc-black) !important;
  background: var(--acc-grey-bg) !important;
}

.wpfMainWrapper button.wpfClearButton:hover {
  color: #ffffff !important;
  background: var(--acc-black) !important;
}

/* ---------- loaders ---------- */

.wpfMainWrapper .wpfLoaderLayout,
.wpfMainWrapper .wpfPreview:not(.wpfHidden) {
  grid-column: 1 / -1;
  padding: 6px 0;
  text-align: center;
}

.wpfMainWrapper .woobewoo-filter-loader,
.wpfMainWrapper .woobewoo-filter-loader .fa-spinner {
  color: var(--acc-green);
  font-size: 20px;
}

.wpfMainWrapper .woobewoo-filter-loader.la-square-loader > div,
.wpfMainWrapper .woobewoo-filter-loader.la-square-loader > div::before,
.wpfMainWrapper .woobewoo-filter-loader.la-square-loader > div::after {
  background: var(--acc-green);
}

/* ---------- focus ---------- */

.wpfMainWrapper a:focus-visible,
.wpfMainWrapper button:focus-visible,
.wpfMainWrapper select:focus-visible,
.wpfMainWrapper input:focus-visible,
.wpfMainWrapper .wpfCheckbox input[type="checkbox"]:focus-visible + label {
  outline: 2px solid var(--acc-black);
  outline-offset: 2px;
}

/* ---------- empty result ---------- */

/* the filter's no-products message, rendered inside ul.products */
.woocommerce-info.wpfNoProducts,
.wpfNoProductsMessage {
  grid-column: 1 / -1;
  margin: 0;
  padding: 30px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--acc-grey);
  background: var(--acc-grey-bg);
  border: 0;
}

/* ---------- responsive ----------
   Mirrors the breakpoints in shop.css so the filter and the grid step down
   together rather than at different widths. */

@media all and (max-width: 1100px) {
  .wpfMainWrapper {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 26px 24px;
  }
}

@media all and (max-width: 980px) {
  .wpfMainWrapper {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 20px 22px;
  }
}

@media all and (max-width: 782px) {
  .wpfMainWrapper {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 24px 20px;
  }

  .wpfMainWrapper button.wpfButton,
  .wpfMainWrapper button.wpfClearButton {
    min-width: 0;
    padding: 0 22px !important;
  }
}

@media all and (max-width: 560px) {
  .wpfMainWrapper {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .wpfMainWrapper .wpfFilterButtons {
    justify-content: stretch;
    gap: 10px;
    padding-top: 18px;
  }

  .wpfMainWrapper .wpfButton,
  .wpfMainWrapper .wpfClearButton {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 14px !important;
    font-size: 11px !important;
    letter-spacing: 0.1em;
  }

  /* the dropdown must not run off the bottom of a short phone viewport */
  .wpfMainWrapper .ms-options {
    max-height: 50vh !important;
  }
}

@media all and (max-width: 400px) {
  .wpfMainWrapper {
    gap: 18px;
  }

  .wpfMainWrapper .wpfFilterWrapper[data-slug]:not([data-slug=""])::before,
  .wpfMainWrapper .wfpDescription {
    font-size: 11px;
    letter-spacing: 0.12em;
  }

  .wpfMainWrapper .wpfPriceInputs .wpfPriceRangeField {
    font-size: 16px;
  }

  .wpfMainWrapper .wpfFilterButtons {
    flex-wrap: wrap;
  }

  .wpfMainWrapper .wpfButton,
  .wpfMainWrapper .wpfClearButton {
    flex: 1 1 100%;
  }
}

/* ---------- touch ---------- */

@media (pointer: coarse) {
  /* 44px minimum tap target */
  .wpfMainWrapper .ogs-f-chip,
  .wpfMainWrapper .wpfLiLabel {
    min-height: 40px;
    padding: 0 15px;
  }

  .wpfMainWrapper .ogs-f-chips,
  .wpfMainWrapper .wpfFilterVerScroll {
    gap: 8px;
  }

  .wpfMainWrapper .ms-options ul li label {
    min-height: 44px;
    padding: 12px 15px !important;
  }

  /* a 3px track is hard to grab on touch, so the handle gets bigger. The
     wrapper grows with it, since ion.rangeSlider positions the handle from the
     top of .irs rather than centring it on the track. */
  .wpfMainWrapper .wpfFilterContent > .irs,
  .wpfMainWrapper .wpfFilterContent > .irs.irs-with-grid {
    height: 26px;
  }

  .wpfMainWrapper .wpfFilterContent > .irs .irs-line,
  .wpfMainWrapper .wpfFilterContent > .irs .irs-bar {
    top: 11px;
    height: 4px;
  }

  .wpfMainWrapper .wpfFilterContent > .irs .irs-handle {
    width: 26px;
    height: 26px;
  }

  /*
   * Safari zooms the page when a focused field is under 16px, which would
   * throw the layout off the moment someone taps a filter control.
   */
  .wpfMainWrapper #wpfSortProducts,
  .wpfMainWrapper select#wpfSortProducts,
  .wpfMainWrapper .wpfFilterContent > select,
  .wpfMainWrapper .ms-options-wrap > button,
  .wpfMainWrapper .wpfCheckboxHier .ms-options-wrap > button,
  .wpfMainWrapper .wpfPriceRangeField,
  .wpfMainWrapper .wpfSingleInputSearch input.passiveFilter,
  .wpfMainWrapper input[type="text"],
  .wpfMainWrapper input[type="number"] {
    font-size: 16px !important;
  }

  /* the search submit sits inside the field, so it needs its own tap target */
  .wpfMainWrapper .wpfSingleInputSearch button.js-wpfFilterButtonSearch {
    width: 48px;
  }

  .wpfMainWrapper .wpfFilterTitle {
    min-height: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wpfMainWrapper *,
  .wpfMainWrapper *::before,
  .wpfMainWrapper *::after {
    transition-duration: 0.01ms !important;
  }
}