/* =====================================================================
   WINNICA TURNAU, ZESTAWY PREZENTOWE DLA FIRM
   Arkusz modułu CMS GSWtech: zestawy-prezentowe.css

   Źródło wyglądu: plik Paper turnau-landing-zestawy-prezentowe
   (id 01M2CY6H8MHNTP6M6QN6AXQ3ZV), skrót tokenów d33c399a.
   Stan pliku: faza F4b (tokeny, krój zastępczy, korzeń, reset w zakresie,
   klasy układu, belka, menu mobilne, stopka, komponenty treści, sekcje
   H01 do H10). Logika formularzy i krok 2 w F5.

   RODZINY PROGÓW (nie mieszać, komentarz przy każdym progu mówi, czego
   dotyczy):
     640 px   rytm treści i skala mobilna (token --tp-breakpoint-tresc),
     1279 px  nawigacja belki (sekcje 7 i 8, skrypt),
     1024 px  układ stopki (sekcja 9),
     pozostałe: układy kolumnowe sekcji, każdy zmierzony osobno
              (narzedzia/pomiar-progow.mjs, liczby w sekcjach 10 do 20).

   REGUŁA WARTOŚCI (od F3): kolor zawsze tokenem. Rozmiar, odstęp
   i interlinia tokenem wtedy, gdy wartość i rola tokenu zgadzają się
   z węzłem Paper; w przeciwnym razie zmienna lokalna komponentu
   z komentarzem wskazującym węzeł Paper (albo regułę CMS), z którego
   pochodzi. Kontrola: narzedzia/kontrola-cms.mjs, reguła C4.

   ZASADY IZOLACJI, obowiązują przy każdej edycji:
   1. Wszystko wewnątrz <div id="tp-prezenty">. Każdy selektor zaczyna się
      od #tp-prezenty albo od body #tp-prezenty. Poza zakresem stoją tylko
      dwie reguły warunkowe z sekcji 5, obie z :has(> #tp-prezenty).
   2. Arkusz ładuje się PRZED default_styles.css CMS (tak jak arkusz modułu
      /pl/vouchers), więc przy remisie specyficzności wygrywa CMS. Kolejność
      nie pomaga, pomaga specyficzność:
        reset elementów      body #tp-prezenty p          (1,0,2)
        komponenty           #tp-prezenty .tp-x           (1,1,0)
        stany komponentów    #tp-prezenty .tp-x:hover     (1,2,0)
      Najsilniejsze reguły CMS, które sięgają elementów modułu, to
      #main_content p i #main_content ul (1,0,1) oraz input[type="submit"]
      (0,1,1). Stany w resecie zapisujemy w :where(), żeby nie podnosiły
      specyficzności ponad klasę komponentu.
   3. Bez jednostek rem. CMS ustawia html { font-size: 14px }, więc rem daje
      w CMS inne rozmiary niż poza nim. Rozmiary w px z tokenów, odstępy
      liter w em (tokeny --tp-tracking-*).
   4. !important wyłącznie w regule [hidden] (sekcja 4).
   5. Klasy wyłącznie z prefiksem tp-. Każdy <img> dostaje klasę no-gallery,
      inaczej ready.js CMS owija go w odnośnik galerii prettyPhoto.
      Kontrola statyczna: narzedzia/kontrola-cms.mjs.
      Kontrola stylów obliczonych: narzedzia/asercje-pulapek.mjs.
   ===================================================================== */


/* =====================================================================
   1. TOKENY
   Przepisane co do znaku z Paper: get_tokens, plik
   turnau-landing-zestawy-prezentowe, skrót tokenów d33c399a, odczyt
   15.09.2026. Nazwy jak w Paper, z prefiksem --tp-. Porównanie programowe
   (F4a): 61 tokenów, 60 zgodnych co do znaku; --font-display i --font-sans
   porównane z opisem tokenu w Paper (sama nazwa rodziny w wartości, stos
   w opisie), jedyna różnica to rodzina zastępcza z sekcji 1a.
   Zmienne żyją na korzeniu modułu, nie na :root, żeby nie mieszać się
   ze zmiennymi serwisu. --tp-breakpoint-* są zapisem projektu: zmienna
   CSS nie działa w @media, więc progi w media queries wpisujemy liczbą
   z komentarzem wskazującym token albo pomiar.
   ===================================================================== */
#tp-prezenty {
    --tp-color-bg: #FFFFFF;
    --tp-color-surface: #ECEAE8;
    --tp-color-surface-cold: #FAFAFA;
    --tp-color-line: #D3D3D1;
    --tp-color-text: #333333;
    --tp-color-text-muted: #5A5A58;
    --tp-color-text-dim: #70706E;
    --tp-color-accent: #000000;
    --tp-color-green: #1b5e20;
    --tp-color-on-accent: #FFFFFF;
    --tp-color-cta: #C01722;
    --tp-color-cta-hover: #8E1119;
    --tp-color-on-cta: #FFFFFF;
    /* --tp-font-display: stos z opisu tokenu w Paper ("Archivo Narrow", "Arial Narrow",
       Helvetica, Arial, sans-serif) z JEDNĄ wstawką: rodzina zastępcza
       tp-archivo-narrow-zastepczy (sekcja 1a, decyzja D2) przed Helvetica. Wartość
       tokenu w Paper to sama nazwa rodziny, bo Paper nie rozwija stosu. */
    --tp-font-display: "Archivo Narrow", "Arial Narrow", "tp-archivo-narrow-zastepczy", Helvetica, Arial, sans-serif;
    --tp-font-sans: Helvetica, Arial, sans-serif;
    --tp-text-label: 12px;
    --tp-text-small: 14px;
    --tp-text-nav: 15px;
    --tp-text-body: 16px;
    --tp-text-h3-mobile: 17px;
    --tp-text-lead-mobile: 17px;
    --tp-text-h3: 20px;
    --tp-text-lead: 20px;
    --tp-text-h2-mobile: 24px;
    --tp-text-h1-mobile: 30px;
    --tp-text-h2: 36px;
    --tp-text-liczba: 38px;
    --tp-text-h1: 54px;
    --tp-font-weight-regular: 400;
    --tp-font-weight-bold: 700;
    --tp-tracking-normal: 0em;
    --tp-tracking-h1: 0.055em;
    --tp-tracking-h3: 0.06em;
    --tp-tracking-h2: 0.075em;
    --tp-tracking-nav: 0.08em;
    --tp-tracking-label: 0.14em;
    --tp-leading-small: 21px;
    --tp-leading-h3: 26px;
    --tp-leading-body: 27px;
    --tp-leading-lead: 31px;
    --tp-leading-h2: 44px;
    --tp-leading-h1: 60px;
    --tp-leading-h3-mobile: 22px;
    --tp-leading-h2-mobile: 28px;
    --tp-leading-h1-mobile: 34px;
    --tp-breakpoint-tresc: 640px;
    --tp-breakpoint-nav: 1009px;
    --tp-container-measure: 620px;
    --tp-container-narrow: 820px;
    --tp-container-content: 1200px;
    --tp-container-page: 1440px;
    --tp-space-1: 4px;
    --tp-space-2: 8px;
    --tp-space-3: 12px;
    --tp-space-4: 16px;
    --tp-space-5: 24px;
    --tp-space-6: 32px;
    --tp-space-7: 48px;
    --tp-space-8: 64px;
    --tp-space-9: 96px;
    --tp-space-10: 120px;
    --tp-radius-none: 0px;
}

/* =====================================================================
   1a. KRÓJ ZASTĘPCZY DLA --tp-font-display (decyzja D2, faza F4a)
   Problem (README-MAKIETA.md, „Ryzyko kroju zastępczego”): dopóki Archivo
   Narrow z Google Fonts się nie wczyta, a system nie ma Arial Narrow
   (Windows bez Office, Linux), etykiety rysuje Helvetica albo Arial,
   szersze o około 22%, i pasek belki rozpycha dokument w paśmie 1280 do
   1328 px. Rozwiązanie: rodzina tp-archivo-narrow-zastepczy z lokalnego
   Ariala (albo kroju metrycznie z nim zgodnego), przeskalowana tak, żeby
   szerokość tekstu odpowiadała Archivo Narrow. Zero pobrań.
   size-adjust: ZMIERZONY na tekście modułu po text-transform, osobno dla
   wag 400 i 700 (narzedzia/pomiar-kroju-zastepczego.mjs; wynik i metoda
   w komentarzu przy regule). Odstęp liter (letter-spacing w em) nie jest
   skalowany przez size-adjust, więc pomiar liczy same szerokości glifów.
   Metryki pionowe z tabel hhea i OS/2 pliku Archivo Narrow v35 (Google
   Fonts, TTF, odczyt 15.09.2026): unitsPerEm 1000, ascender 1035,
   descender -312, lineGap 0, bit USE_TYPO_METRICS ustawiony (typo = hhea),
   więc te same liczby obowiązują na Windows. Nadpisania dzielone przez
   size-adjust, bo size-adjust mnoży także metryki nadpisane:
   ascent-override = 103.5% / size-adjust, descent-override = 31.2% / size-adjust.
   unicode-range: suma zakresów latin, latin-ext i vietnamese z arkusza
   Google Fonts (css?family=Archivo+Narrow:400,700&subset=latin-ext), żeby
   rodzina zastępcza nie przejmowała znaków, których Archivo Narrow nie
   wozi (lekcja cls-z-fontu-wskazuje-wage-spoza-preloadu).
   Źródła local(): Arial i kroje metrycznie z nim zgodne (Arimo, Liberation
   Sans, Helvetica), więc jeden size-adjust obowiązuje dla każdego z nich.
   ===================================================================== */
@font-face {
    font-family: "tp-archivo-narrow-zastepczy";
    font-style: normal;
    font-weight: 400;
    src: local("Arial"), local("ArialMT"), local("Arimo"), local("Liberation Sans"), local("LiberationSans"), local("Helvetica");
    /* Pomiar 15.09.2026 (narzedzia/pomiar-kroju-zastepczego.mjs --tryb wyznacz, Chrome
       z Archivo Narrow z Google Fonts i Arialem systemowym macOS): suma szerokości glifów
       A/B = 0.8201 dla wagi 700 (pierwszy ekran 1440 x 900: 15 tekstów, 275 znaków;
       375 x 812: 6 tekstów, 143 znaki) i dla wagi 400 (26 tekstów, 338 znaków), ten sam
       współczynnik dla każdego pojedynczego tekstu: Archivo Narrow ma szerokości Arial
       Narrow, czyli Ariala zwężonego do 82%. */
    size-adjust: 82.01%;
    ascent-override: 126.2%;
    descent-override: 38.04%;
    line-gap-override: 0%;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF, U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303, U+0309, U+0323, U+1EA0-1EF9;
}

@font-face {
    font-family: "tp-archivo-narrow-zastepczy";
    font-style: normal;
    font-weight: 700;
    src: local("Arial Bold"), local("Arial-BoldMT"), local("Arimo Bold"), local("Arimo-Bold"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Helvetica Bold"), local("Helvetica-Bold");
    /* Pomiar 15.09.2026 (narzedzia/pomiar-kroju-zastepczego.mjs --tryb wyznacz, Chrome
       z Archivo Narrow z Google Fonts i Arialem systemowym macOS): suma szerokości glifów
       A/B = 0.8201 dla wagi 700 (pierwszy ekran 1440 x 900: 15 tekstów, 275 znaków;
       375 x 812: 6 tekstów, 143 znaki) i dla wagi 400 (26 tekstów, 338 znaków), ten sam
       współczynnik dla każdego pojedynczego tekstu: Archivo Narrow ma szerokości Arial
       Narrow, czyli Ariala zwężonego do 82%. */
    size-adjust: 82.01%;
    ascent-override: 126.2%;
    descent-override: 38.04%;
    line-gap-override: 0%;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF, U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303, U+0309, U+0323, U+1EA0-1EF9;
}

/* Miary układu zmierzone w artboardach. To NIE są tokeny Paper, więc stoją
   poza blokiem tokenów.
   --tp-uklad-margines: boczny odstęp treści od krawędzi ekranu.
   Pomiar: get_computed_styles na artboardzie „Landing mobile 375, wariant H”,
   15.09.2026: blok tekstu hero padding-inline 20px, sekcja H02 padding-inline
   20px, nagłówek H02 szerokości 335px (375 minus 2 razy 20). */
#tp-prezenty {
    --tp-uklad-margines: 20px;
    /* --tp-cel-dotyku: minimalny cel dotykowy. Kanon fabryki (menu mobilne) i Paper:
       przycisk 3MU-0 44 na 44, cele ikon 45H-0, język 461-0, odnośniki stopki 428-0. */
    --tp-cel-dotyku: 44px;
    /* --tp-interlinia-etykiety: etykiety 12 i 14 px z interlinią 16 px w Paper
       (węzły 33Z-0, 34Y-0, 424-0, 36K-0). */
    --tp-interlinia-etykiety: 16px;
}

/* Kolory pochodne z Paper, których nie ma w tokenach. Jedyne miejsce poza
   blokiem tokenów, w którym wolno wpisać wartość koloru (kontrola C4).
   --tp-kolor-przyciemnienie-od / -do: przyciemnienie pod linią praw
   w stopce. Paper, węzły 367-0 (desktop) i 422-0 (mobile), get_jsx
   15.09.2026: linear-gradient(in oklab 180deg, oklab(0% 0 0 / 0%) 0%,
   oklab(0% 0 0 / 58%) 100%). Czerń z kanałem alfa: przejście w oklab i w
   sRGB daje ten sam wynik, bo zmienia się tylko przezroczystość, więc
   zapis w rgb działa także w przeglądarkach bez interpolacji oklab. */
#tp-prezenty {
    --tp-kolor-przyciemnienie-od: rgb(0 0 0 / 0%);
    --tp-kolor-przyciemnienie-do: rgb(0 0 0 / 58%);
}


/* =====================================================================
   2. KORZEŃ MODUŁU
   Własna baza zamiast dziedziczenia z CMS. Neutralizuje:
     default_styles: html, body { background-color: White; color: Black;
       font-family: 'helvetica', 'arial', sans-serif; font-size: 14px;
       line-height: 1 }
     default_styles: #main_content { line-height: 150% }
   Tekst bieżący wg Paper (akapit wstępu H02, desktop 1440 i mobile 375,
   get_jsx): --font-sans, 16px, interlinia 27px, --color-text.
   font-synthesis, wygładzanie i overflow-wrap: anywhere Paper ustawia na
   każdym węźle eksportu JSX; przenosimy je, żeby grubość kroju i łamanie
   wierszy zgadzały się z artboardem.
   ===================================================================== */
body #tp-prezenty {
    display: block;
    margin: 0;
    padding: 0;
    color: var(--tp-color-text);
    background-color: var(--tp-color-bg);
    font-family: var(--tp-font-sans);
    font-size: var(--tp-text-body);
    font-weight: var(--tp-font-weight-regular);
    font-style: normal;
    line-height: var(--tp-leading-body);
    letter-spacing: var(--tp-tracking-normal);
    text-transform: none;
    text-align: left;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-wrap: anywhere;
}

/* CMS nie ustawia box-sizing globalnie (tylko #places-wrap * i
   .chosen-container *), przeglądarka domyślnie liczy content-box. */
body #tp-prezenty,
body #tp-prezenty *,
body #tp-prezenty *::before,
body #tp-prezenty *::after {
    box-sizing: border-box;
}


/* =====================================================================
   3. RESET ELEMENTÓW W ZAKRESIE MODUŁU
   Każda reguła ma specyficzność (1,0,2): body #tp-prezenty <element>.
   Przy każdej zapisany jest styl CMS (rewizja 665, pliki w
   makieta/snapshot-665/css/) i styl przeglądarki, który neutralizuje.
   Cel: element bez klasy wygląda tak samo w szablonie CMS i poza nim.
   Wygląd docelowy nadają klasy komponentów wg Paper.
   ===================================================================== */

/* 3.1 Pudełko elementów.
   CMS: default_styles, pierwsza reguła: html, body, div, span, ..., video
        { border: 0 none; margin: 0; padding: 0 }
   UA:  marginesy h1 do h6, p, ul, ol, dl, dd, figure, blockquote;
        wcięcie list; ramka i dopełnienie fieldset i legend. */
body #tp-prezenty :is(div, span, header, footer, main, nav, section, article,
  aside, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite,
  code, del, dfn, em, img, ins, kbd, q, s, samp, small, strong, sub, sup, var,
  b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table,
  caption, tbody, tfoot, thead, tr, th, td, details, summary, figure,
  figcaption, picture, time, mark, iframe) {
    margin: 0;
    padding: 0;
    border: 0;
}

/* 3.2 Nagłówki.
   CMS: h1, h2, h3, h4, h5 { font-family: 'Archivo Narrow', sans-serif;
          text-align: center }
        h1, h2 { font-size: 24px; font-weight: 700; letter-spacing: 3px;
          line-height: 40px; margin: 0 0 30px; text-transform: uppercase }
        h3 { font-size: 20px; font-weight: 400; line-height: 125%;
          margin: 0 0 30px }
        h4 { font-size: 18px; font-weight: 700; margin: 30px 0;
          text-transform: uppercase }
        h5 { font-size: 14px; font-weight: 700; margin: 5px 0 }
   UA:  h1 do h6 rozmiar w em, pogrubienie, marginesy w em (h6 bez reguły CMS).
   Nagłówek bez klasy wygląda jak tekst bieżący. Krój, rozmiar, wersaliki
   i odstęp liter nadają klasy komponentów wg Paper. */
body #tp-prezenty :is(h1, h2, h3, h4, h5, h6) {
    margin: 0;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    text-align: inherit;
}

/* 3.3 Akapit.
   CMS: #main_content p { line-height: 150%; margin: 0 auto 20px;
          max-width: 800px }
   UA:  p { margin-block: 1em } */
body #tp-prezenty p {
    max-width: none;
    margin: 0;
    line-height: inherit;
}

/* 3.4 Odnośniki.
   CMS: a { color: inherit; text-decoration: none }
        a:hover { text-decoration: underline }
   UA:  a { color: LinkText; text-decoration: underline }
   Paper: odnośniki tekstowe są podkreślone linią 1px. Pomiar: find_nodes
   z text-decoration underline na artboardzie desktop 1440, 15.09.2026:
   sześć węzłów (odnośnik do sklepu, trzy razy „Zapytaj o ten wariant”,
   dwa odnośniki do polityki prywatności).
   Stan :hover w :where(), czyli ze specyficznością (1,0,2): wygrywa
   z a:hover CMS (0,1,1) i przegrywa z każdą klasą komponentu, więc przycisk
   bez podkreślenia nie dostaje go po najechaniu. */
body #tp-prezenty a,
body #tp-prezenty a:where(:hover) {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
}

/* 3.5 Listy.
   CMS: #main_content ul, #main_content ol { margin-left: 30px }
   UA:  ul, ol { margin-block: 1em; padding-inline-start: 40px;
          list-style: disc albo decimal } */
body #tp-prezenty :is(ul, ol) {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 3.6 Tabele.
   CMS: table { border-collapse: collapse; border-spacing: 0;
          margin: 40px auto }
        table td { max-width: 200px; padding: 5px; text-align: center;
          width: 25% }
   UA:  table { border-collapse: separate; border-spacing: 2px }
        th, td { padding: 1px; vertical-align: middle }
        th { font-weight: bold; text-align: center }
        caption { text-align: center } */
body #tp-prezenty table {
    margin: 0;
    border-collapse: collapse;
    border-spacing: 0;
}

body #tp-prezenty :is(th, td) {
    width: auto;
    max-width: none;
    padding: 0;
    font-weight: inherit;
    text-align: inherit;
    vertical-align: top;
}

body #tp-prezenty caption {
    text-align: inherit;
}

/* 3.7 Pola formularza.
   CMS: input, textarea { border: 1px solid #d3d3d1; display: block;
          line-height: 30px; margin: 0 auto; margin-bottom: 10px;
          max-width: 290px; width: 100%; padding: 2px 5px;
          font-family: "helvetica", "arial", sans-serif; font-size: 14px }
        textarea { height: 200px }
   UA:  input, textarea, select { font: 13.333px krój systemowy;
          padding: 1px 2px; ramka 2px inset; szerokość z atrybutu size }
   Baza pola: blok na pełną szerokość swojej komórki, ramka 1px w kolorze
   --tp-color-line, bez zaokrąglenia. Wygląd docelowy nadaje komponent pola
   w fazie F5. */
body #tp-prezenty :is(input, textarea, select) {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
    padding: 0;
    border: 1px solid var(--tp-color-line);
    border-radius: var(--tp-radius-none);
    background-color: var(--tp-color-bg);
    background-image: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    text-transform: none;
}

/* 3.8 Pola wyboru.
   CMS: input[type="checkbox"] { height: 20px; width: 20px } oraz reguła
        input z 3.7 (display: block; width: 100%; margin: 0 auto 10px).
   UA:  checkbox 13 na 13 px, margin 3px 3px 3px 4px; radio
        margin 3px 3px 0 5px.
   Typ w :where(), żeby specyficzność została (1,0,2), a klasa komponentu
   wygrywała. */
body #tp-prezenty input:where([type="checkbox"], [type="radio"]) {
    display: inline-block;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background-color: transparent;
    vertical-align: middle;
}

/* 3.9 Przyciski.
   CMS: input[type="submit"] { background-color: #000; background-position:
          right 10px center; background-repeat: no-repeat; background-size:
          24px auto; border: 0 none; color: #fff; overflow: hidden;
          padding: 0 40px 0 10px; position: relative; width: auto;
          font-size: 12px; font-family: "Archivo Narrow", sans-serif;
          text-transform: uppercase; cursor: pointer }
        default_images: input[type="submit"] { background-image: strzałka
          w base64 }
   UA:  button { ramka 2px outset, tło ButtonFace, padding 1px 6px,
          krój systemowy }
   Przyciski formularzy modułu to <button type="submit">. input typu submit
   zerujemy na wypadek edycji HTML po stronie CMS. */
body #tp-prezenty button,
body #tp-prezenty input:where([type="submit"], [type="button"], [type="reset"]) {
    display: inline-block;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--tp-radius-none);
    background-color: transparent;
    background-image: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    text-transform: none;
    position: static;
    overflow: visible;
    cursor: pointer;
}

/* 3.10 Grupa pól.
   CMS: fieldset i legend w regule zerującej z 3.1.
   UA:  fieldset { margin: 0 2px; padding: 0.35em 0.75em 0.625em;
          border: 2px groove; min-inline-size: min-content }
        legend { padding-inline: 2px }
   Marginesy, dopełnienie i ramkę zeruje 3.1; tu zostaje minimalna
   szerokość, która potrafi rozepchnąć fieldset na wąskim ekranie. */
body #tp-prezenty fieldset {
    min-inline-size: 0;
}

/* 3.11 Akordeon.
   CMS: details i summary w regule zerującej z 3.1.
   UA:  summary { display: list-item; list-style: disclosure-closed }
        z trójkątem rozwinięcia.
   Znacznik rozwinięcia rysuje komponent pytań wg Paper (ikona w slocie
   16 na 22 px). */
body #tp-prezenty summary {
    display: block;
    list-style: none;
    cursor: pointer;
}

body #tp-prezenty summary::-webkit-details-marker {
    display: none;
}

/* 3.12 Obrazy, picture, svg, ramki osadzeń.
   CMS: img w regule zerującej z 3.1; #main_content iframe { max-width: 100% }
        ready.js: $('#main_content img:not(.no-gallery)') owija obraz
        w <a rel="gallery[]"> i podpina prettyPhoto. Tego CSS nie naprawi:
        każdy <img> dostaje w HTML klasę no-gallery.
   UA:  img i svg w linii tekstu, wyrównane do linii bazowej (szczelina pod
        obrazem); svg:not(:root) { overflow: hidden }. */
