/* ============================================================
   Vee Vee — base + shared components
   Load order: tokens.css -> main.css -> <page>.css
   ============================================================ */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

/* The browser hides [hidden] with a rule weaker than any class selector, so
   a component that sets its own display silently ignores the attribute.
   That let the admin shell paint before its session check had finished.
   One declaration here makes hidden mean hidden everywhere. */
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-head);
  color: var(--verdant-deep);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { text-wrap: pretty; }

/* Applied by initNoBreakTerms in main.js to loanwords the browser's Thai
   dictionary does not know and would otherwise break in the middle of.
   See the term list there for why each word is on it. */
.nb { white-space: nowrap; }
p + p { margin-top: var(--sp-4); }

a { color: var(--verdant); text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
@media (hover: hover) {
  a:hover { color: var(--verdant-deep); }
}
/* ลิงก์ในเนื้อความ ตอบสนองตอนนิ้วกดด้วยเส้นใต้ที่หนาขึ้น
   ไม่ใช้การขยับตำแหน่ง เพราะข้อความที่ขยับระหว่างอ่านทำให้เสียบรรทัด */
a:active {
  color: var(--verdant-deep);
  text-decoration-thickness: 2px;
}

strong { font-weight: 600; color: var(--verdant-deep); }

.lead {
  font-size: var(--fs-lead);
  color: var(--text-muted);
  line-height: 1.75;
}

/* Small caps label above a heading — used to orient the reader in long pages */
/* ป้ายกำกับส่วน เช่น "วิสัยทัศน์" "ค่านิยม" "เสียงจากลูกค้า"
   เดิมใช้ --verdant-soft ซึ่งได้ 5.27:1 บนพื้นไอวอรี่ ผ่านเกณฑ์แบบเฉียด
   แต่บนพื้นบลัชของส่วนอบอุ่นเหลือ 4.05:1 ซึ่งตกเกณฑ์
   และที่ขนาด 13px ตัวพิมพ์ใหญ่ ความจางมีผลกับการอ่านมากกว่าข้อความปกติ
   เปลี่ยนเป็นเขียวแบรนด์เต็ม ได้ 9.2:1 บนไอวอรี่ และผ่านทุกพื้นที่เว็บนี้ใช้
   ส่วนที่พื้นหลังเข้ม ป้ายพวกนี้ตั้งสีส้มมาในแอตทริบิวต์ style อยู่แล้ว
   ซึ่งชนะกฎนี้ จึงไม่กระทบ */
.eyebrow {
  font-size: var(--fs-tiny);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--verdant);
  margin-bottom: var(--sp-3);
}

.text-accent { font-family: var(--font-accent); font-style: italic; }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container-narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); }
.section-alt { background: var(--bg-alt); }
.section-warm { background: var(--blush); }
.section-dark { background: var(--bg-dark); color: var(--sage-light); }
.section-dark h1, .section-dark h2, .section-dark h3 { color: var(--white); }
.section-dark .lead { color: var(--sage); }

