/* ===================================================
   PDU-CODE: Global Styles — Ploty Dobrý
   Soubor: pdu-code/eshop/global.css
   Verze: 1.1 | Datum: 2026-05-14 (rozšířená dokumentace)
   =================================================== */

/****
 ÚVODNÍ MAPA SEKCÍ (Ctrl+F na "SEKCE N." najde komentář k bloku)

 — SEKCE 1.  Brand CSS Variables (:root) — barvy, spacing, radius, fonty, stíny, durations
 — SEKCE 2.  Globální micro-animace (hover přechody na a/button)
 — SEKCE 3.  Prefers-reduced-motion (a11y — vypnutí animací)
 — SEKCE 4.  Graceful degradation (CSS Grid fallback pro staré browsery)
 — SEKCE 5.  Obrázky v gridech (CLS prevence)
 — SEKCE 6.  Per-typ typografické tokeny (idx, cat, pro, blo, pag — připraveno pro divergenci)

 Princip: VŠECHNY designové tokeny jsou ZDE. Sekční CSS soubory (style-pages.css,
 style-blog.css, etc.) tokeny POUZE konzumují přes var(--pdu-*). Změna brand
 barvy / spacing / radius = úprava v této souboru, automaticky se propagne.
 ****/


/* ╔══════════════════════════════════════════════════════════════
   🎨 SEKCE 1. BRAND CSS VARIABLES (:root)
   ──────────────────────────────────────────────────────────────
   Popis:
   - Centrální definice všech designových tokenů (single source of truth)
   - Pravidlo: NIKDY nepsat hex/px/rem hodnoty v sekčních CSS — vždy var()
   - Tokeny jsou skupinami:
     a) Primární brand barvy (logo, identita)
     b) Odvozené tóny (světlejší/tmavší varianty)
     c) Akcentní barvy (zelená, žlutá s variantami)
     d) Sociální / speciální (FB, ocelová modrá, Cofidis)
     e) Spacing systém (xs/s/m/l/xl)
     f) Border-radius (s/m/l/card/xl)
     g) Fonty (zakladni/nadpisy/mono) + velikosti (xs..xl)
     h) Přechody (rychly/stredni/pomaly + duration only)
     i) Rozšíření 2026-05-13 — text/pozadi/okraje/stíny pro HP rozcestník
   ══════════════════════════════════════════════════════════════ */
