/** Shopify CDN: Minification failed

Line 587:2 Unexpected "3%"
Line 588:2 Unexpected "17%"
Line 589:2 Unexpected "20%"
Line 590:2 Unexpected "20.1%"
Line 591:2 Unexpected "23%"
Line 592:2 Unexpected "37%"
Line 593:2 Unexpected "40%"
Line 594:2 Unexpected "40.1%"
Line 595:2 Unexpected "43%"
Line 596:2 Unexpected "57%"
... and 9 more hidden warnings

**/
/* ============================================================
   GardenTrails — Phase 7: Header & Navigation Redesign
   Session 1: Announcement bar · 3-layer layout · Nav typography · Mega-menu text mode
   File: assets/gardentrails-phase7.css
   Depends on: gardentrails-phase1.css · gardentrails-phase2.css
   Reference: ugaoo.com header pattern
   ============================================================ */


/* ── 1. ANNOUNCEMENT BAR ─────────────────────────────────────
   Scheme-3 (Pollen #F5DFA0) is already set via header-group.json.
   Phase 7 overrides typography to match BRD spec: 13px, Bark text,
   Forest links.
   ──────────────────────────────────────────────────────────── */

.announcement-bar {
  position: relative;
  z-index: 10;
}

.announcement-bar .announcement-bar__text {
  font-family: var(--gt-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  color: var(--gt-bark) !important;
  line-height: 1.4;
}

/* "Shop Now →" and all links inside announcement */
.announcement-bar__text a,
.announcement-bar__text a:visited {
  color: var(--gt-forest) !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  text-decoration-thickness: 1px !important;
  transition: color 0.18s ease;
}

.announcement-bar__text a:hover {
  color: var(--gt-night) !important;
  text-decoration-color: var(--gt-mustard) !important;
}

/* Slideshow nav arrows — Bark on Pollen */
.announcement-bar__slider .slideshow-control {
  color: var(--gt-bark) !important;
  opacity: 0.5;
  transition: opacity 0.18s;
}

.announcement-bar__slider .slideshow-control:hover {
  opacity: 0.9 !important;
}

/* Hide dots if only 1 announcement (when merchant has 1 block) */
.announcement-bar__slider:has(.announcement-bar__slide:only-child) .slideshow-controls {
  display: none !important;
}


/* ── 2. THREE-LAYER HEADER VISUAL SPLIT ──────────────────────
   header-group.json sets:
     color_scheme_top = scheme-2 (Cream) — Heritage applies Cream bg natively
     color_scheme_bottom = scheme-1 (Forest) — Heritage applies Forest bg natively
     menu_row = bottom — nav links in the Forest bottom row
   
   CSS below only handles heights, icon colours, and border.
   ──────────────────────────────────────────────────────────── */

/* TOP ROW — Cream (scheme-2). Add Sand bottom border for definition. */
#header-component .header__row--top {
  border-bottom: 1px solid var(--gt-sand) !important;
}

/* Top row height */
#header-component .header__row--top .header__columns {
  min-height: 68px !important;
  padding-block: 0 !important;
}

/* Shrink when sticky */
.header[data-sticky-state='active'] .header__row--top .header__columns {
  min-height: 56px !important;
}

/* TOP ROW icons — Bark on Cream (scheme-2 gives Bark foreground already,
   but Phase 2 sets .header-actions__action to scheme-1 Sage — override) */
#header-component .header__row--top .header-actions__action {
  color: var(--gt-bark) !important;
}

#header-component .header__row--top .header-actions__action:hover {
  color: var(--gt-forest) !important;
  opacity: 1 !important;
}

/* Hamburger (mobile) — Bark on Cream */
#header-component .header__row--top .header__icon--menu {
  color: var(--gt-bark) !important;
}

/* Cart bubble — Mustard */
#header-component .header__row--top .header-actions__cart-icon .cart-bubble__background {
  background-color: var(--gt-mustard) !important;
}

#header-component .header__row--top .header-actions__cart-icon .cart-bubble__text {
  color: var(--gt-night) !important;
}

