/* ==================================================
   GOLDEN-COINS.CSS — แลนดิ้งเพจแบรนด์ Golden Coins (golden-coins.html / golden-coins-th.html)
   หน้าเดียวตามขอบเขตงานลูกค้า: About Golden Coins / Certification / Product / Contact Us + ฟอร์ม
   ฟอร์มและรายการช่องทางติดต่อใช้สไตล์ของหน้า Contact Us (contact.css) — ไฟล์นี้จัดเฉพาะส่วนของแลนดิ้ง
   ================================================== */

/* ---------- CI ตราเหรียญทองคู่ (Golden Coins Visual Identity, Essential Studio 15/07/2026) ----------
   เอกสาร: Google Drive "CI Golden Coins" → Golden Coins_Visual Identity.pdf
   สี (หน้า 8 — Primary มีแค่ 4 สี ใช้เท่านี้ ไม่ผสมเฉดเพิ่ม):
     Pantone 185 C #E40032 แดงประจำแบรนด์ / Pantone 477 C #623C2C น้ำตาล / ขาว #FFFFFF / ดำ #000000
   ตัวอักษร (หน้า 9–11):
     EN  Work Sans — หัวข้อ Bold / เนื้อหา Medium
     TH  หัวข้อ Mitr Medium / เนื้อหา Kanit Regular
   เปลี่ยนเฉพาะหน้านี้ด้วยการทับตัวแปรที่ body — ไฟล์กลางของเว็บหลักไม่ถูกแตะ
   ช่องที่เว็บหลักใช้สีทอง / ครีม / เทา ถูกแทนด้วยสีใน CI ทั้งหมด (สีทอง→น้ำตาล, พื้นครีม→ขาว, ตัวอักษรรอง→น้ำตาล)
   เส้นแบ่งบาง ๆ ยังใช้เทาอ่อน (--color-border) ของเว็บหลัก เป็นเส้นกลาง ไม่ใช่สีแบรนด์ */
body.gc-page {
  --color-deep-red: #E40032;
  --color-deep-red-dark: #623C2C;
  --color-golden-yellow: #623C2C;
  --color-golden-yellow-dark: #E40032;
  --color-mahogany: #623C2C;
  --color-mahogany-light: #623C2C;
  --color-mahogany-dark: #623C2C;
  --color-surface: #FFFFFF;
  --color-surface-yellow: #FFFFFF;
  --color-text: #000000;
  --color-text-muted: #623C2C;
  --font-corporate: 'Work Sans', 'Kanit', sans-serif;
  --gc-font-heading: 'Work Sans', 'Mitr', sans-serif;
  background-color: #FFFFFF;
  /* hero มุดขึ้นไปอยู่ใต้แถบเมนูใส (แถบไม่มีพื้นตอนอยู่บนสุด — ลูกค้าขอ)
     global.css ดัน body ลงเท่าความสูงแถบให้ทุกหน้า หน้านี้ไม่ต้อง — .gc-hero เผื่อที่ให้แถบใน padding ของตัวเองแล้ว */
  padding-top: 0;
  /* เนื้อหาอังกฤษเป็น Work Sans Medium — ทับน้ำหนัก "regular" ของเว็บหลัก (p, .lead ฯลฯ ใช้ตัวแปรนี้) */
  --fw-regular: 500;
  font-weight: 500;
}

body.gc-page :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5) {
  font-family: var(--gc-font-heading);
  font-weight: 700; /* Work Sans Bold */
}

/* หน้าไทย: หัวข้อ Mitr Medium / เนื้อหา Kanit Regular */
html[lang='th'] body.gc-page {
  --gc-font-heading: 'Mitr', 'Work Sans', sans-serif;
  --font-corporate: 'Kanit', 'Work Sans', sans-serif;
  --fw-regular: 400;
  font-weight: 400;
}

html[lang='th'] body.gc-page :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5) {
  font-weight: 500;
}

/* ---------- NAVBAR ของแบรนด์ (components/navbar-golden-coins*.html) ----------
   โลโก้ตราเหรียญทองคู่อย่างเดียว — ตัวโลโก้มีชื่อแบรนด์ไทย/อังกฤษอยู่แล้ว ไม่วางข้อความซ้ำข้าง ๆ (CI หน้า 5–6) */
.navbar__brand--gc {
  gap: var(--space-8);
  color: var(--color-deep-red);
  text-decoration: none;
}

.navbar__brand--gc:hover {
  text-decoration: none;
}

/* โลโก้แบรนด์เป็น lockup สามบรรทัด (ไอคอน + ชื่อไทย + GOLDEN COINS + SINCE 1978)
   จอเล็กแถบเมนูสูง 50.4px (min-height กลางของ .navbar__inner) ถ้าโลโก้ 48px จะเหลือช่องว่างข้างละ 1.2px
   ดูล้นกรอบ — ย่อโลโก้อย่างเดียวจะอ่านตัวอักษรไม่ออก จึงขยายแถบเฉพาะหน้านี้ควบคู่กัน */
body.gc-page .navbar__inner {
  min-height: 60px;
}

.navbar__gc-logo {
  width: auto;
  height: 44px;
}

/* Work Sans กว้างกว่า Roboto ของเว็บหลัก — กันเมนู/ปุ่มตัดเป็นสองบรรทัดบนจอขนาดกลาง */
body.gc-page .navbar__link,
body.gc-page .navbar__actions .btn {
  white-space: nowrap;
}

@media (min-width: 1024px) {
  /* จอใหญ่แถบสูง 64.8px ตามค่ากลางอยู่แล้ว ปล่อยไว้ */
  body.gc-page .navbar__inner {
    min-height: calc(72px * 0.9);
  }

  .navbar__gc-logo {
    height: 56px;
  }
}

/* ---------- HERO ---------- */
/* สูงเต็มจอหนึ่งหน้าจอ (ลูกค้าขอ 100vh) — ข้อความอยู่กึ่งกลางทั้งแนวตั้งและแนวนอน (ลูกค้าขอ ไม่มีภาพแพ็กสินค้าแล้ว)
   100svh ให้มือถือไม่ถูกแถบที่อยู่เบราว์เซอร์ดันล้น / เนื้อหายาวกว่าจอก็ยืดตามได้ (min-height)
   พื้นหลังเป็นภาพอาหารสลับกัน (assets/golden-coins/hero/ — golden-coins.js) ทับด้วยฝ้าดำ ข้อความจึงเป็นสีขาว */
