/****** STYLY PRO KATEGORIE prefix .pdu-cat- ******/
/****** 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í bez rámečku)
 — SEKCE 1.  Intro hero (eyebrow + lead + CTA row + video) — paralelně k .pdu-pag-intro
 — SEKCE 2.  CTA tlačítka (primary zelený + cta žlutý) — paralelně k .pdu-pag-btn-*
 — SEKCE 3.  Staty (4 karty s emoji / čísly) — paralelně k .pdu-pag-staty
 — SEKCE 4.  Sekce divider (label uprostřed s linkami)
 — SEKCE 5.  AIO popis (~2000 znaků pro AI Overview, dolní popis — rozbalovací po sekcích)
 — SEKCE 6.  Autor karta (foto + bio + links + kontakt) — Schema.org/Person
 — SEKCE 7.  FAQ accordion (single-column, "+/−" indikátor) — Schema.org/FAQPage
 — SEKCE 8.  Související články grid (related cards) — Schema.org/ItemList — bundle interlinking
 — SEKCE 9.  Reduced motion overrides (a11y)
 — SEKCE 10. Help search (vyhledávací pole nad AIO + FAQ) — script-category.js BLOK 2
 ****/


/* ╔══════════════════════════════════════════════════════════════
   📦 SEKCE 0. STANDALONE UTILITY
   ──────────────────────────────────────────────────────────────
   Popis: světlešedé full-width pozadí bez rámečku (legacy reuse).
   ══════════════════════════════════════════════════════════════ */
.pdu-cat-pozadi-svetlesede-bez-okraje {
  width: 100%;
  background-color: var(--pdu-barva-sede-svetla);
  padding: var(--pdu-odsazeni-s) var(--pdu-odsazeni-l);
}


/* ╔══════════════════════════════════════════════════════════════
   🎬 SEKCE 1. INTRO HERO (eyebrow + lead + CTA + staty + video)
   ──────────────────────────────────────────────────────────────
   Popis:
   - Paralela k .pdu-pag-intro (style-pages.css sekce 20)
   - Mobil <62.5em: 1-col stack (text first, video pod ním)
   - Desktop ≥62.5em: 7fr text / 5fr video grid
   - Pořadí v text columně: eyebrow → lead → výhody → CTA row → staty (4×)
   - .pdu-cat-eyebrow = zelená pill s pulsujícím dotem ("Skladem")
   - .pdu-cat-lead = perex (semi-prominent, sekundární barva)
   - .pdu-cat-cta-row = equal-width CTA tlačítka (flex:1 1 0)
   - .pdu-cat-staty = 4 karty 2×2 / 4-col grid pod CTA (kompaktní stat-style)
   - .pdu-cat-intro-video = aspect 16:9 iframe (YouTube)
   - Bez vlastního H1 — H1 generuje Shoptet šablona pro kategorii

   HTML usage:
     <section class="pdu-cat-intro">
       <div class="pdu-cat-intro-text">
         <span class="pdu-cat-eyebrow">
           <span class="pdu-cat-dot"></span> Skladem · doprava 48 h
         </span>
         <p class="pdu-cat-lead">Lead text (perex)...</p>
         <p>Hlavní výhody: ...</p>
         <div class="pdu-cat-cta-row">
           <a class="pdu-cat-btn-cta" href="#info">VÍCE INFORMACÍ ↓</a>
           <a class="pdu-cat-btn-primary" href="#faq">Časté dotazy</a>
         </div>
         <div class="pdu-cat-staty">... 4× stat ...</div>
       </div>
       <div class="pdu-cat-intro-video">
         <iframe src="https://www.youtube.com/embed/..."></iframe>
       </div>
     </section>
   ══════════════════════════════════════════════════════════════ */
/* zelená pill nahoře s pulsujícím dot ("Skladem · doprava 48h") — kompakt */
.pdu-cat-eyebrow {
  display: inline-flex; align-items: center; gap: 0.375em;
  align-self: flex-start; /* jinak by se stretchla v flex-column parentu na full width */
  width: max-content; max-width: 100%;
  padding: 0.1875em 0.625em; background: var(--pdu-barva-zelena-svetla-3); color: #00755a;
  border-radius: 1.25em; font-size: .72em; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase; margin-bottom: 0.5em;
}
/* pulsující zelená tečka — animation 2s infinite */
.pdu-cat-dot {
  width: 0.4375em; height: 0.4375em; border-radius: 50%; background: var(--pdu-barva-zelena-akcent);
  box-shadow: 0 0 0 0.1875em rgba(0, 180, 110, .18); animation: pduCatDotPulse 2s infinite;
}
@keyframes pduCatDotPulse { 50% { box-shadow: 0 0 0 0.4375em rgba(0, 180, 110, 0); } }

.pdu-cat-intro {
  display: grid; grid-template-columns: 1fr; gap: 0.875em;
  grid-template-areas: "video" "text";
  margin: 0 0 0.75em; padding: 0 0 0.75em;
  border-bottom: 1px solid var(--pdu-barva-okraj-jemny);
  align-items: start;
}
.pdu-cat-intro-text  { grid-area: text; }
.pdu-cat-intro-video { grid-area: video; }
@media (min-width: 62.5em) {
  .pdu-cat-intro {
    grid-template-columns: 7fr 5fr;
    grid-template-areas: "text video";
    gap: 1.75em; padding: 0.25em 0 0.75em;
  }
}
.pdu-cat-intro-text { display: flex; flex-direction: column; }
.pdu-cat-intro-text p {
  margin: 0 0 0.5em; line-height: 1.55;
  color: var(--pdu-cat-barva-text);
  font-size: 1.05em;
}
.pdu-cat-intro-text p:last-of-type { margin-bottom: 0.75em; }

