/**
 * WooFilter Pro — filter panel.
 *
 * Written against Elementor global typography variables where they exist, with
 * concrete fallbacks so the panel is styled on any site. Colours come from
 * local custom properties so a theme can restyle the panel by overriding four
 * values rather than fighting selectors.
 */

.woofilter-panel {
	--woofilter-accent: var( --e-global-color-accent, #c00 );
	--woofilter-text: var( --e-global-color-text, inherit );
	/* 5.0:1 on white. The counts are 12–13px, so they are body text as far as
	   contrast is concerned; the lighter grey this replaced sat at 3.0:1. */
	--woofilter-muted: #6f6f6f;
	--woofilter-border: #e0e0e0;
	--woofilter-radius: 3px;

	font-size: .9rem;
	position: relative;
}

/* ── Active filter chips ─────────────────────────────────────────── */
.woofilter-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4rem;
	margin-bottom: 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var( --woofilter-border );
}
.woofilter-chips.is-empty {
	display: none;
}
.woofilter-chip {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .25rem .55rem;
	font-size: .78rem;
	line-height: 1.3;
	text-decoration: none;
	color: inherit;
	background: #f1f1f1;
	border-radius: var( --woofilter-radius );
	transition: background .15s ease, color .15s ease;
}
.woofilter-chip:hover,
.woofilter-chip:focus-visible {
	background: #2b2b2b;
	color: #fff;
}
.woofilter-chip__remove {
	font-size: 1rem;
	line-height: 1;
}
.woofilter-chips__clear {
	margin-left: auto;
	font-size: .78rem;
	color: var( --woofilter-accent );
	text-decoration: none;
}
.woofilter-chips__clear:hover {
	text-decoration: underline;
}

/* ── Group ───────────────────────────────────────────────────────── */
.woofilter-group {
	margin-bottom: 1.5rem;
}
.woofilter-group__title {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-family: var( --e-global-typography-secondary-font-family, inherit );
	font-size: var( --e-global-typography-secondary-font-size, .95rem );
	font-weight: var( --e-global-typography-secondary-font-weight, 600 );
	font-style: var( --e-global-typography-secondary-font-style, normal );
	text-decoration: var( --e-global-typography-secondary-text-decoration, none );
	line-height: var( --e-global-typography-secondary-line-height, 1.3 );
	word-spacing: var( --e-global-typography-secondary-word-spacing, normal );
	margin: 0 0 .6rem;
	padding-bottom: .4rem;
	border-bottom: 1px solid var( --woofilter-border );
}
.woofilter-group--collapsible .woofilter-group__title {
	cursor: pointer;
	user-select: none;
}
.woofilter-group__label {
	flex: 1 1 auto;
}
.woofilter-group__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.15rem;
	height: 1.15rem;
	padding: 0 .3rem;
	font-size: .7rem;
	font-weight: 600;
	color: #fff;
	background: var( --woofilter-accent );
	border-radius: 999px;
}
/* ── Chevron ─────────────────────────────────────────────────────────
   One gesture for every disclosure in the panel: two hairline arms hinged at
   the centre. Opening swings them through flat into the mirrored chevron, so
   the control performs the change instead of a glyph spinning in place. The
   arms are drawn rather than set in a font because a rotated border box gives
   a fixed 90°, and this reads better a little wider open. */
