/* ==================================================
   COMPONENTS.CSS — Navbar, Footer, Buttons, Cards, Badges, Forms
   Thai Flour Industry | Master Design System
   ================================================== */

/* ==================================================
   BUTTONS
   ================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-height: 48px;
  padding: var(--space-12) var(--space-24);
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  /* 16px คงที่ทุกขนาดจอ — เขียนเป็นตัวเลขตรง ๆ เพราะโทเคนขนาดตัวอักษรทุกตัวเปลี่ยนค่าตามเบรกพอยต์
     (--fs-h6 เดิมคือ 14/16/18px) ไม่มีตัวไหนเป็น 16px เท่ากันหมดให้อ้างอิงได้ */
  font-size: 16px;
  font-weight: var(--fw-medium);
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--transition-base),
              border-color var(--transition-base),
              color var(--transition-base),
              transform var(--transition-base);
}

.btn:hover {
  text-decoration: none;
  transform: translateY(-2px);
}

.btn--primary {
  background-color: var(--color-deep-red);
  border-color: var(--color-deep-red);
  color: var(--color-white);
}

.btn--primary:hover {
  background-color: var(--color-deep-red-dark);
  border-color: var(--color-deep-red-dark);
  color: var(--color-white);
}

.btn--secondary {
  background-color: var(--color-golden-yellow);
  border-color: var(--color-golden-yellow);
  color: var(--color-white);
}

.btn--secondary:hover {
  background-color: var(--color-golden-yellow-dark);
  border-color: var(--color-golden-yellow-dark);
  color: var(--color-white);
}

.btn--outline {
  background-color: transparent;
  border-color: var(--color-deep-red);
  color: var(--color-deep-red);
}

.btn--outline:hover {
  background-color: var(--color-deep-red);
  color: var(--color-white);
}

.btn--ghost-light {
  background-color: transparent;
  border-color: var(--color-white);
  color: var(--color-white);
}

.btn--ghost-light:hover {
  background-color: var(--color-white);
  color: var(--color-deep-red);
}

.btn--block {
  width: 100%;
}

/* ==================================================
   TOP BAR (Shopee / Lazada — Competitor DO)
   ================================================== */
/* ปุ่มวงกลมอยู่ "บนสุด" แล้วแผงลิงก์เรียงลงมาใต้ปุ่ม — ทั้งชุดจัดกลางแนวตั้งของจอ
   ตอนหุบแผงยังกินที่ใน layout เท่าเดิม (แค่มองไม่เห็น) ความสูงของชุดจึงคงที่
   ปุ่มวงกลมเลยอยู่ตำแหน่งเดียวกันเป๊ะทั้งตอนกางและตอนหุบ ไม่กระโดดขึ้น-ลง */
.topbar {
  /* ไม่มีแผงพื้นหลังแล้ว ช่องไฟระหว่างไอคอนจึงไม่ต้องกว้างเท่าเดิม */
  --topbar-gap: var(--space-12);

  position: fixed;
  inset-inline-end: var(--space-16);
  /* เกาะมุมล่างขวาของจอจริง ๆ — เดิมยกขึ้นจากขอบล่างอีก 80px เพื่อเว้นที่ให้ปุ่มกาง/หุบ
     ตอนนี้ปุ่มนั้นถูกซ่อนแล้ว จึงลงมาชิดขอบล่างได้เต็มที่ */
  inset-block-start: auto;
  inset-block-end: var(--space-24);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  /* ตอนหุบ แผงลิงก์ยังจองที่ใน layout อยู่ กล่องของ .topbar จึงสูงเท่าตอนกาง
     ถ้าไม่ปิดการรับคลิกตรงนี้ พื้นที่ว่าง ๆ ริมขวาของจอจะกลายเป็นเขตตายที่กดอะไรข้างใต้ไม่ได้เลย
     ตัวปุ่มและแผงข้างในเปิดรับคลิกกลับเองด้านล่าง */
  pointer-events: none;
}

.topbar__toggle,
.topbar__inner {
  pointer-events: auto;
}

/* ซ่อนปุ่มกาง/หุบ — แถบนี้แสดงไอคอนร้านค้าค้างไว้ตลอด ไม่มีสถานะหุบอีกแล้ว
   display: none ทำให้พ้นลำดับการกด Tab ไปด้วย ไม่ใช่แค่มองไม่เห็น */
.topbar__toggle {
  display: none;
}

/* แผงลิงก์แสดงตลอด ไม่ผูกกับคลาส is-open อีกแล้ว
   ปุ่มกาง/หุบถูกซ่อนไปแล้ว ถ้ายังผูกอยู่ การกด Esc (ตัวจัดการใน navbar.js) จะหุบแผงทิ้ง
   แล้วไม่มีปุ่มไหนเปิดกลับได้เลย ไอคอนร้านค้าจะหายไปจนกว่าจะรีโหลดหน้า */
.topbar__inner {
  /* ขอบซ้าย-ขวา 4px + ไอคอนกว้าง 40px = แผงกว้าง 48px เท่าปุ่มวงกลมด้านบนพอดี
     (ทั้งไซต์เป็น box-sizing: border-box)

     ขอบบน-ล่างใช้ค่าเดียวกับช่องไฟระหว่างไอคอน (--topbar-gap) จังหวะในแผงจึงเท่ากันหมด
     ของเดิมขอบเป็น 16px แต่ช่องไฟระหว่างไอคอนเป็น 50px ไอคอนตัวบนสุดกับล่างสุด
     จึงชิดขอบแผงกว่าตัวอื่นอย่างเห็นได้ชัด
     ผูกกับตัวแปรตัวเดียวกัน พอจอเตี้ยแล้วช่องไฟหดเหลือ 16px ขอบก็หดตามเองด้วย */
  padding: 0;
  /* ถอดพื้นหลังแผงออก เหลือเฉพาะไอคอนลอยอยู่บนภาพ */
  background-color: transparent;
  transition: transform var(--transition-base), opacity var(--transition-base),
    visibility var(--transition-base);
}

/* เลื่อนถึงฟุตเตอร์ = เก็บแผงพ้นขอบขวา (คลาสถูกติด/ถอดโดย navbar.js ตามตำแหน่งของฟุตเตอร์)
   visibility: hidden ทำให้พ้นลำดับการกด Tab ไปด้วย ไม่ใช่แค่มองไม่เห็น */
.topbar.is-hidden .topbar__inner {
  visibility: hidden;
  opacity: 0;
  transform: translateX(120%);
}

.topbar__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--topbar-gap);
  /* สีเต็ม ไม่จางแล้ว — โลโก้แบรนด์ (LINE/Facebook) ต้องคมชัดอ่านออกง่าย */
  opacity: 1;
}

/* ปุ่มไอคอนล้วน — ชื่อลิงก์อยู่ใน aria-label/title ของแต่ละ <a> */
.topbar__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* ขนาดเท่าปุ่มกาง/หุบ (48px) ทั้งสามชิ้นในแถบจึงเป็นวงกลมขนาดเดียวกัน */
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  /* พื้นขาว เพราะไอคอนเป็นโลโก้จริงที่มีสีของแบรนด์อยู่ในตัว (ส้มของ Shopee / ไล่สีของ Lazada)
     ถ้าพื้นยังเป็นสีมะฮอกกานีทึบเหมือนเดิม สีแบรนด์จะจมหายไปกับพื้น
     เงาอ่อน ๆ ทำให้วงกลมสีขาวยังลอยออกจากพื้นหลังสีอ่อนได้ */
  background-color: var(--color-white);
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

/* วางโลโก้เป็นภาพพื้นหลังจริง ไม่ใช่หน้ากาก (mask) อีกแล้ว สีในไฟล์ SVG จึงแสดงผลตามจริง */
.topbar__link::before {
  content: '';
  /* ลายไอคอนโตตามวงกลม — สัดส่วนเดิมคือ 20/40 จึงเป็น 24/48 */
  width: 26px;
  height: 26px;
  background-image: var(--topbar-icon);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

/* โลโก้จริงของแต่ละร้าน อยู่ในชุดที่ส่งมาให้ที่ assets/images/icon_social/
   (ไม่ใช่ชุด assets/icons/ ซึ่งเป็นไอคอนโทนเดียวสำหรับใช้เป็นหน้ากาก) */
.topbar__link--line     { --topbar-icon: url('../images/icon_social/line.svg'); }
.topbar__link--facebook { --topbar-icon: url('../images/icon_social/fb.svg'); }
.topbar__link--youtube  { --topbar-icon: url('../images/icon_social/youtube.svg'); }
.topbar__link--shopee   { --topbar-icon: url('../images/icon_social/shopee.svg'); }
.topbar__link--lazada   { --topbar-icon: url('../images/icon_social/lazada1.svg'); }

/* ไม่เปลี่ยนสีพื้นตอนชี้แล้ว — โลโก้แบรนด์ต้องคงสีเดิมเสมอ ใช้การยกขึ้นและเงาบอกสถานะแทน */
.topbar__link:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .topbar__inner,
  .topbar__toggle svg {
    transition: none;
  }
}

/* ==================================================
   NAVBAR (Centralized Component)
   ================================================== */
/* ตัว header ทำหน้าที่แค่ยึดตำแหน่งกับเว้นระยะจากขอบบน 10px
   พื้นหลังกับเงาย้ายไปอยู่ที่ .navbar__inner แทน แถบเมนูจึงลอยเป็นแท่งเดี่ยว
   ไม่กินเต็มความกว้างจอ */
.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  /* ระยะจากขอบบนจอถึงแถบเมนู — ช่องว่างนี้เป็นของ header ไม่ใช่ padding ของ .navbar__inner เอง
     ถ้าไปใส่ padding-top ที่ .navbar__inner แทน โลโก้กับเมนูจะถูกดันลงไปอยู่ต่ำกว่ากึ่งกลางแถบ
     (แถบตั้ง align-items: center และ min-height แบบ border-box ไว้) */
  padding-block-start: 20px;
  background-color: transparent;
  /* พื้นที่โปร่งสองข้างแถบยังเป็นของ header อยู่ ถ้าไม่ปิดรับคลิกไว้
     มันจะบังเนื้อหาท่อนบนของหน้าโดยที่มองไม่เห็น — ลูกของมันเปิดรับคลิกตามเดิม */
  pointer-events: none;
}

.site-header > * {
  pointer-events: auto;
}

.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  /* ค่าคงที่ ไม่อิง --navbar-height — ตอนนี้ topbar ย้ายไปเป็นแผงลอยขอบขวาแล้ว
     ความสูง header จึงเท่ากับแถบนี้พอดี ถ้ายังคำนวณย้อนกลับจะกลายเป็นวงวน
     (navbar.js วัดความสูง header → เขียนลง --navbar-height → ย่อ min-height ลงอีก) */
  /* ย่อทั้งแถบลง 10% จากขนาดเดิม — สูง 56 -> 50.4 (จอใหญ่ 72 -> 64.8 ในกฎด้านล่าง)
     กว้าง 1300 -> 1170 และระยะขอบในย่อตามสัดส่วนเดียวกัน
     คูณจากค่าเดิมไว้ให้เห็นที่มา ไม่ใช่เขียนตัวเลขใหม่ทับไปเฉย ๆ */
  min-height: calc(56px * 0.9);
  /* กว้างเท่ากรอบเนื้อหาของหน้าพอดี — ขอบซ้าย-ขวาของแถบอยู่แนวเดียวกับข้อความในฮีโร่
     ตัว .container กินเต็มความกว้างพ่อแม่ (header เป็น inset-inline: 0) ถ้าไม่จำกัดไว้
     แถบจะยาวชนขอบจอ จึงหักระยะขอบกริดออกสองข้าง แล้วคุมเพดานที่ --container-max */
  max-width: min(var(--container-max), calc(100% - var(--grid-margin) * 2));
  /* ย่อที่ตัวแถบเอง ไม่ไปแก้ --grid-margin เพราะเป็นตัวแปรที่ทั้งไซต์ใช้ร่วมกัน
     ด้านหน้าเว้นมากกว่าด้านหลัง เพราะขอบซ้ายของแถบเป็นวงกลม (radius-pill)
     ส่วนโค้งกินพื้นที่ไปส่วนหนึ่ง ถ้าใช้ระยะเท่ากันสองข้าง โลโก้จะดูชิดขอบโค้งเกินไป */
  padding-inline: var(--space-32) calc(var(--grid-margin) * 0.9);
  /* ตอนอยู่บนสุดของหน้า แถบใสสนิท ไม่มีพื้นไม่มีเงา — เห็นภาพฮีโร่เต็ม ๆ
     พอเริ่มเลื่อน (navbar.js ติดคลาส is-scrolled ให้ header) จึงค่อยไล่เป็นพื้นขาวทึบ 85%
     ใส่ทรานซิชันไว้ทั้งพื้นและเงา การเปลี่ยนจึงนุ่ม ไม่ใช่กระพริบ */
  background-color: transparent;
  border-radius: var(--radius-pill);
  box-shadow: none;
  transition:
    background-color var(--transition-base),
    box-shadow var(--transition-base);
}

.site-header.is-scrolled .navbar__inner {
  background-color: color-mix(in srgb, var(--color-white) 85%, transparent);
  box-shadow: var(--shadow-sm);
}

@media (min-width: 1024px) {
  .navbar__inner {
    min-height: calc(72px * 0.9);
    /* แถบสูงขึ้น วงโค้งขอบซ้ายจึงใหญ่ตาม ระยะด้านหน้าเพิ่มตามสัดส่วน */
    padding-inline-start: var(--space-48);
  }
}

.navbar__brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

