/* =========================================================================
   Startsro Navigation — mega menu CSS
   Vychádza z prototypu startsro_menu_prototyp. Triedy a štruktúra zachované,
   font zladený so startsro.sk (Poppins). Všetko prefixované pod .sts-nav /
   .mega-* aby nekolidovalo s Enfold ani s 40 pluginmi.
   ========================================================================= */

/* =========================================================================
   ENFOLD HEADER — úplne skrytý keď je aktívny náš plugin.
   body.sts-nav-active pridáva plugin len ak má naimportované dáta.
   ========================================================================= */
body.sts-nav-active #header,
body.sts-nav-active #header_main,
body.sts-nav-active .av_header_transparency #header { display: none !important; }

/* STICKY FIX — position:sticky funguje len ak žiadny rodičovský element nemá overflow ≠ visible.
   Enfold a niektoré pluginy nastavujú overflow:hidden na html/body/#wrap_all kvôli animáciám.
   Vynulujeme to pre náš plugin. */
html.sts-nav-active,
body.sts-nav-active,
body.sts-nav-active #wrap_all,
body.sts-nav-active #main {
  overflow: visible !important;
  overflow-x: visible !important;
}
/* CELÝ HEADER je sticky (nie len .sts-nav).
   Dôvod: .sts-nav vnútri .sts-header (position:relative) sa pri scrollovaní
   "uvoľní" pri prejdení za výšku .sts-header. Sticky funguje len v rámci
   svojho najbližšieho scrolling parent-u.
   Riešenie: celý .sts-header je sticky → services-bar ostane prilepený
   k vrchu obrazovky, info-row sa schová pri `is-stuck` cez display:none. */
body.sts-nav-active .sts-header {
  position: sticky !important;
  top: 0;
  z-index: 999;
}

/* Ak je užívateľ prihlásený, WP admin bar (44 px / 46 px na mobile) je fixed na vrchu.
   Sticky header musí byť pod ním, inak ho admin bar prekrýva. */
body.sts-nav-active.admin-bar .sts-header {
  top: 32px;  /* default WP admin bar výška na desktope */
}
@media screen and (max-width: 782px) {
  body.sts-nav-active.admin-bar .sts-header {
    top: 46px;  /* WP admin bar mobile výška */
  }
}
@media screen and (max-width: 600px) {
  /* Pod 600 px WP admin bar automaticky skryje (admin-bar trieda zostáva, ale bar nie je fixed) */
  body.sts-nav-active.admin-bar .sts-header {
    top: 0;
  }
}

/* Náš header je prvý prvok stránky — vynulovať Enfold odsadenie pre #main.
   Enfold pravidlá ktoré treba prebiť:
     - desktop: .html_header_top.html_header_sticky #top #wrap_all #main { padding-top: 55px }
                špecifickosť (3,2,0)
     - mobile:  @media (max-width: 767px) ten istý selektor { padding-top: 50px !important }
                špecifickosť (3,2,0) + !important
   Trik: opakujeme #main v selektore (#main#main) pre extra ID špecifickosť (4,3,0).
   Bez .responsive triedy potrebnej (Enfold ju má vždy keď je responsive). */
