/* public/style.css — เฉพาะหน้า P1 (หน้าแรก) — design/01-pages.md §4
   โทเคน/ฐาน CSS ทั้งเว็บอยู่ที่ /shared/tokens.css และ /shared/chrome.css (โหลดคู่กันเสมอ) */

main.home {
  padding-top: var(--sp-5);
  padding-bottom: var(--sp-7);
}

/* ---------- ⑪ แบนเนอร์ตามฤดู (§4.4) — ปิดอยู่ = mount ว่างเปล่า ไม่กินที่เลย ---------- */
#แบนเนอร์ตามฤดู-mount:empty { display: none; }
.seasonal-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: var(--sp-3) var(--gutter);
  background: var(--accent);
  color: var(--on-accent);
  text-align: center;
  font-size: var(--fs-btn);
  font-weight: 700;
  text-decoration: none;
  touch-action: manipulation;
}
a.seasonal-banner:active { background: var(--accent-hot); }
.seasonal-banner--text-only { cursor: default; }

/* ---------- รูปหน้าร้าน (§4.1, §4.5) — 16:9 คือ LCP ของหน้านี้ ---------- */
#รูปหน้าร้าน-mount:empty { display: none; } /* ไม่มีรูป = ไม่กินที่เลย (ไม่ใช่กรอบเปล่า) */
.home__shop-photo {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--surface-photo);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  margin-bottom: var(--sp-5);
}

.home__shop-name {
  font-size: var(--fs-display);
}

.home__underline {
  width: 64px;
  height: 4px;
  background: var(--accent);
  border-radius: 2px;
  margin-top: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.home__intro {
  color: var(--on-surface-2);
  margin-bottom: var(--sp-4);
  max-width: 68ch;
}

#สถานะร้าน {
  margin-bottom: var(--sp-6);
}

/* ---------- 4 ปุ่มใหญ่ (§4.1, §4.2) — กริด 2×2 บนมือถือ สูง 72px ---------- */
.hero-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}
.btn-lg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--btn-lg-h);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius);
  font-size: var(--fs-btn-lg);
  font-weight: 800;
  text-decoration: none;
  text-align: center;
  line-height: 1.2;
  touch-action: manipulation;
}
.btn-lg--primary {
  background: var(--accent);
  color: var(--on-accent);
}
.btn-lg--primary:active { background: var(--accent-hot); transform: scale(0.98); }
.btn-lg--secondary {
  background: var(--surface-2);
  color: var(--on-surface);
  border: 1px solid var(--line-strong);
}
.btn-lg--secondary:active { background: var(--surface-3); transform: scale(0.98); }
@media (prefers-reduced-motion: reduce) {
  .btn-lg:active { transform: none; }
}

/* ---------- แถบ "บริการ & ราคา" เต็มความกว้าง (§4.1 — D4 "บริการนำ") ---------- */
.services-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: var(--btn-lg-h);
  padding: var(--sp-3) var(--sp-4);
  border-left: 4px solid var(--accent);
  background: var(--surface-2);
  border-radius: var(--radius);
  color: var(--on-surface);
  text-decoration: none;
  font-size: var(--fs-btn);
  font-weight: 700;
  margin-bottom: var(--sp-7);
  touch-action: manipulation;
}
.services-banner:active { background: var(--surface-3); }
.services-banner__arrow {
  flex: none;
  font-size: var(--fs-h2);
  color: var(--accent);
}

/* ---------- แถบสินค้าเด่น (§4.3) — เลื่อนแนวนอน การ์ด 70vw สูงสุด 280px ---------- */
.featured-products h2 {
  margin-bottom: var(--sp-4);
}
.featured-products__list {
  display: flex;
  gap: var(--sp-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  /* ขอบซ้าย/ขวาแถบต้องเท่ากับ gutter (§4.3) — ทำผ่าน padding + ลบ margin คอนเทนเนอร์ออกด้วย negative margin
     กันไม่ให้การ์ดใบแรก/ใบสุดท้ายชิดขอบจอเกินไปตอนเลื่อนสุด (container จำกัดกว้าง 720px แต่แถบนี้อยากให้
     เลื่อนได้เต็มความกว้างจอบนมือถือ) */
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  padding-bottom: var(--sp-2); /* กันแถบเลื่อนของเบราว์เซอร์บังการ์ดใบล่าง */
  list-style: none;
}
.featured-products__card {
  scroll-snap-align: start;
  flex: none;
  width: 70vw;
  max-width: 280px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--on-surface);
  display: block;
  touch-action: manipulation;
}
.featured-products__card:active {
  background: var(--surface-3);
  transform: scale(0.99);
}
@media (prefers-reduced-motion: reduce) {
  .featured-products__card:active { transform: none; }
}
.featured-products__frame {
  aspect-ratio: 4 / 3;
  background: var(--surface-photo);
  display: grid;
  place-items: center;
}
.featured-products__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.featured-products__big-label {
  font-size: var(--fs-display);
  font-weight: 800;
  color: var(--on-surface-3);
  font-variant-numeric: tabular-nums;
}
.featured-products__body {
  padding: var(--sp-4);
  display: grid;
  gap: var(--sp-1);
}
.featured-products__title {
  font-size: var(--fs-h3);
  font-weight: 600;
}
.featured-products__sub {
  font-size: var(--fs-small);
  color: var(--on-surface-2);
}
.featured-products__price {
  font-size: var(--fs-small);
  color: var(--on-surface-2);
}