/*
  style.css
  สไตล์หลักของเว็บไซต์ AUA CHEMICAL: reset พื้นฐาน, navbar, footer
  ค่าดีไซน์ทั้งหมด (สี ฟอนต์ radius เงา ระยะห่าง) เรียกใช้จาก variables.css เท่านั้น
*/

/* ---------- Reset พื้นฐาน ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: var(--line-height-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: var(--line-height-tight);
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
  display: block;
}

button {
  font-family: var(--font-body);
  cursor: pointer;
  border: none;
  background: none;
}

/* ---------- โครงเนื้อหากลางหน้า (ใช้ร่วมกันทุกหน้า) ---------- */
.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--spacing-sm);
}

/* ซ่อนองค์ประกอบจากสายตาแต่ยังให้ screen reader และ search engine อ่านได้ (ใช้กับ h1 หน้าสินค้า)
   ไม่ใช้ display:none เพราะจะทำให้ถูกข้ามจากการอ่านเนื้อหา */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* เว้นที่ด้านบนของเนื้อหาแต่ละหน้า เพราะ navbar เป็น fixed */
main {
  padding-top: var(--navbar-height);
  min-height: 60vh;
}

/* ---------- ปุ่มมาตรฐาน ---------- */
/* ขนาดกระชับ ไม่เทอะทะ: hover เปลี่ยนสี + ยกตัวขึ้นนิดเดียว ให้รู้สึกตอบสนองแต่ไม่โอเวอร์ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2xs);
  padding: 0.6rem 1.25rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius-button);
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--letter-spacing-wide);
  white-space: nowrap; /* กันข้อความในปุ่มตกบรรทัด เช่น "ดูรายละเอียดสินค้า" ในการ์ดสินค้า */
  transition: background-color var(--transition-fast), color var(--transition-fast),
    border-color var(--transition-fast), transform var(--transition-fast);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn-line {
  background-color: var(--color-line);
  color: var(--color-text-invert);
}

.btn-line:hover {
  background-color: var(--color-line-dark);
}

/* ปุ่มหลัก: พื้นแดง ตัวอักษรขาว ใช้กับ call-to-action สำคัญ */
.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-text-invert);
}

.btn-primary:hover {
  background-color: var(--color-primary-dark);
}

/* ปุ่มรอง (secondary): ใช้กับ action ที่สำคัญรองลงมา เช่น "ดูรายละเอียดสินค้า" ในการ์ด
   ปกติพื้นอ่อน ขอบ+ตัวอักษรแดง เบากว่าปุ่มหลัก ไม่แย่งสายตา พอ hover ค่อยเปลี่ยนเป็นพื้นแดงเต็มเหมือนปุ่มหลัก */
.btn-secondary {
  background-color: var(--color-bg);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn-secondary:hover {
  background-color: var(--color-primary);
  color: var(--color-text-invert);
}

/* ปุ่มขอบขาวโปร่งใส ใช้บนพื้นหลังเข้ม/ภาพ เช่นใน hero */
.btn-outline-invert {
  background-color: transparent;
  border-color: var(--color-text-invert);
  color: var(--color-text-invert);
}

.btn-outline-invert:hover {
  background-color: var(--color-text-invert);
  color: var(--color-dark);
}

/* ปุ่มแบบเต็มความกว้าง ใช้กับปุ่มท้ายการ์ดสินค้า */
.btn-block {
  width: 100%;
}

/* =====================================================
   Navbar
   ===================================================== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--navbar-height);
  background-color: var(--color-dark);
  box-shadow: var(--shadow-navbar);
}

.navbar-inner {
  max-width: var(--container-max-width);
  margin-inline: auto;
  height: 100%;
  padding-inline: var(--spacing-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* ช่องไฟยืดหยุ่นตามความกว้างจอ (fluid): จอแคบบีบเข้า จอกว้างคลายออก ไม่ให้ของเบียดตกขอบ */
  gap: clamp(var(--spacing-xs), 2vw, var(--spacing-md));
}

/* โลโก้และชื่อแบรนด์: จัดวางแนวตั้ง โลโก้อยู่บน ชื่อบริษัทอยู่ใต้ */
.navbar-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex-shrink: 0; /* โลโก้ห้ามหด แม้จอแคบ (กันโลโก้บิด/ข้อความล้น) */
  font-family: var(--font-heading);
  color: var(--color-text-invert);
  white-space: nowrap;
  line-height: 1.1;
}

/* ขนาดโลโก้: กะให้พอดีกับความสูง navbar โดยเหลือที่ให้ข้อความด้านล่าง (ค่าอยู่ใน variables.css)
   ใช้ height + width:auto รักษาสัดส่วนเดิมของภาพ ไม่ให้ยืดบิดเบี้ยว */
.navbar-brand-logo {
  height: var(--logo-navbar-height);
  width: auto;
}

/* ข้อความชื่อบริษัทใต้โลโก้: ตัวเล็ก สีเทาอ่อน ไม่เด่นเท่าโลโก้ */
.navbar-brand-text {
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--color-text-invert-muted);
  letter-spacing: 0.02em;
}

/* เมนูกลาง */
.navbar-menu {
  display: flex;
  align-items: center;
  /* ช่องไฟเมนูยืดหยุ่นตามจอ กันเมนูเบียดกันบนแท็บเล็ตแคบ */
  gap: clamp(var(--spacing-xs), 1.5vw, var(--spacing-md));
  flex: 1;
  justify-content: center;
}

.navbar-menu a {
  color: var(--color-text-invert);
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: 400;
  padding-block: 0.4rem;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.navbar-menu a:hover {
  color: var(--color-primary);
}

/* เมนูที่กำลังใช้งานอยู่ (active) เป็นสีแดง */
.navbar-menu a.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* ฝั่งขวา: ปุ่มค้นหา + ปุ่ม LINE + hamburger */
.navbar-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0; /* กลุ่มปุ่มฝั่งขวาห้ามหด กัน hamburger/LINE ถูกเบียดตกขอบบนจอแคบ */
  /* ช่องไฟยืดหยุ่น: จอแคบบีบเข้า จอกว้างคลายออก */
  gap: clamp(var(--spacing-xs), 1.2vw, var(--spacing-sm));
}

/* ---------- ปุ่มไอคอนค้นหา (toggle): กดเพื่อเปิด/ปิดแผงค้นหา — แทนช่องค้นหาเต็มแบบเดิม ไม่กินพื้นที่ navbar ---------- */
.navbar-search-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--navbar-search-toggle-size);
  height: var(--navbar-search-toggle-size);
  border-radius: var(--radius-round);
  color: var(--navbar-search-toggle-color);
  font-size: var(--font-size-lg);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.navbar-search-toggle:hover {
  color: var(--navbar-search-toggle-hover);
  background-color: var(--navbar-search-toggle-hover-bg);
}

/* ปุ่มตอนแผงค้นหาเปิดอยู่ (aria-expanded=true): ไอคอนแดงแบรนด์ + พื้นวงกลมจางๆ บอกสถานะ */
.navbar-search-toggle[aria-expanded="true"] {
  color: var(--navbar-search-toggle-hover);
  background-color: var(--navbar-search-toggle-hover-bg);
}

/* ---------- แผงค้นหา: เด้ง/สไลด์ลงมาใต้ navbar เต็มความกว้าง (ใช้ร่วม desktop + mobile) ----------
   position: absolute เทียบกับ .navbar (fixed) → top:100% = ใต้ navbar พอดี ลอยทับเนื้อหาโดยไม่ดันหน้า
   ปิดอยู่: จาง + เลื่อนขึ้นเล็กน้อย + visibility hidden (ถอดออกจากลำดับ tab ของคีย์บอร์ด)
   เปิดอยู่ (.is-open): ปรากฏเต็ม เลื่อนลงเข้าที่ */
.navbar-search-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--navbar-search-panel-bg);
  box-shadow: var(--navbar-search-panel-shadow);
  border-top: 1px solid var(--color-border-dark);
  padding-block: var(--navbar-search-panel-padding-y);
  opacity: 0;
  visibility: hidden;
  transform: translateY(var(--navbar-search-panel-offset));
  transition: opacity var(--navbar-search-panel-transition),
    transform var(--navbar-search-panel-transition),
    visibility var(--navbar-search-panel-transition);
}

