/*
 * เทมเพลตส่วนหัว/ส่วนท้ายของหน้าร้าน (เมนูหลังบ้าน "เทมเพลต" · เจ้าของเลือกแบบ A 9 พ.ย.)
 * ใช้ markup เดิมของ layout.ts ทั้งหมด แค่เติม class บน <header class="hd"> และ <footer class="ft">
 *   ส่วนหัว:  hd--classic (ค่าเดิม ไม่ต้องมีกฎ) · hd--center · hd--search
 *   ส่วนท้าย: ft--cols (ค่าเดิม ไม่ต้องมีกฎ) · ft--center · ft--chat (แถวเดียว + แถบ .ft-cta ที่ layout.ts วาดเพิ่ม)
 * สีทั้งหมดมาจากตัวแปรของชุดสีร้าน (--brand --ink --line ...) — ไม่มีสีตายตัวในไฟล์นี้
 * โหลดหลัง site.css และไฟล์ธีม
 */

/* ───────── ส่วนหัว: โลโก้กลาง ─────────
   จอเล็ก: ☰ | โลโก้ (กลาง) | ปุ่ม · จอใหญ่ (≥1100): แถวบน ค้นหา | โลโก้ | ปุ่ม  แถวล่าง เมนูเต็มแถว */
.hd--center .hd-in { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "l logo r"; align-items: center; }
.hd--center .hd-burger { grid-area: l; justify-self: start; }
.hd--center .hd-logo { grid-area: logo; }
.hd--center .hd-act { grid-area: r; justify-self: end; margin-left: 0; }
.hd--center .hd-nav { display: none; }
.hd--center .hd-search { display: none; }
@media (min-width: 1100px) {
  .hd--center .hd-in {
    grid-template-areas: "l logo r" "nav nav nav";
    row-gap: 2px; padding-top: 12px;
  }
  .hd--center .hd-search { display: flex; grid-area: l; justify-self: start; width: 220px; }
  .hd--center .hd-nav { display: flex; grid-area: nav; justify-content: center; padding-bottom: 6px; }
  .hd--center .hd-logo img { width: 96px; }
}

/* ───────── ส่วนหัว: ค้นหาเด่น ─────────
   เมนูพับเก็บใน ☰ ทุกขนาดจอ · ช่องค้นหากว้างตรงกลางตั้งแต่ 720px (เล็กกว่านั้นค้นหาในเมนู ☰ ตามเดิม) */
.hd--search .hd-nav { display: none; }
.hd--search .hd-burger { display: inline-flex; }
@media (min-width: 720px) {
  .hd--search .hd-search { display: flex; flex: 1 1 auto; max-width: 560px; margin: 0 auto; padding: 9px 16px; }
  .hd--search .hd-act { margin-left: 0; }
}

/* ───────── ส่วนท้าย: ชวนทักแชต — ส่วนล่างเป็นแถวเดียว ─────────
   โลโก้เล็ก · ลิงก์ช่วยเหลือ + ติดต่อเรียงต่อกัน · โซเชียล — ซ่อนคอลัมน์สินค้า/หมวด และหัวคอลัมน์ */
