/* ============================================================
   KATALOG PRODUKTÓW npz.pl - DODATKI do styles-v4.css
   Baza (tokeny, .site-header, .foot, .prod, .world, .t-*) pochodzi
   ze styles-v4.css. Tu tylko komponenty listingu, których v4 nie ma.
   Wszystko na tokenach v4: radius 18/12/999px, fonty Oswald/Montserrat/
   Nunito, cienie --sh-*, --ease. Ładowane PO styles-v4.css - nadpisuje.
   ============================================================ */

/* Belka jest position:fixed - listing musi zejść pod nią o jej realną
   wysokość (mierzoną przez JS w --header-h, jak na karcie produktu). */
body[data-solid-header]{padding-top:var(--header-h,120px)}

/* listing ma własny, węższy odstęp górny - resztę odstępu daje już --header-h */
/* overflow:visible ZDEJMUJE blokadę sticky u ŹRÓDŁA: bazowa .section ma
   overflow:hidden (styles-v4.css), co ustanawia kontener przewijania i zabija
   position:sticky railu .facets. .listcat == ta sekcja, ta sama specyficzność co
   .section, a katalog.css ładuje się później -> wygrywa. Tło .gridbg (inset:0)
   i tak jest w rozmiarze sekcji, więc nic się nie rozlewa. */
.listcat{padding-top:clamp(26px,4vw,46px);overflow:visible}

/* ============================================================
   1 · BREADCRUMB
   ============================================================ */
.crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:10px;
  font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-mute);margin-bottom:26px}
.crumbs a{color:var(--text-mute);transition:color .2s var(--ease)}
.crumbs a:hover{color:var(--green-deep)}
.crumbs__sep{color:var(--hair)}
.crumbs [aria-current]{color:var(--head)}

/* ============================================================
   2 · HERO LISTY
   ============================================================ */
.listhero{margin-bottom:6px}
.listhero__h1{font-family:var(--mono);font-weight:700;text-transform:uppercase;
  font-size:clamp(2rem,1.3rem + 2.6vw,3rem);line-height:1.05;letter-spacing:.01em;color:var(--head)}
.listhero__lead{max-width:62ch;margin-top:14px;font-size:1.02rem;line-height:1.62;color:var(--text-soft)}

/* ============================================================
   3 · PASEK NARZĘDZI (Typ · szukaj · nowości · sort · licznik)
   ============================================================ */
.catbar{display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  margin:24px 0 26px;padding:14px 0 18px;border-bottom:1px solid var(--hair);
  position:sticky;top:var(--header-h,95px);z-index:60;background:var(--bg-1);
  box-shadow:0 10px 18px -14px rgba(15,18,62,.28)}
/* Marta 2026-10-08: „pasek ścięty, więcej oddechu po bokach” - tło szersze o 28 px z każdej strony,
   treść dalej równo z filtrami i kaflami (ujemny margines = padding). Od 900 px, bo węższe ekrany mają mniejszy margines strony. */
@media(min-width:900px){.catbar{margin-left:-28px;margin-right:-28px;padding-left:28px;padding-right:28px;border-radius:0 0 16px 16px}}
/* Marta 2026-10-09: na telefonie przyciski i wyszukiwarka „przy krawędzi” paska - ten sam zabieg w mniejszej skali (12 px). */
@media(max-width:899px){.catbar{margin-left:-12px;margin-right:-12px;padding-left:12px;padding-right:12px;border-radius:0 0 14px 14px}}

/* przełącznik Typ - segment (aktywny na --green) */
.typeswitch{display:inline-flex;background:var(--bg-2);border:1px solid var(--hair);
  border-radius:999px;padding:4px;gap:2px}
.typeswitch__b{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-mute);background:transparent;border:0;cursor:pointer;
  padding:9px 17px;border-radius:999px;transition:background .2s var(--ease),color .2s var(--ease)}