:root {
  /* ── Primární brand barvy ─────────────────────────────────── */
  --pdu-barva-tmavomodra:    #191932;   /* CMYK 100/96/22/76 — tmavá modrofialová (logo, texty, tmavá pozadí) */
  --pdu-barva-zelena-brand:   #00a664;   /* CMYK 100/0/85/0   — zelená loga (brand identita) */
  --pdu-barva-zelena-btn:    #4CAF50;   /* Zelená tlačítek a navigace (interaktivní prvky) */
  --pdu-barva-zluta:         #FFFF00;   /* CMYK 0/0/100/0    — čistá žlutá (akcenty, upozornění) */

  /* ── Odvozené tóny ────────────────────────────────────────── */
  --pdu-barva-zelena-svetla:  #E6FFD1;  /* Světle zelená pozadí rámečků */
  --pdu-barva-sede-svetla:    #F5F5F5;  /* Neutrální světlé pozadí */
  --pdu-barva-sede-stredni:   #CCCCCC;  /* Rámečky, oddělovače */
  --pdu-barva-bila:           #FFFFFF;
  --pdu-barva-tekst-zakladni: #333333;  /* Základní barva textu */

  /* ── Zelená akcent — dominantní zelená webu ───────────────── */
  /* Borders, FAQ, nadpisy, aktivní prvky. Extrahováno z legacy — 8× výskyt, schváleno. */
  --pdu-barva-zelena-akcent:       #00B46E;

  /* ── Žlutá — 3 varianty pro různé kontexty ────────────────── */
  --pdu-barva-zluta:               #FFFF00; /* Čistá žlutá (CMYK 0/0/100/0) — výrazné akcenty */
  --pdu-barva-zluta-warm:          #F3C446; /* Warm žlutá — animace, jemnější akcenty */
  --pdu-barva-zluta-svetla:        #FFFEEC; /* Světle žluté pozadí rámečků (paralela --pdu-barva-zelena-svetla) */

  /* ── Hover varianty ───────────────────────────────────────── */
  --pdu-barva-zelena-btn-hover:    #388E3C; /* Tmavší zelená (btn) pro hover */
  --pdu-barva-zelena-akcent-hover: #009458; /* Tmavší akcent zelená pro hover */

  /* ── Sociální / speciální ─────────────────────────────────── */
  --pdu-barva-facebook:            #3c63ab; /* Facebook brand modrá — jen pro FB tlačítka */
  --pdu-barva-ocelova-modra:       #2e445a; /* CTA "výroba na míru" v kategorii Brány a branky */
  --pdu-barva-cervena-alert:       #E63C24; /* Upozornění v produktových popisech (3+ výskyty na branových podkategoriích) */
  --pdu-barva-cofidis-zluta:       #FECB00; /* Výhradně pro splátkový prodej Cofidis CTA (Batch 11: /cena-dopravy/, /splatkovy-prodej/) */

  /* ── Spacing systém (5 stupňů) ────────────────────────────── */
  /* Použití: padding: var(--pdu-odsazeni-s) var(--pdu-odsazeni-m); */
  --pdu-odsazeni-xs:  0.3125em;
  --pdu-odsazeni-s:   0.625em;
  --pdu-odsazeni-m:   1.25em;
  --pdu-odsazeni-l:   1.875em;
  --pdu-odsazeni-xl:  3.125em;

  /* ── Border-radius (3 stupně + rozšíření) ─────────────────── */
  --pdu-radius-s:  0.1875em;     /* Drobné akcenty (popisové pill labely) */
  --pdu-radius-m:  0.375em;     /* Tlačítka, tagy */
  --pdu-radius-l:  0.75em;    /* Větší karty, formuláře */

  /* ── Fonty — preferujeme inherit (z Shoptet šablony) ──────── */
  --pdu-font-zakladni:   inherit;           /* Shoptet šablona — nepřepisovat, dědí globální font */
  --pdu-font-nadpisy:    inherit;           /* Nadpisy — sjednotit zde při změně fontu */
  --pdu-font-mono:       monospace;         /* Kód, technické hodnoty */

  /* ── Typografie — velikosti (5 stupňů, rem-based) ─────────── */
  --pdu-font-size-xs:    0.75em;           /* ~0.75em — poznámky, popisky */
  --pdu-font-size-s:     0.85em;           /* ~0.875em — vedlejší text, tabulky */
  --pdu-font-size-m:     1em;              /* ~1em — základní text */
  --pdu-font-size-l:     1.25em;           /* ~1.25em — perex, zvýraznění */
  --pdu-font-size-xl:    1.5em;            /* ~1.5em — H2 nadpisy */

  /* ── Přechody — 2 typy (full shorthand vs. duration only) ─── */
  /* Full shorthand — použít na obecné a/button (transition: var(--pdu-prechod-rychly)) */
  --pdu-prechod-rychly:  all 0.15s ease;
  --pdu-prechod-stredni: all 0.25s ease;
  --pdu-prechod-pomaly:  all 0.4s ease;

  /* Duration only — pro single-property animace (transition: transform var(--pdu-prechod-dur-stredni) ease) */
  --pdu-prechod-dur-rychly:   0.15s;
  --pdu-prechod-dur-stredni:  0.25s;
  --pdu-prechod-dur-pomaly:   0.4s;

  /* ════════ ROZŠÍŘENÍ 2026-05-13 (HP rozcestník) ════════ */

  /* ── Sekundární text (2 úrovně tlumenosti) ────────────────── */
  --pdu-barva-text-sekundarni:    #5B5B6E;   /* tlumený text — popisky, mission, span v kartách */
  --pdu-barva-text-sedy:          #666666;   /* nejtlumenější — final disclaimer, stat-desc */

  /* ── Pozadí — varianty (doplnění k zelena-svetla #E6FFD1) ── */
  --pdu-barva-pozadi-foto:        #F8F8F8;   /* placeholder pod product image */
  --pdu-barva-zelena-svetla-2:    #F5FAF5;   /* CTA bg (tel/mail blok) */
  --pdu-barva-zelena-svetla-3:    #E8F8F0;   /* kruh za emoji ikonou (publikum) */

  /* ── Okraje (3 odstíny šedi pro různý vizuální kontrast) ── */
  --pdu-barva-okraj-jemny:        #E0E0E0;   /* karty, kontakt blok, staty */
  --pdu-barva-okraj-svetly:       #F0F0F0;   /* vnitřní separator v kartě */
  --pdu-barva-okraj-zeleny-jemny: #E0ECE0;   /* okraj kolem zelených CTA bloků */

  /* ── Žlutá CTA — třetí varianta žluté ────────────────────── */
  /* Mezi #FFFF00 (čistá) a #F3C446 (warm). Použito: "Spočítat plot zdarma", "Chci nabídku" */
  --pdu-barva-zluta-cta:          #F4E732;

  /* ── Rozšíření radius (mezi -m=6 a -l=12) ────────────────── */
  --pdu-radius-card:              0.625em;      /* karty (staty, kroky, ref-karta, koho-item) */
  --pdu-radius-xl:                0.875em;      /* mid CTA, kontakt blok, hero-pletivo, procnas */

  /* ── Stíny — 4 vrstvy hloubky ─────────────────────────────── */
  /* Použití progressively: jemny (default karta) → stredni (focus karta) → vyrazny (hover) → karta-hover (carousel) */
  --pdu-stin-jemny:               0 0.25em 0.625em rgba(0,0,0,.04);
  --pdu-stin-stredni:             0 0.375em 1.25em rgba(0,0,0,.06);
  --pdu-stin-vyrazny:             0 0.625em 1.5625em rgba(0,0,0,.12);
  --pdu-stin-karta-hover:         0 0.625em 1.875em rgba(0,0,0,.12);

  /* ── Glossy button gradienty — 2 vrstvy pro 3D feel ─────── */
  /* Použití: background-image: var(--pdu-grad-btn-corner), var(--pdu-grad-btn-glossy); */
  /* + background-color: <brand-barva>; (drží base color pod gradienty) */

  /* Default (střední tóny — zelená, modrá): white top highlight + dark bottom shadow */
  --pdu-grad-btn-glossy:        linear-gradient(180deg, rgba(255,255,255,.18) 0%, transparent 45%, rgba(0,0,0,.12) 100%);
  --pdu-grad-btn-corner:        radial-gradient(60% 90% at 100% 0%, rgba(255,255,255,.22), transparent 60%);

  /* Light (světlé tóny — žlutá): jen top white highlight, BEZ bottom dark.
     Bottom dark i při .06 tvořil viditelný "černý rámeček" u spodního okraje
     žluté (user feedback 2026-05-22). Bez bottom dark vypadá čistě. */
  --pdu-grad-btn-glossy-light:  linear-gradient(180deg, rgba(255,255,255,.25) 0%, transparent 60%);
  --pdu-grad-btn-corner-light:  radial-gradient(60% 90% at 100% 0%, rgba(255,255,255,.35), transparent 60%);

  /* Dark (tmavé tóny — tmavomodrá): slabší highlight + silnější bottom shadow */
  --pdu-grad-btn-glossy-dark:   linear-gradient(180deg, rgba(255,255,255,.12) 0%, transparent 50%, rgba(0,0,0,.20) 100%);
  --pdu-grad-btn-corner-dark:   radial-gradient(60% 90% at 100% 0%, rgba(255,255,255,.16), transparent 60%);

  /* Hover stav (bílé bg, brand inverze): subtilní dark corner + bottom shadow.
     POZN.: corner použít DARK (rgba 0,0,0,.04) ne brand zelenou — zelený tint
     na bílém pozadí vypadal "off-brand divně" (user feedback 2026-05-22). */
  --pdu-grad-btn-hover-corner:  radial-gradient(60% 90% at 100% 0%, rgba(0,0,0,.04), transparent 60%);
  --pdu-grad-btn-hover-glossy:  linear-gradient(180deg, transparent 50%, rgba(0,0,0,.05) 100%);

  /* ── Globální font-size bump pro EM design system ────────── */
  /* Aplikuje se na root wrappery (.pdu-pag-page; pro cat/blog/pro doplnit
     manuálně pokud root wrapper class existuje). Default 1.0625em = bump z
     ~16px (Shoptet body) na ~17px → všechny vnitřní em hodnoty se škálují
     proporčně o ~6 %. Pro větší bump: 1.125em (~18px) nebo 1.1875em (~19px). */
  --pdu-base-font-size: 1.0625em;
}


