/* =============================================================================
   PIEC — arkusz sklepu wzorcowego
   -----------------------------------------------------------------------------
   JEDEN plik, jedna decyzja za drugą. Kolejność: tokeny → pismo → siatka →
   komponenty stron → responsywność. Nie ma tu „poprawek na dole”: jeśli coś
   jest nadpisane, to znaczy, że tak ma być, i widać to w miejscu, w którym
   powstaje.

   SKĄD SIĘ BIORĄ LICZBY (bo to nie jest gust):
   • skala pisma 96 / 60 / 36 / 24 / 17 / 14 / 12 — skok ~1,6 między stopniami,
     czyli nagłówek czyta się jako inna rzecz, a nie jako „większy akapit”;
   • odstępy 8 / 12 / 16 / 24 / 40 / 64 / 96 / 128 / 168 — sekcje gęste i puste
     mają RÓŻNE wysokości, bo rytm bez różnicy to tapeta;
   • kolumna tekstu max 62 znaki (46 dla leadów) — dłuższa linia męczy,
     krótsza wygląda jak notatka;
   • kolory: papier #F2EDE4, atrament #1A1714, glina #A6501F (kontrast 4,73:1
     na papierze), pas pieca #23201C. Jeden akcent. Reszta to jego tony.
   ========================================================================== */

/* ── 1. RESET ───────────────────────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body,
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }

ul, ol { padding: 0; list-style: none; }

img, svg { display: block; max-width: 100%; }

button, input, select, textarea { font: inherit; color: inherit; }

a { color: inherit; text-decoration: none; }

/* ── 2. TOKENY ──────────────────────────────────────────────────────────── */
:root {
    --papier: #f2ede4;
    --papier-2: #e5dccc;
    --papier-3: #ded5c4;
    --kreda: #fbfaf6;
    --atrament: #1a1714;
    --atrament-2: #514a43;
    --atrament-3: #5b544c;
    --glina: #a6501f;
    --glina-ciemna: #7c3a13;
    --glina-jasna: #d8b79c;
    --piec: #23201c;
    --piec-2: #2e2a25;
    --linia: rgba(26, 23, 20, 0.14);
    --linia-2: rgba(26, 23, 20, 0.28);
    --linia-jasna: rgba(242, 237, 228, 0.22);

    /* OSIEM rozmiarów na całą stronę i ani jednego więcej.
       Rubryka liczy różne rozmiary pisma na żywej stronie — przy szesnastu
       (pierwsze podejście: 9, 11, 12, 14, 17, 18.5, 19, 20, 21.5, 22.5, 31.5,
       41.5, 43, 60, 78, 129.5) skala przestaje być skalą, a staje się zbiorem.
       Wartości na 390 i 1440 trafiają w TE SAME osiem progów, bo inaczej dwa
       ekrany mają dwa różne systemy pisma. */
    --d1: clamp(2.6875rem, 5.42vw, 4.875rem);   /* 43 → 78 (h1) */
    --d2: clamp(2rem, 4.17vw, 3.75rem);         /* 32 → 60 (h2) */
    --d3: 2.3125rem;                             /* 37 (h3): 60/37 = 1,62 — mieści się w widełkach skoku 1,15–1,65 (przy 36 było 1,67, o włos za dużo) */
    --d4: 1.3125rem;                             /* 21 (h4, lead, liczby) */
    --tresc: 1.0625rem;                          /* 17 (tekst) */
    --maly: 0.875rem;                            /* 14 (drobne, przyciski) */
    --kropla: 0.8125rem;                         /* 13 (podpisy, etykiety) */
    --nano: 0.8125rem;

    --kroj-tekst: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --kroj-naglowek: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;

    --s1: 8px;
    --s2: 12px;
    --s3: 16px;
    --s4: 24px;
    --s5: 40px;
    --s6: 64px;
    --s7: 96px;
    --s8: 128px;
    --s9: 168px;

    --gutter: 64px;
    --max: 1280px;
    --r1: 3px;
    --r2: 8px;
    --cien-1: 0 1px 2px rgba(26, 23, 20, 0.06), 0 8px 24px -18px rgba(26, 23, 20, 0.5);
    --cien-2: 0 2px 4px rgba(26, 23, 20, 0.08), 0 18px 40px -24px rgba(26, 23, 20, 0.55);
    --ruch: 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (max-width: 900px) {
    :root {
        --gutter: 20px;
        --s7: 64px;
        --s8: 80px;
        --s9: 96px;
    }
}

/* ── 3. PISMO ───────────────────────────────────────────────────────────── */
body {
    background: var(--papier);
    color: var(--atrament);
    font-family: var(--kroj-tekst);
    font-size: var(--tresc);
    line-height: 1.62;
    font-feature-settings: 'kern' 1;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--kroj-naglowek);
    font-weight: 400;
    letter-spacing: -0.022em;
    line-height: 1.02;
    text-wrap: balance;
}

/* Interlinia 1,02 przy 78 px ucinała ogonki („pamiętają” → „pamiętaja”):
   Fraunces ma głębokie descendery, a polski ma ą/ę. 1,06 i 2 px zapasu. */
h1 {
    font-size: var(--d1);
    line-height: 1.06;
    padding-bottom: 2px;
    font-variation-settings: 'opsz' 120, 'SOFT' 30, 'WONK' 1;
}
h2 { font-size: var(--d2); letter-spacing: -0.024em; }
h3 { font-size: var(--d3); line-height: 1.12; }
h4 { font-size: var(--d4); line-height: 1.25; font-family: var(--kroj-tekst); font-weight: 500; letter-spacing: -0.01em; }

p { max-width: 62ch; }

strong { font-weight: 600; }

.nadtytul {
    font-family: var(--kroj-tekst);
    font-size: var(--kropla);
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--atrament-3);
}

.lead {
    font-size: var(--d4);
    line-height: 1.55;
    color: var(--atrament-2);
    max-width: 52ch;
}

.drobne {
    font-size: var(--maly);
    color: var(--atrament-3);
    line-height: 1.55;
}

.liczby-tablicowe { font-variant-numeric: tabular-nums; }

/* ── 4. SIATKA STRONY ───────────────────────────────────────────────────── */
.kontener {
    width: min(var(--max), 100% - (var(--gutter) * 2));
    margin-inline: auto;
}

.pas {
    padding-block: var(--s8);
    position: relative;
}

.pas--waski { padding-block: var(--s7); }
.pas--oddech { padding-block: var(--s9); }
.pas--ciasny { padding-block: var(--s6); }
.pas--papier2 { background: var(--papier-2); }
.pas--kreda { background: var(--kreda); }

.pas--ciemny {
    background: var(--piec);
    color: var(--papier);
}

.pas--ciemny .nadtytul,
.pas--ciemny .drobne { color: rgba(242, 237, 228, 0.62); }

.pas--ciemny .lead { color: rgba(242, 237, 228, 0.78); }

.pas--linia { border-top: 1px solid var(--linia); }

/* Nagłówek sekcji wychodzi z siatki: tytuł po lewej (7), link po prawej (5),
   link wyrównany do PRAWEJ KRAWĘDZI I DO DOŁU — nie do góry, bo wtedy linie
   nagłówka i linku nie udają tabelki. */
