/* ============================================================
   commeIQ · commeIQ — Components / Styles
   ใช้ตัวแปรจาก tokens.css เท่านั้น (ห้าม hardcode สี)
   ============================================================ */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{font-size:16px;scroll-behavior:auto}html,body{overflow-x:hidden;max-width:100vw}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition:none!important}html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-b);font-size:var(--fs-body);line-height:1.55;
  -webkit-font-smoothing:antialiased;padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom));
}
@media (min-width:900px){body{padding-bottom:0}}
h1,h2,h3,h4{font-family:var(--font-d);font-weight:600;line-height:1.25;margin:0;text-wrap:balance}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer}
.num{font-family:var(--font-num);font-variant-numeric:tabular-nums}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 16px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:3px solid var(--brand-l);outline-offset:2px;border-radius:4px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;
  font-family:var(--font-d);font-weight:600;font-size:15px;border-radius:var(--r-pill);
  padding:11px 20px;transition:transform .12s,box-shadow .2s,background .2s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--brand-grad);color:#fff;box-shadow:var(--sh-brand)}
.btn-primary:hover{box-shadow:0 10px 26px rgba(106,63,209,.42)}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--teak-d));color:#3a2a05}
.btn-outline{background:var(--surface);color:var(--brand-d);border:1.5px solid var(--line)}
.btn-outline:hover{border-color:var(--brand-l);color:var(--brand)}
.btn-ghost{background:transparent;color:var(--t2)}
.btn-block{display:flex;width:100%}
.btn-lg{padding:14px 26px;font-size:16px}
.btn-sm{padding:8px 14px;font-size:13.5px}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn.loading{color:transparent;position:relative}
.btn.loading::after{content:"";position:absolute;width:18px;height:18px;border:2.5px solid rgba(255,255,255,.5);
  border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- chips / badges ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);color:var(--t2);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 13px;font-size:13px;font-weight:500;white-space:nowrap}
.chip.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.badge{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-d);font-weight:600;font-size:11px;
  padding:3px 8px;border-radius:6px;line-height:1.2}
.badge-sale{background:var(--sale);color:#fff}
.badge-hot{background:var(--teak-soft);color:var(--teak-d)}
.badge-tag{background:var(--brand-soft);color:var(--brand-d)}
.badge-verify{background:var(--success-soft);color:var(--success)}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:40;background:var(--brand-grad-deep);color:#fff;
  padding:calc(8px + env(safe-area-inset-top)) 0 10px;box-shadow:0 2px 16px rgba(42,30,99,.35)}
