:root{--pink:#e91e63;--pink-d:#b3124a;--ink:#2b1b2e;--muted:#6f5d73;--bg:#fff8fb;--card:#fff;--line:#f3dbe6;--ok:#1faa59;--r:20px;--sh:0 10px 30px rgba(233,30,99,.12)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:Poppins,system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6}
h1,h2,h3{font-family:Fraunces,Georgia,serif;line-height:1.15}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
.wrap{max-width:1140px;margin:0 auto;padding:0 20px}
header{position:sticky;top:0;z-index:50;background:rgba(255,248,251,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px;gap:16px}
.logo{display:flex;align-items:center;gap:10px;font-family:Fraunces,serif;font-weight:800;font-size:1.3rem;color:var(--pink)}
.logo img{height:54px;width:auto;filter:drop-shadow(0 2px 4px rgba(179,18,74,.25))}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
nav ul{display:flex;gap:6px;list-style:none}
nav a{padding:8px 14px;border-radius:99px;font-weight:500;font-size:.95rem;color:var(--muted);transition:.2s}
nav a:hover,nav a.on{background:#fde3ee;color:var(--pink-d)}
.cartbtn{position:relative;background:var(--pink);color:#fff;border:0;border-radius:99px;padding:10px 18px;font-weight:600;cursor:pointer;box-shadow:var(--sh);transition:.2s}
.cartbtn:hover{background:var(--pink-d);transform:translateY(-1px)}
.badge{position:absolute;top:-6px;right:-6px;background:var(--ink);color:#fff;min-width:22px;height:22px;border-radius:99px;font-size:.75rem;display:grid;place-items:center;padding:0 5px}
.burger{display:none;background:none;border:0;font-size:1.6rem;cursor:pointer}
.btn{display:inline-block;border:0;cursor:pointer;background:var(--pink);color:#fff;padding:13px 26px;border-radius:99px;font-weight:600;transition:.2s;box-shadow:var(--sh)}
.btn:hover{background:var(--pink-d);transform:translateY(-2px)}
.btn.alt{background:#fff;color:var(--pink-d);border:2px solid var(--pink);box-shadow:none}
.btn.wa{background:#25d366}.btn.wa:hover{background:#1da851}
.btn.block{width:100%;text-align:center}
.page{animation:in .4s ease}
@keyframes in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hero{background:#0b2a7a}
.eyebrow{display:inline-block;background:#fde3ee;color:var(--pink-d);padding:4px 14px;border-radius:99px;font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px}
.hero h1{font-size:clamp(2.4rem,5vw,4rem);font-weight:800;margin-bottom:16px}
.hero h1 span{color:var(--pink)}
.hero p{color:var(--muted);font-size:1.08rem;max-width:520px;margin-bottom:26px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:-30px;position:relative;z-index:2}
.stat{background:var(--card);border-radius:var(--r);padding:20px;text-align:center;box-shadow:var(--sh)}
.stat b{display:block;font-family:Fraunces,serif;font-size:1.9rem;color:var(--pink)}
.stat small{color:var(--muted)}
section.s{padding:70px 0}
.head{text-align:center;max-width:640px;margin:0 auto 40px}
.head h2{font-size:clamp(1.8rem,3.5vw,2.6rem);margin-bottom:10px}
.head p{color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:24px}
.card{background:var(--card);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);border:1px solid var(--line);display:flex;flex-direction:column;transition:.25s}
.card:hover{transform:translateY(-6px)}
.pimg{aspect-ratio:1/1;display:grid;place-items:center;position:relative;overflow:hidden}
.pimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;padding:10px;z-index:1}
.pimg .emo{position:absolute;font-size:5rem;z-index:0}
.pbody{padding:18px;display:flex;flex-direction:column;gap:10px;flex:1}
.pbody h3{font-size:1.3rem}
.sku{font-size:.75rem;color:var(--muted);letter-spacing:.05em}
.pack{font-size:.85rem;color:var(--muted)}
.price{font-weight:600;color:var(--pink-d);font-size:.95rem}
.row{display:flex;gap:8px;align-items:center}
select{flex:1;padding:10px;border:1.5px solid var(--line);border-radius:12px;background:#fff}
.qty{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.qty button{width:34px;height:40px;border:0;background:#fdf0f5;cursor:pointer;font-size:1.1rem;color:var(--pink-d)}
.qty button:hover{background:#fbd5e5}
.qty input{width:44px;text-align:center;border:0;font-weight:600;outline:0;-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none}
.pbody .btn{margin-top:auto;padding:11px;text-align:center}
.split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.split p{color:var(--muted);margin-bottom:14px}
.pill3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.pill3 div{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--sh)}
.pill3 h3{color:var(--pink);margin-bottom:8px}
.pill3 p{color:var(--muted);font-size:.95rem}
.banner{background:linear-gradient(120deg,var(--pink),#ff7a9c);color:#fff;border-radius:28px;padding:44px;text-align:center}
.banner h2{margin-bottom:10px}.banner p{opacity:.92;margin-bottom:20px}
.banner .btn{background:#fff;color:var(--pink-d)}
.pagehead{background:linear-gradient(120deg,#ffe2ee,#fff3cf);padding:56px 0;text-align:center}
.pagehead h1{font-size:clamp(2rem,4.5vw,3.2rem)}
.pagehead p{color:var(--muted);max-width:600px;margin:10px auto 0}
.info{display:grid;grid-template-columns:1fr 1.2fr;gap:30px}
.box{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--sh)}
.box h3{margin-bottom:14px}
.box li{list-style:none;margin-bottom:12px;color:var(--muted)}
.box li b{display:block;color:var(--ink)}
label{display:block;font-size:.85rem;font-weight:600;margin:12px 0 4px}
input.f,textarea.f,select.f{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;background:#fff;outline:0;transition:.2s}
input.f:focus,textarea.f:focus,select.f:focus{border-color:var(--pink);box-shadow:0 0 0 3px #fbd5e5}
textarea.f{min-height:90px;resize:vertical}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
footer{background:var(--ink);color:#d9c9dd;padding:40px 0;margin-top:40px}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
footer a{margin-right:16px}footer a:hover{color:#fff}
.overlay{position:fixed;inset:0;background:rgba(43,27,46,.5);opacity:0;pointer-events:none;transition:.3s;z-index:90}
.overlay.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(440px,100%);background:#fff;z-index:100;transform:translateX(100%);transition:.35s;display:flex;flex-direction:column;box-shadow:-10px 0 40px rgba(0,0,0,.15)}
.drawer.on{transform:none}
.dh{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid var(--line)}
.dh button{background:none;border:0;font-size:1.6rem;cursor:pointer}
.db{flex:1;overflow:auto;padding:18px 22px}
.item{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px dashed var(--line)}
.item img,.item .th{width:54px;height:54px;border-radius:12px;object-fit:contain;background:#fff3f8;display:grid;place-items:center;font-size:1.6rem}
.item .in{flex:1;font-size:.9rem}.item .in small{color:var(--muted);display:block}
.item .x{background:none;border:0;color:#c33;cursor:pointer;font-size:1.1rem}
.sum{background:#fff3f8;border-radius:14px;padding:14px;margin:16px 0;font-size:.9rem}
.sum div{display:flex;justify-content:space-between}
.sum .t{font-weight:600;border-top:1px solid var(--line);margin-top:6px;padding-top:6px;color:var(--pink-d)}
.empty{text-align:center;color:var(--muted);padding:50px 10px}
.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,120px);background:var(--ink);color:#fff;padding:12px 22px;border-radius:99px;z-index:120;transition:.35s;font-size:.9rem}
.toast.on{transform:translate(-50%,0)}
.wafloat{position:fixed;left:18px;bottom:18px;background:#25d366;color:#fff;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:1.7rem;z-index:60;box-shadow:0 8px 20px rgba(37,211,102,.4)}
.done{text-align:center;padding:30px 10px}.done h3{color:var(--ok);margin:10px 0}
@media(max-width:860px){
.split,.info{grid-template-columns:1fr}
.stats{grid-template-columns:repeat(2,1fr)}
.burger{display:block}
nav{position:absolute;top:70px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);display:none;padding:10px 20px}
nav.on{display:block}nav ul{flex-direction:column}
.two{grid-template-columns:1fr}
}

.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px;width:100%}
.fgrid h4{color:#fff;margin-bottom:10px;font-family:Fraunces,serif}
.fgrid a{display:block;margin:0 0 6px}
.copy{width:100%;border-top:1px solid #4a3a4e;padding-top:16px;font-size:.85rem}
.nf{text-align:center;padding:100px 20px}.nf h1{font-size:5rem;color:var(--pink)}
@media(max-width:860px){.fgrid{grid-template-columns:1fr}}

/* ---- hero fruit & juice splash ---- */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero .wrap{position:relative;z-index:2}
#splash{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.blobs{position:absolute;inset:0;z-index:0;pointer-events:none}
.blobs i{position:absolute;border-radius:50%;filter:blur(40px);opacity:.5;animation:drift 12s ease-in-out infinite alternate}
.blobs i:nth-child(1){width:340px;height:340px;right:6%;top:-40px;background:#ff8fb1}
.blobs i:nth-child(2){width:300px;height:300px;right:26%;bottom:-90px;background:#ffd25e;animation-delay:-4s}
.blobs i:nth-child(3){width:240px;height:240px;right:-40px;bottom:10%;background:#b48af0;animation-delay:-8s}
@keyframes drift{to{transform:translate(-40px,30px) scale(1.15)}}
@media(prefers-reduced-motion:reduce){.blobs i{animation:none}}

/* ---- full-bleed poster banner ---- */
.hero{padding:0;min-height:clamp(620px,92vh,860px);display:flex;align-items:flex-end;background:#0b2a7a}
.hero .wrap{width:100%}
.herobg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;z-index:0;transform-origin:65% 30%;animation:kenburns 24s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.08) translate(-1%,-.8%)}}
.shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(0deg,rgba(6,18,70,.94) 0%,rgba(8,26,96,.8) 26%,rgba(8,26,96,.32) 48%,rgba(8,26,96,0) 66%),linear-gradient(90deg,rgba(6,18,70,.55) 0%,rgba(6,18,70,.18) 38%,transparent 60%)}
.hero .blobs{z-index:2;mix-blend-mode:screen}
.hero .blobs i{opacity:.32}
.sparkles{position:absolute;inset:0;z-index:2;pointer-events:none}
.sparkles b{position:absolute;left:var(--x);top:var(--y);width:calc(16px*var(--s));height:calc(16px*var(--s));background:#fff;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);filter:drop-shadow(0 0 6px #fff);opacity:0;animation:twinkle 3.6s ease-in-out infinite;animation-delay:var(--d)}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.3) rotate(0)}50%{opacity:.95;transform:scale(1) rotate(45deg)}}
.shine{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.shine::before{content:"";position:absolute;top:-20%;bottom:-20%;left:-30%;width:22%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-20deg);animation:sweep 8s ease-in-out 1.5s infinite}
@keyframes sweep{0%{left:-30%}35%,100%{left:130%}}
#splash{z-index:3}
.hero .wrap{z-index:4}
.herotxt{max-width:540px;padding:0 0 84px}
.herotxt>*{opacity:0;animation:rise .85s cubic-bezier(.2,.7,.2,1) forwards}
.herotxt>:nth-child(2){animation-delay:.12s}.herotxt>:nth-child(3){animation-delay:.26s}.herotxt>:nth-child(4){animation-delay:.4s}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.hero .eyebrow{background:#ffd23f;color:#14237a;box-shadow:0 6px 18px rgba(255,210,63,.35)}
.hero h1{font-size:clamp(2.3rem,4.4vw,3.6rem);color:#fff;text-shadow:0 3px 0 rgba(8,20,80,.55),0 10px 30px rgba(4,12,60,.65)}
.hero h1 span{display:block;background:linear-gradient(90deg,#ffe36b,#ffb02e 55%,#ff8fc0);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 4px 10px rgba(4,12,60,.55))}
.hero p{color:rgba(255,255,255,.95);text-shadow:0 2px 12px rgba(4,12,60,.7)}
.hero .btn{background:linear-gradient(135deg,#ff4d94,#e91e63);box-shadow:0 10px 26px rgba(233,30,99,.45)}
.hero .btn:hover{background:linear-gradient(135deg,#ff6aa5,#f0287a)}
.hero .btn.alt{background:rgba(255,255,255,.14);color:#fff;border:2px solid rgba(255,255,255,.85);box-shadow:none;backdrop-filter:blur(6px)}
.hero .btn.alt:hover{background:#fff;color:var(--pink-d)}
@media(min-width:861px){
.hero{aspect-ratio:1600/639;min-height:520px;max-height:820px;align-items:flex-end}
.herobg{object-position:50% 40%}
.shade{background:linear-gradient(0deg,rgba(6,18,70,.94) 0%,rgba(8,26,96,.78) 20%,rgba(8,26,96,.28) 38%,rgba(8,26,96,0) 54%)}
.herotxt{max-width:none;display:grid;grid-template-columns:1fr auto;column-gap:32px;align-items:end;padding:0 0 64px}
.herotxt .eyebrow{justify-self:start;margin-bottom:10px}
.hero h1{font-size:clamp(2rem,3.5vw,3.1rem);margin-bottom:8px}
.hero h1 span{display:inline}
.hero p{max-width:640px;margin-bottom:0;font-size:1rem}
.herotxt .cta{grid-column:2;grid-row:1/span 3;align-self:end}
}
@media(max-width:860px){
/* mobile hero: portrait poster on top, copy + buttons on a blue panel below (nothing covers the faces or products) */
.hero{display:block;min-height:0;aspect-ratio:auto;max-height:none;background:linear-gradient(180deg,#0b2a7a,#081a60)}
.heropic{display:block;position:relative;z-index:0}
.herobg{position:static;inset:auto;display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;object-position:50% 0;animation:none;transform:none}
.shade,.blobs{display:none}
#splash{display:block}
.sparkles,.shine{inset:0 0 auto 0;height:auto;aspect-ratio:2/3}
.hero .wrap{position:relative;z-index:4;margin-top:-30px;padding:30px max(20px,env(safe-area-inset-right)) 62px max(20px,env(safe-area-inset-left));border-radius:28px 28px 0 0;background:linear-gradient(180deg,#0b2a7a,#081a60);box-shadow:0 -14px 30px rgba(8,26,96,.45)}
.herotxt{padding:0;max-width:100%;text-align:center}
.hero .eyebrow{margin-bottom:12px}
.hero h1{font-size:clamp(1.9rem,8.4vw,2.7rem);margin-bottom:10px}
.hero h1 span{display:block}
.hero p{font-size:.95rem;line-height:1.55;margin:0 auto 20px;max-width:460px}
.hero .cta{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:460px;margin:0 auto}
.hero .cta .btn{padding:12px 10px;font-size:.9rem;text-align:center;width:100%}
.hero .cta .btn:first-child{grid-column:1/-1;padding:14px;font-size:1rem}
}
@media(min-width:600px) and (max-width:860px){
/* tablets: keep the poster at a sensible height instead of a huge full-width portrait */
.herobg{width:min(100%,560px);margin:0 auto;aspect-ratio:2/3}
.hero{background:#081a60}
.sparkles,.shine{left:50%;right:auto;width:min(100%,560px);transform:translateX(-50%)}
.hero .wrap{max-width:none}
}
@media(prefers-reduced-motion:reduce){.herobg,.sparkles b,.shine::before{animation:none}.herotxt>*{opacity:1;animation:none}}

/* ---- products: sections, prices, complete (uncropped) images on every screen ---- */
.card{min-width:0}
.pimg .emo{z-index:0}.ok .emo{display:none}
.ptag{position:absolute;top:10px;left:10px;z-index:2;background:var(--pink);color:#fff;font-size:.75rem;font-weight:600;padding:3px 10px;border-radius:99px;box-shadow:0 4px 10px rgba(233,30,99,.3)}
.pl{display:flex;justify-content:space-between;gap:8px;font-size:.86rem;color:var(--muted);border-bottom:1px dashed var(--line);padding-bottom:4px}
.pl b{color:var(--pink-d);white-space:nowrap}
.pbody select{width:100%;min-width:0;flex:none;font-size:.9rem}
.row2{display:flex;gap:8px;align-items:stretch;margin-top:auto}
.row2 .btn{flex:1;margin:0;padding:10px 8px;min-width:0;font-size:.9rem}
.chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.chips a{background:#fff;border:1.5px solid var(--line);padding:7px 16px;border-radius:99px;font-size:.88rem;font-weight:500;color:var(--pink-d);transition:.2s}
.chips a:hover{background:var(--pink);color:#fff;border-color:var(--pink)}
.cathead{margin:44px 0 20px;scroll-margin-top:90px}
.cathead h2{font-size:clamp(1.5rem,3vw,2.1rem)}
.cathead h2::after{content:"";display:block;width:56px;height:4px;border-radius:9px;margin-top:6px;background:linear-gradient(90deg,var(--pink),#ffb02e)}
.cathead p{color:var(--muted);margin-top:6px}
.item .th{position:relative;overflow:hidden;flex:none}
.item .th img{position:absolute;inset:0;width:100%;height:100%;padding:3px;border-radius:0;background:none}
.item .th .emo{font-size:1.5rem}
@media(max-width:520px){.grid{gap:18px}.pimg img{padding:8px}}

/* ---- floating RANI candy pieces page background ---- */
.bgfx{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  background:
   radial-gradient(60% 45% at 8% 6%,rgba(255,122,162,.16),transparent 70%),
   radial-gradient(55% 45% at 95% 30%,rgba(255,210,94,.18),transparent 70%),
   radial-gradient(60% 50% at 20% 96%,rgba(180,138,240,.14),transparent 70%),
   radial-gradient(50% 40% at 80% 90%,rgba(255,177,92,.14),transparent 70%)}
.cd{position:absolute;will-change:translate}
.cd img{display:block;width:100%;height:auto;user-select:none;
  filter:blur(var(--bl,0px)) drop-shadow(0 10px 14px rgba(43,27,46,.22));
  animation:cdf var(--dur,9s) ease-in-out var(--dl,0s) infinite}
@keyframes cdf{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-16px) rotate(4deg)}}
.tw{position:absolute;width:calc(14px*var(--s,1));height:calc(14px*var(--s,1));background:#ffc933;opacity:0;
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);
  animation:twk 6s ease-in-out var(--d,0s) infinite}
@keyframes twk{0%,100%{opacity:0;transform:scale(.4) rotate(0)}50%{opacity:.7;transform:scale(1) rotate(45deg)}}
@media(max-width:700px){.cd img{filter:blur(var(--bl,0px)) drop-shadow(0 6px 8px rgba(43,27,46,.2))}}
@media(prefers-reduced-motion:reduce){.cd img,.tw{animation:none}.tw{display:none}}

.faq{display:grid;gap:12px;max-width:860px}
.fq{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh);overflow:hidden}
.fq summary{cursor:pointer;list-style:none;padding:16px 52px 16px 20px;font-weight:600;position:relative}
.fq summary::-webkit-details-marker{display:none}
.fq summary::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;background:#fde3ee;color:var(--pink-d);display:grid;place-items:center;font-size:1.2rem;line-height:1}
.fq[open] summary::after{content:"\2212";background:var(--pink);color:#fff}
.fq[open] summary{color:var(--pink-d)}
.fq p{padding:0 20px 18px;color:var(--muted)}
.ptab{width:100%;min-width:560px;border-collapse:collapse;background:var(--card);border-radius:16px;overflow:hidden;box-shadow:var(--sh);font-size:.92rem}
.ptab th{background:var(--pink);color:#fff;padding:12px 10px;text-align:center;font-weight:600}
.ptab th:first-child,.ptab td.n{text-align:left;padding-left:16px}
.ptab td{padding:11px 10px;text-align:center;border-bottom:1px solid var(--line)}
.ptab td.n{font-weight:600}
.ptab tr:last-child td{border-bottom:0}

/* attention blinkers on "go to Order" buttons */
.btn.blink{--ring:rgba(233,30,99,.55);position:relative;animation:bl-ring 1.7s ease-out infinite,bl-pop 1.7s ease-in-out infinite}
.btn.blink::after{content:"\2192";display:inline-block;margin-left:10px;animation:bl-arrow 1.1s ease-in-out infinite}
.btn.blink.hero-blink{--ring:rgba(255,210,63,.7)}
.btn.blink:hover,.btn.blink:focus-visible{animation-play-state:paused}
@keyframes bl-ring{0%{box-shadow:0 0 0 0 var(--ring),var(--sh)}70%{box-shadow:0 0 0 16px rgba(255,255,255,0),var(--sh)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0),var(--sh)}}
@keyframes bl-pop{0%,100%{filter:brightness(1)}50%{filter:brightness(1.12)}}
@keyframes bl-arrow{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
@media (prefers-reduced-motion:reduce){.btn.blink,.btn.blink::after{animation:none}}

/* ---- thumbnails (multi-photo products), enquiry cards, wholesale pages ---- */
.thumbs{display:flex;gap:6px;padding:8px 12px 0;flex-wrap:wrap}
.thumbs button{width:46px;height:46px;border:2px solid var(--line);border-radius:10px;background:#fff;padding:2px;cursor:pointer;overflow:hidden;transition:.15s}
.thumbs button img{width:100%;height:100%;object-fit:cover;border-radius:7px;display:block}
.thumbs button.on,.thumbs button:hover{border-color:var(--pink)}
.tnote{font-size:.85rem;color:var(--muted);line-height:1.45}
body[data-page="wholesale"] .cartbtn{display:none}
.wnote{background:linear-gradient(135deg,#fff3cf,#ffe2ee);border:1.5px solid var(--line);border-radius:var(--r);padding:16px 20px;display:flex;gap:12px;align-items:flex-start;margin-bottom:22px}
.wnote b{color:var(--pink-d)}
.locbox{max-width:620px;margin:0 auto}
.locbox label,.wbox label{display:block;font-weight:600;font-size:.9rem;margin:14px 0 6px}
.locbox .btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.wbox{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--sh)}
.wlocpill{display:inline-block;background:#fdf0f5;border:1.5px solid var(--pink);color:var(--pink-d);border-radius:99px;padding:6px 16px;font-weight:600;margin-top:4px}
.wlist{display:grid;gap:12px}
.wrow{display:grid;grid-template-columns:72px 1fr 92px 92px;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:16px;padding:10px 14px}
.wth{width:72px;height:72px;border-radius:12px;position:relative;overflow:hidden}
.wth img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:4px}
.wi b{display:block;font-size:.98rem}.wi small{display:block;color:var(--muted);font-size:.8rem;margin-top:2px}
.wprice{display:inline-block;margin-top:6px;font-size:.75rem;font-weight:600;color:var(--pink-d);background:#fdf0f5;padding:2px 10px;border-radius:99px}
.wq span{display:block;font-size:.72rem;color:var(--muted);margin-bottom:3px;text-align:center}
.wq input{width:100%;padding:9px 6px;text-align:center;border:1.5px solid var(--line);border-radius:10px;font-weight:600}
.wq input:focus{outline:0;border-color:var(--pink);box-shadow:0 0 0 3px #fbd5e5}
.wbar{position:sticky;bottom:0;background:rgba(255,248,251,.96);border-top:1px solid var(--line);padding:12px 0;margin-top:24px;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;z-index:5}
@media(max-width:640px){.wrow{grid-template-columns:60px 1fr 1fr;}.wth{width:60px;height:60px}.wi{grid-column:2 / 4}.wth{grid-row:1 / 3}}
body[data-page="wholesale"] .wafloat{display:none}

/* ---- international phone field ---- */
.phone{position:relative}
.phone-row{display:flex;gap:8px;align-items:stretch}
.phone .pc{display:flex;align-items:center;gap:6px;flex:0 0 auto;padding:0 12px;border:1.5px solid var(--line);border-radius:12px;background:#fff;font:inherit;font-weight:600;color:var(--ink);cursor:pointer;transition:.2s;white-space:nowrap}
.phone .pc:hover,.phone .pc[aria-expanded="true"]{border-color:var(--pink);box-shadow:0 0 0 3px #fbd5e5}
.phone .pf-flag{font-size:1.15rem;line-height:1}
.phone .pf-caret{font-size:.7rem;color:var(--muted)}
.phone .pn{flex:1;min-width:0}
.phone .pn.bad{border-color:#d93025;box-shadow:0 0 0 3px #fde0dd}
.phone.ok .pn{border-color:var(--ok)}
.phone-err{color:#d93025;font-size:.8rem;margin-top:6px;line-height:1.35}
.phone .pcl{position:absolute;left:0;top:calc(100% + 6px);z-index:60;width:min(340px,calc(100vw - 40px));background:#fff;border:1.5px solid var(--line);border-radius:14px;box-shadow:var(--sh);padding:8px}
.phone.up .pcl{top:auto;bottom:calc(100% + 6px)}
.phone .pcl[hidden]{display:none}
.phone .pcs{margin-bottom:6px;padding:9px 12px}
.phone .pcl ul{list-style:none;max-height:240px;overflow-y:auto;margin:0;padding:0}
.phone .pcl li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;cursor:pointer;font-size:.92rem}
.phone .pcl li:hover,.phone .pcl li.act{background:#fde3ee}
.phone .pcl li.sel{font-weight:700;color:var(--pink-d)}
.phone .pcl li.none{color:var(--muted);cursor:default}
.phone .lf{font-size:1.15rem;width:1.5em;text-align:center}
.phone .ln{flex:1}
.phone .ld{color:var(--muted);font-variant-numeric:tabular-nums}

/* =====================================================================
   MOBILE RESPONSIVE LAYER (phones & small tablets)
   ===================================================================== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:hidden}
img,svg,video{max-width:100%}
@media(max-width:860px){
header{padding-top:env(safe-area-inset-top)}
.nav{height:64px;gap:10px}
.logo img{height:46px}
.burger{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;color:var(--ink)}
.cartbtn{padding:10px 16px;min-height:44px}
nav{top:calc(64px + env(safe-area-inset-top));max-height:calc(100dvh - 64px);overflow:auto;box-shadow:0 16px 30px rgba(43,27,46,.12)}
nav a{display:block;padding:13px 16px;font-size:1rem}
section.s{padding:48px 0}
.head{margin-bottom:28px}
.pagehead{padding:38px 0}
.banner{padding:32px 20px;border-radius:22px}
.box{padding:20px}
.wbox{padding:18px}
.stats{gap:12px;margin-top:-26px}
.stat{padding:16px 10px}.stat b{font-size:1.6rem}.stat small{font-size:.82rem;line-height:1.3;display:block}
.pill3 div{padding:22px}
footer{padding:32px 0 calc(32px + env(safe-area-inset-bottom))}
.fgrid{gap:22px}
.wafloat{left:14px;bottom:calc(14px + env(safe-area-inset-bottom));width:50px;height:50px;font-size:1.5rem}
.toast{bottom:calc(20px + env(safe-area-inset-bottom));max-width:calc(100vw - 32px);text-align:center;border-radius:18px}
.wrap{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}
/* keep every form control >=16px so iPhones don't zoom the page on focus */
input.f,textarea.f,select.f,.pbody select,.qty input,.wq input,select,.phone .pcs{font-size:16px}
.chips{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;margin:0 -18px;padding:8px 18px 12px;scrollbar-width:none;position:sticky;top:calc(64px + env(safe-area-inset-top));z-index:20;background:linear-gradient(180deg,var(--bg) 78%,rgba(255,248,251,0))}
.chips::-webkit-scrollbar{display:none}
.chips a{flex:0 0 auto;scroll-snap-align:start;padding:9px 16px;white-space:nowrap}
.cathead{margin:34px 0 16px;scroll-margin-top:130px}
.wbar{flex-direction:column;align-items:stretch;text-align:center;padding:12px 0 calc(12px + env(safe-area-inset-bottom))}
.wbar .btn{width:100%;text-align:center}
.ptab{min-width:520px}
}
/* ---- drawer / cart: full-height sheet on phones ---- */
@media(max-width:560px){
.drawer{width:100%;height:100dvh;max-height:100dvh}
.dh{padding:14px 18px;padding-top:max(14px,env(safe-area-inset-top))}
.dh button{width:44px;height:44px}
.db{padding:14px 18px calc(24px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.item{gap:10px}
.item .th{width:48px;height:48px}
.item .qty button{width:32px;height:36px}.item .qty input{width:34px}
}
/* ---- phones: compact two-column product grid ---- */
@media(max-width:560px){
.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.card{border-radius:16px}
.card:hover{transform:none}
.pimg img{padding:6px}
.ptag{top:6px;left:6px;font-size:.66rem;padding:2px 8px}
.thumbs{padding:6px 8px 0;gap:4px}.thumbs button{width:34px;height:34px;border-radius:8px}
.pbody{padding:10px 10px 12px;gap:6px}
.pbody h3{font-size:1rem;line-height:1.2}
.sku{font-size:.62rem;letter-spacing:.03em}
.pl{flex-direction:column;gap:0;font-size:.72rem;line-height:1.35;padding-bottom:3px}
.pl b{font-size:.86rem}
.pbody select{padding:9px 6px}
.row2{flex-direction:column;gap:6px}
.qty{width:100%;justify-content:space-between}
.qty button{flex:0 0 42px;height:40px}
.qty input{flex:1;min-width:0;width:auto}
.row2 .btn{padding:11px 6px;font-size:.84rem;white-space:normal;line-height:1.25}
.tnote{font-size:.76rem}
.pbody .btn.wa{font-size:.84rem;padding:11px 6px}
.two{gap:0}
}
@media(max-width:360px){
.pbody{padding:8px 8px 10px}.pbody h3{font-size:.94rem}
.row2 .btn{font-size:.78rem}
.hero .cta .btn{font-size:.82rem}
.nav{gap:6px}.logo img{height:42px}.cartbtn{padding:9px 12px}
}
@media(hover:none){.card:hover,.btn:hover{transform:none}}
@media(max-width:860px){.wbar{gap:8px;padding-top:8px}.wbar b{font-size:.85rem}.wbar .btn{padding:11px 16px}}

/* ---- homepage button pair + "Customize for Your Event" CTA ---- */
.ctas{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:center;margin-top:30px}
.btn.cz{background:linear-gradient(135deg,#4b1a7a,#7a2fa0);color:#fff;box-shadow:0 10px 26px rgba(91,42,140,.35);position:relative}
.btn.cz:hover{background:linear-gradient(135deg,#5b2a8c,#8d3cb5)}
.btn.cz::before{content:"\1F389";margin-right:8px}
@media(max-width:560px){.ctas .btn{width:100%;text-align:center}}
/* seven nav items: tighten slightly on mid-size screens */
@media(min-width:861px) and (max-width:1120px){nav a{padding:8px 9px;font-size:.88rem}nav ul{gap:2px}.nav{gap:10px}}

/* =====================================================================
   TOP ANNOUNCEMENT BAR (customised orders & functions)
   ===================================================================== */
.announce{display:block;position:relative;z-index:55;background:linear-gradient(90deg,#4b1a7a,#e91e63 55%,#ff8a1f);color:#fff;font-size:.88rem;line-height:1.35;text-align:center;overflow:hidden}
.announce::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);transform:translateX(-100%);animation:annsweep 5s ease-in-out 1s infinite;pointer-events:none}
@keyframes annsweep{to{transform:translateX(100%)}}
.ann-in{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 10px;max-width:1140px;margin:0 auto;padding:9px max(16px,env(safe-area-inset-right)) 9px max(16px,env(safe-area-inset-left))}
.ann-txt b{font-weight:600}
.ann-go{background:#fff;color:var(--pink-d);font-weight:600;font-size:.76rem;padding:2px 12px;border-radius:99px;white-space:nowrap}
.announce:hover .ann-go{background:#ffd23f;color:#14237a}
@media(max-width:560px){.announce{font-size:.78rem}.ann-in{padding-top:8px;padding-bottom:8px;gap:3px 8px}.ann-ico{display:none}.ann-go{font-size:.72rem;padding:1px 10px}}
@media(prefers-reduced-motion:reduce){.announce::after{animation:none}}

/* ---- candy blast layer (phones & tablets) ---- */
.blastfx{position:fixed;inset:0;z-index:45;pointer-events:none;overflow:hidden}
.blastfx img{position:absolute;height:auto;max-width:none;filter:drop-shadow(0 6px 8px rgba(43,27,46,.3));will-change:transform,opacity;opacity:0}
.blastfx i{position:absolute;width:8px;height:8px;border-radius:50%;margin:-4px 0 0 -4px;will-change:transform,opacity}
.hero{width:100%;max-width:100%}

/* =====================================================================
   RESPONSIVE PADDING POLISH - one consistent spacing scale
   ===================================================================== */
:root{--gut:clamp(16px,4.6vw,28px);--sec:clamp(44px,8vw,70px)}
.wrap{padding-left:max(var(--gut),env(safe-area-inset-left));padding-right:max(var(--gut),env(safe-area-inset-right))}
section.s{padding-top:var(--sec);padding-bottom:var(--sec)}
section.s[style*="padding-top:0"]{padding-top:0!important}
.head{padding:0 2px;margin-bottom:clamp(24px,5vw,40px)}
.head p{font-size:clamp(.92rem,2.6vw,1rem)}
@media(max-width:860px){
.chips{margin-left:calc(-1*var(--gut));margin-right:calc(-1*var(--gut));padding-left:var(--gut);padding-right:var(--gut)}
.banner{padding:clamp(26px,7vw,40px) var(--gut)}
.banner h2{font-size:clamp(1.4rem,6vw,2rem)}
.pill3{gap:14px}
.pill3 div{padding:20px var(--gut)}
.stats{margin-top:0;padding-top:20px;padding-bottom:4px}
.hero .wrap{padding-left:max(var(--gut),env(safe-area-inset-left));padding-right:max(var(--gut),env(safe-area-inset-right));padding-bottom:44px}
.ctas{margin-top:24px;gap:10px}
.fgrid{gap:20px}
footer .wrap{padding-top:4px}
.copy{text-align:center}
.box,.wbox,.fbox{padding:clamp(16px,5vw,24px)}
.two{grid-template-columns:1fr}
form .row,.row.wrapm{flex-wrap:wrap}
h1,h2,h3,p,li,a,label{overflow-wrap:anywhere}
.ptab{min-width:520px}
}
/* tablets: 3 product cards across instead of 2 oversized ones */
@media(min-width:561px) and (max-width:860px){
.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pbody{padding:12px}
.pbody h3{font-size:1.05rem}
.pl{font-size:.78rem}
.row2 .btn{font-size:.82rem;padding:10px 6px}
.stats{grid-template-columns:repeat(4,1fr)}
.hero .cta{max-width:560px}
}
@media(min-width:861px) and (max-width:1024px){
.wrap{padding-left:24px;padding-right:24px}
.grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* very small phones */
@media(max-width:360px){
:root{--gut:14px}
.stats{gap:8px}.stat{padding:14px 6px}.stat b{font-size:1.4rem}
.hero .cta{grid-template-columns:1fr}
.hero .cta .btn:first-child{grid-column:auto}
.pbody{padding:8px}
.btn{padding:12px 18px}
}
/* announcement bar on phones: single tidy block */
@media(max-width:560px){
.ann-go{display:none}
.ann-txt::after{content:" \2192";font-weight:700}
.ann-in{padding:8px var(--gut)}
}
/* WhatsApp button must never hide text on the left edge of narrow screens */
@media(max-width:560px){body{padding-bottom:0}.wafloat{width:46px;height:46px;font-size:1.35rem;left:auto;right:12px}}
/* landscape phones: don't let the hero poster eat the whole screen */
@media(max-width:860px) and (orientation:landscape) and (max-height:520px){
.herobg{aspect-ratio:16/9!important;width:min(100%,720px)!important}
.sparkles,.shine{aspect-ratio:16/9!important}
}

/* ---- social icons ---- */
.social{display:flex;gap:10px;flex-wrap:wrap}
.fgrid .social a.soc{display:grid;place-items:center;width:42px;height:42px;margin:0;border-radius:50%;color:#fff;background:#4a3a4e;transition:transform .2s,background .2s,box-shadow .2s}
.soc svg{width:21px;height:21px}
.soc:hover,.soc:focus-visible{transform:translateY(-3px) scale(1.06)}
.fgrid .soc.fb:hover{background:#1877f2}
.fgrid .soc.ig:hover{background:linear-gradient(45deg,#feda75,#fa7e1e 30%,#d62976 60%,#962fbf 85%,#4f5bd5)}
.fgrid .soc.tt:hover{background:#000;box-shadow:2px 2px 0 #25f4ee,-2px -2px 0 #fe2c55}
.fgrid .fol{margin:16px 0 10px}
@media(max-width:860px){.fgrid .soc{width:46px;height:46px}}
@media(hover:none){.soc:hover{transform:none}}

/* ===== Rani Candy wholesale rate card (wholesale pages) ===== */
.qt{background:linear-gradient(180deg,#fff8fb 0%,#fff 100%)}
.qt .qthead{background:linear-gradient(135deg,#0b2a7a,#081a60);color:#fff;border-radius:28px;padding:34px 30px 70px;position:relative;overflow:hidden;box-shadow:var(--sh)}
.qt .qthead:before{content:"";position:absolute;right:-90px;top:-110px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(255,111,163,.55),rgba(196,92,240,.25) 60%,transparent 72%)}
.qt .qthead>*{position:relative}
.qt .qtgold{display:inline-block;background:#ffd23f;color:#14237a;padding:4px 14px;border-radius:99px;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.qt .qthead h2{font-size:clamp(1.9rem,4vw,2.9rem);margin:12px 0 8px}
.qt .qthead h2 em{font-style:normal;color:#ffc93a}
.qt .qthead p{color:#dfe6ff;max-width:560px}
.qt .qtdate{margin-top:10px;font-size:.88rem;color:#cdd8ff}
.qt .qtdate b{color:#fff}
.qt .qtchips{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:-44px 18px 0;position:relative;z-index:2}
.qt .qtchips div{background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px 8px;text-align:center;box-shadow:var(--sh)}
.qt .qtchips b{display:block;font-family:Fraunces,serif;font-size:1.6rem;color:var(--pink);line-height:1.1}
.qt .qtchips span{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;font-weight:600}
.qt .qttbl{width:100%;border-collapse:separate;border-spacing:0;margin-top:28px;background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--sh)}
.qt .qttbl th{background:linear-gradient(90deg,var(--pink-d),var(--pink));color:#fff;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;text-align:right;padding:15px 22px;font-weight:600}
.qt .qttbl th:first-child,.qt .qttbl td:first-child{text-align:left}
.qt .qttbl td{padding:18px 22px;text-align:right;border-top:1px solid var(--line);font-weight:600}
.qt .qttbl tbody tr:first-child td{border-top:0}
.qt .qttbl td:first-child{font-size:1rem}
.qt .qttbl .qn{font-family:Fraunces,serif;font-size:1.45rem;color:var(--ink)}
.qt .qttbl .dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:10px}
.qt .qttbl tr.best td{background:linear-gradient(90deg,#fff6d2,#fffbe8)}
.qt .qttbl tr.best .qn{color:var(--pink-d)}
.qt .qtbadge{display:inline-block;background:var(--ok);color:#fff;font-size:.68rem;font-weight:700;letter-spacing:.08em;padding:3px 10px;border-radius:99px;margin-left:10px;vertical-align:middle;text-transform:uppercase}
.qt .qttbl tbody tr{transition:.2s}.qt .qttbl tbody tr:hover td{background:#fff0f6}.qt .qttbl tr.best:hover td{background:#fff3c4}
.qt .qtearn{display:grid;grid-template-columns:1fr 1.15fr;gap:22px;margin-top:26px}
.qt .qtcard{background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px;box-shadow:var(--sh)}
.qt .qtcard h3{font-size:1.3rem;color:#0b2a7a;margin-bottom:6px;display:flex;align-items:center;gap:10px}
.qt .qtcard h3 span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#fde3ee;font-size:1rem}
.qt .qtcard>p{color:var(--muted);font-size:.9rem;margin-bottom:16px}
.qt .qtcalc{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.qt .qtcalc div{flex:1;text-align:center;border-radius:14px;padding:10px 4px;background:#f6f1ff;border:1px solid #e6dcf8}
.qt .qtcalc div b{display:block;font-family:Fraunces,serif;font-size:1.25rem;color:#0b2a7a;line-height:1.1}
.qt .qtcalc div span{font-size:.65rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600}
.qt .qtcalc div.g{background:#e8f8ef;border-color:#bfe9d0}.qt .qtcalc div.g b{color:#14803f}
.qt .qtcalc i{font-style:normal;font-weight:700;color:var(--pink);font-size:1.3rem}
.qt .qtmini,.qt .qtsup{width:100%;border-collapse:collapse;font-size:.92rem}
.qt .qtmini td{padding:9px 0;border-top:1px dashed var(--line)}
.qt .qtmini tr:first-child td{border-top:0}
.qt .qtmini td:last-child{text-align:right;font-weight:700}
.qt .qtmini .g,.qt .qtsup b{color:#14803f}
.qt .qtsup th{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);text-align:right;padding:0 0 8px;font-weight:600}
.qt .qtsup th:first-child,.qt .qtsup td:first-child{text-align:left}
.qt .qtsup td{padding:12px 0;border-top:1px dashed var(--line);text-align:right}
.qt .qtsup td:first-child{font-weight:600}
.qt .qtsup td:first-child small{display:block;font-weight:400;font-size:.75rem;color:var(--muted)}
.qt .qtsup tr.hl td{background:#fffbe8}
.qt .qtfl{display:grid;grid-template-columns:repeat(7,1fr);gap:12px;margin-top:14px}
.qt .qtfl div{background:#fff;border:1px solid var(--line);border-radius:18px;text-align:center;padding:10px 6px 12px;box-shadow:0 6px 16px rgba(233,30,99,.08);transition:.25s}
.qt .qtfl div:hover{transform:translateY(-5px)}
.qt .qtfl img{width:100%;height:84px;object-fit:contain;margin:0 auto 6px}
.qt .qtfl span{font-size:.8rem;font-weight:600;line-height:1.2;display:block}
.qt .qtsub{font-family:Fraunces,serif;font-weight:800;font-size:1.3rem;color:var(--pink);margin-top:30px}
.qt .qtorder{margin-top:26px;background:#fff7d8;border:1px solid #f4dc7a;border-radius:20px;padding:18px 22px;color:#5b4a14;font-size:.95rem}
.qt .qtorder b{color:#3d2f05}
.qt .qtnote{text-align:center;font-size:.8rem;color:var(--muted);font-style:italic;margin-top:12px}
.qt .qtcta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:22px}
@media(max-width:860px){
 .qt .qtearn{grid-template-columns:1fr}
 .qt .qtfl{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:640px){
 .qt .qthead{padding:26px 20px 64px;border-radius:22px}
 .qt .qtchips{grid-template-columns:repeat(2,1fr);margin:-40px 10px 0;gap:10px}
 .qt .qttbl thead{display:none}
 .qt .qttbl,.qt .qttbl tbody,.qt .qttbl tr,.qt .qttbl td{display:block;width:100%}
 .qt .qttbl{background:none;border:0;box-shadow:none;border-radius:0;overflow:visible}
 .qt .qttbl tr{background:#fff;border:1px solid var(--line);border-radius:20px;margin-bottom:14px;box-shadow:var(--sh);overflow:hidden}
 .qt .qttbl td{border-top:0;padding:10px 18px;text-align:left!important;display:flex;justify-content:space-between;align-items:center;gap:10px}
 .qt .qttbl td:first-child{background:#fdf0f5;font-size:.95rem;flex-wrap:wrap}
 .qt .qttbl td[data-l]:before{content:attr(data-l);font-family:Poppins,system-ui,sans-serif;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600}
 .qt .qttbl tr.best td:first-child{background:#fff3c4}.qt .qttbl tr.best td{background:#fffbe8}
 .qt .qtfl{grid-template-columns:repeat(3,1fr)}
 .qt .qtfl img{height:70px}
 .qt .qtcalc{flex-wrap:wrap}
}

/* wholesale order: live estimate */
.wlinetot{display:inline-block;margin:6px 0 0 6px;font-size:.75rem;font-weight:700;color:#14803f;background:#e8f8ef;padding:2px 10px;border-radius:99px}
.west{margin-top:22px;background:linear-gradient(135deg,#fffbe8,#fff0f6);border:1.5px solid #f4dc7a;border-radius:var(--r);padding:18px 22px;box-shadow:var(--sh)}
.west>b{display:block;font-family:Fraunces,serif;font-size:1.15rem;color:var(--pink-d);margin-bottom:8px}
.west-rows>div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px dashed #ecd9a0;font-size:.92rem}
.west-rows>div:first-child{border-top:0}
.west-rows b{white-space:nowrap}
.west-rows .west-total{border-top:2px solid var(--pink);margin-top:6px;padding-top:10px;font-size:1.05rem;font-weight:700}
.west-rows .west-total b{color:#14803f;font-size:1.25rem}
.west small{display:block;margin-top:10px;color:var(--muted);font-size:.78rem;line-height:1.5}
.west-done{margin:10px 0;font-weight:700;color:#14803f;background:#e8f8ef;border-radius:14px;padding:10px 14px}
@media(max-width:640px){.west{padding:14px 16px}.west-rows>div{flex-direction:column;gap:2px}}
.wlinetot[hidden]{display:none}