/****** STYLY PRO PRODUKTY prefix .pdu-pro- ******/
/****** Všechny barvy/spacing/radius/shadows/durations čerpá z eshop/global.css ******/
/****** Změna designových tokenů probíhá VÝHRADNĚ v global.css. ******/

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

 — SEKCE 0.  Standalone utility (světlešedé pozadí — legacy)
 — SEKCE 1.  Page wrapper (.pdu-pro-page) — box-sizing, font inherit, base-font bump
 — SEKCE 2.  Eyebrow + perex (úvodní strip s materiál · RAL · rozměr)
 — SEKCE 3.  Video (.pdu-pro-intro-video — sjednocená DNA s .pdu-pag-intro-video,
                aspect 16:9 iframe YouTube, full-width standalone)
 — SEKCE 4.  Kotvení (mount) — <details> s 2 možnostmi (příchytky / U účka)
 — SEKCE 5.  Compare (Al vs Fe) — <details> se 2 sloupci, primary highlight
 — SEKCE 6.  Atypická doprava info banner (světle žlutý 1-řádek)
 — SEKCE 7.  Needs chipy (cross-sell konkrétního příslušenství — bez cen)
 — SEKCE 8.  Kategorie linky ("hodí se k tomu" — pill links na kategorie)
 — SEKCE 9.  FAQ accordion (microdata FAQPage, <article itemprop="mainEntity">)
 — SEKCE 10. Obchoďák karta (avatar + text + 2 CTA — v LONG, plné šířky)
 — SEKCE 10b. Sidebar obchoďák (kompaktní vertikální, do .extended-description přes JS)
 — SEKCE 11. Realizace CTA band — odkaz na /realizace-montaze/ ("Nezávazně poptat")
 — SEKCE 12. Reduced motion — a11y override

 POZN.: Strukturované parametry produktu (materiál, rozměry, povrch) NEPATŘÍ do
        DESCRIPTION — žijí v XML přes <INFORMATION_PARAMETERS> + <TEXT_PROPERTIES>
        a Shoptet je renderuje v "Detailní informace" pod hlavní galerií.

 POZN.: Bloky jsou MODULÁRNÍ — generátor vynechá bloky, které u daného typu SKU
        nedávají smysl (např. tyčková pole nemají Compare, branky nemají Mount).
****/


/* ╔══════════════════════════════════════════════════════════════
   📦 SEKCE 0. POZADÍ-SVETLESEDE-BEZ-OKRAJE (legacy utility)
   ══════════════════════════════════════════════════════════════ */
.pdu-pro-pozadi-svetlesede-bez-okraje {
  width: 100%;
  background-color: var(--pdu-barva-sede-svetla);
  padding: var(--pdu-odsazeni-s) var(--pdu-odsazeni-l);
}


/* ╔══════════════════════════════════════════════════════════════
   📄 SEKCE 1. PAGE WRAPPER (.pdu-pro-page)
   ══════════════════════════════════════════════════════════════ */
.pdu-pro-page {
  font-family: inherit;
  font-size: var(--pdu-base-font-size);
  color: var(--pdu-barva-tmavomodra);
  box-sizing: border-box;
  max-width: 100%;
}
.pdu-pro-page *,
.pdu-pro-page *::before,
.pdu-pro-page *::after {
  box-sizing: border-box;
  font-family: inherit;
}


/* ╔══════════════════════════════════════════════════════════════
   🏷️ SEKCE 2. EYEBROW + PEREX (úvodní strip)
   ══════════════════════════════════════════════════════════════ */
/* Eyebrow — defensive: !important na display + line-height aby ho Shoptet
   WYSIWYG (který občas wrapuje paste do <p>) nesplacl na výšku řádku */
.pdu-pro-eyebrow {
  display: inline-block !important;
  font-size: var(--pdu-font-size-s);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pdu-barva-zelena-akcent) !important;
  background: var(--pdu-barva-zelena-svetla-3);
  padding: 0.4em 0.875em;
  border-radius: var(--pdu-radius-s);
  margin: 0 0 var(--pdu-odsazeni-s) !important;
  vertical-align: middle;
}
.pdu-pro-perex {
  font-size: var(--pdu-font-size-l);
  line-height: 1.55;
  color: var(--pdu-barva-tmavomodra);
  max-width: 48em;
  margin: 0 0 var(--pdu-odsazeni-m);
}


