/* NOIRIX shared brand polish for legacy utility states and repeated controls. */
:root {
  --noirix-black: #050505;
  --noirix-panel: #0b0b0b;
  --noirix-border: rgba(255, 255, 255, 0.12);
  --noirix-white: #ffffff;
  --noirix-soft: rgba(255, 255, 255, 0.08);
  --noirix-shell: min(100%, 1320px);
  --noirix-page-pad: clamp(16px, 4vw, 48px);
  --noirix-section-gap: clamp(44px, 7vw, 92px);
  --noirix-line: rgba(255, 255, 255, 0.1);
  --noirix-line-soft: rgba(255, 255, 255, 0.06);
  --noirix-text: #f4f0e9;
  --noirix-muted: rgba(244, 240, 233, 0.62);
  --noirix-dim: rgba(244, 240, 233, 0.42);
  --noirix-gold: #c9a96e;
  --noirix-display: "Cormorant Garamond", Georgia, serif;
  --noirix-body: "Inter", "Helvetica Neue", Arial, sans-serif;
}

.noirix-page-shell,
.nrx-page-shell {
  width: var(--noirix-shell);
  margin-inline: auto;
  padding-inline: var(--noirix-page-pad);
}

.noirix-section,
.nrx-section {
  padding-block: var(--noirix-section-gap);
}

