/* PMJ GOLD — storefront design system (light-gold luxe, mobile-first responsive) */

:root {
  --ink: #221a10;
  --ink-2: #3d3223;
  --ink-3: #574936;
  --paper: #fbf6ec;
  --paper-2: #f4ead6;
  --paper-3: #efe1c6;
  --card: #fffdf8;
  --gold: #c8a24a;
  --gold-2: #a8842f;
  --gold-3: #e9d5a0;
  --gold-deep: #8a6a20;
  --gold-soft: rgba(200, 162, 74, 0.14);
  --gold-tint: #fdf8ed;
  --green: #1f8f4e;
  --red: #b3372f;
  --line: #e6dcc4;
  --line-dark: #d8caab;
  --muted: #7d7360;
  --muted-dark: #6c6250;
  --shadow: 0 8px 24px rgba(120, 96, 40, 0.08);
  --shadow-lg: 0 18px 46px rgba(120, 96, 40, 0.16);
  --radius: 14px;
  --radius-sm: 9px;
  --font-display: "Fraunces", "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  /* Brand lockup mirrors pmjgold.in: Outfit wordmark, plum + gold, gradient rule. */
  --font-logo: "Outfit", "Inter", "Segoe UI", sans-serif;
  --logo-plum: #4a152c;
  --logo-gold-text: #b59449;
  --wrap: 1180px;
  --header-h: 72px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, .display { font-family: var(--font-display); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; color: var(--ink); }
h1 { font-size: clamp(1.9rem, 4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; }
button, input, select, textarea { font-family: inherit; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.section { padding: 64px 0; }
.section-tight { padding: 40px 0; }
.muted { color: var(--muted); }
.gold-text { color: var(--gold-deep); }
.center { text-align: center; }
.right { text-align: right; }
.hidden { display: none !important; }
.small { font-size: .78rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.kicker {
  display: inline-block; letter-spacing: .18em; text-transform: uppercase;
  font-size: .72rem; font-weight: 700; color: var(--gold-deep); margin-bottom: 10px;
}
.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { .grid-4 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 253, 248, .92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .2s, border-color .2s;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header { background: var(--card); }
}
.site-header.scrolled { box-shadow: 0 6px 22px rgba(120, 96, 40, .12); }
/* padding-block only: .header-row also carries .wrap, and shorthand padding here
   used to zero that gutter — which left the logo flush against the screen edge on
   a 371-1023px phone or tablet while the page content below it was inset. */
.header-row { display: flex; align-items: center; gap: 22px; min-height: var(--header-h); flex-wrap: wrap; padding-block: 6px; }
.brand { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.brand-mark {
  flex: 0 0 auto; padding: 4px; border-radius: 12px; border: 2px solid rgba(212, 175, 55, .45);
  background: linear-gradient(145deg, #1a1a1a, #0a0a0a);
  box-shadow: 0 3px 16px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(212, 175, 55, .15);
  transition: border-color .35s, box-shadow .35s;
}
.brand:hover .brand-mark { border-color: var(--gold); box-shadow: 0 6px 24px rgba(212, 175, 55, .3), inset 0 1px 0 rgba(212, 175, 55, .25); }
.brand-mark img { display: block; height: 40px; width: auto; border-radius: 8px; }
.brand-name { display: flex; flex-direction: column; gap: 4px; line-height: 1; min-width: 0; }
.brand-word { display: flex; align-items: baseline; gap: 7px; position: relative; padding-bottom: 6px; }
.brand-word::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1.5px; border-radius: 1px;
  background: linear-gradient(90deg, var(--logo-plum) 0%, var(--logo-plum) 42%, var(--logo-gold-text) 100%);
}
.brand-pmj, .brand-gold {
  font-family: var(--font-logo); font-size: 1.5rem; font-weight: 800; letter-spacing: .07em;
  line-height: 1; text-transform: uppercase;
}
.brand-pmj { color: var(--logo-plum); }
.brand-gold { color: var(--logo-gold-text); }
.brand-sub {
  font-family: var(--font-logo); font-size: .6rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--logo-plum); white-space: nowrap;
}
.icon-btn svg, .brand svg { display: block; }
.main-nav { display: flex; gap: 4px; margin-left: 8px; flex-wrap: wrap; }
.main-nav a {
  padding: 9px 13px; border-radius: 8px; font-size: .92rem; font-weight: 500;
  color: var(--muted-dark); transition: color .18s, background .18s;
}
.main-nav a:hover, .main-nav a.active { color: var(--gold-deep); background: var(--gold-soft); }
.main-nav a.nav-out {
  border: 1px solid var(--gold-3); color: var(--gold-deep); font-weight: 600;
  display: inline-flex; align-items: center; gap: 5px;
}
.main-nav a.nav-out:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.main-nav a.nav-out .out { font-size: .85em; line-height: 1; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.icon-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); cursor: pointer; font-size: 1.05rem; transition: .18s;
}
.icon-btn:hover { border-color: var(--gold); color: var(--gold-deep); background: var(--gold-tint); }
.icon-btn.on { border-color: var(--gold); color: var(--gold-deep); background: var(--gold-soft); }
.cart-badge {
  position: absolute; top: -4px; right: -4px; min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 10px; background: var(--gold-2); color: #fff;
  font-size: .68rem; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.nav-toggle { display: none; }
/* One header line at every desktop size: brand left, the whole shop journey in a
   single row, account/saved/cart icons pinned right. 1024px is where the row runs
   out of room, so below it the journey moves into the menu button. */
@media (min-width: 1024px) {
  .header-row { flex-wrap: nowrap; gap: 14px; }
  .main-nav { display: flex; flex: 0 0 auto; flex-wrap: nowrap; gap: 2px; margin-left: 0; }
  .main-nav a {
    padding: clamp(6px, .35vw + 2px, 9px) clamp(7px, .5vw + 3px, 12px);
    font-size: clamp(.76rem, .34vw + .55rem, .88rem); white-space: nowrap;
  }
  .main-nav a.nav-out { gap: 4px; }
}
/* Narrower desktops give back the room the greeting takes — the tagline line costs
   nothing, since "Since 2016 · PVT. LTD." is exactly as wide as the wordmark above it. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .brand-mark img { height: 34px; }
  .icon-btn.hdr-acct .hdr-word { display: none; }
  .icon-btn.hdr-acct, .icon-btn.hdr-acct:has(.hdr-word) { width: 42px; min-width: 0; padding: 0; gap: 0; border-radius: 50%; }
}
/* The .98 is deliberate: browser zoom gives the viewport a fraction (1023.5px), and a
   plain 1023px/1024px pair matches neither band, leaving the journey stranded on a
   second header line. */
@media (max-width: 1023.98px) {
  .main-nav {
    display: none; position: absolute; top: var(--header-h); left: 0; right: 0;
    flex-direction: column; gap: 2px; padding: 12px 20px 18px; max-height: calc(100vh - var(--header-h));
    overflow-y: auto; background: var(--card); border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 34px rgba(120, 96, 40, .16);
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 12px 10px; font-size: 1rem; border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav-toggle { display: inline-flex; }
}
/* Phones trim the brand lockup and the icons together so account/saved/cart/menu keep
   the logo's own line. 479px is where the line runs out at full size — the tagline
   under the wordmark is the first thing worth saving, so the icons give way before it. */
@media (max-width: 479px) {
  .header-row { gap: 12px; }
  .brand { gap: 9px; }
  .brand-mark { padding: 3px; border-radius: 9px; }
  .brand-mark img { height: 34px; }
  .brand-pmj, .brand-gold { font-size: 1.3rem; }
  .brand-word { padding-bottom: 5px; }
  .icon-btn { width: 38px; height: 38px; font-size: 1rem; }
  .header-actions { gap: 7px; }
}
@media (max-width: 430px) {
  .brand-sub { display: none; }
  .brand-mark img { height: 28px; }
  .brand-pmj, .brand-gold { font-size: 1.18rem; }
}
/* The smallest screens keep just the coin mark — the wordmark would force a wrap. */
@media (max-width: 370px) {
  .brand-word { display: none; }
}

.announce {
  background: linear-gradient(90deg, var(--gold-3), var(--gold));
  color: var(--ink); text-align: center; font-size: .8rem; font-weight: 600;
  padding: 7px 14px; letter-spacing: .03em;
}
.announce a { text-decoration: underline; }
/* Reassurance ticker — the lines come from Admin → Settings, one in view at a time. */
.an-row {
  display: flex; align-items: center; gap: 10px; text-align: left;
}
.an-mark { color: var(--gold-deep); font-size: .6rem; flex: none; }
.an-track { position: relative; flex: 1 1 auto; height: 1.35em; overflow: hidden; min-width: 0; }
.an-line {
  position: absolute; inset: 0; display: block; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transform: translateY(90%);
  transition: opacity .45s ease, transform .45s ease;
}
.an-line.on { opacity: 1; transform: translateY(0); }
.an-cta {
  flex: none; font-size: .74rem; text-decoration: none !important; font-weight: 700;
  background: var(--ink); color: var(--paper); border-radius: 999px; padding: 4px 12px;
}
.an-close {
  flex: none; background: none; border: 0; color: var(--ink); cursor: pointer;
  font-size: 1.05rem; line-height: 1; padding: 0 2px; opacity: .65;
}
.an-close:hover { opacity: 1; }
@media (max-width: 640px) {
  .an-cta { display: none; }
  .an-row { gap: 8px; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: 999px; cursor: pointer;
  padding: 12px 26px; font-size: .95rem; font-weight: 600; font-family: var(--font-body);
  transition: transform .12s, box-shadow .18s, background .18s, color .18s, border-color .18s;
  text-align: center; -webkit-appearance: none; appearance: none;
}
.btn:active { transform: translateY(1px); }
.btn-gold { background: linear-gradient(135deg, var(--gold-3), var(--gold) 55%, var(--gold-2)); color: var(--ink); box-shadow: 0 8px 22px rgba(168,132,47,.3); border-color: var(--gold-2); }
.btn-gold:hover { box-shadow: 0 12px 30px rgba(168,132,47,.45); filter: saturate(1.06); }
.btn-dark { background: var(--ink); color: var(--paper); }
.btn-dark:hover { background: var(--ink-2); }
.btn-outline { background: transparent; border-color: var(--gold-2); color: var(--gold-deep); }
.btn-outline:hover { background: var(--gold-soft); }
.btn-ghost { background: var(--card); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--gold-2); background: var(--gold-tint); }
.btn-sm { padding: 8px 16px; font-size: .85rem; }
.btn-lg { padding: 15px 34px; font-size: 1.02rem; }
.btn-block { width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: .55; pointer-events: none; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; color: var(--ink);
  background:
    radial-gradient(900px 420px at 88% -12%, rgba(200,162,74,.34), transparent 62%),
    linear-gradient(160deg, #fffdf8 0%, var(--gold-tint) 48%, var(--paper-2) 100%);
  border-bottom: 1px solid var(--line);
}
.hero-inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; padding: 78px 0 88px; }
.hero h1 { color: var(--ink); }
.hero h1 em { font-style: normal; color: var(--gold-deep); }
.hero .lead { color: var(--muted-dark); font-size: 1.06rem; max-width: 46ch; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }
.hero-art img { border-radius: var(--radius); box-shadow: var(--shadow-lg); border: 1px solid var(--gold-3); }
.hero-stats { display: flex; gap: 34px; margin-top: 38px; flex-wrap: wrap; }
.hero-stats b { display: block; font-family: var(--font-display); font-size: 1.5rem; color: var(--gold-deep); }
.hero-stats span { font-size: .8rem; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
@media (max-width: 900px) { .hero-inner { grid-template-columns: 1fr; padding: 52px 0; } .hero-art { order: -1; } }

/* The one rates board on the home page: a plum plate carrying gold, so today's numbers
   read as a market ticker rather than another cream card. */
.rates-plate { padding-block: 34px 6px; }
.rates-card {
  position: relative; overflow: hidden; border-radius: var(--radius-xl);
  border: 1px solid rgba(233, 213, 160, .34); background: var(--royal-band);
  box-shadow: var(--elev-3); color: #f6e9d6;
}
.rates-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--gold-hair); }
.rates-card::after {
  content: ""; position: absolute; inset: auto -12% -58% auto; width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, rgba(233, 213, 160, .17), transparent 68%); pointer-events: none;
}
.rates-head { padding: 26px 30px 0; }
.rates-head .kicker { color: var(--gold-3); }
.rates-head h2 { margin: 8px 0 4px; font-family: var(--font-display); font-size: 1.72rem; letter-spacing: -.02em; color: #fff8ea; }
.rates-sub { margin: 0; font-size: .84rem; color: rgba(246, 233, 214, .8); }
.rates-grid {
  position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: 22px; border-block: 1px solid rgba(233, 213, 160, .2);
}
.rate-cell { padding: 20px 30px; min-width: 0; }
.rate-cell + .rate-cell { border-left: 1px solid rgba(233, 213, 160, .2); }
.rate-cell .lbl {
  display: block; font-size: .68rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(233, 213, 160, .82);
}
.rate-cell .val {
  display: flex; align-items: baseline; gap: 6px; margin-top: 8px; font-family: var(--font-display);
  font-size: 2rem; font-weight: 600; letter-spacing: -.025em; line-height: 1.1; color: #f3d99b;
  font-variant-numeric: tabular-nums;
}
.rate-cell .val i { font-style: normal; font-family: var(--font-body); font-size: .78rem; font-weight: 600; letter-spacing: .04em; color: rgba(246, 233, 214, .74); }
.rate-cell .sub { display: block; margin-top: 7px; font-size: .76rem; color: rgba(246, 233, 214, .78); font-variant-numeric: tabular-nums; }
.rates-foot {
  display: flex; align-items: center; gap: 9px; padding: 14px 30px 16px;
  font-size: .74rem; color: rgba(246, 233, 214, .74);
}
.rates-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--gold-3); box-shadow: 0 0 0 4px rgba(233, 213, 160, .16); }
@media (prefers-reduced-motion: no-preference) {
  .rates-dot { animation: rates-pulse 2.6s var(--ease-out) infinite; }
}
@keyframes rates-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (max-width: 860px) {
  .rates-head, .rate-cell, .rates-foot { padding-inline: 22px; }
  .rate-cell { padding-block: 16px; }
  .rate-cell .val { font-size: 1.62rem; }
}
@media (max-width: 620px) {
  .rates-plate { padding-block: 24px 4px; }
  .rates-head { padding-top: 20px; }
  .rates-head h2 { font-size: 1.42rem; }
  .rates-grid { grid-template-columns: 1fr; }
  .rate-cell + .rate-cell { border-left: 0; border-top: 1px solid rgba(233, 213, 160, .2); }
  .rates-foot { padding-block: 12px; }
}
/* ---------- Trust strip ---------- */
.trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.trust-item {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; display: flex; gap: 14px; align-items: flex-start; box-shadow: var(--shadow);
}
.trust-item .t-ic { font-size: 1.5rem; color: var(--gold-2); }
.trust-item b { display: block; margin-bottom: 3px; }
.trust-item p { margin: 0; font-size: .85rem; color: var(--muted); }
@media (max-width: 900px) { .trust { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .trust { grid-template-columns: 1fr; } }

/* ---------- Product cards ---------- */
.product-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column; transition: transform .16s, box-shadow .2s, border-color .2s;
  position: relative; box-shadow: var(--shadow);
}
.product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--gold-3); }
.pc-media { position: relative; aspect-ratio: 1 / 1; background: var(--paper-2); overflow: hidden; }
.pc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.product-card:hover .pc-media img { transform: scale(1.045); }
.pc-tag {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: var(--gold-3); color: var(--ink); font-size: .68rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--gold);
}
.pc-tag.soon { background: var(--ink); color: var(--gold-3); }
.pc-tag.off { background: var(--gold-2); color: #fff; border-color: var(--gold-deep); }
.pc-fav {
  position: absolute; top: 10px; right: 10px; z-index: 2; width: 36px; height: 36px;
  border-radius: 50%; border: 1px solid var(--line); background: rgba(255,253,248,.92);
  display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1rem; color: var(--muted);
}
.pc-fav:hover { border-color: var(--gold); color: var(--gold-deep); }
.pc-fav.on { color: var(--red); border-color: var(--red); }
.pc-body { padding: 16px 17px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.pc-cat { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pc-name { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; }
.pc-meta { font-size: .8rem; color: var(--muted); }
.pc-price { margin-top: auto; padding-top: 10px; display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.pc-price .now { font-size: 1.12rem; font-weight: 700; }
.pc-price .was { font-size: .84rem; color: var(--muted); text-decoration: line-through; }
.pc-price .save { font-size: .74rem; color: var(--green); font-weight: 700; }
.pc-actions { display: flex; gap: 10px; margin-top: 12px; }
.pc-actions .btn { flex: 1; min-width: 0; }
.pc-unavail { opacity: .82; }
.pc-unavail .pc-media img { filter: grayscale(.35); }

.category-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.category-pill {
  flex: 0 0 auto; border: 1px solid var(--line); background: var(--card); border-radius: 999px;
  padding: 9px 18px; font-size: .88rem; font-weight: 600; color: var(--ink); transition: .15s; cursor: pointer;
}
.category-pill:hover { border-color: var(--gold); background: var(--gold-tint); }
.category-pill.active { background: linear-gradient(135deg, var(--gold-3), var(--gold)); color: var(--ink); border-color: var(--gold-2); box-shadow: 0 4px 14px rgba(168,132,47,.28); }
/* ---------- Shop toolbar: a control card that scrolls away with the page ----------
   It deliberately does not pin. The shelf itself is the point of these pages, so a bar
   that stayed under the header cost the shopper a row of coins on every screen. */
.shop-sticky { padding: 12px 0 6px; margin-bottom: 16px; }
.shop-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap;
  padding: 8px 10px 8px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); box-shadow: 0 6px 18px rgba(120,96,40,.08);
  transition: box-shadow .18s ease, border-color .18s ease, padding .18s ease;
}
.sb-cats { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 340px; }
/* Fades the rail out where it scrolls, so more categories are obviously off-screen. */
.sb-rail { position: relative; min-width: 0; flex: 1 1 auto; }
.sb-pills { display: flex; align-items: center; gap: 6px; min-width: 0; overflow-x: auto; padding: 3px 22px 3px 2px; scrollbar-width: none; scroll-behavior: smooth; }
.sb-pills::-webkit-scrollbar { display: none; }
.sb-fade { position: absolute; top: 0; right: 0; bottom: 0; width: 34px; border-radius: 0 999px 999px 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0), var(--card) 72%); opacity: 0; transition: opacity .2s; }
.sb-rail.more .sb-fade { opacity: 1; }
/* The MMTC rail leads with the search field, so it lays out as a row: the box keeps its
   own width and the metal pills sit tight beside it. Neither one grows, and the whole rail
   stays under the width the bar's own tools leave it, so the count, the In stock switch,
   the sort and the PMJ link still share the first line. Scoped by class so the shop page's
   pills keep their existing single-child layout. */
.sb-rail.with-search { display: flex; align-items: center; gap: 6px; flex: 0 1 auto; }
.sb-rail.with-search .sb-pills { flex: 0 1 auto; padding-right: 10px; }
.sb-search {
  display: flex; align-items: center; gap: 7px; flex: 0 1 190px; min-width: 110px; cursor: text;
  border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: 0 12px;
  color: var(--muted); transition: border-color .15s, background .15s;
}
.sb-search:hover { border-color: var(--gold); }
.sb-search:focus-within { border-color: var(--gold-2); background: var(--card); color: var(--gold-deep); }
.sb-search svg { flex: 0 0 auto; }
.sb-search input {
  flex: 1 1 auto; min-width: 0; border: 0; background: transparent; padding: 8px 0;
  font: inherit; font-size: .84rem; font-weight: 600; color: var(--ink); outline: none;
}
.sb-search input::placeholder { color: var(--muted); font-weight: 500; }
.sb-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.sb-count { margin: 0; font-size: .82rem; font-weight: 700; color: var(--muted-dark); white-space: nowrap; }
.sb-count b { color: var(--gold-deep); font-variant-numeric: tabular-nums; }
.sb-tools { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
#filterToggle.is-open { border-color: var(--gold-2); background: var(--gold-soft); }
.ft-caret { font-size: .64rem; color: var(--muted); transition: transform .18s; }
#filterToggle.is-open .ft-caret { transform: rotate(180deg); }

/* Pills read as one segmented control inside the card, not as loose buttons. */
.cat-pill {
  white-space: nowrap; flex: 0 0 auto; border: 1px solid transparent; background: transparent;
  box-shadow: none; padding: 7px 13px; font-size: .84rem;
}
.cat-pill:hover { border-color: var(--gold-2); background: var(--gold-tint); }
.cat-pill.on { background: linear-gradient(135deg, var(--gold-3), var(--gold)); border-color: var(--gold-2); box-shadow: 0 3px 10px rgba(168,132,47,.24); }
.cat-pill .fp-n { background: rgba(168,132,47,.12); }
.cat-pill.on .fp-n { background: rgba(255,255,255,.55); }

/* Quick controls that live in the bar itself. */
.sb-switch {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; cursor: pointer;
  border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: 6px 12px 6px 9px;
  font-size: .8rem; font-weight: 700; color: var(--ink-2); transition: .15s; white-space: nowrap;
}
.sb-switch:hover { border-color: var(--gold); }
.sb-switch input { width: 15px; height: 15px; margin: 0; accent-color: var(--gold-2); }
.sb-switch.on { border-color: var(--gold-2); background: var(--gold-tint); color: var(--gold-deep); }
.sb-sort { display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); flex: 0 0 auto; }
.sb-sort select { min-width: 0; border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: 6px 11px; font: inherit; font-size: .82rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); }
.sb-sort select:hover { border-color: var(--gold); }
.fb-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px;
  padding: 0 6px; border-radius: 999px; background: var(--gold-2); color: #fff; font-size: .72rem; font-weight: 800;
}

/* ---------- Categories mega-menu: one row of categories above a metal plate ---------- */
.cat-menu { position: relative; flex: 0 0 auto; }
.cm-trigger {
  display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--paper);
  border-radius: 999px; padding: 7px 13px; font: inherit; font-size: .84rem; font-weight: 800; color: var(--ink);
  cursor: pointer; transition: .15s; white-space: nowrap;
}
.cm-trigger:hover, .cat-menu:focus-within .cm-trigger, .cat-menu.open .cm-trigger {
  border-color: var(--gold-2); background: linear-gradient(135deg, var(--gold-3), var(--gold)); color: var(--ink);
  box-shadow: 0 3px 10px rgba(168,132,47,.24);
}
.cm-caret { font-size: .64rem; opacity: .75; transition: transform .18s; }
.cat-menu:hover .cm-caret, .cat-menu.open .cm-caret { transform: rotate(180deg); }
.cat-drop {
  position: absolute; top: calc(100% + 14px); left: 0; z-index: 70;
  width: min(660px, 92vw); padding: 16px 18px 12px;
  background: var(--card); border: 1px solid var(--gold-2); border-radius: var(--radius);
  box-shadow: 0 26px 58px rgba(120,96,40,.26);
  opacity: 0; visibility: hidden; transform: translateY(-10px) scale(.99);
  transition: opacity .16s, transform .16s, visibility .16s;
}
/* Bridges the 14px gap so the menu survives the mouse travel from trigger to panel. */
.cat-drop::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.cat-menu:hover .cat-drop, .cat-menu.open .cat-drop { opacity: 1; visibility: visible; transform: none; }

/* Categories run across in one wrapping row. `.hot` marks the slot whose metal set is showing,
   so the plate and its category stay visibly tied together for keyboard and touch too. */
.cd-cats { display: flex; flex-wrap: wrap; gap: 7px; }
.cd-slot { position: relative; }
.fp-chip.cd-cat { white-space: nowrap; padding: 7px 12px; font-weight: 700; }
.fp-chip.cd-cat:hover, .cd-slot.hot .fp-chip.cd-cat {
  border-color: var(--gold-2); background: var(--gold-tint); color: var(--gold-deep);
}
.fp-chip.cd-cat.on { color: var(--ink); }
.cd-cat .fp-n { margin: 0; }

/* The plate is the menu's second level: both metals for whichever category the pointer is on,
   each carrying its own live count. Plum, so it reads as a deeper tier than the cream card it
   sits inside rather than another row of the same list. */