/* ╔══════════════════════════════════════════════════════════════
   🎬 SEKCE 3. INTRO VIDEO — sjednocená DNA s .pdu-pag-intro-video
   ──────────────────────────────────────────────────────────────
   Popis:
   - REUSE patternu z style-pages.css sekce 20 (jednotné video napříč webem)
   - aspect-ratio 16:9, max-width 45em (standalone v products, žádný hero grid)
   - <iframe> YouTube embed (pages už používá iframe v /realizace-montaze/ hero)
   - Černé pozadí pod iframe (pre-load), radius-xl, stín
   - Modifier .is-foto = statický obrázek místo videa (pro produkty bez YT)

   POZN.: Pokud Shoptet WYSIWYG v produktech strippuje <iframe>, vložit přes
   "Zdrojový kód <>" mode, nebo (fallback) přejmenovat na image link viz git
   historie 2026-05-27.

   HTML (video):
     <div class="pdu-pro-intro-video">
       <iframe src="https://www.youtube.com/embed/VIDEO_ID"
               title="Montáž plotu Hyrát" loading="lazy"
               allow="accelerometer; autoplay; clipboard-write; encrypted-media;
                      gyroscope; picture-in-picture; web-share"
               allowfullscreen></iframe>
     </div>

   HTML (foto fallback):
     <div class="pdu-pro-intro-video is-foto">
       <img src="…" alt="…" loading="lazy">
     </div>
   ══════════════════════════════════════════════════════════════ */
.pdu-pro-intro-video {
  width: 100%;
  max-width: 45em;
  margin: 0 auto var(--pdu-odsazeni-l);
  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);
}
.pdu-pro-intro-video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.pdu-pro-intro-video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* .is-foto modifier — statický obrázek (např. produktová ilustrace), bez stínu/pozadí */
.pdu-pro-intro-video.is-foto {
  background: transparent;
  box-shadow: none;
  aspect-ratio: auto;
  height: auto;
  display: block;
}
.pdu-pro-intro-video.is-foto img {
  width: 100%;
  height: auto;
  max-height: 28.75em;
  object-fit: contain;
  border-radius: 0;
}


/* ╔══════════════════════════════════════════════════════════════
   🔧 SEKCE 4. KOTVENÍ (mount) — <details> sklápěcí blok
   ══════════════════════════════════════════════════════════════ */
.pdu-pro-mount,
.pdu-pro-compare {
  border: 1px solid var(--pdu-barva-okraj-jemny);
  border-radius: var(--pdu-radius-m);
  background: var(--pdu-barva-bila);
  margin: 0 0 var(--pdu-odsazeni-s);
  overflow: hidden;
  box-shadow: var(--pdu-stin-jemny);
}
/* první rolldown blok = mírně větší top margin pro odsazení od h2 "Detailní popis" */
.pdu-pro-page > .pdu-pro-mount:first-child,
.pdu-pro-page > .pdu-pro-compare:first-child { margin-top: var(--pdu-odsazeni-s); }
.pdu-pro-mount > summary,
.pdu-pro-compare > summary {
  padding: 0.875em var(--pdu-odsazeni-m);
  padding-right: 2.5em;
  font-weight: 700;
  font-size: var(--pdu-font-size-m);
  cursor: pointer;
  color: var(--pdu-barva-tmavomodra);
  list-style: none;
  position: relative;
  background: var(--pdu-barva-sede-svetla);
  transition: background var(--pdu-prechod-dur-rychly) ease;
}
.pdu-pro-mount > summary::-webkit-details-marker,
.pdu-pro-compare > summary::-webkit-details-marker { display: none; }
.pdu-pro-mount > summary::after,
.pdu-pro-compare > summary::after {
  content: "▾";
  position: absolute;
  right: var(--pdu-odsazeni-m);
  top: 50%;
  transform: translateY(-50%);
  color: var(--pdu-barva-zelena-akcent);
  font-size: 1.1em;
  transition: transform var(--pdu-prechod-dur-rychly) ease;
}
.pdu-pro-mount[open] > summary::after,
.pdu-pro-compare[open] > summary::after {
  transform: translateY(-50%) rotate(180deg);
}
.pdu-pro-mount > summary:hover,
.pdu-pro-compare > summary:hover {
  background: var(--pdu-barva-zelena-svetla-2);
}

