/* หมอนอิงและของแต่งบ้าน — โทนอุ่นแบบผ้าลินิน ตัดด้วยเขียวมรกตกับทองเหลือง
   ตามมู้ดรูปปกเพจ (ผนังเข้ม หมอนเขียวมรกต ถาดทองเหลือง โซฟาครีม) */
:root{
  --bg:#F6F1E8; --card:#fff; --ink:#2A2A26; --soft:#7C7768; --line:#E6DFD0;
  --teal:#14615C; --teal-dk:#0E4A46; --teal-soft:#E2EDEA;
  --brass:#A8822F; --clay:#C0603C; --clay-soft:#FAEAE3;
  --shadow:0 1px 2px rgba(42,42,38,.05), 0 8px 24px rgba(42,42,38,.06);
  --r:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Sarabun','Noto Sans Thai',system-ui,sans-serif;
  font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased;
  padding-bottom:76px;                 /* เว้นที่ให้แถบปุ่มแชทด้านล่าง */
}
h1,h2,h3{font-family:'Prompt','Sarabun',sans-serif; font-weight:600; margin:0}
img{max-width:100%; display:block}
button{font:inherit; color:inherit; cursor:pointer}
a{color:inherit}
.wrap{max-width:1080px; margin:0 auto; padding:0 16px}

