/* ============================================================
   ELUMARA - Theme layer over Bootstrap 5.3
   Palette: Midnight + Champagne Gold
   Fonts:   Manrope (brand, headings, product meta, price)
            Inter (body copy, buttons, ratings, small UI)

   Load order matters: bootstrap.min.css -> style.css
   Everything structural/behavioral comes from Bootstrap; this
   file only supplies brand tokens, typography and the bespoke
   sections (hero, glow, collage, trust strip, cta band, ...).
   ============================================================ */

:root {
  /* ---------- brand palette ---------- */
  --ink: #05070E;
  --midnight: #0A1020;
  --navy: #0E1729;
  --navy-2: #14203A;
  --navy-3: #1B2A49;

  --gold: #E4C489;
  --gold-bright: #F4E0B6;
  --gold-deep: #BE9A55;
  --gold-glow: rgba(228, 196, 137, 0.18);
  /* Champagne gold only reaches 2.45:1 on cream, so it is safe on dark
     backgrounds and for fills/borders - never for text on a light background.
     This darker bronze keeps the hue and passes 4.5:1 on cream/white. */
  --gold-text: #7A6134;

  --cream: #FAF6EE;
  --cream-2: #F2ECDF;
  --cream-3: #E8E0CE;

  --text: #0A1020;
  --muted: #5F6879;
  --muted-dark: rgba(255, 255, 255, 0.64);

  --ok: #266B4C;
  --warn: #8A5F12;
  --line: rgba(10, 16, 32, 0.10);
  --line-dark: rgba(228, 196, 137, 0.18);

  /* ---------- typography ---------- */
  --font-display: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* brand voice - wordmark, hero accent, certification marks */
  --font-brand: 'Times New Roman', Times, 'Liberation Serif', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ---------- small-UI leading ----------
     The body's 1.65 leading is right for running copy but wrong for the
     small-UI tier: chips, badges, uppercase labels and icon rows. Inheriting
     it inflates a 12px label's line box to ~20px, and because the extra
     leading is not optically symmetric (more descender space than ascender)
     the glyphs sit above the line-box centre - so a centred icon drifts
     against its label. Everything in that tier uses this instead. */
  --ui-leading: 1.4;

  /* ---------- icon size scale (px, never em) ----------
     An em icon height resolves against whatever font-size it inherits, so the
     same logo rendered at a different size per context - which is why three
     separate px overrides had accumulated. Fixed px keeps every instance the
     same height and independent of inherited type scale. */
  --icon-sm: 15px;
  --icon-md: 16px;
  --icon-lg: 26px;

  /* ---------- spacing scale (4px base) ----------
     Replaces the ~60 one-off pixel values that caused the
     uneven vertical rhythm. Every gap/pad below maps here. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 48px;
  --sp-10: 56px;
  --sp-11: 64px;
  --sp-12: 80px;
  --sp-13: 96px;

  --gap-xs: var(--sp-2);
  --gap-sm: var(--sp-4);
  --gap: var(--sp-6);
  --gap-lg: var(--sp-7);
  --gutter: var(--sp-6);
  --section-y: var(--sp-13);
  --section-y-md: var(--sp-11);

  /* ---------- radius ---------- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;
  /* legacy aliases */
  --radius: var(--r-lg);
  --radius-lg: var(--r-xl);

  /* ---------- shadow ---------- */
  --shadow-soft: 0 18px 50px -22px rgba(10, 16, 32, 0.45);
  --shadow-card: 0 24px 60px -30px rgba(10, 16, 32, 0.55);

  /* ---------- card sizing (medium) ---------- */
  --card-pad: var(--sp-5);
  --card-max: 340px;
  --card-media-ar: 4 / 3;

  /* ---------- layout ---------- */
  --wrap: 1200px;
  --header-h: 72px;

  /* ---------- Bootstrap bridge ---------- */
  --bs-body-font-family: var(--font-body);
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.65;
  --bs-body-color: var(--text);
  --bs-body-bg: var(--cream);
  --bs-body-text-align: left;
  --bs-emphasis-color: var(--text);
  --bs-secondary-color: var(--muted);
  --bs-secondary-bg: var(--cream-2);
  /* `inherit` computes to the guaranteed-invalid value on :root, so Bootstrap's
     `color: var(--bs-heading-color)` went invalid and relied on the fallback.
     currentColor resolves to the inherited colour instead - same result, but
     the declaration is actually valid. */
  --bs-heading-color: currentColor;
  /* Bootstrap 5.3.3 empties --bs-card-height / --bs-card-color ON .card itself
     (`.card{--bs-card-height: ;--bs-card-color: ;}`), which shadows any :root
     value - nearest declaration wins. The real bridge lives on `.card` below. */
  /* gold focus ring for EVERY .btn variant - Bootstrap only defines this rgb on
     its own .btn-primary/.btn-dark etc, so the theme's variants lost their
     focus box-shadow entirely. */
  --bs-btn-focus-shadow-rgb: 228, 196, 137;
  /* Bootstrap 5.3 ships this selector as
     `.h1,...,h1,h2,h3,h4,h5,h6 { color: var(--bs-heading-color) }` -
     specificity (0,6,6), which beats any plain `h1..h6` rule regardless of
     load order. It must stay `inherit` or every heading is forced to dark ink,
     including the ones on .section-dark / .section-ink. */
  --bs-border-color: var(--line);
  --bs-border-color-translucent: rgba(10, 16, 32, 0.08);
  --bs-border-width: 1px;
  --bs-border-radius: var(--r-md);
  --bs-border-radius-sm: var(--r-sm);
  --bs-border-radius-lg: var(--r-lg);
  --bs-border-radius-xl: var(--r-xl);
  --bs-focus-ring-width: 0.22rem;
  --bs-focus-ring-color: rgba(228, 196, 137, 0.38);
  --bs-link-hover-decoration: none;
}

/* ============================================================
   1b. SMALL-UI LEADING  (root-cause fix for the whole tier)
   ============================================================
   Chips, badges, uppercase labels and icon rows are not running copy. They
   used to inherit the body's line-height: 1.65, which made each one's line box
   much taller than its content, and because the extra leading is not optically
   symmetric (more descender space than ascender) the glyphs sat above the
   line-box centre - leaving a centred icon or badge visibly out of alignment
   with its label. One shared value applied once, rather than a per-component
   offset that drifts again whenever the type scale changes. Keep this list in
   step when adding a small-UI component. */
.trust-item,
.ledger .status,
.pay-card .pay-mark,
.stars,
.pay-note,
.product-spec,
.card-brands > span,
.filter-row,
.accordion-button {
  line-height: var(--ui-leading);
}

/* ============================================================
   1. BASE
   ============================================================ */

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* sticky header was swallowing every #anchor target */
  scroll-padding-top: calc(var(--header-h) + var(--sp-6));
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
  line-height: 1.65;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: inherit; }
button, input, select, textarea { font-family: inherit; }
button { cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
figure { margin: 0; }

::selection { background: var(--gold); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
  border-radius: 3px;
}
.section-dark :focus-visible,
.section-ink :focus-visible,
.site-header :focus-visible,
.site-footer :focus-visible,
.hero :focus-visible,
.page-hero :focus-visible,
.cta-band :focus-visible {
  outline-color: var(--gold);
}

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  z-index: 200;
  background: var(--gold);
  color: var(--ink);
  font-weight: 600;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  transition: top .2s ease;
}
.skip-link:focus { top: 0; color: var(--ink); }

/* ============================================================
   2. TYPOGRAPHY
   ============================================================ */

/* Bootstrap's reboot re-declares font-weight:500, line-height:1.2 and
   margin-bottom on the .h1-.h6 CLASSES at specificity (0,1,0), which outranks
   a plain `h1..h6` element rule regardless of load order. Every heading that
   carries class="h2" was silently rendering at 500. Mirror Bootstrap's own
   selector list here so the theme wins. */
.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.18;
  margin: 0;
  color: inherit;
  text-wrap: balance;
}
/* statement type carries the 700 weight, sub-heads stay at 600 */
.h1-xl, .h1-lg, .page-hero h1, .hero h1 { font-weight: 700; }
/* Uppercase micro-labels stay on Inter so they read as interface, not display. */
.h5, .h6, h5, h6, .label-caps {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 11.5px;
  line-height: 1.4;
}

/* Manrope runs wider than the old serif, so the display sizes come down a notch */
.h1-xl { font-size: clamp(2.75rem, 5.8vw, 4.6rem); line-height: 1.08; }
.h1-lg { font-size: clamp(2.25rem, 4.2vw, 3.25rem); line-height: 1.1; }
.h2     { font-size: clamp(2rem, 3.4vw, 2.9rem); }
.h3     { font-size: clamp(1.6rem, 2.4vw, 2.1rem); }
.h4     { font-size: 1.5rem; }
.h5     { font-size: 1.25rem; }

/* category / product meta - Manrope 600, 11–12px, 0.12em, uppercase */
.eyebrow {
  font-family: var(--font-display);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold-text);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 var(--sp-5);
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
  flex: none;
}
.eyebrow.on-dark { color: var(--gold); }
.eyebrow.center { justify-content: center; }
/* letter-spacing adds a trailing gap that skews centring */
.eyebrow.center, .text-center .eyebrow { text-indent: 0.12em; }

