/* ═══════════════════════════════════════════════════════════════════════
   style-pages.css — komponenty obsahových stránek e-shopu (vše kromě produktů,
   kategorií a blogu): HP, realizace, kontakty, pobočky, návody, reference.
   Načítá: globálně z hlavičky šablony (HEAD, <link rel="stylesheet">) + jako
            defense-in-depth @import v paste-html — viz meta/manual.md kap. 4.
   Prefix tříd: .pdu-pag- (výjimky: .pdu-mapka2/.pdu-kraj2 v sekci 29,
            .pdu-osb-/.pdu-faq- v sekcích 58, 60 a 63, .pdu-link-reset a spol.)
   Barvy, spacing, radius, stíny a durations čerpá z eshop/global.css — změna
   designových tokenů probíhá VÝHRADNĚ tam, ne tady.
   ───────────────────────────────────────────────────────────────────────
   MAPA SEKCÍ (Ctrl+F na "SEKCE N."):
    1. Pozadí světlešedé bez okraje — neutrální blok s jemným šedým pozadím
    2. Divider — tenká vodorovná linka mezi sekcemi
    3. Page wrapper + úvodní text — root .pdu-pag-page, claim, mission
    4. Hero CTA — dvojice hlavních tlačítek (primary + cta)
    5. Group — wrapper sekce s nadpisem H2
    6. Staty — mřížka karet s číslem/emoji (USP lišta)
    7. Náročnost montáže — label → hodnota → popis pro návody
    8. Pro koho jsme tady — karty cílových skupin
    9. Prokliky — kompaktní karty s ikonou a CTA
   10. Divider s textem — linka se zeleným popiskem uprostřed
   11. Autor / obchodní zástupce — karta osoby s fotem 100×100
   12. Galerie 3-col — čtvercová fotogalerie s lightboxem
   13. Osoby grid — statický grid karet .pdu-pag-osoba
   14. Pobočky grid — auto-fit grid karet poboček
   15. Nářadí kartičky — karty půjčovny (foto, parametry, CTA)
   16. Carousel — scroll-snap carousel kategorií + šipky/dots
   17. Mid CTA — tmavý CTA pruh s fotkou týmu
   18. Kontaktní karta — foto + text + tlačítka telefon/e-mail
   19. Hodnocení tlačítka — 3 plnoplošné odkazy se šipkou
   20. Hod karty — 2 karty s tlačítkem dole (FB / DOD)
   21. Final text — poznámka pod čarou na konci stránky
   22. Reference trojice — 3 zákaznické karty s fotkou
   23. Green title — zelený banner s H2 jako předěl
   24. Pruh žlutý animovaný — pruh s animovaným diagonálním vzorem
   25. Provozní výjimky a svátky — callout s mimořádnou otevírací dobou
   26. Rámeček šedý — box s plovoucí mapou a checklistem
   27. Text + foto — 2-col článkový blok, .is-prohozeno = zrcadlení
   28. FAQ accordion — <details>/<summary>, FAQPage microdata
   29. Hero intro + video — hlavní hero + varianty tlačítek + mapa poboček
   30. Form (poptávka) — wrapper okolo se-forms.cz embedu
   31. Timeline — časová osa 6 kroků
   32. Kat-grid — 9 ikon kategorií bez labelů
   33. Pročnas — checklist výhod + mapa
   34. Eshop — 3 obrázkové karty s gradientem
   35. Bullets — odrážky se zeleným ✓
   36. Tabulka — tabulka s tmavomodrou hlavičkou
   37. Pobočka — karta prodejny (mapa, adresa, telefon, hodiny)
   38. Tabs — záložkové rozhraní (JS SEKCE 3)
   39. Galerie-grid — responzivní galerie 2/3/4 sloupce
   40. Osoba — karta osoby s portrétem 140×140
   41. Záložky — plnoplošná kotevní tlačítka
   42. Tooltip — „?“ indikátor s bublinou (pure CSS)
   43. Info line — řádka ikona + text/odkaz
   44. Odd-header — hlavička oddělení (H2 + info linky)
   45. Osoby carousel — horizontální varianta gridu osob
   46. Údaje karty — fakturační / platební / DSA karty
   47. Anchor-nav — kotevní tlačítka float-right (zatím jen mockup)
   48. Videa-grid — 2-col mřížka YouTube embedů
   49. Dopis-grid — karty referenčních dopisů + přepis
   50. Dopis modal — přepis v native <dialog> (JS SEKCE 4)
   51. Citace-grid — pull-quotes z e-mailových referencí
   52. Firmy.cz widget — iframe se 3 recenzemi
   53. Návod-grid — karty návodů na montáž
   54. Registrace-grid — embed registračních formulářů
   55. Historie-grid — minulé termíny per pobočka
   56. Videa / dopis / citace carousels — 3 scroll-snap varianty
   57. Reduced motion — a11y vypnutí animací
   58. Vyhledávání osob — search bar + výsledkový grid (JS SEKCE 5)
   59. Klad / zápor — callout „lze × nelze“
   60. FAQ search — live filtr otázek + topic pills (JS SEKCE 6)
   61. Pobočky (detail prodejen) — komponenty stránek poboček
   62. Služby na pobočce — 4 ikonové CTA karty
   63. Searchbar filtr — client-side filtr karet /navody/ (JS SEKCE 9)
   64. Hotspoty nad grafikou — pulzující kolečka s bublinou (JS SEKCE 11 dřív)
   65. Děkovačky — .pdu-dek-* bloky po odeslání objednávky a poptávky
   66. Zákaznický účet — přihlášení, registrace a zapomenuté heslo (JS SEKCE 11)
   ═══════════════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────────────
   SEKCE 1. POZADÍ SVĚTLEŠEDÉ BEZ OKRAJE
   Univerzální blok s jemným šedým pozadím pro odlišení obsahu od stránky.
   Plná šířka, bez borderu, radiusu i stínu.
   ───────────────────────────────────────────────────────────────────────
   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 2. DIVIDER
   Tenká šedá vodorovná linka pro vizuální předěl mezi sekcemi (typicky <hr>).
   ───────────────────────────────────────────────────────────────────────
   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 3. PAGE WRAPPER + ÚVODNÍ TEXT
   Root wrapper celé stránky (.pdu-pag-page) plus úvodní texty — claim (italic perex)
   a mission (větší odstavec).
   ───────────────────────────────────────────────────────────────────────
   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; }

/* H1 obsahových stránek — titulek vykresluje šablona Shoptetu a stojí NAD
   .pdu-pag-page, takže ho zevnitř komponenty nelze zasáhnout.
   Shoptet má `.h1,h1{font-size:26px;font-weight:400}` (specificita 0,1,0) → proti
   sekčním nadpisům .pdu-pag-group-title (weight 800) vypadá titulek stránky slabě.
   `body.type-page h1` = (0,1,1) přebije bez !important a scopuje se JEN na Stránky;
   kategorie, produkty ani blog se nemění.
   ⚠ Exo 2 nemá řez 800 (dostupné 100/300/400/500/600/700/900) → 800 i 900 vykreslí
   stejný devítistovkový řez. Sekční nadpisy tedy už na maximu jsou.
   600 = skutečný řez fontu (semibold), ne dopočítaný — titulek zesílí, ale nepřebije
   sekční nadpisy pod sebou. (2026-08-14) */
body.type-page h1 { font-weight: 600; }

/* 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 4. HERO CTA
   Řádek dvou hlavních tlačítek pod nadpisem stránky: zelené .pdu-pag-btn-primary
   a žluté .pdu-pag-btn-cta. Další varianty tlačítek jsou v sekci 29.
   ───────────────────────────────────────────────────────────────────────
   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; }
/* Adjacent .pdu-pag-hero řádek hned pod prvním (např. terciární odkaz pod hlavními CTA tlačítky).
   Stahuje mezeru z kolabovaných 2em na 0.75em; vlastní margin-bottom (2em) před další sekcí zůstává beze změny. */
.pdu-pag-hero + .pdu-pag-hero { margin-top: -1.25em; }
/* Modifier .is-glow — jemný pulz + shimmer sweep pro zvýraznění jednoho terciárního tlačítka (např. DOD odkaz). */
/* Zlatá varianta (glow 7s, rgba(245,190,15), shimmer 5s) vrácena na živou zelenou 2026-07-20
   na pokyn — nemá se vézt s deployem CTA fixu. Záloha: ZALOHY/2026-07-20_pre-live-glow-revert/ */
.pdu-pag-btn-outline.is-glow { position: relative; overflow: hidden; animation: pduBtnGlow 2.2s ease-in-out infinite; }
.pdu-pag-btn-outline.is-glow::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.6) 50%, transparent 70%); transform: translateX(-100%); animation: pduBtnShimmer 2.6s ease-in-out infinite; }
@keyframes pduBtnGlow { 0%, 100% { box-shadow: 0 0 0.5em rgba(0, 180, 110, .3); } 50% { box-shadow: 0 0 1.125em rgba(0, 180, 110, .65); } }
@keyframes pduBtnShimmer { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }
/* 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 5. GROUP
   Univerzální wrapper sekce s nadpisem H2 a jednotným vertikálním paddingem.
   ───────────────────────────────────────────────────────────────────────
   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 6. STATY
   Mřížka karet s velkým číslem nebo emoji, labelem a popisem (6 výhod, USP lišta).
   Součástí sekce jsou i animované Lucide ikony .pdu-pag-stat-ico.
   ───────────────────────────────────────────────────────────────────────
   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-num-ilu` — barevná SVG ilustrace místo čísla/emoji (2026-08-14).
   Používá se, když v mřížce stojí vedle sebe číselné a ikonové karty (HP „Proč koupit u nás").
   Blok musí být stejně vysoký jako číslo, jinak se titulky karet rozejdou:
   číslo = line-height 1.05 × 2.1em + margin 0.5em → 1.55em vlastního fontu.
   Ilustrace tedy 1.24em + 0.31em margin = totéž, ale kresba vyjde o ~26 % větší než emoji.
   Výška se drží v em na wrapperu (ne na `<img>`), takže je imunní vůči theme `img{height:auto}`;
   `contain` = nic se neořízne, ať má ilustrace jakýkoli poměr stran. */
.pdu-pag-stat-num-ilu { height: 1.24em; margin-bottom: 0.31em; }
.pdu-pag-stat-num-ilu img { width: auto; height: 100%; max-width: 100%; margin: 0 auto; object-fit: contain; display: block; }
.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; }
/* Modifier `.is-foto` — místo Lucide ikony kulaté FOTO kategorie
   (sada `/user/documents/upload/fotografie/kolecka/`, stejná jako na úvodní stránce).
   Kolečko je větší a bez zeleného podkladu, protože fotka vyplní celou plochu. */
.pdu-pag-stat-ico.is-foto { width: clamp(8.5em, 16vw, 12.5em); height: clamp(8.5em, 16vw, 12.5em); background: none; padding: 0; margin-bottom: 0.625em; }
.pdu-pag-stat-ico.is-foto img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.pdu-pag-stat:hover .pdu-pag-stat-ico.is-foto { background: none; }
.pdu-pag-stat:hover .pdu-pag-stat-ico.is-foto img { animation: pduUspPop .55s ease; }
.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; } }


/* ───────────────────────────────────────────────────────────────────────
   SEKCE 7. NÁROČNOST MONTÁŽE
   Samostatný komponent pro návody: pořadí LABEL → HODNOTA → popis, hodnota malá.
   Není to .pdu-pag-staty (ty mají velké číslo nahoře).
   ───────────────────────────────────────────────────────────────────────
   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; }
/* `.pdu-pag-narocnost-link` — odkaz uvnitř karty (paralela k `.pdu-pag-stat-link`).
   Dřív musela pod kartami stát samostatná řada tlačítek; takhle je akce přímo
   v kartě, ke které patří. `margin-top:auto` ji drží u spodní hrany, takže
   jsou odkazy zarovnané i při různě dlouhých popisech. */
