/* =============================================================================
   RAINCROSS ARMORY — Production Navigation CSS
   Principal Frontend Engineer implementation
   Scope: CSS additions + overrides only. HTML is final and untouched.
   Breakpoint contract: ≥1025px = desktop, ≤1024px = mobile
   ============================================================================= */


/* =============================================================================
   SECTION 2: DESKTOP CSS
   Strategy: CSS-only hover via .ra-nav-item--has-dropdown:hover
   No JavaScript required for desktop open/close.
   All transitions use opacity+visibility so layout never shifts (no CLS).
   ============================================================================= */

/* ── 2.1 Nav container: must be overflow-visible for absolute dropdowns ──────── */
.ra-category-nav {
  position: relative;        /* dropdown anchor context */
  overflow: visible !important; /* CRITICAL: allow dropdowns to escape */
  /* z-index sits below mini-cart (999999) and mobile overlay (99998) */
  z-index: 9000;
}

/* ── 2.2 Inner wrapper: must also be visible ─────────────────────────────────── */
.ra-category-nav__inner {
  overflow: visible !important; /* overrides any hidden from previous code */
  position: relative;
}

/* ── 2.3 Nav item base: stretch-height so hover area covers full nav bar ─────── */
.ra-nav-item {
  position: static;           /* items in the flex row — dropdowns anchor to .ra-nav-item--has-dropdown */
  display: inline-flex;
  align-items: stretch;
}

/* ── 2.4 Items that own a dropdown: relative so dropdown anchors to them ─────── */
.ra-nav-item--has-dropdown {
  position: relative;
}

/* ── 2.5 Invisible bridge: fills the gap between nav link bottom and dropdown top
         Prevents the hover state from collapsing when cursor moves downward ───── */
.ra-nav-item--has-dropdown::after {
  content: '';
  position: absolute;
  bottom: -8px;       /* covers the 2px offset + extra buffer */
  left: 0;
  right: 0;
  height: 8px;        /* must be ≥ top calc(100% + 2px) gap on .ra-mega-dropdown */
  z-index: 9998;      /* above page, below dropdown */
  /* transparent — purely a hover bridge, never visible */
}

/* ── 2.6 Mega dropdown: hidden by default via opacity+visibility (NO display:none)
         Using opacity+visibility preserves layout and enables smooth transitions.
         pointer-events:none prevents accidental hover on hidden state. ─────────── */
.ra-mega-dropdown {
  position: absolute;
  top: calc(100% + 2px);    /* 2px below nav bar bottom edge */
  left: 0;
  min-width: 560px;
  max-width: 1100px;
  width: max-content;

  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-top: 3px solid var(--ra-gold, #c9a84c);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.16), 0 4px 16px rgba(0,0,0,0.08);

  z-index: 9999;

  /* Hidden state — opacity+visibility avoids CLS and allows transition */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition:
    opacity     0.18s ease,
    transform   0.18s ease,
    visibility  0s   linear 0.18s;   /* delay visibility removal = no flash */
  pointer-events: none;             /* prevent hover-capture while hidden */
  will-change: opacity, transform;  /* GPU-composite, no layout thrash */
}

/* ── 2.7 Dropdown open state: triggered by CSS hover on parent ──────────────── */
.ra-nav-item--has-dropdown:hover > .ra-mega-dropdown,
.ra-nav-item--has-dropdown.is-open > .ra-mega-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity     0.18s ease,
    transform   0.18s ease,
    visibility  0s   linear 0s;     /* visibility immediate on open */
  pointer-events: auto;
}