/* perex / lead text — semi-prominent, tlumená barva */
.pdu-cat-lead {
  color: var(--pdu-barva-text-sekundarni); line-height: 1.5;
  margin: 0 0 0.625em; max-width: 56ch; font-size: 1.15em;
}
.pdu-cat-lead strong { color: var(--pdu-barva-tmavomodra); font-weight: 800; }

/* equal-width CTA row (flex:1 1 0 — oba CTAs vyrovnané).
   min-width 190 = wrap-point: pod ~24.5em parent col se buttony stackují. */
.pdu-cat-cta-row { display: flex; gap: 0.625em; flex-wrap: wrap; margin: 0; }
.pdu-cat-cta-row > a { flex: 1 1 0; min-width: 11.875em; text-align: center; }

/* video aspekt 16:9, kompaktní — mobil max 27.5em centered, desktop fill 5fr column */
.pdu-cat-intro-video {
  width: 100%; max-width: 27.5em; margin: 0 auto;
  aspect-ratio: 16/9; border-radius: var(--pdu-radius-m); overflow: hidden;
  background: #000; box-shadow: 0 0.375em 1.125em rgba(0, 0, 0, .12);
}
@media (min-width: 62.5em) {
  .pdu-cat-intro-video { max-width: none; margin: 0; }
}
.pdu-cat-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-cat-intro-video img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Modifier: stats v pravém sloupci místo videa (pro stránky bez video embed — např. /ukazka-realizaci/) */
.pdu-cat-intro.is-staty-vpravo { grid-template-areas: "text" "video"; }
@media (min-width: 62.5em) {
  .pdu-cat-intro.is-staty-vpravo { grid-template-areas: "text video"; }
}
.pdu-cat-intro.is-staty-vpravo .pdu-cat-staty {
  grid-area: video;
  grid-template-columns: repeat(2, 1fr); /* mobile i desktop: 2×2 (override default 4-col na desktop) */
  margin: 0;
  order: 0;
}
@media (min-width: 62.5em) {
  .pdu-cat-intro.is-staty-vpravo .pdu-cat-staty { grid-template-columns: repeat(2, 1fr); align-self: stretch; }
  /* Stats v 2-col layoutu (vpravo) jsou širší → bump card font-size, aby typografie
     vizuálně odpovídala scale podhrabové-desky (4-col úzké karty). Em-based children
     (stat-num, strong, stat-desc) se škálují proporčně. */
  .pdu-cat-intro.is-staty-vpravo .pdu-cat-staty .pdu-cat-stat { min-height: 0; font-size: 1.1em; }
}


/* ╔══════════════════════════════════════════════════════════════
   🎯 SEKCE 2. CTA TLAČÍTKA (primary zelený + cta žlutý)
   ──────────────────────────────────────────────────────────────
   Popis:
   - Paralela k .pdu-pag-btn-primary / .pdu-pag-btn-cta — identický
     vizuální pattern napříč HP / pages / category
   - .pdu-cat-btn-primary = zelený CTA (brand zelená, bílý text)
   - .pdu-cat-btn-cta     = žlutý CTA (kontrastní žlutá s tmavým textem,
                             eye-catcher pro hlavní akci)
   - Hover: oba flipnou na bílé pozadí s tmavomodrým borderem
   - Padding 14×1.75em, font 1.05em, weight 700/800

   HTML usage (uvnitř .pdu-cat-hero-buttons row, gap 0.75em):
     <a class="pdu-cat-btn-cta" href="/...">VÍCE INFORMACÍ →</a>
     <a class="pdu-cat-btn-primary" href="#faq">Časté dotazy</a>
   ══════════════════════════════════════════════════════════════ */
.pdu-cat-btn-primary,
.pdu-cat-btn-cta,
.pdu-cat-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.625em 1.25em;
  font-size: .95em;
  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-cat-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-cat-btn-primary:hover,
.pdu-cat-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ý CTA — light glossy + sjednocený hover (tmavomodrá border + lift jako counter/sidebar) */
.pdu-cat-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-cat-btn-cta:hover,
.pdu-cat-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;
}
/* ghost — průhledné pozadí, tmavý text + jemný tmavý rámeček; hover → tmavomodré vyplnění + bílý text.
   Sjednoceno s .pdu-pag-btn-ghost z /kontakty/ (style-pages.css) */
