/*
Theme Name: Noble Aminos
Theme URI: https://nobleaminos.com
Author: Noble Aminos
Description: Monochrome apothecary theme for Noble Aminos. Built step by step — base shell, 21+ research gate, disclaimer footer, header ticker, home hero + CTA.
Version: 0.10.9
Requires at least: 6.4
Requires PHP: 8.0
License: Proprietary
Text Domain: noble-aminos
Tags: woocommerce, custom-logo, minimal
WC requires at least: 8.0
WC tested up to: 9.9
*/

/* ============================================================
   1. TOKENS — every color, size, and font in the theme lives here.
   Change a value here and it changes everywhere. Nothing below
   this block should hardcode a hex value.
   ============================================================ */

:root {
  /* Ink */
  --na-ink:            #1C1C1A;  /* headlines, solid buttons */
  --na-ink-soft:       #4A4A46;  /* body copy */
  --na-ink-faint:      #8A8A82;  /* eyebrows, meta, legal */

  /* Paper */
  --na-paper:          #F7F6F2;  /* modal / card surface */
  --na-paper-deep:     #EFEDE7;  /* alt sections */
  --na-paper-white:    #FFFFFF;

  /* Line */
  --na-rule:           #DCD9D1;
  --na-rule-strong:    #B8B4AA;
  --na-shop-bg:        #131312;  /* catalog page backdrop (near-black) */

  /* Accent — used almost never. That's the point. */
  --na-accent:         #7A1F1F;
  --na-danger:         #C0362C;
  --na-success:        #2E7D46;

  /* Footer — the one dark surface on the site */
  --na-footer-bg:      #0E0E0D;
  --na-footer-ink:     #F2F1EC;
  --na-footer-soft:    #A8A69F;
  --na-footer-faint:   #77756F;
  --na-footer-rule:    rgba(242, 241, 236, 0.18);

  /* Ticker — the dark strip above the header */
  --na-ticker-bg:      #1C1C1A;
  --na-ticker-ink:     #EFEDE7;
  --na-ticker-dot:     #7A756A;

  /* Type */
  --na-font-serif:     "Cormorant Garamond", "EB Garamond", Georgia, "Times New Roman", serif;
  --na-font-sans:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  /* Hero display face — swap this one value to trial a different font. */
  --na-font-hero:      "Nunito", "Poppins", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --na-font-mono:      ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;

  /* Scale */
  --na-step--1:        0.8125rem;
  --na-step-0:         1rem;
  --na-step-1:         1.25rem;
  --na-step-2:         1.75rem;
  --na-step-3:         2.5rem;
  --na-step-4:         3.5rem;

  /* Space */
  --na-space-xs:       0.5rem;
  --na-space-sm:       0.875rem;
  --na-space-md:       1.5rem;
  --na-space-lg:       2.5rem;
  --na-space-xl:       4rem;

  /* Structure */
  --na-radius:         6px;
  --na-shell:          1200px;
  --na-ease:           cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================================
   2. RESET — light touch only.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--na-paper-white);
  color: var(--na-ink-soft);
  font-family: var(--na-font-sans);
  font-size: var(--na-step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--na-font-serif);
  font-weight: 400;
  color: var(--na-ink);
  line-height: 1.15;
  margin: 0 0 var(--na-space-sm);
}

a { color: var(--na-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }

img, svg { max-width: 100%; height: auto; display: block; }

:focus-visible {
  outline: 2px solid var(--na-ink);
  outline-offset: 3px;
}

/* ============================================================
   3. SHELL — header, main, footer. Deliberately bare.
   Steps 2+ will build into these.
   ============================================================ */

.na-shell {
  width: min(100% - 2.5rem, var(--na-shell));
  margin-inline: auto;
}

.na-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: var(--na-paper-deep);
  border-bottom: 1px solid var(--na-rule);
  padding-block: 0.81rem;
  transition: background-color 220ms var(--na-ease);
}

/* Once scrolled, let the page show through slightly. */
.na-header.is-scrolled {
  background: rgba(239, 237, 231, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.na-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--na-space-md);
}

/* Logo lives top-left: shield mark + stacked wordmark beside it. */
.na-logo { flex: 0 0 auto; }

.na-logo__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  text-decoration: none;
}

.na-logo__mark { display: flex; flex: 0 0 auto; }
.na-logo__mark img,
.na-logo__mark svg { max-height: 31px; width: auto; display: block; }

/* Wordmark echoes the vial label: serif "Noble" over spaced "Aminos". */
.na-logo__word {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.na-logo__word-top {
  font-family: var(--na-font-serif);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--na-ink);
}

.na-logo__word-bottom {
  font-family: var(--na-font-sans);
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--na-ink-soft);
  padding-left: 0.12em;
  margin-top: 0.28em;
}

@media (max-width: 480px) {
  /* Logo reads noticeably larger on phones — close to desktop size. */
  .na-logo__mark img,
  .na-logo__mark svg { max-height: 29px; }
  .na-logo__word-top { font-size: 1.22rem; }
  .na-logo__word-bottom { font-size: 0.48rem; letter-spacing: 0.38em; }
}

.na-nav ul {
  display: flex;
  gap: var(--na-space-md);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--na-step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.na-nav a { text-decoration: none; color: var(--na-ink-soft); }
.na-nav a:hover { color: var(--na-ink); }

.na-main { min-height: 50vh; }

/* Text templates (pages, posts) get their centered column + spacing here,
   now that the shared shell wrapper is gone from <main>. */
.na-content { padding-block: var(--na-space-xl); }

/* Home: hero is the first thing, so no top gap under the header. */
body.home .na-main { padding-block: 0; }

/* ---------- Ticker ---------- */

.na-ticker {
  background: var(--na-ticker-bg);
  color: var(--na-ticker-ink);
  overflow: hidden;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.na-ticker__track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: na-ticker-scroll var(--na-ticker-speed, 40s) linear infinite;
}

.na-ticker:hover .na-ticker__track,
.na-ticker:focus-within .na-ticker__track {
  animation-play-state: paused;
}

.na-ticker__group {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
}

.na-ticker__item {
  display: inline-flex;
  align-items: center;
  padding: 0.49rem 0;
  font-size: 0.56rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Separator sits centered between two messages — equal space each side. */
.na-ticker__sep {
  display: inline-flex;
  align-items: center;
  margin: 0 1.4rem;
  flex: 0 0 auto;
}

.na-ticker .na-ticker__mark {
  height: 18px !important;
  max-height: 18px !important;
  width: auto !important;
  flex: 0 0 auto;
  opacity: 0.72;
  display: block;
}

@keyframes na-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* The ticker is a decorative marquee and is intended to always scroll,
   so it is not gated by the reduced-motion setting. */

/* ---------- Primary navigation ---------- */

.na-nav ul.menu {
  display: flex;
  align-items: center;
  gap: var(--na-space-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

.na-nav ul.menu li { margin: 0; }

.na-nav ul.menu a {
  font-family: var(--na-font-sans);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--na-ink-soft);
  text-decoration: none;
  padding: 0.35rem 0;
  border-bottom: 1px solid transparent;
  transition: color 150ms var(--na-ease), border-color 150ms var(--na-ease);
}
.na-nav ul.menu a:hover {
  color: var(--na-ink);
  border-bottom-color: var(--na-ink);
}

/* Page you're currently on reads darker — no underline. */
.na-nav ul.menu .current-menu-item > a,
.na-nav ul.menu .is-current > a {
  color: #000;
  font-weight: 650;
  border-bottom-color: transparent;
}

.na-header__actions {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

/* Mobile toggle — hidden on desktop. */
.na-navtoggle {
  display: none;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--na-rule-strong);
  border-radius: var(--na-radius);
  background: var(--na-paper-white);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.na-navtoggle__bars,
.na-navtoggle__bars::before,
.na-navtoggle__bars::after {
  display: block;
  width: 16px;
  height: 2px;
  background: var(--na-ink);
  position: relative;
}
.na-navtoggle__bars::before,
.na-navtoggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
}
.na-navtoggle__bars::before { top: -5px; }
.na-navtoggle__bars::after  { top: 5px; }

@media (max-width: 900px) {
  .na-navtoggle { display: inline-flex; }

  /* Nav becomes a drop-down panel under the header bar. */
  .na-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 90;
    display: none;
    background: var(--na-paper-white);
    border-top: 1px solid var(--na-rule);
    border-bottom: 1px solid var(--na-rule);
    box-shadow: 0 18px 40px -22px rgba(28, 28, 26, 0.4);
  }
  .na-nav.is-open { display: block; }

  .na-nav ul.menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem var(--na-space-md);
  }
  .na-nav ul.menu li { border-bottom: 1px solid var(--na-rule); }
  .na-nav ul.menu li:last-child { border-bottom: 0; }
  .na-nav ul.menu a {
    display: block;
    padding: 1rem 0;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: none;
    border-bottom: 0;
  }
}

/* ---------- Home hero ---------- */

.na-hero {
  background: var(--na-paper);
  border-bottom: 1px solid var(--na-rule);
  overflow: hidden;
}

.na-hero__inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: var(--na-space-lg);
  min-height: clamp(478px, 66vh, 700px);
  padding-block: var(--na-space-xl);
}

