/* ============================================================
   SOFTABE.CZ – style-eshop.css   (v1 – CZ verze podle SK redesignu)
   JEDINÝ zdroj vlastního CSS.
   Nahraj přes FTP do /user/documents/upload/
   V Záhlaví linkované jako /user/documents/upload/style-eshop.css?v=1
   (při každé další úpravě zvyš číslo verze)

   Vychází ze SK stylesheetu pro softverlacno.com (v49). Barvy CTA
   tlačítek (--sl-cta / --sl-cta-hover) jsou převzaté z VAŠICH
   aktuálních CZ nastavení (.btn-conversion a stará sticky lišta
   v Těle softabe.cz), ne ze SK webu – proto se liší od SK hodnot.
   Sekce 11 (marquee logo partnerů "Naši zákazníci") je pro CZ
   zatím VYNECHANÁ – viz poznámka v script-eshop.js.
   ============================================================ */

/* ------------------------------------------------------------
   0. DESIGNOVÉ TOKENY
   ------------------------------------------------------------ */
:root {
  /* barvy */
  --sl-ink: #1a1a1a;            /* hlavní text */
  --sl-ink-soft: #4a4a4a;       /* sekundární text */
  --sl-muted: #6b7280;          /* meta údaje */
  --sl-bg: #ffffff;
  --sl-surface: #f5f5f5;        /* podkladové bloky (odpovídá vašim setColorBasket* v Těle) */
  --sl-border: #e5e7eb;
  --sl-brand: #B70C00;          /* brand červená – stejná jako na SK webu i ve vašem CZ Těle */
  --sl-brand-dark: #8f0900;
  --sl-cta: #7ab300;            /* zelená pro hlavní CTA – z vašeho aktuálního .btn-conversion na CZ webu */
  --sl-cta-hover: #6a9c00;      /* hover – tatáž zelená jako základní CTA na SK webu, z vašeho CZ .btn-conversion:hover */
  --sl-btn-secondary: #4a4a4a;  /* šedá pro všechna ostatní tlačítka */
  --sl-btn-secondary-hover: #333333;
  --sl-success: #1a7f37;
  --sl-danger: #b30000;

  /* tvar a tieň */
  --sl-radius-sm: 8px;
  --sl-radius: 12px;
  --sl-radius-pill: 999px;
  --sl-shadow-sm: 0 1px 3px rgba(0, 0, 0, .06);
  --sl-shadow-md: 0 8px 24px rgba(0, 0, 0, .10);

  /* pohyb – jednotná mäkká krivka (Apple-like ease-out) */
  --sl-ease: cubic-bezier(.22, .61, .36, 1);

  /* spätná kompatibilita so staršími vlastnými pravidlami */
  --brand-red: var(--sl-brand);
  --brand-red-dark: var(--sl-brand-dark);
  --cta-green: var(--sl-cta);
  --cta-green-dark: var(--sl-cta-hover);
  --ink: var(--sl-ink);
  --ink-soft: var(--sl-ink-soft);
  --surface-soft: var(--sl-surface);
  --border-soft: var(--sl-border);
}

/* ------------------------------------------------------------
   1. FONT
   Rozšírený zoznam elementov, aby Montserrat pokryl všetky
   texty (span, div, tabuľky, formuláre).

   POZOR na ikony šablóny. Pôvodne tu bola poznámka, že ikony sú
   v ::before s vlastným font-family, takže ich Montserrat
   nezasiahne. To NEPLATÍ vždy: Shoptet nastavuje ikonový font
   na SAMOTNOM elemente (napr. <h2 class="order-icon order-delivery">
   v kroku Doprava a platba) a ::before má len content so znakom.
   Montserrat s !important potom ikonový font prebil a namiesto
   ikony sa vykreslil prázdny štvorec (znak, ktorý Montserrat
   nepozná).

   Preto sú z pravidla vyňaté všetky elementy s "icon" v triede –
   tam nechávame font šablóny, nech si ikonu vykreslí sama.
   ------------------------------------------------------------ */
body:not([class*="icon"]):not([class*="Icon"]),
p:not([class*="icon"]):not([class*="Icon"]),
h1:not([class*="icon"]):not([class*="Icon"]),
h2:not([class*="icon"]):not([class*="Icon"]),
h3:not([class*="icon"]):not([class*="Icon"]),
h4:not([class*="icon"]):not([class*="Icon"]),
h5:not([class*="icon"]):not([class*="Icon"]),
h6:not([class*="icon"]):not([class*="Icon"]),
li:not([class*="icon"]):not([class*="Icon"]),
a:not([class*="icon"]):not([class*="Icon"]),
span:not([class*="icon"]):not([class*="Icon"]),
div:not([class*="icon"]):not([class*="Icon"]),
td:not([class*="icon"]):not([class*="Icon"]),
th:not([class*="icon"]):not([class*="Icon"]),
label:not([class*="icon"]):not([class*="Icon"]),
strong:not([class*="icon"]):not([class*="Icon"]),
em:not([class*="icon"]):not([class*="Icon"]),
small:not([class*="icon"]):not([class*="Icon"]),
dt:not([class*="icon"]):not([class*="Icon"]),
dd:not([class*="icon"]):not([class*="Icon"]),
input:not([class*="icon"]):not([class*="Icon"]),
button:not([class*="icon"]):not([class*="Icon"]),
select:not([class*="icon"]):not([class*="Icon"]),
textarea:not([class*="icon"]):not([class*="Icon"]),
legend:not([class*="icon"]):not([class*="Icon"]),
#pobo-all-content:not([class*="icon"]):not([class*="Icon"]),
#pobo-all-content *:not([class*="icon"]):not([class*="Icon"]),
.product-container:not([class*="icon"]):not([class*="Icon"]),
.product-container *:not([class*="icon"]):not([class*="Icon"]) {
  font-family: 'Montserrat', sans-serif !important;
}

/* nadpisy ostávajú v Montserrat (na želanie klienta),
   len s tesnejším spacingom pre modernejší vzhľad */
h1, .h1, h2, .h2,
h4.homepage-group-title, .h4.homepage-group-title {
  letter-spacing: -0.3px;
}

/* všetky tlačidlá šablóny – jednotný plynulý prechod farieb
   (žiadne preblikávanie na hover, ani v pätičke či formulároch) */
.btn, a.btn, button.btn,
input[type="submit"], button[type="submit"] {
  transition: background-color .25s var(--sl-ease),
              border-color .25s var(--sl-ease),
              color .25s var(--sl-ease),
              box-shadow .25s var(--sl-ease);
}