.stack > * + * { margin-top: var(--sp-5); }
.grid { display: grid; gap: var(--sp-6); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.section-head { max-width: 46rem; margin-bottom: var(--sp-6); }
.section-head.center { margin-inline: auto; text-align: center; }

/* ส่วนที่ติดกันและพื้นหลังสีเดียวกัน ใช้ระยะแคบลง */
.section-tight { padding-block: var(--section-y-tight); }
.section-tight-top { padding-top: var(--section-y-tight); }

/* หัวข้อส่วนที่มีย่อหน้านำ: จอกว้างวางสองคอลัมน์ หัวข้อซ้าย คำอธิบายขวา

   เดิมทั้งก้อนกว้าง 736px ในคอนเทนเนอร์ 1120px แล้ววางซ้อนลงมา
   สูงรวม 261px โดยปล่อยพื้นที่ด้านขวาว่าง 384px ทิ้ง
   จัดสองคอลัมน์แล้วใช้ความกว้างที่มีอยู่แทน ความสูงลดเหลือราวครึ่งเดียว
   และหน้าตาเป็นระเบียบขึ้นเพราะขอบขวาของทุกส่วนตรงกัน

   ครอบด้วย @supports เพราะ :has() ไม่มีในเบราว์เซอร์เก่า
   ถ้าไม่รองรับก็ตกกลับไปเป็นแบบซ้อนลงมาเหมือนเดิม ซึ่งยังอ่านได้ปกติ */
@supports selector(:has(*)) {
  @media (min-width: 900px) {
    .section-head:not(.center):has(> .lead) {
      max-width: none;
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
      column-gap: clamp(2rem, 5vw, 4.5rem);
      align-items: end;
    }
    .section-head:not(.center):has(> .lead) > .eyebrow { grid-column: 1 / -1; }
    .section-head:not(.center):has(> .lead) > h2 { margin-bottom: 0; }
    /* !important เพราะย่อหน้านำหลายที่ตั้ง margin-top มาในแอตทริบิวต์ style
       ซึ่งชนะสไตล์ชีตเสมอ พอมาอยู่คนละคอลัมน์ระยะนั้นไม่จำเป็นแล้ว */
    .section-head:not(.center):has(> .lead) > .lead { margin-top: 0 !important; }
  }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding: 0.75rem 1.75rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.btn-primary { background: var(--verdant); color: var(--white); }
.btn-accent  { background: var(--citrus); color: var(--ink); }
.btn-ghost   { background: transparent; color: var(--verdant); border-color: var(--sage); }
.btn-light   { background: var(--white); color: var(--verdant-deep); }

/* ---------- ชี้ค้าง ----------
   ทุกกฎ :hover ต้องอยู่ใน @media (hover: hover) เสมอ
   ถ้าไม่ครอบ เบราว์เซอร์บนมือถือจะจำลอง hover ให้หลังแตะ แล้วสไตล์จะค้าง
   อยู่บนปุ่มทั้งที่ยกนิ้วไปแล้ว จนกว่าจะไปแตะที่อื่น
   ผลคือปุ่มดูเหมือนถูกชี้อยู่ตลอดโดยไม่มีใครชี้ */
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); }
  .btn-primary:hover { background: var(--verdant-deep); color: var(--white); }
  .btn-accent:hover  { background: var(--citrus-deep); color: var(--ink); }
  .btn-ghost:hover   { background: var(--sage-wash); border-color: var(--verdant-soft); }
  .btn-light:hover   { background: var(--sage-light); color: var(--verdant-deep); }
}

/* ---------- กำลังกด ----------
   สำคัญที่สุดสำหรับมือถือ เพราะที่นั่นไม่มี hover ให้เห็นเลย
   ของเดิมมี .btn:active { translateY(0) } ซึ่งแค่ยกเลิกการยกของ hover
   บนมือถือปุ่มอยู่ที่ 0 เป็นค่าปกติอยู่แล้ว กฎนั้นจึงไม่ทำให้เกิดอะไรขึ้น
   กดแล้วหน้าจอนิ่งสนิท คนจึงอ่านว่า "กดไม่ติด" แล้วกดซ้ำ

   brightness ใช้ได้กับปุ่มทุกสีในกฎเดียว ไม่ต้องเขียนแยกทีละแบบ
   และ transition-duration ต้องสั้นกว่าปกติ เพราะนี่คือสิ่งที่นิ้วกำลังสัมผัส */
.btn:active {
  transform: translateY(1px);
  filter: brightness(0.93);
  transition-duration: var(--dur-instant);
}

.btn-group { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* Text link with an arrow that nudges on hover */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 600;
  text-decoration: none;
}
.link-arrow::after {
  content: "→";
  transition: transform var(--dur) var(--ease);
}
@media (hover: hover) {
  .link-arrow:hover::after { transform: translateX(4px); }
}
.link-arrow:active::after {
  transform: translateX(4px);
  transition-duration: var(--dur-instant);
}

