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

/* ==========================================================================
   ONSA Plus | op-vs
   Porovnani dvou moznosti vedle sebe, bez ramecku.
   Prvek drzi pohromade zvislym akcentem a vlasovymi linkami, ne ramem.
   Zamerne odlisne od tabulky (tmava hlavicka) i od trust boxu (tmavy panel).

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

   DVE POUZITI
   1) Porovnani parametru: .op-vs__spec, popisek vlevo, hodnota vpravo
   2) Plusy a minusy: .op-vs--pros + bloky .op-vs__group

   TRIDY
   .op-vs                 obal, mrizka dvou sloupcu
   .op-vs--pros           varianta pro plusy a minusy (zrusi odsazeni sloupcu)
   .op-vs__col            jeden sloupec
   .op-vs__col.is-best    doporucena moznost, zeleny zvisly akcent.
                          VOLITELNE. Kdyz zadna moznost neni objektivne
                          lepsi, nepouzivat vubec.
   .op-vs__title          nazev moznosti
   .op-vs__badge          stitek "Odporucame", VZDY uvnitr .op-vs__title,
                          jinak se rozhodi zarovnani radku obou sloupcu
   .op-vs__sub            jednoradkovy popis pod nazvem
   .op-vs__rule           vlasova linka pod nazvem
   .op-vs__spec           seznam parametru
   .op-vs__group          skupina plusu nebo minusu, modifikatory
                          --plus a --minus
   .op-vs__groupTitle     nadpisek skupiny s ikonou
   .op-vs__list           seznam uvnitr skupiny

   POZNAMKY
   Doporucenou moznost davej jako druhou, oko skonci na tom, co si ma odnest.
   Nazvy drz kratke, ideálne na jeden radek, jinak se radky rozejdou.
   Ikony jdou pres background-image v data URI, zadna externi knihovna.
   ========================================================================== */

.op-vs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  width: 100%;
  max-width: var(--op-max, 900px);
  margin: 0 0 28px;
}

/* Pruhledny akcent drzi oba sloupce na stejnem odsazeni */
.op-vs__col {
  border-left: 2px solid transparent;
  padding-left: 16px;
}

.op-vs__col.is-best {
  border-left-color: var(--op-green, #16A34A);
}

/* Sablona barvi a zvetsuje nadpisy, proto vlastni hodnoty */
.op-vs__title,
#content .op-vs .op-vs__title,
.category__secondDescription .op-vs .op-vs__title,
.news-item-detail .op-vs .op-vs__title,
.basic-description .op-vs .op-vs__title {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin: 0 0 4px;
  color: var(--op-ink, #111827);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  text-transform: none;
}

.op-vs__badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--op-green-bg, #F0FDF4);
  color: var(--op-green-hover, #188B42);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .03em;
  white-space: nowrap;
}

.op-vs__sub {
  margin: 0 0 10px;
  color: rgba(17, 24, 39, .55);
  font-size: 13px;
  line-height: 1.45;
}

.op-vs__rule {
  height: 1px;
  margin: 0 0 12px;
  background: rgba(17, 24, 39, .14);
}

.op-vs__col.is-best .op-vs__rule {
  background: rgba(22, 163, 74, .3);
}

/* --- Reset seznamu, Shoptet ma na ul/li vlastni styly ------------------- */
.op-vs__spec,
.op-vs__list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
}

.op-vs__spec li::marker,
.op-vs__list li::marker {
  content: none;
}

/* --- Porovnani parametru ------------------------------------------------ */
.op-vs__spec li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 0;
  border-bottom: 1px dashed rgba(17, 24, 39, .13);
  font-size: 14px;
  line-height: 1.5;
}

.op-vs__spec li::before {
  content: none;
}

.op-vs__spec li:last-child {
  border-bottom: 0;
}

.op-vs__spec li > span:first-child {
  color: rgba(17, 24, 39, .58);
}

