/**
 * Filter: trigger button, slide-in drawer, and sidebar panel.
 *
 * The palette is built from the shop's own badge green (#8ba93d). A darker step
 * is used wherever white text or a white tick sits on top, because the badge
 * green itself is too light for that to be readable.
 *
 * Selectors are more specific than they look like they need to be: Divi styles
 * lists as `.entry-content ul` and buttons as `.woocommerce button`, both of
 * which outrank a lone class, so a plain reset loses and the theme wins.
 */

.wcd-filter {
	/* Brand */
	--wcd-green: #8ba93d;
	--wcd-green-strong: #5f7728;
	--wcd-green-ink: #46591d;
	--wcd-green-soft: #f2f6e6;

	/* Neutrals, biased very slightly green so they sit with the accent */
	--wcd-ink: #1e2419;
	--wcd-ink-2: #5c6455;
	--wcd-ink-3: #8b9184;
	--wcd-surface: #fff;
	--wcd-line: #e2e5dd;
	--wcd-line-soft: #eef0ea;

	--wcd-radius: 8px;
	--wcd-shadow: -8px 0 40px rgba( 30, 36, 25, 0.16 );

	display: block;
	clear: both;
	font-family: inherit;
	color: var( --wcd-ink );
}

/* ========================================================================
   Trigger row: the button, plus the filters already applied
   ===================================================================== */

.wcd-filter .wcd-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.65em 0.75em;
	margin: 0 0 1.5em;
}

/* Which side the button sits on. Right suits a row that already carries a
   heading on the left. */
.wcd-filter .wcd-bar--left {
	justify-content: flex-start;
}

.wcd-filter .wcd-bar--center {
	justify-content: center;
}

.wcd-filter .wcd-bar--right {
	justify-content: flex-end;
}

/* The chips can grow long; right-aligned they fill from the button leftwards
   rather than pushing it off the row. */
.wcd-filter .wcd-bar--right ul.wcd-chips {
	justify-content: flex-end;
}

.wcd-filter button.wcd-trigger {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	margin: 0;
	padding: 0.7em 1.15em;
	border: 1px solid var( --wcd-line );
	border-radius: 999px;
	background: var( --wcd-surface );
	color: var( --wcd-ink );
	font: inherit;
	font-size: 0.92em;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.01em;
	text-transform: none;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wcd-filter button.wcd-trigger:hover,
.wcd-filter button.wcd-trigger:focus-visible {
	border-color: var( --wcd-green );
	box-shadow: 0 0 0 3px var( --wcd-green-soft );
}

.wcd-filter .wcd-trigger__icon {
	flex: 0 0 auto;
	color: var( --wcd-ink-2 );
}

.wcd-filter .wcd-trigger__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.45em;
	height: 1.45em;
	padding: 0 0.35em;
	border-radius: 999px;
	background: var( --wcd-green-strong );
	color: #fff;
	font-size: 0.78em;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* ========================================================================
   Chips: what is currently applied
   ===================================================================== */

.wcd-filter ul.wcd-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wcd-filter ul.wcd-chips > li {
	margin: 0;
	padding: 0;
	list-style: none;
	background: none;
}

.wcd-filter ul.wcd-chips > li::before,
.wcd-filter ul.wcd-chips > li::marker {
	content: none;
	display: none;
}

.wcd-filter a.wcd-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.38em 0.7em;
	border-radius: 999px;
	background: var( --wcd-green-soft );
	color: var( --wcd-green-ink );
	font-size: 0.8em;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.wcd-filter a.wcd-chip:hover,
.wcd-filter a.wcd-chip:focus-visible {
	background: #e6eed3;
	color: var( --wcd-green-ink );
}

.wcd-filter .wcd-chip__x {
	flex: 0 0 auto;
	width: 11px;
	height: 11px;
	opacity: 0.7;
}

.wcd-filter a.wcd-chip--clear {
	background: transparent;
	color: var( --wcd-ink-2 );
	text-decoration: underline;
	text-underline-offset: 2px;
}

.wcd-filter a.wcd-chip--clear:hover {
	background: transparent;
	color: var( --wcd-ink );
}

/* ========================================================================
   The panel itself
   ===================================================================== */

.wcd-filter .wcd-panel {
	background: var( --wcd-surface );
}

.wcd-filter .wcd-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	padding: 1.15em 1.35em;
	border-bottom: 1px solid var( --wcd-line );
}