/* ------------------------------------------------------------
   2. ZÁKLAD + PRÍSTUPNOSŤ
   ------------------------------------------------------------ */
body {
  background-color: var(--sl-bg) !important;
}

/* centrovanie hlavičky a pätičky – nahrádza pôvodný JS zo Záhlavia
   POZOR: pôvodne tu bolo holé "header, footer". To trafí KAŽDÝ
   <header> na stránke – vrátane hlavičky článku s nadpisom stránky,
   ktorá sa tým centrovala tiež. Mienená je hlavička a pätička webu. */
#header, #footer {
  text-align: center;
}

/* plynulé skrolovanie na kotvy (taby na detaile produktu a pod.);
   pri prefers-reduced-motion ho globálne pravidlo vypne */
html {
  scroll-behavior: smooth;
}

/* viditeľný focus pre ovládanie klávesnicou */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--sl-cta-hover);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------
   3. HLAVIČKA
   ------------------------------------------------------------ */
/* POZOR: pôvodne tu bolo "header, #header". Holý selektor "header"
   trafí KAŽDÝ <header> na stránke – vrátane hlavičky článku, ktorá
   obsahuje nadpis stránky. Tá tak dostala linku pod nadpisom.
   Hlavička webu je #header, takže stačí tá. */
#header {
  border-bottom: 1px solid var(--sl-border);
}
.site-name a:hover {
  opacity: .85;
}

/* horný pruh hlavičky – ponechaný v pôvodných farbách šablóny */

/* tieň hlavičky po odscrollovaní (triedu prepína JS) */
.sl-scrolled #header {
  box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
}

/* vyhľadávanie – PREDPOKLAD: Shoptet .query-input.
   Ak selektor neexistuje, pravidlo sa neuplatní. */
.search-form .query-input,
input.query-input {
  border: 1px solid var(--sl-border);
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.search-form .query-input:focus,
input.query-input:focus {
  border-color: var(--sl-cta);
  box-shadow: 0 0 0 3px rgba(106, 156, 0, .15);
}

/* ------------------------------------------------------------
   4. ÚVODNÁ STRÁNKA (welcome / hero text blok)
   ------------------------------------------------------------ */
/* uvítací blok – centrovaný "hero statement" v štýle Apple:
   veľký nadpis, úzke čitateľné odseky, všetko na stred.
   Pozadie ponechané v pôvodnej sivej. */
.welcome {
  background: var(--sl-surface);
  border: none;
  border-radius: 20px;
  text-align: center;
}
.welcome h1 {
  color: var(--sl-ink);
  font-weight: 700;
  letter-spacing: -0.5px;
  position: relative;
  padding-bottom: 18px;
}
.welcome h1:after {
  content: "";
  display: block;
  width: 180px;
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    var(--sl-brand) 30%,
    var(--sl-brand) 70%,
    transparent);
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}
.welcome p {
  color: var(--sl-ink-soft);
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}
.welcome .welcome__content p {
  margin-bottom: 0;
}
.welcome .welcome__content p + p {
  margin-top: 20px;
}
/* tlačidlo NÁŠ PRÍBEH – sivé ako ostatné, hover zelený, normálne písmo */
.welcome .btn,
.welcome a.btn {
  background: var(--sl-btn-secondary) !important;
  border-color: var(--sl-btn-secondary) !important;
  color: #fff !important;
  border-radius: var(--sl-radius-pill) !important;
  padding: 12px 26px !important;
  font-weight: 400 !important;
  border: none !important;
  transition: background .25s var(--sl-ease);
}
.welcome .btn:hover,
.welcome a.btn:hover {
  background: var(--sl-cta) !important;
  border-color: var(--sl-cta) !important;
}

/* ------------------------------------------------------------
   5. PRODUKTOVÉ KARTY (homepage aj kategórie)
   ------------------------------------------------------------ */
.products-block .p-in-in {
  min-height: auto;
}
/* Karty – nadvihnutie a tieň pri hoveri sa aplikuje na
   NAJVONKAJŠÍ element karty (.product). Vnútorný .p sa nehýbe,
   aby za vysunutou kartou nezostával "duch" pôvodného rámu. */
.products-block .p,
.products-block .product {
  transition: transform .35s var(--sl-ease), box-shadow .35s var(--sl-ease);
  border-radius: var(--sl-radius);
}
/* profesionálne "vysunutie" karty pri hoveri – jemné nadvihnutie
   s dvojvrstvovým mäkkým tieňom (bližší kontaktný + vzdialený
   difúzny), rovnaké na hlavnej stránke aj v kategóriách */
.products-block .p:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .05), 0 14px 28px rgba(0, 0, 0, .10);
}
.products-block .product:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .05), 0 14px 28px rgba(0, 0, 0, .10);
}
/* plynulý pohyb aj pre obrázky v kartách (šablónový zoom
   efekt dostane rovnakú mäkkú krivku – žiadne "nafúknutie") */
.products-block .p img,
.products-block .product img {
  transition: transform .45s var(--sl-ease) !important;
}
/* ak je .p vnorené v .product, hýbe sa len vonkajší obal */
.products-block .product .p:hover {
  transform: none;
  box-shadow: none;
}
.products-block.products .p .name,
.products-block .p .name,
.products-block .product .name {
  font-weight: 700 !important;
  color: var(--sl-ink);
}

/* ceny na karte – pôvodná (preškrtnutá) a zľavnená VEDĽA SEBA.
   Wrapper .sl-prices stavia JS (nezávislé od tried šablóny). */
