/* Kalyan Jewellers design tokens, taken from the official logo and
   kalyanjewellers.net. Change values here; nothing else hard-codes colour. */
:root {
  --brand-primary: #e01f26;
  --brand-primary-dark: #b8161c;
  --brand-primary-tint: #fdf1f1;
  --brand-accent: #ffcd0a;
  --brand-accent-deep: #966901;
  --brand-accent-text: #7a5400;
  --gold-ribbon: linear-gradient(135deg, #ffe26a 0%, #ffcc02 45%, #c58a17 78%, #6b4100 100%);
  --gold-sheen: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 48%, transparent 66%);
  --ink: #231f20;
  --velvet: #1f0d10;
  --surface: #ffffff;
  --surface-alt: #f6f3ef;
  --text-primary: #231f20;
  --text-muted: #615b58;
  --line: #e7e1d9;
  --success: #17703a;
  --error: #c4161c;
  --radius-s: 6px;
  --radius-m: 14px;
  --radius-l: 24px;
  --shadow-lift: 0 18px 40px -22px rgba(35, 31, 32, .45);
  --font-heading: "Bodoni Moda", Didot, "Bodoni 72", Georgia, serif;
  --font-body: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gutter: 20px;
  --measure: 64ch;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* Base ------------------------------------------------------------------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--surface); color: var(--text-primary);
  font: 400 16px/1.65 var(--font-body); -webkit-font-smoothing: antialiased;
}
main { flex: 1; }
h1, h2, h3 { font-family: var(--font-heading); font-weight: 600; line-height: 1.12; margin: 0 0 .6rem; color: var(--ink); }
h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); letter-spacing: -0.015em; }
h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); letter-spacing: -0.01em; }
h3 { font-size: 1.2rem; }
p { margin: 0 0 .8rem; }
a { color: var(--brand-primary); text-underline-offset: 3px; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--brand-accent); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link:focus { position: fixed; top: 8px; left: 8px; width: auto; height: auto; clip: auto; z-index: 50; background: #fff; padding: .5rem 1rem; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }
.muted { color: var(--text-muted); }
.small { font-size: .875rem; }
.price { font-weight: 600; font-variant-numeric: tabular-nums lining-nums; }
.hidden { display: none !important; }
.error-text { color: var(--error); font-size: .9rem; margin: .3rem 0 0; }
.error-text:empty { display: none; }
.success-text { color: var(--success); font-size: .95rem; font-weight: 500; }
.stack > * + * { margin-top: 1.25rem; }
.page { padding-top: 2.25rem; padding-bottom: 4rem; }
.page-head { margin-bottom: 1.75rem; }
.page-head p { color: var(--text-muted); max-width: var(--measure); font-size: 1.05rem; }
.grand { font-size: 1.5rem; margin: .5rem 0; color: var(--ink); }

/* Rate rail, header, footer ------------------------------------------- */
.rate-rail { background: var(--velvet); color: #d8cfc9; font-size: .82rem; }
.rate-rail .wrap { display: flex; align-items: center; gap: 1.5rem; min-height: 36px; }
.rate-rail .rate { display: inline-flex; gap: .45rem; align-items: baseline; }
.rate-rail strong { color: var(--brand-accent); font-weight: 600; font-variant-numeric: tabular-nums; font-size: .9rem; }
.rate-rail .per { color: #a2958e; }
.rate-live { margin-left: auto; display: inline-flex; align-items: center; gap: .45rem; color: #a2958e; }
.rate-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #3ccf6e; animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(60, 207, 110, .6); } 100% { box-shadow: 0 0 0 8px rgba(60, 207, 110, 0); } }
.rate-flash { animation: flash 1.2s ease; }
@keyframes flash { 0% { color: #fff; text-shadow: 0 0 12px rgba(255, 205, 10, .9); } 100% { color: var(--brand-accent); } }

.site-header { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .86); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s; }
.site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 8px 24px -18px rgba(35, 31, 32, .5); }
.site-header .wrap { display: flex; align-items: center; gap: 1.5rem; min-height: 78px; }
.logo { display: inline-flex; align-items: center; }
.logo img { height: 54px; width: auto; }
.nav { display: flex; gap: .3rem; margin-left: auto; align-items: center; }
.nav a { position: relative; color: var(--ink); text-decoration: none; font-weight: 500; font-size: .95rem; padding: .55rem .85rem; border-radius: 999px; transition: background-color .15s; }
.nav a:hover { background: var(--surface-alt); }
.nav a[aria-current="page"]::after { content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .25rem; height: 2px; background: var(--brand-primary); border-radius: 2px; }
.nav .nav-cta { background: var(--ink); color: #fff; padding: .55rem 1.1rem; }
.nav .nav-cta:hover { background: #000; }
.nav .nav-cta[aria-current="page"]::after { display: none; }
.nav .nav-cart { display: inline-flex; gap: .5rem; align-items: center; border: 1px solid var(--line); }
.nav svg { width: 18px; height: 18px; }
.cart-count { background: var(--brand-primary); color: #fff; border-radius: 999px; min-width: 1.35rem; height: 1.35rem; padding: 0 .35rem; font-size: .72rem; font-weight: 600; display: inline-grid; place-items: center; }
.cart-count.bump { animation: bump .45s var(--ease); }
@keyframes bump { 40% { transform: scale(1.45); } }

.site-footer { margin-top: 5rem; background: var(--velvet); color: #cbbfb9; padding: 3.5rem 0 2rem; font-size: .92rem; }
.footer-grid { display: grid; gap: 2.5rem; grid-template-columns: 1.4fr 1fr 1fr 1fr; }
.footer-grid img { height: 72px; width: auto; margin-bottom: 1rem; }
.footer-grid h2 { font-family: var(--font-body); font-size: .95rem; font-weight: 600; color: #fff; margin-bottom: .8rem; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.site-footer a { color: #e8ddd7; text-decoration: none; }
.site-footer a:hover { color: var(--brand-accent); }
.footer-base { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .1); color: #8f827b; font-size: .82rem; }

/* Buttons and inputs ---------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 50px; padding: .7rem 1.6rem; border-radius: 999px;
  border: 1.5px solid var(--brand-primary); background: var(--brand-primary); color: #fff;
  font: 500 1rem var(--font-body); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .15s, border-color .15s, transform .15s var(--ease), box-shadow .15s;
}
.btn:hover { background: var(--brand-primary-dark); border-color: var(--brand-primary-dark); transform: translateY(-1px); box-shadow: 0 10px 20px -12px rgba(224, 31, 38, .8); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-outline { background: transparent; color: var(--ink); border-color: #cfc6bb; }
.btn-outline:hover { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: none; }
.btn-gold { background: var(--brand-primary); }
.btn-light { background: #fff; color: var(--ink); border-color: #fff; }
.btn-light:hover { background: var(--brand-accent); border-color: var(--brand-accent); color: var(--ink); box-shadow: 0 10px 24px -12px rgba(255, 205, 10, .8); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.btn-ghost:hover { background: rgba(255, 255, 255, .1); border-color: #fff; box-shadow: none; }
.btn-wide { width: 100%; }
.btn .arrow { transition: transform .2s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.btn-link { background: none; border: none; color: var(--brand-primary); text-decoration: underline; cursor: pointer; font: 500 .95rem var(--font-body); padding: .25rem 0; }
.btn-row { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
label { font-weight: 500; display: block; margin-bottom: .35rem; font-size: .93rem; }
input:not([type]), input[type=text], input[type=email], input[type=tel], input[type=number],
input[type=password], input[type=date], select, textarea {
  width: 100%; min-height: 52px; padding: .65rem .95rem; font: 16px var(--font-body);
  border: 1px solid #d2cabf; border-radius: 10px; background: #fff; color: var(--text-primary);
  transition: border-color .15s, box-shadow .15s;
}
input:hover, select:hover, textarea:hover { border-color: #a99f93; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(255, 205, 10, .35); }
input[readonly] { background: var(--surface-alt); }
textarea { min-height: 100px; resize: vertical; }
input[aria-invalid=true], textarea[aria-invalid=true] { border-color: var(--error); box-shadow: 0 0 0 4px rgba(224, 31, 38, .12); }
.field { margin-bottom: 1.15rem; }
.field .hint { font-size: .84rem; color: var(--text-muted); margin: .35rem 0 0; }
.counter { float: right; font-weight: 400; color: var(--text-muted); font-size: .84rem; font-variant-numeric: tabular-nums; }
.check { display: flex; gap: .75rem; align-items: flex-start; font-weight: 400; cursor: pointer; line-height: 1.5; }
.check input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--brand-primary); flex: none; }
.grid-2 { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* Chips, tiles, swatches ------------------------------------------------ */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  min-height: 44px; padding: .5rem 1.15rem; border-radius: 999px; border: 1px solid #d6cec4;
  background: #fff; color: var(--ink); font: 500 .93rem var(--font-body); cursor: pointer;
  transition: border-color .15s, background-color .15s, color .15s;
}
.chip:hover:not(:disabled) { border-color: var(--ink); }
.chip[aria-pressed=true], .chip[aria-current=page] { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip:disabled { color: #b8b0a7; background: #faf8f6; border-style: dashed; cursor: not-allowed; }
.tiles { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.tile {
  position: relative; display: flex; flex-direction: column; gap: .35rem; text-align: left; padding: .75rem;
  border: 1.5px solid var(--line); border-radius: var(--radius-m); background: #fff; cursor: pointer;
  font: inherit; color: inherit; transition: border-color .15s, box-shadow .2s, transform .2s var(--ease);
}
.tile:hover { border-color: #b5aa9d; transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.tile img { aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: var(--surface-alt); width: 100%; }
.tile strong { font-weight: 600; font-size: .96rem; }
.tile .small { line-height: 1.45; }
.tile[aria-pressed=true] { border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(224, 31, 38, .14); background: var(--brand-primary-tint); }
.tile[aria-pressed=true]::after {
  content: ""; position: absolute; top: .6rem; right: .6rem; width: 26px; height: 26px; border-radius: 50%;
  background: var(--brand-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E") center/15px no-repeat;
  box-shadow: 0 4px 10px -4px rgba(224, 31, 38, .8);
}
.tile .tile-price { font-weight: 600; color: var(--brand-accent-text); font-size: .86rem; }
.swatch { width: 50px; height: 50px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px #d2cabf; cursor: pointer; padding: 0; transition: transform .15s var(--ease); }
.swatch:hover { transform: scale(1.08); }
.swatch[aria-pressed=true] { box-shadow: 0 0 0 2px var(--ink); transform: scale(1.08); }

/* Panels ---------------------------------------------------------------- */
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-m); padding: 1.75rem; }
.panel-title { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.badge { display: inline-block; padding: .2rem .7rem; border-radius: 999px; background: var(--surface-alt); color: var(--ink); font-size: .78rem; font-weight: 500; }
.badge-gold { background: #fff3c2; color: var(--brand-accent-text); }
.badge-error { background: var(--brand-primary-tint); color: var(--error); }
.notice { padding: 1rem 1.2rem; border-radius: var(--radius-m); background: var(--surface-alt); border: 1px solid var(--line); }
.notice p:last-child { margin: 0; }
.notice-error { background: var(--brand-primary-tint); border-color: #f6c8ca; }
.notice-success { background: #ecf6ef; border-color: #c4e3cd; }
.trust-list { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: .6rem; font-size: .88rem; color: var(--text-muted); }
.trust-list li { display: flex; gap: .6rem; align-items: center; }
.trust-list svg { width: 18px; height: 18px; color: var(--brand-accent-deep); flex: none; }

/* Home: velvet hero with the turning coin ------------------------------ */
.hero {
  position: relative; overflow: hidden; color: #f3ebe6;
  background: radial-gradient(ellipse at 70% 45%, rgba(120, 30, 45, .55), transparent 60%),
    url("/static/img/hero/velvet.webp") center/cover, var(--velvet);
}
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 120px; background: linear-gradient(to bottom, transparent, rgba(31, 13, 16, .55)); pointer-events: none; }
.hero .wrap { position: relative; z-index: 1; display: grid; gap: 3rem; grid-template-columns: 1.05fr 1fr; align-items: center; min-height: min(78vh, 720px); padding-top: 3rem; padding-bottom: 4rem; }
.hero h1 { color: #fff; font-size: clamp(2.6rem, 6vw, 4.8rem); font-weight: 500; line-height: 1.02; letter-spacing: -0.02em; max-width: 12ch; }
.hero-lede { font-size: 1.12rem; color: #d9cbc4; max-width: 42ch; margin-bottom: 2rem; }
.festive { display: inline-flex; gap: .6rem; align-items: center; font-weight: 500; color: var(--brand-accent); font-size: .95rem; margin-bottom: 1.25rem; }
.festive::before { content: ""; width: 28px; height: 1.5px; background: var(--brand-accent); }
.hero-actions { display: flex; gap: .85rem; flex-wrap: wrap; }
.hero-stage { position: relative; display: grid; place-items: center; }
.coin-glow { position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 205, 10, .35), rgba(255, 205, 10, 0) 65%); filter: blur(10px); }
.coin3d { position: relative; width: min(420px, 82%); aspect-ratio: 1; perspective: 1400px; }
.coin3d-inner { position: absolute; inset: 0; transform-style: preserve-3d; animation: coin-turn 16s cubic-bezier(.45, 0, .55, 1) infinite; }
.coin3d:hover .coin3d-inner { animation-play-state: paused; }
.coin3d-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 50%; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .55)); }
.coin3d-face img { width: 100%; height: 100%; object-fit: contain; display: block; }
.coin3d-face::after { content: ""; position: absolute; inset: 6%; border-radius: 50%; background: var(--gold-sheen); background-size: 250% 100%; animation: sheen 5s ease-in-out infinite; mix-blend-mode: soft-light; }
.coin3d-back { transform: rotateY(180deg); }
@keyframes coin-turn { 0%, 38% { transform: rotateY(-12deg); } 50%, 88% { transform: rotateY(168deg); } 100% { transform: rotateY(348deg); } }
@keyframes sheen { 0%, 60% { background-position: 160% 0; } 100% { background-position: -60% 0; } }
.rate-card {
  position: absolute; left: -2%; bottom: -2%; width: 290px; padding: 1rem 1.2rem; border-radius: var(--radius-m);
  background: rgba(31, 13, 16, .62); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: #e9ddd7; box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .7);
}
.rate-card .rate-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.rate-card .label { font-size: .8rem; color: #b8a8a0; white-space: nowrap; }
.rate-card .rate-live { white-space: nowrap; }
.rate-card strong { color: var(--brand-accent); font-size: 1.35rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.rate-card .sub strong { font-size: 1rem; color: #f3d77a; }
.rate-card svg { display: block; width: 100%; height: 44px; margin: .5rem 0; overflow: visible; }
.rate-card .spark-line { fill: none; stroke: var(--brand-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.rate-card .spark-fill { fill: rgba(255, 205, 10, .16); }
.rate-card .rate-live { margin: 0; font-size: .75rem; }

.section { padding-top: 5rem; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 1.5rem; margin-bottom: 1.75rem; flex-wrap: wrap; }
.section-head h2 { margin: 0; }
.section-head p { color: var(--text-muted); max-width: 52ch; margin: 0; }
.paths { display: grid; gap: 1.25rem; grid-template-columns: 1fr 1fr; }
.path-card {
  position: relative; overflow: hidden; display: grid; align-content: end; min-height: 360px; padding: 2rem;
  border-radius: var(--radius-l); text-decoration: none; color: #fff; isolation: isolate;
}
.path-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s var(--ease); }
.path-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(20, 8, 10, .9) 12%, rgba(20, 8, 10, .05) 72%); }
.path-card:hover img { transform: scale(1.05); }
.path-card h3 { color: #fff; font-size: clamp(1.7rem, 3vw, 2.2rem); margin-bottom: .35rem; }
.path-card p { color: #eadcd5; max-width: 36ch; }
.path-card .btn { justify-self: start; margin-top: .5rem; }
.designs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 1fr); gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .5rem 0 1.25rem; scrollbar-width: thin; }
.design { scroll-snap-align: start; text-decoration: none; color: var(--ink); text-align: center; }
.design .disc { aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #fff, var(--surface-alt) 70%); padding: 9%; transition: transform .35s var(--ease); }
.design .disc img { border-radius: 50%; width: 100%; height: 100%; object-fit: cover; box-shadow: 0 18px 30px -18px rgba(102, 70, 0, .9); }
.design:hover .disc { transform: translateY(-6px) rotate(-4deg); }
.design strong { display: block; margin-top: .8rem; font-family: var(--font-heading); font-size: 1.2rem; }
.design span { color: var(--text-muted); font-size: .85rem; }
.journey { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(4, 1fr); counter-reset: step; }
.journey li { position: relative; padding: 1.75rem 1.5rem 1.5rem; border-radius: var(--radius-m); background: var(--surface-alt); counter-increment: step; }
.journey li::before {
  content: counter(step); display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; margin-bottom: 1rem;
  background: var(--gold-ribbon); color: #231f20; font-weight: 600; box-shadow: 0 8px 16px -8px rgba(150, 105, 1, .9);
}
.journey h3 { font-family: var(--font-body); font-weight: 600; font-size: 1.02rem; }
.journey p { color: var(--text-muted); font-size: .92rem; margin: 0; }
.packs-row { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.pack-feature { display: grid; grid-template-columns: 150px 1fr; gap: 1.25rem; align-items: center; padding: 1.1rem; border-radius: var(--radius-m); border: 1px solid var(--line); background: #fff; }
.pack-feature img { border-radius: 10px; aspect-ratio: 1; object-fit: cover; }
.pack-feature h3 { margin-bottom: .25rem; }
.trust-band { display: grid; gap: 1.5rem; grid-template-columns: repeat(4, 1fr); padding: 2.25rem; border-radius: var(--radius-l); background: var(--velvet); color: #e3d6cf; }
.trust-band div { display: grid; gap: .45rem; align-content: start; }
.trust-band svg { width: 30px; height: 30px; color: var(--brand-accent); }
.trust-band strong { color: #fff; font-weight: 600; }
.trust-band span { font-size: .88rem; color: #b8a8a0; }
.faq { display: grid; gap: .75rem; max-width: 820px; }
.faq details { border: 1px solid var(--line); border-radius: var(--radius-m); padding: 0 1.25rem; background: #fff; transition: box-shadow .2s; }
.faq details[open] { box-shadow: var(--shadow-lift); }
.faq summary { cursor: pointer; list-style: none; padding: 1.1rem 0; font-weight: 500; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--brand-primary); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--text-muted); padding-bottom: 1.1rem; margin: 0; }

/* Catalogue ------------------------------------------------------------- */
.shop-head { background: var(--surface-alt); padding: 2.75rem 0 2.25rem; }
.shop-head h1 { margin-bottom: .4rem; }
.shop-head p { color: var(--text-muted); max-width: var(--measure); margin: 0; }
.toolbar { position: sticky; top: 78px; z-index: 10; background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.toolbar .wrap { display: flex; gap: 1.5rem; align-items: center; padding-top: .75rem; padding-bottom: .75rem; overflow-x: auto; scrollbar-width: none; }
.toolbar .wrap::-webkit-scrollbar { display: none; }
.filter-group { display: flex; gap: .4rem; align-items: center; flex: none; }
.filter-group > span { font-size: .82rem; color: var(--text-muted); margin-right: .2rem; }
.filter-group .chips { flex-wrap: nowrap; }
.filter-group .chip { min-height: 38px; padding: .3rem .9rem; font-size: .86rem; }
.toolbar select { width: auto; min-height: 40px; border-radius: 999px; padding: .3rem 1rem; font-size: .88rem; margin-left: auto; flex: none; }
.result-line { display: flex; justify-content: space-between; gap: 1rem; color: var(--text-muted); font-size: .9rem; margin: 1.5rem 0 1.25rem; }
.product-grid { display: grid; gap: 2rem 1.5rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.product-card { position: relative; display: flex; flex-direction: column; gap: .15rem; text-decoration: none; color: inherit; }
.product-card .media { position: relative; background: radial-gradient(circle at 50% 40%, #fff, var(--surface-alt) 75%); border-radius: var(--radius-m); aspect-ratio: 1; overflow: hidden; margin-bottom: .75rem; }
.product-card .media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.product-card:hover .media img { transform: scale(1.06); }
.product-card .media .badge { position: absolute; top: .75rem; left: .75rem; background: rgba(255, 255, 255, .92); }
.product-card .quick { position: absolute; left: .75rem; right: .75rem; bottom: .75rem; text-align: center; padding: .6rem; border-radius: 999px; background: var(--ink); color: #fff; font-size: .88rem; font-weight: 500; opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s var(--ease); }
.product-card:hover .quick, .product-card:focus-visible .quick { opacity: 1; transform: none; }
.product-card h3 { font-size: 1.2rem; margin: 0; }
.product-card .meta { color: var(--text-muted); font-size: .86rem; margin: 0; }
.product-card .price { font-size: 1.12rem; margin: .3rem 0 0; }
.product-card .eta { color: var(--text-muted); font-size: .8rem; margin: 0; }
.gift-packs { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.gift-pack { display: grid; grid-template-columns: 130px 1fr; gap: 1.1rem; align-items: center; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius-m); }
.gift-pack img { border-radius: 10px; aspect-ratio: 1; object-fit: cover; }

/* Journey tracker -------------------------------------------------------- */
.tracker { list-style: none; display: grid; grid-template-columns: repeat(8, 1fr); gap: .5rem; padding: 0; margin: 0 0 2rem; }
.tracker li { font-size: .8rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tracker li::before { content: ""; display: block; height: 4px; border-radius: 4px; background: var(--line); margin-bottom: .55rem; transition: background .3s; }
.tracker li.done::before { background: var(--gold-ribbon); }
.tracker li.done { color: var(--ink); }
.tracker li[aria-current=step]::before { background: var(--brand-primary); }
.tracker li[aria-current=step] { color: var(--brand-primary); font-weight: 600; }
.tracker button { all: unset; cursor: pointer; text-decoration: underline; text-decoration-color: #cfc6bb; text-underline-offset: 3px; }
.tracker button:hover { color: var(--brand-primary); }
.tracker button:focus-visible { outline: 3px solid var(--brand-accent); }
.step-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: .25rem; }
.step-label { font-weight: 600; color: var(--brand-primary); margin: 0; font-size: .9rem; }

/* Configurator: display case + options + sticky action bar ------------ */
.configurator { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; padding-bottom: 7rem; }
.preview-panel { position: sticky; top: 100px; }
.preview-stage {
  position: relative; aspect-ratio: 1; border-radius: var(--radius-l); overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 42%, rgba(255, 214, 120, .22), transparent 55%), url("/static/img/hero/velvet.webp") center/cover, var(--velvet);
  box-shadow: inset 0 0 80px rgba(0, 0, 0, .55), var(--shadow-lift);
}
.preview-stage img { width: 78%; height: 78%; object-fit: cover; border-radius: 18px; transition: opacity .35s; box-shadow: 0 0 0 1px rgba(255, 214, 120, .35), 0 30px 50px -20px rgba(0, 0, 0, .85); }
.preview-stage.is-pack img { width: 84%; height: 84%; }
.preview-stage.is-loading::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 215, 120, .22) 50%, transparent 65%); background-size: 250% 100%; animation: shimmer 1.6s linear infinite; pointer-events: none; }
@keyframes shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.preview-status { position: absolute; z-index: 1; bottom: 1rem; left: 50%; transform: translateX(-50%); background: rgba(20, 8, 10, .78); backdrop-filter: blur(6px); color: #fff; border-radius: 999px; padding: .45rem 1rem; font-size: .84rem; margin: 0; white-space: nowrap; max-width: 92%; overflow: hidden; text-overflow: ellipsis; }
.preview-status.error-text { background: var(--error); color: #fff; }
.preview-tabs { position: absolute; z-index: 1; top: 1rem; left: 1rem; display: flex; gap: .35rem; }
.preview-tabs .chip { min-height: 34px; padding: .25rem .9rem; font-size: .82rem; background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .3); }
.preview-tabs .chip[aria-pressed=true] { background: #fff; color: var(--ink); border-color: #fff; }
.disclaimer { font-size: .82rem; color: var(--text-muted); margin: .9rem 0 0; }
.config-panel h1 { font-size: clamp(1.8rem, 3vw, 2.5rem); margin-top: .5rem; }
.config-panel h2 { font-family: var(--font-body); font-size: 1rem; font-weight: 600; margin: 1.75rem 0 .7rem; }
.price-summary { margin-top: 1.5rem; padding: 1.25rem 1.4rem; border-radius: var(--radius-m); background: var(--surface-alt); }
.price-summary h2 { font-family: var(--font-body); font-size: 1rem; font-weight: 600; margin: 0 0 .3rem; }
.price-summary dl { display: grid; grid-template-columns: 1fr auto; gap: .4rem 1rem; margin: .75rem 0; }
.price-summary dt { color: var(--text-muted); }
.price-summary dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.price-summary .total, .price-summary dd.total { font-size: 1.35rem; font-weight: 600; color: var(--ink); }
.panel-actions { display: flex; justify-content: space-between; gap: .75rem; margin-top: 2rem; flex-wrap: wrap; }
.action-bar {
  position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, .94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line); box-shadow: 0 -12px 30px -20px rgba(35, 31, 32, .5);
}
.action-bar .wrap { display: flex; align-items: center; gap: 1rem; min-height: 84px; }
.action-bar .bar-price { display: grid; line-height: 1.25; }
.action-bar .bar-price small { color: var(--text-muted); font-size: .8rem; }
.action-bar .bar-price strong { font-size: 1.35rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.action-bar .bar-price.bump strong { animation: pricebump .6s var(--ease); }
@keyframes pricebump { 40% { color: var(--brand-primary); } }
.action-bar .bar-buttons { margin-left: auto; display: flex; gap: .6rem; }
.action-bar [data-bar-error] { margin: 0; max-width: 36ch; }
.path-options { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.path-option { padding: 1.6rem; gap: .5rem; }
.path-option strong { font-family: var(--font-heading); font-size: 1.5rem; }
.qty-stepper { display: flex; align-items: stretch; max-width: 240px; margin-bottom: 1rem; }
.qty-stepper .btn { min-width: 56px; padding: 0; font-size: 1.35rem; border-radius: 0; border-color: #d2cabf; background: #fff; color: var(--ink); }
.qty-stepper .btn:hover { background: var(--ink); color: #fff; transform: none; box-shadow: none; }
.qty-stepper .btn:first-child { border-radius: 999px 0 0 999px; }
.qty-stepper .btn:last-child { border-radius: 0 999px 999px 0; }
.qty-stepper input { text-align: center; border-radius: 0; border-left: 0; border-right: 0; font-weight: 600; font-size: 1.15rem; }
.tier-nudge { display: flex; gap: .6rem; align-items: center; background: #fff7d1; padding: .8rem 1rem; border-radius: var(--radius-m); color: var(--brand-accent-text); font-weight: 500; margin: 0; }
.tier-nudge::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--gold-ribbon); }
.upload-box { border: 1.5px dashed #cbbfb1; border-radius: var(--radius-m); padding: 1.25rem; background: #fdfcfa; transition: border-color .15s, background-color .15s; }
.upload-box:hover { border-color: var(--brand-accent-deep); background: #fffbef; }
.upload-box h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 600; }
.upload-thumb { display: flex; gap: .9rem; align-items: center; margin-bottom: .8rem; }
.upload-thumb img { width: 80px; height: 80px; object-fit: contain; background: #fff; border-radius: 10px; border: 1px solid var(--line); }

/* Cart and checkout ----------------------------------------------------- */
.cart-layout, .checkout-layout { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); align-items: start; }
.summary-panel { position: sticky; top: 100px; background: var(--surface-alt); border: 0; }
.cart-line { display: grid; gap: 1.25rem; grid-template-columns: 120px 1fr; padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.cart-line img { width: 120px; height: 120px; object-fit: cover; border-radius: var(--radius-m); background: var(--surface-alt); }
.cart-line h3 { font-size: 1.2rem; margin: 0; }
.cart-line ul { margin: .35rem 0; padding-left: 1.1rem; }
.cart-line details summary { cursor: pointer; font-weight: 500; }
.line-head { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.items { width: 100%; border-collapse: collapse; font-size: .88rem; margin-top: .5rem; }
.items td { padding: .3rem 0; border-bottom: 1px dotted var(--line); }
.items td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.lock-timer { font-size: 1.8rem; font-weight: 600; color: var(--brand-primary); font-variant-numeric: tabular-nums; margin: 0; }
.methods { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); margin-bottom: 1.25rem; }
.methods .chip { border-radius: 12px; min-height: 56px; }
.otp-row { display: flex; gap: .5rem; }
.otp-row input { max-width: 210px; letter-spacing: .45em; font-weight: 600; font-size: 1.2rem; text-align: center; }
.empty-state { text-align: center; padding: 3rem 1.5rem; border-radius: var(--radius-l); background: var(--surface-alt); }
.empty-state img { width: 110px; margin: 0 auto 1rem; display: block; }

/* Confirmation and tracking -------------------------------------------- */
.order-no { font-variant-numeric: tabular-nums; font-weight: 600; }
.celebrate { display: grid; grid-template-columns: auto 1fr; gap: 1.75rem; align-items: center; padding: 2.25rem; border-radius: var(--radius-l); background: radial-gradient(circle at 15% 50%, rgba(255, 205, 10, .18), transparent 40%), var(--velvet); color: #e9ddd7; }
.celebrate h1 { color: #fff; }
.celebrate p { margin: 0; }
.celebrate img { width: 120px; animation: coin-pop 1s var(--ease) both; }
@keyframes coin-pop { from { transform: scale(.5) rotateY(90deg); opacity: 0; } }
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { position: relative; padding: 0 0 1.2rem 2.1rem; color: var(--text-muted); }
.timeline li::before { content: ""; position: absolute; left: 0; top: .3rem; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line); background: #fff; }
.timeline li:not(:last-child)::after { content: ""; position: absolute; left: 8px; top: 1.45rem; bottom: 0; width: 2px; background: var(--line); }
.timeline li.done { color: var(--ink); font-weight: 500; }
.timeline li.done::before { background: var(--gold-ribbon); border-color: var(--brand-accent-deep); }
.timeline li.done:not(:last-child)::after { background: var(--brand-accent-deep); }
.proof-images { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.proof-images img { border-radius: var(--radius-m); border: 1px solid var(--line); }
.proof-images figure { margin: 0; }
.track-lookup { max-width: 640px; }

/* Reveal on scroll (one orchestrated motion; off for reduced motion) */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 980px) {
  .hero .wrap, .configurator, .cart-layout, .checkout-layout { grid-template-columns: 1fr; }
  .hero .wrap { min-height: 0; padding-top: 2.5rem; }
  .hero-stage { max-width: 460px; margin: 0 auto; width: 100%; }
  .preview-panel, .summary-panel { position: static; }
  .preview-stage { max-width: 440px; margin: 0 auto; }
  .paths, .journey, .trust-band { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  :root { --gutter: 16px; }
  .rate-rail .wrap { gap: .8rem; }
  .rate-rail .wrap > span:first-child, .rate-rail .per { display: none; }
  .rate-live { font-size: 0; }
  .site-header .wrap { min-height: 64px; gap: .5rem; }
  .toolbar { top: 64px; }
  .logo img { height: 44px; }
  .nav { gap: 0; }
  .nav a { padding: .45rem .55rem; font-size: .86rem; }
  .nav .nav-hide-sm { display: none; }
  .hero h1 { font-size: 2.6rem; }
  .rate-card { position: relative; left: auto; bottom: auto; width: 100%; margin-top: -1rem; }
  .paths, .journey, .trust-band, .footer-grid { grid-template-columns: 1fr; }
  .path-card { min-height: 280px; }
  .tracker li { font-size: 0; }
  .card { padding: 1.25rem; }
  .cart-line { grid-template-columns: 84px 1fr; }
  .cart-line img { width: 84px; height: 84px; }
  .pack-feature, .gift-pack { grid-template-columns: 96px 1fr; }
  .action-bar .wrap { min-height: 72px; gap: .6rem; }
  .action-bar .bar-price strong { font-size: 1.1rem; }
  .action-bar .bar-buttons .btn { padding: .6rem 1.1rem; min-height: 46px; }
  .action-bar [data-bar-error] { display: none; }
  .preview-stage { max-width: 270px; }
  .disclaimer { text-align: center; font-size: .78rem; }
  .action-bar .bar-price small { display: none; }
  .celebrate { grid-template-columns: 1fr; text-align: center; justify-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
}
.empty-state .btn-row { justify-content: center; }