/* ============================================================
   Header — sticky bar, desktop nav with full-width mega menu,
   mobile drawer (3-level accordion), search panel. Tokens only.
   Behavior in global.js.
   ============================================================ */

.lh-header {
  position: relative;
  z-index: 50;
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-subtle);
}
/* Sticky header: stick the SECTION WRAPPER, not the inner <header>.
   The inner header's wrapper is only header-height tall, so sticking the
   header itself un-sticks the moment you scroll past it. Sticking the
   wrapper (whose containing block is <body>) keeps it pinned for the whole
   page. The inner .lh-header--sticky class (added only when the setting is
   on) is the toggle the wrapper keys off via :has(). */
.lh-header-section:has(.lh-header--sticky) {
  position: sticky;
  top: 0;
  z-index: 50;
}
.lh-header.is-scrolled {
  box-shadow: var(--shadow-sm);
}

.lh-header__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--header-height);
}

.lh-header__cluster {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.lh-header__cluster--left { justify-content: flex-start; }
.lh-header__cluster--right { justify-content: flex-end; }

/* ---- Icon buttons (search/account/cart/menu) ---- */
.lh-header__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target);
  height: var(--touch-target);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-heading);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-fast);
}
.lh-header__icon:hover { color: var(--color-primary); }

/* Signed-in avatar badge — replaces the account glyph so the icon itself
   signals "you are logged in", not just the destination it links to. */
.lh-avatar {
  --lh-avatar-size: 21px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--lh-avatar-size);
  height: var(--lh-avatar-size);
  border-radius: var(--radius-circle);
  background: var(--color-primary);
  color: var(--color-on-action);
  flex: none;
}
.lh-avatar__initial {
  font-family: var(--font-serif);
  font-size: calc(var(--lh-avatar-size) * 0.52);
  line-height: 1;
}
/* Swapped in by global.js the moment someone signs in on the page (lh:account): it settles in
   from a touch smaller instead of popping, so the change of state reads as one. */
.lh-avatar--in { animation: lh-avatar-in var(--duration-base) var(--ease-out) both; }
@keyframes lh-avatar-in { from { opacity: 0; transform: scale(0.8); } }
@media (prefers-reduced-motion: reduce) { .lh-avatar--in { animation-name: lh-avatar-fade; } }
@keyframes lh-avatar-fade { from { opacity: 0; } }

/* Account icon placement: beside the hamburger on mobile, in the right
   cluster on desktop (see header.liquid — it is rendered in both spots). */
.lh-header__icon--account-desktop { display: none; }
@media (min-width: 1024px) {
  .lh-header__icon--account-mobile { display: none; }
  .lh-header__icon--account-desktop { display: inline-flex; }
}

/* Mobile: tighten icon spacing and edge-align the outermost glyphs with the
   container content width (pull the first/last icon out by its internal slack
   so the visible icon edge lines up with the page gutter). */
@media (max-width: 1023px) {
  .lh-header__bar { gap: var(--space-2); }
  .lh-header__cluster { gap: 0; }
  .lh-header__cluster--left > :first-child { margin-inline-start: calc(var(--space-2) * -1); }
  .lh-header__cluster--right > :last-child { margin-inline-end: calc(var(--space-2) * -1); }
}

/* ---- Logo ---- */
.lh-header__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  color: var(--text-heading);
}
.lh-header__logo-img,
.lh-brand-logo { display: block; width: auto; height: auto; max-height: 38px; max-width: 100%; image-rendering: -webkit-optimize-contrast; }
.lh-mobile-nav__brand-img { display: block; width: auto; height: auto; max-height: 30px; }

/* Wordlogo — Playfair wordmark with an amber italic "L" */
.lh-wordlogo {
  font-family: var(--font-display);
  font-size: var(--font-h3);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-heading);
  line-height: 1;
  color: var(--text-heading);
  white-space: nowrap;
}
.lh-wordlogo__em {
  font-style: italic;
  font-weight: var(--weight-black);
  color: var(--color-primary);
}

/* ---- Cart count bubble ---- */
.lh-header__cart { position: relative; }
.lh-header__cart-count {
  position: absolute;
  top: 3px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--weight-bold);
  line-height: 1;
  color: var(--color-on-action);
  background: var(--color-primary);
  border-radius: var(--radius-pill);
}
.lh-header__cart-count.is-empty { display: none; }

/* ============================================================
   Desktop navigation (hidden on mobile)
   ============================================================ */
.lh-header__nav { display: none; }

.lh-header__nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.lh-header__nav-item { position: relative; }
/* Mega items anchor their full-width panel to the header, not the item */
.lh-header__nav-item--mega { position: static; }