body #tp-prezenty img {
    display: block;
    max-width: 100%;
    height: auto;
}

body #tp-prezenty picture {
    display: block;
}

body #tp-prezenty svg {
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
}

body #tp-prezenty iframe {
    display: block;
    max-width: 100%;
}

/* 3.13 Cytaty i pogrubienia.
   CMS: blockquote, q { quotes: none }
        blockquote:before, blockquote:after, q:before, q:after
          { content: none }
        b { font-weight: 700 }
   UA:  q z cudzysłowami z właściwości quotes; b, strong { font-weight: bold } */
body #tp-prezenty :is(blockquote, q) {
    quotes: none;
}

body #tp-prezenty :is(blockquote, q)::before,
body #tp-prezenty :is(blockquote, q)::after {
    content: none;
}

body #tp-prezenty :is(b, strong) {
    font-weight: var(--tp-font-weight-bold);
}


/* =====================================================================
   4. UKRYWANIE
   Atrybut hidden zamiast klasy .hidden (klasa zajęta przez CMS).
   JEDYNE !important w arkuszu. Kanon fabryki zabrania !important, ale
   reguła przeglądarki [hidden] { display: none } ma najniższą wagę
   i przegrywa z każdą deklaracją display w komponentach
   (#tp-prezenty .tp-x { display: flex }). Bez !important element z hidden
   zostałby widoczny. Ta deklaracja nie rozstrzyga sporu z CMS, tylko
   przywraca znaczenie atrybutu.
   ===================================================================== */
#tp-prezenty[hidden],
#tp-prezenty [hidden] {
    display: none !important;
}


/* =====================================================================
   5. UKŁAD STRONY MODUŁU
   ===================================================================== */

/* 5.1 Pełna szerokość w szablonie CMS.
   CMS: #main_content { margin: 67px auto 0; max-width: 1200px;
          min-height: 900px; padding: 0 6% 188px; position: relative;
          z-index: 0 }
   Gdy korzeń modułu jest bezpośrednim dzieckiem #main_content, zdejmujemy
   ograniczenie szerokości i boczne dopełnienie, żeby sekcje malowały tło
   od krawędzi do krawędzi. padding-bottom, margin-top i min-height zostają
   bez zmian (cms/PLAN.md, faza F2). Specyficzność (2,0,0) wygrywa
   z #main_content (1,0,0) mimo arkusza CMS ładowanego później.
   Bez calc(50% - 50vw): 100vw liczy pasek przewijania i rozpycha stronę
   w bok. Przeglądarki bez :has() (Chrome przed 105, Safari przed 15.4,
   Firefox przed 121) pokażą moduł w kolumnie 1200px z bocznym dopełnieniem
   6%, bez przewijania w bok. */
#main_content:has(> #tp-prezenty) {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

/* 5.2 Margines body w układzie bez CSS CMS.
   UA: body { margin: 8px }. W układzie modułu bez default_styles.css
   (pytanie G1 do GSWtech) korzeń stoi bezpośrednio w body i dostałby białą
   ramkę 8px wokół sekcji. Reguła działa tylko wtedy, gdy korzeń jest
   bezpośrednim dzieckiem body, więc nie dotyka innych stron serwisu. */
body:has(> #tp-prezenty) {
    margin: 0;
}

/* 5.3 Sekcja: pas na pełną szerokość, maluje własne tło.
   Tony z Paper: biały --tp-color-bg (domyślny), szary --tp-color-surface,
   zimny --tp-color-surface-cold (pas formularza w H01). */
#tp-prezenty .tp-sekcja {
    display: block;
    width: 100%;
    background-color: var(--tp-color-bg);
}

#tp-prezenty .tp-sekcja--szara {
    background-color: var(--tp-color-surface);
}

#tp-prezenty .tp-sekcja--zimna {
    background-color: var(--tp-color-surface-cold);
}

/* 5.4 Treść: kolumna --tp-container-content (1200px) wyśrodkowana, boczny
   odstęp --tp-uklad-margines (20px) na każdej szerokości.
   Paper: desktop 1440, kontenery sekcji 1200px wyśrodkowane (np. nagłówek
   H02); mobile 375, treść 335px, czyli 20px od każdej krawędzi. */
#tp-prezenty .tp-tresc {
    width: 100%;
    max-width: calc(var(--tp-container-content) + 2 * var(--tp-uklad-margines));
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--tp-uklad-margines);
    padding-right: var(--tp-uklad-margines);
}


/* =====================================================================
   6. POMOCNICZE
   ===================================================================== */

/* 6.1 Tekst wyłącznie dla czytników ekranu (nazwy przycisków strzałek,
   dopiski o nowej karcie). Klasy .hidden i podobne zajmuje CMS. */
#tp-prezenty .tp-ukryte {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* 6.2 Fokus z klawiatury. Kanon nagłówka: :focus-visible w kolorze marki.
   Na zdjęciu stopki kolor zmienia sekcja 9. */
#tp-prezenty :where(a, button, summary):focus-visible {
    outline: 2px solid var(--tp-color-accent);
    outline-offset: 2px;
}

/* 6.3 Strzałka rozwinięcia. Paper: SVG 12 na 7 px, ścieżka M1 1L6 6L11 1,
   obrys 2 px w --color-accent (węzły 340-0 w belce, 44U-0 w nakładce,
   34Z-0 przy języku). Kolor bierze z color rodzica. */
#tp-prezenty .tp-strzalka {
    --tp-strzalka-szer: 12px;
    --tp-strzalka-wys: 7px;
    --tp-strzalka-obrys: 2;
    display: block;
    flex-shrink: 0;
    width: var(--tp-strzalka-szer);
    height: var(--tp-strzalka-wys);
    fill: none;
    stroke: currentColor;
    stroke-width: var(--tp-strzalka-obrys);
    transition: transform 0.2s ease;
}

/* 6.4 Ikony społecznościowe. Paper: kształt tła w --color-accent, znak
   w --color-bg (węzły 34H-0 do 34W-0). Tło przez fill="currentColor"
   w SVG, znak przez klasę, bo presentation attribute nie przyjmuje var(). */
#tp-prezenty .tp-ikona {
    display: block;
    flex-shrink: 0;
}

#tp-prezenty .tp-ikona__znak {
    fill: var(--tp-color-bg);
}

/* Paper 34M-0 i 34N-0: obrys znaku Instagramu 1.6 (jednostki viewBox 24). */
#tp-prezenty .tp-ikona__obrys {
    --tp-ikona-obrys: 1.6;
    fill: none;
    stroke: var(--tp-color-bg);
    stroke-width: var(--tp-ikona-obrys);
}


/* =====================================================================
   7. BELKA
   Paper: węzeł 33S-0 „Belka serwisu glownego wg wzoru klienta, jeden
   wiersz" (desktop 1440 na 123 px) i 3MS-0 (mobile 375 na 56 px), wartości
   z get_jsx 15.09.2026. Belka nie jest przyklejona (desktop: jak w Paper;
   mobile: przełącznik K6 w sekcji 7.6, domyślnie wyłączony).

   PRÓG NAWIGACJI: 1279 px. Do 1279 px włącznie hamburger i menu mobilne,
   od 1280 px nawigacja desktopowa. TA SAMA LICZBA stoi w
   dostawa/js/zestawy-prezentowe.js, KONFIGURACJA.mediaNawigacjiDesktop
   ('(min-width: 1280px)'), i w sekcji 8 poniżej. Zmiana progu to zawsze
   zmiana w trzech miejscach naraz. Pomiar i jego metoda:
   narzedzia/pomiar-progu-belki.mjs oraz README-MAKIETA.md, „Próg nawigacji".
   To NIE jest próg rytmu treści (--tp-breakpoint-tresc, 640 px) ani próg
   stopki (1024 px, sekcja 9).
   ===================================================================== */

/* 7.1 Pasek. Paper 33S-0: flex, wyrównanie do środka, tło --color-bg,
   obramowanie dolne 1 px --color-line, padding 51 / 71 / 50 / 61,
   wysokość 51 + 21 (ikony) + 50 + 1 = 123 px.
   Boczne marginesy (szerokości, których Paper nie rysuje):
     od 1440 px: kompozycja 1440 px wyśrodkowana (61 i 71 px przy 1440),
     poniżej: odstęp między znakiem a menu zostaje na 40 px, a marginesy
       maleją proporcjonalnie 61:71 aż do --tp-uklad-margines (20 px).
   --tp-belka-tresc-paper = znak 267 + odstęp 40 + prawa grupa 990 (33V-0).
   Wysokość 123 px zamiast paddingu pionowego, bo pozycje menu rozciągają
   się na całą wysokość paska: podmenu wisi dzięki temu od dolnej krawędzi
   belki, jak w CMS (tam a.has-sub ma padding-bottom 24 px do końca #header),
   a najechanie myszą nie gubi się w szczelinie. */
#tp-prezenty .tp-belka {
    --tp-belka-wysokosc: 123px;
    --tp-belka-margines-lewy: 61px;
    --tp-belka-margines-prawy: 71px;
    --tp-belka-tresc-paper: 1297px;
    --tp-belka-szer-paper: 1440px;
    --tp-belka-odstep-grup: 40px;
    --tp-belka-z: 20;
    position: relative;
    z-index: var(--tp-belka-z);
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: var(--tp-belka-odstep-grup);
    height: var(--tp-belka-wysokosc);
    padding-top: 0;
    padding-bottom: 0;
    padding-left: max(
            calc((100% - var(--tp-belka-szer-paper)) / 2 + var(--tp-belka-margines-lewy)),
            var(--tp-uklad-margines),
            min(calc((100% - var(--tp-belka-tresc-paper)) * 61 / 132), var(--tp-belka-margines-lewy))
    );
    padding-right: max(
            calc((100% - var(--tp-belka-szer-paper)) / 2 + var(--tp-belka-margines-prawy)),
            var(--tp-uklad-margines),
            min(calc((100% - var(--tp-belka-tresc-paper)) * 71 / 132), var(--tp-belka-margines-prawy))
    );
    border-bottom: 1px solid var(--tp-color-line);
    background-color: var(--tp-color-bg);
}

/* 7.2 Znak słowny. Paper 33T-0: 267 na 14 px, obraz background-size
   contain, wyśrodkowany. Plik 509 na 26 px, więc contain daje 267 na
   13,6 px; object-fit: contain odtwarza to samo. */
#tp-prezenty .tp-belka__znak {
    display: block;
    flex-shrink: 0;
    line-height: 0;
    text-decoration: none;
}

#tp-prezenty .tp-belka__znak-obraz {
    --tp-znak-szer: 267px;
    --tp-znak-wys: 14px;
    width: var(--tp-znak-szer);
    height: var(--tp-znak-wys);
    max-width: none;
    object-fit: contain;
    object-position: 50% 50%;
}

/* 7.3 Nawigacja desktopowa: menu, Kup online, ikony, język.
   Paper 33V-0: flex, gap 40 px. Rozciąga się na wysokość paska (7.1). */
#tp-prezenty .tp-belka__nawigacja {
    display: flex;
    align-self: stretch;
    align-items: center;
    flex-shrink: 0;
    gap: var(--tp-belka-odstep-grup);
}

/* Wspólny krój etykiet belki. Paper 33Z-0, 34F-0, 34Y-0: --font-display,
   14 px, 700, interlinia 16 px, wersaliki, bez odstępu liter, szerokość
   max-content (w CSS: bez łamania). */
#tp-prezenty :is(.tp-menu__odnosnik, .tp-belka__sklep, .tp-jezyk__przelacznik) {
    --tp-belka-interlinia: var(--tp-interlinia-etykiety);
    font-family: var(--tp-font-display);
    font-size: var(--tp-text-small);
    font-weight: var(--tp-font-weight-bold);
    line-height: var(--tp-belka-interlinia);
    letter-spacing: var(--tp-tracking-normal);
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}

/* Menu. Paper 33W-0: gap 28 px; pozycja 33Y-0: etykieta i strzałka, gap 17. */
#tp-prezenty .tp-menu {
    --tp-menu-odstep: 28px;
    --tp-menu-odstep-strzalki: 17px;
    display: flex;
    align-self: stretch;
    flex-shrink: 0;
    gap: var(--tp-menu-odstep);
}

#tp-prezenty .tp-menu__poz {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: var(--tp-menu-odstep-strzalki);
}

#tp-prezenty .tp-menu__odnosnik {
    color: var(--tp-color-accent);
}

/* Stan najechania z CMS: #menu-top a:hover { color: #515151 } (default_styles),
   w tokenach --tp-color-text-muted. */
#tp-prezenty .tp-menu__odnosnik:hover,
#tp-prezenty .tp-jezyk__przelacznik:hover {
    color: var(--tp-color-text-muted);
}

/* Przycisk strzałki: szerokość z ikony (12 px, jak w Paper), wysokość
   interlinii etykiety; pole kliknięcia
   powiększone pseudoelementem o 8 px na boki i w pionie, mniej niż odstęp
   17 px od etykiety, więc nie zachodzi na odnośnik. */
#tp-prezenty .tp-menu__strzalka {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    --tp-menu-strzalka-pole: -8px;
    width: auto;
    height: var(--tp-interlinia-etykiety);
    color: var(--tp-color-accent);
}

#tp-prezenty .tp-menu__strzalka::after {
    content: "";
    position: absolute;
    inset: var(--tp-menu-strzalka-pole);
}

/* Kup online. Paper 34F-0: --color-cta. Odnośnik do sklepu serwisu, nie
   wezwanie landinga. */
#tp-prezenty .tp-belka__sklep {
    flex-shrink: 0;
    color: var(--tp-color-cta);
}

#tp-prezenty .tp-belka__sklep:hover {
    color: var(--tp-color-cta-hover);
}

/* Ikony. Paper 34G-0: gap 11 px; SVG 21 na 21 px, YouTube 21 na 15 px. */
#tp-prezenty .tp-ikony {
    --tp-ikony-odstep: 11px;
    --tp-ikona-belka: 21px;
    --tp-ikona-belka-yt: 15px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: var(--tp-ikony-odstep);
}

#tp-prezenty .tp-ikony__odnosnik {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tp-color-accent);
    text-decoration: none;
}

#tp-prezenty .tp-ikony__odnosnik:hover {
    color: var(--tp-color-text-muted);
}

#tp-prezenty .tp-ikony .tp-ikona {
    width: var(--tp-ikona-belka);
    height: var(--tp-ikona-belka);
}

#tp-prezenty .tp-ikony .tp-ikona--yt {
    height: var(--tp-ikona-belka-yt);
}

/* Język. Paper 34X-0: PL i strzałka, gap 9 px. */
#tp-prezenty .tp-jezyk {
    position: relative;
    display: flex;
    align-self: stretch;
    align-items: center;
    flex-shrink: 0;
}

#tp-prezenty .tp-jezyk__przelacznik {
    --tp-jezyk-odstep: 9px;
    display: flex;
    align-items: center;
    gap: var(--tp-jezyk-odstep);
    color: var(--tp-color-accent);
}

/* 7.4 Podmenu desktopowe (decyzja D1).
   ZACHOWANIE z żywego CMS (default_styles, rewizja 665):
     #menu-top > ul > li ul { display: none; position: absolute; min-width:
       160px; padding: 30px; font-size: 12px; text-transform: uppercase }
     #menu-top > ul > li:hover ul { display: block; background-color: #fff }
     #menu-top > ul > li ul li { line-height: 30px }
     #lang_box:hover > ul { display: block } (przełącznik języka)
   czyli rozwijanie po najechaniu, lista wisi od dolnej krawędzi nagłówka,
   wyrównana do lewej krawędzi pozycji. Dodane ponad CMS: fokus w pozycji
   (:focus-within) otwiera listę, Escape zwija i zwraca fokus, przycisk
   strzałki przełącza listę kliknięciem (skrypt, sekcja BELKA), aria-expanded
   na przycisku. Tego elementu Paper nie rysuje: wygląd z tokenów
   (tło --color-bg, obramowanie 1 px --color-line jak panele w Paper, krój
   --font-display), rozmiary spoza tokenów z CMS.
   Specyficzność: otwarcie (1,2,0), wymuszone zwinięcie (1,3,0). */
#tp-prezenty .tp-podmenu {
    --tp-podmenu-min-szer: 160px;
    --tp-podmenu-wiersz: 30px;
    --tp-podmenu-z: 1;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: var(--tp-podmenu-z);
    display: none;
    min-width: var(--tp-podmenu-min-szer);
    padding: var(--tp-space-4) var(--tp-space-5);
    border: 1px solid var(--tp-color-line);
    background-color: var(--tp-color-bg);
}

#tp-prezenty .tp-rozwijane:hover > .tp-podmenu,
#tp-prezenty .tp-rozwijane:focus-within > .tp-podmenu,
#tp-prezenty .tp-rozwijane--otwarte > .tp-podmenu {
    display: block;
}

#tp-prezenty .tp-rozwijane.tp-rozwijane--zwiniete > .tp-podmenu {
    display: none;
}

#tp-prezenty .tp-podmenu--jezyk {
    --tp-podmenu-jezyk-min-szer: 50px;
    right: 0;
    left: auto;
    min-width: var(--tp-podmenu-jezyk-min-szer);
}

#tp-prezenty .tp-podmenu__odnosnik {
    display: block;
    font-family: var(--tp-font-display);
    font-size: var(--tp-text-small);
    font-weight: var(--tp-font-weight-regular);
    line-height: var(--tp-podmenu-wiersz);
    letter-spacing: var(--tp-tracking-normal);
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    color: var(--tp-color-accent);
}

#tp-prezenty .tp-podmenu__odnosnik:hover {
    color: var(--tp-color-text-muted);
}

/* Bieżąca strona (w CMS: li.active). */
#tp-prezenty .tp-podmenu__odnosnik[aria-current="page"] {
    font-weight: var(--tp-font-weight-bold);
}

/* 7.5 Hamburger. Paper 3MU-0: cel 44 na 44 px, trzy linie 22 na 2 px,
   odstęp 5 px, --color-accent. Stan otwarty wg 44K-0 (znak X): linia 1
   i 3 obrócone o 45 stopni, linia 2 przezroczysta. Przesunięcie linii
   = odstęp + grubość = 7 px. Tylko transform i opacity, czyli bez
   przeliczania układu. Widoczny do progu nawigacji (7.6). */
#tp-prezenty .tp-belka__hamburger {
    --tp-hamburger-cel: var(--tp-cel-dotyku);
    --tp-hamburger-kreska-szer: 22px;
    --tp-hamburger-kreska-wys: 2px;
    --tp-hamburger-odstep: 5px;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    gap: var(--tp-hamburger-odstep);
    width: var(--tp-hamburger-cel);
    height: var(--tp-hamburger-cel);
    color: var(--tp-color-accent);
}

#tp-prezenty .tp-belka__kreska {
    display: block;
    width: var(--tp-hamburger-kreska-szer);
    height: var(--tp-hamburger-kreska-wys);
    background-color: currentColor;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

#tp-prezenty .tp-belka__hamburger[aria-expanded="true"] .tp-belka__kreska:nth-child(1) {
    transform: translateY(calc(var(--tp-hamburger-odstep) + var(--tp-hamburger-kreska-wys))) rotate(45deg);
}

#tp-prezenty .tp-belka__hamburger[aria-expanded="true"] .tp-belka__kreska:nth-child(2) {
    opacity: 0;
}

#tp-prezenty .tp-belka__hamburger[aria-expanded="true"] .tp-belka__kreska:nth-child(3) {
    transform: translateY(calc(-1 * (var(--tp-hamburger-odstep) + var(--tp-hamburger-kreska-wys)))) rotate(-45deg);
}

/* 7.6 Belka mobilna, do progu nawigacji włącznie (1279 px, patrz nagłówek
   sekcji 7; ta sama liczba w sekcji 8 i w skrypcie).
   Paper 3MS-0: wysokość 56 px, padding 20 px z lewej i 9 px z prawej,
   znak 235 na 12 px (3MT-0), rozstawienie space-between.
   Gest zamykania łapany na pasku (skrypt, sekcja MENU MOBILNE): touch-action
   none tylko przy otwartym menu, żeby zamknięta belka nie blokowała
   przewijania strony palcem. */
@media (max-width: 1279px) {
    #tp-prezenty .tp-belka {
        --tp-belka-mobile-wysokosc: 56px;
        --tp-belka-mobile-margines-lewy: 20px;
        --tp-belka-mobile-margines-prawy: 9px;
        height: var(--tp-belka-mobile-wysokosc);
        padding-left: var(--tp-belka-mobile-margines-lewy);
        padding-right: var(--tp-belka-mobile-margines-prawy);
    }

    /* Paper 3MT-0: znak 235 na 12 px. */
    #tp-prezenty .tp-belka__znak-obraz {
        --tp-znak-szer: 235px;
        --tp-znak-wys: 12px;
    }

    #tp-prezenty .tp-belka__nawigacja {
        display: none;
    }

    #tp-prezenty .tp-belka__hamburger {
        display: flex;
    }

    #tp-prezenty .tp-belka--menu-otwarte {
        touch-action: none;
    }

    /* PRZEŁĄCZNIK K6: przyklejona belka na mobile. DOMYŚLNIE WYŁĄCZONY
       (pytanie K6 do klienta bez odpowiedzi). Włączenie: klasa
       tp-belka-przyklejona na <div id="tp-prezenty"> w HTML układu. Nic
       więcej nie trzeba zmieniać: skrypt liczy położenie nakładki od dolnej
       krawędzi belki w chwili otwarcia, więc działa w obu wariantach. */
    #tp-prezenty.tp-belka-przyklejona .tp-belka {
        position: sticky;
        top: 0;
    }
}

/* 7.7 Belka mobilna poniżej 340 px (poprawka v1.1, 15.09.2026).
   Dotyczy wyłącznie paska 7.6, także przy otwartym menu (artboard 42N-0
   używa tego samego paska). Paper nie rysuje szerokości poniżej 375 px.
   Skąd 339: stała treść paska to padding lewy 20 + znak 235 (3MT-0)
   + odstęp kolumn 40 (7.1) + hamburger 44 (3MU-0) = 339 px, a znak
   i hamburger mają flex-shrink 0. W v1 przy oknie 338 px i węższym
   przycisk menu wychodził poza ekran (320 px: przycisk od 295 do 339 px,
   dokument 339 px). Od 340 px ta reguła nie działa i geometria zostaje
   jak w v1 (375 px: znak od 20 do 255 px, przycisk od 322 do 366 px).
   W pasie do 339 px:
     odstęp kolumn 16 px (--tp-space-4) zamiast 40 px; to minimum,
       space-between rozsuwa grupy dalej, gdy jest miejsce,
     znak może się zwężać (min-width 0 na odnośniku, max-width 100% na
       obrazie przy object-fit: contain), więc przycisk 44 na 44 px zostaje
       w oknie z prawym marginesem 9 px (3MS-0) przy każdej szerokości.
   Pomiar CDP po zmianie, uklad-czysty i uklad-cms: 320 px znak 231 px,
   przycisk od 267 do 311 px; 339 px znak 235 px, przycisk od 286 do 330 px. */
@media (max-width: 339px) {
    #tp-prezenty .tp-belka {
        --tp-belka-mobile-odstep-waski: var(--tp-space-4);
        column-gap: var(--tp-belka-mobile-odstep-waski);
    }

    #tp-prezenty .tp-belka__znak {
        flex-shrink: 1;
        min-width: 0;
    }

    #tp-prezenty .tp-belka__znak-obraz {
        max-width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    #tp-prezenty .tp-belka__kreska,
    #tp-prezenty .tp-strzalka {
        transition: none;
    }
}