.typeswitch__b:hover{color:var(--head)}
.typeswitch__b.is-active{background:var(--green);color:#fff;box-shadow:var(--sh-sm)}
.typeswitch__b:focus-visible{outline:2px solid var(--green-deep);outline-offset:2px}

/* szukajka - JASNY wariant (bazowy .catalog__input jest pod ciemne forest) */
.catbar__search{position:relative;flex:1 1 240px;min-width:200px;display:flex;align-items:center}
.catbar__searchic{position:absolute;left:15px;width:18px;height:18px;color:var(--text-mute);pointer-events:none}
.catalog__input--light{width:100%;color:var(--text);background:var(--bg-1);
  border:1px solid var(--hair);padding-left:44px}
.catalog__input--light::placeholder{color:var(--text-mute)}
.catalog__input--light:focus{border-color:var(--green);background:#fff;box-shadow:var(--sh-sm)}

/* „Tylko nowości" - przełącznik */
.newtoggle{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-weight:500;
  font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--head);cursor:pointer;user-select:none}
.newtoggle input{position:absolute;opacity:0;width:0;height:0}
.newtoggle__box{width:38px;height:22px;border-radius:999px;background:var(--bg-2);border:1px solid var(--hair);
  position:relative;transition:.2s var(--ease);flex:none}
.newtoggle__box::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:#fff;box-shadow:var(--sh-sm);transition:transform .2s var(--ease)}
.newtoggle input:checked + .newtoggle__box{background:var(--green);border-color:var(--green)}
.newtoggle input:checked + .newtoggle__box::after{transform:translateX(16px)}
.newtoggle input:focus-visible + .newtoggle__box{outline:2px solid var(--green-deep);outline-offset:2px}

/* sortowanie */
.sortwrap{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-weight:400;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-mute)}
.sortsel{font-family:var(--body);font-weight:600;font-size:.9rem;color:var(--head);background:var(--bg-1);
  border:1px solid var(--hair);border-radius:10px;padding:10px 34px 10px 14px;cursor:pointer;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233f7318' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:14px}
.sortsel:focus{outline:none;border-color:var(--green);box-shadow:var(--sh-sm)}

/* licznik „widocznych X z Y" */
.catcount{font-family:var(--mono);font-weight:300;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-mute);white-space:nowrap}

/* przycisk „Filtry" - tylko na mobile (szuflada) */
.facets-toggle{display:none;align-items:center;gap:8px;font-family:var(--btn);font-weight:700;font-size:.85rem;
  color:var(--head);background:var(--bg-1);border:1px solid var(--hair);border-radius:10px;padding:10px 16px;cursor:pointer}
.facets-toggle svg{width:18px;height:18px}
.facets-toggle:focus-visible{outline:2px solid var(--green-deep);outline-offset:2px}

/* ============================================================
   4 · RAIL FACETÓW - 4 osie, LEKKIE checkboxy (minimalizm)
   Bez kolorowych kropek, bez pigułek .world. Domyślnie ~5 wartości
   na oś, reszta pod linkiem „+ Więcej (N)" (render + toggle w katalog.js).
   ============================================================ */
.facets{position:sticky;top:calc(var(--header-h,95px) + 92px);
  display:flex;flex-direction:column;gap:30px;
  max-height:calc(100vh - var(--header-h,95px) - 108px);overflow-y:auto;padding-right:4px}
.facets__head{display:none}   /* nagłówek + X tylko w szufladzie mobilnej */

.facet{display:flex;flex-direction:column;gap:2px}
/* lżejszy nagłówek grupy - cieńszy, bez ciężkiej belki */
.facet__h{font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-mute);padding:0 2px 8px;margin-bottom:4px;border-bottom:1px solid var(--hair)}
.facet__list{display:flex;flex-direction:column;gap:1px}

/* jedna wartość osi = lekki checkbox + etykieta + wyciszony licznik */
.facetopt{display:flex;align-items:center;gap:11px;cursor:pointer;padding:6px 2px;
  font-family:var(--body);font-weight:500;font-size:.9rem;line-height:1.3;color:var(--text-soft);
  transition:color .15s var(--ease)}