html.html_header_top.html_header_sticky body.sts-nav-active #top #wrap_all #main#main,
html.html_header_sticky body.sts-nav-active #top #wrap_all #main#main,
body.sts-nav-active #top #wrap_all #main#main,
body.sts-nav-active #wrap_all #main#main,
body.sts-nav-active #main#main {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
@media only screen and (max-width: 767px) {
  html.html_header_top.html_header_sticky body.sts-nav-active #top #wrap_all #main#main,
  html.html_header_sticky body.sts-nav-active #top #wrap_all #main#main,
  .responsive body.sts-nav-active #top #wrap_all #main#main,
  body.sts-nav-active #top #wrap_all #main#main,
  body.sts-nav-active #wrap_all #main#main,
  body.sts-nav-active #main#main {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}

/* =========================================================================
   HEADER — dvojúrovňový (info riadok + lišta kategórií)
   Plugin renderuje celý header, Enfold hlavička je vypnutá.
   ========================================================================= */
/* CSS premenné MUSIA byť na :root (nie na .sts-header), pretože drawer + overlay
   sa cez JS presúvajú do body root mimo header (kvôli iOS Safari inert quirks).
   Bez :root by drawer nedostal --sts-teal-soft, var() by vyhodnotil prázdne, ikony
   by stratili pozadie, borders zmizli, atď. */
:root {
  /* Farby zladené so startsro.sk — overené z child theme style.css.
     teal      #00a19f  (163× v style.css, primárna)
     teal-dark #008a88  (hover varianty)
     navy      #3d4553  (texty, tmavé sekcie)
     sky       #f0f3f3  (svetlé pozadie sekcií) */
  --sts-teal:       #00a19f;
  --sts-teal-dark:  #008a88;
  --sts-teal-soft:  #e6f6f5;
  --sts-navy:       #3d4553;
  --sts-navy-soft:  #6a6869;
  --sts-gold:       #00a19f;
  --sts-bg:         #ffffff;
  --sts-surface:    #f0f3f3;
  --sts-text:       #3d4553;
  --sts-muted:      #6a6869;
  --sts-border:     #d2d2d2;
  --sts-shadow-pop: 0 16px 40px -12px rgba(61,69,83,.16), 0 4px 10px -2px rgba(61,69,83,.06);
  --sts-shadow-bar: 0 2px 12px rgba(61,69,83,.06);
  --sts-ease:       cubic-bezier(.23,1,.32,1);
  --sts-maxw:       1280px;
}

.sts-header {
  position: relative;
  z-index: 999;
  font-family: "Poppins", "Helvetica Neue", Arial, sans-serif;
  background: var(--sts-bg);
}

.sts-header *,
.sts-header *::before,
.sts-header *::after { box-sizing: border-box; }

/* Vypneme browser scroll anchoring na header + jeho rodičovi.
   Scroll anchoring (CSS overflow-anchor:auto default) sa snaží udržať viewport
   stable keď sa mení výška obsahu nad scrollom — ALE pri zmene výšky sticky header-u
   to vytvára feedback loop:
     1. info-row sa collapse-uje → stránka sa skráti
     2. browser auto-scrollne aby kompenzoval → scrollY skočí
     3. JS direction-aware to detekuje ako "scroll up" → unstuck
     4. info-row sa otvorí → stránka sa predĺži → loop
   Toto pravidlo browser anchor-u zakáže pre header. */
.sts-header,
.sts-header .sts-inforow,
.sts-header .sts-inforow * {
  overflow-anchor: none;
}

/* Enfold global heading reset — téma má napr.:
     h2, h2 a { font-size: 24px !important; font-family: 'Poppins' !important; ... }
   Musíme prebiť pre headingy vnútri nášho hlavičkového bloku, lebo by zničili layout. */
.sts-header h1,
.sts-header h2,
.sts-header h3,
.sts-header h4,
.sts-header h5,
.sts-header h6 {
  font-family: inherit !important;
  text-transform: none !important;
  margin: 0;
  padding: 0;
  letter-spacing: normal !important;
  line-height: 1.3 !important;
}
.sts-header h1 a, .sts-header h2 a, .sts-header h3 a,
.sts-header h4 a, .sts-header h5 a, .sts-header h6 a {
  font-family: inherit !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: inherit !important;
}

/* --------------------------------------------------------------------- */
/* RIADOK 1 — info riadok                                                */
/* Plynulá animácia pri skrývaní: max-height + opacity + translate.      */
/* Manus pattern — žiadny display:none ktorý by spôsobil layout jump.    */
/* --------------------------------------------------------------------- */
.sts-inforow {
  position: relative;
  z-index: 1000;              /* > .sts-nav (998) aby info-row dropdown menu prekryl lištu kategórií */
  border-bottom: 1px solid var(--sts-border);
  background: var(--sts-bg);
  /* overflow: visible — submenu z .sts-infonav__item musí môcť prečnievať mimo
     box info riadku, inak by sa orezalo a nebolo by viditeľné. Collapse animácia
     pri scrollovaní (is-stuck) stále funguje cez max-height + opacity v kombinácii. */
  overflow: visible;
  max-height: 120px;          /* pevný horný limit aby max-height vedel animovať na 0 */
}
/* ============================================================================
   ANTI-FLASH SYSTEM (defense in depth — viď research notes)

   Layer 1 (PHP): wp_head priority 1 spustí inline blocking script.
                  Script číta scrollY a pridá .sts-pre-stuck + .sts-no-anim na <html>
                  PRED prvým paintom.
   Layer 2 (CSS): html.sts-no-anim vypína všetky transitions počas loadu.
   Layer 3 (CSS): html.sts-pre-stuck stylúje info-row IDENTICKY ako runtime .is-stuck.
                  Prvý paint je už v správnom kompaktnom stave.
   Layer 4 (JS):  Po 2× requestAnimationFrame sync-ne .sts-pre-stuck → .is-stuck
                  na <header>, odstráni .sts-no-anim z <html>.
   ============================================================================ */

/* Layer 2: Suppress all transitions during page load */
html.sts-no-anim .sts-header,
html.sts-no-anim .sts-header *,
html.sts-no-anim .sts-inforow,
html.sts-no-anim .sts-inforow * {
  transition: none !important;
  animation-duration: 0.001s !important;
}

/* Layer 3: Pre-paint marker styles info-row identically to runtime .is-stuck */
html.sts-pre-stuck .sts-header .sts-inforow {
  max-height: 0;
  opacity: 0;
  transform: translateY(-8px);
  border-bottom-color: transparent;
}
html.sts-pre-stuck .sts-header .sts-logo--compact {
  display: inline-flex;
}
html.sts-pre-stuck .sts-header .sts-nav__right {
  display: flex;
}

/* Runtime transitions — aktívne keď JS odstráni .sts-no-anim z <html> */
html:not(.sts-no-anim) .sts-inforow {
  transition:
    max-height .26s var(--sts-ease),
    opacity .26s var(--sts-ease),
    transform .26s var(--sts-ease),
    border-color .26s var(--sts-ease);
}
.sts-inforow__inner {
  max-width: var(--sts-maxw);
  margin: 0 auto;
  padding: 0 24px;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 28px;
}

/* Logo */
.sts-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: 0 0 auto;
}
.sts-logo__img {
  display: block;
  height: 44px;
  width: auto;
}
/* Reálne Startsro SVG logo */
.sts-logo__svg {
  display: inline-flex;
  align-items: center;
}
.sts-logo__svg svg {
  height: 40px;
  width: auto;
  display: block;
}
.sts-logo--compact .sts-logo__svg svg { height: 30px; }
.sts-logo__text {
  font-size: 24px;
  font-weight: 800;
  color: var(--sts-navy);
  letter-spacing: -.02em;
}
.sts-logo__accent { color: var(--sts-teal); }

/* Info navigácia (Domov, O nás...) */
.sts-infonav {
  display: flex;
  align-items: center;
  gap: 22px;
  flex: 0 0 auto;       /* zaberie len toľko koľko potrebuje */
}
.sts-infonav__link {
  font-size: 14px;
  font-weight: 500;
  color: var(--sts-navy);
  text-decoration: none;
  transition: color .15s var(--sts-ease);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.sts-infonav__link:hover { color: var(--sts-teal); }

/* Položka s dropdown sub-menu (z WP Menu hierarchia) */
.sts-infonav__item {
  position: relative;
  display: inline-block;
}
.sts-infonav__caret {
  font-size: 10px;
  opacity: .7;
  transition: transform .15s var(--sts-ease);
}
.sts-infonav__item:hover .sts-infonav__caret,
.sts-infonav__item:focus-within .sts-infonav__caret {
  transform: rotate(180deg);
}
.sts-infonav__submenu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--sts-border);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(15, 27, 45, 0.10);
  min-width: 240px;
  max-width: 320px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .15s var(--sts-ease), visibility .15s var(--sts-ease), transform .15s var(--sts-ease);
  z-index: 95;
}
.sts-infonav__item:hover > .sts-infonav__submenu,
.sts-infonav__item:focus-within > .sts-infonav__submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.sts-infonav__submenu li { margin: 0; }
.sts-infonav__sublink {
  display: block;
  padding: 8px 16px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--sts-text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background .12s var(--sts-ease), color .12s var(--sts-ease);
}
.sts-infonav__sublink:hover,
.sts-infonav__sublink:focus {
  background: var(--sts-surface);
  color: var(--sts-teal-dark);
}

/* Wide variant — pri 9+ podpoložkách (napr. „Ako to funguje" má 16) rozdelí
   sub-menu do 3 stĺpcov pomocou CSS columns. Výhody oproti grid:
   - column-rule automaticky robí deliace čiary cez PLNÚ výšku dropdown-u
     (nie len pod najkratším stĺpcom ako pri border-left na <li> v grid)
   - browser sám zoradí položky do stĺpcov
   - break-inside: avoid zabráni rozdeleniu jednej položky medzi stĺpce
   - pevná min-height na sublink → rovnaké medzery aj keď text wrap-uje */
