/* Wspólne części stron wariantu B: katalog.html, koszyk.html i kasa.html. Nakłada się na katalog.css;
   po nim ładuje się arkusz strony (wariant-b.css albo koszyk.css), więc przy równej wadze selektora
   wygrywa strona. Tu nic nie wolno skopiować do arkusza strony: zmiana góry albo koła idzie tutaj
   i działa od razu na obu stronach.

   Części pliku:
   - Skala: pismo, odstępy, zaokrąglenia (zmienne dla obu stron)
   - Góra strony: pasek testowy z faktami o dostawie, nagłówek, pasek grup, belka telefonu
   - Pole ilości: bez strzałek przeglądarki, wpisana ilość w granatowej ramce, na telefonie „−” i „+”
   - Koło darmowej dostawy (kolo-dostawy.js)

   Progi szerokości jak w wariant-b.css: 900 telefon, 1100 bez mega menu, 1180 i 1380 węższy pasek grup. */

/* ===== Skala =====
   Pismo: 13, 15, 17, 20, 24 px; dwie grubości: 400 i 700. Odstępy: 4, 8, 12, 16, 24 px.
   Zaokrąglenia: 4 px drobne znaczki, 7 px pola i przyciski (--r z katalog.css), 10 px karty,
   12 px arkusz koszyka. Każdy dotyk co najmniej 44 px. Ta sama skala na komputerze
   i na telefonie; starsze wartości spoza niej zostały na komputerze do osobnej decyzji. */
:root{
 --t1:13px;--t2:15px;--t3:17px;--t4:20px;--t5:24px;--w1:400;--w2:700;
 --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;
 --r-znak:4px;--r-karta:10px;--r-arkusz:12px;
 --dotyk:44px;--belka:56px;
 /* paski przyklejone u góry i na dole: wartości wyjściowe, zanim skrypt je zmierzy;
    odstęp między paskiem a tym, do czego przewija skrypt */
 --pasek-gora:var(--topH);--pasek-dol:0px;--odstep-przew:var(--s4);
 /* obrys pól i przycisków drugorzędnych: kontrast 3:1 z bielą */
 --obr:#85919D;
 /* Kroje (te same wartości co w katalog.css): --fd nagłówki, --fb tekst i liczby, --fm wyłącznie kod produktu
    („NIT-000430”). Liczby, wymiary i ceny stoją krojem tekstu z cyframi tabelarycznymi (PLAN-KATALOGU.md, punkt 8). */
 --fd:"Archivo","Segoe UI",system-ui,sans-serif;--fb:"Geist","Segoe UI",system-ui,sans-serif;--fm:"Geist Mono",Consolas,"SF Mono",monospace;
}
/* Jedno pismo: katalog.css (wspólny ze starymi stronami) daje krój o stałej szerokości liczbom przy kafelkach, grupach,
   filtrach, w nagłówkach wierszy tabeli i w przeliczeniu pod polem ilości. W wariancie B tylko kod produktu ma --fm. */
.wb :is(.tile .c,.sec .c,.ml .c,.ci .c,.gb .c,.cb .c,.chip .c,.chip.dim,.fl h4 small,.fotw .n,.fstopka .stan,.swr .more,.pr b,.seg button,.cartbox .v,.cartbox .n,.card>.bar .r,.cecha b,th.rh,td.rh,th.rh b,th.rh .op,.szt,.ksw .more,.zp-cechy,.zc .c){font-family:var(--fb);font-variant-numeric:tabular-nums}

/* ===== Góra strony =====
   Pasek testowy z faktami o dostawie, nagłówek (znak, szukanie, koszyk) i pasek grup z mega menu;
   na telefonie belka z przyciskiem kategorii i szukaniem (szuflada z drzewem jest tylko w wariant-b.css).
   Logo to plik logo.svg; ikona koszyka to rysunek SVG w katalog.html i koszyk.html, kreską 2 px.
   Odmianę słowa przy liczbie pozycji i pusty koszyk ustawia sklep.js (skrotKoszyka). */

