/* ═══════════════════════════════════════════════════════════════════════
   VERDAAN: Design System
   One stylesheet for every page. Page-specific rules live in
   /assets/css/pages/*.css and only add to (never redefine) these tokens.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */
:root {
  /* Brand palette (Brand Identity guide) */
  --vault:        #1A3028;   /* Vault Green, dominant */
  --forest:       #234535;   /* Forest Deep */
  --emerald:      #2D5A42;
  --emerald-lt:   #3A7D5A;
  --sage:         #7AAB8A;
  --gold:         #C9A84C;   /* Royal Gold, accent only */
  --gold-lt:      #E2C97E;
  --gold-pale:    #F5ECD0;
  --ivory:        #FAF7F0;
  --offwhite:     #F5F0E8;
  --cream:        #F2EDE0;
  --midnight:     #0A120D;
  --midnight-2:   #0E1A14;
  --ruby:         #9B1B30;
  --sapphire:     #1B4F8A;
  --ink:          #2C3E30;   /* body text on light */
  --ink-soft:     #5A6E60;

  /* Semantic (dark theme is the default) */
  --bg:           var(--midnight);
  --bg-raised:    var(--midnight-2);
  --surface:      rgba(255,255,255,0.03);
  --text:         rgba(250,247,240,0.92);
  --text-soft:    rgba(250,247,240,0.68);
  --text-dim:     rgba(250,247,240,0.62);
  --line:         rgba(201,168,76,0.18);
  --line-strong:  rgba(201,168,76,0.42);
  --accent:       var(--gold);
  --accent-text:  var(--gold-lt);      /* passes AA on vault/midnight at all sizes */

  /* Type */
  --f-display: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --f-editorial: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
  --f-body: 'Jost', 'Futura', 'Helvetica Neue', Arial, sans-serif;

  --fs-display: clamp(2.75rem, 1.6rem + 5.6vw, 7.5rem);
  --fs-h1:      clamp(2.25rem, 1.5rem + 3.4vw, 4.75rem);
  --fs-h2:      clamp(1.75rem, 1.3rem + 2.1vw, 3.25rem);
  --fs-h3:      clamp(1.25rem, 1.05rem + 0.9vw, 1.875rem);
  --fs-h4:      clamp(1rem, 0.95rem + 0.3vw, 1.25rem);
  --fs-lead:    clamp(1.2rem, 1.05rem + 0.7vw, 1.75rem);
  --fs-body:    clamp(1rem, 0.97rem + 0.12vw, 1.0625rem);
  --fs-small:   0.875rem;
  --fs-eyebrow: 0.6875rem;

  /* Spacing scale */
  --s-1: 4px;  --s-2: 8px;  --s-3: 16px;  --s-4: 24px;
  --s-5: 40px; --s-6: 64px; --s-7: 104px; --s-8: 168px;
  --section-y: clamp(96px, 14vw, 200px);
  --gutter: clamp(16px, 4vw, 56px);
  --maxw: 1320px;
  --maxw-text: 68ch;

  /* Motion */
  --ease-lux: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-fast: 300ms;
  --t-med: 600ms;
  --t-slow: 1200ms;

  --header-h: 84px;
  --radius: 2px;
  --shadow-lux: 0 40px 120px -40px rgba(0,0,0,0.65);
  color-scheme: dark;
}

[data-theme="light"] {
  --bg:          var(--ivory);
  --bg-raised:   var(--offwhite);
  --surface:     rgba(26,48,40,0.035);
  --text:        var(--ink);
  --text-soft:   #4A5E50;
  --text-dim:    #5A6E60;
  --line:        rgba(26,48,40,0.14);
  --line-strong: rgba(150,118,40,0.55);
  --accent-text: #8A6D1E;            /* deep gold: AA on ivory */
  color-scheme: light;
}
[data-theme="vault"] { --bg: var(--vault); --bg-raised: var(--forest); }
[data-theme="forest"] { --bg: var(--forest); --bg-raised: var(--vault); }

/* ── 2. Reset & base ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--header-h); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  background: var(--midnight);
  color: var(--text);
  font-family: var(--f-body);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: 1.8;
  letter-spacing: 0.01em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
input, select, textarea { font-size: max(16px, 1em); }
::selection { background: var(--gold); color: var(--midnight); }
:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
[hidden] { display: none !important; }

.skip-link {
  position: fixed; left: var(--s-3); top: var(--s-3); z-index: 1000;
  padding: 12px 20px; background: var(--gold); color: var(--midnight);
  font-size: var(--fs-small); letter-spacing: 0.2em; text-transform: uppercase;
  transform: translateY(-200%); transition: transform var(--t-fast) var(--ease-lux);
}
.skip-link:focus { transform: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── 3. Typography ─────────────────────────────────────────────────────── */
.display, .h1, .h2, .h3, .h4, h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0.08em;
  color: var(--text);
  text-wrap: balance;
}
.display { font-size: var(--fs-display); letter-spacing: 0.12em; line-height: 1.02; }
h1, .h1 { font-size: var(--fs-h1); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); letter-spacing: 0.06em; }
h4, .h4 { font-size: var(--fs-h4); letter-spacing: 0.14em; text-transform: uppercase; }
.display em, h1 em, h2 em, .h1 em, .h2 em { font-family: var(--f-editorial); font-style: italic; letter-spacing: 0.01em; color: var(--accent-text); text-transform: none; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--f-body); font-weight: 400;
  font-size: var(--fs-eyebrow); letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--accent-text);
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .7; }
.eyebrow.center::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .7; }