.pdu-cat-btn-ghost {
  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-cat-btn-ghost:hover,
.pdu-cat-btn-ghost:focus-visible {
  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);
  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-cat-btn-primary > span,
.pdu-cat-btn-cta > span {
  display: block;
  line-height: 1;
  font-family: inherit;
}
.pdu-cat-btn-primary svg,
.pdu-cat-btn-cta svg {
  display: block;
  flex: 0 0 auto;
  width: 1.125em;
  height: 1.125em;
  transition: transform var(--pdu-prechod-dur-stredni) ease;
}
.pdu-cat-btn-primary:hover svg,
.pdu-cat-btn-primary:focus-visible svg,
.pdu-cat-btn-cta:hover svg,
.pdu-cat-btn-cta:focus-visible svg {
  transform: translateX(0.1875em);
}


/* ╔══════════════════════════════════════════════════════════════
   📊 SEKCE 3. STATY (kompaktní mřížka parametrů, mobil 2×2 pod videem / desktop 4-col v textu)
   ──────────────────────────────────────────────────────────────
   Popis:
   - 4 karty s emoji ikonou + label + hodnota
   - Mobile (<62.5em): 2×2 grid POD videem — order: -1 v flex column
     .pdu-cat-intro-text (skočí na první pozici před eyebrow/lead/výhody/CTA)
   - Desktop (≥62.5em): 4-col grid v přirozené pozici (konec textového sloupce)
   - Vizuální paralela k .pdu-pag-staty (bílá karta, zelený bottom-border,
     hover lift+shadow), ale výrazně kompaktnější padding a fonty
   - .pdu-cat-stat-num: 1.3em zelené číslo
   - .pdu-cat-stat-num-emoji: pro emoji ikonu místo čísla (1.2em)
   - Min-height 4.5em = krátké, vejde se pod video v aside columně

   HTML usage (uvnitř .pdu-cat-intro-text):
     <div class="pdu-cat-staty">
       <div class="pdu-cat-stat">
         <span class="pdu-cat-stat-num pdu-cat-stat-num-emoji">📐</span>
         <strong>Výška</strong>
         <span class="pdu-cat-stat-desc">100–200 cm</span>
       </div>
       ... ×4 ...
     </div>
   ══════════════════════════════════════════════════════════════ */
/* Mobile default: 2×2 grid pod videem (order: -1 = první v textovém flex column) */
.pdu-cat-staty {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5em;
  margin: 0 0 0.875em; /* spacing pod staty před zbytkem textu */
  order: -1; /* push pod video (před eyebrow/lead/výhody/CTA) */
}
/* Desktop: 4-col grid v přirozené pozici (konec textového sloupce) */
@media (min-width: 62.5em) {
  .pdu-cat-staty {
    grid-template-columns: repeat(4, 1fr); /* default pro 4 karty */
    margin: 0.875em 0 0; /* spacing nad staty (oddělí od CTA row) */
    order: 0; /* přirozená pozice na konci flex column */
  }
  /* Auto-detect počtu karet (CSS :has()) — stačí přidat / ubrat .pdu-cat-stat v markup */
  .pdu-cat-staty:has(.pdu-cat-stat:nth-child(5)):not(:has(.pdu-cat-stat:nth-child(7))) {
    grid-template-columns: repeat(3, 1fr); /* 5–6 karet → 3-col (5: 3+2, 6: 3+3) */
  }
  .pdu-cat-staty:has(.pdu-cat-stat:nth-child(7)):not(:has(.pdu-cat-stat:nth-child(9))) {
    grid-template-columns: repeat(4, 1fr); /* 7–8 karet → 4-col (7: 4+3, 8: 4+4) */
  }
}
.pdu-cat-stat {
  background: var(--pdu-barva-bila);
  border: 1px solid var(--pdu-barva-okraj-jemny);
  border-bottom: 0.125em solid var(--pdu-barva-zelena-akcent);
  border-radius: var(--pdu-radius-s);
  padding: 0.75em 0.625em;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.1875em;
  box-shadow: var(--pdu-stin-jemny);
  height: 100%;
  text-decoration: none !important;
  transition: all var(--pdu-prechod-dur-stredni) ease;
  min-height: 5.625em;
}
.pdu-cat-stat:hover {
  box-shadow: var(--pdu-stin-stredni);
  transform: translateY(-1px);
  border-color: var(--pdu-barva-zelena-akcent);
}
.pdu-cat-stat-num {
  color: var(--pdu-barva-zelena-akcent);
  font-size: 1.6em;
  font-weight: 800;
  line-height: 1;
  margin: 0 0 0.1875em;
  display: block;
  letter-spacing: -.01em;
}
.pdu-cat-stat-num-emoji { font-size: 1.55em; line-height: 1; }
.pdu-cat-stat strong {
  color: var(--pdu-barva-tmavomodra);
  font-size: 1em;
  font-weight: 800;
  display: block;
  line-height: 1.2;
}
.pdu-cat-stat-desc {
  color: var(--pdu-barva-text-sedy);
  font-size: .85em;
  line-height: 1.35;
  display: block;
  margin-top: 0.125em;
}


/* ╔══════════════════════════════════════════════════════════════
   ➖ SEKCE 4. SEKCE DIVIDER (label uprostřed)
   ──────────────────────────────────────────────────────────────
   Popis:
   - Vizuální separator mezi sekcemi spodního popisu
   - Centrovaný uppercase label + linky vlevo a vpravo
   - Použití: mezi AIO popisem / autorem / FAQ

   HTML usage:
     <div class="pdu-cat-divider"><span>Často kladené dotazy</span></div>
   ══════════════════════════════════════════════════════════════ */
.pdu-cat-divider {
  margin: 2em 0 1.75em;
  display: flex;
  align-items: center;
  gap: 0.75em;
}
.pdu-cat-divider 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-cat-divider::before,
.pdu-cat-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--pdu-barva-okraj-jemny);
}