.lede {
  color: var(--muted);
  font-size: 1.0625rem;
  max-width: 60ch;
  line-height: 1.7;
}
.lede.on-dark, .on-dark .lede { color: var(--muted-dark); }

.muted { color: var(--muted); }
.link-gold { color: var(--gold-text); }
.link-gold:hover { color: var(--gold-text); }
.on-dark, .section-dark, .section-ink, .hero, .page-hero, .cta-band { color: #fff; }

/* ============================================================
   3. LAYOUT
   ============================================================ */

.container, .container-fluid, .container-lg, .container-xl, .container-xxl {
  max-width: var(--wrap);
}

/* Bootstrap's .g-* / .gx-* utilities re-declare --bs-gutter-x on the row, so a
   row's negative margin no longer cancels the container's padding and the row
   pushes past the viewport. Reproducible in vanilla Bootstrap: a plain
   `.container > .row.g-5` overflows 12px per side. Pinning the gutter on both
   restores the cancellation. g-* still drives --bs-gutter-y (vertical). */
.container, .container-fluid, .container-lg, .container-xl, .container-xxl, .row {
  --bs-gutter-x: var(--gutter);
}

.section { padding: var(--section-y) 0; }
.section-sm { padding: var(--section-y-md) 0; }
.section-white { background: #fff; }
.section-cream { background: var(--cream); }
.section-dark {
  background: var(--midnight);
  position: relative;
  overflow: hidden;
}
.section-ink { background: var(--ink); }
.section-flat { position: relative; z-index: 2; }

.section-head { max-width: 720px; margin-bottom: var(--sp-9); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head .h2 { margin: 0; }
.section-head > p:last-child { margin-top: var(--sp-5); color: var(--muted); }
.section-dark .section-head > p:last-child,
.section-ink .section-head > p:last-child { color: var(--muted-dark); }

.divider { height: 1px; background: var(--line); margin: var(--sp-9) 0; border: 0; opacity: 1; }
.section-dark .divider, .section-ink .divider { background: rgba(255, 255, 255, 0.1); }

.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  opacity: 0.55;
  z-index: 0;
}

/* ============================================================
   4. BUTTONS  (Bootstrap .btn, re-skinned via CSS vars)
   ============================================================ */

.btn {
  --bs-btn-font-family: var(--font-body);
  --bs-btn-font-weight: 600;
  --bs-btn-font-size: 0.9rem;
  --bs-btn-border-radius: var(--r-pill);
  --bs-btn-padding-x: 1.75rem;
  --bs-btn-padding-y: 0.8125rem;
  --bs-btn-line-height: 1.25;
  --bs-btn-border-width: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  max-width: 100%;
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn .bi { font-size: 1.05em; line-height: 1; }

.btn-gold {
  --bs-btn-color: #17110A;
  --bs-btn-bg: var(--gold);
  --bs-btn-border-color: var(--gold);
  --bs-btn-hover-color: #17110A;
  --bs-btn-hover-bg: var(--gold-bright);
  --bs-btn-hover-border-color: var(--gold-bright);
  --bs-btn-active-color: #17110A;
  --bs-btn-active-bg: var(--gold-deep);
  --bs-btn-active-border-color: var(--gold-deep);
  --bs-btn-disabled-color: #17110A;
  --bs-btn-disabled-bg: #C9B48C;
  --bs-btn-disabled-border-color: #C9B48C;
  --bs-btn-focus-shadow-rgb: 228, 196, 137;
  background-image: linear-gradient(135deg, var(--gold-bright), var(--gold) 55%, var(--gold-deep));
  box-shadow: 0 12px 30px -14px rgba(228, 196, 137, 0.85);
}
.btn-gold:hover {
  background-image: linear-gradient(135deg, #FBEBCB, var(--gold-bright) 55%, var(--gold));
  box-shadow: 0 18px 38px -14px rgba(228, 196, 137, 0.95);
}

.btn-dark {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--midnight);
  --bs-btn-border-color: var(--midnight);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--navy-3);
  --bs-btn-hover-border-color: var(--navy-3);
  --bs-btn-active-bg: var(--ink);
  --bs-btn-active-border-color: var(--ink);
}

.btn-outline {
  --bs-btn-color: var(--text);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: rgba(10, 16, 32, 0.22);
  --bs-btn-hover-color: var(--gold-deep);
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: var(--gold-deep);
  --bs-btn-active-bg: transparent;
  --bs-btn-active-border-color: var(--gold-deep);
}

.btn-ghost {
  --bs-btn-color: #fff;
  --bs-btn-bg: transparent;
  --bs-btn-border-color: rgba(255, 255, 255, 0.28);
  --bs-btn-hover-color: var(--gold);
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: var(--gold);
  --bs-btn-active-bg: transparent;
  --bs-btn-active-border-color: var(--gold);
}

/* ghost button on a light surface (panels, forms): the base .btn-ghost is white
   text for dark sections and would be invisible here, so the tertiary action
   becomes a quiet text button with a gold-tinted hover */
.btn-ghost.on-light {
  --bs-btn-color: var(--text);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--gold-text);
  --bs-btn-hover-bg: rgba(228, 196, 137, 0.12);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--gold-text);
  --bs-btn-active-bg: rgba(228, 196, 137, 0.18);
  --bs-btn-active-border-color: transparent;
}

.btn-light {
  --bs-btn-color: var(--ink);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #fff;
  --bs-btn-hover-bg: var(--cream-2);
  --bs-btn-hover-border-color: var(--cream-2);
}

.btn-link {
  --bs-btn-color: var(--gold-deep);
  --bs-btn-hover-color: var(--gold);
  --bs-btn-padding-x: 0;
}

.btn-sm { --bs-btn-padding-y: 0.5625rem; --bs-btn-padding-x: 1.125rem; --bs-btn-font-size: 0.8125rem; }
.btn-lg { --bs-btn-padding-y: 1rem; --bs-btn-padding-x: 2.125rem; --bs-btn-font-size: 0.95rem; }

.icon-btn {
  position: relative;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: transparent;
  color: #fff;
  display: grid;
  place-items: center;
  padding: 0;
  transition: border-color .2s ease, color .2s ease;
}
.icon-btn:hover { border-color: var(--gold); color: var(--gold); }
.icon-btn .bi { font-size: 1.05rem; }

.cart-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--gold);
  color: #17110A;
  font-size: 10.5px;
  font-weight: 700;
  display: grid;
  place-items: center;
  line-height: 1;
}

/* ============================================================
   5. ANNOUNCEMENT BAR + HEADER
   ============================================================ */

.topbar {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.72);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(228, 196, 137, 0.14);
}
.topbar .container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-7);
  min-height: 40px;
  padding-top: var(--sp-2);
  padding-bottom: var(--sp-2);
  flex-wrap: wrap;
}
.topbar-item { display: inline-flex; align-items: center; gap: 8px; }
.topbar-item .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); flex: none; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(10, 16, 32, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-dark);
}
.header-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  min-height: var(--header-h);
}

.logo { display: inline-flex; align-items: center; gap: 11px; flex: none; }
.logo .star { width: 30px; height: 30px; color: var(--gold); }
.logo-word {
  display: block;
  font-family: var(--font-brand);
  font-size: 27px;
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1;
  color: #fff;
}
.logo-tag {
  display: block;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 5px;
  opacity: 0.9;
}

/* Bootstrap declares `--bs-card-height: ; --bs-card-color: ;` directly on
   `.card`, so a :root bridge is shadowed and `height: var(--bs-card-height)`
   / `color: var(--bs-card-color)` stay invalid-at-computed-value (working only
   through error recovery). Redeclare them here - style.css loads after
   bootstrap, equal specificity, so these win and the var() consumers resolve. */
.card {
  --bs-card-height: auto;
  --bs-card-color: currentColor;
}

.site-header .navbar-collapse { flex: 1 1 auto; }
.nav { display: flex; align-items: center; gap: var(--sp-8); margin-left: auto; }

/* Bootstrap's navbar rules (.navbar-nav .nav-link / .active / :hover) sit at
   specificity (0,3,0) and read --bs-navbar-* vars that Bootstrap only defines
   inside a .navbar element this theme never renders - so the active link fell
   back to inherited ink (#0A1020) and disappeared against the dark header.
   Supply the whole navbar var set here. */
.site-header {
  --bs-navbar-color: rgba(255, 255, 255, 0.74);
  --bs-navbar-hover-color: #fff;
  --bs-navbar-active-color: var(--gold);
  --bs-navbar-disabled-color: rgba(255, 255, 255, 0.32);
  --bs-navbar-nav-link-color: rgba(255, 255, 255, 0.74);
  --bs-navbar-nav-link-hover-color: #fff;
  --bs-navbar-toggler-font-size: 1.25rem;
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.85%29' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  --bs-nav-link-color: rgba(255, 255, 255, 0.74);
  --bs-nav-link-hover-color: #fff;
  --bs-nav-link-active-color: var(--gold);
}
/* Bootstrap empties --bs-nav-link-font-weight ON `.nav` / `.navbar-nav`
   (`.nav{--bs-nav-link-font-weight: ;}`), shadowing the header-level value.
   Redeclare on the container itself so `.nav-link { font-weight: var(...) }`
   resolves instead of falling through to error recovery. */