/* pasek testowy: jedna cienka linia; napis o sklepie testowym z lewej, fakt o dostawie z prawej (tam, gdzie go podajemy;
   o terminie wysyłki pasek nie mówi, ten stoi w regulaminie, na stronie dostawy i w e-mailu po wpłacie).
   Po wyjściu z trybu testowego sklep.js chowa sam napis, fakt o dostawie zostaje. */
.wb .testbar{padding:0;text-align:left;background:var(--soft);font:var(--w1) var(--t1)/20px var(--fb);color:var(--tx)}
.tb{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0 var(--s5);min-height:31px}
.tb-test b{font-weight:var(--w2)}
.tb-fakty{display:flex;flex-wrap:wrap;gap:0 var(--s5);margin-left:auto}
/* strona bez faktu o dostawie (koszyk, 404, strony prawne) po wyjściu z trybu testowego nie ma w pasku nic: znika w całości */
.wb .testbar:not(:has(.tb-fakty)):has(#testbar[hidden]){display:none}
.wb .testbar:not(:has(.tb-fakty)):not(:has(.tb-test)){display:none}

/* nagłówek: logo „60na40” to rysunek logo.svg (granatowe cyfry, małe pomarańczowe „na”), pod nim dopisek
   pismem strony; wysokość 31 px daje logo tę samą szerokość co dopisek. Rysunek ma w viewBox 2 jednostki marginesu z każdej strony, żeby kreski nie dotykały krawędzi
   obrazka (przy ułamkowym położeniu brzeg bywał rysowany jako pasek); --lg to wysokość samych cyfr, a ujemny margines
   zwraca ten margines, więc układ nagłówka się nie zmienia. Na telefonie dopisek stoi obok logo,
   na linii cyfr, żeby wiersz marki nie rósł. Wymiana logo to podmiana jednego pliku, bez przebudowy stron */
.wb .brand{gap:var(--s3)}
.wb .brand .logo{--lg:31px;display:block;width:auto;height:calc(var(--lg)*48/44);aspect-ratio:212/48;margin:calc(var(--lg)*-2/44)}
.wb .brand .brand-t{display:flex;flex-direction:column;gap:4px;font:inherit;letter-spacing:0}
.wb .brand-t b{display:block;font:800 var(--t4)/1 var(--fd);letter-spacing:-.02em;color:var(--acc)}
.wb .brand-t small{margin:0;font:var(--w1) var(--t1)/1.2 var(--fb);letter-spacing:0;color:var(--tx2)}
.wb .search{height:46px;box-sizing:border-box}
/* przycisk czyszczenia pola szukania (runda K2c): widać go tylko przy tekście (puste pole pokazuje podpowiedź),
   w nagłówku i w belce telefonu; systemowy krzyżyk pola schowany, żeby nie było dwóch */
.search input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.search .czysc,.mbar-szukaj .czysc{position:relative;flex:none;width:40px;padding:0;border:0;background:transparent;color:var(--tx2);cursor:pointer}
.search input:placeholder-shown+.czysc,.mbar-szukaj input:placeholder-shown+.czysc{display:none}
.czysc::before,.czysc::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;margin:-1px 0 0 -7px;border-radius:1px;background:currentColor;transform:rotate(45deg)}
.czysc::after{transform:rotate(-45deg)}
.search .czysc:hover,.mbar-szukaj .czysc:hover{background:transparent;color:var(--acc)}
.wb .czysc:focus-visible{outline:2px solid var(--acc);outline-offset:-6px}
/* Link do karty produktu w tekście, który klient i tak czyta (kod wariantu w panelu katalogu i w koszyku, nazwa w koszyku
   i w kasie). Pismo i kolor zostają jak w otoczeniu, o linku mówi cienkie podkreślenie, stałe, nie dopiero po najechaniu;
   najechanie daje akcent, fokus klawiatury obrys `.wb :focus-visible`. Stałe podkreślenie znaczy zawsze „karta produktu”:
   nazwa grupy w koszyku, która prowadzi do panelu w katalogu (`a.kg-n` bez `.karta`), ma je tylko po najechaniu.
   Wyjątek: „Zobacz pełny opis i dane techniczne” (a.zp-karta) stoi sam w wierszu i jest pogrubionym granatem jak link na karcie
   produktu: z myszą podkreślenie pojawia się po najechaniu i przy fokusie, bez najechania (dotyk) stoi od razu. */