/* =====================================================================
   8. MENU MOBILNE
   Paper: artboard 42N-0 „Menu mobilne otwarte 375, belka serwisu", wartości
   z get_jsx 15.09.2026. Adnotacja strefy gestu (46B-0) nie jest elementem
   strony. Kanon nagłówka (CLAUDE.md fabryki): warstwa od dolnej krawędzi
   belki do dołu ekranu, calc(100dvh - wysokość belki) z zapasowym 100vh,
   pełne tło bez przezroczystości, wjazd z góry (tylko transform),
   uchwyt, jawny przycisk Zamknij, gest w górę na uchwycie i pasku belki.
   Zamknięta warstwa: visibility hidden i pointer-events none, bez
   visibility: visible na potomkach (lekcja menu-lapie-klikniecia), więc
   nie łapie dotknięć i nie wchodzi do kolejności fokusu.
   --tp-menu-gora: dolna krawędź belki w oknie, ustawiana przez skrypt
   przy otwarciu (belka nie jest przyklejona, a w szablonie CMS stoi niżej
   o margines #main_content). Wartość domyślna = wysokość belki mobilnej.
   ===================================================================== */
#tp-prezenty .tp-menu-mob {
    --tp-menu-gora: 56px;
    --tp-menu-mob-z: 15;
    display: none;
}

/* PRÓG NAWIGACJI: ta sama liczba co w 7.6 i w skrypcie. */
@media (max-width: 1279px) {
    #tp-prezenty .tp-menu-mob {
        position: fixed;
        top: var(--tp-menu-gora);
        right: 0;
        left: 0;
        z-index: var(--tp-menu-mob-z);
        display: flex;
        flex-direction: column;
        height: calc(100vh - var(--tp-menu-gora));
        height: calc(100dvh - var(--tp-menu-gora));
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        background-color: var(--tp-color-bg);
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-100%);
        transition: transform 0.3s ease, visibility 0s linear 0.3s;
    }

    #tp-prezenty .tp-menu-mob.tp-menu-mob--otwarte {
        visibility: visible;
        pointer-events: auto;
        transform: none;
        transition: transform 0.3s ease, visibility 0s linear 0s;
    }
}

@media (prefers-reduced-motion: reduce) {
    #tp-prezenty .tp-menu-mob,
    #tp-prezenty .tp-menu-mob.tp-menu-mob--otwarte {
        transition: none;
    }
}

/* 8.1 Uchwyt. Paper 44O-0: pas na pełną szerokość, padding 12 px u góry
   i 6 px u dołu; belka 44P-0: 44 na 4 px, --color-line. Strefa gestu. */
#tp-prezenty .tp-menu-mob__uchwyt {
    --tp-uchwyt-gora: 12px;
    --tp-uchwyt-dol: 6px;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
    padding-top: var(--tp-uchwyt-gora);
    padding-bottom: var(--tp-uchwyt-dol);
    touch-action: none;
}

#tp-prezenty .tp-menu-mob__uchwyt-belka {
    --tp-uchwyt-belka-szer: 44px;
    --tp-uchwyt-belka-wys: 4px;
    display: block;
    width: var(--tp-uchwyt-belka-szer);
    height: var(--tp-uchwyt-belka-wys);
    background-color: var(--tp-color-line);
}

/* 8.2 Lista pozycji. Paper 44Q-0: padding 8 px u góry, 20 px z boków.
   Pozycja 44R-0: space-between, padding pionowy 16 px, obramowanie dolne
   1 px --color-line; etykieta 44S-0: --font-display 22/26, 700, odstęp
   liter 0.08em (--tracking-nav), wersaliki; slot strzałki 44T-0: 24 na 26.
   Pole kliknięcia etykiety: 26 + 2 x 9 = 44 px (wiersz oddaje te 9 px
   z paddingu, wysokość pozycji zostaje 16 + 26 + 16 + 1 = 59 px). */
#tp-prezenty .tp-menu-mob__lista {
    --tp-menu-mob-lista-gora: 8px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    padding-top: var(--tp-menu-mob-lista-gora);
    padding-left: var(--tp-uklad-margines);
    padding-right: var(--tp-uklad-margines);
}

#tp-prezenty .tp-menu-mob__poz {
    border-bottom: 1px solid var(--tp-color-line);
}

#tp-prezenty .tp-menu-mob__wiersz {
    --tp-menu-mob-wiersz-pion: 16px;
    --tp-menu-mob-cel-dopelnienie: 9px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: calc(var(--tp-menu-mob-wiersz-pion) - var(--tp-menu-mob-cel-dopelnienie));
    padding-bottom: calc(var(--tp-menu-mob-wiersz-pion) - var(--tp-menu-mob-cel-dopelnienie));
}

#tp-prezenty .tp-menu-mob__odnosnik {
    --tp-menu-mob-rozmiar: 22px;
    --tp-menu-mob-interlinia: 26px;
    display: block;
    padding-top: var(--tp-menu-mob-cel-dopelnienie);
    padding-bottom: var(--tp-menu-mob-cel-dopelnienie);
    font-family: var(--tp-font-display);
    font-size: var(--tp-menu-mob-rozmiar);
    font-weight: var(--tp-font-weight-bold);
    line-height: var(--tp-menu-mob-interlinia);
    letter-spacing: var(--tp-tracking-nav);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--tp-color-accent);
}

/* Kup online w nakładce. Paper 45C-0: --color-cta. */
#tp-prezenty .tp-menu-mob__odnosnik--sklep {
    color: var(--tp-color-cta);
}

#tp-prezenty :is(.tp-menu-mob__strzalka, .tp-menu-mob__slot) {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    --tp-menu-mob-slot-szer: 24px;
    --tp-menu-mob-slot-wys: 26px;
    width: var(--tp-menu-mob-slot-szer);
    height: var(--tp-menu-mob-slot-wys);
    color: var(--tp-color-accent);
}

/* Pole dotyku przycisku strzałki: 24 + 2 x 10 = 44 px szerokości,
   26 + 2 x 16 = 58 px wysokości, bez zmiany układu wiersza. */
#tp-prezenty .tp-menu-mob__strzalka::after {
    content: "";
    position: absolute;
    inset: calc((var(--tp-cel-dotyku) - var(--tp-menu-mob-slot-wys)) / -2 - 7px) calc((var(--tp-cel-dotyku) - var(--tp-menu-mob-slot-szer)) / -2);
}

#tp-prezenty .tp-menu-mob__strzalka[aria-expanded="true"] .tp-strzalka {
    transform: rotate(180deg);
}

/* Podmenu w nakładce: rozwijane przyciskiem strzałki, bez najechania.
   Paper go nie rysuje; tokeny: --font-display, --text-body,
   --tracking-nav, cel dotykowy 44 px. */
#tp-prezenty .tp-menu-mob__pod {
    padding-left: var(--tp-space-4);
    padding-bottom: var(--tp-space-3);
}

#tp-prezenty .tp-menu-mob__pododnosnik {
    display: flex;
    align-items: center;
    min-height: var(--tp-cel-dotyku);
    font-family: var(--tp-font-display);
    font-size: var(--tp-text-body);
    font-weight: var(--tp-font-weight-regular);
    line-height: var(--tp-leading-h3-mobile);
    letter-spacing: var(--tp-tracking-nav);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--tp-color-text);
}

#tp-prezenty .tp-menu-mob__pododnosnik[aria-current="page"] {
    font-weight: var(--tp-font-weight-bold);
}

/* 8.3 Ikony i język. Paper 45F-0: space-between, padding 8 px u góry,
   10 px z lewej, 20 px z prawej; cele 44 na 44 px (45H-0) z ikoną 24 na 24
   (YouTube 24 na 17); język w celu 44 px wysokości (461-0), PL i strzałka
   z odstępem 9 px. Lista EN i DE rozwija się w tym samym wierszu, na lewo
   od PL, w celach 44 na 44 px. */
#tp-prezenty .tp-menu-mob__dodatki {
    --tp-menu-mob-dodatki-gora: 8px;
    --tp-menu-mob-dodatki-lewy: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    padding-top: var(--tp-menu-mob-dodatki-gora);
    padding-left: var(--tp-menu-mob-dodatki-lewy);
    padding-right: var(--tp-uklad-margines);
}

#tp-prezenty .tp-menu-mob__ikony {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

#tp-prezenty .tp-menu-mob__ikona-odnosnik {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--tp-cel-dotyku);
    height: var(--tp-cel-dotyku);
    color: var(--tp-color-accent);
    text-decoration: none;
}

/* Paper 45I-0: ikona 24 na 24 px; 45S-0: YouTube 24 na 17 px. */
#tp-prezenty .tp-menu-mob__ikony {
    --tp-ikona-mob: 24px;
    --tp-ikona-mob-yt: 17px;
}

#tp-prezenty .tp-menu-mob__ikony .tp-ikona {
    width: var(--tp-ikona-mob);
    height: var(--tp-ikona-mob);
}

#tp-prezenty .tp-menu-mob__ikony .tp-ikona--yt {
    height: var(--tp-ikona-mob-yt);
}

#tp-prezenty .tp-menu-mob__jezyk {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    height: var(--tp-cel-dotyku);
}

#tp-prezenty .tp-menu-mob__jezyki {
    display: flex;
    align-items: center;
}

#tp-prezenty :is(.tp-menu-mob__jezyk-przelacznik, .tp-menu-mob__jezyk-odnosnik) {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: var(--tp-cel-dotyku);
    height: var(--tp-cel-dotyku);
    font-family: var(--tp-font-display);
    font-size: var(--tp-text-small);
    font-weight: var(--tp-font-weight-bold);
    line-height: var(--tp-interlinia-etykiety);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--tp-color-accent);
}

/* Paper 462-0: PL i strzałka z odstępem 9 px. */
#tp-prezenty .tp-menu-mob__jezyk-przelacznik {
    --tp-menu-mob-jezyk-odstep: 9px;
    gap: var(--tp-menu-mob-jezyk-odstep);
}

#tp-prezenty .tp-menu-mob__jezyk-odnosnik {
    justify-content: center;
}

#tp-prezenty .tp-menu-mob__jezyk-przelacznik[aria-expanded="true"] .tp-strzalka {
    transform: rotate(180deg);
}

/* 8.4 Dół warstwy. Paper 466-0 (rozpornik, w kodzie margin-top: auto)
   i 467-0: padding 24 / 20 / 32. Przycisk 468-0: 335 na 48 px (pełna
   szerokość kolumny), obramowanie 1 px --color-line, bez tła; etykieta
   469-0: --font-display, --text-nav, 700, --tracking-nav, interlinia 18,
   wersaliki, --color-text. */
#tp-prezenty .tp-menu-mob__dol {
    --tp-menu-mob-dol-gora: 24px;
    --tp-menu-mob-dol-dol: 32px;
    flex-shrink: 0;
    margin-top: auto;
    padding-top: var(--tp-menu-mob-dol-gora);
    padding-bottom: var(--tp-menu-mob-dol-dol);
    padding-left: var(--tp-uklad-margines);
    padding-right: var(--tp-uklad-margines);
}

#tp-prezenty .tp-menu-mob__zamknij {
    --tp-zamknij-wysokosc: 48px;
    --tp-zamknij-interlinia: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--tp-zamknij-wysokosc);
    border: 1px solid var(--tp-color-line);
    background-color: transparent;
    font-family: var(--tp-font-display);
    font-size: var(--tp-text-nav);
    font-weight: var(--tp-font-weight-bold);
    line-height: var(--tp-zamknij-interlinia);
    letter-spacing: var(--tp-tracking-nav);
    text-transform: uppercase;
    color: var(--tp-color-text);
}


/* =====================================================================
   9. STOPKA
   Paper: węzły 365-0 (desktop 1440 na 598 px) i 420-0 (mobile 375 na
   663 px), wartości z get_jsx 15.09.2026. Pas zdjęcia z przyciemnieniem,
   znacznikiem zdjęcia zastępczego i linią praw oraz biały pas ze slotami
   logotypów dotacyjnych.
   Elementy zastępcze (znacznik „Zdjęcie do wymiany” i sloty z nazwami)
   noszą klasę tp-zastepcze; kontrola-cms.mjs wypisuje ich liczbę, przed
   produkcją ma być 0 (dostawa/SLOTY-ZDJEC.md).
   Bazą jest układ mobilny 420-0. Od 1024 px układ desktopowy 365-0.
   PRÓG STOPKI 1024 px: ramka logotypów ma w Paper stałe 960 px, więc
   potrzebuje 960 + 2 x 20 = 1000 px okna; linia praw w jednym wierszu
   potrzebuje mniej (pomiar: README-MAKIETA.md, „Próg stopki”). Osobna
   rodzina od progu nawigacji (1279 px) i rytmu treści (640 px).
   ===================================================================== */
#tp-prezenty .tp-stopka {
    display: block;
    background-color: var(--tp-color-bg);
}

/* 9.1 Pas zdjęcia. Paper 421-0: 375 na 360 px, zdjęcie cover, położenie
   50% 55%, overflow clip. Zdjęcie jako <img> w <picture> (plik webp
   obok jpg), nie jako tło: CMS nie negocjuje WebP, a obraz w HTML dostaje
   width, height i loading. */
#tp-prezenty .tp-stopka__pas {
    --tp-stopka-pas-wys: 360px;
    position: relative;
    height: var(--tp-stopka-pas-wys);
    overflow: hidden;
}

#tp-prezenty .tp-stopka__kadr {
    position: absolute;
    inset: 0;
}

#tp-prezenty .tp-stopka__zdjecie {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: 50% 55%;
}

/* Paper 422-0: 375 na 220 px przy dolnej krawędzi. */
#tp-prezenty .tp-stopka__przyciemnienie {
    --tp-stopka-przyciemnienie-wys: 220px;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: var(--tp-stopka-przyciemnienie-wys);
    background-image: linear-gradient(180deg, var(--tp-kolor-przyciemnienie-od) 0%, var(--tp-kolor-przyciemnienie-do) 100%);
}

/* Znacznik zdjęcia zastępczego. Paper 423-0: 16 px od lewej i od góry.
   Wygląd (tło --color-bg, ramka przerywana, padding 5 / 10, --font-display
   12/16, --tracking-label, wersaliki, --color-text-muted) daje wspólny
   komponent .tp-znacznik w wariancie --kadr (sekcja 10.5, od F4a); tu
   zostaje wyłącznie położenie. Plakietka stoi przy górnym rogu, nie przy
   dolnym jak w kadrach treści, bo dół pasa zajmuje linia praw. */
#tp-prezenty .tp-stopka__znacznik {
    --tp-stopka-znacznik-x: 16px;
    --tp-stopka-znacznik-y: 16px;
    position: absolute;
    top: var(--tp-stopka-znacznik-y);
    left: var(--tp-stopka-znacznik-x);
}

/* Linia praw. Paper 425-0: kolumna 335 px, 20 px od lewej, 8 px od dołu,
   odstęp 4 px; tekst 426-0: --font-sans 14/21, --color-on-accent.
   Odnośniki 427-0: zawijany rząd, odstęp kolumn 24 px, każdy odnośnik
   w pasie 44 px (428-0, cel dotykowy). */
#tp-prezenty .tp-stopka__linia {
    --tp-stopka-linia-dol: 8px;
    --tp-stopka-linia-odstep: 4px;
    position: absolute;
    right: var(--tp-uklad-margines);
    bottom: var(--tp-stopka-linia-dol);
    left: var(--tp-uklad-margines);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--tp-stopka-linia-odstep);
}

#tp-prezenty :is(.tp-stopka__prawa, .tp-stopka__odnosnik) {
    font-family: var(--tp-font-sans);
    font-size: var(--tp-text-small);
    line-height: var(--tp-leading-small);
    color: var(--tp-color-on-accent);
}

#tp-prezenty .tp-stopka__odnosniki {
    --tp-stopka-odnosniki-odstep: 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--tp-stopka-odnosniki-odstep);
}

#tp-prezenty .tp-stopka__odnosnik {
    --tp-stopka-odnosnik-cel: var(--tp-cel-dotyku);
    display: block;
    line-height: var(--tp-stopka-odnosnik-cel);
    text-decoration: none;
}

#tp-prezenty .tp-stopka__odnosnik:hover {
    text-decoration: underline;
}

#tp-prezenty .tp-stopka__odnosnik:focus-visible {
    outline-color: var(--tp-color-on-accent);
}

/* 9.2 Pas logotypów. Paper 42B-0: padding 16 / 20; ramka 42C-0: 335 px,
   obramowanie 1 px --color-line, padding 16, zawijanie, odstęp 13 px;
   slot 42D-0: 144 na 112 px, tło --color-surface-cold, obramowanie 1 px
   przerywane --color-line, padding 8; nazwa 42E-0: --font-display 12/16,
   700, --tracking-label, wersaliki, wyśrodkowana, --color-text-muted. */
#tp-prezenty .tp-stopka__znaki {
    display: flex;
    justify-content: center;
    padding: var(--tp-space-4) var(--tp-uklad-margines);
}

#tp-prezenty .tp-stopka__ramka {
    --tp-stopka-ramka-szer: 335px;
    --tp-stopka-slot-odstep: 13px;
    display: flex;
    flex-wrap: wrap;
    gap: var(--tp-stopka-slot-odstep);
    width: 100%;
    max-width: var(--tp-stopka-ramka-szer);
    padding: var(--tp-space-4);
    border: 1px solid var(--tp-color-line);
}

#tp-prezenty .tp-stopka__slot {
    --tp-stopka-slot-szer: 144px;
    --tp-stopka-slot-wys: 112px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--tp-stopka-slot-szer);
    height: var(--tp-stopka-slot-wys);
    padding: var(--tp-space-2);
    border: 1px dashed var(--tp-color-line);
    background-color: var(--tp-color-surface-cold);
    font-family: var(--tp-font-display);
    font-size: var(--tp-text-label);
    font-weight: var(--tp-font-weight-bold);
    line-height: var(--tp-interlinia-etykiety);
    letter-spacing: var(--tp-tracking-label);
    text-transform: uppercase;
    text-align: center;
    color: var(--tp-color-text-muted);
}

/* 9.3 Układ desktopowy od 1024 px (PRÓG STOPKI, nagłówek sekcji 9).
   Paper 365-0: pas 1440 na 441 px (366-0), przyciemnienie 170 px (367-0),
   znacznik 48 px od lewej i 24 px od góry (368-0), linia praw 48 px od
   lewej i 24 px od dołu, rozstawiona space-between na 1344 px (36A-0),
   odnośniki w rzędzie z odstępem 31 px i interlinią 21 px (36C-0).
   Pas logotypów 36H-0: padding pionowy 6 px; ramka 36I-0: 960 na 145 px,
   sloty space-evenly, bez paddingu; sloty 36J-0, 36L-0, 36N-0, 36P-0:
   wysokość 80 px, szerokości 190, 146, 96 i 262 px. */
@media (min-width: 1024px) {
    #tp-prezenty .tp-stopka__pas {
        --tp-stopka-pas-wys: 441px;
    }

    #tp-prezenty .tp-stopka__przyciemnienie {
        --tp-stopka-przyciemnienie-wys: 170px;
    }

    #tp-prezenty .tp-stopka__znacznik {
        --tp-stopka-znacznik-x: 48px;
        --tp-stopka-znacznik-y: 24px;
    }

    #tp-prezenty .tp-stopka__linia {
        --tp-stopka-linia-margines: 48px;
        --tp-stopka-linia-dol: 24px;
        right: var(--tp-stopka-linia-margines);
        left: var(--tp-stopka-linia-margines);
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--tp-space-5);
    }

    #tp-prezenty .tp-stopka__prawa {
        white-space: nowrap;
    }

    #tp-prezenty .tp-stopka__odnosniki {
        --tp-stopka-odnosniki-odstep: 31px;
        flex-wrap: nowrap;
        flex-shrink: 0;
    }

    #tp-prezenty .tp-stopka__odnosnik {
        line-height: var(--tp-leading-small);
        white-space: nowrap;
    }

    #tp-prezenty .tp-stopka__znaki {
        --tp-stopka-znaki-pion: 6px;
        padding: var(--tp-stopka-znaki-pion) 0;
    }

    #tp-prezenty .tp-stopka__ramka {
        --tp-stopka-ramka-szer: 960px;
        --tp-stopka-ramka-wys: 145px;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-evenly;
        gap: 0;
        height: var(--tp-stopka-ramka-wys);
        padding: 0;
    }

    #tp-prezenty .tp-stopka__slot {
        --tp-stopka-slot-wys: 80px;
    }

    #tp-prezenty .tp-stopka__slot--1 {
        --tp-stopka-slot-szer: 190px;
    }

    #tp-prezenty .tp-stopka__slot--2 {
        --tp-stopka-slot-szer: 146px;
    }

    #tp-prezenty .tp-stopka__slot--3 {
        --tp-stopka-slot-szer: 96px;
    }

    #tp-prezenty .tp-stopka__slot--4 {
        --tp-stopka-slot-szer: 262px;
    }
}


/* =====================================================================
   10. KOMPONENTY TREŚCI LANDINGU (faza F4a)
   Każdy powtarzalny element ma jeden kontrakt klas; sekcje H01 do H05
   (sekcje 11 do 15 arkusza) tylko składają komponenty i ustawiają ich
   zmienne. Wartości z get_jsx i get_computed_styles węzłów Paper
   (plik 01M2CY6H8MHNTP6M6QN6AXQ3ZV, skrót tokenów d33c399a), numer węzła
   przy każdej wartości spoza tokenów.
   Kolejność: najpierw układ mobilny (artboard 3MR-0), potem progi.
   PRÓG RYTMU TREŚCI 640 px (token --tp-breakpoint-tresc): od 640 px skala
   typograficzna i odstępy pionowe z artboardu desktop 2ME-1. To NIE jest
   próg układów kolumnowych: te mają własne, zmierzone liczby w sekcjach
   11 do 15, i NIE jest próg nawigacji (1279 px).
   ===================================================================== */

/* 10.1 Rytm sekcji i stos bloków.
   Paper mobile 3OV-0, 3PS-0, 3S3-0, 3UX-0: padding pionowy 48 px; odstęp
   bloków 32 px (H02: 24 px). Desktop 2PS-1, 2QJ-1, 2SP-1, 2V4-1: padding
   64 / 60 px, odstęp bloków 34 px. */
#tp-prezenty .tp-sekcja--rytm {
    --tp-rytm-gora: var(--tp-space-7);
    --tp-rytm-dol: var(--tp-space-7);
    padding-top: var(--tp-rytm-gora);
    padding-bottom: var(--tp-rytm-dol);
}

/* Odstęp stosu (od F4b): para zmiennych, mobilna i desktopowa; warianty ustawiają jedną
   z nich, próg rytmu wybiera parę. Mobile 32 px (3UX-0, 40J-0, 3VZ-0), wariant --ciasny
   24 px (3OV-0, 3XN-0, 3YO-0). Desktop 34 px (2PS-1, 2XU-1, 30B-1), wariant --desktop-32
   (2W0-1, gap 32) i --desktop-30 (2YS-1, gap 30). */
#tp-prezenty .tp-stos {
    --tp-stos-mobile: var(--tp-space-6);
    --tp-stos-desktop: 34px;
    --tp-stos-odstep: var(--tp-stos-mobile);
    display: flex;
    flex-direction: column;
    row-gap: var(--tp-stos-odstep);
}

#tp-prezenty .tp-stos--ciasny {
    --tp-stos-mobile: var(--tp-space-5);
}

#tp-prezenty .tp-stos--desktop-32 {
    --tp-stos-desktop: var(--tp-space-6);
}

#tp-prezenty .tp-stos--desktop-30 {
    --tp-stos-desktop: 30px;
}

/* PRÓG RYTMU TREŚCI 640 px (--tp-breakpoint-tresc). */
@media (min-width: 640px) {
    #tp-prezenty .tp-sekcja--rytm {
        --tp-rytm-gora: var(--tp-space-8);
        --tp-rytm-dol: 60px;
    }

    #tp-prezenty .tp-stos {
        --tp-stos-odstep: var(--tp-stos-desktop);
    }
}

