/* ==========================================================
   TLS Merch — "Vilakku" design system
   Palette sampled from the TLS logo. See DESIGN.md.
   ========================================================== */
:root{
  --paper:#FBF6EE; --paper-2:#F4ECDF; --paper-3:#EADFCC; --surface:#FFFDF9;
  --ink:#2B1A0E; --ink-hover:#3E2716; --teak:#67401F; --clay:#6E5A4A;
  --line:rgba(103,64,31,.14); --line-strong:rgba(103,64,31,.28);
  --marigold:#EFB252; --saffron:#D2692F; --saffron-deep:#9C4318; --kumkum:#CE4B3E; --error:#A3322A;
  --night:#1C120A; --night-2:#261810; --night-3:#33211A; --night-line:rgba(239,178,82,.16);
  --night-text:#F6EBDD; --night-muted:#BFA992; --night-error:#E8826F;
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1); --ease-drawer:cubic-bezier(.32,.72,0,1);
  --spring:cubic-bezier(.23,1,.32,1);
  --shadow-lift:0 24px 48px -24px rgba(67,40,18,.30),0 2px 6px -2px rgba(67,40,18,.08);
  --r-tile:28px; --r-panel:32px; --r-input:14px;
  --font-display:"Fraunces",ui-serif,serif;
  --font-ui:"Outfit",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --font-ta:"Arima","Anek Tamil","Noto Sans Tamil","Tamil Sangam MN","Latha",sans-serif;
  --font-ta-ui:"Anek Tamil","Noto Sans Tamil","Tamil Sangam MN","Latha",sans-serif;
  --nav-h:72px;
}
@supports (transition-timing-function: linear(0, 1)){
  :root{ --spring:linear(0, .0369, .1219, .2275, .3374, .4422, .5372, .6204, .6916, .7513, .8009, .8414, .8743, .9008, .922, .9389, .9523, .9628, .9711, .9776, .9826, .9866, .9897, .992, .9939, .9953, .9964, .9972, .9979, .9984, 1); }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 8px);scrollbar-gutter:stable}
[hidden]{display:none!important}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-ui);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
body.locked{overflow:hidden}
img,svg{display:block;max-width:100%}
svg svg{max-width:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:inherit}
input{font:inherit}
p{margin:0}
:focus-visible{outline:2px solid var(--saffron);outline-offset:3px;border-radius:10px}
::selection{background:rgba(239,178,82,.45)}
.ta{font-family:var(--font-ta-ui)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wrap{max-width:1320px;margin:0 auto;padding:0 24px}
.ico{width:20px;height:20px;flex:none}
.ico-sm{width:16px;height:16px;flex:none}
.skip{position:absolute;left:16px;top:-60px;z-index:200;background:var(--ink);color:var(--paper);padding:12px 16px;border-radius:12px;text-decoration:none}
.skip:focus{top:12px}

/* paper grain: fixed, pointer-events none (never on scrolling layers) */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .17 0 0 0 0 .10 0 0 0 0 .05 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 26px;border-radius:999px;font-weight:500;font-size:16px;letter-spacing:-.005em;text-decoration:none;white-space:nowrap;
  transition:transform 160ms var(--ease-out),background-color 200ms ease,color 200ms ease,border-color 200ms ease,opacity 200ms ease}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-ghost{border:1px solid var(--line-strong);color:var(--ink);background:transparent}
.btn-lamp{background:var(--marigold);color:var(--ink);font-weight:600}
.btn-block{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.btn .ico{transition:transform 200ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{background:var(--ink-hover)}
  .btn-ghost:hover{border-color:var(--teak)}
  .btn-lamp:hover{background:#F3BE66}
  .btn:hover .ico-arrow{transform:translateX(3px)}
}
/* CTA ripple ring (adapted from Uthraa's glow-pulse-ring; outline, not glow) */
.btn-ring{isolation:isolate}
.btn-ring::before{content:"";position:absolute;inset:-6px;border-radius:inherit;border:1.5px solid var(--saffron);opacity:0;z-index:-1;animation:ring 2.8s var(--ease-out) 2.2s infinite}
@keyframes ring{0%{opacity:.6;transform:scale(.94)}70%,100%{opacity:0;transform:scale(1.1)}}
.icon-btn{width:44px;height:44px;border-radius:999px;display:grid;place-items:center;flex:none;transition:background-color 150ms ease,transform 160ms var(--ease-out)}
.icon-btn:active{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){.icon-btn:hover{background:var(--paper-2)}}

/* ---------- announcement + nav ---------- */
.announce{background:var(--ink);color:#EADCC8;font-size:13.5px}
.announce-in{display:flex;align-items:center;justify-content:center;gap:10px;min-height:40px;text-align:center}
.announce strong{color:var(--marigold);font-weight:500}
.announce .sep{opacity:.4}
.nav{position:sticky;top:0;z-index:40;background:rgba(251,246,238,.84);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color 200ms ease}
.nav.scrolled{border-bottom-color:var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--nav-h)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0}
.brand img{height:46px;width:auto}
.brand-text{display:grid;line-height:1.15}
.brand-text strong{font-weight:600;font-size:16px;letter-spacing:-.01em}
.brand-text span{font-family:var(--font-ta-ui);font-size:12.5px;color:var(--clay)}
.nav-links{display:flex;gap:2px}
.nav-links a{padding:10px 16px;border-radius:999px;text-decoration:none;font-size:15px;color:var(--clay);transition:color 150ms ease,background-color 150ms ease}
@media (hover:hover) and (pointer:fine){.nav-links a:hover{color:var(--ink);background:var(--paper-2)}}
.bag-btn{position:relative;display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 10px 0 8px;border-radius:999px;background:var(--ink);color:var(--paper);transition:transform 160ms var(--ease-out),background-color 200ms ease}
.bag-btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.bag-btn:hover{background:var(--ink-hover)}}
.bag-btn .diya{width:34px;height:34px;margin-top:-4px}
.bag-label{font-weight:500;font-size:15px;padding-right:4px}
.bag-count{position:relative;min-width:26px;height:26px;padding:0 6px;border-radius:999px;background:var(--marigold);color:var(--ink);font-family:var(--font-mono);font-size:13px;font-weight:500;display:grid;place-items:center;overflow:hidden}
.bag-count span{grid-area:1/1}

/* ---------- hero: merch panel | logo stage | collection copy ---------- */
.hero{position:relative;padding:40px 0 72px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.9;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cpath d='M0 36 36 0 72 36 36 72Z' fill='none' stroke='%2367401F' stroke-opacity='.09'/%3E%3Cg fill='%2367401F' fill-opacity='.16'%3E%3Ccircle cx='36' cy='36' r='1.7'/%3E%3Ccircle cx='0' cy='0' r='1.7'/%3E%3Ccircle cx='72' cy='0' r='1.7'/%3E%3Ccircle cx='0' cy='72' r='1.7'/%3E%3Ccircle cx='72' cy='72' r='1.7'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image:radial-gradient(46% 70% at 50% 44%,#000 0%,transparent 75%);mask-image:radial-gradient(46% 70% at 50% 44%,#000 0%,transparent 75%)}
/* equal side columns keep the arch (the logo) on the page's centre line */
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px) minmax(0,1fr);gap:48px;align-items:center}
.hero-stage{position:relative;z-index:2;display:grid;justify-items:center}
.hero-merch{position:relative;z-index:1;justify-self:end;width:100%;max-width:340px}
.hero-copy{position:relative;z-index:1}
.status-pill{display:inline-flex;align-items:center;gap:10px;height:34px;padding:0 14px 0 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:13.5px;color:var(--clay)}
.status-pill strong{color:var(--ink);font-weight:500}
.ping{position:relative;width:8px;height:8px;border-radius:50%;background:var(--saffron);flex:none}
.ping::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--saffron);animation:ping 2.2s var(--ease-out) infinite}
@keyframes ping{0%{transform:scale(1);opacity:.55}75%,100%{transform:scale(3);opacity:0}}
.presents{margin-top:22px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--saffron-deep)}
.presents .ta{letter-spacing:0;text-transform:none;font-size:15px;color:var(--teak)}
/* ornament divider: hairlines draw outward from a kolam sparkle */
.ornament{display:flex;align-items:center;gap:10px;width:min(300px,100%);margin:18px 0 6px;color:var(--saffron)}
.orn-line{height:1px;flex:1;background:linear-gradient(90deg,rgba(210,105,47,0),rgba(210,105,47,.7));transform-origin:right center}
.orn-line.r{background:linear-gradient(90deg,rgba(210,105,47,.7),rgba(210,105,47,0));transform-origin:left center}
.orn-mark{width:16px;height:16px;flex:none}
.orn-dot{width:4px;height:4px;border-radius:50%;background:currentColor;flex:none;opacity:.7}
.hero-title{font-family:var(--font-display);font-weight:500;font-size:clamp(2.5rem,3.5vw,3.4rem);line-height:1.02;letter-spacing:-.028em;margin:14px 0 20px;font-variation-settings:"opsz" 144}
.hero-title .w{display:inline-block}
.hero-title em{font-style:italic;font-weight:400;color:var(--saffron-deep)}
.inline-tile{display:inline-block;vertical-align:middle;width:1.45em;height:.9em;border-radius:999px;margin:0 .06em;overflow:hidden;position:relative;top:-.08em;border:1px solid var(--line)}
.inline-tile>svg{width:100%;height:100%}
.hero-sub{font-size:17px;line-height:1.6;color:var(--clay);max-width:46ch}
.cd-block{margin:26px 0 28px}
.cd-cap{font-size:13px;color:var(--clay);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.cd{display:flex;gap:10px}
.cd-unit{display:grid;justify-items:center;gap:7px}
.cd-box{position:relative;width:64px;height:62px;border-radius:16px;border:1px solid var(--line-strong);background:var(--surface);display:grid;place-items:center;overflow:hidden;font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:24px;font-weight:500;color:var(--ink)}
.cd-box span{grid-area:1/1}
.cd-lab{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--clay)}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.hero-meta{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--clay)}

