/* Webneedee — ธีมหลักของหน้าร้าน
   สีทุกสีมาจาก :root ข้างล่างที่เดียว ชุดสีตามประเภทธุรกิจอยู่ใน css/themes/ */

/**
 * ── สัญญาของชุดสี ──
 *
 * ไฟล์ธีมใน public/css/themes/*.css เขียนทับเฉพาะโทเคนใน :root นี้
 * ส่วนที่เหลือของไฟล์ห้ามเขียนสีตรง ๆ ต้องเรียกผ่าน var() เสมอ
 * ไม่งั้นร้านที่เลือกธีมอื่นจะเจอสีของธีมกลางโผล่มาปนอยู่จุดเดียวโดยหาไม่เจอ
 *
 * ── สีมีสองหน้าที่ อย่าเอามาปนกัน ──
 *
 *   --brand  คือ "ร้านนี้คือใคร"  — แถบประกาศ หัวข้อย่อย ลิงก์ ป้ายหมวด
 *   --act    คือ "กดตรงนี้แล้วได้ของ" — ปุ่มซื้อ ปุ่มหลัก ป้ายลดราคา
 *
 * ที่ต้องแยกเพราะเว็บนี้มีหน้าที่ขายของ ถ้าสีเดียวกันทำทั้งสองอย่าง
 * ตาลูกค้าจะเลิกแยกออกว่าอะไรกดได้ แล้วปุ่มซื้อจะกลืนไปกับของประดับ
 * กฎง่าย ๆ: ในหนึ่งหน้าจอ ของที่เป็นสี --act ควรมีไม่กี่ชิ้น
 *
 * ── ข้อบังคับเรื่องความอ่านออก ──
 *
 * ทุกคู่สีข้างล่างนี้ต้องผ่าน WCAG AA (4.5:1) ทุกธีม ตรวจด้วย
 *     node scripts/check-theme-contrast.mjs
 * สคริปต์อ่านค่าจากไฟล์ CSS จริง เพิ่มธีมใหม่แล้วมันตรวจให้เองไม่ต้องแก้สคริปต์
 *
 * ธีมเก่าเคยมีกับดัก "ทองสองระดับ" (AGENTS.md ข้อ 6.2) คือสีเน้นสว่างเกิน
 * จนใส่ตัวอักษรขาวทับไม่ได้ ต้องจำว่าตัวไหนใช้เป็นพื้นตัวไหนใช้เป็นตัวอักษร
 * ชุดนี้ตัดปัญหาทิ้งด้วยการบังคับว่า --brand กับ --act ต้องเข้มพอใส่ตัวอักษรขาวได้เสมอ
 * ตัวอักษรบนสองสีนี้ใช้ --on-brand / --on-act (ชุดสำเร็จรูป = ขาวเสมอ · ชุดกำหนดเองเลือกขาว/เข้มเองตามความสว่าง 30 ต.ค.)
 * ตัวอักษรบนพื้น --ink (ป้ายนับถอยหลัง ลด %) ใช้ --bg — ธีมมืด --ink สว่าง ตัวอักษรขาวจะหาย
 * ส่วนสีเน้นที่เอาไว้ "เขียนบนพื้นสว่าง" แยกเป็น --brand-dk ไปเลย
 */
:root {
  /* ── พื้นและตัวอักษร ── */
  --white:   #FFFFFF;   /* ขาวจริง (ปุ่ม LINE จุด/สวิตช์บนรูป สีสถานะ) — ตัวอักษรบนสีร้าน/ปุ่มใช้ --on-brand / --on-act แทน */
  --on-brand: #FFFFFF;  /* ตัวอักษรบนพื้น --brand (แถบประกาศ ป้าย ชิปที่เลือก ปุ่มติดต่อร้าน) — ชุดกำหนดเองเลือกขาว/เข้มเองตามความสว่าง (colors.ts onColor) */
  --on-act:   #FFFFFF;  /* ตัวอักษรบนพื้น --act (ปุ่มซื้อ ป้าย SALE แถบนับถอยหลัง) */
  --on-mcard: #FFFFFF;  /* ตัวอักษรบนบัตรสมาชิก — ชุดกำหนดเองโทนมืดไล่สีร้าน จึงตามสีร้าน */
  --card:    #FFFFFF;   /* พื้นการ์ด ช่องกรอก แถบติดล่าง — ธีมมืดเป็นสีมืดอ่อนกว่าพื้น */
  --bg:      #F2F4F7;   /* พื้นหลังหน้าเว็บ */
  --bg-2:    #FFFFFF;   /* แถบสลับสี ฟุตเตอร์ พาเนล */

  --ink:     #1A1F29;   /* ตัวอักษรหลัก */
  --ink-2:   #4E5866;   /* ตัวอักษรรอง */
  --ink-3:   #656F7D;   /* ตัวอักษรจาง — ยังต้องผ่าน AA บนพื้นสว่าง */
  --line:    #E1E6EC;   /* เส้นขอบ */

  /* ── สีประจำร้าน (identity) ── */
  --brand:        #24558A;   /* พื้น คู่กับตัวอักษรขาว */
  --brand-dp:     #1B4570;   /* พื้นตอน hover */
  --brand-dk:     #1F4D7D;   /* ตัวอักษรบนพื้นสว่าง */
  --brand-tint:   #D9E4F0;   /* พื้นอ่อน เส้นขอบ */
  --brand-tint-2: #EEF4FA;   /* พื้นอ่อนมาก พื้น hover */

  /* ── สีปุ่มซื้อ (call to action) ── */
  --act:     #C2410C;   /* พื้นปุ่มหลัก คู่กับตัวอักษรขาว */
  --act-dp:  #9C3409;   /* พื้นตอน hover */

  --price:   #1A1F29;   /* สีตัวเลขราคา — บางธีมอยากให้เป็นสีแดง */

  --ok:      #226B4A;
  --err:     #A3322E;
  --warn:    #8A5A1A;   /* ตัวอักษรเตือน (สต๊อกใกล้หมด) บนพื้น/การ์ด */

  /* กล่องแจ้งเตือน — ธีมมืดต้องตั้งชุดนี้เอง ไม่งั้นได้กล่องครีมบนพื้นดำ */
  --ok-bg:   #E9F4EE;  --ok-ink:   #235E43;  --ok-line:   #C6E3D3;
  --err-bg:  #FBEAEA;  --err-ink:  #8E3232;  --err-line:  #F0CFCF;
  --warn-bg: #FDF6E3;  --warn-ink: #7A6116;  --warn-line: #EFE0B8;

  /* บัตรสมาชิก — ไล่จากสีตัวอักษร (เข้ม) บนธีมสว่าง · ธีมมืดเปลี่ยนเป็นไล่สีร้าน */
  --mcard:   linear-gradient(135deg, var(--ink) 0%, #2E3136 60%, #3A3D43 100%);

  /**
   * ── ตัวอักษร ── 3 บทบาท
   *   --sans         เนื้อความ (ทุกอย่างที่ไม่ได้ระบุ)
   *   --font-head    หัวข้อ — ชื่อร้าน ชื่อสินค้า h1/h2
   *   --font-accent  ตัวเน้น — ปุ่ม เมนู ราคา ป้ายเล็ก ๆ
   *
   * ค่าตั้งต้นคือฟอนต์เดียวทั้งเว็บ ใช้ "น้ำหนัก" แยกหัวข้อกับเนื้อความ
   * ร้านเปลี่ยนได้ที่หลังบ้าน (สีและฟอนต์) — src/lib/fonts.ts จะเขียนทับสามตัวนี้ด้วย <style>
   * ที่โหลดหลังไฟล์นี้และหลังไฟล์ธีม **ไฟล์ธีมห้ามยุ่งกับฟอนต์** ธีมมีหน้าที่เปลี่ยนสีอย่างเดียว
   *
   * จะเพิ่มที่ที่ใช้ --font-accent: ให้เป็น "ของชิ้นเล็กที่กดหรือกวาดตา" เท่านั้น
   * ถ้าเอาไปใส่ย่อหน้า ฟอนต์ลายมือที่ร้านเลือกเป็นตัวเน้นจะกลายเป็นเนื้อความทั้งหน้า
   */
  --sans: 'IBM Plex Sans Thai', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-head: var(--sans);
  --font-accent: var(--sans);
  --serif: var(--sans);   /* ชื่อเดิม เผื่อมีที่ไหนยังเรียกอยู่ */

  /**
   * ── ชื่อเดิมของโทเคนสี ──
   * ไฟล์ของเซสชันอื่นยังเรียก --gold-dk อยู่ (src/routes/shop.ts)
   * ลบทิ้งไม่ได้จนกว่าเจ้าของไฟล์จะเปลี่ยนเอง — ดู handoff/S3.md
   */
  --gold:    var(--brand);
  --gold-dp: var(--brand-dp);
  --gold-dk: var(--brand-dk);
  --tint:    var(--brand-tint);
  --tint-2:  var(--brand-tint-2);

  --r: 14px;
  --r-sm: 10px;
  --shadow: 0 2px 14px rgba(26, 31, 41, .07);
  --shadow-lg: 0 10px 40px rgba(26, 31, 41, .13);
  --wrap: 1240px;
  --hd-h: 66px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-variant-numeric: lining-nums;   /* กันเลขตัวเตี้ยแบบเก่าทุกที่ */
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* [hidden] ต้องชนะกฎ display อื่นเสมอ ไม่งั้นกล่องที่ซ่อนอยู่จะบังการคลิก */
[hidden] { display: none !important; }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 { margin: 0; font-weight: 500; line-height: 1.25; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--brand); color: var(--on-brand); padding: 10px 16px; border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; }

:focus-visible { outline: 2px solid var(--brand-dp); outline-offset: 2px; }

/* ─────────── ปุ่ม ─────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 11px 22px;
  border: 1px solid var(--act); border-radius: 999px;
  background: var(--act); color: var(--on-act);
  font-family: var(--font-accent); font-size: 14.5px; font-weight: 500; letter-spacing: .01em;
  transition: background .18s, border-color .18s, color .18s, transform .12s;
  text-align: center;
}
.btn:hover { background: var(--act-dp); border-color: var(--act-dp); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn.is-disabled { opacity: .5; pointer-events: none; }
.btn-ghost { background: transparent; color: var(--brand-dk); border-color: var(--brand); }
.btn-ghost:hover { background: var(--brand-tint-2); color: var(--brand-dk); }
.btn-dark { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn-dark:hover { background: var(--ink-2); border-color: var(--ink-2); }
.btn-line { background: #06C755; border-color: #06C755; color: var(--white); }
.btn-line:hover { background: #05a948; border-color: #05a948; }
.btn-lg { min-height: 52px; padding: 14px 30px; font-size: 15.5px; }
.btn-sm { min-height: 38px; padding: 8px 16px; font-size: 13.5px; }
.btn-block { display: flex; width: 100%; }

/* ─────────── ประกาศ + หัวเว็บ ─────────── */
.announce {
  background: var(--brand); color: var(--on-brand);
  font-size: 12.5px; letter-spacing: .02em;
  padding: 7px 0; text-align: center;
}
.announce span { display: block; }

.hd {
  position: sticky; top: 0; z-index: 60;
  /* บรรทัดแรกเป็นทางถอย ถ้าเบราว์เซอร์ไม่รู้จัก color-mix จะได้หัวเว็บทึบแทนที่จะได้หัวเว็บใส
     เดิมเขียนเป็น rgba() ตายตัวของสีพื้นชุดเก่า พอเปลี่ยนธีมแล้วหัวเว็บค้างเป็นสีเบจของธีมเดิม */
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.hd-in {
  display: flex; align-items: center; gap: 12px;
  min-height: var(--hd-h);
}
.hd-logo { flex: 0 0 auto; }
.hd-logo img { width: 76px; height: auto; }

.hd-nav { display: none; flex: 1; gap: 24px; justify-content: center; }
.hd-nav a {
  font-family: var(--font-accent); font-size: 14px; color: var(--ink-2); padding: 6px 0;
  border-bottom: 1.5px solid transparent; transition: color .15s, border-color .15s;
  white-space: nowrap;
}
.hd-nav a:hover { color: var(--brand-dk); border-color: var(--brand); }

/* เมนูย่อย "บัญชีของฉัน" บนจอใหญ่ — เปิดเมื่อชี้เมาส์หรือโฟกัสด้วยคีย์บอร์ด */
.hd-drop { position: relative; display: flex; }
.hd-drop > a { display: inline-flex; align-items: center; gap: 5px; }
.hd-drop-menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  min-width: 190px; padding: 8px; display: none;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 10px 28px rgba(28, 34, 38, .12); z-index: 70;
}
.hd-drop-menu a {
  display: block; padding: 9px 12px; border-radius: 8px;
  border-bottom: 0; white-space: nowrap;
}
.hd-drop-menu a:hover { background: var(--brand-tint-2); border-color: transparent; }
.hd-drop:hover .hd-drop-menu, .hd-drop:focus-within .hd-drop-menu { display: block; }
.hd-drop > a svg, .hd-drop-btn svg { opacity: .55; }
/* กลุ่มเมนูที่ตั้งชื่อเอง / "เพิ่มเติม" — ไม่มีปลายทางของตัวเอง จึงเป็นปุ่ม แต่หน้าตาเหมือนลิงก์ข้างเคียง */
.hd-drop-btn {
  background: none; border: 0; border-bottom: 1.5px solid transparent; padding: 6px 0; cursor: pointer;
  font-family: var(--font-accent); font-size: 14px; color: var(--ink-2); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px; transition: color .15s, border-color .15s;
}
.hd-drop:hover .hd-drop-btn, .hd-drop:focus-within .hd-drop-btn { color: var(--brand-dk); border-color: var(--brand); }
.hd-drop-hd {
  display: block; padding: 8px 12px 2px; font-family: var(--font-accent); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}
.hd-drop-hd:not(:first-child) { margin-top: 4px; border-top: 1px solid var(--line); padding-top: 10px; }
/* หมวดย่อยในเมนูมือถือ — เยื้องใต้หมวดแม่ */
.mobmenu-panel > a.mobmenu-sub { padding-left: 22px; min-height: 42px; font-size: 14px; color: var(--ink-2); }
.mobmenu-panel > a.mobmenu-sub::before { content: '└'; margin-right: 8px; color: var(--ink-3); }

/* ── ช่องค้นหาใน header (จอใหญ่) ── */
.hd-search {
  display: none; align-items: center; gap: 7px;
  flex: 0 1 200px; padding: 7px 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink-3); transition: border-color .15s;
}
.hd-search:focus-within { border-color: var(--brand); color: var(--brand-dk); }