/* 10.2 Typografia treści.
   H1: Paper 2NN-1 (54/60) i 3N4-0 (30/34), --font-display 700, --tracking-h1,
   wersaliki, --color-accent. H2: 2QH-1 (36/44) i 3OY-0 (24/28), --tracking-h2.
   H3 (tytuł formularza, nazwa wariantu, miejsce na mapie): 2O7-1, 2UG-1,
   2S6-1 (20/26) i 3NN-0, 3SI-0, 3QK-0 (17/22), --tracking-h3.
   Lead: 2NQ-1 (20/31) i 3N5-0 (17/27); Paper podpina tu tokeny --text-h3
   i --text-h3-mobile, wartości równe tokenom --text-lead i --text-lead-mobile,
   więc w kodzie tokeny o właściwej roli.
   Tekst: 16/27 --color-text (2QF-1). Tekst mały: 14/21 --color-text-muted
   (2PQ-1). */
#tp-prezenty :is(.tp-h1, .tp-h2, .tp-h3) {
    font-family: var(--tp-font-display);
    font-weight: var(--tp-font-weight-bold);
    text-transform: uppercase;
    color: var(--tp-color-accent);
}

#tp-prezenty .tp-h1 {
    font-size: var(--tp-text-h1-mobile);
    line-height: var(--tp-leading-h1-mobile);
    letter-spacing: var(--tp-tracking-h1);
}

#tp-prezenty .tp-h2 {
    font-size: var(--tp-text-h2-mobile);
    line-height: var(--tp-leading-h2-mobile);
    letter-spacing: var(--tp-tracking-h2);
}

#tp-prezenty .tp-h3 {
    font-size: var(--tp-text-h3-mobile);
    line-height: var(--tp-leading-h3-mobile);
    letter-spacing: var(--tp-tracking-h3);
}

#tp-prezenty .tp-lead {
    font-family: var(--tp-font-sans);
    font-size: var(--tp-text-lead-mobile);
    line-height: var(--tp-leading-body);
    color: var(--tp-color-text);
}

#tp-prezenty .tp-tekst {
    font-family: var(--tp-font-sans);
    font-size: var(--tp-text-body);
    line-height: var(--tp-leading-body);
    color: var(--tp-color-text);
}

#tp-prezenty .tp-tekst-maly {
    font-family: var(--tp-font-sans);
    font-size: var(--tp-text-small);
    line-height: var(--tp-leading-small);
    color: var(--tp-color-text-muted);
}

/* PRÓG RYTMU TREŚCI 640 px. */
@media (min-width: 640px) {
    #tp-prezenty .tp-h1 {
        font-size: var(--tp-text-h1);
        line-height: var(--tp-leading-h1);
    }

    #tp-prezenty .tp-h2 {
        font-size: var(--tp-text-h2);
        line-height: var(--tp-leading-h2);
    }

    #tp-prezenty .tp-h3 {
        font-size: var(--tp-text-h3);
        line-height: var(--tp-leading-h3);
    }

    #tp-prezenty .tp-lead {
        font-size: var(--tp-text-lead);
        line-height: var(--tp-leading-lead);
    }
}

/* 10.3 Nadtytuł: numer, kreska, etykieta.
   Paper 2NJ-1 (desktop) i 3N1-0 (mobile): rząd wyśrodkowany, odstęp 12 px;
   numer i etykieta --font-display 12/16, 700, --tracking-label, wersaliki,
   --color-cta; kreska 2NL-1: 28 na 1 px, --color-cta. Numer i kreska się nie
   kurczą, etykieta zawija się na wąskim ekranie.
   Wariant --luzny: H04 desktop, odstęp 18 px (2UW-1, decyzja D32.2: jak
   w Paper); włącza go próg układu H04 (sekcja 14). */
#tp-prezenty .tp-nadtytul {
    --tp-nadtytul-odstep: var(--tp-space-3);
    --tp-nadtytul-kreska: 28px;
    display: flex;
    align-items: center;
    column-gap: var(--tp-nadtytul-odstep);
    font-family: var(--tp-font-display);
    font-size: var(--tp-text-label);
    font-weight: var(--tp-font-weight-bold);
    line-height: var(--tp-interlinia-etykiety);
    letter-spacing: var(--tp-tracking-label);
    text-transform: uppercase;
    color: var(--tp-color-cta);
}

#tp-prezenty .tp-nadtytul__numer {
    flex-shrink: 0;
}

#tp-prezenty .tp-nadtytul__kreska {
    display: block;
    flex-shrink: 0;
    width: var(--tp-nadtytul-kreska);
    height: 1px;
    background-color: var(--tp-color-cta);
}

/* Wariant --rozciagly (od F4b): rząd nadtytułu H10 (Paper 32R-1 desktop, 40L-0 mobile):
   etykieta, kreska wypełniająca wolne miejsce i wskaźnik kroku (komponent .tp-kroki, 10.9).
   Etykieta i kreska dzielą wolne miejsce po równo (desktop 261 i 261 px), etykieta nie
   węższa niż jej tekst (mobile 99 px, kreska 70 px). Odstęp 12 px (40L-0), w układzie
   desktopowym nagłówka 18 px (32R-1, sekcja 20). */
#tp-prezenty .tp-nadtytul--rozciagly .tp-nadtytul__tekst {
    flex: 1 1 0%;
    min-width: max-content;
}

#tp-prezenty .tp-nadtytul--rozciagly .tp-nadtytul__kreska {
    flex: 1 1 0%;
    width: auto;
}

/* 10.4 Nagłówek sekcji: nadtytuł i H2 | wstęp (idiom H02).
   Mobile 3OW-0, 3PT-0, 3UY-0: kolumna, odstęp 16 px.
   Desktop 2QE-1, 2RJ-1, 3M2-0: rząd wyrównany do dołu, kolumny 700 i 420,
   odstęp 80 px; nadtytuł od H2 20 px.
   Wariant --flaga (H03): na mobile flaga stoi w rzędzie nadtytułu, po
   prawej (3PU-0); na desktopie nad wstępem, wyrównana do prawej (3MP-0,
   odstęp 20 px). Jedna struktura HTML: na mobile kolumny nagłówka mają
   display: contents, a siatka rozstawia nadtytuł, flagę, H2 i wstęp.
   PRÓG UKŁADU NAGŁÓWKA: 970 px, pomiar i metoda przy regule @media. */
#tp-prezenty :is(.tp-naglowek, .tp-naglowek__tytul, .tp-naglowek__wstep) {
    display: flex;
    flex-direction: column;
    row-gap: var(--tp-space-4);
}

#tp-prezenty .tp-naglowek--flaga {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
    "nadtytul flaga"
    "tytul tytul"
    "wstep wstep";
    align-items: end;
    row-gap: var(--tp-space-4);
}

#tp-prezenty .tp-naglowek--flaga :is(.tp-naglowek__tytul, .tp-naglowek__wstep) {
    display: contents;
}

#tp-prezenty .tp-naglowek--flaga .tp-nadtytul {
    grid-area: nadtytul;
}

#tp-prezenty .tp-naglowek--flaga .tp-h2 {
    grid-area: tytul;
}

#tp-prezenty .tp-naglowek--flaga .tp-flaga {
    grid-area: flaga;
}

#tp-prezenty .tp-naglowek--flaga .tp-naglowek__akapit {
    grid-area: wstep;
}

/* Flaga Polski. Paper 3PW-0: 64 na 40 px, obramowanie 1 px --color-line,
   dwa pola po 19 px (biel i --color-cta); desktop 2RT-1: 96 na 60 px, pola
   po 29 px. Pola dzielą wnętrze po równo. */
#tp-prezenty .tp-flaga {
    --tp-flaga-szer: 64px;
    --tp-flaga-wys: 40px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: var(--tp-flaga-szer);
    height: var(--tp-flaga-wys);
    border: 1px solid var(--tp-color-line);
}

#tp-prezenty .tp-flaga__pole {
    display: block;
    flex: 1 1 0;
    background-color: var(--tp-color-bg);
}

#tp-prezenty .tp-flaga__pole--czerwone {
    background-color: var(--tp-color-cta);
}

/* PRÓG UKŁADU NAGŁÓWKA SEKCJI: 970 px (H02, H03, H05). Mieści się od 920 px
   (narzedzia/pomiar-progow.mjs: przemiecenie 1440 do 640 px (pochodzenie i inspiracje od 400 px) co 10 px, potem co 1 px, z progiem podmienionym w CSSOM; kryteria: bez pękniętych słów i przepełnień, H2 najwyżej o 1 wiersz, wstęp najwyżej o 2 wiersze ponad stan przy 1440 px;
   pomiar 15.09.2026, --komponenty naglowek). Zapas 50 px. */
@media (min-width: 970px) {
    #tp-prezenty :is(.tp-naglowek, .tp-naglowek--flaga) {
        display: grid;
        grid-template-columns: minmax(0, 700fr) minmax(0, 420fr);
        grid-template-areas: none;
        align-items: end;
        column-gap: 80px;
        row-gap: 0;
    }

    #tp-prezenty .tp-naglowek--flaga :is(.tp-naglowek__tytul, .tp-naglowek__wstep) {
        display: flex;
    }

    #tp-prezenty .tp-naglowek--flaga :is(.tp-nadtytul, .tp-h2, .tp-flaga, .tp-naglowek__akapit) {
        grid-area: auto;
    }

    #tp-prezenty :is(.tp-naglowek__tytul, .tp-naglowek__wstep) {
        row-gap: 20px;
    }

    #tp-prezenty .tp-naglowek__wstep {
        align-items: flex-end;
    }

    #tp-prezenty .tp-naglowek__akapit {
        align-self: stretch;
    }

    #tp-prezenty .tp-flaga {
        --tp-flaga-szer: 96px;
        --tp-flaga-wys: 60px;
    }
}

/* 10.5 Znaczniki: luka w treści (.tp-luka) i materiał zastępczy
   (.tp-znacznik z klasą tp-zastepcze). Jeden wygląd: ramka 1 px przerywana
   --color-line, --font-display 700, wersaliki, --color-text-muted.
   Domyślnie (znacznik mapy 2S8-1, grupa zdjęć H05 2VW-1): 12/16,
   --tracking-label, padding 4 / 10 px, tło --color-surface-cold.
   Warianty ustawiają zmienne:
     --jasny       tło --color-bg (znacznik zgody 2PJ-1, pas formularza),
     --kadr        tło --color-bg, padding 5 / 10 (na zdjęciu: 2O1-1, 3LP-0,
                   stopka 423-0, logo przykładowe 3MB-0),
     --rozstaw-h3  --tracking-h3 (znacznik mapy 2S9-1),
     --cena        14/18, --tracking-h3, padding 4 / 9 (cena 2TJ-1),
     --ciasny      padding 2 / 7 (warunek „przy … zestawach” 2TO-1),
     --cta         kolor --color-cta (plakietka sekcji poglądowej 2WS-1, 3W1-0; od F4b),
     --podpis      tło --color-bg, 13/16, --tracking-h3, padding 3 / 8 (podpis cytatu
                   2WK-1, 3WC-0; od F4b). */
#tp-prezenty :is(.tp-znacznik, .tp-luka) {
    --tp-znacznik-tlo: var(--tp-color-surface-cold);
    --tp-znacznik-pion: var(--tp-space-1);
    --tp-znacznik-poziom: 10px;
    --tp-znacznik-rozmiar: var(--tp-text-label);
    --tp-znacznik-interlinia: var(--tp-interlinia-etykiety);
    --tp-znacznik-rozstaw: var(--tp-tracking-label);
    --tp-znacznik-kolor: var(--tp-color-text-muted);
    display: inline-flex;
    align-items: center;
    width: max-content;
    max-width: 100%;
    padding: var(--tp-znacznik-pion) var(--tp-znacznik-poziom);
    border: 1px dashed var(--tp-color-line);
    background-color: var(--tp-znacznik-tlo);
    font-family: var(--tp-font-display);
    font-size: var(--tp-znacznik-rozmiar);
    font-weight: var(--tp-font-weight-bold);
    line-height: var(--tp-znacznik-interlinia);
    letter-spacing: var(--tp-znacznik-rozstaw);
    text-transform: uppercase;
    color: var(--tp-znacznik-kolor);
}

#tp-prezenty .tp-znacznik--jasny {
    --tp-znacznik-tlo: var(--tp-color-bg);
}

#tp-prezenty .tp-znacznik--kadr {
    --tp-znacznik-tlo: var(--tp-color-bg);
    --tp-znacznik-pion: 5px;
}

#tp-prezenty .tp-znacznik--rozstaw-h3 {
    --tp-znacznik-rozstaw: var(--tp-tracking-h3);
}

#tp-prezenty .tp-znacznik--cena {
    --tp-znacznik-rozmiar: var(--tp-text-small);
    --tp-znacznik-interlinia: 18px;
    --tp-znacznik-rozstaw: var(--tp-tracking-h3);
    --tp-znacznik-poziom: 9px;
}

#tp-prezenty .tp-znacznik--ciasny {
    --tp-znacznik-pion: 2px;
    --tp-znacznik-poziom: 7px;
}

#tp-prezenty .tp-znacznik--cta {
    --tp-znacznik-kolor: var(--tp-color-cta);
}

#tp-prezenty .tp-znacznik--podpis {
    --tp-znacznik-tlo: var(--tp-color-bg);
    --tp-znacznik-pion: 3px;
    --tp-znacznik-poziom: 8px;
    --tp-znacznik-rozmiar: 13px;
    --tp-znacznik-rozstaw: var(--tp-tracking-h3);
}

/* 10.6 Kadr zdjęcia z nakładką.
   Zdjęcie jako <img> w <picture> (plik WebP obok JPG; CMS nie negocjuje
   formatu), object-fit: cover wypełnia kadr jak background-size: cover
   w Paper. Punkt kadru --tp-kadr-punkt z background-position węzła.
   Nakładka (znacznik zastępczy, miejsce na logo) przy lewym dolnym rogu:
   16 px na mobile (3ND-0, 3Q4-0), 24 px od progu rytmu (2O1-1, 3LP-0). */
#tp-prezenty .tp-kadr {
    --tp-kadr-punkt: 50% 50%;
    --tp-kadr-margines: var(--tp-space-4);
    --tp-kadr-przyciemnienie: 0px;
    position: relative;
    overflow: hidden;
}

#tp-prezenty .tp-kadr__obraz {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: var(--tp-kadr-punkt);
}

/* max-width: nakładka nie wychodzi poza kadr (overflow: hidden by ją uciął); w wąskiej
   kolumnie znacznik zawija się do dwóch wierszy. Wykryte w F4a: plakietka „Logo przykładowe
   do czasu zgody” (275 px) w kolumnie inspiracji węższej niż 299 px. */
#tp-prezenty .tp-kadr__nakladka {
    position: absolute;
    bottom: var(--tp-kadr-margines);
    left: var(--tp-kadr-margines);
    max-width: calc(100% - 2 * var(--tp-kadr-margines));
}

/* Wariant --gora (od F4b): nakładka przy lewym GÓRNYM rogu, bo dół kadru zajmuje wezwanie
   (znacznik zdjęcia H07: Paper 2XR-1 24 px od lewej i od góry, 3XK-0 16 px). */
#tp-prezenty .tp-kadr__nakladka--gora {
    top: var(--tp-kadr-margines);
    bottom: auto;
}

/* Przyciemnienie przy dolnej krawędzi kadru (od F4b, H07: Paper 2XM-1 i 3XH-0): gradient
   z tych samych tokenów co w stopce (9.1), wysokość zmienną --tp-kadr-przyciemnienie
   ustawia sekcja (domyślnie 0, czyli brak przyciemnienia). */
#tp-prezenty .tp-kadr__przyciemnienie {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: var(--tp-kadr-przyciemnienie);
    background-image: linear-gradient(180deg, var(--tp-kolor-przyciemnienie-od) 0%, var(--tp-kolor-przyciemnienie-do) 100%);
}

/* PRÓG RYTMU TREŚCI 640 px. */
@media (min-width: 640px) {
    #tp-prezenty .tp-kadr {
        --tp-kadr-margines: var(--tp-space-5);
    }
}

/* 10.7 Przycisk wezwania.
   Paper 2PN-1 i 3OH-0 (wysyłka formularza), 2V1-1 i 3UU-0 (wezwanie 2):
   tło --color-cta, etykieta --font-display 15/18 (--text-nav), 700,
   --tracking-nav, wersaliki, --color-on-cta, wyśrodkowana. Wysokość co
   najmniej 56 px, padding pionowy 16 px, więc etykieta w dwóch wierszach
   rośnie (D31.1, D32.1: 3UU-0 ma 68 px). Padding poziomy 20 px na mobile
   (3UU-0), 32 px od progu rytmu (2V1-1). Najechanie: --color-cta-hover
   (bez cienia i uniesienia). */
#tp-prezenty .tp-przycisk {
    --tp-przycisk-wys: 56px;
    --tp-przycisk-poziom: 20px;
    --tp-przycisk-interlinia: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tp-przycisk-wys);
    padding: var(--tp-space-4) var(--tp-przycisk-poziom);
    border: 0;
    background-color: var(--tp-color-cta);
    color: var(--tp-color-on-cta);
    font-family: var(--tp-font-display);
    font-size: var(--tp-text-nav);
    font-weight: var(--tp-font-weight-bold);
    line-height: var(--tp-przycisk-interlinia);
    letter-spacing: var(--tp-tracking-nav);
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
}

#tp-prezenty .tp-przycisk:hover {
    background-color: var(--tp-color-cta-hover);
    color: var(--tp-color-on-cta);
    text-decoration: none;
}

/* PRÓG RYTMU TREŚCI 640 px. */
@media (min-width: 640px) {
    #tp-prezenty .tp-przycisk {
        --tp-przycisk-poziom: var(--tp-space-6);
    }
}

/* 10.8 Lista argumentów: numer, tytuł, opis (H02 korzyści, H03 argumenty).
   Mobile 3P0-0 i 3QO-0: lista w pionie, kreska górna 1 px --color-accent,
   padding górny 24, odstęp 24; pozycja 3P1-0: rząd, odstęp 12, slot numeru
   56 px, treść z paddingiem górnym 10 i odstępem 8.
   Desktop 2PT-1 (pięć kolumn 224, odstęp 20) i 2R3-1 (trzy kolumny 380,
   odstęp 30): padding górny 26; pozycja w kolumnie, odstęp 12.
   Numer 2QD-1: --font-display 38/42 (--text-liczba), odstęp liter 0.05em
   (literał w Paper), 700, --color-line; dekoracyjny, porządek niesie <ol>.
   Tytuł 2QC-1: --font-display 17/23 (literały w Paper), --tracking-h3,
   700, wersaliki, --color-accent. Opis 2QB-1: --font-sans 14/22
   (--text-small, --leading-h3-mobile), --color-text. */
#tp-prezenty .tp-argumenty {
    --tp-argumenty-kolumny: 1;
    --tp-argumenty-odstep: var(--tp-space-5);
    display: flex;
    flex-direction: column;
    row-gap: var(--tp-space-5);
    padding-top: var(--tp-space-5);
    border-top: 1px solid var(--tp-color-accent);
}

#tp-prezenty .tp-argumenty--5 {
    --tp-argumenty-kolumny: 5;
    --tp-argumenty-odstep: 20px;
}

#tp-prezenty .tp-argumenty--3 {
    --tp-argumenty-kolumny: 3;
    --tp-argumenty-odstep: 30px;
}

#tp-prezenty .tp-argument {
    --tp-argument-slot: 56px;
    display: flex;
    column-gap: var(--tp-space-3);
}

#tp-prezenty .tp-argument__liczba {
    --tp-argument-liczba-rozmiar: var(--tp-text-liczba);
    --tp-argument-liczba-interlinia: 42px;
    --tp-argument-liczba-rozstaw: 0.05em;
    --tp-argument-liczba-kolor: var(--tp-color-line);
    display: block;
    flex: 0 0 var(--tp-argument-slot);
    font-family: var(--tp-font-display);
    font-size: var(--tp-argument-liczba-rozmiar);
    font-weight: var(--tp-font-weight-bold);
    line-height: var(--tp-argument-liczba-interlinia);
    letter-spacing: var(--tp-argument-liczba-rozstaw);
    color: var(--tp-argument-liczba-kolor);
}

#tp-prezenty .tp-argument__tresc {
    --tp-argument-tresc-gora: 10px;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    row-gap: var(--tp-space-2);
    min-width: 0;
    padding-top: var(--tp-argument-tresc-gora);
}

#tp-prezenty .tp-argument__tytul {
    --tp-argument-tytul-rozmiar: 17px;
    --tp-argument-tytul-interlinia: 23px;
    font-family: var(--tp-font-display);
    font-size: var(--tp-argument-tytul-rozmiar);
    font-weight: var(--tp-font-weight-bold);
    line-height: var(--tp-argument-tytul-interlinia);
    letter-spacing: var(--tp-tracking-h3);
    text-transform: uppercase;
    color: var(--tp-color-accent);
}

#tp-prezenty .tp-argument__opis {
    font-family: var(--tp-font-sans);
    font-size: var(--tp-text-small);
    line-height: var(--tp-leading-h3-mobile);
    color: var(--tp-color-text);
}

/* Układ kolumnowy listy: wspólne deklaracje, włączane progiem wariantu. */
@media (min-width: 960px) {
    /* PRÓG PIĘCIU KOLUMN H02: 960 px. Mieści się od 913 px (narzedzia/pomiar-progow.mjs: przemiecenie 1440 do 640 px (pochodzenie i inspiracje od 400 px) co 10 px, potem co 1 px, z progiem podmienionym w CSSOM; kryteria: bez pękniętych słów i przepełnień, tytuły kolumn
       najwyżej o 1 wiersz ponad stan przy 1440 px; --komponenty argumenty-5). Zapas 47 px. */
    #tp-prezenty .tp-argumenty--5 {
        display: grid;
        grid-template-columns: repeat(var(--tp-argumenty-kolumny), minmax(0, 1fr));
        column-gap: var(--tp-argumenty-odstep);
        row-gap: 0;
        padding-top: 26px;
    }

    #tp-prezenty .tp-argumenty--5 .tp-argument {
        flex-direction: column;
        row-gap: var(--tp-space-3);
    }

    #tp-prezenty .tp-argumenty--5 .tp-argument__liczba {
        flex: none;
    }

    #tp-prezenty .tp-argumenty--5 .tp-argument__tresc {
        row-gap: var(--tp-space-3);
        padding-top: 0;
    }
}

@media (min-width: 740px) {
    /* PRÓG TRZECH KOLUMN H03: 740 px. Mieści się od 687 px (narzedzia/pomiar-progow.mjs: przemiecenie 1440 do 640 px (pochodzenie i inspiracje od 400 px) co 10 px, potem co 1 px, z progiem podmienionym w CSSOM; kryteria: bez pękniętych słów i przepełnień, tytuły
       najwyżej o 1 wiersz ponad stan przy 1440 px; --komponenty argumenty-3). Zapas 53 px.
       Ta sama liczba: pas pochodzenia (13.2) i inspiracje (15), żeby H03 i H05 zmieniały
       układ jednym krokiem; każdy z tych komponentów mieści się poniżej 740 px. */
    #tp-prezenty .tp-argumenty--3 {
        display: grid;
        grid-template-columns: repeat(var(--tp-argumenty-kolumny), minmax(0, 1fr));
        column-gap: var(--tp-argumenty-odstep);
        row-gap: 0;
        padding-top: 26px;
    }

    #tp-prezenty .tp-argumenty--3 .tp-argument {
        flex-direction: column;
        row-gap: var(--tp-space-3);
    }

    #tp-prezenty .tp-argumenty--3 .tp-argument__liczba {
        flex: none;
    }

    #tp-prezenty .tp-argumenty--3 .tp-argument__tresc {
        row-gap: var(--tp-space-3);
        padding-top: 0;
    }
}

