.header-wrapper {
  display: block;
  position: relative;
}

.header {
  position: relative;
  background: rgb(var(--color-background));
  color: rgb(var(--color-foreground));
}

.header-wrapper--sticky .header,
.header-wrapper--pill .header,
body:has(#main-content .section--immersive) .header-wrapper .header {
  transition:
    background var(--duration-slow) ease,
    border-color var(--duration-slow) ease,
    border-radius var(--duration-slow) ease,
    box-shadow var(--duration-slow) ease,
    margin var(--duration-slow) ease,
    width var(--duration-slow) ease,
    max-width var(--duration-slow) ease,
    -webkit-backdrop-filter var(--duration-slow) ease,
    backdrop-filter var(--duration-slow) ease;
}

.header-wrapper--sticky-on_scroll_up .header {
  transition: background var(--duration-slow) ease, box-shadow var(--duration-slow) ease, transform var(--duration-slow) ease;
}

.header-wrapper--pill.header-wrapper--sticky-on_scroll_up .header {
  transition:
    background var(--duration-slow) ease,
    border-color var(--duration-slow) ease,
    border-radius var(--duration-slow) ease,
    box-shadow var(--duration-slow) ease,
    margin var(--duration-slow) ease,
    width var(--duration-slow) ease,
    max-width var(--duration-slow) ease,
    transform var(--duration-slow) ease,
    -webkit-backdrop-filter var(--duration-slow) ease,
    backdrop-filter var(--duration-slow) ease;
}

.header__logo {
  flex-shrink: 0;
}

.header__logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.header__logo-img {
  height: var(--logo-height);
  width: auto;
  max-width: min(180px, 45vw);
  object-fit: contain;
}

.header__logo-img--inverse {
  display: none;
}

.header__logo-text {
  white-space: nowrap;
}

.header__nav {
  display: flex;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.header-actions__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: var(--space-2);
  border-radius: 50%;
  transition: background var(--duration-fast) ease;
  min-width: var(--minimum-touch-target);
  min-height: var(--minimum-touch-target);
}

.header-actions__btn:hover {
  background: rgba(var(--color-foreground), var(--opacity-subtle));
}

.header-actions__cart-count {
  position: absolute;
  inset-block-start: 4px;
  inset-inline-end: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  color: rgb(var(--color-background));
  background: rgb(var(--color-accent-1));
  border-radius: 9px;
}

.header-actions__cart-count[hidden] { display: none; }

.header-menu {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (width > 750px) {
  .header-wrapper--menu-wrap .header__column--center,
  .header-wrapper--menu-wrap .header__nav {
    min-width: 0;
    width: 100%;
  }

  .header-wrapper--menu-wrap .header-menu {
    flex-wrap: wrap;
    width: 100%;
  }
}

.header-menu__link {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  text-decoration: none;
  color: inherit;
  font-size: 1.0625rem;
  font-weight: 500;
  white-space: nowrap;
  border-radius: var(--radius-button);
  transition: background var(--duration-fast) ease;
  background: none;
  border: none;
  cursor: pointer;
}

.header-menu__link:hover {
  background: rgba(var(--color-foreground), var(--opacity-subtle));
}

.header-menu__link--toggle svg {
  width: 12px;
  height: 12px;
  transition: transform var(--duration-fast) ease;
}

.header-menu__item--has-dropdown:hover .header-menu__link--toggle svg,
.header-menu__link--toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.header-menu__item--has-dropdown {
  position: relative;
}

.header-menu__dropdown {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
  min-width: 220px;
  background: rgb(var(--color-background));
  box-shadow: var(--shadow-popover);
  border-radius: var(--radius-popover);
  padding: var(--space-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(-1 * var(--space-1)));
  transition: opacity var(--duration-normal) ease, transform var(--duration-normal) ease, visibility var(--duration-normal);
  z-index: var(--z-dropdown);
}

.header-menu__item--has-dropdown:hover > .header-menu__dropdown,
.header-menu__dropdown.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.header-menu__submenu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.header-menu__sublink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  text-decoration: none;
  color: inherit;
  font-size: 0.8125rem;
  border-radius: var(--radius-card);
  transition: background var(--duration-fast) ease;
  cursor: pointer;
  list-style: none;
  background: none;
  border: none;
  width: 100%;
}

.header-menu__sublink:hover {
  background: rgba(var(--color-foreground), var(--opacity-subtle));
}

summary.header-menu__sublink::-webkit-details-marker { display: none; }

