/* ─────────────────────────────────────────────────────────────
   MageClient — Storefront stylesheet  ·  LIGHT LUXURY EDITION
   White canvas, soft lavender glow, glass surfaces, editorial type.
   ───────────────────────────────────────────────────────────── */

:root {
  /* New light luxury palette */
  --bg-page:       #FBFAFF;   /* near-white with a lavender breath */
  --bg-veil:       #F3EFFF;   /* soft lilac wash */
  --white:         #FFFFFF;
  --ink:           #160F2E;   /* deep plum near-black for text */
  --ink-2:         #5A5273;   /* muted plum-grey */
  --ink-3:         #9A93B0;   /* faint */
  --violet:        #7C4DFF;   /* primary accent */
  --violet-deep:   #5B2EE0;   /* readable accent text on white */
  --violet-soft:   #B79CFF;   /* glow lilac */
  --violet-mist:   #EEE7FF;   /* tint surfaces */
  --glow:          rgba(124, 77, 255, 0.22);

  /* ── Legacy token names remapped to the light theme so every
        existing inline style across the app stays on-brand. ── */
  --bg-deep:        var(--bg-page);
  --bg-surface:     #FFFFFF;
  --bg-elevated:    #F4F1FC;
  --accent-gold:        #7C4DFF;   /* "gold" → violet */
  --accent-gold-light:  #5B2EE0;   /* readable violet for text on white */
  --accent-purple:      #7C4DFF;
  --accent-purple-bright: #9B6FE8;
  --text-primary:   #160F2E;
  --text-secondary: #5A5273;
  --text-muted:     #9A93B0;
  --border:         rgba(124, 77, 255, 0.14);
  --border-gold:    rgba(124, 77, 255, 0.30);
  --gold-gradient:  linear-gradient(120deg, #7C4DFF 0%, #B07CFF 45%, #5B2EE0 100%);
  --purple-glow:    0 24px 70px rgba(124, 77, 255, 0.18);

  --glass:          rgba(255, 255, 255, 0.66);
  --glass-strong:   rgba(255, 255, 255, 0.86);
  --shadow-soft:    0 10px 40px rgba(22, 15, 46, 0.06);
  --shadow-card:    0 18px 50px rgba(91, 46, 224, 0.10);

  --radius-sm: 10px;
  --radius:    16px;
  --radius-lg: 26px;
  --maxw:      1180px;
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--bg-page);
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Vibrant, cool ambient glow behind every page (cyan → violet → magenta → indigo) */
body::before {
  content: '';
  position: fixed; inset: -10%; z-index: -2;
  background:
    radial-gradient(44rem 34rem at 8% -8%, rgba(34, 211, 238, 0.26), transparent 60%),    /* cyan   */
    radial-gradient(46rem 40rem at 100% 2%, rgba(124, 77, 255, 0.26), transparent 58%),    /* violet */
    radial-gradient(40rem 34rem at 96% 58%, rgba(236, 72, 153, 0.16), transparent 60%),    /* magenta*/
    radial-gradient(54rem 52rem at 46% 118%, rgba(99, 102, 241, 0.20), transparent 62%),   /* indigo */
    linear-gradient(180deg, #F8FCFF 0%, #F4F1FF 100%);
  animation: bgdrift 26s ease-in-out infinite alternate;
}
@keyframes bgdrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-2.5%, 1.5%, 0) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

a { color: inherit; text-decoration: none; }

h1, h2, h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
}

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.eyebrow {
  font-family: 'Manrope', sans-serif;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--violet-deep);
}

/* ── Full-page 3D canvas (homepage) ───────────────────────── */
#bg-canvas {
  position: fixed; inset: 0; z-index: -1;
  width: 100vw; height: 100vh;
  display: block; pointer-events: none;
}
.bg-veil {
  /* Very light wash — keeps the 3D scene visible behind the WHOLE page for an
     immersive feel; content sits on frosted-glass panels so it stays legible. */
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, transparent 82%, rgba(244,240,255,0.45) 100%);
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 15px;
  padding: 15px 30px; border-radius: 100px; border: none; cursor: pointer;
  min-height: 52px; text-align: center;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), background 0.3s;
}
.btn:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
.btn-gold {
  color: #fff; background: var(--gold-gradient); background-size: 160% 160%;
  box-shadow: 0 10px 30px rgba(124, 77, 255, 0.32);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 18px 44px rgba(124, 77, 255, 0.40); background-position: 100% 100%; }
.btn-ghost {
  background: var(--glass-strong); color: var(--ink);
  border: 1px solid var(--border-gold); backdrop-filter: blur(10px);
}
.btn-ghost:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); border-color: var(--violet-soft); }
.btn-block { width: 100%; }