/* ── กล่องแนะนำใต้ช่องค้นหา (search.js) — ใช้ทั้งหัวเว็บและเมนูมือถือ ── */
.hd-search, .mobmenu-search, .toolbar .searchbox { position: relative; }
.toolbar .searchbox .sg { left: 0; right: auto; }   /* ช่องค้นหาในแถบเครื่องมือหน้าสินค้า/หมวด — กล่องแนะนำชิดซ้ายใต้ช่อง */
.sg {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 85;
  width: min(400px, calc(100vw - 32px)); max-height: min(70vh, 520px); overflow-y: auto;
  padding: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 12px 32px rgba(28, 34, 38, .14); color: var(--ink); text-align: left;
}
.mobmenu-search .sg { left: 0; width: auto; }
.sg-hd {
  padding: 8px 10px 3px; font-family: var(--font-accent); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}
.sg-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border-radius: 10px;
  background: none; border: 0; font: inherit; color: var(--ink); text-align: left; cursor: pointer;
}
.sg-item[aria-selected="true"] { background: var(--brand-tint-2); }
.sg-img { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: var(--bg); }
.sg-bd { min-width: 0; flex: 1; }
.sg-nm { font-size: 13.5px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-meta { font-size: 12px; color: var(--ink-3); margin-top: 1px; }
.sg-price { margin-left: auto; font-family: var(--font-accent); font-size: 13px; white-space: nowrap; color: var(--ink); }
.sg-price.sg-sale { color: var(--brand-dk); }
.sg-price.sg-out { color: var(--ink-3); }
.sg-cat .sg-meta { margin-left: auto; }
.sg-recent::before { content: '↺'; color: var(--ink-3); }
.sg-all, .sg-all[aria-selected="true"] {
  display: block; margin-top: 4px; padding: 10px; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px;
  text-align: center; font-size: 13px; color: var(--brand-dk);
}
.sg-all[aria-selected="true"] { background: var(--brand-tint-2); }
.sg-empty { padding: 12px 10px 4px; text-align: center; font-size: 13px; color: var(--ink-3); }
.hd-search input {
  border: 0; background: none; outline: none; width: 100%;
  font-size: 13.5px; color: var(--ink); font-family: inherit;
}

/* ── ช่องค้นหาในเมนูมือถือ ── */
.mobmenu-search {
  display: flex; align-items: center; gap: 8px;
  margin: 2px 0 10px; padding: 10px 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink-3);
}
.mobmenu-search input {
  border: 0; background: none; outline: none; width: 100%;
  font-size: 15px; color: var(--ink); font-family: inherit;
}

.hd-act { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.hd-ic {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: transparent; border: 0; color: var(--ink);
  transition: background .15s;
}
.hd-ic:hover { background: var(--brand-tint-2); }
.hd-ic b {
  position: absolute; top: 4px; right: 2px;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: grid; place-items: center;
  background: var(--act); color: var(--on-act);
  font-size: 11px; font-weight: 600; border-radius: 999px;
}
.hd-ic .dot {
  position: absolute; top: 8px; right: 8px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--ok);
}

.hd-burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 4.5px;
  width: 42px; height: 42px; padding: 0 10px;
  background: none; border: 0; border-radius: 8px;
}
.hd-burger span { display: block; height: 1.6px; background: var(--ink); border-radius: 2px; transition: .2s; }

/* ─────────── เมนูมือถือ ─────────── */
.mobmenu { position: fixed; inset: 0; z-index: 90; }
.mobmenu-bd { position: absolute; inset: 0; background: rgba(28,34,38,.45); }
.mobmenu-panel {
  position: absolute; inset: 0 auto 0 0;
  width: min(320px, 86vw); background: var(--bg-2);
  padding: 16px 18px calc(24px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 2px;
  overflow-y: auto;
  animation: slideIn .22s ease;
}
@keyframes slideIn { from { transform: translateX(-100%); } to { transform: none; } }
.mobmenu-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.mobmenu-top span { font-family: var(--font-head); font-size: 22px; color: var(--brand-dk); letter-spacing: .06em; }
.mobmenu-top button { width: 40px; height: 40px; font-size: 26px; line-height: 1; background: none; border: 0; color: var(--ink-2); }
.mobmenu-panel > a {
  padding: 12px 4px; min-height: 46px; display: flex; align-items: center;
  border-bottom: 1px solid var(--line); font-size: 15px;
}
.mobmenu-ct { margin-top: 20px; display: grid; gap: 10px; }
.mobmenu-grp {
  font-family: var(--font-accent); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--brand-dk); padding: 16px 4px 4px;
}

/* ─────────── สไลด์แบนเนอร์ ─────────── */
.slider { position: relative; overflow: hidden; background: var(--brand-tint-2); }
.slides { display: flex; transition: transform .5s cubic-bezier(.4,0,.2,1); }
.slide { flex: 0 0 100%; position: relative; }
/* 4/3 ไม่ใช่ 4/5 — แบนเนอร์สูงเท่าหน้าจอบนมือถือแปลว่าคนต้องไถหนึ่งครั้งเต็ม ๆ
   ถึงจะเห็นสินค้าชิ้นแรก ซึ่งเป็นการไถที่เสียเปล่าสำหรับร้านที่ยังไม่มีคนรู้จัก */
.slide-img { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; }
.slide-img img { width: 100%; height: 100%; object-fit: cover; }
.slide-img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(28,34,38,.62) 0%, rgba(28,34,38,.15) 45%, transparent 75%);
}
.slide-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 0 20px 34px; color: #fff; text-align: center;
}
.slide-cap h2 {
  font-family: var(--font-head); font-size: clamp(28px, 8vw, 46px);
  letter-spacing: .04em; margin-bottom: 8px; text-shadow: 0 1px 12px rgba(0,0,0,.3);
}
.slide-cap p { margin: 0 auto 16px; max-width: 460px; font-size: 14px; opacity: .95; }
.slider-dots {
  position: absolute; left: 0; right: 0; bottom: 12px; z-index: 3;
  display: flex; justify-content: center; gap: 7px;
}
.slider-dots button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.5); transition: .2s;
}
.slider-dots button[aria-current="true"] { background: #fff; width: 22px; border-radius: 5px; }
.slider-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 40px; height: 40px; border-radius: 50%; display: none;
  place-items: center; background: var(--card); border: 0; color: var(--ink);
  font-size: 20px; line-height: 1;
}
.slider:hover .slider-nav { display: grid; }
.slider-nav.prev { left: 14px; }
.slider-nav.next { right: 14px; }

/* ─────────── ส่วนหัวข้อ ─────────── */
.sec { padding: 40px 0; }
.sec-alt { background: var(--bg-2); }

/* หัวข้อชิดซ้าย ไม่ใช่กลาง
   หัวข้อกลางเป็นภาษาของนิตยสาร คนอ่านทีละหน้าและมีเวลา
   หน้าร้านถูกกวาดสายตาจากมุมบนซ้ายลงล่าง หัวข้อกลางทำให้ต้องกวาดซ้ำทุกส่วน */
.sec-head { text-align: left; margin-bottom: 20px; }
.sec-head .eyebrow {
  display: block; font-family: var(--font-accent); font-size: 12px; letter-spacing: .04em;
  color: var(--brand-dk); margin-bottom: 4px;
}
.sec-head h2 {
  font-family: var(--font-head); font-size: clamp(21px, 4.4vw, 27px);
  font-weight: 600; letter-spacing: 0; color: var(--ink);
}
.sec-head p { margin: 6px 0 0; max-width: 560px; color: var(--ink-2); font-size: 13.5px; }

/* หัวข้อ + ลิงก์ ดูทั้งหมด ที่ขอบขวา
   ลิงก์ต้องอยู่ บน กริดสินค้า ไม่ใช่ใต้กริด เพราะคนที่ตัดสินใจแล้วว่าอยากดูเยอะกว่านี้
   จะตัดสินใจตอนเห็นหัวข้อ ไม่ใช่ตอนไถผ่านของครบแปดชิ้นแล้ว */
.sec-top {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 20px;
}
.sec-top .sec-head { margin-bottom: 0; flex: 1 1 260px; }
.sec-link {
  flex: 0 0 auto; font-size: 13.5px; color: var(--brand-dk);
  padding: 6px 0; border-bottom: 1px solid transparent; transition: border-color .15s;
  white-space: nowrap;
}
.sec-link:hover { border-color: var(--brand); }
.sec-more { text-align: center; margin-top: 24px; }

/* ─────────── แถบหมวดหมู่ ─────────── */
/* เลื่อนแนวนอนพร้อมจุดหยุด — ร้านส่วนใหญ่มีหมวดไม่ลงตัวกับจำนวนคอลัมน์
   (5 หมวดใน 2 คอลัมน์ = แถวล่างเหลือใบเดียว) เลื่อนแนวนอนจึงเรียบร้อยกว่า
   และใบที่โผล่มาครึ่งใบบอกผู้ใช้เองว่ายังมีต่อ ไม่ต้องมีลูกศร

   ไม่ใช้ margin ติดลบดึงให้ชนขอบจอ เพราะจอกว้าง 1240–1272px จะดันจนหน้าเลื่อนข้างได้ */
.cats {
  display: flex; gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.cats::-webkit-scrollbar { display: none; }

/* ปุ่มลูกศร — จำเป็น ไม่ใช่ของประดับ
   ซ่อนแถบเลื่อนไว้เพื่อความสวย แต่เมาส์ธรรมดาเลื่อนแนวนอนไม่ได้
   (ต้อง shift+ล้อ ซึ่งไม่มีใครรู้) นิ้วบนมือถือกับแทร็กแพดปัดได้อยู่แล้ว
   จึงซ่อนปุ่มบนอุปกรณ์สัมผัส ให้โผล่เฉพาะเครื่องที่ใช้เมาส์ */
.cats-wrap,
.gallery-wrap { position: relative; }
.cats-arrow,
.gal-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--card);
  color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer;
  box-shadow: var(--shadow); transition: background .15s, box-shadow .15s;
}
.cats-arrow:hover,
.gal-arrow:hover { background: var(--card); box-shadow: var(--shadow-lg); }
.cats-arrow:focus-visible,
.gal-arrow:focus-visible { outline: 2px solid var(--brand-dk); outline-offset: 2px; }
.cats-prev, .gal-arrow.gal-scroll-prev { left: -6px; }
.cats-next, .gal-arrow.gal-scroll-next { right: -6px; }

@media (pointer: coarse) {
  .cats-arrow, .gal-arrow { display: none; }
}
.cat-card {
  flex: 0 0 64%; scroll-snap-align: start;
  position: relative; display: block; overflow: hidden;
  border-radius: var(--r); background: var(--brand-tint);
  aspect-ratio: 3 / 4;
}
.cat-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.cat-card:hover img { transform: scale(1.05); }
.cat-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(28,34,38,.6), transparent 55%);
}
.cat-card b {
  position: absolute; left: 0; right: 0; bottom: 14px; z-index: 2;
  text-align: center; color: #fff; font-family: var(--font-head);
  font-size: 20px; font-weight: 500; letter-spacing: .05em;
}

/* ─────────── การ์ดสินค้า ─────────── */
.grid {
  display: grid; gap: 14px 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.card { position: relative; display: flex; flex-direction: column; min-width: 0; }
.card-img {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--r); background: var(--card);
  aspect-ratio: var(--card-ratio, 1 / 1);   /* ร้านเลือกที่หลังบ้าน › สีและฟอนต์ (layout.ts ฉีด --card-ratio) */
}
.card-img img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: opacity .45s, transform .6s;
}
.card-img img.alt { opacity: 0; }
.card:hover .card-media:not(.is-js) .card-img:has(img.alt) img.main { opacity: 0; }   /* จางเฉพาะการ์ดที่มีรูปที่สอง — การ์ดรูปเดียวเคยว่างเปล่าตอนชี้ */
.card:hover .card-media:not(.is-js) .card-img img.alt { opacity: 1; }
/* ลูกศรการ์ดหลายรูป แบบ A (.cn-a) — สเปก handoff/S3.md ค) · มอคอัพ S3 27 ต.ค. · card.ts วาดปุ่ม/จุดเมื่อมีรูป ≥2
   ซ่อนไว้จนกว่า app.js จะใส่ .is-js (ไม่มี JS = ไม่มีปุ่มกดแล้วไม่ไปไหน) · การ์ดที่มีลูกศรเลิกสลับรูปตอนชี้ (บรรทัดบน :not(.is-js)) */