.sl-prices {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.sl-prices > * {
  margin: 0 !important;
  display: inline-block !important;
}
.sl-prices del,
.sl-prices .price-standard {
  color: var(--sl-muted);
}

/* Tlačidlá na karte – "Do košíka" aj "Detail" jednotne ŠEDÉ.
   Zelená je vyhradená pre hlavné CTA na detaile produktu
   a v objednávkovom procese (jasná vizuálna hierarchia).
   .product-btn je v tejto šablóne OBAL okolo tlačidla,
   preto je explicitne priehľadný a štýl dostáva len
   skutočný <a>/<button> element. */
div.product-btn,
span.product-btn {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}
a.product-btn,
button.product-btn,
a.btn-cart.add-to-cart-button,
button.btn-cart.add-to-cart-button {
  background: var(--sl-btn-secondary) !important;
  border-color: var(--sl-btn-secondary) !important;
  color: #fff !important;
  border-radius: var(--sl-radius-pill) !important;
  font-weight: 400 !important;
  padding: 10px 20px !important;
  transition: background .25s var(--sl-ease);
}
/* hover = zelená (signál nákupnej akcie, ako v pôvodnej šablóne) */
a.product-btn:hover,
button.product-btn:hover,
a.btn-cart.add-to-cart-button:hover,
button.btn-cart.add-to-cart-button:hover {
  background: var(--sl-cta) !important;
  border-color: var(--sl-cta) !important;
  color: #fff !important;
}

/* Zľavový odznak – plochý PILL (v33).
   Kruh aj zaoblená kocka boli veľké farebné bloky, ktoré na
   detaile prekrikovali aj tlačidlo nákupu. Moderný e-shop dnes
   zľavu označuje malým plochým štítkom, ktorý obopína text:
   informácia zostáva, hluk zmizne. Tieň je preč zámerne –
   vrhané tiene na odznakoch sú znak starších šablón.

   Tvar šablóny (veľký blok v ::before) vypíname a štýl dostáva
   samotný .flag – preto tie !important a nulovanie rozmerov. */
.flag.flag-discount:before {
  display: none !important;
}
.flag.flag-discount {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 4px 10px !important;
  background: var(--sl-brand) !important;
  background-image: none !important;
  border-radius: var(--sl-radius-pill) !important;
  box-shadow: none !important;
  color: #ffffff !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: .2px !important;
  white-space: nowrap !important;
  text-indent: 0 !important;
}
.flag.flag-discount * {
  color: #ffffff !important;
  font-size: inherit !important;
  line-height: inherit !important;
}
/* na detaile o kúsok väčší – je tam sám, na karte súťaží s názvom */
.type-product .flag.flag-discount {
  font-size: 14px !important;
  padding: 5px 12px !important;
}

/* akcentová linka pod nadpismi sekcií.
   AK JU CHCEŠ ODSTRÁNIŤ: zmaž tento blok (obe pravidlá). */
h4.homepage-group-title,
.h4.homepage-group-title,
.products-related-block h2,
.products-alternative-block h2 {
  position: relative;
  padding-bottom: 14px;
}
/* akcent nadpisov – jemný "fading hairline": tenká červená
   linka, ktorá sa na krajoch rozplýva do stratena. Elegantný,
   nenápadný, ladí s minimalistickým vizuálom webu. */
h4.homepage-group-title:after,
.h4.homepage-group-title:after,
.products-related-block h2:after,
.products-alternative-block h2:after {
  content: "";
  display: block;
  width: 180px;
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    var(--sl-brand) 30%,
    var(--sl-brand) 70%,
    transparent);
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}

/* rovnaký akcent aj pod nadpisom hodnotení ("Ako o nás hovoria
   zákazníci") – nadpis je pseudo-element, preto cez background */
body .hodnoceni:before {
  display: block;
  padding-bottom: 14px;
  background: linear-gradient(90deg,
    transparent,
    var(--sl-brand) 30%,
    var(--sl-brand) 70%,
    transparent) no-repeat bottom center / 180px 2px;
}

/* ------------------------------------------------------------
   6. KATEGÓRIA
   ------------------------------------------------------------ */
.breadcrumbs {
  font-size: 13px;
}
.type-category h1,
.type-product h1 {
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--sl-ink);
}
.category-header input[type="radio"]:checked + label {
  background-color: var(--sl-brand) !important;
  color: #fff !important;
}
.sidebar-inner > div.no-p {
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.type-page .content-inner h1 {
  text-align: center;
}

/* ------------------------------------------------------------
   7. DETAIL PRODUKTU
   ------------------------------------------------------------ */
/* HLAVNÉ CTA celého webu – jediné zelené tlačidlo nákupu */
.type-product [data-testid="buttonAddToCart"] {
  background: var(--sl-cta) !important;
  border-color: var(--sl-cta) !important;
  color: #fff !important;
  border-radius: var(--sl-radius-pill) !important;
  font-weight: 400 !important;
  box-shadow: 0 4px 14px rgba(106, 156, 0, .35);
  transition: background .25s var(--sl-ease), transform .25s var(--sl-ease);
}
.type-product [data-testid="buttonAddToCart"]:hover {
  background: var(--sl-cta-hover) !important;
  border-color: var(--sl-cta-hover) !important;
}
.type-product [data-testid="buttonAddToCart"]:active {
  transform: translateY(1px);
}

/* výrazná cena na detaile – najdôležitejší údaj pri rozhodnutí */
.type-product .price-final-holder {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--sl-ink);
}
.type-product .price-save {
  color: var(--sl-muted);
}

/* dostupnosť – PREDPOKLAD štandardnej triedy .availability */
.availability {
  color: var(--sl-success);
  font-weight: 600;
}

/* Kľúčové parametre licencie pod tlačidlom nákupu (vkladá JS).
   Na širokých obrazovkách 2-stĺpcová mriežka – obsah vypĺňa
   celú šírku boxu, žiadne prázdne plochy vpravo. */
.sl-keyfacts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 48px;
  margin: 18px 0 6px;
  padding: 20px 22px;
  background: var(--sl-surface);
  border: none;
  border-radius: var(--sl-radius);
  font-size: 14px;
  text-align: left;
}
.sl-keyfacts__row {
  display: flex;
  gap: 12px;
  padding: 4px 0;
  min-width: 0;
}
.sl-keyfacts__k {
  min-width: 140px;
  flex-shrink: 0;
  color: var(--sl-muted);
}
.sl-keyfacts__v {
  color: var(--sl-ink);
  font-weight: 600;
}
/* vysvetlivka pri hodnote parametra (typ aktivácie na produktoch
   s jediným variantom) – nesmie byť tučná ako samotná hodnota */
.sl-keyfacts__note {
  display: block;
  margin-top: 2px;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.45;
  color: var(--sl-muted);
}
.sl-keyfacts__link {
  color: var(--sl-cta-hover);
  font-weight: 600;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .sl-keyfacts {
    grid-template-columns: 1fr;
    gap: 0;
  }
}
@media (max-width: 480px) {
  .sl-keyfacts__row {
    flex-direction: column;
    gap: 0;
    padding: 6px 0;
  }
}

/* na širokých obrazovkách 3 kroky VEDĽA SEBA v JEDNOM riadku –
   šírka podľa obsahu, aby posledný krok nepadal do 2 riadkov */
/* ------------------------------------------------------------
   7b. VÝBER TYPU AKTIVÁCIE, HODNOTENIE, PRÁVNA ISTOTA
   (HTML vkladá JS)
   ------------------------------------------------------------ */
