/* Site header: dark topbar, white main row, search, actions. */

.st-skip-link:focus-visible {
  position: fixed;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  z-index: 100;
  width: auto;
  height: auto;
  padding: 12px 16px;
  clip-path: none;
  background: var(--st-ink);
  color: var(--st-surface);
}

.st-header {
  position: relative;
  background: var(--st-surface);
  border-bottom: var(--st-rule);
}

.st-header__topbar {
  background: var(--st-ink);
  color: var(--st-on-dark-body);
  font-size: 12px;
}

.st-header__topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--st-gutter);
  min-height: 36px;
}

.st-header__promises,
.st-header__utility {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.st-header__promise {
  display: flex;
  align-items: center;
  gap: 6px;
}

.st-header__promise svg {
  color: var(--st-accent);
}

.st-header__utility a {
  color: var(--st-on-dark-body);
  text-decoration: none;
}

.st-header__utility a:hover,
.st-header__utility a:active {
  color: var(--st-surface);
}

.st-header__main-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding-block: 14px;
}

.st-header__menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--st-h-touch);
  height: var(--st-h-touch);
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.st-header__brand {
  display: inline-flex;
  align-items: center;

  /* The brand is a link, so it is a touch target like any other — the same
     reasoning .st-checkout__brand already carries. */
  min-height: var(--st-h-touch);
  font-size: 20px;
  font-weight: var(--st-weight-black);
  letter-spacing: var(--st-track-h2);
  text-decoration: none;
}

/* Height-constrained, not width-constrained: the mark has to sit inside the
   80px main row on every viewport, and `width: auto` lets a replacement logo
   of a different aspect ratio (an admin's, via the Customizer) keep its own
   proportions instead of being squashed to this one's. 44px leaves the row's
   vertical rhythm intact while staying legible at the source file's own
   168x85 — which is only 1x at this size, so it is soft on a 2x display until
   a higher-resolution mark replaces it. */
.st-header__brand img {
  width: auto;
  max-width: 100%;
  height: 44px;
}

.st-search {
  display: flex;
  max-width: 560px;
  border: var(--st-border-width) solid var(--st-ink);
}

.st-search__input {
  width: 100%;
  height: var(--st-h-search);
  padding: 0 14px;
  background: var(--st-surface);
  border: 0;
  font-size: var(--st-size-body-sm);
}

.st-search__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--st-h-search);
  height: var(--st-h-search);
  background: var(--st-ink);
  border: 0;
  color: var(--st-surface);
  cursor: pointer;
  transition: background-color var(--st-transition);
}

.st-search__submit:hover,
.st-search__submit:active {
  background: var(--st-accent);
}

.st-header__actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.st-header__action {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--st-h-touch);
  font-size: var(--st-size-label);
  font-weight: var(--st-weight-bold);
  text-decoration: none;
}

.st-cart-toggle__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  background: var(--st-accent);
  color: var(--st-surface);
  font-size: 12px;
  font-weight: var(--st-weight-extrabold);
}

@media (max-width: 899px) {
  .st-header__promises {
    display: none;
  }

  .st-header__menu-toggle {
    display: inline-flex;
    grid-area: toggle;
  }

  .st-header__main-inner {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "toggle brand actions"
      "search search search";
    row-gap: 12px;
  }

  .st-header__brand {
    grid-area: brand;
    justify-self: center;
  }

  .st-header__actions {
    grid-area: actions;
  }

  .st-search {
    grid-area: search;
    max-width: none;
  }

  /* sr-only, NOT display:none. The icon SVGs are aria-hidden, so this text is the
     link's only accessible name — display:none removes it from the a11y tree and
     leaves an unlabelled link (and, for the cart link, an accessible name of just
     the live count digit). */
  .st-header__action-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* The label no longer contributes width once it is clipped out of flow, so the
     link needs an explicit minimum to stay a legal 44px touch target. */
  .st-header__action {
    min-width: var(--st-h-touch);
    justify-content: center;
  }
}