.gc-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: calc(var(--navbar-height) + var(--space-24)) var(--space-48);
  /* แดงเดียวกับพื้นในภาพรวมสินค้า — ถ้าภาพอาหารยังมาไม่ทัน จะเห็นแดงต่อเนื่องจากสเตตแรก ไม่ใช่ดำโป๊ะ */
  background-color: #DF2929;
  color: var(--color-white);
  text-align: center;
}

.gc-hero > .container {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* ภาพพื้นหลังซ้อนกันเต็มกรอบ ตัวที่ is-active ทึบ — จางไขว้เวลาสลับ
   ภาพที่กำลังโชว์ค่อย ๆ ซูมเข้าช้า ๆ (Ken Burns) ให้ฉากมีชีวิต */
.gc-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

/* ---------- HERO: ฉากปักค้าง (scroll-pinned) ----------
   .gc-hero-scene สูงกว่าหนึ่งจอ ส่วน .gc-hero เป็น sticky ปักอยู่กับที่
   ระยะที่เกินมาคือระยะสกอร์ลที่ใช้ไล่เปลี่ยนฉาก หน้าจึงไม่เลื่อนหนีระหว่างเปลี่ยน
   golden-coins.js คำนวณความคืบหน้า 0-1 แล้วส่งเข้ามาเป็นตัวแปร CSS
   ทุกกฎอยู่ใต้ .is-live ที่ JS เป็นคนใส่ — ถ้า JS ไม่ทำงาน hero แสดงแบบเดิมครบทุกอย่าง */
.gc-hero-scene.is-live {
  position: relative;
  /* หนึ่งจอสำหรับตัว hero + อีก 75vh เป็นระยะไล่ฉาก
     ฉากไล่จบตั้งแต่ 60% ของระยะนี้ ที่เหลือคือช่วงพัก hero อยู่นิ่งในสเตตสุดท้ายก่อนปล่อยให้เลื่อนต่อ */
  height: 175vh;
}

.gc-hero-scene.is-live .gc-hero {
  position: sticky;
  inset-block-start: 0;
  height: 100svh;
  min-height: 0;
}

/* ภาพรวมสินค้าบนพื้นแดง = สเตตเริ่มต้นของฉาก
   contain ไม่ครอป เห็นครบทุกถุง ส่วนที่เหลือเติมด้วยสีพื้นของภาพเอง
   #DF2929 = ค่ามัธยฐานของพิกเซลขอบภาพจริง (เดิมใช้ #E0292E ช่อง B เพี้ยนไป 5 เห็นเป็นรอยต่อชัด) 
   นอกโหมด .is-live ซ่อนไว้ hero จึงกลับไปเป็นภาพอาหารแบบเดิม */
.gc-hero__product {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background-color: #DF2929;
  opacity: 0;
  pointer-events: none;
}

.gc-hero-scene.is-live .gc-hero__product {
  opacity: var(--hero-product, 1);
}

/* ภาพอาหารกับฝ้าดำจางเข้าสวนทางกับภาพสินค้า
   transition: none สำคัญ — ค่ามาจากสกอร์ลทุกเฟรมอยู่แล้ว ถ้าปล่อยให้มี transition
   ฝ้าดำจะเริ่มที่ opacity 1 แล้วค่อยไล่ลง เห็นเป็นแถบดำคาดท้ายภาพราว 1 วินาทีตอนเปิดหน้า */
.gc-hero-scene.is-live .gc-hero__bg,
.gc-hero-scene.is-live .gc-hero__overlay {
  opacity: var(--hero-scene, 0);
  transition: none;
}

/* ปิด animation ตอนโหลด (gc-rise / gc-line) เพราะฉากนี้คุมด้วยสกอร์ลแทน
   ถ้าปล่อยไว้ fill: both จะค้างค่าทับ ไล่ตามสกอร์ลไม่ได้ */
.gc-hero-scene.is-live .gc-hero__title,
.gc-hero-scene.is-live .gc-hero__lead,
.gc-hero-scene.is-live .gc-hero__actions,
.gc-hero-scene.is-live .gc-hero__title::after {
  animation: none;
}

/* ข้อความ + ปุ่ม เลื่อนขึ้นมาจากด้านล่างตามระยะสกอร์ล */
.gc-hero-scene.is-live .gc-hero__content {
  opacity: var(--hero-copy, 0);
  translate: 0 calc((1 - var(--hero-copy, 0)) * 56px);
}

.gc-hero-scene.is-live .gc-hero__title::after {
  scale: var(--hero-copy, 0) 1;
}

.gc-hero__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  scale: 1.12;
  /* ภาพที่กำลังจางออกคงขนาดไว้ แล้วค่อยกลับไปขนาดเริ่มต้นหลังหายไปแล้ว (ไม่เห็นซูมถอยหลัง) */
  transition: opacity 1.4s ease, scale 0s linear 1.4s;
}

.gc-hero__bg-img.is-active {
  opacity: 1;
  scale: 1;
  transition: opacity 1.4s ease, scale 7s ease-out;
}

/* ไล่ดำ (สีดำใน CI) เฉพาะด้านล่าง ด้านบนเห็นภาพสีจริงเต็ม ๆ (ลูกค้าขอ ไม่เอาฝ้าทึบทั้งภาพ)
   ข้อความกลางจออ่านชัดด้วยเงาตัวอักษร (.gc-hero__title / .gc-hero__lead) แทนฝ้า */
.gc-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgb(0 0 0 / 0.78) 0%, rgb(0 0 0 / 0.45) 30%, rgb(0 0 0 / 0) 65%);
  pointer-events: none;
  transition: opacity 0.9s ease;
}

.gc-hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 880px;
  margin-inline: auto;
}

.gc-hero__title {
  margin: 0;
  color: var(--color-white);
  font-size: clamp(40px, 7vw, 88px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 24px rgb(0 0 0 / 0.55), 0 1px 3px rgb(0 0 0 / 0.4);
}

/* เส้นแดง 185 C ใต้หัวข้อ — ยืดออกจากกึ่งกลางตอนเข้าฉาก */
.gc-hero__title::after {
  content: '';
  display: block;
  width: 72px;
  height: 4px;
  margin: var(--space-24) auto 0;
  border-radius: 2px;
  background-color: var(--color-deep-red);
}

.gc-hero__lead {
  max-width: 58ch;
  margin-top: var(--space-24);
  color: var(--color-white);
  text-shadow: 0 1px 12px rgb(0 0 0 / 0.7), 0 1px 2px rgb(0 0 0 / 0.5);
}

.gc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-12);
  margin-top: var(--space-32);
}