/* โลโก้ย่อ 10% ตามแถบ — ถ้าปล่อยขนาดเดิมไว้ พอแถบเตี้ยลงโลโก้จะเกือบเต็มความสูง
   เหลือช่องหายใจบน-ล่างแค่ไม่กี่พิกเซล และดูใหญ่ผิดสัดส่วนกับของอื่นในแถบ */
.navbar__logo {
  width: calc(154px * 0.9);
  height: calc(42px * 0.9);
}

@media (min-width: 1024px) {
  .navbar__logo {
    width: calc(184px * 0.9);
    height: calc(50px * 0.9);
  }
}

.navbar__menu {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.navbar__link {
  display: inline-block;
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  /* 16px บนจอที่แถบเมนูแสดงอยู่ (--fs-body ของเบรกพอยต์ 1024 ขึ้นไป)
     ใช้โทเคนแทนการเขียน 16px ตรง ๆ ตามกติกาของ variables.css */
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
}

.navbar__link:hover {
  background-color: var(--color-surface);
  color: var(--color-deep-red);
  text-decoration: none;
}

.navbar__link.is-active {
  color: var(--color-deep-red);
  background-color: rgba(255, 182, 83, 0.24);
}

/* ระยะห่างระหว่างปุ่มติดต่อเรากับตัวสลับภาษา — เว้นกว้างขึ้นจาก 12px เป็น 32px
   สองอย่างนี้คนละหน้าที่กัน (ปุ่มชวนติดต่อ กับตัวตั้งค่าภาษา) ถ้าชิดกันจะดูเป็นชุดเดียวกัน */
.navbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-32);
}

/* ปุ่ม CTA บนแถบเมนูย่อกรอบลงราว 15% จากปุ่มมาตรฐาน แต่ตัวอักษรยังเป็น 16px เท่าปุ่มอื่นทั้งไซต์
   (ลดขนาดจริง ไม่ใช้ transform: scale เพราะจะทิ้งช่องว่างของกล่องเดิมไว้และทำให้ตัวอักษรเบลอ) */
.navbar__actions .btn {
  min-height: 42px;
  padding: var(--space-8) var(--space-16);
}

/* ---------- ตัวสลับภาษา ---------- */
/* สองปุ่มในรางเดียว ปุ่มที่ใช้อยู่เป็นพื้นแดงตัวหนังสือขาว
   สถานะจริงบอกด้วย aria-pressed ไม่ใช่คลาส CSS จะได้ไม่ต้องเก็บสถานะไว้สองที่ */
.navbar__lang {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-pill);
  background-color: rgba(0, 0, 0, 0.06);
}

.navbar__lang-btn {
  padding: var(--space-4) var(--space-12);
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--color-text-muted);
  font-family: inherit;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  line-height: 1.6;
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base);
}

.navbar__lang-btn[aria-pressed='true'] {
  background-color: var(--color-deep-red);
  color: var(--color-white);
}

.navbar__lang-btn:hover:not([aria-pressed='true']) {
  color: var(--color-deep-red);
}

/* ภาษาไทยยังไม่เปิดใช้งาน — ปุ่ม TH กดได้แต่ไม่พาไปไหน (ดู lang-switch.js)
   จางกว่าปุ่มปกติ (--color-text-muted) แต่ยังอ่านตัวอักษร "TH" ออกชัดอยู่ ไม่ใช้ opacity
   ตรง ๆ เพราะจะกระทบพื้นหลัง/เงาของปุ่มไปด้วย ใช้ color-mix จางเฉพาะสีตัวอักษรแทน
   title="..." บนปุ่มเป็นตัวบอกเหตุผลตอนชี้เมาส์ค้าง (ดูมาร์กอัปในคอมโพเนนต์ navbar) */
.navbar__lang-btn[aria-disabled='true'] {
  color: color-mix(in srgb, var(--color-text-muted) 45%, transparent);
  cursor: not-allowed;
}

.navbar__lang-btn[aria-disabled='true']:hover {
  color: color-mix(in srgb, var(--color-text-muted) 45%, transparent);
}

.navbar__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background-color: transparent;
  /* ไม่มีกรอบสี่เหลี่ยมรอบปุ่มแล้ว เหลือเฉพาะขีดสามเส้น
     พื้นที่กด 48x48 ยังเท่าเดิม แค่มองไม่เห็นกรอบ */
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.navbar__toggle-bar,
.navbar__toggle-bar::before,
.navbar__toggle-bar::after {
  display: block;
  width: 20px;
  height: 2px;
  background-color: var(--color-deep-red);
  transition: transform var(--transition-base), opacity var(--transition-base);
}

.navbar__toggle-bar::before,
.navbar__toggle-bar::after {
  content: '';
  position: absolute;
}

.navbar__toggle-bar::before { transform: translateY(-6px); }
.navbar__toggle-bar::after  { transform: translateY(6px); }

.navbar__toggle[aria-expanded='true'] .navbar__toggle-bar {
  background-color: transparent;
}

.navbar__toggle[aria-expanded='true'] .navbar__toggle-bar::before {
  transform: rotate(45deg);
}

.navbar__toggle[aria-expanded='true'] .navbar__toggle-bar::after {
  transform: rotate(-45deg);
}

/* Mobile & Tablet navigation */
@media (max-width: 1023px) {
  .navbar__toggle { display: inline-flex; }

  .navbar__nav {
    position: fixed;
    /* เว้นจากแถบด้านบนเล็กน้อย ให้เห็นเป็นแผงลอยคนละชิ้นกับแถบ ไม่ใช่กล่องเดียวที่ยืดลงมา */
    inset-block-start: calc(var(--navbar-height) + var(--space-8));
    inset-inline: 0;
    /* กว้างเท่าแถบเมนูด้านบนเป๊ะ — สูตรเดียวกับ .navbar__inner (แก้ที่เดียวต้องแก้ให้ตรงกันทั้งคู่)
       ขอบซ้าย-ขวาของแผงจึงอยู่แนวเดียวกับขอบแถบ ไม่ยาวชนขอบจอเหมือนเดิม
       margin-inline: auto จัดให้อยู่กึ่งกลางเหมือนแถบ เพราะกำหนดความกว้างคู่กับ inset-inline: 0 */
    width: min(var(--container-max), calc(100% - var(--grid-margin) * 2));
    margin-inline: auto;
    max-height: 0;
    overflow: hidden;
    background-color: var(--color-white);
    /* ไม่มีเส้นคาดใต้แถบเมนูแล้ว — เส้นนี้เคยมีไว้ตอนแผงยังต่อกับแถบเป็นชิ้นเดียว
       ตอนนี้แผงแยกเป็นการ์ดลอยคนละใบ (เว้น 8px + มุมมน 30px) เส้นตรงพาดขวางจึงเหลือเป็นเส้นแปลกปลอม */
    border-top: 0;
    /* มุมมน 30px ทั้งสี่มุม — เขียนไว้ที่กฎหลักไม่ใช่เฉพาะตอน .is-open
       เพื่อให้ตอนหุบกลับ (max-height วิ่งกลับเป็น 0) มุมยังมนอยู่ ไม่กระตุกเป็นมุมฉากกลางทาง
       overflow: hidden ด้านบนเป็นตัวตัดเนื้อหาข้างในให้โค้งตามมุมนี้ */
    border-radius: 30px;
    transition: max-height var(--transition-base);
  }

  .navbar__nav.is-open {
    max-height: calc(100vh - var(--navbar-height));
    overflow-y: auto;
    box-shadow: var(--shadow-md);
  }

  .navbar__menu {
    flex-direction: column;
    align-items: stretch;
    /* เว้นระหว่างรายการแทนเส้นคั่นที่ถอดออกไป (ดู .navbar__link ด้านล่าง) */
    gap: var(--space-4);
    padding: var(--space-12) var(--space-12) var(--space-16);
  }

  /* ทุกเมนูเป็นแถบมนของตัวเอง — พื้นตอนชี้/ตอนเป็นหน้าปัจจุบันจึงมนตามไปด้วย
     ถอดเส้นคั่นใต้แต่ละรายการออก เพราะเส้นตรงเต็มความกว้างจะโค้งตามมุมมนจนดูขัดกัน
     ใช้ระยะห่างระหว่างรายการ (gap ที่ .navbar__menu) เป็นตัวแบ่งแทน */
  .navbar__link {
    display: block;
    padding: var(--space-16) var(--space-16);
    border-radius: var(--radius-md);
    border-bottom: 0;
  }

  /* ระยะขอบในของแผงเปลี่ยนจาก --grid-margin มาเป็น --space-12 ให้ตรงกับ padding ของรายการเมนู
     แผงแคบลงเท่าแถบด้านบนแล้ว ถ้ายังใช้ระยะขอบของกริดทั้งหน้า ปุ่มกับเมนูจะไม่ตรงแนวกัน */
  .navbar__nav .btn {
    margin-block: var(--space-16) var(--space-16);
    margin-inline: var(--space-12);
    width: calc(100% - (var(--space-12) * 2));
  }

  /* ซ่อนทั้งกล่อง ไม่ใช่แค่ปุ่มข้างใน — ถ้าเหลือกล่องเปล่าไว้
     space-between จะดันกล่องนั้นไปชิดขวาแทนปุ่ม toggle */
  .navbar__actions { display: none; }

  /* ในแผงเมนูที่กางลงมา วางตัวสลับภาษาให้ตรงแนวเดียวกับรายการเมนูด้านบน */
  .navbar__nav .navbar__lang {
    margin-block-start: var(--space-8);
    margin-inline: var(--space-12);
  }
}

@media (min-width: 1024px) {
  .navbar__nav {
    display: flex;
    align-items: center;
  }

  /* ปุ่ม CTA กับตัวสลับภาษาในแผงเมนูใช้เฉพาะจอเล็ก — เดสก์ท็อปใช้ชุดใน .navbar__actions */
  .navbar__nav .btn,
  .navbar__nav .navbar__lang { display: none; }
}

/* ==================================================
   CARDS
   ================================================== */
.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-24);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

/* มุมโค้งของการ์ดสินค้าและการ์ดสูตรอาหาร — เล็กลง 15% จาก --radius-lg (24px → 20.4px)
   ประกาศเป็นตัวแปรเพื่อให้กรอบภาพด้านในโค้งตามการ์ดโดยไม่ต้องแก้หลายที่ */
.product-card,
.recipe-card {
  --card-radius: calc(var(--radius-lg) * 0.85);

  border-radius: var(--card-radius);
}

.card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-16);
}

/* Di-cut product image — ห้ามใส่กรอบสี่เหลี่ยมทึบ */
.card__media img {
  width: auto;
  max-height: 200px;
  filter: drop-shadow(0 12px 20px rgba(79, 45, 29, 0.18));
}

.card__title {
  margin-bottom: var(--space-8);
}

.card__text {
  color: var(--color-text-muted);
  margin-bottom: var(--space-16);
}

.card__footer {
  margin-top: auto;
}

/* ==================================================
   BADGES
   ================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-12);
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  line-height: 1.6;
}

.badge--green {
  background-color: var(--color-leaf-green);
  color: var(--color-mahogany);
}

.badge--blue {
  background-color: var(--color-soft-blue);
  color: var(--color-mahogany);
}

.badge--gold {
  background-color: var(--color-golden-yellow);
  color: var(--color-mahogany);
}

.badge--red {
  background-color: var(--color-deep-red);
  color: var(--color-white);
}

/* ==================================================
   FOOTER (Centralized Component)
   ================================================== */
.site-footer {
  /* พื้นแดงตามคอมเม้นรีวิว 20/08/26 (Footer: Red) — เดิมเป็นสีน้ำตาล Mahogany */
  background-color: var(--color-deep-red);
  color: var(--color-white);
  padding-block: var(--space-48) var(--space-24);
}

.site-footer a {
  color: var(--color-white);
}

.site-footer a:hover {
  color: var(--color-golden-yellow);
  text-decoration: none;
}

.footer__grid {
  display: grid;
  gap: var(--space-32);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .footer__grid { grid-template-columns: 2fr 1fr 1fr 1.5fr; }
}

.footer__logo {
  width: 184px;
  height: 50px;
  /* เว้นจากหัวข้อ HEAD OFFICE ให้มากขึ้น (คอมเมนต์ลูกค้า 06/10/26) — เดิม 16px โลโก้กับหัวข้อชิดกันเกินไป */
  margin-bottom: var(--space-32);
}

.footer__heading {
  margin-bottom: var(--space-16);
  color: var(--color-golden-yellow);
  font-size: var(--fs-h6);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer__list li + li {
  margin-top: var(--space-8);
}

.footer__list a,
.footer__contact {
  font-size: var(--fs-body);
  color: rgba(255, 255, 255, 0.88);
}

/* เมนูและช่องทางติดต่อในฟุตเตอร์หนากว่าเนื้อความรอบ ๆ หนึ่งระดับ
   เฉพาะตัวที่กดได้ — ที่อยู่ซึ่งเป็นข้อความเฉย ๆ ยังเป็นน้ำหนักปกติ */
.footer__list a,
.footer__contact a {
  font-weight: var(--fw-medium);
}

.footer__contact li + li {
  margin-top: var(--space-12);
}

/* ชุดที่อยู่/เวลาทำการใต้โลโก้ — เว้นระยะจากโลโก้ให้อ่านเป็นก้อนเดียวกับแบรนด์ */
.footer__contact--brand {
  margin-block-start: var(--space-24);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  margin-top: var(--space-40);
  padding-top: var(--space-24);
  border-top: 1px solid rgba(255, 255, 255, 0.24);
}

.footer__copy {
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.72);
}