/* ╔══════════════════════════════════════════════════════════════
   📖 SEKCE 5. AIO POPIS (long-form text pro AI Overview, rozbalovací)
   ──────────────────────────────────────────────────────────────
   Popis:
   - Strukturovaný popisný blok (~2000 znaků) pro AI Overview / LLM crawl
   - Vizuálně **rozbalovací po sekcích** — aby zákazníka nezahltil long-form text
   - Bez left-bar / borderu (clean look); H2 title se zeleným border-bottom
   - Krátký intro paragraph (vždy viditelný) + 5× <details> sekce
   - Každá <details> sekce: H3 jako summary + + indikátor → −
   - Texty uvnitř: max-width 70ch, line-height 1.7

   HTML usage:
     <section class="pdu-cat-aio">
       <h2 class="pdu-cat-aio-title">O poplastovaném čtyřhranném pletivu</h2>
       <p class="pdu-cat-aio-intro">Krátký intro (vždy viditelný)...</p>
       <details class="pdu-cat-aio-details">
         <summary>Vlastnosti a rozměry</summary>
         <div class="pdu-cat-aio-content">
           <p>Detail...</p>
         </div>
       </details>
       ... ×N ...
     </section>
   ══════════════════════════════════════════════════════════════ */
.pdu-cat-aio {
  margin: 0 0 0.75em;
}
.pdu-cat-aio-title {
  font-size: var(--pdu-cat-fs-h2);
  font-weight: var(--pdu-cat-fw-h2);
  color: var(--pdu-cat-barva-nadpis);
  margin: 0 0 0.875em;
  padding-bottom: 0.5em;
  border-bottom: 0.125em solid var(--pdu-barva-zelena-akcent);
  display: inline-block;
}
.pdu-cat-aio-intro {
  margin: 0 0 1em;
  line-height: 1.7;
  font-size: var(--pdu-cat-fs-text-m);
  color: var(--pdu-cat-barva-text);
  text-align: justify;
  max-width: 70ch;
}
.pdu-cat-aio-intro strong { color: var(--pdu-cat-barva-nadpis); font-weight: 700; }

/* <details> sekce — rozbalovací accordion */
.pdu-cat-aio-details {
  border-bottom: 1px solid var(--pdu-barva-okraj-jemny);
  padding: 0;
}
.pdu-cat-aio-details:first-of-type { border-top: 1px solid var(--pdu-barva-okraj-jemny); }
.pdu-cat-aio-details summary {
  padding: 0.875em 0;
  cursor: pointer;
  font-size: var(--pdu-cat-fs-h3);
  font-weight: var(--pdu-cat-fw-h3);
  color: var(--pdu-cat-barva-nadpis);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
}
.pdu-cat-aio-details summary::-webkit-details-marker { display: none; }
/* "+" indikátor → "−" na [open] */
.pdu-cat-aio-details summary::after {
  content: "+";
  font-size: 1.375em;
  font-weight: 300;
  color: var(--pdu-barva-zelena-akcent);
  line-height: 1;
  flex-shrink: 0;
  margin-left: 0.75em;
}
.pdu-cat-aio-details[open] summary::after { content: "−"; }
.pdu-cat-aio-content {
  padding: 0.25em 0 1em;
}
.pdu-cat-aio-content p {
  margin: 0 0 0.75em;
  line-height: 1.7;
  font-size: var(--pdu-cat-fs-text-m);
  color: var(--pdu-cat-barva-text);
  text-align: justify;
  max-width: 70ch;
}
.pdu-cat-aio-content p:last-child { margin-bottom: 0; }
.pdu-cat-aio-content ul,
.pdu-cat-aio-content ol {
  margin: 0 0 0.75em;
  padding-left: 1.375em;
  line-height: 1.7;
}
.pdu-cat-aio-content ul li,
.pdu-cat-aio-content ol li { margin-bottom: 0.25em; }
/* HowTo step ol — silnější vizuál pro postupy (montáž krok za krokem) */
.pdu-cat-aio-content ol.pdu-cat-howto {
  counter-reset: pduCatStep;
  list-style: none;
  padding-left: 0;
}
.pdu-cat-aio-content ol.pdu-cat-howto > li {
  counter-increment: pduCatStep;
  position: relative;
  padding: 0.25em 0 0.25em 2.375em;
  margin-bottom: 0.625em;
}
.pdu-cat-aio-content ol.pdu-cat-howto > li::before {
  content: counter(pduCatStep);
  position: absolute;
  left: 0;
  top: 0.125em;
  width: 1.625em;
  height: 1.625em;
  border-radius: 50%;
  background: var(--pdu-barva-zelena-akcent);
  color: var(--pdu-barva-bila);
  font-weight: 700;
  font-size: 0.8125em;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.pdu-cat-aio-content a {
  color: var(--pdu-cat-barva-link);
  text-decoration: underline;
}
.pdu-cat-aio-content a:hover { color: var(--pdu-cat-barva-link-hover); }


/* ╔══════════════════════════════════════════════════════════════
   👤 SEKCE 6. AUTOR KARTA (foto + bio + links + kontakt)
   ──────────────────────────────────────────────────────────────
   Popis:
   - Schema.org/Person friendly (itemscope, itemprop)
   - Foto 100×100 kruh vlevo, info vpravo (flex:1)
   - 3× SVG-ikona link (články / fotogalerie / montáž) + kontakt (tel/mail)
   - Mobil <37.5em: menší foto (72×72), padding 1em

   HTML usage:
     <div class="pdu-cat-autor" itemscope itemtype="https://schema.org/Person">
       <div class="pdu-cat-autor-foto"><img src="..." itemprop="image"></div>
       <div class="pdu-cat-autor-info">
         <p class="pdu-cat-autor-label">Autor & odborný garant</p>
         <p class="pdu-cat-autor-jmeno" itemprop="name">Jméno</p>
         <p class="pdu-cat-autor-role" itemprop="jobTitle">Role</p>
         <p class="pdu-cat-autor-bio" itemprop="description">Bio...</p>
         <div class="pdu-cat-autor-links">
           <a class="pdu-cat-autor-link" href="..."><svg>...</svg> Label</a>
         </div>
         <div class="pdu-cat-autor-kontakt">
           <span><img class="pdu-cat-autor-ico" src="..."> <a href="tel:...">377...</a></span>
         </div>
       </div>
     </div>
   ══════════════════════════════════════════════════════════════ */
.pdu-cat-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-cat-autor-foto { flex-shrink: 0; }
.pdu-cat-autor-foto img {
  width: 6.25em;
  height: 6.25em;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.pdu-cat-autor-info { flex: 1; min-width: 12.5em; }
.pdu-cat-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-cat-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-cat-autor-role {
  font-size: var(--pdu-cat-fs-text-s);
  color: var(--pdu-barva-text-sedy);
  margin: 0 0 0.625em;
}
.pdu-cat-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-cat-autor-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin-bottom: 0.875em;
}
.pdu-cat-autor-link {
  font-size: var(--pdu-cat-fs-text-s);
  color: var(--pdu-barva-zelena-akcent);
  text-decoration: none;
  font-weight: 600;
  padding: 0.3125em 0.75em;
  border: 1px solid var(--pdu-barva-zelena-akcent);
  border-radius: var(--pdu-radius-s);
  display: inline-flex;
  align-items: center;
  gap: 0.3125em;
  transition: background var(--pdu-prechod-dur-rychly),
              color var(--pdu-prechod-dur-rychly);
}
.pdu-cat-autor-link:hover {
  background: var(--pdu-barva-zelena-akcent);
  color: var(--pdu-barva-bila);
}
.pdu-cat-autor-kontakt {
  font-size: var(--pdu-cat-fs-text-xs);
  color: var(--pdu-barva-text-sedy);
  display: flex;
  flex-wrap: wrap;
  gap: 0.625em;
}
.pdu-cat-autor-kontakt a {
  color: var(--pdu-barva-text-sekundarni);
  text-decoration: none;
}
.pdu-cat-autor-kontakt a:hover { color: var(--pdu-barva-zelena-akcent); }
/* Větší CTA buttony v autor kartě (tel + mail) — pillulky využívající .pdu-cat-btn-cta a .pdu-cat-btn-primary z SEKCE 2 */
.pdu-cat-autor-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625em;
  margin-top: 0.25em;
}
/* ikonka tel/mail (13×13) v kontakt řádku — nahrazuje inline style="vertical-align:-0.125em" */
.pdu-cat-autor-ico {
  vertical-align: -0.125em;
  margin-right: 0.1875em;
  width: 0.8125em;
  height: 0.8125em;
}
@media (max-width: 37.5em) {
  .pdu-cat-autor { padding: 1em; }
  .pdu-cat-autor-foto img { width: 4.5em; height: 4.5em; }
}


