/* ============================================================
   BCD Nav — frontend (v0.6 layout)
   Two-row desktop bar + dark/light theming + image columns + mobile drawer.
   ============================================================ */

.bcd-nav {
  /* container query: lets the admin preview show mobile styling when constrained */
  container-type: inline-size;

  /* ----- default theme variables (light) — overridden per .is-theme-* class ----- */
  --bcd-bar-bg: #ffffff;
  --bcd-bar-fg: #1a1a1a;
  --bcd-bar-hover: #8FB832;
  --bcd-bar-border: #e5e5e5;
  --bcd-secondary-fg: #666;
  --bcd-secondary-divider: #cccccc;

  --bcd-panel-bg: #2d2d2d;       /* design default: dark mega panel */
  --bcd-panel-text: #dddddd;
  --bcd-panel-heading: #ffffff;
  --bcd-panel-divider: #4a4a4a;
  --bcd-panel-hover: #8FB832;

  --bcd-accent: #8FB832;
  --bcd-cta-bg: #8FB832;
  --bcd-cta-fg: #ffffff;
  --bcd-cta-hover-bg: #7da524;

  --bcd-border: #e5e5e5;
  --bcd-shadow: 0 8px 24px rgba(0,0,0,0.10);

  --bcd-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --bcd-item-size: 15px;
  --bcd-item-weight: 700;
  --bcd-item-tracking: 0.04em;
  --bcd-item-transform: uppercase;
  --bcd-bar-pad-y: 16px;
  --bcd-panel-radius: 0px;

  position: relative;
  z-index: 2147483647;       /* max 32-bit int: sit on top of EVERYTHING (sticky theme widgets, modals, chat bubbles) */
  isolation: isolate;
  background: var(--bcd-bar-bg);
  color: var(--bcd-bar-fg);
  border-bottom: 1px solid var(--bcd-bar-border);
  font-family: var(--bcd-font);
}
.bcd-nav, .bcd-nav * { line-height: 1.4; box-sizing: border-box; }
.bcd-nav.is-sticky { position: sticky; top: 0; }

/* ============================================================
   ALERT BANNER — thin promo strip above/below the bar
   Theme-inverted by default: light theme → dark banner, dark theme → light banner.
   The per-banner inline colours are kept as overrides but the theme-aware defaults
   provide the contrast pattern out of the box.
   ============================================================ */
.bcd-nav__alert {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 10px 24px;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-align: center;
  margin: 0;
  border: 0 !important;        /* defensive: themes can add their own borders to wrapping elements */
  box-shadow: none;
}

/* Banner is brand-constant: always black bar with white text in both themes.
   High-specificity selectors so they beat any inline background/color emitted
   by the template. Users wanting a different banner can still set bg/text via
   the Banner tab — those inline styles still win over these. */