.card-media { position: relative; }
.card-nav, .card-dots { display: none; }
.cn-a.is-js .card-nav { position: absolute; z-index: 3; top: 50%; width: 32px; height: 32px; margin-top: -16px; border: 0; padding: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--ink); background: color-mix(in srgb, var(--card) 88%, transparent); box-shadow: 0 2px 8px rgba(0, 0, 0, .18); transition: background .2s; }
.cn-a.is-js .card-nav.prev { left: 8px; }
.cn-a.is-js .card-nav.next { right: 8px; }
.cn-a.is-js .card-nav:hover { background: var(--card); }
.cn-a.is-js .card-nav:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.card-nav svg { width: 16px; height: 16px; }
.cn-a.is-js .card-dots { position: absolute; z-index: 3; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 5px; pointer-events: none; }
.card-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .55); box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); transition: width .2s; }
.card-dots i.on { background: var(--white); width: 16px; border-radius: 999px; }
.cn-a.show-alt .card-img img.main { opacity: 0; }   /* app.js สลับ main/alt เป็นตัวแสดง — จางเข้าหากันด้วย transition เดิมของ .card-img img */
.cn-a.show-alt .card-img img.alt { opacity: 1; }
/* มือถือ 2 คอลัมน์ การ์ดกว้าง ~165px — ปุ่ม 32px บังรูปเกินไป ย่อเหลือ 28 ชิดขอบ 6 (ยังกดได้: เป้าสัมผัสรวมเงา ~30px) */
@media (max-width: 640px) {
  .cn-a.is-js .card-nav { width: 28px; height: 28px; margin-top: -14px; background: color-mix(in srgb, var(--card) 80%, transparent); }
  .cn-a.is-js .card-nav.prev { left: 6px; }
  .cn-a.is-js .card-nav.next { right: 6px; }
  .card-nav svg { width: 14px; height: 14px; }
  .cn-a.is-js .card-dots { bottom: 8px; }
}
.card-tags { position: absolute; top: 9px; left: 9px; z-index: 2; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.tag {
  font-family: var(--font-accent); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  padding: 3.5px 9px; border-radius: 999px; color: var(--on-brand); background: var(--brand);
  line-height: 1.4;
}
.tag-sale { background: var(--act); color: var(--on-act); }
.tag-out { background: var(--ink-2); color: var(--bg); }
.card-fav {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--card); border: 0; color: var(--ink-2);
}
.card-body { padding: 11px 2px 0; display: flex; flex-direction: column; flex: 1; min-width: 0; }
.card-cat { font-size: 11px; color: var(--ink-3); letter-spacing: .06em; }
.card-name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 13.5px; line-height: 1.5; margin: 2px 0 6px; min-height: 40px; color: var(--ink);
}
.card-price { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; margin-top: auto; }
.card-price b { font-family: var(--font-accent); font-size: 17.5px; font-weight: 600; color: var(--price); }
.card-price s { font-size: 12.5px; color: var(--ink-3); }
.card-tier { font-size: 11.5px; color: var(--brand-dk); margin-top: 3px; }
/* ปุ่มนี้เป็น <button> (หยิบ/หมด) หรือ <a> (สินค้ามีตัวเลือก) — จัดกลางเองด้วย flex ไม่พึ่งค่าตั้งต้นของ <button> */
.card-add {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  text-decoration: none; line-height: 1.2; cursor: pointer;
  margin-top: 9px; width: 100%; min-height: 38px;
  border: 1px solid var(--brand-tint); border-radius: 999px; background: var(--brand-tint-2);
  font-size: 13px; font-weight: 500; color: var(--brand-dk); transition: .16s;
}
.card-add:hover { background: var(--act); border-color: var(--act); color: var(--on-act); }

/* ─────────── แถบสิทธิ์สมาชิก ─────────── */
/* ─────────── แผงขาวของส่วนบนหน้าแรก (โค้ดส่วนลด · ระดับสมาชิก) — แบบ B: การ์ดใหญ่บนพื้นหน้า ไม่มีแถบสี ─────────── */
.promoband, .tierband { background: var(--bg); padding-top: 24px; padding-bottom: 24px; }
.promoband + .tierband, .tierband + .promoband { padding-top: 0; }
.panel {
  background: var(--card); border: 1px solid var(--brand-tint); border-radius: 16px;
  padding: 26px 28px; display: flex; flex-direction: column; gap: 18px;
}
.panel .sec-top { margin-bottom: 0; }
.panel .sec-head p { margin-bottom: 0; }

/* ระดับสมาชิก — ตารางเทียบ: ช่องเรียงกัน คั่นด้วยเส้น ช่องของฉันพื้นอ่อน */
.tier-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--brand-tint); border-radius: 12px; overflow: hidden; }
.tier-col { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-right: 1px solid var(--brand-tint); border-bottom: 1px solid var(--brand-tint); }
.tier-col.on { background: var(--brand-tint-2); }
.tier-col .tname { font-family: var(--font-accent); font-size: 13px; font-weight: 600; letter-spacing: .04em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tier-col .tnow { font-size: 11px; font-weight: 500; color: var(--on-brand); background: var(--brand); border-radius: 999px; padding: 2px 8px; }
.tier-col .tdisc { font-size: 24px; font-weight: 600; color: var(--ink); line-height: 1.2; }
.tier-col.on .tdisc { color: var(--brand-dk); }
.tier-col .tmin { font-size: 12.5px; color: var(--ink-2); }
.tier-prog { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; background: var(--bg); border-radius: 12px; }
.tier-prog-row { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); }
.tier-prog-row b { color: var(--ink); font-weight: 600; }
.tier-bar { height: 8px; background: var(--brand-tint); border-radius: 999px; overflow: hidden; }
.tier-bar i { display: block; height: 100%; background: var(--brand); border-radius: 999px; transition: width .6s ease; }

/* การ์ดระดับแบบเดิม — ยังใช้ที่หน้า /member */
.tiers { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
.tier-card {
  background: var(--card); border-radius: var(--r); padding: 18px 14px;
  text-align: center; border: 1px solid var(--card); box-shadow: var(--shadow);
}
.tier-card .tname {
  font-family: var(--font-head); font-size: 21px; letter-spacing: .09em; margin-bottom: 4px;
}
.tier-card .tdisc { font-size: 25px; font-weight: 600; color: var(--ink); }
.tier-card .tmin { font-size: 12px; color: var(--ink-2); margin-top: 4px; }

/* ─────────── แกลเลอรี ─────────── */
/* แถวเลื่อนพร้อมจุดหยุด แบบเดียวกับแถบหมวดหมู่
   ร้านที่ลงรูป 20 ใบจะได้ไม่กลายเป็นตาราง 3 แถวกินหน้าจอ */
.gallery {
  display: flex; gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.gallery::-webkit-scrollbar { display: none; }
.gallery > * {
  flex: 0 0 64%; scroll-snap-align: start;
  position: relative; overflow: hidden; border-radius: 14px;
  aspect-ratio: 4/5; background: var(--brand-tint-2);
  padding: 0; border: 0; cursor: pointer; display: block;
}
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.gallery > *:hover img { transform: scale(1.06); }
.gallery > *:focus-visible { outline: 2px solid var(--brand-dk); outline-offset: 2px; }
/* ป้ายคำอธิบายรูป — โผล่ตอนชี้/โฟกัส · จอสัมผัสไม่มี hover จึงโชว์ตลอด (ป้ายเล็ก ไม่บังรูป) */
.gallery > [data-caption]::after {
  content: attr(data-caption);
  position: absolute; left: 8px; right: 8px; bottom: 8px; padding: 6px 10px;
  border-radius: 8px; background: rgba(0, 0, 0, .55); color: #fff;
  font-size: 12.5px; line-height: 1.4; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transform: translateY(4px); transition: opacity .18s, transform .18s; pointer-events: none;
}
.gallery > [data-caption]:hover::after, .gallery > [data-caption]:focus-visible::after { opacity: 1; transform: none; }
@media (hover: none) { .gallery > [data-caption]::after { opacity: 1; transform: none; } }

/* ─────────── แถบจุดขาย ─────────── */
/* แถบนี้อยู่ใต้แบนเนอร์ จึงต้องเตี้ยและอ่านจบในสายตาเดียว
   บนมือถือเรียงเป็นสองคอลัมน์ ไอคอนอยู่ซ้ายของข้อความ ไม่ใช่อยู่บน
   เพราะไอคอนบนข้อความกินความสูงเป็นสองเท่าโดยไม่ได้บอกอะไรเพิ่ม */
.uspband { background: var(--bg-2); border-bottom: 1px solid var(--line); padding: 14px 0; }
.usps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 14px; }
.usp { display: flex; align-items: flex-start; gap: 9px; min-width: 0; }
.usp-ic { flex: 0 0 auto; display: block; color: var(--brand); margin-top: 1px; line-height: 0; }
.usp-ic svg { display: block; }
.usp > div { min-width: 0; }
.usp b { display: block; font-size: 13px; font-weight: 600; line-height: 1.4; }
/* ระบุ > div เพราะไอคอนก็เป็น <span> (.usp-ic) — ถ้าเขียน .usp span เฉย ๆ จะทับสีไอคอนเป็นสีเทา */
.usp > div span { display: block; font-size: 11.5px; color: var(--ink-2); line-height: 1.45; }

/* ─────────── โค้ดส่วนลด ─────────── */
/* หน้าตาเป็นคูปองฉีก เพราะรูปทรงนี้แปลว่า "ส่วนลด" โดยไม่ต้องอ่าน
   คนกวาดสายตาผ่านจะจับได้ก่อนสมองอ่านตัวหนังสือเสร็จ */
/* position: relative จำเป็น เพราะปุ่ม "จัดการโค้ดส่วนลด" (.wne-manage ในโหมดแก้ตรงจุด)
   เป็น position:absolute ถ้าไม่มีพ่อแม่ที่ positioned มันจะไปเกาะขอบหน้าเว็บแทน */
/* โค้ดส่วนลด — ชิปแถวเดียว กดทั้งใบเพื่อคัดลอก (ลูกค้าไม่ต้องพิมพ์โค้ด) */
.promos { display: flex; flex-wrap: wrap; gap: 10px; }
.promo-chip {
  display: inline-flex; align-items: center; gap: 10px; min-height: 46px;
  padding: 5px 5px 5px 14px; border: 1px dashed var(--brand); border-radius: 10px;
  background: var(--brand-tint-2); color: var(--ink); font: inherit; cursor: pointer; text-align: left;
  transition: background .15s, border-color .15s;
}
.promo-chip:hover { background: var(--card); }
.promo-chip:focus-visible { outline: 2px solid var(--brand-dk); outline-offset: 2px; }
.promo-chip.copied { border-style: solid; border-color: var(--ok, var(--brand)); }
.promo-val { font-size: 14px; font-weight: 600; white-space: nowrap; }
.promo-min { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.promo-code {
  display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border-radius: 7px;
  background: var(--brand); color: var(--on-brand); font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px; letter-spacing: .08em; font-variant-numeric: lining-nums;
}
.promo-chip.copied .promo-code { background: var(--ok, var(--brand)); }

/* ─────────── หน้ารายการสินค้า ─────────── */
.page-head { padding: 26px 0 6px; text-align: center; }
.page-head h1 { font-family: var(--font-head); font-size: clamp(26px, 7vw, 40px); letter-spacing: .03em; }
.page-head p { color: var(--ink-2); font-size: 14px; margin: 8px auto 0; max-width: 620px; }

.crumb { font-size: 12.5px; color: var(--ink-3); padding: 12px 0 0; display: flex; gap: 6px; flex-wrap: wrap; }
.crumb a { color: var(--ink-2); }
.crumb a:hover { color: var(--brand-dk); }

.catnav { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 16px 0; }
.catnav::-webkit-scrollbar { display: none; }
.catnav-in { display: flex; gap: 8px; padding-bottom: 2px; width: max-content; min-width: 100%; }
.chip {
  flex: 0 0 auto; min-height: 38px; display: inline-flex; align-items: center;
  padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--card); font-size: 13.5px; color: var(--ink-2); white-space: nowrap;
}
.chip[aria-current="true"], .chip.on { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }

.toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 16px; flex-wrap: wrap;
}
.toolbar .count { font-size: 13px; color: var(--ink-2); }

/* ── ช่องค้นหาในหน้ารายการสินค้า ── */
.searchbox {
  display: flex; align-items: center; gap: 8px;
  flex: 1 1 220px; max-width: 340px; min-height: 40px; padding: 0 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink-3); transition: border-color .15s;
}
.searchbox:focus-within { border-color: var(--brand); color: var(--brand-dk); }
.searchbox input {
  border: 0; background: none; outline: none; width: 100%;
  font-size: 14px; color: var(--ink); font-family: inherit;
}
.searchbox-clear { font-size: 20px; line-height: 1; color: var(--ink-3); padding: 0 2px; }
.searchbox-clear:hover { color: var(--ink); }

/* ── แถบเลือกหน้า 1 2 3 … ── */
.pager {
  display: flex; gap: 6px; justify-content: center; align-items: center;
  flex-wrap: wrap; margin: 28px 0 8px;
  font-variant-numeric: tabular-nums;
}
.pg {
  min-width: 40px; height: 40px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--ink-2); font-size: 14px;
  transition: border-color .15s, color .15s, background .15s;
}
a.pg:not([aria-current="page"]):hover { border-color: var(--brand); color: var(--brand-dk); }
.pg[aria-current="page"] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); font-weight: 500; }
.pg-gap { border: 0; background: none; min-width: 22px; }
.pg-arrow { font-size: 18px; }
.toolbar select {
  min-height: 40px; padding: 8px 32px 8px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); font-size: 13.5px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235A656C' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
}

.empty { text-align: center; padding: 60px 20px; color: var(--ink-2); }

