/* ==========================================================================
   Site header: utility bar, logo/search/actions row, primary nav with mega
   panel, promo strip, and the mobile drawer.

   Structure follows the standard department-store pattern (utility bar >
   brand row > primary nav > promo strip); the visual language is Evra's own.

   Breakpoint: the desktop nav collapses to a drawer below 48rem / 768px.
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--color-ivory);
  border-bottom: 1px solid var(--color-line);
}

/* Sign-in entry points. Hidden until js/header.js confirms accounts can
   actually work (see accountsAvailable in js/config.js). Hidden by default
   rather than shown, so there is no flash of a link that leads nowhere, and
   so a no-JS visitor is never sent to a page that needs JavaScript. */
html:not(.accounts-on) .requires-accounts {
  display: none !important;
}

/* ---- Utility bar ------------------------------------------------------- */

.utility-bar {
  background: var(--color-olive-dark);
  color: rgba(245, 240, 230, 0.78);
  font-size: var(--fs-xs);
  overflow: hidden;
  max-height: var(--utility-h);
  transition: max-height var(--dur-base) var(--ease-considered);
}

/* Collapsed once the page scrolls, so the sticky header stays compact. */
.site-header.is-condensed .utility-bar {
  max-height: 0;
}

.utility-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  height: var(--utility-h);
}

.utility-bar__note {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.utility-bar a {
  color: var(--color-brass-light);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-considered);
}

.utility-bar a:hover {
  border-bottom-color: var(--color-brass-light);
}

.utility-bar__links {
  display: flex;
  gap: var(--space-md);
  flex-shrink: 0;
}

@media (max-width: 48rem) {
  .utility-bar__note {
    display: none;
  }

  .utility-bar__inner {
    justify-content: center;
  }

  .utility-bar__links {
    gap: var(--space-sm);
  }
}

/* ---- Main bar: menu | logo | search | actions -------------------------- */

.header-main {
  position: relative;
}

/* Three equal-ish tracks so the search sits on the true centre line of the
   page, rather than being pushed off it by the differing widths of the logo
   and the action icons. */
.header-main__inner {
  display: grid;
  grid-template-columns: 1fr minmax(0, 30rem) 1fr;
  align-items: center;
  gap: var(--space-md);
  height: var(--header-main-h);
}

.header-logo {
  justify-self: start;
  flex-shrink: 0;
  font-size: var(--fs-lg);
  line-height: 1;
}

/* ---- Search ------------------------------------------------------------ */

.header-search {
  position: relative;
  width: 100%;
}

.header-search__field {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  background: var(--color-bone);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  padding-inline: var(--space-sm);
  transition: border-color var(--dur-fast) var(--ease-considered),
    background-color var(--dur-fast) var(--ease-considered);
}

/* The whole pill takes the focus ring, rather than the bare input. */
.header-search__field:focus-within {
  background: var(--color-ivory-warm);
  border-color: var(--color-olive);
  outline: 2px solid var(--color-brass);
  outline-offset: 2px;
}

.header-search__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--color-charcoal);
  padding-block: 0.7rem;
}

.header-search__input::placeholder {
  color: var(--color-charcoal-soft);
  opacity: 0.65;
}

.header-search__input:focus-visible {
  outline: none;
}

.header-search__submit {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-olive);
  cursor: pointer;
  border-radius: var(--radius-pill);
}

.header-search__submit svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

/* Suggestions dropdown */
.search-results {
  position: absolute;
  top: calc(100% + var(--space-2xs));
  left: 0;
  right: 0;
  background: var(--color-ivory-warm);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
  max-height: 22rem;
}

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

.search-results__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-2xs) var(--space-sm);
  text-align: left;
  text-decoration: none;
  border: 0;
  border-bottom: 1px solid var(--color-line);
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--color-charcoal);
  cursor: pointer;
}

.search-results__item:last-child {
  border-bottom: 0;
}

.search-results__item:hover,
.search-results__item.is-active {
  background: var(--color-bone);
}

.search-results__meta {
  flex-shrink: 0;
  font-size: var(--fs-xs);
  color: var(--color-charcoal-soft);
}

