/* Style sklepu (filtru.pl / filtrysf.pl / filtroneo.pl) — JEDEN plik dla wszystkich kanałów, ładowany z layoutu (`sklep/layout.blade.php`)
   z `?v=<md5 treści>` i długim cache (public/.htaccess). Wydawany z gitem razem z kodem (nie przez Vite — to NIE jest CSS panelu).
   ⚠ Jedyna wartość zależna od kanału, `--ziel-tlo-g` (hover CTA), jest wstawiana INLINE w layoucie — tu jej nie definiujemy.
   ⚠ Plik statyczny: żadnej składni Blade (podwójne nawiasy klamrowe, dyrektywy @…). Komentarze CSS wolno — nie trafiają już do HTML każdej strony. */
:root{
    /* Nazwy tokenów zostają z briefu 1.2 (używa ich ~20 widoków) — zmieniają się
    WARTOŚCI na paletę v0.6.1: papier = tło strony, atrament = granat. */
    --papier:#F4F5F7; --powierzchnia:#F4F5F7; --atrament:#252B42; --atrament-g:#1C2135;
    /* Akcent (akcja + potwierdzenia) jest CECHĄ KANAŁU; -g = hover CTA. */
    --ziel:#62BB46;        /* jasna zieleń: akcent BEZ tekstu (kreska, grzbiety, focus) */
    --ziel-tlo:#509c18;    /* zielona podkładka pod granatowy tekst (12,3:1) #509c18 #e8f4df */
    --ziel-tlo-h:#e8f4df;  /* hover zielonego tła (9,5:1) */
    --mut:#4C5163;         /* tekst drugorzędny — 7,9:1 na bieli */
    --krawedz:rgba(37,43,66,.14);
    /* Zgłoszenie usera 26.09 — sklep nie miał WŁASNEGO tokenu koloru błędu (tylko
         skin zaplecza ma `--rdza`, sklep ma osobny CSS); komunikaty błędów renderowały
         się bez koloru. `--blad-tlo` to jasna podkładka pod alert (analogicznie do
         `--ziel-tlo-h` przy zieleni). Informacyjne komunikaty (session('info')) dostają
         istniejący `--ziel-tlo` — to już ustalony w tym pliku kolor „potwierdzenia"
         (`.ok-rdza`), nie potrzeba osobnego tokenu na „info". */
    --blad:#B3261E; --blad-tlo:#FDECEA;
}
*{box-sizing:border-box}
body{margin:0;background:var(--papier);color:var(--atrament);
    font:16px/1.55 -apple-system,"Segoe UI",Roboto,Arial,sans-serif}
a{color:var(--atrament)}
a:hover{color:var(--ziel-tlo)}
.mono{font-family:ui-monospace,Consolas,Menlo,monospace}
.chip{display:inline-block;font-family:ui-monospace,Consolas,monospace;font-size:.9em;
    background:var(--powierzchnia);border:1px solid rgba(37,43,66,.2);border-radius:5px;
    padding:.1rem .45rem;white-space:nowrap}
.oem-chipsy{display:flex;flex-wrap:wrap;gap:.3rem;align-items:center;margin-top:.8rem}
.oem-chipsy .chip{font-size:.7rem;padding:0 .35rem}
.oem-chipsy .marka-oem{font-size:.66rem;text-transform:uppercase;letter-spacing:.5px;color:var(--mut);font-weight:600;margin-left:.4rem}
.oem-chipsy .marka-oem:first-child{margin-left:0}
.oem-chipsy a.chip{text-decoration:none;background:var(--ziel-tlo-h);border-color:rgba(43,97,25,.35)}
.oem-chipsy .szary{font-size:.76rem}
.karta-sekcja.oem-blok{margin-top:2.8rem;padding-top:1.4rem;border-top:1px solid var(--krawedz)}
.odznaka-domyslna{display:inline-block;font-family:inherit;font-size:.75rem;color:var(--mut);
    background:var(--powierzchnia);border:1px solid var(--krawedz);border-radius:22px;
    padding:.15rem .6rem;white-space:nowrap}
.btn-rdza{display:inline-flex;align-items:center;justify-content:center;text-align:center;
    background:var(--ziel-tlo);color:#fff;border:0;border-radius:18px;
    font-size:1rem;font-weight:700;line-height:normal;padding:.8rem 2.6rem;min-height:48px;cursor:pointer;
    text-decoration:none;font-family:inherit}
.btn-rdza:hover{background:var(--ziel-tlo-g);color:#fff}
.btn-rdza.btn-szary{background:var(--mut)}
.btn-rdza.btn-szary:not(.btn-stan):hover{background:var(--atrament)}
.btn-rdza.btn-szary:focus-visible{outline:2px solid var(--ziel);outline-offset:2px}
/* Stan bez akcji („na zamówienie", „dostępny") — ten sam szary przycisk co zapytanie na
     karcie, tylko bez reakcji na najechanie i bez kursora-ręki: to <span>, nie przycisk. */
.btn-rdza.btn-stan{cursor:default}
.ok-rdza{color:var(--ziel-tlo);font-weight:600}
.przycisk-koszyka{position:relative;display:inline-flex}
.w-koszyku{position:absolute;top:-8px;left:-8px;z-index:1;min-width:18px;height:18px;padding:0 4px;box-sizing:border-box;
    display:inline-flex;align-items:center;justify-content:center;background:#fff;color:var(--ziel-tlo);
    border:2px solid var(--ziel-tlo);border-radius:9px;font-size:11px;font-weight:700;line-height:1;
    font-variant-numeric:tabular-nums;pointer-events:none}
.tylko-czytnik{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip:rect(0,0,0,0);white-space:nowrap;border:0}
.koszyk-blad{flex-basis:100%;margin:.2rem 0 0;font-size:.85rem;font-weight:600;color:var(--blad);text-align:right}
.kup .koszyk-blad{text-align:left}
.kup-pasek .koszyk-blad{position:absolute;bottom:100%;left:0;right:0;margin:0;padding:.4rem 1rem;
    background:var(--blad-tlo);text-align:left}
.koszyk-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
    padding:1rem;background:rgba(28,33,53,.55)}
.koszyk-modal[hidden]{display:none}
.koszyk-modal-okno{box-sizing:border-box;width:100%;max-width:30rem;max-height:100%;overflow:auto;background:#fff;
    border-radius:12px;padding:1.25rem 1.25rem 1rem;box-shadow:0 12px 40px rgba(0,0,0,.3)}