.navbar-search-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* กล่องเนื้อหาในแผง (จัดกลางตาม container) — เรียงแนวตั้ง: แถวช่องค้นหา แล้วตามด้วย chips */
.navbar-search-panel-inner {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

/* แถวช่องค้นหา: ช่องกรอก (พื้นขาว) + ปุ่มปิด (x) */
.navbar-search-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

/* ช่องค้นหาพื้นขาว: ไอคอนแว่นขยาย + ช่องกรอก + ปุ่มค้นหา รวมเป็นกล่องเดียว
   ค่าสี/ขนาด/เงา/ขอบ อยู่ใน variables.css (ปรับได้ที่เดียว) */
.navbar-search {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0; /* กันช่องกรอกดันแถวให้ล้นบนจอแคบ */
  max-width: var(--navbar-search-max-width); /* จอกว้างไม่ยืดจนเวอร์ จอเล็กหดเต็มความกว้างเอง */
  height: var(--navbar-search-height);
  background-color: var(--navbar-search-bg);
  border: 1px solid var(--navbar-search-border);
  border-radius: var(--navbar-search-radius);
  box-shadow: var(--navbar-search-shadow);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* โฟกัสอยู่ในช่อง: ไฮไลต์ขอบ + วงแหวนสีแบรนด์จางๆ บอกว่ากำลังพิมพ์อยู่ (transition นุ่ม) */
.navbar-search:focus-within {
  border-color: var(--color-primary);
  box-shadow: var(--navbar-search-focus-ring);
}

/* ไอคอนแว่นขยายนำหน้าในช่อง (ตกแต่ง บอกว่าเป็นช่องค้นหา) */
.navbar-search-lead {
  padding-left: var(--navbar-search-padding-x);
  color: var(--navbar-search-icon-color);
  font-size: var(--font-size-lg);
  display: flex;
  align-items: center;
}

.navbar-search-input {
  flex: 1;
  width: 100%;
  min-width: 0;
  border: none;
  background-color: transparent;
  color: var(--navbar-search-text);
  font-family: var(--font-body);
  font-size: var(--navbar-search-font-size);
  padding-inline: var(--navbar-search-padding-x);
}

.navbar-search-input::placeholder {
  color: var(--navbar-search-placeholder);
}

.navbar-search-input:focus {
  outline: none;
}

/* ปุ่มค้นหา (submit) ในช่องขาว: ลูกศรสีแบรนด์ */
.navbar-search-btn {
  color: var(--navbar-search-icon-color);
  font-size: var(--font-size-xl);
  display: flex;
  align-items: center;
  align-self: stretch;
  padding-inline: var(--navbar-search-padding-x);
  border-radius: 0 var(--navbar-search-radius) var(--navbar-search-radius) 0;
  transition: color var(--transition-fast);
}

.navbar-search-btn:hover {
  color: var(--navbar-search-icon-hover);
}

/* ปุ่มปิดแผงค้นหา (x) อยู่บนพื้นแผงดำ (นอกกล่องขาว) */
.navbar-search-close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--navbar-search-toggle-size);
  height: var(--navbar-search-toggle-size);
  border-radius: var(--radius-round);
  color: var(--color-text-invert-muted);
  font-size: var(--font-size-base);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.navbar-search-close:hover {
  color: var(--color-text-invert);
  background-color: var(--navbar-search-toggle-hover-bg);
}

/* ---------- chips คำค้นแนะนำใต้ช่องค้นหา (สร้างจาก config.js โดย main.js) ---------- */
.navbar-search-suggests {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-xs) var(--spacing-sm);
}

.navbar-search-suggests-label {
  color: var(--color-text-invert-muted);
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wide);
}

.navbar-search-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}

/* chip 1 คำค้น: pill โปร่งบนแผงดำ hover = พื้นแดงแบรนด์ + ยกตัวขึ้นนิด */
.search-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.85rem;
  border-radius: var(--search-chip-radius);
  background-color: var(--search-chip-bg);
  border: 1px solid var(--search-chip-border);
  color: var(--search-chip-color);
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  transition: background-color var(--transition-fast), border-color var(--transition-fast),
    color var(--transition-fast), transform var(--transition-fast);
}

.search-chip:hover {
  background-color: var(--search-chip-bg-hover);
  border-color: var(--search-chip-bg-hover);
  color: var(--color-text-invert);
  transform: translateY(-1px);
}

/* เคารพผู้ใช้ที่ตั้งค่าลดการเคลื่อนไหว: ปิด transition/transform ของแผงค้นหาและ chips */
@media (prefers-reduced-motion: reduce) {
  .navbar-search-panel {
    transition: opacity var(--transition-fast), visibility var(--transition-fast);
    transform: none;
  }

  .search-chip:hover {
    transform: none;
  }
}

/* ปุ่ม hamburger สำหรับมือถือ (ซ่อนไว้บนจอใหญ่ ไปเปิดใน responsive.css) */
.navbar-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 0.4rem;
}

.navbar-toggle span {
  width: 24px;
  height: 2px;
  background-color: var(--color-text-invert);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

/* สถานะเมนูเปิดบนมือถือ: กากบาท */
.navbar-toggle.is-active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.navbar-toggle.is-active span:nth-child(2) {
  opacity: 0;
}

.navbar-toggle.is-active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* =====================================================
   Footer
   ===================================================== */
.footer {
  background-color: var(--color-dark);
  color: var(--color-text-invert);
  padding-block: var(--spacing-lg) var(--spacing-sm);
}

.footer-grid {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--spacing-sm);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-lg);
}

.footer-heading {
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: 500;
  margin-bottom: var(--spacing-sm);
  color: var(--color-text-invert);
}

/* คอลัมน์ที่ 1: โลโก้และสโลแกน */
.footer-brand {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-xs);
}

/* โลโก้ footer: ใหญ่ขึ้นให้เด่นและเติมพื้นที่คอลัมน์ให้สมดุล (ค่าอยู่ใน variables.css)
   height + width:auto รักษาสัดส่วนเดิม ไม่ยืดบิดเบี้ยว */
.footer-brand img {
  height: var(--logo-footer-height);
  width: auto;
}

.footer-brand-name {
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 1.5;
}

.footer-slogan {
  font-size: var(--font-size-xs);
  color: var(--color-footer-text);
  line-height: var(--line-height-body);
  margin-top: var(--spacing-xs);
}

/* คอลัมน์ที่ 2: ติดต่อเรา */
.footer-contact li {
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-body);
}

/* ลิงก์ข้อมูลติดต่อ (โทร/อีเมล/แผนที่): ไอคอน+ข้อความอยู่ในลิงก์เดียว คลิกที่ไอคอนหรือข้อความก็ได้
   ใช้ flex เพื่อวางไอคอนหน้าข้อความเหมือนเดิม + hover เปลี่ยนสีให้รู้ว่าคลิกได้แบบ smooth */
.footer-contact-link {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  color: var(--color-footer-text);
  transition: color var(--transition-fast);
}

.footer-contact-link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.footer-contact li i {
  color: var(--color-primary);
  margin-top: 0.2rem;
  flex-shrink: 0;
}

/* คอลัมน์ที่ 3: ลิงก์เกี่ยวกับเรา */
.footer-links li {
  margin-bottom: var(--spacing-sm);
}

.footer-links a {
  font-size: var(--font-size-xs);
  line-height: 1.6;
  color: var(--color-footer-text);
  transition: color var(--transition-fast);
}

.footer-links a:hover {
  color: var(--color-primary);
}

/* คอลัมน์ที่ 4: ติดตามเรา (โซเชียล) */
.footer-social {
  display: flex;
  gap: var(--social-icon-gap);
}

/* วงกลมไอคอน social: ขนาด/ไอคอนดึงจาก variables — เป็น touch target แตะง่ายบนมือถือ */
.footer-social a {
  width: var(--social-icon-circle-size);
  height: var(--social-icon-circle-size);
  border-radius: var(--radius-round);
  background-color: var(--color-dark-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--social-icon-size);
  color: var(--color-text-invert);
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

/* hover: ยกขึ้นเล็กน้อยให้ดูมีชีวิต + เปลี่ยนวงกลมเป็นสีของแต่ละแพลตฟอร์ม (ตัวไอคอนคงสีขาวไว้ให้ตัดกับพื้นสีแบรนด์) */
.footer-social a:hover {
  transform: translateY(-3px);
}

.footer-social a.js-facebook:hover {
  background-color: var(--color-facebook);
}

.footer-social a.js-line:hover {
  background-color: var(--color-line);
}

.footer-social a.js-youtube:hover {
  background-color: var(--color-youtube);
}

/* เส้นแบ่งและข้อความลิขสิทธิ์ */
.footer-bottom {
  border-top: 1px solid var(--color-border-dark);
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-sm);
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--color-footer-muted);
}