/* เครดิตผู้ออกแบบ — ไปอยู่ปลายอีกฝั่งของแถวเอง เพราะ .footer__bottom ใช้ space-between อยู่แล้ว
   จางกว่าบรรทัดลิขสิทธิ์หนึ่งระดับ เป็นข้อมูลประกอบ ไม่ใช่ข้อความหลักของฟุตเตอร์ */
.footer__credit {
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.56);
}

/* ชื่อสตูดิโอกดได้ — สีเดียวกับข้อความรอบข้าง ชี้เมาส์แล้วขาวขึ้นพร้อมขีดเส้นใต้ */
.footer__credit-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.32);
  text-underline-offset: 3px;
  transition: color var(--transition-base), text-decoration-color var(--transition-base);
}

.footer__credit-link:hover,
.footer__credit-link:focus-visible {
  color: var(--color-white);
  text-decoration-color: currentColor;
}

/* อยู่ใต้รายการช่องทางติดต่อในคอลัมน์เดียวกัน — ตัดบรรทัดเองเมื่อคอลัมน์แคบ
   ไอคอนเจ็ดตัวเรียงแถวเดียวกว้างเกินคอลัมน์ฟุตเตอร์บนจอกลาง ถ้าไม่ให้ตัดบรรทัดจะดันคอลัมน์อื่นเบียดกัน */
.footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  /* กรอบกด 40px แต่ตัวไอคอน 24px อยู่กลาง — ขยับเข้าซ้าย 8px ให้ไอคอนตัวแรก (Facebook) ชิดซ้ายแนวเดียวกับตัวอักษรด้านบน
     (คอมเมนต์ลูกค้า 06/10/26) */
  margin: var(--space-16) 0 0 -8px;
}

.footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  /* ไอคอนเป็นโทนสีเดียวแล้ว ไม่ต้องมีพื้นขาวรองอีก — วางบนพื้นฟุตเตอร์ได้ตรง ๆ
     กรอบวงกลมยังอยู่เพื่อคงขนาดพื้นที่กดและจังหวะเว้นระยะเท่าเดิม */
  background-color: transparent;
  transition: transform var(--transition-base), opacity var(--transition-base);
}

/* ใช้ไฟล์ SVG เป็นหน้ากาก (mask) ไม่ใช่ภาพพื้นหลัง — mask สนใจแค่ความทึบ ไม่สนใจสีในไฟล์
   สีที่เห็นจริงจึงมาจาก background-color ตรงนี้ค่าเดียว = ไอคอนทุกตัวเป็นโทนสีเดียวกันหมด
   ชุดที่ใช้คือ assets/icons/ ซึ่งเจาะไส้ในของโลโก้เป็นรูโปร่งไว้ด้วย fill-rule="evenodd"
   (ชุด assets/images/icon_social/ ใช้เป็นหน้ากากไม่ได้ เพราะเป็นวงกลมทึบเต็มใบ พอทำเป็น mask
   ตัวสัญลักษณ์ข้างในจะหายไปกับพื้นทั้งดวง) */
.footer__social-link::before {
  content: '';
  width: 24px;
  height: 24px;
  background-color: var(--color-white);
  -webkit-mask: var(--social-icon) center / contain no-repeat;
  mask: var(--social-icon) center / contain no-repeat;
}

/* ชุด assets/icons/ — โลโก้เส้นเดียวที่ออกแบบมาให้ใช้เป็นหน้ากากโดยเฉพาะ */
.footer__social-link--facebook {
  --social-icon: url('../icons/facebook.svg');
}

.footer__social-link--instagram {
  --social-icon: url('../icons/instagram.svg');
}

.footer__social-link--tiktok {
  --social-icon: url('../icons/tiktok.svg');
}

.footer__social-link--youtube {
  --social-icon: url('../icons/youtube.svg');
}

.footer__social-link--line {
  --social-icon: url('../icons/line.svg');
}

/* พื้นโปร่งแล้ว เงาจึงไม่มีอะไรให้เกาะ — ใช้การยกขึ้นคู่กับหรี่ความทึบบอกสถานะแทน */
.footer__social a:hover {
  transform: translateY(-2px);
  opacity: 0.7;
}

/* ==================================================
   MASTHEAD (แบนเนอร์หัวหน้ารอง)
   ==================================================
   แบนเนอร์มาตรฐาน ใช้โครงเดียวกับหน้าในของเว็บไซต์บริษัท (thaiflour.co.th):
   ภาพเต็มความกว้าง สัดส่วนกว้างประมาณ 3.6:1 มีฝ้าเข้มทับเพื่อให้ตัวอักษรอ่านออก
   แล้ววางข้อความชิดซ้ายกึ่งกลางแนวตั้ง

   แถวข้อมูลตัวเลขของหน้าย้ายลงมาอยู่ใต้แบนเนอร์บนพื้นขาว (.masthead-facts)
   แบนเนอร์จึงเหลือแค่ชื่อหน้ากับคำโปรยสั้น ๆ ไม่แน่นเกินไป
   ================================================== */
.masthead {
  position: relative;
  /* isolation กันไม่ให้เลเยอร์ z-index ติดลบทะลุไปอยู่หลังพื้นของ section อื่น */
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 260px;
  padding-block: var(--space-40);
  /* สีสำรองระหว่างรอภาพโหลด — ตัวอักษรขาวจึงอ่านออกตั้งแต่เฟรมแรก */
  background-color: var(--color-mahogany);
  color: var(--color-white);
}

@media (min-width: 768px) {
  .masthead { min-height: clamp(300px, 30vw, 440px); }
}

.masthead__bg {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--banner-focus, center center);
}

/* ฝ้าเข้มทับภาพ — ไล่จากเข้มทางซ้ายที่วางข้อความ ไปจางทางขวาที่ปล่อยให้เห็นภาพ
   ค่านี้ทำให้ตัวอักษรขาวผ่านเกณฑ์คอนทราสต์บนภาพทุกใบที่ใช้อยู่ */
.masthead__overlay {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(
    to right,
    rgba(58, 33, 20, 0.78) 0%,
    rgba(58, 33, 20, 0.62) 38%,
    rgba(58, 33, 20, 0.34) 70%,
    rgba(58, 33, 20, 0.26) 100%
  );
}

@media (max-width: 767px) {
  /* จอแคบข้อความกินเกือบเต็มความกว้าง จึงต้องเข้มสม่ำเสมอทั้งผืน */
  .masthead__overlay {
    background-image: linear-gradient(
      to bottom,
      rgba(58, 33, 20, 0.62) 0%,
      rgba(58, 33, 20, 0.74) 100%
    );
  }
}

.masthead__inner {
  position: relative;
  width: 100%;
}

.masthead__kicker {
  margin-bottom: var(--space-8);
  color: var(--color-golden-yellow);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.masthead__title {
  max-width: 20ch;
  font-size: clamp(var(--fs-h2), 3.8vw, calc(var(--fs-h1) * 1.05));
  font-weight: var(--fw-semibold);
  line-height: 1.18;
  color: var(--color-white);
}

.masthead__lead {
  max-width: 46ch;
  margin-top: var(--space-16);
  color: color-mix(in srgb, var(--color-white) 84%, transparent);
}

/* ---------- แถบข้อมูลตัวเลขใต้แบนเนอร์ ---------- */
.masthead-facts {
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-white);
}

.masthead__meta {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: var(--space-16) var(--space-40);
  padding-block: var(--space-24);
}

/* มือถือ: ตัวเลขสองช่องอยู่แถวบน ข้อความมาตรฐาน (ยาวกว่า) ลงไปเต็มแถวล่าง */
.masthead__meta > div:last-child {
  grid-column: 1 / -1;
}

/* มาร์กอัปวาง <dd> ก่อน <dt> — ใช้แถวของกริดสลับให้ป้ายอยู่บน ค่าอยู่ล่าง
   ป้ายทุกช่องชิดบนแนวเดียวกัน ค่าทุกช่องชิดล่างแนวเดียวกัน
   (เดิมใช้ column-reverse ช่องที่ค่าตัวเล็กกว่าจึงเตี้ยกว่า ป้าย "Certified to" ตกลงไปไม่ตรงแนว) */
.masthead__meta > div {
  display: grid;
  grid-template-rows: auto 1fr;
  row-gap: var(--space-4);
}

.masthead__meta dt {
  grid-row: 1;
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}

.masthead__meta dd {
  grid-row: 2;
  align-self: end;
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--color-mahogany);
  line-height: 1.1;
}

.masthead__meta dd.is-text {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
}

/* จอกว้าง: สามช่องเรียงแถวเดียว คั่นด้วยเส้นตั้งบาง ๆ */
@media (min-width: 640px) {
  .masthead__meta {
    grid-template-columns: repeat(3, max-content);
    column-gap: 0;
  }

  .masthead__meta > div:last-child {
    grid-column: auto;
  }

  .masthead__meta > div + div {
    margin-inline-start: var(--space-40);
    padding-inline-start: var(--space-40);
    border-inline-start: 1px solid var(--color-border);
  }
}

/* ==================================================
   SECTION MARK (ตราสัญลักษณ์จาง ๆ เป็นลายน้ำพื้นหลัง)
   ================================================== */
/* เครื่องหมายเหรียญทองคู่ของแบรนด์ วางจาง ๆ มุมขวาบนของ section
   ทำหน้าที่เหมือนลายน้ำพื้นผิวของหน้าแรก — เติมความเป็นแบรนด์โดยไม่แย่งสายตาจากเนื้อหา */
.section-mark {
  position: absolute;
  z-index: -1;
  inset-block-start: -6%;
  inset-inline-end: -8%;
  width: min(46vw, 420px);
  aspect-ratio: 1;
  background-image: url('../element/Element.svg');
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.07;
  pointer-events: none;
}

@media (max-width: 767px) {
  .section-mark { width: 60vw; opacity: 0.05; }
}

/* ==================================================
   CAROUSEL CONTROLS (ปุ่มลูกศรเลื่อนรายการ — ใช้ได้ทุกหน้า)
   ================================================== */
.carousel-btn {
  /* 44px = ขนาดขั้นต่ำของพื้นที่กดบนมือถือ */
  --carousel-btn-size: 44px;
  /* ระยะห่างระหว่างปุ่มกับขอบแถวการ์ด
     ช่วง 640-1023px พื้นที่ข้างแถวแคบ ใส่ได้สูงสุดราว 30px (32px จะเริ่มล้นขอบจอ) */
  --carousel-btn-gap: 30px;

  position: absolute;
  inset-block-start: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--carousel-btn-size);
  height: var(--carousel-btn-size);
  transform: translateY(-50%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-white);
  color: var(--color-deep-red);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition:
    background-color var(--transition-base),
    color var(--transition-base),
    opacity var(--transition-base);
}

.carousel-btn:hover:not(:disabled) {
  background-color: var(--color-deep-red);
  color: var(--color-white);
}

.carousel-btn:disabled {
  opacity: 0.32;
  cursor: default;
}

.carousel-btn svg {
  width: 20px;
  height: 20px;
}

/* ดันปุ่มออกไปนอกแถวการ์ดเต็มตัว — ไปอยู่ในพื้นที่ว่างข้างแถวที่เว้นไว้ด้วย --row-inset
   จึงไม่ทับการ์ดไม่ว่าจอกว้างเท่าไร */
.carousel-btn--prev {
  inset-inline-start: calc((var(--carousel-btn-size) + var(--carousel-btn-gap)) * -1);
}

.carousel-btn--next {
  inset-inline-end: calc((var(--carousel-btn-size) + var(--carousel-btn-gap)) * -1);
}

/* จอเดสก์ท็อปมีพื้นที่ข้างแถวมากพอ ถอยปุ่มออกห่างการ์ดได้เต็มที่ */
@media (min-width: 1024px) {
  .carousel-btn {
    --carousel-btn-gap: var(--space-40);
  }
}

/* จอแคบมีพื้นที่ข้างแถวไม่พอวางปุ่มโดยไม่ทับการ์ด — ใช้ปัดนิ้วกับจุดบอกตำแหน่งแทน */
@media (max-width: 639px) {
  .carousel-btn {
    display: none;
  }
}

/* จุดบอกตำแหน่งการเลื่อน — กดเลื่อนได้ ไม่ใช่แค่ตัวชี้สถานะ */
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-top: var(--space-40);
}

.carousel-dots[hidden] {
  display: none;
}

.carousel-dot {
  /* กล่องปุ่มกว้าง 28 สูง 44 = พื้นที่กดตามเกณฑ์มือถือ ส่วนจุดที่มองเห็นวาดด้วย ::before */
  position: relative;
  width: 28px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.carousel-dot::before {
  content: '';
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%);
  border-radius: var(--radius-pill);
  background-color: var(--color-border);
  transition:
    width var(--transition-base),
    background-color var(--transition-base);
}

.carousel-dot:hover::before {
  background-color: var(--color-text-muted);
}

/* จุดที่ใช้งานอยู่ยืดเป็นแคปซูล — แยกด้วยรูปทรงไม่ใช่สีอย่างเดียว */
.carousel-dot[aria-current='true']::before {
  width: 28px;
  background-color: var(--color-deep-red);
}

@media (prefers-reduced-motion: reduce) {
  .carousel-dot::before {
    transition: none;
  }
}

/* ปุ่มและแถบแสดงตลอดทุกขนาดจอ — ถ้าไม่มีอะไรให้เลื่อน ปุ่มจะอยู่ในสถานะ disabled */

/* ==================================================
   PARTNERSHIP CALLOUT (Family-Style — ใช้ได้ทุกหน้า)
   ================================================== */