.woofilter-group__chevron,
.woofilter-cat__arrow {
	--woofilter-arm: .42rem;
	--woofilter-arm-angle: 32deg;
}
.woofilter-group__chevron {
	position: relative;
	flex: 0 0 auto;
	width: .9rem;
	height: .9rem;
}
.woofilter-group__chevron::before,
.woofilter-group__chevron::after,
.woofilter-cat__arrow::before,
.woofilter-cat__arrow::after {
	content: "";
	position: absolute;
	top: 50%;
	width: var( --woofilter-arm );
	height: 1.5px;
	margin-top: -.75px;
	background: currentColor;
	border-radius: 2px;
	transition: transform .38s cubic-bezier( .16, 1, .3, 1 );
}
/* Each arm pivots on the joint, so the two meet at every frame of the swing. */
.woofilter-group__chevron::before,
.woofilter-cat__arrow::before {
	right: 50%;
	transform-origin: right center;
	transform: rotate( var( --woofilter-arm-angle ) );
}
.woofilter-group__chevron::after,
.woofilter-cat__arrow::after {
	left: 50%;
	transform-origin: left center;
	transform: rotate( calc( var( --woofilter-arm-angle ) * -1 ) );
}
.woofilter-group--collapsible.is-open .woofilter-group__chevron::before,
.woofilter-cat.is-open > .woofilter-cat__arrow::before {
	transform: rotate( calc( var( --woofilter-arm-angle ) * -1 ) );
}
.woofilter-group--collapsible.is-open .woofilter-group__chevron::after,
.woofilter-cat.is-open > .woofilter-cat__arrow::after {
	transform: rotate( var( --woofilter-arm-angle ) );
}

/* ── Disclosure ──────────────────────────────────────────────────────
   A collapsing grid row animates from content height to nothing without any
   measurement, so the panel never has to know how tall a branch is before it
   opens. The inner wrapper is what gets clipped; the row is what moves.

   Scoped to the disclosures that actually move: a group that never collapses
   gains nothing from being clipped, and clipping it would crop the focus ring
   on whatever sits at its edge. */
.woofilter-group--collapsible > .woofilter-group__body,
.woofilter-cat__children {
	display: grid;
	grid-template-rows: 1fr;
	transition: grid-template-rows .38s cubic-bezier( .16, 1, .3, 1 );
}
.woofilter-group--collapsible > .woofilter-group__body > .woofilter-group__inner,
.woofilter-cat__stack {
	overflow: hidden;
	transition: opacity .28s ease .06s, visibility 0s;
}

/* Groups are open by default so the panel works before JavaScript runs. */
.woofilter-group--collapsible:not( .is-open ) > .woofilter-group__body,
.woofilter-cat--parent:not( .is-open ) > .woofilter-cat__children {
	grid-template-rows: 0fr;
}
/* Hidden only once it has finished closing — otherwise the contents vanish on
   the first frame and the row appears to collapse around nothing. Going the
   other way it must be visible immediately, hence the 0s on the way in. */
.woofilter-group--collapsible:not( .is-open ) > .woofilter-group__body > .woofilter-group__inner,
.woofilter-cat--parent:not( .is-open ) > .woofilter-cat__children > .woofilter-cat__stack {
	opacity: 0;
	visibility: hidden;
	transition: opacity .18s ease, visibility 0s linear .38s;
}

.woofilter-group__reset {
	display: inline-block;
	margin-bottom: .5rem;
	font-size: .75rem;
	color: var( --woofilter-muted );
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}
.woofilter-group__reset:hover {
	color: var( --woofilter-accent );
}

/* ── Options ─────────────────────────────────────────────────────── */
.woofilter-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 22rem;
	overflow-y: auto;
}
.woofilter-option {
	margin-bottom: .35rem;
}
.woofilter-option__label {
	font-family: var( --e-global-typography-965b690-font-family, inherit );
	font-size: var( --e-global-typography-965b690-font-size, inherit );
	font-weight: var( --e-global-typography-965b690-font-weight, 400 );
	text-transform: var( --e-global-typography-965b690-text-transform, none );
	font-style: var( --e-global-typography-965b690-font-style, normal );
	text-decoration: var( --e-global-typography-965b690-text-decoration, none );
	line-height: var( --e-global-typography-965b690-line-height, 1.4 );
	letter-spacing: var( --e-global-typography-965b690-letter-spacing, normal );
	display: flex;
	align-items: center;
	gap: .45rem;
	cursor: pointer;
}
.woofilter-option__input {
	flex-shrink: 0;
	width: 15px;
	height: 15px;
	cursor: pointer;
	accent-color: var( --woofilter-accent );
}
.woofilter-option__name {
	color: inherit;
	text-decoration: none;
}
.woofilter-option__label:hover .woofilter-option__name {
	text-decoration: underline;
}
.woofilter-option.is-active .woofilter-option__name {
	font-weight: 600;
}
.woofilter-option.is-disabled {
	opacity: .4;
	pointer-events: none;
}
.woofilter-count {
	color: var( --woofilter-muted );
	font-size: .8rem;
	margin-left: auto;
	margin-right: 5px;

	/* Counts change under the shopper as filters narrow. Fixed-width digits
	   keep the number from jittering sideways when 8 becomes 12. */
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}

