/** Shopify CDN: Minification failed

Line 7:1 Unexpected "/"

**/
   Modern search bar next to logo with typing ticker
*/

/* ========================================
   GLOBAL OVERFLOW FIX
   Prevent horizontal scroll from header nav
   ======================================== */
/* Removed html, body overflow-x: hidden as it breaks other elements */

/* ========================================
   STICKY HEADER - iOS Safari Compatible
   MUST be at the top of the file for specificity
   ======================================== */

/*
 * iOS Safari Sticky Fix:
 * - Use -webkit-sticky prefix
 * - Avoid transform on sticky element
 * - Ensure no overflow:hidden on ancestors
 * - Apply to ALL header section variations
 */

/* Header wrapper - relative positioning */
.header-wrapper {
  position: relative;
  z-index: 900;
  background: rgb(var(--color-background));
  /* Removed overflow-x: hidden - it clips mega menu dropdowns */
}

.header--mega-menu .header__top,
.header .header__top,
.header__top {
  background: rgb(var(--color-background));
}

/* ========================================
   HEADER TOP BAR - DESKTOP LAYOUT
   ======================================== */

/* Override the default header top inner for mega-menu style */
.header--mega-menu .header__top-inner {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding-block: 0.6rem;
}

@media screen and (min-width: 1000px) {
  .header--mega-menu .header__top-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "logo search icons";
    gap: 1.6rem;
    padding-block: 0.6rem;
  }

  .header--mega-menu .header__heading,
  .header--mega-menu .header__heading-link {
    grid-area: logo;
    margin-right: 0;
  }

  .header--mega-menu .header__heading-logo {
    max-height: 5rem;
    height: auto;
    width: auto;
  }

  .header--mega-menu .header__search {
    grid-area: search;
    order: unset;
    flex-basis: auto;
    margin: 0;
    max-width: 64rem;
    width: 100%;
    justify-self: center;
  }

  .header--mega-menu .header__column {
    grid-area: icons;
    margin-left: 0;
  }
}

@media screen and (min-width: 1400px) {
  .header--mega-menu .header__top-inner {
    gap: 2rem;
  }

  .header--mega-menu .header__search {
    max-width: 72rem;
  }
}

/* ========================================
   ENHANCED SEARCH BAR
   ======================================== */

.header--mega-menu .header__search {
  position: relative;
}

.header--mega-menu .header__search .search__content {
  background: transparent;
}

.header--mega-menu .header__search .search__form {
  position: relative;
}