.site-header .nav,
.site-header .navbar-nav {
  --bs-nav-link-font-size: 13.5px;
  --bs-nav-link-font-weight: 500;
}
.site-header .nav-link {
  position: relative;
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.74);
  letter-spacing: 0.04em;
  padding: 6px 0;
  transition: color .2s ease;
}
.site-header .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--gold);
  transition: right .28s ease;
}
.site-header .nav-link:hover, .site-header .nav-link:focus-visible { color: #fff; }
.site-header .nav-link:hover::after,
.site-header .nav-link:focus-visible::after,
.site-header .nav-link.active::after,
.site-header .nav-link.active:hover::after { right: 0; }
.site-header .nav-link.active,
.site-header .nav-link.active:hover,
.site-header .nav-link.show { color: var(--gold); }

.header-actions { display: flex; align-items: center; gap: var(--sp-3); flex: none; }

.navbar-toggler {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  padding: 0;
  color: #fff;
  display: none;
  place-items: center;
}
.navbar-toggler:focus { box-shadow: none; }
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.85%29' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* One nav list serves both layouts: forced visible from lg up. */
@media (min-width: 992px) {
  .site-header .navbar-collapse { display: flex !important; justify-content: flex-end; }
  .site-header .navbar-collapse .nav { flex-direction: row; align-items: center; }
}
@media (max-width: 991.98px) {
  /* the collapse lives inside .header-bar (a flex ROW). Left as a plain flex
     item it kept its content min-width, pushed .header-actions off-screen and
     left the panel clipped against the right edge. Wrapping it onto its own
     full-width row, under the actions, fixes the panel. */
  .site-header .header-bar { flex-wrap: wrap; }
  .site-header .header-actions { order: 2; margin-left: auto; }
  .site-header .navbar-collapse {
    order: 3;
    flex: 1 0 100%;
    min-width: 0;
    padding: var(--sp-2) 0 var(--sp-5);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .site-header .navbar-collapse .nav { flex-direction: column; align-items: stretch; gap: 0; margin-left: 0; }
  .site-header .nav-link {
    padding: 13px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    font-size: 15px;
  }
  .site-header .nav-link::after { display: none; }
  .navbar-toggler { display: grid; }
  .header-actions .btn { display: none; }
}

/* ============================================================
   6. HERO
   ============================================================ */

.hero {
  position: relative;
  background:
    radial-gradient(900px 480px at 78% 12%, rgba(228, 196, 137, 0.16), transparent 65%),
    radial-gradient(700px 520px at 8% 90%, rgba(80, 120, 220, 0.14), transparent 70%),
    linear-gradient(160deg, var(--ink) 0%, var(--midnight) 55%, #0C1830 100%);
  color: #fff;
  overflow: hidden;
  padding: var(--sp-12) 0 var(--sp-13);
  display: flex;
  align-items: center;
  min-height: 640px;
}
/* Full-bleed cover: the layer spans the entire section (inset 0), so there is no
   bare gradient strip beside or above the artwork. The source is a 2.44:1
   banner, so object-fit: cover crops top/bottom on tall sections and anchors
   right to keep the lifestyle photo in frame. The left gradient mask dissolves
   the panel edge and the banner's duplicate "Elumara" wordmark, so the copy
   never sits on artwork. */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}
/* left gradient mask - blends the photo into the hero background */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--ink) 0%, rgba(9, 18, 32, 0.94) 18%, rgba(9, 18, 32, 0.62) 40%, rgba(9, 18, 32, 0) 66%);
  pointer-events: none;
}
/* only a light vertical blend is needed now - the copy is off the photo */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(9, 18, 32, 0.55) 0%, rgba(9, 18, 32, 0) 26%, rgba(9, 18, 32, 0) 62%, rgba(9, 18, 32, 0.6) 100%);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: radial-gradient(rgba(255, 255, 255, 0.35) 1px, transparent 1px);
  background-size: 46px 46px;
  opacity: 0.12;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .7), transparent 75%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .7), transparent 75%);
  pointer-events: none;
}
.hero .container { position: relative; z-index: 2; }
/* the copy column is narrow so it always sits over the dark side of the photo */
.hero .hero-copy { max-width: 560px; }

.hero h1 { margin-bottom: var(--sp-6); }
.hero h1 .accent {
  display: block;
  color: var(--gold);
  font-family: var(--font-brand);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}
.hero .lede { color: rgba(255, 255, 255, 0.72); }

.price-row { display: flex; align-items: baseline; gap: var(--sp-4); margin: var(--sp-7) 0 var(--sp-2); }
.price-now {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 700;
  color: var(--gold-bright);
  line-height: 1;
}
.price-was {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.0625rem;
  color: rgba(255, 255, 255, 0.45);
  text-decoration: line-through;
}
.price-note { font-size: 12.5px; color: rgba(255, 255, 255, 0.52); letter-spacing: 0.05em; }

.hero-cta { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-7); }

.hero-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6) var(--sp-7);
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  max-width: 520px;
}
.hero-stats .stat-value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 600;
  color: var(--gold);
  line-height: 1.2;
}
.hero-stats .stat-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.54);
  margin-top: 2px;
}

/* ============================================================
   7. TRUST STRIP
   ============================================================ */

.trust {
  background: var(--ink);
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  padding: var(--sp-6) 0;
}
.trust .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5) var(--sp-6);
}
/* certification artwork in the trust strip: the source marks are 315x145 on a
   light plate, so they sit on the white chip rather than straight on the dark
   strip - inverting a light-background mark onto a dark strip is what made
   these unreadable before. */
.trust-item-art {
  padding: 7px 14px;
  background: #fff;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255, 255, 255, 0.18);
  line-height: 0;
}
.trust-item-art img { height: 38px; width: auto; display: block; }

.trust-item {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-display);
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}
.trust-item .bi { font-size: 1.1rem; color: var(--gold); flex: none; }

/* ============================================================
   8. PRODUCT CARDS  (medium size)
   ============================================================ */

.grid-cards {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), var(--card-max)));
  justify-content: center;
}

.product-card {
  --bs-card-spacer-y: var(--card-pad);
  --bs-card-spacer-x: var(--card-pad);
  --bs-card-border-radius: var(--r-lg);
  --bs-card-border-color: var(--line);
  --bs-card-bg: #fff;
  --bs-card-cap-padding-y: var(--sp-4);
  height: 100%;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-soft);
  border-color: rgba(190, 154, 85, 0.45);
}
.product-card .card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  padding: var(--card-pad);
}
.product-media {
  position: relative;
  position: relative;
  background: linear-gradient(160deg, #fff, var(--cream-2));
  aspect-ratio: var(--card-media-ar);
  overflow: hidden;
}
.product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.product-card:hover .product-media img { transform: scale(1.045); }

.tag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  background: var(--midnight);
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: var(--r-pill);
}
.tag.light { background: var(--gold); color: #17110A; }

.product-card h3 { font-size: 1.2rem; font-weight: 600; line-height: 1.2; }
.product-card h3 a:hover { color: var(--gold-text); }
.product-spec {
  font-family: var(--font-display);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.rating { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.stars { color: var(--gold-text); letter-spacing: 1px; font-size: 12.5px; }

.swatches { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.swatch {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(10, 16, 32, 0.22);
  padding: 0;
  transition: box-shadow .2s ease;
}
.swatch.is-active { box-shadow: 0 0 0 2px var(--gold-deep); }

.card-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: auto;
  padding-top: var(--sp-2);
  flex-wrap: wrap;
}
.card-price .now { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; color: var(--text); line-height: 1.1; }
.card-price .was { font-family: var(--font-body); font-weight: 400; font-size: 0.875rem; color: var(--muted); text-decoration: line-through; }
.card-price .save {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  color: var(--ok);
  background: rgba(47, 138, 99, 0.12);
  padding: 3px 8px;
  border-radius: var(--r-pill);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.card-actions { display: flex; gap: 8px; }
.card-actions .btn { flex: 1; --bs-btn-padding-x: 0.875rem; --bs-btn-padding-y: 0.625rem; --bs-btn-font-size: 0.8125rem; }

/* ============================================================
   9. FEATURES
   ============================================================ */

.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.section-dark .features { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.08); }
.feature {
  background: #fff;
  padding: var(--sp-7) var(--sp-6);
  transition: background .3s ease;
}
.section-dark .feature { background: var(--navy); }
.feature:hover { background: var(--cream); }
.section-dark .feature:hover { background: var(--navy-2); }
.feature-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: rgba(228, 196, 137, 0.14);
  color: var(--gold-text);
  margin-bottom: var(--sp-4);
  font-size: 1.3rem;
}
.section-dark .feature-icon { background: rgba(228, 196, 137, 0.12); color: var(--gold); }
.feature h4 { font-size: 1.2rem; margin: 0 0 var(--sp-2); }
.feature p { margin: 0; font-size: 0.9rem; color: var(--muted); line-height: 1.65; }
.section-dark .feature p { color: var(--muted-dark); }

/* ============================================================
   10. STEPS  (how it works)
   ============================================================ */

.steps { counter-reset: step; }
.step {
  position: relative;
  padding: var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
  height: 100%;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); border-color: rgba(190, 154, 85, 0.4); }
.step-num {
  counter-increment: step;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--midnight);
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: var(--sp-4);
}
.step-num::before { content: counter(step, decimal-leading-zero); }
.step h4 { font-size: 1.2rem; margin: 0 0 var(--sp-2); }
.step p { margin: 0; font-size: 0.9rem; color: var(--muted); line-height: 1.65; }
.step-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--sp-4);
}
.step-meta span {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-text);
  background: rgba(228, 196, 137, 0.14);
  border-radius: var(--r-pill);
  padding: 4px 10px;
}

