/* =========================================================================
   F-TECH FILTRY KATEGORII: panel filtrów, wersja 1.4.0
   Standalone na tokenach ft-core (fallback przy każdym aliasie), zero surowych
   wartości poza fallbackami. Bez JS panel jest zwykłym blokiem w treści strony:
   .ftflt__sheet niesie cały wygląd, .ftflt to tylko pozycjoner włączany dopiero
   klasą ftflt-js na elemencie html, dokładaną w head, i tylko poniżej 1024 px.
   ========================================================================= */

.ftflt [hidden] { display: none !important; }

/* Komunikat nad wynikami wyszukiwania przybliżonego (poprawiona literówka, część słów). */
.hp-archive__notice.ft-note { margin: 0 0 var(--ft-space-5, 1.5rem); }

/* Odświeżanie bez przeładowania (punkt 8): delikatne przygaszenie na czas pobierania,
   żeby na wolnym łączu było widać, że coś się dzieje, bez blokowania interakcji. */
.is-ftflt-loading { opacity: 0.6; transition: opacity var(--ft-dur, 250ms) var(--ft-ease, cubic-bezier(0.4, 0, 0.2, 1)); }
@media (prefers-reduced-motion: reduce) {
	.is-ftflt-loading { transition-duration: 0.01ms !important; }
}

.ftflt {
	display: block;
	width: 100%;
}