.ft--chat .ft-in {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px;
  padding-top: 22px; padding-bottom: 18px;
}
.ft--chat .ft-brand { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ft--chat .ft-brand img { width: 64px; margin: 0; }
.ft--chat .ft-brand p { display: none; }
.ft--chat .ft-col:not(.ft-brand) { display: flex; flex-wrap: wrap; gap: 0 18px; }
/* ต้องอยู่หลังกฎ display:flex ข้างบน (ความเฉพาะเท่ากัน ตัวหลังชนะ) */
.ft--chat .ft-col-shop { display: none; }   /* คอลัมน์สินค้าอัตโนมัติ (layout.ts) — ใช้ class ไม่ใช้ลำดับ เพราะเมนูท้ายเว็บที่ร้านจัดเองอยู่ลำดับที่ 2 */
.ft--chat .ft-col h4 { display: none; }
.ft--chat .ft-col:not(.ft-brand) > a { padding: 4px 0; }
@media (min-width: 900px) {
  .ft--chat .ft-brand { order: 0; }
}

/* ───────── ส่วนท้าย: โลโก้กลาง (เข้าชุดกับส่วนหัวโลโก้กลาง · เจ้าของสั่ง 9 พ.ย. แทน "บรรทัดเดียว") ─────────
   เรียงกลางทั้งหมด: โลโก้ · คำโปรย · โซเชียล · ลิงก์ช่วยเหลือ/ติดต่อแถวเดียว · บรรทัดลิขสิทธิ์ — ซ่อนคอลัมน์สินค้า/หมวด และหัวคอลัมน์ */
.ft--center .ft-in { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; padding-top: 40px; padding-bottom: 28px; }
.ft--center .ft-brand { display: flex; flex-direction: column; align-items: center; }
.ft--center .ft-brand img { width: 88px; margin: 0 0 6px; }
.ft--center .ft-brand p { max-width: 460px; margin: 0 0 14px; }
.ft--center .ft-col:not(.ft-brand) { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 20px; }
.ft--center .ft-col-shop { display: none; }
.ft--center .ft-col h4 { display: none; }
.ft--center .ft-col:not(.ft-brand) > a { padding: 4px 0; }
.ft--center .ft-bottom .wrap { justify-content: center; text-align: center; }

/* ───────── แถบชวนทักแชต — แถบสีหลักก่อนส่วนท้าย ─────────
   markup (layout.ts วาดเมื่อเลือก ft--chat และร้านมีช่องทางแชต):
   <div class="ft-cta"><div class="wrap"><b>…</b><a class="ft-cta-btn" href="…">…</a></div></div> */
.ft-cta { background: var(--brand); color: var(--on-brand); }
.ft-cta .wrap { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; padding-top: 26px; padding-bottom: 26px; }
.ft-cta b { font-family: var(--font-head); font-size: clamp(18px, 2.4vw, 24px); line-height: 1.3; font-weight: 600; text-wrap: balance; }
.ft-cta-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 22px;
  border-radius: 10px; background: var(--on-brand); color: var(--brand); font-weight: 600; white-space: nowrap;
  transition: transform .15s;
}
.ft-cta-btn:hover { transform: translateY(-1px); }
.ft-cta-btn:focus-visible { outline: 3px solid var(--on-brand); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .ft-cta-btn { transition: none; } }

/* ───────── ปุ่มโซเชียลและช่องทางติดต่อ (เจ้าของเคาะ 9 พ.ย.) ─────────
   เจ้าของสั่ง 9 พ.ย.: "ปุ่มมีชื่อ" ต้องมีไอคอนหน้าข้อความด้วย → ทุกสไตล์ใช้ .ft-so (pills = data-so="pills")
   <footer class="ft …" data-so="icons|cards"><div class="ft-so"><a class="ft-so-i ft-so-<k>" …><svg/><span><b>ชื่อ</b><small>ไอดี</small></span></a>…
   ทุกกฎขึ้นต้น .ft .ft-so — ปุ่มอยู่ใน .ft-col ซึ่ง site.css มี .ft-col a / .ft-col span (0,1,1) ต้องเจาะจงกว่า */