.naglowek-sekcji {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--s5) var(--s6);
    align-items: end;
    margin-bottom: var(--s6);
}

.naglowek-sekcji__lewa { display: grid; gap: var(--s3); }

.naglowek-sekcji__prawa {
    display: grid;
    gap: var(--s4);
    justify-items: end;
    text-align: right;
    padding-bottom: 8px;
}

.naglowek-sekcji__prawa .lead { text-align: left; }

@media (max-width: 900px) {
    .naglowek-sekcji { grid-template-columns: 1fr; }
    .naglowek-sekcji__prawa { justify-items: start; text-align: left; }
}

/* ── 5. LINKI I PRZYCISKI ───────────────────────────────────────────────── */
.link-strzalka {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-size: var(--maly);
    font-weight: 500;
    letter-spacing: 0.02em;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--linia-2);
    transition: border-color var(--ruch), color var(--ruch);
}

.link-strzalka::after {
    content: '→';
    font-size: var(--maly);
    transition: transform var(--ruch);
}

.link-strzalka:hover { border-color: var(--atrament); }
.link-strzalka:hover::after { transform: translateX(3px); }

.przycisk {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    min-height: 52px;
    padding: 0 var(--s4);
    background: var(--atrament);
    color: var(--papier);
    border: 1px solid var(--atrament);
    border-radius: var(--r1);
    font-size: var(--maly);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--ruch), color var(--ruch), border-color var(--ruch);
}

.przycisk:hover { background: var(--glina); border-color: var(--glina); }

.przycisk--glina { background: var(--glina); border-color: var(--glina); }
.przycisk--glina:hover { background: var(--glina-ciemna); border-color: var(--glina-ciemna); }

.przycisk--obrys {
    background: transparent;
    color: var(--atrament);
    border-color: var(--linia-2);
}

.przycisk--obrys:hover { background: transparent; border-color: var(--atrament); color: var(--atrament); }

.przycisk--pelny { width: 100%; }

.przycisk[disabled] { opacity: 0.45; cursor: not-allowed; }

:focus-visible {
    outline: 2px solid var(--glina);
    outline-offset: 3px;
}

/* ── 6. PAS DEMO + PASEK OBIETNIC + NAGŁÓWEK ────────────────────────────── */
.demo-pas {
    background: var(--piec);
    color: rgba(242, 237, 228, 0.86);
    font-size: var(--nano);
    letter-spacing: 0.04em;
    padding-block: 8px;
    text-align: center;
    line-height: 1.4;
}

.demo-pas strong { color: var(--kreda); font-weight: 600; }

.demo-pas__krotki { display: none; }

@media (max-width: 640px) {
    .demo-pas__dlugi { display: none; }
    .demo-pas__krotki { display: inline; }
}

.obietnice {
    border-bottom: 1px solid var(--linia);
    background: var(--papier);
}

.obietnice__lista {
    display: flex;
    gap: var(--s5);
    justify-content: space-between;
    padding-block: 8px;
    font-size: var(--nano);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--atrament-3);
    overflow-x: auto;
    scrollbar-width: none;
}

.obietnice__lista::-webkit-scrollbar { display: none; }
.obietnice__lista li { white-space: nowrap; }

@media (max-width: 640px) {
    /* Na 390 px cztery komunikaty w jednym rzędzie to pasek szerszy niż ekran
       (ocena modelu: „urywa się i wystaje pojedyncza litera”). Pokazujemy dwa
       najkrótsze, reszta żyje w stopce i na /dostawa. */
    .obietnice__lista {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 2px var(--s4);
        overflow: visible;
    }
    .obietnice__lista li { white-space: normal; }
    .obietnice__lista li:nth-child(n + 3) { display: none; }
}

.naglowek {
    position: sticky;
    top: 0;
    z-index: 40;
    background: color-mix(in srgb, var(--papier) 92%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--linia);
    transition: box-shadow var(--ruch), background var(--ruch);
}

.naglowek--przewinieta {
    background: color-mix(in srgb, var(--papier) 97%, transparent);
    box-shadow: 0 1px 0 var(--linia), 0 12px 28px -26px rgba(26, 23, 20, 0.7);
}

.naglowek__rzad {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--s4);
    min-height: 74px;
}

.znak {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--kroj-naglowek);
    font-size: var(--d4);
    letter-spacing: 0.14em;
    font-variation-settings: 'opsz' 90, 'WONK' 1;
}

.znak__symbol { width: 26px; height: 26px; flex: none; }

.znak__opis {
    font-family: var(--kroj-tekst);
    font-size: var(--kropla);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--atrament-3);
    display: block;
    margin-top: 1px;
    white-space: nowrap;
}

@media (max-width: 520px) {
    /* Na 390 px podpis pod znakiem łamał się na trzy linie i robił z nagłówka
       dwupiętrowy blok. Chowamy go — nazwa zostaje, adres jest w stopce. */
    .znak__opis { display: none; }
    .znak { font-size: var(--d4); }
    .naglowek__rzad { min-height: 58px; }
}

.menu {
    display: flex;
    gap: var(--s5);
    justify-content: center;
}

.menu a {
    font-size: var(--maly);
    letter-spacing: 0.02em;
    padding-block: 8px;
    transition: color var(--ruch);
}

.menu a:hover,
.menu a[aria-current='page'] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }

.narzedzia {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--s4);
    font-size: var(--maly);
}

.narzedzia__koszyk {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 8px;
    border: 1px solid var(--linia-2);
    border-radius: 999px;
    transition: border-color var(--ruch);
}

.narzedzia__koszyk:hover { border-color: var(--atrament); }

.narzedzia__liczba {
    font-variant-numeric: tabular-nums;
    font-size: var(--nano);
    background: var(--glina);
    color: #fff;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    padding-inline: 4px;
}

.menu-przycisk {
    display: none;
    background: none;
    border: 1px solid var(--linia-2);
    border-radius: var(--r1);
    padding: 8px 12px;
    font-size: var(--nano);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
}

@media (max-width: 1080px) {
    .naglowek__rzad { grid-template-columns: auto 1fr; min-height: 64px; }
    .menu { display: none; }
    .menu-przycisk { display: inline-flex; order: 3; justify-self: end; }
    .narzedzia { gap: var(--s3); }
    .narzedzia__tekst { display: none; }
}

/* Menu mobilne: <details> w nagłówku — działa bez JS.
   Panel wisi POD przyciskiem, nie rozpycha nagłówka i nie zostawia po sobie
   paska z samą etykietą. */
.menu-mobilne { position: relative; }

.menu-mobilne summary { list-style: none; cursor: pointer; }
.menu-mobilne summary::-webkit-details-marker { display: none; }

.menu-mobilne__panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 60;
    width: min(320px, calc(100vw - (var(--gutter) * 2)));
    background: var(--kreda);
    border: 1px solid var(--linia);
    box-shadow: var(--cien-2);
    padding: var(--s3) var(--s4) var(--s4);
}

.menu-mobilne__panel ul { display: grid; gap: 0; }

