/* XSUS Filtry — warstwa wyglądu.
   Wszystko chodzi na zmiennych: motyw sklepu nadpisuje kolory jedną regułą na `.xf-sklep`,
   nie musi walczyć ze specyficznością. Domyślnie panel filtrów jest KARTĄ na tle strony —
   na białym motywie bez tego zlewa się z treścią i nie widać, gdzie zaczynają się filtry. */

.xf-sklep, .xf-filtry, .xf-wyniki, .xf-szukajka {
  --xf-odstep: 16px;
  --xf-promien: 14px;
  --xf-promien-maly: 9px;

  --xf-tekst: #16181d;
  --xf-przygaszony: #6a7280;
  --xf-slaby: #9aa1ab;

  --xf-tlo: #fff;
  --xf-tlo-panel: #f7f8fa;      /* karta filtrów */
  --xf-tlo-najazd: #eef1f5;
  --xf-tlo-obrazu: #eceff3;

  --xf-ramka: #e3e7ec;
  --xf-ramka-mocna: #c9d0d9;

  --xf-akcent: #1f6f4a;
  --xf-akcent-tlo: #e7f2ec;
  --xf-promo: #b23a2b;
  --xf-promo-tlo: #fdecea;

  --xf-cien: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
  --xf-cien-najazd: 0 6px 16px rgba(16, 24, 40, .10);

  color: var(--xf-tekst);
}

/* ------------------------------------------------------------------ układ */

