/* ==========================================================================
   FILTER IZDELKOV (stranska letev)
   --------------------------------------------------------------------------
   Slog je NAMENOMA samostojen (predpona `pf-`) in ne del teme: letev mora
   izgledati enako v obeh temah, barve pa vseeno prevzame iz teme, kadar so na
   voljo (spremenljivke `--pt-*` / `--pb-*` z zasilno vrednostjo).

   Tri odločitve, ki so vredne razlage:

     1. VREDNOSTI SO KARTICE, NE VRSTICE. Navpičen seznam kljukic bi pri
        desetih barvah zavzel pol zaslona. Kartice se prelomijo v več vrstic in
        so na pogled to, kar so tudi na izdelku — ista oblika, ista barva.

     2. BARVA JE BARVA IZDELKA. Kartica z lastno barvo (`badge_show`) jo obdrži
        tudi tu, sicer kupec ne poveže, da gre za isto oznako. Izbrana kartica
        se ne obarva drugače — dobi obrobo in kljukico, ker bi sprememba barve
        pomen barve uničila.

     3. NA TELEFONU JE LETEV PREDAL. Filter čez celo širino bi porinil izdelke
        pod rob zaslona; gumb »Filtri (3)« odpre predal, ki se zapre s
        »Prikaži rezultate«.
   ========================================================================== */