.wcd-filter .wcd-panel__title {
	margin: 0;
	padding: 0;
	font-size: 1.02em;
	font-weight: 700;
	letter-spacing: -0.005em;
	color: var( --wcd-ink );
}

.wcd-filter button.wcd-close {
	display: none;
	align-items: center;
	justify-content: center;
	width: 2.1em;
	height: 2.1em;
	margin: 0;
	padding: 0;
	border: 1px solid var( --wcd-line );
	border-radius: 50%;
	background: var( --wcd-surface );
	color: var( --wcd-ink-2 );
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.wcd-filter button.wcd-close:hover,
.wcd-filter button.wcd-close:focus-visible {
	border-color: var( --wcd-ink-3 );
	color: var( --wcd-ink );
}

.wcd-filter .wcd-panel__chips {
	padding: 0.9em 1.35em 0;
}

.wcd-filter .wcd-panel__body {
	padding: 1.35em;
}

.wcd-filter .wcd-panel__foot {
	display: none;
	align-items: center;
	gap: 0.75em;
	padding: 1em 1.35em;
	border-top: 1px solid var( --wcd-line );
	background: var( --wcd-surface );
}

/* ========================================================================
   Groups and options
   ===================================================================== */

.wcd-filter .wcd-group + .wcd-group {
	margin-top: 1.5em;
	padding-top: 1.5em;
	border-top: 1px solid var( --wcd-line-soft );
}

.wcd-filter .wcd-group__title {
	margin: 0 0 0.7em;
	padding: 0;
	font-size: 0.68em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.13em;
	color: var( --wcd-ink-3 );
}

/* Beat the theme's list rules: no bullets, no indent, no bullet image. */
.wcd-filter ul.wcd-list {
	margin: 0;
	padding: 0;
	list-style: none;
	list-style-type: none;
	list-style-image: none;
}

.wcd-filter ul.wcd-list--scroll {
	max-height: 15em;
	overflow-y: auto;
	/* Room for the scrollbar so it never sits on top of the counts. */
	padding-right: 0.4em;
	scrollbar-width: thin;
	scrollbar-color: var( --wcd-line ) transparent;
}

.wcd-filter ul.wcd-list--scroll::-webkit-scrollbar {
	width: 6px;
}

.wcd-filter ul.wcd-list--scroll::-webkit-scrollbar-thumb {
	background: var( --wcd-line );
	border-radius: 3px;
}

.wcd-filter ul.wcd-list > li.wcd-item {
	margin: 0;
	padding: 0;
	list-style: none;
	list-style-type: none;
	background: none;
}

.wcd-filter ul.wcd-list > li.wcd-item::before,
.wcd-filter ul.wcd-list > li.wcd-item::marker {
	content: none;
	display: none;
}

.wcd-filter a.wcd-opt {
	display: flex;
	align-items: center;
	gap: 0.7em;
	padding: 0.46em 0.5em;
	margin: 0 -0.5em;
	border-radius: 5px;
	color: var( --wcd-ink-2 );
	font-size: 0.93em;
	line-height: 1.35;
	text-decoration: none;
	transition: background-color 0.12s ease, color 0.12s ease;
}

.wcd-filter a.wcd-opt:hover,
.wcd-filter a.wcd-opt:focus-visible {
	background: var( --wcd-green-soft );
	color: var( --wcd-ink );
}

.wcd-filter a.wcd-opt:focus-visible {
	outline: 2px solid var( --wcd-green-strong );
	outline-offset: -2px;
}

.wcd-filter .is-on a.wcd-opt {
	color: var( --wcd-ink );
	font-weight: 600;
}

/* The tick is drawn, not imaged, so it stays sharp and takes the palette. */
.wcd-filter .wcd-box {
	position: relative;
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	border: 1.5px solid var( --wcd-line );
	border-radius: 4px;
	background: var( --wcd-surface );
	transition: background-color 0.12s ease, border-color 0.12s ease;
}

.wcd-filter a.wcd-opt:hover .wcd-box {
	border-color: var( --wcd-green );
}

.wcd-filter .is-on .wcd-box {
	background: var( --wcd-green-strong );
	border-color: var( --wcd-green-strong );
}

.wcd-filter .is-on .wcd-box::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 2px;
	width: 4.5px;
	height: 8px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate( 40deg );
}

