/* ════════════════════════════════════════════════════════════════════════
   1m-HEADER-DESIGN — Memphis Refined unified header.
   Single source of truth for all 5 customer-facing pages.
   All classes prefixed `.ej-` to avoid collision with legacy page CSS.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* Pull existing palette if defined on the page; safe fallbacks. */
  --ejh-black:  var(--black,  #0E0E0E);
  --ejh-white:  var(--white,  #FFFFFF);
  --ejh-pink:   var(--pink,   #FF4DA6);
  --ejh-yellow: var(--yellow, #FFE600);
  --ejh-green:  var(--green,  #4CD964);
  --ejh-mint:   var(--mint,   #B2FCE4);
  --ejh-blue:   var(--blue,   #00C8FF);
}

.ej-header {
  /* checkout-polish-and-email c1: position:sticky depends on no ancestor
     creating an overflow scroll context. Pages that set `overflow-x:hidden`
     on `body` make body a scroll container and break sticky on its children;
     those pages were migrated to `overflow-x:clip` in the same PR. The
     `!important` here is a belt-and-braces hedge against any per-page rule
     accidentally overriding position. */
  position: -webkit-sticky;
  position: sticky !important;
  top: 0 !important;
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 64px;
  padding: 0 20px;
  /* iOS safe-area: extra top padding lets the status-bar inset (notch/Dynamic Island)
     overlap our white background without clipping the logo + nav. Pages must declare
     viewport-fit=cover for env(safe-area-inset-*) to populate on iOS. Falls back to
     0 on non-iOS so layout is unchanged. */
  padding-top: env(safe-area-inset-top, 0);
  height: calc(64px + env(safe-area-inset-top, 0));
  background: var(--ejh-white);
  border-bottom: 5px solid var(--ejh-black);
  box-shadow: none;
  transition: box-shadow 0.18s ease-out;
}
.ej-header.ej-scrolled { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); }

/* ─── Logo ──────────────────────────────────────────────────────────── */
.ej-logo {
  font-family: 'Fredoka One', cursive;
  font-size: 1.35rem;
  color: var(--ejh-black);
  text-shadow: 2px 2px 0 var(--ejh-pink);
  text-decoration: none;
  letter-spacing: 0.3px;
  white-space: nowrap;
  flex-shrink: 0;
}
.ej-logo:hover { color: var(--ejh-pink); text-shadow: 2px 2px 0 var(--ejh-black); }

/* ─── Center nav cluster ────────────────────────────────────────────── */
.ej-nav-items {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
}
.ej-nav-link {
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 0.84rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ejh-black);
  text-decoration: none;
  height: 100%;
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  transition: background 0.1s, color 0.1s;
}
.ej-nav-link:hover { background: var(--ejh-black); color: var(--ejh-yellow); }
.ej-nav-link.ej-active { background: var(--ejh-yellow); color: var(--ejh-black); border-left: 2px solid var(--ejh-black); border-right: 2px solid var(--ejh-black); }
/* index-hero-neon-fix (2026-05-30) — was a solid green pill. Now matches
   the other nav items (no special background) but the text glows
   neon-green so it still says "this is the shop link". Hover punches
   up the glow rather than swapping colors. */
.ej-nav-link.ej-shop {
  background: transparent;
  border-left: 0;
  border-right: 0;
  color: #c8ffd6;
  text-shadow:
    0 0 4px  rgba(255, 255, 255, 0.85),
    0 0 10px var(--ejh-green),
    0 0 22px var(--ejh-green),
    0 0 38px rgba(0, 230, 118, 0.55);
}
.ej-nav-link.ej-shop:hover {
  background: transparent;
  color: #ffffff;
  text-shadow:
    0 0 6px  rgba(255, 255, 255, 0.95),
    0 0 14px var(--ejh-green),
    0 0 30px var(--ejh-green),
    0 0 52px rgba(0, 230, 118, 0.7);
}

/* feat/jungle-club-neon-nav (2026-06-02): match the Shop Plants neon
   treatment for the Jungle Club nav entry. Same grammar, pink ink
   instead of green so the two pillars (commerce vs membership) read
   distinct at a glance. */
.ej-nav-link.ej-jungle-club {
  background: transparent;
  border-left: 0;
  border-right: 0;
  color: #ffd6e8;
  text-shadow:
    0 0 4px  rgba(255, 255, 255, 0.85),
    0 0 10px var(--ejh-pink),
    0 0 22px var(--ejh-pink),
    0 0 38px rgba(255, 77, 166, 0.55);
}
.ej-nav-link.ej-jungle-club:hover {
  background: transparent;
  color: #ffffff;
  text-shadow:
    0 0 6px  rgba(255, 255, 255, 0.95),
    0 0 14px var(--ejh-pink),
    0 0 30px var(--ejh-pink),
    0 0 52px rgba(255, 77, 166, 0.7);
}

/* feat/rewards-neon-nav (2026-06-02): match the Shop Plants + Jungle Club
   neon grammar for the Rewards nav entry. Cyan/blue ink to read as
   distinct from the green (commerce) and pink (membership) pillars —
   rewards = points/utility/electric. Same recipe, blue halo. */
.ej-nav-link.ej-rewards {
  background: transparent;
  border-left: 0;
  border-right: 0;
  color: #d6f3ff;
  text-shadow:
    0 0 4px  rgba(255, 255, 255, 0.85),
    0 0 10px var(--ejh-blue),
    0 0 22px var(--ejh-blue),
    0 0 38px rgba(0, 200, 255, 0.55);
}
.ej-nav-link.ej-rewards:hover {
  background: transparent;
  color: #ffffff;
  text-shadow:
    0 0 6px  rgba(255, 255, 255, 0.95),
    0 0 14px var(--ejh-blue),
    0 0 30px var(--ejh-blue),
    0 0 52px rgba(0, 200, 255, 0.7);
}

/* ─── Right cluster ─────────────────────────────────────────────────── */
.ej-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* feat-growth-tiers (2026-05-30) — Growth tier chip rendered immediately
   before the .ej-account button when the customer is signed in. Cached
   in sessionStorage so cross-page nav is instant. Hidden on guests.
   Mobile cuts the name and shows just the emoji + coupon badge (≥44px). */
.ej-tier-chip {
  display: none;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 6px 12px 6px 10px;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  border: 1.5px solid var(--ej-tier-accent, var(--ejh-green));
  border-radius: 999px;
  text-decoration: none;
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.3px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.30), 0 0 8px var(--ej-tier-accent, var(--ejh-green));
  transition: transform 80ms, box-shadow 120ms;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
.ej-tier-chip:hover { transform: translateY(-1px); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.30), 0 0 14px var(--ej-tier-accent, var(--ejh-green)); }
.ej-tier-chip:active { transform: translateY(1px); }
.ej-tier-chip .ej-tier-emoji {
  font-size: 1.15rem;
  line-height: 1;
  filter: drop-shadow(0 0 4px var(--ej-tier-accent, var(--ejh-green)));
}
.ej-tier-chip .ej-tier-name {
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-size: 0.74rem;
  font-weight: 900;
  color: var(--ej-tier-accent, var(--ejh-green));
}
.ej-tier-chip .ej-tier-coupons {
  min-width: 18px; height: 18px;
  border-radius: 999px;
  padding: 0 5px;
  background: var(--ejh-pink);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  margin-left: 2px;
}
@media (max-width: 520px) {
  .ej-tier-chip { padding: 6px 8px; min-width: 44px; justify-content: center; }
  .ej-tier-chip .ej-tier-name { display: none; }
}

/* Account button + dropdown.
   site-content-admin c1 (2026-05-28): button shows literal text
   "MY ACCOUNT" instead of the 44×44 avatar/initials square. Sized like
   the other nav links so it sits inline with HOME / SHOP PLANTS / etc.
   Still ≥44px tap target via vertical padding. */
.ej-account {
  position: relative;
}
.ej-account-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  background: var(--ejh-white);
  border: 3px solid var(--ejh-black);
  box-shadow: 3px 3px 0 var(--ejh-black);
  cursor: pointer;
  font-family: 'Fredoka One', cursive;
  font-size: 0.78rem;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ejh-black);
  transition: transform 0.08s, box-shadow 0.08s;
}
.ej-account-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ejh-black); }
.ej-account-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ejh-black); }
.ej-account.ej-open .ej-account-btn { background: var(--ejh-yellow); }
.ej-account-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  background: var(--ejh-white);
  border: 3px solid var(--ejh-black);
  box-shadow: 5px 5px 0 var(--ejh-black);
  display: none;
  flex-direction: column;
  z-index: 400;
}
.ej-account.ej-open .ej-account-menu { display: flex; }
.ej-account-menu a, .ej-account-menu button {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 0.86rem;
  color: var(--ejh-black);
  text-decoration: none;
  padding: 12px 16px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  border-bottom: 2px solid var(--ejh-black);
  display: block;
}
.ej-account-menu > :last-child { border-bottom: 0; }
.ej-account-menu a:hover, .ej-account-menu button:hover { background: var(--ejh-yellow); }