.wb a.kod-karta,.wb a.zp-karta,.wb a.kg-n.karta,.wb a.z-poz-n{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
@media(hover:hover){
 .wb a.zp-karta{text-decoration:none}
 .wb a.zp-karta:is(:hover,:focus-visible){text-decoration:underline}
}
.wb a.kod-karta:hover,.wb a.zp-karta:hover,.wb a.kg-n.karta:hover,.wb a.z-poz-n:hover{color:var(--acc);text-decoration-thickness:2px}
/* „Zobacz pełny opis i dane techniczne” stoi sam w wierszu pod opisem i jest wezwaniem do działania, nie kodem w tekście:
   styl linku z karty produktu (pogrubiony granat), bo bez podkreślenia w spoczynku czarny zwykły napis nie wyglądałby jak link. */
.wb a.zp-karta{color:var(--acc);font-weight:var(--w2)}
/* Obrys fokusu pola wychodził poza pole i ramka formularza go ucinała; widać było tylko prawą kreskę, dotąd schowaną
   pod przyciskiem „Szukaj”, a przy krzyżyku stała osobno. Fokus w polu pokazuje kursor i ramka formularza. */
.wb .search input:focus-visible,.wb .mbar-szukaj input:focus-visible{outline:none}
@media(max-width:900px){
 .mbar-szukaj .czysc{width:36px}
 .mbar-szukaj input:not(:placeholder-shown){padding-right:0}
}
/* skrót do koszyka: ikona koszyka z liczbą pozycji, pod napisem kwota zwykłym pismem z cyframi
   tabelarycznymi; wysokość pola szukania, cienka ramka. Pusty koszyk: bez liczby. */
.wb .cartbox{gap:var(--s4);height:46px;box-sizing:border-box;padding:0 18px 0 var(--s3);border:1px solid var(--line);background:var(--srf);color:var(--tx)}
.wb .cartbox:hover{border-color:var(--acc)}
/* szerokość skrótu stoi od pierwszego obrazu: liczba pozycji i kwota dochodzą po wczytaniu cen i nie przesuwają szukania */
@media(min-width:901px){.wb .cartbox{min-width:188px}}
/* liczba pozycji i kwota (a z nią „brutto”) pokazują się dopiero z cenami (sklep.js stawia data-cena): wcześniej widać było „, 0 pozycji” i „0,00 zł” z HTML albo „…”,
   a zmiana szerokości liczby przesuwała „brutto”. Niewidoczne zostawia miejsce, więc nic się nie przesuwa */
.wb .cartbox:not([data-cena]) :is(.kosz-ile,.v){visibility:hidden}
.kosz-ik{position:relative;display:grid;place-items:center;width:28px;height:28px;color:var(--acc)}
.kosz-ik svg{width:24px;height:24px}
.wb .cartbox[data-pusty] .kosz-ile{display:none}
.wb .cartbox .v small{font:var(--w1) var(--t1) var(--fb);color:var(--tx2)}
.kosz-t{display:flex;flex-direction:column;gap:1px}
.wb .cartbox .l{font:var(--w1) var(--t1)/1.2 var(--fb);color:var(--tx2)}
.wb .cartbox .v{font:var(--w2) var(--t2)/1.25 var(--fb);font-variant-numeric:tabular-nums;color:var(--tx)}

/* pasek grup (strefa zaakceptowana): wygląd zostaje; wyższy o kilka pikseli, większe pismo,
   liczby zwykłym pismem jak w drzewie. „Wszystkie kategorie”: ciemniejszy blok jak dotąd, pogrubiony,
   ze strzałką rozwijania; otwarte mega menu łączy się z nim jak zakładka (biały blok nad białym menu). */
.wb .cats>.in{height:50px}
.wb .ci>button,.wb .ci>.cg{font-size:14px}
.wb .ci>button .c,.wb .ci>.cg .c{font:var(--w1) 12px var(--fb);font-variant-numeric:tabular-nums;color:rgba(255,255,255,.75)}
.wb .mega{top:100%}
.wb .ml .c{font:var(--w1) 12px var(--fb);font-variant-numeric:tabular-nums}
/* rozwijane menu grupy: pozycje około 10% większe (38 na 42 px miniatury, 13,5 na 15 px nazwy), lista „Wszystkie kategorie” bez zmian */
.wb .mg .ml{font-size:15px}
.wb .mg .ml .ph{width:42px;height:42px}
.wb .ci.all{margin-right:0}
/* katalog.css daje 2 px przerwy między pozycjami paska; bloki mają się stykać, bez szczeliny paska między „Wszystkie kategorie” a bieżącą grupą */
.wb .cats .in{gap:0}
.wb .ci.all>button{gap:10px;font-weight:var(--w2)}
.wb .ci.all>button::before{border-color:currentColor;background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat}
.wb .ci.all>button::after{content:"";width:6px;height:6px;margin-left:2px;border-right:1.75px solid currentColor;border-bottom:1.75px solid currentColor;transform:rotate(45deg) translate(-1px,-2px)}
@media(min-width:1101px){
 .wb:not(.mega-zamkniete) .ci.all:is(:hover,.otw)>button{background:var(--srf);color:var(--acc)}
 .wb:not(.mega-zamkniete) .ci.all:is(:hover,.otw)>button::after{transform:rotate(-135deg) translate(-1px,-1px)}
}

/* belka z przyciskiem kategorii i szukaniem działa tylko na telefonie */
.mbar,.mbar-szukaj,.mbar-wroc{display:none}

/* Nadpisania katalog.css w górze strony i w polu ilości. */
/* mega menu (.mega): „Wszystkie kategorie” otwiera się też kliknięciem, dotykiem i klawiaturą
   (klasa .otw, bo katalog.css otwiera je tylko najechaniem i fokusem); po wyborze kategorii
   i po zamknięciu znika także pod kursorem, żeby nie zasłaniało półki */
.wb .ci.all.otw .mega{display:block}
.mega-zamkniete .mega{display:none!important}
/* pola ilości (.q): bez strzałek przeglądarki, bo zjadały miejsce i ucinały cyfry; wpisana ilość
   ma granatową ramkę i pogrubioną liczbę zamiast jasnego tła z katalog.css */
.wb input[type=number]{-moz-appearance:textfield;appearance:textfield}
.wb input[type=number]::-webkit-inner-spin-button,.wb input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.wb .q.on{background:var(--srf);border-color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc);color:var(--acc);font-weight:var(--w2)}
/* próbka koloru (.sw) jako kółko: kwadrat z ramką wyglądał jak pole do zaznaczenia */
.wb .sw{border-radius:50%}
/* pasek grup (.cats, .ci) mieści się w 1280 px: węższe odstępy zamiast uciętej ostatniej grupy */
@media(max-width:1380px) and (min-width:901px){
 .wb .ci>button,.wb .ci>.cg{padding:0 8px;gap:6px;font-size:13.5px}
 .wb .ci.all{margin-right:0}
 .wb .ci.all>button{padding:0 12px;gap:var(--s2)}
}
/* węższy ekran komputera: pasek grup przewija się w bok zamiast ucinać ostatnie grupy */
@media(max-width:1180px) and (min-width:901px){.wb .cats .in{overflow-x:auto;scrollbar-width:none}.wb .cats .in::-webkit-scrollbar{display:none}}
@media(max-width:900px){
 /* góra: jedna przyklejona belka z kategoriami i szukaniem; na ekranie produktu „Wróć”
    jako przycisk tekstowy, nazwa w belce dopiero po zjechaniu nagłówka */
 .mbar{display:flex;position:sticky;top:0;z-index:45;align-items:center;gap:var(--s2);min-height:var(--belka);box-sizing:border-box;padding:var(--s1) var(--s4);background:var(--srf);border-bottom:1px solid var(--line)}
 .mbar-t{display:none}
 .mbar-kat{display:inline-flex;align-items:center;gap:var(--s2);flex:none;min-height:var(--dotyk);padding:0 10px;border:1.5px solid var(--obr);border-radius:var(--r);background:var(--srf);color:var(--acc);font:var(--w2) var(--t2) var(--fb);white-space:nowrap}
 .ikona-menu{width:16px;height:12px;border-top:2px solid currentColor;border-bottom:2px solid currentColor;background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat}
 .mbar-szukaj{display:flex;flex:1;min-width:0;height:var(--dotyk);box-sizing:border-box;border:1.5px solid var(--obr);border-radius:var(--r);overflow:hidden;background:var(--srf)}
 .mbar-szukaj:focus-within{border-color:var(--acc)}
 .mbar-szukaj input{flex:1;min-width:0;border:0;padding:0 var(--s2);font:var(--w1) var(--t3) var(--fb);color:var(--tx);background:transparent;outline:none}
 .mbar-szukaj input::placeholder{color:var(--tx2)}
 .mbar-szukaj button{border:0;background:var(--acc);color:#fff;font:var(--w2) var(--t2) var(--fb);padding:0 10px}
 .wb-ekran .mbar-szukaj{display:none}
 .mbar-wroc:not([hidden]),.wb-ekran .mbar-wroc{display:inline-flex;align-items:center;gap:var(--s2);flex:none;min-height:var(--dotyk);margin-left:calc(-1 * var(--s1));padding:0 var(--s2) 0 var(--s1);border:0;background:transparent;color:var(--acc);font:var(--w2) var(--t2) var(--fb)}
 .strz-l{width:9px;height:9px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-left:3px}
 .wb-ekran .mbar-t{display:-webkit-box;flex:1;min-width:0;font:var(--w2) var(--t2)/1.25 var(--fb);color:var(--tx);-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;opacity:0;visibility:hidden;transition:opacity .15s,visibility .15s}
 .nazwa-w-belce .mbar-t{opacity:1;visibility:visible}
 .wb-ekran .mbar-kat{width:var(--dotyk);padding:0;justify-content:center;margin-left:auto}
 .wb-ekran .mbar-kt{display:none}

 /* pole ilości: „−”, liczba, „+” w jednym obrysie, każdy dotyk 44 px */
 .stp{display:inline-flex;align-items:stretch;border:1.5px solid var(--obr);border-radius:var(--r);background:var(--srf)}
 .stp:has(.q.on){border-color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc)}
 .stp-b{width:var(--dotyk);height:var(--dotyk);display:grid;place-items:center;padding:0;border:0;background:transparent;color:var(--acc);font:var(--w1) var(--t5)/1 var(--fb)}
 .stp-b:first-child{border-radius:var(--r) 0 0 var(--r)}
 .stp-b:last-child{border-radius:0 var(--r) var(--r) 0}
 .stp-b:active{background:var(--soft)}
 .stp-b:disabled{opacity:.4}
 .stp .qw{position:relative}
 .stp .q,.stp .q.duze{width:48px;height:var(--dotyk);box-sizing:border-box;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);border-radius:0;padding:0 2px;background:transparent;font:var(--w1) var(--t3) var(--fb);color:var(--tx)}
 .stp .q::placeholder{color:var(--tx2)}
 .wb .stp .q.on{box-shadow:none}
 .wb .stp .q:focus-visible{outline-offset:-2px}
 .stp .szt{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:3px;font:var(--w1) var(--t1)/1.2 var(--fb);color:var(--tx2)}

 /* pismo strony, marginesy, pasek testowy i nagłówek: marka bez pudełka koszyka (koszyk jest
    na dole), bez szukania i paska grup (są w belce); na ekranie produktu bez wiersza marki */
 .wb{font:var(--w1) var(--t2)/1.45 var(--fb)}
 .wb .in{padding:0 var(--s4)}
 /* pasek testowy: „Sklep testowy.” z faktem o dostawie, a gdy się nie mieszczą, fakt w drugiej linii;
    dalszy ciąg napisu o sklepie testowym mówi stopka */
 .wb .testbar{font:var(--w1) var(--t1)/1.35 var(--fb);padding:var(--s1) 0}
 .tb{min-height:0;justify-content:flex-start;gap:0 var(--s3)}
 .tb-dl{display:none}
 .tb-fakty{display:contents}
 .wb .cats,.wb .head .search,.wb .cartbox{display:none}
 .wb .head .in{height:auto;flex-wrap:nowrap;gap:var(--s3);padding:2px var(--s4)}
 .wb .brand{min-height:var(--dotyk);gap:var(--s2)}
 .wb .brand .brand-t{flex-direction:row;align-items:baseline;gap:var(--s2)}
 .wb .brand .logo{--lg:22px}
 .wb .brand-t b{font-size:var(--t3)}
 .wb-ekran .head{display:none}
}
/* najwęższe telefony: logo z dopiskiem obok (257 px) nie mieści się w wierszu z ikoną koszyka na karcie produktu,
   więc dopisek znika i zostaje samo logo */