.pdu-pag-narocnost-link {
  display: block; margin-top: auto; padding-top: 0.6em;
  color: var(--pdu-barva-zelena-akcent); font-size: .9em; font-weight: 700;
  text-decoration: none !important;
}
.pdu-pag-narocnost-link:hover { text-decoration: underline !important; }
.pdu-pag-narocnost-item.is-blue  .pdu-pag-narocnost-link { color: #1A4FB8; }
.pdu-pag-narocnost-item.is-amber .pdu-pag-narocnost-link { color: #B5740B; }
.pdu-pag-narocnost-item.is-coral .pdu-pag-narocnost-link { color: #B53A20; }
/* Celá karta klikací — stretched-link overlay. Platí jen když karta obsahuje
   právě JEDEN odkaz (stejné omezení jako u `.pdu-pag-stat.is-klik`). */
.pdu-pag-narocnost-item.is-klik { position: relative; cursor: pointer; }
.pdu-pag-narocnost-item.is-klik .pdu-pag-narocnost-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
/* 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 8. PRO KOHO JSME TADY
   Karty cílových skupin s ikonou v zeleném kruhu a overlay odkazem přes celou kartu.
   Modifier .is-grid-2x2 vynutí 2×2 grid pro 4 karty.
   ───────────────────────────────────────────────────────────────────────
   Popis:
   - Flex wrap 3 karet (flex:1, min-width 15.625em) — auto-resize
   - Karta centered, ikona (emoji nebo <img>) v ≈162 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ý kruh (2.7em × font-size 3.75em ≈ 162 px) s emoji nebo <img> ikonou.
   font-size drží velikost emoji glyfu (3.75em ≈ 60 px), width/height je v em
   vlastního font-size — při změně jednoho přepočítat druhé, ať kruh nezmění průměr. */
.pdu-pag-koho-ico {
  width: 2.7em; height: 2.7em; 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: 3.75em; line-height: 1; flex-shrink: 0; overflow: hidden;
}
/* obrázková varianta ikony — <img> místo emoji, contain uvnitř kruhu */
.pdu-pag-koho-ico img { width: 68%; height: 68%; object-fit: contain; display: block; }
.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; }
}

/* ───────────────────────────────────────────────────────────────────────
   SEKCE 9. PROKLIKY
   Kompaktní karty — ikona vlevo, titulek a CTA „Zobrazit →“ vpravo.
   Klon blog komponenty .pdu-blo-prokliky-* pod pdu-pag- prefixem.
   ───────────────────────────────────────────────────────────────────────
   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;
}
/* Volitelný řádek popisu mezi titulkem a CTA — „k čemu to na plotu je"
   (Lucka 2026-07-31: u volitelného příslušenství chtěla u každé položky vědět,
   co dělá a jestli se vyplatí kliknout). Bez něj karta vypadá přesně jako dřív. */
.pdu-pag-prokliky-popis {
  display: block; margin: 0.25em 0 0.15em;
  font-size: .85em; font-weight: 400; line-height: 1.45;
  color: var(--pdu-barva-text-sekundarni);
}
.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); }

/* ───────────────────────────────────────────────────────────────────────
   SEKCE 10. DIVIDER S TEXTEM
   Vodorovná linka s krátkým zeleným popiskem uprostřed. Klon .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);
}

/* ───────────────────────────────────────────────────────────────────────
   SEKCE 11. AUTOR / OBCHODNÍ ZÁSTUPCE
   Karta osoby — kulaté foto 100×100 vlevo, jméno, role, bio a CTA vpravo.
   Klon .pdu-cat-autor ze style-category.css, Schema.org/Person friendly.
   ───────────────────────────────────────────────────────────────────────
   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; }
}

/* Proklik z autor karty na profil obchodníka, varianta pro stránky a produkty. */
.pdu-pag-autor-profil {
  display: inline-block;
  margin-top: 0.625em;
  font-size: 0.9em;
  font-weight: 700;
  color: var(--pdu-barva-tmavomodra);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.pdu-pag-autor-profil:hover { color: var(--pdu-barva-zelena-akcent); }

/* Autor karta stojí na produktu v úzkém sloupci. Základní button má padding 1.75em po stranách
   a font 1.05em, takže „Zavolat 731 738 030" se do něj nevejde a zalomí se. Tady každé tlačítko
   přes celou šířku karty, menší a s menším odsazením, aby číslo zůstalo na jednom řádku. */
.pdu-pag-autor-cta { gap: 0.5em; }
.pdu-pag-autor-cta > a { flex: 1 1 100%; padding: 0.7em 1em; font-size: 0.92em; }

/* ───────────────────────────────────────────────────────────────────────
   Autor realizace — kompaktní řádek pod popis realizace montáže.
   Realizace jsou v Shoptetu produkty, karta jde do popisu produktu.
   Užší varianta .pdu-pag-autor: portrét 4em, jméno jako odkaz na profil,
   pod ním tel + mail. Levý zelený inset-bar odlišuje blok od popisu realizace.
   Použití:
     <div class="pdu-rlz-autor" itemscope itemtype="https://schema.org/Person"
          itemid="https://www.levne-pletivo.cz/#rep-prijmeni">
       <div class="pdu-rlz-autor-foto"><img … /></div>
       <div class="pdu-rlz-autor-info">
         <p class="pdu-rlz-autor-label">Tuhle realizaci v Kralovicích zaměřil a připravil</p>
         <p class="pdu-rlz-autor-jmeno">…</p>
         <div class="pdu-rlz-autor-cta">… tel + mail …</div>
       </div>
     </div>
   ─────────────────────────────────────────────────────────────────────── */
.pdu-rlz-autor {
  display: flex;
  gap: 0.875em;
  align-items: flex-start;
  margin: 1.25em 0;
  padding: 1em 1.125em;
  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: 0 var(--pdu-radius-card) var(--pdu-radius-card) 0;
}
.pdu-rlz-autor-foto img {
  width: 4em;
  height: 4em;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.pdu-rlz-autor-label {
  font-size: 0.72em;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pdu-barva-text-sedy);
  margin: 0 0 0.2em;
}
.pdu-rlz-autor-jmeno {
  font-size: 1.05em;
  font-weight: 700;
  color: var(--pdu-barva-tmavomodra);
  margin: 0 0 0.5em;
}
.pdu-rlz-autor-cta { display: flex; flex-wrap: wrap; gap: 0.5em; }
.pdu-rlz-autor-cta > a { padding: 0.75em 1.25em; font-size: 0.95em; }
@media (max-width: 37.49em) {
  .pdu-rlz-autor { flex-direction: column; }
}

/* ───────────────────────────────────────────────────────────────────────
   SEKCE 12. GALERIE 3-COL
   Čtvercová fotogalerie 2 → 3 sloupce se Shoptet lightboxem a orphan centrováním.
   Pozn.: stejné třídy .pdu-pag-galerie-* dole ještě rozšiřuje sekce 39.
   ───────────────────────────────────────────────────────────────────────
   - 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; }

/* ───────────────────────────────────────────────────────────────────────
   SEKCE 13. OSOBY GRID
   Statický 3-col responsive grid karet .pdu-pag-osoba — alternativa k osoby carouselu.
   ───────────────────────────────────────────────────────────────────────
   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;
  }
}

/* ───────────────────────────────────────────────────────────────────────
   SEKCE 14. POBOČKY GRID
   Auto-fit grid karet poboček (mapka, adresa, telefon, CTA), 3/2/1 sloupec.
   ───────────────────────────────────────────────────────────────────────
   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.
   ───────────────────────────────────────────────────────────────────────
   ⚠ SDÍLENÝ NÁZEV TŘÍDY — čti před jakoukoliv úpravou (revize 2026-07-28, bod E-6)

   `.pdu-pag-pobocka` je definovaná NADVAKRÁT a obě definice jsou živé:
     - ZDE (SEKCE 14) — wrapper `.pdu-pag-pobocky-grid` (poboc**ky**)
     - SEKCE 37 „POBOČKA" — wrapper `.pdu-pag-pobocka-grid` (poboc**ka**)
     - + doplňky `.is-centrala` / `-badge` ještě v SEKCI 45 (dnes bez užití v obsahu)

   Živé karty (měřeno 2026-07-29 na záloze obsahu e-shopu + renderovaném /kontakty/):
     - `/kontakty/` — 1× `.pdu-pag-pobocky-grid`, 7 karet (h3, a>img, -adresa, -tel,
       table -hodiny, .pdu-pag-btn-primary)
     - `/pujcovna-naradi/` — 1× `.pdu-pag-pobocky-grid`, 7 karet (bez -hodiny)
     - `.pdu-pag-pobocka-grid` ze SEKCE 37 = 0 výskytů, ALE karty mají stejný název
       třídy → deklarace ze SEKCE 37 (pozdější v souboru, stejná specificita 0-1-0)
       na nich VYHRÁVAJÍ. SEKCE 37 tedy NENÍ mrtvý kód a nesmí se smazat.

   Co z tohoto bloku na živé kartě reálně platí:
     ✔ align-items, gap, padding, text-align, `h3`, `img`, tlačítka
     ✘ border, box-shadow, celé `-adresa`, celé `-tel` a `-tel:hover` — přebito SEKCÍ 37
       (viz značky „přebito SEKCÍ 37" u konkrétních deklarací níže)

   Duplicita je ZÁMĚRNĚ ponechána: slučování by vyžadovalo přesun pravidel mezi sekcemi
   (= změna kaskády) nebo přejmenování třídy — obojí je samostatné rozhodnutí, ne úklid.
   Obě sekce se proto NESMÍ upravovat nezávisle na sobě.
   ─────────────────────────────────────────────────────────────────────── */
.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 (max-width: 55.99em) {
  /* osamocený poslední (7. ze 7) ve 2-col gridu → centruj přes obě kolony */
  .pdu-pag-pobocky-grid > .pdu-pag-pobocka:last-child:nth-child(2n+1) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 0.5em);
  }
}
@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);  /* přebito SEKCÍ 37: border 0 + zelený border-top */
  border-radius: var(--pdu-radius-card);
  text-align: center;
  box-shadow: var(--pdu-stin-jemny);               /* přebito SEKCÍ 37: --pdu-stin-stredni */
}
.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;
}
/* ✘ celý blok dnes přebit SEKCÍ 37 (.pdu-pag-pobocka-adresa tam má .9em / 1.5 / margin-bottom).
   Ponecháno jako fallback pro případ, že by SEKCE 37 zmizela — nemazat bez revize obou sekcí. */
.pdu-pag-pobocka-adresa {
  font-size: 0.95em;
  color: var(--pdu-barva-text-sekundarni);
  line-height: 1.4;
  margin: 0;
}
/* ✘ celý blok dnes přebit SEKCÍ 37 (800 / 1.08em / zelená !important) — telefon na živé
   kartě je ZELENÝ, ne tmavomodrý. Nemazat bez revize obou sekcí. */
.pdu-pag-pobocka-tel {
  font-size: 1em;
  font-weight: 700;
  color: var(--pdu-barva-tmavomodra);
  text-decoration: none;
}
/* ✘ přebito SEKCÍ 37 (--pdu-barva-zelena-akcent-hover + underline, obojí !important) */
.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;
}

/* ───────────────────────────────────────────────────────────────────────
   SEKCE 15. NÁŘADÍ KARTIČKY
   Karty půjčovny (foto, parametry, popis, CTA) v auto-fit gridu 1–3 sloupce.
   ───────────────────────────────────────────────────────────────────────
   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 16. CAROUSEL
   Horizontální scroll-snap carousel kategorií se šipkami a dots.
   Šipky/dots (.pdu-pag-arrow, .pdu-pag-dots) reusují i další carousely (45, 56).
   ───────────────────────────────────────────────────────────────────────
   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 17. MID CTA
   Tmavý CTA pruh přes celou šířku s fotkou týmu v pozadí (3 breakpointy obrázku).
   ───────────────────────────────────────────────────────────────────────
   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; }
/* MODIFIER .is-foto-ukazka — pruh s fotkou z ukázky stavby plotu místo týmové (2026-08-25, hero /navody/).
   Cesta je RELATIVNÍ vůči tomuhle CSS (../../../ = /user/documents/), ne root-relativní: root-relativní
   url() se resolvuje proti hostu stylu, takže z CDN by spadla na cdn.myshoptet.com/user/... → 404, a
   absolutní live CDN URL (jako u týmové fotky výše) by zase nešla ověřit na TESTu. Relativní cesta
   cestuje se souborem a funguje na obou prostředích. Ztmavení o něco silnější (.6), fotka je slunečná.
   Specificita 0,2,0 přebíjí i breakpointové background-image výše. */