.bcd-nav.is-theme-light .bcd-nav__alert,
.bcd-nav.is-theme-dark  .bcd-nav__alert,
.bcd-nav--mobile-portal.is-theme-light .bcd-nav__alert,
.bcd-nav--mobile-portal.is-theme-dark  .bcd-nav__alert {
  background: #000000;
  color: #ffffff;
}
.bcd-nav__alert-close { color: #ffffff; }
.bcd-nav__alert-inner {
  position: relative;
  min-height: 18px;
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap;
  gap: 0 4px;
}

/* ===== rotate mode ===== messages stack absolutely, fade between */
.bcd-nav__alert--rotate .bcd-nav__alert-msg {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity 0.35s ease;
  padding: 0 8px;
}
.bcd-nav__alert--rotate .bcd-nav__alert-msg.is-active {
  position: relative;
  opacity: 1; visibility: visible;
}

/* ===== inline mode ===== messages flow in a single row with separator chips */
.bcd-nav__alert--inline .bcd-nav__alert-msg {
  display: inline-flex; align-items: center;
  padding: 0;
}
.bcd-nav__alert-sep {
  opacity: 0.5;
  padding: 0 2px;
  user-select: none;
}
.bcd-nav__alert a {
  color: var(--bcd-alert-link, currentColor) !important;
  font-weight: 700;
  text-decoration: none;
}
.bcd-nav__alert a:hover { opacity: 0.85; text-decoration: none; }

/* Banner stays black in both themes now, so the saved link colour (typically
   white) reads correctly in light AND dark mode — no theme override needed. */
.bcd-nav__alert-close {
  position: absolute; right: 8px; top: 50%;
  transform: translateY(-50%);
  background: transparent; border: 0;
  color: inherit;
  font-size: 22px; line-height: 1;
  cursor: pointer; padding: 4px 10px;
  opacity: 0.7;
}
.bcd-nav__alert-close:hover { opacity: 1; }
.bcd-nav.is-alert-dismissed .bcd-nav__alert { display: none; }
@container (max-width: 900px) {
  /* Hide the standalone alert strip on mobile — its messages move into the
     drawer (.bcd-nav__drawer-banner) below the CLADDING FINDER CTA. */
  .bcd-nav__alert { display: none; }

  /* Scoped to .bcd-nav so this rule (specificity 0-2-0) beats the default
     `.bcd-nav__drawer-banner { display: none }` (0-1-0) declared later in
     the file. Source order would otherwise pick the later equal-specificity
     rule and keep the banner hidden on mobile too. */
  .bcd-nav .bcd-nav__drawer-banner {
    display: block;
    margin: 0 24px 8px;
    padding: 8px 0 4px;
    color: var(--bcd-panel-heading);
    text-align: center;
    font-size: 13px;
    border-top: 1px solid var(--bcd-panel-divider);
  }
  .bcd-nav .bcd-nav__drawer-banner-item {
    display: block;
    padding: 6px 0;
    color: var(--bcd-panel-heading) !important;     /* beat .bcd-nav__alert a's !important if a theme also matches */
    text-decoration: none;
    font-weight: 500;
  }
  .bcd-nav .bcd-nav__drawer-banner a.bcd-nav__drawer-banner-item:hover { opacity: 0.85; }
}

/* Defensive: themes (notably Divi, Astra, Storefront) inject ::marker/list-style on UL inside
   their main containers. Strip it on every list we own. !important is justified here because
   it's specifically defending against arbitrary theme rules we can't predict. */
.bcd-nav ul, .bcd-nav ol, .bcd-nav li {
  list-style: none !important;
  margin: 0; padding: 0;
}
.bcd-nav ul li::marker,
.bcd-nav ol li::marker { content: '' !important; }
.bcd-nav ul li::before { content: none; }     /* clear any inherited ::before bullets */

/* ----- THEMES -----
 * Theme variables are now emitted per-nav by the renderer's style_vars(), scoped to
 * .is-theme-light / .is-theme-dark / .is-theme-auto. That way the user's customised
 * Light-mode colours (Style tab) can't accidentally override the hardcoded Dark palette
 * when the visitor toggles. See class-renderer.php :: style_vars().
 *
 * Fallbacks for navs rendered before the inline <style> block has loaded (rare):
 */
.bcd-nav.is-theme-dark {
  --bcd-shadow: 0 8px 24px rgba(0,0,0,0.40);
}

/* ============================================================
   THE BAR — two-row desktop layout
   ============================================================ */
.bcd-nav__bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
  padding: var(--bcd-bar-pad-y) 24px;
  max-width: 1400px;
  margin: 0 auto;
}

/* Logo */
.bcd-nav__logo a, .bcd-nav__logo img { display: block; }
.bcd-nav__logo-text { font-weight: 700; text-decoration: none; color: inherit; font-size: 18px; }
.bcd-nav__logo img,
.bcd-nav__logo .bcd-nav__logo-img { max-height: 60px; width: auto; height: auto; }
.bcd-nav__logo-link { display: inline-block; line-height: 0; }
/* In dark mode, invert the logo to white (unless the user has marked it with
   .bcd-nav__logo-img--invert-off to opt out, e.g. for already-white logos) */
.bcd-nav.is-theme-dark .bcd-nav__logo img:not(.bcd-nav__logo-img--invert-off),
.bcd-nav.is-theme-auto .bcd-nav__logo img:not(.bcd-nav__logo-img--invert-off) {
  filter: none;
}
.bcd-nav.is-theme-dark .bcd-nav__logo img:not(.bcd-nav__logo-img--invert-off) {
  filter: brightness(0) invert(1);
}
@media (prefers-color-scheme: dark) {
  .bcd-nav.is-theme-auto:not(.is-theme-light) .bcd-nav__logo img:not(.bcd-nav__logo-img--invert-off) {
    filter: brightness(0) invert(1);
  }
}

/* Center stack: top row (search + CTA), bottom row (menu items) */
.bcd-nav__center {
  display: flex; flex-direction: column;
  gap: 12px;
  align-items: center;
  min-width: 0;
}
.bcd-nav__center-top {
  display: flex; align-items: center; gap: 16px;
  width: 100%; max-width: 560px;
  justify-content: center;
}

