/**
 * Header section — values from /specs/header.spec.md only.
 * Scoped under .site-header (and co-located .header-mobile-menu).
 */

/* -------------------------------------------------------------------------- */
/* Tokens (spec colors, typography stacks, spacing base)                      */
/* -------------------------------------------------------------------------- */

.site-header {
  --font-sans: "Geograph", system-ui, sans-serif;
  --spacing: 0.25rem;
  --color-black: #212121;
  --color-white: #fff;
  --color-natural-white-60: #ece9e2;
  --color-natural-white: #e0dacf;
  --color-natural-white-25: #f5f4f1;
  --color-stroke: #cdcdcd;
  --color-light-charcoal: #575757;
  --color-red: #9c0f0f;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --tracking-wider: 0.05em;
  --leading-normal: 1.5;
  --radius-sm: 0.25rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --ease-sine-in-out: cubic-bezier(0.37, 0, 0.63, 1);
  --z-header: 80;
  --z-takeover: 90;
  --header-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
  --header-shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
  --header-sticky-ease: cubic-bezier(0.215, 0.61, 0.355, 1);

  position: relative;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  color: rgb(0, 0, 0);
}

/* Spec: body header.shopify-section-group-header-group — sticky shell, zero flow height */
.site-header.shopify-section-group-header-group {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  height: 0;
  overflow: visible;
  pointer-events: none;
  transition: top 0.3s var(--header-sticky-ease);
}

body.global-banner-active .site-header.shopify-section-group-header-group {
  top: var(--global-banner-offset, var(--global-banner-height));
}

body.mobile-menu-open .site-header.shopify-section-group-header-group {
  z-index: var(--z-takeover);
}

.site-header__nav {
  position: relative;
  height: 0;
  overflow: visible;
  pointer-events: none;
}

/* Skip link — spec sr-only + focus styles */
.site-header__skip {
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

.site-header__skip:focus {
  clip-path: none;
  position: absolute;
  top: calc(var(--spacing) * 1);
  left: 50%;
  z-index: 60;
  display: inline-block;
  transform: translateX(-50%);
  border-radius: 0.25rem;
  background-color: var(--color-white);
  padding: calc(var(--spacing) * 1) calc(var(--spacing) * 3);
  font-size: var(--text-sm);
  line-height: 20px;
  color: rgb(0, 0, 0);
  width: auto;
  height: auto;
  margin: -1px;
  outline: 2px solid oklch(54.6% 0.245 262.881);
  outline-offset: 2px;
}

.site-header__sr-only {
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

/* Floating header bar — spec: absolute top-5 right-5 left-5, rounded-xl, bg-white, shadow */
.site-header__bar {
  position: absolute;
  top: calc(var(--spacing) * 5);
  right: calc(var(--spacing) * 5);
  left: calc(var(--spacing) * 5);
  z-index: 50;
  max-width: 2560px;
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background-color: rgb(255, 255, 255);
  padding-inline: calc(var(--spacing) * 2.5);
  box-shadow: var(--header-shadow);
  pointer-events: auto;
}

@media (min-width: 64rem) {
  .site-header__bar {
    padding-inline: calc(var(--spacing) * 5);
  }
}

.site-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Production: mobile h-10, desktop lg:h-12 */
.site-header__row--mobile {
  height: calc(var(--spacing) * 10);
}

.site-header__row--desktop {
  display: none;
}

@media (min-width: 64rem) {
  .site-header__row--mobile {
    display: none;
  }

  .site-header__row--desktop {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
    height: calc(var(--spacing) * 12);
  }
}

.site-header__logo-img {
  display: block;
  width: 74px;
  height: 24px;
}

/* Desktop mega — production fixed container under floating bar */
.site-header__desktop-menu {
  position: fixed;
  top: 0;
  left: calc(var(--spacing) * 5);
  right: calc(var(--spacing) * 5);
  z-index: 30;
  max-width: 2560px;
  margin-inline: auto;
  padding-top: calc(calc(var(--spacing) * 20) + var(--global-banner-offset, 0px));
  pointer-events: none;
}

@media (min-width: 64rem) {
  .site-header__desktop-menu {
    display: block;
  }
}

@media (max-width: 63.99rem) {
  .site-header__desktop-menu {
    display: none;
  }
}

.site-header__mega-shell:not([hidden]),
.site-header__desktop-menu:not([hidden]) {
  pointer-events: auto;
}

.site-header__mega-overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
}

.header-mobile-menu.is-open {
  pointer-events: auto;
}

.header-mobile-menu.is-open .header-mobile-menu__overlay {
  transform: scaleY(1);
}

.site-header__row--mobile {
  position: relative;
}

.site-header__row--mobile .site-header__logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.site-header__row--mobile .site-header__utilities {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  margin-left: auto;
}

.site-header__logo-img {
  display: block;
  width: 74px;
  height: 24px;
}

.site-header__logo-img--venus {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.site-header__row--mobile,
.site-header__row--desktop {
  opacity: 0;
}

.site-header__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(0, 0, 0);
  text-decoration: none;
}

.site-header__logo-text {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-normal);
  font-size: 0.9375rem;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(33, 33, 33);
}