/* the stage: mandapam arch holding the TLS logo */
.arch{position:relative;width:100%;max-width:440px;aspect-ratio:4/5;border-radius:50% 50% 32px 32px / 40% 40% 32px 32px;overflow:hidden;isolation:isolate;
  background:radial-gradient(90% 60% at 50% 96%,#F6D9A6 0%,rgba(246,217,166,0) 70%),linear-gradient(180deg,#F7EFE2 0%,var(--paper-2) 100%);border:1px solid var(--line)}
.arch::after{content:"";position:absolute;inset:12px;border-radius:50% 50% 22px 22px / 40% 40% 22px 22px;border:1px dashed rgba(103,64,31,.22);pointer-events:none}
.arch-kolam{position:absolute;width:92%;left:4%;top:13%;color:var(--teak);opacity:.075}
.arch-bloom{position:absolute;left:50%;top:44%;width:96%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(closest-side,rgba(239,178,82,.42),rgba(239,178,82,.14) 55%,rgba(239,178,82,0))}
.arch-embers{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.garland{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;overflow:visible}
.garland .sway{transform-box:view-box;animation:sway var(--sd,5s) ease-in-out var(--sdl,0s) infinite alternate}
@keyframes sway{from{transform:rotate(calc(var(--sa,2.4deg) * -1))}to{transform:rotate(var(--sa,2.4deg))}}

/* logo, built from its own colour layers (assets/logo/*.webp, cut from the official file) */
.logo-build{position:absolute;left:50%;top:19.5%;width:57%;aspect-ratio:720/1006;translate:-50% 0;z-index:2}
.lb{position:absolute;inset:0;width:100%;height:100%;display:block}
.lb-flame{transform-origin:46% 42%}
@property --sweep{syntax:"<angle>";inherits:false;initial-value:360deg}
@property --wipe{syntax:"<percentage>";inherits:false;initial-value:100%}
/* ழ் then மி draw themselves around their bowls, like a brush stroke */
.lb-zh,.lb-mi{-webkit-mask-image:conic-gradient(from var(--from) at var(--at),#000 var(--sweep),transparent calc(var(--sweep) + 34deg));mask-image:conic-gradient(from var(--from) at var(--at),#000 var(--sweep),transparent calc(var(--sweep) + 34deg))}
.lb-zh{--from:20deg;--at:47% 54%}
.lb-mi{--from:205deg;--at:51% 43%}
/* இலக்கிய மன்றம் is written left to right; த lands from above, tip first */
.lb-words{-webkit-mask-image:linear-gradient(90deg,#000 calc(var(--wipe) - 6%),transparent var(--wipe));mask-image:linear-gradient(90deg,#000 calc(var(--wipe) - 6%),transparent var(--wipe))}
.lb-ta{-webkit-mask-image:linear-gradient(180deg,#000 calc(var(--wipe) - 7%),transparent var(--wipe));mask-image:linear-gradient(180deg,#000 calc(var(--wipe) - 7%),transparent var(--wipe))}
.logo-build.built .lb{-webkit-mask-image:none;mask-image:none}

/* merch panel: one card that cycles through the collection */
.merch-card{display:grid;gap:14px;padding:16px;border:1px solid var(--line);border-radius:var(--r-panel);background:var(--surface);box-shadow:0 30px 60px -40px rgba(67,40,18,.35)}
.merch-kicker{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 6px 0;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--saffron-deep)}
.merch-kicker .mono{letter-spacing:.04em;color:var(--clay);font-size:12.5px}
.merch-visual{position:relative;display:block;width:100%;aspect-ratio:1/1;border-radius:22px;overflow:hidden;isolation:isolate;transition:transform 160ms var(--ease-out);
  background:radial-gradient(80% 60% at 50% 100%,#F3D7A8 0%,rgba(243,215,168,0) 70%),var(--paper-2)}
.merch-visual:active{transform:scale(.985)}
.merch-visual .wm{position:absolute;width:74%;right:-20%;bottom:-16%;z-index:0;color:var(--teak);opacity:.07}
.merch-art{position:absolute;inset:6% 12% 4%;z-index:1;transition:transform 340ms var(--ease-out)}
.merch-art .art-layer{position:absolute;inset:0}
.merch-art .art-layer>svg{width:100%;height:100%}
@media (hover:hover) and (pointer:fine){.merch-visual:hover .merch-art{transform:translateY(-6px) scale(1.02)}}
.merch-meta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:baseline;padding:0 6px}
.merch-meta p{display:grid;overflow:hidden}
.merch-meta p>span{grid-area:1/1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.merch-name>span{white-space:normal;text-wrap:balance}
.merch-name{font-family:var(--font-display);font-size:24px;letter-spacing:-.02em;line-height:1.15;min-height:2.3em;align-content:start}
.merch-price{font-size:16px;grid-column:2;grid-row:1}
.merch-ta{font-family:var(--font-ta-ui);font-size:13.5px;color:var(--clay);grid-column:1/-1}
.merch-foot{display:flex;align-items:center;gap:4px;padding:0 0 0 6px}
.merch-bar{flex:1;height:2px;border-radius:2px;background:var(--line);overflow:hidden;margin-right:8px}
.merch-bar i{display:block;height:100%;background:var(--saffron);transform-origin:left center;transform:scaleX(0)}
.merch-bar i.run{animation:merchBar var(--dwell,4200ms) linear both}
.hero-merch.paused .merch-bar i.run{animation-play-state:paused}
@keyframes merchBar{to{transform:scaleX(1)}}
.merch-btn{width:44px;height:44px;border-radius:999px;display:grid;place-items:center;color:var(--ink);transition:transform 160ms var(--ease-out),background-color 200ms ease}
.merch-btn:active{transform:scale(.92)}
@media (hover:hover) and (pointer:fine){.merch-btn:hover{background:var(--paper-2)}}

/* load choreography. Everything waits (paused at its first frame) until the logo layers have
   decoded and JS adds .go, so the whole sequence plays as one piece. */
.js .enter{animation:enterUp 760ms var(--ease-out) both;animation-delay:calc(var(--hd,0ms) + var(--d,0ms))}
@keyframes enterUp{from{opacity:0;transform:translateY(14px);filter:blur(5px)}to{opacity:1;transform:none;filter:blur(0)}}
.js .hero-title .w{animation:wordIn 820ms var(--ease-out) both;animation-delay:calc(var(--hd,0ms) + 380ms + var(--i) * 70ms)}
@keyframes wordIn{from{opacity:0;transform:translateY(.32em);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
.js .ornament .orn-line{animation:drawX 900ms var(--ease-out) both;animation-delay:calc(var(--hd,0ms) + var(--d,300ms))}
.js .ornament .orn-mark{animation:markIn 700ms var(--ease-out) both;animation-delay:calc(var(--hd,0ms) + var(--d,300ms) - 120ms)}
@keyframes drawX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes markIn{from{opacity:0;transform:scale(.6) rotate(-45deg)}to{opacity:1;transform:none}}

.js .arch{animation:archIn 900ms var(--ease-out) both}
@keyframes archIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.js .lb-base{animation:lbRise 900ms var(--ease-out) 150ms both}
@keyframes lbRise{from{opacity:0;transform:translateY(7%);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
.js .lb-words{animation:lbWipeX 700ms cubic-bezier(.33,0,.2,1) 420ms both}
.js .lb-zh{animation:lbDraw 900ms cubic-bezier(.45,0,.2,1) 560ms both}
.js .lb-mi{animation:lbDraw 860ms cubic-bezier(.45,0,.2,1) 1000ms both}
@keyframes lbDraw{from{--sweep:-34deg;opacity:.4}12%{opacity:1}to{--sweep:360deg;opacity:1}}
@keyframes lbWipeX{from{--wipe:18%}to{--wipe:84%}}
@keyframes lbWipeY{from{--wipe:0%}to{--wipe:50%}}
/* த: the tip appears first and the letter settles down onto மி on a spring */
.js .lb-flame{animation:lbDrop 900ms var(--spring) 1420ms both}
@keyframes lbDrop{from{opacity:0;transform:translateY(-9%) scale(.94)}35%{opacity:1}to{opacity:1;transform:none}}
.js .lb-ta{animation:lbWipeY 760ms cubic-bezier(.3,0,.25,1) 1420ms both}
.js .arch-bloom{animation:bloom 1400ms var(--ease-out) 1850ms both}
@keyframes bloom{from{opacity:0;transform:scale(.6)}40%{opacity:1}to{opacity:.55;transform:none}}
/* once built: the flame breathes */
.logo-build.built .lb-flame{animation:flicker 3.8s ease-in-out infinite alternate}
@keyframes flicker{0%{transform:none}30%{transform:scale(1.008,1.018) skewX(-.6deg)}62%{transform:scale(.996,1.006) skewX(.5deg)}100%{transform:scale(1.004,1.014) skewX(-.3deg)}}

/* the side panels come out from behind the arch once the flame lands */
.js .hero-merch{animation:fromLeft 1000ms var(--ease-out) 1650ms both}
.js .hero-copy{--hd:1700ms;animation:fromRight 1000ms var(--ease-out) 1650ms both}
@keyframes fromLeft{from{opacity:0;transform:translateX(42%) scale(.94);filter:blur(6px)}60%{opacity:1}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes fromRight{from{opacity:0;transform:translateX(-26%) scale(.96);filter:blur(6px)}60%{opacity:1}to{opacity:1;transform:none;filter:blur(0)}}
/* once in, drop the entrance so crossing a breakpoint (rotating a tablet) doesn't replay it */
.js .hero-merch.settled,.js .hero-copy.settled{animation:none}
.js .hero:not(.go) :is(.arch,.lb,.lb-flame,.arch-bloom,.hero-merch,.hero-copy,.enter,.hero-title .w,.ornament *){animation-play-state:paused}

/* scroll reveal */
.js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity 700ms ease,transform 800ms var(--ease-out);transition-delay:calc(var(--i,0) * 70ms)}
.js [data-reveal].in{opacity:1;transform:none}

/* ---------- marquee (uyir ezhuthukkal) ---------- */
.marquee{border-block:1px solid var(--line);overflow:hidden;padding:16px 0;background:var(--paper)}
.marquee-track{display:flex;width:max-content;animation:marquee 70s linear infinite}
.marquee-group{display:flex;align-items:center;gap:30px;padding-right:30px;font-family:var(--font-ta);font-size:clamp(28px,3.6vw,42px);color:var(--teak);line-height:1.2}
.marquee-group .word{color:var(--saffron-deep)}
.marquee-group svg{width:22px;height:22px;flex:none}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- section heads ---------- */
.kicker{font-family:var(--font-ta);font-size:18px;color:var(--saffron-deep);display:flex;align-items:center;gap:10px}
.kicker svg{width:14px;height:14px;color:var(--saffron)}
.h2{font-family:var(--font-display);font-weight:500;font-size:clamp(2.1rem,3.6vw,3.2rem);letter-spacing:-.022em;line-height:1.04;margin:8px 0 0;font-variation-settings:"opsz" 144}

/* ---------- shop ---------- */
.shop{padding:88px 0 56px}
/* section heads sit centred over their content */
.shop-head,.collect-head{text-align:center}
.shop-head{margin-bottom:28px}
.shop-head .kicker,.collect-head .kicker{justify-content:center}
.shop-note{color:var(--clay);font-size:15.5px}
.chips{position:sticky;top:var(--nav-h);z-index:30;display:flex;flex-wrap:wrap;gap:8px;padding:12px 0 16px;margin-bottom:8px;background:linear-gradient(var(--paper) 78%,rgba(251,246,238,0))}
.chip{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 12px 0 16px;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface);font-size:15px;color:var(--ink);
  transition:background-color 200ms ease,color 200ms ease,border-color 200ms ease,transform 160ms var(--ease-out)}
.chip:active{transform:scale(.97)}
.chip .ta{font-size:12.5px;color:var(--clay);transition:color 200ms ease}
.chip .count{font-family:var(--font-mono);font-size:12px;color:var(--clay);min-width:14px;transition:color 200ms ease}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chip[aria-pressed="true"] .ta,.chip[aria-pressed="true"] .count{color:#D8C4AC}
@media (hover:hover) and (pointer:fine){.chip[aria-pressed="false"]:hover{border-color:var(--teak)}}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:44px 24px;padding-top:8px}
.tile{display:flex;flex-direction:column;gap:14px;min-width:0;position:relative}
.tile[hidden]{display:none}
.tile.featured{grid-column:span 2;grid-row:span 2}
.tile-media{position:relative;display:flex;flex-direction:column}
.tile.featured .tile-media{flex:1}
.tile-visual{position:relative;display:block;width:100%;aspect-ratio:4/5;border-radius:var(--r-tile);background:var(--paper-2);overflow:hidden;isolation:isolate;transition:transform 160ms var(--ease-out);text-align:left}
.tile.featured .tile-visual{aspect-ratio:auto;flex:1;min-height:440px;background:radial-gradient(80% 60% at 50% 100%,#F3D7A8 0%,rgba(243,215,168,0) 70%),var(--paper-2)}
.tile-visual:active{transform:scale(.985)}
.tile-visual::before{content:"";position:absolute;inset:0;z-index:0;opacity:0;transition:opacity 220ms ease;background:radial-gradient(220px circle at var(--mx,50%) var(--my,40%),rgba(239,178,82,.28),rgba(239,178,82,0) 70%)}
.tile-visual .wm{position:absolute;width:74%;right:-20%;bottom:-16%;z-index:0;color:var(--teak);opacity:.07}
.tile-visual .art{position:absolute;inset:7% 9% 6%;z-index:1;transition:transform 340ms var(--ease-out)}
.tile.featured .tile-visual .art{inset:8% 14% 6%}
.tile-visual .art-layer{position:absolute;inset:0}
.tile-visual .art-layer>svg{width:100%;height:100%}
/* tees: front and back on a slow turntable, floating (art.js showcaseFor) */
.turn,.turn-float,.turn-spin,.face{position:absolute;inset:0}
.turn{perspective:1100px}
.turn svg{position:absolute;inset:0;width:100%;height:100%}
.turn-float{animation:teeFloat 4.6s ease-in-out infinite}
.turn-spin{transform-style:preserve-3d;animation:teeTurn 10s cubic-bezier(.65,0,.35,1) infinite}
.face{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:teeShade 10s cubic-bezier(.65,0,.35,1) infinite}
.face-back{transform:rotateY(180deg)}
.turn-shadow{transform-origin:50% 91.6%;animation:teeShadow 4.6s ease-in-out infinite}
@keyframes teeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes teeShadow{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.82);opacity:.55}}
@keyframes teeTurn{0%,40%{transform:rotateY(0deg)}50%,90%{transform:rotateY(180deg)}100%{transform:rotateY(360deg)}}
@keyframes teeShade{0%,40%,50%,90%,100%{filter:brightness(1)}45%,95%{filter:brightness(.78)}}
@media (hover:hover) and (pointer:fine){
  .tile-visual:hover::before{opacity:1}
  .tile-visual:hover .art{transform:translateY(-6px) scale(1.02)}
}
.badge{position:absolute;top:14px;left:14px;z-index:3;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:999px;background:var(--surface);font-size:12.5px;font-weight:500;color:var(--ink);border:1px solid var(--line);overflow:hidden;isolation:isolate}
.badge.warn{color:var(--saffron-deep)}
.badge.out{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.badge.win{background:var(--marigold);border-color:transparent}
.badge.win::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,rgba(255,250,235,.85) 50%,transparent 70%);background-size:250% 100%;animation:foil 4.5s ease-in-out 1.5s infinite}
@keyframes foil{0%{background-position:150% 0}35%,100%{background-position:-60% 0}}
.tile-add{position:absolute;right:12px;bottom:12px;z-index:3;width:48px;height:48px;border-radius:999px;background:var(--ink);color:var(--paper);display:grid;place-items:center;box-shadow:0 12px 22px -12px rgba(43,26,14,.6);transition:transform 160ms var(--ease-out),background-color 200ms ease}
.tile-add:active{transform:scale(.9)}
.tile-add[aria-disabled="true"]{background:var(--surface);color:var(--clay);box-shadow:none;border:1px solid var(--line)}
@media (hover:hover) and (pointer:fine){.tile-add:hover{background:var(--ink-hover)}}
.tile-meta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:baseline;padding:0 4px}
.tile-name{font-size:16.5px;font-weight:500;margin:0;letter-spacing:-.01em}
.tile.featured .tile-name{font-family:var(--font-display);font-size:26px;letter-spacing:-.02em}
.tile-ta{font-family:var(--font-ta-ui);font-size:13px;color:var(--clay);grid-column:1}
.tile-fee{grid-column:1/-1;font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:12.5px;color:var(--clay)}
.tile-fee:empty{display:none}
.qv-fee{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:13.5px;color:var(--clay)}
.tile-price{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:15px;grid-column:2;grid-row:1}
.tile.featured .tile-price{font-size:18px}
.tile-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 4px;min-height:32px}
.swatches{display:flex;align-items:center;margin-left:-7px}
.swatch{width:44px;height:44px;margin:-5px;border-radius:50%;display:grid;place-items:center} /* 44px tap target, 34px footprint */
.swatch i{width:18px;height:18px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(43,26,14,.2);transition:box-shadow 180ms ease,transform 160ms var(--ease-out)}
.swatch:active i{transform:scale(.88)}
.swatch[aria-checked="true"] i{box-shadow:inset 0 0 0 1px rgba(43,26,14,.2),0 0 0 2px var(--paper),0 0 0 3.5px var(--ink)}
.tile-sub{font-size:13px;color:var(--clay)}
/* skeleton */
.skel .tile-visual{background:var(--paper-2)}
.skel-line{height:14px;border-radius:8px;background:var(--paper-2)}
.shimmer{position:relative;overflow:hidden}
.shimmer::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,rgba(255,253,249,0),rgba(255,253,249,.75),rgba(255,253,249,0));animation:shimmer 1.3s ease-in-out infinite}
@keyframes shimmer{to{transform:translateX(100%)}}


/* ---------- collection timeline ---------- */
.collect{padding:24px 0 112px}
/* three equal steps, each centred under its dot; the thread runs from the first dot to the last */
.timeline{position:relative;list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.thread{position:absolute;left:calc((100% - 64px) / 6);top:0;height:24px;width:calc(100% - (100% - 64px) / 3);color:var(--teak);overflow:visible}
.thread path{fill:none;stroke:currentColor;stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1800ms var(--ease-in-out)}
.timeline.in .thread path{stroke-dashoffset:0}
.tstep{position:relative;padding-top:44px;text-align:center}
.tdot{position:absolute;top:0;left:50%;margin-left:-12px;width:24px;height:24px;border-radius:50%;background:var(--paper);border:1.5px solid var(--teak);display:grid;place-items:center}
.tdot::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--saffron)}
.tdate{font-family:var(--font-mono);font-size:13.5px;color:var(--saffron-deep)}
.tstep h3{font-size:19px;font-weight:500;margin:6px 0 8px;letter-spacing:-.01em}
.tstep p:last-child{color:var(--clay);font-size:15px;max-width:34ch;margin-inline:auto}

/* ---------- footer ---------- */
.footer{background:var(--ink);color:#E6D7C4;padding:56px 0 32px;position:relative;overflow:hidden}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px}
.logo-badge{display:grid;place-items:center;width:64px;height:64px;border-radius:20px;background:var(--paper)}
.logo-badge img{height:48px;width:auto}
.footer h4{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#BFA992;font-weight:500;margin:0 0 14px}
.footer p{color:#CDBBA6;font-size:15px;max-width:42ch}
.footer .ta{color:var(--marigold);font-family:var(--font-ta);font-size:18px}
.flinks{display:grid;gap:4px;justify-items:start}
.flinks button,.flinks a{min-height:44px;color:#E6D7C4;text-decoration:none;font-size:15px;transition:color 150ms ease}
@media (hover:hover) and (pointer:fine){.flinks button:hover,.flinks a:hover{color:var(--marigold)}}
.footer-base{margin-top:48px;padding-top:20px;border-top:1px solid rgba(239,178,82,.14);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:#A8927C}

/* ---------- overlays ---------- */
.scrim{position:fixed;inset:0;z-index:60;background:rgba(28,18,10,.42);opacity:0;transition:opacity 260ms ease}
.scrim.open{opacity:1}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:61;width:min(440px,100vw);background:var(--surface);display:flex;flex-direction:column;transform:translateX(100%);transition:transform 380ms var(--ease-drawer);box-shadow:-30px 0 60px -30px rgba(43,26,14,.35)}
.drawer.open{transform:none}
.drawer.closing{transition-duration:240ms}
.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 16px 16px 24px;border-bottom:1px solid var(--line)}
.drawer-title{display:flex;align-items:center;gap:10px}
.drawer-title .diya{width:44px;height:44px;margin-top:-6px}
.drawer-title h2{font-family:var(--font-display);font-weight:500;font-size:26px;margin:0;letter-spacing:-.02em;line-height:1}
.drawer-title p{font-family:var(--font-ta-ui);font-size:13px;color:var(--clay);margin-top:4px}
.drawer-body{flex:1;overflow-y:auto;padding:4px 24px;overscroll-behavior:contain}
.line-item{display:grid;grid-template-rows:1fr;transition:grid-template-rows 240ms var(--ease-out),opacity 180ms ease}
.line-item.removing{grid-template-rows:0fr;opacity:0}
.line-inner{overflow:hidden;min-height:0}
.line-row{display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);align-items:start}
.line-thumb{width:76px;height:92px;border-radius:16px;background:var(--paper-2);display:grid;place-items:center;overflow:hidden}
.line-thumb>svg{width:90%;height:90%}
.line-name{font-weight:500;font-size:15.5px;margin:0}
.line-var{font-size:13.5px;color:var(--clay);margin:2px 0 10px}
.line-price{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:15px;text-align:right;padding-top:1px}
.line-ctrl{display:flex;align-items:center;gap:6px}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--line-strong);border-radius:999px;height:46px}
.stepper button{width:44px;height:44px;border-radius:999px;display:grid;place-items:center;transition:background-color 150ms ease,transform 160ms var(--ease-out)}
.stepper button:active{transform:scale(.9)}
.stepper button[disabled]{opacity:.35;cursor:not-allowed}
.stepper output{min-width:22px;text-align:center;font-family:var(--font-mono);font-size:14px}
.remove-btn{font-size:13.5px;color:var(--clay);text-decoration:underline;text-underline-offset:3px;min-height:44px;padding:0 6px}
.drawer-foot{padding:18px 24px 22px;border-top:1px solid var(--line);display:grid;gap:14px;background:var(--surface)}
.sum-row{display:flex;justify-content:space-between;align-items:baseline}
.sum-row .mono{font-size:22px}
.foot-note{font-size:13.5px;color:var(--clay);display:flex;gap:8px;align-items:flex-start}
.foot-note .ico-sm{margin-top:2px}
.empty{display:grid;justify-items:center;text-align:center;gap:10px;padding:56px 16px 24px}
.empty .diya{width:132px;height:132px}
.empty h3{font-family:var(--font-display);font-size:26px;font-weight:500;margin:6px 0 0;letter-spacing:-.02em}
.empty p{color:var(--clay);max-width:32ch;margin:0 0 14px}

/* quick view */
.modal{position:fixed;inset:0;z-index:61;display:grid;place-items:center;padding:24px;pointer-events:none}
.modal-card{position:relative;pointer-events:auto;width:min(1000px,100%);max-height:calc(100dvh - 48px);background:var(--surface);border-radius:var(--r-panel);display:grid;grid-template-columns:1.05fr 1fr;overflow:hidden;box-shadow:var(--shadow-lift);opacity:0;transform:scale(.96);transition:opacity 200ms var(--ease-out),transform 240ms var(--ease-out)}
.modal.open .modal-card{opacity:1;transform:none}
.modal.closing .modal-card{transition-duration:160ms}
.qv-visual{position:relative;background:radial-gradient(80% 55% at 50% 100%,#F3D7A8 0%,rgba(243,215,168,0) 70%),var(--paper-2);min-height:520px;overflow:hidden}
.qv-visual .wm{position:absolute;width:80%;right:-18%;bottom:-14%;color:var(--teak);opacity:.07}
.qv-art{position:absolute;inset:8% 10% 7%}
.qv-art .art-layer{position:absolute;inset:0}
.qv-art .art-layer>svg{width:100%;height:100%}
.qv-body{padding:36px 36px 28px;overflow-y:auto;display:flex;flex-direction:column;gap:22px}
.qv-close{position:absolute;top:14px;right:14px;z-index:3;background:var(--surface);border:1px solid var(--line)}
.qv-title{font-family:var(--font-display);font-size:clamp(28px,3vw,36px);font-weight:500;line-height:1.04;margin:0;letter-spacing:-.022em;padding-right:40px}
.qv-ta{font-family:var(--font-ta);font-size:19px;color:var(--teak);margin-top:6px}
.qv-price{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:22px}
.qv-desc{color:var(--clay);max-width:48ch}
.opt-label{font-size:13.5px;font-weight:500;color:var(--clay);margin-bottom:10px;display:flex;justify-content:space-between;gap:12px}
.opt-label .mono{color:var(--ink);font-weight:400}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg button{min-width:54px;height:44px;padding:0 14px;border-radius:12px;border:1px solid var(--line-strong);font-family:var(--font-mono);font-size:14px;transition:background-color 150ms ease,color 150ms ease,border-color 150ms ease,transform 160ms var(--ease-out)}
.seg button:active{transform:scale(.95)}
.seg button[aria-checked="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.seg.invalid button{border-color:var(--error)}
.opt-err{display:none;align-items:center;gap:6px;margin-top:8px;font-size:13px;color:var(--error)}
.opt-err.show{display:flex}
.swatch-lg{display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 14px 0 8px;border-radius:999px;border:1px solid var(--line-strong);font-size:14px;transition:border-color 150ms ease,background-color 150ms ease,transform 160ms var(--ease-out)}
.swatch-lg:active{transform:scale(.96)}
.swatch-lg i{width:26px;height:26px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(43,26,14,.2)}
.seg .swatch-lg{font-family:var(--font-ui);font-size:14px;min-width:0;border-radius:999px;padding:0 14px 0 8px}
.seg .swatch-lg[aria-checked="true"] i{box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.qv-cta{display:flex;gap:12px;align-items:center;margin-top:auto}
.qv-cta .btn{flex:1}
.qv-meta{display:flex;gap:10px 18px;flex-wrap:wrap;font-size:13.5px;color:var(--clay);border-top:1px solid var(--line);padding-top:16px}
.qv-meta span{display:inline-flex;align-items:center;gap:6px}

/* toast */
.toast-region{position:fixed;left:50%;bottom:24px;z-index:80;transform:translateX(-50%);display:grid;gap:8px;pointer-events:none;width:min(440px,calc(100vw - 32px))}
.toast{pointer-events:auto;display:flex;align-items:center;gap:12px;padding:10px 10px 10px 10px;border-radius:20px;background:var(--ink);color:var(--paper);box-shadow:0 22px 44px -22px rgba(43,26,14,.7);transform:translateY(calc(100% + 32px));opacity:0;transition:transform 400ms ease,opacity 400ms ease}
.toast.show{transform:none;opacity:1}
.toast.hide{transform:translateY(calc(100% + 32px));opacity:0;transition-duration:220ms}
.toast-thumb{width:44px;height:52px;border-radius:12px;background:var(--paper-2);flex:none;display:grid;place-items:center;overflow:hidden}
.toast-thumb>svg{width:90%;height:90%}
.toast-text{display:grid;line-height:1.3;min-width:0}
.toast-text strong{font-weight:500;font-size:15px}
.toast-text span{color:#CDB9A2;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toast-act{margin-left:auto;color:var(--marigold);font-weight:500;padding:0 14px;min-height:44px;border-radius:12px;flex:none}

/* marigold flight */
.fly{position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;z-index:90;pointer-events:none}
.fly-y,.fly-y svg{width:100%;height:100%}

/* ---------- diya ---------- */
.diya{overflow:visible}
.diya .d-flame,.diya .d-glow{transform-box:fill-box;transform-origin:50% 100%;transition:transform 700ms var(--ease-out),opacity 500ms ease}
.diya .d-glow{transform-origin:50% 50%}
.diya .d-flame-outer,.diya .d-flame-core{transform-box:fill-box;transform-origin:50% 100%}
.diya[data-state="lit"] .d-flame-outer{animation:flicker 1.9s ease-in-out infinite}
.diya[data-state="lit"] .d-flame-core{animation:flicker 1.3s ease-in-out .2s infinite}
.diya[data-state="lit"] .d-glow{animation:glowp 2.8s ease-in-out infinite}
.diya[data-state="unlit"] .d-flame{opacity:0;transform:scale(.35)}
.diya[data-state="unlit"] .d-glow{opacity:0;transform:scale(.5)}
.diya[data-state="gutter"] .d-flame{opacity:0;transform:scale(.25,.12);transition:transform 800ms var(--ease-in-out),opacity 500ms ease 250ms}
.diya[data-state="gutter"] .d-glow{opacity:0;transition:opacity 500ms ease}
.diya .d-smoke{stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.diya[data-state="gutter"] .d-smoke{animation:smoke 1.8s var(--ease-out) .35s forwards}
@keyframes flicker{0%,100%{transform:scale(1,1) skewX(0)}22%{transform:scale(.96,1.05) skewX(2deg)}48%{transform:scale(1.03,.96) skewX(-1.6deg)}74%{transform:scale(.98,1.03) skewX(1deg)}}
@keyframes glowp{0%,100%{opacity:1}50%{opacity:.7}}
@keyframes smoke{0%{stroke-dashoffset:1;opacity:0}25%{opacity:.85}100%{stroke-dashoffset:0;opacity:0;transform:translateY(-8px)}}

/* ==========================================================
   CHECKOUT (night)
   ========================================================== */
.checkout{position:fixed;inset:0;z-index:70;background:var(--night);color:var(--night-text);overflow-y:auto;overscroll-behavior:contain}
.checkout :focus-visible{outline-color:var(--marigold)}
.co-head{position:sticky;top:0;z-index:5;background:rgba(28,18,10,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--night-line)}
.co-head-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;height:76px;max-width:1180px;margin:0 auto;padding:0 24px}
.co-brand{display:flex;align-items:center;gap:12px;min-width:0}
.co-brand .logo-badge{width:44px;height:44px;border-radius:14px}
.co-brand .logo-badge img{height:34px}
.co-brand-text{display:grid;line-height:1.2;font-weight:500}
.co-brand-text .ta{font-size:12.5px;color:var(--night-muted);font-weight:400}
.co-close{justify-self:end;color:var(--night-text)}
@media (hover:hover) and (pointer:fine){.co-close:hover{background:var(--night-3)}}
/* kolam stepper */
.ksteps{display:flex;align-items:flex-start}
.kstep{display:grid;justify-items:center;gap:8px;width:76px}
.kstep-dot{position:relative;width:22px;height:22px;border-radius:50%;border:1.5px solid rgba(191,169,146,.55);display:grid;place-items:center;transition:border-color 300ms ease,background-color 300ms ease}
.kstep-dot::after{content:"";width:6px;height:6px;border-radius:50%;background:rgba(191,169,146,.7);transition:background-color 300ms ease,transform 300ms var(--ease-out)}
.kstep-dot::before{content:"";position:absolute;inset:-1.5px;border-radius:50%;border:1.5px solid var(--marigold);opacity:0}
.kstep-lab{font-size:12.5px;color:var(--night-muted);transition:color 300ms ease}
.kstep[data-state="active"] .kstep-dot{border-color:var(--marigold)}
.kstep[data-state="active"] .kstep-dot::after{background:var(--marigold);transform:scale(1.2)}
.kstep[data-state="active"] .kstep-dot::before{animation:kping 2.2s var(--ease-out) infinite}
.kstep[data-state="active"] .kstep-lab,.kstep[data-state="done"] .kstep-lab{color:var(--night-text)}
.kstep[data-state="done"] .kstep-dot{background:var(--marigold);border-color:var(--marigold)}
.kstep[data-state="done"] .kstep-dot::after{background:var(--night)}
button.kstep-dot[disabled]{cursor:default}
@keyframes kping{0%{transform:scale(1);opacity:.7}75%,100%{transform:scale(2);opacity:0}}
.kthread{width:56px;height:22px;margin:0 -12px;color:var(--marigold)}
.kthread .base{fill:none;stroke:rgba(191,169,146,.35);stroke-width:1.5;stroke-dasharray:2 4}
.kthread .fill{fill:none;stroke:currentColor;stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 700ms var(--ease-in-out)}
.kthread.on .fill{stroke-dashoffset:0}

.co-main{max-width:1180px;margin:0 auto;padding:40px 24px 96px;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:56px;align-items:start}
.co-main[hidden]{display:none}
.co-step{display:grid;gap:26px}
.co-step[hidden]{display:none}
.co-step.entering{animation:stepIn 320ms var(--ease-out) both}
@keyframes stepIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.co-h{font-family:var(--font-display);font-size:clamp(30px,3.2vw,40px);font-weight:500;letter-spacing:-.022em;margin:0;line-height:1.05}
.co-sub{color:var(--night-muted);margin-top:8px}
.back-link{display:inline-flex;align-items:center;gap:6px;color:var(--night-muted);font-size:14px;min-height:44px;margin:-10px 0 4px -4px;padding:0 4px;border-radius:10px;transition:color 150ms ease}
@media (hover:hover) and (pointer:fine){.back-link:hover{color:var(--night-text)}}
.form{display:grid;gap:20px}
.field{display:grid;gap:8px;border:0;margin:0;padding:0;min-width:0}
.field>label,.field legend{font-size:14px;font-weight:500;color:var(--night-text);padding:0;margin-bottom:0}
.field legend{margin-bottom:10px}
.opt{color:var(--night-muted);font-weight:400;margin-left:4px}
.help{font-size:13px;color:var(--night-muted)}
.input{width:100%;height:52px;border-radius:var(--r-input);background:var(--night-2);border:1px solid rgba(246,235,221,.16);color:var(--night-text);padding:0 16px;font-size:16px;transition:border-color 150ms ease,box-shadow 150ms ease,background-color 150ms ease}
.input::placeholder{color:#8F7A68}
.input:focus{outline:none;border-color:var(--marigold);box-shadow:0 0 0 3px rgba(239,178,82,.2)}
.input.mono-in{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.err{display:none;align-items:center;gap:6px;font-size:13px;color:var(--night-error)}
.field.invalid .input{border-color:var(--night-error)}
.field.invalid .err{display:flex}
.field.invalid .slots .slot{border-color:rgba(232,130,111,.6)}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.slots{display:grid;gap:10px}
.slot{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;min-height:64px;padding:12px 16px;border-radius:16px;border:1px solid rgba(246,235,221,.14);background:var(--night-2);cursor:pointer;transition:border-color 150ms ease,background-color 150ms ease,transform 160ms var(--ease-out)}
.slot:active{transform:scale(.99)}
.slot input{position:absolute;opacity:0;pointer-events:none}
.slot .radio{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--night-muted);display:grid;place-items:center;transition:border-color 150ms ease}
.slot .radio::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--marigold);transform:scale(.4);opacity:0;transition:transform 220ms var(--ease-out),opacity 150ms ease}
.slot strong{display:block;font-weight:500}
.slot span.where{font-size:13.5px;color:var(--night-muted)}
.slot .left{font-family:var(--font-mono);font-size:12.5px;color:var(--marigold);text-align:right}
.slot:has(input:checked){border-color:var(--marigold);background:#2D1D12}
.slot:has(input:checked) .radio{border-color:var(--marigold)}
.slot:has(input:checked) .radio::after{transform:scale(1);opacity:1}
.slot:has(input:focus-visible){outline:2px solid var(--marigold);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.slot:hover{border-color:rgba(239,178,82,.45)}}

/* pay tabs — duplicated list clipped to the active tab (Emil's technique) */
.tabs{position:relative;display:inline-block;border-radius:999px;background:var(--night-2);border:1px solid rgba(246,235,221,.12);padding:4px;justify-self:start}
.tabs-list{display:grid;grid-template-columns:auto auto}
.tabs-list button{height:44px;padding:0 22px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:500;color:var(--night-muted);transition:color 150ms ease}
.tabs-active{position:absolute;inset:4px;pointer-events:none;clip-path:inset(0 50% 0 0 round 999px);transition:clip-path 280ms var(--ease-out)}
.tabs-active .tabs-list{background:var(--marigold);border-radius:999px}
.tabs-active .tabs-list button{color:var(--ink)}
.pay-panel{display:grid;gap:22px}
.pay-panel[hidden]{display:none}
.pay-panel.entering{animation:panelIn 260ms var(--ease-out) both}
@keyframes panelIn{from{opacity:0;transform:translateY(8px);filter:blur(3px)}to{opacity:1;transform:none;filter:blur(0)}}
/* paynow */
.paynow{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:center;padding:22px;border-radius:24px;background:var(--night-2);border:1px solid var(--night-line)}
.qr-frame{position:relative;width:212px;height:212px;padding:14px;border-radius:20px;background:#FFFDF9}
.qr-frame svg.qr{width:100%;height:100%}
.qr-badge{position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%);border-radius:12px;background:#FFFDF9;display:grid;place-items:center;box-shadow:0 0 0 4px #FFFDF9}
.qr-badge svg{width:30px;height:30px}
.qr-scan{position:absolute;left:14px;right:14px;top:14px;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(210,105,47,0),var(--saffron),rgba(210,105,47,0));animation:scan 2.6s var(--ease-in-out) infinite alternate}
@keyframes scan{from{transform:translateY(0)}to{transform:translateY(182px)}}
.qr-cap{font-size:11.5px;color:var(--night-muted);text-align:center;margin-top:10px;letter-spacing:.06em;text-transform:uppercase}
.pn-steps{margin:0 0 16px;padding:0;list-style:none;display:grid;gap:8px;counter-reset:s;font-size:14.5px;color:var(--night-muted)}
.pn-steps li{display:flex;gap:10px;align-items:baseline}
.pn-steps li::before{counter-increment:s;content:counter(s);font-family:var(--font-mono);font-size:12px;color:var(--marigold);width:20px;height:20px;border-radius:50%;border:1px solid var(--night-line);display:grid;place-items:center;flex:none;transform:translateY(3px)}
.pn-dl{margin:0;display:grid;gap:10px;border-top:1px solid var(--night-line);padding-top:14px}
.pn-dl div{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:36px}
.pn-dl dt{font-size:13.5px;color:var(--night-muted)}
.pn-dl dd{margin:0;display:flex;align-items:center;gap:8px;text-align:right}
.pn-amt{font-size:22px;color:var(--marigold)}
.copy-btn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--night-line);font-size:13px;color:var(--night-text);transition:background-color 150ms ease,transform 160ms var(--ease-out)}
.copy-btn:active{transform:scale(.95)}
.copy-btn .swap{position:relative;display:grid;width:16px;height:16px}
.copy-btn .swap svg{grid-area:1/1;width:16px;height:16px;transition:opacity 200ms ease,transform 200ms var(--ease-out),filter 200ms ease}
.copy-btn .swap .c2{opacity:0;transform:scale(.6);filter:blur(2px)}
.copy-btn.copied .swap .c1{opacity:0;transform:scale(.6);filter:blur(2px)}
.copy-btn.copied .swap .c2{opacity:1;transform:none;filter:none;color:var(--marigold)}
.pn-timer{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--night-muted);margin-top:14px}
.pn-timer svg{width:22px;height:22px;transform:rotate(-90deg)}
.pn-timer circle.t{fill:none;stroke:var(--marigold);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1;transition:stroke-dashoffset 1000ms linear}
.pn-timer circle.b{fill:none;stroke:var(--night-3);stroke-width:2.5}
/* card */
.card-stage{perspective:1200px;display:grid;place-items:center}
.card3d{position:relative;width:min(372px,100%);aspect-ratio:1.586;transform-style:preserve-3d;transition:transform 640ms var(--ease-in-out)}
.card-face{position:absolute;inset:0;border-radius:20px;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;color:#FFF6E8;
  background:radial-gradient(120% 90% at 100% 0%,rgba(239,178,82,.55) 0%,rgba(239,178,82,0) 45%),linear-gradient(135deg,#3A1C0D 0%,#7A2F1E 46%,#A83C2B 74%,#C4572C 100%);
  box-shadow:0 30px 50px -30px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.12)}
.card-face .kolam-bg{position:absolute;width:80%;right:-22%;top:-26%;color:#FFE7C2;opacity:.16}
.card-front{display:flex;flex-direction:column;justify-content:space-between;padding:20px 22px}
.card-top{display:flex;justify-content:space-between;align-items:center;position:relative}
.card-chip{width:42px;height:32px;border-radius:7px;background:linear-gradient(135deg,#E9C37E,#C49447);position:relative;overflow:hidden}
.card-chip::before,.card-chip::after{content:"";position:absolute;border:1px solid rgba(80,50,10,.35)}
.card-chip::before{inset:7px 12px;border-radius:3px}
.card-chip::after{left:-1px;right:-1px;top:50%;height:0;border-width:1px 0 0}
.card-brand{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.14em;opacity:.9;min-height:16px}
.card-num{position:relative;font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:clamp(17px,2.3vw,21px);letter-spacing:.08em;white-space:nowrap;display:flex;gap:.55em;text-shadow:0 1px 1px rgba(0,0,0,.25)}
.card-num .grp{display:inline-flex}
.card-num .d{display:inline-block;width:.62em;text-align:center}
.card-num .d.ph{opacity:.45}
.card-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;position:relative}
.card-bottom small{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;opacity:.7;margin-bottom:3px}
.card-name{font-size:14px;letter-spacing:.08em;text-transform:uppercase;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-exp{font-family:var(--font-mono);font-size:14px}
.pay-btn{position:relative;display:grid;place-items:center;height:58px;border-radius:999px;background:var(--marigold);color:var(--ink);font-weight:600;font-size:17px;width:100%;overflow:hidden;transition:transform 160ms var(--ease-out),background-color 200ms ease}
.pay-btn:active{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){.pay-btn:hover{background:#F3BE66}}
.pay-btn>span{grid-area:1/1;display:inline-flex;align-items:center;gap:10px;transition:opacity 220ms ease,filter 220ms ease,transform 220ms var(--ease-out)}
.pay-btn .busy-label{opacity:0;filter:blur(2px);transform:translateY(8px)}
.pay-btn.busy .label{opacity:0;filter:blur(2px);transform:translateY(-8px)}
.pay-btn.busy .busy-label{opacity:1;filter:none;transform:none}
.pay-btn.busy{pointer-events:none}
.secure{display:flex;align-items:center;gap:8px;justify-content:center;font-size:13px;color:var(--night-muted)}
.alert{scroll-margin-top:112px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;padding:14px 16px;border-radius:16px;background:rgba(232,130,111,.08);border:1px solid rgba(232,130,111,.4)}
.alert[hidden]{display:none}
.alert .ico{color:var(--night-error);margin-top:1px}
.alert strong{display:block;font-weight:500;color:var(--night-text)}
.alert p{font-size:14px;color:var(--night-muted);margin-top:2px}
.alert-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.alert-actions button{min-height:40px;padding:0 14px;border-radius:999px;border:1px solid rgba(246,235,221,.18);font-size:13.5px;font-weight:500;transition:transform 160ms var(--ease-out)}
.alert-actions button:active{transform:scale(.97)}
.alert.entering{animation:panelIn 300ms var(--ease-out) both}
/* order summary */
.summary{position:sticky;top:124px;border-radius:24px;background:var(--night-2);border:1px solid var(--night-line);padding:22px 24px 24px}
.summary h3{font-size:14px;font-weight:500;margin:0 0 6px;color:var(--night-muted);display:flex;justify-content:space-between;letter-spacing:.02em}
.s-list{max-height:min(42dvh,360px);overflow-y:auto;margin:0 -6px;padding:0 6px}
.s-item{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--night-line)}
.s-thumb{position:relative;width:56px;height:68px;border-radius:12px;background:#F4ECDF}
.s-thumb>svg{width:100%;height:100%;padding:4px}
.s-qty{position:absolute;top:-7px;right:-7px;min-width:22px;height:22px;padding:0 5px;border-radius:999px;background:var(--night-3);border:1px solid var(--night-line);font-family:var(--font-mono);font-size:11.5px;display:grid;place-items:center;color:var(--night-text)}
.s-name{font-size:14.5px;font-weight:500}
.s-var{font-size:12.5px;color:var(--night-muted)}
.s-price{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:14px}
.s-rows{display:grid;gap:8px;padding-top:14px;font-size:14.5px;color:var(--night-muted)}
.s-row{display:flex;justify-content:space-between;gap:12px}
.s-row .mono{color:var(--night-text)}
.s-total{color:var(--night-text);font-size:16px;padding-top:14px;border-top:1px solid var(--night-line);margin-top:6px;align-items:baseline}
.s-total .mono{font-size:26px;color:var(--marigold)}
.s-note{font-size:12.5px;color:var(--night-muted);margin-top:14px;display:flex;gap:8px;line-height:1.5}
.s-note .ico-sm{color:var(--marigold);margin-top:2px}
.summary-m{display:none;border-radius:18px;background:var(--night-2);border:1px solid var(--night-line)}
.summary-m summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:56px;padding:0 18px;cursor:pointer;font-weight:500}
.summary-m summary::-webkit-details-marker{display:none}
.summary-m summary .chev{transition:transform 200ms var(--ease-out)}
.summary-m[open] summary .chev{transform:rotate(180deg)}
.summary-m .summary{position:static;border:0;background:none;padding:0 18px 18px}
.summary-m .summary h3{display:none}
/* processing (lens-blur backdrop) */
.processing{position:fixed;inset:0;z-index:8;display:grid;place-items:center;align-content:center;gap:16px;text-align:center;background:rgba(28,18,10,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transition:opacity 280ms ease}
.processing[hidden]{display:none}
.processing.show{opacity:1}
.processing .diya{width:170px;height:170px}
.proc-title{font-family:var(--font-display);font-size:28px;font-weight:500;letter-spacing:-.02em}
.proc-text{position:relative;height:26px;width:min(340px,90vw);color:var(--night-muted)}
.proc-text span{position:absolute;inset:0;transition:opacity 260ms ease,filter 260ms ease,transform 260ms var(--ease-out)}
.proc-text span.pre{opacity:0;filter:blur(3px);transform:translateY(8px)}
.proc-text span.post{opacity:0;filter:blur(3px);transform:translateY(-8px)}
/* success */
.co-success{max-width:760px;margin:0 auto;padding:36px 24px 96px;text-align:center;display:grid;justify-items:center;gap:18px}
.co-success[hidden]{display:none}
.success-art{position:relative;width:min(320px,76vw);aspect-ratio:1}
.success-art .kolam-draw{position:absolute;inset:0;width:100%;height:100%;color:var(--marigold)}
.kolam-draw path,.kolam-draw circle.ring{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.6s var(--ease-in-out) forwards;animation-delay:var(--dl,0ms)}
.kolam-draw .kd{fill:currentColor;opacity:0;transform-box:fill-box;transform-origin:center;animation:dotIn 420ms var(--ease-out) forwards;animation-delay:var(--dl,0ms)}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes dotIn{from{opacity:0;transform:scale(.4)}to{opacity:.9;transform:none}}
.success-art .diya{position:absolute;left:50%;top:50%;width:44%;transform:translate(-50%,-56%)}
.nandri{margin:6px 0 0;font-weight:500;line-height:1.1;font-size:clamp(40px,6.4vw,64px);letter-spacing:-.02em}
.nandri .ta{font-family:var(--font-ta);color:var(--marigold);font-weight:700;letter-spacing:0}
.nandri .nm{font-family:var(--font-display)}
.success-sub{font-size:18px;color:var(--night-muted);max-width:46ch}
.order-card{width:100%;text-align:left;border-radius:24px;background:var(--night-2);border:1px solid var(--night-line);padding:6px 24px;margin-top:10px}
.order-card div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--night-line)}
.order-card div:last-child{border-bottom:0}
.order-card dt{font-size:13.5px;color:var(--night-muted)}
.order-card dd{margin:0;font-size:15px}
.order-card .oid{font-family:var(--font-mono);color:var(--marigold);font-size:17px;letter-spacing:.02em}
.co-success .enter-s{animation:enterUp 700ms var(--ease-out) both;animation-delay:var(--d,0ms)}
canvas.petals{position:fixed;inset:0;width:100%;height:100%;z-index:9;pointer-events:none}

/* ---------- reduced motion: fewer, gentler — keep fades ---------- */
.rm .marquee-track,.rm .garland .sway,.rm .logo-build.built .lb-flame,.rm .arch-bloom,.rm .ping::after,.rm .btn-ring::before,.rm .badge.win::after,.rm .shimmer::after,.rm .qr-scan,.rm .kstep-dot::before{animation:none!important}
.rm .diya .d-flame-outer,.rm .diya .d-flame-core,.rm .diya .d-glow{animation:none!important}
.rm .enter,.rm .hero-title .w,.rm .arch,.rm .lb,.rm .hero-merch,.rm .hero-copy,.rm .co-success .enter-s,.rm .co-step.entering,.rm .pay-panel.entering{animation-name:fadeOnly!important;animation-duration:200ms!important;animation-delay:0ms!important}
.rm .ornament .orn-line,.rm .ornament .orn-mark{animation:none!important}
.rm .turn-float,.rm .turn-spin,.rm .face,.rm .turn-shadow{animation:none!important}
.rm .lb{-webkit-mask-image:none!important;mask-image:none!important}
.rm .arch-bloom{opacity:.55}
@keyframes fadeOnly{from{opacity:0}to{opacity:1}}
.rm [data-reveal]{transform:none!important;transition:opacity 200ms ease!important}
.rm .drawer{transform:none;opacity:0;transition:opacity 180ms ease}
.rm .drawer.open{opacity:1}
.rm .modal-card{transform:none!important}
.rm .tile-visual .art,.rm .tile-visual:active{transition:none;transform:none!important}
.rm .kolam-draw path,.rm .kolam-draw circle.ring{animation:none;stroke-dashoffset:0}
.rm .kolam-draw .kd{animation:none;opacity:.9}

/* ---------- responsive ---------- */
@media (max-width:1199px){
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,340px) minmax(0,1fr);gap:28px}
  .hero-title{font-size:clamp(2.2rem,3.9vw,3rem)}
  .merch-name{font-size:21px}
  .cd-box{width:58px;height:56px;font-size:21px}
  .cd{gap:8px}
}
@media (max-width:1099px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* one column: logo first, then the collection copy, then the merch card. Panels rise instead of sliding. */
@media (max-width:1023px){
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:36px;justify-items:center}
  .hero-stage{order:1;width:100%}
  .hero-copy{order:2;width:100%;max-width:620px}
  .hero-merch{order:3;justify-self:center;max-width:620px}
  .arch{max-width:360px}
  .hero-title{font-size:clamp(2.4rem,7vw,3.6rem)}
  .merch-card{grid-template-columns:minmax(0,200px) minmax(0,1fr);grid-template-rows:auto 1fr auto;column-gap:18px}
  .merch-kicker{grid-column:2;align-self:end}
  .merch-visual{grid-column:1;grid-row:1/4}
  .merch-meta{grid-column:2;align-self:start}
  .merch-foot{grid-column:2}
  .js .hero-merch{animation-name:fromBelow;animation-delay:2000ms}
  .js .hero-copy{animation-name:fromBelow}
  @keyframes fromBelow{from{opacity:0;transform:translateY(28px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
}
@media (max-width:899px){
  .co-main{grid-template-columns:1fr;gap:20px;padding-top:24px}
  .co-main>.summary{display:none}
  .summary-m{display:block}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-grid>div:first-child{grid-column:1/-1}
  .modal-card{grid-template-columns:1fr}
  .qv-visual{min-height:300px;height:38dvh}
}
@media (max-width:759px){
  .nav-links{display:none}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 12px}
  .tile.featured .tile-visual{min-height:380px}
  .tile-name{font-size:15px}
  .tile.featured .tile-name{font-size:22px}
  .tile-add{width:44px;height:44px;right:10px;bottom:10px}
  .badge{top:10px;left:10px;font-size:11.5px;height:26px;padding:0 10px}
  .chips{position:static;padding-top:4px}
  .chip .ta{display:none}
  .timeline{grid-template-columns:1fr;gap:28px;padding-left:40px}
  .thread{display:none}
  .timeline::before{content:"";position:absolute;left:11px;top:12px;bottom:12px;border-left:1.5px dashed var(--line-strong)}
  .tstep{padding-top:0;text-align:left}
  .tstep p:last-child{margin-inline:0}
  .tdot{left:-40px;margin-left:0;top:2px}
  /* quick view becomes a bottom sheet */
  .modal{place-items:end center;padding:0}
  .modal-card{border-radius:28px 28px 0 0;max-height:94dvh;overflow-y:auto;transform:translateY(100%);opacity:1;transition:transform 420ms var(--ease-drawer)}
  .modal.open .modal-card{transform:none}
  .modal.closing .modal-card{transition-duration:240ms}
  .qv-body{padding:24px 20px 24px;overflow:visible}
  .modal-card{grid-template-columns:minmax(0,1fr)}
  .qv-cta{flex-wrap:wrap}
  .qv-cta .btn{flex:1 1 220px}
  .qv-visual{height:34dvh;min-height:240px}
  .paynow{grid-template-columns:1fr;justify-items:center;text-align:left}
  .paynow-info{width:100%}
  .row-2{gap:12px}
  .co-head-inner{grid-template-columns:auto 1fr auto;padding:0 12px 0 16px}
  .co-brand-text{display:none}
  .ksteps{justify-self:center}
  .kstep{width:62px}
  .kthread{width:40px;margin:0 -10px}
  .order-card div{grid-template-columns:1fr;gap:4px}
}
@media (max-width:640px){
  .wrap{padding:0 16px}
  .hero{padding:20px 0 56px}
  .hero-grid{gap:24px}
  .arch{max-width:min(250px,64vw)}
  .hero-title{font-size:clamp(2.4rem,11vw,3.1rem)}
  .hero-sub{font-size:16.5px}
  .merch-card{grid-template-columns:minmax(0,1fr);grid-template-rows:none;padding:14px}
  .merch-kicker,.merch-visual,.merch-meta,.merch-foot{grid-column:1;grid-row:auto}
  .merch-visual{aspect-ratio:4/3}
  .cd-box{width:60px;height:58px;font-size:22px}
  .cd{gap:8px}
  .brand-text span{display:none}
  .bag-label{display:none}
  .announce-in{font-size:12.5px}
  .announce .hide-sm{display:none}
  .footer-grid{grid-template-columns:1fr}
  .co-main{padding:20px 16px 72px}
  .co-success{padding:24px 16px 72px}
  .qr-frame{width:200px;height:200px}
}

/* ==========================================================
   Live-store additions (real payments, closed state, consent)
   ========================================================== */
/* closed store */
.status-pill.closed .ping{background:var(--clay)}
.status-pill.closed .ping::after{animation:none;opacity:0}
.closed-note{margin:30px 0 32px;padding:16px 18px;border:1px solid var(--line-strong);border-radius:18px;background:var(--surface);max-width:48ch;color:var(--clay)}
.closed-note strong{display:block;color:var(--ink);font-weight:500;margin-bottom:2px}
.load-error{grid-column:1/-1;display:grid;justify-items:start;gap:12px;padding:32px 0;color:var(--clay)}

/* consent + privacy (night) */
.consent{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;padding:14px 16px;border-radius:16px;border:1px solid rgba(246,235,221,.14);background:var(--night-2);cursor:pointer}
.consent input{appearance:none;-webkit-appearance:none;width:22px;height:22px;margin:1px 0 0;border-radius:7px;border:1.5px solid var(--night-muted);display:grid;place-items:center;cursor:pointer;transition:border-color 150ms ease,background-color 150ms ease}
.consent input::after{content:"";width:11px;height:6px;border:2px solid var(--ink);border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg) scale(.4);opacity:0;transition:transform 200ms var(--ease-out),opacity 150ms ease}
.consent input:checked{background:var(--marigold);border-color:var(--marigold)}
.consent input:checked::after{opacity:1;transform:translateY(-1px) rotate(-45deg) scale(1)}
.consent input:focus-visible{outline:2px solid var(--marigold);outline-offset:2px}
.consent span{font-size:14px;color:var(--night-text);line-height:1.5}
.field.invalid .consent{border-color:rgba(232,130,111,.6)}
.privacy{font-size:13px;color:var(--night-muted)}
.privacy summary{cursor:pointer;min-height:36px;display:inline-flex;align-items:center;color:var(--night-text);text-decoration:underline;text-underline-offset:3px}
.privacy p{margin-top:6px;max-width:60ch}
.slot.full{opacity:.5;cursor:not-allowed}
.slot.full .left{color:var(--night-muted)}

/* real PayNow QR */
.qr-frame svg.qr path{fill:#2B1A0E}
.qr-frame.waiting svg.qr{opacity:.12;filter:blur(1.5px)}
.qr-frame.waiting .qr-scan{display:none}
.qr-frame.waiting .qr-badge{display:none}
.qr-wait{position:absolute;inset:14px;display:grid;place-items:center;text-align:center;font-size:12.5px;color:var(--clay);padding:0 18px;line-height:1.35}
.qr-frame:not(.waiting) .qr-wait{display:none}

/* card: HitPay hosted checkout (no card fields on this site) */
.card-static .card3d{transform:none}
.card-copy{display:grid;gap:10px;font-size:14.5px;color:var(--night-muted)}
.card-copy strong{color:var(--night-text);font-weight:500}
.card-names{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.08em;color:var(--night-text)}

/* bot check */
.ts-slot{min-height:0}
.ts-slot:empty{display:none}

/* footer privacy */
.footer .privacy-note{font-size:13px;color:#A8927C;max-width:70ch;margin-top:18px}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.pn-dl dd .mono{white-space:nowrap}
/* phones: one piece per row so names, prices and the fee line fit, and the turntable reads */
@media (max-width:559px){
  .grid{grid-template-columns:1fr;gap:40px}
  .tile-visual{aspect-ratio:1/1}
}
/* ---------- ambient: the page is lit by an oil lamp ----------
   Two warm pools of light drift across the paper (ease-in-out, minutes long) and flicker like a diya;
   the lamps are fixed behind everything. Uyir letters rise like lamp smoke (linear) inside the hero only,
   so they scroll away with it. Transform and opacity only. */
.ambient{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.lamp{position:absolute;width:72vmax;height:72vmax;border-radius:50%;will-change:transform,opacity}
.l1{left:-22vmax;top:-18vmax;background:radial-gradient(closest-side,rgba(239,178,82,.24),rgba(239,178,82,.09) 50%,rgba(239,178,82,0));
  animation:lampDrift1 52s ease-in-out infinite alternate,lampFlicker 5.3s ease-in-out infinite}
.l2{right:-30vmax;bottom:-34vmax;background:radial-gradient(closest-side,rgba(210,105,47,.13),rgba(210,105,47,.05) 50%,rgba(210,105,47,0));
  animation:lampDrift2 67s ease-in-out infinite alternate,lampFlicker 7.1s ease-in-out -2.4s infinite}
@keyframes lampDrift1{to{transform:translate(42vw,52vh) scale(1.08)}}
@keyframes lampDrift2{to{transform:translate(-38vw,-46vh) scale(.94)}}
@keyframes lampFlicker{0%,100%{opacity:1}23%{opacity:.84}41%{opacity:.96}62%{opacity:.8}81%{opacity:.93}}
.uyir{position:absolute;inset:0;overflow:hidden;pointer-events:none;container-type:size}
.uyir.paused span,body.locked .uyir span{animation-play-state:paused}
.uyir span{position:absolute;bottom:0;font-family:var(--font-ta);font-weight:600;line-height:1;color:var(--teak);opacity:0;
  animation:uyirRise linear infinite;will-change:transform,opacity}
@keyframes uyirRise{
  0%{transform:translateY(10cqh) rotate(0deg);opacity:0}
  12%{opacity:var(--o)}
  80%{opacity:var(--o)}
  100%{transform:translateY(-110cqh) rotate(var(--r));opacity:0}}
body.locked .ambient *{animation-play-state:paused}

/* doorway kolam behind the shop and collection sections */
.shop,.collect{position:relative;isolation:isolate;overflow-x:clip}
.threshold{position:absolute;z-index:-1;width:min(560px,90vw);aspect-ratio:1;pointer-events:none;color:var(--teak);opacity:.16}
.threshold.t-right{top:40px;right:max(-160px,-12vw)}
.threshold.t-left{top:-40px;left:max(-180px,-14vw)}
.threshold-spin{position:absolute;inset:0;animation:kolamTurn 240s linear 3.2s infinite}
.threshold .kolam-draw{width:100%;height:100%}
@keyframes kolamTurn{to{transform:rotate(1turn)}}
@media (max-width:759px){
  .threshold{opacity:.12}
  .threshold.t-right{top:0;right:-34vw}
  .threshold.t-left{top:-20px;left:-40vw}
}
.rm .lamp,.rm .threshold-spin{animation:none!important}