.alt-header {
  position: relative;
  z-index: 60;
  display: block;
  background: var(--alt-hd-bg);
  color: var(--alt-hd-text);
  border-bottom: var(--alt-hd-border-w) solid var(--alt-hd-border);
}

.alt-header__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-block: var(--alt-hd-pad);
}

.alt-header__col { display: flex; align-items: center; gap: 18px; }
.alt-header__col--start  { flex: 1 1 0; justify-content: flex-start; }
.alt-header__col--center { flex: 0 0 auto; justify-content: center; }
.alt-header__col--end    { flex: 1 1 0; justify-content: flex-end; }

/* ---------------------------------------------------------------- logo */

.alt-logo__link { display: inline-block; line-height: 0; }
.alt-logo__img { width: var(--alt-hd-logo-d); height: auto; }
.alt-logo__img--transparent { display: none; }
.alt-logo__text {
  font-family: var(--alt-font-heading);
  font-size: calc(var(--alt-body-size) * 1.35);
  font-weight: var(--alt-fw-heading-bold);
  color: currentColor;
  line-height: 1.1;
}

/* The mega panel spans the whole header, so the header row is the positioning
   context. */
.alt-header__desktop { position: relative; }

/* ---------------------------------------------------------------- nav */

.alt-nav {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.alt-nav__item { position: relative; }
/* A mega item must not be the containing block, or the panel would be as
   narrow as the link itself. */
.alt-nav__item--mega { position: static; }

.alt-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px var(--alt-hd-link-gap);
  color: inherit;
  font-family: var(--alt-font-heading);
  font-size: var(--alt-hd-link-size);
  font-weight: var(--alt-hd-link-weight);
  letter-spacing: var(--alt-hd-link-tracking);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--alt-hover-duration) ease;
}
.alt-nav__link:hover { color: var(--alt-hd-hover); }

.alt-nav__arrow { display: inline-flex; transition: transform var(--alt-hover-duration) ease; }
.alt-nav__item--has-children:hover .alt-nav__arrow { transform: rotate(180deg); }

/* ---------------------------------------------------------------- dropdown */

.alt-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  margin: 0;
  padding: 10px 0;
  list-style: none;
  background: var(--alt-hd-bg);
  border: 1px solid var(--alt-hd-border);
  border-radius: var(--alt-radius-block);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}

.alt-nav__item--has-children:hover > .alt-dropdown,
.alt-nav__item--has-children:focus-within > .alt-dropdown {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.alt-dropdown li { position: relative; }

.alt-dropdown__link {
  display: block;
  padding: 9px 20px;
  color: var(--alt-hd-text);
  font-size: calc(var(--alt-body-size) * 0.9375);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--alt-hover-duration) ease, background-color var(--alt-hover-duration) ease;
}
.alt-dropdown__link:hover { color: var(--alt-hd-hover); background: rgba(var(--alt-border-rgb), 0.4); }

.alt-dropdown--nested {
  top: 0;
  left: 100%;
  margin-left: 2px;
}
.alt-dropdown li:hover > .alt-dropdown--nested,
.alt-dropdown li:focus-within > .alt-dropdown--nested {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* ---------------------------------------------------------------- mega */

.alt-mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  transform: translateY(8px);
  background: var(--alt-hd-bg);
  border-top: 1px solid var(--alt-hd-border);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.08);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.24s ease, transform 0.24s ease, visibility 0.24s;
}

