/* Dokument prawny — arkusz `page.php`, wariant W2 „Kancelaria”.
 *
 * Wartości przepisane co do znaku z `canvas:Regulamin Marginalia` (siatka
 * l. 56 i l. 90, rozdziały l. 96–335, załącznik l. 337, stopka l. 381)
 * i `canvas:Prywatnosc Marginalia` (tabele l. 130 i l. 244, panel zgód l. 367),
 * postać wąska z `canvas:Regulamin Marginalia Mobile` (M1, M3, M5).
 *
 * TRZY RZECZY, KTÓRYCH NIE WOLNO STĄD ZDJĄĆ, BO NA NICH STOI WARIANT:
 *
 *   1. **Glosa jest komórką siatki, nie elementem pozycjonowanym.** Marginalia
 *      ułożone `position: absolute` działałyby na desktopie i znikały przy
 *      390 px — a wtedy „cały aparat zamienia się w zwykłe akapity i W2 traci
 *      tożsamość” (brief, Ograniczenia). Jako komórka wiersza glosa zjeżdża
 *      pod swój paragraf i staje się wciętym wtrąceniem z pionową kreską.
 *   2. **Krycie glos to 100 %, nie 80 %.** Brief mówi trzy różne rzeczy
 *      w trzech miejscach; 80 % daje 4,17:1, czyli **poniżej progu**. Camel
 *      Brown pełną mocą na pergaminie to 6,62:1 (`PORT.md` §2d). Poprawka
 *      z rundy r1 weszła tylko do tabeli palety — dwa pozostałe zdania briefu
 *      nadal kłamią.
 *   3. **Tabela jest prawdziwą `<table>`.** „To jedyne miejsce w projekcie,
 *      gdzie tabela jest poprawna semantycznie; nie budować jej z `<div>`.”
 *      Rozpad na karty przy 390 px jest zrobiony CSS-em, a role ARIA
 *      w znaczniku trzymają semantykę, której `display: block` by nie zostawił.
 *
 * Punkt łamania 1099 px jest wspólny ze `strona-spis.css` i z aparatem wpisu.
 */

/* ─── ARKUSZ ─────────────────────────────────────────────────── */

.szewko-strona {
  position: relative;

  /* GÓRNY ODSTĘP JEST SUMĄ, NIE LICZBĄ Z CANVASU: 80 px zajmuje fala, która
     od tej poprawki jest dzieckiem arkusza, plus 62 px zapasu, który canvas
     zostawia nad ramką zastrzeżenia. Fala ma zakładkę 10 px w górę, więc
     wchodzi w arkusz na 70 px — stąd 142, a nie 152.

     DOLNY ODSTĘP JEST OBOWIĄZKOWY z tego samego powodu: fala dolna zajmuje
     70 px u dołu arkusza. Przy `padding-bottom: 0` przykrywała blok wersji
     i przycisk druku przyklejonego spisu, bo pasmo kończy się razem z siatką,
     czyli dokładnie pod falą. */
  padding: 142px 80px 96px;

  /* Faktura arkusza — ten sam kafel 1200 px, co tło metryki produktu
     (`0.13`, `scenes/produkt-tlo-metryka-b-cieplejszy-len`). Nakładka
     Parchment przy 40 % ściąga jej kontrast; canvas ma tu dokładnie tę parę
     warstw i tę kolejność. */
  background-color: var(--color-parchment);
  background-image:
    linear-gradient(
      color-mix(in srgb, var(--color-parchment) 40%, transparent),
      color-mix(in srgb, var(--color-parchment) 40%, transparent)
    ),
    url("../img/scenes/produkt-tlo-metryka-b-cieplejszy-len.webp");
  background-position: center top;
  background-size: auto, 1200px 1200px;
  background-repeat: repeat, repeat;

  @media (max-width: 1023px) {
    padding-right: var(--space-xl);
    padding-left: var(--space-xl);
  }

  @media (max-width: 767px) {
    padding: 110px var(--space-lg) 72px;
  }
}

/* ⚠︎ ZAKŁADKA 10 PX NA OBU FALACH JEST OBOWIĄZKOWA — I TO NIE JEST KOSMETYKA.
 *
 * Arkusz ma wysokość UŁAMKOWĄ (zmierzone: 6783,4 px), więc `top: 0` / `bottom: 0`
 * lądują na ułamku piksela i przeglądarka wygładza krawędź — przy fali zostaje
 * wtedy włos sąsiedniej powierzchni przez całą szerokość. Na zrzucie wygląda to
 * jak cienka kreska między separatorem a sekcją.
 *
 * ⚠︎ **SPECYFICZNOŚĆ JEST TU POTRZEBNA i pierwsza wersja jej nie miała.**
 * `dune-divider.css` kolejkuje się PÓŹNIEJ (part renderuje się po szablonie),
 * więc przy równej wadze wygrywa jego `top: 0` / `bottom: 0` — reguła zapisana
 * na samej klasie fali po prostu nie działała. Jego selektor to
 * `.szewko-dune-divider.szewko-dune-divider--gora`, czyli DWIE klasy; samo
 * `.szewko-strona > …` daje remis i przegrywa kolejnością. Stąd klasa arkusza
 * powtórzona — trzy klasy przechylają to z powrotem. Zmierzone: przy remisie
 * fala siedziała na `top: 0` mimo tej reguły.
 *
 * `pointer-events: none`, bo fala przykrywa 80 px na całej szerokości arkusza —
 * bez tego zjadałaby kliknięcia w ramkę zastrzeżenia i w odnośniki stopki. */