.pdu-pag-cta-mid.is-foto-ukazka {
  background-image: linear-gradient(rgba(25, 25, 50, .6), rgba(25, 25, 50, .6)),
                    url('../../../upload/veletrh/dod/ukazka-stavby-plotu-zliv.webp');
}

/* ── 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 18. KONTAKTNÍ KARTA
   Foto vlevo, text a kontaktní tlačítka (telefon, e-mail) vpravo; na mobilu stack.
   ───────────────────────────────────────────────────────────────────────
   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 19. HODNOCENÍ TLAČÍTKA
   Tři zelená plnoplošná tlačítka (hodnocení, galerie, reference) se šipkou vpravo.
   ───────────────────────────────────────────────────────────────────────
   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 20. HOD KARTY
   Dvě karty vedle sebe s plnoplošným tlačítkem dole — FB modrá / DOD zelená.
   ───────────────────────────────────────────────────────────────────────
   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 21. FINAL TEXT
   Centrovaná poznámka pod čarou na konci stránky, oddělená horní linkou.
   ───────────────────────────────────────────────────────────────────────
   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 22. REFERENCE TROJICE
   Tři zákaznické karty — foto 4:3 nahoře, pod ním citace a meta (město · rok).
   ───────────────────────────────────────────────────────────────────────
   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 23. GREEN TITLE
   Zelený banner s H2 jako výrazný předěl mezi velkými bloky.
   Modifier .is-mini pro menší podsekce.
   ───────────────────────────────────────────────────────────────────────
   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 24. PRUH ŽLUTÝ ANIMOVANÝ
   Pruh přes celou šířku s animovaným diagonálním vzorem a žlutým pravým akcentem.
   ───────────────────────────────────────────────────────────────────────
   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 25. PROVOZNÍ VÝJIMKY A SVÁTKY
   Callout s termíny mimořádné otevírací doby. Sdílí animaci se sekcí 24,
   akcentový border má ale vlevo.
   ───────────────────────────────────────────────────────────────────────
   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: 4.25em; font-weight: 600; color: var(--pdu-barva-text-sekundarni); }
.pdu-pag-vyjimky-cas { color: var(--pdu-barva-zelena-akcent); font-weight: 600; }


/* ───────────────────────────────────────────────────────────────────────
   SEKCE 26. RÁMEČEK ŠEDÝ
   Šedý bordered box s mapou plovoucí vpravo a checklistem v 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 27. TEXT + FOTO
   Dvousloupcový článkový blok text + foto (flex).
   Modifier .is-prohozeno otočí pořadí na desktopu bez změny HTML.
   ───────────────────────────────────────────────────────────────────────
   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; }
/* Odsazeni NAD radou tlacitek (2026-08-25, stejna vada jako .pdu-pro-needs-row):
   rada nemela zadny margin a napr. .pdu-pag-eshop-poznamka nad ni nema spodni
   margin -> text sedel nalepeny na tlacitkach (zebirkove ramy aj.). Sibling
   selektor = prvni potomek zustava tesny; v blokovem rodici se margin slucuje
   s pripadnym margin-bottom odstavce, takze mezera se nezdvojuje. */
* + .pdu-pag-text-foto-akce { margin-top: var(--pdu-odsazeni-m, 1.25em); }
/* 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; } }
/* ── UGC / čtvercové video (obsah ze sociálních sítí) v .pdu-pag-text-foto ──
   Obal videa nativně čtvercového formátu (1:1) — UGC od zákazníků/creatorů.
   Iframe nese data-pdu-ar="1/1", podle kterého obsahová YT facade (foot.js
   SEKCE 18) drží box 1:1 místo defaultních 16:9. Aspect-ratio i na holém
   iframu (stav před JS / bez JS) = nulový CLS při záměně za facade.
   Použití: <div class="pdu-pag-ugc-video"><iframe data-pdu-ar="1/1" …></iframe></div> */
.pdu-pag-ugc-video { width: 100%; max-width: 24em; margin: 0 auto; }
.pdu-pag-ugc-video iframe {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1;
  border: 0; border-radius: var(--pdu-radius-xl); box-shadow: var(--pdu-stin-jemny);
}


/* ───────────────────────────────────────────────────────────────────────
   SEKCE 28. FAQ ACCORDION
   Native <details>/<summary> accordion ve dvou sloupcích, Schema.org/FAQPage friendly.
   Close-others chování řeší script-pages.js.
   ───────────────────────────────────────────────────────────────────────
   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; }
/* Víceblokové odpovědi (odstavce + tabulka + odrážky + tlačítko) potřebují rytmus.
   Sourozenecký selektor = mezera JEN mezi bloky, takže jednoodstavcová odpověď
   (většina nasazených FAQ) vypadá přesně jako dřív. Spodní marginy komponent
   uvnitř se nulují, aby se nesčítaly s touto mezerou.
   Varianta `> * + p` musí být uvedena zvlášť: `.pdu-pag-faq-content p` výše má
   specificitu (0,1,1) a samotný `> * + *` (0,1,0) by ji nepřebil — odstavce by
   zůstaly nalepené a mezeru by dostala jen tabulka. */
.pdu-pag-faq-content > * { margin-bottom: 0; }
.pdu-pag-faq-content > * + *,
.pdu-pag-faq-content > * + p { margin-top: 0.875em; }


