/* Header & Mega Menu — 3-level hover cascade (desktop) / full-screen drill-down (mobile).
   See header-spec.md Section 3.6 for the confirmed design (source: Mega Menu Designs/,
   client Figma exports reviewed 2026-09-13). Content comes from nav-data.js. */

/* Not position:relative here on purpose — the drawer below needs its containing block to be
   .rrg-header-shell (full-bleed, position:relative in shared.css — wraps both header bars),
   not this small nav item, so left:0/right:0 on the drawer spans the full header width
   instead of just this button. */
.mega-menu-toggle{background:none;border:none;padding:0;font:inherit;font-weight:700;color:var(--rrg-black);display:inline-flex;align-items:center;gap:6px;cursor:pointer;}
.mega-menu-toggle:hover{color:var(--rrg-red);}
.mega-menu-toggle svg{width:16px;height:16px;}

/* Backdrop — dims the rest of the page while the menu is open, so focus stays on the header
   + drawer (Brenton, 2026-09-13). z-index sits below .rrg-header-shell (z-index:85 in
   shared.css, wraps both header bars) so the header and the drawer, its descendant, stay
   fully bright; everything else in normal page flow has no z-index and sits below this. */
.mega-menu-backdrop{position:fixed;inset:0;background:rgba(20,16,14,.55);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:80;}
.mega-menu-backdrop.visible{opacity:1;pointer-events:auto;}
@media (max-width:900px){
  /* Desktop-only — on mobile, .mega-menu.open drives the .rrg-nav slide-down drawer instead
     (z-index:56 in shared.css, lower than this backdrop's 80), so leaving this active on
     mobile would dim/cover that drawer rather than the page behind it. */
  .mega-menu-backdrop{display:none!important;}
}

/* Full-width drawer (restructured 2026-09-13, header-spec.md Section 3.6 build-status log —
   Brenton's direction: one edge-to-edge drawer below the header, not per-row flyouts). L1 is
   a static sidebar; L2/L3 are independent columns whose content swaps on hover/focus of an
   L1/L2 row (see mega-menu.js), so they always occupy the drawer's full height regardless of
   which row triggered them — a flyout anchored to the row itself can't do that. `.mega-menu`
   isn't position:relative here on purpose: the drawer needs to span the full viewport width,
   so it's anchored to `.rrg-header-shell` (position:relative, full-bleed, set in shared.css —
   wraps both header bars) instead of the small Products button. `top:100%` still lands at the
   same pixel as before this anchored to `.rrg-main-header` directly, since main-header is the
   shell's last child with nothing after it. */