.partnership {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* เอาโทนแดงออกตามคอมเม้นรีวิวรอบสอง — พื้นสำรองเป็นน้ำตาลเข้มโทนเดียวกับผ้าคลุมภาพ */
  background-color: var(--color-mahogany-dark);
  color: var(--color-white);
  padding-block: var(--space-48);
}

/* ภาพพื้นหลังแยกเป็นเลเยอร์ของตัวเอง อยู่นิ่งกับที่ ไม่มีพารัลแลกซ์แล้ว
   ยังสูงเกินกรอบไว้ 116% เหมือนเดิม เพื่อให้ครอบคลุมเต็มพื้นที่แน่นอนโดยไม่เผยขอบว่าง
   ภาพถูกไล่โทนแดงมาให้แล้ว จึงวางทับได้เลยโดยไม่ต้องมีฝ้าคลุมเพิ่ม */
.partnership::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-start: -8%;
  z-index: -1;
  height: 116%;
  /* ภาพสีธรรมชาติ + ผ้าคลุมเข้มให้ตัวอักษรขาวอ่านชัด — แทนภาพย้อมแดงเดิม
     (BG_Partner_Contact.png ถูกย้อมแดงมาในไฟล์ จึงเปลี่ยนภาพแทนการแก้สี) */
  background-image:
    linear-gradient(rgba(24, 14, 9, 0.55), rgba(24, 14, 9, 0.55)),
    url('../images/pexels-pavel-danilyuk-6340698.jpg');
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat;
}

@media (min-width: 1024px) {
  .partnership { padding-block: var(--space-64); }
}

.partnership__inner {
  display: grid;
  gap: var(--space-32);
  align-items: center;
}

/* ---- ตอนเลื่อนมาถึง: เนื้อหาจางเข้าพร้อมเลื่อนขึ้น แล้วลอยตามการเลื่อนหน้าต่อ ----
   กล่องนอกรับ parallax ด้วยคุณสมบัติ translate ส่วนลูกข้างในรับการเลื่อนขึ้นด้วย transform
   คนละคุณสมบัติกันจึงทำงานพร้อมกันได้ ไม่มีอันไหนเขียนทับอีกอัน
   ค่า --parallax-shift ของกล่องนี้เป็นของตัวเอง (data-parallax ที่ HTML) แยกจากของ section
   ที่ภาพพื้นหลังใช้เลื่อนแนวนอนอยู่ */
.has-scroll-motion .partnership__inner {
  translate: 0 var(--parallax-shift, 0px);
}

.has-scroll-motion .partnership__inner > * {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  transition:
    opacity 0.7s var(--ease-reveal),
    transform 0.7s var(--ease-reveal);
  will-change: opacity, transform;
}

/* ปุ่มตามหลังข้อความเล็กน้อย ให้เห็นเป็นจังหวะสองสเต็ป ไม่ใช่ทั้งแถวมาพร้อมกัน */
.has-scroll-motion .partnership__inner > * + * {
  transition-delay: 0.14s;
}

.has-scroll-motion .partnership.is-revealed .partnership__inner > * {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* ปิดแอนิเมชันไว้ = เนื้อหาอยู่ตำแหน่งจริงและทึบเต็มที่ตั้งแต่แรก */
@media (prefers-reduced-motion: reduce) {
  .has-scroll-motion .partnership__inner {
    translate: none;
  }

  .has-scroll-motion .partnership__inner > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (min-width: 640px) {
  .partnership__inner {
    grid-template-columns: 1fr auto;
  }
}

.partnership__eyebrow {
  display: inline-block;
  margin-bottom: var(--space-8);
  color: var(--color-golden-yellow);
  /* 18px บนจอ 1024 ขึ้นไป (--fs-h6) — ขนาดเดียวกับ eyebrow ของส่วนอื่นในหน้าแรก */
  font-size: var(--fs-h6);
  font-weight: var(--fw-semibold);
  /* ข้อความไทยไม่ต้องขยายช่องไฟตัวอักษรหรือแปลงเป็นตัวพิมพ์ใหญ่ */
  letter-spacing: normal;
}

/* ภาษาอังกฤษเป็นตัวพิมพ์ใหญ่ช่องไฟห่าง ขนาดเล็ก ให้เข้าชุดกับป้ายหัวส่วนอื่นของไซต์ (.section-head .eyebrow / .about-label) */
:lang(en) .partnership__eyebrow {
  font-size: var(--fs-small);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.partnership__title {
  color: var(--color-white);
}

.partnership__text {
  /* ไม่ต้องเว้นล่างแล้ว เพราะปุ่มย้ายออกไปอยู่คอลัมน์ขวา */
  margin-block: var(--space-16) 0;
  max-width: 640px;
  color: rgba(255, 255, 255, 0.92);
}

/* ปุ่มอยู่คอลัมน์ที่สองของกริด — จอเล็กวางชิดซ้ายใต้ข้อความ จอกว้างดันไปชิดขวา */
.partnership__cta {
  justify-self: start;
}

@media (min-width: 640px) {
  .partnership__cta {
    justify-self: end;
  }
}

/* ==================================================
   RECIPE CARD (Ready-to-Print Infographic)
   ================================================== */
.recipe-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-sm);
}

/* ภาพหัวการ์ด — .recipe-card มี overflow: hidden อยู่แล้ว มุมบนจึงโค้งตามการ์ด
   ล็อกความสูงไว้ 180px แทนการผูกกับอัตราส่วน ทุกใบจึงสูงเท่ากันทุกความกว้างจอ */
.recipe-card__media {
  height: 180px;
  overflow: hidden;
  background-color: var(--color-surface);
}

.recipe-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- หัวการ์ดวางทับบนภาพ (เฉพาะการ์ดแบบย่อที่มีภาพ) ---------- */
.recipe-card__media--overlay {
  position: relative;
  isolation: isolate;
}

/* ฝ้าไล่สีขาวจากด้านล่าง ทึบ 95% ไล่ขึ้นไปจนโปร่งใส 0% — รองตัวหนังสือสีดำให้อ่านออก */
.recipe-card__media--overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0) 100%
  );
}

.recipe-card__media--overlay .recipe-card__head {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 2;
  /* ล้างพื้นไล่สีของหัวการ์ดแบบเดิมทิ้ง เพราะตอนนี้พื้นหลังคือภาพ */
  padding: var(--space-16) var(--space-24);
  background: none;
}

.recipe-card__media--overlay .recipe-card__title {
  color: var(--color-text);
}

/* ---------- การ์ดแบบย่อ: มุมโค้ง 15px ทั้งสี่มุม + เส้นขอบไล่สี ----------
   .recipe-card มี overflow: hidden อยู่แล้ว ภาพหัวการ์ดจึงถูกตัดโค้งตามมุมบนไปด้วย */
.recipe-card--compact {
  position: relative;
  /* ล้างเส้นขอบทึบของ .recipe-card ทิ้ง — เส้นจริงย้ายไปวาดที่ ::before แทน */
  border: 0;
  border-radius: 15px;
}

/* เส้นขอบไล่สี: เข้มเต็ม 100% ที่ขอบล่าง จางหายเป็น 0% ที่ขอบบน
   เส้นจึงเน้นมุมโค้ง 15px ด้านล่าง แล้วค่อย ๆ หายไปตรงที่ภาพชนขอบบน
   border-image ใช้ไม่ได้เพราะไม่เคารพ border-radius จึงวาดพื้นไล่สีเต็มใบ
   แล้วใช้ mask เจาะไส้ในออก เหลือไว้แค่กรอบหนา 1px ที่โค้งตามการ์ด */
.recipe-card--compact::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border: 1px solid transparent;
  border-radius: inherit;
  background-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.12) 0%,
    rgba(0, 0, 0, 0) 100%
  );
  background-origin: border-box;
  -webkit-mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* ---- Hover บนการ์ดแบบย่อ: ซูมภาพเล็กน้อย + ขยับตามเมาส์ ----
   ซูมน้อยกว่าการ์ดผลิตภัณฑ์ เพราะภาพสูงกว่าครึ่งการ์ดพอดี ขยับแรงจะดูวูบวาบ
   --tilt-x / --tilt-y ตั้งค่าโดย home.js */
@media (hover: hover) and (pointer: fine) {
  .recipe-card--compact .recipe-card__media img {
    transform: translate3d(
        calc(var(--tilt-x, 0) * 10px),
        calc(var(--tilt-y, 0) * 10px),
        0
      )
      scale(var(--card-zoom, 1));
    transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .recipe-card--compact:hover .recipe-card__media img {
    --card-zoom: 1.08;
  }

  /* ระหว่างขยับเมาส์ให้ตามนิ่มแต่ไว ไม่หน่วงเหมือนตอนเข้า/ออก */
  .recipe-card--compact.is-pointing .recipe-card__media img {
    transition: transform 0.12s linear;
  }
}

@media (prefers-reduced-motion: reduce) {
  .recipe-card--compact .recipe-card__media img {
    transform: none;
    transition: none;
  }
}

.recipe-card__head {
  padding: var(--space-24) var(--space-24) var(--space-16);
  background: linear-gradient(180deg, rgba(255, 182, 83, 0.18) 0%, rgba(255, 255, 255, 0) 100%);
}

.recipe-card__title {
  margin-top: var(--space-8);
}

.recipe-card__meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  margin: 0;
  padding: var(--space-12) var(--space-24);
  /* น้ำตาลเข้มของแบรนด์ (Pantone 4825 C) — ตัวหนังสือกลับเป็นสีขาวทั้งแถบ */
  background-color: var(--color-mahogany);
  border-block: 1px solid var(--color-border);
  color: var(--color-white);
  text-align: center;
}

.recipe-card__meta dt {
  color: var(--color-white);
  text-transform: uppercase;
}

.recipe-card__meta dd {
  margin: 0;
  font-size: var(--fs-h6);
  font-weight: var(--fw-semibold);
  color: var(--color-white);
}

.recipe-card__body {
  display: grid;
  gap: var(--space-24);
  padding: var(--space-24);
  flex: 1;
  /* การ์ดในแถวถูกยืดให้สูงเท่ากัน ถ้าปล่อยค่าเริ่มต้น (stretch)
     ที่ว่างส่วนเกินจะถูกแบ่งลงไปในทุกแถวของ grid ทำให้ปุ่ม "ดูวิธีทำ"
     และหัวข้อ "วิธีทำ" ของแต่ละใบอยู่คนละระดับ
     start = อัดทุกแถวชิดบน ที่ว่างไปกองไว้ท้ายกล่องแทน ทุกใบจึงตรงแนวกัน */
  align-content: start;
}

.recipe-card__block-title {
  margin-bottom: var(--space-12);
  padding-bottom: var(--space-8);
  border-bottom: 2px solid var(--color-golden-yellow);
  color: var(--color-deep-red);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.recipe-card__ingredients li {
  position: relative;
  padding-inline-start: var(--space-24);
  font-size: var(--fs-body);
}

.recipe-card__ingredients li + li {
  margin-top: var(--space-8);
}

.recipe-card__ingredients li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 10px;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background-color: var(--color-deep-red);
}

.recipe-card__steps li {
  display: flex;
  gap: var(--space-12);
  font-size: var(--fs-body);
}

.recipe-card__steps li + li {
  margin-top: var(--space-12);
}

.recipe-card__step-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  background-color: var(--color-deep-red);
  color: var(--color-white);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  line-height: 1;
}

.recipe-card__footer {
  padding: 0 var(--space-24) var(--space-24);
}

.recipe-card__print {
  width: 100%;
}

@media (min-width: 640px) {
  .recipe-card--compact .recipe-card__body {
    grid-template-columns: 1fr;
  }
}

/* ---------- การ์ดแบบย่อ: บีบจังหวะแนวตั้งลงราว 10% ----------
   ปรับที่ระยะห่าง ไม่แตะขนาดตัวอักษร เนื้อหาจึงอ่านง่ายเท่าเดิม
   ตั้งค่าให้ทั้งตอนหุบและตอนกาง จะได้ไม่มีการขยับกระตุกระหว่างแอนิเมชัน */
.recipe-card--compact .recipe-card__meta {
  padding-block: var(--space-8);
}

.recipe-card--compact .recipe-card__body {
  gap: var(--space-16);
  padding: var(--space-16) var(--space-24);
}

.recipe-card--compact .recipe-card__block-title {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-4);
}

.recipe-card--compact .recipe-card__ingredients li + li {
  margin-top: var(--space-4);
}

.recipe-card--compact .recipe-card__steps li + li {
  margin-top: var(--space-8);
}

.recipe-card--compact .recipe-card__toggle {
  padding-top: var(--space-8);
}

/* การ์ดตอนหุบสูง 400px — ตั้งผ่านความสูงภาพ ไม่ใช่ height ของตัวการ์ด
   เพราะถ้าล็อก height ที่การ์ด ตอนกางดูวิธีทำการ์ดจะยืดไม่ได้ เนื้อหาจะถูกตัดหาย
   ส่วนที่เหลืออีกสองแถวเป็นตัวหนังสือล้วนและสูงคงที่ (แถบเวลา/ปริมาณ/ระดับ 69px + ปุ่มดูสูตร 84px)
   ภาพจึงรับส่วนที่เหลือไป 400 - 153 = 247px
   สัดส่วนที่ได้คือ ภาพ 62% ต่อข้อความ 38% — ภาพเป็นพระเอกแต่ยังเหลือที่ให้ข้อมูลอ่านสบาย
   ตั้งเฉพาะการ์ดแบบย่อ การ์ดเต็มในหน้า recipes.html ยังใช้ภาพสูง 180px เท่าเดิม */