.sts-infonav__submenu--wide {
  display: block;
  column-count: 3;
  column-gap: 24px;
  column-rule: 1px solid var(--sts-border);
  min-width: 660px;
  max-width: 760px;
  padding: 12px 18px;
}
.sts-infonav__submenu--wide li {
  break-inside: avoid;
  border-left: 0;            /* prepíše prípadnú predošlú deklaráciu */
  padding: 0;
}
.sts-infonav__submenu--wide .sts-infonav__sublink {
  white-space: normal;       /* dlhšie texty môžu wrap-núť do 2 riadkov */
  padding: 9px 8px;
  min-height: 42px;          /* fixný rytmus — wrap nezmení medzeru medzi položkami */
  display: flex;
  align-items: center;
  line-height: 1.3;
}

.sts-inforow__right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1 1 auto;      /* zaberie zvyšné miesto, aby sa search mohol natiahnuť */
  min-width: 0;
  justify-content: flex-end;
}

/* Telefón */
.sts-phone {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 16px;
  font-weight: 700;
  color: var(--sts-navy);
  text-decoration: none;
  white-space: nowrap;
}
.sts-phone svg { width: 16px; height: 16px; color: var(--sts-teal); }
.sts-phone:hover { color: var(--sts-teal); }

/* Tlačidlá */
.sts-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .12s var(--sts-ease), background .15s var(--sts-ease);
}
.sts-btn:hover { transform: translateY(-1px); }
.sts-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.sts-btn--primary { background: var(--sts-teal); color: #fff; }
.sts-btn--primary:hover { background: var(--sts-teal-dark); }
.sts-btn--sm { padding: 7px 14px; font-size: 13px; }

/* Caret šípka pri kategórii */
.sts-cats__caret {
  display: inline-flex;
  width: 12px;
  height: 12px;
  opacity: .55;
  transition: transform .15s var(--sts-ease);
}
.sts-cats__caret svg { width: 100%; height: 100%; }
.sts-cats__btn[aria-expanded="true"] .sts-cats__caret { transform: rotate(180deg); }

/* Pravá strana riadku 2 — search box + mini CTA.
   Zobrazí sa LEN keď je header scrollnutý (info riadok schovaný). */
.sts-nav__right {
  display: none;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  flex-shrink: 0;
}
.sts-header.is-stuck .sts-nav__right { display: flex; }

/* Sticky variant search boxu — kompaktnejší ako v info-row */
.sts-search--sticky {
  flex: 0 0 auto;
  width: 220px;
  min-width: 0;
  max-width: none;
}
.sts-search--sticky .sts-search__input {
  height: 36px;
  padding: 0 10px 0 34px;
  font-size: 12.5px;
}
/* Dropdown sticky search-u — drží sa pod sticky lištou */
.sts-header.is-stuck .sts-search--sticky .sts-search__results {
  top: 64px;
  right: 24px;
  left: auto;
  transform: none;
  width: min(620px, calc(100vw - 48px));
}
/* Admin bar offset aj pre sticky variant. */
body.sts-nav-active.admin-bar .sts-header.is-stuck .sts-search--sticky .sts-search__results {
  top: calc(64px + 32px);
}
@media screen and (max-width: 782px) {
  body.sts-nav-active.admin-bar .sts-header.is-stuck .sts-search--sticky .sts-search__results {
    top: calc(64px + 46px);
  }
}
@media screen and (max-width: 600px) {
  body.sts-nav-active.admin-bar .sts-header.is-stuck .sts-search--sticky .sts-search__results {
    top: 64px;
  }
}
/* Mini CTA s arrow — Manus btn--xs štýl */
.sts-nav__right .sts-btn--sm {
  padding: 8px 14px;
  font-size: 13px;
}
.sts-nav__right .sts-btn--sm svg {
  width: 12px;
  height: 12px;
}

/* --------------------------------------------------------------------- */
/* RIADOK 2 — lišta kategórií                                            */
/* Sticky-ness je riešená na úrovni .sts-header (vyššie) — celý header   */
/* je sticky, takže services-bar zostane prilepený automaticky.          */
/* --------------------------------------------------------------------- */
.sts-nav {
  position: relative;
  z-index: 998;
  background: var(--sts-bg);
  border-bottom: 1px solid var(--sts-border);
  box-shadow: var(--sts-shadow-bar);
}

.sts-nav__inner {
  position: relative;
  max-width: var(--sts-maxw);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Kompaktné logo v lište — skryté kým sa nescrolluje */
.sts-logo--compact {
  flex: 0 0 auto;
  display: none;
}
.sts-logo--compact .sts-logo__img { height: 32px; }
.sts-logo--compact .sts-logo__text { font-size: 19px; }

/* Keď je header scrollnutý — JS pridá .is-stuck na .sts-header.
   Info-row sa plynule "stiahne": max-height → 0, opacity → 0, transform translateY(-8px).
   NEpoužívať display:none — layout by skočil.
   visibility:hidden + pointer-events:none zabezpečia, že keyboard focus a screen
   readery preskočia inforow keď je vizuálne skrytý (od v2.5.1 nemá overflow:hidden,
   takže by inak ostal focusable). transition-delay zhoduje s opacity .26s aby
   prechod ostal plynulý. */
.sts-header.is-stuck .sts-inforow {
  max-height: 0;
  opacity: 0;
  transform: translateY(-8px);
  border-bottom-color: transparent;
  visibility: hidden;
  pointer-events: none;
  transition: max-height .26s var(--sts-ease),
              opacity .26s var(--sts-ease),
              transform .26s var(--sts-ease),
              border-bottom-color .26s var(--sts-ease),
              visibility 0s linear .26s;
}
.sts-header.is-stuck .sts-logo--compact {
  display: inline-flex;
}
/* Sticky kompakcia — tabs sú kompaktnejšie aby sa zmestil search + CTA */
.sts-header.is-stuck .sts-cats__btn {
  padding: 0 10px;
  font-size: 13.5px;
  height: 48px;
}
.sts-header.is-stuck .sts-cats__icon {
  width: 26px;
  height: 26px;
}
.sts-header.is-stuck .sts-cats__icon svg {
  width: 14px;
  height: 14px;
}
.sts-header.is-stuck .sts-cats {
  gap: 2px;
}

/* Skrytý text pre čítačky (ak ho téma nemá) */
.sts-nav .screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------- */
/* Lišta kategórií                                                       */
/* --------------------------------------------------------------------- */
.sts-cats {
  display: flex;
  gap: 4px;
  margin: 0 auto 0 0;   /* odtlačí search box doprava */
  padding: 0;
  list-style: none;
}

.sts-cats__item { position: relative; }

.sts-cats__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 14px;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 600;
  font-size: 14.5px;
  color: rgba(15,27,45,.8);
  cursor: pointer;
  white-space: nowrap;
  transition: color .14s var(--sts-ease);
}
/* Prvý tab zarovnaný s logom — žiadny ľavý padding aby ikona kategórie
   začínala presne na ľavom okraji maxw containera (rovnako ako logo).
   !important kvôli overrides v .is-stuck a media query-ach. */
.sts-cats__item:first-child .sts-cats__btn,
.sts-header.is-stuck .sts-cats__item:first-child .sts-cats__btn {
  padding-left: 0 !important;
}
.sts-cats__btn:hover,
.sts-cats__btn[aria-expanded="true"] {
  color: var(--sts-navy);
}

/* Farebný zaoblený štvorček s ikonou — ako Manus .tab__icon */
.sts-cats__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--sts-surface);
  color: var(--sts-muted);
  flex-shrink: 0;
  transition: background .14s var(--sts-ease), color .14s var(--sts-ease);
}
.sts-cats__icon svg { width: 18px; height: 18px; }
/* Všetky 5 accentov zladené na teal značku webu — jemné pastelové pozadia,
   teal ikony. Vizuálna jednota namiesto 5 rôznych farieb. */
