/* ============================================================
   ALZA-STYLE VERTIKÁLNÍ MENU — tabule-nabytek.cz / TANA school
   Shoptet šablona Classic 11
   ------------------------------------------------------------
   - Aktivní pouze pro >= 992 px (desktop)
   - Pod 992 px zůstává původní mobilní hamburger
   - Bez úprav HTML
   - Potřebuje doprovodný vertical-menu.js (řeší kolaps menu)
   ============================================================ */

@media (min-width: 992px) {

  :root {
    --vert-menu-width: 260px;
    --vert-menu-bg: #39554c;
    --vert-menu-bg-hover: #ff9933;
    --vert-flyout-width: 1000px;
    /* Max šířka centrovaného webu (sidebar + content) */
    --site-max-width: 1500px;
    /* Offset od levého okraje viewportu k levému okraji kontejneru */
    --site-offset-left: max(0px, calc((100vw - var(--site-max-width)) / 2));
    /* Výška headeru — fallback; JS ji přepočítá přesně (admin bar / live) */
    --header-height: 145px;
  }

  /* ============================================================
     0) BODY POZADÍ — viditelný "rám" mimo centrovaný kontejner
     ============================================================ */
  body {
    background: rgba(247, 247, 247, 1) !important;
  }

  /* ============================================================
     1) CENTROVÁNÍ — margenová metoda (robustní, bez breakout)
     - overall-wrapper se posune doprava o (offset + šířka sidebaru)
       a vlevo i vpravo nechá šedý okraj (offset)
     - výsledek: ŠEDÁ | zelený sidebar | BÍLÝ obsah | ŠEDÁ
     - obsah teče přirozeně jako dřív, jen je užší → nic neprorazí
     ============================================================ */
  .overall-wrapper {
    margin-left: calc(var(--site-offset-left) + var(--vert-menu-width)) !important;
    margin-right: var(--site-offset-left) !important;
    background: #fff !important;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.05) !important;
    position: relative !important;
    box-sizing: border-box !important;
  }

  /* ZELENÝ rail v levém sloupci — protáhne zelené pozadí menu na celou
     výšku obsahu (.overall-wrapper) až k footeru. z-index: -1 = je ZA
     textem menu (bílý text zůstane čitelný). Scrolluje s obsahem. */
  .overall-wrapper::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: calc(-1 * var(--vert-menu-width)) !important;
    width: var(--vert-menu-width) !important;
    background: var(--vert-menu-bg) !important;
    z-index: -1 !important;
    pointer-events: none !important;
  }

  /* ⚠️ KLÍČOVÉ: .overall-wrapper je flex column (nastaveno vlastním CSS
     webu kvůli order: přeskládání). Flex položky mají min-width: auto,
     takže se NEZÚŽÍ pod šířku obsahu → široké sekce (carousel s logy,
     dlaždice kategorií, header) přetékají ven z kontejneru.
     Donutíme je shrinknout na šířku kontejneru. */
  .overall-wrapper > * {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ⚠️ HLAVNÍ FIX přetékání košíku/loginu/headeru:
     Shoptet .container má FIXNÍ width v px podle viewportu
     (≥1200px → 1178px, ≥1440px → 1418px). To je širší než naše
     zúžená content area (1240px) → košík a login přetečou do šedé.
     Přepíšeme na 100 %, ať se vejdou do kontejneru. */
  .overall-wrapper .container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Carousel (banner i loga značek) — držet uvnitř kontejneru.
     owl počítá šířku stage z container width; po fixu .container
     už měří správně. Pojistka proti přetečení: */
  .overall-wrapper .wide-carousel,
  .overall-wrapper .owl-carousel,
  .overall-wrapper .owl-stage-outer,
  .overall-wrapper .carousel,
  .overall-wrapper .carousel-inner {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* ============================================================
     1c) HEADER PŘES CELOU ŠÍŘKU (i nad sidebarem)
     - Header se "vylomí" z levého margenu wrapperu o šířku sidebaru,
       takže pokryje i levých 260px (kde je menu).
     - Menu pak začíná až POD headerem (řeší JS: sidebar top).
     - max-width: none přebíjí obecné pravidlo .overall-wrapper > *
     ============================================================ */
  .overall-wrapper > .user-action,
  .overall-wrapper > .admin-bar,
  .overall-wrapper > .top-navigation-bar,
  .overall-wrapper > #header {
    margin-left: calc(-1 * var(--vert-menu-width)) !important;
    width: calc(100% + var(--vert-menu-width)) !important;
    max-width: none !important;
    position: relative !important;
  }
  /* #header = kotva (containing block) pro absolute menu.
     Menu je jeho potomek → pozicuje se vůči #header, který má díky
     breakout margenu levý okraj přesně na okraji kontejneru.
     #header (relative, v toku) normálně odscrolluje a menu s ním. */
  .overall-wrapper > #header {
    position: relative !important;
    background-color: #fff !important;
  }

  /* Cookies banner: zarovnat s obsahem (napravo od sidebaru) */
  .siteCookies {
    left: calc(var(--site-offset-left) + var(--vert-menu-width)) !important;
    width: calc(min(100vw, var(--site-max-width)) - var(--vert-menu-width)) !important;
  }

  /* ============================================================
     2) NAVIGATION = FIXNÍ LEVÝ PANEL UVNITŘ KONTEJNERU
     - left je calc() podle viewport width vs max-width
     - pro úzké monitory zůstává u viewport-left (offset = 0)
     - pro široké monitory se přilepí k levému okraji kontejneru
     ============================================================ */
  #navigation {
    /* ABSOLUTE vůči #header (kotva). top: 100% = hned pod headerem,
       left: 0 = levý okraj #header = okraj kontejneru (breakout).
       #header je v toku → scrolluje pryč a menu s ním. */
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: var(--vert-menu-width) !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important; /* aby flyout nezmizel */
    background: var(--vert-menu-bg) !important;
    z-index: 9999 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    box-sizing: border-box !important;
  }

  #navigation .navigation-in,
  #navigation .navigation-in.menu {
    /* Shoptet má .navigation-in { position:absolute } → #navigation by
       zkolaboval na 0 výšku a zelené pozadí by zmizelo. Vrátíme do toku
       a zelené pozadí dáme rovnou sem (na viditelný box). */
    position: static !important;
    background: var(--vert-menu-bg) !important;
    height: auto !important;
    width: 100% !important;
    overflow: visible !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* ============================================================
     3) HLAVNÍ ÚROVEŇ VERTIKÁLNĚ
     ============================================================ */
  #navigation ul.menu-level-1 {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }

  #navigation ul.menu-level-1 > li {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    float: none !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    /* static = flyout (absolute) se počítá od #navigation, ne od položky */
    position: static !important;
    background: transparent !important;
  }

  /* Odkaz hlavní úrovně */
  #navigation ul.menu-level-1 > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 12px 16px !important;
    color: #fff !important;
    background: transparent !important;
    text-decoration: none !important;
    margin: 0 !important;
    height: auto !important;
    min-height: 44px !important;
    line-height: 1.3 !important;
    border: 0 !important;
    box-sizing: border-box !important;
  }

  #navigation ul.menu-level-1 > li > a b {
    color: #fff !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    margin: 0 !important;
  }

  #navigation ul.menu-level-1 > li:hover > a,
  #navigation ul.menu-level-1 > li:focus-within > a,
  #navigation ul.menu-level-1 > li.is-open > a {
    /* background-color (ne shorthand!) → nesmaže background-image (ikonu) */
    background-color: var(--vert-menu-bg-hover) !important;
  }

  /* Šipka — ukazuje doprava (chevron right)
     Shoptet má v ::after ikonu z fontu "shoptet" (content: "\e90e"
     rotovaná 180°). Zabijeme Shoptet pseudo a kreslíme čistě sami. */
  #navigation .submenu-arrow {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    width: 12px !important;
    height: 12px !important;
    padding: 0 !important;
    margin: 0 0 0 8px !important;
    background: transparent !important;
    border: 0 !important;
    transform: none !important;
    /* zabít text content z icon fontu */
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    overflow: hidden !important;
    flex: 0 0 auto !important;
  }

  /* Vypnout Shoptetovo ::before i ::after (icon font glyph) */
  #navigation .submenu-arrow::before {
    content: none !important;
    display: none !important;
  }

  /* Vlastní šipka přes ::after (chevron right) */
  #navigation .submenu-arrow::after {
    content: "" !important;
    display: block !important;
    width: 6px !important;
    height: 6px !important;
    border: solid #fff !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(-45deg) translate(-1px, 0) !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: inherit !important;
    font-size: 0 !important;
    color: transparent !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    transition: transform 0.15s ease !important;
  }

  /* Hover: šipka mění barvu (sledovat barvu textu menu položky) */
  #navigation ul.menu-level-1 > li:hover .submenu-arrow::after,
  #navigation ul.menu-level-1 > li.is-open .submenu-arrow::after {
    border-color: #fff !important;
  }

  /* ============================================================
     4) SUB-MENU = FIXNÍ PANEL NAPRAVO OD SIDEBARU
     ============================================================ */
  #navigation ul.menu-level-1 > li > ul.menu-level-2 {
    /* ABSOLUTE vůči #navigation (menu) → scrolluje s menu.
       left: 100% = hned napravo od menu. top: 0 = od vršku menu. */
    position: absolute !important;
    top: 0 !important;
    left: 100% !important;
    width: var(--vert-flyout-width) !important;
    max-width: calc(100vw - var(--site-offset-left) - var(--vert-menu-width)) !important;
    height: 100vh !important;
    background: #fff !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15) !important;
    padding: 32px 36px !important;
    margin: 0 !important;
    overflow-y: auto !important;
    z-index: 10000 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    list-style: none !important;

    /* layout: 3-sloupcový GRID s row-alignmentem
       (všechny buňky v řádku jsou zarovnané nahoru, řádek je tak
       vysoký jako jeho nejvyšší buňka — chování jako Alza) */
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    column-gap: 28px !important;
    row-gap: 18px !important;
    align-items: start !important;
    align-content: start !important;
    justify-items: stretch !important;

    /* schované defaultně */
    visibility: hidden !important;
    opacity: 0 !important;
    transform: translateX(-10px) !important;
    transition:
      opacity 0.15s ease,
      transform 0.15s ease,
      visibility 0s linear 0.15s !important;
    pointer-events: none !important;
  }

  /* Nadpis panelu = jméno kategorie (z aria-label).
     grid-column: 1 / -1 = nadpis se rozprostře přes všechny 3 sloupce. */
  #navigation ul.menu-level-1 > li > ul.menu-level-2::before {
    content: attr(aria-label) !important;
    grid-column: 1 / -1 !important;
    display: block !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--vert-menu-bg) !important;
    padding-bottom: 14px !important;
    margin-bottom: 8px !important;
    border-bottom: 2px solid var(--vert-menu-bg-hover) !important;
    line-height: 1.2 !important;
  }

  /* Zobrazení na hover / focus / .is-open */
  #navigation ul.menu-level-1 > li:hover > ul.menu-level-2,
  #navigation ul.menu-level-1 > li:focus-within > ul.menu-level-2,
  #navigation ul.menu-level-1 > li.is-open > ul.menu-level-2 {
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateX(0) !important;
    transition:
      opacity 0.15s ease,
      transform 0.15s ease,
      visibility 0s !important;
    pointer-events: auto !important;
  }

  /* ============================================================
     5) POLOŽKY V SUBMENU — Alza karta s ikonkou vlevo + texty
     ============================================================ */
  #navigation ul.menu-level-2 > li {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    align-self: start !important; /* force top-align v grid řádku */
    gap: 12px !important;
    width: auto !important;
    height: auto !important;
    padding: 6px 8px !important;
    margin: 0 !important; /* mezery řeší row-gap na gridu */
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    list-style: none !important;
    transition: background 0.12s !important;
    box-sizing: border-box !important;
  }

  #navigation ul.menu-level-2 > li:hover {
    background: #f5f5f5 !important;
  }

  /* Ikonka kategorie (vlevo) — 60×60, bez pozadí */
  #navigation ul.menu-level-2 > li > a.menu-image {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 60px !important;
    width: 60px !important;
    height: 60px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
  }

  #navigation ul.menu-level-2 > li:hover > a.menu-image {
    background: transparent !important;
  }

  #navigation ul.menu-level-2 > li > a.menu-image img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
  }

  /* Pravý sloupec (název + 3. úroveň) — posunut 17 px dolů,
     aby titul opticky seděl ve středu výšky ikony */
  #navigation ul.menu-level-2 > li > div {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 17px 0 0 0 !important;
    margin: 0 !important;
  }

  /* Schovat extended-description / náhodný obsah */
  #navigation ul.menu-level-2 > li > div > *:not(a):not(ul) {
    display: none !important;
  }

  /* Hlavní nadpis kategorie (2. úroveň) */
  #navigation ul.menu-level-2 > li > div > a,
  #navigation ul.menu-level-2 > li > a:not(.menu-image) {
    display: block !important;
    color: var(--vert-menu-bg) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    padding: 2px 0 !important;
    margin: 0 !important;
    white-space: normal !important;
  }

  #navigation ul.menu-level-2 > li > div > a span,
  #navigation ul.menu-level-2 > li > a > span {
    color: inherit !important;
    background: transparent !important;
  }

  #navigation ul.menu-level-2 > li:hover > div > a,
  #navigation ul.menu-level-2 > li:hover > a:not(.menu-image),
  #navigation ul.menu-level-2 > li:hover > div > a span {
    color: var(--vert-menu-bg-hover) !important;
  }

  /* ============================================================
     6) TŘETÍ ÚROVEŇ (podkategorie podkategorií)
     ============================================================ */
  #navigation ul.menu-level-3 {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    background: transparent !important;
    /* font-size: 0 zabije textové uzly mimo <a> (Shoptet tam dává čárky!) */
    font-size: 0 !important;
    line-height: 0 !important;
  }

  #navigation ul.menu-level-3 > li {
    display: block !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    /* font-size: 0 dědí, čárka uvnitř <li> se taky nezobrazí */
    font-size: 0 !important;
    line-height: 0 !important;
  }

  #navigation ul.menu-level-3 > li > a {
    display: block !important;
    color: #888 !important;
    /* obnovíme čitelnou velikost jen na linku */
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    padding: 1px 0 !important;
    text-decoration: none !important;
    white-space: normal !important;
  }

  #navigation ul.menu-level-3 > li > a:hover {
    color: var(--vert-menu-bg-hover) !important;
  }

  /* --- FIX "..." trigger v 3. úrovni ---
     Shoptet JS dynamicky přidává .has-more-items + .more-items-trigger
     se ::before content "\2026" když 3. úroveň "přetéká" horizontálně.
     Náš vertikální layout to ale nepotřebuje — všechno se vejde.
  */
  #navigation .more-items-trigger,
  #navigation .has-more-items > .more-items-trigger,
  #navigation .has-more-items::before,
  #navigation .has-more-items::after {
    display: none !important;
    content: none !important;
    visibility: hidden !important;
  }

  /* Zrušit overflow/max-height, kterou JS nasadí na has-more-items */
  #navigation .has-more-items {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
    position: static !important;
  }

  /* Force-show všechny li v menu-level-3 (i kdyby JS dal inline display:none) */
  #navigation ul.menu-level-3 > li,
  #navigation ul.menu-level-3 > li[style*="display: none"],
  #navigation ul.menu-level-3 > li[style*="display:none"],
  #navigation ul.menu-level-3 > li[hidden],
  #navigation ul.menu-level-3 > li[aria-hidden="true"] {
    display: block !important;
    visibility: visible !important;
  }

  /* ============================================================
     6b) FIX LAZY-LOAD OBRÁZKŮ (placeholder fotoaparátu)
     - Šablona injectuje data:image/svg+xml jako src a real URL do data-src.
     - Když JS lazyloader neuvidí element, zůstává placeholder.
     - Nepotřebujeme obrázky v dropdownu, ale schováme prázdné kostry,
       aby nikde nezbyl šedý čtverec.
     ============================================================ */
  #navigation img[src^="data:image/svg+xml"] {
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
  }

  /* ============================================================
     7) NEUTRALIZACE PŮVODNÍHO MOBILNÍHO HAMBURGERU
     ============================================================ */
  /* Vizuálně skryjeme hamburger, ale wrappery necháme v DOM,
     aby Shoptet JS neházel položky do prázdna */
  .menu-helper > span,
  .menu-helper::after,
  .xxxmenu-helper > span,
  .xxxmenu-helper::after {
    display: none !important;
  }
  .menu-helper,
  .xxxmenu-helper {
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  /* Defenzivní: pokud Shoptet přidá inline display:none na položku, přebijeme to */
  #navigation ul.menu-level-1 > li[style*="display: none"],
  #navigation ul.menu-level-1 > li[style*="display:none"] {
    display: block !important;
  }
  #navigation ul.menu-level-1 > li[style*="visibility: hidden"],
  #navigation ul.menu-level-1 > li[style*="visibility:hidden"] {
    visibility: visible !important;
  }

  /* ============================================================
     8) HEADER — vypnout repeat-x pozadí spodní lišty + plné bílé pozadí
     (kvůli "díře" mezi headerem a menu — celý box #header bílý
      včetně spodního paddingu, ať tam neprosvítá šedá body bg) */
  #header {
    background-image: none !important;
    background-color: #fff !important;
  }
  /* Sticky top-navigation-bar musí být neprůhledná, ať přes ni
     při scrollu neprosvítá obsah. (user-action = tmavý admin bar
     necháváme být — na ostrém webu stejně není.) */
  .overall-wrapper > .top-navigation-bar {
    background-color: #fff !important;
  }

  /* ============================================================
     9) FOOTER — na celou šířku kontejneru (menu + obsah)
     - #footer je MIMO .overall-wrapper → margeny se ho netýkaly.
       Footer je oddělený dole, tak ho roztáhneme přes CELOU šířku
       centrovaného webu (od levého okraje menu po pravý okraj obsahu),
       jen šedé okraje (offset) zůstanou vlevo i vpravo.
     ============================================================ */
  /* HOMEPAGE: #footer je na úrovni body (mimo overall-wrapper) →
     centrujeme přes margeny (offset z obou stran = celá šířka kontejneru) */
  #footer {
    margin-left: var(--site-offset-left) !important;
    margin-right: var(--site-offset-left) !important;
    box-sizing: border-box !important;
  }

  /* PODSTRÁNKY (kategorie/produkt): #footer je UVNITŘ overall-wrapper
     (přímý potomek). overall-wrapper má margin-left offset+260, takže
     footer "vylomíme" doleva o šířku menu, aby šel taky přes celou šířku
     kontejneru (jako header). max-width: none přebíjí .overall-wrapper > *. */
  .overall-wrapper > #footer {
    margin-left: calc(-1 * var(--vert-menu-width)) !important;
    margin-right: 0 !important;
    width: calc(100% + var(--vert-menu-width)) !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  /* Zrušit mezeru mezi obsahem a footerem JEN na homepage (footer je
     tam na úrovni body, Shoptet mu dává margin-top: 50px → šedý pruh).
     Na podstránkách (footer uvnitř overall-wrapper) je to OK, nešaháme. */
  body.type-index #footer {
    margin-top: 0 !important;
  }
  body.type-index .overall-wrapper {
    margin-bottom: 0 !important;
  }

  /* .container uvnitř footeru má taky fixní px width → na 100 % */
  #footer .container,
  #footer > .container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
  }

  /* ============================================================
     10) FOOTER — světlý vzhled (oddělený od stránky)
     ============================================================ */
  #footer,
  #footer > .container,
  #footer .custom-footer,
  #footer .footer-bottom {
    background: #fff !important;
    border-top: 1px solid #e0e0e0 !important;
  }

  #footer > .container,
  #footer .custom-footer,
  #footer .footer-bottom {
    border-top: 0 !important; /* jen #footer má top border (separator) */
  }

  /* Nadpisy — tmavé a tučnější */
  #footer h4,
  #footer .footer-heading,
  #footer h3 {
    color: #1a1a1a !important;
    font-weight: 700 !important;
  }

  /* Všechny texty v patičce — tmavě šedá */
  #footer,
  #footer p,
  #footer span,
  #footer li,
  #footer .contact-box,
  #footer .copyright,
  #footer .footer-bottom,
  #footer [data-testid="textCopyright"] {
    color: #333 !important;
  }

  /* Odkazy v patičce — tmavé, hover oranžový (brand) */
  #footer a,
  #footer .contact-box a,
  #footer .password-helper a,
  #footer .news-item-widget a,
  #footer ul a {
    color: #333 !important;
  }

  #footer a:hover,
  #footer .contact-box a:hover,
  #footer .password-helper a:hover,
  #footer .news-item-widget a:hover,
  #footer ul a:hover {
    color: #ff9933 !important;
  }

  /* Ikonky v kontaktu (obálka, telefon) — taky tmavé */
  #footer .contact-box ul li > span::before,
  .contact-box ul li > span::before {
    color: #333 !important;
  }
  #footer .contact-box ul li:hover > span::before {
    color: #ff9933 !important;
  }

  /* ============================================================
     11) DROBNÉ DOLAĎOVÁNÍ HEADERU
     ============================================================ */
  .header-top {
    padding-top: 20px !important;
    padding-right: 15px !important;
  }

  .top-navigation-bar {
    border: none !important;
  }

  /* Povytáhnout banner nahoru (zavře mezeru pod headerem) — jen homepage */
  .homepage-box.before-carousel {
    margin-top: -21px !important;
  }

  /* ============================================================
     11b) DEFAULT HLEDÁČEK V HEADERU — vzhled jako ve sticky pruhu
     (bílý input s tenkým rámečkem, oranžové tlačítko "Hledat" vpravo)
     ============================================================ */
  #header .header-top .search-form .search-input,
  #header .header-top .search-form .form-control {
    height: 44px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    padding: 0 100px 0 16px !important;
    font-size: 15px !important;
    box-shadow: none !important;
    background: #fff !important;
  }
  #header .header-top .search-form .btn {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 44px !important;
    background: #ff9933 !important;
    border: 0 !important;
    border-radius: 0 4px 4px 0 !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    text-transform: none !important;
    padding: 0 22px !important;
    display: flex !important;
    align-items: center !important;
  }
  #header .header-top .search-form .btn:hover {
    background: #f57c00 !important;
  }
  /* skrýt případnou icon-font lupu v tlačítku (sticky verze ji nemá) */
  #header .header-top .search-form .btn::before {
    display: none !important;
  }

  /* ============================================================
     12) IKONY KATEGORIÍ — přes CSS mask (barvu řídí background-color)
     - oranžové normálně, BÍLÉ při hoveru (jinak by oranžová na oranžovém
       hoveru zmizela). Tvar = mask-image (stroke SVG, barva nehraje roli).
     - cílíme přes POZICI (nth-child 1-12), testovací 13-15 bez ikon.
     - pozn.: na produkci může být jiné pořadí → tam přemapovat.
     ============================================================ */
  /* ============================================================
     12) IKONY MENU — klíčované PODLE ODKAZU kategorie (ne pozice!)
     ------------------------------------------------------------
     Ikona = ::before oranžový box maskovaný SVGčkem (barva boxu =
     viditelná barva ikony, tvar dělá maska). Klíč = href kategorie →
     ikona drží kategorii bez ohledu na pořadí v menu (klient může
     přeskládat libovolně). Nezmapovaná/nová kategorie → neutrální
     "folder" (graceful). Barvu všech ikon změníš na jednom místě
     (background-color níže); tvar per-kategorie = mask-image.
     ============================================================ */
  #navigation ul.menu-level-1 > li > a {
    padding-left: 50px !important;
    position: relative !important;
  }
  #navigation ul.menu-level-1 > li > a::before {
    content: "" !important;
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 22px !important;
    height: 22px !important;
    background-color: #ff9933 !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-8l-2-2H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2z"/></svg>') !important;
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-8l-2-2H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2z"/></svg>') !important;
  }
  #navigation ul.menu-level-1 > li:hover > a::before,
  #navigation ul.menu-level-1 > li:focus-within > a::before,
  #navigation ul.menu-level-1 > li.is-open > a::before {
    background-color: #fff !important;
  }
  /* Školní tabule */
  #navigation ul.menu-level-1 > li > a[href="/skolni-tabule/"]::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="11" rx="1"/><path d="M9 15v5M15 15v5M8 9h6"/></svg>') !important;
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="11" rx="1"/><path d="M9 15v5M15 15v5M8 9h6"/></svg>') !important;
  }
  /* Interaktivní tabule */
  #navigation ul.menu-level-1 > li > a[href="/interaktivni-tabule/"]::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="13" rx="2"/><path d="M8 20h8M12 16v4"/><path d="m9 9 2 2 4-4"/></svg>') !important;
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="13" rx="2"/><path d="M8 20h8M12 16v4"/><path d="m9 9 2 2 4-4"/></svg>') !important;
  }
  /* Interaktivní displeje */
  #navigation ul.menu-level-1 > li > a[href="/dotykove-interaktivni-displaye/"]::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="12" rx="2"/><path d="M8 20h8M12 16v4"/><circle cx="12" cy="10" r="1.6"/></svg>') !important;
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="12" rx="2"/><path d="M8 20h8M12 16v4"/><circle cx="12" cy="10" r="1.6"/></svg>') !important;
  }
  /* Školní nábytek */
  #navigation ul.menu-level-1 > li > a[href="/skolni-nabytek/"]::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 11a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2"/><path d="M5 11V8a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v3"/><path d="M6 19v2M18 19v2"/></svg>') !important;
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 11a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2"/><path d="M5 11V8a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v3"/><path d="M6 19v2M18 19v2"/></svg>') !important;
  }
  /* Rýsovací potřeby */
  #navigation ul.menu-level-1 > li > a[href="/rysovaci-pomucky/"]::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 4v15h15z"/><path d="M9 19v-3M13 19v-5"/></svg>') !important;
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 4v15h15z"/><path d="M9 19v-3M13 19v-5"/></svg>') !important;
  }
  /* Příslušenství k tabulím */
  #navigation ul.menu-level-1 > li > a[href="/prislusenstvi/"]::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4l10-10a2 2 0 0 0-4-4L4 16v4z"/><path d="m14 6 4 4"/></svg>') !important;
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4l10-10a2 2 0 0 0-4-4L4 16v4z"/><path d="m14 6 4 4"/></svg>') !important;
  }
  /* Elektronika a projekce */
  #navigation ul.menu-level-1 > li > a[href="/projekcni-technika/"]::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="16" height="10" rx="2"/><circle cx="9" cy="12" r="2.5"/><path d="M18 10l4-1.5M18 14l4 1.5"/></svg>') !important;
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="16" height="10" rx="2"/><circle cx="9" cy="12" r="2.5"/><path d="M18 10l4-1.5M18 14l4 1.5"/></svg>') !important;
  }
  /* Nástěnky a paravány */
  #navigation ul.menu-level-1 > li > a[href="/nastenky-paravany/"]::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 17v5"/><path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"/></svg>') !important;
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 17v5"/><path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"/></svg>') !important;
  }
  /* Výstavní mříže */
  #navigation ul.menu-level-1 > li > a[href="/vystavni-mrize/"]::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="1"/><path d="M9 3v18M15 3v18M3 9h18M3 15h18"/></svg>') !important;
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="1"/><path d="M9 3v18M15 3v18M3 9h18M3 15h18"/></svg>') !important;
  }
  /* Vitríny */
  #navigation ul.menu-level-1 > li > a[href="/vitriny/"]::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="1"/><path d="M5 8h14M12 2v20"/></svg>') !important;
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="1"/><path d="M5 8h14M12 2v20"/></svg>') !important;
  }
  /* Flipcharty */
  #navigation ul.menu-level-1 > li > a[href="/flipcharty/"]::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 2h6M12 2v3"/><rect x="4" y="5" width="16" height="11" rx="1"/><path d="M8 16l-2 6M16 16l2 6"/><path d="M8 9h8M8 12h5"/></svg>') !important;
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 2h6M12 2v3"/><rect x="4" y="5" width="16" height="11" rx="1"/><path d="M8 16l-2 6M16 16l2 6"/><path d="M8 9h8M8 12h5"/></svg>') !important;
  }
  /* Designové akustické panely */
  #navigation ul.menu-level-1 > li > a[href="/designove-akusticke-panely-tabule-nabytek-cz/"]::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 8v8M8 4v16M12 9v6M16 5v14M20 10v4"/></svg>') !important;
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 8v8M8 4v16M12 9v6M16 5v14M20 10v4"/></svg>') !important;
  }
  /* Fitness */
  #navigation ul.menu-level-1 > li > a[href="/fitness/"]::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8v8M4 9v6M18 8v8M20 9v6M6 12h12"/></svg>') !important;
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8v8M4 9v6M18 8v8M20 9v6M6 12h12"/></svg>') !important;
  }

  /* ============================================================
     13) KOMPAKTNÍ STICKY PRUH (Alza) — staví ho JS jako #vm-sticky-bar
     - fixed přes celou šířku, schovaný nahoře, najede po odscrollování
     ============================================================ */
  #vm-sticky-bar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 70px !important;
    background: #fff !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1) !important;
    z-index: 100000 !important;
    transform: translateY(-110%) !important;
    transition: transform 0.25s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #vm-sticky-bar.vm-show {
    transform: translateY(0) !important;
  }
  #vm-sticky-bar .vm-inner {
    width: 100% !important;
    max-width: var(--site-max-width) !important;
    padding: 0 24px !important;
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    box-sizing: border-box !important;
  }
  /* Logo vlevo — zabere 1 díl prostoru, obsah u levého kraje */
  #vm-sticky-bar .vm-logo {
    flex: 1 1 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }
  #vm-sticky-bar .vm-logo img {
    height: 41px !important;
    width: auto !important;
    display: block !important;
  }
  /* Hledání uprostřed — pevná šířka, vycentrované mezi logem a košíkem */
  #vm-sticky-bar form.vm-search {
    flex: 0 1 560px !important;
    display: flex !important;
    margin: 0 !important;
    max-width: 560px !important;
  }
  /* Košík vpravo — zabere 1 díl prostoru, obsah u pravého kraje */
  #vm-sticky-bar .vm-cart-holder {
    flex: 1 1 0 !important;
    justify-content: flex-end !important;
  }
  #vm-sticky-bar form.vm-search input {
    flex: 1 1 auto !important;
    height: 40px !important;
    border: 1px solid #ddd !important;
    border-right: 0 !important;
    border-radius: 4px 0 0 4px !important;
    padding: 0 14px !important;
    font-size: 14px !important;
    outline: none !important;
    min-width: 0 !important;
  }
  #vm-sticky-bar form.vm-search button {
    flex: 0 0 auto !important;
    height: 40px !important;
    background: #ff9933 !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 0 4px 4px 0 !important;
    padding: 0 18px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
  }
  /* Klonovaný košík (nese Shoptet třídy .cart-count atd.) */
  #vm-sticky-bar .vm-cart-holder {
    flex: 1 1 0 !important; /* zabere pravý díl → hledání zůstane na středu */
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }
  #vm-sticky-bar .vm-cart-holder > a,
  #vm-sticky-bar .vm-cart-holder a.cart-count {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #39554c !important;
    text-decoration: none !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    height: auto !important;
    line-height: 1.2 !important;
    /* Shoptet .btn má text-transform: uppercase → "KČ". Vrátíme normální. */
    text-transform: none !important;
  }
  /* Ikona košíku (Shoptet icon font v ::before) — zelená, větší */
  #vm-sticky-bar .vm-cart-holder a.cart-count::before {
    color: #39554c !important;
    font-size: 30px !important;
    background: transparent !important;
    margin: 0 8px 0 0 !important;
  }
  /* Cena vždy viditelná v pruhu */
  #vm-sticky-bar .vm-cart-holder .cart-price {
    display: inline-block !important;
    color: #39554c !important;
    font-weight: 600 !important;
    margin-left: 4px !important;
    text-transform: none !important;
  }
  /* Počet kusů = oranžové kolečko na ikoně (jako v originálním headeru).
     Shoptet dává počet do <i>; projektové CSS pro header na klon necílí,
     tak ho nakreslíme sami. */
  #vm-sticky-bar .vm-cart-holder a.cart-count i {
    position: absolute !important;
    top: -4px !important;
    left: 16px !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 3px !important;
    box-sizing: border-box !important;
    background: #ff9933 !important;
    color: #fff !important;
    border-radius: 50% !important;
    font-size: 11px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 18px !important;
    text-align: center !important;
    display: inline-block !important;
  }
}