/* ── Nav ──────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 250, 255, 0.55);
  backdrop-filter: saturate(140%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.nav.scrolled { background: rgba(255,255,255,0.78); border-color: var(--border); box-shadow: 0 6px 30px rgba(22,15,46,0.05); }
.nav .container { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.nav-logo { display: flex; align-items: center; gap: 11px; font-weight: 700; font-size: 20px; letter-spacing: -0.02em; color: var(--ink); }
.nav-logo b { color: var(--violet-deep); font-weight: 700; }
.nav-links { display: flex; align-items: center; gap: 34px; }
.nav-links a { color: var(--ink-2); font-size: 14.5px; font-weight: 500; transition: color 0.2s; }
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.nav-links .nav-cta {
  color: #fff; background: var(--gold-gradient); padding: 10px 22px; border-radius: 100px;
  font-weight: 600; box-shadow: 0 8px 22px rgba(124,77,255,0.28);
}
.nav-links .nav-cta:hover { color: #fff; transform: translateY(-1px); }
.nav-toggle { display: none; background: none; border: none; color: var(--ink); cursor: pointer; }

/* ── Hero ─────────────────────────────────────────────────── */
.hero {
  position: relative; z-index: 1;
  /* Was a full 100dvh of mostly empty lavender before anything checkable
     appeared. Still generous, but the fold now has to earn its height. */
  min-height: 92vh; min-height: 92dvh;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 72px 0 48px;
}
.hero-inner { position: relative; max-width: 880px; padding: 0 24px; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--glass-strong); border: 1px solid var(--border-gold);
  color: var(--violet-deep); font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 9px 18px; border-radius: 100px; backdrop-filter: blur(10px);
  box-shadow: var(--shadow-soft); margin-bottom: 26px;
}
.hero-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 0 4px rgba(124,77,255,0.18); }
.hero h1 {
  font-size: clamp(3rem, 9vw, 6.6rem);
  letter-spacing: -0.035em; line-height: 0.98; margin-bottom: 26px;
}
.hero h1 .accent {
  font-style: italic; font-weight: 500;
  background: var(--gold-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero p {
  font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--ink-2);
  max-width: 620px; margin: 0 auto 38px; line-height: 1.6;
}
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.scroll-cue {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
  z-index: 1; color: var(--ink-3); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
}
.scroll-cue span { display: block; width: 1px; height: 40px; margin: 12px auto 0; background: linear-gradient(var(--violet-soft), transparent); animation: cue 2.2s var(--ease-out) infinite; }
@keyframes cue { 0% { opacity: 0; transform: scaleY(0.2); transform-origin: top; } 45% { opacity: 1; } 100% { opacity: 0; transform: scaleY(1); transform-origin: bottom; } }

/* Hero entrance stagger */
.hero-inner > * { opacity: 0; transform: translateY(26px); animation: rise 1s var(--ease-out) forwards; }
.hero-inner > *:nth-child(1) { animation-delay: 0.05s; }
.hero-inner > *:nth-child(2) { animation-delay: 0.18s; }
.hero-inner > *:nth-child(3) { animation-delay: 0.31s; }
.hero-inner > *:nth-child(4) { animation-delay: 0.44s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ── Logo marquee strip ───────────────────────────────────── */
.marquee { position: relative; z-index: 1; padding: 26px 0; overflow: hidden; border-block: 1px solid var(--border); background: var(--glass); backdrop-filter: blur(8px); }
.marquee-track { display: flex; gap: 56px; width: max-content; animation: slide 32s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item { color: var(--ink-2); font-weight: 600; font-size: 16px; letter-spacing: 0.02em; white-space: nowrap; opacity: 0.7; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ── Sections ─────────────────────────────────────────────── */
.section { position: relative; z-index: 1; padding: 110px 0; }
.section-head { max-width: 660px; margin: 0 auto 56px; text-align: center; text-shadow: 0 1px 18px rgba(255,255,255,0.7); }
.section-head.left { margin-left: 0; text-align: left; }
.section-head h2 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin-top: 14px; }
.section-head p { color: var(--ink-2); margin: 16px 0 0; font-size: 1.08rem; }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }

/* ── Feature trio (glass) ─────────────────────────────────── */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.feature {
  background: var(--glass-strong); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 34px 30px; backdrop-filter: blur(16px); box-shadow: var(--shadow-soft);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.feature:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); }
.feature .ico {
  width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center;
  background: var(--violet-mist); color: var(--violet-deep); margin-bottom: 20px;
}
.feature h3 { font-size: 1.4rem; margin-bottom: 8px; }
.feature p { color: var(--ink-2); font-size: 0.97rem; margin: 0; }

/* ── Category chips ───────────────────────────────────────── */
.chips { display: flex; gap: 11px; overflow-x: auto; padding: 4px 0 10px; justify-content: center; flex-wrap: wrap; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; padding: 11px 22px; border-radius: 100px; min-height: 44px;
  border: 1px solid var(--border-gold); background: var(--glass-strong);
  color: var(--ink-2); font-family: 'Manrope', sans-serif; font-size: 14px; font-weight: 600;
  cursor: pointer; white-space: nowrap; backdrop-filter: blur(10px);
  transition: all 0.25s var(--ease-out);
}
.chip:hover { color: var(--ink); border-color: var(--violet-soft); transform: translateY(-1px); }
.chip.active { background: var(--gold-gradient); color: #fff; border-color: transparent; box-shadow: 0 8px 22px rgba(124,77,255,0.30); }

/* ── Search bar ───────────────────────────────────────────── */
.search-bar {
  position: relative; display: flex; align-items: center;
  max-width: 520px; margin: 18px auto 0;
}
.search-bar .search-ico {
  position: absolute; left: 18px; color: var(--ink-2); pointer-events: none;
}
.search-input {
  width: 100%; min-height: 50px; padding: 12px 46px 12px 48px;
  border-radius: 100px; border: 1px solid var(--border-gold);
  background: var(--glass-strong); backdrop-filter: blur(10px);
  color: var(--ink); font-family: 'Manrope', sans-serif; font-size: 15px;
  transition: all 0.25s var(--ease-out);
}
.search-input::placeholder { color: var(--ink-2); }
.search-input:focus {
  outline: none; border-color: var(--violet-soft);
  box-shadow: 0 8px 24px rgba(124,77,255,0.18);
}
.search-input::-webkit-search-cancel-button { display: none; }
.search-clear {
  position: absolute; right: 14px; width: 28px; height: 28px;
  border: none; border-radius: 50%; background: var(--glass-strong);
  color: var(--ink-2); font-size: 20px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s var(--ease-out);
}
.search-clear:hover { color: var(--ink); transform: scale(1.08); }
.no-results { grid-column: 1 / -1; text-align: center; padding: 70px 20px; color: var(--ink-2); }

/* ── Product grid ─────────────────────────────────────────── */
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 44px; }
.card {
  position: relative; background: var(--glass-strong); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column;
  align-items: center; text-align: center; backdrop-filter: blur(14px);
  box-shadow: var(--shadow-soft); overflow: hidden;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), border-color 0.35s;
}
.card::after {
  content: ''; position: absolute; inset: 0; border-radius: var(--radius);
  background: radial-gradient(60% 60% at 50% 0%, rgba(124,77,255,0.10), transparent 70%);
  opacity: 0; transition: opacity 0.35s;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); border-color: var(--violet-soft); }
