/* Kangaroo Mommy — Luxe Mockup
   โครงเลย์เอาต์อ้างอิง sensai-cosmetics.com/global/en (มินิมอล เรียบหรู เว้นที่เยอะ มุมคม)
   สีใช้พาเลตต์ CI ของแบรนด์ (โรส-โทป) แทนทองของ Sensai
   ตัวอักษร: Montserrat = อังกฤษทั้งเว็บ / Noto Sans Thai = ไทย (เนยเปลี่ยน 2026-09-07 จาก Cormorant+Jost+IBM Plex) */

/* ---------- กันกระพริบตอนโหลด (แอล 10 ก.ย. 69 "ภาษาอังกฤษกระพริบ") ----------
   หน้าเคยวาดข้อความไทยจากไฟล์ก่อน แล้วสคริปต์ค่อยสลับเป็นอังกฤษ + หลังบ้านค่อยทับข้อความ ⇒ เห็นวูบ
   จึงซ่อนเนื้อหาไว้จน app.js เติมภาษา/ข้อความเสร็จแล้วติด html.km-ready
   กันค้าง: ถ้าสคริปต์ไม่ทำงาน (ปิด JS / ไฟล์พัง) CSS โชว์เองที่ 2.5 วิ */
html:not(.km-ready) body { visibility: hidden; animation: km-reveal 0s 2.5s forwards; }
@keyframes km-reveal { to { visibility: visible; } }
html.km-ed body { visibility: visible; animation: none; }

/* ---------- ฟอนต์สำรองที่กว้างเท่าฟอนต์จริง (กันข้อความขยับตอนฟอนต์มาถึง) ----------
   ฟอนต์ Google มาถึงหลังเบราว์เซอร์วาดหน้าครั้งแรกเสมอ (คนละคำขอกับ CSS)
   ระหว่างรอ เบราว์เซอร์ใช้ฟอนต์ระบบซึ่ง "แคบกว่า Montserrat 13.6%"
   พอของจริงมาถึง ข้อความกว้างขึ้น บรรทัดขยับ ปุ่มตกบรรทัด = หน้าเด้ง
   วัดเองในเบราว์เซอร์ 9 ก.ย. 69 ที่ 100px: Montserrat/Arial = 1.063 · Montserrat(ชุดไทย)/Tahoma = 0.992
   จึงยืด/หดฟอนต์สำรองให้กว้างเท่ากัน ⇒ จำนวนบรรทัดเท่าเดิมตั้งแต่วินาทีแรก
   ⚠️ ตัวเลขนี้ผูกกับ Arial/Tahoma ที่ระบุใน src ถ้าเปลี่ยนฟอนต์สำรอง ต้องวัดใหม่ */
@font-face {
  font-family: 'Montserrat-fb';
  src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans'), local('Roboto');
  size-adjust: 106.3%;
}
@font-face {
  font-family: 'NotoThai-fb';
  src: local('Tahoma'), local('Leelawadee UI'), local('Sarabun'), local('Noto Sans Thai');
  size-adjust: 94%;
}
:root {
  --paper: #ffffff;
  --cream: #FAF7F4;      /* พื้นการ์ดสินค้า / แถบสลับ */
  --cream-2: #F4EDE7;
  --ink: #241A15;        /* ตัวอักษรหลัก */
  --ink-soft: #6E5C51;   /* คำอธิบาย */
  --accent: #96705E;     /* โรส-โทป primary (แทนทอง Sensai) */
  --accent-d: #7A5847;
  --brand: #A88478;
  --line: #E4D9D1;
  --dark: #241A15;       /* แถบดำของ Sensai → น้ำตาลเข้มเกือบดำ */
  --hd: 78px;
  --wrap: 1560px;
  --gut: clamp(20px, 3.2vw, 44px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--hd); }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Montserrat', 'Noto Sans Thai', 'Montserrat-fb', 'NotoThai-fb', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }

.wrap { width: min(100% - (var(--gut) * 2), var(--wrap)); margin-inline: auto; }
.bleed { width: min(100% - (var(--gut) * 2), 1880px); margin-inline: auto; }

/* ============ ตัวอักษรระดับ display ============ */
.serif {
  font-family: 'Montserrat', 'Noto Sans Thai', 'Montserrat-fb', 'NotoThai-fb', system-ui, sans-serif;
  font-weight: 300;
  letter-spacing: .005em;
}

/* ป้ายหมวดเล็กเหนือหัวข้อ (PRODUCTS / OUR STORY / FEATURED LINES) */
.eyebrow {
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 14px;
}
.eyebrow.on-dark { color: rgba(255,255,255,.72); }

.h-display {
  font-family: 'Montserrat', 'Noto Sans Thai', 'Montserrat-fb', 'NotoThai-fb', system-ui, sans-serif;
  font-weight: 300;
  font-size: clamp(38px, 5vw, 66px);
  line-height: 1.08;
  margin: 0;
  letter-spacing: .005em;
}
.h-sec {
  font-family: 'Montserrat', 'Noto Sans Thai', 'Montserrat-fb', 'NotoThai-fb', system-ui, sans-serif;
  font-weight: 300;
  font-size: clamp(32px, 3.8vw, 52px);
  line-height: 1.12;
  margin: 0;
}
.h-display, .h-sec, .serif, .art-title, .bcard-title, .pdp-title {
  font-variant-numeric: lining-nums; font-feature-settings: 'lnum' 1;
}
/* ที่ว่างหัวส่วน — เพดานเดิม 104/48px ทำให้จอคอมต้องเลื่อนผ่านที่ว่างเยอะกว่าจะถึงของ
   ลดเฉพาะ "เพดาน" (ค่าจอกว้าง) ค่าต่ำสุด 64/30 เท่าเดิม ⇒ มือถือไม่ขยับสักพิกเซล */
.sec-head { text-align: center; padding: clamp(64px, 5.6vw, 84px) 0 clamp(30px, 2.9vw, 40px); }

/* ============ ปุ่ม ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 46px;
  font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase;
  border: 1px solid transparent; transition: .28s ease;
  white-space: nowrap;
}
.btn-solid { background: var(--dark); color: #fff; }
.btn-solid:hover { background: var(--accent-d); }
.btn-ghost { border-color: var(--accent); color: var(--accent); background: transparent; }
.btn-ghost:hover { background: var(--accent); color: #fff; }
.btn-ghost-light { border-color: rgba(255,255,255,.85); color: #fff; }
.btn-ghost-light:hover { background: #fff; color: var(--ink); }
.btn-wide { width: min(100%, 520px); }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-d); }

/* ============ แถบบนสุด (จุดขาย 3 ข้อ) ============ */
.ann { background: var(--dark); color: rgba(255,255,255,.9); overflow: hidden; }
.ann-in {
  display: flex; justify-content: center;
  padding: 9px var(--gut);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
}
.ann-tk { display: flex; gap: 0; }
.ann-tk span { white-space: nowrap; padding: 0 26px; position: relative; }
/* โหมดแก้ไข: แถบเตี้ย ปุ่มของแต่ละรายการเลยต้องเล็กลงและไม่ดันความสูงแถบ */
.km-ed .ann { overflow: visible; }
.km-ed .ann-tk span { outline-offset: -2px; }
.km-ed .ann .km-ibar { top: -2px; left: 2px; padding: 2px; }
.km-ed .ann .km-ibar button { width: 20px; height: 20px; }
.km-ed .ann .km-ibar svg { width: 11px; height: 11px; }
.ann-tk span + span::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 11px; background: rgba(255,255,255,.28);
}
/* ชุดที่สองมีไว้ต่อท้ายตอนเลื่อนวนบนมือถือเท่านั้น */
.ann-dup { display: none; }
/* เห็นเฉพาะในโหมดแก้ไข ตอนลบข้อความออกหมดแล้ว — บอกให้รู้ว่าแถบนี้จะไม่ขึ้นบนเว็บจริง */
.ann-none { opacity: .55; font-style: italic; letter-spacing: .08em; text-transform: none; }

/* ============ หัวเว็บ ============ */
/* กล่องครอบต้องเป็น display:contents ไม่งั้น sticky ของ .hd จะติดอยู่แค่ในกล่อง
   แล้วหัวเว็บจะหายไปทันทีที่เลื่อนพ้นความสูงของกล่อง */
#km-header, #km-footer { display: contents; }

.hd {
  position: sticky; top: 0; z-index: 90;
  height: var(--hd);
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(228,217,209,.7);
}
.hd-in { height: 100%; display: flex; align-items: center; gap: 26px; padding-inline: var(--gut); }
.hd-logo img { height: 44px; width: auto; }
/* เมนูอยู่กึ่งกลางแถบ — โลโก้กับแถบไอคอนสองข้างกินพื้นที่เท่ากัน (flex-basis 0 + grow เท่ากัน) */
.hd-nav { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 1.9vw, 30px); flex: 1 1 0; }
.hd-logo, .hd-ico { flex: 1 1 0; }
.hd-ico { justify-content: flex-end; }
.hd-head {
  font-size: 12.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink); white-space: nowrap; padding: 26px 0; position: relative;
  display: inline-block; cursor: pointer; user-select: none;
}
.hd-head:hover { color: var(--accent); }
.hd-head.on::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 22px;
  height: 1px; background: var(--ink);
}

/* หัวข้อที่มีเมนูย่อย */
.hd-sub { position: relative; display: inline-flex; align-items: center; gap: 3px; }
.hd-subt {
  display: inline-flex; align-items: center; padding: 26px 0 26px 1px;
  color: var(--ink-soft); transition: transform .22s ease;
}
.hd-subt svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.hd-sub.open .hd-subt { transform: rotate(180deg); color: var(--ink); }
.hd-subm {
  position: absolute; top: 100%; left: -22px; z-index: 5;
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: .22s ease;
}
.hd-sub:hover .hd-subm, .hd-sub.open .hd-subm { opacity: 1; visibility: visible; transform: none; }
.hd-subbox {
  display: block; min-width: 268px;
  background: #fff; border: 1px solid var(--line); padding: 10px 0;
  box-shadow: 0 22px 44px -30px rgba(36,26,21,.45);
}
.hd-subbox a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 24px; font-size: 12.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink);
  /* ชื่อหมวดยาว ๆ ต้องอยู่บรรทัดเดียว กล่องเมนูขยายตามชื่อที่ยาวที่สุดเอง (เนยสั่ง 2026-09-07) */
  white-space: nowrap;
}
.hd-subbox a:hover, .hd-subbox a.on { background: var(--cream); color: var(--accent); }
.hd-subbox i { display: inline-flex; opacity: 0; transform: translateX(-4px); transition: .2s ease; }
.hd-subbox a:hover i { opacity: 1; transform: none; }
.hd-subbox svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.5; }

/* แถบไอคอนขวาบน */
.hd-ico { display: flex; align-items: center; gap: clamp(4px, .8vw, 12px); }
.hd-ib {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 9px; color: var(--ink); transition: color .2s ease;
}
.hd-ib:hover { color: var(--accent); }
.hd-ib svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.4; }
.hd-lgc { font-size: 10.5px; font-weight: 500; letter-spacing: .1em; }

/* ป๊อปอัปบัญชี / ตะกร้า */
.hd-pop-wrap { position: relative; }
.hd-pop {
  position: absolute; top: calc(100% + 12px); right: 0; z-index: 6;
  width: 254px; background: #fff; border: 1px solid var(--line); padding: 20px;
  box-shadow: 0 22px 44px -30px rgba(36,26,21,.45);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: .22s ease;
  text-align: left;
}
.hd-pop-wrap.open .hd-pop { opacity: 1; visibility: visible; transform: none; }
.hd-pop b {
  display: block; margin-bottom: 14px; font-size: 12px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
}
.hd-pop span { display: block; margin-top: 12px; font-size: 12.5px; color: var(--ink-soft); }
.hd-pop-btn {
  display: flex; align-items: center; justify-content: center; width: 100%;
  min-height: 42px; margin-bottom: 8px; padding: 0 14px;
  background: var(--dark); color: #fff; border: 1px solid var(--dark);
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; transition: .22s ease;
}
.hd-pop-btn:hover { background: var(--accent-d); border-color: var(--accent-d); }
.hd-pop-btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.hd-pop-btn.ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- ช่องค้นหา (หัวเว็บ + เมนูมือถือ) ---------- */
.hd-pop-search { width: 330px; }
.hd-sf {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); background: #fff;
  font-size: 13.5px; color: var(--ink); border-radius: 0;
}
.hd-sf:focus { outline: 0; border-color: var(--accent); }
.hd-sr { max-height: 340px; overflow: auto; }
.hd-sr:not(:empty) { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 6px; }
.hd-sr-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 4px;
  color: var(--ink); text-decoration: none; transition: background .18s ease;
}
.hd-sr-row:hover { background: #FAF7F4; }
.hd-sr-row img { width: 40px; height: 40px; object-fit: cover; flex: none; background: #F4EFEA; }
.hd-sr-dot { width: 40px; height: 40px; flex: none; background: #F4EFEA; }
.hd-sr-row span { min-width: 0; }
.hd-sr-row b { display: block; margin: 0; font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; line-height: 1.35; }
.hd-sr-row em { display: block; margin-top: 2px; font-size: 11.5px; font-style: normal; color: var(--ink-soft); }
.hd-sr-none { margin: 12px 4px 2px; font-size: 12.5px; color: var(--ink-soft); }
.mnav-search { padding: 14px var(--gut) 4px; }

.burger { display: none; }

/* ============ HERO — แบนเนอร์รูปล้วน (ข้อความฝังในรูป) ============
   ความสูงรางตั้งจาก JS ตามรูปใบที่โชว์อยู่ เพราะเดสก์ท็อป 2.4:1 กับมือถือ 3:4 สัดส่วนต่างกันมาก */
.hero { position: relative; overflow: hidden; }
.hero-track { display: flex; transition: transform .6s ease, height .3s ease; }
.hero-slide { flex: 0 0 100%; display: block; }
.hero-slide img { width: 100%; height: auto; }
.hero-dots { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 3; }
.hero-dots button { width: 34px; height: 2px; background: rgba(36,26,21,.26); }
.hero-dots button.on { background: var(--ink); }

/* ---------- จองพื้นที่ไว้ก่อน JS วาด (กันหน้าเด้ง) ----------
   หัวเว็บกับแบนเนอร์สร้างด้วย JS ทั้งคู่ ตอนเปิดหน้ามันจึงสูง 0
   พอ JS วาดเสร็จ ทุกอย่างใต้มันถูกดันลงทีเดียว ~750px = อาการ "เด้ง/กระพริบ" ที่แอลเจอ 9 ก.ย. 69
   จองที่ไว้เท่าของจริง หน้าจึงนิ่งตั้งแต่วินาทีแรก (วัดด้วย CLS)
   ตัวเลขไม่ได้เดา: แถบประกาศสูง 37px คงที่ทุกจอ · หัวเว็บใช้ตัวแปร --hd (78px / 64px จอเล็ก)
   แบนเนอร์ใช้อัตราส่วนเท่าไฟล์จริง — d-*.jpg 2560x1067 (2.4:1) · m-*.jpg 1440x1920 (3:4)
   สลับที่ 900px ให้ตรงกับ <source media="(max-width: 900px)"> ใน renderHero ของ cms.js */
.km-hold { height: calc(var(--hd) + 37px); }
.hero { aspect-ratio: 12 / 5; }
@media (max-width: 900px) { .hero { aspect-ratio: 3 / 4; } }

/* ============ แถบจุดแข็ง 4 ข้อ (ใต้แบนเนอร์) ============ */
.trust { background: var(--cream); border-bottom: 1px solid var(--line); }
.trust-in {
  display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr);
  max-width: var(--wrap); margin-inline: auto;
  padding: clamp(26px, 3vw, 44px) var(--gut);
}
.trust-i { text-align: center; padding: 0 clamp(8px, 1.6vw, 26px); position: relative; min-width: 0; }
.trust-i + .trust-i::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: var(--line);
}
.trust-ico { display: block; color: var(--accent); margin-bottom: 14px; }
.trust-ico svg { width: clamp(24px, 2.2vw, 32px); height: clamp(24px, 2.2vw, 32px); margin-inline: auto; }
.trust-i b {
  display: block; font-weight: 400; color: var(--ink);
  font-size: clamp(12px, 1.05vw, 14px); letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 8px;
}
.trust-i > span:not(.trust-ico) {
  display: block; font-size: clamp(11.5px, .92vw, 13px); line-height: 1.65;
  color: var(--ink-soft); text-wrap: balance;
}

/* ============ กริดสินค้า (Our Must-haves) ============ */
.pgrid { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 4px; }
.pcard {
  background: var(--cream); position: relative;
  display: flex; flex-direction: column; padding: 22px 22px 40px;
  transition: background .3s ease;
}
.pcard:hover { background: var(--cream-2); }
.pcard-top { display: flex; align-items: center; gap: 10px; min-height: 26px; }
.tag {
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  background: var(--accent); color: #fff; padding: 4px 11px;
}
.tag.best { background: var(--dark); }
.pcard-icons { display: flex; gap: 7px; color: var(--ink-soft); }
.pcard-icons svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.1; }
.pcard-img { flex: 1; display: grid; place-items: center; padding: 26px 10px 22px; min-height: 250px; }
.pcard-img img { max-height: 250px; max-width: 84%; width: auto; object-fit: contain; transition: transform .5s ease; }
/* ภาพที่ยังไม่มีเวอร์ชันตัดพื้นหลัง — ผสมสีให้พื้นขาวจมไปกับพื้นการ์ดสีครีม */
.pcard-img img.onwhite, .pdp-media img.onwhite { mix-blend-mode: multiply; }
.pcard:hover .pcard-img img { transform: scale(1.045); }
.pcard-line { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); text-align: center; }
.pcard-name {
  font-size: 14px; letter-spacing: .05em; text-align: center; margin-top: 5px;
  line-height: 1.5; text-transform: uppercase;
}
.pcard-meta { text-align: center; margin-top: 12px; font-size: 13px; color: var(--ink-soft); letter-spacing: .04em; }
.pcard-price { color: var(--ink); font-size: 15px; letter-spacing: .04em; }
.pcard-price s { color: var(--ink-soft); font-size: 12.5px; margin-left: 8px; opacity: .7; }
/* จอคอม/แท็บเล็ต — แอลทัก 9 ก.ย. 69 ว่ารูปกับการจัดวางใหญ่ไป (ทักสองรอบ)
   รอบแรกวัดที่ 1440 แล้วเห็นแค่ "รูปเล็กในกล่องโล่ง" จึงขยายรูป — ยังไม่ตรงที่แอลรู้สึก
   รอบสองวัดหลายความกว้างถึงเจอตัวจริง: ความสูงการ์ดเป็นค่าตายตัว ไม่ผูกกับจอ
     1366x768 (จอโน้ตบุ๊กที่พบบ่อยสุด) การ์ด 317x501 = 0.65 ของความสูงจอ เห็นแค่ 1.5 แถว
     1920      การ์ดกว้าง 455 แต่รูปค้างเพดาน 300 = ขอบข้างโหว่กลับมาอีก
   แก้ที่ต้นเหตุ: ผูกความสูงกรอบรูปกับ "ความกว้างจอ" (vw) แทนค่าตายตัว
     => 1366 การ์ด ~385px (2 แถวเต็มจอ) · 1920/2560 ~433px · รูปโตตามการ์ดเสมอ ไม่มีที่ว่างค้าง
   และล็อกความกว้างกริดที่ 1560 เท่า --wrap ของทั้งเว็บ ไม่งั้นจอ 2560 การ์ดบานถึง 467px
   ห้ามแตะจอ <=760px ที่นี่ มือถือมีชุดค่าของตัวเองอยู่ในคิวรี่ max-width:760px แล้ว */