/* Karty typu aktivácie – voľba s 4x cenovym rozptylom nesmie byť
   skrytá v dropdowne bez vysvetlenia. Layout je RIADKOVÝ, nie
   stĺpcový: tri úzke stĺpce v pravom paneli lámali text na 6-7
   riadkov a blok narástol do výšky. Riadok = jedna myšlienka,
   názov vľavo v pevnom stĺpci, rozdiel vpravo. */
.sl-akt {
  margin: 12px 0 10px;
  text-align: left;
}
.sl-akt__title {
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--sl-ink);
}
.sl-akt__grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sl-akt__card {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  width: 100%;
  padding: 9px 12px;
  background: #fff;
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-sm);
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: border-color .2s var(--sl-ease),
              background-color .2s var(--sl-ease);
}
.sl-akt__card:hover {
  border-color: var(--sl-cta);
}
/* vybraná voľba – zelená je na tomto webe farba nákupnej akcie */
.sl-akt__card--on {
  border-color: var(--sl-cta);
  background: rgba(106, 156, 0, .06);
  box-shadow: 0 0 0 1px var(--sl-cta) inset;
}
.sl-akt__name {
  flex: none;
  min-width: 104px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--sl-ink);
}
.sl-akt__tag {
  flex: none;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
  background: var(--sl-cta);
  border-radius: var(--sl-radius-pill);
  padding: 2px 7px;
}
/* čas aktivácie – druhý najdôležitejší údaj hneď po názve,
   preto stojí pri ňom a nie v texte */
.sl-akt__meta {
  flex: none;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--sl-muted);
  background: var(--sl-surface);
  border-radius: var(--sl-radius-pill);
  padding: 2px 8px;
  white-space: nowrap;
}
.sl-akt__card--on .sl-akt__meta {
  background: #fff;
}
/* statická karta – jediný typ aktivácie, nie je čo vyberať:
   žiadny kurzor ani hover, aby zákazník nečakal kliknutie */
.sl-akt__card--static {
  cursor: default;
  background: var(--sl-surface);
}
.sl-akt__card--static:hover {
  border-color: var(--sl-border);
}
.sl-akt__card--static .sl-akt__meta {
  background: #fff;
}
.sl-akt__desc {
  flex: 1 1 100%;
  font-size: 12px;
  line-height: 1.45;
  color: var(--sl-ink-soft);
}
/* odkaz na podrobný návod */
.sl-akt__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 9px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--sl-cta-hover);
  text-decoration: none;
}
.sl-akt__more:hover { text-decoration: underline; }
.sl-akt__arrow {
  transition: transform .2s var(--sl-ease);
}
.sl-akt__more:hover .sl-akt__arrow { transform: translateX(3px); }
@media (max-width: 480px) {
  .sl-akt__name { min-width: 0; }
}

/* Údaje pri cene – úspora + hodnotenie v jednom riadku */
.sl-pricemeta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  vertical-align: middle;
  flex-wrap: wrap;
}
/* Úspora v eurách – zelená, lebo je to zisk zákazníka.
   Bez zľavy zostáva prázdna a nezaberá miesto. */
.sl-save {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--sl-cta-hover);
  background: rgba(106, 156, 0, .10);
  border-radius: var(--sl-radius-pill);
  padding: 3px 9px;
  white-space: nowrap;
}
.sl-save:empty { display: none; }

/* Ponuka pre firmy a školy pod tlačidlom nákupu */
.sl-b2b {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  font-size: 13px;
  text-align: left;
}
.sl-b2b svg {
  width: 15px;
  height: 15px;
  color: var(--sl-muted);
  flex: none;
}
.sl-b2b a {
  color: var(--sl-ink-soft);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--sl-border);
  transition: color .2s var(--sl-ease), border-color .2s var(--sl-ease);
}
.sl-b2b a:hover {
  color: var(--sl-cta-hover);
  border-color: var(--sl-cta);
}

/* Porovnanie s Microsoft 365 pri produkte */
.sl-m365 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 12px 0 0;
  padding: 10px 12px;
  background: var(--sl-surface);
  border-radius: var(--sl-radius-sm);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--sl-ink-soft);
  text-align: left;
}
.sl-m365__text { flex: 1 1 240px; }
.sl-m365__save { color: var(--sl-cta-hover); }
.sl-m365__link {
  flex: none;
  font-weight: 700;
  color: var(--sl-cta-hover);
  text-decoration: none;
  white-space: nowrap;
}
.sl-m365__link:hover { text-decoration: underline; }

/* Živý čas doručenia z vlastného systému.
   Jeden riadok nad tlačidlom nákupu: nízky, ale výrazný. Zelená ho
   viaže na tlačidlo pod ním – oko ide sľub → akcia. */
.sl-eta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 10px;
  margin: 0 0 14px;
  padding: 8px 14px;
  background: rgba(106, 156, 0, .08);
  border-radius: var(--sl-radius-pill);
  text-align: left;
  line-height: 1.3;
}
.sl-eta__label {
  font-size: 11px;
  color: var(--sl-ink-soft);
}
/* hodnota oddelená vlásočnicou, nie interpunkciou – čitateľnejšie
   a nerozpadne sa to na "vetu s bodkami" */
.sl-eta__val {
  padding-left: 10px;
  border-left: 1px solid rgba(106, 156, 0, .3);
  font-size: 14px;
  font-weight: 700;
  color: var(--sl-cta-hover);
  white-space: nowrap;
}
.sl-eta__meta {
  margin-left: auto;
  padding-left: 10px;
  font-size: 9.5px;
  letter-spacing: .2px;
  color: var(--sl-muted);
  white-space: nowrap;
  opacity: .85;
}
/* kurzor napovie, že sa dá nabehnúť pre vysvetlenie */
.sl-eta[title] { cursor: help; }
.sl-eta__test {
  padding: 2px 7px;
  border-radius: var(--sl-radius-pill);
  background: var(--sl-brand);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .5px;
}