.noirix-eyebrow,
.nrx-eyebrow {
  color: var(--noirix-gold);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.noirix-cta,
.nrx-cta,
.primary-btn,
.secondary-btn,
.submit-btn {
  min-height: 44px;
  border-radius: 8px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.noirix-empty-state,
.empty-copy,
.nrx-empty,
.summary-empty {
  border-color: rgba(201, 169, 110, 0.22);
  background: linear-gradient(135deg, rgba(201, 169, 110, 0.06), rgba(255, 255, 255, 0.012));
}

.noirix-status,
.form-status,
.checkout-feedback,
.promo-feedback {
  color: var(--noirix-muted);
  line-height: 1.55;
}

.noirix-status[data-tone="error"],
.form-status[data-tone="error"],
.checkout-feedback.is-error {
  color: #ffb1a8;
}

.noirix-status[data-tone="success"],
.form-status[data-tone="success"],
.checkout-feedback.is-success {
  color: var(--noirix-gold);
}

.noirix-honeypot {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.noirix-honeypot input,
.noirix-honeypot label,
.noirix-honeypot textarea {
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.noirix-legal-footer,
.niorix-legal-footer {
  margin-top: auto;
  border-top: 1px solid var(--noirix-line-soft);
  background: rgba(0, 0, 0, 0.76);
}

.nrx-cookie-banner {
  position: fixed !important;
  left: clamp(12px, 2vw, 22px) !important;
  right: auto !important;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 2147483600 !important;
  box-sizing: border-box;
  width: min(520px, calc(100vw - 32px)) !important;
  max-width: calc(100vw - 32px) !important;
  color: var(--noirix-text);
  font-family: var(--noirix-body);
}

.nrx-cookie-banner__inner {
  box-sizing: border-box;
  display: grid;
  gap: 14px;
  padding: 16px 16px 14px;
  border: 1px solid rgba(201, 169, 110, 0.34);
  background: linear-gradient(135deg, rgba(201, 169, 110, 0.09), transparent 42%), rgba(5, 5, 5, 0.94);
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.62), 0 0 0 1px rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.nrx-cookie-banner__actions,
.nrx-cookie-modal__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.nrx-cookie-btn,
.nrx-cookie-preferences-link,
[data-noirix-cookie-preferences] {
  box-sizing: border-box;
}

@media (max-width: 767px) {
  :root {
    --noirix-mobile-header-height: calc(64px + env(safe-area-inset-top, 0px));
    --noirix-mobile-bottom-clearance: calc(104px + env(safe-area-inset-bottom, 0px));
  }

  body[data-noira-luxury="on"] .site-nav,
  body[data-noira-luxury="on"] .nav,
  body[data-noira-luxury="on"] .top-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 3200 !important;
    min-height: var(--noirix-mobile-header-height);
    box-sizing: border-box;
    padding: calc(10px + env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px)) 10px max(14px, env(safe-area-inset-left, 0px)) !important;
    background: linear-gradient(180deg, rgba(3, 3, 3, 0.99), rgba(5, 5, 5, 0.96)) !important;
    border-bottom: 1px solid rgba(201, 169, 110, 0.18) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.58);
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
  }

  body[data-noira-luxury="on"] .site-nav::before,
  body[data-noira-luxury="on"] .nav::before,
  body[data-noira-luxury="on"] .top-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: #030303;
    pointer-events: none;
  }

  body[data-noira-luxury="on"] .site-nav .nav-actions,
  body[data-noira-luxury="on"] .nav .nav-actions {
    gap: 10px;
  }

  body[data-noira-luxury="on"] .site-nav .nav-icon-btn,
  body[data-noira-luxury="on"] .nav .nav-icon-btn,
  body[data-noira-luxury="on"] .site-nav a,
  body[data-noira-luxury="on"] .nav a,
  body[data-noira-luxury="on"] .top-header a,
  body[data-noira-luxury="on"] .top-header button {
    position: relative;
    z-index: 1;
  }

  body.has-noirix-bottom-nav,
  body.has-niorix-bottom-nav {
    padding-bottom: calc(var(--bottom-nav-height, 76px) + 28px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .noirix-bottom-nav,
  .niorix-bottom-nav {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 3100 !important;
    width: 100vw !important;
    max-width: none !important;
    transform: none !important;
    isolation: isolate;
    overflow: hidden;
    padding: 10px max(10px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px)) !important;
    /* Fully opaque base -- previously rgba(0,0,0,0.98), leaving a 2% gap
       covered only by the blur below. The gradient layers above stay for
       visual texture; the base layer underneath them is now truly opaque. */
    background:
      linear-gradient(180deg, rgba(12, 12, 12, 0.98), rgba(2, 2, 2, 0.995)),
      #000 !important;
    border: 0 !important;
    border-top: 1px solid rgba(201, 169, 110, 0.2) !important;
    /* Owner, 16 Oct 2026: on iOS 26 Safari the page runs on under the floating address bar, so the footer showed in
       the strip below this bar. The last shadow is solid black reaching 220px below the bar (shadows aren't clipped by
       overflow), so nothing scrolls into view underneath it. */
    box-shadow: 0 -24px 70px rgba(0, 0, 0, 0.88), 0 -1px 0 rgba(255, 255, 255, 0.04), 0 160px 0 60px #000 !important;
    backdrop-filter: blur(26px) saturate(155%);
    -webkit-backdrop-filter: blur(26px) saturate(155%);
  }

  .noirix-bottom-nav::before,
  .niorix-bottom-nav::before {
    content: "";
    position: absolute;
    inset: -28px 0 0;
    z-index: -1;
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.92) 30%, #020202 100%),
      rgba(0, 0, 0, 0.94);
    pointer-events: none;
  }

  .noirix-bottom-nav__item,
  .niorix-bottom-nav__item {
    z-index: 1;
    min-height: 54px;
  }
}

@media (max-width: 640px) {
  .nrx-cookie-banner {
    left: 16px !important;
    right: auto !important;
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
  }

  .nrx-cookie-banner__actions,
  .nrx-cookie-modal__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .nrx-cookie-btn {
    width: 100%;
  }
}

