:root{
  --maroon:#6E1A1F; --maroon-deep:#4A1014; --kumkum:#A3242B; --turmeric:#E3A62B; --gold:#C99A3B; --gold-soft:#E9C46A;
  --leaf:#2E6B3A; --leaf-deep:#1E4A27; --cream:#FBF4E6; --paper:#FFFBF3;
  --bg:var(--cream); --surface:#FFFDF8; --surface-2:#F5EAD5; --ink:#2B1A14; --ink-soft:#6A584B; --line:#EADBC0;
  --primary:var(--maroon); --primary-deep:var(--maroon-deep); --on-primary:#FFF4DE; --accent:var(--kumkum); --kicker:#A0741F;
  --wa:#25D366; --wa-ink:#0B3D1E; --wa-deep:#128C7E; --ok:#1E7A3A; --bad:#B3261E;
  --serif:"Fraunces", Georgia, "Times New Roman", serif;
  --sans:"Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --hand:"Caveat", "Segoe Print", cursive;
  --r:18px; --hh:82px;
  --temple:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='10'%3E%3Crect width='22' height='10' fill='%236E1A1F'/%3E%3Cpath d='M0 10 11 1.5 22 10z' fill='%23C99A3B'/%3E%3Cpath d='M4.5 10 11 5 17.5 10z' fill='%236E1A1F'/%3E%3Ccircle cx='11' cy='8.2' r='1.2' fill='%23E9C46A'/%3E%3C/svg%3E");
  --kolam:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23C99A3B' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M60 18c14 14 14 28 0 42-14-14-14-28 0-42zM60 102c-14-14-14-28 0-42 14 14 14 28 0 42zM18 60c14-14 28-14 42 0-14 14-28 14-42 0zM102 60c-14 14-28 14-42 0 14-14 28-14 42 0z'/%3E%3Ccircle cx='60' cy='60' r='30'/%3E%3C/g%3E%3Cg fill='%23C99A3B'%3E%3Ccircle cx='60' cy='60' r='2.4'/%3E%3Ccircle cx='30' cy='30' r='1.8'/%3E%3Ccircle cx='90' cy='30' r='1.8'/%3E%3Ccircle cx='30' cy='90' r='1.8'/%3E%3Ccircle cx='90' cy='90' r='1.8'/%3E%3Ccircle cx='0' cy='0' r='1.8'/%3E%3Ccircle cx='120' cy='0' r='1.8'/%3E%3Ccircle cx='0' cy='120' r='1.8'/%3E%3Ccircle cx='120' cy='120' r='1.8'/%3E%3C/g%3E%3C/svg%3E");
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#1A1210; --surface:#241916; --surface-2:#2D1F1B; --ink:#F3E8D6; --ink-soft:#C3B19E; --line:#3E2D27;
    --primary:#A8323A; --primary-deep:#8E2830; --accent:#E06A5F; --kicker:#E0B45E; --ok:#5BC27A; --bad:#FF8A80; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#1A1210; --surface:#241916; --surface-2:#2D1F1B; --ink:#F3E8D6; --ink-soft:#C3B19E; --line:#3E2D27;
  --primary:#A8323A; --primary-deep:#8E2830; --accent:#E06A5F; --kicker:#E0B45E; --ok:#5BC27A; --bad:#FF8A80; color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--hh) + 64px); -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto} *{animation:none!important; transition:none!important}}
body{margin:0; background:var(--bg); color:var(--ink); font:400 1rem/1.6 var(--sans); overflow-x:hidden; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
svg{display:block}
a{color:inherit}
button{font:inherit; color:inherit; cursor:pointer; touch-action:manipulation}
input,select,textarea{font:inherit}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--gold); outline-offset:3px; border-radius:6px}
.sr{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; left:1rem; top:-4rem; z-index:100; background:var(--primary); color:var(--on-primary); padding:.6rem 1rem; border-radius:8px}
.skip:focus{top:1rem}
.wrap{width:min(1240px, 100% - 2.5rem); margin-inline:auto}
@media (max-width:600px){.wrap{width:calc(100% - 2rem)}}
h1,h2,h3{font-family:var(--serif); font-weight:600; line-height:1.12; margin:0; letter-spacing:-.01em}
h2{font-size:clamp(1.75rem, 3.3vw, 2.6rem); color:var(--ink)}
p{margin:0}
.hand{font-family:var(--hand); font-weight:700}
.kicker{display:inline-flex; align-items:center; gap:.6rem; font-size:.82rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--kicker); margin-bottom:.7rem}
.kicker::before{content:""; width:22px; height:10px; background:var(--temple) repeat-x; background-size:11px 5px; background-position:0 50%; border-radius:2px}
.lead{font-size:1.08rem; color:var(--ink-soft); max-width:42rem; margin-top:.9rem}
.sec{padding:clamp(3.2rem,6.5vw,5.5rem) 0}
.sec-head{margin-bottom:1.8rem}
.sec-head.center{text-align:center}
.sec-head.center .lead{margin-inline:auto}
.sec-head.row{display:flex; justify-content:space-between; align-items:end; gap:1rem; flex-wrap:wrap}
.link-arrow{display:inline-flex; align-items:center; gap:.4rem; font-weight:700; color:var(--primary); text-decoration:none}
.link-arrow svg{width:18px; height:18px; transition:transform .2s}
.link-arrow:hover svg{transform:translateX(4px)}
:root[data-theme="dark"] .link-arrow{color:var(--gold-soft)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .link-arrow{color:var(--gold-soft)}}
.linkish{background:none; border:0; padding:0; color:var(--primary); font-weight:700; text-decoration:underline; text-underline-offset:3px; display:inline-flex; align-items:center; gap:.35rem}
.linkish svg{width:18px; height:18px}
.linkish.strong{text-decoration:none}
:root[data-theme="dark"] .linkish{color:var(--gold-soft)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .linkish{color:var(--gold-soft)}}
.muted{color:var(--ink-soft)}
.temple{height:9px; background:var(--temple) repeat-x; background-size:18px 9px; border-top:2px solid var(--gold)}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.55rem; border:0; border-radius:999px; padding:.8rem 1.35rem; font-weight:700; text-decoration:none; font-size:1rem; line-height:1.2; transition:transform .15s, background .2s, box-shadow .2s, color .2s}
.btn svg{width:20px; height:20px; flex:none}
.btn:active{transform:scale(.97)}
.btn-lg{padding:1rem 1.6rem; font-size:1.04rem}
.btn-sm{padding:.55rem 1rem; font-size:.92rem}
.btn-sm svg{width:18px; height:18px}
.btn-block{width:100%}
.btn-primary{background:var(--primary); color:var(--on-primary); box-shadow:0 10px 22px -12px rgba(110,26,31,.8)}
.btn-primary:hover{background:var(--primary-deep); transform:translateY(-2px)}
.btn-ghost{background:transparent; color:var(--primary); border:1.5px solid var(--primary)}
.btn-ghost:hover{background:var(--primary); color:var(--on-primary)}
:root[data-theme="dark"] .btn-ghost{color:var(--ink); border-color:var(--ink-soft)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .btn-ghost{color:var(--ink); border-color:var(--ink-soft)}}
.btn-wa{background:var(--wa); color:var(--wa-ink); box-shadow:0 6px 18px -6px rgba(18,140,126,.55)}
.btn-wa:hover{background:var(--wa-deep); color:#fff; transform:translateY(-2px)}
.btn-outline{background:transparent; border:1.5px solid var(--line); color:var(--ink)}
.btn-outline:hover{border-color:var(--ink)}
.btn-light{background:#FFF4DE; color:#4A1014}
.btn-light:hover{background:#fff}

/* ---------- veg / non-veg marks ---------- */
.vm{display:inline-block; position:relative; flex:none; width:15px; height:15px; border:1.6px solid #1E8A3A; border-radius:2px; background:#fff; vertical-align:-2px}
.vm::after{content:""; position:absolute; inset:2.6px; border-radius:50%; background:#1E8A3A}
.vm.nv{border-color:#7B3F1B}
.vm.nv::after{inset:auto; left:50%; top:52%; width:0; height:0; border-radius:0; background:none; transform:translate(-50%,-50%); border-left:4px solid transparent; border-right:4px solid transparent; border-bottom:7px solid #7B3F1B}
.spice{display:inline-flex; gap:1px}
.spice svg{width:14px; height:14px; color:var(--line)}
.spice svg.on{color:#C8311F}

/* ---------- announcement + header ---------- */
.ann{background:var(--maroon-deep); color:#F6E3B4; font-size:.84rem; font-weight:600}
.ann-in{display:flex; justify-content:center; gap:2.2rem; padding:.45rem 0; flex-wrap:wrap}
.ann span{display:inline-flex; align-items:center; gap:.45rem; white-space:nowrap}
.ann svg{width:16px; height:16px; color:var(--gold-soft)}
@media (max-width:900px){ .ann-hide-sm{display:none!important} }
@media (max-width:620px){ .ann-hide{display:none!important} .ann{font-size:.8rem} }
.top{position:sticky; top:0; z-index:40; background:var(--paper); box-shadow:0 6px 20px -16px rgba(60,20,10,.5)}
:root[data-theme="dark"] .top{background:var(--surface)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .top{background:var(--surface)}}
.top-in{display:flex; align-items:center; gap:1.2rem; height:70px}
.logo{display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--ink); flex:none}
.logo-mark{display:grid; place-items:center; width:42px; height:42px; border-radius:12px 12px 12px 4px; background:linear-gradient(145deg,#8A2329,#5A1217); color:#F2CF7A; font:600 1.55rem/1 var(--serif); box-shadow:inset 0 0 0 2px rgba(233,196,106,.45)}
.logo-txt{display:flex; flex-direction:column; font:600 1.55rem/1 var(--serif); letter-spacing:-.01em}
.logo-txt small{font:700 .62rem/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--kicker); margin-top:.3rem}
.nav{display:flex; gap:1.25rem; margin-left:auto; font-weight:600; font-size:.94rem}
.nav a{text-decoration:none; color:var(--ink-soft); white-space:nowrap; padding:.3rem 0; border-bottom:2px solid transparent}
.nav a:hover{color:var(--ink); border-color:var(--gold)}
.hsearch{position:relative; width:240px; flex:none}
.hsearch svg{position:absolute; left:.8rem; top:50%; translate:0 -50%; width:18px; height:18px; color:var(--ink-soft); pointer-events:none}
.hsearch input{width:100%; height:42px; border-radius:999px; border:1.5px solid var(--line); background:var(--surface); padding:0 1rem 0 2.4rem; font-size:.92rem; color:var(--ink)}
.hsearch input:focus{outline:none; border-color:var(--primary)}
.top-actions{display:flex; align-items:center; gap:.5rem}
.ic-btn{position:relative; display:inline-grid; place-items:center; width:44px; height:44px; border-radius:12px; border:1.5px solid var(--line); background:var(--surface); color:var(--ink)}
.ic-btn:hover{border-color:var(--primary)}
.ic-btn svg{width:21px; height:21px}
.ic-btn .count{position:absolute; top:-7px; right:-7px; min-width:20px; height:20px; padding:0 5px; border-radius:10px; background:var(--primary); color:#fff; font-size:.72rem; font-weight:800; display:grid; place-items:center; box-shadow:0 0 0 2px var(--paper)}
.ic-btn .count[data-n="0"]{display:none}
.cart-btn{background:var(--primary); border-color:var(--primary); color:var(--on-primary)}
.cart-btn .count{background:var(--gold-soft); color:#3A1A0A}
.cart-btn.bump{animation:bump .4s ease}
@keyframes bump{40%{transform:scale(1.14)}}
.menu-btn{display:none}
@media (max-width:1319px){ .hsearch{display:none} }
@media (min-width:1320px){ .search-only{display:none} }
@media (max-width:1099px){ .nav{display:none} .top-actions{margin-left:auto} .menu-btn{display:inline-grid} }
@media (max-width:420px){ .logo-txt{font-size:1.3rem} .logo-txt small{font-size:.55rem; letter-spacing:.1em} .logo-mark{width:36px; height:36px; font-size:1.3rem} .top-in{gap:.5rem} .top-actions{gap:.35rem} .ic-btn{width:40px; height:40px} }
.mobile-menu{display:none; flex-direction:column; position:fixed; inset:0; z-index:35; overflow-y:auto; padding:calc(var(--hh) + 12px) 1.25rem calc(1.5rem + env(safe-area-inset-bottom,0px)); background:var(--bg)}
.mobile-menu.open{display:flex}
.mobile-menu .mm-k{font-size:.75rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--kicker); margin:1rem 0 .2rem}
.mobile-menu > a:not(.btn){padding:.75rem .25rem; text-decoration:none; font-family:var(--serif); font-size:1.25rem; border-bottom:1px solid var(--line)}
.mobile-menu .btn{margin-top:.8rem}
@media (min-width:1100px){.mobile-menu{display:none!important}}

/* =====================================================================
   PACKAGING
   ===================================================================== */
.pk{position:relative; display:block; width:100%; container-type:inline-size; isolation:isolate; font-family:var(--sans); color:#2B1A14; text-align:center; -webkit-user-select:none; user-select:none}
.pk img{pointer-events:none}
.pk-brand{font-family:var(--serif); font-weight:700; line-height:1}
.pk-title{font-family:var(--serif); font-weight:700; line-height:1; letter-spacing:-.015em; display:block}
.pk-line{display:block; max-width:94%; margin-inline:auto; font-size:4.9cqw; font-weight:700; letter-spacing:.02em; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pk-foot{display:flex; align-items:center; justify-content:center; gap:2.4cqw; font-size:4cqw; font-weight:800; letter-spacing:.06em; text-transform:uppercase; line-height:1}
.pk .vm{width:6cqw; height:6cqw; border-width:.6cqw; border-radius:.6cqw; vertical-align:middle}
.pk .vm::after{inset:1cqw}
.pk .vm.nv::after{inset:auto; border-left-width:1.6cqw; border-right-width:1.6cqw; border-bottom-width:2.8cqw}
.foil{background:linear-gradient(180deg,#FBE7B0 0%,#E2B65A 45%,#B98A2E 60%,#F3D58A 100%); -webkit-background-clip:text; background-clip:text; color:transparent}

/* stand-up pouch: matte paper, colour band, arched photo window */
.pouch{aspect-ratio:.74; background:#FBF2DF; border-radius:5% 5% 9% 9% / 3.5% 3.5% 6% 6%; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end; padding:0 6% 6.5%;
  box-shadow:0 2px 3px rgba(60,30,10,.18), 0 18px 22px -12px rgba(60,30,10,.5)}
.pouch::before{content:""; position:absolute; inset:0; z-index:6; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.24) 0%, rgba(0,0,0,0) 5%, rgba(255,255,255,.28) 10%, rgba(255,255,255,0) 22%, rgba(255,255,255,0) 72%, rgba(255,255,255,.12) 84%, rgba(0,0,0,.08) 92%, rgba(0,0,0,.28) 100%),
    linear-gradient(180deg, rgba(255,255,255,.18) 0%, transparent 10%, transparent 86%, rgba(0,0,0,.16) 100%),
    linear-gradient(118deg, transparent 38%, rgba(255,255,255,.18) 45%, transparent 52%)}
.pouch::after{content:""; position:absolute; inset:0; z-index:5; pointer-events:none; opacity:.16; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.p-crimp{position:absolute; left:0; right:0; top:0; height:7%; z-index:3; background:repeating-linear-gradient(90deg, rgba(0,0,0,.16) 0 1px, rgba(255,255,255,.06) 1px 3px); border-bottom:1px solid rgba(0,0,0,.18)}
.p-crimp::after{content:""; position:absolute; left:4%; right:4%; bottom:-45%; height:1.5px; background:rgba(255,255,255,.35); box-shadow:0 1px 0 rgba(0,0,0,.25)}
.p-band{position:absolute; left:0; right:0; top:0; height:30%; z-index:1; background:radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--c) 78%, #fff) 0%, var(--c) 55%, color-mix(in srgb, var(--c) 80%, #000) 100%);
  display:flex; flex-direction:column; align-items:center; padding-top:10.5cqw}
.p-band::after{content:""; position:absolute; left:0; right:0; bottom:-3.2cqw; height:3.4cqw; background:var(--temple) repeat-x; background-size:7cqw 3.4cqw; filter:none}
.p-band .pk-brand{font-size:10.5cqw; background:linear-gradient(180deg,#FCEBB8 0%,#E6BE68 50%,#C29235 62%,#F5DB97 100%); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 .4cqw 0 rgba(0,0,0,.25))}
.pk-by{display:block; margin-top:1.6cqw; font-size:3.3cqw; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:#F6DFA8; opacity:.92; white-space:nowrap}
.p-win{position:absolute; z-index:2; top:24%; left:12%; right:12%; height:38%; overflow:hidden; background:#7a4a20;
  border-radius:50% 50% 5cqw 5cqw / 32% 32% 5cqw 5cqw; border:1.3cqw solid #D9AF55;
  box-shadow:0 0 0 .7cqw #FBF2DF, 0 0 0 1.2cqw color-mix(in srgb, var(--c) 70%, #000), 0 3cqw 5cqw -1cqw rgba(0,0,0,.35)}
.p-win img{width:100%; height:100%; object-fit:cover; filter:saturate(1.12) contrast(1.04)}
.p-win::after{content:""; position:absolute; inset:0; background:linear-gradient(150deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 75%, rgba(255,255,255,.12) 100%)}
.pouch .pk-title{position:relative; z-index:3; color:var(--c)}
.pouch .pk-line{position:relative; z-index:3; color:#6A4A33; margin-top:1.8cqw}
.pouch .pk-foot{position:relative; z-index:3; color:#5A4030; margin:3cqw auto 0; padding-top:2.6cqw; width:84%; border-top:.5cqw dashed rgba(90,64,48,.35)}

/* glass jar: metal lid, pickle visible through glass, wrap-around paper label */
.jar{aspect-ratio:.8}
.j-lid{position:absolute; z-index:4; top:0; left:15%; right:15%; height:15%; border-radius:3.2cqw 3.2cqw 1.6cqw 1.6cqw;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0) 0 1.3cqw, rgba(0,0,0,.16) 1.3cqw 1.9cqw),
    linear-gradient(90deg, #6E4E14 0%, #F4D57E 16%, #D2A548 36%, #9A7224 62%, #EBC977 82%, #6A4A12 100%);
  box-shadow:inset 0 -1.6cqw 0 rgba(0,0,0,.22), inset 0 1cqw 0 rgba(255,255,255,.45), 0 1cqw 1.2cqw rgba(0,0,0,.3)}
.j-lid::after{content:""; position:absolute; left:-3%; right:-3%; bottom:-.6cqw; height:2.6cqw; border-radius:1cqw; background:linear-gradient(90deg,#5d410f,#e6c26c 20%,#a77c2a 55%,#f0cf80 82%,#5d410f)}
.jar.nv .j-lid{background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0) 0 1.3cqw, rgba(0,0,0,.25) 1.3cqw 1.9cqw),
    linear-gradient(90deg, #1E0507 0%, #8C2A30 16%, #5A1217 38%, #2A0709 64%, #7A2328 84%, #1A0405 100%)}
.j-glass{position:absolute; z-index:2; top:13%; bottom:0; left:5%; right:5%; overflow:hidden; background:#5a2a10;
  border-radius:20% 20% 13% 13% / 13% 13% 8% 8%;
  box-shadow:inset 0 0 0 .7cqw rgba(255,255,255,.28), 0 2px 3px rgba(40,20,5,.2), 0 20px 24px -12px rgba(40,20,5,.55)}
.j-glass > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(1.15) contrast(1.06) brightness(.98)}
.j-glass::before{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(55% 9% at 50% 1%, rgba(255,255,255,.55), transparent 70%),
    linear-gradient(90deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,0) 5%, rgba(255,255,255,.55) 10%, rgba(255,255,255,.06) 15%, transparent 28%, transparent 78%, rgba(255,255,255,.3) 86%, rgba(255,255,255,0) 90%, rgba(0,0,0,.25) 100%)}
.j-glass::after{content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:
    linear-gradient(90deg, transparent 17%, rgba(255,255,255,.3) 19.5%, transparent 23%),
    linear-gradient(90deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,0) 15%, rgba(255,255,255,.08) 32%, rgba(255,255,255,0) 46%, rgba(0,0,0,0) 78%, rgba(0,0,0,.32) 100%)}
.j-label{position:absolute; z-index:2; left:0; right:0; top:35%; bottom:7%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.2cqw; padding:2cqw 6cqw;
  background:#FFF8EA; border-top:1.6cqw solid var(--c); border-bottom:1.6cqw solid var(--c);
  box-shadow:inset 0 1cqw 0 #D9AF55, inset 0 -1cqw 0 #D9AF55}
.j-label::before{content:""; position:absolute; inset:0; opacity:.13; background:var(--kolam) center/34cqw; pointer-events:none}
.j-label .pk-brand{position:relative; font-family:var(--sans); font-size:5cqw; font-weight:800; letter-spacing:.28em; text-transform:uppercase; color:#A0741F; padding-left:.28em}
.j-label .pk-title{position:relative; color:var(--c); margin:.5cqw 0}
.j-label .pk-line{position:relative; color:#6A4A33; font-size:4.8cqw}
.j-label .pk-foot{position:relative; color:#5A4030; margin-top:1cqw}

/* gift box */
.box{aspect-ratio:1.02; border-radius:3%; overflow:hidden; background:var(--c);
  box-shadow:0 2px 3px rgba(60,30,10,.2), 0 18px 22px -12px rgba(60,30,10,.55)}
.b-lid{position:absolute; z-index:3; left:0; right:0; top:0; height:24%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:linear-gradient(180deg, color-mix(in srgb, var(--c) 80%, #fff), var(--c) 60%, color-mix(in srgb, var(--c) 75%, #000)); border-bottom:1.2cqw solid #D9AF55}
.b-lid::after{content:""; position:absolute; left:0; right:0; bottom:-4.2cqw; height:3cqw; background:var(--temple) repeat-x; background-size:6cqw 3cqw}
.b-lid .pk-brand{font-size:8.5cqw; background:linear-gradient(180deg,#FCEBB8 0%,#E6BE68 50%,#C29235 62%,#F5DB97 100%); -webkit-background-clip:text; background-clip:text; color:transparent}
.b-lid .pk-by{font-size:2.8cqw; margin-top:1.2cqw}
.b-win{position:absolute; z-index:1; left:0; right:0; top:24%; bottom:0}
.b-win img{width:100%; height:100%; object-fit:cover; filter:saturate(1.1)}
.b-ribbon{position:absolute; z-index:2; top:0; bottom:0; right:16%; width:7%; background:linear-gradient(90deg,#9C7322,#F2D27E 45%,#C99A3B 70%,#8D661C); box-shadow:0 0 1.2cqw rgba(0,0,0,.35)}
.b-card{position:absolute; z-index:4; left:7%; bottom:7%; width:62%; background:#FFF8EA; border-radius:2cqw; padding:3.5cqw 3cqw 3cqw; display:flex; flex-direction:column; gap:1.2cqw;
  box-shadow:0 0 0 .6cqw #D9AF55 inset, 0 2cqw 4cqw rgba(0,0,0,.35)}
.b-card .pk-title{color:var(--c)}
.b-card .pk-line{font-size:3.2cqw; color:#6A4A33; white-space:normal}
.box::after{content:""; position:absolute; inset:0; z-index:5; pointer-events:none; background:linear-gradient(90deg, rgba(0,0,0,.22), rgba(255,255,255,.1) 8%, transparent 25%, transparent 80%, rgba(0,0,0,.22))}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; padding:clamp(2rem,5vw,4rem) 0 clamp(2.5rem,5vw,4.5rem);
  background:radial-gradient(70% 90% at 85% 40%, color-mix(in srgb, var(--turmeric) 16%, transparent), transparent 70%), linear-gradient(180deg, var(--surface-2), var(--bg) 90%)}
.kolam{position:absolute; width:340px; height:340px; background:var(--kolam) center/120px; opacity:.18; pointer-events:none; border-radius:50%; -webkit-mask:radial-gradient(closest-side,#000 40%,transparent); mask:radial-gradient(closest-side,#000 40%,transparent)}
.kolam.k1{left:-120px; top:-80px}
.hero-grid{position:relative; display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(2rem,4vw,3.5rem); align-items:center}
.eyebrow{display:inline-flex; align-items:center; gap:.55rem; background:var(--surface); border:1px solid var(--line); padding:.4rem .9rem; border-radius:999px; font-size:.86rem; font-weight:600; color:var(--ink-soft)}
.eyebrow .dot{width:8px; height:8px; border-radius:50%; background:var(--wa); box-shadow:0 0 0 4px color-mix(in srgb, var(--wa) 25%, transparent); animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 7px color-mix(in srgb, var(--wa) 8%, transparent)}}
.hero h1{font-size:clamp(2.1rem, 4.2vw, 3.9rem); margin:1rem 0 0; font-weight:600}
.hero h1 em{font-style:italic; font-weight:500; color:var(--accent)}
.hero .lead{max-width:34rem}
.ctas{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.6rem}
.trust{list-style:none; padding:0; margin:1.5rem 0 0; display:flex; flex-wrap:wrap; gap:.5rem 1.4rem}
.trust li{display:flex; align-items:center; gap:.45rem; font-weight:600; font-size:.92rem}
.trust svg{width:18px; height:18px; flex:none; color:var(--leaf)}
:root[data-theme="dark"] .trust svg{color:#7FC48C}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .trust svg{color:#7FC48C}}

.stage{position:relative; width:100%; aspect-ratio:1.12; max-height:600px}
.arch{position:absolute; left:14%; right:14%; top:0; bottom:16%; border-radius:50% 50% 0 0 / 34% 34% 0 0;
  background:radial-gradient(60% 50% at 50% 35%, #8E2930, #6E1A1F 60%, #4A1014); box-shadow:inset 0 0 0 8px #6E1A1F, inset 0 0 0 10px #D9AF55, 0 30px 50px -30px rgba(74,16,20,.7)}
.arch::before{content:""; position:absolute; inset:18px; border-radius:inherit; background:var(--kolam) center/90px; opacity:.22}
.arch::after{content:""; position:absolute; left:50%; top:-26px; translate:-50% 0; width:34px; height:40px; background:radial-gradient(circle at 50% 70%, #F2CF7A 0 30%, transparent 32%), linear-gradient(#D9AF55,#D9AF55) 50% 0/3px 60% no-repeat}
.leaf{position:absolute; left:2%; right:2%; bottom:6%; height:22%; border-radius:50%; background:radial-gradient(60% 70% at 50% 40%, #3F8A4A, #2E6B3A 60%, #1E4A27); box-shadow:0 18px 30px -18px rgba(0,0,0,.6)}
.leaf::after{content:""; position:absolute; left:6%; right:6%; top:48%; height:2px; background:rgba(220,240,200,.5); border-radius:2px}
.stage-packs{position:absolute; inset:0}
.hp{position:absolute; transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.hp1{left:3%;  bottom:26%; width:21%; transform:rotate(-7deg); z-index:1}
.hp2{right:3%; bottom:26%; width:21%; transform:rotate(7deg); z-index:1}
.hp3{left:15%; bottom:10%; width:25%; z-index:2}
.hp5{right:15%; bottom:10%; width:22%; z-index:2}
.hp4{left:35.5%; bottom:7%; width:29%; z-index:3}
.stage.in .hp{animation:rise .9s cubic-bezier(.2,.75,.25,1) both}
.stage.in .hp2{animation-delay:.06s} .stage.in .hp3{animation-delay:.12s} .stage.in .hp5{animation-delay:.18s} .stage.in .hp4{animation-delay:.24s}
@keyframes rise{from{opacity:0; translate:0 30px}}
@media (hover:hover){ .stage:hover .hp1{transform:rotate(-10deg) translate(-6px,-6px)} .stage:hover .hp2{transform:rotate(10deg) translate(6px,-6px)} .stage:hover .hp4{transform:translateY(-8px) scale(1.03)} }
.badge-spin{position:absolute; z-index:6; top:2%; right:2%; width:112px; height:112px; filter:drop-shadow(0 10px 14px rgba(0,0,0,.25))}
.badge-spin .ring{animation:spin 28s linear infinite; transform-origin:50% 50%}
@keyframes spin{to{transform:rotate(360deg)}}
.float-note{position:absolute; z-index:6; left:0; top:12%; background:#FFFBF3; color:#2B1A14; padding:.6rem .9rem .7rem; border-radius:14px; transform:rotate(-4deg); box-shadow:0 16px 30px -16px rgba(40,30,20,.55); max-width:190px; line-height:1.25}
.float-note .hand{display:block; font-size:1.5rem; color:#8C1D22; line-height:1}
.float-note small{font-size:.8rem; color:#6A584B}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr; gap:1.5rem}
  .hero h1{font-size:clamp(2rem, 8vw, 2.8rem)}
  .stage{max-width:560px; margin-inline:auto}
  .badge-spin{width:78px; height:78px}
  .float-note{display:none}
  .ctas .btn{flex:1}
}
@media (max-width:420px){ .trust{gap:.4rem 1rem} .trust li{font-size:.85rem} }

/* ---------- USP strip ---------- */
.usp{background:var(--maroon); color:#FFF4DE; border-top:2px solid var(--gold); border-bottom:2px solid var(--gold)}
.usp-in{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem}
.usp-in > div{display:flex; align-items:center; gap:.8rem; padding:1.1rem 0}
.usp svg{width:30px; height:30px; flex:none; color:var(--gold-soft)}
.usp span{display:flex; flex-direction:column; font-size:.85rem; color:#F2D9B8; line-height:1.3}
.usp b{font-size:.98rem; color:#fff}
@media (max-width:860px){ .usp-in{grid-template-columns:1fr 1fr; gap:0 1rem} .usp-in > div{padding:.8rem 0} }

/* ---------- category rail ---------- */
.cat-rail{display:grid; grid-template-columns:repeat(6,1fr); gap:1.2rem}
.cat{display:flex; flex-direction:column; align-items:center; text-align:center; text-decoration:none; gap:.25rem}
.cat-img{width:100%; max-width:170px; aspect-ratio:1; border-radius:50%; overflow:hidden; border:4px solid var(--surface); box-shadow:0 0 0 2px var(--gold), 0 18px 30px -18px rgba(60,20,10,.6); margin-bottom:.6rem}
.cat-img img{width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.cat:hover .cat-img img{transform:scale(1.08)}
.cat b{font-family:var(--serif); font-weight:600; font-size:1.06rem; line-height:1.2}
.cat small{color:var(--ink-soft); font-size:.82rem}
@media (max-width:900px){ .cat-rail{display:flex; overflow-x:auto; gap:1rem; padding-bottom:.5rem; scroll-snap-type:x mandatory; scrollbar-width:none; margin-inline:-1rem; padding-inline:1rem} .cat-rail::-webkit-scrollbar{display:none} .cat{flex:0 0 112px; scroll-snap-align:start} .cat b{font-size:.92rem} }

/* ---------- product cards ---------- */
.best{background:var(--surface-2); padding-bottom:clamp(2.5rem,5vw,4rem)}
.best-row{display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 3*1.25rem)/4); gap:1.25rem; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:.6rem; scrollbar-width:thin}
.best-row .card{scroll-snap-align:start}
@media (max-width:1000px){ .best-row{grid-auto-columns:calc((100% - 2*1rem)/2.6); gap:1rem} }
@media (max-width:560px){ .best-row{grid-auto-columns:64%; gap:.75rem} }

.tabs{position:sticky; top:var(--hh); z-index:20; display:flex; gap:.5rem; overflow-x:auto; padding:.75rem 0; margin-bottom:.6rem; background:var(--bg); scrollbar-width:none; border-bottom:1px solid var(--line)}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:none; display:inline-flex; align-items:center; gap:.45rem; border:1.5px solid var(--line); background:var(--surface); border-radius:999px; padding:.5rem .95rem; font-weight:700; font-size:.9rem; color:var(--ink-soft); transition:all .2s}
.tabs button small{font-size:.72rem; font-weight:800; background:var(--surface-2); color:var(--ink-soft); padding:.05rem .45rem; border-radius:999px}
.tabs button svg{width:14px; height:14px; color:var(--kumkum)}
.tabs button:hover{border-color:var(--primary); color:var(--ink)}
.tabs button[aria-selected="true"]{background:var(--primary); border-color:var(--primary); color:var(--on-primary)}
.tabs button[aria-selected="true"] small{background:rgba(255,255,255,.2); color:#fff}
.tabs button[aria-selected="true"] svg{color:#fff}
.toolbar{display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; margin:.6rem 0 .4rem}
.tsearch{position:relative; flex:1 1 240px; max-width:380px}
.tsearch svg{position:absolute; left:.85rem; top:50%; translate:0 -50%; width:18px; height:18px; color:var(--ink-soft); pointer-events:none}
.tsearch input{width:100%; height:44px; border-radius:12px; border:1.5px solid var(--line); background:var(--surface); padding:0 1rem 0 2.5rem; font-size:16px; color:var(--ink)}
.tsearch input:focus{outline:none; border-color:var(--primary)}
.seg{display:inline-flex; background:var(--surface); border:1.5px solid var(--line); border-radius:12px; padding:3px}
.seg button{display:inline-flex; align-items:center; gap:.4rem; border:0; background:transparent; border-radius:9px; padding:.5rem .8rem; font-weight:700; font-size:.88rem; color:var(--ink-soft)}
.seg button[aria-pressed="true"]{background:var(--surface-2); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.12)}
.sort select{height:44px; border-radius:12px; border:1.5px solid var(--line); background:var(--surface); color:var(--ink); padding:0 .9rem; font-weight:600; font-size:.92rem}
.count-line{color:var(--ink-soft); font-size:.9rem; margin:.4rem 0 1rem}
.count-line .linkish{font-size:.9rem; margin-left:.4rem}
@media (max-width:600px){ .tsearch{flex-basis:100%; max-width:none} .seg{flex:1} .seg button{flex:1; justify-content:center; padding:.5rem .4rem} .sort{flex:1} .sort select{width:100%} }

.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%,238px),1fr)); gap:1.25rem}
@media (min-width:1180px){ .grid{grid-template-columns:repeat(4,1fr)} }
@media (max-width:560px){ .grid{grid-template-columns:1fr 1fr; gap:.7rem} }
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .25s, transform .2s, border-color .2s}
@media (hover:hover){ .card:hover{box-shadow:0 22px 38px -24px rgba(60,20,10,.5); transform:translateY(-3px)} }
.card.in-cart{border-color:var(--primary)}
.card.out .art .pk{filter:grayscale(.6); opacity:.75}
.art{position:relative; aspect-ratio:1/1.02; overflow:hidden; isolation:isolate; container-type:inline-size;
  background:radial-gradient(90% 75% at 50% 36%, #FFFDF8 0%, color-mix(in srgb, var(--c) 9%, #F7EBD3) 70%, color-mix(in srgb, var(--c) 16%, #EFDDBD) 100%)}
.art::before{content:""; position:absolute; inset:0; z-index:-1; background:var(--kolam) center/46%; opacity:.12}
.art::after{content:""; position:absolute; z-index:-1; left:22%; right:22%; bottom:7%; height:7%; border-radius:50%; background:radial-gradient(closest-side, rgba(60,25,10,.38), transparent)}
:root[data-theme="dark"] .art{background:radial-gradient(90% 75% at 50% 36%, #3A2A24 0%, #2A1D19 70%, #221714 100%)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .art{background:radial-gradient(90% 75% at 50% 36%, #3A2A24 0%, #2A1D19 70%, #221714 100%)}}
.art-btn{position:absolute; inset:0; display:grid; place-items:center; padding:0; border:0; background:none; border-radius:0}
.art .pk{width:60%; translate:0 2%; transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.art.t-jar .pk{width:62%}
.art.t-box .pk{width:72%; translate:0 6%}
@media (hover:hover){ .card:hover .art .pk{transform:translateY(-3%) scale(1.04)} }
.real{position:absolute; right:4%; bottom:5%; width:19%; aspect-ratio:1; border-radius:50%; overflow:hidden; border:3px solid #fff; box-shadow:0 6px 14px -4px rgba(0,0,0,.45); z-index:2}
.real img{width:100%; height:100%; object-fit:cover}
.bdg{position:absolute; z-index:6; top:.7rem; left:.7rem; background:var(--maroon); color:#FFF4DE; font-size:.7rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase; padding:.3rem .6rem; border-radius:6px; box-shadow:0 4px 10px -4px rgba(0,0,0,.4)}
.bdg-out{top:auto; bottom:.7rem; background:#3B3B3B}
.bdg-low{top:auto; bottom:.7rem; background:var(--turmeric); color:#3A1A0A}
.wish{position:absolute; z-index:6; top:.55rem; right:.55rem; width:36px; height:36px; border-radius:50%; border:0; background:rgba(255,255,255,.92); color:#6A584B; display:grid; place-items:center; box-shadow:0 4px 12px -4px rgba(0,0,0,.35); transition:transform .15s}
.wish svg{width:19px; height:19px}
.wish.on{color:var(--kumkum)}
.wish:active{transform:scale(.88)}
.qty-tag{position:absolute; z-index:6; top:3.2rem; right:.55rem; min-width:26px; height:26px; padding:0 6px; border-radius:13px; background:var(--primary); color:#fff; font-weight:800; font-size:.8rem; display:none; place-items:center}
.card.in-cart .qty-tag{display:grid}
.card .body{padding:.9rem 1rem 1rem; display:flex; flex-direction:column; gap:.45rem; flex:1}
.card .meta{display:flex; align-items:center; gap:.45rem; font-size:.74rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft)}
.card .meta .spice{margin-left:auto}
.card h3{font-size:1.1rem; color:var(--ink)}
.card h3 button{all:unset; cursor:pointer}
.card h3 button:hover{text-decoration:underline; text-underline-offset:3px}
.card h3 button:focus-visible{outline:3px solid var(--gold); outline-offset:2px}
.card .desc{font-size:.88rem; color:var(--ink-soft); line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.sizes{display:flex; gap:.35rem; margin-top:.15rem}
.sizes button{flex:1; border:1.5px solid var(--line); background:transparent; border-radius:9px; padding:.38rem .3rem; font-size:.8rem; font-weight:700; color:var(--ink-soft); display:flex; flex-direction:column; align-items:center; line-height:1.2}
.sizes button[aria-pressed="true"]{border-color:var(--primary); background:color-mix(in srgb, var(--primary) 8%, transparent); color:var(--ink)}
.sizes button small{font-weight:600; font-size:.74rem; opacity:.85}
.one-size{font-size:.82rem; font-weight:700; color:var(--ink-soft)}
.buy{display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-top:auto; padding-top:.5rem}
.price{font-weight:800; font-size:1.2rem}
.add{display:inline-flex; align-items:center; gap:.4rem; border:0; background:var(--primary); color:var(--on-primary); border-radius:999px; padding:.55rem 1.05rem; font-weight:700; font-size:.92rem; text-decoration:none}
.add svg{width:17px; height:17px}
.add:hover{background:var(--primary-deep)}
.add.soldout{background:#4A4A4A}
.step{display:inline-flex; align-items:center; background:var(--primary); color:var(--on-primary); border-radius:999px; padding:.18rem}
.step button{width:2rem; height:2rem; border:0; border-radius:50%; background:rgba(255,255,255,.16); color:inherit; font-size:1.1rem; font-weight:700; display:grid; place-items:center}
.step button:hover{background:rgba(255,255,255,.3)}
.step output{min-width:1.8rem; text-align:center; font-weight:800}
.step.sm button{width:1.7rem; height:1.7rem; font-size:.95rem}
.step.lg{padding:.3rem}
.step.lg button{width:2.5rem; height:2.5rem}
.step.lg output{min-width:2.4rem; font-size:1.05rem}
@media (max-width:560px){
  .card .body{padding:.7rem .7rem .8rem; gap:.35rem}
  .card h3{font-size:.95rem}
  .card .desc{display:none}
  .card .meta{font-size:.66rem; gap:.3rem}
  .card .meta .spice svg{width:11px; height:11px}
  .sizes button{font-size:.72rem; padding:.32rem .15rem}
  .buy{flex-direction:column; align-items:stretch; gap:.45rem}
  .price{font-size:1.05rem}
  .add{justify-content:center; padding:.55rem .6rem}
  .step{justify-content:space-between}
  .bdg{font-size:.6rem; top:.5rem; left:.5rem; padding:.25rem .45rem}
  .wish{width:32px; height:32px; top:.4rem; right:.4rem}
  .qty-tag{top:2.8rem; right:.4rem}
  .real{border-width:2px}
}
.no-res{text-align:center; padding:3rem 1rem; color:var(--ink-soft)}
.no-res .hand{display:block; font-size:2rem; color:var(--accent)}
.disclaimer{font-size:.84rem; color:var(--ink-soft); margin-top:1.6rem}

/* ---------- ways to enjoy ---------- */
.enjoy{background:var(--surface-2)}
.enjoy-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem}
.enj{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column}
.enj > img{aspect-ratio:4/3; width:100%; object-fit:cover}
.enj .in{padding:1rem 1.1rem 1.15rem; display:flex; flex-direction:column; gap:.4rem; flex:1}
.enj h3{font-size:1.15rem}
.enj p{color:var(--ink-soft); font-size:.92rem}
.pair{display:flex; align-items:center; gap:.6rem; margin-top:auto; padding-top:.7rem; border-top:1px dashed var(--line)}
.pair img{width:38px; height:38px; border-radius:10px; object-fit:cover}
.pair span{flex:1; font-size:.8rem; color:var(--ink-soft); line-height:1.25}
.pair span b{display:block; color:var(--ink); font-size:.88rem}
.pair button{border:1.5px solid var(--primary); background:transparent; color:var(--primary); border-radius:999px; padding:.35rem .8rem; font-weight:700; font-size:.85rem; white-space:nowrap}
.pair button:hover{background:var(--primary); color:var(--on-primary)}
:root[data-theme="dark"] .pair button{color:var(--ink)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .pair button{color:var(--ink)}}
@media (max-width:1000px){ .enjoy-grid{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .enjoy-grid{grid-template-columns:1fr} }

/* ---------- gifting ---------- */
.gift-grid{display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(2rem,5vw,4rem); align-items:center}
.gift-photo{position:relative; border-radius:28px; overflow:hidden; aspect-ratio:4/4.1; box-shadow:0 0 0 2px var(--gold), 0 30px 50px -30px rgba(40,20,10,.6); border:8px solid var(--surface)}
.gift-photo img{width:100%; height:100%; object-fit:cover}
.gift-tag{position:absolute; left:1rem; bottom:1rem; display:inline-flex; align-items:center; gap:.5rem; background:#FFFBF3; color:#6E1A1F; padding:.55rem .95rem; border-radius:999px; font-weight:700; font-size:.9rem}
.gift-tag svg{width:20px; height:20px}
.ticks{list-style:none; padding:0; margin:1.3rem 0 0; display:grid; gap:.55rem}
.ticks li{display:flex; align-items:center; gap:.6rem; font-weight:600}
.ticks svg{width:20px; height:20px; padding:3px; border-radius:50%; background:var(--leaf); color:#fff; flex:none}
@media (max-width:860px){ .gift-grid{grid-template-columns:1fr} .gift-photo{aspect-ratio:16/11} }

/* ---------- story ---------- */
.story{background:var(--surface-2)}
.story-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center}
.story p:not(.kicker){color:var(--ink-soft); margin-top:1rem; max-width:36rem}
.collage{position:relative; height:clamp(420px, 40vw, 520px)}
.collage img{position:absolute; object-fit:cover; border-radius:20px; border:6px solid #FFFBF3; box-shadow:0 24px 40px -24px rgba(40,20,10,.55)}
.collage .c1{left:0; top:0; width:72%; height:60%; transform:rotate(-2deg)}
.collage .c2{right:0; bottom:4%; width:58%; height:50%; transform:rotate(2.5deg)}
.recipe{position:absolute; left:2%; bottom:0; width:min(260px, 52%); background:#FFFBF3; color:#3b2a1a; border-radius:6px; padding:1.1rem 1rem 1rem 1.6rem; transform:rotate(-3deg); box-shadow:0 20px 34px -20px rgba(60,40,10,.6);
  background-image:repeating-linear-gradient(180deg, transparent 0 27px, rgba(110,26,31,.13) 27px 28px)}
.recipe::before{content:""; position:absolute; top:0; bottom:0; left:1rem; width:1px; background:rgba(163,36,43,.35)}
.recipe .hand{font-size:1.45rem; color:#8C1D22; line-height:1.1}
.recipe ul{list-style:none; padding:0; margin:.4rem 0 0; font-family:var(--hand); font-size:1.2rem; line-height:28px; font-weight:600}
.chef{display:flex; gap:1.1rem; align-items:center; margin:1.6rem 0 0; padding:1.1rem 1.2rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); max-width:36rem}
.chef-ph{flex:none; width:78px; height:78px; border-radius:50% 50% 12px 12px; object-fit:cover; display:grid; place-items:center; background:linear-gradient(145deg,#8A2329,#5A1217); color:#F2CF7A; font-family:var(--serif); font-size:1.8rem; box-shadow:0 0 0 3px var(--surface), 0 0 0 5px var(--gold)}
.chef figcaption{min-width:0}
.chef blockquote{margin:0; font-size:1rem; line-height:1.5; color:var(--ink)}
.chef .hand{display:inline-block; font-size:1.7rem; color:var(--accent); line-height:1; margin-top:.4rem; margin-right:.6rem}
.chef small{color:var(--ink-soft); font-size:.85rem}
.stats{display:flex; flex-wrap:wrap; gap:1rem 2.2rem; margin-top:1.6rem}
.stats div{display:flex; align-items:baseline; gap:.6rem}
.stats b{font-family:var(--serif); font-weight:600; font-size:2.8rem; color:var(--gold); line-height:1}
.stats span{font-size:.85rem; color:var(--ink-soft); line-height:1.3}
@media (max-width:860px){ .story-grid{grid-template-columns:1fr} .collage{height:min(90vw,440px)} .recipe{left:0; bottom:-4%; transform:rotate(-3deg) scale(.78); transform-origin:bottom left} }

/* ---------- compare ---------- */
.cmp{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; max-width:880px}
.cmp-row{display:grid; grid-template-columns:1.6fr 1fr 1fr; align-items:center; border-top:1px solid var(--line)}
.cmp-row > span{padding:.95rem 1.1rem; font-size:.95rem}
.cmp-row > span:not(:first-child){text-align:center; display:flex; justify-content:center; color:var(--ink-soft)}
.cmp-head{border-top:0; font-weight:800; font-size:.9rem}
.cmp-row .us{background:color-mix(in srgb, var(--primary) 7%, transparent); color:var(--ink)!important; font-weight:700}
.cmp-head .us{background:var(--primary); color:var(--on-primary)!important}
.cmp svg{width:22px; height:22px; color:var(--leaf)}
.cmp svg.no{color:var(--kumkum); opacity:.75}
@media (max-width:560px){ .cmp-row{grid-template-columns:1.3fr .9fr .9fr} .cmp-row > span{padding:.75rem .6rem; font-size:.85rem} }

/* ---------- how ---------- */
.how{background:var(--surface-2)}
.flow{display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem}
.flow-step{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:1.6rem 1.35rem}
@media (min-width:1024px){.flow-step:not(:last-child)::after{content:""; position:absolute; top:2.9rem; right:-1.3rem; width:1.3rem; height:2px; background:repeating-linear-gradient(90deg,var(--gold) 0 5px,transparent 5px 9px)}}
.step-ic{position:relative; width:62px; height:62px; border-radius:50%; background:color-mix(in srgb, var(--turmeric) 22%, var(--surface)); display:grid; place-items:center; margin-bottom:1rem}
.step-ic svg{width:28px; height:28px; color:var(--primary)}
:root[data-theme="dark"] .step-ic svg{color:var(--gold-soft)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .step-ic svg{color:var(--gold-soft)}}
.step-n{position:absolute; top:-5px; right:-5px; width:24px; height:24px; border-radius:50%; background:var(--primary); color:#fff; font-size:.78rem; font-weight:800; display:grid; place-items:center}
.flow-step h3{font-size:1.18rem; margin-bottom:.35rem}
.flow-step p{color:var(--ink-soft); font-size:.94rem}
@media (max-width:1023px){ .flow{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .flow{grid-template-columns:1fr} }

/* ---------- delivery ---------- */
.del-wrap{display:grid; grid-template-columns:.9fr 1.6fr; gap:clamp(1.5rem,4vw,3rem); align-items:start}
.pin-check{position:relative; display:flex; gap:.5rem; margin-top:1.3rem; max-width:420px}
.pin-check > svg{position:absolute; left:.9rem; top:50%; translate:0 -50%; width:20px; height:20px; color:var(--ink-soft)}
.pin-check input{flex:1; min-width:0; height:48px; border-radius:12px; border:1.5px solid var(--line); background:var(--surface); padding:0 1rem 0 2.6rem; font-size:16px; color:var(--ink)}
.pin-check input:focus{outline:none; border-color:var(--primary)}
.pin-check .btn{border-radius:12px; padding-inline:1.3rem}
.pc-out{margin-top:.8rem; font-size:.94rem; max-width:420px}
.pc-out.ok{color:var(--ok)} .pc-out.bad{color:var(--bad)}
.pc-out b{display:block}
.del-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.del{border:1.5px solid var(--line); border-radius:var(--r); padding:1.4rem; background:var(--surface)}
.del:first-child{border-color:var(--primary)}
.del svg{width:34px; height:34px; color:var(--leaf); margin-bottom:.8rem}
.del h3{font-size:1.12rem; margin-bottom:.4rem}
.del p{color:var(--ink-soft); font-size:.92rem}
.del .meta{margin-top:.9rem; font-weight:800; font-size:.9rem; color:var(--accent)}
@media (max-width:960px){ .del-wrap{grid-template-columns:1fr} }
@media (max-width:700px){ .del-grid{grid-template-columns:1fr} }

/* ---------- reviews ---------- */
.reviews{background:var(--maroon-deep); color:#FFF4DE; background-image:linear-gradient(rgba(74,16,20,.94),rgba(74,16,20,.94)), var(--kolam); background-size:auto, 140px}
.reviews h2{color:#FFF4DE}
.reviews .kicker{color:var(--gold-soft)}
.rv-head{display:flex; justify-content:space-between; align-items:end; gap:1rem}
.rv-row{display:grid; grid-auto-flow:column; grid-auto-columns:min(340px, 84%); gap:1.25rem; overflow-x:auto; scroll-snap-type:x mandatory; padding:2rem 0 1rem; scrollbar-width:thin}
.rv{scroll-snap-align:start; background:rgba(255,255,255,.06); border:1px solid rgba(233,196,106,.25); border-radius:var(--r); padding:1.5rem; display:flex; flex-direction:column; gap:1rem}
.rv .stars{color:var(--gold-soft); letter-spacing:.15em}
.rv blockquote{margin:0; font-size:1.02rem; line-height:1.55}
.rv footer{margin-top:auto; display:flex; align-items:center; gap:.7rem; font-size:.9rem; opacity:.92}
.rv .av{width:38px; height:38px; border-radius:50%; background:var(--gold-soft); color:#3A1A0A; display:grid; place-items:center; font-weight:800}
.rv footer b{display:block; font-weight:700}
.rv-nav{display:flex; gap:.5rem}
.rv-nav button{width:2.7rem; height:2.7rem; border-radius:50%; border:1px solid rgba(255,255,255,.35); background:transparent; color:#FFF4DE; font-size:1.1rem}
.rv-nav button:hover{background:rgba(255,255,255,.1)}

/* ---------- faq ---------- */
.faq-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,4rem); align-items:start}
.faq-grid .btn{margin-top:1.4rem}
details{border-bottom:1px solid var(--line); padding:1.05rem 0}
summary{cursor:pointer; font-weight:700; font-size:1.04rem; list-style:none; display:flex; justify-content:space-between; gap:1rem}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; font-size:1.4rem; line-height:1; color:var(--gold)}
details[open] summary::after{content:"–"}
details p{color:var(--ink-soft); margin-top:.6rem}
@media (max-width:860px){ .faq-grid{grid-template-columns:1fr} }

/* ---------- contact ---------- */
.contact{background:linear-gradient(135deg,#5A1217,#3A0B0E); color:#FFF4DE}
.contact h2{color:#fff}
.contact .kicker{color:var(--gold-soft)}
.contact .lead{color:#E9CFC0}
.contact-grid{display:grid; grid-template-columns:1.2fr 1fr; gap:2.5rem; align-items:center}
.c-list{list-style:none; padding:0; margin:0; display:grid; gap:1rem}
.c-list li{display:flex; gap:.9rem; align-items:flex-start; background:rgba(255,255,255,.06); border:1px solid rgba(233,196,106,.25); border-radius:14px; padding:1rem 1.1rem}
.c-list svg{width:24px; height:24px; color:var(--gold-soft); flex:none; margin-top:.1rem}
.c-list span{display:flex; flex-direction:column; color:#E9CFC0; font-size:.94rem}
.c-list b{color:#fff}
@media (max-width:860px){ .contact-grid{grid-template-columns:1fr} }

/* ---------- footer ---------- */
footer.site{background:#2A0A0C; color:#D9C3B4; padding:0 0 7rem; font-size:.92rem}
footer.site .temple{margin-bottom:3rem}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2rem}
footer.site .logo{color:#FFF4DE; margin-bottom:.9rem}
footer.site p{max-width:24rem}
footer.site nav{display:flex; flex-direction:column; gap:.45rem; align-items:flex-start}
footer.site b{color:#fff; margin-bottom:.3rem}
footer.site a, footer.site nav button{text-decoration:none; background:none; border:0; padding:0; color:inherit; text-align:left}
footer.site a:hover, footer.site nav button:hover{color:#fff; text-decoration:underline}
.pay-ic{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1rem}
.pay-ic span{font-size:.72rem; font-weight:800; letter-spacing:.04em; padding:.25rem .55rem; border-radius:6px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:#F2E2D2}
.foot-bottom{display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; margin-top:2.4rem; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.12); font-size:.85rem; color:#B8A091}
.credits{border:0; padding:0; max-width:100%}
.credits summary{font-weight:600; font-size:.85rem; color:#D9C3B4; justify-content:flex-start}
.credits summary::after{content:"▾"; font-size:.9rem; color:inherit}
.credits ul{list-style:none; padding:0; margin:.8rem 0 0; columns:2 280px; column-gap:2rem; font-size:.78rem; line-height:1.5}
.credits li{break-inside:avoid; margin-bottom:.3rem}
.credits a{text-decoration:underline!important}
@media (max-width:760px){ .foot-grid{grid-template-columns:1fr 1fr} .foot-grid > div:first-child{grid-column:1/-1} }

/* ---------- floating ---------- */
.fab{position:fixed; right:1rem; bottom:calc(1rem + env(safe-area-inset-bottom,0px)); z-index:45; width:56px; height:56px; border-radius:50%; background:var(--wa); color:#fff; display:grid; place-items:center; box-shadow:0 10px 24px -8px rgba(0,0,0,.45); transition:transform .25s, opacity .25s}
.fab svg{width:28px; height:28px}
.fab.hide{transform:scale(.6); opacity:0; pointer-events:none}
.cartbar{position:fixed; left:0; right:0; bottom:0; z-index:44; background:var(--surface); border-top:2px solid var(--gold); box-shadow:0 -10px 28px -14px rgba(40,10,10,.35); padding-bottom:env(safe-area-inset-bottom,0px); transform:translateY(110%); transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.cartbar.show{transform:none}
.cartbar-in{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem 0}
.cartbar-info{display:flex; align-items:center; gap:.75rem; background:none; border:0; padding:0; text-align:left}
.cartbar-count{display:grid; place-items:center; min-width:34px; height:34px; padding:0 8px; border-radius:17px; background:var(--primary); color:#fff; font-weight:800}
.cartbar-text{display:flex; flex-direction:column; line-height:1.25}
.cartbar-text b{font-size:.95rem}
.cartbar-text i{font-style:normal; font-size:.85rem; color:var(--ink-soft)}

/* ---------- drawer & modals ---------- */
.scrim{position:fixed; inset:0; background:rgba(25,10,8,.58); z-index:60; opacity:0; pointer-events:none; transition:opacity .25s}
.scrim.open{opacity:1; pointer-events:auto}
.x{display:grid; place-items:center; width:2.5rem; height:2.5rem; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--ink)}
.x svg{width:18px; height:18px}
.x:hover{background:var(--surface-2)}
.drawer{position:fixed; top:0; right:0; bottom:0; width:min(450px,100%); background:var(--surface); z-index:61; display:flex; flex-direction:column; transform:translateX(100%); transition:transform .3s cubic-bezier(.2,.8,.2,1); visibility:hidden;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px)}
.drawer.open{transform:none; visibility:visible}
.dh{display:flex; justify-content:space-between; align-items:center; padding:1.1rem 1.4rem; border-bottom:1px solid var(--line)}
.dh h2{font-size:1.45rem}
.dbody{flex:1; overflow:auto; padding:.4rem 1.4rem}
.line{display:grid; grid-template-columns:62px 1fr auto; gap:.85rem; align-items:center; padding:.85rem 0; border-bottom:1px dashed var(--line)}
.line-art{padding:0; border:0; background:none; border-radius:12px}
.line img{width:62px; height:62px; border-radius:12px; object-fit:cover}
.line b{display:flex; gap:.4rem; align-items:center; font-weight:700; font-size:.93rem; line-height:1.3}
.line small{display:block; color:var(--ink-soft)}
.rm{background:none; border:0; padding:0; font-size:.8rem; color:var(--ink-soft); text-decoration:underline; margin-top:.15rem}
.line .r{text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:.35rem}
.empty{text-align:center; padding:3rem 1rem; color:var(--ink-soft)}
.empty .hand{font-size:1.8rem; color:var(--accent); display:block; margin-bottom:.4rem}
.empty .btn{margin-top:1.2rem}
.dfoot{border-top:1px solid var(--line); padding:1rem 1.4rem 1.2rem; background:var(--surface)}
.prog{font-size:.86rem; color:var(--ink-soft); margin-bottom:.8rem}
.prog .bar{height:6px; border-radius:6px; background:var(--surface-2); margin-top:.4rem; overflow:hidden}
.prog .bar i{display:block; height:100%; background:linear-gradient(90deg,var(--turmeric),var(--leaf)); transition:width .3s}
.coupon{display:flex; gap:.4rem}
.coupon input{flex:1; min-width:0; height:40px; border-radius:10px; border:1.5px dashed var(--line); background:var(--bg); padding:0 .8rem; font-size:16px; text-transform:uppercase; color:var(--ink)}
.coupon input:focus{outline:none; border-color:var(--primary); border-style:solid}
.coupon button{border:1.5px solid var(--primary); background:transparent; color:var(--primary); border-radius:10px; padding:0 1rem; font-weight:800}
:root[data-theme="dark"] .coupon button{color:var(--ink)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .coupon button{color:var(--ink)}}
.cp-msg{font-size:.8rem; color:var(--ink-soft); min-height:1.2em; margin:.3rem 0 .4rem}
.cp-msg.ok{color:var(--ok); font-weight:700} .cp-msg.bad{color:var(--bad)} .cp-msg.warn{color:#A0741F}
.sums{margin:0 0 1rem; display:grid; gap:.3rem}
.sums div{display:flex; justify-content:space-between; gap:1rem; font-size:.94rem}
.sums dt{color:var(--ink-soft)} .sums dd{margin:0; font-weight:700}
.sums .disc dd{color:var(--ok)}
.sums .grand{border-top:1px solid var(--line); padding-top:.5rem; margin-top:.2rem; font-size:1.15rem}
.sums .grand dt{color:var(--ink); font-weight:800} .sums .grand dd{font-weight:800}
.secure{display:flex; align-items:center; justify-content:center; gap:.4rem; font-size:.8rem; color:var(--ink-soft); margin-top:.7rem}
.secure svg{width:15px; height:15px; color:var(--leaf)}

.modal{position:fixed; inset:0; z-index:70; display:grid; place-items:center; padding:1rem; pointer-events:none; opacity:0; visibility:hidden; transition:opacity .2s, visibility 0s .2s}
.modal.open{opacity:1; pointer-events:auto; visibility:visible; transition:opacity .2s}
.modal .sheet{pointer-events:auto}
.sheet{position:relative; background:var(--surface); color:var(--ink); border-radius:20px; width:min(560px,100%); max-height:92vh; max-height:92dvh; overflow:auto; padding:1.75rem 1.6rem 1.5rem; box-shadow:0 30px 60px -20px rgba(0,0,0,.5); transform:translateY(16px); transition:transform .22s ease; overscroll-behavior:contain}
.modal.open .sheet{transform:none}
.sheet > .x{position:absolute; top:.9rem; right:.9rem; z-index:3}
.sheet h2{font-size:clamp(1.5rem,4.5vw,1.85rem); padding-right:3rem}
.sheet .sub{color:var(--ink-soft); font-size:.94rem; margin:.3rem 0 1.1rem}

/* quick view */
.qv-sheet{width:min(980px,100%); padding:0}
.qv-grid{display:grid; grid-template-columns:1fr 1fr}
.qv-media{padding:1.2rem; background:var(--surface-2); display:flex; flex-direction:column; gap:.8rem}
.qv-stage{position:relative; aspect-ratio:1; border-radius:16px; overflow:hidden; display:grid; place-items:center; container-type:inline-size;
  background:radial-gradient(90% 75% at 50% 36%, #FFFDF8 0%, color-mix(in srgb, var(--c) 9%, #F7EBD3) 70%, color-mix(in srgb, var(--c) 16%, #EFDDBD) 100%)}
.qv-stage::before{content:""; position:absolute; inset:0; background:var(--kolam) center/40%; opacity:.12}
.qv-pack{position:relative; width:54%}
.qv-stage.t-jar .qv-pack{width:58%}
.qv-stage.t-box .qv-pack{width:74%}
.qv-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.qv-thumbs{display:flex; gap:.6rem}
.qv-thumbs button{width:74px; height:74px; border-radius:12px; overflow:hidden; border:2px solid var(--line); background:var(--surface); padding:0; display:grid; place-items:center}
.qv-thumbs button[aria-pressed="true"]{border-color:var(--primary)}
.qv-thumbs img{width:100%; height:100%; object-fit:cover}
.qv-thumbs .mini{display:grid; place-items:center; width:100%; height:100%; container-type:inline-size; background:color-mix(in srgb, var(--c) 10%, #F7EBD3)}
.qv-thumbs .mini .pk{width:56%}
.qv-thumbs .mini.t-box .pk{width:80%}
.qv-info{padding:1.8rem 1.6rem 1.6rem; display:flex; flex-direction:column; gap:.7rem}
.qv-info .meta{display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; font-size:.78rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); padding-right:2.6rem}
.pill{background:var(--maroon); color:#FFF4DE; padding:.15rem .5rem; border-radius:5px; font-size:.68rem}
.qv-info h2{font-size:clamp(1.6rem,3vw,2.1rem); padding-right:0}
.qv-price{display:flex; align-items:baseline; gap:.6rem}
.qv-price b{font-size:1.7rem; font-weight:800}
.qv-price small{color:var(--ink-soft); font-weight:600}
.qv-desc{color:var(--ink-soft)}
.lbl{font-size:.78rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin-top:.2rem}
.sizes.big button{padding:.55rem .4rem; font-size:.92rem}
.stock{font-size:.88rem; font-weight:700; display:flex; align-items:center; gap:.35rem}
.stock svg{width:16px; height:16px}
.stock.in{color:var(--ok)} .stock.low{color:#A0741F} .stock.out{color:var(--bad)}
.qv-buy{display:flex; gap:.6rem; flex-wrap:wrap}
.qv-buy .btn{flex:1; min-width:180px}
.qv-acts{display:flex; gap:1.3rem; flex-wrap:wrap; font-size:.92rem}
.qv-acts .linkish{text-decoration:none}
.qv-acts [aria-pressed="true"]{color:var(--kumkum)}
.facts{margin:.4rem 0 0; border-top:1px solid var(--line)}
.facts div{display:grid; grid-template-columns:8.5rem 1fr; gap:.8rem; padding:.65rem 0; border-bottom:1px solid var(--line); font-size:.9rem}
.facts dt{font-weight:700} .facts dd{margin:0; color:var(--ink-soft)}
.facts .spice svg{width:17px; height:17px}
@media (max-width:760px){
  .modal{padding:0; align-items:end}
  .sheet{width:100%; border-radius:20px 20px 0 0; max-height:94vh; max-height:94dvh; padding-bottom:calc(1.5rem + env(safe-area-inset-bottom,0px))}
  .qv-sheet{padding-bottom:0}
  .qv-grid{grid-template-columns:1fr}
  .qv-media{padding:.8rem}
  .qv-stage{aspect-ratio:1.3}
  .qv-stage .qv-pack{width:40%}
  .qv-stage.t-jar .qv-pack{width:42%}
  .qv-stage.t-box .qv-pack{width:58%}
  .qv-thumbs button{width:60px; height:60px}
  .qv-info{padding:1.2rem 1.1rem calc(1.5rem + env(safe-area-inset-bottom,0px))}
  .facts div{grid-template-columns:7rem 1fr}
}

/* checkout */
.summary{background:var(--surface-2); border-radius:12px; padding:.85rem .95rem; margin-bottom:.6rem; font-size:.9rem}
.summary b{display:block; font-size:.85rem; margin-bottom:.35rem}
.summary ul{list-style:none; margin:0 0 .3rem; padding:0}
.summary li{display:flex; justify-content:space-between; gap:1rem; padding:.15rem 0}
.summary .linkish{font-size:.85rem}
.summary .s-hint{color:var(--ink-soft); font-size:.85rem; margin-top:.2rem}
.summary a{color:var(--primary); font-weight:700}
.fsec{font-size:.76rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--kicker); margin:1.1rem 0 .5rem}
.radios{display:grid; gap:.5rem}
.radios label{display:flex; gap:.7rem; align-items:flex-start; padding:.75rem .85rem; border:1.5px solid var(--line); border-radius:12px; cursor:pointer}
.radios label:has(input:checked){border-color:var(--primary); background:color-mix(in srgb, var(--primary) 5%, transparent)}
.radios label.off{opacity:.5; cursor:not-allowed}
.radios input{margin-top:.25rem; accent-color:var(--primary); width:18px; height:18px; flex:none}
.radios span{display:flex; flex-direction:column; line-height:1.3}
.radios b{font-size:.95rem}
.radios small{color:var(--ink-soft); font-size:.82rem}
.f{display:flex; flex-direction:column; gap:.3rem; margin-bottom:.85rem}
.f label{font-size:.88rem; font-weight:700}
.f label i{font-style:normal; font-weight:400; color:var(--ink-soft)}
.f input,.f textarea{font-size:16px; color:var(--ink); background:var(--bg); border:1.5px solid var(--line); border-radius:10px; padding:.72rem .85rem; width:100%; transition:border-color .2s, box-shadow .2s}
.f textarea{resize:vertical; min-height:4.4rem}
.f input:focus,.f textarea:focus{border-color:var(--primary); outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent)}
.f .err{color:var(--bad); font-size:.82rem; display:none}
.f.bad input,.f.bad textarea{border-color:var(--bad)}
.f.bad .err{display:block}
.two{display:grid; grid-template-columns:1fr 1fr; gap:.8rem}
.pin-note{font-size:.86rem; color:var(--ink-soft); margin:-.3rem 0 .4rem}
.pin-note.ok{color:var(--ok)} .pin-note.bad{color:var(--bad); font-weight:700}
.totals .sums{background:var(--surface-2); border-radius:12px; padding:.85rem .95rem; margin:.4rem 0 .8rem}
.agree{display:flex; gap:.55rem; align-items:flex-start; font-size:.88rem; color:var(--ink-soft)}
.agree input{accent-color:var(--primary); width:18px; height:18px; margin-top:.15rem}
.f-err{color:var(--bad); font-size:.88rem; font-weight:700; min-height:1.2em; margin:.5rem 0}
@media (max-width:420px){ .two{grid-template-columns:1fr} .sheet{padding:1.5rem 1.1rem 1.25rem} }
.btn-send{width:100%; padding:1.05rem 1.5rem; font-size:1.08rem}
.btn-send svg{width:24px; height:24px}
.sheet .fine{font-size:.84rem; color:var(--ink-soft); margin-top:.7rem; text-align:center}
.done{text-align:center; display:flex; flex-direction:column; gap:.9rem; align-items:center}
.done h2{padding:0}
.done p{color:var(--ink-soft)}
.done-ic{width:68px; height:68px; border-radius:50%; background:var(--leaf); color:#fff; display:grid; place-items:center; margin-top:.6rem}
.done-ic svg{width:34px; height:34px}
.pol-sheet{width:min(680px,100%)}
.pol-text{color:var(--ink-soft); margin-top:1rem}
.pol-text h3{font-size:1.1rem; color:var(--ink); margin:1.2rem 0 .3rem}
.pol-text p, .pol-text ul{margin:.5rem 0}
.pol-text li{margin:.35rem 0}
.pol-text .muted{font-size:.84rem; margin-top:1.4rem}

.toast{position:fixed; left:50%; bottom:calc(5.5rem + env(safe-area-inset-bottom,0px)); transform:translate(-50%,20px); background:var(--ink); color:var(--bg); padding:.7rem 1.1rem; border-radius:999px; font-weight:700; font-size:.9rem; z-index:75; opacity:0; transition:.25s; pointer-events:none; max-width:calc(100% - 2rem); text-align:center}
.toast.show{opacity:1; transform:translate(-50%,0)}

/* reveal on scroll */
.rv-in{opacity:0; translate:0 18px; transition:opacity .6s ease, translate .6s ease}
.rv-in.seen{opacity:1; translate:0 0}
.cartbar:not(.show){visibility:hidden; transition:transform .3s, visibility 0s .3s}
.seg button{white-space:nowrap}
@media (max-width:600px){
  .toolbar{display:grid; grid-template-columns:1fr; gap:.55rem}
  .seg{width:100%}
  .art{aspect-ratio:1/1.12}
  .art .pk{width:74%}
  .art.t-jar .pk{width:78%}
  .art.t-box .pk{width:88%}
  .real{width:24%; right:3%; bottom:3%}
}