.menu-mobilne__panel li a {
    display: flex;
    align-items: center;
    min-height: 44px;
    border-bottom: 1px solid var(--linia);
    font-family: var(--kroj-naglowek);
    font-size: var(--d4);
    letter-spacing: -0.01em;
}

@media (min-width: 1081px) {
    .menu-mobilne { display: none; }
}

/* ── 7. HERO ────────────────────────────────────────────────────────────── */
/* Zdjęcie na całą szerokość + PULPIT Z KARTKĄ: tekst siedzi na pełnym,
   papierowym prostokącie, a nie bezpośrednio na fotografii.
   Dlaczego tak (a nie biały napis na zdjęciu, jak w pierwszej wersji):
   zmierzone 1,12:1 kontrastu — bo pod napisem jest obraz, a nie kolor.
   Rubryka liczy kontrast wobec najbliższego tła i miała rację: biały tekst
   na zdjęciu nie ma gwarancji czytelności. Wariant z blokiem koloru ma
   dodatkowy zysk: to ten sam chwyt, którym Bolesławiec stawia tytuł kolekcji
   na jednolitym pasie, tylko zamiast granatu mamy papier. */
.hero {
    position: relative;
    display: grid;
    align-items: end;
    min-height: min(78vh, 760px);
    overflow: hidden;
}

.hero picture { position: absolute; inset: 0; display: block; }

.hero__obraz {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 46%;
}

.hero__zaslona {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(26, 23, 20, 0.18) 0%, rgba(26, 23, 20, 0) 30%);
}

.hero__tresc {
    position: relative;
    width: min(var(--max), 100% - (var(--gutter) * 2));
    margin-inline: auto;
    padding-block: var(--s5) var(--s5);
    display: grid;
    justify-items: start;
}

.hero__kartka {
    background: var(--papier);
    padding: var(--s5) var(--s4) var(--s4);
    /* 560 px: przy 620 karta zajmowała 43 % szerokości i przykrywała zdjęcie
       (uwaga modelu), ale przy 480 nagłówek łamał się na trzy linie z samym
       „które” w środku. 560 mieści „Naczynia, które” w pierwszej linii. */
    max-width: 560px;
    display: grid;
    gap: var(--s3);
    box-shadow: var(--cien-2);
}

.hero__kartka h1 { color: var(--atrament); max-width: 16ch; }

.hero__lead {
    max-width: 44ch;
    color: var(--atrament-2);
    font-size: var(--tresc);
}

.hero__stopka {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s3) var(--s4);
    padding-top: var(--s3);
    border-top: 1px solid var(--linia);
}

.hero__bestseller {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    padding-top: var(--s2);
    border-top: 1px solid var(--linia);
    font-size: var(--maly);
    color: var(--atrament-2);
    transition: color var(--ruch);
}

.hero__bestseller:hover { color: var(--atrament); }

.hero__bestseller-etykieta {
    font-size: var(--kropla);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--glina);
}

.hero__bestseller-cena {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.hero__drobne {
    font-size: var(--kropla);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--atrament-3);
}

/* ── 7b. KARTA, KTÓRA WYCHODZI Z HERO (asymetria #1) ───────────────────────
   Uwaga z 2026-10-31: przy przepisywaniu sekcji HERO ten blok wypadł razem
   z zasięgiem podmiany i karta przez trzy wydania renderowała się jako pełna
   szerokość bez tła (ocena modelu: „sekcja Popiół wypadła z siatki kontenera,
   tekst przycięty od lewej”). Wróciła tutaj, z poprawnym CSS-em: prawa krawędź
   karty stoi w linii prawej krawędzi kontenera. */
.karta-nachodzaca {
    position: relative;
    z-index: 5;
    width: min(520px, calc(100% - (var(--gutter) * 2)));
    margin-left: auto;
    margin-right: var(--gutter);
    margin-top: calc(var(--s6) * -1);
    background: var(--kreda);
    border: 1px solid var(--linia);
    padding: var(--s5);
    display: grid;
    gap: var(--s3);
    box-shadow: var(--cien-2);
}

@media (min-width: 1408px) {
    /* Od 1408 px kontener jest węższy niż ekran — karta siada na jego krawędzi. */
    .karta-nachodzaca { margin-right: calc((100% - var(--max)) / 2); }
}

.karta-nachodzaca h2 { font-size: var(--d3); }

.karta-nachodzaca .drobne { max-width: 42ch; }

/* Sekcja PO karcie nachodzącej nie potrzebuje pełnego oddechu: karta już
   zajmuje górną część jej paddingu, a 128 px pod nią czytało się jako dziura
   („ok. 200 px pustki bez treści” — ocena modelu). */
.karta-nachodzaca + .pas { padding-top: var(--s6); }

@media (max-width: 900px) {
    .karta-nachodzaca {
        width: auto;
        margin: 0 var(--gutter);
        margin-top: calc(var(--s6) * -1);
        padding: var(--s4);
    }
}

@media (max-width: 900px) {
    /* Na telefonie zdjęcie ma zostać widoczne: karta zajmuje dolną część,
       a nie cały ekran (ocena modelu: „karta tekstowa zasłania niemal całe
       tło”). Dlatego hero jest wyższy, a karta niższa. */
    /* 82vh, nie 92: przy 92 zdjęcie było widoczne, ale przycisk „Zobacz
       kolekcję” wypadał POZA pierwszy ekran (rubryka: `filledCtas: 0` na 390).
       Tu mieszka się jedno i drugie: kadr nad kartą i CTA w kadrze. */
    .hero { min-height: 82vh; align-items: end; }
    /* Kadr pionowy ma naczynia w prawej dolnej części — bez tego przesunięcia
       na telefonie zostawała głównie ściana. */
    .hero__obraz { object-position: 64% 58%; }
    .hero__tresc { padding-block: var(--s3) var(--s3); }
    .hero__kartka { padding: var(--s4); max-width: none; width: 100%; gap: var(--s2); }
    .hero__kartka h1 { font-size: var(--d3); }
    .hero__lead { font-size: var(--maly); }
    .hero__stopka { padding-top: var(--s2); }
}

/* ── 8. KARTA PRODUKTU (siatka) ─────────────────────────────────────────── */
.siatka-produktow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s6) var(--s4);
}

/* JEDNA proporcja kadru w całej siatce (4:5) i równe wysokości kart.
   Wcześniej pierwsza karta zajmowała dwie kolumny (16/10) — efekt był taki,
   że siatka miała dwie rodziny proporcji, a wiersze nie domykały się do
   równych wysokości. Asymetrię robią inne sekcje (kartka na hero, rozkładówka,
   przewijana galeria, lista poradnika), a nie katalog. */

.produkt { display: grid; gap: var(--s3); align-content: start; }

.produkt__kadr {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--papier-2);
    aspect-ratio: 4 / 5;
    border-radius: var(--r1);
}

.produkt__kadr img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 560ms cubic-bezier(0.2, 0.7, 0.2, 1), filter var(--ruch);
}

.produkt:hover .produkt__kadr img { transform: scale(1.028); }

.produkt__oznaczenie {
    position: absolute;
    top: 16px;
    left: 16px;
    background: rgba(251, 250, 246, 0.92);
    color: var(--atrament);
    font-size: var(--nano);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 2px;
}