/* 10.9 Formularz: nagłówek z krokiem, pola, zgoda, wysyłka.
   Mobile 3NG-0: nagłówek (wskaźnik kroku nad tytułem, odstęp 8), pola
   w kolumnie z odstępem 12, zgoda nad przyciskiem (odstęp 16), bloki co 16.
   Desktop 2O5-1: bloki co 18; nagłówek w rzędzie (tytuł | krok, wyrównanie
   do dołu, odstęp 60); siatka pól 350 | 350 | 458 z odstępem 21: rząd 1
   e-mail, telefon, butelki; rząd 2 treść (kolumny 1 i 2, 721 na 84) i źródło;
   rząd 3 zgoda (kolumny 1 i 2) i przycisk (kolumna 3), wyrównanie do dołu.
   PRÓG SIATKI FORMULARZA: 1150 px, pomiar przy regule @media. */
#tp-prezenty .tp-formularz {
    display: flex;
    flex-direction: column;
    row-gap: var(--tp-space-4);
}

#tp-prezenty .tp-formularz__naglowek {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    row-gap: var(--tp-space-2);
}

#tp-prezenty .tp-formularz__pola {
    display: flex;
    flex-direction: column;
    row-gap: var(--tp-space-3);
}

#tp-prezenty .tp-formularz__wysylka {
    display: flex;
    flex-direction: column;
    row-gap: var(--tp-space-4);
}

#tp-prezenty .tp-formularz__wyslij {
    width: 100%;
}

/* Wskaźnik kroku. Paper 2O8-1: rząd, odstęp 12; paski 2O9-1: dwa po 28 na
   3 px, odstęp 3, pierwszy --color-cta, drugi --color-line; etykieta 2OC-1:
   --font-display 12/16, 700, --tracking-label, wersaliki, --color-text-muted. */
#tp-prezenty .tp-kroki {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    column-gap: var(--tp-space-3);
}

#tp-prezenty .tp-kroki__paski {
    display: flex;
    column-gap: 3px;
}

#tp-prezenty .tp-kroki__pasek {
    display: block;
    width: 28px;
    height: 3px;
    background-color: var(--tp-color-line);
}

#tp-prezenty .tp-kroki__pasek--aktywny {
    background-color: var(--tp-color-cta);
}

#tp-prezenty .tp-kroki__etykieta {
    font-family: var(--tp-font-display);
    font-size: var(--tp-text-label);
    font-weight: var(--tp-font-weight-bold);
    line-height: var(--tp-interlinia-etykiety);
    letter-spacing: var(--tp-tracking-label);
    text-transform: uppercase;
    color: var(--tp-color-text-muted);
}

/* Pole z etykietą w polu (O29.3).
   Paper 2OT-1 i 3NP-0: 56 px wysokości, padding poziomy 18, obramowanie 1 px
   --color-line, tło --color-bg; tekst w polu --font-sans 16/27
   --color-text-dim, gwiazdka --color-cta z odstępem 4.
   Budowa: kontrolka (input, select, textarea) i <label> w jednej komórce
   siatki; komórka ma wysokość wyższego z nich, więc dwuwierszowa etykieta
   (3NV-0, 84 px) powiększa pole, a kontrolka rozciąga się na całą komórkę.
   Etykieta nie przechwytuje kliknięć i znika po wpisaniu wartości
   (:not(:placeholder-shown), placeholder=" ") albo po wyborze opcji
   (select:valid przy required i pustej pierwszej opcji). Znika przez
   opacity: zostaje w drzewie dostępności i nie zmienia wysokości pola.
   Natywny select: na iOS nic się nie obcina, bo pole pokazuje tylko krótką
   wybraną opcję, a pytanie niesie etykieta. */
#tp-prezenty .tp-pole {
    --tp-pole-wys: 56px;
    --tp-pole-poziom: 18px;
    /* 14,5 px: etykieta w jednym wierszu ma 14,5 + 27 + 14,5 = 56 px (Paper 2OT-1: tekst
       wyśrodkowany w 56), w dwóch wierszach 83 px (Paper 3NV-0: 84, ramka 1 + padding 14;
       tej pary nie da się odtworzyć jednym paddingiem, różnica 1 px w polu dwuwierszowym). */
    --tp-pole-pion: 14.5px;
    --tp-pole-prawy: calc(var(--tp-pole-poziom) + 1px);
    position: relative;
    display: grid;
}

#tp-prezenty .tp-pole > * {
    grid-area: 1 / 1;
}

#tp-prezenty .tp-pole__kontrolka {
    align-self: stretch;
    width: 100%;
    min-height: var(--tp-pole-wys);
    padding: 0 var(--tp-pole-prawy) 0 var(--tp-pole-poziom);
    border: 1px solid var(--tp-color-line);
    border-radius: var(--tp-radius-none);
    background-color: var(--tp-color-bg);
    color: var(--tp-color-text);
    font-family: var(--tp-font-sans);
    font-size: var(--tp-text-body);
    line-height: var(--tp-leading-body);
    appearance: none;
}

#tp-prezenty .tp-pole__kontrolka::placeholder {
    color: transparent;
}

#tp-prezenty .tp-pole__kontrolka:focus-visible {
    outline: 2px solid var(--tp-color-accent);
    outline-offset: -2px;
}

#tp-prezenty .tp-pole__etykieta {
    align-self: center;
    padding: var(--tp-pole-pion) var(--tp-pole-prawy) var(--tp-pole-pion) calc(var(--tp-pole-poziom) + 1px);
    pointer-events: none;
    font-family: var(--tp-font-sans);
    font-size: var(--tp-text-body);
    line-height: var(--tp-leading-body);
    color: var(--tp-color-text-dim);
}

#tp-prezenty .tp-pole__gwiazdka {
    margin-left: var(--tp-space-1);
    color: var(--tp-color-cta);
}

/* :placeholder-shown tylko dla input i textarea: select nie ma placeholdera, więc
   :not(:placeholder-shown) pasowałby do każdej listy i chował etykietę przed wyborem. */
#tp-prezenty :is(input, textarea).tp-pole__kontrolka:not(:placeholder-shown) + .tp-pole__etykieta,
#tp-prezenty select.tp-pole__kontrolka:valid + .tp-pole__etykieta {
    opacity: 0;
}

/* Lista rozwijana: miejsce na strzałkę. Paper 2P1-1: odstęp 12, strzałka
   2P5-1 11 na 7 px, obrys 1.4 --color-accent, 18 px od prawej krawędzi. */
#tp-prezenty .tp-pole--wybor {
    --tp-pole-prawy: calc(var(--tp-pole-poziom) + 1px + 12px + 11px);
}

#tp-prezenty .tp-pole--wybor .tp-pole__kontrolka {
    cursor: pointer;
}

#tp-prezenty .tp-pole__strzalka {
    --tp-pole-strzalka-obrys: 1.4;
    display: block;
    align-self: center;
    justify-self: end;
    width: 11px;
    height: 7px;
    margin-right: calc(var(--tp-pole-poziom) + 1px);
    pointer-events: none;
    fill: none;
    stroke: var(--tp-color-accent);
    stroke-width: var(--tp-pole-strzalka-obrys);
}

/* Pole wieloliniowe. Paper 3O1-0 (mobile): padding 15 / 18, wysokość z treści;
   2PE-1 (desktop): 84 px, padding górny 15, bez dolnego. */
#tp-prezenty .tp-pole--tekst {
    --tp-pole-wys: 84px;
    --tp-pole-pion: 16px;
}

#tp-prezenty .tp-pole--tekst .tp-pole__kontrolka {
    padding: 15px var(--tp-pole-poziom);
    resize: vertical;
}

#tp-prezenty .tp-pole--tekst .tp-pole__etykieta {
    align-self: start;
}

/* Zgoda. Paper 3OB-0 (mobile): znacznik luki na pełną szerokość, pod nim
   zdanie i odnośnik w dwóch wierszach (odstęp 4); 2PI-1 (desktop): znacznik
   o szerokości treści, zdanie i odnośnik w jednym wierszu (odstęp 8, linia
   bazowa). Zdanie --font-sans 14/21 --color-text-muted; odnośnik 700,
   --color-accent, podkreślenie 1 px (2PM-1). */
#tp-prezenty .tp-zgoda {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    row-gap: var(--tp-space-2);
}

#tp-prezenty .tp-zgoda .tp-luka {
    width: auto;
}

#tp-prezenty .tp-zgoda__tekst {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    row-gap: var(--tp-space-1);
    font-family: var(--tp-font-sans);
    font-size: var(--tp-text-small);
    line-height: var(--tp-leading-small);
    color: var(--tp-color-text-muted);
}

#tp-prezenty .tp-zgoda__odnosnik {
    font-weight: var(--tp-font-weight-bold);
    color: var(--tp-color-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-position: from-font;
}

/* PRÓG SIATKI FORMULARZA: 1150 px. Mieści się od 1100 px (narzedzia/pomiar-progow.mjs: przemiecenie 1440 do 640 px (pochodzenie i inspiracje od 400 px) co 10 px, potem co 1 px, z progiem podmienionym w CSSOM; kryteria: bez pękniętych słów i przepełnień, etykiety pól,
   przycisk i wskaźnik kroku w jednym wierszu jak w Paper, tytuł i zgoda najwyżej o 1 wiersz
   więcej; --komponenty formularz). Zapas 50 px. Poniżej: pola w kolumnie jak na mobile. */
@media (min-width: 1150px) {
    #tp-prezenty .tp-formularz {
        row-gap: 18px;
    }

    #tp-prezenty .tp-formularz__naglowek {
        flex-direction: row-reverse;
        align-items: flex-end;
        justify-content: space-between;
        column-gap: 60px;
    }

    #tp-prezenty :is(.tp-formularz__pola, .tp-formularz__wysylka) {
        display: grid;
        grid-template-columns: minmax(0, 350fr) minmax(0, 350fr) minmax(0, 458fr);
        column-gap: 21px;
        row-gap: 18px;
    }

    #tp-prezenty .tp-formularz__pola {
        align-items: start;
    }

    #tp-prezenty .tp-pole--tekst {
        --tp-pole-pion: 0px;
        grid-column: 1 / 3;
    }

    #tp-prezenty .tp-pole--tekst .tp-pole__kontrolka {
        padding-bottom: 0;
    }

    #tp-prezenty .tp-pole--tekst .tp-pole__etykieta {
        padding-top: 16px;
    }

    #tp-prezenty .tp-formularz__wysylka {
        align-items: end;
    }

    #tp-prezenty .tp-zgoda {
        grid-column: 1 / 3;
        align-items: flex-start;
    }

    #tp-prezenty .tp-zgoda .tp-luka {
        width: max-content;
    }

    #tp-prezenty .tp-zgoda__tekst {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: var(--tp-space-2);
    }

    #tp-prezenty .tp-formularz__wyslij {
        grid-column: 3;
    }
}


/* =====================================================================
   11. H01 ZESTAWY PREZENTOWE DLA FIRM (hero)
   Paper: 2NF-1 (desktop 1440 na 1050 px), 3MZ-0 (mobile, wariant B).
   HTML w kolejności mobilnej: tekst, formularz, zdjęcie, pas domykający.
   Od progu układu siatka dwóch kolumn: tekst | zdjęcie w pierwszym rzędzie,
   formularz i pas domykający na pełną szerokość.
   PRÓG UKŁADU 50/50 H01: 980 px. TA SAMA LICZBA stoi w media preloadu
   zdjęcia (dostawa/uklad/modul.html, META WIDOKU) i w atrybucie sizes
   zdjęcia (dostawa/widoki/landing.html). Pomiar przy regule @media.
   ===================================================================== */

/* 11.1 Kolumna tekstu. Mobile 3N0-0: padding 32 / 20, odstęp 16.
   Desktop 2NH-1: padding 44 / 72 / 40, z lewej margines treści strony
   (120 px przy 1440, czyli połowa szerokości minus połowa kolumny 1200,
   nie mniej niż --tp-uklad-margines), odstęp 20. */
#tp-prezenty .tp-hero__tekst {
    display: flex;
    flex-direction: column;
    row-gap: var(--tp-space-4);
    padding: var(--tp-space-6) var(--tp-uklad-margines);
}

/* Szybki kontakt (komponent: H01, a od F4b także H10 w wariancie --akcent).
   Paper 2NU-1 i 3N6-0: kreska górna 1 px --color-line,
   padding górny 12, odstęp 8; etykieta --font-display 12/16, 700,
   --tracking-label, wersaliki, --color-cta; rząd 33K-1 zawijany, odstęp 6,
   linia bazowa, --font-sans 16/27; adres 700 --color-accent. */
#tp-prezenty .tp-kontakt {
    display: flex;
    flex-direction: column;
    row-gap: var(--tp-space-2);
    padding-top: var(--tp-space-3);
    border-top: 1px solid var(--tp-color-line);
}

#tp-prezenty .tp-kontakt__etykieta {
    font-family: var(--tp-font-display);
    font-size: var(--tp-text-label);
    font-weight: var(--tp-font-weight-bold);
    line-height: var(--tp-interlinia-etykiety);
    letter-spacing: var(--tp-tracking-label);
    text-transform: uppercase;
    color: var(--tp-color-cta);
}

#tp-prezenty .tp-kontakt__wiersz {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    font-family: var(--tp-font-sans);
    font-size: var(--tp-text-body);
    line-height: var(--tp-leading-body);
    color: var(--tp-color-text);
}

#tp-prezenty .tp-kontakt__adres {
    font-weight: var(--tp-font-weight-bold);
    color: var(--tp-color-accent);
    text-decoration: none;
}

#tp-prezenty .tp-kontakt__adres:hover {
    text-decoration: underline;
}

/* Wariant --akcent (H10). Paper 40W-0 (mobile) i 31H-1 (desktop): kreska LEWA 2 px
   --color-cta zamiast górnej, odstęp 12, padding lewy 16 px (mobile) i 24 px (desktop,
   od progu rytmu treści), bez paddingu górnego. */
#tp-prezenty .tp-kontakt--akcent {
    --tp-kontakt-akcent-kreska: 2px;
    --tp-kontakt-akcent-lewy: var(--tp-space-4);
    row-gap: var(--tp-space-3);
    padding-top: 0;
    padding-left: var(--tp-kontakt-akcent-lewy);
    border-top: 0;
    border-left: var(--tp-kontakt-akcent-kreska) solid var(--tp-color-cta);
}

/* PRÓG RYTMU TREŚCI 640 px. */
@media (min-width: 640px) {
    #tp-prezenty .tp-kontakt--akcent {
        --tp-kontakt-akcent-lewy: var(--tp-space-5);
    }
}

/* 11.2 Pas formularza. Paper 3NG-0: tło --color-surface-cold, kreska górna
   i dolna 1 px --color-line, padding 24 / 32 (desktop 2O4-1: 32 / 40). */
#tp-prezenty .tp-pas-formularza {
    padding-top: var(--tp-space-5);
    padding-bottom: var(--tp-space-6);
    border-top: 1px solid var(--tp-color-line);
    border-bottom: 1px solid var(--tp-color-line);
    background-color: var(--tp-color-surface-cold);
}

/* 11.3 Zdjęcie. Paper 3NC-0: 375 na 211 px (proporcja zachowana na każdej
   szerokości mobilnej); 2O0-1: kolumna 720 rozciągnięta na wysokość kolumny
   tekstu; background-position 10% w obu, czyli 10% w poziomie i środek
   w pionie. */
#tp-prezenty .tp-hero__kadr {
    --tp-kadr-punkt: 10% 50%;
    aspect-ratio: 375 / 211;
}

/* 11.4 Pas domykający. Paper 3OK-0: padding 32 / 40, odstęp 16, akapity
   leadu jeden pod drugim, mikrocopy 14/21 --color-text-muted.
   Desktop 352-0: padding 48 / 56, odstęp 24; akapity 2NR-1 i 2NS-1 w dwóch
   kolumnach po 528 z odstępem 144; mikrocopy do --container-narrow. */
#tp-prezenty .tp-hero__domkniecie {
    display: flex;
    flex-direction: column;
    row-gap: var(--tp-space-4);
    padding-top: var(--tp-space-6);
    padding-bottom: 40px;
}

#tp-prezenty .tp-hero__akapity {
    display: flex;
    flex-direction: column;
    row-gap: var(--tp-space-4);
}

/* PRÓG RYTMU TREŚCI 640 px: odstępy pionowe pasów H01 z desktopu. */
@media (min-width: 640px) {
    #tp-prezenty .tp-hero__tekst {
        row-gap: 20px;
    }

    #tp-prezenty .tp-pas-formularza {
        padding-top: var(--tp-space-6);
        padding-bottom: 40px;
    }

    #tp-prezenty .tp-hero__domkniecie {
        row-gap: var(--tp-space-5);
        padding-top: var(--tp-space-7);
        padding-bottom: 56px;
    }

    #tp-prezenty .tp-hero__mikrocopy {
        max-width: var(--tp-container-narrow);
    }
}

/* PRÓG UKŁADU 50/50 H01: 980 px (także preload i sizes, nagłówek sekcji 11).
   Mieści się od 935 px (narzedzia/pomiar-progow.mjs: przemiecenie 1440 do 640 px (pochodzenie i inspiracje od 400 px) co 10 px, potem co 1 px, z progiem podmienionym w CSSOM; kryteria: bez pękniętych słów i przepełnień, rząd szybkiego kontaktu w jednym wierszu jak w Paper,
   H1 i leady najwyżej o 1 wiersz więcej niż przy 1440 px; --komponenty hero). Zapas 45 px. */
@media (min-width: 980px) {
    #tp-prezenty .tp-hero {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
      "tekst kadr"
      "formularz formularz"
      "domkniecie domkniecie";
    }

    #tp-prezenty .tp-hero__tekst {
        grid-area: tekst;
        padding: 44px 72px 40px max(var(--tp-uklad-margines), calc(100% - var(--tp-container-content) / 2));
    }

    #tp-prezenty .tp-hero__kadr {
        grid-area: kadr;
        aspect-ratio: auto;
    }

    #tp-prezenty .tp-hero__formularz {
        grid-area: formularz;
    }

    #tp-prezenty .tp-hero__domkniecie {
        grid-area: domkniecie;
    }

    #tp-prezenty .tp-hero__akapity {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 144px;
    }
}


/* =====================================================================
   12. H02 KORZYŚCI
   Paper: 2PS-1 (desktop, ton --color-surface, nagłówek 700 | 420 i pięć
   kolumn), 3OV-0 (mobile). Sekcja składa wyłącznie komponenty: nagłówek
   sekcji (10.4) i listę argumentów w wariancie pięciu kolumn (10.8).
   Stos bloków w wariancie --ciasny (24 px na mobile, 10.1).
   ===================================================================== */


/* =====================================================================
   13. H03 DLACZEGO WARTO
   Paper: 2QJ-1 (desktop), 3PS-0 (mobile). Nagłówek z flagą (10.4), pas
   zdjęć, pas pochodzenia z mapą, argumenty (10.8), pole na znaki konkursów.
   ===================================================================== */

/* 13.1 Pas dwóch zdjęć do krawędzi. Paper 3Q2-0: dwa kadry 375 na 180
   w pionie, odstęp 4; 2RG-1: dwa kadry 720 na 340 obok siebie, bez odstępu.
   PRÓG PASA ZDJĘĆ = PRÓG RYTMU TREŚCI 640 px, świadomie: wymóg układu to
   plakietka „Zdjęcie do wymiany” (162 px) z marginesem 24 px po obu
   stronach w połowie szerokości, czyli 2 x (162 + 48) = 420 px okna
   (szerokość plakietki z get_tree_summary 2O1-1), poniżej progu rytmu;
   a margines plakietki zmienia się właśnie na progu rytmu (10.6). */
#tp-prezenty .tp-pas-zdjec {
    display: flex;
    flex-direction: column;
    row-gap: var(--tp-space-1);
}

#tp-prezenty .tp-pas-zdjec .tp-kadr {
    aspect-ratio: 375 / 180;
}

@media (min-width: 640px) {
    #tp-prezenty .tp-pas-zdjec {
        flex-direction: row;
        row-gap: 0;
    }

    #tp-prezenty .tp-pas-zdjec .tp-kadr {
        flex: 1 1 0;
        aspect-ratio: 720 / 340;
    }
}

/* 13.2 Pas pochodzenia. Paper 3Q9-0: panel mapy 335 na 300 (tło
   --color-surface-cold, obramowanie 1 px --color-line), pod nim podpis
   (odstęp 16); podpis 3QJ-0: miejsce (H3) i znacznik mapy, odstęp 10.
   Desktop 2RX-1: panel 380 na 340 | podpis 790, odstęp 30, wyśrodkowanie
   w pionie. Rysunek wypełnia wnętrze panelu (378 na 338 i 333 na 298).
   Kolory mapy z węzła 3LT-0 (get_jsx), przypisane klasami, bo atrybut
   prezentacyjny SVG nie przyjmuje var(). */
#tp-prezenty .tp-pochodzenie {
    display: flex;
    flex-direction: column;
    row-gap: var(--tp-space-4);
}

#tp-prezenty .tp-pochodzenie__panel {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 335 / 300;
    overflow: hidden;
    border: 1px solid var(--tp-color-line);
    background-color: var(--tp-color-surface-cold);
}

#tp-prezenty .tp-mapa {
    display: block;
    width: 100%;
    height: 100%;
}

#tp-prezenty .tp-mapa__lad {
    fill: var(--tp-color-surface);
    stroke: var(--tp-color-line);
    stroke-linejoin: round;
}

#tp-prezenty .tp-mapa__granica {
    --tp-mapa-granica: 1.5;
    fill: none;
    stroke: var(--tp-color-text-muted);
    stroke-width: var(--tp-mapa-granica);
    stroke-linecap: round;
    stroke-linejoin: round;
}

#tp-prezenty .tp-mapa__okrag {
    --tp-mapa-okrag: 1.5;
    fill: none;
    stroke: var(--tp-color-cta);
    stroke-width: var(--tp-mapa-okrag);
}

#tp-prezenty .tp-mapa__punkt {
    fill: var(--tp-color-cta);
}

#tp-prezenty .tp-mapa__wstawka {
    fill: var(--tp-color-bg);
    stroke: var(--tp-color-line);
}

#tp-prezenty .tp-mapa__polska {
    fill: var(--tp-color-surface);
    stroke: var(--tp-color-text-muted);
    stroke-linejoin: round;
}

#tp-prezenty .tp-mapa__ramka {
    --tp-mapa-ramka: 1.25;
    fill: none;
    stroke: var(--tp-color-accent);
    stroke-width: var(--tp-mapa-ramka);
}

#tp-prezenty .tp-pochodzenie__podpis {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    row-gap: 10px;
}

/* PRÓG PASA POCHODZENIA: 740 px, wspólny z trzema kolumnami H03 (10.8). Mieści się w całym
   zakresie przemiecenia od 400 px (narzedzia/pomiar-progow.mjs: przemiecenie 1440 do 640 px (pochodzenie i inspiracje od 400 px) co 10 px, potem co 1 px, z progiem podmienionym w CSSOM; kryteria: bez pękniętych słów i przepełnień, miejsce najwyżej o 1 wiersz więcej;
   --komponenty pochodzenie). */
@media (min-width: 740px) {
    #tp-prezenty .tp-pochodzenie {
        display: grid;
        grid-template-columns: minmax(0, 380fr) minmax(0, 790fr);
        align-items: center;
        column-gap: 30px;
    }

    #tp-prezenty .tp-pochodzenie__panel {
        aspect-ratio: 380 / 340;
    }
}

