/* Wariant B, „Półka sklepowa”. Nakłada się na katalog.css i wspolne-b.css: te same zmienne, jeden
   akcent (granat). W wspolne-b.css leży to, co wariant B dzieli ze stroną koszyka: skala (część 1),
   góra strony (pasek testowy, nagłówek, pasek grup, belka telefonu), pole ilości z „−” i „+”
   i koło darmowej dostawy. Ten plik ładuje się po nim, więc przy równej wadze selektora wygrywa.

   Części pliku, każdy element w jednym miejscu:
   1. Skala: w wspolne-b.css
   2. Układ strony
   3. Góra: szuflada z drzewem (reszta góry w wspolne-b.css)
   4. Drzewo kategorii
   5. Półka: strona startowa i karty produktów
   6. Panel produktu: nagłówek, wybory, wejście z reklamy, pytanie o kolor
   7. Tabela i lista wariantów
   8. Koszyk
   9. Telefon (do 900 px), w tej samej kolejności części
  10. Nadpisania katalog.css

   Progi szerokości, zawsze „do tylu px włącznie” (max-width, a od góry min-width o jeden piksel wyżej): skrypt ma te same
   liczby w jednym miejscu, stałej PROG w wariant-b.js, i sprawdza je tym samym zapytaniem, więc
   układ zmienia się w stylach i w skrypcie przy tej samej szerokości.
   - 900 telefon (PROG.telefon): belka, szuflada, produkt jako osobny ekran.
   - 1100 (PROG.bezMega, próg z katalog.css): góra i drzewo przestają się przyklejać, mega menu
     znika, „Wszystkie kategorie” prowadzi do drzewa obok treści.
   - 1180 (PROG.koszykNaDole): koszyk schodzi na dół ekranu jako pasek.
   - 1380 i 1500 tylko w stylach: węższe albo szersze kolumny, skrypt ich nie potrzebuje.
   Wysokość przyklejonych pasków (--pasek-gora, --pasek-dol) mierzy skrypt z elementów; z niej
   liczy się scroll-padding w części 10 i przyklejenie drzewa i koszyka.

   Akcenty, jeden stan i jeden wygląd na telefonie i komputerze: wybrane to pełny granat;
   wpisana ilość to granatowa ramka całego pola, liczba pogrubiona, bez tła; wariant, o który
   klient pytał, ma jasne tło bez obwódki; najechanie daje jasnoszare tło, nigdy granat; fokus
   z klawiatury to ta sama granatowa obwódka wszędzie. Jasnogranatowe tło zostaje tylko przy
   informacji i pytaniu oraz przy parze otwarta karta i nagłówek panelu. */

/* ===== 2. Układ: drzewo, półka, koszyk ===== */
/* Kolumna koszyka szersza niż dawniej (300 i 340 px), żeby nazwa, kod, cechy z kolorem, ilość i kwota
   pozycji czytały się bez łamania w pół słowa (plan koszyka, punkt 9). */
.uklad{display:grid;grid-template-columns:232px minmax(0,1fr) 336px;gap:20px;padding:20px 0 100px;align-items:start}
.uklad>main{min-width:0}
@media(min-width:1500px){.uklad{grid-template-columns:232px minmax(0,1fr) 360px}}
/* Na komputerze wiersz układu ma wysokość niezależną od panelu koszyka, żeby panel mógł się
   dopasować do miejsca pod górnym paskiem także w krótkich kategoriach. */
@media(min-width:1181px){.uklad>main{min-height:calc(100vh - var(--pasek-gora) - 40px)}}
/* Węższe okna: ta sama zasada bez mierzonego paska. Stopka stoi poniżej pierwszego ekranu od pierwszego obrazu, więc napis
   „Wczytywanie” zamieniony na listę nie przesuwa jej w widoczną część strony. */
@media(max-width:1180px){.uklad>main{min-height:calc(100dvh - 150px)}}
/* do 1380 px koszyk zostaje przy 284 px: szerszy zabrałby tabeli wariantów miejsce na kolumnę ilości */
@media(max-width:1380px){.uklad{grid-template-columns:212px minmax(0,1fr) 284px;gap:var(--s4)}}
@media(max-width:1180px){
 .uklad{grid-template-columns:212px minmax(0,1fr);padding-bottom:120px}
 /* Na localhost w rogu stoi pasek narzędzi stref; koszyk wchodzi nad niego, więc pod treścią jest więcej miejsca. */
 body:has(.nz-tray) .uklad{padding-bottom:180px}
}

/* ===== 3. Góra: szuflada z drzewem =====
   Pasek testowy, nagłówek, pasek grup z mega menu i belka telefonu są w wspolne-b.css, bo tę samą
   górę ma strona koszyka. Tutaj tylko szuflada z drzewem kategorii, której koszyk nie ma. */
.szuf[hidden]{display:none}
.szuf{position:fixed;inset:0;z-index:80}
.szuf-tlo{position:absolute;inset:0;background:rgba(14,33,54,.45)}
/* szuflada: biała płaszczyzna, drzewo bez własnej karty, nagłówek przyklejony z cienką linią */
.szuf-in{position:absolute;top:0;left:0;bottom:0;width:min(360px,88vw);background:var(--srf);overflow-y:auto;overscroll-behavior:contain;padding:0 0 var(--s5);box-shadow:12px 0 30px rgba(14,33,54,.2)}
.szuf-head{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;background:var(--srf);padding:var(--s2) var(--s4);border-bottom:1px solid var(--line);z-index:1}
.szuf-head h2{font-size:18px}
.szuf-x{border:1.5px solid var(--line);background:var(--srf);border-radius:var(--r);min-height:var(--dotyk);padding:0 var(--s4);font-weight:600}
.szuf .dr-card{border:0;border-radius:0;padding:var(--s2)}
.bez-przewijania{overflow:hidden}
/* otwarte menu kategorii: html ma overflow-x: clip, więc blokada na body nie przechodzi na okno; ta sama sztuczka co przy arkuszu koszyka */
html:has(body.bez-przewijania){overflow:hidden}

/* ===== 4. Drzewo kategorii =====
   Bez własnego paska przewijania. Wiersze leżą w karcie z wcięciem, bez linii między grupami.
   Ten sam język co pasek grup: miejsce, w którym klient jest, ma jasnogranatowe tło (w pasku grup
   jaśniejszy granat): cała grupa bieżącej kategorii (.akt), a w niej bieżąca kategoria jako biały
   wiersz z granatowym, pogrubionym napisem. Liczby zwykłym pismem z cyframi tabelarycznymi.
   Przyklejone pod górnym paskiem; gdy jest wyższe niż ekran, przykleja się dolną krawędzią
   (--drzewo-h mierzy skrypt), więc dolne grupy widać zwykłym przewijaniem strony. */
.drzewo{position:sticky;top:min(calc(var(--pasek-gora) + var(--s4)),calc(100vh - var(--drzewo-h,0px) - var(--s4)))}
.dr-card{background:var(--srf);border:1px solid var(--line);border-radius:var(--r-karta);padding:6px}
.dr-start{position:relative;display:flex;align-items:center;width:100%;margin-bottom:13px;min-height:40px;border:0;border-radius:var(--r);background:transparent;text-align:left;padding:0 10px;font:var(--w2) 14px var(--fb);color:var(--tx)}
.dr-start:hover{background:var(--soft)}
.dr-start.on{background:var(--accbg);color:var(--acc)}
.dr-start::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;background:var(--line)}
.dr-g{border-radius:8px}
.dr-gb{width:100%;border:0;border-radius:var(--r);background:transparent;display:flex;align-items:center;gap:6px;padding:0 8px 0 10px;min-height:40px;font:var(--w2) 14px/1.25 var(--fb);text-align:left;color:var(--tx)}
.dr-gb:hover{background:var(--soft)}
.dr-gb .c,.dr-cb .c{margin-left:auto;font:var(--w1) 12px var(--fb);font-variant-numeric:tabular-nums;color:var(--tx2)}
/* liczba przy grupie tylko w szufladzie: na komputerze stoi w pasku grup tuż nad drzewem, a tu łamała
   nazwy grup na dwie linie */
@media(max-width:1380px){.drzewo .dr-gb .c{display:none}}
.drzewo .dr-gb::after{margin-left:auto}
.dr-gb::after{content:"";width:6px;height:6px;border-right:1.75px solid var(--tx2);border-bottom:1.75px solid var(--tx2);transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s;flex:0 0 auto;margin:0 4px}
.dr-g.open>.dr-gb::after{transform:rotate(-135deg) translate(-1px,-1px)}
.dr-g.akt>.dr-gb{color:var(--acc)}
.dr-g.akt>.dr-gb::after{border-color:var(--acc)}
.dr-g ul{list-style:none;padding:0 0 6px}
.dr-cb{width:100%;border:0;background:transparent;display:flex;align-items:center;gap:6px;padding:6px 28px 6px 18px;min-height:32px;font:var(--w1) var(--t1)/1.3 var(--fb);text-align:left;border-radius:6px;color:var(--tx)}
.dr-cb:hover{background:var(--soft)}
/* bieżąca kategoria: pełny granat, jak każdy wybór w sklepie; ten sam kształt i odstępy co inne wiersze,
   więc liczby stoją w jednej kolumnie. Liczby kategorii kończą się tam, gdzie liczby grup (miejsce na strzałkę). */