.facetopt:hover{color:var(--head)}
.facetopt__cb{position:absolute;opacity:0;width:0;height:0}
.facetopt__box{flex:none;width:17px;height:17px;border-radius:5px;border:1.5px solid var(--hair);
  background:#fff;position:relative;transition:border-color .15s var(--ease),background .15s var(--ease)}
.facetopt:hover .facetopt__box{border-color:var(--green)}
.facetopt__cb:checked + .facetopt__box{background:var(--green);border-color:var(--green)}
.facetopt__cb:checked + .facetopt__box::after{content:"";position:absolute;left:5px;top:2px;
  width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.facetopt__cb:focus-visible + .facetopt__box{outline:2px solid var(--green-deep);outline-offset:2px}
.facetopt__label{flex:1 1 auto}
.facetopt.is-active .facetopt__label{color:var(--head);font-weight:600}
.facetopt__n{flex:none;font-family:var(--mono);font-weight:400;font-size:10.5px;letter-spacing:.06em;
  color:var(--text-mute);opacity:.6}

/* „+ Więcej (N)" / „− Mniej" - dyskretny link tekstowy */
.facet__more{align-self:flex-start;margin-top:5px;background:none;border:0;cursor:pointer;padding:3px 2px;
  font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--green-deep);transition:color .15s var(--ease)}
.facet__more:hover{color:var(--green)}
.facet__more:focus-visible{outline:2px solid var(--green-deep);outline-offset:2px;border-radius:4px}

/* ============================================================
   5 · KAFEL - 1:1 jak na home (klikalny, z .actcard__go)
   Bazowy .prod / .prod__* / .actcard__go z styles-v4.css (ten sam korpus,
   hover-lift i CTA co na stronie głównej). Tu tylko: stos dwóch badge
   (Nowość + Personalizacja), których home nie renderuje statycznie.
   ============================================================ */
/* Stos badge Nowość/Personalizacja: PRAWY górny róg, ten sam offset (12px) co QR+
   (QR+ zostaje z lewej - jak na home). Pigułki 1:1 ze stylem .prod__qr:
   ta sama geometria (padding, promień 999px), border, backdrop-blur i transition.
   QR+ na home NIE ma box-shadow (opiera się na blur+border) - badge też nie, żeby był
   tą samą rodziną pigułki. Kolor zostaje znaczeniowy (fuksja / plum). */
.prod__badges{position:absolute;top:12px;right:12px;display:flex;flex-direction:column;gap:6px;align-items:flex-end;z-index:2}
.prod__badges .prod__badge{position:static;top:auto;right:auto;
  display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;color:#fff;
  font-family:var(--mono);font-weight:600;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.42);backdrop-filter:blur(5px);transition:.3s}
.prod__badge--new{background:rgba(221,25,178,.82)}    /* Nowość - fuksja (var(--fuchsia) @82%) */
.prod__badge--pers{background:rgba(145,15,102,.85)}   /* Personalizacja - plum (var(--plum) @85%) */
.prod__badge--fam{background:rgba(104,180,45,.92)}    /* Rodzina (reprezentant) - zieleń marki */

/* Hover jak QR+ na home: reguła wyzwalana hoverem CAŁEGO kafla (.prod:hover .prod__qr),
   nie hoverem samej pigułki. Odtworzona tu dla obu badge - zmienia się TŁO/odcień
   (utwardza się do pełnego koloru + jaśniejszy border), znaczenie zostaje. */