/* BOTTOM ROW — Forest (scheme-1). Heritage applies bg natively. */
/* Height for the nav bar */
#header-component .header__row--bottom .header__columns {
  min-height: 44px !important;
  padding-block: 0 !important;
}


/* ── 3. HEADER LOGO — Cream row sizing ──────────────────────
   Phase 2 has .header-logo { padding-block: 8px }.
   Phase 7 tightens to sit cleanly in the 68px Cream bar.
   ──────────────────────────────────────────────────────────── */

.header-logo {
  padding-block: 10px !important;
}

/* Desktop: max logo height 48px */
@media screen and (min-width: 990px) {
  .header-logo .header-logo__image {
    max-height: 44px !important;
    width: auto !important;
  }
}

/* Mobile: max logo height 36px */
@media screen and (max-width: 989px) {
  .header-logo .header-logo__image {
    max-height: 36px !important;
    width: auto !important;
  }
}


/* ── 4. NAV LINK TYPOGRAPHY ──────────────────────────────────
   BRD spec: 13px · DM Sans 500 · UPPERCASE · 0.05em tracking
   Scheme-1 (Forest bg) already gives Sage foreground for text.
   Phase 2 set font-weight 500 and letter-spacing 0.01em.
   Phase 7 overrides: smaller size, uppercase, wider tracking.
   ──────────────────────────────────────────────────────────── */

/* Desktop nav links — on Forest nav bar */
.header__row--bottom .menu-list__link,
.header__row--bottom .menu-list__link-title {
  font-family: var(--gt-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--gt-sage) !important;
  transition: color 0.18s ease;
  white-space: nowrap;
}

/* Nav link hover — white text, Mustard underline */
.header__row--bottom .menu-list .menu-list__list-item:where(:hover, :focus-within) .menu-list__link .menu-list__link-title,
.header__row--bottom .menu-list__link:focus-visible .menu-list__link-title {
  color: #ffffff !important;
}

/* Active page nav link — Mustard underline indicator */
.header__row--bottom .menu-list__link--active .menu-list__link-title {
  color: #ffffff !important;
}

/* Phase 2 active/hover underline — keep but update color */
.header__row--bottom .menu-list__link--active .menu-list__link-title::after,
.header__row--bottom .menu-list .menu-list__list-item:where(:hover, :focus-within) .menu-list__link .menu-list__link-title::after {
  background-color: var(--gt-mustard) !important;
  bottom: -6px !important;
  height: 2px !important;
}

/* Nav link row padding — breathing room in 44px bar */
.header__row--bottom .menu-list__link {
  padding-block: 10px !important;
  padding-inline: 4px !important;
}

/* Gap between nav items */
.header__row--bottom .menu-list {
  gap: 4px !important;
}

@media screen and (min-width: 1200px) {
  .header__row--bottom .menu-list {
    gap: 8px !important;
  }
}


/* ── 4b. MEGA-MENU UPPERCASE RESET ──────────────────────────
   Heritage sets text-transform via --menu-child-font-case CSS var
   inside _header-menu.liquid's embedded <style> block (high specificity).
   CSS var overrides don't beat it — we must override text-transform
   directly with !important on the actual element selectors.
   ──────────────────────────────────────────────────────────── */

/* Mega-menu text-transform override is handled via a late-inject <style> block
   in layout/theme.liquid (after content_for_header). That block loads after
   Heritage's block stylesheets and is guaranteed to win.
   The rules below are kept as a fallback for any other specificity cases. */
#header-component .mega-menu__grid .mega-menu__link,
#header-component .mega-menu__grid .mega-menu__link--parent {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}


/* ── 5. MEGA-MENU PANEL (TEXT MODE) ─────────────────────────
   menu_style is now "text" — no product cards.
   Phase 2 gave Cream bg + Mustard top border.
   Phase 7 refines: panel shadow, padding, border radius,
   and link typography for the clean ugaoo-style list.
   ──────────────────────────────────────────────────────────── */