/* ---------- Cards ---------- */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
/* ยกตัวเฉพาะการ์ดที่กดได้จริง
   :has(a) กันไม่ให้การ์ด "เร็ว ๆ นี้" ที่ยังไม่มีลิงก์ยกตัวตาม
   เพราะของที่ขยับตอนชี้คือคำสัญญาว่ากดได้ ถ้ากดแล้วไม่มีอะไรเกิดขึ้นคือหลอกตา */
@media (hover: hover) {
  .card:has(a):hover { transform: translateY(-4px); box-shadow: var(--shadow); }
}
.card:has(a:active) {
  transform: translateY(1px);
  box-shadow: var(--shadow-sm);
  transition-duration: var(--dur-instant);
}
/* เบราว์เซอร์ที่ยังไม่รู้จัก :has() จะข้ามสองบล็อกบนไปทั้งหมด
   จึงต้องมีทางสำรองให้การ์ดยังมีปฏิกิริยาตอนชี้เหมือนเดิม */
@supports not selector(:has(*)) {
  @media (hover: hover) {
    .card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
  }
}
/* รูปหัวการ์ดถูกบังคับสัดส่วนให้เท่ากันทุกใบ

   ภาพที่ทีมการตลาดอัปโหลดมาจะมีสัดส่วนไม่เท่ากันแน่นอน ถ้าปล่อยตามไฟล์
   การ์ดที่เรียงกันจะสูงไม่เท่ากันและขอบล่างจะไม่ตรงแนว
   ล็อกไว้ที่ 3:2 แล้วครอบให้เต็มกรอบ การ์ดทุกใบจึงสูงเท่ากันเสมอ
   และรูปจัตุรัสที่เคยสูง 352px เหลือ 235px ส่วนที่มีการ์ดจึงเตี้ยลงตาม */
.card > img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.card-body { padding: var(--sp-5); }
.card-title { font-size: var(--fs-h4); margin-bottom: var(--sp-2); }
.card-meta { font-size: var(--fs-tiny); color: var(--text-muted); }

/* ---------- Pillar card (sits on .section-dark) ---------- */
.pillar {
  padding: var(--sp-6);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(211, 226, 218, 0.18);
}
.pillar-num {
  display: block;
  margin-bottom: var(--sp-3);
  font-family: var(--font-accent);
  font-size: var(--fs-small);
  color: var(--citrus);
}
.pillar h3 { font-size: var(--fs-h4); color: var(--white); margin-bottom: var(--sp-3); }
.pillar p { font-size: var(--fs-small); color: var(--sage); }
.pillar-todo { color: var(--citrus); }

/* ---------- Spec list ---------- */
.spec-list { margin-top: var(--sp-6); }
.spec-list li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--border);
}
.spec-list li:last-child { border-bottom: 0; }
.spec-key {
  flex: 0 0 8.5rem;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--verdant);
}
.spec-val { flex: 1 1 12rem; font-size: var(--fs-small); color: var(--text-muted); }
.spec-todo { color: var(--citrus-deep); font-style: normal; }

/* ---------- SKU badge ---------- */
.sku-badge {
  display: inline-block;
  font-family: var(--font-accent);
  font-size: var(--fs-tiny);
  font-weight: 600;
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--citrus);
  color: var(--ink);
  white-space: nowrap;
  vertical-align: middle;
}
/* Vee Vee Duo has not launched. It is shown so people know it is coming,
   deliberately dimmed so nobody mistakes it for something they can buy. */
.sku.is-soon, .value-card.is-soon { border-style: dashed; background: transparent; }
.sku-badge-soon {
  background: transparent;
  /* ขอบยังใช้ citrus-deep ได้เพราะเส้นใช้เกณฑ์ 3:1
     แต่ตัวอักษรต้องเข้มกว่านั้น ป้าย "เร็ว ๆ นี้" เคยได้แค่ 2.83:1 บนพื้นเซจ */
  border: 1px solid var(--citrus-deep);
  color: var(--citrus-text);
}

