/*
 * Fixes two related header bugs:
 *
 * 1) The vendor megamenu (so_megamenu.js) opens/closes `.sub-menu` purely via
 *    jQuery hover handlers bound once in `$(document).ready`. MegaMenu.tsx
 *    re-renders whenever categories load or a hover-panel state changes
 *    (setHoveredCategoryId), which replaces the underlying DOM nodes — React
 *    doesn't know jQuery attached listeners to the old nodes, so they're
 *    silently dropped and the dropdown stops opening. Converting the
 *    open/close to pure CSS :hover removes the JS dependency entirely, so it
 *    can never desync from React's DOM. `.sub-menu` stays a DOM child of its
 *    `<li>` even though it's positioned absolutely, so :hover on the li
 *    naturally continues to apply while the pointer is over the open panel.
 *
 * 2) `ul.megamenu > li` has no `position` of its own (so_megamenu.js sets
 *    `.sub-menu`'s left/right offset inline via JS instead) — without JS
 *    running, `.sub-menu` (position: absolute) falls back to positioning
 *    against `ul.megamenu` (the nearest `position: relative` ancestor two
 *    levels up), not the specific `<li>`, so the panel can render in the
 *    wrong place. Giving each `<li>` its own `position: relative` fixes that
 *    unconditionally, without needing the JS offset calculation at all.
 */
@media (min-width: 993px) {
  ul.megamenu > li {
    position: relative;
  }
  ul.megamenu > li.hover:hover > .sub-menu,
  ul.megamenu > li.hover:focus-within > .sub-menu {
    display: block !important;
  }
  ul.megamenu > li.hover:hover > .sub-menu > .content,
  ul.megamenu > li.hover:focus-within > .sub-menu > .content {
    display: block !important;
  }
}

/* Sticky header: keep it above regular page content (product card fabs,
   banners, etc. all sit well under this) without fighting the cart
   drawer/mobile nav drawer's own overlay z-indexes (1200/1201). */
header#header {
  overflow: visible;
}
ul.megamenu > li > .sub-menu {
  z-index: 999 !important;
}
/* so_megamenu.css's `.horizontal ul.megamenu > li > .sub-menu` caps
   `.sub-menu` at `max-width: 100%` of its containing block — which, since
   the `<li>` above got `position: relative`, is the shrink-wrapped `<li>`
   itself (~80-90px), not the page. That silently clamped every fixed-width
   panel (Home/Pages/Blog, `width: 260px` etc. in MegaMenu.tsx) back down to
   the `<li>`'s own tiny width even though the inline `width` was set
   correctly, making the dropdown render as a sliver on hover. The extra
   `.horizontal` class in that selector out-specifies a plain
   `ul.megamenu > li > .sub-menu` override despite loading later, so this
   rule repeats the same `.horizontal` prefix to win the cascade. */
.horizontal ul.megamenu > li > .sub-menu {
  max-width: none;
}
ul.megamenu .sub-menu .content ul.row-list li a {
  white-space: nowrap;
}