.na-hero__eyebrow {
  font-family: var(--na-font-hero);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--na-ink-faint);
  margin: 0 0 var(--na-space-md);
}

/* Nudge the whole copy block up a touch so it reads slightly above
   the optical center, with the button hanging just beneath it. */
.na-hero__copy { transform: translateY(-14px); }

.na-hero__headline {
  font-family: var(--na-font-hero);
  font-weight: 600;
  font-size: clamp(2.55rem, 5.7vw, 4.35rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--na-ink);
  margin: 0 0 var(--na-space-md);
  max-width: 12ch;
}

.na-hero__subtext {
  font-family: var(--na-font-hero);
  font-weight: 500;
  font-size: 1.36rem;
  line-height: 1.55;
  color: var(--na-ink-soft);
  margin: 0;
  max-width: 44ch;
}

/* CTA — solid ink, uppercase, matches the gate/ticker type treatment. */
.na-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.75rem;
  margin-top: var(--na-space-lg);
}

.na-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem 1.9rem;
  min-height: 3.1rem;
  line-height: 1;
  background: var(--na-ink);
  color: var(--na-paper);
  font-family: var(--na-font-sans);
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  font-family: var(--na-font-hero);
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--na-ink);
  border-radius: var(--na-radius);
  transition: background-color 200ms var(--na-ease),
              color 200ms var(--na-ease),
              border-color 200ms var(--na-ease);
}

/* Secondary — same scale, its own colour and its own width. */
.na-hero__cta--alt {
  background: transparent;
  color: var(--na-ink);
  border-color: var(--na-rule-strong);
}
.na-hero__cta--alt:hover {
  background: var(--na-ink);
  color: var(--na-paper);
  border-color: var(--na-ink);
}

.na-hero__cta:hover { background: var(--na-ink); color: var(--na-paper); }


/* Stage holds the vial. The float and the tilt are separate layers:
   the wrapper animates position (up/down), the image holds the tilt,
   so the two never fight each other. */
.na-hero__stage {
  display: flex;
  justify-content: center;
  align-items: center;
}

.na-hero__vial {
  width: auto;
  max-height: clamp(486px, 66vh, 744px);
  transform: rotate(9deg);
  filter: drop-shadow(0 34px 46px rgba(28, 28, 26, 0.28));
  animation: na-hero-float 5.4s ease-in-out infinite;
  transform-origin: center;
}

@keyframes na-hero-float {
  0%,
  100% { transform: rotate(9deg) translateY(0); }
  50%  { transform: rotate(9deg) translateY(-18px); }
}

/* Mobile: same two-column layout as desktop (text left, vial right),
   just scaled down. Grid columns, alignment, and the copy nudge are
   inherited from the desktop rules above — only sizes shrink here. */
@media (max-width: 820px) {
  .na-hero__inner {
    gap: var(--na-space-sm);
    min-height: clamp(240px, 40vh, 380px);
    padding-block: var(--na-space-md);
  }
  .na-hero__headline { font-size: clamp(1.4rem, 6vw, 2.5rem); }
  .na-hero__subtext { font-size: clamp(0.85rem, 3.4vw, 1.15rem); }
  .na-hero__actions { margin-top: var(--na-space-md); gap: 0.75rem; }
  .na-hero__cta {
    padding: 0.75rem 1.1rem;
    font-size: 0.62rem;
    max-width: 100%;
  }
  .na-hero__vial { max-height: clamp(170px, 32vh, 300px); }
}

/* The hero vial float is intended to always run, so it is not gated
   by the reduced-motion setting (see the exemption in the global
   reduced-motion block below). */

/* ---------- Home catalog ---------- */

.na-catalog {
  background: var(--na-paper-white);
  padding-block: var(--na-space-xl);
}

.na-catalog__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--na-space-md);
  margin-bottom: var(--na-space-lg);
}

.na-catalog__eyebrow {
  font-size: 0.6875rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--na-ink-faint);
  margin: 0 0 0.5rem;
}

.na-catalog__title {
  font-family: var(--na-font-serif);
  font-weight: 400;
  font-size: var(--na-step-3);
  line-height: 1;
  color: var(--na-ink);
  margin: 0;
}

.na-catalog__all {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.4rem;
  border: 1px solid var(--na-rule-strong);
  border-radius: var(--na-radius);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--na-ink);
  text-decoration: none;
  transition: background-color 160ms var(--na-ease),
              color 160ms var(--na-ease),
              border-color 160ms var(--na-ease);
}

.na-catalog__all:hover {
  background: var(--na-ink);
  color: var(--na-paper);
  border-color: var(--na-ink);
}

.na-catalog__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--na-space-md);
}

@media (max-width: 900px) {
  .na-catalog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .na-catalog__head { flex-wrap: wrap; }
}

/* ---------- Product card ---------- */

.na-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--na-rule);
  border-radius: var(--na-radius);
  background: var(--na-paper-white);
  overflow: hidden;
  cursor: pointer;
}

.na-card {
  transition: transform 180ms var(--na-ease), box-shadow 180ms var(--na-ease);
}
.na-card:hover {
  transform: translateY(-3px) scale(1.012);
  box-shadow: 0 16px 34px -18px rgba(28, 28, 26, 0.45);
}

.na-card__media {
  position: relative;
  display: block;
  background: var(--na-paper-white);
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.na-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.na-card__tag,
.na-card__badge {
  position: absolute;
  top: 0.7rem;
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.3rem 0.5rem;
  border-radius: 1px;
  z-index: 1;
}

.na-card__tag {
  left: 0.7rem;
  background: rgba(28, 28, 26, 0.86);
  color: var(--na-paper-white);
}

.na-card__badge {
  right: 0.7rem;
  background: var(--na-ink);
  color: var(--na-paper);
}


.na-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.75rem;
  background: var(--na-ink);
  color: var(--na-paper);
  padding: var(--na-space-md);
}

.na-card__title {
  font-family: var(--na-font-sans);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
  margin: 0;
}

.na-card__title a { color: var(--na-paper); text-decoration: none; }
.na-card__title a:hover { text-decoration: underline; }

.na-card__price {
  font-size: 1.05rem;
  color: var(--na-paper);
}

.na-card__price del {
  color: var(--na-footer-faint);
  font-size: 0.82em;
  margin-right: 0.4rem;
}

.na-card__price ins { text-decoration: none; }

.na-card__cta { margin-top: auto; }

.na-card__cta .button,
.na-card__oos {
  /* All three states render at exactly the same size. */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3rem;
  line-height: 1;
  box-sizing: border-box;
}