/* ─────────── หน้าหมวดหมู่ทั้งหมด (/categories) ─────────── */
.catall { display: grid; gap: 14px; grid-template-columns: 1fr; margin: 22px 0 40px; }
.catall-card {
  display: grid; grid-template-columns: 112px 1fr; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
}
.catall-media {
  position: relative; overflow: hidden;
  display: grid; place-items: center; background: var(--brand-tint); min-height: 112px;
}
/* วางทับเต็มกล่อง — height:100% ในกล่อง aspect-ratio ไม่ยอมย่อ รูปจะล้นลงมาทับข้อความ */
.catall-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.catall-initial { font-family: var(--font-head); font-size: 34px; color: var(--brand-dk); opacity: .75; }
.catall-body { padding: 14px 16px 14px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.catall-body h2 { margin: 0; font-family: var(--font-head); font-size: 20px; font-weight: 500; letter-spacing: .02em; line-height: 1.25; }
.catall-body h2 a { color: var(--ink); }
.catall-body h2 a:hover { color: var(--brand-dk); }
.catall-count { margin: 0; font-size: 12.5px; color: var(--ink-3); }
.catall-kids { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.catall-kids a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; font-size: 12.5px;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--ink-2);
}
.catall-kids a:hover { border-color: var(--brand); color: var(--brand-dk); }
.catall-kids small { font-size: 11px; color: var(--ink-3); }
.catall-all { margin-top: auto; padding-top: 6px; font-size: 13px; color: var(--brand-dk); align-self: flex-start; }
.catall-all:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 720px) {
  .catall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catall-card { grid-template-columns: 1fr; }
  .catall-media { aspect-ratio: 16 / 9; min-height: 0; }
}
@media (min-width: 1024px) { .catall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.empty h3 { font-family: var(--font-head); font-size: 24px; margin-bottom: 8px; }

/* ─────────── หน้าสินค้า ─────────── */
.pd { display: grid; gap: 22px; padding: 16px 0 40px; }
.pd-gallery { display: grid; gap: 10px; min-width: 0; }
.pd-main {
  position: relative; border-radius: var(--r); overflow: hidden;
  background: var(--card); aspect-ratio: var(--card-ratio, 1 / 1);   /* ตามสัดส่วนการ์ดที่ร้านเลือก (สีและฟอนต์ › การ์ดสินค้า) */
}
.pd-main img { width: 100%; height: 100%; object-fit: cover; }
.pd-thumbs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.pd-thumbs::-webkit-scrollbar { display: none; }
.pd-thumbs button {
  flex: 0 0 auto; width: 62px; height: 62px; padding: 0; overflow: hidden;
  border: 1.5px solid transparent; border-radius: var(--r-sm); background: var(--card);
}
.pd-thumbs button[aria-current="true"] { border-color: var(--brand); }
.pd-thumbs img { width: 100%; height: 100%; object-fit: cover; }

.pd-info { min-width: 0; }
.pd-brand { font-family: var(--font-accent); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--brand); }
.pd-title { font-family: var(--font-head); font-size: clamp(23px, 6vw, 33px); letter-spacing: .02em; margin: 6px 0 4px; }
.pd-sub { color: var(--ink-2); font-size: 14px; margin: 0 0 14px; }
.pd-sku {
  font-size: 12.5px; color: var(--ink-3); margin: 0 0 12px;
  font-variant-numeric: tabular-nums;
}
.pd-sku b { color: var(--ink-2); font-weight: 600; letter-spacing: .03em; }
.pd-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.pd-price b { font-family: var(--font-accent); font-size: 27px; font-weight: 600; }
.pd-price s { color: var(--ink-3); font-size: 15px; }
.pd-price .off {
  font-size: 12px; background: var(--ink); color: var(--bg); padding: 3px 9px; border-radius: 999px;
}
.pd-tier {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--brand-tint-2); border: 1px solid var(--brand-tint); border-radius: var(--r-sm);
  padding: 9px 12px; font-size: 13px; color: var(--brand-dk); margin: 10px 0 16px;
}
.pd-tier a { color: var(--brand-dk); text-decoration: underline; }
.pd-stock { font-size: 13px; color: var(--ink-2); margin-bottom: 14px; }
.pd-stock.low { color: var(--warn); }
.pd-stock.out { color: var(--err); }

.optgrp { margin-bottom: 14px; }
.optgrp > b { display: block; font-size: 13.5px; margin-bottom: 7px; }
.opt-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.opt-chips button {
  min-height: 40px; padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); font-size: 13.5px;
}
.opt-chips button[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-tint-2); color: var(--brand-dk); }

.pd-buy { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.qty {
  display: inline-flex; align-items: center; border: 1px solid var(--line);
  border-radius: 999px; background: var(--card); overflow: hidden; flex: 0 0 auto;
}
.qty button { width: 42px; min-height: 46px; border: 0; background: none; font-size: 19px; line-height: 1; color: var(--ink-2); }
.qty input {
  width: 44px; min-height: 46px; text-align: center; border: 0; background: none;
  font-size: 15px; -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pd-buy .btn { flex: 1 1 160px; }

.pd-meta { margin-top: 22px; border-top: 1px solid var(--line); }
.acc { border-bottom: 1px solid var(--line); }
/* summary คือหัวข้อที่กดเปิด-ปิด — ห้ามซ่อน ไม่งั้นหัวข้อที่ปิดอยู่จะหายไปทั้งอัน */
.acc > summary {
  list-style: none; cursor: pointer;
  min-height: 52px; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 2px; font-size: 14.5px; font-weight: 500;
}
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary::after { content: '+'; font-size: 19px; color: var(--ink-3); flex: 0 0 auto; }
.acc[open] > summary::after { content: '−'; }
.acc > summary:hover { color: var(--brand-dk); }
.acc-body { padding: 0 2px 16px; font-size: 14px; color: var(--ink-2); line-height: 1.75; }
.acc-body p { margin: 0 0 10px; }
.spec { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.spec td { padding: 7px 0; border-bottom: 1px dashed var(--line); vertical-align: top; }
.spec td:first-child { color: var(--ink-3); width: 40%; padding-right: 12px; }

/* แถบซื้อติดล่างจอมือถือ */
.buybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  background: var(--card); border-top: 1px solid var(--line);
  padding: 9px 14px calc(9px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 10px;
  transform: translateY(110%); transition: transform .25s;
  backdrop-filter: blur(8px);
}
.buybar.on { transform: none; }
.buybar .bb-price { flex: 0 0 auto; }
.buybar .bb-price small { display: block; font-size: 11px; color: var(--ink-3); line-height: 1.2; }
.buybar .bb-price b { font-family: var(--font-accent); font-size: 17px; }
.buybar .btn { flex: 1; }

/* ─────────── ท้ายเว็บ ─────────── */
.ft { background: var(--bg-2); border-top: 1px solid var(--line); margin-top: 40px; }
.ft-in {
  display: grid; grid-template-columns: 1fr; gap: 26px;
  padding-top: 36px; padding-bottom: 30px;
}
.ft-col { min-width: 0; }
.ft-col h4 {
  font-family: var(--font-accent); font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand-dk); margin-bottom: 12px;
}
.ft-col a, .ft-col span {
  display: block; font-size: 13.5px; color: var(--ink-2);
  padding: 6px 0; min-height: 30px; line-height: 1.4;
}
.ft-col a:hover { color: var(--brand-dk); }
.ft-brand img { width: 116px; margin-bottom: 4px; }
.ft-brand p { margin: 0 0 12px; font-size: 13.5px; color: var(--ink-2); line-height: 1.7; max-width: 320px; }
.ft-social { display: flex; gap: 8px; flex-wrap: wrap; }
.ft-social a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 13px 6px 10px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--card);
  font-size: 12.5px; color: var(--ink-2);
}
.ft-social svg { flex: 0 0 auto; color: var(--brand-dk); }
.ft-social a:hover { border-color: var(--brand); color: var(--brand-dk); }
.ft-bottom { border-top: 1px solid var(--line); }
.ft-bottom .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px;
  font-size: 12.5px; color: var(--ink-3);
}
.ft-bottom a { min-height: 30px; display: inline-flex; align-items: center; }
.ft-bottom a:hover { color: var(--brand-dk); }

/* ─────────── ตะกร้า (ลิ้นชัก) ─────────── */
.drawer { position: fixed; inset: 0; z-index: 100; }
.drawer-bd { position: absolute; inset: 0; background: rgba(28,34,38,.45); }
.drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(400px, 92vw); background: var(--bg-2);
  display: flex; flex-direction: column;
  animation: slideL .24s ease;
}
@keyframes slideL { from { transform: translateX(100%); } to { transform: none; } }
.drawer-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--line); flex: 0 0 auto;
}
.drawer-top b { font-family: var(--font-head); font-size: 21px; letter-spacing: .05em; }
.drawer-top button { width: 40px; height: 40px; background: none; border: 0; font-size: 26px; line-height: 1; color: var(--ink-2); }
.drawer-body { flex: 1; overflow-y: auto; padding: 14px 18px; }
.drawer-foot { flex: 0 0 auto; padding: 14px 18px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--card); }

.citem { display: flex; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.citem-img { flex: 0 0 68px; width: 68px; height: 68px; border-radius: var(--r-sm); overflow: hidden; background: var(--card); }
.citem-img img { width: 100%; height: 100%; object-fit: cover; }
.citem-bd { flex: 1; min-width: 0; }
.citem-name { font-size: 13px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.citem-var { font-size: 11.5px; color: var(--ink-3); }
.citem-bot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.qty-mini { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; background: var(--card); }
.qty-mini button { width: 32px; height: 32px; border: 0; background: none; font-size: 16px; line-height: 1; color: var(--ink-2); }
.qty-mini span { min-width: 24px; text-align: center; font-size: 13.5px; }
.citem-price { font-size: 14px; font-weight: 600; white-space: nowrap; }
.del-btn { background: none; border: 0; color: var(--ink-3); font-size: 11.5px; text-decoration: underline; padding: 4px 0; }

.sumline { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; padding: 4px 0; }
.sumline.total { font-size: 16.5px; font-weight: 600; border-top: 1px solid var(--line); margin-top: 8px; padding-top: 10px; }
.sumline .g { color: var(--ink-2); }
.sumline .free { color: var(--ok); }
.sumline .disc { color: var(--brand-dk); }

/* ─────────── ฟอร์ม ─────────── */
.field { margin-bottom: 14px; min-width: 0; }
.field label { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 6px; }
.field label .req { color: var(--err); }
.inp {
  width: 100%; min-height: 46px; padding: 11px 14px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--card); font-size: 15px;
}
.inp:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
textarea.inp { min-height: 86px; resize: vertical; line-height: 1.6; }
select.inp {
  appearance: none; padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235A656C' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
}
.field-err { font-size: 12px; color: var(--err); margin-top: 5px; }

/* ── ค้นหาที่อยู่ไทย ── */
.addr-find { position: relative; }
.addr-sug {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm);
  box-shadow: var(--shadow-lg); max-height: 300px; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.addr-sug button {
  display: block; width: 100%; text-align: left; border: 0; background: none;
  padding: 10px 14px; border-bottom: 1px solid var(--line); min-height: 44px;
}
.addr-sug button:last-child { border-bottom: 0; }
.addr-sug button:hover, .addr-sug button[aria-selected="true"] { background: var(--brand-tint-2); }
.addr-sug button b { display: block; font-size: 14px; font-weight: 500; }
.addr-sug button span { display: block; font-size: 12px; color: var(--ink-3); margin-top: 1px; }
.addr-none { padding: 14px; font-size: 13px; color: var(--ink-3); text-align: center; }
.row2 { display: grid; grid-template-columns: 1fr; gap: 0 12px; }

.panel {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); padding: 18px 16px; margin-bottom: 16px;
}
.panel > h3 {
  font-size: 16px; margin-bottom: 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px;
}
.panel > h3 i {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  background: var(--brand); color: var(--on-brand); display: grid; place-items: center;
  font-style: normal; font-size: 12.5px; font-weight: 600;
}

.opt-row {
  display: flex; align-items: flex-start; gap: 11px; padding: 13px 12px;
  border: 1px solid var(--line); border-radius: var(--r-sm); margin-bottom: 9px;
  background: var(--card); cursor: pointer; min-width: 0;
}
.opt-row:has(input:checked) { border-color: var(--brand); background: var(--brand-tint-2); }
.opt-row input { margin-top: 3px; flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--brand); }
.opt-row .or-bd { flex: 1; min-width: 0; }
.opt-row b { display: block; font-size: 14px; font-weight: 500; }
.opt-row span { display: block; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.opt-row .or-fee { font-size: 13px; font-weight: 600; white-space: nowrap; flex: 0 0 auto; }

.alert { border-radius: var(--r-sm); padding: 11px 14px; font-size: 13.5px; margin-bottom: 14px; line-height: 1.6; }
.alert-ok { background: var(--ok-bg); color: var(--ok-ink); border: 1px solid var(--ok-line); }
.alert-err { background: var(--err-bg); color: var(--err-ink); border: 1px solid var(--err-line); }
.alert-info { background: var(--brand-tint-2); color: var(--brand-dk); border: 1px solid var(--brand-tint); }
.alert-warn { background: var(--warn-bg); color: var(--warn-ink); border: 1px solid var(--warn-line); }

/* ─────────── หน้าชำระเงิน ─────────── */
.pay-ch { display: grid; gap: 10px; }
.pay-card { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--card); }
.pay-card > .pc-hd {
  display: flex; align-items: center; gap: 10px; padding: 13px 15px;
  background: var(--brand-tint-2); border-bottom: 1px solid var(--line);
}
.pay-card .pc-hd img { width: 34px; height: 34px; object-fit: contain; border-radius: 7px; flex: 0 0 auto; }
.pay-card .pc-hd b { font-size: 14.5px; }
.pay-card .pc-bd { padding: 15px; }
.acct { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.acct-no { font-size: 20px; font-weight: 600; letter-spacing: .05em; word-break: break-all; }
.acct-nm { font-size: 13px; color: var(--ink-2); }
.copy-btn {
  min-height: 38px; padding: 8px 15px; border-radius: 999px;
  border: 1px solid var(--brand); background: var(--card); color: var(--brand-dk); font-size: 13px;
}
.qr-box { text-align: center; }
.qr-box svg, .qr-box img { margin: 0 auto; border-radius: var(--r-sm); max-width: 100%; height: auto; }
.qr-amt { font-size: 15px; margin-top: 10px; }
.qr-amt b { font-size: 21px; }

.drop {
  border: 2px dashed var(--brand-tint); border-radius: var(--r); background: var(--bg-2);
  padding: 26px 16px; text-align: center; cursor: pointer; transition: .18s;
}
.drop:hover, .drop.on { border-color: var(--brand); background: var(--brand-tint-2); }
.drop svg { color: var(--brand); margin: 0 auto 8px; }
.drop b { display: block; font-size: 14.5px; margin-bottom: 4px; }
.drop span { font-size: 12.5px; color: var(--ink-2); }
.drop-prev { margin-top: 12px; }
.drop-prev img { max-height: 240px; width: auto; margin: 0 auto; border-radius: var(--r-sm); }

/* ─────────── ขั้นตอน ─────────── */
.steps { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 18px 0 22px; flex-wrap: wrap; }
.step { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); }
.step i {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--line); color: var(--ink-2); font-style: normal; font-size: 12px; font-weight: 600; flex: 0 0 auto;
}
.step.on i { background: var(--brand); color: var(--on-brand); }
.step.on { color: var(--ink); }
.step.done i { background: var(--ok); color: var(--white); }
.step-sep { width: 16px; height: 1px; background: var(--line); }

