.c-site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border-header);
  transition: box-shadow var(--duration-base) var(--ease-standard);
}

.c-site-header.is-scrolled {
  box-shadow: var(--shadow-sm);
}

.c-site-header__inner {
  width: 100%;
}

.c-site-header__utility {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  width: 100%;
  max-width: var(--container-2xl);
  margin-inline: auto;
  padding: var(--space-4) var(--gutter);
}

/* flex: none — this is a flex item of .c-site-header__utility, so it
   defaults to flex-shrink: 1. Once .c-header-actions grew wider than the
   space left over (every viewport under ~900px), the shrink applied to
   the logo instead, collapsing it to 0px wide while the img kept its
   height — the logo rendered as a sliver. The actions row is what should
   give way, not the brand mark. */
.c-site-header__logo {
  display: inline-flex;
  flex: none;
  align-items: center;
  max-width: none;
}

/* !important: WP core's site-logo block ships a
   .wp-block-site-logo.is-default-size img { width: 120px; height: auto }
   rule (wp-includes/blocks/site-logo/style.css) that outranks this plain
   class selector, so without !important the size is silently ignored. */
.c-site-header__logo img {
  width: auto !important;
  height: var(--header-logo-height, clamp(2.125rem, 2.9vw, 2.625rem)) !important;
}

.c-header-actions {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(var(--space-3), 2.2vw, var(--space-6));
  min-width: 0;
  font-size: var(--text-small);
}

.c-header-actions__save {
  white-space: nowrap;
}

.c-header-actions__save a {
  color: var(--color-ink) !important;
  font-weight: 600;
}

.c-header-actions__divider {
  width: 1px;
  height: 1.125rem;
  background: var(--color-border-input);
}

.c-header-actions__link {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--space-2);
  padding: 0;
  white-space: nowrap;
  border: 0;
  background: transparent;
  color: var(--color-ink) !important;
  font: inherit;
  font-weight: 500;
  line-height: inherit;
}

.c-header-actions__link svg {
  width: 1.0625rem;
  height: 1.0625rem;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  fill: none;
}

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

.c-header-search {
  width: 100%;
  border-top: 1px solid var(--color-border-header);
  background: var(--color-surface);
}

.c-header-search__form {
  display: grid;
  align-items: center;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--space-2);
  width: 100%;
  max-width: var(--container-2xl);
  margin-inline: auto;
  padding: var(--space-3) var(--gutter);
}

.c-header-search__input {
  width: 100%;
  min-height: 3rem;
  border: 1px solid var(--color-border-input);
  background: var(--color-white);
  color: var(--color-body);
  padding: .65rem var(--space-4);
}

.c-header-search__input:focus {
  outline: none;
  border-color: var(--color-accent);
}

.c-header-search__submit,
.c-header-search__close {
  display: inline-grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border: 1px solid var(--color-border-input);
  background: var(--color-white);
  color: var(--color-ink);
}

.c-header-search__submit {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}

.c-header-search__submit:hover,
.c-header-search__submit:focus-visible,
.c-header-search__close:hover,
.c-header-search__close:focus-visible {
  border-color: var(--color-accent-hover);
}

.c-header-search__submit svg,
.c-header-search__close svg {
  width: 1.0625rem;
  height: 1.0625rem;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  fill: none;
}

.c-site-header__nav-row {
  border-top: 1px solid var(--color-border-header);
  width: 100%;
  max-width: var(--container-2xl);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.c-primary-nav.wp-block-navigation {
  --wp--style--block-gap: clamp(1rem, 2vw, 2.375rem);
  --navigation-layout-wrap: nowrap !important;
  flex-shrink: 1;
  min-width: 0;
}

.c-primary-nav .wp-block-navigation__container {
  flex-wrap: nowrap !important;
}

.c-primary-nav .wp-block-navigation-item__content {
  padding-block: .95rem;
  color: var(--color-ink) !important;
  font-weight: 700;
  font-size: var(--text-small);
  border-bottom: 3px solid transparent;
}

.c-primary-nav .wp-block-navigation-item__content:hover,
.c-primary-nav .wp-block-navigation-item__content:focus-visible {
  color: var(--color-accent-text) !important;
}

.c-primary-nav .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
  color: var(--color-accent-text) !important;
  border-bottom-color: var(--color-accent);
}

.c-primary-nav .wp-block-navigation__responsive-container.is-menu-open {
  background: var(--color-surface);
}

.c-site-header__waitlist {
  align-items: center;
  gap: var(--space-6);
}

.c-site-header__waitlist-link {
  color: var(--color-accent-text) !important;
  font-weight: 800;
  font-size: var(--text-small);
  padding-block: .95rem;
}

/* ─────────────────────────────────────────────────────────────────
   Mobile header — under 48rem
   ─────────────────────────────────────────────────────────────────
   The desktop header is a two-row affair: a utility row carrying the
   logo plus a labelled Subscribe / Search / Account / Cart cluster, and
   a nav row under it. That cluster needs ~336px on its own, so on a
   360-390px phone it pushed the row past the viewport edge (a 20px
   horizontal scroll on every page) and squeezed the logo out entirely.

   Phone layout, matching the IA spec's mobile header
   (docs/prd/03-information-architecture.md §3):

     row 1   [LOGO]              Search  Account  Cart   (icons only)
     row 2   Waitlist                                    ☰ Menu

   The action labels stay in the DOM — visually hidden, not removed — so
   each control keeps its accessible name. The "Subscribe & Save Up To
   20%" promo drops out: it points at /waitlist/, which the row below
   already links to by name, so nothing becomes unreachable. */