.cd-plate { position: relative; overflow: hidden; margin-top: 13px; padding: 11px 11px 12px;
  border: 1px solid rgba(233,213,160,.34); border-radius: var(--radius-lg);
  background: var(--royal-band); box-shadow: 0 14px 30px rgba(74,21,44,.2); color: #f6e9d6;
}
.cd-plate::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--gold-hair); }
.cd-plate-cap { display: block; padding: 0 2px 8px; font-size: .62rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(233,213,160,.85); }
.cd-set { display: none; }
.cd-set.on { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fp-chip.cd-opt { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 9px;
  align-items: center; width: 100%; min-width: 0; border-radius: 12px; padding: 8px 11px; text-align: left;
  background: rgba(255,255,255,.06); border-color: rgba(233,213,160,.24); color: #f6e9d6; font-weight: 600;
}
.fp-chip.cd-opt:hover { border-color: rgba(233,213,160,.6); background: rgba(255,255,255,.12); color: #fff8ea; }
.fp-chip.cd-opt.on { border-color: transparent; background: linear-gradient(135deg, #f3d99b, var(--gold));
  color: #4a152c; box-shadow: 0 4px 12px rgba(0,0,0,.22); }
.cd-opt .cd-name { grid-column: 2; font-size: .86rem; font-weight: 800; color: inherit; }
.cd-opt .fp-n { grid-column: 3; grid-row: 1; margin: 0; background: rgba(233,213,160,.2); color: #f3d99b; }
.fp-chip.cd-opt.on .fp-n { background: rgba(74,21,44,.14); color: #4a152c; }
@media (prefers-reduced-motion: no-preference) {
  .cd-set.on, .cd-wset.on { animation: cd-swap .2s var(--ease-out); }
}
@keyframes cd-swap { from { opacity: .3; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* The plate's third tier: the grams that category actually sells. They sit under the metals as
   compact pills, so a weight reads as a shortcut into the same grid rather than a bigger decision
   than Gold or Silver. Each set swaps with its category, exactly like the metal rows. */
.cd-wset { display: none; }
.cd-wset.on { display: block; }
.cd-plate-sub { margin-top: 11px; padding-top: 10px; border-top: 1px solid rgba(233,213,160,.16); }
.cd-wopts { display: flex; flex-wrap: wrap; gap: 6px; }
.fp-chip.cd-w { padding: 5px 11px; border-radius: 999px; font-size: .78rem; font-weight: 700;
  gap: 6px; background: rgba(255,255,255,.05); border-color: rgba(233,213,160,.22); color: #f6e9d6; }
.fp-chip.cd-w:hover { border-color: rgba(233,213,160,.6); background: rgba(255,255,255,.12); color: #fff8ea; }
.fp-chip.cd-w.on { border-color: transparent; background: linear-gradient(135deg, #f3d99b, var(--gold));
  color: #4a152c; box-shadow: 0 4px 12px rgba(0,0,0,.22); }
.cd-w .fp-n { margin: 0; background: rgba(233,213,160,.18); color: #f3d99b; font-size: .68rem; }
.fp-chip.cd-w.on .fp-n { background: rgba(74,21,44,.14); color: #4a152c; }
.fp-chip.cd-w:disabled { opacity: .34; }
.fp-chip.cd-w:disabled:hover { border-color: rgba(233,213,160,.22); background: rgba(255,255,255,.05); color: #f6e9d6; }

/* Shared item-row parts: the metal swatch and the name it belongs to. The rupee rate used to
   ride under each name here — it lives in the page's one rates plate instead. */
.cd-name { grid-column: 2; }
.cd-dot { grid-column: 1; grid-row: 1; align-self: center; width: 11px; height: 11px; border-radius: 999px; flex: none; box-shadow: 0 0 0 2px rgba(255,255,255,.7) inset; }
.cd-dot-gold { background: linear-gradient(135deg, #f7e3ab, var(--gold)); }
.cd-dot-silver { background: linear-gradient(135deg, #f6f8fa, #a9b3bd); border: 1px solid var(--line); }
@media (max-width: 620px) {
  .sb-tools { width: 100%; justify-content: flex-end; }
  /* Sort stays reachable on phones — only its caption gives way, never the control. */
  .sb-sort .ss-cap { display: none; }
  .sb-sort select { padding: 6px 9px; font-size: .78rem; }
}

.filter-panel {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
  box-shadow: 0 16px 38px rgba(120,96,40,.16); padding: 16px 20px 14px; margin-bottom: 14px;
  max-height: min(60vh, 520px); overflow-y: auto;
}
.filter-panel:not(.hidden) { animation: fp-in .18s ease-out; }
@keyframes fp-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.fp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 10px; }
.fp-head .kicker { margin: 0; }
.fp-close {
  border: 1px solid var(--line); background: var(--paper); width: 28px; height: 28px; border-radius: 999px;
  font-size: .82rem; line-height: 1; color: var(--muted-dark); cursor: pointer; transition: .15s;
}
.fp-close:hover { border-color: var(--gold-2); background: var(--gold-soft); color: var(--ink); }
.fp-row { display: grid; grid-template-columns: 92px 1fr; gap: 10px 14px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line); }
.fp-cap { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-top: 8px; }
.fp-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.fp-chip {
  display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: var(--paper);
  border-radius: 999px; padding: 7px 13px; font-size: .84rem; font-weight: 600; color: var(--ink); cursor: pointer; transition: .15s;
}
.fp-chip:hover { border-color: var(--gold); background: var(--gold-tint); }
.fp-chip.on { border-color: var(--gold-2); background: linear-gradient(135deg, var(--gold-3), var(--gold)); box-shadow: 0 3px 10px rgba(168,132,47,.22); }
.fp-chip:disabled { opacity: .38; cursor: default; box-shadow: none; }
.fp-chip:disabled:hover { border-color: var(--line); background: var(--paper); }
.fp-n { font-size: .72rem; font-weight: 700; color: var(--muted-dark); background: rgba(255,255,255,.62); border-radius: 999px; padding: 1px 6px; }
.fp-chip.on .fp-n { color: var(--ink); background: rgba(255,255,255,.5); }
.fp-two { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.fp-switch { display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.fp-switch input { width: 17px; height: 17px; accent-color: var(--gold-2); }
.fp-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px; }
.fp-active { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-bottom: 12px; }
.cross-shelf { margin: 0; }
.ac-chip {
  display: inline-flex; align-items: center; gap: 6px; border: 1px dashed var(--gold-2); background: var(--gold-tint);
  color: var(--gold-deep); border-radius: 999px; padding: 5px 11px; font-size: .8rem; font-weight: 600; cursor: pointer;
}
.ac-chip:hover { border-style: solid; background: var(--gold-soft); color: var(--ink); }
.shop-sort { display: inline-flex; align-items: center; gap: 10px; font-size: .85rem; font-weight: 600; color: var(--muted); flex: 0 0 auto; }
.shop-sort select { min-width: 150px; }
@media (max-width: 620px) {
  .fp-row { grid-template-columns: 1fr; gap: 6px; }
  .fp-cap { padding-top: 0; }
  .filter-panel { padding: 14px; }
}
@supports not (aspect-ratio: 1 / 1) {
  .pc-media { height: 0; padding-top: 100%; }
  .pc-media img { position: absolute; inset: 0; }
}

/* ---------- Category bands: one big banner, then that category's coins ---------- */
.shop-cat { margin-bottom: 44px; scroll-margin-top: calc(var(--header-h) + 10px); }
.shop-cat:last-child { margin-bottom: 0; }
.shop-cat > .grid { margin-top: 20px; }
.cat-band {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end;
  min-height: clamp(268px, 42vw, 500px); border-radius: var(--radius); border: 1px solid var(--gold-3);
  box-shadow: var(--shadow-lg); background: var(--royal-band);
}
/* Engraved sheen — the plate a band shows when the admin has not filed a banner yet. */
.cat-band::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 92% at 86% 6%, rgba(233, 213, 160, .40), transparent 60%),
    repeating-linear-gradient(112deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 10px);
}
.cat-band.has-art { background: var(--paper-3); }
/* Slides slide horizontally through the box: parked right, current, then parked left. */
.cat-slide {
  position: absolute; inset: 0; z-index: 1; opacity: 0; transform: translate3d(102%, 0, 0);
  transition: transform .7s cubic-bezier(.22, .61, .36, 1), opacity .45s ease;
}
.cat-slide.left { transform: translate3d(-102%, 0, 0); }
.cat-slide.on { opacity: 1; transform: none; z-index: 2; }
.cat-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-slide.bad { display: none; }
/* Scrim only where the words sit, so the photograph stays the star of the band. */
.cat-band-veil {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(22, 13, 7, .80) 0%, rgba(22, 13, 7, .38) 40%, rgba(22, 13, 7, .02) 68%, transparent 82%),
    linear-gradient(0deg, rgba(22, 13, 7, .58) 0%, transparent 44%);
}
.cat-band:not(.has-art) .cat-band-veil { background: linear-gradient(96deg, rgba(16, 8, 12, .46), rgba(16, 8, 12, .05) 70%, transparent); }
.cat-band-copy { position: relative; z-index: 4; padding: 30px 34px; max-width: min(640px, 92%); }
.cat-band-kicker {
  display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-3); margin-bottom: 9px; text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
}
.cat-band-name {
  font-family: var(--font-display); font-size: clamp(2rem, 5.2vw, 3.6rem); line-height: 1.04; color: #fff8ea;
  margin: 0 0 10px; text-shadow: 0 2px 20px rgba(0, 0, 0, .55);
}
.cat-band-desc {
  color: rgba(255, 246, 230, .92); font-size: clamp(.92rem, 1.4vw, 1.08rem); line-height: 1.55; margin: 0 0 15px;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .5);
}
.cat-band-count {
  display: inline-block; border-radius: 999px; padding: 6px 14px; background: rgba(255, 255, 255, .9);
  color: var(--ink); font-size: .78rem; font-weight: 700; letter-spacing: .04em;
}
.cat-dots { position: absolute; z-index: 5; right: 26px; bottom: 24px; display: flex; gap: 9px; }
.cat-dot {
  width: 11px; height: 11px; padding: 0; border-radius: 999px; cursor: pointer; transition: .2s;
  border: 1px solid rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .32); box-shadow: 0 1px 8px rgba(0, 0, 0, .4);
}
.cat-dot:hover { background: rgba(255, 255, 255, .75); }
.cat-dot.on { width: 28px; background: var(--gold-3); border-color: var(--gold-3); }

/* Promo tile the admin files per category — same footprint as a product card. */
.pc-promo {
  position: relative; display: flex; flex-direction: column; overflow: hidden; cursor: pointer;
  background: var(--card); border: 1px solid var(--gold-3); border-radius: var(--radius);
  box-shadow: var(--shadow); transition: transform .16s, box-shadow .2s, border-color .2s;
}
.pc-promo:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--gold); }
.pcm-media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--paper-2); }
.pcm-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; }
.pc-promo:hover .pcm-media img { transform: scale(1.045); }
.pcm-cap {
  padding: 16px 17px 18px; display: flex; flex-direction: column; gap: 4px; flex: 1; justify-content: space-between;
  font-family: var(--font-display); font-size: 1.05rem; color: var(--ink);
}
.pcm-go { font-family: var(--font-body); font-style: normal; font-size: .8rem; font-weight: 700; color: var(--gold-deep); letter-spacing: .04em; }

@media (max-width: 620px) {
  .cat-band { min-height: clamp(212px, 62vw, 280px); }
  .cat-band-copy { padding: 18px 18px 22px; max-width: 100%; }
  .cat-band-name { margin-bottom: 7px; }
  .cat-band-desc { display: none; }
  .cat-dots { right: 14px; bottom: 14px; }
  .cat-dot { width: 9px; height: 9px; }
  .cat-dot.on { width: 22px; }
  .shop-cat { margin-bottom: 34px; }
}

/* ---------- Product detail ---------- */
.pd-layout { display: grid; grid-template-columns: 1fr 1.1fr; gap: 38px; align-items: start; }
@media (max-width: 900px) { .pd-layout { grid-template-columns: 1fr; } }
.pd-gallery .pd-main { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--paper-2); position: relative; }
.pd-gallery .pd-main img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.pd-gallery .pd-main video { width: 100%; aspect-ratio: 1/1; object-fit: contain; background: #14120f; display: block; }
.pd-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.pd-thumbs img, .pd-thumbs video { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--line); cursor: pointer; }
.pd-thumbs img:hover, .pd-thumbs img.on { border-color: var(--gold); }
.pd-thumb { padding: 0; background: none; border: 0; position: relative; line-height: 0; border-radius: var(--radius-sm); }
.pd-thumb:hover, .pd-thumb.on { outline: 2px solid var(--gold); outline-offset: 1px; }
.pd-thumb-video .pd-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 1.35rem; text-shadow: 0 1px 8px rgba(0,0,0,.75); pointer-events: none; }
.pd-price-big { font-family: var(--font-display); font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.pd-meta { font-size: .85rem; color: var(--muted); margin: 4px 0 18px; }
.pd-meta .was { text-decoration: line-through; }
.pd-meta .save { color: var(--green); font-weight: 700; }
.pd-buy { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.pd-buy .btn { min-width: 150px; }
.breakup-table { width: 100%; border-collapse: collapse; font-size: .88rem; font-variant-numeric: tabular-nums; }
.breakup-table td { padding: 8px 4px; border-bottom: 1px dashed var(--line); }
.breakup-table td:last-child { text-align: right; font-weight: 600; }
.breakup-table tr.pd-total td { border-bottom: 0; font-weight: 700; font-size: 1rem; padding-top: 12px; }
.reviews-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; align-items: start; }
@media (max-width: 900px) { .reviews-grid { grid-template-columns: 1fr; } }
.review-item { border-bottom: 1px solid var(--line); padding: 16px 0; }
.review-item:last-child { border-bottom: 0; }
.review-item .rv-head { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.review-item .rv-name { font-weight: 600; }
.review-item .rv-date { font-size: .76rem; color: var(--muted); }
.review-item p { margin: 8px 0 0; }
.stars { color: var(--gold-2); letter-spacing: 2px; font-size: .9rem; }
.stars-pick { display: inline-flex; gap: 4px; }
.stars-pick button { border: 0; background: none; font-size: 1.4rem; color: var(--line-dark); cursor: pointer; }
.stars-pick button.on, .stars-pick button:hover { color: var(--gold-2); }
.rating-summary { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.rating-summary .big-avg { font-family: var(--font-display); font-size: 2.6rem; font-weight: 700; color: var(--gold-deep); }
.breadcrumbs { font-size: .82rem; color: var(--muted); margin-bottom: 18px; }
.breadcrumbs a:hover { color: var(--gold-deep); }
.offer-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px) { .offer-strip { grid-template-columns: 1fr; } }
.offer-card {
  border: 1px dashed var(--gold-2); background: var(--gold-tint); border-radius: var(--radius);
  padding: 14px 18px; display: flex; flex-direction: column; gap: 3px;
}
.offer-card b { font-family: var(--font-display); letter-spacing: .06em; color: var(--gold-deep); font-size: 1.05rem; }
.offer-card span { font-size: .84rem; color: var(--muted); }
.sell-banner {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 34px; align-items: center;
  background: linear-gradient(150deg, var(--gold-tint), var(--paper-2));
  color: var(--ink); border: 1px solid var(--gold-3); border-radius: var(--radius); padding: 40px; overflow: hidden;
}
.sell-banner h2 { color: var(--ink); }
.sell-banner p { color: var(--muted-dark); }
.sell-banner .kicker { color: var(--gold-deep); }
.sell-banner img { border-radius: var(--radius-sm); width: 100%; object-fit: cover; box-shadow: var(--shadow); }
@media (max-width: 900px) { .sell-banner { grid-template-columns: 1fr; padding: 26px; } }

/* ---------- Home: sibling CTAs for the buy-back banner ---------- */
.cta-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 22px; }
.cta-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px; box-shadow: var(--shadow);
}
.cta-card .cta-ic {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--gold), var(--gold-2)); color: #fff;
  font-size: 1.2rem; margin-bottom: 4px;
}
.cta-card .kicker { color: var(--gold-deep); }
.cta-card h3 { margin: 0; font-size: clamp(1.15rem, 2.2vw, 1.4rem); }
.cta-card p { margin: 0 0 12px; font-size: .92rem; color: var(--muted); }
@media (max-width: 760px) { .cta-grid { grid-template-columns: 1fr; gap: 16px; } }

/* ---------- Section headers ---------- */
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 30px; flex-wrap: wrap; }
.sec-head p { margin: 4px 0 0; color: var(--muted); max-width: 60ch; }

/* ---------- Panels / forms ---------- */
.panel {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow);
}
.panel-dark { background: linear-gradient(150deg, var(--gold-tint), var(--paper-2)); color: var(--ink); border-color: var(--gold-3); }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: 6px; }
.field .hint { font-size: .76rem; color: var(--muted); margin-top: 5px; }
.input, select.input, textarea.input {
  width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 14px; font: inherit; background: #fff; color: var(--ink); transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none; appearance: none;
}
textarea.input { min-height: 110px; resize: vertical; }
.input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.input.err { border-color: var(--red); }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 620px) { .row-2 { grid-template-columns: 1fr; } }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; }
.err-text { color: var(--red); font-size: .82rem; margin-top: 6px; }
.ok-text { color: var(--green); font-size: .82rem; margin-top: 6px; }

/* ---------- Cart / checkout ---------- */
.cart-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 28px; align-items: start; }
@media (max-width: 940px) { .cart-layout { grid-template-columns: 1fr; } }
.cart-line {
  display: grid; grid-template-columns: 84px 1fr auto; gap: 16px; align-items: center;
  padding: 16px 0; border-bottom: 1px solid var(--line);
}
.cart-line:last-child { border-bottom: 0; }
.cart-line.is-out { opacity: .68; }
.cart-line img { width: 84px; height: 84px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.cl-name { font-weight: 600; font-family: var(--font-display); font-size: 1rem; }
.cl-sub { font-size: .8rem; color: var(--muted); }
.qty-box { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--card); }
.qty-box button { width: 34px; height: 34px; border: 0; background: transparent; font-size: 1.05rem; cursor: pointer; color: var(--ink); }
.qty-box button:hover { background: var(--gold-soft); }
.qty-box input { width: 44px; text-align: center; border: 0; font: inherit; font-weight: 600; background: transparent; color: var(--ink); }
.cl-right { text-align: right; }
.cl-remove { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: .8rem; text-decoration: underline; margin-top: 6px; }
.cl-remove + .cl-remove { margin-left: 12px; }
.cl-remove:hover { color: var(--red); }

.summary-row { display: flex; justify-content: space-between; padding: 7px 0; font-size: .93rem; gap: 12px; font-variant-numeric: tabular-nums; }
.summary-row.total { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 14px; font-size: 1.12rem; font-weight: 700; }
.summary-row .save { color: var(--green); font-weight: 600; }
.summary-row .free { color: var(--green); font-weight: 600; }

.pay-option {
  display: flex; gap: 13px; align-items: flex-start; border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 15px 16px; margin-bottom: 12px; cursor: pointer; transition: .15s;
  background: var(--card);
}
.pay-option:hover { border-color: var(--gold); background: var(--gold-tint); }
.pay-option.sel { border-color: var(--gold-2); background: var(--gold-soft); box-shadow: 0 0 0 1px var(--gold-2) inset; }
.pay-option input { margin-top: 4px; accent-color: var(--gold-2); flex: 0 0 auto; }
.pay-option b { display: block; }
.pay-option small { color: var(--muted); display: block; }
.pay-option .perks { margin-left: auto; text-align: right; font-size: .76rem; color: var(--green); font-weight: 700; }
.pay-bank {
  margin: -4px 0 14px; padding: 14px 16px; border: 1px dashed var(--gold-2); border-radius: var(--radius-sm);
  background: var(--gold-tint); font-size: .85rem;
}
.pay-bank dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; }
.pay-bank dt { color: var(--muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; }
.pay-bank dd { margin: 0; font-weight: 600; word-break: break-word; }
.bank-grid { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: start; }
.pay-qr { margin: 0; width: 148px; text-align: center; }
.pay-qr img { width: 148px; height: 148px; object-fit: contain; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; padding: 6px; }
.pay-qr figcaption { display: block; margin-top: 6px; font-size: .72rem; color: var(--muted); letter-spacing: .04em; }
.bank-offer {
  margin: 12px 0 0; padding: 10px 14px; border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--gold-tint), #fff); border: 1px solid var(--gold-3);
  font-size: .84rem; color: var(--ink);
}
.bank-offer b { color: var(--gold-deep); }

/* Round BD — when a gateway answers that one payment cannot carry this amount, the bag is not
   lost and the customer did nothing wrong, so this is not dressed as an error: it is the house
   royal plate offering the rails that have no such ceiling. */
.pay-switch {
  margin: 2px 0 14px; padding: 14px 16px; border-radius: var(--radius);
  border: 1px solid rgba(74, 21, 44, .16);
  background: radial-gradient(130% 140% at 100% 0%, rgba(233, 205, 134, .22), transparent 56%), var(--royal-tint);
  box-shadow: var(--elev-1);
}
.ps-head { display: flex; align-items: flex-start; gap: 11px; }
.ps-gem {
  flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px;
  background: var(--royal-band); color: var(--gold-3); font-size: .74rem;
  box-shadow: 0 4px 12px rgba(74, 21, 44, .18);
}
.ps-words { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ps-line { color: var(--royal-deep); font-size: .92rem; line-height: 1.42; }
.ps-cap { font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--royal); }
.ps-close {
  flex: 0 0 auto; margin-left: auto; width: 30px; height: 30px; border: 1px solid rgba(74, 21, 44, .14);
  border-radius: 9px; background: rgba(255, 255, 255, .72); color: var(--royal);
  font-size: 1.05rem; line-height: 1; cursor: pointer; transition: background .18s, border-color .18s;
}
.ps-close:hover { background: #fff; border-color: var(--royal); }
.ps-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ps-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 15px;
  border: 1px solid rgba(74, 21, 44, .17); border-radius: 999px; background: #fffdf9;
  color: var(--royal-deep); font-weight: 700; font-size: .86rem; cursor: pointer;
  transition: background .18s, color .18s, border-color .18s, transform .18s var(--ease-out), box-shadow .18s;
}
.ps-chip .psc-gem { color: var(--gold-2); font-size: .6rem; flex: 0 0 auto; }
.ps-chip:hover {
  transform: translateY(-1px); border-color: var(--royal); color: #fdf6e6;
  background: var(--royal-face); box-shadow: 0 6px 16px rgba(74, 21, 44, .2);
}
.ps-chip:hover .psc-gem { color: var(--gold-3); }
/* The rail that just refused the amount is not offered back to them. */
.ps-chip.is-off { display: none; }
.ps-help { margin: 11px 0 0; font-size: .78rem; color: var(--muted); }
.ps-help a { color: var(--royal); font-weight: 700; }
/* One tap on a chip lands the shopper back on the row they chose, answered with a gold edge. */
.pay-option.ps-landed { animation: ps-land 1.7s var(--ease-out); }
@keyframes ps-land {
  0%, 100% { box-shadow: var(--elev-1); }
  24% { box-shadow: 0 0 0 2px var(--gold-2), var(--elev-2); }
}
@media (max-width: 520px) {
  .ps-chip { width: 100%; justify-content: flex-start; }
}
@media (pointer: coarse) {
  .ps-close, .ps-chip { min-height: 44px; }
  .ps-close { width: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .pay-option.ps-landed { animation: none; }
  .ps-chip, .ps-close { transition: none; }
}
@media (max-width: 640px) {
  .bank-grid { grid-template-columns: 1fr; }
  .pay-qr, .pay-qr img { width: 132px; }
}

.coupon-box { display: flex; gap: 9px; }
.coupon-box .input { text-transform: uppercase; }
.coupon-applied { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: rgba(31,143,78,.1); border: 1px dashed var(--green); padding: 10px 14px; border-radius: var(--radius-sm); font-size: .88rem; }
.coupon-applied button { background: none; border: 0; color: var(--red); cursor: pointer; font-size: .82rem; text-decoration: underline; }

.steps { display: flex; gap: 8px; align-items: center; justify-content: center; margin-bottom: 26px; font-size: .82rem; color: var(--muted); flex-wrap: wrap; }
.steps .st { display: flex; gap: 8px; align-items: center; }
.steps .st b { width: 26px; height: 26px; border-radius: 50%; background: var(--paper-2); display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; color: var(--ink); }
.steps .st.on { color: var(--ink); font-weight: 600; }
.steps .st.on b { background: linear-gradient(135deg, var(--gold-3), var(--gold)); color: var(--ink); }
.steps .sep { width: 34px; height: 1px; background: var(--line-dark); }

.otp-row { display: flex; gap: 8px; }
.otp-row input {
  width: 46px; height: 52px; text-align: center; font-size: 1.3rem; font-weight: 700;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; color: var(--ink);
}
.otp-row input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }

/* ---------- Success / track ---------- */
.success-card { max-width: 720px; margin: 48px auto; text-align: center; }
.success-icon {
  width: 74px; height: 74px; margin: 0 auto 18px; border-radius: 50%;
  background: var(--green); color: #fff; font-size: 2rem; display: flex; align-items: center; justify-content: center;
}
.order-id-chip {
  display: inline-block; background: var(--paper-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 20px; font-weight: 700; letter-spacing: .05em; margin: 8px 0 18px; word-break: break-all;
}

/* ---------- Order timeline ---------- */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 13px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.timeline li { position: relative; padding: 0 0 18px 40px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline .dot {
  position: absolute; left: 4px; top: 2px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--card); border: 2px solid var(--line-dark); display: flex; align-items: center;
  justify-content: center; font-size: .68rem; color: var(--muted);
}
.timeline li.done .dot { background: linear-gradient(135deg, var(--gold-3), var(--gold)); border-color: var(--gold-2); color: var(--ink); }
.timeline li.now .dot { border-color: var(--gold-2); background: var(--card); color: var(--gold-deep); box-shadow: 0 0 0 4px var(--gold-soft); }
.timeline .tl-title { font-weight: 600; font-size: .92rem; }
.timeline .tl-when { font-size: .76rem; color: var(--muted); }
.timeline .tl-note { font-size: .84rem; color: var(--muted-dark); margin-top: 3px; }
.track-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; font-weight: 600; font-size: .88rem; color: var(--gold-deep); border-bottom: 1px solid var(--gold-3); }
.track-link:hover { color: var(--ink); }
.order-flow { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); padding: 14px 16px 16px; margin: 12px 0 18px; }
.order-flow > summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; }
.order-flow > summary::-webkit-details-marker { display: none; }
.order-flow > summary::after { content: "▾"; margin-left: auto; color: var(--muted); font-size: .8rem; transition: transform .18s ease; }
.order-flow:not([open]) > summary::after { transform: rotate(-90deg); }
.order-flow .timeline { margin-top: 12px; }
.order-flow .kicker { margin-bottom: 0; }
.of-stage { font-size: .8rem; font-weight: 600; color: var(--gold-deep); background: var(--gold-soft); border-radius: 999px; padding: 3px 10px; }
.timeline li.todo .tl-title { color: var(--muted); font-weight: 500; }
.timeline li.cancelled .dot { background: var(--red); border-color: var(--red); color: #fff; }
@media (max-width: 560px) { .timeline li { padding-left: 34px; } .timeline::before { left: 11px; } .timeline .dot { left: 2px; width: 20px; height: 20px; } }

/* ---------- Content pages ----------
   The header band itself is styled with the other page headers further down. */
.prose { max-width: 760px; margin: 0 auto; }
.prose h2 { margin-top: 1.6em; }
.prose h3 { margin-top: 1.4em; }
.prose blockquote { border-left: 3px solid var(--gold); margin: 1.2em 0; padding: 6px 18px; font-family: var(--font-display); font-size: 1.05rem; color: var(--ink-2); background: var(--gold-tint); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.prose img { border: 1px solid var(--line); border-radius: var(--radius-sm); }
.contact-line { display: flex; gap: 12px; flex-direction: column; padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: .92rem; }
.contact-line:last-of-type { border-bottom: 0; }
.contact-line b { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.st-v { display: flex; flex-direction: column; gap: 14px; }
.steps-v > div { display: flex; gap: 12px; align-items: flex-start; }
.steps-v > div > b { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: var(--gold-soft); color: var(--gold-deep); display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; }
.steps-v span { font-size: .82rem; }
.prose table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: .9rem; }
.prose th, .prose td { border: 1px solid var(--line); padding: 9px 12px; text-align: left; }
.prose th { background: var(--paper-2); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.faq details { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 18px; margin-bottom: 10px; background: var(--card); }
.faq summary { font-weight: 600; cursor: pointer; }

/* ---------- Reviews ---------- */
.review { border-bottom: 1px solid var(--line); padding: 14px 0; }
.review:last-child { border-bottom: 0; }
.review .r-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: .85rem; }
.review .r-stars { color: var(--gold-2); letter-spacing: 2px; }
.review p { margin: 6px 0 0; font-size: .92rem; }

/* ---------- Sign-in (matches the live EMI login card) ---------- */
.login-stage {
  display: flex; align-items: center; min-height: calc(100vh - var(--header-h) - 30px);
  padding: clamp(30px, 6vw, 72px) 0;
  background:
    radial-gradient(1000px 380px at 50% -10%, var(--gold-soft), rgba(255, 255, 255, 0) 70%),
    linear-gradient(170deg, var(--gold-tint), var(--paper-2) 62%, var(--paper));
}
.login-card {
  width: 100%; max-width: 462px; margin: 0 auto; position: relative;
  background: var(--card); border: 1px solid var(--gold-3); border-radius: 20px;
  padding: clamp(22px, 5vw, 36px); box-shadow: var(--shadow-lg);
}
.login-card .kicker { display: block; text-align: center; color: var(--gold-deep); }
.login-card h1 { font-size: clamp(1.7rem, 5.5vw, 2.15rem); text-align: center; margin: 8px 0 6px; }
/* The brand plaque, same treatment as the header mark: the logo PNG is gold on an
   opaque black ground, so it needs a dark plate and a hairline gold edge to sit on a
   light card. Width comes from the image — the tile is only as wide as the lockup. */
.login-ic {
  display: block; width: max-content; margin: 0 auto 14px; padding: 5px;
  border: 2px solid rgba(212, 175, 55, .45); border-radius: 16px;
  background: linear-gradient(145deg, #1a1a1a, #0a0a0a);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(212, 175, 55, .15);
}
.login-ic img { display: block; height: 38px; width: auto; border-radius: 10px; }
.login-sub { text-align: center; color: var(--muted); font-size: .92rem; margin: 0 0 20px; }
.login-tabs { justify-content: center; margin-bottom: 22px; }
.login-help { text-align: center; font-size: .82rem; color: var(--muted); margin: 14px 0 0; }
.login-help a { color: var(--gold-deep); text-decoration: underline; }
.login-status { text-align: center; font-size: .85rem; margin: 12px 0 0; min-height: 1.2em; }
.login-foot {
  text-align: center; font-size: .74rem; color: var(--muted);
  border-top: 1px solid var(--line); margin: 24px 0 0; padding-top: 14px;
}
.field-hint { display: block; font-size: .74rem; color: var(--muted); margin-top: 5px; }

/* ---------- Account dashboard ---------- */
.ac-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.ac-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); padding: 18px 20px; margin-bottom: 16px; }
.ac-card .ac-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.ac-card .ac-grid { display: flex; gap: 22px; flex-wrap: wrap; font-size: .86rem; margin-top: 10px; }
.ac-card .ac-grid b { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.ac-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.proof-list { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.proof-item { position: relative; width: 108px; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--paper-2); }
.proof-item img { width: 100%; height: 84px; object-fit: cover; }
.proof-item .pdf-doc { height: 84px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; }
.proof-item a { display: block; font-size: .68rem; padding: 5px 7px; color: var(--gold-deep); text-align: center; border-top: 1px solid var(--line); word-break: break-all; }
.utr-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--gold-tint); border: 1px dashed var(--gold-2); border-radius: var(--radius-sm); padding: 7px 13px; font-size: .84rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- Bank transfer verification (My account) ---------- */
.pay-verify { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper-2); padding: 14px 16px; margin: 2px 0 16px; }
.pay-verify .pv-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.pay-verify .pv-utr { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.pay-verify .pv-note { font-size: .84rem; margin: 0 0 10px; color: var(--muted-dark); border-left: 3px solid var(--gold-2); padding-left: 10px; }
.pv-forms { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
.pv-form { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; background: var(--card); }
.pv-form .btn { align-self: flex-start; }
.proof-item .pv-del { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(19, 16, 12, .68); color: #fff; font-size: .72rem; line-height: 1; cursor: pointer; }
.proof-item .pv-del:hover { background: var(--red); }
@media (max-width: 720px) { .pv-forms { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.site-footer { background: linear-gradient(170deg, var(--gold-tint), var(--paper-2)); color: var(--muted-dark); margin-top: 70px; border-top: 1px solid var(--line); }
/* padding-block, never the inline shorthand: .footer-grid also carries .wrap, and a
   `padding: 56px 0 40px` here used to steal the page gutter from the footer, leaving
   its text 20px left of the header logo and the content below it. */
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 34px; padding-block: 56px 40px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4 { color: var(--ink); font-family: var(--font-body); font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 16px; }
.site-footer a { display: block; padding: 4px 0; font-size: .9rem; }
.site-footer a:hover { color: var(--gold-deep); }
/* Footer links are all block-level; the brand lockup needs plaque + wordmark on
   one row, so this outranks .site-footer a rather than fighting it with !important. */
.site-footer a.footer-brand { margin: 0 0 14px; display: inline-flex; align-items: center; gap: 10px; padding: 0; }
.footer-brand .brand-mark img { height: 34px; }
.footer-brand .brand-pmj, .footer-brand .brand-gold { font-size: 1.3rem; }
.footer-bottom { border-top: 1px solid var(--line-dark); padding: 18px 0; font-size: .78rem; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pay-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.pay-badges span { border: 1px solid var(--line-dark); border-radius: 6px; padding: 3px 10px; font-size: .72rem; color: var(--gold-deep); background: var(--card); }

.wa-float {
  position: fixed; right: 18px; bottom: 18px; z-index: 70;
  width: 54px; height: 54px; border-radius: 50%; background: #25d366; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
  box-shadow: 0 10px 24px rgba(37,211,102,.4);
}

/* ---------- Offers popup ---------- */
.modal-veil { position: fixed; inset: 0; background: rgba(60, 45, 15, .55); z-index: 90; display: flex; align-items: center; justify-content: center; padding: 18px; }
.modal-card {
  background: var(--card); border-radius: var(--radius); max-width: 460px; width: 100%; overflow: hidden;
  box-shadow: var(--shadow-lg); position: relative; max-height: calc(100vh - 36px); overflow-y: auto;
  border: 1px solid var(--gold-3);
}
.modal-card .x { position: absolute; top: 10px; right: 12px; background: rgba(255,253,248,.9); border: 1px solid var(--line); width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 1rem; color: var(--ink); }
.modal-card img { width: 100%; }
.modal-body { padding: 18px 20px 22px; text-align: center; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: var(--paper); padding: 12px 22px; border-radius: 999px;
  border: 1px solid var(--gold-2); font-size: .9rem; z-index: 100; opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s; max-width: calc(100vw - 32px); text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Misc ---------- */
.empty-state { text-align: center; padding: 60px 20px; color: var(--muted); }
.empty-state .big { font-size: 3rem; margin-bottom: 10px; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--paper-2); border-radius: 999px; padding: 5px 13px; font-size: .78rem; font-weight: 600; }
.badge-green { background: rgba(31,143,78,.12); color: var(--green); }
.badge-red { background: rgba(179,55,47,.1); color: var(--red); }
.badge-gold { background: var(--gold-soft); color: var(--gold-deep); }
.weight-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.weight-pills button {
  border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 7px 15px;
  font-size: .85rem; font-weight: 600; cursor: pointer; color: var(--ink);
}
.weight-pills button:hover { border-color: var(--gold); }
.weight-pills button.on { background: linear-gradient(135deg, var(--gold-3), var(--gold)); border-color: var(--gold-2); color: var(--ink); }
.weight-pills button.dis { opacity: .45; text-decoration: line-through; cursor: pointer; }
.weight-pills button.dis.on { opacity: .8; }

.skeleton { background: linear-gradient(90deg, var(--paper-2) 25%, var(--gold-tint) 50%, var(--paper-2) 75%); background-size: 200% 100%; animation: sk 1.3s infinite; border-radius: var(--radius-sm); }
@keyframes sk { to { background-position: -200% 0; } }

.spinner { width: 18px; height: 18px; border: 2.5px solid rgba(120,96,40,.22); border-top-color: var(--gold-2); border-radius: 50%; animation: rot .7s linear infinite; display: inline-block; }
@keyframes rot { to { transform: rotate(360deg); } }

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

/* ---------- Invoice / print ---------- */
.invoice-wrap { max-width: 920px; }
.invoice-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.invoice-sheet {
  background: #fff; color: #1b1710; border: 1px solid var(--line-dark); border-radius: var(--radius);
  padding: 34px; box-shadow: var(--shadow);
}
.invoice-sheet .iv-top { display: flex; justify-content: space-between; gap: 22px; align-items: flex-start; border-bottom: 2px solid var(--gold); padding-bottom: 18px; flex-wrap: wrap; }
.iv-brand { display: flex; gap: 14px; align-items: flex-start; }
.iv-brand img { width: 72px; height: auto; flex: none; }
.iv-seller { font-family: var(--font-display); font-size: 1.22rem; font-weight: 600; letter-spacing: .02em; }
.iv-line { font-size: .82rem; color: #4d453a; margin-top: 3px; }
.iv-meta { font-size: .8rem; border-collapse: collapse; }
.iv-meta td { padding: 3px 0 3px 14px; border-left: 1px solid var(--line); vertical-align: top; white-space: nowrap; }
.iv-meta td:first-child { color: var(--muted); border-left: 0; padding-left: 0; text-align: right; white-space: normal; }
.iv-title { font-size: .95rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-deep); text-align: center; margin: 22px 0 18px; }
.iv-mono { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.iv-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 22px; }
.iv-box { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; background: var(--card); }
.iv-cap { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 8px; }
.iv-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.iv-table { width: 100%; border-collapse: collapse; font-size: .85rem; min-width: 520px; }
.iv-table th, .iv-table td { border: 1px solid var(--line); padding: 9px 10px; text-align: left; vertical-align: top; }
.iv-table th { background: var(--paper-2); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.iv-table td.num, .iv-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.iv-tail { display: grid; grid-template-columns: 1.1fr 1fr; gap: 22px; margin-top: 24px; align-items: start; }
.iv-words { font-size: .85rem; background: var(--gold-tint); border-left: 3px solid var(--gold); padding: 10px 12px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.iv-decl { font-size: .75rem; color: var(--muted); margin: 12px 0 0; line-height: 1.5; }
.iv-totals { width: 100%; border-collapse: collapse; font-size: .85rem; }
.iv-totals td { padding: 7px 4px; border-bottom: 1px solid var(--line); }
.iv-totals td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.iv-totals tr.save td:last-child { color: var(--green); }
.iv-totals tr.grand td { border-bottom: 0; border-top: 2px solid var(--gold); font-weight: 700; font-size: 1rem; padding-top: 10px; }
.iv-sign { display: flex; justify-content: space-between; gap: 20px; align-items: flex-end; margin-top: 30px; padding-top: 16px; border-top: 1px dashed var(--line-dark); flex-wrap: wrap; }
.iv-sigline { width: 170px; border-bottom: 1px solid #1b1710; margin: 34px 0 6px; }
.iv-note { font-size: .76rem; color: var(--muted); max-width: 340px; margin: 0; }
@media (max-width: 680px) {
  .invoice-sheet { padding: 18px 16px; }
  .iv-top { flex-direction: column; gap: 16px; }
  .iv-meta td:first-child { text-align: left; }
  .iv-parties, .iv-tail { grid-template-columns: 1fr; }
  .iv-brand img { width: 56px; }
  /* In a column the two header blocks are stretched to the widest min-content,
     and the nowrap meta cells made that wider than the phone screen. */
  .iv-brand, .iv-meta, .iv-seller, .iv-line { min-width: 0; max-width: 100%; }
  .iv-meta { width: 100%; }
  .iv-meta td { white-space: normal; }
  .iv-seller, .iv-line { overflow-wrap: anywhere; }
  /* The order id is one long token, so the page title alone could push the
     sheet wider than the phone screen. */
  .page-head h1 { overflow-wrap: anywhere; }
}

/* ---------- Product buy card ---------- */
.buy-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.buy-card .pd-price-big { font-size: 2.25rem; }
.buy-card .pd-meta { margin: 2px 0 0; }
.pd-order { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; margin-top: 20px; }
.pd-order-qty { margin: 0; flex: 0 0 auto; }
.pd-buy { margin: 0; }
.trust-row {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px;
  margin: 18px 0 0; padding: 14px 0 0; border-top: 1px dashed var(--line);
  font-size: .8rem; font-weight: 600; color: var(--muted-dark);
}
.weight-pills button { display: flex; flex-direction: column; align-items: center; gap: 2px; border-radius: var(--radius-sm); padding: 9px 14px; min-width: 84px; }
.weight-pills .wp-w { font-size: .9rem; font-weight: 700; }
.weight-pills .wp-p { font-size: .74rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.weight-pills button.on .wp-p { color: var(--gold-deep); }
/* A size or weight the team put its own metal/making discount on says so on the pill. */
.weight-pills .wp-off {
  font-size: .6rem; font-weight: 800; letter-spacing: .04em; line-height: 1.5;
  color: #fff; background: var(--green); border-radius: 999px; padding: 1px 7px;
}
.weight-pills button.dis { opacity: .62; text-decoration: none; }
.weight-pills button.dis .wp-p { text-decoration: line-through; }
@media (max-width: 560px) {
  .pd-order { flex-direction: column; align-items: stretch; }
  .pd-buy .btn { flex: 1; min-width: 0; }
}

/* ---------- Checkout coupons ---------- */
.coupon-offers { display: flex; flex-direction: column; gap: 10px; max-height: 330px; overflow-y: auto; padding-right: 2px; }
.offer { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; background: var(--gold-tint); }
.offer.no { background: var(--card); opacity: .78; }
.offer.on { border-color: var(--green); background: rgba(31, 143, 78, .07); opacity: 1; }
.offer-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.offer-code { font-weight: 700; letter-spacing: .04em; font-size: .82rem; background: #fff; border: 1px dashed var(--gold-2); color: var(--gold-deep); border-radius: 6px; padding: 3px 9px; text-transform: uppercase; }
.offer-title { font-size: .88rem; font-weight: 600; }
.offer-terms { font-size: .78rem; color: var(--muted); margin-top: 5px; }
.offer-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.offer-save { color: var(--green); font-weight: 700; font-size: .85rem; }
.offer-why { color: var(--muted); font-size: .78rem; font-style: italic; }
.coupon-applied { margin-bottom: 12px; }
.coupon-manual { margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 12px; }
.coupon-manual summary { cursor: pointer; font-size: .84rem; font-weight: 600; color: var(--gold-deep); }
.coupon-manual .coupon-box { margin-top: 10px; }
.save-ribbon { display: flex; align-items: center; gap: 8px; background: rgba(31, 143, 78, .1); color: var(--green); border-radius: var(--radius-sm); padding: 9px 12px; font-size: .84rem; font-weight: 700; margin-bottom: 12px; }
.summary-card { position: sticky; top: 96px; }
@media (max-width: 900px) { .summary-card { position: static; } }

/* ---------- Checkout coupon toggle ---------- */
.coupon-toggle {
  display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; padding: 0;
  cursor: pointer; font: inherit; font-weight: 700; color: var(--ink); text-align: left;
}
.coupon-toggle .ct-icon { font-size: 1.05rem; }
.coupon-toggle .ct-state { color: var(--green); font-size: .82rem; font-weight: 700; }
.coupon-toggle .ct-chev { margin-left: auto; color: var(--muted); transition: transform .18s ease; }
.coupon-toggle.open .ct-chev { transform: rotate(180deg); }
.coupon-body { margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 14px; }
.coupon-panel #couponApplied { margin-top: 12px; }

/* ---------- Checkout saved address ---------- */
.addr-head { display: flex; align-items: center; gap: 12px; }
.addr-head .kicker { margin-bottom: 4px; }
.addr-change {
  margin-left: auto; background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  font-size: .82rem; font-weight: 700; color: var(--gold-deep); text-decoration: underline;
}
.addr-change:hover { color: var(--ink); }
.addr-view { font-size: .92rem; }
.addr-view .muted { font-size: .82rem; margin-left: 8px; }
.addr-lines { margin: 6px 0 0; color: var(--muted-dark); font-size: .88rem; line-height: 1.55; min-height: 1.2em; }
.addr-pick { margin-top: 16px; }
.ap-cap { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.ap-row { display: flex; flex-wrap: wrap; gap: 8px; }
.addr-chip {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 12px; cursor: pointer; font: inherit; text-align: left;
}
.addr-chip b { font-size: .84rem; }
.addr-chip small { font-size: .74rem; color: var(--muted); }
.addr-chip:hover { border-color: var(--gold-2); }
.addr-chip.on { border-color: var(--green); background: rgba(31, 143, 78, .07); }
.addr-manage { display: inline-block; margin-top: 12px; font-size: .8rem; color: var(--gold-deep); text-decoration: underline; }
.addr-edit { margin-top: 10px; }
.addr-hint { font-size: .78rem; margin: 0 0 12px; }
.addr-edit > [data-addr-close] { margin-top: 2px; }

/* ---------- Product photo zoom ---------- */
.pd-main img { cursor: zoom-in; }
.pd-zoom {
  position: absolute; right: 12px; bottom: 12px; background: rgba(255, 253, 248, .92); border: 1px solid var(--line-dark);
  border-radius: 999px; padding: 7px 14px; font-size: .78rem; font-weight: 700; color: var(--ink); cursor: pointer;
}
.pd-zoom:hover { border-color: var(--gold-2); background: #fff; }
.pd-lightbox {
  position: fixed; inset: 0; z-index: 120; background: rgba(24, 18, 8, .88);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.pd-lightbox .lb-stage { max-width: min(92vw, 900px); max-height: 78vh; overflow: hidden; touch-action: none; }
.pd-lightbox .lb-stage img { max-width: 100%; max-height: 78vh; object-fit: contain; transform-origin: center; cursor: grab; }
.pd-lightbox .lb-bar {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; background: var(--card); border-radius: 999px;
  padding: 8px 14px; box-shadow: var(--shadow-lg); font-size: .82rem; font-weight: 700;
}
.pd-lightbox .lb-bar .btn { padding: 6px 13px; }
.pd-lightbox .lb-close {
  position: absolute; top: 18px; right: 20px; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 253, 248, .12); color: #fff; cursor: pointer; font-size: 1rem;
}
body.no-scroll { overflow: hidden; }

/* ---------- Product description ---------- */
.about-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 26px; align-items: start; }
.about-grid .about-prose p:last-child { margin-bottom: 0; }
.spec-list { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; font-size: .85rem; }
.spec-list dt { color: var(--muted); }
.spec-list dd { margin: 0; font-weight: 600; }
@media (max-width: 760px) { .about-grid { grid-template-columns: 1fr; gap: 18px; } }

/* ---------- Fold-out links (account: password, address, order details) ---------- */
.disc-link {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0;
  cursor: pointer; font: inherit; font-size: .86rem; font-weight: 700; color: var(--gold-deep); text-decoration: underline;
}
.disc-link::after { content: '\25BE'; font-size: .68rem; text-decoration: none; transition: transform .18s ease; }
.disc-link.is-open::after { transform: rotate(180deg); }
.disc-link:hover { color: var(--ink); }
.disc-link .dl-open { display: none; }
.disc-link.is-open .dl-open { display: inline; }
.disc-link.is-open .dl-closed { display: none; }
.disc-body { margin-top: 14px; }
.ord-more { margin-top: 6px; font-size: .78rem; }
.ord-body > .pay-verify:first-child { margin-top: 0; }

@media print {
  @page { size: A4; margin: 10mm; }
  .site-header, .site-footer, .wa-float, .toast, .announce, .ac-tabs, .page-head, .no-print { display: none !important; }
  body { background: #fff; }
  .wrap { padding: 0; }
  .section-tight { padding: 0; }
  .invoice-wrap { max-width: none; }
  .invoice-sheet { border: 0; padding: 0; max-width: none; box-shadow: none; border-radius: 0; }
  .iv-table-scroll { overflow: visible; }
  .iv-table { min-width: 0; }
  .iv-table tr, .iv-box { break-inside: avoid; page-break-inside: avoid; }
  .panel { box-shadow: none; border-color: #ddd; }

  /* One page: shrinking the root size scales every rem-based figure on the
     sheet at once, and the generous screen spacing is pulled in to match. */
  html { font-size: 13px; }
  .iv-top { padding-bottom: 8px; gap: 14px; }
  .iv-brand { gap: 10px; }
  .iv-brand img { width: 52px; }
  .iv-line { margin-top: 1px; }
  .iv-meta td { padding: 1px 0 1px 10px; }
  .iv-title { margin: 10px 0 8px; }
  .iv-parties { gap: 10px; margin-bottom: 10px; }
  .iv-box { padding: 8px 10px; }
  .iv-cap { margin-bottom: 4px; }
  .iv-table th, .iv-table td { padding: 4px 7px; }
  .iv-tail { gap: 14px; margin-top: 10px; }
  .iv-words { padding: 6px 9px; }
  .iv-decl { margin-top: 6px; }
  .iv-totals td { padding: 3px 4px; }
  .iv-totals tr.grand td { padding-top: 6px; }
  .iv-sign { margin-top: 10px; padding-top: 6px; }
  .iv-sigline { width: 130px; margin: 12px 0 3px; }
}

/* ---------- Trust & urgency layer ---------- */
/* Cards: approved-review stars and the honest stock line (admin's piece count). */
.pc-rate { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--muted); }
.pc-rate .stars { font-size: .82rem; }
.pc-stock { font-size: .76rem; font-weight: 600; color: var(--green); }
.pc-stock.low { color: var(--red); }

/* Product page: delivery promise rows under the buy panel. */
.pd-ship { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.pd-ship li { display: flex; gap: 10px; align-items: flex-start; font-size: .85rem; }
.pd-ship .psi { flex: none; font-size: 1.05rem; line-height: 1.25; }
.pd-ship b { display: block; font-size: .86rem; }
.pd-ship small { display: block; color: var(--muted); font-size: .76rem; }

.pd-stock { font-size: .8rem; font-weight: 600; margin: 4px 0 0; color: var(--green); }
.pd-stock.low { color: var(--red); }

/* Icon grid replacing the old one-line trust row. */
.pd-trust {
  list-style: none; margin: 22px 0 0; padding: 16px; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card);
}
.pd-trust li { display: flex; flex-direction: column; gap: 2px; font-size: .8rem; }
.pd-trust .pt-ic { font-size: 1.15rem; color: var(--gold-deep); }
.pd-trust b { font-size: .83rem; }
.pd-trust small { color: var(--muted); font-size: .74rem; line-height: 1.35; }

/* Follow bar: mirrors the price panel once it scrolls away — a floating card that
   carries the piece itself, so the shopper never has to remember which coin they chose. */
.pd-sticky {
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 65;
  display: flex; align-items: center; gap: 12px; width: min(1080px, calc(100vw - 26px));
  background: var(--card); border: 1px solid var(--gold-2); border-radius: var(--radius);
  box-shadow: 0 18px 40px rgba(120,96,40,.22); padding: 9px 12px;
  animation: ps-in .2s ease-out;
}
@keyframes ps-in { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
.pd-sticky.hidden { display: none; }
.ps-thumb { flex: none; width: 46px; height: 46px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--paper); }
.ps-thumb img, .ps-thumb video { display: block; width: 100%; height: 100%; object-fit: cover; }
.ps-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ps-name { font-size: .76rem; font-weight: 700; color: var(--muted-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-line { display: flex; align-items: baseline; gap: 8px; }
.ps-txt b { font-size: 1.08rem; font-variant-numeric: tabular-nums; }
.ps-save { flex: none; border-radius: 999px; padding: 2px 8px; font-size: .68rem; font-weight: 800;
  background: var(--gold-tint); border: 1px solid var(--gold-2); color: var(--gold-deep); }
.ps-txt .muted { font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-btns { display: flex; gap: 8px; flex: none; }
.ps-btns .btn { padding: 10px 16px; }
@media (min-width: 901px) { .ps-btns .btn { padding: 10px 22px; } }
@media (max-width: 700px) { .ps-name { display: none; } .pd-sticky { gap: 9px; } }
body.pd-bar-on .wa-float { bottom: 92px; }
@media print { .pd-sticky { display: none !important; } }

/* Cart / checkout: free-delivery progress, judged from the billed subtotal. */
.ship-bar { margin: 4px 0 14px; }
.ship-bar .sb-msg { display: block; font-size: .78rem; font-weight: 600; margin-bottom: 6px; }
.sb-track { display: block; height: 6px; border-radius: 999px; background: var(--paper-2); overflow: hidden; }
.sb-track i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold-3), var(--gold)); transition: width .35s ease; }
.ship-bar.on .sb-msg { color: var(--green); }

.coupon-nudge {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border: 1px dashed var(--gold-2); background: var(--gold-tint); border-radius: var(--radius-sm);
  padding: 11px 14px; margin-bottom: 16px; font-size: .85rem;
}

.mini-trust { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .74rem; color: var(--muted-dark); }

.co-eta {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--line); font-size: .84rem;
}
.co-eta .ce-ic { flex: none; font-size: 1.1rem; }
.co-eta b { display: block; font-size: .86rem; }
.co-eta small { display: block; color: var(--muted); font-size: .75rem; }

.pay-trust { margin-top: 14px; text-align: center; }
.pay-trust .pt-line { display: block; font-size: .74rem; color: var(--muted-dark); margin-bottom: 8px; }
.pay-trust .pt-marks { justify-content: center; }

/* Order tracking: stepper first, history folded beneath it. */
.of-card { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); padding: 14px 16px; margin: 12px 0 18px; }
.of-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.of-top .kicker { margin: 0; }
.of-eta { font-size: .78rem; font-weight: 600; color: var(--gold-deep); margin-left: auto; }
.of-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.of-steps li { position: relative; text-align: center; padding: 0 4px; }
.of-steps li::before {
  content: ""; position: absolute; top: 10px; left: -50%; right: 50%; height: 2px; background: var(--line);
}
.of-steps li:first-child::before { display: none; }
.of-steps li.done::before, .of-steps li.now::before { background: var(--gold-2); }
.of-steps li.cancelled .ofs-dot { background: var(--red); border-color: var(--red); color: #fff; }
.ofs-dot {
  position: relative; z-index: 1; width: 22px; height: 22px; margin: 0 auto 6px; border-radius: 50%;
  border: 2px solid var(--line); background: var(--paper); color: var(--ink);
  display: flex; align-items: center; justify-content: center; font-size: .68rem;
}
.of-steps li.done .ofs-dot { background: linear-gradient(135deg, var(--gold-3), var(--gold)); border-color: var(--gold-2); }
.of-steps li.now .ofs-dot { border-color: var(--gold-2); color: var(--gold-deep); box-shadow: 0 0 0 4px var(--gold-soft); }
.ofs-label { display: block; font-size: .74rem; font-weight: 600; line-height: 1.25; }
.of-steps li.todo .ofs-label { color: var(--muted); font-weight: 500; }
.ofs-when { display: block; font-size: .68rem; color: var(--muted); }
.of-card .order-flow { margin: 12px 0 0; background: var(--paper-2); }
.courier-card { display: grid; gap: 8px; margin-top: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 11px 13px; background: var(--gold-tint); }
.cc-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: .85rem; }
.cc-lbl { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); min-width: 92px; }
.cc-track { justify-self: start; }
.of-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

/* Second contact float sits above WhatsApp so both stay reachable. */
.call-float { background: var(--ink); box-shadow: 0 10px 24px rgba(43,33,16,.35); bottom: 82px; }

@media (max-width: 560px) {
  .of-steps { grid-auto-flow: row; grid-auto-columns: auto; gap: 10px; }
  .of-steps li { display: grid; grid-template-columns: 22px 1fr; gap: 0 10px; text-align: left; align-items: center; }
  .of-steps li::before { top: 50%; left: 10px; right: auto; width: 2px; height: 100%; }
  .ofs-dot { margin: 0; }
  .of-eta { margin-left: 0; flex-basis: 100%; }
  .pd-sticky { bottom: 10px; gap: 9px; }
  .ps-btns .btn { padding: 9px 13px; font-size: .82rem; }
}

/* Reward credits — earned on a paid order, spent only by the mobile that holds them. */
.reward-note {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 14px;
  border: 1px dashed var(--gold-2); background: var(--gold-tint); border-radius: var(--radius-sm);
  padding: 10px 13px; font-size: .82rem; color: var(--ink);
}
.reward-note b { color: var(--gold-deep); }
.reward-note.on { border-style: solid; background: var(--gold-soft); }

.reward-panel { border-color: var(--gold-2); }
.rp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rp-head .kicker { margin: 0; }
.rp-bal { font-size: .82rem; color: var(--muted); }
.rp-bal [data-rp-balance] { font-weight: 800; color: var(--gold-deep); font-size: 1.02rem; }
.rp-lock { margin: 10px 0 0; font-size: .82rem; color: var(--gold-deep); background: var(--gold-tint); border-radius: var(--radius-sm); padding: 9px 12px; }
.rp-use { margin-top: 12px; }
.rp-check { display: flex; align-items: center; gap: 10px; font-size: .9rem; font-weight: 600; cursor: pointer; }
.rp-check input { width: 18px; height: 18px; accent-color: var(--gold); flex: none; }
.rp-amount { margin-top: 12px; padding-left: 28px; }
.rp-field { display: flex; gap: 8px; align-items: stretch; margin-top: 5px; }
.rp-field .input { max-width: 170px; }
.rp-note { margin: 12px 0 0; font-size: .82rem; color: var(--gold-deep); font-weight: 600; }
.rp-terms { margin: 12px 0 0; font-size: .74rem; color: var(--muted); }

.reward-acct { padding: 16px 18px; }
.ra-top { display: grid; grid-template-columns: 190px 1fr; gap: 18px; align-items: center; }
.ra-bal b { display: block; font-size: 1.9rem; line-height: 1.1; color: var(--gold-deep); }
.ra-cap { display: block; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.ra-when { display: block; font-size: .76rem; color: var(--muted); margin-top: 5px; }
.ra-hist { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.ra-hist summary .kicker { margin: 0; }
.ra-rows { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.ra-rows li { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: .85rem; }
.ra-rows small { display: block; font-size: .74rem; }
.ra-amt { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; white-space: nowrap; }
.ra-amt em { font-style: normal; color: var(--muted); font-weight: 600; }

.of-reward { margin: 12px 0 0; font-size: .82rem; color: var(--gold-deep); background: var(--gold-tint); border-radius: var(--radius-sm); padding: 9px 12px; }

@media (max-width: 700px) {
  .ra-top { grid-template-columns: 1fr; gap: 12px; }
  .rp-amount { padding-left: 0; }
}

/* ---------- Product page: gallery stage, price emphasis, trust grid ---------- */
.pd-gallery .pd-main {
  border: 1px solid var(--line);
  background: radial-gradient(circle at 50% 40%, #fffaf0 0%, var(--paper-2) 58%, #ece0c8 100%);
  box-shadow: 0 16px 36px rgba(120,96,40,.13);
}
.pd-gallery .pd-main img { transition: transform .45s ease; }
.pd-gallery .pd-main:hover img { transform: scale(1.04); }
.pd-marks { position: absolute; top: 12px; left: 12px; z-index: 3; display: flex; flex-direction: column; gap: 8px; }
.pd-flag {
  align-self: flex-start; border-radius: 999px; padding: 6px 11px;
  font-size: .72rem; font-weight: 800; letter-spacing: .02em; box-shadow: 0 4px 12px rgba(60,40,10,.16);
}
.pd-flag.save { background: linear-gradient(135deg, var(--gold-3), var(--gold)); color: var(--ink); }
.pd-flag.hall { background: rgba(255,255,255,.93); color: var(--gold-deep); border: 1px solid var(--gold-2); }
.pd-media-count { font-size: .76rem; color: var(--muted); margin: 9px 0 0; }
.pd-thumb img { transition: transform .18s ease; }
.pd-thumb:hover img { transform: scale(1.06); }

.buy-card { position: relative; overflow: hidden; border-top: 1px solid var(--line); }
.buy-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--gold-3), var(--gold), var(--gold-3));
}
.pd-price-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pd-pill-save {
  border-radius: 999px; padding: 4px 10px; font-size: .74rem; font-weight: 800;
  background: var(--gold-tint); border: 1px solid var(--gold-2); color: var(--gold-deep);
}
.weight-pills button { transition: transform .15s, border-color .15s, background .15s; }
.weight-pills button:hover { transform: translateY(-1px); }
.weight-pills button.on { box-shadow: 0 4px 14px rgba(168,132,47,.26); }

.pd-ship li { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); }
.pd-ship .psi {
  width: 30px; height: 30px; display: grid; place-items: center; flex: none;
  border-radius: 999px; background: var(--gold-tint); border: 1px solid var(--gold-2); font-size: .95rem; line-height: 1;
}
.pd-trust {
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; padding: 14px;
  background: linear-gradient(180deg, var(--gold-tint), var(--card) 60%);
}
.pd-trust li { flex-direction: row; align-items: flex-start; gap: 10px; }
.pd-trust .pt-ic {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center;
  border-radius: 999px; background: #fff; border: 1px solid var(--gold-2); font-size: .95rem;
}
@media (max-width: 460px) { .pd-trust { grid-template-columns: 1fr; } }

/* ==========================================================================
   ROUND L — "elevated luxe" pass over Home, Shop, Product and Checkout.
   An additive layer: it re-shades and re-lifts components declared above and
   adds one scroll-reveal + count-up motion set. Deliberately avoids touching
   padding on shared classes (.panel) and position on sticky ones
   (.summary-card), because those rules are later in this file and would win.
   ========================================================================== */
:root {
  --gold-grad: linear-gradient(135deg, #f8ecd0 0%, var(--gold) 52%, var(--gold-2) 100%);
  --gold-grad-deep: linear-gradient(135deg, var(--gold-2), var(--gold-deep));
  --gold-hair: linear-gradient(90deg, transparent, rgba(200, 162, 74, .5) 16%, rgba(233, 213, 160, .95) 50%, rgba(200, 162, 74, .5) 84%, transparent);
  --card-grad: linear-gradient(180deg, #fffefb 0%, var(--card) 58%, #fdf8ec 100%);
  --ink-grad: linear-gradient(180deg, #2d2315, var(--ink));
  --radius-lg: 20px;
  --radius-xl: 26px;
  /* Three-step warm elevation: resting, lifted, floating. */
  --elev-1: 0 1px 2px rgba(120, 96, 40, .05), 0 6px 18px rgba(120, 96, 40, .07);
  --elev-2: 0 2px 6px rgba(120, 96, 40, .06), 0 18px 40px rgba(120, 96, 40, .13);
  --elev-3: 0 6px 14px rgba(120, 96, 40, .10), 0 30px 66px rgba(120, 96, 40, .19);
  --gold-glow: 0 10px 26px rgba(168, 132, 47, .34);
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  /* The house royal: the same plum the wordmark is set in, darkened to carry gold.
     Every "royal surface" (page bands, error stage, gift-card wraps) reads from here. */
  --royal: #4a152c;
  --royal-deep: #2b0f22;
  --royal-shade: #170611;
  --royal-band: linear-gradient(152deg, var(--royal-deep) 0%, var(--royal) 46%, var(--royal-shade) 100%);
  --royal-face: linear-gradient(140deg, var(--royal-deep) 0%, var(--royal) 46%, var(--royal-shade) 100%);
  /* Plum at about 5% over the card cream: the light side of the house royal, for the
     surfaces a customer types into. Solid, so a fieldset and its legend share one fill. */
  --royal-tint: #f6eef0;
}

/* ---------- Type rhythm ---------- */
h1, h2, h3 { letter-spacing: -.018em; text-wrap: balance; }
.section { padding: 74px 0; }
.section-tight { padding: 44px 0; }
@media (max-width: 760px) { .section { padding: 50px 0; } .section-tight { padding: 32px 0; } }
/* Every kicker carries a short rule, so section labels read as one editorial device. */
.kicker::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 20px; height: 1px; margin-right: 9px; background: var(--gold-2); opacity: .75;
}

/* ---------- Buttons: gold bar gets real depth plus a one-way sheen ---------- */
.btn { font-weight: 700; }
.btn-gold { background: var(--gold-grad); box-shadow: var(--gold-glow), inset 0 1px 0 rgba(255, 255, 255, .7); }
.btn-gold:hover { transform: translateY(-1px); box-shadow: 0 16px 34px rgba(168, 132, 47, .44), inset 0 1px 0 rgba(255, 255, 255, .8); filter: none; }
.btn-dark { background: var(--ink-grad); box-shadow: var(--elev-1); }
.btn-ghost { background: var(--card-grad); }
.btn-lg { padding: 16px 36px; }
.btn-sm { padding: 9px 17px; }
/* The sweep only runs on hover-capable pointers and never loops, so it stays a response. */
@media (hover: hover) {
  .btn { position: relative; overflow: hidden; isolation: isolate; }
  .btn::after {
    content: ""; position: absolute; z-index: -1; top: -65%; bottom: -65%; left: -34%; width: 26%;
    transform: translateX(-260%) rotate(14deg); opacity: 0; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent);
  }
  .btn:hover::after { opacity: 1; transform: translateX(620%) rotate(14deg); transition: transform .6s var(--ease-out), opacity .18s; }
}

/* ---------- Header: the shared chrome on all four pages ---------- */
.site-header.scrolled { box-shadow: 0 10px 30px rgba(120, 96, 40, .15); border-bottom-color: var(--gold-3); }
.main-nav a { font-weight: 600; transition: color .18s, background .18s, box-shadow .18s; }
.main-nav a.active { box-shadow: inset 0 0 0 1px var(--gold-3); }
.icon-btn:hover { transform: translateY(-1px); box-shadow: var(--elev-1); }

/* ---------- Page headers (Shop, Cart, Checkout, content pages) ----------
   One royal band under the header on every page: house plum, two pools of gold
   light, and the wrap's hairline frame echoed at page scale. */
.page-head {
  position: relative; overflow: hidden; padding: clamp(52px, 6.4vw, 76px) 0 clamp(46px, 5.6vw, 64px); border-bottom: 0;
  background:
    radial-gradient(820px 330px at 84% -22%, rgba(233, 205, 134, .26), transparent 62%),
    radial-gradient(560px 300px at 6% 122%, rgba(233, 205, 134, .12), transparent 62%),
    var(--royal-band);
}
.page-head::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(118deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 11px);
  -webkit-mask-image: linear-gradient(196deg, rgba(0, 0, 0, .85), transparent 58%);
  mask-image: linear-gradient(196deg, rgba(0, 0, 0, .85), transparent 58%);
}
.page-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(233, 205, 134, .75) 18%, rgba(248, 236, 208, .9) 50%, rgba(233, 205, 134, .75) 82%, transparent);
}
.page-head > .wrap { position: relative; z-index: 1 }
.page-head .kicker { color: var(--gold-3) }
.page-head .kicker::before { background: var(--gold-3) }
.page-head h1 {
  color: #fdf6e6; font-size: clamp(2.2rem, 5vw, 3.6rem); letter-spacing: -.03em; margin-bottom: 10px;
}
.page-head p { color: rgba(253, 246, 230, .8); font-size: 1.02rem; max-width: 62ch; margin: 0 }
.page-head p b { display: block; margin-top: 6px; color: var(--gold-3); font-weight: 600 }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .page-head h1 em {
    font-style: normal; background: var(--gold-grad);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
}

/* ---------- Home hero ---------- */
.hero {
  position: relative; border-bottom: 0;
  background:
    radial-gradient(1100px 470px at 85% -16%, rgba(200, 162, 74, .3), transparent 60%),
    radial-gradient(760px 360px at 4% 112%, rgba(233, 213, 160, .55), transparent 64%),
    linear-gradient(158deg, #fffefa 0%, var(--gold-tint) 44%, var(--paper-2) 100%);
}
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold-hair); }
.hero-inner { padding: clamp(56px, 7.4vw, 102px) 0 clamp(58px, 7vw, 96px); gap: clamp(30px, 4.6vw, 60px); }
.hero h1 { font-size: clamp(2.4rem, 5.6vw, 4.1rem); line-height: 1.03; letter-spacing: -.032em; margin-bottom: .28em; }
.hero h1 em { font-style: normal; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .hero h1 em {
    background: var(--gold-grad); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
}
.hero .lead { font-size: 1.1rem; line-height: 1.6; color: var(--ink-3); max-width: 44ch; }
.hero-cta { margin-top: 30px; gap: 14px; }
.hero-art { position: relative; }
/* Halo behind the coin so the artwork sits in light rather than on a flat panel. */
.hero-art::before {
  content: ""; position: absolute; inset: 8% 6%; border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 46%, rgba(255, 255, 255, .9), rgba(233, 213, 160, .34) 58%, transparent 74%);
}
.hero-art img {
  position: relative; z-index: 1; border: 0; border-radius: var(--radius-xl);
  box-shadow: var(--elev-3), 0 0 0 1px rgba(255, 255, 255, .7), 0 0 0 10px rgba(233, 213, 160, .3);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-art img { animation: hero-float 10s ease-in-out infinite; }
}
@keyframes hero-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
/* The three headline numbers become one stat plaque instead of three loose lines. */
.hero-stats {
  display: flex; gap: 0; margin-top: 40px; overflow: hidden;
  border: 1px solid var(--gold-3); border-radius: var(--radius-lg);
  background: var(--card-grad); box-shadow: var(--elev-1);
}
.hero-stats > div { flex: 1 1 0; min-width: 0; padding: 15px 20px; }
.hero-stats > div + div { border-left: 1px solid var(--line); }
.hero-stats b { font-size: 1.62rem; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.hero-stats span { font-size: .67rem; letter-spacing: .13em; }
@media (max-width: 620px) {
  .hero-stats { flex-direction: column; }
  .hero-stats > div + div { border-left: 0; border-top: 1px solid var(--line); }
}

/* ---------- Home: offers, categories, trust, sell banner, FAQs ---------- */
.offer-card {
  border: 1px solid var(--gold-3); border-left: 3px solid var(--gold); border-radius: var(--radius-lg);
  background: var(--card-grad); box-shadow: var(--elev-1); padding: 16px 20px;
  transition: transform .24s var(--ease-out), box-shadow .28s, border-color .2s;
}
.offer-card:hover { transform: translateY(-3px); box-shadow: var(--elev-2); border-color: var(--gold-2); }
.offer-card b { font-size: 1.12rem; }
.category-pill {
  background: var(--card-grad); box-shadow: var(--elev-1); border-radius: 999px; padding: 10px 20px; font-weight: 700;
  transition: transform .2s var(--ease-out), box-shadow .24s, border-color .2s;
}
.category-pill:hover { transform: translateY(-2px); box-shadow: var(--elev-2); border-color: var(--gold-2); background: var(--card-grad); }
.trust { gap: 20px; }
.trust-item {
  border-radius: var(--radius-lg); background: var(--card-grad); box-shadow: var(--elev-1); padding: 24px;
  transition: transform .24s var(--ease-out), box-shadow .3s, border-color .2s;
}
.trust-item:hover { transform: translateY(-4px); box-shadow: var(--elev-2); border-color: var(--gold-3); }
.trust-item .t-ic {
  width: 46px; height: 46px; flex: none; display: grid; place-items: center; font-size: 1.3rem;
  border-radius: 15px; color: var(--gold-deep); border: 1px solid var(--gold-3);
  background: linear-gradient(150deg, #fffdf6, var(--gold-tint)); box-shadow: inset 0 1px 0 #fff;
}
/* Line pictographs in the tiles, with a gold halo that lights up with the card. */
.t-ic svg, .cta-ic svg, .pt-ic svg { display: block; }
.trust-item .t-ic { box-shadow: inset 0 1px 0 #fff, 0 0 0 4px rgba(212, 175, 55, .07);
  transition: background .25s, border-color .25s, box-shadow .3s; }
.trust-item:hover .t-ic { border-color: var(--gold-2); background: linear-gradient(150deg, #fff, var(--gold-tint)); }
.trust-item b { font-family: var(--font-display); font-size: 1.04rem; letter-spacing: -.01em; }
.sell-banner {
  position: relative; border-radius: var(--radius-xl); padding: 46px; box-shadow: var(--elev-2); overflow: hidden;
  background: linear-gradient(150deg, #fffdf5, var(--gold-tint) 42%, var(--paper-2));
}
.sell-banner::before {
  content: ""; position: absolute; right: -80px; top: -100px; width: 300px; height: 300px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(233, 213, 160, .6), transparent 64%);
}
.sell-banner > * { position: relative; z-index: 1; }
.sell-banner img { border-radius: var(--radius-lg); box-shadow: var(--elev-2); }
.sell-banner h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); letter-spacing: -.025em; }
.cta-grid { gap: 22px; }
.cta-card {
  border-radius: var(--radius-lg); background: var(--card-grad); box-shadow: var(--elev-1);
  transition: transform .24s var(--ease-out), box-shadow .3s, border-color .2s;
}
.cta-card:hover { transform: translateY(-4px); box-shadow: var(--elev-2); border-color: var(--gold-3); }
.cta-card .cta-ic { width: 50px; height: 50px; border-radius: 16px; background: var(--gold-grad); color: var(--ink); box-shadow: var(--gold-glow); }
.cta-card h3 { letter-spacing: -.02em; }
.cta-card .btn { margin-top: auto; }

/* ---------- WhatsApp price alerts ---------- */
.alert-card {
  position: relative; overflow: hidden; text-align: center;
  border: 1px solid var(--gold-3); border-radius: var(--radius-xl); box-shadow: var(--elev-2);
  padding: clamp(28px, 5vw, 46px) clamp(20px, 5vw, 52px);
  background: linear-gradient(150deg, #fffdf6, var(--gold-tint) 46%, var(--paper-2));
}
.alert-card::before {
  content: ""; position: absolute; left: 50%; top: -150px; width: 480px; height: 280px;
  transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(circle, rgba(233, 213, 160, .55), transparent 66%);
}
.alert-card > * { position: relative; z-index: 1; }
.alert-card .kicker { color: var(--gold-deep); letter-spacing: .24em; }
.alert-card h2 { margin: 8px 0 6px; font-size: clamp(1.55rem, 3.6vw, 2.3rem); letter-spacing: -.025em; }
.alert-sub { margin: 0 auto 22px; max-width: 44ch; color: var(--muted); font-size: .96rem; }
.alert-form {
  display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end;
  max-width: 680px; margin: 0 auto; text-align: left;
}
.alert-form .field { min-width: 0; margin-bottom: 0; }
.alert-form .btn { align-self: end; height: 50px; padding-block: 0; white-space: nowrap; }
.alert-form .form-status { grid-column: 1 / -1; text-align: center; margin-top: 2px; }
.alert-fine { margin: 14px auto 0; max-width: 52ch; font-size: .78rem; color: var(--muted); }
.alert-spark { position: absolute; color: var(--gold-2); font-size: 1.5rem; opacity: .5; pointer-events: none; }
.alert-spark.s1 { left: 5%; top: 44%; }
.alert-spark.s2 { right: 5%; top: 40%; font-size: 1.05rem; }
@media (max-width: 700px) {
  .alert-form { grid-template-columns: 1fr; }
  .alert-form .btn { width: 100%; }
  .alert-spark { display: none; }
}
.faq details { border-radius: var(--radius-lg); box-shadow: var(--elev-1); padding: 16px 20px; transition: border-color .2s, box-shadow .25s, background .2s; }
.faq details[open] { border-color: var(--gold-2); box-shadow: var(--elev-2); background: var(--card-grad); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-family: var(--font-display); font-size: 1.04rem; letter-spacing: -.01em; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "▾"; flex: none; color: var(--gold-2); font-size: .82rem; transition: transform .2s var(--ease-out); }
.faq details[open] summary::after { transform: rotate(180deg); }

/* ---------- Shared panel + form surfaces ---------- */
.panel { border-radius: var(--radius-lg); background: var(--card-grad); box-shadow: var(--elev-1); }
/* .panel-dark has the same specificity as .panel above, so its own wash is repeated here. */
.panel.panel-dark { background: linear-gradient(150deg, #fdf3dd, var(--paper-2)); }
.input { border-radius: 12px; background: #fffefb; transition: border-color .16s, box-shadow .16s, background .16s; }
.input:hover { border-color: var(--line-dark); }
.input:focus { border-color: var(--gold); background: #fff; box-shadow: 0 0 0 4px var(--gold-soft); }
.field label { font-weight: 700; color: var(--ink-2); }
.check input, .fp-switch input, .sb-switch input, .rp-check input { accent-color: var(--gold-2); }
.sec-head { margin-bottom: 34px; }
.sec-head h2 { position: relative; padding-bottom: 12px; font-size: clamp(1.6rem, 3.3vw, 2.4rem); letter-spacing: -.026em; }
/* Short gold rule under every section title — the one signature detail of the page system. */
.sec-head h2::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 66px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold-2), var(--gold-3));
}

/* ---------- Product cards (Home, Shop bands, related, suggestions) ---------- */
.product-card {
  border-radius: var(--radius-lg); background: var(--card-grad); box-shadow: var(--elev-1);
  transition: transform .26s var(--ease-out), box-shadow .3s ease, border-color .22s ease;
}
.product-card::before {
  content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}
.product-card:hover { transform: translateY(-6px); box-shadow: var(--elev-3); border-color: var(--gold); }
.pc-media { background: radial-gradient(circle at 50% 42%, #fffaf0 0%, var(--paper-2) 62%, #e9dcc2 100%); }
.product-card:hover .pc-media img { transform: scale(1.075); }
.pc-cat { color: var(--gold-deep); font-weight: 700; font-size: .66rem; letter-spacing: .13em; }
.pc-name { font-size: 1.08rem; letter-spacing: -.012em; transition: color .2s; }
.product-card:hover .pc-name { color: var(--gold-deep); }
.pc-price { margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--line); }
.pc-price .now { font-family: var(--font-display); font-size: 1.28rem; letter-spacing: -.02em; }
.pc-tag { background: var(--card-grad); border-color: var(--gold-2); box-shadow: var(--elev-1); font-weight: 800; }
.pc-tag.off { background: var(--gold-grad-deep); border-color: var(--gold-deep); color: #fff; }
.pc-tag.soon { background: var(--ink-grad); border-color: var(--ink); color: var(--gold-3); }
.pc-fav { background: rgba(255, 253, 248, .96); box-shadow: var(--elev-1); transition: opacity .18s, transform .18s, color .18s, border-color .18s; }
.pc-fav.on { color: var(--red); border-color: var(--red); box-shadow: 0 4px 12px rgba(179, 55, 47, .22); }
/* Touch devices get the heart always; only hover-capable pointers hide it until the card is entered. */
@media (hover: hover) {
  .pc-fav { opacity: 0; transform: translateY(-6px) scale(.94); }
  .product-card:hover .pc-fav, .pc-fav:focus-visible, .pc-fav.on { opacity: 1; transform: none; }
}
.pc-stock { font-weight: 700; letter-spacing: .01em; }
.pc-actions { margin-top: 14px; gap: 9px; }

/* ---------- Shop: toolbar, category bands, promo tile, empty state ---------- */
.shop-bar { background: var(--card-grad); box-shadow: var(--elev-1); }
.cat-band { border-radius: var(--radius-xl); border-color: rgba(233, 213, 160, .8); box-shadow: var(--elev-3); }
.cat-band::after {
  content: ""; position: absolute; inset: 0; z-index: 6; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24), inset 0 -70px 96px -66px rgba(20, 10, 5, .55);
}
.cat-band-kicker { padding: 0; }
.cat-band-kicker::before { content: ""; display: inline-block; vertical-align: middle; width: 22px; height: 1px; margin-right: 9px; background: var(--gold-3); }
.cat-band-name { font-size: clamp(2.2rem, 5.4vw, 4rem); letter-spacing: -.032em; }
.cat-band-count { background: rgba(255, 255, 255, .95); box-shadow: var(--elev-1); font-weight: 800; letter-spacing: .06em; }
.cat-slide img { transition: transform 1.1s var(--ease-out), opacity .45s ease; }
/* The current slide breathes in very slowly — motion that only happens while it is showing. */
@media (prefers-reduced-motion: no-preference) {
  .cat-slide.on img { animation: band-zoom 12s ease-out forwards; }
}
@keyframes band-zoom { from { transform: scale(1); } to { transform: scale(1.055); } }
.cat-dot { box-shadow: 0 2px 10px rgba(0, 0, 0, .45); }
.pc-promo {
  border-radius: var(--radius-lg); background: var(--card-grad); box-shadow: var(--elev-1);
  transition: transform .24s var(--ease-out), box-shadow .3s, border-color .2s;
}
.pc-promo:hover { transform: translateY(-6px); box-shadow: var(--elev-3); }
.pc-promo:hover .pcm-media img { transform: scale(1.075); }
.pcm-media { background: radial-gradient(circle at 50% 42%, #fffaf0, var(--paper-2) 64%, #e9dcc2); }
.pcm-cap { background: linear-gradient(180deg, #fffdf6, var(--gold-tint)); }
.pcm-cap b { font-size: 1.12rem; letter-spacing: -.015em; }
.pcm-go { display: inline-flex; align-items: center; gap: 4px; transition: letter-spacing .2s, transform .2s; }
.pc-promo:hover .pcm-go { transform: translateX(3px); }
.empty-state {
  border: 1px dashed var(--gold-3); border-radius: var(--radius-xl); background: var(--card-grad);
  box-shadow: var(--elev-1); padding: 66px 22px;
}
.empty-state .big {
  width: 92px; height: 92px; margin: 0 auto 16px; display: grid; place-items: center; font-size: 2.5rem;
  border-radius: 50%; border: 1px solid var(--gold-3); box-shadow: var(--elev-1);
  background: radial-gradient(circle at 50% 40%, #fffdf6, var(--gold-tint) 68%);
}

/* ---------- Product detail ---------- */
.pd-layout { gap: 44px; }
.pd-info h1 { font-size: clamp(1.9rem, 4.2vw, 3rem); letter-spacing: -.03em; }
.pd-gallery .pd-main { border: 1px solid var(--gold-3); border-radius: var(--radius-xl); box-shadow: var(--elev-2); }
.pd-gallery .pd-main:hover img { transform: scale(1.05); }
.pd-zoom { background: rgba(255, 253, 248, .96); box-shadow: var(--elev-1); font-weight: 800; transition: .18s; }
.pd-zoom:hover { transform: translateY(-1px); box-shadow: var(--elev-2); border-color: var(--gold-2); }
.pd-thumbs { gap: 12px; }
.pd-thumbs img, .pd-thumbs video { width: 74px; height: 74px; border: 0; border-radius: 14px; }
.pd-thumb { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: var(--elev-1); transition: transform .18s var(--ease-out), border-color .18s, box-shadow .2s; }
.pd-thumb:hover, .pd-thumb.on { outline: 0; }
.pd-thumb:hover { transform: translateY(-2px); border-color: var(--gold); }
.pd-thumb.on { border-color: var(--gold-2); box-shadow: 0 0 0 3px var(--gold-soft); }
.pd-flag { box-shadow: var(--elev-2); font-weight: 800; letter-spacing: .01em; }
.pd-flag.save { background: var(--gold-grad); }
.buy-card { border-radius: var(--radius-xl); background: var(--card-grad); box-shadow: var(--elev-2); padding: 24px; }
.buy-card::before { height: 5px; background: var(--gold-hair); }
.buy-card .pd-price-big { font-size: 2.7rem; letter-spacing: -.035em; }
.pd-price-big { font-size: 2.3rem; letter-spacing: -.03em; }
.pd-pill-save { background: var(--gold-grad); border-color: var(--gold-2); color: var(--ink); box-shadow: var(--elev-1); font-weight: 800; }
.weight-pills button {
  border-radius: 14px; padding: 11px 16px; min-width: 96px; background: var(--card-grad); box-shadow: var(--elev-1);
  transition: transform .18s var(--ease-out), border-color .18s, background .18s, box-shadow .22s;
}
.weight-pills button:hover { transform: translateY(-2px); box-shadow: var(--elev-2); }
.weight-pills button.on { background: var(--gold-grad); border-color: var(--gold-2); box-shadow: var(--gold-glow), inset 0 1px 0 rgba(255, 255, 255, .65); }
.weight-pills .wp-p { font-weight: 700; color: var(--muted-dark); }
.qty-box { box-shadow: var(--elev-1); }
.qty-box button:hover { background: var(--gold-soft); color: var(--gold-deep); }
.pd-order .btn { box-shadow: var(--elev-1); }
.pd-ship { gap: 8px; }
.pd-ship li { border-radius: 14px; background: var(--card-grad); transition: transform .2s var(--ease-out), border-color .2s, box-shadow .22s; }
.pd-ship li:hover { transform: translateX(3px); border-color: var(--gold-2); box-shadow: var(--elev-1); }
.pd-ship .psi { background: var(--gold-grad); border-color: var(--gold-2); color: var(--ink); box-shadow: var(--elev-1); }
.pd-ship b { font-family: var(--font-display); letter-spacing: -.01em; }
.pd-trust { border-radius: var(--radius-lg); box-shadow: var(--elev-1); background: linear-gradient(180deg, var(--gold-tint), var(--card) 55%); }
.pd-trust .pt-ic { background: #fff; box-shadow: var(--elev-1); color: var(--gold-deep); }
.breakup-table td { padding: 11px 8px; border-bottom: 1px solid var(--line); }
.breakup-table td:first-child { color: var(--ink-3); }
.breakup-table td:last-child { font-weight: 700; }
.breakup-table tr.pd-total td {
  border-bottom: 0; border-top: 2px solid var(--gold); font-family: var(--font-display); font-size: 1.16rem;
  letter-spacing: -.015em; padding: 14px 8px; background: linear-gradient(90deg, var(--gold-tint), transparent 80%);
}
/* The stones pad under the breakup: one line per stone, priced the way the shop quotes it. */
.bk-stones {
  list-style: none; margin: 14px 0 0; padding: 12px 14px;
  border: 1px dashed var(--gold); border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--gold-tint), var(--card));
  display: flex; flex-direction: column; gap: 10px;
}
.bk-stones li { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; font-size: .84rem; }
.bk-stones .bs-name { display: flex; flex-direction: column; gap: 1px; }
.bk-stones .bs-name b { font-weight: 700; }
.bk-stones .bs-name b::before { content: '\25C6'; color: var(--gold-deep); font-size: .7rem; margin-right: 6px; }
.bk-stones .bs-name small { color: var(--muted); font-size: .74rem; }
.bk-stones .bs-amt { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bk-stones .bs-amt s { color: var(--muted); font-weight: 600; margin-right: 6px; }
.bk-stones .bs-amt em { font-style: normal; color: var(--green); font-size: .74rem; margin-left: 6px; }
.bk-stones-note { font-size: .74rem; margin: 8px 2px 0; }
@media (max-width: 560px) {
  .bk-stones li { align-items: flex-start; }
  .bk-stones .bs-amt { font-size: .8rem; }
}
.about-grid .spec-list {
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card-grad);
  box-shadow: var(--elev-1); padding: 14px 18px; gap: 0 16px;
}
.about-grid .spec-list dt, .about-grid .spec-list dd { padding: 9px 0; border-bottom: 1px dashed var(--line); }
.about-grid .spec-list dt:last-of-type, .about-grid .spec-list dd:last-of-type { border-bottom: 0; }
.review-item { padding: 18px 0; }
.review-item .rv-name { font-family: var(--font-display); font-size: 1.02rem; }
.review-item:hover { background: linear-gradient(90deg, var(--gold-tint), transparent 70%); border-radius: var(--radius-sm); }
.stars-pick button { font-size: 1.55rem; transition: transform .16s var(--ease-out), color .16s; }
.stars-pick button:hover { transform: scale(1.14) rotate(-4deg); }
.pd-sticky { border-radius: var(--radius-lg); box-shadow: 0 22px 48px rgba(120, 96, 40, .26), inset 0 1px 0 rgba(255, 255, 255, .8); }
.ps-thumb { border-radius: 13px; box-shadow: var(--elev-1); }

/* ---------- Cart + checkout ---------- */
.cart-line { padding: 18px 0; border-bottom: 1px dashed var(--line); transition: background .2s; }
.cart-line:hover { background: linear-gradient(90deg, var(--gold-tint), transparent 60%); }
.cart-line img { border-radius: var(--radius); border-color: var(--gold-3); box-shadow: var(--elev-1); }
.cl-name { font-size: 1.06rem; }
.qty-box button { transition: background .15s, color .15s; }
.summary-row { padding: 9px 0; }
.summary-row.total {
  border-top: 2px solid var(--gold); font-family: var(--font-display); font-size: 1.3rem;
  letter-spacing: -.02em; padding-top: 15px;
}
.summary-card { border-color: var(--gold-3); overflow: hidden; box-shadow: var(--elev-2); }
/* The base rule keeps .summary-card sticky; this layer only adds the gold top hairline. */
.summary-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--gold-hair); }
.steps { gap: 10px; margin-bottom: 34px; }
.steps .st {
  gap: 9px; padding: 8px 17px 8px 9px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card-grad); box-shadow: var(--elev-1); font-weight: 600; color: var(--muted-dark);
}
.steps .st b { width: 27px; height: 27px; font-weight: 800; background: var(--paper-2); }
.steps .st.on { color: var(--ink); border-color: var(--gold-2); background: var(--gold-grad); box-shadow: var(--gold-glow); }
.steps .st.on b { background: rgba(255, 255, 255, .82); color: var(--ink); }
.steps .sep { width: 26px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--gold-3), var(--line-dark)); }
.pay-option {
  position: relative; border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--elev-1);
  transition: transform .2s var(--ease-out), box-shadow .24s, border-color .2s, background .2s;
}
.pay-option::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0;
  background: transparent; transition: background .2s;
}
.pay-option:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: var(--elev-2); }
.pay-option.sel { border-color: var(--gold-2); background: linear-gradient(135deg, var(--gold-tint), #fffdf6); box-shadow: var(--elev-1); }
.pay-option.sel::before { background: var(--gold-grad-deep); }
.pay-option input { width: 18px; height: 18px; margin-top: 3px; }
.pay-option b { font-size: .98rem; }
.pay-option .perks { font-weight: 800; }
.pay-bank { border-radius: var(--radius); box-shadow: var(--elev-1); background: linear-gradient(135deg, var(--gold-tint), #fffdf7); }
.utr-chip { border-style: solid; border-radius: 9px; box-shadow: var(--elev-1); font-weight: 700; }
.bank-offer { border-radius: var(--radius); box-shadow: var(--elev-1); background: linear-gradient(135deg, #fff9e9, #fff); font-size: .86rem; }
.pay-qr img { border-color: var(--gold-3); border-radius: var(--radius); box-shadow: var(--elev-1); }
.coupon-offers .offer { box-shadow: var(--elev-1); border-radius: var(--radius); transition: transform .18s var(--ease-out), box-shadow .2s; }
.coupon-offers .offer:hover { transform: translateY(-2px); box-shadow: var(--elev-2); }
.offer-code { border-radius: 8px; box-shadow: var(--elev-1); }
.coupon-toggle { gap: 12px; font-family: var(--font-display); font-size: 1.04rem; letter-spacing: -.01em; }
.coupon-toggle .ct-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: var(--gold-grad); box-shadow: var(--elev-1); }
.coupon-applied { border-radius: var(--radius); }
.save-ribbon { border-radius: var(--radius); box-shadow: var(--elev-1); }
.addr-view {
  border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: var(--radius);
  background: var(--card-grad); box-shadow: var(--elev-1); padding: 16px 18px; margin-top: 8px;
}
.addr-chip { box-shadow: var(--elev-1); transition: transform .18s var(--ease-out), border-color .18s, box-shadow .2s; }
.addr-chip:hover { transform: translateY(-2px); border-color: var(--gold-2); box-shadow: var(--elev-2); }
.addr-chip.on { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.otp-row input { border-radius: 12px; box-shadow: var(--elev-1); letter-spacing: .04em; }
.otp-row input:focus { box-shadow: 0 0 0 4px var(--gold-soft); }
.ship-bar .sb-track { height: 8px; box-shadow: inset 0 1px 3px rgba(120, 96, 40, .14); }
.ship-bar .sb-track i { position: relative; overflow: hidden; background: var(--gold-grad); box-shadow: 0 0 12px rgba(200, 162, 74, .5); }
@media (prefers-reduced-motion: no-preference) {
  .ship-bar .sb-track i::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent);
    animation: sb-sheen 2.6s ease-in-out infinite;
  }
}
@keyframes sb-sheen { from { transform: translateX(-100%); } 60%, to { transform: translateX(100%); } }
.co-eta { border-top-color: var(--gold-3); }
.co-eta .ce-ic { width: 32px; height: 32px; display: grid; place-items: center; flex: none; border-radius: 11px; background: var(--gold-grad); box-shadow: var(--elev-1); font-size: 1rem; }
.mini-trust li { display: inline-flex; align-items: center; gap: 6px; background: var(--card-grad); border: 1px solid var(--gold-3); border-radius: 999px; padding: 4px 11px; font-weight: 600; }
.pay-trust .pt-marks span { border-radius: 9px; box-shadow: var(--elev-1); }
.reward-note, .rp-lock, .of-reward { border-radius: var(--radius); box-shadow: var(--elev-1); }
.reward-panel { box-shadow: var(--elev-2); }
.ra-bal b { font-family: var(--font-display); letter-spacing: -.03em; }
.order-id-chip { border-radius: var(--radius); box-shadow: var(--elev-1); background: var(--card-grad); font-family: var(--font-display); letter-spacing: .04em; }
.of-card, .courier-card, .order-flow, .pay-verify, .pv-form, .ac-card { border-radius: var(--radius-lg); box-shadow: var(--elev-1); }
.ac-card { background: var(--card-grad); }
.wa-float { box-shadow: 0 12px 28px rgba(37, 211, 102, .45); transition: transform .18s var(--ease-out), box-shadow .2s; }
.wa-float:hover { transform: translateY(-2px) scale(1.05); }
.call-float { background: var(--ink-grad); box-shadow: var(--elev-2); }
.success-card .panel, .success-icon { box-shadow: var(--elev-2); }
.success-icon { background: linear-gradient(150deg, #2aa35c, var(--green)); }

/* ---------- Footer ---------- */
.site-footer { position: relative; margin-top: 84px; background: linear-gradient(180deg, var(--gold-tint), var(--paper-2) 68%, var(--paper-3)); }
.site-footer::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: var(--gold-hair); }
.site-footer h4 { color: var(--gold-deep); }
.site-footer .footer-grid > div:not(:first-child) a { transition: transform .16s var(--ease-out), color .16s; }
.site-footer .footer-grid > div:not(:first-child) a:hover { transform: translateX(3px); }
.pay-badges span { border-radius: 9px; box-shadow: var(--elev-1); background: var(--card-grad); }

/* ---------- Motion layer: one-time reveal, opt-out by design ----------
   JS arms these classes; nothing is hidden unless the script adds .rv-armed, so a
   browser with JS off renders the page exactly as before. */
.rv-armed { transition: opacity .6s ease, transform .6s var(--ease-out); transition-delay: var(--rv-d, 0s); }
.rv-armed.rv { opacity: 0; transform: translateY(18px); }
@media (prefers-reduced-motion: reduce) {
  .rv-armed { transition: none; }
  .rv-armed.rv { opacity: 1; transform: none; }
}

/* ==========================================================================
   Round N — header sign-in words, site-wide login/register popup, auth card
   ========================================================================== */
.hdr-word { font-size: .9rem; font-weight: 600; color: var(--muted-dark); white-space: nowrap; line-height: 1; }
/* The header carries a single sign-in affordance: the person icon, lined up with
   the saved and cart icons. Signed in, it grows into a pill naming the shopper. */
.icon-btn.hdr-acct { width: auto; min-width: 42px; height: 42px; gap: 8px; padding: 0 11px; border-radius: 999px; }
.icon-btn.hdr-acct:has(.hdr-word) { padding: 0 14px 0 10px; }
.icon-btn.hdr-acct .hdr-word { color: var(--gold-deep); font-weight: 700; }
/* Login and Create account appear in the drawer only — on desktop the icon is
   the way in, and the popup offers both tabs. */
.nav-auth { display: none; }
@media (max-width: 1023.98px) {
  .nav-auth { display: block; }
}
@media (max-width: 430px) {
  /* The greeting word drops out, so the button goes back to the plain icon square
     the saved and cart icons use — same size, same tap target. */
  .icon-btn.hdr-acct, .icon-btn.hdr-acct:has(.hdr-word) {
    min-width: 0; width: 38px; height: 38px; padding: 0; gap: 0;
  }
  .icon-btn.hdr-acct .hdr-word { display: none; }
}

.auth-card { color: var(--ink); }
.auth-head { text-align: center; margin: 0 0 16px; }
.auth-head .kicker { margin-bottom: 6px; }
.auth-h { font-size: clamp(1.35rem, 4.4vw, 1.68rem); margin: 0; }
.auth-tabs {
  display: flex; gap: 5px; padding: 5px; margin-bottom: 16px;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px;
}
.auth-tabs button {
  flex: 1 1 0; min-width: 0; min-height: 42px; padding: 8px 10px; cursor: pointer;
  border: 1px solid transparent; border-radius: 999px; background: none;
  font: inherit; font-size: .89rem; font-weight: 600; color: var(--muted-dark);
  transition: color .18s, background .18s, box-shadow .18s;
}
.auth-tabs button.on {
  background: var(--card-grad); border-color: var(--gold-3); color: var(--gold-deep);
  box-shadow: var(--elev-1);
}
.auth-methods { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.auth-methods button {
  flex: 1 1 96px; min-height: 42px; padding: 8px 10px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; background: var(--card);
  font: inherit; font-size: .83rem; font-weight: 600; color: var(--muted-dark);
  transition: color .18s, background .18s, border-color .18s;
}
.auth-methods button.on { border-color: var(--gold-2); background: var(--gold-soft); color: var(--gold-deep); }
.auth-pane > .auth-sub { font-size: .89rem; color: var(--muted); margin: -6px 0 16px; }
.auth-help { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; font-size: .82rem; color: var(--muted); margin: 12px 0 0; }
.auth-help a { color: var(--gold-deep); text-decoration: underline; }
.auth-help span { color: var(--line-dark); }
.auth-status { text-align: center; font-size: .86rem; margin: 12px 0 0; min-height: 1.15em; }
.auth-opt {
  float: right; font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin: 1px 0 0;
}
.auth-consent { display: flex; gap: 10px; align-items: flex-start; font-size: .84rem; color: var(--muted-dark); margin: 2px 0 18px; }
.auth-consent input { flex: none; width: 19px; height: 19px; margin-top: 1px; accent-color: var(--gold-2); }
.auth-consent a { color: var(--gold-deep); text-decoration: underline; }
.input-upper { text-transform: uppercase; letter-spacing: .07em; }

/* Popup shell: the register form is long, so the card scrolls instead of
   overflowing, and dvh keeps browser chrome from cutting off the submit button. */
.auth-modal {
  max-width: 520px; padding: clamp(18px, 4.4vw, 28px);
  max-height: calc(100dvh - 28px); overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.auth-modal .x { width: 40px; height: 40px; top: 8px; right: 8px; font-size: 1.2rem; z-index: 1; }
/* Short viewports (landscape phones, small windows): the intro copy goes so the
   fields and the sign-in button stay above the fold. */
@media (max-height: 620px) {
  .auth-modal { padding-top: 14px; }
  .auth-modal .auth-head { margin-bottom: 8px; }
  .auth-modal .auth-head .kicker, .auth-modal .auth-sub { display: none; }
}
/* Phones get a bottom sheet: full-width, thumb-reachable, safe-area aware. */
@media (max-width: 560px) {
  #authModal { padding: 0; align-items: flex-end; }
  .auth-modal {
    max-width: 100%; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-left: 0; border-right: 0; border-bottom: 0;
    max-height: calc(100dvh - 24px); padding-bottom: calc(22px + env(safe-area-inset-bottom));
  }
}
@media (hover: hover) {
  .auth-tabs button:hover:not(.on) { color: var(--gold-deep); }
  .auth-methods button:hover:not(.on) { border-color: var(--gold); color: var(--gold-deep); background: var(--gold-tint); }
}


/* ==========================================================================
   Round N — mobile + tablet alignment pass
   Phone/tablet-only overrides of the rules above, plus touch-target sizing.
   Desktop with a mouse keeps every behaviour it had.
   ========================================================================== */

/* 100vh is taller than the visible area once browser chrome appears, so the
   nav drawer, sign-in stage and popups ran past the bottom of the screen. */
@media (max-width: 1023.98px) {
  .main-nav { max-height: calc(100vh - var(--header-h)); max-height: calc(100dvh - var(--header-h)); }
}
.login-stage {
  min-height: calc(100vh - var(--header-h) - 30px);
  min-height: calc(100dvh - var(--header-h) - 30px);
}
.modal-card { max-height: calc(100vh - 36px); max-height: calc(100dvh - 36px); }
.pd-lightbox .lb-stage, .pd-lightbox .lb-stage img { max-height: 78vh; max-height: 78dvh; }

/* Notched phones put the home indicator over the floating buttons and toast. */
.wa-float {
  bottom: calc(18px + env(safe-area-inset-bottom));
  right: calc(18px + env(safe-area-inset-right));
}
.call-float { bottom: calc(82px + env(safe-area-inset-bottom)); }
.toast { bottom: calc(26px + env(safe-area-inset-bottom)); }
.pd-sticky { bottom: calc(14px + env(safe-area-inset-bottom)); }
@media (max-width: 620px) {
  /* The follow bar covers the whole bottom strip on phones; lift the WhatsApp
     pair above it so the buy button stays tappable. */
  body:has(.pd-sticky:not(.hidden)) .wa-float { bottom: calc(96px + env(safe-area-inset-bottom)); }
  body:has(.pd-sticky:not(.hidden)) .call-float { bottom: calc(160px + env(safe-area-inset-bottom)); }
}

/* Shop: the mega-menu measured 25px past the right edge at 345px, which
   sideways-scrolled the page and cut off the Silver column. */
@media (max-width: 620px) {
  .cat-drop {
    left: -20px; right: auto; width: min(calc(100vw - 42px), 420px);
    grid-template-columns: 1fr; max-height: calc(100dvh - 120px); overflow-y: auto;
  }
  /* One metal per line, and a thumb-sized category pill above the plate. */
  .cd-set.on { grid-template-columns: 1fr; }
  .fp-chip.cd-cat { padding: 10px 13px; }
  .fp-chip.cd-opt { padding: 10px 12px; }
  /* Grams are short words, so they take a thumb-sized pill without needing a line of their own. */
  .fp-chip.cd-w { padding: 8px 13px; font-size: .82rem; }
  /* The tool row is wider than any phone, and `justify-content: flex-end` pushed
     the item count off the left edge. Let it wrap onto its own lines instead. */
  .sb-tools { flex-wrap: wrap; row-gap: 8px; }
}
@media (max-width: 560px) {
  /* The funnel keeps its icon, count badge and caret; the two words it carries
     are what push this row past a thumb's reach. */
  .ft-text { display: none; }
  #filterToggle { padding: 8px 12px; flex: 0 0 auto; }
}
@media (max-width: 430px) {
  /* One line, no sideways escape: the item count steps back too — every band
     header already repeats it. */
  .sb-tools { flex-wrap: nowrap; }
  .sb-count { display: none; }
  .sb-switch { flex: 0 0 auto; }
  .sb-sort { flex: 1 1 auto; min-width: 0; }
  .sb-sort select { width: 100%; min-width: 0; }
}
@media (max-width: 480px) {
  /* A two-line control card can no longer read as a stadium pill. */
  .shop-bar { border-radius: var(--radius-lg); padding: 10px 12px; }
}

/* Cart: a `1fr` track is floored by its content's min-content width, so one
   long product name pushed the summary card out of the viewport. */
.cart-layout { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
@media (max-width: 940px) { .cart-layout { grid-template-columns: minmax(0, 1fr); } }
.cart-line { grid-template-columns: 84px minmax(0, 1fr) auto; }
.cart-line > div { min-width: 0; }
.cl-name, .cl-sub { overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .cart-line { grid-template-columns: 66px minmax(0, 1fr); gap: 12px; }
  .cart-line img { width: 66px; height: 66px; }
  .cl-right { grid-column: 2; text-align: left; }
}

.spec-list { grid-template-columns: minmax(78px, auto) minmax(0, 1fr); }
.spec-list dt, .spec-list dd { overflow-wrap: anywhere; }

/* Tablets in portrait fall between the 760px and 900px breakpoints. */
@media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; gap: 18px; } }

/* Controls that set their own font size below 16px make iOS zoom the whole
   page on focus; the sort select is the only one that did. */
@media (max-width: 760px) {
  .sb-sort select { font-size: 16px; padding: 7px 12px; }
  .fp-row { grid-template-columns: 1fr; gap: 6px; }
}
/* `appearance: none` strips the native arrow, which left the sort pill looking
   like a button; draw the caret back so it reads as a dropdown. */
.sb-sort select {
  cursor: pointer; padding-right: 26px;
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a8842f' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center;
}
@media (max-width: 480px) {
  .pay-option { flex-wrap: wrap; }
  .pay-option .perks { flex-basis: 100%; margin-left: 30px; text-align: left; }
}
@media (max-width: 370px) {
  .wrap { padding-left: 14px; padding-right: 14px; }
  .pd-thumbs img, .pd-thumbs video { width: 56px; height: 56px; }
}

/* Touch targets: where a genuinely larger box would break the line-up, an
   invisible ::after grows the tappable area instead of the visible one. */
@media (hover: none), (max-width: 760px) {
  .qty-box button { width: 40px; height: 40px; }
  .qty-box input { width: 46px; }
  .fp-close, .modal-card .x, .auth-modal .x { width: 40px; height: 40px; flex: 0 0 auto; }
  .fp-chip, .cat-pill, .cm-trigger, .sb-switch, .ac-chip, .cd-cat, .cd-opt, .pd-thumb, .pd-zoom,
  #filterToggle, .qty-box input { min-height: 40px; }
  .pc-body > a, .site-footer .footer-grid > div:not(:first-child) a { display: flex; align-items: center; min-height: 40px; }
  .stars-pick button { min-width: 40px; min-height: 40px; }
  .sb-switch input { width: 18px; height: 18px; }
  #filterToggle { min-width: 40px; }
  .order-flow > summary, .ra-hist > summary { min-height: 44px; }
  .an-close, .cl-remove, .disc-link, .icon-btn, .breadcrumbs a,
  .proof-item .pv-del, .cat-dot, .field > label { position: relative; }
  .an-close::after { content: ''; position: absolute; inset: -12px; }
  /* .pc-fav keeps its absolute top-right slot here too — a positioned box anchors ::after
     just as well, and making it relative dropped the heart onto the Save pill. */
  .pc-fav::after, .disc-link::before, .proof-item .pv-del::after { content: ''; position: absolute; inset: -10px; }
  .cl-remove::after { content: ''; position: absolute; inset: -11px -4px; }
  .icon-btn::after { content: ''; position: absolute; inset: -3px; }
  /* Inline links sitting in sentences (consent lines, phone numbers, prose) are
     only a text line tall; grow them vertically, never sideways, so the words
     either side keep their own taps. */
  p > a:not(.btn), small > a:not(.btn), .muted a:not(.btn), .prose a:not(.btn) { position: relative; }
  p > a:not(.btn)::after, small > a:not(.btn)::after, .muted a:not(.btn)::after, .prose a:not(.btn)::after { content: ''; position: absolute; inset: -10px -2px; }
  .prose a:not(.btn), .pay-bank a, .addr-change, .addr-manage, .rp-check { position: relative; }
  .prose a:not(.btn)::after, .pay-bank a::after { content: ''; position: absolute; inset: -11px 0; }
  .addr-change::after, .addr-manage::after { content: ''; position: absolute; inset: -9px -6px; }
  .rp-check { display: flex; align-items: center; gap: 8px; min-height: 44px; }
  .rp-check input[type=checkbox] { width: 20px; height: 20px; flex: 0 0 auto; }
  .breadcrumbs a::after { content: ''; position: absolute; inset: -12px -3px; }
  /* Labels sit above their field, so their target reaches down into the gap —
     no extra vertical space, no floated "optional" tag to break. */
  .field > label::after { content: ''; position: absolute; left: 0; right: 0; top: -6px; bottom: -14px; }
  /* Banner dots sit 20px apart, so their hit boxes are grown to tile exactly:
     any wider and a tap between two dots would always land on the later one. */
  .cat-dots { gap: 16px; }
  .cat-dot::after { content: ''; position: absolute; inset: -8px; }
}

/* Touch screens have no real hover, so a tap left the element parked in its
   hover position until something else was tapped. Movement stays for mice. */
@media (hover: none) {
  .product-card:hover, .product-card:hover .pc-media img, .pc-promo:hover, .pc-promo:hover .pcm-media img,
  .pc-promo:hover .pcm-go, .pd-gallery .pd-main:hover img, .pd-thumb:hover, .pd-thumb:hover img,
  .pd-zoom:hover, .weight-pills button:hover, .btn-gold:hover, .icon-btn:hover, .offer-card:hover,
  .category-pill:hover, .trust-item:hover, .cta-card:hover, .pd-ship li:hover, .stars-pick button:hover,
  .pay-option:hover, .coupon-offers .offer:hover, .addr-chip:hover, .wa-float:hover,
  .site-footer .footer-grid > div:not(:first-child) a:hover { transform: none; }
}

/* ==========================================================================
   Round O — old gold & silver valuation calculator
   Round BC — the calculator now wears the house royal: plum title bar, plum
   answer slab, gold kept for the one figure that matters.
   Form on the left, the slab with the answer on the right. Every number in it
   is derived from today's metal rate and the admin's buy-back margin.
   ========================================================================== */
.ov-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--elev-2); overflow: hidden;
}
.ov-head {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: clamp(18px, 2.4vw, 24px) clamp(18px, 3.2vw, 32px);
  background:
    radial-gradient(420px 170px at 92% -34%, rgba(233, 205, 134, .24), transparent 62%),
    var(--royal-band);
  color: #fdf6e6;
}
/* Gold hairline under the title bar — the same rule the page headers carry. */
.ov-head::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--gold-hair);
}
.ov-mark {
  flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center;
  font-size: 1.05rem; color: var(--royal);
  background: linear-gradient(135deg, #f6e3b4, var(--gold-2)); border-radius: 12px;
  box-shadow: 0 6px 18px rgba(23, 6, 17, .4);
}
.ov-title {
  font-family: var(--font-display); font-size: clamp(1.02rem, 2.1vw, 1.35rem);
  letter-spacing: .14em; text-transform: uppercase; margin: 0 0 4px; font-weight: 700;
}
.ov-sub { margin: 0; font-size: .86rem; line-height: 1.5; color: rgba(253, 246, 230, .78); max-width: 66ch }

.ov-body { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr) }
.ov-form { padding: clamp(20px, 3.2vw, 34px); min-width: 0 }

.ov-tabs {
  display: flex; gap: 5px; padding: 5px; margin-bottom: 20px; width: 100%;
  background: var(--royal-tint); border: 1px solid rgba(74, 21, 44, .12); border-radius: 999px;
}
.ov-tab {
  flex: 1 1 0; min-width: 0; min-height: 44px; padding: 8px 10px; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--royal); background: none;
  border: 1px solid transparent; border-radius: 999px;
  transition: background .2s, color .2s, box-shadow .2s;
}
.ov-tab.on {
  background: var(--royal-face); color: #fdf6e6;
  box-shadow: 0 6px 16px rgba(74, 21, 44, .28);
}
.ov-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px }
.ov-fields .field label { text-transform: uppercase; letter-spacing: .07em; font-size: .72rem }
/* The two buy-back lines differ only by rate, so they read as one stack of equal rows. */
.ov-bb { border: 1px solid rgba(74, 21, 44, .14); border-radius: var(--radius-sm); padding: 6px 12px 12px; margin: 0 0 18px; background: var(--royal-tint) }
.ov-bb-k { display: block; font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; color: var(--royal); font-weight: 700; margin: 0 0 6px; padding: 0 6px; background: var(--royal-tint) }
.ov-radio {
  display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 8px 12px;
  cursor: pointer; font-size: .9rem; font-weight: 600; color: var(--ink-2);
  border: 1px solid rgba(74, 21, 44, .12); border-radius: 11px; background: #fffdf9;
  transition: border-color .18s, background .18s, box-shadow .18s;
}
.ov-radio + .ov-radio { margin-top: 8px }
.ov-radio:hover { border-color: rgba(74, 21, 44, .32) }
.ov-radio span { line-height: 1.35 }
.ov-radio input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--royal) }
/* Whichever line is chosen pays differently, so the chosen row takes the gold. */
.ov-radio:has(input:checked) {
  border-color: var(--royal); color: var(--royal-deep);
  background: linear-gradient(135deg, rgba(233, 205, 134, .34), rgba(255, 253, 248, .92));
  box-shadow: inset 0 0 0 1px rgba(74, 21, 44, .2), 0 4px 12px rgba(74, 21, 44, .1);
}
.ov-fine { font-size: .76rem; color: var(--muted); margin: 14px 0 0; line-height: 1.55 }
.ov-go { margin-top: 2px }

.ov-out {
  position: relative; min-width: 0; display: flex; flex-direction: column; justify-content: center;
  padding: clamp(22px, 3.2vw, 36px); color: #fdf6e6;
  background:
    radial-gradient(120% 92% at 84% 4%, rgba(233, 205, 134, .22), transparent 58%),
    var(--royal-face);
}
/* Sheen over the slab; the content sits above it so text stays crisp. */
.ov-out::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(23, 6, 17, .3)); pointer-events: none }
.ov-out > * { position: relative; z-index: 1 }
.ov-idle { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px }
.ov-idle-ic { font-size: 1.5rem; color: var(--gold-3) }
.ov-idle b { font-size: 1.02rem }
.ov-idle p { margin: 0; font-size: .84rem; opacity: .85; max-width: 34ch }
.ov-ans { display: flex; flex-direction: column }
.ov-out-k { font-size: .95rem; font-weight: 600; color: rgba(253, 246, 230, .88) }
.ov-out-v {
  display: block; font-family: var(--font-display); font-weight: 700; line-height: 1.05;
  font-size: clamp(2.3rem, 6vw, 3.5rem); margin: 6px 0 0; overflow-wrap: anywhere;
  color: var(--gold-3); font-variant-numeric: tabular-nums;
}
/* The one number on the page is set in real gold, so plum never buries the answer. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .ov-out-v {
    background: var(--gold-grad); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
}
.ov-out-rule { display: block; width: 118px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--gold-3), rgba(233, 205, 134, 0)); margin: 16px 0 18px }
.ov-break { margin: 0; display: grid; font-size: .86rem }
.ov-break > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0 }
.ov-break > div + div { border-top: 1px solid rgba(253, 246, 230, .12) }
.ov-break dt { opacity: .92 }
.ov-break dd { margin: 0; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums }
.ov-basis { display: flex; align-items: center; gap: 8px; font-size: .76rem; margin: 18px 0 12px; opacity: .96 }
.ov-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #92f0b4; box-shadow: 0 0 0 3px rgba(146, 240, 180, .26) }
.ov-ctas { display: grid; gap: 10px }
.ov-out .btn { border-color: rgba(233, 205, 134, .45); background: rgba(253, 246, 230, .08); color: #fdf6e6 }
.ov-out .btn:hover { background: var(--gold-grad); color: var(--royal-deep); border-color: transparent }

/* Today's sheet — the same figures the calculator works from, no JS needed. */
.ov-sheet {
  display: grid; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--card); box-shadow: var(--elev-1); overflow: hidden;
}
.ov-sheet-row {
  display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr));
  gap: 12px; align-items: center; padding: 13px clamp(14px, 2vw, 22px);
  border-top: 1px solid var(--line); font-size: .92rem;
}
.ov-sheet-row:first-child { border-top: 0 }
.ov-sheet-row > span:first-child { font-weight: 600; color: var(--ink-2) }
.ov-sheet-row b { text-align: right; font-variant-numeric: tabular-nums; color: var(--royal-deep) }
/* A light plum wash on alternate rows keeps six lines readable without a ruled table. */
.ov-sheet-row:nth-child(even) { background: var(--royal-tint) }
.ov-sheet-head {
  background: var(--royal-band); color: #fdf6e6;
  font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
}
/* The rate columns sit right, exactly under the figures they head. */
.ov-sheet-head span:not(:first-child) { text-align: right; line-height: 1.35 }
/* Hidden on the wide sheet, where the plum head row already names both columns. */
.ov-sheet-k { display: none }
.ov-sheet-note { font-size: .8rem; color: var(--muted); margin: 12px 0 0; max-width: 78ch; line-height: 1.6 }
.faq-item + .faq-item { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 10px }

/* The lead form the estimate lands in, so the hand-off is visible. */
#sellLead.ov-hit { animation: ovHandoff 1.4s ease }
@keyframes ovHandoff {
  0%, 55% { box-shadow: 0 0 0 3px var(--gold-3) }
  100% { box-shadow: 0 0 0 3px rgba(233, 213, 160, 0) }
}
@media (max-width: 900px) {
  .ov-body { grid-template-columns: minmax(0, 1fr) }
  .ov-head { align-items: flex-start }
}
@media (max-width: 600px) {
  /* The two buy-back names are too long to head narrow columns on a phone, so the sheet
     becomes one card per purity and each figure carries its own caption. */
  .ov-sheet-head { display: none }
  .ov-sheet-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 13px 14px; font-size: .88rem }
  .ov-sheet-row > span:first-child { grid-column: 1 / -1; font-weight: 700 }
  .ov-sheet-k { display: block; text-align: right; font-size: .62rem; font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; line-height: 1.35 }
}
@media (max-width: 520px) {
  .ov-fields { grid-template-columns: minmax(0, 1fr) }
  .ov-out-v { font-size: clamp(2rem, 11vw, 2.7rem) }
  .ov-head { flex-direction: column; gap: 10px }
}
@media (prefers-reduced-motion: reduce) {
  #sellLead.ov-hit { animation: none }
  .ov-tab, .ov-radio { transition: none }
}