.pdu-pro-mount-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pdu-odsazeni-m);
  padding: var(--pdu-odsazeni-m);
}
@media (min-width: 40em) {
  .pdu-pro-mount-content { grid-template-columns: 1fr 1fr; }
}
.pdu-pro-mount-opt h4 {
  margin: 0 0 var(--pdu-odsazeni-xs);
  font-size: var(--pdu-font-size-m);
  color: var(--pdu-barva-zelena-akcent);
  font-weight: 700;
}
.pdu-pro-mount-opt p {
  margin: 0 0 var(--pdu-odsazeni-xs);
  line-height: 1.5;
}
.pdu-pro-mount-spec {
  font-size: var(--pdu-font-size-s);
  color: var(--pdu-barva-text-sedy);
  font-style: italic;
  margin: 0 !important;
}


/* ╔══════════════════════════════════════════════════════════════
   ⚖️ SEKCE 5. COMPARE (Al vs Fe) — <details> 2-col
   ══════════════════════════════════════════════════════════════ */
.pdu-pro-compare-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pdu-odsazeni-m);
  padding: var(--pdu-odsazeni-m);
}
@media (min-width: 40em) {
  .pdu-pro-compare-grid { grid-template-columns: 1fr 1fr; }
}
.pdu-pro-compare-col {
  padding: var(--pdu-odsazeni-m);
  border-radius: var(--pdu-radius-m);
  background: var(--pdu-barva-sede-svetla);
  border: 2px solid transparent;
}
.pdu-pro-compare-col.is-primary {
  background: var(--pdu-barva-zelena-svetla-3);
  border-color: var(--pdu-barva-zelena-akcent);
}
.pdu-pro-compare-col h4 {
  margin: 0 0 var(--pdu-odsazeni-s);
  display: flex;
  align-items: center;
  gap: var(--pdu-odsazeni-s);
  flex-wrap: wrap;
  font-size: var(--pdu-font-size-l);
  font-weight: 700;
}
.pdu-pro-compare-tag {
  font-size: var(--pdu-font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--pdu-barva-zelena-akcent);
  color: var(--pdu-barva-bila);
  padding: 0.2em 0.6em;
  border-radius: var(--pdu-radius-s);
  white-space: nowrap;
}
.pdu-pro-compare-col ul {
  margin: 0;
  padding-left: 1.2em;
}
.pdu-pro-compare-col li {
  margin-bottom: 0.35em;
  line-height: 1.45;
}
.pdu-pro-compare-col li:last-child { margin-bottom: 0; }


/* ╔══════════════════════════════════════════════════════════════
   ⚠️ SEKCE 6. ATYPICKÁ DOPRAVA — info banner (1 řádek, světle žlutý)
   ──────────────────────────────────────────────────────────────
   Popis:
   - Krátký info banner pro velké panely (200×150 = atypická zásilka)
   - Pozadí: --pdu-barva-zluta-svetla (#FFFEEC) — jemný eye-catch
   - Levý border 4px žlutě-warm = vizuální akcent bez agresivity
   - Bold lead-in ("Atypická zásilka.") + zbytek textu inline

   HTML:
     <aside class="pdu-pro-info-atypicka">
       <strong>Atypická zásilka.</strong> Cena dopravy
       <a href="/cena-dopravy/">dle PSČ v košíku</a>, nebo zavolejte
       <a href="tel:+420...">+420 ...</a>.
     </aside>
   ══════════════════════════════════════════════════════════════ */
.pdu-pro-info-atypicka {
  background: var(--pdu-barva-zluta-svetla);
  border-left: 4px solid var(--pdu-barva-zluta-warm);
  padding: 0.625em 0.875em;
  border-radius: var(--pdu-radius-s);
  font-size: var(--pdu-font-size-s);
  line-height: 1.5;
  color: var(--pdu-barva-tmavomodra);
  margin: 0 0 var(--pdu-odsazeni-m);
}
.pdu-pro-info-atypicka strong {
  color: var(--pdu-barva-tmavomodra);
  margin-right: 0.25em;
}
.pdu-pro-info-atypicka a {
  color: var(--pdu-barva-zelena-akcent) !important;
  text-decoration: underline;
  font-weight: 600;
}
.pdu-pro-info-atypicka a:hover { text-decoration: none; }


/* ╔══════════════════════════════════════════════════════════════
   🛒 SEKCE 7. NEEDS — cross-sell chipy (konkrétní příslušenství)
   ══════════════════════════════════════════════════════════════ */