.lead {
  font-family: var(--f-editorial); font-style: italic; font-weight: 300;
  font-size: var(--fs-lead); line-height: 1.5; color: var(--text-soft);
}
.prose { max-width: var(--maxw-text); }
.prose p + p { margin-top: 1.2em; }
.prose p { color: var(--text-soft); }
.small { font-size: var(--fs-small); }
.muted { color: var(--text-dim); }
.gold { color: var(--accent-text); }
.serif { font-family: var(--f-editorial); }
.caps { text-transform: uppercase; letter-spacing: 0.3em; font-size: var(--fs-eyebrow); }
.wordmark { font-family: var(--f-display); letter-spacing: 0.4em; font-weight: 400; }
.wordmark span { color: var(--gold); }

/* ── 4. Layout ─────────────────────────────────────────────────────────── */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.container-narrow { width: 100%; max-width: 880px; margin-inline: auto; padding-inline: var(--gutter); }
.section { position: relative; padding-block: var(--section-y); background: var(--bg); color: var(--text); isolation: isolate; overflow: hidden; }
.section-tight { padding-block: clamp(64px, 8vw, 120px); }
.section > .container, .section > .container-narrow { position: relative; z-index: 2; }
.section-head { display: grid; gap: var(--s-4); margin-bottom: clamp(48px, 7vw, 96px); max-width: 760px; }
.section-head.center { margin-inline: auto; text-align: center; justify-items: center; }
.grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 24px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 120px); align-items: center; }
.cards-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
.cards-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; }
@media (max-width: 1180px) { .cards-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.card h3 { overflow-wrap: break-word; hyphens: auto; }
.stack > * + * { margin-top: var(--s-4); }
.stack-sm > * + * { margin-top: var(--s-3); }
.row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.center { text-align: center; }
@media (max-width: 960px) {
  .split, .cards-3 { grid-template-columns: 1fr; }
  .cards-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px) { .cards-4 { grid-template-columns: 1fr; } }

/* Gold hairline that fades at both ends */
.hairline { height: 1px; border: 0; background: linear-gradient(90deg, transparent, var(--line-strong), transparent); }
.hairline-short { width: 96px; margin-inline: auto; }

/* ── 5. Buttons ────────────────────────────────────────────────────────── */
.btn {
  --btn-bg: transparent; --btn-fg: var(--accent-text); --btn-bd: var(--line-strong);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 0 34px;
  font-family: var(--f-body); font-weight: 400; font-size: 0.6875rem;
  letter-spacing: 0.32em; text-transform: uppercase; white-space: nowrap;
  background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-bd);
  overflow: hidden; isolation: isolate;
  transition: color var(--t-med) var(--ease-lux), border-color var(--t-med) var(--ease-lux), background var(--t-med) var(--ease-lux);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--gold); transform: scaleY(0); transform-origin: bottom;
  transition: transform var(--t-med) var(--ease-lux);
}
.btn:hover::before, .btn:focus-visible::before { transform: scaleY(1); }
.btn:hover, .btn:focus-visible { color: var(--midnight); border-color: var(--gold); }
.btn-gold { --btn-bg: var(--gold); --btn-fg: var(--midnight); --btn-bd: var(--gold); font-weight: 500; }
.btn-gold::before { background: var(--gold-lt); }
.btn-ghost { --btn-fg: var(--text); }
.btn-sm { min-height: 42px; padding: 0 22px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn-link {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.6875rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--accent-text);
  padding-bottom: 6px;
}
.btn-link::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0.25); transform-origin: left; transition: transform var(--t-med) var(--ease-lux);
}
.btn-link:hover::after, .btn-link:focus-visible::after { transform: scaleX(1); }
.arrow { display: inline-block; transition: transform var(--t-med) var(--ease-lux); }
.btn:hover .arrow, .btn-link:hover .arrow { transform: translateX(5px); }

.chip {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px;
  font-size: 0.625rem; letter-spacing: 0.24em; text-transform: uppercase;
  border: 1px solid var(--line); color: var(--text-soft);
  transition: all var(--t-fast) var(--ease-lux);
}
button.chip { min-height: 40px; cursor: pointer; }
button.chip:hover { border-color: var(--line-strong); color: var(--text); }
.chip[aria-pressed="true"], .chip.is-active { border-color: var(--gold); color: var(--midnight); background: var(--gold); }

/* ── 6. Header & navigation ────────────────────────────────────────────── */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h);
  display: flex; align-items: center;
  transition: transform var(--t-med) var(--ease-lux), background var(--t-med) var(--ease-lux), height var(--t-med) var(--ease-lux);
}
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: rgba(14,26,20,0.78); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-bottom: 1px solid var(--line);
  transition: opacity var(--t-med) var(--ease-lux);
}
.site-header.is-solid { --header-h: 68px; }
.site-header.is-solid::before { opacity: 1; }
.site-header.is-hidden { transform: translateY(-100%); }
.site-header .bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-4); width: 100%; }
.site-header .logo { font-family: var(--f-display); font-size: 1.25rem; letter-spacing: 0.42em; color: var(--ivory); justify-self: center; padding-left: .42em; }
.site-header .logo span { color: var(--gold); }
.nav-primary, .nav-tools { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 36px); }
.nav-tools { justify-content: flex-end; }
.nav-link {
  position: relative; font-size: 0.6875rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--text-soft);
  padding: 10px 0; transition: color var(--t-fast);
}
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--gold);
  transform: scaleX(0); transition: transform var(--t-med) var(--ease-lux);
}
.nav-link:hover, .nav-link[aria-current="page"], .nav-link[aria-expanded="true"] { color: var(--ivory); }
.nav-link:hover::after, .nav-link[aria-current="page"]::after, .nav-link[aria-expanded="true"]::after { transform: scaleX(1); }
.icon-btn { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; color: var(--text-soft); transition: color var(--t-fast); }
.icon-btn:hover { color: var(--gold-lt); }
.icon-btn svg { width: 20px; height: 20px; }
.cart-count {
  position: absolute; top: 6px; right: 4px; min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-items: center; border-radius: 9px;
  background: var(--gold); color: var(--midnight); font-size: 10px; font-weight: 500; letter-spacing: 0;
}
.cart-count:empty, .cart-count[data-count="0"] { display: none; }
.currency-select { background: transparent; border: 0; color: var(--text-soft); font-size: 0.6875rem; letter-spacing: 0.2em; cursor: pointer; padding: 10px 4px; }
.currency-select option { background: var(--midnight); }
.scroll-progress { position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--gold); transform-origin: left; transform: scaleX(0); }
.menu-toggle { display: none; }