/* ---------- แอนิเมชันเข้าฉากของ hero (ลูกค้าขอ) ----------
   หัวข้อ → เส้นแดง → คำอธิบาย → ปุ่ม ลอยขึ้นพร้อมจางเข้าไล่กันทีละชิ้น ครั้งเดียวตอนเปิดหน้า */
@keyframes gc-rise {
  from {
    opacity: 0;
    translate: 0 28px;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes gc-line {
  from {
    scale: 0 1;
  }

  to {
    scale: 1 1;
  }
}

.gc-hero__title,
.gc-hero__lead,
.gc-hero__actions {
  animation: gc-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.gc-hero__title {
  animation-delay: 0.15s;
}

.gc-hero__title::after {
  animation: gc-line 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.7s both;
}

.gc-hero__lead {
  animation-delay: 0.4s;
}

.gc-hero__actions {
  animation-delay: 0.6s;
}

/* มือถือจอเตี้ย (เช่น iPhone SE 375×667) — ลดระยะขอบให้ยังพอดีหนึ่งจอ */
@media (max-width: 639px) and (max-height: 720px) {
  .gc-hero {
    padding-block: calc(var(--navbar-height) + var(--space-8)) var(--space-24);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gc-hero__bg-img {
    scale: 1;
    transition: none;
  }

  .gc-hero__product,
  .gc-hero__overlay {
    transition: none;
  }

  .gc-hero__title,
  .gc-hero__title::after,
  .gc-hero__lead,
  .gc-hero__actions {
    animation: none;
  }
}

/* ==================================================
   ส่วนเนื้อหากลางหน้า — ดีไซน์ใหม่ทั้งชุด (ลูกค้าขอ ยกเว้น hero กับ footer)
   อารมณ์ตาม CI หน้า 3: Warm / Authentic / Togetherness — สีใน CI ล้วน (แดง 185 C / น้ำตาล 477 C / ขาว / ดำ)
   จังหวะหน้า: About (ขาว) → Certification (แถบน้ำตาล) → Products (ขาว + แท็บหมวด) → Recipe/OEM (การ์ดภาพ/น้ำตาล) → Contact (แผงแดง)
   ================================================== */

/* ---------- หัวข้อส่วน ---------- */
/* ป้ายเล็กเหนือหัวข้อ (eyebrow) ตัวพิมพ์ใหญ่ สีแดง ไม่มีขีดนำหน้า (ลูกค้าขอ)
   เว็บหลักตั้ง text-transform: none ไว้ใน components.css — selector ความเจาะจงเท่ากันและไฟล์นี้โหลดทีหลังจึงชนะ */
body.gc-page .eyebrow:not(.partnership__eyebrow) {
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  color: #E40032;
  /* ขยายขนาดป้ายหัวข้อ (คอมเมนต์ลูกค้า 06/10/26: เดิมเล็กไป อ่านยาก) */
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ป้ายหมวดในป๊อปอัปสินค้าเป็นข้อความกำกับเหนือชื่อสินค้า ไม่ใช่หัวข้อส่วน — คงขนาดเล็กเดิม */
body.gc-page .gc-modal .eyebrow {
  font-size: var(--fs-small);
}

/* ชื่อบริษัทที่ลิงก์กลับ thaiflour.co.th (คอมเมนต์ลูกค้า 06/10/26) — สีเดียวกับข้อความรอบข้าง ขีดเส้นใต้บางบอกว่ากดได้
   ใช้ได้ทั้งบนพื้นขาว ภาพ hero แผงแดง แถบ OEM และฟุตเตอร์ */
.gc-company-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: opacity var(--transition-base);
}

.gc-company-link:hover,
.gc-company-link:focus-visible {
  color: inherit;
  opacity: 0.75;
}

body.gc-page .site-footer .gc-company-link {
  font-weight: inherit;
  text-decoration: underline;
}

.gc-head {
  max-width: 760px;
  margin-bottom: var(--space-40);
}

.gc-head h2 {
  margin: var(--space-8) 0 0;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.15;
}

.gc-head p {
  max-width: 60ch;
  margin-top: var(--space-16);
  color: var(--color-text-muted);
}

.gc-about h2 {
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.15;
}

/* ---------- ABOUT ----------
   ภาพมีบล็อกน้ำตาลเยื้องไปด้านหลัง (แบบเดียวกับหน้า Our Brands) / ตัวเลขเด่นเป็นตัวใหญ่สีแดง คั่นด้วยเส้นบาง ไม่มีกล่อง */
.gc-about__inner {
  display: grid;
  gap: var(--space-48);
  align-items: center;
}

.gc-about__media {
  position: relative;
  margin: 0 var(--space-16) var(--space-16) 0;
}

.gc-about__media::before {
  content: '';
  position: absolute;
  inset: var(--space-24) calc(var(--space-16) * -1) calc(var(--space-16) * -1) var(--space-24);
  border-radius: var(--radius-lg);
  /* ภาพเป็นพื้นแดงแบรนด์ — บล็อกด้านหลังจึงเป็นน้ำตาล 477 C ไม่งั้นแดงชนแดงกลืนกัน */
  background-color: #623C2C;
}

/* ภาพต้นฉบับแนวตั้ง 1152×1440 ครึ่งบนเป็นพื้นแดงว่าง โลโก้กับแพ็กสินค้าอยู่ช่วงล่าง
   ใช้กรอบ 5:4 แล้วเลื่อนจุดครอปลงไปที่ช่วงโลโก้ + แพ็ก (83%) — ภาพสูงพอดีกับข้อความข้าง ๆ ไม่ยาวเกิน */
.gc-about__media img {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: center 83%;
  border-radius: var(--radius-lg);
}

.gc-about__body > p {
  margin-top: var(--space-16);
  color: var(--color-text-muted);
}

/* ย่อหน้าแรกเป็นประโยคนำ — ใหญ่กว่าและเป็นสีดำ */
.gc-about__body > p:first-of-type {
  margin-top: var(--space-24);
  color: var(--color-text);
  font-size: 18px;
  line-height: 1.65;
}

.gc-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: var(--space-40) 0 0;
  border-top: 1px solid var(--color-border);
}

.gc-facts > div {
  display: flex;
  flex-direction: column-reverse;
  padding: var(--space-24) var(--space-16) 0;
}

.gc-facts > div:first-child {
  padding-left: 0;
}

.gc-facts > div + div {
  border-left: 1px solid var(--color-border);
}

.gc-facts dd {
  margin: 0;
  color: #E40032;
  font-family: var(--gc-font-heading);
  font-size: clamp(30px, 4vw, 48px);
  font-weight: var(--fw-bold);
  line-height: 1;
}

.gc-facts dt {
  margin-top: var(--space-8);
  color: var(--color-mahogany);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

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

  .gc-about__media {
    margin: 0 var(--space-24) var(--space-24) 0;
  }

  .gc-about__media::before {
    inset: var(--space-32) calc(var(--space-24) * -1) calc(var(--space-24) * -1) var(--space-32);
  }
}

/* ---------- CERTIFICATION ----------
   ดีไซน์ใหม่ (ลูกค้าขอ): พื้นขาวทั้ง section ไม่มีแถบน้ำตาล/ไล่สี
   - หัวข้อกลางจอ สีเข้มแบบส่วนอื่น
   - แถบตรารับรองไหลวนเต็มความกว้างจอ บนพื้นน้ำตาลจาง ๆ มีเส้นบาง ๆ บน-ล่าง การ์ดตราไม่มีเงา */
body.gc-page .gc-cert {
  /* แถบกว้าง 100vw รวมความกว้างแถบเลื่อนด้วย — ตัดส่วนเกินที่ขอบ section กันแถบเลื่อนแนวนอน */
  overflow-x: clip;
  background-color: var(--color-white);
}

.gc-cert .gc-head {
  max-width: none;
  margin-inline: auto;
  text-align: center;
}

/* หัวข้อบรรทัดเดียวบนจอกว้าง (ลูกค้าขอ) — จอเล็กยังตัดบรรทัดตามปกติ */
@media (min-width: 1024px) {
  .gc-cert .gc-head h2 {
    white-space: nowrap;
  }
}

.gc-cert .gc-head p {
  max-width: 60ch;
  margin-inline: auto;
}

/* แถบตรารับรองวิ่งเต็มความกว้างจอ ไม่ถูกตัดที่ขอบคอนเทนเนอร์ (ลูกค้าขอ ให้เห็นใบที่ไหลเข้า-ออกด้านข้าง)
   ดึงออกนอก .container ด้วย margin ติดลบ */
.gc-cert .awards__marquee {
  width: 100vw;
  margin-top: var(--space-8);
  margin-inline: calc(50% - 50vw);
  padding-block: var(--space-32);
  border-block: 1px solid rgb(98 60 44 / 0.12);
  background-color: rgb(98 60 44 / 0.04);
}

.gc-cert .awards__track > li {
  border-color: rgb(98 60 44 / 0.1);
  box-shadow: none;
}

@media (min-width: 1024px) {
  .gc-cert .awards__marquee {
    padding-block: var(--space-40);
  }
}

/* ---------- PRODUCT ----------
   แท็บหมวดด้านบน (golden-coins.js สร้างจากหัวข้อหมวดในหน้า) — "ทั้งหมด" โชว์ทุกหมวดพร้อมหัวข้อ เลือกหมวดแล้วโชว์หมวดเดียว
   การ์ดสินค้า: ภาพแพ็กบนพื้นขาว ชื่อใต้เส้นคั่น ชี้แล้วยกขึ้น ขอบและชื่อเป็นแดง */
.gc-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin: 0 0 var(--space-40);
  padding: 0;
  list-style: none;
}

.gc-tab {
  padding: var(--space-8) 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-white);
  color: var(--color-text);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}

.gc-tab:hover {
  border-color: #E40032;
  color: #E40032;
}

.gc-tab[aria-pressed='true'] {
  border-color: #E40032;
  background-color: #E40032;
  color: var(--color-white);
}

.gc-tab:focus-visible {
  outline: 3px solid rgb(228 0 50 / 0.35);
  outline-offset: 2px;
}

.gc-products__group[hidden] {
  display: none;
}

.gc-products__group + .gc-products__group {
  margin-top: var(--space-48);
}

/* หัวข้อหมวด + เส้นยาวต่อท้าย */
.gc-products__group-title {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  margin: 0 0 var(--space-24);
  color: var(--color-text);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: var(--fw-bold);
}

.gc-products__group-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: var(--color-border);
}