.pdu-pro-needs {
  margin: var(--pdu-odsazeni-l) 0 var(--pdu-odsazeni-l);
}
.pdu-pro-needs-head {
  font-size: var(--pdu-font-size-l);
  font-weight: 700;
  color: var(--pdu-barva-tmavomodra);
  margin: 0 0 var(--pdu-odsazeni-s);
  line-height: 1.3;
}
.pdu-pro-needs-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pdu-odsazeni-s);
}
.pdu-pro-needs-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.625em 1.125em;
  background: var(--pdu-barva-bila);
  border: 1px solid var(--pdu-barva-okraj-jemny);
  border-radius: var(--pdu-radius-l);
  color: var(--pdu-barva-tmavomodra) !important;
  text-decoration: none !important;
  font-size: var(--pdu-font-size-m);
  font-weight: 600;
  transition: all var(--pdu-prechod-dur-rychly) ease;
  box-shadow: var(--pdu-stin-jemny);
}
.pdu-pro-needs-chip:hover,
.pdu-pro-needs-chip:focus-visible {
  border-color: var(--pdu-barva-zelena-akcent);
  background: var(--pdu-barva-zelena-svetla-3);
  color: var(--pdu-barva-zelena-akcent) !important;
  transform: translateY(-1px);
  outline: none;
  box-shadow: var(--pdu-stin-stredni);
}


/* ╔══════════════════════════════════════════════════════════════
   🔗 SEKCE 8. KATEGORIE LINKY ("hodí se k tomu" — pill links)
   ──────────────────────────────────────────────────────────────
   Popis:
   - Druhá řada cross-sell: linky na KATEGORIE (ne konkrétní produkty)
   - Jiný visual než .pdu-pro-needs-chip (žádný stín, transparent bg) — sekundární
   - Šipka → na konci jako affordance
   - Pod blokem needs (sekce 7), často na stejné stránce souběžně

   HTML:
     <section class="pdu-pro-katlinks">
       <h3 class="pdu-pro-katlinks-head">Hodí se k tomu</h3>
       <div class="pdu-pro-katlinks-row">
         <a class="pdu-pro-katlinks-pill" href="/sloupky/">Sloupky 60×60</a>
         <a class="pdu-pro-katlinks-pill" href="/podhrabove-desky/">Podhrabové desky</a>
         <a class="pdu-pro-katlinks-pill" href="/ukazka-realizaci/">Ukázka realizací</a>
       </div>
     </section>
   ══════════════════════════════════════════════════════════════ */
.pdu-pro-katlinks {
  margin: 0 0 var(--pdu-odsazeni-l);
  padding-top: var(--pdu-odsazeni-s);
  border-top: 1px dashed var(--pdu-barva-okraj-jemny);
}
.pdu-pro-katlinks-head {
  font-size: var(--pdu-font-size-m);
  font-weight: 600;
  color: var(--pdu-barva-text-sekundarni);
  margin: 0 0 var(--pdu-odsazeni-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pdu-pro-katlinks-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em var(--pdu-odsazeni-s);
}
.pdu-pro-katlinks-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.4em 0.875em;
  background: transparent;
  border: 1px dashed var(--pdu-barva-okraj-jemny);
  border-radius: var(--pdu-radius-m);
  color: var(--pdu-barva-zelena-akcent) !important;
  text-decoration: none !important;
  font-size: var(--pdu-font-size-s);
  font-weight: 600;
  transition: all var(--pdu-prechod-dur-rychly) ease;
}
.pdu-pro-katlinks-pill::after {
  content: "→";
  opacity: 0.6;
  transition: transform var(--pdu-prechod-dur-rychly) ease;
}
.pdu-pro-katlinks-pill:hover,
.pdu-pro-katlinks-pill:focus-visible {
  background: var(--pdu-barva-zelena-svetla-3);
  border-color: var(--pdu-barva-zelena-akcent);
  border-style: solid;
  outline: none;
}
.pdu-pro-katlinks-pill:hover::after,
.pdu-pro-katlinks-pill:focus-visible::after {
  transform: translateX(3px);
  opacity: 1;
}