/* Owner brief 15 Oct 2026 (task 6): the company block after the policy (outside main, which the admin's live policy replaces). */
.legal-page.legal-company { padding-top: 0 !important; min-height: 0 !important; }
.legal-company .legal-card p { margin: 0 0 10px; }
.legal-company .legal-card p:last-child { margin-bottom: 0; }
/* Owner brief 15 Oct 2026 (task 6): a company field that isn't known yet stays hidden, whatever the section's display. */
[data-company-if][hidden], [data-company-legal][hidden], [data-company-trademark][hidden], .footer-company[hidden] { display: none !important; }
/* Owner brief 15 Oct 2026 (task 14): the © line was 3.1–3.7:1 on black (axe); #a7a19a is 7.6:1 (WCAG AA). */
.footer-copyright { color: #a7a19a !important; }

/* ===================================================================================================
   Owner brief round 2 (16 Oct 2026): one design system for the Void Collection, Wishlist, Notify me and
   every back button. Use these classes; don't restyle them per page.
   =================================================================================================== */
:root {
  --noirix-label-gold: #b8975a;        /* eyebrows and small labels (7.2:1 on black) */
  --noirix-cream: #f4f1ea;             /* the solid button */
  --noirix-body-grey: #a7a19a;         /* body copy on black (7.6:1) */
  --noirix-nav-h: 77px;                /* measured from the bottom nav by noirix-back.js */
}

/* Icons: one SVG set (assets/js/noirix-icons.js), drawn in the text colour. */
.nrx-icon { display: inline-block; width: 1em; height: 1em; flex: 0 0 auto; vertical-align: -0.125em; }

/* The one back button: rectangular outline, "← BACK" (rule 0.1). */
noirix-back { display: inline-flex; }
html body .nrx-back.nrx-back {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 0; background: rgba(0, 0, 0, 0.38);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--noirix-muted); font: 500 10px/1 var(--noirix-body); letter-spacing: 0.18em; text-transform: uppercase;
  cursor: pointer; transition: color 0.2s, border-color 0.2s, transform 0.2s;
}
html body .nrx-back.nrx-back:hover, html body .nrx-back.nrx-back:focus-visible { color: var(--noirix-text); border-color: rgba(255, 255, 255, 0.5); }
html body .nrx-back.nrx-back:focus-visible { outline: 1px solid var(--noirix-label-gold); outline-offset: 3px; }
.nrx-back .nrx-icon { width: 14px; height: 14px; }

/* Eyebrows / labels (like "NOIRIX / SIZE CHECK"). */
.nrx-label { color: var(--noirix-label-gold); font: 500 11px/1.4 var(--noirix-body); letter-spacing: 0.27em; text-transform: uppercase; margin: 0; }