/* ─────────── ตารางสรุปออเดอร์ ─────────── */
.oitems { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--card); }
.oitem { display: flex; gap: 11px; padding: 12px 14px; border-bottom: 1px solid var(--line); min-width: 0; }
.oitem:last-child { border-bottom: 0; }
.oitem img { width: 56px; height: 56px; border-radius: var(--r-sm); object-fit: cover; flex: 0 0 auto; background: var(--bg); }
.oitem .oi-bd { flex: 1; min-width: 0; }
.oitem .oi-nm { font-size: 13.5px; line-height: 1.45; }
.oitem .oi-q { font-size: 12px; color: var(--ink-3); }
.oitem .oi-pr { font-size: 14px; font-weight: 600; white-space: nowrap; flex: 0 0 auto; }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: 999px; font-family: var(--font-accent); font-size: 12.5px; font-weight: 500;
}

.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 13.5px; }
/* ปุ่ม "แก้ไข" มุมขวาของหัวกล่อง + ฟอร์มแก้ที่อยู่ในหน้าคำสั่งซื้อ */
.panel-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.panel-hd > h3 { margin: 0; padding: 0; border: 0; flex: 1; }
.panel-hd .panel-edit { font-size: 13px; }
.panel-note { font-size: 12.5px; color: var(--ink-3); margin-top: 12px; line-height: 1.6; }
.panel-note a { color: var(--brand-dk); text-decoration: underline; }
.addr-act { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; word-break: break-word; }

/* ─────────── ตารางที่เลื่อนได้ ─────────── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -16px; padding: 0 16px; }
.table-wrap table { min-width: 560px; width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table-wrap th, .table-wrap td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table-wrap th { background: var(--brand-tint-2); font-weight: 500; font-size: 12.5px; color: var(--brand-dk); }

/* ─────────── toast ─────────── */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(14px);
  z-index: 300; background: var(--ink); color: var(--bg);
  padding: 12px 20px; border-radius: 999px; font-size: 13.5px;
  box-shadow: var(--shadow-lg); opacity: 0; transition: .22s;
  max-width: calc(100vw - 32px); text-align: center;
}
.toast.on { opacity: 1; transform: translateX(-50%); }

/* ─────────── หน้าข้อมูล ─────────── */
.prose { font-size: 14.5px; line-height: 1.85; color: var(--ink-2); max-width: 780px; margin: 0 auto; }
.prose h2 { font-family: var(--font-head); font-size: 25px; color: var(--ink); margin: 26px 0 10px; }
.prose h3 { font-size: 16px; color: var(--ink); margin: 20px 0 8px; }
.prose p { margin: 0 0 14px; }
.prose ul, .prose ol { margin: 0 0 14px; padding-left: 22px; }
.prose li { margin-bottom: 6px; }

/* ─────────── สมาชิก (หน้า /member หลังเข้าระบบ) ───────────
   บัตรสมาชิก + เมนูซ้าย (จอใหญ่) / ชิปเลื่อน (มือถือ) · หน้าย่อยขวา · แถวออเดอร์มีเส้นสถานะ 4 จุด */
.mem { padding-bottom: 44px; }
.mem-grid { display: grid; gap: 18px; padding-top: 22px; }
.mcard {
  position: relative; overflow: hidden; border-radius: 18px; padding: 20px 20px 18px; color: var(--on-mcard);
  background: var(--mcard); box-shadow: var(--shadow);
}
/* แสงสีตามระดับ (--tier) มุมขวาบน — เปลี่ยนตามระดับโดยไม่ต้องมีรูป */
.mcard::before {
  content: ''; position: absolute; top: -40%; right: -25%; width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, var(--tier) 0%, transparent 68%); opacity: .38; pointer-events: none;
}
.mcard > * { position: relative; }
.mcard-top {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-family: var(--font-accent); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; opacity: .85;
}
.mcard-tier { font-family: var(--font-head); font-size: 26px; letter-spacing: .08em; color: var(--tier); text-transform: none; }
.mcard-name { margin-top: 18px; font-size: 17px; font-weight: 600; }
.mcard-disc { font-size: 13px; opacity: .9; margin-top: 2px; }
.mcard-bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,.22); margin: 16px 0 8px; overflow: hidden; }
.mcard-bar i { display: block; height: 100%; background: var(--tier); border-radius: 999px; }
.mcard-next { font-size: 12.5px; opacity: .92; line-height: 1.5; }
.mcard-next b { color: var(--on-mcard); }
.mcard-reset { font-size: 11.5px; opacity: .65; margin-top: 6px; }

.mem-nav { display: flex; gap: 6px; margin-top: 14px; overflow-x: auto; scrollbar-width: none; }
.mem-nav::-webkit-scrollbar { display: none; }
.mem-nav a {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 9px 14px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--card); font-size: 13.5px; color: var(--ink-2); white-space: nowrap;
}
.mem-nav a b { font-size: 11.5px; font-weight: 600; background: var(--bg); border-radius: 999px; padding: 1px 7px; color: var(--ink-2); }
.mem-nav a[aria-current="page"] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.mem-nav a[aria-current="page"] b { background: rgba(255,255,255,.25); color: var(--on-brand); }

.mem-todo { display: grid; gap: 8px; margin-bottom: 18px; }
.mem-todo a {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; font-size: 13.5px; color: var(--ink);
  background: var(--brand-tint-2); border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
}
.mem-todo a > span { flex: 1; min-width: 0; line-height: 1.5; }
.mem-todo a b { white-space: nowrap; }
.mem-todo a::after { content: '→'; margin-left: auto; color: var(--brand-dk); }
.mem-todo a.is-wait { background: var(--bg); border-color: var(--line); }

.mem-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-bottom: 14px; }
.mem-chips::-webkit-scrollbar { display: none; }
.mem-chips button {
  flex: 0 0 auto; min-height: 36px; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); font-size: 13px; color: var(--ink-2);
}
.mem-chips button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }

.orows { display: grid; gap: 12px; }
.orow { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 15px; min-width: 0; }
.orow-hd { display: flex; gap: 12px; align-items: flex-start; }
.orow-thumbs { display: flex; flex: 0 0 auto; }
.orow-thumbs img, .orow-thumbs span {
  width: 46px; height: 46px; border-radius: 10px; object-fit: cover;
  border: 2px solid var(--card); background: var(--bg); box-shadow: 0 0 0 1px var(--line);
}
.orow-thumbs > * + * { margin-left: -14px; }
.orow-thumbs span { display: grid; place-items: center; font-size: 12px; color: var(--ink-3); }
.orow-main { flex: 1; min-width: 0; }
.orow-line1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.orow-code { font-size: 14.5px; font-weight: 600; letter-spacing: .01em; }
.orow-line2 { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
.orow-nm { font-size: 13.5px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orow-nm span { color: var(--ink-3); }
.orow-total { font-family: var(--font-accent); font-size: 15px; font-weight: 600; white-space: nowrap; }
/* เส้นสถานะ 4 จุด — จุดที่ผ่านแล้วเป็นสีแบรนด์ จุดปัจจุบันมีวงแสง */
.otl { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); margin: 14px 0 0; padding: 0; }
.otl li { position: relative; text-align: center; font-size: 11px; color: var(--ink-3); padding-top: 18px; }
.otl li::before { content: ''; position: absolute; top: 6px; left: 0; right: 0; height: 2px; background: var(--line); }
.otl li:first-child::before { left: 50%; }
.otl li:last-child::before { right: 50%; }
.otl li i { position: absolute; top: 2px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--line); z-index: 1; }
.otl li.on { color: var(--ink-2); }
.otl li.on::before, .otl li.on i { background: var(--brand); }
.otl li.now::before { right: 50%; }
.otl li.now { color: var(--brand-dk); font-weight: 500; }
.otl li.now i { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent); }
.orow-cancel { margin: 12px 0 0; font-size: 12.5px; color: var(--err-ink); }
.orow-track {
  margin-top: 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  font-size: 12.5px; color: var(--ink-2); padding: 9px 12px; border-radius: 10px; background: var(--brand-tint-2);
}
.orow-track b { color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.orow-track a { margin-left: auto; color: var(--brand-dk); text-decoration: underline; white-space: nowrap; }
.orow-alert { display: block; margin-top: 12px; padding: 9px 12px; border-radius: 10px; background: var(--warn-bg); color: var(--warn-ink); font-size: 13px; }
.orow-act { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

.mem-pane-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.mem-pane-hd h2 { font-family: var(--font-head); font-size: 22px; letter-spacing: .02em; }
.mem-pane-hd p { font-size: 13px; color: var(--ink-3); }
.mem-hint { font-size: 12.5px; color: var(--ink-3); margin-top: 8px; line-height: 1.6; }
.mem-hint a { color: var(--brand-dk); text-decoration: underline; }
.mem-danger { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line); }

@media (min-width: 900px) {
  .mem-grid { grid-template-columns: 300px minmax(0, 1fr); gap: 28px; align-items: start; }
  .mem-side { position: sticky; top: 84px; }
  .mem-nav { flex-direction: column; gap: 4px; }
  .mem-nav a { border-radius: 12px; border-color: transparent; background: none; padding: 10px 12px; }
  .mem-nav a:not([aria-current="page"]):hover { background: var(--card); }
  .mem-nav a b { margin-left: auto; }
}

.ocard-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 500; border-radius: 999px; padding: 4px 11px; white-space: nowrap;
}
.ocard-status i { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }

.osum { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }

/* ───────── เข้าสู่ระบบด้วยเบอร์โทร + OTP ───────── */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* ── ภาพวิธีสั่งซื้อในหน้าวิธีสั่งซื้อ & ชำระเงิน ── */
.howto-img { display: block; max-width: 720px; margin: 4px auto 28px; }
.howto-img img {
  width: 100%; height: auto; display: block; border-radius: 14px;
  border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(28, 34, 38, .08);
}

/* ── แท็บเข้าสู่ระบบ / สมัครสมาชิก ── */
/* ─────────── หน้าสมาชิกก่อนเข้าระบบ — 2 คอลัมน์ (ประโยชน์ + บันไดระดับ | ฟอร์ม OTP) ─────────── */
.auth { padding-bottom: 44px; }
.auth-grid { display: grid; gap: 18px; padding-top: 22px; }
.auth-side {
  position: relative; overflow: hidden; border-radius: 18px; padding: 26px 22px;
  background: linear-gradient(160deg, var(--brand-tint-2), var(--brand-tint)); color: var(--ink);
}
/* รูปแบนเนอร์ของร้านจาง ๆ ด้านหลัง (ถ้ามี) — ไม่มีก็แค่ไล่สี */
.auth-side::before {
  content: ''; position: absolute; inset: 0; background: var(--auth-bg, none) center/cover no-repeat;
  opacity: .12; pointer-events: none;
}
.auth-side > * { position: relative; }
.auth-side .eyebrow { display: block; margin-bottom: 8px; }
.auth-side h1 { font-family: var(--font-head); font-size: clamp(24px, 5vw, 32px); letter-spacing: .02em; line-height: 1.25; text-wrap: balance; }
.auth-lead { margin: 10px 0 0; font-size: 14px; color: var(--ink-2); line-height: 1.65; max-width: 46ch; }
.auth-benefits { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.auth-benefits li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.55; }
.auth-benefits li::before {
  content: '✓'; flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand); color: var(--on-brand); font-size: 12px; font-weight: 700; margin-top: 1px;
}
.auth-h2 { font-family: var(--font-head); font-size: 20px; letter-spacing: .02em; margin: 24px 0 10px; }
/* บันไดระดับ — จุดสีตามระดับ เชื่อมด้วยเส้น */
.ladder { list-style: none; margin: 0; padding: 0; display: grid; }
.ladder li { position: relative; display: grid; grid-template-columns: 22px 1fr auto; gap: 0 10px; align-items: center; padding: 8px 0; }
.ladder li::before { content: ''; position: absolute; left: 10px; top: 0; bottom: 0; width: 2px; background: color-mix(in srgb, var(--ink) 14%, transparent); }
.ladder li:first-child::before { top: 50%; }
.ladder li:last-child::before { bottom: 50%; }
.ladder li i { position: relative; width: 22px; height: 22px; border-radius: 50%; background: var(--card); border: 5px solid var(--tier); box-sizing: border-box; }
.ladder li div { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ladder li b { font-family: var(--font-head); font-size: 17px; letter-spacing: .06em; color: var(--tier); }
.ladder li span { font-size: 13.5px; font-weight: 600; }
.ladder li small { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.auth-note { margin: 12px 0 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.65; }
.auth-card { box-shadow: var(--shadow); }
.auth-cart { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; background: var(--brand-tint-2); font-size: 13px; color: var(--ink-2); }
@media (min-width: 900px) {
  .auth-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 32px; align-items: start; }
  .auth-main { position: sticky; top: 84px; }
}
/* มือถือ: ฟอร์มมาก่อน ประโยชน์ตามหลัง */
@media (max-width: 899px) {
  .auth-side { order: 2; }
  .auth-main { order: 1; }
}

.otp-panel { padding-top: 0; }
.otp-h { font-size: 18px; margin: 0 0 6px; }
.otp-sub { font-size: 13.5px; color: var(--ink-2); margin: 0 0 18px; line-height: 1.65; }
.inp-phone {
  font-size: 19px; letter-spacing: 1.5px; font-variant-numeric: tabular-nums;
  text-align: center; padding-top: 13px; padding-bottom: 13px;
}
.inp-otp {
  font-size: 30px; font-weight: 600; letter-spacing: 12px; text-indent: 12px;
  text-align: center; font-variant-numeric: tabular-nums;
  padding: 14px 10px; color: var(--ink);
}
.inp-otp::placeholder { color: var(--brand-tint); letter-spacing: 12px; }
.otp-foot {
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: 14px; flex-wrap: wrap;
}
.lnk {
  background: none; border: 0; padding: 6px 2px; cursor: pointer;
  font: inherit; font-size: 13.5px; color: var(--brand-dk);
  text-decoration: underline; text-underline-offset: 3px;
  min-height: 32px;
}
.lnk:disabled { color: var(--ink-3); text-decoration: none; cursor: default; }
.lnk:hover:not(:disabled) { color: var(--ink); }

.legacy-login { margin-top: 18px; }
.legacy-login > summary {
  cursor: pointer; list-style: none; font-size: 13px; color: var(--ink-3);
  text-align: center; padding: 10px; border-radius: var(--r-sm);
  min-height: 40px; display: flex; align-items: center; justify-content: center;
}
.legacy-login > summary::-webkit-details-marker { display: none; }
.legacy-login > summary:hover { color: var(--brand-dk); background: var(--brand-tint-2); }

@media (max-width: 400px) {
  .inp-otp { font-size: 26px; letter-spacing: 8px; text-indent: 8px; }
  .inp-otp::placeholder { letter-spacing: 8px; }
}

@media (max-width: 400px) {
}

.tier-card.on { border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 30%, transparent); }
.tier-card .tnow {
  margin-top: 6px; font-size: 11px; color: var(--on-brand); background: var(--brand);
  border-radius: 999px; padding: 2px 8px; display: inline-block;
}

