/* regals.de — product description styles (pd-* blocks)
   v6, 23. 9. 2026: design decisions from the DE audit, tested live on the
   test store (5 products, 23. 9.):
   - tips (ul.pd-tips) no longer look like features: soft grey cards with an
     orange wrench icon, 2 columns (a lone last card spans full width),
     1 column on mobile. Previously an alias of the green pd-check list.
   - material table verdicts get a coloured icon in front (✔ / ◐ / ✖);
     table and verdict text colours unchanged.
   - warning box (pd-box--warn) gets a red triangle icon + red label.
   - Lieferumfang list (ul.pd-list) becomes a grey panel with a box icon.
   - brand logo: fixed 180×60 box with object-fit (all logo shapes read at a
     similar weight); tall logos use .pd-brand--tall = 80×100, floated left,
     text wraps around. Logos need NO width/height attributes in the HTML.
   v5, 23. 9. 2026: lightbulb (orange SVG) before the label of the plain
   pd-box ("Wusstest du schon?") — variants --warn/--ok excluded; the
   label colour rule now also covers <strong> (Pyggi emits <strong>, not <b>).
   v4, 17. 9. 2026: h3 rule re-scoped to .pd-h3 so the theme heading
   ("Produktdetailbeschreibung") keeps its own size.
   Link: <link rel="stylesheet" href="/user/documents/upload/Style/pd-styles-de-v6.css">
*/

/* ============================================================
   REGALS.DE — vizuální úprava produktových popisků (pd-* bloky)
   Verze pro DE store. Vychází z pd-styles-HEADER-PASTE-v2.

   KAM VLOŽIT: soubor se nahrává přes FTP do
   /user/documents/upload/Style/ a je nalinkovaný z hlavičky
   (Editor HTML kódu). BEZ <style> tagů — je to .css soubor.
   KONVENCE (od v5): každá verze = nový soubor s číslem v názvu
   (pd-styles-de-v6.css) a v hlavičce se přepíše odkaz. Nový název
   souboru obchází cache sám, ?vN parametr už není potřeba.
   Starou verzi na FTP klidně nech — nic na ni neodkazuje.

   PROČ TO JDE 1:1 Z CZ:
   - DE šablona používá stejný kontejner .basic-description jako CZ
     (ověřeno na živém webu 17. 9.), takže všechna pravidla platí,
     přestože DE běží na jiné šabloně (blank/paxio vs. Disco).
   - DE téma už používá stejnou paletu: #F7941D i #67aa43 jsou přímo
     v jeho CSS. Barvy níže tedy nekolidují.

   JEDINÝ ROZDÍL PROTI CZ VERZI: přidané obecné pravidlo pro obrázky
   (viz „DE navíc" níže) — blank šablona nemusí mít max-width:100%.

   PO VLOŽENÍ ZKONTROLOVAT na jednom produktu:
   1) nadpisy pd-h mají oranžové podtržení jen pod textem,
   2) odrážky pd-check / pd-checks mají zelená kolečka s ✓ (ne šipky šablony),
   3) karty pd-cards se na mobilu zalomí pod sebe,
   4) tabulka pd-specs nepřetéká, verdikty mají ikonu ✔ / ◐ / ✖,
   5) box „Wusstest du schon?" má před labelem oranžovou žárovku,
   6) tipy (pd-tips) jsou šedé karty s oranžovým klíčem, ne zelené fajfky,
   7) logo značky má jednotnou velikost (max. 180×60).
   ============================================================ */

.basic-description{
  --pd-accent:#F7941D;   /* brand orange */
  --pd-dark:#252729;     /* near-black */
  --pd-grey:#cfcfcf;     /* light grey */
  --pd-green:#67aa43;    /* green */
  --pd-red:#c0392b;      /* negatives/warnings only */
  --pd-soft:#f5f5f5;     /* soft grey panels — same as the theme's table stripe */
  /* NO line-height here on purpose: the DE theme runs its body text at 1.8,
     and forcing 1.6 made the whole description visibly tighter than every
     other block on regals.de (measured on the live page 17. 9. 2026). */
}

/* --- DE navíc: pojistka proti přetečení obrázků v blank šabloně --- */
.basic-description img{max-width:100%;height:auto}