/* =====================================================
   โครงร่างส่วนต่างๆ ของหน้าหลัก (section wrapper ใช้ร่วมกันทุก section)
   ===================================================== */
.section {
  padding-block: var(--spacing-xl);
}

/* สลับพื้นหลังเพื่อแบ่งจังหวะแต่ละ section โดยไม่ต้องใช้เส้นขอบหรือเงา */
.section-alt {
  background-color: var(--color-bg-alt);
}

.section-header {
  text-align: center;
  margin-bottom: var(--spacing-lg);
}

.section-title {
  position: relative;
  display: inline-block;
  font-size: var(--font-size-xl);
  color: var(--color-text);
  padding-bottom: var(--spacing-xs);
}

/* ขีดเส้นใต้หัวข้อสั้นๆ สีแดงแบรนด์ แทนการใช้เงาหรือ gradient ตกแต่ง */
.section-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 3px;
  background-color: var(--color-primary);
}

/* =====================================================
   กรอบรูปภาพ placeholder ใช้แทนรูปจริงที่ยังไม่ได้ใส่
   ถ้าไฟล์รูปยังไม่มี ไอคอนพื้นหลังจะโชว์แทน พอมีรูปจริง <img> จะซ้อนทับให้อัตโนมัติ
   ===================================================== */
.thumb-placeholder {
  position: relative;
  overflow: hidden;
  background-color: var(--color-bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ไอคอน placeholder: ใช้สีแบรนด์เข้มพอให้เห็นชัด (ค่าอยู่ใน variables.css) แทนสีเทาจางเดิม
   จุดที่ไม่มีรูปจริง (หมวดหมู่/บทความ/avatar รีวิว) จะเห็นไอคอนนี้เป็นดีไซน์ที่ตั้งใจ ไม่ใช่กล่องเปล่า */
.thumb-placeholder i {
  font-size: var(--placeholder-icon-size);
  color: var(--placeholder-icon-color);
}

.thumb-placeholder img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =====================================================
   Hero
   ===================================================== */
/* ภาพ Hero เป็น background-image: ใช้ cover ให้เต็มกว้างไม่ยืด/บิดเบี้ยว
   และคุมจุดโฟกัสการครอปด้วย background-position (เทียบเท่า object-position ของ <img>)
   ยึด "มุมบนขวา" ไว้เสมอ เพื่อไม่ให้โลโก้ลายน้ำอีกาดำ (มุมบนขวาของภาพ) ถูกครอปหายในทุกจอ */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--hero-height);
  color: var(--color-text-invert);
  background: var(--color-dark) url('../images/hero/hero-spray.png') var(--hero-image-position) / cover no-repeat;
}

/* ทับภาพพื้นหลังด้วยไล่สีเข้มบางๆ ให้ตัวอักษรอ่านชัดเจน ไม่ใช่ลูกเล่นตกแต่ง */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--color-overlay-start), var(--color-overlay-end));
}

/* กล่องข้อความ Hero: จำกัดความกว้าง + เว้นระยะฝั่งขวา กันข้อความยาวไปทับโซนโลโก้มุมบนขวา */
.hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--hero-content-max-width);
  padding-right: var(--hero-content-safe-right);
}

.hero-title {
  font-size: var(--font-size-xxl);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-tight);
  margin-bottom: var(--spacing-md);
}

.hero-subtitle {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-body);
  color: var(--color-text-invert-muted);
  margin-bottom: var(--spacing-lg);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

/* =====================================================
   รีวิวจากผู้ใช้งานจริง (การ์ดรูปเกษตรกร + ดาวทอง + carousel)
   ===================================================== */
/* ข้อความสำรองตอนโหลดข้อมูลรีวิวจาก JSON ไม่สำเร็จ */
.reviews-empty {
  width: 100%;
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* การ์ดรีวิว: เรียงแนวตั้ง (รูปบน + เนื้อหาล่าง) overflow hidden ให้รูปโค้งตามมุมการ์ด
   อยู่ในแถบเลื่อน flex จึงถูกยืดสูงเท่ากันทุกใบอัตโนมัติ */
.review-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

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

/* รูปเกษตรกร: สัดส่วน 4:3 (thumb-placeholder จัดการ object-fit: cover + ไอคอนคน placeholder ตอนไม่มีรูป) */
.review-photo {
  width: 100%;
  aspect-ratio: var(--review-photo-ratio);
}

/* ยึดส่วนบนของรูปตอนครอป (object-fit: cover) กันหน้าเกษตรกรที่มักอยู่ครึ่งบนโดนตัดหัว
   override เฉพาะ <img> ในการ์ดรีวิว (กฎนี้อยู่หลัง .thumb-placeholder img จึงชนะด้วย source order) ไม่กระทบรูปสินค้า/บทความ/hero */
.review-photo img {
  object-position: var(--review-img-position);
}

/* ป้ายพื้นที่มุมล่างขวาของรูป: หมุด + จ.จังหวัด (พื้นดำโปร่ง ตัวอักษรขาว) */
.review-photo-badge {
  position: absolute;
  right: var(--review-badge-offset);
  bottom: var(--review-badge-offset);
  z-index: 1; /* ทับบน <img> ที่ absolute inset:0 */
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: var(--review-badge-padding);
  border-radius: var(--radius-button);
  background-color: var(--review-badge-bg);
  color: var(--review-badge-text);
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  line-height: 1.25;
}

/* ไอคอนหมุดในป้าย: override .thumb-placeholder i (ที่ตั้งสีแบรนด์+ขนาดใหญ่ไว้) ให้เล็ก+ขาวพอดีป้าย */
.review-photo-badge i {
  font-size: 0.85em;
  color: var(--review-badge-text);
}

/* เนื้อหาการ์ด: flex:1 กินพื้นที่ที่เหลือ ให้บล็อกระบุตัวตน (review-identity) ถูกดันชิดล่างเสมอ
   padding + gap ปรับความโปร่งจาก variables.css (เนื้อหามีที่หายใจ อ่านเป็นจังหวะ) */
.review-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--review-body-gap);
  padding: var(--review-card-padding);
}

/* ดาวให้คะแนน: แสดงผลอย่างเดียว (read-only) สีทองตาม rating */
.review-stars {
  display: flex;
  gap: 0.15rem;
}

.review-stars i {
  font-size: 1rem;
  color: var(--color-star-empty);
}

.review-stars i.is-filled {
  color: var(--color-star);
}

.review-text {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  line-height: var(--line-height-body);
}

/* ระบุตัวตนแบบไม่มีชื่อ: ดันชิดล่างสุดของการ์ด ให้ทุกใบเรียงตรงแนวเดียวกัน */
.review-identity {
  margin-top: auto;
  padding-top: var(--spacing-xs);
}

.review-name {
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text);
}

.review-location {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* แถบเลื่อนรีวิว: มีช่องไฟระหว่างการ์ด (gap) ให้โปร่ง — สำคัญ เพราะ track นี้ไม่ได้ใช้คลาส .product-grid จึงต้องตั้ง gap เอง
   ระยะเพิ่มด้านบนกันหัวข้อชิด/ทับการ์ด (--review-header-gap) */
.reviews-carousel {
  margin-top: var(--review-header-gap);
}

.reviews-track {
  gap: var(--review-carousel-gap);
}

/* การ์ดรีวิวในแถบเลื่อน (carousel): desktop โชว์ 3 ใบต่อครั้ง (2 ช่องไฟ) — tablet/mobile ปรับใน responsive.css
   สูตรความกว้างหักช่องไฟด้วยตัวแปร --review-carousel-gap ตัวเดียวกับ gap ของแทร็ก ให้การ์ดพอดี 3 ใบเป๊ะ ไม่มีที่ว่างเหลือ
   ใช้ selector คู่ .product-carousel-track.reviews-track เพิ่ม specificity ให้ชนะกฎพื้นฐาน
   .product-carousel-track .skeleton-card (ที่กว้าง /4 ของสินค้า) เพราะ review skeleton ก็มีคลาส skeleton-card ด้วย */
.product-carousel-track.reviews-track .review-card,
.product-carousel-track.reviews-track .review-skeleton {
  flex: 0 0 calc((100% - var(--review-carousel-gap) * 2) / 3);
  scroll-snap-align: start;
}

/* ช่องรูปในโครงเทา (skeleton) ของรีวิว: สัดส่วนเท่ารูปจริง (4:3) */
.review-skeleton-photo {
  width: 100%;
  aspect-ratio: var(--review-photo-ratio);
  background-color: var(--skeleton-base);
}

/* =====================================================
   ทำไมถึงต้องเลือกเรา
   ===================================================== */
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-md);
}