/* Cart badge */
.ej-cart-btn {
  position: relative;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ejh-white);
  border: 3px solid var(--ejh-black);
  box-shadow: 3px 3px 0 var(--ejh-black);
  cursor: pointer;
  font-size: 1.1rem;
  padding: 0;
  transition: transform 0.08s, box-shadow 0.08s;
}
.ej-cart-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ejh-black); }
.ej-cart-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ejh-black); }
.ej-cart-count {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  background: var(--ejh-pink);
  color: var(--ejh-white);
  border: 2px solid var(--ejh-black);
  border-radius: 11px;
  font-family: 'Fredoka One', cursive;
  font-size: 0.72rem;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.ej-cart-btn.ej-empty .ej-cart-count { display: none; }

/* CTA tile */
.ej-cta {
  font-family: 'Fredoka One', cursive;
  font-size: 0.86rem;
  letter-spacing: 0.5px;
  padding: 10px 16px;
  background: var(--ejh-pink);
  color: var(--ejh-white);
  border: 3px solid var(--ejh-black);
  box-shadow: 5px 5px 0 var(--ejh-black);
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.08s, box-shadow 0.08s;
}
.ej-cta:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ejh-black); }
.ej-cta:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--ejh-black); }

/* Hamburger — chunky 3-bar in black square */
.ej-hamburger {
  display: none;
  width: 44px;
  height: 44px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: var(--ejh-black);
  border: 3px solid var(--ejh-black);
  box-shadow: 3px 3px 0 var(--ejh-black);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.ej-hamburger span {
  display: block;
  width: 22px;
  height: 3px;
  background: var(--ejh-yellow);
  border-radius: 2px;
}
.ej-hamburger:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ejh-black); }

