/* ---- ฟอนต์ ----
   เก็บไฟล์ไว้เองที่ /fonts/ ไม่ได้ลิงก์ไป Google Fonts

   ของเดิมต้องรอสามชั้นก่อนตัวหนังสือจะขึ้น: โหลด HTML → โหลด CSS จาก
   fonts.googleapis.com (คนละโดเมน ต้องต่อ TLS ใหม่) → ถึงจะรู้ว่าต้องโหลดไฟล์ฟอนต์
   จาก fonts.gstatic.com (โดเมนที่สาม ต่อ TLS อีกรอบ) · Lighthouse ตีเป็น
   render-blocking 1,280ms บนมือถือ

   ย้ายมาไว้โดเมนเดียวกันแล้วเหลือชั้นเดียว และ preload ไฟล์ไทยสองตัวที่ใช้จริง
   เหนือรอยพับได้ตั้งแต่ยังไม่อ่าน CSS จบ

   เอาเฉพาะ subset thai กับ latin — ของเดิมมี cyrillic-ext กับ latin-ext ติดมาด้วย
   ซึ่งหน้านี้ไม่มีวันใช้ · `unicode-range` ยกมาจาก Google ตรง ๆ เบราว์เซอร์จึงยัง
   โหลดเฉพาะไฟล์ที่ตรงกับตัวอักษรบนหน้าเหมือนเดิม

   สามน้ำหนัก ไม่ใช่สี่ — เลิกใช้ 500 แล้วเพราะมันกินอีกสองไฟล์ (~21KB) เพื่อความต่าง
   ที่แทบมองไม่ออกจาก 600 */

