* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans Thai", sans-serif;
  background: #faf9f7;
  color: #1a1a1a;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
a { text-decoration: none; color: inherit; }

img {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
  pointer-events: none;
}

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 16px;
  max-width: 1400px;
  margin: 0 auto;
}
@media (min-width: 720px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1080px) {
  .grid { grid-template-columns: repeat(var(--desktop-cols, 3), 1fr); gap: 20px; padding: 20px; }
}

.card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--card-radius, 12px);
  background: #f0efec;
}

/* template 1 */
.card-1 { aspect-ratio: 1 / 1; }
.card-1 img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }

/* template 2 — bg_ratio ถูกตั้งค่าผ่าน inline style (aspect-ratio) จากแอดมิน, 3/4 คือค่า fallback */
.card-2 { aspect-ratio: 3 / 4; }
.card2-bg-link { position: absolute; inset: 0; display: block; }
.card2-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.card2-images {
  position: absolute; left: 0; right: 0; bottom: 6%;
  display: flex; gap: 8px; padding: 0 8%;
}
.card2-item {
  flex: 1; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--overlay-radius, 0px);
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  border: 2px solid var(--theme, transparent);
  background: rgba(255,255,255,.5);
}
.card2-item img { width: 100%; height: 100%; object-fit: cover; }

/* template 3 */
.card-3 { background: #fff; border: 1px solid #eee; padding: 12px; }
.cat-tabs { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 12px; padding-bottom: 4px; }
.cat-tab {
  border: none; background: #f0efec; padding: 8px 14px; border-radius: 20px;
  font-size: 14px; white-space: nowrap; cursor: pointer; color: #555;
}
/* !important จำเป็นเพราะสีข้อความปกติมาจาก inline style ต่อหมวดหมู่ (ต้องชนะให้ตัวอักษรอ่านออกตอนพื้นหลังเข้ม) */
.cat-tab.active { background: var(--theme, #1a1a1a); color: #fff !important; }
.cat-panel { display: none; }
.cat-panel.active { display: block; }
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cat-grid img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; }

/* template 4 & 5: หัวข้อ/ไทม์ไลน์ กว้างเต็มแถวเสมอ ไม่ถูกจัด 3 ต่อแถวเหมือนแบบ 1-3 */
.card-4, .card-5 {
  grid-column: 1 / -1;
  background: #fff;
  border-radius: var(--card-radius, 12px);
  overflow: hidden;
}

/* hero_ratio ถูกตั้งค่าผ่าน inline style (aspect-ratio) จากแอดมิน */
.t4-hero { position: relative; aspect-ratio: 16 / 9; }
.t4-hero img, .t4-hero a { display: block; width: 100%; height: 100%; }
.t4-hero img { object-fit: cover; }
.t4-caption {
  position: absolute; top: 24px; left: 0; right: 0; text-align: center; color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.55); padding: 0 16px;
  border-top: 3px solid var(--theme, transparent);
}
.t4-caption h2 { margin: 0 0 6px; font-size: clamp(20px, 4vw, 30px); }
.t4-caption p { margin: 0; font-size: 13px; letter-spacing: 3px; }

/* รูปแถวล่างของแบบที่ 4: เลื่อนแนวนอนได้เมื่อล้นความกว้าง (แทนการตัดขึ้นบรรทัดใหม่) */
.t4-grid {
  display: flex; gap: 8px; padding: 12px; overflow-x: auto;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.t4-item { flex: 0 0 120px; scroll-snap-align: start; }
.t4-item img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; }
.t4-item-caption { display: block; text-align: center; font-size: 12px; color: #666; padding: 4px 0 0; }

/* แบบที่ 5: หัวข้อกึ่งกลาง + แท็บหมวดหมู่ (ขีดเส้นใต้บอกสถานะ) + Hero เต็มความกว้าง + ตารางสินค้า 3 คอลัมน์มีเส้นกรอบ */
.t5-header { text-align: center; padding: 28px 16px 14px; }
.t5-heading { margin: 0; font-size: clamp(20px, 4vw, 26px); font-weight: 600; letter-spacing: 2px; }
.t5-subheading { margin: 6px 0 0; font-size: 12px; letter-spacing: 3px; color: #999; }

.t5-tabs {
  display: flex; justify-content: center; gap: 28px; overflow-x: auto;
  padding: 0 16px 14px; border-bottom: 1px solid #eee;
}
.t5-tab {
  border: none; background: none; padding: 0 0 10px; margin: 0;
  font-size: 14px; letter-spacing: .5px; color: #888; white-space: nowrap;
  cursor: pointer; position: relative;
}
.t5-tab.active { color: #1a1a1a; font-weight: 600; }
.t5-tab.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--theme, #1a1a1a);
}

.t5-panel { display: none; }
.t5-panel.active { display: block; }

.t5-hero { display: block; width: 100%; aspect-ratio: 4 / 3; background-size: cover; background-position: center; }

.t5-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid #e2e2e2; border-left: 1px solid #e2e2e2;
}
.t5-grid > a, .t5-grid > div {
  display: block; aspect-ratio: var(--t5-ratio, 4 / 5); overflow: hidden;
  background: #f4f3f1; border-right: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2;
}
.t5-grid img { width: 100%; height: 100%; object-fit: cover; }

.empty-state { text-align: center; color: #999; padding: 60px 20px; }

/* กลุ่ม showcase ที่ "ติดกัน" (stick_next) — เรียงเต็มความกว้างเป็นคอลัมน์เดียว ไม่มีช่องว่างระหว่างกัน
   ขอบมนเหลือแค่หัวกลุ่ม (บน) และท้ายกลุ่ม (ล่าง) ตัวกลางไม่มีขอบมนเลย */
.card-group { grid-column: 1 / -1; display: flex; flex-direction: column; }
.card.group-start { border-radius: var(--card-radius, 12px) var(--card-radius, 12px) 0 0; }
.card.group-mid { border-radius: 0; }
.card.group-end { border-radius: 0 0 var(--card-radius, 12px) var(--card-radius, 12px); }

/* โหมด "สัดส่วนมือถือ" บนคอมพิวเตอร์ — บังคับคอลัมน์เดียวแคบตรงกลาง แทนที่ grid หลายคอลัมน์ของ desktop breakpoint */
body.desktop-mobile-ratio .grid {
  grid-template-columns: 1fr;
  max-width: 480px;
}