.szewko-strona > .szewko-dune-divider {
  pointer-events: none;
}

.szewko-strona.szewko-strona > .szewko-dune-divider--gora {
  top: -10px;
}

.szewko-strona.szewko-strona > .szewko-dune-divider--dol {
  bottom: -10px;
}

/* ─── TRZY PASMA ─────────────────────────────────────────────── */

/* Bez spisu (krótka strona, poniżej progu czterech rozdziałów) `page.php`
   zostaje jedną kolumną 680 px — czyli dokładnie tym, czym był przed falą 8.
   To nie jest stan awaryjny: ten szablon obsługuje KAŻDĄ stronę WordPressa,
   a nie tylko dwa dokumenty prawne. */
.szewko-strona__pasma {
  max-width: 680px;
  margin: 0 auto;
}

.szewko-strona--dokument {
  & .szewko-strona__pasma {
    display: grid;
    grid-template-columns: 260px minmax(0, 1040px);
    justify-content: center;
    align-items: stretch;
    max-width: 1440px;
    column-gap: var(--space-xl);

    @media (max-width: 1099px) {
      display: block;
      max-width: 680px;
    }
  }

  & .szewko-strona__pasmo {
    grid-column: 1;
    align-self: stretch;
  }

  & .szewko-strona__dokument {
    grid-column: 2;
  }
}

.szewko-strona__dokument {
  padding-bottom: var(--space-4xl);
}

/* ─── KORPUS: kolumna tekstu 680 px + margines glos 280 px ───── */

/* Licznik rozdziałów. Numery („01”…„14”) NIE są w treści i nie mają być:
   numeracja wpisana ręcznie rozjeżdża się przy pierwszym dopisanym rozdziale,
   a redakcja nie ma jak tego zauważyć — dokładnie ta sama pułapka, co przy
   spisie wyliczanym z pola zamiast z nagłówków. */