/* ╔══════════════════════════════════════════════════════════════
   ✨ SEKCE 2. GLOBÁLNÍ MICRO-ANIMACE (hover přechody)
   ──────────────────────────────────────────────────────────────
   Popis:
   - Default transition pro VŠECHNA tlačítka a odkazy (rychlý 0.15s)
   - Shoptet base nemá — přidáno pro pocit "kvalitního" hover feedbacku
   - Sekční CSS to může lokálně přebít delším přechodem (např. karty 0.25s)
   ══════════════════════════════════════════════════════════════ */
a,
button,
input[type="submit"],
input[type="button"] {
  transition: var(--pdu-prechod-rychly);
}


/* ╔══════════════════════════════════════════════════════════════
   ♿ SEKCE 3. PREFERS-REDUCED-MOTION (a11y baseline)
   ──────────────────────────────────────────────────────────────
   Popis:
   - Vypne VŠECHNY animace/transitions globálně pro uživatele
     s OS preferencí "Reduce motion" (Mac System Settings, Win Settings)
   - Wildcard * + ::before + ::after — pokrývá vše
   - Sekční CSS by mělo doplnit specific overrides (např. .pdu-pag-dot animation: none)
   ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ╔══════════════════════════════════════════════════════════════
   🔧 SEKCE 4. GRACEFUL DEGRADATION (CSS Grid fallback)
   ──────────────────────────────────────────────────────────────
   Popis:
   - Fallback pro prohlížeče bez CSS Grid podpory (velmi staré Android Chrome <57)
   - Default: každé dítě .pdu-sec-grid = block, full width, margin-bottom M
   - Moderní browsery s Grid: @supports vrací zpět grid chování
   - Selector .pdu-sec-grid se v praxi používá pro semantic grid wrappers
   ══════════════════════════════════════════════════════════════ */