.why-item {
  text-align: center;
  padding: var(--spacing-md);
}

/* ไอคอนทั้ง 4 ใช้สีเขียวเดียวกันหมด ให้ดูเป็นชุดเดียวกัน อันหนึ่งอันเดียวกัน */
.why-icon {
  font-size: 2.2rem;
  margin-bottom: var(--spacing-sm);
  color: var(--color-secondary);
}

.why-title {
  font-size: var(--font-size-base);
  margin-bottom: var(--spacing-xs);
  color: var(--color-text);
}

.why-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* =====================================================
   หมวดหมู่สินค้า
   ===================================================== */
.category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-md);
}

.category-card {
  display: block;
  border-radius: var(--radius-card);
  overflow: hidden;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

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

.category-thumb {
  aspect-ratio: 4 / 3;
}

.category-thumb i {
  font-size: 2.4rem;
}

.category-name {
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: 500;
  text-align: center;
  color: var(--color-text);
  padding: var(--spacing-sm);
}

/* =====================================================
   สินค้าแนะนำ
   ===================================================== */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-md);
}

.product-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

/* hover ยกการ์ดขึ้นเล็กน้อย + เงานุ่มขึ้น (ตัวเลขเท่ากับการ์ดชนิดอื่นทั้งเว็บ ให้ความรู้สึกสม่ำเสมอ) */
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
}

/* กรอบรูปในการ์ด: สัดส่วนคงที่จาก variables (การ์ดทุกใบสูงเท่ากัน เรียงเป็นระเบียบ)
   พื้นขาวสะอาด เผื่อรูปสินค้ามีพื้นหลังโปร่ง จะได้ไม่มีพื้นเทาแปลกๆ */
.product-thumb {
  aspect-ratio: var(--card-image-ratio);
  background-color: var(--color-bg);
}

/* รูปสินค้าในการ์ดใช้ contain (แทน cover ของ .thumb-placeholder) ให้เห็นขวด/ซองเต็มชิ้นไม่ถูกครอป จัดกึ่งกลางกรอบทั้งแนวตั้ง-แนวนอน */
.product-thumb img {
  object-fit: contain;
}

.product-thumb i {
  font-size: 2.4rem;
}

/* กล่องเนื้อหาใต้รูป: รวมชื่อสินค้า+ปุ่มไว้ด้วยกัน มี gap คงที่กันชิดกัน
   ชื่อสินค้าเป็น flex:1 จึงดันปุ่มลงล่างเสมอ ทำให้ทุกการ์ดในแถวเดียวกันปุ่มอยู่แนวเดียวกัน */
.product-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
}

.product-name {
  flex: 1;
  font-size: var(--font-size-base);
  font-weight: 600;
  line-height: var(--line-height-tight);
  color: var(--color-text);
  text-align: center;
}

.product-card .btn {
  width: 100%;
}

/* ---------- แถบเลื่อนสินค้าแนะนำ (carousel) พร้อมปุ่มลูกศรซ้าย-ขวา ---------- */
.product-carousel {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

/* เมื่อผสมกับ .product-grid: เปลี่ยนจากกริดเป็นแถวเลื่อนแนวนอน แต่การ์ดยังหน้าตาเหมือนเดิม */
.product-carousel-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; /* ปัดลื่นบน iOS */
  scrollbar-width: none; /* ซ่อน scrollbar (Firefox) แต่ยังปัดเลื่อนได้ */
}

.product-carousel-track::-webkit-scrollbar {
  display: none; /* ซ่อน scrollbar (Chrome/Safari/Edge) */
}

/* การ์ดในแถบเลื่อน: การ์ดจริงและการ์ดโครงเทา (skeleton) ใช้ความกว้าง flex เท่ากัน ให้ layout ไม่กระตุกตอนสลับ */
.product-carousel-track .product-card,
.product-carousel-track .skeleton-card {
  flex: 0 0 calc((100% - var(--spacing-md) * 3) / 4);
  scroll-snap-align: start;
}

/* ปุ่มลูกศรเลื่อนสินค้า: วงกลมเรียบ ยืนอยู่ข้างแถวการ์ด ไม่ลอยทับการ์ด */
.carousel-btn {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-round);
  background-color: var(--color-bg);
  border: 1.5px solid var(--color-border);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow: var(--shadow-card);
  transition: background-color var(--transition-fast), color var(--transition-fast),
    border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

/* hover: เปลี่ยนเป็นพื้นแดงแบรนด์ + ยกตัวขึ้นเล็กน้อย + เงาเข้มขึ้น ให้ดูมีมิติ ตอบสนองการกด */
.carousel-btn:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-invert);
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

.carousel-btn:active {
  transform: translateY(0);
}

.carousel-btn:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

/* =====================================================
   เกร็ดความรู้
   ===================================================== */
/* หน้าเกร็ดความรู้: หัวข้อ + ข้อความนับจำนวนบทความ ให้กระชับเป็นกลุ่มเดียว
   (ลด margin-bottom ปกติของ .section-header ที่กว้างเกินสำหรับหน้านี้) */
.section-header-tight {
  margin-bottom: var(--articles-header-gap);
}

/* ข้อความนับจำนวนบทความ: เว้นระยะก่อนกริดบทความให้พอเหมาะ */
.articles-count {
  margin-bottom: var(--spacing-md);
}

.article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
}

.article-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

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

.article-thumb {
  aspect-ratio: 16 / 10;
}

.article-thumb i {
  font-size: 2.2rem;
}

/* เนื้อหาในการ์ด: เป็น flex คอลัมน์ที่ยืดเต็มความสูงการ์ด (การ์ดในแถวเดียวกันสูงเท่ากันจาก grid)
   เพื่อดันบล็อกล่าง (วันที่/ปุ่มอ่านเพิ่มเติม) ให้อยู่ระดับเดียวกันทุกใบ แม้ excerpt ยาวไม่เท่ากัน */
.article-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
}

/* ป้ายหมวดหมู่บทความ: หดพอดีความยาวข้อความ ไม่ยืดเต็มความกว้างการ์ด
   (align-self กันการ์ดที่เป็น flex column ยืด badge จาก align-items: stretch) */
.article-tag {
  display: inline-block;
  align-self: flex-start;
  width: fit-content;
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--color-secondary);
  background-color: var(--color-tag-bg);
  border-radius: var(--radius-input);
  padding: 0.2rem 0.6rem;
  margin-bottom: var(--spacing-xs);
}

.article-title {
  font-size: var(--font-size-base);
  color: var(--color-text);
  margin-bottom: var(--spacing-xs);
}

.article-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-body);
  margin-bottom: var(--spacing-sm);
}

/* บล็อกวันที่/ยอดวิว: margin-top auto ดันตัวเอง + ปุ่มอ่านเพิ่มเติมที่อยู่ถัดไปให้ชิดล่างสุดของการ์ด
   ระยะระหว่างกลุ่ม "วันที่" กับ "ยอดวิว" ใช้ตัวแปรร่วมกับหน้ารายละเอียด (--meta-group-gap) */
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2xs) var(--meta-group-gap);
  margin-top: auto;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-xs);
}

/* แต่ละกลุ่ม (ไอคอน+ข้อความ) จัดกึ่งกลางแนวตั้งพอดี + ช่องไฟไอคอน↔ข้อความสม่ำเสมอ
   white-space: nowrap กันไม่ให้ข้อความในกลุ่มเดียว (เช่น "6 ก.ค. 2569") แตกกลางคำบนการ์ดแคบ
   ถ้าที่ไม่พอ กลุ่ม "ยอดวิว" จะตกลงบรรทัดใหม่ทั้งกลุ่ม (จาก flex-wrap ด้านบน) แทนการแตกกลางคำ */
.article-meta span,
.article-detail-meta span {
  display: inline-flex;
  align-items: center;
  gap: var(--meta-icon-gap);
  white-space: nowrap;
}