/* ==========================================================================
   Round O — my account dashboard
   ========================================================================== */
.ac-hero { padding: 30px 0 4px }
.ac-id {
  position: relative; overflow: hidden; display: grid; align-items: center; gap: 18px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--card-grad); box-shadow: var(--elev-2);
}
.ac-id::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: var(--gold-grad) }
.ac-mono {
  display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%;
  background: var(--gold-grad-deep); color: #fffdf6; box-shadow: var(--gold-glow);
  font-family: var(--font-display); font-size: 1.72rem; font-weight: 600; line-height: 1;
}
.ac-id-txt { min-width: 0 }
.ac-id-txt h1 { margin: 3px 0 0; font-family: var(--font-display); font-size: clamp(1.5rem, 3.6vw, 2.05rem); letter-spacing: -.02em }
.ac-id-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0 }
.ac-id-chips .chip { margin: 0 }
.ac-out { align-self: start; min-height: 40px }

.ac-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 14px }
.ac-stat {
  display: block; min-width: 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); box-shadow: var(--elev-1); color: var(--ink); text-decoration: none;
  transition: transform .18s var(--ease-out), box-shadow .18s, border-color .18s;
}
a.ac-stat:hover { transform: translateY(-2px); box-shadow: var(--elev-2); border-color: var(--gold-3) }
.ac-stat-k { display: block; font-size: .69rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-dark) }
.ac-stat-v { display: block; margin-top: 6px; font-family: var(--font-display); font-size: clamp(1.3rem, 3.1vw, 1.8rem); line-height: 1.14; color: var(--gold-deep) }
.ac-stat-s { display: block; margin-top: 5px; font-size: .78rem; color: var(--muted) }
/* A figure with nowhere to go is a tile, not a button — same card, no affordance. */
.ac-stat-plain { cursor: default }
.ac-flag {
  margin: 14px 0 0; padding: 9px 15px; border: 1px solid var(--gold-3); border-radius: 999px;
  background: var(--gold-tint); color: var(--gold-deep); font-size: .84rem;
}
.ac-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px }
.ac-act {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px;
  border: 1px solid var(--line-dark); border-radius: 999px; background: var(--card);
  color: var(--ink); font-size: .86rem; font-weight: 600; text-decoration: none; transition: .18s;
}
.ac-act:hover { border-color: var(--gold); background: var(--gold-tint); color: var(--gold-deep) }