.site-header__icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0.375rem;
  padding: 0;
  background: transparent;
  color: rgb(0, 0, 0);
  cursor: pointer;
  text-decoration: none;
}

.site-header__icon {
  width: calc(var(--spacing) * 6);
  height: calc(var(--spacing) * 6);
}

/* Cart count badge — populated by cart-drawer.js from CloneCart */
.site-header__cart-count {
  position: absolute;
  top: calc(var(--spacing) * 0.5);
  right: calc(var(--spacing) * 0.5);
  min-width: calc(var(--spacing) * 4);
  height: calc(var(--spacing) * 4);
  padding-inline: calc(var(--spacing) * 1);
  border-radius: 9999px;
  background-color: var(--color-black);
  color: var(--color-white);
  font-size: 10px;
  line-height: calc(var(--spacing) * 4);
  font-weight: var(--font-weight-medium);
  text-align: center;
}

.site-header__cart-count[hidden] {
  display: none;
}

/* Pending order badge — hamburger when menu closed; Orders item when open */
.header-pending-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(var(--spacing) * 4);
  height: calc(var(--spacing) * 4);
  padding-inline: calc(var(--spacing) * 1);
  border-radius: 9999px;
  background-color: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: var(--font-weight-medium);
  line-height: 1;
  pointer-events: none;
}

.header-pending-badge[hidden] {
  display: none !important;
}

.header-pending-badge--icon {
  position: absolute;
  top: calc(var(--spacing) * 0.25);
  right: calc(var(--spacing) * 0.25);
}

.header-pending-badge--menu-item {
  position: static;
  margin-left: calc(var(--spacing) * 2);
  margin-right: calc(var(--spacing) * 1);
  flex-shrink: 0;
}

.site-header__nav-link .header-pending-badge--menu-item {
  margin-left: calc(var(--spacing) * 1.5);
  margin-right: 0;
}

/* Desktop primary nav — production: flex flex-1 justify-center gap-8 */
.site-header__links {
  display: flex;
  justify-content: center;
  gap: calc(var(--spacing) * 8);
  margin: 0;
  padding: 0;
  list-style: none;
  justify-self: center;
}

.site-header__nav-link,
.site-header__nav-anchor {
  cursor: pointer;
  border: 0;
  background: transparent;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: 16px;
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: rgb(33, 33, 33);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s var(--ease-sine-in-out);
}

.site-header__nav-link {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
}

/* Production: non-hovered nav items fade to 50% when a mega trigger is active */
.site-header__nav-item--dimmed {
  opacity: 0.5;
}

.site-header__utilities {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
}

/* Production desktop utilities: gap-4, aligned to the right column */
.site-header__row--desktop .site-header__utilities {
  justify-self: end;
  gap: calc(var(--spacing) * 4);
}

.site-header__logo--desktop {
  justify-self: start;
  justify-content: flex-start;
}

.site-header__logo--desktop .site-header__logo-img--venus {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

/* Mega menu layers — GSAP controls visibility */
.site-header__mega-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background-color: var(--color-natural-white-60);
  border-bottom-right-radius: var(--radius-xl);
  border-bottom-left-radius: var(--radius-xl);
  box-shadow: var(--header-shadow-lg);
  transform-origin: top center;
}

