/* Vita Vision / Ashade navigation layer. The only breakpoint is 1270px. */
:root {
  --vv-nav-accent: #f09a00;
  --vv-nav-accent-bright: #ffad24;
  --vv-nav-glass: rgba(12, 12, 13, .84);
}

/* Desktop navigation: retain Ashade's native header markup and menu system. */
@media (min-width: 1270px) {
  html body #ashade-header .ashade-nav-block { display: flex !important; align-items: center !important; margin-left: auto !important; }
  html body #ashade-header .ashade-nav-block nav.ashade-nav {
    display: block !important; visibility: visible !important; opacity: 1 !important;
    padding: 5px 12px !important; border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 999px !important; background: var(--vv-nav-glass) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.045) !important;
    pointer-events: auto !important;
  }
  html body #ashade-header .ashade-nav-block .ashade-mobile-header { display: none !important; }
  html body nav.ashade-mobile-menu { display: none !important; }
  html body .vvb-responsive-mobile-header { display: none !important; visibility: hidden !important; }
  html body #ashade-header nav.ashade-nav li.ashade-wc-header-cart-wrap { display: none !important; }
}

/* Tablet + phone: expose Ashade's own mobile trigger and off-canvas menu from 1269px down.
   Ashade originally hides its mobile trigger above 960px; this layer moves that exact
   native behavior to the requested 1270px boundary without adding a second hamburger. */
@media (max-width: 1269px) {
  html body #ashade-header .ashade-header-inner { gap: 20px !important; }
  html body #ashade-header .ashade-logo-block { flex: 0 1 auto !important; min-width: 0 !important; }
  html body #ashade-header .ashade-nav-block { display: flex !important; flex: 0 0 auto !important; align-items: center !important; justify-content: flex-end !important; margin-left: auto !important; }
  html body #ashade-header .ashade-nav-block nav.ashade-nav,
  html body #ashade-header .ashade-nav-block nav.ashade-mob-nav {
    display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important;
  }
  html body #ashade-header .ashade-nav-block .ashade-mobile-header {
    display: flex !important; visibility: visible !important; opacity: 1 !important;
    align-items: center !important; justify-content: flex-end !important; gap: 12px !important;
    width: auto !important; min-width: 50px !important; max-height: none !important;
    transform: none !important; pointer-events: auto !important; z-index: 100050 !important;
  }
  html body #ashade-header .ashade-mobile-header a.ashade-mobile-menu-button {
    position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important;
    width: 50px !important; height: 50px !important; margin: 0 !important; padding: 0 !important;
    border: 1px solid rgba(255,174,45,.48) !important; border-radius: 50% !important;
    background: linear-gradient(145deg,rgba(28,27,25,.96),rgba(7,7,8,.96)) !important;
    box-shadow: 0 7px 24px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.12), 0 0 18px rgba(240,154,0,.10) !important;
    opacity: 1 !important; visibility: visible !important; overflow: visible !important;
  }
  html body #ashade-header .ashade-mobile-header a.ashade-mobile-menu-button svg {
    position: static !important; display: block !important; width: 27px !important; height: 28px !important;
    left: auto !important; top: auto !important; transform: none !important;
  }
  html body #ashade-header .ashade-mobile-header a.ashade-mobile-menu-button svg rect { fill: #f5f5f5 !important; }

  html body nav.ashade-mobile-menu {
    display: block !important; position: fixed !important; inset: 0 !important;
    width: 100vw !important; max-width: none !important; height: 100vh !important; height: 100dvh !important;
    margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
    background: rgba(0,0,0,.975) !important; z-index: 100100 !important;
    pointer-events: none !important; opacity: 0 !important; visibility: hidden !important;
    transform: translateX(100%) !important; transition: transform .34s ease, opacity .25s ease, visibility 0s linear .34s !important;
    overflow: hidden !important;
  }
  html body.ashade-mobile-menu-shown nav.ashade-mobile-menu {
    display: block !important; pointer-events: auto !important; opacity: 1 !important; visibility: visible !important;
    transform: translateX(0) !important; transition: transform .34s ease, opacity .25s ease, visibility 0s !important;
  }
  html body nav.ashade-mobile-menu .ashade-mobile-menu-inner {
    position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important;
    display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
    overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain !important;
    padding: 76px 22px 30px !important; box-sizing: border-box !important;
  }
  html body nav.ashade-mobile-menu .ashade-mobile-menu-content {
    width: 100% !important; max-width: 620px !important; margin: auto !important;
    padding: 28px 16px 32px !important; box-sizing: border-box !important;
  }
  html body nav.ashade-mobile-menu ul.vvb-header-nav-menu {
    display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important;
    width: 100% !important; max-width: 620px !important; margin: auto !important; padding: 20px 0 !important;
  }
  html body nav.ashade-mobile-menu ul.vvb-header-nav-menu > li { flex: 0 0 auto !important; }
  html body nav.ashade-mobile-menu a.ashade-mobile-menu-close {
    position: fixed !important; top: 22px !important; right: 24px !important; z-index: 100110 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    width: 42px !important; height: 42px !important; opacity: 1 !important; visibility: visible !important;
  }
  html body nav.ashade-mobile-menu a.ashade-mobile-menu-close svg { width: 19px !important; height: 19px !important; }
  html body .ashade-menu-overlay {
    display: block !important; position: fixed !important; inset: 0 !important; z-index: 100090 !important;
    background: rgba(0,0,0,.55) !important; opacity: 0 !important; pointer-events: none !important;
    transition: opacity .25s ease !important;
  }
  html body.ashade-mobile-menu-shown .ashade-menu-overlay { opacity: .45 !important; pointer-events: auto !important; }
  html body.ashade-mobile-menu-shown header#ashade-header,
  html body.ashade-mobile-menu-shown main.ashade-content-wrap,
  html body.ashade-mobile-menu-shown .ashade-home-wrap,
  html body.ashade-mobile-menu-shown .ashade-albums-carousel-wrap,
  html body.ashade-mobile-menu-shown .ashade-albums-slider-wrap {
    transform: none !important; pointer-events: none !important;
  }
  /* ViBook 1.8.58's emergency replacement button is deliberately suppressed;
     Ashade's native button above is the single source of mobile navigation. */
  html body .vvb-responsive-mobile-header { display: none !important; visibility: hidden !important; pointer-events: none !important; }
  html body #ashade-header nav.ashade-nav li.ashade-wc-header-cart-wrap { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  html body nav.ashade-mobile-menu,
  html body .ashade-menu-overlay { transition: none !important; }
}