/* ╔══════════════════════════════════════════════════════════════
   ❓ SEKCE 9. FAQ accordion (microdata FAQPage)
   ──────────────────────────────────────────────────────────────
   Popis:
   - Vertikální seznam <details>/<summary>, jeden card-look bez ohraničení mezi
   - Microdata FAQPage → Question → Answer (pravidlo 10 z lint: <article>
     itemprop="mainEntity" kolem každého <details>)
   - 5 otázek typicky, ne víc — over 5 = TL;DR
   - Otevírá se víc najednou (žádný "close-others" jako u .pdu-pag-faq)

   HTML:
     <section class="pdu-pro-faq" itemscope itemtype="https://schema.org/FAQPage">
       <h3 class="pdu-pro-faq-head">Často se ptáte</h3>

       <article itemprop="mainEntity" itemscope itemtype="https://schema.org/Question">
         <details class="pdu-pro-faq-item">
           <summary itemprop="name">Vyrábíte plot na míru?</summary>
           <div class="pdu-pro-faq-answer" itemprop="acceptedAnswer"
                itemscope itemtype="https://schema.org/Answer">
             <p itemprop="text">Ano — kratší, vyšší, jiné barvy…</p>
           </div>
         </details>
       </article>

       …další <article>…
     </section>
   ══════════════════════════════════════════════════════════════ */
.pdu-pro-faq {
  margin: 0 0 var(--pdu-odsazeni-l);
  background: var(--pdu-barva-bila);
  border: 1px solid var(--pdu-barva-okraj-jemny);
  border-radius: var(--pdu-radius-l);
  overflow: hidden;
  box-shadow: var(--pdu-stin-jemny);
}
.pdu-pro-faq-head {
  margin: 0;
  padding: var(--pdu-odsazeni-m);
  background: var(--pdu-barva-tmavomodra);
  color: var(--pdu-barva-bila);
  font-size: var(--pdu-font-size-l);
  font-weight: 700;
}
.pdu-pro-faq article {
  border-top: 1px solid var(--pdu-barva-okraj-svetly);
}
.pdu-pro-faq article:first-of-type {
  border-top: none;
}
.pdu-pro-faq-item {
  background: var(--pdu-barva-bila);
}
.pdu-pro-faq-item > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.875em var(--pdu-odsazeni-m);
  padding-right: 2.5em;
  font-weight: 600;
  color: var(--pdu-barva-tmavomodra);
  position: relative;
  transition: background var(--pdu-prechod-dur-rychly) ease;
}
.pdu-pro-faq-item > summary::-webkit-details-marker { display: none; }
.pdu-pro-faq-item > summary::after {
  content: "+";
  position: absolute;
  right: var(--pdu-odsazeni-m);
  top: 50%;
  transform: translateY(-50%);
  width: 1.4em;
  height: 1.4em;
  line-height: 1.3em;
  text-align: center;
  border-radius: 50%;
  background: var(--pdu-barva-zelena-svetla-3);
  color: var(--pdu-barva-zelena-akcent);
  font-weight: 700;
  font-size: 1.1em;
  transition: transform var(--pdu-prechod-dur-rychly) ease;
}
.pdu-pro-faq-item[open] > summary::after {
  content: "−";
  transform: translateY(-50%) rotate(180deg);
}
.pdu-pro-faq-item > summary:hover {
  background: var(--pdu-barva-zelena-svetla-2);
}
.pdu-pro-faq-answer {
  padding: 0 var(--pdu-odsazeni-m) var(--pdu-odsazeni-m);
  color: var(--pdu-barva-tekst-zakladni);
  line-height: 1.55;
}
.pdu-pro-faq-answer p {
  margin: 0 0 var(--pdu-odsazeni-xs);
}
.pdu-pro-faq-answer p:last-child { margin: 0; }


/* ╔══════════════════════════════════════════════════════════════
   👤 SEKCE 10. OBCHODÁK karta (mini-Person s 2 CTA)
   ──────────────────────────────────────────────────────────────
   Popis:
   - Avatar 80×80 + headline + sub + jméno + 2 CTA (telefon, mail)
   - 3-col grid desktop: [foto] [text] [cta-stack] → 1-col stack mobil
   - Pozadí: světle zelená (.zelena-svetla-2) = jiný visual než tmavomodrý
     band Realizace; aby se 2 CTA bloky vizuálně nemísily
   - Komplementární k Henrik kalkulaci v Shoptet sticky pravém sloupci
     (Henrik = "spočítat cenu zboží", Lucka = "poradit s výběrem produktu")

   HTML:
     <aside class="pdu-pro-obchodak">
       <img class="pdu-pro-obchodak-foto"
            src="/user/documents/.../lucka.jpg" alt="Lucka Fialová" loading="lazy">
       <div class="pdu-pro-obchodak-text">
         <h3 class="pdu-pro-obchodak-head">Nejste si jistí výběrem?</h3>
         <p class="pdu-pro-obchodak-sub">Domluvíme se na míru — barva, výška, atypická délka.</p>
         <p class="pdu-pro-obchodak-meta">Lucka Fialová · Po–Pá 8–17 h</p>
       </div>
       <div class="pdu-pro-obchodak-cta">
         <a class="pdu-pro-obchodak-btn is-tel" href="tel:+420...">📞 728 ...</a>
         <a class="pdu-pro-obchodak-btn is-mail" href="mailto:...">✉ Napsat</a>
       </div>
     </aside>
   ══════════════════════════════════════════════════════════════ */