.wcd-filter .wcd-opt__label {
	flex: 1 1 auto;
	min-width: 0;
}

.wcd-filter .wcd-opt__count {
	flex: 0 0 auto;
	font-size: 0.85em;
	color: var( --wcd-ink-3 );
	font-variant-numeric: tabular-nums;
}

/* ========================================================================
   Price range slider

   Two real `input type="range"` stacked over one track. Two inputs rather than a
   div-and-drag widget because each is focusable and works from the keyboard for
   free — arrow keys, Home, End — which a hand-rolled one would have to reinvent
   and usually doesn't.
   ===================================================================== */

.wcd-filter .wcd-range {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

/* The slider needs script to keep the two handles in step, so it stays hidden
   until the script has confirmed it is running. The number fields below work on
   their own either way. */
.wcd-filter .wcd-range__slider {
	display: none;
}

.wcd-filter.wcd-js .wcd-range__slider {
	display: block;
	position: relative;
	height: 26px;
	margin: 0.15em 0 0.9em;
}

.wcd-filter .wcd-range__track,
.wcd-filter .wcd-range__fill {
	position: absolute;
	top: 50%;
	height: 4px;
	margin-top: -2px;
	border-radius: 2px;
}

.wcd-filter .wcd-range__track {
	left: 0;
	right: 0;
	background: var( --wcd-line );
}

.wcd-filter .wcd-range__fill {
	background: var( --wcd-green );
}

/* Both inputs cover the full track; only their handles take the pointer, so the
   one underneath is still reachable. */
.wcd-filter input.wcd-range__thumb {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 26px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}

.wcd-filter input.wcd-range__thumb:focus {
	outline: none;
}

.wcd-filter input.wcd-range__thumb::-webkit-slider-thumb {
	pointer-events: auto;
	width: 18px;
	height: 18px;
	border: 2px solid var( --wcd-green-strong );
	border-radius: 50%;
	background: var( --wcd-surface );
	box-shadow: 0 1px 3px rgba( 30, 36, 25, 0.25 );
	cursor: grab;
	-webkit-appearance: none;
	appearance: none;
}

.wcd-filter input.wcd-range__thumb::-moz-range-thumb {
	pointer-events: auto;
	width: 18px;
	height: 18px;
	border: 2px solid var( --wcd-green-strong );
	border-radius: 50%;
	background: var( --wcd-surface );
	box-shadow: 0 1px 3px rgba( 30, 36, 25, 0.25 );
	cursor: grab;
}

.wcd-filter input.wcd-range__thumb:focus-visible::-webkit-slider-thumb {
	box-shadow: 0 0 0 4px var( --wcd-green-soft );
}

.wcd-filter input.wcd-range__thumb:focus-visible::-moz-range-thumb {
	box-shadow: 0 0 0 4px var( --wcd-green-soft );
}

.wcd-filter input.wcd-range__thumb::-moz-range-track {
	background: transparent;
	border: 0;
}

/* --- The two number fields ---------------------------------------------- */

.wcd-filter .wcd-range__fields {
	display: flex;
	align-items: center;
	gap: 0.5em;
}

.wcd-filter .wcd-range__field {
	display: flex;
	align-items: center;
	gap: 0.25em;
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	padding: 0.42em 0.6em;
	border: 1px solid var( --wcd-line );
	border-radius: 5px;
	background: var( --wcd-surface );
}

.wcd-filter .wcd-range__field:focus-within {
	border-color: var( --wcd-green );
	box-shadow: 0 0 0 3px var( --wcd-green-soft );
}

.wcd-filter .wcd-range__prefix {
	flex: 0 0 auto;
	font-size: 0.82em;
	color: var( --wcd-ink-3 );
}

.wcd-filter input.wcd-range__field-input,
.wcd-filter .wcd-range__field input[type="number"] {
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var( --wcd-ink );
	font: inherit;
	font-size: 0.9em;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	box-shadow: none;
	-moz-appearance: textfield;
}

.wcd-filter .wcd-range__field input[type="number"]:focus {
	outline: none;
	box-shadow: none;
}

.wcd-filter .wcd-range__field input[type="number"]::-webkit-outer-spin-button,
.wcd-filter .wcd-range__field input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.wcd-filter .wcd-range__dash {
	flex: 0 0 auto;
	color: var( --wcd-ink-3 );
}

/* Only needed without script; Apply covers it otherwise. */
.wcd-filter button.wcd-range__go {
	flex: 0 0 auto;
	padding: 0.5em 0.9em;
	border: 1px solid var( --wcd-green-strong );
	border-radius: 5px;
	background: var( --wcd-green-strong );
	color: #fff;
	font: inherit;
	font-size: 0.85em;
	font-weight: 600;
	cursor: pointer;
}

.wcd-filter.wcd-js button.wcd-range__go {
	display: none;
}

/* ========================================================================
   Buttons
   ===================================================================== */

.wcd-filter .wcd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.8em 1.3em;
	border: 1px solid transparent;
	border-radius: 6px;
	font: inherit;
	font-size: 0.9em;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.wcd-filter button.wcd-btn--primary {
	flex: 1 1 auto;
	background: var( --wcd-green-strong );
	color: #fff;
}

.wcd-filter button.wcd-btn--primary:hover,
.wcd-filter button.wcd-btn--primary:focus-visible {
	background: var( --wcd-green-ink );
	color: #fff;
}

.wcd-filter a.wcd-btn--ghost {
	flex: 0 0 auto;
	border-color: var( --wcd-line );
	background: var( --wcd-surface );
	color: var( --wcd-ink-2 );
}

.wcd-filter a.wcd-btn--ghost:hover,
.wcd-filter a.wcd-btn--ghost:focus-visible {
	border-color: var( --wcd-ink-3 );
	color: var( --wcd-ink );
}

/* ========================================================================
   Sidebar panel mode
   ===================================================================== */

.wcd-filter--panel .wcd-panel {
	border: 1px solid var( --wcd-line );
	border-radius: var( --wcd-radius );
}

.wcd-filter .wcd-scrim {
	display: none;
}

/* ========================================================================
   Drawer mode — only once the script has confirmed it can run
   ===================================================================== */

/* Apply is available in every mode once the script is running, because ticking
   is batched everywhere — a sidebar panel gets the button at its foot. */
.wcd-filter.wcd-js .wcd-panel__foot {
	display: flex;
}

/* Everything below is drawer geometry, and must stay scoped to the modes that
   actually have a drawer. Applied to panel mode it would push a sidebar
   off-canvas with no way to bring it back. */
.wcd-filter--drawer.wcd-js .wcd-scrim,
.wcd-filter--auto.wcd-js .wcd-scrim {
	display: block;
	position: fixed;
	inset: 0;
	z-index: 999998;
	background: rgba( 30, 36, 25, 0.45 );
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}

.wcd-filter--drawer.wcd-js.is-open .wcd-scrim,
.wcd-filter--auto.wcd-js.is-open .wcd-scrim {
	opacity: 1;
	visibility: visible;
}

.wcd-filter--drawer.wcd-js .wcd-panel,
.wcd-filter--auto.wcd-js .wcd-panel {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 999999;
	display: flex;
	flex-direction: column;
	width: 380px;
	max-width: 88vw;
	border: 0;
	border-radius: 0;
	box-shadow: var( --wcd-shadow );
	transform: translateX( 100% );
	visibility: hidden;
	transition: transform 0.28s cubic-bezier( 0.32, 0.72, 0, 1 ), visibility 0.28s;
}

.wcd-filter--drawer.wcd-js.is-open .wcd-panel,
.wcd-filter--auto.wcd-js.is-open .wcd-panel {
	transform: translateX( 0 );
	visibility: visible;
}

.wcd-filter--drawer.wcd-js .wcd-panel__head,
.wcd-filter--auto.wcd-js .wcd-panel__head {
	flex: 0 0 auto;
}

.wcd-filter--drawer.wcd-js .wcd-panel__body,
.wcd-filter--auto.wcd-js .wcd-panel__body {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.wcd-filter--drawer.wcd-js button.wcd-close,
.wcd-filter--auto.wcd-js button.wcd-close {
	display: flex;
}

/* A long list has the whole drawer to scroll in, so it does not need its own. */
.wcd-filter--drawer.wcd-js ul.wcd-list--scroll,
.wcd-filter--auto.wcd-js ul.wcd-list--scroll {
	max-height: none;
	overflow: visible;
	padding-right: 0;
}

/* Auto mode: a sidebar on wide screens, a drawer on narrow ones. */
@media ( min-width: 981px ) {
	.wcd-filter--auto.wcd-js .wcd-bar {
		display: none;
	}

	.wcd-filter--auto.wcd-js .wcd-scrim {
		display: none;
	}

	.wcd-filter--auto.wcd-js .wcd-panel {
		position: static;
		width: auto;
		max-width: none;
		border: 1px solid var( --wcd-line );
		border-radius: var( --wcd-radius );
		box-shadow: none;
		transform: none;
		visibility: visible;
	}

	.wcd-filter--auto.wcd-js button.wcd-close {
		display: none;
	}
}

/* Stops the page behind the drawer scrolling with it. */
html.wcd-locked,
html.wcd-locked body {
	overflow: hidden;
}

/* The drawer is moved to the end of the body so no ancestor's transform can trap
   it in a stacking context. That host must take no space in the layout. */
.wcd-portal {
	margin: 0;
	padding: 0;
}

.wcd-portal .wcd-bar {
	display: none;
}

@media ( max-width: 480px ) {
	.wcd-filter--drawer.wcd-js .wcd-panel,
	.wcd-filter--auto.wcd-js .wcd-panel {
		width: 100%;
		max-width: 100%;
	}
}

/* No `prefers-color-scheme` block on purpose.
 *
 * The shop is a light theme, full stop. Following the visitor's operating system
 * instead would hand a dark drawer to anyone browsing with dark mode on, sitting
 * against light pages — which is exactly what happened before this was removed.
 *
 * If the shop ever gains a dark mode of its own, override the tokens from the
 * theme rather than reinstating a media query:
 *
 *   .wcd-filter { --wcd-surface: #171a15; --wcd-ink: #e8ece2; ... }
 */

@media ( prefers-reduced-motion: reduce ) {
	.wcd-filter .wcd-panel,
	.wcd-filter .wcd-scrim,
	.wcd-filter .wcd-btn,
	.wcd-filter a.wcd-opt,
	.wcd-filter button.wcd-trigger {
		transition: none;
	}
}

/* --- While the next set of results is on its way --------------------------- */

/* The old results stay put and stay readable. Dimming them and covering them
   with a spinner made a wait the shop already had feel like a wait the filter
   had caused; the cursor says enough on its own. */
.wcd-loading {
	cursor: progress;
}

/* The Apply button while the next set of results is being fetched. */
.wcd-apply.is-applying,
[data-wcd-apply].is-applying {
	position: relative;
	opacity: 0.75;
	cursor: progress;
	padding-left: 2.6em;
}

/* A small turning ring, on the button itself rather than over the results —
   the wait belongs to the thing that was pressed. */
.wcd-apply.is-applying::before,
[data-wcd-apply].is-applying::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 1.1em;
	width: 1em;
	height: 1em;
	margin-top: -0.5em;
	border: 2px solid rgba( 255, 255, 255, 0.4 );
	border-top-color: #fff;
	border-radius: 50%;
	animation: wcd-spin 0.7s linear infinite;
}

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

@media ( prefers-reduced-motion: reduce ) {
	.wcd-apply.is-applying::before,
	[data-wcd-apply].is-applying::before {
		animation-duration: 2.5s;
	}
}