/* ══════════════════════════════════════════════════════════════════════════
   Mobile drill-down v4 — branded nav drawer.
   --mob-accent: injected by JS from topbar background-color.
   Arrow button styles are @media-scoped. Panel styles are global (panels
   only created by our JS on mobile).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Ensure nav is visible when mobile drawer is open ───────────────────── */
@media (max-width: 992px) {
  body.mobile-toggled .main-navigation {
    display: block !important;
  }
  .col-full-nav .primary-navigation > .menu-primary-menu-container:not(.shoptimizer-mobile-menu) {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   BRANDED NAV DRAWER — mobile only
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Brand strip at top — white bg, accent bottom border ───────────────── */
  .empire-nav-brand {
    background: #fff;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    border-bottom: 3px solid var(--mob-accent, #ddd);
    min-height: 50px;
  }
  .empire-nav-logo {
    height: 28px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    display: block;
  }

  /* ── Base item reset — tighter, sharper ────────────────────────────────── */
  [id^="menu-mobile"] > li > a {
    padding: 15px 20px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #111 !important;
    border-bottom: 1px solid #f0f0f0 !important;
    letter-spacing: -0.1px !important;
    line-height: 1.3 !important;
  }

  /* ── Section label — "Shop by Profile" ─────────────────────────────────── */
  .empire-nav-section-label {
    list-style: none;
    padding: 14px 20px 6px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 1.8px !important;
    text-transform: uppercase !important;
    color: #aaa !important;
    pointer-events: none;
    border-bottom: none !important;
    background: transparent !important;
    line-height: 1 !important;
  }

  /* ── Section separator before Support — empty space only, no line ──────── */
  .empire-nav-sep {
    list-style: none;
    border: none !important;
    margin: 0 !important;
    padding: 20px 0 0 !important;
    pointer-events: none;
    background: transparent !important;
  }

  /* ── Shop All — branded CTA pill ────────────────────────────────────────── */
  [id^="menu-mobile"] li.empire-shopall-item {
    margin: 10px 14px 8px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: var(--mob-accent, #111) !important;
    border-bottom: none !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.18) !important;
    position: relative !important;
  }
  [id^="menu-mobile"] li.empire-shopall-item > a {
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    padding: 15px 18px !important;
    border-bottom: none !important;
    background: transparent !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
  }
  [id^="menu-mobile"] li.empire-shopall-item .empire-drill-arrow {
    border-left-color: rgba(255,255,255,0.2) !important;
    color: rgba(255,255,255,0.8) !important;
  }
  [id^="menu-mobile"] li.empire-shopall-item .empire-drill-arrow:active {
    background: rgba(255,255,255,0.12) !important;
  }

  /* ── Shop by Persona — accent left border, sub-menu always hidden ──────── */
  /* Sub-menu is accessed via drill panel, never native dropdown */
  [id^="menu-mobile"] li.empire-shopby-item > .sub-menu,
  [id^="menu-mobile"] li.empire-shopby-item > .sub-menu-wrapper,
  [id^="menu-mobile"] li.empire-shopall-item > .sub-menu,
  [id^="menu-mobile"] li.empire-shopall-item > .sub-menu-wrapper {
    display: none !important;
  }
  [id^="menu-mobile"] li.empire-shopby-item {
    border-left: 3px solid var(--mob-accent, #888) !important;
  }
  [id^="menu-mobile"] li.empire-shopby-item > a {
    font-weight: 600 !important;
    padding-left: 18px !important;
    color: #111 !important;
  }
  [id^="menu-mobile"] li.empire-shopby-item .empire-drill-arrow {
    color: var(--mob-accent, #888) !important;
  }
  [id^="menu-mobile"] li.empire-shopby-item .empire-drill-arrow:active {
    background: #f8f8f8 !important;
  }

  /* ── Support item — secondary/muted ────────────────────────────────────── */
  [id^="menu-mobile"] li.empire-support-item {
    border-left: none !important;
  }
  [id^="menu-mobile"] li.empire-support-item > a {
    color: #888 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
  }
  [id^="menu-mobile"] li.empire-support-item .empire-drill-arrow {
    color: #ccc !important;
  }

  /* ── Arrow button — right side of parent row ────────────────────────────── */
  [id^="menu-mobile"] li.menu-item-has-children {
    position: relative !important;
  }
  [id^="menu-mobile"] li.menu-item-has-children > a {
    padding-right: 52px !important;
    display: block !important;
  }
  [id^="menu-mobile"] .menu-item-has-children > .caret {
    display: none !important;
  }

  [id^="menu-mobile"] .empire-drill-arrow {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    height: 100% !important;
    min-height: 44px !important;
    width: 52px !important;
    background: transparent !important;
    border: none !important;
    border-left: 1px solid #efefef !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #bbb !important;
    z-index: 2 !important;
    -webkit-tap-highlight-color: transparent;
    padding: 0 !important;
    margin: 0 !important;
  }
  [id^="menu-mobile"] .empire-drill-arrow svg {
    width: 18px !important;
    height: 18px !important;
  }
  [id^="menu-mobile"] .empire-drill-arrow:active {
    background: #f5f5f5 !important;
    color: #555 !important;
  }

  /* ── Footer always at bottom of drawer ─────────────────────────────────── */
  .col-full-nav .shoptimizer-primary-navigation.col-full {
    min-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .col-full-nav .mobile-extra {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .mobile-extra .widget:last-child {
    margin-top: auto !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 10 !important;
    background: #fff !important;
    border-top: 1px solid #efefef !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   DRILL-DOWN PANELS — no media query (only created by JS on mobile)
   ══════════════════════════════════════════════════════════════════════════ */

/* Full-screen panel: starts off-screen right, slides in */
.empire-drill-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: #fafaf9;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(.25,.8,.25,1);
}
.empire-drill-panel.empire-panel-in {
  transform: translateX(0);
}
@media (prefers-reduced-motion: reduce) {
  .empire-drill-panel { transition: none; }
}

/* Sticky back button */
.empire-drill-back {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 15px 20px;
  font-size: 13px;
  font-weight: 700;
  color: #333;
  background: var(--mob-accent, #f5f5f5);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  cursor: pointer;
  user-select: none;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  -webkit-tap-highlight-color: transparent;
  /* White text on brand color */
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.empire-drill-back svg { flex: 0 0 18px; width: 18px; height: 18px; }
.empire-drill-back:active { filter: brightness(0.92); }

/* Items list inside panel */
.empire-drill-items {
  list-style: none;
  margin: 0;
  padding: 0;
}
.empire-drill-item {
  position: relative;
  border-bottom: 1px solid #f3f3f3;
}
.empire-drill-item > a {
  display: block;
  padding: 15px 20px;
  font-size: 15px;
  font-weight: 500;
  color: #222;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.empire-drill-item.has-sub > a {
  padding-right: 56px;
}
.empire-drill-item > a:active { background: #f8f8f8; }

/* Arrow button inside panels */
.empire-drill-item .empire-drill-arrow {
  position: absolute;
  top: 0; right: 0;
  height: 100%;
  min-height: 44px;
  width: 52px;
  background: transparent;
  border: none;
  border-left: 1px solid #efefef;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mob-accent, #bbb);
  -webkit-tap-highlight-color: transparent;
  padding: 0;
}
.empire-drill-item .empire-drill-arrow svg { width: 18px; height: 18px; }
.empire-drill-item .empire-drill-arrow:active { background: #f5f5f5; }