/*
  variables.css
  ศูนย์รวมค่าดีไซน์ทั้งหมดของเว็บไซต์ AUA CHEMICAL
  ต้องการแก้สี ฟอนต์ ระยะห่าง เงา หรือ radius ให้แก้ที่ไฟล์นี้ที่เดียว
  ห้ามฝังค่าสี/ฟอนต์/ระยะห่างตรงๆ ในไฟล์ CSS อื่น ให้เรียกใช้ตัวแปรจากที่นี่เสมอ
*/

:root {
  /* ---------- สีหลักของแบรนด์ (โทนอีกาดำ: แดง เขียว ดำ) ---------- */
  --color-primary: #e30613;        /* แดง - สีหลักของแบรนด์ ใช้กับปุ่มหลัก/ลิงก์ active */
  --color-primary-dark: #b8050f;   /* แดงเข้ม - ใช้ตอน hover ของสีแดง */
  --color-secondary: #1a7a3c;      /* เขียว - สีรอง ใช้กับข้อความ/องค์ประกอบเสริม */
  --color-secondary-dark: #145c2d; /* เขียวเข้ม - ใช้ตอน hover ของสีเขียว */
  --color-line: #06c755;           /* เขียว LINE - ใช้เฉพาะปุ่ม/ไอคอน LINE เท่านั้น */
  --color-line-dark: #05a848;      /* เขียว LINE เข้ม - ใช้ตอน hover ปุ่ม LINE */
  --color-dark: #1a1a1a;           /* ดำ - พื้นหลัง navbar และ footer */
  --color-dark-soft: #2b2b2b;      /* ดำอ่อน - เส้นแบ่ง/พื้นผิวรองใน footer */
  --color-line-banner-bg: #0d3b1f; /* เขียวเข้มอมดำ - พื้นหลังแถบ LINE ก่อน footer ให้ดูพรีเมียมและตัดกับ footer สีดำ */
  --color-badge-gold: #c9962c;     /* ทอง - ใช้กับป้าย BEST SELLER บนการ์ดสินค้าเท่านั้น */
  --color-star: #f5a623;           /* ทองอำพัน - ดาวให้คะแนนรีวิว (เด่นชัดบนพื้นขาว ดูพรีเมียม ไม่ใช่เหลืองจ๊าบ) */
  --color-star-empty: #d9d9d9;     /* เทาอ่อน - ดาวส่วนที่ยังไม่ถึงคะแนน (ตัดกับดาวทองให้เห็นชัด) */

  /* ---------- สีแบรนด์โซเชียล (ใช้ตอน hover ไอคอน social ที่ footer) ---------- */
  --color-facebook: #1877f2;       /* น้ำเงิน Facebook */
  --color-youtube: #ff0000;        /* แดง YouTube (สีเขียว LINE ใช้ --color-line ที่มีอยู่แล้ว) */

  /* ---------- สีพื้นหลัง ---------- */
  --color-bg: #ffffff;             /* พื้นหลังหลักของหน้าเว็บ */
  --color-bg-alt: #f7f7f5;         /* พื้นหลังสลับ (โซนคั่น/การ์ด) */
  --color-tag-bg: #eaf3ec;         /* พื้นหลังป้ายหมวดหมู่บทความ (เขียวอ่อน) คู่กับตัวอักษรสีเขียวแบรนด์ */

  /* ---------- สีข้อความ ---------- */
  --color-text: #232323;           /* ข้อความหลัก */
  --color-text-muted: #6b6b6b;     /* ข้อความรอง/คำอธิบาย */
  --color-text-invert: #ffffff;    /* ข้อความบนพื้นเข้ม (navbar/footer) */
  --color-text-invert-muted: #b0b0b0; /* ข้อความสีเทาอ่อนบนพื้นเข้ม เช่น ข้อความรองใต้โลโก้ */
  --color-footer-text: #cfcfcf;    /* ข้อความในfooter (สโลแกน/ติดต่อ/ลิงก์) เทาอ่อนบนพื้นดำ อ่านสบายไม่จ้า */
  --color-footer-muted: #9a9a9a;   /* ข้อความจางสุดใน footer (แถบลิขสิทธิ์ด้านล่าง) */

  /* ---------- สีเส้นขอบ ---------- */
  --color-border: #e0e0e0;         /* เส้นขอบทั่วไปบนพื้นสว่าง */
  --color-border-dark: #3a3a3a;    /* เส้นขอบบนพื้นเข้ม (footer) */

  /* ---------- สีทับภาพพื้นหลัง (ใช้กับ hero เพื่อให้ตัวอักษรอ่านชัด) ---------- */
  --color-overlay-start: rgba(10, 10, 10, 0.45);
  --color-overlay-end: rgba(10, 10, 10, 0.8);

  /* ---------- ฟอนต์ ---------- */
  --font-heading: 'Kanit', sans-serif;   /* ฟอนต์หัวข้อ */
  --font-body: 'Sarabun', sans-serif;    /* ฟอนต์เนื้อหาทั่วไป */

  /* ---------- ขนาดตัวอักษร (ใช้ clamp เพื่อรองรับทุกขนาดจอ) ---------- */
  --font-size-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.85rem);
  --font-size-sm: clamp(0.85rem, 0.8rem + 0.2vw, 0.95rem);
  --font-size-base: clamp(1rem, 0.95rem + 0.2vw, 1.1rem);
  --font-size-lg: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
  --font-size-xl: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem);
  --font-size-xxl: clamp(1.8rem, 1.5rem + 1.5vw, 2.6rem);

  /* ---------- ขนาดตัวอักษรฉบับ "มือถือ" (accessibility สำหรับเกษตรกรสายตาไม่ดี) ----------
     กลุ่มผู้ใช้หลักคือเกษตรกรที่ใช้มือถือ บางส่วนสายตาไม่ค่อยดี จึงตั้งชุดขนาดที่ใหญ่ขึ้น
     ค่าเหล่านี้ถูกนำไปแทนตัวแปร --font-size-* ข้างบนภายใน media query จอมือถือ (responsive.css)
     ทำให้ "ทั้งเว็บ" ใหญ่ขึ้นพร้อมกันแบบสมส่วน โดยไม่ต้องไล่แก้ทีละจุด
     หลักเกณฑ์: เนื้อหาหลัก (base) ~17px และ body รอง (sm) ไม่ต่ำกว่า 16px ตามมาตรฐาน accessibility */
  --font-size-xs-mobile: 0.9rem;       /* ป้ายกำกับ/ตัวเล็ก ~14.4px (เดิม min 12px) */
  --font-size-sm-mobile: 1rem;         /* body รอง 16px พอดี (เดิม min ~13.6px) */
  --font-size-base-mobile: 1.0625rem;  /* เนื้อหาหลัก ~17px อ่านสบายตา */
  --font-size-lg-mobile: 1.25rem;      /* ข้อความเด่น/ราคา ~20px */
  --font-size-xl-mobile: 1.55rem;      /* หัวข้อรอง ~24.8px */
  --font-size-xxl-mobile: 1.9rem;      /* หัวข้อใหญ่ ~30.4px (คุมไม่ให้ล้นจอแคบ) */

  /* ---------- ขอบมน (radius) ---------- */
  --radius-button: 8px;
  --radius-card: 12px;
  --radius-input: 6px;
  --radius-round: 50%;

  /* ---------- เงา (บางๆ ไม่ฟุ้ง) ---------- */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-navbar: 0 1px 4px rgba(0, 0, 0, 0.15);
  /* เงาตอน hover: ทิศทางเดียว (negative spread) ให้รู้สึกว่าการ์ด "ยก" ขึ้นจริง ไม่ใช่แสงฟุ้งรอบตัว */
  --shadow-hover: 0 10px 20px -8px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.06);

  /* ---------- ระยะห่าง ---------- */
  --spacing-2xs: 0.35rem;  /* ระยะห่างจิ๋ว: ใช้กับช่องว่างระหว่างไอคอน-ข้อความในปุ่ม */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2.5rem;
  --spacing-xl: 4rem;

  /* ---------- ระยะห่างตัวอักษร (letter-spacing) ---------- */
  --letter-spacing-tight: -0.01em;  /* หัวข้อใหญ่ (hero) ให้ตัวอักษรกระชับสมส่วนขึ้น */
  --letter-spacing-wide: 0.02em;    /* ปุ่ม/ป้ายกำกับตัวเล็ก ให้ตัวอักษรไม่อัดกันตอนย่อขนาด */

  /* ---------- ความสูงบรรทัด (line-height) ---------- */
  --line-height-tight: 1.3;   /* หัวข้อสั้นบรรทัดเดียว เช่น หัวข้อ section */
  --line-height-heading: 1.45; /* หัวข้อหลายบรรทัด เช่น hero-title */
  --line-height-body: 1.75;   /* เนื้อหาอ่านสบายตา ไม่อัดกัน */
  --line-height-relaxed: 1.9; /* ย่อหน้ายาวที่ต้องอ่านละเอียด เช่น คุณสมบัติ/วิธีใช้ในหน้ารายละเอียดสินค้า */

  /* ---------- ความกว้างเนื้อหาสูงสุด ----------
     จอใหญ่มากไม่ยืดเนื้อหาจนกว้างเกินอ่าน แต่จอเล็กใช้เต็มความกว้าง (width:100% + padding) พอดี */
  --container-max-width: 1280px;

  /* ---------- ความสูง navbar ---------- */
  --navbar-height: 84px;  /* เพิ่มเล็กน้อยจากเดิม 72px เพื่อรองรับโลโก้ที่ใหญ่ขึ้น โดยยังเหลือระยะหายใจบน-ล่าง */

  /* ---------- ช่องค้นหาบน navbar (พื้นขาวเด่นชัดบนพื้น navbar ดำ) ---------- */
  --navbar-search-bg: #ffffff;                          /* พื้นขาวสะอาด ให้ช่องเด่นชัดตัดกับ navbar ดำ */
  --navbar-search-text: var(--color-text);              /* สีตัวอักษรที่พิมพ์ - เข้ม อ่านง่ายบนพื้นขาว */
  --navbar-search-placeholder: var(--color-text-muted); /* สี placeholder - เทากลาง อ่านออกไม่จางเกิน */
  --navbar-search-icon-color: var(--color-primary);     /* สีไอคอนแว่นขยาย - แดงแบรนด์ เด่นบนพื้นขาว */
  --navbar-search-icon-hover: var(--color-primary-dark);/* สีไอคอนตอน hover - แดงเข้มขึ้น */
  --navbar-search-border: var(--color-border);          /* เส้นขอบบางบนพื้นขาว */
  --navbar-search-radius: var(--radius-button);         /* ความโค้งมุมช่อง ตามสไตล์เว็บ */
  --navbar-search-height: 42px;                         /* ความสูงช่อง - ใหญ่ขึ้นให้กด/แตะง่าย */
  --navbar-search-font-size: var(--font-size-base);     /* ขนาดตัวอักษร/placeholder - อ่านง่าย ตาม typography scale */
  --navbar-search-padding-x: 0.85rem;                   /* ระยะ padding ภายในซ้าย-ขวา */
  --navbar-search-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);       /* เงาบางๆ ให้ช่องมีมิติ แยกตัวจากแผง */
  --navbar-search-focus-ring: 0 0 0 3px rgba(227, 6, 19, 0.25);/* วงแหวนโฟกัสสีแบรนด์ (แดง) จางๆ ตอนคลิกเข้าไปพิมพ์ */
  --navbar-search-max-width: 640px;                     /* ความกว้างสูงสุดของช่องค้นหาในแผง (จอใหญ่ไม่ยืดจนเวอร์ จอเล็กหดเต็มความกว้างเอง) */

  /* ---------- ปุ่มไอคอนค้นหา (search toggle) บน navbar: กดเพื่อเปิด/ปิดแผงค้นหา ---------- */
  --navbar-search-toggle-size: 42px;                    /* ขนาดปุ่ม = touch target >=42px กด/แตะง่ายทุกจอ */
  --navbar-search-toggle-color: var(--color-text-invert);   /* ไอคอนแว่นขยายสีขาว เด่นบน navbar ดำ */
  --navbar-search-toggle-hover: var(--color-primary);       /* hover/เปิดอยู่ = แดงแบรนด์ */
  --navbar-search-toggle-hover-bg: rgba(255, 255, 255, 0.09); /* พื้นวงกลมจางๆ ตอน hover/เปิด บอกสถานะปุ่ม */

  /* ---------- แผงค้นหา (search panel): เด้ง/สไลด์ลงใต้ navbar เมื่อกดไอคอน (ใช้ร่วม desktop + mobile) ---------- */
  --navbar-search-panel-bg: var(--color-dark);          /* พื้นแผง = สีเดียวกับ navbar ให้รู้สึกเป็นส่วนต่อของ navbar ที่ไหลลงมา */
  --navbar-search-panel-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.5); /* เงาใต้แผง บอกว่าลอยเหนือเนื้อหา */
  --navbar-search-panel-padding-y: var(--spacing-md);   /* ช่องไฟบน-ล่างภายในแผง */
  --navbar-search-panel-offset: -10px;                  /* ระยะเลื่อนขึ้นตอนแผงปิด (ใช้กับ transform ให้ดูสไลด์ลง) */
  --navbar-search-panel-transition: 0.28s cubic-bezier(0.4, 0, 0.2, 1); /* จังหวะเปิด-ปิดแผง นุ่มนวล */

  /* ---------- chips คำค้นแนะนำ (ใต้ช่องค้นหาในแผง) ---------- */
  --search-chip-bg: rgba(255, 255, 255, 0.08);          /* พื้น chip จางๆ บนแผงดำ (โปร่ง ดูเบา) */
  --search-chip-bg-hover: var(--color-primary);         /* hover = พื้นแดงแบรนด์ เด่นน่ากด */
  --search-chip-color: var(--color-text-invert);        /* ตัวอักษร chip ขาว อ่านง่ายบนแผงดำ */
  --search-chip-border: rgba(255, 255, 255, 0.2);       /* เส้นขอบ chip บางๆ ให้เห็นขอบเขต */
  --search-chip-radius: 999px;                          /* มนเต็ม (pill) ให้ดูเป็นคำค้นแนะนำน่ากด */

  /* ---------- ขนาดโลโก้ (ปรับเพิ่ม-ลดได้ที่นี่ที่เดียว) ----------
     โลโก้ navbar กะให้สูงราว 70-80% ของความสูง navbar ให้เด่นแต่ไม่ชนขอบ (ยังเหลือที่ให้ข้อความใต้โลโก้)
     ไฟล์โลโก้ต้นฉบับ 2000x2000px ความละเอียดสูง ขยายขนาดนี้ยังคมชัด */
  --logo-navbar-height: 62px;         /* โลโก้บน navbar - จอ desktop */
  --logo-navbar-height-tablet: 48px;  /* โลโก้บน navbar - แท็บเล็ต (<=1024px) กันเมนูเบียด */
  --logo-navbar-height-mobile: 40px;  /* โลโก้บน navbar - มือถือ (<=480px) */
  --logo-footer-height: 72px;         /* โลโก้ใน footer - ใหญ่ขึ้นให้เติมพื้นที่คอลัมน์ให้สมดุล */

  /* ---------- ไอคอน social ที่ footer (ส่วน "ติดตามเรา") ---------- */
  --social-icon-circle-size: 44px;    /* ขนาดวงกลมพื้นหลังไอคอน (เป็น touch target >=44px แตะง่ายบนมือถือ) */
  --social-icon-size: 1.35rem;        /* ขนาดตัวไอคอนข้างในวงกลม (~21px) */
  --social-icon-gap: 0.75rem;         /* ช่องไฟระหว่างไอคอน 3 อัน ให้โปร่งไม่อัดแน่น */

  /* ---------- แถบความน่าเชื่อถือ (trust badges) หน้ารายละเอียดสินค้า: ของแท้/จัดส่ง/ชำระเงิน ---------- */
  --trust-item-gap: 0.5rem;                      /* ช่องไฟ ไอคอน-ข้อความ ในแต่ละรายการ */
  --trust-item-icon-size: 1.3rem;                /* ขนาดไอคอน - desktop/tablet */
  --trust-list-row-gap-mobile: var(--spacing-sm);/* ช่องไฟระหว่างแถวบนมือถือ (เรียงแนวตั้ง) ให้โปร่ง อ่านง่าย */
  --trust-item-icon-size-mobile: 1.7rem;         /* ไอคอนใหญ่ขึ้นบนมือถือ ให้สมส่วนกับตัวอักษรที่ขยาย */

  /* ---------- ไอคอน placeholder (กล่องรูปที่ยังไม่มีรูปจริง: หมวดหมู่/บทความ/avatar รีวิว) ---------- */
  --placeholder-icon-color: var(--color-secondary);  /* เขียวแบรนด์ ให้ไอคอนเด่นชัด ดูตั้งใจ ไม่จางจนเหมือนกล่องเปล่า */
  --placeholder-icon-size: 2rem;                      /* ขนาดไอคอน placeholder พื้นฐาน (บางจุด เช่น การ์ดหมวดหมู่/บทความ กำหนดขนาดเฉพาะทับอีกที) */

  /* ---------- การ์ดสินค้า (product card): กรอบรูปในการ์ด ---------- */
  --card-image-ratio: 1 / 1;  /* สัดส่วนกรอบรูปในการ์ด (จัตุรัส) ให้การ์ดทุกใบสูงเท่ากัน แม้สินค้าทรงต่างกัน (ขวดสูง/ซองแบน) */

  /* ---------- การ์ดรีวิว (รูปเกษตรกร + ป้ายพื้นที่บนรูป) ---------- */
  --review-photo-ratio: 4 / 3;                 /* สัดส่วนรูปเกษตรกรในการ์ดรีวิว (แนวนอน 4:3 object-fit: cover) */
  --review-img-position: top;                  /* จุดยึดตอนครอปรูปรีวิว (object-position): ยึด "บน" เพราะหน้าเกษตรกรมักอยู่ครึ่งบน กันตัดหัว */
  --review-badge-bg: rgba(26, 26, 26, 0.62);   /* พื้นป้ายพื้นที่มุมล่างขวาของรูป: ดำโปร่งจางๆ ให้ตัวอักษรขาวอ่านชัดทุกภาพ */
  --review-badge-text: #ffffff;                /* ตัวอักษร/ไอคอนหมุดในป้ายพื้นที่ */
  --review-badge-offset: var(--spacing-sm);    /* ระยะป้ายจังหวัดเว้นจากขอบรูป (โปร่งขึ้น ไม่ชิดมุมจนอึดอัด) */
  --review-badge-padding: 0.28rem 0.68rem;     /* padding ภายในป้ายจังหวัด (พอดีข้อความ ไม่แน่นไม่หลวม) */

  /* ---------- carousel รีวิว: ช่องไฟ + ระยะภายในการ์ด (ปรับความโปร่งของโซนรีวิวที่นี่ที่เดียว) ---------- */
  --review-carousel-gap: var(--spacing-lg);    /* ช่องไฟระหว่างการ์ดในแถบเลื่อน — ใช้ทั้ง gap ของแทร็กและสูตรคำนวณความกว้างการ์ด (ต้องเป็นค่าเดียวกันเสมอ) */
  --review-card-padding: 1.75rem;              /* padding ภายในการ์ด ให้เนื้อหามีที่หายใจ (มากกว่า spacing-md เดิม) */
  --review-body-gap: var(--spacing-sm);        /* ระยะระหว่าง ดาว / คำรีวิว / ชื่อผู้รีวิว ให้อ่านเป็นจังหวะ ไม่ชิดกัน */
  --review-header-gap: var(--spacing-md);      /* ระยะเพิ่มระหว่างหัวข้อ "รีวิว" กับแถว carousel (กันหัวข้อชิด/ทับการ์ด) */

  /* ---------- หน้าโปรโมชั่น (การ์ดโปร + badge สถานะ) ---------- */
  --promo-image-ratio: 16 / 9;                 /* สัดส่วนรูปโปรในการ์ด (แนวนอน object-fit: cover) */
  --promo-grid-gap: var(--spacing-lg);         /* ช่องไฟระหว่างการ์ดโปร ให้โปร่ง เข้าชุดกับการ์ดรีวิว */
  --color-status-active: var(--color-secondary); /* badge "กำลังโปร" = เขียวแบรนด์ (โปรกำลังดำเนินอยู่) */
  --color-status-ending: #e8850c;              /* badge "ใกล้หมดเขต" = ส้ม เตือนแบบไม่ตกใจ (เร่งให้รีบสอบถาม) */

  /* ---------- Hero (หน้าหลัก) ----------
     ภาพ Hero มีโลโก้ลายน้ำ "อีกาดำ" ฝังอยู่มุมบนขวา และตัวเกษตรกรอยู่ฝั่งขวาของภาพ
     จึงยึดจุดโฟกัสการครอปไว้ "มุมบนขวา" เพื่อไม่ให้โลโก้และเกษตรกรถูกครอปหายในทุกจอ */
  --hero-height: 560px;                  /* ความสูง Hero - จอ desktop */
  --hero-height-tablet: 480px;           /* ความสูง Hero - จอ tablet (<=768px) */
  --hero-height-mobile: 440px;           /* ความสูง Hero - จอ mobile (<=480px) */
  --hero-image-position: right top;      /* จุดโฟกัสการครอปภาพพื้นหลัง (เทียบเท่า object-position) ยึดมุมบนขวาไว้เสมอ กันโลโก้ลายน้ำถูกตัด */
  --hero-content-max-width: 720px;       /* ความกว้างสูงสุดกล่องข้อความ (จัดกลางค่อนซ้ายตามดีไซน์เดิม) */
  --hero-content-safe-right: var(--spacing-xl); /* ระยะเว้นฝั่งขวาของกล่องข้อความ กันข้อความยาวไปชนโซนโลโก้มุมบนขวา */

  /* ---------- หน้ารายละเอียดสินค้า: กรอบรูปสินค้าหลัก ---------- */
  --product-image-ratio: 4 / 5;  /* สัดส่วนกรอบรูปสินค้าหลัก แนวตั้ง เหมาะกับซองสินค้า */
  --product-gallery-sticky-top: calc(var(--navbar-height) + var(--spacing-md)); /* ระยะ top ตอนรูปสินค้า sticky ลอยค้างเวลาเลื่อนอ่านข้อมูล (เว้นจาก navbar ที่ fixed อยู่) */

  /* ---------- บทความ / เกร็ดความรู้ (หน้า list + หน้ารายละเอียด) ---------- */
  --article-content-max-width: 760px;      /* ความกว้างสูงสุดของเนื้อหาบทความ จำกัดความยาวบรรทัดให้อ่านสบายตา (มาตรฐานการอ่าน ~720-800px) ไม่ยาวเต็มจอ */
  --article-cover-ratio: 16 / 9;           /* สัดส่วนรูปหน้าปกบทความในหน้ารายละเอียด (แนวนอน คุมความสูงไม่ให้โล่ง) */
  --article-cover-bg: var(--color-bg-alt);            /* พื้นหลังพื้นที่รูปหน้าปกตอนยังไม่มีรูปจริง (โทนอ่อนสะอาด เข้าชุดเว็บ) */
  --article-cover-icon-color: var(--placeholder-icon-color); /* สีไอคอน placeholder หน้าปก (เขียวแบรนด์ ให้ดูตั้งใจ ไม่จางจนเหมือนกล่องว่าง) */
  --article-cover-icon-size: 3rem;                    /* ขนาดไอคอน placeholder หน้าปก ให้สมส่วนกับกรอบ 16:9 เต็มความกว้าง */
  --article-content-gap: var(--spacing-md); /* ระยะห่างระหว่างย่อหน้า/หัวข้อย่อยในเนื้อหาบทความ */
  --articles-header-gap: var(--spacing-sm); /* ระยะหัวข้อ "เกร็ดความรู้" ↔ ข้อความนับจำนวนบทความ ให้กระชับเป็นกลุ่มเดียวกัน */

  /* ระยะของแถวข้อมูลกำกับ (วันที่/ยอดวิว) — ใช้ร่วมทั้งการ์ด list และหน้ารายละเอียด ให้สอดคล้องกัน */
  --meta-icon-gap: 0.4rem;                 /* ช่องไฟ ไอคอน ↔ ข้อความ ภายในกลุ่มเดียวกัน */
  --meta-group-gap: 1.25rem;               /* ช่องไฟระหว่างกลุ่ม "วันที่" กับกลุ่ม "ยอดวิว" */

  /* ---------- Branded loader (overlay ฉากเปิดเว็บครั้งแรกของเซสชัน) ----------
     พื้นเข้มให้โลโก้ "อีกาดำ" (พื้นโปร่ง ตัวกาดำ ขอบขาว) เด่นชัด + spinner สีแดงแบรนด์
     ค่าเวลาทั้งหมดปรับได้ที่นี่ที่เดียว */
  --loader-bg: #141414;                              /* พื้นหลัง loader เข้มกว่า navbar เล็กน้อย ให้รู้สึกเป็น "ฉากเปิด" แยกจากตัวเว็บ */
  --loader-logo-width: clamp(120px, 30vw, 176px);    /* ความกว้างโลโก้ - ความสูงคิดอัตโนมัติ (auto) รักษาสัดส่วนเดิม ไม่บิดเบี้ยว */
  --loader-brand-color: #f2f2f2;                     /* สีชื่อแบรนด์บนพื้นเข้ม (ขาวนวล ไม่จ้าเกินไป) */
  --loader-brand-gap: var(--spacing-md);             /* ช่องไฟระหว่างโลโก้ / ชื่อแบรนด์ / spinner */
  --loader-spinner-size: 44px;                       /* เส้นผ่านศูนย์กลาง spinner */
  --loader-spinner-thickness: 3px;                   /* ความหนาเส้นวง spinner */
  --loader-spinner-track: rgba(255, 255, 255, 0.16); /* สีวงพื้นของ spinner (จางๆ) */
  --loader-spinner-color: var(--color-primary);      /* สีเส้นที่วิ่งหมุน = แดงแบรนด์ */
  --loader-fade-duration: 0.5s;                      /* ระยะเวลา fade out ตอนซ่อน loader */
  --loader-pulse-duration: 2.2s;                     /* รอบ pulse โลโก้ (ช้า นุ่มนวล) */
  --loader-spin-duration: 0.8s;                      /* รอบหมุนของ spinner */

  /* ---------- Skeleton screen (การ์ดโครงเทาตอนโหลดข้อมูลสินค้า) ----------
     ใช้โทนเทากลางๆ ไม่ใช่สีแบรนด์ เพราะ skeleton ต้องเป็นกลาง ไม่แย่งสายตาจากเนื้อหาจริง */
  --skeleton-base: #e6e6e6;                          /* สีพื้นของโครงเทา */
  --skeleton-highlight: rgba(255, 255, 255, 0.65);   /* แถบแสง shimmer ที่ไล่วิ่งผ่าน (จางๆ) */
  --skeleton-shimmer-duration: 1.4s;                 /* ความเร็วแสง shimmer วิ่งผ่าน */
  --skeleton-fade-duration: 0.4s;                    /* ระยะเวลา fade การ์ดจริงเข้ามาแทน skeleton */

  /* ---------- หน้าติดต่อเรา (contact.html) ----------
     กล่อง LINE เป็น "พระเอก" ของหน้า จึงใช้พื้นเขียวเข้มพรีเมียมชุดเดียวกับแถบ LINE ก่อน footer
     ช่องทางติดต่อ (โทร/อีเมล/ที่อยู่/เวลา) เป็นการ์ดคลิกได้ ไอคอนวงกลมสีแบรนด์ */
  --contact-line-bg: var(--color-line-banner-bg);   /* พื้นกล่อง LINE เด่น = เขียวเข้มพรีเมียม ตัดกับพื้นหน้าขาว */
  --contact-line-padding: var(--spacing-xl);         /* ช่องไฟภายในกล่อง LINE ให้โปร่ง ดูเป็นพระเอก */
  --contact-line-gap: var(--spacing-xl);             /* ช่องไฟระหว่างกลุ่มข้อความ ↔ QR ในกล่อง LINE */
  --contact-line-max-width: 920px;                   /* ความกว้างสูงสุดกล่อง LINE (แคบกว่า container ให้ 2 กลุ่มอยู่ใกล้กัน) */
  --contact-line-btn-padding: 0.8rem 1.75rem;        /* ปุ่ม LINE ในกล่องนี้ใหญ่กว่าปุ่มปกติ ให้เป็น CTA เด่น กดง่าย */
  --contact-qr-size: 190px;                          /* ขนาด QR ในกล่อง LINE - desktop (ใหญ่ชัด สแกนง่าย) */
  --contact-qr-size-mobile: 168px;                   /* ขนาด QR - มือถือ (ยังต้องใหญ่พอสแกน) */
  --contact-icon-circle-size: 52px;                  /* วงกลมไอคอนนำหน้าช่องทางติดต่อ (touch target แตะง่าย) */
  --contact-icon-size: 1.4rem;                       /* ขนาดตัวไอคอนในวงกลม */
  --contact-icon-bg: #fdeaec;                        /* พื้นวงกลมไอคอน: แดงแบรนด์จางมาก ให้ไอคอนแดงเด่นแบบสุภาพ */
  --contact-icon-color: var(--color-primary);        /* สีไอคอนช่องทางติดต่อ = แดงแบรนด์ */
  --contact-card-gap: var(--spacing-md);             /* ช่องไฟระหว่างการ์ดช่องทางติดต่อ */
  --contact-section-max-width: 860px;                /* ความกว้างสูงสุดของกลุ่มการ์ดช่องทางติดต่อ + แผนที่ ให้ layout อยู่กลาง ไม่ยืดเต็มจอกว้าง */
  --contact-map-height: 420px;                       /* ความสูงแผนที่ embed - desktop */
  --contact-map-height-mobile: 300px;                /* ความสูงแผนที่ embed - มือถือ */

  /* ---------- ระยะเวลา transition (ใช้ cubic-bezier แทน ease ธรรมดา ให้จังหวะเข้า-ออกนุ่มขึ้น) ---------- */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}