.site-header__mega {
  position: relative;
  z-index: 3;
  opacity: 1;
}

.site-header__mega-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-inline: calc(var(--spacing) * 8);
  padding-bottom: calc(var(--spacing) * 10);
}

/* Secondary category bar — spec: bg-natural-white, min-h 48px, rounded-xl */
.site-header__mega-secondary-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border-radius: var(--radius-xl);
  background-color: var(--color-natural-white);
  opacity: 0;
}

.site-header__mega-secondary-nav-inner {
  display: flex;
  justify-content: center;
  gap: calc(var(--spacing) * 5);
}

.site-header__mega-secondary-btn {
  border: 0;
  background: transparent;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 20px;
  font-weight: var(--font-weight-normal);
  color: var(--color-light-charcoal);
  text-transform: capitalize;
  cursor: pointer;
  transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.site-header__mega-secondary-btn--active {
  font-weight: var(--font-weight-medium);
  color: var(--color-black);
}

/* Panel content area — spec: flex gap-x-8 pt-9 */
.site-header__mega-content {
  display: flex;
  gap: calc(var(--spacing) * 8);
  padding-top: calc(var(--spacing) * 9);
  opacity: 0;
}

.site-header__mega-columns {
  display: flex;
  gap: calc(var(--spacing) * 8);
}

.site-header__mega-column {
  display: flex;
  flex-direction: column;
  min-width: 150px;
  opacity: 0;
}

.site-header__mega-column--grouped {
  gap: calc(var(--spacing) * 7);
}

.site-header__mega-column--individual {
  gap: calc(var(--spacing) * 2);
}

.site-header__mega-group-link {
  font-size: var(--text-xs);
  line-height: 16px;
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: rgb(33, 33, 33);
  text-decoration: none;
}

.site-header__mega-column-title {
  margin: 0 0 calc(var(--spacing) * 1);
  font-size: var(--text-xs);
  line-height: 16px;
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: rgb(33, 33, 33);
}

.site-header__mega-column-title a {
  color: inherit;
  text-decoration: none;
}

.site-header__mega-column-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-header__mega-column-list > li + li {
  margin-top: calc(var(--spacing) * 1.5);
}

.site-header__mega-column-link {
  font-size: var(--text-sm);
  line-height: 20px;
  color: var(--color-light-charcoal);
  text-decoration: none;
}

@media (hover: hover) {
  .site-header__mega-group-link:hover,
  .site-header__mega-column-title a:hover,
  .site-header__mega-column-link:hover {
    text-decoration: underline;
  }
}

/* No-JS fallback when GSAP is unavailable */
.site-header__desktop-menu.is-mega-open:not([hidden]) .site-header__mega-overlay {
  opacity: 1;
}

.site-header__desktop-menu.is-mega-open:not([hidden]) .site-header__mega-bg {
  transform: scaleY(1);
}

.site-header__desktop-menu.is-mega-open:not([hidden]) .site-header__mega-secondary-nav,
.site-header__desktop-menu.is-mega-open:not([hidden]) .site-header__mega-content,
.site-header__desktop-menu.is-mega-open:not([hidden]) .site-header__mega-column {
  opacity: 1;
}

/* Hamburger ↔ close — production uses stacked icons with v-show; crossfade + rotate here */
.site-header__menu-toggle {
  position: relative;
  width: calc(var(--spacing) * 6);
  height: calc(var(--spacing) * 6);
}

.site-header__menu-icon-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    opacity 0.3s var(--ease-sine-in-out),
    transform 0.3s var(--ease-sine-in-out);
}

.site-header__menu-icon-wrap--close {
  opacity: 0;
  transform: rotate(-90deg) scale(0.85);
  pointer-events: none;
}

