/** Shopify CDN: Minification failed

Line 146:0 Expected "*/" to terminate multi-line comment

**/


@media (min-width: 1024px) {
  #mobile-menu,
  .mobile-menu-drawer {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: none !important;
    transition: none !important;
    position: absolute !important;
  }
}

/* ==========================================================
   2. Fix for iPhone Chrome/Safari WebKit repaint bug
   ----------------------------------------------------------
   When the menu repaints on iOS Chrome or Safari, it briefly
   shows the main menu again before showing the submenu.
   This disables GPU transform triggers that cause the issue.
   ========================================================== */

@supports (-webkit-touch-callout: none) {
  .header,
  .thb-full-menu,
  .thb-full-menu .sub-menu,
  .thb-full-menu .mega-menu {
    -webkit-transform: none !important;
    transform: none !important;
    will-change: auto !important;
    backface-visibility: visible !important;
    perspective: none !important;
    transition: none !important;
  }
}

/* ==========================================================
   3. Keep “Shop All” clickable even when active
   ----------------------------------------------------------
   Shopify disables pointer events on the current page link.
   This re-enables it so the mega menu still opens properly.
   ========================================================== */

.thb-full-menu li.menu-item-has-children > a[aria-current],
.thb-full-menu li.menu-item-has-children > a[aria-current="page"],
.thb-full-menu li.menu-item-has-children > a.active {
  pointer-events: auto !important;
}

/* ==========================================================
   4. Force visible submenu for “Shop All” state
   ----------------------------------------------------------
   Ensures that when "Shop All" is the active link, its 
   submenu (mega menu) stays visible without delay or flicker.
   ========================================================== */

.thb-full-menu li.menu-item-has-children > a[aria-current="page"] + .sub-menu,
.thb-full-menu li.menu-item-has-children > a.active + .sub-menu {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
  transition: none !important;
  z-index: 1 !important;
}

/* ==========================================================
   5. Fallback override (for inline JS re-hiding)
   ----------------------------------------------------------
   Sometimes inline theme scripts hide the submenu after load.
   This forces visibility back on if opacity/visibility is set.
   ========================================================== */

.thb-full-menu li.menu-item-has-children > a[aria-current="page"] + .sub-menu[style*="opacity: 0"],
.thb-full-menu li.menu-item-has-children > a[aria-current="page"] + .sub-menu[style*="visibility: hidden"] {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  display: block !important;
}

/* ==========================================================
   6. Mobile Drawer Adjustment
   ----------------------------------------------------------
   Helps mobile navigation open smoother without clipping.
   ========================================================== */

.mobile-menu-drawer.active {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out !important;
}

.mobile-menu .sub-menu {
  transition: transform 0.25s ease-out, opacity 0.25s ease-out !important;
}

/* ==========================================================
   7. Debug Helper (Optional)
   ----------------------------------------------------------
   Uncomment this section to visually verify that the mega
   menu is displaying correctly. It outlines it in blue.
   ========================================================== */

/*
.thb-full-menu li.menu-item-has-children > a[aria-current="page"] + .sub-menu {
  outline: 2px solid rgba(0, 120, 255, 0.7);
  background-color: rgba(0, 120, 255, 0.05);
}
*/

/* ==========================================================
   8. JS Safety Net (optional, add to theme.liquid footer)
   ----------------------------------------------------------
   This ensures that if the submenu loads hidden on page load,
   it becomes visible automatically.
   ==========================================================
   <script>
   document.addEventListener('DOMContentLoaded', () => {
     const activeMenu = document.querySelector('.thb-full-menu a[aria-current="page"] + .sub-menu');
     if (activeMenu) {
       activeMenu.style.display = 'block';
       activeMenu.style.opacity = '1';
       activeMenu.style.visibility = 'visible';
       activeMenu.style.transform = 'none';
     }
   });
   </script>
   ========================================================== */

/* ==========================================================
   9. Place Your Custom Styles Below
   ========================================================== */

/* Example custom override:
body {
  background-color: #fafafa;
}