/* thai */
@font-face {
  font-family: "IBM Plex Sans Thai";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/plex-thai-400-thai.woff2) format("woff2");
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* latin */
@font-face {
  font-family: "IBM Plex Sans Thai";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/plex-thai-400-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* thai */
@font-face {
  font-family: "IBM Plex Sans Thai";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/plex-thai-600-thai.woff2) format("woff2");
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* latin */
@font-face {
  font-family: "IBM Plex Sans Thai";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/plex-thai-600-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* thai */
@font-face {
  font-family: "IBM Plex Sans Thai";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/plex-thai-700-thai.woff2) format("woff2");
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* latin */
@font-face {
  font-family: "IBM Plex Sans Thai";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/plex-thai-700-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

   --brand คือ --brand ของตัวระบบ (src/app/globals.css) เพื่อให้ปุ่มสั่งซื้อกับปุ่ม
   ในระบบเป็นสีเดียวกัน · --accent สีแดงใช้ที่เดียวคือบรรทัด ESTD 1998
   ซึ่งเป็นสีของตราในโลโก้ ไม่ได้หยิบสีใหม่มาเอง */
:root {
  --bg:        #ffffff;
  --surface:   #ffffff;
  --ink:       #1c1917;
  --ink-soft:  #57534e;
  --line:      #e7e5e4;
  --brand:     #0f6055;
  --brand-ink: #ffffff;
  --accent:    #c8102e;
  --shadow:    0 1px 2px rgb(28 25 23 / .04), 0 14px 34px -14px rgb(28 25 23 / .18);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: "IBM Plex Sans Thai", "Noto Sans Thai", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
}

/* main เป็น flex column เพื่อให้ hero ยืดกินพื้นที่ที่เหลือได้ — ไม่งั้น .hero
   สูงเท่าเนื้อหาพอดี แล้ว align-content: center ข้างในไม่มีที่ว่างให้จัดกลาง
   หน้าแรกจะไปกองชิดขอบบนโดยมีที่ว่างเหลือทั้งก้อนอยู่ข้างล่าง
   (เดิม body เป็น grid 1fr auto ซึ่งให้ผลนี้อยู่แล้ว แต่พอหน้า /product/ มี
   <header> เพิ่มมาเป็นลูกตัวที่สาม 1fr ไปตกที่ header แทน จึงต้องเปลี่ยนเป็น flex
   แล้วย้ายหน้าที่ "ยืด" มาไว้ที่ .hero ตรง ๆ)
   หน้า /product/ ไม่มี .hero กฎนี้จึงไม่มีผลกับมัน */
main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  padding-bottom: clamp(3rem, 8vw, 5rem);
}

/* ---- โครงหน้าส่วนบน ----
   จอแคบ: เรียงลงมา หัวเรื่อง → รูป → กล่องสั่งซื้อ — รูปต้องมาก่อนปุ่มเสมอ
   ไม่งั้นคนเจอปุ่มสั่งซื้อก่อนได้เห็นว่าของหน้าตายังไง
   จอกว้าง: โลโก้กับคำโปรยอยู่ซ้ายบน กล่องสั่งซื้อซ้ายล่าง รูปอยู่ขวายาวสองแถว
   — คนอ่านไทยกวาดตาจากซ้ายไปขวา ชื่อกับคำอธิบายจึงควรมาถึงตาก่อนรูป

   ใช้ grid-template-areas สลับตำแหน่ง จึงไม่ต้องเขียน markup ซ้ำสองชุด
   แล้วมาซ่อนทีละอันตามขนาดจอ ซึ่งแปลว่าโหลดรูปเดียวกันสองรอบ

   กริดนี้อยู่ที่ .hero ไม่ใช่ที่ main — พอมีเนื้อหาต่อท้ายหลายส่วน ถ้ากริด
   ยังอยู่ที่ main ทุกส่วนที่เพิ่มจะถูกดูดเข้าไปอยู่ในคอลัมน์ของส่วนบนด้วย */
.hero {
  flex: 1 0 auto;
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  /* บนล่างเท่ากัน ไม่ใช่ 4.5rem/3rem แบบเดิม — เดิมหน้ากองอยู่ชิดบน ระยะบนจึงต้อง
     มากกว่าล่างเพื่อไม่ให้ดูติดขอบ · พอจัดกลางแนวตั้งแล้ว ระยะที่ไม่เท่ากันจะดัน
     เนื้อหาให้ต่ำกว่ากึ่งกลางจริง 24px ซึ่งตาจับได้ว่า "เกือบกลาง" */
  padding: clamp(2rem, 7vw, 4.5rem) 1.5rem;
  display: grid;
  align-content: center;
  gap: clamp(1.75rem, 4vw, 2.5rem);
  grid-template-areas: "head" "shot" "buy";
  text-align: center;
}
.head { grid-area: head; }
.shot { grid-area: shot; }
.buy  { grid-area: buy; }

.logo {
  display: block;
  width: min(14rem, 58vw);
  height: auto;
  margin: 0 auto;
}

.eyebrow {
  margin: 1.5rem 0 0;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
}

h1 {
  /* ไทยมีวรรณยุกต์กับสระบนที่กินที่เหนือตัวอักษร — line-height ที่พอดีกับ
     ฟอนต์ละตินจะทำให้ "น้ำ" ไปเบียดบรรทัดข้างบน */
  margin: .7rem 0 0;
  font-size: clamp(1.7rem, 5vw, 2.5rem);
  font-weight: 700;
  line-height: 1.38;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.lede {
  margin: .9rem auto 0;
  max-width: 28rem;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* รูปเป็นซองที่ตัดพื้นมาแล้ว ไม่ใช่ภาพสี่เหลี่ยม — ไม่ใส่มุมมนและไม่ใส่เงา
   เพราะทั้งสองอย่างจะวาดเป็นสี่เหลี่ยมรอบภาพที่ไม่มีขอบให้เห็น กลายเป็น
   กรอบลอย ๆ ที่ไม่มีอะไรอยู่ข้างใน

   ไฟล์เป็น JPEG ทับพื้นขาว ไม่ใช่ PNG โปร่ง — PNG โปร่งของภาพถ่ายออกมา 1.07MB
   ส่วน JPEG 117KB และหน้านี้พื้นขาวล้วนอยู่แล้ว ผลตาจึงเหมือนกันเป๊ะ
   (ถ้าวันไหนเปลี่ยนสีพื้นหน้า ต้องกลับมาทำไฟล์โปร่งแทน) */
.shot img {
  display: block;
  width: 100%;
  max-width: 22rem;
  height: auto;
  margin-inline: auto;
  /* ลอยแบบของที่ลอยอยู่ในน้ำ ไม่ใช่ของที่ถูกชักขึ้นลง — ขยับสามอย่างพร้อมกัน
     แต่คนละจังหวะ: ไหลเป็นเส้นทางไม่สม่ำเสมอ (drift) และเอียงตัว (tilt)

     กุญแจอยู่ที่ 17 วินาทีกับ 11 วินาทีเป็นจำนวนเฉพาะต่อกัน สองวงจรจึงกลับมา
     ตรงกันทุก 187 วินาที (~3 นาที) · ตาคนจับรูปแบบซ้ำได้ในช่วงไม่กี่สิบวินาที
     พอวงจรยาวเกินนั้นมันจึงอ่านเป็น "สุ่ม" ทั้งที่เป็น CSS ล้วน ไม่มี JS สักบรรทัด
     (รอบก่อนขยับแกนเดียว 6 วินาที ซ้ำรอยเดิมทุก 6 วินาที เลยดูเป็นเครื่องจักร)

     จุดพักในเส้นทางตั้งใจวางไม่เท่ากัน (13% 27% 41% 56% 68% 84%) และระยะ x กับ y
     ไม่สัมพันธ์กัน ถ้าวางทุก 25% เท่า ๆ กันตาจะจับจังหวะได้ทันที

     ใช้ property `translate` กับ `rotate` แยกกัน ไม่ใช่ `transform` — เพราะสอง
     ตัวนี้เป็นคนละ property จึง animate พร้อมกันคนละความเร็วได้ ถ้าเขียนเป็น
     `transform` ทั้งคู่ ตัวหลังจะทับตัวแรกทิ้งทั้งเส้น

     ระยะทั้งหมดยังเล็กเท่าเดิม (y ไม่เกิน 9px · x ไม่เกิน 5px · เอียงไม่เกิน 0.8°)
     ปุ่มสั่งซื้อยังต้องเป็นของที่เด่นที่สุดบนหน้า ไม่ใช่รูปที่ขยับ

     ไม่มีเงาใต้ซองประกอบการลอย ด้วยเหตุผลเดียวกับที่ไม่มี box-shadow ข้างบน —
     ไฟล์เป็น JPEG ทับพื้นขาว เงาจะออกมาเป็นสี่เหลี่ยมรอบภาพ ไม่ใช่เงารูปซอง
     (ถ้าวันไหนเปลี่ยนไปใช้ PNG โปร่ง ค่อยเติม drop-shadow ที่เกาะรูปจริงได้) */
  animation: pouch-drift 17s ease-in-out infinite,
             pouch-tilt  11s ease-in-out infinite;
}

@keyframes pouch-drift {
  0%   { translate: 0     0;     }
  13%  { translate: 3px  -5px;   }
  27%  { translate: -2px -9px;   }
  41%  { translate: -4px -3px;   }
  56%  { translate: 2px   1px;   }
  68%  { translate: 5px  -4px;   }
  84%  { translate: 1px  -8px;   }
  100% { translate: 0     0;     }
}

@keyframes pouch-tilt {
  0%   { rotate: 0;      }
  30%  { rotate: .8deg;  }
  62%  { rotate: -.5deg; }
  100% { rotate: 0;      }
}

.specs {
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem .5rem;
  list-style: none;
}
.specs li {
  padding: .3rem .8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .85rem;
  color: var(--ink-soft);
}

/* ไม่มีกรอบ ไม่มีปุ่ม — เป็นบล็อกข้อความติดต่อธรรมดา
   หน้าพื้นขาวที่มีกล่องมีเส้นขอบอยู่กล่องเดียวจะดูเหมือนวิดเจ็ตหลงมา
   ส่วนช่องทางติดต่อยังเป็นลิงก์อยู่ เพราะบนมือถือต้องกดโทรออกได้ */
.buy h2 {
  margin: 0;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--ink-soft);
}

.contact {
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  list-style: none;
}
.contact a {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: color .12s ease;
}
/* ไลน์กับเฟซบุ๊กอยู่บรรทัดเดียวกัน — ทั้งคู่เป็นช่องทาง "ทักไปคุย" เหมือนกัน
   จับคู่ไว้แล้วรายการสั้นลงหนึ่งบรรทัด และแยกออกจาก ThaiMart กับเบอร์โทร
   ซึ่งเป็นคนละเรื่องกัน · wrap ไว้เผื่อจอแคบมากจนสองอันไม่พอในแถวเดียว */
.contact .pair {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: inherit;
  gap: .5rem 1.5rem;
}

.contact a:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 4px; }
.contact a:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }

/* ไอคอนเป็นสีแบรนด์ ตัวหนังสือเป็นสีหมึก — ไอคอนทำหน้าที่บอกว่าเป็นช่องทางไหน
   ตัวเลขกับชื่อบัญชีคือของที่ต้องอ่าน จึงไม่ควรแย่งน้ำหนักกัน */
.contact svg {
  width: 1.2em;
  height: 1.2em;
  flex: none;
  fill: var(--brand);
}

/* ---- เนื้อหาใต้ส่วนบน ----
   กล่องนอกกว้าง 64rem เท่าส่วนบน แต่ตัวอ่านข้างในถูกจำกัดที่ 44rem —
   สองค่านี้ทำคนละหน้าที่: 44rem คือความยาวบรรทัดที่ยังกวาดตากลับต้นบรรทัดถัดไปได้
   64rem คือขอบซ้ายที่ต้องตรงกับส่วนบน ถ้าตั้ง .sec เป็น 44rem แล้วจัดกึ่งกลาง
   ขอบซ้ายจะเยื้องเข้ามาราว 10rem บนจอกว้าง ซึ่งอ่านออกว่าวางพลาด

   `.wide` คือข้อยกเว้นสำหรับของที่กวาดตาเป็นช่อง ๆ (การ์ดขั้นตอน · FAQ · ชิป ·
   ช่องทางติดต่อ) ซึ่งไม่ได้อ่านเป็นบรรทัดยาว จึงกินความกว้างเต็มกล่องนอกได้ */
.sec {
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.sec > * { max-width: 44rem; }
.sec > .wide { max-width: none; }
.sec + .sec { margin-top: clamp(3rem, 7vw, 4.5rem); }

/* ขีดสั้นสีแบรนด์เหนือหัวข้อ แทนการเติมป้ายกำกับอีกบรรทัด — บอกว่า "ส่วนใหม่
   เริ่มตรงนี้" ได้โดยไม่ต้องเพิ่มคำที่พูดซ้ำกับตัวหัวข้อเอง */
.sec h2 {
  margin: 0 0 1.1rem;
  font-size: clamp(1.3rem, 3.8vw, 1.7rem);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -.01em;
}
.sec h2::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 3px;
  margin-bottom: 1.1rem;
  border-radius: 2px;
  background: var(--brand);
}
.sec p { margin: 0 0 .8rem; color: var(--ink-soft); text-wrap: pretty; }
.sec p:last-child { margin-bottom: 0; }

/* อัตราส่วนคือตัวเลขที่คนกลับมาเปิดหาบ่อยที่สุดหลังซื้อไปแล้ว — ทำเป็นตัวเลขใหญ่
   ที่เจอตั้งแต่กวาดตา ไม่ใช่ประโยคที่ต้องอ่านทีละคำ · คั่นด้วยเส้นบนล่างแทนกล่อง
   มีพื้นสี เพราะหน้านี้พื้นขาวล้วน กล่องพื้นสีเดียวบนหน้าจะดูเหมือนของหลงมา */
.ratio {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .2rem .9rem;
  margin: 0 0 1.7rem;
  padding: .9rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.ratio b {
  font-size: clamp(1.6rem, 5vw, 2.1rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.ratio span { color: var(--ink-soft); }

/* สี่ขั้นเป็นการ์ดเรียงกัน ไม่ใช่รายการมีจุดนำหน้า — คนที่ยืนอยู่หน้าเตากวาดตาหา
   ว่า "ตอนนี้ถึงขั้นไหน" จากตัวเลขในกรอบได้เร็วกว่าไล่อ่านทีละบรรทัด

   ยังเป็น <ol> อยู่ ลำดับจึงยังถูกต้องสำหรับเครื่องอ่านหน้าจอ · เลข 01-04 มาจาก
   counter ใน CSS ไม่ใช่ข้อความในหน้า จึงไม่ไปแทรกกลางประโยคของขั้นตอนตอนที่
   เครื่องอ่านหน้าไปดึงข้อความไปตอบคำถาม */
.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .75rem;
  counter-reset: step;
}
.steps li {
  counter-increment: step;
  padding: 1.05rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink-soft);
}
.steps li::before {
  content: "0" counter(step);
  display: block;
  margin-bottom: .5rem;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}

/* ตารางข้อมูลสินค้าเป็นแถวคั่นเส้น ไม่ใช่ย่อหน้าติดกัน — ของแบบนี้คนไม่ได้อ่าน
   ตั้งแต่ต้นจนจบ แต่กวาดหาบรรทัดที่ตัวเองอยากรู้ เส้นคั่นทำให้หาเจอเร็วขึ้น */
.facts { margin: 0; display: grid; }
.facts > div {
  display: grid;
  gap: .1rem;
  padding: .9rem 0;
  border-top: 1px solid var(--line);
}
.facts dt { font-weight: 600; }
.facts dd { margin: 0; color: var(--ink-soft); }

/* มีกะปิ = มีกุ้ง เป็นข้อมูลความปลอดภัย ไม่ใช่ข้อมูลประกอบ — คนแพ้อาหารทะเล
   ต้องเห็นก่อนกด ไม่ใช่หลังกิน · นี่เป็นที่เดียวนอกจากตรา ESTD ที่หยิบสีแดง
   ของแบรนด์มาใช้ได้อย่างมีเหตุผล เพราะเป็นคำเตือนจริง ไม่ใช่การตกแต่ง */
.note {
  margin: 1.5rem 0 0;
  padding: .15rem 0 .15rem 1rem;
  border-left: 3px solid var(--accent);
  color: var(--ink);
  font-weight: 600;
}

.chips {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
}
.chips li {
  padding: .45rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .9rem;
  color: var(--ink-soft);
}

/* คำถามเก้าข้อเรียงลงมาเป็นแถวเดียวบนจอกว้างคือกำแพงข้อความที่ไม่มีใครอ่าน
   แบ่งสองคอลัมน์แล้วแต่ละข้อกลายเป็นก้อนที่กวาดตาผ่านได้

   **ไม่ทำเป็น accordion ที่พับคำตอบไว้** ถึงจะดูสั้นกว่า — เครื่องที่มาอ่านหน้า
   เพื่อเอาไปตอบคำถามอ่านเฉพาะข้อความที่แสดงอยู่จริง คำตอบที่ถูกซ่อนไว้จึงหายไป
   จากสิ่งที่มันเห็น ซึ่งขัดกับเหตุผลทั้งหมดที่เขียน FAQ นี้ขึ้นมา */
.faq { display: grid; }
.faq > div { padding: 1.15rem 0; border-top: 1px solid var(--line); }
.faq h3 {
  margin: 0 0 .35rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.55;
}
.faq p { margin: 0; color: var(--ink-soft); text-wrap: pretty; }

/* ช่องทางติดต่อท้ายหน้าเป็นการ์ดที่กดได้ทั้งใบ ต่างจากรายการเปล่า ๆ ด้านบน —
   ด้านบนมันอยู่ในสายตาเดียวกับรูปสินค้าอยู่แล้ว กรอบจึงเกินความจำเป็น
   ส่วนท้ายหน้าคือจุดที่คนอ่านจบแล้วต้องเลือกว่าจะทักทางไหน เป้าที่ใหญ่และ
   ขอบเขตชัดจึงช่วยจริง โดยเฉพาะบนมือถือที่กดด้วยนิ้วโป้ง */
.channels {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .75rem;
}
.channels a {
  display: flex;
  align-items: center;
  gap: .85rem;
  height: 100%;
  padding: 1rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  transition: border-color .12s ease, color .12s ease;
}
.channels a:hover { border-color: var(--brand); color: var(--brand); }
.channels a:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.channels svg { width: 1.4em; height: 1.4em; flex: none; fill: var(--brand); }
.channels .what {
  display: block;
  font-size: .76rem;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--ink-soft);
}

footer {
  padding: 1.5rem;
  text-align: center;
  font-size: .82rem;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
}
footer p { margin: 0; }
/* ชื่อแบรนด์เด่นกว่าชื่อนิติบุคคลหนึ่งขั้น — คนจำ "ลุงหรอย" ไม่ได้จำชื่อบริษัท
   แต่ชื่อบริษัทต้องมีอยู่จริงบนหน้า */
footer .brandline { color: var(--ink); font-weight: 600; }

/* เครื่องที่ตั้งว่าไม่เอาการเคลื่อนไหว ต้องได้หน้านิ่งสนิท — ไม่ใช่แค่ transition
   ตอนนี้มี animation ที่วนตลอดเวลาแล้ว ถ้าไม่ปิดด้วยซองจะลอยไม่หยุด */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---- จอกว้าง: ส่วนบนสลับเป็นสองคอลัมน์ ----
   บล็อกนี้ต้องอยู่ท้ายสุดของ style เพราะ specificity เท่ากับกฎตั้งต้นข้างบน
   ถ้าวางไว้ก่อน กฎที่เขียนทีหลัง (เช่น .logo { margin: 0 auto }) จะทับมันเงียบ ๆ
   แล้วได้หน้าที่ "เกือบ" ถูก ซึ่งหาสาเหตุยากกว่าหน้าที่พังชัด ๆ */
@media (min-width: 34rem) {
  /* ตารางข้อมูลสินค้าเป็นสองคอลัมน์เมื่อจอพอ — หัวข้อกับค่าอยู่บรรทัดเดียวกัน
     อ่านเทียบกันได้เร็วกว่าเรียงสลับบนล่าง */
  .facts > div {
    grid-template-columns: 10rem 1fr;
    gap: 0 1.5rem;
    align-items: baseline;
  }
  .steps    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .channels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 54rem) {
  /* สี่ขั้นเรียงเป็นแถวเดียวได้พอดีเมื่อจอกว้างพอ — เห็นทั้งกระบวนการในสายตาเดียว
     ส่วน FAQ แบ่งสองคอลัมน์ ความยาวบรรทัดต่อคอลัมน์ยังอยู่ในเกณฑ์ที่อ่านสบาย */
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .faq   { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.75rem; }

  .hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    grid-template-areas:
      "head shot"
      "buy  shot";
    column-gap: clamp(2rem, 5vw, 4rem);
    text-align: left;
  }
  .head { align-self: end; }
  .shot { align-self: center; }
  .buy  { align-self: start; }
  .logo { margin-inline: 0; }
  .lede { margin-inline: 0; }
  /* .specs ไม่ตั้ง flex-start — มันอยู่ใต้รูปที่จัดกึ่งกลางคอลัมน์อยู่
     ชิดซ้ายเมื่อไหร่ชิปจะไปโผล่นอกแนวรูป ดูเหมือนวางพลาด */
  .contact { align-items: flex-start; }
}