/* ---------- Price ---------- */
.price-tag {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}
.price-num {
  font-family: var(--font-accent);
  font-size: clamp(2.25rem, 5vw, 3rem);
  font-weight: 600;
  color: var(--verdant-deep);
  line-height: 1;
}
.price-unit { font-size: var(--fs-small); color: var(--text-muted); }

/* ---------- Closing call to action (every page ends with one) ---------- */
.closing {
  position: relative;
  text-align: center;
  background: linear-gradient(160deg, var(--blush) 0%, var(--sage-light) 100%);
  overflow: hidden;
}
.closing h2 { max-width: 18ch; margin-inline: auto; }
.closing .lead { max-width: 34rem; margin-inline: auto; }
.closing .btn-group { justify-content: center; margin-top: var(--sp-7); }

/* ---------- Image placeholders ----------
   No brand photography exists yet. Rather than reach for stock photos
   that would be wrong for the brand (and a licensing problem), every
   image slot renders as a labelled placeholder that names the exact
   shot needed. The list is docs/WEBSITE_BLUEPRINT.md section 9.
   Replace <div class="ph"> with a real <img> as photos arrive. */
.ph {
  position: relative;
  display: grid;
  place-content: center;
  gap: var(--sp-2);
  padding: var(--sp-5);
  text-align: center;
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, var(--sage-light) 0%, var(--sage) 55%, var(--sage-wash) 100%);
  color: var(--verdant-deep);
  overflow: hidden;
  isolation: isolate;
}
.ph::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,0.16) 0 12px,
      transparent 12px 24px);
  z-index: -1;
}
.ph-icon { font-size: 1.75rem; line-height: 1; }
.ph-label {
  font-size: var(--fs-tiny);
  font-weight: 600;
  letter-spacing: 0.02em;
  max-width: 24ch;
  line-height: 1.5;
}
.ph-ref {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  opacity: 0.7;
}
.ph-warm { background: linear-gradient(135deg, var(--blush) 0%, #E9C4B6 60%, var(--citrus) 140%); }
.ph-deep { background: linear-gradient(150deg, var(--verdant-soft) 0%, var(--verdant-deep) 100%); color: var(--sage-light); }

.ph-16x9  { aspect-ratio: 16 / 9; }
.ph-4x3   { aspect-ratio: 4 / 3; }
.ph-1x1   { aspect-ratio: 1 / 1; }
.ph-3x4   { aspect-ratio: 3 / 4; }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
/* Transparent while over the hero, solid once the page scrolls */
.site-header.is-scrolled {
  background: rgba(250, 247, 242, 0.92);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-sm);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  width: 100%;
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--verdant-deep);
  text-decoration: none;
  white-space: nowrap;
}
.brand-mark {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--citrus-deep);
}

/* ---------- โลโก้จริงบนหัวเว็บและท้ายเว็บ ----------

   วาดด้วย mask ไม่ใช่ <img> เพราะโลโก้ต้องเปลี่ยนสีตามที่ที่มันไปวางอยู่
   คือเขียวเข้มบนพื้นไอวอรี่ ขาวบนภาพ hero ของหน้าแรก และไอวอรี่บนท้ายเว็บสีเข้ม
   <img> เปลี่ยนสีไม่ได้ ต้องทำสามไฟล์ ส่วน mask ใช้ currentColor
   จึงรับสีจาก .brand ที่มีกฎครบทุกกรณีอยู่แล้วโดยไม่ต้องเขียนอะไรเพิ่ม

   ตัวอักษร VeeVee ยังอยู่ในหน้าเสมอ เพียงแต่ซ่อนจากสายตาเมื่อโลโก้ใช้งานได้
   โปรแกรมอ่านหน้าจอและ Google จึงยังเห็นชื่อแบรนด์เป็นข้อความจริง */
.brand-logo { display: none; }