.xf-sklep {
  display: grid;
  gap: calc(var(--xf-odstep) * 1.75);
  align-items: start;
}
.xf-uklad-bok { grid-template-columns: minmax(240px, 288px) 1fr; }
.xf-uklad-gora { grid-template-columns: 1fr; }
/* sam panel filtrów wstawiony w cudzą kolumnę — bez własnej siatki, bierze całą szerokość */
.xf-uklad-panel { display: block; }
.xf-sklep, .xf-wyniki, .xf-filtry { min-width: 0; }   /* siatka nie może rozpychać rodzica */
@media (max-width: 900px) { .xf-uklad-bok { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ panel filtrów */

.xf-sklep .xf-filtry {
  position: sticky;
  top: var(--xf-odstep);
  max-height: calc(100vh - var(--xf-odstep) * 2);
  overflow-y: auto;
  /* 🔴 Sam `overflow-y:auto` sprawia, że przeglądarka włącza też oś X (`visible` na drugiej osi
     liczy się wtedy jako `auto`) — wystarczyła długa nazwa opcji albo obrys focusa i pod filtrami
     pojawiał się poziomy suwak. Oś X ucinamy jawnie. */
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;        /* miejsce na pasek rezerwujemy zawsze, żeby nic nie skakało */
  background: var(--xf-tlo-panel);
  border: 1px solid var(--xf-ramka);
  border-radius: var(--xf-promien);
  padding: 6px 18px 14px;
  scrollbar-width: thin;
}
/* Panel wstawiony w gotową ramkę motywu nie może rysować drugiej takiej samej —
   inaczej sklep dostaje kartę w karcie. */
.xf-filtry.xf-bez-karty,
.xf-sklep .xf-filtry.xf-bez-karty {
  background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none;
}
.xf-filtry { font-size: 14px; line-height: 1.45; max-width: 100%; overflow-x: hidden; }
.xf-filtry * { max-width: 100%; min-width: 0; }   /* nic nie wypycha panelu w bok */
.xf-filtry ul, .xf-filtry li { overflow-x: clip; }
.xf-facet, .xf-facet li, .xf-facet label { min-width: 0; }

.xf-bez-naglowka .xf-filtry-naglowek { display: none; }
.xf-bez-naglowka .xf-facet:first-of-type { padding-top: 8px; }
.xf-filtry-naglowek {
  position: sticky; top: 0; z-index: 2;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 12px 0 10px;
  margin-bottom: 2px;
  background: linear-gradient(var(--xf-tlo-panel) 78%, transparent);
}
.xf-filtry-naglowek .xf-tytul-filtrow {
  font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--xf-przygaszony);
}
.xf-wyczysc {
  background: var(--xf-tlo); border: 1px solid var(--xf-ramka); border-radius: 999px;
  padding: 5px 13px; cursor: pointer; color: var(--xf-przygaszony); font: inherit; font-size: 13px;
  transition: color .15s, border-color .15s, background .15s;
}
.xf-wyczysc:hover { color: var(--xf-tekst); border-color: var(--xf-ramka-mocna); background: var(--xf-tlo-najazd); }

/* --- pojedynczy filtr --- */

.xf-facet { border-top: 1px solid var(--xf-ramka); padding: 4px 0 12px; }
.xf-facet:first-of-type { border-top: 0; }

.xf-facet h4 { margin: 0; font-size: inherit; }
.xf-facet h4 .xf-zwin {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 12px 8px 8px;
  background: none; border: 0; cursor: pointer; font: inherit; color: var(--xf-tekst);
  font-weight: 600; font-size: 13.5px; text-align: left;
}
.xf-facet h4 .xf-zwin:hover { color: var(--xf-akcent); }
.xf-strzalka {
  flex: none; width: 9px; height: 9px; margin-right: 3px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s ease;
  opacity: .55;
}
.xf-facet.xf-zwiniety .xf-strzalka { transform: rotate(-45deg) translate(-2px, 2px); }

/* znak „+ / −" zamiast strzałki (ustawienie w panelu) */
.xf-znak-plus .xf-strzalka, .xf-znak-plus .xf-facet .xf-strzalka {
  width: 12px; height: 12px; border: 0; transform: none; opacity: .8; position: relative;
}
.xf-znak-plus .xf-strzalka::before, .xf-znak-plus .xf-strzalka::after {
  content: ''; position: absolute; background: currentColor; border-radius: 1px;
  transition: opacity .15s ease;
}
.xf-znak-plus .xf-strzalka::before { left: 0; right: 0; top: 5px; height: 2px; }
.xf-znak-plus .xf-strzalka::after { top: 0; bottom: 0; left: 5px; width: 2px; opacity: 0; }
.xf-znak-plus .xf-facet.xf-zwiniety .xf-strzalka { transform: none; }
.xf-znak-plus .xf-facet.xf-zwiniety .xf-strzalka::after { opacity: 1; }
.xf-facet.xf-zwiniety ul,
.xf-facet.xf-zwiniety .xf-wiecej,
.xf-facet.xf-zwiniety .xf-szukaj-opcji,
.xf-facet.xf-zwiniety .xf-suwak,
.xf-facet.xf-zwiniety .xf-cena-pola { display: none; }

/* nagłówek filtra: nazwa + licznik zaznaczeń + „wyczyść ten filtr" */
.xf-naglowek-facetu { display: flex; align-items: center; }
.xf-naglowek-facetu .xf-zwin { flex: 1 1 auto; min-width: 0; }
.xf-naglowek-facetu .xf-zwin > span:first-child { flex: 1 1 auto; min-width: 0; }
.xf-zazn-ile {
  flex: none; min-width: 18px; padding: 1px 6px; margin-left: auto;
  font-size: 11px; font-weight: 700; line-height: 1.5; text-align: center;
  color: #fff; background: var(--xf-akcent); border-radius: 999px;
}
.xf-wyczysc-facet {
  flex: none; width: 24px; height: 24px; margin-right: 4px; padding: 0;
  font: inherit; font-size: 17px; line-height: 1; cursor: pointer;
  color: var(--xf-przygaszony); background: none; border: 0; border-radius: 999px;
}
.xf-wyczysc-facet:hover { color: var(--xf-akcent); background: var(--xf-tlo-najazd); }

/* pole „szukaj w tym filtrze" — przy stu markach przewijanie przestaje wystarczać */
.xf-szukaj-opcji { padding: 0 8px 6px; }
.xf-szukaj-opcji input {
  width: 100%; min-width: 0; padding: 6px 10px; font: inherit; font-size: .92em;
  color: inherit; background: var(--xf-tlo); border: 1px solid var(--xf-ramka);
  border-radius: var(--xf-promien-maly); box-sizing: border-box;
}
.xf-szukaj-opcji input:focus { outline: none; border-color: var(--xf-akcent); }
.xf-facet li.xf-niepasuje { display: none; }

/* 🔴 Atrybut `hidden` daje `display:none` tylko z arkusza przeglądarki — KAŻDA reguła motywu
   na `li` go przebija i „Pokaż więcej" przestaje cokolwiek chować. Chowamy własną klasą. */
.xf-facet li.xf-ponad-limit { display: none; }
.xf-facet.xf-rozwiniety li.xf-ponad-limit { display: block; }

.xf-facet ul { list-style: none; margin: 0; padding: 0; }   /* bez wewnętrznych okien z przewijaniem
   — pojawiający się pasek przesuwał treść w bok; długie listy skraca „Pokaż więcej" */
.xf-facet li { margin: 0; }

.xf-facet label {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 6px 8px 6px calc(8px + var(--xf-poziom, 0) * 15px);
  border-radius: var(--xf-promien-maly);
  transition: background .12s;
}
.xf-facet label:hover { background: var(--xf-tlo-najazd); }
.xf-facet .xf-nazwa { flex: 1; min-width: 0; overflow-wrap: anywhere; word-break: break-word; hyphens: auto; }
.xf-facet .xf-licznik {
  flex: none; font-size: 11.5px; font-variant-numeric: tabular-nums;
  color: var(--xf-przygaszony); background: var(--xf-tlo); border: 1px solid var(--xf-ramka);
  border-radius: 999px; padding: 1px 7px;
}
.xf-facet label:hover .xf-licznik { border-color: var(--xf-ramka-mocna); }
/* wariant „w nawiasie": licznik jest częścią etykiety, nie odznaką — tak robi
   większość sklepowych filtrów i tak wygląda naturalnie w liście parametrów.
   `!important`, bo tryb „styl ze strony" ma wyższą specyficzność niż te reguły. */
.xf-facet .xf-licznik-nawias {
  border: 0 !important; background: none !important; padding: 0 !important;
  border-radius: 0 !important; margin-left: 4px;
  font-size: inherit !important; color: var(--xf-przygaszony);
}
.xf-facet .xf-nazwa:has(+ .xf-licznik-nawias) { flex: 0 1 auto; }
.xf-facet label:has(.xf-licznik-nawias) { justify-content: flex-start; }

/* pod suwakiem zamiast pól: sam podpis z zakresem */
.xf-cena-podpis { font-size: 13.5px; color: var(--xf-przygaszony); }
.xf-cena-podpis strong { color: var(--xf-tekst); font-weight: 600; }
.xf-facet.xf-zwiniety .xf-cena-podpis { display: none; }

/* własne pola wyboru — natywne wyglądają inaczej w każdej przeglądarce */
.xf-facet input[type=checkbox], .xf-facet input[type=radio] {
  appearance: none; -webkit-appearance: none;
  flex: none; width: 17px; height: 17px; margin: 0;
  border: 1.5px solid var(--xf-ramka-mocna); background: var(--xf-tlo);
  border-radius: 5px; cursor: pointer; position: relative;
  transition: border-color .12s, background .12s;
}
.xf-facet input[type=radio] { border-radius: 50%; }
.xf-facet input:hover { border-color: var(--xf-akcent); }
.xf-facet input:checked { background: var(--xf-akcent); border-color: var(--xf-akcent); }
.xf-facet input[type=checkbox]:checked::after {
  content: ''; position: absolute; left: 5px; top: 1.5px; width: 4px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(43deg);
}
.xf-facet input[type=radio]:checked::after {
  content: ''; position: absolute; inset: 3.5px; border-radius: 50%; background: #fff;
}
.xf-facet input:focus-visible { outline: 2px solid var(--xf-akcent); outline-offset: 2px; }
.xf-facet input[disabled] { opacity: .45; cursor: default; }
.xf-facet input[disabled] + .xf-nazwa { color: var(--xf-slaby); }
.xf-facet li:has(input[disabled]) label:hover { background: none; }

.xf-wiecej {
  margin-top: 6px; padding: 4px 0; background: none; border: 0; cursor: pointer;
  color: var(--xf-akcent); font: inherit; font-size: 13px; font-weight: 600;
}
.xf-wiecej:hover { text-decoration: underline; }

/* --- cena: własny suwak dwuuchwytowy --- */
/* Warstwy ustawione JAWNIE: tor (1) → wypełnienie (2) → uchwyty (3). Bez tego kropki
   potrafią wylądować pod kreską, bo tor rysowany jest po nich w porządku malowania. */

.xf-facet-cena .xf-suwak {
  position: relative; height: 30px;
  touch-action: none;                       /* inaczej telefon przewija stronę zamiast ciągnąć */
  /* zapas u góry i po bokach na dymki z kwotą — panel ma uciętą oś X, więc muszą się zmieścić */
  margin: 30px 36px 14px;
}
.xf-tor, .xf-wypelnienie {
  position: absolute; top: 50%; height: 5px; margin-top: -2.5px; border-radius: 3px;
  pointer-events: none;
}
.xf-tor { left: -6px; right: -6px; z-index: 1; background: var(--xf-ramka-mocna); opacity: .5; }
.xf-wypelnienie { z-index: 2; left: var(--xf-lewo, 0%); right: calc(100% - var(--xf-prawo, 100%)); background: var(--xf-akcent); }

.xf-uchwyt {
  position: absolute; top: 50%; z-index: 3;
  width: 20px; height: 20px; margin: -10px 0 0 -10px; padding: 0;
  border-radius: 50%; border: 2px solid var(--xf-akcent); background: var(--xf-tlo);
  box-shadow: 0 1px 3px rgba(16, 24, 40, .22); cursor: grab;
  touch-action: none; transition: transform .12s ease, box-shadow .12s ease;
}
.xf-uchwyt::after {                          /* powiększone pole dotyku — sama kropka jest za mała na palec */
  content: ''; position: absolute; inset: -9px; border-radius: 50%;
}
.xf-uchwyt::before {                         /* dymek z kwotą nad uchwytem */
  content: attr(data-etykieta); position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  padding: 2px 7px; border-radius: 4px; background: var(--xf-akcent); color: #fff;
  font-size: 11px; line-height: 1.5; font-weight: 600; white-space: nowrap; pointer-events: none;
}
.xf-uchwyt:hover { transform: scale(1.12); }
.xf-uchwyt.xf-ciagniety { cursor: grabbing; transform: scale(1.18); box-shadow: 0 2px 8px rgba(16, 24, 40, .3); }
.xf-uchwyt:focus-visible { outline: 2px solid var(--xf-akcent); outline-offset: 3px; }
.xf-uchwyt-do { z-index: 4; }                /* przy zejściu się uchwytów górny musi dać się złapać */

.xf-cena-pola { display: flex; align-items: center; gap: 8px; }
.xf-cena-pola span { color: var(--xf-slaby); }
.xf-cena-pola input {
  width: 100%; min-width: 0; padding: 7px 9px; font: inherit; font-size: 13.5px;
  background: var(--xf-tlo); color: inherit;
  border: 1px solid var(--xf-ramka); border-radius: var(--xf-promien-maly);
}
.xf-cena-pola input:focus { outline: none; border-color: var(--xf-akcent); box-shadow: 0 0 0 3px var(--xf-akcent-tlo); }

/* ------------------------------------------------------------------ wyniki */

.xf-chipsy { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--xf-odstep); }
.xf-chipsy[hidden] { display: none; }
.xf-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px; font: inherit; font-size: 13px; cursor: pointer;
  background: var(--xf-akcent-tlo); color: var(--xf-akcent);
  border: 1px solid transparent; border-radius: 999px;
  transition: border-color .12s, background .12s;
}
.xf-chip:hover { border-color: var(--xf-akcent); }
.xf-chip-etykieta { opacity: .72; }
.xf-chip-x { font-size: 16px; line-height: 1; opacity: .6; }
.xf-chip:hover .xf-chip-x { opacity: 1; }
.xf-chip-wyczysc { background: none; color: var(--xf-przygaszony); border-color: var(--xf-ramka); }
.xf-chip-wyczysc:hover { color: var(--xf-tekst); border-color: var(--xf-ramka-mocna); background: var(--xf-tlo-najazd); }

