/**
 * SWPL Product Filters -- classic face styles.
 *
 * Theme-inheriting by design: colors, fonts, and radii come from CSS custom
 * properties with neutral fallbacks, so the sidebar blends into whatever
 * theme (Oxygen today, anything tomorrow) hosts it. Override the
 * --swpl-pf-* properties in the theme to restyle without touching plugin CSS.
 */

.swpl-pf {
	--swpl-pf-gap: 1rem;
	--swpl-pf-line: var( --swpl-pf-border, rgba( 0, 0, 0, 0.12 ) );
	--swpl-pf-accent: var( --swpl-pf-accent-color, currentColor );
	display: flex;
	gap: calc( var( --swpl-pf-gap ) * 2 );
	align-items: flex-start;
	flex-wrap: wrap;
}

.swpl-pf--busy {
	opacity: 0.55;
	pointer-events: none;
	transition: opacity 120ms ease;
}

@media ( prefers-reduced-motion: reduce ) {
	.swpl-pf--busy {
		transition: none;
	}
}

/* Sidebar */
.swpl-pf__sidebar {
	flex: 0 0 260px;
	max-width: 100%;
}

.swpl-pf__group {
	border: 0;
	border-top: 1px solid var( --swpl-pf-line );
	margin: 0;
	padding: var( --swpl-pf-gap ) 0;
	min-inline-size: auto;
}

.swpl-pf__group-title {
	font-weight: 600;
	padding: 0;
	margin: 0 0 0.5rem;
}

.swpl-pf__options {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 16rem;
	overflow-y: auto;
}

.swpl-pf__option {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.2rem 0;
	cursor: pointer;
}

.swpl-pf__option input {
	accent-color: var( --swpl-pf-accent );
	margin: 0;
}

.swpl-pf__option-name {
	flex: 1 1 auto;
}

.swpl-pf__option-count {
	opacity: 0.55;
	font-size: 0.85em;
	font-variant-numeric: tabular-nums;
}

/* Price */
.swpl-pf__price {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.swpl-pf__price input {
	width: 6.5rem;
	max-width: 40%;
	padding: 0.35rem 0.5rem;
	border: 1px solid var( --swpl-pf-line );
	border-radius: var( --swpl-pf-radius, 3px );
	font: inherit;
}

/* Chips */
.swpl-pf__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0 0 var( --swpl-pf-gap );
}

.swpl-pf__chip,
.swpl-pf__clear {
	font: inherit;
	font-size: 0.85em;
	padding: 0.2rem 0.6rem;
	border: 1px solid var( --swpl-pf-line );
	border-radius: 999px;
	background: transparent;
	cursor: pointer;
}

.swpl-pf__clear {
	border-style: dashed;
}

.swpl-pf__chip:focus-visible,
.swpl-pf__clear:focus-visible,
.swpl-pf__apply:focus-visible,
.swpl-pf__option input:focus-visible {
	outline: 2px solid var( --swpl-pf-accent );
	outline-offset: 1px;
}

/* Apply (hidden when JS is running -- filtering is live) */
.swpl-pf__apply {
	font: inherit;
	padding: 0.5rem 1.2rem;
	border: 1px solid var( --swpl-pf-line );
	border-radius: var( --swpl-pf-radius, 3px );
	background: transparent;
	cursor: pointer;
	margin-top: var( --swpl-pf-gap );
}

.swpl-pf--busy .swpl-pf__apply {
	visibility: hidden;
}

/* Results grid */
.swpl-pf__results {
	flex: 1 1 320px;
}

.swpl-pf__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 180px, 1fr ) );
	gap: calc( var( --swpl-pf-gap ) * 1.5 );
}

.swpl-pf__card a {
	display: block;
	text-decoration: none;
	color: inherit;
}

.swpl-pf__card img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var( --swpl-pf-radius, 3px );
}

.swpl-pf__card-title {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.95em;
	line-height: 1.35;
}

.swpl-pf__card-price {
	display: block;
	margin-top: 0.25rem;
	font-weight: 600;
}

.swpl-pf__empty {
	padding: var( --swpl-pf-gap );
	border: 1px dashed var( --swpl-pf-line );
}

/* Narrow screens: sidebar stacks above results */
@media ( max-width: 720px ) {
	.swpl-pf__sidebar {
		flex-basis: 100%;
	}
}