/* ============================================================
   11. TESTIMONIALS (Swiper)
   ============================================================ */

.testi-swiper { padding-bottom: var(--sp-6); }
.testi-swiper .swiper-slide { height: auto; }
.testi-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}
.testi-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.testi-card .stars { font-size: 1rem; letter-spacing: 2px; }
.testi-card blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--text);
  flex: 1;
}
.testi-who {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}
.testi-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--gold-bright), var(--gold-deep));
  color: #17110A;
  display: grid;
  place-items: center;
  font-size: 1rem;
  flex: none;
}
.testi-name { font-size: 0.875rem; font-weight: 600; line-height: 1.3; }
.testi-meta { font-size: 11.5px; color: var(--muted); line-height: 1.3; }

/* arrows sit under the slider next to the pagination dots so they never
   overlap the card copy */
.testi-swiper .swiper-button-next,
.testi-swiper .swiper-button-prev {
  position: static;
  width: 38px;
  height: 38px;
  margin: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  box-shadow: var(--shadow-soft);
  transition: border-color .2s ease, color .2s ease;
}
.testi-swiper .swiper-button-next::after,
.testi-swiper .swiper-button-prev::after { font-size: 0.9rem; font-weight: 700; }
.testi-swiper .swiper-button-next:hover,
.testi-swiper .swiper-button-prev:hover { border-color: var(--gold-deep); color: var(--gold-deep); }
.testi-swiper .swiper-button-disabled { opacity: 0.4; }
.testi-swiper .swiper-pagination { position: static; width: auto; }
.testi-swiper .swiper-pagination-bullet { margin: 0 4px !important; }

/* ============================================================
   12. SPECS
   ============================================================ */

.spec-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-lg) var(--gap); }
.spec { border-left: 1px solid var(--line-dark); padding-left: var(--sp-5); }
.spec small {
  display: block;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.48);
  margin-bottom: 7px;
}
.spec strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.6rem;
  color: var(--gold-bright);
  display: block;
  line-height: 1.2;
}
.spec span { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.58); }

/* ============================================================
   13. SPLIT / MEDIA / CHECKLIST
   ============================================================ */

.split-media { position: relative; }
.media-frame {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  background: #fff;
  aspect-ratio: 1 / 1;
}
.section-dark .media-frame, .section-ink .media-frame { border-color: var(--line-dark); }
.media-frame img { width: 100%; height: 100%; object-fit: cover; }

.check-list { display: grid; gap: var(--sp-3); margin-top: var(--sp-6); }
.check-list li { display: flex; gap: 13px; align-items: flex-start; font-size: 0.9375rem; }
.check-list .tick {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gold);
  color: #17110A;
  display: grid;
  place-items: center;
  margin-top: 2px;
  font-size: 0.8rem;
}
.section-dark .check-list li, .section-ink .check-list li { color: rgba(255, 255, 255, 0.84); }

/* ============================================================
   14. OCCASIONS COLLAGE
   ============================================================ */

.collage { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.collage figure {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 3 / 4;
}
.collage img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.collage figure:hover img { transform: scale(1.06); }
.collage figcaption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  background: rgba(10, 16, 32, 0.86);
  color: #fff;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 7px 13px;
  border-radius: var(--r-pill);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* in-detail gallery: strict 1:1 image cards, caption underneath */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap-lg) var(--gap);
}
.detail-card { margin: 0; min-width: 0; }
.detail-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
  transition: transform .35s ease, box-shadow .35s ease;
}
.detail-card:hover img {
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
}
.detail-card figcaption {
  margin-top: var(--sp-4);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.detail-card figcaption strong {
  display: block;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1rem;
  margin-bottom: 2px;
}

/* ============================================================
   15. TABLES
   ============================================================ */

/* Horizontal scroll stays - the comparison and policy tables are wider than a
   phone, and touch and trackpad panning still work - but the bar itself is
   hidden, matching .topbar .container. Without this the wide table shows a
   default grey scrollbar under the content on Windows and desktop Chrome,
   which reads as a broken panel rather than a scrollable one. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-radius: var(--r-lg);
}
.table-scroll::-webkit-scrollbar { display: none; }

.compare {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text);
  margin: 0;
  min-width: 660px;
  border-collapse: separate;
  border-spacing: 0;
}
.compare thead th {
  background: var(--midnight);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  padding: var(--sp-5) var(--sp-6);
  border: 0;
  vertical-align: middle;
  white-space: nowrap;
}
.compare thead th:first-child { color: var(--gold); }
.compare tbody th, .compare tbody td {
  padding: var(--sp-4) var(--sp-6);
  font-size: 0.9rem;
  border-bottom: 1px solid var(--line);
  background: #fff;
  vertical-align: middle;
}
.compare tbody th {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  white-space: nowrap;
}
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare tbody tr:hover th, .compare tbody tr:hover td { background: var(--cream); }

/* recommended column - the tint is scoped to body cells on purpose.
   An unscoped `.compare .is-rec { background: ... !important }` also matched the
   <th>, wiping its dark gradient and leaving gold text on cream. */
.compare tbody td.is-rec { background-color: rgba(228, 196, 137, 0.07); }
.compare thead th.is-rec {
  background: linear-gradient(140deg, var(--navy-3), var(--navy));
  color: var(--gold);
}
.compare tbody tr:hover td.is-rec { background-color: rgba(228, 196, 137, 0.14); }
.rec-badge {
  display: block;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #17110A;
  background: var(--gold);
  border-radius: var(--r-pill);
  padding: 3px 9px;
  margin-top: 6px;
  width: max-content;
}
.compare td.is-rec strong, .compare td.is-rec { font-weight: 600; }

/* sticky first column on narrow screens */
@media (max-width: 767.98px) {
  .compare thead th:first-child,
  .compare tbody th {
    position: sticky;
    left: 0;
    z-index: 2;
    box-shadow: 1px 0 0 var(--line);
  }
  .compare thead th:first-child { z-index: 3; }
}

.ledger { --bs-table-bg: transparent; margin: 0; }
.ledger thead th {
  background: var(--cream-2);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  padding: var(--sp-4) var(--sp-5);
}
.ledger tbody td { padding: var(--sp-4) var(--sp-5); font-size: 0.9rem; border-bottom: 1px solid var(--line); }
.ledger tbody tr:last-child td { border-bottom: 0; }
.ledger .status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ok);
  white-space: nowrap;
}
.ledger .status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.ledger .status.is-placeholder { color: var(--warn); }

.spec-table { margin: 0; }
/* Was padding: 13px 0 - the 0 zeroed the left inset, so the label column sat
   flush at the row's left end, level with the borders Bootstrap draws under
   each cell, and the magic 13px broke the vertical rhythm of the other two
   label/value tables. Now matches .ledger, the closest analogue (row headers
   plus a value column). */
.spec-table th, .spec-table td { padding: var(--sp-4) var(--sp-5); font-size: 0.9rem; }
.spec-table th { color: var(--muted); font-weight: 500; width: 45%; }
.spec-table td { font-weight: 600; }

/* ============================================================
   16. PAYMENTS
   ============================================================ */

.pay-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.pay-card {
  background: var(--navy);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  height: 100%;
  transition: transform .25s ease, border-color .25s ease;
}
.pay-card:hover { transform: translateY(-4px); border-color: var(--gold); }
.pay-card .pay-mark {
  display: flex;
  align-items: center;
  min-height: 38px;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.03em;
  margin-bottom: var(--sp-3);
}
.pay-card p { margin: 0; font-size: 0.85rem; color: var(--muted-dark); line-height: 1.65; }
.pay-card .pay-note {
  display: inline-block;
  margin-top: var(--sp-3);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}

.card-brands { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--sp-5); align-items: center; }
/* One chip box for every child, whatever it contains. Height is pinned with
   min-height and the content is centred, so a text wordmark and a 16px SVG
   logo land on the same baseline and the same box in a shared flex row.
   Previously text chips used 7px/12px padding with the default line-height
   while logo chips used 6px/11px with line-height:1, which made the row
   visibly ragged. */
