/* ===== Shil Pata Ghar — global stylesheet (all colors/fonts come from admin theme) ===== */
:root{
  --brand:#8C1D18;--brand-d:#6E1512;--brand-05:#fdf6f5;--brand-10:#f7e8e7;--brand-20:#efd1cf;
  --acc:#C9A227;--acc-10:#faf4e4;--ink:#171310;--ink-70:#4a443e;--mut:#6b625b;
  --bg-soft:#FBF7F1;--bg-tint:#F4EDE2;--line:#E7DCCB;--ok:#2F7A44;
  --rad:14px;--cw:1200px;--ov:.45;
  --ff:'Hind Siliguri',system-ui,sans-serif;--fh:'Baloo Da 2',var(--ff);
  --sh:0 1px 2px rgba(31,27,23,.04),0 8px 26px rgba(31,27,23,.07);
  --shl:0 20px 55px rgba(31,27,23,.14);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:#fff;color:var(--ink);font-family:var(--ff);line-height:1.85;font-size:17px;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;opacity:0;transition:opacity .18s}
body.ready{opacity:1}
@media(prefers-reduced-motion:reduce){body{opacity:1}}
noscript ~ *{opacity:1}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5{font-family:var(--fh);line-height:1.42;font-weight:700;letter-spacing:-.2px;overflow-wrap:break-word}
p{line-height:1.85}
.wrap{max-width:var(--cw);margin:0 auto;padding:0 20px}
.ic{flex-shrink:0;vertical-align:middle}
::selection{background:var(--brand-20)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 26px;border-radius:9px;font-weight:600;font-size:15px;cursor:pointer;border:1.5px solid transparent;transition:.18s;font-family:inherit;line-height:1.2}
.btn-p{background:var(--brand);color:#fff}
.btn-p:hover{background:var(--brand-d);transform:translateY(-1px);box-shadow:0 8px 22px rgba(0,0,0,.16)}
.btn-a{background:var(--acc);color:#231d08}
.btn-a:hover{filter:brightness(.94);transform:translateY(-1px)}
.btn-o{background:#fff;border-color:var(--line);color:var(--ink)}
.btn-o:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-05)}
.btn-w{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.5);color:#fff;backdrop-filter:blur(6px)}
.btn-w:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn-sm{padding:9px 16px;font-size:13.5px}
.btn.full{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important}
/* announce + header */
.announce{background:var(--brand);color:#fff;font-size:13.2px;padding:9px 0;text-align:center;font-weight:500}
header{position:sticky;top:0;z-index:70;background:#fff;border-bottom:1px solid var(--line);transition:box-shadow .2s}
/* NOTE: no backdrop-filter/transform/filter on header — they create a containing block
   that traps the position:fixed mobile drawer inside the header box. */
header.sticky{box-shadow:0 4px 20px rgba(31,27,23,.08)}
.nav{display:flex;align-items:center;gap:16px;height:78px}
.logo{display:flex;align-items:center;gap:12px}
.logo img{width:46px;height:46px;border-radius:10px;object-fit:cover}
.logo b{font-size:18px;display:block;line-height:1.25;font-family:var(--fh)}
.logo i{font-style:normal;font-size:9.5px;letter-spacing:2px;color:var(--mut);text-transform:uppercase;font-weight:600}
.menu{display:flex;gap:6px;margin-left:auto;align-items:center}
.menu>a,.drop>a{padding:9px 14px;border-radius:8px;font-size:15px;font-weight:500;color:var(--ink-70);display:inline-flex;align-items:center;gap:5px;transition:.16s}
.menu>a:hover,.drop>a:hover{background:var(--brand-05);color:var(--brand)}
.menu>a.on,.drop>a.on{color:var(--brand);background:var(--brand-10);font-weight:600}
.drop{position:relative}
.dmenu{position:absolute;top:calc(100% + 10px);left:0;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shl);padding:8px;width:290px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:.18s;z-index:80}
.drop:hover .dmenu{opacity:1;visibility:visible;transform:none}
.dmenu a{display:flex;gap:11px;align-items:center;padding:9px;border-radius:9px}
.dmenu a:hover{background:var(--bg-soft)}
.dmenu img{width:44px;height:44px;border-radius:8px;object-fit:cover;background:var(--bg-tint)}
.dmenu b{display:block;font-size:14.5px;font-weight:600}
.dmenu small{color:var(--mut);font-size:12.5px}
.hact{display:flex;gap:9px;align-items:center;margin-left:8px}
.callpill{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:100px;background:var(--brand-10);color:var(--brand);font-weight:700;font-size:14px}
.callpill:hover{background:var(--brand);color:#fff}
.icb{position:relative;width:44px;height:44px;border-radius:9px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;cursor:pointer;color:var(--ink);transition:.16s}
.icb:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-05)}
.icb i{position:absolute;top:-7px;right:-7px;background:var(--brand);color:#fff;font-size:11px;font-style:normal;min-width:21px;height:21px;border-radius:11px;display:grid;place-items:center;font-weight:700;border:2px solid #fff}
.burger{display:none}
/* hero slider */
.slider{position:relative;overflow:hidden;background:var(--bg-tint)}
.slides{display:flex;transition:transform .75s cubic-bezier(.5,0,.2,1)}
.slide{min-width:100%;position:relative;min-height:min(620px,78vh);display:flex;align-items:center}
.slide>img,.slide>picture{position:absolute;inset:0;width:100%;height:100%;display:block}
.slide>picture>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slide>img{object-fit:cover}
.slide:after{content:'';position:absolute;inset:0}
.slide.left:after{background:linear-gradient(90deg,rgba(20,16,13,calc(var(--ov) + .38)) 0%,rgba(20,16,13,var(--ov)) 42%,rgba(20,16,13,.06) 78%)}
/* light slides: pale photo, dark ink text, no dark scrim */
.slide.light:after{background:linear-gradient(90deg,rgba(255,252,247,.92) 0%,rgba(255,252,247,.72) 46%,rgba(255,252,247,0) 72%)}
.slide.light .sc{color:var(--ink)}
.slide.light .sc h1{color:var(--ink);text-shadow:none}
.slide.light .sc p{color:var(--ink-70);text-shadow:none}
.slide.light .sc .eyebrow{color:var(--brand)}
.slide.light .btn-w{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.slide.right:after{background:linear-gradient(270deg,rgba(20,16,13,calc(var(--ov) + .38)) 0%,rgba(20,16,13,var(--ov)) 42%,rgba(20,16,13,.06) 78%)}
.slide .wrap{position:relative;z-index:2;width:100%}
.sc{max-width:600px;color:#fff;padding:70px 0 96px}
.slide.right .sc{margin-left:auto;text-align:right}
.sc .eyebrow{color:var(--acc);font-size:11.5px;font-weight:700;letter-spacing:2.6px;text-transform:uppercase;margin-bottom:16px;display:block}
.sc h1{font-size:clamp(30px,4.6vw,55px);margin-bottom:18px;letter-spacing:-1px;color:#fff;text-shadow:0 2px 26px rgba(0,0,0,.4)}
.sc p{font-size:17px;color:rgba(255,255,255,.94);margin-bottom:30px;max-width:520px;text-shadow:0 1px 12px rgba(0,0,0,.35)}
.slide.right .sc p{margin-left:auto}
.sbtns{display:flex;gap:12px;flex-wrap:wrap}
.slide.right .sbtns{justify-content:flex-end}
.sarrow{position:absolute;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.92);border:1px solid rgba(0,0,0,.07);display:grid;place-items:center;cursor:pointer;z-index:6;transition:.18s;color:var(--ink);box-shadow:0 3px 14px rgba(0,0,0,.14)}
.sarrow:hover{background:#fff;transform:scale(1.07)}
/* bottom-right cluster so arrows never sit on top of the headline */
.slider>.sarrow{bottom:20px;top:auto;transform:none}
.slider>.sarrow.p{left:50%;right:auto;margin-left:-118px}
.slider>.sarrow.n{left:50%;right:auto;margin-left:72px}
.sdots{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);display:flex;gap:9px;z-index:7}
.sdots button{width:9px;height:9px;border-radius:50%;border:0;background:rgba(255,255,255,.5);cursor:pointer;transition:.25s;padding:0}
.sdots button.on{width:30px;border-radius:5px;background:var(--acc)}
/* trust bar */
.bar{background:#fff;border-bottom:1px solid var(--line)}
.bar .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:26px 20px}
.bi{display:flex;gap:13px;align-items:flex-start}
.bi .bic{width:44px;height:44px;border-radius:11px;background:var(--brand-10);display:grid;place-items:center;color:var(--brand);flex-shrink:0}
.bi b{display:block;font-size:14.5px;font-weight:600}
.bi small{color:var(--mut);font-size:13px;line-height:1.55}
/* sections */
section{padding:80px 0}
.sh{max-width:640px;margin-bottom:42px}
.sh.mid{margin-inline:auto;text-align:center}
.eyebrow{font-size:11.5px;font-weight:700;letter-spacing:2.6px;text-transform:uppercase;color:var(--brand);margin-bottom:12px;display:block}
.sh h2{font-size:clamp(26px,3.6vw,40px);margin-bottom:12px;letter-spacing:-.7px}
.sh p{color:var(--mut);font-size:16.5px}
.shead-row{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:36px;flex-wrap:wrap}
.shead-row .sh{margin-bottom:0}
/* category slider */
.crail{position:relative}
.ctrack{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 4px 14px;-ms-overflow-style:none;scrollbar-width:none}
.ctrack::-webkit-scrollbar{display:none}
.ccard{flex:0 0 calc((100% - 60px)/4);min-width:250px;scroll-snap-align:start;position:relative;border-radius:var(--rad);overflow:hidden;aspect-ratio:1/1.12;border:1px solid var(--line);background:var(--bg-tint);transition:.24s}
.ccard:hover{box-shadow:var(--shl);transform:translateY(-4px)}
.ccard img{width:100%;height:100%;object-fit:cover;transition:.55s}
.ccard:hover img{transform:scale(1.06)}
.ccard .cov{position:absolute;inset:0;background:linear-gradient(to top,rgba(24,19,15,.93) 2%,rgba(24,19,15,.42) 48%,rgba(24,19,15,.05) 78%)}
.ccard .ctx{position:absolute;left:0;right:0;bottom:0;padding:22px;color:#fff}
.ccard .ctx h3{font-size:20px;margin-bottom:5px;color:#fff}
.ccard .ctx p{font-size:13px;opacity:.85;line-height:1.5;margin-bottom:11px}
.ccard .ctx span{font-size:12.5px;font-weight:600;display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);padding:5px 12px;border-radius:100px;backdrop-filter:blur(4px)}
.ccard:hover .ctx span{background:var(--acc);border-color:var(--acc);color:#231d08}
.crail .sarrow{width:42px;height:42px;border:1px solid var(--line);box-shadow:var(--sh);top:50%;bottom:auto;transform:translateY(-50%)}
.crail .sarrow.p{left:-14px}.crail .sarrow.n{right:-14px}
/* product grid + card */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.grid.g3{grid-template-columns:repeat(3,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;display:flex;flex-direction:column;transition:.22s}
.card:hover{box-shadow:var(--shl);transform:translateY(-4px);border-color:var(--brand-20)}
.thumb{position:relative;aspect-ratio:1/1;background:var(--bg-tint);overflow:hidden;display:block}
.thumb img{width:100%;height:100%;object-fit:cover;transition:.5s}
.card:hover .thumb img{transform:scale(1.07)}
.tags{position:absolute;top:12px;left:12px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.tag{font-size:11px;font-weight:700;padding:5px 11px;border-radius:5px;color:#fff;letter-spacing:.3px}
.t-acc{background:var(--acc);color:#231d08}.t-br{background:var(--brand)}
.cbody{padding:18px;display:flex;flex-direction:column;flex:1;gap:8px}
.cbody h3{font-size:16px;font-weight:600;line-height:1.45}
.cbody a:hover h3{color:var(--brand)}
.cbody .ex{font-size:13.5px;color:var(--mut);flex:1;line-height:1.6}
.price{display:flex;align-items:baseline;gap:9px}
.price b{font-size:23px;font-weight:700;color:var(--brand);font-family:var(--fh)}
.price s{color:var(--mut);font-size:14.5px;font-weight:400}
.stk{font-size:12.5px;display:flex;align-items:center;gap:7px;color:var(--ok)}
.stk.low{color:#b07d1e}.stk.out{color:var(--mut)}
.stk i{width:7px;height:7px;border-radius:50%;background:currentColor;display:block}
/* value cards */
.vals{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--rad);overflow:hidden}
.val{background:#fff;padding:32px 26px}
.val .vic{width:48px;height:48px;border-radius:11px;background:var(--brand-10);display:grid;place-items:center;color:var(--brand);margin-bottom:16px}
.val h4{font-size:17.5px;margin-bottom:8px}
.val p{color:var(--mut);font-size:14.5px;line-height:1.65}
/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.stp{position:relative}
.stp .n{width:44px;height:44px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:700;font-size:17px;margin-bottom:16px;font-family:var(--fh)}
.stp:not(:last-child):after{content:'';position:absolute;top:22px;left:56px;right:-14px;height:1px;background:var(--line)}
.stp h4{font-size:17px;margin-bottom:6px}
.stp p{color:var(--mut);font-size:14.5px}
/* payments */
.pays{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pay{border:1px solid var(--line);border-radius:var(--rad);padding:26px;background:#fff;transition:.2s}
.pay:hover{box-shadow:var(--sh);border-color:var(--brand-20)}
.pb,.pay .lg span{font-weight:800;font-size:15px;padding:5px 13px;border-radius:6px;color:#fff;display:inline-block;font-family:var(--ff)}
.pay .lg span{font-size:19px;margin-bottom:14px}
.bk{background:#e2136e}.ng{background:#ee7623}.cd{background:var(--ink)}
.pay h4{font-size:16.5px;margin-bottom:6px}
.pay p{color:var(--mut);font-size:14px}
.pay code{display:inline-block;margin-top:10px;background:var(--bg-tint);border:1px dashed var(--line);padding:7px 15px;border-radius:6px;font-size:15px;font-weight:700;color:var(--ink);font-family:ui-monospace,monospace}
/* reviews */
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.rev{background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:28px;display:flex;flex-direction:column}
.rev .q{color:var(--brand-20);margin-bottom:-10px}
.rev .rs{display:flex;gap:2px;color:var(--acc);margin-bottom:12px}
.rev p{font-size:15px;color:var(--ink-70);flex:1;margin-bottom:18px;line-height:1.7}
.who{display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--line)}
.av{width:44px;height:44px;border-radius:50%;background:var(--brand-10);display:grid;place-items:center;font-weight:700;color:var(--brand);font-size:17px;font-family:var(--fh)}
.who b{font-size:14.5px;display:block}.who small{color:var(--mut);font-size:12.5px}
/* faq */
.faqlist{max-width:840px;margin:0 auto;border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{padding:22px 46px 22px 0;font-weight:600;cursor:pointer;list-style:none;position:relative;font-size:16.5px;font-family:var(--fh)}
summary::-webkit-details-marker{display:none}
summary:after{content:'';position:absolute;right:10px;top:29px;width:10px;height:10px;border-right:2px solid var(--brand);border-bottom:2px solid var(--brand);transform:rotate(45deg);transition:.22s}
details[open] summary{color:var(--brand)}
details[open] summary:after{transform:rotate(-135deg);top:32px}
details .ans{color:var(--mut);padding-bottom:24px;font-size:15px;line-height:1.75;white-space:pre-line}
/* CTA band */
.band{background:var(--brand);color:#fff;border-radius:var(--rad);padding:52px;display:grid;grid-template-columns:1.5fr auto;gap:32px;align-items:center;position:relative;overflow:hidden}
.band:before{content:'';position:absolute;right:-70px;top:-70px;width:280px;height:280px;border-radius:50%;background:rgba(255,255,255,.06)}
.band h2{font-size:clamp(24px,3vw,34px);margin-bottom:10px;color:#fff;position:relative}
.band p{color:rgba(255,255,255,.85);font-size:16px;position:relative}
.band .bb{display:flex;gap:12px;flex-wrap:wrap;position:relative}
/* footer */
footer{background:var(--bg-soft);border-top:1px solid var(--line);padding:64px 0 24px}
.fg{display:grid;grid-template-columns:1.8fr 1fr 1fr 1.3fr;gap:44px;margin-bottom:42px}
.fg h5{font-size:12px;margin-bottom:16px;letter-spacing:1.8px;text-transform:uppercase;font-weight:700}
.fg>div>a{display:block;color:var(--mut);font-size:14.5px;margin-bottom:11px}
.fg>div>a:hover{color:var(--brand)}
.flogo{margin-bottom:16px}
.fab{color:var(--mut);font-size:14.5px;max-width:340px;margin-bottom:16px}
.fsoc{display:flex;gap:9px}
.fsoc a{width:38px;height:38px;border-radius:9px;border:1px solid var(--line);display:grid;place-items:center;background:#fff;color:var(--ink-70)}
.fsoc a:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.fg ul{list-style:none}
.fg li{display:flex;gap:9px;align-items:flex-start;color:var(--mut);font-size:14.5px;margin-bottom:11px}
.fg li .ic{color:var(--brand);margin-top:4px}
.fg li a:hover{color:var(--brand)}
.paybadges{display:flex;gap:7px;margin-top:14px}
.paybadges .pb{font-size:11.5px;padding:4px 10px}
.fbot{border-top:1px solid var(--line);padding-top:22px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;color:var(--mut);font-size:13.5px}
/* float + toast */
.float{position:fixed;bottom:24px;left:24px;z-index:60;display:flex;flex-direction:column;gap:10px}
.float a{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;box-shadow:var(--shl);color:#fff;transition:.18s}
.float a:hover{transform:scale(1.07)}
.wa{background:#25d366}.ph{background:var(--brand)}
.toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%,90px);background:var(--ink);color:#fff;padding:13px 22px;border-radius:100px;font-size:14.5px;font-weight:500;z-index:200;display:flex;align-items:center;gap:9px;box-shadow:var(--shl);opacity:0;transition:.3s;pointer-events:none}
.toast.show{transform:translate(-50%,0);opacity:1}
.toast.bad{background:var(--brand)}
/* page head + crumb */
.crumb{background:var(--bg-soft);border-bottom:1px solid var(--line);font-size:13.5px;color:var(--mut)}
.crumb .wrap{display:flex;gap:9px;align-items:center;padding-block:14px;flex-wrap:wrap}
.crumb a:hover{color:var(--brand)}
.crumb i{font-style:normal;opacity:.5}
.crumb span{color:var(--ink);font-weight:600}
.phead{background:var(--bg-tint);padding:52px 0;text-align:center;border-bottom:1px solid var(--line)}
.phead h1{font-size:clamp(28px,4vw,44px);letter-spacing:-.8px;margin-bottom:8px}
.phead p{color:var(--mut);max-width:640px;margin:0 auto;font-size:16.5px}
/* forms */
.f{display:grid;gap:15px}
.fld label{font-size:13px;font-weight:600;display:block;margin-bottom:6px;color:var(--ink-70)}
.f input,.f textarea,.f select{width:100%;padding:12.5px 15px;border-radius:9px;background:#fff;border:1.5px solid var(--line);color:var(--ink);font-family:inherit;font-size:15px;transition:.15s}
.f input:focus,.f textarea:focus,.f select:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-10)}
.err{color:var(--brand);font-size:13.5px;background:var(--brand-05);border:1px solid var(--brand-20);padding:11px 14px;border-radius:8px}
.note{background:var(--acc-10);border:1px dashed var(--acc);border-radius:9px;padding:15px;font-size:13.8px;line-height:1.7}
.note .num{display:inline-block;background:#fff;border:1px solid var(--line);padding:6px 14px;border-radius:6px;font-weight:700;font-size:16px;margin:6px 0;font-family:ui-monospace,monospace}
/* panel */
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:26px}
.panel h3{font-size:18px;margin-bottom:16px}
.row{display:flex;justify-content:space-between;gap:14px;margin-bottom:10px;font-size:15px;color:var(--ink-70)}
.row.tot{font-size:20px;font-weight:700;color:var(--ink);border-top:1.5px solid var(--line);padding-top:14px;margin-top:6px;font-family:var(--fh)}
.row .g{color:var(--ok);font-weight:600}
/* qty */
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:8px;overflow:hidden}
.qty button{width:34px;height:36px;background:#fff;border:0;cursor:pointer;font-size:17px;color:var(--ink-70);font-family:inherit}
.qty button:hover{background:var(--bg-soft);color:var(--brand)}
.qty span{min-width:40px;text-align:center;font-size:15px;font-weight:600}
/* coupon */
.cpn{display:flex;gap:9px}
.cpn input{flex:1;text-transform:uppercase}
.cchips{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px}
.cchip{font-size:12px;border:1px dashed var(--acc);background:var(--acc-10);padding:5px 11px;border-radius:100px;cursor:pointer;font-family:inherit;color:var(--ink)}
.cchip:hover{background:var(--acc);color:#231d08}
.applied{display:flex;align-items:center;gap:8px;background:#eef7f0;border:1px solid #cbe5d2;color:var(--ok);padding:10px 14px;border-radius:8px;font-size:14px;font-weight:600}
.applied button{margin-left:auto;background:none;border:0;color:var(--mut);cursor:pointer;text-decoration:underline;font-size:12.5px;font-family:inherit}
/* empty */
.empty{text-align:center;padding:70px 20px;color:var(--mut)}
.empty .ic{margin:0 auto 16px;color:var(--line)}
.empty h3{font-size:20px;color:var(--ink);margin-bottom:8px}
/* chips filter */
.chips{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:30px}
.chip{padding:9px 20px;border-radius:100px;border:1.5px solid var(--line);background:#fff;font-size:14px;cursor:pointer;font-family:inherit;font-weight:500;color:var(--ink-70);transition:.16s}
.chip:hover{border-color:var(--brand);color:var(--brand)}
.chip.on{background:var(--brand);color:#fff;border-color:var(--brand)}
@media(max-width:1060px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .ccard{flex:0 0 calc((100% - 40px)/3)}
  .fg{grid-template-columns:1fr 1fr}
  .callpill span{display:none}
}
@media(max-width:900px){
  .menu{position:fixed;top:0;right:0;bottom:0;width:min(320px,86%);background:#fff;flex-direction:column;align-items:stretch;gap:2px;padding:88px 18px 24px;box-shadow:var(--shl);transform:translateX(101%);transition:.3s;overflow-y:auto;z-index:75}
  .menu.open{transform:none}
  .menu>a,.drop>a{padding:13px 15px;font-size:16px}
  .dmenu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;width:auto;padding:0 0 0 12px}
  .burger{display:grid;z-index:80}
  .grid,.vals,.revs,.pays,.steps{grid-template-columns:repeat(2,1fr)}
  .bar .wrap{grid-template-columns:1fr 1fr}
  .ccard{flex:0 0 calc((100% - 20px)/2)}
  .stp:after{display:none}
  .band{grid-template-columns:1fr;padding:36px}
  .crail .sarrow{display:none}
  .sc{padding:52px 0;max-width:100%}
  .slide.right .sc{text-align:left}
  .slide.right .sbtns{justify-content:flex-start}
  .slide.right .sc p{margin-left:0}
  .slide.right:after{background:linear-gradient(90deg,rgba(20,16,13,calc(var(--ov) + .38)) 0%,rgba(20,16,13,var(--ov)) 42%,rgba(20,16,13,.06) 78%)}
  .slider>.sarrow{width:38px;height:38px;bottom:14px}
  .slider>.sarrow.p{margin-left:-104px}.slider>.sarrow.n{margin-left:66px}
  .sdots{bottom:26px}
  .sc{padding:44px 0 80px}
}
@media(max-width:620px){
  section{padding:54px 0}
  .grid,.grid.g3{grid-template-columns:repeat(2,1fr)}
  .vals,.revs,.pays,.steps,.bar .wrap,.fg{grid-template-columns:1fr}
  .ccard{flex:0 0 82%}
  .nav{height:68px}
  .announce{font-size:11.8px;padding:8px 12px}
  .band{padding:28px}
  .panel{padding:20px}
  .phead{padding:36px 0}
  .fbot{flex-direction:column;gap:8px;text-align:center;align-items:center}
}

/* ===== variant selector ===== */
.fromlbl{font-style:normal;font-size:12.5px;color:var(--mut);font-weight:600}
.vsel{margin:20px 0}
.vsel>label{font-size:13px;font-weight:700;display:block;margin-bottom:9px;color:var(--ink-70)}
.vopts{display:flex;gap:10px;flex-wrap:wrap}
.vopt{border:1.5px solid var(--line);border-radius:10px;padding:11px 16px;cursor:pointer;background:#fff;transition:.16s;text-align:left;font-family:inherit;min-width:120px}
.vopt:hover{border-color:var(--brand-20)}
.vopt.on{border-color:var(--brand);background:var(--brand-05);box-shadow:0 0 0 3px var(--brand-10)}
.vopt b{display:block;font-size:14.5px;margin-bottom:2px}
.vopt span{font-size:15px;color:var(--brand);font-weight:700;font-family:var(--fh)}
.vopt small{display:block;font-size:11.5px;color:var(--mut);margin-top:2px}
.vopt:disabled{opacity:.45;cursor:not-allowed;text-decoration:line-through}
.vtag{font-size:12px;color:var(--mut);background:var(--bg-tint);padding:2px 9px;border-radius:5px;margin-left:6px}
/* review avatar photos */
.who img{width:46px;height:46px;border-radius:50%;object-fit:cover;flex-shrink:0}
/* ===== chatbot ===== */
.cbtn{position:fixed;right:20px;bottom:20px;width:60px;height:60px;border-radius:50%;background:var(--brand);color:#fff;border:0;display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.24);z-index:95;transition:.22s}
.cbtn:hover{transform:scale(1.06);background:var(--brand-d)}
.cbtn.act{transform:rotate(90deg) scale(.9)}
.cbdot{position:absolute;top:3px;right:3px;width:13px;height:13px;border-radius:50%;background:#25d366;border:2.5px solid #fff}
.cbtn.pulse:before{content:'';position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--brand);animation:cbp 1.9s infinite}
@keyframes cbp{0%{transform:scale(.95);opacity:.8}70%{transform:scale(1.28);opacity:0}100%{opacity:0}}
.cbox{position:fixed;right:24px;bottom:96px;width:min(384px,calc(100vw - 32px));height:min(566px,calc(100vh - 130px));background:#fff;border-radius:18px;box-shadow:0 24px 64px rgba(0,0,0,.26);z-index:96;display:flex;flex-direction:column;overflow:hidden;opacity:0;visibility:hidden;transform:translateY(18px) scale(.97);transition:.26s cubic-bezier(.4,0,.2,1)}
.cbox.on{opacity:1;visibility:visible;transform:none}
.cbh{background:var(--brand);color:#fff;padding:14px 16px;display:flex;align-items:center;gap:11px}
.cbh img{width:40px;height:40px;border-radius:50%;border:2px solid rgba(255,255,255,.35);object-fit:cover}
.cbh b{font-size:15px;display:block;font-family:var(--fh)}
.cbh small{font-size:11.5px;opacity:.9;display:flex;align-items:center;gap:5px}
.cbh small i.on{width:7px;height:7px;border-radius:50%;background:#4ade80;display:inline-block}
.cbh button{margin-left:auto;background:rgba(255,255,255,.16);border:0;color:#fff;width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:15px}
.cbh button:hover{background:rgba(255,255,255,.3)}
.cbm{flex:1;overflow-y:auto;padding:16px;background:var(--bg-soft);display:flex;flex-direction:column;gap:10px}
.cbmsg{max-width:88%;padding:11px 14px;border-radius:14px;font-size:14px;line-height:1.65;animation:cbin .26s ease}
@keyframes cbin{from{opacity:0;transform:translateY(7px)}}
.cbmsg.bot{background:#fff;border:1px solid var(--line);border-bottom-left-radius:5px;align-self:flex-start}
.cbmsg.me{background:var(--brand);color:#fff;border-bottom-right-radius:5px;align-self:flex-end}
.cbtyp{display:flex;gap:4px;padding:14px}
.cbtyp span{width:7px;height:7px;border-radius:50%;background:var(--mut);animation:cbb 1.2s infinite}
.cbtyp span:nth-child(2){animation-delay:.18s}.cbtyp span:nth-child(3){animation-delay:.36s}
@keyframes cbb{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
.cbp{display:flex;gap:9px;align-items:center;background:var(--bg-soft);border:1px solid var(--line);border-radius:9px;padding:7px;margin-top:7px}
.cbp img{width:40px;height:40px;border-radius:7px;object-fit:cover}
.cbp b{display:block;font-size:12.8px;line-height:1.4}
.cbp span{font-size:12.5px;color:var(--brand);font-weight:700}
.cbp a{margin-left:auto;font-size:11.5px;background:var(--brand);color:#fff;padding:5px 11px;border-radius:6px;white-space:nowrap}
.cbv{background:var(--bg-soft);border:1px solid var(--line);border-radius:9px;padding:10px;margin-top:8px}
.cbv b{display:block;font-size:13.2px;margin-bottom:5px}
.cbv span{display:block;font-size:12.8px;color:var(--ink-70);padding:2px 0}
.cbv a{display:inline-block;margin-top:7px;font-size:12px;color:var(--brand);font-weight:700}
.cbc{background:var(--acc-10);border:1px dashed var(--acc);border-radius:7px;padding:7px 11px;margin-top:6px;font-size:13px}
.cbc code{font-weight:800;color:var(--brand);font-family:ui-monospace,monospace}
.cba{display:block;background:var(--brand);color:#fff;padding:10px;border-radius:8px;text-align:center;font-size:13.5px;font-weight:600;margin-top:9px}
.cba:hover{background:var(--brand-d)}
.cba.alt{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.cbs{display:block;color:var(--mut);font-size:12px;margin-top:9px;line-height:1.55}
.cbq{display:flex;gap:7px;flex-wrap:wrap;padding:11px 14px 0;background:#fff;border-top:1px solid var(--line)}
.cbq button{font-size:12.5px;border:1.5px solid var(--line);background:#fff;border-radius:100px;padding:6px 13px;cursor:pointer;font-family:inherit;color:var(--ink-70);transition:.15s}
.cbq button:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-05)}
.cbi{display:flex;gap:8px;padding:12px 14px;background:#fff;align-items:center}
.cbi input{flex:1;border:1.5px solid var(--line);border-radius:100px;padding:11px 16px;font-family:inherit;font-size:14px;outline:0}
.cbi input:focus{border-color:var(--brand)}
.cbi button{width:42px;height:42px;border-radius:50%;background:var(--brand);color:#fff;border:0;cursor:pointer;display:grid;place-items:center;flex-shrink:0}
.cbi button:hover{background:var(--brand-d)}
.float{bottom:24px;left:24px}
@media(max-width:620px){
  .cbox{right:10px;left:10px;width:auto;bottom:86px;height:min(508px,calc(100vh - 116px))}
  .cbtn{right:16px;bottom:16px;width:54px;height:54px}
  .float{bottom:16px;left:16px}
  .float a{width:46px;height:46px}
}

/* ============ READABILITY PASS ============ */
/* Bengali script needs more vertical room than Latin */
:lang(bn), body{word-break:normal;overflow-wrap:break-word}
.sc h1{line-height:1.36;letter-spacing:-.4px}
.sc p{font-size:18px;line-height:1.8;max-width:540px}
.sc .eyebrow{font-size:12.5px;letter-spacing:2px}
/* hero text must stay legible on ANY image */
.slide.light .sc h1{text-shadow:0 1px 2px rgba(255,255,255,.85)}
.slide:not(.light) .sc h1{text-shadow:0 2px 18px rgba(0,0,0,.55)}
.slide:not(.light) .sc p{text-shadow:0 1px 10px rgba(0,0,0,.5)}
/* body copy sizes */
.card .ex{font-size:14.5px;line-height:1.75;color:var(--ink-70)}
.card h3{font-size:16.5px;line-height:1.5}
.sh h2{line-height:1.4}
.sh p{font-size:16px;color:var(--ink-70)}
.specs li{font-size:15.5px;line-height:1.7}
.perk span{font-size:15px;line-height:1.7}
label{font-size:14.5px;line-height:1.6}
input,select,textarea{font-size:16px!important;line-height:1.6}  /* 16px stops iOS zoom-on-focus */
.mut,small{color:var(--mut)}
small{font-size:13.5px;line-height:1.65}
/* links inside prose get an underline for clarity */
.fab a,.aboutBody a{text-decoration:underline}
/* focus ring everywhere for keyboard users */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--brand);outline-offset:2px}
/* chatbot legibility */
.cbmsg{font-size:14.8px;line-height:1.75}
.cbq button{font-size:13.2px}
.cbi input{font-size:15.5px}
/* respect reduced-motion */
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}
/* mobile readability */
@media(max-width:620px){
  body{font-size:16.5px}
  .sc h1{font-size:clamp(26px,7.4vw,34px);line-height:1.38}
  .sc p{font-size:16px}
  .btn{padding:14px 22px}          /* larger tap targets */
  .cbtn{width:56px;height:56px}
}

/* =======================================================================
   FULL RESPONSIVE LAYER — phones, phablets, tablets, foldables, landscape
   ======================================================================= */

/* never let anything cause sideways scrolling */
html,body{max-width:100%;overflow-x:clip}
img,video,svg,table,pre{max-width:100%}
.wrap{width:100%}

/* mobile drawer: close button + backdrop */
.mclose{display:none;position:absolute;top:16px;right:16px;width:42px;height:42px;border-radius:10px;
  border:1px solid var(--line);background:#fff;cursor:pointer;color:var(--ink);place-items:center}
.mbd{display:none}

/* ---------- TABLET / SMALL LAPTOP ---------- */
@media(max-width:900px){
  .mclose{display:grid}
  .mbd{display:block;position:fixed;inset:0;background:rgba(20,16,13,.45);z-index:74;
    -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
  .menu{padding-top:74px}
  /* drawer must clear notches / rounded corners */
  .menu{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
  .pd{grid-template-columns:1fr;gap:28px}
  .pgal{position:static}
}

/* ---------- LARGE PHONES / PHABLETS ---------- */
@media(max-width:760px){
  .grid,.grid.g3{grid-template-columns:repeat(2,1fr)!important;gap:12px}
  .g2,.g3{grid-template-columns:1fr!important;gap:16px}
  .bar .wrap{grid-template-columns:1fr 1fr;gap:14px;padding:20px 16px}
  .fg{grid-template-columns:1fr;gap:28px}
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  .cbox{right:8px;left:8px;width:auto}
}

/* ---------- PHONES ---------- */
@media(max-width:620px){
  :root{--rad:12px}
  .wrap{padding:0 16px}
  section{padding:44px 0}
  .nav{height:64px;gap:10px}
  .logo img{width:40px;height:40px}
  .logo b{font-size:16px}
  .logo i{font-size:8.5px;letter-spacing:1.4px}
  .callpill{display:none}                 /* phone icon lives in the float bar */
  .icb{width:42px;height:42px}
  .hact{gap:7px;margin-left:auto}
  /* hero */
  .slide{min-height:auto}
  .sc{padding:38px 0 74px}
  .sbtns{gap:9px}
  .sbtns .btn{flex:1 1 auto;min-width:140px;justify-content:center}
  /* cards / sections */
  .sh{flex-direction:column;align-items:flex-start;gap:10px}
  .sh h2{font-size:23px}
  .band{padding:24px 20px;text-align:center}
  .band .btn{width:100%}
  /* forms stack */
  .frow,.fld2{grid-template-columns:1fr!important}
  /* cart / checkout lines */
  .line{flex-wrap:wrap}
  .line .btn{width:auto}
  /* sticky summary should not be sticky on phones */
  .sticky,.sumcard{position:static!important}
  /* floating buttons must not cover content or each other */
  .float{bottom:14px;left:14px;gap:8px}
  .float a{width:46px;height:46px}
  .cbtn{right:14px;bottom:14px;width:54px;height:54px}
  .cbox{bottom:78px;height:min(70vh,520px)}
  /* respect iOS home indicator */
  .float,.cbtn{margin-bottom:env(safe-area-inset-bottom)}
}

/* ---------- SMALL PHONES (iPhone SE, Galaxy A0x) ---------- */
@media(max-width:400px){
  body{font-size:16px}
  .wrap{padding:0 13px}
  .logo i{display:none}
  .logo b{font-size:15px}
  .sc h1{font-size:clamp(23px,7.6vw,29px)}
  .sc p{font-size:15px}
  .btn{padding:12px 16px;font-size:14.2px}
  .icb{width:40px;height:40px}
  .slider>.sarrow{width:34px;height:34px}
  .slider>.sarrow.p{margin-left:-92px}.slider>.sarrow.n{margin-left:58px}
  .ccard{flex:0 0 88%}
  .cbtn{width:50px;height:50px}
}

/* ---------- LANDSCAPE PHONES (short viewports) ---------- */
@media(max-height:520px) and (orientation:landscape){
  .slide{min-height:auto}
  .sc{padding:26px 0 62px}
  .sc h1{font-size:24px;margin-bottom:10px}
  .sc p{font-size:14px;margin-bottom:16px}
  .menu{padding-top:60px}
  .cbox{height:calc(100vh - 90px)}
}

/* ---------- TOUCH DEVICES: remove hover-only behaviour ---------- */
@media(hover:none){
  .dmenu{display:none}                     /* hover dropdown is unusable on touch */
  .menu.open .dmenu{display:block}
  .btn:hover,.card:hover{transform:none;box-shadow:none}
  a,button{-webkit-tap-highlight-color:rgba(140,29,24,.12)}
}
/* minimum 44x44px tap targets (WCAG 2.5.5) */
@media(pointer:coarse){
  .btn,.icb,.chip,.sarrow,.cbq button,.sdots button{min-height:44px}
  .sdots button{min-height:auto;padding:9px 0}
  .menu>a,.drop>a{min-height:46px;display:flex;align-items:center}
}

/* =====================================================================
   MOBILE DRAWER — DEFINITIVE LAYER (overrides everything above)
   Fixes: drawer trapped in header, ✕ under burger, iOS 100vh bug.
   ===================================================================== */
@media(max-width:900px){
  /* drawer is a direct child of <body> (moved by initMenu) */
  .menu{
    position:fixed !important;
    top:0 !important; right:0 !important; left:auto !important;
    height:100vh !important; height:100dvh !important;  /* dvh = no iOS URL-bar jump */
    max-height:none !important;
    width:min(330px,88vw) !important;
    margin:0 !important;
    display:flex !important; flex-direction:column; align-items:stretch;
    gap:2px;
    padding:76px 16px calc(28px + env(safe-area-inset-bottom,0px)) !important;
    background:#fff !important;
    box-shadow:-14px 0 40px rgba(20,16,13,.22);
    transform:translateX(102%);
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    z-index:1002 !important;      /* above backdrop AND header */
    visibility:hidden;
  }
  .menu.open{ transform:translateX(0); visibility:visible; }

  /* backdrop sits between page and drawer */
  .mbd{
    display:block !important; position:fixed !important; inset:0 !important;
    background:rgba(20,16,13,.5);
    -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
    z-index:1001 !important;
    border:0; padding:0; margin:0; width:100%; height:100%;
  }
  .mbd[hidden]{ display:none !important; }

  /* ✕ lives INSIDE the drawer, above everything in it */
  .mclose{
    display:grid !important; place-items:center;
    position:absolute !important; top:14px; right:14px;
    width:44px; height:44px; min-width:44px; min-height:44px;
    border-radius:12px; border:1px solid var(--line);
    background:#fff; color:var(--ink); cursor:pointer;
    z-index:3 !important;
  }
  .mclose:active{ background:var(--bg-tint); }

  /* burger must never sit on top of the open drawer */
  .menu.open ~ .hact .burger,
  body:has(.menu.open) .burger{ z-index:0 !important; }
  header{ z-index:60 !important; }

  /* menu links: comfortable tap targets */
  .menu>a,.menu .drop>a{
    padding:14px 15px !important; font-size:16.5px; border-radius:10px;
    min-height:48px; display:flex; align-items:center;
  }
  .menu .drop{ display:block; width:100%; }
  /* category submenu: always expanded inside the drawer, never a hover popup */
  .menu .dmenu{
    position:static !important; display:block !important;
    opacity:1 !important; visibility:visible !important; transform:none !important;
    box-shadow:none !important; border:0 !important; background:transparent !important;
    padding:0 0 6px 12px !important; min-width:0 !important; width:auto !important;
    pointer-events:auto !important;
  }
  .menu .dmenu a{
    display:flex; align-items:center; gap:10px;
    padding:11px 12px !important; min-height:46px; border-radius:9px;
    font-size:15px;
  }
  .menu .dmenu img{ width:36px; height:36px; border-radius:8px; object-fit:cover; flex:none; }
}

/* no page scroll behind the drawer (belt & braces with the JS lock) */
body.mopen{ overflow:hidden !important; touch-action:none; }

/* kill any horizontal overflow site-wide */
html,body{ max-width:100%; overflow-x:clip; }
*{ min-width:0; }
img,svg,video,canvas,table{ max-width:100%; }

/* --- small phones (<=380px / short screens): compact the drawer --- */
@media(max-width:900px) and (max-height:700px){
  .menu{ padding-top:66px !important; }
  .menu>a,.menu .drop>a{ padding:11px 14px !important; min-height:44px; font-size:15.5px; }
  .menu .dmenu a{ padding:8px 10px !important; min-height:42px; font-size:14.5px; }
  .menu .dmenu img{ width:30px; height:30px; }
  .mclose{ top:11px; right:12px; }
}
@media(max-width:400px){
  .menu{ width:min(300px,90vw) !important; padding-left:13px !important; padding-right:13px !important; }
  .menu .dmenu{ padding-left:8px !important; }
  .menu .dmenu a small{ display:none; }   /* hide "N টি পণ্য" on tiny screens */
}

/* =====================================================================
   TOUCH ERGONOMICS — real 44px targets + legible text on phones
   ===================================================================== */
@media(hover:none),(pointer:coarse){
  /* every interactive control gets a proper touch target */
  .btn,.icb,.chip,.sarrow,button,
  input[type=submit],input[type=button]{ min-height:44px; }

  /* form fields: 16px prevents iOS auto-zoom on focus */
  input:not([type=checkbox]):not([type=radio]):not([type=color]),
  select,textarea{
    min-height:46px; font-size:16px !important;
    padding-top:11px; padding-bottom:11px;
  }
  textarea{ min-height:88px; }
  select{ padding-right:34px; }

  /* footer / breadcrumb / inline link lists need vertical breathing room */
  footer a,.crumb a,.clist a,.fsoc a,.slist a{
    min-height:44px; display:inline-flex; align-items:center;
  }
  footer .fg>div>a{ display:flex; }
  .fsoc a{ width:44px; height:44px; justify-content:center; }
  .fbot{ gap:8px; }

  /* hero dots stay visually small; the tap area is enlarged with ::after */
  .sdots button{ min-height:0; }
  /* qty steppers */
  .qty button{ min-width:44px; min-height:44px; font-size:19px; }
}

/* readable minimum text size on phones (Bengali needs a bit more) */
@media(max-width:900px){
  body{ font-size:16px; }
  small,.mut,.ex,figcaption,.hint,.u{ font-size:13.5px !important; }
  .announce{ font-size:12.5px; line-height:1.5; }
  .tag{ font-size:12px; }
  .crumb{ font-size:13.5px; }
  .fbot{ font-size:13px; }
}

/* =====================================================================
   SELECTABLE ROWS (.pay) — delivery zone + payment method
   These are <label> rows wrapping a radio. The old .pay card styling
   (from the About page) gave them no layout, so rows overlapped and
   swallowed each other's taps. This makes them real, tappable rows.
   ===================================================================== */
label.pay{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  width:100%; margin:0 0 10px; padding:14px 16px;
  border:1.5px solid var(--line); border-radius:var(--rad);
  background:#fff; cursor:pointer; position:relative;
  transition:border-color .15s, background .15s, box-shadow .15s;
  min-height:60px; overflow:visible;
}
label.pay:hover{ border-color:var(--brand-20); box-shadow:none; }
label.pay input[type=radio]{
  flex:none; width:22px; height:22px; margin:0; accent-color:var(--brand); cursor:pointer;
}
label.pay .dot{ display:none; }                 /* legacy decorative span */
label.pay>span:not(.dot):not(.pb){ display:flex; flex-direction:column; gap:2px; min-width:0; }
label.pay b{ font-size:15.5px; font-weight:600; line-height:1.4; }
label.pay small{ color:var(--mut); font-size:13.5px; line-height:1.45; }
label.pay .pb{ flex:none; }
/* selected state */
label.pay:has(input:checked){
  border-color:var(--brand); background:var(--brand-05);
  box-shadow:0 0 0 3px var(--brand-10);
}
label.pay:active{ background:var(--bg-tint); }

@media(max-width:620px){
  label.pay{ padding:13px 14px; gap:10px; }
  label.pay b{ font-size:15px; }
  label.pay small{ font-size:13px; }
}

/* payment rows: keep badge + text on one line, never wrap under the radio */
label.pay{ flex-wrap:nowrap; }
label.pay .pb{
  min-width:74px; text-align:center; font-size:13.5px; padding:6px 10px;
}
@media(max-width:400px){
  label.pay{ gap:8px; padding:12px; }
  label.pay .pb{ min-width:62px; font-size:12.5px; padding:5px 7px; }
  label.pay b{ font-size:14.5px; }
  label.pay small{ font-size:12.5px; }
}

/* floating action buttons must not cover form content / footer */
@media(max-width:900px){
  .float{ bottom:calc(14px + env(safe-area-inset-bottom,0px)); left:12px; gap:9px; }
  .float a{ width:46px; height:46px; }
  .cbtn{ right:14px; bottom:calc(14px + env(safe-area-inset-bottom,0px)); width:52px; height:52px; }
  /* give the page enough bottom room so nothing hides behind them */
  footer{ padding-bottom:calc(78px + env(safe-area-inset-bottom,0px)); }
}

/* inline text links inside empty-state / summary copy */
.colines .mut a,.sum a,.hint a{
  display:inline-flex; align-items:center; min-height:36px;
  padding:4px 6px; margin:-4px -2px; font-weight:600;
}


/* hero dots: small dot, large invisible touch target */
.sdots button{ position:relative; }
.sdots button::after{
  content:''; position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:34px; height:40px;      /* >=40px finger area, invisible */
}
.sdots button.on{ width:30px; height:9px; border-radius:5px; background:var(--acc); }
@media(max-width:620px){
  .sdots{ bottom:22px; gap:8px; }
  .sdots button{ width:8px; height:8px; }
  .sdots button.on{ width:26px; height:8px; }
}

/* =====================================================================
   HERO SLIDER — mobile layout
   Arrows to the screen edges, dots centred below them: no overlap.
   ===================================================================== */
@media(max-width:900px){
  .slide{ min-height:min(520px,72vh); }
  /* arrows: vertically centred, pinned to the edges */
  .slider>.sarrow{
    top:50%; bottom:auto; transform:translateY(-50%);
    width:42px; height:42px; margin:0 !important;
  }
  .slider>.sarrow.p{ left:10px; right:auto; }
  .slider>.sarrow.n{ left:auto; right:10px; }
  .slider>.sarrow:hover{ transform:translateY(-50%); }
  .sdots{ bottom:16px; }
}
@media(max-width:620px){
  .slide{ min-height:min(470px,68vh); }
  .slider>.sarrow{ width:38px; height:38px; background:rgba(255,255,255,.88); }
  .slider>.sarrow.p{ left:7px; }
  .slider>.sarrow.n{ right:7px; }
  .sc{ padding-left:52px; padding-right:52px; }   /* clear the arrows */
  .sc h1{ font-size:clamp(23px,6.6vw,32px); line-height:1.32; }
  .sc p{ font-size:15px; }
  .sbtns{ display:flex; gap:9px; flex-wrap:wrap; }
  .sbtns .btn{ flex:1 1 auto; justify-content:center; min-width:135px; }
}
@media(max-width:400px){
  .sc{ padding-left:46px; padding-right:46px; }
  .sbtns .btn{ min-width:100%; }
}
/* stop neighbouring slides bleeding in at the edges */
.slides{ will-change:transform; }
.slide{ overflow:hidden; }

/* =====================================================================
   HERO ON PHONES — two zones: copy on top, subject photo below.
   The mobile art is cropped 9:10 with the man in the lower 60%, so the
   text block is aligned to the top and never covers his face.
   ===================================================================== */
@media(max-width:760px){
  .slide>picture>img{ object-fit:cover; object-position:50% 0; }
  .slide{
    min-height:0;
    aspect-ratio:9/10;          /* matches the mobile art exactly */
    align-items:flex-start;      /* copy pinned to the clear top zone */
  }
  .slide .wrap{ width:100%; }
  .sc{
    padding:22px 0 0;
    max-width:100%;
    /* keep all copy inside the top ~46% clear band */
  }
  .sc .eyebrow{ font-size:12px; letter-spacing:.14em; margin-bottom:6px; }
  .sc h1{ font-size:clamp(21px,5.9vw,29px); line-height:1.3; margin-bottom:8px; }
  .sc p{
    font-size:14.2px; line-height:1.55; margin-bottom:12px;
    max-width:88%;
  }
  .sbtns .btn{ padding:11px 16px; font-size:14.5px; }
  .slide.light .sc{ color:var(--ink); }
}
@media(max-width:400px){
  .sc{ padding-top:16px; }
  .sc h1{ font-size:clamp(19px,5.9vw,24px); }
  .sc p{ font-size:13.4px; margin-bottom:10px; }
  .sc .eyebrow{ font-size:11px; }
}

/* hero mobile: match the 9:10.8 art, keep arrows off the subject */
@media(max-width:760px){
  .slide{ aspect-ratio:9/10.8; }
  /* arrows sit low, clear of both the copy and his face */
  .slider>.sarrow{ top:auto; bottom:14px; transform:none; }
  .slider>.sarrow:hover{ transform:none; }
  .slider>.sarrow.p{ left:8px; }
  .slider>.sarrow.n{ right:8px; }
  .sdots{ bottom:24px; }
}

/* =====================================================================
   SHOP FILTER BAR — had no styling at all (raw browser controls)
   ===================================================================== */
.shopbar{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  background:#fff; border:1px solid var(--line); border-radius:var(--rad);
  padding:14px; margin-bottom:26px; box-shadow:0 1px 3px rgba(31,27,23,.04);
}
.shopbar input[type=search]{
  flex:1 1 240px; min-width:0; height:46px; margin:0;
  padding:0 14px 0 40px; border:1px solid var(--line); border-radius:10px;
  font:inherit; font-size:15px; background:var(--bg-soft) no-repeat 13px center;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b625b' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
}
.shopbar select{
  flex:0 1 auto; height:46px; margin:0;
  padding:0 36px 0 14px; border:1px solid var(--line); border-radius:10px;
  font:inherit; font-size:15px; color:var(--ink); background:var(--bg-soft);
  -webkit-appearance:none; appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231f1b17' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center;
}
.shopbar input:focus,.shopbar select:focus{
  outline:3px solid var(--brand-10); border-color:var(--brand); background-color:#fff;
}
.shopbar .btn{ height:46px; padding:0 22px; flex:0 0 auto; }

@media(max-width:760px){
  .shopbar{ padding:12px; gap:9px; }
  .shopbar input[type=search]{ flex:1 1 100%; }
  .shopbar select{ flex:1 1 calc(50% - 5px); min-width:0; }
  .shopbar .btn{ flex:1 1 100%; justify-content:center; }
}

/* =====================================================================
   PRODUCT CARDS — tighter so two fit comfortably side by side
   ===================================================================== */
@media(max-width:620px){
  .card .cbody{ padding:12px 11px 13px; }
  .card h3{ font-size:14.6px; line-height:1.4; }
  .card .ex{ display:none; }                 /* no room for the blurb */
  .card .price b{ font-size:17px; }
  .card .price s{ font-size:12.5px; }
  .card .price .fromlbl{ font-size:11.5px; }
  .card .stk{ font-size:12px; }
  .card .btn{ padding:10px 10px; font-size:13.6px; gap:5px; }
  .card .btn .ic{ width:14px; height:14px; }
  .tags .tag{ font-size:10.5px; padding:3px 7px; }
}
@media(max-width:380px){
  .grid{ gap:10px !important; }
  .card h3{ font-size:13.8px; }
  .card .btn{ font-size:12.8px; padding:9px 7px; }
}

/* =====================================================================
   CATEGORIES ON PHONES — show a real 2-up grid instead of a cramped rail
   ===================================================================== */
@media(max-width:620px){
  .crail{ overflow:visible; }
  .ctrack{
    display:grid !important; grid-template-columns:repeat(2,1fr); gap:12px;
    overflow:visible !important; scroll-snap-type:none;
  }
  .ctrack .ccard{
    flex:none !important; width:auto; min-width:0;
    aspect-ratio:1/1.04;
  }
  /* the rail is duplicated for the auto-scroll loop: hide the clones */
  .ctrack .ccard.dupe{ display:none; }
  .crn{ display:none; }             /* rail arrows are meaningless in grid mode */
  .ccard .cinfo b{ font-size:14.5px; }
  .ccard .cinfo small{ font-size:12px; }
}

/* =====================================================================
   CATEGORY CARD LABEL (.cinfo) — the stylesheet only styled the old
   .ctx markup, so category names were rendering invisible.
   ===================================================================== */
.ccard{ display:block; }
.ccard .cinfo{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:16px 14px 13px; color:#fff;
  display:flex; flex-direction:column; gap:2px;
  background:linear-gradient(to top,rgba(18,14,11,.86) 0%,rgba(18,14,11,.55) 55%,rgba(18,14,11,0) 100%);
}
.ccard .cinfo b{ font-size:16.5px; font-weight:700; line-height:1.35; color:#fff; font-family:var(--fh); }
.ccard .cinfo small{ font-size:12.8px; color:rgba(255,255,255,.88); }
.ccard:hover img{ transform:scale(1.05); }

/* section header: on phones stack the "see all" link instead of letting the
   floating WhatsApp/call buttons sit on top of it */
@media(max-width:620px){
  .sh{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
  .sh .btn{ align-self:flex-start; }
  /* floating buttons are bottom-LEFT; keep left-aligned CTAs clear of them */
  .sh>a.btn{ margin-left:0; }
}
/* the floating stack should never trap clicks on a wide area */
.float{ pointer-events:none; }
.float>a{ pointer-events:auto; }

/* minimum legible sizes on phones (Bengali script needs more than Latin) */
@media(max-width:900px){
  .logo i{ font-size:11.5px; }
  .sc .eyebrow{ font-size:11.8px !important; }
  .tag{ font-size:11.5px !important; padding:3px 8px; }
}
@media(max-width:400px){
  .logo i{ display:none; }        /* no room; brand name still shows */
}

/* =====================================================================
   HERO ON PHONES — REVERSED ORDER (client request, round 10)
   Subject photo on TOP, headline + buttons at the BOTTOM, inside the
   same banner image. Desktop layout is untouched.
   ===================================================================== */
@media(max-width:760px){
  .slide{
    aspect-ratio:9/9.8;             /* matches the new 900x980 art */
    align-items:flex-end;           /* copy drops to the bottom band */
    min-height:0;
  }
  .slide>picture>img{ object-position:50% 0; }   /* keep his head in frame */

  .sc{
    padding:0 0 18px;               /* was 22px top -> removes the top gap */
    max-width:100%;
  }
  /* tighten every vertical gap inside the copy block */
  .sc .eyebrow{ margin-bottom:4px; }
  .sc h1{ margin-bottom:6px; }
  .sc p{ margin-bottom:10px; }
  .sbtns{ gap:8px; }
  .sbtns .btn{ padding:11px 14px; }

  /* arrows + dots pulled in so they don't add empty space */
  .slider>.sarrow{ top:38%; bottom:auto; transform:translateY(-50%); }
  .slider>.sarrow:hover{ transform:translateY(-50%); }
  .sdots{ bottom:8px; }
}
@media(max-width:400px){
  .slide{ aspect-ratio:9/10.2; }
  .sc{ padding-bottom:16px; }
  .sc p{ margin-bottom:9px; }
}

/* hero mobile (round 10, pass 2): taller clear band, dots clear of buttons */
@media(max-width:760px){
  .slide{ aspect-ratio:9/10.6; }
  .sc{ padding-bottom:30px; }        /* room so dots never touch the button */
  .sdots{ bottom:9px; }
  .slider>.sarrow{ top:30%; }        /* beside his head, not over the copy */
}
@media(max-width:400px){
  .slide{ aspect-ratio:9/11; }
  .sc{ padding-bottom:28px; }
}

/* ===== patch: footer long-word wrapping (emails/URLs) ===== */
.fg a,.fg li,.fab{overflow-wrap:anywhere}
.fg li{align-items:center}
@media(max-width:620px){
  .fg{text-align:left}
  .fg>div{min-width:0}
  .fg h5{margin-bottom:12px}
}

/* ===== patch v3: hero framing + professional polish ===== */
/* keep the person's head visible: anchor hero media to top */
.slide>picture>img,.slide>img{object-position:center 30%}
@media(max-width:640px){.slide>picture>img,.slide>img{object-position:center top}}
/* mobile: show face + product clearly, soften the light overlay */
@media(max-width:640px){
  .slide.light:after{background:linear-gradient(180deg,rgba(255,252,247,.55) 0%,rgba(255,252,247,.2) 30%,rgba(255,252,247,0) 55%,rgba(255,252,247,.88) 82%,rgba(255,252,247,.96) 100%)}
  .slide.light .sc{justify-content:flex-end}
}
/* cleaner card + section rhythm */
.card{border:1px solid var(--line)}
.card:hover{border-color:var(--brand-20)}
section{padding:72px 0}
@media(max-width:620px){section{padding:48px 0}}
/* footer credit */
.fcredit{color:var(--mut);font-size:13px}
.fcredit a{color:var(--brand);font-weight:600}
.fcredit a:hover{text-decoration:underline}

/* ===== patch v4: professional refinement ===== */
/* subtle top divider between sections instead of alternating blocks everywhere */
.sh h2{position:relative;padding-bottom:14px}
.sh h2:after{content:'';position:absolute;left:0;bottom:0;width:44px;height:3px;border-radius:2px;background:var(--acc)}
.sh.mid h2:after{left:50%;transform:translateX(-50%)}
/* calmer eyebrow */
.sc .eyebrow{font-size:12px;letter-spacing:3px}
/* trust bar: tighter, business-like */
.bar .wrap{padding:20px}
.bi b{font-size:14px}
.bi small{font-size:12.5px}
/* product card: quieter buttons until hover */
.card .btn-o{border-color:var(--line)}
/* consistent panel titles */
.panel h3{font-family:var(--fh);letter-spacing:-.2px}
/* footer: subtle top accent */
footer{border-top:3px solid var(--brand)}
/* header: thin accent line under announce */
.announce{letter-spacing:.2px}
/* badge tags: small caps feel */
.tag{letter-spacing:.6px;text-transform:none}
/* steps circles: outline style, less cartoon */
.stp .n{background:#fff;color:var(--brand);border:2px solid var(--brand);font-family:var(--fh)}
/* review cards: remove oversized quote mark on small screens */
@media(max-width:620px){.rev .q{display:none}}