/* --- Announcement bar ----------------------------------------------------- */
.nva-announce {
  position: relative;
  z-index: 1;
  /*
   * Roomier on a phone. The message is 38 characters, so the width was
   * being consumed by letter-spacing rather than by the type — the padding
   * below buys breathing room at the edges, and the reduced tracking on
   * .nva-announce__text keeps it on one line without shrinking the font to
   * something unreadable.
   */
  padding: 1rem var(--nva-s-6);
  background-color: var(--nva-ink);
  text-align: center;
  /*
   * Stays in normal flow and scrolls away — it is never fixed. The header
   * is positioned from its measured height, so nothing here is hardcoded.
   */
  /* A hairline so the bar and the header below read as two sections. */
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.nva-announce__text {
  margin: 0;
  font-family: var(--nva-font-body);
  font-size: 10px;
  font-weight: var(--nva-w-semi);
  line-height: 1.6;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--nva-on-dark);
  text-wrap: balance;
}

/* Desktop keeps its previous proportions exactly. */
@media (min-width: 768px) {
  .nva-announce { padding: 0.625rem var(--nva-s-5); }
  .nva-announce__text { font-size: 11px; letter-spacing: 0.16em; line-height: 1.4; }
}

/* ==========================================================================
   NOVAURA — Global header & mobile drawer
   Two variants: .is-light (default) and .is-dark (Partners-style pages).
   Transparent at rest; gains a blurred backdrop once scrolled.
   ========================================================================== */

.nva-header {
  position: fixed;
  /*
   * Driven by header.js from the announcement bar's MEASURED height, so the
   * header sits below the bar at rest and rises to 0 as the bar scrolls away.
   *
   * The 0px fallback matters: with JS unavailable, or with the announcement
   * bar disabled, the header behaves exactly as it always did. It is also
   * why the bar must never be given a z-index above the header — the header
   * no longer needs to cover it, but it must still sit above page content.
   */
  top: var(--nva-header-top, 0px);
  left: 0;
  z-index: var(--nva-z-header);
  width: 100%;
  height: var(--nva-header-h);
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--nva-d-slow) var(--nva-ease),
              border-color var(--nva-d-slow) var(--nva-ease),
              height var(--nva-d-slow) var(--nva-ease);
}
.nva-header.is-dark { height: var(--nva-header-h-dark); }

/* Scrolled state — set by header.js */
.nva-header.is-scrolled {
  background-color: rgba(249,249,249,0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom-color: rgba(0,0,0,0.06);
}
.nva-header.is-dark.is-scrolled {
  background-color: rgba(0,0,0,0.72);
  border-bottom-color: rgba(255,255,255,0.08);
}

.nva-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  width: 100%;
  max-width: var(--nva-w-wide);
  margin-inline: auto;
  padding-inline: var(--nva-s-5);
}

/* --- Logo ---------------------------------------------------------------- */
.nva-header__logo { display: flex; align-items: center; }
.nva-header__logo img {
  height: 52px;
  /*
   * max-height repeats the height as a hard ceiling. If anything ever
   * resets height (a plugin, an editor style, or a paint before this file
   * applies), the logo still cannot grow past the header.
   */
  max-height: 52px;
  width: auto;
  object-fit: contain;
  user-select: none;
  transition: height var(--nva-d-slow) var(--nva-ease);
}
.nva-header.is-dark .nva-header__logo img { height: 44px; max-height: 44px; }

/* The raster placeholder logo needs help to read cleanly. When the
   production SVG is uploaded, add the "nva-logo--vector" class in the
   Companion plugin settings and these filters are skipped. */
.nva-header__logo img:not(.nva-logo--vector) {
  filter: contrast(1.4) brightness(1.02) drop-shadow(0 2px 5px rgba(0,0,0,0.28));
}
.nva-header.is-dark .nva-header__logo img:not(.nva-logo--vector) {
  filter: brightness(0) invert(1) drop-shadow(0 2px 10px rgba(255,255,255,0.18));
}

/* --- Primary navigation (desktop only) ----------------------------------- */
.nva-header__nav { display: none; }

.nva-header__menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--nva-s-10);
  list-style: none;
}

.nva-header__menu a {
  position: relative;
  display: flex;
  align-items: center;
  height: 44px;
  font-family: var(--nva-font-body);
  font-size: var(--nva-t-small);
  font-weight: var(--nva-w-medium);
  letter-spacing: var(--nva-ls-nav);
  text-transform: uppercase;
  color: var(--nva-ink);
  transition: opacity var(--nva-d-base) var(--nva-ease);
}
.nva-header__menu a:hover { opacity: 0.7; }