/* Collapsible groups (native details/summary) */
.swpl-pf__group > .swpl-pf__group-title {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.swpl-pf__group > .swpl-pf__group-title::-webkit-details-marker {
	display: none;
}

.swpl-pf__group > .swpl-pf__group-title::after {
	content: '+';
	font-weight: 400;
	opacity: 0.55;
	margin-left: 0.5rem;
}

.swpl-pf__group[open] > .swpl-pf__group-title::after {
	content: '\2212';
}

/* Price slider: two native ranges stacked on one track */
.swpl-pf__slider {
	margin: 0.25rem 0 0.75rem;
}

.swpl-pf__slider-labels {
	display: flex;
	justify-content: space-between;
	font-size: 0.9em;
	margin-bottom: 0.4rem;
	font-variant-numeric: tabular-nums;
}

.swpl-pf__slider-track {
	position: relative;
	height: 1.6rem;
}

/* Single-handle mode: arrow steppers flank the rail */
.swpl-pf__slider-row {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.swpl-pf__slider-row .swpl-pf__slider-track {
	flex: 1 1 auto;
}

.swpl-pf__step {
	font: inherit;
	font-size: 1.05em;
	line-height: 1;
	padding: 0.15rem 0.55rem;
	border: 1px solid var( --swpl-pf-line );
	border-radius: 999px;
	background: transparent;
	cursor: pointer;
	flex: 0 0 auto;
}

.swpl-pf__step:focus-visible {
	outline: 2px solid var( --swpl-pf-accent );
	outline-offset: 1px;
}

.swpl-pf__slider-labels--max {
	justify-content: space-between;
}

.swpl-pf__slider-track input[type='range'] {
	position: absolute;
	inset: 0;
	width: 100%;
	margin: 0;
	background: transparent;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}

.swpl-pf__slider-track input[type='range']::-webkit-slider-runnable-track {
	height: 3px;
	background: var( --swpl-pf-line );
	border-radius: 2px;
}

.swpl-pf__slider-track input[type='range']::-moz-range-track {
	height: 3px;
	background: var( --swpl-pf-line );
	border-radius: 2px;
}

.swpl-pf__slider-track input[type='range']::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	pointer-events: auto;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var( --swpl-pf-thumb, #8f6f33 );
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px var( --swpl-pf-line );
	margin-top: -7px;
	cursor: grab;
}

.swpl-pf__slider-track input[type='range']::-moz-range-thumb {
	pointer-events: auto;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var( --swpl-pf-thumb, #8f6f33 );
	border: 2px solid #fff;
	cursor: grab;
}

/* When JS runs with auto-apply, the Apply button is noise; when the slider
   runs, the number inputs are the fallback and tuck away. */
.swpl-pf--js[data-auto-apply='1'] .swpl-pf__apply {
	display: none;
}

.swpl-pf--js .swpl-pf__slider ~ .swpl-pf__price {
	display: none;
}

.swpl-pf__actions {
	display: flex;
	gap: 0.6rem;
	margin-top: var( --swpl-pf-gap );
}

/* Categories drill-down group */
.swpl-pf__cat-link {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex: 1 1 auto;
	text-decoration: none;
	color: inherit;
}

.swpl-pf__cat-link:hover .swpl-pf__option-name {
	text-decoration: underline;
}

.swpl-pf__option--cat {
	display: block;
}

.swpl-pf__options--sub {
	margin-left: 1rem;
	max-height: none;
}

.swpl-pf__options--cats {
	max-height: none;
}

/* Coverage checker (shop managers only; gated server-side) */
.swpl-pf__coverage {
	flex-basis: 100%;
	border: 1px dashed var( --swpl-pf-line );
	border-left: 3px solid #8f6f33;
	border-radius: var( --swpl-pf-radius, 3px );
	padding: 0.6rem 0.9rem;
	font-size: 0.88em;
	line-height: 1.5;
}

.swpl-pf__coverage-title {
	margin: 0 0 0.3rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.82em;
	opacity: 0.7;
}

.swpl-pf__coverage-line {
	margin: 0 0 0.25rem;
}

.swpl-pf__coverage-list {
	margin: 0 0 0.25rem 1.2rem;
	padding: 0;
}

.swpl-pf__coverage-hint {
	opacity: 0.65;
	font-style: italic;
}

/* Mobile drawer: below the breakpoint the sidebar is an off-canvas panel
   driven by the Filters button; desktop never sees any of this. */
.swpl-pf__drawer-toggle,
.swpl-pf__drawer-close,
.swpl-pf__drawer-backdrop {
	display: none;
}

@media ( max-width: 782px ) {
	.swpl-pf__drawer-toggle {
		display: inline-flex;
		align-items: center;
		gap: 0.45rem;
		font: inherit;
		padding: 0.5rem 1.1rem;
		border: 1px solid var( --swpl-pf-line );
		border-radius: 999px;
		background: var( --swpl-pf-panel-bg, #fff );
		cursor: pointer;
		margin-bottom: 0.75rem;
	}

	.swpl-pf__drawer-count {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 1.35rem;
		height: 1.35rem;
		padding: 0 0.3rem;
		border-radius: 999px;
		background: var( --swpl-pf-thumb, #8f6f33 );
		color: #fff;
		font-size: 0.78em;
		font-variant-numeric: tabular-nums;
	}

	.swpl-pf__sidebar {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 100000;
		width: min( 320px, 85vw );
		background: var( --swpl-pf-panel-bg, #fff );
		box-shadow: 4px 0 24px rgba( 0, 0, 0, 0.18 );
		padding: 1rem 1.1rem 2rem;
		overflow-y: auto;
		transform: translateX( -105% );
		transition: transform 220ms ease;
	}

	.swpl-pf--drawer-open .swpl-pf__sidebar {
		transform: translateX( 0 );
	}

	.swpl-pf__drawer-close {
		display: block;
		margin-left: auto;
		font: inherit;
		font-size: 1.5rem;
		line-height: 1;
		border: 0;
		background: transparent;
		cursor: pointer;
		padding: 0.2rem 0.4rem;
	}

	.swpl-pf__drawer-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 99999;
		background: rgba( 0, 0, 0, 0.45 );
	}

	.swpl-pf__drawer-backdrop[hidden] {
		display: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.swpl-pf__sidebar {
		transition: none;
	}
}