.alt-nav__item--has-children:hover > .alt-mega,
.alt-nav__item--has-children:focus-within > .alt-mega {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.alt-mega__inner {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding-block: var(--alt-hd-mega-pad);
}

.alt-mega__cols {
  display: flex;
  flex: 0 0 auto;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.alt-mega__col {
  flex: 0 0 var(--alt-hd-mega-col-w);
  width: var(--alt-hd-mega-col-w);
  min-width: 0;
  padding-right: 8px;
}

.alt-mega__col-title {
  display: block;
  padding: 8px 12px;
  font-family: var(--alt-font-heading);
  font-size: var(--alt-hd-mega-title-size);
  font-weight: var(--alt-hd-mega-title-weight);
  line-height: 1.5;
  color: var(--alt-hd-text);
  text-decoration: none;
  transition: color var(--alt-hover-duration) ease;
}
.alt-mega__col-title:hover { color: var(--alt-hd-hover); }

.alt-mega__list { margin: 0; padding: 0; list-style: none; }

.alt-mega__link {
  display: block;
  padding: 8px 12px;
  color: var(--alt-hd-mega-link-color);
  font-family: var(--alt-font-heading);
  font-size: var(--alt-hd-mega-link-size);
  font-weight: var(--alt-hd-mega-link-weight);
  line-height: 1.5;
  text-decoration: none;
  transition: color var(--alt-hover-duration) ease;
}
.alt-mega__link:hover { color: var(--alt-hd-hover); }

.alt-mega__promos {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  gap: var(--alt-hd-mega-card-gap);
  padding-left: var(--alt-hd-mega-content-pad);
}

.alt-mega__promo { flex: 1 1 0; min-width: 0; }
.alt-mega__promo-link { display: block; width: 100%; text-decoration: none; }
.alt-mega__promo-media {
  aspect-ratio: var(--alt-hd-mega-card-ratio);
  margin-bottom: 10px;
  border-radius: var(--alt-hd-mega-card-radius);
  overflow: hidden;
}
.alt-mega__promo-title {
  display: block;
  font-family: var(--alt-font-heading);
  font-size: var(--alt-hd-mega-card-title-size);
  font-weight: var(--alt-hd-mega-card-title-weight);
  line-height: 1.5;
  color: var(--alt-hd-text);
  transition: color var(--alt-hover-duration) ease;
}
.alt-mega__promo-count {
  font-size: 0.6em;
  vertical-align: super;
  margin-left: 2px;
  opacity: 0.75;
}
.alt-mega__promo-link:hover .alt-mega__promo-title { color: var(--alt-hd-hover); }

/* ---------------------------------------------------------------- actions */

.alt-header__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  transition: color var(--alt-hover-duration) ease;
}
.alt-header__icon:hover { color: var(--alt-hd-hover); }
.alt-header__icon svg { width: 22px; height: 22px; }

.alt-header__account {
  color: inherit;
  font-family: var(--alt-font-heading);
  font-size: var(--alt-hd-link-size);
  font-weight: var(--alt-hd-link-weight);
  letter-spacing: var(--alt-hd-link-tracking);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--alt-hover-duration) ease;
}
.alt-header__account:hover { color: var(--alt-hd-hover); }

.alt-header__cart .cart-bubble { color: inherit; }
.alt-header__cart svg { width: 22px; height: 22px; }

/* Three-line burger that becomes an X once the drawer is open. */
.alt-header__burger {
  flex-direction: column;
  gap: 4px;
  width: 34px;
  height: 34px;
}
.alt-header__burger span {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.alt-header.is-drawer-open .alt-header__burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.alt-header.is-drawer-open .alt-header__burger span:nth-child(2) { opacity: 0; }
.alt-header.is-drawer-open .alt-header__burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------------------------------------------------------------- sticky */

.alt-header--sticky.is-stuck {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  animation: alt-header-drop 0.35s ease;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.07);
}

@keyframes alt-header-drop {
  from { transform: translateY(-100%); }
  to { transform: none; }
}

/* ---------------------------------------------------------------- transparent */

.alt-header--transparent:not(.is-stuck) {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom-color: transparent;
  color: var(--alt-hd-transparent-text);
}
.alt-header--transparent:not(.is-stuck) .alt-logo__img--default { display: none; }
.alt-header--transparent:not(.is-stuck) .alt-logo__img--transparent { display: block; }
.alt-header--transparent:not(.is-stuck) .alt-nav__link:hover,
.alt-header--transparent:not(.is-stuck) .alt-header__account:hover,
.alt-header--transparent:not(.is-stuck) .alt-header__icon:hover { opacity: 0.72; color: inherit; }

/* ---------------------------------------------------------------- drawer */

.alt-drawer { position: fixed; inset: 0; z-index: 200; }
.alt-drawer[hidden] { display: none; }

.alt-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.alt-drawer.is-open .alt-drawer__backdrop { opacity: 1; }

.alt-drawer__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: min(88vw, 400px);
  background: var(--alt-page-bg);
  color: var(--alt-body-color);
  transform: translateX(-100%);
  transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.alt-drawer.is-open .alt-drawer__panel { transform: none; }

.alt-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--alt-border);
}
.alt-drawer__title {
  font-family: var(--alt-font-heading);
  font-size: calc(var(--alt-body-size) * 1);
  font-weight: var(--alt-fw-heading);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--alt-heading-color);
}

.alt-drawer__nav { flex: 1 1 auto; overflow-y: auto; padding: 8px 0; }
.alt-drawer__list { margin: 0; padding: 0; list-style: none; }
.alt-drawer__item { border-bottom: 1px solid var(--alt-border); }

.alt-drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 15px 20px;
  border: 0;
  background: none;
  color: var(--alt-heading-color);
  font-family: var(--alt-font-heading);
  font-size: calc(var(--alt-body-size) * 1);
  font-weight: var(--alt-fw-heading);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.alt-drawer__plus {
  position: relative;
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}
.alt-drawer__plus::before,
.alt-drawer__plus::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: currentColor;
}
.alt-drawer__plus::before { width: 13px; height: 1.5px; }
.alt-drawer__plus::after { width: 1.5px; height: 13px; transition: transform 0.25s ease; }
.alt-drawer__link[aria-expanded="true"] .alt-drawer__plus::after { transform: scaleY(0); }

