/** Shopify CDN: Minification failed

Line 1515:0 Expected "}" to go with "{"

**/
/* =========================================================
   World-class Mega Menu (Refresh/Dawn friendly) — SINGLE SOURCE OF TRUTH
   Keep ONLY this custom mega-menu CSS active.

   Fixes + upgrades:
   - Dropdown is absolute (out of nav flow) so it doesn’t trap other links
   - Per-ACTIVE-tab promo collapse (mm-active-no-promo) to remove dead whitespace
   - Middle column expands when promo is absent (fixes “Deals” bunched pills)
   - Brand logos: default to contain (no cropping)
   - Popular Brands: NO extra scaling (fixes slight logo crop)
   - CTA buttons: enforced real button styling (no blue link text)
   - Promo images: use contain (fixes text being cropped) while staying inside tile
   - Prevent horizontal scroll in dropdown (overflow-x hidden)
   - Consistent :focus-visible rings on ALL interactive items
   - Touch-device hover-translate guard (no “sticky hover” wobble)

   Phase 2 consolidation notes:
   - Predictive search stacking/z-index is handled in assets/component-search.css
     (so this file does NOT set z-index on predictive-search elements).
========================================================= */

/* Section-level fallbacks (header.liquid can override these vars) */
.section-header {
  --mm-tab-w: 250px;
  --mm-mid-max: 720px;
  --mm-promo-w: 360px;
  --mm-gap: 28px;

  /* Header outputs these as decimals (1 / 1.15) */
  --mm-text: 1;
  --mm-heading: 1.15;

  --mm-brand-size: 104px;
  --mm-brand-min: 175px;

  --mm-surface-radius: 18px;
  --mm-surface-border: rgba(var(--color-foreground), 0.12);
  --mm-surface-bg: rgba(var(--color-background), 0.60);

  --mm-cta-radius: 14px;

  --mm-promo-ar: 4 / 3;
}

/* Derived scales + rhythm tokens */
details.js-mega-menu {
  --mm-text-scale: clamp(0.92, var(--mm-text, 1), 1.25);
  --mm-heading-scale: clamp(1.02, var(--mm-heading, 1.15), 1.65);

  /* Density controls (header.liquid can override via CSS vars) */
  --mm-panel-pad: 0.75rem;
  --mm-stack-1: 0.5rem;
  --mm-stack-2: 0.75rem;

  /* Global mega inner padding */
  --mm-inner-pad-y: 0.75rem;
  --mm-inner-pad-b: 0.9rem;

  /* Brand logo fit strategy (IMPORTANT: scale is unitless) */
  --mm-brand-fit: contain;
  --mm-brand-pad: 0px;
  --mm-brand-scale: 1;

  /* Unified focus ring tokens */
  --mm-ring: 0 0 0 0.2rem rgb(var(--color-foreground) / 0.22);
  --mm-ring-strong: 0 0 0 0.25rem rgb(var(--color-foreground) / 0.28);
  --mm-outline: 0.2rem solid transparent;

  position: relative;
  z-index: 40;
}

details.js-mega-menu[open] {
  z-index: 60; /* keep modest; dropdown content controls actual stacking */
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  details.js-mega-menu > .mega-menu__content,
  details.js-mega-menu .mega-menu__tab,
  details.js-mega-menu .mega-menu__link,
  details.js-mega-menu .mega-menu__promo-item,
  details.js-mega-menu .menubrands__link,
  details.js-mega-menu .mm-cta,
  details.js-mega-menu .mega-menu__chip,
  details.js-mega-menu .mega-menu__product {
    transition: none !important;
    transform: none !important;
  }
}

/* Touch devices: avoid “sticky hover” wobble */
@media (hover: none) {
  details.js-mega-menu .mega-menu__tab:hover,
  details.js-mega-menu .mm-cta:hover,
  details.js-mega-menu .mega-menu__link:hover,
  details.js-mega-menu .mega-menu__chip:hover,
  details.js-mega-menu .menubrands__link:hover,
  details.js-mega-menu .mega-menu__promo-item:hover,
  details.js-mega-menu .mega-menu__product:hover {
    transform: none !important;
    box-shadow: none !important;
  }
}

/* =========================================================
   CRITICAL FIX: Dropdown must be OUT of the nav flow
========================================================= */
.header__inline-menu {
  position: relative; /* positioning context for absolute dropdown */
}

.header__inline-menu details.js-mega-menu {
  position: static;
}

.header__inline-menu details.js-mega-menu > .mega-menu__content {
    will-change: transform, opacity;
  contain: layout paint;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  width: 100%;

  /* stacking: mega menu under predictive (predictive handled in component-search.css) */
  z-index: 2000;

  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-0.75rem);
  transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms;
}

.header__inline-menu details.js-mega-menu[open] > .mega-menu__content {
  contain: layout paint;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity 160ms ease, transform 160ms ease;
}