.article-meta i {
  color: var(--color-primary);
}

.article-link {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-primary);
  transition: gap var(--transition-fast);
}

.article-link:hover {
  gap: 0.5rem;
}

/* ปุ่ม "ดูทั้งหมด" ใต้กริด (เช่น ดูบทความทั้งหมดในหน้าหลัก) จัดกึ่งกลาง เว้นระยะจากกริดด้านบน */
.section-cta {
  text-align: center;
  margin-top: var(--spacing-lg);
}

/* =====================================================
   แถบ LINE (ก่อน footer)
   แบ่ง 2 กลุ่มสมดุลซ้าย-ขวา: ซ้าย = ไอคอน+ข้อความ+ปุ่ม (ก้อนเดียว), ขวา = QR
   จำกัดความกว้างแถวไว้ไม่ให้เต็ม container ปกติ กันไม่ให้ช่องว่างตรงกลางโล่งเกินไป
   ===================================================== */
.line-banner {
  background-color: var(--color-line-banner-bg);
  padding-block: var(--spacing-md); /* ลดความสูงแถบลงให้กระชับ */
}

.line-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-lg);
  max-width: 860px; /* แคบกว่า container ปกติ (1200px) ให้ 2 กลุ่มซ้าย-ขวาอยู่ใกล้กัน ไม่โล่งตรงกลาง */
  margin-inline: auto;
}

/* กลุ่มซ้าย: ไอคอน + ข้อความ + ปุ่ม ชิดกันเป็นก้อนเดียว */
.line-banner-left {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex-shrink: 0;
}

/* กลุ่มย่อยไอคอน + ข้อความ (แยกจากปุ่ม เพื่อให้สลับเป็นแนวตั้งได้อิสระบนมือถือ) */
.line-banner-head {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-shrink: 0;
}

/* ไอคอน LINE ทรงสี่เหลี่ยมมุมมน พื้นเขียว LINE เหมือนโลโก้แอปจริง ขยายให้เด่นสะดุดตา */
.line-banner-icon-wrap {
  flex-shrink: 0;
  width: 76px;
  height: 76px;
  border-radius: var(--radius-card);
  background-color: var(--color-line);
  display: flex;
  align-items: center;
  justify-content: center;
}

.line-banner-icon-wrap i {
  font-size: 2.6rem;
  color: var(--color-text-invert);
}

.line-banner-text {
  text-align: left;
}

/* บรรทัดแรก: ข้อความนำ ตัวเล็กกว่า สีจางกว่าเล็กน้อย */
.line-banner-eyebrow {
  font-size: var(--font-size-base);
  color: var(--color-text-invert-muted);
}

/* บรรทัดสอง: ข้อความหลัก เด่นที่สุดในแถบ ใหญ่ หนา สีขาวชัดเจน */
.line-banner-title {
  font-family: var(--font-heading);
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-text-invert);
}

/* ปุ่มเพิ่มเพื่อน LINE ในแถบนี้: สลับสีเป็นพื้นขาว-ตัวอักษรเขียว LINE ให้เด่นตัดกับพื้นเขียวเข้มของแถบ */
.line-banner-btn {
  flex-shrink: 0;
  background-color: var(--color-text-invert);
  color: var(--color-line);
  font-weight: 600;
}

.line-banner-btn:hover {
  background-color: var(--color-bg-alt);
}

/* QR code: ขยายให้ใหญ่ชัด สแกนง่าย เป็นกลุ่มขวาที่ถ่วงน้ำหนักสมดุลกับกลุ่มซ้าย */
.line-banner-qr {
  flex-shrink: 0;
  width: 160px;
  height: 160px;
  border-radius: var(--radius-card);
  background-color: var(--color-text-invert);
}

.line-banner-qr i {
  font-size: 2.6rem;
}

/* =====================================================
   Breadcrumb (ใช้ร่วมหลายหน้า เช่น products.html)
   ===================================================== */
.breadcrumb {
  padding-block: var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

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

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

.breadcrumb-sep {
  font-size: 0.7em;
  margin-inline: var(--spacing-xs);
  color: var(--color-border);
}

.breadcrumb-current {
  color: var(--color-text);
  font-weight: 500;
}

/* =====================================================
   หน้าสินค้า (products.html): sidebar ตัวกรอง + กริดสินค้า
   ===================================================== */
.products-section {
  padding-block: var(--spacing-md) var(--spacing-xl);
}

.products-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  align-items: start;
  gap: var(--spacing-lg);
}

/* ---------- Sidebar ตัวกรอง ---------- */
/* ปุ่มยุบ/ขยาย sidebar: ซ่อนไว้บนจอใหญ่ ไปโชว์บนมือถือใน responsive.css */
.products-sidebar-toggle {
  display: none;
  align-items: center;
  width: 100%;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text);
}

.products-sidebar-toggle-icon {
  margin-left: auto;
  transition: transform var(--transition-fast);
}

.products-sidebar-toggle.is-open .products-sidebar-toggle-icon {
  transform: rotate(180deg);
}

.filter-box {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--spacing-md);
}

.filter-box + .filter-box {
  margin-top: var(--spacing-md);
}

.filter-box-title {
  font-size: var(--font-size-base);
  padding-bottom: var(--spacing-xs);
  margin-bottom: var(--spacing-xs);
  border-bottom: 1px solid var(--color-border);
}

.filter-list li + li {
  margin-top: 0.15rem;
}

/* ปุ่มกรองหมวดหมู่: เลือกได้ทีละหมวด หมวดที่ active เป็นพื้นแดง */
.filter-link {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.55rem var(--spacing-xs);
  border-radius: var(--radius-input);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.filter-link:hover {
  background-color: var(--color-bg-alt);
}

.filter-link.active {
  background-color: var(--color-primary);
  color: var(--color-text-invert);
  font-weight: 500;
}

.filter-checkbox-list li + li {
  margin-top: var(--spacing-2xs);
}

/* checkbox กรอง badge: เลือกได้หลายอันพร้อมกัน */
.filter-checkbox {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 0.3rem var(--spacing-xs);
  border-radius: var(--radius-input);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.filter-checkbox:hover {
  background-color: var(--color-bg-alt);
}

.filter-checkbox input[type='checkbox'] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

/* ---------- แถบบนสุด: จำนวนสินค้า + เรียงลำดับ ---------- */
.products-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.products-count {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.products-count strong {
  color: var(--color-text);
  font-weight: 600;
}

.products-sort {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.products-sort select {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  background-color: var(--color-bg);
  cursor: pointer;
}

/* ---------- กริดสินค้า: ใช้การ์ดชุดเดียวกับหน้าหลัก แค่ปรับจำนวนคอลัมน์เป็น 3 ---------- */
.products-grid {
  grid-template-columns: repeat(3, 1fr);
}

/* ป้าย badge มุมบนซ้ายของรูปสินค้า */
.product-badge {
  position: absolute;
  top: var(--spacing-sm);
  left: var(--spacing-sm);
  z-index: 1;
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-text-invert);
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-input);
}

.product-badge-new {
  background-color: var(--color-primary);
}

.product-badge-bestseller {
  background-color: var(--color-badge-gold);
}

/* ข้อความสถานะ (กำลังโหลด / ไม่พบข้อมูล) ของกริดสินค้าและบทความ ใช้สไตล์เดียวกัน */
.products-empty,
.articles-empty {
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  padding-block: var(--spacing-lg);
}

/* =====================================================
   หน้าโปรโมชั่น (promotion.html): กริดการ์ดโปร + badge สถานะอัตโนมัติ
   โครงการ์ดยึดแนวเดียวกับการ์ดบทความ (รูปบน + เนื้อหาล่าง สูงเท่ากันด้วย flex)
   ===================================================== */
.promo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--promo-grid-gap);
}

.promo-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

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

/* รูปโปร: สัดส่วนคงที่ (thumb-placeholder จัดการ object-fit: cover + ไอคอน placeholder ตอนไม่มีรูป) */
.promo-thumb {
  aspect-ratio: var(--promo-image-ratio);
}

.promo-thumb i {
  font-size: 2.4rem;
}

/* badge สถานะมุมบนซ้ายของรูป (คำนวณจากวันที่ใน promotions.js) */
.promo-status {
  position: absolute;
  top: var(--spacing-sm);
  left: var(--spacing-sm);
  z-index: 1; /* ทับบน <img> ที่ absolute inset:0 */
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-button);
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-invert);
}