/* --- brand logo header --- */
/* Fixed box + object-fit: logos range from 0.63 (SENKICHI) to 4.7 (WISE)
   width/height ratio, so neither a fixed width nor a fixed height alone
   works. The explicit box also matters technically: the CDN SVGs carry only
   a viewBox (no pixel size), and with width:auto they collapse to 0×0.
   !important beats the height:auto of the "DE navíc" image rule above. */
.basic-description .pd-brand{margin:0 0 18px}
.basic-description .pd-brand img{display:block;width:180px !important;height:60px !important;max-width:100%;object-fit:contain;object-position:left center}
.basic-description .pd-brand--tall{float:left;margin:4px 22px 10px 0}
.basic-description .pd-brand--tall img{width:80px !important;height:100px !important;object-position:left top}
/* nothing below the lead may run beside a floated tall logo */
.basic-description h2.pd-h,.basic-description .pd-stats,.basic-description .pd-checks{clear:both}

/* --- section headings --- */
.basic-description h2.pd-h{
  font-size:1.45em;margin:1.7em 0 .6em;color:var(--pd-dark);
  padding-bottom:.25em;border-bottom:3px solid var(--pd-accent);
  display:table; /* shrink underline to text width */
}
/* MUST stay scoped to .pd-h3. The bare <h3> inside .basic-description is the
   THEME's own "Produktdetailbeschreibung" label, not product content — zero DE
   descriptions contain an <h3> — so an unscoped rule silently shrank the
   template's heading from 31px. */
.basic-description h3.pd-h3{font-size:1.15em;margin:1.3em 0 .4em;color:var(--pd-dark)}

/* --- intro / lead paragraph --- */
/* Intro paragraph: NO styling of its own. It used to carry font-size:1.05em,
   which made its line boxes taller than everything else (23.5px vs 22.4px) and
   read as a second font; replacing that with a dark colour was no better —
   #252729 against the theme's #656565 body text. It inherits both now. */

/* --- benefit cards (2–4 per row, wrap) --- */
.basic-description .pd-cards{display:flex;gap:14px;flex-wrap:wrap;margin:18px 0}
.basic-description .pd-card{
  flex:1 1 190px;min-width:150px;border:1px solid var(--pd-grey);
  border-radius:10px;padding:16px 14px;text-align:center;background:#fff;
}
.basic-description .pd-card svg{width:34px;height:34px;margin:0 auto 8px;display:block}
.basic-description .pd-card b{display:block;margin-bottom:4px;color:var(--pd-dark)}

/* --- checkmark list (beats the theme's arrow icons) --- */
/* v6: pd-tips is no longer an alias here — tips have their own card style below. */
.basic-description ul.pd-check{list-style:none;padding:0;margin:14px 0}
.basic-description ul.pd-check>li{position:relative;padding-left:32px;margin:7px 0}
.basic-description ul.pd-check>li::before{
  content:"\2713" !important;background-image:none !important;
  position:absolute;left:0;top:.15em;width:21px;height:21px;line-height:21px;
  text-align:center;border-radius:50%;background:var(--pd-green);
  color:#fff;font-weight:700;font-size:13px;
}
.basic-description ul.pd-check>li.pd-no::before{content:"\2715" !important;background:var(--pd-red)}

