/* ═══════════════════════════════════════════════════════════════════════
   STYLE-PRODUCTS.CSS — styly obsahu detailu produktu (popis, sidebar, FAQ, CTA pásy)
   Načítá: globálně z hlavičky (HEAD field) přes <link>, plus @import v paste-html
           konkrétní stránky jako defense-in-depth — viz meta/manual.md kap. 4
   Prefix tříd: .pdu-pro-
   ───────────────────────────────────────────────────────────────────────
   MAPA SEKCÍ (Ctrl+F na "SEKCE N."):
    1.  Page wrapper (.pdu-pro-page) — box-sizing, font inherit, base-font bump
    2.  Eyebrow + perex — úvodní strip s materiál · RAL · rozměr
    3.  Intro video (.pdu-pro-intro-video) — 16:9 YouTube iframe, sjednoceno s pages
    4.  Kotvení (mount) — <details> se 2 možnostmi (příchytky / U účka)
    5.  Compare (Al vs Fe) — <details> se 2 sloupci, primary highlight
    6.  Atypická doprava — info banner (světle žlutý, 1 řádek)
    7.  Needs chipy — cross-sell konkrétního příslušenství (bez cen)
    8.  Kategorie linky — „hodí se k tomu", pill links na kategorie
    9.  FAQ accordion — microdata FAQPage, <article itemprop="mainEntity">
   10b. Sidebar obchoďák — kompaktní vertikální varianta do „Další informace"
   11.  Realizace CTA band — odkaz na /realizace-montaze/ („Nezávazně poptat")
   12.  Reduced motion — a11y override
   13.  Tabulka (.pdu-pro-tabulka) — sdílený styl tabulky (i pro kategorie)
   15.  Sidebar guide (.pdu-pro-guide) — obsah „Další informace" / shortDescription
        …včetně .pdu-pro-guide-note.is-alert — červený rámeček pro atypickou dopravu
   16.  Štítky rámeček (.pdu-pro-stitky-ramecek) — box kolem dklab štítků
   17.  Srovnání druhů plotů (.pdu-pro-srovnani) — cross-sell karty foto + text + CTA
   18.  Info u dostupnosti (.pdu-pro-beton-tip) — bublina „?" u „Skladem", jen beton
   19.  Spinner líné galerie (.splide__spinner) — 40px zelené kolečko místo jgm oblouku
   ───────────────────────────────────────────────────────────────────────
   POZN.: Všechny barvy/spacing/radius/shadows/durations čerpá z eshop/global.css.
          Změna designových tokenů probíhá VÝHRADNĚ v global.css.

   POZN.: Chybějící čísla sekcí — SEKCE 0 („pozadí světlešedé bez okraje", legacy
          utilita) SMAZÁNA 2026-07-29, bývalá SEKCE 14 („restyle .detail-parameters")
          ODEBRÁNA 2026-07-01 — nativní tabulku parametrů necháváme v defaultním
          vzhledu tématu, nepřepisovat. SEKCE 10 („Obchoďák karta", .pdu-pro-obchodak
          — široká varianta v dlouhém popisu) SMAZÁNA 2026-07-29 jako mrtvý předchůdce
          SEKCE 10b: třída se nevyskytovala v žádném popisu produktu, generátoru,
          paste-html kanonu ani v obsahu stránek/článků/kategorií — jen v tomto CSS.
          Rozsah důkazu: zálohy API v RedesignProd/_backup + plné exporty popisů
          ZALOHY\eshop-backup\2026-06-30_1630\{live,test}\products-detail.ndjson
          (5074 + 3796 produktů). Metoda ověřena jako neslepá — v TEST korpusu je
          31 různých `pdu-pro-*` tříd a v RedesignProd/_backup i živá varianta
          `.pdu-pro-sidebar-obchodak`; jen `.pdu-pro-obchodak` je všude 0×.
          Sekce se ZÁMĚRNĚ nepřečíslovávají, 10b zůstává 10b.

   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 1. PAGE WRAPPER (.pdu-pro-page)
   Kořenový wrapper pasteovaného popisu — box-sizing, dědění fontu a základní
   font-size pro celý blok produktového popisu.
   ─────────────────────────────────────────────────────────────────────── */