/* Mega menu */
.mega {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 90;
  background: rgba(10,18,13,0.97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity var(--t-med) var(--ease-lux), transform var(--t-med) var(--ease-lux), visibility 0s linear var(--t-med);
}
.mega.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mega-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px; padding-block: 36px 40px; }
.mega-item { display: grid; justify-items: center; gap: 10px; padding: 14px 6px 18px; text-align: center; border: 1px solid transparent; transition: border-color var(--t-fast), background var(--t-fast); }
.mega-item:hover, .mega-item:focus-visible { border-color: var(--line); background: var(--surface); }
.mega-item .gem-icon { width: 54px; height: 54px; }
.mega-item strong { font-family: var(--f-display); font-weight: 400; font-size: 0.8rem; letter-spacing: 0.12em; color: var(--ivory); }
.mega-item small { font-family: var(--f-editorial); font-style: italic; font-size: 0.95rem; color: var(--text-dim); line-height: 1.2; }
.mega-foot { display: flex; justify-content: space-between; gap: 24px; padding-bottom: 28px; }

/* Mobile menu overlay */
.mobile-menu {
  position: fixed; inset: 0; z-index: 150; display: grid; grid-template-rows: auto 1fr auto;
  padding: 20px var(--gutter) 32px; background: var(--vault);
  clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path 900ms var(--ease-lux), visibility 0s linear 900ms;
}
.mobile-menu.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition-delay: 0s; }
.mobile-menu .mm-top { display: flex; justify-content: space-between; align-items: center; height: 48px; }
.mobile-menu nav { display: grid; align-content: center; gap: 6px; }
.mobile-menu nav a {
  font-family: var(--f-display); font-size: clamp(1.6rem, 7vw, 2.4rem); letter-spacing: 0.1em; color: var(--ivory);
  padding: 6px 0; opacity: 0; transform: translateY(24px);
  transition: opacity 700ms var(--ease-lux), transform 700ms var(--ease-lux);
}
.mobile-menu.is-open nav a { opacity: 1; transform: none; }
.mobile-menu nav a small { display: block; font-family: var(--f-editorial); font-style: italic; font-size: 1rem; letter-spacing: 0; color: var(--text-dim); }
@media (max-width: 1080px) {
  .nav-primary .nav-link, .nav-tools .hide-mobile { display: none; }
  .menu-toggle { display: inline-grid; }
  .site-header .bar { grid-template-columns: auto 1fr auto; }
  .site-header .logo { font-size: 1.05rem; }
}

/* ── 7. Footer ─────────────────────────────────────────────────────────── */
.site-footer { position: relative; background: var(--midnight); border-top: 1px solid var(--line); padding: clamp(72px, 10vw, 140px) 0 36px; overflow: hidden; }
.site-footer .ft-mark::before { content: "VERDAAN"; }
.site-footer .ft-mark { font-family: var(--f-display); font-size: clamp(3rem, 14vw, 13rem); letter-spacing: 0.3em; line-height: 1; color: rgba(201,168,76,0.05); text-align: center; white-space: nowrap; margin-bottom: clamp(40px, 6vw, 80px); user-select: none; }
.ft-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 40px; }
.ft-grid h2 { font-family: var(--f-body); letter-spacing: 0.32em; font-weight: 400; font-size: 0.6875rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 20px; }
.ft-grid ul { list-style: none; display: grid; gap: 10px; }
.ft-grid a { font-size: 0.9rem; color: var(--text-dim); transition: color var(--t-fast); }
.ft-grid a:hover { color: var(--ivory); }
.ft-brand p { font-family: var(--f-editorial); font-style: italic; font-size: 1.15rem; color: var(--text-soft); max-width: 34ch; margin-top: 16px; }
.ft-social { display: flex; gap: 8px; margin-top: 24px; }
.ft-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--text-dim); }
.ft-legal a { color: var(--text-dim); }
.ft-legal a:hover { color: var(--ivory); }
@media (max-width: 960px) { .ft-grid { grid-template-columns: 1fr 1fr; } .ft-brand { grid-column: 1 / -1; } }

/* ── 8. Cards ──────────────────────────────────────────────────────────── */
.card { position: relative; background: var(--surface); border: 1px solid var(--line); padding: clamp(28px, 3vw, 44px); transition: border-color var(--t-med) var(--ease-lux), transform var(--t-med) var(--ease-lux); }
.card:hover { border-color: var(--line-strong); }
.card .card-icon { width: 40px; height: 40px; color: var(--gold); margin-bottom: 24px; }
.card h3 { font-size: 1.05rem; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 14px; }
.card p { color: var(--text-soft); font-size: 0.95rem; }