/* ───────────────────────────────────────────────────────────────────────
   SEKCE 29. HERO INTRO + VIDEO
   Hlavní hero obsahových stránek: eyebrow, H1, lead a CTA vlevo, YouTube video vpravo.
   Součástí sekce jsou i doplňkové varianty tlačítek (ghost, outline, dark),
   proklikávací mapa poboček (.pdu-mapka2) a tabulka .parametry.
   ───────────────────────────────────────────────────────────────────────
   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: auto; max-width: 100%; /* auto (ne max-content) — dlouhý text v pilulce se pak zalomí místo přetečení */
  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-nadpis` = stejný vzhled na JINÉ úrovni nadpisu než H1.
   Šablona Shoptetu už jedno <h1> (titulek stránky) renderuje sama, takže <h1>
   v paste-html dělá na stránce druhé — viz /poradenstvi/. Nové stránky proto
   používají <h2 class="pdu-pag-intro-nadpis">; vizuálně je to k nerozeznání. */
.pdu-pag-intro h1,
.pdu-pag-intro .pdu-pag-intro-nadpis { 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 ("po celé ČR.") */
.pdu-pag-intro h1 em,
.pdu-pag-intro .pdu-pag-intro-nadpis 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,
.pdu-pag-intro .pdu-pag-intro-nadpis br { display: none; }
.pdu-pag-intro h1 em::before,
.pdu-pag-intro .pdu-pag-intro-nadpis em::before { content: " "; white-space: pre-wrap; }
@media (min-width: 62.5em) {
  .pdu-pag-intro h1 br,
  .pdu-pag-intro .pdu-pag-intro-nadpis br { display: inline; }
  .pdu-pag-intro h1 em::before,
  .pdu-pag-intro .pdu-pag-intro-nadpis 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; }
/* min-width:0 ruší default flex-child min-width:auto (= min-content) — bez toho dlouhý
   CTA label propaguje svou nezalomitelnou šířku do rodiče a přeteče viewport na mobilu
   (root cause z ANALYZY/REHEBO-postdeploy/prazdniny-2026-mobile-bug-2026-07-09.md §4.4).
   Bez vizuálního dopadu tam, kde se tlačítka dnes vejdou. */
.pdu-pag-cta-row > a { text-align: center; min-width: 0; max-width: 100%; }
.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;
}

/* MODIFIER .is-fotocta — pravý sloupec hero = CTA pruh s fotkou v pozadí + tlačítka pod ním
   (2026-08-25, /navody/). Sloupcový flex bez vlastního pozadí/stínu; obsah je .pdu-pag-cta-mid
   (SEKCE 17) a volitelně .pdu-pag-cta-row.is-stack. Titulek/text zmenšené, protože sloupec hera
   je zhruba třetinový proti pruhu přes celou šířku.
   Použití: <div class="pdu-pag-intro-video is-fotocta">
              <section class="pdu-pag-cta-mid is-foto-vlastni" style="--pdu-cta-mid-foto: url('...')">…</section>
              <div class="pdu-pag-cta-row is-stack">…</div></div> */
.pdu-pag-intro-video.is-fotocta {
  background: transparent; border: 0; box-shadow: none;
  aspect-ratio: auto; height: auto;
  display: flex; flex-direction: column; justify-content: flex-start;
  gap: 0.75em; padding: 0;
  overflow: visible; border-radius: 0;
}
/* pruh uvnitř hero sloupce: mezeru drží gap wrapperu, ne vlastní margin */
.pdu-pag-intro-video.is-fotocta > .pdu-pag-cta-mid { margin: 0; padding: 2em 1.25em; }
.pdu-pag-intro-video.is-fotocta .pdu-pag-cta-mid-title { font-size: 1.35em; margin-bottom: 0.5em; }
.pdu-pag-intro-video.is-fotocta .pdu-pag-cta-mid-text  { font-size: 1em; margin-bottom: 1.125em; }


/* ── MAPA POBOČEK — přepínání obrázků (jediná nasazená varianta) ──────
   Zvýraznění = designérsky připravený obrázek per spádová oblast;
   najetí na kraj přepne <img> na obrázek té oblasti (JS SEKCE 7).
   Klikací zóny = průhledné SVG paths vytažené přímo ze zelených
   oblastí obrázků → hover i obrázek sedí na sebe pixelově.
   Mobil: 1. ťuk = náhled + CTA tlačítko, 2. ťuk = navigace.
   ─────────────────────────────────────────────────────────── */
.pdu-mapka2 { position: relative; display: block; width: 100%; max-width: 40em; margin: 0 auto; line-height: 0; }
.pdu-mapka2-img { width: 100%; height: auto; max-height: none !important; display: block; border-radius: 0 !important; }
/* pointer-events:none na SVG root, jinak (s overflow:visible) zachytává kliky
   i nad CTA tlačítkem pod mapou → tlačítko nešlo prokliknout. Paths mají
   pointer-events:all, takže zóny fungují dál. */
.pdu-mapka2-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pdu-kraj2 { cursor: pointer; }
.pdu-kraj2 path { fill: #ffffff; fill-opacity: 0; pointer-events: all; }
.pdu-kraj2:focus-visible { outline: none; }
.pdu-kraj2:focus-visible path { fill-opacity: 0.14; }
/* CTA = standardní pdu tlačítko (třída .pdu-pag-btn-dark v markupu);
   tady jen layout + mezery (nahoře od mapy, dole od eyebrow pillu).
   Název .pdu-mapka2-btn (ne -cta) záměrně — obchází starou cachovanou
   verzi CSS, kde .pdu-mapka2-cta měla background:green !important. */
.pdu-mapka2-btn { display: flex; width: fit-content; max-width: 100%; margin: 0.9em auto 0.9em; line-height: 1.3; }
.pdu-mapka2-btn[hidden] { display: none; }

/* 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 4) */
/* 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 30. FORM (POPTÁVKA)
   Wrapper okolo se-forms.cz embedu: vlevo kontakty a checklist, vpravo nedotčený
   formulář v native SmartEmailing vzhledu.
   ───────────────────────────────────────────────────────────────────────
   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 31. TIMELINE
   Časová osa 6 kroků — na mobilu svislá, od 55em vodorovná s průběžnou linkou.
   ───────────────────────────────────────────────────────────────────────
   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 32. KAT-GRID
   Mřížka devíti čtvercových ikon kategorií bez textových labelů.
   ───────────────────────────────────────────────────────────────────────
   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 33. PROČNAS
   Bílá karta — vlevo checklist výhod se zeleným ✓, vpravo mapa poboček s popiskem.
   ───────────────────────────────────────────────────────────────────────
   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 34. ESHOP
   Tři obrázkové karty s tmavým gradientem a bílým nadpisem, prokliky do e-shopu.
   ───────────────────────────────────────────────────────────────────────
   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 35. BULLETS
   Odrážky se zeleným ✓ místo bulletů, používané uvnitř bloku 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 36. TABULKA
   Tabulka přes celou šířku s tmavomodrou hlavičkou.
   Modifier .is-zvyrazneny označí souhrnný řádek (poslední buňka zeleně).
   ───────────────────────────────────────────────────────────────────────
   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;
}
/* MOBIL — široká tabulka (4+ sloupce) se nevejde do 390px a tlačila celou stránku
   do vodorovného scrollu. Pod 37.5em se z tabulky stane vlastní scrollovací box,
   takže přeteče jen ona, ne stránka.
   :has() gate (20. 8. 2026) — display:block dělá z <table> obyčejný blok, thead/tbody se
   zabalí do anonymní tabulky, která se smrskne na obsah. Rámeček a hlavička pak nedržely
   stejnou šířku (úzká 2sloupcová tabulka: blok 355px, hlavička 233px). Scroll box proto
   dostanou jen tabulky se 4+ sloupci, ostatní zůstávají normální tabulkou na 100 %. */
@media (max-width: 37.49em) {
  .pdu-pag-tabulka:has(thead th:nth-child(4)) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
.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 37. POBOČKA
   Karta prodejny: náhled mapy vlevo, adresa, telefon, otevírací hodiny a odkaz
   na detail vpravo. Na mobilu 2 sloupce karet.
   ───────────────────────────────────────────────────────────────────────
   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>
   ───────────────────────────────────────────────────────────────────────
   ⚠ SDÍLENÝ NÁZEV TŘÍDY — čti před jakoukoliv úpravou (revize 2026-07-28, bod E-6)

   `.pdu-pag-pobocka` je definovaná i v SEKCI 14 „POBOČKY GRID" (wrapper
   `.pdu-pag-pobocky-grid`, poboc**ky**). Tahle sekce je pozdější, takže při
   shodné specificitě (0-1-0) VYHRÁVÁ.

   NEMAZAT, i když to vypadá jako mrtvý kód. Měření 2026-07-29 (záloha obsahu
   e-shopu: pages/articles/categories + renderované /kontakty/):
     - `.pdu-pag-pobocka-grid` (wrapper téhle sekce) = 0 výskytů kdekoliv
     - ale `.pdu-pag-pobocka` = 14 živých karet (`/kontakty/` 7×, `/pujcovna-naradi/` 7×)
       pod wrapperem SEKCE 14 → deklarace odsud tvoří jejich dnešní vzhled:
       border 0 + zelený border-top, --pdu-stin-stredni, hover lift, zelený telefon,
       rozestupy adresy
     - `.pdu-pag-pobocka-hodiny` = 14 výskytů, z toho 7 SAMOSTATNĚ (mimo kartu)
       na detailech poboček: /prodej-plotu-a-pletiv-{plzen-ledce,ceske-budejovice,
       sokolov,tetetice,jedousov,zabrusany}/ a /pobocka-praha/ → styl hodin je
       plošně živý, ne jen v kartě

   Bez užití v obsahu (ale NEODSTRANĚNO — viz níže): `-grid`, `-mapa`, `-info`, `-link`,
   `-badge` + `.is-centrala` (poslední dvě v SEKCI 45). Pozor: živé karty NEMAJÍ
   `-info`, takže `.pdu-pag-pobocka-info h3` (📍 pin) se na nich neuplatní —
   nadpis kreslí SEKCE 14.

   Rozsah důkazu (2026-07-29): 0 výskytů `pdu-pag-pobocka*` i v popisech produktů —
   `ZALOHY\eshop-backup\2026-06-30_1630\{live,test}\products-detail.ndjson`
   (5074 + 3796 produktů). TEST korpus přitom obsahuje 31 různých `pdu-pro-*` tříd,
   takže metoda není slepá. Zbývající mezera: popisy změněné po 2026-06-30 —
   novější záloha (2026-07-27) `products-detail.ndjson` neobsahuje. Proto NEMAZAT
   bez čerstvého exportu popisů.

   Duplicita je ZÁMĚRNĚ ponechána: sloučení by znamenalo přesun pravidel mezi
   sekcemi (změna kaskády) nebo přejmenování třídy — samostatné rozhodnutí.
   Obě sekce se NESMÍ upravovat nezávisle na sobě.
   ─────────────────────────────────────────────────────────────────────── */
/* 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 38. TABS
   Záložkové rozhraní; přepínání řeší script-pages.js SEKCE 3 přes data-tab/data-panel.
   ───────────────────────────────────────────────────────────────────────
   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 SEKCE 3 — 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 39. GALERIE-GRID
   Responzivní čtvercová galerie 2/3/4 sloupce s hover lupou.
   Pozn.: základ .pdu-pag-galerie-* je už v sekci 12; tady navíc 4 sloupce od 62em.
   ───────────────────────────────────────────────────────────────────────
   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 40. OSOBA
   Karta osoby s kulatým portrétem 140×140, rolí, kontakty a vztahy.
   Schema.org/Person friendly.
   ───────────────────────────────────────────────────────────────────────
   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; }
/* jmeno na karte osoby je odkaz na profil OZ - vizualne se nic nemeni, podtrzeni az na hover */
.pdu-pag-osoba-name a { color: inherit; text-decoration: none; }
.pdu-pag-osoba-name a:hover,
.pdu-pag-osoba-name a:focus-visible { text-decoration: underline; }
.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; }

/* obor pod rolí — barevný prstenec ve firemní zelené a žluté.
   V klidu stojí; roztočí se při najetí na CELOU kartu (a při tabu na odkaz v ní).
   Vyžaduje @property (Chrome, Edge, Safari 16.4+, Firefox 128+); kde chybí,
   zůstane statický přechod — degraduje bez chyby. */
@property --pdu-osoba-uhel { syntax: "<angle>"; initial-value: 0deg; inherits: true; }
@keyframes pdu-osoba-obor-otacej { to { --pdu-osoba-uhel: 360deg; } }
.pdu-pag-osoba-obor {
  position: relative; display: inline-flex; padding: 2px;
  border-radius: 999px; isolation: isolate; margin: -1.4em 0 0.875em;
  background: conic-gradient(from var(--pdu-osoba-uhel),
    var(--pdu-barva-zelena-brand), var(--pdu-barva-zluta-warm),
    var(--pdu-barva-zelena-akcent), var(--pdu-barva-zelena-brand));
  transition: transform .2s ease;
}
.pdu-pag-osoba-obor::after {
  content: ""; position: absolute; inset: 0; border-radius: 999px;
  background: inherit; filter: blur(6px); opacity: 0; z-index: -1;
  pointer-events: none; transition: opacity .25s ease;
}
.pdu-pag-osoba:hover .pdu-pag-osoba-obor,
.pdu-pag-osoba:focus-within .pdu-pag-osoba-obor { animation: pdu-osoba-obor-otacej 1.4s linear infinite; transform: translateY(-1px); }
.pdu-pag-osoba:hover .pdu-pag-osoba-obor::after,
.pdu-pag-osoba:focus-within .pdu-pag-osoba-obor::after { opacity: .4; }
.pdu-pag-osoba-obor-text {
  position: relative; z-index: 1; background: var(--pdu-barva-bila);
  border-radius: 999px; padding: 0.2em 0.7em; line-height: 1.5;
  font-size: .78em; color: var(--pdu-barva-tmavomodra); white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .pdu-pag-osoba:hover .pdu-pag-osoba-obor,
  .pdu-pag-osoba:focus-within .pdu-pag-osoba-obor { animation: none; transform: none; }
}

/* ───────────────────────────────────────────────────────────────────────
   SEKCE 40b. HLAVNÍ MAIL SEKCE
   Sdílená adresa pobočky nebo oddělení, zvýrazněná pod info řádky sekce.
   Vznikla při přechodu lidí na osobní adresy (@plotydobry.cz, 1. 9. 2026):
   jednotlivci dostali vlastní mail, a aby se neztratil záchytný kontakt,
   drží ho nově sekce.

   Vědomě BEZ barevné výplně: na stránce je dvanáct sekcí a dvanáct zelených
   ploch pod sebou by ji rozsvítilo. Signál nese jen dvoupixelový proužek.
   Proto taky žádný border-radius - zaoblení dává smysl jen u plného rámečku.
   ───────────────────────────────────────────────────────────────────────
   Telefon pobočky visí pod adresou uvnitř téhož bloku - dřív stál nad ním
   samostatně a po přesunu mailu zůstával viset osamocený.

   Markup (obal .pdu-pag-sekce-mail-adresy unese i víc adres vedle sebe,
   to používá Expediční oddělení - objednávky, rozvozy, reklamace;
   .pdu-pag-sekce-mail-tel je nepovinný, oddělení bez linky ho nemají):
     <div class="pdu-pag-sekce-mail">
       <span class="pdu-pag-sekce-mail-popis">Hlavní kontakt pobočky</span>
       <span class="pdu-pag-sekce-mail-adresy">
         <a class="pdu-pag-sekce-mail-adresa" href="mailto:cb@plotydobry.cz">cb@plotydobry.cz</a>
       </span>
       <span class="pdu-pag-sekce-mail-tel"><a href="tel:+420731634033">+420&nbsp;731&nbsp;634&nbsp;033</a></span>
     </div>
   ─────────────────────────────────────────────────────────────────────── */
.pdu-pag-sekce-mail {
  border-left: 2px solid var(--pdu-barva-zelena-brand);
  border-radius: 0;
  padding: 0.125em 0 0.125em 0.75em;
  margin: 0.75em 0 1.25em;
}
.pdu-pag-sekce-mail-popis {
  display: block; font-size: .8em; line-height: 1.5;
  color: var(--pdu-barva-text-sedy);
}
.pdu-pag-sekce-mail-adresy {
  display: flex; flex-wrap: wrap; gap: 0 1.25em;
}
.pdu-pag-sekce-mail-adresa {
  font-size: 1.1em; font-weight: 800; line-height: 1.35;
  color: var(--pdu-barva-tmavomodra) !important;
  text-decoration: none !important; overflow-wrap: anywhere;
}
.pdu-pag-sekce-mail-adresa:hover,
.pdu-pag-sekce-mail-adresa:focus {
  color: var(--pdu-barva-zelena-akcent-hover) !important;
  text-decoration: underline !important;
}
.pdu-pag-sekce-mail-tel {
  display: block; margin-top: 0.15em;
  font-size: 1em; font-weight: 800; line-height: 1.4;
}
.pdu-pag-sekce-mail-tel a {
  color: var(--pdu-barva-tmavomodra) !important; text-decoration: none !important;
}
.pdu-pag-sekce-mail-tel a:hover,
.pdu-pag-sekce-mail-tel a:focus {
  color: var(--pdu-barva-zelena-akcent-hover) !important;
  text-decoration: underline !important;
}


/* ───────────────────────────────────────────────────────────────────────
   SEKCE 41. ZÁLOŽKY
   Plnoplošná tlačítka pro skok na kotvy; .is-light = světlá sekundární varianta.
   ───────────────────────────────────────────────────────────────────────
   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 42. TOOLTIP
   Pure-CSS „?“ indikátor s bublinou na hover i focus-within, bez JS.
   ───────────────────────────────────────────────────────────────────────
   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 43. INFO LINE
   Řádka ikona + text nebo odkaz pro hlavičky oddělení (adresa, e-mail, telefon).
   ───────────────────────────────────────────────────────────────────────
   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@plotydobry.cz">montaze@plotydobry.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 44. ODD-HEADER
   Wrapper hlavičky oddělení — H2 plus info-line řádky před gridem osob.
   ───────────────────────────────────────────────────────────────────────
   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 45. OSOBY CAROUSEL
   Horizontální scroll varianta gridu osob — peek pattern 85/50/33 % a spin animace.
   ───────────────────────────────────────────────────────────────────────
   Popis:
   - Paralela k `.pdu-pag-osoby` (sekce 40 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 16 (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 40) 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)
   ⚠ Třetí místo, kde se sahá na `.pdu-pag-pobocka` — hlavní definice jsou SEKCE 14 a 37
   (viz varování tam, revize 2026-07-28 bod E-6). Obojí níže je v obsahu e-shopu bez užití
   (0 výskytů `is-centrala` i `-badge`, měřeno 2026-07-29), ponecháno beze změny:
   nulový výskyt v zálohách není důkaz (popisy produktů v nich nejsou).
   Pozn.: `is-centrala` by dnes stejně nefungovala podle záměru — SEKCE 37 nastavuje
   `border: 0`, takže se projeví jen zúžením zeleného border-top na 0.125em. */
.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 46. ÚDAJE KARTY
   Karty doplňujících údajů (fakturační, platební, DSA) se zeleným horním borderem.
   Hodnoty se píší jako .pdu-pag-udaj-karta-list (UL) — <dl> varianta byla zrušena.
   ───────────────────────────────────────────────────────────────────────
   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);
}
/* 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); }

.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 47. ANCHOR-NAV
   Float-right stack kotevních tlačítek nad úvodním textem, pod 37.5em full-width.
   Zatím jen v mockupu průvodce výběrem, na živých stránkách nenasazeno.
   ───────────────────────────────────────────────────────────────────────
   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 48. VIDEA-GRID
   Dvousloupcová mřížka YouTube embedů v poměru 16:9, na mobilu full-width.
   ───────────────────────────────────────────────────────────────────────
   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 49. DOPIS-GRID
   Karty referenčních dopisů — náhled do lightboxu plus <details> s přepisem.
   ───────────────────────────────────────────────────────────────────────
   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 50. DOPIS MODAL
   Přepis dopisu jako native <dialog>; JS SEKCE 4 hijackne klik na <summary>.
   ───────────────────────────────────────────────────────────────────────
   Native HTML <dialog> driven JS SEKCE 4 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 51. CITACE-GRID
   Dvousloupcové pull-quotes z e-mailových referencí (autor, datum, citace).
   ───────────────────────────────────────────────────────────────────────
   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 52. FIRMY.CZ WIDGET
   Centrovaný iframe se třemi nejnovějšími recenzemi, max 40em, aspect 640/420.
   ───────────────────────────────────────────────────────────────────────
   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 53. NÁVOD-GRID
   Karty návodů na montáž (ikona, nadpis, odrážky, tlačítko dole), 1/2/3 sloupce.
   ───────────────────────────────────────────────────────────────────────
   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;
}
/* Modifier `.is-foto` — místo produktového výřezu na bílé je ve slotu FOTKA
   z reálné montáže (Lucka 2026-07-31). Roztažená přes celou šířku karty jako
   obrázek nahoře (poměr 4:3, stejný jako mají zdrojové fotky), v zaobleném
   rámečku s jemným okrajem — malý čtvereček uprostřed karty působil ztraceně. */
.pdu-pag-navod-karta-ico.is-foto {
  width: 100%; height: auto; aspect-ratio: 4 / 3;
  margin: 0 0 0.75em;
  border-radius: var(--pdu-radius-m);
  border: 1px solid var(--pdu-barva-okraj-jemny);
  background: var(--pdu-barva-sede-svetla);
  overflow: hidden;
}
.pdu-pag-navod-karta-ico.is-foto img { object-fit: cover; }
.pdu-pag-navod-karta:hover .pdu-pag-navod-karta-ico.is-foto { border-color: var(--pdu-barva-zelena-akcent); }
/* `.is-produkt` — v mřížce s fotkami z montáže se občas objeví karta, ke které
   reálný záběr neexistuje a má produktový výřez na bílé. Drží stejně velký rámeček
   (jinak by v řadě plavala malá ikonka), ale výřez se do něj vejde celý. */
.pdu-pag-navod-karta-ico.is-foto.is-produkt { background: var(--pdu-barva-bila); }
.pdu-pag-navod-karta-ico.is-foto.is-produkt img {
  object-fit: contain; padding: 0.75em; box-sizing: border-box;
}
.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 54. REGISTRACE-GRID
   Dvousloupcový embed registračních formulářů SmartEmailing per pobočka.
   ───────────────────────────────────────────────────────────────────────
   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 55. HISTORIE-GRID
   Karty minulých termínů per pobočka, zarovnané k hornímu okraji (align-self:start).
   ───────────────────────────────────────────────────────────────────────
   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 56. VIDEA / DOPIS / CITACE CAROUSELS
   Tři carousely sdílející stejný scroll-snap pattern jako osoby carousel;
   liší se jen flex-basis breakpointy a třídou položky.
   ───────────────────────────────────────────────────────────────────────
   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 SEKCE 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 57. REDUCED MOTION
   A11y override — při OS preferenci „Reduce motion“ vypne transitions, transformy
   a animace napříč všemi sekcemi.
   ───────────────────────────────────────────────────────────────────────
   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, hotspot 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, .pdu-pag-hotspot-dot { animation: none; transition: none; }
  .pdu-pag-hotspot:hover .pdu-pag-hotspot-dot,
  .pdu-pag-hotspot.is-open .pdu-pag-hotspot-dot { transform: none; }
}


/* ───────────────────────────────────────────────────────────────────────
   SEKCE 58. VYHLEDÁVÁNÍ OSOB
   Search bar nad kartami osob; JS SEKCE 5 klonuje shodné .pdu-pag-osoba do
   separátního výsledkového gridu, carousely zůstávají nedotčené.
   ───────────────────────────────────────────────────────────────────────
   Popis:
   - Search bar (#pdu-osb-input) + výsledková mřížka (#pdu-osb-grid),
     do které JS (SEKCE 5) 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 40); 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 SEKCE 5) */
.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 59. KLAD / ZÁPOR
   Kontrastní dvojice odstavců „co lze × co nelze“ (reklamace, vrácení, podmínky).
   ───────────────────────────────────────────────────────────────────────
   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 60. FAQ SEARCH
   Live filtr otázek přímo v sekcích plus topic pills; JS SEKCE 6.
   Bez JS zůstává vše viditelné a accordion funguje normálně.
   ───────────────────────────────────────────────────────────────────────
   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 SEKCE 6 ve script-pages.js.
   - Sdílí vzhled search baru + štítků se sekcí 58 (.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 SEKCE 6) */
.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 (SEKCE 6) 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 61. POBOČKY (DETAIL PRODEJEN)
   Komponenty detailu prodejny (z Lohrových stránek) sjednocené do pdu-pag-*.
   ───────────────────────────────────────────────────────────────────────
   POZOR (nález 2026-07-29, NEOPRAVENO — oprava by byla funkční zásah):
   řádek s cestou níž obsahuje sekvenci "*" + "/", která PŘEDČASNĚ ukončuje
   tento komentář. Zbytek hlavičky pak spadne do prologu následujícího
   pravidla → selektor `.pdu-pag-page .pdu-pag-vyhody` je neplatný a v
   prohlížeči se NEAPLIKUJE (stav je stejný před i po úklidu). Konec
   hlavičky proto zůstává bajtově beze změny; oprava = samostatné rozhodnutí.
   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 62. SLUŽBY NA POBOČCE
   Čtyři ikonové CTA karty dedikované pro stránky poboček.
   ───────────────────────────────────────────────────────────────────────
   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; }

/* ───────────────────────────────────────────────────────────────────────
   SEKCE 63. SEARCHBAR FILTR
   Client-side filtr karet na /navody/ — vizuál reuse .pdu-osb-* ze sekce 58,
   tady jen utility filtru a prázdný stav.
   ───────────────────────────────────────────────────────────────────────
   Vizuál = REUSE .pdu-osb-* z /kontakty/ (SEKCE 58: velký label, zelený
   input, clear ×, hint, intent chips .pdu-osb-tag). Tady jen utility
   filtru + prázdný stav.
   HTML (navody.html):
     <section class="pdu-osb" id="pduNavodySearch">
       <label class="pdu-osb-label" for="pduNavodySearchInput">Najděte si návod</label>
       <div class="pdu-osb-bar"><input id="pduNavodySearchInput" class="pdu-osb-input" type="search" …/>
         <button class="pdu-osb-clear" type="button" hidden>×</button></div>
       <p class="pdu-osb-hint" aria-live="polite">&nbsp;</p>
       <div class="pdu-osb-tags"><button class="pdu-osb-tag" type="button">svah</button>…</div>
       <p class="pdu-pag-search-empty">Nic jsme nenašli — …</p>
     </section>
   - JS = script-pages.js SEKCE 9 (filtruje .pdu-pag-navod-karta + a.pdu-pag-zalozka,
     skrývá přes .pdu-pag-search-hide, prázdný stav = .is-empty na wrapperu).
   ─────────────────────────────────────────────────────────────────────── */
.pdu-pag-search-empty {
  display: none;
  margin: 0.6em 0 0;
  padding: 0.8em 1.1em;
  background: var(--pdu-barva-zluta-svetla);
  border: 1px solid var(--pdu-barva-okraj-jemny);
  border-radius: var(--pdu-radius-card);
  color: var(--pdu-barva-tekst-zakladni);
}
.pdu-osb.is-empty .pdu-pag-search-empty { display: block; }
.pdu-pag-search-hide { display: none !important; }


/* ───────────────────────────────────────────────────────────────────────
   SEKCE 64. HOTSPOTY NAD GRAFIKOU (pulzující kolečka)
   Interaktivní body nad schématem plotu — klik/hover otevře bublinu
   s názvem dílu, štítkem (nezbytné / navíc / nepotřebujete) a proklikem
   do e-shopu. Zadání Lucka 2026-07-30 („pulzující kolečka u grafiky
   s pletivem a příslušenstvím — pro rychlý přehled").
   ───────────────────────────────────────────────────────────────────────
   Popis:
   - Pozice bodů se NEPÍŠÍ do CSS ani inline — nesou je `data-x` / `data-y`
     (procenta šířky/výšky obrázku) a dosadí je JS (script-pages.js SEKCE 11).
     Důvod: souřadnice jsou obsah vázaný na konkrétní grafiku, ne vizuální
     vzor; posun bodu tak nevyžaduje redeploy CSS.
   - Bez JS se body vůbec nezobrazí (`.is-ready` přidává až JS) — stránka
     zůstane čitelná, protože pod grafikou je vždy i textová legenda.
   - Bublina: na desktopu plovoucí nad bodem, pod 47.5em ukotvená na spodek
     rámu přes celou šířku (na malé grafice by plovoucí byla nečitelná).
   - Reduced motion: pulz vypnut v SEKCI 57.

   - Mobil: `.pdu-pag-hotspots` je scrollovací rám a `-plocha` si drží minimální
     šířku, takže se body nesesypou na sebe — grafika se posouvá do stran.
     Proto je `-plocha` samostatný element: kdyby byly body pozicované vůči
     scrollovacímu rámu, procenta by se počítala z jeho (užší) šířky a body
     by se rozešly s obrázkem.

   HTML:
     <div class="pdu-pag-hotspots">
       <div class="pdu-pag-hotspots-plocha">
         <img src="…" alt="…" loading="lazy" />
         <span class="pdu-pag-hotspot is-navic" data-x="9.4" data-y="10.5">
           <button class="pdu-pag-hotspot-dot" type="button"
                   aria-expanded="false" aria-label="Sloupky">1</button>
           <span class="pdu-pag-hotspot-pop">
             <span class="pdu-pag-hotspot-nazev">Sloupky</span>
             <span class="pdu-pag-hotspot-badge">Nezbytné</span>
             <span class="pdu-pag-hotspot-text">Popis dílu…</span>
             <a class="pdu-pag-hotspot-cta" href="/kategorie/">Zobrazit v e-shopu →</a>
           </span>
         </span>
         …
       </div>
     </div>
   ─────────────────────────────────────────────────────────────────────── */
.pdu-pag-hotspots { margin: 0 auto 1.25em; line-height: 0; }
.pdu-pag-hotspots-plocha { position: relative; container-type: inline-size; }
.pdu-pag-hotspots img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--pdu-radius-card);
}
/* Mobil — grafika se NEscrolluje (posuvný rám vypadal jako useknutý obrázek).
   Body se zmenší vizuálně, ale klikací plocha se zvětší neviditelným ::after
   (44px dotykový cíl); těsné sousedy řeší z-index při otevření. */
@media (max-width: 47.5em) {
  .pdu-pag-hotspot-dot { position: relative; }
  .pdu-pag-hotspot-dot::after {
    content: ""; position: absolute; inset: -0.8em;
  }
}

/* Bod — skrytý dokud JS nedosadí souřadnice (jinak by se všechny slily v rohu) */
.pdu-pag-hotspot {
  display: none;
  position: absolute;
  z-index: 2;
  margin: 0; padding: 0;
  border: 0; background: none;
  cursor: pointer;
  line-height: 1;
  transform: translate(-50%, -50%);
}
.pdu-pag-hotspots.is-ready .pdu-pag-hotspot { display: block; }
/* Otevřený bod NAD sourozenci — pop (z-index 3) žije ve stacking contextu svého
   wrapperu (z-index 2), takže bez zvednutí wrapperu ho pozdější tečky v DOM překreslí. */
.pdu-pag-hotspot.is-open { z-index: 4; }

/* Bod je <button> UVNITŘ wrapperu (ne wrapper sám) — do bubliny patří skutečný
   odkaz <a>, a ten nesmí být vnořený v <button> (nevalidní HTML, proklik nefunguje). */
.pdu-pag-hotspot-dot {
  display: flex; align-items: center; justify-content: center;
  width: 1.75em; height: 1.75em;
  margin: 0; padding: 0; border: 0;
  border-radius: 50%;
  background: var(--pdu-barva-zelena-akcent);
  color: var(--pdu-barva-bila);
  font-family: inherit; font-size: 0.8em; font-weight: 800; line-height: 1;
  cursor: pointer;
  box-shadow: 0 0 0 0.25em rgba(0, 180, 110, .25), var(--pdu-stin-jemny);
  animation: pduPagHotspotPulse 2.4s infinite;
  transition: transform .15s ease-in, background-color .15s ease-in;
}
.pdu-pag-hotspot-dot:focus-visible { outline: 2px solid var(--pdu-barva-tmavomodra); outline-offset: 4px; }
.pdu-pag-hotspot:hover .pdu-pag-hotspot-dot,
.pdu-pag-hotspot.is-open .pdu-pag-hotspot-dot { transform: scale(1.15); animation: none; }
@keyframes pduPagHotspotPulse { 50% { box-shadow: 0 0 0 0.75em rgba(0, 180, 110, 0), var(--pdu-stin-jemny); } }

/* Barevné varianty dle kategorie dílu */
.pdu-pag-hotspot.is-navic .pdu-pag-hotspot-dot {
  background: var(--pdu-barva-ocelova-modra);
  box-shadow: 0 0 0 0.25em rgba(31, 78, 121, .22), var(--pdu-stin-jemny);
  animation: none;
}
.pdu-pag-hotspot.is-nepotreba .pdu-pag-hotspot-dot {
  background: var(--pdu-barva-sede-stredni);
  box-shadow: 0 0 0 0.25em rgba(0, 0, 0, .12), var(--pdu-stin-jemny);
  animation: none;
}

/* Bublina */
.pdu-pag-hotspot-pop {
  display: none;
  position: absolute; z-index: 3;
  left: 50%; bottom: calc(100% + 0.75em);
  transform: translateX(-50%);
  width: 15em; max-width: 60vw;
  padding: 0.75em 0.875em;
  background: var(--pdu-barva-bila);
  border: 1px solid var(--pdu-barva-okraj-jemny);
  border-radius: var(--pdu-radius-card);
  box-shadow: var(--pdu-stin-stredni);
  text-align: left;
  line-height: 1.45;
  white-space: normal;
  cursor: default;
}
.pdu-pag-hotspot.is-open .pdu-pag-hotspot-pop { display: block; }
/* Neviditelný můstek přes mezeru mezi bodem a bublinou — bez něj by přejezd
   kurzoru na bublinu (kvůli CTA prokliku) spustil mouseleave a bublinu zavřel. */
.pdu-pag-hotspot-pop::after {
  content: ""; position: absolute;
  left: 0; right: 0; top: 100%; height: 0.9em;
}
/* Směrové modifikátory pro body u okraje grafiky — bez nich bublina přeteče
   mimo rám (body v horní řadě dílů, body u pravého/levého kraje).
   `.is-pop-dolu` = otevřít pod bodem · `.is-pop-vlevo` / `.is-pop-vpravo`
   = zarovnat bublinu k bodu místo centrování. */
.pdu-pag-hotspot.is-pop-dolu .pdu-pag-hotspot-pop { bottom: auto; top: calc(100% + 0.9em); }
.pdu-pag-hotspot.is-pop-dolu .pdu-pag-hotspot-pop::after { top: auto; bottom: 100%; }
.pdu-pag-hotspot.is-pop-vlevo .pdu-pag-hotspot-pop { left: auto; right: -0.875em; transform: none; }
.pdu-pag-hotspot.is-pop-vpravo .pdu-pag-hotspot-pop { left: -0.875em; right: auto; transform: none; }
.pdu-pag-hotspot-nazev {
  display: block;
  font-size: 0.95em; font-weight: 800;
  color: var(--pdu-barva-tmavomodra);
}
.pdu-pag-hotspot-badge {
  display: inline-block;
  margin: 0.25em 0 0.4em;
  padding: 0.1em 0.5em;
  border-radius: var(--pdu-radius-s);
  background: var(--pdu-barva-zelena-svetla-3);
  color: var(--pdu-barva-zelena-akcent);
  font-size: 0.72em; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
}
.pdu-pag-hotspot.is-navic .pdu-pag-hotspot-badge { background: var(--pdu-barva-sede-svetla); color: var(--pdu-barva-ocelova-modra); }
.pdu-pag-hotspot.is-nepotreba .pdu-pag-hotspot-badge { background: var(--pdu-barva-sede-svetla); color: var(--pdu-barva-text-sedy); }
.pdu-pag-hotspot-text {
  display: block;
  font-size: 0.82em; font-weight: 400;
  color: var(--pdu-barva-text-sekundarni);
}
/* Skutečný odkaz do e-shopu — kvůli němu je bod <button> uvnitř wrapperu (viz výše).
   Zvětšený klikací cíl (padding), ať se dá trefit i na dotyku. */
a.pdu-pag-hotspot-cta {
  display: block; margin-top: 0.45em; padding: 0.25em 0;
  font-size: 0.82em; font-weight: 700;
  color: var(--pdu-barva-zelena-akcent);
  text-decoration: none;
}
a.pdu-pag-hotspot-cta:hover,
a.pdu-pag-hotspot-cta:focus-visible { text-decoration: underline; }
/* Druhý, slabší odkaz v bublině — do průvodce „Jak vybrat" */
a.pdu-pag-hotspot-jv {
  display: block; margin-top: 0.35em;
  font-size: 0.78em; font-weight: 600;
  color: var(--pdu-barva-ocelova-modra);
  text-decoration: underline; text-underline-offset: 0.15em;
}

/* ── Foto-varianta bodu (`.is-foto` na wrapperu): místo číslované tečky
   kolečko s produktovou fotkou a štítkem pod ním. Vlastní obrázky MUSÍ mít
   selektor vnořený přes `.pdu-pag-hotspots`, protože pravidlo pro podkladovou
   grafiku (`.pdu-pag-hotspots img`) je specifičtější než holá třída a přebilo
   by šířku i rádius. ── */
.pdu-pag-hotspot.is-foto .pdu-pag-hotspot-dot {
  width: 6.4em; height: 6.4em;
  padding: 0;
  background: var(--pdu-barva-bila);
  border: 0.16em solid var(--pdu-barva-zelena-akcent);
  overflow: hidden;
  box-shadow: 0 0.19em 0.88em rgba(0, 0, 0, .22);
  animation: none;
}
/* Kolecko se sazi k sirce grafiky, ne k font-size: stejna grafika se na strance
   vejde do 800 px a v zalozce treba do 1000 px, a pevne em by v uzsim sloupci
   ukrojilo o ctvrtinu vic mista (stitky se pak dotykaly). em zustava jako zaloha
   pro prohlizece bez container queries. */
/* Vnořeno přes `.pdu-pag-hotspots` schválně: stejný soubor se na detailu produktu
   načítá pod několika `?v` klíči (hlavička + cizí dkLAB záložky) a v kaskádě umí
   vyhrát starší kopie. Vyšší specificita drží velikost bez ohledu na pořadí. */
@supports (width: 1cqw) {
  .pdu-pag-hotspots .pdu-pag-hotspot.is-foto .pdu-pag-hotspot-dot { width: 9.5cqw; height: 9.5cqw; }
}
.pdu-pag-hotspot.is-foto.is-navic .pdu-pag-hotspot-dot { border-color: var(--pdu-barva-ocelova-modra); }
.pdu-pag-hotspot.is-foto.is-nepotreba .pdu-pag-hotspot-dot { border-color: var(--pdu-barva-sede-stredni); }
.pdu-pag-hotspots .pdu-pag-hotspot.is-foto .pdu-pag-hotspot-dot img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.pdu-pag-hotspot-stitek {
  position: absolute; top: calc(100% + 0.35em); left: 50%;
  transform: translateX(-50%);
  padding: 0.24em 0.7em;
  border-radius: 6.25em;
  background: var(--pdu-barva-zelena-akcent);
  color: var(--pdu-barva-bila);
  font-size: 0.72em; font-weight: 700; line-height: 1.5;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 0.06em 0.31em rgba(0, 0, 0, .25);
}
.pdu-pag-hotspot.is-navic .pdu-pag-hotspot-stitek { background: var(--pdu-barva-ocelova-modra); }
.pdu-pag-hotspot.is-nepotreba .pdu-pag-hotspot-stitek { background: var(--pdu-barva-sede-stredni); }
/* Fotka použití v hlavičce bubliny — vytažená přes padding do krajů karty */
.pdu-pag-hotspots .pdu-pag-hotspot-foto {
  display: block;
  /* Bez `max-width: none` fotku ořízne globální `img { max-width: 100% }` na šířku
     obsahu bubliny — vytáhne se pak jen doleva a vpravo zůstane bílý pruh. */
  width: calc(100% + 1.75em);
  max-width: none;
  height: auto;
  margin: -0.75em -0.875em 0.6em;
  border-radius: var(--pdu-radius-card) var(--pdu-radius-card) 0 0;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* Mobil: bublina zůstává ukotvená u bodu jako na desktopu, jen užší.
   POZOR: position:fixed tu použít nejde — wrapper bodu má transform,
   takže fixed by se ukotvil na wrapper (~1em) místo na viewport a bublina
   se zhroutí do sloupku o šířce nejdelšího slova. Krajní body drží uvnitř
   viewportu směrové `.is-pop-*` modifikátory. */
@media (max-width: 47.5em) {
  .pdu-pag-hotspot-dot { width: 1.5em; height: 1.5em; font-size: 0.72em; }
  .pdu-pag-hotspot-pop { width: 13em; max-width: 62vw; }
  /* Foto-kolečka se na úzkém displeji zmenší, jinak by zakryla grafiku
     (na mobilu vychází grafika ~340 px, kolečko 6,4em by z ní ukrojilo pětinu) */
  .pdu-pag-hotspot.is-foto .pdu-pag-hotspot-dot { width: 3.1em; height: 3.1em; font-size: 1em; }
  /* Podíl je stejný jako na desktopu (9,5 %) — řeší to pravidlo výše.
     Dotykový cíl drží neviditelné rozšíření `-dot::after`. */
  /* Štítky se na mobilu nevejdou vedle sebe (dlouhé názvy typu „Držák podhrabové
     desky") a překrývaly by se. Název dílu je v kartě, která se otevře klepnutím. */
  .pdu-pag-hotspots .pdu-pag-hotspot-stitek { display: none; }
}

/* Legenda pod grafikou — vždy viditelná (i bez JS), čísla odpovídají bodům */
.pdu-pag-hotspot-legenda {
  display: grid; gap: 0.4em 1.25em;
  grid-template-columns: 1fr;
  margin: 0 0 1.5em; padding: 0;
  list-style: none;
  line-height: 1.5;
}
@media (min-width: 37.5em) { .pdu-pag-hotspot-legenda { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em) { .pdu-pag-hotspot-legenda { grid-template-columns: repeat(3, 1fr); } }
.pdu-pag-hotspot-legenda li {
  position: relative;
  padding-left: 2em;
  font-size: 0.92em;
  color: var(--pdu-barva-text-sekundarni);
  counter-increment: pduHotspot;
}
.pdu-pag-hotspot-legenda li::before {
  content: counter(pduHotspot);
  position: absolute; left: 0; top: 0.1em;
  display: flex; align-items: center; justify-content: center;
  width: 1.5em; height: 1.5em;
  border-radius: 50%;
  background: var(--pdu-barva-zelena-akcent);
  color: var(--pdu-barva-bila);
  font-size: 0.78em; font-weight: 800;
}
.pdu-pag-hotspot-legenda { counter-reset: pduHotspot; }
.pdu-pag-hotspot-legenda li.is-navic::before { background: var(--pdu-barva-ocelova-modra); }
.pdu-pag-hotspot-legenda li.is-nepotreba::before { background: var(--pdu-barva-sede-stredni); }

/* ── Kotvy: odsazení pod sticky hlavičku (~102 px). Bez toho skok na #kotvu
   schová cíl za hlavičku — týkalo se všech kotev v obsahu (#pobocky, #osoby, …).
   8,5em ≈ 126 px → cíl dosedne ~36 px pod hlavičku. 7,5em dávalo jen 21 px,
   což působilo nalepeně (zpětná vazba 2026-08-14). ── */
.pdu-pag-page [id] { scroll-margin-top: 8.5em; }


/* ───────────────────────────────────────────────────────────────────────
   SEKCE 65. DĚKOVAČKY (.pdu-dek-*)
   Sjednocení děkovacích stránek (2026-08-19). Dřív každá stránka nesla
   vlastní kopii ~6,5 kB tohoto CSS v page-local <style>; sem se to slučuje
   jednou. Stránky si nechávají @import kvůli náhledu ve WYSIWYG editoru.
   ───────────────────────────────────────────────────────────────────────
   Kde se používá: /poptavka-dekujeme/ (2679), /poptavka-plotu-dekujeme/ (785),
   /poptavka-dekujeme-vam/ (6568), /kariera-dekujeme/ (1600),
   /dsa-dekujeme/ (6571). Objednávková děkovačka je jinde
   (style-sections.css SEKCE 14, nativní šablona Shoptetu).

   ⚠ TLAČÍTKA ZDE NEJSOU. Původní .pdu-dek-btn/-primary/-ghost měly vlastní
   hover (ztmavení zelené) a jinou velikost než zbytek webu. Markup proto
   používá house CTA .pdu-pag-btn-primary / -outline (SEKCE 4 a 29).

   ⚠ ROZMĚRY JSOU V px, NE v em. Je to 1:1 port schváleného vzhledu; obsahová
   část Shoptetu má základ písma 14 px, takže přepočet px/16 zmenšil celou
   komponentu na 87,5 % (kruh 84→74 px, titulek 40→35 px). Barvy jsou tokeny,
   rozměry zůstávají v px kvůli věrnosti. Ověřeno srovnáním computed styles
   proti původní LIVE verzi.

   Struktura:
     .pdu-dek-root > .pdu-dek-stage > .pdu-dek-hero + .pdu-dek-callbar
     hero:    .pdu-dek-check + .pdu-dek-eyebrow (s .pdu-dek-dot) +
              .pdu-dek-title + .pdu-dek-lede + .pdu-dek-actions (house CTA)
     callbar: zelený pruh, .pdu-dek-num (telefon) nebo .pdu-dek-person (B2B)
   ─────────────────────────────────────────────────────────────────────── */
.pdu-dek-root {
  /* odstíny bez tokenu v global.css: -darker je text na světle zeleném pillu
     (na #E8F8F0 dává kontrast ~4,8:1; tokenová -akcent-hover by spadla na
     ~3,6:1, tedy pod AA), -soft-2 je okraj téhož pillu */
  --dek-green-darker: #007a48;
  --dek-green-soft-2: #C8ECDA;
  box-sizing: border-box;
  font-family: inherit;
  color: var(--pdu-barva-tmavomodra);
}
.pdu-dek-root *, .pdu-dek-root *::before, .pdu-dek-root *::after { box-sizing: border-box; }

.pdu-dek-stage {
  max-width: 980px;
  margin: 0 auto;
  padding: 48px 24px;
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}

/* HERO karta */
.pdu-dek-hero {
  background: var(--pdu-barva-bila);
  border: 1px solid var(--pdu-barva-okraj-jemny);
  border-radius: 14px;
  padding: 48px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 32px;
  position: relative;
  overflow: hidden;
}
.pdu-dek-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 100% at 100% 0%, rgba(0, 180, 110, .08), transparent 60%);
  pointer-events: none;
}
.pdu-dek-hero > * { position: relative; z-index: 1; }

.pdu-dek-check {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background-color: var(--pdu-barva-zelena-akcent);
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 42px 42px;
  color: var(--pdu-barva-bila);
  box-shadow:
    0 10px 26px -8px rgba(0, 180, 110, .65),
    0 0 0 10px rgba(0, 180, 110, .10);
}

.pdu-dek-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dek-green-darker);
  background: var(--pdu-barva-zelena-svetla-3);
  border: 1px solid var(--dek-green-soft-2);
  padding: 6px 12px;
  border-radius: 999px;
}
.pdu-dek-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pdu-barva-zelena-akcent);
  animation: pduDekPulse 2.2s ease-in-out infinite;
}
@keyframes pduDekPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 180, 110, .45); }
  50%      { box-shadow: 0 0 0 6px rgba(0, 180, 110, 0); }
}

.pdu-dek-title {
  margin: 14px 0 12px;
  font-weight: 800;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--pdu-barva-tmavomodra);
  text-wrap: balance;
}
.pdu-dek-lede {
  margin: 0;
  color: var(--pdu-barva-text-sekundarni);
  font-size: 17px;
  line-height: 1.55;
  max-width: 56ch;
}
.pdu-dek-lede strong {
  color: var(--dek-green-darker);
  background: linear-gradient(transparent 60%, var(--pdu-barva-zelena-svetla-3) 60%);
  padding: 0 3px;
  font-weight: 700;
}

.pdu-dek-actions {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
/* CALLBAR */
.pdu-dek-callbar {
  background: var(--pdu-barva-zelena-akcent);
  border-radius: 14px;
  padding: 28px 36px;
  color: var(--pdu-barva-bila);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
}
.pdu-dek-callbar h3 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--pdu-barva-bila);
  line-height: 1.2;
}
.pdu-dek-callbar p {
  margin: 0;
  opacity: .9;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--pdu-barva-bila);
}
.pdu-dek-callbar p strong { color: var(--pdu-barva-bila); font-weight: 700; }

.pdu-dek-num {
  background: rgba(255, 255, 255, .15);
  border: 1px solid rgba(255, 255, 255, .3);
  color: var(--pdu-barva-bila);
  padding: 14px 22px;
  border-radius: 10px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  transition: background .15s ease, transform .15s ease;
}
.pdu-dek-num:hover { background: rgba(255, 255, 255, .24); transform: translateY(-1px); color: var(--pdu-barva-bila); }
.pdu-dek-num svg { width: 22px; height: 22px; flex-shrink: 0; fill: none; }
.pdu-dek-num svg path { stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; fill: none; }
.pdu-dek-num small {
  display: block;
  font-size: 11px;
  font-weight: 600;
  opacity: .8;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pdu-dek-num strong { display: block; font-weight: 800; font-size: 22px; line-height: 1.2; }

/* Responzivní */
@media (max-width: 980px) {
  .pdu-dek-stage { padding: 24px 16px; gap: 16px; }
  .pdu-dek-hero { grid-template-columns: 1fr; gap: 20px; padding: 28px; }
  .pdu-dek-check { width: 64px; height: 64px; background-size: 32px 32px; }
  .pdu-dek-callbar { grid-template-columns: 1fr; padding: 24px; }
  .pdu-dek-num { justify-content: center; }
}
@media (max-width: 520px) {
  .pdu-dek-hero { padding: 22px; }
  .pdu-dek-actions }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .pdu-dek-dot { animation: none; }
  }

/* osoba v callbaru (B2B varianta 6568 — obchodní ředitel) */
.pdu-dek-person { display: flex; align-items: center; gap: 18px; }
.pdu-dek-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, .5);
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .35);
}
.pdu-dek-contacts { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.pdu-dek-mail {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--pdu-barva-bila);
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
}
.pdu-dek-mail:hover { text-decoration: underline; color: var(--pdu-barva-bila); }
.pdu-dek-mail svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; }
.pdu-dek-mail svg path { stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; fill: none; }
.pdu-dek-person { flex-direction: column; text-align: center; }
.pdu-dek-contacts { align-items: center; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .pdu-dek-dot { animation: none; }
  .pdu-dek-num { transition: none; }
  .pdu-dek-num:hover { transform: none; }
}


/* ───────────────────────────────────────────────────────────────────────
   SEKCE 66. ZÁKAZNICKÝ ÚČET — PŘIHLÁŠENÍ, REGISTRACE, ZAPOMENUTÉ HESLO
   Tři systémové stránky Shoptetu (body.in-login / .in-registrace /
   .in-zapomenute-heslo). Markup nevlastníme → cílí se na nativní třídy
   (.login-form, .registration-form, .forgotten-password-form, .form-control).
   Společné: užší sloupec, pole 46 px, primární tlačítko přes celou šířku.
   Na mobilu je sloupec vycentrovaný, od 48em drží levý okraj obsahového
   sloupce jako zbytek obsahových stránek.
   Login a zapomenuté heslo mají formulář v jedné kartě; registrace vlastní
   fieldsety už má, takže kartu dostane každý z nich zvlášť (jinak by se
   rámečky zdvojily). Seznam si drží brandovou červenou — logo je bílé, na
   světlém tlačítku by zmizelo; sjednocuje se jen rádius.
   Bloky .pdu-pag-login-* injektuje script-pages.js SEKCE 11; bez JS zůstanou
   nativní formuláře funkční včetně původních odkazů.
   ─────────────────────────────────────────────────────────────────────── */
body.in-login .content-inner,
body.in-zapomenute-heslo .content-inner {
  max-width: 430px;
  margin: 0 auto;
}
body.in-registrace .content-inner {
  max-width: 640px;
  margin: 0 auto;
}
/* Stránky účtu jsou krátké a patička jinak nasedá těsně pod tlačítko. */
body.in-login .content-inner,
body.in-registrace .content-inner,
body.in-zapomenute-heslo .content-inner { padding-bottom: 36px; }
body.in-login .content-inner > h1,
body.in-registrace .content-inner > h1,
body.in-zapomenute-heslo .content-inner > h1 {
  margin: 16px 0 14px;
  font-size: 26px;
  line-height: 1.2;
  text-align: center;
}
body.in-zapomenute-heslo .content-inner > p {
  margin: 0 0 14px;
  color: var(--pdu-barva-text-sekundarni, #5B5B6E);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}
@media (min-width: 48em) {
  body.in-login .content-inner,
  body.in-registrace .content-inner,
  body.in-zapomenute-heslo .content-inner { margin-left: 0; }
  body.in-login .content-inner > h1,
  body.in-registrace .content-inner > h1,
  body.in-zapomenute-heslo .content-inner > h1 { text-align: left; }
  body.in-zapomenute-heslo .content-inner > p { text-align: left; }
}

/* Kartu dostává jen formulář (login, zapomenuté heslo), u registrace jednotlivé
   fieldsety. Vnější div.co-box je pouhý obal — když měl rám taky, seděly
   Osobní údaje ve dvou rámečcích nad sebou. */
body.in-login .content-inner .login-form,
body.in-zapomenute-heslo .content-inner .forgotten-password-form,
body.in-registrace .content-inner .registration-form fieldset.box {
  margin-bottom: 14px;
  padding: 20px 18px 18px;
  border: 1px solid var(--pdu-barva-okraj-zeleny-jemny, #E0ECE0);
  border-radius: 14px;
  background: var(--pdu-barva-bila, #FFFFFF);
  box-shadow: 0 2px 14px rgba(25, 25, 50, .06);
}
/* Nativní mezinadpisy („Odebírat newsletter", „Registrovat přes sociální sítě")
   jsou stejně velké jako H1 a mimo karty visely v prázdnu → zmenšit na úroveň
   legend uvnitř karet. */
body.in-registrace .content-inner .registration-form > h2 {
  margin: 18px 0 10px;
  font-size: 17px;
  line-height: 1.3;
}
/* ⚠ fieldset.stay-in-touch (checkbox „Nepřeji si odebírat newslettery") kartu
   ZÁMĚRNĚ nedostává: jeho label je display:none už v nativní šabloně (ověřeno
   i na LIVE), takže blok nic nevykresluje a karta by byla prázdná. Až se
   rozhodne, co s tím osiřelým nadpisem „Odebírat newsletter", řešit tady. */
/* skrytá větev pro firemní údaje nesmí vykreslit prázdnou kartu */
body.in-registrace .content-inner .registration-form .co-box.js-hidden { display: none; }

body.in-login .content-inner .form-group,
body.in-registrace .content-inner .form-group,
body.in-zapomenute-heslo .content-inner .form-group { margin-bottom: 14px; }

body.in-login .content-inner .form-control,
body.in-registrace .content-inner .form-control,
body.in-zapomenute-heslo .content-inner .form-control {
  height: 46px;
  border-radius: 9px;
}
body.in-registrace .content-inner textarea.form-control { height: auto; }

body.in-login .content-inner .btn-primary,
body.in-registrace .content-inner .btn-primary,
body.in-zapomenute-heslo .content-inner .btn-primary {
  width: 100%;
  padding: 13px 18px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
}
/* Nativně má tlačítko rezervu 66 px jen vlevo (logo), takže text sedí mimo osu
   tlačítka. Stejná rezerva vpravo ho vrátí na střed, logo zůstává vlevo. */
body.in-login .content-inner .login-btn.seznam,
body.in-registrace .content-inner .login-btn.seznam {
  border-radius: 10px;
  padding-right: 66px;
}

/* nativně sloupec; po odebrání registrace (JS) zbývá jen zapomenuté heslo */
body.in-login .content-inner .alternative-links {
  flex-direction: row;
  justify-content: flex-end;
  margin-top: 14px;
  font-size: 14px;
}
body.in-login .content-inner .alternative-links a {
  color: #0b7a4d;
  font-weight: 600;
}

/* Výzva na protější stránku — rovnocenná volba, ne drobný odkaz. */
.pdu-pag-login-novy {
  margin: 14px 0 0;
  padding: 18px;
  border: 1px dashed #c9d6cd;
  border-radius: 14px;
  background: var(--pdu-barva-bila, #FFFFFF);
  text-align: center;
}
.pdu-pag-login-novy b {
  display: block;
  margin-bottom: 5px;
  color: var(--pdu-barva-tmavomodra, #191932);
  font-size: 16px;
}
.pdu-pag-login-novy p {
  margin: 0 0 13px;
  color: var(--pdu-barva-text-sekundarni, #5B5B6E);
  font-size: 14px;
  line-height: 1.5;
}
.pdu-pag-login-novy a {
  display: block;
  padding: 12px;
  border: 2px solid var(--pdu-barva-zelena-brand, #00a664);
  border-radius: 10px;
  color: #0b7a4d;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}
.pdu-pag-login-novy a:hover { background: var(--pdu-barva-zelena-svetla-3, #E8F8F0); }
/* na registraci stojí výzva NAD formulářem (JS SEKCE 11) → odsazení se otáčí */
body.in-registrace .pdu-pag-login-novy { margin: 0 0 14px; }

/* Co účet umí — tři body, ať je zřejmé, proč se přihlašovat. */
.pdu-pag-login-vyhody {
  margin: 14px 0 0;
  padding: 16px 18px;
  border: 1px solid var(--pdu-barva-okraj-zeleny-jemny, #E0ECE0);
  border-radius: 14px;
  background: var(--pdu-barva-zelena-svetla-2, #F5FAF5);
}
.pdu-pag-login-vyhody b {
  display: block;
  margin-bottom: 9px;
  color: var(--pdu-barva-tmavomodra, #191932);
  font-size: 15px;
}
.pdu-pag-login-vyhody ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pdu-pag-login-vyhody li {
  position: relative;
  padding-left: 24px;
  color: var(--pdu-barva-tekst-zakladni, #333333);
  font-size: 14px;
  line-height: 1.45;
}
.pdu-pag-login-vyhody li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 15px;
  height: 15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300B46E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 15px no-repeat;
}

/* Poznámka o velkoobchodu v boxu Typ zákazníka (JS SEKCE 11) — registrace míří
   na koncového zákazníka, velkoobchodní odběr se domlouvá zvlášť. */
.pdu-pag-login-vo {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--pdu-barva-okraj-zeleny-jemny, #E0ECE0);
  color: var(--pdu-barva-text-sekundarni, #5B5B6E);
  font-size: 14px;
  line-height: 1.5;
}
.pdu-pag-login-vo a {
  display: inline-block;
  margin-top: 6px;
  color: #0b7a4d;
  font-weight: 700;
  text-decoration: none;
}
.pdu-pag-login-vo a:hover { text-decoration: underline; }

/* zpětný odkaz pod formulářem zapomenutého hesla */
.pdu-pag-login-zpet {
  margin: 14px 0 0;
  font-size: 14px;
  text-align: center;
}
.pdu-pag-login-zpet a { color: #0b7a4d; font-weight: 600; }
@media (min-width: 48em) {
  .pdu-pag-login-zpet { text-align: left; }
}

/* ── DODATEK 2026-08-20 ─────────────────────────────────────────────────
   Dvě věci, na které si ukázal uživatel po nasazení na LIVE.

   1) NEWSLETTER PŘI REGISTRACI. `label.whole-width` u `#sendNewsletter`
      (name `doNotSendNewsletter`) má `display:none` v nativní šabloně —
      ověřeno měřením i s naším CSS vypnutým, hodnoty stejné, není to naše.
      Důsledek: zákazník newsletter odmítnout nemůže, protože zaškrtávátko
      měří 1×1 px a popisek je schovaný. Odkrýváme ho a fieldset dostane
      kartu jako zbytek formuláře (dřív ji schválně neměl, byl prázdný).
      ⚠ Nadpis nad ním („Odebírat newsletter") a popisek („Nepřeji si
      odebírat newslettery") jdou významem proti sobě. Nadpis NEskrýváme,
      schovávat něco kolem souhlasu není naše rozhodnutí — je to k doladění
      textů, ne CSS.

   2) ODKAZY POD PŘIHLAŠOVACÍM TLAČÍTKEM. `.alternative-links` měl 14 px
      od tlačítka a 19 px k oddělovači „nebo", takže se mačkal mezi ně;
      v rozbalovacím okně hlavičky stály „Nová registrace" a „Zapomenuté
      heslo" pod sebou úplně bez oddělení. Nově vodorovně, s oddělovačem
      mezi nimi a s odstupem nahoru i dolů. Míří na `form.login-form`,
      takže platí pro stránku i pro okno v hlavičce.
   ─────────────────────────────────────────────────────────────────────── */