/* โชว์หมวดเดียวอยู่แล้ว ไม่ต้องมีหัวข้อหมวดซ้ำกับแท็บที่เลือก */
.gc-products.is-filtered .gc-products__group-title {
  display: none;
}

.gc-products__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-16);
  margin: 0;
  padding: 0;
  list-style: none;
}

.gc-product {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
  transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
}

.gc-product:hover {
  border-color: #E40032;
  box-shadow: 0 16px 32px rgb(0 0 0 / 0.1);
  transform: translateY(-4px);
}

.gc-product__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  margin: 0;
  padding: 20px;
}

/* แพ็กทุกใบสูงเท่ากัน (ลูกค้าขอ) — ไฟล์ภาพตัดขอบว่างออกแล้ว (ภาพ = ตัวแพ็กพอดี)
   ภาพเต็มกรอบจัตุรัสเดียวกันทุกใบแบบ contain — แพ็กทุกตัวทรงสูงกว่ากว้าง จึงเต็มความสูงเท่ากันหมด */
.gc-product__media img {
  position: absolute;
  inset: 20px;
  width: calc(100% - 20px * 2);
  height: calc(100% - 20px * 2);
  object-fit: contain;
  transition: scale 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.gc-product:hover .gc-product__media img {
  scale: 1.05;
}

/* ส่วนในวงเล็บ (ชื่อขนมไทย / รสชาติ / ไซซ์) ขึ้นบรรทัดใหม่ใต้ชื่อสินค้า
   เบากว่าชื่อหลักหนึ่งระดับ ให้อ่านเป็นข้อมูลประกอบ ไม่ใช่ส่วนหนึ่งของชื่อ */
.gc-product__variant {
  display: block;
  font-weight: var(--fw-regular);
}

.gc-product__name {
  /* ชิดใต้รูปเสมอ ไม่ดันลงล่างการ์ด — รูปทุกใบสูงเท่ากัน (aspect-ratio: 1)
     เส้นคั่นและบรรทัดแรกของชื่อจึงอยู่ระนาบเดียวกันทุกใบ ไม่ว่าชื่อจะกี่บรรทัด
     (เดิม margin: auto 0 0 ดันชื่อไปชิดล่าง ชื่อ 1 บรรทัดเลยเริ่มต่ำกว่าชื่อ 2-3 บรรทัด) */
  margin: 0;
  padding: var(--space-12) var(--space-16) var(--space-16);
  border-top: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  transition: color var(--transition-base);
}

.gc-product:hover .gc-product__name {
  color: #E40032;
}

/* ช่องรอภาพสินค้า — ยังไม่มีไฟล์รูป กรอบประจางไว้ให้เห็นว่าเป็นช่องที่รอของ
   วางไฟล์ตามชื่อใน data-pending-image แล้วเปลี่ยน figure นี้กลับเป็น <img> ได้เลย */
.gc-product__media--pending {
  margin: var(--space-12);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
}

.gc-product__pending {
  padding: 0 var(--space-8);
  color: var(--color-text-muted);
  font-size: var(--fs-caption, 12px);
  line-height: 1.4;
  text-align: center;
}

@media (min-width: 640px) {
  .gc-products__grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}

@media (min-width: 1024px) {
  .gc-products__grid {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: var(--space-24);
  }
}

/* ---------- PRODUCT MODAL ----------
   ป๊อปอัปเมื่อคลิกการ์ดสินค้า (golden-coins.js initProductModal / ข้อมูล golden-coins-products.js)
   ซ้าย: เวทีสินค้า พื้นน้ำตาลอ่อนไล่จากกลาง + เงาวงรีใต้ถุง (มือถือภาพอยู่บน)
   ขวา: หมวด / ชื่อ / จุดเด่น (ป้ายเขียวอ่อน มีเครื่องหมายถูก) / ขนาดบรรจุ (ป้ายขอบน้ำตาล)
        / กล่องคุณสมบัติสินค้าพื้นน้ำตาลอ่อนมุมมน / ปุ่มซื้อออนไลน์ + สอบถามสินค้า */
.gc-product.is-clickable {
  cursor: pointer;
}

.gc-product.is-clickable:focus-visible {
  outline: 3px solid #E40032;
  outline-offset: 3px;
}

html.has-modal {
  overflow: hidden;
}

.gc-modal {
  width: min(960px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: 24px;
  background-color: var(--color-white);
  color: var(--color-text);
  box-shadow: 0 32px 80px rgb(0 0 0 / 0.3);
}

.gc-modal::backdrop {
  background-color: rgb(40 24 18 / 0.6);
  backdrop-filter: blur(4px);
}

.gc-modal[open] {
  animation: gc-modal-in 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.gc-modal[open]::backdrop {
  animation: gc-modal-fade 0.3s ease-out;
}

@keyframes gc-modal-in {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.97);
  }
}

@keyframes gc-modal-fade {
  from {
    opacity: 0;
  }
}

.gc-modal__panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.gc-modal__close {
  position: absolute;
  z-index: 2;
  top: var(--space-16);
  right: var(--space-16);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgb(98 60 44 / 0.15);
  border-radius: 50%;
  background-color: var(--color-white);
  color: #000;
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base), rotate var(--transition-base);
}