/* Image hover, slow scale + gold sheen */
.media { position: relative; overflow: hidden; background: var(--midnight-2); }
.media img, .media video { width: 100%; height: 100%; object-fit: cover; transition: transform 1600ms var(--ease-lux); }
.media::after {
  content: ""; position: absolute; inset: -50%; pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(226,201,126,0.22) 50%, transparent 58%);
  transform: translateX(-60%); transition: transform 1400ms var(--ease-lux);
}
.media:hover img, .media:hover video { transform: scale(1.06); }
.media:hover::after { transform: translateX(60%); }

/* Product card */
.product-card { position: relative; min-width: 0; display: grid; grid-template-rows: auto 1fr; background: var(--bg-raised); border: 1px solid var(--line); transition: border-color var(--t-med) var(--ease-lux), transform var(--t-med) var(--ease-lux); }
.product-card { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.product-card:hover { border-color: var(--line-strong); transform: translateY(-4px); }
.product-card .pc-visual { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: radial-gradient(120% 90% at 50% 40%, var(--pc-tint, #1f8a4c33), transparent 70%), var(--midnight-2); }
.product-card .pc-visual .gem-icon, .product-card .pc-visual canvas, .product-card .pc-visual img { position: absolute; inset: 0; width: 100%; height: 100%; }
.product-card .pc-visual .gem-icon { padding: 26%; transition: transform 1600ms var(--ease-lux), opacity var(--t-med); }
.product-card:hover .pc-visual .gem-icon { transform: scale(1.06) rotate(-4deg); }
.product-card .pc-visual canvas { opacity: 0; transition: opacity var(--t-med); }
.product-card.has-3d .pc-visual canvas { opacity: 1; }
.product-card.has-3d .pc-visual .gem-icon { opacity: 0; }
.pc-badge { position: absolute; top: 16px; left: 16px; z-index: 2; padding: 6px 12px; font-size: 0.625rem; letter-spacing: 0.24em; text-transform: uppercase; background: rgba(10,18,13,0.72); color: var(--gold-lt); border: 1px solid var(--line); backdrop-filter: blur(6px); }
.pc-wish { position: absolute; top: 8px; right: 8px; z-index: 2; }
.pc-wish[aria-pressed="true"] svg { fill: var(--gold); color: var(--gold); }
.product-card .pc-body { display: grid; gap: 8px; align-content: start; padding: 24px 24px 26px; }
.pc-name { font-family: var(--f-display); font-size: 1.05rem; letter-spacing: 0.1em; color: var(--text); }
.pc-name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pc-origin { font-family: var(--f-editorial); font-style: italic; font-size: 1.05rem; color: var(--text-soft); line-height: 1.3; }
.pc-spec { font-size: 0.75rem; letter-spacing: 0.08em; color: var(--text-dim); }
.pc-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.pc-price { font-family: var(--f-display); letter-spacing: 0.06em; color: var(--accent-text); white-space: nowrap; min-width: 0; }
.pc-add { position: relative; z-index: 2; }

/* ── 9. Forms ──────────────────────────────────────────────────────────── */
.field { display: grid; gap: 8px; }
.field label, .label { font-size: 0.6875rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent-text); }
.input, .select, .textarea {
  width: 100%; min-height: 52px; padding: 14px 16px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--text); font-weight: 300; transition: border-color var(--t-fast), background var(--t-fast);
}
[data-theme="light"] .input, [data-theme="light"] .select, [data-theme="light"] .textarea { background: #fff; }
.textarea { min-height: 140px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--gold); background: rgba(201,168,76,0.05); }
.input::placeholder, .textarea::placeholder { color: var(--text-dim); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-status { min-height: 1.5em; font-size: 0.9rem; color: var(--gold-lt); }
.form-status.is-error { color: #e8a29a; }

/* ── 10. Cart drawer ───────────────────────────────────────────────────── */
.drawer-scrim { position: fixed; inset: 0; z-index: 180; background: rgba(5,10,7,0.6); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity var(--t-med) var(--ease-lux), visibility 0s linear var(--t-med); }
.drawer-scrim.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 190; width: min(460px, 100vw);
  display: grid; grid-template-rows: auto 1fr auto;
  background: var(--vault); border-left: 1px solid var(--line-strong);
  transform: translateX(100%); visibility: hidden;
  transition: transform 800ms var(--ease-lux), visibility 0s linear 800ms;
}
.drawer.is-open { transform: none; visibility: visible; transition-delay: 0s; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 24px 28px; border-bottom: 1px solid var(--line); }
.drawer-head h2 { font-size: 1rem; letter-spacing: 0.32em; text-transform: uppercase; }
.drawer-body { overflow-y: auto; padding: 8px 28px; overscroll-behavior: contain; }
.drawer-foot { padding: 24px 28px 28px; border-top: 1px solid var(--line); display: grid; gap: 14px; background: rgba(10,18,13,0.35); }
.line-item { display: grid; grid-template-columns: 76px 1fr auto; gap: 16px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line); }
.line-item .li-thumb { width: 76px; height: 76px; border: 1px solid var(--line); background: radial-gradient(circle at 50% 40%, var(--li-tint, #1f8a4c55), var(--midnight) 75%); display: grid; place-items: center; }
.line-item .li-thumb svg { width: 44px; height: 44px; }
.li-name { font-family: var(--f-display); font-size: 0.9rem; letter-spacing: 0.08em; }
.li-meta { font-size: 0.75rem; color: var(--text-dim); }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); margin-top: 8px; }
.qty button { width: 32px; height: 32px; color: var(--text-soft); }
.qty span { min-width: 26px; text-align: center; font-size: 0.85rem; }
.li-price { font-family: var(--f-display); font-size: 0.9rem; color: var(--gold-lt); text-align: right; }
.li-remove { display: block; margin-top: 8px; margin-left: auto; font-size: 0.625rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); }
.li-remove:hover { color: var(--ivory); }
.drawer-empty { padding: 64px 0; text-align: center; display: grid; gap: 20px; justify-items: center; }
.drawer-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.drawer-row .label { color: var(--text-soft); }
.drawer-total { font-family: var(--f-display); font-size: 1.3rem; color: var(--gold-lt); letter-spacing: 0.06em; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 0.9rem; color: var(--text-soft); cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--gold); margin-top: 4px; flex: none; }
.ship-meter { height: 2px; background: var(--line); overflow: hidden; }
.ship-meter i { display: block; height: 100%; background: var(--gold); transform-origin: left; transition: transform var(--t-med) var(--ease-lux); }

/* ── 11. Trust strip, toast, cookie, WhatsApp ──────────────────────────── */
.trust-strip { border-block: 1px solid var(--line); background: var(--midnight-2); }
.trust-strip ul { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); }
.trust-strip li { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 22px 12px; font-size: 0.6875rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-soft); text-align: center; }
.trust-strip li + li { border-left: 1px solid var(--line); }
.trust-strip svg { width: 20px; height: 20px; color: var(--gold); flex: none; }
@media (max-width: 860px) { .trust-strip ul { grid-template-columns: 1fr 1fr; } .trust-strip li:nth-child(3) { border-left: 0; } .trust-strip li:nth-child(n+3) { border-top: 1px solid var(--line); } }

