/*
 * Global header (redesign): slim announcement bar + sticky header (logo, search, account, cart) with
 * the navigation row below it on desktop and an off-canvas drawer on tablet/mobile.
 * Scoped "nx-" classes; colours are local tokens so nothing outside the header changes.
 * Sticky: only the header sticks (like the reference nav band); the announcement scrolls away.
 */
.nx-announcement, .nx-header, .nx-drawer-overlay {
  --nx-ink: #1E293B;          /* text / dark surfaces */
  --nx-ink-2: #334155;
  --nx-muted: #64748B;
  --nx-line: #E2E8F0;
  --nx-soft: #F1F5F9;
  --nx-accent: #DD5E1F;       /* NEXO orange: used for lines, badges and fills, not small text */
  --nx-accent-ink: #C2410C;   /* AA-compliant orange for text on white (5.2:1) */
  --nx-accent-tint: #FFF4ED;
  --nx-bar-h: 76px;
}
/* Anchor/skip-link targets are not hidden under the sticky header. Set on targets, not as html
   scroll-padding: that made Chrome scroll the page on every keystroke in the header search field. */
#main, main [id] { scroll-margin-top: 140px; }
@media (max-width: 1024px) { #main, main [id] { scroll-margin-top: 76px; } }

/* ---------- Announcement */
.nx-announcement { background: var(--nx-ink); color: #fff; }
/* One compact line at every width: the phone message is a shorter variant, nothing wraps or truncates. */
.nx-announcement__inner {
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: nowrap;
  min-height: 36px; padding: 0 var(--gutter); text-align: center; white-space: nowrap;
}
.nx-announcement__text { margin: 0; font-size: 13px; line-height: 1.4; font-weight: 500; letter-spacing: .02em; }
.nx-announcement__mobile { display: none; }
.nx-announcement .is-pending { text-decoration-color: rgba(255, 255, 255, .55); }
.nx-announcement__link {
  display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 600; line-height: 1.4;
  color: #FDBA74; letter-spacing: .02em;
}
.nx-announcement__link svg { width: 14px; height: 14px; }
.nx-announcement__link:hover { color: #fff; }
.nx-announcement :focus-visible { outline-color: #FDBA74; }

/* ---------- Sticky header */
.nx-header { position: sticky; top: 0; z-index: 100; background: #fff; border-bottom: 1px solid var(--nx-line); transition: box-shadow .2s; }
.nx-header.is-stuck { box-shadow: 0 6px 20px rgba(15, 23, 42, .08); }
.nx-header__bar {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 32px;
  min-height: var(--nx-bar-h); padding: 0 var(--gutter);
}

/* Logo: the supplied mark at its own 144:159 ratio, plus the brand name set in text */
.nx-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--nx-ink); justify-self: start; }
.nx-logo:hover { color: var(--nx-ink); }
.nx-logo__mark { width: auto; height: 46px; max-width: none; }
.nx-logo__word { font-family: var(--f-system); font-size: 25px; line-height: 1; font-weight: 800; letter-spacing: .2em; }

/* Search */
.nx-search { justify-self: center; width: 100%; max-width: 560px; }
.nx-search__form { position: relative; display: flex; }
.nx-search__input {
  width: 100%; height: 44px; padding: 0 52px 0 20px; border: 1px solid var(--nx-line); border-radius: 999px;
  background: var(--nx-soft); color: var(--nx-ink); font-size: 15px; transition: border-color .15s, background .15s;
}
.nx-search__input::placeholder { color: #475569; } /* 6.9:1 on the field */
.nx-search__input:hover { border-color: #CBD5E1; }
.nx-search__input:focus { outline: none; border-color: var(--nx-accent); background: #fff; box-shadow: 0 0 0 3px rgba(221, 94, 31, .15); }
.nx-search__submit {
  position: absolute; top: 4px; right: 4px; width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: var(--nx-ink); color: #fff; display: grid; place-items: center;
}
.nx-search__submit svg { width: 16px; height: 16px; }
.nx-search__submit:hover { background: var(--nx-accent); }

/* Actions: account + cart (+ search toggle on small screens) */
.nx-header__actions { display: flex; align-items: center; gap: 6px; justify-self: end; }
.nx-action {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border: 0; border-radius: 999px;
  background: transparent; color: var(--nx-ink); font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap;
}
.nx-action:hover { background: var(--nx-soft); color: var(--nx-ink); }
.nx-action > svg, .nx-action__icon svg { width: 24px; height: 24px; }
.nx-action__icon { position: relative; display: inline-flex; margin-right: 6px; } /* room for the count badge */
.nx-badge {
  position: absolute; top: -6px; right: -8px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--nx-accent-ink); color: #fff; font-size: 11px; line-height: 18px; font-weight: 700; text-align: center; /* 5.2:1 */
  box-shadow: 0 0 0 2px #fff;
}
.nx-icon-btn {
  display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: transparent; color: var(--nx-ink);
}
.nx-icon-btn svg { width: 22px; height: 22px; }
.nx-icon-btn:hover { background: var(--nx-soft); }
.nx-header__burger, .nx-search-toggle { display: none; }

/* Drawer shell: on desktop it is simply the navigation row (head/foot hidden) */
.nx-drawer__head, .nx-drawer__foot, .nx-drawer-overlay { display: none; }

/* ---------- Tablet + mobile (≤1024px): compact bar, drawer, search panel */
@media (max-width: 1024px) {
  .nx-header { --nx-bar-h: 64px; }
  .nx-header__bar { grid-template-columns: 1fr auto 1fr; column-gap: 8px; padding: 0 6px; }
  .nx-header__burger { display: grid; justify-self: start; }
  .nx-logo { justify-self: center; grid-column: 2; }
  .nx-logo__mark { height: 38px; }
  .nx-logo__word { font-size: 21px; }
  .nx-header__actions { grid-column: 3; gap: 0; }
  .nx-search-toggle { display: grid; }
  .nx-action { padding: 0 10px; }
  .nx-hide-compact {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  /* Search panel */
  .nx-search { display: none; grid-column: 1 / -1; grid-row: 2; max-width: none; padding: 0 6px 12px; }
  .nx-header.is-search-open .nx-search { display: block; }
  .nx-header.is-search-open .nx-search-toggle { background: var(--nx-soft); }

  /* Drawer */
  .nx-drawer {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 230; width: min(88vw, 380px);
    display: flex; flex-direction: column; background: #fff; box-shadow: 8px 0 32px rgba(15, 23, 42, .18);
    transform: translateX(-100%); visibility: hidden;
    transition: transform .28s ease, visibility 0s linear .28s; /* stay visible while sliding out */
  }
  .nx-header.is-drawer-open { z-index: 240; } /* the sticky header is a stacking context: lift it above the overlay */
  .nx-header.is-drawer-open .nx-header__bar { pointer-events: none; } /* bar sits above the overlay: make it inert to clicks */
  .nx-header.is-drawer-open .nx-drawer { transition: transform .28s ease, visibility 0s; /* visible at once, so focus can move in */ transform: none; visibility: visible; box-shadow: 0 0 0 200vmax rgba(15, 23, 42, .45); } /* dims page and header bar alike */
  .nx-drawer__head {
    display: flex; align-items: center; justify-content: space-between; flex: none;
    padding: 10px 8px 10px 18px; border-bottom: 1px solid var(--nx-line);
  }
  .nx-logo--drawer .nx-logo__mark { height: 34px; }
  .nx-logo--drawer .nx-logo__word { font-size: 19px; }
  .nx-drawer__foot { display: block; flex: none; padding: 12px 18px 18px; border-top: 1px solid var(--nx-line); }
  .nx-drawer__link {
    display: flex; align-items: center; gap: 10px; padding: 10px 4px; color: var(--nx-ink); font-size: 15px; font-weight: 600;
  }
  .nx-drawer__link svg { width: 22px; height: 22px; }
  .nx-drawer__link:hover { color: var(--nx-accent-ink); }
  .nx-drawer-overlay {
    display: block; position: fixed; inset: 0; z-index: 225; background: transparent; /* click target; the drawer shadow dims */
    visibility: hidden;
  }
  .nx-header.is-drawer-open + .nx-drawer-overlay { visibility: visible; }
  body.nx-lock { overflow: hidden; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .nx-header__bar { padding: 0 12px; }
}

@media (max-width: 767px) {
  .nx-announcement__desktop { display: none; }
  .nx-announcement__mobile { display: inline; }
  .nx-announcement__inner { min-height: 32px; gap: 12px; padding: 0 12px; }
  .nx-announcement__text, .nx-announcement__link { font-size: 12.5px; }
  .nx-account { display: none; } /* account lives in the drawer on phones */
}
@media (max-width: 359px) {
  .nx-logo__word { display: none; }
  .nx-action { padding: 0 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .nx-drawer, .nx-header.is-drawer-open .nx-drawer, .nx-drawer-overlay, .nx-header { transition: none; }
}