.header--mega-menu .header__search .field {
  position: relative;
  min-height: 4.2rem;
  background-color: rgb(var(--color-background));
  border: 2px solid rgb(var(--color-border-input));
  border-radius: 2.5rem;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.header--mega-menu .header__search .field:hover {
  border-color: rgb(var(--color-border-input-hover));
}

.header--mega-menu .header__search .field:focus-within {
  border-color: rgb(var(--color-button));
  box-shadow: 0 0 0 3px rgba(var(--color-button), 0.1);
}

/* Search Input */
.header--mega-menu .header__search .search__input.field__input {
  min-width: 100%;
  min-height: 3.8rem;
  padding: 0.7rem 5.5rem 0.7rem 2rem;
  background: transparent;
  border: none;
  border-radius: 2.5rem;
  font-size: 1.6rem;
  font-weight: 400;
  color: rgb(var(--color-foreground));
}

.header--mega-menu .header__search .search__input.field__input:hover,
.header--mega-menu .header__search .search__input.field__input:focus {
  border: none;
  box-shadow: none;
}

.header--mega-menu .header__search .search__input.field__input::placeholder {
  color: transparent;
}

/* Search Button */
.header--mega-menu .header__search .search__button {
  position: absolute;
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3.4rem;
  height: 3.4rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(var(--color-button));
  border: none;
  border-radius: 50%;
  color: rgb(var(--color-button-text));
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.header--mega-menu .header__search .search__button:hover {
  background-color: rgb(var(--color-button-hover));
  transform: translateY(-50%) scale(1.05);
}

.header--mega-menu .header__search .search__button .icon-search {
  width: 1.8rem;
  height: 1.8rem;
}

/* Label positioning */
.header--mega-menu .header__search .field__label {
  left: 2.4rem;
  color: rgb(var(--color-foreground-secondary));
}

/* ========================================
   TYPING TICKER ANIMATION - FIXED ALIGNMENT
   ======================================== */

.search-ticker {
  position: absolute;
  left: 2.4rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 1.5rem;
  color: rgb(var(--color-foreground-secondary));
  opacity: 0.7;
  line-height: 1;
  white-space: nowrap;
}

.search-ticker__static {
  display: inline;
  white-space: nowrap;
}

.search-ticker__dynamic {
  display: inline;
  position: relative;
  white-space: nowrap;
}

.search-ticker__text {
  display: inline;
  color: rgb(var(--color-button));
  font-weight: 500;
}

.search-ticker__cursor {
  display: inline-block;
  width: 2px;
  height: 1.2em;
  background-color: rgb(var(--color-button));
  margin-left: 1px;
  vertical-align: text-bottom;
  animation: ticker-blink 0.8s infinite;
}

@keyframes ticker-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* Hide ticker when input has focus or value */
.header__search .field:focus-within .search-ticker,
.header__search .search__input:not(:placeholder-shown) ~ .search-ticker {
  opacity: 0;
  visibility: hidden;
}

/* ========================================
   PREDICTIVE SEARCH DROPDOWN - ENHANCED
   ======================================== */

.header--mega-menu .predictive-search--header {
  position: absolute;
  top: calc(100% + 0.8rem);
  left: 0;
  right: 0;
  background: rgb(var(--color-background));
  border: 1px solid rgb(var(--color-border));
  border-radius: 1.6rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  z-index: 100;
  max-height: 50vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.header--mega-menu .predictive-search--header::-webkit-scrollbar {
  width: 6px;
}

.header--mega-menu .predictive-search--header::-webkit-scrollbar-track {
  background: transparent;
  margin: 1rem 0;
}

.header--mega-menu .predictive-search--header::-webkit-scrollbar-thumb {
  background-color: rgba(var(--color-foreground), 0.2);
  border-radius: 3px;
}

.header--mega-menu .predictive-search--header::-webkit-scrollbar-thumb:hover {
  background-color: rgba(var(--color-foreground), 0.3);
}

.header--mega-menu .predictive-search__heading {
  padding: 1.6rem 2rem 1rem;
  margin: 0;
  width: 100%;
  border-bottom: 1px solid rgba(var(--color-foreground), 0.08);
  font-size: 1.2rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(var(--color-foreground), 0.5);
}

.header--mega-menu .predictive-search__item {
  padding: 1.2rem 2rem;
  border-radius: 0;
  transition: background-color 0.15s ease;
}

.header--mega-menu .predictive-search__item:hover {
  background-color: rgba(var(--color-foreground), 0.03);
}

.header--mega-menu .predictive-search__item--link {
  grid-template-columns: 5.5rem 1fr;
  gap: 1.2rem;
}

.header--mega-menu .predictive-search__image {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 0.8rem;
  border: 1px solid rgba(var(--color-foreground), 0.08);
}

.header--mega-menu .predictive-search__item-heading {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.4;
}

.header--mega-menu .predictive-search__list-item:not(:first-child) {
  border-top: 1px solid rgba(var(--color-foreground), 0.06);
}

.header--mega-menu .predictive-search__item--term {
  padding: 1.4rem 2rem;
  font-weight: 500;
}

/* ========================================
   HEADER ICONS - BETTER SPACING
   ======================================== */

.header--mega-menu .header__column {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.header--mega-menu .header__icons {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

@media screen and (min-width: 1000px) {
  .header--mega-menu .header__icons {
    gap: 0.4rem;
  }
}

@media screen and (min-width: 1400px) {
  .header--mega-menu .header__icons {
    gap: 0.8rem;
  }
}

.header--mega-menu .header__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 4.4rem;
  height: 4.4rem;
  border-radius: 0.8rem;
  transition: background-color 0.2s ease;
}

.header--mega-menu .header__icon:hover {
  background-color: rgba(var(--color-foreground), 0.05);
}

/* ========================================
   STORE HOURS WIDGET - LARGER TEXT
   ======================================== */

.header--mega-menu .fg-hours {
  margin-right: 0.8rem;
}

.header--mega-menu .fg-hours__toggle {
  padding: 0.6rem 1rem;
  font-size: 1.3rem;
  border-radius: 0.8rem;
}

.header--mega-menu .fg-hours__store-name {
  font-size: 1.3rem;
  font-weight: 700;
}

.header--mega-menu .fg-hours__text {
  font-size: 1.2rem;
  font-weight: 500;
}

.header--mega-menu .fg-hours__dot {
  width: 10px;
  height: 10px;
}

.header--mega-menu .fg-hours__status {
  gap: 0.5rem;
}

.header--mega-menu .fg-hours__line1 {
  gap: 0.5rem;
}

/* ========================================
   ACCOUNT BUTTON - MODERN REDESIGN
   ======================================== */

.header--mega-menu .header__account {
  position: relative;
}

.header--mega-menu .header__account summary.header__icon--account {
  display: flex;
  align-items: center;
  padding: 0;
  list-style: none;
  cursor: pointer;
}

.header--mega-menu .header__account summary.header__icon--account::-webkit-details-marker {
  display: none;
}

.header--mega-menu .header__account .header__summary-block {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 1.4rem;
  background-color: rgba(var(--color-foreground), 0.04);
  border: 1px solid rgba(var(--color-foreground), 0.08);
  border-radius: 5rem;
  transition: all 0.2s ease;
}

.header--mega-menu .header__account .header__summary-block:hover {
  background-color: rgba(var(--color-foreground), 0.07);
  border-color: rgba(var(--color-foreground), 0.12);
}

.header--mega-menu .header__account details[open] .header__summary-block {
  background-color: rgba(var(--color-foreground), 0.08);
  border-color: rgba(var(--color-foreground), 0.15);
}

.header--mega-menu .header__account .header__summary-block .icon-account {
  width: 2.2rem;
  height: 2.2rem;
  flex-shrink: 0;
}

.header--mega-menu .header__account .header__summary-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
}

.header--mega-menu .header__account .header__summary-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 600;
  color: rgb(var(--color-foreground));
  white-space: nowrap;
}

.header--mega-menu .header__account .header__summary-subtitle {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 400;
  color: rgba(var(--color-foreground), 0.6);
  white-space: nowrap;
}

/* Account Dropdown Modal */
.header--mega-menu .header__account-modal {
  position: absolute;
  top: calc(100% + 0.8rem);
  right: 0;
  min-width: 24rem;
  padding: 1.6rem;
  background: rgb(var(--color-background));
  border: 1px solid rgba(var(--color-foreground), 0.1);
  border-radius: 1.2rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  z-index: 100;
}

.header--mega-menu .header__account__account {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.header--mega-menu .header__account__name {
  font-size: 1.5rem;
  font-weight: 700;
  color: rgb(var(--color-foreground));
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(var(--color-foreground), 0.08);
}

.header--mega-menu .header__account__body {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.header--mega-menu .header__account__body li a {
  display: block;
  padding: 0.8rem 1rem;
  font-size: 1.4rem;
  font-weight: 500;
  color: rgb(var(--color-foreground));
  text-decoration: none;
  border-radius: 0.6rem;
  transition: background-color 0.15s ease;
}

.header--mega-menu .header__account__body li a:hover {
  background-color: rgba(var(--color-foreground), 0.05);
}

.header--mega-menu .header__account__logout {
  margin-top: 0.8rem;
  width: 100%;
  text-align: center;
  font-size: 1.3rem;
  padding: 1rem 1.6rem;
  border-radius: 0.8rem;
}

/* Login button for non-logged users */
.header--mega-menu .header__account__login {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  width: 100%;
  padding: 1.2rem 1.6rem;
  font-size: 1.4rem;
  font-weight: 600;
  border-radius: 0.8rem;
}

.header--mega-menu .header__account__register {
  display: block;
  margin-top: 1rem;
  text-align: center;
  font-size: 1.3rem;
  color: rgba(var(--color-foreground), 0.7);
}

.header--mega-menu .header__account__register:hover {
  color: rgb(var(--color-foreground));
}

/* ========================================
   MOBILE ADJUSTMENTS
   ======================================== */

@media screen and (max-width: 999px) {
  .header--mega-menu .header__search {
    order: 4;
    flex-basis: 100%;
    margin-top: 1rem;
  }

  .header--mega-menu .header__search .field {
    min-height: 4.6rem;
    border-radius: 2.3rem;
  }

  .header--mega-menu .header__search .search__input.field__input {
    min-height: 4.2rem;
    font-size: 1.6rem;
    padding: 0.8rem 5rem 0.8rem 1.8rem;
  }

  .header--mega-menu .header__search .search__button {
    width: 3.6rem;
    height: 3.6rem;
    right: 0.5rem;
  }

  .search-ticker {
    left: 1.8rem;
    font-size: 1.6rem;
  }

  /* Hide account text on mobile */
  .header--mega-menu .header__account .header__summary-body {
    display: none;
  }

  .header--mega-menu .header__account .header__summary-block {
    padding: 0.8rem;
    border-radius: 0.8rem;
  }
}

/* ========================================
   SMALL MENU CLEANUP
   ======================================== */

.header--mega-menu .small-menu {
  display: none;
}

@media screen and (min-width: 1400px) {
  .header--mega-menu .small-menu {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-right: 1.2rem;
  }

  .header--mega-menu .small-menu__link {
    padding: 0.6rem 1rem;
    font-size: 1.3rem;
    font-weight: 500;
    border-radius: 0.6rem;
    transition: background-color 0.2s ease;
  }

  .header--mega-menu .small-menu__link:hover {
    background-color: rgba(var(--color-foreground), 0.05);
  }
}

/* ========================================
   CONTACT BLOCK - HIDE ON HEADER TOP
   ======================================== */

.header--mega-menu .header__contact {
  display: none;
}

/* ========================================
   HEADER DRAWER BUTTON
   ======================================== */

.header--mega-menu header-drawer .header__icon {
  width: 4.4rem;
  height: 4.4rem;
}

@media screen and (min-width: 1000px) {
  .header--mega-menu header-drawer {
    display: none;
  }
}

/* ========================================
   OVERLAY FOR SEARCH FOCUS
   ======================================== */

.header--mega-menu .header__overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: -1;
}

.header--mega-menu .header__search:focus-within .header__overlay {
  opacity: 1;
  visibility: visible;
}

/* ========================================
   CART ICON
   ======================================== */

.header--mega-menu .header__icon--cart {
  position: relative;
}

.header--mega-menu .cart-count-bubble {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  min-width: 1.8rem;
  height: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(var(--color-button));
  color: rgb(var(--color-button-text));
  font-size: 1rem;
  font-weight: 700;
  border-radius: 50%;
}

/* ========================================
   MEGA MENU - CLEAN REWRITE
   Simple, reliable positioning
   ======================================== */

/* Make the whole header the positioning context for mega menu */
.header--mega-menu {
  position: relative !important;
}

/* Navigation Bar styling */
.header--mega-menu .header__bottom-inner {
  position: static !important;
  border-top: 1px solid rgba(var(--color-foreground), 0.08);
  border-bottom: none;
  padding-top: 0;
  padding-bottom: 0;
}

.header--mega-menu .header-menu__wraper {
  position: static !important;
  min-height: auto;
}

.header--mega-menu .header-menu__nav {
  position: static !important;
  overflow-x: auto;
  overflow-y: visible;
  width: 100%;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.header--mega-menu .header-menu__nav::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

/* Wrapper for mega-menu items: button + dropdown panel are siblings inside this div */
.header__mega-menu-item {
  position: static;
  flex-shrink: 0;
}

/* Main Nav Links - compact padding for slim nav bar */
/* Button reset: native <button> used for accessibility (was <div role="button">) */
.header--mega-menu button.header__main-link {
  background: none;
  border: none;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
  line-height: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.header--mega-menu .header__main-link {
  position: static !important;
  padding: 0.9rem 1.4rem;
  font-size: 1.35rem;
  font-weight: 600;
  white-space: nowrap;
}

.header--mega-menu .header__main-link:hover {
  color: rgb(var(--color-button));
}

/* Active category indicator — highlights current section in nav */
.header--mega-menu .header__main-link--active {
  color: rgb(var(--color-button));
  position: relative;
}
.header--mega-menu .header__main-link--active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 1.4rem;
  right: 1.4rem;
  height: 2px;
  background-color: rgb(var(--color-button));
  border-radius: 1px;
}
.header--mega-menu .header__main-link--active:first-child::after {
  left: 0;
}

.header--mega-menu .header-menu__nav > div:first-child .header__main-link {
  padding-left: 0;
}

/* View All Button */
.header--mega-menu .mega-menu-new__view-all {
  padding: 0.8rem;
  background: none;
  border: none;
  cursor: pointer;
  color: rgb(var(--color-foreground));
  border-radius: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.header--mega-menu .mega-menu-new__view-all:hover {
  background: rgba(var(--color-foreground), 0.06);
}

.header--mega-menu .mega-menu-new__view-all svg {
  width: 2rem;
  height: 2rem;
}

/* ========================================
   MEGA MENU DROPDOWN - ABSOLUTE POSITIONING
   Positioned relative to header__bottom-inner
   Override base.css positioning (bottom: 0, transform)
   ======================================== */

.header--mega-menu .mega-menu-new {
  position: absolute !important;
  top: 100% !important;
  bottom: auto !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  background: rgb(var(--color-background));
  border-top: 1px solid rgba(var(--color-foreground), 0.08);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
  z-index: 1000;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  padding-bottom: 2rem;
  box-sizing: border-box;
  /* Animation: fade + slide */
  opacity: 0;
  transform: translateY(-8px) !important;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s 0.2s;
}

/* Open state — animate in */
.header--mega-menu .mega-menu-new.open {
  opacity: 1;
  transform: translateY(0) !important;
  pointer-events: auto;
  visibility: visible;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s 0s;
}

/* Inner Container - use existing container class */
.header--mega-menu .mega-menu-new > .container {
  max-width: 100%;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* ========================================
   MEGA MENU HEADER
   ======================================== */

.header--mega-menu .mega-menu-new__close-btn {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--color-foreground), 0.05);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  color: rgb(var(--color-foreground));
  font: inherit;
  line-height: 1;
}

.header--mega-menu .mega-menu-new__close-btn:hover {
  background: rgba(var(--color-foreground), 0.1);
}

.header--mega-menu .mega-menu-new__close-btn svg {
  width: 1.4rem;
  height: 1.4rem;
}

/* ========================================
   MEGA MENU — 3+1 COLUMN LAYOUT
   3 category columns + 1 promotional column
   ======================================== */

/* Outer layout wrapper */
.header--mega-menu .mega-menu-new__layout {
  display: grid;
  grid-template-columns: 1fr 24rem;
  gap: 0;
  align-items: start;
}

/* Category columns area (3 columns) */
.header--mega-menu .mega-menu-new__sub-collections {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding: 0;
}

/* Hide empty columns */

/* Category group within column */

/* Category header links */
.header--mega-menu .mega-menu-new__child-link {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: rgb(var(--color-foreground));
  text-decoration: none;
  margin-bottom: 0.8rem;
}

.header--mega-menu .mega-menu-new__child-link:hover {
  color: rgb(var(--color-button));
}

/* Grandchild links container */
.header--mega-menu .mega-menu-new__grandchild-links {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* Grandchild links */
.header--mega-menu .mega-menu-new__grandchild-link {
  display: block;
  font-size: 1.35rem;
  font-weight: 400;
  color: rgba(var(--color-foreground), 0.75);
  text-decoration: none;
  line-height: 1.5;
}

.header--mega-menu .mega-menu-new__grandchild-link:hover {
  color: rgb(var(--color-button));
}

/* ── Group-aware packing support (B-1) ── */
/* Nav landmark wraps the link columns; keep it from blowing out the grid track */
.header--mega-menu .mega-menu-new__nav {
  min-width: 0;
}

/* Non-interactive group heading (parent points to #) */

/* Flat childless link — reads as a regular link, not a bold heading */
.header--mega-menu .mega-menu-new__child-link--flat {
  font-weight: 400;
  font-size: 1.35rem;
  color: rgba(var(--color-foreground), 0.75);
  margin-bottom: 0;
}

.header--mega-menu .mega-menu-new__child-link--flat:hover {
  color: rgb(var(--color-button));
}

/* Tighten spacing between consecutive flat links (override the 2rem group gap) */

/* ── "Voir tout" link in header ── */

/* ── Promotional column ── */
.header--mega-menu .mega-menu-new__promo {
  border-left: 1px solid rgba(var(--color-foreground), 0.06);
  padding-left: 2rem;
}

/* ========================================
   MEGA MENU — Mini product cards (promo column)
   ======================================== */

.header--mega-menu .mega-menu-new__promo {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Badges */

/* ========================================
   MEGA MENU — Feature card (B-3)
   Merchant-controlled promo slot; reuses the product-card visual language.
   ======================================== */

.header--mega-menu .mega-menu-new__feature-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: rgb(var(--color-foreground));
  border-radius: 0.8rem;
  overflow: hidden;
  background: rgba(var(--color-foreground), 0.04);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.header--mega-menu .mega-menu-new__feature-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.header--mega-menu .mega-menu-new__feature-media {
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: rgba(var(--color-foreground), 0.04);
}

.header--mega-menu .mega-menu-new__feature-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.header--mega-menu .mega-menu-new__feature-body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.6rem;
}

.header--mega-menu .mega-menu-new__feature-heading {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.25;
}

.header--mega-menu .mega-menu-new__feature-text {
  font-size: 1.3rem;
  color: rgba(var(--color-foreground), 0.75);
  line-height: 1.4;
}

.header--mega-menu .mega-menu-new__feature-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.2rem;
  font-size: 1.4rem;
  font-weight: 600;
  color: rgb(var(--color-button));
}

.header--mega-menu .mega-menu-new__feature-card:hover .mega-menu-new__feature-cta {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

/* ========================================
   Overflow hamburger (≡): dead at >=1200px (drawer is display:none there) and the
   curated 13-item bar no longer needs an overflow hatch. Hide it (B-7.2).
   ======================================== */
@media screen and (min-width: 1000px) {
  .header--mega-menu .mega-menu-new__view-all {
    display: none;
  }
}

/* ========================================
   Drawer pickup line (B-5) — both pickup points always named
   ======================================== */
.menu-drawer__pickup {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0 0 1.2rem;
  padding: 0.8rem 0;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.35;
  color: rgb(var(--color-foreground));
}

.menu-drawer__pickup svg {
  flex-shrink: 0;
  color: rgb(var(--color-button));
}

/* Product info */

/* Image fallback placeholder (shown when no featured_media) */

/* Hide placeholder when image exists */

/* Image fade-in on load */

/* ========================================
   RESPONSIVE
   ======================================== */

@media screen and (max-width: 999px) {
  .header--mega-menu .header__bottom-inner {
    display: none;
  }
}

@media screen and (min-width: 1000px) and (max-width: 1399px) {
  .header--mega-menu .header__main-link {
    padding: 1.5rem 1.2rem;
    font-size: 1.3rem;
  }

  .header--mega-menu .mega-menu-new__layout {
    grid-template-columns: 1fr 22rem;
  }

  

  .header--mega-menu .mega-menu-new__child-link {
    font-size: 1.4rem;
  }

  .header--mega-menu .mega-menu-new__grandchild-link {
    font-size: 1.25rem;
  }

  .header--mega-menu .mega-menu-new__promo {
    padding-left: 1.5rem;
  }
}

@media screen and (min-width: 1600px) {
  .header--mega-menu .mega-menu-new__layout {
    grid-template-columns: 1fr 30rem;
  }

  

  .header--mega-menu .mega-menu-new__child-link {
    font-size: 1.6rem;
  }

  .header--mega-menu .mega-menu-new__grandchild-link {
    font-size: 1.4rem;
  }
}

/* ========================================
   CONTENT Z-INDEX CONTROL
   Ensure main content doesn't override dropdowns
   ======================================== */

/* Main content area - lower z-index than header dropdowns */
.content-for-layout,
main.content-for-layout,
#MainContent {
  position: relative;
  z-index: 1;
}

/* Shopify sections below header */
.shopify-section:not(.shopify-section-header):not(.shopify-section-cart-drawer):not(.shopify-section-group-overlay-group) {
  position: relative;
  z-index: 1;
}

/* Banner grid specifically - no stacking context interference */
.banner-grid,
.banner-grid__wrapper,
.banner-grid__item {
  /* Don't create new stacking contexts that could interfere */
  isolation: auto;
}

/* ========================================
   HEADER Z-INDEX HIERARCHY
   Ensure header elements stack correctly
   ======================================== */

.header--mega-menu .header__top {
  position: relative;
  z-index: 1001;
  background: rgb(var(--color-background));
}

/* ========================================
   MOBILE HEADER - REBUILT FROM SCRATCH
   Clean, reliable mobile layout
   ======================================== */

@media screen and (max-width: 989px) {
  /* ----------------------------------------
     MOBILE HEADER LAYOUT - TSC-INSPIRED
     Works on: Home, Collections, Products, etc.
     Row 1: Menu | Logo | Account + Cart
     Row 2: Search (full width, prominent pill)
     Row 3: Store Hours (compact strip)
     ---------------------------------------- */

  /* Main header container — CSS Grid for true logo centering
     Row 1: [left-icons] [logo-center] [right-icons]
     Row 2: [search — full width]
     Equal side columns ensure logo is screen-centered regardless of icon count */
  .header__top-inner,
  .header .header__top-inner,
  .header--mega-menu .header__top-inner,
  .shopify-section-header .header__top-inner {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 0.6rem 1rem 0.4rem !important;
    /* Extra padding at bottom for store hours strip */
    padding-bottom: 3rem !important;
    position: relative !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  /* HAMBURGER - Left column, align to start */
  header-drawer,
  .header header-drawer,
  .header--mega-menu header-drawer {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
  }

  header-drawer .header__icon--menu,
  header-drawer summary.header__icon--menu,
  .header header-drawer .header__icon--menu,
  .header--mega-menu header-drawer .header__icon--menu {
    width: 4.4rem !important;
    height: 4.4rem !important;
    min-width: 4.4rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  header-drawer .icon-hamburger,
  .header header-drawer .icon-hamburger,
  .header--mega-menu header-drawer .icon-hamburger {
    width: 2.2rem !important;
    height: 2.2rem !important;
  }

  /* LOGO - True center column (grid col 2)
     On index page: wraps in h1.header__heading
     On other pages: bare a.header__heading-link is a direct child */
  .header__heading,
  h1.header__heading,
  .header .header__heading,
  .header--mega-menu .header__heading,
  .header__top-inner > .header__heading-link,
  .header .header__top-inner > .header__heading-link,
  .header--mega-menu .header__top-inner > .header__heading-link {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 0.5rem !important;
    position: static !important;
    min-width: 0 !important;
  }

  .header__heading-link,
  .header .header__heading-link,
  .header--mega-menu .header__heading-link {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    max-width: 100% !important;
  }

  /* Logo — slightly larger for brand presence */
  .header__heading-logo,
  .header .header__heading-logo,
  .header--mega-menu .header__heading-logo {
    max-height: 4.4rem !important;
    height: auto !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
  }

  /* ICONS - Right column, align to end */
  .header__column,
  .header .header__column,
  .header--mega-menu .header__column {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
  }

  /* Phone icon — compact, icon-only on mobile, matches other header icons */
  

  

  

  /* Hide contact/small menu on mobile - ALL header types */
  .header__contact,
  .small-menu,
  .header--mega-menu .header__contact,
  .header--mega-menu .small-menu,
  .header .header__contact,
  .header .small-menu {
    display: none !important;
  }

  /* Icons container - ALL header types */
  .header__icons,
  .header .header__icons,
  .header--mega-menu .header__icons,
  .shopify-section-header .header__icons {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
  }

  /* Ensure last icon has proper spacing from edge */
  .header__icons > *:last-child,
  .header--mega-menu .header__icons > *:last-child {
    margin-right: 0;
  }

  /* Hide localization, color scheme on mobile — store hours stays */
  .header__localization,
  .header__icons > .color-scheme-toggle,
  .header--mega-menu .header__localization,
  .header--mega-menu .header__icons > .color-scheme-toggle,
  .header .header__localization,
  .header .header__icons > .color-scheme-toggle {
    display: none !important;
  }

  /* Account icon - ALL header types */
  .header__account,
  .header .header__account,
  .header--mega-menu .header__account,
  .shopify-section-header .header__account {
    display: flex !important;
    align-items: center !important;
  }

  .header__account .header__summary-block,
  .header .header__account .header__summary-block,
  .header--mega-menu .header__account .header__summary-block {
    padding: 0.6rem !important;
    background: transparent !important;
    border: none !important;
  }

  .header__account .header__summary-body,
  .header .header__account .header__summary-body,
  .header--mega-menu .header__account .header__summary-body {
    display: none !important;
  }

  .header__account .icon-account,
  .header .header__account .icon-account,
  .header--mega-menu .header__account .icon-account {
    width: 2.2rem !important;
    height: 2.2rem !important;
  }

  /* Cart icon - ALL header types */
  .header__icon--cart,
  .header .header__icon--cart,
  .header--mega-menu .header__icon--cart,
  .shopify-section-header .header__icon--cart {
    width: 4.4rem !important;
    height: 4.4rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: unset !important;
    position: relative !important;
  }

  .header__icon--cart .icon-cart,
  .header .header__icon--cart .icon-cart,
  .header--mega-menu .header__icon--cart .icon-cart {
    width: 2.2rem !important;
    height: 2.2rem !important;
  }

  .cart-count-bubble,
  .header .cart-count-bubble,
  .header--mega-menu .cart-count-bubble,
  .shopify-section-header .cart-count-bubble {
    position: absolute !important;
    top: 0.4rem !important;
    right: 0.4rem !important;
    width: 1.8rem !important;
    height: 1.8rem !important;
    min-width: 1.8rem !important;
    font-size: 1rem !important;
  }

  /* ----------------------------------------
     ROW 2: SEARCH BAR (FULL WIDTH)
     TSC-inspired — prominent, rounded pill
     ---------------------------------------- */
  .header__search,
  .header .header__search,
  .header--mega-menu .header__search,
  .shopify-section-header .header__search {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    margin: 0.4rem 0 0 0 !important;
    padding: 0 0 0.6rem 0 !important;
    /* CRITICAL: relative position for dropdown positioning */
    position: relative !important;
    z-index: 9999 !important;
  }

  .header__search .field,
  .header .header__search .field,
  .header--mega-menu .header__search .field {
    min-height: 4.2rem !important;
    border-radius: 2.4rem !important;
    position: relative !important;
    z-index: 201 !important;
    /* Subtle gray tint like TSC search pill */
    background-color: rgba(var(--color-foreground), 0.04) !important;
    border: 1.5px solid rgba(var(--color-foreground), 0.12) !important;
  }

  .header__search .search__input.field__input,
  .header .header__search .search__input.field__input,
  .header--mega-menu .header__search .search__input.field__input {
    min-height: 3.8rem !important;
    font-size: 1.6rem !important;
    padding: 0.8rem 5rem 0.8rem 1.6rem !important;
    border-radius: 2.4rem !important;
    background: transparent !important;
  }

  .header__search .search__button,
  .header .header__search .search__button,
  .header--mega-menu .header__search .search__button {
    width: 3.4rem !important;
    height: 3.4rem !important;
    right: 0.4rem !important;
  }

  .header__search .search__button .icon-search,
  .header .header__search .search__button .icon-search,
  .header--mega-menu .header__search .search__button .icon-search {
    width: 1.6rem !important;
    height: 1.6rem !important;
  }

  .search-ticker,
  .header .search-ticker,
  .header--mega-menu .search-ticker {
    font-size: 1.6rem !important;
    left: 1.6rem !important;
  }

  /* Predictive search dropdown - absolute position below search */
  .predictive-search,
  .predictive-search--header,
  .header .predictive-search,
  .header .predictive-search--header,
  .header--mega-menu .predictive-search,
  .header--mega-menu .predictive-search--header {
    position: absolute !important;
    top: calc(100% + 0.5rem) !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    z-index: 2147483646 !important;
    border-radius: 1.2rem !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25) !important;
    max-height: 50vh !important;
    overflow-y: auto !important;
    background: rgb(var(--color-background)) !important;
    border: 1px solid rgba(var(--color-foreground), 0.1) !important;
  }

  /* Ensure search container is the positioning context */
  .header__search,
  .header .header__search,
  .header--mega-menu .header__search {
    position: relative !important;
    z-index: 9999 !important;
  }

  /* Search form needs to be positioning context too */
  .header__search .search__content,
  .header__search details,
  .header .header__search .search__content,
  .header .header__search details,
  .header--mega-menu .header__search .search__content,
  .header--mega-menu .header__search details {
    position: relative !important;
  }

  /* Hide dropdown button and shop drawer on mobile */
  header-drawer.header__shop {
    display: none !important;
  }
}

/* ----------------------------------------
   STORE HOURS - TSC-INSPIRED COMPACT STRIP
   Clean row below search bar
   ---------------------------------------- */

@media screen and (max-width: 989px) {
  /* Position store hours as a full-width strip at the bottom of header */
  .fg-hours,
  .header__icons > .fg-hours,
  .header .header__icons > .fg-hours,
  .header--mega-menu .header__icons > .fg-hours {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    z-index: 100 !important;
    margin: 0 !important;
    /* Subtle top border like TSC store locator strip */
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
    padding: 0.3rem 0 !important;
    background: rgba(var(--color-foreground), 0.02) !important;
  }

  /* Store hours toggle button — compact, clean */
  .fg-hours__toggle {
    font-size: 1.15rem !important;
    padding: 0.15rem 0.6rem !important;
    gap: 0.4rem !important;
  }

  /* Store name slightly bolder */
  .fg-hours__store-name {
    font-weight: 700 !important;
    font-size: 1.15rem !important;
  }

  /* Smaller status dot */
  .fg-hours__dot {
    width: 7px !important;
    height: 7px !important;
  }

  .fg-hours__text {
    font-size: 1.1rem !important;
  }
}

/* ========================================
   COLLAPSING STICKY HEADER — Mobile only
   When body.header--collapsed is set, the search row, store hours, phone and
   announcement bar hide to leave a slim bar (hamburger, mini logo, cart).

   Perf (defect #17): the collapse animates ONLY transform + opacity (compositor,
   no reflow). Height / padding / width are reclaimed instantly in a single layout
   pass on toggle instead of being animated over 0.3s every frame. The toggle fires
   once at the scroll threshold (body.header--collapsed), not per scroll pixel.
   ======================================== */
@media screen and (max-width: 749px) {
  /* Only transform + opacity are transitioned; visibility flips after the fade. */
  .header__search,
.fg-hours,
.announcement-bar {
    transition: transform 0.24s ease, opacity 0.18s ease;
    will-change: transform, opacity;
  }

  /* ── Collapsed: search bar ── */
  body.header--collapsed .header__search {
    opacity: 0 !important;
    transform: translateY(-6px) !important;
    visibility: hidden !important;
    /* space reclaimed instantly (not transitioned) */
    max-height: 0 !important;
    overflow: hidden !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
  }

  /* ── Collapsed, but the shopper tapped Search in the bottom bar: show the field in the slim header ── */
  body.header--collapsed.header--search-open .header__search {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    max-height: none !important;
    overflow: visible !important;
    padding-top: 0.4rem !important;
    padding-bottom: 0.6rem !important;
    pointer-events: auto !important;
  }

  /* ── Collapsed: store hours strip ── */
  body.header--collapsed .fg-hours {
    opacity: 0 !important;
    transform: translateY(-6px) !important;
    visibility: hidden !important;
    max-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    border: none !important;
  }

  /* ── Collapsed: phone icon ── */
  

  /* ── Collapsed: shrink logo (instant, no layout animation) ── */
  body.header--collapsed .header__heading-logo {
    max-height: 3rem !important;
  }

  /* ── Collapsed: reduce container padding (instant) ── */
  body.header--collapsed .header__top-inner {
    padding: 0.4rem 1rem !important;
    padding-bottom: 0.4rem !important;
  }

  /* ── Collapsed: announcement bar ── */
  body.header--collapsed .announcement-bar {
    opacity: 0 !important;
    transform: translateY(-100%) !important;
    visibility: hidden !important;
    max-height: 0 !important;
    overflow: hidden !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    pointer-events: none !important;
  }

  /* Respect reduced-motion: no transform/opacity animation, straight to collapsed. */
  @media (prefers-reduced-motion: reduce) {
    .header__search,
.fg-hours,
.announcement-bar {
      transition: none !important;
    }
  }
}

/* ----------------------------------------
   Z-INDEX HIERARCHY FOR MOBILE HEADER
   iOS Safari Compatible - ensure dropdowns above ALL content
   Works on ALL page types: home, collections, products, etc.
   ---------------------------------------- */
@media screen and (max-width: 989px) {
  /*
   * iOS Safari z-index stacking context fix:
   * - Use maximum valid z-index values
   * - Apply to ALL header variations
   * - Ensure proper hierarchy: header < search < account < store hours
   */

  /* Header section - sticky with high z-index */
  .shopify-section-header {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 900 !important;
  }

  /* Header wrapper - ALL variations */
  .header-wrapper {
    position: relative !important;
    z-index: 900 !important;
    background: rgb(var(--color-background)) !important;
  }

  /* The header itself - ALL variations */
  .header,
  .header--mega-menu {
    position: relative !important;
    z-index: 900 !important;
    background: rgb(var(--color-background)) !important;
  }

  .header__top,
  .header .header__top,
  .header--mega-menu .header__top {
    position: relative !important;
    z-index: 900 !important;
    background: rgb(var(--color-background)) !important;
  }

  /* Account dropdown - fixed position for iOS - ALL variations */
  .header__account-modal,
  .header .header__account-modal,
  .header--mega-menu .header__account-modal {
    position: fixed !important;
    z-index: 2147483645 !important;
    top: auto !important;
    right: 1rem !important;
    /* GPU layer */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  /* Search content container - ALL variations */
  .header__search .search__content,
  .header .header__search .search__content,
  .header--mega-menu .header__search .search__content {
    position: relative !important;
    z-index: 2147483644 !important;
  }

  /* Store hours dropdown - maximum z-index - ALL variations */
  .fg-hours__dropdown {
    z-index: 2147483647 !important;
    /* GPU layer for iOS - no translateX since we use margin auto for centering */
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
}

/* ----------------------------------------
   CART DRAWER Z-INDEX
   Cart drawer must appear ABOVE header
   ---------------------------------------- */
cart-drawer,
.cart-drawer,
#cart-drawer,
[id^="cart-drawer"],
.drawer,
.shopify-section-cart-drawer {
  z-index: 1000000 !important;
}

cart-drawer .drawer__inner,
.cart-drawer .drawer__inner,
.drawer .drawer__inner {
  z-index: 1000001 !important;
}

/* Cart drawer overlay - covers everything including header */
cart-drawer .drawer__overlay,
.cart-drawer .drawer__overlay,
.drawer__overlay,
cart-drawer::before {
  z-index: 999999 !important;
}

/* ========================================
   MOBILE DRAWER MENU - ENHANCED STYLING
   Modern, clean design matching mega menu
   ======================================== */

.header--mega-menu .menu-drawer {
  background: rgb(var(--color-background));
  box-shadow: 4px 0 30px rgba(0, 0, 0, 0.15);
}

@media screen and (max-width: 989px) {
  /*
   * MOBILE DRAWER - Full width on mobile
   * The base component-menu-drawer.css handles the drawer itself
   * We just need to ensure proper sizing and scroll behavior
   */

  /* Drawer dimensions - FULL WIDTH on mobile */
  .header--mega-menu .menu-drawer {
    width: 100% !important;
    max-width: none !important;
    z-index: 100000 !important;
  }

  /* Inner container layout */
  .header--mega-menu .menu-drawer__inner-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* Navigation container - main scrollable area */
  .header--mega-menu .menu-drawer__navigation-container {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  /* Utility links at bottom - don't shrink */
  .header--mega-menu .menu-drawer__utility-links {
    flex-shrink: 0;
  }

  /* Ensure the overlay/backdrop appears */
  .header--mega-menu header-drawer > details > summary::before {
    z-index: 99999 !important;
  }
}

/* ----------------------------------------
   SMALL SCREEN ADJUSTMENTS (< 480px)
   ALL page types
   ---------------------------------------- */
@media screen and (max-width: 480px) {
  /* Header padding - compact with store hours strip */
  .header__top-inner,
  .header .header__top-inner,
  .header--mega-menu .header__top-inner,
  .shopify-section-header .header__top-inner {
    padding: 0.5rem 0.6rem 2.6rem !important;
    min-height: 4rem !important;
  }

  /* Logo — slightly smaller on very small screens */
  .header__heading-logo,
  .header .header__heading-logo,
  .header--mega-menu .header__heading-logo {
    max-height: 3.6rem !important;
  }

  /* Hamburger button - ALL variations */
  header-drawer .header__icon--menu,
  header-drawer summary.header__icon--menu,
  .header header-drawer .header__icon--menu,
  .header--mega-menu header-drawer .header__icon--menu {
    width: 4rem !important;
    height: 4rem !important;
  }

  /* Cart icon - ALL variations */
  .header__icon--cart,
  .header .header__icon--cart,
  .header--mega-menu .header__icon--cart {
    width: 4rem !important;
    height: 4rem !important;
    margin-right: 0 !important;
  }

  /* Search - tighter on small screens */
  .header__search,
  .header .header__search,
  .header--mega-menu .header__search {
    margin: 0.3rem 0 0 0 !important;
    padding: 0 0 0.5rem 0 !important;
  }

  .header__search .field,
  .header .header__search .field,
  .header--mega-menu .header__search .field {
    min-height: 3.8rem !important;
  }

  .header__search .search__input.field__input,
  .header .header__search .search__input.field__input,
  .header--mega-menu .header__search .search__input.field__input {
    font-size: 1.6rem !important;
    min-height: 3.4rem !important;
  }

  .header__search .search__button,
  .header .header__search .search__button,
  .header--mega-menu .header__search .search__button {
    width: 3rem !important;
    height: 3rem !important;
  }
}

/* ========================================
   DRAWER NAVIGATION STYLING
   ======================================== */

/* Navigation Container — Accordion Drawer */
.header--mega-menu .menu-drawer__navigation-container {
  padding-top: 0;
}

.header--mega-menu .menu-drawer__navigation {
  padding: 0;
}

/* ── Primary menu items with icons ── */
.header--mega-menu .menu-drawer__menu .menu-drawer__menu-item {
  font-family: var(--font-heading-family);
  font-weight: 600;
  font-size: 1.5rem;
  color: rgb(var(--color-foreground));
  text-transform: none;
  letter-spacing: 0;
  transition: color 0.2s ease, background-color 0.15s ease;
}

.header--mega-menu .menu-drawer__menu .menu-drawer__menu-item:hover {
  color: rgb(var(--color-button));
}

/* Active state with left accent */
.header--mega-menu .menu-drawer__menu-item--active {
  color: rgb(var(--color-button));
  background-color: rgba(var(--color-button), 0.04);
  box-shadow: inset 3px 0 0 rgb(var(--color-button));
}

/* ── Accordion content animations ── */
.header--mega-menu .menu-drawer__accordion-content {
  animation: drawerAccordionOpen 0.25s ease;
}

@keyframes drawerAccordionOpen {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 100vh;
  }
}

/* "Voir tout" links — prominent red */
.header--mega-menu .menu-drawer__voir-tout {
  color: rgb(var(--color-button));
  font-weight: 600;
}

/* ── Utility section styling ── */
.header--mega-menu .menu-drawer__utility-section {
  background: rgba(var(--color-foreground), 0.02);
}

.header--mega-menu .menu-drawer__utility-link {
  font-size: 1.4rem;
  font-weight: 500;
}

/* ── Account Button ── */
.header--mega-menu .menu-drawer__account.button--primary {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 1.4rem 2rem;
  font-size: 1.4rem;
  font-weight: 600;
  border-radius: 0.8rem;
}

.header--mega-menu .menu-drawer__account .icon-account {
  width: 1.8rem;
  height: 1.8rem;
}

/* ── Logged In User Account Section ── */
.header--mega-menu .menu-drawer__utility-account {
  margin-bottom: 1.6rem;
}

.header--mega-menu .menu-drawer__utility-account-header {
  padding-bottom: 0.8rem;
  margin-bottom: 0.8rem;
  border-bottom: 1px solid rgba(var(--color-foreground), 0.06);
}

.header--mega-menu .menu-drawer__utility-name {
  font-size: 1.5rem;
  font-weight: 700;
  color: rgb(var(--color-foreground));
}

.header--mega-menu .menu-drawer__utility-logout {
  font-size: 1.3rem;
  color: rgb(var(--color-button));
  font-weight: 500;
}

.header--mega-menu .menu-drawer__utility-account-body {
  padding: 0.8rem 1.2rem;
  background: rgba(var(--color-foreground), 0.03);
  border-radius: 0.8rem;
}

.header--mega-menu .menu-drawer__utility-account-body li a {
  font-size: 1.4rem;
  padding: 0.8rem 0;
  color: rgba(var(--color-foreground), 0.8);
}

.header--mega-menu .menu-drawer__utility-account-body li a:hover {
  color: rgb(var(--color-button));
}

/* ── Social Links ── */
.header--mega-menu .menu-drawer .list-social {
  margin-top: 2rem;
  gap: 1.2rem;
}

.header--mega-menu .menu-drawer .list-social__link {
  width: 3.6rem;
  height: 3.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--color-foreground), 0.05);
  border-radius: 50%;
  color: rgba(var(--color-foreground), 0.5);
  transition: all 0.2s ease;
}

.header--mega-menu .menu-drawer .list-social__link:hover {
  background: rgba(var(--color-button), 0.1);
  color: rgb(var(--color-button));
}

.header--mega-menu .menu-drawer .list-social__link .icon {
  width: 1.6rem;
  height: 1.6rem;
}

/* ── Localization Selectors ── */
.header--mega-menu .menu-drawer__localization-wrapper {
  margin-bottom: 1.2rem;
}

.header--mega-menu .menu-drawer__localization {
  margin-bottom: 0.8rem;
}

.header--mega-menu .menu-drawer__localization:last-child {
  margin-bottom: 0;
}

.header--mega-menu .menu-drawer__localization .localization-selector {
  padding: 0.8rem 1.2rem;
  background: rgba(var(--color-foreground), 0.04);
  border-radius: 0.6rem;
  font-size: 1.3rem;
  font-weight: 500;
}

.header--mega-menu .menu-drawer__localization .localization-selector:hover {
  background: rgba(var(--color-foreground), 0.08);
}

.header--mega-menu .menu-drawer .mega-menu__item-button-wrapper {
  position: relative;
  z-index: 1;
  margin-top: 0.8rem;
}

.header--mega-menu .menu-drawer .mega-menu__item-button {
  font-size: 1.2rem;
  padding: 0.6rem 1rem;
}

/* ========================================
   BOTTOM NAVIGATION BAR — Mobile only
   Fixed bar at bottom with Home, Search,
   Categories, Cart, Account
   ======================================== */

.bottom-nav {
  display: none;
}

@media screen and (max-width: 749px) {
  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 899;
    height: 5.6rem;
    background: rgb(var(--color-background));
    border-top: 1px solid rgba(var(--color-foreground), 0.08);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
    align-items: stretch;
    justify-content: space-around;
    transition: transform 0.3s ease;
  }

  /* Auto-hide on scroll down */
  .bottom-nav--hidden {
    transform: translateY(calc(100% + env(safe-area-inset-bottom, 0px)));
  }

  /* Individual nav items */
  .bottom-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
    padding: 0.4rem 0;
    gap: 0.2rem;
    text-decoration: none;
    color: rgba(var(--color-foreground), 0.72); /* was 0.5: 3.8:1 contrast at 10 px, below the 4.5:1 minimum */
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-body-family);
    -webkit-tap-highlight-color: transparent;
    transition: color 0.2s ease;
  }

  .bottom-nav__item:hover,
  .bottom-nav__item:active {
    color: rgba(var(--color-foreground), 0.8);
  }

  .bottom-nav__item--active {
    color: rgb(var(--color-button));
  }

  /* Icons */
  .bottom-nav__icon {
    width: 2.2rem;
    height: 2.2rem;
    flex-shrink: 0;
  }

  .bottom-nav__icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Cart badge */
  .bottom-nav__badge {
    position: absolute;
    top: -0.4rem;
    right: -0.6rem;
    min-width: 1.6rem;
    height: 1.6rem;
    padding: 0 0.4rem;
    border-radius: 0.8rem;
    background-color: rgb(var(--color-button));
    color: rgb(var(--color-button-text));
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.6rem;
    text-align: center;
  }

  /* Labels */
  .bottom-nav__label {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  /* Add bottom padding to page content so it's not hidden behind bottom nav */
  .content-for-layout {
    padding-bottom: 5.6rem;
  }

  /* Also ensure the menu drawer accounts for bottom nav */
  .js .menu-drawer {
    height: calc(100vh - 100% - 5.6rem) !important;
    height: calc(var(--viewport-height, 100vh) - var(--header-bottom-position, 100%) - 5.6rem) !important;
  }
}

/* ==========================================================================
   BRIEF #2 — MEGA MENU DESIGN LAYER (approved 2026-07-07)
   Tokens + type/colour/spacing/motion. Appended so these rules win over the
   earlier visual rules (equal specificity, later source). Multi-column layout
   replaces the old grid/column mechanism; product-card rules above are now dead.
   ========================================================================== */

.header-wrapper {
  --mm-accent: var(--color-accent, var(--color-button));
  --mm-ink: rgb(var(--color-foreground));
  --mm-ink-soft: rgba(var(--color-foreground), 0.75);
  --mm-ink-mute: rgba(var(--color-foreground), 0.55);
  --mm-ink-faint: rgba(var(--color-foreground), 0.45);
  --mm-surface: rgb(var(--color-background-2, var(--color-background)));
  --mm-surface-tint: rgb(var(--color-background));
  --mm-hairline: rgba(var(--color-foreground), 0.08);
  --mm-hairline-soft: rgba(var(--color-foreground), 0.06);
  --mm-radius-card: 0.8rem;
  --mm-shadow-card: 0 4px 16px rgba(0, 0, 0, 0.10);
  --mm-space-1: 0.4rem; --mm-space-2: 0.8rem; --mm-space-3: 1.2rem;
  --mm-space-4: 1.6rem; --mm-space-5: 2.4rem; --mm-space-6: 3.2rem;
  --mm-gutter: 4.8rem;
  --mm-font-heading: var(--font-heading-family);
  --mm-font-body: var(--font-body-family);
  --mm-w-heading: 600;
  --mm-eyebrow-size: 1.2rem;
  --mm-link-size: 1.4rem;
  --mm-dur-fast: 120ms; --mm-dur-base: 180ms;
  --mm-ease: cubic-bezier(0.2, 0, 0, 1);
  --mm-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --mm-title-color: rgb(var(--color-foreground-title, var(--color-foreground)));
  --mm-nav-size: 1.3rem;
  --mm-nav-pad-x: 0.8rem;
}
@media screen and (min-width: 1440px) { .header-wrapper { --mm-nav-size: 1.35rem; --mm-nav-pad-x: 1.2rem; } }
@media screen and (min-width: 1600px) { .header-wrapper { --mm-nav-size: 1.45rem; --mm-nav-pad-x: 1.4rem; } }

/* ── Top bar item (R7) ── */
.header--mega-menu .header__main-link {
  font-family: var(--mm-font-heading);
  font-weight: var(--mm-w-heading);
  font-size: var(--mm-nav-size);
  line-height: 1;
  color: var(--mm-title-color);
  padding: 1.5rem var(--mm-nav-pad-x);
  white-space: nowrap;
  transition: color var(--mm-dur-fast) var(--mm-ease);
}
.header--mega-menu .header-menu__nav > div:first-child .header__main-link,
.header--mega-menu .header__main-link:first-child { padding-left: 0; }
.header--mega-menu .header__main-link::after {
  content: ""; position: absolute; left: var(--mm-nav-pad-x); right: var(--mm-nav-pad-x);
  bottom: 0.9rem; height: 2px; border-radius: 1px; background: rgb(var(--mm-accent));
  transform: scaleX(0); transform-origin: center; transition: transform 160ms var(--mm-ease);
}
.header--mega-menu .header__main-link:hover { color: rgb(var(--mm-accent)); }
.header--mega-menu .header__main-link[aria-expanded="true"] { color: rgb(var(--mm-accent)); }
.header--mega-menu .header__main-link[aria-expanded="true"]::after { transform: scaleX(1); }
.header--mega-menu .header__main-link--active { color: var(--mm-title-color); }
.header--mega-menu .header__main-link--active::after { transform: scaleX(1); background: var(--mm-title-color); }
.header--mega-menu .header__main-link--seasonal { color: rgb(var(--mm-accent)); }

/* ── Panel surface (D11) ── */
.header--mega-menu .mega-menu-new { background: var(--mm-surface); border-top: 1px solid var(--mm-hairline); }

.header--mega-menu .mega-menu-new__close-btn { color: var(--mm-ink-faint); }
.header--mega-menu .mega-menu-new__close-btn:hover { color: var(--mm-ink); }

/* ── Columns → CSS multi-column (§4.4) ── */
.header--mega-menu .mega-menu-new__nav { min-width: 0; }
.header--mega-menu .mega-menu-new__sub-collections {
  display: block;
  columns: 3;
  column-gap: var(--mm-gutter);
  column-rule: 1px solid var(--mm-hairline-soft);
  grid-template-columns: none;
}
.header--mega-menu .mm-group { break-inside: avoid; margin-bottom: var(--mm-space-5); }
.header--mega-menu .mm-group--flat { margin-bottom: var(--mm-space-2); }

/* ── Group heading = eyebrow (R2) ── */
.header--mega-menu .mega-menu-new__child-link {
  display: block; font-family: var(--mm-font-heading); font-weight: var(--mm-w-heading);
  font-size: var(--mm-eyebrow-size); line-height: 1.4; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--mm-ink-mute); margin-bottom: var(--mm-space-3);
}
a.mega-menu-new__child-link:hover { color: rgb(var(--mm-accent)); text-decoration: underline; text-underline-offset: 0.3rem; text-decoration-thickness: 1px; }
span.mega-menu-new__child-link { cursor: default; }

/* ── Child link (R3) ── */
.header--mega-menu .mega-menu-new__grandchild-links { display: flex; flex-direction: column; gap: 0; }
.header--mega-menu .mega-menu-new__grandchild-link {
  font-family: var(--mm-font-body); font-weight: 400; font-size: var(--mm-link-size);
  line-height: 1.5; color: var(--mm-ink-soft); padding-block: 0.4rem;
  transition: color var(--mm-dur-fast) var(--mm-ease);
}
.header--mega-menu .mega-menu-new__grandchild-link:hover { color: rgb(var(--mm-accent)); text-decoration: underline; text-underline-offset: 0.3rem; text-decoration-thickness: 1px; }

/* ── Flat link (R4): darker, sentence case, not a heading ── */
.header--mega-menu .mega-menu-new__child-link--flat {
  font-family: var(--mm-font-body); font-weight: 400; font-size: var(--mm-link-size);
  line-height: 1.5; text-transform: none; letter-spacing: normal; color: var(--mm-ink);
  margin-bottom: 0; padding-block: 0.4rem;
}
.header--mega-menu .mega-menu-new__child-link--flat:hover { color: rgb(var(--mm-accent)); text-decoration: underline; text-underline-offset: 0.3rem; }

/* ── Feature column + card (§4.5) ── */
.header--mega-menu .mega-menu-new__promo { display: block; gap: 0; border-left: 1px solid var(--mm-hairline-soft); padding-left: var(--mm-space-5); }
.header--mega-menu .mega-menu-new__feature-card {
  display: flex; flex-direction: column; text-decoration: none; color: var(--mm-ink);
  background: var(--mm-surface); border: 1px solid var(--mm-hairline);
  border-radius: var(--mm-radius-card); overflow: hidden;
  transition: transform var(--mm-dur-base) var(--mm-ease), box-shadow var(--mm-dur-base) var(--mm-ease);
}
.header--mega-menu .mega-menu-new__feature-card:hover { transform: translateY(-2px); box-shadow: var(--mm-shadow-card); }
.header--mega-menu .mega-menu-new__feature-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: rgba(var(--color-foreground), 0.05); }
.header--mega-menu .mega-menu-new__feature-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s var(--mm-ease); }
.header--mega-menu .mega-menu-new__feature-card:hover .mega-menu-new__feature-img { transform: scale(1.03); }
.header--mega-menu .mega-menu-new__feature-body { display: flex; flex-direction: column; gap: var(--mm-space-1); padding: var(--mm-space-4); }
.header--mega-menu .mega-menu-new__feature-heading { font-family: var(--mm-font-heading); font-weight: var(--mm-w-heading); font-size: 1.6rem; line-height: 1.25; color: var(--mm-ink); }
.header--mega-menu .mega-menu-new__feature-text { font-family: var(--mm-font-body); font-size: 1.3rem; line-height: 1.4; color: var(--mm-ink-mute); }
.header--mega-menu .mega-menu-new__feature-cta { display: inline-flex; align-items: center; gap: var(--mm-space-1); margin-top: var(--mm-space-2); font-family: var(--mm-font-heading); font-weight: var(--mm-w-heading); font-size: 1.35rem; color: rgb(var(--mm-accent)); }