/* Premium dropdown surface */
details.js-mega-menu .mega-menu__content {
  font-size: calc(1rem * var(--mm-text-scale));
  color: rgb(var(--color-foreground));

  background: rgba(var(--color-background), 0.98);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

  border-top: 1px solid rgba(var(--color-foreground), 0.10);
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.22);

  /* Use coordinator-provided header height vars (fallback safe) */
  max-height: calc(100vh - var(--cbh-header-bottom, var(--header-bottom-position, 120px)));
  overflow-y: auto;
  overflow-x: hidden; /* prevents accidental horizontal scroll */
  overscroll-behavior: contain;

  scrollbar-gutter: stable both-edges;
}

details.js-mega-menu .mega-menu__inner {
  width: 100%;
  padding: var(--mm-inner-pad-y) 0 var(--mm-inner-pad-b);
}

details.js-mega-menu .mega-menu__content ul,
details.js-mega-menu .mega-menu__content .mega-menu__sublist {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Prevent any column content from forcing horizontal overflow */
details.js-mega-menu .mega-menu__content,
details.js-mega-menu .mega-menu__inner,
details.js-mega-menu .mega-menu__grid,
details.js-mega-menu .mega-menu__col--left,
details.js-mega-menu .mega-menu__col--middle,
details.js-mega-menu .mega-menu__col--right {
  min-width: 0;
}

/* =========================================================
   Layout grid
========================================================= */
details.js-mega-menu .mega-menu__grid {
  display: grid;
  grid-template-columns: var(--mm-tab-w) minmax(0, 1fr) var(--mm-promo-w);
  gap: var(--mm-gap);
  align-items: start;
}

details.js-mega-menu .mega-menu__col--middle {
  max-width: var(--mm-mid-max);
}

/* Brands / Popular panels should not be constrained */
details.js-mega-menu.mm-has-popular .mega-menu__col--middle,
details.js-mega-menu .mega-menu__inner--brands .mega-menu__col--middle {
  max-width: none;
}

/* Collapse promo column if menu has none at all */
details.js-mega-menu.mm-no-promo .mega-menu__grid {
  grid-template-columns: var(--mm-tab-w) minmax(0, 1fr) !important;
}
details.js-mega-menu.mm-no-promo .mega-menu__col--right {
  display: none !important;
}

/* Collapse promo column when ACTIVE tab has no promo */
details.js-mega-menu.mm-active-no-promo .mega-menu__grid {
  grid-template-columns: var(--mm-tab-w) minmax(0, 1fr) !important;
}
details.js-mega-menu.mm-active-no-promo .mega-menu__col--right {
  display: none !important;
}

/* When promo is collapsed, let middle expand fully */
details.js-mega-menu.mm-active-no-promo .mega-menu__col--middle,
details.js-mega-menu.mm-no-promo .mega-menu__col--middle {
  max-width: none !important;
}

/* Tablet/mobile: stack */
@media screen and (max-width: 990px) {
  details.js-mega-menu .mega-menu__grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  details.js-mega-menu .mega-menu__col--middle {
    max-width: none;
  }
}

/* =========================================================
   Left rail tabs
========================================================= */
details.js-mega-menu .mega-menu__col--left {
  border-right: 1px solid rgba(var(--color-foreground), 0.06);
  padding-right: 1rem;
}

details.js-mega-menu .mega-menu__tablist {
  display: grid;
  gap: 0.55rem;
}

details.js-mega-menu .mega-menu__tab {
  position: relative;
  appearance: none;
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  text-align: left;

  padding: 0 0.95rem;
  border-radius: 14px;
  background: transparent;
  border: 1px solid transparent;

  font-weight: 700;
  color: rgb(var(--color-foreground));
  line-height: 1.15;

  cursor: pointer;
  touch-action: manipulation;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
  text-decoration: none !important;
  background-image: none !important;
}

details.js-mega-menu .mega-menu__tab:hover {
  background: rgba(var(--color-foreground), 0.04);
  border-color: rgba(var(--color-foreground), 0.08);
}

details.js-mega-menu .mega-menu__tab.is-active {
  background: rgba(var(--color-foreground), 0.085);
  border-color: rgba(var(--color-foreground), 0.22);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.09), 0 0 0 1px rgba(var(--color-foreground), 0.10) inset;
  font-weight: 780;
}

details.js-mega-menu .mega-menu__tab.is-active::before {
  content: "";
  position: absolute;
  left: 0.35rem;
  top: 0.55rem;
  bottom: 0.55rem;
  width: 5px;
  border-radius: 999px;
  background: rgb(var(--color-button));
  opacity: 0.95;
}

details.js-mega-menu .mega-menu__tab:focus-visible {
  box-shadow: var(--mm-ring);
  outline: var(--mm-outline);
  border-radius: 14px;
}

