/* NOIRIX standard header (owner answer 16 Oct: "every page gets the same header").
   One header on every customer page: the NR logo with "Beyond Black / Designed in Manchester", the links on
   computers, and the round search, heart (gold with a count when something is saved) and menu buttons.
   The markup is written into each page by scripts/standard-header.mjs (tests/standard-header.test.mjs keeps
   every copy identical). These rules stand on their own: they do not rely on any page's own stylesheet, and they
   win over the older per-page header rules, so the header looks the same whatever else a page loads.
   The header is fixed; --nrx-header-h is its height, and pages without their own offset get that much space. */

:root {
  --nrx-header-h: 74px;
}

@media (max-width: 767px) {
  :root { --nrx-header-h: calc(64px + env(safe-area-inset-top, 0px)); }
}

html body.nrx-std-header #mainNav.nrx-header {
  --nrx-h-line: rgba(255, 255, 255, 0.08);
  --nrx-h-gold: #c9a96e;
  --nrx-h-text: #f0ede8;
  --nrx-h-muted: #9e9890;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  z-index: 3200 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px;
  box-sizing: border-box !important;
  width: auto !important;
  height: var(--nrx-header-h) !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 52px !important;
  /* Solid, not frosted: see "Screen edges" at the end of this file. */
  background: #030303 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--nrx-h-line) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif !important;
  line-height: 1.65;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html body.nrx-std-header #mainNav.nrx-header::before,
html body.nrx-std-header #mainNav.nrx-header::after { content: none !important; display: none !important; }

html body.nrx-std-header #mainNav.nrx-header .nav-brand {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 44px;
  gap: 6px !important;
  flex: none !important;
  min-width: max-content;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  text-decoration: none !important;
  background: none !important;
  border: 0 !important;
}

html body.nrx-std-header #mainNav.nrx-header .nav-logo {
  display: block !important;
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px !important;
  max-width: none !important;
  margin: 0 !important;
  object-fit: cover;
  border-radius: 50% !important;
  box-shadow: 0 0 0 1px rgba(244, 241, 234, 0.2), 0 10px 26px rgba(0, 0, 0, 0.36);
}

html body.nrx-std-header #mainNav.nrx-header .nav-brand-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  line-height: 1 !important;
}

html body.nrx-std-header #mainNav.nrx-header .nav-wordmark {
  display: block !important;
  margin: 0 !important;
  padding: 0 0.44em 0 0 !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0.18em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  color: #ffffff !important;
  opacity: 0.8 !important;
}

html body.nrx-std-header #mainNav.nrx-header .nav-tagline {
  display: block !important;
  margin: 0 !important;
  padding: 0 0.34em 0 0 !important;
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 0.34em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  color: var(--nrx-h-gold) !important;
}

html body.nrx-std-header #mainNav.nrx-header .nav-links {
  display: flex !important;
  align-items: center !important;
  gap: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

html body.nrx-std-header #mainNav.nrx-header .nav-links li { margin: 0 !important; padding: 0 !important; }

html body.nrx-std-header #mainNav.nrx-header .nav-links a {
  /* Round 4 (B9): a 44px-tall hit row around the small capitals. */
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
  min-height: 44px !important;
  padding: 0 !important;
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 9.5px !important;
  font-weight: 400 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  color: var(--nrx-h-muted) !important;
  text-decoration: none !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: auto !important;
  min-width: 0 !important;
  transition: color 0.28s ease;
}

html body.nrx-std-header #mainNav.nrx-header .nav-links a:hover,
html body.nrx-std-header #mainNav.nrx-header .nav-links a[aria-current="page"] { color: #ffffff !important; }

html body.nrx-std-header #mainNav.nrx-header .nav-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 20px !important;
  flex: none !important;
  margin: 0 !important;
}

html body.nrx-std-header #mainNav.nrx-header .nav-icon-btn {
  /* Round 4 (B9): 44px, the minimum comfortable tap (was 36px). */
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.38) !important;
  color: #ffffff !important;
  font-size: 16px !important;
  line-height: 1 !important;
  box-shadow: none !important;
  cursor: pointer;
  text-decoration: none !important;
  transition: border-color 0.28s ease, background 0.28s ease;
}