.lh-header__nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-body);
  font-size: var(--font-body-sm);
  font-weight: var(--weight-medium);
  color: var(--text-body);
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition-fast);
}
.lh-header__nav-link:hover,
.lh-header__nav-link.is-active { color: var(--color-primary); }
.lh-header__caret { transition: transform var(--duration-fast) var(--ease-standard); }
.lh-header__nav-item:hover .lh-header__caret,
.lh-header__nav-item.is-open .lh-header__caret { transform: rotate(180deg); }

/* ---- Shared panel reveal (dropdown + mega) ----
   Hard-hidden with display:none by default so the panel never flashes its
   content before the stylesheet/JS settle on first paint. Revealed with
   display:block (+ a fade/slide) on hover, keyboard focus, or JS .is-open. */
.lh-header__submenu,
.lh-header__mega {
  display: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard),
              visibility var(--duration-fast) var(--ease-standard);
  z-index: 40;
}
/* Reveal on hover (pointer), keyboard focus, or JS .is-open (touch/click) */
.lh-header__nav-item:hover > .lh-header__submenu,
.lh-header__nav-item:focus-within > .lh-header__submenu,
.lh-header__nav-item.is-open > .lh-header__submenu,
.lh-header__nav-item:hover > .lh-header__mega,
.lh-header__nav-item:focus-within > .lh-header__mega,
.lh-header__nav-item.is-open > .lh-header__mega {
  display: block;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* Only animate the fade once the panel is displayed (avoids a first-paint flash). */
@media (hover: hover) {
  .lh-header__nav-item:hover > .lh-header__submenu,
  .lh-header__nav-item:hover > .lh-header__mega { animation: lh-mega-in var(--duration-fast) var(--ease-standard); }
}
@keyframes lh-mega-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ---- Dropdown submenu (2-level) ---- */
.lh-header__submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 230px;
  padding: var(--space-2);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.lh-header__submenu-list { margin: 0; padding: 0; list-style: none; }
.lh-header__submenu-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-body-sm);
  color: var(--text-body);
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
}
.lh-header__submenu-link:hover,
.lh-header__submenu-link.is-active {
  color: var(--color-primary);
  background: var(--color-primary-tint);
}

/* ---- Full-width mega panel ---- */
.lh-header__mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--surface-card);
  border-top: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-lg);
}
/* Hover bridge — mega items use position:static so the full-width panel anchors
   to the header bar, leaving a vertical dead-zone between the nav link (li
   bottom) and the panel top. This transparent bridge is a DESCENDANT of the
   panel (itself inside the hovered <li>), so hovering it keeps the <li>:hover
   alive while the cursor crosses the gap. It only exists while the panel is
   displayed (panel is display:none when closed), so it never blocks the header.
   Dropdown submenus are flush to their own <li>, so they need no bridge. */
.lh-header__mega::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  height: var(--space-6);
}
.lh-header__mega-inner {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-10);
  padding-block: var(--space-8);
}
.lh-header__mega-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-6) var(--space-8);
  align-content: start;
}
.lh-header__mega-col-title {
  display: block;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--font-overline);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--text-heading);
  border-bottom: 1px solid var(--border-subtle);
}
.lh-header__mega-col-title:hover { color: var(--color-primary); }
.lh-header__mega-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.lh-header__mega-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  margin-inline: calc(-1 * var(--space-2));
  font-size: var(--font-body-sm);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
}
.lh-header__mega-link:hover {
  color: var(--color-primary);
  background: var(--color-primary-tint);
}

/* Featured promo rail */
.lh-header__mega-promo {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 240px;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-sunken);
  color: var(--text-on-dark);
  isolation: isolate;
}
.lh-header__mega-promo--plain {
  background: linear-gradient(135deg, var(--lh-amber-dark), var(--color-primary));
}
.lh-header__mega-promo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform var(--duration-slow) var(--ease-out);
}
.lh-header__mega-promo:hover .lh-header__mega-promo-img { transform: scale(1.05); }
.lh-header__mega-promo-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--overlay-tile);
}
.lh-header__mega-promo-body { display: flex; flex-direction: column; gap: var(--space-1); }
.lh-header__mega-promo-eyebrow {
  font-size: var(--font-overline);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--color-accent);
}
.lh-header__mega-promo-title {
  font-family: var(--font-display);
  font-size: var(--font-h4);
  font-weight: var(--weight-semibold);
  color: var(--text-on-dark);
  text-shadow: var(--shadow-text);
}
.lh-header__mega-promo-text {
  font-size: var(--font-body-sm);
  color: var(--text-on-dark);
  opacity: 0.9;
  text-shadow: var(--shadow-text);
}
.lh-header__mega-promo-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-2);
  font-size: var(--font-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-on-dark);
}
.lh-header__mega-promo:hover .lh-header__mega-promo-cta { gap: 10px; }

/* ---- Nav badge pills ([HOT]/[NEW]/[SALE]) ---- */
.lh-navpill {
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 6px;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  line-height: 1;
  border-radius: var(--radius-pill);
  color: #fff;
}
.lh-navpill--hot { background: var(--lh-error); }
.lh-navpill--new { background: var(--badge-new); }
.lh-navpill--sale { background: var(--lh-amber); }