/* 1) newsletter */
/* !important je nutne: display:none drzi vendor sablona z cross-origin CDN
   (main-11.less), jejiz pravidla nejdou precist ani prebit specificitou. */
body.in-registrace fieldset.stay-in-touch label.whole-width {
  display: flex !important;
  align-items: center;
  gap: .5em;
  cursor: pointer;
}
/* zaskrtavatko je nativne 1x1 px, jinak by slo klikat jen na text */
body.in-registrace fieldset.stay-in-touch input#sendNewsletter {
  width: 1.125em;
  height: 1.125em;
  flex: 0 0 auto;
  margin: 0 .5em 0 0;
  accent-color: var(--pdu-barva-zelena-akcent, #00B46E);
}
body.in-registrace fieldset.stay-in-touch .form-group {
  display: flex;
  align-items: center;
  min-height: 1.5em;
}
body.in-registrace fieldset.stay-in-touch {
  border: 1px solid var(--pdu-barva-okraj-jemny, #E0E0E0);
  border-radius: var(--pdu-radius-l, .75em);
  background: var(--pdu-barva-bila, #fff);
  padding: 1em 1.125em;
  margin-bottom: 1.25em;
}

/* 2) odkazy pod tlačítkem — stránka i okno v hlavičce */
form.login-form .alternative-links {
  display: flex;
  /* ⚠ smer MUSI byt uveden: nativni sablona ma na tomhle bloku
     `flex-direction: column`, takze bez toho `align-items: center` odkazy
     vycentroval a poskladal pod sebe (mereno v okne hlavicky, 388 px). */
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  /* justify + zruseni auto-okraju: nativne se odkazy centruji a v uzkem okne
     hlavicky (388 px) se pak lamou na dva radky, i kdyz se veslou na jeden */
  justify-content: flex-start;
  gap: .375em .875em;
  margin: 1.25em 0 1.25em;
  padding-top: 1em;
  border-top: 1px solid var(--pdu-barva-okraj-jemny, #E0E0E0);
  font-size: .9375em;
}
form.login-form .alternative-links a { margin: 0; flex: 0 0 auto; }
/* svislý oddělovač mezi sousedními odkazy, ať nesplývají */
form.login-form .alternative-links a + a {
  padding-left: .875em;
  border-left: 1px solid var(--pdu-barva-okraj-jemny, #E0E0E0);
}
/* „nebo" nad tlačítkem Seznam ať má taky vzduch */
form.login-form .social-login-buttons-divider { margin-top: .5em; }

@media (max-width: 37.49em) {
  form.login-form .alternative-links a + a { padding-left: 0; border-left: 0; }
}

/* ── ROZBALOVACÍ OKNO PŘIHLÁŠENÍ V HLAVIČCE (2026-08-20) ────────────────
   Stejný formulář jako na /login/, ale okno visí na KAŽDÉ stránce, kde třída
   `body.in-login` neplatí — SEKCE 66 na něj proto nedosáhne a okno zůstávalo
   v nativním kabátu: pole 35 px s ostrými rohy, tlačítko 116×36 vlevo dole,
   Seznam přes celou šířku. Hierarchie naruby, stejně jako kdysi na stránce.

   ⚠ Hodnoty jsou ZRCADLENÉ ze SEKCE 66 (pole 46/9, tlačítko 100 %/13-18/10/16/700,
   Seznam rádius 10 + rezerva 66 vpravo). Když se mění nahoře, změň i tady.
   Schválně v px, ne v em: okno má základ písma 13,125 px, kdežto obsah stránky
   14 px, takže by se em rozešlo.
   ⚠ Scope `.login-widget` — `.popup-widget-inner` samotný sdílí i košík.
   ─────────────────────────────────────────────────────────────────────── */

.login-widget .popup-widget-inner {
  border-radius: var(--pdu-radius-l, .75em);
}
.login-widget .popup-widget-inner > h2 {
  font-weight: 700;
  color: var(--pdu-barva-tmavomodra, #191932);
}
.login-widget form.login-form .form-control {
  height: 46px;
  border-radius: 9px;
}
.login-widget form.login-form .btn-primary {
  width: 100%;
  padding: 13px 18px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
}
.login-widget form.login-form .login-btn.seznam {
  border-radius: 10px;
  padding-right: 66px;
}