.sts-cats__icon--teal,
.sts-cats__icon--navy,
.sts-cats__icon--gold,
.sts-cats__icon--green,
.sts-cats__icon--red {
  background: var(--sts-teal-soft);
  color: var(--sts-teal-dark);
}

/* --------------------------------------------------------------------- */
/* Mega panel                                                            */
/* --------------------------------------------------------------------- */
.sts-mega-wrap {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: min(1180px, calc(100vw - 32px));
  z-index: 9990;
  /* obal nesmie zachytávať klikanie kým nie je panel otvorený */
  pointer-events: none;
}

/* ZÁKLADNÝ STAV PANELU = SKRYTÝ.
   Skrývame troma nezávislými mechanizmami naraz, aby žiadny konflikt
   s témou ani plugin nemohol panel odkryť:
     1) display:none !important
     2) HTML atribút [hidden] (renderer ho vždy vykresľuje)
     3) visibility + výška 0
   Selektor cez .sts-header (istý spoločný rodič). */
html body .sts-header .mega-panel {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Otvorený panel — JS pridá triedu .is-open. Rovnaká špecifickosť, neskôr v poradí. */
html body .sts-header .mega-panel.is-open {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Vizuálne vlastnosti panelu (oddelené od skrývania) */
.sts-nav .mega-panel {
  margin-top: 8px;
  background: var(--sts-bg);
  border: 1px solid var(--sts-border);
  border-radius: 14px;
  box-shadow: var(--sts-shadow-pop);
  overflow: hidden;
  transform: translateY(-8px);
  transition: opacity .2s var(--sts-ease), transform .2s var(--sts-ease);
}
.sts-nav .mega-panel.is-open {
  transform: translateY(0);
}

/* Header strip */
.mega-panel__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  color: #fff;
}
/* Accent gradienty hlavičiek panelov — zladené so značkovou zelenou webu.
   Každá kategória má vlastný odtieň pre vizuálne odlíšenie. */
/* Hlavičky panelov — jemné svetlé pozadia s farebným akcentom (nie tučné gradienty).
   Vzhľad ladí so startsro.sk — biele pozadie, teal/navy akcent. */
.mega-panel__header--teal,
.mega-panel__header--navy,
.mega-panel__header--gold,
.mega-panel__header--green,
.mega-panel__header--red {
  background: var(--sts-surface);          /* svetlé pozadie #f0f3f3 */
  color: var(--sts-navy);
  border-bottom: 3px solid var(--sts-teal);  /* tenká teal čiara pod hlavičkou */
}
/* Ikona v hlavičke získa značkový teal */
.mega-panel__header .mega-panel__icon { color: var(--sts-teal); }
.mega-panel__header .mega-panel__title { color: var(--sts-navy); }
.mega-panel__header .mega-panel__sub { color: var(--sts-muted); opacity: 1; }

.mega-panel__icon {
  display: inline-flex;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
}
.mega-panel__icon svg { width: 100%; height: 100%; }

.mega-panel__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}
.mega-panel__sub {
  font-size: 12px;
  opacity: .85;
  margin-top: 1px;
  line-height: 1.35;
}

/* Grid: sekcie + CTA */
.mega-panel__grid {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 0;
}

/* --------------------------------------------------------------------- */
/* Sekcie so službami                                                    */
/* --------------------------------------------------------------------- */
.mega-sections {
  display: grid;
  gap: 4px 0;            /* gap=0 vodorovne, deliace čiary cez padding+border na .mega-section */
  padding: 14px 24px 16px;
}
.mega-sections.cols-1 { grid-template-columns: 1fr; }

/* Jemná deliaca čiara medzi stĺpcami sekcií.
   Border-left na každej okrem prvej, plus padding aby obsah nebol nalepený na čiare.
   Decentná opacity aby nebola príliš ostrá. */
.mega-section {
  padding: 0 14px;
  min-width: 0;
}
.mega-section:first-child { padding-left: 0; }
.mega-section:last-child  { padding-right: 0; }
.mega-section + .mega-section {
  border-left: 1px solid rgba(61, 69, 83, 0.08);
}
.mega-sections.cols-2 { grid-template-columns: repeat(2, 1fr); }
.mega-sections.cols-3 { grid-template-columns: repeat(3, 1fr); }

.sts-header h2.mega-section__title,
.mega-section__title {
  /* !important kvôli Enfold global h2 override (font-size:24px !important) */
  margin: 4px 0 6px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  color: var(--sts-navy) !important;
  font-family: inherit !important;
  line-height: 1.25 !important;
}

.mega-section__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mega-link {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  text-decoration: none;
  transition: background .15s var(--sts-ease);
}
.mega-link:hover { background: var(--sts-surface); }

.mega-link__body { min-width: 0; }

/* Flex: label naľavo, badge hneď za ním (NIE pri pravom okraji). Bez badge
   nezostáva žiadna medzera — flex iba prirodzene zoradí 1 alebo 2 children. */
.mega-link__top {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.3;
}

.mega-link__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--sts-navy);
  line-height: 1.3;
  min-width: 0;
}
/* Badge zarovnaný k vrchu label-u, nikdy sa nezmenší */
.mega-link__top .badge { flex-shrink: 0; }

.mega-link__desc {
  display: block;
  font-size: 11.5px;
  color: var(--sts-muted);
  margin-top: 1px;
  line-height: 1.3;
}

.mega-link__price {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--sts-teal-dark);
  white-space: nowrap;
}

/* Šípka vpravo namiesto ceny (1:1 ako Manus screenshot — bez cien v mega menu).
   Decentná, len so subtle hover zvýraznením. */
.mega-link__arrow {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  color: var(--sts-muted);
  opacity: .55;
  transition: opacity .15s var(--sts-ease), color .15s var(--sts-ease), transform .15s var(--sts-ease);
}
.mega-link__arrow svg {
  width: 14px;
  height: 14px;
}
.mega-link:hover .mega-link__arrow {
  opacity: 1;
  color: var(--sts-teal);
  transform: translateX(2px);
}

