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

  /* --- Přihlášení (navigationActions) --- */
  nav#navigation .navigationActions {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-top: 1px solid #eeeeee !important;
    border-bottom: none !important;
  }

  nav#navigation .navigationActions li {
    display: block !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  nav#navigation .navigationActions a {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 16px 20px !important;
    color: #1D1D1B !important;
    font-size: 15px !important;
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    border: none !important;
    background: transparent !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  nav#navigation .navigationActions li {
    width: 100% !important;
    opacity: 1 !important;
  }

  nav#navigation .navigationActions a span {
    color: inherit !important;
    font: inherit !important;
  }

  nav#navigation .navigationActions a:hover {
    color: #D61118 !important;
  }

  /* Zobrazit text "Přihlásit se" vedle ikony — Shoptet ho může skrývat */
  nav#navigation .navigationActions li {
    text-align: left !important;
  }

  nav#navigation .navigationActions a[data-testid="signin"] {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }

  nav#navigation .navigationActions a[data-testid="signin"] span {
    display: inline !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: nowrap !important;
  }

  /* --- Kontakty + sociální sítě + telefon (Shoptet je vkládá do nav panelu) --- */
  nav#navigation .contact-wrap,
  nav#navigation [class*="contact"] {
    padding: 8px 20px !important;
    margin: 0 !important;
    opacity: 1 !important;
  }

  nav#navigation .social-icons,
  nav#navigation [class*="social"]:not(.social-icon) {
    padding: 8px 20px !important;
    margin: 0 !important;
    opacity: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
  }

  nav#navigation .social-icons a,
  nav#navigation [class*="social"] a {
    margin: 0 !important;
    padding: 0 !important;
  }

  nav#navigation .contact-wrap a,
  nav#navigation [class*="social"] a,
  nav#navigation .project-phone,
  nav#navigation .project-email {
    color: #1D1D1B !important;
    font-size: 13px !important;
    font-family: 'DM Sans', sans-serif !important;
    text-decoration: none !important;
    opacity: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  nav#navigation .project-phone span,
  nav#navigation .project-email span {
    color: #1D1D1B !important;
    opacity: 1 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    font-family: 'DM Sans', sans-serif !important;
  }

  nav#navigation .project-phone:hover,
  nav#navigation .project-email:hover {
    color: #D61118 !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;
  }

}