/* ─────────── responsive ─────────── */
@media (min-width: 560px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 16px; }
  /* 4 ใบเต็ม ใบที่ 5 โผล่มาให้เห็นว่าเลื่อนได้ */
  .cat-card { flex-basis: calc((100% - 36px) / 4); }
  /* แบรนด์กินเต็มแถวบน แล้วคอลัมน์ลิงก์ 3 อันเรียงข้างกันด้านล่าง */
  .ft-in { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 24px; }
  .ft-brand { grid-column: 1 / -1; }
  .tiers { grid-template-columns: repeat(4, 1fr); }
  .tier-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tier-col { border-bottom: 0; }
  .tier-col:last-child { border-right: 0; }
  .usps { grid-template-columns: repeat(4, 1fr); }
  .gallery > * { flex-basis: calc((100% - 42px) / 4); }
  .row2 { grid-template-columns: 1fr 1fr; }
  .slide-img { aspect-ratio: 16 / 9; }
  .card-name { font-size: 14px; }
}

@media (min-width: 900px) {
  /* จอกว้างแล้วปรับตามจำนวนหมวดของแต่ละร้าน ไม่ตรึงไว้ที่ 5 ใบ
     หมวดน้อย = ยืดเต็มแถว ไม่ต้องเลื่อน · หมวดเยอะ = ตีบถึง 200px แล้วเลื่อนเอา
     min-width จำเป็น เพราะ flex-basis อย่างเดียวยังถูกบีบให้เล็กกว่านั้นได้
     max-width = ขนาดตอน 4 ใบต่อแถว — หมวด 1–3 ใบไม่ยืดจนการ์ด 3:4 สูงล้นจอ (ร้านหมวดเดียวเคยสูง ~1600px) */
  .cat-card { flex: 1 1 200px; min-width: 200px; max-width: calc((100% - 36px) / 4); }
  body { font-size: 15.5px; }
  .wrap { padding: 0 24px; }
  .hd-logo img { width: 87px; }
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 20px; }
  .sec { padding: 60px 0; }
  .slide-img { aspect-ratio: 2 / 1; max-height: 430px; }   /* 2/1 ตรงกับสัดส่วนรูปแบนเนอร์ที่ S4 วาดไว้ ไม่ต้องครอปทิ้ง */
  .slide-cap { padding-bottom: 48px; }
  .pd { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; padding: 22px 0 60px; }
  .pd-gallery { position: sticky; top: calc(var(--hd-h) + 16px); align-self: start; }
  .buybar { display: none; }
  .checkout-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; align-items: start; }
  .checkout-side { position: sticky; top: calc(var(--hd-h) + 16px); }
  .table-wrap { margin: 0; padding: 0; }
  /* จอกว้างปรับตามจำนวนรูปของแต่ละร้าน รูปน้อย = ยืดเต็มแถว รูปเยอะ = เลื่อนเอา */
  .gallery > * { flex: 1 1 130px; min-width: 130px; }
  /* จอกว้าง: แบรนด์อยู่ซ้าย คอลัมน์ลิงก์ 3 อันอยู่ขวา เรียงข้างกันแถวเดียว */
  .ft-in { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-top: 48px; padding-bottom: 40px; }
  .ft-brand { grid-column: auto; }
}

@media (min-width: 1100px) {
  .grid { gap: 32px 22px; }

  /* เมนูเต็มกับช่องค้นหาโผล่ที่ 1100px ไม่ใช่ 900px
     เพราะร้านที่มีหมวดเยอะ (8 หมวด = ลิงก์ 9 อัน) จะบีบช่องค้นหาเหลือ 52px
     ซึ่งพิมพ์แล้วมองไม่เห็นว่าพิมพ์อะไร — ใช้เมนูสามขีดไปก่อนดีกว่า
     แลกกับร้านที่มีหมวดน้อย ต้องกดสามขีดจนถึง 1100px */
  .hd-nav { display: flex; }
  .hd-search { display: flex; }
  .hd-burger { display: none; }
}

/* จอเล็กมาก (320px) */
@media (max-width: 360px) {
  .wrap { padding: 0 12px; }
  .grid { gap: 12px 9px; }
  .card-name { font-size: 12.5px; min-height: 37px; }
  .card-price b { font-size: 15px; }
  .btn { padding: 11px 16px; font-size: 14px; }
  .hd-logo img { width: 66px; }
  .pd-price b { font-size: 24px; }
  .acct-no { font-size: 17px; }
}

@media print {
  .hd, .ft, .announce, .buybar, .drawer, .mobmenu, .skip, .toast, .no-print { display: none !important; }
  body { background: #fff; }
}

/* ─────────── เพิ่มเติมจากธีมหลัก ─────────── */
/* .drop ใช้กับ <label> จึงต้องบังคับเป็นบล็อก ไม่งั้น text-align/padding ไม่ทำงาน */
.drop { display: block; }
.drop svg { display: block; }

/* แบ่งหน้า */
.pager { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 28px 0 8px; }
.pg-item {
  min-width: 40px; min-height: 40px; padding: 8px 14px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--ink-2); font-size: 13.5px;
}
.pg-item:hover { border-color: var(--brand); color: var(--brand-dk); }
.pg-item.on { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }

/* ─────────── หน้าเนื้อหาที่สร้างจากหลังบ้าน ─────────── */
.cms-h {
  font-family: var(--font-head); font-size: clamp(20px, 4.5vw, 26px);
  letter-spacing: .02em; margin: 26px 0 10px;
}
.cms-h:first-child { margin-top: 0; }
/* หัวข้อในเนื้อหา (# ถึง ######) — h2 = ขนาดเดิมของ .cms-h · จัดชิดทั้งย่อหน้าจาก [center]/[right] */
.cms-h1 { font-size: clamp(24px, 5.5vw, 32px); }
.cms-h3 { font-size: clamp(18px, 4vw, 21px); }
.cms-h4 { font-size: 17.5px; }
.cms-h5 { font-size: 16px; }
.cms-h6 { font-size: 14.5px; color: var(--ink-2); letter-spacing: .04em; }
.cms-al-center { text-align: center; }
.cms-al-right { text-align: right; }
/* เครื่องมือชุดที่สอง: เส้นคั่น · รายการเลข · กล่องเน้น · ตาราง · ปุ่มในข้อความ · การ์ดสินค้า · แผนที่ · ขีดฆ่า */
.cms-hr { border: 0; border-top: 1px solid var(--line); margin: 22px 0; clear: both; }
.cms-ol { margin: 0 0 14px; padding-left: 24px; font-size: 14.5px; line-height: 1.85; color: var(--ink-2); clear: both; }
.cms-ol li { margin-bottom: 6px; }
.cms-note {
  margin: 16px 0; padding: 14px 18px; clear: both;
  border-left: 4px solid var(--brand); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--brand-tint-2); color: var(--ink); font-size: 14.5px; line-height: 1.8;
}
.cms-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 16px 0; clear: both; }
.cms-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.6; }
.cms-table th, .cms-table td { padding: 9px 12px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.cms-table th { background: var(--brand-tint-2); color: var(--brand-dk); font-weight: 600; white-space: nowrap; }
.cms-table tbody tr:nth-child(even) td { background: var(--bg); }
.cms-btn { margin: 4px 6px 4px 0; vertical-align: middle; }
.cms-product { margin: 18px 0; clear: both; }
.cms-product .card { max-width: 320px; margin: 0 auto; }
.cms-map { margin: 18px 0; aspect-ratio: 4 / 3; max-height: 420px; background: var(--bg-2); border-radius: var(--r); overflow: hidden; clear: both; }
.cms-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.cms-p s, .cms-note s, .cms-table s { color: var(--ink-3); }
.cms-p { font-size: 14.5px; line-height: 1.85; color: var(--ink-2); margin: 0 0 12px; }
.cms-p strong { color: var(--ink); font-weight: 600; }
.cms-p a { color: var(--brand-dk); text-decoration: underline; text-underline-offset: 2px; }
.cms-p a:hover { color: var(--ink); }
/* รูปที่แทรกกลางข้อความ (![…](…)) — เต็มความกว้างของย่อหน้า */
.cms-img { display: block; max-width: 100%; height: auto; margin: 12px auto; border-radius: var(--r); background: var(--brand-tint-2); }   /* ย่อขนาดแล้วอยู่กลาง */
/* ชิดซ้าย/ขวา = ข้อความไหลรอบรูป ต่อเนื่องถึงย่อหน้าถัดไปได้ · หัวข้อ รูปเต็ม วิดีโอ รายการ ตัดการไหล */
.cms-img-left { float: left; margin: 6px 20px 10px 0; }
.cms-img-right { float: right; margin: 6px 0 10px 20px; }
.cms-h, .cms-fig, .cms-video, .cms-ul, .cms-btns { clear: both; }
/* วิดีโอฝัง (@video) — YouTube 16:9 · TikTok/Reel แนวตั้ง จำกัดกว้างไม่ให้เต็มจอ */
.cms-video { margin: 18px 0; aspect-ratio: 16 / 9; background: var(--bg-2); border-radius: var(--r); overflow: hidden; }
.cms-video-portrait { aspect-ratio: 9 / 16; max-width: 380px; margin-inline: auto; }
.cms-video iframe { width: 100%; height: 100%; border: 0; display: block; }

.cms-fig { margin: 18px 0; }
.cms-fig img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r); background: var(--brand-tint-2);
}
.cms-fig figcaption { margin-top: 8px; font-size: 12.5px; color: var(--ink-3); text-align: center; }

.cms-btns { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0; }

.cms-faq {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 12px 16px; margin-bottom: 8px;
}
.cms-faq > summary {
  cursor: pointer; font-size: 14.5px; font-weight: 500; color: var(--ink);
  list-style: none; display: flex; justify-content: space-between; gap: 12px; align-items: center;
}
.cms-faq > summary::-webkit-details-marker { display: none; }
.cms-faq > summary::after { content: '+'; color: var(--brand-dk); font-size: 19px; line-height: 1; }
.cms-faq[open] > summary::after { content: '−'; }
.cms-faq > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.cms-faq .cms-p { margin: 10px 0 2px; }

/* ═══════════ การเคลื่อนไหว ═══════════
   ทั้งหมดในหมวดนี้เป็น CSS ล้วน ไม่มีไลบรารี ไม่มีสคริปต์
   เบราว์เซอร์ที่ยังไม่รองรับจะข้ามไปเอง เว็บยังทำงานครบเหมือนเดิม */

/* ─────────── เปลี่ยนหน้าแบบต่อเนื่อง ───────────
   เว็บนี้ส่ง HTML จากเซิร์ฟเวอร์ทีละหน้า (ไม่ใช่ SPA) เบราว์เซอร์จึงทำ
   ภาพเชื่อมระหว่างสองหน้าให้เองได้ — เมื่อก่อนต้องใช้เฟรมเวิร์กถึงจะทำได้ */
@view-transition { navigation: auto; }

/* หัวเว็บกับแถบประกาศต้องอยู่นิ่ง ไม่ใช่จางหายไปพร้อมเนื้อหาข้างล่าง
   ตั้งชื่อให้ = เบราว์เซอร์ถือว่าเป็นชิ้นเดียวกันที่ข้ามหน้ามา */
.announce { view-transition-name: wn-announce; }
.hd { view-transition-name: wn-header; }

/* รูปสินค้าวิ่งจากการ์ดไปเป็นรูปใหญ่ในหน้าสินค้า
   ฝั่งหน้าสินค้าตั้งชื่อตายตัวได้เลย เพราะมีรูปใหญ่รูปเดียว
   ส่วนฝั่งการ์ดต้องตั้งด้วย app.js เพราะหนึ่งหน้ามีชื่อซ้ำกันไม่ได้
   (การ์ด 24 ใบใช้ชื่อเดียวกัน = ภาพเชื่อมถูกยกเลิกทั้งหน้า) */
#pdMainImg { view-transition-name: wn-product; }

::view-transition-old(root) { animation-duration: .16s; }
::view-transition-new(root) { animation-duration: .24s; }
::view-transition-group(wn-product) {
  animation-duration: .42s;
  animation-timing-function: cubic-bezier(.2, .8, .25, 1);
}
/* กันรูปยืดผิดสัดส่วนระหว่างทาง เผื่อวันหนึ่งสองที่ใช้ aspect-ratio ไม่เท่ากัน */
::view-transition-old(wn-product),
::view-transition-new(wn-product) {
  width: 100%; height: 100%; object-fit: cover;
}