.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)
   Malý zelený štítek nad nadpisem (materiál · RAL · rozměr) a pod ním perex.
   ─────────────────────────────────────────────────────────────────────── */
/* 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 (.pdu-pro-intro-video)
   Standalone 16:9 YouTube embed nad popisem, sjednocená DNA s .pdu-pag-intro-video.
   Modifier .is-foto = statický obrázek místo videa.
   ───────────────────────────────────────────────────────────────────────
   Popis:
   - REUSE patternu z style-pages.css sekce 29 (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 (.pdu-pro-mount)
   Sklápěcí <details> blok se 2 možnostmi kotvení (příchytky / U účka).
   Rám, summary a šipka jsou sdílené s .pdu-pro-compare (SEKCE 5).
   ─────────────────────────────────────────────────────────────────────── */
.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 (.pdu-pro-compare) — Al vs Fe, 2 sloupce
   Vnitřek sklápěcího srovnávacího bloku; jeden sloupec může být .is-primary
   (zelený highlight). Obal a summary dědí ze SEKCE 4.
   ─────────────────────────────────────────────────────────────────────── */
.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 (.pdu-pro-info-atypicka)
   Jednořádkový světle žlutý info banner pro nadrozměrné zásilky.
   ───────────────────────────────────────────────────────────────────────
   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: var(--pdu-odsazeni-s, 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 (.pdu-pro-needs)
   Řada odkazů na konkrétní příslušenství („co k tomu ještě potřebujete"), bez cen.
   ─────────────────────────────────────────────────────────────────────── */
.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);
}
/* Odsazeni pod CTA radou (2026-08-25). Rada sama zadny margin nemela, zatimco
   sousedni komponenty maji margin-top: 0 -- text pod chipy tak sedel nalepeny
   (13 z 20 vyskytu v dkLAB kartach). Selektor je ZAMERNE dvoutridni: karty si
   importuji tenhle soubor pod vlastnim ?v (final8/final9), coz je jiny CDN klic
   nez hlavicka. Stara nakesovana kopie se nacita v tele az za hlavickou, takze
   jednotridni pravidlo by prebila. Dve tridy vyhraji bez ohledu na poradi.
   Margin-bottom se slucuje s margin-top nasledujiciho bloku, takze u
   .pdu-pro-realizace (odsazeni-l) nevznikne dvojita mezera. */