/* direct children only - the visually-hidden label inside a logo chip is a
   span too, and must not pick up the chip border */
.card-brands > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: var(--ui-leading);
  color: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-sm);
}
.card-brands.on-light > span { color: var(--muted); border-color: var(--line); }
/* Card network wordmarks (Visa / Mastercard) in black. The white chip
   background is required, not decorative: the same block appears in
   .section-dark on the home page, where black text alone would be invisible. */
.card-brands > span.net { color: #000; background: #fff; border-color: rgba(10, 16, 32, 0.14); }

/* payment brand marks (Payoneer, Wise) - inline SVG so the fill follows the
   surface it sits on; downloaded sources live in images/brands/ */
.brand-logo {
  height: var(--icon-md);
  width: auto;
  fill: currentColor;
  vertical-align: -0.16em;
  flex: none;
}
.brand-logo.wise { fill: #163300; }
.brand-logo.payoneer { fill: #FF4800; }
/* on dark sections the deep-green Wise mark would disappear, so it flips to the
   brand's bright green there (Payoneer orange reads on both surfaces) */
.section-dark .brand-logo.wise,
.section-ink .brand-logo.wise,
.cta-band .brand-logo.wise,
.card-brands:not(.on-light) .brand-logo.wise { fill: #9FE870; }
/* Steps of the shared icon scale, not one-off values. The card-brands logo chip
   is --icon-md + 12px padding + 2px border, which equals the 30px min-height on
   .card-brands > span, so logo and text chips are exactly the same box. */
.card-brands .brand-logo { height: var(--icon-md); }
.pay-card .pay-mark .brand-logo { height: var(--icon-lg); }
.order-facts b .brand-logo { margin-right: 7px; }
.pay-option .brand-logo { height: var(--icon-sm); margin-left: auto; align-self: center; }

/* ============================================================
    WISHLIST
    ============================================================ */
.wish-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.92);
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}
.wish-btn:hover { color: var(--gold-text); border-color: var(--gold-deep); transform: translateY(-2px); }
.wish-btn.is-active { color: var(--gold-text); border-color: var(--gold-deep); background: rgba(228, 196, 137, 0.18); }
.wish-btn:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.buy-row .wish-btn { position: static; width: auto; height: auto; border-radius: var(--r-pill); padding: 0.8125rem 1.4rem; font-size: 0.9rem; font-weight: 600; gap: 8px; grid-auto-flow: column; }
.wish-note { display: block; margin-top: 6px; font-size: 0.78rem; color: var(--muted); }

/* ============================================================
   17. ACCORDION  (Bootstrap accordion, re-skinned)
   ============================================================ */

.accordion {
  --bs-accordion-border-color: var(--line);
  --bs-accordion-border-radius: 0;
  --bs-accordion-inner-border-radius: 0;
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-active-bg: var(--cream);
  --bs-accordion-active-color: var(--text);
  --bs-accordion-bg: transparent;
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-btn-color: var(--text);
  --bs-accordion-body-color: var(--muted);
}
.accordion-item { background: transparent; border: 0; border-bottom: 1px solid var(--line); }
.accordion-item:first-child { border-top: 1px solid var(--line); }
.accordion-button {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  /* Left inset is load-bearing, not decoration: .accordion-item draws a
     horizontal rule under every item (and above the first), and a 0 left
     padding put the question text level with the end of that rule, so it read
     as glued to the edge. Button and body use the same --sp-4 so a question
     and its answer stay on the same vertical line. */
  padding: var(--sp-5) var(--sp-8) var(--sp-5) var(--sp-4);
  background: transparent;
  box-shadow: none !important;
  letter-spacing: 0;
  /* The body sets line-height 1.65, which inflates this label's line box to
     ~25px while the chevron is a 14px box. The extra leading is not optically
     symmetric - more descender space than ascender - so the glyphs' visual
     centre sits above the line-box centre and the centred chevron drifts low
     against the question. --ui-leading from section 1b brings the two back
     into agreement. Do not raise this to match the body again. */
  line-height: var(--ui-leading);
}
.accordion-button:not(.collapsed) { color: var(--gold-text); }
/* the bronze above is for light panels only; on the dark variant the active
   label must go back to champagne gold or it fails 3:1 on midnight */
.accordion-dark .accordion-button:not(.collapsed) { color: var(--gold); }
.accordion-button::after {
  width: 14px;
  height: 14px;
  background-size: 14px;
  /* Bootstrap leaves background-position at its 0% 0% default, so the icon
     only centres because the SVG viewBox happens to be symmetric. Pin it, or
     the chevron shifts the moment the artwork changes. */
  background-position: center;
  background-repeat: no-repeat;
  align-self: center;
  filter: none;
  opacity: 1;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23BE9A55' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
.accordion-body {
  /* Matches .accordion-button's left inset so answer text lines up with its
     question instead of hanging back to the rule's edge. */
  padding: 0 var(--sp-8) var(--sp-5) var(--sp-4);
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--muted);
}
.accordion-flush .accordion-item:last-child { border-bottom: 0; }

.accordion-dark {
  --bs-accordion-border-color: rgba(255, 255, 255, 0.1);
  --bs-accordion-btn-color: #fff;
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-active-bg: rgba(228, 196, 137, 0.08);
  --bs-accordion-active-color: var(--gold);
  --bs-accordion-body-color: var(--muted-dark);
}
.accordion-dark .accordion-item { border-color: rgba(255, 255, 255, 0.1); }
.accordion-dark .accordion-item:first-child { border-color: rgba(255, 255, 255, 0.1); }
.accordion-dark .accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23E4C489' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
.accordion-dark .accordion-body { color: var(--muted-dark); }

/* ============================================================
   18. NEWSLETTER
   ============================================================ */

.newsletter {
  background:
    radial-gradient(600px 300px at 15% 20%, rgba(228, 196, 137, 0.18), transparent 65%),
    linear-gradient(140deg, var(--ink), var(--midnight));
  color: #fff;
  border-radius: var(--r-lg);
  padding: var(--sp-9);
  position: relative;
  overflow: hidden;
}
.newsletter h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.newsletter p { color: var(--muted-dark); font-size: 0.9375rem; }
.news-form { display: flex; gap: 10px; flex-wrap: wrap; }
.news-form .form-control {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
  min-width: 220px;
  flex: 1;
}
.news-form .form-control::placeholder { color: rgba(255, 255, 255, 0.45); }
.news-form .form-control:focus {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--gold);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(228, 196, 137, 0.22);
}
.news-note { font-size: 11.5px; color: rgba(255, 255, 255, 0.45); margin: 0; }

/* ============================================================
   19. PAGE HERO / BREADCRUMB
   ============================================================ */

/* url() is relative to THIS stylesheet (assets/css/), not the site root, so the
   cover needs ../../ to reach D:\em\images\. Layer order is top-first: the two
   masks, then the scrim, then the photo, then the fallback gradient. */
.page-hero {
  background:
    linear-gradient(to right, var(--ink) 0%, rgba(9, 18, 32, 0.94) 22%, rgba(9, 18, 32, 0.6) 48%, rgba(9, 18, 32, 0) 74%),
    linear-gradient(to bottom, rgba(9, 18, 32, 0.45) 0%, rgba(9, 18, 32, 0) 34%, rgba(9, 18, 32, 0) 66%, rgba(9, 18, 32, 0.55) 100%),
    url("../images/hero-cover.jpg") right center / cover no-repeat,
    radial-gradient(760px 340px at 82% 0%, rgba(228, 196, 137, 0.18), transparent 70%),
    linear-gradient(155deg, var(--ink), var(--midnight) 70%, #0D1730);
  background-color: var(--ink);
  color: #fff;
  padding: var(--sp-11) 0 var(--sp-10);
  border-bottom: 1px solid var(--line-dark);
  position: relative;
  overflow: hidden;
}
.page-hero h1 { font-size: clamp(2.2rem, 4.2vw, 3.3rem); margin-bottom: var(--sp-4); }
.page-hero p { color: rgba(255, 255, 255, 0.68); max-width: 64ch; margin: 0; }
.breadcrumb {
  /* Bootstrap 5.3.3 reads var(--bs-breadcrumb-font-size) but never declares it
     anywhere (upstream gap), and empties --bs-breadcrumb-bg on this very
     element - so both bridge here where nothing can shadow them. */
  --bs-breadcrumb-font-size: 11.5px;
  --bs-breadcrumb-bg: transparent;
  display: flex;
  gap: 9px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.48);
  margin-bottom: var(--sp-5);
  padding: 0;
}
.breadcrumb-item + .breadcrumb-item::before { content: none; }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb .sep, .breadcrumb-item.active { color: var(--gold); }

/* ============================================================
   20. SHOP
   ============================================================ */

/* .filter-bar and .filter-btn were removed with the old pill row. The panel
   below reuses the same --bs-btn-* token values, so the control still reads as
   part of the design system. */

/* 315x145 brand plate (about-us, logo) dropped into a panel or footer. Sits on
   a white plate because the source artwork has a light background. */
.brand-strip {
  display: block;
  width: 100%;
  max-width: 315px;
  height: auto;
  margin: 0 0 var(--sp-4);
  border-radius: var(--r-sm);
}
/* .brand-strip-foot was removed with the about-us.jpg footer label. The base
   .brand-strip is still used on the contact page. */

.sort-note { margin-left: auto; font-size: 12.5px; color: var(--muted); }

/* Right-hand filter panel, grouped by size. Two columns on desktop with the
   panel on the right, collapsing to one column on tablets and phones - the
   panel stacks ABOVE the grid, because a filter under the results is a
   scroll-the-past-it control. */
.shop-layout {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  gap: var(--sp-7);
  align-items: start;
  /* No bottom margin: the <hr class="divider"> that follows already carries
     48px, so adding 40px here stacked to 88px of dead space between the
     product grid and the info cards below it. */
  margin-bottom: 0;
}
.shop-main { min-width: 0; }
/* the sort note is the result count above the grid, not a trailing item in a
   button row, so it must not keep the old auto margin */
.shop-main .sort-note { margin: 0; font-weight: 600; color: var(--text); }

.filter-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  position: sticky;
  top: calc(var(--header-h) + var(--sp-5));
}
.filter-panel-title {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.filter-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.filter-clear {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--gold-text);
  text-decoration: underline;
  cursor: pointer;
}
.filter-clear:hover { color: var(--gold-deep); }
.filter-clear:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* fieldset resets the browser's own border/legend chrome so the group can
   carry the theme's rule + spacing instead */