.card:hover::after { opacity: 1; }
.card-img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: contain; margin-bottom: 18px;
  border-radius: 12px; background: linear-gradient(160deg, #fff, var(--violet-mist)); padding: 14px;
}
.card-img-fallback { display: flex; align-items: center; justify-content: center; font-family: 'Fraunces', serif; font-size: 2.2rem; color: var(--violet-deep); }
.card h3 { font-family: 'Manrope', sans-serif; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 6px; }
.card .from { color: var(--ink-2); font-size: 13px; }
.card .from b { color: var(--violet-deep); font-size: 15px; }
.card h2.card-title { font-family: 'Manrope', sans-serif; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 6px; }
.card .cat-tag { position: absolute; top: 16px; left: 16px; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.empty-grid { grid-column: 1 / -1; text-align: center; padding: 70px 20px; color: var(--ink-2); }

/* ── Steps / How it works ─────────────────────────────────── */
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: st; }
.step { position: relative; background: var(--glass-strong); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 36px 30px; backdrop-filter: blur(14px); box-shadow: var(--shadow-soft); counter-increment: st; }
.step .num { font-family: 'Fraunces', serif; font-size: 2.6rem; background: var(--gold-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; }
.step h3 { font-size: 1.3rem; margin: 14px 0 8px; }
.step p { color: var(--ink-2); margin: 0; font-size: 0.97rem; }

/* ── Trust strip ──────────────────────────────────────────── */
.trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.trust-item { text-align: center; padding: 10px; }
.trust-item svg { color: var(--violet-deep); margin-bottom: 14px; }
.trust-item h4 { font-family: 'Manrope', sans-serif; font-size: 16px; margin: 0 0 6px; font-weight: 700; }
.trust-item p { color: var(--ink-2); font-size: 14px; margin: 0; }

/* ── CTA band ─────────────────────────────────────────────── */
.cta-band { position: relative; z-index: 1; padding: 0 0 110px; }
.cta-inner {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #2A1A6B 0%, #5B2EE0 55%, #8E5BFF 100%);
  padding: 72px 40px; text-align: center; box-shadow: 0 30px 80px rgba(91,46,224,0.35);
}
.cta-inner::before { content: ''; position: absolute; inset: 0; background: radial-gradient(40rem 20rem at 80% -20%, rgba(255,255,255,0.25), transparent 60%); }
.cta-inner h2 { position: relative; color: #fff; font-size: clamp(2rem, 5vw, 3.2rem); }
.cta-inner p { position: relative; color: rgba(255,255,255,0.82); margin: 16px auto 30px; max-width: 520px; }
.cta-inner .btn-ghost { position: relative; background: #fff; color: var(--violet-deep); border: none; }

/* ── Footer ───────────────────────────────────────────────── */
.footer { position: relative; z-index: 1; border-top: 1px solid var(--border); padding: 64px 0 40px; background: var(--glass); backdrop-filter: blur(10px); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr; gap: 32px; align-items: start; }
.footer-brand b { color: var(--violet-deep); font-family: 'Fraunces', serif; font-weight: 600; font-size: 22px; }
.footer-brand p { color: var(--ink-2); font-size: 14px; margin: 10px 0 0; max-width: 280px; }
.footer-col h5, .footer-col .footer-h { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 16px; font-weight: 600; }
.footer-col a { display: block; color: var(--ink-2); font-size: 14.5px; margin-bottom: 11px; transition: color 0.2s; }
.footer-col a:hover { color: var(--violet-deep); }
.footer-powered { color: var(--ink-2); font-size: 13px; line-height: 1.65; }
.footer-powered a { color: var(--violet-deep); border-bottom: 1px solid var(--border-gold); }
.footer-powered a:hover { color: var(--violet); }
.footer-bottom { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--border); color: var(--ink-3); font-size: 12.5px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.footer-bottom a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--border-gold); }
.footer-bottom a:hover { color: var(--violet-deep); }

/* ── Product detail ───────────────────────────────────────── */
.product-detail { display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: start; padding-top: 56px; }
.product-media { background: var(--glass-strong); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 46px; display: flex; align-items: center; justify-content: center; aspect-ratio: 4/3; backdrop-filter: blur(14px); box-shadow: var(--shadow-card); }
.product-media img { max-width: 100%; max-height: 100%; object-fit: contain; }
.product-info .eyebrow { margin-bottom: 14px; display: block; }
.product-info h1 { font-size: clamp(2.2rem, 4vw, 3.2rem); margin-bottom: 18px; }
.product-info .desc { color: var(--ink-2); margin-bottom: 30px; }
.denoms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 30px; }
.denom { border: 1px solid var(--border-gold); background: var(--white); border-radius: 14px; padding: 18px 12px; cursor: pointer; text-align: center; min-height: 70px; transition: all 0.22s var(--ease-out); }
.denom .usd { font-size: 12px; color: var(--ink-3); }
.denom .ttd { font-size: 17px; font-weight: 700; color: var(--ink); margin-top: 3px; font-family: 'Manrope', sans-serif; }
.denom:hover { border-color: var(--violet-soft); transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.denom.selected { border-color: var(--violet); background: var(--violet-mist); box-shadow: 0 0 0 2px var(--violet) inset; }
.denom.selected .ttd { color: var(--violet-deep); }

/* Custom amount, for variable-value cards. Priced by the server as you type —
   see the /price/quote route — so the number here is the number charged. */
.denom-custom { margin: -14px 0 26px; padding: 16px 18px; border: 1px dashed var(--border-gold); border-radius: 14px; background: var(--violet-mist); }
.denom-custom label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 8px; }
.denom-custom-row { display: flex; align-items: center; gap: 8px; }
.denom-custom-prefix { font-size: 15px; font-weight: 700; color: var(--ink-2); }
.denom-custom input { flex: 1; min-width: 0; padding: 11px 14px; font: inherit; font-size: 16px; color: var(--ink); background: var(--white); border: 1px solid var(--border-gold); border-radius: 10px; }
.denom-custom input:focus-visible { outline: 2px solid var(--violet); outline-offset: 1px; }
.denom-custom small { display: block; margin-top: 8px; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.denom-custom-out { margin-top: 10px; font-size: 15px; font-weight: 700; min-height: 1.4em; color: var(--ink-2); }
.denom-custom-out.is-ok { color: var(--violet-deep); }
.denom-custom-out.is-error { color: #B3261E; font-weight: 600; font-size: 13.5px; }

.redeem-note { background: var(--violet-mist); border-left: 3px solid var(--violet); padding: 16px 20px; border-radius: 12px; color: var(--ink-2); font-size: 13.5px; }

/* ── Checkout ─────────────────────────────────────────────── */
.narrow { max-width: 540px; margin: 0 auto; }
.summary-card { background: var(--glass-strong); border: 1px solid var(--border-gold); border-radius: var(--radius); padding: 24px 26px; margin-bottom: 30px; backdrop-filter: blur(14px); box-shadow: var(--shadow-card); }
.summary-card .row { display: flex; justify-content: space-between; align-items: center; }
.summary-card .row + .row { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.summary-card .label { color: var(--ink-2); font-size: 14px; }
.summary-card .value { font-weight: 700; }
.summary-card .total { color: var(--violet-deep); font-size: 24px; font-weight: 700; font-family: 'Manrope', sans-serif; }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 8px; }
.field label .req { color: var(--violet); }
.field input { width: 100%; background: var(--white); border: 1px solid var(--border-gold); border-radius: 12px; color: var(--ink); font-family: 'Manrope', sans-serif; font-size: 15px; padding: 14px 16px; min-height: 52px; transition: border-color 0.18s, box-shadow 0.18s; }
.field input::placeholder { color: var(--ink-3); }
.field input:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 4px rgba(124,77,255,0.14); }
.pay-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px; }
.pay-opt { position: relative; border: 1px solid var(--border-gold); background: var(--white); border-radius: 12px; padding: 17px; cursor: pointer; display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; transition: all 0.2s var(--ease-out); }
.pay-opt input { position: absolute; opacity: 0; pointer-events: none; }
.pay-opt:has(input:checked) { border-color: var(--violet); background: var(--violet-mist); box-shadow: 0 0 0 2px var(--violet) inset; }
.pay-opt:has(input:focus-visible) { outline: 2px solid var(--violet); outline-offset: 2px; }
.alert { border-radius: 12px; padding: 14px 18px; font-size: 14px; margin-bottom: 20px; border: 1px solid; }
.alert-error { background: #FDECEE; border-color: #F3B6BC; color: #B23241; }
.alert-info { background: var(--violet-mist); border-color: var(--border-gold); color: var(--ink-2); }
.alert-success { background: #E9F9EF; border-color: #A9E6BF; color: #1E7C46; }

/* ── Status / pending ─────────────────────────────────────── */
.status-wrap { max-width: 620px; margin: 0 auto; text-align: center; padding-top: 30px; }
.status-icon { width: 76px; height: 76px; margin: 0 auto 24px; }
.status-icon.ok { color: #2BB36B; }
.status-icon.fail { color: #E0556A; }
.status-icon.wait { color: var(--violet-deep); }
.code-box { background: var(--white); border: 1px solid var(--border-gold); border-radius: var(--radius); padding: 24px; margin: 26px 0; box-shadow: var(--shadow-card); }
.code-box .code { font-family: 'JetBrains Mono', monospace; font-size: clamp(1.1rem, 3vw, 1.5rem); letter-spacing: 0.08em; color: var(--violet-deep); font-weight: 500; word-break: break-all; }
.bank-table { width: 100%; text-align: left; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin: 26px 0; background: var(--white); }
.bank-table td { padding: 15px 20px; font-size: 14px; }
.bank-table tr + tr td { border-top: 1px solid var(--border); }
.bank-table td:first-child { color: var(--ink-2); }
.bank-table td:last-child { text-align: right; font-weight: 700; }

/* ── Prose pages ──────────────────────────────────────────── */
.prose { max-width: 720px; margin: 0 auto; padding-top: 40px; }
.prose h1 { font-size: clamp(2.4rem, 5vw, 3.4rem); margin-bottom: 22px; }
.prose p { color: var(--ink-2); margin: 0 0 18px; font-size: 1.05rem; }
.prose h2 { font-family: 'Fraunces', serif; font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 0 0 20px; }
.prose h3 { font-size: 1.12rem; font-weight: 700; color: var(--ink); margin: 30px 0 8px; }
.prose a { color: var(--violet-deep); }
.prose .steps { list-style: none; padding: 0; margin: 32px 0; counter-reset: s; }
.prose .steps li { position: relative; padding: 0 0 24px 60px; counter-increment: s; }
.prose .steps li::before { content: counter(s); position: absolute; left: 0; top: -2px; width: 42px; height: 42px; border-radius: 50%; background: var(--violet-mist); border: 1px solid var(--border-gold); color: var(--violet-deep); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.prose .steps li b { color: var(--ink); display: block; margin-bottom: 2px; }

/* ── WhatsApp support button ──────────────────────────────── */
.wa-fab {
  position: fixed;
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px 13px 16px;
  border-radius: 999px;
  background: #25D366;
  color: #06301A;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  box-shadow: 0 12px 34px rgba(37, 211, 102, 0.38), 0 2px 8px rgba(22, 15, 46, 0.12);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.wa-fab:hover { transform: translateY(-2px); box-shadow: 0 18px 42px rgba(37, 211, 102, 0.45); }
.wa-fab:focus-visible { outline: 3px solid var(--violet-deep); outline-offset: 3px; }
.wa-fab svg { flex: none; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 980px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .features, .steps-grid, .trust { grid-template-columns: 1fr; }
  .product-detail { grid-template-columns: 1fr; gap: 36px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-brand { grid-column: 1 / -1; }
  .section { padding: 80px 0; }
}
@media (max-width: 640px) {
  .nav-links { display: none; }
  /* The panel now carries an accordion of eight categories, so it has to be
     opaque and scrollable — at 86% white the page behind it read straight
     through the menu text — and it has to sit above the WhatsApp FAB. */
  .nav-links.open {
    display: flex; flex-direction: column; position: absolute; top: 76px; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--border);
    box-shadow: 0 20px 44px rgba(22, 15, 46, 0.14);
    padding: 18px 24px calc(22px + env(safe-area-inset-bottom, 0px));
    gap: 16px; z-index: 70;
    max-height: calc(100dvh - 76px); overflow-y: auto; overscroll-behavior: contain;
  }
  .nav-toggle { display: block; }
  /* Two cards per row on a phone. One-up meant 29 cards became a ~13,000px
     scroll and the shelf read as a list of adverts rather than a shop you can
     scan. Tighter card chrome keeps the tile legible at half the width. */
  .grid { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 28px; }
  .card { padding: 12px; }
  .card-img-wrap { padding: 10px; border-radius: 12px; }
  .card h3, .card .card-name { font-size: 14px; }
  .card .price, .card .from { font-size: 13px; }
  .denoms { grid-template-columns: repeat(2, 1fr); }
  .pay-toggle { grid-template-columns: 1fr; }
  /* Icon-only on phones so the button never covers a price or CTA. */
  .wa-fab { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); padding: 14px; }
  .wa-fab span { display: none; }
  /* Sections were 80px top and bottom on a phone, which turned the homepage
     into 12,000px of mostly empty lavender. */
  .section { padding: 52px 0; }
}

/* The floating WhatsApp button is fixed, so it sits over whatever happens to be
   at that screen position — on checkout that was the phone number field, where
   a mistap sends the customer to WhatsApp instead of into the input. Support is
   one back-tap away from a checkout; the button is not needed here. */
body.page-checkout .wa-fab { display: none; }
@media (prefers-reduced-motion: reduce) {
  .wa-fab { transition: none; }
  .wa-fab:hover { transform: none; }
}

/* ── Breadcrumbs + fact tables (answer-shaped content) ────── */
.crumbs { font-size: 13px; color: var(--ink-3); margin-bottom: 18px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--violet-deep); text-decoration: underline; }
.crumbs span[aria-hidden] { opacity: 0.45; }

/* Separators are drawn on the cells, not as a container background showing
   through a 1px gap — otherwise a part-filled last row renders as a stray
   coloured panel. */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 28px 0 0; background: var(--glass-strong); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.facts > div { padding: 16px 18px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); margin: 0 -1px -1px 0; }
.facts dt { font-size: 11px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 5px; }
.facts dd { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--ink-1); font-weight: 500; }

.facts.facts-stacked { grid-template-columns: 1fr; }
@media (max-width: 640px) { .facts { grid-template-columns: 1fr; } }


/* ═══════════════════════════════════════════════════════════════
   STRUCTURE — nav dropdown, page headers, shelves, contact cards
   ═══════════════════════════════════════════════════════════════ */

/* ── Nav dropdown ─────────────────────────────────────────── */
/* The group's own padding is the hover bridge, so the pointer can travel from
   the label into the menu without crossing dead space. An absolutely-positioned
   ::after overlay would do the same job but sits ON TOP of the anchor and
   swallows the click — the link stops working and nothing looks wrong. */
.nav-group { position: relative; display: flex; align-items: center; padding: 12px 0 20px; margin: -12px 0 -20px; }
.nav-group-label { display: inline-flex; align-items: center; gap: 5px; }
.nav-group .chev { transition: transform 0.2s; opacity: 0.6; }
.nav-group-toggle { display: none; background: none; border: 0; }

.nav-menu {
  position: absolute; top: calc(100% - 2px); left: 50%; transform: translateX(-50%) translateY(-6px);
  width: min(520px, calc(100vw - 40px)); z-index: 60;
  background: rgba(255,255,255,0.94); backdrop-filter: saturate(150%) blur(20px);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(22,15,46,0.14);
  padding: 12px; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
/* Hover-to-open only where there is a real pointer. On a phone the menu is an
   accordion driven by .open, and a hover rule there would fight the tap. */
@media (hover: hover) and (min-width: 861px) {
  .nav-group.has-menu:hover .nav-menu,
  .nav-group.has-menu:focus-within .nav-menu {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
  }
  .nav-group.has-menu:hover .chev { transform: rotate(180deg); }
}
.nav-group.open .nav-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.nav-group.open .chev { transform: rotate(180deg); }

.nav-menu a { display: block; padding: 11px 13px; border-radius: 12px; transition: background 0.15s; }
.nav-menu a:hover { background: var(--lav-100, rgba(124,77,255,0.07)); }
.nav-menu a b { display: block; font-size: 14px; font-weight: 650; color: var(--ink); letter-spacing: -0.01em; }
.nav-menu a span { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.nav-menu-all { border-bottom: 1px solid var(--border); border-radius: 12px 12px 0 0 !important; margin-bottom: 6px; padding-bottom: 13px !important; }
.nav-menu-all b { color: var(--violet-deep) !important; }
.nav-menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }

/* ── Page header (shared by every page below the homepage) ── */
.page-head { max-width: 760px; margin-bottom: 8px; }
.page-head h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); line-height: 1.08; letter-spacing: -0.03em; margin: 6px 0 0; }
.page-head .eyebrow { display: block; }
.page-lede { margin-top: 16px; color: var(--ink-2); font-size: 17px; line-height: 1.62; }
.crumbs [aria-current='page'] { color: var(--ink-3); }

/* ── Shelves (homepage category tiles) ────────────────────── */
.shelves { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 44px; }
.shelf {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 148px; padding: 22px; border-radius: var(--radius-lg);
  background: var(--glass-strong); border: 1px solid var(--border);
  backdrop-filter: blur(14px); box-shadow: var(--shadow-soft);
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.shelf:hover { transform: translateY(-4px); border-color: rgba(124,77,255,0.32); box-shadow: 0 18px 44px rgba(22,15,46,0.10); }
.shelf-count {
  position: absolute; top: 18px; left: 22px;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 30px; font-weight: 500;
  color: var(--violet-deep); opacity: 0.28; letter-spacing: -0.03em;
}
.shelf h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 7px; }
.shelf-go { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--violet-deep); }
.shelf-go svg { transition: transform 0.2s; }
.shelf:hover .shelf-go svg { transform: translateX(3px); }