@media (min-width: 761px) {
  .pgrid { max-width: var(--wrap); margin-inline: auto; }
  .pcard { padding: 18px 18px 22px; }
  .pcard-img { min-height: clamp(180px, 15.5vw, 260px); padding: 8px 4px; }
  .pcard-img img { max-height: clamp(180px, 15.5vw, 260px); max-width: 94%; }
  .pcard-meta { margin-top: 8px; }
}

/* ============ แถบเต็มจอเข้ม (OUR STORY) ============ */
.band {
  position: relative; min-height: min(66vh, 560px);
  display: grid; place-items: center; text-align: center; overflow: hidden;
}
.band-bg { position: absolute; inset: 0; }
.band-bg img { width: 100%; height: 100%; object-fit: cover; }
/* ม่านโทนสว่างทับภาพ (ไม่ใช้ม่านดำ) แล้วใช้ตัวหนังสือสีเข้มแทน */
.band-bg::after { content: ''; position: absolute; inset: 0; background: rgba(252,250,248,.72); }
/* เพดานเดิม 96px บนจอคอมทำให้แถบนี้สูง 879px บนจอสูง 900px = กินเต็มจอเพื่อข้อความชุดเดียว
   ลดเฉพาะเพดาน ค่าต่ำสุด 56px เท่าเดิม และมือถือมี padding-block:40px ทับอยู่แล้ว */
.band-in { position: relative; padding: clamp(56px, 5.4vw, 74px) var(--gut); color: var(--ink); }
.band-in .h-sec { color: var(--ink); }
.band-sub { font-size: clamp(15px, 1.4vw, 19px); margin: 16px auto 32px; max-width: 46ch; font-weight: 300; color: var(--ink-soft); }

/* ============ กริดภาพ 4 ช่อง (OUR HISTORY) ============ */
/* ช่องภาพชนกัน ไม่มีช่องว่างคั่น (เนยสั่ง 2026-09-03) */
.tiles { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 0; }
/* สัดส่วนช่องผูกกับจำนวนช่องต่อแถว — ช่องน้อย = เตี้ยลง ภาพจะได้ไม่สูงจนล้นจอ
   และคุมความสูงสูงสุดไว้อีกชั้น (เนยบอกว่าภาพใหญ่ไป 2026-09-03) */
/* ห้ามใส่ max-height ที่ช่อง — พอชนเพดานความสูง ความกว้างจะหดตามสัดส่วน
   แล้วเกิดช่องว่างระหว่างช่อง (เนยทัก 2026-09-03) · คุมความสูงด้วยสัดส่วนอย่างเดียว */
.tile { position: relative; aspect-ratio: 3 / 4; overflow: hidden; display: block; }
.tiles[data-cols="1"] .tile { aspect-ratio: 21 / 9; }
.tiles[data-cols="2"] .tile { aspect-ratio: 16 / 10; }
.tiles[data-cols="3"] .tile { aspect-ratio: 1 / 1; }
.tiles[data-cols="4"] .tile { aspect-ratio: 4 / 5; }   /* เตี้ยลงจาก 3:4 นิดหนึ่งตามที่เนยขอ */
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.tile:hover img { transform: scale(1.05); }
.tile-cap {
  position: absolute; inset: auto 0 0 0; padding: 26px 24px;
  background: linear-gradient(to top, rgba(252,250,248,.96) 12%, rgba(252,250,248,.82) 55%, rgba(252,250,248,0));
  color: var(--ink);
}
.tile-cap b { display: block; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 400; color: var(--ink-soft); }
.tile-cap span {
  display: block; margin-top: 4px;
  font-family: 'Montserrat', 'Noto Sans Thai', 'Montserrat-fb', 'NotoThai-fb', system-ui, sans-serif;
  font-size: 25px; font-weight: 300; line-height: 1.25;
}
/* "คอลเลกชันอื่น" ท้ายหน้าคอลเลกชัน — มีแค่ชื่อคอลเลกชัน จึงให้ใหญ่กว่าป้ายช่องภาพทั่วไป */
/* ขอบแคบลง + ระยะตัวอักษรชิดขึ้น = เหลือที่ให้ชื่อใหญ่ขึ้นในบรรทัดเดียว */
#cother .tile-cap { padding: 24px 16px; }
#cother .tile-cap span {
  margin-top: 0; font-size: clamp(20px, 1.7vw, 29px); letter-spacing: .02em;
  white-space: nowrap;              /* บรรทัดเดียวเสมอ — สคริปต์ในหน้าจะย่อขนาดให้พอดีเอง */
}

/* ช่องภาพที่ให้ระบบจัดคอลัมน์เอง — สัดส่วน 4:3 ทุกใบ (เนยสั่ง 2026-09-07)
   ต้องอยู่หลังกฎ .tiles[data-cols="n"] .tile เพื่อให้ชนะ (สเปซิฟิซิตี้เท่ากัน ตัวหลังชนะ) */
.tiles[data-fit] .tile { aspect-ratio: 4 / 3; }

.tiles-3 { grid-template-columns: repeat(3, 1fr); }
.tiles-3 .tile { aspect-ratio: 16 / 10; }

/* แถวการ์ดสินค้าแบบ 3 ช่อง — ใช้การ์ดตัวเดียวกับ "สินค้าที่คุณแม่เลือกมากที่สุด" */
.pgrid-3 { grid-template-columns: repeat(3, 1fr); }

/* ============ FEATURED LINES — แผงคอลเลกชันครึ่งจอ ============ */
.lines { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
.lrow { position: relative; min-height: 480px; display: flex; overflow: hidden; }
.lrow-bg { position: absolute; inset: 0; }
.lrow-bg img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.lrow:hover .lrow-bg img { transform: scale(1.04); }
.lrow-in { position: relative; padding: clamp(38px, 4vw, 60px); max-width: 400px; align-self: center; }
.lrow-name {
  font-size: clamp(20px, 1.8vw, 27px); letter-spacing: .1em;
  text-transform: uppercase; margin: 0 0 16px; font-weight: 300;
}
.lrow-desc { font-size: 14.5px; line-height: 1.8; margin: 0 0 28px; }
/* ม่านไล่สีเป็น "โทนสว่าง" ทุกใบ ไม่ใช้ม่านดำ (เนยสั่ง 2026-09-02)
   ภาพต้นทางบางใบเข้มมาก จึงต้องทึบเกือบเต็มในโซนข้อความแล้วค่อยจางหายกลางภาพ
   .light / .dark ยังใช้ชื่อเดิมได้ ต่างกันแค่ความทึบของม่านตามความเข้มของภาพ */
.lrow .lrow-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(93deg, rgba(250,247,244,1) 0%, rgba(250,247,244,.985) 32%, rgba(250,247,244,.62) 52%, rgba(250,247,244,0) 80%);
}
.lrow.dark .lrow-bg::after {
  background: linear-gradient(93deg, rgba(252,250,248,1) 0%, rgba(252,250,248,.99) 36%, rgba(252,250,248,.78) 56%, rgba(252,250,248,.12) 86%);
}
.lrow .lrow-name { color: var(--ink); }
/* ปุ่ม "ดูคอลเลกชัน" ต้องอยู่ระดับเดียวกันทุกแผง แต่ห้ามเว้นช่องว่างค้างใต้ชื่อสั้น ๆ
   (เคยล็อกความสูงชื่อ 2 บรรทัด / คำโปรย 4 บรรทัด แล้วแผงที่ชื่อบรรทัดเดียวห่างเกิน — เนยทัก 2026-09-02)
   วิธีใหม่: ยึดก้อนข้อความไว้ที่ขอบล่างของแผง (เหมือนที่จอมือถือทำอยู่แล้ว)
   ปุ่มจึงอยู่ระดับเดียวกันทุกใบ โดยระยะ ชื่อ→คำโปรย→ปุ่ม เป็นระยะจริงตามเนื้อหา ไม่มีช่องว่างค้าง */
.lrow-in { align-self: flex-end; display: flex; flex-direction: column; align-items: flex-start; }
.lrow-desc { margin: 0 0 24px; }
.lrow .lrow-desc { color: var(--ink-soft); }

