/* Daily Super Mart – Front (red theme, app style). Colors come from Admin > वेबसाइट कस्टमाइज़ */
:root{--p2:color-mix(in srgb,var(--p) 10%,var(--card,#fff));--sh:0 6px 20px rgba(0,0,0,.06);--r:calc(18px * var(--rad,1));
 box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;scroll-padding-top:calc(76px + env(safe-area-inset-top,0px))}
body{font-family:var(--fb),"Mukta","Noto Sans Devanagari",system-ui,sans-serif;background:var(--bg);color:var(--tx);line-height:1.6}
img{max-width:100%;display:block}a{color:inherit}
h1,h2,h3{font-family:var(--fh),"Baloo 2",system-ui,sans-serif;line-height:1.2}
svg.i{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.app{max-width:1100px;margin:0 auto;min-height:100%;padding-bottom:96px;background:var(--bg)}
body.appmode .app{max-width:560px}
@media(min-width:600px){body.appmode{background:radial-gradient(circle at 20% 0,var(--p),var(--board) 70%) fixed}body.appmode .app{box-shadow:0 0 60px rgba(0,0,0,.35)}}
.announce{background:var(--board);color:#fff;text-align:center;font-size:.82rem;padding:6px 12px}

/* header – shop board style */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--board);color:#fff;padding:10px 14px;display:flex;align-items:center;gap:8px;border-bottom:3px solid var(--p)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0;margin-right:auto}
.logo{width:44px;height:44px;border-radius:12px;background:#fff;color:var(--board);display:grid;place-items:center;flex:none;box-shadow:0 0 14px rgba(255,255,255,.35)}
.logo svg{width:32px;height:32px}.logo svg path:nth-child(2){stroke:var(--p)}
.logo.sm{width:38px;height:38px;font-size:1.2rem;background:var(--p)}
.logo-img{height:44px;width:auto;border-radius:10px}
.bt b{display:block;font:800 1.25rem/1.05 var(--fh),sans-serif;color:var(--hdrtx);text-shadow:var(--glow);white-space:nowrap}
.bt small{font-size:.74rem;opacity:.9;display:flex;align-items:center;gap:5px}
.dot{width:7px;height:7px;border-radius:50%;background:#4cff8f;box-shadow:0 0 0 3px rgba(76,255,143,.25)}.dot.off{background:#ff6b6b;box-shadow:0 0 0 3px rgba(255,107,107,.25)}
.hbtn{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.1);border:0;color:#fff;display:grid;place-items:center;text-decoration:none;font-size:1.05rem;flex:none}

/* hero slider */
.hero{background:linear-gradient(180deg,var(--board) 0,var(--board) 30%,var(--p) 30.1%,var(--pd));padding:10px 14px 30px;border-radius:0 0 28px 28px}
.greet{color:#fff;font:500 .92rem var(--fb),sans-serif;margin-bottom:10px;opacity:.9}
.slider{overflow:hidden;border-radius:calc(22px * var(--rad,1));box-shadow:0 10px 30px rgba(0,0,0,.25)}
.track{display:flex;transition:transform .55s cubic-bezier(.3,.8,.3,1)}
.slide{min-width:100%;height:clamp(200px,48vw,360px);position:relative;overflow:hidden;color:#fff;display:flex;align-items:flex-end;background:linear-gradient(130deg,var(--sb),color-mix(in srgb,var(--sb) 60%,#000))}
.slide:not(.has-img){align-items:center}
.slide:not(.has-img):before{content:"";position:absolute;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.12);right:-70px;top:-70px}
.slide>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slide.has-img:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.75),rgba(0,0,0,0) 65%)}
.sc{position:relative;z-index:1;padding:20px;max-width:75%}
.slide h2{font-size:clamp(1.4rem,5vw,2.4rem)}.slide p{font-size:.9rem;opacity:.95;margin-top:2px}
.tag{display:inline-block;background:rgba(255,255,255,.25);font-size:.72rem;font-weight:700;padding:2px 10px;border-radius:12px;margin-bottom:6px;backdrop-filter:blur(4px)}
.sbtn{display:inline-block;margin-top:10px;background:#fff;color:var(--p);font-weight:700;padding:7px 16px;border-radius:calc(20px * var(--rad,1));text-decoration:none;font-size:.88rem}
.slide .em{position:absolute;right:-4px;bottom:-14px;font-size:clamp(7rem,22vw,11rem);line-height:1;filter:drop-shadow(0 8px 14px rgba(0,0,0,.25))}
.dots{display:flex;justify-content:center;gap:6px;margin-top:12px}
.dots button{width:7px;height:7px;border-radius:4px;border:0;background:rgba(255,255,255,.45);transition:.3s;cursor:pointer}.dots button.on{width:22px;background:#fff}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:-18px 14px 0;position:relative;z-index:2}
.stats div{background:var(--card);border-radius:calc(16px * var(--rad,1));padding:12px 6px;text-align:center;box-shadow:var(--sh);border:1px solid var(--ln)}
.stats b{font:800 1.3rem/1 var(--fh),sans-serif;color:var(--p);display:block}.stats small{font-size:.74rem;color:var(--mu)}

/* sections */
.sec{padding:26px 14px 4px}.pt{padding-top:16px}
.sh{display:flex;justify-content:space-between;align-items:end;gap:10px;margin-bottom:12px}
.sh h2{font-size:1.3rem;position:relative;padding-left:12px}
.sh h2:before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:4px;border-radius:3px;background:var(--p)}
.sh span,.sh a{color:var(--mu);font-size:.82rem;text-decoration:none;white-space:nowrap}.sh a{color:var(--p);font-weight:600}
.ph{font-size:1.6rem;margin-bottom:12px}.lead{color:var(--mu);margin-bottom:12px}.note{color:var(--mu);font-size:.78rem;margin-top:12px}
.box{background:var(--card);border:1px solid var(--ln);border-radius:calc(20px * var(--rad,1));padding:16px;box-shadow:var(--sh)}.box h2{font-size:1.25rem;margin-bottom:8px}
.wa{margin:16px 14px 0;display:flex;align-items:center;gap:12px;background:color-mix(in srgb,var(--ok) 12%,var(--card));border:1px solid color-mix(in srgb,var(--ok) 30%,var(--card));border-radius:calc(18px * var(--rad,1));padding:12px 14px;text-decoration:none;color:var(--tx)}
.wa i{font-style:normal;font-size:1.8rem}.wa b{display:block;line-height:1.3}.wa small{font-size:.8rem}
.wa span{margin-left:auto;background:var(--ok);color:#fff;font-weight:700;padding:6px 12px;border-radius:12px;font-size:.82rem;white-space:nowrap}

/* about */
.about{background:var(--card);border-radius:calc(22px * var(--rad,1));overflow:hidden;box-shadow:var(--sh);border:1px solid var(--ln)}
.aimg{height:190px;overflow:hidden}.aimg img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.ab{padding:16px}.ab p{margin-bottom:8px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.chips span{background:var(--p2);color:var(--p);font-weight:600;font-size:.8rem;padding:5px 11px;border-radius:calc(20px * var(--rad,1))}

.more{display:inline-block;margin-top:12px;color:var(--p);font-weight:700;text-decoration:none}

/* gallery */
.gal{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:110px 110px;gap:8px}
.gal a{border-radius:calc(16px * var(--rad,1));overflow:hidden;position:relative}.gal a:first-child{grid-row:span 2}
.gal img{width:100%;height:100%;object-fit:cover}
.gal span,.ggrid span{position:absolute;left:8px;bottom:8px;background:rgba(0,0,0,.55);color:#fff;font-size:.75rem;padding:2px 8px;border-radius:8px}
.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.ggrid a{position:relative;border-radius:calc(14px * var(--rad,1));overflow:hidden;aspect-ratio:1}.ggrid img{width:100%;height:100%;object-fit:cover}
.lb{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:99;display:grid;place-items:center;padding:20px}.lb[hidden]{display:none}
.lb img{max-height:90vh;border-radius:10px}.lb button{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:14px;background:#fff;border:0;width:40px;height:40px;border-radius:50%;font-size:1.1rem}

/* categories */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 8px}
@media(min-width:760px){body:not(.appmode) .cats{grid-template-columns:repeat(8,1fr)}}
.cat{text-align:center;font-size:.78rem;font-weight:600;text-decoration:none;line-height:1.25}
.cat i{font-style:normal;display:grid;place-items:center;aspect-ratio:1;border-radius:calc(20px * var(--rad,1));font-size:2rem;margin-bottom:6px;box-shadow:var(--sh);overflow:hidden}
.cat i img{width:100%;height:100%;object-fit:cover}

/* product cards */
.hs{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -14px;padding:2px 14px 8px;scrollbar-width:none}.hs::-webkit-scrollbar{display:none}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.p{min-width:146px;background:var(--card);border-radius:calc(18px * var(--rad,1));padding:10px;scroll-snap-align:start;border:1px solid var(--ln);box-shadow:var(--sh);text-decoration:none;display:block}
.p .im{height:100px;border-radius:calc(14px * var(--rad,1));background:var(--p2);display:grid;place-items:center;font-size:3.2rem;position:relative;overflow:hidden}
.p .im img{width:100%;height:100%;object-fit:contain;background:#fff}
.off{position:absolute;top:6px;left:6px;background:var(--p);color:#fff;font-size:.66rem;font-weight:700;padding:1px 7px;border-radius:7px}
.p h3{font-size:.95rem;margin-top:7px}.p small{color:var(--mu);font-size:.76rem;display:block}
.pr{margin-top:4px;font-weight:800;color:var(--price)}.pr s{color:var(--mu);font-weight:400;font-size:.76rem;margin-left:5px}.pr.big{font-size:1.5rem;margin:6px 0 12px}
.search{display:flex;align-items:center;gap:8px;background:var(--card);border:1.5px solid var(--ln);border-radius:calc(14px * var(--rad,1));padding:10px 12px;margin-bottom:12px;color:var(--mu)}
.search input{border:0;outline:0;flex:1;font:inherit;background:none;color:var(--tx)}
.pills{display:flex;gap:8px;overflow-x:auto;margin:0 -14px 14px;padding:0 14px;scrollbar-width:none}.pills::-webkit-scrollbar{display:none}
.pills a{white-space:nowrap;padding:6px 13px;border-radius:calc(20px * var(--rad,1));background:var(--card);border:1px solid var(--ln);text-decoration:none;font-size:.85rem;font-weight:600}
.pills a.on{background:var(--p);color:#fff;border-color:var(--p)}
.empty{text-align:center;padding:40px 10px;color:var(--mu)}.empty a{color:var(--p);font-weight:700}
.crumb{font-size:.8rem;color:var(--mu);margin-bottom:10px}.crumb a{text-decoration:none;color:var(--p)}
.pdi{height:260px;background:var(--p2);border-radius:calc(22px * var(--rad,1));display:grid;place-items:center;font-size:8rem;position:relative;overflow:hidden;margin-bottom:14px}
.pdi img{width:100%;height:100%;object-fit:contain;background:#fff}
.pd h1{font-size:1.6rem}.meta{color:var(--mu)}
.cb2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.btn-p,.btn-wa{display:flex;align-items:center;justify-content:center;gap:6px;padding:12px 16px;border-radius:calc(14px * var(--rad,1));font:700 1rem var(--fb),sans-serif;text-decoration:none;border:0;cursor:pointer;color:var(--btx);background:var(--p)}
.btn-wa{background:var(--ok)}
.prose{font-size:1rem}.prose h2{font-size:1.3rem;margin:14px 0 6px}.prose h3{font-size:1.1rem;margin:12px 0 4px;color:var(--p)}
.prose p,.prose ul,.prose ol{margin-bottom:10px}.prose ul,.prose ol{padding-left:22px}.prose img{border-radius:12px;margin:10px 0}.prose a{color:var(--p)}
.banner{width:100%;height:200px;object-fit:cover;border-radius:calc(20px * var(--rad,1));margin-bottom:14px}

/* brands, festival, list, loyalty */
.brands{display:flex;gap:8px;overflow-x:auto;margin:0 -14px;padding:0 14px 4px;scrollbar-width:none}.brands::-webkit-scrollbar{display:none}
.brand-i{white-space:nowrap;background:var(--card);border:1px solid var(--ln);padding:8px 14px;border-radius:12px;font-weight:700;font-size:.88rem;color:var(--mu);text-decoration:none;display:grid;place-items:center;min-height:46px}
.brand-i img{height:30px;width:auto}
.fest{background:linear-gradient(130deg,var(--pd),var(--p) 55%,var(--o));color:#fff;border-radius:calc(22px * var(--rad,1));padding:18px;position:relative;overflow:hidden}
.fest:after{content:attr(data-emoji);position:absolute;right:6px;bottom:-8px;font-size:5.5rem}
.fest h2{font-size:1.35rem}.fest p{font-size:.9rem;opacity:.94;max-width:26ch;margin:4px 0 10px}
.fest .chips span{background:rgba(255,255,255,.2);color:#fff}
.list{background:var(--card);border:1px solid var(--ln);border-radius:calc(22px * var(--rad,1));padding:16px;box-shadow:var(--sh)}
.list h2{font-size:1.25rem}.list small{color:var(--mu);font-size:.84rem}
textarea,input,select{font:inherit;color:var(--tx)}
.list textarea{width:100%;min-height:96px;border:1.5px solid var(--ln);border-radius:calc(14px * var(--rad,1));padding:10px;background:var(--bg);resize:vertical;margin:10px 0}
.list .btn-wa{width:100%}
.loy{display:flex;gap:14px;align-items:center;background:linear-gradient(130deg,var(--board),#45403f);color:#fff;border-radius:calc(22px * var(--rad,1));padding:18px}
.loy .card{min-width:100px;height:64px;border-radius:10px;background:linear-gradient(130deg,var(--p),var(--o));color:#fff;font:800 .74rem/1.15 var(--fh),sans-serif;padding:8px;box-shadow:0 6px 14px rgba(0,0,0,.4);transform:rotate(-6deg)}
.loy b{font-size:1.05rem;display:block}.loy small{opacity:.85;font-size:.84rem}

/* why, rating, testimonials */
.why{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(min-width:760px){body:not(.appmode) .why{grid-template-columns:repeat(4,1fr)}}
.why div{background:var(--card);border:1px solid var(--ln);border-radius:calc(18px * var(--rad,1));padding:14px;box-shadow:var(--sh)}
.why .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:1.3rem;margin-bottom:8px;background:var(--p2)}
.why b{display:block;font-size:.96rem}.why small{color:var(--mu);font-size:.8rem}
.rate{background:var(--card);border:1px solid var(--ln);border-radius:calc(22px * var(--rad,1));padding:18px;display:grid;grid-template-columns:110px 1fr;gap:16px;align-items:center;box-shadow:var(--sh)}
.big{text-align:center}.big b{font:800 3rem/1 var(--fh),sans-serif;color:var(--p)}.big small{display:block;color:var(--mu);font-size:.76rem}
.stars{color:#f5a400;letter-spacing:1px}
.br{display:flex;align-items:center;gap:8px;font-size:.78rem;margin:3px 0;color:var(--mu)}
.br i{flex:1;height:7px;background:var(--ln);border-radius:4px;overflow:hidden}.br i u{display:block;height:100%;background:linear-gradient(90deg,var(--o),var(--p));border-radius:4px}
.gbtn{display:flex;justify-content:center;margin-top:12px;padding:11px;border-radius:calc(14px * var(--rad,1));border:1.5px dashed var(--p);color:var(--p);font-weight:700;text-decoration:none}
.tc{min-width:84%;max-width:380px;background:var(--card);border:1px solid var(--ln);border-radius:calc(20px * var(--rad,1));padding:16px;scroll-snap-align:start;box-shadow:var(--sh);position:relative}
.tc:after{content:"”";position:absolute;right:14px;top:-6px;font:800 4.2rem var(--fh),serif;color:var(--p2)}
.tc p{margin:8px 0 12px;font-size:.94rem}.who{display:flex;gap:10px;align-items:center}
.av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;background:var(--p);object-fit:cover}
.who small{display:block;color:var(--mu);font-size:.75rem;line-height:1.2}

/* blog, faq */
.blog{min-width:70%;max-width:320px;background:var(--card);border:1px solid var(--ln);border-radius:calc(18px * var(--rad,1));overflow:hidden;scroll-snap-align:start;box-shadow:var(--sh);text-decoration:none;display:block}
.blog .bi{height:90px;display:grid;place-items:center;font-size:2.6rem;background:var(--p2);overflow:hidden}.blog .bi img{width:100%;height:100%;object-fit:cover}
.blog>div:last-child{padding:10px 12px}.blog h3{font-size:.98rem}.blog small{color:var(--mu);font-size:.8rem}
.blist{display:grid;gap:12px}.blog.row{display:grid;grid-template-columns:100px 1fr;max-width:none}.blog.row .bi{height:100%;min-height:96px}
.blog.row h2{font-size:1.05rem}.blog.row em{display:block;font-size:.75rem;color:var(--mu);font-style:normal;margin-top:4px}
details{background:var(--card);border:1px solid var(--ln);border-radius:calc(16px * var(--rad,1));margin-bottom:8px;padding:12px 14px}
summary{font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:10px}summary::-webkit-details-marker{display:none}
summary:after{content:"+";color:var(--p);font-size:1.3rem;line-height:1}details[open] summary:after{content:"−"}
details p{color:var(--mu);margin-top:6px;font-size:.93rem}
.share{display:flex;gap:10px;align-items:center;margin-top:12px;font-size:.88rem}.share a{color:var(--p);font-weight:700}

/* inquiry */
.inq label{display:block;font-size:.84rem;font-weight:600;margin-bottom:10px;color:var(--mu)}
.inq input,.inq select,.inq textarea{display:block;width:100%;margin-top:4px;padding:11px 12px;border:1.5px solid var(--ln);border-radius:12px;background:var(--bg);outline:0}
.inq input:focus,.inq select:focus,.inq textarea:focus{border-color:var(--p)}
.inq .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:380px){.inq .row2{grid-template-columns:1fr}}
.inq .btn-p{width:100%}.inq .msg{margin-bottom:8px;font-weight:600}.inq .msg.ok{color:var(--ok)}.inq .msg.err{color:var(--p)}
.hp{position:absolute;left:-9999px;opacity:0;height:0}
.alert{padding:10px 12px;border-radius:12px;margin-bottom:10px;font-weight:600}.alert.ok{background:#e5f8ec;color:#106b2a}.alert.err{background:#ffe5e5;color:#a00}

/* contact */
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ci{background:var(--card);border:1px solid var(--ln);border-radius:calc(18px * var(--rad,1));padding:14px;text-decoration:none;box-shadow:var(--sh)}
.ci i{font-style:normal;font-size:1.6rem;display:block}.ci b{display:block}.ci small{color:var(--mu);font-size:.8rem;word-break:break-all}
.mapbox{margin-top:14px;border-radius:calc(20px * var(--rad,1));overflow:hidden;height:260px;border:1px solid var(--ln)}.mapbox iframe{width:100%;height:100%;border:0}

/* cta + footer */
.cta{margin:26px 14px 0;border-radius:calc(24px * var(--rad,1));padding:22px;background:linear-gradient(130deg,var(--p),var(--pd));color:#fff;position:relative;overflow:hidden}
.cta:after{content:"🛒";position:absolute;right:-10px;bottom:-20px;font-size:7rem;opacity:.15}
.cta h2{font-size:1.5rem}.cta p{opacity:.92;font-size:.9rem;margin:4px 0 10px}.cta .addr{font-size:.86rem}
.cb{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:relative;z-index:1}
.cb a{display:flex;align-items:center;justify-content:center;gap:6px;padding:12px;border-radius:calc(14px * var(--rad,1));font-weight:700;text-decoration:none}
.cb .c{background:#fff;color:var(--p)}.cb .w{background:var(--ok);color:#fff}
.map{display:flex;justify-content:center;margin-top:10px;padding:11px;border-radius:calc(14px * var(--rad,1));background:rgba(255,255,255,.15);color:#fff;text-decoration:none;font-weight:600;position:relative;z-index:1}
.foot{margin-top:28px;background:var(--fbg);color:var(--ftx);padding:26px 16px 14px;border-radius:24px 24px 0 0;font-size:.88rem}
.fbrand{text-align:center;margin-bottom:16px}.fbrand b{font:800 1.3rem var(--fh),sans-serif;color:var(--hdrtx);text-shadow:var(--glow)}.fbrand .logo-img{margin:0 auto 6px}
.fcols{display:grid;grid-template-columns:1.2fr 1fr;gap:16px}
@media(max-width:400px){.fcols{grid-template-columns:1fr}}
.foot h3{color:#fff;font-size:1rem;margin-bottom:6px}.foot p{margin-bottom:5px}.foot ul{list-style:none}.foot li{margin:3px 0}
.foot a{color:var(--ftx);font-weight:600;text-decoration:none}.foot a:hover{color:#ff6b6f}
.social{display:flex;justify-content:center;gap:14px;margin-top:14px;flex-wrap:wrap}.social a{font-weight:700}
.copy{text-align:center;margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.12);font-size:.76rem;opacity:.8}

/* bottom nav */
.bnav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:560px;z-index:40;background:var(--navbg);border-top:1px solid var(--ln);display:flex;justify-content:space-around;align-items:flex-end;padding:6px 6px calc(8px + env(safe-area-inset-bottom,0px));box-shadow:0 -6px 20px rgba(0,0,0,.07);border-radius:20px 20px 0 0}
body:not(.appmode) .bnav{max-width:1100px}
.bnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.7rem;font-weight:600;color:var(--mu);text-decoration:none;padding-top:4px}
.bnav a.on{color:var(--nava)}
.bnav .mid{margin-top:-28px}
.bnav .mid span{width:58px;height:58px;border-radius:50%;background:var(--p);color:#fff;display:grid;place-items:center;box-shadow:0 6px 18px color-mix(in srgb,var(--p) 50%,transparent);border:4px solid var(--card);animation:ring 2.6s infinite}
@keyframes ring{0%,80%,100%{transform:rotate(0)}84%{transform:rotate(-12deg)}88%{transform:rotate(12deg)}92%{transform:rotate(-8deg)}}
@media (prefers-reduced-motion:reduce){.bnav .mid span{animation:none}.track{transition:none}}
.fwa{position:fixed;right:16px;bottom:calc(90px + env(safe-area-inset-bottom,0px));width:52px;height:52px;border-radius:50%;background:var(--ok);display:grid;place-items:center;font-size:1.5rem;text-decoration:none;z-index:41;box-shadow:0 6px 16px rgba(0,0,0,.25)}
.inst{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(86px + env(safe-area-inset-bottom,0px));width:calc(100% - 24px);max-width:536px;background:var(--card);border:1px solid var(--ln);border-radius:calc(18px * var(--rad,1));padding:10px 12px;display:none;align-items:center;gap:10px;box-shadow:0 10px 30px rgba(0,0,0,.2);z-index:45}
.inst.show{display:flex}.inst b{display:block;font-size:.9rem}.inst small{color:var(--mu);font-size:.76rem}
.inst button{border:0;border-radius:10px;font:700 .85rem var(--fb),sans-serif;padding:8px 12px;cursor:pointer}.inst .y{background:var(--p);color:#fff;margin-left:auto}.inst .n{background:none;color:var(--mu)}
.dev{text-align:center;font-size:.72rem;opacity:.75;margin-top:6px}.dev a{font-weight:700}

/* ================= DESKTOP / LAPTOP ================= */
.dnav,.dcall,.fabout{display:none}
@media (min-width:768px){
  body:not(.appmode) .sec{padding:34px 24px 6px}
  body:not(.appmode) .cats{grid-template-columns:repeat(8,1fr)}
  body:not(.appmode) .grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
}
@media (min-width:992px){
  body:not(.appmode){background:var(--bg)}
  body:not(.appmode) .app{max-width:none;padding-bottom:0}
  body:not(.appmode) .bnav{display:none}
  body:not(.appmode) .inst{bottom:20px;left:auto;right:20px;transform:none;width:360px}
  body:not(.appmode) .fwa{bottom:24px}
  body:not(.appmode) main>*,body:not(.appmode) .stats{max-width:1240px;margin-left:auto;margin-right:auto}
  body:not(.appmode) main>.hero{max-width:none}
  body:not(.appmode) .announce{font-size:.9rem}

  /* header */
  body:not(.appmode) .top{padding:12px max(24px,calc((100% - 1240px)/2 + 24px));gap:14px}
  body:not(.appmode) .brand{margin-right:0}
  body:not(.appmode) .bt b{font-size:1.5rem}
  body:not(.appmode) .logo{width:50px;height:50px}
  body:not(.appmode) .dnav{display:flex;gap:4px;margin:0 auto}
  body:not(.appmode) .dnav a{color:#eee;text-decoration:none;font-weight:600;padding:8px 13px;border-radius:calc(10px * var(--rad,1));white-space:nowrap;transition:.2s}
  body:not(.appmode) .dnav a:hover{background:rgba(255,255,255,.1);color:#fff}
  body:not(.appmode) .dnav a.on{background:var(--p);color:var(--btx)}
  body:not(.appmode) .dcall{display:inline-flex;align-items:center;gap:6px;background:var(--p);color:var(--btx);padding:9px 16px;border-radius:calc(12px * var(--rad,1));font-weight:700;text-decoration:none;white-space:nowrap}
  body:not(.appmode) .top>a.hbtn[href*="products"]{display:none}

  /* hero */
  body:not(.appmode) .hero{padding:24px max(24px,calc((100% - 1240px)/2 + 24px)) 56px;border-radius:0 0 calc(40px * var(--rad,1)) calc(40px * var(--rad,1));background:linear-gradient(180deg,var(--board) 0,var(--board) 38%,var(--p) 38.1%,var(--pd))}
  body:not(.appmode) .greet{font-size:1.15rem;margin-bottom:16px}
  body:not(.appmode) .slide{height:460px}
  body:not(.appmode) .sc{padding:44px 48px;max-width:60%}
  body:not(.appmode) .slide h2{font-size:3rem}
  body:not(.appmode) .slide p{font-size:1.15rem}
  body:not(.appmode) .sbtn{padding:11px 24px;font-size:1rem;margin-top:16px}
  body:not(.appmode) .slide .em{font-size:15rem;right:40px}
  body:not(.appmode) .stats{margin-top:-34px;padding:0 24px;gap:18px}
  body:not(.appmode) .stats div{padding:20px}
  body:not(.appmode) .stats b{font-size:2rem}
  body:not(.appmode) .stats small{font-size:.9rem}
  body:not(.appmode) .wa{margin:24px auto 0;max-width:1192px;padding:16px 22px}

  /* section headings */
  body:not(.appmode) .sec{padding:48px 24px 8px}
  body:not(.appmode) .sh{margin-bottom:20px}
  body:not(.appmode) .sh h2{font-size:1.9rem}
  body:not(.appmode) .ph{font-size:2.2rem}

  /* about: two columns */
  body:not(.appmode) .about{display:grid;grid-template-columns:1fr 1.1fr;align-items:stretch}
  body:not(.appmode) .aimg{height:auto;min-height:340px}
  body:not(.appmode) .ab{padding:32px;font-size:1.05rem;align-self:center}

  /* gallery */
  body:not(.appmode) .gal{grid-template-rows:200px 200px}

  /* horizontal scrollers become grids */
  body:not(.appmode) .hs{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));overflow:visible;margin:0;padding:0;gap:18px}
  body:not(.appmode) .hs .p{min-width:0}
  body:not(.appmode) .p{padding:14px;transition:transform .2s,box-shadow .2s}
  body:not(.appmode) .p:hover,body:not(.appmode) .blog:hover,body:not(.appmode) .cat:hover i{transform:translateY(-4px);box-shadow:0 14px 30px rgba(0,0,0,.1)}
  body:not(.appmode) .cat i{transition:.2s}
  body:not(.appmode) .p .im{height:150px;font-size:4.2rem}
  body:not(.appmode) .p h3{font-size:1.05rem}
  body:not(.appmode) .hs .tc{min-width:0;max-width:none}
  body:not(.appmode) .duo.rt .hs{grid-template-columns:1fr 1fr}
  body:not(.appmode) .hs .blog{min-width:0;max-width:none;transition:.2s}
  body:not(.appmode) .blog .bi{height:150px}
  body:not(.appmode) .cats{gap:22px 16px}
  body:not(.appmode) .cat{font-size:.92rem}
  body:not(.appmode) .brands{flex-wrap:wrap;overflow:visible;margin:0;padding:0;gap:12px}
  body:not(.appmode) .brand-i{padding:12px 22px;font-size:1rem}

  /* two-column pairs */
  body:not(.appmode) .duo{display:grid;grid-template-columns:1fr 1fr;gap:0 8px;align-items:start}
  body:not(.appmode) .duo.rt{grid-template-columns:1fr 2fr}
  body:not(.appmode) .loysec{align-self:stretch}
  body:not(.appmode) .loysec .loy{height:100%;min-height:220px;padding:30px}
  body:not(.appmode) .fest{padding:36px 40px}
  body:not(.appmode) .fest h2{font-size:2rem}.fest p{font-size:1rem}
  body:not(.appmode) .fest:after{font-size:9rem;right:40px}
  body:not(.appmode) .why{grid-template-columns:repeat(4,1fr);gap:18px}
  body:not(.appmode) .why div{padding:22px}
  body:not(.appmode) .rate{grid-template-columns:1fr;text-align:left}
  body:not(.appmode) .big b{font-size:4rem}

  /* CTA */
  body:not(.appmode) .cta{max-width:1192px;margin:56px auto 0;padding:44px 48px;display:grid;grid-template-columns:1.3fr 1fr;gap:10px 40px;align-items:center}
  body:not(.appmode) .cta h2{font-size:2.3rem;grid-column:1}
  body:not(.appmode) .cta>p{grid-column:1}
  body:not(.appmode) .cta .cb{grid-column:2;grid-row:1 / span 2}
  body:not(.appmode) .cta .map{grid-column:2}
  body:not(.appmode) .cta:after{font-size:12rem}

  /* inner pages */
  body:not(.appmode) .is-inner>.sec{max-width:1000px}
  body:not(.appmode) .banner{height:360px}
  body:not(.appmode) .pd{display:grid;grid-template-columns:1fr 1fr;gap:12px 36px;align-items:start}
  body:not(.appmode) .pd .pdi{grid-row:1 / span 6;height:440px}
  body:not(.appmode) .contactp{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;align-items:start;max-width:1240px!important}
  body:not(.appmode) .contactp>.ph{grid-column:1/-1}
  body:not(.appmode) .contactp>#inquiry{grid-column:2;grid-row:2 / span 3;margin-top:0!important}
  body:not(.appmode) .contactp .mapbox{height:320px}
  body:not(.appmode) .blist{grid-template-columns:1fr 1fr}
  body:not(.appmode) .ggrid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
  body:not(.appmode) .prose{font-size:1.06rem;line-height:1.75}

  /* footer */
  body:not(.appmode) .foot{margin-top:64px;border-radius:0;padding:48px max(24px,calc((100% - 1240px)/2 + 24px)) 20px}
  body:not(.appmode) .fbrand{display:none}
  body:not(.appmode) .fabout{display:block}
  body:not(.appmode) .fabout h3{font:800 1.5rem var(--fh),sans-serif;color:var(--hdrtx);text-shadow:var(--glow)}
  body:not(.appmode) .fopen{display:flex;align-items:center;gap:6px;margin-top:10px}
  body:not(.appmode) .fcols{grid-template-columns:1.2fr 1.3fr 1fr;gap:40px}
  body:not(.appmode) .foot h3{font-size:1.15rem;margin-bottom:12px}
  body:not(.appmode) .social{justify-content:flex-start;margin-top:22px}
  body:not(.appmode) .copy,body:not(.appmode) .dev{text-align:left}
  body:not(.appmode) .copy{display:inline-block;border:0;margin-top:20px}
}
@media (min-width:992px) and (max-width:1180px){
  body:not(.appmode) .dnav a{padding:8px 9px;font-size:.92rem}
  body:not(.appmode) .dcall{font-size:0;padding:10px 12px}body:not(.appmode) .dcall:first-letter{font-size:1rem}
}

/* Android gesture/3-button bar fix */
.bnav{padding-bottom:max(14px,calc(10px + env(safe-area-inset-bottom,0px)))}
.app{padding-bottom:calc(104px + env(safe-area-inset-bottom,0px))}
@media (min-width:992px){body:not(.appmode) .app{padding-bottom:0}}

/* ===== App install ===== */
.inst{z-index:45;animation:instup .4s cubic-bezier(.3,.8,.3,1)}
@keyframes instup{from{transform:translate(-50%,30px);opacity:0}}
.inst-ic{width:44px;height:44px;border-radius:12px;flex:none}
.appbtn{display:flex;align-items:center;gap:12px;margin:16px auto 4px;background:var(--p);color:var(--btx);border:0;border-radius:calc(16px * var(--rad,1));padding:12px 18px;cursor:pointer;font:inherit;text-align:left;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.appbtn[hidden]{display:none}.appbtn>span:first-child{font-size:1.6rem}.appbtn b{display:block}.appbtn small{opacity:.85;font-size:.78rem}
.ihelp{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.55);display:flex;align-items:flex-end;justify-content:center}
.ihelp[hidden]{display:none}
.ihelp-in{background:var(--card);color:var(--tx);width:100%;max-width:480px;border-radius:24px 24px 0 0;padding:24px 22px calc(24px + env(safe-area-inset-bottom,0px));text-align:center;position:relative}
.ihelp-in img{border-radius:16px;margin:0 auto 8px}.ihelp-in h3{margin-bottom:10px}.ihelp-in p{text-align:left;margin:8px 0;padding:10px 12px;background:var(--bg);border-radius:12px}
.ihelp-in .n{position:absolute;right:14px;top:12px;background:none;border:0;font-size:1.2rem;color:var(--mu);cursor:pointer}
@media (min-width:992px){.ihelp{align-items:center}.ihelp-in{border-radius:24px}}