/* Badge štítok — pastelový pill ako v Manus prototype.
   Pôsobí všade: desktop mega menu, mobilný drawer (presun mimo header), search výsledky.
   Pôvodne sme mali `.sts-header .badge`, ale drawer sa cez JS presúva mimo header,
   takže selektor musí byť globálny pod prefixom. */
.sts-header .badge,
.sts-drawer .badge,
.sts-mobilesearch .badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.4;
  text-transform: uppercase;
  background: var(--sts-teal-soft);
  color: var(--sts-teal-dark);
  white-space: nowrap;
  vertical-align: middle;
}

/* --------------------------------------------------------------------- */
/* CTA panel                                                             */
/* --------------------------------------------------------------------- */
/* Pastelový CTA panel — svetlé zelené pozadie, tmavé texty
   v štýle startsro.sk (nie tmavý navy panel z prototypu). */
.mega-cta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px;
  background: var(--sts-teal-soft);   /* svetlo zelená */
  color: var(--sts-navy);              /* tmavý text na svetlom pozadí */
  border-left: 1px solid var(--sts-border);
}

.mega-cta__eyebrow {
  display: inline-flex;
  align-items: flex-start;   /* dot zarovnaný na prvý riadok textu */
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.25;          /* kompaktnejšie zalomenie pri wrap-e */
  text-transform: uppercase;
  color: var(--sts-teal-dark);   /* tmavšia zelená pre akcent */
}
.mega-cta__dot {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--sts-teal);
  /* Posun dot-u nadol o (line-height - dot)/2 aby vizuálne sedel na strede
     prvého riadku textu, nie na úplnom topе. */
  margin-top: 4px;
}

.sts-header h3.mega-cta__title,
.mega-cta__title {
  /* !important kvôli Enfold global h3 override */
  margin: 2px 0 0 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: var(--sts-navy) !important;
  font-family: inherit !important;
  text-transform: none !important;
}
.mega-cta__body {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--sts-text);
  opacity: .85;
}
.mega-cta__actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.sts-nav .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s var(--sts-ease), background .15s var(--sts-ease);
}
.sts-nav .btn svg { width: 13px; height: 13px; }
.sts-nav .btn:hover { transform: translateY(-1px); }

.btn--cta-primary {
  background: var(--sts-teal);   /* zelená webu #719430 */
  color: #fff !important;        /* prebíja Enfold link štýly */
}
.btn--cta-primary:hover { background: var(--sts-teal-dark); color: #fff !important; }

.btn--cta-secondary {
  background: #fff;
  color: var(--sts-navy);
  border: 1px solid var(--sts-border);
}
.btn--cta-secondary:hover { background: var(--sts-surface); border-color: var(--sts-teal); }

/* =========================================================================
   SEARCH — input v hlavičke + široký dropdown (podľa Manus prototypu)
   ========================================================================= */
.sts-search {
  position: relative;
  flex: 1 1 auto;          /* natiahne sa do voľnej šírky */
  min-width: 220px;
  max-width: 520px;        /* horný limit aby nebol prebujnený */
  /* form reset — Enfold má napr. form { margin-bottom: 30px } */
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  display: flex;
  align-items: center;
}
/* sts-search je teraz <form> — reset zvyšných Enfold input overrides */
form.sts-search { box-shadow: none !important; }

.sts-search__input {
  width: 100%;
  height: 40px;
  margin: 0 !important;
  padding: 0 14px 0 38px !important;
  border: 1px solid var(--sts-border) !important;
  border-radius: 10px !important;
  font: inherit !important;
  font-size: 14px !important;
  line-height: 1 !important;
  color: var(--sts-text);
  background: var(--sts-surface) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%236B7280" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>') no-repeat 12px center !important;
  box-shadow: none !important;
  display: block;
  vertical-align: middle;
}
.sts-search__input:focus {
  outline: none;
  border-color: var(--sts-teal);
  background-color: #fff;
}

/* Dropdown — FIXNE pozicovaný, široký, nezávislý od šírky inputu */
.sts-search__results {
  position: fixed;
  top: 76px;
  left: 50%;
  transform: translateX(-50%);
  width: min(620px, calc(100vw - 32px));
  max-height: 64vh;
  background: #fff;
  border: 1px solid var(--sts-border);
  border-radius: 14px;
  box-shadow: var(--sts-shadow-pop);
  z-index: 10050;
  padding: 0;
  /* Flex column: head + list (scrolluje) + footer (fixed) */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sts-search__results[hidden] { display: none; }

/* Pre prihlásených userov posunúť dropdown o výšku WP admin baru —
   inak by sa renderoval pod headerom (top:92px je viewport-relative,
   admin bar však tlačí .sts-header o 32 px nadol). */
body.sts-nav-active.admin-bar .sts-search__results { top: calc(76px + 32px); }
@media screen and (max-width: 782px) {
  body.sts-nav-active.admin-bar .sts-search__results { top: calc(76px + 46px); }
}
@media screen and (max-width: 600px) {
  /* Pod 600 px je WP admin bar reálne skrytý — netreba offset. */
  body.sts-nav-active.admin-bar .sts-search__results { top: 76px; }
}

/* Vnútorný zoznam — jediný scrollovateľný element. */
.sts-search__list {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  padding: 0;
  list-style: none;
  min-height: 0; /* aby flex child mohol overflow-nuť */
}

/* Hlavička dropdownu — „NÁJDENÝCH X SLUŽIEB" */
.sts-search__head {
  flex: 0 0 auto;
  padding: 12px 16px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sts-muted);
  border-bottom: 1px solid var(--sts-border);
  background: #fff;
}

/* Položka výsledku */
.sts-search__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  text-decoration: none;
  transition: background .14s var(--sts-ease);
}
.sts-search__item:hover,
.sts-search__item.is-active {
  background: rgba(0,161,158,.06);
}

/* Farebná ikona vľavo */
.sts-search__item-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  flex-shrink: 0;
  border: 1px solid var(--sts-border);
  background: var(--sts-surface);
  color: var(--sts-muted);
}
.sts-search__item-icon svg { width: 20px; height: 20px; }
/* Search ikony — taktiež zladené na teal značku */
.sts-search__item-icon--teal,
.sts-search__item-icon--navy,
.sts-search__item-icon--gold,
.sts-search__item-icon--green,
.sts-search__item-icon--red {
  background: var(--sts-teal-soft);
  color: var(--sts-teal-dark);
  border-color: transparent;
}
.sts-search__item.is-active .sts-search__item-icon {
  background: var(--sts-teal); color: #fff; border-color: transparent;
}