.pdu-pro-obchodak {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--pdu-odsazeni-m);
  align-items: center;
  background: var(--pdu-barva-zelena-svetla-2);
  border: 1px solid var(--pdu-barva-okraj-zeleny-jemny);
  border-radius: var(--pdu-radius-l);
  padding: var(--pdu-odsazeni-m);
  margin: 0 0 var(--pdu-odsazeni-l);
  box-shadow: var(--pdu-stin-jemny);
}
@media (min-width: 40em) {
  .pdu-pro-obchodak {
    grid-template-columns: auto 1fr auto;
  }
}
.pdu-pro-obchodak-foto {
  width: 5em;
  height: 5em;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--pdu-barva-bila);
  box-shadow: var(--pdu-stin-jemny);
  background: var(--pdu-barva-pozadi-foto);
  grid-row: 1 / span 2;
}
@media (min-width: 40em) {
  .pdu-pro-obchodak-foto { grid-row: auto; }
}
.pdu-pro-obchodak-text {
  min-width: 0;
}
.pdu-pro-obchodak-head {
  margin: 0 0 0.2em;
  font-size: var(--pdu-font-size-l);
  font-weight: 700;
  color: var(--pdu-barva-tmavomodra);
  line-height: 1.25;
}
.pdu-pro-obchodak-sub {
  margin: 0 0 0.3em;
  font-size: var(--pdu-font-size-m);
  color: var(--pdu-barva-text-sekundarni);
  line-height: 1.45;
}
.pdu-pro-obchodak-meta {
  margin: 0;
  font-size: var(--pdu-font-size-s);
  color: var(--pdu-barva-text-sedy);
  font-weight: 600;
}
.pdu-pro-obchodak-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pdu-odsazeni-xs);
  grid-column: 1 / -1;
}
@media (min-width: 40em) {
  .pdu-pro-obchodak-cta {
    grid-column: auto;
    flex-direction: column;
    align-items: stretch;
  }
}
.pdu-pro-obchodak-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  padding: 0.625em 1em;
  border-radius: var(--pdu-radius-m);
  font-weight: 700;
  text-decoration: none !important;
  font-size: var(--pdu-font-size-s);
  transition: all var(--pdu-prechod-dur-rychly) ease;
  white-space: nowrap;
  border: 1px solid transparent;
}
.pdu-pro-obchodak-btn.is-tel {
  background: var(--pdu-barva-zelena-akcent);
  color: var(--pdu-barva-bila) !important;
  border-color: var(--pdu-barva-zelena-akcent);
}
.pdu-pro-obchodak-btn.is-tel:hover,
.pdu-pro-obchodak-btn.is-tel:focus-visible {
  background: var(--pdu-barva-bila);
  color: var(--pdu-barva-zelena-akcent) !important;
  outline: none;
}
.pdu-pro-obchodak-btn.is-mail {
  background: var(--pdu-barva-bila);
  color: var(--pdu-barva-tmavomodra) !important;
  border-color: var(--pdu-barva-okraj-jemny);
}
.pdu-pro-obchodak-btn.is-mail:hover,
.pdu-pro-obchodak-btn.is-mail:focus-visible {
  border-color: var(--pdu-barva-tmavomodra);
  outline: none;
}