/* Search field */
.bcd-nav__search {
  flex: 1; max-width: 320px;
  position: relative;
}
.bcd-nav__search-input {
  width: 100%;
  padding: 10px 40px 10px 14px;
  font-size: 14px; font-family: inherit;
  border: 1px solid var(--bcd-bar-border);
  background: var(--bcd-bar-bg);
  color: var(--bcd-bar-fg);
  border-radius: 2px;
}
.bcd-nav__search-input:focus { outline: none; border-color: var(--bcd-accent); }
.bcd-nav__search-submit {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: transparent; border: 0;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--bcd-bar-fg);
}
.bcd-nav__search-panel {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--bcd-bar-bg);
  border: 1px solid var(--bcd-bar-border);
  box-shadow: var(--bcd-shadow);
  z-index: 2147483646;        /* max-int region — beats Divi's z:2 column cap */
  max-height: 70vh; overflow: auto;
}
.bcd-nav__search-panel[hidden] { display: none; }

/* Primary CTA button */
.bcd-nav__cta {
  display: inline-flex; align-items: center;
  padding: 10px 18px;
  background: var(--bcd-cta-bg); color: var(--bcd-cta-fg);
  text-decoration: none;
  font-weight: 700; font-size: 13px;
  letter-spacing: 0.05em; text-transform: uppercase;
  border-radius: 2px;
  white-space: nowrap;
  transition: background 0.15s ease;
}
.bcd-nav__cta:hover { background: var(--bcd-cta-hover-bg); color: var(--bcd-cta-fg); }
.bcd-nav__cta--mobile { display: none; }

/* Main menu items (bottom row of center stack) */
.bcd-nav__items {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 32px; align-items: center; justify-content: center;
}
.bcd-nav__item { position: static; }
.bcd-nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 0;
  text-decoration: none; color: var(--bcd-bar-fg);
  font-weight: var(--bcd-item-weight);
  font-size: var(--bcd-item-size);
  text-transform: var(--bcd-item-transform);
  letter-spacing: var(--bcd-item-tracking);
  transition: color 0.15s ease;
}
.bcd-nav__link:hover { color: var(--bcd-bar-hover); }
.bcd-nav__caret { display: none; }
.bcd-nav__item.is-open .bcd-nav__caret {
  display: inline-block;
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 7px solid var(--bcd-accent);
  margin-bottom: -2px;
  margin-left: 2px;
}

/* Actions stack: top row (cart + theme toggle + hamburger), bottom row (secondary nav) */
.bcd-nav__actions { display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }
.bcd-nav__actions-top { display: flex; align-items: center; gap: 14px; }

.bcd-nav__icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0;
  width: 36px; height: 36px;
  color: inherit; cursor: pointer; text-decoration: none;
  position: relative;
}
.bcd-nav__icon-btn:hover { color: var(--bcd-bar-hover); }

.bcd-nav__cart-count {
  position: absolute; top: -2px; right: -4px;
  background: var(--bcd-accent); color: #fff;
  font-size: 10px; min-width: 16px; height: 16px;
  border-radius: 8px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1; font-weight: 700;
}

/* Theme toggle — sun/moon icon button */
.bcd-nav__theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: transparent; border: 0; padding: 0;
  cursor: pointer; color: inherit;
  border-radius: 50%;
  transition: background 0.15s ease, color 0.15s ease, transform 0.2s ease;
}
.bcd-nav__theme-toggle:hover {
  color: var(--bcd-bar-hover);
  background: rgba(143, 184, 50, 0.10);
}
.bcd-nav__theme-toggle:active { transform: scale(0.92); }
.bcd-nav__theme-icon { display: none; }
/* Light theme → show moon (click switches to dark) */
.bcd-nav.is-theme-light .bcd-nav__theme-icon--moon { display: block; }
/* Dark theme → show sun (click switches to light) */
.bcd-nav.is-theme-dark .bcd-nav__theme-icon--sun { display: block; }
/* Auto (no explicit choice yet) → show moon by default */
.bcd-nav.is-theme-auto .bcd-nav__theme-icon--moon { display: block; }

/* Secondary nav (Basket | Checkout | Login/Out) */
.bcd-nav__secondary {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--bcd-secondary-fg);
}
.bcd-nav__secondary li { display: flex; align-items: center; gap: 10px; }
.bcd-nav__secondary li + li::before {
  content: "|"; color: var(--bcd-secondary-divider);
  padding-right: 6px;
}
.bcd-nav__secondary a {
  color: inherit; text-decoration: none;
}
.bcd-nav__secondary a:hover { color: var(--bcd-bar-hover); }
/* In-drawer secondary nav is hidden on desktop (the bar copy is the one used) */
.bcd-nav__secondary--in-drawer { display: none; }

/* The drawer-logo only appears inside the open mobile drawer */
.bcd-nav__drawer-logo { display: none; }

/* The in-drawer banner list is mobile-only too */
.bcd-nav__drawer-banner { display: none; }

/* The drawer-scoped theme toggle is mobile-only (the bar has its own copy) */
.bcd-nav__theme-toggle--drawer { display: none; }