@media(max-width:359px){
 .wb .brand-t small{display:none}
}

/* ===== Koło darmowej dostawy =====
   Okrąg wypełnia się granatem razem z sumą produktów brutto do progu; przy dostawie gratis pełny,
   ze znakiem zaznaczenia w środku. Zawsze obok zdanie z kwotą: koło nie jest jedynym nośnikiem
   informacji. Pas przesuwa się płynnie przy zmianie koszyka, bez ruchu przy prefers-reduced-motion.
   Rozmiary: „male” w panelu i pasku koszyka (28 px), „duze” na stronie koszyka (48 px). */
.kolo{display:flex;align-items:center;gap:var(--s3);min-width:0;text-align:left}
.kolo-svg{flex:none;width:var(--kolo,28px);height:var(--kolo,28px)}
.kolo-tor,.kolo-pas{fill:none;stroke-width:5;transform:rotate(-90deg);transform-origin:center;transform-box:fill-box}
.kolo-tor{stroke:var(--line)}
.kolo-pas{stroke:var(--acc);transition:stroke-dashoffset .6s cubic-bezier(.16,1,.3,1)}
.kolo-ok{fill:none;stroke:var(--acc);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.kolo.gratis .kolo-ok{opacity:1}
/* pełne koło bez szwu na górze, gdzie kreska zaczyna się i kończy. Kreskę zdejmujemy dopiero po przejściu (stroke-dasharray
   ze zwłoką równą czasowi przejścia), żeby pas dopełnił się tym samym ruchem co przy każdej innej zmianie; w drugą stronę
   (dostawa przestaje być gratis) kreska wraca od razu i pas cofa się zwykłym przejściem. */
.kolo.gratis .kolo-pas{stroke-dasharray:none;transition:stroke-dashoffset .6s cubic-bezier(.16,1,.3,1),stroke-dasharray 0s linear .6s allow-discrete}
.kolo-tx{display:flex;flex-direction:column;min-width:0}
.kolo-t{font:var(--w1) var(--t1)/1.35 var(--fb);color:var(--tx)}
.kolo-t b{font-weight:var(--w2);font-variant-numeric:tabular-nums;white-space:nowrap}
.kolo-duze{--kolo:48px;gap:var(--s3)}
.kolo-duze .kolo-t{font-size:var(--t2);line-height:1.4}
@media(prefers-reduced-motion:reduce){.kolo-pas,.kolo.gratis .kolo-pas{transition:none}}

/* ===== Cechy pozycji z separatorem „·” =====
   Koszyk, kasa, koszyk boczny, arkusz na telefonie i zestawienie z linku (pozycja-widok.js, cechyHtml; PLAN-KATALOGU.md,
   punkt 15). Każdy kawałek ma z lewej miejsce na separator (--sep, tyle co „ · ” zwykłym tekstem) i tam go stawia. Cały
   blok (.cechy-l) jest przesunięty o --sep w lewo i z lewej przycięty o --sep, więc separator kawałka, który zaczyna
   linię, znika: „·” nigdy nie kończy ani nie zaczyna linii. Kawałek łamany w środku ma --sep z lewej w każdej linii,
   więc nic z niego nie ginie pod przycięciem. .cf-n trzyma kolor z cechą przed nim. */
.cechy-l{--sep:.8em;display:inline-flex;flex-wrap:wrap;align-items:center;min-width:0;margin-left:calc(-1 * var(--sep));clip-path:inset(0 0 0 var(--sep))}
.cechy-l>.cf{position:relative;min-width:0;padding-left:var(--sep);white-space:normal}
.cf-s{display:inline-block;width:var(--sep,.8em);text-align:center}
.cechy-l>.cf>.cf-s:first-child{position:absolute;left:0}
/* Kolor sklejony z cechą przed nim: cecha i separator się nie łamią, a za długa nazwa koloru („stal nierdzewna A2”)
   łamie się obok swojej kropki, zamiast wyjść poza kolumnę. */
.cf-n{display:inline-flex;align-items:flex-start;max-width:100%}
.cf-p,.cf-n>.cf-s{flex:none;white-space:nowrap}
.cf-k{min-width:0}
.cf-k .kc{flex-wrap:nowrap;align-items:flex-start}
.cf-k .kc .sw{margin-top:.2em}

/* ===== Baner zgody na cookies Google i okno ustawień (pomiar.js) =====
   Baner: nakładka przy dolnej krawędzi, która niczego nie przesuwa, nie przyciemnia strony i jej nie blokuje. Rysuje się tylko wtedy,
   gdy sklep ma skonfigurowany pomiar Google. Telefon: pasek na pełną szerokość nad dolnym paskiem koszyka (--zgoda-dol mierzy
   pomiar.js), z linią u góry i cieniem jak .k-pasek. Komputer: karta w lewym dolnym rogu (w kasie w prawym, żeby nie zasłaniać
   przycisku zamówienia), z cieniem jak .mega. „Zgadzam się” i „Odrzucam” to ten sam przycisk (.zgoda-p). Otwarty koszyk na
   telefonie przykrywa baner (jest wyżej).
   Okno ustawień: okno modalne jak otwarty koszyk. Tło rgba(14,33,54,.45) jak .zest-tlo i .szuf-tlo, warstwa nad paskiem koszyka (60)
   i szufladą (80), pod komunikatem (90); strona pod spodem nie przewija się (html:has) i nie przyjmuje fokusu ani dotyku (inert).
   Telefon: arkusz od dołu na pełną szerokość, promień --r-arkusz u góry, cień jak .zest.otw. Komputer: okno na środku, 440 px,
   promień --r-karta, cień jak .mega. Nagłówek z przyciskiem „Zamknij” jak .szuf-head, przyciski na dole, treść przewija się w środku. */
.zgoda{position:fixed;z-index:58;left:var(--s4);bottom:var(--s4);box-sizing:border-box;width:min(440px,calc(100vw - 2 * var(--s4)));max-height:calc(100vh - 2 * var(--s4));overflow-y:auto;padding:var(--s4);background:var(--srf);color:var(--tx);border:1px solid var(--line);border-radius:var(--r-karta);box-shadow:0 18px 40px rgba(15,20,25,.16);font:var(--w1) var(--t2)/1.45 var(--fb)}
.zgoda[hidden]{display:none}
.zgoda.po-prawej{left:auto;right:var(--s4)}
.zgoda-t{margin:0;color:var(--tx)}
.zgoda-t a{color:var(--acc);text-decoration:underline;text-underline-offset:3px}
.zgoda-ak{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin-top:var(--s3)}
/* przyciski drugorzędne z wartościami .secondary (zakupy-b.css): obrys --obr, granatowy napis */
.zgoda-p,.zgoda-x{min-height:var(--dotyk);box-sizing:border-box;padding:0 var(--s3);border:1.5px solid var(--obr);border-radius:var(--r);background:var(--srf);color:var(--acc);font:var(--w2) var(--t2)/1.2 var(--fb);cursor:pointer}
.zgoda-p{flex:1 1 0;min-width:96px}
.zgoda-p:hover,.zgoda-x:hover{border-color:var(--acc)}
/* przycisk główny jak .primary z kasy: granatowe tło, biały napis, 48 px */
.zgoda-g{display:flex;align-items:center;justify-content:center;min-height:48px;box-sizing:border-box;padding:0 var(--s5);border:0;border-radius:var(--r);background:var(--acc);color:#fff;font:var(--w2) var(--t2)/1.2 var(--fb);cursor:pointer}
.zgoda-g:hover{background:var(--acc2)}
.zgoda-u{flex:0 0 auto;min-height:var(--dotyk);padding:0 var(--s1);border:0;background:transparent;color:var(--acc);font:var(--w2) var(--t2)/1.2 var(--fb);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.zgoda :focus-visible,.zgoda-okno :focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.zgoda-okno .zgoda-h:focus-visible{outline:none}
.zgoda-modal{position:fixed;inset:0;z-index:85;display:flex;align-items:center;justify-content:center;padding:var(--s4);box-sizing:border-box}
.zgoda-modal[hidden]{display:none}
.zgoda-tlo{position:absolute;inset:0;background:rgba(14,33,54,.45)}
.zgoda-okno{position:relative;box-sizing:border-box;display:flex;flex-direction:column;width:min(440px,100%);max-height:100%;background:var(--srf);color:var(--tx);border-radius:var(--r-karta);box-shadow:0 18px 40px rgba(15,20,25,.16);font:var(--w1) var(--t2)/1.45 var(--fb)}
.zgoda-nag{flex:none;display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s2) var(--s4);border-bottom:1px solid var(--line)}
.zgoda-h{margin:0;font:var(--w2) var(--t4)/1.2 var(--fd);color:var(--tx)}
.zgoda-tresc{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:var(--s4)}
.zgoda-pole{display:flex;gap:var(--s3);align-items:flex-start;min-height:var(--dotyk);margin-top:var(--s3);cursor:pointer}
.zgoda-pole input{flex:none;width:24px;height:24px;margin:10px 0 0;accent-color:var(--acc)}
.zgoda-pt{display:flex;flex-direction:column;gap:2px;padding:var(--s2) 0}
.zgoda-pt span{font-size:var(--t1);color:var(--tx2)}
.zgoda-ak-ust{flex:none;flex-direction:column;align-items:stretch;flex-wrap:nowrap;margin:0;padding:var(--s3) var(--s4) var(--s4);border-top:1px solid var(--line)}
.zgoda-ak-ust .zgoda-p,.zgoda-ak-ust .zgoda-g{flex:none;width:100%}
body:has(.zest.otw) .zgoda{display:none}
html:has(body.zgoda-otw){overflow:hidden}
@media(max-width:900px){
 .zgoda,.zgoda.po-prawej{left:0;right:0;width:auto;bottom:var(--zgoda-dol,0px);max-height:calc(100vh - var(--zgoda-dol,0px));padding:var(--s3) var(--s4);border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:0 -8px 24px rgba(15,20,25,.10)}
 .zgoda.bez-paska{padding-bottom:calc(var(--s3) + env(safe-area-inset-bottom))}
 .zgoda-modal{align-items:flex-end;padding:0}
 .zgoda-okno{width:100%;max-height:calc(100vh - var(--s5));max-height:calc(100dvh - var(--s5));padding-bottom:env(safe-area-inset-bottom);border-radius:var(--r-arkusz) var(--r-arkusz) 0 0;box-shadow:0 -6px 24px rgba(14,33,54,.18)}
}
/* wąski telefon: „Ustawienia” w osobnym wierszu pod przyciskami, żeby „Zgadzam się” nie łamało się na dwie linie; od 401 px mieści się w jednym rzędzie */
@media(max-width:400px){.zgoda-ak:not(.zgoda-ak-ust) .zgoda-u{flex:1 1 100%;text-align:left}}
html{padding-bottom:var(--zgoda-wys,0)}
/* przy otwartym banerze fokus z klawiatury nie chowa się pod nim */
:root:has(.zgoda:not([hidden])){scroll-padding-bottom:calc(var(--pasek-dol,0px) + var(--zgoda-wys,0px) + var(--s2))}
.legal-footer a[data-zgoda-ustawienia][hidden]{display:none}