/*!
 * WH Filters: front-end styles. Contract: wp-plugin/CONTRACT.md §5.
 *
 * Specificity: the theme styles form fields with '.woocommerce-page .page-content select'
 * (0,2,1) and '.page-content input' (0,1,1). Rules that must win are written with two
 * selectors: '.woocommerce-page .page-content .wh-flt-bar …' (site) and a plain
 * '.wh-flt-bar …' fallback (BO test frame, non-WC pages).
 * Visual language: Montserrat inherited, text #464646, borders #e8e8e8, 8px radius.
 * Breakpoint 700px is hard-coded (CSS variables cannot be used in media queries); the
 * same value reaches the JS as data-config "bp".
 */

/* ------------------------------------------------------------------ *
 * 1. Page state: hide the WC loop while pending / loading / active.
 *    The count line stays (the JS writes our count into it, beside the
 *    sort control) except while pending: before the script runs its
 *    number is the unfiltered total.
 * ------------------------------------------------------------------ */
html.wh-flt-pending #main > ul.products,
html.wh-flt-pending #main > .woocommerce-result-count,
html.wh-flt-pending #main > nav.blog-pagination,
html.wh-flt-pending #main > nav.woocommerce-pagination,
html.wh-flt-pending #main > .woocommerce-no-products-found,
html.wh-flt-loading #main > ul.products,
html.wh-flt-loading #main > nav.blog-pagination,
html.wh-flt-loading #main > nav.woocommerce-pagination,
html.wh-flt-loading #main > .woocommerce-no-products-found,
html.wh-flt-active #main > ul.products,
html.wh-flt-active #main > nav.blog-pagination,
html.wh-flt-active #main > nav.woocommerce-pagination,
html.wh-flt-active #main > .woocommerce-no-products-found {
	display: none !important;
}

.wh-flt-bar [hidden],
.wh-flt-head [hidden],
.wh-flt-results[hidden],
.wh-flt-results [hidden] {
	display: none !important;
}

/* ------------------------------------------------------------------ *
 * 2. Filter bar: one row above 700px.
 * ------------------------------------------------------------------ */
.wh-flt-bar,
.woocommerce-page .page-content .wh-flt-bar {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin: 0 0 20px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #464646;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.4;
	text-align: left;
}

