*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --accent:#2563eb;--accent-dark:#1d4ed8;--accent-light:#eff6ff;--accent-soft:#dbeafe;
  --green:#16a34a;--red:#dc2626;--amber:#d97706;
  --bg:#f1f5f9;--white:#fff;--text:#0f172a;--muted:#64748b;
  --border:#e2e8f0;--border-soft:#f1f5f9;
  --hbg:#0f172a;--hbg2:#1e293b;
  --shadow-sm:0 1px 3px rgba(0,0,0,.08);
  --shadow-md:0 4px 16px rgba(0,0,0,.08);
  --shadow-lg:0 12px 40px rgba(0,0,0,.12);
  --r:12px;
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:'Inter',system-ui,sans-serif;font-size:14px;line-height:1.5}
a{text-decoration:none;color:inherit}
button{font-family:inherit}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:#94a3b8}

/* ── Topbar ── */
.topbar{background:var(--hbg);color:#64748b;font-size:12px;padding:6px 0}
.topbar-in{max-width:1300px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between}
.topbar a{color:#64748b}.topbar a:hover{color:#fff}
.tlinks{display:flex;gap:20px}
.tphone{color:#94a3b8;font-weight:600;font-size:12px}

/* Reserve header space to prevent CLS from dynamic injection */
#site-header{min-height:136px}
/* ── Header ── */
header{background:#fff;position:sticky;top:0;z-index:100;border-bottom:1px solid var(--border);box-shadow:0 1px 0 var(--border);overflow-x:clip;overflow-y:visible}
.h-in{max-width:1300px;margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;gap:14px}
.logo{font-size:22px;font-weight:900;color:var(--text);letter-spacing:-.06em;white-space:nowrap;flex-shrink:0;display:flex;align-items:center;gap:2px}
.logo-dot{width:7px;height:7px;background:var(--accent);border-radius:50%;margin-left:1px;margin-bottom:10px;flex-shrink:0}
.catbtn{display:flex;align-items:center;gap:8px;background:var(--hbg);color:#fff;border:none;padding:0 18px;height:40px;border-radius:10px;cursor:pointer;font-size:13px;font-weight:600;white-space:nowrap;transition:filter .2s}
.catbtn:hover,.catbtn.open{background:var(--accent)}
.blines{display:flex;flex-direction:column;gap:4px;width:16px}
.blines span{display:block;height:2px;background:#fff;border-radius:2px}
.srch{flex:1;position:relative}
.srch input{width:100%;height:42px;border:1.5px solid var(--border);border-radius:10px;padding:0 50px 0 16px;font-size:14px;outline:none;transition:box-shadow .2s;background:#fff;color:var(--text)}
.srch input::placeholder{color:#94a3b8}
.srch input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light)}
.srch-go{position:absolute;right:4px;top:4px;height:34px;width:38px;background:var(--accent);border:none;border-radius:7px;cursor:pointer;color:#fff;font-size:16px;display:flex;align-items:center;justify-content:center;transition:filter .2s}
.srch-go:hover{background:var(--accent-dark)}
.h-acts{display:flex;align-items:center;gap:4px;flex-shrink:0}
.hbtn{display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:none;color:var(--text);cursor:pointer;padding:6px 10px;border-radius:8px;transition:filter .2s;font-size:10px;position:relative;white-space:nowrap;text-decoration:none}
.hbtn:hover{background:var(--bg)}
.hbtn-i{font-size:18px;line-height:1}
.hbadge{position:absolute;top:3px;right:5px;background:var(--accent);color:#fff;font-size:10px;font-weight:700;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 3px;opacity:0;transform:scale(.5);transition:opacity .2s,transform .3s cubic-bezier(.34,1.56,.64,1)}
.hbadge.on{opacity:1;transform:scale(1)}

/* ── Navbar ── */
.navbar{background:var(--hbg);border-bottom:1px solid rgba(255,255,255,.06)}
.nav-in{max-width:1300px;margin:0 auto;padding:0 24px;display:flex;scrollbar-width:none}
.nav-in::-webkit-scrollbar{display:none}
.nlink{color:#94a3b8;font-size:13px;padding:11px 14px;white-space:nowrap;cursor:pointer;border:none;border-bottom:2px solid transparent;background:none;font-weight:500;text-decoration:none;display:inline-flex;align-items:center;gap:5px}
.nico{display:inline-flex;align-items:center;flex-shrink:0}
.nlink:hover,.nlink.active{color:#fff}
.nlink.hot{color:#fb923c}

/* ── Page ── */
.page{max-width:1300px;margin:0 auto;padding:20px 24px}

/* ── Banner ── */
.banner{border-radius:20px;background:linear-gradient(135deg,#0f172a 0%,#1e3a5f 50%,#0f172a 100%);padding:44px 52px;display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;min-height:200px;height:220px;position:relative;overflow:hidden}
.banner::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 60% 50%,rgba(37,99,235,.3),transparent 65%)}
.blabel{display:inline-block;background:var(--accent);color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;padding:4px 12px;border-radius:20px;margin-bottom:14px;letter-spacing:.06em}
.btitle{font-size:clamp(22px,2.8vw,40px);font-weight:800;color:#fff;line-height:1.15;margin-bottom:10px}
.bsub{color:rgba(255,255,255,.5);font-size:14px;margin-bottom:24px}
.bbtn{background:#fff;color:var(--accent);padding:12px 28px;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;border:none;transition:transform .2s;box-shadow:0 2px 8px rgba(0,0,0,.15);text-decoration:none;display:inline-block}
.bbtn:hover{background:var(--accent);color:#fff;transform:translateY(-1px)}
.bdevice{font-size:110px;position:relative;z-index:1;animation:float 3.5s ease-in-out infinite;flex-shrink:0}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ── Section headings ── */
.sh{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
h1.stitle,.stitle{font-size:17px;font-weight:700;color:var(--text);margin:0;padding:0}
h1.btitle{margin:0 0 10px;padding:0}
.smore{font-size:13px;color:var(--accent);cursor:pointer;font-weight:500;transition:opacity .2s;text-decoration:none}
.smore:hover{opacity:.75}

/* ── Category grid ── */
.catgrid{display:flex;flex-direction:column;gap:20px;padding:4px 0;margin-bottom:20px;min-height:520px}
.cg-sec-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:10px;padding-left:2px}
.cg-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px}
.ctile{background:#fff;border:1.5px solid var(--border);border-radius:var(--r);padding:12px 6px;text-align:center;cursor:pointer;transition:transform .2s;position:relative;text-decoration:none;display:block}
.ctile:hover,.ctile.active{border-color:var(--accent);box-shadow:0 4px 16px var(--accent-soft);transform:translateY(-2px)}
.ctile.active{background:var(--accent-light)}
.ctile-i{font-size:26px;margin-bottom:6px;display:block}
.ctile-n{font-size:10px;font-weight:600;color:var(--text);line-height:1.3}
.ctile-cnt{font-size:10px;color:var(--accent);font-weight:600;margin-top:3px}

/* ── Promo bar ── */
.promo-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:24px}
.promo-c{background:#fff;border:1.5px solid var(--border);border-radius:var(--r);padding:16px;display:flex;align-items:flex-start;gap:12px;transition:transform .2s}
.promo-c:hover{border-color:var(--accent);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.pro-ico{font-size:24px;flex-shrink:0}
.pro-title{font-size:13px;font-weight:700;margin-bottom:3px}
.pro-desc{font-size:11px;color:var(--muted);line-height:1.5}

/* ── Featured products grid ── */
.feat-prods{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:24px;min-height:480px}

/* ── Layout ── */
.mlayout{display:grid;grid-template-columns:240px 1fr;gap:16px;align-items:start}

/* ── Sidebar ── */
.sidebar{background:#fff;border:1.5px solid var(--border);border-radius:var(--r);overflow:visible;position:sticky;top:80px}
.sb-sec{border-bottom:1px solid var(--border-soft);overflow:hidden}
.sb-sec:last-child{border-bottom:none}
.sb-hd{font-size:12px;font-weight:700;padding:12px 16px;background:var(--bg);color:var(--muted);text-transform:uppercase;letter-spacing:.05em;display:flex;justify-content:space-between;cursor:pointer;user-select:none}
.sb-hd:hover{color:var(--accent)}
.sb-hd .sb-arr{transition:transform .2s;display:inline-block}
.sb-sec.collapsed .sb-arr{transform:rotate(-90deg)}
.sb-sec.collapsed>*:not(.sb-hd){display:none!important}
.sb-bd{padding:4px 0 8px}
.sbl{display:flex;align-items:center;justify-content:space-between;padding:7px 16px;font-size:13px;cursor:pointer;transition:filter .15s;text-decoration:none;color:var(--text)}
.sbl:hover,.sbl.active{background:var(--accent-light);color:var(--accent)}
.sbl-parent{font-weight:700;margin-top:4px;font-size:13px;color:var(--text)}
.sbl-child{padding-left:28px;font-size:12px;color:var(--muted)}
.sbl-child:hover,.sbl-child.active{color:var(--accent)}
.sbl-cnt{font-size:10px;color:#cbd5e1;background:var(--bg);padding:1px 6px;border-radius:8px}
.sbl-ico{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-right:6px;width:20px}
.pflt{padding:12px 14px 14px}
.pinputs{display:flex;gap:8px;margin-bottom:10px}
.pinput{flex:1;min-width:0;width:0;border:1.5px solid var(--border);border-radius:8px;padding:7px 8px;font-size:12px;outline:none;background:#fff;box-sizing:border-box}
.pinput:focus{border-color:var(--accent)}
.pslider{width:100%;accent-color:var(--accent);cursor:pointer;display:block;box-sizing:border-box}
.blist{padding:0 16px 8px}
.cbrow{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:12px;cursor:pointer;color:var(--text)}
.cbrow input{accent-color:var(--accent);width:14px;height:14px;cursor:pointer}

/* ── Catalog header + grid ── */
.cat-hd{background:#fff;border:1.5px solid var(--border);border-radius:var(--r) var(--r) 0 0;padding:12px 16px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;border-bottom:none}
.rcnt{font-size:12px;color:var(--muted)}
.rcnt strong{color:var(--text);font-weight:700}
.sortg{margin-left:auto;display:flex;align-items:center;gap:6px}
.sortl{font-size:12px;color:var(--muted);font-weight:500}
.sbtn{padding:6px 12px;border:1.5px solid var(--border);border-radius:8px;background:#fff;font-size:12px;cursor:pointer;transition:transform .15s;color:var(--muted);font-weight:500}
.sbtn:hover,.sbtn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.vbtns{display:flex;gap:4px;border-left:1.5px solid var(--border);padding-left:10px}
.vbtn{width:30px;height:30px;border:1.5px solid var(--border);border-radius:8px;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--muted);transition:transform .15s}
.vbtn.active,.vbtn:hover{border-color:var(--accent);color:var(--accent)}
.pwrap{background:#fff;border:1.5px solid var(--border);border-top:none;border-radius:0 0 var(--r) var(--r);padding:12px}
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pgrid.lv{grid-template-columns:1fr}

/* ── Product card ── */
.pcard{border:1px solid var(--border);border-radius:10px;padding:0;cursor:pointer;transition:transform .2s;display:flex;flex-direction:column;background:#fff;animation:fadeIn .3s ease both;overflow:hidden}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pcard{position:relative}.pcard:hover{box-shadow:0 4px 20px rgba(0,0,0,.1);border-color:var(--accent);transform:translateY(-2px)}
.pcard-top{display:flex;justify-content:space-between;align-items:flex-start;position:absolute;top:8px;left:8px;right:8px;z-index:2;pointer-events:none}
.pbadges{display:flex;flex-direction:column;gap:3px;pointer-events:none}
.bdg{font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;width:fit-content;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.bnew{background:#dcfce7;color:var(--green)}
.bsale{background:#fee2e2;color:var(--red)}
.bhit{background:var(--accent-soft);color:var(--accent)}
.wish{width:32px;height:32px;border:1px solid rgba(0,0,0,.08);border-radius:8px;background:rgba(255,255,255,.92);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:15px;color:#cbd5e1;transition:transform .2s;flex-shrink:0;pointer-events:all;box-shadow:0 1px 4px rgba(0,0,0,.1)}
.wish:hover,.wish.on{border-color:#f43f5e;color:#f43f5e;background:#fff1f2}
.pimg{text-align:center;font-size:72px;line-height:1;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#f5f5f5;border-radius:0;width:100%;flex-shrink:0}
.pimg img{width:100%;height:100%;object-fit:contain;display:block}
.pcard-body{padding:10px 12px 6px;display:flex;flex-direction:column;flex:1}
.pname{font-size:13px;line-height:1.4;margin-bottom:6px;flex:1;color:var(--text);font-weight:500;padding:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.prat{display:flex;align-items:center;gap:4px;margin-bottom:6px;padding:0}
.pstars{color:#f59e0b;font-size:12px;letter-spacing:-1px}
.rval{font-size:11px;color:var(--muted)}
.pprow{display:flex;align-items:baseline;gap:8px;margin-bottom:4px;padding:0}
.pprice{font-size:17px;font-weight:800;color:var(--text)}
.pold{font-size:12px;color:#64748b;text-decoration:line-through;font-weight:500}
.pdisc{font-size:11px;font-weight:700;color:var(--red)}
.pavail{font-size:11px;color:var(--green);margin-bottom:8px;font-weight:500;padding:0}
.pavail.low{color:var(--amber)}
.pacts{display:flex;gap:6px;margin-top:auto;align-items:stretch;padding:0 12px 12px}
.pbuy{flex:1;padding:9px 0;background:var(--accent);color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;transition:transform .2s}
.pbuy:hover{background:var(--accent-dark);transform:translateY(-1px)}
.pbuy.added{background:var(--green)}
.pcmp{width:36px;flex-shrink:0;border:1.5px solid var(--border);border-radius:8px;background:#fff;cursor:pointer;font-size:14px;color:var(--muted);display:flex;align-items:center;justify-content:center;transition:transform .2s}
.pcmp:hover{border-color:var(--accent);color:var(--accent)}
.btn-qb{flex:1;padding:9px 0;background:transparent;color:var(--accent);border:1.5px solid var(--accent);border-radius:8px;font-size:11px;font-weight:700;cursor:pointer;transition:transform .15s}
.btn-qb:hover{background:var(--accent);color:#fff}
.pgrid.lv .pcard{flex-direction:row;gap:0;align-items:flex-start}
.pgrid.lv .pimg{overflow:hidden;width:160px;height:160px;flex-shrink:0;font-size:52px;padding:0;border-radius:0}
.pgrid.lv .plmain{flex:1;min-width:0}
.pgrid.lv .pcard-body{padding:12px;flex:1}
.pgrid.lv .plside{width:170px;flex-shrink:0;display:flex;flex-direction:column;gap:8px}
.pgrid.lv .pname{padding:0}
.pgrid.lv .pprow{padding:0}
.pgrid.lv .prat{padding:0}
.pgrid.lv .pavail{padding:0}
.pgrid.lv .pacts{padding:0 0 12px}

/* ── Overlay + Cart drawer ── */
.overlay,.cart-overlay{position:fixed;inset:0;background:rgba(0,0,0,.3);backdrop-filter:blur(2px);z-index:199;opacity:0;pointer-events:none;transition:opacity .3s}
.overlay.on,.cart-overlay.on{opacity:1;pointer-events:all}
.cdrawer{position:fixed;top:0;right:-480px;bottom:0;width:480px;background:#fff;z-index:200;display:flex;flex-direction:column;transition:right .35s cubic-bezier(.25,.46,.45,.94);box-shadow:-8px 0 32px rgba(0,0,0,.1)}
.cdrawer.on{right:0}
.cdh{padding:20px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.cdtitle{font-size:16px;font-weight:800;color:var(--text)}
.cdclose{width:32px;height:32px;background:var(--bg);border:none;border-radius:8px;cursor:pointer;color:var(--muted);font-size:16px;display:flex;align-items:center;justify-content:center;transition:transform .2s}
.cdclose:hover{background:var(--border);color:var(--text)}
.cdbody{flex:1;overflow-y:auto;padding:16px 24px}
.cempty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--muted)}
.cempty-i{font-size:52px;opacity:.25}
.citem{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--border-soft)}
.cimg{width:64px;height:64px;background:var(--bg);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:28px;flex-shrink:0;overflow:hidden}
.cinfo{flex:1;min-width:0}
.cname{font-size:13px;margin-bottom:4px;line-height:1.35;font-weight:500}
.cprice{font-size:15px;font-weight:800;color:var(--accent);margin-bottom:8px}
.qrow{display:flex;align-items:center;gap:8px}
.qbtn{width:28px;height:28px;border:1.5px solid var(--border);border-radius:7px;background:#fff;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:transform .15s}
.qbtn:hover{border-color:var(--accent);color:var(--accent)}
.qval{font-size:14px;font-weight:600;min-width:22px;text-align:center}
.cdel{background:none;border:none;cursor:pointer;color:#cbd5e1;font-size:18px;align-self:flex-start;padding:4px}
.cdel:hover{color:var(--red)}
.cdfoot{padding:16px 24px 24px;border-top:1px solid var(--border)}
.cdfrow{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:6px}
.cdtot{display:flex;justify-content:space-between;font-size:17px;font-weight:800;margin-bottom:16px;padding-top:10px;border-top:1px solid var(--border)}
.cobtn{width:100%;padding:14px;background:var(--accent);color:#fff;border:none;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;transition:transform .2s;text-decoration:none;display:block;text-align:center}
.cobtn:hover{background:var(--accent-dark);transform:translateY(-1px)}

/* ── Checkout ── */
.co-ov{position:fixed;inset:0;background:rgba(0,0,0,.4);backdrop-filter:blur(4px);z-index:300;display:none}
.co-ov.on{display:block}
.co-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:301;width:640px;max-width:96vw;max-height:92vh;background:#fff;border-radius:20px;overflow:hidden;display:none;flex-direction:column;box-shadow:0 32px 80px rgba(0,0,0,.18)}
.co-modal.on{display:flex}
.co-head{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.co-head-title{font-size:15px;font-weight:700}
.co-head-x{background:none;border:none;font-size:20px;cursor:pointer;color:var(--muted);width:32px;height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center}
.co-head-x:hover{background:var(--bg)}
.co-steps{display:flex;gap:0;padding:12px 22px;border-bottom:1px solid var(--border);flex-shrink:0;background:var(--bg)}
.co-step{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--muted);flex:1}
.co-step.active{color:var(--accent)}
.co-step.done{color:var(--green)}
.co-step-num{width:22px;height:22px;border-radius:50%;background:var(--border);color:var(--muted);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.co-step.active .co-step-num{background:var(--accent);color:#fff}
.co-step.done .co-step-num{background:var(--green);color:#fff}
.co-body{padding:20px 22px;overflow-y:auto;flex:1}
.co-section-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:14px}
.co-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.co-field{display:flex;flex-direction:column;gap:5px}
.co-field.full{grid-column:span 2}
.co-field label{font-size:12px;font-weight:600;color:var(--muted)}
.co-field input,.co-field textarea{border:1.5px solid var(--border);border-radius:9px;padding:10px 14px;font-size:14px;outline:none;font-family:inherit}
.co-field textarea{min-height:70px;resize:vertical}
.co-field input:focus,.co-field textarea:focus{border-color:var(--accent)}
.pay-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}
.pay-opt{background:var(--bg);border:2px solid var(--border);border-radius:10px;padding:12px 14px;display:flex;align-items:center;gap:10px;cursor:pointer;transition:transform .15s}
.pay-opt:hover,.pay-opt.sel{border-color:var(--accent);background:var(--accent-light)}
.pay-ico{font-size:20px}
.pay-name{font-size:13px;font-weight:700}
.pay-desc{font-size:11px;color:var(--muted)}
.co-foot{padding:14px 22px;border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:10px;flex-shrink:0}
.cobtn-back{padding:11px 20px;border:1.5px solid var(--border);border-radius:9px;background:#fff;font-size:13px;cursor:pointer;font-weight:600;color:var(--muted)}
.cobtn-back:hover{border-color:var(--text);color:var(--text)}
.cobtn-next{padding:11px 28px;background:var(--accent);color:#fff;border:none;border-radius:9px;font-size:13px;font-weight:700;cursor:pointer;transition:transform .2s}
.cobtn-next:hover{background:var(--accent-dark)}
.co-ilist{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.co-irow{display:flex;align-items:center;gap:10px;font-size:13px;background:var(--bg);border-radius:8px;padding:8px 10px}
.co-irow-img{width:36px;height:36px;background:#fff;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;overflow:hidden}
.co-irow-img img{width:100%;height:100%;object-fit:contain}
.co-summary{background:var(--bg);border-radius:10px;padding:14px}
.co-srow{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);margin-bottom:6px}
.co-stot{display:flex;justify-content:space-between;font-size:16px;font-weight:800;padding-top:10px;border-top:1px solid var(--border)}
.co-success{text-align:center;padding:40px 20px}
.co-sico{font-size:56px;display:block;margin-bottom:14px}
.co-stitle{font-size:20px;font-weight:800;margin-bottom:8px;color:var(--green)}
.co-ssub{font-size:14px;color:var(--muted);margin-bottom:20px;line-height:1.6}
.co-onum{background:var(--bg);border-radius:12px;padding:16px;display:inline-block}
.co-onum-lbl{font-size:12px;color:var(--muted);margin-bottom:4px}
.co-onum-val{font-size:22px;font-weight:800;color:var(--accent)}

/* ── Wishlist & Compare badges ── */
.hbtn-wrap{position:relative;display:inline-flex}
.hbtn-cnt{position:absolute;top:-4px;right:-4px;background:var(--red);color:#fff;font-size:10px;font-weight:800;min-width:16px;height:16px;border-radius:8px;display:none;align-items:center;justify-content:center;padding:0 3px;line-height:1}
.hbtn-cnt.on{display:flex}

/* ── Wishlist Drawer ── */
.side-drawer{position:fixed;top:0;right:-420px;width:400px;max-width:95vw;height:100vh;background:#fff;box-shadow:-4px 0 24px rgba(0,0,0,.12);z-index:600;display:flex;flex-direction:column;transition:right .3s cubic-bezier(.4,0,.2,1)}
.side-drawer.on{right:0}
.sd-head{padding:18px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.sd-title{font-size:16px;font-weight:700}
.sd-x{background:none;border:none;font-size:20px;cursor:pointer;color:var(--muted);width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px}
.sd-x:hover{background:var(--bg);color:var(--text)}
.sd-body{flex:1;overflow-y:auto;padding:16px}
.sd-empty{text-align:center;padding:48px 20px;color:var(--muted)}
.sd-empty-ico{font-size:40px;margin-bottom:10px}
.wish-card{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border-soft)}
.wish-img{width:64px;height:64px;background:var(--bg);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:28px;flex-shrink:0;overflow:hidden}
.wish-img img{width:100%;height:100%;object-fit:contain}
.wish-name{font-size:13px;font-weight:600;line-height:1.35;margin-bottom:3px;cursor:pointer;color:var(--text)}
.wish-name:hover{color:var(--accent)}
.wish-price{font-size:14px;font-weight:800;color:var(--text)}
.wish-acts{display:flex;gap:6px;margin-top:6px}
.wish-btn{padding:5px 12px;border-radius:6px;border:1px solid var(--border);background:#fff;font-size:12px;font-weight:600;cursor:pointer;transition:transform .15s}
.wish-btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.wish-del{width:28px;height:28px;border-radius:6px;border:1px solid var(--border);background:#fff;cursor:pointer;font-size:13px;color:var(--muted);display:flex;align-items:center;justify-content:center;margin-left:auto;flex-shrink:0}
.wish-del:hover{background:#fff1f2;border-color:#f43f5e;color:#f43f5e}

/* ── Auth Modal ── */
.auth-ov{display:none;position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:700;backdrop-filter:blur(4px);align-items:center;justify-content:center}
.auth-ov.on{display:flex}
.auth-modal{background:#fff;border-radius:18px;width:100%;max-width:420px;padding:36px 32px;position:relative;animation:popIn .2s ease}
@keyframes popIn{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}
.auth-x{position:absolute;top:16px;right:16px;background:none;border:none;font-size:22px;cursor:pointer;color:var(--muted);width:32px;height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center}
.auth-x:hover{background:var(--bg)}
.auth-logo{text-align:center;margin-bottom:20px;font-size:22px;font-weight:800;letter-spacing:-.5px}
.auth-tabs{display:flex;background:var(--bg);border-radius:10px;padding:3px;margin-bottom:22px;gap:3px}
.auth-tab{flex:1;padding:9px;border:none;background:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;color:var(--muted);transition:transform .15s}
.auth-tab.active{background:#fff;color:var(--text);box-shadow:0 1px 6px rgba(0,0,0,.08)}
.auth-form{display:flex;flex-direction:column;gap:13px}
.auth-field{display:flex;flex-direction:column;gap:5px}
.auth-field label{font-size:12px;font-weight:600;color:var(--muted)}
.auth-field input{border:1.5px solid var(--border);border-radius:9px;padding:11px 14px;font-size:14px;outline:none;background:#fff}
.auth-field input:focus{border-color:var(--accent)}
.auth-submit{padding:13px;background:var(--accent);color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;transition:transform .2s;margin-top:4px}
.auth-submit:hover{background:var(--accent-dark);transform:translateY(-1px)}
.auth-divider{text-align:center;font-size:12px;color:var(--muted);margin:4px 0}
.auth-switch{text-align:center;font-size:13px;color:var(--muted);margin-top:6px}
.auth-switch a{color:var(--accent);cursor:pointer;font-weight:600}
.auth-error{background:#fff1f2;border:1px solid #fecdd3;border-radius:8px;padding:9px 12px;font-size:12px;color:#e11d48;display:none}
.auth-error.on{display:block}
.auth-success{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;padding:9px 12px;font-size:12px;color:#15803d;display:none}
.auth-success.on{display:block}

/* ── User menu ── */
.user-menu{position:absolute;top:calc(100% + 8px);right:0;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.12);min-width:200px;z-index:400;display:none;padding:8px 0}
.user-menu.on{display:block}
.um-item{display:flex;align-items:center;gap:10px;padding:10px 16px;cursor:pointer;font-size:13px;color:var(--text);transition:filter .12s}
.um-item:hover{background:var(--bg)}
.um-divider{height:1px;background:var(--border);margin:4px 0}
.um-head{padding:12px 16px 8px;border-bottom:1px solid var(--border);margin-bottom:4px}
.um-name{font-weight:700;font-size:14px}
.um-email{font-size:11px;color:var(--muted);margin-top:1px}

/* ── Compare bar ── */
.cmp-bar{position:fixed;bottom:0;left:0;right:0;background:var(--hbg);padding:10px 24px;display:none;align-items:center;gap:12px;z-index:500;box-shadow:0 -4px 20px rgba(0,0,0,.2)}
.cmp-bar.on{display:flex}
.cmp-bar-items{display:flex;gap:8px;flex:1;overflow-x:auto}
.cmp-bar-item{width:48px;height:48px;background:var(--hbg2);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;overflow:hidden;position:relative;cursor:pointer}
.cmp-bar-item img{width:100%;height:100%;object-fit:contain}
.cmp-bar-item .cmp-bar-x{position:absolute;top:-4px;right:-4px;width:16px;height:16px;background:var(--red);border-radius:50%;border:none;color:#fff;font-size:9px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.cmp-bar-btn{padding:10px 20px;background:var(--accent);color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;flex-shrink:0;text-decoration:none}
.cmp-bar-btn:hover{background:var(--accent-dark)}

/* ── Quick buy ── */
.qb-ov{display:none;position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:700;backdrop-filter:blur(4px);align-items:center;justify-content:center}
.qb-ov.on{display:flex}
.qb-modal{background:#fff;border-radius:18px;width:100%;max-width:400px;padding:28px 28px 24px;position:relative;animation:popIn .2s ease}
.qb-x{position:absolute;top:14px;right:14px;background:none;border:none;font-size:20px;cursor:pointer;color:var(--muted);width:32px;height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center}
.qb-x:hover{background:var(--bg)}
.qb-title{font-size:17px;font-weight:800;margin-bottom:4px}
.qb-sub{font-size:12px;color:var(--muted);margin-bottom:18px}
.qb-prod{display:flex;align-items:center;gap:12px;background:var(--bg);border-radius:10px;padding:10px 12px;margin-bottom:18px}
.qb-prod-img{width:48px;height:48px;border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;overflow:hidden;flex-shrink:0}
.qb-prod-img img{width:100%;height:100%;object-fit:contain}
.qb-prod-name{font-size:12px;font-weight:600;line-height:1.3;flex:1}
.qb-prod-price{font-size:15px;font-weight:800;flex-shrink:0;color:var(--text)}
.qb-fields{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.qb-field input{width:100%;border:1.5px solid var(--border);border-radius:9px;padding:12px 14px;font-size:14px;outline:none;font-family:inherit}
.qb-field input:focus{border-color:var(--accent)}
.qb-btn{width:100%;padding:14px;background:var(--accent);color:#fff;border:none;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;transition:transform .2s;display:flex;align-items:center;justify-content:center;gap:8px}
.qb-btn:hover{background:var(--accent-dark);transform:translateY(-1px)}
.qb-note{text-align:center;font-size:11px;color:var(--muted);margin-top:10px}
.qb-success{text-align:center;padding:20px 0;display:none}
.qb-success-ico{font-size:48px;margin-bottom:10px}
.qb-success-title{font-size:17px;font-weight:700;margin-bottom:6px;color:var(--green)}
.qb-success-sub{font-size:13px;color:var(--muted)}

/* ── Toast ── */
.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--text);color:#fff;padding:12px 24px;border-radius:50px;font-size:13px;font-weight:600;z-index:9999;transition:transform .35s cubic-bezier(.34,1.56,.64,1);pointer-events:none;white-space:nowrap;box-shadow:var(--shadow-lg)}
.toast.on{transform:translateX(-50%) translateY(0)}

/* ── Footer ── */
footer{background:var(--hbg);color:#64748b;margin-top:48px;padding:44px 0 24px}
.fi{max-width:1300px;margin:0 auto;padding:0 24px}
.fg{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
.flogo{font-size:22px;font-weight:900;color:#fff;margin-bottom:14px;letter-spacing:-.06em;display:flex;align-items:center;gap:4px}
.fdesc{font-size:12px;line-height:1.7;max-width:220px;margin-bottom:20px;color:#475569}
.fcol h4{font-size:11px;font-weight:700;color:#94a3b8;margin-bottom:14px;text-transform:uppercase;letter-spacing:.07em}
.fcol ul{list-style:none}
.fcol li{margin-bottom:8px}
.fcol a{font-size:12px;color:#475569;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.fcol a:hover{color:#fff}
.fbot{border-top:1px solid #1e293b;padding-top:20px;display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#334155;flex-wrap:wrap;gap:12px}
.fsocs{display:flex;gap:8px}
.fsoc{width:30px;height:30px;background:#1e293b;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;transition:transform .2s}
.fsoc:hover{background:var(--accent)}

/* ── Lang switch ── */




/* ── Catalog mega dropdown ── */
.cat-drop-ov{display:none;position:fixed;inset:0;z-index:149;background:rgba(0,0,0,.35)}
.cat-drop-ov.on{display:block}
.cat-drop{display:none;position:fixed;left:0;right:0;top:var(--header-h,122px);z-index:150;background:#fff;box-shadow:0 8px 40px rgba(0,0,0,.14);border-bottom:1px solid var(--border-soft);max-height:calc(100vh - 130px);overflow-y:auto}
.cat-drop.on{display:block;animation:dropIn .18s ease}
@keyframes dropIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.cat-drop-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:220px 1fr;min-height:340px}
.cat-col-left{background:var(--bg);border-right:1px solid var(--border);padding:10px 0}
.cat-col-left-item{display:flex;align-items:center;gap:10px;padding:11px 18px;cursor:pointer;color:var(--text);font-size:13px;font-weight:500;transition:filter .12s}
.cat-col-left-item:hover,.cat-col-left-item.active{background:var(--accent-light);color:var(--accent)}
.cat-col-left-item .ci-ico{width:28px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cat-col-left-item .ci-ico svg{display:block}
.cat-col-left-item .ci-arr{margin-left:auto;color:var(--muted);font-size:12px}
.cat-col-right{padding:24px 28px;display:none}
.cat-col-right.active{display:block}
.cat-sub-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.cat-sub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 16px}
.cat-sub-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;cursor:pointer;color:var(--text);font-size:13px;font-weight:500;transition:filter .12s;border:none;background:none;text-align:left;text-decoration:none;width:100%}
.cat-sub-item:hover{background:var(--accent-light);color:var(--accent)}
.cs-ico{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:22px}
.cs-cnt{font-size:11px;color:var(--muted);margin-left:auto}
.cat-drop-all{display:flex;align-items:center;gap:8px;padding:12px 18px;color:var(--accent);font-size:13px;font-weight:700;cursor:pointer;border-top:1px solid var(--border);text-decoration:none}
.cat-drop-all:hover{background:var(--accent-light)}

/* ── Orders modal ── */
.orders-ov{display:none;position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:700;backdrop-filter:blur(4px);align-items:flex-start;justify-content:center;padding:40px 20px;overflow-y:auto}
.orders-ov.on{display:flex}
.orders-modal{background:#fff;border-radius:16px;width:100%;max-width:680px;overflow:hidden}
.orders-head{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.orders-title{font-size:16px;font-weight:700}
.orders-x{background:none;border:none;font-size:20px;cursor:pointer;color:var(--muted)}
.orders-body{padding:20px;max-height:70vh;overflow-y:auto}
.order-row{border:1px solid var(--border);border-radius:10px;padding:16px;margin-bottom:12px}
.order-row-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.order-row-id{font-weight:700;color:var(--accent);font-size:14px}
.order-row-date{font-size:12px;color:var(--muted)}
.order-row-total{font-weight:800;font-size:15px;margin-left:auto}
.order-row-status{padding:3px 10px;border-radius:5px;font-size:11px;font-weight:700}
.order-row-items{display:flex;flex-direction:column;gap:6px}
.order-row-item{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}

/* ── Product detail page ── */
.pd-wrap{max-width:1300px;margin:0 auto;padding:20px 24px}
.pd-crumb{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin-bottom:20px;flex-wrap:wrap}
.pd-crumb a{color:var(--accent);text-decoration:none}.pd-crumb a:hover{text-decoration:underline}
.pd-crumb-sep{color:var(--border)}
.pd-main{display:grid;grid-template-columns:1fr 420px;gap:28px;align-items:start;background:#fff;border-radius:20px;border:1.5px solid var(--border);overflow:hidden}
.pd-gal{padding:24px;border-right:1px solid var(--border)}
.pd-big{background:var(--bg);border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:130px;height:460px;margin-bottom:12px;overflow:hidden;position:relative;cursor:zoom-in}
.pd-big-zoom{position:absolute;inset:0;overflow:hidden;border-radius:16px;display:block}
.pd-big-zoom img{width:100%;height:100%;object-fit:contain;display:block;transform-origin:50% 50%;transition:transform .05s ease;will-change:transform}
.pd-big:hover .pd-big-zoom img{transform:scale(2)}
.pd-zoom-lens{position:absolute;width:120px;height:120px;border:2px solid rgba(100,120,255,.5);border-radius:4px;background:rgba(100,120,255,.08);pointer-events:none;display:none;z-index:1}
.pd-big:hover .pd-zoom-lens{display:block}
/* pd-big img handled inside .pd-big-zoom */
.pd-thumbs{display:flex;gap:8px}
.pd-thumb{width:72px;height:72px;background:var(--bg);border:2px solid var(--border);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:26px;cursor:pointer;transition:transform .2s;overflow:hidden}
.pd-thumb:hover,.pd-thumb.active{border-color:var(--accent)}
.pd-thumb img{width:100%;height:100%;object-fit:contain}
.pd-info{padding:28px;display:flex;flex-direction:column;gap:14px;overflow-y:auto}
.pd-brand{font-size:11px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.08em}
h1.pd-name,.pd-name{font-size:20px;font-weight:800;line-height:1.25;color:var(--text);margin:0;padding:0}
.pd-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pd-stars{color:#f59e0b;font-size:14px}
.pd-rv{font-size:12px;color:var(--muted)}
.pd-code{font-size:11px;color:var(--muted)}
.pd-pbox{background:var(--bg);border-radius:12px;padding:16px}
.pd-price{font-size:28px;font-weight:800;color:var(--text)}
.pd-old{font-size:14px;color:#cbd5e1;text-decoration:line-through;margin-left:8px}
.pd-disc{background:#fee2e2;color:var(--red);font-size:12px;font-weight:700;padding:3px 8px;border-radius:6px;margin-left:8px}
.pd-save{font-size:12px;color:var(--green);font-weight:600;margin-top:4px}
.pd-avrow{display:flex;align-items:center;gap:8px;margin-top:8px}
.avdot{width:8px;height:8px;border-radius:50%;background:var(--green)}
.avdot.low{background:var(--amber)}
.avdot.preorder{background:#3b82f6}
.avtxt.preorder{color:#3b82f6}
.avtxt{font-size:13px;font-weight:700;color:var(--green)}
.avtxt.low{color:var(--amber)}
.pd-acts{display:flex;flex-direction:column;gap:8px}
.btn-bn{padding:14px;background:var(--accent);color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;transition:transform .2s}
.btn-bn:hover{background:var(--accent-dark);transform:translateY(-1px)}
.btn-ac{padding:12px;background:#fff;color:var(--accent);border:2px solid var(--accent);border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;transition:transform .2s}
.btn-ac:hover{background:var(--accent-light)}
.btn-ac.added{background:var(--green);color:#fff;border-color:var(--green)}
.pd-ext{display:flex;gap:8px;flex-wrap:wrap}
.pieb{flex:1;padding:8px;border:1.5px solid var(--border);border-radius:8px;background:#fff;font-size:11px;cursor:pointer;color:var(--muted);transition:transform .2s;display:flex;align-items:center;justify-content:center;gap:4px;font-weight:500;min-width:0}
.pieb:hover{border-color:var(--accent);color:var(--accent)}

/* ── Tabs (product detail) ── */
.pd-tabs{background:#fff;border:1.5px solid var(--border);border-radius:var(--r);margin-top:24px;overflow:hidden}
.tabs-nav{display:flex;border-bottom:1px solid var(--border);padding:0 16px;background:#fff}
.tbtn{padding:14px 18px;font-size:13px;font-weight:600;cursor:pointer;border-bottom:2px solid transparent;color:var(--muted);background:none;border-top:none;border-left:none;border-right:none;margin-bottom:-1px}
.tbtn:hover{color:var(--text)}
.tbtn.active{color:var(--accent);border-bottom-color:var(--accent)}
.tpanel{display:none;padding:24px}
.tpanel.active{display:block}
.dtxt{font-size:14px;line-height:1.8;color:#334155;max-width:680px}
.yt-wrap{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:680px;margin-top:20px;border-radius:10px}
.yt-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:10px}
.dtxt p{margin-bottom:12px}
.dtxt ul{padding-left:20px;margin-bottom:12px}
.feat-g{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.feat-c{background:var(--bg);border-radius:10px;padding:16px;text-align:center}
.feat-i{font-size:24px;margin-bottom:6px}
.feat-t{font-size:12px;font-weight:700;margin-bottom:3px}
.feat-d{font-size:11px;color:var(--muted)}
.stbl{width:100%;border-collapse:collapse}
.stbl tr{border-bottom:1px solid var(--border-soft)}
.stbl tr:last-child{border-bottom:none}
.stbl td{padding:10px 14px;font-size:13px;vertical-align:top}
.stbl td:first-child{color:var(--muted);width:42%;font-size:12px}
.stbl td:last-child{font-weight:600}
.sgrp{font-size:12px;font-weight:700;padding:12px 14px 5px;background:var(--bg);color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.rev-sum{display:flex;gap:28px;align-items:center;padding:20px;background:var(--bg);border-radius:12px;margin-bottom:18px}
.rev-big{font-size:52px;font-weight:800;line-height:1;color:var(--text)}
.rev-stars{color:#f59e0b;font-size:20px;letter-spacing:-1px;margin-bottom:3px}
.rev-cnt{font-size:12px;color:var(--muted)}
.rbar-row{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.rbar-l{font-size:12px;color:var(--muted);width:30px;text-align:right;flex-shrink:0}
.rbar-t{flex:1;height:5px;background:var(--border);border-radius:10px;overflow:hidden}
.rbar-f{height:100%;background:#f59e0b;border-radius:10px}
.rbar-n{font-size:11px;color:var(--muted);width:28px}
.rev-card{border:1.5px solid var(--border);border-radius:10px;padding:16px;margin-bottom:10px}
.rev-hd{display:flex;justify-content:space-between;margin-bottom:8px}
.rev-au{font-size:13px;font-weight:700}
.rev-dt{font-size:11px;color:var(--muted)}
.rev-st{color:#f59e0b;font-size:13px;letter-spacing:-.5px;margin-bottom:7px}
.rev-tx{font-size:13px;line-height:1.65;color:#475569}
.rev-pro{font-size:12px;margin-top:8px;color:var(--green);font-weight:500}
.rev-con{font-size:12px;margin-top:4px;color:var(--red);font-weight:500}

/* ── Similar products ── */
.sim-section{padding:0 0 16px}
.sim-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.sim-c{border:1.5px solid var(--border);border-radius:var(--r);padding:14px;cursor:pointer;background:#fff;transition:transform .2s;text-decoration:none;display:block}
.sim-c:hover{box-shadow:var(--shadow-md);border-color:transparent;transform:translateY(-1px)}
.sim-img{font-size:52px;text-align:center;padding:8px 0;line-height:1;height:80px;display:flex;align-items:center;justify-content:center;background:var(--bg);border-radius:8px;overflow:hidden;margin-bottom:8px}
.sim-img img{width:100%;height:100%;object-fit:contain}
.sim-br{font-size:10px;color:var(--accent);font-weight:700;text-transform:uppercase;margin-bottom:3px;letter-spacing:.05em}
.sim-nm{font-size:12px;line-height:1.35;margin-bottom:8px;font-weight:500;color:var(--text)}
.sim-pr{font-size:14px;font-weight:800;color:var(--text)}

/* ── Size selector ── */
.sz-block{margin-bottom:14px}
.sz-label{font-size:12px;font-weight:700;color:var(--muted);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.sz-label span{color:var(--text);font-weight:800}
.sz-btns{display:flex;gap:6px;flex-wrap:wrap}
.sz-btn{min-width:44px;height:38px;padding:0 10px;border:1.5px solid var(--border);border-radius:8px;background:#fff;color:var(--text);font-size:13px;font-weight:600;cursor:pointer;transition:transform .15s;display:flex;align-items:center;justify-content:center}
.sz-btn:hover{border-color:var(--accent);color:var(--accent)}
.sz-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}
.sz-error{font-size:12px;color:var(--red);margin-top:6px;display:none}

/* ── Color variants ── */
.cv-block{margin-bottom:14px}
.cv-label{font-size:12px;font-weight:700;color:var(--muted);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.cv-label span{color:var(--text);font-weight:800}
.cv-swatches{display:flex;gap:8px;flex-wrap:wrap}
.cv-swatch{width:34px;height:34px;border-radius:50%;border:2.5px solid transparent;cursor:pointer;transition:transform .18s;flex-shrink:0}
.cv-swatch:hover{transform:scale(1.12)}
.cv-swatch.active{border-color:var(--accent);box-shadow:0 0 0 2px #fff,0 0 0 4px var(--accent)}

/* ── About/Delivery page ── */
.info-page{max-width:900px;margin:0 auto;padding:20px 24px}
.info-hero{background:var(--hbg);border-radius:20px;padding:40px 48px;margin-bottom:28px;position:relative;overflow:hidden}
.info-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 70% 50%,rgba(37,99,235,.25),transparent 70%)}
.info-hero-label{display:inline-block;background:var(--accent);color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;padding:4px 12px;border-radius:20px;margin-bottom:14px;letter-spacing:.06em;position:relative}
.info-hero-title{font-size:clamp(22px,3vw,36px);font-weight:800;color:#fff;line-height:1.2;position:relative}
.info-hero-sub{color:rgba(255,255,255,.5);font-size:14px;margin-top:8px;position:relative}
.info-card{background:#fff;border:1.5px solid var(--border);border-radius:var(--r);padding:28px;margin-bottom:16px}
.info-section-title{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:800;color:var(--text);margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.info-section-num{width:26px;height:26px;background:var(--accent);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}
.info-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.info-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.info-method{background:var(--bg);border-radius:12px;padding:16px;display:flex;align-items:flex-start;gap:12px;border:1.5px solid var(--border)}
.info-method-ico{font-size:26px;flex-shrink:0}
.info-method-title{font-size:13px;font-weight:700;margin-bottom:4px}
.info-method-desc{font-size:12px;color:var(--muted);line-height:1.5}
.info-highlight{background:var(--accent-light);border-left:4px solid var(--accent);border-radius:0 10px 10px 0;padding:14px 18px;font-size:13px;color:#1e40af;line-height:1.65;margin-bottom:12px}
.info-text{font-size:14px;line-height:1.8;color:#475569;margin-bottom:10px}
.info-text strong{color:var(--text)}
.info-promises{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.info-promise{text-align:center;background:var(--bg);border-radius:12px;padding:20px 14px}
.info-promise-ico{font-size:30px;margin-bottom:8px}
.info-promise-tx{font-size:12px;font-weight:600;color:var(--text);line-height:1.45}
.info-step{display:flex;align-items:flex-start;gap:12px;background:var(--bg);border-radius:10px;padding:14px 16px;margin-bottom:8px}
.info-step-num{width:26px;height:26px;background:var(--accent);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex-shrink:0;margin-top:1px}
.info-step-tx{font-size:13px;color:var(--text);line-height:1.55}
.info-step-tx small{display:block;color:var(--muted);font-size:12px;margin-top:3px}
.info-contact-bar{background:var(--hbg);border-radius:14px;padding:18px 22px;display:flex;gap:24px;flex-wrap:wrap;align-items:center}
.info-contact-item{display:flex;align-items:center;gap:8px;font-size:13px;color:#94a3b8}
.info-contact-item strong{color:#fff}
.info-sign{margin-top:16px;padding-top:16px;border-top:1px solid var(--border);font-size:14px;color:var(--text);font-weight:600;text-align:center}

/* ── Cart page ── */
.cart-page{max-width:1100px;margin:0 auto;padding:20px 24px}
.cart-page-layout{display:grid;grid-template-columns:1fr 360px;gap:20px;align-items:start}
.cart-items-wrap{background:#fff;border:1.5px solid var(--border);border-radius:var(--r);overflow:hidden}
.cart-items-head{padding:16px 20px;border-bottom:1px solid var(--border);font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:space-between}
.cart-item-row{display:flex;gap:16px;padding:16px 20px;border-bottom:1px solid var(--border-soft);align-items:flex-start}
.cart-item-row:last-child{border-bottom:none}
.cart-item-img{width:80px;height:80px;background:var(--bg);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:36px;flex-shrink:0;overflow:hidden}
.cart-item-img img{width:100%;height:100%;object-fit:contain}
.cart-item-info{flex:1;min-width:0}
.cart-item-name{font-size:14px;font-weight:600;margin-bottom:4px;line-height:1.4;color:var(--text)}
.cart-item-price{font-size:13px;color:var(--muted);margin-bottom:10px}
.cart-item-total{font-size:16px;font-weight:800;color:var(--text);white-space:nowrap;flex-shrink:0;text-align:right}
.cart-item-del{display:block;background:none;border:none;color:#cbd5e1;cursor:pointer;font-size:16px;margin-top:4px}
.cart-item-del:hover{color:var(--red)}
.cart-summary-wrap{background:#fff;border:1.5px solid var(--border);border-radius:var(--r);padding:20px;position:sticky;top:80px}
.cart-summary-title{font-size:15px;font-weight:700;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.cart-sum-row{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);margin-bottom:8px}
.cart-sum-total{display:flex;justify-content:space-between;font-size:18px;font-weight:800;padding-top:12px;border-top:1px solid var(--border);margin-top:4px;margin-bottom:16px}
.cart-empty-pg{text-align:center;padding:60px 24px;color:var(--muted)}
.cart-empty-ico{font-size:56px;margin-bottom:16px}
.cart-empty-title{font-size:18px;font-weight:700;margin-bottom:8px;color:var(--text)}

/* ── Responsive ── */

@media(max-width:900px){
  .sidebar-wrap{display:none!important;position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.5)}
  .sidebar-wrap.open{display:block!important}
  .sidebar-wrap .sidebar{display:block!important;position:fixed!important;left:0;top:0;bottom:0;width:300px;overflow-y:auto;z-index:501;transform:translateX(-100%);transition:transform .25s;border-radius:0;border:none;box-shadow:4px 0 20px rgba(0,0,0,.2)}
  .sidebar-wrap.open .sidebar{transform:translateX(0)}
}
/* ── Mobile sort bar fix (overflow prevention) ── */
@media(max-width:768px){
  .mlayout>div:last-child{min-width:0;overflow-x:hidden}
  .cat-hd{overflow:hidden}
  .sortg{flex-wrap:wrap;gap:4px}
}

@media(max-width:1024px){
  .mlayout{grid-template-columns:1fr}
  .sidebar{position:static;display:none}
  .pg{grid-template-columns:repeat(2,1fr)}
  .feat-prods{grid-template-columns:repeat(2,1fr)}
  .fg{grid-template-columns:1fr 1fr;gap:28px}
  .pd-main{grid-template-columns:1fr}
  .pd-gal{border-right:none;border-bottom:1px solid var(--border)}
  .cart-page-layout{grid-template-columns:1fr}
  .cart-summary-wrap{position:static}
}
@media(max-width:768px){
  #site-header{min-height:106px}
  .catgrid{min-height:780px}
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .promo-row{grid-template-columns:1fr}
  .info-grid-2,.info-grid-3{grid-template-columns:1fr}
  .co-grid{grid-template-columns:1fr}
  .co-field.full{grid-column:span 1}
  .sim-grid{grid-template-columns:repeat(2,1fr)}
  .feat-g{grid-template-columns:1fr 1fr}
  .cart-page-layout{grid-template-columns:1fr}
}
@media(max-width:600px){
  .pgrid{grid-template-columns:repeat(2,1fr);gap:8px}
  .banner{padding:24px 20px}
  .bdevice{display:none}
  .fg{grid-template-columns:1fr}
  .feat-prods{grid-template-columns:1fr 1fr;min-height:780px}
  .info-promises{grid-template-columns:1fr 1fr}
  .h-acts .hbtn:not(#cartBtn):not(#accountBtn){display:none}
}


/* ══════════════════════════════════════
   MOBILE ADAPTIVE (≤480px)
   ══════════════════════════════════════ */
@media(max-width:480px){
  /* Header */
  .h-in{padding:0 10px;gap:8px;height:56px;overflow:hidden}
  .logo{font-size:19px;flex-shrink:0}
  /* Кнопка каталогу — іконка + слово, але компактна та синя */
  .catbtn{padding:0 12px;height:38px;font-size:12px;font-weight:700;gap:5px;background:var(--accent);flex-shrink:0}
  .catbtn:hover,.catbtn.open{background:var(--accent-dark,#1d4ed8)}
  .catbtn span{display:inline}
  .blines{width:14px;flex-shrink:0}
  .blines span{height:2px}
  /* Поле пошуку — займає весь залишок простору */
  .srch{flex:1;min-width:0}
  .srch input{font-size:13px;padding:0 44px 0 10px}
  /* Ховаємо перемикач мови і зайві кнопки — залишаємо тільки акаунт і кошик */
  .lang-sw{display:none!important}
  .h-acts{gap:4px;flex-shrink:0}
  .hbtn{padding:4px 6px;font-size:9px}
  .hbtn-i{font-size:18px}
  .hbtn span:last-child{display:none}
  #cartBtn span:last-child{display:none}
  #accountBtn span:last-child{display:none}
  
  .topbar{display:none}
  .nav-in{overflow-x:auto;padding:0 12px;gap:4px}
  .nlink{font-size:11px;padding:6px 8px;white-space:nowrap}

  /* Page */
  .page{padding:8px 6px}
  .pd-wrap,.pd-gal{padding:12px}

  /* Catalog */
  .mlayout{grid-template-columns:1fr;gap:12px}
  .pgrid{grid-template-columns:repeat(2,1fr);gap:8px}
  .sortl{display:none}
  .sortg{margin-left:0;flex-wrap:wrap;gap:4px}
  .sbtn{padding:5px 8px;font-size:11px}
  .cat-hd{padding:8px 10px;gap:6px}
  .pimg{aspect-ratio:3/4}
  .pcard-body{padding:8px 10px 4px}
  .pname{font-size:12px}
  .pprice{font-size:15px}
  .pacts{padding:0 10px 10px;gap:5px}
  .pbuy{font-size:12px;padding:8px 0}
  .btn-qb{font-size:10px;padding:8px 0}
  .pcmp{width:30px}

  /* Filter sidebar — hidden, toggle with button */
  .sidebar-wrap{display:none;position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.5)}
  .sidebar-wrap.open{display:block}
  .sidebar{position:fixed;left:0;top:0;bottom:0;width:280px;overflow-y:auto;z-index:501;transform:translateX(-100%);transition:transform .25s}
  .sidebar-wrap.open .sidebar{transform:translateX(0)}
  .mobile-filter-btn{display:flex;align-items:center;gap:6px;padding:8px 14px;background:var(--surface);border:1px solid var(--border);border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;margin-bottom:12px}
  .mobile-filter-close{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border);font-size:15px;font-weight:700}
  .mobile-filter-close button{background:none;border:none;font-size:20px;cursor:pointer;color:var(--muted)}

  /* Product page */
  .pd-main{grid-template-columns:1fr}
  .pd-gal{padding:8px}
  .pd-big{height:320px}
  .pd-info{padding:12px 16px}
  .pd-name{font-size:18px;line-height:1.3;word-break:break-word}
  .pd-price{font-size:24px}
  .pd-acts{flex-direction:column;gap:10px}
  .btn-bn,.btn-ac{width:100%;padding:14px;font-size:15px}
  .pd-ext{flex-wrap:wrap;gap:6px}
  .pieb{flex:1;min-width:calc(50% - 4px);font-size:11px}
  .tabs-nav{overflow-x:auto;flex-wrap:nowrap;gap:0;border-bottom:1px solid var(--border)}
  .tbtn{font-size:13px;padding:10px 14px;white-space:nowrap;flex-shrink:0}
  .pd-crumb{font-size:11px;padding:6px 8px;word-break:break-word}
  .pd-meta{font-size:12px}
  .var-sw{flex-wrap:wrap}
  .sz-list{flex-wrap:wrap}

  /* Cart page */
  .cart-page{padding:12px}
  .cart-layout{grid-template-columns:1fr}
  .ci-grid{grid-template-columns:56px 1fr}
  .checkout-steps{gap:0;overflow-x:auto;padding-bottom:4px}
  .step-label{font-size:11px;white-space:nowrap}
  .step-num{width:32px;height:32px;font-size:13px}
  .form-row{grid-template-columns:1fr}
  .payment-options{grid-template-columns:1fr}
  .delivery-options{gap:8px}

  /* Cart drawer */
  .cdrawer{width:100vw;max-width:100vw}

  /* Banners */
  .banner{padding:28px 16px}
  .btitle{font-size:22px}
  .bdesc{font-size:13px}

  /* Category grid */
  .cg-tiles{grid-template-columns:repeat(3,1fr);gap:6px}

  /* Footer */
  .fg{grid-template-columns:1fr 1fr;gap:20px}
  .fi{padding:28px 16px 0}
  .fb{padding:16px}
  .fb-inner{flex-direction:column;gap:12px;text-align:center}

  /* Quick bar */
  #quickCatBar{overflow-x:auto;white-space:nowrap;padding-bottom:4px;scrollbar-width:none}
  #quickCatBar::-webkit-scrollbar{display:none}

  /* Breadcrumb */
  .pd-crumb{font-size:11px;padding:8px 12px;flex-wrap:wrap;gap:4px}

  /* Sort bar */
  .sort-bar{flex-wrap:wrap;gap:6px}
  .rcnt{font-size:12px}

  /* Pagination */
  .pag-btns{flex-wrap:wrap;gap:3px}
  .pag-btn{min-width:32px;height:32px;font-size:13px}
  .pag-wrap{gap:8px}

  /* ── Catalog mega dropdown — mobile ── */
  .cat-drop{top:var(--header-h,100px);max-height:80vh}
  .cat-drop-inner{grid-template-columns:1fr!important;min-height:unset!important;display:flex;flex-direction:column}
  /* Горизонтальний рядок батьківських категорій */
  .cat-col-left{border-right:none;border-bottom:1px solid var(--border);padding:4px 0;display:flex!important;flex-wrap:nowrap;overflow-x:auto;gap:0;scrollbar-width:none;background:var(--bg)}
  .cat-col-left::-webkit-scrollbar{display:none}
  .cat-col-left-item{flex-direction:column;padding:8px 10px;font-size:10px;gap:3px;align-items:center;text-align:center;white-space:nowrap;flex-shrink:0;border-bottom:none;border-radius:0}
  .cat-col-left-item.active{background:var(--accent-light);color:var(--accent);border-bottom:2px solid var(--accent)}
  .cat-col-left-item .ci-arr{display:none}
  .cat-col-left-item .ci-ico{width:auto;justify-content:center}
  /* Підкатегорії — повна ширина під рядком */
  #catDropRight{padding:12px 14px;flex:1}
  .cat-sub-grid{grid-template-columns:repeat(2,1fr);gap:4px 8px}
  .cat-sub-item{padding:7px 8px;font-size:12px}
  .cs-ico{width:20px}
  .cat-drop-all{padding:10px 16px;font-size:12px}
}

/* ══════════════════════════════════════
   TABLET ADAPTIVE (481–768px)
   ══════════════════════════════════════ */
@media(min-width:481px) and (max-width:768px){
  .h-in{padding:0 16px;gap:10px}
  .page,.pd-wrap{padding:16px}
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .topbar{display:none}
  
  .hbtn span:last-child{font-size:9px}
}

/* ══════════════════════════════════════
   MOBILE FILTER TOGGLE (JS hook)
   ══════════════════════════════════════ */
.mobile-filter-btn{display:none}
.mobile-filter-close{display:none}
@media(max-width:768px){
  .mobile-filter-btn{display:flex}
  .mobile-filter-close{display:flex}
  .pwrap{padding:4px}
  .pwrap>.mlayout>.sidebar-col{display:none}
  .pwrap>.mlayout>.sidebar-col.mob-open{display:block;position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.5)}
}

/* ── Lightbox ── */
.lb-ov{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:9999;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s;backdrop-filter:blur(6px)}
.lb-ov.on{opacity:1;pointer-events:all}
.lb-wrap{position:relative;max-width:92vw;max-height:90vh;display:flex;align-items:center;justify-content:center}
.lb-img{max-width:92vw;max-height:88vh;object-fit:contain;border-radius:8px;user-select:none;display:block;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lb-close{position:fixed;top:16px;right:20px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.15);border:none;color:#fff;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:filter .15s;z-index:10000}
.lb-close:hover{background:rgba(255,255,255,.28)}
.lb-prev,.lb-next{position:fixed;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.15);border:none;color:#fff;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:filter .15s;z-index:10000}
.lb-prev{left:12px}.lb-next{right:12px}
.lb-prev:hover,.lb-next:hover{background:rgba(255,255,255,.28)}
.lb-counter{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.7);font-size:14px;z-index:10000}
.lb-thumbs{position:fixed;bottom:40px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:10000}
.lb-thumb{width:56px;height:56px;border-radius:6px;object-fit:cover;cursor:pointer;opacity:.55;border:2px solid transparent;transition:transform .15s}
.lb-thumb.active,.lb-thumb:hover{opacity:1;border-color:#fff}

/* ── Pagination ── */
.pag-wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:24px 0 8px;grid-column:1/-1}
.pag-info{font-size:13px;color:var(--muted)}
.pag-btns{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.pag-btn{min-width:36px;height:36px;padding:0 8px;border:1.5px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);font-size:14px;font-weight:500;cursor:pointer;transition:transform .15s;display:flex;align-items:center;justify-content:center}
.pag-btn:hover:not(:disabled):not(.active){border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,var(--surface))}
.pag-btn.active{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:700}
.pag-btn:disabled{opacity:.35;cursor:not-allowed}
.pag-arr{font-size:18px;font-weight:400}
.pag-dots{padding:0 4px;color:var(--muted);font-size:16px;user-select:none}
.pag-perpage{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.pag-pp{height:30px;padding:0 10px;border:1.5px solid var(--border);border-radius:6px;background:var(--surface);color:var(--text);font-size:13px;cursor:pointer;transition:transform .15s}
.pag-pp:hover,.pag-pp.active{border-color:var(--accent);color:var(--accent)}
.pag-pp.active{background:color-mix(in srgb,var(--accent) 8%,var(--surface));font-weight:700}
@media(max-width:600px){.pag-wrap{flex-direction:column;align-items:flex-start}.pag-info{order:3}}

/* ── Language switcher ── */
.lang-sw{display:flex;align-items:center;gap:2px;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:2px;flex-shrink:0}
.lang-btn{padding:4px 10px;border:none;background:none;border-radius:6px;font-size:11px;font-weight:700;cursor:pointer;color:var(--muted);transition:transform .15s;white-space:nowrap}
.lang-btn:hover{color:var(--text)}
.lang-btn.active{background:var(--accent);color:#fff}
@media(max-width:420px){
  .lang-btn{padding:4px 4px;font-size:13px}
  .lang-code{display:none}
}

@media(max-width:480px){
  .pd-name{font-size:18px;word-break:break-word}
  .pd-info{padding:12px}
  .pd-price{font-size:24px}
  .pd-acts{flex-direction:column;gap:8px}
  .btn-bn,.btn-ac{width:100%;padding:14px;font-size:14px}
  .pd-crumb{font-size:10px;padding:8px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tabs-nav{gap:4px}
  .tbtn{font-size:12px;padding:7px 12px}
  .cv-swatch,.cv-swatch-emoji{width:30px!important;height:30px!important}
}

/* ── Mobile overflow fix ── */
@media(max-width:480px){
  html,body{overflow-x:hidden;max-width:100vw}
  .page,.pd-wrap{overflow-x:hidden}
  /* Product card - prevent cut-off */
  .pgrid{width:100%;box-sizing:border-box}
  .pcard{width:100%;box-sizing:border-box;overflow:hidden}
  /* Product page info */
  .pd-info{padding:12px!important}
  .pd-name{font-size:17px!important;word-break:break-word}
  .pd-price{font-size:24px!important}
  /* Variants scroll */
  .pd-variants{overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* Actions full width */
  .pd-acts{flex-direction:column;gap:8px}
  .btn-bn,.btn-ac{width:100%!important;padding:14px!important}
  .pd-ext{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
  .pieb{font-size:11px;padding:8px 4px}
  /* Color swatches */
  .pd-swatches{display:flex;flex-wrap:wrap;gap:6px}
}

.pcard-link{cursor:pointer}

/* ── Product card image dots ── */
.pcard-dots{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);display:flex;gap:4px;opacity:0;transition:opacity .2s;z-index:3;pointer-events:none}
.pimg:hover .pcard-dots{opacity:1}
.pcard-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.5);transition:transform .15s,opacity .15s}
.pcard-dot.active{background:#fff;transform:scale(1.3)}

.pprice-sale{color:var(--red,#e53e3e)!important;font-weight:800}

.pcmp.on{background:var(--accent)!important;color:#fff!important;border-color:var(--accent)!important}

.fsoc{width:40px;height:40px;background:rgba(255,255,255,.08);border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:filter .2s,transform .2s;text-decoration:none;color:#fff}
.fsoc:hover{background:rgba(255,255,255,.18);transform:translateY(-2px)}
.fsoc-tg{background:#2AABEE}
.fsoc-tg:hover{background:#1d96d6}

/* 2 колонки від 390px (більшість сучасних телефонів) */
@media(min-width:390px) and (max-width:480px){
  .pgrid{grid-template-columns:repeat(2,1fr);gap:8px}
  .pcard-body{padding:6px 8px 6px}
  .pname{font-size:11px}
  .pprice{font-size:13px}
  .pbuy{font-size:11px;padding:8px 0}
  .btn-qb{font-size:10px;padding:7px 0}
  .pcmp{width:30px;height:30px}
}

/* iPhone safe area (notch/home bar support) */
@supports (padding: env(safe-area-inset-bottom)) {
  footer, .footer-wrap { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .cmp-bar { bottom: env(safe-area-inset-bottom); }
  .side-drawer { padding-bottom: env(safe-area-inset-bottom); }
}

.color-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;border:1.5px solid var(--border);cursor:pointer;font-size:12px;font-weight:600;transition:transform .15s;background:var(--bg)}
.color-chip.active,.color-chip:hover{border-color:var(--accent)}
.color-chip.active{background:#eef2ff;color:var(--accent)}
.color-dot{width:14px;height:14px;border-radius:50%;border:1.5px solid rgba(0,0,0,.15);flex-shrink:0}
.size-chip{display:inline-flex;align-items:center;justify-content:center;min-width:36px;padding:4px 8px;border-radius:8px;border:1.5px solid var(--border);cursor:pointer;font-size:12px;font-weight:600;transition:transform .15s;background:var(--bg)}
.size-chip.active{border-color:var(--accent);background:var(--accent);color:#fff}
.size-chip:hover{border-color:var(--accent)}

/* ── Cookie consent ── */
.cookie-bar{position:fixed;bottom:0;left:0;right:0;z-index:1000;background:#0f172a;color:#e2e8f0;padding:16px 24px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;transform:translateY(105%);transition:transform .35s ease;box-shadow:0 -4px 24px rgba(0,0,0,.3)}
.cookie-bar.on{transform:translateY(0)}
.cookie-bar-text{flex:1;min-width:200px;font-size:13px;line-height:1.6}
.cookie-bar-text a{color:#60a5fa;text-decoration:underline}
.cookie-bar-acts{display:flex;gap:8px;flex-shrink:0}
.cookie-btn-acc{background:var(--accent);color:#fff;border:none;padding:9px 20px;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;transition:filter .15s}
.cookie-btn-acc:hover{filter:brightness(1.1)}
.cookie-btn-min{background:transparent;color:#94a3b8;border:1px solid #334155;padding:9px 16px;border-radius:8px;font-size:13px;cursor:pointer;white-space:nowrap;transition:transform .15s}
.cookie-btn-min:hover{color:#e2e8f0;border-color:#94a3b8}
@media(max-width:600px){.cookie-bar{flex-direction:column;text-align:center;padding:14px 16px}.cookie-bar-acts{width:100%;justify-content:center}}

/* ── Recently viewed ── */
.recently-viewed{margin-top:40px}
.recently-viewed h3{font-size:18px;font-weight:700;margin-bottom:16px;color:var(--text)}
.rv-grid{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;scrollbar-width:thin}
.rv-grid::-webkit-scrollbar{height:4px}
.rv-grid::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}
.rv-card{flex-shrink:0;width:140px;background:var(--surface,#fff);border:1px solid var(--border);border-radius:12px;overflow:hidden;text-decoration:none;color:inherit;transition:box-shadow .15s}
.rv-card:hover{box-shadow:var(--shadow-md)}
.rv-img{width:100%;height:100px;display:flex;align-items:center;justify-content:center;background:var(--bg);overflow:hidden}
.rv-img img{width:100%;height:100%;object-fit:contain}
.rv-info{padding:8px}
.rv-name{font-size:11px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:4px}
.rv-price{font-size:12px;font-weight:700;color:var(--accent)}

/* ── Notify when in stock ── */
.notify-wrap{margin-top:12px}
.notify-form{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.notify-form input{flex:1;min-width:160px;padding:9px 14px;border:1.5px solid var(--border);border-radius:10px;font-size:13px;background:var(--bg);color:var(--text);outline:none}
.notify-form input:focus{border-color:var(--accent)}
.notify-form button{padding:9px 18px;background:var(--accent);color:#fff;border:none;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;transition:filter .15s}
.notify-form button:hover{filter:brightness(1.1)}
.notify-sent{font-size:13px;color:var(--green);font-weight:600;margin-top:8px}

/* ── Q&A section ── */
.qa-section{margin-top:40px}
.qa-section h3{font-size:18px;font-weight:700;margin-bottom:16px}
.qa-list{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}
.qa-item{background:var(--bg);border-radius:12px;padding:14px 16px}
.qa-q{font-size:14px;font-weight:600;color:var(--text);margin-bottom:6px}
.qa-q::before{content:'Q: ';color:var(--accent);font-weight:800}
.qa-a{font-size:13px;color:var(--muted);line-height:1.5}
.qa-a::before{content:'A: ';color:var(--green);font-weight:700}
.qa-meta{font-size:11px;color:#94a3b8;margin-top:6px}
.qa-form-wrap{background:var(--bg);border-radius:12px;padding:16px}
.qa-form-wrap h4{font-size:14px;font-weight:700;margin-bottom:12px}
.qa-form-wrap textarea{width:100%;padding:10px 14px;border:1.5px solid var(--border);border-radius:10px;font-size:13px;background:#fff;color:var(--text);resize:vertical;min-height:70px;outline:none;font-family:inherit}
.qa-form-wrap textarea:focus{border-color:var(--accent)}
.qa-form-wrap button{margin-top:8px;padding:9px 20px;background:var(--accent);color:#fff;border:none;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;transition:filter .15s}
.qa-form-wrap button:hover{filter:brightness(1.1)}
.qa-empty{color:var(--muted);font-size:13px;text-align:center;padding:20px 0}

/* ── Newsletter in footer ── */
.footer-newsletter{margin-top:12px}
.footer-newsletter p{font-size:12px;color:#64748b;margin-bottom:8px}
.nl-form{display:flex;gap:6px}
.nl-form input{flex:1;padding:8px 12px;border:1px solid #334155;border-radius:8px;font-size:12px;background:#1e293b;color:#e2e8f0;outline:none}
.nl-form input:focus{border-color:var(--accent)}
.nl-form button{padding:8px 14px;background:var(--accent);color:#fff;border:none;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;transition:filter .15s}
.nl-form button:hover{filter:brightness(1.1)}

/* ── Stock badge ── */
.stock-low{font-size:11px;color:#d97706;font-weight:600}
.stock-out{font-size:11px;color:var(--red);font-weight:600}
.btn-notify-card{flex:1 1 100%;padding:9px 0;background:transparent;color:#7c3aed;border:1.5px solid #7c3aed;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;transition:transform .15s;display:flex;align-items:center;justify-content:center;gap:4px}
.btn-notify-card:hover{background:#7c3aed;color:#fff}

/* ── Navbar dropdown ── */
.nav-item{position:relative;display:inline-flex;align-items:stretch}
.nav-item>.nlink::after{content:'▾';font-size:10px;margin-left:4px;opacity:.5;transition:transform .2s,opacity .2s}
.nav-item:hover>.nlink{color:#fff}
.nav-item:hover>.nlink::after{transform:rotate(-180deg);opacity:1}
.nav-drop{display:none;position:absolute;top:100%;left:0;z-index:500;padding-top:4px;min-width:200px}
.nav-item:hover .nav-drop{display:block}
.nav-drop-inner{background:#1e293b;border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:8px;box-shadow:0 12px 40px rgba(0,0,0,.55)}
.nav-drop-inner a{display:flex;align-items:center;gap:8px;padding:7px 12px;color:#94a3b8;font-size:13px;font-weight:500;text-decoration:none;border-radius:6px;white-space:nowrap;transition:filter .15s}
.nav-drop-inner a:hover{background:rgba(255,255,255,.07);color:#fff}
.nd-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.nd-all{grid-column:1/-1;color:#e2e8f0!important;font-weight:700!important;border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:4px;padding-bottom:8px!important}
@media(max-width:768px){.nav-drop{display:none!important}}