/* Jednotný vzhled popisů produktů (migrace z PrestaShopu).
 *
 * Popisy importované skriptem mají strukturu:
 *   .ss-popis            obal celého dlouhého popisu
 *     p.ss-claim         úvodní slogan
 *     h3, p, ul          vlastní popis (mezititulky jsou vždy h3)
 *     .ss-tabulka        obal tabulky (vodorovné posouvání na mobilu)
 *     .ss-sekce          sekce Využití (.ss-vyuziti), Návod (.ss-navod), Časté dotazy (.ss-faq), nadpis h2
 *     .ss-video          video z YouTube v poměru 16:9
 *
 * Vložení do Shoptetu: Vzhled a obsah > Editor > HTML kód > „Záhlaví“, celý obsah tohoto souboru
 * obalený značkou style (nebo vlastní CSS šablony). Písmo a barvy textu se dědí ze šablony; barvy upravíte v proměnných níže.
 */
.ss-popis {
  --ss-akcent: #1f6f78;       /* barva nadpisů sekcí a odrážek */
  --ss-linka: #e2e5e8;        /* linky tabulek a oddělení sekcí */
  --ss-podklad: #f5f7f8;      /* podklad hlavičky tabulky a sloganu */
  line-height: 1.6;
}

.ss-popis p { margin: 0 0 1em; }

.ss-popis .ss-claim {
  padding: .75em 1em;
  background: var(--ss-podklad);
  border-left: 4px solid var(--ss-akcent);
  font-size: 1.1em;
}
.ss-popis .ss-claim strong { font-weight: 600; }

.ss-popis h2 {
  margin: 0 0 .75em;
  font-size: 1.4em;
  color: var(--ss-akcent);
}
.ss-popis h3 {
  margin: 1.5em 0 .5em;
  font-size: 1.15em;
}

.ss-popis ul { margin: 0 0 1em; padding-left: 1.25em; }
.ss-popis li { margin: .25em 0; }
.ss-popis li::marker { color: var(--ss-akcent); }

.ss-popis img { max-width: 100%; height: auto; }

.ss-popis .ss-tabulka { overflow-x: auto; margin: 0 0 1.5em; }
.ss-popis table { border-collapse: collapse; min-width: 100%; }
.ss-popis th,
.ss-popis td {
  padding: .5em .75em;
  border-bottom: 1px solid var(--ss-linka);
  text-align: center;
  white-space: nowrap;
}
.ss-popis th { background: var(--ss-podklad); font-weight: 600; }

.ss-popis .ss-video {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 800px;
  margin: 0 0 1.5em;
}
.ss-popis .ss-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.ss-popis .ss-sekce {
  margin-top: 2em;
  padding-top: 1.5em;
  border-top: 1px solid var(--ss-linka);
}
.ss-popis .ss-faq h3 { margin-top: 1em; }