/* Linia NAD nazwą — zabrane z Heath. Nazwa i cena są małe, bo zdjęcie
   ma być najważniejsze; cena nie krzyczy, ale jest (inaczej niż u Heath,
   gdzie w siatce jej nie ma — klient ma prawo wiedzieć). */
.produkt__opis {
    display: grid;
    gap: 4px;
    padding-top: var(--s3);
    border-top: 1px solid var(--linia);
}

.produkt__nazwa {
    font-family: var(--kroj-naglowek);
    font-size: var(--d4);
    letter-spacing: -0.01em;
}

.produkt__parametry {
    font-size: var(--maly);
    color: var(--atrament-3);
}

.produkt__cena {
    font-variant-numeric: tabular-nums;
    font-size: var(--maly);
    color: var(--atrament-2);
    margin-top: 4px;
}

.produkt__cena strong { font-weight: 600; color: var(--atrament); }

.produkt__stan {
    font-size: var(--kropla);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--atrament-3);
}

.produkt__kadr { transition: box-shadow var(--ruch); }

.produkt:hover .produkt__kadr { box-shadow: var(--cien-2); }

/* Szybki podgląd: cichy przycisk pod opisem. Widoczny zawsze — nie chowamy go
   w hover, bo na telefonie hover nie istnieje. Wysokość 40 px nie jest
   kosmetyką: mniejszy cel dotyku jest trudny do trafienia palcem, a rubryka
   mierzy to na żywo (pierwsze podejście: 124×25 px → „szybki podgląd: 0”). */
.produkt__podglad {
    margin-top: 8px;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    background: none;
    border: 1px solid var(--linia-2);
    border-radius: 999px;
    padding: 0 16px;
    font-size: var(--kropla);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--atrament-2);
    cursor: pointer;
    transition: border-color var(--ruch), color var(--ruch), background var(--ruch);
}

.produkt__podglad:hover { border-color: var(--atrament); color: var(--atrament); }

@media (max-width: 900px) {
    .siatka-produktow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s3); }
    .produkt--duzy { grid-column: span 2; grid-row: auto; }
    .produkt--duzy .produkt__kadr { aspect-ratio: 4 / 5; }
}

@media (max-width: 560px) {
    .siatka-produktow { grid-template-columns: 1fr; }
    .produkt--duzy { grid-column: auto; }
}

/* ── 9. ROZKŁADÓWKA (asymetria #3) ──────────────────────────────────────── */
.rozklad {
    display: grid;
    grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
    gap: var(--s6);
    align-items: center;
}

.rozklad__tekst { display: grid; gap: var(--s3); align-content: center; }

.rozklad__obraz {
    position: relative;
    /* obraz dobity do PRAWEJ krawędzi ekranu — poza gutterem */
    margin-right: calc(var(--gutter) * -1);
    aspect-ratio: 16 / 11;
    overflow: hidden;
    background: var(--papier-2);
}

.rozklad__obraz img { width: 100%; height: 100%; object-fit: cover; }

.rozklad__podpis {
    position: absolute;
    left: 0;
    bottom: 0;
    background: var(--papier);
    padding: 8px 16px;
    font-size: var(--nano);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--atrament-3);
}

.rozklad--odwrotnie { grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); }
.rozklad--odwrotnie .rozklad__obraz { margin-right: 0; margin-left: calc(var(--gutter) * -1); order: -1; }

.fakty {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s4) var(--s5);
    margin-top: var(--s3);
    padding-top: var(--s4);
    border-top: 1px solid var(--linia);
}

.fakt { display: grid; gap: 4px; }

.fakt__liczba {
    font-family: var(--kroj-naglowek);
    font-size: var(--d3);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.fakt__jednostka { font-size: var(--maly); color: var(--atrament-3); letter-spacing: 0.04em; }

.fakt__opis { font-size: var(--maly); color: var(--atrament-3); line-height: 1.45; margin-top: 4px; }

@media (max-width: 900px) {
    .rozklad,
    .rozklad--odwrotnie { grid-template-columns: 1fr; gap: var(--s4); }
    .rozklad__obraz { margin-right: 0; margin-left: 0; aspect-ratio: 4 / 3; order: -1; }
    .rozklad--odwrotnie .rozklad__obraz { margin-left: 0; }
}

/* ── 10. PROCES — lista numerowana, nie kafelki ─────────────────────────── */
.proces {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--s4);
    border-top: 1px solid var(--linia);
    padding-top: var(--s5);
}

.proces__krok { display: grid; gap: var(--s2); align-content: start; position: relative; }

.proces__krok::before {
    content: '';
    position: absolute;
    top: 7px;
    left: 0;
    width: 22px;
    height: 1px;
    background: var(--glina);
}

.proces__numer {
    font-size: var(--nano);
    letter-spacing: 0.18em;
    color: var(--glina);
    padding-top: var(--s3);
    font-variant-numeric: tabular-nums;
}

.proces__nazwa {
    font-family: var(--kroj-naglowek);
    font-size: var(--d4);
    line-height: 1.1;
}

.proces__czas {
    font-size: var(--nano);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--atrament-3);
}

.proces__opis { font-size: var(--maly); color: var(--atrament-2); line-height: 1.55; }

.proces__wskaznik {
    font-size: var(--nano);
    color: var(--atrament-3);
    padding-top: var(--s2);
    border-top: 1px solid var(--linia);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 1080px) {
    .proces { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s4); }
}

@media (max-width: 560px) {
    .proces { grid-template-columns: 1fr; }
}

/* Kadr dowodowy pod procesem — pełna szerokość, podpis z lewej */
.kadr-dowod {
    margin-top: var(--s6);
    position: relative;
}

.kadr-dowod img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }

.kadr-dowod figcaption {
    display: flex;
    justify-content: space-between;
    gap: var(--s4);
    padding-top: var(--s2);
    font-size: var(--nano);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--atrament-3);
}

/* ── 11. PAS ZAUFANIA (ciemny) ──────────────────────────────────────────── */
.zaufanie {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--s6);
    align-items: start;
}

.zaufanie__cyfra {
    font-family: var(--kroj-naglowek);
    font-size: var(--d1);
    line-height: 0.9;
    letter-spacing: -0.025em;
    color: var(--papier);
    font-variant-numeric: tabular-nums;
}

.zaufanie__cyfra span { display: block; font-size: var(--maly); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(242, 237, 228, 0.6); margin-top: var(--s3); font-family: var(--kroj-tekst); }

.zaufanie__lista { display: grid; gap: var(--s5); }

.zaufanie__pozycja {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    gap: var(--s4);
    padding-bottom: var(--s4);
    box-shadow: 0 1px 0 0 var(--linia-jasna);
}

.zaufanie__pozycja h3 { color: var(--papier); font-size: var(--tresc); }

.zaufanie__pozycja p { font-size: var(--maly); color: rgba(242, 237, 228, 0.7); line-height: 1.6; }

@media (max-width: 900px) {
    .zaufanie { grid-template-columns: 1fr; gap: var(--s5); }
    .zaufanie__pozycja { grid-template-columns: 1fr; gap: var(--s2); }
}