/* Tablet first: the promo goes before anything else does. The logo is a
   fixed 243px and the labelled action cluster another ~517px, which
   together with the gutters needs about 900px of viewport. Below that
   the cluster has nowhere to go but leftwards over the logo (it is
   justified to the end of a row that is too narrow for it), so the
   promo — the one item here that repeats a link the row below already
   carries — is what gives way. */
@media (max-width: 63.9375rem) {
  .c-header-actions__save,
  .c-header-actions__save + .c-header-actions__divider {
    display: none;
  }
}

@media (max-width: 47.9375rem) {
  .c-site-header__utility {
    gap: var(--space-3);
    padding-block: var(--space-3);
  }

  .c-header-actions {
    gap: var(--space-1);
  }

  .c-header-actions__link {
    min-width: 2.75rem;
    min-height: 2.75rem;
    justify-content: center;
    gap: 0;
  }

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

  .c-header-actions__link svg {
    width: 1.375rem;
    height: 1.375rem;
  }

  .c-site-header__logo img {
    height: var(--header-logo-height-mobile, 1.875rem) !important;
  }

  /* Core flips the Navigation block from overlay to inline at its own
     600px breakpoint, but this theme's mobile header runs to 767px — so
     between the two the hamburger AND the full inline menu both
     rendered, stacking into a ~280px-tall header. Hold the overlay for
     the whole band: keep the toggle shown and the inline container
     hidden until the desktop header takes over at 48rem. Both selectors
     add .c-primary-nav to outrank core's, which are three classes
     inside its own `@media (min-width: 600px)`. */
  .c-primary-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none;
  }

  .c-primary-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
    min-width: 2.75rem;
    min-height: 2.75rem;
    align-items: center;
    justify-content: flex-end;
  }

  /* Menu toggle on the right, Waitlist on the left. The nav row is a
     space-between flex row whose source order puts the navigation
     first, so this swaps the two visually without moving the
     navigation block out of the markup order screen readers and the
     block editor expect. */
  .c-primary-nav {
    order: 2;
  }

  .c-site-header__waitlist {
    order: 1;
  }

  /* The rule that separated Waitlist from the toggle sat between them;
     on this side it would hang off the left edge of the row. */
  .c-site-header__waitlist .c-header-actions__divider {
    display: none;
  }

  .c-site-header__waitlist-link {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    padding-block: 0;
  }

  .c-header-search__form {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: var(--space-2);
    padding-inline: var(--gutter);
  }

  .c-header-search__submit,
  .c-header-search__close {
    width: 2.75rem;
    height: 2.75rem;
  }
}

/* ── The overlay menu the Navigation block opens on mobile ──────────
   Core hard-codes this overlay to white-on-black:

     .wp-block-navigation:not(.has-background)
       .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay)
       { background-color: #fff }

   — five classes, so the obvious two- or three-class theme selector
   silently loses and the menu opens as a plain white sheet with the
   brand nowhere in it. These selectors deliberately match that
   five-class shape (nav class + block class + container + state + the
   same :not) so they win on source order — the theme's stylesheets are
   enqueued after core's block styles (inc/assets.php) — instead of
   reaching for !important. Keep the :not(.disable-default-overlay) in
   place even though this theme never sets that class: dropping it drops
   the specificity back below core's. */

.c-primary-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
  padding: var(--space-5) var(--gutter) var(--space-10);
  background: var(--color-surface);
  color: var(--color-ink);
}

/* Core spaces the overlay's items by `gap: inherit` off the nav's block
   gap, which lands at 2em and strands the five links down the sheet. */
.c-primary-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content,
.c-primary-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__container {
  gap: 0;
  width: 100%;
  padding-top: var(--space-8);
}

.c-primary-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation-item {
  width: 100%;
  border-bottom: 1px solid var(--color-border-header);
}

.c-primary-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation-item__content {
  display: flex;
  width: 100%;
  min-height: 3.25rem;
  align-items: center;
  padding-block: var(--space-3);
  border-bottom: 0;
  color: var(--color-ink) !important;
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: 800;
}

.c-primary-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
  color: var(--color-accent-text) !important;
}

/* Core pins the close button to the container's padding box; give it the
   same 44px target as the button that opened it. */
.c-primary-nav .wp-block-navigation__responsive-container-close {
  display: grid;
  min-width: 2.75rem;
  min-height: 2.75rem;
  place-items: center;
  color: var(--color-ink);
}

/* ── Menu toggle icon ──────────────────────────────────────────────
   WordPress core's toggle ships a two-bar glyph:

     <svg …><rect y="7.5" …/><rect y="15" …/></svg>

   Three bars is the more conventional "menu" affordance, and there's no
   filter for the icon short of re-rendering the whole navigation block,
   so the bar is drawn in CSS instead — one element for the middle rule
   and a box-shadow either side for the outer two. The svg is hidden
   rather than removed, so if core ever changes the markup the worst
   case is a missing decoration on a button that still has its
   "Open menu" accessible name. */

.c-primary-nav .wp-block-navigation__responsive-container-open svg {
  display: none;
}

.c-primary-nav .wp-block-navigation__responsive-container-open::before {
  width: 1.375rem;
  height: 2px;
  background: currentColor;
  box-shadow:
    0 -7px 0 currentColor,
    0 7px 0 currentColor;
  content: "";
}