.gc-modal__close:hover {
  border-color: #E40032;
  background-color: #E40032;
  color: var(--color-white);
  rotate: 90deg;
}

.gc-modal__close svg {
  width: 18px;
  height: 18px;
  fill: none;
}

/* ลูกศรก่อนหน้า/ถัดไป ซ้าย-ขวากึ่งกลางเวทีภาพ — เปลี่ยนสินค้าได้โดยไม่ต้องปิดป๊อปอัป (คอมเมนต์ลูกค้า 06/10/26) */
.gc-modal__nav {
  position: absolute;
  z-index: 1;
  top: 50%;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgb(98 60 44 / 0.15);
  border-radius: 50%;
  background-color: var(--color-white);
  color: #623C2C;
  cursor: pointer;
  translate: 0 -50%;
  transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

.gc-modal__nav--prev {
  left: var(--space-12);
}

.gc-modal__nav--next {
  right: var(--space-12);
}

.gc-modal__nav:hover,
.gc-modal__nav:focus-visible {
  border-color: #E40032;
  background-color: #E40032;
  color: var(--color-white);
}

.gc-modal__nav svg {
  width: 20px;
  height: 20px;
  fill: none;
}

/* เวทีสินค้า */
.gc-modal__media {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  margin: 0;
  padding: var(--space-40) var(--space-32) var(--space-32);
  background:
    radial-gradient(ellipse at 50% 45%, rgb(255 255 255 / 0.95) 0%, rgb(255 255 255 / 0) 60%),
    linear-gradient(160deg, rgb(98 60 44 / 0.06), rgb(98 60 44 / 0.16));
}

/* เงาวงรีใต้ถุง — ให้ถุงดูตั้งอยู่บนพื้น ไม่ลอย */
.gc-modal__media::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 9%;
  width: 55%;
  height: 7%;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(98 60 44 / 0.35), rgb(98 60 44 / 0));
}

.gc-modal__pack {
  width: 100%;
  height: 100%;
  max-height: 320px;
  object-fit: contain;
  filter: drop-shadow(0 18px 24px rgb(98 60 44 / 0.22));
}

.gc-modal__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding: var(--space-32) var(--space-24) var(--space-24);
}

.gc-modal__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding-bottom: var(--space-24);
  border-bottom: 1px solid rgb(98 60 44 / 0.12);
}

.gc-modal__head > * {
  margin: 0;
}

.gc-modal__title {
  padding-right: var(--space-40);
  font-size: clamp(24px, 2.8vw, 32px);
  line-height: 1.2;
}

.gc-modal__title .gc-product__variant {
  display: block;
  margin-top: var(--space-4);
  font-size: 0.6em;
  color: #623C2C;
}

.gc-modal__block h4 {
  margin: 0 0 var(--space-12);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.gc-modal__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.gc-modal__tags li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  line-height: 1.3;
}

/* จุดเด่น: พื้นเขียวอ่อน ตัวอักษรเขียว + วงกลมเขียวเครื่องหมายถูก
   (ลูกค้าขอสีเขียว — นอกชุดสี CI โดยตั้งใจ สื่อถึงธรรมชาติ/ปลอดภัย ใช้เฉพาะป้ายนี้) */
.gc-modal__tags--points li {
  --gc-point: #1E7F45;
  padding-left: 8px;
  background-color: rgb(30 127 69 / 0.1);
  color: var(--gc-point);
  font-weight: var(--fw-medium);
}