/* ============ แถบร้านค้า / โลเคเตอร์ ============ */
.stores {
  background: var(--dark); color: #fff; position: relative; overflow: hidden;
  padding: clamp(56px, 6vw, 88px) var(--gut); text-align: center;
}
.stores::before {
  content: ''; position: absolute; inset: 0; opacity: .16;
  background-image:
    linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px);
  background-size: 74px 74px;
}
.stores > * { position: relative; }
/* .band-sub เปลี่ยนเป็นสีเข้มไปแล้ว (แถบภาพเป็นโทนสว่าง) แต่แถบร้านค้าพื้นเข้มจริง ต้องคืนเป็นขาว */
.stores .band-sub { color: rgba(255,255,255,.92); }
.stores .h-sec { color: #fff; }

/* ============ แถบประกาศ ============ */
.notice { background: #2E231D; color: rgba(255,255,255,.9); padding: clamp(38px, 4vw, 56px) var(--gut); }
.notice-in { display: grid; grid-template-columns: 220px 1fr; gap: 34px; max-width: 1360px; margin-inline: auto; }
.notice-lab { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.62); text-align: right; }
.notice-item { border-left: 1px solid rgba(255,255,255,.24); padding-left: 22px; margin-bottom: 22px; }
.notice-item:last-child { margin-bottom: 0; }
.notice-item h4 { margin: 0 0 6px; font-size: 15px; font-weight: 500; letter-spacing: .03em; color: #fff; }
.notice-item p { margin: 0; font-size: 13.5px; color: rgba(255,255,255,.76); line-height: 1.7; }

/* ============ ท้ายเว็บ ============ */
/* ท้ายเว็บ 8 บล็อก ตามภาพที่เนยส่ง 2026-09-02
   ชวนติดตาม+โซเชียล · กล่องอีเมล · Shop · Shop online · About us · Customer care · Policies · โลโก้ */
.ft { background: var(--cream-2); padding: clamp(38px, 4vw, 58px) var(--gut) clamp(26px, 3vw, 38px); }
.ft-in {
  display: grid; align-items: start;
  grid-template-columns: 1.06fr .88fr .7fr .72fr .8fr .86fr .66fr 1.22fr;
  gap: clamp(16px, 1.9vw, 30px);
  max-width: var(--wrap); margin-inline: auto;
}
.ft h4 {
  margin: 0 0 14px; font-size: 12px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
}
.ft ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ft-col a { display: block; font-size: 13px; line-height: 1.5; color: var(--ink-soft); letter-spacing: .04em; }
.ft-col a:hover { color: var(--accent); }

.ft-join p { margin: 0 0 16px; font-size: 13px; line-height: 1.7; color: var(--ink-soft); max-width: 24ch; }
.ft-soc { display: flex; flex-wrap: wrap; gap: 9px; }
.ft-so {
  width: 32px; height: 32px; flex: none; display: grid; place-items: center;
  background: var(--ink); color: #fff; transition: background .2s ease;
}
.ft-so:hover { background: var(--accent); }
.ft-so svg { width: 17px; height: 17px; fill: currentColor; stroke: none; }

.ft-sub { display: grid; gap: 10px; align-content: start; }
.ft-sub input {
  border: 1px solid var(--line); background: var(--paper);
  padding: 12px 14px; font: inherit; font-size: 13px; color: var(--ink); width: 100%;
}
.ft-sub input:focus { outline: 0; border-color: var(--accent); }
.ft-sub input::placeholder { color: #A5948A; }
.ft-sub button {
  border: 0; background: var(--accent); color: #fff; cursor: pointer;
  font: inherit; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  padding: 13px 18px; transition: background .2s ease;
}
.ft-sub button:hover { background: var(--accent-d); }

.ft-brand { display: grid; gap: 14px; justify-items: end; text-align: right; }
.ft-brand img { width: clamp(112px, 10vw, 150px); }
/* เนยขอให้ตัวอักษรลิขสิทธิ์เล็กลงให้พอ 2 บรรทัด */
.ft-brand span { font-size: 11px; line-height: 1.75; color: var(--ink-soft); letter-spacing: .02em; }

.ft-fine {
  max-width: var(--wrap); margin: clamp(24px, 2.6vw, 38px) auto 0;
  border-top: 1px solid var(--line); padding-top: 16px;
  font-size: 11px; letter-spacing: .08em; color: var(--ink-soft); text-align: center;
}

@media (max-width: 1240px) {
  .ft-in { grid-template-columns: 1.15fr 1fr 1fr 1fr; row-gap: clamp(24px, 3vw, 36px); }
  .ft-brand { grid-column: 1 / -1; justify-items: start; text-align: left;
    border-top: 1px solid var(--line); padding-top: 20px; }
}
@media (max-width: 720px) {
  .ft-in { grid-template-columns: 1fr 1fr; }
  .ft-join, .ft-sub { grid-column: 1 / -1; }
  .ft-join p { max-width: none; }
  .ft-sub { grid-template-columns: 1fr auto; gap: 8px; }
  .ft-sub button { padding: 12px 14px; letter-spacing: .1em; }
  .ft-fine { text-align: left; }
}

/* ============ บล็อกเนื้อหาหน้าเกี่ยวกับเรา ============ */
/* คอลัมน์ข้อความกลางหน้า ใช้กับบทที่ไม่มีรูปคู่ */
.col-txt { width: min(100% - (var(--gut) * 2), 860px); margin-inline: auto; padding: clamp(56px, 6vw, 92px) 0; }
.col-txt p { font-size: 15.5px; line-height: 2; color: var(--ink-soft); margin: 0 0 18px; }
.col-txt .h-sec { margin-bottom: 22px; }
.col-txt .lead-p { font-size: 17px; color: var(--ink); }
.band-soft { background: var(--cream); }

/* คำหรือวลีที่ต้นฉบับเน้น */
.hl { font-style: normal; color: var(--accent); }

/* คำพูด/ประโยคสรุปท้ายบท */
.qt {
  margin: 26px 0 0; padding: 0 0 0 22px; border-left: 2px solid var(--accent);
  font-family: 'Montserrat', 'Noto Sans Thai', 'Montserrat-fb', 'NotoThai-fb', system-ui, sans-serif;
  font-size: clamp(18px, 1.8vw, 23px); font-weight: 300; line-height: 1.6; color: var(--ink);
}

/* รายการหัวข้อ-คำอธิบาย */
.kv { list-style: none; margin: 24px 0 0; padding: 0; }
.kv li {
  padding: 14px 0; border-top: 1px solid var(--line);
  font-size: 14.5px; line-height: 1.85; color: var(--ink-soft);
}
.kv li:last-child { border-bottom: 1px solid var(--line); }
.kv b { color: var(--ink); font-weight: 500; }
.kv.quotes li { font-style: italic; color: var(--ink); }

.note { font-size: 12.5px; line-height: 1.85; color: var(--ink-soft); margin: 22px 0 0; opacity: .82; }
.sec-lead { max-width: 720px; margin: 22px auto 0; font-size: 15.5px; line-height: 1.9; color: var(--ink-soft); }
.btn-inline { margin-top: 22px; align-self: flex-start; }

/* ============ ไทม์ไลน์ (Our Journey) ============ */
.tl { position: relative; padding: 10px 0 clamp(30px, 3vw, 50px); }
.tl::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%;
  width: 1px; background: var(--line); transform: translateX(-.5px);
}
.tl-row { display: grid; grid-template-columns: 1fr 56px 1fr; align-items: center; margin-bottom: clamp(26px, 3vw, 46px); }
/* ทั้งสามช่องต้องอยู่แถวเดียวกันเสมอ — เมื่อสลับคอลัมน์ในแถวคู่ ตัวจุดกลางจะถูกจัดวางอัตโนมัติ
   ไปแถวใหม่ ทำให้ปีกับข้อความหลุดคนละบรรทัด (เนยเจอ 2026-09-04) */
.tl-a, .tl-b, .tl-dot { grid-row: 1; }
.tl-dot { grid-column: 2; }
.tl-a { grid-column: 1; text-align: right; padding-right: 8px; }
.tl-b { grid-column: 3; text-align: left; padding-left: 8px; }
/* แถวคู่สลับฝั่งกัน ให้ไทม์ไลน์ซิกแซกเหมือนเดิม */
.tl-row:nth-of-type(even) .tl-a { grid-column: 3; text-align: left; padding: 0 0 0 8px; }
.tl-row:nth-of-type(even) .tl-b { grid-column: 1; text-align: right; padding: 0 8px 0 0; }
.tl-y {
  font-family: 'Montserrat', 'Noto Sans Thai', 'Montserrat-fb', 'NotoThai-fb', system-ui, sans-serif;
  font-size: clamp(30px, 3.2vw, 44px); font-weight: 300; line-height: 1; color: var(--accent);
  font-variant-numeric: lining-nums; font-feature-settings: 'lnum' 1;
}
.tl-t { font-size: 14.5px; line-height: 1.9; color: var(--ink-soft); }
/* จุดต้องอยู่หน้าเส้น — เส้นเป็น ::before ที่ถูกจัดตำแหน่ง จึงถูกวาดทับของที่อยู่ในสายปกติ
   ต้องยกจุดขึ้นมาเป็นชั้นบนด้วย z-index ไม่งั้นเส้นจะผ่ากลางจุด (เนยสั่ง 2026-09-07) */
.tl-dot { display: grid; place-items: center; position: relative; z-index: 1; }
.tl-dot i {
  width: 9px; height: 9px; background: var(--accent); border-radius: 50%;
  box-shadow: 0 0 0 6px var(--paper);
}

/* ============ รางวัลรายปี (Awards) ============ */
/* หัวหน้าเพจแบบข้อความซ้าย + ตัวเลขรวมขวา (โครงเดียวกับม็อกอัพชุดก่อน แต่เป็นเซริฟบาง ไม่มีสีทอง) */
.phero { background: var(--cream); border-bottom: 1px solid var(--line); }
.phero-in {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 4vw, 60px);
  align-items: end; padding: clamp(48px, 5.5vw, 88px) 0 clamp(34px, 4vw, 56px);
}
.phero h1 { font-size: clamp(32px, 4.2vw, 58px); }
.phero h1 em { font-style: italic; color: var(--accent); }
.phero-lead { max-width: 62ch; margin: 20px 0 0; font-size: 15px; line-height: 1.9; color: var(--ink-soft); }
.phero-num { text-align: right; white-space: nowrap; }
.phero-num b {
  font-family: 'Montserrat', 'Noto Sans Thai', 'Montserrat-fb', 'NotoThai-fb', system-ui, sans-serif;
  font-size: clamp(56px, 7vw, 104px); font-weight: 300; line-height: .95; letter-spacing: -.01em;
  /* tabular-nums = ทุกหลักกว้างเท่ากัน ไม่งั้นตอนนับเลขขึ้นตัวเลขจะขยับซ้าย-ขวากระตุก */
  font-variant-numeric: lining-nums tabular-nums; font-feature-settings: 'lnum' 1, 'tnum' 1;
  display: inline-block; min-width: 2.1ch; text-align: right;
}
/* sup เป็นพี่น้องกับ <b> ไม่ใช่ลูก — ใช้ em จะไปคิดจากขนาดตัวอักษรของกล่องพ่อ (15px) แล้วเล็กจนแทบมองไม่เห็น */
.phero-num sup {
  font-family: 'Montserrat', 'Noto Sans Thai', 'Montserrat-fb', 'NotoThai-fb', system-ui, sans-serif;
  font-size: clamp(22px, 2.6vw, 38px); font-weight: 300;
  color: var(--accent); vertical-align: super; margin-left: 4px;
}
.phero-num span {
  display: block; margin-top: 10px;
  font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft);
}

/* แท็บปี — ตรึงใต้หัวเว็บ เลื่อนแนวนอนได้เมื่อจอแคบ */
.ytabs { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: var(--hd); z-index: 40; }
.ytabs-in { display: flex; gap: clamp(16px, 3vw, 42px); overflow-x: auto; scrollbar-width: none; }
.ytabs-in::-webkit-scrollbar { display: none; }
.ytabs button {
  padding: 18px 2px; white-space: nowrap; color: var(--ink-soft);
  font-size: 13px; letter-spacing: .14em;
  border-bottom: 1px solid transparent; transition: color .2s ease, border-color .2s ease;
  font-variant-numeric: lining-nums;
}
.ytabs button:hover { color: var(--accent); }
.ytabs button.on { color: var(--ink); border-bottom-color: var(--ink); }

/* แผงรายปี — รูปถ้วยซ้ายบนพื้นครีม รายการขวา โชว์ทีละปี */
.aw-panel {
  display: none; grid-template-columns: .85fr 1.15fr; gap: clamp(26px, 4.5vw, 72px);
  align-items: start; padding: clamp(34px, 4vw, 64px) 0;
}
.aw-panel.on { display: grid; }
.aw-shot {
  background: var(--cream); display: grid; place-items: center; align-content: center;
  gap: 18px; padding: clamp(26px, 3vw, 48px); min-height: clamp(280px, 30vw, 440px);
}
.aw-shot-row { display: flex; align-items: flex-end; justify-content: center; gap: clamp(12px, 2.4vw, 32px); }
.aw-shot-row img {
  max-height: clamp(190px, 20vw, 320px); width: auto; max-width: 46%; object-fit: contain;
  transition: transform .35s ease;
}
.aw-shot-row img:only-child { max-width: 78%; }
.aw-shot.zoom .aw-shot-row img { transform: scale(1.06); }
.aw-hint { font-size: 11.5px; letter-spacing: .1em; color: var(--ink-soft); opacity: .75; text-align: center; }
.aw-empty { font-size: 13px; color: var(--ink-soft); text-align: center; }
.aw-yr {
  font-family: 'Montserrat', 'Noto Sans Thai', 'Montserrat-fb', 'NotoThai-fb', system-ui, sans-serif;
  font-size: clamp(38px, 4.4vw, 62px); font-weight: 300; line-height: 1; color: var(--ink);
  font-variant-numeric: lining-nums; font-feature-settings: 'lnum' 1;
}
.aw-sub { margin: 12px 0 26px; }
.aw-list { list-style: none; margin: 0; padding: 0; }
.aw-list li {
  position: relative; padding: 7px 0 7px 20px;
  font-size: 14.5px; line-height: 1.75; color: var(--ink-soft);
}
.aw-list li::before {
  content: ''; position: absolute; left: 0; top: 18px;
  width: 10px; height: 1px; background: var(--accent); opacity: .75;
}
.aw-list li { transition: color .18s ease; }
.aw-list li:hover { color: var(--ink); }

/* หมายเหตุ: คลาส .faq-wrap / .faq-group / .faq-head ถูกถอดออกแล้ว
   หน้าคำถามที่พบบ่อยเปลี่ยนเป็นแผงพับ .qa-* และหน้าติดต่อไม่มีก้อน Q&A แล้ว (2026-09-02) */

/* ============ บทความ — หน้ารวม ============ */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.bcard { background: var(--cream); display: flex; flex-direction: column; transition: background .3s ease; }
.bcard:hover { background: var(--cream-2); }
.bcard-img { aspect-ratio: 3 / 2; overflow: hidden; }
.bcard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.bcard:hover .bcard-img img { transform: scale(1.045); }
.bcard-body { padding: clamp(22px, 2.4vw, 34px); display: flex; flex-direction: column; flex: 1; }
.bcard-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft);
}
.bcard-meta > span { position: relative; }
.bcard-meta > span + span::before {
  content: ''; position: absolute; left: -8px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5;
}
.bcard-title {
  font-family: 'Montserrat', 'Noto Sans Thai', 'Montserrat-fb', 'NotoThai-fb', system-ui, sans-serif;
  font-weight: 300; font-size: clamp(21px, 1.9vw, 27px); line-height: 1.3;
  margin: 14px 0 0;
}
.bcard-lead { font-size: 14px; line-height: 1.8; color: var(--ink-soft); margin: 12px 0 0; }
.bcard-more {
  margin-top: auto; padding-top: 22px;
  font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent);
}

/* ============ บทความ — หน้าอ่าน ============ */
.art-hero { height: clamp(260px, 38vw, 480px); overflow: hidden; }
.art-hero img { width: 100%; height: 100%; object-fit: cover; }
.art-wrap { width: min(100% - (var(--gut) * 2), 760px); margin: 0 auto; padding: clamp(40px, 5vw, 72px) 0 clamp(56px, 6vw, 88px); }
.art-meta { justify-content: flex-start; }
.art-title {
  font-family: 'Montserrat', 'Noto Sans Thai', 'Montserrat-fb', 'NotoThai-fb', system-ui, sans-serif;
  font-weight: 300; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.18;
  margin: 18px 0 0;
}
.art-lead {
  font-size: clamp(16px, 1.5vw, 19px); line-height: 1.85; color: var(--ink-soft);
  margin: 20px 0 0; padding-bottom: 30px; border-bottom: 1px solid var(--line);
}
.art-body h2 {
  font-family: 'Montserrat', 'Noto Sans Thai', 'Montserrat-fb', 'NotoThai-fb', system-ui, sans-serif;
  font-weight: 300; font-size: clamp(23px, 2.2vw, 31px); line-height: 1.3;
  margin: clamp(34px, 3.4vw, 50px) 0 14px;
}
.art-body p { font-size: 15.5px; line-height: 2; color: var(--ink-soft); margin: 0 0 18px; }
.art-src { margin-top: clamp(40px, 4vw, 60px); border-top: 1px solid var(--line); padding-top: 26px; }
.art-src h3 { margin: 0 0 14px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 500; }
.art-src ul { margin: 0; padding-left: 18px; }
.art-src li { font-size: 13px; line-height: 1.8; color: var(--ink-soft); margin-bottom: 8px; }
.art-src a { border-bottom: 1px solid var(--line); }
.art-src a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ============ แถบเตือนว่าเป็นม็อกอัพ ============ */
.mock-bar {
  background: var(--accent); color: #fff; text-align: center;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; padding: 8px var(--gut);
}

/* ============ หน้ารวมสินค้า ============ */
.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-bottom: 44px; }
.filters button {
  padding: 11px 26px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  border: 1px solid var(--line); color: var(--ink-soft); transition: .24s ease;
}
.filters button:hover { border-color: var(--accent); color: var(--accent); }
.filters button.on { background: var(--dark); border-color: var(--dark); color: #fff; }

/* ระหว่างรอราคาสดจากฐานข้อมูล — การ์ดกินที่เท่าของจริงแล้ว แต่ยังไม่โชว์ตัวเลขกับป้าย
   ต้องเป็น visibility ไม่ใช่ display:none ไม่งั้นที่ที่จองไว้จะหด แล้วหน้าเด้งตอนราคามา
   เหตุผลที่ต้องซ่อน: ราคาในสำเนา data.js เป็นของวันที่เจนไฟล์ อาจไม่ตรงกับที่ขายจริง */
.km-wait .pcard-price, .km-wait .tag { visibility: hidden; }

/* ============ หน้าสินค้าเดี่ยว (PDP) ============ */
/* align-items:start + sticky — คอลัมน์ขวายาวมาก (หัวข้อพับเนื้อหาจริงจากร้าน)
   ถ้าปล่อยให้ยืดเต็มความสูง รูปจะไปลอยกลางคอลัมน์ ด้านบนโล่งเป็นกล่องครีมเปล่า */
.pdp { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(34px, 5vw, 80px); padding: clamp(40px, 5vw, 76px) 0; align-items: start; }
/* รูปหลักเต็มกรอบ ไม่มีขอบขาว (ทำตามหน้าร้านจริง — เนยสั่ง 2026-09-03)
   กล่องเป็นสี่เหลี่ยมจัตุรัส รูปสินค้าเป็นภาพจัตุรัสอยู่แล้วจึงเต็มพอดีไม่โดนครอป */
.pdp-media {
  display: flex; flex-direction: column; gap: 10px; padding: 0; background: none;
  position: sticky; top: calc(var(--hd) + 20px);
}
.pdp-main {
  width: 100%; aspect-ratio: 1 / 1;   /* ห้ามจำกัดความสูง ไม่งั้นภาพจัตุรัสจะโดนครอปบน-ล่าง */
  background: var(--cream); position: relative; overflow: hidden;
}
.pdp-main img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .28s ease;
}
/* เลื่อนเมาส์เพื่อซูม — ขยายจากจุดที่เมาส์ชี้ (ตั้ง transform-origin ด้วยสคริปต์) */
.pdp-main.zoom { cursor: zoom-in; }
.pdp-main.zoom img { transform: scale(2.2); transition: transform .12s ease; }
.pdp-zoom-hint {
  position: absolute; right: 14px; bottom: 12px; z-index: 2; pointer-events: none;
  font-size: 11.5px; letter-spacing: .06em; color: var(--ink-soft); opacity: .75;
  transition: opacity .2s ease;
}
.pdp-main.zoom .pdp-zoom-hint { opacity: 0; }
@media (hover: none) { .pdp-zoom-hint { display: none; } }