.wh-flt-bar .wh-flt-field,
.woocommerce-page .page-content .wh-flt-bar .wh-flt-field {
	position: relative;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.wh-flt-bar .wh-flt-field--select,
.woocommerce-page .page-content .wh-flt-bar .wh-flt-field--select {
	flex: 1 1 0;
	min-width: 0;
}

.wh-flt-bar .wh-flt-field--price,
.woocommerce-page .page-content .wh-flt-bar .wh-flt-field--price {
	flex: 0 0 190px;
	min-width: 0;
}

/* Above the breakpoint the bar is one row (spec item 1) as long as the labels stay readable.
   A control never goes below 140px: the Sofás profile (7 selects + price) cannot fit 1100px of
   content without cutting "Chaise Longue" to a letter, so it wraps to a second row instead of
   squeezing. Profiles with 4-5 filters — every other page — still render as a single row. */
@media (min-width: 701px) {

	.wh-flt-bar,
	.woocommerce-page .page-content .wh-flt-bar {
		flex-wrap: wrap;
		row-gap: 8px;
	}

	/* Equal, content-independent widths: flex-basis 0 (not auto) means the row is shared out
	   evenly instead of each control growing to its widest option. Long option labels are
	   ellipsised; below 140px the row wraps instead of squeezing. */
	.wh-flt-bar .wh-flt-field--select,
	.woocommerce-page .page-content .wh-flt-bar .wh-flt-field--select {
		flex: 1 1 0;
		min-width: 140px;
	}

	/* A switch is as wide as its own label, never a column share. */
	.wh-flt-bar .wh-flt-field--toggle,
	.woocommerce-page .page-content .wh-flt-bar .wh-flt-field--toggle {
		flex: 0 0 auto;
		min-width: 0;
	}
}

/* Selects: native control, custom caret, ellipsis. */
.wh-flt-bar select.wh-flt-select,
.woocommerce-page .page-content .wh-flt-bar select.wh-flt-select {
	display: block;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	height: auto;
	margin: 0;
	padding: 8px 26px 8px 10px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: 1px solid #e8e8e8;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23464646' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 8px center;
	background-size: 10px 6px;
	box-shadow: none;
	color: #464646;
	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.4;
	text-transform: none;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	cursor: pointer;
}

.wh-flt-bar select.wh-flt-select::-ms-expand {
	display: none;
}

.wh-flt-bar select.wh-flt-select:hover,
.woocommerce-page .page-content .wh-flt-bar select.wh-flt-select:hover {
	border-color: #c8c8c8;
}

.wh-flt-bar .wh-flt-field.is-selected select.wh-flt-select,
.woocommerce-page .page-content .wh-flt-bar .wh-flt-field.is-selected select.wh-flt-select {
	border-color: #464646;
}

.wh-flt-bar select.wh-flt-select:disabled,
.woocommerce-page .page-content .wh-flt-bar select.wh-flt-select:disabled {
	background-color: #fafafa;
	opacity: 0.55;
	cursor: default;
}

/* ------------------------------------------------------------------ *
 * 3. Price: two overlapping range inputs. Inputs and tracks ignore the
 *    pointer; only the thumbs take it, so both stay draggable.
 * ------------------------------------------------------------------ */
.wh-flt-bar .wh-flt-range,
.woocommerce-page .page-content .wh-flt-bar .wh-flt-range {
	--wh-thumb: 18px;
	--wh-lo: 0%;
	--wh-hi: 100%;
	position: relative;
	height: var(--wh-thumb);
	margin: 0;
	padding: 0;
}

/* Track + fill, inset by half a thumb so 0–100% matches the thumb centres. */
.wh-flt-bar .wh-flt-range::before {
	content: "";
	position: absolute;
	top: 50%;
	left: calc(var(--wh-thumb) / 2);
	right: calc(var(--wh-thumb) / 2);
	height: 4px;
	margin-top: -2px;
	border-radius: 2px;
	background-color: #e8e8e8;
	background-image: linear-gradient(to right, transparent var(--wh-lo), #464646 var(--wh-lo), #464646 var(--wh-hi), transparent var(--wh-hi));
	pointer-events: none;
}

.wh-flt-bar .wh-flt-range input[type="range"],
.woocommerce-page .page-content .wh-flt-bar .wh-flt-range input[type="range"] {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	box-sizing: border-box;
	width: 100%;
	height: var(--wh-thumb);
	margin: 0;
	padding: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	outline: 0;
	pointer-events: none;
}

.wh-flt-bar .wh-flt-range .wh-flt-range__max {
	z-index: 2;
}

.wh-flt-bar .wh-flt-range.is-lo-top .wh-flt-range__min {
	z-index: 3;
}

/* WebKit / Blink */
.wh-flt-bar .wh-flt-range input[type="range"]::-webkit-slider-runnable-track {
	height: var(--wh-thumb);
	border: 0;
	background: transparent;
	box-shadow: none;
	pointer-events: none;
}

.wh-flt-bar .wh-flt-range input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	width: var(--wh-thumb);
	height: var(--wh-thumb);
	margin: 0;
	border: 2px solid #464646;
	border-radius: 50%;
	background: #fff;
	box-shadow: none;
	cursor: pointer;
	pointer-events: auto;
}

/* Firefox */
.wh-flt-bar .wh-flt-range input[type="range"]::-moz-range-track {
	height: var(--wh-thumb);
	border: 0;
	background: transparent;
	box-shadow: none;
	pointer-events: none;
}

.wh-flt-bar .wh-flt-range input[type="range"]::-moz-range-progress {
	background: transparent;
}

.wh-flt-bar .wh-flt-range input[type="range"]::-moz-range-thumb {
	box-sizing: border-box;
	width: var(--wh-thumb);
	height: var(--wh-thumb);
	border: 2px solid #464646;
	border-radius: 50%;
	background: #fff;
	box-shadow: none;
	cursor: pointer;
	pointer-events: auto;
}

.wh-flt-bar .wh-flt-range input[type="range"]:disabled::-webkit-slider-thumb {
	border-color: #c8c8c8;
	cursor: default;
}

.wh-flt-bar .wh-flt-range input[type="range"]:disabled::-moz-range-thumb {
	border-color: #c8c8c8;
	cursor: default;
}

.wh-flt-bar .wh-flt-field--price.is-disabled {
	opacity: 0.55;
}

.wh-flt-bar .wh-flt-range__text,
.woocommerce-page .page-content .wh-flt-bar .wh-flt-range__text {
	margin: 2px 0 0;
	color: #464646;
	font-size: 13px;
	line-height: 1.3;
	text-align: center;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* Touch: ≥ 44px hit area around a 22px visible thumb (transparent border). */
@media (pointer: coarse) {
	.wh-flt-bar .wh-flt-range,
	.woocommerce-page .page-content .wh-flt-bar .wh-flt-range {
		--wh-thumb: 44px;
	}

	.wh-flt-bar .wh-flt-range input[type="range"]::-webkit-slider-thumb {
		border: 11px solid transparent;
		background: #fff padding-box;
		box-shadow: inset 0 0 0 2px #464646;
	}

	.wh-flt-bar .wh-flt-range input[type="range"]::-moz-range-thumb {
		border: 11px solid transparent;
		background: #fff padding-box;
		box-shadow: inset 0 0 0 2px #464646;
	}

	.wh-flt-bar .wh-flt-range input[type="range"]:disabled::-webkit-slider-thumb {
		border-color: transparent;
		box-shadow: inset 0 0 0 2px #c8c8c8;
	}

	.wh-flt-bar .wh-flt-range input[type="range"]:disabled::-moz-range-thumb {
		border-color: transparent;
		box-shadow: inset 0 0 0 2px #c8c8c8;
	}
}

/* ------------------------------------------------------------------ *
 * 4. Reset buttons (bar + results) and spinner.
 * ------------------------------------------------------------------ */
.wh-flt-bar button.wh-flt-reset,
.wh-flt-head button.wh-flt-reset,
.wh-flt-results button.wh-flt-reset,
.woocommerce-page .page-content .wh-flt-bar button.wh-flt-reset,
.woocommerce-page .page-content .wh-flt-head button.wh-flt-reset,
.woocommerce-page .page-content .wh-flt-results button.wh-flt-reset {
	flex: 0 0 auto;
	margin: 0;
	padding: 6px 2px;
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: #464646;
	font-family: inherit;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.3;
	text-decoration: underline;
	text-underline-offset: 2px;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
}

.wh-flt-bar button.wh-flt-reset:hover,
.wh-flt-head button.wh-flt-reset:hover,
.wh-flt-results button.wh-flt-reset:hover,
.woocommerce-page .page-content .wh-flt-bar button.wh-flt-reset:hover,
.woocommerce-page .page-content .wh-flt-head button.wh-flt-reset:hover,
.woocommerce-page .page-content .wh-flt-results button.wh-flt-reset:hover {
	background: none;
	color: #000;
}

/* "Thinking": a clear spinner centred over the filters (a white disc with a turning ring),
   while the controls fade a little. Out of the flow, so the row never shifts. */
.wh-flt-bar .wh-flt-spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 6;
	box-sizing: border-box;
	width: 48px;
	height: 48px;
	margin: -24px 0 0 -24px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .18);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .15s linear, visibility 0s linear .15s;
}