.promo-status--active {
  background-color: var(--color-status-active); /* กำลังโปร = เขียว */
}

.promo-status--ending {
  background-color: var(--color-status-ending); /* ใกล้หมดเขต = ส้ม */
}

/* เนื้อหาการ์ด: flex column ให้ปุ่ม CTA (margin-top:auto) ถูกดันชิดล่าง การ์ดในแถวเดียวกันสูงเท่ากัน */
.promo-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
}

/* badge ประเภทโปร (แถม/ลดราคา/ของแถม) — ใช้สไตล์เดียวกับป้ายหมวดหมู่บทความ (หดพอดีข้อความ) */
.promo-type {
  align-self: flex-start;
  width: fit-content;
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-input);
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--color-secondary);
  background-color: var(--color-tag-bg);
}

.promo-title {
  font-size: var(--font-size-lg);
  color: var(--color-text);
}

.promo-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-body);
}

/* ระยะเวลาโปร (ไอคอนปฏิทิน + ช่วงวันที่ไทย) */
.promo-period {
  display: inline-flex;
  align-items: center;
  gap: var(--meta-icon-gap);
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.promo-period i {
  color: var(--color-primary);
}

/* สินค้าที่ร่วมรายการ: ป้ายลิงก์เล็ก ๆ ไปหน้ารายละเอียดสินค้า */
.promo-related {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
}

.promo-related-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.promo-related-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}

.promo-related-links a {
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size-xs);
  color: var(--color-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  padding: 0.2rem 0.65rem;
  transition: background-color var(--transition-fast), color var(--transition-fast),
    border-color var(--transition-fast);
}

.promo-related-links a:hover {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-text-invert);
}

/* ปุ่ม CTA LINE: ดันชิดล่างสุดของการ์ด (เว้นระยะจากเนื้อหาด้านบนด้วย margin-top:auto) */
.promo-cta {
  margin-top: auto;
}

/* empty state เมื่อไม่มีโปร active — ไม่ปล่อยหน้าว่าง แต่ชวนเพิ่มเพื่อน LINE */
.promo-empty {
  text-align: center;
  padding-block: var(--spacing-xl);
}

.promo-empty i {
  font-size: var(--font-size-xxl);
  color: var(--color-text-muted);
}

.promo-empty-title {
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  color: var(--color-text);
  margin-block: var(--spacing-sm) var(--spacing-xs);
}

.promo-empty-text {
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-md);
}

/* ช่องรูปในโครงเทา (skeleton) ของโปร: สัดส่วนเท่ารูปจริง (16:9) */
.skeleton-promo-thumb {
  width: 100%;
  aspect-ratio: var(--promo-image-ratio);
  background-color: var(--skeleton-base);
}

/* ---------- Pagination ---------- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-lg);
}

.pagination-btn {
  min-width: 40px;
  height: 40px;
  padding-inline: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  background-color: var(--color-bg);
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text);
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.pagination-btn:hover:not(:disabled):not(.is-active) {
  background-color: var(--color-bg-alt);
}

.pagination-btn.is-active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-invert);
}

.pagination-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.pagination-ellipsis {
  padding-inline: 0.25rem;
  color: var(--color-text-muted);
}

/* =====================================================
   หน้ารายละเอียดสินค้า (product-detail.html): ไฟล์เดียว อ่านข้อมูลตาม id จาก URL
   เนื้อหาทั้งหมดสร้างโดย js/product-detail.js
   ===================================================== */
.product-detail-section {
  padding-block: var(--spacing-md) var(--spacing-xl);
}

.product-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 440px) 1fr;
  gap: var(--spacing-lg);
  align-items: start;
}

/* ---------- คอลัมน์ซ้าย: รูปสินค้า (ตัด thumbnail gallery ออกถาวร - เหลือรูปหลักรูปเดียว) ----------
   คอลัมน์รูปเป็น sticky ลอยค้างตามขณะเลื่อนอ่านข้อมูลฝั่งขวาที่ยาวกว่า (บนมือถือปิด sticky ใน responsive.css) */
.product-gallery {
  position: sticky;
  top: var(--product-gallery-sticky-top);
  align-self: start;
}

/* กรอบรูปสินค้าหลัก: สัดส่วนแนวตั้ง 4:5 พื้นขาวสะอาด เผื่อรูปมีขอบโปร่ง */
.product-gallery-main {
  aspect-ratio: var(--product-image-ratio);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background-color: var(--color-bg);
}

.product-gallery-main i {
  font-size: 3rem;
}

/* รูปสินค้าหลักใช้ contain (แทน cover ของ .thumb-placeholder) ให้เห็นซองสินค้าเต็มใบไม่ถูกครอป จัดกึ่งกลางกรอบ */
.product-gallery-main img {
  object-fit: contain;
}

/* ---------- คอลัมน์ขวา: ข้อมูลสินค้า ----------
   แบ่งเป็น 3 กลุ่มใหญ่ให้สายตาพักได้ระหว่างอ่าน: header (badge+ชื่อ+สารสำคัญ) -> body (คุณสมบัติ/วิธีใช้/ขนาดบรรจุ) -> action (ปุ่ม LINE+ไอคอนความน่าเชื่อถือ)
   คั่นแต่ละกลุ่มด้วยเส้นบางๆ + spacing-lg ส่วนภายในกลุ่ม body ใช้ spacing-lg คั่นระหว่างหัวข้อย่อยเช่นกัน ให้จังหวะสม่ำเสมอทั้งคอลัมน์ */
.product-info-header {
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
}

.product-info-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--color-text-invert);
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-input);
  margin-bottom: var(--spacing-sm);
}

/* ไอคอนในป้าย: ย่อขนาดลงเล็กน้อยให้กลมกลืนกับตัวอักษร ไม่แย่งสายตา */
.product-info-badge i {
  font-size: 0.85em;
}

.product-info-badge.is-new {
  background-color: var(--color-primary);
}

.product-info-badge.is-bestseller {
  background-color: var(--color-badge-gold);
}

.product-detail-title {
  font-size: var(--font-size-xxl);
  line-height: var(--line-height-heading);
  color: var(--color-text);
  margin-bottom: var(--spacing-sm);
}

/* แถบ "สารสำคัญ": พื้นเทาอ่อน แยกจากเนื้อหาข้อความปกติ อ่านเจอง่าย เป็นบรรทัดสุดท้ายของ header จึงไม่ต้องเว้นด้านล่างเพิ่ม */
.product-info-active {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-input);
  padding: 0.5rem var(--spacing-sm);
}

.product-info-active i {
  color: var(--color-secondary);
}

.product-info-body {
  margin-top: var(--spacing-lg);
}

.product-info-block + .product-info-block {
  margin-top: var(--spacing-lg);
}

/* หัวข้อย่อย "คุณสมบัติและประโยชน์ / อัตราและวิธีการใช้งาน": ขยายให้เด่นกว่าเนื้อหา สแกนหาหัวข้อได้ไว */
.product-info-label {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--spacing-xs);
}

/* เนื้อหายาว: จำกัดความกว้างบรรทัดและเพิ่ม line-height ให้อ่านสบายตา (กลุ่มเป้าหมายคือเกษตรกร) */
.product-info-text {
  max-width: 62ch;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
}

.product-info-size {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text);
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-input);
  padding: 0.5rem var(--spacing-sm);
}

/* กลุ่มปฏิบัติการ: ปุ่ม LINE + ไอคอนความน่าเชื่อถือ ใช้ gap เดียวคุมระยะห่างภายในกลุ่มทั้งหมด */
.product-info-action {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--color-border);
}

/* ปุ่มเขียวใหญ่ "สอบถามสินค้า / ขอใบเสนอราคา": เต็มความกว้าง เด่นชัดกว่าปุ่มทั่วไป */
.product-cta {
  width: 100%;
  padding-block: 0.9rem;
  font-size: var(--font-size-base);
}

/* แถวไอคอนความน่าเชื่อถือ: กระจายให้เต็มความกว้าง สมดุลกันทั้ง 3 รายการ */
.product-trust-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--spacing-sm) var(--spacing-md);
}