.hdr .wrap{display:flex;flex-direction:column;gap:9px}
.hdr-row{display:flex;align-items:center;gap:12px}
.logo{display:flex;align-items:center;gap:8px;font-family:var(--font-d);font-weight:700;font-size:18px;color:#fff}
.logo svg{width:32px;height:32px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}
.logo .wm{letter-spacing:.02em}.logo .wm b{font-weight:700}
.logo .mk{background:#fff;color:var(--brand-d);border-radius:7px;padding:0 7px;font-size:15px;margin-left:2px}
/* ปุ่มชื่อจังหวัดบนหัวเว็บ — กดแล้วไปหน้าเลือกจังหวัด (ทุกหน้า) */
/* หมายเหตุ: ปุ่มนี้อยู่นอก .logo แล้ว จึงต้องมีสีพื้น/ขอบมนของตัวเอง (กฎ .logo .mk ไม่ตกมาถึง) */
.mk-btn{display:inline-flex;align-items:center;gap:3px;height:26px;padding:0 8px;border-radius:7px;
  background:#fff;color:var(--brand-d,#3a2d8f);font-size:15px;text-decoration:none;font-weight:600;white-space:nowrap;
  box-shadow:0 1px 3px rgba(0,0,0,.18)}
.mk-btn:active{transform:scale(.96)}
.mk-cv{font-size:10px;opacity:.6}
.hdr-icons{margin-left:auto;display:flex;align-items:center;gap:4px}
.ib{position:relative;background:rgba(255,255,255,.14);border:none;color:#fff;width:40px;height:40px;
  border-radius:12px;font-size:19px;display:grid;place-items:center;transition:background .2s}
.ib:hover{background:rgba(255,255,255,.26)}
.ib .dot{position:absolute;top:-3px;right:-3px;background:var(--gold);color:#3a2a05;font-size:10px;font-weight:700;
  min-width:17px;height:17px;border-radius:9px;display:grid;place-items:center;padding:0 4px;border:2px solid var(--violet-700)}
.searchbar{display:flex;align-items:center;gap:9px;background:#fff;border-radius:var(--r-pill);height:42px;padding:0 8px 0 15px;box-shadow:var(--sh-1)}
.searchbar input{flex:1;border:none;outline:none;font-family:inherit;font-size:14.5px;color:var(--ink);background:none}
.searchbar input::placeholder{color:var(--t3)}
.searchbar .go{background:var(--brand-grad);color:#fff;border:none;width:34px;height:34px;border-radius:var(--r-pill);font-size:16px;display:grid;place-items:center}
.catnav{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.catnav::-webkit-scrollbar{display:none}
.catnav a{flex:0 0 auto;background:rgba(255,255,255,.16);color:#fff;border-radius:var(--r-pill);
  padding:6px 13px;font-size:13px;font-weight:500;font-family:var(--font-d)}
.catnav a:hover{background:rgba(255,255,255,.3)}

/* ---------- bottom nav (mobile) ---------- */
.botnav{position:fixed;left:0;right:0;bottom:0;z-index:45;background:var(--surface);
  border-top:1px solid var(--line);display:flex;height:calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -4px 20px rgba(42,30,99,.08)}
.botnav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:var(--t3);font-size:10.5px;font-family:var(--font-d);font-weight:500}
.botnav a .ic{font-size:21px;line-height:1}
.botnav a.on{color:var(--brand)}
.botnav a .nb{position:relative}
.botnav a .nb b{position:absolute;top:-4px;right:-10px;background:var(--sale);color:#fff;font-size:9px;
  min-width:15px;height:15px;border-radius:8px;display:grid;place-items:center;padding:0 3px}
@media (min-width:900px){.botnav{display:none}}

/* ---------- section header ---------- */
.sec{padding:22px 0}
.sec-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.sec-hd h2{font-size:var(--fs-h2);display:flex;align-items:center;gap:9px}
.sec-hd h2 .bar{width:5px;height:22px;background:var(--brand-grad);border-radius:3px}
.sec-hd a{color:var(--brand);font-size:14px;font-weight:600;font-family:var(--font-d)}

/* ---------- quick feature shortcuts (home) ---------- */
.qfeats{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;padding:2px 0 6px;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;touch-action:pan-x;overscroll-behavior-x:contain}.qfeats>*{scroll-snap-align:start;flex:0 0 auto}
.qfeats::-webkit-scrollbar{display:none}
.qfeat{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:7px;width:72px;text-align:center}
.qfeat .qic-wrap{position:relative;width:62px;height:62px}
.qfeat .qic{width:62px;height:62px;border-radius:19px;overflow:hidden;background:var(--surface-3);box-shadow:var(--sh-1);transition:transform .16s,box-shadow .2s;display:grid;place-items:center;color:#fff}
.qfeat .qic img{width:100%;height:100%;object-fit:cover;display:block}
.qfeat .qic .cq-ic{color:#fff}
.qfeat b{font-size:11.5px;color:var(--t2);line-height:1.2;font-weight:500;font-family:var(--font-b)}
.qfeat .qtag{position:absolute;top:-4px;right:-4px;background:var(--sale);color:#fff;font-size:8.5px;font-weight:700;padding:1px 5px;border-radius:99px;font-family:var(--font-d);letter-spacing:.02em;box-shadow:var(--sh-1);z-index:2}
@media (hover:hover){.qfeat:hover .qic{transform:translateY(-3px);box-shadow:var(--sh-2)}.qfeat:hover b{color:var(--brand)}}
/* เดสก์ท็อป/แท็บเล็ต: กระจายเต็มความกว้างให้บาลานซ์เท่าแถวหมวดหมู่ */
@media(min-width:600px){.qfeats{display:grid;grid-template-columns:repeat(9,1fr);gap:10px;overflow:visible}.qfeat{width:auto}}
.qt-brand{background:var(--brand-grad)} .qt-mohom{background:linear-gradient(135deg,#3E6294,#2C4A72)}
.qt-teak{background:linear-gradient(135deg,#D6A94A,#A6752F)} .qt-green{background:linear-gradient(135deg,#2CB673,#127544)}
.qt-rose{background:linear-gradient(135deg,#EA6E8E,#C93A5E)} .qt-indigo{background:linear-gradient(135deg,#6E5AE6,#3B2A9E)}

/* ---------- category circles ---------- */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(min-width:600px){.cats{grid-template-columns:repeat(8,1fr)}}
.cat{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center}
.cat .thumb{width:66px;height:66px;border-radius:20px;overflow:hidden;background:var(--surface-3);box-shadow:var(--sh-1)}
.cat .thumb img{width:100%;height:100%;object-fit:cover}
.cat span{font-size:11.5px;color:var(--t2);line-height:1.2;font-weight:500}

/* ---------- product card ---------- */
.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:560px){.pgrid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.pgrid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1100px){.pgrid{grid-template-columns:repeat(5,1fr)}}
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--sh-1);transition:transform .16s,box-shadow .2s;display:flex;flex-direction:column}
.pcard:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.pcard .pimg{position:relative;aspect-ratio:1;background:var(--surface-3)}
.pcard .pimg img{width:100%;height:100%;object-fit:cover}
.pcard .pbadges{position:absolute;top:8px;left:8px;display:flex;flex-direction:column;gap:4px}
.pcard .fav{position:absolute;top:8px;right:8px;background:rgba(255,255,255,.9);border:none;width:32px;height:32px;
  border-radius:50%;font-size:15px;display:grid;place-items:center;color:var(--t2);box-shadow:var(--sh-1)}
.pcard .pbody{padding:10px 11px 12px;display:flex;flex-direction:column;gap:6px;flex:1}
.pcard .pname{font-size:13.5px;line-height:1.35;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:37px}
.pcard .pprice{display:flex;align-items:baseline;gap:6px;margin-top:auto}
.pcard .pprice .now{font-family:var(--font-num);font-weight:600;font-size:17px;color:var(--brand-d)}
.pcard .pprice .old{font-family:var(--font-num);font-size:12px;color:var(--t3);text-decoration:line-through}
.pcard .pmeta{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--t3)}
.pcard .pmeta .star{color:var(--t2);font-weight:600}
.pcard .pmeta .star .cq-ic{color:var(--star)}
.baht::before{content:"฿";font-family:var(--font-b);margin-right:1px}

/* ---------- rating stars ---------- */
.stars{display:inline-flex;gap:1px;color:var(--star);line-height:0}
.stars span{display:inline-flex}
.stars .off{color:var(--surface-3)}

/* ---------- icon system (line icons + brand logos) ---------- */
.cq-ic{display:inline-block;vertical-align:middle;flex:0 0 auto}
[data-ic]{display:inline-flex;align-items:center;justify-content:center;line-height:0}
.brand-ic{display:inline-block;width:20px;height:20px;object-fit:contain;vertical-align:middle;flex:0 0 auto}
[data-brand]{display:inline-flex;align-items:center;justify-content:center;line-height:0;flex:0 0 auto}
.searchbar .sic{display:inline-flex;color:var(--t3)}
.searchbar .go .cq-ic{color:#fff}
.botnav a .ic{display:inline-flex;line-height:0}
.pcard .pmeta .star{display:inline-flex;align-items:center;gap:3px}
.trust .t .ic .cq-ic,.trust .t .ic{color:var(--brand)}
/* ไอคอนในปุ่ม/ข้อความ จัดกลางกับตัวอักษร */
.btn .cq-ic{margin-top:-1px}

/* ---------- hero carousel ---------- */
.hero{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-2);margin-top:14px}
.hero-track{display:flex;transition:transform .5s ease}
.hero-slide{min-width:100%;position:relative;aspect-ratio:16/7;background:var(--surface-3)}
.hero-slide img{width:100%;height:100%;object-fit:cover}
.hero-slide .cap{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:10px;
  padding:0 clamp(20px,5vw,54px);background:linear-gradient(90deg,rgba(30,20,70,.72) 0%,rgba(30,20,70,.25) 55%,transparent 100%);color:#fff;max-width:640px}
.hero-slide .cap h2{font-size:var(--fs-hero);color:#fff;line-height:1.15}
.hero-slide .cap p{margin:0;font-size:15px;opacity:.92;max-width:38ch}
.hero-slide .cap .btn{align-self:flex-start;margin-top:6px}
.hero-dots{position:absolute;bottom:12px;left:0;right:0;display:flex;justify-content:center;gap:7px}
.hero-dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.5);transition:width .3s,background .3s}
.hero-dots i.on{width:22px;background:#fff;border-radius:5px}

/* hero สูงขึ้นบนมือถือ ให้ข้อความไม่ถูกตัด */
@media(max-width:600px){
  .hero-slide{aspect-ratio:16/9}
  .hero-slide .cap{padding:0 18px}
  .hero-slide .cap h2{font-size:22px;line-height:1.2;text-wrap:balance}
  .hero-slide .cap p{font-size:13px;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
  .hero-slide .cap .btn{padding:9px 18px;font-size:14px}
}

/* ---------- promo banner ---------- */
.promo{border-radius:var(--r);overflow:hidden;aspect-ratio:3/1;background:var(--surface-3);position:relative}
.promo img{width:100%;height:100%;object-fit:cover}

/* ---------- trust bar ---------- */
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:14px;box-shadow:var(--sh-1)}
.trust .t{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}
.trust .t .ic{font-size:22px}
.trust .t b{font-size:13px;color:var(--ink);font-family:var(--font-d)}
.trust .t span{font-size:11px;color:var(--t3)}

/* ---------- forms ---------- */
.field{margin-bottom:15px}
.field label{display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:6px;font-family:var(--font-d)}
.field .inp{position:relative;display:flex;align-items:center}
.field .inp .lic{position:absolute;left:13px;color:var(--t3);font-size:17px;pointer-events:none}
.input{width:100%;border:1.5px solid var(--line);background:var(--surface);border-radius:var(--r-sm);
  padding:12px 14px;font-family:inherit;font-size:15px;color:var(--ink);transition:border .2s,box-shadow .2s}
.input.has-icon{padding-left:42px}
.input::placeholder{color:var(--t3)}
.input:focus{outline:none;border-color:var(--brand-l);box-shadow:0 0 0 3px var(--brand-soft)}
.input:hover{border-color:var(--violet-300)}
select.input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23948EA9' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.field .hint{font-size:12px;color:var(--t3);margin-top:5px}
.field .eye{position:absolute;right:12px;background:none;border:none;color:var(--t3);font-size:17px}
.check{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;color:var(--t2);cursor:pointer}
.check input{width:18px;height:18px;margin-top:1px;accent-color:var(--brand)}
.social-row{display:flex;gap:10px}
.social-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;border:1.5px solid var(--line);
  background:var(--surface);border-radius:var(--r-sm);padding:11px;font-size:14px;font-weight:600;color:var(--ink)}
.social-btn:hover{background:var(--surface-2)}
.divider{display:flex;align-items:center;gap:12px;color:var(--t3);font-size:13px;margin:18px 0}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---------- auth card ---------- */
.auth-wrap{min-height:70vh;display:flex;align-items:center;justify-content:center;padding:28px 16px}
.auth-card{width:100%;max-width:420px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px 26px;box-shadow:var(--sh-2)}
.auth-card .brand-top{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:8px}
.auth-card .brand-top svg{width:52px;height:52px}
.auth-card h1{font-size:23px;text-align:center}
.auth-card .sub{text-align:center;color:var(--t2);font-size:14px;margin:6px 0 22px}
.auth-foot{text-align:center;font-size:13.5px;color:var(--t2);margin-top:18px}
.auth-foot a{color:var(--brand);font-weight:600}

/* ---------- breadcrumb ---------- */
.crumb{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:13px;color:var(--t3);padding:12px 0}
.crumb a:hover{color:var(--brand)}
.crumb .sep{color:var(--line)}

/* ---------- cart / order rows ---------- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1)}
.panel-pad{padding:16px 18px}
.cart-row{display:grid;grid-template-columns:76px 1fr auto;gap:13px;padding:14px 0;border-bottom:1px solid var(--line-2)}
.cart-row:last-child{border-bottom:none}
.cart-row .cimg{width:76px;height:76px;border-radius:var(--r-sm);overflow:hidden;background:var(--surface-3)}
.cart-row .cimg img{width:100%;height:100%;object-fit:cover}
.cart-row .cname{font-size:14px;line-height:1.35;color:var(--ink)}
.cart-row .cvar{font-size:12px;color:var(--t3);margin-top:3px}
.cart-row .cright{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:var(--r-pill);overflow:hidden}
.qty button{background:var(--surface-2);border:none;width:30px;height:30px;font-size:16px;color:var(--brand-d)}
.qty button:hover{background:var(--surface-3)}
.qty span{min-width:34px;text-align:center;font-family:var(--font-num);font-size:14px}
.summary-line{display:flex;justify-content:space-between;font-size:14px;color:var(--t2);padding:6px 0}
.summary-line.total{font-size:18px;color:var(--ink);font-weight:700;font-family:var(--font-d);border-top:1px dashed var(--line);margin-top:6px;padding-top:12px}
.summary-line.total .num{color:var(--brand-d)}

/* ---------- steps (checkout) ---------- */
.steps{display:flex;align-items:center;gap:6px;justify-content:center;flex-wrap:wrap;margin:6px 0 18px}
.steps .st{display:flex;align-items:center;gap:8px;color:var(--t3);font-size:13px;font-family:var(--font-d);font-weight:600}
.steps .st .n{width:24px;height:24px;border-radius:50%;background:var(--surface-3);color:var(--t3);display:grid;place-items:center;font-size:12px}
.steps .st.on .n{background:var(--brand-grad);color:#fff}
.steps .st.on{color:var(--ink)}
.steps .line{width:26px;height:2px;background:var(--line)}
.pay-opt{display:flex;align-items:center;gap:12px;border:1.5px solid var(--line);border-radius:var(--r-sm);padding:13px 15px;margin-bottom:10px;cursor:pointer;transition:border .2s,background .2s}
.pay-opt:hover{border-color:var(--violet-300)}
.pay-opt.on{border-color:var(--brand);background:var(--brand-soft)}
.pay-opt input{accent-color:var(--brand);width:18px;height:18px}
.pay-opt .pm{font-size:14px;font-weight:600;color:var(--ink)}

/* ---------- empty / success states ---------- */
.state{text-align:center;padding:50px 20px;display:flex;flex-direction:column;align-items:center;gap:12px}
.state .em{font-size:54px;line-height:1}
.state h3{font-size:19px}.state p{color:var(--t2);font-size:14px;max-width:34ch}

/* ---------- image placeholder (ก่อนใส่รูปจริง) ---------- */
.imgph{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  background:linear-gradient(135deg,var(--surface-3),var(--brand-soft));color:var(--violet-300);
  font-family:var(--font-num);font-size:11px;text-align:center;padding:6px}
.imgph .pic{font-size:26px}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:calc(var(--nav-h) + 16px);transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:#fff;padding:12px 20px;border-radius:var(--r-pill);font-size:14px;font-weight:500;
  box-shadow:var(--sh-3);opacity:0;transition:opacity .25s,transform .25s;z-index:100;pointer-events:none;max-width:90vw}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(min-width:900px){.toast{bottom:24px}}

/* ---------- footer ---------- */
.ft{background:var(--mohom-d);color:#cdd8e8;margin-top:30px;padding:32px 0 26px}
.ft .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:22px}
@media(max-width:700px){.ft .cols{grid-template-columns:1fr 1fr}}
.ft h4{color:#fff;font-size:14px;margin-bottom:11px}
.ft a{display:block;color:#b6c3d6;font-size:13px;padding:3px 0}
.ft a:hover{color:#fff}
.ft .brand-blk .logo{color:#fff;margin-bottom:10px}
.ft .brand-blk p{font-size:13px;line-height:1.6;color:#a9b7cc;max-width:32ch}
.ft .socials{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.ft .socials a{width:38px;height:38px;background:#fff;border-radius:10px;display:grid;place-items:center;padding:0;box-shadow:var(--sh-1)}
.ft .socials a:hover{transform:translateY(-2px);transition:transform .15s}
.ft .socials .brand-ic{width:20px;height:20px}
.ft-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:22px;padding-top:16px;font-size:12px;color:#8fa0ba;text-align:center}

/* ---------- layout helpers ---------- */
.two-col{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:900px){.two-col{grid-template-columns:1fr 360px;align-items:start}}
.sticky-side{position:sticky;top:76px}
.grid-tour{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:640px){.grid-tour{grid-template-columns:1fr}}
.tour-card{border-radius:var(--r);overflow:hidden;position:relative;aspect-ratio:16/10;box-shadow:var(--sh-1)}
.tour-card img{width:100%;height:100%;object-fit:cover}
.tour-card .cap{position:absolute;inset:auto 0 0 0;padding:14px;background:linear-gradient(transparent,rgba(20,15,50,.8));color:#fff}
.tour-card .cap b{font-family:var(--font-d);font-size:15px}
.tour-card .cap span{font-size:12px;opacity:.9}
.mt8{margin-top:8px}.mt16{margin-top:16px}.mb0{margin-bottom:0}
.center{text-align:center}

/* ============================================================
   HOVER / MOUSE-OVER STATES (เมาส์โอเวอร์)
   ============================================================ */
@media (hover:hover){
  /* โลโก้ header */
  .hdr .logo{transition:opacity .2s,transform .2s}
  .hdr .logo:hover{opacity:.9;transform:translateY(-1px)}
  /* หมวดหมู่วงกลม */
  .cat .thumb{transition:transform .2s,box-shadow .25s}
  .cat .thumb img{transition:transform .35s ease}
  .cat:hover .thumb{transform:translateY(-3px);box-shadow:var(--sh-2)}
  .cat:hover .thumb img{transform:scale(1.08)}
  .cat span{transition:color .2s}
  .cat:hover span{color:var(--brand)}
  /* การ์ดสินค้า — ซูมรูปตอน hover */
  .pcard .pimg{overflow:hidden}
  .pcard .pimg img{transition:transform .4s ease}
  .pcard:hover .pimg img{transform:scale(1.07)}
  .pcard .fav{transition:transform .18s,color .2s,background .2s}
  .pcard .fav:hover{color:var(--sale);transform:scale(1.12);background:#fff}
  /* แบนเนอร์โปรโม / hero / ทัวร์ — ซูมรูปนุ่ม ๆ */
  .promo img,.hero-slide img,.tour-card img{transition:transform .5s ease,filter .3s}
  .promo:hover img{transform:scale(1.03)}
  .tour-card{transition:box-shadow .25s,transform .2s}
  .tour-card:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
  .tour-card:hover img{transform:scale(1.06)}
  /* ลิงก์ "ดูทั้งหมด" */
  .sec-hd a{transition:color .2s,gap .2s;display:inline-flex;align-items:center;gap:3px}
  .sec-hd a:hover{color:var(--brand-d);gap:6px}
  /* ชิปกรอง */
  .chip{transition:border-color .2s,background .2s,color .2s,transform .12s}
  .chip:hover:not(.on){border-color:var(--violet-300);color:var(--ink);background:var(--brand-soft)}
  .chip:active{transform:scale(.97)}
  /* เมนูล่าง */
  .botnav a{transition:color .2s}
  .botnav a:not(.on):hover{color:var(--brand-l)}
  /* ปุ่มลบ/ปุ่มไอคอนในตะกร้า */
  .cart-row .cright button{transition:transform .15s,color .2s}
  .cart-row .cright button:hover{transform:scale(1.12)}
  /* breadcrumb */
  .crumb a{transition:color .2s}
  /* ปุ่มทั่วไป (เสริมจากที่มี) */
  .btn-primary:hover{transform:translateY(-1px)}
  .btn-outline:hover{background:var(--brand-soft)}
  .btn-gold:hover{filter:brightness(1.05);transform:translateY(-1px)}
  /* การ์ดร้าน/แผง คลิกได้ */
  .tour-card,.promo,.cat,.pcard{cursor:pointer}
}

/* ============================================================
   PROMO BANNER — ข้อความทับพื้นที่ซอฟต์โฟกัสด้านขวา
   ============================================================ */
.promo{position:relative}
.promo .promo-cap{position:absolute;top:0;right:0;bottom:0;width:44%;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-end;text-align:right;gap:10px;
  padding:0 clamp(18px,4vw,40px);
  background:linear-gradient(90deg,transparent,rgba(30,20,70,.12) 20%,rgba(30,20,70,.60));color:#fff}
.promo .promo-cap .kick{font-family:var(--font-d);font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;opacity:.92}
.promo .promo-cap h3{font-family:var(--font-d);font-weight:700;font-size:clamp(17px,3.2vw,26px);color:#fff;line-height:1.22;text-shadow:0 2px 10px rgba(20,12,50,.4)}
.promo .promo-cap .pbtn{align-self:flex-end;background:var(--brand-grad);color:#fff;font-family:var(--font-d);font-weight:600;
  font-size:13px;padding:8px 16px;border-radius:var(--r-pill);box-shadow:var(--sh-brand);display:inline-flex;align-items:center;gap:6px;transition:transform .15s}
@media (hover:hover){.promo:hover .promo-cap .pbtn{transform:translateX(3px)}}
@media(max-width:560px){.promo .promo-cap{width:60%}.promo .promo-cap h3{font-size:16px}}

/* ---------- logo (ใช้ไฟล์โลโก้จริง) ---------- */
.logo-chip{background:#fff;border-radius:9px;padding:3px;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 2px 7px rgba(0,0,0,.22)}
.logo-mark-img{width:26px;height:26px;object-fit:contain;display:block}
.auth-logo-img{width:auto;height:76px;max-width:180px;object-fit:contain;display:block;margin:0 auto}

/* ---------- ปุ่มลอย AiBoss ---------- */
.cq-fab{position:fixed;right:16px;bottom:calc(var(--nav-h) + 16px + env(safe-area-inset-bottom));z-index:44;
  display:inline-flex;align-items:center;gap:7px;background:var(--brand-grad);color:#fff;
  font-family:var(--font-d);font-weight:600;font-size:14px;padding:11px 16px;border-radius:var(--r-pill);
  box-shadow:var(--sh-brand);transition:transform .18s,box-shadow .2s;text-decoration:none}
.cq-fab:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(106,63,209,.45);text-decoration:none}
.cq-fab .cq-ic{color:#fff}
@media (min-width:900px){.cq-fab{bottom:24px;right:24px;padding:13px 20px;font-size:15px}}

/* SHOPEE-CARD สไตล์ร้านค้า โชว์ข้อมูลแน่น (โทนทอง commeIQ) */
.pgrid{gap:8px}
.pcard{position:relative}
.pbadges{position:absolute;top:0;left:0;z-index:2}
.badge-sale{background:var(--sale,#E11B2E);color:#fff;font:800 11px/1 system-ui,sans-serif;padding:4px 7px;border-radius:0 0 10px 0;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.badge-tag{display:none}
.pbody{padding:8px 9px 10px;gap:5px}
.pname{font-size:13px;min-height:35px}
.pchips{display:flex;gap:4px;flex-wrap:wrap}
.pchip{font:600 10px/1.5 system-ui,sans-serif;padding:1px 5px;border-radius:4px;white-space:nowrap}
.pchip.ship{color:#1a9f8e;background:#e8faf6;border:1px solid #bdece4}
.pchip.deal{color:var(--sale,#E11B2E);background:#fdecec;border:1px solid #f6c9c9}
.pprice{gap:5px;align-items:baseline;flex-wrap:wrap}
.now{font-size:18px !important;font-weight:800 !important}
.old{font-size:11px}
.pmeta{font-size:11px;color:var(--t3);display:flex;align-items:center;gap:5px}
.pmeta .star{color:#f5a623;display:inline-flex;align-items:center;gap:2px}
.pmeta .ploc{margin-left:auto;color:var(--t3)}
.fav{width:28px;height:28px}

/* ช่องทางที่ยังไม่มีไฟล์โลโก้ — เขียนชื่อเป็นตัวหนังสือ (คำสั่ง CEO 9 ก.ย. 2569) */
.socials .soc-word{display:inline-flex;align-items:center;height:28px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r-pill);font-size:12px;font-weight:700;color:var(--t2);text-decoration:none;background:var(--surface)}
.socials .soc-word:hover{color:var(--brand-d);border-color:var(--brand-l)}

/* ════════════════════════════════════════════════════════════════
   30 ก.ย. 2569 — คำสั่ง CEO สองข้อที่ค้างอยู่ ต้องแก้ที่ไฟล์กลางจึงมีผลทุกหน้า
   1) "ให้ทำให้ขึ้นเต็มหน้า ไม่ใช่มีแต่เนื้อหาช่องตรงกลาง แล้วปล่อย 2 ข้างว่างไว้"
      เดิม --maxw:1200px ตายตัว จอ 1600-2000px จึงเหลือขอบว่างข้างละเกือบ 300px
      แก้ตรง --maxw ที่เดียว ทุกหน้าที่ใช้ .wrap กว้างขึ้นพร้อมกัน (รวมหน้าเที่ยว หน้าจังหวัด หน้าสินค้า)
      กันไว้ด้วย 94vw ไม่ให้ตัวหนังสือชิดขอบจอ
   2) "ยังหาร้านของฉันไม่เจอ" — ปุ่มร้านของฉันต้องอยู่ทั้งแถบล่าง (มือถือ) และหัวเว็บ (คอม)
   ════════════════════════════════════════════════════════════════ */
@media(min-width:1100px){ :root{ --maxw:min(1720px, 94vw) } }
@media(min-width:1500px){ .pgrid{grid-template-columns:repeat(6,1fr)} }
@media(min-width:1800px){ .pgrid{grid-template-columns:repeat(7,1fr)} }

/* ร้านของฉัน — กลางแถบล่าง เด่นกว่าปุ่มอื่น เพราะเป็นหัวใจของแอป */
.botnav .bn-shop{flex:1.25;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-size:10.5px;font-family:var(--font-d);font-weight:700;color:var(--brand-d,#4B2FA8);text-decoration:none}
.botnav .bn-shop .ic{display:grid;place-items:center;width:44px;height:30px;border-radius:var(--r-pill);
  background:var(--brand-grad);color:#fff;box-shadow:var(--sh-brand);line-height:1}
.botnav .bn-shop.on{color:var(--brand)}
/* หัวเว็บ: ปุ่มทอง อ่านออกว่าเป็นตัวหนังสือ ไม่ใช่ไอคอนเปล่าให้เดา */
.hdr-shop{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 15px;border-radius:var(--r-pill);
  background:var(--gold,#D6A94A);color:#3a2a08;font-family:var(--font-d);font-weight:700;font-size:13.5px;
  text-decoration:none;white-space:nowrap;box-shadow:var(--sh-1)}
.hdr-shop:hover{filter:brightness(1.06)}
@media(max-width:700px){ .hdr-shop span{display:none} .hdr-shop{padding:0 11px} }
/* อาชีพของฉัน (CEO 4 ต.ค. 2569) — ปุ่มขาวขอบทองคู่กับร้านของฉัน · มือถือซ่อน (มีการ์ดหน้าแรกและหน้าสำรวจแทน หัวเว็บมือถือที่ไม่พอ) */
.hdr-work{background:#fff;color:#7A5A0E;border:1.5px solid var(--gold,#D6A94A)}
@media(max-width:700px){ .hdr-work{display:none} }

/* คำอธิบายปุ่มหัวเว็บ + ไลน์ @commeiq (CEO 1 ต.ค. 2569) — เฉพาะจอกว้าง
   SO-165 (11 ต.ค. 2569): เดิมกล่องนี้กว้างกว่าที่ว่างจริง แล้วล้นออกสองข้าง ทับชื่อจังหวัดและปุ่มร้านของฉัน
   แก้ให้ไม่ล้น (ตัดด้วย … แทน) และย่อตามความกว้างจอ:
   1024–1279 = ไลน์อย่างเดียว · 1280 ขึ้นไป = คำอธิบาย 2 บรรทัด (ร้านของฉัน · อาชีพของฉัน) + ไลน์ */
.hdr-guide{display:none}
@media(min-width:1024px){
  .hdr-guide{display:flex;flex:1;min-width:0;align-items:center;justify-content:flex-end;gap:14px;padding:0 8px;overflow:hidden}
  .hg-tips{display:grid;grid-template-columns:minmax(0,auto);gap:3px 16px;min-width:0;overflow:hidden;font-size:12.5px;line-height:1.35;color:rgba(255,255,255,.86)}
  .hg-tips span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hg-tips span svg{vertical-align:-2px;margin-right:5px}
  .hg-tips span:nth-child(n+3){display:none}
  .hg-line{flex:none}
  .hg-tips b{color:#f3d48a;font-weight:700}
  .hg-line{display:inline-flex;flex-direction:column;justify-content:center;padding:5px 14px;border-radius:14px;
    background:#06C755;color:#fff;text-decoration:none;line-height:1.25;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.18)}
  .hg-line:hover{filter:brightness(1.06)}
  .hg-line-id{font-size:13px}
  .hg-line-id b{font-weight:800}
  .hg-line-sub{font-size:11px;opacity:.92}
}
@media(min-width:1024px) and (max-width:1279px){ .hg-tips{display:none} }
/* SO-165: มือถือจอแคบ (≤420px) แถวหัวเว็บเดิมกว้างเกินจอ ~26px ปุ่มบัญชีโดนตัด
   ซ่อนปุ่มแว่นขยาย "สำรวจ" (มีช่องค้นหาใต้หัวเว็บและปุ่มสำรวจที่แถบล่างอยู่แล้ว) และให้ชื่อจังหวัดย่อด้วย … ได้ถ้ายาวมาก */
.hdr-icons{flex:none}
@media(max-width:420px){
  .hdr-row{gap:8px}
  .hdr-icons .ib[aria-label="สำรวจ"]{display:none}
  .mk-btn{flex:0 1 auto;min-width:0;overflow:hidden}
  .mk-btn [data-cq-prov-name]{overflow:hidden;text-overflow:ellipsis}
}