.dr-cb.on{background:var(--acc);color:#fff;font-weight:var(--w2)}
.dr-cb.on .c{color:#fff}
.dr-all{font-weight:var(--w2);color:var(--acc)}
@media(max-width:1100px){.drzewo{position:static}}

/* ===== 5. Półka =====
   Strona startowa: wstęp nad kafelkami grup. Kategoria: zwarte karty, zdjęcie jest główną rzeczą. */
.intro{background:var(--srf);border:1px solid var(--line);border-radius:var(--r-karta);padding:18px 20px;margin-bottom:var(--s1)}
.intro h1{font-size:var(--t5);font-weight:800}
.intro p{color:var(--tx2);margin-top:6px;max-width:70ch}
.polka{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:10px;margin-top:14px;align-items:start}
.karta{position:relative;display:flex;flex-direction:column;text-align:left;background:var(--srf);border:1.5px solid var(--line);border-radius:var(--r-karta);overflow:hidden;padding:0;transition:border-color .12s,box-shadow .12s;min-width:0;height:100%}
.karta:hover{border-color:var(--obr)}
.karta.on{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}
.karta.on .kb{background:var(--accbg)}
.karta .ph{width:100%;aspect-ratio:5/4;background:var(--tint)}
.karta .ph img{inset:7%;width:86%;height:86%}
.kb{display:flex;flex-direction:column;gap:var(--s1);padding:9px 10px 10px;flex:1;min-width:0}
.kn{font:600 14px/1.25 var(--fd);letter-spacing:-.01em;color:var(--tx)}
.kz{font-size:12px;color:var(--tx2);line-height:1.3;margin-top:-2px}
/* dopisek, do czego jest ta karta (opisy-wyboru.js): zwykły tekst w kolorze treści */
.kd{font-size:12px;line-height:1.3;color:var(--tx)}
.kc{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin-top:2px}
.kc b{font:var(--w2) var(--t2) var(--fb);font-variant-numeric:tabular-nums;color:var(--tx)}
.kc small{font-size:11.5px;color:var(--tx2)}
.ksw{display:flex;gap:3px;align-items:center;flex-wrap:wrap}
.ksw .sw{width:14px;height:14px}
.ksw .more{font:500 11.5px var(--fm);color:var(--tx2);margin-left:2px}
.km{font-size:12px;color:var(--tx2)}
.kop{display:flex;gap:var(--s1);flex-wrap:wrap}
.kop .op-b{margin-right:0}
.ko{margin-top:auto;padding-top:6px;font:600 12.5px var(--fb);color:var(--acc);display:flex;align-items:center;gap:6px}
.ko::after{content:"";width:6px;height:6px;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;transform:rotate(45deg) translate(-1px,-2px)}
.karta.on .ko::after{transform:rotate(-135deg) translate(-1px,-1px)}

/* ===== 6. Panel produktu =====
   Stoi pod rzędem kart, na całą szerokość półki. Jest spokojny: cienka ramka, a z otwartą kartą
   łączy go ten sam jasny granat w dolnej części karty, w strzałce i w nagłówku panelu. */
.zp{grid-column:1/-1;position:relative;background:var(--srf);border:1px solid #B9C8D8;border-radius:var(--r-karta);padding:0;margin:var(--s1) 0 var(--s2);box-shadow:0 10px 28px rgba(22,50,79,.08)}
.zp::before{content:"";position:absolute;top:-5px;left:calc(var(--strz,40px) - 5px);width:10px;height:10px;background:var(--accbg);border-left:1px solid #B9C8D8;border-top:1px solid #B9C8D8;transform:rotate(45deg)}
.zp-in{padding:var(--s1) var(--s4) var(--s4)}
.zp-head{display:grid;grid-template-columns:84px minmax(0,1fr) auto;gap:14px;align-items:start;background:var(--accbg);padding:14px var(--s4);border-radius:calc(var(--r-karta) - 1px) calc(var(--r-karta) - 1px) 0 0;border-bottom:1px solid #C9D6E3}
.zp-head .ph{width:84px;height:72px;border-radius:var(--r);background:var(--srf)}
.zp-t h2{font-size:19px;font-weight:var(--w2)}
.zp-cechy{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);margin-top:6px;font:600 12.5px var(--fm);color:var(--tx)}
.zp-cechy .n{font:500 12px var(--fb);color:var(--tx2)}
.zp-opis{font-size:var(--t1);color:var(--tx);margin-top:5px;max-width:80ch}
.zp-wiecej{font-size:var(--t1);line-height:1.5}
/* Pole dotyku linku sięga 3 px nad i pod tekst, a układu nie rusza. */
.wb a.zp-karta{display:inline-block;padding:3px 0;margin:-3px 0}
.wb .zp-t a.zp-n{color:inherit;text-decoration:none}
.wb .zp-t a.zp-n:hover{color:var(--acc);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.zp-x{border:1.5px solid var(--line);background:var(--srf);border-radius:var(--r);min-height:40px;padding:0 14px;font-weight:600;font-size:var(--t1);color:var(--tx)}
.zp-x:hover{border-color:var(--acc);color:var(--acc)}
.zp-q{margin-top:var(--s3);font-size:var(--t1);color:var(--tx)}
/* przycisk tekstowy i przycisk „Pokaż wszystko” */
.lnk{border:0;background:transparent;color:var(--acc);font-weight:var(--w2);text-decoration:underline;padding:2px 0;font-size:inherit}
.wszystko{border:1.5px solid var(--acc);background:var(--srf);color:var(--acc);font:600 var(--t1) var(--fb);border-radius:var(--r);padding:0 var(--s3);min-height:34px;white-space:nowrap}
.wszystko:hover{background:var(--acc);color:#fff}

/* wybory: jedna linia na pole, liczba przy każdej wartości; wybrana wartość ma krzyżyk do zdjęcia */
.zf{display:grid;gap:10px;margin-top:14px;padding:var(--s3);background:var(--soft);border:1px solid var(--line);border-radius:8px}
.zf-pole{display:grid;grid-template-columns:150px minmax(0,1fr);gap:10px;align-items:start}
.zf-n{font:600 var(--t1) var(--fb);color:var(--tx);padding-top:var(--s2)}
.zf-ch{display:flex;flex-wrap:wrap;gap:6px}
.zc{display:inline-flex;align-items:center;gap:0;border:1.5px solid var(--line);background:var(--srf);border-radius:var(--r);min-height:36px;padding:0;font:600 13.5px var(--fb);color:var(--tx);font-variant-numeric:tabular-nums}
.zc .zv{padding:0 9px 0 11px}
.zc .sw{margin-left:10px;width:18px;height:18px}
.zc.kol .zv{padding-left:var(--s2)}
.zc .c{align-self:stretch;display:flex;align-items:center;padding:0 9px;border-left:1px solid var(--line);font:500 12px var(--fm);color:var(--tx2)}
.zc:hover:not([aria-pressed="true"]){border-color:var(--line);background:var(--soft)}
/* wybrana pastylka: jasne tło jak wybrany wiersz tabeli i granatowa ramka zamiast pełnego granatu (wariant B, decyzja właściciela 2026-10-08,
   ticket M2-menu-wyboru-jasne-tlo); grubszą ramkę daje cień wewnętrzny, więc pastylka nie zmienia rozmiaru */
.zc[aria-pressed="true"]{background:var(--accbg);border-color:var(--acc);color:var(--tx);box-shadow:inset 0 0 0 1px var(--acc)}
.zc[aria-pressed="true"] .c{color:transparent;border-left-color:var(--acc)}
/* wybrana pastylka: „×” w miejscu liczby, a liczba zostaje pod spodem niewidoczna, więc pastylka ma tę samą szerokość
   przed wyborem i po nim, a rzędy się nie przestawiają (ticket M2-filtr-fasolki-zmieniaja-szerokosc) */
.zc .c{position:relative}
/* pole licznika ma stałą szerokość tylu cyfr, ile ma największa liczba, jaką ta pastylka może pokazać (klasa cf2, cf3, cf4 z chipy()
   w wariant-b.js; jedna cyfra nie potrzebuje klasy). W spoczynku pastylka ma więc dotychczasową szerokość, a liczba, która po wyborze
   w innym polu traci cyfrę („12” → „9”, „10” → „0”), nie zwęża pastylki i nie przestawia sąsiednich (ticket M2-filtr-licznik-zmienia-szerokosc-fasolki) */
.zc .cf2,.zc .cf3,.zc .cf4{box-sizing:content-box;justify-content:flex-end}
/* szerokość cyfry: 0,612 em (Geist 500, cyfry tabelaryczne); „ch” byłoby szersze o ok. 1 px na cyfrę, bo mierzy „0” z cyframi zwykłymi */
.zc .cf2{min-width:1.224em}
.zc .cf3{min-width:1.836em}
.zc .cf4{min-width:2.448em}
.zc[aria-pressed="true"] .c::after{content:"×";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:var(--w2) var(--t2) var(--fb);line-height:1;color:var(--acc)}
.zc:disabled{opacity:.4;cursor:not-allowed}
.zc:disabled .c{text-decoration:line-through}
.zp-stan{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin:var(--s3) 0 10px;font-size:14px}
/* pusty stan (wejście z kodem bez wyborów): zostaje sam odstęp między filtrami a tabelą */
.zp-stan:empty{margin-bottom:0}
.zp-stan b{font-variant-numeric:tabular-nums}
.zp-rada{font-size:var(--t1);color:var(--tx2)}
.zp-stan .zp-rada .lnk{margin-left:var(--s1)}
.zp-pusto{padding:14px;background:var(--soft);border:1px dashed var(--line);border-radius:8px;font-size:13.5px;margin-top:6px}
.zp-foot{display:flex;flex-wrap:wrap;gap:6px var(--s4);align-items:center;justify-content:space-between;margin-top:10px;font-size:var(--t1)}
@media(max-width:1380px){.zf-pole{grid-template-columns:128px minmax(0,1fr)}}

/* wejście z reklamy: nagłówek to nazwa produktu, wybrany wariant na górze panelu,
   pod nim podpowiedź o tańszym opakowaniu tego samego koloru */
.rk{margin:10px 0 var(--s1)}
/* Wiersz wybranego wariantu na komputerze: ten sam układ co na telefonie (część 9), w ramce jak lista wariantów.
   Z lewej cechy, cena brutto z netto i cena za sztukę z kodem; z prawej pole ilości, pod nim wielkość paczki. */
@media(min-width:901px){
 .rk .wl-r.wt{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto 1fr;grid-template-areas:"w q" "p q" "k q";gap:2px var(--s4);align-items:center;padding:var(--s3) var(--s4);border-top:0}
 .rk .wt-w{grid-area:w;display:flex;align-items:center;gap:var(--s2);font:var(--w2) 14.5px/1.3 var(--fb);color:var(--tx)}
 .rk .wt-w .sw{width:18px;height:18px;flex:none}
 .rk .wt-p{grid-area:p;display:flex;align-items:baseline;flex-wrap:wrap;gap:0 var(--s2)}
 .rk .wt-p b{font:var(--w2) var(--t3) var(--fb);font-variant-numeric:tabular-nums;color:var(--tx)}
 .rk .wt-p small{font:var(--w1) var(--t1) var(--fb);font-variant-numeric:tabular-nums;color:var(--tx2)}
 .rk .wt-k{grid-area:k;align-self:start;font:var(--w1) var(--t1)/1.4 var(--fb);font-variant-numeric:tabular-nums;color:var(--tx2)}
 .rk .wt-kod{margin-left:var(--s1);font:var(--w1) var(--t1) var(--fm);white-space:nowrap}
 .rk .wt-q{grid-area:q;align-self:start;display:flex;flex-direction:column;align-items:center;gap:var(--s1)}
 /* Przy paczce kolumna pola ma stałe 152 px: podpis pod polem rośnie przy wpisywaniu („= 1500 szt.”), a kolumna „auto”
    poszerzała się wtedy i pole uciekało klientowi w lewo spod kursora. 152 px mieści „opakowania po 6200 szt.” w jednej
    linii i najdłuższy kawałek podpisu („= 999900 kompletów”); podpis łamie się między kawałkami, więc rośnie w dół, a pole i nazwa stoją. */
 .rk .wl-r.wt:has(.szt-pod){grid-template-columns:minmax(0,1fr) 152px}
 .rk .wt-q .szt-pod{align-self:stretch;white-space:normal;text-align:center;font:var(--w1) var(--t1)/1.3 var(--fb);color:var(--tx)}
 .rk .szt-k{white-space:nowrap}
 .rk .szt-r{font-weight:var(--w2)}
 /* obrys pola 3:1 do tła (--obr), jak pole na telefonie; blok jest jedynym miejscem zakupu nad filtrami */
 .rk .q{border-color:var(--obr)}
}
.rk-t,.rk-w{font:var(--w2) 14px var(--fb);color:var(--tx);margin:var(--s3) 0 var(--s2)}
.rk-w{margin-top:20px;padding-top:14px;border-top:1px solid var(--line)}
/* wycofany kod z reklamy: informacja nad kategorią */
.kod-brak{margin:0 0 var(--s4);padding:var(--s3) var(--s4);border:1px solid var(--line);border-radius:var(--r);background:var(--accbg);font-size:var(--t2);line-height:1.45}
.kod-brak p+p{margin-top:var(--s1)}
/* odpowiedź szukania (krok 4): pytanie o kategorię, „tego nie sprzedajemy”, nic nie znaleziono; wzór wyglądu jak .kod-brak */
.odp{margin:var(--s2) 0 var(--s4);padding:8px var(--s4);border:1px solid var(--line);border-radius:var(--r);background:var(--accbg);font-size:var(--t2);line-height:1.45}
.odp-t{font-weight:var(--w2)}
/* opcje to kafelki kategorii z przeglądu działów; cztery i więcej w dwóch kolumnach, żeby w ostatnim rzędzie nie zostało jedno */
/* Minimum 230 px: przy 1280 px trzy kolumny po 213 px łamały nazwę na trzy linie, więc idą dwie; przy 1440 px trzy
   kolumny po 246 px zostają (nazwa w dwóch liniach). */
.odp .tiles{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--s2);margin-top:var(--s2)}
.odp .tiles:has(>:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}
.empty.odp-nic{margin:var(--s3) 0 var(--s3);padding:var(--s4);max-width:60ch;text-align:left}
.odp-nag{margin:var(--s3) 0 var(--s2)}
.odp-kontakt{margin:var(--s3) 0 0;font-size:var(--t2)}
.odp-kontakt a{display:inline-flex;align-items:center;min-height:32px}
.rk-rada{margin:var(--s2) 0 0;font-size:13.5px;color:var(--tx);font-variant-numeric:tabular-nums}
.rk-rada b{font-weight:600}

/* pytanie o kolor na kolejne produkty, pod wariantem z pierwszą wpisaną ilością */
.pyt{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2) var(--s3);padding:10px var(--s3);background:var(--accbg);border-top:1px solid #C6D4E2;font-size:14px;color:var(--tx);text-align:left}
.pyt .sw{width:18px;height:18px;flex:none}
.pyt-t{flex:1 1 220px;font-weight:600;line-height:1.35}
.pyt-b{display:flex;gap:var(--s2)}
.pyt-tak,.pyt-nie{min-height:40px;padding:0 20px;border-radius:var(--r);font:var(--w2) 14px var(--fb)}
.pyt-tak{border:1.5px solid var(--acc);background:var(--acc);color:#fff}
.pyt-tak:hover{background:var(--acc2)}
.pyt-nie{border:1.5px solid var(--line);background:var(--srf);color:var(--tx)}
.pyt-nie:hover{border-color:var(--acc);color:var(--acc)}

/* ===== 7. Tabela i lista wariantów ===== */
/* macierz: kolor w kolumnach, wymiar w wierszach, jedna cena w komórce; płynie ze stroną. Jak przed rundą K1 (decyzja
   właściciela 2026-09-28, PLAN-KATALOGU.md punkt 26): tabela na całą szerokość panelu (width:100% z katalog.css), nagłówek
   z kolorami tylko na górze tabeli, bez przyklejania. Ramka przewija się w bok tylko wtedy, gdy tabela mimo wszystko nie
   zmieści się w panelu; przy 1024, 1280 i 1440 px mieści się każda (punkt 20: nazwa koloru łamie się w nagłówku). */
.mx{border:1px solid var(--line);border-radius:8px;overflow-x:auto;background:var(--srf)}
/* Szerokości kolumn stałe (właściciel 2026-09-28: „jak jest tabela i ją klikasz to kolory sie ruszają w szerokości tabeli”).
   Przy układzie automatycznym przeglądarka liczyła kolumny od tego, co akurat widać, więc rozwinięcie grupy przesuwało
   kolory. Pierwsza kolumna ma szerokość zależną od liczby kolorów, kolory dzielą resztę po równo; obie szerokości
   i minimalną szerokość tabeli ustawia wariant-b.js, a gdy panel jest węższy, ramka przewija się w bok jak dotąd. */
.mxt{table-layout:fixed}
.mxt th,.mxt td{padding:7px var(--s2)}
.mxt thead th{position:static;background:var(--tint);border:0;box-shadow:inset 0 -1px 0 var(--line)}
/* nazwa koloru w nagłówku kolumny w dwóch liniach, gdy jest długa („Stal nierdzewna A2”), zamiast poszerzać kolumnę */
.mxt thead th.c{white-space:normal}
.mxt thead th.c .colh{max-width:100%}
.mxt thead th.os{box-shadow:inset -1px -1px 0 var(--line);font:700 11.5px var(--fb);letter-spacing:.03em}
.mxt thead tr:first-child th:first-child{border-top-left-radius:7px}
.mxt thead tr:first-child th:last-child{border-top-right-radius:7px}
/* kolumna nazw wierszy szeroka na treść: stałe 104 px zabierały kolumnom kolorów miejsce w szerokich tabelach (punkt 20) */
.mxt th.rh{position:static;min-width:0;text-align:left}
.mxt thead th.os{vertical-align:bottom}
/* róg tabeli: „Kolor” u góry po prawej, nazwa osi u dołu po lewej, bez ukośnej kreski (decyzja właściciela 2026-09-28) */
.mxt thead th.os .os-k{display:block;margin-bottom:var(--s2);text-align:right}
.mxt thead th.os .os-n{display:block}
.mxt th.rh small{display:block;margin-top:2px;font:500 11px var(--fb);color:var(--tx2)}
.mxt th.rh small .op-b{margin-right:5px}
.mxt .cell{gap:var(--s1)}
.mxt .cell .p{font:600 var(--t1) var(--fb);font-variant-numeric:tabular-nums}
/* netto pod brutto małym pismem; cena za sztukę przy paczkach, zwykłym tekstem */
.mxt .pn{display:block;font-size:11px;line-height:1.25;font-variant-numeric:tabular-nums;color:var(--tx2)}
.mxt .psz{display:block;font-size:11px;line-height:1.25;font-variant-numeric:tabular-nums;color:var(--tx2)}
.mxt .q{width:62px;height:34px}
.mxt td.wyr{background:var(--accbg)}
/* komórka z kilkoma wariantami: cena od i odesłanie do listy pod tabelą */
.mxt td.wiele .cell{display:flex;flex-direction:column;align-items:center;gap:2px}
.mxt td.wiele .lnk{font-size:12.5px;font-weight:600;min-height:32px}
/* komórka, w której klient wpisuje ilość */
.mxt td:focus-within{background:var(--accbg)}
.mxt td[data-info]{cursor:text}
.mxt tbody tr:not(.gh):hover>th.rh{color:var(--acc)}
.mxt tbody+tbody .gh th{border-top:1px solid var(--line)}
.mx-jed{font-size:12.5px;color:var(--tx2);margin-top:var(--s2)}
.mx-pyt>td{padding:0 var(--s2) var(--s2)!important;background:var(--accbg)}
.mx-pyt .pyt{border:1px solid #C6D4E2;border-radius:var(--r);background:var(--srf)}
.odl{margin-top:14px}
.odl>p{font-size:12.5px;color:var(--tx2);margin-bottom:var(--s2);max-width:78ch}
.odl:focus{outline:2px solid var(--acc);outline-offset:4px;border-radius:6px}

/* lista wariantów: każdy wiersz ma kod, brutto, netto i jednostkę sprzedaży */
.wl{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--srf)}
.wl-h,.wl-r{display:grid;grid-template-columns:minmax(170px,1.6fr) 96px minmax(84px,.8fr) minmax(104px,.9fr) 80px 96px;gap:10px;align-items:center;padding:var(--s2) var(--s3)}
.wl-h{background:var(--tint);font:var(--w2) 11.5px var(--fb);color:var(--tx2);letter-spacing:.03em;padding-top:7px;padding-bottom:7px}
.wl-r{border-top:1px solid var(--line)}
.wl-r:hover{background:var(--soft)}
.wl-r.wyr{background:var(--accbg)}
.wl .num{text-align:right}
.wl .c{text-align:center}
.wl-w{display:flex;align-items:center;gap:9px;min-width:0}
.wl-w b{display:block;font:600 13.5px var(--fb);font-variant-numeric:tabular-nums}
.wl-w small{display:block;font-size:12px;color:var(--tx2)}
.wl-w .sw{width:18px;height:18px}
.wyr-t{display:block;font:600 12px var(--fb);color:var(--acc);white-space:nowrap;margin-bottom:2px}
.wl-k{font:500 12.5px var(--fm);color:var(--tx)}
.wl-j{font-size:var(--t1)}
.wl-b b{display:block;font:var(--w2) 14.5px var(--fb);font-variant-numeric:tabular-nums}
.wl-b small{display:block;font-size:11.5px;color:var(--tx2);margin-top:1px}
.wl-n{font-size:var(--t1);font-variant-numeric:tabular-nums;color:var(--tx)}
.wl .e{display:none}
.wl-q .q{width:70px;height:38px}
/* jeden wariant: większe pole ilości, bo zostało już tylko wpisać liczbę */
.wl.jeden{border-color:var(--acc)}
.wl.jeden .wl-r{background:var(--accbg)}
.wl.jeden .wl-b b{font-size:var(--t3)}
.q.duze{width:88px;height:var(--dotyk);font-size:16px}
/* zła ilość (pole-ilosci.js): ramka pola w kolorze ostrzeżenia i komunikat przy polu, aż klient go poprawi.
   Komunikat stoi na całą szerokość pod wierszem wariantu albo pozycji koszyka, na komputerze pod polem z prawej;
   w tabeli we własnym wierszu (.mx-blad), bo komórka jest za wąska na zdanie. */
.wb .q[aria-invalid="true"]{border-color:var(--warn);box-shadow:inset 0 0 0 1px var(--warn);color:var(--warn)}
.q-blad{grid-column:1/-1;margin:var(--s1) 0 0;font:var(--w2) var(--t1)/1.4 var(--fb);color:var(--warn);text-align:left}
.wl-r:not(.wt)>.q-blad{justify-self:end;max-width:60ch;text-align:right}
.mx-blad>td{padding:0 var(--s2) var(--s2)!important;border-top:0;text-align:left}
.mx-blad .q-blad{margin:0}
@media(max-width:1380px) and (min-width:901px){.wl-h,.wl-r{grid-template-columns:minmax(160px,1.6fr) 90px minmax(78px,.8fr) minmax(96px,.9fr) 72px 90px;gap:var(--s2)}}

/* opakowanie zbiorcze: wyraźny znak Paleta albo Karton przy jednostce sprzedaży */
.op-b{display:inline-block;font:var(--w2) 10.5px var(--fb);letter-spacing:.06em;text-transform:uppercase;color:var(--acc);background:var(--srf);border:1.5px solid var(--acc);border-radius:var(--r-znak);padding:1px 5px;margin-right:6px;vertical-align:1px;line-height:1.35}
.op-j{white-space:nowrap}
.op-b.op-pal{background:var(--acc);color:#fff;border-color:var(--acc)}
.op-b.op-kar{background:var(--srf);color:var(--acc)}

/* grupy po wymiarze w dużej tabeli i w liście */
.gh th{padding:0!important;background:var(--soft)}
.wl-g{padding:0!important;background:var(--soft);border-top:1px solid var(--line)}
.gh-b{width:100%;display:flex;align-items:center;gap:var(--s3);border:0;background:transparent;padding:9px var(--s3);min-height:var(--dotyk);text-align:left;color:var(--tx);font:600 13.5px var(--fb)}
.gh-b:hover{background:var(--soft)}
.gh-b .gn{font-weight:var(--w2)}
.gh-b .gm{color:var(--tx2);font-weight:500;font-variant-numeric:tabular-nums}
.gh-b .gw{color:var(--acc);font-weight:var(--w2)}
.gh-b .gt{margin-left:auto;color:var(--acc);font-weight:var(--w2);display:flex;align-items:center;gap:6px}
.gh-b .gt::after{content:"";width:6px;height:6px;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;transform:rotate(45deg) translate(-1px,-2px)}
.gh-b[aria-expanded="true"] .gt::after{transform:rotate(-135deg) translate(-1px,-1px)}

/* ===== 8. Koszyk =====
   Stały panel po prawej, jedna wysokość okna; --zmiesc ustawia skrypt tak, żeby lista kończyła się na całej pozycji.
   Przy samym końcu strony panel jedzie w górę razem z treścią zamiast się skracać. Na localhost w prawym dolnym rogu stoi pasek narzędzi stref,
   więc panel kończy się nad nim. */
/* Panel bez zawartości (przed pierwszym rysowaniem po cenach) nie istnieje: pusta ramka i cień zamieniały się w panel i przesuwały układ */
.zest:empty{display:none}
.zest{position:sticky;top:calc(var(--pasek-gora) + var(--s4));background:var(--srf);border:1px solid var(--line);border-radius:var(--r-karta);max-height:min(calc(100vh - var(--pasek-gora) - 60px),var(--zmiesc,100vh));display:flex;flex-direction:column;overflow:hidden}
body:has(.nz-tray) .zest{max-height:min(calc(100vh - var(--pasek-gora) - 104px),var(--zmiesc,100vh))}
.zest-bar{display:none}
.zest-body{display:flex;flex-direction:column;min-height:0;flex:1}
.zest-h{display:flex;align-items:baseline;gap:10px;padding:14px 14px 10px;border-bottom:1px solid var(--line)}
.zest-h h2{font-size:16px}
.zest-h .c{margin-left:auto;font:var(--w1) var(--t1) var(--fb);color:var(--tx2)}
.zest-pusto{padding:14px;font-size:var(--t1);color:var(--tx2);line-height:1.5}
.zest-lista{overflow-y:auto;flex:1 1 auto;min-height:60px;padding:0;overscroll-behavior:contain}
/* lista zatrzymuje się tak, że pozycja tuż nad podsumowaniem jest cała (zgłoszenie właściciela 2026-09-30:
   podsumowanie zasłaniało połowę pozycji) */
.zest-lista{scroll-snap-type:y mandatory}
.zest-lista :is(.zl,.zg-h){scroll-snap-align:end}
/* pasek przewijania listy: cienki, w kolorach sklepu, bez strzałek. Chrome i Edge biorą własny styl paska tylko wtedy,
   gdy nie ma scrollbar-width ani scrollbar-color, więc te dwie właściwości dostaje wyłącznie Firefox */
.zest-lista::-webkit-scrollbar{width:6px}
.zest-lista::-webkit-scrollbar-track{background:transparent}
.zest-lista::-webkit-scrollbar-button{display:none;height:0}
.zest-lista::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--tx2) 40%,transparent);border-radius:6px}
.zest-lista:hover::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--acc) 65%,transparent)}
@supports not selector(::-webkit-scrollbar){.zest-lista{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--tx2) 45%,transparent) transparent}}
/* pozycja koszyka w trzech stałych wierszach; prawa kolumna (usuń, kod, wartość) ma jedną szerokość,
   więc kwoty stoją jedna pod drugą */