/* แถบรูปย่อ: เห็น 4 ใบพอดีแถว เกินนั้นปัด/เลื่อนดูต่อ */
.pdp-thumbs {
  flex: none; display: flex; gap: 8px; width: 100%;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.pdp-thumbs::-webkit-scrollbar { display: none; }
.pdp-th {
  flex: 0 0 calc((100% - 24px) / 4); aspect-ratio: 1 / 1; padding: 0; cursor: pointer;
  border: 1px solid var(--line); background: var(--cream); scroll-snap-align: start;
}
.pdp-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-th:hover { border-color: var(--accent); }
.pdp-th.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.pdp-info { align-self: center; max-width: 520px; }
.pdp-info .pcard-line { text-align: left; }
.pdp-title { font-size: clamp(26px, 2.6vw, 38px); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; line-height: 1.3; margin: 12px 0 6px; }
.pdp-size { color: var(--ink-soft); font-size: 14px; letter-spacing: .08em; }
.pdp-price { margin: 26px 0; font-size: 27px; font-weight: 300; letter-spacing: .04em; }
.pdp-price s { font-size: 16px; color: var(--ink-soft); margin-left: 12px; }
.pdp-price .off { color: var(--accent); font-size: 14px; letter-spacing: .1em; margin-left: 10px; }
.pdp-desc { color: var(--ink-soft); line-height: 1.85; margin: 0 0 30px; border-top: 1px solid var(--line); padding-top: 26px; }
.acc { border-top: 1px solid var(--line); }
.acc:last-of-type { border-bottom: 1px solid var(--line); }
.acc summary { list-style: none; cursor: pointer; padding: 18px 0; display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: '+'; font-size: 18px; color: var(--ink-soft); }
.acc[open] summary::after { content: '–'; }
.acc p { margin: 0 0 20px; color: var(--ink-soft); font-size: 14px; line-height: 1.85; }

/* เนื้อหาในหัวข้อพับของหน้าสินค้า — มาจากฐานข้อมูลร้านจริง มีทั้งย่อหน้า หัวข้อย่อย และรายการ */
.pd-body { padding-bottom: 20px; }
.pd-body p { margin: 0 0 12px; color: var(--ink-soft); font-size: 14px; line-height: 1.9; }
.pd-h {
  margin: 18px 0 8px; font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 500; color: var(--ink);
}
.pd-body > div > :first-child { margin-top: 0; }
.pd-ul { list-style: none; margin: 0 0 14px; padding: 0; }
.pd-ul li {
  position: relative; padding: 5px 0 5px 18px;
  color: var(--ink-soft); font-size: 14px; line-height: 1.8;
}
.pd-ul li::before {
  content: ''; position: absolute; left: 0; top: 14px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--accent); opacity: .65;
}

/* รูปประกอบเพิ่มเติมท้ายหน้าสินค้า */
.pdp-gal { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 4px; }
.pdp-gal-i { background: var(--cream); }
.pdp-gal-i img { width: 100%; height: auto; }

/* ============ หน้าเรื่องราวแบรนด์ ============ */
.story-hero { position: relative; min-height: min(72vh, 640px); display: grid; place-items: center; text-align: center; overflow: hidden; }
.story-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* ม่านสว่างทับภาพหัวเพจ ตัวหนังสือเป็นสีเข้ม (เนยสั่ง 2026-09-02 ไม่เอาเฟดดำ) */
.story-hero::after { content: ''; position: absolute; inset: 0; background: rgba(252,250,248,.7); }
.story-hero-in { position: relative; z-index: 2; color: var(--ink); padding: var(--gut); }
.story-hero-in .h-display, .story-hero-in .h-sec { color: var(--ink) !important; }
.story-hero-in .eyebrow, .story-hero-in .eyebrow.on-dark { color: var(--ink-soft); }
.story-hero-in .band-sub { color: var(--ink-soft); }
.prose { max-width: 720px; margin: 0 auto; padding: clamp(56px, 6vw, 96px) 0; text-align: center; }
.prose p { color: var(--ink-soft); font-size: 16px; line-height: 2; margin: 0 0 22px; }
.prose .lead {
  font-family: 'Montserrat', 'Noto Sans Thai', 'Montserrat-fb', 'NotoThai-fb', system-ui, sans-serif;
  font-size: clamp(22px, 2.2vw, 30px); font-weight: 300; color: var(--ink); line-height: 1.55;
}
/* stretch ไม่ใช่ center — ไม่งั้นรูปจะสูงแค่เท่าเนื้อหาตัวเอง แล้วเหลือช่องว่างข้างบน-ล่าง */
.split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; gap: 0; }
.split img { width: 100%; height: 100%; object-fit: cover; min-height: 420px; }
.split-txt { padding: clamp(40px, 5vw, 84px); display: flex; flex-direction: column; justify-content: center; }
.split-txt p { color: var(--ink-soft); line-height: 1.9; margin: 18px 0 0; }
.split.rev .split-txt { order: -1; }
/* บทที่ 5-6 ย้ายมาใช้เลย์เอาต์สองคอลัมน์ — ยกสไตล์ของย่อหน้านำและรายการมาด้วย (2026-09-04) */
.split-txt .lead-p { font-size: 16.5px; color: var(--ink); }
.split-txt .kv { margin-top: 22px; }
.split-txt .qt { margin-top: 24px; }
.split-txt .note { font-size: 12.5px; line-height: 1.8; color: var(--ink-soft); margin-top: 16px; }

/* ตัวเลขสถิติ */
/* เอาเส้นคั่นระหว่างช่องออก (เนยสั่ง 2026-09-04) — เหลือเส้นบนไว้คั่นกับส่วนก่อนหน้าอย่างเดียว */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.stat { padding: clamp(34px, 4vw, 56px) 20px; text-align: center; }
.stat b {
  display: block; font-family: 'Montserrat', 'Noto Sans Thai', 'Montserrat-fb', 'NotoThai-fb', system-ui, sans-serif;
  font-size: clamp(34px, 3.6vw, 50px); font-weight: 300; line-height: 1; color: var(--accent);
  /* บังคับเลขความสูงเท่ากัน (เดิมกันปัญหาเลข old-style ของ Cormorant · Montserrat เป็นเลขปกติอยู่แล้ว) */
  font-variant-numeric: lining-nums; font-feature-settings: 'lnum' 1;
}
.stat span { display: block; margin-top: 12px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }

/* แถวรางวัล */
.awards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 4px; }
.award { background: var(--cream); padding: 28px 18px; text-align: center; }
.award img { height: 96px; width: auto; margin: 0 auto 14px; object-fit: contain; }
.award span { font-size: 11.5px; letter-spacing: .14em; color: var(--ink-soft); }

/* ============ หน้าคอลเลกชัน (collection.html) ============
   หน้านี้เป็น "แคตตาล็อกข้อมูล" ไม่ใช่หน้าสั่งซื้อ — ไม่มีราคา ไม่มีปุ่มซื้อ
   แถวสินค้าสลับซ้าย-ขวา รูปวางบนพื้นครีมเหมือนหน้าสินค้าเดี่ยว */
/* ม่านสว่างเข้มขึ้นตรงกลางพอให้อ่านตัวหนังสือสีเข้มออก โดยขอบภาพยังเห็นรายละเอียด */
.c-hero::after {
  background: radial-gradient(ellipse 74% 70% at 50% 52%,
    rgba(252,250,248,.93) 0%, rgba(252,250,248,.8) 58%, rgba(252,250,248,.55) 100%);
}
.c-tag { color: var(--ink-soft) !important; }
.c-tag {
  font-family: 'Montserrat', 'Noto Sans Thai', 'Montserrat-fb', 'NotoThai-fb', system-ui, sans-serif;
  font-size: clamp(19px, 2vw, 27px); font-style: italic; font-weight: 300;
  color: rgba(255,255,255,.95); margin: 14px 0 0;
}
.cxp { display: grid; grid-template-columns: 1fr 1fr; align-items: center; border-top: 1px solid var(--line); }
.cxp:last-child { border-bottom: 1px solid var(--line); }
.cxp-media { background: var(--cream); display: grid; place-items: center; align-self: stretch; min-height: clamp(340px, 34vw, 520px); }
/* ความสูงเป็นค่าคงที่ ไม่ใช่ % — ในกริดแบบนี้ % จะไม่มีค่าอ้างอิงแล้วตีเป็น auto
   ทำให้ภาพจัตุรัสดันกล่องจนใหญ่เกิน (เคยพลาดมาแล้วที่แถวแพ็กช็อตหน้าแรก) */
.cxp-media img {
  max-height: clamp(250px, 26vw, 420px); max-width: 78%;
  width: auto; object-fit: contain;
}
.cxp-txt { padding: clamp(34px, 4.4vw, 76px); max-width: 780px; }
.cxp.rev .cxp-media { order: 2; }
.cxp-name {
  font-family: 'Montserrat', 'Noto Sans Thai', 'Montserrat-fb', 'NotoThai-fb', system-ui, sans-serif;
  font-size: clamp(24px, 2.3vw, 34px); font-weight: 600; letter-spacing: .03em;   /* แอล 10 ก.ย. 69 "ทำตัวใหญ่กว่านี้นิดนึง" */
  text-transform: uppercase; line-height: 1.35; margin: 12px 0 6px;
}
/* ชื่อสินค้าบรรทัดเดียวยาว ๆ ไม่หักกลางคำ (แอล 10 ก.ย. 69 "ไม่เอาแบบตัด เอาแบบชื่อเต็มยาว ๆ") — kmFitNames() ใน app.js ย่อตัวอักษรให้พอดีคอลัมน์
   ถ้าย่อถึง 15px แล้วยังไม่พอ ค่อยยอมขึ้นบรรทัดใหม่ที่ช่องว่าง (ไม่ตัดที่ขีด) */
@media (min-width: 901px) {
  .cxp-name, .pdp-title { white-space: nowrap; }
  .cxp-name.km-wrap, .pdp-title.km-wrap { white-space: normal; }
}
.cxp-size { color: var(--ink-soft); font-size: 13.5px; letter-spacing: .08em; margin: 0; }
.cxp-lead {
  color: var(--ink-soft); font-size: 14.5px; line-height: 1.9;
  margin: 22px 0 20px; border-top: 1px solid var(--line); padding-top: 22px;
}
.cxp-txt .pd-ul { margin-bottom: 6px; }
.cxp-txt .btn-inline { display: inline-flex; margin-top: 22px; }

/* แผงคอลเลกชัน 5 ช่อง — ใบสุดท้ายกินเต็มแถวเพื่อไม่ให้เหลือช่องว่างข้างเดียว */
/* ใบสุดท้ายกินเต็มแถว — ความสูงต้องเท่าใบอื่น ไม่งั้นปุ่มด้านในอยู่คนละระดับ */
.lines-5 > :last-child { grid-column: 1 / -1; min-height: 480px; }

/* หน้าแรก: แผงคอลเลกชัน 5 หมวดต้องเห็นครบใน "หน้าจอเดียว"
   ฐานเป็นกริด 6 คอลัมน์ แล้วให้แต่ละเลย์เอาต์กำหนดว่าใบไหนกินกี่คอลัมน์
   ความสูงคิดจากจอจริงหารจำนวนแถว (--rows) ไม่ใช่ค่าคงที่
   ใช้ svh คู่กับ vh — บนมือถือ vh ไม่หักแถบที่อยู่เว็บ ทำให้เกินจอจริง */
.lines-big { --rows: 2; --cap: 470px; grid-template-columns: repeat(6, 1fr); }
.lines-big .lrow, .lines-big.lines-5 > :last-child {
  grid-row: auto; min-height: 0;
  height: clamp(200px, calc((100vh - var(--hd) - ((var(--rows) - 1) * 4px)) / var(--rows)), var(--cap));
  height: clamp(200px, calc((100svh - var(--hd) - ((var(--rows) - 1) * 4px)) / var(--rows)), var(--cap));
}
.lines-big .lrow-in { padding: clamp(24px, 2.6vw, 44px); max-width: 360px; }
.lines-big .lrow-desc { margin-bottom: 20px; font-size: 13.5px; line-height: 1.7; }

/* เลย์เอาต์ที่เลือกได้จากแถบ .laypick (จำไว้ใน localStorage) */
.lay-23 > :nth-child(-n+2) { grid-column: span 3; }   /* 2 บน */
.lay-23 > :nth-child(n+3)  { grid-column: span 2; }   /* 3 ล่าง */

.lay-32 > :nth-child(-n+3) { grid-column: span 2; }   /* 3 บน */
.lay-32 > :nth-child(n+4)  { grid-column: span 3; }   /* 2 ล่าง */

.lay-221 { --rows: 3; --cap: 340px; }
.lay-221 > * { grid-column: span 3; }
.lay-221 > :last-child { grid-column: 1 / -1; }

.lay-5 { --rows: 1; --cap: 720px; grid-template-columns: repeat(5, 1fr); }
/* ต้องเจาะจง :last-child ด้วย ไม่งั้นกฎ .lines-5 > :last-child (สเปซิฟิซิตี้สูงกว่า .lay-5 > *) จะดันใบสุดท้ายเต็มแถว */
.lay-5 > *, .lay-5 > :last-child { grid-column: span 1; }
.lay-5 .lrow-in { max-width: none; padding: clamp(18px, 1.8vw, 30px); }
/* เดิมซ่อนคำโปรยในเลย์เอาต์นี้เพราะกล่องแคบ — เนยขอให้แสดงเหมือนเลย์เอาต์อื่น (2026-09-03)
   กล่องกว้างจริงราว 230px ที่จอ 1440 จึงต้องย่อตัวอักษรและระยะลง ไม่งั้นคำโปรยกินเกินครึ่งกล่อง
   ต่ำกว่า 1100px ห้าคอลัมน์แคบจนอ่านไม่ออก จึงซ่อนไว้เหมือนเดิม */
.lay-5 .lrow-desc { font-size: 12.5px; line-height: 1.62; margin: 0 0 18px; }
.lay-5 .lrow-name { margin-bottom: 12px; }
@media (max-width: 1100px) { .lay-5 .lrow-desc { display: none; } }

/* 1 ใบเด่นเต็มแถว แล้วไล่ลงมาแถวละ 2 ใบ — ใบเด่นสูงกว่าใบอื่นให้เห็นชัดว่าเป็นตัวชู
   ต้องเจาะจง :last-child ด้วย ไม่งั้นกฎ .lines-5 > :last-child จะดันใบสุดท้ายเต็มแถว */
/* แถวล่างต้องสูงพอสำหรับ ชื่อ + คำโปรย + ปุ่ม (ราว 250px) ไม่งั้นชื่อโดนตัดหาย */
.lay-122 { --rows: 2.5; --cap: 300px; }
.lay-122 > :nth-child(n+2) .lrow-in { padding: clamp(20px, 2.2vw, 34px); }
.lay-122 > :nth-child(n+2) .lrow-desc { font-size: 13.2px; line-height: 1.68; margin: 0 0 16px; }
.lay-122 > :nth-child(n+2), .lay-122 > :last-child { grid-column: span 3; }
.lines-big.lay-122 > :first-child {
  grid-column: 1 / -1;
  height: clamp(250px, calc((100vh - var(--hd)) / 2.05), 450px);
  height: clamp(250px, calc((100svh - var(--hd)) / 2.05), 450px);
}
.lay-122 > :first-child .lrow-in { max-width: 460px; }