.section-more { text-align: center; margin-top: 44px; }

/* ── Shelf links (catalogue page, compact row) ────────────── */
.shelf-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 32px 0 8px; }
.shelf-link {
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px;
  border: 1px solid var(--border); border-radius: 100px; background: var(--glass-strong);
  transition: border-color 0.18s, background 0.18s;
}
.shelf-link:hover { border-color: rgba(124,77,255,0.4); }
.shelf-link b { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.shelf-link span { font-size: 11.5px; color: var(--ink-3); font-family: 'JetBrains Mono', ui-monospace, monospace; }

.catalogue-tools { margin-top: 26px; }
.catalogue-tools .chips { margin-top: 16px; }

/* ── Contact cards (support page) ─────────────────────────── */
.contact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
.contact-card {
  display: flex; flex-direction: column; gap: 5px; padding: 26px 24px;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--glass-strong); backdrop-filter: blur(14px); box-shadow: var(--shadow-soft);
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.contact-card:hover { transform: translateY(-3px); border-color: rgba(124,77,255,0.3); box-shadow: 0 16px 40px rgba(22,15,46,0.09); }
.contact-card svg { color: var(--violet-deep); margin-bottom: 10px; }
.contact-card b { font-size: 16px; font-weight: 700; letter-spacing: -0.015em; color: var(--ink); }
.contact-card span { font-size: 14px; color: var(--ink-2); }
.contact-card em { font-style: normal; font-size: 12.5px; color: var(--ink-3); margin-top: 6px; }
.contact-card-wa svg { color: #25D366; }

.prose ul { margin: 14px 0 18px; padding-left: 22px; color: var(--ink-2); line-height: 1.7; }
.prose li { margin-bottom: 10px; }
.prose code { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.88em; background: rgba(124,77,255,0.08); padding: 2px 6px; border-radius: 5px; }

@media (max-width: 1024px) {
  .shelves { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  /* Mobile nav: the dropdown becomes an inline, always-open section rather
     than a hover menu, because there is no hover on a phone. */
  .nav-group { display: flex; flex-wrap: wrap; align-items: center; width: 100%; padding: 0; margin: 0; }
  .nav-group-label { flex: 1; }
  .nav-group-label .chev { display: none; }
  .nav-group-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin: -10px -10px -10px 0;
    color: var(--ink-2); cursor: pointer;
  }
  .nav-group-toggle svg { transition: transform 0.2s; }
  .nav-group.open .nav-group-toggle svg { transform: rotate(180deg); }
  .nav-menu { flex-basis: 100%; }
  /* Static, full-width accordion. The transform must be cleared at the same
     specificity as the desktop open-state rule, or the menu is dragged half
     its own width off the left edge. */
  .nav-menu,
  .nav-group.open .nav-menu {
    position: static; transform: none; width: auto; opacity: 1; visibility: visible;
    pointer-events: auto; background: rgba(124, 77, 255, 0.045); border: 0; box-shadow: none;
    backdrop-filter: none; border-radius: 14px; padding: 8px; margin-top: 12px;
  }
  .nav-menu { display: none; }
  .nav-group.open .nav-menu { display: block; }
  .nav-menu a { padding: 9px 12px; }
  .nav-menu-grid { grid-template-columns: 1fr; }
  .shelves { grid-template-columns: repeat(2, 1fr); }
  .contact-cards { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .shelves { grid-template-columns: 1fr 1fr; gap: 12px; }
  .shelf { min-height: 128px; padding: 18px; }
  .shelf-count { font-size: 24px; top: 14px; left: 18px; }
  .page-head { margin-bottom: 4px; }
}

@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; gap: 26px; } }

/* Payment decline guidance — the processor's reason, translated into an action.
   Amber rather than red: the payment failed, but this is a fixable state and
   the page should not read like a rejection. */
.decline-note { margin: 20px auto 4px; max-width: 560px; text-align: left; padding: 16px 18px; border: 1px solid #E6C200; border-left: 4px solid #E6C200; border-radius: 12px; background: #FFFBEB; }
.decline-note b { display: block; color: #7A5B00; font-size: 15px; margin-bottom: 6px; }
.decline-note p { margin: 0; color: #5A5273; font-size: 14px; line-height: 1.6; }
.btn-row-center { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.btn-ghost { background: var(--white); color: var(--ink); border: 1px solid var(--border-gold); }
.btn-ghost:hover { border-color: var(--violet); color: var(--violet-deep); }

/* Product lead + the detail that follows the buy button. The lead is short on
   purpose so the amount buttons clear the fold on a phone. */
.desc-lead { font-size: 17px; line-height: 1.6; }
.buy-notes { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.buy-notes p { margin: 0 0 10px; font-size: 14px; line-height: 1.65; color: var(--ink-2); }
.buy-notes p:last-child { margin-bottom: 0; }
.buy-notes b { color: var(--ink); }
/* Filter chips centred so a wrapped row does not read as ragged left-over text. */
/* On a phone the six category chips wrapped to four rows, so a shopper had to
   scroll past ~700px of filters before seeing a single gift card — on the page
   whose whole job is showing gift cards. One horizontally scrollable row is the
   pattern people already know from every other store, and it puts product back
   on the first screen. `overflow-x` was already set here but `flex-wrap: wrap`
   was overriding it, so the chips stacked instead of scrolling. */
@media (max-width: 640px) {
  .chips {
    flex-wrap: nowrap;
    justify-content: flex-start;
    /* Full-bleed so the row scrolls edge to edge instead of stopping inside
       the container's gutter, which reads as a cut-off list. */
    margin-inline: -24px;          /* matches .container padding */
    padding-inline: 24px;
    scroll-padding-inline: 24px;
  }
  .chip { flex: 0 0 auto; }
}

/* Tucked state for the floating WhatsApp button — see store.js. Slides clear of
   the content instead of covering a tap target, and comes straight back. */
.wa-fab { transition: transform .22s var(--ease-out), opacity .22s var(--ease-out), box-shadow .22s var(--ease-out); }
.wa-fab.is-tucked { transform: translateY(140%); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .wa-fab.is-tucked { transform: none; opacity: 1; pointer-events: auto; } }

/* Tighter card tiles on phones: the image box carried a lot of dead padding,
   which is what made a two-up grid still scroll further than it needed to. */
@media (max-width: 640px) {
  .card-img-wrap, .card-img { min-height: 0; }
  .card { padding-bottom: 14px; }
}

/* Touch targets. Footer links, breadcrumbs and the menu button all measured
   under 40px tall on a phone — fine with a mouse, a coin-toss with a thumb.
   Padding rather than height so nothing reflows on desktop. */
@media (max-width: 640px) {
  .footer-col a { padding: 10px 0; margin-bottom: 0; }
  .crumbs { gap: 6px 8px; }
  .crumbs a { padding: 8px 0; }
  .nav-toggle { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
  .nav-links.open a { padding: 10px 0; }
}

/* The search clear button is a standalone control, not an inline link, so the
   44px touch minimum genuinely applies to it. Grows the hit area without
   changing how big the glyph looks. */
.search-clear { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* Hero fact strip — live numbers, not decoration. */
.hero-facts {
  list-style: none; margin: 26px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: center;
  font-size: 14.5px; color: var(--ink-2);
}
/* Deliberately NOT a flex container. These items mix an element (<b>) with
   bare text, and a flex parent both drops the whitespace between them
   ("29cards in stock") and, with `gap`, injects a space inside the phrase
   ("Trinidad -based"). Plain inline-block keeps normal text flow; the dot is an
   inline ::before with its own margin. */
.hero-facts li { display: inline-block; }
.hero-facts li::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--violet); opacity: .55;
  margin-right: 9px; position: relative; top: -1px;
}
.hero-facts b { color: var(--ink); font-weight: 700; }
@media (max-width: 640px) {
  .hero-facts { gap: 8px 18px; font-size: 13.5px; margin-top: 22px; }
}

/* ── Accounts ──────────────────────────────────────────────── */
.container.narrow { max-width: 520px; }
.auth-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 30px 28px; box-shadow: var(--shadow-card); }
.auth-card h1 { margin: 4px 0 18px; }
.auth-card .field { margin-bottom: 16px; }
.auth-card label { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 7px; }
.auth-card input[type=text], .auth-card input[type=email], .auth-card input[type=password] {
  width: 100%; padding: 13px 15px; font: inherit; font-size: 16px; color: var(--ink);
  background: var(--white); border: 1px solid var(--border-gold); border-radius: 11px; }
.auth-card input:focus-visible { outline: 2px solid var(--violet); outline-offset: 1px; }
/* Hints were scoped to .auth-card, so the checkout's "Create an account and
   we'll give you one." rendered at full body size and read as stray copy
   rather than helper text. Global, since every form uses the same class. */
.hint { display: block; margin-top: 6px; font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.hint a { color: var(--violet-deep); }

/* The marketing opt-in had no styling at all: the checkbox sat jammed against
   its own label and the block crowded the discount field underneath it. */
.optin { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 22px;
  padding: 4px 0; min-height: 44px; font-size: 13.5px; line-height: 1.5;
  color: var(--ink-2); cursor: pointer; }
.optin input[type="checkbox"] { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 1px;
  accent-color: var(--violet); cursor: pointer; }
.auth-alt { margin: 18px 0 0; font-size: 14.5px; color: var(--ink-2); }
.auth-note { margin: 10px 0 0; font-size: 13px; color: var(--ink-3); line-height: 1.6; }
.btn-google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  background: var(--white); color: var(--ink); border: 1px solid var(--border-gold); font-weight: 600; }
.btn-google:hover { border-color: var(--violet); }
.auth-or { position: relative; text-align: center; margin: 18px 0; }
.auth-or::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--border); }
.auth-or span { position: relative; background: var(--white); padding: 0 12px; color: var(--ink-3); font-size: 13px; }

.promo-banner { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; margin-bottom: 18px;
  border: 1px solid var(--border-gold); border-left: 4px solid var(--violet); border-radius: 12px;
  background: var(--violet-mist); }
.promo-banner b { color: var(--violet-deep); font-size: 15.5px; }
.promo-banner span { font-size: 13.5px; color: var(--ink-2); }

.account-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.promo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.promo-card { border: 1px dashed var(--border-gold); border-radius: 14px; padding: 16px 18px;
  background: var(--violet-mist); display: flex; flex-direction: column; gap: 5px; }
.promo-code { font-family: 'JetBrains Mono', monospace; font-size: 18px; font-weight: 700; color: var(--violet-deep); letter-spacing: 1px; }
.promo-meta { font-size: 12.5px; color: var(--ink-2); }

.orders-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.orders-table th { text-align: left; padding: 10px 12px 10px 0; font-size: 12px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink-3); border-bottom: 1px solid var(--border); }
.orders-table td { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--border); vertical-align: top; }
.orders-table code { font-size: 13px; color: var(--ink); }
.orders-table small { color: var(--ink-3); font-size: 12px; }
.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.pill-ok { background: #E7F6EC; color: #1B7F3B; }
.pill-wait { background: #FFF6DB; color: #7A5B00; }
.pill-fail { background: #FDECEA; color: #B3261E; }

.qr { display: flex; justify-content: center; margin: 8px 0 14px; }
.qr svg { width: 200px; height: 200px; }
.secret { display: inline-block; margin-top: 6px; font-family: 'JetBrains Mono', monospace; font-size: 14px;
  letter-spacing: 1px; background: var(--violet-mist); padding: 8px 12px; border-radius: 8px; word-break: break-all; }
.backup-codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 14px 0 18px; }
.backup-codes code { font-family: 'JetBrains Mono', monospace; font-size: 14px; background: var(--violet-mist);
  padding: 9px 10px; border-radius: 8px; text-align: center; letter-spacing: .5px; }
.alert-ok { background: #E7F6EC; border: 1px solid #9BD8AE; color: #1B7F3B; padding: 12px 14px; border-radius: 11px; margin-bottom: 16px; }
.alert-error { background: #FDECEA; border: 1px solid #F3B7B0; color: #B3261E; padding: 12px 14px; border-radius: 11px; margin-bottom: 16px; }
@media (max-width: 640px) { .backup-codes { grid-template-columns: 1fr; } }

/* ── First-order promo bar ─────────────────────────────────── */
.promo-bar { position: relative; z-index: 80; display: flex; align-items: center; justify-content: center;
  gap: 14px; padding: 10px 44px 10px 20px; text-align: center;
  background: linear-gradient(100deg, #5B2EE0 0%, #7C4DFF 55%, #9B6FE8 100%); color: #fff;
  font-size: 14px; line-height: 1.5; }
.promo-bar b { font-weight: 700; }
.promo-bar a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.promo-bar a:hover { text-decoration: none; }
.promo-bar-x { position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: none; border: 0; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; opacity: .8; }
.promo-bar-x:hover { opacity: 1; }
.promo-bar-x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 8px; }
/* The bar's height must not depend on which font has loaded. Fonts arrive with
   `display: swap`, and the fallback wrapped this text onto three lines where
   the web font takes two — a 20px collapse mid-load that shoved the whole
   homepage up and scored CLS 0.11, over Google's 0.1 threshold. The copy is
   short enough to wrap identically in both, and min-height pins the box so any
   remaining reflow happens inside it rather than moving the page. */
@media (max-width: 640px) {
  .promo-bar { font-size: 13px; padding: 9px 48px 9px 14px; min-height: 56px; }
}

/* ── Newsletter ────────────────────────────────────────────── */
.newsletter { display: flex; align-items: center; justify-content: space-between; gap: 22px;
  flex-wrap: wrap; margin-top: 38px; padding: 22px 24px; border: 1px solid var(--border-gold);
  border-radius: var(--radius); background: var(--violet-mist); }
.newsletter-copy { display: flex; flex-direction: column; gap: 3px; }
.newsletter-copy b { color: var(--ink); font-size: 15.5px; }
.newsletter-copy span { color: var(--ink-2); font-size: 13.5px; }
.newsletter-form { display: flex; gap: 10px; flex-wrap: wrap; }
.newsletter-form input[type=email] { min-width: 240px; padding: 12px 15px; font: inherit; font-size: 15px;
  color: var(--ink); background: var(--white); border: 1px solid var(--border-gold); border-radius: 11px; }
.newsletter-form input:focus-visible { outline: 2px solid var(--violet); outline-offset: 1px; }
.newsletter-ok { margin: 0; color: var(--violet-deep); font-weight: 700; }
.newsletter-err { width: 100%; margin: 8px 0 0; color: #B3261E; font-size: 13px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 640px) {
  .newsletter { flex-direction: column; align-items: stretch; gap: 14px; }
  .newsletter-form input[type=email] { min-width: 0; flex: 1; }
  .newsletter-form .btn { width: 100%; }
}

/* Shown when the supplier balance temporarily limits the amounts on offer. */
/* Retrieved gift card code */
.code-btn { min-height: 36px; padding: 7px 14px; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--white); background: var(--violet); border: 0; border-radius: 9px; cursor: pointer; }
.code-btn:hover { background: var(--violet-deep); }
.code-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center;
  justify-content: center; padding: 20px; background: rgba(22, 15, 46, 0.55); }
.code-modal-box { width: 100%; max-width: 420px; padding: 26px; border-radius: 16px;
  background: var(--white); box-shadow: 0 24px 70px rgba(22, 15, 46, 0.3); }
.code-modal-box h3 { margin: 0 0 16px; font-size: 19px; }
.code-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 13px; margin-bottom: 9px; border-radius: 10px; background: var(--violet-mist);
  border: 1px solid var(--border-gold); }
.code-row span { font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 1px; }
.code-row code { font-size: 15px; font-weight: 700; color: var(--violet-deep);
  word-break: break-all; text-align: right; }
.code-note { margin: 12px 0 0; font-size: 12.5px; color: var(--ink-3); }
.code-modal-box .btn { margin-top: 16px; width: 100%; }

/* Why bother having an account — stated plainly on the sign-up page, because
   a discount alone never answered the question. */
.join-why { margin: 18px 0 24px; padding: 0; list-style: none; display: grid; gap: 11px; }
.join-why li { position: relative; padding-left: 26px; font-size: 13.8px; line-height: 1.55;
  color: var(--ink-2); }
.join-why li b { color: var(--ink); }
.join-why li::before { content: ""; position: absolute; left: 4px; top: 7px; width: 7px;
  height: 7px; border-radius: 50%; background: var(--violet); }

/* Related cards — a product page that dead-ends is where shoppers leave. */
.related { margin: 56px 0 8px; }
.related h2 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin: 0 0 20px; }
.related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px; }
.related-grid .card-title { font-size: 15px; }