/* Search icon (shared by the mobile drawer's inline search field) */
.lh-header__search-icon {
  display: inline-flex;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* ============================================================
   Mobile off-canvas drawer
   ============================================================ */
.lh-mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 200;
}
.lh-mobile-nav[hidden] { display: none; }

/* The drawer lives inside the sticky header's stacking context (z-index 50),
   which sits below the announcement bar (z-index 60) — so without this the
   announcement bar paints over the open drawer (home-mobile-menu-1.webp).
   When the drawer is open, lift the whole header section above everything. */
.lh-header-section:has([data-mobile-nav].is-open) {
  position: relative;
  z-index: 300;
}

.lh-mobile-nav__overlay {
  position: absolute;
  inset: 0;
  background: var(--scrim-dark);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard);
}
.lh-mobile-nav.is-open .lh-mobile-nav__overlay { opacity: 1; }

.lh-mobile-nav__panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(88vw, 380px);
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  box-shadow: var(--shadow-xl);
  transform: translateX(-100%);
  transition: transform var(--duration-base) var(--ease-emphasis);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.lh-mobile-nav.is-open .lh-mobile-nav__panel { transform: translateX(0); }

.lh-mobile-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}
.lh-mobile-nav__brand .lh-wordlogo { font-size: var(--font-h4); }

.lh-mobile-nav__search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-4);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}
.lh-mobile-nav__search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-size: var(--font-body-md);
  color: var(--text-body);
}
.lh-mobile-nav__search-input:focus { outline: none; box-shadow: none; }

.lh-mobile-nav__menu { padding: 0 var(--space-2) var(--space-4); }
.lh-mobile-nav__list { margin: 0; padding: 0; list-style: none; }
.lh-mobile-nav__item { border-bottom: 1px solid var(--border-subtle); }

.lh-mobile-nav__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.lh-mobile-nav__link {
  display: block;
  flex: 1;
  padding: var(--space-4) var(--space-3);
  font-family: var(--font-body);
  font-size: var(--font-body-md);
  font-weight: var(--weight-medium);
  color: var(--text-body);
}
.lh-mobile-nav__link:hover { color: var(--color-primary); }

.lh-mobile-nav__expand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target);
  height: var(--touch-target);
  border: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.lh-mobile-nav__expand .lh-icon { transition: transform var(--duration-fast) var(--ease-standard); }
.lh-mobile-nav__expand[aria-expanded="true"] .lh-icon { transform: rotate(180deg); }

/* Expanded submenu — a distinct tinted block so child items are clearly
   differentiated from their parent rows (home-moblie-menu-2.webp). */
.lh-mobile-nav__sub {
  margin: 0 var(--space-2) var(--space-3);
  padding: var(--space-2) var(--space-3) var(--space-3);
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-primary-tint);
}
.lh-mobile-nav__sub[hidden] { display: none; }
.lh-mobile-nav__group { margin-top: var(--space-2); }
.lh-mobile-nav__group:first-child { margin-top: 0; }
.lh-mobile-nav__group-title {
  display: block;
  padding: var(--space-2) var(--space-1);
  font-size: var(--font-overline);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--color-primary);
}
.lh-mobile-nav__sublist {
  margin: 0;
  padding: 0;
  list-style: none;
}
.lh-mobile-nav__sublink {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-1);
  font-size: var(--font-body-sm);
  font-weight: var(--weight-medium);
  color: var(--text-body);
}
/* Direct children (2-level menus, no groups) get the same indented, tinted feel. */
.lh-mobile-nav__sub > .lh-mobile-nav__sublist .lh-mobile-nav__sublink { color: var(--text-body); }
.lh-mobile-nav__sublink:hover { color: var(--color-primary); }

.lh-mobile-nav__foot {
  margin-top: auto;
  padding: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}
.lh-mobile-nav__account {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-body-sm);
  font-weight: var(--weight-medium);
  color: var(--text-body);
}
.lh-mobile-nav__account:hover { color: var(--color-primary); }

/* Lock scroll when the drawer is open */
body.lh-no-scroll { overflow: hidden; }

/* ============================================================
   Desktop breakpoint
   ============================================================ */
@media (min-width: 1024px) {
  .lh-header__menu-toggle { display: none; }
  .lh-header__nav { display: block; }
  .lh-header__logo { justify-self: center; }
  .lh-header__logo-img,
  .lh-brand-logo { max-height: 46px; }
}

/* Reduced motion — no panel slide */
@media (prefers-reduced-motion: reduce) {
  .lh-header__submenu,
  .lh-header__mega { transition: opacity var(--duration-fast) linear; transform: none; }
  .lh-header__mega-promo-img { transition: none; }
}