/* 13.3 Pole na znaki konkursów. Paper 3R4-0: tło --color-surface-cold,
   obramowanie 1 px --color-line, padding 16, odstęp 16; opis 3R5-0: etykieta
   --font-display 12/16, 700, --tracking-label, wersaliki, --color-accent
   i nota 14/21 --color-text-muted, odstęp 10; sloty 3R8-0: dwie kolumny
   po 144 na 96, odstęp 13. Desktop 2QX-1: padding 26, odstęp 20, nota
   do 760 px; sloty 2SB-1: sześć po 168 na 112, odstęp 28.
   Slot 2SC-1: tło --color-bg, obramowanie 1 px przerywane --color-line,
   „Do ustalenia” --font-display 12/16, 700, --tracking-label, wersaliki,
   --color-text-muted, wyśrodkowane. */
#tp-prezenty .tp-nagrody {
    --tp-nagrody-padding: var(--tp-space-4);
    display: flex;
    flex-direction: column;
    row-gap: var(--tp-space-4);
    padding: var(--tp-nagrody-padding);
    border: 1px solid var(--tp-color-line);
    background-color: var(--tp-color-surface-cold);
}

#tp-prezenty .tp-nagrody__opis {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
}

#tp-prezenty .tp-nagrody__etykieta {
    font-family: var(--tp-font-display);
    font-size: var(--tp-text-label);
    font-weight: var(--tp-font-weight-bold);
    line-height: var(--tp-interlinia-etykiety);
    letter-spacing: var(--tp-tracking-label);
    text-transform: uppercase;
    color: var(--tp-color-accent);
}

#tp-prezenty .tp-nagrody__nota {
    max-width: 760px;
}

#tp-prezenty .tp-nagrody__sloty {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 144px));
    gap: 13px;
}

#tp-prezenty .tp-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 144 / 96;
    border: 1px dashed var(--tp-color-line);
    background-color: var(--tp-color-bg);
    font-family: var(--tp-font-display);
    font-size: var(--tp-text-label);
    font-weight: var(--tp-font-weight-bold);
    line-height: var(--tp-interlinia-etykiety);
    letter-spacing: var(--tp-tracking-label);
    text-align: center;
    text-transform: uppercase;
    color: var(--tp-color-text-muted);
}

/* PRÓG SZEŚCIU SLOTÓW: 860 px. Mieści się od 806 px (narzedzia/pomiar-progow.mjs: przemiecenie 1440 do 640 px (pochodzenie i inspiracje od 400 px) co 10 px, potem co 1 px, z progiem podmienionym w CSSOM; kryteria: bez pękniętych słów i przepełnień, napis w slocie
   w jednym wierszu; --komponenty nagrody). Zapas 54 px. */
@media (min-width: 860px) {
    #tp-prezenty .tp-nagrody {
        --tp-nagrody-padding: 26px;
        row-gap: 20px;
    }

    #tp-prezenty .tp-nagrody__sloty {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 28px;
    }

    #tp-prezenty .tp-slot {
        aspect-ratio: 168 / 112;
    }
}


/* =====================================================================
   14. H04 REKOMENDOWANE ZESTAWY
   Paper: 2SP-1 (desktop: biała karta 1200 z tabelą w czterech kolumnach
   200 | 296 | 296 | 296), 3S3-0 (mobile: nagłówek na tonie sekcji, trzy
   białe karty wariantów, nota, wezwanie 2).
   Struktura (widok, blok H04): ul.tp-zestawy > li.tp-zestaw, w każdym
   głowa (butelka, etykieta „Wariant”, nazwa H3), <dl> cech (opis, skład,
   cena) i odnośnik. Na mobile karty. Od progu tabela: siatka czterech
   kolumn i sześciu rzędów; karty i ich części są jej podsiatkami (subgrid),
   więc wysokości rzędów wyrównują się między kartami bez display: contents
   i bez utraty semantyki listy. Karta 1 zajmuje kolumny 1 i 2 (etykiety
   w kolumnie 1), karty 2 i 3 po jednej kolumnie; ich etykiety są schowane
   wizualnie i zostają dla czytników ekranu.
   Przeglądarki bez subgrid (Chrome przed 117, Safari przed 16) dostają
   karty także powyżej progu (warunek @supports).
   PRÓG UKŁADU H04: 1120 px, pomiar przy regule @media.
   ===================================================================== */

/* 14.1 Karta zestawów i nagłówek. Mobile 3S3-0: nagłówek, lista kart i nota
   jako bloki co 32 px; nagłówek 3S4-0: kolumna, odstęp 16 (także między
   dwoma akapitami wstępu). Desktop 2SR-1: tło --color-bg, padding 52 / 56 /
   48; nagłówek 2UR-1: odstęp 22, padding dolny 36, H2 do 1000 px, wstęp
   2US-1 w dwóch kolumnach po 512 z odstępem 64. */
#tp-prezenty .tp-zestawy-karta {
    display: flex;
    flex-direction: column;
    row-gap: var(--tp-space-6);
}

#tp-prezenty :is(.tp-zestawy-karta__naglowek, .tp-zestawy-karta__wstep) {
    display: flex;
    flex-direction: column;
    row-gap: var(--tp-space-4);
}

/* 14.2 Karta wariantu (mobile). Paper 3SD-0: tło --color-bg, padding 20.
   Głowa 3SE-0: butelka w slocie 56 na 180 (contain), obok etykieta i nazwa
   (odstęp 8), odstęp 16, padding dolny 16, kreska dolna 1 px --color-line.
   Cecha 3SJ-0: kolumna, odstęp 8 (cena 10), padding 16 / 0, kreska dolna.
   Odnośnik 3T1-0: pas 44 px z paddingiem górnym 8.
   Etykieta 3SH-0: --font-display 12/16, 700, --tracking-label, wersaliki,
   --color-text-muted (cena: --color-accent). Opis 14/22 --color-text;
   skład --font-sans 16/24 (literał interlinii w Paper 2TY-1). Warunek
   „przy … zestawach”: --font-sans 14/21 --color-text-muted, zawijany,
   odstęp 6. Cena 3SX-0: znacznik i „zł netto” (--font-display 22/28,
   --tracking-h1, 700, wersaliki, --color-accent), odstęp 8, linia bazowa.
   Odnośnik 2T6-1: --font-display 13/18, --tracking-nav, 700, wersaliki,
   --color-accent, podkreślenie 1 px. */
#tp-prezenty .tp-zestawy {
    display: flex;
    flex-direction: column;
    row-gap: var(--tp-space-4);
}

#tp-prezenty .tp-zestaw {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 20px;
    background-color: var(--tp-color-bg);
}

#tp-prezenty .tp-zestaw__glowka {
    display: flex;
    align-items: center;
    column-gap: var(--tp-space-4);
    padding-bottom: var(--tp-space-4);
    border-bottom: 1px solid var(--tp-color-line);
}

#tp-prezenty .tp-zestaw__butelka {
    --tp-butelka-slot: 56px;
    --tp-butelka-wys: 180px;
    display: flex;
    flex: 0 0 var(--tp-butelka-slot);
    align-items: center;
    justify-content: center;
    height: var(--tp-butelka-wys);
}

#tp-prezenty .tp-zestaw__butelka-obraz {
    width: auto;
    height: 100%;
    max-width: none;
}

#tp-prezenty .tp-zestaw__podpis {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    row-gap: var(--tp-space-2);
    min-width: 0;
}

#tp-prezenty .tp-zestaw__etykieta {
    display: flex;
    flex-direction: column;
    row-gap: var(--tp-space-2);
    font-family: var(--tp-font-display);
    font-size: var(--tp-text-label);
    font-weight: var(--tp-font-weight-bold);
    line-height: var(--tp-interlinia-etykiety);
    letter-spacing: var(--tp-tracking-label);
    text-transform: uppercase;
    color: var(--tp-color-text-muted);
}

#tp-prezenty .tp-zestaw__etykieta--cena {
    color: var(--tp-color-accent);
}

#tp-prezenty .tp-zestaw__cechy {
    display: flex;
    flex-direction: column;
}

#tp-prezenty .tp-zestaw__cecha {
    display: flex;
    flex-direction: column;
    row-gap: var(--tp-space-2);
    padding-top: var(--tp-space-4);
    padding-bottom: var(--tp-space-4);
    border-bottom: 1px solid var(--tp-color-line);
}

#tp-prezenty .tp-zestaw__cecha--cena {
    row-gap: 10px;
}

#tp-prezenty .tp-zestaw__opis {
    font-family: var(--tp-font-sans);
    font-size: var(--tp-text-small);
    line-height: var(--tp-leading-h3-mobile);
    color: var(--tp-color-text);
}

#tp-prezenty .tp-zestaw__sklad {
    --tp-zestaw-sklad-interlinia: 24px;
    font-family: var(--tp-font-sans);
    font-size: var(--tp-text-body);
    line-height: var(--tp-zestaw-sklad-interlinia);
    color: var(--tp-color-text);
}

#tp-prezenty .tp-zestaw__warunek {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-family: var(--tp-font-sans);
    font-size: var(--tp-text-small);
    font-weight: var(--tp-font-weight-regular);
    line-height: var(--tp-leading-small);
    letter-spacing: var(--tp-tracking-normal);
    text-transform: none;
    color: var(--tp-color-text-muted);
}

#tp-prezenty .tp-zestaw__cena {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: var(--tp-space-2);
}

#tp-prezenty .tp-zestaw__waluta {
    --tp-zestaw-waluta-rozmiar: 22px;
    font-family: var(--tp-font-display);
    font-size: var(--tp-zestaw-waluta-rozmiar);
    font-weight: var(--tp-font-weight-bold);
    line-height: var(--tp-leading-h2-mobile);
    letter-spacing: var(--tp-tracking-h1);
    text-transform: uppercase;
    color: var(--tp-color-accent);
}

#tp-prezenty .tp-zestaw__akcja {
    display: flex;
    align-items: center;
    min-height: var(--tp-cel-dotyku);
    padding-top: var(--tp-space-2);
}

#tp-prezenty .tp-zestaw__odnosnik {
    --tp-zestaw-odnosnik-rozmiar: 13px;
    --tp-zestaw-odnosnik-interlinia: 18px;
    font-family: var(--tp-font-display);
    font-size: var(--tp-zestaw-odnosnik-rozmiar);
    font-weight: var(--tp-font-weight-bold);
    line-height: var(--tp-zestaw-odnosnik-interlinia);
    letter-spacing: var(--tp-tracking-nav);
    text-transform: uppercase;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-position: from-font;
    color: var(--tp-color-accent);
}

/* 14.3 Nota pod kartami. Paper 3UL-0: dwie grupy co 20 px; grupa 3UM-0
   odstęp 10, grupa 3UP-0 odstęp 6. Desktop 2SS-1: rząd 700 | 324, odstęp 64,
   padding górny 26. Odnośnik do sklepu 2SU-1: --color-text, podkreślenie. */
#tp-prezenty .tp-nota-zestawow {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}

#tp-prezenty .tp-nota-zestawow__grupa {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
}

#tp-prezenty .tp-nota-zestawow__grupa--sklep {
    row-gap: 6px;
}

#tp-prezenty .tp-nota-zestawow__odnosnik {
    color: var(--tp-color-text);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-position: from-font;
}

/* 14.4 Wezwanie 2. Paper 3US-0: kreska górna 1 px --color-accent, padding
   górny 16, zdanie nad przyciskiem (odstęp 20), przycisk na pełną szerokość.
   Desktop 2V0-1: rząd, zdanie do 700 px | przycisk, odstęp 64, padding
   górny 14, wyśrodkowanie w pionie. */
#tp-prezenty .tp-wezwanie {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
    padding-top: var(--tp-space-4);
    border-top: 1px solid var(--tp-color-accent);
}

#tp-prezenty .tp-wezwanie__przycisk {
    width: 100%;
}

/* PRÓG UKŁADU H04: 1120 px. Mieści się od 1067 px (narzedzia/pomiar-progow.mjs: przemiecenie 1440 do 640 px (pochodzenie i inspiracje od 400 px) co 10 px, potem co 1 px, z progiem podmienionym w CSSOM; kryteria: bez pękniętych słów i przepełnień; przy 1066 px „zł netto”
   schodzi pod znacznik ceny w kolumnach 1 i 2; nazwy wariantów, wstęp i pas wezwania najwyżej
   o 1 wiersz więcej; --komponenty zestawy). Zapas 53 px. Ta sama liczba w regule tabeli (14.5). */
@media (min-width: 1120px) {
    #tp-prezenty .tp-nadtytul--luzny {
        --tp-nadtytul-odstep: 18px;
    }

    #tp-prezenty .tp-zestawy-karta {
        row-gap: 0;
        padding: 52px 56px 48px;
        background-color: var(--tp-color-bg);
    }

    #tp-prezenty .tp-zestawy-karta__naglowek {
        row-gap: 22px;
        padding-bottom: 36px;
    }

    #tp-prezenty .tp-zestawy-karta__tytul {
        max-width: 1000px;
    }

    #tp-prezenty .tp-zestawy-karta__wstep {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--tp-space-8);
    }

    #tp-prezenty .tp-nota-zestawow {
        display: grid;
        grid-template-columns: minmax(0, 700fr) minmax(0, 324fr);
        column-gap: var(--tp-space-8);
        padding-top: 26px;
    }

    #tp-prezenty .tp-wezwanie {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        column-gap: var(--tp-space-8);
        padding-top: 14px;
    }

    #tp-prezenty .tp-wezwanie__tekst {
        flex: 0 1 700px;
    }

    #tp-prezenty .tp-wezwanie__przycisk {
        flex-shrink: 0;
        width: auto;
    }
}

/* 14.5 Tabela wariantów od progu H04 (przy obsłudze subgrid).
   Paper 2SZ-1: kreska górna 1 px --color-accent; kolumny 200 | 296 | 296 |
   296 (w siatce proporcje fr), bez odstępów, paddingi w komórkach:
   kolumna etykiet z prawej 24, kolumny wariantów z prawej 28 (ostatnia 0).
     rząd 1 butelki (2UJ-1): 250 px, padding górny 28, butelka wyśrodkowana
       przy dolnej krawędzi, wysokość 222 px (2UN-1, 2UL-1);
     rząd 2 nazwy (2UA-1): padding 22 / 20, kreska dolna, wyrównanie do góry;
     rząd 3 opis (2U1-1): padding 20 / 20, kreska dolna;
     rząd 4 skład (2TS-1): padding 16 / 16, kreska dolna;
     rząd 5 cena (2T8-1): padding 22 / 26, bez kreski;
     rząd 6 odnośniki (2T0-1): padding 20 / 4, kreska górna, wyśrodkowanie. */
@supports (grid-template-rows: subgrid) {
    @media (min-width: 1120px) {
        #tp-prezenty .tp-zestawy {
            display: grid;
            grid-template-columns: minmax(0, 200fr) repeat(3, minmax(0, 296fr));
            grid-template-rows: repeat(6, auto);
            row-gap: 0;
            border-top: 1px solid var(--tp-color-accent);
        }

        #tp-prezenty .tp-zestaw {
            display: grid;
            grid-row: 1 / -1;
            grid-template-columns: subgrid;
            grid-template-rows: subgrid;
            padding: 0;
            background-color: transparent;
        }

        #tp-prezenty .tp-zestaw:first-child {
            grid-column: 1 / span 2;
        }

        #tp-prezenty .tp-zestaw:nth-child(2) {
            grid-column: 3;
        }

        #tp-prezenty .tp-zestaw:nth-child(3) {
            grid-column: 4;
        }

        /* Podsiatki: gap 0 i rozciąganie wprost, bo z układu mobilnego zostają odstępy
           (głowa: column-gap 16 przesuwała komórkę butelki o 8 px) i wyrównanie do środka
           (głowa: align-items center centrowała wiersz nazwy krótszej karty i rozrywała
           linię kreski dolnej). */
        #tp-prezenty :is(.tp-zestaw__glowka, .tp-zestaw__cechy) {
            display: grid;
            grid-column: 1 / -1;
            grid-template-columns: subgrid;
            grid-template-rows: subgrid;
            align-items: stretch;
            gap: 0;
            padding: 0;
            border: 0;
        }

        #tp-prezenty .tp-zestaw__glowka {
            grid-row: 1 / span 2;
        }

        #tp-prezenty .tp-zestaw__cechy {
            grid-row: 3 / span 3;
        }

        #tp-prezenty .tp-zestaw__butelka {
            --tp-butelka-wys: 250px;
            grid-row: 1;
            grid-column: -2 / -1;
            align-items: flex-end;
            padding-top: 28px;
        }

        #tp-prezenty .tp-zestaw__butelka-obraz {
            height: 222px;
        }

        #tp-prezenty :is(.tp-zestaw__podpis, .tp-zestaw__cecha, .tp-zestaw__akcja) {
            display: grid;
            grid-column: 1 / -1;
            grid-template-columns: subgrid;
            align-items: start;
            row-gap: 0;
        }

        #tp-prezenty .tp-zestaw__podpis {
            grid-row: 2;
            padding-top: 22px;
            padding-bottom: 20px;
            border-bottom: 1px solid var(--tp-color-line);
        }

        #tp-prezenty .tp-zestaw__cecha--opis {
            padding-top: 20px;
            padding-bottom: 20px;
        }

        #tp-prezenty .tp-zestaw__cecha--cena {
            padding-top: 22px;
            padding-bottom: 26px;
            border-bottom: 0;
        }

        #tp-prezenty :is(.tp-zestaw__podpis, .tp-zestaw__cecha) > .tp-zestaw__etykieta {
            grid-column: 1;
            padding-right: var(--tp-space-5);
        }

        #tp-prezenty :is(.tp-zestaw__nazwa, .tp-zestaw__wartosc) {
            grid-column: -2 / -1;
            padding-right: 28px;
        }

        #tp-prezenty .tp-zestaw:last-child :is(.tp-zestaw__nazwa, .tp-zestaw__wartosc) {
            padding-right: 0;
        }

        #tp-prezenty .tp-zestaw:not(:first-child) :is(.tp-zestaw__podpis, .tp-zestaw__cecha) > .tp-zestaw__etykieta {
            position: absolute;
            width: 1px;
            height: 1px;
            margin: -1px;
            padding: 0;
            overflow: hidden;
            clip: rect(0 0 0 0);
            clip-path: inset(50%);
            white-space: nowrap;
        }

        #tp-prezenty .tp-zestaw__akcja {
            grid-row: 6;
            align-items: center;
            min-height: 0;
            padding-top: 20px;
            padding-bottom: var(--tp-space-1);
            border-top: 1px solid var(--tp-color-line);
        }

        #tp-prezenty .tp-zestaw__odnosnik {
            grid-column: -2 / -1;
            justify-self: start;
        }
    }
}


/* =====================================================================
   15. H05 INSPIRACJE
   Paper: 2V4-1 (desktop: nagłówek jak H02, trzy kolumny 380 z odstępem 30,
   inspiracja 4 w rzędzie 380 | 790, nota), 3UX-0 (mobile: karty ze
   zdjęciem 375 do krawędzi ekranu, tekst w mierze 335).
   PRÓG UKŁADU INSPIRACJI: 740 px, pomiar przy regule @media.
   ===================================================================== */

/* 15.1 Lista. Mobile 3V3-0: karty co 40 px; inspiracja 4 (3VR-0) 32 px pod
   kartami (odstęp bloków sekcji), w mierze 335, kreska górna 1 px
   --color-line, padding górny 24, odstęp 8.
   Karta 3V4-0: zdjęcie 375 na 237 (proporcja 380 / 240 jak na desktopie),
   odstęp 16, tekst z marginesem 20 i odstępem 8. Tytuł 3V7-0: --font-display
   16/22 (--text-body, --leading-h3-mobile), --tracking-h3, 700, wersaliki,
   --color-accent; opis 3V8-0: 14/22 --color-text.
   Nakładka z logo przykładowym: 20 px od rogu na mobile (3VB-0), 24 px na
   desktopie (3MA-0). Punkt kadru zdjęcia 3: 50% 60% (2VT-1). */
#tp-prezenty .tp-inspiracje {
    display: flex;
    flex-direction: column;
}

#tp-prezenty .tp-inspiracja {
    display: flex;
    flex-direction: column;
    row-gap: var(--tp-space-4);
}

#tp-prezenty .tp-inspiracja + .tp-inspiracja {
    margin-top: 40px;
}

#tp-prezenty .tp-inspiracja__kadr {
    --tp-kadr-margines: 20px;
    aspect-ratio: 380 / 240;
}

#tp-prezenty .tp-inspiracja__kadr--nizej {
    --tp-kadr-punkt: 50% 60%;
}

#tp-prezenty .tp-inspiracja__tekst {
    display: flex;
    flex-direction: column;
    row-gap: var(--tp-space-2);
    padding-left: var(--tp-uklad-margines);
    padding-right: var(--tp-uklad-margines);
}

#tp-prezenty .tp-inspiracja__tytul {
    --tp-inspiracja-tytul-min: 0px;
    min-height: var(--tp-inspiracja-tytul-min);
    font-family: var(--tp-font-display);
    font-size: var(--tp-text-body);
    font-weight: var(--tp-font-weight-bold);
    line-height: var(--tp-leading-h3-mobile);
    letter-spacing: var(--tp-tracking-h3);
    text-transform: uppercase;
    color: var(--tp-color-accent);
}

#tp-prezenty .tp-inspiracja__opis {
    font-family: var(--tp-font-sans);
    font-size: var(--tp-text-small);
    line-height: var(--tp-leading-h3-mobile);
    color: var(--tp-color-text);
}

#tp-prezenty .tp-inspiracje .tp-inspiracja--bez-zdjecia {
    row-gap: var(--tp-space-2);
    margin: var(--tp-space-6) var(--tp-uklad-margines) 0;
    padding-top: var(--tp-space-5);
    border-top: 1px solid var(--tp-color-line);
}

/* Miejsce na logo firmy. Paper 3MA-0: kolumna, odstęp 8; znacznik luki;
   logo 3MD-0: tło --color-bg, padding 14 / 18, odstęp 10; znak 24 na 24
   (obrys 2 i wypełnienie połowy --color-accent); nazwa --font-display 14/18,
   --tracking-label, 700, wersaliki, --color-accent. */
#tp-prezenty .tp-logo-miejsce {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    row-gap: var(--tp-space-2);
}

#tp-prezenty .tp-logo-przyklad {
    display: flex;
    align-items: center;
    column-gap: 10px;
    padding: 14px 18px;
    background-color: var(--tp-color-bg);
}

#tp-prezenty .tp-logo-przyklad__znak {
    display: block;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

#tp-prezenty .tp-logo-przyklad__obrys {
    --tp-logo-obrys: 2;
    fill: none;
    stroke: var(--tp-color-accent);
    stroke-width: var(--tp-logo-obrys);
}

#tp-prezenty .tp-logo-przyklad__wypelnienie {
    fill: var(--tp-color-accent);
}

#tp-prezenty .tp-logo-przyklad__nazwa {
    --tp-logo-nazwa-interlinia: 18px;
    font-family: var(--tp-font-display);
    font-size: var(--tp-text-small);
    font-weight: var(--tp-font-weight-bold);
    line-height: var(--tp-logo-nazwa-interlinia);
    letter-spacing: var(--tp-tracking-label);
    text-transform: uppercase;
    color: var(--tp-color-accent);
}

/* 15.2 Nota o zdjęciach. Paper 3VU-0 i 3MN-0: kolumna, odstęp 12, znacznik
   grupy, nota 14/21 --color-text-muted do 528 px (2VY-1). */
#tp-prezenty .tp-nota-zdjec {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    row-gap: var(--tp-space-3);
}

#tp-prezenty .tp-nota-zdjec__tekst {
    max-width: 528px;
}