.filter-group {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
/* Space above AND below the group rule adds up, so these are deliberately not
   both --sp-5. At 20 + 20 the five groups cost 160px of dead space in a
   264px panel; 16 + 12 keeps the separation without the panel dragging the
   full height of the product grid. */
.filter-group + .filter-group { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.filter-group-head {
  display: block;
  width: 100%;
  float: none;                 /* legends ignore float and would sink the group */
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--sp-3);
  padding: 0;
}

/* finish swatch inside a row label */
.filter-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
  margin-right: 9px;
  flex: none;
}

/* One row = one filter option. Built from the same --bs-btn-* tokens as
   .filter-btn so the two read as one control, but as a full-width row with a
   label, an optional meta line and a count rather than a pill. */
.filter-row {
  --bs-btn-color: var(--text);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: var(--line);
  --bs-btn-hover-color: var(--gold-deep);
  --bs-btn-hover-bg: var(--cream-2);
  --bs-btn-hover-border-color: var(--gold-deep);
  --bs-btn-active-color: var(--gold);
  --bs-btn-active-bg: var(--midnight);
  --bs-btn-active-border-color: var(--midnight);
  --bs-btn-padding-y: 0.625rem;
  --bs-btn-padding-x: 0.875rem;
  --bs-btn-font-size: 0.875rem;
  --bs-btn-font-weight: 600;
  /* Bootstrap supplies border-radius, padding, border, colour and background
     from these vars, so the markup MUST carry class="btn" as well as
     filter-row. Without .btn this rule sets only variables and nothing
     consumes them, and the row renders as a default browser button. */
  --bs-btn-border-radius: var(--r-sm);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2px var(--sp-3);
  width: 100%;
  text-align: left;
}
.filter-row:hover { transform: none; }
.filter-row.is-active { color: var(--gold); background: var(--midnight); border-color: var(--midnight); }
.filter-row-label { grid-column: 1; display: flex; align-items: center; }
/* meta sits under the label, and spans under the count so the two columns of
   the grid stay aligned for every row */
.filter-row-meta {
  grid-column: 1 / -1;
  grid-row: 2;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.filter-row.is-active .filter-row-meta { color: rgba(255, 255, 255, 0.66); }
.filter-row-count {
  grid-column: 2;
  grid-row: 1;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.filter-row.is-active .filter-row-count { color: var(--gold); }

/* a row with no possible matches under the current filters reads as inert */
.filter-row.is-empty:not(.is-active) { opacity: 0.45; }

/* active-filter chips + result line, above the grid */
.filter-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.filter-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  background: var(--cream-2);
  border-radius: var(--r-pill);
  padding: 4px 10px 4px 11px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}
.filter-chip:hover { background: var(--cream-3); }
.filter-chip .bi { font-size: 13px; line-height: 1; color: var(--muted); }
.filter-chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.filter-empty {
  margin: 0;
  padding: var(--sp-8) 0;
  text-align: center;
  color: var(--muted);
}
.filter-reset-link {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--gold-text);
  text-decoration: underline;
  cursor: pointer;
}

@media (max-width: 991.98px) {
  .shop-layout { grid-template-columns: minmax(0, 1fr); }
  .filter-panel { position: static; order: -1; }
  .shop-main { order: 1; }
}

/* ============================================================
   21. PRODUCT DETAIL
   ============================================================ */

.gallery-main {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: var(--sp-3); }
.gallery-thumbs button {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: var(--r-sm);
  padding: 5px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  transition: border-color .2s ease;
}
.gallery-thumbs button img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.gallery-thumbs button.is-active, .gallery-thumbs button:hover { border-color: var(--gold-deep); }

.pdp-info h1 { font-size: clamp(1.9rem, 3vw, 2.6rem); margin-bottom: var(--sp-3); }
.pdp-price { display: flex; align-items: baseline; gap: var(--sp-4); margin: var(--sp-6) 0 var(--sp-2); flex-wrap: wrap; }
.pdp-price .now { font-family: var(--font-display); font-size: 2.75rem; font-weight: 700; color: var(--text); line-height: 1; }
.pdp-price .was { font-family: var(--font-body); font-weight: 400; color: var(--muted); text-decoration: line-through; font-size: 1.0625rem; }
.pdp-price .off {
  background: rgba(47, 138, 99, 0.13);
  color: var(--ok);
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.variant-row { margin-top: var(--sp-6); }
.variant-row .label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--sp-3);
}
.variant-options { display: flex; flex-wrap: wrap; gap: 10px; }
.variant-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: var(--r-pill);
  padding: 9px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  transition: border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.variant-btn .dot { width: 15px; height: 15px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .2); flex: none; }
.variant-btn.is-active { border-color: var(--gold-text); box-shadow: 0 0 0 1px var(--gold-text); color: var(--gold-text); }

.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  overflow: hidden;
  background: #fff;
}
.qty button {
  width: 42px;
  height: 46px;
  border: 0;
  background: none;
  font-size: 1.1rem;
  color: var(--muted);
  transition: background .2s ease, color .2s ease;
}
.qty button:hover { background: var(--cream-2); color: var(--text); }
.qty input {
  width: 46px;
  border: 0;
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
  background: none;
  -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty input:focus { outline: none; }

.buy-row { display: flex; gap: 12px; align-items: center; margin: var(--sp-7) 0 var(--sp-6); flex-wrap: wrap; }

.assurances { display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: var(--sp-6); }
.assurances > div { display: flex; align-items: center; gap: 11px; font-size: 0.85rem; color: var(--muted); }
.assurances .bi { font-size: 1.05rem; color: var(--gold-text); flex: none; }
.assurances.no-top { border-top: 0; padding-top: 0; }

/* sticky mobile add-to-cart */
.sticky-atc {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1040;
  display: none;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  background: rgba(10, 16, 32, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line-dark);
  transform: translateY(110%);
  transition: transform .32s cubic-bezier(.2, .9, .3, 1);
}
.sticky-atc.is-on { transform: translateY(0); }
.sticky-atc .sticky-price { display: grid; line-height: 1.25; margin-right: auto; }
.sticky-atc .sticky-price b { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; color: var(--gold-bright); }
.sticky-atc .sticky-price small { font-size: 10.5px; color: rgba(255, 255, 255, 0.5); letter-spacing: 0.06em; }
@media (max-width: 991.98px) {
  .sticky-atc { display: flex; }
  body.has-sticky-atc { padding-bottom: 76px; }
}

/* ============================================================
   22. CART / CHECKOUT
   ============================================================ */

.panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-8);
}
.panel h2 { font-size: 1.5rem; margin-bottom: 6px; }
.panel .sub { color: var(--muted); font-size: 0.875rem; margin: 0 0 var(--sp-5); }
.panel-sticky { position: sticky; top: calc(var(--header-h) + var(--sp-5)); }

.cart-line {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: var(--sp-4);
  /* Was var(--sp-5) 0. The 0 put the thumbnail and title flush against this
     row's own border-bottom, and out of step with the other bordered rows
     (.ledger, .compare, .spec-table), which all inset sp-4 / sp-5. */
  padding: var(--sp-5) var(--sp-5);
  border-bottom: 1px solid var(--line);
  align-items: center;
}
.cart-line:last-of-type { border-bottom: 0; }
.cart-line img {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--cream);
}
.cart-line h4 { font-size: 1.1rem; margin: 0 0 5px; }
.cart-line .meta { font-size: 12px; color: var(--muted); letter-spacing: 0.04em; }
.cart-line .line-right { text-align: right; display: grid; gap: 10px; justify-items: end; }
.line-total { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; }
.remove-btn {
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0;
}
.remove-btn:hover { color: #B4452C; }

.summary-row {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  font-size: 0.9rem;
  padding: 11px 0;
  color: var(--muted);
}
.summary-row.total {
  border-top: 1px solid var(--line);
  margin-top: var(--sp-2);
  padding-top: var(--sp-4);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
}
.summary-row.total span:last-child { color: var(--text); }

/* order-confirmation facts grid (order-received page) */
.order-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--sp-4);
  /* Same defect as .cart-line: the 0 left the labels flush against this
     block's own top and bottom rules. */
  padding: var(--sp-5) var(--sp-5);
  margin: var(--sp-5) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.order-facts span {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
}
.order-facts b { font-size: 0.95rem; font-weight: 600; word-break: break-word; }
.order-items .cart-line:last-child { border-bottom: 1px solid var(--line); }

