/* ==========================================================================
   HEADER
   Container-query driven, so one markup tree serves every width without
   duplicate DOM or a JS breakpoint watcher.
   ========================================================================== */

.ssc-header {
  container-type: inline-size;
  container-name: header;
  position: relative;
  z-index: var(--ss-z-header);
  background: var(--ssp-surface);
  border-block-end: 1px solid var(--ssp-line);
}

.ssc-header__utility {
  background: var(--ssp-ink);
  color: var(--ssp-surface);
  font-size: var(--ss-step--1);
}

.ssc-header__utility a { color: inherit; }

.ssc-header__utility-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ss-space-xs);
  padding-block: var(--ss-space-3xs);
}

.ssc-header__main {
  display: flex;
  align-items: center;
  gap: var(--ss-space-m);
  padding-block: var(--ss-space-xs);
}

.ssc-header__brand { flex: 0 0 auto; }
.ssc-header__brand img { max-height: 3rem; width: auto; }

.ssc-header__search { flex: 1 1 auto; min-width: 0; }
.ssc-header__actions { flex: 0 0 auto; }

/* ---- Navigation -------------------------------------------------------- */

.ssc-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ss-space-m);
}

.ssc-nav__link {
  font-family: var(--ssp-font-body);
  font-size: var(--ss-step--2);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ssp-ink);
  text-decoration: none;
  padding-block: var(--ss-space-2xs);
  display: inline-block;
}

.ssc-nav__item.is-current > .ssc-nav__link,
.ssc-nav__link:hover {
  color: var(--ssp-accent);
}

.ssc-nav__submenu {
  display: none;
  position: absolute;
  min-width: 14rem;
  padding: var(--ss-space-xs);
  background: var(--ssp-surface);
  border: 1px solid var(--ssp-line);
  box-shadow: var(--ss-shadow-2);
}

.ssc-nav__item--has-children:hover > .ssc-nav__submenu,
.ssc-nav__item--has-children:focus-within > .ssc-nav__submenu,
.ssc-nav__submenu.is-open {
  display: block;
}

/* ---- Width responses ---------------------------------------------------
   Named against the header's own inline size, not the viewport, so the
   same header works inside a narrow portal shell.                       */

@container header (max-width: 60rem) {
  .ssc-header__nav { display: none; }
  .ssc-header__burger { display: inline-flex; }
}

@container header (min-width: 60.001rem) {
  .ssc-header__burger { display: none; }
}

@container header (max-width: 40rem) {
  .ssc-header__search { order: 3; flex-basis: 100%; }
  .ssc-header__main { flex-wrap: wrap; }
}

/* ==========================================================================
   HEADER PIECES THE AUDIT FOUND UNSTYLED
   These were styled only in my preview harness, never in the theme, which
   is why the header shipped looking like an unstyled document. The class
   audit in the build notes exists to stop that recurring.
   ========================================================================== */

.ssc-header__wordmark {
  font-family: var(--ssp-font-display);
  font-size: 1.5rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ssp-ink);
  text-decoration: none;
  line-height: 1;
}

.ssc-header__wordmark:hover { color: var(--ssp-accent); }

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

.ssc-search { display: flex; gap: var(--ss-space-3xs); }
.ssc-search__field { flex: 1 1 auto; min-width: 0; }
.ssc-search .ssc-search__submit { flex: 0 0 auto; }

/* ---- Account and basket ------------------------------------------------- */

.ssc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ss-space-xs);
  padding: 0;
  list-style: none;
}

.ssc-actions__link {
  display: inline-flex;
  align-items: center;
  gap: var(--ss-space-3xs);
  min-height: 2.75rem;
  padding-inline: var(--ss-space-xs);
  border: 2px solid var(--ssp-line-strong);
  color: var(--ssp-ink);
  text-decoration: none;
  font-family: var(--ssp-font-body);
  font-weight: 700;
  font-size: var(--ss-step--1);
  letter-spacing: var(--ss-tracking-label);
  text-transform: uppercase;
  white-space: nowrap;
}

.ssc-actions__link:hover { border-color: var(--ssp-ink); color: var(--ssp-ink); }

.ssc-actions__link--basket {
  background: var(--ssp-ink);
  border-color: var(--ssp-ink);
  color: var(--ssp-surface);
}

.ssc-actions__link--basket:hover {
  background: var(--ssp-accent);
  border-color: var(--ssp-accent);
  color: var(--ssp-accent-contrast);
}

.ssc-actions__count {
  display: inline-grid;
  place-items: center;
  min-width: 1.4em;
  padding-inline: .3em;
  background: var(--ssp-accent);
  color: var(--ssp-accent-contrast);
  font-variant-numeric: tabular-nums;
}

.ssc-actions__link--basket .ssc-actions__count {
  background: var(--ssp-surface);
  color: var(--ssp-ink);
}

/* ---- Burger and submenu toggle -----------------------------------------
   Both were empty buttons with no visible content — invisible controls. */

.ssc-header__burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 2px solid var(--ssp-line-strong);
}

.ssc-header__burger-bars,
.ssc-header__burger-bars::before,
.ssc-header__burger-bars::after {
  display: block;
  width: 1.15rem;
  height: 2px;
  background: var(--ssp-ink);
}

