/* ==========================================================================
   ONSA Plus | op-core
   Zakladni promenne pro vsechny op- komponenty.
   Nacitat jako prvni, pred vsemi ostatnimi op- soubory.

   Jedno misto pro zaobleni, barvy, linky a spolecnou sirku prvku.
   Zmena jedne hodnoty se projevi ve vsech komponentach najednou.

   Barvy se napojuji na promenne Shoptet sablony. Kdyz sablona zmeni
   barevne schema, komponenty se prizpusobi. Hodnota za carkou je zaloha.
   ========================================================================== */

:root {
  /* Zaobleni */
  --op-radius-lg: 20px;   /* velke karty, trust box, rozcestniky */
  --op-radius: 12px;      /* tabulky, info boxy, FAQ */
  --op-radius-sm: 8px;    /* pilulky, badge, male prvky */

  /* Spolecna sirka prvku.
     Drzi tabulky, poznamky i trust box na stejne sirce a se stejnou
     levou hranou, at je kontejner sablony jakkoli siroky.
     Snizenim teto hodnoty zuzis vsechny prvky najednou. */
  --op-max: 900px;

  /* Barvy */
  --op-green: var(--color-secondary, #16A34A);
  --op-green-hover: var(--color-secondary-hover, #188B42);
  --op-green-bg: #F0FDF4;
  --op-gray-bg: var(--colors-surface-secondary, #F7F7F7);
  --op-ink: #111827;

  /* Linky */
  --op-line: var(--colors-foregrounds-borders-secondary, #DADADA);
  --op-line-soft: rgba(17, 24, 39, .10);
}

/* Sablona zaobluje dlazdice podkategorii jinak na mobilu a jinak
   na desktopu. Drzime se ji, aby nase karty sedely s jejimi. */
@media (max-width: 1199px) {
  :root {
    --op-radius-lg: 10px;
  }
}

/* ==========================================================================
   ONSA Plus | op-tbl
   Tabulka pro obsah kategorie, blogu, detailu produktu a staticke stranky.

   Vyzaduje op-core.css. Bez nej funguje se zalozními hodnotami v var().

   TRIDY
   .op-tbl-wrap        obal, povinny. Scroll, zaobleni, posuvnik, stin.
   .op-tbl-wrap--full  zrusi strop sirky, tabulka pres cely kontejner
   .op-tbl             samotna tabulka
   .op-tbl--zebra      stridave pruhy radku
   .op-tbl--compare    porovnavaci, centrovane bunky mimo prvniho sloupce
   .op-tbl--stack      na uzkem mobilu se rozpadne do karet.
                       POZOR: jen pro tabulky, kde jeden radek je jeden
                       produkt. Na porovnavaci tabulky nepouzivat, opakuji
                       se nazvy sloupcu.
   .is-best            zvyrazneny sloupec, dej na th i na vsechny td
   .op-tbl-yes/-no     ikony ano/ne
   .op-tbl-badge       stitek v hlavicce (napr. "odporucame")
   .op-tbl-hint        pomucka "potiahnite dolava", jen na mobilu
   .op-tbl-note        poznamka pod tabulkou (zdroj dat)

   POZNAMKY
   Prvni sloupec je prilepeny (sticky), pri scrollu zustava videt.
   Pozadi bunek je zamerne pruhledne, jinak by prekrylo stin na okraji.
   ========================================================================== */

/* --- Obal: scroll, zaobleni, stin na okraji ----------------------------- */
.op-tbl-wrap {
  display: block;
  width: 100%;
  max-width: var(--op-max, 900px);
  margin: 0 0 24px;
  border: 1px solid var(--op-line, #DADADA);
  border-radius: var(--op-radius, 12px);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;

  background-color: #FFFFFF;
  background-image:
    linear-gradient(to left, #FFFFFF 40%, rgba(255, 255, 255, 0)),
    radial-gradient(farthest-side at 100% 50%, rgba(17, 24, 39, .22), rgba(17, 24, 39, 0));
  background-position: right center, right center;
  background-repeat: no-repeat;
  background-size: 44px 100%, 18px 100%;
  background-attachment: local, scroll;

  scrollbar-width: thin;
  scrollbar-color: rgba(17, 24, 39, .25) transparent;
}

/* Trvale viditelny tenky sedy posuvnik.
   -webkit-appearance: none prepne prekryvny posuvnik na klasicky,
   jinak by ho mobil schoval a uzivatel by nevedel, ze tabulka pokracuje. */
.op-tbl-wrap::-webkit-scrollbar {
  -webkit-appearance: none;
  height: 6px;
}

.op-tbl-wrap::-webkit-scrollbar-track {
  background: rgba(17, 24, 39, .05);
}

.op-tbl-wrap::-webkit-scrollbar-thumb {
  background: rgba(17, 24, 39, .22);
  border-radius: 999px;
}

.op-tbl-wrap::-webkit-scrollbar-thumb:hover {
  background: rgba(17, 24, 39, .34);
}

.op-tbl-wrap--full {
  max-width: none;
}

.op-tbl-wrap:focus-visible {
  outline: 3px solid var(--colors-focus-primary, #09367E);
  outline-offset: 2px;
}

/* --- Tabulka ------------------------------------------------------------ */
.op-tbl,
#content .op-tbl,
.category-perex .op-tbl,
.category__secondDescription .op-tbl,
.news-item-detail .op-tbl,
.basic-description .op-tbl {
  width: 100%;
  min-width: 480px;
  margin: 0;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.5;
  color: var(--op-ink, #111827);
  background: transparent;
}

.op-tbl caption {
  caption-side: top;
  padding: 14px 16px 0;
  text-align: left;
  font-weight: 600;
  color: var(--op-ink, #111827);
}

.op-tbl th,
.op-tbl td {
  padding: 13px 16px;
  text-align: left;
  vertical-align: middle;
  border: 0;
  border-bottom: 1px solid var(--op-line-soft, rgba(17, 24, 39, .10));
  background: transparent;
}

/* Hlavicka */
.op-tbl thead th {
  background: var(--op-ink, #111827);
  color: #FFFFFF;
  font-weight: 600;
  white-space: nowrap;
  border-bottom: 0;
}

/* Prvni sloupec jako popiskovy + prilepeny pri scrollu */
.op-tbl tbody th {
  background: var(--op-gray-bg, #F7F7F7);
  font-weight: 600;
  border-right: 1px solid var(--op-line-soft, rgba(17, 24, 39, .10));
}

.op-tbl thead th:first-child,
.op-tbl tbody th {
  position: sticky;
  left: 0;
  z-index: 2;
}

.op-tbl thead th:first-child {
  z-index: 3;
  border-right: 1px solid rgba(255, 255, 255, .15);
}

/* Zebra, pruhledne kvuli stinu na okraji */
.op-tbl--zebra tbody tr:nth-child(even) td {
  background: rgba(17, 24, 39, .035);
}

/* Posledni radek bez linky */
.op-tbl tbody tr:last-child th,
.op-tbl tbody tr:last-child td {
  border-bottom: 0;
}

/* Hover radku */
.op-tbl tbody tr:hover td {
  background: rgba(22, 163, 74, .08);
}

.op-tbl tbody tr:hover th {
  background: var(--op-green-bg, #F0FDF4);
}

/* --- Porovnavaci varianta ----------------------------------------------- */
.op-tbl--compare td,
.op-tbl--compare thead th:not(:first-child) {
  text-align: center;
}

.op-tbl--compare th:first-child,
.op-tbl--compare td:first-child {
  text-align: left;
}

.op-tbl--compare th:first-child {
  width: 32%;
}

/* Zvyrazneny sloupec */
.op-tbl td.is-best {
  background: rgba(22, 163, 74, .07);
}

.op-tbl tbody tr:hover td.is-best {
  background: rgba(22, 163, 74, .13);
}

.op-tbl thead .is-best {
  background: var(--op-green, #16A34A);
  color: #FFFFFF;
}

.op-tbl-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--op-green-hover, #188B42);
  font-size: 11px;
  font-weight: 600;
  vertical-align: 2px;
  white-space: nowrap;
}

/* --- Ikony ano / ne ----------------------------------------------------- */
.op-tbl-yes,
.op-tbl-no {
  display: inline-block;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  overflow: hidden;
  text-indent: -999em;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
}

.op-tbl-yes {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316A34A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12.5l5.2 5.2L20 7'/></svg>");
}

.op-tbl-no {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' opacity='0.35'><path d='M6 6l12 12M18 6L6 18'/></svg>");
}

/* --- Text uvnitr tabulky ------------------------------------------------ */
.op-tbl strong,
.op-tbl b {
  display: inline;
  font-weight: 600;
  font-size: inherit;
  line-height: inherit;
}

/* Sablona podtrhava odkazy v obsahu, proto !important */
.op-tbl a,
.category__secondDescription .op-tbl a,
.category-perex .op-tbl a,
.news-item-detail .op-tbl a,
.basic-description .op-tbl a {
  color: var(--op-green, #16A34A);
  text-decoration: none !important;
  border-bottom: 1px solid rgba(22, 163, 74, .35);
}

.op-tbl a:hover,
.op-tbl a:focus {
  color: var(--op-green-hover, #188B42);
  border-bottom-color: var(--op-green-hover, #188B42);
}

/* --- Pomucka a poznamka pod tabulkou ------------------------------------ */
.op-tbl-hint {
  display: none;
}

.op-tbl-note {
  max-width: var(--op-max, 900px);
  margin: -16px 0 24px;
  color: rgba(17, 24, 39, .65);
  font-size: 90%;
  line-height: 1.5;
}

/* --- Responzivita ------------------------------------------------------- */
@media (max-width: 991px) {
  .op-tbl th,
  .op-tbl td {
    padding: 11px 13px;
  }
}

@media (max-width: 767px) {
  .op-tbl {
    min-width: 440px;
    font-size: 15px;
  }

  .op-tbl thead th {
    font-size: 13px;
  }

  .op-tbl th,
  .op-tbl td {
    padding: 10px 12px;
  }

  .op-tbl--compare th:first-child {
    width: 40%;
  }

  .op-tbl-badge {
    display: block;
    margin: 4px 0 0;
  }

  /* Pomucka jen na mobilu, kde tabulka realne scrolluje */
  .op-tbl-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: -16px 0 24px;
    color: rgba(17, 24, 39, .6);
    font-size: 13px;
    line-height: 1.4;
  }

  .op-tbl-hint::after {
    content: "";
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='0.6'><path d='M4 12h14M13 7l5 5-5 5'/></svg>");
  }

  .op-tbl-hint + .op-tbl-note {
    margin-top: -16px;
  }
}

/* --- Varianta --stack --------------------------------------------------- */
@media (max-width: 640px) {
  .op-tbl--stack {
    display: block;
    min-width: 0;
  }

  .op-tbl--stack thead {
    display: none;
  }

  .op-tbl--stack tbody,
  .op-tbl--stack tr,
  .op-tbl--stack th,
  .op-tbl--stack td {
    display: block;
    width: auto;
  }

  .op-tbl--stack tbody th {
    position: static;
    padding: 12px 14px 8px;
    background: transparent;
    border: 0;
    font-size: 16px;
  }

  .op-tbl--stack tr {
    padding: 4px 0 10px;
    border-bottom: 1px solid var(--op-line, #DADADA);
  }

  .op-tbl--stack tr:last-child {
    border-bottom: 0;
  }

  .op-tbl--stack td {
    display: flex;
    gap: 14px;
    justify-content: space-between;
    align-items: center;
    padding: 5px 14px;
    border: 0;
    background: transparent;
    text-align: right;
  }

  .op-tbl--stack td::before {
    content: attr(data-label);
    flex: 1 1 auto;
    text-align: left;
    font-weight: 600;
    color: var(--op-ink, #111827);
  }

  .op-tbl--stack tbody tr:hover td,
  .op-tbl--stack tbody tr:hover td.is-best,
  .op-tbl--stack tbody tr:hover th {
    background: transparent;
  }
}

/* ==========================================================================
   ONSA Plus | op-trust
   Trust box na konci spodniho popisu kategorie.
   Tmavy panel v brandovych barvach ve stylu paticky.

   Vyzaduje op-core.css. Bez nej funguje se zalozními hodnotami v var().

   TRIDY
   .op-trust           tmavy panel, obal celeho bloku
   .op-trust__eyebrow  nadlinka se zelenou pomlckou
   .op-trust__title    nadpis, v HTML jako H4
   .op-trust__text     odstavec
   .op-trust__hl       zelene zvyrazneni uvnitr textu

   POZNAMKY
   Zelene zvyrazneni pouzivat jen jednou v celem bloku, jinak prestane
   fungovat jako zvyrazneni. Ktera slova jsou zelena, urcuje HTML,
   ne tento soubor.
   Sirku ridi --op-max z op-core, aby blok sedel s tabulkami nad nim.
   ========================================================================== */

.op-trust,
#content .op-trust,
.category__secondDescription .op-trust,
.news-item-detail .op-trust,
.basic-description .op-trust {
  display: block;
  width: 100%;
  max-width: var(--op-max, 900px);
  margin: 32px 0;
  padding: 28px;
  border-radius: var(--op-radius-lg, 20px);
  background: var(--op-ink, #111827);
  color: rgba(255, 255, 255, .72);
  font-family: inherit;
  font-size: inherit;
  line-height: 1.7;
  text-align: left;
}

/* Nadlinka se zelenou pomlckou */
.op-trust__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  color: var(--op-green, #16A34A);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .03em;
  line-height: 1.4;
}

.op-trust__eyebrow::before {
  content: "";
  flex: 0 0 20px;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--op-green, #16A34A);
}

/* Nadpis. Sablona barvi nadpisy tmave, proto vlastni barva. */
.op-trust__title,
#content .op-trust .op-trust__title,
.category__secondDescription .op-trust .op-trust__title,
.news-item-detail .op-trust .op-trust__title,
.basic-description .op-trust .op-trust__title {
  margin: 0 0 14px;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
  text-transform: none;
}

.op-trust__text {
  margin: 0 0 12px;
  color: rgba(255, 255, 255, .72);
  font-size: 15px;
  line-height: 1.7;
}

.op-trust__text:last-child {
  margin-bottom: 0;
}

.op-trust__text strong,
.op-trust__text b {
  display: inline;
  color: #FFFFFF;
  font-weight: 600;
  font-size: inherit;
  line-height: inherit;
}

/* Zelene zvyrazneni */
.op-trust__hl {
  color: var(--op-green, #16A34A);
  font-weight: 600;
}

/* Odkazy, sablona je v obsahu podtrhava */
.op-trust a,
.category__secondDescription .op-trust a,
.news-item-detail .op-trust a,
.basic-description .op-trust a {
  color: var(--op-green, #16A34A);
  text-decoration: none !important;
  border-bottom: 1px solid rgba(22, 163, 74, .45);
}

.op-trust a:hover,
.op-trust a:focus {
  border-bottom-color: var(--op-green, #16A34A);
}

/* --- Responzivita ------------------------------------------------------- */
@media (max-width: 991px) {
  .op-trust {
    padding: 24px;
  }
}

@media (max-width: 480px) {
  .op-trust {
    margin: 24px 0;
    padding: 20px;
  }

  .op-trust__title {
    font-size: 18px;
  }

  .op-trust__text {
    font-size: 14.5px;
  }
}