/* ╔══════════════════════════════════════════════════════════════
   ❓ SEKCE 7. FAQ ACCORDION (single-column, "+/−" indikátor)
   ──────────────────────────────────────────────────────────────
   Popis:
   - Native HTML5 <details>/<summary> accordion (no-JS funguje)
   - Single-column layout (na rozdíl od pdu-pag-faq 2-col flex)
   - "+/−" indikátor vpravo místo "▼/▲" rotace
   - H2 title má zelený 0.1875em border-bottom (inline-block)
   - Schema.org/FAQPage friendly (mainEntity, Question, Answer)
   - script-category.js BLOK 1 dělá "close-others" (single-open behavior)

   HTML usage:
     <section class="pdu-cat-faq" itemscope itemtype="https://schema.org/FAQPage">
       <h2 id="faq" class="pdu-cat-faq-title">Často kladené dotazy</h2>
       <details class="pdu-cat-faq-details" itemscope itemprop="mainEntity"
                itemtype="https://schema.org/Question">
         <summary itemprop="name">Otázka?</summary>
         <div class="pdu-cat-faq-content" itemscope itemprop="acceptedAnswer"
              itemtype="https://schema.org/Answer">
           <div itemprop="text"><p>Odpověď...</p></div>
         </div>
       </details>
       ... N×
     </section>
   ══════════════════════════════════════════════════════════════ */
/* FAQ — sjednoceno s .pdu-pag-faq design (2-col grid bílých karet, zelený inset-bar, ▼ indikátor).
   HTML: <section class="pdu-cat-faq">→<h2 class="pdu-cat-faq-title">+<details class="pdu-cat-faq-details">N×
   Schema.org markup (itemscope itemprop="mainEntity") zůstává na <details> přímo. */
.pdu-cat-faq {
  display: flex; flex-wrap: wrap; gap: 0.5em; margin: 0 0 1.75em;
  list-style: none; padding: 0;
}
.pdu-cat-faq-title {
  flex-basis: 100%;
  font-size: var(--pdu-cat-fs-h2);
  font-weight: var(--pdu-cat-fw-h2);
  color: var(--pdu-cat-barva-nadpis);
  margin: 0 0 0.375em;
}
.pdu-cat-faq-details {
  flex: 1; min-width: calc(50% - 0.25em);
  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, transform var(--pdu-prechod-dur-stredni) ease-in;
}
@media (max-width: 47.5em) { .pdu-cat-faq-details { min-width: 100%; } }
.pdu-cat-faq-details:hover { transform: translateY(-0.1875em); }
/* otevřený detail = tmavomodrý inset-bar */
.pdu-cat-faq-details[open] { box-shadow: inset 0.1875em 0 0 var(--pdu-barva-tmavomodra); }
.pdu-cat-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; user-select: none;
}
.pdu-cat-faq-details summary::-webkit-details-marker { display: none; }
/* ▼ indikátor — rotuje 180° na open (sjednoceno s .pdu-pag-faq) */
.pdu-cat-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-cat-faq-details[open] summary::after { transform: translateY(-50%) rotate(180deg); }
.pdu-cat-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-cat-faq-content p { margin: 0 0 0.5em; }
.pdu-cat-faq-content p:last-child { margin-bottom: 0; }
.pdu-cat-faq-content a { color: var(--pdu-cat-barva-link); text-decoration: underline; }
.pdu-cat-faq-content a:hover { color: var(--pdu-cat-barva-link-hover); }