/* ╔══════════════════════════════════════════════════════════════
   👤 SEKCE 10b. SIDEBAR OBCHODÁK (.pdu-pro-sidebar-obchodak)
   ──────────────────────────────────────────────────────────────
   Popis:
   - Kompaktní VERTIKÁLNÍ verze obchoďáka pro pravý sidebar
     div.extended-description (vedle hero pod cenou)
   - Injection PŘES JS — foot.js sekce "Sidebar obchoďák injection":
     1. Načte category URL z breadcrumb
     2. Lookup repId v /user/documents/pdu-code/data/obchodnici-map.json
     3. Renderuje tuto strukturu do div.extended-description
   - Lazy-load přes IntersectionObserver (rootMargin 200 px) — netěží TBT
   - Pattern: foto (kruh top-center) → name+role → bio (zkrácený) → 2 CTA stack
   - Nahrazuje SE-form widget z foot.js (zakomentován rev 12)

   STRUKTURA (vykreslená JS):
     <aside class="pdu-pro-sidebar-obchodak">
       <img class="pdu-pro-sidebar-obchodak-foto" src="..." alt="..." loading="lazy">
       <h3 class="pdu-pro-sidebar-obchodak-head">Nejste si jistí výběrem?</h3>
       <p class="pdu-pro-sidebar-obchodak-name">Rudolf Herák · obchodní zástupce</p>
       <p class="pdu-pro-sidebar-obchodak-bio">"Líbí se vám některá z realizací…"</p>
       <div class="pdu-pro-sidebar-obchodak-cta">
         <a class="pdu-pro-sidebar-obchodak-btn is-tel" href="tel:...">📞 720 037 778</a>
         <a class="pdu-pro-sidebar-obchodak-btn is-mail" href="mailto:...">✉ Napsat</a>
       </div>
     </aside>
   ══════════════════════════════════════════════════════════════ */
.pdu-pro-sidebar-obchodak {
  display: block;
  background: var(--pdu-barva-zelena-svetla-2);
  border: 1px solid var(--pdu-barva-okraj-zeleny-jemny);
  border-radius: var(--pdu-radius-l);
  padding: var(--pdu-odsazeni-m);
  margin: var(--pdu-odsazeni-m) 0;
  text-align: center;
  box-shadow: var(--pdu-stin-jemny);
  /* root font scope — JS injection se renderuje mimo .pdu-pro-page wrapper */
  font-family: inherit;
  font-size: var(--pdu-base-font-size);
  color: var(--pdu-barva-tmavomodra);
  box-sizing: border-box;
}
.pdu-pro-sidebar-obchodak *,
.pdu-pro-sidebar-obchodak *::before,
.pdu-pro-sidebar-obchodak *::after {
  box-sizing: border-box;
}
.pdu-pro-sidebar-obchodak-foto {
  display: block;
  width: 6.5em;
  height: 6.5em;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--pdu-barva-bila);
  box-shadow: var(--pdu-stin-jemny);
  background: var(--pdu-barva-pozadi-foto);
  margin: 0 auto var(--pdu-odsazeni-s);
}
.pdu-pro-sidebar-obchodak-head {
  margin: 0 0 var(--pdu-odsazeni-xs);
  font-size: var(--pdu-font-size-l);
  font-weight: 700;
  color: var(--pdu-barva-tmavomodra);
  line-height: 1.25;
}
.pdu-pro-sidebar-obchodak-name {
  margin: 0 0 var(--pdu-odsazeni-s);
  font-size: var(--pdu-font-size-s);
  font-weight: 600;
  color: var(--pdu-barva-zelena-akcent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pdu-pro-sidebar-obchodak-bio {
  margin: 0 0 var(--pdu-odsazeni-m);
  font-size: var(--pdu-font-size-s);
  color: var(--pdu-barva-text-sekundarni);
  line-height: 1.5;
  font-style: italic;
}
.pdu-pro-sidebar-obchodak-cta {
  display: flex;
  flex-direction: column;
  gap: var(--pdu-odsazeni-xs);
}
.pdu-pro-sidebar-obchodak-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  padding: 0.625em 1em;
  border-radius: var(--pdu-radius-m);
  font-weight: 700;
  text-decoration: none !important;
  font-size: var(--pdu-font-size-s);
  transition: all var(--pdu-prechod-dur-rychly) ease;
  border: 1px solid transparent;
}
.pdu-pro-sidebar-obchodak-btn.is-tel {
  background: var(--pdu-barva-zelena-akcent);
  color: var(--pdu-barva-bila) !important;
  border-color: var(--pdu-barva-zelena-akcent);
}
.pdu-pro-sidebar-obchodak-btn.is-tel:hover,
.pdu-pro-sidebar-obchodak-btn.is-tel:focus-visible {
  background: var(--pdu-barva-bila);
  color: var(--pdu-barva-zelena-akcent) !important;
  outline: none;
}
.pdu-pro-sidebar-obchodak-btn.is-mail {
  background: var(--pdu-barva-bila);
  color: var(--pdu-barva-tmavomodra) !important;
  border-color: var(--pdu-barva-okraj-jemny);
}
.pdu-pro-sidebar-obchodak-btn.is-mail:hover,
.pdu-pro-sidebar-obchodak-btn.is-mail:focus-visible {
  border-color: var(--pdu-barva-tmavomodra);
  outline: none;
}


/* ╔══════════════════════════════════════════════════════════════
   🔨 SEKCE 11. REALIZACE CTA BAND — odkaz na /realizace-montaze/
   ══════════════════════════════════════════════════════════════ */
.pdu-pro-realizace {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pdu-odsazeni-m);
  align-items: center;
  background: var(--pdu-barva-tmavomodra);
  background-image: var(--pdu-grad-btn-corner-dark), var(--pdu-grad-btn-glossy-dark);
  color: var(--pdu-barva-bila);
  padding: var(--pdu-odsazeni-l);
  border-radius: var(--pdu-radius-xl);
  margin: var(--pdu-odsazeni-l) 0 0;
  box-shadow: var(--pdu-stin-stredni);
}
@media (min-width: 40em) {
  .pdu-pro-realizace { grid-template-columns: 1fr auto; }
}
.pdu-pro-realizace-head {
  margin: 0 0 var(--pdu-odsazeni-xs);
  color: var(--pdu-barva-bila);
  font-size: var(--pdu-font-size-xl);
  font-weight: 700;
  line-height: 1.25;
}
.pdu-pro-realizace-sub {
  margin: 0;
  color: var(--pdu-barva-bila);
  opacity: 0.88;
  font-size: var(--pdu-font-size-m);
  line-height: 1.5;
}
.pdu-pro-realizace-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.875em 1.5em;
  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;
  font-weight: 800;
  font-size: var(--pdu-font-size-m);
  text-decoration: none !important;
  border-radius: var(--pdu-radius-m);
  border: 1px solid var(--pdu-barva-zluta-cta);
  box-shadow: 0 0 0 1px var(--pdu-barva-okraj-jemny);
  transition: all var(--pdu-prechod-dur-rychly) ease;
  white-space: nowrap;
  justify-content: center;
}
.pdu-pro-realizace-btn:hover,
.pdu-pro-realizace-btn:focus-visible {
  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-bila);
  transform: translateY(-1px);
  outline: none;
}