.wh-flt-bar .wh-flt-spinner::after {
	content: "";
	position: absolute;
	top: 11px;
	left: 11px;
	box-sizing: border-box;
	width: 26px;
	height: 26px;
	border: 3px solid #e8e8e8;
	border-top-color: #030303;
	border-radius: 50%;
}

.wh-flt-bar.is-busy .wh-flt-spinner,
html.wh-flt-pending .wh-flt-bar .wh-flt-spinner {
	opacity: 1;
	visibility: visible;
	transition: opacity .15s linear, visibility 0s;
}

.wh-flt-bar.is-busy .wh-flt-spinner::after,
html.wh-flt-pending .wh-flt-bar .wh-flt-spinner::after {
	animation: wh-flt-spin 0.7s linear infinite;
}

.wh-flt-bar.is-busy > .wh-flt-field {
	opacity: .55;
	transition: opacity .15s linear;
}

@keyframes wh-flt-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ------------------------------------------------------------------ *
 * 5. Focus (the theme sets outline:0 on fields).
 * ------------------------------------------------------------------ */
.wh-flt-bar :focus-visible,
.wh-flt-results :focus-visible {
	outline: 2px solid #464646;
	outline-offset: 2px;
}

.wh-flt-bar .wh-flt-range input[type="range"]:focus-visible {
	outline: 0;
}

.wh-flt-bar .wh-flt-range input[type="range"]:focus-visible::-webkit-slider-thumb {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #464646;
}

.wh-flt-bar .wh-flt-range input[type="range"]:focus-visible::-moz-range-thumb {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #464646;
}

@media (pointer: coarse) {
	.wh-flt-bar .wh-flt-range input[type="range"]:focus-visible::-webkit-slider-thumb {
		box-shadow: inset 0 0 0 4px #464646;
	}

	.wh-flt-bar .wh-flt-range input[type="range"]:focus-visible::-moz-range-thumb {
		box-shadow: inset 0 0 0 4px #464646;
	}
}

/* Browsers without :focus-visible (Safari < 15.4): plain :focus. */
@supports not selector(:focus-visible) {
	.wh-flt-bar select.wh-flt-select:focus,
	.wh-flt-bar button:focus,
	.wh-flt-results button:focus,
	.wh-flt-results a:focus {
		outline: 2px solid #464646;
		outline-offset: 2px;
	}
}

/* ------------------------------------------------------------------ *
 * 6. Results container (inserted after the ordering form).
 * ------------------------------------------------------------------ */
.wh-flt-results {
	position: relative;
	clear: both;
}

.wh-flt-results.is-loading {
	min-height: 160px;
}

.wh-flt-results p.wh-flt-count,
.woocommerce .wh-flt-results p.wh-flt-count,
.woocommerce-page .page-content .wh-flt-results p.wh-flt-count {
	float: none;
	padding-right: 28px;
}

/* 0 results: the live region keeps the message, visually replaced by .wh-flt-empty
   (our own line, or WooCommerce's count line that the JS writes into). */