/* Gift fields — indented and tinted so it reads as a branch of the form that
   the checkbox above opened, not as more required fields appearing at random. */
.gift-fields { margin: -12px 0 22px; padding: 16px 16px 4px; border-radius: 13px;
  background: var(--violet-mist); border: 1px solid var(--border-gold); }
.gift-fields textarea { width: 100%; padding: 13px 15px; font: inherit; font-size: 16px;
  color: var(--ink); background: var(--white); border: 1px solid var(--border-gold);
  border-radius: 11px; resize: vertical; }
.gift-fields textarea:focus-visible { outline: 2px solid var(--violet); outline-offset: 1px; }

/* Value upsell — a statement of fact about the prices above it, so it is
   styled as information (quiet, bordered) rather than as a sales banner. */
.upsell { margin: -6px 0 20px; padding: 12px 14px; font-size: 13.5px; line-height: 1.55;
  color: var(--ink-2); background: var(--violet-mist); border: 1px solid var(--border-gold);
  border-radius: 12px; }
.upsell b { color: var(--violet-deep); }
.upsell-go { margin-left: 4px; padding: 0; font: inherit; font-weight: 600;
  color: var(--violet-deep); background: none; border: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px; }
.upsell-go:hover { text-decoration: none; }

/* Limited-time offer. Deliberately restrained: the deadline is real, so it
   does not need to shout to be believed. */