/* ── MEGA-MENU PANEL ──
   Heritage's .menu-list__submenu is a full-width transparent overlay.
   The visible "panel" is .menu-list__submenu-inner — that's where
   we apply the Cream bg, border, shadow and border-radius.
   ─────────────────────────────────────────────────────────────── */

/* Outer overlay — keep transparent, Heritage handles positioning */
.menu-list__submenu,
.overflow-menu::part(overflow) {
  background-color: transparent !important;
}

/* INNER PANEL — the visible dropdown box */
.menu-list__submenu-inner {
  background-color: var(--gt-cream) !important;
  border-top: 2px solid var(--gt-mustard) !important;
  border-bottom: 1px solid var(--gt-sand) !important;
  box-shadow: 0 8px 24px rgba(36, 20, 8, 0.12) !important;
  padding-block-start: 16px !important;
  padding-block-end: 20px !important;
}

/* Fade-in animation on the inner panel */
@media (prefers-reduced-motion: no-preference) {
  .menu-list__submenu-inner {
    transition: opacity 0.18s ease-out !important;
  }
}

@keyframes gt-menu-open {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── 5a. MEGA-MENU: text mode child links ── */

/* All links in text-mode mega-menu */
.mega-menu__link {
  font-family: var(--gt-font-body) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--gt-bark) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  border-radius: 6px !important;
  padding: 6px 10px !important;
  display: block !important;
  transition: background-color 0.12s ease, color 0.12s ease;
  line-height: 1.4;
}

/* Child link hover — Mist bg pill + Olive text */
.mega-menu__link:hover,
.mega-menu__link:focus-visible {
  background-color: var(--gt-mist) !important;
  color: var(--gt-olive) !important;
}

/* ── 5b. MEGA-MENU: parent/group headings ── */

/* L2 group parent label (e.g. "Pots & Planters" at top of submenu) */
.mega-menu__link--parent {
  font-family: var(--gt-font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--gt-clay) !important;
  padding: 4px 10px 8px !important;
  background-color: transparent !important;
  cursor: default !important;
  pointer-events: none !important;
  border-bottom: 1px solid var(--gt-sand) !important;
  margin-bottom: 6px !important;
  border-radius: 0 !important;
  display: block !important;
}

.mega-menu__link--parent:hover {
  background-color: transparent !important;
  color: var(--gt-clay) !important;
}

/* ── 5c. MEGA-MENU: multi-column for large menus ── */

/* Menus with 7+ items (Seeds, Plants) — 2 columns */
.mega-menu__grid:has(.mega-menu__item:nth-child(7)) .mega-menu__list,
.menu-list__submenu-inner:has(.mega-menu__item:nth-child(7)) .mega-menu__list {
  column-count: 2;
  column-gap: 16px;
}

/* Prevent column break inside individual items */
.mega-menu__item {
  break-inside: avoid;
}

/* ── 5d. MEGA-MENU: remove product card styles (text mode) ── */

/* Phase 2 had product card styles — hide any residual product grid in menu */
.header .product-card,
.header .resource-card {
  display: none !important;
}


/* ── 6. HEADER BORDER CLEANUP ────────────────────────────────
   Remove any borders that create visual clutter between rows.
   ──────────────────────────────────────────────────────────── */

/* Phase 2 already sets border-bottom 0 on top row — reinforce */
.header__row--top:not(.divider--page-width),
.header__row--top.divider--page-width .header__columns {
  border-bottom-width: 0px !important;
}

/* Ensure no outline/border on sticky transition */
.header[data-sticky-state='active'] {
  box-shadow: 0 2px 8px rgba(36, 20, 8, 0.12) !important;
}


/* ── 7. MOBILE DRAWER — FULL FIX ────────────────────────────
   Heritage's .menu-drawer (the sliding panel) gets background
   from its color scheme class (color-scheme-2 = Cream).
   We must target .menu-drawer directly — NOT .header-drawer
   or .menu-drawer-container which are outer wrapper elements.

   Also: hamburger icon styling on Cream top row.
   ──────────────────────────────────────────────────────────── */