.wh-flt-results p.wh-flt-count.wh-flt-count--sr,
.woocommerce .wh-flt-results p.wh-flt-count.wh-flt-count--sr,
#main > p.woocommerce-result-count.wh-flt-count--sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px !important;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.wh-flt-results[aria-busy="true"] .wh-flt-list,
.wh-flt-results[aria-busy="true"] .wh-flt-empty {
	opacity: 0.45;
	transition: opacity 0.15s linear;
}

/* Results spinner at the top right, next to the count line: no layout shift. */
.wh-flt-results[aria-busy="true"]::before {
	content: "";
	position: absolute;
	top: 2px;
	right: 0;
	z-index: 2;
	box-sizing: border-box;
	width: 18px;
	height: 18px;
	border: 2px solid #e8e8e8;
	border-top-color: #464646;
	border-radius: 50%;
	animation: wh-flt-spin 0.7s linear infinite;
}

.wh-flt-results .wh-flt-empty {
	clear: both;
}

.wh-flt-results .wh-flt-actions {
	clear: both;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin: 8px 0 40px;
	text-align: center;
}

.wh-flt-results button.wh-flt-more,
.woocommerce .wh-flt-results button.button.wh-flt-more,
.woocommerce-page .page-content .wh-flt-results button.button.wh-flt-more {
	display: inline-block;
	min-width: 180px;
	margin: 0;
	padding: 12px 32px;
	border: 1px solid #464646;
	-webkit-border-radius: 16px;
	border-radius: 16px;
	background: #fff;
	box-shadow: none;
	color: #464646;
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.5px;
	line-height: 1.2;
	text-transform: uppercase;
	cursor: pointer;
}

.wh-flt-results button.wh-flt-more:hover,
.woocommerce .wh-flt-results button.button.wh-flt-more:hover,
.woocommerce-page .page-content .wh-flt-results button.button.wh-flt-more:hover {
	background: #464646;
	color: #fff;
}

/* ------------------------------------------------------------------ *
 * 7. ≤ 700px: one column inside a rounded box; 16px selects (no iOS zoom).
 * ------------------------------------------------------------------ */
@media (max-width: 700px) {
	.wh-flt-bar,
	.woocommerce-page .page-content .wh-flt-bar {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		width: 100%;
		padding: 16px;
		border: 1px solid #e8e8e8;
		border-radius: 12px;
		background: #fff;
	}

	.wh-flt-bar .wh-flt-field--select,
	.wh-flt-bar .wh-flt-field--price,
	.woocommerce-page .page-content .wh-flt-bar .wh-flt-field--select,
	.woocommerce-page .page-content .wh-flt-bar .wh-flt-field--price {
		flex: 0 0 auto;
		width: 100%;
	}

	.wh-flt-bar select.wh-flt-select,
	.woocommerce-page .page-content .wh-flt-bar select.wh-flt-select {
		padding: 10px 32px 10px 12px;
		background-position: right 12px center;
		font-size: 16px;
	}

	.wh-flt-bar .wh-flt-field--price,
	.woocommerce-page .page-content .wh-flt-bar .wh-flt-field--price {
		padding: 2px 0 0;
	}

	.wh-flt-bar .wh-flt-range__text,
	.woocommerce-page .page-content .wh-flt-bar .wh-flt-range__text {
		font-size: 14px;
	}

	.wh-flt-bar button.wh-flt-reset,
	.woocommerce-page .page-content .wh-flt-bar button.wh-flt-reset {
		align-self: flex-start;
	}

}

/* ------------------------------------------------------------------ *
 * 8. Reduced motion: static spinners, no fades.
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.wh-flt-bar.is-busy .wh-flt-spinner::after,
	html.wh-flt-pending .wh-flt-bar .wh-flt-spinner::after,
	.wh-flt-results[aria-busy="true"]::before {
		animation: none;
	}

	.wh-flt-bar .wh-flt-spinner,
	.wh-flt-bar.is-busy > .wh-flt-field {
		transition: none;
	}

	.wh-flt-results[aria-busy="true"] .wh-flt-list,
	.wh-flt-results[aria-busy="true"] .wh-flt-empty {
		transition: none;
	}
}

/* ------------------------------------------------------------------ *
 * Mobile panel (toggle + apply) and sticky states.
 * Desktop: the toggle/apply buttons do not exist visually, the bar is
 * always open. Sticky is CSS; JS only adds .is-stuck once the bar has
 * actually been scrolled past, and only the stuck state is decorated.
 * ------------------------------------------------------------------ */

/* Mobile-only chrome: the trigger, the sheet header and the apply CTA exist in the markup at
   every width, so they must be hidden by default — above the breakpoint the sheet header would
   otherwise sit in the filter row next to the first dropdown. */
.wh-flt-toggle,
.wh-flt-apply,
.wh-flt-sheet-head {
	display: none;
}

.wh-flt-sentinel {
	display: block;
	width: 100%;
	height: 0;
}

.wh-flt-spacer {
	display: block;
	width: 100%;
}