/* pulzujúca bodka = údaj žije */
.sl-eta__dot {
  position: relative;
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sl-cta);
}
.sl-eta__dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--sl-cta);
  animation: sl-eta-pulse 2.4s var(--sl-ease) infinite;
}
@keyframes sl-eta-pulse {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { transform: scale(3.2); opacity: 0; }
  100% { transform: scale(3.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sl-eta__dot::after { animation: none; }
}

/* Na úzkych displejoch sa pôvod údaja neskrýva – zalomí sa pod
   sľub na vlastný riadok. Práve na mobile má zákazník najmenej
   dôvodov veriť číslu, ktoré vidí prvýkrát v živote. */
@media (max-width: 560px) {
  .sl-eta { gap: 2px 8px; padding: 9px 13px; border-radius: var(--sl-radius); }
  .sl-eta__label { font-size: 11px; }
  .sl-eta__meta {
    flex: 1 0 100%;
    margin-left: 15px;
    white-space: normal;
  }
}

/* Hodnotenie pri cene */
.sl-rating {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;               /* rozostupy rieši .sl-pricemeta */
  font-size: 12.5px;
  font-weight: 600;
  color: var(--sl-muted);
  text-decoration: none;
  white-space: nowrap;
}
.sl-rating:hover { color: var(--sl-ink); }
.sl-rating__star { color: #f5a623; font-size: 14px; }

/* Parametre + kroky nákupu ako JEDNA karta (obal stavia JS).

   v41: rám je preč. Sivá plocha sama o sebe stačí na oddelenie
   od okolia – rám okolo farebnej plochy je dvojitý signál.

   Predel medzi sekciami nie je čiara od kraja po kraj, ale
   "rozplývajúca sa vlásočnica": tenká linka, ktorá sa na okrajoch
   stráca. Je to ten istý motív, aký už máš pod nadpismi sekcií,
   v menu a pod nadpisom uvítacieho bloku – karta tak nezavádza
   nový jazyk, len použije ten tvoj. */

/* ------------------------------------------------------------
   8. KOŠÍK A OBJEDNÁVKA
   ------------------------------------------------------------ */
.btn-conversion {
  background-color: var(--sl-cta) !important;
  border-color: var(--sl-cta) !important;
  color: #ffffff !important;
  transition: background .15s ease, transform .15s ease;
}
.btn-conversion:hover {
  background-color: var(--sl-cta-hover) !important;
  border-color: var(--sl-cta-hover) !important;
  color: #ffffff !important;
}
/* Blok "Mám zľavový kupón" – jemný zelený nádych (7 % CTA zelenej
   na bielej). Rovnaký tvar a rám (žiadny) ako susedné okná košíka,
   odlíšený len plochou. Zámerne veľmi nízke krytie: kupón je
   voliteľná možnosť, nie výzva – nesmie súperiť o pozornosť
   so zeleným tlačidlom Pokračovať. Farbu nastavuje aj
   setColorBasketDiscountBg v Tele (#f5f8ed = tá istá farba
   v hexe) – toto je poistka, ak ju šablóna neaplikuje. */
.discount-coupon,
.cart-inner .discount-coupon,
#checkoutSidebar .discount-coupon {
  /* v49: jemná sivá ako ostatné boxy košíka – kupón je voliteľná
     možnosť, nemá farebne súperiť s tlačidlom Pokračovať.
     Rovnakú hodnotu nastav aj v Tele:
     setColorBasketDiscountBg = "#f5f5f5" */
  background-color: var(--sl-surface) !important;
  border: none !important;
  border-radius: 16px;
  box-shadow: none !important;
}
.discount-coupon .h4 strong {
  color: var(--sl-ink);
}
/* Poznámka "Můžete změnit v předchozím kroku" pri poli ZEMĚ
   v kroku s osobnými údajmi.

   ODKIAĽ SA TAM VZALA: je to VLASTNÝ prvok Shoptetu, nie náš kód.
   Server ho posiela priamo v HTML stránky /objednavka/krok-2/
   (overené 1. 8. 2026 stiahnutím zdrojového HTML) v tvare:
     <div class="form-control-wrapper form-control-wrapper--with-note js-location">
       <strong>Česká republika</strong>
       <em class="helpNote">Můžete změnit v <a href="/objednavka/krok-1/">předchozím kroku</a></em>
     </div>
   Shoptet ho zobrazí vždy, keď je krajina určená už zvolenou
   dopravou: skutočný <select name="billCountryId"> je vtedy
   disabled a skrytý (trieda js-location--hidden) a namiesto neho
   sa vypíše len text krajiny + táto poznámka.

   PREČO PREKÁŽA: e-shop má jedinú dopravu (elektronické doručenie
   na e-mail) a tá platí len pre ČR, takže v kroku 1 sa nedá zvoliť
   nič iné. Odkaz teda vedie späť do kroku, kde sa aj tak nič zmeniť
   nedá – zákazníkovi len ponúka slepú uličku.

   Skrývame LEN túto poznámku pri poli krajiny (selektor je viazaný
   na .js-location, takže ostatné vysvetlivky vo formulári zostávajú).
   Ak neskôr pribudne doprava aj do inej krajiny, stačí tieto tri
   riadky zmazať a poznámka sa vráti. */
.js-location .helpNote {
  display: none;
}
/* vstupné pole kupónu ostáva biele s jemným rámom – pole musí byť
   rozoznateľné ako pole, inak zákazník nevie, kam písať */
.discount-coupon input[type="text"] {
  background: #fff;
  border: 1px solid var(--sl-border);
}
.discount-coupon form .btn,
.btn.btn-secondary,
a.btn.btn-secondary {
  color: #fff;
  border-color: var(--color-secondary);
  background-color: var(--color-secondary);
  transition: background-color .25s var(--sl-ease), border-color .25s var(--sl-ease);
}
.support .btn.btn-secondary:hover,
.support a.btn.btn-secondary:hover,
.discount-coupon form .btn:hover,
.btn.btn-secondary:hover,
a.btn.btn-secondary:hover {
  color: #fff;
  border-color: var(--color-secondary-hover);
  background-color: var(--color-secondary-hover);
}

/* ------------------------------------------------------------
   9. STICKY LIŠTA S CENOU (detail produktu, stavia JS)
   ------------------------------------------------------------ */
.sb{box-sizing:border-box;position:fixed;bottom:-100px;left:50%;transform:translateX(-50%);background:rgba(30,30,32,.78);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-radius:50px;padding:12px 24px;display:flex;align-items:center;gap:24px;z-index:9990;box-shadow:0 8px 32px rgba(0,0,0,.25);transition:bottom .45s var(--sl-ease),visibility .45s;border:none;max-width:600px;min-width:380px;visibility:hidden}
.sb.on{bottom:20px;visibility:visible}
.sl{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1;min-width:0}
.sd{width:1px;height:36px;background:#6a6a6a;flex-shrink:0}
.sn{font-size:13px;color:#ccc;font-weight:500;margin-bottom:3px;max-width:280px;line-height:1.3;min-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.sp{display:flex;align-items:baseline;gap:8px;justify-content:center}
.sf{font-size:22px;font-weight:700;color:#fff;white-space:nowrap}
.so{font-size:13px;color:#aaa;text-decoration:line-through;white-space:nowrap}
/* bez zľavy (alebo ak sa pôvodná cena nedá spoľahlivo odčítať)
   ostáva prvok prázdny – nesmie robiť medzeru vo flexe */
.so:empty{display:none}
.sr{font-size:11.5px;color:#bbb;margin-top:3px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.sr:empty{display:none}
.btn-sb{background:var(--sl-cta);color:#fff;border:none;padding:13px 28px;border-radius:50px;font-size:15px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:10px;white-space:nowrap;box-shadow:0 4px 12px rgba(106,156,0,.4);transition:background .2s;flex-shrink:0}
.btn-sb:hover{background:var(--sl-cta-hover)}
.btn-sb svg{width:20px;height:20px}
/* Mobil: lišta sa NESMIE zväzovať pevnou výškou – názov produktu,
   cena a hodnotenie potrebujú toľko miesta, koľko zaberú, inak text
   vylieza nad aj pod okraj pilulky. Namiesto výšky teda padding,
   názov na jeden riadok s tromi bodkami a počet hodnotení preč
   (nevojde sa; hviezda s priemerom ostáva). */
@media(max-width:600px){
  .sb{width:calc(100% - 90px);min-width:0;max-width:calc(100% - 32px);left:16px;transform:none;padding:9px 12px;gap:10px;height:auto;border-radius:36px;box-shadow:none}
  .sb.on{bottom:17px}
  .sn{font-size:11px;max-width:100%;margin-bottom:1px;min-height:0}
  .sd{height:30px}
  .sp{gap:6px;flex-wrap:nowrap;min-width:0}
  .sf{font-size:17px}
  .so{font-size:11px}
  .sr{font-size:10.5px;margin-top:1px}
  .sr-cnt{display:none}
  .btn-sb{padding:10px 14px;font-size:13px;height:44px}
  .btn-sb svg{width:16px;height:16px}
}
@media(max-width:360px){
  .sb{gap:8px;padding:8px 10px}
  .sd{display:none}
  .btn-sb{padding:9px 12px;font-size:12px}
}

/* ------------------------------------------------------------
   10. PÄTIČKA
   ------------------------------------------------------------ */
footer.footer {
  border-top: 1px solid var(--sl-border);
  padding-top: 10px;
  background: var(--sl-surface);
}
footer.footer a {
  transition: color .15s ease;
}
footer.footer a:hover {
  color: var(--sl-brand);
}

/* CZ: nadpis newsletteru v patičce ("Odebírejte náš newsletter").
   Šablóna mu dává font-size 40px/700 (stejně jako H1 na hlavní
   stránce) i v úzkém sloupci patičky, takže se text láme na 3 řádky
   a box je zbytečně vysoký. Skutečná velikost textu se ale řídí
   vnitřním <span> uvnitř H3 (šablóna mu nastavuje font zkráceně,
   "font: 700 40px/48px Montserrat" – to je nedědičná hodnota, takže
   samotné zmenšení H3 na něj nemělo žádný vliv), proto musíme cílit
   i na ten span, a kvůli vyšší specificitě šablonového pravidla
   (mimo náš CSS soubor, nejde ho tu vidět/upravit) použít !important.
   Zmenšujeme JEN tento nadpis – zbytek webu (a font Montserrat) se
   nemění. Pokud je 22px pořád moc/málo, dej vědět a doladím. */
.footer .newsletter-header .pageElement__heading,
.footer .newsletter-header .pageElement__heading span,
.footer .custom-footer__newsletter .pageElement__heading,
.footer .custom-footer__newsletter .pageElement__heading span {
  font-size: 22px !important;
  line-height: 1.35 !important;
}

/* Kontaktný formulár v pätičke – tlačidlo preblikávalo na zelenú
   okamžite. Príčina: šablóna si na pätičkových tlačidlách prepisuje
   vlastnosť transition (jej pravidlo má vyššiu špecificitu než
   globálne pravidlo v sekcii 1), takže sa naň neaplikovala.
   Preto tu !important – prechod je rovnaký ako pri ostatných
   tlačidlách webu (.25s, mäkká krivka). */
footer.footer .btn,
footer.footer a.btn,
footer.footer button,
footer.footer button[type="submit"],
footer.footer input[type="submit"],
footer.footer .form-group .btn {
  transition: background-color .25s var(--sl-ease),
              border-color .25s var(--sl-ease),
              color .25s var(--sl-ease),
              box-shadow .25s var(--sl-ease) !important;
}
/* poistka: ak šablóna kreslí zelenú cez background-image
   (gradient), farba sa animovať nedá – vypneme obrázok
   a necháme čistú farbu pozadia, ktorá sa animuje korektne */
footer.footer button[type="submit"],
footer.footer input[type="submit"],
footer.footer .form-group .btn {
  background-image: none !important;
}

/* ------------------------------------------------------------
   11. NOVÉ KONVERZNÉ PRVKY (HTML vkladá JS)
   ------------------------------------------------------------ */
/* Trust pás v kategóriách */
/* Reassurance riadok pod CTA v košíku – zalamuje sa,
   nikdy nepretečie mimo boxu zhrnutia objednávky */
.sl-reassure {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 14px;
  width: 100%;
  max-width: 100%;
  margin: 14px 0; /* vzdušnejší odstup od tlačidla z oboch strán */
  padding: 0 4px;
  font-size: 12.5px;
  color: var(--sl-muted);
  text-align: center;
  line-height: 1.6;
  box-sizing: border-box;
}
.sl-reassure span {
  white-space: nowrap;
}

/* Marquee "Naši zákazníci" (pás log partnerů) – NA CZ WEBU ZATÍM
   VYNECHÁNO, stejně jako odpovídající JS v script-eshop.js (viz
   poznámka u sekce 1c2d tam). Pokud budete tuhle sekci chtít
   později přidat, přenesu ji ze SK stylesheetu (tam je to sekce 11
   pod stejným nadpisem) i se skriptem, který ji staví. */

/* ------------------------------------------------------------
   11b. MODERNÍ MIKROINTERAKCE
   ------------------------------------------------------------ */
/* scroll-reveal – triedy prideľuje JS; bez JS je všetko viditeľné.
   Pomalé, mäkké tempo (easeOutExpo) – profesionálny dojem. */
.sl-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity .9s cubic-bezier(.16, 1, .3, 1),
    transform .9s cubic-bezier(.16, 1, .3, 1);
}
.sl-reveal--in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .sl-reveal { opacity: 1; transform: none; transition: none; }
}

/* hlavná navigácia – DEFINITÍVNE riešenie hoveru (v49):
   ČISTÁ zmena farby textu na brand červenú. Žiadne linky.

   História pre budúce úpravy – v tomto menu zlyhali všetky
   pokusy o podčiarknutie:
   - text-decoration → prečiarklo viacriadkové položky mega-menu,
   - ::after na <a> aj inset box-shadow → prečiarklo "Softvér",
   - position:relative + ::after na <li> → rozbilo pozicovanie
     mega-menu a prepísalo pseudo-element šablóny,
   - background-image na <a> → šablóna ho prebíja, linka sa
     nezobrazila.
   Zmena farby je jediný zásah, ktorý nemá ako nič rozbiť. */
@media (min-width: 768px) {
  .navigation-in > ul > li > a {
    background-image: none !important;
    background-color: transparent !important;
    transition: color .2s var(--sl-ease);
  }
  .navigation-in > ul > li:hover > a,
  .navigation-in > ul > li.exp > a,
  .navigation-in > ul > li.active > a,
  .navigation-in > ul > li.active-parent > a {
    color: var(--sl-brand) !important;
    text-decoration: none;
  }
  .navigation-in ul ul a:hover,
  .menu-helper a:hover,
  .menu-helper li a:hover {
    color: var(--sl-brand) !important;
    background-color: transparent !important;
    text-decoration: none;
  }
}

/* jemné nadvihnutie hlavných CTA pri hoveri */
.type-product [data-testid="buttonAddToCart"]:hover,
.btn-conversion:hover {
  transform: translateY(-1px);
}

/* nadpis nad Instagram feedom (vkladá JS – wrapper zaručí,
   že nadpis je vždy NAD fotkami, nie vedľa nich) */
[data-sl-ig-wrap] {
  display: block;
  width: 100%;
  flex: 0 0 100%;
}
.sl-ig-title {
  display: block;
  width: 100%;
  text-align: center;
  margin: 10px 0 24px;
}

/* označenie textu vo farbe značky */
::selection {
  background: rgba(195, 15, 0, .14);
}

/* breadcrumbs hover */
.breadcrumbs a:hover {
  color: var(--sl-brand);
}

/* tlačidlo "späť hore" (stavia JS) */
.sl-top {
  position: fixed;
  right: 18px;
  bottom: 96px; /* nad chat widgetom Online podpora */
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--sl-border);
  box-shadow: var(--sl-shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease, background .15s ease;
  z-index: 9980;
  padding: 0;
}
.sl-top.on {
  opacity: 1;
  visibility: visible;
}
.sl-top:hover {
  background: var(--sl-surface);
}
.sl-top svg {
  width: 20px;
  height: 20px;
  color: var(--sl-ink-soft);
}

/* ------------------------------------------------------------
   12. RESPONSÍVNE ÚPRAVY ŠABLÓNY (pôvodné, overené v produkcii)
   ------------------------------------------------------------ */
@media (min-width: 768px) {
  .navigation-in { font-size: 15px; line-height: 15px; }
  .navigation-in ul li a { padding-left: 15px; padding-right: 22px; }
  .top-navigation-bar .container > div.top-navigation-contacts { top: 0; height: 49px; }
  .welcome h1 { font-size: 40px; margin-bottom: 30px; }
  .welcome p { font-size: 16px; line-height: 1.8; margin-bottom: 30px; }
  .header-top { padding-top: 30px; padding-bottom: 10px; }
  .popup-widget.cart-widget, .popup-widget.login-widget { top: 105px; }
  .admin-logged .popup-widget.cart-widget, .admin-logged .popup-widget.login-widget { top: 130px; }
  .products-related-block h2, .products-alternative-block h2,
  h4.homepage-group-title, .h4.homepage-group-title { font-size: 30px; }
  body .hodnoceni:before { text-align: center; font-size: 30px; margin-bottom: 30px; }
  .products-block.products .p .name { font-size: 18px; }
  .navigation-buttons a[data-target="cart"]:hover { color: white; }
  .header-top .btn.cart-count:hover .cart-price { color: white; }
  .navigation-buttons .click-cart a:after { display: none; }
  .click-cart { background: var(--color-secondary-hover); border-radius: 8px; }
  .click-cart:hover { background: var(--color-secondary-hover); }
  #header .cart-count { border-radius: 7px 7px 0 0; }
  .navigation-buttons a[data-target="cart"] { color: #fff; }
  .header-top .btn.cart-count:before { font-size: 26px; color: white !important; }
  .navigation-buttons { right: 0; }
  .cart-window-visible #header .click-cart { border-radius: 7px 7px 0 0; }
  .cart-window-visible #header .cart-count { background-color: transparent; border-radius: 7px 7px 0 0; }
  .cart-window-visible .btn.cart-count .cart-price { color: white; }
  .popup-widget { margin-left: -6px; }
}

@media (min-width: 992px) {
  .welcome { padding: 40px; }
  .header-top { padding-top: 30px; padding-bottom: 10px; }
  .popup-widget.cart-widget, .popup-widget.login-widget { top: 130px; }
  .admin-logged .popup-widget.cart-widget, .admin-logged .popup-widget.login-widget { top: 155px; }
  .popup-widget.cart-widget { margin-left: 106px; }
}

@media (min-width: 1200px) {
  .popup-widget.cart-widget { margin-left: 209px; }
}

@media (min-width: 1440px) {
  .popup-widget.cart-widget { margin-left: 329px; }
}

@media (max-width: 767px) {
  .top-navigation-bar { background-color: white; }
}

@media (max-width: 370px) {
  .top-navigation-bar .site-name a img { max-height: 30px; }
}

/* ------------------------------------------------------------------
   Linka pod nadpisom stránky – preč
   ------------------------------------------------------------------
   Šablóna dáva hlavičke článku border-bottom: 1px #e5e7eb. Overené
   v konzole 17. 7. 2026: linku kreslí <header>, nie nadpis, a nie je
   to pseudoprvok ani <hr> – preto stačí zrušiť jediný okraj.

   Na prepísaných stránkach je zbytočná: nadpis od textu oddeľuje
   medzera a linka stránku len rozsekne na dva nesúvisiace kusy.

   Rozsah je obmedzený na hlavičku článku – liniek inde na webe sa
   to nedotkne.
   ------------------------------------------------------------------ */
article.pageArticleDetail > header {
  border-bottom: 0 !important;
}

/* ==================================================================
   FAQ na titulnej stránke – dizajn
   ==================================================================
   HTML sa zámerne NEMENÍ. Blok visí na háčikoch js-tabs-group,
   js-tab-list-item, js-accordion-trigger a js-accordion-content –
   akýkoľvek zásah do štruktúry by rozbil záložky aj rozbaľovanie.
   Preto sa štýluje výhradne cez existujúce triedy.

   Šípku pri otázke NEKRESLÍME – šablóna má vlastnú a boli by dve.
   ================================================================== */

.faq-block .faq-group {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 40px;
  align-items: start;
}

/* ---------- bočné záložky ----------
   Rovnaké podčiarknutie ako v hlavnom menu: gradient na pozadí, ktorý
   rastie z 0 % a na okrajoch sa vytráca. Nie ::after – ten si šablóna
   môže používať pre vlastnú grafiku, rovnako ako pri menu.
   Text sa len zosvetlí do tmavej, červená ostáva vyhradená pre linku:
   dva červené signály naraz sú priveľa, stačí jeden. */
.faq-block .faq-side {
  min-width: 0;
  border-right: 1px solid var(--sl-border);
  padding-right: 24px;
}
.faq-block .faq-side-list {
  margin: 0; padding: 0; list-style: none;
  /* flex + flex-start: položka sa zúži na šírku textu, takže
     podčiarknutie hugne text a nekreslí sa cez prázdny stĺpec */
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 2px;
  /* Sticky: pri dlhých odpovediach záložky odscrollujú preč a zákazník
     sa nemá ako prepnúť inam bez toho, aby scrolloval späť hore. */
  position: sticky; top: 90px;
}
.faq-block .faq-side-list__item {
  margin: 0; padding: 11px 4px 15px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13.5px; font-weight: 700; letter-spacing: .3px;
  line-height: 1.45; color: var(--sl-muted);
  cursor: pointer;
  background-color: transparent !important;
  background-image: linear-gradient(90deg,
    transparent,
    var(--sl-brand) 30%,
    var(--sl-brand) 70%,
    transparent);
  background-repeat: no-repeat;
  background-position: center bottom 6px;
  background-size: 0% 2px;
  transition: background-size .25s var(--sl-ease), color .2s var(--sl-ease);
}
.faq-block .faq-side-list__item:hover,
.faq-block .faq-side-list__item.is-active {
  background-size: 88% 2px;
  color: var(--sl-ink);
}

/* ---------- obsah ---------- */
.faq-block .faq-content { min-width: 0; }
/* Nadpis vnútri opakuje názov aktívnej záložky, ktorá je hneď vedľa.
   Na mobile záložky nemusia byť vidieť, tam zostáva. */
.faq-block .faq-content-title { display: none; }

/* ---------- otázky ---------- */
.faq-block .accordion__item {
  margin: 0 0 10px;
  background: var(--sl-bg);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius);
  overflow: hidden;
  transition: border-color .18s var(--sl-ease), box-shadow .18s var(--sl-ease);
}
.faq-block .accordion__item:hover { border-color: #dcdcdc; }
.faq-block .accordion__item.is-active,
.faq-block .accordion__item.is-open,
.faq-block .accordion__item.active {
  border-color: rgba(183, 12, 0, .28);
  box-shadow: 0 6px 20px rgba(183, 12, 0, .06);
}

.faq-block .accordion__trigger {
  position: relative;
  padding: 21px 50px 21px 24px;
  font-family: 'Montserrat', sans-serif;
  font-size: 17px; font-weight: 700; line-height: 1.45;
  color: var(--sl-ink);
  cursor: pointer;
  transition: color .18s var(--sl-ease);
}
.faq-block .accordion__trigger:hover { color: var(--sl-brand); }

/* Odsadenie dávame odseku, nie kontajneru: šablóna môže obsah
   rozbaľovať cez výšku a padding na kontajneri by výpočet rozhodil. */
.faq-block .accordion__content p {
  margin: 0;
  padding: 0 24px 24px;
  font-family: 'Montserrat', sans-serif;
  font-size: 16.5px; line-height: 1.75; color: var(--sl-ink-soft);
}

@media (max-width: 900px) {
  .faq-block .faq-group { grid-template-columns: 1fr; gap: 20px; }
  .faq-block .faq-side { border-right: 0; padding-right: 0; border-bottom: 1px solid var(--sl-border); }
  /* Záložky na šírku: zvislý zoznam by na mobile zabral celú
     obrazovku skôr, než sa čitateľ dostane k prvej otázke. */
  .faq-block .faq-side-list {
    position: static;
    flex-direction: row; align-items: stretch;
    gap: 18px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .faq-block .faq-side-list::-webkit-scrollbar { display: none; }
  .faq-block .faq-side-list__item {
    flex: 0 0 auto;
    padding: 4px 2px 14px;
    white-space: nowrap;
    font-size: 12.5px;
  }
  .faq-block .faq-side-list__item:hover,
  .faq-block .faq-side-list__item.is-active { background-size: 100% 2px; }
}
@media (max-width: 560px) {
  .faq-block .accordion__trigger { padding: 17px 42px 17px 17px; font-size: 15.5px; }
  .faq-block .accordion__content p { padding: 0 17px 19px; font-size: 15px; line-height: 1.75; }
}

/* ------------------------------------------------------------
   Ikony nadpisov v košíku (Zvoľte spôsob dopravy / platby)
   ------------------------------------------------------------
   Shoptet kreslí tieto ikony znakom z privátnej oblasti Unicode
   v ::before a znak existuje LEN vo fonte "shoptet". Pseudoprvok
   ale dedil Roboto, ktorý ten znak nepozná, takže sa namiesto
   ikony vykreslil prázdny štvorec.

   Overené v konzole 22. 7. 2026:
     ::before content: znak U+Exxx, šírka 17,44 px (znak sa kreslí)
     ::before font-family: Roboto  ->  ikonu nemá odkiaľ vziať
     načítané fonty: Roboto | shoptet | apollo | Montserrat | lg

   Font sa priraďuje priamo pseudoprvku, nie elementu – text
   nadpisu tak ostáva v Montserrate a ikonu si kreslí šablóna.

   PORADIE FONTOV JE PODSTATNÉ. Ten istý kód znaku majú oba fonty,
   ale každý pod ním kreslí niečo iné: pri "shoptet" prvom vyšiel
   krížik a kvetina. Ikony patria fontu šablóny Apollo, preto ide
   apollo prvé a shoptet ostáva len ako záloha.
   ------------------------------------------------------------ */
.order-icon::before {
  font-family: 'apollo', 'shoptet', sans-serif !important;
}