.ac-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start }
.ac-main { min-width: 0 }
.ac-rail { min-width: 0 }
.ac-rail > .panel + .panel { margin-top: 16px }
.ac-main .sec-head { margin-bottom: 18px }
.ac-main .sec-head h2 { padding-bottom: 8px; font-size: clamp(1.25rem, 2.6vw, 1.55rem) }
.sec-head[id], #acRewards { scroll-margin-top: calc(var(--header-h) + 18px) }
@media (min-width: 1024px) {
  .ac-grid { grid-template-columns: minmax(0, 1fr) 336px; gap: 30px }
  /* The rail is its own grid row cell, so it can hold position while the order list scrolls. */
  .ac-rail { position: sticky; top: calc(var(--header-h) + 18px) }
}

/* The order line carries a third block of actions (Track, Invoice, details), which
   is wider than a phone row can hold — below tablet it drops under the item text
   instead of pushing the line out of the card. */
@media (max-width: 767px) {
  .ord-list .cart-line { grid-template-columns: 84px minmax(0, 1fr) }
  .ord-list .cl-right { grid-column: 2; text-align: left }
}
@media (max-width: 480px) {
  .ord-list .cart-line { grid-template-columns: 66px minmax(0, 1fr) }
}

.ac-empty {
  padding: 42px 24px; border: 1px dashed var(--line-dark); border-radius: var(--radius-lg);
  background: var(--card); text-align: center;
}
.ac-empty-ic {
  display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 14px;
  border: 1px solid var(--gold-3); border-radius: 50%; background: var(--gold-tint); color: var(--gold-deep);
}
.ac-empty b { display: block; font-family: var(--font-display); font-size: 1.3rem }
.ac-empty p { max-width: 48ch; margin: 8px auto 18px; font-size: .9rem }