.pdu-sec-grid > * {
  display: block;
  width: 100%;
  margin-bottom: var(--pdu-odsazeni-m);
}

@supports (display: grid) {
  .pdu-sec-grid > * {
    display: revert;
    width: revert;
    margin-bottom: revert;
  }
}


/* ╔══════════════════════════════════════════════════════════════
   🖼️ SEKCE 5. OBRÁZKY V GRIDECH (CLS prevence)
   ──────────────────────────────────────────────────────────────
   Popis:
   - Defaultně všechny <img> v .pdu-sec-grid = full-width, auto-height
   - object-fit: cover = zachová poměr, ořízne podle potřeby
   - V HTML vždy přidat: loading="lazy" + width + height atributy
     (pro Layout Shift prevence — známe rozměry před načtením)
   ══════════════════════════════════════════════════════════════ */
.pdu-sec-grid img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}


/* ╔══════════════════════════════════════════════════════════════
   ✍️ SEKCE 6. PER-TYP TYPOGRAFICKÉ TOKENY (5 page-types)
   ──────────────────────────────────────────────────────────────
   Popis:
   - Každý page-type (idx/cat/pro/blo/pag) má vlastní stupnici nadpisů a body textu
   - Aktuálně mají VŠECHNY stejné hodnoty (parity s Shoptet base z main-11.less, 2026-04-29 crawl)
   - Infrastruktura je READY pro budoucí divergenci (např. blog větší H1, pro kompaktnější)
   - Weight 700 default — brand-driven (Shoptet base má 400, ale Šimon vždy obaluje <strong>
     v WYSIWYG patternu — proto výchozí 700, aby se nemusel přidávat ručně)
   - Použití v sekčních CSS: var(--pdu-pag-fs-h1), var(--pdu-blo-barva-link-hover) atd.
   - Page-types:
     • PDU-IDX = type-index (homepage)
     • PDU-CAT = type-category (kategorie produktů)
     • PDU-PRO = type-product / type-detail (detail produktu)
     • PDU-BLO = type-post (blog článek)
     • PDU-PAG = type-page (info stránka — kontakty, doprava, splátky, /realizace-montaze/...)
   ══════════════════════════════════════════════════════════════ */