@supports ((mask-image: url("x.svg")) or (-webkit-mask-image: url("x.svg"))) {
  .brand-logo {
    display: block;
    /* ตัวอักษร VeeVee เดิมกว้าง 82px ถ้าใช้โลโก้สูง 1.75rem จะได้กว้างแค่ 47px
       ซึ่งดูเล็กลงจากเดิมมาก 2.125rem ให้ความกว้าง 57px ซึ่งใกล้เคียงของเดิม
       และยังเหลือระยะหายใจบน-ล่างข้างละ 19px ในเฮดเดอร์สูง 72px */
    height: 2.125rem;
    aspect-ratio: 540 / 323;     /* กรอบจริงของตัวมาร์กหลังครอบตัด */
    background-color: currentColor;
    -webkit-mask: url("/assets/img/brand/logo-wordmark.svg") center / contain no-repeat;
    mask: url("/assets/img/brand/logo-wordmark.svg") center / contain no-repeat;
  }
  /* ซ่อนจากตาแต่ไม่ซ่อนจากโปรแกรมอ่านหน้าจอ */
  .brand-text {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
.site-footer .brand-logo { height: 2.5rem; }
/* เฮดเดอร์เตี้ยลงเหลือ 60px บนจอเล็ก โลโก้ต้องเตี้ยตามไม่งั้นจะชนขอบ */
@media (max-width: 640px) {
  .brand-logo { height: 1.75rem; }
}
/* ---------- เฮดเดอร์ที่ลอยอยู่บนภาพเข้ม ----------

   กฎชุดนี้เคยเขียนเป็น .site-header:not(.is-scrolled) เฉย ๆ
   ซึ่งหมายถึง "ทุกหน้า ตอนที่ยังไม่เลื่อน" ไม่ใช่ "ตอนที่อยู่บนภาพเข้ม"
   มีแค่หน้าแรกหน้าเดียวที่มีภาพ hero เข้มอยู่ใต้เฮดเดอร์
   อีกเก้าหน้าที่เหลือมีหัวหน้าสีไอวอรี่ ตัวอักษรสีขาวจึงทับพื้นไอวอรี่
   วัดได้คอนทราสต์ 1.07:1 ขณะที่เกณฑ์คือ 4.5:1 — เมนูแทบมองไม่เห็น
   จนกว่าจะเลื่อนหน้าลงไปให้เฮดเดอร์เปลี่ยนเป็นพื้นทึบ

   แก้โดยให้สีขาวเป็นสิ่งที่ต้องขอใช้ ไม่ใช่ค่าตั้งต้น
   หน้าไหนมีภาพเข้มใต้เฮดเดอร์ ให้ใส่คลาส site-header-overlay เพิ่มใน HTML
   ถ้าลืมใส่ ผลที่ได้คือตัวอักษรเข้มบนพื้นสว่าง ซึ่งอ่านได้เสมอ
   ตรงข้ามกับของเดิมที่ถ้าลืมอะไรไปแล้วผลคือมองไม่เห็น */
.site-header-overlay:not(.is-scrolled) .brand { color: var(--white); }
.site-header-overlay:not(.is-scrolled) .brand-mark { color: var(--citrus); }
.site-header-overlay:not(.is-scrolled) .nav-link { color: rgba(255,255,255,0.88); }
@media (hover: hover) {
  .site-header-overlay:not(.is-scrolled) .nav-link:hover { color: var(--white); }
}

.nav { display: flex; align-items: center; gap: var(--sp-5); }
.nav-list { display: flex; align-items: center; gap: var(--sp-5); }
.nav-link {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  position: relative;
  padding-block: var(--sp-2);
  transition: color var(--dur-fast) var(--ease);
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
/* ---------- หน้าที่กำลังเปิดอยู่ ----------

   เดิมหน้าปัจจุบันต่างจากลิงก์อื่นแค่เส้นใต้ 1.5px สีเดียวกับตัวอักษร
   ซึ่งเป็นเส้นเดียวกับที่ขึ้นตอนเอาเมาส์ไปชี้ ผลคือแยกไม่ออกว่า
   "นี่คือหน้าที่อยู่" กับ "นี่คือลิงก์ที่กำลังชี้อยู่"
   วัดแล้วสี น้ำหนัก และขนาดตัวอักษรเหมือนกันทุกค่า

   ตอนนี้ใช้สามอย่างพร้อมกัน สีเขียวแบรนด์ ตัวหนาขึ้น และเส้นใต้สีส้ม
   ที่หนากว่าเดิมเท่าตัว สีส้มสำคัญเพราะทำให้ไม่ซ้ำกับเส้นของ hover
   ไม่พึ่งสีอย่างเดียว เพราะคนตาบอดสีจะแยกเขียวกับดำได้ยาก
   แต่ยังเห็นความหนาของตัวอักษรและความหนาของเส้นใต้ */
.nav-link[aria-current="page"] {
  color: var(--verdant);
  font-weight: 600;
}
.nav-link[aria-current="page"]::after {
  transform: scaleX(1);
  height: 3px;
  background: var(--citrus-deep);
}
/* บนภาพ hero เข้มของหน้าแรก ใช้สีขาวเต็มกับส้มสด ซึ่งสว่างกว่าพื้นหลัง */
.site-header-overlay:not(.is-scrolled) .nav-link[aria-current="page"] { color: var(--white); }
.site-header-overlay:not(.is-scrolled) .nav-link[aria-current="page"]::after { background: var(--citrus); }
@media (hover: hover) {
  .nav-link:hover::after { transform: scaleX(1); }
}
.nav-link:active::after { transform: scaleX(1); transition-duration: var(--dur-instant); }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
  display: block;
  width: 22px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; }
.nav-toggle-bars::before { transform: translateY(-7px); }
.nav-toggle-bars::after  { transform: translateY(7px); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after  { transform: rotate(-45deg); }

@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; position: relative; color: var(--ink); }
  /* ปุ่มเมนูสามขีดบนมือถือ ก็ต้องผูกกับคลาสเดียวกัน ไม่งั้นบนหน้าอื่น
     ขีดสีขาวจะหายไปบนพื้นไอวอรี่ และคนจะเปิดเมนูไม่ได้เพราะหาปุ่มไม่เจอ */
  .site-header-overlay:not(.is-scrolled) .nav-toggle { color: var(--white); }
  .site-header.is-open { background: var(--ivory); }
  .site-header.is-open .brand { color: var(--verdant-deep); }
  .site-header.is-open .brand-mark { color: var(--citrus-deep); }
  .site-header.is-open .nav-toggle { color: var(--ink); }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--sp-4) var(--gutter) var(--sp-7);
    background: var(--ivory);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur) var(--ease),
                transform var(--dur) var(--ease),
                visibility var(--dur);
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-link {
    display: block;
    padding: var(--sp-4) 0;
    border-bottom: 1px solid var(--border);
    color: var(--ink) !important;
    font-size: 1.0625rem;
  }
  .nav-link::after { display: none; }
  .nav .btn { margin-top: var(--sp-5); }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--verdant-deep);
  color: var(--sage-light);
  padding-block: var(--sp-9) var(--sp-6);
}
.site-footer a { color: var(--sage-light); text-decoration: none; }
@media (hover: hover) {
  .site-footer a:hover { color: var(--white); text-decoration: underline; }
}
.site-footer a:active { color: var(--white); text-decoration: underline; }
.footer-grid {
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  padding-bottom: var(--sp-7);
  border-bottom: 1px solid rgba(211, 226, 218, 0.2);
}
.footer-brand { max-width: 24rem; }
.footer-brand .brand { color: var(--white); font-size: 1.5rem; }
.footer-brand .brand-mark { color: var(--citrus); }
.footer-tagline { margin-top: var(--sp-3); color: var(--sage); font-size: var(--fs-small); }
.footer-title {
  font-family: var(--font-body);
  font-size: var(--fs-tiny);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: var(--sp-4);
}
.footer-list li + li { margin-top: var(--sp-3); }
.footer-list a { font-size: var(--fs-small); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--sp-5);
  font-size: var(--fs-tiny);
  color: var(--sage);
}
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