.addr-card { transition: box-shadow .18s, border-color .18s }
/* The line thumbnail when an order item has no picture. */
.ord-noimg { width: 84px; height: 84px; border-radius: var(--radius-sm); background: var(--paper-2) }
@media (max-width: 480px) { .ord-noimg { width: 66px; height: 66px } }
.addr-card:hover { border-color: var(--gold-3); box-shadow: var(--elev-2) }
.addr-card > b { font-family: var(--font-display); font-size: 1.04rem }
.sec-card { background: var(--card-grad) }
.help-card h2 { margin: 6px 0 0; font-family: var(--font-display); font-size: 1.1rem }
.help-list { display: grid; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none }
.help-list li { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--gold-tint) }
.help-list a { font-size: .94rem; font-weight: 700; color: var(--gold-deep); text-decoration: none }
.help-list span { font-size: .75rem; color: var(--muted) }

@media (max-width: 900px) {
  .ac-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 560px) {
  .ac-id { grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 18px }
  .ac-mono { width: 52px; height: 52px; font-size: 1.45rem }
  .ac-out { grid-column: 1 / -1; justify-self: start }
  .ac-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .ac-act { justify-content: center }
}
@media (max-width: 400px) {
  .ac-stats { grid-template-columns: minmax(0, 1fr) }
  .ac-acts { grid-template-columns: minmax(0, 1fr) }
}
@media (prefers-reduced-motion: reduce) {
  .ac-stat, .ac-act, .addr-card { transition: none }
  a.ac-stat:hover { transform: none }
}

/* ==========================================================================
   Gift cards — the card artwork, the builder, the checkout tender
   One markup (partials/gift-card.php) is painted by shop.js in the builder
   preview, the buyer's account and the order-success reveal, so all three
   share these rules and can never drift apart.
   ========================================================================== */

/* Each wrap carries its own face plus the ink and hairline colours that read on
   it, so `.gc-card` needs no per-design overrides. `--gc-dep` stacks the two
   texture layers that give a card depth — engine-turned hairlines over a
   vignette that settles towards the bottom edge — and is tuned per wrap because
   a black vignette would muddy the pale marble one. */
.gc-royal {
  --gc-face: var(--royal-face);
  --gc-ink: #fdf6e6; --gc-cap: rgba(253, 246, 230, .62); --gc-gold: #e9cd86;
  --gc-line: rgba(233, 205, 134, .34);
  --gc-dep: radial-gradient(128% 120% at 50% 132%, rgba(0, 0, 0, .42), transparent 64%),
            repeating-linear-gradient(118deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 10px);
}
.gc-marble {
  --gc-face: linear-gradient(140deg, #fbf7ef 0%, #efe5d2 54%, #e3d6bc 100%);
  --gc-ink: #2a2114; --gc-cap: rgba(42, 33, 20, .58); --gc-gold: #a8842f;
  --gc-line: rgba(120, 96, 40, .26);
  --gc-dep: radial-gradient(128% 120% at 50% 132%, rgba(120, 96, 40, .18), transparent 64%),
            repeating-linear-gradient(118deg, rgba(120, 96, 40, .07) 0 1px, transparent 1px 10px);
}
.gc-midnight {
  --gc-face: linear-gradient(140deg, #101a34 0%, #1e2f56 48%, #0a1226 100%);
  --gc-ink: #f2f4fb; --gc-cap: rgba(242, 244, 251, .6); --gc-gold: #dcc48a;
  --gc-line: rgba(220, 196, 138, .32);
  --gc-dep: radial-gradient(128% 120% at 50% 132%, rgba(0, 0, 0, .46), transparent 64%),
            repeating-linear-gradient(118deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 10px);
}
.gc-festive {
  --gc-face: linear-gradient(140deg, #7d1420 0%, #ab2a33 48%, #4d0b14 100%);
  --gc-ink: #fff3e0; --gc-cap: rgba(255, 243, 224, .64); --gc-gold: #f0d08a;
  --gc-line: rgba(240, 208, 138, .34);
  --gc-dep: radial-gradient(128% 120% at 50% 132%, rgba(0, 0, 0, .4), transparent 64%),
            repeating-linear-gradient(118deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 10px);
}

.gc-card {
  position: relative; display: grid; gap: 13px; align-content: start;
  padding: 26px 26px 18px; border-radius: 22px; overflow: hidden;
  background-color: var(--royal-deep);
  background-image: var(--gc-dep, none), var(--gc-face, var(--royal-face));
  color: var(--gc-ink); border: 1px solid var(--gc-line);
  box-shadow: var(--elev-3, 0 20px 44px rgba(24, 16, 4, .24));
  min-height: 258px;
}
/* Foil edge along the top, a hairline frame set in from the edge like an engraved
   border, and a light sheen from the upper right corner. */
.gc-card > * { position: relative; z-index: 1; }
.gc-ribbon {
  position: absolute; z-index: 0; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, transparent, var(--gc-gold) 24%, #fff8e4 50%, var(--gc-gold) 76%, transparent);
  box-shadow: 0 1px 8px rgba(0, 0, 0, .3);
}
.gc-card::before {
  content: ""; position: absolute; z-index: 0; inset: 11px; border-radius: 15px; pointer-events: none;
  border: 1px solid var(--gc-line);
}
.gc-card::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 88% at 88% -14%, rgba(255, 255, 255, .2), transparent 54%);
}
/* House monogram, sat in the lower right as a watermark rather than a logo. */
.gc-mono {
  position: absolute; z-index: 0; right: 22px; bottom: -14px; pointer-events: none;
  font-family: var(--font-display); font-weight: 700; font-size: 4.6rem; line-height: 1;
  letter-spacing: .02em; color: var(--gc-ink); opacity: .07;
}

.gc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.gc-brand {
  font-family: var(--font-logo); font-weight: 700; font-size: 1rem;
  letter-spacing: .24em; text-transform: uppercase; color: var(--gc-gold);
}
.gc-kind { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gc-cap); font-weight: 700 }
.gc-value { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap }
.gc-amount { font-family: var(--font-display); font-size: clamp(1.85rem, 4.6vw, 2.4rem); line-height: 1.05; letter-spacing: -.035em }
.gc-left {
  font-size: .72rem; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  background: rgba(0, 0, 0, .18); border: 1px solid var(--gc-line); color: var(--gc-ink);
}
.gc-marble .gc-left { background: rgba(120, 96, 40, .1) }
.gc-quote {
  margin: 0; font-family: var(--font-display); font-style: italic; font-size: .92rem;
  line-height: 1.45; color: var(--gc-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.gc-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gc-p { display: grid; gap: 2px; font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gc-cap); font-weight: 700; min-width: 0 }
.gc-p b { font-family: var(--font-display); font-size: .96rem; letter-spacing: 0; text-transform: none; color: var(--gc-ink); overflow-wrap: anywhere }
.gc-code {
  display: grid; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--gc-line);
}
.gc-code-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.gc-code-cap { font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gc-cap); font-weight: 700 }
.gc-card .utr-chip {
  background: rgba(255, 255, 255, .9); border: 0; color: #2a2114;
  letter-spacing: .08em; font-weight: 800; box-shadow: none;
}
.gc-card .btn-ghost { background: rgba(255, 255, 255, .14); border-color: var(--gc-line); color: var(--gc-ink) }
.gc-card .btn-ghost:hover { background: rgba(255, 255, 255, .22) }
.gc-share { justify-self: start }
.gc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .74rem; color: var(--gc-cap) }
.gc-when::before { content: "\1F553\FE0E "; }
.gc-status { font-size: .7rem; letter-spacing: .04em }
.gc-card .gc-status.badge-green { background: rgba(31, 143, 78, .26); color: #d8f3e2 }
.gc-card .gc-status.badge-red { background: rgba(179, 55, 47, .3); color: #ffe0dc }
.gc-card .gc-status.badge-gold { background: rgba(0, 0, 0, .2); color: var(--gc-gold) }
.gc-marble .gc-status.badge-green { background: rgba(31, 143, 78, .16); color: var(--green) }
.gc-marble .gc-status.badge-red { background: rgba(179, 55, 47, .14); color: var(--red) }
.gc-marble .gc-status.badge-gold { background: var(--gold-soft); color: var(--gold-deep) }

/* The builder's live preview: nothing is filled in yet, so the empty card should
   still read as a card, not as a broken one. */
.gc-blank { box-shadow: var(--elev-2, 0 16px 34px rgba(24, 16, 4, .18)) }
.gc-blank .gc-amount { color: var(--gc-gold) }

/* ---------- Lists of cards ---------- */
.gc-mine { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(288px, 100%), 1fr)) }
.gc-mine .gc-card { transition: transform .24s var(--ease-out), box-shadow .3s }
.gc-mine .gc-card:hover { transform: translateY(-3px) }
.gc-reveal { margin-top: 20px }
.gc-reveal-head { margin-bottom: 14px }
.gc-acct-empty { padding: 18px 20px }

/* ---------- The builder ---------- */
.gc-form { padding: 26px 28px 28px; box-shadow: var(--elev-2) }
.gc-form > .kicker:first-child { margin-top: 0 }
.gc-next { margin: 30px 0 13px }
/* A numbered medallion instead of the editorial rule the shared kicker carries,
   so the three stages read as steps rather than labels. */
.gc-step { display: flex; align-items: center; gap: 10px; font-size: .74rem; letter-spacing: .17em; color: var(--gold-deep) }
.gc-step::before { content: none }
.gc-n {
  width: 27px; height: 27px; flex: none; display: grid; place-items: center; border-radius: 50%;
  font-family: var(--font-display); font-size: .84rem; font-weight: 700; font-style: normal;
  letter-spacing: 0; text-transform: none; color: var(--ink);
  background: var(--gold-grad); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 3px 9px rgba(168, 132, 47, .3);
}
.gc-chips { display: flex; flex-wrap: wrap; gap: 11px; margin-bottom: 18px }
.gc-chip {
  cursor: pointer; font: inherit; font-weight: 700; font-size: .97rem;
  min-height: 44px; padding: 11px 21px; border-radius: 999px; color: var(--ink);
  background: var(--card-grad); border: 1px solid var(--line); box-shadow: var(--elev-1);
  transition: border-color .16s, background .16s, box-shadow .2s, transform .16s;
}
.gc-chip:hover { border-color: var(--gold-2); transform: translateY(-1px); box-shadow: var(--elev-2) }
.gc-chip.on {
  background: var(--gold-grad); border-color: var(--gold-2);
  box-shadow: var(--gold-glow), inset 0 1px 0 rgba(255, 255, 255, .7);
}
.gc-custom .input { max-width: 210px; font-weight: 700; letter-spacing: .02em }
.gc-hint { font-size: .75rem; margin: 6px 0 0 }
.gc-designs { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(158px, 100%), 1fr)) }
.gc-design {
  cursor: pointer; font: inherit; text-align: left; padding: 12px 13px 14px; border-radius: var(--radius);
  background: var(--card-grad); border: 1px solid var(--line); color: var(--ink);
  box-shadow: var(--elev-1); position: relative;
  transition: border-color .16s, box-shadow .2s, transform .16s, background .16s;
}
.gc-design:hover { border-color: var(--gold-2); transform: translateY(-2px); box-shadow: var(--elev-2) }
.gc-design.on { border-color: var(--gold-2); background: var(--gold-tint); box-shadow: var(--elev-2) }
.gc-design.on .gc-swatches { outline: 2px solid var(--gold-2); outline-offset: 3px }
.gc-design.on::after {
  content: "\2713"; position: absolute; z-index: 2; top: 21px; right: 21px;
  width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%;
  font-size: .74rem; font-weight: 800; color: var(--ink);
  background: var(--gold-grad); box-shadow: 0 2px 8px rgba(120, 96, 40, .35), inset 0 1px 0 rgba(255, 255, 255, .7);
}
/* Each swatch is a miniature of the wrap it stands for: same face, same foil edge,
   same corner light, so the choice is honest. */
.gc-swatches {
  position: relative; display: block; height: auto; aspect-ratio: 8 / 5; overflow: hidden;
  border-radius: 11px; border: 1px solid rgba(120, 96, 40, .22);
  background-color: var(--royal-deep); background-image: var(--gc-dep, none), var(--gc-face);
  box-shadow: var(--elev-1);
}
.gc-swatches::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--gc-gold) 24%, #fff8e4 50%, var(--gc-gold) 76%, transparent);
}
.gc-swatches::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 88% at 88% -14%, rgba(255, 255, 255, .22), transparent 54%);
}
.gc-design b { display: block; font-family: var(--font-display); font-size: .9rem; letter-spacing: -.01em; margin-top: 10px }
.gc-design small { display: block; font-size: .72rem; color: var(--muted); line-height: 1.4; margin-top: 2px }
.gc-count { font-size: .72rem; text-align: right; margin: 6px 0 0 }
.gc-err { margin: 12px 0 0 }
.gc-err:not(.hidden) { display: block }
.gc-preview-wrap { display: grid; gap: 14px; position: sticky; top: calc(var(--header-h) + 18px) }
.gc-preview-wrap .kicker { margin: 0; color: var(--gold-deep) }
.gc-preview-wrap #giftPreview > * { animation: gcIn .28s ease both }
.gc-preview-wrap .btn { margin-top: 2px }
@keyframes gcIn { from { opacity: .5; transform: translateY(-4px) } to { opacity: 1; transform: none } }

/* Numbered stages rather than icons on the four-step row. */
.gc-how .t-ic {
  font-family: var(--font-display); font-size: 1.18rem; font-weight: 700; color: var(--ink);
  background: var(--gold-grad); border-color: var(--gold-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), var(--elev-1);
}

/* ---------- Balance checker + owned cards ---------- */
.gc-two { display: grid; gap: 22px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start }
.gc-two > .panel { box-shadow: var(--elev-2) }
.gc-two h2 { font-size: 1.2rem; margin: 6px 0 12px }
.gc-check-row { display: flex; gap: 10px }
.gc-check-row .input { text-transform: uppercase; letter-spacing: .06em; min-height: 46px }
.gc-check-row .btn { min-height: 46px; flex: none }
.gc-check-out { margin: 10px 0 0; min-height: 1.2em; font-size: .84rem }
.gc-check-out:not(:empty) { color: var(--gold-deep); font-weight: 600 }

/* ---------- Bag + checkout ---------- */
.cart-line.is-gift { border-color: var(--gold-3) }
/* The bag's thumbnail of a card is the wrap itself, cut from the same tokens as the full
   card — face, foil edge, monogram — so the bag, the review and the order row all show the
   wrap the buyer actually picked, and a fifth wrap would need no artwork. */
.gc-mini {
  position: relative; overflow: hidden;
  width: 84px; height: 84px; border-radius: 14px;
  background-color: var(--royal-deep);
  background-image: var(--gc-dep, none), var(--gc-face, var(--royal-face));
  border: 1px solid var(--gc-line, var(--gold-3));
  box-shadow: var(--elev-2);
}
.gc-mini::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 4px;
  background: linear-gradient(90deg, transparent, var(--gc-gold) 24%, #fff8e4 50%, var(--gc-gold) 76%, transparent);
}
.gc-mini::after {
  content: "PMJ"; position: absolute; right: 7px; bottom: 2px;
  font-family: var(--font-display); font-weight: 700; font-size: .78rem; letter-spacing: .05em;
  color: var(--gc-gold, var(--gold-2)); opacity: .9;
}
@media (max-width: 480px) { .gc-mini { width: 66px; height: 66px } .gc-mini::after { font-size: .68rem } }
.cl-one {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-width: 62px; height: 34px; padding: 0 11px; font-size: .76rem; font-weight: 700;
  color: var(--gold-deep); background: var(--gold-tint); border: 1px solid var(--gold-3); border-radius: var(--radius-sm);
}
.gift-panel { border-color: var(--gold-2) }
.gp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap }
.gp-head .kicker { margin: 0 }
.gp-state { font-size: .8rem; color: var(--muted) }
.gp-box { display: flex; gap: 9px; margin-top: 12px }
.gp-box .input { text-transform: uppercase; letter-spacing: .06em }
.gp-applied {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 12px; padding: 10px 13px; font-size: .86rem;
  background: var(--gold-tint); border: 1px dashed var(--gold-2); border-radius: var(--radius-sm);
}
.gp-applied button { background: none; border: 0; color: var(--red); cursor: pointer; font: inherit; font-size: .82rem; text-decoration: underline }
.gp-use { margin-top: 12px }
.gp-check { display: flex; align-items: center; gap: 10px; font-size: .9rem; font-weight: 600; cursor: pointer }
.gp-check input { width: 18px; height: 18px; accent-color: var(--gold); flex: none }
.gp-amount { margin-top: 10px; padding-left: 28px }
.gp-terms { margin: 12px 0 0; font-size: .74rem; color: var(--muted) }

@media (max-width: 940px) {
  .gc-preview-wrap { position: static }
  .gc-two { grid-template-columns: minmax(0, 1fr) }
}
@media (max-width: 620px) {
  .gc-card { padding: 20px 20px 15px; min-height: 0 }
  .gc-card::before { inset: 9px; border-radius: 12px }
  .gc-mono { font-size: 3.3rem; right: 16px; bottom: -16px }
  .gc-form { padding: 22px 20px 24px }
  /* Four wraps read as a rack of card fronts, not a queue of tall tiles. */
  .gc-designs { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .gc-people { grid-template-columns: minmax(0, 1fr) auto }
  .gc-mine { grid-template-columns: minmax(0, 1fr) }
  .gp-amount { padding-left: 0 }
}
@media (max-width: 430px) {
  .gc-amount { font-size: 1.6rem }
  .gc-chip { padding: 11px 17px; font-size: .92rem }
  .gc-card .utr-chip { letter-spacing: .04em }
}
@media (hover: none) {
  .gc-chip:hover, .gc-design:hover, .gc-mine .gc-card:hover { transform: none }
}
@media (prefers-reduced-motion: reduce) {
  .gc-chip, .gc-design, .gc-mine .gc-card, .gc-preview-wrap #giftPreview > * { transition: none; animation: none }
  .gc-chip:hover, .gc-design:hover, .gc-mine .gc-card:hover { transform: none }
}
@media print {
  .gc-card { box-shadow: none; break-inside: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact }
  .gc-share, .gc-card .btn { display: none }
}

/* ================= Round W — editorial pages, documents, error stage ================= */

/* A prose column that reads like a printed catalogue page: one measure, one rhythm,
   and a gold rule under each heading instead of a bare serif line. */
.prose { font-size: 1rem; line-height: 1.72; color: var(--ink-2); }
.prose > p { margin: 0 0 1.15em; }
.prose > p:first-of-type { font-size: 1.06rem; color: var(--ink-3); }
.prose h2 {
  font-size: clamp(1.42rem, 2.5vw, 1.85rem); letter-spacing: -.022em; margin: 2em 0 .7em;
  padding-bottom: .42em; position: relative;
}
.prose h2::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 52px; height: 2px;
  border-radius: 2px; background: var(--gold-grad);
}
.prose h3 { font-size: 1.16rem; letter-spacing: -.015em; margin: 1.7em 0 .5em; color: var(--ink); }
.prose ul, .prose ol { margin: 0 0 1.25em; padding-left: 0; list-style: none; counter-reset: pnum; }
.prose li { position: relative; padding-left: 26px; margin-bottom: .62em; }
.prose ul > li::before {
  content: ""; position: absolute; left: 6px; top: .62em; width: 7px; height: 7px;
  border-radius: 2px; transform: rotate(45deg);
  background: linear-gradient(135deg, var(--gold-3), var(--gold-2));
}
.prose ol > li { counter-increment: pnum; }
.prose ol > li::before {
  content: counter(pnum); position: absolute; left: 0; top: .08em; width: 20px; height: 20px;
  border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display);
  font-size: .72rem; font-weight: 700; color: var(--ink); background: var(--gold-grad);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}
.prose blockquote {
  border-left: 0; position: relative; margin: 1.6em 0; padding: 20px 24px 20px 30px;
  font-family: var(--font-display); font-size: 1.14rem; line-height: 1.5; color: var(--ink);
  background: var(--card-grad); border-radius: var(--radius-lg); box-shadow: var(--elev-1);
}
.prose blockquote::before {
  content: ""; position: absolute; left: 14px; top: 16px; bottom: 16px; width: 3px; border-radius: 3px;
  background: var(--gold-grad);
}
.prose .fnote { font-size: .78rem; color: var(--muted); margin: -.5em 0 1.4em; }
.prose .prose-trust { margin: 28px 0 16px; }
.prose-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.prose-wide { max-width: none; }
.wrap-narrow, .prose-narrow { max-width: 880px; }
.blog-hero {
  border: 0; border-radius: var(--radius-lg); margin: 0 0 26px;
  box-shadow: var(--elev-2), 0 0 0 1px var(--gold-3);
}
.stack > * + * { margin-top: 18px; }
.form-status { margin: 12px 0 0; font-size: .88rem; min-height: 1.2em; }

/* Numeral medallions instead of pictographs on every trust row. */
.trust-item .t-ic.t-num {
  font-family: var(--font-display); font-size: 1.16rem; font-weight: 700; color: var(--ink);
  background: var(--gold-grad); border-color: var(--gold-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), var(--elev-1);
}

/* Documents: a plaque with a royal header row, never a grid of hairlines. */
.doc-table, .num-table {
  width: 100%; border-collapse: separate; border-spacing: 0; margin: 1.3em 0; font-size: .92rem;
  background: var(--card-grad); border: 1px solid var(--gold-3); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--elev-1);
}
.doc-table th {
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: #f3e6c8;
  background: var(--royal-band); padding: 12px 16px; text-align: left; font-weight: 700; border: 0;
}
.doc-table td, .num-table td { padding: 12px 16px; border: 0; border-top: 1px solid var(--line); text-align: left; }
.num-table td:first-child { color: var(--ink-3); }
.num-table td:last-child {
  text-align: right; font-weight: 700; color: var(--gold-deep);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.doc-table td b { color: var(--ink); }

/* Direct lines: a marker rather than a pictograph in front of each label. */
.contact-line b::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 2px;
  transform: rotate(45deg); background: var(--gold); margin-right: 9px; vertical-align: 1px;
}
.contact-hours { font-size: .8rem; margin: 16px 0 0; }

/* Policy index: the section the reader is in is the only one in gold. */
.policy-index { position: sticky; top: 96px; }
.policy-index .summary-row { padding: 9px 0; border-bottom: 1px dashed var(--line); }
.policy-index .summary-row:last-child { border-bottom: 0; }
.policy-index a { font-weight: 500; color: var(--muted-dark); transition: color .16s; }
.policy-index a:hover { color: var(--gold-deep); }
.policy-index a.on { color: var(--gold-deep); font-weight: 700; }