:root {
  /* ===== PDU-IDX (homepage) — type-index ===== */
  --pdu-idx-fs-h1: 1.625em;       --pdu-idx-fw-h1: 700;
  --pdu-idx-fs-h2: 1.25em;       --pdu-idx-fw-h2: 700;
  --pdu-idx-fs-h3: 1.125em;       --pdu-idx-fw-h3: 700;
  --pdu-idx-fs-h4: 1em;       --pdu-idx-fw-h4: 700;
  --pdu-idx-lh-h1: 1.4;        --pdu-idx-mt-h1: .67em;   --pdu-idx-mb-h1: .67em;
  --pdu-idx-lh-h2: 1.4;
  --pdu-idx-lh-h3: 1.4;
  --pdu-idx-lh-h4: 1.1;
  --pdu-idx-fs-text-l:  1em;  --pdu-idx-fs-text-m:  0.875em;
  --pdu-idx-fs-text-s:  0.8125em;  --pdu-idx-fs-text-xs: 0.75em;
  --pdu-idx-barva-nadpis:     var(--pdu-barva-tmavomodra);
  --pdu-idx-barva-text:       var(--pdu-barva-tekst-zakladni);
  --pdu-idx-barva-akcent:     var(--pdu-barva-zelena-akcent);
  --pdu-idx-barva-link:       var(--pdu-barva-zelena-akcent);
  --pdu-idx-barva-link-hover: var(--pdu-barva-zelena-akcent-hover);

  /* ===== PDU-CAT (kategorie) — type-category ===== */
  --pdu-cat-fs-h1: 1.625em;       --pdu-cat-fw-h1: 700;
  --pdu-cat-fs-h2: 1.25em;       --pdu-cat-fw-h2: 700;
  --pdu-cat-fs-h3: 1.125em;       --pdu-cat-fw-h3: 700;
  --pdu-cat-fs-h4: 1em;       --pdu-cat-fw-h4: 700;
  --pdu-cat-lh-h1: 1.4;        --pdu-cat-mt-h1: .67em;   --pdu-cat-mb-h1: .67em;
  --pdu-cat-lh-h2: 1.4;
  --pdu-cat-lh-h3: 1.4;
  --pdu-cat-lh-h4: 1.1;
  --pdu-cat-fs-text-l:  1.0625em;  --pdu-cat-fs-text-m:  1em;
  --pdu-cat-fs-text-s:  0.9375em;  --pdu-cat-fs-text-xs: 0.875em;
  --pdu-cat-barva-nadpis:     var(--pdu-barva-tmavomodra);
  --pdu-cat-barva-text:       var(--pdu-barva-tekst-zakladni);
  --pdu-cat-barva-akcent:     var(--pdu-barva-zelena-akcent);
  --pdu-cat-barva-link:       var(--pdu-barva-zelena-akcent);
  --pdu-cat-barva-link-hover: var(--pdu-barva-zelena-akcent-hover);

  /* ===== PDU-PRO (produkt) — type-product / type-detail ===== */
  --pdu-pro-fs-h1: 1.625em;       --pdu-pro-fw-h1: 700;
  --pdu-pro-fs-h2: 1.25em;       --pdu-pro-fw-h2: 700;
  --pdu-pro-fs-h3: 1.125em;       --pdu-pro-fw-h3: 700;
  --pdu-pro-fs-h4: 1em;       --pdu-pro-fw-h4: 700;
  --pdu-pro-lh-h1: 1.4;        --pdu-pro-mt-h1: .67em;   --pdu-pro-mb-h1: .67em;
  --pdu-pro-lh-h2: 1.4;
  --pdu-pro-lh-h3: 1.4;
  --pdu-pro-lh-h4: 1.1;
  --pdu-pro-fs-text-l:  1em;  --pdu-pro-fs-text-m:  0.875em;
  --pdu-pro-fs-text-s:  0.8125em;  --pdu-pro-fs-text-xs: 0.75em;
  --pdu-pro-barva-nadpis:     var(--pdu-barva-tmavomodra);
  --pdu-pro-barva-text:       var(--pdu-barva-tekst-zakladni);
  --pdu-pro-barva-akcent:     var(--pdu-barva-zelena-akcent);
  --pdu-pro-barva-link:       var(--pdu-barva-zelena-akcent);
  --pdu-pro-barva-link-hover: var(--pdu-barva-zelena-akcent-hover);

  /* ===== PDU-BLO (blog) — type-post ===== */
  --pdu-blo-fs-h1: 1.625em;       --pdu-blo-fw-h1: 700;
  --pdu-blo-fs-h2: 1.25em;       --pdu-blo-fw-h2: 700;
  --pdu-blo-fs-h3: 1.125em;       --pdu-blo-fw-h3: 700;
  --pdu-blo-fs-h4: 1em;       --pdu-blo-fw-h4: 700;
  --pdu-blo-lh-h1: 1.4;        --pdu-blo-mt-h1: .67em;   --pdu-blo-mb-h1: .67em;
  --pdu-blo-lh-h2: 1.4;
  --pdu-blo-lh-h3: 1.4;
  --pdu-blo-lh-h4: 1.1;
  --pdu-blo-fs-text-l:  1em;  --pdu-blo-fs-text-m:  0.875em;
  --pdu-blo-fs-text-s:  0.8125em;  --pdu-blo-fs-text-xs: 0.75em;
  --pdu-blo-barva-nadpis:     var(--pdu-barva-tmavomodra);
  --pdu-blo-barva-text:       var(--pdu-barva-tekst-zakladni);
  --pdu-blo-barva-akcent:     var(--pdu-barva-zelena-akcent);
  --pdu-blo-barva-link:       var(--pdu-barva-zelena-akcent);
  --pdu-blo-barva-link-hover: var(--pdu-barva-zelena-akcent-hover);

  /* ===== PDU-PAG (info-stránka) — type-page ===== */
  --pdu-pag-fs-h1: 1.625em;       --pdu-pag-fw-h1: 700;
  --pdu-pag-fs-h2: 1.25em;       --pdu-pag-fw-h2: 700;
  --pdu-pag-fs-h3: 1.125em;       --pdu-pag-fw-h3: 700;
  --pdu-pag-fs-h4: 1em;       --pdu-pag-fw-h4: 700;
  --pdu-pag-lh-h1: 1.4;        --pdu-pag-mt-h1: .67em;   --pdu-pag-mb-h1: .67em;
  --pdu-pag-lh-h2: 1.4;
  --pdu-pag-lh-h3: 1.4;
  --pdu-pag-lh-h4: 1.1;
  --pdu-pag-fs-text-l:  1em;  --pdu-pag-fs-text-m:  0.875em;
  --pdu-pag-fs-text-s:  0.8125em;  --pdu-pag-fs-text-xs: 0.75em;
  --pdu-pag-barva-nadpis:     var(--pdu-barva-tmavomodra);
  --pdu-pag-barva-text:       var(--pdu-barva-tekst-zakladni);
  --pdu-pag-barva-akcent:     var(--pdu-barva-zelena-akcent);
  --pdu-pag-barva-link:       var(--pdu-barva-zelena-akcent);
  --pdu-pag-barva-link-hover: var(--pdu-barva-zelena-akcent-hover);
}


