/* =========================================================
   HomeSystem – nové menu a kategórie na úvode (hs-menu.css v9)
   obchod.homesystem.sk · Shoptet šablóna 11
   Nahrať cez FTP do user/documents/, načítať v ZÁHLAVÍ za hs-dizajn.css:
   <link rel="stylesheet" href="https://cdn.myshoptet.com/usr/obchod.homesystem.sk/user/documents/hs-menu.css?v=4">
   v2 (7. 11. 2026): celé formátovanie hornej lišty menu podľa návrhu Úvod
   (biela lišta, tmavý text Exo 2, modré „Všetky kategórie“, čierne BLACK FRIDAY,
   červený Dopredaj). Staré formátovanie menu je z hs-dizajn.css v5 odstránené –
   nasadiť spolu: hs-dizajn.css?v=5 + hs-menu.css?v=2.
   v3 (7. 11. 2026): menu sa nezatvára pri prechode myšou do panelu (mostík cez medzeru,
   panel sa zavrie až 0,3 s po odchode myšou), platí aj pre podmenu Senzory/Osvetlenie/Kúrenie.
   v9 (8. 11. 2026): päta veľkého menu – Elektrické garniže vľavo, Všetky značky vpravo
   v8 (8. 11. 2026): lišta sa ukáže až po preusporiadaní (bez skoku), najneskôr po 2 s
   v7 (8. 11. 2026): bodka pri BLACK FRIDAY ďalej od okraja, menší pulz
   v6 (8. 11. 2026): nové mobilné menu (.hs-mob, otvára hs-menu.js v4)
   v5 (8. 11. 2026): podmenu sa pri prechode na inú položku prepne (mostík neprekrýva lištu),
       BF a Dopredaj sa pri nábehu neposúvajú, Blog – štvorcové obrázky, 6 starších článkov v 2 stĺpcoch
   v4 (7. 11. 2026): BLACK FRIDAY pulz + štítok, Podľa systému nový efekt (bez rámika),
   Blog ako panel, podmenu lišty s ikonami. Potrebuje hs-menu.js v2.
   HTML dopĺňa hs-menu.js.
   ========================================================= */