/* 1 ใบเด่นเต็มแถว แล้วแถวล่าง 4 ใบ (กริด 12 ช่องเพราะ 4 ใบหารกับ 6 ไม่ลงตัว) */
/* ใบเด่นต้องสูงกว่าแถวล่างเสมอ จึงให้แถวล่างคิดจาก 2.9 แถว ส่วนใบเด่นคิดจาก 1.9 แถว */
.lay-14 { --rows: 2.6; --cap: 300px; grid-template-columns: repeat(12, 1fr); }
.lay-14 > :nth-child(n+2), .lay-14 > :last-child { grid-column: span 3; }
.lines-big.lay-14 > :first-child {
  grid-column: 1 / -1;
  height: clamp(260px, calc((100vh - var(--hd)) / 1.9), 460px);
  height: clamp(260px, calc((100svh - var(--hd)) / 1.9), 460px);
}
.lay-14 > :first-child .lrow-in { max-width: 460px; }
/* ใบล่างกว้างราว 350px ที่จอ 1440 — ย่อคำโปรยลงเหมือนแบบแถวเดียว 5 ใบ */
.lay-14 > :nth-child(n+2) .lrow-in { max-width: none; padding: clamp(18px, 1.8vw, 30px); }
.lay-14 > :nth-child(n+2) .lrow-desc { font-size: 12.8px; line-height: 1.65; margin: 0 0 16px; }
@media (max-width: 1100px) { .lay-14 > :nth-child(n+2) .lrow-desc { display: none; } }


/* แบบ "2 บน / 3 ล่าง" ก็ยึด 4:3 เหมือนกัน (เนยสั่ง 2026-09-07)
   เฉพาะจอกว้าง — แท็บเล็ตลงไปบีบเป็น 2 คอลัมน์ + ใบสุดท้ายเต็มแถว ถ้าใส่ 4:3 ใบนั้นจะสูงเกินครึ่งจอ */
@media (min-width: 1181px) {
  .lines-big.lay-23 > *,
  .lines-big.lay-23 > :last-child { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
}

/* เนยสั่ง 2026-09-04: ไม่เอากล่องยาว ๆ — กล่องในสองแบบนี้ยึดสัดส่วน 4:3
   (ใบเด่นเต็มแถวใช้ 16:9 เพราะกว้าง 1400+ ถ้าเป็น 4:3 จะสูงเกินหนึ่งจอครึ่ง) */
.lines-big.lay-122 > :nth-child(n+2),
.lines-big.lay-14 > :nth-child(n+2) { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
/* ใบเด่นก็ 4:3 เท่ากับใบอื่น ต่างกันแค่กินเต็มความกว้างจึงใหญ่กว่า (เนยสั่ง 2026-09-07)
   ห้ามใส่ max-height คู่กับ aspect-ratio เด็ดขาด — เบราว์เซอร์จะย่อ "ความกว้าง" ลงตาม แล้วไม่เต็มแถว
   ถ้าอยากจำกัดความสูงต้องใช้ max-width ที่กล่องนอกแทน */
.lines-big.lay-122 > :first-child,
.lines-big.lay-14 > :first-child { height: auto; min-height: 0; aspect-ratio: 4 / 3; }

/* จำนวนคอลเลกชันไม่ใช่ 5 ใบ = ไม่ใช้สแปนของเลย์เอาต์ที่เลือก เฉลี่ยช่องเท่า ๆ กันแทน
   ไม่งั้นลบใบเดียวแล้วเหลือช่องว่างค้างท้ายแถว (เนยสั่ง 2026-09-03) */
.lines-big.lines-auto { grid-template-columns: repeat(var(--cols, 3), 1fr); }
.lines-big.lines-auto > *, .lines-big.lines-auto > :last-child { grid-column: auto; }

/* แถบเลือกเลย์เอาต์ */
.laypick {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 6px; padding: 0 var(--gut) 26px;
}
.laypick > span {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-soft); margin-right: 6px;
}
.laypick button {
  border: 1px solid var(--line); background: transparent; color: var(--ink-soft);
  padding: 7px 16px; font-size: 11.5px; letter-spacing: .12em; transition: .2s ease;
}
.laypick button:hover { border-color: var(--accent); color: var(--accent); }
.laypick button.on { background: var(--dark); border-color: var(--dark); color: #fff; }

/* ============ มือถือ / แท็บเล็ต ============ */
@media (max-width: 1180px) {
  .hd-nav { display: none; }
  .burger { display: inline-flex; align-items: center; }
  .burger svg { width: 22px; height: 22px; stroke: var(--ink); fill: none; stroke-width: 1.4; }
  .pgrid, .tiles { grid-template-columns: repeat(var(--cols-m, 2), 1fr); }
  .lines { grid-template-columns: 1fr; }
  /* แท็บเล็ต/มือถือ: ช่องแคบเกินกว่าจะเรียง 3 หรือ 5 ใบต่อแถว
     จึงล็อกเป็น 2 คอลัมน์ 3 แถว (2+2+1) ทุกเลย์เอาต์ — ที่เลือกไว้มีผลกับจอกว้างเท่านั้น */
  .lines-big { --rows: 3; --cap: 320px; grid-template-columns: 1fr 1fr; }
  .lines-big > *, .lay-23 > :nth-child(-n+2), .lay-23 > :nth-child(n+3),
  .lay-32 > :nth-child(-n+3), .lay-32 > :nth-child(n+4), .lay-5 > *,
  .lay-122 > :nth-child(n+2), .lay-14 > :nth-child(n+2) { grid-column: span 1; }
  .lay-14 { grid-template-columns: 1fr 1fr; }
  .lines-big.lay-122 > :first-child, .lines-big.lay-14 > :first-child { grid-column: 1 / -1; height: 300px; }
  .lines-big > :last-child, .lay-221 > :last-child { grid-column: 1 / -1; }
  .lay-5 { grid-template-columns: 1fr 1fr; }
  .lay-5 .lrow-in { padding: 18px; }
  .hd-hide-sm { display: none; }
}

@media (max-width: 900px) {
  /* แถบบนสุดวางเรียงกลางแถบไม่พอ ให้เลื่อนวนแทน — จึงต้องโชว์ชุดที่สองต่อท้าย */
  .ann-in { justify-content: flex-start; width: max-content; animation: annRoll 24s linear infinite; }
  .ann-dup { display: flex; }
}
@keyframes annRoll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ann-in { animation: none; } }

@media (max-width: 760px) {
  :root { --hd: 64px; }
  .hero { min-height: 0; }
  .hero-bg::after { background: linear-gradient(to top, rgba(255,253,251,.96) 34%, rgba(255,253,251,.55) 62%, rgba(255,253,251,.1) 100%); }
  .hero-bg img { object-position: 62% 22%; }
  .hero { display: block; }
  .hero-in { padding-top: 300px; max-width: none; }
  .hero-sub { max-width: none; }
  .btn { width: 100%; padding-inline: 20px; }
  .pgrid { grid-template-columns: repeat(var(--cols-m, 2), 1fr); gap: 2px; }
  .pcard { padding: 14px 12px 26px; }
  .pcard-img { min-height: 150px; padding: 16px 4px 14px; }
  .pcard-img img { max-height: 150px; }
  .pcard-name { font-size: 12px; }
  /* มือถือ: ช่องภาพเรียงต่อกันลงมาช่องละแถว กล่องเป็น 4:3 (เนยสั่ง 2026-09-04)
     ต้องเขียนทับกฎ .tiles[data-cols="n"] .tile ที่ล็อกสัดส่วนตามจำนวนช่องไว้ */
  .tiles { grid-template-columns: 1fr; gap: 0; }
  .tiles .tile,
  .tiles[data-cols="1"] .tile, .tiles[data-cols="2"] .tile,
  .tiles[data-cols="3"] .tile, .tiles[data-cols="4"] .tile { aspect-ratio: 4 / 3; }
  .tiles-3 { grid-template-columns: repeat(var(--cols-m, 2), 1fr); gap: 0; }
  .tiles-3 .tile { aspect-ratio: 4 / 3; }
  /* แถวการ์ด 3 ช่องบนมือถือ เหลือ 1 คอลัมน์ไม่ได้ (ยาวเกิน) เอา 2 คอลัมน์แล้วให้ใบที่ 3 กินเต็มแถว */
  .pgrid-3 { grid-template-columns: 1fr 1fr; }
  .pgrid-3 > :nth-child(3) { grid-column: 1 / -1; }
  .lrow { min-height: 400px; }
  /* แถบจุดแข็ง 4 ข้อ: จอแคบเรียง 2×2 พร้อมเส้นคั่นแนวนอน */
  .trust-in { grid-template-columns: repeat(var(--cols-m, 2), 1fr); row-gap: 26px; }
  .trust-i + .trust-i::before { display: none; }
  .trust-i:nth-child(2n)::before {
    content: ''; display: block; position: absolute; left: 0; top: 4px; bottom: 4px;
    width: 1px; background: var(--line);
  }
  .trust-ico { margin-bottom: 10px; }
  .trust-i b { font-size: 12px; }
  /* มือถือ: คอลเลกชันเรียงแบบ 2 บน / 3 ล่าง เหมือนจอใหญ่ (เนยสั่ง 2026-09-07)
     เดิมเป็นแถวเลื่อนแนวนอนปัดดู (2026-09-03) — เลิกใช้แล้ว
     ใช้รูปแบบนี้กับทุกเลย์เอาต์ที่เลือกไว้ ไม่ยกสแปนของจอใหญ่มาตรง ๆ
     เพราะแบบ 5 ใบแถวเดียวจะเหลือช่องละ 78px อ่านชื่อไม่ออก */
  .lines-big {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; overflow: visible;
  }
  .lines-big .lrow, .lines-big.lines-5 > :last-child {
    height: auto; min-height: 0; aspect-ratio: 4 / 3;
  }
  /* สแปนของมือถือชนะทุกเลย์เอาต์ — ต้องไล่ชื่อคลาสให้ครบเพื่อกินสเปซิฟิซิตี้ของบล็อก 1180px */
  .lines-big > :nth-child(-n+2),
  .lines-big.lay-23 > :nth-child(-n+2), .lines-big.lay-32 > :nth-child(-n+2),
  .lines-big.lay-122 > :nth-child(-n+2), .lines-big.lay-14 > :nth-child(-n+2),
  .lines-big.lay-5 > :nth-child(-n+2), .lines-big.lay-221 > :nth-child(-n+2) { grid-column: span 3; }
  .lines-big > :nth-child(n+3),
  .lines-big.lay-23 > :nth-child(n+3), .lines-big.lay-32 > :nth-child(n+3),
  .lines-big.lay-122 > :nth-child(n+3), .lines-big.lay-14 > :nth-child(n+3),
  .lines-big.lay-5 > :nth-child(n+3), .lines-big.lay-221 > :nth-child(n+3),
  .lines-big > :last-child, .lines-big.lines-5 > :last-child,
  .lines-big.lay-221 > :last-child, .lines-big.lay-5 > :last-child { grid-column: span 2; }
  /* ใบเด่นของสองแบบนี้ล็อกความสูงไว้ตอนอยู่จอใหญ่ ต้องปลดออกให้กลับมาเป็น 4:3 เท่าใบอื่น */
  .lines-big.lay-122 > :first-child, .lines-big.lay-14 > :first-child {
    grid-column: span 3; height: auto; aspect-ratio: 4 / 3;
  }

  /* ช่องแคบลงครึ่งหนึ่ง คำโปรยกับปุ่มใส่ไม่ลง เหลือแค่ชื่อคอลเลกชันบนรูป (ทั้งใบยังกดได้) */
  .lines-big .lrow-desc, .lines-big .lrow .btn { display: none; }
  .lines-big .lrow-in { padding: 12px 10px; max-width: none; }
  .lines-big .lrow-name { font-size: 13px; letter-spacing: .08em; line-height: 1.35; }
  /* แถวล่าง 3 ใบแคบกว่าแถวบน ชื่อยาว ๆ อย่าง TRUFFLE LUXURIOUS CARE ต้องเล็กลงอีกขั้น */
  .lines-big > :nth-child(n+3) .lrow-name { font-size: 11px; letter-spacing: .05em; }
  /* มือถือก็เป็นม่านสว่างเหมือนกัน ตัวหนังสือสีเข้ม */
  .lrow .lrow-bg::after,
  .lrow.dark .lrow-bg::after { background: linear-gradient(to top, rgba(252,250,248,.96) 34%, rgba(252,250,248,.72) 62%, rgba(252,250,248,.12) 100%); }
  .lrow .lrow-name { color: var(--ink); }
  .lrow .lrow-desc { color: var(--ink-soft); }
  .lrow-in, .lrow.center .lrow-in { align-self: flex-end; text-align: left; padding-bottom: 40px; }
  .blog-grid { grid-template-columns: 1fr; }
  /* ไทม์ไลน์บนมือถือ: ย้ายเส้นแกนไปชิดซ้าย แล้วเรียงปี-ข้อความลงมาเป็นคอลัมน์เดียว */
  .tl::before { left: 5px; }
  .tl-row { grid-template-columns: 12px 1fr; gap: 16px; align-items: start; }
  .tl-dot { order: -1; }
  .tl-a, .tl-b,
  .tl-row:nth-of-type(even) .tl-a,
  .tl-row:nth-of-type(even) .tl-b {
    text-align: left; padding: 0; grid-column: 2; min-width: 0;
  }
  /* ภาษาไทยไม่มีช่องว่างระหว่างคำ ถ้าไม่บอกให้ตัดคำ บรรทัดยาวจะทะลุขอบจอ */
  .tl-t { overflow-wrap: break-word; }
  /* มือถือ: คอลัมน์เดียว ปีอยู่แถวแรก ข้อความแถวสอง จุดคร่อมสองแถว */
  .tl-a { grid-row: 1; }
  .tl-b { grid-row: 2; }
  .tl-dot { grid-row: 1 / span 2; grid-column: 1; }
  .tl-y { font-size: 30px; margin-bottom: 8px; }
  .phero-in, .aw-panel.on { grid-template-columns: 1fr; }
  .phero-num { text-align: left; }
  .aw-shot { min-height: 0; }
  .aw-shot-row img { max-height: 210px; }
  .ytabs button { padding: 14px 2px; font-size: 12.5px; }
  .pdp, .split, .stats, .cxp { grid-template-columns: 1fr; }
  /* จอแคบไม่ตรึงรูปแล้ว กล่องสูงตามเนื้อหา — ต้องกำหนดความสูงของกรอบรูปใหญ่เอง
     เพราะรูปวางแบบ absolute ไม่ดันความสูงให้กล่อง (ไม่งั้นเหลือแค่แถบรูปย่อ) */
  .pdp-media { position: static; height: auto; }
  .cxp.rev .cxp-media { order: 0; }
  .cxp-media { padding: 30px 0; min-height: 0; }
  .cxp-media img { max-height: 260px; max-width: 66%; }
  .cxp-txt { padding: 30px var(--gut) 44px; }
  .split.rev .split-txt { order: 0; }
  .split img { min-height: 280px; }
  .stat { padding-block: clamp(26px, 6vw, 40px); }
  .notice-in { grid-template-columns: 1fr; gap: 16px; }
  .notice-lab { text-align: left; }
}

/* ============ เมนูมือถือ ============ */
.mnav {
  position: fixed; inset: 0; z-index: 100; background: #fff;
  transform: translateX(100%); transition: transform .34s ease;
  display: flex; flex-direction: column; overflow-y: auto;
}
.mnav.open { transform: none; }
.mnav-top { display: flex; align-items: center; justify-content: space-between; padding: 18px var(--gut); border-bottom: 1px solid var(--line); }
.mnav-top img { height: 38px; }
.mnav-top button { font-size: 26px; line-height: 1; color: var(--ink); }
.mnav a {
  display: block; padding: 19px var(--gut); border-bottom: 1px solid var(--line);
  font-size: 14px; letter-spacing: .14em; text-transform: uppercase;
}
/* เมนูย่อยบนมือถือกางไว้เลย ไม่ต้องกดซ้อนอีกชั้น — ย่อหน้าและตัวเล็กลงให้เห็นว่าเป็นลูก */
.mnav a.mnav-sub {
  padding: 13px var(--gut) 13px calc(var(--gut) + 20px);
  font-size: 12px; letter-spacing: .1em; color: var(--ink-soft);
  border-bottom-color: rgba(228,217,209,.55);
}
.mnav a.mnav-sub:hover { color: var(--accent); }

/* ============ แอนิเมชันตอนเลื่อน ============ */
.rise { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s ease; }
.rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none; transition: none; }
  .ticker-track { animation: none; }
}

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