.toast { position: fixed; left: 50%; bottom: 32px; z-index: 300; transform: translate(-50%, calc(100% + 64px)); visibility: hidden; padding: 16px 28px; background: var(--vault); border: 1px solid var(--line-strong); color: var(--ivory); font-size: 0.8rem; letter-spacing: 0.14em; box-shadow: var(--shadow-lux); transition: transform var(--t-med) var(--ease-lux); max-width: calc(100vw - 32px); }
.toast.is-on { transform: translate(-50%, 0); visibility: visible; }

.cookie { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 250; max-width: 560px; margin-left: auto; padding: 24px 26px; background: var(--vault); border: 1px solid var(--line-strong); box-shadow: var(--shadow-lux); display: grid; gap: 16px; }
.cookie p { font-size: 0.875rem; color: var(--text-soft); }
.cookie a { color: var(--gold-lt); border-bottom: 1px solid var(--line-strong); }

.wa-float { position: fixed; right: 22px; bottom: 22px; z-index: 120; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--vault); border: 1px solid var(--line-strong); color: var(--gold-lt); box-shadow: var(--shadow-lux); transition: transform var(--t-med) var(--ease-lux), background var(--t-med); }
.wa-float:hover { transform: scale(1.08); background: var(--forest); }
.wa-float svg { width: 22px; height: 22px; fill: currentColor; }
body.has-sticky-buy .wa-float { bottom: 96px; }

/* ── 12. Motion system ─────────────────────────────────────────────────── */
/* Reveal on scroll (core.js toggles .is-in). Without JS everything is visible. */
.js [data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity 1200ms var(--ease-lux), transform 1200ms var(--ease-lux); transition-delay: var(--d, 0ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal="scale"] { transform: scale(.94); }
.split-line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.split-line > span { display: block; transform: translateY(110%); transition: transform 1300ms var(--ease-lux); transition-delay: var(--d, 0ms); }
.is-in .split-line > span, .split-line.is-in > span { transform: none; }
.js [data-eyebrow] { letter-spacing: 0.8em; opacity: 0; transition: letter-spacing 1600ms var(--ease-lux), opacity 1200ms var(--ease-lux); }
.js [data-eyebrow].is-in { letter-spacing: 0.4em; opacity: 1; }

/* Film grain over everything (very subtle printed-paper feel) */
.grain { position: fixed; inset: -50%; z-index: 400; pointer-events: none; opacity: 0.045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,3%)} 80%{transform:translate(3%,1%)} 100%{transform:translate(0,0)} }