.nva-header.is-dark .nva-header__menu a {
  color: var(--nva-on-dark-90);
  font-size: var(--nva-t-micro);
  letter-spacing: var(--nva-ls-nav-dark);
}

/* Underline grows from the centre; stays full width when the item is current */
.nva-header__menu a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 0;
  height: 1px;
  background-color: var(--nva-ink);
  transform: translateX(-50%);
  transition: width var(--nva-d-slow) var(--nva-ease);
}
.nva-header.is-dark .nva-header__menu a::after { background-color: var(--nva-on-dark-80); }
.nva-header__menu a:hover::after,
.nva-header__menu a:focus-visible::after { width: 100%; }
.nva-header__menu .current-menu-item > a::after,
.nva-header__menu .current-menu-ancestor > a::after,
.nva-header__menu .current_page_item > a::after { width: 100%; }

/* --- Icon cluster -------------------------------------------------------- */
.nva-header__actions {
  display: flex;
  align-items: center;
  gap: var(--nva-s-1);
}

.nva-header__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--nva-ink);
  transition: opacity var(--nva-d-base) var(--nva-ease);
}
.nva-header__icon:hover { opacity: 0.6; }
.nva-header.is-dark .nva-header__icon { color: var(--nva-on-dark-90); }

.nva-header__icon--search { display: none; }

/* Cart badge — the count itself is replaced by a WooCommerce fragment */
.nva-header__cart { position: relative; }
.nva-cart-count {
  position: absolute;
  right: 2px;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /*
   * Sized for two digits.
   *
   * min-width 16px with 3px padding fitted a single digit; a double-digit
   * count crowded the icon edge. 18px with 5px padding lets "12" sit
   * comfortably, and min-width means a single digit stays a circle.
   */
  min-width: 18px;
  height: 18px;
  padding-inline: 5px;
  border-radius: var(--nva-r-full);
  background-color: var(--nva-ink);
  color: var(--nva-on-dark);
  font-size: 0.5625rem;
  font-weight: var(--nva-w-semi);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.nva-header.is-dark .nva-cart-count {
  background-color: var(--nva-on-dark);
  color: var(--nva-ink);
}
.nva-cart-count.is-empty { display: none; }
.nva-cart-count.is-pulsing { animation: nva-cart-pulse var(--nva-d-slow) ease-in-out; }

/* --- Desktop layout at the major breakpoint ------------------------------ */
/* ==========================================================================
   Tablet tier (768–1023px)

   The drawer stays — the desktop nav centres a menu between a 132px logo
   and the actions in a three-column grid, and there is no room for that at
   768–820px without shrinking the logo or tightening the gaps, which would
   compromise the approved design rather than adapt it.

   What changes is proportion only: the header was pixel-identical from
   375px to 1023px and then jumped to desktop in one step.
   ========================================================================== */
@media (min-width: 768px) {

  /* Between the 52px phone logo and the 132px desktop one. */
  .nva-header__logo img { height: 76px; max-height: 76px; }
  .nva-header.is-dark .nva-header__logo img { height: 64px; max-height: 64px; }

  .nva-header__inner { padding-inline: var(--nva-s-8); }

  /* A 300px drawer over 520px of dimmed page reads thin rather than intended. */
  .nva-drawer { width: 360px; }
}

@media (min-width: 1024px) {
  .nva-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    padding-inline: var(--nva-s-10);
  }
  .nva-header__logo { justify-self: start; }
  .nva-header__logo img { height: 132px; max-height: 132px; }
  .nva-header.is-dark .nva-header__logo img { height: 88px; max-height: 88px; }

  .nva-header__nav { display: block; justify-self: center; }
  .nva-header__menu { gap: var(--nva-s-12); }

  .nva-header__actions { justify-self: end; gap: var(--nva-s-2); }
  .nva-header__icon--search { display: flex; }
  .nva-header__burger { display: none; }
}

/* ==========================================================================
   Mobile drawer
   ========================================================================== */

.nva-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--nva-z-drawer);
  background-color: rgba(0,0,0,0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--nva-d-drawer) var(--nva-ease),
              visibility var(--nva-d-drawer) var(--nva-ease);
}
.nva-drawer-overlay.is-open { opacity: 1; visibility: visible; }