.site-header__menu-icon-wrap--open {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

body.mobile-menu-open .site-header__menu-icon-wrap--close {
  opacity: 1;
  transform: rotate(0deg) scale(1);
  pointer-events: auto;
}

body.mobile-menu-open .site-header__menu-icon-wrap--open {
  opacity: 0;
  transform: rotate(90deg) scale(0.85);
  pointer-events: none;
}

/* Mobile menu — GSAP overlay + multi-level slides (spec: header.spec.md) */
.header-mobile-menu {
  /* Inherit from .site-header; re-declare so drawer sizing never loses tokens */
  --spacing: 0.25rem;
  --text-sm: 0.875rem;
  --font-weight-medium: 500;
  --tracking-wider: 0.05em;
  --leading-normal: 1.5;

  position: fixed;
  inset: 0;
  z-index: 40;
  min-height: 100dvh;
  pointer-events: none;
  overflow: hidden;
  overflow-y: auto;
}

/* Production: offset menu only while closed; when open use inset-0 */
body.global-banner-active:not(.mobile-menu-open) .header-mobile-menu {
  top: var(--global-banner-height);
  min-height: calc(100dvh - var(--global-banner-height));
}

body.mobile-menu-open .header-mobile-menu {
  top: 0;
  min-height: 100dvh;
}

/* Banner stays visible above the menu overlay when open */
body.mobile-menu-open .global-banner {
  z-index: calc(var(--z-takeover) + 1);
}

@media (min-width: 64rem) {
  .header-mobile-menu {
    display: none !important;
  }
}

.header-mobile-menu__shell {
  height: 100%;
}

@media (min-width: 64rem) {
  .header-mobile-menu__shell {
    display: none;
  }
}

.header-mobile-menu__overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  height: 100%;
  width: 100%;
  background-color: var(--color-natural-white-60);
  transform-origin: top center;
}

.header-mobile-menu__content {
  position: relative;
  z-index: 20;
  min-height: 100%;
  height: 100%;
  overflow: hidden;
}

.header-mobile-menu__level {
  position: absolute;
  inset: 0;
  display: flex;
  height: 100%;
  flex-direction: column;
  padding-inline: calc(var(--spacing) * 5);
  /* Adjusted from production 2.5rem — 5.25rem clears the mobile header bar */
  padding-top: calc(5.25rem + var(--global-banner-offset, 0px));
  padding-bottom: calc(var(--spacing) * 4);
}

/* Level 0 — production: absolute inset-0 flex h-full flex-col justify-between px-5 pb-4 pt-[calc(2.5rem+offset)] */
.header-mobile-menu__level--root,
[data-main-menu-container] {
  justify-content: space-between;
  display: none;
  opacity: 0;
  pointer-events: none;
}

.header-mobile-menu__level--stack {
  pointer-events: none;
}

/* Production keeps submenu panels hidden via GSAP display — not the [hidden] attribute */
[data-submenu-level="1"],
[data-submenu-level="2"],
.header-mobile-menu [data-submenu] {
  display: none;
  opacity: 0;
  pointer-events: none;
}

.header-mobile-menu__subpanel {
  position: absolute;
  inset: 0;
  display: flex;
  height: 100%;
  flex-direction: column;
  padding-inline: calc(var(--spacing) * 5);
  /* Adjusted from production 2.5rem — 5.25rem clears the mobile header bar */
  padding-top: calc(5.25rem + var(--global-banner-offset, 0px));
  padding-bottom: calc(var(--spacing) * 4);
  pointer-events: none;
  overflow: hidden;
}

/* Level-0 nav list — production #top-navigation-drawer-mobile: flex h-full flex-col gap-2 */
#top-navigation-drawer-mobile {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  gap: calc(var(--spacing) * 2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.header-mobile-menu__list,
.header-mobile-menu__sublist,
.header-mobile-menu__accordion-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.header-mobile-menu__list {
  display: flex;
  height: 100%;
  flex-direction: column;
  gap: calc(var(--spacing) * 2);
}

/* GSAP fades these in on open; start hidden to match production */
[data-mobile-menu-item] {
  opacity: 0;
}

/* Production li: flex py-2 text-sm — line-height comes from child leading-normal */
#top-navigation-drawer-mobile > .header-mobile-menu__item,
.header-mobile-menu__item,
.header-mobile-menu__sublist-item {
  display: flex;
  padding-block: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
}

.header-mobile-menu__primary-link {
  flex: 1 1 auto;
  padding-right: calc(var(--spacing) * 20);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: rgb(0, 0, 0);
  text-decoration: none;
}