/* ── Focus-visible (R8) ── */
.header--mega-menu .header__main-link:focus-visible,
.header--mega-menu .mega-menu-new__grandchild-link:focus-visible,
.header--mega-menu a.mega-menu-new__child-link:focus-visible {
  outline: 2px solid rgb(var(--mm-accent)); outline-offset: 2px; border-radius: 2px;
}
.header--mega-menu .mega-menu-new__feature-card:focus-visible { outline: 2px solid rgb(var(--mm-accent)); outline-offset: -2px; }

/* ── Reduced motion (§4.9) ── */
@media (prefers-reduced-motion: reduce) {
  .header--mega-menu .header__main-link,
  .header--mega-menu .header__main-link::after,
  .header--mega-menu .mega-menu-new__grandchild-link,
  .header--mega-menu .mega-menu-new__feature-card,
  .header--mega-menu .mega-menu-new__feature-img { transition: none !important; }
}

/* ── Brief #2 drawer deltas (§4.7) — no category icons; surface + affordance ── */
.menu-drawer__item-label { font-family: var(--mm-font-heading); font-weight: 600; }

/* Chevron: bigger caret, accent on open (D10) */
.menu-drawer__chevron .icon-caret { width: 1.4rem; height: 1.4rem; }
.menu-drawer__chevron { transition: transform 200ms var(--mm-ease), color var(--mm-dur-fast); }
.menu-drawer__accordion[open] > summary > .menu-drawer__chevron { color: rgb(var(--mm-accent)); }
.menu-drawer__accordion[open] > summary .menu-drawer__item-label { color: rgb(var(--mm-accent)); }