/* ---------- Utilities ---------- */
.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link — keyboard users land here first */
.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  z-index: 200;
  padding: var(--sp-3) var(--sp-5);
  background: var(--verdant);
  color: var(--white);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: var(--sp-4); color: var(--white); }

/* Visible focus for every interactive element */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* A soft note block used to mark content that is still a stand-in */
.draft-note {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border: 1px dashed var(--citrus-deep);
  border-radius: var(--radius);
  background: rgba(232, 176, 75, 0.09);
  font-size: var(--fs-small);
  color: var(--ink);
}
/* หัวข้อในกล่องแจ้งเตือน เคยได้ 2.88:1 บนพื้นส้มจาง
   กล่องนี้ใช้กับข้อความอย่าง "ข้อควรทราบก่อนใช้" ซึ่งเป็นข้อมูลความปลอดภัย
   จึงเป็นข้อความที่ยิ่งต้องอ่านออกชัดกว่าข้อความทั่วไป ไม่ใช่จางกว่า */
.draft-note strong { color: var(--citrus-text); }

/* ---------- Scroll reveal ----------
   Gated behind .js (set by an inline script in <head>). Without that class
   the hidden state never applies, so a script error or a browser with JS
   off still renders every section instead of a blank page. */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease),
              transform var(--dur-slow) var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 90ms; }