/* ╔══════════════════════════════════════════════════════════════
   📱 SEKCE 7. MOBILE-FIRST FOUNDATION (M2 — 2026-05-15)
   ──────────────────────────────────────────────────────────────
   Popis:
   - Globální touch/tap optimalizace pro všechny interaktivní prvky
   - Fluid typography clamp() tokens (h1/h2/body)
   - iOS no-zoom guard (input font-size 1em minimum)
   - Centrální breakpoint matrix (custom properties pro JS reads)
   - Mobile spacing tokeny

   Principy:
   - Mobile-first: defaults pro phone (23.4375em), enlarge na ≥600/768/992/1200
   - Touch targets: minimum 44×44 px (Apple HIG) / 48×48 (Material) pro buttons
   - Reduce CLS: explicit width+height atributy na <img>
   - iOS Safari: input/select/textarea ≥1em font-size aby nezoomovalo
   ══════════════════════════════════════════════════════════════ */
:root {
  /* Breakpoint reference (CSS custom property exposed pro JS reads) */
  --pdu-bp-phone:        37.4375em;    /* iPhone SE 375, malé Androidy */
  --pdu-bp-tablet-phone: 37.5em;    /* Tablet phone hranice */
  --pdu-bp-tablet:       48em;    /* iPad portrait, malé tablety */
  --pdu-bp-desktop:      62em;    /* Notebook, malé desktopy */
  --pdu-bp-wide:         75em;   /* Full screen desktops */

  /* Fluid typography — clamp(min, viewport-relative, max) */
  --pdu-fluid-h1:    clamp(1.6em, 4vw, 2.2em);
  --pdu-fluid-h2:    clamp(1.3em, 3vw, 1.7em);
  --pdu-fluid-h3:    clamp(1.15em, 2.5vw, 1.4em);
  --pdu-fluid-body:  clamp(0.9375em, 2.5vw, 1.0625em);
  --pdu-fluid-lead:  clamp(1em, 2.5vw, 1.15em);

  /* Mobile-first spacing (auto-scale s viewport) */
  --pdu-fluid-section-pad:  clamp(1.25em, 5vw, 3em);
  --pdu-fluid-card-pad:     clamp(0.875em, 3vw, 1.5em);

  /* Touch UX */
  --pdu-touch-min:           2.75em;  /* Apple HIG minimum */
  --pdu-touch-comfortable:   3em;  /* Material Design */
  --pdu-touch-highlight:     rgba(0, 180, 110, .2);  /* zelený tap feedback */
}

/* Tap highlight + touch action (global) */
html {
  -webkit-tap-highlight-color: var(--pdu-touch-highlight);
}
a, button, [role="button"], .pdu-pag-btn-primary, .pdu-pag-btn-cta, .pdu-pag-btn-ghost, .pdu-pag-btn-outline {
  touch-action: manipulation;  /* odstraňí 300ms tap delay na mobile */
}

/* iOS no-zoom: inputy ≥1em aby Safari nezoomovalo při focus */
input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="search"], input[type="password"],
input[type="url"], textarea, select {
  font-size: 1em;  /* iOS limit — nižší zoom-in při focus */
}
@media (min-width: 62em) {
  /* Na desktop můžeme menší font (no zoom risk) */
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], input[type="search"], input[type="password"],
  input[type="url"], textarea, select {
    font-size: 0.9375em;
  }
}

/* Reduce-motion rozšíření — auto-pause carousels + animations (sekce 3 doplnění) */
@media (prefers-reduced-motion: reduce) {
  .pdu-pag-carousel { scroll-behavior: auto !important; }
  .pdu-pag-pruh-zluty-anim { animation: none !important; }
}