/* ---------- lišta menu (počítač) ---------- */
@media (min-width: 768px) {
  html #navigation { height: 56px !important; padding-bottom: 0 !important; margin-bottom: 0 !important; border-bottom: 1px solid #e3eef7 !important; }
  html .navigation-in { background: transparent !important; top: 8px !important; }
  html .navigation-in > ul > li { background: transparent !important; border: 0 !important; border-radius: 8px !important; margin: 0 2px !important; box-shadow: none !important; }
  html .navigation-in > ul > li > a {
    display: flex !important; align-items: center; gap: 8px; height: 40px !important; padding: 0 14px !important;
    line-height: 40px !important; border-radius: 8px !important; border: 0 !important; background: transparent !important;
    color: #1f1f1f !important; font-family: 'Exo 2', sans-serif !important; font-weight: 700 !important; font-size: 15px !important; text-transform: none !important;
  }
  html .navigation-in > ul > li > a * { font: inherit !important; color: inherit !important; }
  html .navigation-in > ul > li:hover > a,
  html .navigation-in > ul > li.exp > a,
  html .navigation-in > ul > li.hs-open > a { background: var(--hsd-tint, #f3f9fe) !important; color: var(--hsd-deep, #136fb0) !important; }
  html .navigation-in > ul > li.hs-mm-all > a { background: var(--hsd-brand, #239ceb) !important; color: #fff !important; padding: 0 16px !important; }
  html .navigation-in > ul > li.hs-mm-all:hover > a,
  html .navigation-in > ul > li.hs-mm-all.hs-open > a { background: var(--hsd-mid, #1b8fdc) !important; color: #fff !important; }
  html .navigation-in > ul > li.hs-mm-sys > a:after {
    content: ""; width: 6px; height: 6px; margin: -3px 0 0 2px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
  }
  /* BLACK FRIDAY a Dopredaj */
  html .navigation-in > ul > li.menu-item-1301,
  html .navigation-in > ul > li.menu-item-1853 { background: transparent !important; margin-top: 2px !important; }
  html .navigation-in > ul > li.menu-item-1301 > a,
  html .navigation-in > ul > li.menu-item-1853 > a { height: 36px !important; line-height: 36px !important; color: #fff !important; }
  html .navigation-in > ul > li.menu-item-1301 > a { background: #1f1f1f !important; }
  html .navigation-in > ul > li.menu-item-1853 > a { background: #cc0000 !important; }
  html .navigation-in > ul > li.menu-item-1301:hover > a { background: #000 !important; color: #ffc807 !important; }
  html .navigation-in > ul > li.menu-item-1853:hover > a { background: #a30000 !important; color: #fff !important; }
  html .menu-helper { margin-top: 12px !important; }
  /* panely a podmenu Shoptetu nesmie orezať lišta (vodorovne ostáva orezané – zoznam má v šablóne obrovskú šírku) */
  html #navigation { overflow-x: clip !important; overflow-y: visible !important; }
  /* neviditeľný mostík cez medzeru medzi lištou a podmenu Shoptetu */
  html .navigation-in > ul > li > .menu-level-2:before { content: none !important; }  /* podmenu je hneď pod lištou – mostík by prekryl susedné položky */
  html .navigation-in > ul > li > a, html .navigation-in > ul > li:hover > a, html .navigation-in > ul > li.exp > a { margin-left: 0 !important; margin-right: 0 !important; }
}

@media (min-width: 768px) {
  /* v lište nechávame len Senzory, Osvetlenie, Kúrenie – zvyšok je vo „Všetky kategórie“ */
  .navigation-in > ul > li.menu-item-688,
  .navigation-in > ul > li.menu-item-2112,
  .navigation-in > ul > li.menu-item-691,
  .navigation-in > ul > li.menu-item-2115,
  .navigation-in > ul > li.menu-item-2103,
  .navigation-in > ul > li.menu-item-2109,
  html.hs-menu2 .navigation-in > ul > li.menu-item-1752,
  html.hs-menu2 .navigation-in > ul > li.menu-item-795,
  html.hs-menu2 .navigation-in > ul > li.menu-item-831,
  html.hs-menu2 .navigation-in > ul > li.menu-item-1660,
  html.hs-menu2 .navigation-in > ul > li.menu-item--24,
  html.hs-menu2 .navigation-in > ul > li[class*="menu-item-external"] { display: none !important; }

  /* BLACK FRIDAY a Dopredaj vpravo – odsadenie dopočíta hs-menu.js (zoznam má v šablóne obrovskú šírku, auto nefunguje) */
  html.hs-menu2 .navigation-in > ul > li.hs-vpravo-prvy { margin-left: var(--hs-bf-odsad, 3px) !important; }

  /* Shoptet má #navigation s overflow:hidden – pri otvorenom paneli pustíme obsah nadol (vodorovne ostáva orezané) */

  /* naše položky */
  .navigation-in > ul > li.hs-mm { position: static; }
  .navigation-in > ul > li.hs-mm > .hs-mm-a {
    display: flex; align-items: center; gap: 8px; cursor: pointer;
  }
  .hs-burger, .hs-burger:before, .hs-burger:after {
    display: block; width: 16px; height: 2px; border-radius: 2px; background: currentColor; position: relative;
  }
  .hs-burger:before, .hs-burger:after { content: ""; position: absolute; left: 0; }
  .hs-burger:before { top: -5px; }
  .hs-burger:after { top: 5px; }

  /* rozbaľovací panel */
  .hs-mega {
    display: block; visibility: hidden; opacity: 0; transition: opacity .12s ease .15s, visibility 0s linear .3s;
    position: absolute; left: 0; top: calc(100% + 8px); z-index: 1000; width: var(--hs-nav-w, 1200px);
    margin-top: 0; padding: 24px 28px 18px; box-sizing: border-box;
    background: #fff; border: 1px solid var(--hsd-line, #e3eef7); border-radius: 0 0 16px 16px;
    box-shadow: 0 18px 40px rgba(13, 90, 143, .16);
    font-family: 'Source Sans 3', Arial, sans-serif; color: var(--hsd-ink, #1f1f1f); text-align: left;
    white-space: normal; cursor: default;
  }
  .hs-mm:hover > .hs-mega,
  .hs-mm.hs-open > .hs-mega { visibility: visible; opacity: 1; transition-delay: 0s, 0s; }
  .hs-mm.hs-open ~ .hs-mm:hover > .hs-mega { visibility: hidden; opacity: 0; }
  /* mostík cez medzeru medzi tlačidlom a panelom */
  .hs-mega:before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }

  .hs-mega-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 28px; }
  @media (min-width: 1200px) { .hs-mega-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
  .hs-mega-col { min-width: 0; }
  .hs-mega a { color: var(--hsd-ink, #1f1f1f) !important; background: none !important; text-decoration: none; padding: 0 !important; }
  .hs-mega-top {
    display: flex !important; align-items: center; gap: 10px; margin-bottom: 8px;
    font-family: 'Exo 2', sans-serif; font-weight: 800; font-size: 16px; line-height: 1.2;
  }
  .hs-mega-top:hover { color: var(--hsd-deep, #136fb0) !important; }
  .hs-mega-ico {
    flex: 0 0 34px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 16px;
    border-radius: 58% 42% 55% 45% / 48% 60% 40% 52%;
  }
  .hs-mega-col ul { list-style: none; margin: 0; padding: 0 0 0 44px; display: block !important; position: static !important; }
  .hs-mega-col li { display: block !important; margin: 0 0 4px; padding: 0; background: none !important; border: 0 !important; }
  .hs-mega-col li a { font-size: 14px; font-weight: 400; color: var(--hsd-text, #4d4d4d) !important; line-height: 1.35; }
  .hs-mega-col li a:hover { color: var(--hsd-deep, #136fb0) !important; text-decoration: underline; }
  .hs-mega-desc { display: block; padding-left: 44px; font-size: 14px; color: var(--hsd-muted, #6b6b6b); }
  .hs-mega-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--hsd-line, #e3eef7); text-align: right; }
  .hs-mega-foot a.hs-mega-garn { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 10px; background: #fff8dc; color: var(--hsd-ink, #1f1f1f) !important; }
  .hs-mega-foot a.hs-mega-garn:hover { background: #ffefb3; }
  .hs-mega-foot a { font-weight: 700; font-size: 14px; color: var(--hsd-deep, #136fb0) !important; }

  /* Podľa systému */
  .hs-mega-h { display: block; margin-bottom: 14px; font-family: 'Exo 2', sans-serif; font-size: 18px; font-weight: 800; }
  .hs-sys-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
  .hs-mega a.hs-sys {
    display: flex !important; align-items: center; gap: 12px; padding: 14px 16px !important; border-radius: 12px;
    background: var(--hsd-tint, #f3f9fe) !important; line-height: 1.25;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
  }
  .hs-mega a.hs-sys:hover { background: #e4f3fd !important; box-shadow: 0 8px 18px rgba(13, 90, 143, .14); transform: translateY(-2px); }
  .hs-mega a.hs-sys:after { content: "→"; margin-left: auto; color: var(--hsd-deep, #136fb0); font-weight: 700; opacity: 0; transition: opacity .15s ease; }
  .hs-mega a.hs-sys:hover:after { opacity: 1; }
  .hs-sys-dot { flex: 0 0 12px; height: 12px; border-radius: 50%; }
  .hs-sys strong { display: block; font-family: 'Exo 2', sans-serif; font-size: 15px; }
  .hs-sys strong + span { display: block; font-size: 13px; color: var(--hsd-text, #4d4d4d); }
}

/* na mobile naše položky nezobrazujeme – Shoptet má vlastný strom kategórií */
@media (max-width: 767px) {
  .navigation-in > ul > li.hs-mm { display: none !important; }
}

/* =========================================================
   Úvod – „Čo chcete mať doma smart?“ (9 dlaždíc)
   ========================================================= */
.hs-kat9 { margin: 40px 0 8px; font-family: 'Source Sans 3', Arial, sans-serif; }
.hs-kat9-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.hs-kat9-e { font-family: 'Exo 2', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .08em; color: var(--hsd-deep, #136fb0); }
.hs-kat9-h h2 {
  margin: 4px 0 0; font-family: 'Exo 2', sans-serif; font-weight: 800; font-size: 30px; line-height: 1.15; color: var(--hsd-ink, #1f1f1f);
}
.hs-kat9-h h2:after { content: ""; display: block; width: 38px; height: 4px; margin-top: 10px; border-radius: 2px; background: var(--hsd-yellow, #ffc807); }
.hs-kat9-all { flex: 0 0 auto; font-weight: 700; color: var(--hsd-deep, #136fb0); text-decoration: none; }
.hs-kat9-all:hover { text-decoration: underline; }
.hs-kat9-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.hs-kat9-t {
  display: flex; align-items: center; gap: 16px; min-height: 104px; padding: 16px 20px; box-sizing: border-box;
  border-radius: 18px; color: var(--hsd-ink, #1f1f1f) !important; text-decoration: none !important;
  transition: transform .15s ease, box-shadow .15s ease;
}
.hs-kat9-t:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(13, 90, 143, .14); }
.hs-kat9-blob {
  flex: 0 0 60px; height: 56px; display: flex; align-items: center; justify-content: center; font-size: 25px;
  border-radius: 58% 42% 55% 45% / 48% 60% 40% 52%;
}
.hs-kat9-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hs-kat9-txt strong { font-family: 'Exo 2', sans-serif; font-weight: 800; font-size: 19px; line-height: 1.2; }
.hs-kat9-txt span { font-size: 14px; color: var(--hsd-text, #4d4d4d); }
.hs-kat9-arr { margin-left: auto; font-size: 20px; color: var(--hsd-deep, #136fb0); }
@media (max-width: 991px) { .hs-kat9-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .hs-kat9 { margin-top: 28px; }
  .hs-kat9-h h2 { font-size: 22px; }
  .hs-kat9-all { font-size: 14px; }
  .hs-kat9-grid { gap: 8px; }
  .hs-kat9-t { flex-direction: column; align-items: flex-start; gap: 6px; min-height: 0; padding: 12px; border-radius: 14px; }
  .hs-kat9-blob { flex: 0 0 auto; width: 36px; height: 34px; font-size: 17px; }
  .hs-kat9-txt strong { font-size: 15px; }
  .hs-kat9-txt span, .hs-kat9-arr { display: none; }
}

/* =========================================================
   v4 – BLACK FRIDAY, Blog panel, podmenu s ikonami (len počítač)
   ========================================================= */
@keyframes hsBfPulz { 0% { box-shadow: 0 0 0 0 rgba(255, 200, 7, .8); } 70% { box-shadow: 0 0 0 6px rgba(255, 200, 7, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 200, 7, 0); } }
@media (min-width: 768px) {
  html .navigation-in > ul > li.hs-bf > a { position: relative; overflow: visible !important; }
  html .navigation-in > ul > li.hs-bf > a { padding-left: 20px !important; gap: 10px; }
  .hs-bf-bodka { flex: 0 0 10px; margin-left: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--hsd-yellow, #ffc807); animation: hsBfPulz 1.8s ease-out infinite; }
  html .navigation-in > ul > li.hs-bf > a .hs-bf-stitok {
    position: absolute !important; top: -10px !important; right: -10px !important; left: auto !important; margin: 0 !important;
    display: block !important; width: auto !important; height: auto !important; min-height: 0 !important; padding: 1px 6px !important;
    border-radius: 5px !important; background: var(--hsd-yellow, #ffc807) !important; color: #1f1f1f !important;
    font: 800 10px/16px 'Exo 2', sans-serif !important; box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
    transform: rotate(4deg) !important; white-space: nowrap; pointer-events: none;
  }

  /* Blog */
  html .navigation-in > ul > li.hs-mmb { position: static; }
  html .navigation-in > ul > li.hs-mmb > .menu-level-2 { display: none !important; }
  .hs-mmb:hover > .hs-mega, .hs-mmb.hs-open > .hs-mega { visibility: visible; opacity: 1; transition-delay: 0s, 0s; }
  .hs-mega.hs-mega-blog { display: grid !important; grid-template-columns: 240px 210px 210px minmax(0, 1fr); gap: 20px; padding: 22px !important; }
  .hs-blog-intro { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 14px; background: #1e5f9a; color: #fff; }
  .hs-blog-e { font: 700 12px 'Exo 2', sans-serif; letter-spacing: .08em; color: #cfe8fb; }
  .hs-blog-intro strong { font: 800 22px/1.15 'Exo 2', sans-serif; color: #fff; }
  .hs-blog-intro > span:not(.hs-blog-e) { font-size: 14px; line-height: 1.45; color: #e3f1fc; }
  .hs-mega .hs-blog-intro a { margin-top: auto; align-self: flex-start; padding: 10px 16px !important; border-radius: 9px; background: #fff !important; color: var(--hsd-deep, #136fb0) !important; font: 700 14px 'Exo 2', sans-serif; }
  .hs-mega a.hs-blog-velky { display: flex !important; flex-direction: column; gap: 10px; }
  .hs-blog-obr { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: var(--hsd-tint, #f3f9fe); }
  .hs-blog-img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .hs-blog-nove { position: absolute; left: 10px; top: 10px; padding: 3px 8px; border-radius: 6px; background: var(--hsd-yellow, #ffc807); color: #1f1f1f; font: 800 11px 'Exo 2', sans-serif; }
  .hs-blog-velky strong { font: 700 16px/1.3 'Exo 2', sans-serif; }
  .hs-blog-velky:hover strong, .hs-blog-zoznam a:hover strong { color: var(--hsd-deep, #136fb0); }
  .hs-blog-zoznam { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 6px 12px; min-width: 0; }
  .hs-blog-d { grid-column: 1 / -1; margin-bottom: 4px; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--hsd-deep, #136fb0); }
  .hs-mega .hs-blog-zoznam a { display: flex !important; align-items: center; gap: 10px; padding: 6px !important; border-radius: 10px; }
  .hs-mega .hs-blog-zoznam a:hover { background: var(--hsd-tint, #f3f9fe) !important; }
  .hs-blog-mini { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 8px; object-fit: cover; background: var(--hsd-tint, #f3f9fe); }
  .hs-blog-zoznam strong { font: 700 14px/1.25 'Exo 2', sans-serif; }

  /* podmenu Senzory / Osvetlenie / Kúrenie */
  html .navigation-in .menu-level-2.hs-sub-grid {
    flex-wrap: wrap; gap: 10px; padding: 20px !important; background: #fff !important;
    border: 1px solid var(--hsd-line, #e3eef7); border-radius: 0 0 16px 16px; box-shadow: 0 18px 40px rgba(13, 90, 143, .12);
  }
  html .navigation-in .hs-sub-grid > li.hs-sub {
    flex: 0 0 calc(25% - 8px); width: calc(25% - 8px) !important; max-width: none !important; box-sizing: border-box;
    display: flex !important; align-items: center; gap: 12px; margin: 0 !important; padding: 12px !important;
    border: 0 !important; border-radius: 12px; background: var(--hs-sub-bg, #f3f9fe) !important; transition: transform .15s ease, box-shadow .15s ease;
  }
  html .navigation-in .hs-sub-grid > li.hs-sub:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(13, 90, 143, .14); }
  html .navigation-in .hs-sub > .menu-image { flex: 0 0 44px; width: 44px !important; height: 42px !important; margin: 0 !important; padding: 0 !important; display: flex !important; background: none !important; }
  .hs-sub-ico { width: 44px; height: 42px; border-radius: 58% 42% 55% 45% / 48% 60% 40% 52%; display: flex; align-items: center; justify-content: center; font-size: 20px; }
  html .navigation-in .hs-sub > div { padding: 0 !important; margin: 0 !important; }
  html .navigation-in .hs-sub > div > a { padding: 0 !important; background: none !important; color: #1f1f1f !important; font: 700 15px/1.25 'Exo 2', sans-serif !important; }
}
@media (prefers-reduced-motion: reduce) { .hs-bf-bodka { animation: none; } }

/* =========================================================
   v6 – mobilné menu (hamburger) – .hs-mob z hs-menu.js v4
   ========================================================= */
.hs-mob { display: none; }
@media (max-width: 767px) {
  html.hs-mob-open, html.hs-mob-open body { overflow: hidden !important; }
  html.hs-mob-open .hs-mob { display: block; }
  html.hs-mob-open #heurekaTableft, html.hs-mob-open [id^="hw-"][id$="left"] { display: none !important; }
  .hs-mob { position: fixed; inset: 0; z-index: 10060; font-family: 'Source Sans 3', Arial, sans-serif; color: var(--hsd-ink, #1f1f1f); }
  .hs-mob-clona { position: absolute; inset: 0; background: rgba(31, 31, 31, .45); }
  .hs-mob-in {
    position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100%); overflow-y: auto; overscroll-behavior: contain;
    display: flex; flex-direction: column; background: #fff; box-shadow: -10px 0 30px rgba(0, 0, 0, .18);
    animation: hsMobIn .22s ease-out;
  }
  @keyframes hsMobIn { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
  .hs-mob a { text-decoration: none; color: inherit; }
  .hs-mob-hl {
    position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 12px 0 16px;
    background: #fff; border-bottom: 1px solid var(--hsd-line, #e3eef7);
  }
  .hs-mob-hl strong { flex: 1; min-width: 0; font: 800 19px/1.2 'Exo 2', sans-serif; }
  .hs-mob-x, .hs-mob-spat {
    flex: 0 0 38px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--hsd-tint, #f3f9fe);
    color: var(--hsd-ink, #1f1f1f); font-size: 17px; line-height: 1; cursor: pointer;
  }
  .hs-mob-spat { margin-left: -4px; font-size: 19px; }
  .hs-mob-telo { display: flex; flex-direction: column; gap: 14px; padding: 12px 16px 18px; }
  .hs-mob-hladat { display: flex; align-items: center; height: 46px; padding: 0 4px 0 14px; border: 2px solid var(--hsd-brand, #239ceb); border-radius: 12px; }
  .hs-mob-hladat input { flex: 1; min-width: 0; height: 100%; border: 0 !important; outline: 0; background: none; font: 400 16px 'Source Sans 3', Arial, sans-serif; padding: 0 !important; box-shadow: none !important; }
  .hs-mob-hladat button { flex: 0 0 38px; height: 36px; border: 0; border-radius: 9px; background: var(--hsd-yellow, #ffc807); color: #1f1f1f; display: flex; align-items: center; justify-content: center; }
  .hs-mob-tops { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .hs-mob-top { display: flex; align-items: center; gap: 9px; min-height: 52px; padding: 8px 10px; border-radius: 12px; }
  .hs-mob-top strong { min-width: 0; font: 700 13.5px/1.15 'Exo 2', sans-serif; overflow-wrap: normal; }
  .hs-mob-blob {
    flex: 0 0 32px; width: 32px; height: 30px; display: flex; align-items: center; justify-content: center; font-size: 15px;
    border-radius: 58% 42% 55% 45% / 48% 60% 40% 52%;
  }
  .hs-mob-e { display: block; margin-bottom: 8px; font: 700 12.5px 'Exo 2', sans-serif; letter-spacing: .06em; color: var(--hsd-deep, #136fb0); }
  .hs-mob-sys { display: flex; flex-wrap: wrap; gap: 6px; }
  .hs-mob-sys a { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border-radius: 999px; background: var(--hsd-tint, #f3f9fe); font-size: 14px; font-weight: 600; }
  .hs-mob-sys a span { width: 8px; height: 8px; border-radius: 50%; }
  .hs-mob-akcie { display: flex; gap: 6px; }
  .hs-mob-akcie a {
    flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px; height: 42px; padding: 0 6px;
    border-radius: 10px; font: 700 13.5px/1 'Exo 2', sans-serif; white-space: nowrap;
  }
  .hs-mob .hs-mob-bf { background: #1f1f1f; color: #fff; }
  .hs-mob .hs-mob-dop { background: #cc0000; color: #fff; }
  .hs-mob .hs-mob-nov { background: #f2fbdc; }
  .hs-mob-bf .hs-bf-bodka { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--hsd-yellow, #ffc807); animation: hsBfPulz 1.8s ease-out infinite; }
  .hs-mob-odkazy { display: flex; flex-direction: column; }
  .hs-mob-odkazy a { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--hsd-line, #e3eef7); font-size: 16px; }
  .hs-mob-odkazy a:after { content: "›"; color: var(--hsd-deep, #136fb0); font-weight: 700; }
  .hs-mob-odkazy a:last-child { border-bottom: 0; }
  .hs-mob-pata { margin-top: auto; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--hsd-line, #e3eef7); }
  .hs-mob-prihl { display: flex; align-items: center; justify-content: center; height: 44px; border-radius: 12px; border: 1px solid #c9dcec; font: 700 15px 'Exo 2', sans-serif; color: var(--hsd-deep, #136fb0) !important; }
  .hs-mob-vsetko {
    display: flex; align-items: center; justify-content: space-between; padding: 14px; border-radius: 12px;
    background: var(--hsd-deep, #136fb0); color: #fff !important; font: 700 15px 'Exo 2', sans-serif;
  }
  .hs-mob-subs { display: flex; flex-direction: column; gap: 7px; }
  .hs-mob-sub { display: flex; align-items: center; gap: 11px; min-height: 52px; padding: 8px 12px 8px 10px; border-radius: 12px; }
  .hs-mob-sub strong { flex: 1; min-width: 0; font: 700 15px/1.2 'Exo 2', sans-serif; }
  .hs-mob-sip { color: var(--hsd-deep, #136fb0); font-size: 20px; font-weight: 700; }
  /* staré Shoptet menu na mobile už nepoužívame – skryť naše PC panely, ak by sa otvorilo */
  #navigation .hs-mega, #navigation .hs-mm { display: none !important; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .hs-mob-in { animation: none; }
  .hs-mob-bf .hs-bf-bodka { animation: none; }
}

/* v8 – bez skoku pri načítaní: lišta je neviditeľná, kým ju hs-menu.js nepreusporiada (poistka 2 s) */
@keyframes hsMenuUkaz { to { visibility: visible; } }
@media (min-width: 768px) {
  html:not(.hs-menu-hotovo) #navigation .navigation-in > ul.menu-level-1 { visibility: hidden; animation: hsMenuUkaz 0s 2s forwards; }
}