/* ViTheme Child 1.0.1 visual cleanup. The glass rail belongs to the nav wrapper,
   not to the inner UL: this prevents the doubled outline seen on the desktop header. */
@media (min-width: 1270px) {
  html body #ashade-header .ashade-nav-block nav.ashade-nav ul.vvb-header-nav-menu {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    padding: 0 !important;
  }
}

/* Vita Vision uses the profile and cart controls instead of Ashade's optional
   auxiliary sidebar trigger (the three-dot button). Hide the trigger both in the
   original menu and in the mobile-header copy created by Ashade core.js. */
html body #ashade-header nav.ashade-nav li.ashade-aside-toggler-wrap,
html body #ashade-header nav.ashade-mob-nav li.ashade-aside-toggler-wrap,
html body #ashade-header .ashade-mobile-header a.ashade-aside-toggler,
html body nav.ashade-mobile-menu li.ashade-aside-toggler-wrap,
html body nav.ashade-mobile-menu a.ashade-aside-toggler {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


/* ViTheme Child 1.0.5: remove the legacy inner glass rail.
   The old ViBook navigation stylesheet draws a second rounded frame using
   ul.vvb-header-nav-menu::before. The outer Ashade nav wrapper remains the
   single visible rail; menu items, CTA and account/cart controls are untouched. */
@media (min-width: 1270px) {
  html body #ashade-header .ashade-nav-block nav.ashade-nav ul.vvb-header-nav-menu,
  html body #ashade-header .ashade-nav-block nav.ashade-nav ul.vvb-header-nav-menu::before,
  html body #ashade-header .ashade-nav-block nav.ashade-nav ul.vvb-header-nav-menu::after {
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html body #ashade-header .ashade-nav-block nav.ashade-nav ul.vvb-header-nav-menu::before,
  html body #ashade-header .ashade-nav-block nav.ashade-nav ul.vvb-header-nav-menu::after {
    content: none !important;
    display: none !important;
  }
}

/* ViTheme Child 1.0.6: visually hide native scrollbars inside the fullscreen
   mobile navigation while keeping the scroll container fully scrollable.
   Ashade's actual scrolling element is .ashade-mobile-menu-inner. */
@media (max-width: 1269px) {
  html body nav.ashade-mobile-menu,
  html body nav.ashade-mobile-menu .ashade-mobile-menu-inner,
  html body nav.ashade-mobile-menu .ashade-mobile-menu-content,
  html body nav.ashade-mobile-menu ul.vvb-header-nav-menu,
  html body nav.ashade-mobile-menu ul.vvb-header-nav-menu ul.sub-menu {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html body nav.ashade-mobile-menu::-webkit-scrollbar,
  html body nav.ashade-mobile-menu .ashade-mobile-menu-inner::-webkit-scrollbar,
  html body nav.ashade-mobile-menu .ashade-mobile-menu-content::-webkit-scrollbar,
  html body nav.ashade-mobile-menu ul.vvb-header-nav-menu::-webkit-scrollbar,
  html body nav.ashade-mobile-menu ul.vvb-header-nav-menu ul.sub-menu::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
  }
}