/* ╔══════════════════════════════════════════════════════════════
   📲 SEKCE 8. STICKY MOBILE CTA BAR (M3 návrh — 2026-05-15)
   ──────────────────────────────────────────────────────────────
   Popis:
   - Fixed bottom bar na mobile pod <48em, hidden na desktop
   - 2 tlačítka equal-width: "Zavolat" (modré) + "Nezávazně poptat" (žluté CTA)
   - z-index 100 — nad obsahem, pod Smartsupp chat (Smartsupp má 999999)
   - safe-area-inset-bottom — respekt iPhone notch / home indicator
   - Hide na page-types kde nedává smysl: kosik, objednavka, prihlaseni
   - Toggle přes .pdu-mobile-cta-hidden class (např. po scrollu nahoru)

   Pozn.: HTML markup vkládá foot.js sekce 14 (REHEBO) přes JS injection
     po DOMContentLoaded — aby fungovalo i v Shoptet WYSIWYG bez admin
     zásahu do šablony.

   HTML:
     <aside class="pdu-mobile-cta" aria-label="Rychlé akce">
       <a class="pdu-mobile-cta-btn pdu-mobile-cta-call" href="tel:+420377223120">
         <span class="pdu-mobile-cta-ico">📞</span>
         <span>Zavolat</span>
       </a>
       <a class="pdu-mobile-cta-btn pdu-mobile-cta-quote" href="#poptavka">
         <span class="pdu-mobile-cta-ico">✉</span>
         <span>Nezávazně poptat</span>
       </a>
     </aside>
   ══════════════════════════════════════════════════════════════ */
.pdu-mobile-cta {
  display: none;  /* default hidden, show jen v media query */
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 100;
  padding: 0.5em 0.625em calc(0.5em + env(safe-area-inset-bottom, 0px));
  background: var(--pdu-barva-bila);
  box-shadow: 0 -0.25em 1em rgba(0, 0, 0, .15);
  border-top: 1px solid var(--pdu-barva-okraj-jemny);
  gap: 0.5em;
}
@media (max-width: 47.9375em) {
  .pdu-mobile-cta { display: flex; }
  /* Bottom padding na body aby content nebyl skrytý za CTA barem */
  body:not(.in-kosik):not(.in-objednavka):not(.in-prihlaseni) {
    padding-bottom: calc(4em + env(safe-area-inset-bottom, 0px));
  }
}

/* Skrýt na košíku / checkoutu / login (přes Shoptet body class scope) */
body.type-cart .pdu-mobile-cta,
body.in-kosik .pdu-mobile-cta,
body.in-objednavka .pdu-mobile-cta,
body.in-prihlaseni .pdu-mobile-cta,
body.in-dekujeme .pdu-mobile-cta {
  display: none !important;
}

/* Tlačítka equal-width, minimum 3em height (Material) */
.pdu-mobile-cta-btn {
  flex: 1 1 0;
  min-height: 3em;
  display: flex; align-items: center; justify-content: center; gap: 0.375em;
  padding: 0.625em 0.875em;
  border-radius: var(--pdu-radius-m);
  font-size: .95em; font-weight: 700;
  text-decoration: none !important;
  text-align: center; line-height: 1.2;
  transition: opacity var(--pdu-prechod-dur-stredni) ease;
}
.pdu-mobile-cta-btn:active { opacity: .8; }

.pdu-mobile-cta-call {
  background: var(--pdu-barva-tmavomodra);
  color: var(--pdu-barva-bila) !important;
}
.pdu-mobile-cta-quote {
  background: var(--pdu-barva-zluta-cta);
  color: var(--pdu-barva-tmavomodra) !important;
  font-weight: 800;
}

.pdu-mobile-cta-ico {
  font-size: 1.1em;
  line-height: 1;
}

/* Optional: auto-hide on scroll-down, show on scroll-up (toggle via JS class) */
.pdu-mobile-cta.is-hidden {
  transform: translateY(100%);
  transition: transform var(--pdu-prechod-dur-stredni) ease;
}

/* ═══ Megamenu animované ikony (2026-06-10) ═══
   Páruje se s inlinerem ve foot.js (img → <svg class="pdu-mm-ico is-NAME">,
   rodič <a> dostane .pdu-mm-link). Hover trigger je DOM-agnostic přes .pdu-mm-link. */
