/****** 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)
 — SEKCE 7.  FAQ accordion (single-column, "+/−" indikátor)
 — SEKCE 8.  Reduced motion overrides (a11y)
 ****/


/* ╔══════════════════════════════════════════════════════════════
   📦 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 <1000px: 1-col stack (text first, video pod ním)
   - Desktop ≥1000px: 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: 6px;
  align-self: flex-start; /* jinak by se stretchla v flex-column parentu na full width */
  width: max-content; max-width: 100%;
  padding: 3px 10px; background: var(--pdu-barva-zelena-svetla-3); color: #00755a;
  border-radius: 20px; font-size: .72em; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase; margin-bottom: 8px;
}
/* pulsující zelená tečka — animation 2s infinite */
.pdu-cat-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--pdu-barva-zelena-akcent);
  box-shadow: 0 0 0 3px rgba(0, 180, 110, .18); animation: pduCatDotPulse 2s infinite;
}
@keyframes pduCatDotPulse { 50% { box-shadow: 0 0 0 7px rgba(0, 180, 110, 0); } }

.pdu-cat-intro {
  display: grid; grid-template-columns: 1fr; gap: 14px;
  grid-template-areas: "video" "text";
  margin: 0 0 12px; padding: 0 0 12px;
  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: 1000px) {
  .pdu-cat-intro {
    grid-template-columns: 7fr 5fr;
    grid-template-areas: "text video";
    gap: 28px; padding: 4px 0 12px;
  }
}
.pdu-cat-intro-text { display: flex; flex-direction: column; }
.pdu-cat-intro-text p {
  margin: 0 0 8px; line-height: 1.5;
  color: var(--pdu-cat-barva-text);
  font-size: .95em;
}
.pdu-cat-intro-text p:last-of-type { margin-bottom: 12px; }

/* perex / lead text — semi-prominent, tlumená barva */
.pdu-cat-lead {
  color: var(--pdu-barva-text-sekundarni); line-height: 1.5;
  margin: 0 0 8px; max-width: 56ch; font-size: 1em;
}
.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 ~392px parent col se buttony stackují. */
.pdu-cat-cta-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 0; }
.pdu-cat-cta-row > a { flex: 1 1 0; min-width: 190px; text-align: center; }

/* video aspekt 16:9, kompaktní — mobil max 440px centered, desktop fill 5fr column */
.pdu-cat-intro-video {
  width: 100%; max-width: 440px; margin: 0 auto;
  aspect-ratio: 16/9; border-radius: var(--pdu-radius-m); overflow: hidden;
  background: #000; box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}
@media (min-width: 1000px) {
  .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; }


/* ╔══════════════════════════════════════════════════════════════
   🎯 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×28px, font 1.05em, weight 700/800

   HTML usage (uvnitř .pdu-cat-hero-buttons row, gap 12px):
     <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 {
  display: inline-block;
  padding: 10px 20px;
  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 */
.pdu-cat-btn-primary {
  background: var(--pdu-barva-zelena-akcent);
  color: var(--pdu-barva-bila) !important;
  border: 1px solid var(--pdu-barva-zelena-akcent);
}
.pdu-cat-btn-primary:hover {
  background: var(--pdu-barva-bila);
  color: var(--pdu-barva-tmavomodra) !important;
  border-color: var(--pdu-barva-tmavomodra);
}
/* žlutý CTA (kontrastní eye-catcher) */
.pdu-cat-btn-cta {
  background: var(--pdu-barva-zluta-cta);
  color: var(--pdu-barva-tmavomodra) !important;
  border: 1px solid var(--pdu-barva-zluta-cta);
  font-weight: 800;
}
.pdu-cat-btn-cta:hover {
  background: var(--pdu-barva-bila);
  color: var(--pdu-barva-tmavomodra) !important;
  border-color: var(--pdu-barva-zluta-cta);
}


/* ╔══════════════════════════════════════════════════════════════
   📊 SEKCE 3. STATY (kompaktní 2×2 mřížka parametrů uvnitř aside)
   ──────────────────────────────────────────────────────────────
   Popis:
   - 4 karty v 2×2 gridu — vždy 2-col (kategorie má staty uvnitř úzkého
     pravého sloupce hero, nikoli fullwidth jako .pdu-pag-staty 3-col)
   - 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 72px = krátké, vejde se pod video v aside columně

   HTML usage (uvnitř .pdu-cat-intro-aside po videu):
     <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>
   ══════════════════════════════════════════════════════════════ */
.pdu-cat-staty {
  /* Skryto na mobilu — hero už má lead + výhody + CTA + video, staty by zbytečně zaplňovaly screen */
  display: none;
  grid-template-columns: repeat(4, 1fr); /* default pro 4 karty */
  gap: 8px;
  margin: 14px 0 0;
}
/* 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) */
}
@media (min-width: 1000px) { .pdu-cat-staty { display: grid; } }
.pdu-cat-stat {
  background: var(--pdu-barva-bila);
  border: 1px solid var(--pdu-barva-okraj-jemny);
  border-bottom: 2px solid var(--pdu-barva-zelena-akcent);
  border-radius: var(--pdu-radius-s);
  padding: 8px 6px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  box-shadow: var(--pdu-stin-jemny);
  height: 100%;
  text-decoration: none !important;
  transition: all var(--pdu-prechod-dur-stredni) ease;
  min-height: 72px;
}
.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.3em;
  font-weight: 800;
  line-height: 1;
  margin: 0 0 2px;
  display: block;
  letter-spacing: -.01em;
}
.pdu-cat-stat-num-emoji { font-size: 1.2em; line-height: 1; }
.pdu-cat-stat strong {
  color: var(--pdu-barva-tmavomodra);
  font-size: .85em;
  font-weight: 800;
  display: block;
  line-height: 1.2;
}
.pdu-cat-stat-desc {
  color: var(--pdu-barva-text-sedy);
  font-size: .72em;
  line-height: 1.3;
  display: block;
  margin-top: 1px;
}


