/**
 * Exist Green — Header v2 responsive overrides
 *
 * This file changes the official responsive header. At ≥641px the full
 * primary nav is shown and the hamburger is force-hidden. At ≤640px
 * nav text collapses into a drawer while the basket stays in the header.
 *
 * What v2 adds:
 *   1. A hamburger menu-item is injected into the primary nav by
 *      eg_inject_mobile_hamburger_menu_item (PHP). On mobile, the nav
 *      text items are hidden and the hamburger sits at the left of the
 *      nav row, basket at the right.
 *   2. A slide-in drawer (markup added via wp_body_open). Hamburger
 *      click opens it. Inside: same primary menu rendered as an
 *      accordion via the existing mega menu walker.
 *   3. Skip-to-content link as the first focusable element.
 *
 * Scoped under body.eg-header-v2 so the official responsive overrides stay
 * isolated from unrelated header styling.
 */


/* ============================================================
   Skip-to-content link
   ============================================================ */
.eg-skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  z-index: 100000;
  padding: 8px 16px;
  background: var(--eg-accent, #2c5e54);
  color: #fff;
  border-radius: 0 0 6px 6px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: top 0.15s ease;
}
.eg-skip-link:focus,
.eg-skip-link:focus-visible {
  top: 0;
  outline: 2px solid var(--eg-accent-light, #bfe2dc);
  outline-offset: 2px;
}


/* ============================================================
   Hamburger menu-item — hidden by default, shown only on mobile
   ============================================================ */
.eg-mobile-hamburger-item {
  display: none !important;
}
body.eg-header-v2 .site-header .menu-toggle:not(.eg-mobile-hamburger),
body.eg-header-v2 .site-header .responsive-menu-icon,
body.eg-header-v2 .site-header .genesis-responsive-menu-icon {
  display: none !important;
}

/* At ≥641px, also hide the drawer + overlay (they're mobile-only) */
@media (min-width: 641px) {
  body.eg-header-v2 .eg-drawer,
  body.eg-header-v2 .eg-drawer-overlay {
    display: none !important;
  }

  body.eg-header-v2 .nav-primary .eg-mobile-hamburger-item,
  body.eg-header-v2 .nav-primary .eg-mobile-hamburger,
  body.eg-header-v2 .eg-hamburger,
  body.eg-header-v2 .nav-primary .menu-toggle,
  body.eg-header-v2 .nav-primary .responsive-menu-icon,
  body.eg-header-v2 .nav-primary .genesis-responsive-menu-icon {
    display: none !important;
  }

  body.eg-header-v2 .nav-primary .genesis-nav-menu {
    display: flex;
    align-items: center;
    width: 100%;
    gap: clamp(14px, 1.4vw, 28px);
  }

  body.eg-header-v2 .nav-primary .genesis-nav-menu > .menu-item {
    width: auto !important;
    flex: 0 0 auto;
  }

  body.eg-header-v2 .nav-primary .genesis-nav-menu > .basket-menu {
    margin-left: auto !important;
  }
}


/* ============================================================
   MOBILE (≤640px)
   Goal: keep the original header structure, but
   - hide GROCERY/APOTHECARY/ESSENTIALS/GIFT/ABOUT in the nav row
   - show the hamburger menu-item in their place
   - leave the basket where it is (existing CSS already pushes it right)
   ============================================================ */

@media (max-width: 640px) {
  body.eg-header-v2 {
    --eg-mobile-logo-slot: 52px;
    --eg-mobile-menu-row-height: 46px;
  }

  /* Nav row: slim utility strip, hamburger centered under logo, basket centered at right. */
  body.eg-header-v2 .nav-primary {
    display: flex !important;
    align-items: center;
    width: 100%;
    height: var(--eg-mobile-menu-row-height);
    min-height: var(--eg-mobile-menu-row-height);
    padding: 0 14px 0 0 !important;
    box-sizing: border-box;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(232, 239, 235, 0.66) 100%);
    box-shadow:
      inset 0 1px rgba(255, 255, 255, 0.62),
      inset 0 -1px rgba(44, 94, 84, 0.16);
  }
  body.eg-header-v2 .nav-primary .genesis-nav-menu,
  body.eg-header-v2 .nav-primary .wrap,
  body.eg-header-v2 .nav-primary > ul {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: var(--eg-mobile-menu-row-height);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* Hide all original nav text items — they live in the drawer now */
  body.eg-header-v2 .nav-primary .menu-item:not(.eg-mobile-hamburger-item):not(.basket-menu) {
    display: none !important;
  }

  /* Show + style the injected hamburger menu-item */
  body.eg-header-v2 .nav-primary .eg-mobile-hamburger-item {
    display: flex !important;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    flex: 0 0 var(--eg-mobile-logo-slot);
    width: var(--eg-mobile-logo-slot);
    margin: 0;
    margin-right: auto;   /* pushes basket-menu to the right */
  }
  body.eg-header-v2 .eg-mobile-hamburger,
  body.eg-header-v2 .eg-hamburger {
    appearance: none;
    -webkit-appearance: none;
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: var(--eg-accent, #2c5e54) !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background 0.15s ease;
  }
  body.eg-header-v2 .eg-mobile-hamburger:hover,
  body.eg-header-v2 .eg-mobile-hamburger:focus-visible,
  body.eg-header-v2 .eg-hamburger:hover,
  body.eg-header-v2 .eg-hamburger:focus-visible {
    background: hsla(166, 40%, 92%, 1);
  }
  body.eg-header-v2 .eg-mobile-hamburger svg,
  body.eg-header-v2 .eg-hamburger svg {
    width: 23px;
    height: 19px;
    flex-shrink: 0;
    color: currentColor;
    stroke: currentColor;
  }

  /* Basket-menu: pinned right, drop the legacy translateY(-12px) on mobile */
  body.eg-header-v2 .nav-primary .menu-item.basket-menu {
    display: flex !important;
    align-items: center !important;
    height: var(--eg-mobile-menu-row-height);
    margin: 0 !important;
    margin-left: auto !important;
    transform: none !important;
  }
  body.eg-header-v2 .nav-primary .basket-link {
    height: var(--eg-mobile-menu-row-height);
    padding: 0 !important;
    display: flex;
    align-items: center;
  }
  body.eg-header-v2 .nav-primary .basket-icon-wrapper {
    height: var(--eg-mobile-menu-row-height);
    display: flex;
    align-items: center;
  }
  body.eg-header-v2 .nav-primary .custom-basket-icon {
    width: 48px !important;
    padding-top: 0 !important;
    transform: translateY(-1px);
  }
  body.eg-header-v2 .nav-primary .basket-count {
    top: 2px;
    right: -3px;
  }
}

@media (max-width: 600px) {
  body.eg-header-v2 {
    --eg-mobile-logo-slot: 40px;
  }
}


/* ============================================================
   DRAWER — slide-in panel + overlay (mobile only)
   ============================================================ */

.eg-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 76, 58, 0.32);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 100190;
}
@supports (backdrop-filter: blur(2px)) {
  .eg-drawer-overlay {
    -webkit-backdrop-filter: blur(1.5px);
    backdrop-filter: blur(1.5px);
  }
}
.eg-drawer-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.eg-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  height: 100dvh;
  width: min(88vw, 380px);
  max-width: 100vw;
  max-width: 100svw;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, hsla(76, 16%, 96%, 1) 42%, hsla(166, 32%, 94%, 1) 100%);
  box-shadow: 4px 0 24px -8px rgba(0, 0, 0, 0.2);
  transform: translateX(-100%);
  transition:
    transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1),
    width 0.2s ease;
  z-index: 100200;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@supports (height: 100svh) {
  .eg-drawer {
    height: 100svh;
  }
}
.eg-drawer.open {
  transform: translateX(0);
}
.eg-drawer.eg-drawer--submenu-open {
  width: 100vw;
}
.eg-drawer.eg-drawer--submenu-open .eg-drawer__foot {
  display: none;
}