.offer { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0 0 22px; padding: 14px 16px; border-radius: 13px;
  background: var(--white); border: 1px solid var(--border-gold); }
.offer.is-live { border-color: var(--violet); background: var(--violet-mist); }
.offer.is-done { opacity: .72; }
.offer-main { flex: 1 1 200px; display: flex; flex-direction: column; gap: 3px; }
.offer-main strong { font-size: 14.5px; color: var(--ink); }
.offer-main span { font-size: 12.5px; color: var(--ink-2); }
.offer-main code { padding: 1px 6px; border-radius: 6px; font-size: 13px;
  background: var(--white); border: 1px solid var(--border-gold); color: var(--violet-deep); }
.offer-btn { flex: 0 0 auto; min-height: 44px; padding: 10px 18px; font: inherit;
  font-weight: 600; font-size: 14px; color: var(--white); background: var(--violet);
  border: 0; border-radius: 10px; cursor: pointer; }
.offer-btn:hover { background: var(--violet-deep); }
.offer-btn:disabled { opacity: .6; cursor: default; }

.denom-note { margin: -14px 0 22px; padding: 11px 14px; font-size: 13.5px; line-height: 1.55;
  color: var(--ink-2); background: var(--violet-mist); border-radius: 11px; }

/* ── Phone legibility ─────────────────────────────────────────
   Nothing on a phone should render below 12px. The uppercase micro-labels were
   set at 10-11px, which reads as decoration on a desktop monitor and as a
   squint on a handset. Bumped only at phone widths so the desktop typography
   is untouched. */