/* ── Swatches ────────────────────────────────────────────────────── */
.woofilter-group--color .woofilter-checklist,
.woofilter-group--image .woofilter-checklist {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	max-height: none;
}
.woofilter-group--color .woofilter-option,
.woofilter-group--image .woofilter-option {
	margin-bottom: 0;
}
.woofilter-group--color .woofilter-option__input,
.woofilter-group--image .woofilter-option__input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.woofilter-group--color .woofilter-option__name,
.woofilter-group--image .woofilter-option__name,
.woofilter-group--color .woofilter-count,
.woofilter-group--image .woofilter-count {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
}
.woofilter-swatch {
	display: block;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-size: cover;
	background-position: 50%;
	box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, .12 );
	transition: box-shadow .15s ease;
}
.woofilter-option:hover .woofilter-swatch,
.woofilter-option__input:focus-visible + .woofilter-swatch {
	box-shadow: 0 0 0 1px var( --woofilter-muted ), inset 0 0 0 3px #fff;
}
.woofilter-option.is-active .woofilter-swatch {
	box-shadow: 0 0 0 2px var( --woofilter-accent ), inset 0 0 0 3px #fff;
}

/* The term name lives in the label's title attribute, so the browser renders
   it as a tooltip and screen readers still announce it. */
.woofilter-group--color .woofilter-option__label,
.woofilter-group--image .woofilter-option__label {
	gap: 0;
}

/* ── Categories ──────────────────────────────────────────────────────
   Two columns: the label takes the space it needs, the disclosure keeps its
   own. The toggle used to be absolutely positioned over the row's right edge,
   which is exactly where a three-digit count lands — a collision that only
   showed up on the categories that had both. Giving each a column means the
   two can no longer occupy the same place, whatever the count grows to. */
.woofilter-cat {
	--woofilter-row: 1.85rem;

	display: grid;
	grid-template-columns: minmax( 0, 1fr ) auto;
}
.woofilter-cat__link {
	grid-area: 1 / 1;
	display: flex;
	align-items: center;
	gap: .35rem;
	min-width: 0;
	min-height: var( --woofilter-row );
	color: inherit;
	text-decoration: none;
}
.woofilter-cat__link:hover .woofilter-cat__name {
	text-decoration: underline;
}
/* The category we are already browsing renders as a span, not a link: there is
   nowhere for it to go. It must not look clickable either. */
.woofilter-cat__link--current {
	cursor: default;
}
.woofilter-cat__link--current:hover .woofilter-cat__name {
	text-decoration: none;
}
.woofilter-cat.is-active > .woofilter-cat__link .woofilter-cat__name {
	font-weight: 600;
	color: var( --woofilter-accent );
}
/* The name takes only what it needs so the count sits against it rather than
   floating off at the panel's edge — the label and its number read as one
   thing, and nothing is left stretching toward the toggle. */
.woofilter-cat__name {
	flex: 0 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}
.woofilter-cat__link .woofilter-count {
	flex: 0 0 auto;
	margin-left: 0;
}