.ftflt__sheet {
	background: var(--ft-surface, #ffffff);
	border: 1px solid var(--ft-border, #d6d6c2);
	border-radius: var(--ft-radius-md, 0);
}

.ftflt__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ft-space-3, 0.75rem);
	padding: var(--ft-space-4, 1rem) var(--ft-space-5, 1.5rem);
	border-bottom: 1px solid var(--ft-border, #d6d6c2);
}

.ftflt__title {
	margin: 0;
	font-family: var(--ft-font-display, 'Oswald', 'Arial Narrow', sans-serif);
	font-size: var(--ft-fs-h3, clamp(1.125rem, 1.8vw, 1.25rem));
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--ft-track-caps, 0.06em);
	color: var(--ft-ink, #2e2e2e);
}

/* Astra nadaje każdemu button padding 12px 24px, co przy 44 px szerokości ściskało
   ikonę X do zera, oraz ciemne tło w stanach :focus i :hover (selektor button:focus
   wygrywa z pojedynczą klasą). Stąd jawny padding 0 i podwójna klasa w stanach. */
.ftflt__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--ft-touch, 2.75rem);
	height: var(--ft-touch, 2.75rem);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--ft-radius-sm, 0);
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	color: var(--ft-ink, #2e2e2e);
	cursor: pointer;
	transition: background-color var(--ft-dur-fast, 180ms) var(--ft-ease, cubic-bezier(0.4, 0, 0.2, 1));
}
.ftflt .ftflt__close:focus,
.ftflt .ftflt__close:active {
	border: 0;
	background: transparent;
	box-shadow: none;
	color: var(--ft-ink, #2e2e2e);
}
.ftflt .ftflt__close:hover { background: var(--ft-surface-alt, #f7f7f3); color: var(--ft-ink, #2e2e2e); }
.ftflt__close svg { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; }
.ftflt__close:focus-visible {
	outline: 2px solid var(--ft-focus, var(--ft-accent-hover, #5a5c38));
	outline-offset: var(--ft-space-1, 0.25rem);
}

.ftflt__chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ft-space-2, 0.5rem);
	padding: var(--ft-space-4, 1rem) var(--ft-space-5, 1.5rem);
	border-bottom: 1px solid var(--ft-border, #d6d6c2);
}
.ftflt__clear {
	margin-inline-start: auto;
	white-space: nowrap;
	font-size: var(--ft-fs-xs, 0.875rem);
}

.ftflt__body {
	display: flex;
	flex-direction: column;
	gap: var(--ft-space-6, 2rem);
	padding: var(--ft-space-5, 1.5rem);
}

.ftflt__section { margin: 0; padding: 0; border: 0; min-width: 0; }
.ftflt__section-title {
	margin: 0 0 var(--ft-space-3, 0.75rem);
	padding: 0;
	font-family: var(--ft-font-display, 'Oswald', 'Arial Narrow', sans-serif);
	font-size: var(--ft-fs-sm, 0.9375rem);
	font-weight: 700;
	letter-spacing: var(--ft-track-label, 0.1em);
	text-transform: uppercase;
	color: var(--ft-ink, #2e2e2e);
}

/* Odstęp pod polem mieści obwódkę fokusu (--ft-ring, 3 px), żeby nie dotykała pierwszej marki.
   Selektor z kontekstem panelu, bo motyw styluje input[type="search"] z tą samą
   specyficznością co sama klasa i o wyniku decydowałaby kolejność arkuszy. */
.ftflt .ftflt__search.ft-input { display: block; margin: 0 0 var(--ft-space-4, 1rem); }
.ftflt .ftflt__code.ft-input { display: block; margin: 0; }
.ftflt label.ftflt__section-title { display: block; }
.ftflt .ftflt__search.ft-input:focus,
.ftflt .ftflt__search.ft-input:focus-visible,
.ftflt .ftflt__code.ft-input:focus,
.ftflt .ftflt__code.ft-input:focus-visible {
	border: 1px solid var(--ft-accent, #707246);
	box-shadow: var(--ft-ring, 0 0 0 3px rgba(112, 114, 70, 0.18));
	outline: none;
}

.ftflt__options {
	display: flex;
	flex-direction: column;
	gap: var(--ft-space-2, 0.5rem);
	max-height: 16rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-right: var(--ft-space-1, 0.25rem);
}
/* W panelu pole wyboru zajmuje całą szerokość, żeby licznik zawsze stał przy prawej krawędzi,
   tak samo w pojedynczych przełącznikach (Dostępne, Koncesja) jak na liście marek. */
.ftflt__section .ft-check { display: flex; width: 100%; }
/* .ft-check__label ma się zawijać, marki bywają dłuższe niż kolumna panelu. */
.ftflt__options .ft-check { align-items: flex-start; }
.ftflt__options .ft-check__label { min-width: 0; overflow-wrap: anywhere; }
.ftflt__options .ft-check__box { margin-top: 0.15rem; }

.ftflt__links { display: flex; flex-direction: column; gap: var(--ft-space-1, 0.25rem); }
.ftflt__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ft-space-3, 0.75rem);
	min-height: var(--ft-touch, 2.75rem);
	padding-block: var(--ft-space-2, 0.5rem);
	color: var(--ft-muted, #5c5c5c);
	font-size: var(--ft-fs-sm, 0.9375rem);
	text-decoration: none;
	transition: color var(--ft-dur-fast, 180ms) var(--ft-ease, cubic-bezier(0.4, 0, 0.2, 1));
}
.ftflt__link:hover { color: var(--ft-accent, #707246); }
.ftflt__link:focus-visible {
	outline: 2px solid var(--ft-focus, var(--ft-accent-hover, #5a5c38));
	outline-offset: var(--ft-space-1, 0.25rem);
}
.ftflt__link-count { font-variant-numeric: tabular-nums; font-size: var(--ft-fs-xs, 0.875rem); color: var(--ft-muted, #5c5c5c); }

.ftflt__actions {
	padding: var(--ft-space-4, 1rem) var(--ft-space-5, 1.5rem);
	border-top: 1px solid var(--ft-border, #d6d6c2);
}
.ftflt__submit { width: 100%; }

/* Przycisk mobilny "Filtry (N)": pływa na środku przy dolnej krawędzi ekranu, widoczny
   tylko gdy JS go odsłoni i tylko poniżej 1024 px. Odstęp od dołu uwzględnia pasek
   systemowy iPhone'a. Atrybut data-ftech-cd-avoid mówi wtyczce koszyka F-Tech, żeby jej
   pływający przycisk nie stawał na tym samym miejscu. */
.ftflt__trigger.ft-btn {
	position: fixed;
	left: 50%;
	right: auto;
	bottom: calc(var(--ft-space-5, 1.5rem) + env(safe-area-inset-bottom, 0px));
	z-index: var(--ft-z-sticky, 100);
	width: auto;
	margin: 0;
	padding-inline: var(--ft-space-6, 2rem);
	transform: translateX(-50%);
	box-shadow: var(--ft-shadow-3, 0 2px 5px rgba(30, 30, 20, 0.06), 0 14px 40px rgba(30, 30, 20, 0.1));
}
.ftflt__trigger.ft-btn[hidden] { display: none !important; }

@media (min-width: 1024px) {
	.ftflt {
		position: sticky;
		top: var(--ft-space-5, 1.5rem);
		align-self: start;
		width: 100%;
		max-width: 20rem;
	}
	.ftflt__trigger,
	.ftflt__close { display: none !important; }
}

/* Wzbogacenie JS, tylko poniżej 1024 px: .ftflt zamienia się w nakładkę na cały ekran,
   .ftflt__sheet w wysuwaną od dołu kartę. Klasę ftflt-js na <html> dokłada maleńki skrypt
   w <head> (FTech_FLT_Layout::js_flag), jeszcze przed pierwszym malowaniem strony. Gdyby
   robił to dopiero filters.js ze stopki, na wolnym telefonie panel stałby chwilę w treści,
   a potem wyskakiwał z niej i przesuwał listę produktów (CLS). Bez JavaScriptu klasy nie
   ma, więc panel zostaje zwykłym blokiem w treści i formularz zawsze działa. */
@media (max-width: 1023.98px) {
	html.ftflt-js .ftflt {
		position: fixed;
		inset: 0;
		z-index: var(--ft-z-modal, 9999);
		display: flex;
		align-items: flex-end;
		visibility: hidden;
	}
	html.ftflt-js .ftflt::before {
		content: '';
		position: absolute;
		inset: 0;
		background: color-mix(in oklab, var(--ft-surface-dark, #0a0a0a) 55%, transparent);
		opacity: 0;
		transition: opacity var(--ft-dur, 250ms) var(--ft-ease, cubic-bezier(0.4, 0, 0.2, 1));
	}
	html.ftflt-js .ftflt .ftflt__sheet {
		position: relative;
		display: flex;
		flex-direction: column;
		width: 100%;
		max-height: min(85svh, 100%);
		border-radius: var(--ft-radius-lg, 0) var(--ft-radius-lg, 0) 0 0;
		box-shadow: var(--ft-shadow-3, 0 2px 5px rgba(30, 30, 20, 0.06), 0 14px 40px rgba(30, 30, 20, 0.1));
		transform: translateY(100%);
		transition: transform var(--ft-dur-slow, 600ms) var(--ft-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
	}
	html.ftflt-js .ftflt .ftflt__form { display: flex; flex-direction: column; min-height: 0; }
	html.ftflt-js .ftflt .ftflt__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }
	html.ftflt-js .ftflt.is-open { visibility: visible; }
	html.ftflt-js .ftflt.is-open::before { opacity: 1; }
	html.ftflt-js .ftflt.is-open .ftflt__sheet { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	html.ftflt-js .ftflt::before,
	html.ftflt-js .ftflt .ftflt__sheet,
	.ftflt__link,
	.ftflt__close {
		transition-duration: 0.01ms !important;
	}
}