/* ---------- หัวเว็บ ---------- */
.top{background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:30}
.top-in{display:flex; align-items:center; gap:12px; padding:10px 16px}
.logo{width:44px; height:44px; border-radius:50%; object-fit:cover; flex:none; background:var(--teal-soft)}
.brand h1{font-size:17px; line-height:1.3}
.brand p{margin:0; font-size:12px; color:var(--soft); line-height:1.4}
.lang{margin-left:auto; display:flex; border:1px solid var(--line); border-radius:999px; overflow:hidden}
.lang button{border:0; background:none; padding:5px 12px; font-size:12.5px; color:var(--soft)}
.lang button[aria-current="true"]{background:var(--teal); color:#fff}

.promo{background:var(--teal); color:#fff; font-size:13px; text-align:center; padding:8px 16px}

/* ---------- ตารางราคา ---------- */
.pricebox{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:20px; margin:22px 0; box-shadow:var(--shadow)}
.pricebox h2{font-size:18px; margin-bottom:4px}
.pricebox .lead{margin:0 0 16px; font-size:13.5px; color:var(--soft)}
.ptabs{display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap}
.ptabs button{border:1px solid var(--line); background:var(--card); border-radius:999px;
  padding:6px 16px; font-size:13.5px; color:var(--soft)}
.ptabs button[aria-current="true"]{background:var(--teal); border-color:var(--teal); color:#fff; font-weight:500}
.ptable{display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:10px; overflow:hidden}
.prow{display:grid; grid-template-columns:1fr auto auto; gap:14px; align-items:baseline;
  background:var(--card); padding:11px 15px}
.prow.head{background:var(--teal-soft); font-size:11.5px; letter-spacing:.06em; color:var(--teal-dk)}
.prow .qty{font-weight:500}
.prow .qty em{font-style:normal; color:var(--clay); font-size:12px; font-weight:600; margin-left:6px}
.pcell{font-family:'Prompt',sans-serif; font-weight:600; font-variant-numeric:tabular-nums;
  min-width:88px; text-align:right}
.pcell small{display:block; font-family:'Sarabun',sans-serif; font-weight:400; font-size:11px; color:var(--soft)}
.prow.head .pcell{font-family:'Sarabun',sans-serif; font-weight:400; font-size:11.5px}
.pnote{margin:12px 0 0; font-size:12.5px; color:var(--soft); line-height:1.65}

/* ---------- ตัวกรอง ---------- */
.tools{margin:22px 0 8px}
#q{width:100%; border:1px solid var(--line); background:var(--card); border-radius:999px;
  padding:11px 18px; font:inherit; font-size:14.5px; box-shadow:var(--shadow)}
#q:focus{outline:2px solid var(--teal); outline-offset:1px}
.chips{display:flex; gap:8px; overflow-x:auto; padding:12px 0 4px; scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips button{white-space:nowrap; border:1px solid var(--line); background:var(--card);
  border-radius:999px; padding:6px 15px; font-size:13.5px; color:var(--soft)}
.chips button[aria-current="true"]{background:var(--ink); border-color:var(--ink); color:#fff}
.chips.lines button[aria-current="true"]{background:var(--teal); border-color:var(--teal)}
.count{font-size:12.5px; color:var(--soft); margin:4px 0 12px}

/* ---------- ตะแกรงสินค้า ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:14px}
.card{border:0; background:var(--card); border-radius:var(--r); overflow:hidden;
  padding:0; text-align:left; box-shadow:var(--shadow); position:relative}
/* ทุกชิ้นในการ์ดเป็น span — ต้องสั่ง block เอง ไม่งั้น aspect-ratio กับ padding ไม่ทำงาน */
.card .ph{display:block; aspect-ratio:1/1; background:var(--teal-soft); overflow:hidden}
.card .ph img{width:100%; height:100%; object-fit:cover}
.card .tx{display:block; padding:9px 11px 12px}
.card .cd{display:block; font-size:11px; color:var(--brass); font-weight:600; letter-spacing:.04em}
.card .nm{display:block; font-size:13.5px; line-height:1.45; margin:1px 0 3px;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.card .pr{display:block; font-family:'Prompt',sans-serif; font-size:13px; font-weight:600; color:var(--teal)}
.card .pr small{font-family:'Sarabun',sans-serif; font-weight:400; font-size:11px; color:var(--soft)}
.badge{position:absolute; top:9px; left:9px; background:var(--clay); color:#fff;
  font-size:11px; font-weight:600; padding:2px 9px; border-radius:999px}
.badge.out{background:var(--soft)}
.empty{text-align:center; color:var(--soft); font-size:14px; padding:40px 0}

/* ---------- วิธีสั่ง ---------- */
.how{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:20px; margin:34px 0 24px; box-shadow:var(--shadow)}
.how h2{font-size:17px; margin-bottom:12px}
.how ol{margin:0; padding-left:20px; font-size:14px; line-height:1.85}
.how li{margin-bottom:6px}
.how .hownote{margin:12px 0 0; font-size:12.5px; color:var(--soft)}

footer{text-align:center; font-size:12.5px; color:var(--soft); padding:8px 16px 28px; line-height:1.9}
.ft-links a{color:var(--teal); text-decoration:none; font-weight:500}

/* ---------- แถบปุ่มแชทล่างจอ ---------- */
.bar{position:fixed; left:0; right:0; bottom:0; z-index:40; display:flex; gap:8px;
  padding:9px 14px calc(9px + env(safe-area-inset-bottom));
  background:rgba(246,241,232,.94); backdrop-filter:blur(8px); border-top:1px solid var(--line)}
.btn{flex:1; display:flex; align-items:center; justify-content:center; gap:7px;
  border-radius:999px; padding:12px; font-size:14.5px; font-weight:600;
  text-decoration:none; color:#fff; border:0}
.btn.fb{background:#0866FF}
.btn.line{background:#06C755}
.btn .ic{font-size:16px}

/* ---------- หน้ารายละเอียด ---------- */
.sheet{position:fixed; inset:0; z-index:60; display:flex; align-items:flex-end; justify-content:center}
.sheet[hidden]{display:none}
.sheet-bg{position:absolute; inset:0; background:rgba(30,28,24,.55)}
.sheet-in{position:relative; background:var(--bg); width:100%; max-width:620px;
  max-height:94vh; overflow-y:auto; border-radius:20px 20px 0 0; -webkit-overflow-scrolling:touch}
@media(min-width:640px){ .sheet{align-items:center} .sheet-in{border-radius:20px; max-height:90vh} }
.x{position:absolute; top:10px; right:10px; z-index:2; width:34px; height:34px; border:0;
  border-radius:50%; background:rgba(255,255,255,.92); font-size:15px; box-shadow:var(--shadow)}
.gal{background:var(--card)}
#mainimg{width:100%; aspect-ratio:1/1; object-fit:cover}
.strip{display:flex; gap:7px; overflow-x:auto; padding:9px 12px; scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.strip img{width:54px; height:54px; border-radius:8px; object-fit:cover; flex:none;
  border:2px solid transparent; cursor:pointer}
.strip img[aria-current="true"]{border-color:var(--teal)}
.info{padding:16px 18px 26px}
.scode{font-size:12px; color:var(--brass); font-weight:600; letter-spacing:.05em; margin:0}
.sline{font-size:12px; color:var(--soft); margin:0 0 2px}
#sname{font-size:19px; line-height:1.4; margin:2px 0 12px}
.soldout{background:var(--soft); color:#fff; border-radius:10px; padding:10px 14px;
  font-size:13.5px; margin-bottom:14px}
.lowstock{background:var(--clay-soft); color:var(--clay); border-radius:10px;
  padding:9px 14px; font-size:13.5px; margin:0 0 14px; font-weight:500}
.lab{font-size:12.5px; color:var(--soft); margin:0 0 7px}
.opts{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:15px}
.opts button{border:1px solid var(--line); background:var(--card); border-radius:999px;
  padding:7px 15px; font-size:13.5px}
.opts button[aria-current="true"]{background:var(--teal); border-color:var(--teal); color:#fff; font-weight:500}

/* ราคาที่คำนวณให้ — ตัวเลขใหญ่ ลูกค้าไม่ต้องถามแชท */
.total{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:15px 18px; margin:4px 0 16px; box-shadow:var(--shadow)}
.total .what{font-size:12.5px; color:var(--soft); margin:0 0 2px}
.total .amt{font-family:'Prompt',sans-serif; font-size:30px; font-weight:600; color:var(--teal);
  line-height:1.2; font-variant-numeric:tabular-nums}
.total .amt span{font-size:15px; font-weight:400; color:var(--soft); margin-left:5px}
.total .per{font-size:12.5px; color:var(--soft); margin:2px 0 0}
.total .mix{margin:9px 0 0; font-size:12.5px; color:var(--teal-dk); background:var(--teal-soft);
  border-radius:8px; padding:7px 11px}

.copybox{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:15px 18px; margin-bottom:16px; box-shadow:var(--shadow)}
.lab2{font-size:12px; color:var(--soft); margin:0 0 3px}
.orderline{font-size:14px; line-height:1.6; margin:0 0 12px; font-weight:500}
.copy{width:100%; border:0; background:var(--brass); color:#fff; border-radius:999px;
  padding:12px; font-size:14.5px; font-weight:600}
.ctas{display:flex; gap:9px; margin-bottom:12px}
.tip{font-size:12.5px; color:var(--soft); line-height:1.65; margin:0}

.toast{position:fixed; left:50%; bottom:88px; transform:translateX(-50%); z-index:80;
  background:var(--ink); color:#fff; font-size:13.5px; padding:11px 20px; border-radius:999px;
  max-width:88vw; text-align:center; box-shadow:var(--shadow)}
.toast[hidden]{display:none}