/* Paper texture + foil ornament for ivory sections */
[data-theme="light"].paper::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='5'/><feColorMatrix values='0 0 0 0 0.55  0 0 0 0 0.48  0 0 0 0 0.32  0 0 0 0.07 0'/></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>"); }
.foil { width: 72px; height: 72px; margin-inline: auto; color: var(--gold); filter: drop-shadow(0 1px 0 rgba(255,255,255,.5)); }
.foil path, .foil circle, .foil polygon { stroke: url(#foilGrad); }

/* Background layers (set via data-bg; backgrounds.js mounts a canvas into .bg-layer) */
.bg-layer { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bg-layer canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1600ms var(--ease-lux); }
.bg-layer canvas.is-ready { opacity: 1; }
.bg-layer .bg-fallback { position: absolute; inset: 0; }
.bg-vault .bg-fallback { background: radial-gradient(60% 70% at 20% 80%, rgba(58,125,90,.28), transparent 60%), radial-gradient(45% 45% at 80% 15%, rgba(201,168,76,.12), transparent 55%), linear-gradient(180deg, var(--vault), var(--midnight)); }
.bg-marble .bg-fallback { background: repeating-linear-gradient(118deg, transparent 0 46px, rgba(201,168,76,.06) 47px, transparent 49px 130px), radial-gradient(80% 80% at 30% 30%, #234535, #0e1a14); }
.bg-caustics .bg-fallback { background: radial-gradient(40% 35% at 50% 45%, color-mix(in srgb, var(--tint, #1f8a4c) 38%, transparent), transparent 70%), radial-gradient(70% 60% at 50% 50%, #0e1a14, #050a07); }
.bg-silk .bg-fallback { background: linear-gradient(160deg, #1a3028 0%, #0e1a14 40%, #234535 60%, #0a120d 100%); }
.bg-topo .bg-fallback { background: repeating-radial-gradient(circle at 30% 60%, transparent 0 22px, rgba(201,168,76,.10) 23px, transparent 24px), var(--vault); }
.bg-starfield .bg-fallback { background: radial-gradient(1px 1px at 20% 30%, #fff8, transparent), radial-gradient(1px 1px at 70% 20%, #fff6, transparent), radial-gradient(1px 1px at 40% 70%, #fff5, transparent), radial-gradient(1px 1px at 85% 60%, #fff7, transparent), linear-gradient(180deg, #050a07, #0e1a14 60%, #1a3028); }

/* Preloader */
.preloader { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; background: var(--midnight); transition: clip-path 1100ms var(--ease-lux); clip-path: inset(0 0 0 0); }
.preloader.is-done { clip-path: inset(0 0 100% 0); pointer-events: none; }
.preloader .pl-inner { display: grid; justify-items: center; gap: 28px; }
.preloader svg { width: 84px; height: 84px; }
.preloader svg path { fill: none; stroke: var(--gold); stroke-width: 1; stroke-dasharray: 400; stroke-dashoffset: 400; animation: draw 1300ms var(--ease-in-out) forwards; }
.preloader .pl-word { font-family: var(--f-display); font-size: 1.4rem; letter-spacing: 0.5em; padding-left: .5em; color: var(--ivory); display: flex; }
.preloader .pl-word span { opacity: 0; transform: translateY(12px); animation: up 900ms var(--ease-lux) forwards; animation-delay: calc(500ms + var(--i) * 70ms); }
.preloader .pl-word span.g { color: var(--gold); }
.preloader .pl-skip { position: absolute; bottom: 32px; font-size: 0.625rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--text-dim); }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes up { to { opacity: 1; transform: none; } }

/* Page transition curtain (fallback when View Transitions API is absent) */
.curtain { position: fixed; inset: 0; z-index: 450; display: grid; place-items: center; background: var(--vault); pointer-events: none; clip-path: inset(100% 0 0 0); transition: clip-path 700ms var(--ease-lux); }
.curtain.is-on { clip-path: inset(0 0 0 0); }
.curtain .wordmark { font-size: 1.4rem; color: var(--ivory); }
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 600ms var(--ease-lux) both; }
::view-transition-new(root) { animation: vt-in 900ms var(--ease-lux) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-2%); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(2%); } }

/* Custom cursor (pointer:fine only, set up by core.js) */
.cursor-dot, .cursor-ring { position: fixed; left: 0; top: 0; z-index: 600; pointer-events: none; border-radius: 50%; will-change: transform; }
.cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--gold); }
.cursor-ring { width: 36px; height: 36px; margin: -18px 0 0 -18px; border: 1px solid rgba(201,168,76,0.55); display: grid; place-items: center; transition: width 500ms var(--ease-lux), height 500ms var(--ease-lux), margin 500ms var(--ease-lux), background 500ms; }
.cursor-ring span { font-size: 8px; letter-spacing: 0.24em; color: var(--midnight); opacity: 0; transition: opacity 300ms; }
.cursor-ring.is-label { width: 76px; height: 76px; margin: -38px 0 0 -38px; background: rgba(201,168,76,0.92); border-color: transparent; }
.cursor-ring.is-label span { opacity: 1; }
.cursor-ring.is-link { width: 54px; height: 54px; margin: -27px 0 0 -27px; }
html.has-cursor, html.has-cursor a, html.has-cursor button { cursor: none; }
html.has-cursor input, html.has-cursor textarea, html.has-cursor select { cursor: auto; }

/* Gem icon line art */
.gem-icon { color: var(--gold); }
.gem-icon .fill { fill: var(--gem, #1f8a4c); opacity: .85; }

/* Placeholder marker, visible on purpose so missing data is never mistaken for real data */
.ph-mark { background: rgba(232,162,154,0.12); color: #f4c2bb; padding: 0 4px; font-size: 0.85em; border: 1px dashed rgba(232,162,154,0.5); }

/* Sticky buy bar (mobile product pages) */
.sticky-buy { position: fixed; left: 0; right: 0; bottom: 0; z-index: 110; display: none; align-items: center; justify-content: space-between; gap: 16px; padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom)); background: rgba(14,26,20,0.94); backdrop-filter: blur(14px); border-top: 1px solid var(--line-strong); transform: translateY(110%); transition: transform var(--t-med) var(--ease-lux); }
.sticky-buy.is-on { transform: none; }
.sticky-buy > :first-child { min-width: 0; }
.sticky-buy .li-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sticky-buy .btn, .sticky-buy > :last-child { flex-shrink: 0; }
@media (max-width: 900px) { .sticky-buy { display: flex; } }

/* ── 13. Reduced motion ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .grain { display: none; }
  .js [data-reveal], .js [data-eyebrow] { opacity: 1; transform: none; letter-spacing: 0.4em; }
  .split-line > span { transform: none; }
  @view-transition { navigation: none; }
}

/* ── 14. Editorial pages migrated from the original site (.legacy) ─────── */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 1100ms var(--ease-lux), transform 1100ms var(--ease-lux); }
.js .reveal.is-in { opacity: 1; transform: none; }
.legacy .has-bg { position: relative; isolation: isolate; overflow: hidden; }
.legacy .has-bg > :not(.bg-layer) { position: relative; z-index: 1; }
.legacy-stubs { display: none !important; }
[class^="gi-"], [class*=" gi-"] { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -0.2em; background: center / contain no-repeat; font-style: normal; }
.gi-emerald { background-image: url(/assets/img/gi/emerald.svg); }
.gi-ruby { background-image: url(/assets/img/gi/ruby.svg); }
.gi-sapphire { background-image: url(/assets/img/gi/sapphire.svg); }
.gi-topaz { background-image: url(/assets/img/gi/topaz.svg); }
.gi-peridot { background-image: url(/assets/img/gi/peridot.svg); }
.gi-turquoise { background-image: url(/assets/img/gi/turquoise.svg); }
.gi-aqeeq { background-image: url(/assets/img/gi/aqeeq.svg); }
.gi-tasbih { background-image: url(/assets/img/gi/tasbih.svg); }
.gi-gem { background-image: url(/assets/img/gi/gem.svg); }
.gi-amethyst { background-image: url(/assets/img/gi/amethyst.svg); }
.gi-pin { background-image: url(/assets/img/gi/pin.svg); }
.gi-cert { background-image: url(/assets/img/gi/cert.svg); }
.gi-eye { background-image: url(/assets/img/gi/eye.svg); }
.gi-lock { background-image: url(/assets/img/gi/lock.svg); }
.gi-bag { background-image: url(/assets/img/gi/bag.svg); }
.gi-mountain { background-image: url(/assets/img/gi/mountain.svg); }
.gi-shield { background-image: url(/assets/img/gi/shield.svg); }
.gi-globe { background-image: url(/assets/img/gi/globe.svg); }
.gi-truck { background-image: url(/assets/img/gi/truck.svg); }
.gi-heart { background-image: url(/assets/img/gi/heart.svg); }
.gi-whatsapp { background-image: url(/assets/img/gi/whatsapp.svg); }
.gi-hand { background-image: url(/assets/img/gi/hand.svg); }
.gi-cube { background-image: url(/assets/img/gi/cube.svg); }
.gi-mail { background-image: url(/assets/img/gi/mail.svg); }
.legacy .dropcap::first-letter { float: left; font-family: var(--f-display); font-size: 4.2em; line-height: .82; padding: 6px 12px 0 0; color: var(--gold); }
.legacy .toc-link.is-current { color: var(--gold-lt) !important; }
.legacy blockquote, .legacy .cs-quote, .legacy .pull-quote { font-family: var(--f-editorial); font-style: italic; }
.finder-gem { display: grid; justify-items: center; gap: 20px; margin: 24px 0 32px; }
.finder-stage { position: relative; width: min(360px, 80vw); aspect-ratio: 1; background: radial-gradient(60% 60% at 50% 45%, rgba(201,168,76,.12), transparent 70%); }
.relief-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 32px; align-items: start; }
.relief-stage { position: relative; aspect-ratio: 16 / 11; border: 1px solid var(--line); background: radial-gradient(60% 60% at 50% 50%, rgba(58,125,90,.2), transparent), var(--midnight); }
.relief-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.relief-stage.relief-fallback { background: repeating-radial-gradient(circle at 40% 55%, transparent 0 18px, rgba(201,168,76,.12) 19px, transparent 20px), var(--vault); }
.relief-side { display: grid; gap: 20px; }
.relief-card { display: grid; grid-template-columns: 88px 1fr; gap: 20px; padding: 24px; border: 1px solid var(--line-strong); background: var(--bg-raised); }
.relief-card .rc-art svg { width: 88px; height: 88px; }
@media (max-width: 960px) { .relief-grid { grid-template-columns: 1fr; } }
.press-logos .card { padding: 0 0 22px; display: grid; gap: 10px; }
.press-logos .card img { width: 100%; height: auto; aspect-ratio: 3 / 1; margin-bottom: 8px; }
.press-logos .card h3, .press-logos .card p { padding-inline: 22px; margin: 0; }
.press-palette { display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 40px; border: 1px solid var(--line); }
.press-palette span { display: grid; align-content: end; min-height: 140px; padding: 16px; background: var(--c); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ivory); }
.press-palette b { font-weight: 400; opacity: .75; letter-spacing: .1em; }
@media (max-width: 760px) { .press-palette { grid-template-columns: repeat(3, 1fr); } }
.brand-story p { font-family: var(--f-editorial); font-size: 1.3rem; line-height: 1.75; color: var(--ink); }
.brand-story p + p { margin-top: 1.1em; }

/* ── 15. Mobile & touch refinements (Prompt 10 audit) ──────────────────── */
@media (max-width: 1080px) { .mega { display: none; } }
.site-header .logo { display: inline-flex; align-items: center; min-height: 44px; }
.btn-link { min-height: 44px; padding-bottom: 0; align-items: center; }
.btn-link::after { bottom: 8px; }
.crumbs a, .crumbs span { display: inline-flex; align-items: center; min-height: 44px; }
.crumbs a { min-width: 44px; justify-content: center; }
.legacy .table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.legacy .table-scroll > table { min-width: 560px; }
@media (max-width: 860px) { .legacy .toc-bar { position: static !important; padding: 14px var(--gutter) !important; } }
.legacy .toc-link, .legacy .rc-link, .legacy .cc-link, .legacy .pr-link, .legacy .copy-btn { display: inline-flex; align-items: center; min-height: 44px; }
.legacy input, .legacy select, .legacy textarea { font-size: max(16px, 1em) !important; }
.pc-name a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -8px; }
@media (max-width: 760px) {
  :root { --header-h: 64px; }
  .section-head { margin-bottom: 40px; }
  .btn { min-height: 48px; padding: 0 24px; }
  .row > .btn { flex: 1 1 auto; }
  .wa-float { right: 14px; bottom: 14px; width: 48px; height: 48px; }
  .drawer { width: 100vw; }
  .cookie { left: 10px; right: 10px; bottom: 10px; padding: 18px; }
  .toast { bottom: 76px; }
  .site-footer .ft-mark { font-size: 13vw; letter-spacing: .18em; }
  .ft-legal { flex-direction: column; }
}
@media (hover: none) { .product-card:hover { transform: none; } .media:hover img { transform: none; } }

/* ── 16. Accessibility fixes (Prompt 11 axe audit) ─────────────────────── */
p a.gold, .small a.gold, .legal a.gold, .muted a.gold { text-decoration: underline; text-underline-offset: 3px; }
.legacy .btn-wa { background: #0f7a40 !important; }
.legacy .j-num { color: rgba(201,168,76,.55) !important; }
.legacy .tier-arabic { color: var(--gold) !important; opacity: 1 !important; }
.press-palette span[style*="#C9A84C"], .press-palette span[style*="#FAF7F0"] { color: var(--midnight) !important; }
.press-palette b { opacity: 1; }
@media (max-width: 640px) {
  .spec-sheet { grid-template-columns: 1fr !important; }
  .legacy .pr-item { flex-direction: column; gap: 10px; }
  .legacy .pr-item > * { flex-shrink: 1 !important; }
}
/* Stone finder: the not-yet-available Continue button reads as an outline, not low-contrast gold */
.legacy .btn-next:not(.enabled) { opacity: 1 !important; background: transparent !important; color: var(--text-soft) !important; border: 1px dashed var(--line-strong) !important; }

/* ── Shop functions: counts, compare, enquiry dialog ───────────────────── */
.chip-n { margin-left: 6px; letter-spacing: .08em; }
.chip-n:empty { display: none; }
button.chip:disabled { opacity: .38; cursor: not-allowed; }
.pc-compare { position: absolute; top: 52px; right: 8px; z-index: 2; }
.pc-compare svg { width: 18px; height: 18px; }
.pc-compare[aria-pressed="true"] { color: var(--midnight); background: var(--gold); border-color: var(--gold); }
.compare-bar { position: fixed; z-index: 105; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; align-items: center; gap: 16px; padding: 10px 12px 10px 20px; background: rgba(14,26,20,.96); border: 1px solid var(--line-strong); backdrop-filter: blur(12px); font-size: .8rem; letter-spacing: .12em; white-space: nowrap; }
body.has-sticky-buy .compare-bar { bottom: 96px; }
@media (max-width: 560px) { .compare-bar { left: 12px; right: 12px; transform: none; justify-content: space-between; gap: 10px; } }
.inq-dialog { width: min(560px, 94vw); max-height: 92vh; margin: auto; padding: clamp(20px, 4vw, 32px); background: var(--vault, #0e1a14); color: var(--text); border: 1px solid var(--line-strong); }
.inq-dialog::backdrop { background: rgba(5,10,7,.72); backdrop-filter: blur(4px); }
.inq-dialog .iq-about { padding: 12px 14px; border: 1px solid var(--line); font-size: .9rem; }
.inq-dialog .iq-about .label { display: block; margin-bottom: 4px; }
.inq-dialog .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.inq-dialog .form-grid .full { grid-column: 1 / -1; }
@media (max-width: 560px) { .inq-dialog .form-grid { grid-template-columns: 1fr; } }
/* Reviews (product pages and Trust page) */
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 24px; }
.reviews-avg { grid-column: 1 / -1; }
.review { margin: 0; padding: 20px; border: 1px solid var(--line); display: grid; gap: 10px; }
.review blockquote { margin: 0; font-family: var(--f-editorial); font-style: italic; font-size: 1.1rem; line-height: 1.5; }
.stars { color: var(--gold); letter-spacing: .12em; }
.stars-off { opacity: .25; }
/* Shop mega menu: browse columns */
.mega { max-height: calc(100vh - var(--header-h)); overflow-y: auto; }
.mega-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 4px 0 26px; border-top: 1px solid var(--line); padding-top: 22px; margin-bottom: 18px; }
.mega-cols > div { display: grid; gap: 2px; align-content: start; }
.mega-cols .label { margin-bottom: 6px; }
.mega-cols a { font-size: .85rem; color: var(--text-soft); min-height: 30px; display: flex; align-items: center; }
.mega-cols a:hover { color: var(--gold-lt); }
@media (max-height: 760px) { .mega-grid { padding-block: 22px 24px; } .mega-grid .gem-icon { width: 34px; height: 34px; } }
/* Footer: trading hub and retail app */
.ft-partners { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px 40px; padding: 22px 0; margin-top: 28px; border-top: 1px solid var(--line); font-size: .85rem; color: var(--text-dim); }
.ft-partners p { margin: 0; }
.ft-partners strong { color: var(--gold-lt); font-weight: 400; letter-spacing: .12em; }
.ft-partners a { color: var(--ivory); text-decoration: underline; text-underline-offset: 3px; }