/* order-tracking timeline (tracking page) */
.track-steps { list-style: none; margin: 0; padding: 0; }
.track-steps li { position: relative; padding: 0 0 var(--sp-6) 34px; }
.track-steps li:last-child { padding-bottom: 0; }
.track-steps li::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 22px;
  bottom: -2px;
  width: 2px;
  background: var(--line);
}
.track-steps li:last-child::before { display: none; }
.track-steps li::after {
  content: '';
  position: absolute;
  left: 1px;
  top: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(10, 16, 32, 0.22);
}
.track-steps li.done::after { background: var(--gold); border-color: var(--gold-deep); }
.track-steps li.done::before { background: var(--gold-deep); }
.track-steps li.active::after {
  background: var(--gold);
  border-color: var(--gold-deep);
  box-shadow: 0 0 0 4px rgba(228, 196, 137, 0.28);
}
.track-steps h4 { font-size: 0.95rem; font-weight: 600; margin: 0 0 2px; }
.track-steps li.pending h4 { color: var(--muted); }
.track-steps .step-date { display: block; font-size: 0.8rem; color: var(--muted); }

.pay-options { display: grid; gap: 12px; }
.pay-option {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
  background: #fff;
}
.pay-option:hover { border-color: var(--gold-deep); }
.pay-option.is-active {
  border-color: var(--gold-deep);
  box-shadow: 0 0 0 1px var(--gold-deep);
  background: rgba(228, 196, 137, 0.06);
}
.pay-option input { margin-top: 4px; accent-color: var(--gold-deep); flex: none; }
.pay-option strong { display: block; font-size: 0.9rem; margin-bottom: 3px; }
.pay-option small { color: var(--muted); font-size: 0.8125rem; line-height: 1.6; display: block; }

.form-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}
.form-control, .form-select {
  border-color: var(--line);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  font-size: 0.9375rem;
  background-color: #fff;
  color: var(--text);
}
.form-control:focus, .form-select:focus {
  border-color: var(--gold-deep);
  box-shadow: 0 0 0 3px rgba(228, 196, 137, 0.22);
  background-color: #fff;
}
.form-control::placeholder { color: #98A2B3; }

.form-note {
  font-size: 12.5px;
  color: var(--muted);
  background: var(--cream);
  border: 1px dashed rgba(190, 154, 85, 0.5);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  margin: 0;
}
.form-note.solid { border-style: solid; background: #fff; }

.empty-state { text-align: center; padding: var(--sp-13) var(--sp-5); }
.empty-state .star { width: 52px; height: 52px; color: var(--gold); margin: 0 auto var(--sp-4); }
.empty-state h3 { font-size: 1.7rem; margin-bottom: var(--sp-2); }
.empty-state p { color: var(--muted); margin: 0 0 var(--sp-6); }

/* ============================================================
   23. INFO CARDS  (was "VERIFICATION" - that page was removed;
   .doc-card is still used by shop.html, the rest went with it)
   ============================================================ */

.doc-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.doc-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-soft); }
.doc-card .doc-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  background: var(--midnight);
  color: var(--gold);
  display: grid;
  place-items: center;
  margin-bottom: var(--sp-4);
  font-size: 1.2rem;
  flex: none;
}
.doc-card h4 { font-size: 1.15rem; margin: 0 0 var(--sp-2); }
.doc-card p { margin: 0 0 var(--sp-3); font-size: 0.875rem; color: var(--muted); line-height: 1.6; }
.doc-card .btn { margin-top: auto; }
/* .doc-value, .placeholder-flag, .cert-card and .cert-mark were removed with
   verification.html. They had no other consumer on the site. */

/* ============================================================
   24. WIKI
   ============================================================ */

.wiki-side {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  position: sticky;
  top: calc(var(--header-h) + var(--sp-5));
}
.wiki-side h5 { margin: 0 0 var(--sp-3); color: var(--muted); }
.wiki-side a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  font-size: 0.875rem;
  color: var(--muted);
  transition: background .18s ease, color .18s ease;
}
.wiki-side a:hover { background: var(--cream-2); color: var(--text); }
.wiki-side a.is-active { background: var(--midnight); color: var(--gold); }
.wiki-side a span { font-size: 11.5px; opacity: 0.7; }

.search-box {
  display: flex;
  align-items: center;
  gap: 11px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 13px 20px;
  margin-bottom: var(--sp-8);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.search-box:focus-within { border-color: var(--gold-deep); box-shadow: 0 0 0 3px rgba(228, 196, 137, 0.2); }
.search-box .bi { color: var(--muted); flex: none; }
.search-box input {
  border: 0;
  outline: none;
  flex: 1;
  font-size: 0.9375rem;
  background: none;
  color: var(--text);
  min-width: 0;
}

.wiki-group { margin-bottom: var(--sp-11); }
.wiki-group > h3 {
  font-size: 1.4rem;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.wiki-group > h3 .star { width: 19px; height: 19px; color: var(--gold-text); flex: none; }
.wiki-group > p { color: var(--muted); font-size: 0.9rem; margin: 0 0 var(--sp-5); }

.article-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-sm); }
.article-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-5) var(--sp-6);
  height: 100%;
  transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.article-card:hover { border-color: var(--gold-deep); transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.article-card h4 { font-size: 1.12rem; margin: 0 0 7px; }
.article-card p { margin: 0; font-size: 0.85rem; color: var(--muted); line-height: 1.62; }
.article-card .read {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: var(--sp-3);
  font-size: 12px;
  font-weight: 600;
  color: var(--gold-text);
  letter-spacing: 0.05em;
}

/* ============================================================
   25. CTA BAND
   ============================================================ */

.cta-band {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(600px 300px at 15% 20%, rgba(228, 196, 137, 0.2), transparent 65%),
    linear-gradient(140deg, var(--ink), var(--midnight));
  color: #fff;
  border-radius: var(--r-lg);
  padding: var(--sp-10);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
  flex-wrap: wrap;
}
.cta-band h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); max-width: 18ch; }
.cta-band p { color: rgba(255, 255, 255, 0.64); margin: var(--sp-4) 0 0; max-width: 52ch; }

/* ============================================================
   26. FOOTER
   ============================================================ */

.site-footer {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.62);
  padding: var(--sp-12) 0 var(--sp-7);
  border-top: 1px solid var(--line-dark);
}
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--sp-9) var(--sp-8); padding-bottom: var(--sp-9); }
.footer-grid h6 { color: var(--gold); margin: 0 0 var(--sp-4); }
.footer-grid ul { display: grid; gap: 11px; }
.footer-grid a { font-size: 0.875rem; color: rgba(255, 255, 255, 0.62); transition: color .2s ease; }
.footer-grid a:hover { color: var(--gold); }
.footer-about p { font-size: 0.875rem; line-height: 1.7; margin: var(--sp-4) 0 0; max-width: 40ch; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  padding-top: var(--sp-5);
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  font-size: 12.5px;
}
.footer-legal { display: flex; gap: 6px 16px; flex-wrap: wrap; align-items: center; }
.footer-legal a {
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  transition: color .2s ease;
}
.footer-legal a:hover { color: var(--gold); }
.policy-links { list-style: none; padding: 0; margin: var(--sp-4) 0 0; display: grid; gap: 10px; }
.policy-links a {
  color: var(--gold);
  font-size: 0.9rem;
  text-decoration: none;
}
.policy-links a:hover { text-decoration: underline; }

/* ============================================================
   27. TOAST
   ============================================================ */