.header-menu__sublink--view-all {
  font-weight: 500;
  color: rgb(var(--color-accent-1));
}

.header-menu__nested-list {
  list-style: none;
  padding: var(--space-1) 0 var(--space-1) var(--space-4);
  margin: 0;
}

.header__hamburger { display: none; }
.header__hamburger-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: var(--space-1);
}

.header__row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--header-padding-v);
}

.header__column {
  display: flex;
  align-items: center;
  min-width: 0;
}

.header__column--left {
  gap: var(--space-4);
}

.header__column--center {
  justify-content: center;
  gap: var(--space-4);
}

.header__column--right {
  justify-content: flex-end;
  gap: var(--space-3);
}

/* :where() keeps specificity at (0,1,0) so mobile override wins */
:where(.header-wrapper--logo-center.header-wrapper--menu-left, .header-wrapper--split) .header__row {
  grid-template-columns: 1fr auto 1fr auto;
}

.header-search-bar {
  display: none;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  max-width: 480px;
  padding: 10px var(--space-4);
  background: rgba(var(--color-foreground), 0.04);
  border: 1px solid rgba(var(--color-border), 0.15);
  border-radius: var(--radius-pill);
  color: rgb(var(--color-foreground-secondary));
  font-size: 0.8125rem;
  cursor: text;
  transition: border-color var(--duration-fast) ease, background var(--duration-fast) ease;
}

.header-search-bar:hover {
  border-color: rgba(var(--color-border), 0.35);
  background: rgba(var(--color-foreground), 0.06);
}

.header-search-bar__placeholder {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (width > 750px) {
  .header__logo-img {
    max-width: min(280px, 28vw);
  }

  .header-search-bar {
    display: flex;
  }

  .header-wrapper--stacked .header-actions__search {
    display: none;
  }
}

/* :where() keeps specificity at (0,1,0) so mobile override wins */
:where(.header-wrapper--stacked) .header__row--top {
  grid-template-columns: auto auto 1fr auto;
  padding-block-end: var(--space-2);
}

.header-wrapper--stacked .header__row--top .header__column--center {
  flex: 1;
  padding-inline: var(--space-4);
}

.header-wrapper--stacked .header__row--bottom {
  display: flex;
  justify-content: center;
  padding-block: var(--space-2) var(--space-3);
  border-block-start: 1px solid rgba(var(--color-border), var(--header-border-opacity, 0.1));
}

.header-wrapper--stacked .header__row--bottom .header-menu {
  gap: var(--space-2);
}

.header-wrapper--stacked .header__row--bottom .header-menu__link {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
}

.header-wrapper--stacked .header__row--bottom.header__row--align-left {
  justify-content: flex-start;
}

.header-wrapper--stacked .header__row--bottom.header__row--align-center {
  justify-content: center;
}

.header-wrapper--minimal:not(.header-wrapper--pill) .header,
.header-wrapper--minimal.header-wrapper--pill.is-scrolled .header {
  width: auto;
}

.header-wrapper--minimal.header-wrapper--pill:not(.is-scrolled) {
  flex: 1 1 100%;
}

.header-wrapper--minimal.header-wrapper--pill:not(.is-scrolled) .header {
  width: 100%;
}

.header__minimal {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
}

@media (width < 750px) {
  .header-wrapper--full .header__hamburger {
    display: flex;
  }

  .header__nav { display: none; }

  .header__column > .header-menu__item {
    display: none;
  }

  .header__column--left:has(.header-menu):not(:has(.header__logo)) { display: none; }
  .header__column--center:has(.header-menu):not(:has(.header__logo)) { display: none; }

  /* Keep 4-column grid on mobile (hamburger + left + center + right) so
     the right column (cart/actions) never wraps below. Empty columns
     collapse to 0 via auto sizing. */
  .header__row {
    grid-template-columns: auto auto 1fr auto;
    gap: var(--space-2);
  }

  .header-wrapper--logo-mobile-center .header__row,
  .header-wrapper--logo-mobile-same_as_desktop.header-wrapper--logo-center .header__row {
    grid-template-columns: 1fr auto 1fr;
  }

  .header-wrapper--logo-mobile-center .header__column--left,
  .header-wrapper--logo-mobile-same_as_desktop.header-wrapper--logo-center .header__column--left {
    justify-self: center;
  }

  .header-wrapper--logo-mobile-center .header__column--right,
  .header-wrapper--logo-mobile-same_as_desktop.header-wrapper--logo-center .header__column--right {
    justify-self: end;
  }

  .header-wrapper--stacked .header__row--bottom { display: none; }

  .header-wrapper--hide-search-mobile .header-actions__search { display: none; }
  .header-wrapper--hide-account-mobile .header-actions__account { display: none; }
  .header-wrapper--hide-localization-mobile .header-localization { display: none; }

  /* Compact actions: smaller tap padding, tighter gap, smaller icons */
  .header-actions {
    gap: 0;
  }

  .header-actions__btn {
    padding: var(--space-1);
  }

  .header-actions__btn svg {
    width: 22px;
    height: 22px;
  }

  /* Hamburger: 44px tap target + aligned with action icons */
  .header__hamburger-btn {
    min-width: var(--minimum-touch-target);
    min-height: var(--minimum-touch-target);
    padding: var(--space-2);
  }

  /* Compact the logo only once the mobile header has detached. */
  .header-wrapper--pill-mobile.is-scrolled .header__logo-img {
    max-height: 36px;
  }
}

.section-header:has(.header-wrapper--sticky) {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-sticky);
}