.gc-modal__tags--points li::before {
  content: '';
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gc-point) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* ขนาดบรรจุ: ป้ายขอบน้ำตาล */
.gc-modal__tags--sizes li {
  border: 1px solid rgb(98 60 44 / 0.3);
  color: #623C2C;
}

.gc-modal__tags--sizes li::before {
  content: none;
}

/* กล่องคุณสมบัติสินค้า */
.gc-modal__note {
  padding: var(--space-16) 20px;
  border-radius: var(--radius-md);
  background-color: rgb(98 60 44 / 0.06);
}

.gc-modal__note h4 {
  margin-bottom: var(--space-4);
  color: #623C2C;
}

.gc-modal__summary {
  margin: 0;
  line-height: 1.7;
}

.gc-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  margin-top: auto;
  padding-top: var(--space-8);
}

.gc-modal__actions .btn {
  flex: 1 1 160px;
  justify-content: center;
}

@media (min-width: 768px) {
  .gc-modal__panel {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  }

  .gc-modal__media {
    aspect-ratio: auto;
    min-height: 520px;
    padding: var(--space-64) var(--space-40) var(--space-48);
  }

  .gc-modal__pack {
    max-height: 380px;
  }

  .gc-modal__body {
    padding: var(--space-48) var(--space-40) var(--space-40);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gc-modal[open],
  .gc-modal[open]::backdrop {
    animation: none;
  }

  .gc-modal__close:hover {
    rotate: none;
  }
}

tify-content: center;
    padding: var(--space-48) var(--space-40);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gc-modal[open] {
    animation: none;
  }
}

/* ---------- RECIPE + OEM ----------
   - .gc-recipe: หัวข้อซ้าย ปุ่มขวา แล้วแถวภาพเมนู 4 ภาพ (มือถือ 2 คอลัมน์) ชื่อเมนูสีขาวทับภาพด้านล่าง
     เมนูชุดเดียวกับหน้าแรก ลิงก์ไปหน้ารายละเอียดสูตร ชี้แล้วภาพซูมช้า ๆ
   - .gc-oem: แถบภาพพื้นหลังทับน้ำตาล 477 C ข้อความซ้าย ปุ่มขวา ปิดท้ายก่อนส่วนติดต่อ */
.gc-links {
  overflow-x: clip;
}

.gc-recipe {
  padding-block: var(--space-48) var(--space-64);
}

.gc-recipe__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
  margin-bottom: var(--space-32);
}

.gc-recipe__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  max-width: 760px;
}

.gc-recipe__intro > *,
.gc-oem__text > * {
  margin: 0;
}

.gc-recipe__intro h3 {
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.15;
}

.gc-recipe__head .btn {
  flex-shrink: 0;
}

.gc-recipe__dishes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

.gc-recipe__dishes li {
  margin: 0;
}

.gc-recipe__dishes li::before {
  content: none;
}

/* การ์ดเมนู: ภาพเต็มใบ ชื่อเมนู + "View recipe" ซ้อนชิดล่าง (ข้อมูลจาก recipes-catalogue.js ชุดเดียวกับหน้าแรก) */
.gc-dish {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-4);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  padding: var(--space-16);
  border-radius: var(--radius-lg);
  color: var(--color-white);
  text-decoration: none;
}

.gc-dish img {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 0.8s ease-out;
}

/* ไล่ดำจากล่างให้ตัวอักษรสีขาวอ่านออกทุกภาพ */
.gc-dish::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / 0.7) 0%, rgb(0 0 0 / 0) 50%);
}

.gc-dish__name {
  font-weight: var(--fw-bold);
  font-size: 16px;
  line-height: 1.3;
}

.gc-dish__meta {
  font-size: 13px;
  opacity: 0.85;
}

/* ลิงก์ทั่วไปของเว็บชี้แล้วเปลี่ยนสี + ขีดเส้นใต้ — การ์ดนี้ตัวอักษรต้องขาวและไม่มีขีดตลอด (ลูกค้าขอ) */
body.gc-page .gc-dish:hover,
body.gc-page .gc-dish:focus-visible {
  color: var(--color-white);
  text-decoration: none;
}

.gc-dish:hover img {
  scale: 1.06;
}

.gc-dish:focus-visible {
  outline: 3px solid var(--color-deep-red);
  outline-offset: 3px;
}

@media (min-width: 768px) {
  .gc-recipe__head {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--space-40);
    margin-bottom: var(--space-40);
  }

  .gc-recipe__dishes {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-16);
  }

  .gc-dish {
    padding: var(--space-24);
  }

  .gc-dish__name {
    font-size: 18px;
  }
}

/* แถบ OEM — ภาพพื้นหลังชามแป้งกับถุงเปล่า (แทนแบรนด์ของลูกค้า) ทับด้วยน้ำตาล 477 C โปร่งแสงให้ตัวอักษรขาวอ่านง่าย
   ฝั่งซ้าย (ข้อความ) เข้มกว่า ฝั่งขวาจางลงให้เห็นภาพ */
.gc-oem {
  background-color: #623C2C;
  background-image:
    linear-gradient(to right, rgb(98 60 44 / 0.94) 0%, rgb(98 60 44 / 0.82) 45%, rgb(98 60 44 / 0.55) 100%),
    url('../../golden-coins/oem/rice-flour-bowl-private-label-oem.webp');
  background-size: cover, cover;
  background-position: center, center 55%;
  color: var(--color-white);
}

.gc-oem__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
  padding-block: var(--space-64);
}

.gc-oem__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

body.gc-page .gc-oem .eyebrow:not(.partnership__eyebrow),
.gc-oem h3,
.gc-oem p {
  color: var(--color-white);
}

.gc-oem h3 {
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.2;
}

/* ปุ่มขอบขาวบนพื้นน้ำตาล ชี้แล้วพื้นขาวตัวอักษรน้ำตาล */
.gc-oem .btn--outline {
  flex-shrink: 0;
  border-color: var(--color-white);
  color: var(--color-white);
}

.gc-oem .btn--outline:hover {
  border-color: var(--color-white);
  background-color: var(--color-white);
  color: #623C2C;
}

@media (min-width: 768px) {
  .gc-oem__inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-40);
  }
}

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

  /* หัวข้อบรรทัดเดียวบนจอกว้าง (ลูกค้าขอ) — จอเล็กยังตัดบรรทัดตามปกติ */
  .gc-recipe__intro {
    max-width: none;
  }

  .gc-recipe__intro h3 {
    white-space: nowrap;
  }

  .gc-recipe__intro p {
    max-width: 60ch;
  }

  .gc-oem__inner {
    padding-block: 112px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gc-product,
  .gc-product__media img,
  .gc-dish img,
  .gc-tab {
    transition: none;
  }

  .gc-product:hover {
    transform: none;
  }

  .gc-product:hover .gc-product__media img,
  .gc-dish:hover img {
    scale: 1;
  }
}

