/* ===== Gadget Store theme — clean white/blue gadget shop, desktop + mobile ===== */
:root{--bl:color-mix(in srgb,var(--b) 9%,#fff);--bm:color-mix(in srgb,var(--b) 22%,#fff);--bd:color-mix(in srgb,var(--b) 82%,#000);--bg:#f4f6fb;--t:#0f172a;--l:#e6eaf2;--r:18px;--gw:1240px}
body{background:var(--bg);overflow-x:hidden}
#app{max-width:none;background:var(--bg)}

/* ---------- header ---------- */
.gd-hdr,.hdr{background:#fff;color:var(--t);border-radius:0;box-shadow:0 1px 0 var(--l);padding:10px 14px}
.hdr .ibtn{background:var(--bl);color:var(--b);border-radius:50%}
.hdr .search{background:var(--bg);border:1px solid var(--l);border-radius:999px}
.gd-bar{max-width:var(--gw);margin:0 auto;display:grid;grid-template-columns:44px 1fr 44px;grid-template-areas:"menu brand cart" "search search search";align-items:center;gap:10px 10px}
.gd-ib{width:44px;height:44px;border-radius:50%;border:1px solid var(--l);background:#fff;color:var(--t);display:flex;align-items:center;justify-content:center;position:relative}
.gd-menu{grid-area:menu}
.gd-cart{grid-area:cart}
.gd-cart .badge{top:-4px;left:auto;right:-4px;background:var(--b);border:2px solid #fff;min-width:20px;height:20px;border-radius:10px}
.gd-brand{grid-area:brand;display:flex;align-items:center;justify-content:center;gap:8px;min-width:0}
.gd-brand img{height:34px;width:auto;max-width:140px;object-fit:contain}
.gd-brand b{font-size:19px;font-weight:700;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gd-search{grid-area:search;display:flex;align-items:center;height:44px;border:1px solid var(--l);background:var(--bg);border-radius:999px;padding:0 6px 0 18px;color:var(--m);transition:border-color .15s,box-shadow .15s}
.gd-search:focus-within{border-color:var(--b);box-shadow:0 0 0 3px var(--bm);background:#fff}
.gd-search input{flex:1;min-width:0;border:0;outline:0;background:none;height:100%;color:var(--t);font-size:15px}
.gd-search svg{margin-right:8px}
@media(min-width:900px){
  .gd-hdr{padding:14px 24px}
  .gd-bar{grid-template-columns:44px auto 1fr 44px;grid-template-areas:"menu brand search cart";gap:18px}
  .gd-brand{justify-content:flex-start}
  .gd-search{max-width:620px;justify-self:center;width:100%}
}

/* ---------- page width ---------- */
.gd-bnr,.gd-trust,.gd-hot,.gd-box,#app>.sec,#app>.chips,.notice,.closed{max-width:var(--gw);margin-left:auto;margin-right:auto}
@media(min-width:1272px){#app>.chips{padding:0}}

/* ---------- banner ---------- */
.gd-bnr{margin:14px 14px 0;height:180px;border-radius:22px;border:1px solid var(--l);background:#fff}
@media(min-width:560px){.gd-bnr{height:260px}}
@media(min-width:900px){.gd-bnr{height:380px;margin:20px auto 0;width:calc(100% - 48px)}}
.gd-bnr .dots{right:12px;bottom:12px;background:rgba(255,255,255,.85);padding:5px 7px;border-radius:10px}
.gd-bnr .dots i{background:#cbd5e1}
.gd-bnr .dots i.on{background:var(--t)}

/* ---------- trust strip ---------- */
.gd-trust{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:14px 14px 0}
.gd-trust>div{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--l);border-radius:14px;padding:10px 12px;min-width:0}
.gd-trust i{width:38px;height:38px;border-radius:12px;background:var(--bl);color:var(--b);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.gd-trust span{min-width:0;display:flex;flex-direction:column}
.gd-trust b{font-size:13.5px;line-height:1.25}
.gd-trust small{font-size:11.5px;color:var(--m);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(min-width:900px){.gd-trust{grid-template-columns:repeat(4,1fr);gap:14px;margin:18px auto 0;width:calc(100% - 48px)}.gd-trust>div{padding:14px 16px}}

/* ---------- trending panel ---------- */
.gd-hot{margin:18px 14px 0;border-radius:26px;padding:22px 0 18px;background:linear-gradient(160deg,var(--b) 0%,color-mix(in srgb,var(--b) 55%,#fff) 100%);position:relative;overflow:hidden}
.gd-hot:before{content:"";position:absolute;right:-80px;top:-80px;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.1)}
.gd-hot-h{text-align:center;padding:0 16px 16px;position:relative}
.gd-hot-h h2{margin:0;color:#fff;font-size:28px;line-height:1.15;font-weight:700;letter-spacing:-.3px}
.gd-hot-h h2 span{display:block;font-size:34px;color:#fff;opacity:.92}
.gd-hot-h a{margin-top:12px;display:inline-flex;align-items:center;gap:6px;background:#fff;color:var(--b);font-weight:700;font-size:15px;height:42px;padding:0 20px;border-radius:999px;box-shadow:0 4px 0 rgba(0,0,0,.08)}
@media(min-width:900px){.gd-hot{margin:26px auto 0;width:calc(100% - 48px);padding:30px 0 26px}.gd-hot-h h2{font-size:34px}.gd-hot-h h2 span{display:inline;font-size:34px}}

/* ---------- rails ---------- */
.gd-railw{position:relative}
.gd-rail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 16px 6px;scrollbar-width:none}
.gd-rail::-webkit-scrollbar{display:none}
.gd-rail .pc{flex:0 0 calc(50% - 22px);scroll-snap-align:start}
@media(min-width:640px){.gd-rail .pc{flex-basis:calc(33.33% - 18px)}}
@media(min-width:900px){.gd-rail .pc{flex-basis:calc(25% - 16px)}.gd-rail{padding:2px 22px 6px}}
@media(min-width:1200px){.gd-rail .pc{flex-basis:calc(20% - 14px)}}
.gd-arr{position:absolute;top:38%;z-index:3;width:38px;height:44px;border-radius:12px;background:#fff;color:var(--b);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(15,23,42,.14)}
.gd-arr.l{left:4px}
.gd-arr.r{right:4px}
.gd-arr.r svg{transform:rotate(180deg)}
.gd-arr:hover{background:var(--b);color:#fff}

/* ---------- boxed sections with pill title ---------- */
.gd-box{position:relative;margin:40px 14px 0;background:#fff;border:1px solid var(--bm);border-radius:24px;padding:36px 0 16px}
.gd-box .grid{padding:0 14px}
.gd-pill{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);margin:0;white-space:nowrap;background:var(--b);color:#fff;font-size:17px;font-weight:700;padding:8px 26px;border-radius:999px;box-shadow:0 6px 16px color-mix(in srgb,var(--b) 28%,transparent)}
.gd-more{display:flex;justify-content:flex-end;padding:14px 14px 0}
.gd-more a{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 18px;border-radius:999px;border:1.5px solid var(--b);color:var(--b);font-weight:700;font-size:14px;transition:background-color .15s,color .15s}
.gd-more a:hover{background:var(--b);color:#fff}
@media(min-width:900px){.gd-box{margin:48px auto 0;width:calc(100% - 48px);padding:44px 8px 22px}.gd-pill{font-size:19px;padding:9px 32px}.gd-more{padding:18px 22px 0}}

/* categories */
.gd-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:0 12px}
@media(min-width:640px){.gd-cats{grid-template-columns:repeat(6,1fr);gap:12px}}
@media(min-width:900px){.gd-cats{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;padding:0 22px}.gd-cat{width:124px}}
.gd-cat{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;border:1px solid var(--l);border-radius:16px;padding:10px 4px 9px;background:#fff;transition:border-color .15s,box-shadow .15s}
.gd-cat:hover{border-color:var(--b);box-shadow:0 4px 14px rgba(15,23,42,.06)}
.gd-ci{width:100%;aspect-ratio:1/1;max-width:74px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--b);background:var(--bl);overflow:hidden}
.gd-ci img{width:100%;height:100%;object-fit:contain;background:#fff}
.gd-cat span{font-size:12.5px;font-weight:600;line-height:1.25;max-width:100%;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* tabs */
.gd-tabs{display:flex;gap:8px;overflow-x:auto;padding:0 14px 14px;scrollbar-width:none}
.gd-tabs::-webkit-scrollbar{display:none}
.gd-tabs button{flex-shrink:0;height:40px;padding:0 18px;border-radius:999px;border:1px solid var(--l);background:#fff;font-weight:600;font-size:14px;color:var(--t);transition:border-color .15s}
.gd-tabs button:hover{border-color:#b6c2d6}
.gd-tabs button.on{background:var(--b);border-color:var(--b);color:#fff}
@media(min-width:900px){.gd-tabs{justify-content:center;padding:0 22px 18px}}

/* ---------- product card ---------- */
.gd-grid{gap:10px}
@media(min-width:640px){.gd-grid{grid-template-columns:repeat(3,1fr);gap:14px}}
@media(min-width:900px){.gd-grid{grid-template-columns:repeat(4,1fr)}.gd-box .grid{padding:0 22px}}
@media(min-width:1200px){.gd-grid{grid-template-columns:repeat(5,1fr)}}
.gd-pc{border:1px solid var(--l);border-radius:20px;box-shadow:none;background:#fff;transition:border-color .15s,box-shadow .15s}
.gd-pc:hover{border-color:var(--bm);box-shadow:0 8px 22px rgba(15,23,42,.07)}
.gd-pc .pim{margin:8px 8px 0;border-radius:14px;background:#fff}
.gd-pc .pim img{object-fit:contain;transition:transform .3s}
.gd-pc:hover .pim img{transform:scale(1.03)}
.gd-tags{position:absolute;top:6px;left:6px;display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.gd-off{background:#111827;color:#fff;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px}
.gd-so{background:#fee2e2;color:#b91c1c;font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:999px}
.gd-pc .fav{top:12px;right:12px;width:32px;height:32px;border:1px solid var(--l);background:#fff}
.gd-pc .pb{padding:8px 12px 12px}
.gd-pc .pn{font-size:14.5px;font-weight:600;height:38px}
.gd-pr{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;margin-top:6px}
.gd-pr b{color:var(--b);font-size:17px;font-weight:700}
.gd-pr del{color:#94a3b8;font-size:13px}
.gd-pr small{color:var(--m);font-size:12px}
.gd-add{margin-top:10px;height:42px;border-radius:999px;background:var(--b);color:#fff;font-weight:700;font-size:14.5px;display:flex;align-items:center;justify-content:center;transition:background-color .15s}
.gd-add:hover{background:var(--bd)}
.gd-add:active{transform:translateY(1px)}
.gd-add[disabled]{background:#e5e7eb;color:#6b7280}
@media(max-width:380px){.gd-add{font-size:13px}.gd-pc .pb{padding:8px 10px 10px}}

/* ---------- inner pages ---------- */
#app>.chips{margin-top:12px}
.chip.on{background:var(--b);border-color:var(--b)}
.catgrid .cat{border:1px solid var(--l);box-shadow:none;border-radius:16px}
.card{border:1px solid var(--l);box-shadow:none;border-radius:16px}
.btn{border-radius:999px}
.btn.ol{background:#fff;border:1.5px solid var(--b);color:var(--b)}
@media(min-width:900px){#app>.sec{padding:0 10px}.sheet{max-width:640px;border-radius:22px;margin-bottom:4vh}.ov{align-items:center}}

/* ---------- footer ---------- */
.gd-foot{margin-top:40px;background:linear-gradient(135deg,var(--bd) 0%,var(--b) 100%);color:#fff}
.gd-fin{max-width:var(--gw);margin:0 auto;padding:32px 20px 20px;display:grid;grid-template-columns:1fr 1fr;gap:26px 18px}
.gd-fabout{grid-column:1/-1}
.gd-fbrand{display:flex;align-items:center;gap:10px}
.gd-fbrand img{height:36px;width:auto;max-width:130px;object-fit:contain;background:#fff;border-radius:10px;padding:4px 6px}
.gd-fbrand b{font-size:20px}
.gd-fabout p{margin:10px 0 0;font-size:14px;opacity:.85;max-width:340px}
.gd-soc{display:flex;gap:10px;margin-top:14px}
.gd-soc a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;transition:background-color .15s}
.gd-soc a:hover{background:rgba(255,255,255,.15)}
.gd-fc h4{margin:0 0 10px;font-size:15px;font-weight:700;opacity:.95}
.gd-fc a,.gd-fc span{display:flex;align-items:flex-start;gap:8px;font-size:14px;opacity:.88;padding:4px 0;line-height:1.45}
.gd-fc a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
.gd-fc svg{margin-top:2px}
.gd-pay{font-size:13px!important;opacity:.8!important;margin-top:4px}
.gd-copy{background:rgba(0,0,0,.14);text-align:center;font-size:13px;padding:12px 16px;opacity:.95}
@media(min-width:900px){.gd-fin{grid-template-columns:1.5fr 1fr 1.2fr;padding:44px 24px 30px}.gd-fabout{grid-column:auto}}

/* ---------- bottom nav: phones only ---------- */
.bnav{border-top:1px solid var(--l);box-shadow:0 -2px 12px rgba(15,23,42,.05);max-width:none}
.bnav a{color:#475569}
.bnav a.on{color:var(--b)}
@media(min-width:900px){.bnav{display:none}#app{padding-bottom:0!important}.toast{bottom:40px}}

/* inner-page header lines up with the content on wide screens */
.hdr:not(.gd-hdr)>*{max-width:var(--gw);margin-left:auto;margin-right:auto}
@media(min-width:900px){.hdr:not(.gd-hdr){padding:12px 24px}.hdr:not(.gd-hdr) .search{max-width:620px;margin-left:auto;margin-right:auto}#app>.sec{margin-top:18px}}
.gd-railw.nofl .gd-arr{display:none}
@media(max-width:360px){.gd-trust i{width:32px;height:32px}.gd-trust>div{padding:8px 9px;gap:8px}.gd-trust b{font-size:12.5px}}