/* JhotpotCart V16 design system — "Circuit Paper": warm paper canvas, navy ink, electric blue + amber from the logo */
:root{--ink:#0a2342;--ink2:#2b3d5c;--blue:#0879ff;--blue2:#004fc7;--amber:#ffb300;--orange:#ff7a00;--bg:#f4f1ea;--card:#fff;--line:#e7e2d6;--soft:#eef3fb;--muted:#6b7690;--ok:#12a150;--warn:#d97706;--bad:#dc2626;--r:20px;--r2:12px;--sh:0 1px 2px #0a234310,0 8px 24px -10px #0a234322;--sh2:0 2px 4px #0a23431a,0 22px 44px -18px #0a234350;--ease:cubic-bezier(.2,.8,.2,1);--disp:"Sora","Hind Siliguri",system-ui,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Manrope","Hind Siliguri",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}h1,h2,h3{font-family:var(--disp);letter-spacing:-.02em;line-height:1.15}img{max-width:100%}
.wrap{max-width:1240px;margin:auto;padding:0 20px}.muted{color:var(--muted);font-size:13px}.hide{display:none!important}.out{color:var(--bad)}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:12px;padding:11px 18px;background:linear-gradient(180deg,var(--blue),var(--blue2));color:#fff;font:800 14px/1 inherit;cursor:pointer;box-shadow:0 6px 16px -6px #0879ff99;transition:transform .18s var(--ease),box-shadow .18s,filter .18s}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 22px -8px #0879ffaa;filter:brightness(1.05)}.btn:active{transform:translateY(0) scale(.97)}
.btn.alt{background:var(--soft);color:var(--blue2);box-shadow:none}.btn.alt:hover{background:#e2ecfb}.btn.amber{background:linear-gradient(180deg,var(--amber),var(--orange));color:#2a1700;box-shadow:0 6px 16px -6px #ff7a00aa}
.btn.red,.red{background:#fee2e2;color:var(--bad);box-shadow:none}.btn.sm{padding:8px 12px;font-size:13px;border-radius:10px}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}.btn.full{width:100%}
.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.cat:focus-visible{outline:3px solid #0879ff55;outline-offset:2px}
/* inputs */
label{display:block;font-size:12px;font-weight:800;color:var(--ink2);letter-spacing:.02em}
.form input,.form textarea,.form select,.field input,.field textarea,.field select,.login input,.tool input,.tool select,#payMethod{width:100%;margin:6px 0 12px;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--r2);background:#fff;font:600 14px inherit;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.form input:focus,.form textarea:focus,.field input:focus,.field select:focus,.field textarea:focus,.login input:focus,.tool input:focus,.tool select:focus{border-color:var(--blue);box-shadow:0 0 0 4px #0879ff22;outline:0}
/* status badges */
.st{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:99px;font-size:12px;font-weight:800;white-space:nowrap}.st:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.st-pending{background:#fff4d6;color:#a16207}.st-approved{background:#dcebff;color:var(--blue2)}.st-rejected{background:#fee2e2;color:var(--bad)}.st-completed{background:#dcf7e6;color:#0f7a3c}
/* header */
.top{background:var(--ink);color:#c9d6ee;font-size:12px}.top .wrap{display:flex;justify-content:space-between;padding:7px 20px}
.support24{display:inline-flex;gap:8px;align-items:center;font-weight:800}.support24:before{content:"";width:8px;height:8px;border-radius:50%;background:#35e58b;box-shadow:0 0 0 4px #35e58b30;animation:pulse 2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 7px #35e58b00}}
header{position:sticky;top:0;z-index:50;background:#f4f1eacc;backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--line)}
.head{display:flex;align-items:center;gap:14px;padding:12px 20px}.brand{display:inline-flex}.brand img{height:44px;width:auto;display:block}
.search{flex:1;display:flex;background:#fff;border:1.5px solid var(--line);border-radius:14px;overflow:hidden;transition:.2s}.search:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px #0879ff22}
.search input{flex:1;min-width:0;border:0;padding:12px 16px;font:600 14px inherit;background:transparent;outline:0}.search button{border:0;background:var(--ink);color:#fff;padding:0 20px;font-weight:800;cursor:pointer;transition:background .2s}.search button:hover{background:var(--blue2)}
.hnav{display:flex;gap:4px}.hbtn,.headbtn{border:0;background:transparent;border-radius:12px;padding:10px 13px;font:800 13px inherit;color:var(--ink2);cursor:pointer;white-space:nowrap;transition:.18s}.hbtn:hover,.headbtn:hover{background:#fff;box-shadow:var(--sh)}
.headbtn{background:var(--ink);color:#fff;margin-left:auto}.headbtn:hover{background:var(--blue2)}#count{background:var(--amber);color:#2a1700;border-radius:99px;padding:1px 8px;margin-left:3px}
/* hero */
.hero{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;margin:22px 0}
.heroMain{position:relative;overflow:hidden;border-radius:28px;padding:44px;min-height:300px;color:#fff;background:radial-gradient(circle at 85% 15%,#0879ff88,transparent 45%),linear-gradient(135deg,#0a2342,#0b3b86);animation:rise .6s var(--ease) both}
.heroMain:before{content:"";position:absolute;inset:0;background-image:linear-gradient(#ffffff0d 1px,transparent 1px),linear-gradient(90deg,#ffffff0d 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(120deg,transparent 30%,#000);-webkit-mask-image:linear-gradient(120deg,transparent 30%,#000)}
.heroMain>*{position:relative}.eyebrow{display:inline-block;font:800 11px var(--disp);letter-spacing:.18em;color:var(--amber);margin-bottom:12px}.heroMain h1{font-size:clamp(30px,4.4vw,54px);margin:0 0 12px;max-width:560px}.heroMain p{color:#c9d9f5;max-width:520px;margin:0 0 22px}
.heroSide{display:grid;gap:12px;animation:rise .6s .08s var(--ease) both}.benefit{display:flex;gap:12px;align-items:center;padding:15px 18px;background:#fff;border:1px solid var(--line);border-radius:18px;font-weight:700;font-size:14px;transition:.2s}.benefit:hover{transform:translateX(4px);box-shadow:var(--sh)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
/* sections & categories */
.section{margin:30px 0}.sectionHead{display:flex;align-items:end;justify-content:space-between;gap:10px;margin-bottom:14px}.sectionHead h2{margin:0;font-size:24px}
.cats{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 12px;scrollbar-width:thin}.cat{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:10px 16px;background:#fff;border:1.5px solid var(--line);border-radius:99px;font:800 13px inherit;color:var(--ink2);cursor:pointer;transition:.18s var(--ease);white-space:nowrap}
.cat .ico{font-size:17px;margin:0}.cat:hover{transform:translateY(-2px);border-color:var(--blue);box-shadow:var(--sh)}.cat.active{background:var(--ink);border-color:var(--ink);color:#fff}
/* product card */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:10px;box-shadow:var(--sh);transition:transform .25s var(--ease),box-shadow .25s;animation:rise .45s var(--ease) both}.card:hover{transform:translateY(-6px);box-shadow:var(--sh2)}
.pic{position:relative;height:200px;border-radius:14px;background:radial-gradient(#0a234314 1px,transparent 1.4px) 0 0/14px 14px,linear-gradient(180deg,#f3f6fc,#e9eff9);display:grid;place-items:center;overflow:hidden}
.pic img{width:88%;height:88%;object-fit:contain;transition:transform .4s var(--ease)}.card:hover .pic img{transform:scale(1.07) rotate(-1deg)}.placeholder{font-size:64px}
.pill{position:absolute;top:10px;left:10px;background:#fff;color:var(--ink2);font:800 10.5px inherit;padding:5px 10px;border-radius:99px;box-shadow:var(--sh);max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.badge{position:absolute;top:10px;right:10px;padding:5px 10px;border-radius:99px;font:800 10.5px inherit;background:#dcf7e6;color:#0f7a3c}.badge.low{background:#fff4d6;color:#a16207}.badge.none{background:#fee2e2;color:var(--bad)}
.cbody{padding:12px 6px 4px;display:flex;flex-direction:column;flex:1}.brandline{font:800 11px inherit;color:var(--blue2);letter-spacing:.08em;text-transform:uppercase;min-height:15px}
.card h3{font-size:15px;line-height:1.35;margin:4px 0 4px;min-height:41px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.price{font:800 22px var(--disp);margin:8px 0 6px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}.old{text-decoration:line-through;color:#98a1b5;font:600 12px "Manrope",sans-serif}.off{font:800 11px "Manrope",sans-serif;background:var(--amber);color:#2a1700;padding:2px 7px;border-radius:6px}
.meter{height:5px;border-radius:9px;background:#e9edf5;overflow:hidden;margin:2px 0 6px}.meter i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,#35e58b,var(--ok))}.meter.low i{background:linear-gradient(90deg,var(--amber),var(--orange))}
.stock{font-size:12px;color:var(--ok);font-weight:800}.stock.out{color:var(--bad)}.actions{display:flex;gap:8px;margin-top:auto;padding-top:10px}.actions .btn{flex:1;padding:11px 8px;font-size:13px}
/* skeleton / empty / error */
.sk{position:relative;overflow:hidden;background:#e8e4d9;border-radius:10px}.sk:after,.skcard:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,#ffffffa0 50%,transparent 70%);transform:translateX(-100%);animation:shim 1.3s infinite}@keyframes shim{to{transform:translateX(100%)}}
.skcard{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:10px}.skcard .sk{margin-bottom:10px}
.state{grid-column:1/-1;text-align:center;padding:48px 20px;background:#fff;border:1.5px dashed #d6d0c0;border-radius:var(--r)}.state .big{font-size:44px}.state h3{margin:8px 0 4px}.state p{margin:0 0 14px;color:var(--muted)}.state.err{border-color:#f5b5b5;background:#fff7f7}
/* drawer & checkout */
.shade{position:fixed;inset:0;background:#0a234388;backdrop-filter:blur(3px);z-index:205;opacity:0;pointer-events:none;transition:opacity .25s}.shade.open{opacity:1;pointer-events:auto;display:block}
.drawer{position:fixed;right:0;top:0;height:100%;width:min(480px,100vw);z-index:210;background:var(--bg);padding:20px;overflow:auto;transform:translateX(105%);transition:transform .35s var(--ease),box-shadow .35s}.drawer.open{transform:none;box-shadow:-20px 0 60px #0a234340}
.drawer h2{margin:0 0 14px;font-size:22px}.close{position:absolute;right:16px;top:16px;border:0;background:#fff;border-radius:50%;width:38px;height:38px;font-size:20px;cursor:pointer;box-shadow:var(--sh);transition:.2s;z-index:3}.close:hover{transform:rotate(90deg)}
.box .close{position:sticky;float:right;top:0}.sec{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;margin-bottom:14px}.sec h3{margin:0 0 10px;font-size:15px;display:flex;gap:8px;align-items:center}.sec h3 b{background:var(--ink);color:#fff;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11px}
.item{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid #f0ece0}.item:last-child{border:0}.item img,.item .ph{width:52px;height:52px;border-radius:10px;object-fit:contain;background:var(--soft);display:grid;place-items:center}.grow{flex:1;min-width:0;font-size:13px}.grow b{display:block;font-size:14px}
.qty{display:flex;align-items:center;gap:6px;font-weight:800}.qty button{width:30px;height:30px;border:0;border-radius:9px;background:var(--soft);font-weight:900;cursor:pointer;color:var(--blue2);transition:.15s}.qty button:hover{background:#dbe7fb}.qty button:active{transform:scale(.9)}
.totals{display:flex;justify-content:space-between;font-size:14px;padding:4px 0}.totals.big{font:800 20px var(--disp);border-top:1px dashed var(--line);margin-top:6px;padding-top:12px}
.paycards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}.pc{border:1.5px solid var(--line);background:#fff;border-radius:14px;padding:12px 6px;text-align:center;font:800 13px inherit;cursor:pointer;transition:.18s var(--ease);color:var(--ink2)}.pc i{display:block;font-style:normal;font-size:22px;margin-bottom:4px}.pc:hover{transform:translateY(-2px)}
.pc.on{border-color:var(--blue);background:var(--soft);color:var(--blue2);box-shadow:0 0 0 3px #0879ff22}.pc.on.bkash{border-color:#e2136e;background:#fff0f7;color:#c20d5c;box-shadow:0 0 0 3px #e2136e22}.pc.on.nagad{border-color:#f26a21;background:#fff3ea;color:#c4500f;box-shadow:0 0 0 3px #f26a2122}
.paybox{border-radius:16px;padding:14px;margin-bottom:6px;background:linear-gradient(135deg,#0a2342,#12398a);color:#fff}.paybox.bkash{background:linear-gradient(135deg,#a80e55,#e2136e)}.paybox.nagad{background:linear-gradient(135deg,#c4500f,#f26a21)}
.paybox .num{display:flex;align-items:center;justify-content:space-between;font:800 21px var(--disp);letter-spacing:.04em;margin:4px 0}.paybox small{opacity:.85}.copy{border:0;background:#ffffff30;color:#fff;border-radius:9px;padding:7px 12px;font:800 12px inherit;cursor:pointer}.copy:active{transform:scale(.94)}
#trxId{font:800 18px ui-monospace,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;text-align:center;border-style:dashed;border-width:2px;background:#fffdf5}#trxId.bad{border-color:var(--bad);background:#fff7f7}
.msg{font-weight:700;font-size:13px;margin:10px 0 0;min-height:18px}.msg.ok{color:var(--ok)}.msg.bad{color:var(--bad)}
/* modals as pages */
.modal{position:fixed;inset:0;display:none;z-index:100}.modal.open{display:block}.modal .box{background:var(--bg)}
.modal.open.page{display:block;inset:0 0 0 0;background:var(--bg);overflow:auto;animation:pagein .35s var(--ease)}@keyframes pagein{from{opacity:0;transform:translateY(18px)}}
.modal.page .box{max-width:1100px;margin:0 auto;padding:24px 20px 100px;min-height:100%}.modal .box h2{margin:0 0 6px}
#detailModal,#orderModal{z-index:230;background:#0a234388;backdrop-filter:blur(4px);overflow:auto;padding:20px 12px}#detailModal.open,#orderModal.open{display:block;animation:fade .25s}@keyframes fade{from{opacity:0}}
#detailModal .box,#orderModal .box{background:#fff;max-width:920px;margin:20px auto;border-radius:26px;padding:26px;box-shadow:var(--sh2);animation:rise .35s var(--ease)}#orderModal .box{max-width:640px;background:var(--bg)}
.detailGrid{display:grid;grid-template-columns:.95fr 1.05fr;gap:28px}.detailImg{min-height:340px;border-radius:20px;background:radial-gradient(#0a234314 1px,transparent 1.4px) 0 0/14px 14px,#eef3fb;display:grid;place-items:center}.detailImg img{max-height:340px;object-fit:contain}
.specs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0}.spec{background:var(--bg);padding:10px 12px;border-radius:12px}.spec b{display:block;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.spec span{font-weight:800;font-size:14px}
.categorySheet{display:flex;flex-wrap:wrap;gap:8px}.categorySheet button{padding:9px 14px;border:1.5px solid var(--line);background:#fff;border-radius:99px;font:800 13px inherit;cursor:pointer;transition:.18s}.categorySheet button:hover{border-color:var(--blue);color:var(--blue2)}
.categoryProductsHead{display:flex;justify-content:space-between;align-items:center;margin:24px 0 12px;padding-top:16px;border-top:1px solid var(--line)}.categoryProductsHead h3{margin:0}
/* profile */
.tabs{display:flex;gap:8px;margin:14px 0}.tabs .btn{flex:1}
.pHero{display:flex;gap:18px;align-items:center;flex-wrap:wrap;padding:26px;border-radius:26px;color:#fff;background:radial-gradient(circle at 90% 0,#ffb30066,transparent 40%),linear-gradient(135deg,#0a2342,#0b3b86);margin:6px 0 16px}.pHero h2{margin:0;color:#fff}.pHero p{margin:2px 0 0;color:#c9d9f5}
.avatar{width:76px;height:76px;border-radius:24px;background:linear-gradient(135deg,var(--amber),var(--orange));color:#2a1700;display:grid;place-items:center;font:800 32px var(--disp);overflow:hidden;flex:none}.avatar img{width:100%;height:100%;object-fit:cover}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}.stat{background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px;box-shadow:var(--sh)}.stat b{display:block;font:800 22px var(--disp)}.stat span{font-size:12px;color:var(--muted);font-weight:700}
.profileActions{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}.profileBox{background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px}.profileBox h3{margin-top:0}.profileBox p{margin:8px 0}.profileHero{text-align:center;padding:10px 0}.profileHero img{width:200px;max-width:70%}
.prow{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #f0ece0;font-size:14px}.prow:last-child{border:0}.prow span{color:var(--muted);font-weight:700}.prow b{text-align:right}
/* orders list */
.history{display:flex;gap:14px;align-items:center;justify-content:space-between;background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;margin:10px 0;box-shadow:var(--sh);transition:.2s var(--ease);cursor:pointer;animation:rise .4s var(--ease) both}.history:hover{transform:translateY(-3px);box-shadow:var(--sh2)}.history .hl{min-width:0}.history .hl b{font-family:var(--disp)}.history small{display:block;color:var(--muted);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.history .hr{text-align:right;display:grid;gap:6px;justify-items:end;flex:none}.history .hr b{font:800 18px var(--disp)}
.osec{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;margin-bottom:12px}.osec h4{margin:0 0 8px;font:800 11px inherit;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.trxbox{font:800 20px ui-monospace,Menlo,monospace;letter-spacing:.14em;text-align:center;padding:14px;border:2px dashed #cbd5e8;background:#fffdf5;border-radius:14px;word-break:break-all}
.timeline{display:flex;gap:6px;margin-top:10px}.timeline i{flex:1;height:6px;border-radius:9px;background:#e6e1d4}.timeline i.on{background:var(--blue)}.timeline.rej i.on{background:var(--bad)}
/* toast & float */
.toast{position:fixed;bottom:90px;left:50%;transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:12px 18px;border-radius:14px;opacity:0;pointer-events:none;z-index:400;font-weight:700;box-shadow:var(--sh2);transition:.3s var(--ease);display:block!important;max-width:90vw}.toast.show{opacity:1;transform:translate(-50%,0)}.toast.bad{background:var(--bad)}
.waFloat{position:fixed;right:18px;bottom:22px;width:54px;height:54px;border-radius:18px;display:grid;place-items:center;background:#25d366;color:#fff;font-size:24px;box-shadow:0 10px 26px -6px #25d366aa;z-index:50;transition:.2s}.waFloat:hover{transform:scale(1.08) rotate(-6deg)}
footer{background:var(--ink);color:#c9d6ee;margin-top:50px}.foot{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px;padding:40px 20px}.foot h3{color:#fff;font-size:15px}.foot p,.foot a,.footLink{font-size:13px;display:block;margin:8px 0}.footLink{border:0;background:none;color:#c9d6ee;padding:0;cursor:pointer;text-align:left;font-family:inherit}.footLink:hover,.foot a:hover{color:var(--amber)}
.footerBottom{border-top:1px solid #ffffff1a;padding:16px 20px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12px;max-width:1240px;margin:auto}
/* bottom nav (mobile) */
.bottomNav{display:none;position:fixed;left:10px;right:10px;bottom:10px;height:62px;background:#0a2342f2;backdrop-filter:blur(12px);border-radius:22px;grid-template-columns:repeat(4,1fr);z-index:120;box-shadow:0 14px 34px -8px #0a234399}
.bottomNav button{border:0;background:transparent;color:#9fb3d6;font:800 10.5px inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;border-radius:18px;margin:5px;transition:.2s}.bottomNav .bnIcon{font-size:19px}.bottomNav button.active{color:#fff;background:#ffffff1c}.bottomNav button:active{transform:scale(.93)}
/* admin */
.bar{display:flex;justify-content:space-between;align-items:center;gap:10px}.headA{background:var(--ink);color:#fff;position:sticky;top:0;z-index:40}.headA .wrap{padding:12px 20px}.headA strong{font-family:var(--disp)}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;margin:16px 0;box-shadow:var(--sh);animation:rise .4s var(--ease) both}.panel h2{margin:0 0 14px;font-size:20px}.login{max-width:420px;margin:60px auto}
.ok{padding:10px 14px;background:#dcf7e6;color:#0f7a3c;border-radius:12px;font-weight:700;font-size:13px}.ok.bad{background:#fee2e2;color:var(--bad)}
.atabs{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0;padding:5px;background:#fff;border:1px solid var(--line);border-radius:16px;width:fit-content;max-width:100%;overflow-x:auto}.atabs button{border:0;background:transparent;padding:10px 16px;border-radius:12px;font:800 13px inherit;color:var(--ink2);cursor:pointer;transition:.18s;white-space:nowrap}.atabs button.on{background:var(--ink);color:#fff}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.kpi{border-radius:20px;padding:18px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh);position:relative;overflow:hidden}.kpi:after{content:"";position:absolute;right:-18px;top:-18px;width:80px;height:80px;border-radius:50%;background:var(--soft)}.kpi span{font-size:12px;font-weight:800;color:var(--muted)}.kpi b{display:block;font:800 28px var(--disp);margin-top:4px;position:relative;z-index:1}.kpi.a{background:linear-gradient(135deg,#0a2342,#12398a);color:#fff}.kpi.a span{color:#b9c9e8}.kpi.a:after{background:#ffffff14}
.form{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}.full{grid-column:1/-1}.tool{display:grid;grid-template-columns:2fr 1fr 1fr;gap:10px;margin-bottom:6px}.tool input,.tool select{margin:0 0 10px}.tableWrap{overflow:auto}.table{border-collapse:collapse;width:100%;min-width:760px}.table th{font:800 11px inherit;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--bg)}.table th:first-child{border-radius:10px 0 0 10px}.table th:last-child{border-radius:0 10px 10px 0}.table th,.table td{padding:11px 12px;text-align:left;border-bottom:1px solid #f0ece0;vertical-align:middle}.table tbody tr{transition:background .15s}.table tbody tr:hover{background:#faf8f2}
.thumb{width:48px;height:48px;object-fit:contain;background:var(--soft);border-radius:10px}.hint{font-size:12px;color:var(--muted)}.specrow{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;margin:6px 0}.specrow input{margin:0;padding:10px;border:1.5px solid var(--line);border-radius:10px}.specrow button{border:0;background:#fee2e2;color:var(--bad);border-radius:10px;width:36px;cursor:pointer}
.ibtn{border:0;background:var(--soft);color:var(--blue2);border-radius:10px;padding:8px 11px;font-weight:800;cursor:pointer;transition:.15s}.ibtn:hover{transform:translateY(-1px)}.ibtn.red{background:#fee2e2;color:var(--bad)}
.stsel{padding:8px 10px;border-radius:10px;border:1.5px solid var(--line);font:800 12px inherit;background:#fff}.trx{font:800 12px ui-monospace,Menlo,monospace;background:#fffdf5;border:1px dashed #cbd5e8;padding:3px 7px;border-radius:7px}.pay{font-weight:800;font-size:12px}.pay.bKash{color:#c20d5c}.pay.Nagad{color:#c4500f}
@media(max-width:1000px){.grid{grid-template-columns:repeat(3,1fr)}.hero{grid-template-columns:1fr}.heroSide{grid-template-columns:1fr 1fr}.kpis{grid-template-columns:repeat(2,1fr)}.foot{grid-template-columns:1fr 1fr}.hnav{display:none}}
@media(max-width:760px){body{padding-bottom:86px}.bottomNav{display:grid}.waFloat{bottom:90px;width:48px;height:48px}.grid{grid-template-columns:repeat(2,1fr);gap:10px}.pic{height:150px}.head{flex-wrap:wrap;padding:10px 14px}.brand img{height:36px}.search{order:3;flex-basis:100%}.heroMain{padding:26px;min-height:240px;border-radius:22px}.heroSide{grid-template-columns:1fr 1fr;gap:8px}.benefit{padding:12px;font-size:12.5px;border-radius:14px}.heroMain h1{font-size:30px}.card h3{font-size:13.5px}.price{font-size:18px}.actions{flex-direction:column}.detailGrid{grid-template-columns:1fr}.specs{grid-template-columns:1fr}.stats{grid-template-columns:1fr 1fr 1fr}.stat b{font-size:17px}.history{flex-direction:column;align-items:stretch}.history .hr{justify-items:start;text-align:left}.form{grid-template-columns:1fr}.tool{grid-template-columns:1fr}.top .wrap span:first-child{display:none}.wrap{padding:0 14px}
/* admin tables become cards on phones */.table{min-width:0}.table thead{display:none}.table tr{display:block;border:1px solid var(--line);border-radius:16px;margin:10px 0;padding:6px 10px}.table td{display:flex;justify-content:space-between;gap:10px;border:0;padding:7px 2px;text-align:right}.table td:before{content:attr(data-l);font:800 11px inherit;color:var(--muted);text-transform:uppercase;text-align:left;flex:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
#status{margin-top:16px}

/* Admin: product image link fields */
.imgGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:4px}
.imgSlot{background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:12px}
.imgSlot:first-child{border-color:var(--blue);box-shadow:0 0 0 3px #0879ff14}
.imgIn{display:flex;align-items:center;gap:6px}.imgIn input{margin:6px 0 8px!important;flex:1;min-width:0}
.imgClr{flex:0 0 auto;width:34px;height:34px;border:0;border-radius:10px;background:var(--soft);color:var(--ink2);font-size:18px;cursor:pointer;margin-bottom:2px}.imgClr:hover{background:#fee2e2;color:var(--bad)}
.imgPrev{height:130px;border-radius:12px;background:radial-gradient(#0a234314 1px,transparent 1.4px) 0 0/14px 14px,#eef3fb;display:grid;place-items:center;overflow:hidden;color:var(--muted);font-size:12px;font-weight:700;text-align:center;padding:6px}
.imgPrev img{max-width:100%;max-height:118px;object-fit:contain}.imgPrev.bad{background:#fff7f7;color:var(--bad)}
@media(max-width:560px){.imgGrid{grid-template-columns:1fr}}

/* Product details: iOS-style swipeable gallery */
.gal{position:relative;min-width:0}
.galTrack{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain;border-radius:20px;background:radial-gradient(#0a234314 1px,transparent 1.4px) 0 0/14px 14px,#eef3fb;touch-action:pan-x pan-y}
.galTrack::-webkit-scrollbar{display:none}
.galSlide{flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;min-height:340px;display:grid;place-items:center;padding:10px}
.galSlide img{max-width:100%;max-height:340px;object-fit:contain;user-select:none;-webkit-user-drag:none}
.galDots{display:flex;justify-content:center;gap:7px;margin-top:12px}
.galDots button{width:8px;height:8px;padding:0;border:0;border-radius:99px;background:#c3cde0;cursor:pointer;transition:width .25s var(--ease),background .25s}
.galDots button.on{width:22px;background:var(--ink)}
.galCount{position:absolute;top:12px;right:12px;background:#0a2342b8;color:#fff;font:800 11px inherit;padding:4px 10px;border-radius:99px;backdrop-filter:blur(6px);pointer-events:none}

/* Google sign-in */
.orSep{display:flex;align-items:center;gap:10px;margin:14px 0 10px;color:#8a8f98;font-size:12px;font-weight:600}
.orSep:before,.orSep:after{content:"";flex:1;height:1px;background:rgba(128,128,128,.3)}
.gBtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:#fff!important;color:#3c4043!important;border:1px solid #dadce0!important;box-shadow:none!important}
.gBtn:active{background:#f1f3f4!important}

/* 3D category icon tiles (white + red) */
.cico{width:100%;height:100%;display:block;overflow:visible}
.cico .w{fill:url(#jcW);stroke:#d5dae4;stroke-width:.8}
.cico .s{fill:url(#jcS);stroke:#dde1e9;stroke-width:.8}
.cico .r{fill:url(#jcR)}
.cico .g{fill:url(#jcG)}
.cico .d{fill:#b3bac7}
.cico .hl{fill:#fff;opacity:.75}
.cico .st{fill:none;stroke:#d0d5df;stroke-width:1.6}
.cico .rs{fill:none;stroke:url(#jcR);stroke-width:3.6;stroke-linecap:round}
.cico .cab{fill:none;stroke:#e1e5ec;stroke-width:9;stroke-linecap:round}
.cico .hd{fill:none;stroke:#e1e5ec;stroke-width:6;stroke-linecap:round}
.cats .cat{flex:0 0 112px;width:112px;flex-direction:column;justify-content:flex-start;gap:6px;padding:14px 8px 12px;border:0;border-radius:26px;background:#fff;box-shadow:0 1px 2px #0a23430d,0 8px 22px -12px #0a234333;white-space:normal;text-align:center;font:600 13px/1.25 Poppins,Inter,"Hind Siliguri",system-ui,sans-serif;color:#444;scroll-snap-align:start;min-height:138px}
.cats .cat .ico{display:block;width:68px;height:68px;font-size:0}
.cats .cat>span:last-child{display:block}
.cats .cat:hover{transform:translateY(-3px);box-shadow:0 12px 26px -12px #b80f1d55}
.cats .cat.active{background:#fff;color:#c4121f;box-shadow:0 0 0 2px #e0212f,0 12px 26px -12px #b80f1d66}
.categorySheet button .ico{display:inline-block;width:26px;height:26px;vertical-align:middle;margin-right:6px}
/* footer bottom social icons */
.footerBottom{align-items:center}.footerBottom .footSocial{display:inline-flex;align-items:center;gap:10px;margin-left:auto}.footerBottom .footSocial a{display:inline-flex;width:30px;height:30px;align-items:center;justify-content:center;border-radius:50%;background:#ffffff14;transition:.15s}.footerBottom .footSocial a:hover{background:#ffffff2e;transform:translateY(-2px)}