/* Keep a sticky header below a preceding announcement while the announcement
   is still visible. Once the header's sentinel leaves the viewport,
   .is-scrolled removes this offset and the header pins to the top. */
.section-announcement-bar ~ .section-header:has(.header-wrapper--sticky:not(.is-scrolled)) {
  inset-block-start: var(--announcement-bar-height, 0px);
}

.section-header:has(.header-wrapper--sticky-on_scroll_up) {
  transition: transform var(--duration-slow) ease;
}

.section-header:has(.header-wrapper--sticky-on_scroll_up.is-hidden) {
  transform: translateY(-100%);
  pointer-events: none;
}

/* ═══ Immersive overlay (header sits on top of a fullscreen hero) ═══

   The first section opts in with .section--immersive, plus a mode modifier:
   - (none)                     → transparent overlay (default)
   - .section--immersive-opaque → solid header, still pulled onto the hero
   - .section--immersive-none   → no overlay (normal flow, header above hero)

   Transparent + opaque both pull the header up onto the hero (same geometry);
   only transparent drops the background to show the image through.

   Detection matches the class anywhere in #main-content, NOT
   :first-child — banner.liquid only sets .section--immersive on the first
   section (section.index == 1), so the class alone is the guard. The editor
   injects a .section-insertion-zone as the first child of #main-content,
   which would break a :first-child selector (preview vs live mismatch). */

/* Pull the header up over the hero — transparent and opaque, never normal.
   Pull-up amount accounts for the pill margin so it lands flush at the top. */
body:has(#main-content .section--immersive:not(.section--immersive-none)) .section-header {
  margin-block-end: calc(-1 * (var(--header-height, 0px) + var(--pill-offset, 0px)));
}

/* A non-sticky header has no positioned stacking context of its own. Once the
   following hero is pulled underneath it, that later sibling would otherwise
   paint over the header. Sticky headers already get their positioning above. */