/* ---------- CONTACT ----------
   การ์ดเดียวแบ่งสองฝั่ง (ลูกค้าขอปรับดีไซน์ใหม่): ซ้ายแผงแดง 185 C ตัวอักษรขาว / ขวาฟอร์มพื้นขาว
   จอเล็กเรียงบน-ล่าง แผงแดงอยู่บน */
/* พื้นหลังทั้ง section เป็นภาพของทอดแผงลอย (ลูกค้าส่งมา) — แบบเดียวกับภาพตัวอย่างที่ลูกค้าส่ง
   ด้านบนขาวทึบยาว ๆ (ต่อกับส่วนก่อนหน้า) แล้วค่อย ๆ จางจนเห็นภาพเต็มที่ด้านล่าง ไม่ทับสีเข้ม
   ภาพชิดขอบล่าง ให้ช่วงที่เห็นชัดเป็นของทอดเต็ม ๆ — ทับ section--surface ของเว็บหลัก */
body.gc-page .gc-contact {
  background-color: var(--color-white);
  background-image:
    linear-gradient(
      to bottom,
      rgb(255 255 255 / 1) 0%,
      rgb(255 255 255 / 1) 22%,
      rgb(255 255 255 / 0.85) 34%,
      rgb(255 255 255 / 0.55) 46%,
      rgb(255 255 255 / 0.25) 60%,
      rgb(255 255 255 / 0.08) 74%,
      rgb(255 255 255 / 0) 88%
    ),
    url('../../golden-coins/contact/thai-street-food-fried-snacks.webp');
  background-size: cover, cover;
  background-position: center, center bottom;
}

.gc-contact__inner {
  display: grid;
  overflow: hidden;
  /* ตัวการ์ดคือ .container เอง — ตัด padding ด้านในออก แล้วคุมความกว้างเท่ากรอบเนื้อหา (สูตรเดียวกับแถบเมนู) ให้มีขอบซ้าย-ขวาเท่าส่วนอื่น */
  width: min(var(--container-max), calc(100% - var(--grid-margin) * 2));
  max-width: none;
  margin-inline: auto;
  padding: 0;
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
  box-shadow: 0 24px 48px rgb(0 0 0 / 0.12);
}

.gc-contact__intro {
  position: relative;
  overflow: hidden;
  padding: var(--space-40) var(--space-24);
  background-color: #E40032;
  color: var(--color-white);
}

/* ตราเหรียญคู่ขาวจาง ๆ มุมล่างขวาของแผงแดง — ลายน้ำประจำแบรนด์
   ใช้เหรียญจาก favicon.svg (เครื่องหมายล้วน ไม่มีตัวอักษร) แทนโลโก้เต็มที่มีชื่อแบรนด์ติดมาด้วย
   favicon เป็นสีแดง #E40032 ซึ่งจมไปกับพื้นแดงของแผงนี้ จึงใช้เป็น mask แล้วเติมสีขาวทับ
   aspect-ratio ตามกรอบจริงของไฟล์ (454x454) ไม่ใช่ตัวลายที่เป็นแนวนอน */
.gc-contact__intro::after {
  content: '';
  position: absolute;
  right: -40px;
  bottom: -84px;
  width: 260px;
  aspect-ratio: 1;
  background-color: var(--color-white);
  -webkit-mask: url('../../golden-coins/favicon.svg') center / contain no-repeat;
  mask: url('../../golden-coins/favicon.svg') center / contain no-repeat;
  opacity: 0.08;
  pointer-events: none;
}

body.gc-page .gc-contact__intro .eyebrow,
.gc-contact__intro h2,
.gc-contact__intro .lead {
  color: var(--color-white);
}

.gc-contact__intro h2 {
  margin-top: var(--space-8);
}

.gc-contact__intro .lead {
  margin-top: var(--space-12);
}

.gc-contact__intro .contact-info {
  position: relative;
  z-index: 1;
  gap: 20px;
  margin-top: var(--space-32);
}

.gc-contact__intro .contact-info__icon {
  border-color: rgb(255 255 255 / 0.6);
  background-color: transparent;
  color: var(--color-white);
}

.gc-contact__intro .contact-info__item > div,
.gc-contact__intro .contact-info__label,
.gc-contact__intro .contact-info__item a {
  color: var(--color-white);
}

.gc-contact__intro .contact-info__label {
  font-weight: var(--fw-bold);
}

.gc-contact__intro .contact-info__item a:hover {
  color: var(--color-white);
  opacity: 0.75;
}

/* ฝั่งฟอร์ม — การ์ดแยกเดิมกลายเป็นครึ่งหนึ่งของการ์ดใหญ่ ไม่ต้องมีเงา/มุมของตัวเอง */
.gc-contact .contact-card {
  padding: var(--space-40) var(--space-24);
  border-radius: 0;
  box-shadow: none;
}

/* ช่องกรอกมีกรอบให้เห็นชัดบนพื้นขาว (เดิมพื้นเท่ากับการ์ด ช่องกลืนหาย) / โฟกัสแล้วกรอบแดงพร้อมวงจาง */
.gc-contact .contact-card .form-field input,
.gc-contact .contact-card .form-field textarea {
  border: 1px solid rgb(0 0 0 / 0.18);
  border-radius: var(--radius-md);
  background-color: var(--color-white);
}

.gc-contact .contact-card .form-field input:focus,
.gc-contact .contact-card .form-field textarea:focus {
  border-color: #E40032;
  box-shadow: 0 0 0 4px rgb(228 0 50 / 0.14);
}

.gc-contact .contact-card .form-check input[type='checkbox'] {
  accent-color: #E40032;
}

@media (min-width: 640px) {
  .gc-contact__intro,
  .gc-contact .contact-card {
    padding: var(--space-48) var(--space-40);
  }
}

