); pod nią do stopki
--gap-block — z reguły layoutu .foot (ten sam odstęp co między kartami sekcji strony głównej) */
.nlband{background:none;margin:var(--gap-sec) 0 0;} /* odstęp pod kartą do stopki daje .foot (margin-top, --gap-block) */
.nlband .wrap{--nl-gut:26px;position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);
grid-template-areas:"ilu head" "ilu form";column-gap:var(--sp-6);row-gap:var(--sp-4);align-items:center;text-align:left;
padding:var(--sp-5) calc(var(--nl-gut) + var(--sp-5));}
.nlband .wrap::before{content:"";position:absolute;inset:0 var(--nl-gut);z-index:-1;background:var(--card-bg);border:var(--card-border);border-radius:var(--card-radius);}
.nlband .nl-ilu{grid-area:ilu;align-self:stretch;display:flex;align-items:center;}
.nlband .nl-ilu img{display:block;width:100%;height:auto;}
.nlband .nl-head{grid-area:head;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-3);align-self:end;}
.nlband .nl-head .nl-lead{margin:0;font-size:var(--fs-md);line-height:1.5;color:var(--ink);text-wrap:pretty;}
.nlband .nl-form{grid-area:form;align-self:start;}
@media (max-width:860px){
.nlband .wrap{--nl-gut:16px;grid-template-columns:minmax(0,1fr);grid-template-areas:"ilu" "head" "form";padding:var(--sp-4) calc(var(--nl-gut) + var(--sp-4));}
.nlband .nl-ilu{justify-content:center;}
.nlband .nl-ilu img{max-width:240px;}
.nlband .nl-t{font-size:var(--fs-xl);}
}
/* KAFEL (strona główna): klasy mini-hero — jasna góra (etykieta ⌜⌟ + podtytuł), formularz, ilustracja na styku zachodząca na
czerwony pasek marki. To NIE link (w środku formularz): bez hovera tła i bez żółtej ramki hover w kontraście.
Selektory .mhero.mh-nl: blok mini-hero stoi w arkuszu PÓŹNIEJ z tą samą szczegółowością (.mhero .mh-…) — inaczej on wygrywa. */
.mhero.mh-nl .mh-top{padding-bottom:var(--sp-3);}
.mhero.mh-nl .mh-t{margin:6px 13px 0;} /* jak .mhero .mh-t, z prawym marginesem na wystający ⌟ */
.mhero.mh-nl .mh-s{max-width:none;-webkit-line-clamp:unset;margin:0;}
.mhero.mh-nl .nl-form{position:relative;z-index:2;padding:0 var(--sp-5);}
/* ilustracja (Szymon po #405: „obrazek jest za bardzo wyciągnięty”): NIE wypełnia wolnego miejsca kafla (dawniej pudełko img
= cała wolna wysokość × szerokość, 1,8:1 na desktopie, 3,4:1 na tablecie) — własne proporcje płótna SVG 4:3, szerokość do
--nl-art-w, wyśrodkowana nad paskiem; wolne miejsce zostaje nad nią */
.mhero.mh-nl{--nl-art-w:240px;}
.mhero.mh-nl .mh-art{display:flex;align-items:flex-end;justify-content:center;min-height:0;}
.mhero.mh-nl .mh-art img{position:static;display:block;width:min(100% - 2 * var(--sp-5),var(--nl-art-w));height:auto;aspect-ratio:4/3;margin:0;object-fit:contain;}
@media (hover:hover){.mhero.mh-nl:hover{background-color:var(--mh-bg);}}
@media (hover:hover){:root[data-contrast="more"] .mhero.mh-nl:hover{border-color:var(--hc-fg);}}
/* rząd [Promocje — rail | kafel newslettera] w KOLUMNACH HERO (Szymon po #405: szerokość kafla = box PROMOCJE pod banerem):
te same kolumny (--hero-side | 1fr | 1fr) i odstęp (--gap-block) co .hero, rail na dwóch pierwszych, kafel w trzeciej —
więc kafel ma dokładnie szerokość .s-promo; bez kolumny bocznej w hero (.no-side: 1fr | 1fr) — po połowie, jak tam.
Bez Promocji (pusta kategoria) kafel na całą szerokość; mobile: Promocje nad kafelem (produkty przed zapisem). */
.pr-row{display:grid;grid-template-columns:var(--hero-side) minmax(0,1fr) minmax(0,1fr);grid-template-areas:"promo promo nl";gap:var(--gap-block);align-items:stretch;margin-top:var(--gap-block);}
.home-page:has(> .hero.no-side) .pr-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"promo nl";}
.home-page .pr-row:not(:has(> .sec)){grid-template-columns:minmax(0,1fr);grid-template-areas:"nl";}
.home-page .pr-row > .sec{grid-area:promo;min-width:0;margin-top:0;}
.pr-row > .mh-nl{grid-area:nl;}
@media (max-width:860px){
.pr-row,.home-page:has(> .hero.no-side) .pr-row{grid-template-columns:minmax(0,1fr);grid-template-areas:"promo" "nl";}
.mhero.mh-nl .nl-form{padding:0 var(--sp-4);}
.mhero.mh-nl .mh-art img{height:auto;}
}
/* ============================================================
WYSOKI KONTRAST — reguły komponentów (:root[data-contrast="more"], niezależnie od jasnego/ciemnego). Kolory WYŁĄCZNIE
z prymitywów --hc-* — te, tokeny sklepu w kontraście i przełącznik „Motyw” są w pkieu-theme.css (ładowany po tym pliku).
============================================================ */
/* linki w treści: w kolorze akcentu i ZAWSZE podkreślone (kolor nie jest jedynym wyróżnikiem) */
:root[data-contrast="more"] :is(.lnk,.sec-head .all,.card .eds,.facet .more,.pinfo .meta .rv a,.lede .more,.mg-more,.page-body a:not(.btn),.foot a,.nlband a,.crumbs a,.breadcrumb a){color:var(--hc-accent);text-decoration:underline;text-underline-offset:3px;}
/* pola formularzy: ramka 2 px */
:root[data-contrast="more"] :is(.fld,.sel,input[type="text"],input[type="email"],input[type="search"],input[type="password"],input[type="tel"],input[type="number"],textarea,select){border:2px solid var(--hc-fg);background:var(--hc-bg);color:var(--hc-fg);}
:root[data-contrast="more"] ::placeholder{color:var(--hc-fg);opacity:1;}
/* focus z klawiatury: 3 px żółty + odstęp 2 px */
:root[data-contrast="more"] :focus-visible{outline:3px solid var(--hc-accent) !important;outline-offset:2px;}
/* ramki kart i pasów z „szarości” zamieniamy na biel 2 px; górny pas oddzielony linią */
:root[data-contrast="more"] :is(.mhero,.strip,.tile,.news-cards article){border:2px solid var(--hc-fg);}
:root[data-contrast="more"] .topbar{border-bottom:2px solid var(--hc-fg);}
/* --on-fill = --hc-on-accent (tekst na wypełnieniach akcentu); obszary na tle --hc-bg, które go używały, dostają --hc-fg jawnie */
:root[data-contrast="more"] :is(.topbar,.car .art,.car .kick,.car .cpos,.car .cpos b,.thumbs a,.car .chips-h,.car .chips > span,.mhero .mh-band){color:var(--hc-fg);}
/* białe na sztywno na banerze (--banner-bg = --hc-bg): w jasnym kontraście znikały — podpis kafla, chipy, link „następna ›” */
:root[data-contrast="more"] .mhero .mh-band small{opacity:1;}
:root[data-contrast="more"] .car .chips > span{border-color:var(--hc-fg);background:var(--hc-bg);}
:root[data-contrast="more"] .car .cnext{text-decoration-color:currentColor;}
@media (hover:hover){:root[data-contrast="more"] .car .cnext:hover{color:var(--hc-accent);}}
:root[data-contrast="more"] :is(.car .txt,.car .art){border:2px solid var(--hc-fg);}
:root[data-contrast="more"] .car .txt{border-right-width:0;} /* jedna linia 2 px na styku paneli, nie dwie */
@media (max-width:860px){:root[data-contrast="more"] .car .txt{border-right-width:2px;border-top-width:0;}}
:root[data-contrast="more"] .paytile{background:var(--hc-bg);color:var(--hc-fg);border:2px solid var(--hc-fg);}
/* wypełnienia z twardym #fff w tekście (przycisk Zapłać/.button-1, bieżąca strona pagera, pasek komunikatu) — na wypełnieniu akcentu --hc-on-accent */
:root[data-contrast="more"] :is(.button-1,input[type=submit].button-1,input[type=button].button-1,.pager li.current-page span,.bar-notification,.bar-notification a){color:var(--hc-on-accent);}
/* system Windows „wysoki kontrast” (forced-colors): ikony z obrysu (stroke z CSS nie jest wymuszany) w kolorze tekstu */
@media (forced-colors:active){
.ico,svg.ico{stroke:CanvasText !important;} /* !important: reguły komponentów (.htool .ico itd.) są bardziej szczegółowe */
.pki-corners::before,.pki-corners::after{border-color:CanvasText;}
}
/* ============================================================
KAFLE STRONY GŁÓWNEJ (kolejka wyglądu pkt 2, wzór: rząd skrótów Allegro) — 5 równych kart w jednym rzędzie:
odznaka + pogrubiony podpis i podtekst. Zastępują dwa panele pod banerem i pasek zalet (panele wróciły — zrzut 101).
Karta = tokeny kart strony głównej (--card-*); hover = subtelna zmiana tła (blok HOVER na końcu).
ODZNAKA (decyzja Szymona — cofnięte wcięcie pod kątem prostym i kolorowe końce; wzór: makieta wyglad-bento, wariant C):
zakładka WYPEŁNIONA zwisająca z górnej krawędzi kafla, biała ikona 20 px, płytkie wcięcie V u dołu (12 px = 20% wysokości),
bez żadnych krawędzi/końców. Odstęp górna krawędź → ikona = ikona → wierzchołek V = 14 px (zakładka 40 × 60).
Wypełnienia: zalety grafit, Szybka wysyłka zieleń, Promocje czerwień #7f1618. Ciemny: jaśniejsze wypełnienia, żeby kształt
miał ≥ 3:1 do tła kafla (grafit #64727d 3,3; zieleń #26824e 3,4); Promocje #7f1618 1,58 — znaczenie niesie biała ikona
(10,3:1). Biała ikona ≥ 4,8:1 na każdym wypełnieniu. Wysoki kontrast: --hc-fg / --hc-green / --hc-accent z ikoną --hc-on-accent.
≤ 1180 px (kafel węższy niż ~190 px) układ pionowy: odznaka nad podpisem. ≤ 860 px: rząd przewijany
w poziomie jak karuzele (.hrail), ostatni widoczny kafel ucięty przy krawędzi = sygnał „przewiń”.
============================================================ */
.tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--sp-4);}
.tile{display:flex;align-items:flex-start;gap:var(--sp-3);min-width:0;padding:var(--sp-3) var(--sp-4);background:var(--card-bg);border:var(--card-border);border-radius:var(--card-radius);color:var(--body);
font-size:var(--fs-xs);line-height:1.4;--bm-fill:var(--bm-graphite);--bm-ico:var(--on-fill);--tile-bw:1px;}
.tile.t-fast{--bm-fill:var(--bm-fast-fill);--bm-ico:var(--bm-fast-ico);}
.tile.t-promo{--bm-fill:var(--bm-promo-fill);}
:root{--bm-graphite:var(--graphite);--bm-fast-fill:var(--green-fill);--bm-fast-ico:var(--on-fill);--bm-promo-fill:#7f1618;}
:root[data-theme="dark"]{--bm-graphite:#64727d;--bm-fast-fill:#26824e;--bm-fast-ico:#ffffff;--bm-promo-fill:#7f1618;}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]):not([data-contrast="more"]){--bm-graphite:#64727d;--bm-fast-fill:#26824e;--bm-fast-ico:#ffffff;--bm-promo-fill:#7f1618;}}
:root[data-contrast="more"]{--bm-graphite:var(--hc-fg);--bm-fast-fill:var(--hc-green);--bm-fast-ico:var(--hc-on-accent);--bm-promo-fill:var(--hc-accent);}
/* zakładka zwisa od górnej ramki kafla: ujemny margines = padding + ramka */
.tile .ros{position:relative;flex:none;width:40px;height:60px;margin-top:calc(-1 * var(--sp-3) - var(--tile-bw));}
.tile .bm{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.tile .bm .bm-f{fill:var(--bm-fill);stroke:none;}
.tile .ros .ico{position:absolute;left:10px;top:14px;width:20px;height:20px;fill:none;stroke:var(--bm-ico);stroke-width:2;}
.tile .tl{min-width:0;padding-top:2px;text-wrap:pretty;}
.tile .tl b{display:block;margin-bottom:2px;font-family:var(--head);font-weight:700;font-size:var(--fs-md);line-height:1.3;color:var(--ink);}
@media (max-width:1180px){
.tile{flex-direction:column;align-items:flex-start;gap:var(--sp-2);}
}
@media (max-width:860px){
.tiles{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:max(156px,30%);gap:var(--sp-3);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
padding:6px;margin-left:-6px;margin-right:-6px;}
.tiles::-webkit-scrollbar{display:none;}
.tile{scroll-snap-align:start;scroll-margin-left:6px;}
.home-page .hero ~ .tiles-rail{margin-top:calc(var(--gap-block) - 6px);}
.home-page .tiles-rail ~ .bs-row{margin-top:calc(var(--gap-block) - 6px);}
}
:root[data-contrast="more"] .tile{--tile-bw:2px;}
@media (forced-colors:active){.tile .bm .bm-f{fill:CanvasText;}.tile .ros .ico{stroke:Canvas !important;}}
/* ============================================================
MINI-HERO — układ „I” (makieta wyglad-bento, decyzja Szymona 20.10.2026; wcześniej kolaż okładek, zrzut 111): Poradniki obok
banera i Oferta tygodnia obok Bestsellerów to kafle-zapowiedzi, nie karty produktu. Jasna góra (karta) — etykieta Montserrat
w narożnikach marki ⌜⌟ (zawsze widoczne, jak logo) + podtytuł kursywą; ilustracja SVG (Content/ilustracje, styl
PkiMiniHero.IllustrationStyle; styl „c” bez płytki tła, jeden plik na wszystkie motywy) zachodzi na czerwony pasek marki (--banner-bg)
z podpisem: tytuł · autor pierwszej pozycji. Bez przycisku, bez cen; cały kafel = jeden link, hover = subtelna zmiana tła
(blok HOVER). Partial _PkiMiniHero (dane: _PkiShelfHero, _PkiWeeklyOffer).
Rząd .bs-row (zrzut 102): sekcja Bestsellery | mini-hero Oferty — osobne karty, równa wysokość; mobile: Oferta nad sekcją.
============================================================ */
.mhero{grid-area:offer;position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;
border:var(--card-border);border-radius:var(--card-radius);background:var(--mh-bg);color:var(--ink);text-decoration:none;--mh-bg:var(--card-bg);}
.mhero .mh-top{flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-5) var(--sp-5) var(--sp-4);}
.mhero .mh-t{--pc-gx:9px;--pc-gy:6px;margin:6px 0 0 9px;font-family:var(--head);font-weight:800;font-size:var(--fs-h1m);line-height:1.1;letter-spacing:-.01em;color:var(--ink);}
.mhero .mh-t::before,.mhero .mh-t::after{opacity:1;transform:none;transition:none;}
.mhero .mh-s{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;max-width:32ch;
font-size:var(--fs-sm);font-style:italic;line-height:1.4;color:var(--muted);}
/* ilustracja na styku: obszar = cała wysokość kafla między tekstem a paskiem (flex:1; kafel jest wysoki — kolumna obok banera / rząd
Bestsellerów), rysunek wypełnia go bez ucinania (object-fit:contain) i stoi na pasku (object-position dół); ujemny margines dolny
wsuwa go na pasek. Styl „c” ma pionowe płótno 320×500 dopasowane do tej proporcji (PkiMiniHero.IllustrationSize). */
.mhero .mh-art{position:relative;z-index:1;display:block;flex:1 1 auto;min-height:240px;margin-bottom:-64px;}
.mhero .mh-art img{position:absolute;top:0;bottom:0;left:14px;width:calc(100% - 28px);height:100%;object-fit:contain;object-position:50% 100%;
filter:drop-shadow(0 12px 20px rgba(0,0,0,.22));}
/* rysunek bez płytki tła (Szymon 20.10) leży wprost na karcie: w ciemnym ten sam zabieg co okładki (--cover-filter: delikatny jasny
obrys + cień), w kontraście (--cover-filter: none) cienki biały obrys — inaczej grafitowe części giną na ciemnej karcie */
:root[data-theme="dark"] .mhero .mh-art img{filter:var(--cover-filter);}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]):not([data-contrast="more"]) .mhero .mh-art img{filter:var(--cover-filter);}}
:root[data-contrast="more"] .mhero .mh-art img{filter:drop-shadow(0 0 1px var(--hc-fg));}
.mhero .mh-band{display:flex;flex-direction:column;gap:2px;padding:78px 22px 18px;background:var(--banner-bg);color:#fff;}
.mhero .mh-band b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-family:var(--head);font-weight:700;font-size:var(--fs-sm);line-height:1.3;}
.mhero .mh-band small{font-size:var(--fs-xs);opacity:.85;}
.mhero:focus-visible{outline:3px solid var(--red);outline-offset:3px;}
/* rząd Bestsellery | Oferta */
.bs-row{display:grid;grid-template-columns:minmax(0,1fr) clamp(250px,22%,300px);grid-template-areas:"bs offer";gap:var(--gap-block);align-items:stretch;margin-top:var(--gap-block);}
.bs-row:not(:has(> .mhero)),.bs-row:not(:has(> .sec)){grid-template-columns:minmax(0,1fr);grid-template-areas:none;}
.home-page .bs-row > .sec{grid-area:bs;min-width:0;margin-top:0;}
.bs-row:not(:has(> .sec)) > .mhero{grid-area:auto;}
@media (max-width:860px){
.bs-row{grid-template-columns:minmax(0,1fr);grid-template-areas:"offer" "bs";}
/* mobile: kafel nie jest pionowy (wysokość z treści) — ilustracja o stałej wysokości 320 px pod tekstem, pasek z podpisem pod nią */
.mhero .mh-top{padding:var(--sp-4) var(--sp-4) var(--sp-3);}
.mhero .mh-art{flex:none;min-height:0;}
.mhero .mh-art img{position:static;display:block;width:auto;max-width:calc(100% - 28px);height:320px;margin:0 auto;}
.mhero .mh-s{max-width:none;}
}
/* ============================================================
PANELE POD BANEREM (Szybka wysyłka / Promocje + „Sprawdź”) — przywrócone na prośbę Szymona (zrzut 101: „oddaj mi te dwa
okienka tutaj”) po zdjęciu w kolejce wyglądu pkt 2; rząd kafli zostaje. Style = wynikowa kaskada sprzed 50da8501
(runda 4 / 30b / mobile jako wiersze listy) zebrana w jednym miejscu; obszary s1/s2 w siatce .hero.
============================================================ */
.strip{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"lbl btn" "txt btn";align-items:center;align-content:center;column-gap:var(--sp-4);row-gap:var(--sp-1);
padding:var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5);border:1px solid var(--line);border-radius:var(--r);background:var(--surface);font-size:var(--fs-md);line-height:1.4;color:var(--body);}
.strip b{grid-area:lbl;margin:0;display:flex;align-items:center;gap:7px;font-family:var(--head);font-size:var(--fs-sm);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--red);}
.strip b .ico{width:var(--ico-16);height:var(--ico-16);stroke:currentColor;}
.strip b .fastmark .ico{width:12px;height:12px;stroke:var(--on-fill);fill:var(--on-fill);stroke-width:1.5;}
.strip .btn{grid-area:btn;flex:none;align-self:center;}
.strip .st{grid-area:txt;font-size:var(--fs-md);text-wrap:pretty;}
/* przycisk „Sprawdź” zmienia kolor TYLKO przy najechaniu na sam przycisk (Szymon: „przyciski powinny zmieniać kolor, kiedy
najeżdżasz na nie, a nie na ich boxy”) — globalne .btn-primary:hover / .btn-green:hover; karta dalej jest w całości linkiem */
.s-fast{grid-area:s1;}
.s-fast b{color:var(--green);}
.s-promo{grid-area:s2;}
/* mobile (Szymon 26.10, zrzut 245: „wyrównać wysokości tych dwóch elementów”): oba wiersze tej samej wysokości — wiersze s1/s2
siatki .hero mają 1fr przy wysokości z treści, więc wyższy wiersz wyznacza oba (bez sztywnych px); „Sprawdź” w tej samej osi.
Wiersze stykają się mimo odstępu siatki (gap .hero = --gap-block): po połowie odstępu ujemnego marginesu na każdym
(symetrycznie — przy jednostronnym 1fr wyrównałby ścieżki siatki, a nie same paski). */
@media (max-width:860px){
.hero.no-side{grid-template-columns:minmax(0,1fr);grid-template-areas:"car" "s1" "s2";grid-template-rows:auto 1fr 1fr;}
.hero:not(.no-side){grid-template-rows:auto auto 1fr 1fr;}
.strip{padding:var(--sp-3) 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;font-size:var(--fs-sm);}
.s-fast{border-top:1px solid var(--line);}
.hero .s-fast{margin-bottom:calc(var(--gap-block) / -2);}
.hero .s-promo{margin-top:calc(var(--gap-block) / -2);}
.strip .st{font-size:var(--fs-xs);}
}
/* ============================================================
MINI-KOSZYK (raport UX pkt 3) — #flyout-cart z widoku ShoppingCart/FlyoutShoppingCart, pokazywany przez pkieu-v3.js pkt 5
po udanym dodaniu. Nienachalny: bez przyciemnienia strony, strona dalej klikalna. Desktop: panel przy prawej krawędzi pod
górą okna; mobile (≤860): arkusz od dołu na pełną szerokość. Wysuwanie 200 ms, bez animacji przy prefers-reduced-motion.
.mc-ship = slot na koszt dostawy (pkieu-v3.js pkt 10: /ShippingQuote/Estimate?cart=true), pusty = niewidoczny.
============================================================ */
.mcart{position:fixed;top:var(--sp-4);right:var(--sp-4);z-index:140;width:min(380px,calc(100vw - 2 * var(--sp-4)));max-height:calc(100vh - 2 * var(--sp-4));overflow-y:auto;
background:var(--surface);color:var(--body);border:1px solid var(--line2);border-radius:var(--r-sheet);box-shadow:var(--sh-pop);padding:var(--sp-4) var(--sp-5) var(--sp-5);
opacity:0;transform:translateX(24px);transition:opacity .2s ease-out,transform .2s ease-out;}
.mcart.on{opacity:1;transform:none;}
.mcart[hidden]{display:none;}
.mcart:focus{outline:none;}
.mcart:focus-visible{outline:3px solid var(--red);outline-offset:2px;}
.mc-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-3);}
.mc-h{display:flex;align-items:center;gap:var(--sp-2);margin:0;font-family:var(--head);font-weight:700;font-size:var(--fs-md);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--green);}
.mc-h .ico{width:var(--ico-20);height:var(--ico-20);stroke:currentColor;fill:none;stroke-width:var(--ico-sw);}
.mc-x{width:var(--h-touch);height:var(--h-touch);margin:calc(-1 * var(--sp-2)) calc(-1 * var(--sp-3)) calc(-1 * var(--sp-2)) 0;border:0;border-radius:50%;background:none;color:var(--ink);font-size:26px;line-height:1;cursor:pointer;}
.mc-x:hover{background:var(--wash);}
.mc-items{list-style:none;margin:0;padding:0 0 var(--sp-3);border-bottom:1px solid var(--line);}
/* tryb „Twój koszyk” (klik w ikonę Koszyk w nagłówku — Szymon: „wciąż nie widzę tego mini carta”): wszystkie pozycje (Nop daje
do MiniShoppingCartProductNumber = 10, najnowsze pierwsze), lista przewijana, nagłówek „Twój koszyk” zamiast „Dodano do koszyka” */
.mc-h-cart{display:none;}
.mcart.browse .mc-h-add{display:none;}
.mcart.browse .mc-h-cart{display:inline;}
.mcart.browse:not(.pki-drop) .mc-h{color:var(--ink);}
.mcart.browse .mc-items{display:flex;flex-direction:column;gap:var(--sp-3);max-height:min(46vh,380px);overflow-y:auto;overscroll-behavior:contain;}
.mc-it{display:flex;gap:var(--sp-3);align-items:flex-start;}
.mc-it[hidden]{display:none;}
.mc-cv{flex:none;width:56px;}
.mc-cv img{width:56px;height:auto;max-height:84px;object-fit:contain;mix-blend-mode:var(--cover-blend);filter:var(--cover-filter);}
.mc-cv .nocv{display:block;width:56px;height:84px;background:var(--wash);border:1px dashed var(--line2);border-radius:var(--r-xs);} /* zaślepka jak .card .nocv */
.mc-t{min-width:0;display:flex;flex-direction:column;gap:2px;}
.mc-t a{font-weight:500;font-size:var(--fs-base);line-height:1.35;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.mc-t a:hover{color:var(--red);text-decoration:underline;}
.mc-t small{font-size:var(--fs-xs);color:var(--muted);}
.mc-t small.mc-pre{color:var(--blue);font-weight:600;} /* przedsprzedaż w mini-koszyku (PkiPresale) */
.mc-pr{font-size:var(--fs-md);color:var(--body);font-variant-numeric:tabular-nums;}
.mc-pr b{font-family:var(--head);font-size:var(--fs-lg);color:var(--ink);}
.mc-sum{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-3);padding:var(--sp-3) 0 0;font-size:var(--fs-md);color:var(--body);}
.mc-sum b{font-family:var(--head);font-size:var(--fs-lg);color:var(--ink);font-variant-numeric:tabular-nums;}
.mc-ship:empty{display:none;}
.mc-ship{padding-top:var(--sp-2);font-size:var(--fs-md);}
.mc-ship{display:flex;gap:var(--sp-2);align-items:flex-start;color:var(--body);}
.mc-ship .ico{flex:none;width:var(--ico-20);height:var(--ico-20);stroke:var(--green);margin-top:1px;}
.mc-ship b{color:var(--ink);font-variant-numeric:tabular-nums;}
.mc-ship a{color:var(--link);text-decoration:underline;text-underline-offset:3px;white-space:nowrap;}
.mc-ship a:is(:hover,:focus-visible){color:var(--red);}
.mc-btns{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);margin-top:var(--sp-4);}
.mc-btns .btn{width:100%;padding-left:var(--sp-2);padding-right:var(--sp-2);}
@media (max-width:860px){
.mcart{top:auto;bottom:0;left:0;right:0;width:auto;max-height:85vh;border-radius:var(--r-sheet) var(--r-sheet) 0 0;border-width:1px 0 0;
padding:var(--sp-3) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom));transform:translateY(24px);}
.mcart.on{transform:none;}
.mc-btns .btn{height:var(--h-touch);}
/* arkusz (e2e mobile 5.11): pełny koszyk (kupon, ilości) musi być osiągalny — gdy przycisk główny idzie do kasy, „Zobacz koszyk”
widoczny w trzecim polu siatki (przycisk główny na całą szerokość); gdy główny sam prowadzi do koszyka — bez dublowania */
.mcart:not(.drop):not([data-primary=cart]) .mc-b-cart{display:block;}
.mcart:not(.drop):not([data-primary=cart]) .mc-btns .mc-b-go{grid-column:1 / -1;grid-row:1;}
/* sticky pasek PDP (raport UX pkt 4): poza ekranem niedostępny z klawiatury (visibility), przy otwartym koszyku schowany */
.sbuy{visibility:hidden;transition:transform .2s ease-out,visibility 0s linear .2s;}
body.sbuy-on .sbuy{visibility:visible;transition:transform .2s ease-out;}
}
@media (prefers-reduced-motion:reduce){.mcart,.sbuy,body.sbuy-on .sbuy{transition:none;}}
:root[data-contrast="more"] .mcart{border:2px solid var(--hc-fg);}
/* ============================================================
HOVER KLIKALNYCH BOKSÓW (decyzja Szymona — po „diodzie” i narożnikach ⌜⌟): TYLKO subtelna zmiana tła boksu. Jasny:
lekkie przyciemnienie (na tle #f2f2f2 czytelniejsze niż rozjaśnienie — porównanie w raporcie), ciemny: lekkie rozjaśnienie.
Mieszanie z kolorem bazowym boksu (color-mix), więc działa też na tonowanych mini-hero. TYLKO boksy bez przycisku, w całości
linkiem: kafle, mini-hero (przyciski „Zobacz …” usunięte — zrzut 111), karty newsów. Boksy Z przyciskiem (karty Szybka
wysyłka / Promocje z SPRAWDŹ, baner hero, karta produktu z DO KOSZYKA): tło boksu bez zmian, hover na przycisku
(--red-fill-deep: w jasnym ciemniejsza, w ciemnym jaśniejsza czerwień; zielony brightness .9) — TYLKO przy najechaniu na sam
przycisk, nie na boks.
150 ms, prefers-reduced-motion bez animacji. Fokus z klawiatury: globalny obrys :focus-visible (bez zmian).
Wysoki kontrast: ramka boksu żółta zamiast białej.
============================================================ */
:root{--hov-c:#000;--hov-p:5%;}
:root[data-theme="dark"]{--hov-c:#fff;--hov-p:7%;}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]):not([data-contrast="more"]){--hov-c:#fff;--hov-p:7%;}}
.tile,.mhero,.news-cards article{transition:background-color .15s ease-out,border-color .15s ease-out;}
@media (hover:hover){
.tile:hover{background-color:color-mix(in srgb,var(--card-bg),var(--hov-c) var(--hov-p));}
.mhero:hover{background-color:color-mix(in srgb,var(--mh-bg),var(--hov-c) var(--hov-p));}
.home-page .news-cards article:hover{background-color:color-mix(in srgb,var(--wash),var(--hov-c) var(--hov-p));}
:root[data-contrast="more"] :is(.tile,.mhero,.news-cards article):hover{background-color:var(--hc-bg);border-color:var(--hc-accent);}
}
@media (prefers-reduced-motion:reduce){.tile,.mhero,.news-cards article{transition:none;}}
/* ============================================================
KASA: GOŚĆ DOMYŚLNIE + KONTO PRZED I PO ZAMÓWIENIU (869f7deet, checkout-gosc)
Wejście do kasy (Customer/Login?checkoutAsGuest): karta gościa pierwsza i jedyny przycisk główny (.button-1),
logowanie obok jako .button-2, rejestracja linkiem. Mobile: gość na górze, logowanie pod spodem.
Strona podziękowania: blok „Załóż konto” (Components/CheckoutAccountOffer) — ramka 1 px, przy zamiarze z wejścia
(.is-intent) ramka w kolorze akcentu. Same tokeny — jasny/ciemny/kontrast bez osobnych bloków.
============================================================ */
.pki-entry{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--sp-5);align-items:start;}
.pki-entry > section{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:var(--sp-5);min-width:0;}
.pki-entry h2,.pki-account-offer h2{font-family:var(--head);font-size:var(--fs-lg);font-weight:700;color:var(--ink);margin:0 0 var(--sp-2);}
.pki-entry p{margin:0 0 var(--sp-4);}
.pki-entry-guest{border-color:var(--ink) !important;border-width:2px !important;}
.pki-entry-guest .checkout-as-guest-button{width:100%;min-height:var(--h-lg);font-size:var(--fs-sm);}
.pki-check{display:flex;gap:var(--sp-3);align-items:flex-start;margin:0 0 var(--sp-4);cursor:pointer;color:var(--ink);font-size:var(--fs-md);line-height:1.5;}
.pki-check input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--red-fill);}
.pki-check small{display:block;color:var(--muted);font-size:var(--fs-sm);margin-top:2px;}
.pki-entry-login .inputs label{min-width:90px;}
.pki-entry-login .inputs input[type=email],.pki-entry-login .inputs input[type=text],.pki-entry-login .inputs input[type=password]{flex:1 1 200px;}
.pki-entry-login .login-button{min-width:160px;}
.pki-entry-register{margin:var(--sp-4) 0 0 !important;padding-top:var(--sp-3);border-top:1px solid var(--line);font-size:var(--fs-md);}
.pki-entry .external-authentication:empty{display:none;}
@media (max-width:860px){
.pki-entry{grid-template-columns:minmax(0,1fr);gap:var(--sp-4);}
.pki-entry > section{padding:var(--sp-4);}
.pki-entry-login .login-button{width:100%;}
}
.pki-account-offer{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:var(--sp-5);margin:var(--sp-5) 0;max-width:640px;}
.pki-account-offer.is-intent{border:2px solid var(--red);}
.pki-account-offer.is-done{border-color:var(--green);border-width:2px;}
.pki-account-offer.is-done h2{color:var(--green);}
.pki-account-offer p{margin:0 0 var(--sp-3);}
.pki-account-offer .inputs label{min-width:70px;}
.pki-account-offer .inputs input{flex:1 1 220px;}
.pki-account-offer .inputs small{flex-basis:100%;color:var(--muted);font-size:var(--fs-sm);}
.pki-account-offer .message-error p{margin:0 0 var(--sp-2);font-weight:700;}
.pki-account-note{color:var(--muted);font-size:var(--fs-sm);margin:var(--sp-3) 0 0 !important;}
.pki-account-links{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);}
@media (max-width:860px){
.pki-account-offer{padding:var(--sp-4);}
.pki-account-offer .afterorder-account-button{width:100%;}
}
/* przypięty pasek — pełny komplet (869f7deet, Szymon: „wyszukiwarka, waluta, motyw, konto, lubisz i koszyk imo i burger
kategorii”). Desktop: logo · Kategorie · wyszukiwarka (elastyczna) · Waluta · Motyw · Konto · Lubisz · Koszyk, z podpisami
jak w nagłówku (te same kolumny 52 px). ≤ 860 px: jak nagłówek mobilny — menu · „pki” · ikony bez podpisów (cel 40×40),
wyszukiwarka zwinięta do ikony i rozwijana drugim rzędem paska (.sq-open). Wąsko ciaśniej: ≤ 419 px cele 36 px,
≤ 359 px 34 px i margines 10 px (6 ikon + menu + logo; 320 px mieści się z zapasem ~4 px).
„Kategorie” = .katbtn z paska menu (czerwony blok, burger + KATEGORIE + ▾, hover/otwarty --red-fill-deep — Szymon 20.10:
„powinny nawiązywać estetycznie do tych”); tu tylko wysokość 40 px = pole wyszukiwarki paska. ≥ 520 px z tekstem (także
768 — wyszukiwarka jest wtedy ikoną, miejsca starcza), ≤ 519 px czerwony kwadrat 40×40 z samym burgerem (tekst + ▾ znikają;
nazwa dla czytnika w aria-label). Rząd przy 520 px (pomiar): przycisk 159 + logo 50 + 6×40 + 3×6 = 467 ≤ 488. */
.sticky .katbtn{flex:none;height:40px;}
@media (max-width:860px){
:root{--stk-h:56px;}
.sticky .wrap{gap:6px;flex-wrap:wrap;}
.sticky .katbtn{order:-1;height:40px;}
.sticky .hdr-tools{align-self:center;}
.sticky .hdr-tools .htool.sq{display:inline-flex;}
.sticky .search{display:none;order:1;flex:1 1 100%;padding-bottom:10px;}
.sticky.sq-open .search{display:flex;}
.sticky.sq-open .htool.sq{color:var(--red);}
.sticky.sq-open .htool.sq .ico{stroke:var(--red);}
/* lista: pasek Filtruj/Sortuj (.mbar, sticky top 0) zjeżdża pod przypięty pasek, gdy ten jest widoczny */
.mbar{transition:top .3s ease-out;}
body.stuck .mbar{top:calc(var(--stk-h) + 1px);}
}
@media (max-width:519px){
.sticky .katbtn{width:40px;padding:0;justify-content:center;}
.sticky .katbtn .kt,.sticky .katbtn .car-d{display:none;}
}
@media (max-width:419px){
.sticky .hdr-tools .htool{min-width:36px;}
.sticky .katbtn{width:36px;height:36px;}
}
@media (max-width:359px){
.sticky .wrap{padding-left:10px;padding-right:10px;gap:4px;}
.sticky .hdr-tools .htool{min-width:34px;}
.sticky .katbtn{width:34px;height:34px;}
}
/* podgląd koszyka po najechaniu (pkieu-v3.js 5c): ten sam #flyout-cart jako .pki-drop (wspólny panel rozwijany, koniec pliku) —
wysuwa się SPOD przycisku Koszyk jak panel Kategorii spod swojego bloku (Szymon 21.10: „jedna bryła”): --mc-top = dół
przycisku, --mc-right = jego prawa krawędź (pkieu-v3.js placeDrop; pełny nagłówek i przypięty pasek), szerszy panel
rośnie w lewo; przyciemnienie od spodu rzędu przycisku jak dotąd; nagłówek „TWÓJ KOSZYK” = etykieta sekcji (jak tytuł
podkategorii w panelu Kategorii), bez ikony i ×; przyciski „Koszyk” + „Do kasy” (zamiast „Kontynuuj zakupy”); pusty koszyk = sam komunikat. Obok etykiety
„Koszyk” ▾ jak przy KATEGORIE, tylko dla myszy (na dotyku najechania nie ma). */
@media (min-width:861px){
.mcart.pki-drop{top:var(--mc-top,var(--sp-4));right:var(--mc-right,max(26px,calc((100% - var(--maxw)) / 2 + 26px)));max-height:calc(100vh - var(--mc-top,var(--sp-4)) - var(--sp-4));padding:var(--sp-5);}
/* panel leży NAD przyciskiem (z-index .mcart; przypięty pasek ma własny kontekst z 85), więc 6 px zjazdu .pki-drop
zasłaniałoby dół przycisku. Przycięcie górą do linii styku (przesuwane razem z zjazdem) = panel wyłania się spod
krawędzi przycisku jak Kategorie spod swojego bloku; boki i dół zostawiają miejsce na cień --sh-pop (0 16px 40px). */
/* górna ramka (Szymon 21.10, zrzut 197: „tam, gdzie panel jest szerszy od guzika, ramka u góry musi być”): panel szerszy
od przycisku ma górną ramkę i zaokrąglony lewy górny róg --r; otwarty zostaje tylko odcinek dokładnie pod przyciskiem.
Ramka leży na ostatnim rzędzie przycisku (placeDrop: --mc-top = dół przycisku − ramka), a wycięcie w clip-path
(--mc-bw = szerokość przycisku, --mc-bt = grubość ramki) odsłania w tym miejscu czerwony dół przycisku. Kategorie tego
nie potrzebują: ich panel zaczyna się lewą krawędzią bloku, a na prawo od niego linię daje dolna ramka paska menu. */
.mcart.pki-drop{--mc-bt:1px;border-top:var(--mc-bt) solid var(--line);border-radius:var(--r) 0 var(--r) var(--r);
--mc-notch:calc(100% - var(--mc-bw,0px));
clip-path:polygon(-48px 6px,var(--mc-notch) 6px,var(--mc-notch) calc(6px + var(--mc-bt)),calc(100% + 48px) calc(6px + var(--mc-bt)),calc(100% + 48px) calc(100% + 64px),-48px calc(100% + 64px));
transition:opacity .15s ease-out,transform .15s ease-out,clip-path .15s ease-out,visibility 0s linear .15s;}
.mcart.pki-drop.is-open{clip-path:polygon(-48px 0,var(--mc-notch) 0,var(--mc-notch) var(--mc-bt),calc(100% + 48px) var(--mc-bt),calc(100% + 48px) calc(100% + 64px),-48px calc(100% + 64px));
transition:opacity .15s ease-out,transform .15s ease-out,clip-path .15s ease-out;}
:root[data-contrast="more"] .mcart.pki-drop{--mc-bt:2px;border-top:2px solid var(--hc-fg);}
}
.mcart.pki-drop .mc-head{display:block;margin-bottom:0;}
.mcart.pki-drop .mc-h .ico,.mcart.pki-drop .mc-x{display:none;}
.mcart.pki-drop .mc-items{padding-top:0;}
.mcart.pki-drop .mc-t a:hover{text-decoration:none;} /* hover pozycji jak w panelu Kategorii: sam kolor */
.mcart:not(.drop) .mc-b-cart,.mcart.drop .mc-b-cont{display:none;}
.mc-empty{margin:0;padding:var(--sp-2) 0 var(--sp-1);font-size:var(--fs-md);color:var(--body);}
.mc-empty ~ .mc-sum,.mc-empty ~ .mc-ship,.mc-empty ~ .mc-btns{display:none;}
.htool .car-d{display:inline-block;margin-left:3px;font-size:var(--fs-2xs);transition:transform .15s;}
.htool[aria-expanded="true"] .car-d{transform:rotate(180deg);}
@media not all and (hover:hover) and (pointer:fine){.htool .car-d{display:none;}}
@media (prefers-reduced-motion:reduce){.htool .car-d{transition:none;}}
/* ============================================================
.pki-drop — JEDEN panel rozwijany nagłówka (Kategorie, podgląd koszyka; pkieu-v3.js PkiDrop). Szymon 21.10: „oba są
dropdownami, a mają zupełnie inny sposób pojawiania się i stylistykę — wyrównaj do najlepszych”. Wisi pod dolną krawędzią
paska (pełny nagłówek: spód paska menu; przypięty: spód paska), bez górnej ramki, zaokrąglony tylko u dołu (--r jak reszta
sklepu), ramka --line i cień --sh-pop (popover, sekcja 8); pojawia się i znika tak samo: 150 ms przenikanie + 6 px zjazd
z góry (stan .is-open). Treść pod panelem przyciemniona jednakowo (body.drop-dim .oc-ov). Tylko desktop: na mobile .mega
to szuflada, a podgląd koszyka (.pki-drop) otwiera się wyłącznie najechaniem myszy. Na końcu pliku — wygrywa z .mcart.
============================================================ */
@media (min-width:861px){
.pki-drop{background:var(--surface);border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r) var(--r);box-shadow:var(--sh-pop);
opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .15s ease-out,transform .15s ease-out,visibility 0s linear .15s;}
.pki-drop.is-open{opacity:1;visibility:visible;transform:none;transition:opacity .15s ease-out,transform .15s ease-out;}
:root[data-contrast="more"] .pki-drop{border:2px solid var(--hc-fg);border-top:0;}
}
/* ============================================================
Koszyk jako wezwanie do działania (PkiCartCta w PkiEuV3.cs, klasa .cta-{a|b|c}; Szymon 21.10: „co gdyby z cart zrobić taki
sam czerwony kwadrat jak przy kategoriach?”). Czerwony blok = parametry .katbtn: Montserrat 700, wersaliki, --red-fill,
kwadratowe rogi, hover --red-fill-deep; wysokość pola wyszukiwarki w tym samym rzędzie (--h-lg; przypięty pasek 40 px).
a — zawsze blok: ikona + KOSZYK + licznik + ▾; b — blok tylko przy niepustym koszyku (.has-items z pkieu-v3.js 5d):
ikona + kwota (.ct-sum) + „· N” + ▾, pusty = zwykła ikona; c — zwykła ikona, licznik i ▾ razem w czerwonym kwadraciku.
Mobile (≤ 860, ikony bez podpisów): a / b(niepusty) = czerwony kwadrat 40×40 z białą ikoną i białym licznikiem; c = licznik
w czerwonym kwadraciku (▾ tylko dla myszy).
============================================================ */
.cart-cta .ct-sum{display:none;}
@media (min-width:861px){
.hdr-tools{grid-auto-columns:auto;} /* kolumny jak dotąd 52 px (szerokość .htool), blok koszyka — własna szerokość */
.hdr-tools .htool.cart-cta:is(.cta-a,.cta-b.has-items){width:auto;flex-direction:row;align-items:center;gap:9px;height:var(--h-lg);padding:0 16px;margin-left:10px;align-self:center;
background:var(--red-fill);color:var(--on-fill);border-radius:var(--r);font-family:var(--head);font-weight:700;font-size:var(--fs-sm);line-height:1;letter-spacing:var(--ls-ui);text-transform:uppercase;white-space:nowrap;}
.hdr-tools .htool.cart-cta:is(.cta-a,.cta-b.has-items):hover,.hdr-tools .htool.cart-cta:is(.cta-a,.cta-b.has-items)[aria-expanded="true"]{background:var(--red-fill-deep);color:var(--on-fill);}
.hdr-tools .htool.cart-cta:is(.cta-a,.cta-b.has-items) .ico,.hdr-tools .htool.cart-cta:is(.cta-a,.cta-b.has-items):hover .ico{width:var(--ico-20);height:var(--ico-20);stroke:var(--on-fill);}
.hdr-tools .htool.cart-cta:is(.cta-a,.cta-b.has-items)::before,.hdr-tools .htool.cart-cta:is(.cta-a,.cta-b.has-items)::after{display:none;}
.hdr-tools .htool.cart-cta:is(.cta-a,.cta-b.has-items) .cnt{position:static;background:var(--on-fill);color:var(--red-fill);}
.sticky .hdr-tools .htool.cart-cta:is(.cta-a,.cta-b.has-items){height:40px;}
/* b: kwota zamiast słowa KOSZYK, liczba sztuk jako „· N” (bez kółka) */
.hdr-tools .htool.cart-cta.cta-b.has-items .ct-l{font-size:0;letter-spacing:0;} /* zostaje samo ▾ */
.hdr-tools .htool.cart-cta.cta-b.has-items .ct-l .car-d{font-size:var(--fs-2xs);margin-left:0;}
.hdr-tools .htool.cart-cta.cta-b.has-items .ct-sum{display:inline;order:1;font-size:var(--fs-md);letter-spacing:.02em;text-transform:none;font-variant-numeric:tabular-nums;}
.hdr-tools .htool.cart-cta.cta-b.has-items .cnt{order:2;background:none;color:var(--on-fill);min-width:0;padding:0;font-size:var(--fs-md);font-weight:700;}
.hdr-tools .htool.cart-cta.cta-b.has-items .cnt::before{content:"·";margin-right:6px;font-weight:400;}
.hdr-tools .htool.cart-cta.cta-b.has-items .ct-l{order:3;}
/* c: licznik + ▾ razem w czerwonym kwadraciku przy ikonie (pusty koszyk: ▾ jak dotąd przy etykiecie) */
.hdr-tools .htool.cart-cta.cta-c.has-items .ct-l .car-d{display:none;}
.hdr-tools .htool.cart-cta.cta-c .cnt{border-radius:var(--r);padding:0 5px;gap:3px;height:18px;}
.hdr-tools .htool.cart-cta.cta-c .cnt::after{content:"▾";font-size:9px;display:inline-block;transition:transform .15s;}
.hdr-tools .htool.cart-cta.cta-c[aria-expanded="true"] .cnt::after{transform:rotate(180deg);}
}
/* 861–1180 px: blok ciaśniej (wyszukiwarka w tym rzędzie i tak się zwęża — przy 1024 o ~120 px w a/b) */
@media (min-width:861px) and (max-width:1180px){
.hdr-tools .htool.cart-cta:is(.cta-a,.cta-b.has-items){padding:0 12px;gap:7px;margin-left:6px;}
}
@media (min-width:861px) and (not ((hover:hover) and (pointer:fine))){.hdr-tools .htool.cart-cta.cta-c .cnt::after{content:none;}}
@media (max-width:860px){
.hdr-tools .htool.cart-cta:is(.cta-a,.cta-b.has-items){background:var(--red-fill);border-radius:var(--r);}
.hdr-tools .htool.cart-cta:is(.cta-a,.cta-b.has-items) .ico{stroke:var(--on-fill);}
.hdr-tools .htool.cart-cta:is(.cta-a,.cta-b.has-items)::before,.hdr-tools .htool.cart-cta:is(.cta-a,.cta-b.has-items)::after{display:none;}
.hdr-tools .htool.cart-cta:is(.cta-a,.cta-b.has-items) .cnt{background:var(--on-fill);color:var(--red-fill);}
.hdr-tools .htool.cart-cta.cta-c .cnt{border-radius:var(--r);}
}
/* zaokrąglenie czerwonych bloków (Szymon 21.10: jak reszta przycisków i boxów motywu — token --r, jak SZUKAJ / .btn).
Styk z panelem na desktopie: KATEGORIE w pasku menu (ta sama lewa krawędź) i Koszyk w pełnym nagłówku oraz w przypiętym
pasku (ta sama prawa krawędź) — panel .pki-drop wisi tuż pod dolną krawędzią przycisku, bez górnej ramki i z prostymi
górnymi rogami, więc przy otwartym dół przycisku prosty, bez szczeliny. KATEGORIE z przypiętego paska (9 px odstępu)
i mobile (szuflada / arkusz koszyka) stykają się z niczym. */
@media (min-width:861px){
body:not(.mega-fix) .nav .katbtn[aria-expanded="true"],
.hdr-tools .htool.cart-cta:is(.cta-a,.cta-b.has-items)[aria-expanded="true"]{border-radius:var(--r) var(--r) 0 0;}
}
/* ============================================================
RYTM PIONOWY STRON — raz, w layoucie (869f7deet, Szymon 21.10: „znowu wesołe odstępy”). Dotąd każdy układ i każda strona
miały własny odstęp od paska menu (14–43 px: .center-1 / .page / .wrap po 24 px, okruszki +16, tytuły ±10) i własny ogon
nad newsletterem (48–80 px: marginesy ostatnich akapitów, puste z CMS, .pc-empty). Teraz:
(1) --gap-top: pasek menu → pierwsza treść strony (okruszki albo tytuł) — padding , jednakowo na wszystkich stronach
(_PkiPage .wrap, _ColumnsOne .center-1, _ColumnsTwo z kolumną i bez); opakowania wewnątrz bez własnego paddingu;
(2) --gap-sec: między sekcjami treści (48 / 32 px; ten sam token co karta produktu — #buybox-status);
(3) treść → karta newslettera = --gap-nl liczony RAZ: padding-bottom , .nlband bez własnego marginesu, ogon treści
bez marginesów (ostatni element w łańcuchu ostatnich dzieci, puste akapity CMS). 23.10 (Szymon: zmniejszyć wszędzie):
--gap-nl 24 / 16 px zamiast --gap-sec 48 / 32 — w skali odstępów między kartami (siatka aktualności, kafle 404 — --sp-5 /
--sp-4), o krok większy niż newsletter → stopka (--gap-block 16 / 12), więc koniec treści dalej czyta się jako granica;
(4) newsletter → stopka bez zmian (.foot margin-top --gap-block, #419); strona główna (newsletter jako kafel w treści, bez
.nlband) też bez zmian na dole — tam nie dostaje paddingu i stopka trzyma --gap-block.
Na końcu pliku: wygrywa z regułami układów wyżej (ta sama lub wyższa szczegółowość, później).
============================================================ */
:root{--gap-top:var(--sp-6);--gap-nl:var(--sp-5);} /* --gap-sec (48 / 32) zdefiniowany wyżej, przy PDP (#buybox-status) — jedno źródło */
@media (max-width:860px){:root{--gap-top:var(--sp-5);--gap-nl:var(--sp-4);}}
.master-wrapper-main,.master-wrapper-main:is(:has(> .side-2),:has(> .leftside-3)){padding-top:var(--gap-top);}
/* (0,4,0): wygrywa z „.master-wrapper-main > div:not(.wrap):not(.cols)” (0,3,1) i „.master-wrapper-page.one … > .wrap” (0,4,0, wcześniej) */
.master-wrapper-page .master-wrapper-main > :is(.wrap,.center-1,.center-2,.page,div):not(.side-2){padding-top:0;}
.master-wrapper-main :is(.crumbs,.breadcrumb){padding-top:0;}
.master-wrapper-page:has(> .nlband) > .master-wrapper-main{padding-bottom:var(--gap-nl);}
.master-wrapper-page > .nlband{margin-top:0;}
/* ogon treści: ostatni widoczny potomek w łańcuchu (bez skryptów i pól ukrytych) nie dokłada marginesu pod sobą */
.master-wrapper-main > :nth-last-child(1 of :not(script,style,template,link,input[type=hidden])),
.master-wrapper-main > * > :nth-last-child(1 of :not(script,style,template,link,input[type=hidden])),
.master-wrapper-main > * > * > :nth-last-child(1 of :not(script,style,template,link,input[type=hidden])),
.master-wrapper-main > * > * > * > :nth-last-child(1 of :not(script,style,template,link,input[type=hidden])),
.master-wrapper-main > * > * > * > * > :nth-last-child(1 of :not(script,style,template,link,input[type=hidden])),
.master-wrapper-main > * > * > * > * > * > :nth-last-child(1 of :not(script,style,template,link,input[type=hidden])){margin-bottom:0;}
/* puste akapity z edytora CMS (topiki, newsy, bloki tematów) — mają wyłącznie marginesy */
.master-wrapper-main p:empty{margin:0;}