/* ============ หน้าคำถามที่พบบ่อย — แผงพับรายหมวด ============
   หน้าตาตามภาพที่เนยส่ง: หัวเรื่องกลาง แล้วเป็นแผงขาวขอบบางเรียงกัน มีเครื่องหมายบวกด้านขวา
   บีบที่ว่างให้แน่นกว่าหน้าอื่น เพราะทั้งหน้ามีแค่สามแผง */
.qa-page { background: var(--cream); padding: clamp(28px, 3.2vw, 50px) 0 clamp(40px, 4.2vw, 66px); }
.qa-head { text-align: center; margin-bottom: clamp(18px, 2.2vw, 30px); }
.qa-head .eyebrow { margin: 0 0 6px; }
.qa-head h1 { margin: 0; font-size: clamp(38px, 5vw, 72px); }

.qa-list { max-width: 1000px; margin: 0 auto; display: grid; gap: 10px; }
.qa-g { background: #fff; border: 1px solid var(--line); padding: clamp(6px, .8vw, 10px) 0; }
/* ชื่อหมวด — โชว์ตลอด ไม่ใช่ปุ่มพับแล้ว */
.qa-gt {
  margin: 0; padding: clamp(12px, 1.4vw, 18px) clamp(18px, 2vw, 28px) clamp(10px, 1.2vw, 14px);
  font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--accent);
}
.qa-q + .qa-q, .qa-gt + .qa-q { border-top: 1px solid var(--line); }
.qa-hd {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: clamp(13px, 1.5vw, 18px) clamp(18px, 2vw, 28px);
  background: none; border: 0; cursor: pointer; font: inherit; text-align: left; color: var(--ink);
}
.qa-hd:hover b { color: var(--accent); }
.qa-hd b { font-weight: 400; font-size: clamp(13.5px, 1.05vw, 15px); line-height: 1.6; letter-spacing: .01em; transition: color .2s ease; }
.qa-q.open .qa-hd b { color: var(--accent); font-weight: 500; }

/* เครื่องหมาย + วาดด้วยเส้นสองเส้น กางแล้วขีดตั้งหดหายเหลือ − */
.qa-pl { position: relative; width: 15px; height: 15px; flex: none; margin-top: 4px; }
.qa-pl::before, .qa-pl::after { content: ''; position: absolute; background: var(--accent); transition: transform .25s ease; }
.qa-pl::before { left: 0; right: 0; top: 7px; height: 1px; }
.qa-pl::after { top: 0; bottom: 0; left: 7px; width: 1px; }
.qa-q.open .qa-pl::after { transform: scaleY(0); }

.qa-bd { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.qa-in { padding: 0 clamp(46px, 4vw, 60px) clamp(14px, 1.6vw, 20px) clamp(18px, 2vw, 28px); }
.qa-in p { margin: 0; font-size: 14px; line-height: 1.85; color: var(--ink-soft); }

.qa-cta {
  max-width: 1000px; margin: clamp(24px, 2.8vw, 40px) auto 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px;
  font-size: 14px; color: var(--ink-soft);
}
@media (max-width: 720px) {
  .qa-hd { gap: 14px; }
  .qa-hd b { font-size: 14px; }
  .qa-cta { flex-direction: column; text-align: center; gap: 14px; }
}
.qa-cta p { margin: 0; }

/* ============ แถบบริการ 3 ช่อง (ท้ายหน้าแรก) ============
   มาแทนแถบช่องทางการซื้อพื้นเข้ม + แถบประกาศ ตามภาพที่เนยส่ง 2026-09-02
   โครงเดียวกับแถบจุดแข็งด้านบน แต่หัวข้อเป็นตัวหนาขนาดอ่านง่าย ไม่ใช่ตัวพิมพ์ใหญ่เว้นระยะ */
.service { background: var(--cream); border-top: 1px solid var(--line); }
.service-in {
  display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr);
  max-width: var(--wrap); margin-inline: auto;
  padding: clamp(28px, 3.2vw, 46px) var(--gut);
}
.svc-i { text-align: center; padding: 0 clamp(10px, 2vw, 34px); position: relative; min-width: 0; }
.svc-i + .svc-i::before {
  content: ''; position: absolute; left: 0; top: 2px; bottom: 2px; width: 1px; background: var(--line);
}
.svc-ico { display: block; color: var(--accent); margin-bottom: 12px; }
.svc-ico svg { width: clamp(26px, 2.3vw, 34px); height: clamp(26px, 2.3vw, 34px); margin-inline: auto; }
.svc-i b {
  display: block; color: var(--ink); font-weight: 500;
  font-size: clamp(14px, 1.15vw, 16px); letter-spacing: .01em; margin-bottom: 7px;
}
.svc-i > span:not(.svc-ico) {
  display: block; font-size: clamp(12px, .98vw, 13.5px); line-height: 1.7;
  color: var(--ink-soft); text-wrap: balance;
}
@media (max-width: 720px) {
  .service-in { grid-template-columns: 1fr; gap: 26px; padding-inline: var(--gut); }
  .svc-i { padding: 0; }
  .svc-i + .svc-i::before { display: none; }
}

/* ============ หน้าติดต่อ: แถบช่องทางการสั่งซื้อ ============
   บรีฟ 2026-09-02: พื้นน้ำตาลเรียบ ไม่เอาเส้นตาราง แล้วโชว์โลโก้ช่องทางแทนย่อหน้ายาว
   ใช้คลาสเสริม .stores-clean เฉพาะหน้านี้ — หน้าเรื่องราวยังใช้แถบเดิม */
/* พื้นน้ำตาลอ่อนกว่าเดิม (ใช้โทเคน CI --accent-d) — เนยสั่ง 2026-09-03 */
.stores.stores-clean { background: var(--accent-d); }
.stores.stores-clean::before { display: none; }

/* ไอคอนช่องทางขาย: ไม่มีกรอบขาว · ใหญ่ขึ้น · ไม่มีตัวหนังสือ · ทั้งไอคอนคือปุ่มลิงก์ */
.chan {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: clamp(18px, 2.6vw, 40px);
  margin: clamp(26px, 3vw, 40px) auto clamp(30px, 3.4vw, 44px);
  max-width: 1100px;
}
.chan a { display: block; line-height: 0; color: #fff; }
.chan a:hover .chan-i { transform: translateY(-4px); }
.chan-i {
  display: block; transition: transform .22s ease;
}
.chan-i svg, .chan-i img {
  width: clamp(46px, 4.4vw, 62px); height: clamp(46px, 4.4vw, 62px); display: block;
}
/* พื้นหลังแถบเลือกสีเองได้จากหลังบ้าน — ถ้าเลือกสีอ่อน ตัวหนังสือต้องสลับเป็นสีเข้มเอง
   (หัวข้อใหญ่ตั้งสีขาวไว้ใน style ของแท็ก จึงต้อง !important ถึงจะทับได้) */
.stores.km-bg-light .h-sec,
.stores.km-bg-light .eyebrow,
.stores.km-bg-light .band-sub,
.stores.km-bg-light p { color: var(--ink) !important; }
.stores.km-bg-light .eyebrow { opacity: .78; }
@media (max-width: 720px) {
  .chan { gap: 18px 22px; }
  .chan-i svg, .chan-i img { width: 44px; height: 44px; }
}


/* ============ ปรับสัดส่วนภาพบนมือถือให้สมดุล อ่านง่ายขึ้น (เนยสั่ง 2026-09-04) ============ */
@media (max-width: 720px) {
  /* การ์ดบทความ: ภาพเต็มความกว้าง 3:2 ทำให้การ์ดสูงเกือบ 500px ต่อใบ
     เปลี่ยนเป็นแนวนอน ภาพจัตุรัสเล็ก ๆ ข้างซ้าย เนื้อหาอยู่ขวา — เตี้ยลงเหลือราวหนึ่งในสาม */
  .blog-grid { gap: 2px; }
  .bcard { flex-direction: row; align-items: stretch; }
  .bcard-img { flex: 0 0 38%; aspect-ratio: 1 / 1; }
  /* min-width:0 จำเป็นสำหรับกล่อง flex ไม่งั้นข้อความยาวดันการ์ดให้กว้างเกินช่อง (หน้าล้นขวาง) */
  .bcard-body { padding: 15px 15px 15px 17px; justify-content: center; min-width: 0; }
  .bcard-meta { font-size: 10.5px; letter-spacing: .1em; margin-bottom: 6px; }
  .bcard-title { font-size: 16.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  /* คำโปรยยาวเกินไปสำหรับการ์ดแนวนอน ตัดเหลือ 2 บรรทัด */
  .bcard-lead {
    font-size: 12.5px; line-height: 1.65; margin-top: 6px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .bcard-more { display: none; }   /* ทั้งการ์ดกดได้อยู่แล้ว ไม่ต้องมีคำว่าอ่านต่อให้เปลืองที่ */
}

/* ============ คลิปสินค้า + ไลน์วีทเจิร์ม (หน้าแรก) 2026-09-04 ============ */
.vdo { padding: clamp(40px, 4.6vw, 76px) var(--gut); }
/* ต้อง minmax(0,1fr) — ไม่งั้นความกว้างจริงของวิดีโอ (จากโปสเตอร์) จะดันคอลัมน์ซ้ายให้กว้างกว่าขวา */
.vdo-in {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 4px;
  max-width: var(--wrap); margin-inline: auto;
}
/* คลิปเป็นแนวตั้ง 9:16 — วางบนพื้นครีมแบบ contain จะได้เห็นเต็มคลิป ไม่โดนครอปหัว-ท้าย */
/* วิดีโอต้องวางแบบ absolute ไม่งั้นความสูงจะไปเอาตามสัดส่วนของโปสเตอร์ กล่องซ้าย-ขวาเลยสูงไม่เท่ากัน */
.vdo-l { position: relative; background: var(--cream); aspect-ratio: 9 / 16; overflow: hidden; }
/* ค่าเริ่มต้นเต็มกรอบให้สูงเท่าแผงขวา — สลับเป็น "เห็นทั้งคลิป" ได้จากหลังบ้าน (สคริปต์ตั้ง object-fit ทับ) */
.vdo-l video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: var(--cream); }

/* ไม่ล็อกสัดส่วนแล้ว — ความสูงของแถวมาจากคลิปด้านซ้าย แผงนี้ยืดเท่ากันเอง (grid stretch)
   ถ้าใส่ aspect-ratio กลับไป กล่องสองใบจะสูงไม่เท่ากันทันทีเพราะความกว้างไม่เท่ากันแล้ว */
.vdo-r {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  text-align: center; color: var(--ink);
}
.vdo-bg { position: absolute; inset: 0; display: block; }
.vdo-bg img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.vdo-r:hover .vdo-bg img { transform: scale(1.045); }
/* ม่านสว่างหัว-ท้าย ให้ตัวหนังสืออ่านออกทุกภาพ */
.vdo-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(250,247,244,.94) 0%, rgba(250,247,244,.6) 26%,
    rgba(250,247,244,.28) 55%, rgba(250,247,244,.92) 100%);
}
.vdo-top, .vdo-btm { position: relative; display: block; padding: clamp(22px, 2.6vw, 42px); }
.vdo-top .eyebrow { display: block; }
.vdo-top .h-sec {
  display: block; margin: 12px auto 0; max-width: 22ch;
  font-size: clamp(19px, 1.8vw, 27px); line-height: 1.35;
}
.vdo-btm .btn { display: inline-flex; }

@media (max-width: 900px) {
  .vdo-in { grid-template-columns: 1fr; gap: 2px; }
  .vdo-l, .vdo-r { aspect-ratio: 4 / 5; }
}
/* มือถือ: คลิปเป็น 3:4 (เนยสั่ง 2026-09-04) — ต้องอยู่หลังบล็อก 900px ไม่งั้นโดนทับ
   แผงขวา (ภาพไลน์ + การ์ดสินค้า) คงไว้ 4:5 เหมือนเดิม */
@media (max-width: 720px) {
  .vdo-l { aspect-ratio: 3 / 4; }
}

/* จอกลาง: ความสูงของแถวต้องมาจากคลิป ไม่ใช่จากเนื้อหาในแผงขวา */
@media (min-width: 901px) and (max-width: 1100px) {
  .vdo-top, .vdo-btm { padding: 18px 20px; }
  .vdo-buy { gap: 6px; padding-inline: 20px; }
  .vbuy { padding: 9px 6px 10px; }
}

/* ============ แถบรางวัล (หน้าแรก) — ยกโครงจากม็อกอัพชุดก่อน 2026-09-03 ============ */
/* ทั้งแถบเป็นสีเดียวกัน ไม่มีกล่องขาวคั่น · ทุกอย่างใหญ่ขึ้น (เนยสั่ง 2026-09-04) */
.awb { background: var(--cream-2); padding: clamp(54px, 6.4vw, 110px) var(--gut); }
.awb-in {
  display: grid; grid-template-columns: 1fr 1.08fr; align-items: center;
  gap: clamp(26px, 3.4vw, 64px); max-width: var(--wrap); margin-inline: auto;
}
.awb-card { background: none; padding: 0 clamp(0px, 1vw, 20px); }
.awb-card .eyebrow { text-align: left; }
.awb-card .h-sec { text-align: left; margin: 14px 0 0; font-size: clamp(27px, 3vw, 44px); }
.awb-stats {
  display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr);
  gap: clamp(14px, 1.8vw, 30px); margin: clamp(26px, 3vw, 46px) 0 clamp(26px, 3vw, 44px);
}
.awb-st b {
  display: block; font-family: 'Montserrat', 'Noto Sans Thai', 'Montserrat-fb', 'NotoThai-fb', system-ui, sans-serif; font-weight: 300;
  font-size: clamp(34px, 3.8vw, 56px); line-height: 1; color: var(--ink); letter-spacing: .01em;
  font-variant-numeric: lining-nums tabular-nums;
}
.awb-st span { display: block; margin-top: 10px; font-size: 13px; line-height: 1.6; color: var(--ink-soft); }
.awb-card .btn { display: inline-flex; }

/* ถ้วยรางวัล: พื้นโปร่ง วางบนสีพื้นของแถบตรง ๆ · เด้งขึ้นมาทีละใบตอนเลื่อนถึง */
/* ทุกใบสูงเท่ากันและได้พื้นที่เท่ากัน (ไฟล์ถ้วยครอบตัวถ้วยพอดีอยู่แล้ว สูงเท่ากัน = ตัวถ้วยเท่ากันจริง)
   ใช้กริดช่องเท่า ๆ กัน ฐานถ้วยเรียงระดับเดียวกัน — เนยขอให้สมดุล 2026-09-04 */
.awb-pic {
  background: none; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  align-items: end; gap: clamp(6px, 1vw, 18px);
}
.awb-tp { display: block; line-height: 0; width: 100%; }
/* ไฟล์ถ้วยแต่ละใบครอบตามตัวถ้วยพอดี ถ้าบังคับสูงเท่ากันหมด ถ้วยเล็กจะดูใหญ่ผิดจริง
   จึงไล่สัดส่วนตามภาพอ้างอิง: ใบกลางสูงสุด · ซ้าย 78% · ขวา 87% */
.awb-pic { --tp: clamp(210px, 27vw, 420px); }
.awb-tp img {
  height: var(--tp); width: 100%; object-fit: contain; object-position: bottom;
  filter: drop-shadow(0 18px 26px rgba(36, 26, 21, .16));
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1);
}
.awb-tp:hover img { transform: translateY(-12px) scale(1.04); }
/* เด้งขึ้นมาตอนส่วนนี้เลื่อนเข้ามาในจอ (ไล่ทีละใบด้วย --i) */
.rise.in .awb-tp img { animation: awPop .7s cubic-bezier(.34, 1.56, .64, 1) backwards; animation-delay: calc(var(--i, 0) * .13s); }
@keyframes awPop {
  0% { opacity: 0; transform: translateY(28px) scale(.86); }
  100% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rise.in .awb-tp img { animation: none; }
  .awb-tp:hover img { transform: none; }
}