/* ── THE ACTUAL SLIDING PANEL — Forest bg ── */
/* This is the element that slides in from the left */
.menu-drawer {
  background-color: var(--gt-forest) !important;
  --color-background: var(--gt-forest) !important;
  --color-foreground: var(--gt-sage) !important;
  --color-foreground-heading: #ffffff !important;
}

/* ── HAMBURGER ICON — Bark on Cream top row ── */
.header-drawer-icon svg,
.header__icon--menu svg,
.header__icon--summary svg {
  color: var(--gt-bark) !important;
  stroke: var(--gt-bark) !important;
}

/* Hamburger button touch target */
.header__icon--summary {
  min-width: 44px !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

/* ── DRAWER L1 LINKS ── */
/* Target the mainlist item — Heritage uses .menu-drawer__menu-item--mainlist */
.menu-drawer__menu-item,
.menu-drawer__menu-item--mainlist {
  font-family: var(--gt-font-body) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--gt-sage) !important;
  letter-spacing: 0 !important;
  min-height: 48px !important;
  display: flex !important;
  align-items: center !important;
  border-bottom: 1px solid rgba(107, 140, 53, 0.2) !important;
}

.menu-drawer__menu-item:hover,
.menu-drawer__menu-item:focus,
.menu-drawer__menu-item--mainlist:hover {
  color: #ffffff !important;
}

/* Caret/chevron icon in L1 items */
.menu-drawer__menu-item .svg-wrapper svg,
.menu-drawer__menu-item--mainlist .svg-wrapper svg {
  color: var(--gt-sage) !important;
  opacity: 0.7;
}

/* ── DRAWER L2 CHILD LINKS ── */
.menu-drawer__menu-item--child,
.menu-drawer__menu-item--child .menu-drawer__menu-item-text,
.menu-drawer__menu-item--parent {
  font-family: var(--gt-font-body) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: rgba(168, 187, 114, 0.85) !important;
  padding-inline-start: 20px !important;
  min-height: 40px !important;
}

.menu-drawer__menu-item--child:hover,
.menu-drawer__menu-item--child:focus {
  color: #ffffff !important;
}

/* ── BACK BUTTON ── */
.menu-drawer__back-button {
  color: var(--gt-sage) !important;
  font-family: var(--gt-font-body) !important;
  font-size: 14px !important;
}

.menu-drawer__back-button:hover {
  color: var(--gt-mustard) !important;
}

/* ── CLOSE BUTTON ── */
.menu-drawer__close-button {
  color: var(--gt-sage) !important;
  transition: color 0.18s;
}

.menu-drawer__close-button:hover {
  color: var(--gt-mustard) !important;
}

/* ── DIVIDERS ── */
.menu-drawer__list-item--divider {
  border-color: rgba(74, 99, 32, 0.3) !important;
}

/* ── BACKDROP ── */
/* Heritage handles this via backdrop-filter — no override needed */

/* ── ENSURE ANIMATION IS NOT BROKEN ── */
/* Do NOT set display, position, or transform on .menu-drawer-container
   or .header-drawer — Heritage JS relies on these being untouched */


/* ── 8. WHATSAPP ICON ────────────────────────────────────────
   The WA icon is added via header-actions.liquid in Session 2.
   Pre-style it here so it renders correctly on deploy.
   ──────────────────────────────────────────────────────────── */

.gt-header-wa {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #25D366 !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  transition: background-color 0.18s ease, transform 0.18s ease;
  text-decoration: none !important;
}

.gt-header-wa:hover {
  background-color: rgba(37, 211, 102, 0.10) !important;
  transform: scale(1.08) !important;
  color: #25D366 !important;
  opacity: 1 !important;
}

.gt-header-wa svg {
  width: 22px !important;
  height: 22px !important;
  fill: currentColor !important;
}

/* Hide on mobile — phone can tap WA from footer */
@media screen and (max-width: 989px) {
  .gt-header-wa {
    display: none !important;
  }
}