/* ─────────── โผล่ขึ้นมาตอนเลื่อนถึง ───────────
   ผูกกับตำแหน่งการเลื่อนโดยตรง ไม่ได้ผูกกับเวลา จึงไม่ต้องใช้
   IntersectionObserver และเลื่อนย้อนกลับขึ้นไปก็ย้อนตาม

   @supports สำคัญมาก — ถ้าเบราว์เซอร์ไม่รู้จัก animation-timeline
   แล้วเรายังใส่ opacity:0 ไว้ ของทั้งหน้าจะหายไปเลย */
@keyframes wn-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .card,
    .tier-card,
    .usp,
    .sec-head {
      animation: wn-rise linear both;
      animation-timeline: view();
      animation-range: entry 12% entry 80%;
    }

    /* ── การ์ดสินค้าโผล่ไล่กันทีละใบจากซ้ายไปขวา ──
       `animation-delay` ใช้กับไทม์ไลน์แบบเลื่อนไม่ได้ (สเปกสั่งให้ข้าม)
       ต้องเลื่อน "จุดเริ่ม" ของช่วงแทน ใบขวาสุดเริ่มช้ากว่าใบซ้ายสุด

       จุดจบเท่ากันทุกใบ ใบขวาจึงวิ่งเร็วกว่าเล็กน้อยและจบพร้อมกัน
       ตั้งใจให้เป็นแบบนี้ — ถ้าเลื่อนจุดจบตามไปด้วย ใบขวาสุดจะค้างครึ่ง ๆ
       อยู่กลางจอนานเกินไปเวลาเลื่อนเร็ว

       ช่วง media ห้ามคาบเกี่ยวกัน ไม่งั้น nth-child ของ 2 คอลัมน์
       จะไปทับของ 3 คอลัมน์ เพราะน้ำหนักตัวเลือกเท่ากัน */
    @media (max-width: 559px) {
      .grid > .card:nth-child(2n + 2) { animation-range-start: entry 22%; }
    }
    @media (min-width: 560px) and (max-width: 899px) {
      .grid > .card:nth-child(3n + 2) { animation-range-start: entry 20%; }
      .grid > .card:nth-child(3n + 3) { animation-range-start: entry 28%; }
    }
    @media (min-width: 900px) {
      .grid > .card:nth-child(4n + 2) { animation-range-start: entry 18%; }
      .grid > .card:nth-child(4n + 3) { animation-range-start: entry 24%; }
      .grid > .card:nth-child(4n + 4) { animation-range-start: entry 30%; }
    }
  }
}

/* ─────────── ภาพแกลเลอรีเต็มจอ ───────────
   เปิด-ปิดด้วย document.startViewTransition() ในหน้าเดียวกัน
   รูปย่อกับรูปใหญ่ใช้ไฟล์เดียวกัน (ฐานข้อมูลเก็บ URL เต็ม ส่วน -sm ใช้กับการ์ดสินค้า)
   จึงไม่มีการโหลดเพิ่มตอนกด ภาพเชื่อมเลยเริ่มได้ทันที */
/* flex ไม่ใช่ grid — ใน grid แถวเป็น auto ความสูงจึงยังไม่นิ่งตอนคิดเปอร์เซ็นต์
   \`max-height: 100%\` ของรูปเลยถูกมองเป็น none แล้วรูปแนวตั้งจะทะลุจอลงไป
   ส่วน flex ความสูงของกล่องนิ่งแล้ว (inset: 0) เปอร์เซ็นต์จึงอ้างอิงได้จริง */
.gal-lb {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  /* ทึบเกือบสนิท — ที่ .94 ตัวอักษรของส่วนจุดขายที่อยู่ข้างหลังยังอ่านออก
     แล้วไปแย่งสายตากับเลขหน้า "2 / 7" ที่ขอบล่าง */
  background: rgba(14, 14, 16, .97);
  padding: 60px 16px 52px;
}
.gal-lb img {
  max-width: 100%; max-height: 100%; min-height: 0;
  width: auto; height: auto; object-fit: contain;
  border-radius: var(--r-sm);
  view-transition-name: wn-gal;
}
.gal-lb button {
  position: absolute; z-index: 2;
  display: grid; place-items: center;
  border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, .14); color: #fff;
  transition: background .15s;
}
.gal-lb button:hover { background: rgba(255, 255, 255, .28); }
.gal-lb button:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.gal-x { top: 14px; right: 14px; width: 40px; height: 40px; font-size: 19px; }
.gal-nav { top: 50%; transform: translateY(-50%); width: 44px; height: 44px; font-size: 26px; line-height: 1; }
.gal-prev { left: 12px; }
.gal-next { right: 12px; }
/* คำอธิบายรูปในกล่องเต็มจอ — อยู่เหนือตัวเลขนับ */
.gal-cap {
  position: absolute; bottom: 42px; left: 16px; right: 16px; margin: 0;
  text-align: center; color: rgba(255, 255, 255, .92);
  font-size: 14.5px; line-height: 1.5; text-shadow: 0 1px 6px rgba(0, 0, 0, .7);
  max-width: 640px; margin-inline: auto;
}
.gal-count {
  position: absolute; bottom: 18px; left: 0; right: 0;
  text-align: center; color: rgba(255, 255, 255, .72);
  font-size: 13px; font-variant-numeric: tabular-nums;
}

/* รูปย่อกับรูปใหญ่ครอบภาพคนละแบบ (cover ↔ contain) ถ้าปล่อยตามค่าเริ่มต้น
   ภาพจะยืดผิดสัดส่วนระหว่างทาง — บังคับให้ทั้งสองฝั่งครอปเหมือนกัน
   แล้วให้ภาพเก่าจางออกเร็วกว่าที่กล่องจะขยายจบ ตาจึงไม่ทันเห็นรอยต่อ */
::view-transition-group(wn-gal) {
  animation-duration: .4s;
  animation-timing-function: cubic-bezier(.2, .8, .25, 1);
}
::view-transition-old(wn-gal),
::view-transition-new(wn-gal) {
  width: 100%; height: 100%; object-fit: cover;
}
::view-transition-old(wn-gal) { animation-duration: .16s; }

/* ─────────── เคารพการตั้งค่าของผู้ใช้ ───────────
   คนที่ตั้งเครื่องว่า "ลดการเคลื่อนไหว" มักเป็นคนที่เวียนหัวหรือคลื่นไส้
   เวลาเห็นของขยับ — ไม่ใช่แค่เรื่องความชอบ ต้องปิดให้หมดจริง ๆ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: .01ms !important;
  }
}

/* ─────────── เครื่องหมายเน้นในเนื้อหาหน้าเว็บ ───────────
   สีมาจากชุดปิดตายใน src/lib/blocks.ts เท่านั้น ไม่รับค่าสีจากลูกค้า
   ผูกกับตัวแปรสีของธีม ร้านไหนเปลี่ยนธีมก็เปลี่ยนตาม และผ่านเกณฑ์ contrast บนพื้นสว่าง */
.cms-c-gold { color: var(--brand-dk); }
.cms-c-red { color: var(--err); }
.cms-c-green { color: var(--ok); }

.cms-ul {
  margin: 0 0 14px; padding-left: 22px;
  color: var(--ink-2); font-size: 14.5px; line-height: 1.85;
}
.cms-ul li { margin-bottom: 6px; }
.cms-ul li::marker { color: var(--brand-dk); }

/* ─────────── โปรโมชัน (src/lib/promos.ts · routes/promo-view.ts · app.js) ─────────── */
.cd { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cd.is-over { opacity: .6; }
.tag-cd { background: var(--ink); color: var(--bg); text-transform: none; letter-spacing: 0; }
.tag-lock { background: var(--brand); color: var(--on-brand); }
.card-lock { color: var(--brand-dk); }

.cdbar { background: var(--act); color: var(--on-act); font-size: 13.5px; padding: 9px 0; text-align: center; }
.cdbar a { color: inherit; text-decoration: none; }
.cdbar .wrap { display: flex; gap: 6px 14px; justify-content: center; align-items: center; flex-wrap: wrap; }
.cdbar-text { font-weight: 500; }
.cdbar-cd { font-family: var(--font-accent); font-size: 15px; font-weight: 600; background: rgba(0, 0, 0, .18); padding: 2px 10px; border-radius: 999px; }
.cdbar[hidden] { display: none; }

.pd-flash {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -2px 0 12px;
  font-size: 13.5px; color: var(--act);
}
.pd-flash .cd { background: var(--ink); color: var(--bg); padding: 2px 10px; border-radius: 999px; font-size: 12.5px; }
.pd-lock {
  background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn-ink);
  border-radius: var(--r-sm); padding: 9px 12px; font-size: 13px; margin: 6px 0 14px;
}
.pd-lock a { color: inherit; text-decoration: underline; }
.pd-promo-hd { font-weight: 600; font-size: 14px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.pd-promo-hd small { font-weight: 400; color: var(--ink-3); }
.pd-qty { margin: 4px 0 16px; }
.qtyt { border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: var(--card); }
.qtyt-row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 12px; font-size: 13px; border-top: 1px solid var(--line); }
.qtyt-row:first-child { border-top: 0; }
.qtyt-row b { color: var(--act); }

.bundle-box { margin: 16px 0 4px; padding: 14px; border: 1px dashed var(--brand); border-radius: var(--r); background: var(--brand-tint-2); }
.bundle-items { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.bundle-item { display: grid; gap: 3px; width: 92px; text-decoration: none; color: var(--ink); text-align: center; font-size: 11.5px; line-height: 1.35; }
.bundle-item img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--r-sm); margin: 0 auto; background: var(--card); }
.bundle-item .bi-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bundle-item .bi-price { color: var(--ink-3); }
.bundle-plus { font-size: 20px; color: var(--ink-3); }
.bundle-sum { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; font-size: 13.5px; }
.bundle-sum s { color: var(--ink-3); }
.bundle-sum b { font-size: 17px; color: var(--act); font-family: var(--font-accent); }
.bundle-sum em { font-style: normal; color: var(--ink-3); font-size: 12.5px; display: block; }

.flashband { background: var(--brand-tint-2); }
.flash-cd .cd-big { display: inline-block; background: var(--ink); color: var(--bg); padding: 4px 14px; border-radius: 999px; font-family: var(--font-accent); font-weight: 600; }

.freebar { margin: 8px 0 4px; font-size: 12.5px; color: var(--ink-2); }
.freebar.is-ok { color: var(--ok); font-weight: 500; }
.freebar-txt b { color: var(--act); }
.freebar-track { height: 6px; border-radius: 999px; background: var(--line); margin-top: 6px; overflow: hidden; }
.freebar-fill { height: 100%; background: var(--act); border-radius: 999px; transition: width .3s; }