@media (max-width: 640px) {
  .card .cat-tag { font-size: 12px; letter-spacing: 0.08em; }
  .facts dt { font-size: 12px; letter-spacing: 0.08em; }
  .eyebrow { font-size: 12px; }
  .shelf-link span { font-size: 12px; }

  /* Thumb targets. The header logo is the site's "go home" control and was
     33px tall; breadcrumbs were 37px. Padding rather than font-size so the
     type scale is untouched — only the hit area grows. */
  .nav-logo { min-height: 44px; }
  .crumbs { gap: 10px; }
  .crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Bank-transfer rescue on a failed order. Deliberately quiet: it appears only
   after a card has been declined, so it must read as help rather than as an
   upsell competing with "try card again". */
.bank-fallback {
  margin: 20px 0 4px;
  padding: 16px 18px;
  text-align: left;
  border: 1px solid var(--border-gold, rgba(212, 175, 55, 0.35));
  border-radius: 12px;
  background: rgba(212, 175, 55, 0.06);
}
.bank-fallback p { margin: 0 0 12px; font-size: 14px; line-height: 1.6; }
.bank-fallback b { color: var(--text-primary); display: block; margin-bottom: 4px; }
@media (max-width: 640px) {
  .bank-fallback { padding: 14px; }
  .bank-fallback p { font-size: 13.5px; }
}

/* "What happens next" — sets expectations before the hand-off to the processor,
   whose page carries the parent company's name. Quiet, informational, and
   deliberately directly above the button that triggers the redirect. */
.next-step {
  margin: 16px 0 0;
  padding: 14px 16px;
  text-align: left;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}
.next-step b { color: var(--text-primary); }
.next-step > b { display: block; margin-bottom: 6px; font-size: 13px; }
.next-step p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink-3); }
.next-step-sub { margin-top: 8px !important; opacity: 0.85; }