.search-results__empty {
  padding: var(--space-sm);
  font-size: var(--fs-sm);
  color: var(--color-charcoal-soft);
}

/* ---- Header action icons ----------------------------------------------- */

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  flex-shrink: 0;
  justify-self: end;
}

.header-icon {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: var(--space-3xs) var(--space-2xs);
  border: 0;
  background: transparent;
  text-decoration: none;
  color: var(--color-charcoal);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: color var(--dur-fast) var(--ease-considered);
}

.header-icon:hover {
  color: var(--color-olive);
}

.header-icon svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.header-icon__label {
  white-space: nowrap;
}

.header-icon__count {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 1.05rem;
  height: 1.05rem;
  padding-inline: 3px;
  display: grid;
  place-items: center;
  background: var(--color-olive);
  color: var(--color-ivory);
  border-radius: var(--radius-pill);
  font-size: 0.625rem;
  font-weight: 600;
}

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

/* Menu + search toggles are mobile-only; the rest are always shown. */
.header-icon--menu,
.header-icon--search-toggle {
  display: none;
}

@media (max-width: 48rem) {
  /* Back to flex: the hamburger joins the row and search leaves the flow. */
  .header-main__inner {
    display: flex;
    gap: var(--space-2xs);
  }

  .header-actions {
    margin-left: auto;
  }

  .header-icon--menu,
  .header-icon--search-toggle {
    display: inline-flex;
  }

  .header-logo {
    font-size: var(--fs-md);
    margin-inline: auto;
  }

  /* Search drops to its own full-width row, revealed by the toggle. */
  .header-search {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-width: none;
    margin: 0;
    padding: var(--space-2xs) var(--space-md) var(--space-sm);
    background: var(--color-ivory);
    border-bottom: 1px solid var(--color-line);
    display: none;
  }

  .header-search.is-open {
    display: block;
  }

  .search-results {
    left: var(--space-md);
    right: var(--space-md);
  }

  /* Labels are noise at this width; the icons carry aria-labels instead. */
  .header-icon__label {
    display: none;
  }

  .header-actions {
    gap: var(--space-3xs);
  }
}

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

.primary-nav {
  position: relative;
  border-top: 1px solid var(--color-line);
}

.primary-nav__list {
  display: flex;
  align-items: stretch;
  gap: var(--space-lg);
  height: var(--nav-h);
}

.primary-nav__item {
  display: flex;
}

.primary-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-charcoal);
  text-decoration: none;
  cursor: pointer;
  position: relative;
  transition: color var(--dur-fast) var(--ease-considered);
}

/* Brass underline on hover, focus and for the current section. */
.primary-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.55rem;
  height: 1.5px;
  background: var(--color-brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-considered);
}

.primary-nav__link:hover,
.primary-nav__link[aria-expanded="true"] {
  color: var(--color-olive);
}

.primary-nav__link:hover::after,
.primary-nav__link:focus-visible::after,
.primary-nav__link[aria-expanded="true"]::after,
.primary-nav__link[aria-current="page"]::after {
  transform: scaleX(1);
}

.primary-nav__link--accent {
  color: var(--color-notice);
  font-weight: 600;
}

.primary-nav__chevron {
  width: 0.65rem;
  height: 0.65rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--dur-fast) var(--ease-considered);
}

.primary-nav__link[aria-expanded="true"] .primary-nav__chevron {
  transform: rotate(180deg);
}

@media (max-width: 48rem) {
  .primary-nav {
    display: none;
  }
}

/* ---- Mega panel -------------------------------------------------------- */

.mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--z-mega);
  background: var(--color-ivory-warm);
  border-top: 1px solid var(--color-brass);
  border-bottom: 1px solid var(--color-line);
  box-shadow: var(--shadow-lg);
}

.mega[hidden] {
  display: none;
}

.mega__inner {
  display: grid;
  grid-template-columns: 1fr 17rem;
  gap: var(--space-xl);
  padding-block: var(--space-lg);
}

.mega__groups {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.mega__group-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-olive);
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-2xs);
  border-bottom: 1px solid var(--color-line);
}

.mega__columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: var(--space-md) var(--space-lg);
}

