/* PJ Sweet Home — โทนสีดึงมาจากโลโก้ร้าน: ฟ้าพาสเทล · โซฟาเหลืองมัสตาร์ด · หมอนส้มคอรัล */
:root{
  --sky:#e8f1f8;        /* พื้นหลัง — ฟ้าพาสเทลจากโลโก้ */
  --card:#ffffff;
  --ink:#2f2e36;
  --mid:#6e7480;
  --soft:#9aa3b0;
  --line:#d7e5f0;
  --coral:#e2644a;      /* หมอนสีส้มในโลโก้ — ใช้เป็นสีราคา/ปุ่มหลัก */
  --coral-d:#c9502f;
  --mustard:#f2a93b;    /* โซฟาในโลโก้ */
  --teal:#3f9d97;       /* หมอนเขียวในโลโก้ */
  --blue:#0866ff; --green:#06c755;
  --r:20px; --bar:70px;
}
*{box-sizing:border-box}
/* ต้องมี ไม่งั้น display:flex/grid ที่ตั้งไว้จะทับคำสั่งซ่อน hidden ของ HTML */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--sky); color:var(--ink);
  font-family:'Noto Sans Thai',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:15px; line-height:1.6;
  padding-bottom:calc(var(--bar) + env(safe-area-inset-bottom));
}
img{max-width:100%; display:block}
a{color:inherit}
.wrap{max-width:1080px; margin:0 auto; padding:0 14px}