/* Hamburger (mobile only) */
.bcd-nav__hamburger {
  display: none;
  flex-direction: column; justify-content: center;
  gap: 5px;
  width: 32px; height: 32px;
  background: none; border: 0;
  padding: 0; cursor: pointer;
}
.bcd-nav__hamburger span {
  display: block;
  width: 22px; height: 2px;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease;
  transform-origin: center;
}
.bcd-nav.is-mobile-open .bcd-nav__hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.bcd-nav.is-mobile-open .bcd-nav__hamburger span:nth-child(2) { opacity: 0; }
.bcd-nav.is-mobile-open .bcd-nav__hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   MEGA PANEL — image columns + text columns
   ============================================================ */
.bcd-nav__dropdown {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--bcd-panel-bg) !important;     /* defend against theme bg overrides */
  color: var(--bcd-panel-text);
  border-radius: 0 0 var(--bcd-panel-radius) var(--bcd-panel-radius);
  box-shadow: var(--bcd-shadow);
  z-index: 2147483646;                            /* essentially the top */
  opacity: 1 !important;
  transform: translateZ(0);                       /* force own GPU layer / stacking context */
  isolation: isolate;
}
.bcd-nav__dropdown[hidden] { display: none; }

.bcd-nav__dropdown--simple {
  left: auto; right: auto;
  min-width: 240px; width: auto;
}

.bcd-nav__dropdown-inner {
  max-width: 1400px; margin: 0 auto;
  padding: 36px 24px;
}

.bcd-nav__cols {
  display: flex; gap: 0;
  align-items: stretch;
}
.bcd-nav__col {
  flex: 1; min-width: 0;
  padding: 0 32px;
  border-left: 1px solid var(--bcd-panel-divider);
}
.bcd-nav__col:first-child { border-left: 0; padding-left: 0; }
.bcd-nav__col--image { flex: 1.4; padding-right: 0; }
.bcd-nav__dropdown--simple .bcd-nav__cols { display: block; padding: 6px 0; }
.bcd-nav__dropdown--simple .bcd-nav__col { padding: 0; border: 0; }

.bcd-nav__col-heading {
  font-weight: 700; font-size: 15px;
  text-transform: none; letter-spacing: 0;
  color: var(--bcd-panel-heading);
  margin-bottom: 18px;
}

/* Text column items */
.bcd-nav__col-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bcd-nav__col-items li { position: relative; }
.bcd-nav__col-items a {
  color: var(--bcd-panel-text); text-decoration: none;
  font-size: 14px; display: inline-block; padding: 2px 0;
  transition: color 0.15s ease;
}
.bcd-nav__col-items a:hover { color: var(--bcd-panel-hover); }

.bcd-nav__col-subheading {
  font-weight: 700; font-size: 14px;
  color: var(--bcd-panel-heading);
  padding-top: 10px;
}
.bcd-nav__col-subheading:first-child { padding-top: 0; }

.bcd-nav__dropdown--simple .bcd-nav__col-items li { padding: 0 16px; }
.bcd-nav__dropdown--simple .bcd-nav__col-items li a { padding: 4px 0; }

/* Image column */
.bcd-nav__col-image-body {
  display: flex; flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.bcd-nav__col-image-figure { width: 100%; }
.bcd-nav__col-image-img { max-width: 100%; height: auto; display: block; border-radius: 2px; }
.bcd-nav__col-image-desc {
  font-size: 14px; line-height: 1.5;
  color: var(--bcd-panel-text);
  margin: 0;
}
.bcd-nav__col-image-cta {
  display: inline-block;
  padding: 10px 18px;
  background: var(--bcd-cta-bg); color: var(--bcd-cta-fg);
  font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.05em;
  text-decoration: none; border-radius: 2px;
  transition: background 0.15s ease;
}
.bcd-nav__col-image-cta:hover { background: var(--bcd-cta-hover-bg); color: var(--bcd-cta-fg); }

/* Promo card row (legacy from v0.5) */
.bcd-nav__col-items .bcd-nav__col-promo { margin: 10px 0; }
.bcd-nav__col-promo-link {
  display: grid; grid-template-columns: 56px 1fr; gap: 10px; align-items: center;
  padding: 8px;
  border: 1px solid var(--bcd-panel-divider);
  border-radius: 4px;
  text-decoration: none !important; color: inherit !important;
}
.bcd-nav__col-promo-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 3px; }
.bcd-nav__col-promo-title { font-weight: 600; font-size: 13px; }
.bcd-nav__col-promo-price { font-size: 12px; color: var(--bcd-accent); font-weight: 600; }

/* ============================================================
   Search results dropdown
   ============================================================ */