/* A–Z tabs */
details.js-mega-menu .mega-menu__tab--az {
  font-weight: 800;
  letter-spacing: 0.01em;
}
details.js-mega-menu .mega-menu__tab--az:hover {
  background: rgba(var(--color-foreground), 0.06);
  border-color: rgba(var(--color-foreground), 0.12);
}
details.js-mega-menu .mega-menu__tab--az.is-active {
  background: rgba(var(--color-foreground), 0.10);
}

/* Link-only tabs */
details.js-mega-menu .mega-menu__tab--linkonly::after {
  content: "→";
  margin-left: auto;
  opacity: 0.65;
  font-weight: 800;
}
details.js-mega-menu .mega-menu__tab--linkonly:hover::after {
  opacity: 0.9;
}

/* CTA under tabs */
details.js-mega-menu .mega-menu__tab-cta-wrap {
  display: none;
  margin-top: 0.85rem;
}
details.js-mega-menu.mm-cta-pos--tabs .mega-menu__tab-cta-wrap {
  display: block;
}
details.js-mega-menu.mm-cta-pos--tabs .mega-menu__tab-cta {
  width: 100%;
  justify-content: center;
}
details.js-mega-menu.mm-cta-pos--tabs .mega-menu__panel-actions {
  display: none !important;
  margin-top: 0.1rem;
}

/* Mobile: swipe tabs */
@media screen and (max-width: 990px) {
  details.js-mega-menu .mega-menu__col--left {
    border-right: 0;
    padding-right: 0;
  }

  details.js-mega-menu .mega-menu__tablist {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
    gap: 0.6rem;
    padding: 0.2rem 0.1rem 0.55rem;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }

  details.js-mega-menu .mega-menu__tab {
    scroll-snap-align: start;
    white-space: nowrap;
    border-radius: 999px;
  }
}

/* =========================================================
   Unified focus-visible (keyboard parity)
========================================================= */
details.js-mega-menu :is(a, button, input, summary, [role="tab"]):focus {
  outline: none;
}

details.js-mega-menu :is(a, button, input, summary, [role="tab"]):not(.mega-menu__tab):focus-visible {
  box-shadow: var(--mm-ring);
  outline: var(--mm-outline);
  border-radius: 0.8rem;
}

details.js-mega-menu .mm-cta:focus-visible,
details.js-mega-menu [data-mega-cta]:focus-visible {
  box-shadow: var(--mm-ring-strong);
}

/* =========================================================
   CTA buttons
========================================================= */
details.js-mega-menu .mm-cta,
details.js-mega-menu .mm-cta:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;

  min-height: 44px;
  padding: 0.9rem 1.2rem;

  border-radius: var(--mm-cta-radius);
  font-weight: 800;
  line-height: 1;

  text-decoration: none !important;
  background-image: none !important;

  border: 1px solid transparent;

  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease, border-color 140ms ease, color 140ms ease;
}

details.js-mega-menu .mm-cta--pill {
  border-radius: 999px;
}

details.js-mega-menu .mm-cta--primary {
  background: rgb(var(--color-button)) !important;
  border-color: rgb(var(--color-button)) !important;
  color: rgb(var(--color-button-text)) !important;
}

details.js-mega-menu .mm-cta--secondary {
  background: transparent !important;
  border-color: rgba(var(--color-foreground), 0.22) !important;
  color: rgb(var(--color-foreground)) !important;
}

details.js-mega-menu .mm-cta--soft {
  background: rgba(var(--color-foreground), 0.06) !important;
  border-color: rgba(var(--color-foreground), 0.10) !important;
  color: rgb(var(--color-foreground)) !important;
}

details.js-mega-menu .mm-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.10);
  filter: brightness(1.02);
}