/* Production button: flex w-full */
.header-mobile-menu__trigger {
  display: flex;
  width: 100%;
  align-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  opacity: 1;
  cursor: pointer;
}

.header-mobile-menu__trigger-label {
  flex-grow: 1;
  text-align: left;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.header-mobile-menu__icon {
  width: calc(var(--spacing) * 6);
  height: calc(var(--spacing) * 6);
  flex-shrink: 0;
}

/* Utility footer — sits below nav via level--root justify-between */
.header-mobile-menu__utils {
  margin-top: auto;
  padding-top: calc(var(--spacing) * 4);
}

/* CTA row: icon + label as one centered group */
.header-mobile-menu__install {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacing) * 2);
  width: 100%;
  margin: 0;
  padding: calc(var(--spacing) * 2.5);
  border: 0;
  border-radius: var(--radius);
  background-color: var(--color-natural-white);
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  cursor: pointer;
}

.header-mobile-menu__install-icon {
  width: calc(var(--spacing) * 4);
  height: calc(var(--spacing) * 4);
  flex-shrink: 0;
}

.header-mobile-menu__install-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  font-weight: var(--font-weight-medium);
  text-transform: none;
}

.header-mobile-menu__install:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* No-GSAP / is-open fallback: show level-0 shell with production padding */
.header-mobile-menu.is-open [data-main-menu-container] {
  display: flex;
  opacity: 1;
  pointer-events: auto;
}

/* No-GSAP fallback: show items once overlay is open */
.header-mobile-menu.is-open [data-mobile-menu-item] {
  opacity: 1;
  pointer-events: auto;
}

/* Production: bg-natural-white relative flex justify-center rounded px-2.5 py-2.5 */
.header-mobile-menu__breadcrumb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  background-color: var(--color-natural-white);
  padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 2.5);
}

/* Icon left, label optically centered (balanced empty column mirrors icon width) */
.header-mobile-menu__breadcrumb-btn {
  position: relative;
  display: grid;
  grid-template-columns: calc(var(--spacing) * 6) 1fr calc(var(--spacing) * 6);
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  opacity: 1;
  cursor: pointer;
}

.header-mobile-menu__breadcrumb-icon {
  grid-column: 1;
  width: calc(var(--spacing) * 6);
  height: calc(var(--spacing) * 6);
}

.header-mobile-menu__breadcrumb-label {
  grid-column: 2;
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
}

.header-mobile-menu__sublist {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 2.5);
  flex: 1 1 auto;
  margin-top: calc(var(--spacing) * 6);
  margin-bottom: calc(var(--spacing) * 2.5);
}

.header-mobile-menu__promos {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 2.5);
  padding-bottom: calc(var(--spacing) * 2);
}

.header-mobile-menu__promo {
  position: relative;
  display: block;
  color: inherit;
  text-decoration: none;
}

.header-mobile-menu__promo-img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  border-radius: var(--radius-lg);
  object-fit: cover;
}

.header-mobile-menu__promo-label {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: calc(var(--spacing) * 2);
  padding-top: calc(var(--spacing) * 2);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: 16px;
  text-transform: uppercase;
  color: var(--color-white);
}

/* Production: mt-6 mb-2.5 flex flex-grow flex-col gap-2.5 pt-1 — no scroll */
.header-mobile-menu__accordion-list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 2.5);
  flex: 1 1 auto;
  min-height: 0;
  margin-top: calc(var(--spacing) * 6);
  margin-bottom: calc(var(--spacing) * 2.5);
  padding-top: calc(var(--spacing) * 1);
  overflow: hidden;
}

/* Production: flex w-full items-center justify-between py-2 */
.header-mobile-menu__accordion-trigger {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding-block: calc(var(--spacing) * 2);
  padding-inline: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  opacity: 1;
  cursor: pointer;
}