/* ── 9. RESPONSIVE — TABLET/MOBILE (max 989px) ──────────────
   Heritage hides the bottom nav row at mobile — menu moves to drawer.
   Top row (Cream) remains. Icons should be Bark on Cream.
   ──────────────────────────────────────────────────────────── */

@media screen and (max-width: 989px) {
  /* Icons on Cream bg at mobile */
  .header__row--top .header-actions__action {
    color: var(--gt-bark) !important;
  }

  .header__row--top .header__icon--menu {
    color: var(--gt-bark) !important;
  }

  /* Sand border on top row at mobile */
  #header-component .header__row--top {
    border-bottom: 1px solid var(--gt-sand) !important;
  }
}


/* ── 10. STICKY HEADER SHADOW ───────────────────────────────
   On scroll, show subtle shadow beneath the sticky header.
   ──────────────────────────────────────────────────────────── */

.header[data-sticky-state='active'] #header-component {
  box-shadow: 0 2px 12px rgba(30, 42, 8, 0.15);
}


/* ── 11. FOCUS VISIBLE — accessibility ───────────────────────
   Ensure keyboard focus ring is visible on Forest bg.
   ──────────────────────────────────────────────────────────── */

.header__row--bottom .menu-list__link:focus-visible {
  outline: 2px solid var(--gt-mustard) !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}

.header__row--top .header-actions__action:focus-visible,
.header-logo a:focus-visible {
  outline: 2px solid var(--gt-forest) !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}




/* ── SESSION 2: PILL SEARCH BAR — CENTERED + ANIMATED ───────
   Desktop (≥990px):
   • Search pill is CENTERED in the header using absolute positioning
   • Placeholder text cycles through garden search terms (typewriter effect)
   • Logo stays left, action icons stay right — pill floats in middle
   Mobile: Heritage default search icon — untouched
   ──────────────────────────────────────────────────────────── */

  3%    { opacity: 1; content: 'Search "tomato seeds"...'; }
  17%   { opacity: 1; content: 'Search "tomato seeds"...'; }
  20%   { opacity: 0; content: 'Search "tomato seeds"...'; }
  20.1% { opacity: 0; content: 'Search "indoor plants"...'; }
  23%   { opacity: 1; content: 'Search "indoor plants"...'; }
  37%   { opacity: 1; content: 'Search "indoor plants"...'; }
  40%   { opacity: 0; content: 'Search "indoor plants"...'; }
  40.1% { opacity: 0; content: 'Search "ceramic pots"...'; }
  43%   { opacity: 1; content: 'Search "ceramic pots"...'; }
  57%   { opacity: 1; content: 'Search "ceramic pots"...'; }
  60%   { opacity: 0; content: 'Search "ceramic pots"...'; }
  60.1% { opacity: 0; content: 'Search "potting mix"...'; }
  63%   { opacity: 1; content: 'Search "potting mix"...'; }
  77%   { opacity: 1; content: 'Search "potting mix"...'; }
  80%   { opacity: 0; content: 'Search "potting mix"...'; }
  80.1% { opacity: 0; content: 'Search "grow bags"...'; }
  83%   { opacity: 1; content: 'Search "grow bags"...'; }
  97%   { opacity: 1; content: 'Search "grow bags"...'; }
  100%  { opacity: 0; content: 'Search "grow bags"...'; }