.pf-layout {
  --pf-line:  #E2E8F0;
  --pf-ink:   var(--pt-ink-strong, #0F172A);
  --pf-muted: var(--pt-muted, #64748B);
  --pf-acc:   var(--pt-cta-bg, var(--pb-primary, #0B3D52));

  display: grid;
  /* #25 Letev je ožja kot prej (268px). Kartice v njej so kratke — »bela«,
     »60 W«, »A++« — in praznega prostora ob njih je bilo več kot besedila.
     Vsak odvzeti piksel gre mreži izdelkov, ki ga zna porabiti. */
  grid-template-columns: var(--pf-side-w, 232px) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

/* Letev samo z oddelki (nastavitev »Nad izdelki«) nima kartic in je lahko še
   ožja — v njej so same povezave. */
.pf-layout:has(.pf-side--cats) { --pf-side-w: 208px; }

/* Letev, v kateri ne bo ničesar (»Nad izdelki« na iskanju ali akcijah): ostane
   v drevesu, da jo odgovor filtra lahko zamenja, a stolpca ne zasede. */
.pf-side--gone { display: none; }
.pf-layout:has(.pf-side--gone) { grid-template-columns: minmax(0, 1fr); }

/* Brez filtrov (izklopljeni ali brez možnosti) seznam zasede vso širino. */
.pf-layout--bare { grid-template-columns: minmax(0, 1fr); }

.pf-main { min-width: 0; }

/* ── Letev ───────────────────────────────────────────────────────────────── */
.pf-side {
  position: sticky; top: 1rem;
  max-height: calc(100vh - 2rem);
  overflow: auto; overscroll-behavior: contain;
  padding: .2rem .6rem .6rem 0;
}

/* #25 Na namizju je letev kartica, ne gol stolpec besedila.
   Ločnica med letvijo in mrežo je bila doslej samo prazen prostor; kupec je
   videl dva stolpca vsebine, ne orodja ob seznamu. Rob in mehka podlaga to
   povesta brez ene same dodatne besede.
   Na telefonu je letev predal čez zaslon — tam bi bila kartica v kartici,
   zato je slog zaprt v poizvedbo za namizje. */
@media (min-width: 901px) {
  .pf-side {
    padding: .1rem .7rem .8rem;
    background: #fff;
    border: 1px solid var(--pf-line);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  }
  /* Drsnik v letvi je tanek — širok bi ob 232px pojedel celo kartico. */
  .pf-side { scrollbar-width: thin; }
  .pf-side::-webkit-scrollbar { width: 8px; }
  .pf-side::-webkit-scrollbar-thumb { background: #E2E8F0; border-radius: 999px; }
}

.pf-side__head {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem 0 .6rem;
  border-bottom: 1px solid var(--pf-line);
  margin-bottom: .2rem;
  /* Naslov ostane viden tudi, ko je v letvi toliko skupin, da drsi. */
  position: sticky; top: 0; z-index: 2;
  background: #fff;
}
.pf-side__title {
  font-weight: 800; font-size: .78rem; color: var(--pf-muted);
  letter-spacing: .06em; text-transform: uppercase;
}
.pf-side__clear {
  margin-left: auto; font-size: .78rem; font-weight: 700;
  color: var(--pf-acc); text-decoration: none; white-space: nowrap;
}
.pf-side__clear:hover { text-decoration: underline; }
.pf-side__close { display: none; }

/* Letev brez ene same možnosti: ostane v postavitvi (da jo odgovor filtra
   lahko zamenja), a ne jemlje prostora. */
.pf-side--empty { padding-bottom: 0; }
.pf-side__none { margin: .8rem 0 0; font-size: .82rem; color: var(--pf-muted); }

/* ══ #25 ODDELKI V LETVI ══════════════════════════════════════════════════
   Povezave, ne kartice: oddelek ni kljukica, ki jo kupec doda ali odvzame,
   ampak drug kraj v trgovini. Zato je videti kot navigacija in ne kot filter
   — drugačna oblika pove, da klik pelje drugam. */
.pf-cats { padding: .55rem 0 .75rem; border-bottom: 1px solid var(--pf-line); }
.pf-side--cats .pf-cats { border-bottom: 0; padding-bottom: .2rem; }

.pf-cats__title {
  font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--pf-muted); margin: 0 0 .45rem;
}
/* Naslov v letvi, ki že sama nosi napis »Oddelki«, bi bil izpisan dvakrat. */
.pf-side--cats .pf-cats__title { display: none; }

/* Pot navzgor: puščica levo, drugačna barva. Ni sestra trenutne kategorije,
   je izhod iz nje. */
.pf-cats__up {
  display: inline-flex; align-items: center; gap: .3rem;
  margin: 0 0 .4rem; padding: .18rem .42rem .18rem .28rem;
  border-radius: 999px; background: #F1F5F9;
  font-size: .76rem; font-weight: 700; color: var(--pf-muted); text-decoration: none;
}
.pf-cats__up:hover { background: #E2E8F0; color: var(--pf-ink); }
.pf-cats__up svg { width: 13px; height: 13px; flex: none; }

.pf-cats__list, .pf-cats__sub { list-style: none; margin: 0; padding: 0; }

.pf-cats__link {
  display: block; padding: .3rem .45rem; border-radius: 6px;
  font-size: .84rem; line-height: 1.3; color: var(--pf-ink); text-decoration: none;
}
.pf-cats__link:hover { background: #F1F5F9; }

/* Trenutna kategorija ni povezava nikamor — je oznaka, kje kupec stoji. */
.pf-cats__link.is-on {
  font-weight: 800; color: var(--pf-acc);
  background: #F1F5F9;                                   /* zasilno, brez color-mix */
  background: color-mix(in srgb, var(--pf-acc) 8%, #fff);
  box-shadow: inset 2px 0 0 var(--pf-acc);
}

/* Podkategorije so zamaknjene in drobnejše: so nadaljevanje trenutne vrstice,
   ne nova raven seznama. */
.pf-cats__sub { margin: .15rem 0 .35rem; padding-left: .55rem; border-left: 1px solid var(--pf-line); }
.pf-cats__link--sub { font-size: .8rem; color: var(--pf-muted); padding: .24rem .45rem; }
.pf-cats__link--sub:hover { color: var(--pf-ink); }
/* ── Skupina ─────────────────────────────────────────────────────────────── */
.pf-box { border-bottom: 1px solid var(--pf-line); }

.pf-box__title {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  width: 100%; padding: .72rem 0;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: .85rem; font-weight: 700; color: var(--pf-ink);
  text-align: left;
}
.pf-box__title svg { width: 16px; height: 16px; flex: none; transition: transform .18s; opacity: .6; }
.pf-box.is-open .pf-box__title svg { transform: rotate(180deg); }

/* ── Zapiranje skupin dela SAMO z JavaScriptom ────────────────────────────
   Razred `pf-js` na <html> postavi filters.js. Brez njega so vse skupine
   odprte: gumb za zapiranje ne bi delal, zaprta skupina pa bi pomenila, da
   tistih kljukic sploh ni mogoče doseči. */
.pf-box__body { display: flex; padding: 0 0 .8rem; flex-wrap: wrap; gap: .35rem; }
.pf-js .pf-box:not(.is-open) .pf-box__body { display: none; }
html:not(.pf-js) .pf-box__title svg { display: none; }

/* Dolg seznam vrednosti se ne razlije čez pol zaslona. */
.pf-box__body--scroll { max-height: 236px; overflow: auto; align-content: flex-start; }

/* ── Kartica vrednosti ───────────────────────────────────────────────────── */
.pf-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .5rem .3rem .45rem;
  border: 1px solid var(--pf-line); border-radius: 4px;
  background: #fff; cursor: pointer;
  font-size: .78rem; line-height: 1.25; color: var(--pf-ink);
  transition: border-color .12s, box-shadow .12s;
  max-width: 100%;
}
.pf-chip:hover { border-color: #94A3B8; }

/* Kljukica je skrita, a ostane dosegljiva s tipkovnico. */
.pf-chip input {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.pf-chip input:focus-visible + .pf-chip__t { outline: 2px solid var(--pf-acc); outline-offset: 2px; }

.pf-chip__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-chip__n {
  font-size: .68rem; font-weight: 700; color: var(--pf-muted);
  background: #F1F5F9; border-radius: 999px; padding: 0 .32rem; min-width: 1.25em; text-align: center;
}

/* Kartica z LASTNO barvo — ista kot na izdelku (`attr-badge-show`). */
.pf-chip--color {
  background: var(--pf-bg, #FFF4CC);
  color: var(--pf-fg, #6B4E00);
  border-color: rgba(15, 23, 42, .12);
}
.pf-chip--color .pf-chip__n { background: rgba(255, 255, 255, .55); color: inherit; }

/* Izbrana kartica: obroba in kljukica, barva ostane. */
.pf-chip.is-on {
  border-color: var(--pf-acc);
  box-shadow: inset 0 0 0 1px var(--pf-acc);
  font-weight: 700;
}
.pf-chip.is-on .pf-chip__t::before {
  content: "✓"; margin-right: .3rem; font-weight: 900;
}

.pf-chip--wide { width: 100%; justify-content: flex-start; }
.pf-chip--wide .pf-chip__n { margin-left: auto; }

/* ══ #25 KARTICA »NA ZALOGI« ══════════════════════════════════════════════
   Doslej je bila zaloga ena kartica med drugimi — enako velika kot »bela« ali
   »60 W«. Kupec, ki išče izdelek za danes, je ni opazil.

   Zdaj je stikalo čez vso širino letve, z zelenim kljukastim okvirčkom in s
   pojasnilom pod napisom. Napis pride iz nastavitve (»Na zalogi v Mariboru«),
   podnapis pa pove, kaj to pomeni — ta razlika je bila prej samo v glavi
   trgovca, ne pa tudi na zaslonu. */
.pf-stock {
  --pf-ok: #059669;
  display: flex; align-items: flex-start; gap: .55rem;
  width: 100%; margin: .7rem 0 .5rem; padding: .6rem .6rem .6rem .55rem;
  border: 1px solid #D1FAE5; border-radius: 10px;
  background: #F0FDF4; cursor: pointer;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.pf-stock:hover { border-color: #6EE7B7; }

.pf-stock input {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.pf-stock input:focus-visible ~ .pf-stock__t { outline: 2px solid var(--pf-ok); outline-offset: 3px; }

.pf-stock__box {
  flex: none; width: 19px; height: 19px; margin-top: .08rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid #A7F3D0; border-radius: 5px; background: #fff;
  color: #fff;
}
.pf-stock__box svg { width: 12px; height: 12px; opacity: 0; transition: opacity .12s; }

.pf-stock__t { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.pf-stock__l {
  font-size: .84rem; font-weight: 800; line-height: 1.25; color: #065F46;
}
.pf-stock__h { font-size: .7rem; line-height: 1.3; color: #047857; opacity: .8; }

.pf-stock__n {
  margin-left: auto; flex: none; align-self: center;
  font-size: .68rem; font-weight: 800; color: #065F46;
  background: #D1FAE5; border-radius: 999px; padding: .05rem .38rem; min-width: 1.5em; text-align: center;
}

/* Vklopljeno: okvirček se zapolni, kljukica se pokaže, rob potemni. */
.pf-stock.is-on {
  border-color: var(--pf-ok);
  box-shadow: inset 0 0 0 1px var(--pf-ok);
  background: #ECFDF5;
}
.pf-stock.is-on .pf-stock__box { background: var(--pf-ok); border-color: var(--pf-ok); }
.pf-stock.is-on .pf-stock__box svg { opacity: 1; }

/* Takojšen odziv na klik — razred `is-on` pride šele z odgovorom strežnika,
   kljukica pa se premakne že zdaj. */
.pf-stock:has(input:checked) { border-color: var(--pf-ok); background: #ECFDF5; }
.pf-stock:has(input:checked) .pf-stock__box { background: var(--pf-ok); border-color: var(--pf-ok); }
.pf-stock:has(input:checked) .pf-stock__box svg { opacity: 1; }

.pf-apply {
  display: block; width: 100%; margin-top: .9rem;
  padding: .6rem .8rem; border: 0; border-radius: 6px;
  background: var(--pf-acc); color: #fff; cursor: pointer;
  font: inherit; font-weight: 700; font-size: .85rem;
}

/* Pas »Izpostavljeno« stoji nad orodno vrstico in je del seznama. */
.pf-top { margin: 0 0 1.2rem; }

/* ══ #25 FILTRI NAD MREŽO ═════════════════════════════════════════════════
   Nastavitev »Nad izdelki« / »Oboje«. Vsaka skupina je `<details>`, ker mora
   spustni seznam delovati tudi brez JavaScripta — brez tega bi bil pas nad
   mrežo vrsta gumbov, ki se ne odprejo.

   Vsebina je ista kot v letvi (isti `$facets`, iste kljukice v istem
   obrazcu). Podvojene kljukice niso težava: filter vrednosti razdvoji, oba
   dela strani pa odgovor zamenja hkrati. */
.pf-above {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
  margin: 0 0 .9rem;
}

/* Zaloga je tudi tu prva in edina obarvana — ostale skupine so nevtralne, da
   se ena stvar, ki šteje najbolj, vidi na prvi pogled. */
.pf-above__stock {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .38rem .6rem; border: 1px solid #A7F3D0; border-radius: 999px;
  background: #F0FDF4; color: #065F46; cursor: pointer;
  font-size: .8rem; font-weight: 700; line-height: 1;
}
.pf-above__stock:hover { border-color: #6EE7B7; }
.pf-above__stock input {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.pf-above__stock svg { width: 13px; height: 13px; flex: none; opacity: .35; }
.pf-above__stock.is-on, .pf-above__stock:has(input:checked) {
  background: #059669; border-color: #059669; color: #fff;
}
.pf-above__stock.is-on svg, .pf-above__stock:has(input:checked) svg { opacity: 1; }
.pf-above__n {
  font-size: .68rem; font-weight: 800;
  background: rgba(255, 255, 255, .65); color: inherit;
  border-radius: 999px; padding: .08rem .34rem;
}
.pf-above__stock.is-on .pf-above__n,
.pf-above__stock:has(input:checked) .pf-above__n { background: rgba(255, 255, 255, .25); }
.pf-above__stock input:focus-visible ~ span { outline: 2px solid #059669; outline-offset: 3px; }

/* ── Skupina kot spustni seznam ─────────────────────────────────────────── */
.pf-above__g { position: relative; }

.pf-above__sum {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .38rem .6rem; border: 1px solid var(--pf-line); border-radius: 999px;
  background: #fff; cursor: pointer; list-style: none;
  font-size: .8rem; font-weight: 700; line-height: 1; color: var(--pf-ink);
  white-space: nowrap;
}
.pf-above__sum::-webkit-details-marker { display: none; }
.pf-above__sum:hover { border-color: #94A3B8; }
.pf-above__sum svg { width: 13px; height: 13px; opacity: .55; transition: transform .16s; }
.pf-above__g[open] .pf-above__sum { border-color: var(--pf-acc); }
.pf-above__g[open] .pf-above__sum svg { transform: rotate(180deg); }
.pf-above__g.is-on .pf-above__sum { border-color: var(--pf-acc); box-shadow: inset 0 0 0 1px var(--pf-acc); }

.pf-above__c {
  font-size: .68rem; font-weight: 800; color: #fff; background: var(--pf-acc);
  border-radius: 999px; padding: .08rem .34rem; min-width: 1.4em; text-align: center;
}

/* Odprta skupina lebdi nad mrežo — sicer bi vsak klik premaknil vse izdelke
   navzdol in kupec bi izgubil vrstico, ki jo je gledal. */
.pf-above__body {
  position: absolute; z-index: 40; top: calc(100% + .35rem); left: 0;
  display: flex; flex-wrap: wrap; gap: .35rem;
  min-width: 230px; max-width: min(420px, 88vw);
  max-height: 290px; overflow: auto; align-content: flex-start;
  padding: .6rem; border: 1px solid var(--pf-line); border-radius: 10px;
  background: #fff; box-shadow: 0 12px 28px rgba(15, 23, 42, .13);
}

/* Zadnji skupini v vrsti se seznam odpre v levo, da ne uide čez rob.

   `:last-of-type` in ne `:last-child`: v združeni vrstici (#14) za skupinami
   stojita še števec in razvrščanje, zato zadnja skupina ni zadnji otrok — in
   spustni seznam skrajno desne skupine je uhajal čez rob zaslona. */
.pf-above__g:last-of-type .pf-above__body { left: auto; right: 0; }

/* ══ #14  ZDRUŽENA ORODNA VRSTICA ═════════════════════════════════════════
   Filtri, števec in razvrščanje v enem pasu namesto v dveh. Reža pred
   števcem je namerna: brez nje je pas ena sama vrsta gumbov, v kateri kupec
   ne loči »razvrsti« od filtra. */
.pf-above--bar {
  gap: .45rem .5rem;
  padding: .5rem .6rem;
  border: 1px solid var(--pf-line); border-radius: 12px;
  background: #fff;
  margin-bottom: 1rem;
}
/* Gumba za predal tu NAMENOMA ne prižigamo: `.pf-openbtn` ostane skrit in ga
   prižge šele pravilo pod 900 px, in še to samo z JavaScriptom. Na namizju
   predala ni — letev tam stoji ob mreži in gumb bi odpiral nekaj, kar je že
   odprto. */
/* ┌ #4 ŠTEVEC ZADETKOV JE VISEL OB ZGORNJEM ROBU ─────────────────────────┐
   │ Števec je bil gol `<span>` — torej vrstični element. V pasu ob njem    │
   │ stojijo gumbi filtrov in izbirnik razvrščanja, ki so precej višji od   │
   │ ene vrstice besedila. `align-items: center` na pasu poravna ŠKATLO     │
   │ števca, znotraj vrstičnega elementa pa se besedilo postavi po osnovni  │
   │ črti pisave in ne po sredini škatle — ob višjem sosedu se je zato      │
   │ prilepilo k zgornjemu robu.                                            │
   │                                                                        │
   │ Popravek: števec je `inline-flex` s poravnavo po obeh oseh in z        │
   │ najmanjšo višino, enako gumbom v pasu. Tako stoji na sredini vrste ne  │
   │ glede na to, kaj stoji ob njem.                                        │
   └────────────────────────────────────────────────────────────────────────┘ */
.pf-above__count {
  margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  align-self: center; min-height: 2rem; padding: 0 .1rem;
  font-size: .82rem; color: var(--pf-muted); white-space: nowrap;
  text-align: center; line-height: 1.2;
}
/* Kadar števca ni (nastavitev »Brez števca«), mora režo ustvariti
   razvrščanje — sicer se prilepi na zadnji filter. Kadar števec JE, reže ne
   sme podvojiti, sicer razvrščanje odplava v svojo vrsto. */
.pf-above--bar .pf-above__sort { margin-left: auto; }
.pf-above__count ~ .pf-above__sort { margin-left: .35rem; }

/* Na namizju ovoj ne ustvarja svoje škatle: števec in razvrščanje ostaneta
   neposredna člena iste prožne vrstice. Na telefonu ga uporabimo kot urejeno
   spodnjo vrstico, ne da bi podvajali HTML. */
.pf-above__foot { display: contents; }

/* ── Vrstica nad mrežo ───────────────────────────────────────────────────── */
.pf-bar { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.pf-bar__count { font-size: .85rem; color: var(--pf-muted); }

.pf-sort { display: inline-flex; align-items: center; gap: .4rem; margin-left: auto; }
.pf-sort__lab { font-size: .8rem; color: var(--pf-muted); }
.pf-sort__sel {
  font: inherit; font-size: .82rem; padding: .32rem 1.6rem .32rem .5rem;
  border: 1px solid var(--pf-line); border-radius: 6px; background: #fff; color: var(--pf-ink);
  cursor: pointer; max-width: 220px;
}

.pf-openbtn {
  display: none; align-items: center; gap: .4rem;   /* vidno le z JS, glej spodaj */
  padding: .42rem .7rem; border: 1px solid var(--pf-line); border-radius: 6px;
  background: #fff; cursor: pointer; font: inherit; font-size: .82rem; font-weight: 700;
  color: var(--pf-ink);
}
.pf-openbtn svg { width: 15px; height: 15px; }

/* ── Izbrani filtri nad mrežo ────────────────────────────────────────────── */
.pf-active { display: flex; flex-wrap: wrap; gap: .35rem; margin: .7rem 0 .2rem; }
.pf-active__x,
.pf-active__clear {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .22rem .5rem; border-radius: 999px;
  font-size: .76rem; text-decoration: none;
  background: #EFF6FF; color: #1E3A8A; border: 1px solid #BFDBFE;
}
.pf-active__x span { font-size: .7rem; opacity: .7; }
.pf-active__x:hover { background: #DBEAFE; }
.pf-active__clear { background: none; border-color: transparent; color: var(--pf-muted); }
.pf-active__clear:hover { text-decoration: underline; }

/* ── Prazno stanje ───────────────────────────────────────────────────────── */
.pf-empty {
  padding: 2.5rem 1.2rem; text-align: center; color: var(--pf-muted);
  border: 1px dashed var(--pf-line); border-radius: 10px; margin-top: 1rem;
}
.pf-empty p { margin: 0 0 .5rem; }
.pf-empty strong { color: var(--pf-ink); }
.pf-empty a { display: inline-block; margin-top: .6rem; }

/* Med osveževanjem seznam potemni — brez tega ni jasno, ali se je kaj zgodilo. */
.pf-main.is-busy { opacity: .45; pointer-events: none; transition: opacity .12s; }

/* ══ Telefon in tablica ═══════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .pf-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }

  .pf-js .pf-openbtn { display: inline-flex; }

  /* Predal je odvisen od JavaScripta (gumb ga odpre). Brez njega ostane letev
     navaden blok nad mrežo — filtriranje mora delovati tudi tam. */
  .pf-js .pf-side {
    position: fixed; inset: 0 auto 0 0; z-index: 1200;
    width: min(88vw, 340px); max-height: none; height: 100%;
    padding: 1rem 1rem 5rem;
    background: #fff; box-shadow: 0 0 0 100vmax rgba(15, 23, 42, .45);
    transform: translateX(-102%); transition: transform .22s ease;
    visibility: hidden;
  }
  .pf-js .pf-side.is-open { transform: none; visibility: visible; }

  html:not(.pf-js) .pf-side { position: static; max-height: none; margin-bottom: 1.2rem; }

  .pf-js .pf-side__close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; margin-left: .2rem;
    border: 0; border-radius: 6px; background: #F1F5F9; cursor: pointer;
    font-size: .9rem; color: var(--pf-ink);
  }

  .pf-js .pf-side__foot {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: .8rem 1rem; background: #fff; border-top: 1px solid var(--pf-line);
  }
  .pf-side__foot .pf-apply { margin: 0; }

  .pf-sort { margin-left: 0; }
  .pf-sort__sel { max-width: 165px; }
}

@media (max-width: 560px) {
  .pf-bar__count { width: 100%; order: 3; }

  /* ── Združena vrstica na telefonu ────────────────────────────────────────
     Gumbi filtrov so bili široki toliko kot napis: en 290 px, naslednja dva
     po 190 px, zadnji pa sam na pol prazne vrste. Dvostolpčna mreža jim da
     enak ritem in predvidljivo območje dotika. Daljši napis se prelomi znotraj
     kartice; nikoli več ne določa širine celotne vrste. */
  .pf-above--bar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    padding: .5rem;
  }
  .pf-above--bar .pf-openbtn { grid-column: 1 / -1; justify-content: center; }
  .pf-above--bar .pf-above__stock,
  .pf-above--bar .pf-above__g {
    width: 100%; min-width: 0;
  }
  .pf-above--bar .pf-above__stock { justify-content: center; }
  .pf-above--bar .pf-above__sum {
    width: 100%; height: 100%;
    justify-content: space-between;
    white-space: normal; text-align: left; line-height: 1.25;
  }
  .pf-above--bar .pf-above__sum > span:first-child { min-width: 0; }

  /* Spodnji podatki imajo svoj ovoj čez oba stolpca. Zato se ne morejo več
     znajti v praznini ob zadnjem filtru, ne glede na število skupin. */
  .pf-above--bar .pf-above__foot {
    grid-column: 1 / -1;
    display: flex; align-items: center; gap: .5rem;
    min-width: 0; padding-top: .15rem;
  }
  .pf-above__count {
    margin-left: 0; font-size: .78rem;
    flex: 1 1 auto; justify-content: center; min-height: 1.9rem;
  }
  .pf-above--bar .pf-above__sort,
  .pf-above__count ~ .pf-above__sort { margin-left: auto; min-width: 0; }

  .pf-above--bar .pf-sort__lab { font-size: .76rem; }
  .pf-above--bar .pf-sort__sel { width: min(9.5rem, 44vw); max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .pf-side { transition: none; }
  .pf-box__title svg { transition: none; }
}


/* ══ #7 »ODDELKI« NA KATEGORIJI = STRANSKA LETEV NA STRANI IZDELKA ════════
   Ista trgovina, dve stranski letvi, dva videza. Kupec, ki gre s kategorije
   na izdelek, je videl, da se je letev premaknila, zožila in dobila drugačne
   vogale — in to opazi, tudi če ne zna povedati, kaj se je zgodilo.

   Ta blok poravna letev »Oddelki« (`pf-side--cats`) s tisto na strani izdelka
   (`pt-pdpside`) v petih rečeh:

     1. ŠIRINA        260 px namesto 208 px
     2. LEPLJIVOST    top: 16px namesto 1rem
     3. KARTICA       ne nosi je aside, ampak notranji blok — enako kot tam,
                      kjer belo kartico nosi `pt-pdpside__nav` in ne aside
     4. VOGALI        var(--pt-radius, 8px) namesto trdih 12px
     5. PRELOM        1100 px namesto 901 px, da se obe letvi postavita pod
                      vsebino na isti širini zaslona

   Letev s FILTRI (`pf-side` brez `--cats`) ostane, kot je bila: tam je kartica
   na aside smiselna, ker vsebuje več skupin s svojimi mejami.               */

.pf-layout:has(.pf-side--cats) { --pf-side-w: var(--pt-side, 260px); }

@media (min-width: 901px) {
  /* Kartico snamemo z aside — nosil jo bo notranji blok. */
  .pf-side--cats {
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    top: 16px;
    max-height: calc(100vh - 32px);
  }

  /* Glava in oddelki skupaj tvorijo eno belo kartico — natanko tako, kot je
     na strani izdelka `pt-pdpside__nav`. */
  .pf-side--cats .pf-side__head,
  .pf-side--cats .pf-cats {
    background: #fff;
    border-left: 1px solid var(--pf-line);
    border-right: 1px solid var(--pf-line);
  }

  .pf-side--cats .pf-side__head {
    margin: 0;
    padding: .6rem .8rem;
    border-top: 1px solid var(--pf-line);
    border-top-left-radius: var(--pt-radius, 8px);
    border-top-right-radius: var(--pt-radius, 8px);
  }

  .pf-side--cats .pf-cats {
    padding: .2rem .8rem .7rem;
    border-bottom: 1px solid var(--pf-line);
    border-bottom-left-radius: var(--pt-radius, 8px);
    border-bottom-right-radius: var(--pt-radius, 8px);
  }
}

/* Prelom pri 1100 px — isti kot pri `pt-pdpx`. Pri 901 px se je letev na
   kategoriji postavila pod vsebino, na strani izdelka pa še ne, in kupec je na
   tabličnem zaslonu videl dve različni postavitvi iste trgovine. */
@media (max-width: 1100px) and (min-width: 901px) {
  .pf-layout:has(.pf-side--cats) { grid-template-columns: minmax(0, 1fr); }

  .pf-side--cats {
    position: static;
    max-height: none;
    overflow: visible;
    order: 2;
  }
}


/* ══ NADGRADNJA 8 — FILTRI NAD MREŽO SO KARTICE, NE DROBNE PLOŠČICE ════════
   Pas nad izdelki je bil vrsta sivih tabletk pri 0,8 rem z 0,38 rem odmika:
   niže od orodne vrstice, niže od drobtinic in v isti barvi kot vse drugo.
   Kupec, ki je iskal filtre, jih je iskal v letvi ob strani — te vrste ni
   prebral, ker ni bila videti kot nekaj, kar se da klikniti.

   Trije popravki:
     · velikost — ploščice postanejo kartice, ki jih je mogoče zadeti s prstom
       (WCAG 2.5.5 priporoča 44 px, tabletke so imele 26 px);
     · zaobljenost — ista kot pri karticah izdelkov (`--pt-radius`), ne 999px,
       da pas ne izstopa iz preostale strani;
     · napis — vrsta dobi svojo oznako, da se ve, kaj je.
   ══════════════════════════════════════════════════════════════════════════ */
.pf-above {
  /* Zaobljenost sledi temi, kadar je ta nastavljena; sicer 10 px. */
  --pf-radius: var(--pt-radius, 10px);

  gap: .5rem;
  margin: 0 0 1.1rem;
  align-items: stretch;
}

/* ── Napis vrste ─────────────────────────────────────────────────────────── */
.pf-above__lead {
  display: inline-flex; align-items: center; gap: .4rem;
  padding-right: .35rem;
  font-size: .82rem; font-weight: 800; letter-spacing: .02em;
  color: var(--pf-muted, #64748B);
  text-transform: uppercase;
  white-space: nowrap;
}
.pf-above__lead svg { width: 15px; height: 15px; opacity: .7; }

/* ── Skupna oblika kartice ───────────────────────────────────────────────── */
.pf-above__stock,
.pf-above__sum {
  min-height: 42px;
  padding: .5rem .85rem;
  border-radius: var(--pf-radius, 10px);
  border-width: 1.5px;
  font-size: .88rem;
  gap: .45rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
  transition: border-color .14s, background .14s, box-shadow .16s, transform .12s;
}
.pf-above__stock:hover,
.pf-above__sum:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(15, 23, 42, .1);
}
.pf-above__stock:active,
.pf-above__sum:active { transform: none; box-shadow: none; }

.pf-above__stock svg,
.pf-above__sum svg { width: 15px; height: 15px; }

/* Zaloga ostane edina obarvana — ena stvar, ki šteje najbolj, se vidi na prvi
   pogled; če bi bilo obarvano vse, ne bi izstopalo nič. */
.pf-above__stock { border-color: #86EFAC; }

/* ── Izbrana skupina ─────────────────────────────────────────────────────── */
/* Prej je bila razlika med izbrano in neizbrano skupino ena sama točka barve
   obrobe — pri šestih gumbih v vrsti se to ni videlo. Zdaj se izbrana obarva
   tudi v podlagi. */
.pf-above__g.is-on .pf-above__sum {
  background: color-mix(in srgb, var(--pf-acc, #0B3D52) 8%, #fff);
  border-color: var(--pf-acc, #0B3D52);
  box-shadow: inset 0 0 0 1px var(--pf-acc, #0B3D52);
  color: var(--pf-ink, #0F172A);
}
.pf-above__g[open] .pf-above__sum { box-shadow: 0 5px 14px rgba(15, 23, 42, .12); }

/* Števec izbranih: prej 0,68 rem — številka, zaradi katere gumb sploh nosi
   značko, je bila manjša od vsega drugega na strani. */
.pf-above__c,
.pf-above__n {
  font-size: .76rem; font-weight: 800;
  min-width: 1.55em; padding: .12rem .4rem;
  line-height: 1.35;
}

/* Odprt seznam se drži zaobljenosti kartic. */
.pf-above__body {
  border-radius: calc(var(--pf-radius, 10px) + 2px);
  border-width: 1.5px;
  padding: .7rem;
  gap: .4rem;
}

@media (prefers-reduced-motion: reduce) {
  .pf-above__stock, .pf-above__sum { transition: none; }
  .pf-above__stock:hover, .pf-above__sum:hover { transform: none; }
}

/* Na telefonu napis vrste ne jemlje svoje vrstice — stoji pred prvo kartico
   in se z njo prelomi. */
@media (max-width: 560px) {
  .pf-above__lead { font-size: .76rem; width: 100%; padding-bottom: .1rem; }
  .pf-above__stock, .pf-above__sum { font-size: .84rem; padding: .45rem .7rem; }
}