.ssc-header__burger-bars { position: relative; }

.ssc-header__burger-bars::before,
.ssc-header__burger-bars::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
}

.ssc-header__burger-bars::before { inset-block-start: -6px; }
.ssc-header__burger-bars::after  { inset-block-start: 6px; }

.ssc-nav__toggle {
  width: 2rem;
  height: 2rem;
  background:
    linear-gradient(var(--ssp-ink), var(--ssp-ink)) center / 10px 2px no-repeat,
    linear-gradient(var(--ssp-ink), var(--ssp-ink)) center / 2px 10px no-repeat;
  transition: transform var(--ss-duration) var(--ss-ease);
}

.ssc-nav__item--has-children[aria-expanded="true"] > .ssc-nav__toggle,
.ssc-nav__toggle[aria-expanded="true"] { transform: rotate(45deg); }

/* Above the breakpoint the submenu opens on hover, so the toggle is noise. */
@container header (min-width: 60.001rem) {
  .ssc-nav__toggle { display: none; }
}

.ssc-nav--utility .ssc-nav__list { gap: var(--ss-space-s); }

.ssc-nav--utility .ssc-nav__link {
  color: inherit;
  font-size: var(--ss-step--1);
  padding-block: 0;
}

/* ==========================================================================
   MEGA MENU
   A top-level item with children opens a full-width panel rather than a
   dropdown. With 128 categories a stacked dropdown is unusable; columns
   let someone see a whole department at once.
   ========================================================================== */

/* The panel spans the header, so the nav row must not clip it. */
.ssc-header__nav { position: relative; }

.ssc-nav__item--mega { position: static; }

.ssc-mega {
  display: none;
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  z-index: var(--ss-z-header);
  background: var(--ssp-surface);
  border-block: 1px solid var(--ssp-line);
  box-shadow: var(--ss-shadow-2);
}

.ssc-nav__item--mega:hover > .ssc-mega,
.ssc-nav__item--mega:focus-within > .ssc-mega,
.ssc-mega.is-open { display: block; }

.ssc-mega__in {
  display: grid;
  gap: var(--ss-space-xl);
  grid-template-columns: 1fr;
  padding-block: var(--ss-space-l);
}

/* A promo column only exists when something filled it. */
.ssc-mega__in:has(.ssc-mega__promo) { grid-template-columns: minmax(0, 1fr) minmax(14rem, 20rem); }

/* Multi-column rather than grid, so an alphabetical list reads DOWN each
   column and then across — which is how anyone scans A to Z. A grid fills
   across first, putting B in column two and C in column three, and the
   reader has to zigzag. The column count follows the available width. */
.ssc-mega__list {
  columns: 4 12rem;
  column-gap: var(--ss-space-l);
  padding: 0;
  list-style: none;
}

.ssc-mega__list > .ssc-nav__item {
  break-inside: avoid;
  margin-block-end: var(--ss-space-2xs);
}

.ssc-mega__list .ssc-nav__link {
  display: block;
  padding-block: var(--ss-space-3xs);
  font-family: var(--ssp-font-body);
  font-weight: 400;
  font-size: var(--ss-step-0);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ssp-ink);
}

.ssc-mega__list .ssc-nav__link:hover { color: var(--ssp-accent); }

/* A second level inside the panel becomes a heading plus its children. */
.ssc-mega__list .ssc-nav__item--has-children > .ssc-nav__link {
  font-family: var(--ssp-font-body);
  font-weight: 700;
  font-size: var(--ss-step--3);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-block-end: var(--ss-space-3xs);
}

.ssc-mega__list .ssc-nav__submenu {
  display: block;
  position: static;
  min-width: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: none;
  margin-block-end: var(--ss-space-s);
}

.ssc-mega__promo {
  padding: var(--ss-space-m);
  background: var(--ssp-surface-alt);
}

/* The panel is a desktop affordance; below the breakpoint the mobile
   drawer shows the same items as a plain nested list. */
@container header (max-width: 60rem) {
  .ssc-mega,
  .ssc-nav__item--mega:hover > .ssc-mega { position: static; display: none; box-shadow: none; border: 0; }
  .ssc-mega.is-open { display: block; }
  .ssc-mega__in { padding-block: 0 var(--ss-space-s); gap: var(--ss-space-s); }
  .ssc-mega__in:has(.ssc-mega__promo) { grid-template-columns: 1fr; }
  .ssc-mega__promo { display: none; }
}

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

@container header (max-width: 60rem) {
  .ssc-header__nav {
    display: none;
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    z-index: var(--ss-z-header);
    max-height: 70svh;
    overflow-y: auto;
    padding-block: var(--ss-space-s);
    background: var(--ssp-surface);
    border-block-end: 1px solid var(--ssp-line);
    box-shadow: var(--ss-shadow-2);
  }

  .ssc-header__nav.is-open { display: block; }

  .ssc-nav__list { flex-direction: column; gap: 0; }

  .ssc-nav__item--depth-0 {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    border-block-end: 1px solid var(--ssp-line);
  }

  .ssc-nav__item--depth-0 > .ssc-nav__link { padding-block: var(--ss-space-xs); }

  .ssc-mega { grid-column: 1 / -1; }
}