.szewko-strona__korpus {
  counter-reset: szewko-rozdzial;

  & > * {
    margin: 0;
  }

  & > * + * {
    margin-top: 18px;
  }

  /* Nagłówek rozdziału. Odstęp kotwicy liczony, nie przepisany —
     `114px` z czterech plików canvasu (i trzy różne liczby w nich) to WYNIK
     działania „dolna krawędź paska + 24 px”, a nie wartość do przeniesienia. */
  & > h2 {
    position: relative;
    counter-increment: szewko-rozdzial;
    margin-top: var(--space-2xl);
    scroll-margin-top: calc(var(--szewko-pasek-wysokosc) + var(--space-lg));
    color: var(--color-smoked-tent);
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.04em;
    text-transform: uppercase;

    /* Rozdział 12 ma najdłuższy tytuł w projekcie („Pozasądowe sposoby
       rozpatrywania reklamacji i dochodzenia roszczeń oraz zasady dostępu
       do tych procedur”) i przez trzy rundy poprawek nikt go nie obejrzał.
       `pretty` łamie go po sensownych miejscach zamiast zostawiać jedno
       słowo w ostatnim wierszu. */
    text-wrap: pretty;

    /* Poniżej progu spisu przyklejonego paska nie ma, więc do odstępu
       kotwicy nie dochodzi jego wysokość — dochodzi tylko w dokumencie. */
    @media (max-width: 1099px) {
      margin-top: var(--space-xl);
      font-size: 22px;
      line-height: 1.28;
      letter-spacing: 0.03em;
    }
  }

  & > h2::before {
    content: counter(szewko-rozdzial, decimal-leading-zero);
    display: block;
    margin-bottom: 4px;
    color: color-mix(in srgb, var(--color-camel-brown) 90%, transparent);
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2em;

    @media (max-width: 1099px) {
      font-size: 12px;
    }
  }

  /* Nagłówek oznaczony przez redakcję jako „poza spisem” (Załącznik) nie
     zwiększa licznika i nie dostaje numeru — inaczej dopisek na końcu
     dokumentu przesuwałby numerację rozdziałów. */
  & > h2.szewko-strona__poza-spisem {
    counter-increment: none;

    &::before {
      content: none;
    }
  }

  & > h2 + * {
    margin-top: var(--space-lg);
  }

  & > h3 {
    margin-top: 22px;
    color: var(--color-smoked-tent);
    font-family: var(--font-heading);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.4;
  }

  & > p {
    color: color-mix(in srgb, var(--color-smoked-tent) 92%, transparent);
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.7;
    text-wrap: pretty;

    @media (max-width: 1099px) {
      font-size: 17px;
    }
  }

  & a {
    color: var(--color-desert-rust);
    text-decoration: underline;
    text-underline-offset: 3px;

    /* Adres UOKiK-u ma 66 znaków bez spacji, wystaje z kolumny 680 px,
       a przy 390 px rozpycha całą stronę w poziomie. Musi się ŁAMAĆ, nie
       wystawać — jedyna pozycja checklisty „opcji B”, którą widać gołym
       okiem, i jedyna nieobejrzana przez cały cykl trzech rund. */
    overflow-wrap: anywhere;

    &:hover {
      color: var(--color-terracotta);
    }
  }

  /* Wypunktowanie w kolumnie tekstu jest wcięte o szerokość kolumny odsyłacza,
     żeby jego pierwsza litera stanęła w jednej osi z akapitem obok (canvas
     l. 247–252 — lista siedzi w komórce drugiej kolumny tej samej siatki). */
  & > ol,
  & > ul {
    display: flex;
    flex-direction: column;
    margin-left: 84px;
    padding: 0;
    list-style: none;
    gap: var(--space-sm);

    @media (max-width: 1099px) {
      margin-left: 0;
    }
  }

  & > ol {
    counter-reset: szewko-ustep;
  }

  & > ol > li,
  & > ul > li {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    color: color-mix(in srgb, var(--color-smoked-tent) 92%, transparent);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.65;

    @media (max-width: 1099px) {
      grid-template-columns: 28px minmax(0, 1fr);
      font-size: 16px;
    }
  }

  & > ol > li {
    counter-increment: szewko-ustep;
  }

  & > ol > li::before {
    content: counter(szewko-ustep) ')';
    color: color-mix(in srgb, var(--color-camel-brown) 90%, transparent);
  }

  & > ul > li::before {
    content: '—';
    color: color-mix(in srgb, var(--color-camel-brown) 90%, transparent);
  }
}

/* Trzy pasma włączają się razem ze spisem — bez niego kolumna glos nie ma
   po co istnieć, a korpus zostaje jedną kolumną. */
.szewko-strona--dokument .szewko-strona__korpus {
  display: grid;
  grid-template-columns: minmax(0, 680px) minmax(0, 280px);
  align-items: start;
  column-gap: 80px;

  @media (max-width: 1099px) {
    display: block;
  }

  & > * {
    grid-column: 1;
  }
}

/* ─── ODSYŁACZ DO USTĘPU („§ 1 ust. 1.”) ─────────────────────── */

/* Kolumna 84 px z canvasu, zrobiona BEZ zmiany treści: paragraf z odsyłaczem
   staje się dwukolumnową siatką, a reszta akapitu trafia do anonimowej
   komórki obok. Dzięki temu redakcja pisze zwykły akapit ze `<span>`, a nie
   parę zagnieżdżonych divów — i ten sam znacznik czyta się poprawnie także
   wtedy, gdy WooCommerce wyrenderuje regulamin inline w kasie, bez tej siatki.

   `line-height: 31px` na odsyłaczu, a nie `1.7`: ma trafić w linię bazową
   pierwszego wiersza akapitu obok (18 px × 1,7 ≈ 30,6 px). Canvas ma tu
   dokładnie tę liczbę i dokładnie z tego powodu. */
.szewko-strona__korpus > p:has(> .szewko-strona__ustep:first-child) {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);

  @media (max-width: 1099px) {
    display: block;
  }
}

.szewko-strona__ustep {
  color: color-mix(in srgb, var(--color-camel-brown) 90%, transparent);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 31px;

  /* Numer ustępu nie kurczy się na wąskim ekranie: to jest ADRES w dokumencie,
     po którym czytelnik odsyła i cytuje. 14 px to szczebel `pomocniczy`
     (pakiet 6, `docs/TYPOGRAFIA.md`). */
  @media (max-width: 1099px) {
    display: block;
    margin-bottom: 6px;
    line-height: 1.4;
    letter-spacing: 0.04em;
  }
}

/* ─── GLOSA „PO LUDZKU” ──────────────────────────────────────── */