/* PRÓG UKŁADU INSPIRACJI: 740 px, wspólny z H03 (10.8). Mieści się od 636 px (narzedzia/pomiar-progow.mjs: przemiecenie 1440 do 640 px (pochodzenie i inspiracje od 400 px) co 10 px, potem co 1 px, z progiem podmienionym w CSSOM; kryteria: bez pękniętych słów i przepełnień,
   tytuły najwyżej o 1 wiersz ponad stan przy 1440 px; --komponenty inspiracje). Zapas 104 px.
   Desktop 3M5-0: kolumny 380 z odstępem 30, wyrównanie do góry, 34 px do
   inspiracji 4; karta 3M6-0: odstęp 20; tekst 2VL-1: odstęp 7, tytuł
   2VN-1 o stałej wysokości 44 px (dwa wiersze); inspiracja 4 (2VC-1):
   tytuł 380 | opis 790, odstęp 30, padding górny 26. */
@media (min-width: 740px) {
    #tp-prezenty .tp-inspiracje {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: start;
        column-gap: 30px;
        row-gap: 34px;
        width: 100%;
        max-width: calc(var(--tp-container-content) + 2 * var(--tp-uklad-margines));
        margin-left: auto;
        margin-right: auto;
        padding-left: var(--tp-uklad-margines);
        padding-right: var(--tp-uklad-margines);
    }

    #tp-prezenty .tp-inspiracja + .tp-inspiracja {
        margin-top: 0;
    }

    #tp-prezenty .tp-inspiracja {
        row-gap: 20px;
    }

    #tp-prezenty .tp-inspiracja__kadr {
        --tp-kadr-margines: var(--tp-space-5);
    }

    #tp-prezenty .tp-inspiracja__tekst {
        row-gap: 7px;
        padding-left: 0;
        padding-right: 0;
    }

    #tp-prezenty .tp-inspiracja__tytul {
        --tp-inspiracja-tytul-min: 44px;
    }

    #tp-prezenty .tp-inspiracje .tp-inspiracja--bez-zdjecia {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: minmax(0, 380fr) minmax(0, 790fr);
        column-gap: 30px;
        margin: 0;
        padding-top: 26px;
    }

    #tp-prezenty .tp-inspiracja--bez-zdjecia .tp-inspiracja__tytul {
        --tp-inspiracja-tytul-min: 0px;
    }
}


/* =====================================================================
   16. H06 OPINIE (sekcja poglądowa)
   Paper: 2W0-1 (desktop 1440 na 748: ton --color-surface, stos 32 px,
   plakietka poglądowości, nagłówek 700 | 420, cytaty w siatce 3 + 2),
   3VZ-0 (mobile: stos 32 px, cytaty w pionie). Sekcja składa plakietkę,
   nagłówek sekcji (10.4) i listę cytatów; stos w wariancie --desktop-32.
   PRÓG UKŁADU OPINII: pomiar i liczba przy regule @media.
   ===================================================================== */

/* 16.1 Plakietka sekcji poglądowej. Mobile 3W0-0: kolumna, tło --color-bg,
   obramowanie 1 px przerywane --color-line, padding 16, odstęp 12; znacznik
   na pełną szerokość (3W1-0, wariant --cta); wyjaśnienie 14/21
   --color-text-muted (3W3-0). Desktop 2WR-1: rząd wyśrodkowany w pionie,
   padding 16 / 20, odstęp 20, znacznik szerokości tekstu, wyjaśnienie do
   820 px (2WU-1, --container-narrow).
   Klasa tp-poglad jest licznikiem kontroli (kontrola-cms.mjs, ostrzeżenie
   „sekcje poglądowe”, przed produkcją 0). */
#tp-prezenty .tp-poglad {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    row-gap: var(--tp-space-3);
    padding: var(--tp-space-4);
    border: 1px dashed var(--tp-color-line);
    background-color: var(--tp-color-bg);
}

#tp-prezenty .tp-poglad__znacznik {
    align-self: stretch;
    width: auto;
}

/* 16.2 Cytaty. Mobile 3W9-0: lista w kolumnie, kreska górna 1 px
   --color-accent, padding górny 24, odstęp 32; pozycja 3WA-0: kolumna,
   odstęp 12, do lewej; cytat 3WB-0: --font-display 400, --text-lead
   i --leading-lead (20/31), --color-accent; podpis: luka w wariancie
   --podpis (10.5).
   Od progu rytmu treści (2W0-1): cytat 22/31 (literał w Paper, 2WM-1),
   padding górny listy 30, odstęp w pozycji 16. Pozycje w siatce mają
   równą wysokość rzędu, a podpis stoi przy dolnej krawędzi (space-between,
   2WJ-1). Cudzysłowy są znakami treści („…”), bez ::before. */
#tp-prezenty .tp-opinie {
    display: flex;
    flex-direction: column;
    row-gap: var(--tp-space-6);
    padding-top: var(--tp-space-5);
    border-top: 1px solid var(--tp-color-accent);
}

#tp-prezenty .tp-opinie__pozycja {
    display: flex;
}

#tp-prezenty .tp-opinia {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    row-gap: var(--tp-space-3);
    min-width: 0;
}

/* Podpis jako flex: znacznik (inline-flex) w bloku figcaption stałby w linii tekstu
   z interlinią 27 px korzenia i podpis byłby wyższy niż znacznik (24 px w Paper). */
#tp-prezenty .tp-opinia__podpis {
    display: flex;
}

#tp-prezenty .tp-opinia__cytat {
    --tp-opinia-rozmiar: var(--tp-text-lead);
    font-family: var(--tp-font-display);
    font-size: var(--tp-opinia-rozmiar);
    font-weight: var(--tp-font-weight-regular);
    line-height: var(--tp-leading-lead);
    letter-spacing: var(--tp-tracking-normal);
    text-transform: none;
    color: var(--tp-color-accent);
}

/* PRÓG RYTMU TREŚCI 640 px. */
@media (min-width: 640px) {
    #tp-prezenty .tp-opinie {
        padding-top: 30px;
    }

    #tp-prezenty .tp-opinia {
        row-gap: var(--tp-space-4);
    }

    #tp-prezenty .tp-opinia__cytat {
        --tp-opinia-rozmiar: 22px;
    }
}

/* PRÓG UKŁADU OPINII H06: 840 px. Mieści się od 792 px (narzedzia/pomiar-progow.mjs --komponenty opinie
   --od 400 --krok 10: przemiecenie 1440 do 400 px co 10 px, potem co 1 px, próg podmieniony w CSSOM;
   kryteria: bez pękniętych słów i przepełnień, znacznik plakietki i podpisy w jednym wierszu, wyjaśnienie
   najwyżej o 1 wiersz, cytaty najwyżej o 2 wiersze ponad stan przy 1440 px; przy 791 px cytat 2 ma
   7 wierszy zamiast 4; pomiar 15.09.2026). Zapas 48 px.
   Siatka sześciu kolumn z odstępem 30 (2WA-1 i 2W1-1): cytaty 1 do 3 po dwie kolumny (380 przy 1440),
   cytaty 4 i 5 po trzy (585), odstęp rzędów 32. Plakietka w rzędzie. */
@media (min-width: 840px) {
    #tp-prezenty .tp-poglad {
        flex-direction: row;
        align-items: center;
        column-gap: 20px;
        padding: var(--tp-space-4) 20px;
    }

    #tp-prezenty .tp-poglad__znacznik {
        flex-shrink: 0;
        align-self: auto;
        width: max-content;
    }

    #tp-prezenty .tp-poglad__tekst {
        flex: 0 1 var(--tp-container-narrow);
        min-width: 0;
    }

    #tp-prezenty .tp-opinie {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        column-gap: 30px;
        row-gap: var(--tp-space-6);
    }

    #tp-prezenty .tp-opinie__pozycja {
        grid-column: span 2;
    }

    #tp-prezenty .tp-opinie__pozycja:nth-child(n + 4) {
        grid-column: span 3;
    }
}


/* =====================================================================
   17. H07 USŁUGI DODATKOWE
   Paper: 2WW-1 (desktop 1440 na 934: ton --color-bg, kolumna 720 ze
   zdjęciem na wysokość sekcji | kolumna 720 z tekstem), 3WV-0 (mobile:
   tekst i usługi, pod nimi zdjęcie 375 na 469, decyzja O29.4).
   HTML w kolejności mobilnej; układ desktopowy składa siatka.
   PRÓG UKŁADU H07: pomiar i liczba przy regule @media.
   ===================================================================== */

/* 17.1 Kolumna tekstu. Mobile 3WW-0: padding 48 / 20 / 40, odstęp 16.
   Od progu rytmu treści odstęp 20 (2WX-1, jak kolumna tekstu H01).
   Desktop 2WX-1: padding 60, z lewej 72, z prawej margines treści strony
   (120 px przy 1440: szerokość kolumny minus połowa --container-content,
   nie mniej niż --tp-uklad-margines, jak H01 11.1). */
#tp-prezenty .tp-uslugi__tekst {
    display: flex;
    flex-direction: column;
    row-gap: var(--tp-space-4);
    padding: var(--tp-space-7) var(--tp-uklad-margines) 40px;
}

/* 17.2 Lista usług. Paper 2WY-1 i 3X0-0: pozycje z kreską górną 1 px
   --color-line (ostatnia także z dolną), padding 14 / 0, odstęp 5; tytuł
   2XD-1: --font-display 15/18 (literały w Paper), --tracking-h3, 700,
   wersaliki, --color-accent; opis 2XC-1: --font-sans 14/22 (--text-small,
   --leading-h3-mobile), --color-text. */
#tp-prezenty .tp-uslugi__lista {
    display: flex;
    flex-direction: column;
}

#tp-prezenty .tp-usluga {
    --tp-usluga-pion: 14px;
    --tp-usluga-odstep: 5px;
    display: flex;
    flex-direction: column;
    row-gap: var(--tp-usluga-odstep);
    padding-top: var(--tp-usluga-pion);
    padding-bottom: var(--tp-usluga-pion);
    border-top: 1px solid var(--tp-color-line);
}

#tp-prezenty .tp-usluga:last-child {
    border-bottom: 1px solid var(--tp-color-line);
}

#tp-prezenty .tp-usluga__tytul {
    --tp-usluga-tytul-rozmiar: 15px;
    --tp-usluga-tytul-interlinia: 18px;
    font-family: var(--tp-font-display);
    font-size: var(--tp-usluga-tytul-rozmiar);
    font-weight: var(--tp-font-weight-bold);
    line-height: var(--tp-usluga-tytul-interlinia);
    letter-spacing: var(--tp-tracking-h3);
    text-transform: uppercase;
    color: var(--tp-color-accent);
}

#tp-prezenty .tp-usluga__opis {
    font-family: var(--tp-font-sans);
    font-size: var(--tp-text-small);
    line-height: var(--tp-leading-h3-mobile);
    color: var(--tp-color-text);
}

/* 17.3 Zdjęcie z wezwaniem 3. Mobile 3XG-0: 375 na 469 (proporcja
   zachowana), przyciemnienie 200 px (3XH-0), przycisk 20 px od boków i 24 px
   od dołu (3XI-0: 335 na 56), znacznik 16 px od lewego górnego rogu (3XK-0).
   Desktop 2XL-1: kolumna na wysokość sekcji, przyciemnienie 170 px (2XM-1),
   przycisk szerokości etykiety (padding 32), 60 px od dołu, z lewej na
   marginesie treści strony (120 px przy 1440, 2XN-1), znacznik 24 px od rogu
   (2XR-1). Punkt kadru 50% 50% (background-position 2XL-1).
   Przycisk: komponent 10.7 (min-height 56 px, etykieta w dwóch wierszach
   powiększa przycisk, D31.1); max-width kadru, żeby overflow: hidden kadru
   go nie przyciął (lekcja widocznosc-i-przyciecie-po-przodkach). */
#tp-prezenty .tp-uslugi__kadr {
    --tp-kadr-przyciemnienie: 200px;
    aspect-ratio: 375 / 469;
}

#tp-prezenty .tp-uslugi__przycisk {
    position: absolute;
    right: var(--tp-uklad-margines);
    bottom: var(--tp-space-5);
    left: var(--tp-uklad-margines);
}

/* PRÓG RYTMU TREŚCI 640 px. */
@media (min-width: 640px) {
    #tp-prezenty .tp-uslugi__tekst {
        row-gap: 20px;
    }
}

/* PRÓG UKŁADU H07: 965 px. Mieści się od 914 px (narzedzia/pomiar-progow.mjs --komponenty uslugi, metoda
   jak przy H06; kryteria: tytuły usług i etykieta przycisku w jednym wierszu jak w Paper, H2 najwyżej
   o 1 wiersz, wstęp i opisy najwyżej o 2 wiersze więcej; przy 913 px „Pomoc w zaplanowaniu większego
   zamówienia” w dwóch wierszach; pomiar 15.09.2026). Zapas 51 px. */
@media (min-width: 965px) {
    #tp-prezenty .tp-uslugi {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas: "kadr tekst";
    }

    #tp-prezenty .tp-uslugi__tekst {
        grid-area: tekst;
        padding: 60px max(var(--tp-uklad-margines), calc(100% - var(--tp-container-content) / 2)) 60px 72px;
    }

    #tp-prezenty .tp-uslugi__kadr {
        --tp-kadr-przyciemnienie: 170px;
        grid-area: kadr;
        aspect-ratio: auto;
    }

    #tp-prezenty .tp-uslugi__przycisk {
        --tp-uslugi-przycisk-lewo: max(var(--tp-uklad-margines), calc(100% - var(--tp-container-content) / 2));
        right: auto;
        bottom: 60px;
        left: var(--tp-uslugi-przycisk-lewo);
        max-width: calc(100% - var(--tp-uslugi-przycisk-lewo) - var(--tp-uklad-margines));
    }
}


/* =====================================================================
   18. H08 PROCES ZAMÓWIENIA
   Paper: 2XU-1 (desktop 1440 na 488: ton --color-surface, nagłówek
   700 | 420, oś czasu), 3XN-0 (mobile: stos 24 px, pionowa lista).
   Sekcja składa nagłówek (10.4) i listę argumentów (10.8) w wariancie
   --kroki; stos w wariancie --ciasny. Bez wezwania.
   PRÓG OSI CZASU: pomiar i liczba przy regule @media.
   ===================================================================== */

/* 18.1 Wariant --kroki. Mobile 3XS-0: jak lista argumentów (kreska górna
   1 px --color-accent, padding górny 24, odstęp 24; pozycja w rzędzie,
   odstęp 12, treść z odstępem 8). Różnice: slot numeru 48 (3XU-0), numer
   --font-display 30/34 (literały), odstęp liter 0.05em, 700, --color-accent;
   treść z paddingiem górnym 7 (3XV-0); tytuł 15/21 (literały, 3XW-0),
   --tracking-h3; opis 14/22 bez zmian.
   Desktop 2XY-1: sześć kolumn z odstępem 24 (180 przy 1440), padding górny
   22; kolumna 2YJ-1: numer, tytuł i opis z odstępem 10. */
#tp-prezenty .tp-argumenty--kroki {
    --tp-argumenty-kolumny: 6;
    --tp-argumenty-odstep: var(--tp-space-5);
}

#tp-prezenty .tp-argumenty--kroki .tp-argument {
    --tp-argument-slot: 48px;
}

#tp-prezenty .tp-argumenty--kroki .tp-argument__liczba {
    --tp-argument-liczba-rozmiar: 30px;
    --tp-argument-liczba-interlinia: 34px;
    --tp-argument-liczba-kolor: var(--tp-color-accent);
}

#tp-prezenty .tp-argumenty--kroki .tp-argument__tresc {
    --tp-argument-tresc-gora: 7px;
}

#tp-prezenty .tp-argumenty--kroki .tp-argument__tytul {
    --tp-argument-tytul-rozmiar: 15px;
    --tp-argument-tytul-interlinia: 21px;
}

/* PRÓG OSI CZASU H08: 1020 px. Mieści się od 973 px (narzedzia/pomiar-progow.mjs --komponenty kroki, metoda
   jak przy H06; kryteria: tytuły kroków najwyżej o 1 wiersz, opisy najwyżej o 2 wiersze więcej; przy
   972 px opis kroku 3 ma 7 wierszy zamiast 4, przy 970 px „Przygotowujemy” pęka; pomiar 15.09.2026).
   Zapas 47 px. */
@media (min-width: 1020px) {
    #tp-prezenty .tp-argumenty--kroki {
        display: grid;
        grid-template-columns: repeat(var(--tp-argumenty-kolumny), minmax(0, 1fr));
        column-gap: var(--tp-argumenty-odstep);
        row-gap: 0;
        padding-top: 22px;
    }

    #tp-prezenty .tp-argumenty--kroki .tp-argument {
        flex-direction: column;
        row-gap: 10px;
    }

    #tp-prezenty .tp-argumenty--kroki .tp-argument__liczba {
        flex: none;
    }

    #tp-prezenty .tp-argumenty--kroki .tp-argument__tresc {
        row-gap: 10px;
        padding-top: 0;
    }
}


/* =====================================================================
   19. H09 NAJCZĘSTSZE PYTANIA
   Paper: 2YS-1 (desktop 1440 na 921: ton --color-bg, stos 30 px, nagłówek
   w kolumnie 700, akordeon 1200), 3YO-0 (mobile: stos 24 px, akordeon 335).
   Natywne <details> i <summary>: stan otwarcia bez JavaScriptu; reset 3.11
   chowa systemowy znacznik rozwinięcia, ikonę rysuje komponent. Bez cienia
   i uniesienia (pytanie nie jest odnośnikiem); fokus z klawiatury: 6.2.
   ===================================================================== */

/* 19.1 Akordeon. Paper 2YT-1 i 3YS-0: kreska górna 1 px --color-accent;
   każde pytanie z kreską dolną 1 px --color-line.
   Mobile: zwinięte 3YZ-0 padding 16 / 16, rozwinięte 3YT-0 padding 16 / 18
   i odstęp 10 do odpowiedzi; wiersz 3YU-0: rząd wyrównany do góry, odstęp 16;
   pytanie --font-display 17/22 (--text-h3-mobile, --leading-h3-mobile), 700,
   odstęp liter 0.045em (literał), bez wersalików, --color-accent; slot ikony
   16 na 22 (3YW-0): kreska 16 na 2, przy zwiniętym także pionowa 2 na 16
   (3Z2-0), --color-accent; odpowiedź 3YY-0: --font-sans 15/24 (literały),
   --color-text.
   Od progu rytmu treści (2YT-1): pytanie 18/24 (literały, 307-1), odstęp
   w wierszu 24; zwinięte padding 19 / 19 (2ZY-1); odpowiedź do 820 px
   (304-1, --container-narrow). ŚWIADOME ODSTĘPSTWO: rozwinięte w Paper ma
   padding 18 / 18 (303-1), w module 19 / 17, czyli ta sama wysokość 119 px,
   a tytuł nie przesuwa się o 1 px przy rozwinięciu.
   Slot ikony ma wysokość interlinii pytania, więc ikona stoi przy pierwszym
   wierszu także przy pytaniu w dwóch wierszach (desktop w Paper:
   wyśrodkowanie w wierszu 24 px, czyli to samo położenie). */
#tp-prezenty .tp-pytania {
    border-top: 1px solid var(--tp-color-accent);
}

#tp-prezenty .tp-pytanie {
    --tp-pytanie-gora: var(--tp-space-4);
    --tp-pytanie-dol: var(--tp-space-4);
    --tp-pytanie-rozmiar: var(--tp-text-h3-mobile);
    --tp-pytanie-interlinia: var(--tp-leading-h3-mobile);
    padding-top: var(--tp-pytanie-gora);
    padding-bottom: var(--tp-pytanie-dol);
    border-bottom: 1px solid var(--tp-color-line);
}

#tp-prezenty .tp-pytanie[open] {
    --tp-pytanie-dol: 18px;
}

#tp-prezenty .tp-pytanie__wiersz {
    --tp-pytanie-wiersz-odstep: var(--tp-space-4);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    column-gap: var(--tp-pytanie-wiersz-odstep);
}

#tp-prezenty .tp-pytanie__tytul {
    --tp-pytanie-rozstaw: 0.045em;
    flex: 1 1 0%;
    min-width: 0;
    font-family: var(--tp-font-display);
    font-size: var(--tp-pytanie-rozmiar);
    font-weight: var(--tp-font-weight-bold);
    line-height: var(--tp-pytanie-interlinia);
    letter-spacing: var(--tp-pytanie-rozstaw);
    text-transform: none;
    color: var(--tp-color-accent);
}

#tp-prezenty .tp-pytanie__ikona {
    --tp-pytanie-ikona: 16px;
    --tp-pytanie-kreska: 2px;
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: var(--tp-pytanie-ikona);
    height: var(--tp-pytanie-interlinia);
}

#tp-prezenty .tp-pytanie__kreska {
    display: block;
    grid-area: 1 / 1;
    width: var(--tp-pytanie-ikona);
    height: var(--tp-pytanie-kreska);
    background-color: var(--tp-color-accent);
}

#tp-prezenty .tp-pytanie__kreska--pion {
    width: var(--tp-pytanie-kreska);
    height: var(--tp-pytanie-ikona);
    transition: transform 0.2s ease;
}

#tp-prezenty .tp-pytanie[open] .tp-pytanie__kreska--pion {
    transform: scaleY(0);
}

#tp-prezenty .tp-pytanie__odpowiedz {
    --tp-pytanie-odpowiedz-rozmiar: 15px;
    --tp-pytanie-odpowiedz-interlinia: 24px;
    margin-top: 10px;
    font-family: var(--tp-font-sans);
    font-size: var(--tp-pytanie-odpowiedz-rozmiar);
    line-height: var(--tp-pytanie-odpowiedz-interlinia);
    color: var(--tp-color-text);
}

@media (prefers-reduced-motion: reduce) {
    #tp-prezenty .tp-pytanie__kreska--pion {
        transition: none;
    }
}

/* PRÓG RYTMU TREŚCI 640 px. */
@media (min-width: 640px) {
    #tp-prezenty .tp-pytanie {
        --tp-pytanie-gora: 19px;
        --tp-pytanie-dol: 19px;
        --tp-pytanie-rozmiar: 18px;
        --tp-pytanie-interlinia: 24px;
    }

    #tp-prezenty .tp-pytanie[open] {
        --tp-pytanie-dol: 17px;
    }

    #tp-prezenty .tp-pytanie__wiersz {
        --tp-pytanie-wiersz-odstep: var(--tp-space-5);
    }

    #tp-prezenty .tp-pytanie__odpowiedz {
        max-width: var(--tp-container-narrow);
    }
}


/* =====================================================================
   20. H10 DOMKNIĘCIE
   Paper: 30B-1 (desktop 1440 na 771: ton --color-surface, padding 64 / 64,
   stos 34), 40J-0 (mobile: padding 48, stos 32). Sekcja składa nagłówek
   (10.4) w wariancie --kontakt z rzędem nadtytułu --rozciagly (10.3)
   i szybkim kontaktem --akcent (11.1), formularz (10.9) bez nagłówka
   formularza i rząd mikrocopy z podpisem marki.
   ===================================================================== */

/* 20.1 Rytm: od progu rytmu treści dolny padding 64 px (Paper 30B-1:
   paddingBlock 64), pozostałe sekcje mają 60 px. */
@media (min-width: 640px) {
    #tp-prezenty .tp-domkniecie {
        --tp-rytm-dol: var(--tp-space-8);
    }
}

/* 20.2 Nagłówek z kontaktem. Mobile 40J-0: kontakt 32 px pod kolumną tytułu
   (odstęp stosu sekcji między 40K-0 a 40W-0). Desktop 31G-1: siatka nagłówka
   700 | 420 (10.4), kontakt 420 wyrównany do dołu; w siatce jest jeden rząd,
   więc row-gap wariantu nie działa. Rząd nadtytułu: odstęp 18 px w układzie
   desktopowym nagłówka (32R-1), ta sama liczba co próg nagłówka w 10.4. */