@-webkit-keyframes whFltSlideIn {
	from { -webkit-transform: translateY(-100%); transform: translateY(-100%); }
	to { -webkit-transform: none; transform: none; }
}

@keyframes whFltSlideIn {
	from { transform: translateY(-100%); }
	to { transform: none; }
}

/* Desktop sticky (opt-in: config 'sticky' => ['desktop' => true]). */
@media (min-width: 701px) {

	/* The bar lives inside div.term-description, a short box, so position:sticky would have
	   nowhere to travel: pin it once the sentinel above it has been scrolled past. A spacer
	   (JS) holds the layout height, and the slide-in keeps it from appearing abruptly. */
	.wh-flt-bar.wh-flt--sticky-d.is-stuck,
	.woocommerce-page .page-content .wh-flt-bar.wh-flt--sticky-d.is-stuck {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 30;
		width: 100%;
		max-width: 100%;
		margin: 0;
		padding: 10px max(16px, calc((100vw - 1160px) / 2));
		background: #fff;
		box-shadow: 0 2px 10px rgba(0, 0, 0, .10);
		-webkit-animation: whFltSlideIn .22s ease;
		animation: whFltSlideIn .22s ease;
	}
}

@media (max-width: 700px) {

	/* Collapsed by default: the bar only exists when .is-open. */
	.wh-flt-bar,
	.woocommerce-page .page-content .wh-flt-bar {
		display: none;
	}

	.wh-flt-bar.is-open,
	.woocommerce-page .page-content .wh-flt-bar.is-open {
		display: flex;
	}

	.wh-flt-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		box-sizing: border-box;
		width: 100%;
		margin: 0 0 12px;
		padding: 12px 16px;
		border: 1px solid #e8e8e8;
		-webkit-border-radius: 10px;
		border-radius: 10px;
		background: #fff;
		color: #464646;
		font-family: inherit;
		font-size: 15px;
		font-weight: 600;
		line-height: 1.2;
		text-align: center;
		cursor: pointer;
	}

	.wh-flt-toggle::before {
		content: "";
		width: 16px;
		height: 16px;
		background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23464646' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M1 3.5h14M3.5 8h9M6 12.5h4'/%3E%3C/svg%3E") no-repeat center / contain;
	}

	.wh-flt-toggle__label {
		display: inline-block;
	}

	.wh-flt-toggle__count {
		min-width: 20px;
		padding: 1px 6px;
		-webkit-border-radius: 10px;
		border-radius: 10px;
		background: #ca0734;
		color: #fff;
		font-size: 12px;
		font-weight: 700;
	}

	.wh-flt-toggle__count[hidden] {
		display: none;
	}

	.wh-flt-toggle.is-open {
		border-color: #464646;
	}

	/* Mobile sticky (opt-in: config 'sticky' => ['mobile' => true]). */
	/* The trigger is part of the page behind the sheet: let the scrim cover it. */
	html.wh-flt-sheet-open .wh-flt-toggle.wh-flt--sticky-m.is-stuck {
		z-index: 1;
	}

	.wh-flt-toggle.wh-flt--sticky-m.is-stuck {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 31;
		width: 100%;
		margin: 0;
		border-radius: 0;
		box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
		-webkit-animation: whFltSlideIn .22s ease;
		animation: whFltSlideIn .22s ease;
	}

	/* Open panel under a pinned toggle: scrollable, never taller than the viewport. */
	/* Panel mode only: in drawer mode the sheet has its own fixed position and sits above the
	   scrim (z 9991). Without :not() this rule wins on specificity and drops the sheet to z 30,
	   i.e. behind the scrim — the sheet then looks greyed out. */
	.wh-flt-toggle.wh-flt--sticky-m.is-stuck + .wh-flt-bar.is-open:not(.wh-flt--drawer),
	.woocommerce-page .page-content .wh-flt-toggle.wh-flt--sticky-m.is-stuck + .wh-flt-bar.is-open:not(.wh-flt--drawer) {
		position: fixed;
		top: 46px;
		left: 0;
		right: 0;
		z-index: 30;
		max-height: calc(100vh - 56px);
		margin: 0;
		border-radius: 0 0 12px 12px;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* "Ver N resultados": products update behind the open panel. */
	.wh-flt-bar .wh-flt-apply,
	.woocommerce-page .page-content .wh-flt-bar .wh-flt-apply {
		display: block;
		order: 99;
		box-sizing: border-box;
		width: 100%;
		margin: 4px 0 0;
		padding: 13px 16px;
		border: 0;
		-webkit-border-radius: 16px;
		border-radius: 16px;
		background: #c1dad4;
		color: #030303;
		font-family: inherit;
		font-size: 13px;
		font-weight: 700;
		letter-spacing: 1px;
		line-height: 1.2;
		text-align: center;
		text-transform: uppercase;
		cursor: pointer;
	}

	.wh-flt-bar .wh-flt-apply[disabled],
	.woocommerce-page .page-content .wh-flt-bar .wh-flt-apply[disabled] {
		opacity: .55;
		cursor: default;
	}
}