/* --- expandable checkmark list (title rows + on-demand detail) --- */
.basic-description .pd-checks{margin:16px 0;border-top:1px solid var(--pd-grey)}
.basic-description .pd-checks .pd-cx summary,
.basic-description .pd-checks .pd-cx-flat{position:relative;padding:10px 28px 10px 32px;font-weight:600;color:var(--pd-dark);border-bottom:1px solid var(--pd-grey);list-style:none}
.basic-description .pd-checks .pd-cx summary{cursor:pointer}
.basic-description .pd-checks .pd-cx summary::-webkit-details-marker{display:none}
.basic-description .pd-checks .pd-cx summary::before,
.basic-description .pd-checks .pd-cx-flat::before{content:"\2713";position:absolute;left:0;top:13px;width:21px;height:21px;line-height:21px;text-align:center;border-radius:50%;background:var(--pd-green);color:#fff;font-weight:700;font-size:13px}
.basic-description .pd-checks .pd-no summary::before{content:"\2715";background:var(--pd-red)}
.basic-description .pd-checks .pd-cx summary::after{content:"";position:absolute;right:8px;top:50%;width:8px;height:8px;border-right:2px solid var(--pd-accent);border-bottom:2px solid var(--pd-accent);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.basic-description .pd-checks .pd-cx[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.basic-description .pd-checks .pd-cx[open] summary{border-bottom-color:transparent}
.basic-description .pd-checks .pd-cx>p{margin:0;padding:0 8px 12px 32px;border-bottom:1px solid var(--pd-grey);color:#4a4d50}

/* --- v6: tips as soft grey cards (orange wrench = "how to use", not "what it is") --- */
/* !important on list/padding/::before beats the theme's own ul/li bullet styling. */
.basic-description ul.pd-tips{list-style:none !important;padding:0 !important;margin:20px 0 16px !important;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.basic-description ul.pd-tips>li:last-child:nth-child(odd){grid-column:1/-1}
.basic-description ul.pd-tips>li{position:relative !important;margin:0 !important;list-style:none !important;background:var(--pd-soft);border-radius:10px;padding:14px 16px 14px 46px !important}
.basic-description ul.pd-tips>li::before{content:"" !important;position:absolute !important;left:16px !important;top:16px !important;width:20px !important;height:20px !important;border:0 !important;border-radius:0 !important;background:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23F7941D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/%3E%3C/svg%3E') no-repeat center/contain !important}
.basic-description ul.pd-tips>li::after{content:none !important}
.basic-description ul.pd-tips>li>strong:first-child{display:block;color:var(--pd-dark);margin-bottom:3px}
.basic-description ul.pd-tips>li>strong:first-child+br{display:none}

/* --- big-number stats (real numbers only) --- */
.basic-description .pd-stats{display:flex;gap:14px;flex-wrap:wrap;margin:18px 0;text-align:center}
.basic-description .pd-stat{flex:1 1 130px;padding:10px 6px}
.basic-description .pd-stat b{display:block;font-size:1.9em;line-height:1.15;color:var(--pd-accent)}
.basic-description .pd-stat span{font-size:.92em;color:var(--pd-dark)}

/* --- numbered how-to steps --- */
.basic-description ol.pd-steps{list-style:none;counter-reset:pd;padding:0;margin:16px 0}
.basic-description ol.pd-steps>li{
  counter-increment:pd;position:relative;padding:0 0 18px 48px;margin:0;
}
.basic-description ol.pd-steps>li::before{
  content:counter(pd) !important;background-image:none !important;
  position:absolute;left:0;top:0;width:33px;height:33px;line-height:33px;
  text-align:center;border-radius:50%;background:var(--pd-accent);
  color:#fff;font-weight:700;
}
.basic-description ol.pd-steps>li>b{display:block;margin-bottom:2px}

/* --- highlight boxes: tip / warning / guarantee --- */
.basic-description .pd-box{
  border-left:4px solid var(--pd-accent);background:#fff7ec;
  border-radius:0 8px 8px 0;padding:13px 16px;margin:18px 0;
}
.basic-description .pd-box>b:first-child,
.basic-description .pd-box>strong:first-child{color:var(--pd-dark)}
.basic-description .pd-box--warn{border-left-color:var(--pd-red);background:#fdf1ee}
.basic-description .pd-box--ok{border-left-color:var(--pd-green);background:#f2f8ed}

/* v5: žárovka před labelem základního boxu („Wusstest du schon?").
   Jen plain pd-box — varianty --warn/--ok mají vlastní význam a ikonu v textu. */
.basic-description .pd-box:not(.pd-box--warn):not(.pd-box--ok)>b:first-child::before,
.basic-description .pd-box:not(.pd-box--warn):not(.pd-box--ok)>strong:first-child::before{
  content:"";display:inline-block;width:19px;height:19px;margin:0 7px -3px 0;
  background:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23F7941D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M9 18h6M10 21h4M12 3a7 7 0 0 0-4 12.7c.6.5 1 1.4 1 2.3h6c0-.9.4-1.8 1-2.3A7 7 0 0 0 12 3z"/%3E%3C/svg%3E') no-repeat center/contain;
}

/* v6: výstražný box — červený trojúhelník a červený label (protějšek žárovky) */
.basic-description .pd-box--warn>b:first-child,
.basic-description .pd-box--warn>strong:first-child{color:#a8321f}
.basic-description .pd-box--warn>b:first-child::before,
.basic-description .pd-box--warn>strong:first-child::before{
  content:"";display:inline-block;width:19px;height:19px;margin:0 7px -3px 0;
  background:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23c0392b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0zM12 9v4M12 17h.01"/%3E%3C/svg%3E') no-repeat center/contain;
}

/* --- curated key-specs table --- */
.basic-description table.pd-specs{width:100%;border-collapse:collapse;margin:16px 0}
.basic-description table.pd-specs th,
.basic-description table.pd-specs td{
  padding:9px 12px;border-bottom:1px solid var(--pd-grey);text-align:left;vertical-align:top;
}
.basic-description table.pd-specs th{width:42%;font-weight:600;color:var(--pd-dark);background:transparent}

/* --- compatibility verdicts inside pd-specs tables --- */
.basic-description table.pd-specs strong.pd-yes{color:var(--pd-green)}
.basic-description table.pd-specs strong.pd-mid{color:var(--pd-accent)}
.basic-description table.pd-specs strong.pd-no{color:var(--pd-red)}
/* v6: coloured icon in front of the verdict — plain glyphs, deliberately NOT the
   filled green circle of the feature list */
.basic-description table.pd-specs strong.pd-yes::before,
.basic-description table.pd-specs strong.pd-mid::before,
.basic-description table.pd-specs strong.pd-no::before{display:inline-block;width:1.15em;margin-right:3px;text-align:center}
.basic-description table.pd-specs strong.pd-yes::before{content:"\2714"}
.basic-description table.pd-specs strong.pd-mid::before{content:"\25D0"}
.basic-description table.pd-specs strong.pd-no::before{content:"\2716"}

/* --- FAQ accordion (native details/summary) --- */
/* Matches BOTH shapes: the spec's <details class="pd-faq"> and the
   <section class="pd-faq"><details> Pyggi actually emits. */
.basic-description details.pd-faq,.basic-description .pd-faq details{
  border:1px solid var(--pd-grey);border-radius:8px;margin:9px 0;
  padding:0 15px;background:#fff;
}
.basic-description .pd-faq summary{
  cursor:pointer;font-weight:600;padding:12px 26px 12px 0;
  list-style:none;position:relative;color:var(--pd-dark);
}
.basic-description .pd-faq summary::-webkit-details-marker{display:none}
.basic-description .pd-faq summary::after{
  content:"";position:absolute;right:3px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--pd-accent);border-bottom:2px solid var(--pd-accent);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s;
}
.basic-description .pd-faq[open] summary::after,
.basic-description .pd-faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.basic-description .pd-faq p{margin:0 0 13px}

/* --- centered image / infographic --- */
.basic-description .pd-img{margin:18px 0;text-align:center}
.basic-description .pd-img img{max-width:100%;height:auto;border-radius:8px;display:inline-block}
.basic-description .pd-img .pd-caption{display:block;font-size:.9em;color:#6b6f73;margin-top:6px}

/* --- video keeps the theme's own iframe treatment; wrapper for spacing --- */
.basic-description .pd-video{margin:18px 0}

/* --- package contents: plain ul, theme arrows are fine --- */
.basic-description ul.pd-package{margin:12px 0}

/* --- v6: Lieferumfang (ul.pd-list, Pyggi's package block) — grey panel with box icon --- */
.basic-description ul.pd-list{position:relative;list-style:none !important;margin:14px 0 !important;padding:14px 18px 14px 58px !important;background:var(--pd-soft);border-radius:10px}
.basic-description ul.pd-list::before{content:"";position:absolute;left:18px;top:15px;width:26px;height:26px;background:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23F7941D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/%3E%3Cpath d="M3.27 6.96 12 12.01l8.73-5.05M12 22.08V12"/%3E%3C/svg%3E') no-repeat center/contain}
.basic-description ul.pd-list>li{padding:4px 0 !important;margin:0 !important;list-style:none !important;border-bottom:1px solid #e3e3e3;color:var(--pd-dark)}
.basic-description ul.pd-list>li:last-child{border-bottom:0}
.basic-description ul.pd-list>li::before,.basic-description ul.pd-list>li::after{display:none !important}

/* --- mobile --- */
@media (max-width:600px){
  .basic-description .pd-card{flex-basis:100%}
  .basic-description .pd-stat{flex-basis:44%}
  .basic-description h2.pd-h{font-size:1.3em}
  .basic-description ul.pd-tips{grid-template-columns:1fr}
}