/* Byt jest WSPÓLNY ze wpisem — ten sam krótki kod `[glosa]` z `inc/wpis.php`,
   ten sam znacznik `<aside class="szewko-glosa">`. „Glosy są osobnym rodzajem
   bloku w treści, bo **edytor musi umieć je wstawić**” (brief, prompt W2):
   klasa CSS wklejana ręcznie w HTML tego nie spełnia, krótki kod tak.
   Blok Gutenberga też by spełnił i jest do zrobienia bez builda — to jest
   kilkaset linii i decyzja właściciela, nie skutek uboczny portu.
   Wygląd jest własny, bo dokument prawny ma inną glosę niż wpis: krój
   akcentowy kursywą i pionowa kreska w obu postaciach, a nie tekst
   interfejsowy bez kreski.

   ⚠︎ Reguły są tu KOMPLETNE, nie dopisane do `single.css`. Tamten arkusz
   kolejkuje się wyłącznie na wpisach, więc oparcie się o niego dałoby glosę
   bez stylu na każdym dokumencie prawnym. */
.szewko-strona__korpus .szewko-glosa {
  align-self: start;
  margin: 0;
  border-left: 1px solid color-mix(in srgb, var(--color-camel-brown) 25%, transparent);
  padding-left: var(--space-md);

  @media (max-width: 1099px) {
    margin: 26px 0 26px var(--space-md);
  }
}

.szewko-strona--dokument .szewko-strona__korpus .szewko-glosa {
  grid-column: 2;

  @media (max-width: 1099px) {
    grid-column: auto;
  }
}

.szewko-strona__korpus .szewko-glosa__nadtytul {
  margin: 0 0 5px;
  color: color-mix(in srgb, var(--color-camel-brown) 85%, transparent);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.szewko-strona__korpus .szewko-glosa__tresc {
  & p {
    /* Camel Brown PEŁNĄ MOCĄ — 6,62:1. 80 %, o których mówią dwa zdania
       briefu, dają 4,17:1, czyli poniżej progu. */
    margin: 0;
    color: var(--color-camel-brown);
    font-family: var(--font-accent);
    /* 15,5 px: szczebel `pomocniczy` dla Spectrala w kursywie (x 46).
       Kursywa zostaje — glosa „po ludzku" jest komentarzem narratora obok
       paragrafu, a nie samym paragrafem (T5). */
    font-size: 15.5px;
    font-style: italic;
    line-height: 1.6;
    text-wrap: pretty;

    & + p {
      margin-top: var(--space-sm);
    }
  }
}

/* ─── WEJŚCIE Z KOTWICY ──────────────────────────────────────── */

/* Stan `kotwica` z canvasu (`Regulamin Kotwica Klatka.dc.html`, prop
   `stan="kotwica"`, enum `domyslny | kotwica`): rozdział, do którego wszedł
   czytelnik z zewnątrz, dostaje lewą kreskę Desert Rust. Audyt uznał ten stan
   za „NIGDY nie narysowany”; raport rozpoznania paczki „prawne” to skreślił —
   stan istnieje w czterech plikach naraz, więc jest do TRANSKRYPCJI, nie do
   projektowania.

   W motywie robi to `:target`, a nie prop i nie JS: wejście z kotwicy to
   dokładnie to, co `:target` znaczy, a stan gaśnie sam, gdy czytelnik kliknie
   inną pozycję spisu. Canvas potrzebował do tego skryptu z `setTimeout(420)`,
   bo w podglądzie nie ma adresu z hashem. */
.szewko-strona__korpus > h2:target::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -24px;
  width: 3px;
  background: var(--color-desert-rust);

  @media (max-width: 1099px) {
    left: -12px;
  }
}

/* ─── RAMKA ZASTRZEŻENIA ─────────────────────────────────────── */

/* „Notatki na marginesie są wyjaśnieniem, nie treścią umowy.” Ten sam byt
   wizualny, co blok „Jak z nich skorzystać” w polityce — jedno wcięcie
   w pergaminie, bez wypełnienia: tło ma tu prześwitywać fakturą arkusza. */
.szewko-strona__ramka {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--color-camel-brown) 25%, transparent);
  border-radius: var(--radius-md);
  padding: var(--space-md) 20px;

  & p {
    margin: 0;
    color: color-mix(in srgb, var(--color-smoked-tent) 92%, transparent);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    text-wrap: pretty;
  }

  & p + p {
    margin-top: var(--space-sm);
  }
}

/* ─── PANEL ZGÓD POD KOTWICĄ `#ustawienia` ───────────────────── */