/* Open accordion sits on a white inset surface (D14) */
.menu-drawer__accordion-content,
.header--mega-menu .menu-drawer__accordion-content {
  background: var(--mm-surface);
  border-top: none;
  box-shadow: inset 0 1px 0 var(--mm-hairline), inset 0 -1px 0 var(--mm-hairline);
}
.menu-drawer__accordion-content--nested { background: rgba(var(--color-foreground), 0.02); box-shadow: none; }

/* Links inside the drawer → accent, current-item bar */
.menu-drawer__voir-tout { color: rgb(var(--mm-accent)); }
.menu-drawer__submenu-item { color: var(--mm-ink-soft); font-family: var(--mm-font-body); }
.menu-drawer__submenu-item.menu-drawer__menu-item--active,
.menu-drawer__submenu-item[aria-current="page"] {
  color: rgb(var(--mm-accent));
  box-shadow: inset 3px 0 0 rgb(var(--mm-accent));
}
.menu-drawer__section-divider span { color: var(--mm-ink-faint); }
.menu-drawer__section-divider::after { background-color: var(--mm-hairline); }

/* Pickup card (§4.7) — overrides the earlier single-line rule */
.menu-drawer__pickup {
  display: flex; align-items: center; gap: var(--mm-space-3);
  margin: 1.6rem; padding: 1.4rem 1.6rem;
  background: var(--mm-surface); border: 1px solid var(--mm-hairline);
  border-radius: var(--mm-radius-card); text-decoration: none;
}
.menu-drawer__pickup svg { flex-shrink: 0; color: rgb(var(--mm-accent)); }
.menu-drawer__pickup-txt { display: flex; flex-direction: column; }
.menu-drawer__pickup-1 { font-family: var(--mm-font-heading); font-weight: 600; font-size: 1.35rem; color: var(--mm-ink); }
.menu-drawer__pickup-2 { font-family: var(--mm-font-body); font-size: 1.3rem; color: var(--mm-ink-mute); }