/* gating: jen desktop (≥62em) — na mobilu menu ikony nejsou, nic se nesmí aplikovat */
@media (min-width: 62em) {
  .pdu-mm-ico { width: 2.6em; height: 2.6em; color: inherit; overflow: visible; vertical-align: middle; flex: none; transform-box: fill-box; transform-origin: center; }
  /* ikona vycentrovaná ve „menu-image" boxu (scoped na naše položky) → bez díry k textu */
  .pdu-mm-link a.menu-image { display: flex; align-items: center; justify-content: center; }
  .pdu-mm-ico path, .pdu-mm-ico rect, .pdu-mm-ico circle, .pdu-mm-ico line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .pdu-mm-ico [class] { transform-box: fill-box; transform-origin: center; }
  .pdu-mm-link:hover .pdu-mm-ico.is-hodnoceni-reference { animation: pduMmTwinkle .6s ease; }
  .pdu-mm-link:hover .pdu-mm-ico.is-kalkulator-oploceni { animation: pduMmPop .5s ease; }
  .pdu-mm-link:hover .pdu-mm-ico.is-fotogalerie-realizaci { animation: pduMmSnap .45s ease; }
  .pdu-mm-link:hover .pdu-mm-ico.is-nejcastejsi-dotazy { animation: pduMmWig .6s ease; }
  .pdu-mm-link:hover .pdu-mm-ico.is-vyber-vhodneho-plotu { animation: pduMmPop .5s ease; }
  .pdu-mm-link:hover .pdu-mm-ico.is-kolik-stoji-plot { animation: pduMmBob .55s ease; }
  .pdu-mm-link:hover .pdu-mm-ico.is-produktova-videa { animation: pduMmPop .5s ease; }
  .pdu-mm-link:hover .pdu-mm-ico.is-blog { animation: pduMmLift .5s ease; }
  /* hover kdekoliv na položce (ikona i text) → zezelenat obojí (li:hover pokrývá obě části) */
  .pdu-mm-link:hover .pdu-mm-ico { color: var(--pdu-barva-zelena-akcent); }
  .pdu-mm-link:hover a, .pdu-mm-link:hover span { color: var(--pdu-barva-zelena-akcent) !important; }
}
@keyframes pduMmTwinkle { 0% { transform: rotate(0) scale(1); } 45% { transform: rotate(20deg) scale(1.2); } 100% { transform: rotate(0) scale(1); } }
@keyframes pduMmPop { 0% { transform: scale(1); } 45% { transform: scale(1.2); } 100% { transform: scale(1); } }
@keyframes pduMmSnap { 0% { transform: scale(1); } 30% { transform: scale(.9); } 55% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes pduMmWig { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 60% { transform: rotate(10deg); } }
@keyframes pduMmBob { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-4px); } }
@keyframes pduMmLift { 0% { transform: translateY(0) rotate(0); } 45% { transform: translateY(-3px) rotate(-4deg); } 100% { transform: translateY(0) rotate(0); } }
@media (min-width: 62em) and (prefers-reduced-motion: reduce) { .pdu-mm-ico { animation: none !important; } }


/* ╔══════════════════════════════════════════════════════════════
   🔍 SEKCE 9. LIŠTA HLEDÁNÍ — žlutá CTA „HLEDAT" (FOUC fix, 2026-06-26)
   ──────────────────────────────────────────────────────────────
   Popis:
   - Tlačítko HLEDAT zde v render-blocking CSS → žluté UŽ při prvním
     paintu. Bez toho bylo obarvení jen ve foot.js §16 (defer JS),
     který běží po prvním paintu → flash navy→žlutá při F5 (FOUC).
   - foot.js §16 stejné pravidlo dál injektuje (identická hodnota) →
     tato sekce = render-blocking baseline, JS pak no-op duplikát.
   - Hodnoty 1:1 s foot.js §16 (rev 30). Tokeny ze SEKCE 1.
   - POZN.: NEpřesouvat sem chipy / .luigi-ac-* z foot.js §16 — ty cílí
     na JS-vytvářené prvky dropdownu (při paintu neexistují, neflashují).
   ══════════════════════════════════════════════════════════════ */
#formSearchForm button[data-testid="searchBtn"],
#formSearchForm .btn-search {
  background-color: var(--pdu-barva-zluta-cta, #F4E732) !important;
  background-image: var(--pdu-grad-btn-corner-light), var(--pdu-grad-btn-glossy-light) !important;
  color: var(--pdu-barva-tmavomodra, #191932) !important;
  font-weight: 800 !important;
  transition: all .25s ease !important;
}
#formSearchForm button[data-testid="searchBtn"]:hover,
#formSearchForm .btn-search:hover {
  background-color: var(--pdu-barva-bila, #fff) !important;
  background-image: var(--pdu-grad-btn-hover-corner), var(--pdu-grad-btn-hover-glossy) !important;
  color: var(--pdu-barva-tmavomodra, #191932) !important;
}