/* ⚠︎ **TEN KOMENTARZ MÓWIŁ DO 20.08.2026, ŻE PUDEŁKO JEST PUSTE — I BYŁA TO
   NIEPRAWDA OD 07.08.** Zapisuję to wprost, bo stara treść odsyłała do
   **W47** jako do pytania otwartego, a W47 rozstrzygnięto **07.08.2026 jako
   D70: WPConsent, wersja darmowa**. Kto czytał ten akapit, dostawał obraz
   pola zerowego tam, gdzie stoi działający mechanizm.

   **Stan zmierzony 20.08.2026:** pudełko stoi w § 6 dokumentu
   `/polityka-cookies` (kotwica `#ustawienia` przeprowadziła się tam z polityki
   prywatności 11.08 razem z całą deklaracją), a w środku siedzi krótki kod
   `[wpconsent_preferences_button]`, który renderuje realny przycisk
   i otwiera nakładkę. Wygląd przycisku — `zgody.css` §5; wygląd nakładki —
   `zgody.css` w całości, na jedenastu atrybutach `part`.
   ⚠︎ **Na `/polityka-prywatnosci` tego pudełka nie ma i mieć nie ma** —
   dokumenty rozdzieliły się 11.08.

   ── CZEGO TU ŚWIADOMIE NIE MA, ŻEBY NIKT TEGO NIE „NAPRAWIŁ" ────────────

   · **stanu „nie da się zapisać"** (tryb prywatny, zablokowany magazyn).
     Rozstrzygnięcie właściciela z **20.08.2026**: obszar zgód zostaje **bez
     zależności od JavaScriptu**, więc wykrycia po naszej stronie nie ma.
     ⚠︎ **Cena jest mniejsza, niż wygląda:** mechanizm zapisu należy do
     wtyczki, więc w trybie prywatnym ustawienie **działa do zamknięcia
     karty** i po prostu nie przeżywa. To niedogodność, nie utrata zgody —
     przy następnej wizycie pas pyta od nowa;
   · **trzeciego stanu przełącznika** („Marketing · Nieużywane · nie ma dziś
     czego włączać"). Nie ma go czym wywołać: kategoria bez usług nie
     renderuje się w ogóle (`class-wpconsent-banner.php:397`). Wróci razem
     z atrapą usługi — D70, konsekwencja 2. Rachunek: `zgody.css` przy
     `::part(wpconsent-checkbox-toggle-disabled)`;
   · **podpisu WŁĄCZONE / WYŁĄCZONE pod pigułką**, który rysuje canvas.
     Ta sama decyzja z 20.08 i ten sam powód — podpis wymaga skryptu
     zmieniającego go przy każdym przełączeniu. Powód **dostępnościowy**
     stoi przy regule w `zgody.css`: stan nie jest przekazany samym kolorem,
     więc WCAG 1.4.1 jest spełnione i bez podpisu. */
.szewko-strona__zgody {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--color-camel-brown) 25%, transparent);
  border-radius: var(--radius-md);
  padding: var(--space-2xl) 32px;
  background: color-mix(in srgb, var(--color-camel-brown) 8%, transparent);

  @media (max-width: 1099px) {
    padding: var(--space-lg);
  }

  & > :first-child {
    margin-top: 0;
  }
}

.szewko-strona--dokument .szewko-strona__korpus > .szewko-strona__zgody {
  grid-column: 1 / -1;
}

/* ─── ZAŁĄCZNIK ──────────────────────────────────────────────── */

/* Wzór formularza odstąpienia. Pełna szerokość obu pasm — to nie jest
   rozdział i nie ma go w spisie (canvas l. 337: `grid-column: 1 / -1`,
   spis ma czternaście pozycji, nie piętnaście). */
.szewko-strona__zalacznik {
  box-sizing: border-box;
  margin-top: 80px;
  border: 1px solid color-mix(in srgb, var(--color-camel-brown) 25%, transparent);
  border-radius: var(--radius-md);
  padding: 32px;
  background: color-mix(in srgb, var(--color-bleached-linen) 55%, transparent);
  scroll-margin-top: calc(var(--szewko-pasek-wysokosc) + var(--space-lg));

  @media (max-width: 1099px) {
    padding: var(--space-lg);
  }
}

.szewko-strona--dokument .szewko-strona__korpus > .szewko-strona__zalacznik {
  grid-column: 1 / -1;
}