.bcd-nav__search-results { padding: 8px; }
.bcd-nav__search-results .bcd-sr-group { padding: 6px 4px; }
.bcd-nav__search-results .bcd-sr-group-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--bcd-secondary-fg); margin: 8px 0 4px;
}
.bcd-nav__search-results .bcd-sr-item {
  display: flex; gap: 10px; align-items: center;
  padding: 6px; text-decoration: none; color: inherit; border-radius: 3px;
}
.bcd-nav__search-results .bcd-sr-item:hover,
.bcd-nav__search-results .bcd-sr-item.is-active { background: rgba(143,184,50,0.10); }
.bcd-nav__search-results .bcd-sr-thumb {
  width: 36px; height: 36px; background: #eee; flex: 0 0 36px;
  overflow: hidden; border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
}
.bcd-nav__search-results .bcd-sr-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bcd-nav__search-results .bcd-sr-meta { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.bcd-nav__search-results .bcd-sr-title { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bcd-nav__search-results .bcd-sr-price { font-size: 12px; color: var(--bcd-secondary-fg); }
.bcd-nav__search-results .bcd-sr-empty { padding: 12px; text-align: center; font-size: 14px; color: var(--bcd-secondary-fg); }
.bcd-nav__search-results .bcd-sr-all {
  display: block; padding: 10px; text-align: center;
  border-top: 1px solid var(--bcd-bar-border);
  text-decoration: none; color: var(--bcd-accent); font-weight: 700;
}

/* ============================================================
   Backdrop + body lock
   ============================================================ */
.bcd-nav__backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  opacity: 0; visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
  z-index: 2147483645;        /* directly under the drawer */
}
.bcd-nav.is-mobile-open .bcd-nav__backdrop {
  opacity: 1; visibility: visible;
  transition: opacity 0.2s ease, visibility 0s linear 0s;
}

body.bcd-nav-locked {
  position: fixed; width: 100%;
  overflow: hidden; overscroll-behavior: none;
  -webkit-overflow-scrolling: auto;
}
html.bcd-nav-locked { overflow: hidden; }

/* Drawer close button must NEVER show on desktop (we've seen themes that override display:none) */
.bcd-nav__drawer-close { display: none !important; }
.bcd-nav.is-mobile-open .bcd-nav__drawer-close { display: flex !important; }

/* ============================================================
   MOBILE — drawer + accordion (container query for admin preview)
   ============================================================ */
@container (max-width: 900px) {

  /* Mobile bar layout — full-width theme colour (matches desktop), no border.
     Hamburger (left, absolute) — big logo (centre) — cart (right, absolute).
     The bar itself is a plain block with the icons pulled out of flow so the
     logo stays visually centred regardless of icon widths.
     NOTE: keeping the nav container's background (not transparent) so the
     theme colour extends edge-to-edge on mobile as it does on desktop. */
  .bcd-nav { border-bottom: 0; }

  .bcd-nav__bar {
    position: relative;
    display: block;
    max-width: 95%;
    margin: 10px auto;
    padding: 14px 64px;        /* leave room for the absolute icons on both sides */
    background: var(--bcd-bar-bg);
    color: var(--bcd-bar-fg);
    border: 0;
    border-radius: 6px;
    gap: 0;
  }

  /* Centre column hidden in the closed bar — drawer shows its contents */
  .bcd-nav__center { display: none; }
  .bcd-nav__items  { display: none; }
  .bcd-nav__cta:not(.bcd-nav__cta--mobile) { display: none; }

  /* Logo — bigger, perfectly centred via block + margin auto (NOT text-align,
     which would leak into the drawer and centre every link inside it) */
  .bcd-nav__logo {
    display: block;
    width: fit-content;
    margin: 0 auto;
    line-height: 0;
  }
  .bcd-nav__logo a, .bcd-nav__logo-link { display: block; line-height: 0; }
  .bcd-nav__logo img,
  .bcd-nav__logo .bcd-nav__logo-img { max-height: 56px; margin: 0 auto; display: block; }

  /* Promote actions wrappers to display:contents so the cart can be positioned
     absolutely relative to the bar (otherwise it would be relative to actions). */
  .bcd-nav__actions     { display: contents; }
  .bcd-nav__actions-top { display: contents; }

  /* Theme toggle + secondary nav are drawer-only on mobile */
  .bcd-nav__theme-toggle { display: none !important; }
  .bcd-nav__secondary:not(.bcd-nav__secondary--in-drawer) { display: none !important; }

  /* Hamburger: absolute LEFT */
  .bcd-nav__hamburger {
    display: inline-flex !important;
    position: absolute;
    left: 14px; top: 50%;
    transform: translateY(-50%);
    margin: 0;
    color: var(--bcd-bar-fg);
    z-index: 2;
  }
  /* Animated X state retains its translateY(50%) base by re-anchoring */
  .bcd-nav.is-mobile-open .bcd-nav__hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .bcd-nav.is-mobile-open .bcd-nav__hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Cart: absolute RIGHT */
  .bcd-nav__cart {
    position: absolute;
    right: 14px; top: 50%;
    transform: translateY(-50%);
    margin: 0;
    z-index: 2;
  }

  /* On mobile, light-theme bar follows the user's customised colour (white by default).
     Dark theme already inverts everything via the .is-theme-dark rules above. */

  /* Drawer container: slides from the LEFT (pairs with the left-side hamburger) */
  .bcd-nav__center,
  .bcd-nav.is-mobile-open .bcd-nav__center {
    display: none;
  }
  .bcd-nav.is-mobile-open .bcd-nav__center {
    display: flex; flex-direction: column;
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 340px; max-width: 92vw;
    height: 100vh; height: 100svh; height: 100dvh;
    margin: 0; padding: 170px 0 24px;        /* room for the absolute logo + secondary nav stack above the items */
    background: var(--bcd-panel-bg); color: var(--bcd-panel-text);
    box-shadow: 6px 0 24px rgba(0,0,0,0.30);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    z-index: 2147483646;
    animation: bcdSlideInLeft 0.22s ease-out;
    align-items: stretch;
    gap: 0;
  }
  @keyframes bcdSlideInLeft {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
  }

  /* Hide search input in drawer per mobile mockup — search is desktop-only */
  .bcd-nav.is-mobile-open .bcd-nav__center-top { display: none; }

  /* Drawer logo — top-left of the open drawer.
     Drawer bg now matches the bar bg, so logo follows the SAME rule as the
     bar logo:
     - Light theme:  drawer bg white → no filter (full-colour logo)
     - Dark theme:   drawer bg dark  → invert filter (white logo) */
  .bcd-nav__drawer-logo {
    display: block;
    position: absolute;
    top: 20px; left: 24px;
    width: 45%;
    max-width: 160px;
    z-index: 1;
    line-height: 0;
    margin: 0;
  }
  .bcd-nav__drawer-logo a, .bcd-nav__drawer-logo .bcd-nav__logo-link {
    display: block; line-height: 0; width: 100%;
  }
  .bcd-nav__drawer-logo img,
  .bcd-nav__drawer-logo .bcd-nav__logo-img {
    width: 100%; height: auto; max-height: none; display: block;
  }

  /* Light theme: drawer bg is white → keep the original colour logo. */
  .bcd-nav.is-theme-light .bcd-nav__drawer-logo img,
  .bcd-nav--mobile-portal.is-theme-light .bcd-nav__drawer-logo img {
    filter: none;
  }
  /* Dark theme: drawer bg is dark → invert the logo to white. */
  .bcd-nav.is-theme-dark .bcd-nav__drawer-logo img:not(.bcd-nav__logo-img--invert-off),
  .bcd-nav--mobile-portal.is-theme-dark .bcd-nav__drawer-logo img:not(.bcd-nav__logo-img--invert-off) {
    filter: brightness(0) invert(1);
  }
  @media (prefers-color-scheme: dark) {
    .bcd-nav.is-theme-auto:not(.is-theme-light) .bcd-nav__drawer-logo img:not(.bcd-nav__logo-img--invert-off),
    .bcd-nav--mobile-portal.is-theme-auto:not(.is-theme-light) .bcd-nav__drawer-logo img:not(.bcd-nav__logo-img--invert-off) {
      filter: brightness(0) invert(1);
    }
  }

  /* Drawer-scoped theme toggle — top-right corner of the drawer, above the
     secondary nav. Bumps specificity past the bar copy's `display: inline-flex`. */
  .bcd-nav .bcd-nav__theme-toggle--drawer,
  .bcd-nav--mobile-portal .bcd-nav__theme-toggle--drawer {
    display: inline-flex !important;
    position: absolute;
    top: 10px;
    right: 14px;
    z-index: 3;
    width: 44px; height: 44px;     /* bigger tap target — iOS HIG min ≥ 44pt */
    color: var(--bcd-panel-heading);
    background: transparent;
    border: 0;
    cursor: pointer;
    align-items: center; justify-content: center;
    border-radius: 50%;
    padding: 0;
    /* Touch reliability:
       - touch-action: manipulation removes iOS's 300 ms double-tap wait, which
         was making the second press feel dead.
       - tap-highlight transparent suppresses the grey flash that masked the
         press visually.
       - pointer-events on the SVG children: the icons swap display:none/block
         on theme change; without `pointer-events: none` the next tap can land
         on the now-hidden SVG node instead of the button. */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }
  .bcd-nav .bcd-nav__theme-toggle--drawer svg,
  .bcd-nav--mobile-portal .bcd-nav__theme-toggle--drawer svg {
    pointer-events: none;
  }
  /* Hard-coded colours per theme — `var(--bcd-panel-heading)` works in
     theory but if the var hasn't propagated to the portal yet (race during
     openPortal vs. applyTheme), the icon ends up using its initial value
     and looks invisible. Locking to a concrete hex per theme rules it out. */
  .bcd-nav.is-theme-light .bcd-nav__theme-toggle--drawer,
  .bcd-nav--mobile-portal.is-theme-light .bcd-nav__theme-toggle--drawer {
    color: #1a1a1a !important;
  }
  .bcd-nav.is-theme-dark .bcd-nav__theme-toggle--drawer,
  .bcd-nav--mobile-portal.is-theme-dark .bcd-nav__theme-toggle--drawer {
    color: #ffffff !important;
  }

  /* In-drawer secondary nav — pinned top-right, vertical stack, sits BELOW the
     theme toggle. */
  .bcd-nav.is-mobile-open .bcd-nav__secondary--in-drawer {
    position: absolute;
    top: 60px;
    right: 24px;
    z-index: 2;
    display: flex; flex-direction: column;
    align-items: flex-end;
    padding: 0;
    margin: 0; list-style: none; gap: 4px;
    color: var(--bcd-panel-heading);
    font-size: 15px;
  }
  .bcd-nav.is-mobile-open .bcd-nav__secondary--in-drawer li::before { content: none; padding: 0; }
  .bcd-nav.is-mobile-open .bcd-nav__secondary--in-drawer a {
    color: var(--bcd-panel-heading); text-decoration: none; padding: 4px 0;
  }

  /* Drawer items list */
  .bcd-nav.is-mobile-open .bcd-nav__items {
    display: flex; flex-direction: column;
    gap: 0; padding: 0; margin: 0;
    list-style: none;
  }
  .bcd-nav__item {
    width: 100%;
    border-bottom: 1px solid var(--bcd-panel-divider);
  }
  .bcd-nav__link {
    padding: 20px 24px 20px 32px;
    justify-content: space-between;
    width: 100%;
    color: var(--bcd-panel-heading);
    font-size: 18px; font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  /* Force display: flex (not inline-flex) for full-width row */
  .bcd-nav.is-mobile-open .bcd-nav__link {
    display: flex !important;
  }
  /* The + / × icon: make it large and obvious */
  .bcd-nav.is-mobile-open .bcd-nav__caret {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    width: 28px; height: 28px;
    border: 0 !important; transform: none !important; margin: 0;
    color: var(--bcd-panel-heading);
    font-weight: 300;
    background: none !important;
    flex: 0 0 28px;
  }
  .bcd-nav.is-mobile-open .bcd-nav__caret::before {
    content: "+"; font-size: 32px; line-height: 1;
  }
  .bcd-nav.is-mobile-open .bcd-nav__item.is-open > .bcd-nav__link .bcd-nav__caret::before {
    content: "\00d7";    /* × */
    font-size: 32px;
  }

  /* Mobile dropdown — accordion inline, image columns hidden.
     Was hard-coded greys (assumed dark drawer); now uses theme-aware overlays
     so it works on both the white (light theme) and dark (dark theme) drawer. */
  .bcd-nav__dropdown {
    position: static !important;
    box-shadow: none !important;
    border: 0 !important; border-radius: 0 !important;
    background: rgba(0,0,0,0.04) !important;        /* slightly inset from drawer bg */
    animation: none;
  }
  .bcd-nav.is-theme-dark .bcd-nav__dropdown,
  .bcd-nav--mobile-portal.is-theme-dark .bcd-nav__dropdown {
    background: rgba(255,255,255,0.06) !important;  /* invert overlay on dark theme */
  }
  .bcd-nav__dropdown-inner { padding: 0 !important; }
  .bcd-nav__cols { display: block !important; padding: 0; }
  .bcd-nav__col { border: 0 !important; padding: 0; }
  .bcd-nav__col--image { display: none !important; }
  .bcd-nav__col--text { border-bottom: 1px solid var(--bcd-panel-divider); }
  .bcd-nav__col--text:last-child { border-bottom: 0; }

  /* Sub-section heading — collapsible row, sits a notch darker than the dropdown bg */
  .bcd-nav__col-heading {
    margin: 0;
    padding: 16px 24px 16px 32px;
    background: rgba(0,0,0,0.06);
    color: var(--bcd-panel-heading);
    font-weight: 700; font-size: 14px;
    display: flex; align-items: center; justify-content: space-between;
    cursor: pointer;
  }
  .bcd-nav.is-theme-dark .bcd-nav__col-heading,
  .bcd-nav--mobile-portal.is-theme-dark .bcd-nav__col-heading {
    background: rgba(255,255,255,0.10);
  }
  .bcd-nav__col-heading::after {
    content: "+"; font-size: 22px; font-weight: 400; color: var(--bcd-panel-heading);
  }
  .bcd-nav__col.is-open .bcd-nav__col-heading::after { content: "\00d7"; font-size: 26px; }
  .bcd-nav__col:not(.is-open) .bcd-nav__col-items { display: none; }

  /* Specificity note: the early defensive rule `.bcd-nav ul, .bcd-nav ol, .bcd-nav li { padding: 0 }`
     (specificity 0-1-1) beats a bare `.bcd-nav__col-items` (0-1-0), zeroing our indent.
     Scoping to `.bcd-nav .bcd-nav__col-items` (0-2-0) wins and the padding sticks. */
  .bcd-nav .bcd-nav__col-items {
    padding: 14px 24px 14px 52px; gap: 12px;
    background: rgba(0,0,0,0.10);
    list-style: none;
  }
  .bcd-nav.is-theme-dark .bcd-nav__col-items,
  .bcd-nav--mobile-portal.is-theme-dark .bcd-nav__col-items {
    background: rgba(255,255,255,0.14);
  }
  .bcd-nav .bcd-nav__col-items li,
  .bcd-nav .bcd-nav__col-items a { display: block; padding-left: 0; }
  .bcd-nav .bcd-nav__col-items a {
    color: var(--bcd-panel-heading);
    font-size: 14px;
  }

  /* Theme toggle keeps its in-bar position on mobile (no override needed) */

  /* In-drawer CTA — flows under HELP rather than a fixed bottom button.
     Sits as a regular block inside the drawer with a comfy gutter. */
  .bcd-nav__cta--mobile {
    display: block;
    position: static;
    margin: 24px 24px 32px;          /* breathing room around the button */
    padding: 16px 18px;
    text-align: center;
    border-radius: 2px;
    font-size: 16px;
    transform: none;
    transition: none;
    width: auto;
    max-width: none;
  }

  /* Cart count on mobile */
  .bcd-nav__cart-count { background: var(--bcd-accent); }

  /* Close (X) button — floating dark circle just to the RIGHT of the drawer,
     on the dimmed backdrop. Keeps it clear of the in-drawer secondary nav. */
  .bcd-nav__drawer-close {
    position: fixed;
    top: 20px;
    left: calc(min(340px, 92vw) + 12px);
    right: auto;
    width: 40px; height: 40px;
    background: #2D2D2D;
    border: 0;
    border-radius: 50%;
    color: #ffffff;
    cursor: pointer;
    display: none;
    align-items: center; justify-content: center;
    z-index: 2147483647;
    font-size: 24px; padding: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
  }
  .bcd-nav.is-mobile-open .bcd-nav__drawer-close { display: flex; }
  .bcd-nav__drawer-close::before {
    content: "\00d7";
    font-size: 26px; line-height: 1; color: #ffffff;
    margin-top: -2px;            /* optical centring for the × glyph */
  }

  /* Dark theme: invert the circle (white bg, dark × glyph).
     Targets both the original nav and the body-attached portal wrapper. */
  .bcd-nav.is-theme-dark .bcd-nav__drawer-close,
  .bcd-nav--mobile-portal.is-theme-dark .bcd-nav__drawer-close {
    background: #ffffff;
    color: #2D2D2D;
  }
  .bcd-nav.is-theme-dark .bcd-nav__drawer-close::before,
  .bcd-nav--mobile-portal.is-theme-dark .bcd-nav__drawer-close::before {
    color: #2D2D2D;
  }
  @media (prefers-color-scheme: dark) {
    .bcd-nav.is-theme-auto:not(.is-theme-light) .bcd-nav__drawer-close,
    .bcd-nav--mobile-portal.is-theme-auto:not(.is-theme-light) .bcd-nav__drawer-close {
      background: #ffffff;
      color: #2D2D2D;
    }
    .bcd-nav.is-theme-auto:not(.is-theme-light) .bcd-nav__drawer-close::before,
    .bcd-nav--mobile-portal.is-theme-auto:not(.is-theme-light) .bcd-nav__drawer-close::before {
      color: #2D2D2D;
    }
  }

  /* Search panel on mobile: full-width sheet */
  .bcd-nav__search-panel {
    position: fixed; top: 70px; left: 0; right: 0;
    width: 100%; max-width: 100%;
    padding: 16px;
    border: 0;
    border-bottom: 1px solid var(--bcd-bar-border);
    z-index: 100001;
  }
}