/* public/css/site.css — สไตล์ของหน้าร้านสาธารณะ (เฟส 4)
 *
 * แยกจาก x.css (ของระบบหลังร้าน) โดยตั้งใจ: x.css เป็นไฟล์ที่ tools/dc2vanilla.js generate ทับทุกครั้ง
 * ที่รันตัวแปลง (มันเก็บคลาส hv1/ac2/... ที่สกัดจาก dc.html) ถ้าเขียนสไตล์หน้าร้านปนลงไป จะหายทันที
 * ที่มีคนรัน `node tools/dc2vanilla.js all` — บั๊กที่หาสาเหตุยากมากเพราะไม่มีใครแก้ไฟล์นั้นตรง ๆ เลย
 *
 * 🔴 18 ก.ย. 2569 — เจ้าของสั่ง "หน้า /#/home อยากให้ออกแบบเป็นแนวสีตาม logo ที่อัพตอนนี้เลยนะ"
 * สีทั้งชุดด้านล่าง **ดูดจากไฟล์โลโก้จริงทีละพิกเซล** (public/img/master/…jpeg) ไม่ได้กะจากสายตา:
 *   พื้นโลโก้ #242021 · ปลายไล่สีฝั่งอำพัน #F19E24 · ฝั่งส้ม #F1722A · ตัวอักษร #FEFEFE
 * ทับ token ของ tokens.css เฉพาะหน้าร้าน (ไฟล์นี้โหลดที่ index.html เท่านั้น ไม่โหลดที่ /app)
 * — หลังร้านยังเป็นสีน้ำเงินม่วงเหมือนเดิม เพราะเป็นเครื่องมือทำงาน ไม่ใช่หน้าขายของ
 */