/* =========================================================
   Brand search (sticky, visible label, aligned clear button)
========================================================= */
details.js-mega-menu .mega-menu__brand-search {
  position: sticky;
  top: 0;
  z-index: 6;

  display: grid;
  gap: 0.35rem;

  padding: 0.65rem 0.35rem 0.55rem;
  margin: -0.25rem -0.15rem 0.6rem;

  background: rgba(var(--color-background), 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(var(--color-foreground), 0.08);
}

details.js-mega-menu .mega-menu__brand-search-label {
  font-weight: 850;
  font-size: 1.05rem;
  line-height: 1.15;
  margin: 0;
  color: rgb(var(--color-foreground));
  opacity: 0.95;
}

details.js-mega-menu .mega-menu__brand-search-field {
  position: relative;
  max-width: 560px;
}

details.js-mega-menu .mega-menu__brand-input {
  width: 100%;
  min-height: 46px;
  border-radius: 999px;
  padding: 0 3.0rem 0 1.05rem;

  border: 1px solid rgba(var(--color-foreground), 0.14);
  background: rgba(var(--color-background), 0.52);
  color: rgb(var(--color-foreground));

  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

details.js-mega-menu .mega-menu__brand-input::placeholder {
  opacity: 0.65;
}

details.js-mega-menu .mega-menu__brand-input:focus-visible {
  box-shadow: var(--mm-ring);
  border-color: rgba(var(--color-foreground), 0.22);
  background: rgba(var(--color-background), 0.72);
  border-radius: 999px;
}

details.js-mega-menu .mega-menu__brand-clear {
  position: absolute;
  right: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 999px;

  border: 1px solid rgba(var(--color-foreground), 0.14);
  background: rgba(var(--color-background), 0.70);
  color: rgb(var(--color-foreground));

  display: grid;
  place-items: center;
  cursor: pointer;

  transition: transform 140ms ease, background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

details.js-mega-menu .mega-menu__brand-clear:hover {
  background: rgba(var(--color-background), 0.90);
  border-color: rgba(var(--color-foreground), 0.18);
  box-shadow: 0 10px 18px rgba(0,0,0,0.10);
  transform: translateY(-50%) scale(1.03);
}

details.js-mega-menu .mega-menu__brand-clear[hidden] {
  display: none !important;
}

details.js-mega-menu .mega-menu__brand-empty {
  margin: 0.2rem 0 0;
  opacity: 0.78;
}

/* =========================================================
   Panels
========================================================= */
details.js-mega-menu .mega-menu__panel {
  display: none;
  padding: var(--mm-panel-pad);
  border-radius: var(--mm-surface-radius);
  border: 1px solid transparent;
  background: transparent;
}

details.js-mega-menu .mega-menu__panel.is-active {
  display: block;
}

@media screen and (min-width: 990px) {
  details.js-mega-menu .mega-menu__panel.is-active {
    background: var(--mm-surface-bg);
    border-color: var(--mm-surface-border);
  }
}

details.js-mega-menu .mega-menu__panel-inner {
  display: flex;
  flex-direction: column;
  gap: var(--mm-stack-2);
}

details.js-mega-menu .mega-menu__panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

details.js-mega-menu .mega-menu__panel-title {
  margin: 0;
  font-weight: 850;
  line-height: 1.12;
  font-size: calc(1.25rem * var(--mm-heading-scale));
  text-decoration: none !important;
}
/* Compact panel mode (for empty/lean panels) */
details.js-mega-menu.mm-compact-panel .mega-menu__panel-inner {
  gap: var(--mm-stack-1);
}
details.js-mega-menu.mm-compact-panel .mega-menu__chips {
  margin-bottom: 0.45rem;
}
details.js-mega-menu.mm-compact-panel .mega-menu__curated-wrap {
  margin-top: 0.55rem;
  padding-top: 0.55rem;
}

/* =========================================================
   Deals panel: chips + 2-column link list
========================================================= */
details.js-mega-menu .mega-menu__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0.1rem 0 0.75rem;
}

details.js-mega-menu .mega-menu__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 1.05rem;
  border-radius: 999px;

  font-weight: 800;
  line-height: 1;

  background: rgba(var(--color-foreground), 0.06);
  border: 1px solid rgba(var(--color-foreground), 0.12);
  color: rgb(var(--color-foreground));
  text-decoration: none !important;

  transition: transform 140ms ease, background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

details.js-mega-menu .mega-menu__chip:hover {
  transform: translateY(-1px);
  background: rgba(var(--color-foreground), 0.085);
  border-color: rgba(var(--color-foreground), 0.18);
  box-shadow: 0 10px 18px rgba(0,0,0,0.08);
}

/* =========================================================
   Sublinks (pills) + Deals 2-col override
========================================================= */
details.js-mega-menu .mega-menu__sublist {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

@media screen and (min-width: 990px) {
  details.js-mega-menu .mega-menu__sublist {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    max-width: none;
  }
}

/* Base pill */
details.js-mega-menu .mega-menu__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1.2rem;
  border-radius: 999px;

  font-weight: 650;
  line-height: 1.1;

  background: rgba(var(--color-background), 0.38);
  border: 1px solid rgba(var(--color-foreground), 0.12);
  color: rgb(var(--color-foreground));
  text-decoration: none !important;

  transition: transform 140ms ease, background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

@media screen and (min-width: 990px) {
  details.js-mega-menu .mega-menu__link {
    white-space: nowrap;
  }
}

details.js-mega-menu .mega-menu__link:hover {
  transform: translateY(-1px);
  background: rgba(var(--color-background), 0.60);
  border-color: rgba(var(--color-foreground), 0.18);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.07);
}

/* Deals: 2-column list should stay GRID on desktop */
details.js-mega-menu .mega-menu__sublist--2col {
  display: grid !important;
  gap: 0.55rem 0.8rem;
}

@media screen and (min-width: 990px) {
  details.js-mega-menu .mega-menu__sublist--2col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

/* Deals: make sub-links match the same pill style as other panels */
@media screen and (min-width: 990px) {
  details.js-mega-menu .mega-menu__panel--deals .mega-menu__link {
    width: auto;                 /* stop full-width blocks */
    border-radius: 999px;        /* pill */
    min-height: 44px;            /* match base pills */
    padding: 0 1.2rem;           /* match base pills */
    background: rgba(var(--color-background), 0.38);
    border: 1px solid rgba(var(--color-foreground), 0.12);
    white-space: normal;         /* allows long labels to wrap nicely */
  }
}

@media screen and (max-width: 520px) {
  details.js-mega-menu .mega-menu__sublist--2col {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Curated products (New in / Best sellers)
========================================================= */
details.js-mega-menu .mega-menu__curated-wrap {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(var(--color-foreground), 0.10);
}

details.js-mega-menu .mega-menu__curated {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

details.js-mega-menu .mega-menu__curated-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

details.js-mega-menu .mega-menu__curated-title {
  margin: 0;
  font-weight: 900;
  line-height: 1.15;
}

details.js-mega-menu .mega-menu__curated-link {
  font-weight: 750;
  text-decoration: none !important;
  opacity: 0.85;
}
details.js-mega-menu .mega-menu__curated-link:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

details.js-mega-menu .mega-menu__curated-grid {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

@media screen and (min-width: 990px) {
  details.js-mega-menu .mega-menu__curated-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

details.js-mega-menu .mega-menu__product {
  display: grid;
  gap: 0.55rem;
  padding: 0.65rem;
  border-radius: 16px;

  background: rgba(var(--color-background), 0.22);
  border: 1px solid rgba(var(--color-foreground), 0.10);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);

  text-decoration: none !important;
  color: rgb(var(--color-foreground));

  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
}

details.js-mega-menu .mega-menu__product:hover {
  transform: translateY(-2px);
  background: rgba(var(--color-background), 0.30);
  border-color: rgba(var(--color-foreground), 0.14);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.10);
}

details.js-mega-menu .mega-menu__product-media {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(var(--color-foreground), 0.08);
  background: rgba(var(--color-background), 0.90);
  display: grid;
  place-items: center;
}

details.js-mega-menu .mega-menu__product-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.35rem;
  background: rgba(var(--color-background), 0.94);
}

details.js-mega-menu .mega-menu__product-title {
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1.25;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

details.js-mega-menu .mega-menu__product-price {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: baseline;
  font-weight: 850;
}

details.js-mega-menu .mega-menu__price-compare {
  opacity: 0.65;
  font-weight: 700;
}

/* =========================================================
   Promo column (contain, no cropping)
========================================================= */
details.js-mega-menu .mega-menu__promo {
  display: none;
}
details.js-mega-menu .mega-menu__promo.is-active {
  display: block;
}

details.js-mega-menu .mega-menu__promo-grid {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: 1fr;
}

details.js-mega-menu .mega-menu__promo-item {
  display: block;
  aspect-ratio: var(--mm-promo-ar);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(var(--color-foreground), 0.10);
  background: rgba(var(--color-background), 0.98);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

details.js-mega-menu .mega-menu__promo-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: rgba(var(--color-background), 0.96);
  padding: 0.6rem;
}

details.js-mega-menu .mega-menu__promo-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);
}

/* =========================================================
   Brands
========================================================= */
details.js-mega-menu .menubrands {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--mm-brand-min), 1fr));
  gap: 1rem;
  width: 100%;
}

/* Popular Brands: hard 6-col on desktop */
@media screen and (min-width: 990px) {
  details.js-mega-menu .mega-menu__panel--popular-brands .menubrands {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.9rem;
  }
}
@media screen and (max-width: 989px) {
  details.js-mega-menu .mega-menu__panel--popular-brands .menubrands {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media screen and (max-width: 520px) {
  details.js-mega-menu .mega-menu__panel--popular-brands .menubrands {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Kill underline leaks */
details.js-mega-menu .menubrands__link,
details.js-mega-menu .menubrands__link::before,
details.js-mega-menu .menubrands__link::after {
  background-image: none !important;
  text-decoration: none !important;
  border-bottom: 0 !important;
}

details.js-mega-menu .menubrands__link {
  display: grid;
  justify-items: center;
  gap: 0.65rem;
  padding: 0.85rem;
  border-radius: 18px;

  background: rgba(var(--color-background), 0.18);
  border: 1px solid rgba(var(--color-foreground), 0.10);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);

  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

details.js-mega-menu .menubrands__link:hover {
  background: rgba(var(--color-background), 0.28);
  border-color: rgba(var(--color-foreground), 0.14);
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.10);
}

details.js-mega-menu .menubrands__media {
  width: var(--mm-brand-size);
  height: var(--mm-brand-size);
  border-radius: 999px;
  overflow: hidden;

  border: 1px solid rgba(var(--color-foreground), 0.14);
  background: rgba(var(--color-background), 0.98);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);

  display: grid;
  place-items: center;
}

details.js-mega-menu .menubrands__img {
  width: 100%;
  height: 100%;
  object-fit: var(--mm-brand-fit);
  object-position: center;
  padding: var(--mm-brand-pad);
  transform: scale(var(--mm-brand-scale));
  transform-origin: center;
}

details.js-mega-menu .menubrands--popular {
  --mm-brand-pad: 0px;
  --mm-brand-scale: 1;
  --mm-brand-fit: contain;
}

details.js-mega-menu .menubrands__title {
  font-weight: 750;
  font-size: 0.98rem;
  line-height: 1.2;
  text-align: center;
  color: rgb(var(--color-foreground));
}

/* =========================================================
   Footer CTA
========================================================= */
details.js-mega-menu .mega-menu__footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 1.1rem;
  margin-top: 1.1rem;
  border-top: 1px solid rgba(var(--color-foreground), 0.10);
}

/* =========================================================
   Basket badge visibility (covers Dawn/Refresh variants)
========================================================= */
#cart-icon-bubble,
.header__icon--cart {
  position: relative;
}

.cart-count-bubble,
.cartcount {
  background: rgb(var(--color-button)) !important;
  color: rgb(var(--color-button-text)) !important;
  border: 1px solid rgb(var(--color-background) / 0.25);
}

.cart-count-bubble span,
.cartcount span {
  color: inherit !important;
}

/* =========================================================
   Desktop/mobile menu toggles
========================================================= */
@media screen and (max-width: 989px) {
  .header__inline-menu--mega { display: none !important; }
  header-drawer { display: block !important; }
}
@media screen and (min-width: 990px) {
  header-drawer { display: none !important; }
}

/* Mobile-only mega menu scroll lock (coordinator adds .cbh-mm-lock) */
@media (max-width: 989px) {
  html.cbh-mm-lock,
  body.cbh-mm-lock {
    overflow: hidden;
    height: 100%;
  }
}

/* =========================================================
   Small desktop (990–1200) tightening
========================================================= */
@media screen and (min-width: 990px) and (max-width: 1200px) {
  details.js-mega-menu .mega-menu__grid {
    grid-template-columns: 230px minmax(420px, 1fr) 320px;
    gap: clamp(1rem, 1.4vw, 1.8rem);
  }

  details.js-mega-menu .mega-menu__tablist {
    max-height: min(56vh, 520px);
    overflow: auto;
    padding-right: 0.4rem;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  details.js-mega-menu.mm-no-promo .mega-menu__grid,
  details.js-mega-menu.mm-active-no-promo .mega-menu__grid {
    grid-template-columns: 230px minmax(520px, 1fr) !important;
  }

  details.js-mega-menu .menubrands {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
  }

  details.js-mega-menu .menubrands__title {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* =========================================================
   CBD HUT — Markup-accurate hardening for header-mega-menu.liquid
========================================================= */

/* 1) RTE containment: stop .rte styles leaking into mega menu pills/buttons */
details.js-mega-menu .mega-menu__panel.rte a {
  color: inherit;
  text-decoration: none;
  background-image: none !important;
}
details.js-mega-menu .mega-menu__panel.rte a:hover {
  text-decoration: none;
}

/* Ensure your pills/chips/CTAs never revert to underlined text */
details.js-mega-menu .mega-menu__link,
details.js-mega-menu .mega-menu__chip,
details.js-mega-menu .mm-cta,
details.js-mega-menu .mega-menu__panel-title {
  text-decoration: none !important;
  background-image: none !important;
}

/* 2) Promo column: markup always renders .mega-menu__promo
      so :empty must collapse REAL empties */
details.js-mega-menu .mega-menu__promo:empty {
  display: none !important;
}

/* If promo container exists but has no promo-grid (no images), hide it */
@supports selector(:has(*)) {
  details.js-mega-menu .mega-menu__promo:not(:has(.mega-menu__promo-grid)) {
    display: none !important;
  }

  /* When ALL promos are effectively empty, behave like mm-no-promo even if class missing */
  details.js-mega-menu:not(:has(.mega-menu__promo .mega-menu__promo-grid)) .mega-menu__col--right {
    display: none !important;
  }
  details.js-mega-menu:not(:has(.mega-menu__promo .mega-menu__promo-grid)) .mega-menu__grid {
    grid-template-columns: var(--mm-tab-w) minmax(0, 1fr) !important;
  }

  /* When ACTIVE promo is missing, behave like mm-active-no-promo even if class missing */
  details.js-mega-menu:has(.mega-menu__panel.is-active):not(:has(.mega-menu__promo.is-active .mega-menu__promo-grid)) .mega-menu__col--right {
    display: none !important;
  }
  details.js-mega-menu:has(.mega-menu__panel.is-active):not(:has(.mega-menu__promo.is-active .mega-menu__promo-grid)) .mega-menu__grid {
    grid-template-columns: var(--mm-tab-w) minmax(0, 1fr) !important;
  }
  details.js-mega-menu:has(.mega-menu__panel.is-active):not(:has(.mega-menu__promo.is-active .mega-menu__promo-grid)) .mega-menu__col--middle {
    max-width: none !important;
  }
}
/* =========================================================
   Header nav polish (moved out of header.liquid)
========================================================= */
.list-menu { list-style: none; padding: 0; margin: 0; }
.list-menu--inline { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; }
summary.list-menu__item { padding-right: 2.7rem; }

.list-menu__item {
  display: flex;
  align-items: center;
  line-height: calc(1 + 0.3 / var(--font-body-scale));
}

.list-menu__item--link {
  text-decoration: none;
  padding-bottom: 0.9rem;
  padding-top: 0.9rem;
  line-height: calc(1 + 0.8 / var(--font-body-scale));
  white-space: nowrap;
}

@media screen and (min-width: 750px) {
  .list-menu__item--link {
    padding-bottom: 0.45rem;
    padding-top: 0.45rem;
  }
}

/* Desktop: pill hover/active */
@media screen and (min-width: 990px) {
  .header__inline-menu .list-menu__item--link {
    border-radius: 999px;
    padding-left: 1.05rem;
    padding-right: 1.05rem;
    transition: background-color 0.18s ease, transform 0.18s ease;
  }

  .header__inline-menu .list-menu__item--link:hover {
    background: rgb(var(--color-foreground) / 0.07);
  }

  .header__inline-menu .header__active-menu-item {
    background: rgb(var(--color-foreground) / 0.10);
  }

  .header__inline-menu .list-menu__item--link:active {
    transform: translateY(0.5px);
  }

  .header__inline-menu .list-menu__item--link:focus-visible {
    outline: 2px solid rgb(var(--color-foreground) / 0.35);
    outline-offset: 2px;
  }
}

/* Desktop: keep nav to one row (scroll if needed) */
@media screen and (min-width: 990px) {
  .header__inline-menu .list-menu--inline {
    flex-wrap: nowrap;
    justify-content: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 1.6rem;
    padding-inline: 12px;
    scroll-padding-left: 12px;
    scroll-padding-right: 12px;
    scroll-snap-type: x proximity;
  }
  .header__inline-menu .list-menu--inline::-webkit-scrollbar { display: none; }

  .header__inline-menu .list-menu__item,
  .header__inline-menu .list-menu__item--link { scroll-snap-align: start; }
}

@media screen and (min-width: 990px) and (max-width: 1200px) {
  .header__inline-menu .list-menu--inline {
    justify-content: flex-start;
    gap: 1.2rem;
  }
}
/* Safety: ensure brand empty message never renders when hidden */
details.js-mega-menu [data-mega-brand-empty][hidden] {
  display: none !important;
}
/* =========================================================
   Additions — Phase 3 & 4 (world-class polish)
   - Quick links (non-tab items) are separated from ARIA tabs
   - Featured collections tiles for non-product panels
========================================================= */

details.js-mega-menu .mega-menu__quicklinks {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.55rem;
}

/* Featured collections tiles */
details.js-mega-menu .mega-menu__collections {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(var(--color-foreground), 0.10);
}

details.js-mega-menu .mega-menu__collections-grid {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

@media screen and (min-width: 990px) {
  details.js-mega-menu .mega-menu__collections-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media screen and (min-width: 1200px) {
  details.js-mega-menu .mega-menu__collections-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

details.js-mega-menu .mega-menu__collection-link {
  display: grid;
  gap: 0.55rem;
  padding: 0.65rem;
  border-radius: 16px;

  background: rgba(var(--color-background), 0.22);
  border: 1px solid rgba(var(--color-foreground), 0.10);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.05);

  text-decoration: none !important;
  color: rgb(var(--color-foreground));

  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
}

details.js-mega-menu .mega-menu__collection-link:hover {
  transform: translateY(-2px);
  background: rgba(var(--color-background), 0.30);
  border-color: rgba(var(--color-foreground), 0.14);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.09);
}

details.js-mega-menu .mega-menu__collection-link:focus-visible {
  box-shadow: var(--mm-ring);
  outline: var(--mm-outline);
}

details.js-mega-menu .mega-menu__collection-media {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(var(--color-foreground), 0.08);
  background: rgba(var(--color-background), 0.90);
  display: grid;
  place-items: center;
}

details.js-mega-menu .mega-menu__collection-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

details.js-mega-menu .mega-menu__collection-media svg {
  width: 68%;
  height: auto;
  opacity: 0.9;
}

details.js-mega-menu .mega-menu__collection-title {
  font-weight: 850;
  font-size: 0.95rem;
  line-height: 1.25;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* =========================================================
   Phase 5 — Brand directory mode (A–Z rail + footer CTA)
========================================================= */

details.js-mega-menu .mega-menu__brand-count {
  margin: -0.15rem 0 0;
  opacity: 0.72;
}

/* Desktop: keep A–Z rail visible while scrolling brands */
@media screen and (min-width: 990px) {
  details.js-mega-menu .mega-menu__inner--brands .mega-menu__col--left {
    position: sticky;
    top: 0.75rem;
    align-self: start;

    max-height: calc(100vh - var(--cbh-header-bottom, var(--header-bottom-position, 120px)) - 2rem);
    overflow: auto;
    padding-top: 0.25rem;

    scrollbar-gutter: stable;
  }

  /* Give the middle column room so the sticky footer doesn't cover the last row */
  details.js-mega-menu .mega-menu__inner--brands .mega-menu__col--middle {
    padding-bottom: 4.5rem;
  }

  /* Sticky footer CTA for long brand lists */
  details.js-mega-menu .mega-menu__inner--brands .mega-menu__footer {
    position: sticky;
    bottom: 0;
    z-index: 7;

    background: rgba(var(--color-background), 0.92);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);

    padding: 0.85rem 0;
    margin-top: 1rem;

    border-top: 1px solid rgba(var(--color-foreground), 0.10);
  }
}


/* =========================================================
   PHASE 7 — Mega menu polish (typography, spacing, imagery)
   Safe overrides only (no markup/JS dependency)
========================================================= */

.mega-menu__content{
  /* Slightly tighter, more premium rhythm */
  --mm-gap: 24px;
  --mm-tab-w: 238px;
  --mm-panel-pad: 18px;
  --mm-panel-radius: 20px;
  --mm-card-radius: 18px;

  /* Improve readability on large screens */
  --mm-type-sm: clamp(12px, 0.85vw, 13.5px);
  --mm-type-base: clamp(13px, 0.92vw, 14.5px);
  --mm-type-lg: clamp(15px, 1.05vw, 16.5px);
}

/* Tabs: slightly tighter + clearer active state */
.mega-menu__tabs{
  gap: 10px;
}

.mega-menu__tab{
  font-size: var(--mm-type-base);
  line-height: 1.25;
  letter-spacing: 0.01em;
  padding-block: 10px;
}

.mega-menu__tab.is-active{
  box-shadow: 0 0 0 2px rgba(38, 92, 66, 0.22);
}

/* Panel header hierarchy */
.mega-menu__panel-head{
  align-items: center;
  gap: 14px;
  padding-bottom: 10px;
}

.mega-menu__panel-title{
  font-size: var(--mm-type-lg);
  line-height: 1.2;
}

/* CTA: allow wrap (prevents comically long pills) */
.mega-menu__panel-actions .mm-cta,
.mega-menu__tab-cta{
  max-inline-size: 320px;
  white-space: normal;
  text-wrap: balance;
  line-height: 1.15;
  padding: 11px 16px;
}

/* Chips: slightly slimmer */
.mega-menu__chip{
  font-size: var(--mm-type-sm);
  min-height: 38px;
  padding: 8px 14px;
}

/* Links list: nicer hover */
.mega-menu__link{
  font-size: var(--mm-type-base);
}
.mega-menu__link:hover{
  background: rgba(255,255,255,0.48);
  transform: translateY(-0.5px);
}

/* Curated area: clearer title + tighter gap */
.mega-menu__curated-head{
  margin-bottom: 10px;
}
.mega-menu__curated-title{
  font-size: var(--mm-type-base);
  letter-spacing: 0.01em;
}
.mega-menu__curated-link{
  font-size: var(--mm-type-sm);
}

/* Product cards: more consistent image sizing */
.mm-card__media{
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
}
.mm-card__media img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
}

/* Brand tiles: slightly larger logos, calmer shadow */
.menubrands__media{
  width: 116px;
  height: 116px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.07);
}
.menubrands__img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
}
.menubrands__title{
  font-size: var(--mm-type-sm);
}

/* Promo tiles: consistent media crop */
.mega-menu__promo-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Focus: consistent premium ring */
.mega-menu__tab:focus-visible,
.mega-menu__link:focus-visible,
.mega-menu__chip:focus-visible,
.menubrands__link:focus-visible,
.mega-menu__panel-title:focus-visible,
.mm-cta:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(38, 92, 66, 0.22);
}



/* =========================================================
   PHASE 7.1 — Mega Menu polish fixes
   - Fix right-edge "cut off" (force rounded container)
   - Slightly wider desktop max-width to reduce density (1400px)
   - CTA can be hidden safely when active tab isn't a collection (JS uses [hidden])
========================================================= */
@media (min-width: 990px) {
  details.js-mega-menu > .mega-menu__content {
    border-radius: var(--mm-radius);
    overflow: hidden;
  }

  details.js-mega-menu > .mega-menu__content .page-width {
    max-width: 1400px;
  }

  details.js-mega-menu .mega-menu__inner {
    border-radius: inherit;
  }

  .mega-menu__tab-cta[hidden] {
    display: none !important;
  }
}
/* Brand search removed: never show empty-state text */
details.js-mega-menu .mega-menu__brand-empty {
  display: none !important;
}