/* ============================================================
pm-layout.css — container · grid · ระยะห่างของ section
ที่มา: docs/design.md §8.1, §8.2, §8.4
⛔ ห้ามมีค่า hex (B-1) · ⛔ ห้ามใช้ระยะนอกสเกล --s1…--s8 (§8.1)
============================================================ */
/* ---- Container (B-6) — design.md §8.2 ----
กฎที่แก้อาการเว็บเบ้ซ้าย · ทุก section ต้องมี container นี้
⚠️ ห้ามใส่ margin:0 แบบ inline ทับ — เป็นสาเหตุจริงของอาการเบ้ซ้าย 6 ก.ย.
เงื่อนไขผ่าน: เปิดที่ 1568px แล้วไม่มี section ใดเบ้ */
.pm-container{
max-width:var(--wrap); /* 1240px */
margin:0 auto;
padding-inline:var(--pad); /* 40 → 40 → 22 (pm-tokens.css) */
}
/* ---- ระยะห่างแนวตั้งของ section — design.md §8.1 ----
ค่าย่อตามหน้าจอมาจาก pm-tokens.css เอง (--s7 96→72→56 · --s8 128→88→64)
จึงไม่ต้องเขียน media query ซ้ำที่นี่ */
.pm-section{ padding-block:var(--s7); }
.pm-band{ padding-block:var(--s8); }
/* แถบเต็มความกว้างที่เป็นพื้นเข้ม / พื้น brand — B-2:
ไม่เกิน 1 แถบต่อ 1 section และสองแถบเข้มต้องไม่ติดกัน */
.pm-band--night{ background:var(--color-night); color:var(--color-on-night); }
.pm-band--brand{ background:var(--color-brand); color:var(--color-on-night); }
.pm-band--night h1,.pm-band--night h2,.pm-band--night h3,
.pm-band--night h4,.pm-band--night h5,.pm-band--night h6,
.pm-band--brand h1,.pm-band--brand h2,.pm-band--brand h3,
.pm-band--brand h4,.pm-band--brand h5,.pm-band--brand h6{ color:var(--color-on-night); }
/* ---- โครงสองคอลัมน์ เนื้อหา + TOC — design.md §8.2 ----
720 + 64 + 300 = 1084 ≤ 1240 − (40×2) = 1160 ✅ พอดีในกรอบ container */
.pm-shell{
display:grid;
grid-template-columns:minmax(0,var(--measure-body)) var(--aside);
gap:var(--gap-shell);
align-items:start;
}
/* ที่ ≤1180px aside ยุบลงไปต่อท้ายเนื้อหา — ไม่ใช่ซ่อน
TOC ยังต้องอยู่ใน DOM ตาม C-10 */
@media(max-width:1180px){
.pm-shell{ grid-template-columns:minmax(0,1fr); gap:var(--s5); }
}
/* ---- ความกว้างของคอลัมน์ข้อความ — design.md §8.2 ---- */
.pm-measure{ max-width:var(--measure-body); } /* 720px */
.pm-prose{ max-width:var(--measure-prose); } /* 62ch — บล็อกแคบ: FAQ · การ์ด */
/* ---- กริดทั่วไป ---- */
.pm-grid{ display:grid; gap:var(--s4); }
.pm-grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.pm-grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.pm-grid--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media(max-width:1180px){
.pm-grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:680px){
.pm-grid--2,.pm-grid--3,.pm-grid--4{ grid-template-columns:minmax(0,1fr); }
}
/* ---- ช่องภาพ (B-7) — design.md §8.4 ----
ทุกใบในกริดเดียวกันต้องอัตราส่วนเท่ากัน
🔴 P-2 ยังบังคับ: ห้าม publish ภาพสินค้าชุดเก่า */
.pm-media{
background:var(--color-shade); /* ⛔ ห้ามมีตัวอักษรบนนี้ — §3.1 */
border-radius:var(--radius);
overflow:hidden;
}
.pm-media img{ width:100%; height:100%; object-fit:cover; }
.pm-media--product{ aspect-ratio:var(--ratio-product); } /* 1:1 */
/* 🔴 ชั่วคราว (15 ก.ย. 2026 · รอบที่ 9) — พื้นขาวเฉพาะช่องที่ **มีภาพจริงแล้ว**
เทมเพลตเป็นคนติดคลาสนี้ให้ ไม่ใช่ CSS เดาเอง → ช่องที่ยังไม่มีภาพยังเป็น --color-shade เหมือนเดิม
⛔ ห้ามย้ายกฎนี้ไปไว้ที่ .pm-media--product เฉย ๆ เพราะจะทำให้ช่องรอภาพกลายเป็นกล่องขาวเปล่า
✅ ลบทิ้งพร้อม --color-photo-bg เมื่อได้ภาพชุดใหม่ที่คุมพื้นหลังเดียวกัน (P-2 · B-7) */
.pm-media--photo{ background:var(--color-photo-bg); }
.pm-media--hero{ aspect-ratio:var(--ratio-hero); /* 4:5 */
border-radius:var(--radius-hero); } /* §8.3 — hero เท่านั้น */
.pm-media--article{ aspect-ratio:var(--ratio-article); } /* 16:10 */
/* ============================================================
H · เลย์เอาต์เฉพาะหน้า Home (Case A)
ที่มา: Claude Design `Case A - Home.dc.html` (artboard) — แปลงจาก inline
style เป็นคลาส · ทุกระยะมาจากสเกล --s1…--s8 เท่านั้น (§8.1)
⛔ ห้ามมีค่า hex (B-1)
เพิ่มเมื่อ 11 ก.ย. 2026 — รายงาน report-home-template-2026-09-11.md
============================================================ */
/* ---- หัว section แบบสองฝั่ง (หัวเรื่องซ้าย · คำโปรย/ลิงก์ขวา) ---- */
.pm-sechead{
display:flex; justify-content:space-between; align-items:flex-end;
gap:var(--s6); margin-bottom:var(--s5);
}
.pm-sechead__aside{ max-width:330px; color:var(--color-ink-muted); }
@media(max-width:680px){
.pm-sechead{ flex-direction:column; align-items:flex-start; gap:var(--s3); }
.pm-sechead__aside{ max-width:none; }
}
/* ---- 1 · Hero (โครงเดิม สองคอลัมน์บนพื้น paper) ----
⚠️ superseded 14 ก.ย. 2026 โดย .pm-banner ข้างล่าง — hero.php ไม่เรียกใช้คลาสชุดนี้แล้ว
คงไว้เพื่ออ้างอิง/ย้อนกลับ (โฟลเดอร์นี้ไม่ใช่ git repo) ห้ามลบ
สัดส่วน 1.04 / .96 มาจาก artboard · ภาพล้นออกขอบขวาของ container
ด้วย margin ลบเท่ากับ --pad พอดี (ไม่ใช่ค่าที่คิดขึ้นใหม่) */
.pm-hero{ position:relative; overflow:hidden; }
.pm-hero__grid{
display:grid; grid-template-columns:1.04fr .96fr;
gap:var(--s6); align-items:center;
padding-block:var(--s5) var(--s6);
}
.pm-hero__art{ position:relative; margin-right:calc(var(--pad) * -1); }
/* แถบข้อเท็จจริงใต้ปุ่ม — dt/dd สามช่อง */
.pm-hero__specs{
display:grid; grid-template-columns:repeat(3,auto);
justify-content:start; gap:0 var(--s5);
border-top:1px solid var(--color-line);
padding-top:var(--s3); margin:0;
}
/* การ์ดลอยที่ทับมุมซ้ายของภาพ hero */
.pm-hero__assay{ position:absolute; left:calc(var(--s4) * -1); top:41%; max-width:246px; }
@media(max-width:1180px){
.pm-hero__grid{ grid-template-columns:minmax(0,1fr); gap:var(--s5); }
.pm-hero__art{ margin-right:0; max-width:460px; }
.pm-hero__assay{ position:static; max-width:460px; margin-top:var(--s2); box-shadow:none; }
}
@media(max-width:680px){
.pm-hero__art,.pm-hero__assay{ max-width:none; }
.pm-hero__specs{ grid-template-columns:minmax(0,1fr); gap:0; }
.pm-hero__specs > div + div{
border-top:1px solid var(--color-line);
padding-top:var(--s2); margin-top:var(--s2);
}
}
/* ---- 1a · Banner slider — เพิ่ม 14 ก.ย. 2026 (รอบ 7) ----
คำสั่ง: มี banner หลายอัน · UX/UI ต่างกัน · เลื่อนสไลด์ได้
🔴 ทำงานได้โดยไม่มี JS (C-10):
track เป็น overflow-x:auto + scroll-snap → ปัด/สกรอลล์ดูครบ 5 ใบโดยไม่ต้องมี JS
⛔ ห้ามซ่อน scrollbar ของ viewport — ถ้าไม่มี JS มันคือสิ่งเดียวที่บอกว่ามีสไลด์อื่น
🔴 ความสูงคงที่: ทั้ง 5 ใบเป็น flex item ในแถวเดียวกัน แถวจึงสูงเท่าใบที่สูงสุดเสมอ
→ เลื่อนสไลด์แล้วความสูง section ไม่ขยับ (กัน CLS)
⛔ ห้ามเปลี่ยน track เป็น position:absolute ทับกัน จะเสียคุณสมบัตินี้ทันที
🔴 B-2: slider = หนึ่ง section → สไลด์พื้นเข้ม/พื้น brand มีได้ใบเดียว (ตอนนี้ = --promotion)
และ padding ล่างของ section กันไม่ให้สไลด์ใดไปติดแถบ trust ที่เป็นพื้นเข้ม */
/* ไม่มี padding บน — สไลด์ต้องเริ่มชิด header เหมือนแบนเนอร์เต็มจอจริง
padding ล่างคือ "ช่องว่างสีครีม" ที่กันไม่ให้สไลด์พื้น brand ไปติดแถบ trust ที่เป็นพื้นเข้ม
⛔ B-2: ห้ามลดค่าล่างนี้ลงจนสไลด์ brand ชนแถบเข้ม */
.pm-slider{ padding-block:0 var(--s5); background:var(--color-surface);
border-bottom:1px solid var(--color-line); }
.pm-slider__viewport{
overflow-x:auto; overflow-y:hidden;
scroll-snap-type:x mandatory;
scroll-behavior:smooth;
overscroll-behavior-x:contain;
/* 🔴 ทำให้บางลง แต่ **ห้ามซ่อนทิ้ง** — ถ้าไม่มี JS มันคือสิ่งเดียวที่บอกว่ามีสไลด์อื่น
⛔ ห้ามใช้ scrollbar-width:none หรือ ::-webkit-scrollbar{display:none} */
scrollbar-width:thin;
scrollbar-color:var(--color-line-strong) transparent;
}
/* 🔴 F-6 — เพิ่ม 15 ก.ย. 2026
pm-base.css ปิดไว้แค่ animation กับ transition · **scroll-behavior ไม่ได้อยู่ในนั้น**
สไลเดอร์จึงยังไถให้เห็นอยู่ดีสำหรับคนที่เปิด prefers-reduced-motion
(ทั้งตอนกดปุ่ม ตอนปัด และตอนลิงก์ #anchor พาไปที่สไลด์)
⛔ อย่าพึ่ง JS ฝั่งเดียว — JS คุมได้เฉพาะการเลื่อนที่ตัวเองสั่ง */
@media (prefers-reduced-motion: reduce){
.pm-slider__viewport{ scroll-behavior:auto; }
}
/* ring ของ viewport ต้องเห็นชัด — มันรับ focus ได้ (tabindex=0) เพื่อให้เลื่อนด้วยลูกศรได้ */
.pm-slider__viewport:focus-visible{ outline:2px solid var(--color-brand-ink); outline-offset:-2px; }
.pm-slider__track{ display:flex; align-items:stretch; }
/* 🔴 align-items:flex-start ไม่ใช่ center — แก้ 15 ก.ย. 2026
ของเดิมจัดกึ่งกลาง ซึ่งขัดกับวิธีตรึงความสูงของ pm-heroslider.js โดยตรง:
บนจอ ≥1181px track เป็น align-items:stretch → กล่องสไลด์ทุกใบสูงเท่าใบที่สูงที่สุด (805px)
แต่ JS ตรึง viewport ไว้เท่า "ความสูงตามธรรมชาติ" ของใบที่กำลังดู (เช่น 666px)
เนื้อในที่ถูกจัดกึ่งกลางใน 805px จึงเริ่มต่ำลงมา 133px แล้วโดน overflow-y:hidden
ตัดท้ายทิ้ง — วัดจริงบน preview: สไลด์ goal โดนตัด **6px** (ป้ายช่องภาพหายไปครึ่งบรรทัด)
วันนี้ 6px เพราะ padding ของสไลด์บังเอิญหักล้างกันเกือบพอดี — ขยับ padding หรือ
เนื้อหาเมื่อไร ตัวเลขนี้โตทันที
→ ชิดบน = เนื้อในเริ่มที่ padding ของตัวเองเสมอ · ส่วนที่ถูกตัดคือพื้นเปล่าล้วน
⛔ ห้ามกลับไปเป็น center ตราบใดที่ JS ยังตรึงความสูงเท่าใบที่กำลังดู */
.pm-slide{
flex:0 0 100%; min-width:0;
scroll-snap-align:start;
display:flex; align-items:flex-start;
padding-block:var(--s6);
}
.pm-slide > .pm-container{ width:100%; }
/* แผงควบคุม
🔴 **จัดใหม่ 15 ก.ย. 2026 — เดิมเป็น justify-content:space-between**
ของเดิมทำงานตรงตามที่เขียนไว้ทุกอย่าง แต่ผลคือชุดควบคุมชุดเดียวกันถูกฉีกห่างกัน
วัดจริง: จุดบอกตำแหน่งจบที่ x=605 · ลูกศรเริ่มที่ x=1365 → **ห่างกัน 760px** ที่จอ 1866
(701px ที่ 1181 · 420px ที่ 900) จุดไปอยู่ใต้คอลัมน์ภาพ ลูกศรไปอยู่ใต้คอลัมน์ตัวหนังสือ
สายตาอ่านไม่ออกว่าสองก้อนนี้คุมของชิ้นเดียวกัน
→ รวมเป็นก้อนเดียวชิดขวา = จบอยู่ฝั่งเดียวกับปุ่ม CTA ซึ่งเป็นที่ที่สายตาอยู่พอดีตอนอ่านจบ
ระยะ --s4 ระหว่างจุดกับลูกศรกันไม่ให้กดพลาดข้ามก้อน (F-3 ต้องการแค่ 8px ให้เกินไว้)
⛔ จอ ≤680px ยังจัดกึ่งกลางเหมือนเดิม — ที่นั่นไม่มีคอลัมน์ให้ไปเกาะ */
.pm-slider__controls{
display:flex; align-items:center; justify-content:flex-end;
gap:var(--s4); flex-wrap:wrap; margin-top:var(--s4);
}
.pm-slider__dots,.pm-slider__nav{ display:flex; align-items:center; gap:var(--s1); }
@media(max-width:1180px){
.pm-slide{ padding-block:var(--s4); }
/* 🔴 จอแคบ = ทุกใบเรียงเดี่ยว ใบที่ 1 จึงสูงกว่าเพื่อนมาก (วัดได้ 1511px ที่ 555)
ถ้ายังจัดกึ่งกลาง ใบที่สั้นกว่าจะลอยอยู่กลางช่องว่างเปล่า อ่านว่า "หน้าพัง"
→ ชิดบนแทน ช่องว่างไปกองอยู่ข้างล่างซึ่งอ่านว่า "จบแล้ว" ไม่ใช่ "หาย" */
.pm-slider__track{ align-items:flex-start; }
}
@media(max-width:680px){
.pm-slider__controls{ justify-content:center; }
/* ย่อกรอบภาพของใบที่ 1 บนมือถือ — 4:5 เต็มความกว้างจอสูงเกือบหนึ่งหน้าจอเต็ม
และความสูงนั้นถูกบังคับไปที่อีก 4 ใบด้วย (ทุกใบอยู่ในแถว flex เดียวกัน) */
.pm-slide--specialist .pm-banner__frame{ width:min(100%,300px); }
}
/* ---- 1a-2 · เลย์เอาต์เฉพาะของแต่ละสไลด์ ----
🔴 ความต่างของ UX/UI มาจาก "โครง" ไม่ใช่ "สี" — เพราะสีถูกล็อกด้วยสองกฎ:
B-2 (สไลด์เข้ม/brand ได้ใบเดียว) และ §3.2 (โควตา accent 3 จุด/หน้าใช้ครบแล้ว) */
/* 2 · promotion — จัดกึ่งกลางทั้งใบ */
.pm-slide__center{ text-align:center; max-width:860px; margin-inline:auto; }
.pm-slide__deck{ margin-inline:auto; max-width:56ch; }
/* 🔴 การ์ดชุดเป็น "ภาพซ้าย ข้อความขวา" ไม่ใช่ "ภาพทับข้อความ" — เหตุผลคือความสูง:
ใบนี้จัดกึ่งกลาง ทุกอย่างจึงเรียงลงมาเป็นชั้น ๆ อยู่แล้ว
ถ้าวางภาพ 1:1 ทับบนข้อความอีก ใบนี้จะสูง 940px และ **บังคับให้ทั้ง 5 ใบสูงตาม**
ทำให้สไลด์ที่ 1 (ที่อนุมัติแล้ว สูงตามธรรมชาติ 699px) มีที่ว่างตาย 240px
→ วางแนวนอน ความสูงของแถวจึงเท่ากับความสูงภาพ ไม่ใช่ภาพบวกข้อความ
⛔ ถ้าจะกลับไปวางภาพทับข้อความ ต้องวัดความสูงทั้ง 5 ใบใหม่ทุกครั้ง */
.pm-slide__sets{
list-style:none; margin:0 auto; padding:0; max-width:780px;
display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
gap:var(--s3);
}
.pm-slide__sets li{
display:flex; align-items:center; gap:var(--s2); text-align:left;
padding-top:var(--s3); border-top:1px solid var(--color-line-night);
}
@media(max-width:680px){ .pm-slide__sets{ grid-template-columns:minmax(0,1fr); gap:var(--s2); } }
/* 3 · shipping — หัวข้อ+ตาราง+ปุ่มซ้าย · ภาพขวา · ข้อเท็จจริง 3 บรรทัดพาดล่าง
🔴 เขียนใหม่รอบ 10 (14 ก.ย.) หลังเจ้าของงานว่า "รกไปละ"
รอบ 9 วางเป็น [ข้อความ+3 ช่อง] | [ตาราง+ภาพ] = ซ้ายมี 4 ก้อน ขวามี 2 ก้อน
ทั้งสองฝั่งแย่งกันเป็นพระเอก · ตอนนี้ขวาเหลือ **ภาพอย่างเดียว** ตารางย้ายไปอยู่ใต้หัวข้อ
🔴 คอลัมน์กลับมาเป็น 1fr 1fr — คอลัมน์ขวาไม่ต้องแคบแล้วเพราะไม่มีตารางอยู่ในนั้น
🔴 align-items:start ไม่ใช่ center: สองคอลัมน์สูงไม่เท่ากันโดยธรรมชาติ
ถ้าจัดกึ่งกลาง ขอบบนของภาพจะไม่ตรงกับหัวข้อ อ่านเป็นสองก้อนที่ไม่เกี่ยวกัน */
/* 🔴 คอลัมน์ห่าง --s6 แต่ **แถวห่างแค่ --s5** — เดิมใช้ gap เดียวทั้งสองแกน
ผลคือช่องว่างเหนือแถวข้อเท็จจริงกว้างเท่าช่องว่างระหว่างคอลัมน์ ซึ่งอ่านเป็น "หลุด"
ไม่ใช่ "ต่อเนื่อง" เพราะแถวล่างเป็นของก้อนเดียวกับด้านบน ไม่ใช่คนละเรื่อง */
.pm-slide__strip{
display:grid; grid-template-columns:1fr 1fr;
column-gap:var(--s6); row-gap:var(--s5);
align-items:start;
}
/* justify-items:start — ไม่งั้นปุ่มซึ่งเป็น grid item จะยืดเต็มคอลัมน์ */
.pm-slide__striphead{ display:grid; gap:0; justify-items:start; }
.pm-slide__striphead .pm-tablewrap{ justify-self:stretch; width:100%; }
/* แถวล่างกับหมายเหตุท้ายใบต้องพาดสองคอลัมน์ ไม่งั้นไปนั่งใต้คอลัมน์ซ้ายคอลัมน์เดียว */
.pm-slide__strip > .pm-slide__facts,
.pm-slide__strip > .pm-slide__foot{ grid-column:1 / -1; }
/* .pm-slide__foot มี margin-top:--s5 มาจาก pm-components.css สำหรับสไลด์ที่ไม่ใช่ grid
ในใบนี้ row-gap ทำหน้าที่นั้นอยู่แล้ว ถ้าปล่อยไว้จะได้ระยะซ้อนกันสองชั้น (40 + 40) */
.pm-slide__strip > .pm-slide__foot{ margin-top:0; }
/* superseded รอบ 10 — เดิมเป็นกล่องรวม [ตาราง + ภาพ] ในคอลัมน์ขวา ตอนนี้ไม่มีในมาร์กอัปแล้ว
.pm-slide__shipside{ display:grid; gap:var(--s4); justify-items:start; width:100%; }
.pm-slide__shipside .pm-tablewrap{ width:100%; } */
.pm-slide__shipfig{ margin:0; }
/* 🔴 256 → 340 (รอบ 10) — คอลัมน์ขวาเหลือภาพอย่างเดียว ภาพจึงโตได้โดยไม่ดันความสูงรวม
4:5 ที่ 340 กว้าง = 425 สูง
⛔ ถ้าแก้ตัวเลขนี้ ต้องกลับไปแก้ทั้ง pm_home_photo_slots()['shipping']
**และ docs/photo-brief-2026-09-14.md** — ทีมกราฟฟิกอ่านไฟล์บรีฟ ไม่ได้อ่าน CSS */
.pm-slide__shipfig .pm-slide__shot{ max-width:340px; }
.pm-slide__shipfig .pm-photo-note{ max-width:340px; }
/* แถวข้อเท็จจริง — **บรรทัดเดียวต่อข้อ** ไอคอนอยู่หน้าบรรทัด ไม่ใช่หัวข้อ+เนื้อความแยก
🔴 รอบ 9 ใช้ .pm-slide__cols ซึ่งมีหัวข้อหนา + เนื้อความ 2 บรรทัด = 6 ก้อนข้อความเล็ก
คือสาเหตุใหญ่ที่สุดที่ใบนี้อ่านว่า "รก"
⛔ ห้ามเพิ่มเนื้อความใต้บรรทัดพวกนี้ — ถ้าต้องอธิบายยาว มันไม่ควรอยู่บนแบนเนอร์ */
.pm-slide__facts{
list-style:none; margin:0; padding:0;
display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s4);
border-top:1px solid var(--color-line); padding-top:var(--s4);
}
.pm-slide__facts li{
display:flex; align-items:center; gap:var(--s2);
font-size:var(--fs-small); color:var(--color-ink-body);
}
.pm-slide__facts .pm-slide__ico{ flex:none; }
.pm-slide__cols{
list-style:none; margin:0; padding:0;
display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s4);
}
.pm-slide__cols{ margin-top:var(--s5); }
.pm-slide__cols li{ border-top:1px solid var(--color-line); padding-top:var(--s3); }
@media(max-width:900px){
.pm-slide__strip{ grid-template-columns:minmax(0,1fr); gap:var(--s5); }
}
@media(max-width:680px){
.pm-slide__cols{ grid-template-columns:minmax(0,1fr); gap:var(--s3); }
/* เรียงลงล่างบนมือถือ — 3 ช่องเรียงข้างที่ 346px เหลือช่องละ ~100px ตัวหนังสือหักทุกคำ */
.pm-slide__facts{ grid-template-columns:minmax(0,1fr); gap:var(--s2); }
}
/* 4 · goal — ข้อความซ้าย การ์ดเรียงขวา */
.pm-slide__goal{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s6); align-items:center; }
.pm-slide__goals{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s2); }
.pm-slide__goals li{ display:flex; align-items:center; gap:var(--s3); }
.pm-slide__goalbody{ display:grid; gap:var(--s1); }
@media(max-width:900px){ .pm-slide__goal{ grid-template-columns:minmax(0,1fr); gap:var(--s5); } }
/* 5 · discover — ตัวพิมพ์ใหญ่ซ้าย รายการมีเลขขวา */
.pm-slide__read{ display:grid; grid-template-columns:1fr 1.05fr; gap:var(--s6); align-items:center; }
.pm-slide__reads{ list-style:none; margin:0; padding:0; display:grid; }
.pm-slide__reads li{
display:flex; align-items:center; gap:var(--s3);
border-top:1px solid var(--color-line); padding-block:var(--s3);
}
.pm-slide__reads .pm-slide__readbody{ flex:1; }
.pm-slide__reads li:last-child{ border-bottom:1px solid var(--color-line); }
.pm-slide__readbody{ display:grid; gap:var(--s1); }
@media(max-width:900px){ .pm-slide__read{ grid-template-columns:minmax(0,1fr); gap:var(--s5); } }
/* ---- 1a-3 · คุมความสูงบนจอแคบ ----
🔴 บล็อกนี้ต้องอยู่ **ท้ายสุด** ของกฎสไลด์ทั้งหมด
เพราะ `.pm-slide__shipfig .pm-slide__shot` ของฐานมีน้ำหนักเท่ากัน (0,2,0)
ถ้าเขียนไว้ก่อน กฎฐานจะชนะด้วยลำดับในไฟล์ (เจอจริง 14 ก.ย.: แก้แล้วค่าไม่ขยับเลย)
🔴 วัดที่ 390px ตอนตั้งกฎนี้ (รอบ 8): shipping 1458 · specialist 1274 · promotion 1037 · goal 967 · discover 958
ใบ shipping กลายเป็นใบสูงสุดแทนใบที่ 1 ทั้งแถวจึงถูกดึงไปตามใบที่ไม่ใช่ตัวหลัก
🔴 **168 → 264 (รอบ 10)** — เหตุผลเดิมหมดอายุแล้วสองชั้น:
(1) ใบ shipping ถูกรื้อให้เบาลง เหลือ 1109px ที่ 390px ไม่ใช่ใบที่สูงสุดอีกต่อไป (ใบ 1 = 1274)
(2) JS ตรึงความสูงตามใบที่ดูอยู่แล้ว ใบที่สูงกว่าไม่ลากใบอื่นไปด้วยอีก
ที่ 168px ภาพเล็กจนไม่ทำหน้าที่ "ดึงดูด" ตามที่เจ้าของงานสั่งไว้ในรอบ 8
⛔ ถ้าแก้ค่าพวกนี้ ต้องกลับไปวัดความสูงทั้ง 5 ใบที่ 390px ใหม่ทุกครั้ง */
@media(max-width:680px){
.pm-slide__shipfig .pm-slide__shot,
.pm-slide__shipfig .pm-photo-note{ max-width:264px; }
.pm-slide__cols{ margin-top:var(--s4); gap:var(--s2); }
.pm-slide__cols li{ padding-top:var(--s2); }
}
/* ---- 1b · Banner เต็มความกว้าง พื้นสว่าง — เขียนใหม่ 14 ก.ย. 2026 (รอบ 2) ----
คำสั่งเจ้าของงาน: กว้างเท่าอุปกรณ์ · พื้นขาว · ช่องภาพต้องบอกสเปกให้กราฟฟิก
เต็มความกว้างแบบเดียวกับ .pm-band--night: section กินขอบจอ แต่ของข้างในอยู่ใน
.pm-container ที่ margin:0 auto → B-6 ยังผ่าน (เปิด 1742px แล้วเบ้ = 0)
⛔ ไม่ใช้ vh ที่ใดเลย — ความสูงถูกกำหนดโดยกรอบภาพ 4:5 ซึ่งมาจาก token
(ค่า vh เป็นมิติที่ไม่มีในชุด token · ถ้าจะใช้ต้องเป็นมติแยก) */
.pm-hero--banner{
background:var(--color-surface); /* §3.1 "แถบที่ต้องยกจากพื้น" — พื้นหน้าเว็บยังเป็น paper */
border-bottom:1px solid var(--color-line);
padding-block:var(--s6);
}
.pm-banner{
display:grid; grid-template-columns:1fr 1.1fr;
gap:var(--s6); align-items:center;
}
/* DOM เขียน copy ไว้ก่อน (ลำดับอ่าน = ลำดับที่เห็นบนมือถือ · F-2 · C-11)
จอกว้างจึงสั่งคอลัมน์เอง ไม่พึ่งลำดับ DOM */
.pm-banner__copy { grid-column:2; grid-row:1; align-self:center; max-width:560px; }
.pm-banner__figure{ grid-column:1; grid-row:1; position:relative; margin:0; }
/* กรอบภาพ — .pm-banner__frame คือ "ที่อ้างอิงของการ์ดลอย" ไม่ใช่ทั้ง figure
🔴 รอบแรกผูกการ์ดไว้กับ figure ซึ่งรวมป้ายใต้ภาพด้วย → การ์ดไปนั่งทับตัวหนังสือป้าย */
.pm-banner__frame{ position:relative; width:min(100%,420px); margin-left:auto; }
/* 4:5 + ทรงโค้งบนของ 1a — ไม่แตะ --ratio-hero / --radius-hero (B-7 · design.md §8.3) */
.pm-banner__slot{
aspect-ratio:var(--ratio-hero);
border-radius:var(--radius-hero);
background:var(--color-shade); /* §3.1 บทบาท "พื้นช่องภาพ placeholder" */
border:1px solid var(--color-line);
}
/* ภาพจริงของช่องนี้ (เพิ่ม 15 ก.ย. 2026 · attachment 9275)
![]()
รับคลาส .pm-banner__slot เดิมไปทั้งชุด จึงได้ aspect-ratio · radius · border เท่ากับ
ช่องรอภาพเป๊ะ → **ทรงโค้งบนของ 1a ไม่เปลี่ยน ไม่ว่าจะมีภาพหรือไม่มี**
⛔ ห้ามแยก radius ของสองสถานะออกจากกัน — ทรงนี้คือสิ่งที่ design.md §8.3 ล็อกไว้
`overflow:hidden` เขียนไว้ทั้งที่ border-radius ก็คลิปเนื้อ ![]()
ให้อยู่แล้ว
— กันไว้เผื่อวันหน้ามีอะไรซ้อนอยู่ในกรอบเดียวกัน ไม่ใช่เพราะวันนี้ไม่คลิป
พื้น --color-shade คงไว้: เป็นสิ่งที่เห็นระหว่างภาพยังโหลดไม่เสร็จ และตอนภาพเสีย */
.pm-banner__slot--photo{
display:block; width:100%; height:auto;
object-fit:cover; object-position:center;
overflow:hidden;
}
/* ป้ายสั้นใต้กรอบ — บรีฟเต็มอยู่ที่ .pm-buildnote ใต้แบนเนอร์ */
.pm-banner__slotnote{ width:min(100%,420px); margin-left:auto; }
/* การ์ดลอยทับมุมซ้ายล่างของกรอบ
ยื่นออกซ้ายของกรอบ --s7 เพื่อให้ทับเนื้อภาพราว 1 ใน 3 ไม่ใช่ครึ่งใบ
(รอบแรกทับ ~60% จนมองไม่ออกว่าภาพเป็นทรงอะไร) */
.pm-banner__facts{
position:absolute; left:calc(var(--s7) * -1); bottom:var(--s5);
width:min(250px,64%);
background:var(--color-surface);
border:1px solid var(--color-line); /* §8.3 เงาไม่เคยเป็นตัวบอกขอบเขตเพียงลำพัง */
border-radius:var(--radius);
padding:var(--s3);
box-shadow:var(--shadow-lift);
}
/* หนึ่งแถวต่อหนึ่งข้อเท็จจริง — โครงสามคอลัมน์ของรอบแรกทำให้ค่าที่ยาวตัดบรรทัดไม่ตรงกัน */
.pm-banner__specs{ margin:var(--s3) 0; display:grid; }
.pm-banner__specs > div{
display:flex; align-items:baseline; justify-content:space-between; gap:var(--s2);
border-top:1px solid var(--color-line); padding-block:var(--s1);
}
.pm-banner__specs dt{ white-space:nowrap; }
.pm-banner__specs dd{ margin:0; text-align:right; color:var(--color-ink); font-weight:600; }
/* ---- แผงบรีฟภาพใต้แบนเนอร์ — นั่งร้าน ลบทิ้งเมื่อภาพจริงมาแล้ว (P-2) ----
ตั้งใจให้ "อ่านออกว่าไม่ใช่เนื้อหาเว็บ": พื้น paper · เส้นซ้ายหนา · ตัวอักษรขนาด meta
(ใช้วิธีเดียวกับกล่องเตือนใน design.md §7.5 ที่ไม่มีสีแดงในระบบ) */
/* ⛔ 15 ก.ย. 2026 — คลาสชุด .pm-buildnote ไม่ถูก render บนหน้าอีกแล้ว (ถอดออกจาก hero.php)
คงสไตล์ไว้เพราะไฟล์ preview ของ 14 ก.ย. ยัง มาที่ไฟล์นี้ · C-9 ยังเหลือที่มาก */
.pm-buildnote{
background:var(--color-paper);
border-bottom:1px solid var(--color-line);
padding-block:var(--s4);
}
.pm-buildnote .pm-container{ border-left:3px solid var(--color-line-strong); }
.pm-buildnote__list{
margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
gap:var(--s1) var(--s5);
}
.pm-buildnote__list > div{ display:grid; grid-template-columns:72px minmax(0,1fr); gap:var(--s2); }
.pm-buildnote__list dt{ font-size:var(--fs-meta); color:var(--color-ink); font-weight:600; }
.pm-buildnote__list dd{ margin:0; font-size:var(--fs-meta); line-height:1.5; color:var(--color-ink-body); }
.pm-buildnote__foot{ margin:var(--s3) 0 0; padding-top:var(--s2);
border-top:1px solid var(--color-line); }
@media(max-width:900px){ .pm-buildnote__list{ grid-template-columns:minmax(0,1fr); } }
/* 🔴 **ย้ายจุดตัดเรียงเดี่ยวจาก 1180 → 900 เมื่อ 15 ก.ย. 2026** ของเดิมอยู่ที่ `.superseded-2026-09-15e`
เหตุผลวัดได้ ไม่ใช่รสนิยม — ที่ 900px แบนเนอร์ใบที่ 1 สูง **1,374px**
(copy เต็มความกว้าง + กรอบ 4:5 กว้าง 420 = สูง 525 + การ์ดข้อเท็จจริงที่ตกลงมาเรียงต่อ 357
+ ป้ายใต้ภาพ) → **แผงควบคุมไปอยู่ที่ 1,406px จากหัว slider**
แปลว่าบนโน้ตบุ๊กและแท็บเล็ต **ไม่มีใครรู้เลยว่ามีแบนเนอร์ 5 ใบ** เพราะจุดกับลูกศรอยู่ใต้จอ
ที่ 901px สองคอลัมน์ยังอ่านสบาย (คอลัมน์ละ ~368px) เมื่อหุบกรอบภาพเหลือ 300px
วัดหลังแก้: ใบที่ 1 เหลือ **494px** · แผงควบคุมขึ้นมาอยู่ที่ **526px** — เห็นตั้งแต่ยังไม่สกรอลล์
⛔ ห้ามดันจุดตัดลงต่ำกว่านี้อีก — ต่ำกว่า ~900px คอลัมน์ copy แคบจนหัว --fs-d1 ตัดบรรทัดเละ */
/* 901–1180 · สองคอลัมน์เหมือนจอกว้าง แต่ทั้งกรอบภาพและการ์ดลอยต้องหุบตามคอลัมน์ที่แคบลง
ทุกค่าข้างล่างมาจากการวัด ไม่ได้เดา — เงื่อนไขที่ต้องผ่านพร้อมกันสามข้อ:
1. การ์ดต้องไม่มุดใต้ header ที่ sticky สูง 69px ตอนสไลเดอร์ถูกเลื่อนมาชิดบนสุด
(กรอบ 300px สูงแค่ 375 ส่วนการ์ดสูง 357 → หัวการ์ดโผล่เหนือกรอบ 14px แล้วโดน header กิน
วัดได้ −46px ที่ 1000px คือ "CURRENT LOT" กับชื่อการ์ดหายไปเลย)
2. การ์ดต้องไม่ยื่นพ้นขอบหน้าต่าง — ที่ 901px คอลัมน์ซ้ายเหลือ ~368px
ระยะยื่นซ้ายจึงใช้ --s7 ของจอกว้างไม่ได้ ต้องเหลือ --s5
3. แผงควบคุมต้องยังอยู่เหนือขอบจอ
ผลที่วัดได้: กรอบ 340 (สูง 425) · การ์ดพ้น header +7px ที่ทั้ง 901/1000/1180 ·
ขอบซ้ายการ์ดห่างขอบหน้าต่าง 20px ที่ 901px · ใบที่ 1 สูง 535px · แผงควบคุมที่ 567px
⛔ ห้ามหุบการ์ดให้แคบกว่า 230px เพื่อเอาที่ว่าง — ทดสอบ 210px แล้วข้อความตัดบรรทัดเพิ่ม
การ์ด **สูงขึ้น** เป็น 384 แล้วกลับไปมุดใต้ header อีก (−28px) คือได้ผลตรงข้าม */
@media(max-width:1180px){
.pm-banner__frame,.pm-banner__slotnote{ width:min(100%,340px); }
}
@media(min-width:901px) and (max-width:1180px){
.pm-banner{ gap:var(--s5); }
.pm-banner__facts{ left:calc(var(--s5) * -1); bottom:var(--s3); width:min(230px,78%); }
}
@media(max-width:900px){
/* เรียงเดี่ยว = คืนลำดับให้เป็นไปตาม DOM (copy → ภาพ → การ์ด)
H1 จึงอยู่เหนือกรอบภาพเสมอ ไม่ถูกกรอบ 4:5 ดันตกจอ */
.pm-banner{ grid-template-columns:minmax(0,1fr); gap:var(--s5); }
.pm-banner__copy { grid-column:auto; grid-row:auto; max-width:none; }
.pm-banner__figure{ grid-column:auto; grid-row:auto; }
/* เรียงเดี่ยวแล้วการ์ดไปต่อท้ายภาพ ความสูงจึงบวกกันตรง ๆ — กรอบกลับมา 300px
เพื่อไม่ให้ก้อนรวมสูงขึ้นอีก 50px โดยไม่ได้อะไรกลับมา */
.pm-banner__frame,.pm-banner__slotnote{ width:min(100%,300px); margin-left:0; }
.pm-banner__facts{ position:static; width:auto; box-shadow:none; margin-top:var(--s3); }
}
@media(max-width:680px){
.pm-banner__frame,.pm-banner__slotnote{ width:100%; }
.pm-buildnote__list > div{ grid-template-columns:minmax(0,1fr); gap:0; }
}
/* ---- 2 · แถบความน่าเชื่อถือ (4 ข้อ บนแถบเข้ม) ---- */
.pm-trust{
list-style:none; margin:0 auto; padding-block:var(--s3);
display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s2) var(--s4);
}
.pm-trust li{ display:flex; align-items:center; gap:var(--s1); }
.pm-trust svg{ flex:none; width:20px; height:20px; stroke:var(--color-on-night-3); }
@media(max-width:1180px){ .pm-trust{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:680px){ .pm-trust{ grid-template-columns:minmax(0,1fr); } }
/* ---- โครงสองคอลัมน์ที่ไม่ใช่ 50/50 — ใช้ซ้ำใน section 3 · 7 · 8 ---- */
.pm-split{ display:grid; gap:var(--s6); align-items:center; }
.pm-split--media{ grid-template-columns:.86fr 1.14fr; } /* ภาพซ้าย เนื้อหาขวา */
.pm-split--evidence{ grid-template-columns:.82fr 1.18fr; align-items:start; }
.pm-split--ask{ grid-template-columns:.5fr 1fr; align-items:start; }
@media(max-width:1180px){
.pm-split{ grid-template-columns:minmax(0,1fr); gap:var(--s5); }
}
/* ---- ตารางข้อเท็จจริง (dl สองคอลัมน์ มีเส้นคั่นทุกแถว) ---- */
.pm-facts{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 var(--s5); margin:0; }
.pm-facts > div{ border-top:1px solid var(--color-line); padding-block:var(--s2); }
.pm-facts > div:nth-last-child(-n+2){ border-bottom:1px solid var(--color-line); }
@media(max-width:1024px){ .pm-facts{ grid-template-columns:minmax(0,1fr); }
.pm-facts > div:nth-last-child(-n+2){ border-bottom:0; }
.pm-facts > div:last-child{ border-bottom:1px solid var(--color-line); } }
/* ---- 4 · สามชั้นการใช้งาน — กว้างไม่เท่ากันโดยตั้งใจ (artboard) ---- */
/* 🔴 แก้ 15 ก.ย. 2026 — เดิมเป็น flex ที่กว้างไม่เท่ากัน (1.3 / 1 / .92)
section นี้มีหน้าที่เดียวคือ "เลือกหนึ่งในสาม" ความกว้างที่ไม่เท่ากันจึงสื่อว่า
ใบซ้ายสำคัญกว่า พร้อม ๆ กับที่ใบขวาเป็นพื้นเข้มซึ่งสื่อว่าใบขวาสำคัญกว่า
→ สองสัญญาณขัดกันเองในกริดเดียว = ต้นเหตุหนึ่งของ "ดูแล้วงง"
grid ที่ 3 คอลัมน์เท่ากันทำให้เทียบราคาและเนื้อหากันได้ตรง ๆ ทีละบรรทัด
ถอดกลับ: เปลี่ยนสามบรรทัดนี้กลับเป็น flex ชุดเดิมที่เก็บไว้ใน .superseded-2026-09-15 */
.pm-layers{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s2); align-items:stretch; }
.pm-layers > *{ display:flex; flex-direction:column; gap:var(--s2); padding:var(--s5) var(--s4); }
@media(max-width:1180px){ .pm-layers{ grid-template-columns:minmax(0,1fr); } }
@media(max-width:680px){ .pm-layers > *{ padding:var(--s4) var(--s3); } }
/* ---- 5 · กล่อง Ritual Sets (แถบเข้มในกรอบ container ไม่เต็มจอ) ---- */
.pm-inset{ border-radius:var(--radius); padding:var(--s6) var(--s5); }
@media(max-width:680px){ .pm-inset{ padding:var(--s5) var(--s3); } }
/* ---- 6 · กริดสินค้า — ใบแรกกว้างสองช่อง ---- */
.pm-prodgrid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s2); }
/* ใบแรกกว้างสองช่องและวางแนวนอน — ไม่ใช่ "ภาพใหญ่กว่า"
🔴 artboard ให้ใบนี้ใช้ภาพ 16:10 ขณะที่ใบอื่นเป็น 1:1 → **ผิด B-7 สองข้อพร้อมกัน**
("สินค้า 1:1" และ "ทุกใบในกริดเดียวกันต้องเท่ากัน")
ทางแก้ที่ยังรักษาเจตนาเดิมไว้: กว้างสองช่องเหมือนเดิม แต่วางภาพไว้ครึ่งซ้าย
ภาพจึงยังเป็นสี่เหลี่ยมจัตุรัสขนาดเท่าการ์ดใบอื่นเป๊ะ · ตัวหนังสือไปอยู่ครึ่งขวา
align-self:flex-start ที่ช่องภาพ = ภาพไม่ถูกยืดตามความสูงของแถว (ถ้ายืด 1:1 จะเพี้ยน) */
/* 🔴 แก้รอบที่ 2 (15 ก.ย. 2026) — `.is-featured` **ไม่ใช่การ์ดสินค้าอีกแล้ว**
เหตุผล (วัดจริง): ช่องภาพสินค้าถูกล็อก 1:1 (B-7) ที่ความกว้างครึ่งใบ = สูง 285px
แต่แถวสูง 471px → เหลือพื้นการ์ดเปล่าใต้ภาพ **186px** และช่องว่างในเนื้อการ์ด **272px**
ตอนนี้ `.is-featured` = ใบทางเข้า Ritual Bundles ซึ่งไม่มีภาพ จึงยืดเต็มแถวได้พอดี
⛔ ห้ามใส่ `.is-featured` ให้การ์ดที่มีช่องภาพ 1:1 อีก — พื้นที่เปล่าจะกลับมาทันที */
@media(min-width:681px){
.pm-prodgrid > .is-featured{ grid-column:span 2; }
/* กฎสองบรรทัดข้างล่างเหลือไว้เผื่อวันที่มีภาพจริงแล้วอยากได้การ์ดสินค้าแนวนอนอีกครั้ง
— ต้องแก้สัดส่วนภาพก่อนถึงจะใช้ได้ ตอนนี้ไม่มีอะไร match */
.pm-prodgrid > .is-featured.pm-card--link{ flex-direction:row; align-items:stretch; }
.pm-prodgrid > .is-featured .pm-prodcard__media{ flex:0 0 50%; align-self:flex-start; }
.pm-prodgrid > .is-featured .pm-prodcard__body{ flex:1 1 50%; justify-content:center; }
/* 🔴 เคยเขียน `.is-featured .pm-prodcard__foot{ margin-top:var(--s2) }` ไว้ตรงนี้แล้ว **ถอดออก**
เหตุผล: มันลอยราคาของใบกว้างสองช่องขึ้นไป **สูงกว่าราคาของอีกสามใบในแถวเดียวกัน 128px**
ซึ่งเป็นข้อบกพร่องชนิดเดียวกับที่รอบ §5 ถือว่าต้องแก้ (ราคาต้องเทียบกันได้ในแนวเดียวกัน)
ปล่อยให้ margin-top:auto ของบล็อกหลักทำงาน → ราคาทั้งสี่ใบในแถวแรกอยู่ระดับเดียวกัน
⛔ ห้ามใส่ override กลับมาโดยไม่วัดแนวราคาของแถวแรกใหม่ */
}
@media(max-width:1180px){ .pm-prodgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:680px){ .pm-prodgrid{ grid-template-columns:minmax(0,1fr); }
.pm-prodgrid > .is-featured{ grid-column:span 1; } }
/* ---- 7 · รายการหลักฐาน (แถวมีเส้นคั่น บนแถบเข้ม) ---- */
.pm-evidence > div{ border-top:1px solid var(--color-line-night); padding-block:var(--s3); }
.pm-evidence > div:last-child{ border-bottom:1px solid var(--color-line-night); }
/* ---- 9 · ลำดับการอ่าน (ol สามใบ) ---- */
.pm-reading{
list-style:none; margin:0; padding:0;
display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s3);
}
.pm-reading > li{ display:flex; }
@media(max-width:1024px){ .pm-reading{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:680px){ .pm-reading{ grid-template-columns:minmax(0,1fr); } }
/* ============================================================
12 · หน้า Shop — โครงสองคอลัมน์ (ตัวกรองซ้าย · ผลลัพธ์ขวา)
เพิ่ม 16 ก.ย. 2026 · ที่มา `Case A - Shop.dc.html` section 2
รายงาน docs/report-shop-2026-09-16.md
============================================================ */
/* ⚠️ **ไม่ใช้ .pm-shell ซ้ำ** ทั้งที่เป็นโครงสองคอลัมน์เหมือนกัน
.pm-shell คือ "เนื้อหา 720 + aside 300" — คอลัมน์กว้างอยู่ **ซ้าย** และถูกล็อกที่ 720px
หน้า Shop ต้องการตรงข้ามทุกข้อ: คอลัมน์แคบอยู่ซ้าย และคอลัมน์ขวาต้องยืดเต็มที่เหลือ
เพราะมันคือกริดสินค้า 3 คอลัมน์ ไม่ใช่ย่อหน้าข้อความที่มีเพดานความยาวบรรทัด
⛔ ห้ามแก้ .pm-shell ให้รองรับทั้งสองแบบ — จะพังหน้าบทความที่ใช้มันอยู่ */
.pm-shopshell{
display:grid;
grid-template-columns:var(--aside) minmax(0,1fr);
gap:var(--gap-shell);
align-items:start;
}
/* ตัวกรองเกาะขอบบนตอนเลื่อน — ตามไฟล์ออกแบบ (position:sticky;top:96px)
ใช้ --s7 (96px) ตรง ๆ ไม่ได้ตั้งค่าใหม่ */
.pm-shopside{
position:sticky; top:var(--s7);
display:flex; flex-direction:column; gap:var(--s4);
}
/* ที่ ≤1180px ยุบเป็นคอลัมน์เดียว — ตัวกรอง **ขึ้นไปอยู่บนกริด ไม่ใช่ถูกซ่อน**
(C-10: ตัวกรองต้องอยู่ใน DOM เสมอ) · เลิก sticky เพราะแถบที่เกาะอยู่บนจอแคบ
จะกินความสูงจอไปโดยเปล่าประโยชน์ */
@media(max-width:1180px){
.pm-shopshell{ grid-template-columns:minmax(0,1fr); gap:var(--s5); }
.pm-shopside{ position:static; gap:var(--s3); }
}
/* กริดสินค้าของหน้า Shop = 3 คอลัมน์ (ไฟล์ออกแบบ) ไม่ใช่ 4 แบบ §6 หน้า Home
เพราะหน้านี้เสียความกว้างไปให้คอลัมน์ตัวกรองด้านซ้ายแล้ว */
.pm-prodgrid--shop{ grid-template-columns:repeat(3,minmax(0,1fr)); }
@media(max-width:1180px){ .pm-prodgrid--shop{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:1024px){ .pm-prodgrid--shop{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:680px){ .pm-prodgrid--shop{ grid-template-columns:minmax(0,1fr); } }
/* ระยะแนวตั้งของหน้า Shop — ไฟล์ออกแบบให้หัวหน้าอยู่ชิดกว่า .pm-section ปกติมาก
(artboard: หัวหน้า padding 56/0 · กริด padding-top 44) เพราะหน้านี้เป็นหน้าใช้งาน
คนมาเพื่อดูสินค้า ไม่ใช่มาอ่านหัวเรื่อง → ช่องว่าง 96px ของ --s7 ดันกริดตกจอไปเปล่า ๆ
⛔ ห้ามแก้ .pm-section เพื่อการนี้ — ทุกหน้าที่ใช้มันอยู่จะขยับตาม */
.pm-shophead{ padding-block:var(--s5) 0; }
.pm-shophead .pm-sechead{ margin-bottom:0; }
.pm-shopmain{ padding-block:var(--s4) var(--s7); }
/* ============================================================
หน้าตะกร้า — โครงสองคอลัมน์ (16 ก.ย. 2026)
ที่มา: `Case A - Cart.dc.html` · รายงาน docs/report-cart-minicart-2026-09-16.md
============================================================ */
/* หัวหน้าชิดกว่า .pm-section ปกติ แบบเดียวกับหน้า Shop
⛔ ห้ามแก้ .pm-section เพื่อการนี้ — ทุกหน้าที่ใช้มันอยู่จะขยับตาม */
.pm-cart .pm-cart__head{ padding-block:var(--s5) 0; }
.pm-cart .pm-cart__main{ padding-block:var(--s4) var(--s8); }
.pm-cart__lead{ color:var(--color-ink-muted); margin:var(--s1) 0 0; }
/* artboard: h1 56px สี brand (ค่าเริ่มต้นของธีมคือ d1 78px สี ink)
ใช้ --fs-d2 (58px) ซึ่งเป็นขั้นที่ใกล้ที่สุดในสเกล ต่างจาก artboard 2px มองไม่ออก
⛔ scope ไว้ที่ .pm-cart เท่านั้น — หน้าอื่นยังใช้ h1 78px ตามเดิม
(เพิ่ม 16 ก.ย. 2026 รอบ "ปรับให้ตรง artboard" · วิธีเดียวกับที่ .pm-checkout ทำไปก่อนหน้า) */
.pm-cart .pm-cart__head h1{ font-size:var(--fs-d2); color:var(--color-brand); }
/* 🔴 กริดนี้อยู่ **ใน** cart.php ของ WooCommerce ไม่ใช่ใน template ของหน้า
เพราะ [woocommerce_cart] พ่นทั้งฟอร์มและคอลัมน์สรุปยอดออกมาจากไฟล์เดียวกัน */
/* 16 ก.ย. 2026 — ปรับให้ตรง artboard: `1.5fr .75fr` gap 28px
ของเดิมคือ `minmax(0,1fr) + --aside(300px)` gap 64px ซึ่งทำให้คอลัมน์ขวาแคบ
และช่องไฟกลางกว้างกว่าไฟล์ออกแบบเท่าตัว
🔴 minmax(0,…) ยังจำเป็นกับคอลัมน์ซ้าย — ป้ายวิธีส่งกับชื่อสินค้าที่ยาวมาก
จะดัน track ให้กว้างเกินกริดถ้าไม่มี (ค่าเริ่มต้นของ fr คือ minmax(auto,1fr))
⛔ --gap-checkout เป็นชื่อที่มาจากรอบ checkout แต่เป็นค่าเดียวกันของ artboard ทั้งสองใบ
→ ใช้ร่วมกัน ไม่ตั้งชื่อใหม่ให้ค่าซ้ำ */
.pm-cart__grid{
display:grid;
grid-template-columns:minmax(0,1.5fr) minmax(0,.75fr);
gap:var(--gap-checkout);
align-items:start;
}
/* artboard: sticky top 96px = --s7 · ของเดิม --s5 (48px) ชิดหัวเกินไป */
.pm-cart__aside{ position:sticky; top:var(--s7); display:grid; gap:var(--s2); align-content:start; }
/* cross-sell ถูกย้ายมาต่อท้ายเต็มความกว้าง (hook ใน functions.php) */
.pm-cart__cross{ padding-block:var(--s7) 0; }
@media(max-width:980px){
.pm-cart__grid{ grid-template-columns:1fr; gap:var(--s5); }
/* ⛔ sticky ในคอลัมน์เดียวจะทำให้การ์ดสรุปยอดลอยทับรายการ — ปิดทิ้ง */
.pm-cart__aside{ position:static; }
}
/* ============================================================
หน้าชำระเงิน — โครงสองคอลัมน์ (16 ก.ย. 2026)
ที่มา: `Case A - Checkout.dc.html` · รายงาน docs/report-checkout-2026-09-16.md
⛔ ไม่มีค่า hex ในบล็อกนี้ — ทุกสีมาจาก pm-tokens.css (B-1)
============================================================ */
/* หัวหน้าชิดกว่า .pm-section ปกติ แบบเดียวกับหน้าตะกร้าและหน้า Shop
⛔ ห้ามแก้ .pm-section เพื่อการนี้ — ทุกหน้าที่ใช้มันอยู่จะขยับตาม */
#pm-main.pm-checkout .pm-checkout__head{ padding-block:var(--s5) 0; }
#pm-main.pm-checkout .pm-checkout__main{ padding-block:var(--s4) var(--s8); }
#pm-main.pm-checkout .pm-checkout__lead{ color:var(--color-ink-muted); margin:var(--s1) 0 0; }
/* artboard: h1 56px สี brand (ค่าเริ่มต้นของธีมคือ d1 78px สี ink)
ใช้ --fs-d2 (58px) ซึ่งเป็นขั้นที่ใกล้ที่สุดในสเกล ต่างจาก artboard 2px มองไม่ออก
⛔ scope ไว้ที่ .pm-checkout เท่านั้น — หน้าอื่นยังใช้ h1 78px ตามเดิม */
#pm-main.pm-checkout .pm-checkout__head h1{ font-size:var(--fs-d2); color:var(--color-brand); }
/* 🔴 กริดนี้อยู่ **ใน** form-checkout.php ของ WooCommerce ไม่ใช่ใน template ของหน้า
เพราะ [woocommerce_checkout] พ่นทั้งฟอร์มที่อยู่และคอลัมน์สรุปออกมาจากไฟล์เดียวกัน
(เหตุผลเดียวกับ .pm-cart__grid ข้างบน)
🔴 คอลัมน์ขวากว้างกว่าของหน้าตะกร้า (--aside = 300px) เพราะต้องใส่ทั้งสรุปออเดอร์
และการ์ดชำระเงิน — 300px ทำให้ชื่อ gateway ที่ยาวมาก
("Credit / Debit Card and Cash Payment (2C2P)") ตัดบรรทัดจนอ่านยาก */
#pm-main.pm-checkout .pm-checkout__grid{
display:grid;
grid-template-columns:minmax(0,1.5fr) minmax(0,.75fr); /* artboard */
gap:var(--gap-checkout);
align-items:start;
}
#pm-main.pm-checkout .pm-checkout__main{ min-width:0; }
/* 🔴 `gap:0` โดยตั้งใจ — `