.alt-drawer__sub { padding: 0 20px 16px; }
.alt-drawer__sub[hidden] { display: none; }

.alt-drawer__sub-all {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--alt-brand);
  font-size: calc(var(--alt-body-size) * 0.875);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.alt-drawer__group + .alt-drawer__group { margin-top: 16px; }

.alt-drawer__sub-title {
  display: block;
  margin-bottom: 8px;
  color: var(--alt-heading-color);
  font-family: var(--alt-font-heading);
  font-size: calc(var(--alt-body-size) * 0.9375);
  font-weight: var(--alt-fw-heading);
  text-decoration: none;
}

.alt-drawer__sub-list { margin: 0; padding: 0 0 0 12px; list-style: none; }
.alt-drawer__sub-list li + li { margin-top: 7px; }

.alt-drawer__sub-link {
  color: var(--alt-muted);
  font-size: calc(var(--alt-body-size) * 0.9375);
  text-decoration: none;
}
.alt-drawer__sub-link:hover { color: var(--alt-brand); }

.alt-drawer__foot { padding: 18px 20px; border-top: 1px solid var(--alt-border); }

/* ---------------------------------------------------------------- search */

.alt-search { position: fixed; inset: 0; z-index: 210; }
.alt-search[hidden] { display: none; }

.alt-search__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.28s ease;
}
.alt-search.is-open .alt-search__backdrop { opacity: 1; }

.alt-search__panel {
  position: relative;
  background: var(--alt-page-bg);
  padding-block: 26px 28px;
  transform: translateY(-100%);
  transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.alt-search.is-open .alt-search__panel { transform: none; }

.alt-search__form {
  display: flex;
  align-items: center;
  gap: 12px;
}
.alt-search__icon { display: inline-flex; color: var(--alt-muted); }
.alt-search__icon svg { width: 22px; height: 22px; }

.alt-search__input {
  flex: 1 1 auto;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--alt-border);
  background: none;
  color: var(--alt-body-color);
  font-family: var(--alt-font-body);
  font-size: calc(var(--alt-body-size) * 1.25);
}
.alt-search__input:focus { outline: none; border-bottom-color: var(--alt-brand); }

.alt-search__suggest {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.alt-search__suggest-label {
  color: var(--alt-muted);
  font-size: calc(var(--alt-body-size) * 0.875);
}
.alt-search__suggest-links { display: flex; gap: 10px; flex-wrap: wrap; }

.alt-search__chip {
  padding: 6px 14px;
  border: 1px solid var(--alt-border);
  border-radius: 999px;
  color: var(--alt-heading-color);
  font-size: calc(var(--alt-body-size) * 0.875);
  text-decoration: none;
  transition: border-color var(--alt-hover-duration) ease, color var(--alt-hover-duration) ease;
}
.alt-search__chip:hover { border-color: var(--alt-brand); color: var(--alt-brand); }

/* ---------------------------------------------------------------- mobile */

.alt-header__mobile .alt-header__inner { padding-block: var(--alt-hd-pad-m); }
.alt-header__mobile .alt-header__col { gap: 4px; }
.alt-header__mobile .alt-logo__img { width: var(--alt-hd-logo-m); }

@media (max-width: 1279px) {
  .alt-logo__img { width: var(--alt-hd-logo-t); }
  .alt-header__mobile .alt-logo__img { width: var(--alt-hd-logo-m); }
}

/* Keeps the page from scrolling behind an open drawer or search panel. */
body.alt-no-scroll { overflow: hidden; }

/* ---- anchor colour re-assertion (see fix_link_specificity) ---- */
a.alt-nav__link { color: inherit; }
a.alt-nav__link:hover { color: var(--alt-hd-hover); }
a.alt-dropdown__link { color: var(--alt-hd-text); }
a.alt-dropdown__link:hover { color: var(--alt-hd-hover); }
a.alt-mega__col-title { color: var(--alt-heading-color); }
a.alt-mega__col-title:hover { color: var(--alt-hd-hover); }
a.alt-mega__link { color: var(--alt-muted); }
a.alt-mega__link:hover { color: var(--alt-hd-hover); }
a.alt-header__account { color: inherit; }
a.alt-header__account:hover { color: var(--alt-hd-hover); }
.alt-header--transparent:not(.is-stuck) a.alt-nav__link:hover,
.alt-header--transparent:not(.is-stuck) a.alt-header__account:hover { color: inherit; }
a.alt-drawer__link { color: var(--alt-heading-color); }
a.alt-drawer__sub-all { color: var(--alt-brand); }
a.alt-drawer__sub-title { color: var(--alt-heading-color); }
a.alt-drawer__sub-link { color: var(--alt-muted); }
a.alt-drawer__sub-link:hover { color: var(--alt-brand); }
a.alt-search__chip { color: var(--alt-heading-color); }
a.alt-search__chip:hover { color: var(--alt-brand); }