.upsell { margin: 14px 0 4px; padding-top: 12px; border-top: 1px dashed var(--line); }
.upsell-hd { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.mini { display: flex; gap: 10px; align-items: center; padding: 6px 0; }
.mini-img { flex: 0 0 48px; width: 48px; height: 48px; border-radius: var(--r-sm); overflow: hidden; background: var(--card); }
.mini-img img { width: 100%; height: 100%; object-fit: cover; }
.mini-bd { flex: 1; min-width: 0; display: grid; gap: 1px; }
.mini-name { font-size: 12.5px; line-height: 1.4; text-decoration: none; color: var(--ink); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mini-price { font-size: 12.5px; color: var(--price); font-weight: 600; }
.mini-btn {
  flex: 0 0 auto; min-height: 32px; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; text-decoration: none;
  border: 1px solid var(--act); color: var(--act); background: transparent; cursor: pointer;
}
.mini-btn:hover { background: var(--act); color: var(--on-act); }
.citem-var.disc, .oi-q .disc { color: var(--brand-dk); }
.citem-price s, .oi-q s { color: var(--ink-3); font-weight: 400; font-size: 12px; }

/* ป๊อปอัปแบนเนอร์ (promo-view.ts popupHtml · app.js initPopup) */
.popup { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 20px; }
.popup[hidden] { display: none; }
.popup-bd { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.popup-card {
  position: relative; width: min(440px, 100%); max-height: 90vh; overflow: auto;
  background: var(--card); border-radius: var(--r); box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  animation: popup-in .28s ease-out;
}
.popup-card img { display: block; width: 100%; height: auto; }
.popup-body { padding: 18px 20px 22px; text-align: center; }
.popup-body h2 { font-family: var(--font-head); font-size: 22px; margin: 0 0 6px; }
.popup-body p { color: var(--ink-2); font-size: 14px; line-height: 1.7; margin: 0 0 14px; }
.popup-cta { display: inline-flex; }
.popup-x {
  position: absolute; top: 8px; right: 8px; z-index: 1; width: 34px; height: 34px; border-radius: 999px;
  border: 0; background: rgba(0, 0, 0, .55); color: #fff; font-size: 22px; line-height: 1; cursor: pointer;
}
.popup-x:hover { background: rgba(0, 0, 0, .8); }
@keyframes popup-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }

/* เข้าสู่ระบบด้วย LINE + ลืมรหัสผ่าน (src/routes/member.ts) */
.auth-alt { margin-bottom: 14px; }
.auth-line { gap: 10px; }
.auth-or { display: block; text-align: center; font-size: 12.5px; color: var(--ink-3); margin-top: 12px; }
.auth-forgot { font-size: 13px; color: var(--ink-3); margin: 12px 0 0; text-align: center; }
.auth-forgot a { color: var(--brand-dk); text-decoration: underline; }
.auth-narrow { max-width: 460px; padding-top: 30px; padding-bottom: 50px; }

/* ตัวสลับภาษา (src/views/layout.ts langSwitch · src/lib/i18n.ts) */
.langs { border-top: 1px solid var(--line); font-size: 12.5px; }
.langs .wrap { display: flex; gap: 4px 14px; flex-wrap: wrap; justify-content: center; padding-top: 12px; padding-bottom: 12px; }
.langs a { color: var(--ink-3); text-decoration: none; }
.langs a[aria-current="true"] { color: var(--ink); font-weight: 600; }
.langs a:hover { color: var(--brand-dk); }

/* ตัวสลับภาษาบนหัวเว็บ — ปุ่มลูกโลก + เมนูดรอปดาวน์ (โครง .hd-drop) */
.hd-lang { margin-left: 6px; }
.hd-lang .hd-drop-btn { font-size: 11.5px; letter-spacing: .05em; gap: 4px; padding: 6px 8px; }
.hd-lang .hd-drop-btn svg:first-child { opacity: .75; }
.hd-lang-menu { left: auto; right: 0; transform: none; min-width: 170px; }
.hd-lang-menu a[aria-current="true"] { color: var(--brand-dk); background: var(--brand-tint-2); font-weight: 600; }

/* ── Flash Sale แบบ C (home.ts · card.ts โหมด band) — แถบหัวแถวเดียว นาฬิกาตัวเดียว · การ์ดมีแถบขายแล้ว/เหลือ ── */
.flashbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; padding: 12px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.flashbar-ico { width: 40px; height: 40px; border-radius: 12px; background: var(--act); color: var(--on-act); display: grid; place-items: center; flex: 0 0 auto; }
.flashbar-t { display: grid; gap: 1px; min-width: 0; }
.flashbar-t h2 { margin: 0; font-size: 21px; line-height: 1.3; }
.flashbar-t span { font-size: 13px; color: var(--ink-3); }
.flashbar-cd { margin: 0 0 0 auto; display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: var(--bg); border-radius: 999px; padding: 7px 16px; }
.flashbar-cd small { font-size: 12px; opacity: .75; }
.flashbar-cd .cd { font-family: var(--font-accent); font-weight: 600; font-size: 16.5px; font-variant-numeric: tabular-nums; }
.flashbar .sec-link { margin-left: 4px; }
.card-lockico { position: absolute; top: 9px; right: 9px; z-index: 2; width: 28px; height: 28px; border-radius: 50%; background: var(--card); color: var(--ink); display: grid; place-items: center; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.card-stock { display: grid; gap: 4px; margin: 8px 0 10px; font-size: 12px; color: var(--ink-3); }
.card-stock-bar { height: 7px; border-radius: 999px; background: var(--line); overflow: hidden; }
.card-stock-bar i { display: block; height: 100%; border-radius: 999px; background: var(--act); }
.card-stock.is-few { color: var(--err); font-weight: 600; }
.card-stock.is-few .card-stock-bar i { background: var(--err); }
@media (max-width: 640px) {
  .flashbar { gap: 10px; padding: 10px 12px; }
  .flashbar-cd { margin-left: 0; order: 3; }
  .flashbar .sec-link { margin-left: auto; }
}

/* ─────────── วิดีโอ (สินค้า 1 ตัว · รายการแกลเลอรี) ─────────── */
.pd-thumbs button { position: relative; }
/* ไอคอนเล่น — วงกลมสีร้าน + สามเหลี่ยมขาว (ตัว ▶ ใน HTML ซ่อนไว้ เพราะบางเครื่องวาดเป็นอีโมจิ) · ขนาดตั้งที่ --play */
.pd-play {
  --play: 26px;
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  font-size: 0; color: transparent; background: rgba(0, 0, 0, .16);
}
.pd-play::before, .pd-play::after { content: ""; grid-area: 1 / 1; }
.pd-play::before { width: var(--play); height: var(--play); border-radius: 50%; background: var(--brand); box-shadow: 0 2px 12px rgba(0, 0, 0, .28); transition: transform .2s, background .2s; }
.pd-play::after { width: calc(var(--play) * .3); height: calc(var(--play) * .36); margin-left: calc(var(--play) * .07); background: var(--on-brand); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.gallery .gal-play { --play: 60px; background: rgba(0, 0, 0, .1); }
.gallery button:hover .gal-play::before, .pd-thumbs button:hover .pd-play::before { background: var(--brand-dp); transform: scale(1.07); }

/* กำลังเล่นในกรอบสินค้า — รูปหลักกลายเป็นพื้นเบลอ ตัวเล่นวางกลาง (ไม่มีขอบดำ ไม่ว่าวิดีโอสัดส่วนไหน) */
.pd-main.is-video img { filter: blur(22px) brightness(.5) saturate(1.15); transform: scale(1.15); }
.pd-video { position: absolute; inset: 0; display: grid; place-items: center; }
.pd-video iframe, .pd-video video { width: 100%; height: 100%; border: 0; display: block; object-fit: contain; }
.pd-video:not(.portrait) iframe { height: auto; aspect-ratio: 16 / 9; }   /* YouTube แนวนอน */
/* แนวตั้ง (TikTok/Reel/IG) — ตัวฝังกว้าง ~325px สูง ~740px รวมคำบรรยาย ในกรอบจัตุรัสโดนตัดครึ่ง
   จึงยืดกรอบเป็นแนวตั้งระหว่างเล่น (ไม่ขึ้นกับสัดส่วนรูปที่ร้านเลือก) แล้วคืนเดิมเมื่อกดรูปอื่น */
.pd-main:has(> .pd-video.portrait:not([hidden])) {
  aspect-ratio: auto; min-height: 520px;
  height: min(740px, calc(100vh - var(--hd-h) - 110px));
  height: min(740px, calc(100svh - var(--hd-h) - 110px));
}
.pd-video.portrait iframe { width: min(100%, 340px); }
/* วิดีโอเป็นสื่อหลัก (แบบ B) — ลิงก์ TikTok/YouTube เล่นเองไม่ได้ จึงโชว์รูปปก + ปุ่มเล่นใหญ่ กดแล้ว app.js ค่อยโหลดตัวฝัง */
.pd-cover-play { position: absolute; inset: 0; border: 0; padding: 0; background: none; cursor: pointer; }
.pd-cover-play .pd-play { --play: 64px; background: rgba(0, 0, 0, .1); }
.pd-cover-play:hover .pd-play::before, .pd-cover-play:focus-visible .pd-play::before { background: var(--brand-dp); transform: scale(1.07); }

/* ตัวเล่นในกล่องเต็มจอ — แนวนอน 16:9 · TikTok/Reel แนวตั้ง */
.gal-vid { width: min(100%, 900px); max-height: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-lg); }
.gal-vid.portrait { width: min(100%, 340px); aspect-ratio: 9 / 19; background: var(--white); }   /* ตัวฝัง TikTok กว้าง ~325px พื้นขาว */
.gal-vid iframe, .gal-vid video { width: 100%; height: 100%; border: 0; display: block; }

/* ───── ปุ่มลอย "ติดต่อร้าน" แบบ B (.ct.ct-b) — สเปก handoff/S3.md ข) · มอคอัพ S3 27 ต.ค. · layout.ts contactFab()
   <details> + <summary> กาง/หุบได้ไม่ต้องมี JS · z-index 60 (เหนือ buybar 55 · ใต้ลิ้นชัก/เมนูมือถือ 90+) · ยกขึ้นเหนือแถบซื้อหน้าสินค้าบนมือถือ ───── */
.ct { position: fixed; z-index: 60; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); font-size: 14px; }
body:has(.buybar) .ct { bottom: calc(76px + env(safe-area-inset-bottom)); }
@media (min-width: 900px) { body:has(.buybar) .ct { bottom: calc(16px + env(safe-area-inset-bottom)); } }   /* จอคอม .buybar ซ่อนอยู่ */
.ct > summary { list-style: none; cursor: pointer; }
.ct > summary::-webkit-details-marker { display: none; }
.ct-fab { display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 20px 0 16px; border-radius: 999px; background: var(--brand); color: var(--on-brand); font-family: var(--font-accent); font-weight: 600; font-size: 15px; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); transition: transform .15s; }
.ct-fab:hover { transform: translateY(-1px); }
.ct-fab:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.ct-fab svg { width: 20px; height: 20px; }
/* #80 ทาง ก: เลื่อนลงบนมือถือ app.js ใส่ .is-mini → เหลือวงกลมไอคอน 44px (ทับปุ่มการ์ดน้อยลง) · ไม่ animate ขนาด (เปลี่ยนทันที) */
@media (max-width: 899px) {
  .ct.is-mini .ct-fab { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .ct.is-mini .ct-fab > span { display: none; }
}
.ct-panel { position: absolute; right: 0; bottom: 62px; width: min(320px, calc(100vw - 32px)); background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg); overflow: hidden; }
.ct-panel header { padding: 14px 16px 10px; }
.ct-panel header b { font-family: var(--font-head); font-size: 16px; }
.ct-panel header small { display: block; color: var(--ink-3); font-size: 12.5px; }
.ct-list { list-style: none; margin: 0; padding: 0; }
.ct-ch { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.ct-ch:hover { background: var(--brand-tint-2); }
.ct-ch::after { content: "›"; margin-left: auto; color: var(--ink-3); font-size: 20px; }
.ct-ch b { font-weight: 600; font-size: 14.5px; line-height: 1.3; }
.ct-ch small { display: block; color: var(--ink-3); font-size: 12.5px; line-height: 1.3; }
.ct-i { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 11px; letter-spacing: .02em; }
.ct-i svg { width: 18px; height: 18px; }
/* สีประจำช่องทาง — สีแบรนด์ของแอปนั้น ไม่ใช่สีร้าน (คนจำจากสี) · โทร = --ok · อีเมล = --ink-2 */
.ct-line .ct-i { background: #06C755; }
.ct-tel .ct-i { background: var(--ok); }
.ct-msg .ct-i { background: #0866FF; }
.ct-fb .ct-i { background: #1877F2; font-size: 20px; font-family: Arial, sans-serif; }
.ct-mail .ct-i { background: var(--ink-2); color: var(--bg); }

/* ───── แบนเนอร์ความยินยอมคุกกี้ แบบ B (.ck.ck-card) + แผงตั้งค่า (.ck-pane) — สเปก handoff/S3.md ก) · มอคอัพ S3 27 ต.ค. · layout.ts consentHtml()
   ปุ่ม "ยอมรับทั้งหมด" กับ "ปฏิเสธทั้งหมด" คลาสเดียวกัน .ck-btn (เท่ากันทุกค่า — ไม่ชี้นำ) · "ตั้งค่า" เป็นปุ่มตัวอักษร .ck-link ───── */
.ck { position: fixed; z-index: 95; color: var(--ink); font-size: 14px; line-height: 1.6; }
.ck p { margin: 0; }
.ck a { color: var(--brand-dk); text-decoration: underline; text-underline-offset: 2px; }
.ck-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--bg); font-family: var(--font-accent); font-size: 14.5px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.ck-btn:hover { opacity: .88; }
.ck-btn:focus-visible, .ck-link:focus-visible, .ck-save:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ck-link { border: 0; background: none; padding: 8px 4px; color: var(--ink-2); font: inherit; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ck-ic { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-tint); color: var(--brand-dk); }
.ck-card { left: 12px; right: 12px; bottom: 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg); padding: 18px; display: grid; gap: 12px; }
.ck-card[hidden] { display: none; }
.ck-card h3 { margin: 0; font-family: var(--font-head); font-size: 17px; display: flex; align-items: center; gap: 10px; }
.ck-card .ck-act { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ck-card .ck-link { grid-column: 1 / -1; justify-self: center; }
@media (min-width: 700px) { .ck-card { right: auto; left: 20px; bottom: 20px; width: 400px; } }
body:has(.ck:not([hidden])) .ct { display: none; }   /* แบนเนอร์ขึ้น = ซ่อนปุ่มติดต่อร้าน (มุมล่างเหมือนกัน) */
.ck-pane { position: fixed; z-index: 97; left: 0; right: 0; bottom: 0; margin: 0; max-height: 88vh; overflow: auto; width: auto; background: var(--card); color: var(--ink); border: 0; border-radius: 20px 20px 0 0; padding: 20px 18px calc(18px + env(safe-area-inset-bottom)); font-size: 14px; box-shadow: var(--shadow-lg); }
.ck-pane[open] { display: grid; gap: 14px; }
.ck-pane::backdrop { background: rgba(0, 0, 0, .45); }
.ck-pane form { display: contents; }
body:has(.ck-pane[open]) .ck-card { visibility: hidden; }   /* เปิดแผงตั้งค่าแล้ว การ์ดแบนเนอร์ไม่ต้องโผล่ซ้อนข้างหลัง */
@media (min-width: 700px) { .ck-pane { left: 50%; right: auto; top: 50%; bottom: auto; transform: translate(-50%, -50%); width: 520px; border-radius: var(--r); padding: 24px; } }
.ck-pane-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ck-pane h2 { margin: 0; font-family: var(--font-head); font-size: 20px; }
.ck-x { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--bg); color: var(--ink-2); font-size: 18px; cursor: pointer; }
.ck-pane > p, .ck-pane form > p { margin: 0; color: var(--ink-2); }
.ck-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.ck-row b { font-size: 15px; }
.ck-row small { grid-column: 1; color: var(--ink-3); font-size: 13px; line-height: 1.55; }
.ck-row .ck-sw { grid-row: 1 / span 2; grid-column: 2; }
.ck-row .ck-on { grid-row: 1 / span 2; grid-column: 2; font-size: 12.5px; color: var(--ok); font-weight: 600; }
.ck-sw { appearance: none; width: 46px; height: 28px; border-radius: 999px; background: var(--line); position: relative; cursor: pointer; transition: background .2s; margin: 0; }
.ck-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .2s; }
.ck-sw:checked { background: var(--brand); }
.ck-sw:checked::after { transform: translateX(18px); }
.ck-pane .ck-act { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ck-save { grid-column: 1 / -1; min-height: 44px; border-radius: 999px; border: 1.5px solid var(--line); background: transparent; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.ft-ck { border: 0; background: none; padding: 0; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; min-height: 30px; }
.ft-bottom .ft-links { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }