/****** STYLY pro všechny stránky (krom produktů, kategorií a blogu) prefix .pdu-pag- ******/
/****** Všechny barvy/spacing/radius/shadows/durations čerpá z eshop/global.css ******/
/****** Změna designových tokenů probíhá VÝHRADNĚ v global.css. ******/

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

 — Sekce 0: Standalone utility (světlešedé pozadí, divider)
 ÚVODNÍ ROZCESTNÍK / HOMEPAGE (HP)
 — Sekce 1: Page wrapper + úvodní texty (claim, mission)
 — Sekce 2: Hero CTA (.pdu-pag-btn-primary / -cta)
 — Sekce 3: Group (nadpis sekce)
 — Sekce 4: Staty (6 výhod, mřížka)
 — Sekce 5: Pro koho jsme tady (3 cílové skupiny)
 — Sekce 6: Carousel (wrap + scrollovací řádek + karty + šipky + dots)
 — Sekce 7: Mid CTA (tmavé pozadí s fotkou týmu)
 — Sekce 8: Kontaktní karta (foto + body + akce)
 — Sekce 9: Hodnocení tlačítka (3 odkazy plné šířky)
 — Sekce 10: Hod karty (FB / DOD — 2-col)
 — Sekce 11: Final text (footnote-style)

 /realizace-montaze/ EXTENSION (2026-05-14)
 — Sekce 12: Hero pletivo (cenová orientace + parameter aside)
 — Sekce 13: Kroky (3-step "Jak postavit plot")
 — Sekce 14: Reference trojice (3 testimonial cards)
 — Sekce 15: Green title banner
 — Sekce 16: Pruh zluty animovany (right-yellow stripe banner)
 — Sekce 17: Ramecek sedy (mapa + checklist box)
 — Sekce 17b: Text-foto (2-col text+foto layout)
 — Sekce 18: FAQ accordion (close-others JS v script-pages.js)
 — Sekce 19: Reduced motion (původní, kompaktní)

 /realizace-montaze/ HERO + VIDEO + FORM (sekce 20+, 2026-05-14)
 — Sekce 20: Intro + video + eyebrow + lead + CTA row + button varianty (ghost, outline)
 — Sekce 21: Form (poptávka) + se-forms.cz overrides
 — Sekce 22: Timeline (časová osa 6 kroků, vertikál mobil + horizontál desktop)
 — Sekce 23: Kat-grid (9 zaoblených ikon kategorií, no labels)
 — Sekce 24: Procnas (proč nás checklist + mapa)
 — Sekce 25: Eshop (3 karty s overlay gradient)
 — Sekce 26: Bullets (zaškrtávací list uvnitř text-foto)

 /coverage gap — sekce 27-30 (2026-05-14 v2.3)
 — Sekce 27: Tabulka (parameter / pricing / hours table)
 — Sekce 28: Pobocka (location card s mapou + info + hodiny)
 — Sekce 29: Tabs (tabbed interface — JS toggle v script-pages.js BLOK 4)
 — Sekce 30: Galerie-grid (responsive image gallery 2/3/4 col)

 /kontakty/ EXTENSION (sekce 32-36 + 32b, 2026-05-20)
 — Sekce 32: Osoba (Person karta s portrétem 140×140 + jméno/role/kontakty/vztahy)
 — Sekce 32b: Osoby carousel (horizontal scroll variant z handoff v2 — peek pattern + spin)
 — Sekce 33: Zalozky (rychlé navigační záložky 1/2/3 col, zelená + is-light varianta)
 — Sekce 34: Tooltip ("?" indikátor s pulsující animací + pure-CSS hover/focus text)
 — Sekce 35: Info line (řádka s ikonou + text/odkaz pro hlavičky oddělení)
 — Sekce 36: Odd-header (wrapper pro h2 + info-line řádky před gridem osob)
 — Sekce 37b: Udaje karty (3-card grid pro Fakturační/Platební/DSA)

 — Sekce 37: Reduced motion (a11y — všech 37 sekcí)
 — Sekce 38: Vyhledávání osob (search bar + výsledková mřížka klonů .pdu-pag-osoba, JS BLOK 6)
 ****/


/* ╔══════════════════════════════════════════════════════════════
   📦 SEKCE 0. POZADÍ-SVETLESEDE-BEZ-OKRAJE
   ──────────────────────────────────────────────────────────────
   Popis:
   - Univerzální blok pro obsah, který má jen jemné odlišení od stránky
   - Plná šířka, vnitřní padding S (vertikálně) × L (horizontálně) z global.css
   - Bez borderu, bez radiusu, bez stínu — čistý neutrální obdélník

   HTML:
     <div class="pdu-pag-pozadi-svetlesede-bez-okraje">
       <p>Obsah uvnitř...</p>
     </div>
   ══════════════════════════════════════════════════════════════ */
.pdu-pag-pozadi-svetlesede-bez-okraje {
    width: 100%;
    background-color: var(--pdu-barva-sede-svetla);
    padding: var(--pdu-odsazeni-s) var(--pdu-odsazeni-l);
}

/* ╔══════════════════════════════════════════════════════════════
   ➖ SEKCE 0b. DIVIDER (tenká šedá horizontální čára pro section breaks)
   ──────────────────────────────────────────────────────────────
   Popis:
   - Tenká 1px linka v barvě --pdu-barva-okraj-jemny
   - Margin 1em nahoře + 1em dole = neutrální spacing
   - Pro <hr> nebo libovolný element (nadepisuje native <hr> styly)

   HTML usage (vlož mezi sekce kde chceš visual break):
     <hr class="pdu-pag-divider">
   ══════════════════════════════════════════════════════════════ */
.pdu-pag-divider {
  border: 0;
  border-top: 1px solid var(--pdu-barva-okraj-jemny);
  margin: 1em 0;
  height: 0;
}
/* `.is-large` modifier (2026-05-20 v2) — výraznější section break (mezi pobočkami):
   - Gradient fade z transparentní → šedá → transparentní (centered fade)
   - Větší vertical margin (2.5em+1.875em = visual breathing room)
   - Subtle zelená tečka uprostřed jako brand acknowledgement */
.pdu-pag-divider.is-large {
  border-top: 0;
  height: 1px; margin: 2.75em 0 2em;
  background: linear-gradient(90deg, transparent 0%, var(--pdu-barva-okraj-jemny) 25%, var(--pdu-barva-okraj-jemny) 75%, transparent 100%);
  position: relative; overflow: visible;
}
.pdu-pag-divider.is-large::after {
  content: ""; position: absolute;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 0.5em; height: 0.5em; border-radius: 50%;
  background: var(--pdu-barva-zelena-akcent);
  box-shadow: 0 0 0 0.25em var(--pdu-barva-bila), 0 0 0 0.3125em var(--pdu-barva-okraj-jemny);
}


/* ╔══════════════════════════════════════════════════════════════
   📄 SEKCE 1. PAGE WRAPPER + ÚVODNÍ TEXT (claim, mission)
   ──────────────────────────────────────────────────────────────
   Popis:
   - .pdu-pag-page = root wrapper celé stránky (font: inherit ze Shoptet)
   - .pdu-pag-claim = malý italic perex nahoře (max-width není, centered)
   - .pdu-pag-mission = větší úvodní odstavec (max 780 px, centered)
   - Box-sizing: border-box vynuceno na všech dětech (bezpečnost)

   HTML:
     <div class="pdu-pag-page">
       <p class="pdu-pag-claim">» italic perex «</p>
       <p class="pdu-pag-mission">Pomůžeme vám...
         <a href="..." class="pdu-pag-mission-link"><strong>kvalitní plot</strong></a>
       </p>
     </div>
   ══════════════════════════════════════════════════════════════ */
.pdu-pag-page { font-family: inherit; font-size: var(--pdu-base-font-size); color: var(--pdu-barva-tmavomodra); box-sizing: border-box; max-width: 100%; }
.pdu-pag-page *, .pdu-pag-page *::before, .pdu-pag-page *::after { box-sizing: border-box; font-family: inherit; }

/* Návody — bázové nadpisy uvnitř průvodců (větší než theme default Shoptetu).
   UMÍSTĚNO ZÁMĚRNĚ BRZY (před komponenty): specificita (0,1,1) přebije Shoptet,
   ale všechny POZDĚJŠÍ komponentní `.pdu-pag-* h3/h4` (pobočky/půjčovna/kontakt/krok/
   timeline) ho přebijí (shoda specificity → vyhrává pozdější) → na existujících
   .pdu-pag-page stránkách se nadpisy komponent NEZMĚNÍ. Týká se jen prostých h3/h4
   v textu návodů. (přesunuto z konce 2026-06-26) */
.pdu-pag-page h3 { font-size: 1.35em; font-weight: 800; line-height: 1.3; color: var(--pdu-barva-tmavomodra); margin: 1.15em 0 0.4em; }
.pdu-pag-page h4 { font-size: 1.1em; font-weight: 800; line-height: 1.35; color: var(--pdu-barva-tmavomodra); margin: 1em 0 0.35em; }

/* claim = malý perex nahoře, italic */
.pdu-pag-claim   { text-align: center; color: var(--pdu-barva-text-sekundarni); font-style: italic; margin: 0 0 0.75em; font-size: 1.05em; }
/* mission = úvodní claim odstavec, max 48.75em wide */
.pdu-pag-mission { text-align: center; color: var(--pdu-barva-tmavomodra); line-height: 1.55; font-size: 1.15em; max-width: 48.75em; margin: 0 auto 1.75em; }
.pdu-pag-mission strong { color: var(--pdu-barva-zelena-akcent); }
.pdu-pag-mission-link { color: var(--pdu-barva-zelena-akcent) !important; text-decoration: none !important; }
.pdu-pag-mission-link:hover { text-decoration: underline !important; }
.pdu-pag-mission-link strong { color: var(--pdu-barva-zelena-akcent); }


/* ╔══════════════════════════════════════════════════════════════
   🎯 SEKCE 2. HERO CTA (.pdu-pag-btn-primary / .pdu-pag-btn-cta)
   ──────────────────────────────────────────────────────────────
   Popis:
   - .pdu-pag-hero = flex row 2 tlačítek (centered, wrap na mobilu)
   - .pdu-pag-btn-primary = zelený CTA (brand zelená, bílý text)
   - .pdu-pag-btn-cta = žlutý CTA (kontrastní žlutá s tmavým textem)
   - Hover: oba flipnou na bílé pozadí s tmavomodrým borderem

   HTML:
     <section class="pdu-pag-hero">
       <a href="/montaz/" class="pdu-pag-btn-primary">Poptat montáž</a>
       <a href="/kalkulace/" class="pdu-pag-btn-cta">Spočítat zdarma</a>
     </section>
   ══════════════════════════════════════════════════════════════ */
.pdu-pag-hero { display: flex; gap: 0.75em; justify-content: center; flex-wrap: wrap; margin: 0 0 2em; }
/* společný button base (padding, radius, transition) */
.pdu-pag-btn-primary,
.pdu-pag-btn-cta,
.pdu-pag-btn-dark {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  padding: 0.875em 1.75em; font-size: 1.05em; font-weight: 700;
  text-decoration: none !important; border-radius: var(--pdu-radius-m);
  transition: all var(--pdu-prechod-dur-stredni) ease;
  text-align: center; cursor: pointer;
}
/* zelený primary CTA — 1px gray ring + glossy gradient (z global.css tokenů) */
.pdu-pag-btn-primary {
  background-color: var(--pdu-barva-zelena-akcent);
  background-image: var(--pdu-grad-btn-corner), var(--pdu-grad-btn-glossy);
  color: var(--pdu-barva-bila) !important;
  border: 1px solid var(--pdu-barva-zelena-akcent);
  box-shadow: 0 0 0 1px var(--pdu-barva-okraj-jemny);
}
.pdu-pag-btn-primary:hover,
.pdu-pag-btn-primary:focus-visible {
  background-color: var(--pdu-barva-bila);
  background-image: var(--pdu-grad-btn-hover-corner), var(--pdu-grad-btn-hover-glossy);
  color: var(--pdu-barva-tmavomodra) !important;
  border-color: var(--pdu-barva-tmavomodra);
  transform: translateY(-1px);
  outline: none;
}
/* žlutý secondary CTA — light glossy (žlutá je už světlá) + sjednocený hover (lift jako counter/sidebar) */
.pdu-pag-btn-cta {
  background-color: var(--pdu-barva-zluta-cta);
  background-image: var(--pdu-grad-btn-corner-light), var(--pdu-grad-btn-glossy-light);
  color: var(--pdu-barva-tmavomodra) !important;
  border: 1px solid var(--pdu-barva-zluta-cta);
  font-weight: 800;
  box-shadow: 0 0 0 1px var(--pdu-barva-okraj-jemny);
}
.pdu-pag-btn-cta:hover,
.pdu-pag-btn-cta:focus-visible {
  background-color: var(--pdu-barva-bila);
  background-image: var(--pdu-grad-btn-hover-corner), var(--pdu-grad-btn-hover-glossy);
  color: var(--pdu-barva-tmavomodra) !important;
  border-color: var(--pdu-barva-tmavomodra);
  transform: translateY(-1px);
  outline: none;
}
/* tmavomodrý dark CTA — match sidebar .pdu-sec-snav.is-dark (Pobočky a kontakty) */
.pdu-pag-btn-dark {
  background-color: var(--pdu-barva-tmavomodra);
  background-image: var(--pdu-grad-btn-corner-dark), var(--pdu-grad-btn-glossy-dark);
  color: var(--pdu-barva-bila) !important;
  border: 1px solid var(--pdu-barva-tmavomodra);
  box-shadow: 0 0 0 1px var(--pdu-barva-okraj-jemny);
}
.pdu-pag-btn-dark:hover,
.pdu-pag-btn-dark:focus-visible {
  background-color: var(--pdu-barva-bila);
  background-image: var(--pdu-grad-btn-hover-corner), var(--pdu-grad-btn-hover-glossy);
  color: var(--pdu-barva-tmavomodra) !important;
  border-color: var(--pdu-barva-tmavomodra);
  transform: translateY(-1px);
  outline: none;
}
/* span + svg arrow pattern — sjednoceno s .pdu-sec-snav / .pdu-sec-counter-cta.
   Backward compat: pure-text buttony (bez span/svg) renderují stejně díky inline-flex + align-items center. */
.pdu-pag-btn-primary > span,
.pdu-pag-btn-cta > span,
.pdu-pag-btn-dark > span,
.pdu-pag-btn-ghost > span,
.pdu-pag-btn-outline > span {
  display: block;
  line-height: 1;
  font-family: inherit;
}
.pdu-pag-btn-primary svg,
.pdu-pag-btn-cta svg,
.pdu-pag-btn-dark svg,
.pdu-pag-btn-ghost svg,
.pdu-pag-btn-outline svg {
  display: block;
  flex: 0 0 auto;
  width: 1.125em;
  height: 1.125em;
  transition: transform var(--pdu-prechod-dur-stredni) ease;
}
.pdu-pag-btn-primary:hover svg,
.pdu-pag-btn-primary:focus-visible svg,
.pdu-pag-btn-cta:hover svg,
.pdu-pag-btn-cta:focus-visible svg,
.pdu-pag-btn-dark:hover svg,
.pdu-pag-btn-dark:focus-visible svg,
.pdu-pag-btn-ghost:hover svg,
.pdu-pag-btn-ghost:focus-visible svg,
.pdu-pag-btn-outline:hover svg,
.pdu-pag-btn-outline:focus-visible svg {
  transform: translateX(0.1875em);
}


/* ╔══════════════════════════════════════════════════════════════
   📑 SEKCE 3. GROUP (sekce s nadpisem)
   ──────────────────────────────────────────────────────────────
   Popis:
   - Univerzální wrapper sekce, daný padding nahoře/dole
   - .pdu-pag-group-title = H2 1.8em, weight 800, levostranně zarovnaný
   - Žádný background, žádný border — nadpis + obsah

   HTML:
     <section class="pdu-pag-group">
       <div class="pdu-pag-group-head">
         <h2 class="pdu-pag-group-title">Nadpis sekce</h2>
       </div>
       ... obsah ...
     </section>
   ══════════════════════════════════════════════════════════════ */
.pdu-pag-group       { padding: 1.5em 0; }
.pdu-pag-group-head  { margin-bottom: 1.125em; }
.pdu-pag-group-title { font-size: 1.8em; font-weight: 800; margin: 0; color: var(--pdu-barva-tmavomodra); text-align: left; line-height: 1.25; }


/* ╔══════════════════════════════════════════════════════════════
   📊 SEKCE 4. STATY (mřížka 6 výhod / statistik)
   ──────────────────────────────────────────────────────────────
   Popis:
   - Mřížka karet s velkým číslem + label + popis
   - Mobil (<37.5em): 2 sloupce; Tablet+ (≥37.5em): 3 sloupce
   - Karta: bílá, jemný border, zelený 0.1875em bottom-border, hover scale+shadow
   - .pdu-pag-stat-num: 2.1em zelené číslo
   - .pdu-pag-stat-num-emoji: pro emoji ikonu místo čísla
   - Min-height 10em = vyrovnávání karet různě dlouhých

   HTML:
     <div class="pdu-pag-staty">
       <a href="/o-nas/" class="pdu-pag-stat">
         <span class="pdu-pag-stat-num">14&nbsp;let</span>
         <strong>Na trhu</strong>
         <span class="pdu-pag-stat-desc">Od roku 2012</span>
       </a>
       ... 5× ...
     </div>
   ══════════════════════════════════════════════════════════════ */
.pdu-pag-staty { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.875em; }
@media (min-width: 37.5em) { .pdu-pag-staty:not(.is-4col) { grid-template-columns: repeat(3, 1fr); } }
/* `.is-4col` modifier (2026-05-20 v3) — pro 4 stejně-významné karty (např. 4 oddělení e-shopu).
   Mobil 2×2 (<992) / desktop 4 col (≥992).
   Fix v2.6.5: `:not(.is-4col)` v base 600+ rule aby is-4col ne-override nepřebije. */
.pdu-pag-staty.is-4col { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 62em) { .pdu-pag-staty.is-4col { grid-template-columns: repeat(4, 1fr); } }
.pdu-pag-stat {
  background: var(--pdu-barva-bila); border: 1px solid var(--pdu-barva-okraj-jemny);
  border-bottom: 0.1875em solid var(--pdu-barva-zelena-akcent);
  border-radius: var(--pdu-radius-card); padding: 1.25em 0.75em; text-align: center;
  display: flex; flex-direction: column; justify-content: center; gap: 0.25em;
  box-shadow: var(--pdu-stin-jemny); height: 100%;
  text-decoration: none !important;
  transition: all var(--pdu-prechod-dur-stredni) ease;
  min-height: 10em;
}
.pdu-pag-stat:hover { box-shadow: var(--pdu-stin-vyrazny); transform: translateY(-0.1875em); border-color: var(--pdu-barva-zelena-akcent); }
.pdu-pag-stat-num { color: var(--pdu-barva-zelena-akcent); font-size: 2.1em; font-weight: 800; line-height: 1.05; margin: 0 0 0.5em; display: block; letter-spacing: -.01em; }
.pdu-pag-stat-num-emoji { font-size: 1.9em; line-height: 1; }
.pdu-pag-stat strong { color: var(--pdu-barva-tmavomodra); font-size: 1.05em; font-weight: 800; display: block; }
.pdu-pag-stat-desc { color: var(--pdu-barva-text-sedy); font-size: .92em; line-height: 1.45; display: block; margin-top: 0.25em; }
.pdu-pag-stat-desc a { color: var(--pdu-barva-zelena-akcent) !important; text-decoration: none !important; font-weight: 600; }
.pdu-pag-stat-desc a:hover { text-decoration: underline !important; }

/* `.pdu-pag-stat-link` — volitelný "Detail →" odkaz uvnitř stat karty
   (refactor 2026-05-20 v2.6.5: použít když karta JE `<div>` s tel/mail odkazy uvnitř —
   nelze celou kartu obalit do <a> protože vede k nested <a> in <a> bug).
   Použití:
     <div class="pdu-pag-stat">
       <span class="pdu-pag-stat-num pdu-pag-stat-num-emoji">❓</span>
       <strong>Title</strong>
       <span class="pdu-pag-stat-desc"><a href="tel:...">...</a></span>
       <a href="#detail" class="pdu-pag-stat-link">Detail →</a>
     </div> */
.pdu-pag-stat-link {
  display: inline-block; margin-top: 0.625em;
  color: var(--pdu-barva-zelena-akcent) !important;
  font-weight: 800; font-size: .9em;
  text-decoration: none !important;
}
.pdu-pag-stat-link:hover { text-decoration: underline !important; }
/* Modifier .is-klik — CELÁ karta klikací přes stretched-link overlay (::after na stat-link).
   POZOR: použít JEN když karta obsahuje právě JEDEN odkaz (.pdu-pag-stat-link); jinak overlay
   zablokuje ostatní odkazy (tel/mail). Vhodné pro nav-rozcestník (/navody/). */
.pdu-pag-stat.is-klik { position: relative; cursor: pointer; }
.pdu-pag-stat.is-klik .pdu-pag-stat-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
/* Stat karta jako `<div>` (no wrapper-link) — visual consistency s ostatními e-shop kartami:
   hover lift + shadow + zelený border SAME jako u <a>.pdu-pag-stat (v2.6.9 fix). */
div.pdu-pag-stat:not(.is-klik) { cursor: default; }
/* (smazána override `transform: none` — `<div>.pdu-pag-stat` má teď stejný hover jako <a>) */

/* COLOR MODIFIERS pro `.pdu-pag-stat` (2026-05-20 v3) — barevné rozlišení karet (paralela k `.pdu-pag-koho-item.is-X`).
   Pattern: bottom-border accent + zbarvený stat-num/emoji. Default = zelený brand.
   Použití: <a class="pdu-pag-stat is-amber"> ... </a> */
.pdu-pag-stat.is-amber   { border-bottom-color: #F4B73F; }
.pdu-pag-stat.is-amber   .pdu-pag-stat-num,
.pdu-pag-stat.is-amber   .pdu-pag-stat-num-emoji { color: #B5740B; }
.pdu-pag-stat.is-blue    { border-bottom-color: #4C8BF5; }
.pdu-pag-stat.is-blue    .pdu-pag-stat-num,
.pdu-pag-stat.is-blue    .pdu-pag-stat-num-emoji { color: #1A4FB8; }
.pdu-pag-stat.is-coral   { border-bottom-color: #E66A52; }
.pdu-pag-stat.is-coral   .pdu-pag-stat-num,
.pdu-pag-stat.is-coral   .pdu-pag-stat-num-emoji { color: #B53A20; }
.pdu-pag-stat.is-emerald { border-bottom-color: var(--pdu-barva-zelena-akcent); }
.pdu-pag-stat.is-emerald .pdu-pag-stat-num,
.pdu-pag-stat.is-emerald .pdu-pag-stat-num-emoji { color: var(--pdu-barva-zelena-akcent-hover); }

/* ===== USP animované Lucide ikony (`.pdu-pag-stat-ico`) — 2026-06-10 =====
   Topper nad obsahem `.pdu-pag-stat` v zeleném kolečku. Pohyb = vlna (1×/11s,
   ripple zleva) + hover pop. Vlna na wrapperu (translateY), hover na <svg> (scale).
   Obsah karet v `.pdu-pag-staty` zarovnán k hornímu okraji → ikony v jedné lince.
   Akcenty: .a-green (stroke), .a-green-f (fill), .a-wheel/.a-gear (hover rotace). */
.pdu-pag-staty .pdu-pag-stat { justify-content: flex-start; }
/* karty bez čísla (`.pdu-pag-stat-num`) rezervují jeho výšku → titulky v jedné lince */
.pdu-pag-staty .pdu-pag-stat:not(:has(.pdu-pag-stat-num)) strong { margin-top: 3.32em; }
.pdu-pag-stat-ico { width: 3.25em; height: 3.25em; margin: 0 auto 0.65em; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(0, 180, 110, .10); color: var(--pdu-barva-tmavomodra); transform-box: border-box; transform-origin: center; animation: pduUspWave 11s ease-in-out infinite; transition: background var(--pdu-prechod-dur-stredni) ease; }
.pdu-pag-staty .pdu-pag-stat:nth-child(1) .pdu-pag-stat-ico { animation-delay: 0s; }
.pdu-pag-staty .pdu-pag-stat:nth-child(2) .pdu-pag-stat-ico { animation-delay: .18s; }
.pdu-pag-staty .pdu-pag-stat:nth-child(3) .pdu-pag-stat-ico { animation-delay: .36s; }
.pdu-pag-staty .pdu-pag-stat:nth-child(4) .pdu-pag-stat-ico { animation-delay: .54s; }
.pdu-pag-staty .pdu-pag-stat:nth-child(5) .pdu-pag-stat-ico { animation-delay: .72s; }
.pdu-pag-staty .pdu-pag-stat:nth-child(6) .pdu-pag-stat-ico { animation-delay: .90s; }
.pdu-pag-stat-ico svg { display: block; width: 1.75em; height: 1.75em; overflow: visible; transform-box: fill-box; transform-origin: center; }
.pdu-pag-stat-ico path, .pdu-pag-stat-ico line, .pdu-pag-stat-ico rect, .pdu-pag-stat-ico circle { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pdu-pag-stat-ico .a-green { stroke: var(--pdu-barva-zelena-akcent); }
.pdu-pag-stat-ico .a-green-f { fill: var(--pdu-barva-zelena-akcent); stroke: none; }
.pdu-pag-stat-ico .a-gear, .pdu-pag-stat-ico .a-wheel { transform-box: fill-box; transform-origin: center; }
.pdu-pag-stat:hover .pdu-pag-stat-ico { background: rgba(0, 180, 110, .18); }
.pdu-pag-stat:hover .pdu-pag-stat-ico svg { animation: pduUspPop .55s ease; }
.pdu-pag-stat:hover .pdu-pag-stat-ico .a-wheel { animation: pduUspSpin .6s ease; }
.pdu-pag-stat:hover .pdu-pag-stat-ico .a-gear { animation: pduUspSpin .8s ease; }
@keyframes pduUspWave { 0% { transform: translateY(0); } 3% { transform: translateY(-0.375em); } 7% { transform: translateY(0); } 100% { transform: translateY(0); } }
@keyframes pduUspPop { 0% { transform: scale(1); } 40% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes pduUspSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pdu-pag-stat-ico, .pdu-pag-stat-ico svg, .pdu-pag-stat-ico * { animation: none !important; } }


/* ╔══════════════════════════════════════════════════════════════
   🛠 NÁROČNOST MONTÁŽE (`.pdu-pag-narocnost`) — 2026-06-26
   ──────────────────────────────────────────────────────────────
   Samostatný komponent pro návody (NE .pdu-pag-staty — ty mají velké
   číslo nahoře). Tady je pořadí řádků: LABEL → HODNOTA → popis,
   hodnota menší (ne „obrovská"). Barvy přes is-emerald/amber/coral/blue.

   HTML:
     <div class="pdu-pag-narocnost">
       <div class="pdu-pag-narocnost-item is-emerald">
         <strong class="pdu-pag-narocnost-label">Fyzická náročnost</strong>
         <span class="pdu-pag-narocnost-val">Lehká</span>
         <span class="pdu-pag-narocnost-desc">Manipulace s&nbsp;pletivem není příliš fyzicky náročná.</span>
       </div>
       ... 3× (Fyzická / Technologická / Doporučený počet) ...
     </div>
   ══════════════════════════════════════════════════════════════ */
/* 3 sloupce VŽDY (i mobil, dle Lucky 2026-06-26) — mobil jen zúžené mezery/padding.
   minmax(0,1fr) = stejné třetiny i s dlouhými slovy; break-word = pojistka proti přetečení. */
.pdu-pag-narocnost { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4em; }
@media (min-width: 37.5em) { .pdu-pag-narocnost { gap: 0.875em; } }
.pdu-pag-narocnost-item {
  background: var(--pdu-barva-bila); border: 1px solid var(--pdu-barva-okraj-jemny);
  border-bottom: 0.1875em solid var(--pdu-barva-zelena-akcent);
  border-radius: var(--pdu-radius-card); padding: 0.85em 0.5em; text-align: center;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 0.2em;
  box-shadow: var(--pdu-stin-jemny); height: 100%; overflow-wrap: break-word;
  transition: all var(--pdu-prechod-dur-stredni) ease;
}
@media (min-width: 37.5em) { .pdu-pag-narocnost-item { padding: 1.1em 0.85em; } }
.pdu-pag-narocnost-item:hover { box-shadow: var(--pdu-stin-vyrazny); transform: translateY(-0.1875em); border-color: var(--pdu-barva-zelena-akcent); }
.pdu-pag-narocnost-label { color: var(--pdu-barva-tmavomodra); font-size: 1.02em; font-weight: 800; display: block; }
.pdu-pag-narocnost-val { color: var(--pdu-barva-zelena-akcent-hover); font-size: 1.45em; font-weight: 800; line-height: 1.1; display: block; margin: 0.1em 0 0.15em; letter-spacing: -.01em; }
.pdu-pag-narocnost-desc { color: var(--pdu-barva-text-sedy); font-size: .9em; line-height: 1.45; display: block; }
/* COLOR MODIFIERS (paralela k .pdu-pag-stat.is-X) */
.pdu-pag-narocnost-item.is-amber   { border-bottom-color: #F4B73F; }
.pdu-pag-narocnost-item.is-amber   .pdu-pag-narocnost-val { color: #B5740B; }
.pdu-pag-narocnost-item.is-blue    { border-bottom-color: #4C8BF5; }
.pdu-pag-narocnost-item.is-blue    .pdu-pag-narocnost-val { color: #1A4FB8; }
.pdu-pag-narocnost-item.is-coral   { border-bottom-color: #E66A52; }
.pdu-pag-narocnost-item.is-coral   .pdu-pag-narocnost-val { color: #B53A20; }
.pdu-pag-narocnost-item.is-emerald { border-bottom-color: var(--pdu-barva-zelena-akcent); }
.pdu-pag-narocnost-item.is-emerald .pdu-pag-narocnost-val { color: var(--pdu-barva-zelena-akcent-hover); }


/* ╔══════════════════════════════════════════════════════════════
   👥 SEKCE 5. PRO KOHO JSME TADY (cílové skupiny)
   ──────────────────────────────────────────────────────────────
   Popis:
   - Flex wrap 3 karet (flex:1, min-width 15.625em) — auto-resize
   - Karta centered, ikona v 72×72 px zeleném kruhu, hover scale
   - .pdu-pag-koho-link = absolutní overlay link (celá karta klikatelná)

   HTML:
     <div class="pdu-pag-koho">
       <div class="pdu-pag-koho-item">
         <div class="pdu-pag-koho-ico" aria-hidden="true">🏡</div>
         <strong>Rodinné domy</strong>
         <span>Plot na klíč i materiál</span>
         <a href="/realizace/" class="pdu-pag-koho-link" title="Rodinné domy"></a>
       </div>
       ... 2× ...
     </div>
   ══════════════════════════════════════════════════════════════ */
.pdu-pag-koho { display: flex; flex-wrap: wrap; gap: 0.875em; }
.pdu-pag-koho-item {
  flex: 1; min-width: 15.625em; position: relative;
  background: var(--pdu-barva-bila); border: 1px solid var(--pdu-barva-okraj-jemny);
  border-bottom: 0.1875em solid var(--pdu-barva-zelena-akcent);
  border-radius: var(--pdu-radius-card); padding: 1.5em 1.125em; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 0.625em;
  box-shadow: var(--pdu-stin-jemny);
  transition: all var(--pdu-prechod-dur-stredni) ease;
  isolation: isolate;
}
.pdu-pag-koho-item:hover { box-shadow: var(--pdu-stin-vyrazny); transform: translateY(-0.1875em); border-color: var(--pdu-barva-zelena-akcent); }
/* zelený 4.5em kruh s emoji ikonou (font-size 2.25em) */
.pdu-pag-koho-ico {
  width: 4.5em; height: 4.5em; background: var(--pdu-barva-zelena-svetla-3); border-radius: 50%;
  margin: 0 auto 0.25em; display: flex; align-items: center; justify-content: center;
  font-size: 2.25em; line-height: 1; flex-shrink: 0;
}
.pdu-pag-koho-item strong { font-size: 1.1em; color: var(--pdu-barva-tmavomodra); font-weight: 800; line-height: 1.3; display: block; }
.pdu-pag-koho-item span   { font-size: .92em; color: var(--pdu-barva-text-sekundarni); line-height: 1.5; display: block; }
/* overlay link — celá karta klikatelná */
.pdu-pag-koho-link { position: absolute; inset: 0; z-index: 10; text-decoration: none !important; }

/* COLOR MODIFIERS (refactor 2026-05-20 v2) — barevné rozlišení karet podle účelu.
   Default karta = zelená brand. Modifiers přepisují bottom-border + ikona bg+color.
   Použití: <div class="pdu-pag-koho-item is-amber">  ...  </div>
   Pattern: bottom-border accent + tinted bg na ikoně + dark accent color pro emoji */
.pdu-pag-koho-item.is-amber   { border-bottom-color: #F4B73F; }
.pdu-pag-koho-item.is-amber   .pdu-pag-koho-ico { background: #FFF3D6; color: #B5740B; }
.pdu-pag-koho-item.is-blue    { border-bottom-color: #4C8BF5; }
.pdu-pag-koho-item.is-blue    .pdu-pag-koho-ico { background: #E0EBFF; color: #1A4FB8; }
.pdu-pag-koho-item.is-coral   { border-bottom-color: #E66A52; }
.pdu-pag-koho-item.is-coral   .pdu-pag-koho-ico { background: #FFE2DA; color: #B53A20; }
.pdu-pag-koho-item.is-emerald { border-bottom-color: var(--pdu-barva-zelena-akcent); }
.pdu-pag-koho-item.is-emerald .pdu-pag-koho-ico { background: var(--pdu-barva-zelena-svetla-3); color: var(--pdu-barva-zelena-akcent-hover); }

/* ──────────────────────────────────────────────────────────────
   GRID MODIFIER pro `.pdu-pag-koho` (2026-05-25)
   Default `.pdu-pag-koho` = flex-wrap, karty `flex:1; min-width:15.625em`
   → při 4 kartách padají 3+1 na widths <≈1000px.
   `.is-grid-2x2` = explicit 2×2 grid pro 4 karty (centered, max 57.5em).
   Mobile (≤40em) padá na 1 sloupec.
   Použití: <div class="pdu-pag-koho is-grid-2x2">  4× .pdu-pag-koho-item  </div>
   ────────────────────────────────────────────────────────────── */
.pdu-pag-koho.is-grid-2x2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 57.5em;
  margin-left: auto;
  margin-right: auto;
}
.pdu-pag-koho.is-grid-2x2 .pdu-pag-koho-item { flex: none; min-width: 0; }
@media (max-width: 40em) {
  .pdu-pag-koho.is-grid-2x2 { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────────────────────────
   PROKLIKY — kompaktní karty (icon vlevo, titulek + CTA "Zobrazit →")
   Klon z blog/.pdu-blo-prokliky-* pod pdu-pag-* prefixem (2026-05-27).
   Použití:
     <section class="pdu-pag-prokliky">
       <div class="pdu-pag-prokliky-karta is-emerald">
         <span class="pdu-pag-prokliky-ico" aria-hidden="true">📘</span>
         <div class="pdu-pag-prokliky-body">
           <strong class="pdu-pag-prokliky-titulek">Titulek</strong>
           <span class="pdu-pag-prokliky-cta">Zobrazit <em>→</em></span>
         </div>
         <a class="pdu-pag-prokliky-link" href="/cil/" aria-label="Titulek"></a>
       </div>
     </section>
   ────────────────────────────────────────────────────────────── */
.pdu-pag-prokliky {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.875em;
  margin: 1.25em 0 1.75em;
}
@media (min-width: 37.5em) {
  .pdu-pag-prokliky { grid-template-columns: repeat(2, 1fr); }
}
.pdu-pag-prokliky-karta {
  position: relative;
  background: var(--pdu-barva-bila);
  border: 1px solid var(--pdu-barva-okraj-jemny);
  border-left: 0.25em solid var(--pdu-barva-zelena-akcent);
  border-radius: var(--pdu-radius-card);
  padding: 0.875em 1.125em;
  display: flex; flex-direction: row; align-items: center; gap: 0.875em;
  text-align: left;
  box-shadow: var(--pdu-stin-jemny);
  transition: all var(--pdu-prechod-dur-stredni) ease;
}
.pdu-pag-prokliky-karta:hover,
.pdu-pag-prokliky-karta:focus-within {
  box-shadow: var(--pdu-stin-vyrazny);
  transform: translateX(0.1875em);
  border-color: var(--pdu-barva-zelena-akcent);
}
.pdu-pag-prokliky-link {
  position: absolute; inset: 0;
  z-index: 10;
  border-radius: var(--pdu-radius-card);
  text-decoration: none !important;
}
.pdu-pag-prokliky-ico {
  flex-shrink: 0;
  width: 2.5em; height: 2.5em;
  border-radius: 50%;
  background: var(--pdu-barva-zelena-svetla-3);
  color: var(--pdu-barva-zelena-akcent-hover);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15em; line-height: 1;
}
.pdu-pag-prokliky-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 0.125em;
}
.pdu-pag-prokliky-titulek {
  font-size: 1em;
  font-weight: 800;
  color: var(--pdu-barva-tmavomodra);
  line-height: 1.3;
}
.pdu-pag-prokliky-cta {
  font-size: .8em; font-weight: 700;
  color: var(--pdu-barva-zelena-akcent);
  letter-spacing: 0.02em;
  display: inline-flex; align-items: center; gap: 0.25em;
}
.pdu-pag-prokliky-cta em {
  font-style: normal;
  transition: transform var(--pdu-prechod-dur-rychly) ease;
}
.pdu-pag-prokliky-karta:hover .pdu-pag-prokliky-cta em {
  transform: translateX(0.25em);
}
.pdu-pag-prokliky-karta.is-amber   { border-left-color: #F4B73F; }
.pdu-pag-prokliky-karta.is-amber   .pdu-pag-prokliky-ico { background: #FFF3D6; color: #B5740B; }
.pdu-pag-prokliky-karta.is-blue    { border-left-color: #4C8BF5; }
.pdu-pag-prokliky-karta.is-blue    .pdu-pag-prokliky-ico { background: #E0EBFF; color: #1A4FB8; }
.pdu-pag-prokliky-karta.is-coral   { border-left-color: #E66A52; }
.pdu-pag-prokliky-karta.is-coral   .pdu-pag-prokliky-ico { background: #FFE2DA; color: #B53A20; }
.pdu-pag-prokliky-karta.is-emerald { border-left-color: var(--pdu-barva-zelena-akcent); }
.pdu-pag-prokliky-karta.is-emerald .pdu-pag-prokliky-ico { background: var(--pdu-barva-zelena-svetla-3); color: var(--pdu-barva-zelena-akcent-hover); }

/* ──────────────────────────────────────────────────────────────
   DIVIDER s textem („Nevíte si rady?" apod.) — klon z .pdu-cat-divider.
   Použití: <div class="pdu-pag-divider-text"><span>Nevíte si rady?</span></div>
   ────────────────────────────────────────────────────────────── */
.pdu-pag-divider-text {
  margin: 2em 0 1.75em;
  display: flex;
  align-items: center;
  gap: 0.75em;
}
.pdu-pag-divider-text span {
  font-size: 0.6875em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pdu-barva-zelena-akcent);
  white-space: nowrap;
}
.pdu-pag-divider-text::before,
.pdu-pag-divider-text::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--pdu-barva-okraj-jemny);
}

/* ──────────────────────────────────────────────────────────────
   AUTOR / OBCHODNÍ ZÁSTUPCE — klon z .pdu-cat-autor (style-category.css).
   Foto 100×100 kruh vlevo, info vpravo (jméno, role, bio, CTA tel/mail).
   Schema.org/Person friendly.
   Použití:
     <div class="pdu-cat-divider-text"><span>Nevíte si rady?</span></div>
     <div class="pdu-pag-autor" itemscope itemtype="https://schema.org/Person">
       <div class="pdu-pag-autor-foto"><img src="..." itemprop="image" /></div>
       <div class="pdu-pag-autor-info">
         <p class="pdu-pag-autor-label">Obchodní zástupce</p>
         <p class="pdu-pag-autor-jmeno" itemprop="name">Jméno</p>
         <p class="pdu-pag-autor-role" itemprop="jobTitle">Role</p>
         <p class="pdu-pag-autor-bio" itemprop="description">Bio…</p>
         <div class="pdu-pag-autor-cta">
           <a class="pdu-pag-btn-cta" href="tel:…" itemprop="telephone">📞 …</a>
           <a class="pdu-pag-btn-primary" href="mailto:…" itemprop="email">✉ …</a>
         </div>
       </div>
     </div>
   ────────────────────────────────────────────────────────────── */
.pdu-pag-autor {
  margin: 0 0 0.625em;
  padding: 1.5em;
  background: var(--pdu-barva-bila);
  border: 1px solid var(--pdu-barva-okraj-jemny);
  border-left: 0.25em solid var(--pdu-barva-zelena-akcent);
  border-radius: var(--pdu-radius-s);
  display: flex;
  flex-wrap: wrap;
  gap: 1.25em;
  align-items: flex-start;
}
.pdu-pag-autor-foto { flex-shrink: 0; }
.pdu-pag-autor-foto img {
  width: 6.25em;
  height: 6.25em;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
/* Modifier .is-tym — pro skupinové foto týmu (širší landscape, ne kruh).
   Auto height respektuje přirozený aspect-ratio fotky (16:9 typicky), takže
   se nic neoříznou hlavy ani okraje. Použití: <div class="pdu-pag-autor-foto is-tym"><img ... /></div> */
.pdu-pag-autor-foto.is-tym img {
  width: 14em;
  height: auto;
  border-radius: var(--pdu-radius-card);
  object-fit: contain;
}
/* Na užším viewportu (mobile/tablet) autor karta s is-tym foto přepne na column layout
   (foto nahoře full width, info pod ní centrované) — jinak by foto 14em + info 12.5em
   přetékaly z karty a buttons by se mačkaly do úzkého sloupce. */
@media (max-width: 47em) {
  .pdu-pag-autor:has(> .pdu-pag-autor-foto.is-tym) {
    flex-direction: column;
    align-items: stretch;
  }
  .pdu-pag-autor-foto.is-tym {
    width: 100%;
    text-align: center;
  }
  .pdu-pag-autor-foto.is-tym img {
    width: 100%;
    max-width: 22em;
  }
}
.pdu-pag-autor-info { flex: 1; min-width: 12.5em; }
.pdu-pag-autor-label {
  font-size: 0.6875em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--pdu-barva-zelena-akcent);
  margin: 0 0 0.25em;
}
.pdu-pag-autor-jmeno {
  font-size: var(--pdu-cat-fs-h3);
  font-weight: var(--pdu-cat-fw-h3);
  color: var(--pdu-cat-barva-nadpis);
  margin: 0 0 0.1875em;
}
.pdu-pag-autor-role {
  font-size: var(--pdu-cat-fs-text-s);
  color: var(--pdu-barva-text-sedy);
  margin: 0 0 0.625em;
}
.pdu-pag-autor-bio {
  font-size: var(--pdu-cat-fs-text-s);
  line-height: 1.6;
  color: var(--pdu-cat-barva-text);
  margin: 0 0 0.875em;
}
.pdu-pag-autor-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625em;
  margin-top: 0.25em;
}
@media (max-width: 37.5em) {
  .pdu-pag-autor { padding: 1em; }
  .pdu-pag-autor-foto img { width: 4.5em; height: 4.5em; }
}

/* ──────────────────────────────────────────────────────────────
   GALERIE 3-COL (sjednoceno s blog .pdu-blo-galerie-grid)
   - Grid 2 cols (mobile) → 3 cols (≥37.5em)
   - Square aspect 1:1, hover scale + magnifier 🔍
   - <a data-gallery="lightbox"> = Shoptet built-in lightbox
   - Orphan center na mobile (2-col): lichý počet → poslední vystředit
   Použití:
     <div class="pdu-pag-galerie-grid">
       <a class="pdu-pag-galerie-item" href="…full.jpg" data-gallery="lightbox">
         <img src="…thumb.jpg" alt="…" loading="lazy" />
       </a>
       … N×
     </div>
   ────────────────────────────────────────────────────────────── */
.pdu-pag-galerie-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.625em;
  margin: 1.25em 0 1.5em;
}
@media (min-width: 37.5em) {
  .pdu-pag-galerie-grid { grid-template-columns: repeat(3, 1fr); }
}
/* Orphan center na mobile 2-col: 3 fotky → 1+1+1 vystředit; 5 → 2+2+1 vystředit */
@media (max-width: 37.4375em) {
  .pdu-pag-galerie-grid > a:nth-child(odd):last-child:not(:first-child) {
    grid-column: 1 / -1;
    width: calc(50% - 0.3125em);
    justify-self: center;
  }
}
.pdu-pag-galerie-item {
  display: block; position: relative;
  aspect-ratio: 1/1; overflow: hidden;
  border-radius: var(--pdu-radius-card);
  box-shadow: var(--pdu-stin-jemny);
  cursor: pointer;
  transition: all var(--pdu-prechod-dur-stredni) ease;
  text-decoration: none !important;
}
.pdu-pag-galerie-item:hover {
  transform: scale(1.04);
  box-shadow: 0 0.625em 1.75em rgba(0, 0, 0, .14);
}
.pdu-pag-galerie-item img {
  width: 100% !important; height: 100% !important;
  object-fit: cover; display: block;
  border-radius: 0 !important; border: none !important;
  margin: 0 !important; padding: 0 !important;
  max-width: none !important;
}
.pdu-pag-galerie-item::after {
  content: "🔍"; position: absolute;
  right: 0.5em; bottom: 0.5em;
  background: rgba(255, 255, 255, .92);
  width: 2em; height: 2em; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.875em; opacity: 0;
  transition: opacity var(--pdu-prechod-dur-stredni) ease;
}
.pdu-pag-galerie-item:hover::after { opacity: 1; }

/* ──────────────────────────────────────────────────────────────
   OSOBY GRID — alternativa k .pdu-pag-osoby-carousel (kontakt-obchodni-zastupci).
   Statický 3-col responsive grid (paralela k .pdu-pag-pobocky-grid).
   Použití: <div class="pdu-pag-osoby-grid"> N× <article class="pdu-pag-osoba"> ... </article> </div>
   ────────────────────────────────────────────────────────────── */
.pdu-pag-osoby-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1em;
  margin: 0.5em auto 1.5em;
}
@media (min-width: 37.5em) { .pdu-pag-osoby-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56em)   { .pdu-pag-osoby-grid { grid-template-columns: repeat(3, 1fr); } }
/* orphan center pro 4./7./10. položku osamoceně v 3-col gridu */
@media (min-width: 56em) {
  .pdu-pag-osoby-grid > .pdu-pag-osoba:last-child:nth-child(3n+1) { grid-column: 2; }
}
/* Modifier .is-single — single karta v gridu, bez okolního marginu (např. uvnitř pdu-pag-text-foto
   pro 1-osoba region sekce v kontakt-obchodni-zastupci). Vynucuje 1-col layout na všech viewportech. */
.pdu-pag-osoby-grid.is-single { grid-template-columns: 1fr; margin: 0; }
@media (min-width: 37.5em) { .pdu-pag-osoby-grid.is-single { grid-template-columns: 1fr; } }
@media (min-width: 56em)   { .pdu-pag-osoby-grid.is-single { grid-template-columns: 1fr; } }

/* Region eyebrow — malý uppercase pill nad jménem osoby pro označení kraje (kontakt-obchodni-zastupci).
   Použití: <span class="pdu-pag-osoba-region">Střední a Severní Čechy</span> hned za .pdu-pag-osoba-foto. */
.pdu-pag-osoba-region {
  display: inline-block;
  font-size: 0.6875em;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pdu-barva-zelena-akcent);
  background: var(--pdu-barva-zelena-svetla-3);
  padding: 0.25em 0.625em;
  border-radius: var(--pdu-radius-m);
  margin: 0 0 0.5em;
  line-height: 1.3;
}

/* Mini-mapa regionu — kompaktní mapa v osoba kartě (kontakt-obchodni-zastupci).
   Replika .pdu-pag-pobocka-mapa stylingu z /kontakty/ — světle zelené pozadí
   #DCEBD8 matchuje barvu samotné mapy ČR, padding 0.75em dovnitř, aspect 16:10
   (object-fit: contain takže mapa nikdy neoverlapuje padding).
   Použití: <div class="pdu-pag-osoba-mapa-mini"><img src="region-map.png" alt="…" /></div> */
.pdu-pag-osoba-mapa-mini {
  width: 100%; max-width: 13em;
  margin: 0 auto 0.5em;
  aspect-ratio: 16/10;
  background: #DCEBD8;
  border-radius: var(--pdu-radius-card);
  padding: 0.75em;
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.pdu-pag-osoba-mapa-mini img {
  width: 100% !important; height: 100% !important;
  object-fit: contain; display: block;
  margin: 0 !important; padding: 0 !important;
  border: 0 !important; border-radius: 0 !important;
  max-width: none !important;
  box-shadow: none !important;
}

/* Modifier .is-region — pobocka-style karta s region badge overlay + foto avatar +
   contact info. Pro regionální obchodníky v /kontakt-obchodni-zastupci/.
   - Mobile (<37.5em): vertical layout (mapa top hero + avatar overlay + info pod ní)
   - Tablet+ (≥37.5em): horizontal 2-col grid (mapa LEFT full height + info RIGHT) */
/* outer grid: vždy 1-col stacked, max-width omezuje aby se karta na desktopu
   nepřetahovala do plné šířky stránky. Zarovnáno doleva. */
.pdu-pag-osoby-grid.is-region {
  grid-template-columns: 1fr;
  gap: 1.25em;
  max-width: 52.5em;  /* scale 1.25× pro větší karty */
  margin-left: 0;
  margin-right: auto;
}
/* Scale celé karty o 25 % (em-based proportional sizing) */
.pdu-pag-osoby-grid.is-region > .pdu-pag-osoba { font-size: 1.25em; }

.pdu-pag-osoby-grid.is-region > .pdu-pag-osoba {
  position: relative;  /* anchor pro absolute region badge */
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  padding: 0 1.25em 1.25em;
  border: 0; border-top: 0.25em solid var(--pdu-barva-zelena-akcent);
  background: var(--pdu-barva-bila);
  border-radius: var(--pdu-radius-card);
  box-shadow: var(--pdu-stin-stredni);
  overflow: hidden;
  transition: all var(--pdu-prechod-dur-stredni) ease;
}
.pdu-pag-osoby-grid.is-region > .pdu-pag-osoba:hover {
  box-shadow: 0 0.875em 2em rgba(0, 180, 110, .18);
  transform: translateY(-0.375em);
  border-color: var(--pdu-barva-zelena-akcent);
}
/* MOBILE (<37.5em): mapa jako TOP HERO + avatar overlay (původní design) */
.pdu-pag-osoby-grid.is-region > .pdu-pag-osoba > .pdu-pag-osoba-mapa-mini {
  width: calc(100% + 2.5em);
  max-width: none;
  margin: 0 -1.25em 0;
  aspect-ratio: 4/3;
  padding: 0.5em;
  border-radius: 0;
  position: relative;
}
.pdu-pag-osoby-grid.is-region > .pdu-pag-osoba > .pdu-pag-osoba-region {
  position: absolute;
  top: 0.625em; right: 0.625em;
  background: var(--pdu-barva-bila);
  z-index: 2;
  margin: 0;
  box-shadow: var(--pdu-stin-jemny);
}
.pdu-pag-osoby-grid.is-region > .pdu-pag-osoba > .pdu-pag-osoba-foto {
  width: 6.5em; height: 6.5em;
  margin: -3.25em 0 0.625em;
  border: 0.25em solid var(--pdu-barva-bila);
  background: var(--pdu-barva-bila);
  box-shadow: var(--pdu-stin-jemny);
  position: relative;
  z-index: 3;
}
.pdu-pag-osoby-grid.is-region > .pdu-pag-osoba > .pdu-pag-osoba-name {
  margin: 0 0 0.25em;
}
.pdu-pag-osoby-grid.is-region > .pdu-pag-osoba > .pdu-pag-osoba-role {
  margin: 0 0 0.75em;
}
.pdu-pag-osoby-grid.is-region > .pdu-pag-osoba > .pdu-pag-osoba-kontakty {
  align-items: center;
}

/* TABLET+ (≥37.5em): horizontal 3-col layout — mapa | avatar | text.
   Avatar inline vedle jména (zabírá řady 1-2 vertikálně, name + role v col 3 vedle něj). */
@media (min-width: 37.5em) {
  .pdu-pag-osoby-grid.is-region > .pdu-pag-osoba {
    display: grid;
    grid-template-columns: 16em auto 1fr;
    grid-template-rows: auto auto auto 1fr;
    column-gap: 1em;
    row-gap: 0;
    padding: 1.25em 1.5em 1.25em 0;
    align-items: start;
  }
  .pdu-pag-osoby-grid.is-region > .pdu-pag-osoba > .pdu-pag-osoba-mapa-mini {
    grid-column: 1;
    grid-row: 1 / -1;
    width: 100%; max-width: none;
    margin: -1.25em 0;
    aspect-ratio: auto;
    height: calc(100% + 2.5em);
    align-self: stretch;
    padding: 0.75em;
    display: flex; align-items: center; justify-content: center;
  }
  .pdu-pag-osoby-grid.is-region > .pdu-pag-osoba > .pdu-pag-osoba-region {
    top: 0.625em; left: 0.625em; right: auto;
    font-size: 0.75em;
  }
  /* Avatar — col 2, spans rows 1-2 (name + role řady), vertikálně centrovaný */
  .pdu-pag-osoby-grid.is-region > .pdu-pag-osoba > .pdu-pag-osoba-foto {
    grid-column: 2; grid-row: 1 / 3;
    width: 4.5em; height: 4.5em;
    margin: 0 0.5em 0 0;
    border: 0.1875em solid var(--pdu-barva-bila);
    align-self: center;
  }
  .pdu-pag-osoby-grid.is-region > .pdu-pag-osoba > .pdu-pag-osoba-name {
    grid-column: 3; grid-row: 1;
    text-align: left;
    margin: 0 0 0.125em;
    padding: 0;
    font-size: 1.15em;
    align-self: end;
  }
  .pdu-pag-osoby-grid.is-region > .pdu-pag-osoba > .pdu-pag-osoba-role {
    grid-column: 3; grid-row: 2;
    text-align: left;
    margin: 0;
    padding: 0;
    align-self: start;
  }
  /* Kontakty — span obou info kolumn (col 2-3), pod avatarem + name/role blokem */
  .pdu-pag-osoby-grid.is-region > .pdu-pag-osoba > .pdu-pag-osoba-kontakty {
    grid-column: 2 / -1; grid-row: 3;
    padding: 0.875em 0 0;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.375em;
    text-align: left;
  }
}

/* ──────────────────────────────────────────────────────────────
   POBOČKY GRID — 7 karet s mapou + adresou + tel + CTA (2026-05-25)
   Použití: <section class="pdu-pag-pobocky-grid">  7× <article class="pdu-pag-pobocka">  ... </article>  </section>
   Auto-fit: desktop 3 col, tablet 2 col, mobile 1 col.
   ────────────────────────────────────────────────────────────── */
.pdu-pag-pobocky-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1em;
  margin: 0.5em auto;
}
@media (min-width: 37.5em) {
  .pdu-pag-pobocky-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 56em) {
  .pdu-pag-pobocky-grid { grid-template-columns: repeat(3, 1fr); }
  /* osamocený poslední (např. 7. ze 7) v 3-col gridu → centruj */
  .pdu-pag-pobocky-grid > .pdu-pag-pobocka:last-child:nth-child(3n+1) { grid-column: 2; }
}
.pdu-pag-pobocka {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
  padding: 1em 1em 1.25em;
  background: var(--pdu-barva-bila);
  border: 1px solid var(--pdu-barva-okraj-jemny);
  border-radius: var(--pdu-radius-card);
  text-align: center;
  box-shadow: var(--pdu-stin-jemny);
}
.pdu-pag-pobocka h3 {
  margin: 0;
  font-size: 1.1em;
  color: var(--pdu-barva-tmavomodra);
  font-weight: 800;
}
.pdu-pag-pobocka img {
  max-width: 75%;
  height: auto;
  display: block;
}
.pdu-pag-pobocka-adresa {
  font-size: 0.95em;
  color: var(--pdu-barva-text-sekundarni);
  line-height: 1.4;
  margin: 0;
}
.pdu-pag-pobocka-tel {
  font-size: 1em;
  font-weight: 700;
  color: var(--pdu-barva-tmavomodra);
  text-decoration: none;
}
.pdu-pag-pobocka-tel:hover { color: var(--pdu-barva-zelena-akcent); }
.pdu-pag-pobocka .pdu-pag-btn-primary,
.pdu-pag-pobocka .pdu-pag-btn-outline {
  margin-top: auto;
  font-size: 0.875em;
  padding: 0.5em 1em;
}

/* ──────────────────────────────────────────────────────────────
   NÁŘADÍ KARTIČKY — pro půjčovnu (foto + parametry + popis + CTA)
   Použití: <div class="pdu-pag-naradi-grid">  N× <article class="pdu-pag-naradi-karta">  ...  </article>  </div>
   Auto-fit: 1/2/3 sloupce dle počtu karet a šířky.
   ────────────────────────────────────────────────────────────── */
.pdu-pag-naradi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19em, 1fr));
  gap: 1.25em;
  margin: 1em 0;
}
/* Modifier .is-horizontal — karty stacked vertikálně, každá s horizontálním layoutem
   (foto vlevo, obsah vpravo). Pro stránky s několika málo kartami (mobilní oplocení 3 ks),
   kde 3-col grid vytváří úzké karty s natěsnaným obsahem. Default (bez modifieru) zůstává
   auto-fit grid pro stránky s mnoha kartami (pujcovna 8 ks). */
.pdu-pag-naradi-grid.is-horizontal { grid-template-columns: 1fr; gap: 1em; }
.pdu-pag-naradi-grid.is-horizontal > .pdu-pag-naradi-karta {
  flex-direction: row;
  align-items: center;
  text-align: left;
  gap: 1.5em;
  padding: 1.25em 1.5em;
}
.pdu-pag-naradi-grid.is-horizontal > .pdu-pag-naradi-karta > .pdu-pag-naradi-karta-foto {
  flex: 0 0 12em;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pdu-pag-naradi-grid.is-horizontal > .pdu-pag-naradi-karta > .pdu-pag-naradi-karta-foto img {
  width: 100%; height: auto;
}
.pdu-pag-naradi-grid.is-horizontal > .pdu-pag-naradi-karta > .pdu-pag-naradi-karta-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 0.5em;
}
.pdu-pag-naradi-grid.is-horizontal > .pdu-pag-naradi-karta > .pdu-pag-naradi-karta-body > h3 {
  text-align: left; padding-bottom: 0; margin: 0;
}
.pdu-pag-naradi-grid.is-horizontal > .pdu-pag-naradi-karta > .pdu-pag-naradi-karta-body > .pdu-pag-naradi-cena {
  justify-content: flex-start; margin: 0;
}
.pdu-pag-naradi-grid.is-horizontal > .pdu-pag-naradi-karta > .pdu-pag-naradi-karta-body > p {
  margin: 0;
}
.pdu-pag-naradi-grid.is-horizontal > .pdu-pag-naradi-karta > .pdu-pag-naradi-karta-body > .pdu-pag-naradi-karta-akce {
  justify-content: flex-start; margin-top: 0.25em;
}
/* Mobile fallback (≤47em): zpět na vertikální stack (foto nahoře, obsah pod ní). */
@media (max-width: 47em) {
  .pdu-pag-naradi-grid.is-horizontal > .pdu-pag-naradi-karta {
    flex-direction: column; align-items: center; text-align: center; gap: 0.625em;
    padding: 1em 1em 1.25em;
  }
  .pdu-pag-naradi-grid.is-horizontal > .pdu-pag-naradi-karta > .pdu-pag-naradi-karta-foto { flex: 0 0 auto; }
  .pdu-pag-naradi-grid.is-horizontal > .pdu-pag-naradi-karta > .pdu-pag-naradi-karta-body { text-align: center; align-items: center; }
  .pdu-pag-naradi-grid.is-horizontal > .pdu-pag-naradi-karta > .pdu-pag-naradi-karta-body > h3 { text-align: center; }
  .pdu-pag-naradi-grid.is-horizontal > .pdu-pag-naradi-karta > .pdu-pag-naradi-karta-body > .pdu-pag-naradi-cena { justify-content: center; }
  .pdu-pag-naradi-grid.is-horizontal > .pdu-pag-naradi-karta > .pdu-pag-naradi-karta-body > .pdu-pag-naradi-karta-akce { justify-content: center; }
}
.pdu-pag-naradi-karta {
  display: flex;
  flex-direction: column;
  gap: 0.625em;
  padding: 1.125em;
  background: var(--pdu-barva-bila);
  border: 1px solid var(--pdu-barva-okraj-jemny);
  border-radius: var(--pdu-radius-card);
  box-shadow: var(--pdu-stin-jemny);
}
.pdu-pag-naradi-karta-foto {
  text-align: center;
  margin: 0;
  padding: 0.75em;
  background: var(--pdu-barva-pozadi-sekce);
  border-radius: 0.5em;
}
.pdu-pag-naradi-karta-foto img {
  max-width: 100%;
  max-height: 9em;
  height: auto;
  width: auto;
  display: block;
  margin: 0 auto;
  object-fit: contain;
}
.pdu-pag-naradi-karta h3 {
  margin: 0;
  font-size: 1.35em;
  font-weight: 800;
  color: var(--pdu-barva-tmavomodra);
  text-align: center;
  line-height: 1.25;
  letter-spacing: -0.005em;
}
.pdu-pag-naradi-cena {
  display: flex;
  gap: 0.5em;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
}
.pdu-pag-naradi-cena-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2em;
  padding: 0.625em 1.125em;
  background: var(--pdu-barva-pozadi-sekce);
  border-radius: 0.625em;
  border: 1px solid var(--pdu-barva-okraj-jemny);
  font-size: 1em;
  min-width: 8.5em;
}
.pdu-pag-naradi-cena-badge .pdu-pag-naradi-cena-label {
  color: var(--pdu-barva-text-sekundarni);
  font-weight: 600;
  font-size: 0.8125em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pdu-pag-naradi-cena-badge strong {
  font-weight: 800;
  color: var(--pdu-barva-tmavomodra);
  font-size: 1.3125em;
}
.pdu-pag-naradi-cena-badge.is-najemne strong { color: var(--pdu-barva-zelena-akcent); }
.pdu-pag-naradi-karta p,
.pdu-pag-naradi-karta ul {
  margin: 0;
  font-size: 0.92em;
  line-height: 1.5;
  color: var(--pdu-barva-text-sekundarni);
}
.pdu-pag-naradi-karta ul { padding-left: 1.25em; }
.pdu-pag-naradi-karta-akce {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin-top: auto;
  padding-top: 0.5em;
}
.pdu-pag-naradi-karta-akce a { flex: 1; min-width: 8em; text-align: center; }


/* ╔══════════════════════════════════════════════════════════════
   🎠 SEKCE 6. CAROUSEL (kolečka kategorií — scroll-snap)
   ──────────────────────────────────────────────────────────────
   Popis:
   - Horizontální scroll-snap carousel (touch-friendly)
   - 2 karty na mobilu (<37.5em), 3 (≥37.5em), 4 (≥62em)
   - Šipky vlevo/vpravo na desktopu (display:none <48em)
   - Dots na mobilu (display:flex max-768)
   - JS: data-c-prev/-next/-dots atributy → script-pages.js sekce CAROUSEL
   - Karta: bílá s 100% padding-top placeholder pro fotku, hover scale obrázku

   HTML:
     <div class="pdu-pag-cwrap">
       <button class="pdu-pag-arrow pdu-pag-arrow-left" data-c-prev="c-ID">‹</button>
       <div class="pdu-pag-carousel" id="c-ID">
         <div class="pdu-pag-karta">
           <div class="pdu-pag-foto"><img src="..."></div>
           <div class="pdu-pag-nazev"><strong>Název</strong><span>Popis</span></div>
           <a href="..." class="pdu-pag-link" title="..."></a>
         </div>
         ... N×
       </div>
       <button class="pdu-pag-arrow pdu-pag-arrow-right" data-c-next="c-ID">›</button>
     </div>
     <div class="pdu-pag-dots" data-c-dots="c-ID">&nbsp;</div>
   ══════════════════════════════════════════════════════════════ */
.pdu-pag-cwrap { position: relative; width: 100%; padding: 0; isolation: isolate; }
.pdu-pag-carousel {
  display: flex; flex-wrap: nowrap; align-items: stretch;
  overflow-x: auto; overscroll-behavior-x: none;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y; gap: 0.75em;
  /* L/R padding 0.75em = room pro Shoptet globální :focus outline (2px solid green
     + 2px offset), aby se na první/poslední viditelné kartě nesříznul okraj outline-u
     o overflow-x:auto clip. */
  padding: 0.5em 0.75em 0.75em; margin: 0;
  scroll-padding-inline: 0.75em;
  scroll-behavior: smooth; scrollbar-width: thin;
  scrollbar-color: var(--pdu-barva-okraj-jemny) var(--pdu-barva-sede-svetla);
}
/* custom scrollbar (jemný 0.375em, hover zelený) */
.pdu-pag-carousel::-webkit-scrollbar { height: 0.375em; }
.pdu-pag-carousel::-webkit-scrollbar-track { background: var(--pdu-barva-sede-svetla); border-radius: 0.25em; }
.pdu-pag-carousel::-webkit-scrollbar-thumb { background: var(--pdu-barva-okraj-jemny); border-radius: 0.25em; }
.pdu-pag-carousel::-webkit-scrollbar-thumb:hover { background: var(--pdu-barva-zelena-akcent); }

/* responsivní šířka karty: 2/3/4 sloupce
   Karty jsou MÍRNĚ ŠIRŠÍ než matematicky exact 50/33/25 % — schválně, aby 4./5. karta
   začínala 0.25–0.5em ZA pravým okrajem viewportu a nebyl vidět její 1px border-left
   jako tenká vertikální čárka. Karty pak částečně přesahují do padding-right (0.75em),
   takže poslední viditelná karta nemá clipping. */
.pdu-pag-carousel .pdu-pag-karta { flex: 0 0 calc(50% - 0.25em); max-width: calc(50% - 0.25em); scroll-snap-align: start; }
@media (min-width: 37.5em) { .pdu-pag-carousel .pdu-pag-karta { flex: 0 0 calc(33.333% - 0.375em); max-width: calc(33.333% - 0.375em); } }
@media (min-width: 62em) { .pdu-pag-carousel .pdu-pag-karta { flex: 0 0 calc(25% - 0.4375em); max-width: calc(25% - 0.4375em); } }

.pdu-pag-karta {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--pdu-barva-okraj-jemny); border-radius: var(--pdu-radius-card);
  background: var(--pdu-barva-bila); overflow: hidden;
  transition: all var(--pdu-prechod-dur-stredni) ease;
  text-decoration: none; min-height: 17.5em;
  isolation: isolate;
}
.pdu-pag-karta:hover { box-shadow: var(--pdu-stin-karta-hover); border-color: var(--pdu-barva-zelena-akcent); transform: translateY(-0.1875em); }

/* fotka karty — padding-top:100% = čtvercový aspect-ratio fallback */
.pdu-pag-foto { width: 100%; padding-top: 100%; position: relative; background: var(--pdu-barva-pozadi-foto); flex-shrink: 0; }
.pdu-pag-foto img {
  position: absolute !important; top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important; max-width: none !important;
  object-fit: contain; padding: 0.875em; box-sizing: border-box;
  border-radius: 0 !important; border: none !important; margin: 0 !important;
  transition: transform var(--pdu-prechod-dur-stredni) ease;
}
.pdu-pag-karta:hover .pdu-pag-foto img { transform: scale(1.08); }

/* název karty pod fotkou */
.pdu-pag-nazev {
  padding: 0.875em 0.75em 1em; line-height: 1.3; color: var(--pdu-barva-tmavomodra); background: var(--pdu-barva-bila);
  border-top: 1px solid var(--pdu-barva-okraj-svetly); flex-grow: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.3125em; text-align: center; min-height: 5.9375em; word-break: break-word;
}
.pdu-pag-nazev strong { font-size: 1.18em; font-weight: 800; color: var(--pdu-barva-tmavomodra); }
.pdu-pag-nazev span   { font-size: .95em;  font-weight: 500; color: var(--pdu-barva-text-sekundarni); line-height: 1.45; }
/* overlay link — celá karta klikatelná */
.pdu-pag-link { position: absolute; inset: 0; z-index: 10; text-decoration: none !important; }

/* Šipky carouselu — kulaté tlačítka 38×38 px (skryté <768) */
/* Mobile-first: arrows defaultně skryté (touch swipe na mobile), zobrazí se na ≥48em (M4 refactor 2026-05-15) */
.pdu-pag-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 2.375em; height: 2.375em;
  background: var(--pdu-barva-bila); border: 1px solid var(--pdu-barva-okraj-jemny); border-radius: 50%;
  font-size: 1.375em; color: var(--pdu-barva-tmavomodra); cursor: pointer; z-index: 2;
  box-shadow: var(--pdu-stin-jemny);
  display: none;  /* mobile-first: hidden default */
  align-items: center; justify-content: center;
  transition: all var(--pdu-prechod-dur-stredni) ease;
  line-height: 0; padding-bottom: 0.1875em;
}
.pdu-pag-arrow:hover { background: var(--pdu-barva-zelena-akcent); color: var(--pdu-barva-bila); border-color: var(--pdu-barva-zelena-akcent); }
.pdu-pag-arrow-left  { left: -1.25em; }
.pdu-pag-arrow-right { right: -1.25em; }
@media (min-width: 48em) { .pdu-pag-arrow { display: flex; } }

/* Dots (mobilní pagination) — aktivní dot = zelený pill (mobile-first: shown default, hide na desktop) */
.pdu-pag-dots { display: flex; gap: 0.375em; justify-content: center; padding: 0.5em 0 0; }
.pdu-pag-dots button {
  width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--pdu-barva-sede-stredni);
  border: none; padding: 0; cursor: pointer;
  transition: all var(--pdu-prechod-dur-stredni) ease;
}
.pdu-pag-dots button.active { background: var(--pdu-barva-zelena-akcent); width: 1.375em; border-radius: 6.25em; }
@media (min-width: 48em) { .pdu-pag-dots { display: none; } }


/* ╔══════════════════════════════════════════════════════════════
   🌙 SEKCE 7. MID CTA (tmavé pozadí s fotkou týmu jako overlay)
   ──────────────────────────────────────────────────────────────
   Popis:
   - Plná šířka CTA pruh mezi sekcemi (urgency, konverzní hook)
   - Background: gradient overlay + fotka týmu (3 breakpointy: 768w / 1280w / 1920w)
   - Bílý text s text-shadow pro čitelnost
   - Padding 38×26 (desktop víc), border-radius XL

   HTML:
     <section class="pdu-pag-cta-mid">
       <h3 class="pdu-pag-cta-mid-title">Nechcete řešit montáž sami?</h3>
       <p class="pdu-pag-cta-mid-text">Postavíme plot na klíč po celé ČR.</p>
       <a href="/realizace/" class="pdu-pag-btn-cta">Chci nabídku →</a>
     </section>
   ══════════════════════════════════════════════════════════════ */
.pdu-pag-cta-mid {
  background-color: var(--pdu-barva-tmavomodra);
  background-image: linear-gradient(rgba(25, 25, 50, .55), rgba(25, 25, 50, .55)),
                    url('https://cdn.myshoptet.com/usr/www.levne-pletivo.cz/user/documents/upload/fotografie/team/tym-ploty-dobry-768w.jpg');
  background-size: cover; background-position: center center; background-repeat: no-repeat;
  color: var(--pdu-barva-bila); padding: 2.375em 1.625em;
  border-radius: var(--pdu-radius-xl); text-align: center; margin: 2em 0;
}
/* responsivní background-image — 3 velikosti (768w / 1280w / 1920w) */
@media (min-width: 48em) {
  .pdu-pag-cta-mid {
    background-image: linear-gradient(rgba(25, 25, 50, .55), rgba(25, 25, 50, .55)),
                      url('https://cdn.myshoptet.com/usr/www.levne-pletivo.cz/user/documents/upload/fotografie/team/tym-ploty-dobry-1280w.jpg');
  }
}
@media (min-width: 90em) {
  .pdu-pag-cta-mid {
    background-image: linear-gradient(rgba(25, 25, 50, .55), rgba(25, 25, 50, .55)),
                      url('https://cdn.myshoptet.com/usr/www.levne-pletivo.cz/user/documents/upload/fotografie/team/tym-ploty-dobry-1920w.jpg');
  }
}
/* Selektory scopované přes .pdu-pag-cta-mid (specificita 0,2,0/0,2,1) — MUSÍ přebít
   `.pdu-pag-page h3/h4` (0,1,1), jinak tmavý titulek na tmavé fotce zmizí (regrese 2026-06-26). */
.pdu-pag-cta-mid .pdu-pag-cta-mid-title { font-size: 1.6em;  font-weight: 800; margin: 0 0 0.75em; color: var(--pdu-barva-bila); text-shadow: 0 1px 0.125em rgba(0, 0, 0, .4); }
.pdu-pag-cta-mid .pdu-pag-cta-mid-text  { font-size: 1.12em; line-height: 1.55; margin: 0 auto 1.375em; max-width: 38.75em; color: var(--pdu-barva-bila); text-shadow: 0 1px 0.125em rgba(0, 0, 0, .4); }
/* cta-row uvnitř cta-mid je centrovaný (parent má text-align: center, ale flex potřebuje justify-content) */
.pdu-pag-cta-mid .pdu-pag-cta-row { justify-content: center; }

/* ── Utility třídy = náhrada inline stylů (deploy-ready kontakt stránky: /kontakty/, /kontakt-obchodni-zastupci/) ── */
.pdu-pag-cta-mid-text.is-meta { font-size: 0.92em; opacity: 0.85; margin-bottom: 1.25em; }
.pdu-pag-cta-mid-actions { display: flex; flex-wrap: wrap; gap: 0.625em; justify-content: center; }
.pdu-pag-btn-outline.is-on-fill { background: rgba(255, 255, 255, .9); }
.pdu-pag-form-side-note { font-size: 0.88em; color: var(--pdu-barva-text-sekundarni); margin: 0.625em 0 0; line-height: 1.5; }
.pdu-pag-btn-center { text-align: center; margin: 1.75em 0 2em; }


/* ╔══════════════════════════════════════════════════════════════
   📞 SEKCE 8. KONTAKTNÍ KARTA (foto + body + akce)
   ──────────────────────────────────────────────────────────────
   Popis:
   - 1-col na mobilu, 5/7 split na ≥62em (foto vlevo, body vpravo)
   - Foto 220 px max, centrované
   - 2 kontakt tlačítka (tel + mail) v zelené pill
   - Hover na tlačítku: bg → zelená, ikona filter invert

   HTML:
     <section class="pdu-pag-kontakt">
       <div class="pdu-pag-kontakt-foto"><img src="..."></div>
       <div class="pdu-pag-kontakt-body">
         <h3>Mluvte přímo s námi</h3>
         <p>Otevřeno Po-Pá 7-17...</p>
         <div class="pdu-pag-kontakt-akce">
           <a href="tel:..." class="pdu-pag-kontakt-tel"><img class="pdu-pag-kontakt-ico"><span>+420 ...</span></a>
           <a href="mailto:..." class="pdu-pag-kontakt-mail"><img class="pdu-pag-kontakt-ico"><span>...@</span></a>
           <a href="/kontakty/" class="pdu-pag-kontakt-vsechny">Všechny pobočky →</a>
         </div>
       </div>
     </section>
   ══════════════════════════════════════════════════════════════ */
.pdu-pag-kontakt {
  display: grid; grid-template-columns: 1fr; gap: 0;
  margin: 2em 0 1.5em; background: var(--pdu-barva-bila);
  border: 1px solid var(--pdu-barva-okraj-jemny); border-radius: var(--pdu-radius-xl);
  overflow: hidden; box-shadow: var(--pdu-stin-stredni);
}
@media (min-width: 62em) { .pdu-pag-kontakt { grid-template-columns: 5fr 7fr; } }

/* levá strana — fotka s neutrálním bílým pozadím */
.pdu-pag-kontakt-foto {
  background: var(--pdu-barva-bila); min-height: 12.5em; position: relative;
  display: flex; align-items: center; justify-content: center; padding: 1.125em;
}
.pdu-pag-kontakt-foto img {
  max-width: 13.75em !important; max-height: 13.75em !important;
  width: 100% !important; height: auto !important;
  object-fit: contain; display: block;
  margin: 0 auto !important; padding: 0 !important;
  border-radius: 0 !important; border: none !important;
  position: relative !important; top: auto !important; left: auto !important;
}

/* pravá strana — texty + akce */
.pdu-pag-kontakt-body    { padding: 1.625em 1.75em; }
.pdu-pag-kontakt-body h3 { margin: 0 0 0.625em !important; font-size: 1.45em; font-weight: 800; color: var(--pdu-barva-tmavomodra); }
.pdu-pag-kontakt-body p  { margin: 0 0 1.125em !important; color: var(--pdu-barva-text-sekundarni); line-height: 1.6; font-size: 1.02em; }
.pdu-pag-kontakt-akce    { display: flex; flex-direction: column; gap: 0.625em; }
/* tel/mail tlačítka — světlezelené pill s ikonou */
.pdu-pag-kontakt-tel,
.pdu-pag-kontakt-mail {
  display: inline-flex; align-items: center; gap: 0.625em;
  background: var(--pdu-barva-zelena-svetla-2); color: var(--pdu-barva-tmavomodra) !important; text-decoration: none !important;
  padding: 0.8125em 1em; border-radius: 0.5em; font-weight: 700; font-size: 1.05em;
  border: 1px solid var(--pdu-barva-okraj-zeleny-jemny);
  transition: all var(--pdu-prechod-dur-stredni) ease;
}
.pdu-pag-kontakt-tel:hover,
.pdu-pag-kontakt-mail:hover { background: var(--pdu-barva-zelena-akcent); color: var(--pdu-barva-bila) !important; border-color: var(--pdu-barva-zelena-akcent); }
/* ikona 22×22 px, hover invertuje na bílou */
.pdu-pag-kontakt-ico {
  width: 1.375em !important; height: 1.375em !important;
  max-width: 1.375em !important; max-height: 1.375em !important;
  flex-shrink: 0; object-fit: contain;
  margin: 0 !important; padding: 0 !important;
  border: none !important; border-radius: 0 !important;
  position: relative !important; top: auto !important; left: auto !important;
  transition: filter var(--pdu-prechod-dur-stredni) ease;
}
.pdu-pag-kontakt-tel:hover  .pdu-pag-kontakt-ico,
.pdu-pag-kontakt-mail:hover .pdu-pag-kontakt-ico { filter: brightness(0) invert(1); }
/* "Všechny pobočky →" — secondary text link */
.pdu-pag-kontakt-vsechny       { color: var(--pdu-barva-zelena-akcent) !important; font-weight: 700; text-decoration: none !important; padding: 0.5em 0 0; font-size: 1em; }
.pdu-pag-kontakt-vsechny:hover { text-decoration: underline !important; }


/* ╔══════════════════════════════════════════════════════════════
   🟢 SEKCE 9. HODNOCENÍ TLAČÍTKA (3 odkazy plné šířky)
   ──────────────────────────────────────────────────────────────
   Popis:
   - 3 zelená plnoplošná tlačítka pro hodnocení/galerie/reference
   - Mobil: stack column, ≥62em: 3 v řádku (flex:1)
   - Každé tlačítko = body (nadpis + popis pill) + arrow šipka
   - Hover: invert na bílé pozadí

   HTML:
     <div class="pdu-pag-hodnoceni">
       <div class="pdu-pag-hodnoceni-item">
         <a class="pdu-pag-hodnoceni-btn" href="...">
           <span class="pdu-pag-hodnoceni-btn-body">
             <span class="pdu-pag-hodnoceni-btn-nadpis">Hodnocení e-shopu</span>
             <span class="pdu-pag-hodnoceni-btn-popis">Co lidé říkají?</span>
           </span>
           <span class="pdu-pag-hodnoceni-btn-arrow">→</span>
         </a>
       </div>
       ... 2×
     </div>
   ══════════════════════════════════════════════════════════════ */
.pdu-pag-hodnoceni { display: flex; flex-direction: column; gap: 0.625em; margin: 1.25em 0 1.5625em; }
@media (min-width: 62em) {
  .pdu-pag-hodnoceni { flex-direction: row; align-items: stretch; }
  .pdu-pag-hodnoceni-item { flex: 1; }
  .pdu-pag-hodnoceni-btn  { height: 100%; }
}
.pdu-pag-hodnoceni-item {
  width: 100%; max-width: 30em; margin-bottom: 0.125em;
  transition: transform var(--pdu-prechod-dur-stredni) ease;
  box-sizing: border-box;
}
.pdu-pag-hodnoceni-item:hover { transform: translateY(-0.1875em); }
.pdu-pag-hodnoceni-btn {
  display: flex; align-items: center;
  background-color: var(--pdu-barva-zelena-akcent); border: 1px solid var(--pdu-barva-zelena-akcent);
  background-image: var(--pdu-grad-btn-corner), var(--pdu-grad-btn-glossy);
  border-radius: var(--pdu-radius-m); overflow: hidden;
  text-decoration: none !important; cursor: pointer; width: 100%;
  transition: all var(--pdu-prechod-dur-stredni) ease;
  box-shadow: 0 0 0 1px var(--pdu-barva-okraj-jemny);
}
.pdu-pag-hodnoceni-btn:hover {
  background-color: var(--pdu-barva-bila); border-color: var(--pdu-barva-tmavomodra);
  background-image: var(--pdu-grad-btn-hover-corner), var(--pdu-grad-btn-hover-glossy);
}
.pdu-pag-hodnoceni-btn:hover .pdu-pag-hodnoceni-btn-nadpis,
.pdu-pag-hodnoceni-btn:hover .pdu-pag-hodnoceni-btn-popis,
.pdu-pag-hodnoceni-btn:hover .pdu-pag-hodnoceni-btn-arrow { color: var(--pdu-barva-tmavomodra); }
.pdu-pag-hodnoceni-btn:hover .pdu-pag-hodnoceni-btn-popis { background: rgba(25, 25, 50, .08); }
.pdu-pag-hodnoceni-btn-body { flex: 1; padding: 0.875em 0.875em 0.75em 1em; display: flex; flex-direction: column; gap: 0.25em; }
.pdu-pag-hodnoceni-btn-nadpis { font-size: 1.02em; font-weight: 700; color: var(--pdu-barva-bila); display: block; transition: color var(--pdu-prechod-dur-stredni) ease; }
/* popis = malý pill uvnitř s polopruhlednym pozadím */
.pdu-pag-hodnoceni-btn-popis {
  font-size: .78em; background: rgba(255, 255, 255, .2);
  padding: 0.125em 0.5em; border-radius: 0.1875em;
  color: rgba(255, 255, 255, .95);
  display: inline-block; align-self: flex-start;
  transition: all var(--pdu-prechod-dur-stredni) ease;
}
/* SVG arrow šipka vpravo — sjednoceno s .pdu-sec-snav-arrow pattern (display:block + em size + slide na hover) */
.pdu-pag-hodnoceni-btn-arrow {
  display: block; flex-shrink: 0;
  width: 1.5em; height: 1.5em;
  margin: 0 1em;
  color: rgba(255, 255, 255, .85);
  transition: transform var(--pdu-prechod-dur-stredni) ease, color var(--pdu-prechod-dur-stredni) ease;
}
.pdu-pag-hodnoceni-btn:hover .pdu-pag-hodnoceni-btn-arrow { transform: translateX(0.1875em); }


/* ╔══════════════════════════════════════════════════════════════
   📇 SEKCE 10. HOD KARTY (FB hodnocení / DOD — 2-col split)
   ──────────────────────────────────────────────────────────────
   Popis:
   - Flex 2 karet (flex:1 každá), min-width 16.25em → auto-wrap mobil
   - Bílá karta s jemným borderem
   - Plnoplošné tlačítko dole (.pdu-pag-hod-karta-btn) — 2 varianty: FB modrá, DOD zelená

   HTML:
     <div class="pdu-pag-hod-karty">
       <div class="pdu-pag-hod-karta">
         <h2>Ohodnoťte nás na FB</h2>
         <p>Přejděte na Facebook...</p>
         <ul><li>Nákup</li><li>Web</li></ul>
         <div><a class="pdu-pag-hod-karta-btn pdu-pag-hod-karta-btn-fb" href="...">Ohodnoťte nás na FB</a></div>
       </div>
       <div class="pdu-pag-hod-karta">
         ... pdu-pag-hod-karta-btn-green ...
       </div>
     </div>
   ══════════════════════════════════════════════════════════════ */
.pdu-pag-hod-karty { display: flex; flex-wrap: wrap; gap: 0.9375em; margin-top: 0.3125em; }
.pdu-pag-hod-karta {
  flex: 1; min-width: 16.25em;
  background: var(--pdu-barva-bila); border: 1px solid var(--pdu-barva-okraj-jemny);
  border-radius: var(--pdu-radius-card); padding: 1.25em 1.375em;
  display: flex; flex-direction: column;
  box-shadow: var(--pdu-stin-jemny);
}
.pdu-pag-hod-karta h2 { margin: 0 0 0.625em; font-size: 1.25em; font-weight: 800; color: var(--pdu-barva-tmavomodra); }
.pdu-pag-hod-karta p,
.pdu-pag-hod-karta ul { font-size: .95em; margin: 0 0 0.5em; color: var(--pdu-barva-tekst-zakladni); line-height: 1.55; }
.pdu-pag-hod-karta ul { padding-left: 1.25em; }
.pdu-pag-hod-karta li { margin: 0.1875em 0; }
/* CTA wrapper na dně karty (flex:auto push-to-bottom) */
.pdu-pag-hod-karta-akce { margin-top: auto; padding-top: 0.875em; }

/* button base (full-width, bordered, padding 14×24) — 1px gray ring jako hero karta */
.pdu-pag-hod-karta-btn {
  display: block; width: 100%;
  padding: 0.875em 1.5em; text-align: center;
  font-size: 1.02em; font-weight: 700;
  text-decoration: none !important; cursor: pointer;
  border: 1px solid; border-radius: var(--pdu-radius-m);
  transition: all var(--pdu-prechod-dur-stredni) ease;
  box-shadow: 0 0 0 1px var(--pdu-barva-okraj-jemny);
}
/* FB modré (#3c63ab) — glossy gradient (z global.css) */
.pdu-pag-hod-karta-btn-fb {
  background-color: var(--pdu-barva-facebook);
  background-image: var(--pdu-grad-btn-corner), var(--pdu-grad-btn-glossy);
  color: var(--pdu-barva-bila) !important;
  border-color: var(--pdu-barva-facebook);
}
.pdu-pag-hod-karta-btn-fb:hover {
  background-color: var(--pdu-barva-bila);
  background-image: var(--pdu-grad-btn-hover-corner), var(--pdu-grad-btn-hover-glossy);
  color: var(--pdu-barva-facebook) !important;
  border-color: var(--pdu-barva-facebook);
}
/* zelená (brand akcent) — glossy gradient (z global.css) */
.pdu-pag-hod-karta-btn-green {
  background-color: var(--pdu-barva-zelena-akcent);
  background-image: var(--pdu-grad-btn-corner), var(--pdu-grad-btn-glossy);
  color: var(--pdu-barva-bila) !important;
  border-color: var(--pdu-barva-zelena-akcent);
}
.pdu-pag-hod-karta-btn-green:hover {
  background-color: var(--pdu-barva-bila);
  background-image: var(--pdu-grad-btn-hover-corner), var(--pdu-grad-btn-hover-glossy);
  color: var(--pdu-barva-tmavomodra) !important;
  border-color: var(--pdu-barva-tmavomodra);
}

/* CTA wrapper uvnitř .pdu-pag-hod-karta — sticky bottom (využívá flex-direction:column na parentu) */
.pdu-pag-hod-karta-cta { margin-top: auto; padding-top: 0.875em; }


/* ╔══════════════════════════════════════════════════════════════
   📝 SEKCE 11. FINAL TEXT (závěrečný footnote-style)
   ──────────────────────────────────────────────────────────────
   Popis:
   - Centrovaný malý text 0.95em, šedá barva
   - Top border (jemný šedý) jako oddělovač
   - Slouží jako poznámka pod čarou na konci stránky

   HTML:
     <p class="pdu-pag-final">
       Oplocení prodáváme od 2012 — viz
       <a href="/reference/">spokojení zákazníci</a>.
     </p>
   ══════════════════════════════════════════════════════════════ */
.pdu-pag-final {
  color: var(--pdu-barva-text-sedy); font-size: .95em; line-height: 1.6;
  margin: 1.375em 0 0; padding-top: 1.125em;
  border-top: 1px solid var(--pdu-barva-okraj-svetly);
  text-align: center;
}
.pdu-pag-final a { color: var(--pdu-barva-zelena-akcent); }


/* ╔══════════════════════════════════════════════════════════════
   🎨 SEKCE 12. HERO PLETIVO (cenová orientace + parameter aside)
   ──────────────────────────────────────────────────────────────
   Popis:
   - Karetní hero blok s gradient bg + zelený border + radius XL
   - Mobil (<768): 1-col stack; ≥768: 1.35fr/1fr (text/aside)
   - Levá strana: H1 (1.85em) + .pdu-pag-hero-cena (italic zelená)
     + lead + .pdu-pag-hero-akce (2 tlačítka) + .pdu-pag-hero-staty (3 mini)
   - Pravá strana: .pdu-pag-hero-aside = tmavá karta s fotkou + parameter tabulkou

   HTML:
     <section class="pdu-pag-hero-pletivo">
       <div>
         <span class="pdu-pag-hero-badge">Skladem · Doprava 48h</span>
         <h1>Pletivo na plot</h1>
         <span class="pdu-pag-hero-cena">od 128 Kč/bm.</span>
         <p>Lead text...</p>
         <div class="pdu-pag-hero-akce">
           <a class="pdu-pag-btn-primary" href="...">Poptat →</a>
           <a class="pdu-pag-btn-cta" href="...">Spočítat</a>
         </div>
         <div class="pdu-pag-hero-staty">
           <div class="pdu-pag-hero-stat"><strong>20+</strong><span>let</span></div>
           ... 3×
         </div>
       </div>
       <aside class="pdu-pag-hero-aside">
         <p class="pdu-pag-hero-aside-title">PLOTY A PLETIVA</p>
         <div class="pdu-pag-hero-aside-table">
           <div class="pdu-pag-hero-aside-row"><span>Výška</span><span>100-200 cm</span></div>
           <div class="pdu-pag-hero-aside-row is-cena"><span>Cena</span><span>od 128 Kč/bm</span></div>
         </div>
       </aside>
     </section>
   ══════════════════════════════════════════════════════════════ */
.pdu-pag-hero-pletivo {
  display: grid; grid-template-columns: 1fr; gap: 1.125em;
  background: linear-gradient(135deg, #F5FAF5 0%, var(--pdu-barva-bila) 60%);
  border: 1px solid var(--pdu-barva-okraj-zeleny-jemny);
  border-radius: var(--pdu-radius-xl);
  padding: 1.375em; margin: 0 0 1.75em;
  box-shadow: var(--pdu-stin-jemny);
}
@media (min-width: 48em) { .pdu-pag-hero-pletivo { grid-template-columns: 1.35fr 1fr; gap: 1.5em; padding: 1.75em; } }

/* "Skladem · Doprava 48h" pill nahoře */
.pdu-pag-hero-badge {
  display: inline-flex; align-items: center; gap: 0.5em;
  background: var(--pdu-barva-zelena-svetla-3);
  color: var(--pdu-barva-zelena-akcent-hover);
  font-weight: 700; font-size: .82em; letter-spacing: .03em;
  padding: 0.375em 0.75em; border-radius: 6.25em; margin: 0 0 0.875em;
  border: 1px solid var(--pdu-barva-okraj-zeleny-jemny);
}
.pdu-pag-hero-badge::before {
  content: ""; width: 0.5em; height: 0.5em; border-radius: 50%;
  background: var(--pdu-barva-zelena-akcent); flex-shrink: 0;
}
.pdu-pag-hero-pletivo h1 {
  font-size: 1.85em; line-height: 1.15; font-weight: 800;
  color: var(--pdu-barva-tmavomodra); margin: 0 0 0.25em;
}
/* italic zelená cena (sub-line H1) */
.pdu-pag-hero-cena {
  display: block; color: var(--pdu-barva-zelena-akcent);
  font-size: 1.85em; line-height: 1.15; font-weight: 800; font-style: italic;
  margin: 0 0 0.75em;
}
.pdu-pag-hero-pletivo p {
  color: var(--pdu-barva-text-sekundarni); line-height: 1.55;
  margin: 0 0 1.125em; font-size: 1em; max-width: 33.75em;
}
/* CTA řádek (2 tlačítka, gap 10) */
.pdu-pag-hero-akce {
  display: flex; flex-wrap: wrap; gap: 0.625em; margin: 0 0 1.25em;
}
.pdu-pag-hero-akce .pdu-pag-btn-primary,
.pdu-pag-hero-akce .pdu-pag-btn-cta { padding: 0.75em 1.375em; font-size: 1em; }

/* 3 mini-staty pod CTA (text-align:left, zelené číslo 1.65em) */
.pdu-pag-hero-staty {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.875em; margin: 0;
}
.pdu-pag-hero-stat {
  text-align: left; line-height: 1.25;
}
.pdu-pag-hero-stat strong {
  display: block; color: var(--pdu-barva-zelena-akcent);
  font-size: 1.65em; font-weight: 800; line-height: 1; margin: 0 0 0.25em;
}
.pdu-pag-hero-stat span {
  display: block; color: var(--pdu-barva-text-sedy); font-size: .82em;
}

/* Aside parameter card — tmavá s fotkou týmu jako bg + bílá vnitřní tabulka */
.pdu-pag-hero-aside {
  background-color: var(--pdu-barva-tmavomodra);
  background-image: linear-gradient(rgba(25,25,50,.65), rgba(25,25,50,.55)),
                    url('https://cdn.myshoptet.com/usr/www.levne-pletivo.cz/user/documents/upload/fotografie/team/tym-ploty-dobry-768w.jpg');
  background-size: cover; background-position: center;
  border-radius: var(--pdu-radius-card); overflow: hidden;
  padding: 1.25em; color: var(--pdu-barva-bila);
  display: flex; flex-direction: column; gap: 0.875em;
  box-shadow: var(--pdu-stin-stredni);
}
.pdu-pag-hero-aside-title {
  font-size: 1.25em; font-weight: 800; letter-spacing: .02em;
  margin: 0; text-shadow: 0 1px 0.125em rgba(0,0,0,.4);
}
/* parameter tabulka uvnitř — bílá s tmavými řádky */
.pdu-pag-hero-aside-table {
  background: var(--pdu-barva-bila); color: var(--pdu-barva-tmavomodra);
  border-radius: var(--pdu-radius-m); padding: 0.375em 0.25em;
  display: flex; flex-direction: column;
}
.pdu-pag-hero-aside-row {
  display: flex; justify-content: space-between; gap: 0.625em;
  padding: 0.5625em 0.75em; border-bottom: 1px solid var(--pdu-barva-okraj-svetly);
  font-size: .95em;
}
.pdu-pag-hero-aside-row:last-child { border-bottom: 0; }
.pdu-pag-hero-aside-row span:first-child { color: var(--pdu-barva-text-sedy); }
.pdu-pag-hero-aside-row span:last-child  { color: var(--pdu-barva-tmavomodra); font-weight: 700; text-align: right; }
/* .is-cena = zelená barva pro řádek s cenou */
.pdu-pag-hero-aside-row.is-cena span:last-child { color: var(--pdu-barva-zelena-akcent); }


/* ╔══════════════════════════════════════════════════════════════
   🪜 SEKCE 13. KROKY (3-step "Jak postavit plot")
   ──────────────────────────────────────────────────────────────
   Popis:
   - 3 karty vedle sebe (≥37.5em), stack pod tím
   - Každá karta: numerový kruh 2.375em + H3 + odstavec + (volitelné) UL/tabulka/volby
   - Varianty: .is-zluty (žlutý akcent na č. 2), .is-modry (modrý akcent na č. 3)
   - .pdu-pag-krok-link = "Více →" odkaz dole

   HTML:
     <div class="pdu-pag-kroky-head">
       <span class="pdu-pag-kroky-eyebrow">» Tři kroky «</span>
       <h2>Jak vybrat pletivo</h2>
     </div>
     <div class="pdu-pag-kroky">
       <article class="pdu-pag-krok">
         <span class="pdu-pag-krok-num">01</span>
         <h3>Vyberte typ</h3>
         <p>...</p>
         <ul><li><strong>Čtyřhranné</strong> — klasika</li>...</ul>
         <a class="pdu-pag-krok-link" href="...">Více →</a>
       </article>
       <article class="pdu-pag-krok is-zluty">
         <span class="pdu-pag-krok-num">02</span>
         ... + .pdu-pag-krok-tabulka (mini-kalkulačka) ...
       </article>
       <article class="pdu-pag-krok is-modry">
         <span class="pdu-pag-krok-num">03</span>
         ... + .pdu-pag-krok-volby (svépomocí / na klíč) ...
       </article>
     </div>
   ══════════════════════════════════════════════════════════════ */
.pdu-pag-kroky-head    { margin: 0.5em 0 0.875em; }
.pdu-pag-kroky-eyebrow { color: var(--pdu-barva-zelena-akcent); font-size: .9em; font-weight: 700; }
.pdu-pag-kroky-head h2 { font-size: 1.7em; font-weight: 800; margin: 0.25em 0 0; color: var(--pdu-barva-tmavomodra); }

.pdu-pag-kroky {
  display: grid; grid-template-columns: 1fr; gap: 0.875em; margin: 0 0 1.75em;
}
@media (min-width: 37.5em) { .pdu-pag-kroky { grid-template-columns: repeat(3, 1fr); } }

.pdu-pag-krok {
  background: var(--pdu-barva-bila);
  border: 1px solid var(--pdu-barva-okraj-jemny);
  border-radius: var(--pdu-radius-card);
  padding: 1.375em 1.125em; display: flex; flex-direction: column; gap: 0.625em;
  box-shadow: var(--pdu-stin-jemny);
  transition: all var(--pdu-prechod-dur-stredni) ease;
}
.pdu-pag-krok:hover { box-shadow: var(--pdu-stin-vyrazny); transform: translateY(-0.1875em); }

/* zelený číselný kruh 2.375em (default) */
.pdu-pag-krok-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.375em; height: 2.375em; border-radius: 50%;
  background: var(--pdu-barva-zelena-svetla-3); color: var(--pdu-barva-zelena-akcent);
  font-weight: 800; font-size: 1.05em; line-height: 1;
}
/* varianta 02 = žlutá karta + žlutý kruh */
.pdu-pag-krok.is-zluty  { background: #FFFEEC; border-color: #F4E73244; }
.pdu-pag-krok.is-zluty  .pdu-pag-krok-num { background: #FFF6B8; color: #8A6D0B; }
/* varianta 03 = modrá karta + modrý kruh */
.pdu-pag-krok.is-modry  { background: #F5F8FF; }
.pdu-pag-krok.is-modry  .pdu-pag-krok-num { background: #E5ECF8; color: var(--pdu-barva-tmavomodra); }

.pdu-pag-krok h3 {
  font-size: 1.1em; font-weight: 800; line-height: 1.25;
  color: var(--pdu-barva-tmavomodra); margin: 0.125em 0 0.25em;
}
.pdu-pag-krok p {
  font-size: .94em; line-height: 1.55; color: var(--pdu-barva-text-sekundarni); margin: 0;
}
.pdu-pag-krok ul {
  margin: 0.25em 0 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 0.25em;
}
/* UL items se "›" prefix místo standardních bullets */
.pdu-pag-krok ul li {
  position: relative; padding-left: 1em; font-size: .94em; line-height: 1.45;
  color: var(--pdu-barva-tekst-zakladni);
}
.pdu-pag-krok ul li::before {
  content: "›"; position: absolute; left: 0; top: 0;
  color: var(--pdu-barva-zelena-akcent); font-weight: 800;
}
.pdu-pag-krok ul li strong { color: var(--pdu-barva-tmavomodra); }
.pdu-pag-krok-link {
  margin-top: auto; padding-top: 0.5em;
  color: var(--pdu-barva-zelena-akcent) !important;
  font-weight: 700; text-decoration: none !important; font-size: .95em;
}
.pdu-pag-krok-link:hover { text-decoration: underline !important; }

/* Mini-tabulka uvnitř kroku 02 (kalkulace sloupku) */
.pdu-pag-krok-tabulka {
  background: var(--pdu-barva-bila); border: 1px solid var(--pdu-barva-okraj-svetly);
  border-radius: var(--pdu-radius-m); padding: 0.25em 0.125em; margin: 0.25em 0;
  display: flex; flex-direction: column;
}
.pdu-pag-krok-tabulka-row {
  display: flex; justify-content: space-between; gap: 0.625em;
  padding: 0.375em 0.625em; border-bottom: 1px solid var(--pdu-barva-okraj-svetly);
  font-size: .9em;
}
/* poslední řádek tabulky = výsledek, světlezelený highlight */
.pdu-pag-krok-tabulka-row:last-child {
  border-bottom: 0; background: var(--pdu-barva-zelena-svetla-2);
  font-weight: 700;
}
.pdu-pag-krok-tabulka-row span:first-child { color: var(--pdu-barva-text-sedy); }
.pdu-pag-krok-tabulka-row span:last-child  { color: var(--pdu-barva-tmavomodra); font-weight: 700; }
.pdu-pag-krok-tabulka-row:last-child span:last-child { color: var(--pdu-barva-zelena-akcent); }

/* Volby uvnitř kroku 03 (svépomocí / na klíč boxy) */
.pdu-pag-krok-volby { display: flex; flex-direction: column; gap: 0.625em; margin: 0.25em 0; }
.pdu-pag-krok-volba {
  background: var(--pdu-barva-bila);
  border: 1px solid var(--pdu-barva-okraj-jemny); border-radius: var(--pdu-radius-m);
  padding: 0.625em 0.75em;
}
.pdu-pag-krok-volba strong { display: block; color: var(--pdu-barva-tmavomodra); margin: 0 0 0.25em; }
.pdu-pag-krok-volba span   { display: block; font-size: .88em; color: var(--pdu-barva-text-sekundarni); margin: 0 0 0.375em; }
.pdu-pag-krok-volba a      { color: var(--pdu-barva-zelena-akcent) !important; font-weight: 700; text-decoration: none !important; font-size: .92em; }
.pdu-pag-krok-volba a:hover { text-decoration: underline !important; }


/* ╔══════════════════════════════════════════════════════════════
   ⭐ SEKCE 14. REFERENCE TROJICE (3 zákaznické karty)
   ──────────────────────────────────────────────────────────────
   Popis:
   - 3 karty (≥768: 3 col, jinak stack)
   - Foto nahoře (aspect 4:3), pod tím body s nadpisem, popisem, meta
   - Hover: shadow + lift

   HTML:
     <div class="pdu-pag-reference">
       <div class="pdu-pag-ref-karta">
         <div class="pdu-pag-ref-foto"><img src="..."></div>
         <div class="pdu-pag-ref-body">
           <strong>Petr H.</strong>
           <p>"Cituji zákazníka..."</p>
           <span class="pdu-pag-ref-meta">Plzeň · 2024</span>
         </div>
       </div>
       ... 2×
     </div>
   ══════════════════════════════════════════════════════════════ */
.pdu-pag-reference {
  display: grid; grid-template-columns: 1fr; gap: 0.875em; margin: 0 0 1.75em;
}
@media (min-width: 48em) { .pdu-pag-reference { grid-template-columns: repeat(3, 1fr); } }
.pdu-pag-ref-karta {
  background: var(--pdu-barva-bila); border: 1px solid var(--pdu-barva-okraj-jemny);
  border-radius: var(--pdu-radius-card); overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--pdu-stin-jemny);
  transition: all var(--pdu-prechod-dur-stredni) ease;
}
.pdu-pag-ref-karta:hover { box-shadow: var(--pdu-stin-vyrazny); transform: translateY(-0.1875em); }
.pdu-pag-ref-foto { width: 100%; aspect-ratio: 4 / 3; background: var(--pdu-barva-pozadi-foto); overflow: hidden; }
.pdu-pag-ref-foto img {
  width: 100% !important; height: 100% !important;
  object-fit: cover; display: block;
  border-radius: 0 !important; border: none !important; margin: 0 !important; padding: 0 !important;
}
.pdu-pag-ref-body { padding: 0.875em 1em 1em; display: flex; flex-direction: column; gap: 0.375em; flex: 1; }
.pdu-pag-ref-body strong { color: var(--pdu-barva-tmavomodra); font-size: 1em; }
.pdu-pag-ref-body p { color: var(--pdu-barva-text-sekundarni); font-size: .92em; line-height: 1.5; margin: 0; flex: 1; }
.pdu-pag-ref-meta { color: var(--pdu-barva-text-sedy); font-size: .82em; margin-top: 0.125em; }


/* ╔══════════════════════════════════════════════════════════════
   🟩 SEKCE 15. GREEN TITLE (banner — refactor 2026-05-20 v3 "back to roots")
   ──────────────────────────────────────────────────────────────
   Popis:
   - Major section heading mezi velkými bloky (Konkrétní osoby, Doplňující údaje)
   - REFACTOR v3 (po druhém review): zpět k zelenému banneru (uživatel preferuje
     výraznější section breaks než clean H2 + pin variant v2)
   - Light-green gradient bg + 0.375em zelený left-border + centered zelený H2
   - Generous padding + jemný stín + radius vpravo (left flush border)
   - Clamp font 1.55-1.95em fluid, text-shadow pro depth
   - Optional `.is-mini` modifier pro malé sekce (subsection breaks)

   HTML:
     <div class="pdu-pag-greentitle"><h2>Konkrétní osoby a oddělení</h2></div>
     <!-- Optional subtitle pod H2: -->
     <div class="pdu-pag-greentitle"><h2>...</h2><p>Vyhledejte přímý kontakt...</p></div>
   ══════════════════════════════════════════════════════════════ */
.pdu-pag-greentitle {
  background: linear-gradient(135deg, #E0EDD4 0%, #EEF6E2 100%);
  border: 0; border-left: 0.375em solid var(--pdu-barva-zelena-akcent);
  border-radius: 0 var(--pdu-radius-card) var(--pdu-radius-card) 0;
  padding: 1.125em 1.875em;
  margin: 2.5em 0 1.375em;
  text-align: center;
  box-shadow: var(--pdu-stin-jemny);
}
.pdu-pag-greentitle h2 {
  font-size: clamp(1.55em, 2.8vw, 1.95em);
  color: var(--pdu-barva-zelena-akcent-hover);
  font-weight: 800; line-height: 1.25;
  margin: 0;
  text-shadow: 0 1px 1px rgba(255, 255, 255, .5);
  letter-spacing: -.01em;
}
.pdu-pag-greentitle p {
  margin: 0.5em 0 0;
  color: var(--pdu-barva-tmavomodra);
  font-size: 1em; line-height: 1.5;
}
/* `.is-mini` modifier — menší section break (subsection) */
.pdu-pag-greentitle.is-mini { padding: 0.75em 1.375em; margin: 1.625em 0 0.875em; border-left-width: 0.25em; }
.pdu-pag-greentitle.is-mini h2 { font-size: clamp(1.25em, 2vw, 1.5em); }


/* ╔══════════════════════════════════════════════════════════════
   🟡 SEKCE 16. PRUH ZLUTY ANIMOVANY (animated stripes banner)
   ──────────────────────────────────────────────────────────────
   Popis:
   - Pruh přes celou šířku s animovaným diagonálním šedo-bílým vzorem
   - 0.25em žlutý right-border jako akcent
   - Text vpravo zarovnaný (CTA-like statistika "namontovali jsme X plotů")
   - Animace 15s linear infinite (background-position shift)
   - Reduced-motion: animation off, plain bg

   HTML:
     <div class="pdu-pag-pruh-zluty-anim">
       → <strong>V roce 2026 jsme namontovali <span data-teams="true">723</span> plotů!</strong>
     </div>
   ══════════════════════════════════════════════════════════════ */
.pdu-pag-pruh-zluty-anim {
  border-right: 0.25em solid var(--pdu-barva-zluta-warm);
  background: repeating-linear-gradient(65deg, var(--pdu-barva-sede-svetla) 0 1.25em, var(--pdu-barva-bila) 1.25em 2.5em);
  background-size: 200% 100%;
  animation: pduPagStripes 15s linear infinite;
  padding: 1.375em 1.625em; margin: 0.375em 0 1.25em;
  text-align: right; font-size: 1.05em; line-height: 1.5;
  border-radius: var(--pdu-radius-m);
}
.pdu-pag-pruh-zluty-anim strong { color: var(--pdu-barva-tmavomodra); }
@keyframes pduPagStripes { 0% { background-position: 0 0; } 100% { background-position: 100% 0; } }


/* ╔══════════════════════════════════════════════════════════════
   ⬜ SEKCE 16b. PROVOZNÍ VÝJIMKY A SVÁTKY (animovaný callout)
   ──────────────────────────────────────────────────────────────
   Popis:
   - Sdílí diagonální animaci pruh-zluty-anim (pduPagStripes 15s)
   - 0.3em žlutý LEVÝ akcent border (odlišení od pruhu = right border)
   - Nadpis (tmavomodrá) + řádky datum (sekundarni) | čas (zelená akcent)
   - Reduced-motion: animace off (řešeno v reduced-motion sekci)

   HTML:
     <div class="pdu-pag-vyjimky">
       <strong class="pdu-pag-vyjimky-title">Provozní výjimky a svátky</strong>
       <div class="pdu-pag-vyjimky-row"><span class="pdu-pag-vyjimky-datum">5. 6.</span> <span class="pdu-pag-vyjimky-cas">7:00–15:30</span></div>
     </div>
   ══════════════════════════════════════════════════════════════ */
.pdu-pag-vyjimky {
  border-left: 0.3em solid var(--pdu-barva-zluta-warm);
  background: repeating-linear-gradient(65deg, var(--pdu-barva-sede-svetla) 0 1.25em, var(--pdu-barva-bila) 1.25em 2.5em);
  background-size: 200% 100%;
  animation: pduPagStripes 15s linear infinite;
  padding: 1em 1.375em; margin: 1.25em 0;
  border-radius: var(--pdu-radius-m);
  font-size: 1.02em; line-height: 1.5;
}
.pdu-pag-vyjimky-title {
  display: block; font-weight: 700;
  color: var(--pdu-barva-tmavomodra); margin-bottom: 0.5em;
}
.pdu-pag-vyjimky-row { display: flex; gap: 1.25em; padding: 0.1em 0; }
.pdu-pag-vyjimky-datum { min-width: 3.5em; font-weight: 600; color: var(--pdu-barva-text-sekundarni); }
.pdu-pag-vyjimky-cas { color: var(--pdu-barva-zelena-akcent); font-weight: 600; }


/* ╔══════════════════════════════════════════════════════════════
   ⬜ SEKCE 17. RAMECEK SEDY (mapa float + checklist H2 + UL)
   ──────────────────────────────────────────────────────────────
   Popis:
   - Šedý bordered box (0.125em solid stredni gray)
   - Mapa float:right (max 22.5em) — text obteče vlevo
   - H2 + UL pro checklist body výhod
   - Mobil (<600): mapa stack, full-width, centered

   HTML:
     <div class="pdu-pag-ramecek-sedy">
       <h2>
         <img src="/user/documents/upload/grafika/mapy/...png" alt="Mapa">
         <strong>Proč to nechat na nás?</strong>
       </h2>
       <ul>
         <li>Kalkulace zdarma ✓</li>
         <li>Rychlé jednání ✓</li>
       </ul>
     </div>
   ══════════════════════════════════════════════════════════════ */
.pdu-pag-ramecek-sedy {
  border: 0.125em solid var(--pdu-barva-sede-stredni); background: var(--pdu-barva-bila);
  border-radius: var(--pdu-radius-m);
  padding: 1em 1.375em; margin: 1.125em 0;
}
.pdu-pag-ramecek-sedy h2 {
  margin: 0.375em 0 0.75em; font-size: 1.35em; font-weight: 800; color: var(--pdu-barva-tmavomodra);
}
.pdu-pag-ramecek-sedy h2 + ul { margin: 0 0 1.125em; padding-left: 1.375em; line-height: 1.7; }
/* Mobile-first: stack centered, float right na ≥37.5em (M4 refactor 2026-05-15) */
.pdu-pag-ramecek-sedy img {
  display: block; max-width: 22.5em; width: 100%; height: auto;
  margin: 0 auto 0.75em; border-radius: var(--pdu-radius-m);
}
@media (min-width: 37.5em) {
  .pdu-pag-ramecek-sedy img { float: right; display: inline; margin: 0 0 0.625em 0.875em; }
}


/* ╔══════════════════════════════════════════════════════════════
   🖼️ SEKCE 17b. TEXT + FOTO (zig-zag flex layout — row-reverse)
   ──────────────────────────────────────────────────────────────
   Popis:
   - Klasický článkový blok 2-col (text + foto) — FLEX layout (ne grid)
   - Mobile-first stack: text VŽDY první v HTML (semantic + a11y order)
   - Desktop (≥48em): flex row, align-items:center, gap 1.625em, 50/50 (flex:1)
   - Modifier .is-prohozeno = flex-direction:row-reverse na desktopu
     → foto vlevo, text vpravo BEZ ZMĚNY HTML pořadí
   - .pdu-pag-text-foto-akce = wrap pro tlačítka pod textem
   - Zig-zag pattern: alternuj 1× normální + 1× .is-prohozeno mezi sekcemi
     (např. "Naše zkušenosti" text-vlevo → "Vlastní kovovýroba" text-vpravo)
   - Inspirováno legacy .flex-container-clnk-center z RESTRUCTURE
     (přechod z grid+order:2 na flex+row-reverse pro čistší semantic HTML)

   HTML usage:
     <!-- Klasické pořadí — text vlevo, foto vpravo na desktopu -->
     <section class="pdu-pag-text-foto">
       <div>
         <h2>Naše zkušenosti</h2>
         <p>Od roku 2012...</p>
         <div class="pdu-pag-text-foto-akce">
           <a class="pdu-pag-btn-primary" href="...">Fotogalerie</a>
         </div>
       </div>
       <div><img src="..." alt="..." loading="lazy"></div>
     </section>

     <!-- Obrácené pořadí — foto vlevo, text vpravo na desktopu.
          HTML ORDER STEJNÝ (text první) — jen flex-direction:row-reverse -->
     <section class="pdu-pag-text-foto is-prohozeno">
       <div>
         <h2>Vlastní kovovýroba</h2>
         <ul class="pdu-pag-bullets"><li>...</li></ul>
       </div>
       <div><img src="..." alt="..." loading="lazy"></div>
     </section>
   ══════════════════════════════════════════════════════════════ */
.pdu-pag-text-foto {
  display: flex; flex-direction: column;  /* mobile: stack (text first dle HTML) */
  gap: 1.125em; margin: 1em 0 1.5em;
}
@media (min-width: 48em) {
  .pdu-pag-text-foto { flex-direction: row; align-items: center; gap: 1.625em; }
  /* 50/50 split — min-width:0 zabrání text overflow rozbít layout */
  .pdu-pag-text-foto > * { flex: 1; min-width: 0; }
  /* zig-zag obrácené pořadí — vizuální flip jen na desktopu, HTML beze změny */
  .pdu-pag-text-foto.is-prohozeno { flex-direction: row-reverse; }
}
.pdu-pag-text-foto h2 {
  margin: 0 0 0.625em; font-size: 1.45em; font-weight: 800; color: var(--pdu-barva-tmavomodra);
}
.pdu-pag-text-foto p { line-height: 1.6; margin: 0 0 0.75em; color: var(--pdu-barva-tekst-zakladni); }
.pdu-pag-text-foto ul { margin: 0 0 0.875em; padding-left: 1.375em; line-height: 1.7; }
.pdu-pag-text-foto img {
  width: 100%; height: auto; display: block;
  border-radius: var(--pdu-radius-card); box-shadow: var(--pdu-stin-jemny);
}
/* Modifier — pro průhledné/PNG obrázky které nepotřebují stín pod sebou */
.pdu-pag-text-foto img.is-bez-stinu { box-shadow: none; }
/* persona foto v .pdu-pag-text-foto = vždy KRUH BEZ stínu (přebíjí .pdu-pag-text-foto img: karta+stín+100%, jinak „stín kolem čtverce") */
.pdu-pag-text-foto .pdu-pag-autor-foto img { width: 6.25em; height: 6.25em; border-radius: 50%; object-fit: cover; box-shadow: none; }
@media (max-width: 47.99em) { .pdu-pag-text-foto .pdu-pag-autor-foto img { width: 4.5em; height: 4.5em; } }
/* pobočky (is-top) — větší foto + jméno vedoucího (žádost 2026-06-17, „moc malé") */
.pdu-pag-text-foto.is-top .pdu-pag-autor-foto img { width: 7.75em; height: 7.75em; }
@media (max-width: 47.99em) { .pdu-pag-text-foto.is-top .pdu-pag-autor-foto img { width: 5.5em; height: 5.5em; } }
.pdu-pag-text-foto.is-top .pdu-pag-autor-jmeno { font-size: calc(var(--pdu-cat-fs-h3) * 1.22); }
/* video (YouTube embed) v .pdu-pag-text-foto = zaoblené rohy jako hero video (radius-xl) */
.pdu-pag-text-foto iframe { border-radius: var(--pdu-radius-xl); }
/* Modifier .is-mapa — menší mapka pobočky na mobilu (regionální OZ carousely na /kontakt-obchodni-zastupci/) */
@media (max-width: 47.99em) {
  .pdu-pag-text-foto img.is-mapa { max-width: 18em; margin-left: auto; margin-right: auto; }
}
.pdu-pag-text-foto-akce { display: flex; flex-wrap: wrap; gap: 0.5em; }
/* Modifier .is-card — obalí celou sekci do bílé karty s rámečkem + stín, jako .pdu-pag-procnas.
   Použití: <section class="pdu-pag-text-foto is-card"> ... </section> */
.pdu-pag-text-foto.is-card {
  background: var(--pdu-barva-bila);
  border: 1px solid var(--pdu-barva-okraj-jemny);
  border-radius: var(--pdu-radius-xl);
  box-shadow: var(--pdu-stin-stredni);
  padding: 1.5em 1.75em;
  overflow: hidden;
}
@media (min-width: 48em) { .pdu-pag-text-foto.is-card { padding: 1.75em 2em; } }


/* ╔══════════════════════════════════════════════════════════════
   ❓ SEKCE 18. FAQ ACCORDION
   ──────────────────────────────────────────────────────────────
   Popis:
   - Native HTML5 <details>/<summary> accordion (no-JS funguje)
   - 2-col flex grid (min-width 50% mínus gap), 1-col na <47.5em
   - Zelený inset 0.1875em left-bar default → tmavomodrý když [open]
   - "▼" indikátor vpravo, rotace 180° na otevření
   - JS v script-pages.js dělá "close-others" (single-open behavior)
   - Schema.org/FAQPage friendly (mainEntity, Question, Answer)

   HTML:
     <h2 class="pdu-pag-faq-nadpis">Často kladené dotazy</h2>
     <section class="pdu-pag-faq" itemscope itemtype="https://schema.org/FAQPage">
       <article class="pdu-pag-faq-item" itemprop="mainEntity" itemscope itemtype="https://schema.org/Question">
         <details class="pdu-pag-faq-details">
           <summary><span itemprop="name">Provádíte montáž?</span></summary>
           <div class="pdu-pag-faq-content" itemprop="acceptedAnswer" itemscope itemtype="https://schema.org/Answer">
             <div itemprop="text"><p>Ano, na klíč po celé ČR...</p></div>
           </div>
         </details>
       </article>
       ... N×
     </section>
   ══════════════════════════════════════════════════════════════ */
.pdu-pag-faq-nadpis {
  font-size: 1.5em; margin: 0 0 0.9375em;
  color: var(--pdu-barva-tmavomodra); font-weight: 800;
}
.pdu-pag-faq {
  display: flex; flex-wrap: wrap; gap: 0.5em; margin: 0 0 1.75em;
  list-style: none; padding: 0;
}
.pdu-pag-faq-item {
  flex: 1; min-width: calc(50% - 0.25em);
  transition: transform var(--pdu-prechod-dur-stredni) ease-in;
}
@media (max-width: 47.5em) { .pdu-pag-faq-item { min-width: 100%; } }
/* Modifier .is-1col — vynutí 1 sloupec (FAQ v úzkém sloupci, např. vedle termínů) */
.pdu-pag-faq.is-1col .pdu-pag-faq-item { flex: 1 1 100%; min-width: 100%; }
.pdu-pag-faq-item:hover { transform: translateY(-0.1875em); }
.pdu-pag-faq-details {
  background: var(--pdu-barva-bila); border: 1px solid var(--pdu-barva-okraj-jemny);
  box-shadow: inset 0.1875em 0 0 var(--pdu-barva-zelena-akcent);
  font-size: .95em;
  transition: box-shadow var(--pdu-prechod-dur-stredni) ease;
}
/* otevřený detail = tmavomodrý inset-bar */
.pdu-pag-faq-details[open] { box-shadow: inset 0.1875em 0 0 var(--pdu-barva-tmavomodra); }
.pdu-pag-faq-details summary {
  padding: 0.8125em 2.5em 0.8125em 1em;
  color: var(--pdu-barva-tmavomodra); font-weight: 700;
  cursor: pointer; list-style: none; position: relative; outline: none;
}
.pdu-pag-faq-details summary::-webkit-details-marker { display: none; }
/* ▼ indikátor — rotuje 180° na open */
.pdu-pag-faq-details summary::after {
  content: "▼"; position: absolute; right: 0.875em; top: 50%;
  transform: translateY(-50%); color: var(--pdu-barva-zelena-akcent);
  font-size: 0.6875em; transition: transform var(--pdu-prechod-dur-stredni) ease;
}
.pdu-pag-faq-details[open] summary::after { transform: translateY(-50%) rotate(180deg); }
.pdu-pag-faq-content {
  padding: 0.875em 1em; line-height: 1.55; color: var(--pdu-barva-tekst-zakladni);
  border-top: 1px solid var(--pdu-barva-okraj-svetly);
  background: var(--pdu-barva-sede-svetla);
}
.pdu-pag-faq-content p { margin: 0; }


/* ╔══════════════════════════════════════════════════════════════
   🎬 SEKCE 20. HERO INTRO + VIDEO (alt k sekci 12 — video místo aside)
   ──────────────────────────────────────────────────────────────
   Popis:
   - Streamlined verze hera bez gradient bg/karty — jen grid + bottom border
   - Mobil: 1-col stack, ≥62.5em: 5fr text / 7fr video
   - Levá strana: .pdu-pag-eyebrow (pulsující dot pill "Skladem") + H1 + .pdu-pag-lead + .pdu-pag-cta-row
   - Pravá strana: .pdu-pag-intro-video = aspect 16:9 iframe (YouTube)
   - .pdu-pag-cta-row: content-width tlačítka, centrovaná (HP pattern)
   - Button varianty: .pdu-pag-btn-ghost (transparent + thin border)
                      .pdu-pag-btn-outline (bílá s dark borderem)

   HTML:
     <section class="pdu-pag-intro">
       <div class="pdu-pag-intro-text">
         <span class="pdu-pag-eyebrow">
           <span class="pdu-pag-dot"></span> Skladem · doprava 48h
         </span>
         <h1>Pletivo na plot<br><em>od 128 Kč/bm.</em></h1>
         <p class="pdu-pag-lead">Lead text...</p>
         <div class="pdu-pag-cta-row">
           <a class="pdu-pag-btn-cta" href="#poptavka">Nezávazně poptat →</a>
           <a class="pdu-pag-btn-ghost" href="...">Fotogalerie</a>
         </div>
       </div>
       <div class="pdu-pag-intro-video">
         <iframe src="https://www.youtube.com/embed/..."></iframe>
       </div>
     </section>
   ══════════════════════════════════════════════════════════════ */
/* zelená pill nahoře s pulsujícím dot ("Skladem · doprava 48h") */
.pdu-pag-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5em;
  align-self: flex-start; /* jinak by se stretchla v flex-column parentu na full width */
  width: max-content; max-width: 100%;
  padding: 0.3125em 0.75em; background: var(--pdu-barva-zelena-svetla-3); color: #00755a;
  border-radius: 1.25em; font-size: .78em; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase; margin-bottom: 0.875em;
}
/* pulsující zelená tečka — animation 2s infinite */
.pdu-pag-dot {
  width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--pdu-barva-zelena-akcent);
  box-shadow: 0 0 0 0.25em rgba(0, 180, 110, .18); animation: pduPagDotPulse 2s infinite;
}
@keyframes pduPagDotPulse { 50% { box-shadow: 0 0 0 0.5em rgba(0, 180, 110, 0); } }

.pdu-pag-intro {
  display: grid; grid-template-columns: 1fr; gap: 1.25em;
  margin: 0.375em 0 1.5em; padding: 0.5em 0 1.25em;
  align-items: start;
}
@media (min-width: 62.5em) {
  .pdu-pag-intro { grid-template-columns: 1.3fr 1fr; gap: 3em; padding: 0.75em 0 1.5em; }
}
.pdu-pag-intro-text { display: flex; flex-direction: column; }
.pdu-pag-intro h1 { font-size: clamp(2.5em, 5.5vw, 3em); margin: 0 0 0.875em; letter-spacing: -.02em; line-height: 1.12; color: var(--pdu-barva-tmavomodra); font-weight: 800; }
/* italic zelená sub-line H1 ("po celé ČR.") */
.pdu-pag-intro h1 em { font-style: italic; color: var(--pdu-barva-zelena-akcent); font-weight: 800; }
/* responsivní zalomení H1 — mobil: flow (skrytý <br>), desktop ≥62.5em (2-sloupcový intro): forced break před <em>.
   em::before vloží mezeru na mobilu, protože skrytý <br> nepřispívá whitespace. Na desktopu (br viditelný) se pseudo-mezera vypne.
   Pravý (video) sloupec zúžen na 1fr vs 1.3fr text (viz grid výše), aby měl H1 víc místa. */
.pdu-pag-intro h1 br { display: none; }
.pdu-pag-intro h1 em::before { content: " "; white-space: pre; }
@media (min-width: 62.5em) {
  .pdu-pag-intro h1 br { display: inline; }
  .pdu-pag-intro h1 em::before { content: none; }
}

.pdu-pag-lead { color: var(--pdu-barva-text-sekundarni); line-height: 1.6; margin: 0 0 1.125em; max-width: 50ch; font-size: 1.05em; }
.pdu-pag-lead strong { color: var(--pdu-barva-tmavomodra); font-weight: 800; }

/* CTA row — sjednoceno s .pdu-pag-hero (HP pattern): content-width tlačítka,
   centrovaná, wrapují jako celky (label nowrap drží 1 řádek). is-stack = opt-in
   plná šířka pod sebe (kontakty). */
.pdu-pag-cta-row { display: flex; gap: 0.75em; flex-wrap: wrap; justify-content: center; margin: 0; }
.pdu-pag-cta-row > a { text-align: center; }
.pdu-pag-cta-row.is-stack { flex-direction: column; align-items: stretch; gap: 0.625em; min-width: 18.75em; }
.pdu-pag-cta-row.is-stack > a { flex: none; width: 100%; min-width: 0; }
@media (max-width: 30em) { .pdu-pag-cta-row.is-stack { min-width: 0; } }

/* video aspekt 16:9, max 45em na mobilu, full-fill columny na ≥62.5em */
.pdu-pag-intro-video {
  width: 100%; max-width: 45em; margin: 0 auto;
  aspect-ratio: 16/9; border-radius: var(--pdu-radius-xl); overflow: hidden;
  background: #000; box-shadow: 0 0.75em 2.25em rgba(0, 0, 0, .18);
}
@media (min-width: 62.5em) {
  .pdu-pag-intro-video { max-width: none; margin: 0; }
}
.pdu-pag-intro-video iframe { width: 100%; height: 100%; border: 0; display: block; }
/* fallback pro hero bez videa — místo iframe lze vložit <img> (cover fill) */
.pdu-pag-intro-video img    { width: 100%; height: 100%; object-fit: cover; display: block; }

/* MODIFIER .is-foto — pro statický obrázek místo videa (např. mapa poboček).
   Použití: <div class="pdu-pag-intro-video is-foto"><img src="..."></div>
   - BEZ okraje / pozadí / stínu — jen čistě vložená mapa (refactor 2026-05-20 v2)
   - aspect-ratio: auto (výška podle obrázku) */
.pdu-pag-intro-video.is-foto {
  background: transparent; border: 0; box-shadow: none;
  padding: 0; aspect-ratio: auto; height: auto;
  display: block;
}
.pdu-pag-intro-video.is-foto img {
  width: 100%; height: auto; max-height: 28.75em;
  object-fit: contain; display: block;
  border-radius: 0 !important; border: 0 !important; box-shadow: none !important;
  margin: 0 auto !important; padding: 0 !important;
}

/* MODIFIER .is-cta — pravý sloupec hero obsahuje tlačítka místo videa/fota (2026-05-25).
   Reset aspect-ratio + černého pozadí + stínu — pouze hosting flex containeru s tlačítky.
   Použití: <div class="pdu-pag-intro-video is-cta"><div class="pdu-pag-cta-row is-stack">...</div></div> */
.pdu-pag-intro-video.is-cta {
  background: transparent; border: 0; box-shadow: none;
  aspect-ratio: auto; height: auto;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  overflow: visible; border-radius: 0;
}

/* Tabulka .parametry v rámci .pdu-pag-page — sjednocený styling
   (původní stránky používaly inline <style>; tady scopeujeme do pdu-pag-page) */
.pdu-pag-page table.parametry {
  width: 100%; border-collapse: collapse;
  margin: 0.5em 0 1em;
  font-size: 0.95em;
}
.pdu-pag-page table.parametry th,
.pdu-pag-page table.parametry td {
  padding: 0.5em 0.875em;
  text-align: left;
  border-bottom: 1px solid var(--pdu-barva-okraj-jemny);
}
.pdu-pag-page table.parametry th {
  background: var(--pdu-barva-pozadi-sekce);
  font-weight: 700;
  color: var(--pdu-barva-tmavomodra);
}
.pdu-pag-page table.parametry tr:last-child td { border-bottom: 0; }

/* Button varianty (doplnění k .pdu-pag-btn-primary/-cta v sekci 2) */
/* ghost = transparent bg (default — hover-glossy subtle), na hover → dark bg s dark glossy */
.pdu-pag-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  padding: 0.875em 1.75em; font-size: 1.05em; font-weight: 700;
  text-decoration: none !important; border-radius: var(--pdu-radius-m);
  transition: all var(--pdu-prechod-dur-stredni) ease;
  text-align: center; cursor: pointer;
  background-color: transparent;
  background-image: var(--pdu-grad-btn-hover-glossy);
  color: var(--pdu-barva-tmavomodra) !important;
  border: 1px solid rgba(25, 25, 50, .2);
  box-shadow: 0 0 0 1px var(--pdu-barva-okraj-jemny);
}
.pdu-pag-btn-ghost:hover {
  background-color: var(--pdu-barva-tmavomodra);
  background-image: var(--pdu-grad-btn-corner-dark), var(--pdu-grad-btn-glossy-dark);
  color: var(--pdu-barva-bila) !important;
  border-color: var(--pdu-barva-tmavomodra);
}

/* outline = bílé bg s tmavým borderem (default — hover-glossy subtle), na hover → dark bg + dark glossy */
.pdu-pag-btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  padding: 0.875em 1.75em; font-size: 1.05em; font-weight: 700;
  text-decoration: none !important; border-radius: var(--pdu-radius-m);
  transition: all var(--pdu-prechod-dur-stredni) ease;
  text-align: center; cursor: pointer;
  background-color: var(--pdu-barva-bila);
  background-image: var(--pdu-grad-btn-hover-corner), var(--pdu-grad-btn-hover-glossy);
  color: var(--pdu-barva-tmavomodra) !important;
  border: 1px solid var(--pdu-barva-tmavomodra);
  box-shadow: 0 0 0 1px var(--pdu-barva-okraj-jemny);
}
.pdu-pag-btn-outline:hover {
  background-color: var(--pdu-barva-tmavomodra);
  background-image: var(--pdu-grad-btn-corner-dark), var(--pdu-grad-btn-glossy-dark);
  color: var(--pdu-barva-bila) !important;
}


/* ╔══════════════════════════════════════════════════════════════
   📋 SEKCE 21. FORM (poptávka) — wrapper bez zásahů do se-forms.cz
   ──────────────────────────────────────────────────────────────
   Popis:
   - Card-style formulářová sekce s green-tinted gradient bg
   - Layout: 5fr side (kontakty + checklist) / 7fr formulář (se-forms embed)
   - .pdu-pag-form-side = vlevo:
     • .pdu-pag-side-contact = tmavá + .pdu-pag-side-contact-mail = bílá
     • .pdu-pag-prep = checklist "co si připravit"
   - Pravá strana = plain <div><p><script…></script></p></div>, ŽÁDNÉ override styly
   - .pdu-pag-tag = zelený pill nad nadpisem ("Nezávazně · zdarma")

   Pozn (2026-05-21): SE-FORMS / SmartEmailing override CSS i runtime JS cleanup
     byly odstraněny — formulář se renderuje v native SmartEmailing vzhledu.
     Veškeré úpravy designu se dělají v SmartEmailing admin panelu, ne tady.

   HTML:
     <section class="pdu-pag-form">
       <div class="pdu-pag-form-head">
         <span class="pdu-pag-tag">Nezávazně · zdarma</span>
       </div>
       <div class="pdu-pag-form-grid">
         <div class="pdu-pag-form-side">
           <a class="pdu-pag-side-contact" href="tel:..."><span>Volat</span><strong>+420…</strong></a>
           <a class="pdu-pag-side-contact pdu-pag-side-contact-mail" href="mailto:…"><span>E-mail</span><strong>…</strong></a>
           <div class="pdu-pag-prep is-vetsi">…</div>
         </div>
         <div>
           <p><script src="https://se-forms.cz/.../subscribe/…"></script></p>
         </div>
       </div>
     </section>
   ══════════════════════════════════════════════════════════════ */
.pdu-pag-form {
  margin: 0 0 3em; padding: 2em 1.75em;
  background: linear-gradient(180deg, #f8fbf5 0%, var(--pdu-barva-bila) 100%);
  border: 1px solid #d9eedd; border-radius: var(--pdu-radius-xl);
}
.pdu-pag-form-head { text-align: center; margin-bottom: 1.5em; }
/* zelený pill (uppercase, letter-spacing) */
.pdu-pag-tag {
  display: inline-block; padding: 0.3125em 0.75em;
  background: var(--pdu-barva-zelena-akcent); color: var(--pdu-barva-bila);
  border-radius: 1.25em; font-size: .78em; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase; margin-bottom: 0.75em;
}
.pdu-pag-form-head h2 { font-size: clamp(1.5em, 3vw, 2em); margin: 0 0 0.5em; color: var(--pdu-barva-tmavomodra); font-weight: 800; }
/* Když h2 následuje za .pdu-pag-tag pill, posuň o 0.75em dolů (vizuálně oddělit od pillu) */
.pdu-pag-form-head .pdu-pag-tag + h2 { margin-top: 0.75em; }
.pdu-pag-form-head p { color: var(--pdu-barva-text-sekundarni); margin: 0; }
.pdu-pag-form-grid { display: grid; grid-template-columns: 1fr; gap: 1.125em; }
@media (min-width: 55em) { .pdu-pag-form-grid { grid-template-columns: 5fr 7fr; } }

/* SIDE = levá strana s kontakty + checklist */
.pdu-pag-form-side { display: flex; flex-direction: column; gap: 0.625em; }
/* tmavomodré kontakt tlačítko (default — pro telefon) */
.pdu-pag-side-contact {
  display: flex; flex-direction: column; gap: 0.125em;
  padding: 0.875em 1.125em; background: var(--pdu-barva-tmavomodra);
  color: var(--pdu-barva-bila) !important; border-radius: var(--pdu-radius-card);
  text-decoration: none !important; transition: all var(--pdu-prechod-dur-stredni) ease;
}
.pdu-pag-side-contact:hover { background: var(--pdu-barva-bila); color: var(--pdu-barva-tmavomodra) !important; outline: 1px solid var(--pdu-barva-tmavomodra); }
.pdu-pag-side-contact span { font-size: .78em; opacity: .7; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.pdu-pag-side-contact strong { font-size: 1.04em; font-weight: 800; }
/* varianta -mail = bílá karta s borderem */
.pdu-pag-side-contact-mail { background: var(--pdu-barva-bila); color: var(--pdu-barva-tmavomodra) !important; border: 1px solid var(--pdu-barva-okraj-jemny); }
.pdu-pag-side-contact-mail:hover { background: var(--pdu-barva-zelena-akcent); color: var(--pdu-barva-bila) !important; border-color: var(--pdu-barva-zelena-akcent); outline: none; }

/* checklist "co si připravit" — bílá karta s → bullets */
.pdu-pag-prep {
  padding: 1em 1.125em; background: var(--pdu-barva-bila);
  border: 1px solid var(--pdu-barva-okraj-jemny); border-radius: var(--pdu-radius-card);
  margin-top: 0.25em;
}
.pdu-pag-prep strong { display: block; margin-bottom: 0.5em; color: var(--pdu-barva-tmavomodra); }
.pdu-pag-prep ul { display: grid; gap: 0.3125em; list-style: none; padding: 0; margin: 0; }
.pdu-pag-prep li { padding-left: 1.25em; position: relative; color: var(--pdu-barva-text-sekundarni); font-size: .9em; line-height: 1.45; }
.pdu-pag-prep li::before { content: "→"; position: absolute; left: 0.125em; color: var(--pdu-barva-zelena-akcent); font-weight: 800; }
/* modifier .is-vetsi = větší font nadpisu i odrážek (žádaná varianta od Lucky 2026-05-21) */
.pdu-pag-prep.is-vetsi { padding: 1.25em 1.375em; }
.pdu-pag-prep.is-vetsi strong { font-size: 1.15em; margin-bottom: 0.75em; }
.pdu-pag-prep.is-vetsi ul { gap: 0.5em; }
.pdu-pag-prep.is-vetsi li { font-size: 1em; line-height: 1.55; padding-left: 1.375em; }
/* sekundární podnadpis uvnitř prep (např. „Co se nám hodí vědět") — odsadit od výčtu nad ním */
.pdu-pag-prep-sub { margin: 0.5em 0 0; }
/* poznámka pod výčtem — světlejší, kurzíva, oddělená jemnou linkou */
.pdu-pag-prep-poznamka {
  margin: 0.875em 0 0; padding-top: 0.75em;
  border-top: 1px dashed var(--pdu-barva-okraj-jemny);
  font-size: .9em; font-style: italic; line-height: 1.5;
  color: var(--pdu-barva-text-sekundarni);
}

/* Pravá strana = se-forms.cz embed v native SmartEmailing vzhledu (žádné CSS overrides). */
@media (max-width: 32.5em) { .pdu-pag-form { padding: 1.375em 1em; } }


/* ╔══════════════════════════════════════════════════════════════
   ⏱️ SEKCE 22. TIMELINE (časová osa 6 kroků)
   ──────────────────────────────────────────────────────────────
   Popis:
   - 6 očíslovaných kruhů (3em) spojených tečkovanou zelenou čárou
   - Mobil (<55em): vertikální, kruh vlevo (grid 3em/1fr), čára per-step ::before
   - Desktop (≥55em): horizontální, kruh nahoře (grid repeat(6, 1fr)),
     SINGLE průběžná horizontal line (parent ::before, top:28)
   - Kruhy bílé s 0.125em zeleným borderem (clean) — text nad/vedle
   - .pdu-pag-tl-meta = pill "Vy · 5 min" / "My · do 2 dnů" / "Společně"

   HTML:
     <section class="pdu-pag-flow">
       <header><h2>Jak to probíhá</h2><p>Subtitle...</p></header>
       <ol class="pdu-pag-timeline">
         <li class="pdu-pag-tl-step">
           <div class="pdu-pag-tl-num">1</div>
           <div class="pdu-pag-tl-body">
             <h4>Pošlete poptávku</h4>
             <p>Délka, výška, typ a PSČ.</p>
             <span class="pdu-pag-tl-meta">Vy · 5 minut</span>
           </div>
         </li>
         ... 5×
       </ol>
     </section>
   ══════════════════════════════════════════════════════════════ */
.pdu-pag-flow { margin: 0 0 3em; }
.pdu-pag-flow header { margin-bottom: 1.5em; }
.pdu-pag-flow h2 { font-size: clamp(1.5em, 3vw, 1.9em); color: var(--pdu-barva-tmavomodra); font-weight: 800; margin: 0; }
.pdu-pag-flow p { color: var(--pdu-barva-text-sekundarni); margin-top: 0.25em; }

.pdu-pag-timeline { position: relative; display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
.pdu-pag-tl-step { position: relative; display: grid; grid-template-columns: 3em 1fr; gap: 1.125em; padding-bottom: 1.5em; }
.pdu-pag-tl-step:last-child { padding-bottom: 0; }
/* Vertikální tečkovaná čára (mobil) — spojuje kruhy přes ::before */
.pdu-pag-tl-step::before {
  content: ""; position: absolute; left: 1.4375em; top: 3.25em; bottom: 0.25em; width: 0.125em;
  background: repeating-linear-gradient(180deg, var(--pdu-barva-zelena-akcent) 0 0.25em, transparent 0.25em 0.5em);
  z-index: 0;
}
.pdu-pag-tl-step:last-child::before { display: none; }
.pdu-pag-tl-num {
  width: 3em; height: 3em; border-radius: 50%;
  background: var(--pdu-barva-bila); border: 0.125em solid var(--pdu-barva-zelena-akcent);
  color: var(--pdu-barva-zelena-akcent-hover);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.125em;
  position: relative; z-index: 1;
  box-shadow: 0 0.25em 0.75em rgba(0, 180, 110, .2);
}
.pdu-pag-tl-body { padding-top: 0.375em; }
.pdu-pag-tl-body h4 { font-size: 1.05em; font-weight: 800; margin: 0 0 0.375em; color: var(--pdu-barva-tmavomodra); line-height: 1.3; }
.pdu-pag-tl-body p { font-size: .92em; color: var(--pdu-barva-text-sekundarni); line-height: 1.55; margin: 0; }
/* meta pill — uppercase tag (např. "Vy · 5 min") */
.pdu-pag-tl-meta {
  display: inline-block; margin-top: 0.5em;
  font-size: .72em; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--pdu-barva-zelena-akcent-hover); background: var(--pdu-barva-zelena-svetla-3);
  padding: 0.25em 0.625em; border-radius: 6.25em;
}
/* Horizontální layout na desktopu ≥ 55em — flex row s flex:1 per step
   (auto-distribuce přes celou šířku), čára per-step ::after od středu vlastního
   kruhu (left:50%) přes 100% step + gap k středu dalšího kruhu. Funguje pro
   libovolný počet kroků (3, 4, 5, 6+) — vždy končí u posledního. */
@media (min-width: 55em) {
  .pdu-pag-timeline { flex-direction: row; gap: 1em; padding-top: 0.25em; }
  /* override mobilního grid-template-columns + roztáhni rovnoměrně */
  .pdu-pag-tl-step { display: block; flex: 1 1 0; min-width: 0; text-align: center; padding-bottom: 0; gap: 0; }
  /* skryj per-step vertikální čáru (mobilní) */
  .pdu-pag-tl-step::before { display: none; }
  /* per-step horizontální čára: od středu vlastního kruhu (50%) k středu dalšího (= 100% + gap) */
  .pdu-pag-tl-step:not(:last-child)::after {
    content: ""; position: absolute; top: 1.75em; left: 50%;
    width: calc(100% + 1em); height: 0.125em;
    background: repeating-linear-gradient(90deg, var(--pdu-barva-zelena-akcent) 0 0.375em, transparent 0.375em 0.75em);
    z-index: 0;
  }
  .pdu-pag-tl-num { margin: 0 auto; }
  .pdu-pag-tl-body { padding-top: 0.875em; }
  .pdu-pag-tl-body h4 { font-size: 1em; }
  .pdu-pag-tl-body p { font-size: .88em; }
  .pdu-pag-tl-meta { font-size: .7em; }
}


/* ╔══════════════════════════════════════════════════════════════
   🔲 SEKCE 23. KAT-GRID (9 zaoblených ikon kategorií, no labels)
   ──────────────────────────────────────────────────────────────
   Popis:
   - 9 čtvercových obrázků (ikona kategorie z /user/documents/upload/fotografie/ikony/)
   - Bez karetních wrapperů, bez textových labelů — text je už součástí obrázku
   - 2 sloupce <37.5em, 3 sloupce ≥37.5em
   - Border-radius XL (0.875em), hover scale 1.05 + výraznější stín

   HTML:
     <section class="pdu-pag-kat">
       <header><h2>Co montujeme</h2><p>9 typů...</p></header>
       <div class="pdu-pag-kat-grid">
         <a href="/pletiva/" title="Pletiva"><img src="/user/documents/upload/fotografie/ikony/ikona_pletiva_web.png" alt="Pletiva"></a>
         ... 8×
       </div>
     </section>
   ══════════════════════════════════════════════════════════════ */
.pdu-pag-kat { margin: 0 0 3em; }
.pdu-pag-kat header { margin-bottom: 1.375em; }
.pdu-pag-kat h2 { font-size: clamp(1.5em, 3vw, 1.9em); color: var(--pdu-barva-tmavomodra); font-weight: 800; margin: 0; }
.pdu-pag-kat p { color: var(--pdu-barva-text-sekundarni); margin-top: 0.25em; }
.pdu-pag-kat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.125em; }
@media (min-width: 37.5em) { .pdu-pag-kat-grid { grid-template-columns: repeat(3, 1fr); } }
/* Orphan center — osamocená poslední položka na řádku se vystředí. */
.pdu-pag-kat-grid > a:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  justify-self: center;
  max-width: calc(50% - 0.5625em);
  width: 100%;
}
@media (min-width: 37.5em) {
  /* na 3-col reset 2-col orphan rule */
  .pdu-pag-kat-grid > a:last-child:nth-child(odd) {
    grid-column: auto;
    max-width: none;
    justify-self: auto;
    width: auto;
  }
  /* 3-col orphan (poslední sám: nth-child(3n+1) = pozice 1, 4, 7, 10…) */
  .pdu-pag-kat-grid > a:last-child:nth-child(3n+1) {
    grid-column: 2;
  }
}
.pdu-pag-kat-grid a {
  display: block;
  border-radius: var(--pdu-radius-xl); overflow: hidden;
  transition: transform var(--pdu-prechod-dur-stredni) ease, box-shadow var(--pdu-prechod-dur-stredni) ease;
  text-decoration: none !important;
  box-shadow: var(--pdu-stin-jemny);
}
.pdu-pag-kat-grid a:hover { transform: scale(1.05); box-shadow: 0 0.625em 1.75em rgba(0, 0, 0, .14); }
.pdu-pag-kat-grid img { width: 100%; height: auto; display: block; border-radius: var(--pdu-radius-xl); }


/* ╔══════════════════════════════════════════════════════════════
   ✅ SEKCE 24. PROCNAS (proč nás checklist + mapa)
   ──────────────────────────────────────────────────────────────
   Popis:
   - Card-style sekce s bílým background a stínem
   - Mobil: stack; ≥47.5em: 6fr body / 5fr mapa
   - .pdu-pag-procnas-body = nadpis + 6× checklist <li> s zeleným ✓ kruhem
   - .pdu-pag-check = 24×24 px zelený kruh s ✓
   - .pdu-pag-procnas-ref = dashed-top footnote s odkazem na reference
   - .pdu-pag-procnas-map = pravá strana — mapa max 35em + .pdu-pag-procnas-map-cap pill

   HTML:
     <section class="pdu-pag-procnas">
       <div class="pdu-pag-procnas-body">
         <h2>Proč to nechat na nás?</h2>
         <ul class="pdu-pag-procnas-list">
           <li>
             <span class="pdu-pag-check" aria-hidden="true">✓</span>
             <div><strong>Kalkulace zdarma</strong> nezávazně</div>
           </li>
           ... 5×
         </ul>
         <p class="pdu-pag-procnas-ref">→ <a href="/reference/">Reference</a></p>
       </div>
       <div class="pdu-pag-procnas-map">
         <span class="pdu-pag-procnas-map-cap">7 poboček v ČR</span>
         <img src="/user/documents/upload/grafika/mapy/...png" alt="Mapa">
       </div>
     </section>
   ══════════════════════════════════════════════════════════════ */
.pdu-pag-procnas {
  display: grid; grid-template-columns: 1fr; gap: 0; margin: 0 0 2.5em;
  background: var(--pdu-barva-bila); border: 1px solid var(--pdu-barva-okraj-jemny);
  border-radius: var(--pdu-radius-xl); overflow: hidden;
  box-shadow: var(--pdu-stin-stredni);
}
@media (min-width: 47.5em) { .pdu-pag-procnas { grid-template-columns: 6fr 5fr; align-items: stretch; } }
/* Když .pdu-pag-procnas obsahuje JEN body (bez mapy), ať body zabere celou šířku gridu —
   jinak by text v 6fr sloupci skončil úzký a brzy by se zalamoval. */
.pdu-pag-procnas-body:only-child { grid-column: 1 / -1; }
.pdu-pag-procnas-body { padding: 1.875em 2em 1.625em; }
.pdu-pag-procnas-body h2 { font-size: 1.55em; font-weight: 800; margin: 0 0 1.25em; color: var(--pdu-barva-tmavomodra); }
.pdu-pag-procnas-list { display: flex; flex-direction: column; gap: 0.75em; margin: 0 0 1.125em; padding: 0; list-style: none; }
.pdu-pag-procnas-list li { display: flex; gap: 0.75em; align-items: flex-start; font-size: .98em; line-height: 1.5; color: var(--pdu-barva-text-sekundarni); }
.pdu-pag-procnas-list strong { color: var(--pdu-barva-tmavomodra); font-weight: 800; }
/* zelený ✓ kruh 1.5em (světlezelený bg + zelený text) */
.pdu-pag-check {
  flex-shrink: 0; width: 1.5em; height: 1.5em; border-radius: 50%;
  background: var(--pdu-barva-zelena-svetla-3); color: var(--pdu-barva-zelena-akcent);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .82em; margin-top: 1px;
}
/* dashed top footnote s reference odkazem */
.pdu-pag-procnas-ref { padding-top: 0.875em; border-top: 1px dashed var(--pdu-barva-okraj-jemny); margin: 0; font-size: .95em; color: var(--pdu-barva-text-sekundarni); }
.pdu-pag-procnas-ref a { color: var(--pdu-barva-zelena-akcent); }
/* mapa wrapper s šedým bg */
.pdu-pag-procnas-map { position: relative; background: #f6f6f4; padding: 1.5em; display: flex; align-items: center; justify-content: center; }
.pdu-pag-procnas-map img { width: 100%; max-width: 35em; height: auto; display: block; border-radius: var(--pdu-radius-card); }
/* "7 poboček v ČR" pill v levém horním rohu mapy */
.pdu-pag-procnas-map-cap {
  position: absolute; top: 1em; left: 1em; z-index: 2;
  background: var(--pdu-barva-tmavomodra); color: var(--pdu-barva-bila);
  padding: 0.375em 0.75em; border-radius: 1.25em;
  font-size: .78em; font-weight: 700; letter-spacing: .02em;
}


/* ╔══════════════════════════════════════════════════════════════
   🛒 SEKCE 25. ESHOP (3 karty s overlay gradient)
   ──────────────────────────────────────────────────────────────
   Popis:
   - 3 obrázkové karty s tmavým gradient overlay dole + bílý nadpis
   - Aspect ratio 4:3, hover scale obrázku + opacity → 1
   - Mobil: stack, ≥37.5em: 3 col

   HTML:
     <section class="pdu-pag-eshop">
       <header><h2>E-shop</h2><p>Projděte si nabídku.</p></header>
       <div class="pdu-pag-eshop-grid">
         <a href="/pletiva/"><img src="..."><span>Ploty a pletiva →</span></a>
         ... 2×
       </div>
     </section>
   ══════════════════════════════════════════════════════════════ */
.pdu-pag-eshop { margin: 0 0 2.5em; padding-top: 1.875em; border-top: 1px solid var(--pdu-barva-okraj-jemny); }
.pdu-pag-eshop header { margin-bottom: 1.125em; }
.pdu-pag-eshop h2 { font-size: 1.5em; margin: 0 0 0.625em; color: var(--pdu-barva-tmavomodra); font-weight: 800; line-height: 1.3; }
.pdu-pag-eshop p { color: var(--pdu-barva-text-sekundarni); margin: 0; }
.pdu-pag-eshop-grid { display: grid; grid-template-columns: 1fr; gap: 0.875em; }
@media (min-width: 37.5em) { .pdu-pag-eshop-grid { grid-template-columns: repeat(3, 1fr); } }
.pdu-pag-eshop-grid a {
  display: block; position: relative; overflow: hidden;
  border-radius: var(--pdu-radius-l); background: #000;
  aspect-ratio: 4/3; text-decoration: none !important;
}
.pdu-pag-eshop-grid img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: all .3s ease; }
.pdu-pag-eshop-grid a:hover img { transform: scale(1.04); opacity: 1; }
/* gradient overlay dole s bílým labelem */
.pdu-pag-eshop-grid span {
  position: absolute; inset: auto 0 0 0; padding: 0.875em 1em;
  background: linear-gradient(to top, rgba(0, 0, 0, .7), transparent);
  color: var(--pdu-barva-bila); font-weight: 700;
}
/* poznámka pod e-shop gridem — cross-sell na kalkulátor + návody (Lucka 2026-05-21) */
.pdu-pag-eshop-poznamka {
  margin: 2.25em 0 0; padding: 0.875em 1.125em;
  background: #f6f6f4;
  border-left: 0.1875em solid var(--pdu-barva-zelena-akcent);
  border-radius: var(--pdu-radius-card);
  font-size: .95em; line-height: 1.55;
  color: var(--pdu-barva-text-sekundarni);
}
.pdu-pag-eshop-poznamka a { color: var(--pdu-barva-zelena-akcent); }

/* ──────────────────────────────────────────────────────────────
   DRUHY — popsané čtvercové miniatury (reference druhů, např. pletiva 5×, panely 2×)
   Auto-fit grid → přizpůsobí se i úzkému pravému sloupci .pdu-pag-text-foto i plné šířce.
   Použití uvnitř .pdu-pag-text-foto jako druhý sloupec (místo jednoho <img>):
     <div class="pdu-pag-druhy">
       <a class="pdu-pag-druhy-item" href="/kat/"><img src="..." alt="..." /><span class="pdu-pag-druhy-popis">Čtyřhranné</span></a>
     </div>
   ────────────────────────────────────────────────────────────── */
.pdu-pag-druhy { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.625em; margin: 0; width: 100%; }
/* osamocený poslední prvek (lichý počet → 2-2-1) přes obě kolony a na střed */
.pdu-pag-druhy-item:nth-child(odd):last-child { grid-column: 1 / -1; width: calc(50% - 0.3125em); justify-self: center; }
.pdu-pag-druhy-item {
  position: relative; display: block; overflow: hidden; aspect-ratio: 1 / 1;
  border-radius: var(--pdu-radius-card); background: #000; text-decoration: none !important;
  box-shadow: var(--pdu-stin-jemny);
}
.pdu-pag-druhy-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--pdu-prechod-dur-stredni) ease; }
.pdu-pag-druhy-item:hover img, .pdu-pag-druhy-item:focus-visible img { transform: scale(1.05); }
.pdu-pag-druhy-popis {
  position: absolute; inset: auto 0 0 0; padding: 0.4375em 0.625em;
  background: linear-gradient(to top, rgba(0, 0, 0, .72), transparent);
  color: var(--pdu-barva-bila); font-weight: 700; font-size: .8em; line-height: 1.15;
}
@media (prefers-reduced-motion: reduce) {
  .pdu-pag-druhy-item img { transition: none; }
  .pdu-pag-druhy-item:hover img, .pdu-pag-druhy-item:focus-visible img { transform: none; }
}

/* ──────────────────────────────────────────────────────────────
   ROZPIS CENY — rozbalovací itemizovaný výpočet pod mini tabulkou (native <details>, bez JS)
   Použití: <details class="pdu-pag-rozpis"><summary>Rozpis ceny</summary><div class="pdu-pag-rozpis-telo">…</div></details>
   ────────────────────────────────────────────────────────────── */
.pdu-pag-rozpis { margin: 0.75em 0 0; border: 1px solid var(--pdu-barva-okraj-jemny); border-radius: var(--pdu-radius-card); background: var(--pdu-barva-bila); overflow: hidden; }
.pdu-pag-rozpis > summary {
  cursor: pointer; padding: 0.75em 1em; font-weight: 700; font-size: 0.9em;
  color: var(--pdu-barva-tmavomodra); list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 0.5em;
}
.pdu-pag-rozpis > summary::-webkit-details-marker { display: none; }
.pdu-pag-rozpis > summary::after { content: "\25BC"; font-size: 0.7em; color: var(--pdu-barva-zelena-akcent); transition: transform var(--pdu-prechod-dur-rychly) ease; }
.pdu-pag-rozpis[open] > summary::after { transform: rotate(180deg); }
.pdu-pag-rozpis-telo { padding: 0 1em 0.875em; font-size: 0.9em; color: var(--pdu-barva-text-sekundarni); }
.pdu-pag-rozpis-telo p { margin: 0.625em 0 0.25em; }
.pdu-pag-rozpis-telo ul { margin: 0; padding-left: 1.25em; line-height: 1.7; }
.pdu-pag-rozpis-telo .is-celkem { font-weight: 800; color: var(--pdu-barva-tmavomodra); }
@media (prefers-reduced-motion: reduce) { .pdu-pag-rozpis > summary::after { transition: none; } }

/* Modifier .is-3by2 — sjednocení poměru stran fotek v text-foto (3:2, ořez přes object-fit cover) */
.pdu-pag-text-foto img.is-3by2 { aspect-ratio: 3 / 2; object-fit: cover; }


/* ╔══════════════════════════════════════════════════════════════
   ✓ SEKCE 26. BULLETS (zaškrtávací list uvnitř text-foto)
   ──────────────────────────────────────────────────────────────
   Popis:
   - UL s zeleným ✓ prefix místo bulletů
   - Použito uvnitř .pdu-pag-text-foto pro výčet výhod (např. kovovýroba)

   HTML:
     <ul class="pdu-pag-bullets">
       <li>Atypická šířka brány</li>
       <li>Různé barvy a výplně</li>
     </ul>
   ══════════════════════════════════════════════════════════════ */
.pdu-pag-bullets { display: grid; gap: 0.375em; margin: 0 0 0.75em; padding: 0; list-style: none; }
.pdu-pag-bullets li { padding-left: 1.375em; position: relative; color: var(--pdu-barva-text-sekundarni); }
.pdu-pag-bullets li::before { content: "✓"; position: absolute; left: 0; color: var(--pdu-barva-zelena-akcent); font-weight: 800; }

/* ──────────────────────────────────────────────────────────────
   NÁVODY — malá boční ilustrace (ikonka/diagram u textu) + lightbox v text-foto
   (2026-06-24, redesign návodů). Nahrazuje legacy inline `style="float:right"`
   u malých obrázků. Mobile: centrovaný blok; ≥37.5em: float right, text obteče.
   Použití: <img class="pdu-pag-foto-inline" src="…" alt="…" loading="lazy" />
   ────────────────────────────────────────────────────────────── */
.pdu-pag-foto-inline {
  display: block; max-width: 9.5em; width: 100%; height: auto;
  margin: 0 auto 0.75em; border-radius: var(--pdu-radius-m);
}
@media (min-width: 37.5em) {
  .pdu-pag-foto-inline { float: right; margin: 0.125em 0 0.625em 1.25em; }
}
/* lightbox obrázek uvnitř text-foto = blokový odkaz (aby <a> neměl inline mezeru) */
.pdu-pag-text-foto a[data-gallery] { display: block; line-height: 0; }
/* Návody — produktová fotka na čtvercové bílé dlaždici (např. kleště u svařovaného pletiva).
   object-fit:contain = celý nástroj viditelný, sjednocená výška obou dlaždic. (2026-06-26) */
.pdu-pag-foto-ctverec { aspect-ratio: 1; width: 100%; max-width: 17em; margin: 0 auto 0.5em; background: var(--pdu-barva-bila); border: 1px solid var(--pdu-barva-okraj-jemny); border-radius: var(--pdu-radius-m); overflow: hidden; }
.pdu-pag-foto-ctverec img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Návody — 2 videa vedle sebe */
.pdu-pag-video-2 { display: grid; grid-template-columns: 1fr; gap: 1em; margin: 0.5em 0 1.25em; }
@media (min-width: 37.5em) { .pdu-pag-video-2 { grid-template-columns: repeat(2, 1fr); } }
/* Jedno video (`:only-child`) v .pdu-pag-video-2 → vystředit + omezit šířku.
   NE-rušivé: 2-up případ (dvě buňky) zůstává beze změny. (2026-06-26) */
@media (min-width: 37.5em) { .pdu-pag-video-2:has(.pdu-pag-video-cell:only-child) { grid-template-columns: minmax(0, 32em); justify-content: center; } }
/* zaoblená 16:9 video buňka — wrapper s overflow:hidden spolehlivě ořízne iframe do oblých rohů
   (border-radius přímo na <iframe> obsah přehrávače neořízne). Použití i v text-foto. */
.pdu-pag-video-cell { position: relative; aspect-ratio: 16/9; border-radius: var(--pdu-radius-xl); overflow: hidden; box-shadow: var(--pdu-stin-stredni); background: #000; }
.pdu-pag-video-cell iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
/* Návody — 2 sloupce zarovnané k hornímu okraji (materiál / nářadí) */
.pdu-pag-cols-2 { display: grid; grid-template-columns: 1fr; gap: 0.25em 2em; align-items: start; }
@media (min-width: 48em) { .pdu-pag-cols-2 { grid-template-columns: repeat(2, 1fr); } }
/* Návody — klikací krok časové osy: overlay odkaz → JS otevře + sjede na příslušnou rozbalovací kartu.
   (.pdu-pag-tl-step je už position:relative). close-others řeší FAQ JS. */
.pdu-pag-tl-link { position: absolute; inset: 0; z-index: 5; cursor: pointer; border-radius: var(--pdu-radius-card); }
.pdu-pag-tl-link:focus-visible { outline: 2px solid var(--pdu-barva-zelena-akcent); outline-offset: 3px; }
.pdu-pag-tl-step:hover .pdu-pag-tl-num { background: var(--pdu-barva-zelena-akcent); color: var(--pdu-barva-bila); }
.pdu-pag-faq-details { scroll-margin-top: 1em; }


/* ╔══════════════════════════════════════════════════════════════
   📊 SEKCE 27. TABULKA (parameter / pricing / hours table)
   ──────────────────────────────────────────────────────────────
   Popis:
   - Plné šířky <table>, navy header bg + bílý text uppercase
   - Bez striped rows (clean look)
   - Hover row → světle zelený highlight
   - Modifier .is-zvyrazneny = výrazný řádek (highlight tier / total),
     poslední buňka v něm dostane zelený text (typicky cena/výsledek)
   - Border 1px kolem tabulky, jemné row dividery
   - TODO mobile: zvážit responsive stacking přes data-label attributes

   HTML usage:
     <table class="pdu-pag-tabulka">
       <thead>
         <tr><th>Sloupec 1</th><th>Sloupec 2</th><th>Sloupec 3</th></tr>
       </thead>
       <tbody>
         <tr><td>Data 1A</td><td>Data 1B</td><td>Data 1C</td></tr>
         <tr><td>Data 2A</td><td>Data 2B</td><td>Data 2C</td></tr>
         <tr class="is-zvyrazneny"><td>Highlight</td><td>...</td><td>cena</td></tr>
       </tbody>
     </table>
   ══════════════════════════════════════════════════════════════ */
.pdu-pag-tabulka {
  width: 100%; border-collapse: collapse;
  background: var(--pdu-barva-bila);
  border: 1px solid var(--pdu-barva-okraj-jemny);
  border-radius: var(--pdu-radius-card); overflow: hidden;
  font-size: .95em;
}
.pdu-pag-tabulka thead th {
  background: var(--pdu-barva-tmavomodra); color: var(--pdu-barva-bila);
  font-weight: 800; padding: 0.875em 1.125em; text-align: left;
  font-size: .88em; letter-spacing: .02em; text-transform: uppercase;
}
.pdu-pag-tabulka tbody td { padding: 0.8125em 1.125em; border-bottom: 1px solid var(--pdu-barva-okraj-svetly); }
.pdu-pag-tabulka tbody tr:last-child td { border-bottom: 0; }
/* hover row → světle zelený highlight (žádné alternující řádky — clean look) */
.pdu-pag-tabulka tbody tr:hover { background: var(--pdu-barva-zelena-svetla-3); }
/* modifier pro výrazný řádek (highlight tier / total) */
.pdu-pag-tabulka .is-zvyrazneny { background: var(--pdu-barva-zelena-svetla-3); font-weight: 700; }
.pdu-pag-tabulka .is-zvyrazneny td:last-child { color: var(--pdu-barva-zelena-akcent); }


/* ╔══════════════════════════════════════════════════════════════
   📍 SEKCE 28. POBOCKA (location card s mapou + info + hodiny)
   ──────────────────────────────────────────────────────────────
   Popis:
   - 2-col grid (8.75em mapa thumbnail + 1fr info)
   - .pdu-pag-pobocka-grid = wrapper pro 2-col layout multiple karet
   - .pdu-pag-pobocka-mapa = thumbnail mapy — buď <img> nebo prázdný
     div s zeleným gradient fallback + 📍 emoji
   - Info: H3 + adresa + klikatelný tel + hodiny mini-table + "Detail →" link
   - Hover lift + výraznější stín

   HTML usage:
     <div class="pdu-pag-pobocka-grid">
       <article class="pdu-pag-pobocka">
         <div class="pdu-pag-pobocka-mapa">
           <img src="/user/documents/upload/mapy/ledce.jpg" alt="Mapa">
         </div>
         <div class="pdu-pag-pobocka-info">
           <h3>Centrála – Ledce u Plzně</h3>
           <p class="pdu-pag-pobocka-adresa">Ledce 99, 330 14</p>
           <a class="pdu-pag-pobocka-tel" href="tel:+420377223120">+420 377 223 120</a>
           <table class="pdu-pag-pobocka-hodiny">
             <tr><td>Po–Pá</td><td>7:00 – 16:00</td></tr>
             <tr><td>So</td><td>8:00 – 12:00</td></tr>
           </table>
           <a class="pdu-pag-pobocka-link" href="/pobocka/ledce/">Detail pobočky →</a>
         </div>
       </article>
       ... další pobocky
     </div>
   ══════════════════════════════════════════════════════════════ */
/* Grid — 1/2/3 col (refactor 2026-05-20: 3-col na ≥68.75em pro vyrovnání 7 poboček) */
.pdu-pag-pobocka-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.125em; }
@media (min-width: 47.5em)  { .pdu-pag-pobocka-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68.75em) { .pdu-pag-pobocka-grid { grid-template-columns: repeat(3, 1fr); } }

/* Karta — vertical layout (refactor 2026-05-20 v3 "vyhypit"):
   - VELKÁ mapa nahoře + info pod ní
   - Top-border 0.25em zelený (accent label paralela `.pdu-pag-stat` border-bottom)
   - Default box-shadow středně-výrazný (stredni), hover dramatičtější (translateY -6 + výraznější shadow)
   - Border 0 (čistší), border-radius card */
.pdu-pag-pobocka {
  display: flex; flex-direction: column;
  background: var(--pdu-barva-bila);
  border: 0; border-top: 0.25em solid var(--pdu-barva-zelena-akcent);
  border-radius: var(--pdu-radius-card); overflow: hidden;
  box-shadow: var(--pdu-stin-stredni);
  transition: all var(--pdu-prechod-dur-stredni) ease;
}
.pdu-pag-pobocka:hover {
  box-shadow: 0 0.875em 2em rgba(0, 180, 110, .18);  /* zelený tinted shadow na hover */
  transform: translateY(-0.375em);
}

/* Mapa hero — aspect 16:10 (z 3/2 — menší výška, fix v2.6.9 "mapy moc velké, vyjdou při hoveru"),
   padding 1em kolem mapy = vzduch + mapa není full-bleed → vypadá kompaktněji,
   světle zelené pozadí matchuje barvu mapového podkladu */
.pdu-pag-pobocka-mapa {
  width: 100%; aspect-ratio: 16 / 10;
  background: #DCEBD8; /* matchuje světle zelené pozadí mapy */
  position: relative; display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  padding: 1em;
}
.pdu-pag-pobocka-mapa:empty::after {
  content: "📍"; font-size: 3em;
  filter: drop-shadow(0 0.125em 0.25em rgba(0, 0, 0, .2));
}
.pdu-pag-pobocka-mapa a { display: block; width: 100%; height: 100%; line-height: 0; }
.pdu-pag-pobocka-mapa img {
  width: 100% !important; height: 100% !important; object-fit: contain; display: block;
  border-radius: 0 !important; border: 0 !important; margin: 0 !important; padding: 0 !important;
  max-width: none !important; max-height: none !important;
}
/* HOVER scale na mapě ODSTRANĚN (v2.6.9) — mapa už zaplňuje contenu area, scale 1.04
   způsoboval že mapa "vyjde" ven (přes padding okraje). Hover lift karty samé stačí. */

/* Info — refined typography (v2.6.9 "vylepšit pobockové karty"):
   - H3 1.2em (z 1.3) — méně dominantní vs tel
   - 📍 pin barva přesnější (hue-rotate na zelenou)
   - Tel 1.08em (z 1.15) — viditelný CTA bez over-dominance
   - Hodiny mini-table s pozadím (.pdu-pag-pobocka-hodiny.is-boxed pattern)
   - Generous padding (22×22) + clear vertical rytmus (margin-bottom 14 na adresa/tel) */
.pdu-pag-pobocka-info {
  padding: 1.375em 1.375em 1.25em;
  display: flex; flex-direction: column; gap: 0;
}
.pdu-pag-pobocka-info h3 {
  font-size: 1.2em; font-weight: 800; line-height: 1.25;
  margin: 0 0 0.375em; color: var(--pdu-barva-tmavomodra);
  display: flex; align-items: baseline; gap: 0.375em;
}
.pdu-pag-pobocka-info h3::before {
  content: "📍"; font-size: .8em; line-height: 1; flex-shrink: 0;
}
.pdu-pag-pobocka-adresa {
  font-size: .9em; color: var(--pdu-barva-text-sekundarni);
  margin: 0 0 0.875em; line-height: 1.5;
}
/* klikatelný telefon — viditelný CTA, ale ne over-dominant */
.pdu-pag-pobocka-tel {
  display: inline-block; font-weight: 800; font-size: 1.08em;
  color: var(--pdu-barva-zelena-akcent) !important;
  text-decoration: none !important; margin-bottom: 0.875em;
  letter-spacing: -.01em;
}
.pdu-pag-pobocka-tel:hover { color: var(--pdu-barva-zelena-akcent-hover) !important; text-decoration: underline !important; }
/* hodiny — boxed mini-table (světlezelený bg + zelený left accent + radius)
   pro lepší vizuální oddělení od kontaktu výše */
.pdu-pag-pobocka-hodiny {
  width: 100%; font-size: .85em; border-collapse: collapse;
  margin: 0 0 0.875em;
  background: var(--pdu-barva-zelena-svetla-2);
  border-left: 0.1875em solid var(--pdu-barva-zelena-akcent);
  border-radius: 0 var(--pdu-radius-m) var(--pdu-radius-m) 0;
  overflow: hidden;
}
.pdu-pag-pobocka-hodiny td { padding: 0.375em 0.75em; color: var(--pdu-barva-text-sedy); }
.pdu-pag-pobocka-hodiny tr + tr td { border-top: 1px solid rgba(0, 180, 110, .08); }
.pdu-pag-pobocka-hodiny td:first-child { font-weight: 700; color: var(--pdu-barva-tmavomodra); text-align: left; }
.pdu-pag-pobocka-hodiny td:last-child { text-align: right; color: var(--pdu-barva-tmavomodra); font-weight: 700; }
/* Detail pobočky link — sticky bottom of card */
.pdu-pag-pobocka-link {
  display: inline-block; font-size: .9em; font-weight: 800; margin-top: auto;
  color: var(--pdu-barva-zelena-akcent) !important; text-decoration: none !important;
  padding-top: 0.25em;
  border-top: 1px dashed var(--pdu-barva-okraj-jemny);
}
.pdu-pag-pobocka-link:hover { text-decoration: underline !important; }

/* MOBIL <37.5em — pobočka karty 2 sloupce (½ vertikálního scrollu, karty zůstávají
   svislé → funguje na flat i wrapped markupu). Kompaktnější hodiny/tel ať se v užší
   kartě nelámou / nepřetékají. Nad 37.5em platí původní šířší layout. */
@media (max-width: 37.49em) {
  .pdu-pag-pobocka-hodiny { font-size: .72em; }
  .pdu-pag-pobocka-hodiny td { padding: 0.25em 0.45em; }
  .pdu-pag-pobocka-tel { font-size: .95em; letter-spacing: -.02em; }
  /* tlačítka/links v úzké 2-col kartě nesmí přetéct */
  .pdu-pag-pobocka .pdu-pag-btn-primary,
  .pdu-pag-pobocka .pdu-pag-btn-outline {
    white-space: normal; width: 100%; box-sizing: border-box; padding: 0.5em 0.5em;
  }
}


/* ╔══════════════════════════════════════════════════════════════
   🎠 SEKCE 28b. POBOCKY CAROUSEL — horizontal scroll variant (2026-05-20 v2.6.6)
   ──────────────────────────────────────────────────────────────
   Popis:
   - Paralela k `.pdu-pag-pobocka-grid` (3-col grid) — pro situace kdy chceme
     vizuální konzistenci s carousely osob (kontakty-carousel.html)
   - Reuse `.pdu-pag-pobocka` markup uvnitř — žádný HTML change v kartách
   - Peek pattern: mobile 85%, tablet 50%, desktop 33% (paralela osoby-carousel)
   - Reuse `.pdu-pag-arrow` + `.pdu-pag-dots` z sekce 6 (přes data-c-* atributy)

   HTML usage:
     <div class="pdu-pag-cwrap">
       <button class="pdu-pag-arrow pdu-pag-arrow-left" data-c-prev="c-pobocky">‹</button>
       <div class="pdu-pag-pobocky-carousel" id="c-pobocky">
         <article class="pdu-pag-pobocka">...</article>
         ... 7×
       </div>
       <button class="pdu-pag-arrow pdu-pag-arrow-right" data-c-next="c-pobocky">›</button>
     </div>
     <div class="pdu-pag-dots" data-c-dots="c-pobocky">&nbsp;</div>
   ══════════════════════════════════════════════════════════════ */
.pdu-pag-pobocky-carousel {
  display: flex; flex-wrap: nowrap; align-items: stretch;
  overflow-x: auto; overscroll-behavior-x: none;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  gap: 1.125em; padding: 0.3125em 0.3125em 0.875em; margin: 0 0 0.5em;
  scroll-behavior: smooth; scrollbar-width: thin;
  scrollbar-color: var(--pdu-barva-okraj-jemny) var(--pdu-barva-sede-svetla);
}
.pdu-pag-pobocky-carousel::-webkit-scrollbar { height: 0.375em; }
.pdu-pag-pobocky-carousel::-webkit-scrollbar-track { background: var(--pdu-barva-sede-svetla); border-radius: 0.25em; }
.pdu-pag-pobocky-carousel::-webkit-scrollbar-thumb { background: var(--pdu-barva-okraj-jemny); border-radius: 0.25em; }
.pdu-pag-pobocky-carousel::-webkit-scrollbar-thumb:hover { background: var(--pdu-barva-zelena-akcent); }
.pdu-pag-pobocky-carousel > .pdu-pag-pobocka {
  flex: 0 0 calc(85% - 0.5625em); max-width: calc(85% - 0.5625em);
  scroll-snap-align: start;
}
@media (min-width: 37.5em) {
  .pdu-pag-pobocky-carousel > .pdu-pag-pobocka { flex: 0 0 calc(50% - 0.5625em); max-width: calc(50% - 0.5625em); }
}
@media (min-width: 62em) {
  .pdu-pag-pobocky-carousel > .pdu-pag-pobocka { flex: 0 0 calc(33.333% - 0.75em); max-width: calc(33.333% - 0.75em); }
}


/* ╔══════════════════════════════════════════════════════════════
   📑 SEKCE 29. TABS (tabbed interface — JS toggle)
   ──────────────────────────────────────────────────────────────
   Popis:
   - Horizontal tab list s 0.125em border-bottom oddělovačem
   - Aktivní tab (.is-active) = zelený 0.1875em bottom-border + zelený text
   - Tab panely skryté default (.pdu-pag-tabs-panel), viditelné jen .is-active
   - JS v script-pages.js BLOK 4 — click handler na .pdu-pag-tab,
     match přes data-tab === data-panel atributy
   - Multi-instance safe (každý .pdu-pag-tabs container má vlastní state)
   - Idempotent (window._pdu_pag_tabs_init flag)

   HTML usage:
     <div class="pdu-pag-tabs">
       <div class="pdu-pag-tabs-list" role="tablist">
         <button class="pdu-pag-tab is-active" data-tab="A">Tab A</button>
         <button class="pdu-pag-tab" data-tab="B">Tab B</button>
         <button class="pdu-pag-tab" data-tab="C">Tab C</button>
       </div>
       <div class="pdu-pag-tabs-panel is-active" data-panel="A">Content A</div>
       <div class="pdu-pag-tabs-panel" data-panel="B">Content B</div>
       <div class="pdu-pag-tabs-panel" data-panel="C">Content C</div>
     </div>
   ══════════════════════════════════════════════════════════════ */
.pdu-pag-tabs-list {
  display: flex; gap: 0; flex-wrap: wrap;
  border-bottom: 0.125em solid var(--pdu-barva-okraj-jemny);
  margin-bottom: 0;
}
.pdu-pag-tab {
  padding: 0.875em 1.375em; background: transparent; border: 0; cursor: pointer;
  font-size: .98em; font-weight: 700; color: var(--pdu-barva-text-sekundarni);
  border-bottom: 0.1875em solid transparent; margin-bottom: -0.125em;
  transition: all var(--pdu-prechod-dur-stredni) ease;
  font-family: inherit;
}
.pdu-pag-tab:hover { color: var(--pdu-barva-tmavomodra); }
.pdu-pag-tab.is-active { color: var(--pdu-barva-zelena-akcent); border-bottom-color: var(--pdu-barva-zelena-akcent); }
.pdu-pag-tabs-panel { display: none; padding: 1.5em 0.25em; }
.pdu-pag-tabs-panel.is-active { display: block; }


/* ╔══════════════════════════════════════════════════════════════
   🖼️ SEKCE 30. GALERIE-GRID (responsive image gallery)
   ──────────────────────────────────────────────────────────────
   Popis:
   - Grid 2/3/4 sloupce (mobil/tablet/desktop)
   - Square aspect-ratio (1:1) — neutrální pro různé poměry fotek
   - Hover: scale 1.04 + výraznější stín + 🔍 magnifier ikona vpravo dole
   - <a> wrapper = klikatelný (target=_blank nebo lightbox JS — TODO)
   - Pro lightbox doporučeno: <a data-lightbox="kovovyroba"> +
     lightweight JS (např. PhotoSwipe / GLightbox) přidat samostatně

   HTML usage:
     <div class="pdu-pag-galerie-grid">
       <a href="/user/documents/upload/full/img1.jpg" class="pdu-pag-galerie-item">
         <img src="/user/documents/upload/thumb/img1.jpg" alt="Realizace 1" loading="lazy">
       </a>
       <a href="/user/documents/upload/full/img2.jpg" class="pdu-pag-galerie-item">
         <img src="/user/documents/upload/thumb/img2.jpg" alt="Realizace 2" loading="lazy">
       </a>
       ... N×
     </div>
   ══════════════════════════════════════════════════════════════ */
.pdu-pag-galerie-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.625em; }
@media (min-width: 37.5em) { .pdu-pag-galerie-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 62em) { .pdu-pag-galerie-grid { grid-template-columns: repeat(4, 1fr); } }
.pdu-pag-galerie-item {
  display: block; position: relative;
  aspect-ratio: 1/1; overflow: hidden;
  border-radius: var(--pdu-radius-card);
  box-shadow: var(--pdu-stin-jemny);
  cursor: pointer; transition: all var(--pdu-prechod-dur-stredni) ease;
  text-decoration: none !important;
}
.pdu-pag-galerie-item:hover { transform: scale(1.04); box-shadow: 0 0.625em 1.75em rgba(0, 0, 0, .14); }
.pdu-pag-galerie-item img {
  width: 100% !important; height: 100% !important;
  object-fit: cover; display: block;
  border-radius: 0 !important; border: none !important; margin: 0 !important; padding: 0 !important;
}
/* magnifier ikona vpravo dole — fade-in na hover */
.pdu-pag-galerie-item::after {
  content: "🔍"; position: absolute; right: 0.5em; bottom: 0.5em;
  background: rgba(255, 255, 255, .92); width: 2em; height: 2em;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 0.875em; opacity: 0;
  transition: opacity var(--pdu-prechod-dur-stredni) ease;
}
.pdu-pag-galerie-item:hover::after { opacity: 1; }


/* ╔══════════════════════════════════════════════════════════════
   👤 SEKCE 32. OSOBA — Person karta s portrétem (kontaktní stránka)
   ──────────────────────────────────────────────────────────────
   Popis:
   - Grid 1/2/3 col (mobil/tablet/desktop) — .pdu-pag-osoby wrapper
   - Karta osoby s kulatým portrétem 140×140, jméno, role, kontakty
   - .pdu-pag-osoba-vztahy = sekundární odkazy pod hlavními kontakty
     ("asistent X, zástupce Y") — dashed top divider
   - Hover lift + zelený border (paralela .pdu-pag-koho-item)
   - Schema.org/Person friendly — visible itemprop pattern (jméno/role/tel/email)

   HTML:
     <div class="pdu-pag-osoby">
       <article class="pdu-pag-osoba" itemscope itemtype="https://schema.org/Person">
         <link itemprop="worksFor" href="https://www.levne-pletivo.cz/#localbusiness">
         <div class="pdu-pag-osoba-foto">
           <img src="..." alt="..." itemprop="image" loading="lazy">
         </div>
         <strong class="pdu-pag-osoba-name" itemprop="name">Marek Janda</strong>
         <span class="pdu-pag-osoba-role" itemprop="jobTitle">obchodní ředitel</span>
         <div class="pdu-pag-osoba-kontakty">
           <div class="pdu-pag-osoba-linka">📞 <a href="tel:..." itemprop="telephone">+420...</a></div>
           <div class="pdu-pag-osoba-linka">✉ <a href="mailto:..." itemprop="email">...</a></div>
         </div>
         <div class="pdu-pag-osoba-vztahy">
           <span class="pdu-pag-osoba-vztah">asistentka B. Šimlová</span>
         </div>
       </article>
       ... N×
     </div>
   ══════════════════════════════════════════════════════════════ */
.pdu-pag-osoby { display: grid; grid-template-columns: 1fr; gap: 1em; margin: 0 0 1.75em; }
@media (min-width: 37.5em) { .pdu-pag-osoby { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em) { .pdu-pag-osoby { grid-template-columns: repeat(3, 1fr); } }

.pdu-pag-osoba {
  background: var(--pdu-barva-bila); border: 1px solid var(--pdu-barva-okraj-jemny);
  border-radius: var(--pdu-radius-card); padding: 1.375em 1.125em 1.125em;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  box-shadow: var(--pdu-stin-jemny);
  transition: all var(--pdu-prechod-dur-stredni) ease;
}
.pdu-pag-osoba:hover { box-shadow: var(--pdu-stin-vyrazny); transform: translateY(-0.1875em); border-color: var(--pdu-barva-zelena-akcent); }
/* kulatý portrét 140×140 — neutrální (transparent + override Shoptet img defaults
   které jinak přidávají box-shadow/border kolem každého img v textových stránkách) */
.pdu-pag-osoba-foto {
  width: 8.75em; height: 8.75em; border-radius: 50%;
  overflow: hidden; background: transparent;
  flex-shrink: 0; margin-bottom: 0.75em;
  /* explicit reset — Shoptet base styly pro img wrappers nemají sneaknout dovnitř */
  box-shadow: none; border: 0; padding: 0;
}
.pdu-pag-osoba-foto img {
  width: 100% !important; height: 100% !important; object-fit: cover; display: block;
  margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
  max-width: none !important; max-height: none !important;
  /* override Shoptet defaults — žádný box-shadow / outline kolem portrétů */
  box-shadow: none !important; outline: none !important;
}
.pdu-pag-osoba-name { font-size: 1.05em; font-weight: 800; color: var(--pdu-barva-tmavomodra); margin: 0 0 0.25em; line-height: 1.25; }
.pdu-pag-osoba-role { font-size: .88em; color: var(--pdu-barva-text-sedy); margin: 0 0 0.875em; line-height: 1.45; min-height: 2.6em; }
/* kontaktní linky — sloupec s ikonou vlevo */
.pdu-pag-osoba-kontakty { display: flex; flex-direction: column; gap: 0.375em; width: 100%; }
.pdu-pag-osoba-linka {
  display: flex; align-items: center; gap: 0.5em;
  font-size: .92em; color: var(--pdu-barva-tekst-zakladni); text-align: left;
  line-height: 1.4; word-break: break-word;
}
.pdu-pag-osoba-linka a { color: var(--pdu-barva-tmavomodra) !important; text-decoration: none !important; font-weight: 600; }
.pdu-pag-osoba-linka a:hover { color: var(--pdu-barva-zelena-akcent) !important; text-decoration: underline !important; }
.pdu-pag-osoba-linka img,
.pdu-pag-osoba-linka svg {
  width: 1.125em !important; height: 1.125em !important; flex-shrink: 0;
  margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
}
/* vztahy (asistent, zástupce) — sekundární odkazy s dashed-top divider */
.pdu-pag-osoba-vztahy {
  margin-top: 0.75em; padding-top: 0.75em; width: 100%;
  border-top: 1px dashed var(--pdu-barva-okraj-jemny);
  display: flex; flex-direction: column; gap: 0.25em;
}
.pdu-pag-osoba-vztah {
  display: flex; align-items: center; gap: 0.5em;
  font-size: .82em; color: var(--pdu-barva-text-sedy); text-align: left;
}
.pdu-pag-osoba-vztah::before { content: "→"; color: var(--pdu-barva-zelena-akcent); font-weight: 800; flex-shrink: 0; }


/* ╔══════════════════════════════════════════════════════════════
   🔖 SEKCE 33. ZALOZKY — rychlé navigační záložky (1/2/3 col)
   ──────────────────────────────────────────────────────────────
   Popis:
   - Plnoplošná tlačítka pro skok na kotvy v rámci stránky
   - Zelená varianta (default) = primární CTA záložka
   - .is-light = světlezelená varianta pro sekundární navigaci
     (např. seznam oddělení v "Konkrétní osoby")
   - Hover: invert + translateX(0.25em) pro mikro-feedback
   - Ikona pravá strana (44×44 polopruhledná pill)

   HTML:
     <div class="pdu-pag-zalozky">
       <a class="pdu-pag-zalozka" href="#pobocky" title="Pobočky">
         <span class="pdu-pag-zalozka-text">Adresa a otevírací doba prodejen</span>
         <span class="pdu-pag-zalozka-icon">🏬</span>
       </a>
       ... N×
     </div>

     <div class="pdu-pag-zalozky">
       <a class="pdu-pag-zalozka is-light" href="#vedeni" title="Vedení">
         <span class="pdu-pag-zalozka-text">Vedení společnosti</span>
         <span class="pdu-pag-zalozka-icon">👤</span>
       </a>
     </div>
   ══════════════════════════════════════════════════════════════ */
.pdu-pag-zalozky { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5em; margin: 0 0 1.125em; }
@media (min-width: 62em) { .pdu-pag-zalozky { grid-template-columns: repeat(3, 1fr); } }

.pdu-pag-zalozka {
  display: flex; align-items: stretch;  /* stretch — text + icon vyplní celou výšku karty */
  min-height: 4em;  /* fix v2.6.6: konzistentní výška default i .is-light varianty (CTA stejně velké) */
  background-color: var(--pdu-barva-zelena-akcent);
  background-image: var(--pdu-grad-btn-corner), var(--pdu-grad-btn-glossy);
  border: 1px solid var(--pdu-barva-zelena-akcent);
  border-radius: var(--pdu-radius-card); overflow: hidden;
  text-decoration: none !important; cursor: pointer;
  transition: all var(--pdu-prechod-dur-stredni) ease;
  box-shadow: 0 0 0 1px var(--pdu-barva-okraj-jemny);
}
.pdu-pag-zalozka:hover {
  background-color: var(--pdu-barva-bila);
  background-image: var(--pdu-grad-btn-hover-corner), var(--pdu-grad-btn-hover-glossy);
  border-color: var(--pdu-barva-tmavomodra);
  transform: translateX(0.25em);
}
.pdu-pag-zalozka:hover .pdu-pag-zalozka-text { color: var(--pdu-barva-tmavomodra); }
.pdu-pag-zalozka:hover .pdu-pag-zalozka-icon { background: rgba(25,25,50,.08); color: var(--pdu-barva-tmavomodra); }
.pdu-pag-zalozka-text {
  flex: 1; padding: 0.75em 0.875em;
  color: var(--pdu-barva-bila); font-weight: 700; font-size: .95em;
  line-height: 1.3; transition: color var(--pdu-prechod-dur-stredni) ease;
  display: flex; align-items: center;  /* vertikální centrování textu uvnitř stretched karty */
}
.pdu-pag-zalozka-icon {
  width: 3.25em; flex-shrink: 0;
  background: transparent;  /* refactor v2.6.3: žádný polopruhledný overlay (image už má vlastní design) */
  display: flex; align-items: center; justify-content: center;
  /* fallback pro emoji (pokud img není přítomná) */
  font-size: 1.375em; color: var(--pdu-barva-bila);
  padding: 0.25em 0.5em 0.25em 0;
  transition: all var(--pdu-prechod-dur-stredni) ease;
}
/* IMG fill — image má vlastní design (kruh + symbol), zaplní celý 3.25em slot */
.pdu-pag-zalozka-icon img,
.pdu-pag-zalozka-icon svg {
  width: 100% !important; height: auto !important;
  max-width: 2.75em !important;
  object-fit: contain;
  display: block;
  margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; outline: none !important;
}
/* světlá varianta — pro seznam oddělení (sekundární navigace) */
.pdu-pag-zalozka.is-light { background: #f4f8ee; border-color: #e0eed4; }
.pdu-pag-zalozka.is-light .pdu-pag-zalozka-text { color: var(--pdu-barva-tmavomodra); font-weight: 600; }
.pdu-pag-zalozka.is-light .pdu-pag-zalozka-icon { background: rgba(0,180,110,.1); color: var(--pdu-barva-zelena-akcent); }
.pdu-pag-zalozka.is-light:hover { background: var(--pdu-barva-bila); border-color: var(--pdu-barva-zelena-akcent); }
.pdu-pag-zalozka.is-light:hover .pdu-pag-zalozka-icon { background: var(--pdu-barva-zelena-svetla-3); }


/* ╔══════════════════════════════════════════════════════════════
   💬 SEKCE 34. TOOLTIP — "?" indikátor s hover/focus textem
   ──────────────────────────────────────────────────────────────
   Popis:
   - Inline indikátor "?" v kulatém zeleném kruhu, pulsující animace
   - Tooltip text se zobrazí na hover (mouse) nebo focus-within (klávesnice/touch)
   - Pozicování: bottom: calc(100%+0.5em), centered translateX(-50%)
   - Tmavomodré pozadí + bílý text, šipka dolů
   - Pure CSS — žádné JS, žádné polyfilly
   - Reduced motion: pulse animace off

   HTML (use case: vysvětlení role pod nadpisem oddělení):
     <strong>Popis funkcí</strong>
     <span class="pdu-pag-tooltip" tabindex="0">
       <span class="pdu-pag-tooltip-icon" aria-hidden="true">?</span>
       <span class="pdu-pag-tooltip-text" role="tooltip">
         <strong>Expedice:</strong><br>
         • Dotazy na zboží<br>
         • Stav objednávky
       </span>
     </span>
   ══════════════════════════════════════════════════════════════ */
.pdu-pag-tooltip {
  position: relative; display: inline-block; cursor: help;
  margin-left: 0.3125em; vertical-align: middle;
  outline: none;
}
.pdu-pag-tooltip-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.125em; height: 1.125em;
  background: var(--pdu-barva-zelena-akcent); color: var(--pdu-barva-bila);
  border-radius: 50%; font-size: 0.75em; font-weight: 800;
  box-shadow: 0 0 0 0 rgba(0,180,110,.6);
  animation: pduPagTooltipPulse 2s infinite;
}
@keyframes pduPagTooltipPulse {
  0%   { transform: scale(0.95); box-shadow: 0 0 0 0   rgba(0,180,110,.6); }
  70%  { transform: scale(1.1);  box-shadow: 0 0 0 0.5em rgba(0,180,110,0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0   rgba(0,180,110,0); }
}
.pdu-pag-tooltip-text {
  display: none; position: absolute; z-index: 9999;
  bottom: calc(100% + 0.5em); left: 50%; transform: translateX(-50%);
  width: 17.5em; max-width: 85vw;
  padding: 0.75em 0.875em;
  background: var(--pdu-barva-tmavomodra); color: var(--pdu-barva-bila);
  font-size: .85em; line-height: 1.5; text-align: left; white-space: normal;
  border-radius: var(--pdu-radius-card); box-shadow: 0 0.25em 0.9375em rgba(0,0,0,.3);
}
.pdu-pag-tooltip-text strong { color: var(--pdu-barva-bila); }
.pdu-pag-tooltip-text::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 0.375em solid transparent; border-top-color: var(--pdu-barva-tmavomodra);
}
.pdu-pag-tooltip:hover .pdu-pag-tooltip-text,
.pdu-pag-tooltip:focus-within .pdu-pag-tooltip-text { display: block; }


/* ╔══════════════════════════════════════════════════════════════
   📍 SEKCE 35. INFO LINE — řádka s ikonou + textem
   ──────────────────────────────────────────────────────────────
   Popis:
   - Inline row "ikona + text" pro hlavičky oddělení (umístění, e-mail, tel)
   - Default: tmavý text, hover odkazu zelený
   - Ikona 22×22 px, gap 10
   - Multiple lines pod sebou — gap 6 px (margin-bottom)

   HTML:
     <div class="pdu-pag-info-line">
       <img src="/.../icon-pin.svg" alt="" width="22" height="22">
       <span>Centrální pobočka Ledce u Plzně</span>
     </div>
     <div class="pdu-pag-info-line">
       <img src="/.../icon-email02.svg" alt="" width="22" height="22">
       <a href="mailto:montaze@levne-pletivo.cz">montaze@levne-pletivo.cz</a>
     </div>
   ══════════════════════════════════════════════════════════════ */
.pdu-pag-info-line {
  display: flex; align-items: center; gap: 0.625em;
  margin: 0 0 0.375em; font-size: .98em;
  color: var(--pdu-barva-tekst-zakladni); line-height: 1.45;
}
.pdu-pag-info-line a { color: var(--pdu-barva-tmavomodra) !important; font-weight: 700; text-decoration: none !important; }
.pdu-pag-info-line a:hover { color: var(--pdu-barva-zelena-akcent) !important; text-decoration: underline !important; }
.pdu-pag-info-line img,
.pdu-pag-info-line svg {
  width: 1.375em !important; height: 1.375em !important; flex-shrink: 0;
  margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
}


/* ╔══════════════════════════════════════════════════════════════
   🏷️ SEKCE 36. ODD-HEADER — hlavička oddělení (h2 + info linky)
   ──────────────────────────────────────────────────────────────
   Popis:
   - Wrapper pro nadpis oddělení (H2 + info-line řádky)
   - Spacing top: 1.75em (oddělení sekcí), bottom: 0.875em (před gridem osob)
   - H2: 1.4em, weight 800, line-height 1.3
   - Použito pro EXPEDIČNÍ ODDĚLENÍ, MONTÁŽNÍ ODDĚLENÍ, VEDENÍ atd.

   HTML:
     <header class="pdu-pag-odd-header">
       <h2>Expediční oddělení</h2>
       <div class="pdu-pag-info-line"><img src=".../icon-pin.svg" alt="">
         <span>Centrální pobočka Ledce u Plzně</span></div>
     </header>
   ══════════════════════════════════════════════════════════════ */
.pdu-pag-odd-header { margin: 2em 0 1em; }
/* H2 výraznější (refactor 2026-05-20: 1.4em → clamp 1.55–1.95em + zelený left-border):
   - clamp font scaluje fluidně od 1.55em (mobil) do 1.95em (desktop 1200+)
   - border-left 0.25em zelený + padding-left 1em = vizuální "section anchor"
   - line-height 1.2 pro tight headline */
.pdu-pag-odd-header h2 {
  font-size: clamp(1.55em, 2.6vw, 1.95em);
  font-weight: 800; line-height: 1.2;
  color: var(--pdu-barva-tmavomodra); margin: 0 0 0.625em;
  padding-left: 1em;
  border-left: 0.25em solid var(--pdu-barva-zelena-akcent);
}
/* Tooltip uvnitř h2 — vertikálně zarovnat (jinak by skočil dolů kvůli border-left padding) */
.pdu-pag-odd-header h2 .pdu-pag-tooltip { font-size: .65em; font-weight: normal; }


/* ╔══════════════════════════════════════════════════════════════
   🎠 SEKCE 32b. OSOBY CAROUSEL — horizontal scroll variant (handoff v2)
   ──────────────────────────────────────────────────────────────
   Popis:
   - Paralela k `.pdu-pag-osoby` (sekce 32 grid) — pro situace kdy oddělení
     má 4+ lidí a chceme úsporu místa + interaktivitu
   - SAMOSTATNÁ class (NE modifier na .pdu-pag-carousel) — clean naming pattern
     z handoff design v2 (2026-05-20). Předtím `.pdu-pag-carousel-osoby`
     byl modifier, ale handoff používá top-level naming pro jednodušší
     reuse (paralela k existujícímu .pdu-pag-osoby grid pattern).
   - Mobile-first peek pattern: 85% šířky (peek na další kartu), tablet 50%,
     desktop 33% — zachovává viewport awareness "ještě tu něco je"
   - Reuse `.pdu-pag-arrow` + `.pdu-pag-dots` z sekce 6 (carousel JS modul
     v script-pages.js matchuje containery přes ID, ne přes class — funguje out-of-box)
   - SPIN animace zachovaná z předchozí verze (user request: "spin když jde o lidi")

   HTML usage (alternativa k .pdu-pag-osoby gridu — STEJNÝ <article> markup,
   jiný wrapper):
     <div class="pdu-pag-cwrap">
       <button class="pdu-pag-arrow pdu-pag-arrow-left" data-c-prev="c-vedeni">‹</button>
       <div class="pdu-pag-osoby-carousel" id="c-vedeni">
         <article class="pdu-pag-osoba"> ... </article>
         ... N×
       </div>
       <button class="pdu-pag-arrow pdu-pag-arrow-right" data-c-next="c-vedeni">›</button>
     </div>
     <div class="pdu-pag-dots" data-c-dots="c-vedeni">&nbsp;</div>
   ══════════════════════════════════════════════════════════════ */
.pdu-pag-osoby-carousel {
  display: flex; flex-wrap: nowrap; align-items: stretch;
  overflow-x: auto; overscroll-behavior-x: none;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  /* L/R padding 0.75em = room pro Shoptet globální :focus outline (2px solid green
     + 2px offset = 4px outside card edge), aby se na první/poslední viditelné kartě
     nesříznul levý/pravý okraj outline-u o overflow-x:auto clip. */
  gap: 0.875em; padding: 0.5em 0.75em 0.875em; margin: 0 0 0.5em;
  scroll-padding-inline: 0.75em;
  scroll-behavior: smooth; scrollbar-width: thin;
  scrollbar-color: var(--pdu-barva-okraj-jemny) var(--pdu-barva-sede-svetla);
}
.pdu-pag-osoby-carousel::-webkit-scrollbar { height: 0.375em; }
.pdu-pag-osoby-carousel::-webkit-scrollbar-track { background: var(--pdu-barva-sede-svetla); border-radius: 0.25em; }
.pdu-pag-osoby-carousel::-webkit-scrollbar-thumb { background: var(--pdu-barva-okraj-jemny); border-radius: 0.25em; }
.pdu-pag-osoby-carousel::-webkit-scrollbar-thumb:hover { background: var(--pdu-barva-zelena-akcent); }

/* Responsive flex-basis na .pdu-pag-osoba uvnitř.
   X v calc je o ~0.125em menší než matematicky exact (50/33 %), takže další karta
   začíná ZA pravým viewportem (ne přesně na hraně) — nezůstává 1px sliver border-left
   příští karty viditelný (stejný princip jako pdu-pag-carousel). Mobile 85% peek
   pattern zůstává úmyslně pro vizuální „swipe nudge". */
.pdu-pag-osoby-carousel > .pdu-pag-osoba {
  flex: 0 0 calc(85% - 0.4375em); max-width: calc(85% - 0.4375em);
  scroll-snap-align: start;
}
@media (min-width: 37.5em) {
  .pdu-pag-osoby-carousel > .pdu-pag-osoba { flex: 0 0 calc(50% - 0.375em); max-width: calc(50% - 0.375em); }
}
@media (min-width: 62em) {
  .pdu-pag-osoby-carousel > .pdu-pag-osoba { flex: 0 0 calc(33.333% - 0.5em); max-width: calc(33.333% - 0.5em); }
}

/* SPIN ANIMACE ODSTRANĚNA (user feedback v2.6.5):
   Rotace portrétu na hover byla rušivá / divná. Subtilní hover lift karty
   (z `.pdu-pag-osoba:hover` v sekci 32) zůstává — stačí pro feedback. */

/* PILL BADGE pro Centrála / Highlight na pobočce
   (paralela k Ledce u Plzně označení v handoff v2) */
.pdu-pag-pobocka.is-centrala { border-color: var(--pdu-barva-zelena-akcent); border-width: 0.125em; }
.pdu-pag-pobocka-badge {
  position: absolute; top: 0.75em; left: 0.75em;
  background: var(--pdu-barva-zelena-akcent); color: var(--pdu-barva-bila);
  padding: 0.25em 0.625em; border-radius: 6.25em;
  font-size: .72em; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  box-shadow: 0 0.125em 0.375em rgba(0, 0, 0, .15);
  z-index: 2;
}


/* ╔══════════════════════════════════════════════════════════════
   🧾 SEKCE 37b. UDAJE KARTY — Fakturační / Platební / DSA (3-card grid)
   ──────────────────────────────────────────────────────────────
   Popis:
   - Grid 1/2/3 col pro doplňující údaje (refactor 2026-05-20 v2)
   - Každá karta: ikona top-left (48×48 zelený rounded square) + H3 + obsah
   - Top-border 0.1875em zelený (paralela `.pdu-pag-stat` accent stylu)
   - Definition-list pattern pro key-value rows (IČ: 01771426 atd.)

   HTML:
     <div class="pdu-pag-udaje-grid">
       <div class="pdu-pag-udaj-karta">
         <div class="pdu-pag-udaj-karta-head">
           <span class="pdu-pag-udaj-karta-ico" aria-hidden="true">🧾</span>
           <h3>Fakturační údaje</h3>
         </div>
         <p><strong>Ploty Dobrý a Urbánek s.r.o.</strong><br>Ledce 99, 330 14</p>
         <dl class="pdu-pag-udaj-karta-dl">
           <div><dt>IČ</dt><dd>01771426</dd></div>
           <div><dt>DIČ</dt><dd>CZ01771426</dd></div>
         </dl>
       </div>
     </div>
   ══════════════════════════════════════════════════════════════ */
/* Default STACKED layout (refactor v2.6.11):
   - Karty pod sebou full-width
   - Max-width 55em + centered (`.pdu-pag-udaje-grid`) — karty užší, ne na celou šířku
   - Uvnitř karty 2-col inner layout (head vlevo + obsah vpravo na desktopu) */
.pdu-pag-udaje-grid {
  display: grid; grid-template-columns: 1fr;
  gap: 0.875em; margin: 0 auto 1.5em;
  max-width: 55em;  /* v2.6.11: karty užší — méně vlevo-vpravo bílého místa */
}
/* Optional `.is-3col` modifier — pokud chceme 3 karty vedle sebe */
.pdu-pag-udaje-grid.is-3col { max-width: none; grid-template-columns: 1fr; }
@media (min-width: 47.5em) { .pdu-pag-udaje-grid.is-3col { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em) { .pdu-pag-udaje-grid.is-3col { grid-template-columns: repeat(3, 1fr); } }

.pdu-pag-udaj-karta {
  background: var(--pdu-barva-bila);
  border: 1px solid var(--pdu-barva-okraj-jemny);
  border-top: 0.1875em solid var(--pdu-barva-zelena-akcent);
  border-radius: var(--pdu-radius-card);
  padding: 1.25em 1.5em;
  display: grid; gap: 0.875em 1.75em;
  grid-template-columns: 1fr;
  box-shadow: var(--pdu-stin-jemny);
}
/* Na desktopu — 2-col inner: head vlevo (h3+p), dl vpravo */
@media (min-width: 47.5em) {
  .pdu-pag-udaj-karta { grid-template-columns: 1fr 1.1fr; align-items: start; }
}
/* Když je karta v `.is-3col` (vedle sebe), vrátit na single-col uvnitř */
.pdu-pag-udaje-grid.is-3col .pdu-pag-udaj-karta { grid-template-columns: 1fr; gap: 0.75em; }

.pdu-pag-udaj-karta-head { display: flex; align-items: center; gap: 0.75em; }
.pdu-pag-udaj-karta-ico {
  width: 2.75em; height: 2.75em;
  background: var(--pdu-barva-zelena-svetla-3);
  color: var(--pdu-barva-zelena-akcent-hover);
  border-radius: var(--pdu-radius-m);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.375em; flex-shrink: 0;
}
.pdu-pag-udaj-karta h3 {
  font-size: 1.15em; font-weight: 800; line-height: 1.25;
  margin: 0; color: var(--pdu-barva-tmavomodra);
}
.pdu-pag-udaj-karta-body p {
  margin: 0 0 0.5em; font-size: .95em; line-height: 1.55;
  color: var(--pdu-barva-text-sekundarni);
}
.pdu-pag-udaj-karta-body p:last-child { margin-bottom: 0; }
.pdu-pag-udaj-karta-body p strong { color: var(--pdu-barva-tmavomodra); }
/* Compatibility: pokud <p> není v -body wrapperu */
.pdu-pag-udaj-karta > p {
  margin: 0; font-size: .95em; line-height: 1.55;
  color: var(--pdu-barva-text-sekundarni);
}
.pdu-pag-udaj-karta > p strong { color: var(--pdu-barva-tmavomodra); }

/* DEFINITION LIST (legacy <dl>/<dt>/<dd>) — kept for backward compat ALE
   Shoptet base CSS přebíjí display flex na <dt>/<dd>. Pro NOVÝ use case
   `.pdu-pag-udaj-karta-list` (UL pattern) níže — má spolehlivý layout. */
.pdu-pag-udaj-karta-dl { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.pdu-pag-udaj-karta-dl > div {
  display: flex !important; justify-content: space-between !important; gap: 1em !important;
  align-items: baseline !important;
  padding: 0.5625em 0; font-size: .95em;
  border-bottom: 1px dashed var(--pdu-barva-okraj-jemny);
}
.pdu-pag-udaj-karta-dl > div:first-child { padding-top: 0; }
.pdu-pag-udaj-karta-dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.pdu-pag-udaj-karta-dl dt {
  margin: 0 !important; padding: 0 !important;
  color: var(--pdu-barva-text-sedy); font-weight: 600;
  flex: 0 0 auto; display: inline-block !important;
}
.pdu-pag-udaj-karta-dl dd {
  margin: 0 !important; padding: 0 !important;
  color: var(--pdu-barva-tmavomodra); font-weight: 700;
  font-family: var(--pdu-font-mono); font-size: .95em;
  text-align: right; word-break: break-all;
  flex: 1 1 auto; display: inline-block !important;
}
.pdu-pag-udaj-karta a { color: var(--pdu-barva-zelena-akcent) !important; font-weight: 700; text-decoration: none !important; }
.pdu-pag-udaj-karta a:hover { text-decoration: underline !important; }

/* UL-LIST pattern (v2.6.11) — náhrada za <dl> kvůli Shoptet base CSS conflict.
   <ul class="pdu-pag-udaj-karta-list">
     <li><span>IČ</span><strong>01771426</strong></li>
   </ul>
   <span> + <strong> jsou inline elements bez implicit width — spolehlivý flex layout */
.pdu-pag-udaj-karta-list { margin: 0; padding: 0; list-style: none; }
.pdu-pag-udaj-karta-list li {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1em; padding: 0.5625em 0; font-size: .95em;
  border-bottom: 1px dashed var(--pdu-barva-okraj-jemny);
  list-style: none;
}
.pdu-pag-udaj-karta-list li:first-child { padding-top: 0; }
.pdu-pag-udaj-karta-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.pdu-pag-udaj-karta-list li > span { color: var(--pdu-barva-text-sedy); font-weight: 600; flex-shrink: 0; }
.pdu-pag-udaj-karta-list li > strong {
  color: var(--pdu-barva-tmavomodra); font-weight: 700;
  font-family: var(--pdu-font-mono); text-align: right; word-break: break-all;
}


/* ╔══════════════════════════════════════════════════════════════
   📌 SEKCE 38. ANCHOR-NAV (vertikální stack kotevních tlačítek, top-right)
   ──────────────────────────────────────────────────────────────
   Float-right stack tlačítek pro anchor navigaci nad intro textem.
   Mobile <37.5em: stack přepne na full-width.
   ══════════════════════════════════════════════════════════════ */
.pdu-pag-anchor-nav {
  float: right; display: flex; flex-direction: column; align-items: stretch;
  gap: 0.375em; margin: 0 0 0.875em 1em; max-width: 15em;
}
.pdu-pag-anchor-nav .pdu-pag-btn-outline { text-align: center; padding: 0.5em 0.875em; font-size: 0.9em; }
@media (max-width: 37.5em) {
  .pdu-pag-anchor-nav { float: none; max-width: 100%; margin: 0 0 1em; }
}


/* ╔══════════════════════════════════════════════════════════════
   🎬 SEKCE 39. VIDEA-GRID (2-col responsive YouTube embed grid)
   ──────────────────────────────────────────────────────────────
   Použití: <div class="pdu-pag-videa-grid"> N× <iframe ...> </div>
   Aspect 16:9, border-radius, full-width na mobilu.
   ══════════════════════════════════════════════════════════════ */
.pdu-pag-videa-grid {
  display: grid; grid-template-columns: 1fr; gap: 1em; margin: 0 0 1.5em;
}
@media (min-width: 48em) { .pdu-pag-videa-grid { grid-template-columns: repeat(2, 1fr); } }
.pdu-pag-videa-grid iframe {
  width: 100%; aspect-ratio: 16/9; height: auto; border: 0;
  border-radius: var(--pdu-radius-m); display: block; box-shadow: var(--pdu-stin-jemny);
}


/* ╔══════════════════════════════════════════════════════════════
   📜 SEKCE 40. DOPIS-GRID (referenční dopisy 2/3/4-col karty + détail přepis)
   ──────────────────────────────────────────────────────────────
   Karta = obrázek dopisu (lightbox link) + <details> s přepisem.
   Použití:
     <div class="pdu-pag-dopis-grid">
       <article class="pdu-pag-dopis-karta">
         <a class="pdu-pag-dopis-foto" href="/full.png" data-gallery="lightbox">
           <img src="/thumb.png" alt="...">
         </a>
         <details class="pdu-pag-faq-details">
           <summary>Zobrazit přepis</summary>
           <div class="pdu-pag-faq-content">...</div>
         </details>
       </article>
       ... N×
     </div>
   ══════════════════════════════════════════════════════════════ */
.pdu-pag-dopis-grid {
  display: grid; grid-template-columns: 1fr; gap: 1em; margin: 0 0 1.5em;
}
@media (min-width: 37.5em) { .pdu-pag-dopis-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56em)   { .pdu-pag-dopis-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 75em)   { .pdu-pag-dopis-grid { grid-template-columns: repeat(4, 1fr); } }
.pdu-pag-dopis-karta {
  display: flex; flex-direction: column;
  background: var(--pdu-barva-bila); border: 1px solid var(--pdu-barva-okraj-jemny);
  border-radius: var(--pdu-radius-card); overflow: hidden;
  box-shadow: var(--pdu-stin-jemny);
  transition: all var(--pdu-prechod-dur-stredni) ease;
}
.pdu-pag-dopis-karta:hover { box-shadow: var(--pdu-stin-vyrazny); transform: translateY(-0.1875em); }
.pdu-pag-dopis-foto { display: block; overflow: hidden; }
.pdu-pag-dopis-foto img {
  width: 100% !important; height: auto !important; display: block;
  margin: 0 !important; padding: 0 !important; border: 0 !important;
  transition: transform var(--pdu-prechod-dur-stredni) ease;
}
.pdu-pag-dopis-foto:hover img { transform: scale(1.03); }
.pdu-pag-dopis-karta .pdu-pag-faq-details { border: 0; border-top: 1px solid var(--pdu-barva-okraj-svetly); margin: 0; box-shadow: none; font-size: 0.9em; }
.pdu-pag-dopis-karta .pdu-pag-faq-details summary { padding: 0.625em 2em 0.625em 0.875em; }
.pdu-pag-dopis-karta .pdu-pag-faq-content { padding: 0.625em 0.875em 0.75em; }
.pdu-pag-dopis-karta .pdu-pag-faq-content p { margin: 0.375em 0 0; font-style: italic; }
.pdu-pag-dopis-karta .pdu-pag-faq-content strong { display: block; color: var(--pdu-barva-tmavomodra); margin: 0 0 0.25em; font-size: 0.95em; }
/* Vždy viditelný přepis (alternativa k .pdu-pag-faq-details toggle) */
.pdu-pag-dopis-prepis {
  padding: 0.625em 0.875em 0.75em;
  border-top: 1px solid var(--pdu-barva-okraj-svetly);
  background: var(--pdu-barva-sede-svetla);
  color: var(--pdu-barva-tekst-zakladni);
  line-height: 1.5; font-size: 0.88em;
}
.pdu-pag-dopis-prepis strong { display: block; color: var(--pdu-barva-tmavomodra); margin: 0 0 0.25em; font-size: 0.95em; }
.pdu-pag-dopis-prepis p { margin: 0.375em 0 0; font-style: italic; }


/* ╔══════════════════════════════════════════════════════════════
   📦 SEKCE 40b. DOPIS MODAL (přepis jako native <dialog>)
   ──────────────────────────────────────────────────────────────
   Native HTML <dialog> driven JS BLOK 5 v script-pages.js.
   Globální 1× <dialog> per stránka, JS hijackne <summary> click
   uvnitř .pdu-pag-dopis-karta a otevře přes .showModal().
   ══════════════════════════════════════════════════════════════ */
.pdu-pag-dopis-modal {
  border: 0; padding: 0;
  border-radius: var(--pdu-radius-m);
  max-width: min(42em, 92vw); width: auto;
  max-height: 85vh;
  background: var(--pdu-barva-bila);
  box-shadow: 0 1em 3em rgba(0, 0, 0, 0.35);
  color: var(--pdu-barva-tekst-zakladni);
  font-size: 1em; line-height: 1.6;
}
.pdu-pag-dopis-modal::backdrop { background: rgba(0, 0, 0, 0.7); }
.pdu-pag-dopis-modal-close {
  position: absolute; top: 0.5em; right: 0.5em;
  width: 2.25em; height: 2.25em;
  border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  color: var(--pdu-barva-tmavomodra);
  font-size: 1.5em; font-weight: 700; line-height: 1;
  cursor: pointer; z-index: 2;
  transition: background var(--pdu-prechod-dur-stredni) ease;
}
.pdu-pag-dopis-modal-close:hover { background: rgba(0, 0, 0, 0.12); }
.pdu-pag-dopis-modal-body {
  padding: 1.75em 2em;
  max-height: 85vh; overflow-y: auto;
}
.pdu-pag-dopis-modal-body strong {
  display: block; font-size: 1.05em; margin: 0 0 0.625em;
  color: var(--pdu-barva-tmavomodra);
}
.pdu-pag-dopis-modal-body p {
  margin: 0; color: var(--pdu-barva-tekst-zakladni); font-style: italic;
}


/* ╔══════════════════════════════════════════════════════════════
   💬 SEKCE 41. CITACE-GRID (e-mailové reference — 2-col pull-quotes)
   ──────────────────────────────────────────────────────────────
   Použití:
     <div class="pdu-pag-citace-grid">
       <article class="pdu-pag-citace-karta">
         <strong>Autor</strong> <span class="pdu-pag-citace-datum">(1.&nbsp;1.&nbsp;2026)</span>
         <p>„Cituji…"</p>
       </article>
       ... N×
     </div>
   ══════════════════════════════════════════════════════════════ */
.pdu-pag-citace-grid {
  display: grid; grid-template-columns: 1fr; gap: 1em; margin: 0 0 1.5em;
}
@media (min-width: 48em) { .pdu-pag-citace-grid { grid-template-columns: repeat(2, 1fr); } }
.pdu-pag-citace-karta {
  background: var(--pdu-barva-bila);
  border: 1px solid var(--pdu-barva-okraj-jemny);
  border-left: 0.25em solid var(--pdu-barva-zelena-akcent);
  border-radius: var(--pdu-radius-m);
  padding: 0.875em 1.125em 1em;
  box-shadow: var(--pdu-stin-jemny);
  transition: box-shadow var(--pdu-prechod-dur-stredni) ease;
}
.pdu-pag-citace-karta:hover { box-shadow: var(--pdu-stin-vyrazny); }
.pdu-pag-citace-karta > strong { color: var(--pdu-barva-tmavomodra); font-size: 1em; }
.pdu-pag-citace-datum { color: var(--pdu-barva-text-sedy); font-size: 0.85em; font-weight: 400; margin-left: 0.375em; }
.pdu-pag-citace-karta > p { margin: 0.5em 0 0; color: var(--pdu-barva-tekst-zakladni); font-size: 0.95em; line-height: 1.55; font-style: italic; }


/* ╔══════════════════════════════════════════════════════════════
   ⭐ SEKCE 41b. FIRMY.CZ WIDGET (iframe embed 3 nejnovějších recenzí)
   ──────────────────────────────────────────────────────────────
   Centrovaný iframe, full-width max 40em, aspect-ratio 640/420.
   Border + box-shadow pro vizuální oddělení od stránky.
   ══════════════════════════════════════════════════════════════ */
.pdu-pag-firmy-widget {
  margin: 0.5em 0 0;
}
.pdu-pag-firmy-widget iframe {
  border: 0; display: block;
  width: 100%; height: 26.25em;
  border-radius: var(--pdu-radius-m);
}
@media (max-width: 47.99em) {
  .pdu-pag-firmy-widget iframe { height: 32em; }
}


/* ╔══════════════════════════════════════════════════════════════
   📘 SEKCE 41c. NÁVOD-GRID — návody na montáž (3-col karty, ikona+title+bullets+CTA)
   ──────────────────────────────────────────────────────────────
   Pattern pro /navody/ — každá karta má icon (top), nadpis, bullety, button-primary
   na spodku karty (flex push-to-bottom). Mobile 1-col → tablet 2-col → desktop 3-col.
   ══════════════════════════════════════════════════════════════ */
.pdu-pag-navod-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1em; margin: 0 0 1.75em;
}
@media (min-width: 56em)   { .pdu-pag-navod-grid { grid-template-columns: repeat(3, 1fr); } }
.pdu-pag-navod-karta {
  display: flex; flex-direction: column;
  background: var(--pdu-barva-bila);
  border: 1px solid var(--pdu-barva-okraj-jemny);
  border-radius: var(--pdu-radius-card);
  padding: 1em 1.125em 1.125em;
  box-shadow: var(--pdu-stin-jemny);
  transition: all var(--pdu-prechod-dur-stredni) ease;
}
.pdu-pag-navod-karta:hover { box-shadow: var(--pdu-stin-vyrazny); transform: translateY(-0.1875em); }
.pdu-pag-navod-karta-ico {
  display: block; width: 6em; height: 6em;
  margin: 0 auto 0.5em; flex-shrink: 0;
}
.pdu-pag-navod-karta-ico img {
  width: 100% !important; height: 100% !important;
  object-fit: contain; display: block;
  margin: 0 !important; padding: 0 !important; border: 0 !important;
}
.pdu-pag-navod-karta-title {
  margin: 0 0 0.5em; font-size: 1.08em; font-weight: 700;
  color: var(--pdu-barva-tmavomodra); text-align: center; line-height: 1.3;
}
.pdu-pag-navod-karta-title a { color: inherit; text-decoration: none; }
.pdu-pag-navod-karta-title a:hover { color: var(--pdu-barva-zelena-akcent); }
.pdu-pag-navod-karta-list {
  margin: 0 0 0.875em; padding-left: 1.25em;
  font-size: 0.92em; line-height: 1.5;
  color: var(--pdu-barva-text-sekundarni); flex: 1;
}
.pdu-pag-navod-karta-list li { margin: 0.2em 0; }
.pdu-pag-navod-karta .pdu-pag-btn-primary { margin-top: auto; text-align: center; }
/* MOBIL — v úzké 2-col buňce tlačítko nesmí přetéct: full-width, zlom povolen, menší padding */
@media (max-width: 37.49em) {
  .pdu-pag-navod-karta .pdu-pag-btn-primary {
    white-space: normal; width: 100%; box-sizing: border-box; padding: 0.625em 0.5em;
  }
}


/* ╔══════════════════════════════════════════════════════════════
   📋 SEKCE 41d. REGISTRACE-GRID — embed registračních formulářů (2-col)
   ──────────────────────────────────────────────────────────────
   Pro per-pobočka SmartEmailing formuláře na /den-otevrenych-dveri.../.
   Každý <script> obalen .pdu-pag-registrace-item (světlý wrapper),
   form se injectne dovnitř. 1-col mobil → 2-col desktop.
   ══════════════════════════════════════════════════════════════ */
.pdu-pag-registrace-grid {
  display: grid; grid-template-columns: 1fr; gap: 1em; margin: 0 0 1.5em;
  align-items: start;
}
@media (min-width: 48em) { .pdu-pag-registrace-grid { grid-template-columns: repeat(2, 1fr); } }
/* bare grid cell — SmartEmailing form si nese vlastní rámeček, žádný dvojitý box.
   Prázdná/nenačtená buňka tak zůstane neviditelná (žádné „navíc pole"). */
.pdu-pag-registrace-item { min-width: 0; }


/* ╔══════════════════════════════════════════════════════════════
   📅 SEKCE 41e. HISTORIE-GRID — minulé termíny per pobočka (top-aligned karty)
   ──────────────────────────────────────────────────────────────
   align-self:start → každá karta výšku dle obsahu (žádné grid-stretch
   roztažení kratších seznamů). 1/2/3-col responsive.
   ══════════════════════════════════════════════════════════════ */
.pdu-pag-historie-grid {
  display: grid; grid-template-columns: 1fr; gap: 1em; margin: 0 0 1.5em;
}
@media (min-width: 37.5em) { .pdu-pag-historie-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56em)   { .pdu-pag-historie-grid { grid-template-columns: repeat(3, 1fr); } }
.pdu-pag-historie-karta {
  align-self: start;
  background: var(--pdu-barva-bila);
  border: 1px solid var(--pdu-barva-okraj-jemny);
  border-top: 0.1875em solid var(--pdu-barva-zelena-akcent);
  border-radius: var(--pdu-radius-card);
  padding: 1em 1.25em 1.125em;
  box-shadow: var(--pdu-stin-jemny);
}
.pdu-pag-historie-karta h3 {
  margin: 0 0 0.5em; font-size: 1.05em; font-weight: 700;
  color: var(--pdu-barva-tmavomodra);
}
.pdu-pag-historie-karta ul { margin: 0; padding: 0; list-style: none; }
.pdu-pag-historie-karta li {
  padding: 0.35em 0; font-size: 0.9em;
  color: var(--pdu-barva-text-sekundarni);
  border-bottom: 1px dashed var(--pdu-barva-okraj-jemny);
}
.pdu-pag-historie-karta li:last-child { border-bottom: 0; }


/* utility: schema-only kontejner (mikrodata bez vizuálního výstupu) */
.pdu-pag-meta-only { display: none; }


/* ╔══════════════════════════════════════════════════════════════
   🎠 SEKCE 42. VIDEA / DOPIS / CITACE CAROUSELS (horizontal scroll-snap)
   ──────────────────────────────────────────────────────────────
   Tři varianty carouselu sdílí stejný scroll-snap-x pattern jako
   .pdu-pag-osoby-carousel — liší se jen flex-basis breakpointy a item class.
   HTML pattern (viz BLOK 1 script-pages.js):
     <div class="pdu-pag-cwrap">
       <button class="pdu-pag-arrow pdu-pag-arrow-left" data-c-prev="c-XYZ">‹</button>
       <div class="pdu-pag-videa-carousel" id="c-XYZ">
         <article class="pdu-pag-videa-karta"><iframe ...></iframe></article>
         ... N×
       </div>
       <button class="pdu-pag-arrow pdu-pag-arrow-right" data-c-next="c-XYZ">›</button>
     </div>
     <div class="pdu-pag-dots" data-c-dots="c-XYZ">&nbsp;</div>
   ══════════════════════════════════════════════════════════════ */
.pdu-pag-videa-carousel, .pdu-pag-dopis-carousel, .pdu-pag-citace-carousel {
  display: flex; flex-wrap: nowrap; align-items: flex-start;
  overflow-x: auto; overscroll-behavior-x: none;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  gap: 0.875em; padding: 0.5em 0.75em 0.875em; margin: 0 0 0.5em;
  scroll-padding-inline: 0.75em;
  scroll-behavior: smooth; scrollbar-width: thin;
  scrollbar-color: var(--pdu-barva-okraj-jemny) var(--pdu-barva-sede-svetla);
}
.pdu-pag-videa-carousel::-webkit-scrollbar, .pdu-pag-dopis-carousel::-webkit-scrollbar, .pdu-pag-citace-carousel::-webkit-scrollbar { height: 0.375em; }
.pdu-pag-videa-carousel::-webkit-scrollbar-track, .pdu-pag-dopis-carousel::-webkit-scrollbar-track, .pdu-pag-citace-carousel::-webkit-scrollbar-track { background: var(--pdu-barva-sede-svetla); border-radius: 0.25em; }
.pdu-pag-videa-carousel::-webkit-scrollbar-thumb, .pdu-pag-dopis-carousel::-webkit-scrollbar-thumb, .pdu-pag-citace-carousel::-webkit-scrollbar-thumb { background: var(--pdu-barva-okraj-jemny); border-radius: 0.25em; }
.pdu-pag-videa-carousel::-webkit-scrollbar-thumb:hover, .pdu-pag-dopis-carousel::-webkit-scrollbar-thumb:hover, .pdu-pag-citace-carousel::-webkit-scrollbar-thumb:hover { background: var(--pdu-barva-zelena-akcent); }

/* VIDEO items — width řídí pouze parent carousel (peek pattern). Outside carouselu
   se chová jako standalone wrapper (full width parentu — text-foto, single embed). */
.pdu-pag-videa-karta {
  display: flex; flex-direction: column;
}
.pdu-pag-videa-karta iframe {
  width: 100%; aspect-ratio: 16/9; height: auto; border: 0;
  border-radius: var(--pdu-radius-m); display: block; box-shadow: var(--pdu-stin-jemny);
}
.pdu-pag-videa-carousel > .pdu-pag-videa-karta {
  flex: 0 0 calc(85% - 0.4375em); max-width: calc(85% - 0.4375em);
  scroll-snap-align: start;
}
@media (min-width: 48em) {
  .pdu-pag-videa-carousel > .pdu-pag-videa-karta { flex: 0 0 calc(50% - 0.4375em); max-width: calc(50% - 0.4375em); }
}

/* DOPIS items v carouselu — 1.15 (85% peek) → 2 → 3 → 4 */
.pdu-pag-dopis-carousel > .pdu-pag-dopis-karta {
  flex: 0 0 calc(85% - 0.4375em); max-width: calc(85% - 0.4375em);
  scroll-snap-align: start;
}
@media (min-width: 37.5em) { .pdu-pag-dopis-carousel > .pdu-pag-dopis-karta { flex: 0 0 calc(50% - 0.4375em); max-width: calc(50% - 0.4375em); } }
@media (min-width: 56em)   { .pdu-pag-dopis-carousel > .pdu-pag-dopis-karta { flex: 0 0 calc(33.333% - 0.5833em); max-width: calc(33.333% - 0.5833em); } }
@media (min-width: 75em)   { .pdu-pag-dopis-carousel > .pdu-pag-dopis-karta { flex: 0 0 calc(25% - 0.65625em); max-width: calc(25% - 0.65625em); } }

/* CITACE items v carouselu — 1 (85% peek) → 2 */
.pdu-pag-citace-carousel > .pdu-pag-citace-karta {
  flex: 0 0 calc(85% - 0.4375em); max-width: calc(85% - 0.4375em);
  scroll-snap-align: start;
}
@media (min-width: 48em) {
  .pdu-pag-citace-carousel > .pdu-pag-citace-karta { flex: 0 0 calc(50% - 0.4375em); max-width: calc(50% - 0.4375em); }
}


/* ╔══════════════════════════════════════════════════════════════
   ♿ SEKCE 37. REDUCED MOTION (a11y — vypnutí animací)
   ──────────────────────────────────────────────────────────────
   Popis:
   - Vypne všechny transitions/transforms/animations
   - Aktivuje se přes OS nastavení "Reduce motion" (a11y preference)
   - Pokrývá: karty hover, šipky, foto img, buttons, krok, ref-karta,
     faq, intro-video iframe, side-contact, form-card elements,
     timeline kruhy, kat-grid + eshop-grid hover, pobocka, tabs,
     galerie-item, pdu-pag-dot pulse, pruh-zluty-anim stripes animation,
     osoba hover, zalozka translate, tooltip pulse
   ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .pdu-pag-karta, .pdu-pag-arrow, .pdu-pag-foto img,
  .pdu-pag-btn-primary, .pdu-pag-btn-cta, .pdu-pag-btn-ghost, .pdu-pag-btn-outline,
  .pdu-pag-krok, .pdu-pag-ref-karta, .pdu-pag-faq-item, .pdu-pag-faq-details,
  .pdu-pag-intro-video iframe,
  .pdu-pag-side-contact,
  .pdu-pag-tl-num, .pdu-pag-kat-grid a, .pdu-pag-eshop-grid a, .pdu-pag-eshop-grid img,
  .pdu-pag-pobocka, .pdu-pag-tab, .pdu-pag-galerie-item,
  .pdu-pag-osoba, .pdu-pag-zalozka, .pdu-pag-zalozka-text, .pdu-pag-zalozka-icon,
  .pdu-pag-dopis-karta, .pdu-pag-dopis-foto img, .pdu-pag-citace-karta { transition: none; }
  .pdu-pag-karta:hover, .pdu-pag-krok:hover,
  .pdu-pag-ref-karta:hover, .pdu-pag-faq-item:hover,
  .pdu-pag-kat-grid a:hover, .pdu-pag-eshop-grid a:hover img,
  .pdu-pag-pobocka:hover, .pdu-pag-galerie-item:hover,
  .pdu-pag-osoba:hover, .pdu-pag-zalozka:hover,
  .pdu-pag-dopis-karta:hover, .pdu-pag-dopis-foto:hover img { transform: none; }
  .pdu-pag-carousel, .pdu-pag-osoby-carousel, .pdu-pag-pobocky-carousel,
  .pdu-pag-videa-carousel, .pdu-pag-dopis-carousel, .pdu-pag-citace-carousel { scroll-behavior: auto; }
  .pdu-pag-pruh-zluty-anim, .pdu-pag-vyjimky { animation: none; background: var(--pdu-barva-sede-svetla); }
  .pdu-pag-dot, .pdu-pag-tooltip-icon { animation: none; }
}


/* ╔══════════════════════════════════════════════════════════════
   🔎 SEKCE 38. VYHLEDÁVÁNÍ OSOB — live filtr nad kartami .pdu-pag-osoba
   ──────────────────────────────────────────────────────────────
   Popis:
   - Search bar (#pdu-osb-input) + výsledková mřížka (#pdu-osb-grid),
     do které JS (BLOK 6) klonuje shodné .pdu-pag-osoba karty.
   - Nezasahuje do carouselů — výsledky jdou do separátního gridu.
   - Klony dědí vzhled z .pdu-pag-osoba (sekce 32); zde jen obal + input.

   HTML pre-requisites:
     <section id="pdu-osoby-search" class="pdu-osb">
       <label class="pdu-osb-label" for="pdu-osb-input">…</label>
       <div class="pdu-osb-bar">
         <input id="pdu-osb-input" class="pdu-osb-input" type="search" />
         <button id="pdu-osb-clear" class="pdu-osb-clear" type="button">×</button>
       </div>
       <p class="pdu-osb-hint" id="pdu-osb-hint">&nbsp;</p>
       <div class="pdu-osb-grid" id="pdu-osb-grid"></div>
     </section>
   ══════════════════════════════════════════════════════════════ */
.pdu-osb { max-width: 68.75em; margin: 1.5em auto; }
.pdu-osb-label {
  display: block; margin: 0 0 0.5em;
  font-weight: 800; font-size: 1.8em; line-height: 1.25; color: var(--pdu-barva-tmavomodra);
}
.pdu-osb-bar { position: relative; display: flex; }
.pdu-osb-input {
  width: 100%; box-sizing: border-box;
  padding: 0.875em 2.75em 0.875em 1.125em;
  font-size: 1em; color: var(--pdu-barva-tmavomodra);
  background: var(--pdu-barva-bila);
  border: 2px solid var(--pdu-barva-zelena-akcent);
  border-radius: var(--pdu-radius-m);
}
.pdu-osb-input:focus {
  outline: none;
  box-shadow: 0 0 0 0.25em var(--pdu-barva-okraj-jemny);
}
.pdu-osb-clear {
  position: absolute; right: 0.625em; top: 50%; transform: translateY(-50%);
  width: 1.75em; height: 1.75em; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--pdu-barva-sede-svetla); color: var(--pdu-barva-text-sedy);
  font-size: 1.125em; line-height: 1;
}
.pdu-osb-hint {
  margin: 0.625em 0.125em; min-height: 1.125em;
  font-size: 0.875em; color: var(--pdu-barva-text-sedy);
}
/* rychlé štítky (intent chips) — naplní search + spustí hledání (JS BLOK 6) */
.pdu-osb-tags { display: flex; flex-wrap: wrap; gap: 0.5em; margin: 0.75em 0 0; }
.pdu-osb-tag {
  border: 1px solid var(--pdu-barva-okraj-jemny); background: var(--pdu-barva-bila);
  color: var(--pdu-barva-tmavomodra); border-radius: 2em;
  padding: 0.4em 0.9em; font: inherit; font-size: 0.85em; font-weight: 600;
  cursor: pointer; transition: all var(--pdu-prechod-dur-stredni) ease;
}
.pdu-osb-tag:hover, .pdu-osb-tag:focus-visible {
  background: var(--pdu-barva-zelena-akcent); color: var(--pdu-barva-bila) !important;
  border-color: var(--pdu-barva-zelena-akcent); outline: none;
}
/* regionální štítky (kde) — přerušovaný okraj + tmavomodrý hover (odliš od „co") */
.pdu-osb-tags.is-region { margin-top: 0.4em; }
.pdu-osb-tag.is-region { border-style: dashed; }
.pdu-osb-tag.is-region:hover, .pdu-osb-tag.is-region:focus-visible {
  background: var(--pdu-barva-tmavomodra); border-color: var(--pdu-barva-tmavomodra);
}
/* aktivní štítek (vybraný) — vyplněný + „✕" signál pro odebrání klikem */
.pdu-osb-tag.is-active {
  background: var(--pdu-barva-zelena-akcent); color: var(--pdu-barva-bila) !important;
  border-color: var(--pdu-barva-zelena-akcent);
}
.pdu-osb-tag.is-region.is-active {
  background: var(--pdu-barva-tmavomodra); border-color: var(--pdu-barva-tmavomodra);
}
.pdu-osb-tag.is-active::after { content: " ✕"; font-weight: 700; opacity: .85; }
.pdu-osb-grid {
  display: grid; gap: 1em;
  grid-template-columns: repeat(auto-fill, minmax(13.75em, 1fr));
}
/* klony karet dědí .pdu-pag-osoba styl — jen zruš scroll-snap z carousel kontextu */
.pdu-osb-grid > .pdu-pag-osoba { scroll-snap-align: none; position: relative; }
/* pill s pobočkou/oddělením v rohu klonu — jen v search výsledcích */
.pdu-osb-grid .pdu-osb-pill {
  position: absolute; top: 0.5em; right: 0.5em;
  display: inline-block;
  font-size: 0.7em; font-weight: 700;
  color: var(--pdu-barva-zelena-akcent);
  background: #e8f3d6;
  padding: 0.25em 0.65em;
  border-radius: 999px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  z-index: 1;
  pointer-events: none;
}


/* ╔══════════════════════════════════════════════════════════════
   ✅❌ SEKCE 43. KLAD / ZÁPOR callout (lze × nelze)
   ──────────────────────────────────────────────────────────────
   Kontrastní dvojice pro „co JE a co NENÍ" (reklamace, vrácení, podmínky).
   Použití (paste-html):
     <p class="pdu-pag-klad"><strong>Lze reklamovat:</strong> …</p>
     <p class="pdu-pag-zapor"><strong>Nelze reklamovat:</strong> …</p>
   ══════════════════════════════════════════════════════════════ */
.pdu-pag-klad,
.pdu-pag-zapor {
  position: relative;
  margin: 0 0 0.75em;
  padding: 0.875em 1em 0.875em 2.5em;
  border-radius: var(--pdu-radius-card);
  line-height: 1.55;
  color: var(--pdu-barva-tekst-zakladni);
}
.pdu-pag-klad::before,
.pdu-pag-zapor::before {
  position: absolute; left: 0.9em; top: 0.875em;
  font-weight: 800;
}
.pdu-pag-klad {
  background: var(--pdu-barva-zelena-svetla-3);
  box-shadow: inset 3px 0 0 var(--pdu-barva-zelena-akcent);
}
.pdu-pag-klad::before { content: "\2713"; color: var(--pdu-barva-zelena-akcent); }
.pdu-pag-klad strong { color: var(--pdu-barva-zelena-akcent); }
.pdu-pag-zapor {
  background: #FDECEA;
  box-shadow: inset 3px 0 0 var(--pdu-barva-cervena-alert);
}
.pdu-pag-zapor::before { content: "\2715"; color: var(--pdu-barva-cervena-alert); }
.pdu-pag-zapor strong { color: var(--pdu-barva-cervena-alert); }


/* ╔══════════════════════════════════════════════════════════════
   🔎 SEKCE 44. FAQ SEARCH — live filtr nad .pdu-pag-faq-item (in-place)
   ──────────────────────────────────────────────────────────────
   Popis:
   - Search bar (#pdu-faq-input) + topic pills filtrují otázky PŘÍMO
     v sekcích (skrytí nematchujících .pdu-pag-faq-item) a skryjí
     prázdné nadpisy sekcí. JS BLOK 7 ve script-pages.js.
   - Sdílí vzhled search baru + štítků se sekcí 38 (.pdu-osb*).
   - Bez JS: vše viditelné, accordion funguje normálně (no-op).

   HTML pre-requisites:
     <section id="pdu-faq-search" class="pdu-osb pdu-faq-search">
       <label class="pdu-osb-label" for="pdu-faq-input">…</label>
       <div class="pdu-osb-bar">
         <input id="pdu-faq-input" class="pdu-osb-input" type="search" />
         <button id="pdu-faq-clear" class="pdu-osb-clear" type="button">×</button>
       </div>
       <div class="pdu-osb-tags" id="pdu-faq-tags"> …data-q štítky… </div>
       <p class="pdu-osb-hint" id="pdu-faq-hint">&nbsp;</p>
     </section>
   ══════════════════════════════════════════════════════════════ */
.pdu-faq-search { margin-bottom: 1.25em; }
/* skrytí sekcí v režimu hledání + nematchující otázky (JS BLOK 7) */
.pdu-pag-faq-item.is-faq-hidden,
.pdu-pag-faq.is-faq-hidden,
.pdu-pag-greentitle.is-faq-hidden { display: none !important; }
/* ── výsledkový panel pod polem (instant answer) ──
   Default skryté; JS (BLOK 7) přidá .is-on až při obsahu. NE :empty —
   Shoptet/TinyMCE do prázdného <div> vkládá &nbsp; → :empty by selhal. */
.pdu-faq-results { display: none; flex-direction: column; gap: 0.5em; margin: 0.5em 0 0; }
.pdu-faq-results.is-on { display: flex; }
/* výsledné karty = plná šířka (rozbalená odpověď je čitelnější v 1 sloupci) */
.pdu-faq-results .pdu-pag-faq-item { flex: none; min-width: 0; width: 100%; }
.pdu-faq-results .pdu-pag-faq-item:hover { transform: none; }
/* relevance pill v rohu nejlepší shody */
.pdu-faq-results .pdu-faq-top {
  display: inline-block; margin: 0 0 0.5em; padding: 0.25em 0.75em;
  font-size: 0.8em; font-weight: 700; letter-spacing: 0.02em;
  color: var(--pdu-barva-zelena-akcent); background: #e8f3d6; border-radius: 999px;
}
/* výzva „zeptejte se" v patě výsledků, když není přesná shoda */
.pdu-faq-nohit {
  display: none;
  margin: 0.75em 0 0; padding: 1em 1.25em;
  background: var(--pdu-barva-pozadi-sekce); border-radius: var(--pdu-radius-card);
  border-left: 0.25em solid var(--pdu-barva-zelena-akcent);
  color: var(--pdu-barva-tekst-zakladni); line-height: 1.55;
}
.pdu-faq-nohit.is-on { display: block; }

/* ════════════════════════════════════════════════════════════════════
   SEKCE 39: POBOČKY (detail prodejen) — komponenty z Lohrových stránek
   sjednocené do pdu-pag-*. Použito: /prodej-plotu-a-pletiv-*/, /pobocka-praha/
   ════════════════════════════════════════════════════════════════════ */

/* Výhody na pobočce — 4 ikony (prohlédnete / poradíme / naložíme / namontujeme) */
.pdu-pag-page .pdu-pag-vyhody {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5em 0.75em;
  background: var(--pdu-barva-bila);
  border-radius: var(--pdu-radius-card);
  box-shadow: var(--pdu-stin-jemny);
  padding: 0.875em 1em;
  margin: 1.25em 0;
}
@media (min-width: 48em) { .pdu-pag-page .pdu-pag-vyhody { grid-template-columns: repeat(4, 1fr); } }
/* pojistka: když Shoptet/TinyMCE obalí <a> do <p>, p zmizí z layoutu → anchory zůstanou grid-položky */
.pdu-pag-vyhody > p { display: contents; }
.pdu-pag-vyhoda {
  box-sizing: border-box; min-width: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: 0.5em; text-decoration: none;
  color: var(--pdu-barva-tmavomodra);
}
.pdu-pag-vyhoda-ico img { width: 5em; height: 5em; }
.pdu-pag-vyhoda-text {
  margin-top: 0.5em; font-size: 0.85em; font-weight: 700;
  text-align: center; line-height: 1.3; color: var(--pdu-barva-tmavomodra);
}

/* Navigace do map — Google / Waze / Mapy.cz / Apple */
.pdu-pag-mapnav { display: flex; flex-direction: column; gap: 0.625em; max-width: 30em; }
.pdu-pag-mapnav-item {
  display: flex; align-items: center; gap: 0.875em;
  padding: 0.875em 1.125em;
  border: 1px solid var(--pdu-barva-okraj-svetly);
  border-radius: var(--pdu-radius-m);
  background: var(--pdu-barva-bila);
  text-decoration: none; color: var(--pdu-barva-tekst-zakladni); font-weight: 500;
  transition: box-shadow var(--pdu-prechod-dur-stredni) ease, border-color var(--pdu-prechod-dur-stredni) ease;
}
.pdu-pag-mapnav-item:hover { border-color: var(--pdu-barva-zelena-akcent); box-shadow: var(--pdu-stin-jemny); }
.pdu-pag-mapnav-item img { width: 2.5em; height: 2.5em; border-radius: var(--pdu-radius-s); flex-shrink: 0; }
.pdu-pag-mapnav-item span { flex: 1; }
.pdu-pag-mapnav-item small { display: block; font-weight: 400; color: var(--pdu-barva-text-sekundarni); }
.pdu-pag-mapnav-item::after { content: "\2197"; color: var(--pdu-barva-sede-stredni); font-size: 1.1em; }


/* Foto-carousel poboček (.pdu-smooth-carousel) — JS v globálním foot.js, proto názvy tříd ZACHOVÁNY */
.pdu-smooth-carousel { position: relative; overflow: hidden; width: 100%; }
.pdu-smooth-carousel-track { padding: 10px 0; display: flex; flex-wrap: nowrap; will-change: transform; }
.pdu-smooth-carousel-item { flex: 0 0 auto; box-sizing: border-box; }
.pdu-smooth-carousel-item img { width: 100%; height: auto; display: block; border-radius: 6px; }
.pdu-smooth-carousel-img { transition: transform 200ms ease-in; transform: scale(1); }
.pdu-smooth-carousel-img:hover { transform: scale(1.05); z-index: 2; }
.pdu-smooth-carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
  background: rgba(0,0,0,0.45); color: #fff; border: none;
  width: 40px; height: 40px; border-radius: 50%;
  font-size: 20px; line-height: 40px; text-align: center; cursor: pointer;
  transition: background 200ms; padding: 0;
}
.pdu-smooth-carousel-arrow:hover { background: rgba(0,0,0,0.7); }
.pdu-smooth-carousel-prev { left: 8px; }
.pdu-smooth-carousel-next { right: 8px; }


/* text-foto: top-zarovnání (persona + hodiny/výjimky na pobočkách) */
@media (min-width: 48em) { .pdu-pag-text-foto.is-top { align-items: flex-start; } }


/* ════════════════════════════════════════════════════════════════════
   SEKCE 40: SLUŽBY NA POBOČCE — 4 ikonové CTA karty (DEDIKOVANÉ pro pobočky)
   Samostatná komponenta (NE .pdu-pag-staty) — bez USP number-logiky, bez :has,
   bez „margin-top 3.32em". Ikona napevno přes CSS (em) → imunní vůči theme img{height:auto}.
   <div class="pdu-pag-sluzby"><a class="pdu-pag-sluzba" href="#…"><img …/> <strong>…</strong></a> ×4</div>
   ════════════════════════════════════════════════════════════════════ */
.pdu-pag-sluzby { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.875em; margin: 1.25em 0; }
@media (min-width: 62em) { .pdu-pag-sluzby { grid-template-columns: repeat(4, 1fr); } }
/* pojistka: když Shoptet/TinyMCE obalí <a> do <p>, p zmizí z layoutu → anchory zůstanou grid-položky */
.pdu-pag-sluzby > p { display: contents; }
.pdu-pag-sluzba {
  box-sizing: border-box; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 0.625em; text-align: center;
  min-height: 9.5em; padding: 1.25em 0.75em;
  background: var(--pdu-barva-bila);
  border: 1px solid var(--pdu-barva-okraj-jemny);
  border-bottom: 0.1875em solid var(--pdu-barva-zelena-akcent);
  border-radius: var(--pdu-radius-card);
  box-shadow: var(--pdu-stin-jemny);
  text-decoration: none !important;
  transition: box-shadow var(--pdu-prechod-dur-stredni) ease, transform var(--pdu-prechod-dur-stredni) ease, border-color var(--pdu-prechod-dur-stredni) ease;
}
.pdu-pag-sluzba:hover { box-shadow: var(--pdu-stin-vyrazny); transform: translateY(-0.1875em); border-color: var(--pdu-barva-zelena-akcent); }
.pdu-pag-sluzba img { width: 4em; height: 4em; display: block; flex-shrink: 0; }
.pdu-pag-sluzba strong { color: var(--pdu-barva-tmavomodra); font-size: 1.02em; font-weight: 800; line-height: 1.3; }
/* Zvýrazněné telefonní číslo v hero pobočky — větší, zelený akcent, label „Zavolejte nám" */
.pdu-pag-tel-hero {
  display: inline-flex; align-items: center; gap: 0.65em;
  margin: 0 0 1.25em; padding: 0.6em 1em;
  background: rgba(0, 180, 110, 0.07);
  border: 1px solid var(--pdu-barva-okraj-jemny);
  border-left: 0.25em solid var(--pdu-barva-zelena-akcent);
  border-radius: var(--pdu-radius-card);
  text-decoration: none !important;
  transition: box-shadow var(--pdu-prechod-dur-stredni) ease, transform var(--pdu-prechod-dur-stredni) ease;
}
.pdu-pag-tel-hero:hover { box-shadow: var(--pdu-stin-jemny); transform: translateY(-0.0625em); }
.pdu-pag-tel-hero img { width: 1.85em; height: 1.85em; flex-shrink: 0; }
.pdu-pag-tel-hero > span { display: flex; flex-direction: column; line-height: 1.12; }
.pdu-pag-tel-hero small { font-size: 0.8em; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--pdu-barva-text-sedy); }
.pdu-pag-tel-hero strong { font-size: 1.55em; font-weight: 800; color: var(--pdu-barva-tmavomodra); letter-spacing: -0.01em; }


/* === Utility tridy: nahrada drive inline stylu (kontakty, 2026-06-18) === */
.pdu-link-reset { color: inherit !important; text-decoration: none !important; }
.pdu-img-center { display: block; margin: 0 auto; }
.pdu-block { display: block; }