/* ── 2.8 Active nav link state when dropdown is open ────────────────────────── */
.ra-nav-item--has-dropdown:hover > .ra-category-nav__link,
.ra-nav-item--has-dropdown.is-open > .ra-category-nav__link {
  color: #ffffff;
  border-bottom-color: var(--ra-gold, #c9a84c);
}

/* ── 2.9 Chevron rotation on hover/open ─────────────────────────────────────── */
.ra-nav-chevron {
  margin-left: 3px;
  transition: transform 0.2s ease;
  opacity: 0.65;
  flex-shrink: 0;
}
.ra-nav-item--has-dropdown:hover .ra-nav-chevron,
.ra-nav-item--has-dropdown.is-open .ra-nav-chevron {
  transform: rotate(180deg);
  opacity: 1;
}

/* ── 2.10 Dropdown positioning: left-anchor by default ──────────────────────── */
.ra-mega-dropdown {
  left: 0 !important;
  right: auto !important;
}

/* ── 2.11 Right-edge items (items 8–14): anchor to right to prevent viewport overflow
          nth-child(n+8) covers the right half of 14 items ───────────────────── */
.ra-nav-item--has-dropdown:nth-child(n+8) .ra-mega-dropdown {
  left: auto !important;
  right: 0 !important;
}

/* ── 2.12 Mega dropdown interior layout ─────────────────────────────────────── */
.ra-mega-dropdown__inner {
  padding: 0;
  overflow: hidden;
  border-radius: 0 0 10px 10px;
}

/* ── 2.13 Header bar ─────────────────────────────────────────────────────────── */
.ra-mega-dropdown__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px 13px;
  background: linear-gradient(135deg, #1a2744 0%, #0f1929 100%);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  gap: 16px;
}

.ra-mega-dropdown__title {
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
  transition: color 0.15s ease;
}
.ra-mega-dropdown__title:hover { color: var(--ra-gold, #c9a84c); }

.ra-mega-dropdown__count {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  text-transform: none;
  letter-spacing: 0;
  background: rgba(255,255,255,0.1);
  padding: 2px 8px;
  border-radius: 20px;
  margin-left: 4px;
}

.ra-mega-dropdown__view-all {
  font-size: 11px;
  font-weight: 700;
  color: var(--ra-gold, #c9a84c);
  text-decoration: none;
  white-space: nowrap;
  border: 1.5px solid rgba(201,168,76,0.6);
  padding: 5px 13px;
  border-radius: 4px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  flex-shrink: 0;
}
.ra-mega-dropdown__view-all:hover {
  background: var(--ra-gold, #c9a84c);
  border-color: var(--ra-gold, #c9a84c);
  color: #0f1929;
}

/* ── 2.14 Columns grid ───────────────────────────────────────────────────────── */
.ra-mega-dropdown__cols {
  display: flex;
  gap: 0;
  padding: 18px 22px 20px;
  background: #ffffff;
}

.ra-mega-dropdown__col {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 160px;
  max-width: 240px;
  padding-right: 20px;
}
.ra-mega-dropdown__col + .ra-mega-dropdown__col {
  padding-left: 18px;
  padding-right: 20px;
  border-left: 1px solid #f0f2f5;
}
.ra-mega-dropdown__col:last-child {
  padding-right: 0;
}

/* ── 2.15 Sub-category header link ──────────────────────────────────────────── */
.ra-mega-dropdown__sub-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 7px 0 6px !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  color: #1a2744 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border-bottom: 1.5px solid #e8eaee !important;
  margin-bottom: 4px !important;
  margin-top: 8px !important;
  line-height: 1.3 !important;
  transition: color 0.13s ease !important;
}
.ra-mega-dropdown__col > .ra-mega-dropdown__sub-header:first-child {
  margin-top: 0 !important;
}
.ra-mega-dropdown__sub-header:hover { color: var(--ra-gold, #c9a84c) !important; }

.ra-mega-dropdown__sub-count {
  font-size: 10px;
  font-weight: 500;
  color: #9ca3af;
  margin-left: 4px;
  flex-shrink: 0;
  text-transform: none;
  letter-spacing: 0;
}

/* ── 2.16 Child links ────────────────────────────────────────────────────────── */
.ra-mega-dropdown__children {
  display: flex;
  flex-direction: column;
  margin-bottom: 4px;
}

.ra-mega-dropdown__child-link {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 4px 0 4px 12px !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  color: #4b5563 !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
  transition: color 0.13s ease, padding-left 0.13s ease !important;
  position: relative !important;
}
.ra-mega-dropdown__child-link::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--ra-gold, #c9a84c);
  font-size: 11px;
  line-height: inherit;
}
.ra-mega-dropdown__child-link:hover {
  color: #1a2744 !important;
  padding-left: 16px !important;
}

.ra-mega-dropdown__child-count {
  font-size: 10px;
  color: #c4c9d4;
  flex-shrink: 0;
  margin-left: 4px;
}

/* ── 2.17 Generic sub-link (no children) ────────────────────────────────────── */
.ra-mega-dropdown__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  text-decoration: none;
  transition: color 0.13s ease, padding-left 0.13s ease;
  line-height: 1.4;
}
.ra-mega-dropdown__link:hover {
  color: var(--ra-gold, #c9a84c);
  padding-left: 4px;
}

/* ── 2.18 Focus-visible style for keyboard users on desktop ─────────────────── */
.ra-mega-dropdown__child-link:focus-visible,
.ra-mega-dropdown__sub-header:focus-visible,
.ra-mega-dropdown__link:focus-visible,
.ra-mega-dropdown__view-all:focus-visible,
.ra-mega-dropdown__title:focus-visible {
  outline: 2px solid var(--ra-gold, #c9a84c);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Focus on top-level nav link */
.ra-category-nav__link:focus-visible {
  outline: 2px solid var(--ra-gold, #c9a84c);
  outline-offset: -2px;
  color: #ffffff;
}

/* ── 2.19 Keyboard-opened dropdown (JS adds .is-open) ───────────────────────── */
/* Already handled by .ra-nav-item--has-dropdown.is-open rules above */


/* ─── 2.20  MEGA-MENU LAYOUT (Desktop) ─────────────────────────────────────
   Zone 1: ra-mega-zone1  — Hero "Shop All" CTA (full-width top bar)
   Zone 2: ra-mega-zone2  — Curated subcategory list (max 5 + Shop All)
   Zone 3: ra-mega-zone3  — Secondary discovery (below body divider)
   Zone 4: ra-mega-zone4  — Promo strip (BOTTOM, full-width, subtle)
   ────────────────────────────────────────────────────────────────────────── */

/* ─── 2.20.1  Outer grid: zone1 top, body middle, zone4 bottom ─────────── */
.ra-mega-dropdown__inner {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr;
  grid-template-areas:
    "zone1"
    "body"
    "zone4"
    "brands";
}

/* ─── 2.20.2  Zone 1: Hero CTA bar ─────────────────────────────────────── */
.ra-mega-zone1 {
  grid-area: zone1;
  padding: 14px 20px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(90deg, #0f1c35 0%, #1a2744 100%);
  border-radius: 6px 6px 0 0;
}
.ra-mega-hero-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: color 0.15s ease, gap 0.15s ease;
}
.ra-mega-hero-link:hover {
  color: var(--ra-gold, #c9a84c);
  gap: 14px;
}
.ra-mega-hero-link__text { font-size: 15px; font-weight: 700; }
.ra-mega-hero-link__arrow {
  flex-shrink: 0;
  transition: transform 0.15s ease;
}
.ra-mega-hero-link:hover .ra-mega-hero-link__arrow {
  transform: translateX(4px);
}

/* ─── 2.20.3  Body: zone2 + zone3 stacked vertically ───────────────────── */
.ra-mega-body {
  grid-area: body;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0;
  padding: 16px 20px;
  min-width: 0;
  overflow: hidden;
}

/* ─── 2.20.4  Zone 2: Curated links (single column, max 5 + Shop All) ──── */
.ra-mega-zone2 {
  flex: 0 0 220px;
  min-width: 180px;
  max-width: 240px;
  border-right: 1px solid #f0f0f2;
  padding-right: 20px;
}
.ra-mega-zone2 .ra-mega-dropdown__cols {
  display: block;
}
.ra-mega-zone2 .ra-mega-dropdown__col {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.ra-mega-dropdown__link {
  display: flex;
  align-items: center;
  padding: 7px 0 7px 2px;
  font-size: 13.5px;
  font-weight: 500;
  color: #1a2744;
  text-decoration: none;
  border-bottom: 1px solid #f5f5f7;
  transition: color 0.13s ease, padding-left 0.13s ease;
  line-height: 1.35;
}
.ra-mega-dropdown__link:hover {
  color: var(--ra-gold, #c9a84c);
  padding-left: 6px;
}
/* "Shop All" link — mandatory last item, visually distinct */
.ra-mega-dropdown__link--shop-all {
  font-weight: 700;
  color: var(--ra-gold, #c9a84c);
  border-bottom: none;
  margin-top: 4px;
  padding-top: 10px;
  font-size: 13px;
  letter-spacing: 0.01em;
}
.ra-mega-dropdown__link--shop-all:hover {
  color: #b8902a;
  padding-left: 8px;
}

/* Subgroup styles (kept for backwards compat, not used in curated mode) */
.ra-mega-dropdown__subgroup { margin-bottom: 14px; }
.ra-mega-dropdown__subgroup-title {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1a2744;
  text-decoration: none;
  margin-bottom: 5px;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--ra-gold, #c9a84c);
  transition: color 0.13s ease;
}
.ra-mega-dropdown__subgroup-title:hover { color: var(--ra-gold, #c9a84c); }
.ra-mega-dropdown__subgroup-link {
  display: flex;
  align-items: center;
  padding: 4px 0;
  font-size: 12.5px;
  color: #4b5563;
  text-decoration: none;
  transition: color 0.13s ease, padding-left 0.13s ease;
  line-height: 1.4;
}
.ra-mega-dropdown__subgroup-link:hover { color: var(--ra-gold, #c9a84c); padding-left: 4px; }
.ra-mega-dropdown__subgroup-view-all {
  display: inline-block;
  margin-top: 5px;
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  text-decoration: none;
  transition: color 0.13s ease;
}
.ra-mega-dropdown__subgroup-view-all:hover { color: var(--ra-gold, #c9a84c); }

/* ─── 2.20.5  Zone 3: Secondary discovery (right of zone2) ─────────────── */
.ra-mega-zone3 {
  flex: 1 1 auto;
  padding-left: 24px;
  min-width: 0;
}
.ra-mega-zone3__divider { display: none; } /* hidden — zone3 is now side-by-side with zone2 */
.ra-mega-zone3__groups {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ra-mega-zone3__group { min-width: 140px; }
.ra-mega-zone3__label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9ca3af;
  margin-bottom: 6px;
}
.ra-mega-zone3__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ra-mega-zone3__list li { white-space: nowrap; }
.ra-mega-zone3__link {
  font-size: 12.5px;
  color: #374151;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.13s ease;
}
.ra-mega-zone3__link:hover { color: var(--ra-gold, #c9a84c); }

/* ─── 2.20.6  Zone 4: Promo strip — BOTTOM, full-width ─────────────────── */
.ra-mega-zone4 {
  grid-area: zone4;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  background: #f8f9fb;
  border-top: 1px solid #e8eaed;
  border-radius: 0 0 6px 6px;
}
.ra-mega-zone4__icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}
.ra-mega-zone4__content {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: wrap;
}
.ra-mega-zone4__badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1a2744;
  background: rgba(201,168,76,0.15);
  border: 1px solid rgba(201,168,76,0.4);
  padding: 2px 7px;
  border-radius: 100px;
  flex-shrink: 0;
}
.ra-mega-zone4__heading {
  font-size: 13px;
  font-weight: 700;
  color: #1a2744;
  white-space: nowrap;
}
.ra-mega-zone4__sub {
  font-size: 11.5px;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ra-mega-zone4__cta {
  flex-shrink: 0;
  display: inline-block;
  padding: 6px 14px;
  background: #1a2744;
  color: #c9a84c;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 4px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.ra-mega-zone4__cta:hover {
  background: #c9a84c;
  color: #1a2744;
}
.ra-mega-dropdown__brands { grid-area: brands; }

/* =============================================================================
   SECTION 3: MOBILE CSS
   Breakpoint: ≤1024px
   The existing .ra-mobile-nav drawer is reused — it slides in from left.
   The #ra-category-nav (desktop bar) is hidden.
   Mobile drawer: MidwayUSA-style drill-in (stacked panel) navigation.
   ============================================================================= */

/* ── 3.1 Hide desktop nav bar on mobile ─────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Desktop nav bar hidden — hamburger toggles .ra-mobile-nav drawer instead */
  .ra-category-nav          { display: none !important; }
  .ra-category-nav::after   { display: none !important; }

  /* Ensure mega dropdowns never render on mobile (belt-and-suspenders) */
  .ra-mega-dropdown         { display: none !important; }
  .ra-nav-chevron           { display: none !important; }
}

/* ── 3.2 Mobile drawer: base state (already defined, we enhance) ─────────────── */
@media (max-width: 1024px) {

  /* Drawer dimensions and transition */
  .ra-mobile-nav {
    position: fixed;
    top: 0;
    left: -100%;              /* hidden off-screen left */
    width: 320px;
    max-width: 88vw;
    height: 100vh;
    height: 100dvh;           /* dynamic viewport height for mobile browsers */
    background: var(--ra-navy-dark, #111b33);
    z-index: 100000;          /* above everything including mini-cart overlay */
    overflow-y: auto;
    overflow-x: hidden;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    visibility: hidden;
    will-change: left;
    overscroll-behavior: contain; /* prevent scroll chaining to body */
    -webkit-overflow-scrolling: touch;
  }

  /* Open state: slide in */
  .ra-mobile-nav.is-open,
  .ra-mobile-nav.open {       /* support both class names for backward compat */
    left: 0;
    visibility: visible;
  }

  /* ── 3.3 Mobile overlay (already exists as #ra-mobile-overlay) ─────────────── */
  .ra-mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    z-index: 99999;            /* just below drawer (100000) */
    cursor: pointer;
    /* Fade in */
    opacity: 0;
    transition: opacity 0.25s ease;
  }
  .ra-mobile-overlay.is-open,
  .ra-mobile-overlay.open {
    display: block;
    opacity: 1;
  }

  /* ── 3.4 Body scroll lock class (JS adds .nav-open to <body>) ────────────────── */
  body.nav-open {
    overflow: hidden !important;
    /* Prevent width shift from scrollbar disappearing */
    padding-right: var(--ra-scrollbar-w, 0px);
  }

  /* ── 3.5 Drawer header ─────────────────────────────────────────────────────── */
  .ra-mobile-nav__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px 14px;
    background: linear-gradient(135deg, #0f1929 0%, #1a2744 100%);
    border-bottom: 2px solid rgba(201,168,76,0.25);
    position: sticky;         /* stays at top when scrolling categories */
    top: 0;
    z-index: 2;
  }

  .ra-mobile-nav__header-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--ra-gold, #c9a84c);
    text-transform: uppercase;
    letter-spacing: 1.5px;
  }

  /* Close button */
  .ra-mobile-nav__close {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.8);
    font-size: 20px;
    line-height: 1;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s ease, color 0.15s ease;
    padding: 0;
    flex-shrink: 0;
  }
  .ra-mobile-nav__close:hover,
  .ra-mobile-nav__close:focus-visible {
    background: rgba(201,168,76,0.15);
    color: var(--ra-gold, #c9a84c);
    outline: none;
  }

  /* ── 3.6 Mobile nav items list container ─────────────────────────────────────
     The #ra-category-nav items are injected into .ra-mobile-nav by JS.
     The .ra-nav-item elements are read by JS to build drill-in rows. ──────── */

  /* Each nav item row */
  .ra-mobile-nav .ra-nav-item {
    display: block;            /* override inline-flex from desktop */
    border-bottom: 1px solid rgba(255,255,255,0.07);
    position: relative;
  }

  /* Top-level category link row */
  .ra-mobile-nav .ra-category-nav__link {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important; /* left-align on mobile */
    gap: 10px !important;
    padding: 14px 18px !important;
    color: rgba(255,255,255,0.88) !important;
    font-size: 13px !important;             /* larger than 9.5px desktop */
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    white-space: normal !important;         /* allow wrapping on mobile */
    text-decoration: none !important;
    border-bottom: none !important;         /* no underline indicator on mobile */
    border-left: 3px solid transparent;
    margin-bottom: 0 !important;
    transition: background 0.15s ease, border-left-color 0.15s ease, color 0.15s ease !important;
    flex: none !important;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative;
  }

  .ra-mobile-nav .ra-category-nav__link:hover,
  .ra-mobile-nav .ra-category-nav__link:focus-visible {
    background: rgba(255,255,255,0.05) !important;
    border-left-color: var(--ra-gold, #c9a84c) !important;
    color: #ffffff !important;
    outline: none !important;
  }

  /* Active/open state on mobile row */
  .ra-mobile-nav .ra-nav-item.is-open > .ra-category-nav__link {
    background: rgba(201,168,76,0.1) !important;
    border-left-color: var(--ra-gold, #c9a84c) !important;
    color: var(--ra-gold, #c9a84c) !important;
  }

  /* Category icon: slightly larger on mobile */
  .ra-mobile-nav .ra-category-nav__link > svg:first-child {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
    opacity: 0.9 !important;
    fill: var(--ra-gold, #c9a84c) !important;
  }

  /* ── 3.7 Mobile chevron: replaces the dropdown chevron with a toggle indicator
     The .ra-nav-chevron SVG is hidden in the drill-in system (not used).
     JS rotates it via the .is-open class. ───────────────────────────────────── */
  .ra-mobile-nav .ra-nav-chevron {
    display: block !important;  /* show on mobile (desktop hides at 1024px) */
    width: 16px !important;
    height: 16px !important;
    margin-left: auto !important;  /* push to far right */
    flex-shrink: 0 !important;
    opacity: 0.6;
    transition: transform 0.22s ease, opacity 0.15s ease !important;
    position: static !important;
  }
  .ra-mobile-nav .ra-nav-item.is-open .ra-nav-chevron {
    transform: rotate(180deg) !important;
    opacity: 1 !important;
  }

  /* ── 3.8 DRILL-IN VIEWPORT & TRACK ────────────────────────────────────────
     JS creates .ra-drill-viewport inside .ra-mobile-nav after the header.
     .ra-drill-track holds all panels side-by-side; translateX slides them. */
  .ra-drill-viewport {
    flex: 1 1 auto;
    overflow: hidden;
    position: relative;
    /* Fill remaining drawer height below header+search+quicklinks */
    min-height: 0;
  }

  .ra-drill-track {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
  }

  /* ── 3.9 DRILL PANELS ────────────────────────────────────────────────────── */
  .ra-drill-panel {
    min-width: 100%;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    flex-shrink: 0;
  }

  /* ── 3.10 DRILL ROWS ─────────────────────────────────────────────────────── */
  .ra-drill-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    min-height: 52px;
  }

  .ra-drill-row--view-all {
    background: rgba(201, 168, 76, 0.06);
    border-bottom: 1px solid rgba(201, 168, 76, 0.15);
  }

  /* ── 3.11 DRILL ROW LINKS ────────────────────────────────────────────────── */
  .ra-drill-row__link {
    flex: 1 1 auto;
    padding: 14px 16px 14px 20px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.88);
    text-decoration: none;
    line-height: 1.3;
    transition: color 0.15s ease, background 0.15s ease;
    /* Ensure tap target is full row height */
    display: flex;
    align-items: center;
    min-height: 52px;
  }

  .ra-drill-row__link:hover,
  .ra-drill-row__link:focus-visible {
    color: var(--ra-gold, #c9a84c);
    background: rgba(255, 255, 255, 0.04);
    outline: none;
  }

  /* "View All Category →" link style */
  .ra-drill-row__view-all {
    font-size: 12px;
    font-weight: 700;
    color: var(--ra-gold, #c9a84c) !important;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 12px 16px 12px 20px;
    min-height: 44px;
  }

  /* L3 links: slightly smaller, indented */
  .ra-drill-row__link--l3 {
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.75);
    padding-left: 26px;
  }

  /* ── 3.12 DRILL ARROW BUTTON ─────────────────────────────────────────────── */
  .ra-drill-row__arrow {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    padding: 0;
    flex-shrink: 0;
  }

  .ra-drill-row__arrow:hover,
  .ra-drill-row__arrow:focus-visible {
    background: rgba(201, 168, 76, 0.1);
    color: var(--ra-gold, #c9a84c);
    outline: none;
  }

  /* ── 3.13 DRILL HEADER: BACK BUTTON + DYNAMIC TITLE ─────────────────────── */
  /* Back button is injected by JS as first child of .ra-mobile-nav__header */
  .ra-drill-back {
    display: flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 10px 8px 4px;
    transition: color 0.15s ease;
    flex-shrink: 0;
    white-space: nowrap;
  }

  .ra-drill-back:hover,
  .ra-drill-back:focus-visible {
    color: var(--ra-gold, #c9a84c);
    outline: none;
  }

  /* Dynamic title injected by JS — centered between back btn and close btn */
  .ra-drill-title {
    flex: 1 1 auto;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 4px;
  }

  /* When back button is visible, rebalance header layout */
  .ra-mobile-nav__header:has(.ra-drill-back:not([hidden])) {
    display: flex;
    align-items: center;
  }

  /* ── 3.14 MOBILE NAV FLEX LAYOUT: stack header + drill viewport ──────────── */
  .ra-mobile-nav {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Drill viewport fills remaining space */
  .ra-drill-viewport {
    flex: 1 1 auto;
    overflow: hidden;
  }

  /* Shell sections below the drill viewport stay at natural height */
  .ra-mobile-nav > div[style] {
    flex: 0 0 auto;
  }

  /* ── 3.13 No-dropdown items (Holsters, New Arrivals, Today's Deals) ─────────── */
  .ra-mobile-nav .ra-nav-item:not(.ra-nav-item--has-dropdown) .ra-category-nav__link {
    /* These navigate directly — no chevron, no accordion panel */
    padding-right: 18px !important;
  }
  /* Ensure no chevron shows on non-dropdown items */
  .ra-mobile-nav .ra-nav-item:not(.ra-nav-item--has-dropdown) .ra-nav-chevron {
    display: none !important;
  }

  /* ── 3.14 Today's Deals special styling in mobile drawer ────────────────────── */
  .ra-mobile-nav .ra-category-nav__link.ra-deals {
    background: var(--ra-gold, #c9a84c) !important;
    color: var(--ra-navy, #1a2744) !important;
    border-left-color: transparent !important;
    font-weight: 800 !important;
    margin: 10px 14px !important;
    border-radius: 6px !important;
    padding: 12px 18px !important;
    width: calc(100% - 28px) !important;
    justify-content: center !important;
  }
  .ra-mobile-nav .ra-category-nav__link.ra-deals:hover {
    background: var(--ra-gold-light, #e2c06e) !important;
  }

  /* ── 3.15 Hamburger: animated to X when nav is open ──────────────────────────── */
  /* The hamburger already lives in header.php as .ra-hamburger
     JS adds .is-active to it when nav opens */
  .ra-hamburger.is-active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .ra-hamburger.is-active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }
  .ra-hamburger.is-active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

} /* end @media (max-width: 1024px) */


/* =============================================================================
   SECTION 5: ACCESSIBILITY
   These rules apply at ALL breakpoints.
   ============================================================================= */

/* ── 5.1 Skip-focus outline for all interactive nav elements ─────────────────── */
.ra-category-nav *:focus {
  outline: none; /* remove default — we use focus-visible below */
}
.ra-category-nav *:focus-visible {
  outline: 2px solid var(--ra-gold, #c9a84c);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── 5.2 Visually-hidden utility (for screen-reader-only text) ───────────────── */
.ra-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── 5.3 Reduced motion: respect user preference ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ra-mega-dropdown,
  .ra-mobile-nav,
  .ra-drill-track,
  .ra-drill-panel,
  .ra-nav-chevron,
  .ra-hamburger span {
    transition: none !important;
    animation: none !important;
  }
}