@media (min-width: 1024px) {
  .gc-contact__inner {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }

  .gc-contact__intro,
  .gc-contact .contact-card {
    padding: var(--space-64) var(--space-48);
  }

  /* ฝั่งฟอร์มบาลานซ์กับแผงแดง (ลูกค้าขอ) — การ์ดสูงเท่าแผงแดงอยู่แล้ว (grid stretch)
     ให้ฟอร์มกินความสูงที่เหลือ และช่องรายละเอียด (textarea) ยืดเต็มช่องว่าง ปุ่มส่งจึงชิดล่างตรงแนวเดียวกับแผงซ้าย */
  .gc-contact .contact-card {
    display: flex;
    flex-direction: column;
  }

  .gc-contact .contact-card .contact-form {
    display: flex;
    flex: 1;
    flex-direction: column;
  }

  .gc-contact .contact-card .form-field:has(textarea) {
    flex: 1;
  }

  .gc-contact .contact-card .form-field textarea {
    flex: 1;
    min-height: 140px;
    resize: none;
  }
}

/* หัวข้อฟอร์มใหญ่ขึ้นให้เข้าชุดกับหัวข้อฝั่งแผงแดง */
.gc-contact .contact-card__title {
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.2;
}


/* ---------- FOOTER ของแบรนด์ (components/footer-golden-coins*.html) ----------
   พื้นน้ำตาล Pantone 477 C #623C2C (ลูกค้าขอ) ตัวอักษรขาว / ลิงก์ชี้แล้วเป็นแดง 185 C — สีใน CI ล้วน
   โครงเรียบสามช่อง แทนแบบสี่คอลัมน์ของเว็บหลักที่แน่นและมีหัวข้อสีจมพื้น (ลูกค้าบอกว่าไม่สวย) */
body.gc-page .site-footer {
  padding-block: var(--space-64) var(--space-24);
  background-color: #623C2C;
  color: var(--color-white);
}

.gc-footer__top {
  display: grid;
  gap: var(--space-40);
  padding-bottom: var(--space-40);
  border-bottom: 1px solid rgb(255 255 255 / 0.2);
}

.gc-footer__logo {
  display: block;
  width: auto;
  height: 96px;
}

.gc-footer__nav ul {
  display: grid;
  gap: var(--space-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* เมนูในฟุตเตอร์น้ำหนัก Medium (ลูกค้าขอ) — เบากว่าลิงก์ติดต่อฝั่งขวาที่เป็น Semibold */
body.gc-page .site-footer .gc-footer__nav a {
  font-weight: var(--fw-medium);
}

body.gc-page .site-footer a {
  color: var(--color-white);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  transition: opacity var(--transition-base), color var(--transition-base);
}

/* ชี้แล้วไม่ขีดเส้นใต้ (ลูกค้าขอ) — จางลงเล็กน้อยแทน (แดงบนน้ำตาลอ่านยาก จึงไม่เปลี่ยนสี) */
body.gc-page .site-footer a:hover {
  color: var(--color-white);
  text-decoration: none;
  opacity: 0.7;
}

/* หัวข้อคอลัมน์ในฟุตเตอร์แบรนด์ (MENU / CONTACT US) — ยืมโครงจาก .footer__heading ของเว็บหลัก
   ต้องเขียนทับสีเอง: หน้านี้ remap --color-golden-yellow เป็นน้ำตาล #623C2C ตาม CI
   ซึ่งเป็นสีพื้นของฟุตเตอร์พอดี ถ้าใช้ตัวแปรตรง ๆ หัวข้อจะจมหายไปกับพื้น
   ลูกค้าขอให้เป็นสีทองชุดเดียวกับฟุตเตอร์เว็บหลัก จึงอ้างค่าจริงของ --color-golden-yellow ที่ variables.css
   (เขียนเป็นค่าตรงเพราะตัวแปรถูกทับไปแล้วในสโคปนี้) — ทอง #FFB653 บนน้ำตาล #623C2C ได้คอนทราสต์ 5.5:1 ผ่าน WCAG AA */
body.gc-page .site-footer .footer__heading {
  color: #FFB653;
}

/* คอลัมน์ติดต่อเป็น flex ที่มี gap 12px อยู่แล้ว จึงลด margin ล่างเหลือ 4px ให้รวมเป็น 16px เท่าคอลัมน์เมนู */
.gc-footer__contact .footer__heading {
  margin-bottom: var(--space-4);
}

.gc-footer__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-12);
}

/* ร้านออนไลน์เป็นไอคอน Shopee กับ Lazada (ลูกค้าขอเพิ่ม Lazada 06/10/26) — ใช้สไตล์ไอคอนโซเชียลของฟุตเตอร์เว็บหลัก (.footer__social ใน components.css)
   ตัวแปรนี้ถูกใช้ใน components.css (assets/css/) path จึงนับจากไฟล์นั้น */
.footer__social-link--shopee {
  --social-icon: url('../icons/shopee.svg');
}

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

.gc-footer__contact .footer__social {
  /* กรอบกด 40px แต่ตัวไอคอน 24px อยู่กลาง — ขยับเข้าซ้ายให้ตัวไอคอนตรงแนวกับตัวอักษรด้านบน */
  margin: var(--space-4) 0 0 -8px;
}

.gc-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-8) var(--space-24);
  padding-top: var(--space-24);
  color: var(--color-white);
  font-size: var(--fs-small);
}

@media (min-width: 768px) {
  /* ช่องแบรนด์เหลือแค่โลโก้ (เอาประโยคใต้โลโก้ออกแล้ว) จึงแบ่งความกว้างให้ช่องติดต่อมากขึ้น
     ไอคอนเจ็ดตัว (รวม Lazada ที่เพิ่มมา) จะได้เรียงแถวเดียว ไม่ตกบรรทัด */
  .gc-footer__top {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.3fr);
    align-items: start;
  }
}

/* ---------- แถบเมนูตอน hero ยังเป็นพื้นแดง ----------
   ฉากเปิดเป็นภาพสินค้าบนพื้นแดง ปุ่ม CTA ซึ่งเป็นแดง #E40032 เหมือนกันจะจมหายไปกับพื้น
   golden-coins.js ใส่คลาสนี้ที่ <body> ระหว่างที่ภาพแดงยังเด่น แล้วถอดออกเมื่อครอสเฟดไปภาพอาหาร
   (จำกัดเฉพาะตอนแถบยังใส — พอเลื่อนจนแถบได้พื้นขาว ปุ่มแดงอ่านออกตามปกติ) */
body.is-hero-red .site-header:not(.is-scrolled) .btn--primary {
  background-color: var(--color-white);
  border-color: var(--color-white);
  color: #E40032;
}

body.is-hero-red .site-header:not(.is-scrolled) .btn--primary:hover {
  background-color: var(--color-white);
  color: #B3002A;
}