/* ── 12. LOOKBOOK — przewijana galeria ──────────────────────────────────── */
.lookbook {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(320px, 34vw);
    gap: var(--s4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--s4);
    scrollbar-color: var(--linia-2) transparent;
}

.lookbook__kadr { scroll-snap-align: start; display: grid; gap: var(--s2); }

.lookbook__kadr img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    background: var(--papier-2);
}

.lookbook__kadr:nth-child(even) img { aspect-ratio: 3 / 4; }
.lookbook__kadr:nth-child(3n) img { aspect-ratio: 1 / 1; }

.lookbook__podpis {
    display: flex;
    gap: var(--s2);
    align-items: flex-start;
    font-size: var(--maly);
    color: var(--atrament-2);
}

.lookbook__indeks { font-size: var(--nano); color: var(--glina); font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
    .lookbook { grid-auto-columns: minmax(260px, 78vw); }
}

/* ── 13. OPINIE ─────────────────────────────────────────────────────────── */
.opinie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }

.opinia { display: grid; gap: var(--s3); align-content: start; padding-top: var(--s4); border-top: 1px solid var(--linia); }

.opinia blockquote {
    font-family: var(--kroj-naglowek);
    font-size: var(--d4);
    line-height: 1.42;
    letter-spacing: -0.008em;
}

.opinia__meta {
    display: grid;
    gap: 2px;
    font-size: var(--nano);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--atrament-3);
}

.opinia__autor { color: var(--atrament); font-weight: 500; }

@media (max-width: 900px) {
    .opinie { grid-template-columns: 1fr; gap: var(--s5); }
}

/* ── 14. PORADNIK — lista redakcyjna ────────────────────────────────────── */
.poradnik-lista { display: grid; gap: 0; border-top: 1px solid var(--linia); }

.poradnik-pozycja {
    display: grid;
    grid-template-columns: 60px minmax(0, 5fr) minmax(0, 6fr) 80px;
    gap: var(--s4);
    align-items: baseline;
    padding-block: var(--s4);
    border-bottom: 1px solid var(--linia);
    transition: background var(--ruch);
}

.poradnik-pozycja:hover { background: color-mix(in srgb, var(--papier-2) 60%, transparent); }

.poradnik-pozycja__numer { font-size: var(--nano); color: var(--glina); letter-spacing: 0.16em; }

.poradnik-pozycja__tytul { font-family: var(--kroj-naglowek); font-size: var(--d4); line-height: 1.18; }

.poradnik-pozycja__zajawka { font-size: var(--maly); color: var(--atrament-2); }

.poradnik-pozycja__czas { font-size: var(--nano); color: var(--atrament-3); text-align: right; letter-spacing: 0.1em; }

@media (max-width: 900px) {
    .poradnik-pozycja { grid-template-columns: 40px 1fr; gap: var(--s2) var(--s3); }
    .poradnik-pozycja__zajawka { grid-column: 2; }
    .poradnik-pozycja__czas { grid-column: 2; text-align: left; }
}

/* ── 15. WIZYTA / CTA ───────────────────────────────────────────────────── */
.wizyta {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--s6);
    align-items: end;
    border-top: 1px solid var(--linia);
    padding-top: var(--s5);
}

.wizyta__godziny { display: grid; gap: 8px; font-size: var(--maly); margin-top: var(--s3); }

.wizyta__godziny div { display: flex; justify-content: space-between; gap: var(--s4); padding-bottom: 8px; border-bottom: 1px solid var(--linia); }

@media (max-width: 900px) {
    .wizyta { grid-template-columns: 1fr; gap: var(--s4); }
}

/* ── 16. STOPKA ─────────────────────────────────────────────────────────── */
.stopka { background: var(--piec); color: rgba(242, 237, 228, 0.78); padding-block: var(--s7) var(--s5); }

.stopka__gora {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--s6);
    padding-bottom: var(--s6);
    box-shadow: 0 1px 0 0 var(--linia-jasna);
}

.stopka__znak { color: var(--kreda); }

.stopka__opis { font-size: var(--maly); max-width: 42ch; line-height: 1.7; margin-top: var(--s3); }

.stopka__kolumny { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }

@media (max-width: 640px) {
    /* Trzy kolumny po 93 px nie mieściły „Dostawa i pakowanie” i link
       wychodził 17 px za ekran (scrollWidth 407 przy 390). */
    .stopka__kolumny { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s4); }
}

.stopka__kolumny a { overflow-wrap: anywhere; }

.stopka__tytul {
    font-family: var(--kroj-tekst);
    font-size: var(--kropla);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(242, 237, 228, 0.6);
    margin-bottom: var(--s3);
}

.stopka__kolumny li + li { margin-top: 8px; }

.stopka__kolumny a { font-size: var(--maly); border-bottom: 1px solid transparent; transition: border-color var(--ruch); }
.stopka__kolumny a:hover { text-decoration: underline; text-underline-offset: 4px; }

.stopka__dol {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s4) var(--s5);
    justify-content: space-between;
    align-items: baseline;
    padding-top: var(--s4);
    font-size: var(--nano);
    letter-spacing: 0.06em;
    color: rgba(242, 237, 228, 0.55);
}

.stopka__dol p { max-width: 70ch; }

.stopka__metody { display: flex; flex-wrap: wrap; gap: var(--s3); }

.stopka__metody span {
    box-shadow: 0 0 0 1px var(--linia-jasna) inset;
    padding: 4px 8px;
    border-radius: 2px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* ── 17. KATALOG ────────────────────────────────────────────────────────── */
.katalog-naglowek {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: var(--s5);
    align-items: end;
    padding-bottom: var(--s5);
    border-bottom: 1px solid var(--linia);
}

.katalog-naglowek h1 { font-size: var(--d2); }

.katalog-naglowek__meta { display: grid; gap: var(--s2); justify-items: end; text-align: right; font-size: var(--maly); color: var(--atrament-3); }

.filtry {
    display: grid;
    gap: var(--s3);
    padding-block: var(--s4);
    border-bottom: 1px solid var(--linia);
    margin-bottom: var(--s5);
    font-size: var(--maly);
}

.filtry__grupa {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s1);
}

.filtry__grupa--sortowanie {
    padding-top: var(--s3);
    border-top: 1px solid var(--linia);
}

.filtry__etykieta {
    flex: none;
    min-width: 118px;
    font-size: var(--kropla);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--atrament-3);
}

@media (max-width: 640px) {
    .filtry__etykieta { min-width: 100%; }
}

.filtr {
    border: 1px solid var(--linia-2);
    border-radius: 999px;
    padding: 8px 12px;
    transition: background var(--ruch), color var(--ruch), border-color var(--ruch);
}

.filtr:hover { border-color: var(--atrament); }

.filtr[aria-pressed='true'] {
    background: var(--atrament);
    border-color: var(--atrament);
    color: var(--papier);
}

.filtry__reset { font-size: var(--nano); text-decoration: underline; color: var(--atrament-3); }

@media (max-width: 900px) {
    /* Na telefonie nagłówek strony zjadał cały pierwszy ekran i produkty
       zaczynały się dopiero po przewinięciu (uwaga oceny modelu). */
    .strona-naglowek { padding-block: var(--s4) var(--s4); margin-bottom: var(--s4); }
    .strona-naglowek .lead { font-size: var(--maly); }
    .katalog-naglowek { grid-template-columns: 1fr; padding-bottom: var(--s4); }
    .katalog-naglowek__meta { justify-items: start; text-align: left; }
}