.ft .ft-so { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ft .ft-so .ft-so-i { display: inline-flex; align-items: center; gap: 8px; padding: 0; min-height: 0; color: inherit; text-decoration: none; line-height: 1.25; text-align: left; }   /* ส่วนท้ายโลโก้กลางจัดกลางทั้งก้อน — ข้อความในปุ่มยังชิดซ้าย */
.ft .ft-so .ft-so-i svg { width: 18px; height: 18px; flex: none; }
.ft .ft-so .ft-so-i span { display: grid; padding: 0; min-height: 0; min-width: 0; color: inherit; font-size: inherit; }
.ft .ft-so .ft-so-i b, .ft .ft-so .ft-so-i small { color: inherit; padding: 0; min-height: 0; }
.ft .ft-so .ft-so-i:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
/* pills (ค่าเริ่มต้น) — ปุ่มแคปซูล ไอคอน + ชื่อ + ไอดี/เบอร์ ในบรรทัดเดียว */
.ft[data-so="pills"] .ft-so { flex-direction: column; align-items: flex-start; gap: 8px; }
.ft[data-so="pills"] .ft-so .ft-so-i { min-height: 40px; padding: 6px 14px 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink-2); font-size: 13.5px; max-width: 100%; }
.ft[data-so="pills"] .ft-so .ft-so-i svg { color: var(--brand-dk); }
.ft[data-so="pills"] .ft-so .ft-so-i span { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.ft[data-so="pills"] .ft-so .ft-so-i b { font-weight: 500; }
.ft[data-so="pills"] .ft-so .ft-so-i small { color: var(--ink-3); font-size: 12.5px; overflow-wrap: anywhere; }
.ft[data-so="pills"] .ft-so .ft-so-i:hover { border-color: var(--brand); color: var(--brand-dk); }
.ft--center[data-so="pills"] .ft-so, .ft--chat[data-so="pills"] .ft-so { flex-direction: row; flex-wrap: wrap; }
.ft--center[data-so="pills"] .ft-so { justify-content: center; }
/* icons — วงกลมไอคอนล้วน ชื่ออยู่ใน aria-label (span ซ่อนแบบโปรแกรมอ่านหน้าจอยังอ่านได้) */
.ft[data-so="icons"] .ft-so .ft-so-i { width: 40px; height: 40px; justify-content: center; border: 1.5px solid currentColor; border-radius: 50%; opacity: .85; color: var(--ink-2); }
.ft[data-so="icons"] .ft-so .ft-so-i:hover { opacity: 1; color: var(--brand-dk); }
.ft[data-so="icons"] .ft-so .ft-so-i span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* cards — การ์ดสีของแต่ละแอป + ไอดี/เบอร์ ตัวอักษรขาวเสมอ
   เจ้าของเคาะ 9 พ.ย.: ใช้สีแบรนด์ตรงตามจริง รับทราบว่าคอนทราสต์ขาวบน LINE 2.3 · Messenger/Shopee 3.7 · Facebook 4.2 ต่ำกว่า 4.5 — อย่าปรับเฉดเองโดยไม่ถาม */
.ft[data-so="cards"] .ft-so { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 420px; }
.ft[data-so="cards"] .ft-so .ft-so-i { padding: 9px 12px; border-radius: 10px; font-size: 13.5px; color: #fff; }
.ft[data-so="cards"] .ft-so .ft-so-i b { font-weight: 600; color: #fff; }
.ft[data-so="cards"] .ft-so .ft-so-i small { display: block; color: rgba(255, 255, 255, .88); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft[data-so="cards"] .ft-so .ft-so-i:hover { filter: brightness(1.08); color: #fff; }
.ft[data-so="cards"] .ft-so .ft-so-line { background: #06C755; }
.ft[data-so="cards"] .ft-so .ft-so-messenger { background: #0084FF; }
.ft[data-so="cards"] .ft-so .ft-so-facebook { background: #1877F2; }
.ft[data-so="cards"] .ft-so .ft-so-instagram { background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF); }
.ft[data-so="cards"] .ft-so .ft-so-tiktok { background: #111; }
.ft[data-so="cards"] .ft-so .ft-so-shopee { background: #EE4D2D; }
.ft[data-so="cards"] .ft-so .ft-so-phone, .ft[data-so="cards"] .ft-so .ft-so-email { background: #4A4F68; }
.ft--center .ft-so { justify-content: center; }
/* แบบ 4 คอลัมน์: ปุ่มอยู่ในคอลัมน์ติดต่อที่แคบ — การ์ดใบเดียวต่อแถว ไอดี/เบอร์ไม่ถูกตัด */
.ft[data-so="cards"]:not(.ft--center):not(.ft--chat) .ft-so { grid-template-columns: minmax(0, 1fr); max-width: 260px; }
@media (max-width: 560px) { .ft[data-so="cards"] .ft-so { grid-template-columns: minmax(0, 1fr); } }