/* Header nav-dropdown hover fix (2026-09-18).
   Root cause: .hover-panel / .nav-panel (cart, orders, account, deliver-to and the
   "Verified manufacturers" / "About AJAW" nav-widget dropdowns) sit `top: calc(100% + Npx)`
   below their trigger, leaving a dead gap the pointer has to cross. .msg-panel already
   solved this with a transparent `:before` bridge (see style.css `.msg-panel:before`),
   but that fix was never carried over when `.hover-widget`/`.hover-panel` generalised the
   pattern, so moving the mouse from a trigger down into its panel fires a mouseout whose
   relatedTarget is outside `.hover-widget` (app.js line ~702) and the panel closes before
   the pointer arrives — exactly the "Verified manufacturers -> Explore now / Sample center"
   report. Bridging the gap makes that dead zone part of the panel's own hit area again, so
   app.js sees the pointer as still inside the widget the whole way across, including on a
   diagonal path. Desktop only — panels are already `display:none` under 980px. */
@media (min-width:981px){
 .hover-panel::before{content:'';position:absolute;top:-12px;left:0;right:0;height:12px}
 .nav-panel::before{content:'';position:absolute;top:-10px;left:0;right:0;height:10px}

 /* Keyboard parity: tabbing onto a trigger (or anything inside its panel) reveals the
    panel even though app.js only toggles the `hidden` attribute on mouse events. Author
    rules beat the UA `[hidden]{display:none}` default, so no !important is needed. */
 .hover-widget:focus-within .hover-panel,
 .msg-widget:focus-within .msg-panel{display:block}
}

/* Mega menu scroll clipping (2026-09-18): the panel must cap its height and clip
   overflow so scrollable columns stay inside the panel boundary. Without this, the
   left (.mega-nav) and right (.mega-grid) columns render their full height even
   when scrolled, spilling beyond the panel edge onto the page behind it. */
.mega-panel{
 max-height:var(--mega-max-h,62vh);
 overflow:hidden;
}
.mega-nav,
.mega-grid{
 min-height:0;
 overflow-y:auto;
 overscroll-behavior:contain;
}