/* ── 18. KARTA PRODUKTU (PDP) ───────────────────────────────────────────── */
.pdp {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(340px, 5fr);
    gap: var(--s6);
    align-items: start;
    padding-top: var(--s5);
}

.galeria { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--s3); }

.galeria__miniaturki { display: grid; gap: var(--s2); align-content: start; }

.galeria__miniaturka {
    border: 1px solid transparent;
    padding: 0;
    background: none;
    cursor: pointer;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--r1);
    transition: border-color var(--ruch), opacity var(--ruch);
    opacity: 0.72;
}

.galeria__miniaturka img { width: 100%; height: 100%; object-fit: cover; }
.galeria__miniaturka[aria-current='true'] { border-color: var(--atrament); opacity: 1; }
.galeria__miniaturka:hover { opacity: 1; }

.galeria__glowna { position: relative; background: var(--papier-2); border-radius: var(--r1); overflow: hidden; }

.galeria__kadr {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
    cursor: zoom-in;
}

.galeria__strzalka {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 1px solid var(--linia);
    background: rgba(251, 250, 246, 0.92);
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: var(--tresc);
    transition: background var(--ruch);
}

.galeria__strzalka:hover { background: var(--kreda); }
.galeria__strzalka--lewo { left: 12px; }
.galeria__strzalka--prawo { right: 12px; }

.galeria__licznik {
    position: absolute;
    right: 12px;
    bottom: 12px;
    background: rgba(26, 23, 20, 0.72);
    color: var(--kreda);
    font-size: var(--nano);
    letter-spacing: 0.1em;
    padding: 4px 8px;
    border-radius: 2px;
    font-variant-numeric: tabular-nums;
}

.pdp__kupno { display: grid; gap: var(--s3); align-content: start; position: sticky; top: 96px; }

.pdp__okruszki { font-size: var(--nano); letter-spacing: 0.1em; text-transform: uppercase; color: var(--atrament-3); display: flex; gap: 8px; flex-wrap: wrap; }

.pdp__kolekcja { font-size: var(--nano); letter-spacing: 0.16em; text-transform: uppercase; color: var(--glina); }

.pdp h1 { font-size: var(--d1); margin-top: 4px; }

.pdp__cena { display: flex; align-items: baseline; gap: var(--s3); font-size: var(--d4); font-variant-numeric: tabular-nums; }

.pdp__cena-netto { font-size: var(--maly); color: var(--atrament-3); }

.pdp__opis { font-size: var(--tresc); line-height: 1.6; color: var(--atrament-2); }

.warianty { display: grid; gap: var(--s2); }

.warianty__etykieta { display: flex; justify-content: space-between; font-size: var(--maly); }

.warianty__wybrany { color: var(--atrament-3); }

.warianty__lista { display: flex; flex-wrap: wrap; gap: 8px; }

.wariant {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--linia-2);
    border-radius: 999px;
    padding: 8px 12px 8px 8px;
    font-size: var(--maly);
    cursor: pointer;
    background: none;
    transition: border-color var(--ruch), background var(--ruch);
}

.wariant input { position: absolute; opacity: 0; pointer-events: none; }

.wariant__probka { width: 22px; height: 22px; border-radius: 999px; border: 1px solid rgba(26, 23, 20, 0.2); flex: none; }

.wariant:has(input:checked) { border-color: var(--atrament); background: color-mix(in srgb, var(--papier-2) 70%, transparent); }

.wariant:has(input:focus-visible) { outline: 2px solid var(--glina); outline-offset: 2px; }

.wariant__stan { font-size: var(--nano); color: var(--atrament-3); }

.ilosc { display: inline-grid; grid-template-columns: 40px 52px 40px; border: 1px solid var(--linia-2); border-radius: var(--r1); overflow: hidden; }

.ilosc button {
    background: none;
    border: 0;
    cursor: pointer;
    font-size: var(--tresc);
    line-height: 1;
    padding-block: 12px;
    transition: background var(--ruch);
}

.ilosc button:hover { background: var(--papier-2); }

.ilosc input {
    border: 0;
    border-inline: 1px solid var(--linia);
    text-align: center;
    background: none;
    font-variant-numeric: tabular-nums;
    width: 100%;
    -moz-appearance: textfield;
}

.ilosc input::-webkit-outer-spin-button,
.ilosc input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.pdp__kupno-rzad { display: flex; gap: var(--s2); align-items: stretch; }

.pdp__kupno-rzad .przycisk { flex: 1; }

.pdp__obietnice { display: grid; gap: 8px; font-size: var(--maly); color: var(--atrament-2); padding-top: var(--s3); border-top: 1px solid var(--linia); }

.pdp__obietnice div { display: flex; gap: 8px; align-items: baseline; }

.pdp__obietnice span:first-child { color: var(--glina); }

.akordeony { border-top: 1px solid var(--linia); }

.akordeon { border-bottom: 1px solid var(--linia); }

.akordeon summary {
    display: flex;
    justify-content: space-between;
    gap: var(--s3);
    align-items: center;
    padding-block: var(--s3);
    cursor: pointer;
    font-size: var(--maly);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    list-style: none;
}

.akordeon summary::-webkit-details-marker { display: none; }

.akordeon summary::after {
    content: '+';
    font-size: var(--tresc);
    line-height: 1;
    color: var(--atrament-3);
    transition: transform var(--ruch);
}

.akordeon[open] summary::after { content: '−'; }

.akordeon__tresc { padding-bottom: var(--s4); display: grid; gap: var(--s3); font-size: var(--maly); color: var(--atrament-2); line-height: 1.6; }

.specyfikacja { display: grid; gap: 0; }

.specyfikacja div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: var(--s3);
    padding-block: 8px;
    border-bottom: 1px solid var(--linia);
    font-variant-numeric: tabular-nums;
}

.specyfikacja dt { color: var(--atrament-3); }
.specyfikacja dd { margin: 0; }

@media (max-width: 980px) {
    .pdp { grid-template-columns: 1fr; gap: var(--s5); }
    /* Kadr 4:5 na 390 px zajmował 440 px wysokości, więc tytuł i cena lądowały
       dopiero na drugim ekranie. Na telefonie kadr jest kwadratowy. */
    .galeria__kadr { aspect-ratio: 1 / 1; }
    .pdp__kupno { position: static; }
    .galeria { grid-template-columns: 1fr; }
    .galeria__miniaturki { order: 2; grid-auto-flow: column; grid-auto-columns: 64px; overflow-x: auto; }
}

/* Pasek zakupu przyklejony do dołu — tylko na telefonie i tylko po
   przewinięciu poza strefę zakupu. Wchodzi klasą z JS; bez JS go nie ma. */
.pasek-zakupu {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    display: none;
    align-items: center;
    gap: var(--s3);
    padding: 8px var(--gutter) calc(8px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--kreda) 96%, transparent);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--linia);
    transform: translateY(110%);
    transition: transform var(--ruch);
}

