/* ===================================================================
   BRILED.cz — Mobilní slide-in navigace
   Platí pouze pro ≤ 768px. Desktop menu není dotčeno.
   =================================================================== */

@media (max-width: 768px) {

  /* --- Slide-in panel (zavřený = mimo obrazovku vlevo) --- */
  nav#navigation {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: min(300px, 88vw) !important;
    height: 100dvh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: #ffffff !important;
    z-index: 9500 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18) !important;
  }

  /* --- Otevřený panel --- */
  body.navigation-window-visible nav#navigation {
    transform: translateX(0) !important;
  }

  /* --- Záhlaví panelu (close button area) --- */
  nav#navigation .navigation-close {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: 100% !important;
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 20px !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
    border-bottom: 2px solid #D61118 !important;
    z-index: 10 !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
  }

  /* Shoptet vloží vlastní × — zachovat, pouze přebarvit */
  nav#navigation .navigation-close,
  nav#navigation .navigation-close i,
  nav#navigation .navigation-close span:not(.sr-only) {
    color: #1D1D1B !important;
  }

  /* --- Navigační wrapper uvnitř panelu --- */
  nav#navigation .navigation-in.menu {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    padding: 8px 0 40px !important;
    /* Shoptet nastavuje inline background:white !important — JS to přebíjí,
       toto je záloha pro případ renderu před JS */
    background: transparent !important;
  }

  /* --- Menu seznam --- */
  nav#navigation .menu-level-1 {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    flex-wrap: unset !important;
    justify-content: unset !important;
    border-bottom: none !important;
  }

  /* --- Položky seznamu --- */
  nav#navigation .menu-level-1 > li {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-shrink: unset !important;
    position: relative !important;
    border-top: 1px solid #eeeeee !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
  }

  nav#navigation .menu-level-1 > li:first-child {
    border-top: none !important;
  }

  nav#navigation .menu-level-1 > li + li {
    border-left: none !important;
  }

  /* Žádná červená čára pod položkou (desktop efekt) */
  nav#navigation .menu-level-1 > li::after {
    display: none !important;
  }

  /* --- Odkazy --- */
  nav#navigation .menu-level-1 > li > a,
  nav#navigation [data-testid="headerMenuItem"] {
    display: flex !important;
    align-items: center !important;
    padding: 16px 20px !important;
    color: #D61118 !important;
    font-size: 15px !important;
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.4px !important;
    text-decoration: none !important;
    white-space: normal !important;
    background: transparent !important;
    transition: color 0.15s, background 0.15s !important;
  }

  nav#navigation .menu-level-1 > li > a:active,
  nav#navigation [data-testid="headerMenuItem"]:active {
    color: #b00e14 !important;
    background: rgba(214, 17, 24, 0.06) !important;
  }

  /* Hover na dotykových zařízeních (stylus / myš na hybridech) */
  nav#navigation .menu-level-1 > li:hover > a,
  nav#navigation .menu-level-1 > li:hover [data-testid="headerMenuItem"] {
    color: #b00e14 !important;
    background: rgba(214, 17, 24, 0.06) !important;
  }

  /* Hover pozadí celé položky */
  nav#navigation .menu-level-1 > li:hover {
    background: transparent !important;
  }

  /* --- Skrýt mega-panely na mobilu --- */
  .mega-menu-panel {
    display: none !important;
  }

  /* --- Skrýt Shoptet "Více" overflow tlačítko --- */
  .menu-helper {
    display: none !important;
  }

  /* --- Backdrop (vložen přes JS) ---
     Začíná až ZA panelem (min(300px, 88vw)) aby nekryl klikatelné položky */
  .briled-mob-backdrop {
    position: fixed;
    top: 0;
    left: min(300px, 88vw);
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 9400;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
  }

  body.navigation-window-visible .briled-mob-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* --- Skrýt položky mimo požadovaných 5 kategorií --- */
  nav#navigation .menu-level-1 > li:has(a[href="/pasky/"]),
  nav#navigation .menu-level-1 > li:has(a[href="/svitidla/"]),
  nav#navigation .menu-level-1 > li:has(a[href="/profily-a-difuzory/"]),
  nav#navigation .menu-level-1 > li:has(a[href="/prislusentstvi/"]) {
    display: none !important;
  }

}