.na-card__cta .button {
  text-align: center;
  background: #fff;
  color: #000;
  border: 0;
  border-radius: var(--na-radius);
  padding: 0.85rem 1rem;
  font-family: var(--na-font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms var(--na-ease);
}

.na-card__cta .button:hover { background: var(--na-paper-deep); }

/* Variable "Select options" — body font, sentence case, with a +
   affordance so it reads as a menu that opens. Simple "Add to cart"
   is unaffected. */
.na-card__cta .button.product_type_variable {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-family: var(--na-font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: #000;
}
.na-card__cta .button.product_type_variable::before {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 10px;
  background:
    linear-gradient(currentColor, currentColor) 0 0    / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) 0 50%  / 72%  2px no-repeat,
    linear-gradient(currentColor, currentColor) 0 100% / 46%  2px no-repeat;
}

/* Simple products get a + instead. */
.na-card__cta .button.product_type_simple::before {
  content: "+";
  flex: 0 0 auto;
  font-size: 1.05em;
  font-weight: 700;
  line-height: 1;
}
.na-card__cta .button.product_type_simple {
  gap: 0.4rem;
}

/* WooCommerce's own .woocommerce a.button styles outrank ours inside the
   catalog page wrapper, which made those buttons grey and knocked the
   label off-centre. These higher-specificity rules keep every card
   button identical to the home page. */
.woocommerce .na-card__cta .button,
.woocommerce .na-card__cta a.button,
.woocommerce .na-card__cta button.button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3rem;
  line-height: 1;
  box-sizing: border-box;
  background: #fff;
  color: #000;
  border: 0;
  border-radius: var(--na-radius);
  padding: 0.85rem 1rem;
  margin: 0;
  font-family: var(--na-font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
}
.woocommerce .na-card__cta .button:hover,
.woocommerce .na-card__cta a.button:hover,
.woocommerce .na-card__cta button.button:hover {
  background: var(--na-paper-deep);
  color: #000;
}
.woocommerce .na-card__cta .button.product_type_variable,
.woocommerce .na-card__cta .button.product_type_simple {
  gap: 0.4rem;
}

/* Brief confirmation tick after adding — clears itself. */
.na-card__cta .button.na-added::after {
  content: "\2713" !important;
  margin-left: 0.4rem;
  font-weight: 700;
}
/* WooCommerce's own sticky tick is suppressed — but never ours. */
.na-card__cta .button.added:not(.na-added)::after { content: none !important; }

/* Out of stock — grayed, non-actionable button. */
.na-card__oos {
  text-align: center;
  background: rgba(247, 246, 242, 0.08);
  color: rgba(247, 246, 242, 0.5);
  border-radius: var(--na-radius);
  padding: 0.85rem 1rem;
  font-family: var(--na-font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: default;
}

.na-card__cta .added_to_cart {
  display: block;
  text-align: center;
  margin-top: 0.5rem;
  color: var(--na-paper);
  font-size: 0.7rem;
  text-decoration: underline;
}

/* ---------- Quick-add panel ---------- */

html.na-qa-open,
html.na-qa-open body { overflow: hidden; }

.na-qa-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.na-qa-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28, 28, 26, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: opacity 520ms var(--na-ease);
}

.na-qa-panel {
  position: relative;
  width: min(100%, 520px);
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  background: var(--na-paper-white);
  border: 1px solid var(--na-rule);
  border-radius: var(--na-radius);
  box-shadow: 0 30px 80px -20px rgba(28, 28, 26, 0.5);
  padding: 1.5rem;
  animation: na-qa-rise 520ms var(--na-ease) both;
  transition: opacity 520ms var(--na-ease), transform 520ms var(--na-ease);
}

/* Smooth slide-away on close. */
.na-qa-overlay.is-closing .na-qa-backdrop { opacity: 0; }
.na-qa-overlay.is-closing .na-qa-panel {
  animation: none;
  opacity: 0;
  transform: translateY(100vh);
}

@keyframes na-qa-rise {
  from { opacity: 0; transform: translateY(100vh); }
  to   { opacity: 1; transform: translateY(0); }
}

.na-qa-close {
  position: absolute;
  top: 0.75rem;
  right: 0.85rem;
  background: none;
  border: 0;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--na-ink-faint);
}
.na-qa-close:hover { color: var(--na-ink); }

.na-qa-head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding-right: 2rem;
}
.na-qa-head img {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border: 1px solid var(--na-rule);
  border-radius: var(--na-radius);
  flex: 0 0 auto;
}
.na-qa-title {
  font-family: var(--na-font-sans);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--na-ink);
  line-height: 1.25;
}
.na-qa-price { color: var(--na-ink-soft); font-size: 0.9rem; margin-top: 2px; }
.na-qa-price del { color: var(--na-ink-faint); margin-right: 0.3rem; }
.na-qa-price ins { text-decoration: none; }

.na-qa-hint {
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--na-ink-faint);
  margin: 1.4rem 0 0.4rem;
  border-top: 1px solid var(--na-rule);
  padding-top: 1.1rem;
}

.na-qa-list { list-style: none; margin: 0; padding: 0; }

.na-qa-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 0.9rem;
  margin: 0 -0.9rem;
  border-bottom: 1px solid var(--na-rule);
}
.na-qa-row:last-child { border-bottom: 0; }
.na-qa-row.is-out { opacity: 0.5; }

.na-qa-row.is-clickable { cursor: pointer; transition: background-color 140ms var(--na-ease); }
.na-qa-row.is-clickable:hover,
.na-qa-row.is-clickable:focus-visible { background: var(--na-paper-deep); outline: none; }
.na-qa-row.is-loading { opacity: 0.6; pointer-events: none; }

.na-qa-size { flex: 1; font-weight: 600; color: var(--na-ink); }
.na-qa-vprice { color: var(--na-ink-soft); font-size: 0.95rem; white-space: nowrap; }
.na-qa-vprice del { color: var(--na-ink-faint); margin-right: 0.3rem; }
.na-qa-vprice ins { text-decoration: none; }

.na-qa-add {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 1px solid var(--na-rule-strong);
  border-radius: var(--na-radius);
  background: var(--na-paper-white);
  color: var(--na-ink);
  font-size: 1.15rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 140ms var(--na-ease),
              color 140ms var(--na-ease),
              border-color 140ms var(--na-ease);
}
.na-qa-row.is-clickable:hover .na-qa-add,
.na-qa-row.is-clickable:focus-visible .na-qa-add {
  background: var(--na-ink);
  color: var(--na-paper);
  border-color: var(--na-ink);
}

/* ---------- Header cart ---------- */

.na-header__actions { flex: 0 0 auto; }

.na-header__cart {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.8rem;
  background: var(--na-ink);
  color: var(--na-paper);
  border-radius: var(--na-radius);
  text-decoration: none;
  font-size: 0.8rem;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 160ms var(--na-ease);
}
.na-header__cart:hover { background: #000; color: var(--na-paper); }
.na-header__cart-icon { display: block; }

.na-header__cart-count {
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.32rem;
  border-radius: 2px;
  background: var(--na-paper);
  color: var(--na-ink);
  font-size: 0.62rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.na-header__cart-total { font-weight: 500; letter-spacing: 0.02em; }

/* ---------- Out of stock (quick-add panel) ---------- */

.na-qa-oos {
  flex: 0 0 auto;
  color: var(--na-danger);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  white-space: nowrap;
}

/* ---------- Add-to-cart toast ---------- */

.na-toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%) translateY(14px);
  z-index: 100001;
  background: var(--na-ink);
  color: var(--na-paper);
  padding: 0.85rem 1.5rem;
  border-radius: var(--na-radius);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  box-shadow: 0 20px 50px -15px rgba(28, 28, 26, 0.5);
  opacity: 0;
  transition: opacity 240ms var(--na-ease), transform 240ms var(--na-ease);
  pointer-events: none;
}
.na-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Shop / catalog archive — bare grid page on a mid-tone background so
   the cards (white image area + near-black panel) stay distinct. */
body.post-type-archive-product,
body.tax-product_cat,
body.tax-product_tag {
  background: var(--na-shop-bg);
}

.na-shop { padding-block: 0; }

/* Launch-sale message above the catalog grid. */
/* Tighter, still symmetric: same gap above (page padding) as below. */
body.post-type-archive-product .na-content,
body.tax-product_cat .na-content,
body.tax-product_tag .na-content {
  padding-block: var(--na-space-md);
}

/* No light outline around the cards on the dark catalog background —
   the bright image area is what defines each card. */
body.post-type-archive-product .na-card,
body.tax-product_cat .na-card,
body.tax-product_tag .na-card {
  border-color: transparent;
}

.na-shop__promo {
  text-align: center;
  margin: 0 0 var(--na-space-lg);
  padding-bottom: var(--na-space-md);
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}
.na-shop__promo-title {
  font-family: var(--na-font-sans);
  font-weight: 550;
  font-size: 1.96rem;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: #fff;
  margin: 0 0 0.6rem;
}
.na-shop__promo-sub {
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 auto;
  max-width: 46ch;
}