.koszyk-modal-okno:focus{outline:none}
.koszyk-modal-tytul{margin:0 0 .9rem;font-size:1.25rem;color:var(--atrament)}
.koszyk-modal-produkt{display:flex;gap:.9rem;align-items:center}
.koszyk-modal-foto{flex:0 0 auto;width:72px;height:80px;object-fit:contain;background:#fff}
.koszyk-modal-foto[hidden]{display:none}
.koszyk-modal-opis{min-width:0;overflow-wrap:anywhere}
.koszyk-modal-nazwa{display:block;font-weight:600}
.koszyk-modal-cena{display:block;margin-top:.2rem;font-variant-numeric:tabular-nums}
.koszyk-modal-komunikat{margin:.9rem 0 0;padding:.5rem .7rem;border:1px solid var(--krawedz);
    border-left:4px solid var(--ziel-tlo);border-radius:6px}
.koszyk-modal-komunikat[hidden]{display:none}
.koszyk-modal-akcje{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.1rem}
.btn-rdza.koszyk-modal-kontynuuj{background:#fff;color:var(--atrament);border:1px solid var(--krawedz)}
.btn-rdza.koszyk-modal-kontynuuj:hover{background:var(--powierzchnia);color:var(--atrament)}
.koszyk-modal .btn-rdza:focus-visible{outline:2px solid var(--atrament);outline-offset:2px}
@media(max-width:767.98px){
    .koszyk-modal{align-items:flex-end;padding:0}
    .koszyk-modal-okno{max-width:none;border-radius:14px 14px 0 0;padding-bottom:calc(1rem + env(safe-area-inset-bottom))}
    .koszyk-modal-akcje .btn-rdza{flex:1 1 100%}
}
.szary{color:var(--mut)}
/* Okruszki bez podkreślenia w spoczynku: ścieżka to nawigacja pomocnicza, a ciąg
podkreślonych członów konkuruje wzrokowo z treścią strony. Podkreślenie wraca na
hover, bo po jego zdjęciu nic innego nie odróżnia linku od bieżącej pozycji. */
.okruszki a{text-decoration:none}
.okruszki a:hover{text-decoration:underline;text-underline-offset:3px}
/* Wyśrodkowane GLOBALNIE (prośba usera 24.09) — JEDNA reguła, bo partial
     `sklep.partials.okruszki` renderuje się w czterech miejscach (layout, karta
     produktu, strona marki, pasmo nagłówka listy) i to jedyny sposób, żeby przy
     kolejnej zmianie któregoś z nich nie rozjechały się z resztą. */
.okruszki{text-align:center}
.kratka{background-image:linear-gradient(rgba(37,43,66,.045) 1px,transparent 1px),
        linear-gradient(90deg,rgba(37,43,66,.045) 1px,transparent 1px);
        background-size:24px 24px}
.karta-biala{background:#fff;border-radius:14px;padding:1.2rem}
/* Audyt ścieżki zakupu 26.09 (Audytor) — linki tekstowe typu „Zmień" mają cel
     dotykowy pod 44×44px na kroku obowiązkowym. Niewidzialny `::before` rozszerzał
     WYŁĄCZNIE obszar kliknięcia — samo pudełko `<a>` zostawało przy naturalnej
     wysokości tekstu (22 px), więc audyt 30.09 (Audytor, prod, 390 px) nadal mierzył
     22 px: pomiar realnego pudełka elementu (`getBoundingClientRect`), nie nakładki
     za nim. Poprawka: `<a>` dostaje PRAWDZIWĄ wysokość 44px (`min-height`+`inline-flex`
     wyśrodkowujący tekst), bez zmiany rozmiaru/wyglądu samego tekstu (`font-size`
     w widoku bez zmian). `::before` zostaje jako zapasowa szerokość — `max(100%,44px)`
     trzyma szerokość linku, gdy tekst jest dłuższy niż 44px („Zmień w koszyku"), i
     podnosi ją do 44px, gdy krótszy („Zmień"). */
.cel-dotykowy{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:44px}
.cel-dotykowy::before{content:'';position:absolute;top:50%;left:50%;
        width:max(100%,44px);height:44px;transform:translate(-50%,-50%)}
.btn-kontur{display:inline-block;background:#fff;border:1px solid var(--krawedz);border-radius:8px;
        padding:.55rem 1.1rem;font-size:.9rem;font-weight:600;text-decoration:none;
        color:var(--atrament);min-height:44px;line-height:2}
.btn-kontur:hover{background:var(--ziel-tlo);border-color:var(--ziel-tlo);color:var(--ziel-tlo)}
.pigulka{font-size:.9rem;font-weight:600;text-decoration:none;color:var(--atrament);
        background:#fff;border:1px solid var(--krawedz);border-radius:22px;padding:.55rem 1rem;
        box-shadow:0 1px 2px rgba(37,43,66,.05)}
.pigulka:hover{border-color:var(--ziel-tlo);background:var(--ziel-tlo);color:var(--atrament)}
/* Hero strony głównej: biała strefa z kratką kreślarską (dwie siatki — 8px i 40px). */
/* HERO strony głównej — arkusz kreślarski. Papier jest BIAŁY i nieprzezroczysty,
bo kratka strony (`.kratka-tlo`) leży pod spodem i tu ma jej nie prześwitywać.
Na desktopie hero zajmuje 80% ekranu: pierwsze, co widać, to jedno pytanie
i jedno pole — reszta strony zaczyna się po przewinięciu. */

@media(min-width:900px){
    /* 80% ekranu, ale nie więcej niż 800 px: na wysokim monitorze samo hero
    rozpychałoby się na dwa ekrany treści, a to wciąż jest jedno pytanie
    i jedno pole. `min()` bierze niższą z wartości. */
    .hero-glowna{min-height:min(80vh,800px);display:flex;align-items:center;justify-content:center}
}

/* KRATKA STRONY: papier milimetrowy — drobna siatka co 8 px i mocniejsza co 40 px,
ta sama para i te same krycia co na paśmie karty produktu (podmienione 27.08 z jednej
siatki 40 px, żeby oba miejsca rysowały ten sam papier).
Ciągnie się w dół i GAŚNIE mniej więcej pod granatowym pasmem. Maska zamiast krycia —
inaczej kratka kończyłaby się widoczną krawędzią. `position:absolute` względem `body`,
więc nie przewija się osobno i nie łapie zdarzeń myszy.
⚠ Kolejność warstw: pierwsza leży na wierzchu, więc grube linie idą przed cienkimi. */
.kratka-tlo{position:absolute;left:0;right:0;/*top:0;*/height:190vh;z-index:0;pointer-events:none;
        background-image:linear-gradient(rgba(37,43,66,.05) 1px,transparent 1px),
        linear-gradient(90deg,rgba(37,43,66,.05) 1px,transparent 1px),
        linear-gradient(rgba(37,43,66,.025) 1px,transparent 1px),
        linear-gradient(90deg,rgba(37,43,66,.025) 1px,transparent 1px);
        background-size:40px 40px,40px 40px,8px 8px,8px 8px;
        -webkit-mask-image:linear-gradient(to bottom,#000 0 62%,transparent 100%);
        mask-image:linear-gradient(to bottom,#000 0 62%,transparent 100%)}
body{position:relative}
main{position:relative;z-index:1}
.pasmo-usp{background:linear-gradient(160deg,var(--atrament),var(--atrament-g));color:#fff;
        border-radius:18px;padding:1.8rem 5rem;display:grid;
        grid-template-columns:1fr auto;gap:2rem;align-items:center}
.pasmo-usp h2{color:#fff}
.kafel-kategorii{border-top:4px solid var(--ziel);display:flex;flex-direction:column;
        gap:.5rem;align-items:flex-start}
.kafel-kategorii__art{align-self:center;height:8rem;display:flex;align-items:center;justify-content:center}
/* 5rem po bokach to 160px — na ekranie 320px zjadłoby połowę szerokości.
Dwa progi, bo między 700 a 1000px pasmo jest już wąskie, ale jeszcze dwukolumnowe. */
@media(max-width:1000px){ .pasmo-usp{padding:1.8rem 2.5rem} }
@media(max-width:700px){ .pasmo-usp{grid-template-columns:1fr;text-align:left;padding:1.6rem 1.4rem} }
header.sklep{background:#e6e6e6;}
header.sklep .wnetrze{max-width:72rem;margin:0 auto;padding:.49rem 1rem;
        display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap}
.logo{font-weight:800;font-size:2.5rem;letter-spacing:-.5px;text-decoration:none;white-space:nowrap}
.logo:hover{color:var(--atrament)}
.logo .kropka{color:#4ea30f;}
/* Kanały z plikiem SVG (`$szablon['logo']`) — reguły tekstowe wyżej dalej obowiązują
   kanały bez własnego logo. Wysokość dobrana pod wizualny rozmiar dawnego napisu;
   `width:auto` trzyma proporcje pliku (800×219). */
.logo-svg{display:block;height:2.3rem;width:auto}
.logo-stopka .logo-svg{height:3.6rem}
/* `margin:0 auto` — po tym, jak pole dobije do `max-width`, algorytm flexa nie ma
już czego rozdzielić między elastyczne pozycje i wolna przestrzeń trafia do
marginesów auto. Dwa auto dzielą ją po połowie, więc pole siada dokładnie w połowie
odstępu między logo a ikonami. */
form.szukaj-pigulka{flex:1 1 16rem;max-width:34rem;margin:0 auto;display:flex;align-items:center;gap:.4rem;
        background:#fff;border:1px solid var(--krawedz);border-radius:18px;padding:4px 4px 4px 16px}
form.szukaj-pigulka:focus-within{outline:2px solid var(--ziel);outline-offset:1px}
form.szukaj-pigulka input{flex:1;min-width:0;border:0;outline:0;background:none;
        font:inherit;font-size:.95rem;color:var(--atrament);padding:.45rem 0}
form.szukaj-pigulka button{flex:0 0 auto;background:var(--ziel-tlo);color:#fff;border:0;border-radius:12px;
        min-height:36px;padding:0 1.2rem;font:inherit;font-size:.85rem;font-weight:700;cursor:pointer}
form.szukaj-pigulka button:hover{background:var(--ziel-tlo-g)}
.naglowek-ikony{display:flex;align-items:center;gap:1.2rem;white-space:nowrap}
/* Telefon: pierwszy rząd to logo + konto + koszyk, drugi to samo pole szukania na
pełną szerokość. Wcześniej szukanie wciskało się między logo a ikony i każde
z trojga dostawało własny rząd. */
@media (max-width:62rem){
    header.sklep .wnetrze{gap:.7rem 1rem}
    header.sklep .logo{order:1}
    header.sklep .naglowek-ikony{order:2;margin-left:auto}
    header.sklep form.szukaj-pigulka{order:3;flex:1 0 100%;max-width:none}
}
/* Widok, który ma własną wyszukiwarkę w treści (główna), ogłasza sekcję
`bez-szukania-mobile`. Poniżej 62rem ta z nagłówka zabiera CAŁY dodatkowy rząd,
żeby zdublować pole widoczne kawałek niżej — chowamy ją dokładnie tam, gdzie
zaczyna się łamać do osobnego wiersza. Na szerokim ekranie zostaje: nie kosztuje
już wtedy żadnego miejsca, a działa jako szukanie utrwalone przy przewijaniu. */
@media (max-width:62rem){
    body.bez-szukania-mobile header.sklep form.szukaj-pigulka{display:none}
}
@media (max-width:420px){
    header.sklep .wnetrze{flex-wrap:nowrap;gap:.4rem;padding:.5rem .75rem}
    header.sklep .logo{font-size:clamp(1.5rem,8vw,2.5rem);max-width:40vw;min-width:0;overflow:hidden}
    header.sklep .logo-svg{width:100%;height:auto;max-height:2.3rem}
    header.sklep .naglowek-ikony{gap:.5rem;min-width:0}
    header.sklep .naglowek-ikony a:first-child span:last-child{display:none}
    header.sklep form.szukaj-pigulka{display:none}
    body:not(.bez-szukania-mobile) header.sklep .wnetrze{flex-wrap:wrap}
    body:not(.bez-szukania-mobile) header.sklep form.szukaj-pigulka{display:flex;flex:0 0 auto;width:100%;box-sizing:border-box}
}
.naglowek-ikony a{text-decoration:none;font-size:.9rem;display:inline-flex;align-items:center;gap:.4rem}
.naglowek-ikony .znaczek-ikony{position:relative;display:inline-flex;flex:0 0 auto}
.naglowek-ikony .licznik{position:absolute;top:-6px;right:-8px;background:var(--ziel-tlo);color:#fff;
        font-size:11px;font-weight:700;line-height:1;border-radius:8px;min-width:16px;height:16px;
        display:inline-flex;align-items:center;justify-content:center;padding:0 4px}
/* Granatowy pasek nawigacji. Jedna linia na desktopie; poniżej 62rem zawija się,
bo sześć pozycji nie zmieści się na telefonie bez zjadania czytelności. */
nav.menu-typy{background:var(--atrament);position:relative;z-index:30}
/* Kreska 5px pod paskiem. `::after` jako zwykły blok — nie `border-bottom`, bo
obramowania nie przyjmują gradientu. Granat leci ze zmiennej, żeby szedł za paskiem
nad sobą; zieleń jest literałem, bo `--ziel-tlo` zależy od kanału, a ta kreska ma
wyglądać tak samo wszędzie. */
nav.menu-typy::after{content:"";display:block;height:5px;
        background:linear-gradient(90deg,var(--atrament) 0%,#509C18 32%,#509C18 68%,var(--atrament) 100%)}
nav.menu-typy .wnetrze{max-width:72rem;margin:0 auto;padding:0 1rem;
        display:flex;flex-wrap:wrap;align-items:stretch}
/* Odstęp .68rem, nie .8rem: przy ośmiu pozycjach brakowało 11 px do jednej linii
na ekranie 1024 px, a to taniej niż wyrzucanie pozycji albo skracanie nazwy. */
.menu-typy .poz{color:#fff;font-size:.9rem;text-decoration:none;padding:.75rem .68rem;
        display:inline-flex;align-items:center;white-space:nowrap;cursor:pointer;
        list-style:none;min-height:44px;box-sizing:border-box}
.menu-typy .poz::-webkit-details-marker{display:none}
.menu-typy .poz:hover{background:var(--atrament-g);color:#fff;text-decoration:none}
/* Klawiatura dostaje WŁASNY wskaźnik. Sama zmiana tła nie wystarcza jako oznaczenie
fokusu — różnica atrament/atrament-g to 1,2:1, poniżej progu 3:1 z WCAG 1.4.11. */
.menu-typy .poz:focus-visible{background:var(--atrament-g);color:#fff;text-decoration:none;
        outline:2px solid var(--ziel);outline-offset:-2px}

/* Dwa warianty tego samego spisu: pasek dla szerokiego ekranu i szuflada dla telefonu.
Nieużywany jest `display:none`, więc nie istnieje ani dla oka, ani dla czytnika ekranu.
(Próba odsłonięcia CSS-em zawartości zamkniętego <details> rysuje pozycje, ale
`checkVisibility()` zwraca dla nich `false` — nawigacja znikała z drzewa dostępności.) */
.menu-typy .pozycje{display:flex;flex-wrap:wrap}
.menu-typy .pozycje-pasek{display:none}
.menu-typy .zwijane{margin-left:auto}

@media (min-width:62.0625rem){
    .menu-typy .pozycje-pasek{display:flex;flex:1 1 auto;min-width:0}
    .menu-typy .zwijane{display:none}
    /* Kontakt jest w kodzie pierwszy (dla telefonu), na pasku ma być ostatni. */
    .menu-typy .poz-kontakt{order:9}
    /* Telefon (prośba usera 25.09) — TUŻ ZA Kontaktem, więc jeden order wyżej. */
    .menu-typy .poz-telefon{order:10}
}
/* Krok — prośba usera 25.09: 1024 px jest już ciasne (patrz komentarz o ośmiu
     pozycjach niżej) — telefon na szerokim pasku traci ikonkę i dostaje mniejszą
     czcionkę, zamiast pchać menu do drugiej linii. */
@media (min-width:62.0625rem) and (max-width:80rem){
    .menu-typy .poz-telefon .ikona-telefon{display:none}
    .menu-typy .poz-telefon{font-size:.82rem}
}

/* Rozwijka: natywne <details>, panel wypuszczony pod pasek. */
.menu-typy .rozwijka{position:relative}
.menu-typy .rozwijka > summary::after{content:"▾";margin-left:.4rem;font-size:.75em;opacity:.85}
.menu-typy .rozwijka[open] > summary{background:var(--atrament-g)}
.menu-typy .lista-menu{position:absolute;top:100%;left:0;z-index:40;
        /* Grubość i zieleń jak w kresce pod paskiem nawigacji. */
        background:#fff;border-top:5px solid #509C18;border-radius:0 0 10px 10px;
        box-shadow:0 12px 28px rgba(37,43,66,.18);padding:.5rem;
        min-width:14rem;max-width:min(48rem,94vw)}
.menu-typy .lista-menu.kolumny{display:grid;grid-template-columns:repeat(3,minmax(12rem,1fr));gap:0 .3rem}
.menu-typy .do-prawej .lista-menu{left:auto;right:0}
.menu-typy .lista-menu a{display:flex;justify-content:space-between;gap:1rem;align-items:center;
        color:var(--atrament);text-decoration:none;font-size:.9rem;
        padding:.5rem .6rem;border-radius:6px;min-height:40px;box-sizing:border-box}
.menu-typy .lista-menu a:hover{background:#EDEDEE;text-decoration:none}
/* Fokus klawiatury osobno: samo szare tło na białym panelu to ok. 1,1:1 — za mało
na wskaźnik interfejsu (WCAG 1.4.11 wymaga 3:1), więc dochodzi obwódka. */
.menu-typy .lista-menu a:focus-visible{background:#EDEDEE;text-decoration:none;
        outline:2px solid #509C18;outline-offset:-2px}
.menu-typy .lista-menu .ile{font-family:ui-monospace,Consolas,monospace;font-size:.8rem;color:var(--mut)}

/* Numer telefonu (prośba usera 25.09) — obok „Kontakt": ikonka w stylu reszty
     paska (`.znaczek-ikony`, linia obrysu 1.5, `currentColor`), tekst ze spacjami,
     `tel:` bez nich (budowany w Blade, nie tutaj). */
.menu-typy .poz-telefon{display:inline-flex;align-items:center;gap:.35rem}
.menu-typy .poz-telefon .ikona-telefon{flex:0 0 auto}

@media (max-width:62rem){
    /* Telefon: w pasku zostaje sam „Kontakt" po lewej i hamburger po prawej.
    Reszta chowa się w szufladzie — siedem pozycji zajmowało tu trzy rzędy (144 px)
    i spychało cenę pod krawędź ekranu. */
    .menu-typy .wnetrze{flex-wrap:nowrap;align-items:center}
    .menu-typy .poz{padding:.6rem .7rem;font-size:.88rem}
    .menu-typy .poz-kontakt{order:0}
    /* Numer dostaje MNIEJSZY tekst i chudszy odstęp, żeby zmieścić się obok
         „Kontakt" i hamburgera bez przewijania w poziomie (wymóg usera 25.09). */
    .menu-typy .poz-telefon{order:0;font-size:.8rem;padding-left:.35rem;padding-right:.35rem}
    .menu-typy .zwijane{display:block;margin-left:auto}

    .menu-typy .hamburger{display:flex;align-items:center;justify-content:center;
        width:48px;height:48px;cursor:pointer;list-style:none}
    .menu-typy .hamburger::-webkit-details-marker{display:none}
    .menu-typy .hamburger > span,
    .menu-typy .hamburger > span::before,
    .menu-typy .hamburger > span::after{
        display:block;width:22px;height:2px;background:#fff;border-radius:2px}
    .menu-typy .hamburger > span{position:relative}
    .menu-typy .hamburger > span::before,
    .menu-typy .hamburger > span::after{content:"";position:absolute;left:0}
    .menu-typy .hamburger > span::before{top:-7px}
    .menu-typy .hamburger > span::after{top:7px}
    /* Otwarte = krzyżyk. Transformacja, nie zmiana układu — nic się nie przelicza. */
    .menu-typy .zwijane[open] .hamburger > span{background:transparent}
    .menu-typy .zwijane[open] .hamburger > span::before{top:0;transform:rotate(45deg)}
    .menu-typy .zwijane[open] .hamburger > span::after{top:0;transform:rotate(-45deg)}

    /* Szuflada wychodzi spod paska na pełną szerokość, nie spod samego hamburgera. */
    .menu-typy .zwijane[open] > .pozycje{position:absolute;left:0;right:0;top:100%;z-index:45;
        flex-direction:column;background:var(--atrament);padding:.2rem 1rem .9rem;
        box-shadow:0 14px 28px rgba(37,43,66,.28)}
    .menu-typy .zwijane:not([open]) > .pozycje{display:none}

    /* Rozwijki w szufladzie działają jak harmonijka: lista rozsuwa listę w dół,
    zamiast pływać nad nią osobnym panelem. */
    .menu-typy .rozwijka{position:static;width:100%}
    .menu-typy .lista-menu{position:static;max-width:none;margin:0 0 .4rem;
        border-radius:8px;box-shadow:none}
    .menu-typy .lista-menu.kolumny{grid-template-columns:1fr 1fr}
    .menu-typy .lista-menu a{min-height:48px}
}
main{max-width:72rem;margin:0 auto;padding:1rem}
.cena{font-weight:700;font-variant-numeric:tabular-nums}
table.dane{border-collapse:collapse;width:100%}
table.dane th,table.dane td{border-top:1px solid var(--krawedz);padding:.45rem .3rem;
        text-align:left;font-size:.95rem}
.koszyk-lista{background:#fff;border-radius:8px;padding:.2rem 1rem;margin-bottom:1rem}
.koszyk-lista table.dane td{vertical-align:middle}
.koszyk-lista table.dane tr:first-child td{border-top:0}
/* Audyt ścieżki zakupu 26.09 — cena nie ma prawa złamać się W ŚRODKU wartości,
     niezależnie od szerokości ekranu (widziane jako „3,68 zł" na dwóch liniach). */
.koszyk-lista td.cena{white-space:nowrap}
.koszyk-foto{width:1%;padding-right:.6rem}
.koszyk-foto img{height:70px;width:auto;object-fit:contain;background:#fff;mix-blend-mode:multiply}
.koszyk-nazwa{font-size:1.2rem;font-weight:500}
/* Audyt 26.09 — na 390px kolumna sterowania ilością siedziała W TYM SAMYM wierszu
     co nazwa (tabela nie rozkłada kolumn na węższym ekranie), więc nazwa dostawała
     tylko wąski pasek i łamała się na 3 linie. Wiersz zmienia się w flex-wrap: zdjęcie
     i nazwa na pełnej szerokości u góry, sterowanie ilością/cena/usuń w drugim
     rzędzie — TEN SAM formularz ilości, bez duplikowania go pod inną postacią. */
@media(max-width:560px){
    .koszyk-lista:not(.co-lista) table.dane,
    .koszyk-lista:not(.co-lista) table.dane tbody{display:block}
    .koszyk-lista:not(.co-lista) table.dane tr{display:grid;
        grid-template-columns:56px minmax(0,1fr) auto auto;gap:.45rem .5rem;
        align-items:center;padding:.8rem 0;border-top:0;border-bottom:1px solid var(--krawedz)}
    .koszyk-lista:not(.co-lista) table.dane tr:last-child{border-bottom:0}
    .koszyk-lista:not(.co-lista) table.dane td{display:block;padding:0;border:0;min-width:0}
    .koszyk-lista:not(.co-lista) .koszyk-foto{grid-column:1;grid-row:1}
    .koszyk-lista:not(.co-lista) .koszyk-foto img{width:56px;height:56px}
    .koszyk-lista:not(.co-lista) .koszyk-td-nazwa{grid-column:2/-1;grid-row:1;overflow-wrap:anywhere}
    .koszyk-lista:not(.co-lista) .koszyk-nazwa{font-size:1rem}
    .koszyk-lista:not(.co-lista) .koszyk-td-ilosc{grid-column:1/3;grid-row:2;width:auto!important}
    .koszyk-lista:not(.co-lista) td.cena{grid-column:3;grid-row:2;width:auto!important;text-align:right}
    .koszyk-lista:not(.co-lista) .koszyk-td-usun{grid-column:4;grid-row:2;width:auto!important}
    .koszyk-lista:not(.co-lista) .koszyk-ilosc{gap:.15rem}
    .koszyk-lista:not(.co-lista) .koszyk-ilosc button{min-width:1.9rem}
    .koszyk-lista:not(.co-lista) .koszyk-ilosc input[type=number]{width:2.6rem}
    .koszyk-stopka{grid-template-columns:minmax(0,1fr)}
    .koszyk-kupon summary{white-space:nowrap}
}
/* Lista pozycji na stronie zamówienia (`sklep.checkout`). Na telefonie ilość schodzi
   pod nazwę, bo jako osobna kolumna ściskała nazwę do kilku liter na wiersz; kwota
   zostaje w swojej kolumnie. Reguły tylko pod `.co-lista` — koszyk ma w tym miejscu
   formularz ilości i własny układ. */
/* ⚠ Podstawa listy powtórzona tu, zawężona do `.co-lista`, zamiast oprzeć się na regułach
   `.koszyk-*` — 23.09 te żyły wyłącznie w NIEZACOMMITOWANYM redesignie koszyka innej
   sesji, więc lista zamówienia bez nich pokazałaby zdjęcia w pełnym rozmiarze na każdym
   stanie repozytorium, w którym tamtej pracy jeszcze nie ma. Gdy reguły koszyka wejdą,
   te można zwinąć do nich. */
.co-lista{background:#fff;border-radius:8px;padding:.2rem 1rem}
.co-lista table.dane td{vertical-align:middle}
.co-lista table.dane tr:first-child td{border-top:0}
.co-lista .koszyk-foto{width:1%;padding-right:.6rem}
.co-lista .koszyk-foto img{height:70px;width:auto;object-fit:contain;background:#fff;mix-blend-mode:multiply}
.co-lista .koszyk-nazwa{font-size:1.2rem;font-weight:500}
.co-lista a.chip{color:inherit;text-decoration:none}
.co-ilosc-pod{display:block;font-size:.85rem;margin-top:.15rem}
/* Dostawa | płatność po połowie (prośba usera 23.09). `minmax(0,1fr)`, nie `1fr`:
   długa nazwa metody płatności rozpychałaby swoją połowę kosztem drugiej.
   ⚠ Nie wpisuj tu nazw metod, marek ani fraz: ten arkusz jedzie w KAŻDEJ stronie
   razem z komentarzami, a testy sprawdzają obecność takich napisów w HTML-u
   (nazwa bramki płatności w komentarzu położyła dwa testy płatności 23.09).
   Opcje dostawy jedna pod drugą, jak płatności — dwie
   kolumny o różnym układzie w środku czytałyby się jak dwa różne formularze. */
.co-wybor{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 1rem;align-items:start}
.co-wybor h2{margin-top:0}
.co-wybor label[data-dostawa]{display:flex;width:100%;box-sizing:border-box}
@media (max-width:760px){ .co-wybor{grid-template-columns:minmax(0,1fr)} }
@media (max-width:560px){
    .co-produkty{background:#fff}
    .co-produkty .co-lista{background:transparent;border-radius:0;padding:0;margin-bottom:0}
    .co-lista table.dane,.co-lista table.dane tbody{display:block}
    .co-lista table.dane tr{display:grid;grid-template-columns:56px minmax(0,1fr) auto;
        gap:.35rem .6rem;align-items:center;padding:.7rem 0;border-top:0;
        border-bottom:1px solid var(--krawedz)}
    .co-lista table.dane tr:last-child{border-bottom:0}
    .co-lista table.dane td{display:block;padding:0;border:0;min-width:0}
    .co-lista .koszyk-foto{grid-column:1;grid-row:1;width:56px;padding:0}
    .co-lista .koszyk-foto img{width:56px;height:56px}
    .co-lista table.dane tr>td:nth-child(2){grid-column:2/4;grid-row:1;overflow-wrap:anywhere}
    .co-lista .co-ilosc-kol{display:none}
    .co-lista .co-ilosc-pod{display:block}
    .co-lista .koszyk-nazwa{font-size:1rem}
    .co-lista td.cena{grid-column:2/4;grid-row:2;width:auto!important;text-align:right}
    .co-lista .co-dostawa .koszyk-foto{display:none}
    .co-lista .co-dostawa td:nth-child(2){grid-column:1/3;grid-row:1}
    .co-lista .co-dostawa td.cena{grid-column:3;grid-row:1}
}
.koszyk-lista a.chip,.koszyk-odlozone a.chip{color:inherit;text-decoration:none}
.koszyk-lista a.chip:hover,.koszyk-odlozone a.chip:hover{color:var(--ziel-tlo)}
.koszyk-ilosc{display:flex;gap:.25rem;align-items:center}
.koszyk-ilosc button,.koszyk-ilosc input[type=number]{box-sizing:border-box;height:2.2rem;
        border:1px solid var(--krawedz);background:#fff;border-radius:8px;
        font:inherit;font-size:1rem;color:var(--atrament);text-align:center}
.koszyk-ilosc button{min-width:2.2rem;padding:0;cursor:pointer;line-height:1}
.koszyk-ilosc input[type=number]{width:3.2rem;padding:0;font-variant-numeric:tabular-nums;
        -moz-appearance:textfield;appearance:textfield}
.koszyk-ilosc input[type=number]::-webkit-outer-spin-button,
.koszyk-ilosc input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.koszyk-ilosc input[type=number]:focus{outline:2px solid var(--ziel);outline-offset:1px}
.koszyk-stopka{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem 2rem;align-items:start}
.koszyk-kupon summary{display:inline-block;cursor:pointer;list-style:none;
        background:#EDEDEE;color:var(--atrament);border-radius:18px;
        padding:.55rem 1.1rem;font-size:.9rem;font-weight:600}
.koszyk-kupon summary::-webkit-details-marker{display:none}
.koszyk-kupon summary::marker{content:none}
table.dane th{font-weight:400;color:var(--mut);width:40%}
/* Pasmo nagłówka listy (kategoria maszyn, marka) — wzorzec z karty produktu:
biel na całą szerokość okna, papier milimetrowy w ::after (krycia .032/.016 — niżej
Chrome kwantyzuje do tych samych szczebli), zanik siatki ku dołowi, wyśrodkowany H1
i wyszukiwarka. Widok dokłada `okruszki-wlasne` + `pasmo-gorne` i po paśmie
`.pasmo-zejscie` (przejście bieli w papier). */
.pasmo-naglowek{position:relative;z-index:1;background-color:#fff}
.pasmo-naglowek::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
    background-image:linear-gradient(rgba(37,43,66,.032) 1px,transparent 1px),
        linear-gradient(90deg,rgba(37,43,66,.032) 1px,transparent 1px),
        linear-gradient(rgba(37,43,66,.016) 1px,transparent 1px),
        linear-gradient(90deg,rgba(37,43,66,.016) 1px,transparent 1px);
    background-size:40px 40px,40px 40px,8px 8px,8px 8px;
    -webkit-mask-image:linear-gradient(to bottom,#000 0 55%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 0 55%,transparent 100%)}
.pasmo-naglowek .wnetrze{max-width:72rem;margin:0 auto;padding:1rem 1rem 2.2rem}
.pasmo-naglowek h1{font-size:clamp(1.5rem,3.5vw,2.1rem);letter-spacing:-.4px;text-align:center;margin:1.2rem 0 .4rem}
.pasmo-naglowek .licznik{text-align:center;margin:0 0 1.1rem}
.szukaj-ladowanie{display:inline-block;width:1em;height:1em;border:2px solid currentColor;
    border-right-color:transparent;border-radius:50%;vertical-align:-.12em;
    animation:szukaj-obrot .7s linear infinite}
@keyframes szukaj-obrot{to{transform:rotate(360deg)}}
.pasmo-zejscie{position:absolute;left:0;right:0;height:160px;z-index:0;pointer-events:none;
    background:linear-gradient(to bottom,#fff,var(--papier))}
.karta-sekcja{margin-top:1.8rem}
.karta-sekcja h2{font-size:1.15rem;letter-spacing:-.2px;margin:0 0 .6rem}
/* Strona modelu z wieloma maszynami: natywny akordeon <details> („always open" —
   każda sekcja niezależnie). Kotwica `#m-{id}` leży ZA <summary> (tylko tak przeglądarka sama
   rozwija sekcję), więc na nagłówek przewija skrypt w `maszyny/model.blade.php` (#270),
   a `scroll-margin-top` na <summary> zostawia nad nim 12 px. */
/* Tło niesie cała sekcja, nie sam nagłówek (14.09): po rozwinięciu filtry mają
   leżeć na białym pudełku, a nie na tle strony. Obrys zdjęty 22.09. */
details.maszyna-sekcja{background:#fff;border-radius:8px}
.filtry-pojedyncze{background:#fff;border-radius:8px;padding:0 .9rem .9rem}
/* ⚠ Własny znacznik rozwijania zamiast natywnego: `summary` musi być kontenerem flex,
   żeby nagłówek mógł rozsunąć nazwę i cechy na boki, a wtedy natywny `::marker`
   wypada nad treść albo znika (zależnie od przeglądarki). */
details.maszyna-sekcja>summary{cursor:pointer;padding:.6rem .9rem;border-radius:8px;
        display:flex;gap:.5rem;align-items:baseline;list-style:none;scroll-margin-top:.75rem}
details.maszyna-sekcja>summary::-webkit-details-marker{display:none}
/* ⚠ BEZ zmniejszania: natywny `::marker` brał rozmiar z `summary` (1 rem), więc własny
   znacznik mniejszy od tego czytał się jako pomyłka, a nie jako zamiar (zgłoszenie
   usera 14.09). `line-height:1` trzyma go w linii bazowej nazwy. */
details.maszyna-sekcja>summary::before{content:"▸";color:var(--mut);flex:0 0 auto;line-height:1;font-size:2rem}
details.maszyna-sekcja[open]>summary::before{content:"▾"}
.naglowek-maszyny{min-width:0}
details.maszyna-sekcja .naglowek-maszyny{display:flex;flex-wrap:wrap;gap:.2rem 1rem;align-items:baseline;
        justify-content:space-between;margin:0;font-size:1.7rem}
.naglowek-maszyny .nazwa .rodzaj{font-weight:400;color:var(--mut);font-size:.85rem}
.sekcja-glowa{flex:1;min-width:0}
.sekcja-wiersz{display:flex;flex-wrap:wrap;gap:.3rem 1rem;align-items:baseline}
.sekcja-akcja{display:flex;align-items:center;gap:.6rem;margin-left:auto;font-size:.85rem;color:var(--mut)}
.sekcja-przycisk{display:inline-block;background:var(--ziel-tlo);border:1px solid var(--ziel-tlo);border-radius:999px;
        padding:.15rem .8rem;font-size:.85rem;font-weight:600;color:#fff;white-space:nowrap}
details.maszyna-sekcja>summary:hover .sekcja-przycisk{background:var(--ziel-tlo-g);border-color:var(--ziel-tlo-g)}
details.maszyna-sekcja[open]>summary .sekcja-przycisk{background:#fff;color:var(--atrament)}
details.maszyna-sekcja[open]>summary:hover .sekcja-przycisk{background:var(--ziel-tlo-h);border-color:var(--ziel-tlo)}
details.maszyna-sekcja>summary:focus-visible{outline:none}
details.maszyna-sekcja>summary:focus-visible .sekcja-przycisk{outline:2px solid var(--ziel);outline-offset:2px}
details.maszyna-sekcja:not([open]) .sekcja-przycisk .ukryj{display:none}
details.maszyna-sekcja[open] .sekcja-przycisk .pokaz{display:none}
.warianty-maszyny{list-style:none;margin:.25rem 0 0;padding:0;font-size:.85rem;color:var(--mut)}
details.maszyna-sekcja>summary:hover{background:var(--ziel-tlo-h)}
details.maszyna-sekcja[open]>summary{border-radius:8px 8px 0 0;
        border-bottom:1px solid var(--krawedz)}
.sekcja-wnetrze{padding:0 .9rem .9rem}
@media (max-width:560px){
    .sekcja-wnetrze,.filtry-pojedyncze{padding:0 1rem .7rem}
}
.cechy-maszyn{margin:1rem 0 .2rem;padding:.6rem .9rem;background:#fff;border-radius:8px}
.cechy-maszyn[hidden],.cechy-rzad[hidden],.cechy-wyczysc[hidden],.cechy-bez-danych[hidden]{display:none}
.cechy-rzad{display:flex;gap:.3rem .8rem;align-items:center;padding:.2rem 0;min-width:0}
.cechy-etykieta{flex:0 0 8rem;font-size:.85rem;color:var(--mut)}
.cechy-przyciski{display:flex;flex-wrap:wrap;gap:.35rem;min-width:0}
.cecha{font:inherit;font-size:.85rem;color:var(--atrament);background:#fff;border:1px solid var(--krawedz);
        border-radius:999px;padding:.2rem .8rem;cursor:pointer;white-space:nowrap}
.cecha:hover{background:var(--ziel-tlo-h);border-color:rgba(43,97,25,.35)}
.cecha:focus-visible,.cechy-nr input:focus-visible,.cechy-wyczysc:focus-visible{outline:2px solid var(--ziel);outline-offset:2px}
.cecha[aria-pressed=true]{background:var(--ziel-tlo);border-color:var(--ziel-tlo);color:#fff}
.cecha .ile{font-size:.75rem;color:var(--mut)}
.cecha[aria-pressed=true] .ile{color:inherit}
.cechy-nr{display:flex;flex-wrap:wrap;gap:.3rem .8rem;align-items:center;font-size:.85rem;color:var(--mut);padding:.2rem 0}
.cechy-nr input{font:inherit;font-size:.9rem;color:var(--atrament);border:1px solid var(--krawedz);border-radius:8px;
        padding:.25rem .6rem;width:14rem;max-width:100%}
.cechy-stopka{display:flex;flex-wrap:wrap;gap:.3rem 1rem;align-items:center;margin-top:.3rem}
.cechy-wynik{margin:0;font-size:.85rem;color:var(--mut)}
.cechy-wyczysc{font:inherit;font-size:.85rem;font-weight:600;color:var(--atrament);background:#fff;
        border:1px solid var(--krawedz);border-radius:999px;padding:.15rem .8rem;cursor:pointer}
.cechy-wyczysc:hover{background:var(--ziel-tlo-h);border-color:rgba(43,97,25,.35)}
.cechy-bez-danych{margin-top:1.2rem;border:1px dashed var(--krawedz);border-radius:8px}
.cechy-bez-danych>summary{cursor:pointer;padding:.6rem .9rem;font-size:.9rem;font-weight:600;color:var(--mut)}
.cechy-bez-danych>summary:hover{background:var(--ziel-tlo-h)}
.cechy-bez-danych>.cechy-bez-danych-lista{padding:0 .6rem .8rem}
.poza-filtrem{display:none}
.cecha-brak{opacity:.5}
@media (max-width:767px){
    .cechy-rzad{flex-direction:column;align-items:stretch;gap:.2rem}
    .cechy-etykieta{flex:0 0 auto}
    .cechy-przyciski{flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;padding-bottom:.3rem}
    .cecha{flex:0 0 auto}
}
/* Cena i dostępność nie kurczą się poniżej własnej treści — patrz `maszyny._filtry`. */
.wynik-cena{flex:0 0 auto}
/* ⚠ TYP Z BOKU (prośba usera 14.09): etykieta w lewej kolumnie, pozycje po prawej.
   Powód w liczbach — 60 % grup typu w maszynie ma JEDNĄ pozycję, więc pełny nagłówek
   nad wierszem zabierał linię w pionie za coś, co mieści się obok. 13 rem starcza na
   23 nazwy typów (mediana 14 znaków); dwie najdłuższe („Separator powietrze/olej")
   zawijają się na dwie linie, zamiast rozpychać kolumnę pod najgorszy przypadek. */
.typ-wiersz{display:grid;grid-template-columns:13rem minmax(0,1fr);gap:0 1.2rem;
        border-top:1px solid var(--krawedz)}
/* Pierwszy typ ma nad sobą kreskę nagłówka sekcji — druga tuż pod nią czyta się
   jako podwójna linia. Kotwice `#m-{id}` są rodzeństwem przed pierwszym wierszem,
   więc `:first-child` ich nie łapie. */
.sekcja-wnetrze>.typ-wiersz:first-of-type{border-top:0}
.typ-wiersz>.typ-etykieta{padding:.9rem 0}
.typ-wiersz>.typ-etykieta h2,.typ-wiersz>.typ-etykieta h3{font-size:1rem;margin:0;line-height:1.3}
.typ-pozycje{padding-left:1.2rem}
.typ-pozycje .pozycja-link{display:flex;flex:1;gap:.9rem;align-items:center;min-width:0;
        color:inherit;text-decoration:none}
.typ-pozycje .pozycja-link:hover{color:inherit;text-decoration:none}
.typ-pozycje .wynik img{width:120px;height:auto}
.typ-pozycje .nazwa-pozycji{display:block;font-size:18px;font-weight:500;color:var(--atrament);line-height:1.3;text-decoration:none}
.typ-pozycje .pod-pozycja{margin-top:.25rem}
details.maszyna-sekcja .chip{font-size:.7em}
.wynik-cena .btn-do-koszyka,.zamiennik .btn-do-koszyka{display:inline-block;margin-top:.4rem;
        padding:.4rem 2rem;min-height:36px;font-size:.9rem;border-radius:8px}
.typ-pozycje .zamienniki{margin-left:calc(120px + .9rem)}
/* Pierwszy towar nie powtarza kreski — pasmo typu ma już swoją. */
.typ-pozycje>.wynik:first-child{border-top:0}
/* Telefon: kolumna 13 rem zjadłaby połowę ekranu, więc etykieta wraca nad pozycje. */
@media (max-width:700px){
    .typ-wiersz{grid-template-columns:minmax(0,1fr)}
    .typ-wiersz>.typ-etykieta{padding:.8rem 0 .2rem}
    .typ-pozycje{border-left:0;padding-left:0}
}
.maszyna-sekcja span[id]{scroll-margin-top:3.2rem}
/* Wiersz listy maszyn jako KARTA (prośba usera 14.09). Te same wartości co nagłówek
   sekcji maszyny wyżej — lista marki i strona modelu mają wyglądać jak jeden system,
   a nie jak dwa pomysły na tę samą rzecz. `break-inside` jest konieczne, bo lista marki
   stoi w układzie wielokolumnowym i karta rozcięta między kolumnami gubi nagłówek.
   Odstęp dołem, nie górą: w kolumnach margines pierwszego elementu bywa zjadany. */
.maszyna-karta{break-inside:avoid;background:#fff;border:1px solid var(--krawedz);
        border-radius:8px;padding:.6rem .9rem;margin-bottom:.75rem}
.maszyna-karta:hover{border-color:rgba(37,43,66,.3)}
.maszyna-karta>.tytul{font-weight:600;display:block;margin-bottom:.25rem}
/* Rodzaj maszyny stoi PRZY NAZWIE, nie w wierszach — patrz `maszyny._lista`. */
.maszyna-karta>.tytul .rodzaj{font-weight:400;color:var(--mut);font-size:.85rem}
/* Karta zwinięta do samego nagłówka (jedyna wersja bez oznaczeń): liczba filtrów idzie
   na prawo, w tej samej kolumnie co w kartach rozwiniętych, więc lista dalej ma pion. */
.maszyna-karta>.tytul{display:flex;flex-wrap:wrap;gap:.1rem .5rem;align-items:baseline}
.maszyna-karta>.tytul .ile{margin-left:auto;font-weight:400;color:var(--mut);
        font-size:.85rem;white-space:nowrap}
.maszyna-karta.zwinieta{padding-top:.5rem;padding-bottom:.5rem}
.maszyna-karta.zwinieta>.tytul{margin-bottom:0}
/* #263: pod-wiersz o STAŁYCH kolumnach w obrębie karty (lata, rodzaj, silnik, liczba filtrów;
     zestaw liczony per karta w `_lista`, brak wartości = „—" we własnej komórce), więc oko jedzie
     w dół po pionowych liniach zamiast szukać pola w napisie sklejonym kropkami. */
.wersja{display:grid;grid-template-columns:var(--kolumny,minmax(0,1fr) 5.5rem);gap:.1rem .7rem;
        align-items:baseline;padding:.2rem 0;font-size:.92rem;text-decoration:none}
.wersja+.wersja{border-top:1px dotted var(--krawedz)}
.wersja:hover{background:#F8FAFC}
/* Podkreślenie niesie TREŚĆ wiersza, nie cały wiersz: liczba filtrów jest opisem,
   nie celem, a podkreślona całość zamieniała kartę w ścianę linii. */
.wersja .lata, .wersja .rodzaj, .wersja .silnik{text-decoration:underline;text-underline-offset:3px;
        text-decoration-color:rgba(37,43,66,.25);overflow-wrap:anywhere}
.wersja:hover .lata, .wersja:hover .rodzaj, .wersja:hover .silnik{text-decoration-color:currentColor}
.wersja .brak, .wersja:hover .brak{color:var(--mut);text-decoration:none}
/* Cyfry tabelaryczne: „2012–" i „2006–2011" mają wtedy równe słupki. */
.wersja .lata{font-variant-numeric:tabular-nums}
.wersja .bez{color:var(--mut);font-style:italic}
.wersja .ile{color:var(--mut);font-size:.85rem;white-space:nowrap;text-decoration:none;text-align:right}
/* Telefon: pola jedno pod drugim w TEJ SAMEJ kolejności co na szerokim ekranie (lata,
     rodzaj, silnik), liczba filtrów w prawym górnym rogu wiersza. Puste komórki „—" się
     chowają — w pionowym stosie same myślniki tylko wydłużałyby wiersz. */
@media (max-width:560px){
    .wersja{grid-template-columns:minmax(0,1fr) auto;gap:0 .6rem}
    .wersja>span{grid-column:1}
    .wersja .ile{grid-column:2;grid-row:1}
    .wersja .brak{display:none}
}
/* Tekst z `tresc` (typy filtrów, producenci, marki i modele maszyn, kategorie, wpisy
blogu) — JEDEN styl dla wszystkich miejsc, dotąd każdy widok miał własny inline.
Konwencja tekstów (skill `seo-tekst`): zaczynają się od <h2>, H1 daje widok; w środku
H2/H3, listy, <strong> na indeksach — klient je przepisuje, więc mają być wyraźne.
42rem to ok. 70 znaków w wierszu. Całość jest widoczna — bez „czytaj więcej", bo
Google ma widzieć pełny tekst (typy filtrów do 2 500 słów). Tabela, obrazek i ramka
zdarzają się w importach ze starego sklepu — mają się zmieścić, nie wystawać. */
.tresc{max-width:42rem;line-height:1.6}
.tresc h2{font-size:1.25rem;letter-spacing:-.2px;margin:1.6rem 0 .5rem}
.tresc h2:first-child{margin-top:0}
.tresc h3{font-size:1.05rem;margin:1.3rem 0 .4rem}
.tresc h4{font-size:1rem;margin:1.1rem 0 .3rem}
.tresc p{margin:0 0 .8rem}
.tresc ul,.tresc ol{margin:0 0 .9rem;padding-left:1.4rem}
.tresc li{margin:.2rem 0}
.tresc li p{margin:0}
.tresc strong,.tresc b{font-weight:700}
.tresc hr{border:0;border-top:1px solid var(--krawedz);margin:1.2rem 0}
.tresc img{max-width:100%;height:auto}
.tresc table{border-collapse:collapse;width:100%;margin:0 0 1rem;font-size:.95rem}
.tresc th,.tresc td{border-top:1px solid var(--krawedz);padding:.4rem .3rem;text-align:left;vertical-align:top}
.tresc iframe{max-width:100%}
@media(min-width:992px){
    .tresc.tresc-2kol{max-width:none;column-count:2;column-gap:3rem}
}
.tresc-2kol h2,.tresc-2kol h3,.tresc-2kol h4{break-after:avoid}
.tresc-2kol p,.tresc-2kol li,.tresc-2kol ul,.tresc-2kol ol,.tresc-2kol table,.tresc-2kol figure,.tresc-2kol details,.tresc-2kol img,.tresc-2kol blockquote{break-inside:avoid}
.tresc-2kol img,.tresc-2kol table{max-width:100%}
.tresc-2kol table{display:block;overflow-x:auto}
.wynik{display:flex;gap:.9rem;padding:.8rem 0;border-top:1px solid var(--krawedz);align-items:center}
.wiersz-produktu{display:grid;grid-template-columns:minmax(0,1fr) 15rem;gap:.75rem 1.2rem;align-items:center;min-width:0}
.wiersz-link{display:grid;grid-template-columns:120px minmax(0,1fr);gap:.75rem;
    align-items:center;color:inherit;text-decoration:none;min-width:0}
.wiersz-link:hover{color:inherit;text-decoration:none}
.wiersz-foto{width:120px;height:100px;display:flex;align-items:center;justify-content:center}
.wiersz-foto img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.wiersz-opis{min-width:0;display:flex;flex-direction:column;gap:.1rem;overflow-wrap:anywhere}
.wiersz-opis .nazwa-pozycji{font-size:1.05rem;line-height:1.3}
.wiersz-opis .szary{font-size:.82rem}
.wiersz-cena{white-space:nowrap;text-align:right}
.wiersz-prawa{display:flex;flex-direction:column;align-items:flex-end;gap:.4rem;min-width:0}
.wiersz-stara-cena{display:block;font-size:.8rem;text-decoration:line-through;font-weight:400}
.wiersz-jednostka{font-size:.75rem;font-weight:400}
.wiersz-akcje{display:flex;justify-content:flex-end;align-items:center;gap:.6rem;flex-wrap:wrap}
.wiersz-akcje form{display:flex;align-items:center;gap:.4rem;max-width:100%}
.wiersz-akcje input[type=number]{width:3.3rem;min-width:0;height:2.35rem;padding:.2rem .3rem;
    font:inherit;text-align:center;border:1px solid var(--krawedz);border-radius:8px}
.wiersz-akcje .btn-do-koszyka,.wiersz-akcje .btn-stan{margin:0;padding:.45rem .8rem;min-height:2.35rem;
    border-radius:8px;font-size:.85rem;white-space:nowrap}
@media(min-width:768px) and (max-width:1099.98px){
    .typ-pozycje .wiersz-produktu{grid-template-columns:minmax(0,1fr) 12rem}
    .typ-pozycje .wiersz-link{grid-template-columns:72px minmax(0,1fr)}
    .typ-pozycje .wiersz-foto{width:72px;height:80px}
}
@media(max-width:767.98px){
    .wiersz-produktu{grid-template-columns:72px minmax(0,1fr);gap:.3rem .75rem;align-items:start}
    .wiersz-link{grid-column:1/-1;grid-row:1/3;grid-template-columns:subgrid;grid-template-rows:subgrid;align-items:start}
    .wiersz-foto{width:72px;height:80px;grid-row:1/3}
    .wiersz-opis{grid-column:2;grid-row:1}
    .wiersz-prawa{display:contents}
    .wiersz-cena{grid-column:2;grid-row:2;align-self:end;text-align:right;white-space:normal}
    .wiersz-akcje{grid-column:2;grid-row:3}
    .wiersz-stara-cena{display:inline}
    .typ-pozycje .zamienniki{margin-left:calc(30px + .9rem)}
}
/* Zamienniki pod pozycją „na zamówienie" (`Sklep\Zamienniki`). Wcięcie równe szerokości
zdjęcia wiersza głównego + odstęp, żeby było widać, że to jego pod-wiersze, a nie
kolejne filtry maszyny. */
/* Blok producenta na stronie maszyny: nagłówek marki + co obejmuje jej zestaw.
Sekcje typów w środku dostają wcięcie i mniejszy nagłówek, żeby było widać, że należą
do marki, a nie stoją obok niej. */
/* ⚠ Kreska cienka i w kolorze krawędzi (zgłoszenie usera 14.09). Dwupikselowa linia
   atramentem powstała, gdy bloki producenta leżały wprost na tle strony; wewnątrz
   pudełka sekcji czytała się jak podział całej strony, a nie jak podział treści.
   Rozdziela tu nazwa producenta i odstęp — obrys ma tylko potwierdzać, nie krzyczeć. */
.marka-blok{margin-top:1.6rem;border-top:1px solid var(--krawedz);padding-top:.7rem}
.marka-blok h2{margin:0}
.marka-blok .podsumowanie{margin:.2rem 0 0;font-size:.9rem}
/* Blok drobnego producenta, którego gniazda pokrywa komplet wyżej — zwinięty i cichszy
   od pełnych bloków, ale nadal otwieralny: to sprzedawalny towar (FiltryMaszyny). */
.szum-blok{border-top:1px solid var(--krawedz);margin-top:1.4rem}
.szum-blok>summary{cursor:pointer;font-weight:600;padding:.3rem 0}
.szum-blok>summary .szary{font-weight:400;font-size:.85rem}
.karta-sekcja.w-marce{margin-top:1rem}
.karta-sekcja.w-marce h3{font-size:1rem;margin:0 0 .3rem}
.zamienniki{margin:0 0 .5rem 4.6rem}
.zamiennik{display:flex;gap:.8rem;align-items:center;padding:.4rem .6rem;border-radius:8px;
        text-decoration:none;color:var(--atrament);font-size:.9rem}
.zamiennik-link{display:flex;flex:1;gap:.8rem;align-items:center;min-width:0;
        color:inherit;text-decoration:none}
.zamiennik-link:hover{color:inherit;text-decoration:none}
.zamiennik:hover{background:#fff;color:var(--atrament);text-decoration:none}
.zamiennik img{width:44px;height:44px;object-fit:contain;background:#fff;border-radius:4px;mix-blend-mode:multiply}
.zamiennik .bez-foto{width:44px;height:44px;border:1px solid var(--krawedz);border-radius:4px}
.zamiennik .strzalka{color:var(--mut)}
.zamiennik .opis{flex:1;min-width:0;display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;font-size:1rem}
.zamiennik .cena{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.zamiennik .stan{font-size:.82rem;white-space:nowrap;min-width:7rem;text-align:right}
details.wiecej-zam > summary{list-style:none;cursor:pointer;width:max-content;margin:.15rem 0 0 1.9rem;
        font-size:.82rem;color:var(--mut);background:#EDEDEE;border-radius:14px;padding:.2rem .8rem}
details.wiecej-zam > summary::-webkit-details-marker{display:none}
details.wiecej-zam > summary::after{content:" ▾"}
details.wiecej-zam[open] > summary::after{content:" ▴"}
details.wiecej-zam > summary:hover{color:var(--atrament)}
@media(max-width:560px){ .zamienniki{margin-left:1.2rem} .zamiennik .stan{min-width:0} }
.wynik img{width:64px;height:64px;object-fit:contain;background:#fff;border-radius:6px;mix-blend-mode:multiply}
.stopka{background:var(--atrament);border-top:4px solid var(--ziel);margin-top:2.5rem;
        color:rgba(255,255,255,.75);font-size:.85rem}
.stopka .wnetrze{max-width:72rem;margin:0 auto;padding:1rem}
/* Układ usera 25.09 (wzór aj-filtry.pl — TYLKO układ, dane WYŁĄCZNIE nasze z
     `DaneFirmy`): pas górny (logo + dwa CTA kontaktowe) nad czterema kolumnami
     treści + pasek dolny z płatnościami. Linkujemy WYŁĄCZNIE strony, które
     istnieją — martwy odnośnik w stopce to 404 podany klientowi jako obietnica. */
/* Poprawka usera 25.09: trzy RÓWNE kolumny (logo+hasło | e-mail | telefon) —
     `grid`, nie `flex`, żeby 33/33/33 trzymało się niezależnie od tego, który
     z bloków akurat jest widoczny (pusty telefon/e-mail zostawia po prostu
     pustą kolumnę, nie przesuwa proporcji reszty). */
.stopka-gorna{display:grid;grid-template-columns:repeat(3,1fr);align-items:center;gap:1.5rem 2rem;
    max-width:72rem;margin:0 auto;padding:1.75rem 1rem;border-bottom:1px solid rgba(255,255,255,.15)}
/* Siatka domyślnie liczy minimalną szerokość kolumny z NIEZAWINIĘTEJ treści —
     kanał bez skonfigurowanego logo (`config/szablon.php`) dostaje tekstowe
     zastępstwo (`.logo{white-space:nowrap}`, 4.3rem), które bez tego wypychało
     swoją kolumnę i ściskało e-mail/telefon w wąski pasek po prawej. */
.stopka-gorna > *{min-width:0}
.stopka-cta{display:flex;align-items:center;gap:.75rem}
.stopka-cta svg{flex:0 0 auto;color:var(--ziel)}
.stopka-cta .cta-etykieta{display:block;font-size:.85rem;margin:0 0 .2rem}
.stopka-cta strong{display:block;font-size:1.1rem;color:#fff}
.stopka-siatka{display:grid;grid-template-columns:repeat(4,1fr);gap:1.75rem;
    max-width:72rem;margin:0 auto;padding:2.25rem 1rem 1.5rem}
.stopka-siatka h3{font-size:.9rem;font-weight:700;margin:0 0 .7rem;color:#fff}
.stopka-siatka ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45rem}
.stopka-siatka a{font-size:.9rem}
.stopka-opis{font-size:.9rem;color:rgba(255,255,255,.75);margin:.6rem 0 0;max-width:34ch}
/* Dane rejestrowe firmy w kolumnie „Adres" (partial `stopka-firma`) — każda linia
     osobno, jak na fakturze; nazwa biała jak nagłówki kolumn. */
.stopka-firma{display:flex;flex-direction:column;gap:.2rem;font-size:.9rem;line-height:1.4}
.stopka-firma strong{color:#fff}
.stopka-dol{border-top:1px solid rgba(255,255,255,.15)}
.stopka-dol-in{max-width:72rem;margin:0 auto;padding:1rem;display:flex;align-items:center;
    justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.84rem;color:rgba(255,255,255,.75)}
.platnosci{display:flex;gap:.5rem;flex-wrap:wrap}
.platnosci span{border:1px solid rgba(255,255,255,.25);border-radius:5px;padding:.25rem .6rem;
    font-size:.78rem;font-weight:600;color:#fff}
@media(max-width:820px){
    .stopka-gorna{grid-template-columns:1fr;justify-items:start}
    .stopka-siatka{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){ .stopka-siatka{grid-template-columns:1fr} }
.stopka a{color:#fff;text-decoration:none}
/* Link w stopce jest biały tak jak sąsiedni tekst — podkreślenie na hover to
     jedyny sygnał, że to cel do kliknięcia. */
.stopka a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.stopka a:focus-visible{outline:2px solid var(--ziel);outline-offset:2px;border-radius:2px}

/* Pasek zgody na cookies. Przyklejony do dołu okna, nad treścią — ale NIE nakrywa
   jej na stałe: po decyzji znika i nie zostawia po sobie odstępu. Oba przyciski
   mają ten sam rozmiar i ten sam kontrast; różnią się wypełnieniem, nie wagą. */
.zgoda-cookies{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--atrament);
        color:#fff;border-top:4px solid var(--ziel);box-shadow:0 -6px 24px rgba(0,0,0,.18)}
.zgoda-wnetrze{max-width:72rem;margin:0 auto;padding:1rem;display:flex;gap:1.5rem;
        align-items:center;justify-content:space-between;flex-wrap:wrap}
.zgoda-wnetrze > div{min-width:0;max-width:100%}
.zgoda-tytul{font-weight:700;margin:0 0 .3rem;font-size:1rem}
.zgoda-tresc{margin:0;font-size:.88rem;line-height:1.5;max-width:70ch;color:rgba(255,255,255,.88)}
.zgoda-tresc a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.zgoda-przyciski{display:flex;gap:.6rem;flex-wrap:wrap}
.zgoda-btn{font:inherit;font-size:.9rem;font-weight:600;border-radius:18px;cursor:pointer;
        padding:.6rem 1.4rem;min-height:44px;white-space:nowrap}
.zgoda-btn-tak{background:var(--ziel-tlo);color:#fff;border:2px solid var(--ziel-tlo)}
.zgoda-btn-tak:hover{background:var(--ziel-tlo-g)}
.zgoda-btn-nie{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.55)}
.zgoda-btn-nie:hover{border-color:#fff}
.zgoda-btn:focus-visible{outline:2px solid var(--ziel);outline-offset:2px}
@media(max-width:620px){ .zgoda-przyciski{width:100%} .zgoda-btn{flex:1;min-width:0;white-space:normal;padding:.6rem .5rem} }
@media(max-width:560px){
    main :is(.karta-sekcja:not(.marka-blok):not(.szum-blok),.co-karta,.co-podsumowanie-blok,.konto-karta,.konto-menu,.konto-panel-zawartosc,.konto-logowanie-boks,.koszyk-lista:not(.co-lista)){
        margin-left:-1rem;margin-right:-1rem;border-radius:0;border-left:0;border-right:0;padding-left:1rem;padding-right:1rem}
    .konto-logowanie-boks{background:#fff}
    .baner-zamiennik{display:grid!important;grid-template-columns:30% minmax(0,1fr);gap:.5rem!important}
    .baner-zamiennik-foto{width:100%!important;height:auto!important;max-height:90px}
    .baner-zamiennik-opis{min-width:0;overflow-wrap:anywhere}
    .baner-zamiennik-link{grid-column:1/-1;justify-self:center;text-align:center}
    .koszyk-stopka > div:last-child{min-width:0}
    .koszyk-stopka > div:last-child .btn-rdza{max-width:100%;box-sizing:border-box;
        text-align:center;white-space:normal;overflow-wrap:anywhere}
    .koszyk-kupon form{flex-wrap:wrap}
    .koszyk-kupon form input{min-width:0}
    .typ-nawigacja .chip{max-width:100%;white-space:normal;overflow-wrap:anywhere}
    .zamiennik{flex-wrap:wrap}
    .zamiennik-link{flex-basis:100%;max-width:100%;flex-wrap:wrap}
    .zamiennik .opis > span{min-width:0;overflow-wrap:anywhere}
    .zamiennik .cena{white-space:normal;flex-basis:100%;text-align:right}
    .zamiennik form{margin-left:auto;max-width:100%}
    .zamiennik{row-gap:.3rem}
    .zamiennik .btn-do-koszyka{padding:.4rem .7rem;margin-top:0}
}
@media(max-width:480px){
    .wiersz-akcje{grid-column:1/-1;justify-content:flex-end}
    .wiersz-akcje form{min-width:0}
    .wiersz-akcje .btn-do-koszyka{white-space:normal}
}
@media(max-width:360px){
    .wiersz-produktu{grid-template-columns:64px minmax(0,1fr)}
    .wiersz-foto{width:64px}
    .wiersz-akcje input[type=number]{width:2.8rem}
    .wiersz-akcje .btn-do-koszyka,.wiersz-akcje .btn-stan{padding:.4rem .5rem}
}
@media(min-width:700px){ .duo{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:2rem} }

/* Stronicowanie sklepu (08.09). Bootstrapowy paginator z panelu nie miał tu czym
   działać — patrz `sklep/partials/paginacja.blade.php`. */
.stronicowanie{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin-top:1.5rem}
.stronicowanie .str-poz{display:inline-flex;align-items:center;justify-content:center;
  min-width:2.5rem;min-height:2.5rem;padding:0 .7rem;border:1px solid var(--krawedz);
  border-radius:8px;background:#fff;color:var(--atrament);text-decoration:none;font-weight:600}
.stronicowanie a.str-poz:hover{background:var(--ziel-tlo-h);border-color:var(--ziel)}
.stronicowanie .str-biezaca{background:var(--ziel-tlo);border-color:var(--ziel-tlo);color:#fff}
.stronicowanie .str-nieczynna{opacity:.45;font-weight:400}
.stronicowanie .str-licznik{margin:0 .3rem;font-size:.9rem;font-variant-numeric:tabular-nums}
.stronicowanie .str-numery{display:none;gap:.4rem}
@media (min-width:640px){.stronicowanie .str-numery{display:inline-flex}}