/* ==== ส่วนที่มีเฉพาะหน้า /product/ ==== */

/* แถบบนมีแค่โลโก้ที่กดกลับหน้าแรกได้ — หน้าเดียวไม่ต้องมีเมนู และเมนูที่มีลิงก์
   เดียวคือแถบที่กินที่เปล่า ๆ · โลโก้ทำหน้าที่ทั้งบอกว่านี่เว็บใคร และเป็นทางกลับ
   ซึ่งเป็นสิ่งที่คนกดอยู่แล้วโดยสัญชาตญาณ */
.topbar {
  padding: 1.5rem 1.5rem 0;
  max-width: 64rem;
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* ปุ่มกลับเป็นข้อความในกรอบมน ไม่ใช่แค่โลโก้ที่กดได้ — โลโก้ที่ลิงก์กลับหน้าแรก
   เป็นธรรมเนียมที่คนทำเว็บรู้ แต่คนซื้อของไม่ได้รู้ด้วยทุกคน · ปุ่มที่เขียนว่า
   "กลับหน้าแรก" ตรง ๆ ไม่ต้องให้ใครเดา
   ทรงกรอบมนเดียวกับชิปในหน้า จึงไม่ใช่ของแปลกปลอมที่โผล่มาชิ้นเดียว */
.back {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .95rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: .88rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .12s ease, color .12s ease;
}
.back:hover { border-color: var(--brand); color: var(--brand); }
.back:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.topbar img {
  display: block;
  width: 6.5rem;
  height: auto;
}
.topbar a {
  display: inline-block;
  border-radius: 6px;
}
.topbar a:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }

/* หัวเรื่องของหน้ารายละเอียด — h1 ตัวเดิมถูกเขียนไว้สำหรับ hero ที่จัดกึ่งกลาง
   บนจอแคบ ที่นี่เป็นบทความ จึงชิดซ้ายเสมอและเว้นบนล่างแบบย่อหน้าหัวเรื่อง */
.lede-block { margin: clamp(1.75rem, 5vw, 2.75rem) auto clamp(2.5rem, 6vw, 3.5rem); }
.lede-block h1 {
  margin: 0 0 .8rem;
  text-align: left;
  font-size: clamp(1.6rem, 4.6vw, 2.2rem);
}
.lede-block p { margin: 0; color: var(--ink-soft); }
.lede-block a { color: var(--brand); font-weight: 600; text-underline-offset: 4px; }

/* ==== ลิงก์ "อ่านต่อ" บนหน้าแรก ==== */

/* เป็นลิงก์ข้อความเงียบ ๆ ไม่ใช่ปุ่ม — หน้าแรกมีเป้าหมายเดียวคือให้คนกดสั่งซื้อ
   ปุ่มที่สองที่เด่นพอ ๆ กันจะแย่งความสนใจไปจากอันนั้น · แต่ต้องมีอยู่จริง
   ไม่งั้นทั้งคนและตัวเก็บข้อมูลจะหาหน้า /product/ ไม่เจอเลย */