/* ---------- Product page (single) ---------- */

.na-pdp__crumbs {
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--na-ink-faint);
  margin-bottom: var(--na-space-lg);
}
.na-pdp__crumbs a { color: var(--na-ink-soft); text-decoration: none; }
.na-pdp__crumbs a:hover { color: var(--na-ink); }

.na-pdp .product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--na-space-xl);
  align-items: start;
  margin: 0;
}

/* Grid children must be allowed to shrink, otherwise WooCommerce's
   gallery (which sets its own inline widths) overflows its column and
   sits invisibly on top of the buy box — swallowing clicks on the
   Add to cart button. */
.na-pdp .product > * { min-width: 0; max-width: 100%; }

/* Keep the buy box above the gallery in stacking order as a belt-and-
   braces guard, and stop any gallery overflow escaping its column. */
.na-pdp .product .summary { position: relative; z-index: 2; }
.na-pdp .product .woocommerce-product-gallery { position: relative; z-index: 1; overflow: hidden; }
.na-pdp .woocommerce-product-gallery__wrapper { max-width: 100%; }
.na-pdp .woocommerce-product-gallery img { max-width: 100%; }

/* Left — image, full (no frame) */
.na-pdp .product .woocommerce-product-gallery {
  width: auto !important;
  float: none;
  margin: 0;
}
.na-pdp .woocommerce-product-gallery__wrapper { margin: 0; }
.na-pdp .woocommerce-product-gallery img { width: 100%; height: auto; display: block; }

/* Right — summary */
.na-pdp .product .summary {
  width: auto !important;
  float: none;
  margin: 0;
}

/* Remove WooCommerce's default corner "Sale!" badge. */
.na-pdp .onsale { display: none !important; }

/* Cursors — force every PDP element off the "not-allowed" circle
   (WooCommerce sets it on the disabled variable-product button and it
   inherits onto the price/labels), then set pointer/text on controls. */
.na-pdp,
.na-pdp * { cursor: auto !important; }
.na-pdp a,
.na-pdp button,
.na-pdp .button,
.na-pdp .single_add_to_cart_button,
.na-pdp .na-swatch,
.na-pdp select,
.na-pdp label,
.na-pdp .quantity,
.na-pdp .quantity *,
.na-pdp .reset_variations { cursor: pointer !important; }
.na-pdp input.qty,
.na-pdp input[type="number"],
.na-pdp input[type="text"] { cursor: text !important; }

/* Price is always ink black — cover every nested node so no accent
   or link colour (the yellow) can show through. */
.na-pdp .summary .price,
.na-pdp .summary .price *,
.na-pdp .single_variation .price,
.na-pdp .single_variation .price * { color: var(--na-ink) !important; }
.na-pdp .price del,
.na-pdp .price del * { color: var(--na-ink-faint) !important; }

/* Size options as clickable boxes (replaces the dropdown). */
.na-pdp .na-select-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}
.na-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 0.5rem;
}
.na-swatch {
  min-width: 84px;
  padding: 0.9rem 1.2rem;
  border: 1px solid var(--na-rule-strong);
  border-radius: var(--na-radius);
  background: var(--na-paper-white);
  color: var(--na-ink);
  font-size: 0.95rem;
  text-align: center;
  transition: border-color 140ms var(--na-ease),
              background-color 140ms var(--na-ease),
              color 140ms var(--na-ease);
}
.na-swatch:hover { border-color: var(--na-ink); }
.na-swatch.is-active {
  background: var(--na-ink);
  color: var(--na-paper);
  border-color: var(--na-ink);
}

.na-pdp__eyebrow {
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--na-ink-faint);
  margin: 0 0 0.85rem;
}

.na-pdp .product_title.entry-title {
  font-family: var(--na-font-sans);
  font-weight: 700;
  font-size: clamp(1.9rem, 3vw, 2.75rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--na-ink);
  margin: 0 0 1.25rem;
}

.na-pdp .product p.price,
.na-pdp .product .summary > .price {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--na-ink);
  margin: 0 0 1.6rem;
}
.na-pdp .price del { color: var(--na-ink-faint); font-size: 0.68em; margin-right: 0.45rem; opacity: 1; }
.na-pdp .price ins { text-decoration: none; font-weight: 600; }

.na-pdp .woocommerce-product-details__short-description {
  color: var(--na-ink-soft);
  line-height: 1.65;
  margin: 0 0 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--na-rule);
}
.na-pdp .woocommerce-product-details__short-description p { margin: 0; }

/* Variations */
.na-pdp .variations {
  width: 100%;
  margin: 0 0 1.75rem;
  border-collapse: collapse;
}
.na-pdp .variations tr { display: block; }
.na-pdp .variations th,
.na-pdp .variations td { display: block; text-align: left; padding: 0; }
.na-pdp .variations th.label {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--na-ink-faint);
  margin-bottom: 0.5rem;
}
.na-pdp .variations td.value { margin-bottom: 1rem; }
.na-pdp .variations select {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--na-rule-strong);
  border-radius: var(--na-radius);
  background: var(--na-paper-white);
  font-size: 0.95rem;
  color: var(--na-ink);
}
.na-pdp .reset_variations {
  display: inline-block;
  margin-top: 0.25rem;
  font-size: 0.72rem;
  color: var(--na-ink-soft);
  text-decoration: underline;
}

/* Selected-variation price — left-aligned as before, but sitting in
   the middle of the gap between the "Clear" link and the quantity box
   rather than hugging the quantity box. */
.na-pdp .single_variation {
  display: block;
  text-align: left;
  margin: 1.5rem 0;
}
.na-pdp .single_variation .price {
  font-size: 1.45rem;
  margin: 0;
  color: var(--na-ink);
}
.na-pdp .single_variation .woocommerce-variation-availability { margin: 0.4rem 0 0; }

/* Accepted payment methods under the add-to-cart button. */
.na-pdp__payments {
  margin: 0 0 1.75rem;
}
.na-pdp__payments img {
  width: auto;
  max-width: 100%;
  height: 50px;
  display: block;
  opacity: 0.9;
}

