@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} /* ── THEMES ── */ :root{ --g:#C9A84C;--gd:#8B6914;--gl:rgba(201,168,76,.12); --k:#080808;--k2:#111;--k3:#1A1A1A;--k4:#222; --w:#F5F5F0;--gray:#777;--gray2:#555; --bdr:#1E1E1E;--bdr2:#2A2A2A; --nav:60px;--r:12px;--r2:8px; } .theme-golden{--g:#C9A84C;--gd:#8B6914;--gl:rgba(201,168,76,.12);--k:#080808;--k2:#111;--k3:#1A1A1A;--w:#F5F5F0;--gray:#777;--bdr:#1E1E1E;--bdr2:#2A2A2A} .theme-black{--g:#FFF;--gd:#CCC;--gl:rgba(255,255,255,.1);--k:#000;--k2:#0A0A0A;--k3:#141414;--w:#EEE;--gray:#666;--bdr:#1A1A1A;--bdr2:#222} .theme-white{--g:#333;--gd:#111;--gl:rgba(0,0,0,.07);--k:#F0F0F0;--k2:#E4E4E4;--k3:#D8D8D8;--w:#111;--gray:#666;--bdr:#CCC;--bdr2:#BBB} .theme-red{--g:#E53935;--gd:#B71C1C;--gl:rgba(229,57,53,.12);--k:#0A0000;--k2:#120000;--k3:#1A0000;--w:#FFF0F0;--gray:#888;--bdr:#200000;--bdr2:#2A0000} .theme-blue{--g:#1E88E5;--gd:#1565C0;--gl:rgba(30,136,229,.12);--k:#020810;--k2:#051020;--k3:#0A1A30;--w:#EEF5FF;--gray:#8899AA;--bdr:#0A1A2A;--bdr2:#102030} .theme-skyblue{--g:#29B6F6;--gd:#0288D1;--gl:rgba(41,182,246,.12);--k:#020A10;--k2:#051525;--k3:#082035;--w:#E8F7FF;--gray:#7799AA;--bdr:#082030;--bdr2:#102840} .theme-green{--g:#43A047;--gd:#1B5E20;--gl:rgba(67,160,71,.12);--k:#020A02;--k2:#051005;--k3:#0A1A0A;--w:#F0FFF0;--gray:#779977;--bdr:#0A180A;--bdr2:#102010} .theme-purple{--g:#8E24AA;--gd:#4A148C;--gl:rgba(142,36,170,.12);--k:#08020A;--k2:#100515;--k3:#180820;--w:#F8F0FF;--gray:#997799;--bdr:#180820;--bdr2:#200A2A} .theme-orange{--g:#FB8C00;--gd:#E65100;--gl:rgba(251,140,0,.12);--k:#0A0500;--k2:#150800;--k3:#200C00;--w:#FFF5E8;--gray:#998877;--bdr:#200800;--bdr2:#2A1000} .theme-brown{--g:#795548;--gd:#4E342E;--gl:rgba(121,85,72,.12);--k:#080402;--k2:#100805;--k3:#180C08;--w:#FFF3EE;--gray:#997766;--bdr:#180C08;--bdr2:#201008} .theme-pink{--g:#E91E63;--gd:#880E4F;--gl:rgba(233,30,99,.12);--k:#0A0205;--k2:#150510;--k3:#200818;--w:#FFF0F5;--gray:#997788;--bdr:#200818;--bdr2:#280A20} .theme-cyan{--g:#00BCD4;--gd:#006064;--gl:rgba(0,188,212,.12);--k:#00080A;--k2:#001015;--k3:#001A20;--w:#E0FEFF;--gray:#6699AA;--bdr:#001A20;--bdr2:#002028} .theme-yellow{--g:#F9A825;--gd:#F57F17;--gl:rgba(249,168,37,.12);--k:#080600;--k2:#120900;--k3:#1A0E00;--w:#FFFDE8;--gray:#998855;--bdr:#1A0E00;--bdr2:#221500} html{font-size:16px} body{font-family:'Hind Siliguri',sans-serif;background:var(--k);color:var(--w);min-height:100vh;overflow-x:hidden;-webkit-tap-highlight-color:transparent} body.lang-en{font-family:'Inter',sans-serif} body.has-bg-img{background-image:var(--bg-img);background-size:cover;background-attachment:fixed;background-position:center} body.has-bg-img::before{content:'';position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:0;pointer-events:none} body.has-bg-img .page,body.has-bg-img .wp{position:relative;z-index:1} body.has-bg-img .tbar,body.has-bg-img .bnav,body.has-bg-img .sbar,body.has-bg-img .pdacts{background:rgba(0,0,0,.78);backdrop-filter:blur(12px);border-color:rgba(255,255,255,.08)} /* WELCOME */ .wp{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 24px;overflow:hidden} .wl{text-align:center;margin-bottom:24px} .wl .ic{font-size:72px;display:block;margin-bottom:12px} .wl h1{font-size:2.4rem;font-weight:700;color:var(--g)} .wl p{color:var(--gray);font-size:.9rem;margin-top:5px} .wbtns{display:flex;flex-direction:column;gap:12px;width:100%;max-width:300px} .lang-sel{display:flex;gap:8px;justify-content:center;margin-bottom:18px} .lang-btn{padding:6px 16px;border-radius:50px;font-size:.82rem;font-weight:600;cursor:pointer;border:2px solid var(--bdr2);background:transparent;color:var(--gray);font-family:inherit;transition:all .2s} .lang-btn.active{border-color:var(--g);color:var(--g);background:var(--gl)} /* BUTTONS */ .bg{display:flex;align-items:center;justify-content:center;gap:8px;padding:15px 20px;border-radius:50px;font-size:.95rem;font-weight:700;cursor:pointer;border:none;text-decoration:none;background:linear-gradient(135deg,var(--g),var(--gd));color:var(--k);font-family:inherit;width:100%;transition:transform .15s} .bg:active{transform:scale(.96)} .bo{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 20px;border-radius:50px;font-size:.95rem;font-weight:700;cursor:pointer;border:2px solid var(--g);text-decoration:none;background:transparent;color:var(--g);font-family:inherit;width:100%;transition:transform .15s} .bo:active{transform:scale(.96)} .bgh{display:flex;align-items:center;justify-content:center;padding:12px;border-radius:50px;font-size:.88rem;cursor:pointer;border:none;text-decoration:none;background:transparent;color:var(--gray);font-family:inherit;width:100%} /* OVERLAY & MODAL */ .overlay{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:900;display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s;backdrop-filter:blur(8px)} .overlay.show{opacity:1;pointer-events:all} .modal{background:var(--k2);border-radius:20px 20px 0 0;padding:24px 22px 44px;width:100%;max-width:500px;border-top:2px solid var(--g);transform:translateY(100%);transition:transform .4s cubic-bezier(.16,1,.3,1);max-height:90vh;overflow-y:auto;position:relative} .overlay.show .modal{transform:translateY(0)} .mc{position:absolute;top:14px;right:14px;background:var(--k3);border:none;color:var(--gray);width:28px;height:28px;border-radius:50%;cursor:pointer;font-size:.85rem;display:flex;align-items:center;justify-content:center} .mt{text-align:center;margin-bottom:20px} .mt .ic{font-size:2rem;display:block;margin-bottom:7px} .mt h3{font-size:1.2rem;font-weight:700;color:var(--g)} .mt p{color:var(--gray);font-size:.84rem;margin-top:3px} .mn{text-align:center;color:var(--gray);font-size:.76rem;margin-top:10px} /* FORMS */ .fs{display:flex;flex-direction:column;gap:12px} .fd{display:flex;flex-direction:column;gap:5px} .fd label{font-size:.82rem;font-weight:600;color:var(--w)} .fd label small{font-weight:400;color:var(--gray)} .inp{padding:12px 14px;border:2px solid var(--bdr2);border-radius:var(--r2);font-size:.95rem;font-family:inherit;background:var(--k3);color:var(--w);outline:none;width:100%;transition:border-color .2s} .inp:focus{border-color:var(--g)} .inp::placeholder{color:var(--gray2)} /* ── BOTTOM NAV */ .bnav{ position:fixed;bottom:0;left:0;right:0; height:var(--nav); background:var(--k2); border-top:1px solid var(--bdr2); display:flex;align-items:stretch; z-index:500; padding-bottom:env(safe-area-inset-bottom,0px); } .bnav a{ flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:3px;text-decoration:none;color:var(--gray2); font-size:.58rem;font-weight:600; padding:6px 4px 4px; transition:color .2s; -webkit-tap-highlight-color:transparent; border:none;min-width:0; } .bnav a.active{color:var(--g)} .bnav a svg{width:20px;height:20px;fill:currentColor;flex-shrink:0} .bnav a span{line-height:1;flex-shrink:0;white-space:nowrap;font-size:.58rem} /* PAGE — nav ঢেকে না যায় */ .page{ max-width:600px;margin:0 auto; padding-bottom:calc(var(--nav) + env(safe-area-inset-bottom,0px) + 20px); min-height:100vh; } /* TOP BAR */ .tbar{display:flex;align-items:center;justify-content:space-between;padding:13px 15px 9px;background:var(--k2);position:sticky;top:0;z-index:100;border-bottom:1px solid var(--bdr)} .tt{font-size:1.2rem;font-weight:700;color:var(--g);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:68%} .av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--g),var(--gd));color:var(--k);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.95rem;text-decoration:none;flex-shrink:0} .bsm{padding:7px 14px;background:linear-gradient(135deg,var(--g),var(--gd));color:var(--k);border:none;border-radius:18px;font-size:.8rem;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap} /* BANNER */ .bnr-wrap{width:100%;height:200px;overflow:hidden;position:relative;background:var(--k3);flex-shrink:0} .bnr-track{display:flex;height:100%;width:100%} .bnr-slide{min-width:100%;width:100%;height:100%;flex-shrink:0;overflow:hidden} .bnr-slide img{width:100%;height:100%;object-fit:cover;object-position:center;display:block} .bnr-e{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--g);gap:5px} .bnr-e span{font-size:2.2rem} .bnr-e p{font-size:.86rem;font-weight:500} .bnr-dots{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);display:flex;gap:5px;z-index:2} .bnr-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.35);cursor:pointer;transition:all .3s;border:none;padding:0} .bnr-dot.on{background:var(--g);width:18px;border-radius:3px} /* SEARCH */ .sw{padding:10px 14px;background:var(--k2);border-bottom:1px solid var(--bdr)} .sb{display:flex;align-items:center;gap:9px;background:var(--k3);border:2px solid var(--bdr2);border-radius:50px;padding:9px 14px;transition:border-color .2s} .sb:focus-within{border-color:var(--g)} .sb svg{width:16px;height:16px;fill:var(--gray);flex-shrink:0} .sb input{flex:1;border:none;background:transparent;outline:none;font-size:.9rem;font-family:inherit;color:var(--w);min-width:0} .sb input::placeholder{color:var(--gray2)} /* FILTER */ .fcat{padding:5px 12px;border-radius:50px;font-size:.78rem;font-weight:600;cursor:pointer;border:2px solid var(--bdr2);background:var(--k3);color:var(--gray);font-family:inherit;white-space:nowrap;transition:all .2s} .fcat-on,.fcat:hover{border-color:var(--g);color:var(--g);background:var(--gl)} /* PRODUCTS GRID */ .psec{padding:11px} .pg{display:grid;grid-template-columns:1fr 1fr;gap:10px} .pc{background:var(--k2);border-radius:var(--r);overflow:hidden;text-decoration:none;color:inherit;border:1px solid var(--bdr);display:block;transition:border-color .2s} .pc:active{border-color:var(--g)} .pci{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;background:var(--k3)} .pci img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center top;display:block} .pci .ni{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:2.2rem} .pci .pb{position:absolute;top:6px;right:6px;background:rgba(0,0,0,.72);color:var(--w);font-size:.62rem;padding:2px 6px;border-radius:8px} .pci .vb{position:absolute;bottom:6px;left:6px;background:var(--g);color:var(--k);font-size:.6rem;padding:2px 6px;border-radius:8px;font-weight:700} .gender-badge{position:absolute;bottom:6px;left:6px;font-size:1rem;background:rgba(0,0,0,.6);border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center} .pin{padding:8px 9px 10px} .pn{font-size:.8rem;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:4px;word-break:break-word} .pr{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:3px} .pp{font-size:.88rem;font-weight:700;color:var(--g)} .pd{font-size:.63rem;color:var(--gray)} /* EMPTY */ .emp{text-align:center;padding:56px 20px} .emp .ei{font-size:3.2rem;margin-bottom:12px} .emp h3{font-size:1.05rem;font-weight:700;margin-bottom:7px} .emp p{color:var(--gray);margin-bottom:16px;font-size:.86rem} /* SUB BAR */ .sbar{display:flex;align-items:center;gap:9px;padding:10px 13px;background:var(--k2);position:sticky;top:0;z-index:100;border-bottom:1px solid var(--bdr)} .bk{width:34px;height:34px;border-radius:50%;background:var(--k3);border:1px solid var(--bdr2);text-decoration:none;color:var(--g);display:flex;align-items:center;justify-content:center;flex-shrink:0} .bk svg{width:18px;height:18px;fill:currentColor} .st{font-size:.98rem;font-weight:700;flex:1;color:var(--w);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ib{width:34px;height:34px;border-radius:50%;background:var(--k3);border:1px solid var(--bdr2);text-decoration:none;color:var(--g);display:flex;align-items:center;justify-content:center;flex-shrink:0} .ib svg{width:18px;height:18px;fill:currentColor} /* CAROUSEL */ .car{position:relative;width:100%;background:var(--k3);overflow:hidden} .ct{display:flex;width:100%;transition:transform .4s cubic-bezier(.25,1,.5,1)} .cs{min-width:100%;width:100%;flex-shrink:0} .cs img{width:100%;height:auto;max-height:420px;object-fit:contain;object-position:center;display:block;background:var(--k3);cursor:zoom-in} .ce{display:flex;align-items:center;justify-content:center;height:280px;font-size:3.5rem} .cd{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:5px;z-index:2} .dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.3);cursor:pointer;transition:all .3s} .dot.on{background:var(--g);width:18px;border-radius:3px} .vb2{position:absolute;bottom:38px;left:50%;transform:translateX(-50%);background:var(--g);color:var(--k);border:none;border-radius:50px;padding:7px 16px;font-size:.8rem;font-weight:700;cursor:pointer;white-space:nowrap;font-family:inherit;z-index:2} /* PRODUCT DETAIL */ .pdi{padding:14px 15px;background:var(--k2);border-bottom:1px solid var(--bdr)} .pdn{font-size:1.15rem;font-weight:700;line-height:1.4;margin-bottom:6px;word-break:break-word} .pdd{color:var(--gray);line-height:1.6;margin-bottom:10px;font-size:.86rem;word-break:break-word} .pdr{display:flex;align-items:baseline;gap:9px;margin-bottom:4px} .pdp{font-size:1.5rem;font-weight:700;color:var(--g)} .pdc{color:var(--gray);font-size:.84rem} /* ACTION BUTTONS — fixed above nav */ .pdacts{ display:grid;grid-template-columns:1fr 1fr;gap:9px; padding:10px 14px; position:fixed; bottom:var(--nav); left:50%;transform:translateX(-50%); width:100%;max-width:600px; background:var(--k2);border-top:1px solid var(--bdr); z-index:50; } .bca{display:flex;align-items:center;justify-content:center;gap:5px;padding:11px;border:2px solid var(--g);border-radius:var(--r2);background:transparent;color:var(--g);font-size:.84rem;font-weight:700;cursor:pointer;font-family:inherit;transition:transform .1s} .bca:active{transform:scale(.95)} .boa{display:flex;align-items:center;justify-content:center;gap:5px;padding:11px;border:none;border-radius:var(--r2);background:linear-gradient(135deg,var(--g),var(--gd));color:var(--k);font-size:.84rem;font-weight:700;cursor:pointer;font-family:inherit;box-shadow:0 3px 12px var(--gl);transition:transform .1s} .boa:active{transform:scale(.95)} /* PANEL */ .pov{position:fixed;inset:0;background:rgba(0,0,0,.82);z-index:400;opacity:0;pointer-events:none;transition:opacity .3s;backdrop-filter:blur(4px)} .pov.show{opacity:1;pointer-events:all} .panel{ position:fixed;bottom:0;left:0;right:0; background:var(--k2); border-radius:20px 20px 0 0; border-top:2px solid var(--g); max-height:90vh;overflow-y:auto; transform:translateY(100%); transition:transform .4s cubic-bezier(.16,1,.3,1); z-index:401; padding-bottom:calc(var(--nav) + env(safe-area-inset-bottom,0px) + 24px); } .panel.show{transform:translateY(0)} .ph2{width:36px;height:3px;background:var(--bdr2);border-radius:2px;margin:10px auto 0} .phd{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--bdr)} .phd h3{font-size:.97rem;font-weight:700;color:var(--g)} .pcl{background:var(--k3);border:none;color:var(--gray);width:26px;height:26px;border-radius:50%;cursor:pointer;font-size:.82rem;display:flex;align-items:center;justify-content:center} .pst{padding:13px 16px} .slbl{font-size:.74rem;color:var(--gray);margin-bottom:11px;font-weight:600;text-transform:uppercase;letter-spacing:.3px} /* IMAGE SELECT */ .isg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:13px} .isi{position:relative;border-radius:var(--r2);overflow:hidden;border:3px solid transparent;cursor:pointer;aspect-ratio:1;transition:border-color .2s} .isi:active{transform:scale(.93)} .isi.pk{border-color:var(--g)} .isi img{width:100%;height:100%;object-fit:cover;display:block} .ick{position:absolute;top:4px;right:4px;width:19px;height:19px;border-radius:50%;background:var(--g);color:var(--k);display:none;align-items:center;justify-content:center;font-size:.68rem;font-weight:700} .isi.pk .ick{display:flex} .isp{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.7);color:var(--w);text-align:center;font-size:.66rem;padding:3px} /* SELECTED ITEMS */ .selbl{font-size:.75rem;color:var(--gray);margin-bottom:4px;font-weight:600} .sec{display:flex;gap:10px;padding:10px;background:var(--k3);border-radius:var(--r2);border:1px solid var(--bdr2);margin-bottom:8px} .sec img{width:56px;height:56px;object-fit:cover;border-radius:7px;flex-shrink:0} .seci{flex:1;display:flex;flex-direction:column;gap:5px;min-width:0} .secp{font-weight:700;color:var(--g);font-size:.84rem} .or{display:flex;align-items:center;gap:6px;flex-wrap:wrap} .or label{font-size:.76rem;color:var(--gray);flex-shrink:0} .os{flex:1;min-width:90px;padding:5px 8px;border:1.5px solid var(--bdr2);border-radius:6px;font-size:.8rem;outline:none;font-family:inherit;background:var(--k2);color:var(--w)} .os:focus{border-color:var(--g)} .qr{display:flex;align-items:center;gap:6px} .qb{width:26px;height:26px;border-radius:50%;background:var(--k2);border:2px solid var(--g);color:var(--g);font-size:.9rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none} .qb:active{background:var(--g);color:var(--k)} .qn{font-weight:700;font-size:.9rem;min-width:20px;text-align:center} .qd{background:none;border:none;cursor:pointer;font-size:.9rem;color:var(--gray);padding:0 2px} /* PRICE BOX */ .pbx{background:var(--k3);border:1px solid var(--bdr2);border-radius:var(--r2);padding:11px;margin:10px 0} .prow{display:flex;justify-content:space-between;padding:3px 0;font-size:.84rem;color:var(--gray)} .ptot{display:flex;justify-content:space-between;padding:7px 0 0;font-size:.92rem;font-weight:700;border-top:1px solid var(--bdr2);margin-top:4px;color:var(--g)} .bn{width:100%;padding:13px;background:linear-gradient(135deg,var(--g),var(--gd));color:var(--k);border:none;border-radius:var(--r2);font-size:.92rem;font-weight:700;cursor:pointer;font-family:inherit;margin-top:3px;transition:transform .1s} .bn:active{transform:scale(.97)} .bn:disabled{opacity:.35;cursor:not-allowed} .bbk{background:none;border:none;color:var(--gray);font-size:.82rem;cursor:pointer;font-family:inherit;margin-bottom:7px;padding:0;display:flex;align-items:center;gap:3px} /* ORDER SUMMARY */ .s2s{background:var(--k3);border:1px solid var(--bdr2);border-radius:var(--r2);padding:10px;margin-bottom:13px} .s2i{display:flex;flex-direction:column;gap:7px;margin-bottom:8px} .s2it{display:flex;gap:8px;align-items:center} .s2it img{width:42px;height:42px;object-fit:cover;border-radius:6px;flex-shrink:0} .s2ii{display:flex;flex-direction:column;gap:2px;font-size:.76rem;color:var(--gray);min-width:0;word-break:break-word} .s2p{color:var(--g);font-weight:700} .s2t{display:flex;flex-direction:column;gap:3px;font-size:.8rem;border-top:1px solid var(--bdr2);padding-top:6px;color:var(--gray)} .s2t strong{color:var(--g);font-size:.88rem} .bpl{width:100%;padding:14px;background:linear-gradient(135deg,var(--g),var(--gd));color:var(--k);border:none;border-radius:var(--r2);font-size:.94rem;font-weight:700;cursor:pointer;font-family:inherit;margin-top:7px;box-shadow:0 3px 12px var(--gl);transition:transform .1s} .bpl:active{transform:scale(.97)} .bpl:disabled{opacity:.5} /* PAYMENT */ .pay-section{margin-top:14px} .pay-title{font-size:.78rem;color:var(--gray);font-weight:600;text-transform:uppercase;letter-spacing:.4px;margin-bottom:12px} .pay-cod-box{display:flex;align-items:center;gap:12px;background:rgba(76,175,80,.08);border:2px solid rgba(76,175,80,.25);border-radius:var(--r2);padding:14px;margin-bottom:10px} .pico2{font-size:1.6rem;flex-shrink:0} .ptxt2{flex:1} .ptitle2{font-size:.9rem;font-weight:700;color:#4CAF50;display:block} .psub2{font-size:.76rem;color:var(--gray);display:block;margin-top:2px} .pay-methods{display:flex;flex-direction:column;gap:9px;margin-bottom:12px} .pmb{display:flex;align-items:center;gap:12px;padding:14px 15px;background:var(--k3);border:2px solid var(--bdr2);border-radius:var(--r2);cursor:pointer;font-family:inherit;width:100%;text-align:left;position:relative;overflow:hidden;transition:border-color .2s} .pmb.sel{border-color:var(--g);background:var(--k2)} .pmb.sel::after{content:'✓';position:absolute;top:10px;right:12px;width:20px;height:20px;background:var(--g);color:var(--k);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700} .pmb-ico{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0;border:1.5px solid var(--bdr2);background:var(--k2)} .pmb.sel .pmb-ico{border-color:var(--g);background:var(--gl)} .pmb-txt{flex:1;display:flex;flex-direction:column;gap:2px} .pmb-title{font-size:.9rem;font-weight:700;color:var(--w);display:block} .pmb-sub{font-size:.75rem;color:var(--gray);display:block} .pmb-amt{font-size:.82rem;font-weight:700;color:var(--g);margin-left:auto;flex-shrink:0;padding:3px 9px;background:var(--gl);border-radius:50px;border:1px solid var(--g)} .smbox{background:var(--k3);border:2px solid var(--bdr2);border-radius:var(--r2);padding:16px;margin-top:10px;animation:slideDown .3s ease} @keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}} .smbox-title{font-size:.8rem;color:var(--gray);margin-bottom:10px;line-height:1.5} .smnum{font-size:1.3rem;font-weight:700;color:var(--g);text-align:center;padding:10px;background:var(--k2);border-radius:var(--r2);margin:10px 0;letter-spacing:3px;border:1px solid var(--g)} .last4{text-align:center;font-size:1.1rem;letter-spacing:4px;font-weight:700} .sm-confirm{width:100%;padding:13px;background:linear-gradient(135deg,var(--g),var(--gd));color:var(--k);border:none;border-radius:var(--r2);font-size:.9rem;font-weight:700;cursor:pointer;font-family:inherit;margin-top:10px;display:flex;align-items:center;justify-content:center;gap:7px;transition:transform .1s} .sm-confirm:active{transform:scale(.97)} /* VIDEO */ .vov{position:fixed;inset:0;background:rgba(0,0,0,.97);z-index:600;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s} .vov.show{opacity:1;pointer-events:all} .vov iframe{width:100%;height:56.25vw;max-height:80vh} .vcl{position:absolute;top:16px;right:16px;background:rgba(0,0,0,.5);border:1px solid var(--g);color:var(--g);width:36px;height:36px;border-radius:50%;font-size:.95rem;cursor:pointer;display:flex;align-items:center;justify-content:center} /* TOAST */ .toast{ position:fixed; bottom:calc(var(--nav) + env(safe-area-inset-bottom,0px) + 70px); left:50%;transform:translateX(-50%) translateY(12px); background:var(--k2);color:var(--g);border:1px solid var(--g); padding:11px 20px;border-radius:50px;font-weight:600; z-index:800;white-space:nowrap; transition:transform .3s,opacity .3s; opacity:0;pointer-events:none;font-size:.85rem; } .toast.show{transform:translateX(-50%) translateY(0);opacity:1} /* CART */ .cl{padding:0 14px} .ci{display:flex;gap:10px;padding:12px 0;border-bottom:1px solid var(--bdr)} .ci img{width:72px;height:72px;object-fit:cover;border-radius:var(--r2);flex-shrink:0} .cdt{flex:1;display:flex;flex-direction:column;gap:5px;min-width:0} .cn{font-size:.85rem;font-weight:600;line-height:1.3;word-break:break-word} .cps{display:flex;gap:4px;flex-wrap:wrap} .cp{background:var(--gl);color:var(--g);font-size:.64rem;padding:2px 7px;border-radius:16px;font-weight:600} .cpr2{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:5px} .cprc{font-size:.9rem;font-weight:700;color:var(--g)} .crm{background:none;border:none;color:var(--gray);font-size:.76rem;cursor:pointer;font-family:inherit;padding:0} .csum{padding:14px;background:var(--k2);border-top:1px solid var(--bdr)} .ctrow{display:flex;justify-content:space-between;font-size:.94rem;font-weight:700;margin-bottom:3px} .cnote{font-size:.74rem;color:var(--gray)} /* ORDERS */ .ol{display:flex;flex-direction:column;gap:8px;padding:13px 14px} .oc{background:var(--k2);border-radius:var(--r);padding:13px 14px;text-decoration:none;color:inherit;border:1px solid var(--bdr);display:flex;flex-direction:column;gap:8px;transition:border-color .15s} .oc:active{border-color:var(--g)} .ot{display:flex;align-items:flex-start;justify-content:space-between;gap:7px} .om{display:flex;flex-direction:column;gap:2px;min-width:0} .on{font-weight:700;font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .od2{font-size:.74rem;color:var(--gray)} .ob{display:flex;align-items:center;justify-content:space-between} .ot2{font-size:.9rem;font-weight:700;color:var(--g)} .oa{font-size:1.2rem;color:var(--gray)} /* STATUS */ .sb{display:inline-block;padding:3px 10px;border-radius:50px;font-size:.7rem;font-weight:700;white-space:nowrap} .s-pending{background:rgba(255,193,7,.12);color:#FFC107} .s-accepted{background:rgba(76,175,80,.12);color:#4CAF50} .s-processing{background:rgba(33,150,243,.12);color:#2196F3} .s-delivering{background:rgba(3,169,244,.12);color:#03A9F4} .s-delivered{background:rgba(76,175,80,.15);color:#66BB6A} .s-cancelled{background:rgba(244,67,54,.12);color:#F44336} /* ORDER DETAIL */ .odw{padding:13px 14px;display:flex;flex-direction:column;gap:10px} .odst{background:var(--k2);border:1px solid var(--bdr);border-radius:var(--r);padding:17px;display:flex;flex-direction:column;align-items:center;gap:8px} .odid{font-size:.71rem;color:var(--gray)} .odsc{background:var(--k2);border:1px solid var(--bdr);border-radius:var(--r);padding:14px} .odst2{font-size:.83rem;font-weight:700;margin-bottom:10px;color:var(--g)} .odig{display:flex;flex-direction:column;gap:6px} .odr{display:flex;gap:9px;font-size:.83rem} .odl{color:var(--gray);min-width:68px;flex-shrink:0} .odv{color:var(--w);word-break:break-word} .odit{display:flex;flex-direction:column;gap:9px;margin-bottom:9px} .odim{display:flex;gap:10px;align-items:flex-start} .odim img{width:54px;height:54px;object-fit:cover;border-radius:7px;flex-shrink:0} .odii{display:flex;flex-direction:column;gap:3px;font-size:.82rem;min-width:0} .odin{font-weight:600;word-break:break-word} .odiq{color:var(--gray);font-size:.78rem} .odop{display:flex;gap:4px;flex-wrap:wrap} .odc{background:var(--gl);color:var(--g);font-size:.64rem;padding:2px 7px;border-radius:16px;font-weight:600} .odp{border-top:1px solid var(--bdr);padding-top:8px;margin-top:2px} .odpr{display:flex;justify-content:space-between;padding:2px 0;font-size:.82rem;color:var(--gray)} .odpt{display:flex;justify-content:space-between;font-weight:700;font-size:.9rem;color:var(--g);padding-top:5px;border-top:1px solid var(--bdr);margin-top:3px} .bed{width:100%;padding:11px;border-radius:var(--r2);font-size:.86rem;font-weight:600;cursor:pointer;font-family:inherit;margin-top:7px;background:var(--gl);color:var(--g);border:2px solid var(--g);transition:transform .1s} .bed:active{transform:scale(.97)} .bcn{width:100%;padding:11px;border-radius:var(--r2);font-size:.86rem;font-weight:600;cursor:pointer;font-family:inherit;margin-top:6px;background:rgba(244,67,54,.07);color:#F44336;border:2px solid rgba(244,67,54,.32);transition:transform .1s} .bcn:active{transform:scale(.97)} .edit-24-note{background:rgba(255,193,7,.08);border:1px solid rgba(255,193,7,.25);border-radius:8px;padding:10px 13px;font-size:.82rem;color:#FFC107;margin-top:8px;line-height:1.6} /* ME PAGE */ .mw{padding:13px 14px} .pcd{background:linear-gradient(135deg,var(--k3),var(--k2));border:1px solid var(--g);border-radius:16px;padding:24px 17px;text-align:center;margin-bottom:13px;box-shadow:0 6px 24px var(--gl)} .pav{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--g),var(--gd));color:var(--k);display:flex;align-items:center;justify-content:center;font-size:1.8rem;font-weight:700;margin:0 auto 10px} .pnm{font-size:1.15rem;font-weight:700;color:var(--g)} .pmb2{color:var(--gray);font-size:.84rem;margin-top:3px} .mlit{display:flex;flex-direction:column;gap:8px} .msl{font-size:.72rem;font-weight:600;color:var(--gray);text-transform:uppercase;letter-spacing:.3px;padding:3px 1px} .mei{display:flex;align-items:center;gap:11px;background:var(--k2);border:1px solid var(--bdr);border-radius:var(--r);padding:12px 13px;text-decoration:none;color:inherit;transition:border-color .15s} .mei:active{border-color:var(--g)} .mico{font-size:1.3rem;flex-shrink:0} .mtx{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0} .mtt{font-weight:600;font-size:.88rem;word-break:break-word} .mts{font-size:.74rem;color:var(--gray);word-break:break-word;line-height:1.4} .mar{font-size:1.2rem;color:var(--gray);flex-shrink:0} .blo{display:block;width:100%;text-align:center;padding:12px;background:rgba(244,67,54,.08);color:#F44336;border:2px solid rgba(244,67,54,.28);border-radius:var(--r2);text-decoration:none;font-weight:700;font-size:.88rem;margin-top:16px} .info-box{background:var(--k3);border:1px solid var(--bdr);border-radius:var(--r2);padding:12px;margin-top:4px;width:100%} .info-box p{font-size:.84rem;color:var(--gray);line-height:1.7;white-space:pre-wrap;word-break:break-word} /* NO ACCOUNT */ .nacc{display:flex;flex-direction:column;align-items:center;padding:56px 20px;text-align:center} .nacc .ni{font-size:3.5rem;margin-bottom:13px} .nacc h2{font-size:1.05rem;font-weight:700;margin-bottom:6px} .nacc p{color:var(--gray);line-height:1.6;margin-bottom:24px;font-size:.86rem} .nacc-b{display:flex;flex-direction:column;gap:10px;width:100%;max-width:280px} /* DESKTOP */ @media(min-width:769px){ .d-mobile{display:none!important} .bnav{display:none!important} .page{max-width:1100px;padding-bottom:40px} .desk-nav{display:flex;align-items:center;justify-content:center;gap:6px;padding:0 24px;background:var(--k2);border-bottom:1px solid var(--bdr);height:48px;position:sticky;top:56px;z-index:99;max-width:1100px;margin:0 auto} .desk-nav a{padding:7px 16px;border-radius:8px;text-decoration:none;color:var(--gray);font-size:.86rem;font-weight:600;display:flex;align-items:center;gap:5px} .desk-nav a:hover,.desk-nav a.active{color:var(--g);background:var(--gl)} .pg{grid-template-columns:repeat(4,1fr);gap:14px} .pdacts{bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:600px} } @media(max-width:768px){ .d-desktop{display:none!important} .desk-nav{display:none!important} } ::-webkit-scrollbar{width:3px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--bdr2);border-radius:2px} /* ── DISCOUNT BADGE ── */ .disc-badge{position:absolute;top:6px;right:6px;background:linear-gradient(135deg,#F44336,#C62828);color:#fff;font-size:.62rem;font-weight:700;padding:2px 6px;border-radius:8px;z-index:2;line-height:1.3} /* ── SEARCH SUGGESTION ── */ .sug-item{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--bdr);transition:background .15s} .sug-item:hover,.sug-item:active{background:var(--k3)} .sug-item:last-child{border-bottom:none} /* ── DESKTOP NAV BAR ── */ .desk-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; height: 56px; background: var(--k2); border-top: 1px solid var(--bdr2); z-index: 500; align-items: stretch; justify-content: center; gap: 0; max-width: 100%; } .desk-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 32px; text-decoration: none; color: var(--gray); font-size: .62rem; font-weight: 500; transition: color .2s; border: none; } .desk-nav a:hover { color: var(--g); } .desk-nav a.active { color: var(--g); } .desk-nav a svg { width: 20px; height: 20px; fill: currentColor; } @media (min-width: 769px) { .bnav { display: none !important; } .desk-nav { display: flex !important; } .page { padding-bottom: calc(56px + 20px) !important; } } @media (max-width: 768px) { .desk-nav { display: none !important; } .bnav { display: flex !important; } } /* ── OPTION SELECT BAR + BOTTOM SHEET (replaces plain