/* Telo položky — label a meta na samostatných riadkoch (stĺpec) */
.sts-search__item-body {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sts-search__item-label {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--sts-navy);
  line-height: 1.25;
}

/* Kind badge — „Objednávka" (produkt) / „Informácie o službe" (stránka).
   Renderuje sa vedľa nadpisu pri AJAX search výsledkoch. Pomáha uesrovi
   okamžite rozlíšiť či ide o kúpu alebo o popisnú stránku. */
.sts-search__kind {
  display: inline-block;
  padding: 2px 8px;
  margin-left: 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: 2px;       /* opticky zarovnať s baseline label-u */
  line-height: 1.4;
}
.sts-search__kind--order {
  /* Produkty — zlatý/teal akcent */
  background: var(--sts-teal-soft);
  color: var(--sts-teal-dark);
}
.sts-search__kind--info {
  /* Informačné stránky — navy akcent */
  background: #eef1f7;
  color: #1f3a5f;
}
.sts-search__item-meta {
  display: block;
  font-size: 12.5px;
  color: var(--sts-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sts-search__item-price {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--sts-teal-dark);
  white-space: nowrap;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* Päta dropdownu — klávesy + telefón */
.sts-search__foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-top: 1px solid var(--sts-border);
  background: var(--sts-surface);
  font-size: 11px;
  color: var(--sts-muted);
}
.sts-search__foot kbd {
  display: inline-block;
  padding: 2px 6px;
  margin: 0 1px;
  border: 1px solid var(--sts-border);
  border-radius: 4px;
  background: #fff;
  font-size: 10px;
}
.sts-search__foot-phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--sts-teal-dark);
  text-decoration: none;
}
.sts-search__foot-phone svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--sts-teal);
}
.sts-search__foot-phone:hover { color: var(--sts-teal); }

/* Loading indicator počas AJAX requestu */
.sts-search__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  flex: 1 1 auto;
}
.sts-search__spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 2px solid var(--sts-border);
  border-top-color: var(--sts-teal);
  border-radius: 50%;
  animation: sts-spin 0.6s linear infinite;
}
@keyframes sts-spin {
  to { transform: rotate(360deg); }
}

.sts-search__empty {
  flex: 1 1 auto;
  margin: 8px 16px 14px;
  padding: 12px 14px;
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: 8px;
  font-size: 13px;
  color: #78350F;
  line-height: 1.5;
}

/* =========================================================================
   MOBILNÝ drawer (pod 1150 px)
   ========================================================================= */
/* ZÁKLADNÝ STAV (desktop ≥ 1151 px):
   mobilné tlačidlo, drawer aj overlay sú skryté.
   Bez tohto by sa drawer vykreslil ako obyčajný div v toku stránky. */
.sts-mobile-toggle { display: none !important; }
/* Drawer + overlay sú default skryté na desktop. JS ich pri inicializácii presunie
   z headera do body root (kvôli iOS Safari inert quirks + lepší stacking). */
html body .sts-drawer,
html body .sts-drawer__overlay { display: none !important; }

/* Desktop ≥ 1151 px: mobilné prvky úplne skryté */
.sts-mobilebar,
.sts-mobilesearch,
.sts-mobile-search { display: none; }
.sts-burger { display: none; }