/* Quantity + add to cart — side by side */
.na-pdp form.cart { margin: 0 0 1.75rem; }
.na-pdp form.cart::after { content: ""; display: block; clear: both; }
.na-pdp form.cart:not(.variations_form),
.na-pdp .woocommerce-variation-add-to-cart {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.na-pdp .quantity {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin: 0;
  border: 1px solid var(--na-rule-strong);
  border-radius: var(--na-radius);
  overflow: hidden;
}
.na-pdp .quantity .qty {
  width: 64px;
  text-align: center;
  border: 0;
  padding: 0.95rem 0.25rem;
  font-size: 1rem;
  background: var(--na-paper-white);
  color: var(--na-ink);
  -moz-appearance: textfield;
  appearance: textfield;
}
/* Hide the browser's native up/down spinner arrows. */
.na-pdp .quantity .qty::-webkit-outer-spin-button,
.na-pdp .quantity .qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Minus / plus stepper buttons. */
.na-pdp .na-qty-btn {
  flex: 0 0 auto;
  width: 44px;
  align-self: stretch;
  border: 0;
  background: var(--na-paper-white);
  color: var(--na-ink-soft);
  font-size: 1.1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 140ms var(--na-ease), color 140ms var(--na-ease);
}
.na-pdp .na-qty-btn:hover { background: var(--na-paper-deep); color: var(--na-ink); }
.na-pdp .na-qty-btn--minus { border-right: 1px solid var(--na-rule); }
.na-pdp .na-qty-btn--plus { border-left: 1px solid var(--na-rule); }
.na-pdp form.cart .button,
.na-pdp form.cart .single_add_to_cart_button,
.na-pdp form.cart .single_add_to_cart_button.disabled,
.na-pdp form.cart .single_add_to_cart_button:disabled,
.na-pdp form.cart .single_add_to_cart_button.wc-variation-selection-needed,
.na-pdp form.cart .single_add_to_cart_button.wc-variation-is-unavailable {
  flex: 0 1 auto;
  width: auto;
  min-width: 14rem;
  max-width: 100%;
  background: var(--na-ink) !important;
  color: var(--na-paper) !important;
  border: 0 !important;
  border-radius: var(--na-radius);
  padding: 1.1rem 2.25rem;
  font-family: var(--na-font-sans);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  transition: background-color 160ms var(--na-ease), opacity 160ms var(--na-ease);
}
.na-pdp form.cart .button:hover,
.na-pdp form.cart .single_add_to_cart_button:hover { background: #000 !important; }

/* Disabled (no size chosen yet / unavailable) — same palette, muted. */
.na-pdp form.cart .single_add_to_cart_button.disabled,
.na-pdp form.cart .single_add_to_cart_button:disabled,
.na-pdp form.cart .single_add_to_cart_button.wc-variation-selection-needed,
.na-pdp form.cart .single_add_to_cart_button.wc-variation-is-unavailable {
  opacity: 0.45;
}

/* Meta */
.na-pdp .product_meta {
  font-size: 0.72rem;
  color: var(--na-ink-faint);
  border-top: 1px solid var(--na-rule);
  padding-top: 1.25rem;
  line-height: 1.9;
}
.na-pdp .product_meta a { color: var(--na-ink-soft); }

/* Tabs + related — full width below */
.na-pdp .woocommerce-tabs,
.na-pdp .related.products,
.na-pdp .upsells.products { grid-column: 1 / -1; }

.na-pdp .woocommerce-tabs {
  margin-top: var(--na-space-xl);
  border-top: 1px solid var(--na-rule);
  padding-top: var(--na-space-lg);
}
.na-pdp .woocommerce-tabs ul.tabs {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.na-pdp .woocommerce-tabs ul.tabs::before { display: none; }
.na-pdp .woocommerce-tabs ul.tabs li { margin: 0; padding: 0; background: none; border: 0; }
.na-pdp .woocommerce-tabs ul.tabs li a {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--na-ink-faint);
  text-decoration: none;
  padding: 0 0 0.4rem;
  border-bottom: 2px solid transparent;
}
.na-pdp .woocommerce-tabs ul.tabs li.active a { color: var(--na-ink); border-bottom-color: var(--na-ink); }
.na-pdp .woocommerce-tabs .panel { color: var(--na-ink-soft); line-height: 1.7; }
.na-pdp .woocommerce-tabs h2 { font-family: var(--na-font-serif); font-weight: 400; color: var(--na-ink); }

.na-pdp .related.products > h2,
.na-pdp .upsells.products > h2 {
  font-family: var(--na-font-serif);
  font-weight: 400;
  color: var(--na-ink);
  margin-top: var(--na-space-xl);
}

/* Mobile — single column */
@media (max-width: 820px) {
  .na-pdp .product { grid-template-columns: 1fr; gap: var(--na-space-lg); }

  /* Tighten the blank gap between the agreement and Related Research. */
  .na-agree { margin-bottom: 0; }
  .na-related {
    margin-top: var(--na-space-md);
    padding-top: var(--na-space-md);
  }
}

/* Delivery estimate under the add-to-cart button. */
.na-delivery {
  font-size: 0.82rem;
  color: var(--na-ink-soft);
  margin: 0 0 1.25rem;
}
.na-delivery__label { font-weight: 700; color: var(--na-ink); }
.na-delivery__date { font-weight: 700; color: var(--na-ink); }
.na-delivery__cta { color: var(--na-ink-soft); }

/* Purchase & responsibility agreement.
   Only the opening statement is framed; the rest is plain text. */
.na-agree { margin: 0 0 var(--na-space-md); }

.na-agree__box {
  border: 1px solid var(--na-rule);
  border-left: 3px solid var(--na-ink);
  background: var(--na-paper);
  padding: var(--na-space-md);
  margin: 0 0 var(--na-space-lg);
}

.na-agree__title {
  font-family: var(--na-font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--na-ink);
  margin: 0 0 0.75rem;
}

.na-agree__heading {
  font-family: var(--na-font-sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--na-ink);
  margin: 1.5rem 0 0.6rem;
}

.na-agree p {
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--na-ink-soft);
  margin: 0 0 0.75rem;
}
.na-agree__box p:last-child { margin-bottom: 0; }

/* Product details — each spec in its own small frame. */
.na-agree__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0 0 0.5rem;
}
.na-agree__spec {
  flex: 1 1 10rem;
  min-width: 0;
  border: 1px solid var(--na-rule);
  background: var(--na-paper-white);
  padding: 0.75rem 0.9rem;
}
.na-agree__spec-label {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--na-ink-faint);
  margin-bottom: 0.3rem;
}
.na-agree__spec-value {
  display: block;
  font-size: 0.9rem;
  color: var(--na-ink);
  font-weight: 500;
}

/* Related research — product page footer section. */
.na-related {
  grid-column: 1 / -1;
  margin-top: var(--na-space-xl);
  padding-top: var(--na-space-lg);
  border-top: 1px solid var(--na-rule);
}

.na-related__head { margin-bottom: var(--na-space-lg); }

.na-related__title {
  font-family: var(--na-font-serif);
  font-weight: 400;
  font-size: var(--na-step-2);
  line-height: 1.1;
  color: var(--na-ink);
  margin: 0;
}

/* Final backstop: no WooCommerce success banners on product or catalog
   pages, whatever adds them. Error notices are left alone. */
.single-product .woocommerce-message,
.single-product .woocommerce-info,
.post-type-archive-product .woocommerce-message,
.post-type-archive-product .woocommerce-info,
.home .woocommerce-message,
.home .woocommerce-info { display: none !important; }

/* WooCommerce's "View cart" link that gets appended after an add — the
   header cart and drawer cover this, so it isn't needed. */
.na-card__cta .added_to_cart,
.na-pdp .added_to_cart,
.woocommerce .added_to_cart.wc-forward { display: none !important; }

/* ---------- Slide-out cart drawer ---------- */

html.na-drawer-open,
html.na-drawer-open body { overflow: hidden; }

.na-drawer {
  position: fixed;
  inset: 0;
  z-index: 100050;
  visibility: hidden;
  pointer-events: none;
}
.na-drawer.is-open {
  visibility: visible;
  pointer-events: auto;
}

.na-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28, 28, 26, 0.45);
  opacity: 0;
  transition: opacity 300ms var(--na-ease);
}
.na-drawer.is-open .na-drawer__backdrop { opacity: 1; }

.na-drawer__panel {
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--na-paper-white);
  box-shadow: -24px 0 60px -30px rgba(28, 28, 26, 0.55);
  transform: translateX(100%);
  transition: transform 340ms var(--na-ease);
}
.na-drawer.is-open .na-drawer__panel { transform: translateX(0); }

.na-drawer__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem var(--na-space-md);
  border-bottom: 1px solid var(--na-rule);
}
.na-drawer__title {
  font-family: var(--na-font-sans);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--na-ink);
  margin: 0;
}
.na-drawer__close {
  background: none;
  border: 0;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--na-ink-faint);
  cursor: pointer;
  padding: 0 0.15rem;
}
.na-drawer__close:hover { color: var(--na-ink); }