:root{
  --brand: #f1722a;                 /* ส้มหลักของตัว K */
  --brand-2: #f19e24;               /* อำพัน — ปลายอีกด้านของไล่สี */
  --brand-soft: #fff2e9;            /* พื้นอ่อนสำหรับป้าย/ปุ่มรอง */
  --ink: #242021;                   /* เทาเข้มจากพื้นโลโก้ — ใช้เป็นพื้นของ hero/ท้ายเว็บ */
  --ink-soft: #322c2d;
  --brand-grad: linear-gradient(115deg, #f19e24 0%, #f1722a 62%, #ea5f24 100%);
  --bg: #fbf9f7;                    /* ครีมอุ่น ๆ แทนเทาฟ้าของหลังร้าน */
  --border: #ece5df;
  --shadow: 0 1px 2px rgb(36 32 33/.05), 0 8px 22px rgb(36 32 33/.06);
}
html[data-theme="dark"]{
  --brand: #f5853f; --brand-2: #f2a838; --brand-soft: #3a2517;
  --ink: #1a1718; --ink-soft: #241f20;
  --bg: #161314; --border: #322b2c;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Sarabun', 'Noto Sans Thai', sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
a { color: var(--brand); }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 clamp(14px, 4vw, 28px); }
.num { font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums; }

/* ---- แถบบน ----
   🔴 18 ก.ย. 2569: แถบบนเป็น **สีเทาเข้มเดียวกับพื้นโลโก้** ไม่ใช่พื้นขาวแบบเดิม
   เหตุผลที่วัดได้จริง: โลโก้ของร้านเป็นรูปพื้นเข้ม พอวางบนแถบขาวที่ความสูง 26px มันกลายเป็น
   **สี่เหลี่ยมเข้มเล็ก ๆ ที่อ่านตัวหนังสือไม่ออกเลย** (เห็นชัดตอนถ่ายจอจริงทั้งจอคอมและมือถือ)
   พอแถบเป็นสีเดียวกับพื้นโลโก้ ขอบรูปก็หายกลืนไปกับแถบ เหลือแต่ตัว K ส้มกับชื่อร้าน = อ่านออก
   และต่อเนื่องกับ hero ที่อยู่ใต้มันพอดี (แถบ+hero กลายเป็นบล็อกเข้มก้อนเดียว) */
.topbar {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--ink) 94%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgb(255 255 255/.08);
}
.topbar-in { display: flex; align-items: center; gap: 12px; min-height: 66px; flex-wrap: wrap; }
.brand { font-family: 'Inter', sans-serif; font-weight: 700; letter-spacing: .1em; font-size: 15px;
  white-space: nowrap; color: #fff; display: flex; align-items: center; }
/* โลโก้ร้านเป็นรูปจัตุรัสที่มีทั้งสัญลักษณ์และชื่อร้านอยู่ในรูปเดียว — ต่ำกว่า ~44px ตัวหนังสือ
   ในรูปจะอ่านไม่ออก (วัดจากภาพจริง) · บนมือถือลดลงเป็น 38px เพื่อไม่ให้แถวบนสูงเกินไป */
.brand { gap: 10px; }
.brand img { height: 42px; width: 42px; flex: none; border-radius: 10px; object-fit: cover; display: block; }
/* ไม่บังคับตัวพิมพ์ใหญ่/ไม่ถ่างตัวอักษร — ชื่อร้านจริงเขียนว่า "KANGSADAN sports & design" ซึ่งมี
   ตัวเล็กตัวใหญ่ของมันเองอยู่แล้ว (ตรงกับที่เขียนในโลโก้) · ถ่างแล้วยาวเกินจนถูกตัดเป็น "SPORT…" */
.brand-name { font-size: 15px; letter-spacing: .01em; max-width: 270px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topnav { margin-left: auto; display: flex; gap: 6px; }
.topnav button, .topnav a {
  min-height: 40px; padding: 0 13px; border-radius: 10px; font-size: 14px; font-weight: 600;
  color: #cbc3bf; white-space: nowrap; flex: 0 0 auto;
  display: inline-flex; align-items: center; text-decoration: none;
}
.topnav button:hover, .topnav a:hover { color: #fff; }
.topnav button.on, .topnav a.on { background: var(--brand-grad); color: #fff; }
.topnav-app { color: #cbc3bf; }
.topnav-app:hover { color: #fff; }
.topbar-act { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }

/* ── มือถือ: แยกเป็น 2 แถวโดยตั้งใจ ───────────────────────────────────────────
   แถวบน = โลโก้ + ตะกร้า/เข้าระบบพนักงาน (ของที่ต้องเห็นตลอด ไม่ให้เลื่อนหาย)
   แถวล่าง = เมนู 4 อัน เป็น "แถบเลื่อนแนวนอนในกล่องตัวเอง" ตามกติกาเดิมของโปรเจกต์
   (ของกว้างต้อง scroll ในกล่องตัวเอง ห้ามให้ body เลื่อนแนวนอน)
   เดิมปล่อยให้ flex-wrap พับเอง → วัดจริงที่ 390px header สูง 133px เมนูตก 2-3 แถวไม่เป็นระเบียบ */
@media (max-width: 719px) {
  .topbar-in { min-height: 54px; row-gap: 0; column-gap: 8px; }
  .brand img { height: 36px; width: 36px; }
  .brand-name { font-size: 13.5px; max-width: 46vw; }
  .brand { flex: 1 1 auto; }
  .topbar-act { margin-left: auto; }
  .topnav {
    order: 3; width: 100%; margin-left: 0; margin-top: -2px; padding-bottom: 8px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .topnav::-webkit-scrollbar { display: none; }
  .topnav button, .topnav a { min-height: 38px; padding: 0 11px; font-size: 13.5px; }
  .topnav-app, .topnav-cart { min-height: 38px; padding: 0 11px; font-size: 13.5px; }
}

/* ---- ปุ่ม ---- */
.btn {
  min-height: 48px; padding: 0 20px; border-radius: 12px; font-size: 15px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  /* 🔴 20 ก.ย. 2569 เจ้าของทัก "ตัวหนังสือมันขึ้นบรรทัดใหม่ไม่สวยเลย" — ปุ่มคือจุดที่เห็นชัดที่สุด
     เพราะ actionicons.js แทรกไอคอนเข้ามาเป็นลูกอีกตัว ทำให้ที่ว่างของคำหดลงอีก ~22px
     ปุ่มที่คำตัดกลางคำ ("เพิ่ม/รายการ") อ่านยากกว่าปุ่มที่ยาวเลยกรอบเล็กน้อยมาก */
  white-space: nowrap;
}
.btn-main { background: var(--brand); color: #fff; }
.btn-ghost { border: 1px solid var(--border); color: var(--text); background: var(--surface); }
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* ---- การ์ด / ส่วน ---- */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--shadow); padding: clamp(16px, 3vw, 22px);
}
/* 🔴 6 ก.ย. 2569: เดิม `padding: X 0` ทับ padding แนวนอนของ .wrap (บรรทัดบน) เป็น 0 → ทุกหน้าร้านบนมือถือ
   ข้อความชิดขอบจอซ้าย/ขวา (B18 จับไม่ได้เพราะไม่ได้ "ล้น" แค่ไม่มีระยะขอบ) — ตั้งเฉพาะบน/ล่างเท่านั้น */
.section { padding-top: clamp(30px, 6vw, 56px); padding-bottom: clamp(30px, 6vw, 56px); }
.section h2 { font-size: clamp(20px, 3vw, 26px); margin: 0 0 6px; }
.section .lead { color: var(--muted); margin: 0 0 20px; }

.grid { display: grid; gap: 14px; }
/* 🔴 19 ก.ย. 2569 — มือถือต้องได้ **2 คอลัมน์** ไม่ใช่ 1
   วัดจริงก่อนแก้ที่ 390px: การ์ดแบบคอ 8 ใบเรียงคอลัมน์เดียว (auto-fit + minmax 190px ยุบเหลือ 1
   คอลัมน์ทันทีที่ที่ว่างต่ำกว่า 380px) การ์ดเป็นจัตุรัสเต็มความกว้าง → **หน้าแรกยาว 6,872px**
   คือต้องปัดผ่านของอย่างเดียว ~8 จอเต็ม ๆ กว่าจะถึงราคา · ตอนนี้ minmax ผูกกับความกว้างจอ:
   จอแคบได้ 2 คอลัมน์เสมอ จอกว้างยังได้ 4–5 คอลัมน์เท่าเดิม */
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(190px, 46%), 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* ---- hero ----
   พื้นเทาเข้มของโลโก้เต็มความกว้าง + ไล่สีส้มจาง ๆ มุมขวาบน (ทิศเดียวกับไล่สีในตัว K)
   ตัวอักษรขาวบนพื้นเข้ม = คู่สีเดียวกับที่โลโก้ใช้อยู่แล้ว จึงอ่านง่ายและเข้าชุดกันเองโดยไม่ต้องบังคับ */
.hero {
  position: relative; overflow: hidden;
  background: var(--ink); color: #fff;
  margin-top: -1px;   /* ชนกับแถบบนพอดี ไม่ให้เห็นเส้นคั่นบาง ๆ ระหว่าง 2 บล็อกที่สีเดียวกัน */
  padding: clamp(34px, 7vw, 76px) 0 clamp(30px, 6vw, 60px);
  margin-bottom: clamp(18px, 3vw, 30px);
}
.hero::after {
  content: ''; position: absolute; right: -14%; top: -46%; width: 62%; aspect-ratio: 1;
  background: var(--brand-grad); opacity: .17; filter: blur(8px);
  border-radius: 46% 54% 40% 60%; pointer-events: none;
}
.hero > * { position: relative; }
.hero h1 { font-size: clamp(27px, 5.6vw, 46px); line-height: 1.22; margin: 0 0 14px; letter-spacing: -.4px; }
/* 🔴 20 ก.ย. 2569 เจ้าของทัก "ชุด สระอุมันขาดนะ แสดงไม่เต็ม"
   ตัวอักษรไล่สีทำด้วย `background-clip: text` = ตัวอักษรเป็น **สีโปร่งใส** แล้วให้พื้นหลังโผล่
   ออกมาตามรูปตัวอักษร · ส่วนของตัวอักษรที่อยู่ **นอกกล่องพื้นหลัง** จึงไม่ถูกระบายเลย ไม่ใช่แค่
   จางลง — และกล่องพื้นหลังของ inline box สูงเท่าตัวอักษรละติน ซึ่ง **ไม่ครอบสระล่างของไทย**
   (ุ ู ฺ) ผลคือสระอุใต้ "ช" ในคำว่า ชุด หายไปเกือบหมด
   แก้ด้วย padding-bottom ที่ยืดเฉพาะ "กล่องพื้นหลัง" ลงมา — padding แนวตั้งของ inline box
   **ไม่ดันความสูงบรรทัด** เลย์เอาต์จึงไม่ขยับสักพิกเซล (วัดแล้ว: หัวข้อสูง 112px เท่าเดิม)
   · padding-top เผื่อวรรณยุกต์/สระบนไว้ด้วยเหตุผลเดียวกัน
   ⚠️ ทุกครั้งที่ใช้ตัวอักษรไล่สีกับข้อความไทย ต้องเผื่อระยะนี้เสมอ */
.hero h1 em { font-style: normal; background: var(--brand-grad); -webkit-background-clip: text;
  background-clip: text; color: transparent; padding-bottom: .22em; padding-top: .08em; }
.hero p { font-size: clamp(15px, 2vw, 18px); color: #d9d2cf; margin: 0 0 24px; max-width: 620px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
/* ปุ่มรองบนพื้นเข้ม — .btn-ghost ปกติเป็นพื้นขาว ซึ่งจะกลืนกับปุ่มหลักตรงนี้ */
.hero .btn-ghost { background: rgb(255 255 255/.09); color: #fff; border-color: rgb(255 255 255/.26); }
.hero .btn-main { background: var(--brand-grad); box-shadow: 0 8px 22px rgb(241 114 42/.34); }
.trust { display: flex; gap: 10px 26px; flex-wrap: wrap; margin-top: 26px; color: #c9c1bd; font-size: 14px; }
.trust b { color: #fff; font-family: 'Inter', sans-serif; }

/* ---- แกลเลอรีตัวอย่างผลงาน (sql/25 · 18 ก.ย. 2569) ----
   เจ้าของสั่ง "อยากให้มีรูปภาพสินค้าในหน้าแรกด้วยนะ … เพื่อแสดงให้ลูกค้าเห็นได้สวย ๆ นะ"
   🔴 กรอบรูปตายตัว 4:3 + object-fit:cover — รูปที่ร้านอัปมาสัดส่วนไม่เท่ากันแน่นอน ถ้าปล่อยตามรูป
   จริง แถวจะเหลื่อมกันทั้งตาราง (และตัวครอปฝั่งพนักงานก็ตั้งต้นที่ 4:3 ให้ตรงกันอยู่แล้ว) */
.gallery { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.gal-item { position: relative; border-radius: 15px; overflow: hidden; background: var(--surface2);
  border: 1px solid var(--border); box-shadow: var(--shadow); }
.gal-item img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.gal-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 12px 10px; color: #fff;
  font-size: 13.5px; font-weight: 600; line-height: 1.4;
  background: linear-gradient(transparent, rgb(20 16 17/.82)); }

/* ---- ฟอร์ม ---- */
label.f { display: flex; flex-direction: column; gap: 6px; }
label.f > span { font-size: 13px; font-weight: 600; color: var(--muted); }
.inp {
  min-height: 48px; border: 1px solid var(--border); background: var(--surface);
  border-radius: 11px; padding: 0 13px; font-size: 15px; width: 100%;
}
textarea.inp { min-height: 92px; padding: 11px 13px; resize: vertical; }
.inp:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.err { color: #dc2626; font-size: 14px; font-weight: 600; }
.hint { color: var(--muted); font-size: 13px; }

/* honeypot — คนจริงต้องมองไม่เห็นและ tab ไม่โดน แต่ต้องไม่ใช้ display:none
   (บอทบางตัวข้าม field ที่ display:none โดยเฉพาะ) */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- ขั้นตอน (stepper) ---- */
/* 🔴 กริดไม่ใช่ flex-wrap — วัดจริงที่ 390px: flex:1 + min-width:88px ดัน 3 ขั้นไว้แถวบน
   แล้ว "4. ติดต่อกลับ" ตกไปอยู่แถวล่างตัวเดียวแบบยืดเต็มความกว้าง (อ่านแล้วเหมือนของหลุด)
   auto-fit ให้ 2 คอลัมน์เท่ากันบนมือถือ · 4 คอลัมน์บนจอกว้าง โดยไม่ต้องเขียน media query */
.steps { display: grid; gap: 7px; grid-template-columns: repeat(auto-fit, minmax(min(132px, 48%), 1fr));
  margin-bottom: 18px; }
.step { border-radius: 11px; padding: 10px 10px; background: var(--surface2); font-size: 13px;
  text-align: center; color: var(--muted); display: grid; place-items: center; text-wrap: balance; }
.step.on { background: var(--brand-soft); color: var(--brand); font-weight: 700; }
.step.done { background: color-mix(in srgb, #10b981 14%, transparent); color: #047857; }

/* ---- timeline เช็คสถานะ ---- */
.tl { display: flex; gap: 4px; margin: 16px 0; }
.tl-item { flex: 1; text-align: center; font-size: 12.5px; color: var(--muted); }
.tl-dot { height: 8px; border-radius: 999px; background: var(--border); margin-bottom: 8px; }
.tl-item.on .tl-dot { background: var(--brand); }
.tl-item.on { color: var(--text); font-weight: 700; }

table.price { width: 100%; border-collapse: collapse; font-size: 14px;
  font-variant-numeric: tabular-nums; }
/* กว้างเต็มการ์ด (เจ้าของสั่ง) — แบ่งคอลัมน์ไว้ ไม่งั้นจอคอมจะได้ช่อง "ประเภท" กว้างครึ่งจอ
   โดยมีคำเดียวลอยอยู่กลาง ส่วนราคาไปกองอยู่ขอบขวาสุด */
table.price thead th:first-child, table.price .pr-type { width: 26%; }
table.price thead th:last-child, table.price td:last-child { width: 26%; }
table.price th, table.price td { padding: 8px 10px; text-align: left; }
table.price thead th { color: var(--muted); font-weight: 600; font-size: 13px; border-bottom: 1px solid var(--border); }
table.price .num { text-align: right; white-space: nowrap; }
table.price .pr-price { font-weight: 700; }
/* 🔴 ช่องประเภท = เซลล์เดียวกินทุกขั้นราคาของมัน (rowspan) จัดกลางทั้งแนวตั้งและแนวนอน
   (เจ้าของสั่ง 21 ก.ย. 2569) · เดิมเขียนชื่อไว้แถวแรกแถวเดียวแล้วปล่อยช่องว่างในแถวที่เหลือ
   ซึ่งอ่านแล้วไม่รู้ว่ากลุ่มจบตรงไหน · เส้นขวาของช่องคือตัวบอกว่าทุกแถวทางขวาเป็นของประเภทนี้ */
table.price .pr-type { vertical-align: middle; text-align: center; font-weight: 700;
  border-right: 1px solid var(--border); }
/* เส้นบาง ๆ ระหว่างขั้นราคาในกลุ่มเดียวกัน — `tr + tr` เพื่อไม่ให้แถวแรกมีเส้นซ้ำกับแถบคั่นเหนือมัน */
table.price tbody tr + tr td { border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent); }
/* 🔴 แถบคั่น "ระหว่างกลุ่ม" — เส้นหนา + ที่ว่าง ให้ตาเห็นว่าจบประเภทหนึ่งแล้วขึ้นประเภทใหม่ */
table.price .pr-sep td { padding: 0; height: 14px; border-top: 2px solid var(--border); }

/* 🔴 จอแคบ: บีบช่องไฟแล้วห้ามตัดคำ — ที่ 320px คำไทยในตารางนี้ถูกตัดกลางคำประสมทั้ง 2 ช่อง
   ("เสื้อ/ผู้ใหญ่" · "20 ตัวขึ้น/ไป" · "ปลอก/แขน") ซึ่งอ่านยากกว่าตารางที่แน่นนิดหน่อยมาก
   (บทเรียนเดิม 20 ก.ย. 2569) · วัดแล้วพอดีที่ 320px ไม่ล้น */
@media (max-width: 400px) {
  table.price { font-size: 13px; }
  table.price th, table.price td { padding: 7px 5px; }
  table.price .pr-type, table.price tbody td:nth-child(2) { white-space: nowrap; }
  table.price thead th:last-child, table.price td:last-child { width: 72px; }
}

.foot { border-top: 1px solid var(--border); padding: 26px 0 40px; color: var(--muted); font-size: 14px; }

/* ===== เฟส 5 — แคตตาล็อก / ตะกร้า / checkout ============================== */

/* ⚠️ ทั้งคู่ต้องมี white-space:nowrap + flex:0 0 auto เหมือน .topnav button — ตอนอยู่ในแถบเลื่อน
   แนวนอนของมือถือ ถ้าไม่มี flex จะบีบให้หดแล้วข้อความตัดเป็น 2-3 บรรทัด (วัดจริง: "เข้าระบบพนักงาน"
   หดเหลือกว้าง 75px สูง 69px ดันหัวจอจาก 100px เป็น 120px) */
.topnav-app {
  min-height: 40px; padding: 0 13px; border-radius: 10px; font-size: 14px; font-weight: 600;
  color: var(--muted); display: inline-flex; align-items: center; text-decoration: none;
  white-space: nowrap; flex: 0 0 auto;
}
.topnav-cart {
  min-height: 40px; padding: 0 13px; border-radius: 10px; font-size: 14px; font-weight: 700;
  color: var(--text); border: 1px solid var(--border); display: inline-flex; align-items: center; gap: 7px;
  white-space: nowrap; flex: 0 0 auto;
}
.topnav-cart.has { border-color: var(--brand); color: var(--brand); }
.cart-n {
  background: var(--brand); color: #fff; border-radius: 999px; min-width: 21px; height: 21px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; padding: 0 6px;
}

/* ---- การ์ดสินค้า ---- */
.pgrid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.pcard {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow); text-align: left; padding: 0; display: flex; flex-direction: column;
}
.pcard:hover { border-color: var(--brand); }
.pcard-body { padding: 13px 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.pcard-name { font-weight: 700; font-size: 15px; line-height: 1.4; }
.pcard-meta { color: var(--muted); font-size: 13px; }
.pcard-price { font-weight: 700; font-size: 17px; margin-top: 4px; }
.pcard-price span { font-size: 13px; font-weight: 500; color: var(--muted); }

/* ภาพสินค้า — เป็น "ภาพวาดตัวอย่างลาย" (SVG สร้างจากรหัสลาย+สีจริงด้วย tools/gen-product-art.js)
   ยังไม่ใช่รูปถ่ายของจริง เพราะเฟสนี้ยังไม่มีระบบอัปโหลดรูป
   **ต้องมีป้าย "ภาพตัวอย่างลาย" กำกับเสมอ** ไม่ให้ลูกค้าเข้าใจว่าเป็นรูปถ่ายของสินค้าตัวนั้นจริง ๆ */
.pimg {
  aspect-ratio: 4 / 3; position: relative; display: flex; align-items: center; justify-content: center;
  border-radius: 14px; overflow: hidden;
}
.pimg-photo { background: var(--surface2); }
/* contain ไม่ใช่ cover — ตัวเสื้อต้องเห็นครบทั้งตัว ถ้าครอปหัวไหล่/ชายเสื้อหายไป
   ลูกค้าจะดูไม่ออกว่าเป็นทรงไหน ซึ่งเป็นเหตุผลทั้งหมดที่ใส่รูป */
.pimg-photo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pcard .pimg { border-radius: 0; }
.pimg-code {
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: clamp(20px, 4vw, 30px);
  color: #fff; letter-spacing: .08em; text-shadow: 0 1px 8px rgb(0 0 0 / .45);
}
.pimg-tag {
  position: absolute; left: 10px; bottom: 10px; background: rgb(0 0 0 / .55); color: #fff;
  font-size: 11.5px; padding: 3px 8px; border-radius: 999px;
}

/* ---- หน้ารายละเอียดสินค้า ---- */
.pdetail { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .pdetail { grid-template-columns: 1fr 1fr; align-items: start; } }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  min-height: 44px; padding: 0 15px; border-radius: 11px; border: 1px solid var(--border);
  background: var(--surface); font-size: 14px; font-weight: 600;
}
.chip.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.chip.off { opacity: .38; text-decoration: line-through; cursor: not-allowed; }

/* ---- แถวในตะกร้า ---- */
.crow {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 12px 14px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}

/* ---- ตัวเลือกวิธีชำระเงิน ----
   วิธีที่ยังไม่เปิด **แสดงให้เห็นแต่กดไม่ได้** ไม่ซ่อนทิ้ง — ลูกค้าที่มองหา "จ่ายบัตร" จะได้รู้ว่า
   กำลังจะมี แล้วเลือกวิธีอื่นแทน (ถ้าซ่อน เขาจะคิดว่าเว็บไม่รองรับแล้วปิดหน้าไปเลย) */
.payopt {
  display: flex; align-items: flex-start; gap: 11px; padding: 13px 14px; border-radius: 13px;
  border: 1px solid var(--border); cursor: pointer;
}
.payopt.on { border-color: var(--brand); background: var(--brand-soft); }
.payopt.off { opacity: .62; cursor: not-allowed; }
.payopt input { margin-top: 4px; }
.badge-soon {
  align-self: center; font-size: 11.5px; font-weight: 700; color: var(--muted);
  border: 1px solid var(--border); border-radius: 999px; padding: 3px 9px; white-space: nowrap;
}

/* ---- แผ่นเลื่อนขึ้น (ตารางไซซ์) ---- */
.sheet-bg {
  position: fixed; inset: 0; background: rgb(15 23 42 / .45); z-index: 60;
  display: flex; align-items: flex-end; justify-content: center;
}
@media (min-width: 760px) { .sheet-bg { align-items: center; } }
.sheet {
  background: var(--surface); border-radius: 18px 18px 0 0; padding: 18px clamp(16px, 4vw, 24px) 28px;
  width: 100%; max-width: 520px; max-height: 86vh; overflow: auto;
}
@media (min-width: 760px) { .sheet { border-radius: 18px; } }

/* ---- แถวติดต่อร้าน (เพิ่มหลัง UAT เฟส 5) ----
   ลูกค้าเปิดเว็บครั้งแรกแล้วไม่มีเบอร์/ไลน์/ที่ตั้งร้านให้ติดต่อเลย ทั้งที่ร้านนี้ปิดการขายทางแชท
   เป็นหลัก — ปุ่มโทรต้องกดแล้วโทรได้จริงบนมือถือ ไม่ใช่ข้อความให้ลอกเอง */
.contact-row { display: flex; gap: 8px; flex-wrap: wrap; }
.contact-chip {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 13px;
  border: 1px solid var(--border); border-radius: 999px; font-size: 14px; font-weight: 600;
  color: var(--text); text-decoration: none; background: var(--surface);
}
a.contact-chip { border-color: var(--brand); color: var(--brand); }

/* ══════════ บทความ (sql/27 · 19 ก.ย. 2569) ══════════
   หน้าบทความเป็น HTML ที่ server ประกอบเสร็จแล้ว **ไม่มี JavaScript เลยสักบรรทัด**
   (ตัวดึงลิงก์ของ LINE/Facebook ไม่รัน JS · และเป็นคำตอบตรง ๆ ของ "เน้นความเร็ว")
   สไตล์จึงต้องอยู่ในไฟล์นี้ทั้งหมด — หน้าบทความไม่มีทางฉีด style เองได้ */

/* ---- รายการบทความ ---- */
.art-list { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.art-card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  overflow: hidden; box-shadow: var(--shadow);
}
.art-card:hover { border-color: var(--brand); }
.art-card img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; background: var(--surface2); }
/* ไม่มีรูปปก = แถบไล่สีแบรนด์ **ไม่ใช่กรอบว่าง** (กติกาเดิม: กรอบว่างอ่านเป็น "รูปโหลดไม่ขึ้น") */
.art-card-nocover { display: block; width: 100%; aspect-ratio: 16/9; background: var(--brand-grad); opacity: .85; }
.art-card-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 15px 16px; }
.art-card-title { font-weight: 700; font-size: 16px; line-height: 1.35; }
.art-card-ex { color: var(--muted); font-size: 14px; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.art-card-date { color: var(--muted); font-size: 12.5px; margin-top: 2px; }

/* ---- หน้าบทความ ----
   ความกว้างจำกัดที่ 720px โดยตั้งใจ — บรรทัดที่ยาวเกิน ~90 ตัวอักษรคนอ่านจะหลงบรรทัด
   (หน้าอื่นของเว็บกว้าง 1080px ได้เพราะเป็นการ์ด/ตาราง ไม่ใช่ข้อความยาว) */
.art-page { max-width: 760px; }
.art-crumb { font-size: 13.5px; color: var(--muted); margin-bottom: 10px; }
.art-page h1 { font-size: clamp(24px, 4.4vw, 34px); line-height: 1.25; margin: 0 0 8px; }
.art-meta { color: var(--muted); font-size: 13.5px; margin-bottom: 18px; }
.art-cover { display: block; width: 100%; border-radius: 16px; margin-bottom: 20px; aspect-ratio: 16/9; object-fit: cover; background: var(--surface2); }
.art-body { font-size: 16.5px; line-height: 1.8; }
.art-body h2 { font-size: clamp(19px, 2.6vw, 23px); margin: 30px 0 10px; line-height: 1.35; }
.art-body p { margin: 0 0 16px; }
.art-body ul, .art-body ol { margin: 0 0 16px; padding-left: 22px; }
.art-body li { margin-bottom: 7px; }
.art-body blockquote {
  margin: 0 0 18px; padding: 12px 16px; border-left: 3px solid var(--brand);
  background: var(--surface2); border-radius: 0 12px 12px 0; color: var(--text);
}
.art-note {
  margin: 0 0 18px; padding: 13px 16px; border-radius: 12px;
  background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 26%, transparent);
}
.art-fig { margin: 0 0 20px; }
.art-fig img { display: block; width: 100%; border-radius: 14px; background: var(--surface2); }
.art-fig figcaption { color: var(--muted); font-size: 13.5px; margin-top: 7px; text-align: center; }
.art-cta { margin-top: 34px; }

/* ══════════ เพจเฟซบุ๊กบนหน้าแรก (19 ก.ย. 2569 — เจ้าของสั่ง) ══════════
   🔴 กล่องนี้ **ไม่โหลดจนกว่าจะเลื่อนมาถึง** — กล่องเพจของเฟซบุ๊กลากสคริปต์/คุกกี้ของเฟซบุ๊ก
   มาด้วยหลายร้อย KB ถ้าโหลดพร้อมหน้าแรกจะทำให้ "หน้าแรกช้าลงเพราะของที่คนส่วนใหญ่ไม่ได้เลื่อนไปดู"
   ซึ่งตรงข้ามกับที่เจ้าของสั่งไว้ว่าเน้นความเร็ว (ตัวโหลดอยู่ใน public/js/site/home.js) */
.fb-embed { position: relative; min-height: 260px; border-radius: 14px; overflow: hidden; background: var(--surface2); }
.fb-embed iframe { display: block; width: 100%; height: 500px; border: 0; }
.fb-embed-ph { display: grid; place-items: center; min-height: 260px; color: var(--muted); font-size: 14px; }

/* 🔴 20 ก.ย. 2569 — ชั้นสำรองใต้กล่องเพจ (เจ้าของส่งลิงก์เพจจริงมาให้ใส่)
   ปลั๊กอินเพจของเฟซบุ๊ก **ไม่แสดงอะไรเลยถ้าคนดูไม่ได้ล็อกอินเฟซบุ๊กในเบราว์เซอร์นั้น**
   (ยิงจริงแล้วเห็นมันเด้งไป /login/ แล้วโดน X-Frame-Options ของเฟซบุ๊กเองบล็อก) —
   ลูกค้าร้านนี้ส่วนใหญ่ใช้แอปเฟซบุ๊ก ไม่ได้ล็อกอินในเบราว์เซอร์ = เห็นกรอบเทาว่าง 500px
   กลางหน้าแรก ซึ่งขัดกับกติกาของโปรเจกต์เองที่ว่า "ไม่มีข้อมูล = ไม่มีบล็อก ไม่ใช่กรอบว่าง"
   · **วัดจริงก่อนแก้: กล่องที่ไม่ยอมแสดงนั้นโปร่งใสทั้งแผ่น** (วางสีไว้ข้างหลังแล้วทะลุออกมา
   ครบทุกพิกเซล) จึงวางการ์ดสำรองไว้ข้างหลังแล้วทับด้วย iframe — เฟซบุ๊กโหลดได้ก็บังไปเอง
   ไม่ต้องเดา ไม่ต้องรอ timeout และไม่มีทางกะพริบสลับกัน
   · ปุ่ม "เปิดเพจในเฟซบุ๊ก" ตัวจริงอยู่ใต้กล่องอยู่แล้ว การ์ดนี้จึงเป็นแค่ภาพ (aria-hidden) */
/* 132px = ความสูงจริงของกล่องเพจแบบไม่มีแท็บ (ต้องตรงกับ FB_H ใน site/home.js)
   · max-width 500 เพราะปลั๊กอินกว้างได้สูงสุด 500px — ปล่อยให้กล่องกว้างกว่านั้น
     บนจอคอม = การ์ดสำรองข้างหลังโผล่ออกมาทางขวา */
.fb-embed[data-loaded="1"] { height: 132px; min-height: 0; max-width: 500px; }
.fb-embed[data-loaded="1"] iframe { position: absolute; inset: 0; height: 100%; }
.fb-embed-fb { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  gap: 10px; padding: 14px; text-align: left; background: var(--surface); }
.fb-embed-fb b { font-size: 15px; }

.fb-embed-mark { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: #1877F2; color: #fff; font: 700 22px/1 Georgia, serif; }

/* ══ ตารางราคาประมาณการบนฟอร์มสั่งทำ (21 ก.ย. 2569) ══
   เจ้าของทัก "ราคาโดยประมาณ ตอนแยกประเภท มันดูยาก ไม่สวย ทำให้ใหม่หน่อยใน ตาราง"
   เดิมเป็นข้อความยาวต่อกันบรรทัดเดียว "เสื้อผู้ใหญ่ XL × 10 × 250.00 = 2,500.00" สีเทา 13.5px
   — ตัวเลข 3 ก้อนปนอยู่ในประโยคเดียวโดยไม่มีอะไรบอกว่าก้อนไหนคืออะไร และพอมีหลายบรรทัด
   ตัวเลขไม่ตรงแนวกันสักคอลัมน์ ทำให้เทียบด้วยสายตาไม่ได้เลย (บนมือถือยังตัดบรรทัดกลางประโยคอีก)
   🔴 **ตัวเลขเงินทุกคอลัมน์ชิดขวา + ใช้เลขความกว้างเท่ากัน** ไม่งั้นหลักไม่ตรงกันแล้วอ่านไม่ออก
      ว่าอันไหนมากกว่า (กติกาข้อ 17 บอกแค่รูปแบบตัวเลข ไม่ได้บอกเรื่องการจัดแนว — เพิ่มตรงนี้) */
.q-box { background: var(--surface2); border-radius: 12px; padding: 13px; }
/* 🔴 ทั้ง 2 ฝั่งต้อง `nowrap` — ที่ 320px คำว่า "ราคาประมาณการ" ถูกตัดกลางคำเป็น "ราคาประมาณ/การ"
   (บทเรียนเดิม 20 ก.ย. 2569: คำไทยที่ตัดกลางคำอ่านยากกว่ากล่องที่แน่นนิดหน่อยมาก) */
.q-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  font-size: 16px; font-weight: 700; margin-bottom: 10px; }
.q-head > span { white-space: nowrap; }
.q-head .num { font-size: 18px; }
@media (max-width: 360px) { .q-head { font-size: 14.5px; } .q-head .num { font-size: 16px; } }

.q-tb { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.q-tb th, .q-tb td { padding: 8px 5px; text-align: left; }
.q-tb thead th { font-size: 12px; font-weight: 600; color: var(--muted); padding-bottom: 5px;
  border-bottom: 1px solid var(--border); }
.q-tb .num { text-align: right; white-space: nowrap; }
/* กว้างเต็มการ์ด (เจ้าของสั่ง) — แบ่งคอลัมน์ไว้ ไม่งั้นจอคอมจะได้ช่อง "ประเภท" กว้างครึ่งจอ
   โดยมีคำเดียวลอยอยู่กลาง ส่วนตัวเลขไปกองอยู่ขอบขวาสุด */
.q-tb thead th:nth-child(1), .q-tb .q-type { width: 26%; }
.q-tb thead th:nth-child(3), .q-tb td:nth-child(3) { width: 14%; min-width: 54px; }
.q-tb thead th:nth-child(4), .q-tb td:nth-child(4) { width: 20%; min-width: 82px; }

/* 🔴 ช่องประเภท = เซลล์เดียวกินหลายแถว (rowspan) จัดกลางทั้งแนวตั้งและแนวนอน (เจ้าของสั่ง)
   เส้นขวาของช่องนี้คือสิ่งที่บอกสายตาว่า "ทุกแถวทางขวาเป็นของประเภทนี้" */
.q-tb .q-type { vertical-align: middle; text-align: center; padding: 8px 8px;
  border-right: 1px solid var(--border); }
.q-type-name { display: block; font-weight: 700; line-height: 1.35; }
.q-type-unit { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 400;
  color: var(--muted); line-height: 1.3; }
.q-nosize { color: var(--muted); }

/* เส้นคั่นบาง ๆ ระหว่างไซซ์ในกลุ่มเดียวกัน — ใช้ `tr + tr` เพื่อไม่ให้แถวแรกของกลุ่มมีเส้นซ้ำ
   กับเส้นของแถบคั่นกลุ่มที่อยู่เหนือมัน */
.q-tb tbody tr + tr td { border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent); }
.q-tb .q-sum td { color: var(--muted); font-size: 13px; }

/* 🔴 แถบคั่น "ระหว่างกลุ่ม" (เจ้าของสั่ง "อยากให้มีอะไรมาขั้นกลาง เพื่อให้แยกรายการออกได้ตอนดู")
   เส้นหนา + ที่ว่างข้างล่าง = ตาเห็นว่าจบกลุ่มหนึ่งแล้วขึ้นกลุ่มใหม่ ไม่ใช่แค่แถวถัดไป */
.q-tb .q-sep td { padding: 0; height: 15px; border-top: 2px solid var(--border); }

.q-tb tfoot td { border-top: 2px solid var(--border); padding-top: 10px; font-weight: 700; font-size: 14.5px; }
.q-note { margin-top: 10px; }

@media (max-width: 400px) {
  .q-tb { font-size: 13px; }
  .q-tb th, .q-tb td { padding: 7px 3px; }
  .q-tb .q-type { padding: 7px 5px; }
  .q-tb thead th:nth-child(3), .q-tb td:nth-child(3) { width: 44px; }
  .q-tb thead th:nth-child(4), .q-tb td:nth-child(4) { width: 74px; }
  .q-type-unit { font-size: 11px; }
  /* จอแคบ: ตัดคำว่า "บาท" ออกจากบรรทัดราคาต่อตัว ไม่งั้นมันตกไปอยู่บรรทัดใหม่ตัวเดียว
     (ยังอ่านรู้เรื่อง เพราะหัวกล่องบอก "บาท" อยู่แล้ว และทั้งตารางเป็นเงินทั้งหมด) */
  .q-baht { display: none; }
}

/* ข้อความบอกว่าช่องไหนกรอกผิด — โผล่ใต้ช่องนั้นตอนพิมพ์/ตอนออกจากช่อง (21 ก.ย. 2569)
   🔴 ไม่ทำเป็นกรอบแดงรอบช่องอย่างเดียว เพราะสีบอกได้แค่ "ผิด" ไม่ได้บอก "ผิดยังไง"
      และคนตาบอดสีแยกไม่ออกเลย · ข้อความจึงเป็นตัวหลัก สีเป็นตัวช่วย */
.f-err { margin-top: 5px; font-size: 12.5px; line-height: 1.4; color: #dc2626; }
.inp[aria-invalid="true"] { border-color: #dc2626; }

/* ---- ตารางไซซ์บนหน้าแรก ---- */
.size-tb { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.size-tb th, .size-tb td { padding: 9px 10px; border-bottom: 1px solid var(--border); text-align: left; }
.size-tb th { color: var(--muted); font-weight: 600; font-size: 13px; }
.size-tb td.num, .size-tb th.num { text-align: right; }

/* ══════════════════════════════════════════════════════════════════════════
   20 ก.ย. 2569 — เจ้าของทัก 2 เรื่องหลังลองเปิดหน้าลูกค้าบนมือถือจริง:
     (1) "ตอนเลือกสั่งสินค้า ตอนที่แสดงใน mobile ตัวหนังสือมันขึ้นบรรทัดใหม่ไม่สวยเลยนะ"
     (2) "background ของ content ตรงกลาง มันขาวเลย ไม่มีลูกเล่นอะไรเลย ลูกเล่นควรเยอะกว่านี้หน่อยนะ"
   ══════════════════════════════════════════════════════════════════════════ */

/* ───────── (1) การตัดบรรทัดของข้อความ ─────────
   สิ่งที่วัดได้จริงก่อนแก้ที่ 390px (นับบรรทัดด้วย Range.getClientRects ของ text node):
     · ปุ่มเลือกไซซ์เหลือที่ให้คำแค่ 38px → "ไม่ระบุ" แตกเป็น "ไม่" / "ระบุ" กลางคำ
     · ท้ายเว็บ "…มีหน้าร้านจริง" เหลือคำเดียวลอยบรรทัดล่าง (orphan)
   🔴 `text-wrap: pretty` = เบราว์เซอร์จัดให้บรรทัดสุดท้ายไม่เหลือคำโดด ๆ
      `text-wrap: balance` = เกลี่ยหัวข้อสั้น ๆ ให้ทุกบรรทัดยาวใกล้กัน
      ทั้งคู่เป็นการ "ขอ" ไม่ใช่การบังคับ — เบราว์เซอร์เก่าที่ไม่รู้จักจะข้ามไปเฉย ๆ
      จึงต้องมีทางกันพลาดตัวจริงคู่กันเสมอ (nowrap + ellipsis ของ .pick-label ข้างล่าง) */
p, li, .lead, .hint, .art-card-ex, .step, .trust span, figcaption, .foot div { text-wrap: pretty; }
h1, h2, h3, .pcard-name, .art-card-title, .sec-head h2 { text-wrap: balance; }

/* ปุ่มเปิดแผ่นเลือก (ประเภท/ไซซ์/แบบคอ/ผ้า/สี) — เดิมเป็น inline style ในไฟล์ custom.js
   🔴 ชื่อที่เลือกไว้ต้องตัดท้ายด้วย … เสมอ ห้ามปล่อยให้ขึ้นบรรทัดใหม่ — ปุ่มนี้อยู่ในคอลัมน์แคบ
      ที่กว้างไม่แน่นอน (ขึ้นกับความกว้างจอ) ถ้าปล่อยตามธรรมชาติจะสูงไม่เท่ากันทั้งแถว */
.pick { display: flex; align-items: center; gap: 10px; text-align: left; min-height: 52px; width: 100%;
  container-type: inline-size; }
.pick-thumb { width: 34px; height: 34px; flex: none; border-radius: 9px; overflow: hidden; background: var(--surface2); }
.pick-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pick-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.pick-label.ph { font-weight: 400; color: var(--muted); }
.pick-cue { color: var(--muted); flex: none; white-space: nowrap; font-weight: 400; }
/* คำว่า "เลือก" หายเฉพาะตอนที่ปุ่มนั้นแคบจริง ๆ — วัดจากความกว้างของปุ่มเอง ไม่ใช่ความกว้างจอ
   (ปุ่มตัวเดียวกันกว้างไม่เท่ากันในแต่ละหน้า/แต่ละคอลัมน์)
   🔴 ตัวปุ่มเป็น container เอง ไม่ใช่ `.f` ที่ครอบอยู่ — `container-type: inline-size` สั่ง
      "คำนวณความกว้างโดยไม่ดูเนื้อใน" ซึ่งปลอดภัยกับปุ่มที่ `width:100%` (ความกว้างมาจากพ่อ)
      แต่ถ้าไปใส่ที่ `.f` ซึ่งมีใช้อีกหลายหน้าในบริบทที่ความกว้างมาจากเนื้อใน ช่องจะยุบเหลือ 0
   · เบราว์เซอร์ที่ไม่รองรับ container query จะเห็นคำนี้ตลอด ซึ่งยังอ่านออกอยู่
     เพราะชื่อถูกตัดท้ายด้วย … ไม่ใช่ตัดขึ้นบรรทัดใหม่ */
@container (max-width: 210px) { .pick-cue-w { display: none; } }

/* แถวรายการสินค้าในฟอร์มสั่งทำ — กริดแทน flex-wrap
   มือถือ: ประเภทเต็มแถวบน · ไซซ์/จำนวน/ลบ แถวล่าง   จอกว้าง: แถวเดียวจบ */
.line-row { display: grid; gap: 10px 8px; align-items: end; grid-template-columns: 1fr 1fr auto; }
.line-row .line-type, .line-row .line-fabric { grid-column: 1 / -1; }
.line-del { min-height: 48px; padding: 0 14px; }
@media (min-width: 640px) {
  .line-row { grid-template-columns: 1.3fr 1.3fr 1fr .65fr auto; }
  .line-row .line-type, .line-row .line-fabric { grid-column: auto; }
}

/* ───────── (2) ลูกเล่นของพื้นหลังและเนื้อหา ─────────
   🔴 ทุกอย่างในบล็อกนี้เป็น gradient ของ CSS ล้วน **ไม่มีไฟล์รูปเพิ่มสักไฟล์เดียว**
      เพราะงานรอบก่อนเพิ่งลดหน้าแรกจาก 2.74 MB เหลือ 0.79 MB ตามที่เจ้าของสั่งว่าเน้นความเร็ว
      การใส่ลูกเล่นด้วยรูปพื้นหลังจะกินคืนที่เพิ่งลดไปทั้งหมดในไฟล์เดียว */

/* พื้นหลังหน้าเว็บ: ครีมอุ่น + แสงส้ม/อำพันจาง ๆ มุมบน + เม็ดจุดบาง ๆ ทั้งหน้า
   (จุดมีไว้ให้พื้นที่ว่างยาว ๆ ไม่เป็นแผ่นเรียบตาย ไม่ใช่ให้มองเห็นชัด — อยู่ที่ ~4% opacity) */
body {
  background-color: var(--bg);
  background-image:
    radial-gradient(880px 520px at 96% -6%, color-mix(in srgb, var(--brand-2) 22%, transparent), transparent 68%),
    radial-gradient(720px 480px at -10% 26%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 70%),
    radial-gradient(color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1.3px);
  background-size: auto, auto, 30px 30px;
  background-repeat: no-repeat, no-repeat, repeat;
}

/* แถบเนื้อหาสลับสี — ทำ full-bleed ด้วย box-shadow + clip-path ไม่ใช่ 100vw
   🔴 `width:100vw` นับความกว้างแถบเลื่อนเข้าไปด้วย = หน้าล้นแนวนอนบนจอคอมทันที
      (ข้อทดสอบ "หน้าแรกไม่ล้นแนวนอน" จับได้แน่นอน) ส่วนวิธีนี้ไม่แตะ layout เลยสักพิกเซล */
.band { --band-bg: color-mix(in srgb, var(--brand) 7%, var(--surface));
  position: relative; background: var(--band-bg);
  box-shadow: 0 0 0 100vmax var(--band-bg);
  /* clip-path ตัด "ตอนวาด" ให้เหลือเฉพาะแนวตั้งของแถบ (ไม่งั้นเงา 100vmax จะทาทับทั้งหน้า)
     🔴 แต่มัน **ไม่ได้ตัดพื้นที่ที่เลื่อนได้** — ก้อนแสงที่ยื่นเลยขอบขวายังดันหน้าให้ล้มแนวนอน
        (วัดจริงรอบแรก: ล้น 23px ที่จอ 390 · 46px ที่ 768) ต้องมี overflow:hidden คู่กันเสมอ */
  clip-path: inset(0 -100vmax); overflow: hidden; }
/* ก้อนแสงจาง ๆ ในแถบ (ทิศเดียวกับไล่สีในโลโก้) — ให้แต่ละแถบไม่ใช่สี่เหลี่ยมสีเรียบ
   `clip-path` ของ .band ตัดส่วนที่ล้นออกให้เอง จึงยื่นเลยขอบได้โดยไม่ทำให้หน้าล้มแนวนอน */
.band::before {
  content: ''; position: absolute; right: -6%; top: -30%; width: 42%; aspect-ratio: 1.4;
  background: var(--brand-grad); opacity: .09; filter: blur(14px);
  border-radius: 46% 54% 40% 60%; pointer-events: none;
}
.band > * { position: relative; }
.band-line { border-top: 1px solid color-mix(in srgb, var(--brand) 14%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--brand) 14%, transparent); }

/* หัวข้อของแต่ละบล็อก — ขีดไล่สีสั้น ๆ เหนือหัวข้อ แทนที่จะเป็นตัวหนังสือลอย ๆ */
.section > h2 { position: relative; padding-top: 16px; }
.section > h2::before {
  content: ''; position: absolute; top: 0; left: 0; width: 44px; height: 5px; border-radius: 999px;
  background: var(--brand-grad);
}

/* การ์ด: ยกขึ้นเล็กน้อยตอนชี้ + เส้นไล่สีบาง ๆ โผล่ที่ขอบบน
   ห่อไว้ใน (hover:hover) เพราะบนจอสัมผัส :hover ค้างหลังแตะ (กติกาเดียวกับ row-hv ของหลังร้าน) */
.card { position: relative; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
@media (hover: hover) and (pointer: fine) {
  .card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgb(36 32 33/.06), 0 14px 30px rgb(36 32 33/.10); }
  .gal-item:hover img, .card img:hover { transform: scale(1.03); }
}
.card img { transition: transform .35s ease; }
.gal-item img { transition: transform .35s ease; }

/* ตารางราคา/ไซซ์ — แถวสลับสี + ไฮไลต์แถวที่ชี้อยู่ (ตารางยาว ๆ ไล่สายตาง่ายขึ้นมาก) */
/* 🔴 ตารางราคา **ไม่ใช้แถบสลับสีแล้ว** (21 ก.ย. 2569) — พอช่องประเภทเป็นเซลล์เดียวที่พาดหลายแถว
   มันจะได้สีพื้นของแถวแรกอยู่สีเดียว ขณะที่แถวข้าง ๆ สลับสีไปเรื่อย = ดูเหมือนตารางวาดพลาด
   · หน้าที่ "ไล่สายตาตามแถว" ตกเป็นของเส้นคั่นขั้นราคา + แถบคั่นกลุ่ม ซึ่งบอกโครงสร้างได้ตรงกว่า */
.size-tb tbody tr:nth-child(odd) {
  background: color-mix(in srgb, var(--brand) 3%, transparent);
}
@media (hover: hover) and (pointer: fine) {
  table.price tbody tr:hover td { background: var(--brand-soft); }
  .size-tb tbody tr:hover { background: var(--brand-soft); }
}
table.price thead th, .size-tb thead th { border-bottom-width: 2px; }

/* ตัวเลขขั้นตอนของบล็อก "สั่งทำยังไง" — วงกลมไล่สีแบรนด์ แทนตัวเลขสีส้มลอย ๆ */
.how-n {
  width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  background: var(--brand-grad); color: #fff; font-weight: 700; font-size: 18px;
  box-shadow: 0 6px 14px color-mix(in srgb, var(--brand) 32%, transparent);
}

/* การ์ดปิดท้าย (เช็คสถานะงาน) — พื้นเข้มแบบเดียวกับ hero เพื่อปิดหน้าให้จบเป็นก้อนเดียวกับหัวเว็บ */
.card-ink {
  background: var(--ink); color: #fff; border-color: rgb(255 255 255/.12);
  position: relative; overflow: hidden;
}
.card-ink::after {
  content: ''; position: absolute; right: -12%; top: -60%; width: 46%; aspect-ratio: 1;
  background: var(--brand-grad); opacity: .2; filter: blur(10px);
  border-radius: 46% 54% 40% 60%; pointer-events: none;
}
.card-ink > * { position: relative; }
.card-ink h2 { color: #fff; }
.card-ink .lead, .card-ink .hint { color: #cfc7c3; }
.card-ink .btn-ghost { background: rgb(255 255 255/.10); color: #fff; border-color: rgb(255 255 255/.26); }
.card-ink .contact-chip { background: rgb(255 255 255/.08); border-color: rgb(255 255 255/.22); color: #fff; }
.card-ink a.contact-chip { border-color: color-mix(in srgb, var(--brand) 70%, #fff); color: #ffd7bd; }

/* แถบความน่าเชื่อถือใต้ hero — เป็นชิปมีกรอบ ไม่ใช่ข้อความ 3 ก้อนเรียงกันเฉย ๆ */
.trust span {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px;
  background: rgb(255 255 255/.07); border: 1px solid rgb(255 255 255/.14);
}
.trust { gap: 9px; }

/* ลายทแยงจาง ๆ ใน hero — ให้พื้นเข้มมีผิวสัมผัส ไม่ใช่สีเรียบทั้งผืน */
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(115deg, rgb(255 255 255/.035) 0 2px, transparent 2px 9px);
}

/* รอยต่อระหว่าง hero กับเนื้อหา — ไล่จากเข้มลงมาจางแทนเส้นตัดตรง ๆ */
.hero { margin-bottom: 0; }
.hero-fade { height: clamp(18px, 3vw, 30px);
  background: linear-gradient(var(--ink), color-mix(in srgb, var(--ink) 0%, transparent)); }

/* บล็อกที่ยังไม่มีข้อมูล (บทความ/ผลงาน/ตารางไซซ์ ที่ร้านยังไม่ได้ใส่) ต้องไม่กินที่เลย
   — เดิมกินระยะบน+ล่างของ .section รวม ~112px เป็นช่องว่างเปล่าคาอยู่กลางหน้า 2-3 จุด
   (เห็นชัดมากตอนถ่ายจอเต็มหน้าจอคอม) */
.section:empty { padding: 0; }

/* ปุ่มหลักเป็นไล่สีแบรนด์ทั้งเว็บ (เดิมเป็นสีส้มแบนตัวเดียว เฉพาะบน hero เท่านั้นที่ไล่สี) */
.btn-main { background: var(--brand-grad); box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 30%, transparent); }
@media (hover: hover) and (pointer: fine) {
  .btn-main:hover { filter: brightness(1.05); }
  .btn-ghost:hover { border-color: var(--brand); color: var(--brand); }
  .contact-chip:hover { border-color: var(--brand); }
  .chip:hover { border-color: var(--brand); }
}
.btn:active { transform: translateY(1px); }

/* เส้นไล่สีบาง ๆ ที่ขอบบนของการ์ด โผล่ตอนเอาเมาส์ชี้ (บอกว่าการ์ดนี้กดได้/กำลังโฟกัสอยู่) */
.card::before, .pcard::before, .art-card::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--brand-grad); opacity: 0; transition: opacity .16s ease;
  border-radius: 16px 16px 0 0; pointer-events: none;
}
.pcard, .art-card { position: relative; }
@media (hover: hover) and (pointer: fine) {
  .card:hover::before, .pcard:hover::before, .art-card:hover::before { opacity: 1; }
  .art-card:hover, .pcard:hover { transform: translateY(-2px); }
}
.art-card, .pcard { transition: transform .16s ease, border-color .16s ease; }

/* การ์ด "เน้น" — ใช้กับกล่องติดต่อร้าน/เวลาผลิต ที่เป็นข้อมูลสำคัญแต่เดิมหน้าตาเหมือนการ์ดอื่นหมด */
.card-accent {
  background: linear-gradient(180deg, var(--brand-soft), var(--surface) 62%);
  border-color: color-mix(in srgb, var(--brand) 24%, transparent);
}
.card-accent::after {
  content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px;
  border-radius: 0 999px 999px 0; background: var(--brand-grad);
}

/* ชื่อใต้รูปของการ์ดตัวเลือก (แบบคอ/ประเภทสินค้า) — เดิมเป็นตัวหนังสือบนพื้นขาวเปล่า ๆ */
.opt-cap { display: block; padding: 10px 12px; font-weight: 600; text-align: center;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--brand) 6%, transparent)); }

/* เส้นไล่สีคั่นก่อนท้ายเว็บ */
.foot { position: relative; }
.foot::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--brand) 55%, transparent), transparent); }

/* การ์ดบทความบนมือถือ = แนวนอน (รูปซ้าย ข้อความขวา)
   🔴 เหตุผลที่วัดได้: การ์ดแนวตั้งรูป 16:9 เต็มความกว้าง ใบละ ~340px · 5 ใบบนหน้าแรก = ยาวเพิ่ม
   ~1,700px ซึ่งขัดกับงานรอบก่อนที่เพิ่งลดความยาวหน้าแรกลงตามที่เจ้าของสั่งว่าเน้นความเร็ว
   · แนวนอนเหลือใบละ ~110px อ่านชื่อเรื่องได้ครบเหมือนเดิม และยังเห็นรูปว่าเป็นเรื่องอะไร */
@media (max-width: 719px) {
  .art-card { flex-direction: row; align-items: stretch; }
  .art-card img, .art-card-nocover { width: 38%; flex: none; aspect-ratio: 1; height: auto; }
  .art-card-body { flex: 1; min-width: 0; justify-content: center; padding: 11px 13px; gap: 4px; }
  .art-card-title { font-size: 15px; }
  /* คำโปรยเหลือ 2 บรรทัด — 3 บรรทัดในกล่องแคบทำให้การ์ดสูงกว่ารูปจนดูไม่สมดุล */
  .art-card-ex { -webkit-line-clamp: 2; font-size: 13px; }
}

/* ══════════ พื้นหลัง hero ขยับได้ (เจ้าของสั่ง 20 ก.ย. 2569) ══════════
   "อยากให้พื้นหลังนั้นมี animation ขยับในพื้นหลังด้วยนะ ของ header จะได้สวย ๆ"

   🔴 ขยับด้วย `transform` กับ `opacity` เท่านั้น — 2 ตัวนี้เบราว์เซอร์ย้ายภาพที่วาดไว้แล้วได้เลย
      ไม่ต้องวาดใหม่ทุกเฟรม · ถ้าไปขยับ background-position / width / filter คือสั่งให้วาดใหม่
      ทั้งบล็อกทุกเฟรม ซึ่งจะกินเครื่องของลูกค้าฟรี ๆ ตลอดเวลาที่เปิดหน้าแรกค้างไว้
   🔴 ทุกตัวเป็น `alternate` (ไป-กลับ) ไม่ใช่วนกลับไปเริ่มใหม่ — ลายทแยงกับก้อนแสงที่วิ่งวนจะมี
      จังหวะ "กระตุก" ตอนวนรอบ ซึ่งเห็นชัดมากบนพื้นเข้ม
   🔴 คนละความยาวรอบกันทั้ง 3 ชั้น (26 / 34 / 30 วิ) — ถ้าเท่ากันหรือหารกันลงตัว ภาพรวมจะซ้ำ
      เป็นจังหวะเดิมจนดูเป็นลูป · เลขที่หารไม่ลงตัวทำให้ดูไม่ซ้ำเลยในทางปฏิบัติ */
/* 🔴 ทิศทางของก้อนแสงบนต้องลอย **ออกจากหัวข้อ** (ไป-ลง ทางขวา) ไม่ใช่เข้าหาหัวข้อ
   ลองแบบเข้าหาก่อนแล้วดูที่จังหวะสว่างสุด (เลื่อนอนิเมชันไปที่ 100% แทนการนั่งรอ 26 วิ):
   พื้นหลังตรงคำว่า "ชุดกีฬาทีม" กลายเป็นน้ำตาลสว่าง แล้วตัวอักษรไล่สีส้มบนพื้นนั้นอ่านยากลง
   — ตัวหนังสือบนหน้าแรกสำคัญกว่าลูกเล่นเสมอ */
@keyframes heroBlob {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(6%, 10%, 0) scale(1.12); }
}
@keyframes heroOrb {
  from { transform: translate3d(0, 0, 0) scale(1); opacity: .09; }
  to   { transform: translate3d(10%, -12%, 0) scale(1.25); opacity: .16; }
}
@keyframes heroStripe {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-46px, 0, 0); }
}
.hero::after { animation: heroBlob 26s ease-in-out infinite alternate; will-change: transform; }
.hero::before { animation: heroStripe 30s ease-in-out infinite alternate; will-change: transform; }

/* ก้อนแสงที่สอง — มีไว้ให้พื้นหลังดู "มีชั้น" ไม่ใช่ก้อนเดียวเลื่อนไปมา
   ต้องเจาะจง `.hero .hero-orb` เพราะ `.hero > *` ตั้ง position:relative ไว้ (ความเฉพาะเจาะจงเท่ากัน
   ตัวที่อยู่ท้ายไฟล์จะชนะ ซึ่งเป็นการพึ่งลำดับบรรทัดที่เปราะเกินไป) */
.hero .hero-orb {
  position: absolute; left: -12%; bottom: -46%; width: 52%; aspect-ratio: 1;
  background: radial-gradient(circle at 40% 40%, var(--brand-2), transparent 68%);
  opacity: .1; border-radius: 50%; pointer-events: none;
  animation: heroOrb 34s ease-in-out infinite alternate; will-change: transform, opacity;
}

/* 🔴 เครื่องที่ตั้งค่าว่า "ลดการเคลื่อนไหว" ต้องหยุดสนิท — คนที่เปิดค่านี้ส่วนใหญ่เปิดเพราะ
   การเคลื่อนไหวทำให้เวียนหัวจริง ๆ ไม่ใช่เรื่องรสนิยม (และหน้าแรกคือหน้าที่ทุกคนต้องผ่าน) */
@media (prefers-reduced-motion: reduce) {
  .hero::after, .hero::before, .hero .hero-orb { animation: none; }
}

.fabric-choice-detail { display:flex; flex-wrap:wrap; gap:14px; padding:14px; border:1px solid var(--border); border-radius:12px; }
.fabric-choice-detail img { width:120px; height:120px; object-fit:cover; border-radius:10px; }
.fabric-choice-detail div { flex:1; min-width:min(180px,100%); }
.fabric-choice-detail p { margin:8px 0 0; overflow-wrap:anywhere; }
.size-help { border:1px solid var(--border); border-radius:12px; padding:12px; }
.size-help summary { cursor:pointer; min-height:44px; align-content:center; font-weight:600; }
.size-help img { display:block; max-width:100%; width:340px; margin:12px auto; }
.size-help p { line-height:1.7; }