.zl{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 86px;column-gap:var(--s2);row-gap:3px;padding:9px 14px 10px;border-top:1px solid var(--line)}
.zl:first-child{border-top:0}
.zl-1,.zl-2,.zl-3{display:contents}
.zl-n{grid-column:1/-1;grid-row:1;padding-right:40px!important;justify-self:start;align-self:center;min-width:0;border:0;background:transparent;padding:0;text-align:left;font:var(--w2) var(--t1)/1.3 var(--fb);color:var(--tx);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.zl-n:hover{color:var(--acc);text-decoration-color:var(--acc)}
/* komputer, koszyk jak paragon: produkt z miniaturą, pod nim wcięte pozycje; kwoty w jednej kolumnie z prawej */
.zg{border-top:1px solid var(--line);padding:12px 14px 6px}
.zg:first-child{border-top:0}
.zg-h{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;align-items:center;margin-bottom:4px}
/* miniatura: ramka ma proporcje samego towaru (kadruj w skrypcie), białe tło jak na zdjęciu */
.zg-f{justify-self:center;width:44px;height:44px;border-radius:6px;background:#fff no-repeat;box-shadow:0 0 0 1px var(--line)}
/* Ramka dostaje swój rozmiar dopiero po wycięciu towaru ze zdjęcia (kadruj), więc nie znamy go z góry. Panel z pierwszego rysunku po cenach
   jest niewidoczny, aż wszystkie ramki będą gotowe (skrypt zdejmuje .czeka-na-kadry); gdyby zdjęcie nie doszło, po 2,5 s pokazuje się sam. */
.zg-f:not(.gotowa){visibility:hidden}
.zest.czeka-na-kadry{visibility:hidden;animation:pokaz-zest 0s 2.5s forwards}
@keyframes pokaz-zest{to{visibility:visible}}
.zg-t{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0}
/* zestaw raz, pod nazwą produktu, małym szarym pismem */
.zg-z{font:var(--w1) 12.5px/1.35 var(--fb);color:var(--tx2)}
.zg-n{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-width:100%;border:0;background:transparent;padding:0;text-align:left;font:var(--w2) var(--t1)/1.3 var(--fb);color:var(--tx);overflow:hidden;cursor:pointer}
.zg-n:hover{color:var(--acc);text-decoration:underline}
/* pozycje pod nagłówkiem produktu na całą szerokość karty, bez wcięcia pod miniaturą: cechy z kolorem mieszczą się w linii */
.zg .zl{margin-left:0;grid-template-columns:minmax(0,1fr) auto;row-gap:4px;column-gap:var(--s3);padding:8px 0;border-top:1px solid var(--line)}
.zg-h+.zl{border-top:0}
.zg .zn{grid-row:1;grid-column:1;font:var(--w1) var(--t1)/1.35 var(--fb);color:var(--tx)}
.zg .zl .zs{grid-row:1;grid-column:2;align-self:start;font:var(--w2) var(--t1)/1.35 var(--fb)}
.zl-il{grid-row:2;grid-column:1;display:flex;align-items:center;gap:var(--s2);min-width:0}
.zg .zl .zq{width:56px;height:32px}
.zg .zu{margin:0;min-width:0;font:var(--w1) var(--t1) var(--fb);color:var(--tx2);white-space:normal}
/* jednostka pełnym słowem (runda 4 koszyka): „kompletów × 3,00 zł” nie mieści się obok pola w wąskim panelu,
   więc „× cena” schodzi pod słowo w całości (kawałki się nie rozrywają) */
.zu-k{white-space:nowrap}
/* paczka: zawartość i suma sztuk w linii pod ceną, jak na stronie koszyka */
.zu-s{display:block}
.zl-usun{grid-row:2;grid-column:2;justify-self:end;align-self:center;border:0;background:transparent;padding:0;min-height:32px;font:var(--w1) var(--t1) var(--fb);color:var(--tx2);cursor:pointer}
.zl-usun:hover{color:var(--tx);text-decoration:underline}
.zest.pelny{height:100vh}
.zest-suma .zs-poz{display:none}
.zn{grid-column:1;grid-row:2;display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;font-size:12.5px;font-weight:500;line-height:1.35;color:var(--tx)}
.zn .sw{width:12px;height:12px;flex:0 0 auto}
/* kolor: kropka i nazwa jednym kawałkiem, bez łamania między nimi */
.zn .kc{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;vertical-align:-1px}
.zn .kc .sw{margin-top:0}
/* kod pod cechami, pismem o stałej szerokości, jak na stronie koszyka */
.zl-kod{display:block;font:500 11.5px/1.4 var(--fm);color:var(--tx2)}
.zn-t{min-width:0}
.zn .op-b{margin-right:var(--s1);vertical-align:0}
.zk{grid-column:2;grid-row:2;justify-self:end;align-self:center;font:500 11.5px var(--fm);color:var(--tx2);white-space:nowrap}
.zl .zq{grid-column:1;grid-row:3;justify-self:start}
.zq{width:66px;height:36px;padding:var(--s1) 6px}
.zu{grid-column:1;grid-row:3;margin-left:76px;align-self:center;font-size:12.5px;color:var(--tx2);font-variant-numeric:tabular-nums;white-space:nowrap}
.zl .zs{grid-column:2;grid-row:3;align-self:center}
.zs{text-align:right;font:var(--w2) var(--t1) var(--fb);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
/* stopka panelu: sumy i przycisk zawsze widoczne, lista przewija się nad nimi */
/* margin-top:auto tu zabierało miejsce liście (flex:1 1 auto), zanim lista zdążyła urosnąć: pusty pas
   nad kołem zamiast wyższej listy. Stopka i tak stoi na dole dzięki wzrostowi listy nad nią. */
.zest-stopka{flex:none;border-top:1px solid var(--line);background:var(--soft);box-shadow:0 -6px 14px rgba(15,20,25,.05)}
.zest-suma{padding:10px 14px var(--s2);display:grid;gap:3px;font-size:var(--t1)}
.zest-suma div{display:flex;justify-content:space-between;gap:10px;font-variant-numeric:tabular-nums}
.zest-suma b{font:var(--w2) var(--t3) var(--fb)}
.zs-poz{font-weight:600;color:var(--tx2)}
.zest-add{margin:0 14px var(--s2);width:calc(100% - 28px);border:0;background:var(--acc);color:#fff;border-radius:var(--r);min-height:46px;font-weight:var(--w2);font-size:14.5px}
.zest-add:hover{background:var(--acc2)}
a.zest-add,a.zb-add{display:flex;align-items:center;justify-content:center;text-decoration:none;box-sizing:border-box}
a.zest-add:hover,a.zb-add:hover{color:#fff}
/* koło darmowej dostawy (wspolne-b.css) nad sumami w stopce panelu; w pasku koszyka na dole ekranu
   koło stoi przy liczbie pozycji i sumie, zdanie krótsze pod nimi */
.zest-kolo{padding:10px 14px 0}
.zest-kolo+.zest-suma{padding-top:var(--s2)}
.zb-t .kolo{flex:1;gap:var(--s2)}
.zb-t .kolo-t{display:flex;gap:.3em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* w wąskim pasku skracają się słowa, kwota zostaje cała */
.zb-t .kolo-s{min-width:0;overflow:hidden;text-overflow:ellipsis}
.zb-t .kolo-t b{flex:none}
/* tło pod rozwiniętym koszykiem istnieje tylko na telefonie */
.zest-tlo{display:none}
/* Koszyk schodzi na dół ekranu jako pasek, który się rozwija. */
@media(max-width:1180px){
 /* pusty koszyk nie ma paska na dole także od 901 do 1180 px: pasek z pustym koszykiem prowadził do pustej strony */
 .zest.pusty{display:none}
 .zest{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:60;border-radius:var(--r-arkusz) var(--r-arkusz) 0 0;border-bottom:0;max-height:calc(100vh - 60px);box-shadow:0 -10px 30px rgba(15,20,25,.16)}
 .zest-bar{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);border-bottom:1px solid transparent}
 .zest.otw .zest-bar{border-bottom-color:var(--line)}
 .zb-t{flex:1;min-width:0;display:flex;align-items:center;gap:10px;border:0;background:transparent;text-align:left;min-height:46px;padding:0 var(--s1)}
 .zb-l{font:var(--w2) 14px var(--fb)}
 .zb-v{font:600 13.5px var(--fb);color:var(--tx);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .zb-t .strz{width:9px;height:9px;border-right:2px solid var(--tx);border-bottom:2px solid var(--tx);transform:rotate(-135deg) translate(-2px,-2px);margin-left:auto;flex:0 0 auto}
 .zest.otw .zb-t .strz{transform:rotate(45deg) translate(-2px,-2px)}
 .zb-add{border:0;background:var(--acc);color:#fff;border-radius:var(--r);min-height:46px;padding:0 18px;font-weight:var(--w2);font-size:14px;white-space:nowrap;flex:none}
 .zest-body{display:none}
 .zest.otw .zest-body{display:flex;max-height:calc(100vh - 140px)}
 .zest-h{padding-top:10px}
 .zest-body .zest-add{display:none}
 /* Na localhost pasek koszyka wchodzi nad pasek narzędzi stref, żeby nic go nie zasłaniało. */
 body:has(.nz-tray) .zest{bottom:58px;border-radius:var(--r-arkusz);border-bottom:1px solid var(--line);max-height:calc(100vh - 120px)}
}

/* ===== 9. Telefon =====
   Wszystkie style telefonu w jednym bloku, w kolejności części strony.
   Przyciski jednej rodziny: główny (granat pełny), drugorzędny (obrys), tekstowy (granatowy napis).
   Pismo o stałej szerokości tylko dla kodu produktu. */
@media(max-width:900px){
 /* przewijanie: u góry belka (--pasek-gora mierzy skrypt), na dole pasek koszyka (--pasek-dol);
    scroll-padding liczy się z nich w części 10, tu tylko wartość wyjściowa i mniejszy odstęp */
 :root{--pasek-gora:var(--belka);--odstep-przew:var(--s3)}

 /* przyciski: trzy rodzaje */
 .wb .lnk{display:inline-flex;align-items:center;min-height:var(--dotyk);padding:0 var(--s1);border:0;background:transparent;color:var(--acc);font:var(--w2) var(--t2) var(--fb);text-decoration:none}
 /* kategoria w zdaniu o wycofanym produkcie: odnośnik w tekście jak link obok niego, kropka zaraz za nim */
 .wb .kod-brak .lnk{display:inline;min-height:0;padding:0;font:inherit;font-weight:var(--w2);text-decoration:underline}
 .wb .szuf-x,.wb .pyt-nie{min-height:var(--dotyk);padding:0 var(--s4);border:1.5px solid var(--obr);border-radius:var(--r);background:var(--srf);color:var(--acc);font:var(--w2) var(--t2) var(--fb)}
 .wb .pyt-tak{min-height:var(--dotyk);padding:0 var(--s5);border:1.5px solid var(--acc);border-radius:var(--r);background:var(--acc);color:#fff;font:var(--w2) var(--t2) var(--fb)}
 /* pytanie i „nie znaleziono produktu” z odpowiedzi szukania: kafelki jeden pod drugim, zdjęcie z lewej, jak na komputerze,
    żeby trzy opcje nie dawały dwóch rzędów z pustym miejscem */
 .wb .odp{padding:var(--s3)}
 .wb .sec.odp-nag{margin:var(--s3) 0 var(--s2)}
 .wb .odp .tiles,.wb .odp .tiles:has(>:nth-child(4)){grid-template-columns:minmax(0,1fr)}
 .wb .odp .tile{flex-direction:row;align-items:center;gap:var(--s3)}
 .wb .odp .tile .ph{width:56px;height:56px}
 .wb .odp-kontakt a{display:inline-flex;align-items:center;min-height:var(--dotyk)}


 /* układ: jedna kolumna, drzewo w szufladzie */
 .uklad{grid-template-columns:minmax(0,1fr);gap:0;padding:var(--s3) 0 var(--s5)}
 body:has(.nz-tray) .uklad{padding-bottom:var(--s5)}
 .wb-ekran .uklad{padding-top:var(--s3)}
 /* ekran produktu od pierwszego obrazu (ekran-start.js): nagłówek jest niższy niż zwykły, więc bez tego stopka wystawałaby spod napisu „Wczytywanie”;
    pełna wysokość okna chowa ją pod linią zagięcia, a po cenach reguła przestaje działać */
 .wb-ekran .uklad>main:has(>.loading){min-height:100dvh}

 /* drzewo w szufladzie */
 .drzewo{display:none}
 .szuf-head h2{font:var(--w2) var(--t4) var(--fd)}
 .dr-gb{min-height:var(--dotyk);font:var(--w2) var(--t2) var(--fb)}
 .dr-cb{min-height:var(--dotyk);font:var(--w1) var(--t2)/1.3 var(--fb)}
 .dr-cb.on,.dr-all{font-weight:var(--w2)}
 .dr-gb .c,.dr-cb .c{font:var(--w1) var(--t1) var(--fb)}
 .dr-start{min-height:var(--dotyk);font:var(--w2) var(--t2) var(--fb)}

 /* półka: dwie kolumny kart, kolejność pod listą, wstęp strony startowej */
 .wb .polka{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2);margin-top:var(--s3)}
 .karta{border-width:1px}
 .karta .ph{aspect-ratio:4/3}
 .kb{gap:var(--s1);padding:var(--s2) var(--s3) var(--s3)}
 .kn{font:var(--w2) var(--t2)/1.3 var(--fb);letter-spacing:0}
 .kz,.km{margin:0;font:var(--w1) var(--t1)/1.35 var(--fb);color:var(--tx2)}
 .kd{font:var(--w1) var(--t1)/1.35 var(--fb)}
 .kc b{font:var(--w2) var(--t3) var(--fb)}
 .kc small{font-size:var(--t1)}
 /* na półce cena, pod nią jednostka, w każdej karcie tak samo (punkt 24): bez łamania zależnego od długości ceny */
 .karta .kc{flex-direction:column;align-items:flex-start;gap:0}
 .ksw .more{font:var(--w1) var(--t1) var(--fb)}
 .ko{padding-top:var(--s2);font:var(--w2) var(--t1) var(--fb)}
 .ko::after{transform:rotate(-45deg) translate(-1px,-1px)}
 .sort-dol{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s4);font-size:var(--t2);color:var(--tx2)}
 .sort-dol .sortbox{height:var(--dotyk);border:1.5px solid var(--obr);border-radius:var(--r);background:var(--srf)}
 .sort-dol .sortbox select{font:var(--w1) var(--t3) var(--fb)}
 /* strona startowa: na telefonie bez karty wstępu (pod logo stoi już „Akcesoria ogrodzeniowe”); nagłówek zostaje dla czytnika ekranu, pierwsza pod belką jest pierwsza grupa */
 .intro{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0;padding:0;border:0}
 .intro p{display:none}

 /* ekran produktu: białe tło, sekcje na całą szerokość oddzielone cienką linią, bez karty w karcie */
 body.wb-ekran{background:var(--srf)}
 .wb-ekran .zp{background:transparent;border:0;border-radius:0;box-shadow:none;margin:0;padding:0}
 .wb-ekran .zp::before{display:none}
 .wb-ekran .zp-in{padding:0}
 /* Dolny odstęp 8 px zamiast 16 px oddaje miejsce jednej linii linku do karty: pole ilości zostaje nad paskiem koszyka. */
 .wb-ekran .zp-head{grid-template-columns:64px minmax(0,1fr);gap:0 var(--s4);align-items:start;background:transparent;border:0;border-radius:0;padding:0 0 var(--s2)}
 .wb-ekran .zp-head .ph{width:64px;height:64px;border-radius:var(--r)}
 .zp-t h1{font:var(--w2) var(--t5)/1.2 var(--fd)}
 .zp-opis{margin-top:var(--s1);font-size:var(--t2);line-height:1.4}
 .zp-wiecej{line-height:1.4}
 .zp-od{margin-top:var(--s1);font-size:var(--t2);color:var(--tx2)}
 .zp-od b{font:var(--w2) var(--t4) var(--fb);color:var(--tx);font-variant-numeric:tabular-nums}
 .wb-ekran .zp-cechy{display:flex;flex-wrap:wrap;gap:0 var(--s3);margin-top:var(--s1);font:var(--w1) var(--t1)/1.45 var(--fb);color:var(--tx)}
 .wb-ekran .zp-cechy .n{font:inherit;color:var(--tx2)}
 .wb-ekran .zp-q{margin:0 0 var(--s3);font-size:var(--t2)}

 /* wybory: jedna linia na pole, natywna lista wyboru; kolor jako próbki */
 .wb-ekran .zf{display:grid;gap:var(--s3);margin:0 calc(-1 * var(--s4));padding:var(--s3) var(--s4);background:transparent;border:0;border-top:1px solid var(--line);border-radius:0}
 .wb-ekran .zf-pole{grid-template-columns:minmax(0,1fr);padding:0;border:0}
 .wb .zf-sel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);align-items:center;gap:var(--s3)}
 .wb .zf-n{padding:0;font:var(--w2) var(--t2)/1.3 var(--fb);color:var(--tx)}
 .selbox{position:relative;display:flex;align-items:center;height:var(--dotyk);box-sizing:border-box;border:1.5px solid var(--obr);border-radius:var(--r);background:var(--srf);min-width:0}
 .selbox.on{border-color:var(--acc);background:var(--accbg);box-shadow:inset 0 0 0 1px var(--acc)}
 .selbox.on select{font-weight:var(--w2)}
 .selbox::after{content:"";position:absolute;right:14px;width:8px;height:8px;border-right:2px solid var(--acc);border-bottom:2px solid var(--acc);transform:rotate(45deg) translateY(-2px);pointer-events:none}
 .selbox select{appearance:none;-webkit-appearance:none;width:100%;min-width:0;height:100%;border:0;background:transparent;font:var(--w1) var(--t3) var(--fb);color:var(--tx);padding:0 36px 0 var(--s3);text-overflow:ellipsis}
 .selbox select:focus-visible{outline:2px solid var(--acc);outline-offset:-2px;border-radius:var(--r)}
 .wb-ekran .zf-pole.kolory{display:grid;gap:var(--s2)}
 /* bez „dense”: przyciski stoją w kolejności z kodu strony, więc Tab i czytnik ekranu idą tak, jak widać (plan koszyka, punkt 12) */
 .wb-ekran .zf-pole.kolory .zf-ch{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:row;gap:var(--s2)}
 .wb .zc{min-width:0;min-height:var(--dotyk);border:1.5px solid var(--obr);border-radius:var(--r);background:var(--srf);color:var(--tx);font:var(--w1) var(--t2) var(--fb)}
 .wb .zc[aria-pressed="true"]{background:var(--accbg);border-color:var(--acc);color:var(--tx)}
 .wb .zc.kol{justify-content:flex-start}
 .wb .zc.kol .sw{margin-left:var(--s2);width:18px;height:18px;flex:none}
 /* Dłuższa nazwa koloru łamie się między słowami. Nazwa, która nie mieści się w dwóch liniach („Stal nierdzewna A2”),
    dostaje dwie kolumny (szerokieProbki w wariant-b.js); wielokropek zostaje tylko jako zabezpieczenie. */
 .wb .zc.kol .zv{padding:2px var(--s1) 2px 6px;text-align:left;line-height:1.2;min-width:0;overflow:hidden;text-overflow:ellipsis}
 .wb .zc.kol.szer{grid-column:span 2}
 .wb .zc.wsz{justify-content:center}
 .wb .zc.wsz .zv{padding:0 var(--s2)}
 /* stan wyborów: zdanie z lewej, „Wyczyść” z prawej, jeden rząd. Napis ma podstawę 0 (rośnie do końca rzędu) i może się ścisnąć,
    więc dłuższy wariant („kolor … zapamiętany”) zawija się całą frazą (.st-z), a nie po słowie. */
 .wb-ekran .zp-stan{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 var(--s3);margin:0;padding:0 0 var(--s2);font-size:var(--t2);line-height:1.4}
 .wb-ekran .zp-stan:empty{display:none}
 .wb-ekran .zp-stan .st-t{flex:1 1 0;min-width:0}
 .wb-ekran .zp-stan .st-z{display:inline-block;max-width:100%;vertical-align:top}
 .wb-ekran .zp-stan .st-x{flex:none}

 /* wejście z reklamy: wybrany wariant na górze */
 .wb-ekran .rk{margin:0 calc(-1 * var(--s4));padding:var(--s4) var(--s4) 0;border-top:1px solid var(--line)}
 .wb-ekran .rk-t{margin:0 0 var(--s3);font:var(--w2) var(--t3)/1.3 var(--fd)}
 .wb-ekran .rk-inne{margin-top:var(--s5)}
 .wb-ekran .rk-rada{margin:var(--s3) 0 0;font-size:var(--t2);line-height:1.45}
 .wb-ekran .rk-rada b{font-weight:var(--w2)}
 .wb-ekran .rk-w{margin:var(--s5) 0 0;padding:var(--s4) 0 var(--s3);border-top:1px solid var(--line);font:var(--w2) var(--t3)/1.3 var(--fd)}
 .wb-ekran .rk-w+.zf{border-top:0;padding-top:0}

 /* lista wariantów: wiersze na całą szerokość, cienka linia między nimi */
 .op-b{font:var(--w2) var(--t1)/1.3 var(--fb);letter-spacing:0;text-transform:none;padding:0 var(--s1)}
 .wl-h{display:none}
 .wl-tel{margin:0 calc(-1 * var(--s4));border:0;border-bottom:1px solid var(--line);border-radius:0;background:var(--srf);overflow:visible}
 /* Pole ilości (q) stoi przy górnej krawędzi wiersza, a nie na środku: podpis pod nim rośnie przy wpisywaniu o jedną
    albo dwie linie (paczki po 500 szt., komplety), a wyśrodkowane pole podskakiwało wtedy o 8,5 px. Ostatni rząd (k)
    jest elastyczny i wyrównany do góry, więc gdy podpis przerośnie lewą kolumnę, nadmiar idzie pod kod, a nazwa i cena
    stoją w miejscu. */
 .wl-tel .wl-r.wt{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto 1fr;grid-template-areas:"w q" "p q" "k q";gap:2px var(--s3);align-items:center;padding:var(--s3) var(--s4);border-top:1px solid var(--line)}
 .wl-tel .wl-r:hover{background:transparent}
 .wl-tel .wl-r.wyr{background:var(--accbg)}
 .wt-w{grid-area:w;display:flex;align-items:center;gap:var(--s2);font:var(--w2) var(--t3)/1.3 var(--fb);color:var(--tx)}
 .wt-w b{font-weight:inherit}
 .wt-w .sw{width:18px;height:18px;flex:none}
 .wt-t{display:block;margin-top:2px;font:var(--w1) var(--t1)/1.35 var(--fb);color:var(--tx2)}
 .wt-p{grid-area:p;display:flex;align-items:baseline;flex-wrap:wrap;gap:0 var(--s2)}
 .wt-p b{font:var(--w2) var(--t4) var(--fb);font-variant-numeric:tabular-nums;color:var(--tx)}
 .wt-p small{font:var(--w1) var(--t1) var(--fb);color:var(--tx2);font-variant-numeric:tabular-nums}
 .wt-k{grid-area:k;align-self:start;font:var(--w1) var(--t1)/1.4 var(--fb);color:var(--tx2);font-variant-numeric:tabular-nums}
 .wt-k .op-b{margin:0 var(--s1) 0 0}
 .wt-kod{margin-left:var(--s1);font:var(--w1) var(--t1) var(--fm);white-space:nowrap}
 .wt-q{grid-area:q;align-self:start;display:flex;flex-direction:column;align-items:center;gap:var(--s1)}
 /* podpis pod polem przy paczce: czym jest liczba w polu i ile to sztuk („opakowań po 100 szt. = 2000 szt.”);
    szerokość bierze od pola z „−” i „+”, łamie się między kawałkami, suma sztuk pogrubiona */
 .wt-q .szt-pod{align-self:stretch;contain:inline-size;white-space:normal;text-align:center;font:var(--w1) var(--t1)/1.3 var(--fb);color:var(--tx)}
 .szt-k{white-space:nowrap}
 .szt-r{font-weight:var(--w2)}
 .wb .stp:has(.q[aria-invalid="true"]){border-color:var(--warn);box-shadow:inset 0 0 0 1px var(--warn)}
 /* zły wpis zostaje w polu cały: 48 px mieści cztery cyfry, więc „99999” wyglądało jak dozwolone „9999”;
    72 px mieści sześć pogrubionych cyfr (pomiar przy 375 px w tickecie M2-zle-ilosci-z-komunikatem) */
 .wb .stp .q[aria-invalid="true"]{width:72px;box-shadow:none}
 /* grupy po wymiarze: pasmo z nazwą w pierwszej linii, zdaniem w drugiej, „Pokaż” z prawej */
 .wl-tel .wl-g{padding:0!important;background:var(--srf);border-top:1px solid var(--line)}
 .wl-tel .gh-b{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n t" "m t";gap:0 var(--s3);align-items:center;min-height:var(--dotyk);padding:var(--s2) var(--s4);background:var(--soft);text-align:left}
 .wl-tel .gh-b .gn{grid-area:n;font:var(--w2) var(--t3)/1.3 var(--fd)}
 .wl-tel .gh-b .gm{grid-area:m;font:var(--w1) var(--t2)/1.4 var(--fb);color:var(--tx2)}
 .wl-tel .gh-b .gt{grid-area:t;margin:0;min-height:var(--dotyk);font:var(--w2) var(--t2) var(--fb);color:var(--acc)}
 .wb-ekran .zp-foot{display:grid;gap:var(--s1);margin-top:var(--s4);font-size:var(--t1);color:var(--tx2)}
 .wb-ekran .zp-foot [data-psum]{font-size:var(--t2);color:var(--tx)}
 .wb-ekran .zp-pusto{margin:0 0 var(--s4);font-size:var(--t2)}
 /* pytanie o kolor na kolejne produkty, pod wierszem */
 .wl-tel .pyt{gap:var(--s3);padding:var(--s3) var(--s4);border-top:1px solid #C6D4E2;font-size:var(--t2)}
 .pyt-t{font-weight:var(--w2)}

 /* koszyk na dole: pasek 56 px tylko z zawartością, rozwinięty jako arkusz nad przyciemnioną stroną */
 body.ma-koszyk{padding-bottom:var(--belka)}
 .zest.pusty{display:none}
 .zest{border:0;border-radius:0;box-shadow:0 -1px 0 var(--line),0 -6px 18px rgba(22,50,79,.10)}
 .zest.otw{border-radius:var(--r-arkusz) var(--r-arkusz) 0 0;box-shadow:0 -6px 24px rgba(14,33,54,.18)}
 .wb .zest-bar{height:var(--belka);box-sizing:border-box;padding:6px var(--s4);gap:var(--s3)}
 .wb .zb-t{display:flex;align-items:center;gap:var(--s2);min-height:var(--dotyk);padding:0}
 .wb .zb-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 .wb .zb-v{font:var(--w2) var(--t3) var(--fb)}
 .wb .zb-t .strz{margin-left:auto}
 .wb .zb-add{min-height:var(--dotyk);padding:0 var(--s5);font:var(--w2) var(--t2) var(--fb)}
 .zest-tlo:not([hidden]){display:block;position:fixed;inset:0;z-index:55;background:rgba(14,33,54,.45)}
 html:has(body.koszyk-otw){overflow:hidden}
 .zest-h,.zest-suma .zs-poz{display:none}
 .zl-tel{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s1);padding:var(--s3) var(--s4) var(--s4);border-top:1px solid var(--line)}
 .zlt-1{display:flex;align-items:flex-start;gap:var(--s2)}
 .zl-tel .zl-n{flex:1;display:flex;align-items:center;min-height:var(--dotyk);padding:0!important;text-decoration:none;font:var(--w2) var(--t2)/1.3 var(--fb);color:var(--tx)}
 .zlt-2{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3)}
 .zl-tel .zn{font:var(--w1) var(--t2)/1.4 var(--fb);color:var(--tx)}
 .zl-tel .zn .sw{width:14px;height:14px}
 .zl-tel .zk{font:var(--w1) var(--t1) var(--fm);color:var(--tx2)}
 .zlt-3{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s2)}
 .zl-tel .zu{flex:1;min-width:0;margin:0;font:var(--w1) var(--t1)/1.35 var(--fb);color:var(--tx2);white-space:normal}
 .zl-tel .zs{font:var(--w2) var(--t3) var(--fb)}
 /* „Usuń” pod kwotą, przy prawej krawędzi, jak na stronie koszyka: napis zajmuje 24 px, pole dotyku ma 44 px
    (niewidoczne ::before, 8 px w górę i 12 px w dół, w dolny margines pozycji), więc wiersz ilości nie rośnie */
 .zlt-w{flex:none;display:flex;flex-direction:column;align-items:flex-end}
 .zl-tel .zl-usun{position:relative;z-index:1;display:flex;align-self:flex-end;align-items:center;min-height:24px;margin:0 -8px -4px 0;padding:0 8px;font:var(--w1) var(--t1)/1.4 var(--fb)}
 .zl-tel .zl-usun::before{content:"";position:absolute;inset:-8px 0 -12px}
 .zest-stopka{background:var(--srf);box-shadow:0 -1px 0 var(--line)}
 .zest-suma{gap:2px;padding:var(--s3) var(--s4) var(--s4);font-size:var(--t2)}
 .zest-suma b{font:var(--w2) var(--t4) var(--fb)}
}

/* ===== 10. Nadpisania katalog.css =====
   katalog.css jest wspólny dla kilku stron, więc go nie ruszamy. Tu jest wszystko, co wariant B
   zmienia w jego elementach. Blok stoi na końcu pliku, żeby przy równej wadze selektora wygrywał. */
/* przewijanie (html scroll-padding-top z katalog.css): miejsce na przyklejone paski zmierzone
   przez skrypt, u góry i na dole, i nic więcej; żaden element nie dokłada własnego scroll-margin */
html{scroll-padding:calc(var(--pasek-gora) + var(--odstep-przew)) 0 calc(var(--pasek-dol) + var(--s2))}
/* nagłówek treści (.th1, .sortbox, .lead) i nagłówki grup (.sec); .th1.zkodu to wejście z reklamy (nie .kod: tę klasę
   katalog.css daje kodom produktu, z krojem o stałej szerokości) */
.th1{align-items:center}
.th1 .sortbox{margin-left:auto;height:38px;border:1.5px solid var(--line);border-radius:var(--r);background:var(--srf)}
.th1.zkodu{flex-direction:column;align-items:flex-start;gap:var(--s1)}
.th1.zkodu h1{font-size:22px;line-height:1.25;max-width:60ch}
.th1-k{font-family:var(--fm)}
/* dopisek szukania w nagłówku: zawsze w nowym wierszu pod tytułem, sortowanie w tym wierszu po prawej */
.th1.z-popr{row-gap:0}
.th1.z-popr::after{content:"";flex-basis:100%;order:1}
.th1.z-popr .szukaj-popr,.th1.z-popr .sortbox{order:2}
.th1.z-popr .szukaj-popr{margin:var(--s1) 0 0}
.th1.z-popr .sortbox{margin-top:var(--s1)}
.lead{font-size:13.5px}
.sec{margin:var(--s5) 0 10px}
.sec h2{font-size:var(--t3)}
/* „wszystkie produkty grupy”: pole kliknięcia 44 px, a ujemny margines oddaje nadmiar, więc linia grupy i tekst stoją jak dawniej
   (ticket M2-przycisk-wszystkie-produkty-grupy-44-px). 1.5em to wysokość linii tekstu przycisku; w dół pole sięga tylko
   o 10 px marginesu pod grupą, żeby nie wchodzić na kafelki, resztę dostaje od góry. */
.wb .sec button{padding:calc(var(--dotyk) - 1.5em - 10px) 0 10px;margin-block:calc(1.5em + 10px - var(--dotyk)) -10px}
/* fokus z klawiatury: ta sama obwódka także tam, gdzie katalog.css ma własną */
.wb :focus-visible{outline:2px solid var(--acc);outline-offset:2px}
/* komunikat (.toast) nad paskiem koszyka i nad paskiem narzędzi stref */
@media(max-width:1180px){
 .toast{bottom:84px}
 body:has(.nz-tray) .toast{bottom:142px}
}
@media(max-width:900px){
 /* ścieżka (.crumb), nagłówek kategorii (.th1) i nagłówki grup (.sec) */
 .wb .crumb{flex-wrap:nowrap;white-space:nowrap;overflow:hidden;align-items:center;gap:0 var(--s1);margin:0;font:var(--w1) var(--t1) var(--fb)}
 .wb .crumb button{min-height:var(--dotyk);padding:0 var(--s1);color:var(--tx2)}
 .wb .th1 h1{font:var(--w2) var(--t5)/1.2 var(--fd)}
 .wb .th1 h1 .c{font:var(--w1) var(--t1) var(--fb);color:var(--tx2);letter-spacing:0;white-space:nowrap}
 .wb .sec{flex-wrap:wrap;align-items:baseline;gap:0 var(--s3);margin:var(--s5) 0 var(--s2)}
 .wb .sec h2{flex:1 1 100%;font:var(--w2) var(--t4)/1.25 var(--fd)}
 .wb .sec .c{font:var(--w1) var(--t1) var(--fb)}
 .wb .sec button{margin-left:0;margin-block:0;min-height:var(--dotyk);padding:0;font:var(--w2) var(--t1) var(--fb)}
 /* kafelki kategorii na stronie startowej (.tiles, .tile) */
 .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
 .tile{flex-direction:column;align-items:flex-start;gap:var(--s2);padding:var(--s2)}
 .tile .ph{width:100%;height:72px}
 .tile .n{font:var(--w2) var(--t2)/1.3 var(--fb)}
 .tile .c{font:var(--w1) var(--t1) var(--fb)}
 /* komunikat nad paskiem koszyka */
 .toast{bottom:72px}
}

/* pozycja właśnie dodana do koszyka: krótkie rozjaśnienie, żeby oko ją złapało */
.zl.swieza{animation:zl-swieza 1.6s ease-out}
@keyframes zl-swieza{from{background:var(--accbg)}to{background:transparent}}
@media(prefers-reduced-motion:reduce){.zl.swieza{animation:none}}