@media (max-width: 1150px) {
  /* Manus prototyp pattern:
     services-bar obsahuje: logo (compact) + lupa (search) + burger
     info-row sa ÚPLNE skryje
     pod services-bar sa zobrazí mobile-bar (telefón + hodiny + mini CTA) */

  /* Skryť: info-row, kategórie, mega panely, sticky-only nav__right */
  .sts-header .sts-inforow,
  .sts-header .sts-cats,
  .sts-header .sts-mega-wrap,
  .sts-header .sts-nav__right { display: none !important; }

  /* Compact logo na mobile vždy viditeľné v services-bar */
  .sts-header .sts-logo--compact { display: inline-flex !important; }
  .sts-header.is-stuck .sts-inforow { display: none !important; }

  /* Mobilné prvky zapnúť */
  html body .sts-drawer { display: flex !important; }
  html body .sts-drawer__overlay { display: block !important; }
  .sts-mobilebar { display: block; }
  .sts-mobilesearch { display: block; }

  /* ===== Services-bar — logo (vľavo) + lupa + burger (vpravo) ===== */
  .sts-nav__inner {
    padding: 0 16px;
    height: 64px;
    gap: 4px;
    justify-content: space-between;
  }
  .sts-logo--compact .sts-logo__svg svg { height: 32px; }

  /* Lupa — ikona 40×40, žiadny border */
  .sts-mobile-search {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    border-radius: 8px;
    color: var(--sts-navy);
    cursor: pointer;
    margin-left: auto;
    transition: background .14s var(--sts-ease);
  }
  .sts-mobile-search:hover { background: var(--sts-surface); }
  .sts-mobile-search svg { width: 22px; height: 22px; }
  .sts-mobile-search[aria-expanded="true"] {
    background: var(--sts-teal-soft);
    color: var(--sts-teal-dark);
  }

  /* Burger — 40×40 ikona, 3 čiarky */
  .sts-mobile-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 8px;
    color: var(--sts-navy);
    cursor: pointer;
    transition: background .14s var(--sts-ease);
  }
  .sts-mobile-toggle:hover { background: var(--sts-surface); }
  .sts-burger {
    display: inline-flex !important;
    flex-direction: column;
    justify-content: space-between;
    width: 22px;
    height: 16px;
  }
  .sts-burger span {
    display: block;
    height: 2px;
    width: 100%;
    background: currentColor;
    border-radius: 2px;
  }

  /* ===== Mobilný search panel — rolne sa pod mobile-bar ===== */
  .sts-mobilesearch {
    background: #fff;
    border-bottom: 1px solid var(--sts-border);
    box-shadow: 0 4px 12px rgba(15,27,45,.06);
  }
  .sts-mobilesearch[hidden] { display: none !important; }
  .sts-mobilesearch__inner {
    max-width: var(--sts-maxw);
    margin: 0 auto;
    margin-bottom: 0 !important;  /* prepis Enfold default margin-bottom na ul/wrapper */
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .sts-mobilesearch__input {
    flex: 1;
    height: 44px;
    padding: 0 14px 0 42px;
    border: 1px solid var(--sts-border);
    border-radius: 10px;
    background: var(--sts-surface) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%236B7280" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>') no-repeat 14px center;
    font: inherit;
    font-size: 15px;
    color: var(--sts-text);
  }
  .sts-mobilesearch__input:focus {
    outline: none;
    border-color: var(--sts-teal);
    background-color: #fff;
  }
  .sts-mobilesearch__close {
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    color: var(--sts-muted);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    border-radius: 6px;
  }
  .sts-mobilesearch__close:hover { background: var(--sts-surface); color: var(--sts-navy); }
  .sts-mobilesearch__results {
    border-top: 1px solid var(--sts-border);
    max-height: 60vh;
    overflow-y: auto;
  }
  .sts-mobilesearch__results[hidden] { display: none; }
  .sts-mobilesearch__results .sts-search__item { padding: 12px 16px; }

  /* ===== Mobilný kompaktný pruh — telefón + hodiny + mini CTA ===== */
  .sts-mobilebar {
    background: var(--sts-surface);
    border-bottom: 1px solid var(--sts-border);
  }
  .sts-mobilebar__inner {
    max-width: var(--sts-maxw);
    margin: 0 auto;
    padding: 0 16px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12.5px;
  }
  .sts-mobilebar__phone {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--sts-navy);
    text-decoration: none;
    font-weight: 700;
    white-space: nowrap;
  }
  .sts-mobilebar__phone svg { width: 14px; height: 14px; color: var(--sts-teal); }
  .sts-mobilebar__hours {
    color: var(--sts-muted);
    font-size: 12px;
    white-space: nowrap;
    flex: 1 1 auto;
    text-align: center;
  }
  .sts-btn--xs {
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 6px;
    gap: 4px;
  }
  .sts-btn--xs svg { width: 12px; height: 12px; }

  /* ===== Drawer kontajner + overlay ===== */
  .sts-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100dvh;
    width: min(420px, 92vw);
    background: #fff;
    box-shadow: -8px 0 30px rgba(15,27,45,.18);
    transform: translateX(100%);
    transition: transform .28s var(--sts-ease);
    /* Maximum 32-bit signed int z-index. Cookie consent bary majú často 99999999999+
       ale browser clampe to na 2147483647 (CSS <integer> max). Pri rovnakej hodnote
       vyhráva neskorší v DOM order — drawer presúvame do body root cez JS, takže
       je vždy posledný child body. */
    z-index: 2147483647;
    display: flex;
    flex-direction: column;
  }
  .sts-drawer.is-open { transform: translateX(0); }

  .sts-drawer__overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,27,45,.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s var(--sts-ease);
    z-index: 2147483646;
  }
  .sts-drawer__overlay.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  /* ===== Head — Menu + close ikona ===== */
  .sts-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 0 16px;
    border-bottom: 1px solid var(--sts-border);
    flex-shrink: 0;
  }
  .sts-drawer__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--sts-navy);
  }
  .sts-drawer__close {
    width: 42px;
    height: 42px;
    border: 0;
    background: transparent;
    border-radius: 6px;
    color: var(--sts-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .sts-drawer__close:hover { background: var(--sts-surface); color: var(--sts-navy); }
  .sts-drawer__close svg { width: 28px; height: 28px; }

  /* ===== CTA bar HORE — Objednávka služieb + Telefón =====
     Zladené s rozmermi .sts-btn (font 14px, weight 600, padding 9px 18px, radius 8px).
     Custom layout: ikona vľavo, biela čiara cez celú výšku tlačidla, centered label. */
  .sts-drawer__cta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 10px 4px;
  }
  .sts-drawer__cta-btn {
    display: flex;
    align-items: stretch;        /* deti rovnaká výška = čiara na plný výškový rozsah */
    background: var(--sts-teal);
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    overflow: hidden;            /* aby border-radius orezal divider */
    transition: background .15s var(--sts-ease), transform .12s var(--sts-ease);
  }
  .sts-drawer__cta-btn:hover,
  .sts-drawer__cta-btn:focus {
    background: var(--sts-teal-dark);
    color: #fff;
    transform: translateY(-1px);
  }
  .sts-drawer__cta-icon {
    display: grid;
    place-items: center;
    width: 44px;
    flex-shrink: 0;
    border-right: 1px solid rgba(255,255,255,.28);   /* deliaca čiara — plná výška tlačidla */
  }
  .sts-drawer__cta-icon svg {
    width: 18px;
    height: 18px;
    color: #fff;
  }
  .sts-drawer__cta-label {
    flex: 1;
    text-align: center;
    padding: 11px 16px;          /* 9px + 2px optical — vertikálne center */
  }

  /* ===== Body — scrollable obsah ===== */
  .sts-drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    -webkit-overflow-scrolling: touch;
  }

  /* Služby ako accordion — keď je otvorený, kategórie nech majú menší padding */
  .sts-drawer__info-group--services > summary {
    font-weight: 700;            /* hlavná položka, vizuálne ako sekcia */
  }
  .sts-drawer__services-body {
    padding: 4px 0 8px;
  }
  .sts-drawer__services-body .sts-mcat:first-child {
    margin-top: 4px;
  }

  /* ===== Info navigácia HORE — Domov, O nás, Recenzie... ===== */
  .sts-drawer__info {
    display: flex;
    flex-direction: column;
    padding: 4px;
  }
  .sts-drawer__info-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    border-radius: 8px;
    color: var(--sts-navy);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
  }
  .sts-drawer__info-link svg {
    width: 14px;
    height: 14px;
    color: var(--sts-muted);
  }
  .sts-drawer__info-link:hover {
    background: var(--sts-teal-soft);
    color: var(--sts-teal-dark);
  }
  .sts-drawer__info-link:hover svg { color: var(--sts-teal-dark); }

  /* Accordion group pre položku s podpoložkami (natívne <details>/<summary>) */
  .sts-drawer__info-group {
    display: block;
  }
  .sts-drawer__info-group > summary {
    list-style: none;          /* Firefox/Safari marker off */
    cursor: pointer;
  }
  .sts-drawer__info-group > summary::-webkit-details-marker {
    display: none;              /* Chrome marker off */
  }
  .sts-drawer__info-link--toggle .sts-drawer__info-caret {
    display: inline-flex;
    transition: transform .15s var(--sts-ease);
  }
  .sts-drawer__info-link--toggle .sts-drawer__info-caret svg {
    width: 14px;
    height: 14px;
  }
  .sts-drawer__info-group[open] .sts-drawer__info-caret {
    transform: rotate(180deg);
  }
  .sts-drawer__info-sublist {
    list-style: none;
    margin: 0 0 6px;
    padding: 0 0 0 12px;
    border-left: 2px solid var(--sts-border);
    margin-left: 16px;
  }
  .sts-drawer__info-sublist li { margin: 0; }
  .sts-drawer__info-sublink {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 6px;
    color: var(--sts-text);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
  }
  .sts-drawer__info-sublink svg {
    width: 12px;
    height: 12px;
    color: var(--sts-muted);
  }
  .sts-drawer__info-sublink:hover {
    background: var(--sts-surface);
    color: var(--sts-teal-dark);
  }
  .sts-drawer__info-sublink:hover svg { color: var(--sts-teal-dark); }

  /* ===== Sekcia Služby ===== */
  .sts-drawer__cats {
    margin-top: 12px;
    padding: 4px 4px 0;
    border-top: 1px solid var(--sts-border);
  }
  .sts-drawer__cats-title {
    padding: 12px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--sts-muted);
  }

  /* ===== Mobilná kategória (accordion s ikonou + popisom) ===== */
  .sts-mcat { border-bottom: 1px solid var(--sts-border); }
  .sts-mcat:last-child { border-bottom: 0; }

  .sts-mcat__head {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 12px;
    background: transparent;
    border: 0;
    text-align: left;
    cursor: pointer;
    font: inherit;
  }
  .sts-mcat__icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    flex-shrink: 0;
    background: var(--sts-teal-soft);
    color: var(--sts-teal-dark);
  }
  .sts-mcat__icon svg { width: 18px; height: 18px; }
  .sts-mcat__icon--teal,
  .sts-mcat__icon--navy,
  .sts-mcat__icon--gold,
  .sts-mcat__icon--green,
  .sts-mcat__icon--red {
    background: var(--sts-teal-soft);
    color: var(--sts-teal-dark);
  }
  .sts-mcat.is-open .sts-mcat__icon {
    background: var(--sts-teal);
    color: #fff;
  }

  .sts-mcat__text { flex: 1; min-width: 0; }
  .sts-mcat__title {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--sts-navy);
    line-height: 1.25;
  }
  .sts-mcat__desc {
    display: block;
    font-size: 11.5px;
    color: var(--sts-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
  }
  .sts-mcat__chev {
    display: inline-flex;
    color: var(--sts-muted);
    transition: transform .18s var(--sts-ease);
  }
  .sts-mcat__chev svg { width: 14px; height: 14px; }
  .sts-mcat.is-open .sts-mcat__chev { transform: rotate(180deg); }

  .sts-mcat__body {
    display: none;
    padding: 0 12px 12px 60px;
  }
  .sts-mcat.is-open .sts-mcat__body { display: block; }

  .sts-mcat__sec { margin-bottom: 12px; }
  .sts-mcat__sec:last-child { margin-bottom: 0; }
  .sts-mcat__sec-title {
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: rgba(107,114,128,.85);
    margin-bottom: 4px;
  }
  .sts-mcat__sec ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .sts-mcat__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 0;
    font-size: 13.5px;
    color: rgba(15,27,45,.85);
    text-decoration: none;
    line-height: 1.3;
  }
  .sts-mcat__link:hover { color: var(--sts-teal-dark); }
  .sts-mcat__link-label {
    flex: 1;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .sts-mcat__link-price {
    font-weight: 700;
    color: var(--sts-teal-dark);
    font-size: 12px;
    white-space: nowrap;
  }
  .sts-mcat__link-arrow {
    display: inline-flex;
    color: var(--sts-muted);
  }
  .sts-mcat__link-arrow svg { width: 12px; height: 12px; }

  /* ===== Footer — CTA tlačidlo ===== */
  .sts-drawer__foot {
    padding: 12px;
    border-top: 1px solid var(--sts-border);
    background: #fff;
    flex-shrink: 0;
  }
  .sts-btn--full {
    display: flex;
    width: 100%;
    justify-content: center;
  }
}