@media screen and (min-width: 990px) {

  /* ── CENTERED PILL: absolute position in header ── */
  /* Heritage's header__columns is a CSS grid with position:relative */
  /* We position the search-action absolutely in the center */
  #header-component .header__row--top .header__columns {
    position: relative !important;
  }

  #header-component .header__row--top .search-action {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: min(520px, 40%) !important;
    z-index: 1 !important;
    /* Remove from flex/grid flow */
    margin: 0 !important;
    flex: none !important;
  }

  /* ── PILL BUTTON STYLE ── */
  .header__row--top .search-action button,
  .header__row--top .search-action .button-unstyled {
    width: 100% !important;
    height: 44px !important;
    border: 1px solid #e0d0b8 !important;
    border-radius: 100px !important;
    background: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 18px 0 14px !important;
    cursor: text !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    color: var(--gt-clay) !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
  }

  .header__row--top .search-action button:hover,
  .header__row--top .search-action .button-unstyled:hover {
    border-color: var(--gt-fern) !important;
    box-shadow: 0 0 0 3px rgba(107, 140, 53, 0.08) !important;
  }

  /* ── SEARCH ICON ── */
  .header__row--top .search-action .svg-wrapper {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
    color: var(--gt-clay) !important;
  }

  .header__row--top .search-action svg {
    width: 18px !important;
    height: 18px !important;
    color: var(--gt-clay) !important;
  }

  /* ── ANIMATED PLACEHOLDER — driven by JS typewriter ── */
  /* Before JS runs: show static fallback text */
  .header__row--top .search-action button:not([data-gt-placeholder])::after,
  .header__row--top .search-action .button-unstyled:not([data-gt-placeholder])::after {
    content: 'Search seeds, plants, pots...' !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--gt-sand) !important;
    font-family: var(--gt-font-body) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 !important;
  }
  /* After JS sets attribute: show typewriter text */
  .header__row--top .search-action button[data-gt-placeholder]::after,
  .header__row--top .search-action .button-unstyled[data-gt-placeholder]::after {
    content: attr(data-gt-placeholder) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--gt-sand) !important;
    font-family: var(--gt-font-body) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 !important;
  }

  /* ── HIDE HERITAGE'S OWN TEXT LABEL ── */
  .header__row--top .search-action .hidden,
  .header__row--top .search-action span:not(.svg-wrapper) {
    display: none !important;
  }
}

/* Mobile: Heritage default icon — no changes */
@media screen and (max-width: 989px) {
  .header__row--top .search-action {
    color: var(--gt-bark) !important;
  }
}

/* Reduced motion: stop animation, show static text */
@media (prefers-reduced-motion: reduce) {
  .header__row--top .search-action button::after,
  .header__row--top .search-action .button-unstyled::after {
    animation: none !important;
    content: 'Search seeds, plants, pots...' !important;
  }
}




/* ── FIX A: HAMBURGER GREEN BACKGROUND ──────────────────────
   Phase 2 sets bg-color on .menu-drawer-container (the <details>
   wrapping the hamburger <summary>). This makes the hamburger
   sit on a Forest green box inside the Cream header — looks bad.
   Fix: Reset to transparent so it inherits Cream from the header row.
   ──────────────────────────────────────────────────────────── */

