/* ============================================================
   SOFTVERLACNO.COM – style-eshop.css   (v48)
   JEDINÝ zdroj vlastného CSS.
   Nahraj cez FTP do /user/documents/upload/
   V Záhlaví linkované ako /user/documents/upload/style-eshop.css?v=48
   (pri každej ďalšej úprave zvýš číslo verzie)
   ============================================================ */

/* ------------------------------------------------------------
   0. DIZAJNOVÉ TOKENY
   ------------------------------------------------------------ */
:root {
  /* farby */
  --sl-ink: #1a1a1a;            /* hlavný text */
  --sl-ink-soft: #4a4a4a;       /* sekundárny text */
  --sl-muted: #6b7280;          /* meta údaje */
  --sl-bg: #ffffff;
  --sl-surface: #f5f5f5;        /* podkladové bloky (BRAND MANUAL) */
  --sl-border: #e5e7eb;
  --sl-brand: #B70C00;          /* brand červená (BRAND MANUAL) – len akcent */
  --sl-brand-dark: #8f0900;
  --sl-cta: #6a9c00;            /* zelená LEN pre hlavné CTA (detail + checkout) */
  --sl-cta-hover: #558000;
  --sl-btn-secondary: #4a4a4a;  /* šedá pre všetky ostatné tlačidlá */
  --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). Ikony šablóny sú
   v ::before/::after s vlastným font-family, tie to nezasiahne.
   ------------------------------------------------------------ */
body, p, h1, h2, h3, h4, h5, h6, li, a,
span, div, td, th, label, strong, em, small, dt, dd,
input, button, select, textarea, legend,
#pobo-all-content, #pobo-all-content *,
.product-container, .product-container * {
  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 */
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
   ------------------------------------------------------------ */
header, #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;
  }
}

/* "Ako prebieha nákup?" – 3 kroky (vkladá JS) */
.sl-steps {
  margin: 14px 0 6px;
  padding: 20px 22px;
  background: var(--sl-surface);
  border: none;
  border-radius: var(--sl-radius);
  text-align: left;
}
.sl-steps__title {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--sl-ink);
}
/* na širokých obrazovkách 3 kroky VEDĽA SEBA v JEDNOM riadku –
   šírka podľa obsahu, aby posledný krok nepadal do 2 riadkov */
.sl-steps ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 16px;
}
.sl-steps li {
  flex: 0 1 auto;
  white-space: nowrap;
}
@media (max-width: 1200px) {
  .sl-steps ol {
    flex-direction: column;
    gap: 10px;
  }
  .sl-steps li {
    white-space: normal;
  }
}
.sl-steps li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  color: var(--sl-ink-soft);
  line-height: 1.5;
}
.sl-steps__num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--sl-cta);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.sl-steps a {
  color: var(--sl-cta-hover);
  font-weight: 600;
}

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

/* Opätovné využitie licencie – eko argument.
   Na stred, s ikonou v krúžku a na bielej ploche vo vnútri sivej
   karty: je to samostatná myšlienka, nie ďalší riadok textu. */
.sl-eco {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 16px 0 0;
  padding: 10px 16px;
  background: #fff;
  border-radius: var(--sl-radius-pill);
  font-size: 12px;
  line-height: 1.5;
  color: var(--sl-ink-soft);
  text-align: center;
}
.sl-eco__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(106, 156, 0, .12);
  color: var(--sl-cta-hover);
  font-size: 13px;
  flex: none;
}
@media (max-width: 560px) {
  .sl-eco {
    border-radius: var(--sl-radius);
    align-items: flex-start;
    text-align: left;
  }
}

/* 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. */
.sl-card {
  margin: 18px 0 6px;
  border: none;
  border-radius: 16px;
  overflow: hidden;
  background: var(--sl-surface);
}
.sl-card .sl-keyfacts,
.sl-card .sl-steps {
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}
.sl-card .sl-steps {
  padding-top: 22px;
  background-image: linear-gradient(90deg,
    transparent,
    #d5d5d5 18%,
    #d5d5d5 82%,
    transparent);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 88% 1px;
}
/* nadpis "Ako prebieha nákup?" na stred – kroky pod ním sú
   rozložené cez celú šírku, nadpis pri ľavom okraji pôsobil
   ako odseknutý */
.sl-card .sl-steps__title,
.sl-steps__title {
  text-align: center;
}

/* ------------------------------------------------------------
   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 {
  background-color: rgba(106, 156, 0, .07) !important;
  border: none !important;
  border-radius: 16px;
  box-shadow: none !important;
}
.discount-coupon .h4 strong {
  color: var(--sl-ink);
}
/* 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{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}
.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}
.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}
.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}
@media(max-width:600px){.sb{width:calc(100% - 90px);min-width:calc(100% - 90px);left:16px;transform:none;padding:10px 14px;gap:12px;height:70px;box-shadow:none}.sb.on{bottom:17px}.sn{font-size:11px;max-width:120px}.btn-sb{padding:10px 14px;font-size:13px;height:44px}.btn-sb svg{width:16px;height:16px}.sf{font-size:17px}}

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

/* 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 */
.sl-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  justify-content: center;
  align-items: center;
  padding: 12px 16px;
  margin: 0 0 18px;
  background: var(--sl-surface);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius);
  font-size: 13px;
  color: var(--sl-ink-soft);
}
.sl-trust__item {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-weight: 600;
}
.sl-trust__item svg {
  width: 18px;
  height: 18px;
  color: var(--sl-cta);
  flex: none;
}