.woofilter-cat__arrow {
	grid-area: 1 / 2;
	position: relative;
	width: 1.75rem;
	height: var( --woofilter-row );
	padding: 0;
	color: inherit;
	background: none;
	border: 0;
	border-radius: var( --woofilter-radius );
	cursor: pointer;
	opacity: .55;
	transition: opacity .2s ease;
}
.woofilter-cat:hover > .woofilter-cat__arrow,
.woofilter-cat__arrow:hover,
.woofilter-cat__arrow:focus-visible {
	opacity: 1;
}
.woofilter-cat.is-open > .woofilter-cat__arrow {
	opacity: 1;
}
.woofilter-cat__arrow:focus-visible {
	outline: 2px solid var( --woofilter-accent );
	outline-offset: -2px;
}

.woofilter-cat__children {
	grid-area: 2 / 1 / auto / -1;
}
.woofilter-cat__stack {
	padding-left: .95rem;
}
/* The tree's outermost stack is not a nesting level — indenting it would push
   every top-level category off the heading it belongs to. Only real children
   step in. */
.woofilter-cats > .woofilter-group__inner > .woofilter-cat__children > .woofilter-cat__stack {
	padding-left: 0;
}

/* ── Price range ─────────────────────────────────────────────────── */
.woofilter-range {
	position: relative;
	padding-top: .5rem;
}
.woofilter-range__track {
	position: relative;
	height: 2px;
	margin: 0 8px .75rem;
	background: #e8e8e8;
}
.woofilter-range__fill {
	position: absolute;
	top: 0;
	bottom: 0;
	background: var( --woofilter-accent );
}

/* Both sliders sit on the same line; only the thumbs stay interactive so the
   lower one does not swallow clicks meant for the upper. */
.woofilter-range__input {
	position: absolute;
	top: .5rem;
	left: 0;
	width: 100%;
	height: 2px;
	margin: 0;
	padding: 0;
	background: none;
	appearance: none;
	-webkit-appearance: none;
	pointer-events: none;
}
.woofilter-range__input:focus-visible {
	outline: none;
}
.woofilter-range__input::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var( --woofilter-accent );
	cursor: grab;
	pointer-events: auto;
}
.woofilter-range__input::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var( --woofilter-accent );
	cursor: grab;
	pointer-events: auto;
}
.woofilter-range__input:focus-visible::-webkit-slider-thumb {
	box-shadow: 0 0 0 3px rgba( 0, 0, 0, .15 );
}
.woofilter-range__output {
	margin: 0 0 .5rem;
	font-size: .82rem;
}
.woofilter-range__numbers {
	display: flex;
	align-items: center;
	gap: .4rem;
}
.woofilter-range__number {
	width: 100%;
	min-width: 0;
	padding: .3rem .4rem;
	font-size: .8rem;
	border: 1px solid var( --woofilter-border );
	border-radius: var( --woofilter-radius );
}
.woofilter-range__dash {
	color: var( --woofilter-muted );
}

/* ── Loading ─────────────────────────────────────────────────────── */
.woofilter-panel.is-busy {
	opacity: .6;
	pointer-events: none;
	transition: opacity .15s ease;
}
.woofilter-is-loading {
	position: relative;
}
.woofilter-is-loading::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba( 255, 255, 255, .6 );
	backdrop-filter: blur( 1px );
	z-index: 5;
}

/* The disclosures still open and close; they just stop travelling to do it.
   visibility keeps its delay so the contents do not blink out mid-collapse. */
@media ( prefers-reduced-motion: reduce ) {
	.woofilter-group__body,
	.woofilter-cat__children,
	.woofilter-group__chevron::before,
	.woofilter-group__chevron::after,
	.woofilter-cat__arrow,
	.woofilter-cat__arrow::before,
	.woofilter-cat__arrow::after,
	.woofilter-swatch,
	.woofilter-chip {
		transition: none;
	}

	.woofilter-group__inner,
	.woofilter-cat__stack {
		transition: none;
	}

	.woofilter-group--collapsible:not( .is-open ) > .woofilter-group__body > .woofilter-group__inner,
	.woofilter-cat--parent:not( .is-open ) > .woofilter-cat__children > .woofilter-cat__stack {
		transition: none;
	}
}

/* WordPress ships this class, but a theme may not. */
.woofilter-panel .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
	border: 0;
}