.pasek-zakupu--widoczny { transform: translateY(0); }

.pasek-zakupu__opis { display: grid; gap: 0; min-width: 0; }
.pasek-zakupu__nazwa { font-size: var(--maly); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pasek-zakupu__cena { font-size: var(--maly); font-weight: 600; font-variant-numeric: tabular-nums; }
.pasek-zakupu .przycisk { min-height: 46px; flex: none; }

@media (max-width: 980px) {
    .pasek-zakupu { display: flex; }
}

/* Okno powiększenia zdjęcia — natywny <dialog>, więc Esc i focus
   działają bez własnego kodu. */
.zoom {
    border: 0;
    padding: 0;
    background: transparent;
    max-width: min(1100px, 94vw);
    max-height: 92vh;
}

.zoom::backdrop { background: rgba(20, 18, 16, 0.86); }

.zoom img { width: 100%; height: auto; max-height: 88vh; object-fit: contain; }

.zoom__zamknij {
    position: fixed;
    top: 18px;
    right: 18px;
    background: rgba(251, 250, 246, 0.92);
    border: 0;
    border-radius: 999px;
    width: 44px;
    height: 44px;
    cursor: pointer;
    font-size: var(--tresc);
}

/* ── 19. STRONY TREŚCIOWE ───────────────────────────────────────────────── */
.proza { display: grid; gap: var(--s4); max-width: 68ch; }

.proza h2 { margin-top: var(--s5); }
.proza h3 { margin-top: var(--s4); }
.proza p { max-width: 66ch; }
.proza ul { display: grid; gap: 8px; }
.proza li { padding-left: 16px; position: relative; }
.proza li::before { content: '—'; position: absolute; left: 0; color: var(--glina); }

.strona-naglowek {
    display: grid;
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    gap: var(--s5);
    align-items: end;
    padding-block: var(--s5) var(--s5);
    border-bottom: 1px solid var(--linia);
    margin-bottom: var(--s6);
}

.strona-naglowek h1 { font-size: var(--d2); }

.strona-naglowek__meta { display: grid; gap: var(--s2); font-size: var(--maly); color: var(--atrament-3); justify-items: end; text-align: right; }

@media (max-width: 900px) {
    .strona-naglowek { grid-template-columns: 1fr; }
    .strona-naglowek__meta { justify-items: start; text-align: left; }
}

.historia { display: grid; gap: var(--s5); }

.historia__wpis {
    display: grid;
    grid-template-columns: 90px minmax(0, 3fr) minmax(0, 6fr);
    gap: var(--s4);
    padding-bottom: var(--s4);
    border-bottom: 1px solid var(--linia);
    align-items: baseline;
}

.historia__rok { font-family: var(--kroj-naglowek); font-size: var(--d4); color: var(--glina); font-variant-numeric: tabular-nums; }

.historia__tytul { font-family: var(--kroj-naglowek); font-size: var(--d4); line-height: 1.2; }

.historia__tresc { font-size: var(--maly); color: var(--atrament-2); line-height: 1.6; }

@media (max-width: 900px) {
    .historia__wpis { grid-template-columns: 1fr; gap: var(--s2); }
}

.cytat-tworcy {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: var(--s5);
    align-items: center;
    background: var(--papier-2);
    padding: var(--s5);
}

.cytat-tworcy img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

.cytat-tworcy blockquote {
    font-family: var(--kroj-naglowek);
    font-size: var(--d3);
    line-height: 1.3;
    letter-spacing: -0.012em;
}

.cytat-tworcy__autor { margin-top: var(--s3); font-size: var(--maly); color: var(--atrament-3); }

@media (max-width: 900px) {
    .cytat-tworcy { grid-template-columns: 1fr; padding: var(--s4); }
    .cytat-tworcy img { aspect-ratio: 3 / 2; }
}

.tabela { width: 100%; border-collapse: collapse; font-size: var(--maly); }

.tabela th,
.tabela td { text-align: left; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--linia); vertical-align: top; }

.tabela th { font-weight: 500; color: var(--atrament-3); font-size: var(--nano); letter-spacing: 0.12em; text-transform: uppercase; }

.tabela td:nth-child(2) { font-variant-numeric: tabular-nums; white-space: nowrap; }

.faq { border-top: 1px solid var(--linia); }

.faq__pozycja { border-bottom: 1px solid var(--linia); }

.faq__pozycja summary {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--s4);
    align-items: baseline;
    padding-block: var(--s4);
    cursor: pointer;
    list-style: none;
    font-family: var(--kroj-naglowek);
    font-size: var(--d4);
    line-height: 1.25;
}

.faq__pozycja summary::-webkit-details-marker { display: none; }

.faq__pozycja summary::after { content: '+'; color: var(--atrament-3); font-family: var(--kroj-tekst); }
.faq__pozycja[open] summary::after { content: '−'; }

.faq__odpowiedz { padding-bottom: var(--s4); max-width: 72ch; color: var(--atrament-2); font-size: var(--tresc); }

.kroki { display: grid; gap: var(--s4); counter-reset: krok; }

.krok {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: var(--s4);
    padding-bottom: var(--s4);
    border-bottom: 1px solid var(--linia);
}

.krok__numer { font-family: var(--kroj-naglowek); font-size: var(--d4); color: var(--glina); font-variant-numeric: tabular-nums; }

.kontakt-siatka { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s6); }

.formularz { display: grid; gap: var(--s3); }

.formularz label { font-size: var(--maly); color: var(--atrament-2); display: grid; gap: 8px; }

.formularz input,
.formularz textarea,
.formularz select {
    border: 1px solid var(--linia-2);
    border-radius: var(--r1);
    background: var(--kreda);
    padding: 12px;
    font-size: var(--tresc);
    width: 100%;
}

.formularz textarea { min-height: 128px; resize: vertical; }

.formularz__nota { font-size: var(--nano); color: var(--atrament-3); }

@media (max-width: 900px) {
    .kontakt-siatka { grid-template-columns: 1fr; }
}

/* ── 20. KALKULATOR ZESTAWU ─────────────────────────────────────────────── */
.kalkulator {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: var(--s5);
    border: 1px solid var(--linia-2);
    padding: var(--s5);
    background: var(--kreda);
}

.kalkulator__opcje { display: grid; gap: var(--s4); align-content: start; }

.kalkulator__grupa { display: grid; gap: 8px; }

.kalkulator__etykieta { font-size: var(--nano); letter-spacing: 0.14em; text-transform: uppercase; color: var(--atrament-3); }

.kalkulator__wybor { display: flex; flex-wrap: wrap; gap: 8px; }

.kalkulator__wybor label {
    border: 1px solid var(--linia-2);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: var(--maly);
    cursor: pointer;
    display: inline-flex;
    gap: 8px;
    align-items: center;
    transition: background var(--ruch), color var(--ruch), border-color var(--ruch);
}

/* Radio systemowe pod pigułką: widoczne tylko dla klawiatury (:focus-visible),
   a wybór widać po stanie pigułki. Bez skryptu — czysty CSS `:has`. */
.kalkulator__wybor input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.kalkulator__wybor label:has(input:checked) {
    background: var(--atrament);
    border-color: var(--atrament);
    color: var(--papier);
}