/* 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" – plynulá rotácia sprava doľava
   cez celú šírku stránky (HTML stavia JS – čisté <a><img>,
   žiadne zdedené štýly z pôvodnej mriežky) */
html {
  overflow-x: clip; /* breakout na 100vw nesmie vytvoriť horizontálny scroll */
}
/* nadpis "Naši zákazníci" nad pásom (stavia JS).
   Trieda homepage-group-title mu dáva rovnaký červený akcent
   ako ostatným nadpisom sekcií – bez ďalšieho CSS. */
.sl-marquee-title {
  text-align: center;
  margin-bottom: 20px;
}
.sl-marquee {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  padding: 36px 0;
  /* v43: linky NIE SÚ border, ale gradienty na pozadí.
     Border sa dá rozplynúť jedine maskou a maska na celom páse
     sa ukázala ako nespoľahlivá. Gradient sa rozplýva sám od
     seba – žiadna maska, žiadna závislosť na podpore prehliadača,
     a navyše viem nastaviť pre linky iný dosah rozplynutia než
     pre logá. */
  border: none;
  background-color: #fff;
  background-image:
    linear-gradient(90deg, transparent 0, var(--sl-border) 14%,
      var(--sl-border) 86%, transparent 100%),
    linear-gradient(90deg, transparent 0, var(--sl-border) 14%,
      var(--sl-border) 86%, transparent 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: top center, bottom center;
  background-size: 100% 1px, 100% 1px;
}
/* maska ostáva na vnútornej vrstve – rozplýva LEN logá */
.sl-marquee__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(90deg,
    transparent 0, #000 9%, #000 91%, transparent 100%);
}
.sl-marquee__track {
  display: flex;
  align-items: center;
  gap: 40px;                     /* tesnejší rytmus – pás pôsobí
                                    ako súvislý celok, nie ako
                                    samostatné ostrovčeky */
  width: max-content;
  animation: sl-marquee 75s linear infinite; /* dĺžku dopočíta JS
                                                na konštantnú rýchlosť */
  will-change: transform;
}
.sl-marquee:hover .sl-marquee__track {
  animation-play-state: paused;
}
/* PEVNÁ šírka položky – šírka pásu tak nezávisí od načítania
   obrázkov (nulové šírky spôsobovali polovičný pás) */
.sl-marquee__track a {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 190px !important;
  height: 88px;
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
/* Optická normalizácia: vysoké erby a široké textové logá musia
   pôsobiť rovnako veľko. Preto NIŽŠÍ strop výšky (44px) než šírky
   – erb sa zmenší, wordmark ostane čitateľný. */
.sl-marquee__track img {
  max-height: 62px;
  max-width: 160px;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .6;
  transition: filter .3s var(--sl-ease), opacity .3s var(--sl-ease);
}
.sl-marquee__track a:hover img {
  filter: none;
  opacity: 1;
}
@keyframes sl-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (max-width: 1024px) {
  .sl-marquee { padding: 28px 0; }
  .sl-marquee__track { gap: 32px; }
  .sl-marquee__track a { width: 150px !important; height: 72px; }
  .sl-marquee__track img { max-height: 52px; max-width: 128px; }
}
@media (max-width: 600px) {
  .sl-marquee { padding: 20px 0; }
  .sl-marquee__track { gap: 24px; }
  .sl-marquee__track a { width: 116px !important; height: 56px; }
  .sl-marquee__track img { max-height: 42px; max-width: 100px; }
}
@media (prefers-reduced-motion: reduce) {
  .sl-marquee__track { animation: none; }
}

/* ------------------------------------------------------------
   11b. MODERNÉ MIKROINTERAKCIE
   ------------------------------------------------------------ */
/* 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 – hover = brand červený text + "fading hairline"
   akcent ako pod nadpismi sekcií.

   POZOR (v21): predchádzajúca verzia dávala .navigation-in > ul > li
   position:relative + ::after. Oboje rozbíjalo menu:
   - position:relative na <li> zmenilo pozicovací kontext pre
     absolútne pozicované rozbaľovacie (mega) menu šablóny,
   - ::after na <li> prepísalo pseudo-element, ktorý si šablóna
     používa pre vlastnú grafiku položiek.
   Preto sa podčiarknutie rieši cez background-image priamo na <a>
   – nezasahuje do pozicovania ani do pseudo-elementov šablóny. */
@media (min-width: 768px) {
  .navigation-in > ul > li > a {
    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);
  }
  /* hover, otvorené podmenu (.exp) aj aktuálna sekcia (.active).
     Text sa len ZOSVETLÍ do sivej – červená ostáva vyhradená pre
     podčiarknutie. Dva červené signály naraz (text aj linka) sú
     na hover príliš; stačí jeden. */
  .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 {
    background-size: 76% 2px;
    color: var(--sl-ink-soft) !important;
    text-decoration: none;
  }
  /* podmenu a "VIAC" – rovnaké zosvetlenie, žiadna linka */
  .navigation-in ul ul a:hover,
  .menu-helper a:hover,
  .menu-helper li a:hover {
    color: var(--sl-ink-soft) !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; }
}