/* ╔══════════════════════════════════════════════════════════════
   🔗 SEKCE 8. SOUVISEJÍCÍ ČLÁNKY GRID (related cards)
   ──────────────────────────────────────────────────────────────
   Popis:
   - Grid karet pro interlinking na blog/info stránky stejného bundle
   - Bundle-aware: pillar kategorie → child blogy/návody (AIO topical authority)
   - Auto-fill minmax(16.25em, 1fr) — adaptivní grid (1/2/3/4 col podle šířky)
   - Karta: levý zelený accent border (0.1875em) + eyebrow chip (Návod/Blog/Článek)
            + H4 title + 1-liner description
   - Hover: translateY(-0.125em) + tinted shadow + tmavomodrý accent
   - Schema.org/ItemList compatible (itemListElement = WebPage / ListItem)

   HTML usage:
     <div class="pdu-cat-related" itemscope itemtype="https://schema.org/ItemList">
       <meta itemprop="name" content="Související články a návody">
       <a class="pdu-cat-related-card" href="/blog/..." itemprop="itemListElement"
          itemscope itemtype="https://schema.org/ListItem">
         <meta itemprop="position" content="1">
         <span class="pdu-cat-related-eyebrow">Blog</span>
         <strong itemprop="name">Title</strong>
         <span class="pdu-cat-related-desc" itemprop="description">Desc...</span>
       </a>
       ... ×N ...
     </div>
   ══════════════════════════════════════════════════════════════ */
.pdu-cat-related {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16.25em, 1fr));
  gap: 0.75em;
  margin: 1em 0 1.75em;
}
.pdu-cat-related-card {
  display: flex;
  flex-direction: column;
  gap: 0.375em;
  padding: 0.875em 1em;
  background: var(--pdu-barva-bila);
  border: 1px solid var(--pdu-barva-okraj-jemny);
  border-left: 0.1875em solid var(--pdu-barva-zelena-akcent);
  border-radius: var(--pdu-radius-s);
  text-decoration: none;
  color: var(--pdu-cat-barva-nadpis);
  transition: transform var(--pdu-prechod-dur-rychly),
              box-shadow var(--pdu-prechod-dur-rychly),
              border-color var(--pdu-prechod-dur-rychly);
}
.pdu-cat-related-card:hover {
  transform: translateY(-0.125em);
  box-shadow: 0 0.25em 0.75em rgba(0, 0, 0, .08);
  border-left-color: var(--pdu-cat-barva-nadpis);
}
.pdu-cat-related-eyebrow {
  font-size: 0.6875em;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--pdu-barva-zelena-akcent);
  font-weight: 700;
}
.pdu-cat-related-card strong {
  font-size: 0.9375em;
  line-height: 1.3;
  color: var(--pdu-cat-barva-nadpis);
}
.pdu-cat-related-desc {
  font-size: 0.8125em;
  line-height: 1.45;
  color: var(--pdu-barva-text-sedy);
}


/* ╔══════════════════════════════════════════════════════════════
   ♿ SEKCE 9. REDUCED MOTION OVERRIDES (a11y)
   ──────────────────────────────────────────────────────────────
   Popis: Vypne hover-lift + transform na komponentách v této knihovně,
          baseline reset je v eshop/global.css sekce 3.
   ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .pdu-cat-param-karta:hover { transform: none; }
  .pdu-cat-related-card:hover { transform: none; }
  .pdu-realizace-hit:hover { transform: none; }
}

/* ╔══════════════════════════════════════════════════════════════
   🖼️ BANNER IMAGE — centered, block-level
   Použití na konci kategorie-*-dolni jako CTA banner k /realizace-montaze/.
   HTML: <a href="..."><img class="pdu-cat-banner-img" src="..." alt="..." /></a>
   ══════════════════════════════════════════════════════════════ */
.pdu-cat-banner-img { display: block; margin: 0.3125em auto; }