.szewko-strona__zalacznik-tytul {
  margin: 0 0 6px;
  color: color-mix(in srgb, var(--color-smoked-tent) 92%, transparent);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.szewko-strona__zalacznik-lead {
  margin: 0 0 26px;
  color: color-mix(in srgb, var(--color-camel-brown) 90%, transparent);
  font-family: var(--font-accent);
  font-size: 16px;
  font-style: italic;
  line-height: 1.55;
}

.szewko-strona__zalacznik-akapit {
  max-width: 640px;
  margin: 0 0 var(--space-md);
  color: color-mix(in srgb, var(--color-smoked-tent) 92%, transparent);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
}

/* Miejsce na wpisanie ręką — dwie szerokie linie na opis rzeczy, potem sześć
   pól podpisanych. Linie są `aria-hidden` w znaczniku: dla czytnika ekranu
   niosą je etykiety, a nie kreski. */
.szewko-strona__zalacznik-linie {
  display: flex;
  flex-direction: column;
  gap: 18px;

  & > span {
    display: block;
    height: 32px;
    border-bottom: 1px solid color-mix(in srgb, var(--color-camel-brown) 35%, transparent);
  }
}

.szewko-strona__zalacznik-pola {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 26px;
  gap: 22px 28px;

  @media (max-width: 767px) {
    grid-template-columns: minmax(0, 1fr);
  }

  & p {
    margin: 0 0 var(--space-sm);
    color: color-mix(in srgb, var(--color-camel-brown) 90%, transparent);
    font-family: var(--font-ui);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  & span {
    display: block;
    height: 28px;
    border-bottom: 1px solid color-mix(in srgb, var(--color-camel-brown) 35%, transparent);
  }
}

.szewko-strona__zalacznik-stopka {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-top: 26px;
  gap: 12px 24px;

  & p {
    max-width: 620px;
    margin: 0;
    color: color-mix(in srgb, var(--color-camel-brown) 90%, transparent);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
  }
}

.szewko-strona__zalacznik-drukuj {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border: none;
  padding: 0;
  background: transparent;
  color: var(--color-desert-rust);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;

  &[hidden] {
    display: none;
  }

  &:hover {
    color: var(--color-terracotta);
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  &:focus-visible {
    outline: 2px solid var(--color-desert-rust);
    outline-offset: 3px;
  }
}

/* ─── TABELA ─────────────────────────────────────────────────── */

/* Pierwsza prawdziwa `<table>` w projekcie: nagłówek kolumn, nagłówki grup
   pełnej szerokości, komórki wielozdaniowe, wiersze różnej wysokości.
   „Projektuj od razu na tę skalę, nie na pięć” — deklaracja ciasteczek ma
   czternaście wierszy w czterech grupach. */
.szewko-strona__tabela {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.szewko-strona--dokument .szewko-strona__korpus > .szewko-strona__tabela {
  grid-column: 1 / -1;
}

/* Szerokości kolumn z canvasu (`<colgroup>` l. 132–136 i l. 246–251).
   W motywie idą arkuszem, nie atrybutem `style` na `<col>` — treść ma zostać
   treścią, a `table-layout: fixed` i tak liczy je z pierwszego wiersza. */
.szewko-strona__tabela--cele th[scope='col']:nth-child(1) {
  width: 30%;
}

.szewko-strona__tabela--cele th[scope='col']:nth-child(2) {
  width: 44%;
}

.szewko-strona__tabela--cele th[scope='col']:nth-child(3) {
  width: 26%;
}

.szewko-strona__tabela--ciasteczka th[scope='col']:nth-child(1) {
  width: 27%;
}

.szewko-strona__tabela--ciasteczka th[scope='col']:nth-child(2) {
  width: 17%;
}

.szewko-strona__tabela--ciasteczka th[scope='col']:nth-child(3) {
  width: 34%;
}

.szewko-strona__tabela--ciasteczka th[scope='col']:nth-child(4) {
  width: 22%;
}

/* Podpis tabeli jest tekstem pomocniczym, więc szczebel `pomocniczy`
   (ekw. 14 → 14 px Literaty), a nie `mikro` — w odróżnieniu od nagłówków
   kolumn niżej, które są wersalikowymi etykietami i zostają na 12 px. */
.szewko-strona__tabela caption {
  padding-bottom: 10px;
  color: color-mix(in srgb, var(--color-camel-brown) 90%, transparent);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
}

.szewko-strona__tabela thead tr {
  background: color-mix(in srgb, var(--color-camel-brown) 14%, transparent);
}

.szewko-strona__tabela th[scope='col'] {
  border-bottom: 1px solid color-mix(in srgb, var(--color-camel-brown) 30%, transparent);
  padding: 12px 14px;
  color: color-mix(in srgb, var(--color-smoked-tent) 92%, transparent);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-align: left;
  text-transform: uppercase;
}

/* Nagłówek grupy — wiersz pełnej szerokości z nazwą kategorii i liczbą
   pozycji. `scope="colgroup"` i `colspan`, nie `<div>` udający nagłówek. */
.szewko-strona__tabela th[scope='colgroup'] {
  border-bottom: 1px solid color-mix(in srgb, var(--color-camel-brown) 20%, transparent);
  padding: 10px 14px;
  background: color-mix(in srgb, var(--color-camel-brown) 9%, transparent);
  color: color-mix(in srgb, var(--color-smoked-tent) 92%, transparent);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-align: left;
  text-transform: uppercase;

  & span {
    color: color-mix(in srgb, var(--color-camel-brown) 90%, transparent);
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: none;
  }
}

.szewko-strona__tabela td {
  border-bottom: 1px solid color-mix(in srgb, var(--color-camel-brown) 20%, transparent);
  padding: 12px 14px;
  color: color-mix(in srgb, var(--color-smoked-tent) 92%, transparent);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  vertical-align: top;
}

/* Nazwy ciasteczek to identyfikatory, nie proza — `wp_woocommerce_session`
   ma się złamać w komórce, a nie rozepchnąć kolumny. */
.szewko-strona__tabela td:first-child {
  font-family: var(--font-ui);
  overflow-wrap: anywhere;
}

/* Tabela celów jest szersza w wierszach i idzie krojem tekstowym — canvas
   daje jej 15 px i `padding: 14px`, deklaracji ciasteczek 14 px i 12/14. */
.szewko-strona__tabela--cele td {
  padding: 14px;
  font-size: 15px;
  line-height: 1.6;
}

.szewko-strona__tabela--cele td:first-child {
  font-family: var(--font-body);
  overflow-wrap: normal;
}

/* ROZPAD NA KARTY PRZY WĄSKIM EKRANIE (canvas M3).
   Wiersz staje się kartą, pierwsza komórka jej tytułem, pozostałe parami
   „etykieta → wartość”. Etykiety biorą się z `data-etykieta` w znaczniku,
   bo nagłówek kolumn w karcie nie istnieje — a przepisywanie ich do `::before`
   z arkusza wiązałoby kolejność kolumn ze stylem.

   ⚠︎ Role ARIA w znaczniku są warunkiem, a nie ozdobą: `display: block`
   ZDEJMUJE tabeli, wierszom i komórkom ich role, więc bez `role="table"`,
   `role="row"` i `role="cell"` czytnik ekranu dostałby przy 390 px stertę
   akapitów. Semantyka tabeli jest w tym miejscu niepodlegająca negocjacji. */
@media (max-width: 767px) {
  .szewko-strona__tabela,
  .szewko-strona__tabela tbody,
  .szewko-strona__tabela tr,
  .szewko-strona__tabela td,
  .szewko-strona__tabela th {
    display: block;
  }

  /* Nagłówek kolumn znika z ekranu, ale ZOSTAJE w drzewie — jest nazwą
     kolumn, do których odnoszą się etykiety kart. */
  .szewko-strona__tabela thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Szerokości kolumn są przypisane pierwszym `th` wiersza nagłówkowego,
     a nagłówek grupy też jest pierwszym `th` w swoim wierszu — bez tego
     zerowania dostawał 27 % szerokości i etykieta łamała się na cztery
     wiersze obok pustego pola. Złapane pomiarem na 390 px, nie na oko. */
  .szewko-strona__tabela th[scope='colgroup'] {
    width: auto;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 22px 0 12px;
    border: 1px solid color-mix(in srgb, var(--color-camel-brown) 20%, transparent);
    padding: 9px 12px;
    gap: 12px;
  }

  .szewko-strona__tabela tbody tr:has(> td) {
    margin-bottom: 12px;
    border: 1px solid color-mix(in srgb, var(--color-camel-brown) 22%, transparent);
    border-radius: var(--radius-md);
    padding: 14px 16px;
  }

  .szewko-strona__tabela td {
    border: none;
    padding: 0;
  }

  .szewko-strona__tabela td:first-child {
    margin-bottom: 10px;
    color: var(--color-smoked-tent);
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
  }

  .szewko-strona__tabela td[data-etykieta] {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    gap: 6px 12px;
    font-size: 15px;
    line-height: 1.5;
  }

  .szewko-strona__tabela td[data-etykieta] + td[data-etykieta] {
    margin-top: 6px;
  }

  .szewko-strona__tabela td[data-etykieta]::before {
    content: attr(data-etykieta);
    color: color-mix(in srgb, var(--color-camel-brown) 90%, transparent);
    font-family: var(--font-ui);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
}

/* ─── STOPKA DOKUMENTU ───────────────────────────────────────── */

.szewko-strona__stopka {
  max-width: 680px;
  margin-top: 88px;
  text-align: center;
}

.szewko-strona__pieczec {
  display: block;
  width: 120px;
  height: 120px;
  margin: 0 auto 26px;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px color-mix(in srgb, var(--color-smoked-tent) 18%, transparent));
}

.szewko-strona__kreska {
  height: 1px;
  margin: 0 0 22px;
  background: color-mix(in srgb, var(--color-camel-brown) 20%, transparent);
}

/* ⚠︎ Krój UI, nie akcentowy (T5, pakiet 6 naprawy typografii). „Wersja 1.0 ·
   obowiązuje od…" rozstrzyga, KTÓRA redakcja dokumentu wiąże czytelnika —
   to najbardziej niepomijalne zdanie całej stopki dokumentu, a stało jedynym
   krojem strony, który mówi „na marginesie". Rozmiar 16 px (szczebel
   `czytelny`, Literata x 51) trzyma tę samą wielkość optyczną co 17 px
   Spectrala w kursywie, więc kompozycja stopki się nie rusza. */
.szewko-strona__wersja {
  margin: 0 0 var(--space-lg);
  color: color-mix(in srgb, var(--color-camel-brown) 90%, transparent);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
}

.szewko-strona__odnosniki {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 32px;

  & a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--color-desert-rust);
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;

    &:hover {
      color: var(--color-terracotta);
      text-decoration: underline;
      text-underline-offset: 4px;
    }
  }
}

/* ─── DRUK ───────────────────────────────────────────────────── */

/* @media print ZAMIAST WTYCZKI GENERUJĄCEJ PDF. „Zero kosztu wtyczkowego —
   generowany PDF nie wnosi nic poza plikiem, przeglądarka drukuje do PDF
   sama.” Cała funkcja to ten blok plus jeden glif drukarki.
 *
 * Wymagania są z briefu, tabela stanów, wiersz „Druk / PDF”, i są tu
 * wszystkie: białe tło, czarny tekst, spis i lepkie elementy schowane,
 * **adresy odnośników wypisane w nawiasach**, nagłówki nie zostają samotne
 * na końcu strony. */
@media print {
  /* Kolory palety znikają: dokument ma wyjść czytelny na czarno-białej
     drukarce, a faktura arkusza zjadłaby toner i kontrast naraz. */
  .szewko-strona {
    padding: 0;
    background: var(--color-druk-tlo);
  }

  /* Nawigacja i stopka witryny nie mają na papierze czego robić — a stopka
     ma jeszcze falę i cztery kolumny odnośników, czyli całą stronę wydruku
     na nic. */
  .szewko-navbar,
  .szewko-navbar__rozporka,
  .szewko-stopka {
    display: none;
  }

  .szewko-strona__korpus,
  .szewko-strona__korpus > p,
  .szewko-strona__korpus > h2,
  .szewko-strona__korpus > h3,
  .szewko-strona__korpus > ol > li,
  .szewko-strona__korpus > ul > li,
  .szewko-strona__ramka p,
  .szewko-strona__tabela td,
  .szewko-strona__tabela th {
    color: var(--color-druk-tekst);
  }

  /* ⚠︎ Spis i hero chowają się we WŁASNYCH arkuszach, nie tutaj. Powód jest
     mierzalny, nie porządkowy: `page.php` kolejkuje `strona.css` przed
     partami, więc `strona-spis.css` i `strona-hero.css` ładują się PÓŹNIEJ
     i przy równej specyficzności wygrywają. Reguła `display: none` napisana
     w tym pliku po prostu nie działała — złapane emulacją `media: print`,
     nie odczytem kodu. */
  .szewko-strona > .szewko-dune-divider,
  .szewko-strona__pieczec {
    display: none;
  }

  .szewko-strona__pasma,
  .szewko-strona--dokument .szewko-strona__pasma,
  .szewko-strona--dokument .szewko-strona__korpus {
    display: block;
    max-width: none;
  }

  .szewko-strona__dokument {
    padding-bottom: 0;
  }

  /* Glosa na papierze wraca pod paragraf jako wcięte wtrącenie — ta sama
     postać, co przy 390 px. Kolumny marginesu na kartce A4 nie ma. */
  .szewko-strona__korpus .szewko-glosa {
    margin: 12px 0 12px var(--space-md);
    break-inside: avoid;
  }

  /* Nagłówek nie zostaje samotny na końcu strony — wymóg z briefu wprost. */
  .szewko-strona__korpus > h2,
  .szewko-strona__korpus > h3 {
    break-after: avoid-page;
    break-inside: avoid;
  }

  .szewko-strona__korpus > p {
    orphans: 3;
    widows: 3;
  }

  .szewko-strona__tabela,
  .szewko-strona__zalacznik {
    break-inside: auto;
  }

  .szewko-strona__tabela tr {
    break-inside: avoid;
  }

  /* ADRESY ODNOŚNIKÓW WYPISANE W NAWIASACH. Bez tego wydrukowany regulamin
     mówi „wykaz prowadzi UOKiK pod adresem” i nie podaje adresu — a to jest
     akurat ten dokument, w którym odnośnik bywa treścią obowiązku.
     Kotwice wewnętrzne (`#…`) i `mailto:` są pominięte: pierwsze na papierze
     nie znaczą nic, drugie i tak mają adres w treści. */
  .szewko-strona__korpus a[href^='http']::after,
  .szewko-strona__stopka a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-family: var(--font-ui);
    font-size: 0.85em;
    overflow-wrap: anywhere;
  }

  .szewko-strona__korpus a,
  .szewko-strona__stopka a {
    color: var(--color-druk-tekst);
    text-decoration: underline;
  }
}