.product-trust-item {
  display: flex;
  align-items: center;
  gap: var(--trust-item-gap);
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.product-trust-item i {
  color: var(--color-secondary);
  font-size: var(--trust-item-icon-size);
}

/* ---------- กรณีไม่พบสินค้าตาม id ที่ระบุใน URL ---------- */
.product-not-found {
  text-align: center;
  padding-block: var(--spacing-xl);
}

.product-not-found .product-info-text {
  margin-block: var(--spacing-sm) var(--spacing-md);
}

/* ============================================================
   ระบบ Loading
   - แบบ 1: Branded loader (overlay ฉากเปิดเว็บครั้งแรกของเซสชัน)
   - แบบ 2: Skeleton screen (การ์ดโครงเทาตอนโหลดข้อมูลสินค้า)
   อนิเมชั่นทุกตัวใช้ transform/opacity เท่านั้น (ลื่น ไม่กิน CPU)
   ============================================================ */

/* ---------- แบบ 1: Branded loader ---------- */
/* overlay เต็มจอ พื้นเข้ม จัดโลโก้ + ชื่อแบรนด์ + spinner ไว้กึ่งกลาง */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--loader-brand-gap);
  background-color: var(--loader-bg);
  opacity: 1;
  /* fade เฉพาะ opacity (ลื่น) */
  transition: opacity var(--loader-fade-duration) ease;
}

/* สถานะซ่อน: จางหายแล้วปล่อยคลิกทะลุไปยังเนื้อหาด้านล่าง (js/loader.js เติม class นี้เมื่อโหลดเสร็จ) */
.page-loader.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* เข้าเว็บซ้ำในเซสชันเดิม (สลับหน้า): ซ่อน loader ทันทีตั้งแต่ก่อน body render กันภาพกระพริบ
   js/loader.js เติม class 'loader-seen' ที่ <html> แบบ synchronous ใน <head> */
html.loader-seen .page-loader {
  display: none;
}

/* โลโก้อีกาดำ: กว้างตามตัวแปร สูง auto รักษาสัดส่วนเดิม + pulse เบาๆ (ขยาย-หดนุ่มนวล) */
.page-loader__logo {
  width: var(--loader-logo-width);
  height: auto;
  animation: loader-pulse var(--loader-pulse-duration) ease-in-out infinite;
}

/* ชื่อแบรนด์ใต้โลโก้ */
.page-loader__brand {
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  font-weight: 600;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--loader-brand-color);
}

/* spinner วงกลม: วงพื้นจาง+ เส้นบนสีแดงแบรนด์ หมุนวนลื่นไม่สะดุด */
.page-loader__spinner {
  width: var(--loader-spinner-size);
  height: var(--loader-spinner-size);
  border: var(--loader-spinner-thickness) solid var(--loader-spinner-track);
  border-top-color: var(--loader-spinner-color);
  border-radius: var(--radius-round);
  animation: loader-spin var(--loader-spin-duration) linear infinite;
}

/* pulse โลโก้: ขยายเล็กน้อยแล้วหดกลับ (ใช้ transform: scale ไม่กระทบ layout) */
@keyframes loader-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

/* หมุน spinner ครบรอบ */
@keyframes loader-spin {
  to { transform: rotate(360deg); }
}

/* ---------- แบบ 2: Skeleton screen ---------- */
/* การ์ดโครงเทา: เลียนโครงการ์ดสินค้าจริง (ช่องรูป + แถบชื่อ + แถบปุ่ม) ให้ layout ไม่กระตุกตอนสลับเป็นของจริง */
.skeleton-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background-color: var(--color-bg);
  overflow: hidden;
}

/* ช่องรูปในโครงเทา: สัดส่วนเท่ากรอบรูปการ์ดจริง (จากตัวแปรเดียวกัน) */
.skeleton-thumb {
  width: 100%;
  aspect-ratio: var(--card-image-ratio);
  background-color: var(--skeleton-base);
}

.skeleton-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
}

/* แถบเทาแทนข้อความ/ปุ่ม */
.skeleton-line {
  background-color: var(--skeleton-base);
  border-radius: var(--radius-input);
}

.skeleton-line--title {
  width: 80%;
  height: 1.1rem;
}

.skeleton-line--btn {
  width: 100%;
  height: 2.4rem;
  border-radius: var(--radius-button);
}

/* แถบเทาแทนบล็อกข้อความหลายบรรทัด (เช่น คำรีวิวในการ์ดรีวิว) */
.skeleton-line--text {
  width: 100%;
  height: 3.2rem;
}

/* shimmer: แถบแสงจางไล่วิ่งผ่านโครงเทา ใช้ ::after + transform: translateX (GPU ลื่น ไม่กิน CPU) */
.skeleton-shimmer {
  position: relative;
  overflow: hidden;
}

.skeleton-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(
    90deg,
    transparent,
    var(--skeleton-highlight),
    transparent
  );
  animation: skeleton-shimmer var(--skeleton-shimmer-duration) ease-in-out infinite;
}

@keyframes skeleton-shimmer {
  100% { transform: translateX(100%); }
}

/* คลาสช่วย: fade เนื้อหาจริงเข้ามาแทน skeleton แบบนุ่มนวล (opacity เท่านั้น) */
.fade-in {
  animation: fade-in var(--skeleton-fade-duration) ease both;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------- accessibility: เคารพ prefers-reduced-motion ----------
   ผู้ใช้ที่ตั้งค่าลดการเคลื่อนไหว: ปิดอนิเมชั่นตกแต่ง (pulse/shimmer/fade)
   คง spinner ไว้เป็นสัญญาณบอกสถานะโหลด แต่หมุนช้าลงให้นุ่มตา */
@media (prefers-reduced-motion: reduce) {
  .page-loader__logo,
  .skeleton-shimmer::after,
  .fade-in {
    animation: none;
  }

  .page-loader__spinner {
    animation-duration: 1.4s;
  }
}

/* =====================================================
   หน้ารายละเอียดบทความ (article-detail.html)
   จำกัดความกว้างเนื้อหาให้อ่านสบายตา + จัดรูปแบบหัวข้อย่อย/ย่อหน้าให้อ่านง่าย
   ===================================================== */
.article-detail {
  max-width: var(--article-content-max-width);
  margin-inline: auto;
}

/* รูปหน้าปกบทความ: แสดงพื้นที่เสมอ สัดส่วน 16:9 (คุมความสูงไม่ให้โล่ง) กว้างเท่า container เนื้อหา
   ใช้ .thumb-placeholder ร่วม: มีรูปจริง <img> จะซ้อนทับแบบ object-fit: cover, ไม่มีก็เห็นไอคอน placeholder ที่ตั้งใจออกแบบ */
.article-detail-cover {
  aspect-ratio: var(--article-cover-ratio);
  background-color: var(--article-cover-bg);
  border-radius: var(--radius-card);
  margin-bottom: var(--spacing-md);
}

.article-detail-cover i {
  color: var(--article-cover-icon-color);
  font-size: var(--article-cover-icon-size);
}

/* ส่วนหัวบทความ: หมวดหมู่ + ชื่อ + ข้อมูลกำกับ (วันที่/ผู้เขียน/ยอดวิว) */
.article-detail-header {
  margin-bottom: var(--spacing-lg);
}

.article-detail-title {
  font-size: var(--font-size-xxl);
  line-height: var(--line-height-heading);
  color: var(--color-text);
  margin-block: var(--spacing-xs) var(--spacing-sm);
}

/* ข้อมูลกำกับหน้ารายละเอียด (วันที่/ยอดวิว): row-gap เผื่อขึ้นบรรทัดใหม่บนจอแคบ,
   column-gap ระหว่างกลุ่มใช้ตัวแปรร่วมกับการ์ด list (--meta-group-gap) ให้สอดคล้องกัน
   การจัดกึ่งกลางไอคอน↔ข้อความในแต่ละกลุ่มใช้กฎ .article-detail-meta span ด้านบนร่วมกับ .article-meta */
.article-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs) var(--meta-group-gap);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.article-detail-meta i {
  color: var(--color-primary);
}

/* เนื้อหาบทความ: เว้นระยะระหว่างย่อหน้า/หัวข้อย่อยให้อ่านสบาย */
.article-content {
  display: flex;
  flex-direction: column;
  gap: var(--article-content-gap);
}

.article-content-heading {
  font-size: var(--font-size-lg);
  color: var(--color-secondary);
  margin-top: var(--spacing-sm);
}

.article-content-text {
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-text);
}

/* กรณีหาบทความตาม id ที่ระบุใน URL ไม่พบ */
.article-not-found {
  text-align: center;
  padding-block: var(--spacing-xl);
}