.na-drawer__inner {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Free-shipping progress */
.na-drawer__ship {
  flex: 0 0 auto;
  padding: 0.95rem var(--na-space-md) 0.85rem;
  border-bottom: 1px solid var(--na-rule);
  background: var(--na-paper);
}
.na-drawer__ship-text {
  font-size: 0.78rem;
  color: var(--na-ink-soft);
  margin: 0 0 0.55rem;
}
.na-drawer__ship-text .amount { font-weight: 700; color: var(--na-ink); }
.na-drawer__ship-track {
  height: 6px;
  border-radius: 999px;
  background: var(--na-rule);
  overflow: hidden;
}
.na-drawer__ship-fill {
  height: 100%;
  background: var(--na-ink);
  border-radius: 999px;
  transition: width 420ms var(--na-ease);
}

/* Upsell */
.na-drawer__upsell {
  flex: 0 0 auto;
  padding: var(--na-space-md);
  border-top: 1px solid var(--na-rule);
}
.na-drawer__upsell-head {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--na-ink-faint);
  margin: 0 0 0.7rem;
}
.na-drawer__upsell-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.na-drawer__upsell-thumb {
  flex: 0 0 auto;
  width: 46px;
  border: 1px solid var(--na-rule);
  border-radius: var(--na-radius);
  overflow: hidden;
  background: var(--na-paper);
}
.na-drawer__upsell-thumb img { width: 100%; height: auto; display: block; }
.na-drawer__upsell-detail { flex: 1 1 auto; min-width: 0; }
.na-drawer__upsell-name {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--na-ink);
  margin: 0 0 0.1rem;
  line-height: 1.3;
}
.na-drawer__upsell-price {
  font-size: 0.8rem;
  color: var(--na-ink-soft);
  margin: 0;
}
.na-drawer__upsell-price del { color: var(--na-ink-faint); margin-right: 0.25rem; }
.na-drawer__upsell-price ins { text-decoration: none; }
.na-drawer__upsell-add {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.3rem;
  padding: 0 1rem;
  background: var(--na-paper-white);
  color: var(--na-ink);
  border: 1px solid var(--na-rule-strong);
  border-radius: var(--na-radius);
  font-family: var(--na-font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms var(--na-ease), color 150ms var(--na-ease);
}
.na-drawer__upsell-add:hover { background: var(--na-ink); color: var(--na-paper); }

/* Items */
.na-drawer__items {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;   /* the slide-out must not create a scrollbar */
  list-style: none;
  margin: 0;
  padding: 0 var(--na-space-md);
}
.na-drawer__item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--na-rule);
  overflow: hidden;
  transition: transform 260ms var(--na-ease),
              opacity 220ms var(--na-ease),
              max-height 280ms var(--na-ease),
              padding 280ms var(--na-ease);
}
/* Slides away to the right and collapses, so the items below glide up. */
.na-drawer__item.is-busy { opacity: 0.55; pointer-events: none; }

/* Included bonus line — reads as an extension of the item above,
   not as its own removable product. */
.na-drawer__item--free {
  position: relative;
  margin-top: -1px;
  padding-top: 0.65rem;
  padding-left: 1.35rem;
  border-top: 0;
}
/* Connector: a short elbow tying it to the line above. */
.na-drawer__item--free::before {
  content: "";
  position: absolute;
  left: 0.35rem;
  top: -0.55rem;
  bottom: 50%;
  width: 10px;
  border-left: 1px solid var(--na-rule-strong);
  border-bottom: 1px solid var(--na-rule-strong);
  border-bottom-left-radius: 6px;
}
.na-drawer__item--free .na-drawer__thumb { width: 46px; opacity: 0.9; }
.na-drawer__item--free .na-drawer__name { font-size: 0.85rem; }

.na-drawer__free-qty {
  display: inline-block;
  margin-right: 0.15rem;
  font-weight: 700;
  color: var(--na-ink);
}

.na-drawer__free-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.45rem;
  border: 1px solid var(--na-rule-strong);
  border-radius: var(--na-radius);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--na-ink);
}
.na-drawer__price--free { color: var(--na-ink-faint); }

/* Plugins can inject their own coloured markup (green "you save" text,
   badges) into the cart price/name filters. Inside the drawer, force it
   to follow the theme instead. */
.na-drawer__name *,
.na-drawer__meta *,
.na-drawer__price *,
.na-drawer__line *,
.na-drawer__row * {
  color: inherit !important;
  background: none !important;
  font-family: inherit !important;
}
.na-drawer__price del { color: var(--na-ink-faint) !important; }
.na-drawer__item.is-removing {
  transform: translateX(110%);
  opacity: 0;
  max-height: 0 !important;
  padding-top: 0;
  padding-bottom: 0;
  border-bottom-color: transparent;
}
.na-drawer__item:last-child { border-bottom: 0; }
/* No divider between a paid line and the bonus attached to it. */
.na-drawer__item:has(+ .na-drawer__item--free) { border-bottom-color: transparent; }

.na-drawer__thumb {
  flex: 0 0 auto;
  width: 62px;
  border: 1px solid var(--na-rule);
  border-radius: var(--na-radius);
  overflow: hidden;
  background: var(--na-paper);
}
.na-drawer__thumb img { width: 100%; height: auto; display: block; }

.na-drawer__detail { flex: 1 1 auto; min-width: 0; }
.na-drawer__name {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--na-ink);
  margin: 0 0 0.2rem;
  line-height: 1.3;
}
.na-drawer__name a { color: inherit; text-decoration: none; }
.na-drawer__name a:hover { text-decoration: underline; }

.na-drawer__meta {
  font-size: 0.74rem;
  color: var(--na-ink-faint);
  margin: 0 0 0.35rem;
}
.na-drawer__meta p { margin: 0; }

.na-drawer__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0;
  font-size: 0.85rem;
  color: var(--na-ink-soft);
}
.na-drawer__price { font-weight: 600; color: var(--na-ink); white-space: nowrap; }

.na-drawer__stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--na-rule-strong);
  border-radius: var(--na-radius);
  overflow: hidden;
}
.na-drawer__step {
  width: 26px;
  height: 26px;
  border: 0;
  background: var(--na-paper-white);
  color: var(--na-ink-soft);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 140ms var(--na-ease), color 140ms var(--na-ease);
}
.na-drawer__step:hover { background: var(--na-paper-deep); color: var(--na-ink); }
.na-drawer__qty {
  min-width: 26px;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--na-ink);
}

/* Header cart is a button now — keep it looking identical. */
button.na-header__cart {
  border: 0;
  font-family: inherit;
  cursor: pointer;
}

.na-drawer__remove {
  flex: 0 0 auto;
  background: none;
  border: 0;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--na-ink-faint);
  cursor: pointer;
  padding: 0 0.1rem;
}
.na-drawer__remove:hover { color: var(--na-danger); }

/* Footer */
.na-drawer__foot {
  flex: 0 0 auto;
  padding: var(--na-space-md);
  border-top: 1px solid var(--na-rule);
  background: var(--na-paper);
}
.na-drawer__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--na-ink-soft);
  margin-bottom: 0.35rem;
}
.na-drawer__row--save { color: var(--na-ink-soft); }

.na-drawer__subtotal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--na-ink);
}
.na-drawer__subtotal-amt { font-size: 1.1rem; }
.na-drawer__note {
  font-size: 0.75rem;
  color: var(--na-ink-faint);
  margin: 0.35rem 0 1rem;
}
.na-drawer__checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.1rem;
  background: var(--na-ink);
  color: var(--na-paper);
  border-radius: var(--na-radius);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 180ms var(--na-ease);
}
.na-drawer__checkout:hover { background: #000; color: var(--na-paper); }

/* Empty state */
.na-drawer__empty {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  padding: var(--na-space-lg);
  text-align: center;
  color: var(--na-ink-soft);
}
.na-drawer__continue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.1rem;
  padding: 1rem 1.9rem;
  background: var(--na-ink);
  color: var(--na-paper);
  border: 1px solid var(--na-ink);
  border-radius: var(--na-radius);
  font-family: var(--na-font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 200ms var(--na-ease);
}
.na-drawer__continue:hover { background: #000; color: var(--na-paper); }

@media (max-width: 480px) {
  .na-drawer__panel { width: 100%; }
}

/* Motion preference must not disable the slide. */
@media (prefers-reduced-motion: reduce) {
  .na-drawer__panel { transition-duration: 340ms !important; }
  .na-drawer__backdrop { transition-duration: 300ms !important; }
  .na-drawer__item { transition-duration: 260ms !important; }
}

/* ---------- Display font coverage ----------
   Header nav, the home catalog heading, and every product card.
   The footer and the policy pages are deliberately excluded. */

.na-nav ul.menu a,
.na-catalog__eyebrow,
.na-catalog__title,
.na-related__title,
.na-card__tag,
.na-card__title,
.na-card__title a,
.na-card__price,
.na-card__cta .button,
.woocommerce .na-card__cta .button,
.na-card__oos {
  font-family: var(--na-font-hero) !important;
}

/* A touch more weight so the rounder face still reads solid. */
.na-card__title { font-weight: 700; }
.na-card__price { font-weight: 600; }
.na-catalog__title,
.na-related__title { font-weight: 700; }

/* ---------- Footer ---------- */

.na-footer {
  background: var(--na-footer-bg);
  color: var(--na-footer-soft);
  padding-block: var(--na-space-xl) var(--na-space-lg);
  font-size: 0.875rem;
}

.na-footer a {
  color: var(--na-footer-soft);
  text-decoration: none;
  transition: color 160ms var(--na-ease);
}

.na-footer a:hover { color: var(--na-footer-ink); }

.na-footer :focus-visible { outline-color: var(--na-footer-ink); }

/* Top: brand blurb + two link columns + contact */
.na-footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr 1.2fr;
  gap: var(--na-space-lg);
  align-items: start;
}

.na-footer__logo { margin-bottom: var(--na-space-md); }
.na-footer__logo img,
.na-footer__logo svg { max-height: 64px; width: auto; }

/* The bundled shield is drawn in ink — invert it on the dark surface. */
.na-footer__logo svg { filter: invert(1); }

.na-footer__logo-text {
  font-family: var(--na-font-serif);
  font-size: var(--na-step-2);
  color: var(--na-footer-ink);
}

.na-footer__blurb {
  margin: 0;
  line-height: 1.7;
  max-width: 42ch;
}

.na-footer__heading {
  font-family: var(--na-font-serif);
  font-size: var(--na-step-1);
  font-weight: 400;
  color: var(--na-footer-ink);
  margin: 0 0 var(--na-space-md);
}

.na-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.625rem;
}