html body.nrx-std-header #mainNav.nrx-header .nav-icon-btn i { display: block !important; color: inherit; font-size: 16px !important; }
html body.nrx-std-header #mainNav.nrx-header #wishlistNavBtn.is-wishlist-filled i { color: var(--nrx-h-gold) !important; }

html body.nrx-std-header #mainNav.nrx-header .nav-icon-btn:hover {
  border-color: rgba(255, 255, 255, 0.56) !important;
  background: rgba(0, 0, 0, 0.62) !important;
}

html body.nrx-std-header #mainNav.nrx-header .nav-icon-btn:focus-visible,
html body.nrx-std-header #mainNav.nrx-header a:focus-visible {
  outline: 2px solid var(--nrx-h-gold) !important;
  outline-offset: 3px !important;
}

/* Pages with no offset of their own start below the header. */
html body.nrx-std-header.nrx-std-offset { padding-top: var(--nrx-header-h) !important; }

/* Anything a page pinned to the top now sits under the header instead of behind it. */
html body.nrx-std-header .nrx-under-header { top: var(--nrx-header-h) !important; }

/* The page's own back control, under the header. */
html body.nrx-std-header .nrx-page-back { display: flex; width: max-content; margin: 18px 0 0 max(16px, calc((100vw - 1200px) / 2)); position: relative; z-index: 5; }

/* Bars that pages keep under the header (bag, product, Client Care, returns) no longer repeat the logo. */
html body.nrx-std-header .cart-nav .cart-brand,
html body.nrx-std-header .pdp-nav .pdp-nav-brand,
html body.nrx-std-header .nrx-profile-nav .nrx-profile-nav__brand,
html body.nrx-std-header .studio-nav .studio-logo-link,
html body.nrx-std-header .page-header > img[alt="NOIRIX"] { visibility: hidden !important; }

@media (max-width: 1280px) {
  html body.nrx-std-header #mainNav.nrx-header { padding: 0 28px !important; }
  html body.nrx-std-header #mainNav.nrx-header .nav-links { gap: 22px !important; }
}

@media (max-width: 1100px) {
  html body.nrx-std-header #mainNav.nrx-header .nav-links { display: none !important; }
}

@media (max-width: 767px) {
  html body.nrx-std-header #mainNav.nrx-header {
    padding: env(safe-area-inset-top, 0px) max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)) !important;
    background: #030303 !important;
  }
  html body.nrx-std-header #mainNav.nrx-header .nav-actions { gap: 10px !important; }
  /* As on home.html at phone width: the brand gives way and "Designed in Manchester" wraps onto two lines. */
  html body.nrx-std-header #mainNav.nrx-header .nav-brand { flex: 0 1 auto !important; min-width: 0 !important; }
  html body.nrx-std-header #mainNav.nrx-header .nav-brand-text { min-width: 0 !important; }
  html body.nrx-std-header #mainNav.nrx-header .nav-tagline { white-space: normal !important; line-height: 1.15 !important; }
  html body.nrx-std-header .nrx-page-back { margin: 14px 0 0 16px; }
}

/* The menu (site-nav.js, z-index 6400) opens over the header (3200), as on the pages that had this header first. */

/* Screen edges (owner, 17 Oct 2026: on iPhone, page content showed in the strip above the header and below the
   bottom bar). Safari 26 draws its own status-bar area and the strip behind its floating address bar, and fills
   them with the colour of the fixed bar touching that edge -- but only when that bar has one solid background. A
   translucent, frosted or gradient bar leaves Safari showing the page scrolling underneath instead, and painting
   black outside the bar (the bottom bar's ::after and box-shadow) never reaches those strips. So the top bar and
   the bottom bar are solid black, unblurred; the bottom bar keeps its texture on its own ::before layer.
   The pages with their own header (home) get the same at phone width; on computers home keeps its header
   see-through over the hero. */
@media (max-width: 767px) {
  html body #mainNav.site-nav {
    background: #030303 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

html body .noirix-bottom-nav,
html body .niorix-bottom-nav {
  background: #000 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}