/* ---------- Error stage: the same royal band, with a framed plaque on it ---------- */
.err-body {
  position: relative; overflow: hidden; min-height: 100vh; display: grid; place-items: center;
  padding: 34px 18px;
  background:
    radial-gradient(820px 330px at 84% -22%, rgba(233, 205, 134, .26), transparent 62%),
    radial-gradient(560px 300px at 6% 122%, rgba(233, 205, 134, .12), transparent 62%),
    var(--royal-band);
}
.err-body::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(118deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 11px);
  -webkit-mask-image: linear-gradient(196deg, rgba(0, 0, 0, .85), transparent 58%);
  mask-image: linear-gradient(196deg, rgba(0, 0, 0, .85), transparent 58%);
}
.err-card {
  position: relative; z-index: 1; overflow: hidden; width: 100%; max-width: 640px; text-align: center;
  padding: clamp(34px, 5vw, 56px) clamp(22px, 4.4vw, 48px) clamp(30px, 4vw, 44px);
  border-radius: var(--radius-xl); background: var(--card-grad);
  box-shadow: var(--elev-3), 0 0 0 1px rgba(233, 205, 134, .55);
}
.err-card::before {
  content: ""; position: absolute; inset: 12px; pointer-events: none;
  border-radius: calc(var(--radius-xl) - 8px); border: 1px solid rgba(200, 162, 74, .3);
}
.err-mark {
  position: absolute; right: 18px; bottom: -14px; line-height: 1; pointer-events: none;
  font-family: var(--font-logo); font-weight: 800; font-size: 4.4rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gold-deep); opacity: .07;
}
.err-code {
  position: relative; font-family: var(--font-display); font-weight: 600; line-height: .9;
  font-size: clamp(3.4rem, 11vw, 5.2rem); letter-spacing: -.04em; color: var(--gold-2); margin: 0 0 8px;
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .err-code {
    background: var(--gold-grad); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.err-card h1 { position: relative; font-size: clamp(1.5rem, 3.4vw, 2.1rem); letter-spacing: -.02em; margin: 0 0 12px; }
.err-note { position: relative; color: var(--muted-dark); font-size: .96rem; line-height: 1.6; max-width: 46ch; margin: 0 auto 24px; }
.err-debug {
  position: relative; text-align: left; white-space: pre-wrap; max-height: 180px; overflow: auto;
  font-size: .74rem; color: var(--muted-dark); margin: 0 auto 22px; padding: 12px 14px;
  background: var(--gold-tint); border: 1px dashed var(--gold-2); border-radius: var(--radius-sm);
}
.err-cta { position: relative; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 0; }
@media (max-width: 430px) {
  .err-card { padding: 28px 20px 26px }
  .err-mark { font-size: 3.1rem; right: 12px; bottom: -12px }
  .prose h2 { font-size: 1.34rem }
  .contact-line { font-size: .88rem }
}
@media (prefers-reduced-motion: reduce) {
  .policy-index a, .trust-item .t-ic.t-num { transition: none }
}

/* ================= Round W2 — panel headings, form fine print, FAQs ================= */
.panel > h2.panel-title {
  font-family: var(--font-display); font-weight: 600; font-size: 1.3rem;
  letter-spacing: -.022em; line-height: 1.2; margin: 0 0 14px;
}
.form-fine { font-size: .78rem; color: var(--muted); line-height: 1.55; margin: 12px 0 0; }

/* expandable FAQ rows */
.disc-body p { font-size: .88rem; color: var(--muted); line-height: 1.62; margin: 0; }
.faq-item { padding: 10px 0; }
.faq-item:first-child { padding-top: 0 }
.disc-link { font-family: var(--font-display); font-size: .98rem; letter-spacing: -.012em; }
.cart-layout aside > .panel + .panel { margin-top: 18px; }

/* small print + section heads inside account panels */
.fine-print { font-size: .84rem; color: var(--muted); line-height: 1.6; margin: 12px 0 0; }
.fine-print a { text-decoration: underline; text-underline-offset: 3px; }
.sec-head-inset { margin: 30px 0 16px; }
.gc-acct-empty p:first-child { margin: 0 0 12px; }
.reward-acct .ra-note { font-size: .84rem; color: var(--muted); line-height: 1.6; margin: 0 0 14px; }

/* ================= Round W3 — till spacing ================= */
.panel-roomy { padding: 18px 22px; }
.skel-row { height: 84px; }
.skel-row + .skel-row { margin-top: 12px; }
.skel-block { height: 120px; }
.summary-card .btn-block + .btn-block { margin-top: 10px; }
.summary-card > .btn-block:first-of-type { margin-top: 16px; }
.summary-card .fine-print { font-size: .78rem; }
.btn-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }
.success-card .order-slot { margin-top: 26px; text-align: left; }
.skel-lg { height: 160px; }
.success-card .fine-print { margin-top: 20px; }
.wrap-till { max-width: 720px; }
.input-caps { text-transform: uppercase; }
.result-slot { margin-top: 22px; }
.fine-print-center { font-size: .84rem; color: var(--muted); line-height: 1.6; text-align: center; max-width: 48ch; margin: 20px auto 0; }
.gst-inline { display: flex; gap: 8px; align-items: center; }
.gst-inline .input { flex: 1 1 auto; min-width: 0; }
.gst-inline .btn { flex: 0 0 auto; }
#gstResult { font-size: .8rem; margin: 6px 0 0; min-height: 1.1em; }

/* status glyphs drawn in CSS, not in the markup */
.pc-price .muted { font-size: .74rem; }
.pc-stock { display: flex; align-items: center; gap: 6px; }
.pc-stock::before { content: '✓'; font-weight: 800; font-size: .72rem; }
.pc-stock.low::before { content: '▲'; font-size: .58rem; }

.mini-trust li::before { content: '✓'; color: var(--gold-deep); font-weight: 800; }

/* header badges, flash bar and footer blurb */
.cart-badge { display: none; }
.cart-badge.is-on { display: flex; }
.flash-bar { padding-top: 14px; }
.flash-bar .panel { border-left: 3px solid var(--green); }
.flash-bar .panel.is-error { border-left-color: var(--red); }
.foot-blurb { max-width: 34ch; }
.modal-body h3 { margin-bottom: 4px; }
.modal-sub { margin-bottom: 14px; }
.section-lead { padding-top: 26px; }
.section-flush { padding-top: 0; }
.section-snug { padding-top: 8px; }
.wrap-doc { max-width: 900px; }

/* product page spacing + status glyphs */
.section-open { padding-top: 34px; }
.pd-layout > *, .cart-layout > * { min-width: 0; }
/* Protruding corner badges add a few px of inline overflow on narrow screens.
   clip (not hidden) so no scroll container is created and the sticky header keeps working. */
html { overflow-x: clip; }
.err-stage { width: 100%; }
.err-card { margin-inline: auto; }
.pd-zoom svg { vertical-align: -2px; }
.wa-float svg { display: block; }
.pd-info > .rating-summary { margin-bottom: 12px; }
.pd-choice { margin-top: 16px; }
.size-hint { font-size: .76rem; color: var(--muted); margin: 8px 0 0; }
.making-note { font-size: .8rem; color: var(--muted); margin: 12px 0 0; }
.pd-breakup { margin-top: 22px; }
.pd-dims { margin-top: 18px; font-size: .85rem; color: var(--muted); }
#rvStatus { margin: 10px 0 0; }
.pd-stock { display: flex; align-items: center; gap: 6px; }
.pd-stock::before { content: '✓'; font-weight: 800; font-size: .78rem; }
.pd-stock.low::before { content: '▲'; font-size: .62rem; }
.disc-body ul { list-style: none; margin: 8px 0 0; padding: 0; font-size: .85rem; color: var(--muted); line-height: 1.6; }
.disc-body ul li { position: relative; padding-left: 16px; }
.disc-body ul li::before { content: ''; position: absolute; left: 2px; top: .55em; width: 5px; height: 5px; background: var(--gold-2); transform: rotate(45deg); }

/* checkout flow spacing */
.co-block { margin-bottom: 22px; }
#upiIdField { margin-top: 14px; }
.pay-bank > p:first-child { margin: 0 0 10px; }
.pay-bank > p:first-child a { text-decoration: underline; text-underline-offset: 3px; }
.pay-bank .utr-field { margin: 12px 0 0; }
.panel > p.err-text { margin: 0; }
.otp-row-wrap { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
#otpStatus { margin: 10px 0 0; }
.otp-done-note { font-size: .92rem; }
.skel-line { height: 64px; }
.skel-line + .skel-line { margin-top: 8px; }
.skel-tall { height: 150px; }
#coItems .skeleton + .skeleton { margin-top: 10px; }
#checkoutError { font-size: .9rem; margin-top: 14px; }
#coPlaceBtn { margin-top: 10px; }
.legal-note { font-size: .76rem; color: var(--muted); text-align: center; margin: 12px 0 0; }
.rate-live { font-size: .76rem; margin: -2px 0 12px; }
.summary-note { font-size: .76rem; color: var(--muted); margin: 14px 0 0; }
#coItems .skeleton { height: 72px; }

/* account page */
[data-form-status] { margin: 10px 0 0; font-size: .85rem; min-height: 1.2em; }
.ord-list.roomy { padding: 12px 18px; }
.cl-name .chip { margin-left: 6px; }
.pv-status { margin: 10px 0 0; font-size: .84rem; }
.field.flush { margin: 0; }
.input-compact { padding: 6px; }
.ab-intro { margin: 0 0 16px; }
.ac-block { margin-bottom: 20px; }
.prof-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.inline-form { display: inline; }
.btn-ghost.danger { color: var(--red); }
.btn-ghost.danger:hover { color: var(--red); }
.row-between { justify-content: space-between; align-items: flex-start; }
.ac-subhead { font-size: 1.15rem; margin: 6px 0 0; }
.auth-note { font-size: .84rem; color: var(--muted); line-height: 1.6; margin: 8px 0 14px; }
.hint-mini { font-size: .75rem; }
.addr-card > .chip { margin-left: 8px; }
.pay-pending-hint { margin: 0 0 10px; }

/* ==========================================================================
   Round X — Shop page: the royal vault
   A storefront-shell identity (body.shop-scope, set for /shop and /mmtc) so every
   other page keeps the look it has: a taller plum band with a gold ornament,
   engraved category plaques parted by diamond rules, a gilded filter bar once it
   pins, and cards that strike up a gold frame inside the border as the pointer
   enters. MMTC wears the same shell because it is the same shop — only the shelf
   is separate.
   ========================================================================== */

/* The plum light from the header band carries a little way down the page. */
body.shop-scope main {
  background: radial-gradient(1320px 520px at 50% -140px, rgba(74, 21, 44, .06), transparent 72%);
}
body.shop-scope .page-head { padding: clamp(62px, 7.2vw, 94px) 0 clamp(48px, 5.4vw, 66px); }
/* Two gold hairlines parted for the house diamond, set under the heading. */
body.shop-scope .page-head > .wrap::after {
  content: "\25C6"; display: block; margin: 28px 0 0; text-align: center;
  font-size: .62rem; line-height: 1; color: var(--gold-3);
  background:
    linear-gradient(90deg, transparent, rgba(233, 213, 160, .68) 42%, transparent) left center / 45% 1px no-repeat,
    linear-gradient(90deg, transparent, rgba(233, 213, 160, .68) 58%, transparent) right center / 45% 1px no-repeat;
}

body.shop-scope .shop-bar { position: relative; }
body.shop-scope .filter-panel { border-color: rgba(233, 213, 160, .9); box-shadow: var(--elev-3); }

/* Category plaques, each one set off the last by a diamond rule. */
body.shop-scope .shop-cat { margin-bottom: 52px; }
body.shop-scope .shop-cat + .shop-cat { position: relative; margin-top: 26px; }
body.shop-scope .shop-cat + .shop-cat::before {
  content: ""; position: absolute; top: -35px; left: 50%; transform: translateX(-50%);
  width: min(560px, 78%); height: 1px;
  background:
    linear-gradient(90deg, transparent, rgba(200, 162, 74, .55) 42%, transparent) left center / 45% 1px no-repeat,
    linear-gradient(90deg, transparent, rgba(200, 162, 74, .55) 58%, transparent) right center / 45% 1px no-repeat;
}
body.shop-scope .shop-cat + .shop-cat::after {
  content: "\25C6"; position: absolute; top: -40px; left: 50%; transform: translateX(-50%);
  font-size: .6rem; line-height: 1; color: var(--gold);
}
body.shop-scope .cat-band { box-shadow: var(--elev-3), 0 0 0 7px rgba(74, 21, 44, .055); }
body.shop-scope .cat-band-copy { padding: 34px 38px; }
body.shop-scope .cat-band-name::after {
  content: ""; display: block; width: 68px; height: 2px; margin-top: 14px; border-radius: 2px;
  background: var(--gold-grad);
}
body.shop-scope .cat-band-count {
  background: var(--gold-grad); color: var(--ink); border: 1px solid var(--gold-2);
  box-shadow: var(--gold-glow), inset 0 1px 0 rgba(255, 255, 255, .7);
}

/* Cards: the bed darkens towards the rim like a jewellery box, and a hairline
   frame strikes up inside the border on entry. */
body.shop-scope .grid-4 { gap: 26px; }
body.shop-scope .product-card, body.shop-scope .pc-promo { border-color: rgba(233, 213, 160, .8); }
body.shop-scope .product-card::after {
  content: ""; position: absolute; inset: 9px; z-index: 4; pointer-events: none;
  border: 1px solid rgba(200, 162, 74, .34); border-radius: calc(var(--radius-lg) - 6px);
  opacity: 0; transition: opacity .3s ease;
}
body.shop-scope .product-card:hover::after { opacity: 1; }
body.shop-scope .pc-media {
  background: radial-gradient(126% 98% at 50% 6%, #fffdf8 0%, var(--paper-2) 54%, rgba(74, 21, 44, .13) 100%);
}
@media (max-width: 620px) {
  body.shop-scope .shop-cat { margin-bottom: 40px; }
  body.shop-scope .cat-band-copy { padding: 20px 20px 24px; }
  body.shop-scope .grid-4 { gap: 18px; }
}

/* ==========================================================================
   Round Y — Checkout: the direct-bank desk
   This is the plate a customer reads before wiring a large sum, so it is set as
   one engraved card: a royal header carrying the exact amount, details parted by
   hairlines in tabular figures, the QR framed like a certificate. The offer line
   quotes rupees rather than a percentage, because rupees are what they save.
   ========================================================================== */
.bank-offer {
  display: flex; align-items: center; gap: 11px; margin: 14px 0 0; padding: 12px 16px;
  border: 1px solid rgba(200, 162, 74, .42); border-radius: var(--radius-lg);
  background: linear-gradient(128deg, #fffaf0 0%, var(--gold-tint) 100%);
  box-shadow: var(--elev-1), inset 0 1px 0 rgba(255, 255, 255, .85);
  font-size: .9rem; line-height: 1.45; color: var(--ink);
}
.bank-offer .bo-gem {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; background: var(--royal-band);
  color: var(--gold-3); font-size: .7rem; box-shadow: 0 2px 8px rgba(74, 21, 44, .28);
}
.bank-offer b {
  font-family: var(--font-display); font-size: 1.08rem; font-weight: 700; color: var(--gold-deep);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes bo-pop { from { transform: translateY(3px) scale(.97); opacity: .45 } to { transform: none; opacity: 1 } }
  .bank-offer b.is-new { animation: bo-pop .42s var(--ease-out); }
}

.pay-bank {
  margin: 14px 0 16px; padding: 0; overflow: hidden;
  border: 1px solid rgba(233, 213, 160, .95); border-radius: var(--radius-lg);
  background: var(--card-grad); box-shadow: var(--elev-2); font-size: .9rem;
}
.pay-bank .pb-head {
  position: relative; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px;
  padding: 15px 20px 16px; background: var(--royal-band); color: #fff8ea;
}
.pay-bank .pb-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--gold-hair) }
.pay-bank .pb-cap { font-size: .66rem; letter-spacing: .17em; text-transform: uppercase; font-weight: 600; color: rgba(233, 213, 160, .8) }
.pay-bank .pb-amt {
  font-family: var(--font-display); font-size: clamp(1.45rem, 4.4vw, 1.95rem); font-weight: 700;
  letter-spacing: -.01em; line-height: 1.12; color: #f6e2b0; font-variant-numeric: tabular-nums;
}
.pay-bank .pb-modes { margin-left: auto; font-size: .66rem; letter-spacing: .15em; text-transform: uppercase; font-weight: 600; color: rgba(255, 248, 234, .6) }
.pay-bank .pb-lead { margin: 0; padding: 16px 20px 4px; font-size: .9rem; line-height: 1.62; color: var(--ink-2) }
.pay-bank .pb-lead a { color: var(--gold-deep); font-weight: 600; text-underline-offset: 3px }
.pay-bank .bank-grid { display: grid; grid-template-columns: 1fr auto; gap: 18px 22px; align-items: start; padding: 12px 20px 4px }
.pay-bank .pb-rows { display: block; margin: 0 }
.pay-bank .pb-row {
  display: grid; grid-template-columns: 118px 1fr; gap: 4px 14px; align-items: center;
  padding: 11px 0; border-top: 1px solid var(--line);
}
.pay-bank .pb-row:first-child { border-top: 0 }
.pay-bank .pb-row dt {
  margin: 0; color: var(--muted); font-size: .67rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 600;
}
.pay-bank .pb-row dd { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; font-weight: 600 }
.pay-bank .pb-word { color: var(--ink); font-weight: 700; letter-spacing: .012em }
/* The account details are read aloud over the phone as much as copied, so they sit
   as plain engraved figures here — the boxed .utr-chip plate belongs to the tracker. */
.pay-bank .utr-chip {
  display: inline; padding: 0; border: 0; background: none; border-radius: 0;
  font-size: 1.04rem; font-weight: 700; color: var(--ink); letter-spacing: .055em;
  font-variant-numeric: tabular-nums; word-break: break-all;
}
.pay-bank .pb-copy {
  flex: 0 0 auto; margin-left: auto; min-width: 76px;
  border-color: rgba(200, 162, 74, .48); color: var(--gold-deep); background: #fffdf8;
}
.pay-bank .pb-copy:hover { background: var(--gold-soft) }
.pay-bank .pay-qr {
  width: 158px; margin: 4px 0 0; padding: 10px; border: 1px solid rgba(233, 213, 160, .9);
  border-radius: var(--radius); background: #fff; box-shadow: var(--elev-1);
}
.pay-bank .pay-qr img { width: 136px; height: 136px; padding: 0; border: 0; border-radius: 6px; background: none }
.pay-bank .pay-qr figcaption { margin-top: 8px; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted) }
.pay-bank .utr-field {
  margin: 8px 20px 20px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg, #fffdf8, var(--paper-2));
}
.pay-bank .utr-field label { color: var(--ink-2) }
.pay-bank .utr-field .input { font-weight: 700; letter-spacing: .08em; font-variant-numeric: tabular-nums; background: #fff }
@media (max-width: 640px) {
  .pay-bank .pb-head { padding: 13px 16px 14px }
  .pay-bank .pb-modes { margin-left: 0 }
  .pay-bank .pb-lead { padding: 14px 16px 2px }
  .pay-bank .bank-grid { grid-template-columns: 1fr; padding: 10px 16px 2px }
  .pay-bank .pb-row { grid-template-columns: 1fr; gap: 3px; padding: 10px 0 }
  .pay-bank .pb-copy { margin-left: 0; min-width: 68px }
  .pay-bank .pay-qr { width: 100%; max-width: 214px; margin: 2px auto 0 }
  .pay-bank .pay-qr img { width: 100%; height: auto; max-width: 190px }
  .pay-bank .utr-field { margin: 4px 16px 16px }
}

/* ==========================================================================
   Round Z — Product page: the assurance block, fitted to its column
   The medallion takes the vertical centre of the words it leads, at whatever
   height those words reach. The cards pair up only when the buy column is
   genuinely wide — measured on the column, not the screen — so the desktop
   sidebar keeps its single calm stack and the tablet gets two tidy rows.
   ========================================================================== */
body[data-page="product"] .pd-ship li { align-items: center; }
body[data-page="product"] .pd-ship li > span:last-child { min-width: 0 }
body[data-page="product"] .pd-ship b { line-height: 1.3 }
body[data-page="product"] .pd-ship small { line-height: 1.45; margin-top: 2px }
body[data-page="product"] .pd-ship .psi { width: 28px; height: 28px; font-size: .88rem }

/* Same width, same radius, same hairline as the cards under it: the bank plate
   heads the block instead of floating above it as a third widget. */
body[data-page="product"] .buy-card .bank-offer {
  margin-top: 18px; padding: 11px 13px; gap: 9px; border-radius: 14px; font-size: .84rem;
}
body[data-page="product"] .buy-card .bank-offer .bo-gem { width: 24px; height: 24px; font-size: .62rem }
body[data-page="product"] .buy-card .bank-offer b { font-size: 1rem }

@supports (container-type: inline-size) {
  body[data-page="product"] .buy-card { container-type: inline-size }
}
@container (min-width: 620px) {
  body[data-page="product"] .pd-ship { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  /* Three cards pair up and the last one closes the row rather than sitting alone
     under an empty half of the grid. */
  body[data-page="product"] .pd-ship li:last-child:nth-child(odd) { grid-column: 1 / -1 }
}

/* A stone line must never push its rupees out of the card: the name gives way
   first, and when the phone is truly narrow the price takes its own line. */
.bk-stones .bs-name { min-width: 0 }
@media (max-width: 400px) {
  .bk-stones li { flex-wrap: wrap; row-gap: 3px; gap: 3px 12px }
  .bk-stones .bs-amt { margin-left: auto }
}

/* A 320px phone gives the plate about 200px of text: the size steps down so the
   sentence stays two lines instead of turning the offer into a paragraph. */
@media (max-width: 380px) {
  body[data-page="product"] .buy-card .bank-offer { padding: 10px 12px; gap: 8px; font-size: .8rem }
  body[data-page="product"] .buy-card .bank-offer .bo-gem { width: 22px; height: 22px; font-size: .58rem }
  body[data-page="product"] .buy-card .bank-offer b { font-size: .95rem }
}

/* ==========================================================================
   Round AA — Header on phones: the tagline keeps its place
   "Since 2016 · PVT. LTD." used to be the first thing dropped under 430px, and
   the wordmark went with it under 370px, leaving only the coin on a small
   phone. The lockup is stacked, so the tagline adds no width the wordmark
   wasn't already taking — so each step trims type and icons instead of
   deleting part of the brand. Nothing of the brand is hidden below 430px, and
   the icons shrink no further than 30px, with their invisible tap pad growing
   to keep every one of them a 44px target.
   ========================================================================== */
@media (max-width: 430px) {
  .brand-word { display: flex; }
  .brand-sub { display: block; font-size: .5rem; letter-spacing: .07em; }
  .brand-mark img { height: 24px; }
  .brand-pmj, .brand-gold { font-size: 1rem; }
  .brand { gap: 8px; }
  .icon-btn, .icon-btn.hdr-acct, .icon-btn.hdr-acct:has(.hdr-word) {
    width: 34px; height: 34px; min-width: 0; font-size: .95rem;
  }
  .header-actions { gap: 5px; }
  .header-row { gap: 10px; }
  .icon-btn::after { inset: -5px; }
}
@media (max-width: 375px) {
  .brand-sub { font-size: .46rem; letter-spacing: .055em; }
  .brand-pmj, .brand-gold { font-size: .95rem; }
  .brand-mark img { height: 22px; }
  .brand { gap: 7px; }
  .icon-btn, .icon-btn.hdr-acct, .icon-btn.hdr-acct:has(.hdr-word) {
    width: 32px; height: 32px; font-size: .9rem;
  }
  .header-actions { gap: 4px; }
  .header-row { gap: 8px; }
  .icon-btn::after { inset: -6px; }
}
@media (max-width: 340px) {
  .brand-sub { font-size: .42rem; letter-spacing: .05em; }
  .brand-pmj, .brand-gold { font-size: .9rem; }
  .icon-btn, .icon-btn.hdr-acct, .icon-btn.hdr-acct:has(.hdr-word) {
    width: 30px; height: 30px; font-size: .85rem;
  }
  .header-actions { gap: 4px; }
  .header-row { gap: 6px; }
  .icon-btn::after { inset: -7px; }
}

/* ==========================================================================
   Round AB — Header on desktop: the free space is shared, not parked
   The journey used to sit against the logo with its own tight 2px rhythm while
   every spare pixel collected in one blank stretch before the account icons, so
   a wide screen read as "cramped, then empty". pmjgold.in does it the other way:
   the nav grows into the leftover room and centres itself in it. flex-grow (not
   1 1 auto) so a 1024px screen with no spare room keeps the row exactly as it is.
   ========================================================================== */
@media (min-width: 1024px) {
  /* The row is capped by --wrap and now carries the page gutter, so the journey has
     to give a little at the same time it gains the centre: 1140px holds the brand,
     seven links and the three icons with room for an even gap on either side. */
  .header-row { justify-content: space-between; gap: clamp(9px, .9vw, 14px); }
  .main-nav { flex: 1 0 auto; justify-content: center; gap: clamp(3px, .5vw, 11px); margin-left: 0; }
  .main-nav a {
    padding: clamp(5px, .35vw + 2px, 8px) clamp(6px, .45vw + 2px, 10px);
    font-size: clamp(.74rem, .32vw + .54rem, .85rem);
  }
  .header-actions { margin-left: 0; }
}
/* MMTC is the eighth link in the journey. At the narrow end of the desktop band it is
   paid for out of the links' own rhythm — a couple of pixels of padding and a hair off
   the gap — so nothing is hidden and the wordmark and account icons keep their size. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .main-nav { gap: clamp(2px, .34vw, 8px); }
  .main-nav a {
    padding: clamp(4px, .28vw + 2px, 7px) clamp(5px, .38vw + 2px, 9px);
    font-size: clamp(.72rem, .3vw + .53rem, .82rem);
  }
}

/* ==========================================================================
   Round AD — The logged-in greeting must never push the icons out of line
   "Hi, <first name>" is whatever the customer typed, and from 1280px up it is
   painted beside the account icon. At the widest sizes the row is already full
   to its --wrap cap, so the extra words slid the cart past the page gutter and
   the header stopped lining up with the content below it. The pill takes the
   shrink and the name ellipsizes instead — the full greeting stays in the
   accessible name and tooltip.
   ========================================================================== */
@media (min-width: 1280px) {
  /* The greeting is a name the customer chose, so it has to be paid for out of the
     journey's own room rather than pushing the cart past the gutter: logged in, the
     links take a half-step in size and tighten their rhythm by a few pixels. */
  .header-row:has(.hdr-acct .hdr-word) .main-nav { gap: 7px; }
  .header-row:has(.hdr-acct .hdr-word) .main-nav a { padding: 5px 8px; font-size: .8rem; }
  .header-actions { flex: 0 1 auto; min-width: 0; }
  .icon-btn.hdr-acct { flex: 0 1 auto; min-width: 0; }
  /* No fixed cap on the words: the pill is allowed to shrink, so a normal name shows
     whole and only a genuinely over-long one ellipsizes — the accessible name and the
     tooltip always carry it in full. */
  .icon-btn.hdr-acct .hdr-word { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}

/* ==========================================================================
   Round AC — Footer: the same night-plum footer as pmjgold.in
   Bulled straight from the reference stylesheet so the two sites end the same
   way: near-black plum lit by a gold wash, a 1px gold hairline across the top
   (3px with a brighter gradient sweep under 768px, as there), the black-and-gold
   lockup, gold-ruled cards for the desk details, links carried on a hairline
   rule, and a dark band for the copyright. --gold is the same metal as the
   reference's #c9a84c, so the two are interchangeable side by side.
   ========================================================================== */
.site-footer {
  position: relative;
  margin-top: 84px;
  overflow: hidden;
  color: rgba(247, 236, 210, .8);
  background:
    radial-gradient(ellipse at 20% 0%, rgba(201, 168, 76, .12), transparent 40%),
    linear-gradient(165deg, #1a0a12 0%, #2a0f1c 38%, #0c2e30 100%);
}
.site-footer::before {
  content: ""; position: absolute; inset: 0 0 auto 0; z-index: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 168, 76, .55), transparent);
}
.site-footer::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 8 L44 36 L72 40 L44 44 L40 72 L36 44 L8 40 L36 36 Z' fill='%23c9a84c'/%3E%3C/svg%3E");
  background-size: 80px 80px;
}
.site-footer .footer-grid, .site-footer .footer-bottom { position: relative; z-index: 1; }

.footer-grid {
  display: grid; align-items: start; gap: 34px;
  grid-template-columns: 1.25fr 1.05fr .8fr .85fr;
  /* Block padding only: .wrap owns the inline gutter, so the footer text lines up
     with the page content instead of running to the container edge. */
  padding-block: 52px 40px;
}
/* Without a registered address on file the visit card is simply not rendered. */
.footer-grid.ft-noaddr { grid-template-columns: 1.35fr .9fr .9fr; }
@media (max-width: 980px) {
  .footer-grid, .footer-grid.ft-noaddr { grid-template-columns: 1fr 1fr; gap: 26px; }
}
@media (max-width: 620px) {
  .footer-grid, .footer-grid.ft-noaddr { grid-template-columns: 1fr; }
}

/* The lockup is the reference's own asset, so the wordmark and "Since 2016" come
   with it and stay legible on the plum without restyling the text. */
.site-footer .ft-logo { display: inline-flex; margin: 0 0 14px; padding: 0; }
.ft-logo img {
  display: block; height: clamp(96px, 8.5vw, 126px); width: auto; max-width: min(200px, 58vw);
  object-fit: contain; border-radius: 14px; border: 2px solid rgba(212, 175, 55, .3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .4), 0 0 24px rgba(201, 168, 76, .12);
  transition: transform .35s var(--ease-out), border-color .35s, box-shadow .35s;
}
.ft-logo:hover img { transform: translateY(-3px); border-color: rgba(212, 175, 55, .55); box-shadow: 0 12px 40px rgba(212, 168, 76, .25); }

.site-footer .foot-blurb {
  margin: 0; max-width: 36ch; font-size: .9rem; line-height: 1.65;
  letter-spacing: .02em; color: rgba(232, 213, 160, .72);
}

.ft-card {
  margin-top: 16px; padding: 16px 18px; border-radius: 16px;
  border: 1px solid rgba(201, 168, 76, .26);
  background: linear-gradient(145deg, rgba(201, 168, 76, .09), rgba(255, 255, 255, .02));
  box-shadow: inset 0 1px 0 rgba(243, 228, 168, .08), 0 16px 40px rgba(0, 0, 0, .22);
}
.ft-visit { margin-top: 0; }
.ft-label {
  margin: 0 0 10px; font-size: .72rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #e8d5a0;
}

/* Headings take the display face and finish with the gold rule the reference uses. */
.site-footer h4, .ft-card h4 {
  display: flex; align-items: center; gap: 10px; margin: 0 0 16px;
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: #f3e4a8;
}
.site-footer h4::after {
  content: ""; flex: 0 1 44px; height: 1px;
  background: linear-gradient(90deg, rgba(201, 168, 76, .7), transparent);
}

/* Beat the older `.site-footer .footer-grid > div:not(:first-child) a` nudge on its
   own terms — this footer shifts a link along its rule instead of sliding the row. */
.site-footer .footer-grid > div.ft-col .ft-links { display: flex; flex-direction: column; gap: 2px; }
.site-footer .footer-grid > div.ft-col .ft-links > a {
  display: flex; align-items: center; padding: 6px 0 6px 12px; font-size: .88rem;
  color: rgba(247, 236, 210, .74); text-decoration: none;
  border-left: 2px solid rgba(201, 168, 76, .22);
  transition: color .2s, border-color .2s, padding-left .2s, transform .2s;
}
.site-footer .footer-grid > div.ft-col .ft-links > a:hover {
  color: #f3e4a8; border-left-color: var(--gold); padding-left: 15px; transform: none;
}

.site-footer .ft-contact a {
  display: flex; align-items: center; gap: 9px; padding: 3px 0; font-size: .88rem;
  line-height: 1.5; color: rgba(247, 236, 210, .9); text-decoration: none;
  transition: color .2s;
}
.ft-contact a svg { flex: 0 0 auto; color: var(--gold); opacity: .95; }
.site-footer .ft-contact a:hover { color: #fff8e7; }
.ft-contact a:hover svg { color: #e8d5a0; }

.ft-trust {
  display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 18px 0 0;
  padding-top: 14px; border-top: 1px solid rgba(201, 168, 76, .2);
}
.ft-trust span {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(232, 213, 160, .72);
}
.ft-trust span::before { content: "\25C6"; margin-right: 6px; color: var(--gold); font-size: .55rem; }

.ft-visit address {
  display: flex; flex-direction: column; gap: 6px; font-style: normal;
  font-size: .92rem; line-height: 1.55; color: rgba(247, 236, 210, .88);
}
.ft-gstin { margin: 12px 0 0; font-size: .76rem; letter-spacing: .06em; color: rgba(232, 213, 160, .62); }
.ft-gstin b { color: #e8d5a0; font-weight: 700; letter-spacing: .04em; }

.site-footer .ft-chip {
  display: inline-flex; align-items: center; margin-top: 14px; padding: 8px 16px;
  border-radius: 999px; border: 1px solid rgba(201, 168, 76, .45);
  background: linear-gradient(135deg, rgba(201, 168, 76, .18), rgba(160, 124, 46, .1));
  color: #f3e4a8; text-decoration: none; font-size: .8rem; font-weight: 700; letter-spacing: .04em;
  transition: transform .35s var(--ease-out), background .35s, border-color .35s, color .35s, box-shadow .35s;
}
.site-footer .footer-grid > div:not(:first-child) a.ft-chip:hover {
  background: linear-gradient(135deg, rgba(201, 168, 76, .32), rgba(160, 124, 46, .18));
  border-color: #e8d5a0; color: #fff8e7; transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(201, 168, 76, .18);
}

.footer-bottom {
  display: block; padding: 18px 0 22px; text-align: center;
  border-top: 1px solid rgba(201, 168, 76, .22);
  background: linear-gradient(180deg, rgba(0, 0, 0, .18), rgba(0, 0, 0, .32));
}
.footer-bottom p { margin: 0; font-size: .8rem; letter-spacing: .06em; color: rgba(232, 213, 160, .6); }
.footer-bottom .ft-fine { margin-top: 4px; font-size: .72rem; letter-spacing: .04em; color: rgba(232, 213, 160, .42); }

/* Under 768px the reference footer swaps to the brighter plum wash and a heavier
   gold sweep — same switch here, so the two sites match on a phone too. */
@media (max-width: 768px) {
  .site-footer {
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background:
      radial-gradient(ellipse 120% 60% at 50% -10%, rgba(212, 175, 55, .28) 0%, transparent 55%),
      linear-gradient(180deg, #4a1830 0%, #3d0f26 38%, #1a0a12 100%);
  }
  .site-footer::before {
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, #7a5a18 12%, #e8d5a0 38%, #c9a84c 50%, #e8d5a0 62%, #7a5a18 88%, transparent 100%);
    box-shadow: 0 0 18px rgba(201, 168, 76, .35);
  }
  .ft-logo img { height: 92px; }
  .footer-grid { padding-block: 40px 30px; }
}

/* ==========================================================================
   Round AE — Checkout: the bank desk folds, and every line shares one edge
   The account number, the IFSC and the QR are only wanted at the moment of
   paying, so the card now opens on the amount alone and folds the rest behind
   one labelled control, sitting under the "You save ₹…" plate it belongs to.
   Inside it the rows are a true three-column ledger — label, figure, Copy —
   and plate, header, fold and rows all indent 16px, so no text in the payment
   panel sits a stray few pixels off its neighbours.
   ========================================================================== */
.bank-offer { padding-inline: 16px; }
.pay-bank .pb-head { padding: 15px 16px 16px; }
.pay-bank .pb-lead { padding: 14px 16px 2px; }
.pay-bank .bank-grid { padding: 10px 16px 2px; }
.pay-bank .utr-field { margin-inline: 16px; }

/* The fold: same gem, same height, same radius as the plate above it, so the
   two read as one instruction — what you save, and where to get the numbers. */
.pay-bank .pb-fold {
  display: flex; align-items: center; gap: 11px; width: 100%; margin: 0;
  padding: 14px 16px; border: 0; border-bottom: 1px solid transparent; border-radius: 0;
  background: linear-gradient(180deg, #fffdf7, var(--paper-2));
  font: inherit; font-weight: 700; color: var(--ink); text-align: left; cursor: pointer;
  transition: background .18s, border-color .18s;
}
.pay-bank .pb-fold:hover { background: var(--gold-soft); }
.pay-bank .pb-fold .pf-gem {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; background: var(--royal-band);
  color: var(--gold-3); font-size: .7rem; box-shadow: 0 2px 8px rgba(74, 21, 44, .28);
}
.pay-bank .pb-fold .pf-label {
  font-family: var(--font-display); font-size: .98rem; font-weight: 700; letter-spacing: -.01em;
}
.pay-bank .pb-fold .pf-chev {
  margin-left: auto; flex: 0 0 auto; color: var(--gold-deep); font-size: .78rem;
  transition: transform .22s var(--ease-out);
}
.pay-bank .pb-fold.open .pf-chev { transform: rotate(180deg); }
.pay-bank .pb-fold.open { border-bottom-color: var(--line); }
.pay-bank .pb-fold:focus-visible { outline: 2px solid var(--gold-2); outline-offset: -3px; }

/* Label / figure / Copy as three columns. The Copy button is a grid track of its
   own, so a long account number wraps inside the figure column instead of
   dragging its button onto a second line, and every button lands in one file. */
.pay-bank .pb-row {
  grid-template-columns: 122px minmax(0, 1fr); gap: 6px 16px; align-items: baseline;
}
.pay-bank .pb-row dd { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; }
.pay-bank .pb-copy { margin-left: 0; }
/* The framed QR starts on the same line as the first label, not 7px under it. */
.pay-bank .pay-qr { margin: 11px 0 0; }

.pay-option { align-items: center; }
/* A radio carries a 4px default left margin, which put the dot a fifth of a
   centimetre out of line with the gem above it and the plate beside it. */
.pay-option input { margin: 0; }
/* A saving is a sum of money, so it keeps the one thing a rupee figure needs: an
   unwrapped line. The method's own words give way before it does. */
.pay-option > span:not(.perks) { flex: 1 1 0; min-width: 0; }
.pay-option .perks { flex: 0 0 auto; white-space: nowrap; }

@media (max-width: 640px) {
  /* Under the width where the QR shares a column with the rows it belongs centred
     beneath them, not hugging the left edge of a long empty line. */
  .pay-bank .pay-qr { margin-inline: auto; }
}
@media (max-width: 480px) {
  /* On a phone the saving reads better as a line of its own under the method, hung
     31px in — the radio's own width plus the row's gap — so it starts on the same
     edge as the words it describes, not under the dot. */
  .pay-option .perks { flex: 0 0 100%; margin-left: 31px; text-align: left; white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .pay-bank .pb-fold, .pay-bank .pb-fold .pf-chev { transition: none; }
}

/* On a phone the checkout panels were spending 52 of the ~320 available pixels
   on their own sides; one rhythm with the bank card keeps the figures readable. */
@media (max-width: 560px) {
  body[data-page="checkout"] .panel { padding: 18px 16px; }
  .pay-bank .pb-row { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Round AF — Checkout: UPI takes its own row
   A UPI payment is one scan, so this desk keeps the transfer card's royal head and
   engraved ledger but folds nothing away: the amount, the code to point a camera at
   and the reference box are all on screen at once. The deep link is a plain upi://
   address built from the shop's own UPI ID, and the quote drops the live figure into
   it, so the UPI app opens already holding the exact amount due.
   ========================================================================== */
.pay-upi .upi-open {
  display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding: 12px 16px 0;
}
.pay-upi .upi-open .btn { min-width: 200px; justify-content: center; }
.pay-upi .upi-note { font-size: .76rem; line-height: 1.4; }

@media (max-width: 640px) {
  .pay-upi .upi-open { padding-inline: 16px; }
  .pay-upi .upi-open .btn { min-width: 0; flex: 1 1 100%; }
  .pay-upi .upi-note { flex: 1 1 100%; }
}

/* ==========================================================================
   Round AG — The MMTC-PAMP shelf: a separate counter in the same shop
   Only the page is split off, so it wears the storefront shell and adds what a
   brand-fed shelf needs and the vault pages never had: a stamp saying how old the
   rates on screen are, a three-up explainer, and a closing note on where the
   numbers come from. Nothing here restates a figure the admin already owns.
   ========================================================================== */

/* Freshness is stated once, under the heading — never repeated card by card. */
.mmtc-when {
  display: inline-flex; align-items: center; gap: 9px; margin: 20px 0 0;
  padding: 7px 15px 7px 12px; border: 1px solid var(--gold-3); border-radius: 999px;
  background: linear-gradient(135deg, #fffdf7, var(--gold-tint));
  font-size: .78rem; font-weight: 700; letter-spacing: .005em; color: var(--gold-deep);
}
.mmtc-when .mw-dot {
  flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold-2); box-shadow: 0 0 0 3px rgba(212, 175, 55, .18);
  animation: mmtc-live 2.8s ease-in-out infinite;
}
@keyframes mmtc-live { 0%, 100% { opacity: 1 } 50% { opacity: .3 } }
/* A stale feed is worth a quieter, warmer stamp than a moving one. */
.mmtc-when.is-stale { border-color: rgba(179, 38, 30, .26); background: linear-gradient(135deg, #fff8f6, #fdefec); color: #8c2d27; }
.mmtc-when.is-stale .mw-dot { background: #b3261e; box-shadow: 0 0 0 3px rgba(179, 38, 30, .14); animation: none; }
@media (prefers-reduced-motion: reduce) { .mmtc-when .mw-dot { animation: none } }

/* Three honest steps, so the strip does not leave a fourth column of air. */
.trust.tri { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .trust.tri { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .trust.tri { grid-template-columns: 1fr; } }

/* The mint's price is the headline here, so the rate line reads as a caption to it
   rather than a second headline, and the shelf's own cards sit a shade deeper. */
.mmtc-card .pc-meta { font-variant-numeric: tabular-nums; }
.mmtc-card .pc-price .now { font-size: 1.18rem; }
.mmtc-card .pc-actions { flex-wrap: wrap; }

/* An unpriced piece is a conversation, not a click, so the card sends the shopper to the
   desk in WhatsApp green instead of the shop's gold — the one place on the shelf where a
   colour that is not brand-gold earns its keep. */
.btn-wa { color: #1c7c46; border-color: rgba(37, 211, 102, .42); }
.btn-wa:hover { background: #f1fcf5; border-color: #25d366; color: #14683a; }
.btn-wa svg { flex: 0 0 auto; }

.mmtc-about { padding: 26px 30px 24px; }
.mmtc-about > h2 { margin: 0 0 12px; font-family: var(--font-display); font-size: 1.34rem; letter-spacing: -.018em; }
.mmtc-about > p { margin: 0 0 12px; max-width: 82ch; font-size: .92rem; line-height: 1.68; color: var(--ink-2); }
.mmtc-about > .fnote { margin: 4px 0 0; font-size: .78rem; line-height: 1.6; color: var(--muted); }
@media (max-width: 620px) { .mmtc-about { padding: 20px 16px 18px; } }

/* ==========================================================================
   Social shelf — gold medallions for the links the admin entered
   One partial (partials/social-links) paints the row in the footer and on
   Contact, so every channel carries the same link and a channel the shop has
   not filled in simply has no icon. The circle stays the house metal; only the
   hover wash borrows the brand's colour, so four logos never read as stickers.
   `.social-icons a.social-btn` deliberately outranks the footer's own
   `.site-footer a` block so the medallion is never flattened into a list row.
   ========================================================================== */
.social-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-top: 16px;
}
.social-label {
  font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
}
.social-icons { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.social-icons a.social-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; width: 40px; height: 40px; padding: 0; border-radius: 50%;
  color: var(--gold-deep); text-decoration: none; border: 1px solid var(--line-dark);
  background: linear-gradient(145deg, rgba(200, 162, 74, .14), rgba(255, 255, 255, .55));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), 0 3px 9px rgba(120, 96, 40, .12);
  transition: transform .24s var(--ease-out), border-color .24s, box-shadow .24s, color .24s, background .24s;
}
.social-icons a.social-btn svg { display: block; width: 19px; height: 19px; }
.social-icons a.social-btn:hover,
.social-icons a.social-btn:focus-visible {
  color: #fffdf8; border-color: transparent; transform: translateY(-3px);
  background: linear-gradient(145deg, var(--brand), var(--brand-2));
  box-shadow: 0 12px 26px var(--brand-glow), inset 0 1px 0 rgba(255, 255, 255, .34);
}
.social-icons a.social-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.social-facebook { --brand: #2f66b5; --brand-2: #17386a; --brand-glow: rgba(24, 119, 242, .34); }
.social-instagram { --brand: #c8406f; --brand-2: #7b2d8f; --brand-glow: rgba(193, 52, 107, .32); }
.social-linkedin { --brand: #2f7cb3; --brand-2: #10557e; --brand-glow: rgba(10, 102, 194, .3); }
.social-youtube { --brand: #c4302b; --brand-2: #8a1c19; --brand-glow: rgba(196, 48, 43, .3); }

/* The plum-and-gold footer wears the same medallion struck in its own metal. */
.site-footer .social-row { margin-top: 18px; }
.site-footer .social-label { color: #e8d5a0; }
.site-footer .social-icons a.social-btn {
  color: #e8d5a0; border-color: rgba(201, 168, 76, .42);
  background: linear-gradient(145deg, rgba(201, 168, 76, .17), rgba(255, 255, 255, .02));
  box-shadow: inset 0 1px 0 rgba(243, 228, 168, .12), 0 10px 22px rgba(0, 0, 0, .22);
}

@media (max-width: 620px) { .social-row { gap: 8px 12px; } }
/* Touch screens get the colour wash without the lift, as everywhere else here. */
@media (hover: none) { .social-icons a.social-btn:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .social-icons a.social-btn, .social-icons a.social-btn:hover { transform: none; transition: none; }
}

/* ================= Round W — the Journal (/blog) =================
   Every device takes its metal from the post's topic: the tone classes below set
   --pj-* once and the whole article, card or chip inherits it, so a silver guide is
   dressed in silver end to end without a single silver-specific selector. */
:root {
  --pj-band: var(--gold-grad);
  --pj-deep: var(--gold-deep);
  --pj-line: rgba(200, 162, 74, .38);
  --pj-soft: var(--gold-soft);
  --pj-tint: var(--gold-tint);
  --pj-glow: 0 14px 34px rgba(168, 132, 47, .2);
}
.pj-tone-gold {
  --pj-band: var(--gold-grad); --pj-deep: var(--gold-deep); --pj-line: rgba(200, 162, 74, .38);
  --pj-soft: var(--gold-soft); --pj-tint: var(--gold-tint); --pj-glow: 0 14px 34px rgba(168, 132, 47, .2);
}
.pj-tone-silver {
  --pj-band: linear-gradient(135deg, #fbfcfd 0%, #ccd5de 46%, #8d9aa8 100%);
  --pj-deep: #4a5665; --pj-line: rgba(141, 154, 168, .42); --pj-soft: rgba(141, 154, 168, .16);
  --pj-tint: #f4f7f9; --pj-glow: 0 14px 34px rgba(110, 124, 140, .2);
}
/* A two-metal guide wears both: the band crosses from gold into silver. */
.pj-tone-both {
  --pj-band: linear-gradient(112deg, #f8ecd0 0%, var(--gold) 36%, #c3ccd5 62%, #f6f8fa 100%);
  --pj-deep: #6d6242; --pj-line: rgba(158, 158, 152, .4); --pj-soft: rgba(168, 166, 150, .16);
  --pj-tint: #f8f6f0; --pj-glow: 0 14px 34px rgba(150, 140, 110, .2);
}

/* The page head keeps its plum band; the topic only tints the kicker rule. */
.pj-head .pj-draft {
  display: inline-block; margin-top: 14px; padding: 7px 14px; border-radius: 999px;
  font-size: .78rem; font-weight: 700; color: #fdf6e6; background: rgba(179, 55, 47, .85);
  border: 1px solid rgba(255, 255, 255, .28);
}
.pj-head .pj-draft b { display: inline; margin: 0; color: #fff }

/* ---------- Topic chips: the shop's facet chip, struck in the post's metal ---------- */
.pj-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 32px; padding: 0; list-style: none }
.pj-chip { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; padding: 9px 15px }
.pj-chip .pj-n {
  min-width: 20px; padding: 1px 6px; border-radius: 999px; text-align: center;
  font-size: .72rem; font-weight: 700; color: var(--pj-deep); background: var(--pj-soft);
}
.pj-chip.on { background: var(--pj-band); border-color: var(--pj-deep); color: var(--ink); box-shadow: var(--pj-glow) }
.pj-chip.on .pj-n { background: rgba(255, 255, 255, .72); color: var(--pj-deep) }

/* ---------- Cards ---------- */
.pj-grid { display: grid; gap: 22px; grid-template-columns: repeat(3, minmax(0, 1fr)) }
.pj-card {
  position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  background: var(--card-grad); border: 1px solid var(--pj-line); border-radius: var(--radius-lg);
  box-shadow: var(--elev-1); transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out), border-color .22s;
}
.pj-card:hover { transform: translateY(-4px); box-shadow: var(--elev-2); border-color: var(--pj-deep) }
.pj-card:focus-within { border-color: var(--pj-deep); box-shadow: var(--elev-2), var(--pj-glow) }
.pj-card-media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--pj-tint) }
.pj-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out) }
.pj-card:hover .pj-card-media img { transform: scale(1.045) }
/* No cover yet: a struck plate in the post's metal, so an empty slot still looks finished. */
.pj-plate {
  position: absolute; inset: 0; display: grid; place-items: center;
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(255, 255, 255, .85), transparent 58%),
    linear-gradient(150deg, var(--pj-tint) 0%, #ffffff 46%, var(--pj-soft) 100%);
}
.pj-medallion {
  position: relative; width: 58px; height: 58px; border-radius: 50%;
  background: var(--pj-band); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), var(--pj-glow);
}
.pj-medallion::after {
  content: ""; position: absolute; inset: 9px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .22);
}
.pj-tag {
  position: absolute; left: 14px; top: 14px; padding: 5px 12px; border-radius: 999px;
  font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--pj-deep); background: rgba(255, 255, 255, .9); border: 1px solid var(--pj-line);
}
.pj-card-body { display: flex; flex-direction: column; gap: 9px; padding: 18px 20px 20px; flex: 1 }
.pj-card-body h3 { margin: 0; font-size: 1.14rem; line-height: 1.28; letter-spacing: -.018em }
.pj-card-body h3 a { color: var(--ink) }
.pj-card-body h3 a::after { content: ""; position: absolute; inset: 0 }
/* Three lines and no more, so one long summary cannot push a row out of square. */
.pj-card-body p {
  margin: 0; font-size: .9rem; color: var(--muted); line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.pj-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: auto; padding-top: 4px; font-size: .76rem; color: var(--muted) }
.pj-meta .pj-tag { position: static; margin-right: 2px }

/* ---------- Featured guide: the wide editorial card ---------- */
.pj-feat {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  overflow: hidden; margin-bottom: 30px; background: var(--card-grad);
  border: 1px solid var(--pj-line); border-radius: var(--radius-lg); box-shadow: var(--elev-2);
}
.pj-feat::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 2;
  background: var(--pj-band);
}
.pj-feat-media { position: relative; display: block; min-height: 100%; background: var(--pj-tint) }
.pj-feat-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.pj-feat-body { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: clamp(24px, 3vw, 40px) }
.pj-feat-body h2 { margin: 0; font-size: clamp(1.4rem, 2.6vw, 2rem); letter-spacing: -.026em; line-height: 1.18 }
.pj-feat-body h2 a { color: var(--ink) }
.pj-feat-body h2 a::after { content: ""; position: absolute; inset: 0 }
.pj-feat-body p { margin: 0; color: var(--ink-3); font-size: 1rem }
.pj-feature-flag {
  align-self: flex-start; padding: 5px 13px; border-radius: 999px; font-size: .72rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: #fffdf6; background: var(--pj-deep);
}
.pj-read {
  align-self: flex-start; margin-top: 6px; font-weight: 700; color: var(--pj-deep);
  border-bottom: 1px solid var(--pj-line); padding-bottom: 3px; transition: color .18s, border-color .18s;
}
.pj-read:hover { color: var(--ink); border-color: var(--pj-deep) }
.pj-read span { display: inline-block; transition: transform .2s var(--ease-out) }
.pj-read:hover span { transform: translateX(4px) }

/* ---------- The article ---------- */
.pj-article { padding-top: clamp(26px, 3.4vw, 40px) }
.pj-has-cover { padding-top: 0 }
.pj-cover { margin: 0 0 clamp(26px, 3.4vw, 40px); padding-top: clamp(26px, 3.4vw, 40px) }
.pj-cover img {
  width: 100%; aspect-ratio: 16 / 8; object-fit: cover; border-radius: var(--radius-lg);
  box-shadow: var(--elev-2), 0 0 0 1px var(--pj-line);
}
.pj-cover figcaption { margin-top: 10px; padding: 0 20px }
.pj-article .prose { overflow-wrap: break-word }
/* In-body images are framed like the cover, but stay inside the measure. */
.pj-article .prose img {
  border-radius: var(--radius); box-shadow: var(--elev-1), 0 0 0 1px var(--pj-line); margin: 6px 0 4px;
}
.pj-article .prose a:not(.btn) { color: var(--pj-deep); border-bottom: 1px solid var(--pj-line) }
.pj-article .prose a:not(.btn):hover { color: var(--ink); border-color: var(--pj-deep) }
/* The house editorial rules follow the metal of the post. */
.pj-article .prose h2::after, .pj-article .prose blockquote::before { background: var(--pj-band) }
.pj-article .prose ol > li::before { background: var(--pj-band) }
.pj-article .prose ul > li::before { background: linear-gradient(135deg, var(--pj-tint), var(--pj-deep)) }
.pj-article .prose hr { border: 0; height: 1px; margin: 2.2em 0; background: var(--pj-band); opacity: .5 }

.pj-rates {
  margin: 34px 0; padding: clamp(18px, 2.4vw, 26px); border-radius: var(--radius-lg);
  background: var(--card-grad); border: 1px solid var(--pj-line); box-shadow: var(--elev-1);
}
.pj-rates h3 {
  margin: 0 0 14px; font-size: 1.06rem; letter-spacing: .02em; text-transform: uppercase;
  color: var(--pj-deep); font-family: var(--font-body); font-weight: 700;
}
.pj-rates .doc-table b { font-variant-numeric: tabular-nums; color: var(--ink) }
.pj-rates .fnote { margin: 12px 0 0 }

.pj-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line);
}
.pj-foot-label { font-size: .8rem; font-weight: 700; color: var(--muted); margin-right: 4px }

/* ---------- Closing band, in the house plum ---------- */
.pj-cta {
  position: relative; overflow: hidden; border-top: 1px solid var(--gold-3);
  padding: clamp(40px, 5vw, 62px) 0;
  background:
    radial-gradient(760px 320px at 88% -18%, rgba(233, 205, 134, .22), transparent 62%),
    radial-gradient(520px 280px at 4% 118%, rgba(233, 205, 134, .12), transparent 62%),
    var(--royal-band);
}
.pj-cta-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px }
.pj-cta h2 { color: #fdf6e6; margin-bottom: 8px }
.pj-cta p { color: rgba(253, 246, 230, .8); max-width: 58ch; margin: 0 }
.pj-cta-btns { display: flex; flex-wrap: wrap; gap: 12px }
.pj-cta .btn-ghost {
  color: #f6e9d6; border-color: rgba(233, 213, 160, .45);
  background: linear-gradient(145deg, rgba(233, 213, 160, .16), rgba(255, 255, 255, .03));
}
.pj-cta .btn-ghost:hover { border-color: var(--gold-3); color: #fffdf6 }

.pj-related-title { margin-bottom: 22px }
.pj-more { margin: 30px 0 0 }
.pj-more a { font-weight: 700; color: var(--gold-deep); border-bottom: 1px solid var(--gold-3); padding-bottom: 2px }
.pj-empty { padding: clamp(30px, 5vw, 54px); text-align: center; border: 1px dashed var(--line); border-radius: var(--radius-lg); background: var(--card) }
.pj-empty h2 { margin-bottom: 8px }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .pj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 860px) {
  .pj-feat { grid-template-columns: minmax(0, 1fr) }
  .pj-feat-media { aspect-ratio: 16 / 9 }
  .pj-feat-media img { position: absolute }
}
@media (max-width: 620px) {
  .pj-grid { grid-template-columns: minmax(0, 1fr) }
  .pj-chips { gap: 8px; margin-bottom: 24px }
  .pj-card-body { padding: 16px 17px 18px }
  .pj-cover img { aspect-ratio: 4 / 3 }
  .pj-cta-inner { flex-direction: column; align-items: flex-start }
}

/* Lift is a pointer response here, not a loop; touch screens keep the border change. */
@media (hover: none) { .pj-card:hover { transform: none } .pj-card:hover .pj-card-media img { transform: none } }
@media (prefers-reduced-motion: reduce) {
  .pj-card, .pj-card:hover, .pj-card-media img, .pj-card:hover .pj-card-media img,
  .pj-read, .pj-read:hover span { transform: none; transition: none }
}

/* The house print sheet hides .page-head; a printed guide still needs its title. */
@media print {
  .page-head.pj-head {
    display: block !important; background: #fff !important; padding: 0 0 10pt;
    border-bottom: 1px solid #ccc;
  }
  .page-head.pj-head::before, .page-head.pj-head::after { display: none }
  .pj-head h1 { color: #221a10 !important; font-size: 20pt }
  .pj-head .kicker { color: #555 !important }
  .pj-head p { color: #3d3223 !important }
  .pj-chips, .pj-cta, .pj-foot, .pj-related, .pj-read { display: none !important }
  .pj-cover img, .pj-rates { box-shadow: none }
  .pj-article .prose h2::after { background: #999 }
}

/* ---------- Cookie consent ---------- */
/* Bottom-left on the desk: the WhatsApp pair holds the right edge and the toast the centre,
   so a full-width bar would sit on top of both. On a phone it drops to the top instead, where
   nothing else lives, and the sticky buy bar stays tappable. */
.ck-bar {
  position: fixed; left: 22px; bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 140;
  width: min(560px, calc(100vw - 30px));
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: linear-gradient(180deg, #261d11, #16100a);
  color: var(--paper); border: 1px solid var(--gold-2); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 15px 17px;
}
.ck-bar[hidden] { display: none; }
.ck-copy { flex: 1 1 260px; min-width: 0; }
.ck-copy h4 {
  margin: 0 0 5px; font-family: var(--font-display); font-weight: 600;
  font-size: 1.02rem; color: var(--gold-3);
}
.ck-copy p { margin: 0; font-size: .82rem; line-height: 1.55; color: #d8ccb5; }
.ck-copy a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
.ck-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.ck-bar .btn-ghost { background: transparent; color: var(--gold-3); border-color: rgba(233, 213, 160, .42); }
.ck-bar .btn-ghost:hover { background: rgba(233, 213, 160, .12); border-color: var(--gold-3); }
@media (max-width: 720px) {
  .ck-bar {
    left: 10px; right: 10px; width: auto; bottom: auto;
    top: calc(10px + env(safe-area-inset-top)); flex-direction: column; align-items: stretch;
  }
  /* The 260px flex basis is a *width* on the desktop row; stacked, the main axis is vertical
     and that same basis would stretch the copy block to 260px of empty box. */
  .ck-copy { flex: 1 1 auto; }
  .ck-actions .btn { flex: 1; }
}

/* ==========================================================================
   ROUND P2 — premium polish on Home, Product and Checkout.
   Three additive moves on surfaces an earlier luxe pass had already re-shaded:
   the price breakup folds, the price summary groups, and the hero copy gets
   the light the artwork already had.
   ========================================================================== */

/* ---------- Home hero: the copy column sat on a flat fill ----------
   The artwork has its own halo; the headline had nothing, so the left half of the
   band read one step cheaper than the right. A pool of light, not a second panel. */
.hero::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none; inset: 0 auto auto 0;
  width: 66%; height: 100%;
  background: radial-gradient(46% 54% at 24% 44%, rgba(255, 255, 255, .96), rgba(233, 213, 160, .4) 52%, transparent 76%);
}
.hero > .wrap { position: relative; z-index: 1; }
@media (max-width: 900px) { .hero::before { inset: 0; width: 100%; } }

/* ---------- Product page: the breakup table folds away under its own heading ---------- */
.pd-breakup { padding: 0; overflow: hidden; }
.bk-head {
  display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  font: inherit; color: var(--ink); cursor: pointer; padding: 17px 22px; border: 0;
  background: linear-gradient(180deg, var(--gold-tint), var(--card) 72%);
  transition: background .2s;
}
.bk-head:hover { background: linear-gradient(180deg, #fdf3dd, var(--gold-tint) 72%); }
/* The panel clips, so the focus ring has to be drawn inside the row to stay visible. */
.bk-head:focus-visible { outline: 2px solid var(--gold-2); outline-offset: -3px; }
.bk-gem {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center; font-size: .78rem;
  border-radius: 999px; background: var(--gold-grad); color: var(--ink); box-shadow: var(--elev-1);
}
.bk-words { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.bk-words b { font-family: var(--font-display); font-weight: 600; font-size: 1.06rem; letter-spacing: -.015em; }
.bk-words small { color: var(--muted); font-size: .78rem; }
.bk-chev { flex: none; color: var(--gold-deep); font-size: .78rem; transition: transform .2s var(--ease-out); }
.bk-head.is-open .bk-chev { transform: rotate(180deg); }
.bk-head.is-open { border-bottom: 1px solid var(--line); }
.bk-body { padding: 20px 22px 22px; }
.bk-body .bk-stones-wrap, .bk-body #bkVarNote { margin-top: 16px; }
@media (max-width: 560px) {
  .bk-head { padding: 15px 16px; gap: 11px; }
  .bk-body { padding: 16px 16px 18px; }
}

/* ---------- Checkout / bag: the summary reads as a bill, not a column ---------- */
.sum-group + .sum-group { margin-top: 4px; padding-top: 15px; border-top: 1px dashed var(--line); }
.sum-cap {
  display: block; margin-bottom: 5px; font-size: .67rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.summary-row.total { font-size: 1.55rem; padding-top: 17px; }
.summary-row.total span:last-child { color: var(--gold-deep); }