.reveal-delay-2 { transition-delay: 180ms; }
.reveal-delay-3 { transition-delay: 270ms; }

/* ---------- Reduced motion ----------
   "reduce" ไม่ได้แปลว่า "ปิดทุกอย่าง"

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

   ของเดิมเขียน transition-duration: 0.01ms !important ให้ทุก element
   ซึ่งเหวี่ยงแหตัดการเปลี่ยนสีของปุ่มไปด้วย ทั้งที่ควรเก็บไว้
   เท่ากับกลุ่มผู้ใช้ที่ต้องการความช่วยเหลือมากที่สุดกลับได้ feedback น้อยที่สุด

   ที่ทำแทนคือตัดเฉพาะสิ่งที่ขยับจริง — animation ทั้งหมด และ transform
   ส่วนสี ความทึบ เงา และเส้นใต้ ปล่อยให้ทำงานตามปกติ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    /* อนิเมชันที่วนซ้ำคือตัวกระตุ้นหลัก ตัดทิ้งทั้งหมด */
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    /* ตัดเฉพาะการขยับ ไม่แตะระยะเวลาของคุณสมบัติอื่น */
    transition-property: color, background-color, border-color, box-shadow,
                         opacity, text-decoration-color, text-decoration-thickness,
                         filter, outline-color !important;
  }

  /* เนื้อหาต้องไม่ต้องรออนิเมชันเพื่อจะปรากฏ */
  .js .reveal { opacity: 1; transform: none; }

  /* ตัดการยกตัวตอนชี้ค้าง ซึ่งเป็นการตกแต่งล้วน ๆ ไม่ได้บอกอะไรเพิ่ม
     สังเกตว่าไม่ได้ตัด :active ออกด้วย เพราะนั่นคือการตอบสนองตอนนิ้วกด
     ซึ่งเมื่อ transition ไม่ทำงานกับ transform แล้ว มันจะเปลี่ยนแบบทันที
     ไม่ใช่การเคลื่อนไหวข้ามเวลา จึงไม่ใช่สิ่งที่ค่านี้ตั้งใจจะตัด */
  .btn:hover, .card:has(a):hover,
  .retailer:hover, .channel:hover,
  .note-tab:hover, .hotspot:hover { transform: none !important; }
}