/* จัดกึ่งกลาง ไม่ใช่ชิดซ้ายตามคอลัมน์ — มันอยู่ใต้ชิปสเปกที่จัดกึ่งกลางอยู่แล้ว
   (ด้วยเหตุผลเดียวกับ .specs: ชิดซ้ายเมื่อไหร่จะไปโผล่นอกแนวรูป ดูเหมือนวางพลาด) */
.more { margin: 1rem 0 0; text-align: center; }
.more a {
  color: var(--ink-soft);
  font-size: .92rem;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: color .12s ease, border-color .12s ease;
}
.more a:hover { color: var(--brand); border-color: var(--brand); }
.more a:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 3px; }


/* ==== หน้า 404 ==== */

/* จัดกลางแนวตั้งด้วยวิธีเดียวกับ .hero — ยืดเต็มที่ว่างที่ main เหลือให้
   แล้วค่อยจัดกลางข้างใน ไม่ได้ใช้ position หรือ transform */
.oops {
  flex: 1 0 auto;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: .35rem;
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  padding: clamp(2rem, 7vw, 4.5rem) 1.5rem;
  text-align: center;
}
.oops-logo {
  width: min(9rem, 44vw);
  height: auto;
  margin-bottom: 1.3rem;
}
.oops h1 {
  margin: 0;
  font-size: clamp(1.4rem, 4vw, 1.8rem);
}
.oops p { margin: 0; color: var(--ink-soft); }

/* สองทางออก ไม่ใช่ทางเดียว — คนที่มาเจอหน้านี้ไม่ได้อยากกลับหน้าแรกเสมอไป
   ส่วนใหญ่กำลังหาข้อมูลสินค้าอยู่แล้วพิมพ์ URL ผิด · ใช้ทรงปุ่มเดียวกับปุ่มกลับ
   ในหน้า /product/ ไม่ได้คิดทรงใหม่ขึ้นมาเฉพาะหน้านี้ */
.oops .oops-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
  margin-top: 1.6rem;
}