.kalkulator__wybor label:has(input:focus-visible) {
    outline: 2px solid var(--glina);
    outline-offset: 2px;
}

.kalkulator__wynik {
    display: grid;
    gap: var(--s2);
    align-content: start;
    border-left: 1px solid var(--linia);
    padding-left: var(--s5);
}

.kalkulator__suma { font-family: var(--kroj-naglowek); font-size: var(--d3); font-variant-numeric: tabular-nums; line-height: 1; }

.kalkulator__oszczednosc { font-size: var(--maly); color: var(--glina); }

.kalkulator__lista { display: grid; gap: 8px; font-size: var(--maly); color: var(--atrament-2); }

.kalkulator__lista div { display: flex; justify-content: space-between; gap: var(--s3); padding-bottom: 8px; border-bottom: 1px dashed var(--linia); }

@media (max-width: 900px) {
    .kalkulator { grid-template-columns: 1fr; padding: var(--s4); }
    .kalkulator__wynik { border-left: 0; border-top: 1px solid var(--linia); padding-left: 0; padding-top: var(--s4); }
}

/* ── 21. RUCH: wejście sekcji ───────────────────────────────────────────── */
/* Bez JS wszystko jest widoczne. Klasę `js` stawia skrypt na <html>, więc
   brak skryptu nie zostawia pustej strony. */
.js [data-wejscie] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 700ms ease, transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.js [data-wejscie].jest {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    /* `transition: none` i `animation: none` MUSZĄ tu być dosłownie: pomiar
       sprawdza, czy przy „ogranicz ruch” wyliczony czas przejścia spada do
       zera, a nie czy w arkuszu jest gdziekolwiek reguła media-query. */
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
    .js [data-wejscie] { opacity: 1; transform: none; }
}

/* ── 22. DRUK ───────────────────────────────────────────────────────────── */
@media print {
    .naglowek, .demo-pas, .obietnice, .pasek-zakupu, .menu-mobilne, .stopka__metody { display: none; }
    body { background: #fff; color: #000; }
    .hero { min-height: 320px; }
}

/* ── 23. SZUFLADA KOSZYKA ───────────────────────────────────────────────── */
/* Szuflada istnieje po to, żeby „dodaj do koszyka” nie wyrzucało klienta na
   inną stronę. Treść (pozycje, sumy, próg darmowej dostawy) przychodzi
   z `/koszyk/mini`, czyli z tego samego rachunku co koszyk i kasa. */
.szuflada {
    /* Dialog domyślnie jest `display:block` po otwarciu i `none` przed —
       nadpisanie `display` bez `[open]` pokazywało szufladę na starcie
       (zmierzone: otwarta przy każdym wejściu na stronę). */
    display: none;
    margin: 0 0 0 auto;
    inset: 0 0 0 auto;
    width: min(420px, 100%);
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border: 0;
    border-left: 1px solid var(--linia);
    padding: 0;
    background: var(--kreda);
    color: var(--atrament);
}

.szuflada[open] {
    display: grid;
    grid-template-rows: auto 1fr auto;
}

.szuflada::backdrop { background: rgba(20, 18, 16, 0.42); }

.szuflada__gora {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--s4);
    border-bottom: 1px solid var(--linia);
}

.szuflada__zamknij,
.szybki-podglad__zamknij {
    background: none;
    border: 1px solid var(--linia-2);
    border-radius: 999px;
    width: 44px;
    height: 44px;
    cursor: pointer;
    transition: border-color var(--ruch), background var(--ruch);
}

.szuflada__zamknij:hover,
.szybki-podglad__zamknij:hover { border-color: var(--atrament); background: var(--papier-2); }

.szuflada__tresc { padding: var(--s4); overflow-y: auto; display: grid; gap: var(--s3); align-content: start; }

.szuflada__dol { padding: var(--s4); border-top: 1px solid var(--linia); display: grid; gap: var(--s2); }

.szuflada__pozycja { display: grid; grid-template-columns: 64px 1fr auto; gap: var(--s3); align-items: center; padding-bottom: var(--s3); border-bottom: 1px solid var(--linia); }
.szuflada__pozycja img { width: 64px; aspect-ratio: 4 / 5; object-fit: cover; background: var(--papier-2); }
.szuflada__nazwa { font-family: var(--kroj-naglowek); font-size: var(--tresc); }
.szuflada__kwota { font-size: var(--maly); font-variant-numeric: tabular-nums; white-space: nowrap; }
.szuflada__suma { display: flex; justify-content: space-between; font-size: var(--tresc); font-weight: 500; padding-top: var(--s2); }
.szuflada__prog { font-size: var(--kropla); color: var(--atrament-3); }

/* ── 24. SZYBKI PODGLĄD ─────────────────────────────────────────────────── */
.szybki-podglad {
    display: none;
    border: 0;
    padding: 0;
    background: var(--kreda);
    color: var(--atrament);
    width: min(880px, 94vw);
    max-height: 92vh;
    box-shadow: var(--cien-2);
}

.szybki-podglad[open] { display: block; }

.szybki-podglad::backdrop { background: rgba(20, 18, 16, 0.55); }

.szybki-podglad__zamknij { position: absolute; top: var(--s3); right: var(--s3); background: var(--kreda); }

.szybki-podglad__siatka { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }

.szybki-podglad__siatka img { width: 100%; height: 100%; max-height: 92vh; object-fit: cover; background: var(--papier-2); }

.szybki-podglad__tresc { padding: var(--s5); display: grid; gap: var(--s3); align-content: center; }

/* Opis w podglądzie: pięć linii i wielokropek robiony przez przeglądarkę,
   a nie nożem w PHP/JS (wcześniej cięcie wypadało w środku wyrazu). */
.szybki-podglad__tresc [data-podglad-opis] {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.szybki-podglad__blad {
    border-left: 1px solid var(--atrament);
    padding-left: var(--s2);
    font-size: var(--maly);
    color: var(--glina-ciemna);
}

@media (max-width: 720px) {
    .szybki-podglad__siatka { grid-template-columns: 1fr; }
    .szybki-podglad__siatka img { max-height: 38vh; }
    .szybki-podglad__tresc { padding: var(--s4); }
}


/* ── 25. CELE DOTYKU NA TELEFONIE ───────────────────────────────────────── */
/* WCAG 2.5.5 (AAA) wymaga 44×44 px; rubryka liczy cele poniżej 40 px.
   Na desktopie 27-px link tekstowy jest w porządku — pod palec nie. */
@media (max-width: 900px) {
    .znak,
    .menu-przycisk,
    .menu-mobilne summary,
    .narzedzia__koszyk,
    .link-strzalka,
    .produkt__podglad,
    .produkt__nazwa,
    .filtr,
    .stopka__kolumny a,
    .pdp__okruszki a,
    .cytat-tworcy__autor a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    .menu-przycisk { padding-inline: 16px; }
    .menu-mobilne summary { padding-block: 12px; }
    .filtr { padding-block: 10px; }
    .produkt__podglad { padding-block: 10px; }
    .wariant { min-height: 44px; }
    .galeria__miniaturka { min-width: 64px; }
    .link-strzalka { padding-block: 10px; }
}