.op-vs__spec li > span:last-child {
  color: var(--op-ink, #111827);
  font-weight: 500;
  text-align: right;
}

/* --- Plusy a minusy ----------------------------------------------------- */
.op-vs--pros .op-vs__col {
  border-left: 0;
  padding-left: 0;
}

.op-vs__group {
  margin: 0 0 18px;
  padding-left: 14px;
  border-left: 2px solid var(--op-green, #16A34A);
}

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

.op-vs__group--minus {
  border-left-color: rgba(17, 24, 39, .18);
}

.op-vs__groupTitle {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  color: var(--op-green-hover, #188B42);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.4;
}

.op-vs__group--minus .op-vs__groupTitle {
  color: rgba(17, 24, 39, .55);
}

.op-vs__groupTitle::before {
  content: "";
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px 15px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23188B42' stroke-width='3' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>");
}

.op-vs__group--minus .op-vs__groupTitle::before {
  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='3' stroke-linecap='round' opacity='0.5'><path d='M5 12h14'/></svg>");
}

.op-vs__list li {
  padding: 0 0 5px;
  color: rgba(17, 24, 39, .85);
  font-size: 14px;
  line-height: 1.55;
}

.op-vs__list li::before {
  content: none;
}

.op-vs__list li:last-child {
  padding-bottom: 0;
}

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

.op-vs a {
  color: var(--op-green, #16A34A);
  text-decoration: none !important;
  border-bottom: 1px solid rgba(22, 163, 74, .35);
}

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

/* --- Responzivita ------------------------------------------------------- */
@media (max-width: 640px) {
  .op-vs {
    grid-template-columns: 1fr;
    gap: 26px;
  }
}

/* ==========================================================================
   ONSA Plus | op-hub
   Rozcestnik souvisejicich kategorii ve forme pilulek.
   Seda vypln bez ramu, pri najeti svetle zelena.
   Pouziva se nahore v hornim popisu a jako prvni sekce dolniho popisu.

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

   TRIDY
   .op-hub__title  nadpis nad rozcestnikem, v HTML jako H4
   .op-hub         seznam pilulek
   .is-current     oznaci pilulku aktualni kategorie, neni odkaz

   POZNAMKY
   Odkazy smi vest jen na URL, ktere jsou doslova v souboru kategorii.
   Zadne skladani adres podle vzoru jinych adres.
   Sablona ma na ul/li vlastni styly, proto reset s !important.
   ========================================================================== */

.op-hub__title,
#content .op-hub__title,
.category__secondDescription .op-hub__title,
.news-item-detail .op-hub__title,
.basic-description .op-hub__title {
  margin: 0 0 12px;
  color: var(--op-ink, #111827);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  text-transform: none;
}

/* Reset stylu sablony na ul/li */
.op-hub {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: var(--op-max, 900px);
  list-style: none !important;
  margin: 0 0 28px !important;
  padding: 0 !important;
  background: none !important;
}

.op-hub li {
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  list-style: none !important;
}

.op-hub li::before {
  content: none !important;
}

.op-hub li::marker {
  content: none;
}

/* Pilulka */
.op-hub a,
.category__secondDescription .op-hub a,
.category-perex .op-hub a,
.news-item-detail .op-hub a,
.basic-description .op-hub a {
  display: inline-block;
  padding: 8px 15px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--op-gray-bg, #F7F7F7);
  color: var(--op-ink, #111827);
  font-size: 14px;
  line-height: 1.35;
  text-decoration: none !important;
  transition: all .2s ease-out;
}

.op-hub a:hover,
.op-hub a:focus {
  background: var(--op-green-bg, #F0FDF4);
  border-color: rgba(22, 163, 74, .35);
  color: var(--op-green-hover, #188B42);
}

/* Aktualni kategorie, neni odkaz */
.op-hub .is-current {
  display: inline-block;
  padding: 8px 15px;
  border: 1px solid rgba(17, 24, 39, .14);
  border-radius: 999px;
  background: transparent;
  color: rgba(17, 24, 39, .5);
  font-size: 14px;
  line-height: 1.35;
}

/* --- Responzivita ------------------------------------------------------- */
@media (max-width: 480px) {
  .op-hub {
    gap: 7px;
  }

  .op-hub a,
  .op-hub .is-current {
    padding: 7px 13px;
    font-size: 13.5px;
  }
}


/* ==========================================================================
   ONSA Plus | op-faq
   Casto kladene otazky. Cislovany seznam bez ramecku.
   Otevrena otazka dostane svetle zelene podsvetleni a jeji cislo
   se zmeni na plny zeleny ctverecek. Cislo pritom zustava na miste,
   podsvetleni precnieva doleva pres zaporny okraj.

   Postaveno na <details>, takze funguje bez JavaScriptu, otevre se
   klavesnici a vyhledavac i jazykovy model precte i zavrene odpovedi.

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

   TRIDY
   .op-faq__head   radek se stitkem a nadpisem
   .op-faq__tag    zeleny stitek FAQ
   .op-faq__title  nadpis sekce, v HTML jako H4
   .op-faq         seznam otazek
   .op-faq__item   jedna otazka, v HTML <details>
   .op-faq__q      otazka, v HTML <summary>
   .op-faq__a      odpoved

   POZNAMKY
   Cislovani resi CSS pres counter, do HTML se cisla nepisou.
   Po smazani otazky se cisla prepocitaji sama.
   Sirku ridi --op-max z op-core, aby blok sedel s ostatnimi prvky.
   V odpovedi lze pouzit <strong> a odkaz, oboje je nize nastylovane.
   Vkladat pres editor Zdrojovy kod, WYSIWYG rozbiji <details>.
   ========================================================================== */

/* --- Hlavicka sekce ----------------------------------------------------- */
.op-faq__head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  max-width: var(--op-max, 900px);
  margin: 0 0 20px;
}

.op-faq__tag {
  flex: 0 0 auto;
  padding: 9px 14px;
  border-radius: var(--op-radius-sm, 8px);
  background: var(--op-green, #16A34A);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.1;
}

/* Sablona barvi a zvetsuje nadpisy, proto vlastni hodnoty */
.op-faq__title,
#content .op-faq__title,
.category__secondDescription .op-faq__title,
.news-item-detail .op-faq__title,
.basic-description .op-faq__title {
  margin: 0;
  color: var(--op-ink, #111827);
  font-family: inherit;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
  text-transform: none;
}

/* --- Seznam otazek ------------------------------------------------------ */
.op-faq {
  counter-reset: op-faq;
  max-width: var(--op-max, 900px);
  margin: 0 0 28px;
}

/* Zaporny okraj plus stejne velky padding drzi cislo na miste.
   Pri otevreni se zmeni jen pozadi, obsah se neposune. */
.op-faq__item {
  counter-increment: op-faq;
  margin: 0 -18px 4px;
  padding: 0 18px;
  border-radius: var(--op-radius, 12px);
}

.op-faq__item[open] {
  margin-bottom: 10px;
  background: var(--op-green-bg, #F0FDF4);
}

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

/* --- Otazka ------------------------------------------------------------- */
.op-faq__q {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 0;
  color: var(--op-ink, #111827);
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
  list-style: none;
}

/* Skryje vychozi trojuhelnicek prohlizece */
.op-faq__q::-webkit-details-marker {
  display: none;
}

/* Cislo generovane CSS, 01, 02, 03 ... */
.op-faq__q::before {
  content: counter(op-faq, decimal-leading-zero);
  flex: 0 0 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  border-radius: var(--op-radius-sm, 8px);
  color: var(--op-green, #16A34A);
  font-size: 12.5px;
  font-weight: 700;
  transition: all .2s ease-out;
}

.op-faq__item[open] .op-faq__q {
  font-weight: 600;
}

.op-faq__item[open] .op-faq__q::before {
  background: var(--op-green, #16A34A);
  color: #FFFFFF;
}

.op-faq__q:hover {
  color: var(--op-green-hover, #188B42);
}

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

/* --- Odpoved ------------------------------------------------------------ */
.op-faq__a {
  margin: 0;
  padding: 0 0 14px 43px;
  color: rgba(17, 24, 39, .72);
  font-size: 14.5px;
  line-height: 1.7;
}

.op-faq__a + .op-faq__a {
  padding-top: 10px;
}

/* Tucne slovo uvnitr odpovedi */
.op-faq__a strong,
.op-faq__a b {
  display: inline;
  color: var(--op-ink, #111827);
  font-weight: 600;
  font-size: inherit;
  line-height: inherit;
}

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

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

/* --- Responzivita ------------------------------------------------------- */
@media (max-width: 767px) {
  .op-faq__title {
    font-size: 17px;
  }

  .op-faq__tag {
    font-size: 13.5px;
    padding: 8px 12px;
  }

  .op-faq__q {
    gap: 12px;
    font-size: 15px;
  }

  .op-faq__a {
    padding-left: 42px;
    font-size: 14px;
  }
}

/* Na uzkem mobilu mensi precnievani, aby stranka neujizdela do stran */
@media (max-width: 480px) {
  .op-faq__item {
    margin-left: -12px;
    margin-right: -12px;
    padding: 0 12px;
  }
}