/* ---------- ตัวช่วยตอนเลื่อนดูหน้ายาว ----------
   ทั้งสองอย่างถูกสร้างด้วย JavaScript จึงไม่มีอยู่บนหน้าที่ปิดสคริปต์ */

.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 200;
  background: var(--citrus-deep);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}
/* เบราว์เซอร์รุ่นใหม่ขยับแถบนี้เองบนเธรดของการ์ดจอ ไม่ต้องใช้ JavaScript เลย
   จึงลื่นแม้ขณะที่หน้ากำลังทำงานอย่างอื่นอยู่
   คลาส has-scroll-timeline ถูกใส่โดยสคริปต์ต่อเมื่อรองรับจริงเท่านั้น
   ที่เหลือสคริปต์จะอัปเดต transform ให้เองเฟรมละครั้ง */
@supports (animation-timeline: scroll()) {
  .has-scroll-timeline .scroll-progress {
    animation: progress-grow linear;
    animation-timeline: scroll(root block);
  }
  @keyframes progress-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

.to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 150;
  width: 48px; height: 48px;      /* ไม่ต่ำกว่าเกณฑ์พื้นที่แตะ 44px */
  display: grid;
  place-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: rgba(250, 247, 242, 0.92);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  color: var(--verdant);
  font-size: 1.125rem;
  cursor: pointer;
  /* ซ่อนด้วย opacity กับ visibility ไม่ใช่ display เพราะ display เปลี่ยนแบบ
     กระโดดไม่มีจังหวะ ส่วน visibility ยังกันไม่ให้กดโดนตอนที่มองไม่เห็น */
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              visibility 0s linear var(--dur-fast);
}
.to-top.is-shown {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
@media (hover: hover) {
  .to-top:hover { border-color: var(--sage); color: var(--verdant-deep); }
}
.to-top:active {
  transform: translateY(1px);
  background: var(--sage-wash);
  transition-duration: var(--dur-instant);
}

/* ---------- แถบขอความยินยอมเก็บข้อมูล ----------

   ติดอยู่ด้านล่าง ไม่ใช่กล่องกลางจอที่บังทุกอย่าง
   เพราะคนที่ยังไม่อยากตอบต้องอ่านเว็บต่อได้ทันที
   การบังคับให้ตอบก่อนถึงจะเข้าเว็บได้ ทำให้ "ความยินยอม" ไม่ใช่ความยินยอมจริง

   ปุ่มสองปุ่มมีขนาดและน้ำหนักใกล้เคียงกันโดยตั้งใจ
   ปุ่มปฏิเสธที่จงใจทำให้จางหรือเล็กกว่า คือการบีบให้เลือกทางที่เราอยากได้ */
.consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 300;
  padding: var(--sp-4) 0;
  background: rgba(250, 247, 242, 0.97);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 28px rgba(28, 35, 33, 0.08);
  transform: translateY(100%);
  transition: transform var(--dur) var(--ease);
}
.consent.is-shown { transform: none; }

.consent-inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
}
.consent-title {
  font-weight: 600;
  color: var(--verdant);
  margin-bottom: var(--sp-1);
}
.consent-text {
  font-size: var(--fs-small);
  color: var(--text-muted);
  max-width: 46rem;
}
.consent-actions {
  display: flex;
  gap: var(--sp-3);
  flex-shrink: 0;
}
/* บนจอแคบให้ปุ่มเต็มความกว้างและเรียงลงมา จะได้กดไม่พลาด */
@media (max-width: 640px) {
  .consent-inner { flex-direction: column; align-items: stretch; }
  .consent-actions > .btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .consent { transition: none; }
}

/* ---------- สีตอนลากแถบข้อความ ----------
   ค่าปริยายของเบราว์เซอร์เป็นสีน้ำเงินซึ่งไม่มีอยู่ในพาเลตต์เราเลย
   คนลากอ่านและลากคัดลอกบ่อยกว่าที่คิด โดยเฉพาะอีเมลกับที่อยู่ */
::selection {
  background: var(--sage-light);
  color: var(--ink);
}