.eg-drawer__head {
  flex: 0 0 auto;
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: max(14px, env(safe-area-inset-top, 0px)) 18px 14px;
  border-bottom: 1px solid var(--eg-divider, #e8ede9);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 18px -20px rgba(20, 51, 45, 0.65);
}
.eg-drawer__back {
  grid-column: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 10px 0 8px;
  color: var(--eg-accent, #2c5e54);
  border: 1px solid rgba(44, 94, 84, 0.18);
  border-radius: 8px;
  background: rgba(232, 245, 243, 0.74);
  box-shadow: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.eg-drawer__back svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  stroke: currentColor;
}
.eg-drawer__back-icon--back {
  display: none;
}
.eg-drawer__back:hover,
.eg-drawer__back:focus-visible {
  background: hsla(166, 40%, 92%, 1);
  color: var(--eg-brand-dark, #14332d);
}
.eg-drawer.eg-drawer--submenu-open .eg-drawer__back-icon--back {
  display: block;
}
.eg-drawer__close {
  grid-column: 3;
  justify-self: end;
  flex: 0 0 auto;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--eg-accent, #2c5e54);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(44, 94, 84, 0.18);
  box-shadow: none;
  cursor: pointer;
  padding: 0 9px 0 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.eg-drawer:not(.eg-drawer--submenu-open) .eg-drawer__close {
  display: none;
}
.eg-drawer__close svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  stroke: currentColor;
}
.eg-drawer__close:hover {
  background: hsla(166, 40%, 92%, 1);
}

.eg-drawer__body {
  flex: 1 1 auto;
  min-height: 0;                       /* critical: allows flex child to shrink + scroll */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 8px 0;
}
.eg-drawer.eg-drawer--submenu-open .eg-drawer__body {
  padding-top: 0;
}

.eg-drawer__foot {
  flex: 0 0 auto;
  padding: 14px 18px max(14px, env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--eg-divider, #e8ede9);
  display: flex;
  gap: 10px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 -10px 18px -20px rgba(20, 51, 45, 0.65);
}
.eg-drawer__foot a {
  flex: 1;
  text-align: center;
  padding: 9px 12px;
  border: 1px solid rgba(44, 94, 84, 0.18);
  border-radius: 8px;
  color: var(--eg-accent, #2c5e54);
  font-size: 13px;
  font-weight: 600;
  background: linear-gradient(135deg, rgba(232, 245, 243, 0.95) 0%, rgba(191, 226, 220, 0.95) 100%);
  text-decoration: none;
  box-shadow: 0 8px 18px -18px rgba(20, 51, 45, 0.6);
}
.eg-drawer__foot a:hover,
.eg-drawer__foot a:focus-visible {
  border-color: rgba(44, 94, 84, 0.36);
  color: var(--eg-accent, #2c5e54);
}

/* Lock body scroll while drawer is open */
body.eg-drawer-open {
  overflow: hidden;
}

body.eg-header-v2.eg-drawer-open #cce-header-toggle-bar,
body.eg-header-v2.eg-drawer-open #cce-header-collapse-btn {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}


/* ============================================================
   Drawer-mode mega menu accordion
   The drawer's nav reuses wp_nav_menu() so the mega menu walker
   applies. We override .eg-dropdown so it renders inline as a
   vertical accordion panel instead of a fixed overlay.
   ============================================================ */

.eg-drawer__nav {
  list-style: none;
  margin: 0;
  padding: 0;
}
.eg-drawer__nav .menu-item {
  border-bottom: 1px solid var(--eg-divider, #e8ede9);
  list-style: none;
  overflow: visible;
}
.eg-drawer__nav .eg-has-mega {
  display: block;
  position: relative;
  width: 100%;
}
.eg-drawer__nav .eg-has-mega > a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 14px 22px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
  overflow-wrap: anywhere;
  color: var(--eg-brand-dark, #14332d);
  text-decoration: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}
.eg-drawer__nav .eg-has-mega > a:hover,
.eg-drawer__nav .eg-has-mega > a:focus-visible {
  background: rgba(232, 245, 243, 0.75);
  color: var(--eg-accent, #2c5e54);
}
.eg-drawer__nav .eg-has-mega.open > a {
  background: linear-gradient(90deg, rgba(232, 245, 243, 0.96) 0%, rgba(255, 255, 255, 0.72) 100%);
  color: var(--eg-accent, #2c5e54);
}
.eg-drawer.eg-drawer--submenu-open .eg-drawer__nav > .menu-item:not(.eg-menu-item-open) {
  display: none;
}
.eg-drawer.eg-drawer--submenu-open .eg-drawer__nav .eg-has-mega.open > a {
  position: sticky;
  top: 0;
  z-index: 2;
  min-height: 56px;
  border-bottom: 1px solid var(--eg-divider, #e8ede9);
  box-shadow: 0 10px 18px -20px rgba(20, 51, 45, 0.65);
}
.eg-drawer__nav .eg-has-mega.open > a::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 8px;
  width: 3px;
  border-radius: 999px;
  background: var(--eg-accent, #2c5e54);
}
.eg-drawer__nav .eg-mobile-hamburger-item,
.eg-drawer__nav .basket-menu {
  display: none !important;
}
.eg-drawer__nav .eg-has-mega > a::after,
.eg-drawer__nav .eg-has-mega > a.eg-nav-btn::after,
.eg-drawer__nav .eg-has-mega > a.not-clickable::after {
  content: "";
  position: static !important;
  bottom: auto !important;
  left: auto !important;
  display: inline-block !important;
  width: 8px !important;
  height: 8px !important;
  flex: 0 0 8px;
  margin-left: 14px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  background: transparent !important;
  color: var(--eg-muted-sage, #8aa79d);
  opacity: 0.75;
  transform: rotate(-45deg);
  transform-origin: 50% 50%;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.eg-drawer__nav .eg-has-mega > a:hover::after,
.eg-drawer__nav .eg-has-mega > a:focus-visible::after {
  width: 8px !important;
  left: auto !important;
  opacity: 1;
}
.eg-drawer__nav .eg-has-mega.open > a::after,
.eg-drawer__nav .eg-has-mega.open > a.eg-nav-btn::after,
.eg-drawer__nav .eg-has-mega.open > a.not-clickable::after {
  transform: rotate(45deg);
}

/* The mega dropdown — render inline below the parent link */
.eg-drawer__nav .eg-dropdown {
  display: none;
  position: static !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(245, 249, 247, 0.96) 100%);
  border: 0;
  border-top: 1px solid var(--eg-divider, #e8ede9);
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  padding: 16px clamp(16px, 4vw, 30px) 26px;
}
.eg-drawer__nav .eg-has-mega.open > .eg-dropdown {
  display: block;
}

/* Let submenu content use the drawer's full expanded width. */
.eg-drawer__nav .eg-dropdown .eg-subcat-columns,
.eg-drawer__nav .eg-dropdown .eg-mega-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 0.35rem 0.75rem;
  width: 100%;
}
.eg-drawer__nav .eg-dropdown.grocery-menu .eg-subcat-columns,
.eg-drawer__nav .eg-dropdown.essentials-menu .eg-subcat-columns {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
}
.eg-drawer__nav .eg-dropdown .eg-toplinks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 0.45rem;
  margin-left: 0;
  margin-right: 0;
  padding-bottom: 0.65rem;
}
.eg-drawer__nav .eg-dropdown .eg-toplinks-intro {
  grid-column: 1 / -1;
}
.eg-drawer__nav .eg-dropdown .eg-values-row {
  gap: 0.4rem 0.7rem;
  margin-left: 0;
  margin-right: 0;
}
.eg-drawer__nav .eg-dropdown .eg-values-badge {
  white-space: normal;
}
.eg-drawer__nav .eg-dropdown .cta-button.eg-mega-cta {
  min-height: 36px;
  white-space: normal;
}
.eg-drawer__nav .eg-dropdown .cta-button.eg-mega-cta.parent-cat-btn {
  min-height: 46px;
  padding: 0.4rem 0.5rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.45);
}
.eg-drawer__nav .eg-dropdown .cta-button.eg-mega-cta.parent-cat-btn:hover,
.eg-drawer__nav .eg-dropdown .cta-button.eg-mega-cta.parent-cat-btn:focus-visible {
  background: rgba(232, 245, 243, 0.9);
}
.eg-drawer__nav .eg-dropdown .handwriting.aisles-label {
  margin-top: 0.45rem;
  margin-bottom: 0.5rem;
}
.eg-drawer__nav .eg-dropdown .grocery-snap-banner,
.eg-drawer__nav .eg-dropdown .herbals-see-also-banner {
  margin-left: 0;
  margin-right: 0;
}

@media (max-width: 380px) {
  .eg-drawer__nav .eg-dropdown .eg-subcat-columns,
  .eg-drawer__nav .eg-dropdown.grocery-menu .eg-subcat-columns,
  .eg-drawer__nav .eg-dropdown.essentials-menu .eg-subcat-columns {
    grid-template-columns: 1fr !important;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  .eg-drawer__head {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .eg-drawer__foot {
    padding-top: 8px;
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
  }
  .eg-drawer__nav .eg-has-mega > a {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

/* Subcategory links inside the drawer dropdown */
.eg-drawer__nav .eg-dropdown a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--eg-text-primary, #222);
  text-decoration: none;
}
.eg-drawer__nav .eg-dropdown a:hover {
  color: var(--eg-accent, #2c5e54);
}


/* ============================================================
   prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  body.eg-header-v2 .eg-drawer,
  body.eg-header-v2 .eg-drawer-overlay,
  body.eg-header-v2 .eg-skip-link {
    transition: none !important;
  }
  .eg-drawer__nav .eg-has-mega > a::after {
    transition: none !important;
  }
}