.recipe-card--compact .recipe-card__media {
  height: 247px;
}

/* ---------- Accordion: พับวิธีทำไว้ในการ์ดแบบย่อ ---------- */
.recipe-card__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  width: 100%;
  padding: var(--space-12) 0 0;
  /* ไม่มีเส้นคั่นสีเทาเหนือปุ่มแล้ว — ระยะห่างด้านบนทำหน้าที่แบ่งส่วนแทน */
  border: 0;
  background: none;
  color: var(--color-deep-red);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  text-align: start;
  cursor: pointer;
}

.recipe-card__toggle-icon {
  flex: none;
  width: 20px;
  height: 20px;
  transition: transform var(--transition-base);
}

.recipe-card--compact.is-expanded .recipe-card__toggle-icon {
  transform: rotate(180deg);
}

/* 0fr → 1fr ทำให้ความสูงค่อย ๆ กางออกได้โดยไม่ต้องรู้ความสูงจริงล่วงหน้า
   ลูกข้างในต้อง overflow: hidden ไม่งั้นเนื้อหาจะโผล่ทะลุตอนหุบ */
.recipe-card__collapse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}

/* ข้างในมีสองบล็อก (วัตถุดิบ + วิธีทำ) ต้องเว้นระยะระหว่างกันเอง
   จะพึ่ง gap ของ .recipe-card__body ไม่ได้ เพราะทั้งคู่อยู่ในตัวห่อเดียวกันแล้ว
   ห้ามใส่ padding/margin ด้านบนตรงนี้ — ตอนหุบแถวสูง 0 แต่ระยะขอบยังกินที่อยู่
   จะเหลือช่องว่างค้างใต้ปุ่ม ระยะห่างจากปุ่มปล่อยให้เป็นหน้าที่ gap ของ .recipe-card__body */
.recipe-card__collapse-inner {
  display: grid;
  gap: var(--space-16);
  overflow: hidden;
}

.recipe-card--compact.is-expanded .recipe-card__collapse {
  grid-template-rows: 1fr;
}

@media (prefers-reduced-motion: reduce) {
  .recipe-card__collapse,
  .recipe-card__toggle-icon {
    transition: none;
  }
}

/* เวลาสั่งพิมพ์ต้องได้วิธีทำครบ ถึงตอนนั้นการ์ดจะหุบอยู่ก็ตาม */
@media print {
  .recipe-card__collapse {
    grid-template-rows: 1fr;
  }

  .recipe-card__toggle {
    display: none;
  }
}

/* ==================================================
   FORM ELEMENTS
   ================================================== */
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.form-field label {
  font-size: var(--fs-h6);
  font-weight: var(--fw-medium);
}

.form-field .required {
  color: var(--color-deep-red);
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--space-12) var(--space-16);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-body);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.form-field textarea {
  min-height: 144px;
  resize: vertical;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--color-deep-red);
  box-shadow: 0 0 0 4px rgba(155, 52, 38, 0.12);
  outline: none;
}

.form-field .hint {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.form-field .error-text {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-deep-red);
  min-height: var(--space-16);
}

.form-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
}

.form-check input[type='checkbox'] {
  width: 20px;
  height: 20px;
  min-height: 0;
  margin-top: var(--space-2);
  flex-shrink: 0;
  accent-color: var(--color-deep-red);
}

.form-check label {
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  color: var(--color-text-muted);
}

/* ==================================================
   PRINT — Ready-to-Print Recipe Card
   ================================================== */
@media print {
  .site-header,
  .site-footer,
  .skip-link,
  .recipe-card__print,
  .recipes-hero,
  .recipes-filter {
    display: none !important;
  }

  body {
    padding-top: 0;
    background-color: var(--color-white);
  }

  .recipe-card {
    border: 1px solid #000000;
    box-shadow: none;
    break-inside: avoid;
  }

  body.is-printing-recipe .recipe-card:not(.is-print-target) {
    display: none !important;
  }

  body.is-printing-recipe main > *:not(:has(.is-print-target)) {
    display: none !important;
  }
}

/* ==================================================
   FILTER BAR (ใช้ร่วมกัน: B2B Solutions / Recipes / CSR)
   ================================================== */
/* ย้ายมาจาก .recipes-filter เดิมในหน้า recipes เพื่อให้สามหน้าที่มีตัวกรองใช้ชุดเดียวกัน
   แก้ที่นี่ที่เดียวแล้วเปลี่ยนพร้อมกันทุกหน้า ไม่ต้องไล่แก้ทีละไฟล์ */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-bottom: var(--space-16);
}

.filter-bar__btn {
  min-height: 40px;
  padding: var(--space-8) var(--space-24);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  /* 16px คงที่ เท่ากับ .btn ทุกปุ่มในไซต์จึงมีขนาดตัวอักษรเดียวกัน */
  font-size: 16px;
  font-weight: var(--fw-medium);
  color: var(--color-text);
  cursor: pointer;
  transition: background-color var(--transition-base),
              border-color var(--transition-base),
              color var(--transition-base);
}

.filter-bar__btn:hover {
  border-color: var(--color-deep-red);
  color: var(--color-deep-red);
}

.filter-bar__btn.is-active {
  background-color: var(--color-deep-red);
  border-color: var(--color-deep-red);
  color: var(--color-white);
  box-shadow: 0 6px 16px rgba(155, 52, 38, 0.28);
}

/* ปุ่มที่เลือกอยู่ไม่ต้องเปลี่ยนอะไรตอนชี้เมาส์ — มันเป็นสถานะปัจจุบัน ไม่ใช่ตัวเลือกให้กดซ้ำ */
.filter-bar__btn.is-active:hover {
  background-color: var(--color-deep-red-dark);
  border-color: var(--color-deep-red-dark);
  color: var(--color-white);
}

.filter-count {
  margin-bottom: var(--space-24);
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}

/* ---------- กริดการ์ดมาตรฐาน 1 / 2 / 3 คอลัมน์ ---------- */
.card-grid {
  display: grid;
  gap: var(--grid-gutter);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .card-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ข้อความตอนตัวกรองไม่เจอรายการใดเลย — กินเต็มความกว้างกริด */
.card-grid__empty {
  grid-column: 1 / -1;
  padding: var(--space-48) var(--space-24);
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  text-align: center;
  color: var(--color-text-muted);
}

/* ==================================================
   BREADCRUMB (หน้าย่อยและหน้า Inside Page)
   ================================================== */
.breadcrumb {
  margin-bottom: var(--space-16);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
}

/* ตัวคั่นวาดด้วย ::before ของรายการที่ไม่ใช่ตัวแรก — ไม่ต้องใส่อักขระคั่นลงใน HTML
   ซึ่งจะถูกโปรแกรมอ่านหน้าจออ่านออกมาเป็นข้อความด้วย */
.breadcrumb li + li::before {
  content: '/';
  margin-inline-end: var(--space-8);
  color: var(--color-border);
}

.breadcrumb a {
  color: var(--color-text-muted);
}

.breadcrumb a:hover {
  color: var(--color-deep-red);
}

.breadcrumb [aria-current='page'] {
  color: var(--color-mahogany);
  font-weight: var(--fw-medium);
}

/* ---------- breadcrumb + ลิงก์ย้อนกลับ (หน้าสินค้า / หน้าสูตรอาหาร) ---------- */
/* ส่วนนำทางบนสุด: breadcrumb อยู่บน ลิงก์ย้อนกลับอยู่ใต้ ชิดซ้ายทั้งคู่
   เว้นระหว่างสองบรรทัดพอให้อ่านเป็นคนละรายการ และเว้นก่อนเนื้อหาหลักให้กว้างกว่านั้นชัดเจน */
.detail-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
  margin-bottom: var(--space-32);
}

.detail-nav .breadcrumb {
  margin-bottom: 0;
}

@media (min-width: 1024px) {
  .detail-nav { margin-bottom: var(--space-48); }
}

/* ลิงก์ย้อนกลับ — ข้อความเล็กพร้อมลูกศร ไม่ใช่ปุ่ม */
/* สีเข้มและหนากว่า breadcrumb เล็กน้อย จึงไม่กลืนเป็นบรรทัดเดียวกัน */
.detail-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  color: var(--color-mahogany);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
}

/* ลูกศรอยู่ในวงกลมพื้นอ่อน ชี้เมาส์แล้ววงกลมเป็นสีแดง ลูกศรขาว ขยับไปทางซ้ายเล็กน้อย */
.detail-back svg {
  flex-shrink: 0;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  padding: var(--space-8);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface-brown);
  color: var(--color-deep-red);
  transition: background-color var(--transition-base), color var(--transition-base), transform var(--transition-base);
}

.detail-back:hover {
  color: var(--color-deep-red);
  text-decoration: none;
}

.detail-back:hover svg {
  background-color: var(--color-deep-red);
  color: var(--color-white);
  transform: translateX(-2px);
}

/* ==================================================
   DETAIL PAGE (โครงร่วมของ Inside Page ทั้งสามชนิด)
   product.html / recipe.html / esg-activity.html ใช้โครงเดียวกัน
   ต่างกันแค่เนื้อหาที่สคริปต์ของแต่ละหน้าเติมเข้ามา
   ================================================== */
.detail-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* ไม่ต้องบวก --navbar-height เอง — global.css ใส่ padding-top ให้ <body> ทั้งหน้าอยู่แล้ว */
  padding-block: var(--space-40);
  background-color: var(--color-surface);
}

/* ไล่เฉดอุ่นบาง ๆ จากมุมขวาบน — ทำให้แถบหัวไม่เป็นสีเรียบแบนเหมือนกล่องเปล่า
   โทนเดียวกับพื้นผิวของหน้าแรก แต่จางกว่ามากเพราะที่นี่มีภาพสินค้าเป็นพระเอกอยู่แล้ว */
.detail-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    radial-gradient(80% 120% at 100% 0%, rgba(255, 182, 83, 0.22) 0%, rgba(255, 182, 83, 0) 58%),
    radial-gradient(70% 110% at 0% 100%, rgba(198, 214, 244, 0.28) 0%, rgba(198, 214, 244, 0) 60%);
  pointer-events: none;
}

@media (min-width: 1024px) {
  .detail-hero {
    padding-block: var(--space-64);
  }
}

/* ตราเหรียญทองคู่จาง ๆ มุมขวาบน — ลายน้ำประจำแบรนด์ เติมพื้นผิวให้แถบหัวไม่ว่างเปล่า
   ใช้ ::after จึงไม่ต้องเพิ่มอิลิเมนต์ในมาร์กอัปของทุกหน้า */
.detail-hero::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset-block-start: -14%;
  inset-inline-end: -6%;
  width: min(40vw, 380px);
  aspect-ratio: 1;
  background-image: url('../element/Element.svg');
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.06;
  pointer-events: none;
}

@media (max-width: 767px) {
  .detail-hero::after { display: none; }
}

.detail-hero__grid {
  display: grid;
  gap: var(--space-24);
  align-items: center;
}

@media (min-width: 768px) {
  .detail-hero__grid {
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: var(--space-48);
  }
}

/* ภาพถุงสินค้าแบบไดคัต — ไม่มีกรอบ ใช้เงาทิ้งใต้ภาพตามกติกาดีไซน์ซิสเต็ม */
.detail-hero__media--pack {
  display: flex;
  justify-content: center;
}

.detail-hero__media--pack img {
  width: min(100%, 300px);
  height: auto;
  filter: drop-shadow(0 20px 28px rgba(79, 45, 29, 0.2));
}

/* ภาพถ่ายประกอบ — ใส่กรอบมุมมนเต็มกรอบ ใช้กับสินค้าที่ภาพถุงจริงยังไม่พร้อม
   และใช้กับหน้ากิจกรรม CSR / สูตรอาหาร ซึ่งเป็นภาพถ่ายอยู่แล้ว */
.detail-hero__media--photo {
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 3;
}

.detail-hero__media--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ปุ่มกดดูภาพใหญ่ (.detail-zoom) ห่อรูปอยู่ — ต้องสูงเต็มกรอบ 4:3 ด้วย
   ไม่อย่างนั้นรูปแนวนอนกว้าง ๆ จะสูงแค่ตามสัดส่วนตัวเอง เหลือพื้นว่างใต้รูป */
.detail-hero__media--photo .detail-zoom {
  height: 100%;
  border-radius: 0;
}

.detail-hero__title {
  margin-block: var(--space-12) var(--space-16);
}

.detail-hero__lead {
  color: var(--color-text-muted);
  margin-bottom: var(--space-24);
}

.detail-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-24);
  margin-bottom: var(--space-24);
}

.detail-hero__meta div {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.detail-hero__meta dt {
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.detail-hero__meta dd {
  font-size: var(--fs-h6);
  font-weight: var(--fw-semibold);
  color: var(--color-mahogany);
}

/* สถานที่จัดกิจกรรม: มีไอคอนหมุดนำหน้าข้อความ (ชุดเดียวกับการ์ดในหน้า CSR) */
.detail-hero__where {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.detail-hero__pin {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--color-deep-red);
}

.detail-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
}

/* ---------- เนื้อหาหลัก + แผงข้อมูลด้านข้าง ---------- */
.detail-layout {
  display: grid;
  gap: var(--space-32);
  align-items: start;
}

@media (min-width: 1024px) {
  .detail-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    gap: var(--space-64);
  }
}

.detail-main > * + * {
  margin-top: var(--space-24);
}

.detail-main p {
  color: var(--color-text-muted);
}

.detail-block__title {
  margin-bottom: var(--space-12);
}

/* หลายย่อหน้าในบล็อกเดียว — เว้นระยะให้เห็นว่าเป็นคนละย่อหน้า */
.detail-block p + p {
  margin-top: var(--space-12);
}