.prod:hover .prod__badge--new{background:var(--fuchsia-deep);border-color:var(--fuchsia)}
.prod:hover .prod__badge--pers{background:var(--plum);border-color:var(--fuchsia-deep)}
.prod:hover .prod__badge--fam{background:#4f8f22;border-color:rgba(104,180,45,.9)}

/* ============================================================
   6 · STAN PUSTY
   ============================================================ */
.emptystate{padding:clamp(40px,7vw,72px) 20px;text-align:center;border:1px dashed var(--hair);
  border-radius:18px;background:var(--bg-1);display:flex;flex-direction:column;align-items:center;gap:18px}
/* display:flex wyżej bije [hidden] z przeglądarki -> pusty box pod siatką mimo kafli.
   .emptystate[hidden] (0,2,0) > .emptystate (0,1,0), więc chowa bez !important. */
.emptystate[hidden]{display:none}
.emptystate__t{font-family:var(--mono);font-weight:500;font-size:1.05rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--head)}

/* szuflada + tło (aktywne dopiero na mobile) */
.facets-backdrop{display:none}
.facets__close{width:40px;height:40px;border:1px solid var(--hair);border-radius:10px;background:var(--bg-1);
  cursor:pointer;position:relative;flex:none}
.facets__close::before,.facets__close::after{content:"";position:absolute;left:11px;right:11px;top:19px;height:2px;background:var(--green-deep)}
.facets__close::before{transform:rotate(45deg)}
.facets__close::after{transform:rotate(-45deg)}

/* ============================================================
   7 · RESPONSYWNOŚĆ
   Desktop: rail 260px + siatka 3-kol (baza).
   Tablet:  rail zostaje z boku + siatka 2-kol.
   Mobile:  rail chowa się do szuflady „Filtry" + siatka 1-kol.
   ============================================================ */
/* baza (styles-v4.css) na 1180 zwija .prodlayout do 1 kolumny i .worlds w poziomy pasek.
   Dla listingu chcemy inaczej: rail zostaje z boku, siatka spada do 2 kolumn. */
@media (max-width:1180px){
  .prodlayout{grid-template-columns:230px 1fr}
  .prodgrid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:760px){
  .prodlayout{grid-template-columns:1fr}
  .prodgrid{grid-template-columns:1fr}
  .facets-toggle{display:inline-flex}

  .facets{position:fixed;top:0;left:0;bottom:0;width:min(86vw,340px);max-height:none;z-index:130;
    background:var(--bg-0);box-shadow:0 20px 60px rgba(15,18,62,.24);border-right:1px solid var(--hair);
    padding:18px 18px 32px;transform:translateX(-100%);transition:transform .32s var(--ease);overflow-y:auto}
  .facets.is-open{transform:none}
  .facets__head{display:flex;align-items:center;justify-content:space-between;
    margin-bottom:10px;padding-bottom:14px;border-bottom:1px solid var(--hair)}
  .facets__title{font-family:var(--mono);font-weight:600;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--head)}

  .facets-backdrop{display:block;position:fixed;inset:0;background:rgba(15,18,62,.42);
    opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s var(--ease);z-index:125}
  .facets-backdrop.is-open{opacity:1;visibility:visible}

  body.facets-lock{overflow:hidden}
  /* .prodlayout i .section__inner mają z-index:2 (styles-v4.css) = własna warstwa, z której szuflada (130) nie wychodzi:
     pasek strony (80) i tło (125) leżały NA szufladzie, filtrów i krzyżyka nie dało się kliknąć (09.10, bramka samouczka).
     Na czas otwartej szuflady zdejmuję tę warstwę. */
  body.facets-lock .prodlayout,body.facets-lock .section__inner:has(.prodlayout){z-index:auto}
}

/* Nagłówek grupy w siatce (KATALOG_SCOPE.podzial - świat religijny, Marta 12.10) */
/* Plan 95 (PS5): zanim katalog.js narysuje kafle, siatka jest pusta - stopka stała tuż pod nią i po dorysowaniu
   skakała w dół (CLS 0,4-0,5). Pusta siatka trzyma miejsce na pierwszy ekran kafli. */
.prodgrid:empty{min-height:100vh}
#grid .kat-podzial{grid-column:1/-1;margin:24px 0 0;font-family:var(--mono);font-weight:700;font-size:1.35rem;letter-spacing:.02em;text-transform:uppercase;color:var(--navy,#0f123e)}