.article-not-found .article-content-text {
  margin-block: var(--spacing-sm) var(--spacing-md);
}

/* =====================================================
   Skeleton การ์ดบทความ (โครงเทาตอนโหลด articles.json)
   เลียนโครงการ์ดบทความจริง: รูปหน้าปก + แถบหมวด + แถบชื่อ + แถบเนื้อหา
   ใช้ .skeleton-line / .skeleton-shimmer ร่วมกับ skeleton การ์ดสินค้า
   ===================================================== */
.skeleton-article-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background-color: var(--color-bg);
  overflow: hidden;
}

.skeleton-article-thumb {
  width: 100%;
  aspect-ratio: 16 / 10;
  background-color: var(--skeleton-base);
}

.skeleton-article-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
}

/* แถบเทาแทนหมวดหมู่/เนื้อหาบทความ (ความสูง/กว้างต่างจากแถบการ์ดสินค้า) */
.skeleton-line--tag {
  width: 40%;
  height: 0.9rem;
}

.skeleton-line--text {
  width: 100%;
  height: 0.9rem;
}

.skeleton-line--text-short {
  width: 60%;
  height: 0.9rem;
}

/* =====================================================
   หน้าผลการค้นหา (search.html)
   แบ่งผลลัพธ์เป็น 2 กลุ่ม (สินค้า/บทความ) ใช้กริดการ์ดเดิมของแต่ละชนิด
   ===================================================== */
.search-group {
  margin-bottom: var(--spacing-lg);
}

/* หัวข้อกลุ่มผลลัพธ์ ("สินค้า (N)" / "บทความ (N)") มีเส้นคั่นบางใต้หัวข้อ */
.search-group-title {
  font-size: var(--font-size-lg);
  color: var(--color-text);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-xs);
  border-bottom: 1px solid var(--color-border);
}

/* empty state: ใช้ทั้งกรณีคำค้นว่าง และกรณีค้นไม่พบ — จัดกึ่งกลาง ดูตั้งใจ ไม่ใช่หน้าว่างโล่ง */
.search-empty {
  text-align: center;
  padding-block: var(--spacing-xl);
}

.search-empty i {
  font-size: var(--font-size-xxl);
  color: var(--color-text-muted);
}

.search-empty-text {
  font-size: var(--font-size-lg);
  color: var(--color-text);
  margin-block: var(--spacing-sm);
}

.search-empty-hint {
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-md);
}

/* =====================================================
   หน้าติดต่อเรา (contact.html)
   เน้น LINE เป็นพระเอก + ช่องทางติดต่อคลิกได้ + แผนที่ embed + social
   ค่าดีไซน์ทั้งหมดอยู่ใน variables.css (กลุ่ม --contact-*)
   ===================================================== */

/* ---------- กล่อง LINE เด่น (พระเอกของหน้า) ---------- */
/* พื้นเขียวเข้มพรีเมียมชุดเดียวกับแถบ LINE ก่อน footer: ซ้าย = ข้อความ+ปุ่ม, ขวา = QR
   flex-wrap ให้ QR ตกลงมาอยู่ล่างเองเมื่อจอแคบ (responsive.css จัด center เพิ่มบนแท็บเล็ต) */
.contact-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--contact-line-gap);
  flex-wrap: wrap;
  max-width: var(--contact-line-max-width);
  margin-inline: auto;
  padding: var(--contact-line-padding);
  border-radius: var(--radius-card);
  background-color: var(--contact-line-bg);
}

.contact-line-info {
  flex: 1 1 320px;  /* ยืดเต็มที่เหลือ แต่ยุบได้ถึง 320px ก่อน wrap QR ลงล่าง */
  text-align: left;
}

/* บรรทัดนำ: หัวข้อ "สอบถาม / สั่งซื้อ ผ่าน LINE" (ข้อความล้วน ไม่มีไอคอน เพื่อไม่ให้ตกบรรทัดเบียดกันบนมือถือ) */
.contact-line-eyebrow {
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text-invert);
}

/* ข้อความหลัก เด่นที่สุดในกล่อง */
.contact-line-title {
  font-family: var(--font-heading);
  font-size: var(--font-size-xxl);
  font-weight: 700;
  line-height: var(--line-height-tight);
  color: var(--color-text-invert);
  margin-block: var(--spacing-xs);
}

.contact-line-text {
  color: var(--color-text-invert-muted);
  max-width: 42ch;  /* คุมความยาวบรรทัดให้อ่านสบาย ไม่ยาวเต็มกล่อง */
  margin-bottom: var(--spacing-md);
}

/* ปุ่มเพิ่มเพื่อน LINE: พื้นขาว-ตัวอักษรเขียว LINE (เหมือนปุ่มในแถบ LINE) + ใหญ่กว่าปกติให้เป็น CTA เด่น */
.contact-line-btn {
  background-color: var(--color-text-invert);
  color: var(--color-line);
  font-weight: 600;
  font-size: var(--font-size-base);
  padding: var(--contact-line-btn-padding);
}

.contact-line-btn:hover {
  background-color: var(--color-bg-alt);
}

/* กลุ่ม QR ฝั่งขวา: กล่อง QR + คำกำกับ "สแกนเพื่อเพิ่มเพื่อน" */
.contact-line-qr {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
}

/* กล่อง QR พื้นขาว (thumb-placeholder จัดการ object-fit + ไอคอน placeholder ตอนยังไม่มีรูปจริง) */
.contact-qr {
  width: var(--contact-qr-size);
  height: var(--contact-qr-size);
  border-radius: var(--radius-card);
  background-color: var(--color-text-invert);
}

.contact-qr i {
  font-size: 2.6rem;
}

.contact-qr-caption {
  font-size: var(--font-size-sm);
  color: var(--color-text-invert-muted);
}

/* ---------- ช่องทางติดต่อ (การ์ดคลิกได้: โทร/อีเมล/ที่อยู่/เวลาทำการ) ---------- */
.contact-methods {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--contact-card-gap);
  max-width: var(--contact-section-max-width);
  margin-inline: auto;
}

/* การ์ดช่องทางหนึ่งอัน: ไอคอนวงกลม + (ป้ายกำกับ + ค่า) — พื้นขาวเด่นบนโซน section-alt สีอ่อน */
.contact-method {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

/* เฉพาะการ์ดที่คลิกได้ (เป็น <a>): hover ยกขึ้น + ขอบแดงแบรนด์ (การ์ดเวลาทำการเป็น <div> ไม่ตอบสนอง hover) */
a.contact-method:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

.contact-method-icon {
  flex-shrink: 0;
  width: var(--contact-icon-circle-size);
  height: var(--contact-icon-circle-size);
  border-radius: var(--radius-round);
  background-color: var(--contact-icon-bg);
  color: var(--contact-icon-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--contact-icon-size);
}

.contact-method-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;  /* กันข้อความยาว (เช่นที่อยู่) ดันการ์ดจนล้น */
}

.contact-method-label {
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.contact-method-value {
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--color-text);
  word-break: break-word;  /* ที่อยู่/อีเมลยาวตัดขึ้นบรรทัดใหม่ในการ์ด ไม่ทะลุขอบ */
}

a.contact-method:hover .contact-method-value {
  color: var(--color-primary);
}

/* ---------- แผนที่ฝัง (embed Google Maps) ---------- */
.contact-map {
  max-width: var(--contact-section-max-width);
  margin-inline: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;  /* ให้มุมของ iframe โค้งตามการ์ด */
}

.contact-map iframe {
  display: block;
  width: 100%;
  height: var(--contact-map-height);
  border: 0;
}

/* ลิงก์ "เปิดใน Google Maps" ใต้แผนที่ (js-map: main.js ใส่ href จาก config.js) */
.contact-map-actions {
  text-align: center;
  margin-top: var(--spacing-md);
}

.contact-map-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2xs);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-primary);
  transition: color var(--transition-fast);
}

.contact-map-link:hover {
  color: var(--color-primary-dark);
}

/* ---------- ติดตามเรา (social) ---------- */
.contact-follow {
  text-align: center;
}

.contact-follow-text {
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-md);
}

/* ใช้ .footer-social ร่วม (วงกลมไอคอน + hover สีแบรนด์) แค่จัดให้อยู่กึ่งกลางหน้า */
.contact-follow-social {
  justify-content: center;
}