/* ---------- header ---------- */
.top{background:#fff; border-bottom:2px solid var(--line); position:sticky; top:0; z-index:30}
.top-in{display:flex; align-items:center; gap:11px; padding-top:9px; padding-bottom:9px}
.logo{width:48px; height:48px; border-radius:50%; object-fit:cover;
      border:2px solid var(--line); flex:0 0 auto}
.brand{flex:1; min-width:0}
.brand h1{margin:0; font-family:'Mali','Noto Sans Thai',cursive; font-size:19px;
          font-weight:700; letter-spacing:.2px; color:var(--ink)}
.brand p{margin:0; font-size:12px; color:var(--mid);
         white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.lang{display:flex; flex:0 0 auto; background:var(--sky); border-radius:999px; padding:3px}
.lang button{border:0; background:none; font-family:inherit; font-size:12.5px; font-weight:600;
             color:var(--mid); padding:6px 11px; border-radius:999px; cursor:pointer}
.lang button.on{background:var(--coral); color:#fff}

.promo{background:var(--coral); color:#fff; font-size:13px; font-weight:500; text-align:center}
.promo .wrap{padding-top:8px; padding-bottom:8px}

/* ---------- price box ---------- */
.pricebox{background:var(--card); border:2px solid var(--line); border-radius:var(--r);
          padding:16px; margin:16px 0 6px}
.pricebox h2{margin:0 0 11px; font-family:'Mali','Noto Sans Thai',cursive; font-size:16px; font-weight:700}
.ptable{display:flex; flex-direction:column; gap:8px}
.prow{display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; align-items:center;
      background:var(--sky); border-radius:14px; padding:10px 12px}
.psize{font-size:13px; font-weight:600; color:var(--mid)}
.pcell{font-size:13px; text-align:center; color:var(--mid)}
.pcell b{display:block; font-size:21px; font-weight:700; color:var(--coral); line-height:1.2}
.pcell small{display:block; font-size:11px; color:var(--soft)}
.pnote{margin:11px 0 0; font-size:13px; color:var(--mid); text-align:center}
.sizenote{margin-top:6px; font-size:12px; color:var(--soft)}

/* ---------- tools ---------- */
.tools{margin:18px 0 10px}
#q{width:100%; padding:12px 16px; font-size:15px; font-family:inherit; color:var(--ink);
   background:#fff; border:2px solid var(--line); border-radius:999px; outline:none}
#q:focus{border-color:var(--coral)}
.chips{display:flex; gap:7px; margin-top:11px; overflow-x:auto; padding-bottom:3px; scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto; padding:8px 16px; font-size:13px; font-family:inherit; font-weight:600;
      background:#fff; color:var(--mid); border:2px solid var(--line); border-radius:999px; cursor:pointer}
.chip.on{background:var(--teal); color:#fff; border-color:var(--teal)}
.count{margin:0 0 10px; font-size:12.5px; color:var(--soft)}

/* ---------- grid ---------- */
.grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
@media(min-width:600px){.grid{grid-template-columns:repeat(3,1fr); gap:16px}}
@media(min-width:900px){.grid{grid-template-columns:repeat(4,1fr)}}
.card{background:var(--card); border:2px solid var(--line); border-radius:var(--r);
      overflow:hidden; cursor:pointer; text-align:left; padding:0; font-family:inherit;
      display:flex; flex-direction:column}
.card:active{transform:scale(.985)}
.ph{position:relative; aspect-ratio:1/1; overflow:hidden; background:#dceaf3}
.ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.tag{position:absolute; left:8px; top:8px; background:#fff; color:var(--ink);
     font-size:11px; font-weight:700; padding:4px 9px; border-radius:999px; letter-spacing:.3px}
.ncol{position:absolute; right:8px; top:8px; background:var(--mustard); color:#fff;
      font-size:11px; font-weight:600; padding:4px 9px; border-radius:999px}
.out{position:absolute; inset:0; background:rgba(232,241,248,.82); display:flex;
     align-items:center; justify-content:center; font-size:13px; font-weight:700; color:var(--mid)}
.meta{padding:10px 11px 12px}
.meta h3{margin:0; font-size:13.5px; font-weight:600; line-height:1.4}
.meta p{margin:4px 0 0; font-size:13.5px; color:var(--coral); font-weight:700}
.meta h3{overflow-wrap:anywhere}
.meta p small{color:var(--soft); font-weight:400; font-size:11.5px}
.empty{text-align:center; color:var(--mid); padding:34px 10px; font-size:14px}

/* ---------- how to ---------- */
.how{background:var(--card); border:2px solid var(--line); border-radius:var(--r);
     padding:18px 16px; margin:26px 0 20px}
.how h2{margin:0 0 12px; font-family:'Mali','Noto Sans Thai',cursive; font-size:16px; font-weight:700}
.how ol{margin:0; padding-left:20px; font-size:14px; color:var(--mid)}
.how li{margin-bottom:8px}
.how li b{color:var(--ink)}
.hownote{margin:12px 0 0; font-size:13px; color:var(--soft)}

footer{text-align:center; padding:6px 14px 26px; font-size:12.5px; color:var(--soft)}
footer p{margin:3px 0}
.ft-links a{color:var(--mid); text-decoration:none; border-bottom:1px solid var(--line)}

/* ---------- sticky bar ---------- */
.bar{position:fixed; left:0; right:0; bottom:0; z-index:40; display:flex; gap:9px;
     padding:10px 12px calc(10px + env(safe-area-inset-bottom));
     background:rgba(255,255,255,.97); border-top:2px solid var(--line); backdrop-filter:blur(8px)}
.btn{flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
     padding:13px 10px; border-radius:15px; font-size:14.5px; font-weight:700;
     text-decoration:none; color:#fff; white-space:nowrap}
.btn .ic{font-size:15px}
.btn.fb{background:var(--blue)}
.btn.line{background:var(--green)}
.btn:active{filter:brightness(.94)}

/* ---------- detail sheet ---------- */
.sheet{position:fixed; inset:0; z-index:60; display:flex; align-items:flex-end; justify-content:center}
.sheet-bg{position:absolute; inset:0; background:rgba(30,44,56,.5)}
.sheet-in{position:relative; background:var(--sky); width:100%; max-width:560px;
          max-height:94vh; overflow-y:auto; border-radius:26px 26px 0 0;
          animation:up .22s ease-out; -webkit-overflow-scrolling:touch}
@media(min-width:600px){
  .sheet{align-items:center}
  .sheet-in{border-radius:24px; max-height:92vh}
}
@keyframes up{from{transform:translateY(28px);opacity:.4}to{transform:none;opacity:1}}
.x{position:absolute; right:12px; top:12px; z-index:2; width:36px; height:36px; border:0;
   border-radius:50%; background:#fff; font-size:15px; color:var(--ink); cursor:pointer;
   box-shadow:0 2px 7px rgba(20,50,70,.18)}
.gal{background:#fff}
#mainimg{width:100%; aspect-ratio:1/1; object-fit:cover; background:#dceaf3}
.strip{display:flex; gap:7px; overflow-x:auto; padding:9px 12px; scrollbar-width:none; background:#fff}
.strip::-webkit-scrollbar{display:none}
.strip img{width:56px; height:56px; flex:0 0 auto; object-fit:cover; border-radius:11px;
           border:2px solid transparent; cursor:pointer}
.strip img.on{border-color:var(--coral)}

.info{padding:15px 16px 22px}
.scode{margin:0; font-size:12px; font-weight:700; color:var(--coral); letter-spacing:1px}
.info h3{margin:2px 0 14px; font-family:'Mali','Noto Sans Thai',cursive; font-size:20px; font-weight:700}
.soldout{background:#fde8e4; color:#b34a35; font-size:13px; padding:10px 12px; border-radius:13px; margin-bottom:14px}
.lab{margin:14px 0 8px; font-size:13px; font-weight:600; color:var(--mid)}
.lab2{margin:0; font-size:11.5px; color:var(--soft)}
.opts{display:flex; flex-wrap:wrap; gap:8px}
.opt{padding:9px 14px; font-size:13.5px; font-family:inherit; background:#fff; color:var(--ink);
     border:2px solid var(--line); border-radius:13px; cursor:pointer; text-align:left}
.opt.on{border-color:var(--teal); background:var(--teal); color:#fff}
.opt.on small{color:rgba(255,255,255,.78)}
.opt small{display:block; font-size:11px; color:var(--soft)}
.opt.dead{opacity:.42; text-decoration:line-through}

.pricepick{display:flex; gap:9px; margin:15px 0 4px}
.pp{flex:1; background:#fff; border:2px solid var(--line); border-radius:15px; padding:11px 12px; text-align:center}
.pp b{display:block; font-size:24px; font-weight:700; color:var(--coral); line-height:1.25}
.pp span{font-size:12px; color:var(--mid)}
.pp.on{border-color:var(--coral); background:#fff2ee}
.pp.on b,.pp.on span{color:var(--coral-d)}

.copybox{background:#fff; border:2px dashed var(--coral); border-radius:15px;
         padding:12px 14px; margin:16px 0 14px}
.bigcode{margin:2px 0 11px; font-size:15px; font-weight:700; line-height:1.4}
.copy{width:100%; padding:12px 15px; font-size:14px; font-family:inherit; font-weight:700;
      background:var(--coral); color:#fff; border:0; border-radius:12px; cursor:pointer}
.copy:active{background:var(--coral-d)}
.copy:disabled{background:var(--soft)}
.manual{margin-top:11px}
.manual p{margin:0 0 7px; font-size:12.5px; color:var(--mid)}
.manual textarea{width:100%; font-family:inherit; font-size:13.5px; line-height:1.5;
  color:var(--ink); background:var(--sky); border:2px solid var(--line);
  border-radius:11px; padding:9px 11px; resize:none; -webkit-user-select:text; user-select:text}
.ctas{display:flex; gap:9px}
.tip{margin:13px 0 0; font-size:12.5px; color:var(--mid); background:#fff;
     border-radius:13px; padding:11px 13px}

.toast{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(var(--bar) + 20px);
       background:var(--ink); color:#fff; font-size:13.5px; padding:11px 21px; border-radius:999px;
       z-index:80; animation:up .2s ease-out; max-width:88vw; text-align:center}