/* regals.de — product description styles (pd-* blocks)
   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.css?v4">
*/

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

   KAM VLOŽIT: Shoptet admin regals.de → Vzhled a obsah →
   Editor HTML kódu / vlastní CSS (hlavička). Vložit celý tento blok
   včetně <style> … </style>.

   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 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á.
   ============================================================ */

.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 */
  /* 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 --- */
.basic-description .pd-brand{margin:0 0 20px}
.basic-description .pd-brand img{max-height:56px;width:auto}

/* --- 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) --- */
.basic-description ul.pd-check,.basic-description ul.pd-tips{list-style:none;padding:0;margin:14px 0}
.basic-description ul.pd-check>li,.basic-description ul.pd-tips>li{position:relative;padding-left:32px;margin:7px 0}
.basic-description ul.pd-check>li::before,.basic-description ul.pd-tips>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}

/* --- 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{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}

/* --- 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)}

/* --- 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}

/* --- 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}
}