:root{
      --bg:#fafafa;--card:#ffffff;--text:#1f2937;--muted:#6b7280;--pri:#ef4444;--pri-2:#b91c1c;--acc:#10b981;--line:#e5e7eb;
      --shadow:0 10px 20px rgba(0,0,0,.08);
    }
    *{box-sizing:border-box}
    html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoi UI,Roboto,PingFang SC,TH Sarabun New,Arial,sans-serif}
    a{color:inherit;text-decoration:none}
    .container{max-width:1100px;margin:0 auto;padding:20px}
    header{position:sticky;top:0;background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line);z-index:20}
    .nav{display:flex;align-items:center;justify-content:space-between;padding:12px 20px}
    .brand{display:flex;gap:10px;align-items:center}
    .brand-logo{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:#fff;font-weight:700;background:linear-gradient(135deg,var(--pri),#f59e0b)}
    .brand h1{font-size:1.05rem;margin:0}
    .nav-right{display:flex;gap:10px;align-items:center}
    .btn{border:1px solid var(--line);background:var(--card);padding:10px 14px;border-radius:12px;cursor:pointer;transition:transform .05s ease, box-shadow .2s;box-shadow:none}
    .btn:hover{box-shadow:var(--shadow)}
    .btn.pri{background:var(--pri);border-color:transparent;color:#fff}
    .btn.pri:hover{background:var(--pri-2)}
    .hero{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center;padding:28px 20px}
    .hero-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--shadow)}
    .badge{display:inline-block;background:#111827;color:#fff;padding:6px 10px;border-radius:999px;font-size:.8rem}
    .hero h2{font-size:2rem;margin:.4rem 0 0}
    .hero p{color:var(--muted)}
    .grid{display:grid;gap:16px}
    .grid.cols-3{grid-template-columns:repeat(3,1fr)}
    @media (max-width:900px){.hero{grid-template-columns:1fr}.grid.cols-3{grid-template-columns:repeat(2,1fr)}}
    @media (max-width:640px){.grid.cols-3{grid-template-columns:1fr}}
    .card{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
    .card img{width:100%;height:160px;object-fit:cover}
    .card-body{padding:14px}
    .title{font-weight:700}
    .muted{color:var(--muted)}
    .price{font-weight:800}
    .toolbar{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}
    .toolbar input,.toolbar select{padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:#fff;min-width:140px}
    .pill{padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:#fff;cursor:pointer}
    .pill.active{background:#111827;color:#fff;border-color:#111827}
    .flex{display:flex;gap:10px;align-items:center}
    .space{height:28px}
    .section-title{display:flex;align-items:end;justify-content:space-between;margin:26px 0 14px}
    .section-title h3{margin:0}
    .cart{position:fixed;right:20px;bottom:20px;background:#111827;color:#fff;border-radius:16px;padding:12px 16px;box-shadow:var(--shadow);display:flex;gap:10px;align-items:center;z-index:30}
    .cart .badge-mini{background:#fff;color:#111827;border-radius:999px;padding:2px 8px;font-weight:700}
    dialog{border:none;border-radius:16px;width:min(680px,92vw);padding:0;overflow:hidden}
    .sheet{background:#fff}
    .sheet-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line)}
    .sheet-body{padding:16px}
    .row{display:grid;grid-template-columns:1fr auto auto auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px dashed var(--line)}
    .row .qty{display:flex;align-items:center;gap:6px}
    .qty button{border:1px solid var(--line);background:#fff;width:28px;height:28px;border-radius:8px;cursor:pointer}
    .del{border:1px solid var(--line);background:#fff;width:28px;height:28px;border-radius:8px;cursor:pointer}
    .total{display:flex;align-items:center;justify-content:space-between;font-weight:800;margin-top:10px}
    .checkout{display:grid;gap:10px;margin-top:14px}
    .checkout input,.checkout textarea,.checkout select{width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--line)}
    footer{margin-top:40px;border-top:1px solid var(--line);background:var(--card)}
    .foot{display:grid;gap:12px;grid-template-columns:1.5fr 1fr 1fr;padding:22px}
    @media (max-width:900px){.foot{grid-template-columns:1fr}}
    .tag{display:inline-block;border:1px dashed var(--line);padding:6px 10px;border-radius:12px;margin:4px 6px 0 0;color:var(--muted)}
    .map{width:100%;height:220px;border:0;border-radius:14px}
    .label{font-size:.9rem;color:var(--muted)}
    
    .card .thumb{
    width: 100%;
    aspect-ratio: 4 / 3;  /* หรือ 1/1, 16/9 ตามต้องการ */
    overflow: hidden;
    background: #f6f7f8;
  }
  .card .thumb img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* ===== Compact option list ===== */
#cartSheet .opt-group{ margin-top:10px; }


/* กล่องตัวเลือกกระชับ */
#cartSheet .opt-list{
  display:grid; gap:8px;
  max-height:34vh;            /* เลื่อนในกลุ่มได้ ถ้ายาว */
  overflow-y:auto; padding-right:6px;
  scroll-behavior:smooth;
}

#cartSheet .opt-item{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px;           /* เล็กลงจากเดิม */
  border:1px solid #e9e9e9; border-radius:12px;
  background:#fafafa;
  transition:transform .06s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}

/* input เล็ก สีกลมกลืน */
#cartSheet .opt-item input[type="radio"],
#cartSheet .opt-item input[type="checkbox"]{
  width:18px; height:18px; accent-color:#ff6b6b; /* เห็นชัดบนมือถือ */
}

/* ชื่อ option ตัวเล็กอ่านง่าย */
#cartSheet .opt-name{ font-size:14.5px; line-height:1.25; }

/* ป้ายราคาเล็ก ๆ */
#cartSheet .opt-badge{
  margin-left:auto;
  font-size:12px; min-width:32px; text-align:center;
  padding:2px 8px; border-radius:999px;
  background:#fff; border:1px solid #eee; color:#666;
}

/* เอฟเฟกต์ตอนกด/โฟกัส */
#cartSheet .opt-item:active{ transform:scale(.98); }
#cartSheet .opt-item:focus-within{
  border-color:#ffd1d1; box-shadow:0 0 0 3px rgba(255,107,107,.15);
}

/* เมื่อถูกเลือก: เน้นกรอบ/พื้นหลังเบา ๆ */
#cartSheet .opt-item.selected{
  border-color:#ffb3b3;
  background:linear-gradient(180deg,#fff8f8, #fff);
}

/* รวมทั้ง modal เลื่อนสบายตา */
#cartSheet .sheet{ display:flex; flex-direction:column; max-height:90vh; overflow:hidden; }
#cartSheet .sheet-head{ position:sticky; top:0; z-index:2; background:#fff; border-bottom:1px solid #eee; }
#cartSheet .sheet-body{ flex:1 1 auto; overflow-y:auto; min-height:0; padding:12px 16px; }

/* โมบายเล็กมาก */
@media (max-width:420px){
  #cartSheet .opt-item{ padding:8px 10px; }
  #cartSheet .opt-name{ font-size:14px; }
  #cartSheet .opt-list{ max-height:30vh; }
}

#cartSheet .opt-title {
  font-weight: 400 !important;
  font-size: 13px !important;
  font-family: "Kanit", "Noto Sans Thai", sans-serif !important; /* ฟอนต์ไทยที่มีน้ำหนัก 400 จริง */
  font-synthesis: none !important; /* กัน browser ทำ bold ปลอม */
  display: block;
  margin: 2px 0 4px !important;
  color: #444 !important;
}

.opt-group .req { color: #e53935; margin-left: 4px; }
.opt-group.req-missing { outline: 2px dashed #e53935; padding: 6px; border-radius: 8px; }


.map-responsive {
  position: relative;
  padding-bottom: 56.25%; /* อัตราส่วน 16:9 → ถ้าอยากได้สัดส่วนอื่นก็ปรับค่าได้ */
  height: 0;
  overflow: hidden;
}
.map-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

.main_menu .grid.cols-3{
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
}

/* แท็บเล็ต/มือถือ ≤ 900px: 2 คอลัมน์ */
@media (max-width: 900px){
  .main_menu .grid.cols-3{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 12px;
  }
  .main_menu .card img{ height: 140px; object-fit: cover; }
  .main_menu .card-body{ padding: 10px; font-size: 13px; }
}

/* มือถือเล็ก ≤ 640px: คง 2 คอลัมน์ (ทับกฎเก่าที่ทำให้เหลือ 1) */
@media (max-width: 640px){
  .main_menu .grid.cols-3{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}

/* กันการล้นทำให้คอลัมน์หลุด */
.main_menu #menuGrid > *{ min-width: 0; }


.msg-popup{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  display: grid; place-items: center;
  z-index: 2147483647; /* สูงกว่า modal/backdrop */
}
.msg-card{
  background:#fff; border-radius:14px; padding:20px; text-align:center;
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
  max-width: 360px; width: min(92vw, 420px);
  border-top:4px solid #10b981;
}
.msg-card.bad{ border-top-color: crimson; }
.msg-title{ font-weight:700; font-size:16px; margin-bottom:10px; }
.msg-text{ font-size:14px; color:#333; margin-bottom:16px; white-space:pre-line; }
.msg-btn{ background:#111; color:#fff; border:0; padding:8px 16px; border-radius:8px; cursor:pointer; }