/* รายการติ๊กถูก — ไอคอนมาจาก --icon-check ใน variables.css วาดด้วย mask
   จึงเปลี่ยนสีตาม background-color ของ ::before ได้โดยไม่ต้องมีไฟล์ภาพหลายสี */
.detail-list li {
  position: relative;
  padding-inline-start: var(--space-24);
  margin-bottom: var(--space-8);
  color: var(--color-text-muted);
}

/* จุดเล็กสีทองแทนเครื่องหมายติ๊กถูกสีแดง — ติ๊กถูกที่โผล่ทุกบรรทัดของทุกบล็อก
   อ่านเป็นลวดลายมากกว่าข้อมูล และทำให้หน้าดูเป็นเทมเพลตสำเร็จรูป */
.detail-list li::before {
  content: '';
  position: absolute;
  inset-inline-start: var(--space-8);
  inset-block-start: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: var(--radius-pill);
  background-color: var(--color-golden-yellow-dark);
}

/* รายการตัวเลขลำดับ — ใช้กับขั้นตอนของกิจกรรมและวิธีทำ */
.detail-steps {
  counter-reset: detail-step;
}

.detail-steps li {
  position: relative;
  counter-increment: detail-step;
  padding-inline-start: var(--space-40);
  margin-bottom: var(--space-16);
  color: var(--color-text-muted);
}

.detail-steps li::before {
  content: counter(detail-step);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  background-color: var(--color-golden-yellow);
  color: var(--color-mahogany);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  line-height: 1;
}

.detail-aside {
  padding: var(--space-24);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

@media (min-width: 1024px) {
  .detail-aside {
    position: sticky;
    /* เกาะใต้แถบเมนูแบบ fixed — ค่าความสูงจริงถูกเขียนลง --navbar-height โดย navbar.js */
    inset-block-start: calc(var(--navbar-height) + var(--space-16));
  }
}

.detail-aside__title {
  margin-bottom: var(--space-16);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid var(--color-border);
}

/* เฉพาะแถวชั้นแรก — รายการซ้อนด้านใน (ชิปมาตรฐาน) ต้องไม่ได้เส้นคั่นและระยะของแถวไปด้วย */
.detail-specs > li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-16);
  padding-block: var(--space-12);
  border-bottom: 1px solid var(--color-border);
}

.detail-specs > li:last-child {
  border-bottom: 0;
}

.detail-specs .caption {
  color: var(--color-text-muted);
}

.detail-specs strong {
  color: var(--color-mahogany);
  text-align: end;
}

.detail-aside__brand {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  margin-bottom: var(--space-16);
}

.detail-aside__brand img {
  width: 56px;
  height: auto;
}

/* ข้อความตอนหา id ที่ส่งมาทาง query string ไม่เจอ */
.detail-missing {
  padding-block: var(--space-80) var(--space-64);
  text-align: center;
}

.detail-missing p {
  margin-block: var(--space-12) var(--space-24);
  color: var(--color-text-muted);
}

/* ==================================================
   NAVBAR DROPDOWN (เมนู Product เป็นหัวข้อหลักที่กดไปหน้าไหนไม่ได้)
   ================================================== */
/* ตัวหัวข้อเป็น <button> ไม่ใช่ <a> เพราะตาม Sitemap กำหนดว่าเป็น Non-clickable hub
   หน้าที่ของมันคือเปิดรายการลูกเท่านั้น ไม่ได้พาไปหน้าไหน */
.navbar__group {
  position: relative;
}

.navbar__group-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-8) var(--space-12);
  background-color: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base);
}

.navbar__group-toggle:hover,
.navbar__group-toggle[aria-expanded='true'] {
  background-color: var(--color-surface);
  color: var(--color-deep-red);
}

.navbar__group.is-active > .navbar__group-toggle {
  color: var(--color-deep-red);
  background-color: rgba(255, 182, 83, 0.24);
}

.navbar__group-icon {
  width: 16px;
  height: 16px;
  transition: transform var(--transition-base);
}

.navbar__group-toggle[aria-expanded='true'] .navbar__group-icon {
  transform: rotate(180deg);
}

.navbar__submenu {
  display: none;
  padding: var(--space-8);
  list-style: none;
}

.navbar__group.is-open .navbar__submenu {
  display: block;
}

.navbar__submenu a {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-12);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
}

.navbar__submenu a:hover {
  background-color: var(--color-surface);
  color: var(--color-deep-red);
  text-decoration: none;
}

.navbar__submenu a.is-active {
  color: var(--color-deep-red);
  background-color: rgba(255, 182, 83, 0.24);
}

@media (min-width: 1024px) {
  /* บนเดสก์ท็อปรายการลูกลอยเป็นแผงใต้หัวข้อ ไม่ดันเมนูอื่นให้ขยับ */
  /* หัวข้อเมนูเตี้ยกว่าแถบราว 12px ต่อด้าน ถ้าเว้นจากหัวข้อแค่ 8px แผงจะชิดขอบล่างแถบพอดี
     เว้น 24px จากหัวข้อ = ห่างจากขอบล่างของแถบราว 12px (สะพานเมาส์ด้านล่างใช้ค่าเดียวกัน) */
  .navbar__group {
    --submenu-offset: var(--space-24);
  }

  .navbar__submenu {
    position: absolute;
    inset-block-start: calc(100% + var(--submenu-offset));
    inset-inline-start: 0;
    min-width: 260px;
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    z-index: 10;
  }
}

@media (max-width: 1023px) {
  /* ในแผงเมนูจอเล็ก รายการลูกกางลงมาต่อจากหัวข้อตามลำดับปกติของหน้า */
  .navbar__group-toggle {
    display: flex;
    justify-content: space-between;
    padding: var(--space-16);
    border-radius: var(--radius-md);
  }

  .navbar__submenu a {
    padding-inline-start: var(--space-32);
  }
}

/* เดสก์ท็อปที่มีเมาส์: ชี้ที่หัวข้อก็เปิดแผงย่อย (navbar.js ติด is-open ให้ตอน mouseenter)
   แผงลอยห่างหัวข้อ --submenu-offset — สะพานใสด้านบนกันเมาส์หลุดระหว่างเลื่อนจากหัวข้อลงไปที่แผง */
/* เดสก์ท็อปที่มีเมาส์: หัวข้อกลุ่มไม่ใช่ปุ่มให้กด (เปิดแผงด้วยการชี้) เคอร์เซอร์จึงเป็นลูกศรปกติ */
@media (min-width: 1024px) and (hover: hover) {
  .navbar__group-toggle {
    cursor: default;
  }
}

@media (min-width: 1024px) {
  .navbar__submenu::before {
    content: '';
    position: absolute;
    inset-inline: 0;
    inset-block-end: 100%;
    height: calc(var(--submenu-offset) + 2px);
  }
}

/* ---------- แถบเมนูแลนดิ้งเพจ (components/navbar-landing*.html) ---------- */
/* ไอคอนแบรนด์หน้ารายการในแผงย่อย — กล่องขนาดคงที่ ไอคอนแต่ละแบรนด์สัดส่วนไม่เท่ากันจึงใช้ contain */
.navbar__submenu-icon {
  flex: none;
  width: 40px;
  height: 32px;
  object-fit: contain;
}

@media (min-width: 1024px) {
  /* เมนูมีแค่สองรายการ ถ้าปล่อยไว้กลางแถบจะลอยโดดเดี่ยว
     ดันไปชิดขวาอยู่กลุ่มเดียวกับตัวสลับภาษาและปุ่ม CTA */
  .navbar__inner--landing {
    gap: var(--space-24);
  }

  .navbar__inner--landing .navbar__nav {
    margin-inline-start: auto;
  }

  .navbar__inner--landing .navbar__menu {
    gap: var(--space-4);
  }

  /* แผงแบรนด์หกรายการ เรียงเป็นคอลัมน์เดียวตามลำดับบนหน้า
     ขอบซ้ายตรงแนวเดียวกับหัวข้อ "Our Brands" (ค่า inset-inline-start: 0 จากกฎหลัก)
     แผงจึงกางลงมาจากใต้หัวข้อ ไม่ยื่นไปทางซ้ายก่อนหน้าเมนู */
  .navbar__submenu--brands {
    min-width: 240px;
  }
}

/* ---------- แถบเมนูแลนดิ้งเพจ: ตอนอยู่บนสุดของหน้า ----------
   ฮีโร่แลนดิ้งเพจเป็นภาพสีเข้มที่มุดขึ้นไปอยู่ใต้แถบ (ดู .lp-hero ใน brands.css)
   ตอนแถบยังใส จึงใช้โลโก้ขาวและตัวอักษรขาว พอเลื่อนลง (is-scrolled) แถบได้พื้นขาว กลับเป็นสีปกติ */
.navbar__logo--light {
  display: none;
}

body.gc-landing .site-header:not(.is-scrolled) .navbar__logo--dark {
  display: none;
}

body.gc-landing .site-header:not(.is-scrolled) .navbar__logo--light {
  display: block;
}

body.gc-landing .site-header:not(.is-scrolled) .navbar__toggle-bar,
body.gc-landing .site-header:not(.is-scrolled) .navbar__toggle-bar::before,
body.gc-landing .site-header:not(.is-scrolled) .navbar__toggle-bar::after {
  background-color: var(--color-white);
}

@media (min-width: 1024px) {
  body.gc-landing .site-header:not(.is-scrolled) .navbar__link,
  body.gc-landing .site-header:not(.is-scrolled) .navbar__group-toggle {
    color: var(--color-white);
  }

  body.gc-landing .site-header:not(.is-scrolled) .navbar__link:hover,
  body.gc-landing .site-header:not(.is-scrolled) .navbar__group-toggle:hover,
  body.gc-landing .site-header:not(.is-scrolled) .navbar__group-toggle[aria-expanded='true'] {
    background-color: color-mix(in srgb, var(--color-white) 16%, transparent);
    color: var(--color-white);
  }

  body.gc-landing .site-header:not(.is-scrolled) .navbar__lang {
    background-color: color-mix(in srgb, var(--color-white) 16%, transparent);
  }

  body.gc-landing .site-header:not(.is-scrolled) .navbar__lang-btn[aria-disabled='true'] {
    color: color-mix(in srgb, var(--color-white) 45%, transparent);
  }
}

/* ==================================================
   COOKIE CONSENT (PDPA — Global Element)
   ================================================== */
.cookie-consent {
  position: fixed;
  inset-inline: var(--space-16);
  inset-block-end: var(--space-16);
  z-index: 120;
  max-width: 720px;
  margin-inline: auto;
  padding: var(--space-24);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* ซ่อนด้วย hidden จาก HTML จนกว่าสคริปต์จะตรวจแล้วว่ายังไม่เคยเลือก
   ไม่ใช้ display: none ใน CSS เพราะ [hidden] เป็นสถานะที่โปรแกรมอ่านหน้าจอเข้าใจอยู่แล้ว */
.cookie-consent[hidden] {
  display: none;
}

.cookie-consent__title {
  margin-bottom: var(--space-8);
}

.cookie-consent__text {
  margin-bottom: var(--space-16);
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}

.cookie-consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
}

.cookie-consent__actions .btn {
  min-height: 42px;
  padding: var(--space-8) var(--space-24);
}

/* ==================================================
   ENTRY CARD (การ์ดรายการของหน้ารอง: สินค้า / สูตรอาหาร / กิจกรรม CSR)
   ================================================== */
.entry-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius-lg) * 0.85);
  box-shadow: var(--shadow-sm);
  transition:
    box-shadow 0.4s var(--ease-luxe),
    transform 0.4s var(--ease-luxe),
    border-color 0.4s var(--ease-luxe);
}

.entry-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--color-deep-red) 24%, var(--color-border));
}

.entry-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--color-surface);
}

.entry-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* --card-zoom ถูกไล่จาก 1.06 → 1 ตอนการ์ดโผล่ (กฎอยู่ใน global.css)
     ค่านี้จึงถูกใช้ซ้ำตอนชี้เมาส์ ไม่ต้องมี transform คนละตัวมาแย่งกัน */
  transform: scale(var(--card-zoom, 1));
  transition: transform 0.6s var(--ease-luxe);
}

/* ประกาศค่าที่ตัว <img> เอง จึงชนะค่าที่ถูกส่งต่อมาจากการ์ด (.is-revealed ตั้งไว้ที่การ์ด)
   วิธีเดียวกับการ์ดสูตรอาหารบนหน้าแรก */
@media (hover: hover) and (pointer: fine) {
  .entry-card:hover .entry-card__media img { --card-zoom: 1.06; }
}

/* ฝ้าจาง ๆ ท่อนบนของภาพ — ทำให้ป้ายสีอ่อนอย่างเขียวหรือฟ้าอ่านออกแม้ภาพจะสว่าง */
.entry-card__media::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 45%;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0));
  pointer-events: none;
}

/* ภาพถุงสินค้าไดคัต — ไม่ครอปเต็มกรอบ วางกลางกรอบพร้อมเงาทิ้ง ตามกติกาดีไซน์ซิสเต็ม
   ภาพแบบนี้พื้นหลังสว่างอยู่แล้ว จึงไม่ต้องมีฝ้าและไม่ต้องซูม */
.entry-card__media--pack {
  background-image: linear-gradient(160deg, var(--color-white) 0%, var(--color-surface) 55%, var(--color-surface-brown) 100%);
}

.entry-card__media--pack img {
  object-fit: contain;
  padding: var(--space-16);
  filter: drop-shadow(0 12px 20px rgba(79, 45, 29, 0.18));
}