#tp-prezenty .tp-naglowek--kontakt {
    row-gap: var(--tp-space-6);
}

@media (min-width: 970px) {
    #tp-prezenty .tp-nadtytul--rozciagly {
        --tp-nadtytul-odstep: 18px;
    }
}

/* 20.3 Mikrocopy i podpis marki. Mobile 41W-0: kolumna, kreska górna 1 px
   --color-line, padding górny 24, odstęp 16; mikrocopy 41X-0 14/22
   (interlinia literałem), --color-text-muted; podpis 41Y-0 --font-display
   17/23 (literały), --tracking-h3, 700, wersaliki, --color-accent.
   Od progu rytmu treści padding górny 26 (30C-1). Desktop 30C-1: rząd
   700 | 420 wyrównany do góry (w siatce proporcje i odstęp 80 jak nagłówek
   sekcji: 120 + 700 + 80 + 420 przy 1440). Element niesie data-content-end. */
#tp-prezenty .tp-domkniecie__koniec {
    display: flex;
    flex-direction: column;
    row-gap: var(--tp-space-4);
    padding-top: var(--tp-space-5);
    border-top: 1px solid var(--tp-color-line);
}

#tp-prezenty .tp-domkniecie__mikrocopy {
    --tp-domkniecie-mikrocopy-interlinia: 22px;
    line-height: var(--tp-domkniecie-mikrocopy-interlinia);
}

#tp-prezenty .tp-domkniecie__podpis {
    --tp-domkniecie-podpis-rozmiar: 17px;
    --tp-domkniecie-podpis-interlinia: 23px;
    font-family: var(--tp-font-display);
    font-size: var(--tp-domkniecie-podpis-rozmiar);
    font-weight: var(--tp-font-weight-bold);
    line-height: var(--tp-domkniecie-podpis-interlinia);
    letter-spacing: var(--tp-tracking-h3);
    text-transform: uppercase;
    color: var(--tp-color-accent);
}

/* PRÓG RYTMU TREŚCI 640 px. */
@media (min-width: 640px) {
    #tp-prezenty .tp-domkniecie__koniec {
        padding-top: 26px;
    }
}

/* PRÓG RZĘDU PODPISU H10: 970 px, ŚWIADOMIE RÓWNY PROGOWI NAGŁÓWKA SEKCJI (10.4), żeby H10 zmieniała
   układ jednym krokiem (jak H03 i H05 przy 740 px). Rząd mieści się od 681 px (narzedzia/pomiar-progow.mjs
   --komponenty domkniecie, metoda jak przy H06; kryteria: podpis marki najwyżej o 1 wiersz, mikrocopy
   najwyżej o 2 wiersze więcej; przy 680 px podpis w trzech wierszach; pomiar 15.09.2026). */
@media (min-width: 970px) {
    #tp-prezenty .tp-domkniecie__koniec {
        display: grid;
        grid-template-columns: minmax(0, 700fr) minmax(0, 420fr);
        align-items: start;
        column-gap: 80px;
    }
}

/* 20.4 Kotwica #tp-zapytanie (cel wezwań z H04 i H07) i każda inna sekcja
   z id. Belka desktopowa nie jest przyklejona (7.1), mobilna domyślnie też
   nie (K6), więc cel staje przy górnej krawędzi okna. Z przełącznikiem K6
   belka mobilna jest sticky i zasłoniłaby górę sekcji: sekcja zatrzymuje się
   56 px niżej (wysokość belki mobilnej, Paper 3MS-0, 7.6).
   PRÓG NAWIGACJI 1279 px: ta sama liczba co w 7.6, 8 i w skrypcie. */
@media (max-width: 1279px) {
    #tp-prezenty.tp-belka-przyklejona .tp-sekcja {
        --tp-kotwica-odstep: 56px;
        scroll-margin-top: var(--tp-kotwica-odstep);
    }
}


/* =====================================================================
   21. FORMULARZ DWUKROKOWY I PODZIĘKOWANIA (faza F5)
   Paper: 36S-0 i 46F-0 (krok 2 w pasie formularza H01, desktop i mobile),
   3KC-0 (stany odpowiedzi), 36U-0 i 46H-0 (podziękowanie do 20 butelek),
   36T-0 i 46G-0 (podziękowanie powyżej 20 butelek). Wartości z get_jsx
   i get_computed_styles, skrót tokenów d33c399a; numer węzła przy wartości.
   Stanów „wysyłanie” i „błąd” Paper nie rysuje: zbudowane z istniejących
   komponentów i tokenów (lista odstępstw w README-MAKIETA.md, F5).
   ===================================================================== */

/* 21.1 Status „Zapytanie wysłane”. Paper 3F8-0 i 4B5-0: rząd wyśrodkowany, odstęp 10;
   znak 3F9-0 16 na 16 (kwadrat --color-accent, ptaszek obrys 1.7 --color-on-accent);
   etykieta --font-display 12/16, 700, --tracking-label, wersaliki, --color-accent
   (czarna, nie czerwona: czerwień przy formularzu czyta się jak błąd, nota 22.8).
   Ten sam znak w 20 na 20 przy kroku 01 procesu (21.7). */
#tp-prezenty .tp-status {
    display: flex;
    align-items: center;
    column-gap: 10px;
    font-family: var(--tp-font-display);
    font-size: var(--tp-text-label);
    font-weight: var(--tp-font-weight-bold);
    line-height: var(--tp-interlinia-etykiety);
    letter-spacing: var(--tp-tracking-label);
    text-transform: uppercase;
    /*color: var(--tp-color-accent);*/
    color: var(--tp-color-green);
}

#tp-prezenty .tp-status__znak {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

#tp-prezenty .tp-status__tlo {
    fill: var(--tp-color-accent);
}

#tp-prezenty .tp-status__ptaszek {
    --tp-status-ptaszek-obrys: 1.7;
    fill: none;
    stroke: var(--tp-color-on-accent);
    stroke-width: var(--tp-status-ptaszek-obrys);
}

/* 21.2 Błąd pola (kontrakt walidacji, skrypt sekcja FORMULARZ). Komunikat w drugim rzędzie
   komórki pola (pole jest siatką z kontrolką i etykietą w 1 / 1), 8 px pod kontrolką,
   --font-sans 14/21, 700, --color-cta (kontrast 5,9:1 na --color-surface-cold, 5,1:1 na
   --color-surface). Kontrolka z aria-invalid="true" dostaje ramkę --color-cta. */
#tp-prezenty .tp-pole > .tp-pole__blad {
    grid-area: 2 / 1;
    margin-top: var(--tp-space-2);
    font-family: var(--tp-font-sans);
    font-size: var(--tp-text-small);
    font-weight: var(--tp-font-weight-bold);
    line-height: var(--tp-leading-small);
    color: var(--tp-color-cta);
}

#tp-prezenty .tp-pole__kontrolka[aria-invalid="true"] {
    border-color: var(--tp-color-cta);
}

/* 21.3 Błąd wysyłki (429, 500, przekroczony czas, odpowiedź niebędąca JSON-em, 422 bez listy
   pól znanych formularzowi). Kreska lewa 2 px --color-cta jak szybki kontakt --akcent (11.1),
   tło --color-bg, padding 12 / 16; tytuł jak etykieta szybkiego kontaktu (12/16, --color-cta),
   tekst 14/21 --color-text, adres zapasowy 700 --color-accent z podkreśleniem. */
#tp-prezenty .tp-stan-bledu {
    display: flex;
    flex-direction: column;
    row-gap: var(--tp-space-1);
    padding: var(--tp-space-3) var(--tp-space-4);
    border-left: 2px solid var(--tp-color-cta);
    background-color: var(--tp-color-bg);
}

#tp-prezenty .tp-stan-bledu__tytul {
    font-family: var(--tp-font-display);
    font-size: var(--tp-text-label);
    font-weight: var(--tp-font-weight-bold);
    line-height: var(--tp-interlinia-etykiety);
    letter-spacing: var(--tp-tracking-label);
    text-transform: uppercase;
    color: var(--tp-color-cta);
}

#tp-prezenty .tp-stan-bledu__tekst {
    font-family: var(--tp-font-sans);
    font-size: var(--tp-text-small);
    line-height: var(--tp-leading-small);
    color: var(--tp-color-text);
}

#tp-prezenty .tp-stan-bledu__adres {
    font-weight: var(--tp-font-weight-bold);
    color: var(--tp-color-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-position: from-font;
}

/* Wysyłanie: przycisk zostaje aktywny (fokus nie ucieka), etykietę podmienia skrypt,
   aria-disabled blokuje drugie wysłanie w skrypcie. */
#tp-prezenty .tp-przycisk[aria-disabled="true"] {
    cursor: progress;
}

/* Nagłówek kroku 2 dostaje fokus programowo (tabindex="-1"); nie jest kontrolką, więc bez obwódki. */
#tp-prezenty [tabindex="-1"]:focus {
    outline: none;
}

/* 21.4 Krok 2, układ mobilny. Paper 4B3-0: stos 32 (nagłówek, pytania, akcje); nagłówek 4B4-0
   odstęp 12 (status, wskaźnik nad tytułem z odstępem 8 jak w kroku 1: komponent 10.9, wstęp);
   wstęp 4BH-0: trzy zdania 16/27, każde od nowego wiersza, drugie 700 --color-accent;
   pytania 4BL-0 w pionie co 32; akcje 4DG-0: przycisk 56 nad pominięciem, odstęp 16.
   Pas tła i paddingi daje pas formularza H01 (11.2); w H10 krok 2 stoi na tonie sekcji,
   tak jak formularz kroku 1 (decyzja F5, README-MAKIETA.md). */
#tp-prezenty .tp-krok2 {
    display: flex;
    flex-direction: column;
    row-gap: var(--tp-space-6);
}

#tp-prezenty .tp-krok2__naglowek {
    display: flex;
    flex-direction: column;
    row-gap: var(--tp-space-3);
}

/* Rząd tytułu kroku 2: jak nagłówek formularza kroku 1 (10.9: wskaźnik nad tytułem, odstęp 8;
   desktop tytuł | wskaźnik do dołu, odstęp 60), ale przełączany progiem kroku 2 (1175 px), żeby
   cały krok 2 zmieniał układ jednym krokiem. Paper 4BA-0 (mobile) i 397-0 (desktop). */
#tp-prezenty .tp-krok2__tytul-rzad {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    row-gap: var(--tp-space-2);
}

#tp-prezenty .tp-krok2__wstep {
    display: flex;
    flex-direction: column;
}

#tp-prezenty .tp-krok2__wazne {
    font-weight: var(--tp-font-weight-bold);
    color: var(--tp-color-accent);
}

#tp-prezenty .tp-krok2__pytania {
    display: flex;
    flex-direction: column;
    row-gap: var(--tp-space-6);
}

/* Pytanie: fieldset z legendą. Legenda 3G3-0 i 4BN-0: rząd do linii bazowej, odstęp 12; numer
   w slocie 24 (--font-display 12/16, 700, --tracking-label, --color-cta), treść --font-sans
   16/27, 700, --color-accent; lista odpowiedzi 12 px niżej, odstęp 8. */
#tp-prezenty .tp-krok2__legenda {
    display: flex;
    align-items: baseline;
    column-gap: var(--tp-space-3);
    width: 100%;
    margin-bottom: var(--tp-space-3);
    font-family: var(--tp-font-sans);
    font-size: var(--tp-text-body);
    font-weight: var(--tp-font-weight-bold);
    line-height: var(--tp-leading-body);
    color: var(--tp-color-accent);
}

#tp-prezenty .tp-krok2__numer {
    flex: 0 0 24px;
    font-family: var(--tp-font-display);
    font-size: var(--tp-text-label);
    font-weight: var(--tp-font-weight-bold);
    line-height: var(--tp-interlinia-etykiety);
    letter-spacing: var(--tp-tracking-label);
    color: var(--tp-color-cta);
}

#tp-prezenty .tp-krok2__tresc-pytania {
    flex: 1 1 0%;
    min-width: 0;
}

#tp-prezenty .tp-krok2__odpowiedzi {
    display: flex;
    flex-direction: column;
    row-gap: var(--tp-space-2);
}

/* 21.5 Odpowiedź (jedenaście sztuk, jeden komponent). Paper 4BR-0 (mobile: min. 56, padding
   13 / 18, tekst zawija się) i 3KK-0 (desktop: 56, jeden wiersz): ramka 1 px --color-line, tło
   --color-bg, odstęp 12; znacznik 20 na 20 (okrąg, obrys 1.5 --color-text-dim, 3KL-0); tekst
   16/27 --color-text. Całe pole jest etykietą natywnego radio, więc klik w tekst zaznacza.
   Stany wg 3KC-0: najechanie ramka --color-text-dim; zaznaczony ramka, znacznik z kropką 10 px
   i tekst --color-accent; fokus klawiatury obwódka 2 px --color-accent w odstępie 2 px.
   Bez cienia i uniesienia (kanon: pole nie jest odnośnikiem). */
#tp-prezenty .tp-odpowiedz {
    display: flex;
    align-items: center;
    column-gap: var(--tp-space-3);
    min-height: 56px;
    padding: 13px 18px;
    border: 1px solid var(--tp-color-line);
    background-color: var(--tp-color-bg);
    cursor: pointer;
    font-family: var(--tp-font-sans);
    font-size: var(--tp-text-body);
    line-height: var(--tp-leading-body);
    color: var(--tp-color-text);
}

#tp-prezenty .tp-odpowiedz:hover {
    border-color: var(--tp-color-text-dim);
}

#tp-prezenty .tp-odpowiedz:has(.tp-odpowiedz__pole:checked) {
    border-color: var(--tp-color-accent);
    color: var(--tp-color-accent);
}

#tp-prezenty .tp-odpowiedz:has(.tp-odpowiedz__pole:focus-visible) {
    outline: 2px solid var(--tp-color-accent);
    outline-offset: 2px;
}

#tp-prezenty .tp-odpowiedz__tekst {
    flex: 1 1 0%;
    min-width: 0;
}

/* Znacznik: natywne radio bez wyglądu systemu. Obrys 1.5 px na pudełku 20 px daje okrąg
   o promieniu zewnętrznym 10 i wewnętrznym 8,5 jak r 9.25 z obrysem 1.5 w Paper; kropka
   zaznaczenia to tło --color-accent odsłonięte przez wewnętrzny cień 3,5 px w --color-bg
   (średnica 10, Paper 3LA-0 r 5). */
#tp-prezenty input.tp-odpowiedz__pole {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin: 0;
    border: 1.5px solid var(--tp-color-text-dim);
    border-radius: 50%;
    background-color: var(--tp-color-bg);
    appearance: none;
    cursor: pointer;
}

#tp-prezenty input.tp-odpowiedz__pole:checked {
    border-color: var(--tp-color-accent);
    background-color: var(--tp-color-accent);
    box-shadow: inset 0 0 0 3.5px var(--tp-color-bg);
}

/* Obwódka fokusu na całym polu (wyżej, :has); przeglądarki bez :has zostają przy obwódce
   samego znacznika. */
@supports selector(:has(*)) {
    #tp-prezenty input.tp-odpowiedz__pole:focus-visible {
        outline: none;
    }
}

/* Akcje. Przycisk: komponent 10.7 na pełną szerokość. Pominięcie 4DJ-0: przycisk tekstowy
   w celu dotykowym 44 px, --font-display 15/18, 700, --tracking-nav, wersaliki, --color-accent,
   podkreślenie 1 px pod tekstem, strzałka 16 na 12 (obrys 1.6) po odstępie 10; pod nim zdanie
   o skutku 14/21 --color-text-muted, odstęp 2. Czarne, nie czerwone i nie szare (nota 22.6). */
#tp-prezenty .tp-krok2__akcje {
    display: flex;
    flex-direction: column;
    row-gap: var(--tp-space-4);
}

#tp-prezenty .tp-krok2__wyslij {
    width: 100%;
}

#tp-prezenty .tp-krok2__pominiecie {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    row-gap: 2px;
}

#tp-prezenty .tp-krok2__pomin {
    display: inline-flex;
    align-items: center;
    column-gap: 10px;
    min-height: 44px;
    font-family: var(--tp-font-display);
    font-size: var(--tp-text-nav);
    font-weight: var(--tp-font-weight-bold);
    line-height: 18px;
    letter-spacing: var(--tp-tracking-nav);
    text-transform: uppercase;
    color: var(--tp-color-accent);
}

#tp-prezenty .tp-krok2__pomin-tekst {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-position: from-font;
}

#tp-prezenty .tp-krok2__strzalka {
    --tp-krok2-strzalka-obrys: 1.6;
    flex-shrink: 0;
    width: 16px;
    height: 12px;
    fill: none;
    stroke: var(--tp-color-accent);
    stroke-width: var(--tp-krok2-strzalka-obrys);
}

/* PRÓG UKŁADU KROKU 2: 1175 px. Mieści się od 1128 px (narzedzia/pomiar-progow.mjs --komponenty krok2:
   przemiecenie 1440 do 900 px co 10 px, potem co 1 px, próg podmieniony w CSSOM, krok 2 pokazany prawdziwą
   wysyłką przez atrapę; kryteria: bez pękniętych słów i przepełnień, odpowiedzi, zdania wstępu, pominięcie,
   zdanie o skutku, przycisk, wskaźnik i tytuł w jednym wierszu jak w Paper, treść pytań najwyżej o 1 wiersz
   więcej; przy 1127 px zdanie o skutku pominięcia w dwóch wierszach; pomiar 15.09.2026). Zapas 47 px.
   Świadomie INNA liczba niż próg siatki formularza kroku 1 (1150 px): wspólny próg dawał 22 px zapasu.
   Desktop 38A-0: wstęp 3IJ-0 w dwóch wierszach (zdanie 1, potem zdania 2 i 3 w rzędzie
   z odstępem 6); pytania 3FH-0 w siatce 2 x 2 (kolumny 576, odstęp kolumn 48, legenda
   i lista odpowiedzi w osobnych rzędach siatki, odstęp rzędów pytań 48, więc listy
   odpowiedzi w rzędzie startują na tej samej wysokości także przy legendzie dwuwierszowej:
   3JS-0 i 3K9-0 mają wspólne 54 px); akcje 38C-0: pominięcie z lewej i przycisk z prawej,
   każde w kolumnie 576, wyśrodkowane w pionie.
   FIELDSET W SIATCE: display: contents, bo w Blink fieldset tworzy anonimowe pudełko treści
   i subgrid przez nie nie przechodzi (eksperyment F5: listy odpowiedzi 66 kontra 93 px);
   z display: contents legenda i lista są elementami siatki, a drzewo dostępności zachowuje
   grupę z nazwą z legendy (Accessibility.getFullAXTree, Chrome). Na mobile fieldset zostaje
   blokiem. Reguły nth-child zakładają cztery pytania z Paper; piąte pytanie wymaga rzędów 5 i 6. */
@media (min-width: 1175px) {
    #tp-prezenty .tp-krok2__tytul-rzad {
        flex-direction: row-reverse;
        align-items: flex-end;
        justify-content: space-between;
        column-gap: 60px;
    }

    #tp-prezenty .tp-krok2__wstep {
        flex-direction: row;
        flex-wrap: wrap;
        column-gap: 6px;
    }

    #tp-prezenty .tp-krok2__wstep > :first-child {
        flex-basis: 100%;
    }

    #tp-prezenty .tp-krok2__pytania {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        column-gap: var(--tp-space-7);
        row-gap: 0;
    }

    #tp-prezenty .tp-krok2__pytanie {
        display: contents;
    }

    #tp-prezenty .tp-krok2__pytanie:nth-child(odd) > * {
        grid-column: 1;
    }

    #tp-prezenty .tp-krok2__pytanie:nth-child(even) > * {
        grid-column: 2;
    }

    #tp-prezenty .tp-krok2__pytanie:nth-child(-n+2) > .tp-krok2__legenda {
        grid-row: 1;
    }

    #tp-prezenty .tp-krok2__pytanie:nth-child(-n+2) > .tp-krok2__odpowiedzi {
        grid-row: 2;
        margin-bottom: var(--tp-space-7);
    }

    #tp-prezenty .tp-krok2__pytanie:nth-child(n+3) > .tp-krok2__legenda {
        grid-row: 3;
    }

    #tp-prezenty .tp-krok2__pytanie:nth-child(n+3) > .tp-krok2__odpowiedzi {
        grid-row: 4;
    }

    #tp-prezenty .tp-krok2__akcje {
        flex-direction: row-reverse;
        align-items: center;
        justify-content: space-between;
        column-gap: 21px;
    }

    #tp-prezenty .tp-krok2__akcje > * {
        width: calc((100% - var(--tp-space-7)) / 2);
    }

    #tp-prezenty .tp-krok2__pominiecie {
        row-gap: 6px;
    }

    #tp-prezenty .tp-krok2__pomin {
        min-height: 0;
    }
}

/* 21.6 Podziękowania: rząd 50/50 z H01 (11) bez formularza i pasa domykającego.
   Kolumna tekstu jak 11.1 (Paper 3EA-0 i 3B6-0: padding 44 / 72 / 40 / 120, odstęp 20;
   mobile 47F-0 i 48P-0: padding 32 / 20, odstęp 16); zdjęcie jak 11.3, na stronie do 20
   butelek punkt kadru 80% (3E7-0, 47U-0), na stronie powyżej 20 butelek 10% (3B3-0, 495-0).
   Przycisk do sklepu 3GB-0: 458 na 56 od progu rytmu treści, na mobile 335 (47N-0).
   Lead z luką terminu 3BC-0: odstęp 18 (mobile 48W-0: 12), luka o szerokości treści
   (mobile rozciągnięta na kolumnę). */
#tp-prezenty .tp-hero--sklep .tp-hero__kadr {
    --tp-kadr-punkt: 80% 50%;
}

#tp-prezenty .tp-podziekowanie__sklep {
    width: 100%;
}

#tp-prezenty .tp-podziekowanie__lead {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    row-gap: var(--tp-space-3);
}

#tp-prezenty .tp-podziekowanie__lead .tp-luka {
    width: auto;
}

/* PRÓG RYTMU TREŚCI 640 px. */
@media (min-width: 640px) {
    #tp-prezenty .tp-podziekowanie__sklep {
        align-self: flex-start;
        width: 458px;
        max-width: 100%;
    }

    #tp-prezenty .tp-podziekowanie__lead {
        align-items: flex-start;
        row-gap: 18px;
    }

    #tp-prezenty .tp-podziekowanie__lead .tp-luka {
        width: max-content;
    }
}

/* PRÓG UKŁADU 50/50 H01: 980 px (11). Bez rzędów formularza i pasa domykającego. */
@media (min-width: 980px) {
    #tp-prezenty .tp-hero--podziekowanie {
        grid-template-areas: "tekst kadr";
    }
}

/* 21.7 Znak potwierdzenia przy kroku 01 procesu na podziękowaniu powyżej 20 butelek.
   Paper 3GK-0 (desktop: rząd numer i znak 20 na 20, odstęp 12, wyśrodkowany) i 4AX-0 (mobile:
   slot 48, znak pod numerem, odstęp 6). Numer jak w 18.1. Znak z komponentu statusu (21.1). */
#tp-prezenty .tp-argument__liczba--zrobiony {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    row-gap: 6px;
}

#tp-prezenty .tp-znak-potwierdzenia {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

/* PRÓG OSI CZASU H08: 1020 px (18). */
@media (min-width: 1020px) {
    #tp-prezenty .tp-argument__liczba--zrobiony {
        flex-direction: row;
        align-items: center;
        column-gap: var(--tp-space-3);
    }
}