.xf-pasek {
  display: flex; justify-content: space-between; align-items: center; gap: var(--xf-odstep);
  flex-wrap: wrap; margin-bottom: var(--xf-odstep);
  padding-bottom: 12px; border-bottom: 1px solid var(--xf-ramka);
}
/* Pasek w znacznikach sklepu stylizuje motyw — my dajemy tylko rozkład,
   żadnych własnych kolorów, obramowań ani rozmiarów pisma. */
.xf-pasek-sklepu { border-bottom: 0; padding-bottom: 0; }
.xf-pasek-sklepu .woocommerce-result-count { margin: 0; }
.xf-pasek-sklepu .woocommerce-ordering { margin: 0; }
.xf-ile { color: var(--xf-przygaszony); font-size: 14px; }
.xf-ile strong { color: var(--xf-tekst); font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.xf-sort-pole { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--xf-przygaszony); }
.xf-sort {
  padding: 7px 30px 7px 11px; font: inherit; font-size: 13.5px; color: inherit; cursor: pointer;
  background: var(--xf-tlo) no-repeat right 10px center/9px 6px;
  background-image: linear-gradient(45deg, transparent 47%, var(--xf-przygaszony) 47% 60%, transparent 60%),
                    linear-gradient(-45deg, transparent 47%, var(--xf-przygaszony) 47% 60%, transparent 60%);
  background-position: right 15px center, right 10px center;
  background-size: 5px 5px, 5px 5px;
  border: 1px solid var(--xf-ramka); border-radius: var(--xf-promien-maly);
  appearance: none; -webkit-appearance: none;
}
.xf-sort:hover { border-color: var(--xf-ramka-mocna); }
.xf-sort:focus { outline: none; border-color: var(--xf-akcent); box-shadow: 0 0 0 3px var(--xf-akcent-tlo); }