.entry-card__media--pack::before { display: none; }

.entry-card__badge {
  position: absolute;
  inset-block-start: var(--space-12);
  inset-inline-start: var(--space-12);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.entry-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-24);
}

.entry-card__eyebrow {
  color: var(--color-deep-red);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.entry-card__title {
  margin: 0;
}

/* ลิงก์กางเต็มการ์ดด้วย ::after — ทั้งใบกดได้ แต่ในโครงสร้างมีลิงก์เดียว
   โปรแกรมอ่านหน้าจอจึงประกาศเป้าหมายเป็นชื่อรายการ ไม่ใช่ "ลิงก์" ซ้ำหลายอัน */
.entry-card__link {
  color: var(--color-mahogany);
  transition: color var(--transition-base);
}

.entry-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
}

.entry-card:hover .entry-card__link {
  color: var(--color-deep-red);
  text-decoration: none;
}

.entry-card__text {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}

@media (prefers-reduced-motion: reduce) {
  .entry-card,
  .entry-card__media img {
    transition: none;
  }

  .entry-card:hover { transform: none; }
}

/* ==================================================
   DETAIL PAGE — ส่วนเสริม (แกลเลอรีและหมายเหตุ)
   ================================================== */
.detail-gallery {
  display: grid;
  gap: var(--grid-gutter);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.detail-gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
}

/* ป้าย "รอแก้รูป" บนภาพที่ยังรอเปลี่ยน (PENDING_IMAGES ใน products-data.js) — ป้ายชั่วคราวระหว่างรีวิวกับลูกค้า
   ภาพเดิมยังแสดงอยู่ครบ ป้ายทับแค่มุมซ้ายบน */
.detail-gallery__pending {
  position: relative;
  margin: 0;
}

.detail-gallery__pending-label {
  position: absolute;
  inset-block-start: var(--space-8);
  inset-inline-start: var(--space-8);
  padding: var(--space-4) var(--space-12);
  border-radius: var(--radius-pill);
  background-color: var(--color-golden-yellow);
  box-shadow: var(--shadow-sm);
  color: var(--color-mahogany);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
}

/* ---------- รูปที่กดดูขนาดใหญ่ได้ ----------
   ปุ่มห่อรูปไว้ทั้งใบ ล้างหน้าตาปุ่มทิ้งให้เหลือแต่รูป แล้วใส่แว่นขยายมุมขวาล่างบอกว่ากดได้ */
.detail-zoom,
.detail-gallery__item {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.detail-zoom img,
.detail-gallery__item img {
  display: block;
  transition: transform 0.6s var(--ease-luxe);
}

.detail-zoom:hover img,
.detail-gallery__item:hover img {
  transform: scale(1.04);
}

.detail-zoom::after,
.detail-gallery__item::after {
  content: '';
  position: absolute;
  inset-block-end: var(--space-12);
  inset-inline-end: var(--space-12);
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background-color: rgba(58, 33, 20, 0.72);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='M20 20l-4.5-4.5M11 8.5v5M8.5 11h5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  opacity: 0.85;
  transition: opacity var(--transition-base);
}

.detail-zoom:hover::after,
.detail-gallery__item:hover::after {
  opacity: 1;
}

.detail-zoom:focus-visible,
.detail-gallery__item:focus-visible {
  outline: 2px solid var(--color-deep-red);
  outline-offset: 4px;
}

/* ---------- กล่องดูรูปขนาดใหญ่ (components/lightbox.js) ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-16);
  padding: var(--space-24);
  background-color: rgba(26, 14, 8, 0.94);
}

.lightbox[hidden] {
  display: none;
}

/* ล็อกหน้าเว็บด้านหลังไม่ให้เลื่อนตามขณะเปิดดูรูป */
body.is-lightbox-open {
  overflow: hidden;
}

.lightbox__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  margin: 0;
  max-width: min(1200px, 100%);
}

.lightbox__img {
  max-width: 100%;
  max-height: 80vh;
  border-radius: var(--radius-md);
  object-fit: contain;
}

.lightbox__count {
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--fs-small);
}

.lightbox__close,
.lightbox__nav {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-pill);
  background-color: rgba(255, 255, 255, 0.12);
  color: var(--color-white);
  cursor: pointer;
  transition: background-color var(--transition-base), border-color var(--transition-base);
}

.lightbox__close:hover,
.lightbox__nav:hover {
  background-color: var(--color-deep-red);
  border-color: var(--color-deep-red);
}

.lightbox__close svg,
.lightbox__nav svg {
  width: 22px;
  height: 22px;
}

.lightbox__close {
  position: absolute;
  inset-block-start: var(--space-16);
  inset-inline-end: var(--space-16);
}

.lightbox__nav[hidden] {
  display: none;
}

/* มือถือ: ปุ่มเลื่อนย้ายลงมาอยู่ใต้รูป เพราะจอแคบเกินกว่าจะวางขนาบข้างได้ */
@media (max-width: 639px) {
  .lightbox {
    flex-wrap: wrap;
    padding: var(--space-16);
  }

  .lightbox__figure {
    order: -1;
    width: 100%;
  }

  .lightbox__img {
    max-height: 70vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .detail-zoom img,
  .detail-gallery__item img {
    transition: none;
  }

  .detail-zoom:hover img,
  .detail-gallery__item:hover img {
    transform: none;
  }
}

.detail-note {
  padding: var(--space-16);
  background-color: var(--color-soft-blue);
  border-radius: var(--radius-sm);
  color: var(--color-mahogany);
  font-size: var(--fs-small);
}

/* ==================================================
   PRINT — หน้าสูตรอาหาร (Ready-to-Print)
   ================================================== */
/* สวิตช์อยู่ที่คลาสบน <body> ซึ่ง recipe.js ใส่ให้ตอนกดปุ่มพิมพ์ แล้วถอดออกเมื่อพิมพ์เสร็จ
   ระหว่างนั้นซ่อนทุกอย่างยกเว้นบล็อกเนื้อหาสูตร กระดาษจึงมีเฉพาะส่วนผสมและวิธีทำ */
@media print {
  body.is-printing-recipe .site-header,
  body.is-printing-recipe .site-footer,
  body.is-printing-recipe .detail-hero__actions,
  body.is-printing-recipe .detail-aside,
  body.is-printing-recipe .section--surface,
  body.is-printing-recipe .partnership,
  body.is-printing-recipe .cookie-consent,
  body.is-printing-recipe .topbar,
  body.is-printing-recipe .breadcrumb,
  body.is-printing-recipe .detail-back {
    display: none !important;
  }

  body.is-printing-recipe .detail-hero {
    padding-block: 0 var(--space-16);
    background-color: transparent;
  }

  body.is-printing-recipe .detail-layout {
    display: block;
  }
}

/* ==================================================
   SITE CARD (การ์ดที่ตั้ง — ใช้ทั้งหน้า About และหน้า Contact)
   ================================================== */
.site-grid {
  display: grid;
  gap: var(--grid-gutter);
  grid-template-columns: 1fr;
  margin-top: var(--space-32);
}

@media (min-width: 768px) {
  .site-grid { grid-template-columns: repeat(3, 1fr); }
}

.site-card {
  padding: var(--space-24);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.site-card__kind {
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.site-card__title {
  margin-block: var(--space-4) var(--space-12);
}

.site-card address {
  color: var(--color-text-muted);
  font-style: normal;
  font-size: var(--fs-small);
}

.site-card__tel {
  display: inline-block;
  margin-top: var(--space-12);
  font-weight: var(--fw-medium);
}

/* ==================================================
   EYEBROW — ป้ายกำกับหัวข้อของหน้ารอง
   ==================================================
   เดิมเป็นแดงตัวพิมพ์ใหญ่พร้อมขีดทองใต้ทุกหัวข้อ ซึ่งพอมีหลายหัวข้อในหน้าเดียว
   มันกลายเป็นลวดลายซ้ำ ๆ ที่แย่งความสนใจจากเนื้อหา
   ตอนนี้เหลือเป็นข้อความเล็กสีเทาคั่นด้วยขีดทองสั้นในบรรทัดเดียวกัน (แบบเดียวกับ .masthead__kicker)

   กันหน้าแรกไว้ด้วย :not([data-page='home']) — หน้าแรกมีชุดสไตล์ของตัวเองใน home.css
   กัน .partnership__eyebrow ไว้อีกชั้น — ป้ายบนแถบ CTA พื้นแดงเป็นตัวอักษรสีขาว
   ================================================== */
body:not([data-page='home']) .eyebrow:not(.partnership__eyebrow) {
  display: block;
  margin-bottom: var(--space-12);
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  letter-spacing: normal;
  text-transform: none;
}

/* ==================================================
   BANNER FOCUS — จุดโฟกัสของภาพแบนเนอร์รายหน้า
   ==================================================
   คอลัมน์ภาพเป็นแนวตั้ง ภาพต้นฉบับส่วนใหญ่เป็นแนวนอน จึงต้องบอกว่าให้เก็บส่วนไหนไว้
   ================================================== */
body[data-page='products'] .masthead__media img { --banner-focus: 62% center; }
body[data-page='brands'] .masthead__media img { --banner-focus: 58% center; }
body[data-page='recipes'] .masthead__media img { --banner-focus: center 28%; }
body[data-page='csr'] .masthead__media img { --banner-focus: center 35%; }
body[data-page='about'] .masthead__media img { --banner-focus: 55% center; }
body[data-page='contact'] .masthead__media img { --banner-focus: 60% center; }

/* ย้ายมาจาก pages/home.css — ใช้ร่วมกันระหว่างหน้าแรก (ส่วน How we work) กับหน้า About (ส่วน Our Workflow)
   แอนิเมชันไล่ทีละขั้นต้องเรียก initHowWorkMotion() (how-work-motion.js) ในสคริปต์ของหน้านั้น ๆ */
/* ==================================================
   HOW WE WORK — เลย์เอาต์ตามภาพอ้างอิงรีวิวรอบสอง 20/08/26
   หัวข้อซ้าย + ปุ่ม About us ขวา การ์ดสามใบเรียงแถวเดียว
   (แทนการ์ดเหลื่อมระดับ .story เดิม ซึ่ง CSS ยังอยู่แต่ไม่มีมาร์กอัปใช้แล้ว)
   ================================================== */
.how-work__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  margin-block-end: var(--space-32);
}

.how-work__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-32);
}

/* container query เทียบขนาดตัวอักษรของคำบรรยายไทยกับความกว้างการ์ดจริง (ดู .how-work__text)
   ต้องประกาศไว้ที่การ์ดแม่ ไม่ใช่ grid — cqw อ้างอิงความกว้างของกล่องที่ตั้ง container-type เท่านั้น */
.how-work__item {
  container-type: inline-size;
}

@media (min-width: 768px) {
  .how-work__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-24);
  }
}

@media (min-width: 1024px) {
  .how-work__grid {
    gap: var(--space-40);
  }
}

/* หน้า About ใช้ 4 ขั้นตอนตามเอกสารลูกค้า (R&D → Production → Quality Control → Customer Service)
   แท็บเล็ต 2×2 / จอใหญ่ 4 คอลัมน์ ช่องไฟแคบกว่าแถว 3 ใบเพื่อให้การ์ดไม่แคบเกินไป */
@media (min-width: 768px) {
  .how-work__grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .how-work__grid--4 {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-24);
  }
}

.how-work__media {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.how-work__media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  transition: transform 0.6s var(--ease-luxe);
}

/* ซูมภาพเมื่อชี้เมาส์ที่การ์ด — รูปแบบเดียวกับ .recipe-tile__media img */
.how-work__item:hover .how-work__media img {
  transform: scale(1.05);
}

/* คอมเม้นรีวิว 28/08/26 (Remove the link in each image / Design to show the process)
   ป้ายลูกศรมุมขวาล่างถูกถอดออกทั้งสามใบ เพราะอ่านเป็นปุ่มลิงก์ทั้งที่ไม่ใช่ลิงก์
   แทนที่ด้วยเลขลำดับขั้นตอนมุมซ้ายบน + ลูกศรเชื่อมระหว่างการ์ด (ดู .how-work__item ด้านล่าง)
   ทั้งแถวจึงอ่านเป็นกระบวนการเดียว: Controlled Inputs → Standardized Processes → Verified Outputs */
.how-work__step {
  position: absolute;
  inset-inline-start: var(--space-12);
  inset-block-start: var(--space-12);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background-color: var(--color-golden-yellow);
  color: var(--color-white);
  font-size: var(--fs-h6);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  transition: background-color var(--transition-base), color var(--transition-base);
}

/* ชี้เมาส์ที่การ์ด = เลขขั้นตอนสลับเป็นแดงเข้ม-ขาว ให้รับกับหัวข้อที่เปลี่ยนเป็นสีแดงพร้อมกัน */
.how-work__item:hover .how-work__step {
  background-color: var(--color-deep-red);
  color: var(--color-white);
}

.how-work__title {
  margin-block-start: var(--space-16);
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  transition: color var(--transition-base);
}

.how-work__item:hover .how-work__title {
  color: var(--color-deep-red);
}

.how-work__text {
  margin-block-start: var(--space-8);
  max-width: 40ch;
  color: var(--color-text-muted);
  font-size: var(--fs-body);
  line-height: 1.7;
}