@media (prefers-reduced-motion: reduce) {

	.wh-flt-toggle,
	.wh-flt-bar {
		transition: none !important;
		-webkit-animation: none !important;
		animation: none !important;
	}
}

/* ------------------------------------------------------------------ *
 * Mobile UI "drawer": the panel becomes an app-style bottom sheet.
 * Pattern (scrim + slide-up + fixed-body scroll lock) follows the one
 * proven on the football listing pages; see the JS setSheet().
 * Desktop is untouched — every rule lives in the mobile media query.
 * ------------------------------------------------------------------ */

.wh-flt-scrim {
	display: none;
}

@media (max-width: 700px) {

	.wh-flt-scrim {
		display: block;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 9990;
		background: rgba(20, 20, 20, .5);
		opacity: 0;
		visibility: hidden;
		transition: opacity .2s, visibility .2s;
	}

	.wh-flt-scrim.is-open {
		opacity: 1;
		visibility: visible;
	}

	/* The sheet itself. Closed: parked below the fold and non-interactive. */
	.wh-flt-bar.wh-flt--drawer,
	.woocommerce-page .page-content .wh-flt-bar.wh-flt--drawer {
		display: flex;
		position: fixed;
		top: auto;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 9991;
		flex-direction: column;
		gap: 10px;
		width: 100%;
		max-width: 100%;
		max-height: 86vh;
		max-height: 86dvh;
		margin: 0;
		padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px));
		border: 0;
		border-radius: 16px 16px 0 0;
		background: #fff;
		box-shadow: 0 -8px 26px rgba(0, 0, 0, .24);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		-webkit-transform: translateY(101%);
		transform: translateY(101%);
		visibility: hidden;
		transition: -webkit-transform .26s cubic-bezier(.2, .7, .3, 1), transform .26s cubic-bezier(.2, .7, .3, 1), visibility .26s;
	}

	/* Open. visibility switches in 0s on the way IN so focus() can land on the close
	   button in the same tick; the base rule keeps .26s for the way OUT. */
	.wh-flt-bar.wh-flt--drawer.is-open,
	.woocommerce-page .page-content .wh-flt-bar.wh-flt--drawer.is-open {
		-webkit-transform: none;
		transform: none;
		visibility: visible;
		transition: -webkit-transform .26s cubic-bezier(.2, .7, .3, 1), transform .26s cubic-bezier(.2, .7, .3, 1), visibility 0s;
	}

	/* Scroll lock: body out of flow at top:-scrollY (set by JS). NOT overflow:hidden —
	   with html as the scroller that collapses the position and jumps the page to the top. */
	html.wh-flt-sheet-open,
	html.wh-flt-sheet-open body {
		position: fixed;
		left: 0;
		right: 0;
		width: 100%;
	}

	.wh-flt-bar.wh-flt--drawer .wh-flt-sheet-head {
		display: flex;
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		z-index: 1;
		align-items: center;
		justify-content: space-between;
		margin: 0 -16px 2px;
		padding: 14px 16px 10px;
		border-bottom: 1px solid #e8e8e8;
		background: #fff;
	}

	.wh-flt-bar.wh-flt--drawer .wh-flt-sheet-title {
		font-size: 15px;
		font-weight: 700;
		letter-spacing: .5px;
		text-transform: uppercase;
	}

	/* Close: a 44px tap target drawn as an × with two rotated bars. */
	.wh-flt-bar.wh-flt--drawer .wh-flt-close {
		position: relative;
		width: 44px;
		height: 44px;
		margin: -8px -10px -8px 0;
		padding: 0;
		border: 0;
		background: none;
		cursor: pointer;
	}

	.wh-flt-bar.wh-flt--drawer .wh-flt-close::before,
	.wh-flt-bar.wh-flt--drawer .wh-flt-close::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 18px;
		height: 2px;
		margin: -1px 0 0 -9px;
		background: #464646;
	}

	.wh-flt-bar.wh-flt--drawer .wh-flt-close::before {
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	.wh-flt-bar.wh-flt--drawer .wh-flt-close::after {
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

	/* The apply button is the sheet's footer CTA: always reachable while the fields scroll. */
	.wh-flt-bar.wh-flt--drawer .wh-flt-apply,
	.woocommerce-page .page-content .wh-flt-bar.wh-flt--drawer .wh-flt-apply {
		position: -webkit-sticky;
		position: sticky;
		bottom: 0;
		z-index: 1;
		/* Same rounded pill as panel mode, inside the sheet's padding. */
		width: 100%;
		max-width: 100%;
		margin: 6px 0 0;
		padding: 15px 16px;
		border: 0;
		-webkit-border-radius: 16px;
		border-radius: 16px;
		/* White shelf around the pinned pill so the fields scrolling underneath do not show
		   through the side gaps. Drawn with spread shadows, which paint OUTSIDE the button: a
		   ::before with z-index:-1 would paint above the button's own background and hide it. */
		/* Shelf on three sides only — left, right and below — so the fields scrolling past are
		   masked in the 16px gutters without anything painting ABOVE the button: a ring or an
		   upward offset covers whatever sits directly above it, which since Sostenible was
		   pinned last is the eco switch (it looked veiled, then clipped). */
		box-shadow: -16px 0 0 0 #fff, 16px 0 0 0 #fff, 0 16px 0 0 #fff, 0 16px 0 16px #fff;
	}

	/* The trigger keeps the page's own flow; only the sheet is fixed. 12px above it so it does
	   not stick to whatever ends the description (often an image). */
	.wh-flt-toggle.wh-flt--drawer {
		width: 100%;
		margin-top: 12px;
	}
}

@media (max-width: 700px) and (prefers-reduced-motion: reduce) {

	.wh-flt-bar.wh-flt--drawer,
	.wh-flt-scrim {
		transition: none !important;
	}
}

/* ------------------------------------------------------------------ *
 * Desktop heading ("FILTROS:") and the rules around the bar — the copy
 * that used to be typed into every term description by hand. Hidden on
 * mobile, where the trigger button is the heading.
 * ------------------------------------------------------------------ */

/* Heading line = heading + "Borrar filtros". The reset lives here, not in the bar, so the
   dropdowns keep their equal flex widths. */
.wh-flt-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 2px 16px;
	margin: 25px 0 0;
}

