/*
 * Filtry produktów (.product-filters z inc/filters.php) – Figma: "Sklep – Archiwum kategorii".
 * Układ "bar": pasek z listami rozwijanymi (sklep, wyszukiwarka). Układ "panel": szuflada filtrów na mobile.
 */

.product-filters {
	color: var(--color-muted);
	font-family: var(--font-body);
}

.pf-fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.pf-group { position: relative; }

.pf-group__heading {
	display: block;
	margin-bottom: 0.5625rem;
	padding: 0;
	color: var(--color-muted);
	font: 400 1rem / 1.2 var(--font-body);
}

/* Opcje: pola wyboru i próbki */
.pf-options {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.pf-option {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--color-muted);
	font: 300 0.8125rem / 1.25 var(--font-body);
	cursor: pointer;
	transition: color var(--dur-fast) ease, opacity var(--dur) ease;
}

.pf-option:hover,
.pf-option__input:checked ~ .pf-option__name { color: var(--color-text-strong); }

.pf-option__input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.pf-option__box {
	position: relative;
	flex: none;
	width: 12px;
	height: 12px;
	border: 1px solid var(--color-muted);
	transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.pf-option__input:checked + .pf-option__box {
	border-color: var(--color-text-strong);
	background: var(--color-text-strong);
}

.pf-option__input:checked + .pf-option__box::after {
	content: "";
	position: absolute;
	top: 1px;
	left: 3.5px;
	width: 3px;
	height: 6px;
	border: solid var(--color-background);
	border-width: 0 1.5px 1.5px 0;
	transform: rotate(45deg);
}

.pf-option__swatch {
	flex: none;
	width: 14px;
	height: 14px;
	border: 1px solid var(--color-border);
	border-radius: 50%;
	background: var(--swatch, transparent);
}

.pf-option__input:checked + .pf-option__swatch { box-shadow: 0 0 0 1px var(--color-background), 0 0 0 2px var(--color-text-strong); }

.pf-option__input:focus-visible + :is(.pf-option__box, .pf-option__swatch) {
	outline: 2px solid var(--color-text-strong);
	outline-offset: 2px;
}

.pf-option__count {
	font-size: 0.85em;
	opacity: 0.7;
}

.pf-option__count::before { content: "("; }
.pf-option__count::after { content: ")"; }

.pf-option.is-empty {
	opacity: 0.35;
	pointer-events: none;
}

/* Lista rozwijana (186 × 43 w Figmie) */
.pf-dropdown__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	width: 11.625rem;
	height: 2.6875rem;
	padding: 0 0.625rem 0 0.75rem;
	border: 1px solid var(--color-muted);
	background: var(--color-background);
	color: var(--color-muted);
	font: 300 0.8125rem / 1 var(--font-body);
	text-align: left;
	cursor: pointer;
	transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

.pf-dropdown__value {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pf-dropdown__toggle .icon {
	width: 16px;
	height: 16px;
	transition: transform var(--dur) var(--ease-out);
}

.pf-dropdown__toggle:hover,
.pf-group.has-active .pf-dropdown__toggle,
.pf-group.is-open .pf-dropdown__toggle {
	border-color: var(--color-text-strong);
	color: var(--color-text-strong);
}

.pf-group.is-open .pf-dropdown__toggle .icon { transform: rotate(180deg); }

.pf-dropdown__toggle:focus-visible {
	outline: 2px solid var(--color-text-strong);
	outline-offset: 2px;
}

.pf-dropdown__panel {
	position: absolute;
	z-index: 20;
	top: 100%;
	left: 0;
	min-width: 100%;
	max-height: 18rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 0.75rem;
	border: 1px solid var(--color-text-strong);
	border-top: 0;
	background: var(--color-background);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-0.25rem);
	transition: opacity var(--dur-fast) ease, transform var(--dur-fast) var(--ease-in-out), visibility 0s var(--dur-fast);
}

.pf-group.is-open .pf-dropdown__panel {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity var(--dur) ease, transform var(--dur) var(--ease-out), visibility 0s;
}

.pf-dropdown__panel .pf-options { gap: 0.5rem; }
.pf-dropdown__panel .pf-option { white-space: nowrap; }

/* Suwak ceny */
.pf-range {
	position: relative;
	width: 11.25rem;
	padding-top: 0.25rem;
}

.pf-range__track {
	position: relative;
	height: 3px;
	margin: 0.25rem 5px 0.75rem;
	background: var(--color-border);
}

.pf-range__fill {
	position: absolute;
	top: 0;
	bottom: 0;
	background: var(--color-text-strong);
}

.pf-range__input {
	position: absolute;
	top: calc(0.25rem - 3.5px);
	left: 0;
	width: 100%;
	height: 10px;
	margin: 0;
	background: none;
	pointer-events: none;
	appearance: none;
}

.pf-range__input::-webkit-slider-runnable-track { background: none; }
.pf-range__input::-moz-range-track { background: none; }

.pf-range__input::-webkit-slider-thumb {
	width: 10px;
	height: 10px;
	border: 0;
	border-radius: 50%;
	background: var(--color-text-strong);
	cursor: grab;
	pointer-events: auto;
	appearance: none;
}

.pf-range__input::-moz-range-thumb {
	width: 10px;
	height: 10px;
	border: 0;
	border-radius: 50%;
	background: var(--color-text-strong);
	cursor: grab;
	pointer-events: auto;
}

.pf-range__input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-text-strong); }
.pf-range__input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-text-strong); }

.pf-range__values {
	display: block;
	color: var(--color-muted);
	font: 300 0.8125rem / 1.2 var(--font-body);
	text-align: center;
}

/* Układ: pasek */
.product-filters--bar .product-filters__body {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 1.5rem;
}

/* Układ: panel (szuflada) – wszystko rozwinięte, wygodne cele dotyku */
.product-filters--panel .product-filters__header {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 0.5rem;
}

.product-filters__reset {
	padding: 0.25rem 0;
	border: 0;
	background: none;
	color: var(--color-muted);
	font: 400 var(--fs-sm) / 1.5 var(--font-body);
	text-decoration: underline;
	text-underline-offset: 0.25em;
	cursor: pointer;
}

.product-filters--panel .pf-group {
	padding-block: 1.25rem;
	border-bottom: 1px solid var(--color-border);
}

.product-filters--panel .pf-group__heading {
	margin-bottom: 0.75rem;
	color: var(--color-text-strong);
	font-weight: 500;
}

.product-filters--panel .pf-options { gap: 0.25rem; }

.product-filters--panel .pf-option {
	min-height: 2rem;
	font-size: 0.875rem;
}

.product-filters--panel .pf-group--swatch .pf-options,
.product-filters--panel .pf-group--checkbox .pf-options {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 1rem;
}

.product-filters--panel .pf-range { width: 100%; }

/* Chipy aktywnych filtrów */
.pf-active-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.pf-active-filters[hidden] { display: none; }

.pf-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.125rem 0.5rem;
	border: 1px solid var(--color-border);
	background: none;
	color: var(--color-muted);
	font: 300 0.8125rem / 1.2 var(--font-body);
	cursor: pointer;
	transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

.pf-chip:hover {
	border-color: var(--color-text-strong);
	color: var(--color-text-strong);
}

.pf-chip__remove { font-size: 1rem; line-height: 1; }

.pf-chips-clear {
	padding: 0.125rem 0.25rem;
	border: 0;
	background: none;
	color: var(--color-text);
	font: 400 0.8125rem / 1.2 var(--font-body);
	text-decoration: underline;
	text-underline-offset: 0.25em;
	cursor: pointer;
}