/* Tablet — mega menu 2 stĺpce */
@media (max-width: 1180px) and (min-width: 1151px) {
  .mega-sections.cols-3 { grid-template-columns: repeat(2, 1fr); row-gap: 24px; }
  /* Pri 2-stĺpcovom wrap: každá ne-párna sekcia je v ľavom stĺpci — bez border-left */
  .mega-sections.cols-3 .mega-section:nth-child(odd) { border-left: 0; padding-left: 0; }
  .mega-sections.cols-3 .mega-section:nth-child(even) { padding-right: 0; }
  .sts-mega-wrap { width: calc(100vw - 32px); }
}

/* Sticky mode (desktop ≥ 1151 px) — minimalist:
   logo + 5 plne textových kategórií. Search a CTA sú úplne skryté
   (priestor sa uvoľní pre dlhé slovenské labely). */
@media (min-width: 1151px) {
  .sts-header.is-stuck .sts-nav__right { display: none; }
}

/* Úzky desktop (1151–1350 px) — 5 kategórií s plným textom sa síce zmestí,
   ale tab-y sú tlačené. Kompaktujeme padding, font a logo aby ostal vzduch.
   Aplikuje sa NA OBE varianty: default aj .is-stuck (sticky overrides z r. 414
   by inak prepísali tieto values v sticky režime). */
@media (min-width: 1151px) and (max-width: 1350px) {
  .sts-cats__btn,
  .sts-header.is-stuck .sts-cats__btn {
    font-size: 12px;
    padding: 0 8px;
    gap: 8px;
  }
  .sts-cats__icon,
  .sts-header.is-stuck .sts-cats__icon {
    width: 28px;
    height: 28px;
  }
  .sts-cats__icon svg,
  .sts-header.is-stuck .sts-cats__icon svg { width: 15px; height: 15px; }
  .sts-cats,
  .sts-header.is-stuck .sts-cats { gap: 2px; }
  .sts-logo__svg svg { height: 25px; }
  .sts-logo--compact .sts-logo__svg svg { height: 25px; }
}

/* Veľmi malé mobily (≤ 540 px) — kompaktnejšie paddingy, hodiny ostávajú */
@media (max-width: 540px) {
  .sts-nav__inner { padding: 0 12px; height: 52px; }
  .sts-logo--compact .sts-logo__svg svg { height: 32px; }
  .sts-mobile-toggle { padding: 7px 10px; font-size: 13px; }
  .sts-mobilebar__inner { padding: 0 12px; height: 40px; gap: 6px; }
  .sts-mobilebar__phone { font-size: 15px; gap: 4px; }
  .sts-mobilebar__phone svg { width: 15px; height: 15px; }
  .sts-mobilebar__hours { font-size: 13px; }
  .sts-btn--xs { padding: 5px 9px; font-size: 12px; }
}

/* Najmenšie mobily (≤ 380 px) — hodiny preč ak ozaj nestačí miesto */
@media (max-width: 380px) {
  .sts-mobilebar__hours { display: none; }
}

/* ============================================================================
   PREFERS-REDUCED-MOTION (WCAG 2.3.3)
   Users s motion sensitivity dostanú instant transitions namiesto animovaných.
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .sts-header,
  .sts-header *,
  .sts-header *::before,
  .sts-header *::after,
  .sts-drawer,
  .sts-drawer__overlay,
  .mega-panel,
  .sts-search__results,
  .sts-mobilesearch,
  .sts-mobilebar {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}