.wh-flt-heading {
	margin: 25px 0 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 2;
}

.wh-flt-head .wh-flt-heading {
	margin: 0;
}

/* Same type size as the heading it sits next to, and no padding that would unbalance it.
   Baselines are aligned; the heading's line-height: 2 leaves the leading that keeps this
   button's underline clear of the hairline below. */
.wh-flt-head button.wh-flt-reset--head,
.woocommerce-page .page-content .wh-flt-head button.wh-flt-reset--head {
	padding: 0;
	font-size: 13px;
	line-height: 1.4;
}

/* 2px of air on the left: the theme's .main-container clips (overflow: hidden) exactly at the
   heading's left edge, which shaved the rim of the magnifying glass. */
.wh-flt-heading i {
	margin-right: 4px;
	margin-left: 2px;
}

.wh-flt-rule {
	margin: -1px 0 20px;
	border: 0;
	border-top: 1px solid #e8e8e8;
}

.wh-flt-rule--top {
	margin-top: -1px;
}

.wh-flt-rule--end {
	margin: -1px 0 15px;
}

/* ------------------------------------------------------------------ *
 * Boolean facets as a switch. The input stays a real checkbox (focus,
 * tab order, form state); the sibling span paints track and knob, and
 * the state change is pure CSS via input:checked + .track.
 * ------------------------------------------------------------------ */

.wh-flt-switch {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	padding: 0;
	color: #464646;
	font-size: 14px;
	line-height: 1.4;
	white-space: nowrap;
	cursor: pointer;
}

.wh-flt-switch__label {
	display: inline-block;
}

.wh-flt-switch input.wh-flt-check {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	pointer-events: none;
}

.wh-flt-switch__track {
	position: relative;
	flex: none;
	width: 34px;
	height: 20px;
	border-radius: 20px;
	background: #e0e0e0;
	transition: background .15s;
}

.wh-flt-switch__track::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
	transition: -webkit-transform .15s;
	transition: transform .15s;
}

.wh-flt-switch input:checked + .wh-flt-switch__track {
	background: #c1dad4;
	box-shadow: inset 0 0 0 1px #a9c9c1;
}

.wh-flt-switch input:checked + .wh-flt-switch__track::after {
	-webkit-transform: translateX(14px);
	transform: translateX(14px);
}

.wh-flt-switch input:focus-visible + .wh-flt-switch__track {
	outline: 2px solid #464646;
	outline-offset: 2px;
}

.wh-flt-switch input:disabled + .wh-flt-switch__track {
	opacity: .5;
}

.wh-flt-field--toggle.is-disabled .wh-flt-switch {
	color: #9a9a9a;
	cursor: default;
}

.wh-flt-switch__count {
	color: #767676;
}

@media (max-width: 700px) {

	/* The trigger replaces the heading on phones — and with it the heading-line reset; the
	   in-form copy is the one that shows inside the panel/drawer. */
	.wh-flt-head,
	.wh-flt-heading,
	.wh-flt-rule {
		display: none;
	}

	/* Let the price control breathe between the dropdowns and the CTA. */
	.wh-flt-bar .wh-flt-field--price,
	.woocommerce-page .page-content .wh-flt-bar .wh-flt-field--price {
		margin-top: 10px;
		margin-bottom: 14px;
	}

	/* A switch row is half the height of a select, so the same 10px row-gap reads as cramped
	   next to them; the padding gives each toggle its own air (and a taller touch target). */
	.wh-flt-bar .wh-flt-field--toggle,
	.woocommerce-page .page-content .wh-flt-bar .wh-flt-field--toggle {
		padding: 7px 0;
	}
}