.header-mobile-menu__accordion-label {
  flex: 1 1 auto;
  text-align: left;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

/* Production: + when collapsed, − when expanded (icons are swapped in markup) */
.header-mobile-menu__icon--open {
  display: block;
}

.header-mobile-menu__icon--closed {
  display: none;
}

.header-mobile-menu__accordion-item.is-open .header-mobile-menu__icon--open {
  display: none;
}

.header-mobile-menu__accordion-item.is-open .header-mobile-menu__icon--closed {
  display: block;
}

/* Production: flex flex-col gap-2.5 overflow-hidden py-0 transition-all duration-300 */
.header-mobile-menu__accordion-content {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 2.5);
  overflow: hidden;
  max-height: 0;
  padding-block: 0;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Production inner wrapper: py-2 pl-4 */
.header-mobile-menu__accordion-item.is-open .header-mobile-menu__accordion-content {
  padding-block: calc(var(--spacing) * 2);
  padding-left: calc(var(--spacing) * 4);
}

.header-mobile-menu__sublink {
  display: block;
  margin-bottom: calc(var(--spacing) * 2);
  padding-right: calc(var(--spacing) * 10);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  font-weight: var(--font-weight-normal);
  text-transform: capitalize;
  color: var(--color-light-charcoal);
  text-decoration: none;
}

@media (hover: hover) {
  .header-mobile-menu__sublink:hover {
    text-decoration: underline;
  }
}

/* Mega menu link styles inside panel — spec dropdown typography */
.site-header__mega .site-header__mega-sublink {
  font-size: var(--text-xs);
  line-height: 16px;
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: rgb(33, 33, 33);
  text-decoration: none;
}

@media (hover: hover) {
  .site-header__mega .site-header__mega-sublink:hover {
    text-decoration: underline;
  }
}

/* Referral — copyable fields (desktop mega + mobile nested panel) */
.site-header__mega-panel--referral {
  padding-top: calc(var(--spacing) * 6);
}

.site-header__mega-panel--referral .site-header__mega-columns {
  display: block;
  max-width: 28rem;
  margin-inline: auto;
}

/* Account settings — desktop mega + mobile nested panel */
.site-header__mega-panel--account {
  padding-top: calc(var(--spacing) * 6);
}

.site-header__mega-panel--account .site-header__mega-columns {
  display: block;
  max-width: 28rem;
  margin-inline: auto;
}

.header-account {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 3.5);
  width: 100%;
}

.header-account--mobile {
  padding: calc(var(--spacing) * 4) calc(var(--spacing) * 1);
  max-height: calc(100vh - 8rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.header-account__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: rgb(33, 33, 33);
}

.header-account__hint {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--color-light-charcoal, #6b6b6b);
}

.header-account__status {
  margin: 0;
  padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 3);
  border-radius: var(--radius, 0.5rem);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: 1.4;
  background: var(--color-natural-white-60, #f0eeea);
  color: rgb(33, 33, 33);
}

.header-account__status[hidden] {
  display: none !important;
}

.header-account__status[data-type='ok'] {
  background: #e5f0e5;
  color: #1f5c2e;
}

.header-account__status[data-type='warn'] {
  background: #f7efd9;
  color: #7a5b14;
}

.header-account__status[data-type='error'] {
  background: #f3e0e0;
  color: #9b2c2c;
}

.header-account__form {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 3);
}

.header-account__field {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 1.5);
}

.header-account__label {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: 1.3;
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-light-charcoal, #6b6b6b);
}