.nva-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: var(--nva-z-drawer);
  display: flex;
  flex-direction: column;
  width: 300px;
  max-width: 82%;
  height: 100%;
  padding: var(--nva-s-8) var(--nva-s-5) var(--nva-s-8) var(--nva-s-8);
  background-color: var(--nva-surface);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--nva-d-drawer) var(--nva-ease),
              visibility var(--nva-d-drawer) var(--nva-ease);
}
.nva-drawer.is-open { transform: translateX(0); visibility: visible; }
.nva-drawer.is-dark { background-color: var(--nva-black); }

.nva-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--nva-s-8);
}
.nva-drawer__head img {
  height: 40px;
  width: auto;
  object-fit: contain;
}
.nva-drawer__head img:not(.nva-logo--vector) {
  filter: contrast(1.4) brightness(1.02) drop-shadow(0 2px 5px rgba(0,0,0,0.28));
}
.nva-drawer.is-dark .nva-drawer__head img:not(.nva-logo--vector) {
  filter: brightness(0) invert(1);
}

.nva-drawer__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--nva-ink-70);
}
.nva-drawer.is-dark .nva-drawer__close { color: var(--nva-on-dark-45); }

.nva-drawer__menu { display: flex; flex-direction: column; list-style: none; }

.nva-drawer__menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--nva-s-4);
  border-bottom: 1px solid var(--nva-line);
  font-family: var(--nva-font-body);
  font-size: 0.9375rem;
  font-weight: var(--nva-w-medium);
  text-transform: uppercase;
  letter-spacing: var(--nva-ls-label);
  color: var(--nva-ink-70);
  transition: color var(--nva-d-base) var(--nva-ease);
}
.nva-drawer__menu a:hover { color: var(--nva-ink); }
.nva-drawer.is-dark .nva-drawer__menu a {
  border-bottom-color: var(--nva-on-dark-06);
  color: var(--nva-on-dark-80);
}
.nva-drawer.is-dark .nva-drawer__menu a:hover { color: var(--nva-on-dark); }

/* Current item gets the red tick */
.nva-drawer__menu .current-menu-item > a,
.nva-drawer__menu .current-menu-ancestor > a,
.nva-drawer__menu .current_page_item > a { color: var(--nva-ink); }
.nva-drawer.is-dark .nva-drawer__menu .current-menu-item > a { color: var(--nva-on-dark); }

.nva-drawer__menu .current-menu-item > a::after,
.nva-drawer__menu .current-menu-ancestor > a::after,
.nva-drawer__menu .current_page_item > a::after {
  content: "";
  width: 2px;
  height: 16px;
  border-radius: var(--nva-r-full);
  background-color: var(--nva-red);
}

@media (min-width: 1024px) {
  .nva-drawer, .nva-drawer-overlay { display: none; }
}

/* Locks background scroll while the drawer is open */
body.nva-drawer-open { overflow: hidden; }

/* --- Wordmark fallback ----------------------------------------------------
   Only rendered when no logo asset is configured at all. Matches the
   footer and account-rail wordmarks so the site never shows a broken
   image, and inverts for the dark header exactly as the logo does.
   ------------------------------------------------------------------------- */
.nva-logo-wordmark {
  display: inline-block;
  font-family: var(--nva-font-body);
  font-size: 18px;
  font-weight: var(--nva-w-semi);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--nva-ink);
  white-space: nowrap;
}

.nva-header.is-dark .nva-logo-wordmark,
.nva-drawer.is-dark .nva-logo-wordmark { color: var(--nva-on-dark); }

@media (min-width: 768px) {
  .nva-logo-wordmark { font-size: 22px; }
}

@media (min-width: 1024px) {
  .nva-logo-wordmark { font-size: 26px; }
}

/* --- Announcement bar: promotion -------------------------------------------
   The bar's own box, type scale and colours are unchanged above. These only
   arrange the parts of a promotion inside it, so a promotion and the plain
   settings text sit at the same height and header.js keeps measuring the
   element correctly.
   --------------------------------------------------------------------------- */
.nva-announce__text--promo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0 0.5em;
}

.nva-announce__sep { opacity: 0.45; }

.nva-announce__code { white-space: nowrap; font-weight: var(--nva-w-bold); }

.nva-announce__cta {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.25em;
  white-space: nowrap;
}

.nva-announce__cta:hover,
.nva-announce__cta:focus-visible { opacity: 0.75; }

@media (max-width: 767px) {
  /* The separators read as clutter once the line wraps on a phone. */
  .nva-announce__sep { display: none; }
  .nva-announce__text--promo { gap: 0.15em 0.6em; }
}