.mega__col-title {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 600;
  margin-bottom: var(--space-2xs);
}

.mega__col-title a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-considered);
}

.mega__col-title a:hover {
  border-bottom-color: var(--color-brass);
}

.mega__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.mega__links a {
  font-size: var(--fs-sm);
  color: var(--color-charcoal-soft);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-considered);
}

.mega__links a:hover {
  color: var(--color-olive);
}

/* Featured slot: the one own-brand item, on pre-sell. */
.mega__feature {
  background: var(--color-bone);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.mega__feature-media {
  aspect-ratio: 4 / 3;
  background: var(--color-bone-dark);
  overflow: hidden;
}

.mega__feature-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mega__feature-body {
  padding: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  align-items: flex-start;
}

.mega__feature-title {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 600;
}

.mega__feature-text {
  font-size: var(--fs-xs);
  color: var(--color-charcoal-soft);
}

@media (max-width: 64rem) {
  .mega__inner {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .mega__feature {
    flex-direction: row;
    align-items: stretch;
  }

  .mega__feature-media {
    flex: 0 0 10rem;
    aspect-ratio: auto;
  }
}

/* ---- Promo strip ------------------------------------------------------- */

.promo-strip {
  background: var(--color-bone);
  border-top: 1px solid var(--color-line);
  min-height: var(--promo-h);
  display: flex;
  align-items: center;
}

.promo-strip[hidden] {
  display: none;
}

.promo-strip__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-sm);
  padding-block: var(--space-3xs);
  text-align: center;
}

.promo-strip__text {
  font-size: var(--fs-xs);
  color: var(--color-charcoal);
}

.promo-strip__text strong {
  font-weight: 600;
  color: var(--color-olive-dark);
}

.promo-strip__link {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-olive);
  text-decoration: none;
  border-bottom: 1px solid var(--color-brass);
  padding-bottom: 1px;
}

.promo-strip__link:hover {
  color: var(--color-olive-dark);
}

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

.drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(42, 39, 34, 0.45);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-considered);
}

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

.drawer-overlay.is-open {
  opacity: 1;
}

.drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: var(--z-drawer);
  width: min(21rem, 88vw);
  background: var(--color-ivory);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform var(--dur-base) var(--ease-considered);
  box-shadow: var(--shadow-lg);
}

.drawer[hidden] {
  display: none;
}

.drawer.is-open {
  transform: translateX(0);
}

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-line);
  flex-shrink: 0;
}

.drawer__close {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-charcoal);
  cursor: pointer;
}

.drawer__close svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
}

.drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--space-2xs) 0 var(--space-lg);
  overscroll-behavior: contain;
}

.drawer__section {
  border-bottom: 1px solid var(--color-line);
}

.drawer__link,
.drawer__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--color-charcoal);
  text-decoration: none;
  text-align: left;
  cursor: pointer;
}

.drawer__toggle svg {
  width: 0.7rem;
  height: 0.7rem;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--dur-fast) var(--ease-considered);
}

.drawer__toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.drawer__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease-considered);
}

.drawer__toggle[aria-expanded="true"] + .drawer__panel {
  grid-template-rows: 1fr;
}

.drawer__panel-inner {
  overflow: hidden;
}

.drawer__group-label {
  padding: var(--space-xs) var(--space-md) var(--space-3xs);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-olive);
}

.drawer__sublink {
  display: block;
  padding: var(--space-2xs) var(--space-md) var(--space-2xs) var(--space-lg);
  font-size: var(--fs-sm);
  color: var(--color-charcoal-soft);
  text-decoration: none;
}

.drawer__sublink:hover {
  color: var(--color-olive);
  background: var(--color-bone);
}

.drawer__foot {
  padding: var(--space-md);
  border-top: 1px solid var(--color-line);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  flex-shrink: 0;
}

.drawer__foot-note {
  font-size: var(--fs-xs);
  color: var(--color-charcoal-soft);
}

/* Stops the page behind the drawer from scrolling. */
body.is-drawer-open {
  overflow: hidden;
}

@media (min-width: 48.0625rem) {
  .drawer,
  .drawer-overlay {
    display: none !important;
  }
}