/* ╔══════════════════════════════════════════════════════════════
   ➖ 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: 32px 0 28px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.pdu-cat-divider span {
  font-size: 11px;
  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 12px;
}
.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 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--pdu-barva-zelena-akcent);
  display: inline-block;
}
.pdu-cat-aio-intro {
  margin: 0 0 16px;
  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: 14px 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: 22px;
  font-weight: 300;
  color: var(--pdu-barva-zelena-akcent);
  line-height: 1;
  flex-shrink: 0;
  margin-left: 12px;
}
.pdu-cat-aio-details[open] summary::after { content: "−"; }
.pdu-cat-aio-content {
  padding: 4px 0 16px;
}
.pdu-cat-aio-content p {
  margin: 0 0 12px;
  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 {
  margin: 0 0 12px;
  padding-left: 22px;
  line-height: 1.7;
}
.pdu-cat-aio-content ul li { margin-bottom: 4px; }
.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 <600px: menší foto (72×72), padding 16px

   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 10px;
  padding: 24px;
  background: var(--pdu-barva-bila);
  border: 1px solid var(--pdu-barva-okraj-jemny);
  border-left: 4px solid var(--pdu-barva-zelena-akcent);
  border-radius: var(--pdu-radius-s);
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
}
.pdu-cat-autor-foto { flex-shrink: 0; }
.pdu-cat-autor-foto img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.pdu-cat-autor-info { flex: 1; min-width: 200px; }
.pdu-cat-autor-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--pdu-barva-zelena-akcent);
  margin: 0 0 4px;
}
.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 3px;
}
.pdu-cat-autor-role {
  font-size: var(--pdu-cat-fs-text-s);
  color: var(--pdu-barva-text-sedy);
  margin: 0 0 10px;
}
.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 14px;
}
.pdu-cat-autor-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.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: 5px 12px;
  border: 1px solid var(--pdu-barva-zelena-akcent);
  border-radius: var(--pdu-radius-s);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  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: 10px;
}
.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); }
/* ikonka tel/mail (13×13) v kontakt řádku — nahrazuje inline style="vertical-align:-2px" */
.pdu-cat-autor-ico {
  vertical-align: -2px;
  margin-right: 3px;
  width: 13px;
  height: 13px;
}
@media (max-width: 600px) {
  .pdu-cat-autor { padding: 16px; }
  .pdu-cat-autor-foto img { width: 72px; height: 72px; }
}


/* ╔══════════════════════════════════════════════════════════════
   ❓ 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ý 3px 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>
   ══════════════════════════════════════════════════════════════ */
.pdu-cat-faq { margin: 0; }
.pdu-cat-faq-title {
  font-size: var(--pdu-cat-fs-h2);
  font-weight: var(--pdu-cat-fw-h2);
  color: var(--pdu-cat-barva-nadpis);
  margin: 0 0 6px;
  padding-bottom: 14px;
  border-bottom: 3px solid var(--pdu-barva-zelena-akcent);
  display: inline-block;
}
.pdu-cat-faq-details {
  border-bottom: 1px solid var(--pdu-barva-okraj-jemny);
  padding: 0;
}
.pdu-cat-faq-details summary {
  padding: 13px 0;
  cursor: pointer;
  font-size: var(--pdu-cat-fs-text-m);
  font-weight: 600;
  color: var(--pdu-cat-barva-nadpis);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
}
.pdu-cat-faq-details summary::-webkit-details-marker { display: none; }
/* "+" indikátor → "−" na [open] (přes content swap, ne rotace) */
.pdu-cat-faq-details summary::after {
  content: "+";
  font-size: 20px;
  font-weight: 300;
  color: var(--pdu-barva-zelena-akcent);
  line-height: 1;
  flex-shrink: 0;
  margin-left: 12px;
}
.pdu-cat-faq-details[open] summary::after { content: "−"; }
.pdu-cat-faq-content {
  padding: 4px 0 14px;
  font-size: var(--pdu-cat-fs-text-m);
  line-height: 1.7;
  color: var(--pdu-cat-barva-text);
}
.pdu-cat-faq-content p { margin: 0 0 8px; }
.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. 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; }
}