/* ─── Mobile menu overlay (full-screen) ─────────────────────────────── */
.ej-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: var(--ejh-black);
  color: var(--ejh-white);
  display: none;
  flex-direction: column;
  /* iOS safe-area: add the inset values to top (so close button clears the notch)
     and bottom (so Sign Out / CTA links clear the home indicator strip). */
  padding: calc(90px + env(safe-area-inset-top, 0)) 28px calc(32px + env(safe-area-inset-bottom, 0));
  overflow-y: auto;
}
.ej-mobile-menu.ej-open { display: flex; }
.ej-mobile-close {
  position: absolute;
  /* iOS safe-area: same notch-clear treatment as .ej-mobile-menu's top padding.
     Without this, the close button sits behind the notch on iPhone X+. */
  top: calc(16px + env(safe-area-inset-top, 0));
  right: 16px;
  background: transparent;
  color: var(--ejh-white);
  border: 3px solid var(--ejh-yellow);
  font-family: 'Fredoka One', cursive;
  font-size: 0.85rem;
  padding: 8px 14px;
  cursor: pointer;
}
.ej-mobile-menu a, .ej-mobile-menu button {
  font-family: 'Fredoka One', cursive;
  font-size: 1.5rem;
  color: var(--ejh-white);
  text-decoration: none;
  padding: 14px 0;
  border-bottom: 2px solid rgba(255, 255, 255, 0.12);
  background: transparent;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  text-align: left;
  cursor: pointer;
}
.ej-mobile-menu a:hover, .ej-mobile-menu button:hover { color: var(--ejh-yellow); }
.ej-mobile-menu a.ej-mm-shop {
  color: #c8ffd6;
  text-shadow:
    0 0 4px  rgba(255, 255, 255, 0.85),
    0 0 10px var(--ejh-green),
    0 0 22px var(--ejh-green);
}
.ej-mobile-menu a.ej-mm-cta { color: var(--ejh-yellow); }
.ej-mobile-menu .ej-mm-divider { height: 2px; background: rgba(255,255,255,0.15); border: 0; margin: 12px 0; }

body.ej-menu-open { overflow: hidden; }

/* ─── Stripped variant (checkout.html) ──────────────────────────────── */
.ej-header.ej-stripped .ej-nav-items,
.ej-header.ej-stripped .ej-account,
.ej-header.ej-stripped .ej-cta,
.ej-header.ej-stripped .ej-hamburger { display: none; }
.ej-header.ej-stripped .ej-right { flex: 1; justify-content: flex-end; }

/* ─── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .ej-header { height: calc(58px + env(safe-area-inset-top, 0)); padding: 0 14px; padding-top: env(safe-area-inset-top, 0); gap: 10px; }
  .ej-logo { font-size: 1.15rem; }
  .ej-nav-items { display: none; }
  .ej-hamburger { display: flex; }
  .ej-cta { display: none; }
  .ej-right { gap: 8px; }
  /* Stripped header on mobile: keep cart visible, hide everything else */
  .ej-header.ej-stripped .ej-hamburger { display: none; }
}
@media (max-width: 420px) {
  .ej-logo { font-size: 1rem; }
  .ej-account-btn, .ej-cart-btn { width: 40px; height: 40px; }
}


/* fix-mobile-header-overlap (2026-05-29) — kill MY ACCOUNT/logo collision.

   ROOT CAUSE: shared/header.js renderAvatar() writes the literal text
   "MY ACCOUNT" into .ej-account-btn (site-content-admin c1 change). On
   phone widths the logo + MY ACCOUNT + cart + hamburger don't all fit,
   so MY ACCOUNT overlaps the logo. Below 768px we hide .ej-account
   entirely — the "My Account" link is already in .ej-mobile-menu so
   the hamburger covers that path. Logo gets truncation protection so
   it can never collide with the right-side controls. */

@media (max-width: 768px) {
  /* Hide MY ACCOUNT button on phone — the link is in the hamburger menu. */
  .ej-account { display: none !important; }
  /* Logo: take remaining width, truncate before colliding. */
  .ej-logo {
    flex: 1 1 auto;
    min-width: 0;
    max-width: calc(100vw - 130px); /* leaves room for cart + hamburger */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ej-right { flex: 0 0 auto; gap: 8px; }
}
/* Extra-narrow phones (375/390px etc.): shrink logo a touch and hard-cap. */
@media (max-width: 420px) {
  .ej-logo { font-size: 0.95rem; max-width: calc(100vw - 120px); }
}