/* หน้าภาษาไทย — บังคับให้ประโยคบรรยายอยู่บรรทัดเดียว ไม่ตัดคำกลางคัน
   ตัดตัวจำกัดความกว้าง 40ch ทิ้ง (ตัวการที่ทำให้ตัดบรรทัด) แล้วผูกขนาดตัวอักษรกับ
   ความกว้างการ์ดจริงด้วยหน่วย cqw (ดู container-type ที่ .how-work__item) แทนหน่วย viewport
   เพื่อให้พอดีบรรทัดเดียว — ประโยคที่ยาวที่สุดเป็นตัวกำหนดสัดส่วน 3.6cqw นี้
   ช่วง 768–1023px (การ์ด 3 คอลัมน์แต่ตัวการ์ดยังแคบมาก) ไม่พอสำหรับบรรทัดเดียวแม้ลดฟอนต์แล้ว
   จึงปล่อยให้ตัดบรรทัดตามปกติเฉพาะช่วงนั้น (มือถือคอลัมน์เดียวการ์ดกว้างพอ, จอ 1024px+ ก็กว้างพอเช่นกัน) */
@media (max-width: 767px), (min-width: 1024px) {
  html[lang='th'] .how-work__text {
    max-width: none;
    white-space: nowrap;
    font-size: clamp(10px, 3.6cqw, var(--fs-body));
  }

  /* การ์ด 4 ขั้นตอนมีคำบรรยายเป็นย่อหน้า ต้องตัดบรรทัดตามปกติ */
  html[lang='th'] .how-work__grid--4 .how-work__text {
    white-space: normal;
    font-size: var(--fs-body);
  }
}

.how-work__grid--4 .how-work__text {
  max-width: none;
}

/* ---- ไล่โชว์ขั้นตอนทีละขั้นตามการเลื่อนหน้า ----
   how-work-motion.js เป็นคนติดคลาส is-step-active ให้การ์ดทีละใบตามระยะที่เลื่อนผ่านส่วนนี้
   (แถวนี้ถูกถอดออกจาก STAGGER_GROUPS ของ scroll-motion.js แล้ว ไม่งั้นสองระบบจะแย่งกันสั่งการ์ดใบเดียวกัน)

   ทุกกฎในบล็อกนี้อยู่ใต้ .has-scroll-motion ซึ่ง scroll-motion.js เป็นคนติดที่ <html>
   ถ้า JS ไม่ทำงาน หรือผู้ใช้ตั้ง prefers-reduced-motion ไว้ คลาสนั้นจะไม่มี
   การ์ดทั้งแถวจึงแสดงเต็มตามปกติตั้งแต่แรก ไม่มีอะไรค้างอยู่ในสถานะซ่อน

   ภายในการ์ดหนึ่งใบยังไล่เป็นลำดับย่อยอีกชั้น: กรอบภาพเปิดจากขอบล่างขึ้นบน → เลขลำดับป๊อปขึ้นมา
   → หัวข้อและคำอธิบายไหลขึ้นตาม ผู้ใช้จึงเห็น "ขั้นตอนกำลังเกิด" ไม่ใช่การ์ดโผล่มาทั้งใบพร้อมกัน */
.has-scroll-motion .how-work__item[data-step-item] {
  opacity: 0;
  transform: translate3d(0, 36px, 0);
  transition:
    opacity 0.7s var(--ease-luxe),
    transform 0.7s var(--ease-luxe);
  will-change: opacity, transform;
}

.has-scroll-motion .how-work__item.is-step-active {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* กรอบภาพเปิดจากขอบล่างขึ้นบน — ใช้ clip-path หลักการเดียวกับแถบสถิติ (.stats-band__reveal)
   ตัวภาพข้างในไม่ถูกยืดหรือบีบระหว่างทาง ต่างจากการย่อ-ขยายด้วย scaleY */
.has-scroll-motion .how-work__item[data-step-item] .how-work__media {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.9s var(--ease-luxe) 0.08s;
}

.has-scroll-motion .how-work__item.is-step-active .how-work__media {
  clip-path: inset(0 0 0 0);
}

/* ภาพเริ่มจากซูมเกินไว้นิดหนึ่งแล้วคลายออกพร้อมกรอบที่กำลังเปิด
   ต้องใช้คุณสมบัติ scale ไม่ใช่ transform เพราะ transform เป็นของเอฟเฟกต์ซูมตอนชี้เมาส์
   (ถ้าเขียนทับกัน ค่าใดค่าหนึ่งจะหายไป — หลักการเดียวกับ .stats-band .hero__stats)
   ประกาศ transform ต่อท้ายใน transition ด้วย ไม่งั้นจังหวะซูมตอน hover จะหายไป */
.has-scroll-motion .how-work__item[data-step-item] .how-work__media img {
  scale: 1.14;
  transition:
    scale 1.1s var(--ease-luxe),
    transform 0.6s var(--ease-luxe);
}

.has-scroll-motion .how-work__item.is-step-active .how-work__media img {
  scale: 1;
}

/* เลขลำดับป๊อปขึ้นมาหลังกรอบภาพเปิดไปแล้วครึ่งทาง
   คงจังหวะเปลี่ยนสีตอนชี้เมาส์ไว้ใน transition ชุดเดียวกัน ไม่งั้นจะถูกกฎนี้ลบทิ้ง */
.has-scroll-motion .how-work__item[data-step-item] .how-work__step {
  opacity: 0;
  scale: 0.3;
  transition:
    opacity 0.4s var(--ease-luxe) 0.34s,
    scale 0.55s var(--ease-back) 0.34s,
    background-color var(--transition-base),
    color var(--transition-base);
}

.has-scroll-motion .how-work__item.is-step-active .how-work__step {
  opacity: 1;
  scale: 1;
}

/* วงกลมบางที่แผ่ออกจากเลขลำดับครั้งเดียวตอนขั้นนั้นติด — เป็นตัวบอกว่า "ขั้นนี้เพิ่งเกิดขึ้น"
   ไม่รับคลิกและไม่กินพื้นที่ จึงไม่กระทบเลย์เอาต์หรือการกดใด ๆ */
.how-work__step::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid var(--color-golden-yellow);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}

.has-scroll-motion .how-work__item.is-step-active .how-work__step::after {
  animation: how-work-step-ping 0.9s var(--ease-luxe) 0.46s 1;
}

@keyframes how-work-step-ping {
  from {
    opacity: 0.8;
    scale: 1;
  }

  to {
    opacity: 0;
    scale: 2;
  }
}

/* หัวข้อกับคำอธิบายไหลขึ้นตามหลังภาพ ห่างกันนิดหนึ่งเพื่อให้อ่านเป็นสองจังหวะ
   ใช้ translate ไม่ใช่ transform ด้วยเหตุผลเดียวกับภาพด้านบน (transform เป็นของ hover)
   และคง transition ของสีหัวข้อตอนชี้เมาส์ไว้ */
.has-scroll-motion .how-work__item[data-step-item] .how-work__title,
.has-scroll-motion .how-work__item[data-step-item] .how-work__text {
  opacity: 0;
  translate: 0 16px;
  transition:
    opacity 0.55s var(--ease-luxe) 0.42s,
    translate 0.55s var(--ease-luxe) 0.42s,
    color var(--transition-base);
}

.has-scroll-motion .how-work__item[data-step-item] .how-work__text {
  transition-delay: 0.52s, 0.52s, 0s;
}

.has-scroll-motion .how-work__item.is-step-active .how-work__title,
.has-scroll-motion .how-work__item.is-step-active .how-work__text {
  opacity: 1;
  translate: none;
}

/* ==================================================
   AWARDS MARQUEE — แถบตรารับรองที่ไหลวนแบบไร้รอยต่อ
   ย้ายมาจาก pages/home.css — ใช้ร่วมกันระหว่างหน้าแรกกับหน้า About
   ต้องเรียก initAwardMarquee() (award-marquee.js) ในสคริปต์ของหน้านั้น ๆ ด้วย
   ================================================== */
.awards__marquee {
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.awards__marquee::-webkit-scrollbar {
  display: none;
}

/* พอสคริปต์สำเนาภาพต่อท้ายเรียบร้อยแล้วจึงล็อกไม่ให้ปัดเอง — รางจะไหลด้วยแอนิเมชันแทน */
.awards__marquee.has-marquee {
  overflow-x: hidden;
}

/* จาง ๆ ที่ขอบซ้าย-ขวา ให้ภาพค่อย ๆ โผล่และค่อย ๆ ลับไปแทนที่จะถูกตัดตรง ๆ */
@supports (mask-image: linear-gradient(90deg, #000, #000)) {
  .awards__marquee.has-marquee {
    mask-image: linear-gradient(
      90deg,
      transparent 0,
      #000 var(--space-64),
      #000 calc(100% - var(--space-64)),
      transparent 100%
    );
  }
}

/* ห้ามใช้ gap ระยะห่างต้องมาจาก margin ท้ายของทุกใบรวมใบสุดท้ายด้วย
   เพราะ gap เว้นเฉพาะ "ระหว่าง" ใบ ครึ่งรางจึงสั้นกว่าหนึ่งรอบจริงอยู่ครึ่งช่องไฟ
   พอวนครบรอบภาพจะกระตุกกระโดดเท่าระยะที่ขาดไปทุกครั้ง
   ใส่เป็น margin ท้ายแทน ความกว้างรวมจะเป็นสองรอบพอดีเป๊ะ -50% จึงบรรจบสนิท */
.awards__track {
  display: flex;
  align-items: center;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ช่องไฟย่อลง 20% จาก 64px เหลือ 51.2px — ไม่ตรงกับขั้นไหนในชุด --space-* จึงคิดจากตัวเดิม
   เขียนเป็น calc ไว้ให้เห็นที่มาว่าย่อจากค่าอะไรมากี่เปอร์เซ็นต์ */
/* การ์ดขาวรองตรารับรองแต่ละใบ — พื้น section เป็นสีขาวเปล่า ตราจึงต้องมีกรอบและเงาบาง ๆ
   ถึงจะอ่านออกว่าเป็นใบ ๆ ไม่ใช่โลโก้ลอยเรียงกัน
   ล็อกความกว้าง-สูงขั้นต่ำไว้เท่ากันทุกใบ ตราแต่ละใบสัดส่วนต่างกันมาก
   ถ้าปล่อยให้การ์ดหดตามเนื้อหา ความกว้างจะไม่เท่ากันสักใบ แถบจะดูกระโดก
   ห้ามใช้ gap ระยะห่างต้องมาจาก margin ท้ายของทุกใบ (ดูเหตุผลที่ .awards__track) */
.awards__track > li {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 176px;
  min-height: 108px;
  margin-inline-end: calc(var(--space-64) * 0.8);
  padding: var(--space-16) var(--space-24);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

@media (min-width: 768px) {
  .awards__track > li {
    min-width: 206px;
    min-height: 124px;
  }
}

.awards__track > li::before {
  content: none;
}

/* จำกัดทั้งความสูงและความกว้าง ไม่ใช่ล็อกความสูงอย่างเดียวเหมือนเดิม
   ตรารับรองชุดนี้สัดส่วนต่างกันมาก ตั้งแต่วงกลมจัตุรัส (1:1) ไปจนถึงป้ายยาว (3.2:1)
   ถ้าล็อกความสูงเท่ากันหมด ป้ายที่ยาวที่สุด (Green Industry) จะกว้าง 298px
   คิดเป็นพื้นที่มากกว่าตราวงกลมถึงสามเท่า มองแล้วเด่นกว่าใบอื่นชัดเจน
   พอคุมกรอบทั้งสองด้าน ใบที่ยาวจะชนขอบกว้างแล้วเตี้ยลงเอง ส่วนใบที่เป็นจัตุรัสชนขอบสูง
   น้ำหนักสายตาของทุกใบจึงใกล้เคียงกัน
   (ไฟล์ต้นฉบับถูกตัดขอบโปร่งรอบตราออกให้หมดแล้ว ความสูงที่ตั้งไว้จึงเป็นความสูงของตราจริง
   ไม่ใช่ความสูงของผืนภาพที่มีที่ว่างปนอยู่ ซึ่งเดิมมีตั้งแต่ 0% ถึง 47% ไม่เท่ากันเลย) */
.awards__track img {
  display: block;
  width: auto;
  height: auto;
  max-width: 126px;
  max-height: 70px;
  object-fit: contain;
}

@media (min-width: 768px) {
  .awards__track img {
    max-width: 150px;
    max-height: 84px;
  }
}

/* เลื่อนไปครึ่งเดียวของราง เพราะรางมีสองชุดที่เหมือนกันเป๊ะ
   ครบ -50% เมื่อไหร่ ภาพที่เห็นจะตรงกับตอนเริ่มพอดี วนต่อได้โดยไม่กระตุก
   ระยะเวลาส่งมาจาก JS ผ่าน --marquee-duration เพราะขึ้นกับความกว้างจริงของราง
   ความเร็วต่อวินาทีจึงคงที่ ไม่ว่าจะมีภาพกี่ใบหรือจอกว้างแค่ไหน */
@keyframes oem-awards-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

.awards__marquee.is-playing .awards__track {
  animation: oem-awards-scroll var(--marquee-duration, 60s) linear infinite;
}

/* หยุดค้างไว้ตรงตำแหน่งเดิมเมื่อเอาเมาส์ไปวางหรือโฟกัสเข้ามา — ผู้ใช้จะได้ดูใบที่สนใจทัน */
.awards__marquee.is-playing:hover .awards__track,
.awards__marquee.is-playing:focus-within .awards__track {
  animation-play-state: paused;
}

/* ปิดแอนิเมชันไว้ = ไม่ไหลเอง กลับไปเป็นแถวที่ปัดดูเองได้ */
@media (prefers-reduced-motion: reduce) {
  .awards__marquee.has-marquee {
    overflow-x: auto;
  }

  .awards__marquee.is-playing .awards__track {
    animation: none;
  }
}