.na-footer__contact { display: grid; gap: 0.5rem; }
.na-footer__contact p { margin: 0; }
.na-footer__contact address { font-style: normal; line-height: 1.6; }

/* Disclaimer */
.na-footer__rule {
  border: 0;
  border-top: 1px solid var(--na-footer-rule);
  margin: var(--na-space-xl) 0 var(--na-space-md);
}

.na-footer__disclaimer-label {
  font-size: 0.6875rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--na-footer-ink);
  text-align: center;
  margin: 0 0 var(--na-space-lg);
}

.na-footer__disclaimer p {
  margin: 0 0 var(--na-space-md);
  line-height: 1.7;
  color: var(--na-footer-soft);
}

/* The acknowledgement of risk — set small, uppercase, centered.
   It reads as a signed term, not as body copy. */
.na-footer__risk {
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.9;
  color: var(--na-footer-faint);
  text-align: center;
  max-width: 92ch;
  margin-inline: auto;
}

.na-footer__legal {
  border-top: 1px solid var(--na-footer-rule);
  margin-top: var(--na-space-lg);
  padding-top: var(--na-space-md);
  font-size: 0.75rem;
  color: var(--na-footer-faint);
  display: flex;
  justify-content: space-between;
  gap: var(--na-space-md);
  flex-wrap: wrap;
}

.na-footer__legal p { margin: 0; }

@media (max-width: 900px) {
  .na-footer__top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .na-footer__top { grid-template-columns: 1fr; gap: var(--na-space-md); }
  .na-footer__risk { text-align: left; }
}

/* ============================================================
   4. UTILITY
   ============================================================ */

.na-eyebrow {
  font-size: 0.6875rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--na-ink-faint);
  margin: 0;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  /* Exception: the decorative ticker is meant to scroll regardless. */
  .na-ticker__track {
    animation-duration: var(--na-ticker-speed, 40s) !important;
  }

  /* Exception: the hero vial float is meant to run regardless. */
  .na-hero__vial {
    animation-duration: 5.4s !important;
  }

  /* Exception: the quick-add panel keeps its open/close slide. */
  .na-qa-panel {
    animation-duration: 520ms !important;
    transition-duration: 520ms !important;
  }
  .na-qa-backdrop {
    transition-duration: 520ms !important;
  }
}

/* ============================================================
   CHECKOUT — block checkout restyle (v0.9.96)
   Scoped under .wc-block-checkout (the WooCommerce Checkout
   block wrapper), so nothing leaks off the checkout page.
   Pure styling — no markup, no logic, no upsell injection.
   Targets standard WooCommerce block classes (WC 8.x–9.x).
   ============================================================ */

/* Overall shell width + breathing room */
.wc-block-checkout {
  max-width: var(--na-shell);
  margin-inline: auto;
  color: var(--na-ink-soft);
}

/* ---- Left column: framed, numbered step cards ---- */
.wc-block-checkout__main { counter-reset: na-step; }

.wc-block-checkout__main .wc-block-components-checkout-step {
  counter-increment: na-step;
  position: relative;
  background: var(--na-paper-white);
  border: 1px solid var(--na-rule);
  border-radius: var(--na-radius);
  padding: var(--na-space-md);
  margin-bottom: var(--na-space-md);
}

/* Number badge before each step title */
.wc-block-checkout__main .wc-block-components-checkout-step__title {
  font-family: var(--na-font-hero);
  font-size: var(--na-step-1);
  color: var(--na-ink);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.wc-block-checkout__main .wc-block-components-checkout-step__title::before {
  content: counter(na-step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  background: var(--na-ink);
  color: var(--na-paper);
  font-size: var(--na-step--1);
  border-radius: 4px;
  flex: 0 0 auto;
}
.wc-block-checkout__main .wc-block-components-checkout-step__description {
  color: var(--na-ink-faint);
  font-size: var(--na-step--1);
}

/* ---- Inputs (light touch — keep floating labels intact) ---- */
.wc-block-checkout .wc-block-components-text-input input,
.wc-block-checkout .wc-block-components-select select,
.wc-block-checkout .wc-block-components-combobox .components-form-token-field__input,
.wc-block-checkout .wc-block-components-text-input,
.wc-block-checkout .wc-block-components-combobox-control {
  border-radius: var(--na-radius);
}
.wc-block-checkout .wc-block-components-text-input input:focus,
.wc-block-checkout .wc-block-components-select select:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(28, 28, 26, 0.12);
}
.wc-block-checkout .wc-block-components-text-input.is-active label,
.wc-block-checkout .wc-block-components-checkout-step__label {
  color: var(--na-ink-soft);
}

/* ---- Right column: framed order summary ---- */
.wc-block-checkout__sidebar {
  background: var(--na-paper);
  border: 1px solid var(--na-rule);
  border-radius: var(--na-radius);
  padding: var(--na-space-md);
}
.wc-block-checkout__sidebar .wc-block-components-order-summary__button-text,
.wc-block-checkout__sidebar .wc-block-components-totals-item__label {
  color: var(--na-ink-soft);
}
.wc-block-checkout__sidebar .wc-block-components-order-summary-item__description .wc-block-components-product-name {
  font-family: var(--na-font-hero);
  color: var(--na-ink);
}
.wc-block-checkout__sidebar .wc-block-components-order-summary-item {
  border-top: 1px solid var(--na-rule);
  padding-top: var(--na-space-sm);
}

/* Subtotal / total emphasis */
.wc-block-checkout__sidebar .wc-block-components-totals-footer-item {
  border-top: 1px solid var(--na-rule-strong);
}
.wc-block-checkout__sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-family: var(--na-font-hero);
  font-size: var(--na-step-1);
  color: var(--na-ink);
}

/* Coupon panel */
.wc-block-checkout .wc-block-components-panel {
  border: 1px solid var(--na-rule);
  border-radius: var(--na-radius);
  padding: 0 var(--na-space-sm);
}

/* ---- Place order button → site solid ink ---- */
.wc-block-checkout .wc-block-components-checkout-place-order-button {
  background: var(--na-ink);
  color: var(--na-paper);
  border-radius: var(--na-radius);
  font-family: var(--na-font-hero);
  font-size: var(--na-step-0);
  letter-spacing: 0.01em;
  padding: 0.95rem 1.25rem;
  transition: background 160ms var(--na-ease);
}
.wc-block-checkout .wc-block-components-checkout-place-order-button:hover:not(:disabled) {
  background: #000;
}

/* Radio / shipping option rows */
.wc-block-checkout .wc-block-components-radio-control__option {
  border-radius: var(--na-radius);
}

/* Mobile: sidebar sits above/below fields — keep the card padding sane */
@media (max-width: 700px) {
  .wc-block-checkout__main .wc-block-components-checkout-step,
  .wc-block-checkout__sidebar {
    padding: var(--na-space-sm);
  }
}