body:has(#main-content .section--immersive:not(.section--immersive-none))
  .section-header:not(:has(.header-wrapper--sticky)) {
  position: relative;
  z-index: var(--z-sticky);
}

/* Transparent header (until scrolled). Gated to sticky headers: a non-sticky
   header never gets .is-scrolled, so it would stay transparent forever — keep
   it solid in that case (degrades to the opaque rendering). */
body:has(#main-content .section--immersive:not(.section--immersive-opaque):not(.section--immersive-none))
  .header-wrapper--sticky:not(.is-scrolled) .header {
  background: transparent;
  box-shadow: none;
  border-color: transparent;
}

body:has(#main-content .section--immersive:not(.section--immersive-opaque):not(.section--immersive-none))
  .header-wrapper--sticky:not(.is-scrolled) .header__logo-img:not(.header__logo-img--inverse) {
  display: none;
}

body:has(#main-content .section--immersive:not(.section--immersive-opaque):not(.section--immersive-none))
  .header-wrapper--sticky:not(.is-scrolled) .header__logo-img--inverse {
  display: block;
}

/* Every pill stays full-width and flush until scroll, including over immersive
   heroes. The same scroll state drives the chrome on every page. */
body:has(#main-content .section--immersive:not(.section--immersive-none):not(.section--immersive-opaque))
  .header-wrapper--pill:not(.is-scrolled) .header {
  width: 100%;
  max-width: 100%;
  margin-block-start: 0;
  margin-inline: auto;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ═══ Pill detachment chrome ═══

   Mobile and desktop carry different detachment values (offset/margin/width),
   so each side lives in its own exclusive media query (< 750px vs > 750px).
   This avoids any specificity fight between the mobile compound — which adds
   .header-wrapper--pill-mobile — and the desktop one: they never apply at the
   same viewport, so whichever matches simply wins. The .is-scrolled state is
   the only trigger that detaches a pill. */

.header-wrapper--pill {
  --pill-offset: 0px;
}

/* ── Mobile (< 750px): detachment only when opted in via pill-on-mobile ── */
@media (width < 750px) {
  .header-wrapper--pill.header-wrapper--pill-mobile.is-scrolled {
    --pill-offset: var(--space-2);
  }

  .header-wrapper--pill.header-wrapper--pill-mobile.is-scrolled .header {
    border-radius: var(--pill-radius, 16px);
    margin-block-start: var(--space-2);
    box-shadow: var(--shadow-popover);
  }

  .header-wrapper--pill.header-wrapper--pill-mobile.is-scrolled:not(.header-wrapper--minimal) .header {
    width: calc(100% - var(--space-4));
    margin-inline: auto;
  }

  .header-wrapper--pill.header-wrapper--pill-mobile.is-scrolled.header-wrapper--minimal .header {
    margin-inline: var(--space-3);
  }
}

/* ── Desktop (> 750px): always detaches ── */
@media (width > 750px) {
  .header-wrapper--pill.is-scrolled {
    --pill-offset: var(--space-3);
  }

  .header-wrapper--pill .header {
    will-change: width, max-width, margin, border-radius, box-shadow, backdrop-filter;
  }

  .header-wrapper--pill.is-scrolled .header {
    border-radius: var(--pill-radius, 16px);
    margin-block-start: var(--space-3);
    box-shadow: var(--shadow-popover);
  }

  .header-wrapper--pill.is-scrolled:not(.header-wrapper--minimal) .header {
    width: var(--pill-width, 90%);
    max-width: 1600px;
    margin-inline: auto;
  }

  .header-wrapper--pill.is-scrolled.header-wrapper--minimal .header {
    margin-inline: var(--space-4);
  }
}

/* ═══ Pill backgrounds ═══ */

/* Both backgrounds are solid while flush at the top. Glass only diverges once
   detached (see below): translucent + blurred, with a hairline soft enough not
   to slice against the content behind it. */
.pill-bg-solid .header,
.pill-bg-glass .header {
  background: rgb(var(--color-background));
}

.header-wrapper--pill.pill-bg-glass.is-scrolled .header {
  background: rgba(var(--color-background), 0.7);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(var(--color-foreground), 0.04);
}

.header-wrapper--border .header {
  border-block-end: 1px solid rgba(var(--color-border), var(--header-border-opacity, 0.3));
}

.search-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
}

.search-overlay[hidden] { display: none; }

.search-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(var(--color-foreground), var(--backdrop-opacity));
}

.search-overlay__content {
  position: relative;
  background: rgb(var(--color-background));
  box-shadow: var(--shadow-modal);
  max-height: 80vh;
  overflow-y: auto;
}

@media (width > 750px) {
  .search-overlay__content {
    max-width: 680px;
    margin: var(--space-6) auto 0;
    border-radius: var(--radius-popover);
  }
}

.search-overlay__form {
  padding: var(--space-4);
  border-block-end: 1px solid rgba(var(--color-border), 0.1);
}

.search-overlay__input-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.search-overlay__input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 1.125rem;
  color: inherit;
  outline: none;
  padding: var(--space-2) 0;
}

.search-overlay__input::placeholder {
  color: rgb(var(--color-foreground-secondary));
}

.search-overlay__clear {
  display: flex;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: var(--space-1);
  opacity: 0.6;
}

.search-overlay__clear:hover { opacity: 1; }

.search-overlay__close {
  position: absolute;
  inset-block-start: var(--space-4);
  inset-inline-end: var(--space-4);
  display: flex;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: var(--space-2);
  opacity: 0.6;
}

.search-overlay__close:hover { opacity: 1; }

.header-localization {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-inline-end: var(--space-2);
}

.header-localization__selector select {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(var(--color-border), 0.15);
  border-radius: var(--radius-button);
  color: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 6px var(--space-3) 6px var(--space-2);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  transition: border-color var(--duration-fast) ease;
}

.header-localization__selector select:hover {
  border-color: rgba(var(--color-border), 0.4);
}