/* แถบบทความหน้าแรก — ใช้การ์ดชุดเดียวกับหน้า Blog */
.sec-sub {
  max-width: 620px; margin: 14px auto 0; text-align: center;
  font-size: 14.5px; line-height: 1.9; color: var(--ink-soft);
}
[data-sec="journal"] { padding-bottom: clamp(48px, 5.5vw, 84px); }

@media (max-width: 900px) {
  .awb-in { grid-template-columns: 1fr; }
  .awb-pic { order: -1; gap: 8px; }
  .awb-pic { --tp: clamp(160px, 34vw, 260px); }
}
@media (max-width: 560px) {
  /* ตัวเลข 3 ช่องอยู่แถวเดียวได้บนมือถือ แค่ย่อตัวอักษรลง — แบ่ง 2 ช่องจะเหลือรูโหว่ */
  .awb-stats { grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 10px; }
  .awb-st b { font-size: 25px; }
  .awb-st span { font-size: 11px; line-height: 1.5; margin-top: 6px; }
}

/* ============ ส่วนผสม + ผลลัพธ์ (หน้าสินค้า) 2026-09-04 ============ */
.pir { padding: clamp(26px, 3.4vw, 56px) 0 clamp(38px, 4.6vw, 76px); }
.pir-in { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.pir-card { background: var(--cream); display: flex; flex-direction: column; }
/* 4:3 บนจอกว้างแปลว่ารูปสูง ~690px กินจอทั้งหน้า (แอลทัก 10 ก.ย. 69)
   เตี้ยลงตามความกว้างจอ — จอยิ่งกว้าง กรอบยิ่งแบน ให้เห็นทั้งคู่พร้อมคำอธิบายในจอเดียว */
.pir-pic { aspect-ratio: 16 / 10; overflow: hidden; }
@media (min-width: 1500px) { .pir-pic { aspect-ratio: 16 / 9; } }
.pir-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.pir-card:hover .pir-pic img { transform: scale(1.03); }
.pir-tx { padding: clamp(22px, 2.6vw, 42px); }
.pir-h {
  font-family: 'Montserrat', 'Noto Sans Thai', 'Montserrat-fb', 'NotoThai-fb', system-ui, sans-serif;
  font-weight: 300; font-size: clamp(20px, 2vw, 29px); line-height: 1.3;
  margin: 12px 0 12px; color: var(--ink);
}
.pir-b { margin: 0; font-size: 14px; line-height: 1.9; color: var(--ink-soft); }
.pir-tx .btn { display: inline-flex; margin-top: 20px; }
@media (max-width: 720px) {
  .pir-in { grid-template-columns: 1fr; gap: 2px; }
  .pir-pic { aspect-ratio: 16 / 10; }
}

/* ============ ส่วนผสมแบบป๊อปอัป (หน้าสินค้า) — เนยสั่ง 2026-09-03 ============ */
/* ลิงก์เล็ก ๆ ใต้คำโปรย เหนือแถวหยิบใส่ตะกร้า */
.ing-link {
  display: inline-block; margin: 0 0 22px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
  text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px;
}
.ing-link:hover { color: var(--accent); }

.km-ing {
  position: fixed; inset: 0; z-index: 260; padding: 20px;
  background: rgba(36, 26, 21, .55); display: none; place-items: center;
}
.km-ing.on { display: grid; }
.km-ing-in {
  position: relative; width: min(100%, 640px); max-height: 86vh; overflow: auto;
  background: var(--paper); border: 1px solid var(--line);
  padding: clamp(28px, 3.2vw, 44px) clamp(22px, 3vw, 40px) clamp(24px, 3vw, 38px);
  text-align: left;
}
.km-ing-x {
  position: absolute; top: 6px; right: 12px; border: 0; background: none; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--ink-soft);
}
.km-ing-x:hover { color: var(--accent); }
.km-ing-t {
  margin: 0; font-size: 12.5px; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink);
}
.km-ing-s { margin: 6px 0 18px; font-size: 13px; color: var(--ink-soft); letter-spacing: .04em; }
.km-ing .pd-body { padding-bottom: 0; }
.km-ing .pd-body p { font-size: 13.5px; line-height: 1.85; }

/* ============ ช่องทางการสั่งซื้อแบบป๊อปอัป (หน้าสินค้า) — เนยสั่ง 2026-09-03 ============ */
/* แถวเปิดกล่อง: หน้าตาเหมือน summary ของหัวข้อพับ ต่อท้ายกันพอดีด้วย margin ลบ 1px */
.acc-btn {
  width: 100%; margin: -1px 0 0; padding: 18px 0; cursor: pointer;
  border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: none; color: var(--ink); font: inherit;
  font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase;
  display: flex; justify-content: space-between; align-items: center;
}
.acc-btn::after { content: '+'; font-size: 18px; color: var(--ink-soft); }
.acc-btn:hover { color: var(--accent); }