.header-account__input,
.header-account__select {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 3);
  border: 1px solid var(--color-stroke, #e5e5e5);
  border-radius: var(--radius, 0.5rem);
  background: var(--color-natural-white-25, #f5f4f1);
  color: rgb(33, 33, 33);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.header-account__select {
  min-width: 5.75rem;
  flex: 0 0 auto;
  appearance: none;
  padding-right: 1.85rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23575757' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  cursor: pointer;
}

.header-account__input:focus,
.header-account__select:focus {
  outline: none;
  border-color: rgb(33, 33, 33);
  background-color: #fff;
}

.header-account__phone-row,
.header-account__location-row {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--color-stroke, #e5e5e5);
  border-radius: var(--radius, 0.5rem);
  background: var(--color-natural-white-25, #f5f4f1);
  overflow: hidden;
}

.header-account__location-field {
  position: relative;
  width: 100%;
}

.header-account__location-suggest.suggest-menu {
  margin-top: calc(var(--spacing) * 1.5);
}

.header-account__phone-row .header-account__select,
.header-account__phone-row .header-account__input,
.header-account__location-row .header-account__input {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.header-account__phone-row .header-account__select:focus,
.header-account__phone-row .header-account__input:focus,
.header-account__location-row .header-account__input:focus {
  background: transparent;
  border-color: transparent;
}

.header-account__phone-row .header-account__select {
  width: auto;
  max-width: 8.5rem;
  border-right: 1px solid var(--color-stroke, #e5e5e5);
  background-color: var(--color-white, #fff);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23575757' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
}

.header-account__phone-row .header-account__input {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}

.header-account__location-row .header-account__input {
  flex: 1 1 auto;
  min-width: 0;
}

.header-account__input--location {
  padding-right: calc(var(--spacing) * 3);
}

.header-account__locate {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--color-stroke, #e5e5e5);
  border-radius: 0;
  background: var(--color-white, #fff);
  color: rgb(33, 33, 33);
  cursor: pointer;
}

.header-account__locate:hover {
  background: var(--color-natural-white-60, #ebe8e2);
}

.header-account__locate:focus-visible {
  outline: 2px solid rgb(33, 33, 33);
  outline-offset: -2px;
}

.header-account__locate.is-active {
  background: var(--color-natural-white-60, #ebe8e2);
  animation: venus-locate-pulse 1.15s ease-in-out infinite;
}

.header-account__locate.is-active svg {
  transform-origin: center bottom;
  animation: venus-locate-bob 1.15s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .header-account__locate.is-active,
  .header-account__locate.is-active svg {
    animation: none;
  }
}

.header-account__field-hint {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-light-charcoal, #6b6b6b);
}

.header-account__field-hint[data-type='error'] {
  color: #9b2c2c;
}

.header-account__field-hint[hidden] {
  display: none !important;
}

.header-account__submit {
  min-height: 2.75rem;
  padding: 8px 16px;
  border: 1px solid rgb(33, 33, 33);
  border-radius: 9999px;
  background: rgb(33, 33, 33);
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wide);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  transition: background 0.2s ease, color 0.2s ease;
}

.header-account__submit:hover {
  background: transparent;
  color: rgb(33, 33, 33);
}

.header-account__submit.is-loading:disabled,
.header-account__secondary.is-loading:disabled,
.header-account__danger.is-loading:disabled {
  opacity: 1;
  cursor: wait;
}

.header-account__actions {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 2.5);
}

.header-account__secondary {
  min-height: 2.75rem;
  padding: 8px 16px;
  border: 1px solid rgb(33, 33, 33);
  border-radius: 9999px;
  background: transparent;
  color: rgb(33, 33, 33);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
}

.header-account__secondary:hover {
  background: rgb(33, 33, 33);
  color: #fff;
}

.header-account__danger-link {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-light-charcoal, #6b6b6b);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
  text-align: left;
}

.header-account__danger-link:hover {
  color: #9b2c2c;
}

.header-account__delete-panel {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 2.5);
  padding: calc(var(--spacing) * 3.5);
  border: 1px solid rgba(180, 60, 60, 0.25);
  border-radius: var(--radius-md, 0.5rem);
  background: #f8ecec;
}

.header-account__delete-panel[hidden] {
  display: none !important;
}

.header-account__delete-text {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.4;
  color: rgb(33, 33, 33);
}

.header-account__delete-actions {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 2);
}

.header-account__danger {
  min-height: 2.75rem;
  padding: 8px 16px;
  border: 1px solid #9b2c2c;
  border-radius: 9999px;
  background: #9b2c2c;
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
}

/* Orders history — desktop mega + mobile nested panel */
.site-header__mega-panel--orders {
  padding-top: calc(var(--spacing) * 6);
}

.site-header__mega-panel--orders .site-header__mega-columns {
  display: block;
  max-width: 36rem;
  margin-inline: auto;
}

.header-orders {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 3);
  width: 100%;
}

.header-orders--mobile {
  padding: calc(var(--spacing) * 4) calc(var(--spacing) * 1);
  max-height: calc(100vh - 8rem);
  overflow-y: auto;
}

.header-orders__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: rgb(33, 33, 33);
}

.header-orders__hint {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--color-light-charcoal, #6b6b6b);
}

.header-orders__list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.header-orders__empty {
  margin: 0;
  padding: calc(var(--spacing) * 4) 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--color-light-charcoal, #6b6b6b);
}

.header-orders__section-label {
  margin: calc(var(--spacing) * 2) 0 0;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: 1.3;
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-light-charcoal, #6b6b6b);
}

.header-orders__item {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 2);
  padding: calc(var(--spacing) * 3) 0;
  border-top: 1px solid var(--color-stroke, #e5e5e5);
}

.header-orders__item:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.header-orders__item-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(var(--spacing) * 2);
}

.header-orders__item-top:not(:has(.header-orders__status)) {
  justify-content: flex-end;
}

.header-orders__status {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: 1.3;
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: rgb(33, 33, 33);
}

.header-orders__status--pending {
  color: #8a5a00;
}

.header-orders__status--previous {
  color: var(--color-light-charcoal, #6b6b6b);
}

.header-orders__date {
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: 1.3;
  color: var(--color-light-charcoal, #6b6b6b);
  text-align: right;
}

.header-orders__lines {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  row-gap: calc(var(--spacing) * 1);
}

.header-orders__line {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  column-gap: calc(var(--spacing) * 3);
  align-items: start;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.4;
  color: rgb(33, 33, 33);
}

.header-orders__line-label {
  min-width: 0;
}

.header-orders__line-price {
  justify-self: end;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.header-orders__line-meta {
  color: var(--color-light-charcoal, #6b6b6b);
}

.header-orders__meta {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--color-light-charcoal, #6b6b6b);
}

.header-orders__meta--error {
  color: #a33;
}

.header-orders__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--spacing) * 3);
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  color: rgb(33, 33, 33);
}

.header-orders__fee {
  min-width: 0;
  font-weight: var(--font-weight-normal);
  color: var(--color-light-charcoal, #6b6b6b);
}

.header-orders__total-amount {
  flex-shrink: 0;
  margin-left: auto;
  font-weight: var(--font-weight-medium);
  text-align: right;
  white-space: nowrap;
}

.header-orders__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(var(--spacing) * 2);
}

.header-orders__action {
  margin: 0;
  padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 3);
  border: 1px solid var(--color-stroke, #e5e5e5);
  border-radius: var(--radius, 0.5rem);
  background: var(--color-white, #fff);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: 1.3;
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: rgb(33, 33, 33);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.header-orders__action.is-loading:disabled {
  opacity: 1;
  cursor: wait;
}

.header-orders__action:hover {
  background: var(--color-natural-white-25, #f5f4f1);
}

.header-orders__action:focus-visible {
  outline: 2px solid rgb(33, 33, 33);
  outline-offset: 2px;
}

.header-orders__action.is-copied {
  border-color: rgb(33, 33, 33);
}

.header-referral {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 4);
  width: 100%;
}

.header-referral--mobile {
  padding: calc(var(--spacing) * 4) calc(var(--spacing) * 1);
}

.header-referral__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: rgb(33, 33, 33);
}

.header-referral__hint {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--color-light-charcoal, #6b6b6b);
}

.header-referral__field {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 1.5);
}

.header-referral__label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: 1.3;
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-light-charcoal, #6b6b6b);
}

.header-referral__row {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--color-stroke, #e5e5e5);
  border-radius: var(--radius, 0.5rem);
  background: var(--color-natural-white-25, #f5f4f1);
  overflow: hidden;
}

.header-referral__input {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 3);
  border: 0;
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: rgb(33, 33, 33);
  user-select: all;
  -webkit-user-select: all;
  cursor: default;
}

.header-referral__input:focus {
  outline: none;
}

.header-referral__copy {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--color-stroke, #e5e5e5);
  background: var(--color-white, #fff);
  color: rgb(33, 33, 33);
  cursor: pointer;
}

.header-referral__copy:hover {
  background: var(--color-natural-white-60, #ebe8e2);
}

.header-referral__copy:focus-visible {
  outline: 2px solid rgb(33, 33, 33);
  outline-offset: -2px;
}

.header-referral__copy.is-copied {
  color: #1a7a3c;
}

.header-referral__copy-icon {
  width: 1.25rem;
  height: 1.25rem;
}