:root{
  --ink:#16181d;--ink2:#3b4149;--muted:#727a86;--faint:#9aa2ad;
  --paper:#ffffff;--panel:#f3f4f6;--panel2:#e9ebef;--line:#e0e3e8;
  --steel:#1a1d23;--steel2:#23272f;
  --acc:#f0b400;--acc-d:#d29e00;--acc-ink:#8a6d00;--on-acc:#17181c;--line-green:#06c755;
  --r:12px;--rs:8px;--sh:0 1px 2px rgba(16,20,26,.06);--sh2:0 18px 40px -20px rgba(16,20,26,.42);
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --disp:'Bai Jamjuree','IBM Plex Sans Thai',sans-serif;
  --body:'IBM Plex Sans Thai',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);color:var(--ink);background:var(--panel);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--disp);font-weight:600;letter-spacing:-.01em;margin:0}
.wrap{max-width:1280px;margin:0 auto;padding:0 22px}
.mono{font-family:var(--mono)}

/* topbar */
.topbar{background:#0e1013;color:#9aa3af;font-size:.8rem;font-family:var(--mono)}
.tb{display:flex;justify-content:space-between;align-items:center;height:36px}
.tb-r{display:flex;gap:18px}.tb-r a:hover{color:#fff}

/* header */
header.site{background:var(--steel);color:#fff;position:sticky;top:0;z-index:60}
.hdr{display:flex;align-items:center;gap:20px;padding:15px 22px}
.brand{display:flex;align-items:center}.brand img{height:40px;width:auto;display:block}
.brand b{color:var(--acc);font-weight:700}
.search{display:flex;align-items:center;flex:1;max-width:620px;background:#fff;border-radius:var(--rs);padding:0 6px 0 14px;color:#5b626d}
.search svg{flex:none}
.search input{flex:1;padding:12px 12px;border:0;font:inherit;color:var(--ink);outline:0;background:transparent}
.search button{padding:9px 18px;border:0;background:var(--acc);color:var(--on-acc);border-radius:6px;font-family:var(--disp);font-weight:600;cursor:pointer}
.search button:hover{background:var(--acc-d)}
.cta{display:flex;gap:9px;margin-left:auto}
.btn{display:inline-flex;align-items:center;gap:7px;padding:11px 18px;border-radius:var(--rs);font-family:var(--disp);font-weight:600;white-space:nowrap;cursor:pointer;border:1.5px solid transparent;transition:.14s;font-size:.95rem}
.btn.line{background:var(--line-green);color:#fff}.btn.line:hover{filter:brightness(.94)}
.btn.call{background:var(--acc);color:var(--on-acc)}.btn.call:hover{background:var(--acc-d)}
.btn.ghost{border-color:var(--line);color:var(--ink);background:#fff}.btn.ghost:hover{border-color:var(--ink);}
.btn.out{border-color:rgba(255,255,255,.35);color:#fff}.btn.out:hover{background:rgba(255,255,255,.1)}
.btn.big{padding:14px 24px;font-size:1.02rem}
.btn.blk{width:100%;justify-content:center}
.burger{display:none;flex-direction:column;gap:4px;background:0;border:0;cursor:pointer;padding:8px}
.burger span{width:22px;height:2px;background:#fff}

/* catnav + mega */
.catnav{background:var(--steel2);border-top:1px solid rgba(255,255,255,.06)}
.catnav>.wrap>ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
.catnav li{position:relative}
.catnav .topcat{display:block;padding:13px 18px;font-family:var(--disp);font-weight:500;color:#c7cdd6;border-bottom:3px solid transparent}
.catnav li:hover .topcat{color:#fff;border-color:var(--acc)}
.mega{position:absolute;top:100%;left:0;background:var(--steel);border:1px solid rgba(255,255,255,.08);border-radius:0 0 var(--r) var(--r);box-shadow:var(--sh2);padding:12px;opacity:0;visibility:hidden;transform:translateY(6px);transition:.15s;z-index:70}
.catnav li:hover .mega{opacity:1;visibility:visible;transform:none}
.mega-in{display:grid;grid-template-columns:1fr 1fr;gap:2px;width:600px;max-width:80vw}
.mega-in a{display:flex;justify-content:space-between;gap:12px;padding:9px 12px;border-radius:7px;font-size:.9rem;color:#c7cdd6}
.mega-in a:hover{background:rgba(255,255,255,.07);color:#fff}
.mega-in a span{color:#7c8593;font-family:var(--mono);font-size:.78rem}

/* bento */
.bento-wrap{background:var(--panel);padding:26px 0 8px}
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:150px;gap:14px}
.tile{border-radius:var(--r);overflow:hidden;position:relative;box-shadow:var(--sh)}
.tile-brand{grid-column:span 2;grid-row:span 2;background:var(--steel);color:#fff;padding:30px;display:flex;flex-direction:column;justify-content:center;
  background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.06) 1px,transparent 0);background-size:22px 22px}
.eyebrow{font-family:var(--mono);letter-spacing:.14em;font-size:.72rem;color:var(--acc);text-transform:uppercase;margin-bottom:14px}
.tile-brand h1{font-size:2.3rem;line-height:1.12;margin-bottom:12px}
.tile-brand p{color:#aeb6c1;margin:0 0 22px;max-width:44ch}
.tile-cta{display:flex;gap:12px;flex-wrap:wrap}
.tile-cat{grid-column:span 1;grid-row:span 1;background:#cfd4db center/cover no-repeat;color:#fff}
.tile-cat.big{grid-column:span 2}
.tile-cat::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,12,15,.05),rgba(10,12,15,.72))}
.tile-cap{position:absolute;left:0;right:0;bottom:0;padding:16px;z-index:2;display:flex;flex-direction:column;gap:2px}
.tile-cap .tk{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.tile-cap b{font-family:var(--disp);font-size:1.15rem;line-height:1.2}
.tile-cap .tc{font-size:.82rem;color:rgba(255,255,255,.85)}
.tile-cat:hover .tile-cap b{color:var(--acc)}
.tile-code{grid-column:span 2;background:#fff;padding:22px;display:flex;flex-direction:column;justify-content:center;gap:4px}
.tile-code .tk{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--acc-ink)}
.tile-code b{font-family:var(--disp);font-size:1.2rem}
.codebox{display:flex;margin-top:10px;border:1.5px solid var(--line);border-radius:var(--rs);overflow:hidden}
.codebox input{flex:1;border:0;padding:11px 14px;font:inherit;outline:0}
.codebox button{border:0;background:var(--ink);color:#fff;padding:0 18px;font-family:var(--disp);font-weight:600;cursor:pointer}
.tile-stat{grid-column:span 2;background:var(--acc);color:var(--on-acc);display:flex;align-items:center;justify-content:space-around;padding:16px;gap:10px;text-align:center}
.tile-stat b{font-family:var(--disp);font-size:1.7rem;display:block;line-height:1}
.tile-stat span{font-size:.82rem;opacity:.9}

/* blocks + section heads */
main.wrap{padding:34px 22px 20px}
.block{margin:0 0 40px}
.sechead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;padding-bottom:12px;border-bottom:2px solid var(--ink)}
.sechead h2{font-size:1.4rem}
.seeall{font-family:var(--disp);font-weight:600;color:var(--acc-ink);white-space:nowrap}
.seeall:hover{text-decoration:underline}

/* subcategory grid (home) */
.subgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.subcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:.16s;box-shadow:var(--sh)}
.subcard:hover{box-shadow:var(--sh2);transform:translateY(-3px)}
.si{aspect-ratio:16/10;overflow:hidden;background:#fff}
.si img{width:100%;height:100%;object-fit:cover;transition:.3s}
.subcard:hover .si img{transform:scale(1.06)}
.sb{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:13px 15px}
.sb span{font-family:var(--disp);font-weight:500}
.sb i{font-family:var(--mono);font-size:.78rem;color:#fff;background:var(--ink);border-radius:20px;padding:2px 9px;font-style:normal}

/* product grid + cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(198px,1fr));gap:14px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:.16s;box-shadow:var(--sh);position:relative}
.card:hover{box-shadow:var(--sh2);transform:translateY(-3px);border-color:#cdd2da}
.card-media{position:relative;aspect-ratio:1;background:#fff;overflow:hidden}
.media-link{display:block;width:100%;height:100%}
.card-media img{width:100%;height:100%;object-fit:contain;padding:14px;transition:.3s}
.card:hover .card-media img{transform:scale(1.05)}
.noimg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:.85rem}.noimg.big{aspect-ratio:1}
.qv{position:absolute;left:50%;bottom:10px;transform:translate(-50%,14px);opacity:0;background:var(--ink);color:#fff;border:0;border-radius:20px;padding:8px 16px;font-family:var(--disp);font-weight:600;font-size:.85rem;cursor:pointer;transition:.16s;white-space:nowrap}
.card:hover .qv{opacity:1;transform:translate(-50%,0)}
.qv:hover{background:var(--acc);color:var(--on-acc)}
.card-body{padding:12px 14px 15px;display:flex;flex-direction:column;gap:5px;border-top:1px solid var(--line);flex:1}
.cbrand{font-family:var(--mono);font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;color:var(--acc-ink);font-weight:600}
.nm{font-weight:500;font-size:.93rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.code{font-family:var(--mono);font-size:.78rem;color:var(--ink2);background:var(--panel);align-self:flex-start;padding:1px 7px;border-radius:5px}
.code.muted{color:var(--faint);background:transparent;padding:0}
.price{font-family:var(--disp);font-weight:700;font-size:1.12rem;margin-top:auto;color:var(--ink)}

/* breadcrumb / cat head */
.crumb{font-size:.88rem;color:var(--muted);margin-bottom:16px;font-family:var(--body)}
.crumb a:hover{color:var(--acc-ink)}.crumb i{color:var(--faint);font-style:normal;margin:0 2px}.crumb span{color:var(--ink)}
.cattop{display:flex;align-items:baseline;gap:14px;margin-bottom:16px}
.cattop h1{font-size:1.9rem}
.total{font-family:var(--mono);font-size:.85rem;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:22px}
.chip{background:#fff;border:1px solid var(--line);border-radius:20px;padding:7px 15px;font-size:.9rem;box-shadow:var(--sh);display:inline-flex;gap:6px;align-items:center}
.chip:hover{border-color:var(--acc);color:var(--acc-ink)}
.chip span{font-family:var(--mono);font-size:.75rem;color:var(--faint)}

/* category faceted layout */
.catlayout{display:grid;grid-template-columns:250px 1fr;gap:26px;align-items:start}
.filters{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px;position:sticky;top:130px;box-shadow:var(--sh)}
.fhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.fhead h3{font-size:1.1rem}.fx{display:none;background:0;border:0;color:var(--muted);cursor:pointer}
.fgroup{padding:14px 0;border-top:1px solid var(--line)}
.fgroup:first-of-type{border-top:0}
.fgroup h4{font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:12px;font-family:var(--mono);font-weight:600}
.prange{display:flex;align-items:center;gap:8px}
.prange input{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:var(--rs);font:inherit;outline:0}
.prange input:focus{border-color:var(--acc)}
.fscroll{max-height:260px;overflow:auto;display:flex;flex-direction:column;gap:2px}
.cbx{display:flex;align-items:center;gap:9px;padding:6px 4px;font-size:.9rem;cursor:pointer;border-radius:6px}
.cbx:hover{background:var(--panel)}
.cbx input{accent-color:var(--acc);width:16px;height:16px}
.cbx span{margin-left:auto;font-family:var(--mono);font-size:.76rem;color:var(--faint)}

.toolbar{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.fbtn{display:none;background:var(--ink);color:#fff;border:0;border-radius:var(--rs);padding:10px 16px;font-family:var(--disp);font-weight:600;cursor:pointer}
.rc{font-size:.9rem;color:var(--muted)}.rc b{font-family:var(--mono);color:var(--ink)}
.tspacer{flex:1}
.within{padding:9px 14px;border:1px solid var(--line);border-radius:var(--rs);font:inherit;outline:0;min-width:170px}
.within:focus{border-color:var(--acc)}
.sortsel{padding:9px 12px;border:1px solid var(--line);border-radius:var(--rs);font:inherit;background:#fff;cursor:pointer;outline:0}
.vtoggle{display:flex;border:1px solid var(--line);border-radius:var(--rs);overflow:hidden}
.vtoggle button{border:0;background:#fff;padding:8px 12px;cursor:pointer;font-size:1rem;color:var(--muted)}
.vtoggle button.on{background:var(--ink);color:#fff}
.noresults{padding:40px;text-align:center;color:var(--muted)}

/* list view */
.grid.list{grid-template-columns:1fr;gap:10px}
.grid.list .card{flex-direction:row;align-items:stretch}
.grid.list .card-media{width:150px;aspect-ratio:auto;flex:none;border-right:1px solid var(--line)}
.grid.list .card-body{border-top:0;justify-content:center}
.grid.list .qv{display:none}
.grid.list .nm{-webkit-line-clamp:3;min-height:0}

/* product detail */
.product{padding-top:22px}
.pd{display:grid;grid-template-columns:1.05fr 1fr;gap:34px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px;box-shadow:var(--sh)}
.pimg{display:flex;align-items:center;justify-content:center;background:var(--panel);border-radius:var(--r);padding:22px;min-height:360px}
.pimg img{max-width:100%;max-height:430px;object-fit:contain}
.pbrand{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--acc-ink);font-weight:600}
.pbuy h1{font-size:1.7rem;margin:8px 0 14px;line-height:1.3}
.pprice{font-family:var(--disp);font-weight:700;font-size:2.2rem;color:var(--ink);margin-bottom:18px}
.specs{border-top:1px solid var(--line);margin-bottom:20px}
.srow{display:flex;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.srow span{width:110px;color:var(--muted);flex:none}
.srow b{font-weight:600}.srow .mono{font-family:var(--mono)}
.srow a:hover{color:var(--acc-ink)}
.buycta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.hint{color:var(--muted);font-size:.9rem}.hint b{color:var(--ink)}
.desc{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px;margin-top:22px;overflow-x:auto;box-shadow:var(--sh)}
.desc::before{content:"รายละเอียดสินค้า";display:block;font-family:var(--disp);font-weight:600;font-size:1.25rem;margin-bottom:16px}
.desc img{max-width:100%;height:auto}
.product .block{margin-top:34px}

/* brands + search page */
.brands{display:flex;flex-wrap:wrap;gap:9px}
.brands span{background:#fff;border:1px solid var(--line);border-radius:20px;padding:8px 16px;font-size:.88rem;color:var(--ink2);box-shadow:var(--sh)}
.pgh{font-size:1.9rem;margin-bottom:16px}
.bigsearch{width:100%;padding:16px 20px;font-size:1.1rem;border:1.5px solid var(--line);border-radius:var(--r);font:inherit;outline:0;margin-bottom:16px}
.bigsearch:focus{border-color:var(--acc)}
.stat{color:var(--muted);margin-bottom:16px;font-family:var(--mono);font-size:.88rem}

/* quick-view modal */
.qvm{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
.qvm[hidden]{display:none}
.qvm .back{position:absolute;inset:0;background:rgba(10,12,15,.6)}
.qvm .box{position:relative;background:#fff;border-radius:16px;max-width:760px;width:100%;display:grid;grid-template-columns:1fr 1fr;overflow:hidden;box-shadow:var(--sh2);animation:pop .16s ease}
@keyframes pop{from{transform:scale(.96);opacity:0}to{transform:none;opacity:1}}
.qvm .x{position:absolute;top:12px;right:14px;background:#fff;border:1px solid var(--line);width:34px;height:34px;border-radius:50%;font-size:1.2rem;cursor:pointer;z-index:2}
.qvm .qimg{background:var(--panel);display:flex;align-items:center;justify-content:center;padding:26px;min-height:300px}
.qvm .qimg img{max-width:100%;max-height:300px;object-fit:contain}
.qvm .qinfo{padding:28px;display:flex;flex-direction:column}
.qvm .qb{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--acc-ink);font-weight:600}
.qvm .qinfo h3{font-size:1.3rem;margin:6px 0 10px}
.qvm .qcode{font-family:var(--mono);font-size:.85rem;color:var(--muted);margin-bottom:10px}
.qvm .qprice{font-family:var(--disp);font-weight:700;font-size:1.7rem;margin-bottom:20px}
.qvm .qcta{display:flex;flex-direction:column;gap:10px;margin-top:auto}
.qvm .qcta .btn{justify-content:center}
.qmore{text-align:center;color:var(--acc-ink);font-family:var(--disp);font-weight:600;padding-top:6px}

/* footer */
footer.site{background:var(--steel);color:#a7afba;margin-top:50px}
.foot{display:grid;grid-template-columns:1.6fr 1fr 1.3fr;gap:40px;padding:50px 22px 38px}
.flogo{margin-bottom:14px}.flogo img{height:48px;width:auto;display:block}
.fbrand p{margin:0 0 20px;max-width:360px}
.fcta{display:flex;gap:12px;flex-wrap:wrap}
.fcol h4{font-family:var(--disp);color:#fff;font-size:1.02rem;margin-bottom:16px}
.flinks{display:flex;flex-direction:column;gap:10px}
.fcol a:hover{color:#fff}
.fcol p{margin:0 0 12px;line-height:1.7}
.fbar{border-top:1px solid rgba(255,255,255,.08);font-size:.82rem;color:#7d8794;font-family:var(--mono)}
.fbar .wrap{padding:16px 22px}

/* responsive */
@media(max-width:1000px){
  .catlayout{grid-template-columns:1fr}
  .filters{position:fixed;top:0;left:0;bottom:0;width:300px;max-width:86vw;z-index:120;border-radius:0;overflow:auto;transform:translateX(-105%);transition:.2s}
  body.flt-open .filters{transform:none}
  body.flt-open::after{content:"";position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:110}
  .fx,.fbtn{display:inline-block}
}
@media(max-width:820px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .tile-brand{grid-column:span 2;grid-row:span 1;padding:26px}
  .tile-brand h1{font-size:1.9rem}
  .tile-code,.tile-stat{grid-column:span 2}
  .pd{grid-template-columns:1fr;gap:22px}
  .foot{grid-template-columns:1fr 1fr}
  .qvm .box{grid-template-columns:1fr;max-width:420px}
  .qvm .qimg{min-height:220px}
}
@media(max-width:640px){
  .cta{display:none}.burger{display:flex}
  .catnav{position:fixed;top:0;left:0;bottom:0;width:280px;max-width:84vw;z-index:130;overflow:auto;transform:translateX(-105%);transition:.2s}
  body.nav-open .catnav{transform:none}
  .catnav>.wrap>ul{flex-direction:column}
  .catnav .topcat{border-bottom:1px solid rgba(255,255,255,.06)}
  .mega{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:0 0 0 14px;background:transparent}
  .mega-in{width:auto;grid-template-columns:1fr}
  .foot{grid-template-columns:1fr}
  .tile-brand h1{font-size:1.7rem}
}