/* Transparent wrappers — override Phase 2's wrong Forest bg on these elements */
.header-drawer,
.menu-drawer-container {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Hamburger <summary> — transparent, clean */
.menu-drawer-container > summary,
.header__icon--summary {
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ── FIX B: DRAWER FOREST BG ────────────────────────────────
   header-group.json now sets header-menu color_scheme = scheme-1 (Forest)
   Heritage renders .menu-drawer with class="menu-drawer color-scheme-1"
   color-scheme-1 sets --color-background: Forest natively via color-schemes.liquid
   NO CSS override needed — Heritage handles it.
   ──────────────────────────────────────────────────────────── */

/* ── FIX C: CLOSE BUTTON — RELIABLE SINGLE TAP ──────────────
   Root cause of 2-3 tap issue:
   1. position:sticky on close button → stacking context → event dispatch broken
   2. ::before pseudo content → absorbs touch events
   3. overflow-y:auto change → affects focus trap interaction
   
   Solution: Keep Heritage's defaults. Only add tap-reliability CSS.
   NO pseudo-elements. NO position changes. NO overflow changes.
   The close button works via Heritage's on:click="/close" event system.
   ──────────────────────────────────────────────────────────── */

/* ── DRAWER CLOSE BUTTON — FULL WIDTH HEADER STRIP ─────────
   Make close button a full-width header bar:
   Left: store name text | Right: ✕ icon
   This makes it obvious and easy to tap.
   position:relative preserved (Heritage requirement for on:click="/close").
   ──────────────────────────────────────────────────────────── */
.menu-drawer__close-button {
  /* Heritage's natural position — DO NOT change to sticky/fixed/absolute */
  position: relative !important;
  top: auto !important;
  /* Full width header strip */
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  /* Visual */
  background-color: var(--gt-night) !important;
  border-bottom: 1px solid rgba(168, 187, 114, 0.25) !important;
  color: var(--gt-sage) !important;
  padding: 0 16px !important;
  min-height: 60px !important;
  box-sizing: border-box !important;
  /* Single-tap reliability — critical for mobile */
  -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
  touch-action: manipulation !important;
  user-select: none !important;
  cursor: pointer !important;
}

.menu-drawer__close-button:active {
  background-color: var(--gt-forest) !important;
}

/* Store name on left via ::before — pointer-events:none so tap goes to button */
.menu-drawer__close-button::before {
  content: '🌿 GardenTrails' !important;
  font-family: var(--gt-font-display) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  pointer-events: none !important;
  flex: 1 !important;
  text-align: left !important;
}

/* NO ::after on close button */
.menu-drawer__close-button::after {
  content: none !important;
}

/* SVG close icon — right side, pointer-events:none so tap goes to button */
.menu-drawer__close-button .svg-wrapper {
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
  flex-shrink: 0 !important;
  background: rgba(168,187,114,0.12) !important;
  border-radius: 50% !important;
}

.menu-drawer__close-button svg {
  width: 20px !important;
  height: 20px !important;
  color: var(--gt-sage) !important;
  pointer-events: none !important;
}

/* Nav — no extra padding needed, button is full-width header */
.menu-drawer__navigation {
  padding-top: 0 !important;
}




/* ── GLOBAL BUTTON HOVER FIX ─────────────────────────────────
   Phase 1 CSS has: a:not(.button, .button-secondary):hover { color: var(--gt-forest) }
   This makes any custom GT <a> button turn Forest green on hover — invisible
   on Forest backgrounds. This rule explicitly restores correct hover colours
   for ALL GT custom anchor buttons across the entire site.
   ──────────────────────────────────────────────────────────── */

/* Hero buttons */
.gt-hero__btn--primary:hover {
  color: var(--gt-night) !important;
}
.gt-hero__btn--secondary:hover {
  color: var(--gt-sage) !important;
}

/* Featured collection CTA */
.gt-fc__btn:hover {
  color: var(--gt-night) !important;
}

/* Best sellers — view product link */
.gt-bs__btn-pdp:hover {
  color: var(--gt-mustard) !important;
}

/* Category showcase card button */
.gt-cats__btn:hover,
.gt-cats__card:hover .gt-cats__btn {
  color: var(--gt-night) !important;
}

/* Collection page — clear all / empty CTA */
.gt-col__chip-clear-all:hover,
.gt-col__empty-cta:hover {
  color: var(--gt-forest) !important;
}

/* Reels shop button */
.gt-reels__shop-btn:hover,
.gt-reel-shop-btn:hover {
  color: var(--gt-night) !important;
}

/* Newsletter button */
.gt-nl__btn:hover {
  color: var(--gt-night) !important;
}

/* PDP links on hover — keep Olive, not Forest */
.gt-pdp__bc-link:hover {
  color: var(--gt-mustard) !important;
}

/* General: any GT primary button (dark text on Mustard) */
[class*="gt-"][class*="btn--primary"]:hover,
[class*="gt-"][class*="btn-primary"]:hover {
  color: var(--gt-night) !important;
}

/* General: any GT secondary button (keep its own text colour) */
[class*="gt-"][class*="btn--secondary"]:hover,
[class*="gt-"][class*="btn-secondary"]:hover {
  color: inherit !important;
}

/* ── 12. REDUCED MOTION ─────────────────────────────────────
   Respect user's motion preference.
   ──────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .menu-list__submenu,
  .header__row--top,
  .header__row--bottom,
  .header-drawer,
  .announcement-bar__slider .slideshow-control,
  .menu-drawer__menu-item,
  .gt-header-wa {
    animation: none !important;
    transition: none !important;
  }
}