/* Display titles (like "FIT GUIDANCE PAUSED"). */
.nrx-title { font-family: var(--noirix-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.08em; line-height: 1; color: var(--noirix-text); margin: 0; }

.nrx-body { color: var(--noirix-body-grey); font: 400 15px/1.75 var(--noirix-body); }

/* Buttons: the site's rectangular buttons only (like "JOIN PRIVATE LIST"). No rounded corners. */
/* !important: the old luxury-redesign.css styles every submit button with !important; these must win. */
html body .nrx-btn.nrx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 13px 20px !important;
  border: 1px solid var(--noirix-cream) !important; border-radius: 0 !important; background: transparent !important; color: var(--noirix-cream) !important;
  font: 500 12px/1 var(--noirix-body) !important; letter-spacing: 0.17em !important; text-transform: uppercase !important; text-decoration: none !important; cursor: pointer;
  box-shadow: none !important;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
html body .nrx-btn.nrx-btn--solid { background: var(--noirix-cream) !important; color: #050505 !important; }
html body .nrx-btn.nrx-btn--solid:hover { background: #fff !important; }
html body .nrx-btn.nrx-btn:not(.nrx-btn--solid):hover { background: rgba(244, 241, 234, 0.08) !important; }
html body .nrx-btn.nrx-btn--block { width: 100%; }
html body .nrx-btn.nrx-btn[disabled], html body .nrx-btn.nrx-btn[aria-disabled="true"] { opacity: 0.55; cursor: default; }
html body .nrx-btn.nrx-btn--quiet { border-color: rgba(255, 255, 255, 0.22) !important; color: var(--noirix-muted) !important; }
html body .nrx-btn.nrx-btn:focus-visible { outline: 1px solid var(--noirix-label-gold); outline-offset: 3px; }

html body .nrx-btn.nrx-btn::before, html body .nrx-btn.nrx-btn::after { content: none !important; display: none !important; }

/* Text links with an arrow (like "VIEW PIECE", "VIEW ALL"). */
.nrx-link {
  display: inline-flex; align-items: center; gap: 6px; color: var(--noirix-text); font: 500 11px/1.4 var(--noirix-body);
  letter-spacing: 0.18em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 5px;
  text-decoration-color: rgba(244, 241, 234, 0.35);
}
.nrx-link--gold { color: var(--noirix-label-gold); text-decoration-color: rgba(184, 151, 90, 0.5); }
.nrx-link .nrx-icon { width: 12px; height: 12px; }

/* Filter row: tab, count and sort, like the shop's filter labels. */
.nrx-filter-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--noirix-line); }
.nrx-filter-tab { display: inline-block; padding: 14px 0 12px; border: 0; border-bottom: 1px solid var(--noirix-label-gold); background: none; margin-bottom: -1px;
  color: var(--noirix-text); font: 500 11px/1 var(--noirix-body); letter-spacing: 0.22em; text-transform: uppercase; }
.nrx-count { color: var(--noirix-muted); font: 500 11px/1 var(--noirix-body); letter-spacing: 0.22em; text-transform: uppercase; }
.nrx-select { position: relative; display: inline-flex; align-items: center; }
.nrx-select select {
  -webkit-appearance: none; appearance: none; min-height: 44px; padding: 0 30px 0 0; border: 0; border-radius: 0; background: transparent;
  color: var(--noirix-text); font: 500 11px/1 var(--noirix-body); letter-spacing: 0.22em; text-transform: uppercase; cursor: pointer;
}
.nrx-select .nrx-icon { position: absolute; right: 4px; width: 14px; height: 14px; pointer-events: none; color: var(--noirix-muted); }

/* Size choices (Notify me): the site's square size boxes. */
.nrx-size-row { display: flex; flex-wrap: wrap; gap: 8px; }
.nrx-size { position: relative; }
.nrx-size input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.nrx-size span { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; min-height: 44px; padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.22); color: var(--noirix-text); font: 500 12px/1 var(--noirix-body); letter-spacing: 0.12em; }
.nrx-size input:checked + span { background: var(--noirix-cream); border-color: var(--noirix-cream); color: #050505; }
.nrx-size input:focus-visible + span { outline: 1px solid var(--noirix-label-gold); outline-offset: 2px; }

/* Rule 0.5: the bottom nav is solid to the very bottom of the screen, and nothing shows under it. The black
   underlay below the nav (for Safari's moving toolbar) was clipped by overflow: hidden: let it show. */
@media (max-width: 1024px) {
  .noirix-bottom-nav,
  .niorix-bottom-nav { overflow: visible !important; }
  .noirix-bottom-nav::before,
  .niorix-bottom-nav::before { inset: 0 !important; }
  .noirix-bottom-nav::after,
  .niorix-bottom-nav::after { content: "" !important; position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important;
    height: 100vh !important; background: #000 !important; pointer-events: none !important; }
  body.has-noirix-bottom-nav,
  body.has-niorix-bottom-nav { padding-bottom: calc(var(--noirix-nav-h) + 28px) !important; }
}
html body .nrx-back.nrx-back::before, html body .nrx-back.nrx-back::after { content: none !important; display: none !important; }

/* Round 2 (item 7.3.4): the Android "Open in the app" bar. */
.nrx-app-prompt { position: relative; z-index: 3200; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px;
  background: #0b0b0b; border-bottom: 1px solid var(--noirix-line); color: var(--noirix-muted); font: 400 13px/1.4 var(--noirix-body); }
.nrx-app-prompt span { flex: 1; }
.nrx-app-prompt button { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; color: var(--noirix-muted); cursor: pointer; }
.nrx-app-prompt .nrx-icon { width: 16px; height: 16px; }