.toast {
  position: fixed;
  right: var(--sp-6);
  bottom: var(--sp-6);
  z-index: 1080;
  background: var(--midnight);
  color: #fff;
  border: 1px solid var(--line-dark);
  border-radius: var(--r-pill);
  padding: 14px 24px 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.875rem;
  box-shadow: var(--shadow-card);
  transform: translateY(160%);
  opacity: 0;
  transition: transform .4s cubic-bezier(.2, .9, .3, 1), opacity .3s ease;
  pointer-events: none;
  max-width: calc(100vw - var(--sp-8));
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast .star { width: 19px; height: 19px; color: var(--gold); flex: none; }

/* ============================================================
   28. AOS SAFETY NET
   Bootstrap/theme sets these; AOS drives the motion.
   ============================================================ */

[data-aos] { pointer-events: auto; }
.no-motion [data-aos], .no-motion .swiper-button-next, .no-motion .swiper-button-prev { transition: none !important; }

/* ============================================================
   29. RESPONSIVE
   ============================================================ */

/* Overflow guards. The recurring cause of sideways scroll on phones was
   unbreakable content, not missing breakpoints: a fixed-size control
   (icon button, qty stepper, swatch row) plus its label had to fit inside
   a shrinking flex row. These make the long token the thing that gives,
   and let the boxes themselves shrink. */
.cart-line h4,
.order-facts b,
.summary-row span,
.meta,
.form-note,
.empty-state p,
.crumb-note {
  overflow-wrap: anywhere;
}
.cart-line > *,
.summary-row > *,
.assurances > div,
.pay-option > *,
.wiki-group > *,
.search-box > * {
  min-width: 0;
}

@media (max-width: 1199.98px) {
  .pay-grid { grid-template-columns: repeat(2, 1fr); }
  .features { grid-template-columns: repeat(2, 1fr); }
  .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spec-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 991.98px) {
  :root { --header-h: 64px; }
  .pdp-gallery { order: -1; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .panel-sticky { position: static; }
  .article-grid { grid-template-columns: 1fr; }
  /* the row shares the bar with the wordmark, so it tightens before the
     logo does - the logo is the identity, the gap is not */
  .site-header .header-bar { gap: var(--sp-4); }
}

@media (max-width: 767.98px) {
  :root {
    --section-y: var(--sp-11);
    --gutter: var(--sp-4);
  }
  .section { padding: var(--sp-11) 0; }
  .hero { padding: var(--sp-10) 0 var(--sp-11); min-height: 0; }
  /* stacked layout - the photo sits on top of the copy, masked on all sides */
  .hero { display: block; }
  .hero-media img { object-position: 72% center; }
  .hero-media::after {
    background: linear-gradient(to bottom, rgba(9, 18, 32, 0.55) 0%, rgba(9, 18, 32, 0) 30%, rgba(9, 18, 32, 0.85) 100%);
  }
  .hero::before {
    background: linear-gradient(to bottom, rgba(9, 18, 32, 0.5) 0%, rgba(9, 18, 32, 0) 22%, rgba(9, 18, 32, 0) 62%, rgba(9, 18, 32, 0.7) 100%);
  }
  .hero .hero-copy { max-width: 100%; }
  .page-hero { padding: var(--sp-9) 0 var(--sp-8); }
  .panel { padding: var(--sp-6) var(--sp-5); }
  .collage { grid-template-columns: 1fr; }
  .collage figure { aspect-ratio: 16 / 11; }
  .pay-grid, .spec-grid, .footer-grid { grid-template-columns: 1fr; }
  .features { grid-template-columns: 1fr; }
  .cart-line { grid-template-columns: 68px 1fr; }
  .cart-line img { width: 68px; height: 68px; }
  .cart-line .line-right { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; width: 100%; }
  .newsletter { padding: var(--sp-7) var(--sp-5); }
  .cta-band { padding: var(--sp-8) var(--sp-6); }
  .sort-note { margin-left: 0; width: 100%; }
  .toast { right: var(--sp-4); left: var(--sp-4); bottom: var(--sp-4); justify-content: center; }

  /* iOS zooms any focused input under 16px, which resizes the viewport and
     jumps the page mid-interaction. Inputs match the page size on phones.
     (checkbox/radio boxes are sized by the UA and ignore this) */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea { font-size: 16px; }

  /* single scrolling line instead of a 3-line stack */
  .topbar .container {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    gap: var(--sp-5);
  }
  .topbar .container::-webkit-scrollbar { display: none; }
  .topbar-item { white-space: nowrap; }
}

@media (max-width: 575.98px) {
  .gallery-thumbs { grid-template-columns: repeat(4, 1fr); }
  .hero-stats { gap: var(--sp-6); }
  .card-actions { flex-direction: column; }
  .card-actions .btn { width: 100%; }

  /* ---- header: every icon is 40px + the wordmark no longer fits 390px,
     so the whole bar scales rather than pushing the last icon off-screen.
     3 icons (108) + toggler (36) + 3 gaps (24) + logo (137) = 305 of 328
     available at 360px. ---- */
  .site-header .header-bar { gap: var(--sp-3); }
  .header-actions { gap: var(--sp-2); }
  .icon-btn, .navbar-toggler { width: 36px; height: 36px; }
  .icon-btn .bi { font-size: 1rem; }
  .cart-badge { min-width: 17px; height: 17px; font-size: 9.5px; top: -4px; right: -4px; padding: 0 4px; }
  .logo { gap: 8px; }
  .logo .star { width: 26px; height: 26px; }
  .logo-word { font-size: 22px; letter-spacing: 0.05em; }
  .logo-tag { display: none; }

  /* long labels wrap instead of forcing the row wider than the screen */
  .btn { white-space: normal; text-align: center; }

  /* sticky add-to-cart: same arithmetic, price kept, stepper scaled */
  .sticky-atc { gap: var(--sp-2); padding-left: var(--sp-3); padding-right: var(--sp-3); }
  .sticky-atc .sticky-price b { font-size: 1.15rem; }
  .sticky-atc .qty button { width: 34px; height: 36px; }
  .sticky-atc .qty input { width: 38px; }
  .sticky-atc .btn { --bs-btn-padding-x: 1rem; --bs-btn-font-size: 0.85rem; }

  .empty-state { padding: var(--sp-9) var(--sp-4); }
  .empty-state h3 { font-size: 1.4rem; }
  .buy-row .wish-btn { padding: 0.8125rem 1rem; }
}

/* 320-380px: below this the remaining gaps go, not the identity. The account
   link is the only header item with a full-page equivalent (my-account.html
   is linked from the footer and the mobile nav), and the sticky bar already
   has the qty control in the PDP buy row. */
@media (max-width: 380px) {
  .header-actions .acct { display: none; }
  .news-form .form-control { min-width: 0; }
  .sticky-atc .qty { display: none; }
  .btn-lg { --bs-btn-padding-x: 1.25rem; --bs-btn-font-size: 0.9rem; }
  .panel { padding: var(--sp-5) var(--sp-4); }
  .section { padding: var(--sp-10) 0; }
}

/* ============================================================
   30. MOTION / PRINT
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover, .product-card:hover, .step:hover, .doc-card:hover,
  .article-card:hover, .collage figure:hover img, .product-card:hover .product-media img {
    transform: none;
  }
}

@media print {
  .topbar, .site-header, .site-footer, .sticky-atc, .toast, .hero::after { display: none !important; }
  body { background: #fff; }
  .section { padding: 24px 0; }
}

/* ============================================================
   ELUMARA AUTH (login / register)
   ============================================================ */
.el-auth { padding: var(--section-y) 0; background: var(--cream); }
.el-auth-card { max-width: 460px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-9); box-shadow: var(--shadow-soft); }
.el-auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: var(--sp-6); }
.el-auth-brand .star { width: 26px; height: 26px; color: var(--gold); }
.el-auth-brand .logo-word { font-family: var(--font-brand); font-size: 22px; font-weight: 700; letter-spacing: .07em; color: var(--text); }
.el-auth-tabs { display: flex; gap: 8px; margin-bottom: var(--sp-6); }
.el-auth-tab { flex: 1; padding: 10px; border: 1px solid var(--line); background: #fff; border-radius: var(--r-pill); font-weight: 600; color: var(--muted); cursor: pointer; transition: all .2s ease; }
.el-auth-tab.is-active { background: var(--midnight); color: #fff; border-color: var(--midnight); }
.el-auth-title { font-size: 1.6rem; margin-bottom: var(--sp-2); }
.el-auth-sub { color: var(--muted); font-size: .9rem; margin-bottom: var(--sp-6); }
.el-auth-form .form-row { margin-bottom: var(--sp-4); }
.el-auth-form label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 6px; }
.el-auth-form .input-text { width: 100%; padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--r-md); font-size: .95rem; }
.el-auth-form .input-text:focus { border-color: var(--gold-deep); outline: none; box-shadow: 0 0 0 3px rgba(228,196,137,.22); }
.el-auth-links { margin-top: var(--sp-4); font-size: .85rem; }
.el-auth-links a { color: var(--gold-text); }

/* ============================================================
   SHOP FILTER BAR (restored from static style.css)
   ============================================================ */
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: var(--sp-8); }
.filter-btn { --bs-btn-color: var(--muted); --bs-btn-bg: #fff; --bs-btn-border-color: var(--line); --bs-btn-hover-color: var(--gold-deep); --bs-btn-hover-bg: #fff; --bs-btn-hover-border-color: var(--gold-deep); --bs-btn-active-color: var(--gold); --bs-btn-active-bg: var(--midnight); --bs-btn-active-border-color: var(--midnight); --bs-btn-padding-y: 0.5625rem; --bs-btn-padding-x: 1.125rem; --bs-btn-font-size: 0.8125rem; --bs-btn-font-weight: 600; border-radius: var(--r-pill); }
.filter-btn:hover { transform: none; }
.filter-btn.is-active { color: var(--gold); background: var(--midnight); border-color: var(--midnight); }