/* Drawer accordion open motion: opacity + translate, not max-height (D7). Native
   details toggles layout; we animate paint only on the content wrapper. */
.menu-drawer__accordion[open] > .menu-drawer__accordion-content { animation: mmDrawerReveal 200ms var(--mm-ease); }
@keyframes mmDrawerReveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .menu-drawer__accordion[open] > .menu-drawer__accordion-content { animation: none; }
  .menu-drawer__chevron { transition: none; }
}

/* ========================================
   HEADER DIET (2026-10, docs/homepage-audit/15-design-audit.md)
   Top row: logo, search, store status, language, account, cart. The phone number and the utility links
   live in the store popover (snippets/fg-store-hours.liquid). Account is an icon: accounts are not pushed.
   ======================================== */
@media screen and (min-width: 750px) {
  .header--mega-menu .header__account .header__summary-body { display: none !important; }
  .header--mega-menu .header__account .header__summary-block {
    padding: 0.9rem !important;
    border-radius: 50% !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  .header--mega-menu .header__account .header__summary-block:hover { background: rgba(122, 90, 57, 0.08) !important; }
  .header--mega-menu .header__account .header__summary-block .icon-account { width: 2.4rem; height: 2.4rem; }
}
@media screen and (min-width: 1000px) {
  .header--mega-menu .header__search { max-width: 80rem; }
}

/* Phone drawer: the accordion caret was a 10px triangle pinned to the screen edge. */
.menu-drawer__chevron { display: flex; align-items: center; justify-content: center; }
.menu-drawer__chevron .icon-caret { position: static !important; width: 1.8rem !important; height: 1.8rem !important; transition: transform 0.2s ease; }
.menu-drawer details[open] > summary .menu-drawer__chevron .icon-caret { transform: rotate(180deg); }

/* Desktop header from 1,000 px (docs/pdp/22-header-breakpoint.md): between 1,000 and 1,099 px the thirteen
   departments get a slightly smaller face so they keep some air between them. */
@media screen and (min-width: 1000px) and (max-width: 1099px) {
  .header--mega-menu .header__main-link { font-size: 1.25rem; }
}

/* ============================================================
   H1 + H2 (docs/header/02): panel on the bar's own edge, columns by the room there is,
   no title row, the feature card only where one is set, the page dimmed behind, and the
   current collection marked inside the panel.
   ============================================================ */
.header--mega-menu .mega-menu-new { --mm-edge: 2rem; --mm-gutter: 3.2rem; scrollbar-gutter: auto; padding-bottom: 2.4rem; max-height: calc(100vh - 18.8rem); }
@media screen and (min-width: 1280px) { .header--mega-menu .mega-menu-new { --mm-edge: 5rem; } }
.header--mega-menu .mega-menu-new > .container { position: relative; padding-left: var(--mm-edge); padding-right: var(--mm-edge); }

.header--mega-menu .mega-menu-new__layout { display: block; }
.header--mega-menu .mega-menu-new__layout--feature { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; column-gap: var(--mm-gutter); align-items: start; }

.header--mega-menu .mega-menu-new__all {
  display: inline-flex; align-items: center; gap: 0.6rem; margin: 1.6rem 0 1.4rem;
  font-family: var(--mm-font-heading); font-weight: var(--mm-w-heading); font-size: 1.5rem; line-height: 1.3;
  color: rgb(var(--mm-accent)); text-decoration: none;
}
.header--mega-menu .mega-menu-new__all:hover { text-decoration: underline; text-underline-offset: 0.3rem; }
.header--mega-menu .mega-menu-new__all:focus-visible { outline: 2px solid rgb(var(--mm-accent)); outline-offset: 2px; border-radius: 2px; }
.header--mega-menu .mega-menu-new__nav { border-top: 0; }
.header--mega-menu .mega-menu-new__sub-collections { columns: 6 17rem; column-gap: var(--mm-gutter); padding-top: 1.6rem; border-top: 1px solid var(--mm-hairline); }
.header--mega-menu .mm-group { margin-bottom: 2rem; }
.header--mega-menu .mega-menu-new__child-link { margin-bottom: 0.8rem; }
.header--mega-menu .mega-menu-new__grandchild-link { padding-block: 0.3rem; }

.header--mega-menu .mega-menu-new__promo { border-left: 0; padding-left: 0; padding-top: 5.6rem; }

.header--mega-menu .mega-menu-new [aria-current="page"] { color: var(--mm-ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.4rem; }

/* The close button stays for keyboards and screen readers; hover and tap-outside do not need it. */
.header--mega-menu .mega-menu-new__close-btn { position: absolute; top: 1.2rem; right: var(--mm-edge); opacity: 0; pointer-events: none; }
.header--mega-menu .mega-menu-new__close-btn:focus-visible { opacity: 1; pointer-events: auto; outline: 2px solid rgb(var(--mm-accent)); outline-offset: 2px; }

/* Page dimmed behind an open panel */
.header--mega-menu .header__mega-menu-item:has(> .mega-menu-new.open)::after {
  content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 100vh; z-index: 999;
  background: rgba(27, 26, 23, 0.35); pointer-events: none; animation: fg-mm-dim 0.2s ease both;
}
@keyframes fg-mm-dim { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .header--mega-menu .header__mega-menu-item:has(> .mega-menu-new.open)::after { animation: none; } }

/* Under 1440 the feature gives its column back to the links and becomes one line at the end of the top row. */
@media screen and (max-width: 1439px) {
  .header--mega-menu .mega-menu-new__layout--feature { display: block; }
  .header--mega-menu .mega-menu-new__promo { position: absolute; top: 1.1rem; right: var(--mm-edge); padding: 0; max-width: 55%; }
  .header--mega-menu .mega-menu-new__feature-card { flex-direction: row; border: 0; background: none; border-radius: 0; overflow: visible; }
  .header--mega-menu .mega-menu-new__feature-card:hover { transform: none; box-shadow: none; }
  .header--mega-menu .mega-menu-new__feature-media,
  .header--mega-menu .mega-menu-new__feature-text { display: none; }
  .header--mega-menu .mega-menu-new__feature-body { flex-direction: row; align-items: baseline; gap: 1.2rem; padding: 0.6rem 0; }
  .header--mega-menu .mega-menu-new__feature-heading { font-family: var(--mm-font-body); font-weight: 400; font-size: 1.4rem; color: var(--mm-ink-soft); white-space: nowrap; }
  .header--mega-menu .mega-menu-new__feature-cta { margin-top: 0; white-space: nowrap; }
  .header--mega-menu .mega-menu-new__feature-card:hover .mega-menu-new__feature-cta { text-decoration: underline; text-underline-offset: 0.3rem; }
}
@media screen and (max-width: 1279px) {
  .header--mega-menu .mega-menu-new__grandchild-link { padding-block: 0.2rem; }
  .header--mega-menu .mm-group { margin-bottom: 1.6rem; }
  .header--mega-menu .mega-menu-new__feature-heading { display: none; }
}

/* ============================================================
   H4 (docs/header/03): phones. The bottom bar owns the menu, the account and the cart and never hides.
   The header is the logo, the store status and the search; once scrolled it is one row, logo and search.
   ============================================================ */
.bottom-nav__icon--close { display: none; }
.menu-drawer__menu summary.is-here { box-shadow: inset 3px 0 0 rgb(var(--color-foreground)); }
@media screen and (max-width: 749px) {
  body .bottom-nav.bottom-nav--hidden { transform: none; }
  body .bottom-nav__item.is-open { color: rgb(var(--color-button)); }
  body .bottom-nav__item.is-open .bottom-nav__icon { display: none; }
  body .bottom-nav__item.is-open .bottom-nav__icon--close { display: block; }
  body .bottom-nav__badge[hidden] { display: none; }

  body .header .header__top-inner,
  body .header--mega-menu .header__top-inner,
  body .shopify-section-header .header__top-inner {
    grid-template-columns: auto minmax(0, 1fr) !important;
    padding: 0.8rem 1rem 0.8rem !important;
    row-gap: 0.6rem !important;
  }
  body .header header-drawer,
  body .header--mega-menu header-drawer { grid-column: 1 !important; grid-row: 1 !important; width: 0 !important; min-width: 0 !important; }
  body header-drawer summary.header__icon--menu,
  body .header--mega-menu header-drawer .header__icon--menu { display: none !important; }
  body .header .header__account,
  body .header--mega-menu .header__account,
  body .header .header__icon--cart,
  body .header--mega-menu .header__icon--cart { display: none !important; }

  body .header--mega-menu .header__heading,
  body .header--mega-menu .header__top-inner > .header__heading-link { grid-column: 1 !important; justify-self: start !important; justify-content: flex-start !important; padding: 0 !important; }
  body .header--mega-menu .header__heading-logo { max-height: 3.4rem !important; }
  body .header--mega-menu .header__column { grid-column: 2 !important; grid-row: 1 !important; justify-self: end !important; }
  body .header--mega-menu .header__search { grid-column: 1 / -1 !important; grid-row: 2 !important; }

  body .header--mega-menu .header__icons > .fg-hours {
    position: static !important; width: auto !important; border: 0 !important; background: none !important; padding: 0 !important;
    /* no transform or will-change here: either would make this the box the fixed popover is placed in */
    transform: none !important; will-change: auto !important; transition: none !important;
  }
  body .header--mega-menu .fg-hours__toggle { min-height: 4.4rem !important; padding: 0 0.2rem 0 0.8rem !important; }

  body .header--mega-menu .header__top { padding-top: 0 !important; padding-bottom: 0 !important; }

  /* The theme script slides the pinned header out and back in on every scroll event; on phones it just stays. */
  body .shopify-section-header.shopify-section-header { transform: none !important; }

  /* Scrolled: one row */
  body.header--collapsed .header--mega-menu .header__top-inner { padding: 0.4rem 1rem !important; column-gap: 1rem !important; row-gap: 0 !important; grid-template-rows: auto !important; min-height: 0 !important; }
  body.header--collapsed .header--mega-menu .header__heading-logo { max-height: 2.6rem !important; }
  body.header--collapsed .header--mega-menu .header__column { display: none !important; }
  body.header--collapsed .header--mega-menu .header__search {
    grid-column: 2 !important; grid-row: 1 !important;
    opacity: 1 !important; transform: none !important; visibility: visible !important; max-height: none !important;
    overflow: visible !important; padding: 0 !important; margin: 0 !important; pointer-events: auto !important;
  }
}

/* ============================================================
   Phone header A, "the red sign" (docs/header/05): one block in the store's deep red. White logo (the
   dark logo turned white in code until a white file exists), store status in white, white search box.
   The announcement bar is off on phones: this block is the strip of colour.
   ============================================================ */
.search-ticker__long { display: none; }
@media screen and (max-width: 749px) {
  body .shopify-section-group-header-group[id$="__announcement-bar"] { display: none !important; }

  body .shopify-section-header,
  body .header--mega-menu .header__top { background: #650601 !important; }
  body .header--mega-menu .header__top { box-shadow: none !important; }
  body .header--mega-menu .header__top-inner { padding: 1.2rem 1.6rem !important; row-gap: 0.9rem !important; }

  body .header--mega-menu .header__heading-logo { max-height: 3.8rem !important; filter: brightness(0) invert(1); }

  body .header--mega-menu .fg-hours__toggle { color: #fff !important; padding: 0 0 0 0.8rem !important; min-height: 3.8rem !important; background: none !important; }
  body .header--mega-menu .fg-hours__status { display: flex !important; flex-direction: column !important; align-items: flex-end !important; gap: 0.1rem !important; }
  body .header--mega-menu .fg-hours__store-name { color: #fff !important; font-size: 1.3rem !important; }
  body .header--mega-menu .fg-hours__text { color: rgba(255, 255, 255, 0.82) !important; font-size: 1.2rem !important; }
  body .header--mega-menu .fg-hours__caret { color: rgba(255, 255, 255, 0.82) !important; }
  body .header--mega-menu .fg-hours__dot.is-closed { background: rgba(255, 255, 255, 0.5) !important; }

  body .header--mega-menu .header__search .field { background: #fff !important; border-color: #fff !important; }
  body .header--mega-menu .header__search .search__input:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  body .search-ticker__long { display: inline; }

  body.header--collapsed .header--mega-menu .header__top-inner { padding: 0.4rem 1.6rem !important; }
  body.header--collapsed .header--mega-menu .header__heading-logo { max-height: 2.6rem !important; }
  body.header--collapsed .search-ticker__long { display: none; }
}
@media screen and (max-width: 359px) {
  body .header--mega-menu .header__heading-logo { max-height: 3.2rem !important; }
  body .search-ticker__long { display: none; }
}

/* Red phone header, polish pass (docs/header/06) */
@media screen and (max-width: 749px) {
  /* Status: both lines start on one edge, the dot reads as its bullet */
  body .header--mega-menu .fg-hours__status { align-items: flex-start !important; }
  body .header--mega-menu .fg-hours__text { padding-left: 1.2rem; }
  body .header--mega-menu .fg-hours__toggle { gap: 0.8rem !important; border-radius: 0.6rem !important; }
  body .header--mega-menu .fg-hours__toggle:active { background: rgba(255, 255, 255, 0.12) !important; }
  /* Dots that read on red */
  body .header--mega-menu .fg-hours__dot { box-shadow: none !important; }
  body .header--mega-menu .fg-hours__dot.is-open { background: #7ed68a !important; box-shadow: 0 0 0 2px rgba(126, 214, 138, 0.3) !important; }
  body .header--mega-menu .fg-hours__dot.is-closed { background: rgba(255, 255, 255, 0.55) !important; }
  body .header--mega-menu .fg-hours__text.is-open { color: #fff !important; }

  /* Search: one red, a neutral placeholder, a focus ring that shows on red */
  body .header--mega-menu .header__search .search__button { background: #650601 !important; }
  body .header--mega-menu .search-ticker,
  body .header--mega-menu .search-ticker__static,
  body .header--mega-menu .search-ticker__long { color: #6b675d !important; }
  body .header--mega-menu .header__search .field:focus-within { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4) !important; }

  /* Pinned row: a soft edge so it sits above the cards passing under it */
  body.header--collapsed .header--mega-menu .header__top { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22) !important; }
}
@media screen and (max-width: 359px) {
  body .header--mega-menu .header__heading-logo { max-height: 3rem !important; }
  body .header--mega-menu .fg-hours__toggle { gap: 0.4rem !important; padding-left: 0 !important; }
  body .header--mega-menu .fg-hours__text { font-size: 1.1rem !important; }
}

/* ============================================================
   H3 (docs/header/07): desktop. The header stays at the top of the window; after a short scroll it is
   one slim row, and "Rayons" brings the department bar back under it. No slide in or out.
   ============================================================ */
.fg-rayons { display: none; }
@media screen and (min-width: 1000px) {
  /* Always pinned, never moved by the theme script's inline transform */
  body .shopify-section-header.shopify-section-header { position: sticky !important; top: 0 !important; transform: none !important; transition: none !important; pointer-events: auto !important; }

  body.fg-header-slim .header--mega-menu .header__top { padding-top: 0.6rem; padding-bottom: 0.6rem; box-shadow: 0 2px 10px rgba(27, 26, 23, 0.1); }
  body.fg-header-slim .header--mega-menu .header__top-inner { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "logo rayons search icons"; padding-block: 0; min-height: 4.4rem; }
  body.fg-header-slim .header--mega-menu .header__heading-logo { max-height: 3.4rem; }
  body.fg-header-slim .header--mega-menu .header__bottom-inner { display: none; }
  body.fg-header-slim.fg-rayons-open .header--mega-menu .header__top { padding-bottom: 0; }
  body.fg-header-slim.fg-rayons-open .header--mega-menu .header__bottom-inner { display: block; margin-top: 0.6rem; }

  body.fg-header-slim .fg-rayons {
    grid-area: rayons; display: inline-flex; align-items: center; gap: 0.8rem; height: 4.2rem; padding: 0 1.4rem;
    border: 1px solid rgba(27, 26, 23, 0.85); border-radius: 0.6rem; background: none; cursor: pointer;
    font-family: var(--font-heading-family); font-weight: 600; font-size: 1.5rem; line-height: 1; color: rgb(var(--color-foreground));
  }
  body.fg-header-slim .fg-rayons:hover,
  body.fg-header-slim .fg-rayons[aria-expanded="true"] { background: rgb(27, 26, 23); color: #fff; }
  body.fg-header-slim .fg-rayons:focus-visible { outline: 2px solid rgb(var(--color-button)); outline-offset: 2px; }
  body.fg-header-slim .fg-rayons__caret { transition: transform 0.15s ease; }
  body.fg-header-slim .fg-rayons[aria-expanded="true"] .fg-rayons__caret { transform: rotate(180deg); }
}
@media screen and (min-width: 1000px) and (max-width: 1199px) {
  body.fg-header-slim .header--mega-menu .fg-hours__text { display: none; }
}

/* ============================================================
   H8 (docs/header/08): small things. One plain language button, matching icon sizes, the calculator link
   in the phone menu.
   ============================================================ */
.fg-lang { display: inline-flex; margin: 0; }
.fg-lang__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 1rem; min-width: 4.4rem; height: 4.4rem; padding: 0 1rem;
  border: 0; background: none; cursor: pointer; font-family: var(--font-body-family); font-weight: 600; font-size: 1.35rem; line-height: 1;
  color: rgb(var(--color-foreground)); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.4rem;
}
.fg-lang__btn:hover { color: rgb(var(--color-button)); }
.fg-lang__btn:focus-visible { outline: 2px solid rgb(var(--color-button)); outline-offset: -2px; border-radius: 0.4rem; }
.fg-lang--drawer { display: flex; }
.fg-lang--drawer .fg-lang__btn { justify-content: flex-start; width: 100%; height: 4.8rem; padding: 0 2rem; font-weight: 400; font-size: 1.5rem; text-decoration: none; }
.header--mega-menu .menu-drawer__feature { color: rgb(var(--color-foreground)); }
@media screen and (min-width: 1000px) {
  body .header--mega-menu .header__account .icon-account,
  body .header--mega-menu .header__icon--account svg,
  body .header--mega-menu .header__icon--cart svg { width: 2.2rem !important; height: 2.2rem !important; }
}

/* ============================================================
   H6 (docs/header/08): 750 to 999 px. One pinned row: menu, logo, search, store, account, cart.
   It was the phone header without the phone's bottom bar: three rows, 156 to 176 px, all pinned.
   ============================================================ */
@media screen and (min-width: 750px) and (max-width: 999px) {
  body .shopify-section-header.shopify-section-header { position: sticky !important; top: 0 !important; transform: none !important; }
  body .header--mega-menu .header__top { padding-top: 0.8rem !important; padding-bottom: 0.8rem !important; box-shadow: 0 1px 0 rgba(27, 26, 23, 0.1) !important; }
  body .header--mega-menu .header__top-inner,
  body .shopify-section-header .header--mega-menu .header__top-inner {
    display: grid !important; grid-template-columns: auto auto minmax(0, 1fr) auto !important; grid-template-rows: auto !important;
    align-items: center !important; column-gap: 1.2rem !important; row-gap: 0 !important; padding: 0 2rem !important; min-height: 0 !important;
  }
  body .header--mega-menu header-drawer { grid-column: 1 !important; grid-row: 1 !important; margin-left: -1rem !important; }
  body .header--mega-menu .header__heading,
  body .header--mega-menu .header__top-inner > .header__heading-link { grid-column: 2 !important; grid-row: 1 !important; justify-self: start !important; padding: 0 !important; }
  body .header--mega-menu .header__heading-logo { max-height: 3.8rem !important; width: auto !important; height: auto !important; }
  body .header--mega-menu .header__localization { display: none !important; }
  body .header--mega-menu .header__search { grid-column: 3 !important; grid-row: 1 !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
  body .header--mega-menu .header__column { grid-column: 4 !important; grid-row: 1 !important; }
  body .header--mega-menu .header__icons > .fg-hours { position: static !important; width: auto !important; border: 0 !important; background: none !important; padding: 0 !important; }
  body .header--mega-menu .fg-hours__text { display: none !important; }
}

/* ============================================================
   FG strip (docs/header/10): one linked line, 32 px. Phones: only a store closure shows, as a cream line
   above the red header.
   ============================================================ */
.announcement-bar.fg-strip { height: 32px; min-height: 32px; padding: 0; align-items: stretch; }
.fg-strip__line { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 0 16px; color: inherit; font-size: 13px; line-height: 1.2; text-decoration: none; }
.fg-strip__text { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fg-strip__text b { font-weight: 700; }
.fg-strip__go { flex: none; opacity: .8; }
span.fg-strip__line .fg-strip__go { display: none; }
a.fg-strip__line:hover .fg-strip__text { text-decoration: underline; text-underline-offset: 3px; }
a.fg-strip__line:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
@media screen and (max-width: 749px) {
  body .shopify-section-group-header-group[id$="__announcement-bar"]:has(.fg-strip.is-closure) { display: block !important; }
  .announcement-bar.fg-strip.is-closure { height: auto; min-height: 36px; background: #f3ead3; color: #1b1a17; transition: none; will-change: auto; }
  .fg-strip.is-closure .fg-strip__line { min-height: 36px; padding: 6px 16px; font-size: 13px; }
  .fg-strip.is-closure .fg-strip__text { white-space: normal; }
  .fg-strip.is-closure a.fg-strip__line:focus-visible { outline-color: #1b1a17; }
}