/* ------------------------------------------------------------------ *
 * Price slider alignment (desktop) + the "eco" accent for Sostenible.
 * ------------------------------------------------------------------ */

@media (min-width: 701px) {

	/* One reset per breakpoint: the heading-line button above the bar (see .wh-flt-head). */
	.wh-flt-bar button.wh-flt-reset,
	.woocommerce-page .page-content .wh-flt-bar button.wh-flt-reset {
		display: none;
	}

	/* The value text used to sit inside the field's height, which pushed the slider 9px above
	   the dropdowns' centre line. Taking it out of flow lets the slider occupy a select-sized
	   band and line up exactly; the row gap below leaves room for the text when the bar wraps. */
	.wh-flt-bar,
	.woocommerce-page .page-content .wh-flt-bar {
		row-gap: 28px;
	}

	.wh-flt-bar .wh-flt-field--price,
	.woocommerce-page .page-content .wh-flt-bar .wh-flt-field--price {
		position: relative;
		display: flex;
		align-items: center;
		min-height: 38px;
	}

	.wh-flt-bar .wh-flt-field--price .wh-flt-range,
	.woocommerce-page .page-content .wh-flt-bar .wh-flt-field--price .wh-flt-range {
		width: 100%;
	}

	.wh-flt-bar .wh-flt-range__text,
	.woocommerce-page .page-content .wh-flt-bar .wh-flt-range__text {
		position: absolute;
		/* Anchored to the slider, not to the field: the field is select-height (38px) with the
		   18px slider centred in it, so `top: 100%` left a 12px gap under the bar. 50% is the
		   slider's centre line, + half a thumb (9px) its bottom edge, + 1px of air. */
		top: calc(50% + 10px);
		left: 0;
		right: 0;
		margin: 0;
		text-align: center;
	}
}

/* Sostenible: the one "nice to have" filter, so it gets an eco green and its icon. ONE green
   for the word, the icon and the switched-on track: #2f7d62 reads at 5:1 on white (a lighter
   green such as #49b080 is 2.7:1, too faint for text). */
.wh-flt-switch--eco .wh-flt-switch__label {
	color: #2f7d62;
	font-weight: 600;
}

.wh-flt-switch--eco .wh-flt-switch__label i {
	margin-right: 5px;
	color: #2f7d62;
}

.wh-flt-switch--eco input:checked + .wh-flt-switch__track {
	background: #2f7d62;
	box-shadow: inset 0 0 0 1px #2f7d62;
}

@media (max-width: 700px) {

	/* In the column the eco switch closes the list: a hairline separates it from the price. */
	.wh-flt-bar .wh-flt-field--eco,
	.woocommerce-page .page-content .wh-flt-bar .wh-flt-field--eco {
		margin-top: 2px;
		padding-top: 12px;
		border-top: 1px solid #e8e8e8;
	}
}

/* ------------------------------------------------------------------ *
 * Empty state: the only place a recovery control earns its keep —
 * adjust the selection (primary) or start over (quiet).
 * ------------------------------------------------------------------ */

.wh-flt-empty-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 16px;
	margin: 14px 0 4px;
}

.wh-flt-empty-actions .wh-flt-change {
	box-sizing: border-box;
	margin: 0;
	padding: 13px 22px;
	border: 0;
	-webkit-border-radius: 16px;
	border-radius: 16px;
	background: #c1dad4;
	color: #030303;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 1.2;
	text-transform: uppercase;
	cursor: pointer;
}

.wh-flt-empty-actions .wh-flt-change:hover {
	background: #b2d0c9;
}

.wh-flt-empty-actions .wh-flt-reset--empty {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: #464646;
	font-family: inherit;
	font-size: 13px;
	line-height: 1.2;
	text-decoration: underline;
	cursor: pointer;
}

.wh-flt-empty-actions .wh-flt-reset--empty:hover {
	color: #030303;
}

@media (max-width: 700px) {

	.wh-flt-empty-actions {
		flex-direction: column;
		gap: 12px;
	}

	.wh-flt-empty-actions .wh-flt-change {
		width: 100%;
	}
}

/* ------------------------------------------------------------------ *
 * Sort control. It carries WooCommerce's `woocommerce-ordering` class,
 * so the theme floats and styles it exactly like the form it replaces;
 * only what is ours lives here.
 * ------------------------------------------------------------------ */

.wh-flt-sort .wh-flt-sort__select {
	cursor: pointer;
}

/* Belt and braces: if a theme or plugin prints WooCommerce's ordering form
   again, never show two sort dropdowns. */
#main:has(> .wh-flt-sort) > form.woocommerce-ordering {
	display: none !important;
}