/* ╔══════════════════════════════════════════════════════════════
   ♿ SEKCE 12. REDUCED MOTION — a11y override
   ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .pdu-pro-page * {
    transition: none !important;
    animation: none !important;
  }
  .pdu-pro-intro-video iframe { transition: none; }
}


/* ╔══════════════════════════════════════════════════════════════
   📊 SEKCE 13. TABULKA (.pdu-pro-tabulka) — sdílený styl tabulky
   ──────────────────────────────────────────────────────────────
   Kanonický styl tabulky převzatý z /kolik-stoji-plot/ (.pdu-pag-tabulka).
   Sdílí ho produkty i kategorie (-dolni) → kategorie importují tento soubor
   a používají class="pdu-pro-tabulka". NEVYMÝŠLET nový styl tabulky jinde.
   Tmavomodrá hlavička, bílé uppercase písmo, rámeček + radius, hover.
   Modifier .is-zvyrazneny = výrazný řádek (poslední buňka zelená = cena/výsledek).
   ══════════════════════════════════════════════════════════════ */
.pdu-pro-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;
  margin: 0.5em 0 1.25em;
}
.pdu-pro-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-pro-tabulka tbody td { padding: 0.8125em 1.125em; vertical-align: top; border-bottom: 1px solid var(--pdu-barva-okraj-svetly); }
.pdu-pro-tabulka tbody tr:last-child td { border-bottom: 0; }
.pdu-pro-tabulka tbody tr:hover { background: var(--pdu-barva-zelena-svetla-3); }
.pdu-pro-tabulka .is-zvyrazneny { background: var(--pdu-barva-zelena-svetla-3); font-weight: 700; }
.pdu-pro-tabulka .is-zvyrazneny td:last-child { color: var(--pdu-barva-zelena-akcent); }
@media (max-width: 37.5em) {
  .pdu-pro-tabulka { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}