/* ╔══════════════════════════════════════════════════════════════
   🔎 SEKCE 10. REALIZACE SEARCH — vyhledávání realizací (galerie)
   ──────────────────────────────────────────────────────────────
   Popis:
   - Search bar (#pdu-realizace-input) + topic štítky (data-q) hledají
     napříč VŠEMI realizacemi (z indexu realizace-index.json) a vykreslí
     shody jako prokliky (.pdu-realizace-hit: náhled + název + šipka → URL
     realizace) do #pdu-realizace-results. JS BLOK 2 ve script-category.js.
   - Pole je v HORNÍM popisu, nad nativní galerií produktů.
   - Bez JS: pole je inertní (no-op); galerie funguje normálně.

   HTML usage:
     <section id="pdu-realizace-search" class="pdu-cat-search"
              data-index="/user/documents/pdu-code/sections/category/realizace-index.json?v=r1">
       <label class="pdu-cat-search-label" for="pdu-realizace-input">Najděte si realizaci</label>
       <div class="pdu-cat-search-bar">
         <input id="pdu-realizace-input" class="pdu-cat-search-input" type="search"
                autocomplete="off" placeholder="Hledejte realizace — např. betonový plot, panely, Plzeň…" />
         <button id="pdu-realizace-clear" class="pdu-cat-search-clear" type="button" hidden>×</button>
       </div>
       <div class="pdu-cat-search-tags" id="pdu-realizace-tags"> …data-q štítky… </div>
       <p class="pdu-cat-search-hint" id="pdu-realizace-hint">&nbsp;</p>
       <div class="pdu-cat-search-results" id="pdu-realizace-results"></div>
       <div class="pdu-cat-search-nohit" id="pdu-realizace-nohit"></div>
     </section>
   ══════════════════════════════════════════════════════════════ */