.mega-menu-drawer{position:absolute;top:100%;left:0;right:0;background:#fff;border-top:1px solid var(--rrg-line);box-shadow:var(--shadow);display:none;z-index:90;}
.mega-menu.open .mega-menu-drawer{display:block;}
.mega-menu-drawer-inner{display:flex;align-items:flex-start;}

/* Level 1 — sidebar; its natural height is the reference height the whole drawer is pinned
   to (mega-menu.js syncDrawerHeight()). Never scrolls itself — 8 categories + banner always
   fit; L2/L3 scroll past this height instead of growing the drawer (Brenton, 2026-09-13). */
/* No top padding — the banner needs to sit flush with the drawer's top edge, flush with the
   Level 2/3 heads (which have none), so all three line up (Brenton, 2026-09-13). */
.mega-menu-l1{flex:0 0 300px;border-right:1px solid var(--rrg-line);padding:0 0 6px;}

/* gap is bigger than it looks like it should be because .mm-icon's box (26px, what the row's
   height is measured from) is smaller than the icon image actually rendered inside it (52px,
   overflowing ~13px past the box on every side) — gap is measured from the box edge, not the
   overflowing image's visual edge, so without the extra buffer the icon visually crowds/
   touches the label text (Brenton, 2026-09-13). */
.mega-menu-l1-item{position:relative;display:flex;align-items:center;gap:26px;padding:14px 16px;cursor:pointer;border-bottom:1px solid var(--rrg-bg);}
.mega-menu-l1-item:last-child{border-bottom:none;}
.mega-menu-l1-item:hover,.mega-menu-l1-item:focus-within,.mega-menu-l1-item.active{background:var(--rrg-bg);}
/* Icon box stays the original 26px — this is what the row's height is measured from
   (mega-menu.js syncRowHeight(), plus mm-mobile-row's own auto height) — so doubling the
   icon's visual size (below) doesn't also double the row/button height, which grew
   unintentionally the first time this was tried (Brenton, 2026-09-13). overflow:visible +
   a larger, centered <img> makes the icon render bigger than its own box without the box
   itself (and therefore the row that sizes off it) growing to match. */
.mm-icon{width:26px;height:26px;flex:0 0 26px;color:var(--rrg-red);display:flex;align-items:center;justify-content:center;overflow:visible;}
.mm-icon svg{width:100%;height:100%;}
/* max-width:none overrides shared.css's global `img{max-width:100%}` reset, which was
   clamping this to the 26px container width (shared.css already documents this exact trap
   elsewhere — an img's max-width:100% resolves against its containing block, not its own
   explicit width) — height wasn't affected since that reset has no max-height counterpart. */
.mm-icon img{width:52px;height:52px;max-width:none;object-fit:contain;display:block;}
.mega-menu-l1-item .mm-label{flex:1;font-size:14px;font-weight:700;color:var(--rrg-black);}
.mm-chev{width:14px;height:14px;flex:0 0 auto;color:#999;}

/* Brands — a distinct full-width yellow "Shop By Brand" bar rather than a plain row, per the
   Figma (Brenton, 2026-09-13); still the same data-driven row as the other 7 underneath. */
.mega-menu-l1-item--brand{background:var(--rrg-gold-bg);border-bottom:none;}
.mega-menu-l1-item--brand:hover,.mega-menu-l1-item--brand:focus-within,.mega-menu-l1-item--brand.active{background:#FCE9A8;}
/* Text matches the other Level 1 rows' font now (Brenton, 2026-09-13) — no more Barlow
   Condensed/uppercase treatment; .mm-label's own styling (plain body font, 14px/700) applies
   unchanged. Only the yellow background sets this row apart. */

/* Level 2 — full-height column, content swapped by JS. Flex-column so the promo tile stays
   pinned to the bottom while only the row list scrolls (mega-menu.js sets a fixed `height`
   equal to Level 1's, matching the "fixed drawer height, internal scroll" decision above). */
.mega-menu-l2{flex:0 0 370px;border-right:1px solid var(--rrg-line);display:flex;flex-direction:column;overflow:hidden;}
/* height is set inline by mega-menu.js (syncRowHeight()) to match a real Level 1 row exactly,
   so the banner/Level 2 head/Level 3 head all line up as one strip (Brenton, 2026-09-13) —
   box-sizing + flex centering here so that fixed height still centers the label instead of
   clipping it. */
.mega-menu-l2-head{box-sizing:border-box;background:var(--rrg-red);color:#fff;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:16px;text-transform:uppercase;letter-spacing:.02em;padding:0 18px;display:flex;align-items:center;flex:0 0 auto;}
.mega-menu-l2-body{padding:4px 0;overflow-y:auto;flex:1 1 auto;}
/* When a promo tile is present, its image bleeds 42px above the bar (150px tall vs. the
   bar's fixed 108px) — without this, scrolling the body to its natural end tucks the last
   row (here, "View All") behind that bled image (Brenton, 2026-09-13, caught on Level 3's
   "Shop Roof Rack Accessories"). Only added when a promo tile actually renders — `has-promo`
   is set in mega-menu.js from the same `cat.promoTile`/`col.promoTile` check that decides
   whether the bar renders at all, so categories/columns with no tile keep the full column
   height for their list, no wasted space. */
.mega-menu-l2-body.has-promo{padding-bottom:48px;}
.mega-menu-l2-row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 18px;font-size:13.5px;font-weight:600;color:var(--rrg-black);cursor:pointer;text-decoration:none;border-bottom:1px solid var(--rrg-bg);}
.mega-menu-l2-row:last-child{border-bottom:none;}
.mega-menu-l2-row:hover,.mega-menu-l2-row:focus-within,.mega-menu-l2-row.active{background:var(--rrg-bg);}
.mega-menu-l2-row.mm-viewall{font-weight:700;}

/* Level 3 — same fixed-height, flex-column, pinned-promo-tile pattern as Level 2, plus its
   own head bar (new, Brenton 2026-09-13) so all three columns' top edges line up. */
.mega-menu-l3{flex:1 1 auto;display:flex;flex-direction:column;overflow:hidden;}
.mega-menu-l3-head{box-sizing:border-box;background:var(--rrg-red);color:#fff;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:16px;text-transform:uppercase;letter-spacing:.02em;padding:0 18px;display:flex;align-items:center;flex:0 0 auto;}
.mega-menu-l3-body{padding:10px 0;overflow-y:auto;flex:1 1 auto;}
.mega-menu-l3-body.has-promo{padding-bottom:48px;}
/* 2 built-in columns instead of a single scrolling list (Brenton, 2026-09-13) — comfortably
   fits every real category's link count except Brands' Vehicle Makes (~70 entries), which
   still scrolls via .mega-menu-l3-body's overflow-y above; flagged as a known exception. */
.mega-menu-l3-links{column-count:2;column-gap:0;}
.mega-menu-l3-links a{display:block;padding:9px 18px;font-size:13px;color:var(--rrg-black);text-decoration:none;break-inside:avoid;}
.mega-menu-l3-links a:hover{background:var(--rrg-bg);color:var(--rrg-red);}
.mega-menu-l3-body>a.mm-viewall{display:block;font-weight:700;border-top:1px solid var(--rrg-line);margin:4px 18px 0;padding-top:12px;}

/* Merchandising promo tile — pinned to the bottom of the Level 2/3 columns. The red bar
   stays a fixed 108px (Brenton, 2026-09-13: it was wrongly growing to match the image's
   height) while the photo — deliberately taller than the bar — spans over both the bar and
   the white list area above it, exactly like `Mega Menu - Final - Level 2.png`. Flush against
   the tile's left and bottom edges with zero padding; the only padding in the tile is the gap
   between the image and the text.

   The image is `position:absolute` rather than a flex sibling on purpose — the earlier flex
   version (`align-items:flex-end` with a taller image as a normal flex item) hit the standard
   flexbox trap where a flex item's default `min-height:auto` refuses to let it shrink below
   its own content's size, so `.mega-menu-promo`'s `flex:0 0 108px` was silently overridden
   and the whole bar grew to 150px to fit the image. Taking the image out of flow with
   `position:absolute` means it can freely overlap the bar's boundary while the bar's own box
   — and `.mega-menu-promo-text`'s height — stay locked to 108px regardless of the image's
   size. `.mega-menu-promo-text` reserves the image's width as left padding so the text
   doesn't sit underneath it. No `overflow:hidden` on `.mega-menu-promo`, on purpose, so the
   bleed isn't clipped — safe because `.mega-menu-l2`/`.mega-menu-l3` (the ancestor that
   *does* clip, to manage the fixed-height column) still fully contains the bled portion
   within their own box; only `.mega-menu-promo-img` itself clips the photo to its frame. */
.mega-menu-promo{position:relative;display:block;height:108px;background:var(--rrg-red-dark);color:#fff;text-decoration:none;flex:0 0 108px;}
/* Box widened to the real merch photo's own aspect ratio (183×154 at the 150px bleed height
   used here ≈ 178px wide) rather than a narrower box cropped via object-fit:cover — Brenton,
   2026-09-13: the photo was getting cropped on the right, and the box's translucent white
   background (meant as an "image pending" placeholder tint) was showing through the photo's
   transparent PNG background as an unwanted lighter red tint instead of the true bar colour.
   `object-fit:contain` + no background fixes both: contain never crops (for this image or any
   future one with a different aspect ratio — Magento merch photos won't all share this one's
   proportions), and with no background of its own, the image's transparent areas correctly
   show whatever is actually behind them — the bar's dark red in the lower ~108px, the white
   list area in the portion that bleeds above it. `object-position:left bottom` keeps the
   photo flush left/bottom (per the original ask) even if a future image's aspect ratio means
   `contain` has to letterbox it. */
.mega-menu-promo-img{position:absolute;left:0;bottom:0;width:178px;height:150px;}
.mega-menu-promo-img img{width:100%;height:100%;object-fit:contain;object-position:left bottom;display:block;}
/* "Image pending" text fallback (promoTile configured but no image yet) only, scoped via
   :has() so this padding/styling never shrinks the box a real <img> sizes itself against. */
.mega-menu-promo-img:not(:has(img)){display:flex;align-items:flex-end;color:rgba(255,255,255,.5);font-size:10px;padding:0 0 8px 8px;}
.mega-menu-promo-text{display:flex;flex-direction:column;justify-content:center;height:100%;box-sizing:border-box;min-width:0;padding:0 16px 0 192px;}
.mega-menu-promo-eyebrow{display:block;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;color:rgba(255,255,255,.75);margin-bottom:3px;}
.mega-menu-promo strong{display:block;font-size:13px;line-height:1.3;color:#fff;}

/* Promo banner above Level 1 — a real image now (Brenton supplied `sale-banner.png` /
   `sale-banner-fallback.png`, 2026-09-13), swapped by mmApplySaleBannerVisibility() rather
   than shown/hidden, so the strip never goes blank (see mega-menu.js). Box height is set
   inline by mega-menu.js to exactly match a Level 1 row, so it lines up with the Level 2/3
   heads; the image fills that box via object-fit so its exact source aspect ratio doesn't
   have to match the row height precisely. */
.mega-menu-banner{box-sizing:border-box;display:block;overflow:hidden;text-decoration:none;}
.mega-menu-banner img{display:block;width:100%;height:100%;object-fit:cover;}

@media (max-width:900px){
  /* Desktop hover cascade doesn't apply on touch — mobile uses the full-screen takeover
     below. "Products" no longer appears as its own nav item on mobile (Brenton, 2026-09-13:
     it shouldn't be a separate tab) — the hamburger opens the takeover directly, landing on
     the category list as the root screen. */
  .mega-menu-l1{display:none!important;}
  .mega-menu-toggle{display:none!important;}
}

/* Full-screen mobile takeover (rebuilt 2026-09-13, header-spec.md Section 3.6 — see
   Mega Menu Designs/Mega Menu - Final - Level 1 - Mob.png). position:fixed to the whole
   viewport, with its own topbar (logo/login/vehicle) and search — this is what makes it
   immune to the real header's scroll/sticky state, unlike the drawer it replaces, which
   stayed put while the sticky header scrolled independently of it. Static topbar/search
   markup lives in prototypes/header/index.html; mega-menu.js only ever writes into
   .mega-menu-mobile and toggles this element's [data-screen] to hide the topbar/search once
   drilled past the root screen. Desktop-only class removed via the media query below it. */
.mm-mobile-takeover{display:none;position:fixed;inset:0;z-index:200;background:#fff;}
.mm-mobile-takeover.open{display:flex;flex-direction:column;}
@media (min-width:901px){.mm-mobile-takeover{display:none!important;}}
body.mm-mobile-locked{overflow:hidden;}

.mm-mobile-panel{display:flex;flex-direction:column;height:100%;min-height:0;}

.mm-mobile-topbar{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-bottom:1px solid var(--rrg-line);flex:0 0 auto;}
.mm-mobile-logo{flex:0 0 auto;}
.mm-mobile-logo img{height:26px;display:block;}
.mm-mobile-utility{flex:1 1 auto;display:flex;flex-direction:column;align-items:flex-end;gap:6px;margin-left:auto;min-width:0;}
.mm-mobile-utility-item{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--rrg-black);text-decoration:none;text-align:right;}
.mm-mobile-utility-item svg{width:15px;height:15px;flex:0 0 auto;color:var(--rrg-red);}
.mm-mobile-close{background:none;border:none;padding:2px;margin-top:2px;color:var(--rrg-black);display:flex;cursor:pointer;flex:0 0 auto;}
.mm-mobile-close svg{width:20px;height:20px;}
/* Levels 1/2's back+title bar gets its own close button too (the topbar's is hidden on
   those screens) — smaller and right-aligned within that bar rather than a whole row. */
.mm-mobile-head-close{margin-left:auto;margin-top:0;}

.mm-mobile-search{padding:12px 16px;border-bottom:1px solid var(--rrg-line);flex:0 0 auto;position:relative;}
.mm-mobile-search input{width:100%;box-sizing:border-box;padding:10px 40px 10px 14px;border:1px solid var(--rrg-line);border-radius:999px;font:inherit;font-size:14px;background:var(--rrg-bg);}
.mm-mobile-search-btn{position:absolute;right:28px;top:50%;transform:translateY(-50%);background:none;border:none;color:#999;display:flex;cursor:pointer;}
.mm-mobile-search-btn svg{width:16px;height:16px;}

.mega-menu-mobile{flex:1 1 auto;overflow-y:auto;padding:0 16px 24px;}
/* Same reasoning as .mega-menu-l2-body/.mega-menu-l3-body.has-promo above — the promo image's
   42px upward bleed would otherwise sit on top of "View All". Unlike desktop, the promo tile
   here is a normal-flow sibling of the row list (not a separately-pinned flex child with its
   own scrollable body before it), so the gap has to go on "View All" itself (margin-bottom),
   not as trailing padding on the outer scroll container — padding at the very end of
   .mega-menu-mobile wouldn't create any space *between* "View All" and the promo tile
   directly after it, only space after the promo tile. mega-menu.js toggles `has-promo` from
   the same cat.promoTile/col.promoTile check that decides whether the bar renders at all. */
.mega-menu-mobile.has-promo .mm-viewall{margin-bottom:56px;}
/* Banner has no JS-measured height on mobile (there's no equivalent "row" to pin to, unlike
   desktop's syncRowHeight()) — just a sensible fixed height for the image to object-fit into. */
.mega-menu-mobile .mega-menu-banner{height:64px;margin:0 -16px;width:calc(100% + 32px);}

/* Levels 1/2 (Shop X list, leaf links) hide the root screen's topbar/search entirely — the
   Figma's own Level 2/3 mobile screens show only the back+title bar, not the utility row. */
.mm-mobile-takeover[data-screen="1"] .mm-mobile-topbar,
.mm-mobile-takeover[data-screen="1"] .mm-mobile-search,
.mm-mobile-takeover[data-screen="2"] .mm-mobile-topbar,
.mm-mobile-takeover[data-screen="2"] .mm-mobile-search{display:none;}

.mm-mobile-head{display:flex;align-items:center;gap:10px;padding:14px 0;border-bottom:1px solid var(--rrg-line);}
.mm-mobile-back{background:none;border:none;padding:4px;color:var(--rrg-red);display:flex;cursor:pointer;}
.mm-mobile-back svg{width:18px;height:18px;}
.mm-mobile-title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:.02em;}
.mm-mobile-subrow{display:flex;align-items:center;gap:8px;padding:10px 0;color:#666;font-size:12.5px;font-weight:700;border-bottom:1px solid var(--rrg-bg);}
.mm-mobile-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 0;font-size:14px;font-weight:600;color:var(--rrg-black);text-decoration:none;border-bottom:1px solid var(--rrg-bg);}
.mm-mobile-row .mm-chev{color:#999;}
/* Category rows only (root screen) — icon + label grouped as one flex item so
   justify-content:space-between on .mm-mobile-row still just splits [icon+label] from the
   chevron, instead of spacing all 3 children evenly. Same bigger-than-it-looks gap reasoning
   as .mega-menu-l1-item above — .mm-icon's 26px box is smaller than the 52px icon rendered
   inside it. */
.mm-mobile-row-label{display:flex;align-items:center;gap:26px;min-width:0;}
.mm-mobile-row.mm-viewall{font-weight:700;}
.mm-mobile-leaf{display:block;padding:12px 0;font-size:13.5px;color:var(--rrg-black);text-decoration:none;border-bottom:1px solid var(--rrg-bg);}
.mm-mobile-leaf.mm-viewall{font-weight:700;}

/* Root screen only: Brands gets the same yellow full-bleed treatment as desktop's "Shop By
   Brand" bar (Brenton, 2026-09-13, matching Mega Menu Designs/…Level 1 - Mob.png); the 4
   plain nav links (Store Finder etc.) sit in their own section below the categories, per
   Brenton's confirmed layout call — same rows, just a border above to separate the groups. */
/* Text matches the other category rows' font (Brenton, 2026-09-13) — no more Barlow
   Condensed/uppercase; only the yellow background sets this row apart, same as desktop. */
.mm-mobile-row--brand{background:var(--rrg-gold-bg);margin:0 -16px;padding-left:16px;padding-right:16px;}
.mm-mobile-utility-links{margin-top:4px;border-top:2px solid var(--rrg-line);padding-top:2px;}

/* Specificity fix, found via Playwright check (2026-09-13): the mega-menu drawer rows that
   are <a> tags live inside .rrg-nav, and shared.css's `.rrg-nav a{display:inline-flex}`
   (one class + one element = higher specificity than a single class here) was silently
   winning over the `display` set above — collapsing full-width rows down to inline,
   shrink-to-fit boxes. Re-declaring with an element-qualified selector ties the specificity;
   loading after shared.css in every page's <head> settles the tie in this file's favour.
   .mm-mobile-row/.mm-mobile-leaf don't actually live inside .rrg-nav any more since the
   2026-09-13 mobile takeover rebuild, so this fix is a no-op for them now, not a fix — kept
   for safety/consistency rather than re-verified as strictly necessary. */
a.mega-menu-banner{display:block;}
a.mega-menu-promo{display:flex;}
a.mega-menu-l2-row{display:flex;}
a.mm-mobile-row{display:flex;}
a.mm-mobile-leaf{display:block;}