.pdu-pro-page .pdu-pro-needs-row {
  margin: 0 0 var(--pdu-odsazeni-m);
}
.pdu-pro-needs-chip {
  display: inline-flex;
  align-items: center;
  padding: var(--pdu-odsazeni-s, 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 (.pdu-pro-katlinks)
   Druhá, sekundární řada cross-sellu — pill odkazy na kategorie („hodí se k tomu").
   ───────────────────────────────────────────────────────────────────────
   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 (.pdu-pro-faq)
   Rozklikávací otázky s microdaty FAQPage; design 1:1 s .pdu-pag-faq / .pdu-cat-faq.
   ───────────────────────────────────────────────────────────────────────
   Popis:
   - 2-col grid bílých karet, zelený inset-bar, ▼ indikátor — STEJNÝ design jako
     FAQ na zbytku eshopu (.pdu-pag-faq / .pdu-cat-faq). Na mobilu 1-col.
   - 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")

   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>
   ─────────────────────────────────────────────────────────────────────── */
/* SJEDNOCENO s .pdu-pag-faq / .pdu-cat-faq (2-col grid bílých karet, zelený
   inset-bar, ▼ indikátor) — stejný design jako FAQ na zbytku eshopu.
   HTML beze změny: <section class="pdu-pro-faq"> → <h3 class="pdu-pro-faq-head">
   + <article itemprop="mainEntity"> → <details class="pdu-pro-faq-item"> N×. */
.pdu-pro-faq {
  display: flex; flex-wrap: wrap; gap: 0.5em;
  margin: 0 0 var(--pdu-odsazeni-l);
  list-style: none; padding: 0;
  /* reset legacy card-look (kdyby se z head <link> načetla starší verze CSS) */
  background: none; border: 0; border-radius: 0; overflow: visible; box-shadow: none;
}
.pdu-pro-faq-head {
  flex-basis: 100%;
  margin: 0 0 0.375em;
  padding: 0; background: none;   /* reset legacy tmavomodrý bar */
  font-size: var(--pdu-font-size-l, 1.25em); font-weight: 700;   /* 1:1 s .pdu-cat-faq-title / .pdu-pag-faq-nadpis */
  color: var(--pdu-barva-tmavomodra);
}
.pdu-pro-faq > article {
  flex: 1; min-width: calc(50% - 0.25em);
  border-top: 0;   /* reset legacy border-top na .pdu-pro-faq article */
  transition: transform var(--pdu-prechod-dur-stredni) ease-in;
}
@media (max-width: 47.5em) { .pdu-pro-faq > article { min-width: 100%; } }
.pdu-pro-faq > article:hover { transform: translateY(-0.1875em); }
.pdu-pro-faq-item {
  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 (sjednoceno s eshop FAQ) */
.pdu-pro-faq-item[open] { box-shadow: inset 0.1875em 0 0 var(--pdu-barva-tmavomodra); }
.pdu-pro-faq-item > 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-pro-faq-item > summary::-webkit-details-marker { display: none; }
.pdu-pro-faq-item > 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-pro-faq-item[open] > summary::after { transform: translateY(-50%) rotate(180deg); }
.pdu-pro-faq-answer {
  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-pro-faq-answer p { margin: 0 0 0.5em; }
.pdu-pro-faq-answer p:last-child { margin: 0; }
.pdu-pro-faq-answer a { color: var(--pdu-barva-tmavomodra); text-decoration: underline; }
.pdu-pro-faq-answer a:hover { color: var(--pdu-barva-zelena-akcent); }


/* ───────────────────────────────────────────────────────────────────────
   SEKCE 10b. SIDEBAR OBCHODÁK (.pdu-pro-sidebar-obchodak)
   Kompaktní vertikální varianta obchoďáka pro pravý sloupec „Další informace".
   ───────────────────────────────────────────────────────────────────────
   Popis:
   - Kompaktní VERTIKÁLNÍ verze obchoďáka pro pravý sidebar
     div.extended-description (vedle hero pod cenou)
   - Vkládá se RUČNĚ — HTML se pastuje do krátkého popisu produktu
     (shortDescription), který Shoptet renderuje do div.extended-description.
     ŽÁDNÁ JS injekce: foot.js sidebar obchoďáka nevkládá a soubor
     data/obchodnici-map.json v pdu-code neexistuje (ověřeno 2026-07-29).
     Jediné, co do .extended-description injektuje foot.js, je SE-form widget.
   - Pattern: foto (kruh top-center) → name+role → bio (zkrácený) → 2 CTA stack

   STRUKTURA (HTML v krátkém popisu):
     <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 — blok 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: 7em;
  height: 7em;
  border-radius: 50%;
  object-fit: cover;
  border: 0;               /* bez bílého kolečka (ring) */
  box-shadow: none;
  background: transparent;
  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: var(--pdu-odsazeni-s, 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 (.pdu-pro-realizace)
   Tmavomodrý pás na konci popisu se žlutým CTA 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
   Vypíná přechody a animace uvnitř .pdu-pro-page při prefers-reduced-motion.
   ─────────────────────────────────────────────────────────────────────── */
@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á tabulka pro produkty i kategorie; jinde nový styl tabulky nevymýšlet.
   ───────────────────────────────────────────────────────────────────────
   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 var(--pdu-odsazeni-m, 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; }
}


/* ───────────────────────────────────────────────────────────────────────
   SEKCE 15. SIDEBAR GUIDE (.pdu-pro-guide) — „Další informace" / shortDescription
   Kompaktní styl pro obsah krátkého popisu v pravém sloupci; nahrazuje legacy
   inline-styled .button-kat guide.
   ───────────────────────────────────────────────────────────────────────
   Kompaktní pdu-pro styl pro obsah krátkého popisu (Shoptet ho renderuje do
   pravého sloupce .extended-description = „Další informace"). Nahrazuje legacy
   inline-styled .button-kat guide. Úzký sloupec → 1-col link-listy s + markerem,
   sekční sub-labely, 2 CTA tlačítka. Doplňuje .pdu-pro-sidebar-obchodak (SEKCE 10b).
   ─────────────────────────────────────────────────────────────────────── */
.pdu-pro-guide {
  font-family: inherit; font-size: var(--pdu-base-font-size);
  color: var(--pdu-barva-tmavomodra); box-sizing: border-box;
}
.pdu-pro-guide *, .pdu-pro-guide *::before, .pdu-pro-guide *::after { box-sizing: border-box; }
.pdu-pro-guide-intro {
  font-size: var(--pdu-font-size-s); color: var(--pdu-barva-text-sekundarni);
  line-height: 1.5; margin: 0 0 var(--pdu-odsazeni-m);
}
.pdu-pro-guide-h {
  font-size: var(--pdu-font-size-l); font-weight: 700;
  color: var(--pdu-barva-tmavomodra); margin: 0 0 var(--pdu-odsazeni-s);
}
.pdu-pro-guide-sub {
  font-size: var(--pdu-font-size-xs); font-weight: 700;
  color: var(--pdu-barva-zelena-akcent); text-transform: uppercase;
  letter-spacing: 0.04em; margin: var(--pdu-odsazeni-s) 0 var(--pdu-odsazeni-xs);
}
/* Varianta pro dlouhe pruvodce, kde se sekci vystrida pet a vic (prislusenstvi
   k plotovym panelum). Plain -sub ma font-size xs a mezi polozkami seznamu
   (font-size s) zanikne, protoze je MENSI nez text pod nim. Tahle varianta ho
   zvedne nad uroven seznamu, jinak nechava vzhled beze zmeny -- zadna vypln
   ani ramecek, sloupec uz nese kolecka a odrazky a dalsi barevna plocha ho
   zahlcuje (Simon 2026-08-27). Vetsi horni mezera oddeluje sekce misto pruhu.
   Selektor je dvoutridni ZAMERNE -- dkLAB zalozky si tenhle soubor importuji pod
   vlastnim ?v, takze stara nakesovana kopie se nacita az za hlavickou; jedna
   trida by neprebila. Stejny duvod jako u .pdu-pro-page .pdu-pro-needs-row vys. */
.pdu-pro-guide-sub.is-vyrazna {
  font-size: var(--pdu-font-size-m);
  margin: var(--pdu-odsazeni-l) 0 var(--pdu-odsazeni-xs);
}
.pdu-pro-guide ul { list-style: none; margin: 0 0 var(--pdu-odsazeni-s); padding: 0; }
.pdu-pro-guide li {
  position: relative; padding: 0.3em 0 0.3em 1.1em; line-height: 1.4;
  font-size: var(--pdu-font-size-s);
  border-bottom: 1px solid var(--pdu-barva-okraj-svetly);
}
.pdu-pro-guide li:last-child { border-bottom: 0; }
.pdu-pro-guide li::before {
  content: "+"; position: absolute; left: 0;
  color: var(--pdu-barva-zelena-akcent); font-weight: 700;
}
.pdu-pro-guide a { color: var(--pdu-barva-zelena-akcent); text-decoration: none; font-weight: 600; }
.pdu-pro-guide a:hover { text-decoration: underline; }
.pdu-pro-guide-note { color: var(--pdu-barva-text-sedy); font-weight: 400; }
/* ⚠ .is-alert = provozní upozornění, které se týká PŘEVZETÍ zásilky (atypická doprava,
   nutná pomoc při složení, individuální kalkulace). Sdělení, které zákazník musí vidět
   dřív, než objedná — šedá poznámka na to byla příliš tichá (Šimon 2026-09-02).
   Reuse: je to modifikátor existující .pdu-pro-guide-note, ne nová komponenta.
   Barva stojí na --pdu-barva-cervena-alert, který je v global.css popsaný přesně takhle
   (upozornění v produktových popisech). Rámeček je v úzkém 258px sloupci, proto menší
   padding a text zůstává ve velikosti okolí — křičet má rámeček, ne písmo. */
.pdu-pro-guide-note.is-alert {
  display: block;
  margin: var(--pdu-odsazeni-s) 0 0;
  padding: 0.7em 0.85em;
  color: var(--pdu-barva-tekst-zakladni);
  background: var(--pdu-barva-cervena-svetla);
  border: 1px solid var(--pdu-barva-cervena-alert);
  border-left-width: 0.25em;
  border-radius: var(--pdu-radius-s);
}
/* Cervena nese jen navesti (prvni strong). Klicova veta uvnitr textu zustava tucna,
   ale v zakladni barve — dva cervene bloky v uzkem sloupci uz jen kricely. */
.pdu-pro-guide-note.is-alert > strong:first-child { color: var(--pdu-barva-cervena-alert); }
.pdu-pro-guide-note.is-alert a { color: var(--pdu-barva-cervena-alert); text-decoration: underline; }
.pdu-pro-guide-note.is-alert a:hover { color: var(--pdu-barva-tekst-zakladni); }
.pdu-pro-guide-cta { display: flex; flex-direction: column; gap: var(--pdu-odsazeni-xs); margin: var(--pdu-odsazeni-m) 0 0; }
.pdu-pro-guide-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4em;
  padding: 0.7em 1em; border-radius: var(--pdu-radius-m); font-weight: 700;
  text-decoration: none !important; font-size: var(--pdu-font-size-s);
  border: 1px solid var(--pdu-barva-zelena-akcent);
  background: var(--pdu-barva-zelena-akcent); color: var(--pdu-barva-bila) !important;
  transition: all var(--pdu-prechod-dur-rychly) ease;
}
.pdu-pro-guide-btn.is-outline {
  background: var(--pdu-barva-bila); color: var(--pdu-barva-zelena-akcent) !important;
}
.pdu-pro-guide-btn:hover, .pdu-pro-guide-btn:focus-visible {
  background: var(--pdu-barva-bila); color: var(--pdu-barva-zelena-akcent) !important; outline: none;
}
.pdu-pro-guide-btn.is-outline:hover, .pdu-pro-guide-btn.is-outline:focus-visible {
  background: var(--pdu-barva-zelena-svetla-3);
}

/* ───────────────────────────────────────────────────────────────────────
   SEKCE 16. ŠTÍTKY RÁMEČEK (.pdu-pro-stitky-ramecek)
   Rámeček kolem interaktivního obrázku (dklab štítky) v kartě „Co dokoupit".
   Čistý box, nesmí restylovat vnitřní img (na rozdíl od .pdu-pag-ramecek-sedy).
   ─────────────────────────────────────────────────────────────────────── */
.pdu-pro-stitky-ramecek {
  border: 1px solid var(--pdu-barva-sede-stredni);
  border-radius: var(--pdu-radius-m);
  background: var(--pdu-barva-bila);
  padding: 0.75em;
  margin: var(--pdu-odsazeni-s) 0 var(--pdu-odsazeni-m);
}
.pdu-pro-stitky-ramecek > .dklab-stitky-main-wrapper { margin: 0; }

/* ───────────────────────────────────────────────────────────────────────
   SEKCE 17. SROVNÁNÍ DRUHŮ PLOTŮ (.pdu-pro-srovnani)
   Cross-sell karty (foto + text + CTA dole) v responsivní mřížce; tlačítko
   přišpendlené dolů = zarovnané napříč kartami, ne nalepené na text.
   ─────────────────────────────────────────────────────────────────────── */
.pdu-pro-srovnani { display: grid; grid-template-columns: repeat(auto-fit, minmax(13.5em, 1fr)); gap: var(--pdu-odsazeni-s); margin: var(--pdu-odsazeni-m) 0; }
.pdu-pro-srovnani-karta {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--pdu-barva-sede-stredni); border-radius: var(--pdu-radius-card);
  background: var(--pdu-barva-bila); box-shadow: var(--pdu-stin-jemny);
  transition: border-color var(--pdu-prechod-dur-rychly) ease, box-shadow var(--pdu-prechod-dur-rychly) ease, transform var(--pdu-prechod-dur-rychly) ease;
}
.pdu-pro-srovnani-karta:hover, .pdu-pro-srovnani-karta:focus-within {
  border-color: var(--pdu-barva-zelena-akcent);
  box-shadow: var(--pdu-stin-karta-hover);
  transform: translateY(-3px);
}
.pdu-pro-srovnani-karta.is-current { border: 2px solid var(--pdu-barva-zelena-akcent); }
.pdu-pro-srovnani-foto { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; transition: transform var(--pdu-prechod-dur-stredni) ease; }
.pdu-pro-srovnani-karta:hover .pdu-pro-srovnani-foto { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .pdu-pro-srovnani-karta, .pdu-pro-srovnani-foto { transition: none; }
  .pdu-pro-srovnani-karta:hover { transform: none; }
  .pdu-pro-srovnani-karta:hover .pdu-pro-srovnani-foto { transform: none; }
}
.pdu-pro-srovnani-telo { display: flex; flex-direction: column; gap: 0.35em; padding: 0.875em 1em 1em; flex: 1; }
.pdu-pro-srovnani-tag {
  align-self: flex-start; font-size: 0.7em; font-weight: 800; letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--pdu-barva-zelena-akcent);
}
.pdu-pro-srovnani-nadpis { margin: 0; font-size: 1.15em; font-weight: 800; color: var(--pdu-barva-tmavomodra); }
.pdu-pro-srovnani-text { margin: 0; font-size: var(--pdu-font-size-s); line-height: 1.5; color: var(--pdu-barva-tekst-zakladni); flex: 1; }
.pdu-pro-srovnani-btn {
  align-self: flex-start; margin-top: 0.85em;
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.55em 1em; border-radius: var(--pdu-radius-m); font-weight: 700; font-size: var(--pdu-font-size-s);
  text-decoration: none !important;
  border: 1px solid var(--pdu-barva-zelena-akcent); background: var(--pdu-barva-zelena-akcent); color: var(--pdu-barva-bila) !important;
  transition: all var(--pdu-prechod-dur-rychly) ease;
}
.pdu-pro-srovnani-btn.is-outline { background: var(--pdu-barva-bila); color: var(--pdu-barva-zelena-akcent) !important; }
.pdu-pro-srovnani-btn:hover, .pdu-pro-srovnani-btn:focus-visible { background: var(--pdu-barva-bila); color: var(--pdu-barva-zelena-akcent) !important; outline: none; }
.pdu-pro-srovnani-btn.is-outline:hover, .pdu-pro-srovnani-btn.is-outline:focus-visible { background: var(--pdu-barva-zelena-svetla-3); }


/* ───────────────────────────────────────────────────────────────────────
   SEKCE 18. INFO U DOSTUPNOSTI (.pdu-pro-beton-tip)
   Bublina „?" u textu „Skladem" — jen na detailu BETONOVÝCH produktů.
   ───────────────────────────────────────────────────────────────────────
   Popis:
   - Ikonu i bublinu vkládá JS internal-code/vendor/dklab/dostupnost-custom.js
     (funkce pduVlozBetonInfo, seznam betonových kódů v bloku PDU-BETON-DATA).
   - Vzhled je NATIVNÍ Shoptet (.show-tooltip.question-tooltip + Bootstrap 3
     tooltip) — stejná komponenta jako „?" u parametrů produktu (Frakce,
     Požární odolnost…), aby to na kartě nepůsobilo jako cizí prvek. Proto tu
     NENÍ žádný styl ikony ani bubliny, jen odsazení od textu „Skladem".
     Text je držený krátký, aby se vešel do nativní šířky tooltipu (200 px);
     vlastní `template` kvůli širší bublině rozhodil Bootstrapu výpočet pozice
     (tooltip se srazil na 85 px a vyjel z okna), proto se nepoužívá.
   - Vlastní pure-CSS tooltip (.pdu-pro-tip) tu byl do 2026-07-30 a byl zahozen
     ve prospěch nativního; s ním padl i JS přepočet pozice u okraje displeje
     (nativní si to řeší sám) a viditelný řádek nad tabulkou poboček.

   HTML (generuje JS):
     <span class="show-tooltip question-tooltip pdu-pro-beton-tip"
           title="…text…">?</span>
   ─────────────────────────────────────────────────────────────────────── */
.pdu-pro-beton-tip { margin-left: 0.2em; vertical-align: middle; cursor: help; }

/* Ikona sedí uvnitř .availability-label, a ten je v .availability-value se
   šířkou 0 px — v úzkém sloupci se pak ikona zalomí pod text „Skladem".
   Cílí jen na label, který naši ikonu obsahuje; kde :has() není podporované,
   se ikona jen zalomí na další řádek (kosmetika, nic se nerozbije). */
.availability-label:has(> .pdu-pro-beton-tip) { white-space: nowrap; }

/* Bublina: pevná šířka. Bootstrap dává .tooltip-inner jen max-width: 200px,
   což absolutně pozicovanému tooltipu nezabrání srazit se na šířku nejdelšího
   slova (~84 px = „naskladníme"). Cílí na vlastní obal z JS (template),
   takže ostatní tooltipy na e-shopu zůstávají nedotčené. */
.tooltip.pdu-pro-beton-bublina .tooltip-inner {
  /* 300 px = 7 řádků stávajícího textu. Při 260 px jich je 8, při 340 px 6,
     ale 340 už je na 375px displeji těsné. Druhá hodnota drží bublinu uvnitř
     i na úzkých telefonech (Bootstrap koriguje polohu, ne šířku). */
  width: 300px;
  max-width: calc(100vw - 24px);
  text-align: left;
  line-height: 1.45;
  padding: 0.5em 0.7em;
}

/* ──────────────────────────────────────────────────────────────────────────
   SEKCE 19. SPINNER LÍNÉ GALERIE (.splide__spinner v #main-slider)
   Kolečko „fotka se stahuje" v jgm/Splide galerii na detailu produktu.
   ──────────────────────────────────────────────────────────────────────────
   Proč: od 2026-09-03 galerie načítá fotky líně (gallery-boot.js SEKCE 3).
   Splide při stahování slidu vloží <span class="splide__spinner"> — jgm CSS
   ale pravidlem „.splide__slide:not(.image360wrap) span" (míří na obal fotky)
   nafoukne i spinner na 100 % × 100 % slidu → šedý oblouk přes celou fotku.
   Tohle pravidlo má vyšší specificitu (span.splide__spinner + totéž :not)
   a vrací spinner na 40 px kolečko v brand zelené (varianta A, 2026-09-03).
   Barvy s fallbackem: tokeny žijí v eshop/global.css.
   SEKCE 12 (reduced motion) míří jen do .pdu-pro-page, galerie je mimo —
   proto vlastní @media níže: bez animace zůstane statický zelený kroužek. */
.type-detail .gallery-new #main-slider .splide__slide:not(.image360wrap) span.splide__spinner {
  display: block;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  margin: auto;
  width: 40px;
  height: 40px;
  box-sizing: border-box;
  border: 3px solid var(--pdu-barva-okraj-zeleny-jemny, #E0ECE0);
  border-top-color: var(--pdu-barva-zelena-brand, #00a664);
  border-left-color: var(--pdu-barva-zelena-brand, #00a664);
  border-radius: 50%;
  animation: splide-loading .9s linear infinite;
  contain: strict;
}
@media (prefers-reduced-motion: reduce) {
  .type-detail .gallery-new #main-slider .splide__slide:not(.image360wrap) span.splide__spinner {
    animation: none;
  }
}