.km-buy {
  position: fixed; inset: 0; z-index: 260; padding: 20px;
  background: rgba(36, 26, 21, .55); display: none; place-items: center;
}
.km-buy.on { display: grid; }
.km-buy-in {
  position: relative; width: min(100%, 520px); text-align: center; color: #fff;
  background: var(--accent-d); padding: clamp(34px, 4vw, 52px) clamp(24px, 3vw, 44px);
  max-height: 90vh; overflow: auto;
}
.km-buy-x {
  position: absolute; top: 8px; right: 12px; border: 0; background: none; cursor: pointer;
  font-size: 26px; line-height: 1; color: rgba(255, 255, 255, .8);
}
.km-buy-x:hover { color: #fff; }
.km-buy-t {
  font-family: 'Montserrat', 'Noto Sans Thai', 'Montserrat-fb', 'NotoThai-fb', system-ui, sans-serif; font-weight: 300;
  font-size: clamp(24px, 2.6vw, 32px); letter-spacing: .06em; margin: 8px 0 0; color: #fff;
}
/* ในกล่องแคบกว่าแถบเต็มหน้า ต้องย่อไอคอนกับช่องไฟให้ครบ 5 ใบในบรรทัดเดียว */
.km-buy .chan { margin: clamp(22px, 2.6vw, 32px) auto clamp(24px, 2.8vw, 34px); gap: 16px; flex-wrap: nowrap; }
.km-buy .chan-i img, .km-buy .chan-i svg { width: 56px; height: 56px; }
@media (max-width: 560px) {
  .km-buy .chan { gap: 10px; }
  .km-buy .chan-i img, .km-buy .chan-i svg { width: 44px; height: 44px; }
}
.km-buy .btn { display: inline-flex; }
/* เลือกสีอ่อนจากหลังบ้าน = ตัวหนังสือในกล่องต้องเป็นสีเข้ม */
.km-buy-in.km-bg-light, .km-buy-in.km-bg-light .km-buy-t, .km-buy-in.km-bg-light .eyebrow { color: var(--ink); }
.km-buy-in.km-bg-light .km-buy-x { color: var(--ink-soft); }

/* ============ สมาชิก + โค้ดส่วนลด (เนยสั่ง 2026-09-03) ============ */
/* กล่องเข้าสู่ระบบจำลอง — ไม่มีช่องรหัสผ่าน เพราะม็อกอัพไม่เก็บและไม่ส่งอะไรออกไป */
.km-mo {
  position: fixed; inset: 0; z-index: 300; padding: 20px;
  background: rgba(36, 26, 21, .5); display: grid; place-items: center;
}
.km-mo-in {
  position: relative; background: var(--paper); width: min(100%, 420px);
  border: 1px solid var(--line); padding: clamp(26px, 3vw, 38px);
  max-height: 90vh; overflow: auto;
}
.km-mo-x {
  position: absolute; top: 8px; right: 10px; border: 0; background: none;
  font-size: 24px; line-height: 1; color: var(--ink-soft); cursor: pointer;
}
.km-mo-x:hover { color: var(--accent); }
.km-mo h3 {
  font-family: 'Montserrat', 'Noto Sans Thai', 'Montserrat-fb', 'NotoThai-fb', system-ui, sans-serif; font-weight: 300;
  font-size: clamp(24px, 2.4vw, 30px); margin: 6px 0 10px; color: var(--ink);
}
.km-mo-s { margin: 0 0 20px; font-size: 13px; line-height: 1.7; color: var(--ink-soft); }
.km-mo .f-lab { display: block; margin: 14px 0 6px; }
.km-mo .btn { width: 100%; margin-top: 20px; }
.km-mo-e { margin: 10px 0 0; min-height: 18px; font-size: 12.5px; color: #A2402F; }
.km-mo-n { margin: 16px 0 0; font-size: 11.5px; line-height: 1.7; color: var(--ink-soft); }

/* แถบบอกสถานะสมาชิกบนหน้าสั่งซื้อ */
.mem-bar {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
  border: 1px solid var(--accent); background: var(--cream-2);
  padding: 16px 18px; margin-bottom: 26px;
}
.mem-bar.on { border-color: var(--line); background: var(--cream); }
.mem-bar > span { font-size: 13px; line-height: 1.6; color: var(--ink-soft); }
.mem-bar b { display: block; font-size: 13px; font-weight: 500; color: var(--ink); letter-spacing: .02em; }
.mem-bar i { font-style: normal; }
.mem-act { display: flex; gap: 8px; flex: none; }
.mem-btn {
  border: 1px solid var(--accent); background: var(--accent); color: #fff;
  font: inherit; font-size: 12px; letter-spacing: .06em; padding: 9px 16px; cursor: pointer;
}
.mem-btn:hover { background: var(--accent-d); border-color: var(--accent-d); }
.mem-btn.ghost { background: none; color: var(--ink); border-color: var(--line); }
.mem-btn.ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ช่องกรอกโค้ด + โค้ดแนะนำ */
.promo-in { display: flex; gap: 8px; }
.promo-in .f-in { flex: 1; text-transform: uppercase; letter-spacing: .08em; }
.promo-in .btn { flex: none; padding-inline: 22px; }
.promo-on {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between;
  border: 1px solid var(--accent); background: var(--cream-2); padding: 13px 16px;
}
.promo-on b { letter-spacing: .1em; }
.promo-on span { font-size: 13px; color: var(--ink-soft); }
.promo-msg { margin: 10px 0 0; min-height: 18px; font-size: 12.5px; }
.promo-msg.bad { color: #A2402F; }
.promo-msg.ok { color: #3F7A5A; }
.promo-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.promo-c {
  text-align: left; font: inherit; cursor: pointer; padding: 13px 15px;
  border: 1px dashed var(--line); background: var(--cream); color: var(--ink);
}
.promo-c:hover { border-color: var(--accent); }
.promo-c.on { border-style: solid; border-color: var(--ink); background: var(--cream-2); }
.promo-c.off { opacity: .62; }
.promo-c b { display: block; font-size: 13px; letter-spacing: .1em; margin-bottom: 4px; }
.promo-c span { display: block; font-size: 12.5px; color: var(--ink-soft); }
.promo-c i { display: block; font-style: normal; font-size: 11.5px; color: var(--ink-soft); margin-top: 4px; }
.promo-c em { display: block; font-style: normal; font-size: 11.5px; color: #A2402F; margin-top: 5px; }

@media (max-width: 720px) {
  .mem-bar, .promo-on { flex-direction: column; align-items: flex-start; }
  .mem-act { width: 100%; }
  .mem-act .mem-btn { flex: 1; }
  .promo-in { flex-direction: column; }
  .promo-in .btn { width: 100%; }
}

/* ป้ายรุ่นไฟล์ท้ายเว็บ — เล็ก ๆ ไว้ตรวจว่าเครื่องนั้นได้ไฟล์ล่าสุดหรือยัง */
.ft-build { display: block; margin-top: 6px; font-size: 10px; letter-spacing: .1em; color: var(--ink-soft); opacity: .55; }

/* สินค้าที่กดซื้อได้บนแผงขวาของส่วนคลิป (เนยสั่ง 2026-09-04)
   วางบนภาพไลน์สินค้า จึงต้องมีพื้นทึบอ่อน ๆ ไม่งั้นตัวหนังสือจมไปกับภาพ */
.vdo-buy {
  position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px; padding: 0 clamp(22px, 2.6vw, 42px); margin-top: auto;
}
.vbuy {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 8px 14px; text-align: center; text-decoration: none;
  background: rgba(255, 255, 255, .82); backdrop-filter: blur(2px);
  border: 1px solid rgba(228, 217, 209, .9); transition: background .25s ease, transform .25s ease;
}
.vbuy:hover { background: #fff; transform: translateY(-2px); }
.vbuy-img { display: block; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; }
.vbuy-img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.vbuy-name {
  font: 400 10.5px/1.45 Montserrat, system-ui, sans-serif; letter-spacing: .06em;
  color: var(--ink); text-transform: uppercase;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vbuy-price { font: 500 12.5px/1 Montserrat, system-ui, sans-serif; color: var(--ink); }
.vbuy-cta {
  font: 400 10px/1 Montserrat, system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); border-bottom: 1px solid currentColor; padding-bottom: 2px; margin-top: 2px;
}
/* แผงขวาต้องเรียงเป็นคอลัมน์ เพื่อให้แถวสินค้าดันไปอยู่เหนือปุ่มท้ายแผง */
.vdo-r { display: flex; flex-direction: column; }
.vdo-top { flex: 0 0 auto; }
.vdo-btm { flex: 0 0 auto; }
@media (max-width: 720px) {
  .vdo-buy { gap: 6px; padding: 0 16px; }
  .vbuy { padding: 8px 5px 10px; }
  .vbuy-name { font-size: 9.5px; -webkit-line-clamp: 2; }
  .vbuy-price { font-size: 11.5px; }
  .vbuy-cta { font-size: 9px; }
}

/* ============ มือถือ: หัวเว็บและระยะห่าง (เนยสั่ง 2026-09-05) ============ */
@media (max-width: 720px) {
  /* 3 ขีดซ้ายสุด · โลโก้กลางจริง ๆ (สองฝั่งกว้างไม่เท่ากัน จึงต้องอ้างขอบนอกของ .hd) · ไอคอนขวา */
  .hd-in { gap: 0; position: relative; }
  .burger { order: 1; margin-left: -6px; }
  .hd-logo {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    flex: 0 0 auto; z-index: 1;
  }
  /* กล่องไอคอนสลายตัวเอง ลูกแต่ละตัวจึงเรียงในแถวหัวเว็บได้อิสระ
     ลำดับ: 3 ขีด (1) → ปุ่มภาษา (2) → ที่เหลือชิดขวา (3) · โลโก้เป็น absolute จึงไม่กินที่ */
  .hd-ico { display: contents; }
  .hd-ico > * { order: 3; }
  .hd-ico > [data-lang-toggle] { order: 2; margin-right: auto; }

  /* ปุ่มเปลี่ยนภาษาเล็กลง — ตัวอักษร EN/TH ยังอ่านออกแต่ไม่กินที่ */
  .hd-ib { padding: 7px 5px; gap: 3px; }
  .hd-ib svg { width: 17px; height: 17px; }
  [data-lang-toggle] svg { width: 15px; height: 15px; }
  .hd-lgc { font-size: 9px; letter-spacing: .06em; }

  /* ---------- ระยะห่างระหว่างส่วน: เดิมห่างเกินไปบนจอแคบ ---------- */
  .sec-head { padding: 38px 0 20px; }
  .vdo { padding-block: 20px; }
  .band-in { padding-block: 40px; }
  .cxp, .prose { padding-block: 40px; }
  .service-in { padding-block: 22px; }
  .journal-more, .sec-more { padding-block: 22px; }
}

/* ============ สีพื้นหลังที่ตั้งจากหลังบ้าน (2026-09-05) ============
   ส่วนที่ถูกทาสีเข้ม ต้องสลับตัวอักษรเป็นสีอ่อน ไม่งั้นอ่านไม่ออก
   (ตรงข้ามกับ .km-bg-light ที่ใช้กับแถบซึ่งเดิมเป็นพื้นเข้มแล้วถูกทาสีอ่อน) */
.km-bg-dark, .km-bg-dark .h-sec, .km-bg-dark .eyebrow, .km-bg-dark p,
.km-bg-dark .sec-head, .km-bg-dark .band-sub, .km-bg-dark h2, .km-bg-dark h3 { color: #F6F1EC; }
.km-bg-dark .btn-ghost { border-color: rgba(246,241,236,.6); color: #F6F1EC; }
.km-bg-dark .btn-ghost:hover { background: rgba(246,241,236,.12); }

/* ============ การตัดบรรทัด (เนยสั่ง 2026-09-07) ============
   ปัญหา: ย่อหน้าหลายที่มีบรรทัดสุดท้ายเหลือแค่ 3-9% ของความกว้าง = คำโดดอยู่บรรทัดเดียว
   ลองใช้ text-wrap: pretty แล้วดีขึ้นน้อยมาก (คำโดด 31 จุด เหลือ 27)
   ใช้ balance ทั้งเนื้อความและหัวข้อได้ผลจริง เหลือ 1 จุด — เบราว์เซอร์เกลี่ยความยาวทุกบรรทัดให้ใกล้กัน
   (ย่อหน้ายาวเกิน 6 บรรทัด เบราว์เซอร์จะข้ามให้เอง บทความยาวจึงไม่ได้รับผลกระทบ)
   วางไว้ท้ายไฟล์เพื่อให้ชนะกฎเดิม */
/* text-wrap เป็นสมบัติที่ตกทอด ตั้งที่ body ที่เดียวจึงมีผลทุกชิ้นทุกหน้า
   เบราว์เซอร์ข้ามให้เองเมื่อข้อความยาวเกิน 6 บรรทัด (บทความยาวจึงเรียงปกติเหมือนเดิม) */
body { text-wrap: balance; }

/* ---------- การขึ้นบรรทัดที่พิมพ์เอง (เนยสั่ง 2026-09-07) ----------
   จอกว้าง: ขึ้นบรรทัดตามที่พิมพ์ · จอแคบ: ข้ามไป ให้เบราว์เซอร์เกลี่ยบรรทัดเอง
   .km-nl-sp คือช่องว่างสำรองสำหรับข้อความอังกฤษ ปกติซ่อนไว้ (ไม่งั้นเว้นวรรคซ้อนตอนขึ้นบรรทัดจริง) */
.km-nl-sp { display: none; font-style: normal; }
@media (max-width: 720px) {
  h1 .km-nl, h2 .km-nl, h3 .km-nl,
  .h-sec .km-nl, .art-title .km-nl, .bcard-title .km-nl, .lrow-name .km-nl,
  .band-sub .km-nl, .sec-sub .km-nl, .pgh-in .km-nl { display: none; }
  h1 .km-nl-sp, h2 .km-nl-sp, h3 .km-nl-sp,
  .h-sec .km-nl-sp, .art-title .km-nl-sp, .bcard-title .km-nl-sp, .lrow-name .km-nl-sp,
  .band-sub .km-nl-sp, .sec-sub .km-nl-sp, .pgh-in .km-nl-sp { display: inline; }
}

/* ตัวมัดคำท้ายข้อความไม่ให้แตกเป็นบรรทัดโดด — ใส่/ถอดโดยสคริปต์ ไม่ต้องแก้เอง */
.km-nw { white-space: nowrap; }

/* ─────────────────────────────────────────────────────────────────────────────
   กันหน้าล้นแนวนอนบนมือถือ (8 ก.ย. 69)
   อาการที่เจอ: เปิด /blog.html ต่อจากหน้าอื่น แล้วหน้าเลื่อนซ้ายขวาได้ 233px
   วัดได้ innerWidth = 623 ทั้งที่จอกว้าง 390 ⇒ มีชิ้นกว้างเกินไปดันให้เบราว์เซอร์
   ขยายพื้นที่วางหน้า แล้วกริดบทความก็กว้างตาม (การ์ดกว้าง 602px)
   ใช้ clip ไม่ใช่ hidden — hidden จะทำให้ body กลายเป็นกล่องเลื่อน
   แล้ว position:sticky ของหัวเว็บจะเพี้ยน */
@media (max-width: 900px) {
  html, body { max-width: 100%; overflow-x: clip; }
}

/* ข้อความยาวที่ไม่มีช่องว่าง (อีเมลสมาชิก) ล้นออกนอกการ์ดในหน้ายืนยันคำสั่งซื้อ */
.ok-kv b, .ok-kv span, .mem-bar span, .sum-row span, .ok-line span {
  overflow-wrap: anywhere;
}

/* หัวเรื่องสำหรับโปรแกรมอ่านหน้าจอและบอตค้นหา — ไม่แสดงบนจอ แต่ยังอยู่ในหน้า
   (ดีไซน์หน้าแรกใช้ภาพเปิดเป็นหัวเรื่องแทน จึงไม่มี h1 ที่มองเห็น) */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   คำไทยห้ามถูกหั่นครึ่งคนละบรรทัด (แอลสั่ง 10 ก.ย. 69)
   ตัวห่อใส่/ถอดโดย kmThaiNoBreak() ใน app.js — รายละเอียดเหตุผลอยู่ที่นั่น
   ⚠️ อย่าเปลี่ยนเป็น word-break: keep-all — ทดสอบตรง ๆ แล้ว Chrome ไม่บังคับใช้กับภาษาไทย
      (กล่องทดสอบสูงเท่ากันเป๊ะทั้งแบบเปิดและปิด ตัดกลางคำเหมือนเดิมทุกจุด) */
.km-tb { white-space: nowrap; }
.km-nb { white-space: nowrap; }   /* คำที่มีขีดในชื่อสินค้า (kmFitNames) */
/* ─────────────────────────────────────────────────────────────────────────────
   ขนาดรูปให้พอดีจอ (แอลสั่ง 10 ก.ย. 69)
   วัดจากหน้าจริงก่อนแก้: รูปคู่ในหน้าสินค้าสูง ~690px บนจอกว้าง 1850
   · รูปสินค้าโตตามความกว้างจอไม่มีเพดาน · รูปแถวเรื่องเล่าสูง 808–1042px บนจอสูง 900

   ⚠️ สิ่งที่ลองแล้วใช้ไม่ได้ (10 ก.ย. 69) — อย่าทำซ้ำ:
   1) คุมความสูงแถว (.split / .cxp) แล้วให้ตัวหนังสือเลื่อนในกล่องตัวเอง
      ⇒ วัดแล้วตัดข้อความหาย 37 จุด รวมปุ่ม ดูข้อมูลผลิตภัณฑ์ทั้งหมด
   2) ล็อกสัดส่วนรูปแล้ววางกลางแถว ⇒ เกิดช่องครีมโล่งใต้รูป ดูเหมือนงานไม่เสร็จ

   ✅ วิธีที่ 3 (ใช้อยู่): รูป ติดจอ — สูงเท่าจอที่เหลือใต้หัวเว็บพอดี แล้วเกาะตามการเลื่อน
      ตัวหนังสือยาวแค่ไหน รูปก็ไม่สูงเกินจอ (ข้อความเลื่อนผ่าน รูปติดอยู่)
      ทำไมไม่มีช่องโหว่: รูปสูงเท่าช่องจอพอดี ตอนแถวเลื่อนพ้น รูปปล่อยตัวตอนขอบล่างชนกัน
      ส่วนที่ว่างในคอลัมน์จึงอยู่เหนือหัวเว็บเสมอ มองไม่เห็น
      ⚠️ ความสูงต้องเป็น 100vh − หัวเว็บ พอดี — ถ้าเตี้ยกว่านั้น ช่องโหว่จะโผล่ใต้รูป (= วิธี 2)
      ⚠️ บรรพบุรุษของแถวห้ามมี overflow: hidden ไม่งั้น sticky ตาย (ตรวจแล้ว 10 ก.ย. ไม่มี) */
/* ── เทมเพลตรูปแถวเรื่องเล่า (แอลสั่ง 10 ก.ย. 69 หลังดูจอ 1900: "ภาพใหญ่เกินไป ยึดเป็นเทมเพลตไปเลย")
   กรอบรูป = สูงไม่เกิน 620px และไม่เกินจอ · เนื้อหาทั้งแถวกว้างไม่เกิน 1440px วางกลาง (แถบพื้นหลังยังเต็มจอ)
   รูปติดจอตามการเลื่อนเหมือนเดิม · ส่วนของคอลัมน์ที่เกินกรอบรูป (ข้อความยาว) เห็นรูปเดียวกันแบบเบลอ
   — ตัวห่อ .split-pic ใส่โดย kmSplitWrap() ใน app.js */
@media (min-width: 901px) {
  .split { align-items: stretch; padding-inline: max(0px, calc((100% - 1440px) / 2)); }
  /* ตัดขอบเบลอด้วย clip-path ไม่ใช่ overflow:hidden — overflow:hidden จะทำให้กรอบนี้กลายเป็นกล่องเลื่อนของ sticky
     รูปเลยไป "ติดกรอบ" (เว้นบน 78px) แทนที่จะติดจอ (เจอจริง 10 ก.ย. 69) */
  /* overflow: clip (ไม่ใช่ hidden) — ตัดขอบเบลอออกจากความกว้างหน้าด้วย โดยไม่กลายเป็นกล่องเลื่อน sticky ยังติดจอเหมือนเดิม
     (clip-path อย่างเดียวซ่อนภาพได้ แต่หน้ายังกว้างเกินจอ 24px ที่ 1280/1440 — วัดเจอ 10 ก.ย. 69) */
  /* 10 ก.ย. 69 รอบ 3 — แอล: "ปรับให้มันพอดี ไม่ต้องเอาข้อความไปข้างล่าง เว้นกว้างเกินไป"
     ⇒ รูปสูงเท่าคอลัมน์ข้อความเป๊ะ (ไม่ตรึง 620 · ไม่ทิ้งช่องเบลอใต้รูป) ข้อความทั้งบทอยู่ข้างรูปเหมือนเดิม */
  /* เทมเพลตรูป: กรอบเดียวกันทุกบท 640×430 กลางคอลัมน์ (แอล 10 ก.ย. 69 "ทำรูปให้เล็กลงกว่านี้ ทำเป็นเทมเพลตเท่า ๆ กัน")
     คอลัมน์ข้อความสูงเท่าไหร่ รูปก็คงขนาดนี้ อยู่กึ่งกลางแนวตั้ง — ไม่ยืดตามข้อความ ไม่มีช่องเบลอ */
  .split { align-items: center; }
  .split-pic { position: relative; box-sizing: border-box; width: min(100%, 640px); height: 430px; margin: 32px auto; align-self: center; overflow: clip; background: var(--cream); min-height: 0; }
  .split-pic img {
    position: absolute; inset: 0; display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover;
  }
  /* ข้อความอยู่กึ่งกลางแถว (flex เดิม) — แถวสั้นกว่ากรอบรูปก็ยังไม่ลอยขึ้นบน */
  .split-txt { align-self: stretch; padding: clamp(28px, 3vw, 44px) clamp(36px, 4vw, 64px); }
  /* รายการ/คำคม/หมายเหตุอยู่ข้างรูป — บีบช่องไฟให้บทยาวไม่ยืด */
  .split-txt .kv { margin-top: 16px; }
  .split-txt .kv li { padding: 9px 0; font-size: 13.5px; line-height: 1.7; }
  .split-txt .qt { margin-top: 16px; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.6; padding-left: 16px; }
  .split-txt .note { margin-top: 12px; font-size: 12px; line-height: 1.7; }
  /* ช่องไฟตัวหนังสือแน่นขึ้นเล็กน้อย ให้บทที่ยาวเข้าใกล้กรอบรูป 620 (แอลบอกว่าใหญ่และยาวจนไม่น่าอ่าน) */
  .split-txt p { line-height: 1.78; margin-top: 14px; }
  /* ตัวหนังสือในบทเรื่องราวเล็กลง (แอลสั่ง 10 ก.ย. 69 "ปรับตัวหนังสือให้เล็กลงก็ได้เพราะมันใหญ่เกินไป")
     หัวบท 32–52 → 26–36 · เนื้อ 15 → 14 · ย่อหน้านำ 16.5 → 15 — เฉพาะจอคอม มือถือเท่าเดิม */
  .split-txt .h-sec { font-size: clamp(26px, 2.4vw, 36px); line-height: 1.18; }
  .split-txt p { font-size: 14px; line-height: 1.75; margin-top: 12px; }
  .split-txt .lead-p { font-size: 15px; }
  .split-more { font-size: 14px; }
  .split-more .qt { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.65; }
  /* ของแถมของบท (รายการ · คำคม · หมายเหตุ) ที่ kmSplitTrim ย้ายลงมา — แถบเต็มความกว้างใต้รูป จัดเป็นคอลัมน์ */
  .split-more {
    grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px 48px; align-items: start; padding: 26px clamp(36px, 4vw, 64px) 40px;
    border-top: 1px solid var(--line);
  }
  .split-more > * { margin: 0 !important; }
  .split-more .kv { padding-left: 1.1em; }
  .split-more .note { font-size: 12.5px; line-height: 1.75; color: var(--ink-soft); }

  /* หน้าคอลเลกชัน: กล่องรูปสินค้าเป็นเทมเพลตเดียวกันทุกรายการทุกหมวด 600×460 กลางคอลัมน์ รูปสูงไม่เกิน 340
     (แอล 10 ก.ย. 69 "ปรับหน้าสินค้าทุกรายการและทุกหมวดให้รูปเล็กกว่านี้" — เดิมกล่องครีมสูงเท่าจอ ~820 รูป 420) */
  .cxp { align-items: center; padding-inline: max(0px, calc((100% - 1440px) / 2)); }
  .cxp-media {
    position: static; box-sizing: border-box; width: min(100%, 640px); height: 540px; min-height: 0;
    margin: 28px auto; align-self: center;
  }
  /* ช่องรูปในกล่องเท่ากันเป๊ะทุกชิ้น 420×340 (รูปแนวนอน/แนวตั้งอยู่ในช่องเดียวกัน) */
  /* แอล 10 ก.ย. 69 รอบ 2 "เล็กไป เอาให้พอดี แต่ต้องเท่ากัน" — ช่องรูปเต็มกล่องเกือบสุด 600×500 ทุกชิ้น */
  .cxp-media img { width: 600px; height: 500px; max-width: 94%; max-height: none; object-fit: contain; }
  .cxp-txt { align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
}

/* มือถือ: แถวเรียงบนล่าง รูปไม่ต้องสูงตามตัวหนังสือแล้ว คุมได้ตรง ๆ */
@media (max-width: 900px) {
  /* จอแคบ/แท็บเล็ต: กรอบรูปเทมเพลตเดียวกัน 3:2 เต็มคอลัมน์ ไม่ยืดตามข้อความ (10 ก.ย. 69) */
  .split-pic { align-self: center; }
  .split img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; min-height: 0; max-height: none; object-fit: cover; }
}

/* รูปสินค้าหน้าเดี่ยว — จอกว้างมากแล้วรูปโตตามจนต้องเลื่อนดู
   คุมที่ความกว้างของคอลัมน์รูป ไม่แตะสัดส่วน 1:1
   (รูปสินค้าเป็นภาพจัตุรัส ถ้าไปบีบสัดส่วนจะโดนครอปหัว-ท้าย) */
.pdp-media { max-width: 520px; width: 100%; }
/* พอรูปแคบลง คอลัมน์ซ้ายเหลือที่ว่างข้าง ๆ เยอะ สองฝั่งเลยห่างกันผิดสัดส่วน
   ⇒ บีบสองคอลัมน์ให้เท่าเนื้อหาจริงแล้ววางไว้กลางหน้า */
@media (min-width: 901px) {
  .pdp { grid-template-columns: minmax(0, 520px) minmax(0, 560px); justify-content: center; }
}
@media (max-width: 900px) { .pdp-media { max-width: none; } }