/* ============================================================
   BACK-IN-STOCK NOTIFIER — plugin form restyle (v0.9.97)
   Overrides the "Back In Stock Notifier for WooCommerce" plugin's
   default Bootstrap-panel look so its "Notify me" form matches the
   store. Scoped under .cwginstock-subscribe-form, which exists only
   where the plugin renders — styling only, plugin functionality
   untouched. !important is needed to win over the plugin's own
   Bootstrap CSS, which loads after the theme stylesheet.
   ============================================================ */

.cwginstock-subscribe-form {
  max-width: 460px;
  margin: var(--na-space-md) 0;
  font-family: var(--na-font-sans);
}

/* Panel → clean card */
.cwginstock-subscribe-form .panel,
.cwginstock-subscribe-form .panel-primary {
  background: var(--na-paper-white) !important;
  border: 1px solid var(--na-rule) !important;
  border-radius: var(--na-radius) !important;
  box-shadow: none !important;
  overflow: hidden;
}

/* Heading bar */
.cwginstock-subscribe-form .panel-heading,
.cwginstock-subscribe-form .panel-primary > .panel-heading {
  background: var(--na-ink) !important;
  border-color: var(--na-ink) !important;
  color: var(--na-paper) !important;
  font-family: var(--na-font-hero) !important;
  font-size: var(--na-step-0) !important;
  padding: var(--na-space-sm) var(--na-space-md) !important;
}
.cwginstock-subscribe-form .panel-title {
  font-family: var(--na-font-hero) !important;
  color: var(--na-paper) !important;
  font-size: var(--na-step-0) !important;
  margin: 0 !important;
}

/* Body */
.cwginstock-subscribe-form .panel-body {
  padding: var(--na-space-md) !important;
  background: var(--na-paper-white) !important;
}

/* Inputs (Name + Email) */
.cwginstock-subscribe-form input[type="text"],
.cwginstock-subscribe-form input[type="email"],
.cwginstock-subscribe-form .form-control {
  width: 100% !important;
  height: auto !important;
  border: 1px solid var(--na-rule-strong) !important;
  border-radius: var(--na-radius) !important;
  padding: 0.7rem 0.8rem !important;
  margin-bottom: var(--na-space-sm) !important;
  font-family: var(--na-font-sans) !important;
  font-size: var(--na-step-0) !important;
  color: var(--na-ink) !important;
  background: var(--na-paper-white) !important;
  box-shadow: none !important;
}
.cwginstock-subscribe-form input[type="text"]:focus,
.cwginstock-subscribe-form input[type="email"]:focus {
  outline: none !important;
  border-color: var(--na-ink) !important;
  box-shadow: 0 0 0 2px rgba(28, 28, 26, 0.10) !important;
}

/* Button */
.cwginstock-subscribe-form .cwgstock_button,
.cwginstock-subscribe-form button[type="submit"],
.cwginstock-subscribe-form input[type="submit"] {
  display: inline-block !important;
  width: 100% !important;
  background: var(--na-ink) !important;
  color: var(--na-paper) !important;
  border: none !important;
  border-radius: var(--na-radius) !important;
  padding: 0.85rem 1.25rem !important;
  font-family: var(--na-font-hero) !important;
  font-size: var(--na-step-0) !important;
  letter-spacing: 0.01em !important;
  cursor: pointer !important;
  transition: background 160ms var(--na-ease) !important;
}
.cwginstock-subscribe-form .cwgstock_button:hover,
.cwginstock-subscribe-form button[type="submit"]:hover,
.cwginstock-subscribe-form input[type="submit"]:hover {
  background: #000 !important;
}

/* Helper / label text */
.cwginstock-subscribe-form label,
.cwginstock-subscribe-form p {
  color: var(--na-ink-soft) !important;
  font-family: var(--na-font-sans) !important;
}

/* ============================================================
   NON-SELECTABLE SITE (v0.9.99)
   Nothing on the site can be highlighted or selected — header,
   logo, buttons, product text, all of it. Form fields are the one
   exception (inputs, textareas, selects, editable areas) so
   checkout, search, and address entry still work. This rule is
   ALSO printed inline in <head> (see na_disable_text_selection in
   functions.php) as the primary, cache-proof copy; this stylesheet
   copy is a backup.
   ============================================================ */

html, body, * {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}
input, textarea, select, [contenteditable], [contenteditable] * {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}

/* ============================================================
   HOME FAQ (v0.10.0)
   Accordion FAQ at the bottom of the front page. Native
   <details>/<summary> — no JavaScript. Scoped under .na-faq.
   ============================================================ */

.na-faq {
  background: var(--na-paper);
  padding: var(--na-space-lg) var(--na-space-md);
}
.na-faq__inner {
  max-width: var(--na-shell);
  margin-inline: auto;
}
.na-faq__eyebrow {
  text-align: center;
  color: var(--na-ink-soft);
  font-family: var(--na-font-hero);
  font-size: var(--na-step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 var(--na-space-xs);
}
.na-faq__eyebrow::before { content: "\25CF  "; }
.na-faq__title {
  text-align: center;
  font-family: var(--na-font-hero);
  font-size: var(--na-step-2);
  color: var(--na-ink);
  margin: 0 0 var(--na-space-lg);
}
.na-faq__list {
  max-width: 760px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--na-space-sm);
}
.na-faq__item {
  background: var(--na-paper-white);
  border: 1px solid var(--na-rule);
  border-radius: var(--na-radius);
  overflow: hidden;
}
.na-faq__q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--na-space-md);
  padding: var(--na-space-sm) var(--na-space-md);
  font-family: var(--na-font-hero);
  font-size: var(--na-step-0);
  color: var(--na-ink);
}
.na-faq__q::-webkit-details-marker { display: none; }
.na-faq__q::after {
  content: "+";
  flex: 0 0 auto;
  font-size: var(--na-step-2);
  line-height: 1;
  color: var(--na-ink-soft);
}
.na-faq__item[open] .na-faq__q::after { content: "\2212"; }
.na-faq__q:hover { color: var(--na-ink-soft); }
.na-faq__a {
  padding: 0 var(--na-space-md) var(--na-space-sm);
  color: var(--na-ink-soft);
  font-size: var(--na-step-0);
  line-height: 1.6;
}
.na-faq__a p { margin: 0; }

@media (max-width: 600px) {
  .na-faq__title { font-size: var(--na-step-1); }
}

/* ============================================================
   HERO TRUST BAR (v0.10.7)
   Compact social-proof row beneath the hero buttons, scaled up
   in step with the rest of the hero text. Gaps tightened a touch
   so it still holds one line on desktop; larger when stacked on
   mobile. Scoped under .na-trust.
   ============================================================ */

.na-trust { margin-top: 2.25rem; }
.na-trust__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.6rem 0.85rem;
}
.na-trust__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.na-trust__item + .na-trust__item {
  border-left: 1px solid var(--na-rule);
  padding-left: 0.85rem;
}
.na-trust__stars {
  color: var(--na-ink);
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  line-height: 1;
  white-space: nowrap;
}
.na-trust__label {
  font-family: var(--na-font-hero);
  font-weight: 600;
  font-size: 0.84rem;
  color: var(--na-ink);
  white-space: nowrap;
}
.na-trust__icon {
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
  color: var(--na-ink);
}
.na-trust__text {
  display: flex;
  flex-direction: column;
  line-height: 1.22;
}
.na-trust__title {
  font-family: var(--na-font-hero);
  font-weight: 600;
  font-size: 0.84rem;
  color: var(--na-ink);
  white-space: nowrap;
}
.na-trust__sub {
  font-size: 0.74rem;
  color: var(--na-ink-soft);
  white-space: nowrap;
}

@media (max-width: 820px) {
  .na-trust { margin-top: var(--na-space-md); }
  .na-trust__inner { gap: 0.6rem 0.7rem; }
  .na-trust__item + .na-trust__item { border-left: none; padding-left: 0; }
  .na-trust__stars { font-size: 0.8rem; }
  .na-trust__label { font-size: 0.72rem; white-space: normal; }
  .na-trust__icon { width: 18px; height: 18px; }
  .na-trust__title { font-size: 0.72rem; }
  .na-trust__sub { font-size: 0.64rem; }
}