/* kafelki renderowane szablonem sklepu — nie narzucamy im nic poza płynnym podmienianiem */
.xf-siatka-motywu[aria-busy="true"] { opacity: .45; transition: opacity .12s; }
.xf-siatka-motywu > ul.products { margin: 0; }

.xf-siatka {
  display: grid; gap: var(--xf-odstep);
  grid-template-columns: repeat(auto-fill, minmax(min(215px, 100%), 1fr));
}

.xf-karta {
  background: var(--xf-tlo); border: 1px solid var(--xf-ramka); border-radius: var(--xf-promien);
  overflow: hidden; box-shadow: var(--xf-cien);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.xf-karta:hover { box-shadow: var(--xf-cien-najazd); border-color: var(--xf-ramka-mocna); transform: translateY(-2px); }
.xf-karta a { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.xf-obraz { position: relative; display: block; }
.xf-karta img, .xf-brak-zdjecia {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1;
  object-fit: cover; background: var(--xf-tlo-obrazu);
}
.xf-plakietki { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.xf-plakietka {
  padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  background: var(--xf-tlo); color: var(--xf-tekst); box-shadow: var(--xf-cien);
}
.xf-plakietka-promo { background: var(--xf-promo); color: #fff; }
.xf-plakietka-brak { background: rgba(22, 24, 29, .78); color: #fff; }

.xf-tresc-karty { display: flex; flex-direction: column; gap: 6px; padding: 12px 13px 14px; flex: 1; }
.xf-karta h3 {
  margin: 0; font-size: 14px; font-weight: 500; line-height: 1.38;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.xf-karta a:hover h3 { color: var(--xf-akcent); }
.xf-karta .xf-cena { margin-top: auto; font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; }
.xf-niedostepny .xf-obraz { opacity: .55; }
.xf-niedostepny .xf-cena { color: var(--xf-przygaszony); }

.xf-strony { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin-top: calc(var(--xf-odstep) * 1.75); }
/* 🔴 Numery stron to ODNOŚNIKI, nie przyciski — bez tego Googlebot nie ma jak wejść
   na stronę 2 i widzi tylko pierwsze 24 produkty kategorii. Wygląd zostaje ten sam,
   `a` dopisane obok `button` na wypadek starszego HTML-a w pamięci podręcznej strony. */
.xf-strony a, .xf-strony button {
  min-width: 38px; padding: 8px 10px; font: inherit; cursor: pointer; text-align: center;
  background: var(--xf-tlo); color: inherit; text-decoration: none;
  border: 1px solid var(--xf-ramka); border-radius: var(--xf-promien-maly);
  transition: border-color .12s, background .12s;
}
.xf-strony a:hover, .xf-strony button:hover { border-color: var(--xf-ramka-mocna); background: var(--xf-tlo-najazd); color: inherit; }
.xf-strony a.aktywna, .xf-strony button.aktywna { background: var(--xf-akcent); border-color: var(--xf-akcent); color: #fff; font-weight: 600; }
.xf-strony a:focus-visible { outline: 2px solid var(--xf-akcent); outline-offset: 2px; }

/* Podpis dla czytników ekranu — własna klasa, bo `screen-reader-text` daje motyw,
   a sklepy na budowniczych stron (Oxygen) potrafią jej nie mieć wcale. */
.xf-czytnik {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap;
}
.xf-wiecej-stron { color: var(--xf-slaby); padding: 0 4px; }

.xf-brak {
  margin: 0; padding: 44px 24px; text-align: center; color: var(--xf-przygaszony);
  background: var(--xf-tlo-panel); border: 1px dashed var(--xf-ramka-mocna); border-radius: var(--xf-promien);
}
/* Lista w trakcie odświeżania: przygaszona, z cienkim paskiem postępu u góry.
   Wysokość przytrzymuje JS, więc strona nie podskakuje między starą a nową listą. */
[data-xf-wyniki] { position: relative; }
[data-xf-wyniki][aria-busy="true"] { opacity: .55; transition: opacity .12s; }
[data-xf-wyniki][aria-busy="true"]::after {
  content: ''; position: absolute; inset: 0 0 auto; height: 2px; overflow: hidden;
  background: color-mix(in srgb, var(--xf-akcent) 22%, transparent);
}
[data-xf-wyniki][aria-busy="true"]::before {
  content: ''; position: absolute; top: 0; left: 0; z-index: 1;
  height: 2px; width: 35%; background: var(--xf-akcent);
  animation: xf-postep 1s ease-in-out infinite;
}
@keyframes xf-postep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(340%); }
}
@media (prefers-reduced-motion: reduce) {
  [data-xf-wyniki][aria-busy="true"]::before { animation: none; width: 100%; opacity: .5; }
}

/* Wyjście ze ślepego zaułka pod pustą listą */
.xf-wyjscia { margin-top: calc(var(--xf-odstep) * -0.5); text-align: center; }
.xf-wyjscia p { margin: 0 0 10px; color: var(--xf-przygaszony); font-size: .95em; }
.xf-wyjscia ul { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0; padding: 0; list-style: none; }
.xf-wyjscie {
  display: inline-flex; align-items: baseline; gap: 7px; padding: 7px 13px;
  font: inherit; font-size: .92em; cursor: pointer; color: inherit;
  background: var(--xf-tlo); border: 1px solid var(--xf-ramka-mocna); border-radius: 999px;
}
.xf-wyjscie:hover { border-color: var(--xf-akcent); background: var(--xf-tlo-najazd); }
.xf-wyjscie-ile { color: var(--xf-slaby); font-size: .88em; }

/* ------------------------------------------------------------------ wyszukiwarka */

/* 🔴 Żadnego `z-index` na formularzu. Przyklejony nagłówek sklepu ma tu z-index 11
   (`#header-mobile`, `position: sticky`), a nasze 90 sprawiało, że pole wyszukiwania
   przewijało się PO WIERZCHU menu zamiast schować się pod nim (zgłoszenie z telefonu,
   wagipolska.pl). Lista podpowiedzi i tak jedzie do <body> na `position: fixed`
   z własnym z-index, więc formularz nie potrzebuje tu nic ponad `relative`. */
.xf-szukajka { position: relative; display: flex; gap: 8px; max-width: 100%; }
/* 🔴 `min-width: 0` jest tu OBOWIĄZKOWE. Motywy sklepów dają polom `width: 100%`, a wtedy
   automatyczny minimalny rozmiar elastycznego dziecka = ta szerokość — pole nie chce się
   skurczyć i przycisk „Szukaj" wypycha stronę w poziomie (na wagipolska.pl: 479 px przy
   ekranie 390 px, cała strona przewijała się na boki). */
.xf-szukajka input[type=search] {
  flex: 1 1 auto; min-width: 0; box-sizing: border-box;
  padding: 12px 16px; font: inherit;
  background: var(--xf-tlo); color: var(--xf-tekst);
  border: 1px solid var(--xf-ramka); border-radius: 999px;
}
.xf-szukajka input[type=search]:focus { outline: none; border-color: var(--xf-akcent); box-shadow: 0 0 0 3px var(--xf-akcent-tlo); }
.xf-szukajka button {
  flex: 0 0 auto; box-sizing: border-box; white-space: nowrap;
  padding: 12px 24px; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 600;
  background: var(--xf-akcent); color: #fff;
}
@media (max-width: 520px) {
  .xf-szukajka { gap: 6px; }
  .xf-szukajka button { padding: 12px 16px; }
}
.xf-szukajka button:hover { filter: brightness(1.08); }
.xf-podpowiedzi {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 99990; overflow: hidden;
  background: var(--xf-tlo, #fff); border: 1px solid var(--xf-ramka, #e3e7ec);
  border-radius: var(--xf-promien, 14px); box-shadow: 0 12px 32px rgba(16, 24, 40, .18);
  color: var(--xf-tekst, #16181d);
}
/* Lista wyprowadzona do <body> — poza kontekst stapiania przyklejonego nagłówka sklepu.
   Bez tego menu z własnym `z-index` przykrywa podpowiedzi niezależnie od naszych wartości. */
.xf-podpowiedzi-oderwane { position: fixed; right: auto; z-index: 2147483000; max-height: min(70vh, 620px); overflow-y: auto; }
.xf-podpowiedzi a { display: flex; align-items: center; gap: 12px; padding: 9px 12px; color: inherit; text-decoration: none; }
.xf-podpowiedzi a:hover { background: var(--xf-tlo-najazd, #eef1f5); }
.xf-podpowiedzi img { width: 42px; height: 42px; object-fit: cover; border-radius: 7px; background: var(--xf-tlo-obrazu, #eceff3); }
.xf-podpowiedzi span { flex: 1; font-size: 14px; }
.xf-podpowiedzi b { font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--xf-tekst, #16181d); }
.xf-podpowiedzi span { color: var(--xf-tekst, #16181d); }

.xf-komunikat {
  padding: 16px; color: var(--xf-przygaszony);
  border: 1px dashed var(--xf-ramka-mocna); border-radius: var(--xf-promien);
}

/* ------------------------------------------------------------------ styl brany ze strony */
/* Kolory podstawia JavaScript (podpatruje motyw), tutaj oddajemy motywowi typografię:
   krój, wielkość i sposób pisania nagłówków. Filtry przestają wyglądać jak wklejka. */

/* Krój i kolory bierzemy z motywu, ale filtry to warstwa pomocnicza — przy motywach
   z dużym krojem podstawowym cały panel puchnie, więc zostawiamy je odrobinę mniejsze. */
.xf-styl-motyw.xf-filtry, .xf-styl-motyw .xf-filtry { font-size: max(13px, 0.9em); }
.xf-styl-motyw .xf-facet h4 .xf-zwin {
  font-family: var(--xf-h-font, inherit);
  font-weight: var(--xf-h-waga, 600);
  text-transform: var(--xf-h-transform, none);
  letter-spacing: var(--xf-h-odstep, normal);
  color: var(--xf-h-kolor, var(--xf-tekst));
  font-size: 0.95em;
}
.xf-styl-motyw .xf-filtry-naglowek .xf-tytul-filtrow {
  font-family: var(--xf-h-font, inherit);
  color: var(--xf-h-kolor, var(--xf-przygaszony));
}
.xf-styl-motyw .xf-karta h3 { font-family: inherit; }
.xf-styl-motyw .xf-ile strong { font-family: var(--xf-h-font, inherit); }

/* ------------------------------------------------------------------ ciemny motyw */

@media (prefers-color-scheme: dark) {
  .xf-sklep, .xf-filtry, .xf-wyniki, .xf-szukajka {
    --xf-tekst: #e7eaee;
    --xf-przygaszony: #98a1ac;
    --xf-slaby: #6c7580;
    --xf-tlo: #14171a;
    --xf-tlo-panel: #1a1e22;
    --xf-tlo-najazd: #23282e;
    --xf-tlo-obrazu: #23282e;
    --xf-ramka: #2b3137;
    --xf-ramka-mocna: #3d454e;
    --xf-akcent: #58b287;
    --xf-akcent-tlo: #1c2d26;
    --xf-promo: #e0705c;
    --xf-cien: 0 1px 3px rgba(0, 0, 0, .4);
    --xf-cien-najazd: 0 8px 20px rgba(0, 0, 0, .5);
  }
  .xf-plakietka-brak { background: rgba(0, 0, 0, .72); }
}

/* ------------------------------------------------------------------ telefon: szuflada */

.xf-otworz-filtry, .xf-zamknij-filtry, .xf-pokaz-wyniki { display: none; }
@media (max-width: 900px) {
  .xf-otworz-filtry {
    display: inline-flex; align-items: center; gap: 8px; justify-self: start;
    padding: 11px 20px; font: inherit; font-weight: 600; cursor: pointer;
    background: var(--xf-tlo); color: var(--xf-tekst);
    border: 1px solid var(--xf-ramka-mocna); border-radius: 999px; box-shadow: var(--xf-cien);
  }
  .xf-uklad-panel .xf-filtry { position: fixed; }
  .xf-sklep .xf-filtry,
  .xf-sklep .xf-filtry.xf-bez-karty {
    /* 🔴 Szuflada musi być NAD przyklejonym nagłówkiem sklepu (na wagipolska.pl ma z-index
       9999) — inaczej pasek nagłówka łapie kliknięcia zamiast przyciemnienia i szuflady
       nie da się zamknąć dotknięciem obok. Zostawiamy zapas pod baner cookies (100000). */
    position: fixed; inset: 0 18% 0 0; z-index: 99998; max-height: none;
    /* 🔴 Szuflada MUSI mieć własne tło także wtedy, gdy na szerokim ekranie panel go nie ma
       (bo siedzi w ramce motywu) — inaczej na telefonie filtry nachodzą na treść strony. */
    background: var(--xf-tlo-panel);
    border: 0; border-radius: 0; padding: 56px 18px 96px;
    /* 🔴 Szuflada jest `fixed`, a `body` na czas otwarcia ma `overflow: hidden` — bez własnego
       przewijania nie da się dojechać do dalszych filtrów ani do dolnego paska. */
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    transform: translateX(-102%); transition: transform .2s ease-out;
    box-shadow: 0 0 48px rgba(0, 0, 0, .28);
  }
  .xf-sklep.xf-filtry-otwarte .xf-filtry { transform: none; }

  /* Przyciemnienie reszty strony. Pseudoelement należy do `.xf-sklep`, więc kliknięcie w nie
     trafia w ten element — obsługa zamykania w JS na tym właśnie się opiera. */
  .xf-sklep.xf-filtry-otwarte::before {
    content: ''; position: fixed; inset: 0; z-index: 99997;
    background: rgba(0, 0, 0, .45);
  }

  /* 🔴 Krzyżyk i dolny pasek stoją POZA panelem (`[data-xf-filtry]` jest przy każdym
     odświeżeniu przepisywany w całości, więc przycisk w środku zniknąłby po pierwszym
     kliknięciu filtra) — a skoro panel jest `fixed` z własnym `z-index`, muszą być
     `fixed` i wyżej od niego. Wcześniej były `absolute`: lądowały pod nagłówkiem strony
     i szuflady nie dało się zamknąć. */
  .xf-sklep.xf-filtry-otwarte .xf-zamknij-filtry {
    display: flex; align-items: center; justify-content: center;
    position: fixed; top: 8px; right: calc(18% + 8px); z-index: 99999;
    width: 40px; height: 40px; padding: 0;
    border: 0; border-radius: 50%; background: var(--xf-tlo); color: var(--xf-tekst);
    font-size: 26px; line-height: 1; cursor: pointer; box-shadow: var(--xf-cien);
  }
  .xf-sklep.xf-filtry-otwarte .xf-pokaz-wyniki {
    display: block; position: fixed; bottom: 0; left: 0; right: 18%; z-index: 99999;
    padding: 15px 18px calc(15px + env(safe-area-inset-bottom, 0px));
    border: 0; border-top: 1px solid var(--xf-ramka); cursor: pointer;
    font: inherit; font-weight: 600; text-align: center;
    background: var(--xf-akcent); color: #fff;
  }
  .xf-facet ul { max-height: none; }
}

/* ------------------------------------------------------------------ mniej ruchu */

@media (prefers-reduced-motion: reduce) {
  .xf-sklep .xf-filtry, .xf-karta, .xf-strzalka, [data-xf-wyniki] { transition: none; }
  .xf-karta:hover { transform: none; }
}


/* ------------------------------------------------------------------ strony docelowe filtrów */

.xf-wstep { margin: 0 0 var(--xf-odstep); color: var(--xf-tekst); }
.xf-wstep :first-child { margin-top: 0; }
.xf-wstep :last-child { margin-bottom: 0; }

/* Odnośniki do stron docelowych. Jedyne miejsce, z którego robot ma jak do nich dojść —
   opcje filtrów są polami wyboru, nie odnośnikami. */
.xf-linki-filtrow {
  margin-top: calc(var(--xf-odstep) * 2); padding-top: var(--xf-odstep);
  border-top: 1px solid var(--xf-ramka);
}
.xf-linki-grupa + .xf-linki-grupa { margin-top: var(--xf-odstep); }
.xf-linki-grupa h3 {
  margin: 0 0 8px; font-size: .95em; font-family: var(--xf-h-font, inherit);
  font-weight: var(--xf-h-waga, 600); text-transform: var(--xf-h-transform, none);
  letter-spacing: var(--xf-h-odstep, 0); color: var(--xf-h-kolor, inherit);
}
.xf-linki-grupa ul { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; }
.xf-linki-grupa li { margin: 0; }
.xf-linki-grupa a {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 11px;
  font-size: .92em; text-decoration: none; color: inherit;
  background: var(--xf-tlo-panel); border: 1px solid var(--xf-ramka);
  border-radius: 999px; transition: border-color .12s, background .12s;
}
.xf-linki-grupa a:hover { border-color: var(--xf-akcent); background: var(--xf-tlo-najazd); color: inherit; }
.xf-linki-ile { color: var(--xf-slaby); font-size: .88em; }


/* ------------------------------------------------------------------ próbki i pigułki */

/* 🪤 Wygląd jedzie atrybutem `data-styl`, a NIE `data-widok` — ten drugi niesie typ pola
   (radio/checkbox) i jest czytany przy kliknięciu. */

.xf-facet[data-styl] ul { display: flex; flex-wrap: wrap; gap: 7px; }
.xf-facet[data-styl] li { width: auto; }
.xf-facet[data-styl] label {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 9px;
  border: 1px solid var(--xf-ramka); border-radius: 999px; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.xf-facet[data-styl] label:hover { border-color: var(--xf-ramka-mocna); background: var(--xf-tlo-najazd); }
/* pole wyboru chowamy, ale zostaje w drzewie dostępności — po nim jedzie tabulator */
.xf-facet[data-styl] label input {
  position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0;
}
.xf-facet[data-styl] label:has(input:checked) {
  border-color: var(--xf-akcent);
  box-shadow: inset 0 0 0 1px var(--xf-akcent);
  background: var(--xf-akcent-tlo, var(--xf-tlo-najazd));
}
.xf-facet[data-styl] label:has(input:focus-visible) { outline: 2px solid var(--xf-akcent); outline-offset: 2px; }
.xf-facet[data-styl] label:has(input:disabled) { opacity: .45; cursor: default; }
.xf-facet[data-styl] .xf-licznik { background: none; padding: 0; color: var(--xf-slaby); }

.xf-probka {
  flex: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--xf-probka);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--xf-tekst) 22%, transparent);
}
.xf-facet[data-styl="probki"] label:has(input:checked) .xf-probka {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--xf-tekst) 22%, transparent),
              0 0 0 2px var(--xf-tlo), 0 0 0 4px var(--xf-akcent);
}

/* Przeglądarki bez `:has()` — zaznaczenie widać po samym polu wyboru, więc go nie chowamy. */
@supports not selector(:has(*)) {
  .xf-facet[data-styl] label input { position: static; width: auto; height: auto; opacity: 1; }
}