.pdu-cat-search { margin: 0 0 1.25em; }
.pdu-cat-search-label {
  display: block; margin: 0 0 0.5em; line-height: 1.25;
  font-size: var(--pdu-cat-fs-h2); font-weight: var(--pdu-cat-fw-h2);
  color: var(--pdu-cat-barva-nadpis);
}
.pdu-cat-search-bar { position: relative; display: flex; }
.pdu-cat-search-input {
  width: 100%; box-sizing: border-box;
  padding: 0.875em 2.75em 0.875em 1.125em;
  font: inherit; 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-cat-search-input:focus {
  outline: none;
  box-shadow: 0 0 0 0.25em var(--pdu-barva-okraj-jemny);
}
.pdu-cat-search-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-cat-search-hint {
  margin: 0.625em 0.125em; min-height: 1.125em;
  font-size: 0.875em; color: var(--pdu-barva-text-sedy);
}
/* vysvětlující řádek nad štítky */
.pdu-cat-search-tags-label { margin: 0.9em 0.125em 0; font-size: 0.85em; color: var(--pdu-barva-text-sedy); }
/* rychlé štítky = odkazy na NATIVNÍ Shoptet filtr (typ oplocení/doplněk přes ?pvID); JS BLOK 2 jen zvýrazní aktivní */
.pdu-cat-search-tags { display: flex; flex-wrap: wrap; gap: 0.5em; margin: 0.5em 0 0; }
.pdu-cat-search-tag {
  border: 1px solid var(--pdu-barva-okraj-jemny); background: var(--pdu-barva-bila);
  color: var(--pdu-barva-tmavomodra); border-radius: 2em; text-decoration: none;
  display: inline-block; line-height: 1.2;
  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-cat-search-tag:hover, .pdu-cat-search-tag:focus-visible {
  background: var(--pdu-barva-zelena-akcent); color: var(--pdu-barva-bila) !important;
  border-color: var(--pdu-barva-zelena-akcent); outline: none;
}
/* aktivní štítek (vybraný) — vyplněný + „✕" signál pro odebrání klikem */
.pdu-cat-search-tag.is-active {
  background: var(--pdu-barva-zelena-akcent); color: var(--pdu-barva-bila) !important;
  border-color: var(--pdu-barva-zelena-akcent);
}
.pdu-cat-search-tag.is-active::after { content: " ✕"; font-weight: 700; opacity: .85; }
/* ── výsledkový panel pod polem — prokliky na realizace (JS BLOK 2) ──
   Default skryté; JS přidá .is-on až při obsahu. NE :empty —
   Shoptet/TinyMCE do prázdného <div> vkládá &nbsp; → :empty by selhal.
   Responzivní mřížka karet (1 sloupec mobil → 2–3 desktop). */
.pdu-cat-search-results { display: none; grid-template-columns: repeat(auto-fill, minmax(15.5em, 1fr)); gap: 0.5em; margin: 0.75em 0 0; }
.pdu-cat-search-results.is-on { display: grid; }
/* karta realizace = proklik (náhled + název + šipka) */
.pdu-realizace-hit {
  display: flex; align-items: center; gap: 0.625em;
  padding: 0.5em 0.625em;
  background: var(--pdu-barva-bila);
  border: 1px solid var(--pdu-barva-okraj-jemny);
  border-radius: var(--pdu-radius-s);
  text-decoration: none; color: var(--pdu-barva-tmavomodra);
  transition: border-color var(--pdu-prechod-dur-rychly), box-shadow var(--pdu-prechod-dur-rychly), transform var(--pdu-prechod-dur-rychly);
}
.pdu-realizace-hit:hover {
  border-color: var(--pdu-barva-zelena-akcent);
  box-shadow: 0 0.25em 0.75em rgba(0, 0, 0, .08);
  transform: translateY(-0.0625em);
}
.pdu-realizace-hit-img {
  flex: none; width: 4em; height: 3em; overflow: hidden;
  border-radius: var(--pdu-radius-s); background: var(--pdu-barva-sede-svetla);
}
.pdu-realizace-hit-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdu-realizace-hit-name {
  flex: 1 1 auto; min-width: 0;
  font-size: 0.875em; font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pdu-realizace-hit-year { font-weight: 400; font-size: 0.85em; color: var(--pdu-barva-text-sedy); white-space: nowrap; }
.pdu-realizace-hit-arrow { flex: none; color: var(--pdu-barva-zelena-akcent); font-weight: 700; }
/* zvýraznění shody hledaného výrazu v názvu */
.pdu-realizace-hl { background: #e3f5ec; color: inherit; font-weight: 700; border-radius: 2px; padding: 0 1px; }
/* tlačítko „zobrazit všech N" pod výsledky */
.pdu-realizace-more {
  display: block; width: 100%; box-sizing: border-box; margin: 0.375em 0 0; padding: 0.625em 1em;
  font: inherit; font-size: 0.9em; font-weight: 600; cursor: pointer;
  color: var(--pdu-barva-zelena-akcent); background: var(--pdu-barva-bila);
  border: 1px dashed var(--pdu-barva-zelena-akcent); border-radius: var(--pdu-radius-m);
  transition: all var(--pdu-prechod-dur-stredni) ease;
}
.pdu-realizace-more:hover, .pdu-realizace-more:focus-visible {
  background: var(--pdu-barva-zelena-akcent); color: var(--pdu-barva-bila) !important; outline: none;
}
/* výzva „zeptejte se" v patě výsledků (žádná shoda / víc než MAX) */
.pdu-cat-search-nohit {
  display: none;
  margin: 0.75em 0 0; padding: 1em 1.25em;
  background: var(--pdu-barva-sede-svetla); 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-cat-search-nohit.is-on { display: block; }
.pdu-cat-search-nohit a { color: var(--pdu-cat-barva-link); text-decoration: underline; }


/****** PDU INFO-CARDS (.pic) — info karty + doporucene pilulky ******/
.pic{--g:var(--pdu-barva-zelena-brand,#00a664);--ga:var(--pdu-barva-zelena-akcent,#00b46e);--navy:var(--pdu-barva-tmavomodra,#191932);--bd:var(--pdu-barva-okraj-jemny,#e0e0e0);--mut:var(--pdu-barva-text-sedy,#666);--sel:var(--pdu-barva-zelena-svetla,#e6ffd1);--sec:var(--pdu-barva-text-sekundarni,#5b5b6e);margin:1em 0 1.4em;font-size:16px;line-height:1.45;color:var(--pdu-barva-tekst-zakladni,#333)}
.pic *{box-sizing:border-box}
.pic-sprite{position:absolute;width:0;height:0;overflow:hidden}
.pic-lab{display:flex;align-items:center;gap:.4em;font-size:.78em;color:var(--mut);margin:0 0 .55em}
.pic-ico{width:1.15em;height:1.15em;flex:none;stroke:var(--ga);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.pic-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.5em}
.pic-card{display:flex;align-items:center;gap:.5em;width:100%;padding:.62em .7em;background:var(--pdu-barva-bila,#fff);border:1px solid var(--bd);border-bottom:.125em solid var(--ga);border-radius:var(--pdu-radius-s,.1875em);cursor:pointer;text-align:left;font:inherit;color:inherit;box-shadow:var(--pdu-stin-jemny,0 .25em .625em rgba(0,0,0,.04));transition:all var(--pdu-prechod-dur-stredni,.25s) ease}
.pic-card:hover{box-shadow:var(--pdu-stin-stredni,0 .375em 1.25em rgba(0,0,0,.06));transform:translateY(-1px);border-color:var(--ga)}
.pic-card b{display:block;font-size:.85em;font-weight:700;color:var(--navy);line-height:1.2}
.pic-card small{display:block;font-size:.7em;color:var(--mut);margin-top:.1em}
.pic-tx{flex:1;min-width:0}
.pic-chev{width:1.05em;height:1.05em;flex:none;stroke:var(--mut);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.pic-card.is-on{border-color:var(--ga);background:var(--sel)}
.pic-card.is-on .pic-chev{transform:rotate(180deg)}
.pic-panel{margin-top:.55em;background:var(--pdu-barva-bila,#fff);border:1px solid var(--bd);border-bottom:.125em solid var(--ga);border-radius:var(--pdu-radius-card,.625em);box-shadow:var(--pdu-stin-jemny,0 .25em .625em rgba(0,0,0,.04));padding:.85em .95em}
.pic-panel p{margin:0 0 .75em;font-size:.85em;line-height:1.55;color:var(--sec)}
.pic-panel p b{color:var(--navy);font-weight:700}
.pic .pdu-cat-btn-ghost svg,.pic-more svg{width:1.05em;height:1.05em;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pic .pdu-cat-btn-ghost{font-size:.85em}
.pic-more{display:inline-flex;align-items:center;gap:.4em;font-size:.82em;font-weight:500;color:var(--g);text-decoration:none}
.pic-picks{display:flex;flex-wrap:wrap;gap:.4em;margin:0 0 .7em}
.pic-pick{display:inline-flex;align-items:center;gap:.35em;font:inherit;font-size:.8em;font-weight:700;padding:.4em .8em;border:1px solid var(--ga);border-radius:2em;background:var(--g);color:var(--pdu-barva-bila,#fff);text-decoration:none;transition:background .2s,color .2s}
.pic-pick:hover{background:var(--pdu-barva-bila,#fff);color:var(--g)}
.pic-pick svg{width:.95em;height:.95em;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pdu-cat-intro-text .pic{order:-1;margin:0 0 .875em}
@media(min-width:62.5em){.pic-grid{grid-template-columns:repeat(4,1fr)}.pdu-cat-intro-text .pic{order:0;margin:.875em 0 0}.pic-more[data-match]{display:none}}
.pic-flash{animation:picflash 1.8s ease}
@keyframes picflash{0%,100%{box-shadow:0 0 0 0 rgba(0,180,110,0)}18%{box-shadow:0 0 0 3px var(--sel)}}