/* =========================================================
   SAFFRON LABORATORIES — Pixel-Accurate Reconstruction
   Base stylesheet. Responsive overrides live in responsive.css
   ========================================================= */
/* [อธิบาย S-LAB] ภาพรวม CSS: ไฟล์นี้กำหนดฟอนต์และตัวแปรสี พื้นฐานของทุกหน้า เมนู/ส่วนหัว แบนเนอร์ การ์ด เนื้อหาแต่ละหน้า รายละเอียดสินค้า แบบฟอร์ม การแสดงผลบนแท็บเล็ต/มือถือ และเอฟเฟกต์การเคลื่อนไหว.
   การแบ่งกลุ่มใช้คอมเมนต์หัวข้อด้านล่างเพื่อค้นหาสไตล์ตามคอมโพเนนต์ได้ง่ายขึ้น; คอมเมนต์นี้ไม่มีผลต่อการแสดงผล. */

:root{
  --green:#214f2b;
  --green-mid:#3f7f3c;
  --green-soft:#6c9958;
  --cream:#f4f0e4;
  --white:#ffffff;
  --yellow:#fff739;
  --text:#23302a;
  --max:1400px;

  --font-display: "Cloud Lucent", "Noto Sans Thai", sans-serif;
  --sans: "Noto Sans Thai", "Manrope", sans-serif;
  --serif: var(--font-display);
  --font-body: "Noto Sans Thai", "Manrope", sans-serif;
  --font-ui: "Noto Sans Thai", "Manrope", sans-serif;
  --font-th:"Noto Sans Thai", sans-serif;
  --font-en:"Manrope", "Noto Sans Thai", sans-serif;
}

@font-face{
  font-family:"Cloud Lucent";
  src:url("../fonts/Cloud-Lucent-Regular.ttf?v=20261020-product-modal-certificate-simple-v9") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:var(--white);
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;background:none;border:0}
h1,h2,h3{margin:0}
p{margin:0}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}
:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}

.wrap{width:min(var(--max), calc(100% - 80px));margin:0 auto}

/* เมนูทั่วไป */

/* =========================
   CTA
   ========================= */

/* Hover */

/* อยู่หน้า Inquiry */

/* =================================
   HOVER
   พื้นเขียว + เส้นขาว
   ================================= */

/* =================================
   OPEN
   พื้นขาว + X สีดำ
   ================================= */

/* X */

/* ---------------------------------------------------------
   HERO BANNER (homepage — real composed asset)
--------------------------------------------------------- */
.ref-hero{width:100%;overflow:hidden;background:var(--cream)}
.ref-hero img{width:100%;height:auto}

/* ---------------------------------------------------------
   PILLARS Products
--------------------------------------------------------- */
.ref-products {
  isolation: isolate;
}

.ref-products::before {
  content: "";
  position: absolute;
  inset: 0;

  background-image:
  linear-gradient(
      #2f7429ca,
      #005d1a00
    ),
    url("../images/bg_products.webp");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  opacity: 1;
  z-index: -1;
}

.ref-products .wrap {
  position: relative;
  z-index: 1;
}
.ref-pillars .wrap,.ref-products .wrap{position:relative;z-index:1}
.ref-pillar-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0;max-width:1040px;margin:0 auto}
.ref-pillar{padding:34px 28px 38px;text-align:center;min-height:0;display:flex;flex-direction:column;align-items:center}
.ref-pillar + .ref-pillar{border-left:0;border-top:1px solid rgba(255,255,255,.18)}
.ref-pillar h2{margin:0 0 18px;color:var(--yellow);font-size:44px;line-height:1.15;letter-spacing:-.02em}
.ref-pillar p,.ref-values{margin:0;max-width:60ch;font:400 16px/1.85 var(--font-th);color:rgba(255,255,255,.96)}
.ref-values{text-align:left;display:inline-block;line-height:1.8}
.ref-values span{color:var(--yellow);font-weight:700;display:inline-block;width:20px}

/* ---------------------------------------------------------
   FACTORY QUOTE — "เป็นมากกว่าผู้ผลิต"
--------------------------------------------------------- */
.ref-about{position:relative;z-index:1;min-height:720px;margin-top:-34px;padding-top:34px;display:flex;align-items:center;color:#fff;overflow:hidden;border-radius:0 0 300px 300px / 0 0 clamp(54px,7vw,104px) clamp(54px,7vw,104px)}
.ref-about img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ref-about:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg, rgb(0 0 0 / 99%) 0%, rgb(0 0 0 / 80%) 40%, rgb(0 0 0 / 40%) 75%, rgb(0 0 0 / 1%) 100%)}
.ref-about-content{position:relative;z-index:1;width:min(760px,100%);padding:100px 0}
.ref-about-content h4{margin:0 0 22px;color:#fff;font-size:clamp(40px,6vw,90px);line-height:.98;letter-spacing:-0em}
.ref-about-content p{margin:0 0 12px;max-width:680px;color:rgba(255,255,255,.92);font-size:18px;line-height:1.8}
.ref-outline {display:inline-flex;align-items:center;gap:10px;margin-top:8px;border:1px solid #fff;color:#fff;padding:12px 35px;font:600 12px/1 var(--font-en);transition:background .25s,color .25s;border-radius:2px}
.ref-outline:hover {background:#fff;color:var(--green)}

/* ---------------------------------------------------------
   PRODUCTS — dark green, 3x2 grid
--------------------------------------------------------- */
.ref-products{position:relative;background:var(--green);padding:60px 0 78px;overflow:hidden}
.ref-products h2{margin:0 0 34px;color:var(--yellow);font-size:clamp(44px,6.5vw,72px);line-height:.95;letter-spacing:-.03em}
.ref-product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.ref-card{position:relative;aspect-ratio:4/5;overflow:hidden;background:#ddd}
.ref-card img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.ref-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 48%,rgba(20,30,10,.68) 100%)}
.ref-card:hover img{transform:scale(1.045)}
.ref-card-title{position:absolute;left:18px;right:18px;bottom:16px;z-index:1;display:flex;gap:10px;align-items:baseline;color:var(--yellow);font:400 23px/1 var(--font-display);text-shadow:0 1px 2px rgba(0,0,0,.25)}
.ref-card-title .n{font-size:24px}
.ref-card-desc{margin-top:14px;font-size:13px;line-height:1.7;color:rgba(255,255,255,.82);max-width:26ch}

/* ---------------------------------------------------------
   QUALITY — blurred lab photo, centered
--------------------------------------------------------- */
.ref-quality{position:relative;isolation:isolate;min-height:510px;margin-top:-32px;padding:136px 24px 82px;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;color:#fff;border-radius:50% 50% 0 0 / 150px 150px 0 0}
.ref-quality img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(1.5px) saturate(.82);transform:scale(1.035);border-radius:inherit}
.ref-quality:after{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;background:linear-gradient(180deg,rgba(241,247,239,.52),rgba(68,114,74,.28) 38%,rgba(38,82,44,.55))}
.ref-quality:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border:1px solid rgba(255,255,255,.20);border-bottom:0;border-radius:inherit}
.ref-quality .wrap{position:relative;z-index:2}
.ref-quality h2{margin:0 auto 18px;color:var(--yellow);max-width:760px;font-size:clamp(40px,6.4vw,68px);line-height:1;letter-spacing:-.03em;text-shadow:0 2px 5px rgba(0,0,0,.1)}
.ref-quality p{margin:0 auto;max-width:760px;font-size:15px;line-height:1.8;color:#fff}
.ref-quality .ref-outline {display:inline-flex;align-items:center;gap:10px;margin-top:12px;border:1px solid #fff;color:#fff;padding:12px 35px;font:600 12px/1 var(--font-en);transition:background .25s,color .25s;border-radius:2px}
.ref-quality .ref-outline:hover {background: #fff; color: var(--green);}

/* ---------------------------------------------------------
   GENERIC CONTENT SECTIONS (interior pages)
--------------------------------------------------------- */
.ref-section{padding:88px 0}
.ref-section.cream{background:var(--cream)}
.ref-section.white{background:var(--white)}
.ref-section-head{max-width:680px;margin-bottom:48px}
.ref-section-head .eyebrow{font:700 11px/1 var(--font-en);letter-spacing:.14em;text-transform:uppercase;color:var(--green-mid)}
.ref-section-head h2{margin-top:14px;font-size:clamp(28px,3.4vw,42px);color:var(--green)}
.ref-section-head p{margin-top:16px;font-size:15.5px;line-height:1.8;color:#4a4a4a}

.ref-two-col{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.ref-two-col img{width:100%;height:100%;object-fit:cover;border-radius:2px}

.ref-placeholder{
  font:400 13.5px/1.8 var(--font-en);color:#8a8578;
  border:1px dashed #cdc6b0;background:var(--cream);
  padding:18px 22px;border-radius:2px;
}

.ref-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(33,79,43,.12);margin-top:8px}
.ref-step{background:var(--white);padding:30px 24px;min-height:170px;display:flex;flex-direction:column;justify-content:space-between}
.ref-step .n{font:400 26px/1 var(--font-display);color:var(--green-soft)}
.ref-step .t{margin-top:auto;font:700 12px/1.4 var(--font-en);letter-spacing:.02em;text-transform:uppercase;color:var(--green)}

.ref-values-list{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
.ref-values-list li{display:flex;gap:12px;padding:16px 0;border-bottom:1px solid rgba(33,79,43,.12);font:600 14.5px/1.5 var(--font-en);color:var(--text)}
.ref-values-list li b{color:var(--green-mid)}

.ref-contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:70px}
.ref-info-item{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid rgba(33,79,43,.1)}
.ref-info-item h4{font:700 11px/1 var(--font-en);letter-spacing:.06em;text-transform:uppercase;color:var(--text)}
.ref-info-item p{margin-top:6px;font-size:14.5px;color:#555;line-height:1.7}
.ref-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.ref-form-grid .full{grid-column:1 / -1}
.ref-field label{display:block;font:700 11px/1 var(--font-en);letter-spacing:.05em;text-transform:uppercase;color:#767267;margin-bottom:8px}
.ref-field input,.ref-field select,.ref-field textarea{
  width:100%;border:1px solid rgba(33,79,43,.22);background:#fff;border-radius:2px;
  padding:13px 15px;font:400 14px/1.5 var(--font-en);color:var(--text)
}
.ref-field textarea{min-height:120px;resize:vertical}
.ref-field input:focus,.ref-field select:focus,.ref-field textarea:focus{outline:none;border-color:var(--green-mid)}
.ref-submit{margin-top:24px}
.ref-form-note{margin-top:16px;font:600 13px/1.5 var(--font-en);color:var(--green-mid);display:none}
.ref-form-note.show{display:block}

/* Cloud Lucent font-face is declared at the top of this stylesheet. */

/* ---------------------------------------------------------
   SCROLL REVEAL
--------------------------------------------------------- */
.ref-reveal{opacity:0;transform:translateY(28px)}
.ref-reveal.in{opacity:1;transform:translateY(0)}

/* Mobile full-screen menu state is applied to .ref-links itself
   (see responsive.css) so no separate markup is required. */

/* =========================================================
   Cloud Lucent system + subtle type shadow
   ========================================================= */
body{font-family:var(--font-body);text-shadow:none;}
.logo,.logo-lockup .lt .l1,.diff-num,.ing-card h4,.cat-card .label h3,.proc-num,.mfg-step .n,.qf-item .txt,.oem-step .n,.confirm-state h3,.footer-brand .logo-f,.anniv-text h1,.quote-copy .qmark,.pp-tile .cap .num{
  font-family:var(--font-display);
  text-shadow:0 2px 3px rgba(24,40,28,.14);
}
.nav-links a,.btn,.eyebrow,.nav-v2 .logo-lockup .lt .l2,.footer-v2 .footer-nav-v2 h4{
  text-shadow:0 1px 2px rgba(24,40,28,.10);
}
input,textarea,select,button{font-family:"Noto Sans Thai","Manrope",sans-serif;}

/* =========================================================
   Cloud Lucent Strong
   ========================================================= */

strong,
b {
  font-family: inherit;
  font-weight: 700;
}

/* ---------------------------------------------------------
   About — floral banner (About page)
--------------------------------------------------------- */
.ref-about-banner {
  background: var(--green) url("../images/bg_concept.webp") center/cover no-repeat;
  padding: 80px 0 120px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.ref-about-banner .wrap {
  position:relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ref-about-banner:before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(33, 79, 43, 0.202);
  z-index:0;
}

.ref-about-banner:after{
  content:"";
  position:absolute;
  left:-8%;
  bottom:-1px;
  width:116%;
  height:80px;
  background:rgb(255, 255, 255);
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
  z-index:1;
}

.ref-about-banner h1,
.ref-about-banner p {
  width: 100%;
  max-width: 1000px;
}

.ref-about-banner h1 {
  color: var(--white);
  font-size: clamp(64px, 4.6vw, 128px);
  line-height: 1.12;
  margin: 0 0 18px;
  text-align: left;
}

.ref-about-banner p {
  color: var(--yellow);
  font-size: 15px;
  line-height: 1.85;
  margin: 0;
  text-align: left;
}

/* ---------------------------------------------------------
   PURPOSE — "We create with purpose." two-col (About page)
--------------------------------------------------------- */
.ref-purpose .ref-two-col{grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.ref-purpose h2{line-height:1.12;color:var(--text);margin:0 0 22px}
.ref-purpose img {width: 100%; height: 400px; object-fit: cover; border-radius: 40px; box-shadow: 0 18px 44px rgba(20,40,20,.16)}

/* ---------------------------------------------------------
   COSMETICS MANUFACTURER — product collage + bottom fade
   Artwork is decorative; headings remain real HTML for SEO/accessibility.
--------------------------------------------------------- */
.ref-cosmetics-banner{
  position:relative;
  height:clamp(520px,45.4375vw,900px);
  min-height:520px;
  padding:clamp(54px,5.1vw,84px) 0 0;
  overflow:hidden;
  isolation:isolate;
  background-color:#fff;
  background-image:url("../images/cosmetics-products.webp");
  background-repeat:no-repeat;
  background-position:center top;
  background-size:cover;
}
.ref-cosmetics-banner::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.035) 0%,rgba(255,255,255,0) 52%);
}
.ref-cosmetics-banner::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:clamp(145px,17vw,280px);
  z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,253,247,0) 0%,rgba(255,253,247,.16) 28%,rgba(255,253,247,.7) 72%,var(--white) 100%);
}
.ref-cosmetics-banner > .wrap{
  position:relative;
  z-index:2;
  text-align:center;
}
.ref-cosmetics-banner .ref-reveal{
  width:100%;
  max-width:800px;
  margin:0 auto;
}
.ref-cosmetics-banner h2{
  max-width:none;
  margin:0 auto;
  color:#08701f;
  font-family:var(--font-display);
  font-size:clamp(48px,5.1vw,82px);
  font-weight:700;
  line-height:1.04;
  letter-spacing:-.025em;
  text-align:center;
  text-wrap:balance;
}
.ref-cosmetics-banner p{
  max-width:630px;
  margin:18px auto 0;
  color:#126b22;
  font-family:var(--font-body);
  font-size:clamp(15px,1.25vw,20px);
  font-weight:700;
  line-height:1.28;
  text-align:center;
  text-wrap:balance;
}

/* ---------------------------------------------------------
   STANDARDS — มาตรฐานของบริษัท (About page)
--------------------------------------------------------- */
.ref-standards{padding:74px 0 92px;background:var(--white);text-align:center}
.ref-standards .ref-divider{
  display:flex;align-items:center;justify-content:center;gap:18px;
  font:600 40px/1 var(--font-th);color:var(--green-mid);margin:0 0 42px;
}
.ref-standards .ref-divider:before,.ref-standards .ref-divider:after{content:"";flex:1 1 auto;max-width:220px;height:2px;background:linear-gradient(90deg,rgba(33,79,43,0),rgba(33,79,43,.35))}
.ref-standards .ref-divider:after{background:linear-gradient(90deg,rgba(33,79,43,.35),rgba(33,79,43,0))}
.ref-standards img{margin:0 auto;max-width:990px;width:100%;height:auto}

.standards-badges{display:flex;align-items:center;justify-content:center;gap:72px;flex-wrap:wrap;margin:0 0 56px;}
.standards-badges img{height:152px;width:auto;object-fit:contain;margin:0;max-width:none;}

.standards-certs{display:grid;grid-template-columns:repeat(3,1fr);gap:100px;max-width:1040px;margin:0 auto;text-align:center;}
.standards-cert{margin:0;}
.standards-cert img{display:block;width:100%;height:auto;max-width:none;background:var(--white);}
.standards-cert figcaption{margin-top:18px;}
.standards-cert figcaption strong{display:block;font:700 17px/1.3 var(--font-th);color:var(--text);margin-bottom:6px;}
.standards-cert figcaption span{display:block;font:400 14px/1.6 var(--font-th);color:var(--text);}

@media (max-width:900px){
  .standards-badges{gap:36px;margin-bottom:40px;}
  .standards-badges img{height:52px;}
  .standards-certs{grid-template-columns:1fr;gap:34px;max-width:360px;}
}

/* ---------------------------------------------------------
   PILLARS — วิสัยทัศน์ / ค่านิยมองค์กร / นโยบายคุณภาพ
--------------------------------------------------------- */

.ref-pillars {
  position: relative;
  background: var(--green);
  color: #fff;
  padding: 100px 0 100px;
  overflow: hidden;
  isolation: isolate;
}

.ref-pillars::before {
  content: "";
  position: absolute;
  inset: 0;

  background-image:
    linear-gradient(
      #2f74295a,
      #005d1a68
    ),
    url("../images/bg_visoin.webp");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  z-index: -1;
}

.ref-pillars .wrap {
  position: relative;
  z-index: 1;
}
/* ---------------------------------------------------------
   SERVICE — hero banner (floral, same treatment as About)
--------------------------------------------------------- */
.ref-service-banner {
  background: var(--green) url("../images/bg_concept.webp") center/cover no-repeat;
  padding: 70px 0;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.ref-service-banner .wrap {
  position:relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ref-service-banner:before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(33, 79, 43, 0.202);
  z-index:0;
}

.ref-service-banner:after{
  content:"";
  position:absolute;
  left:-8%;
  bottom:-1px;
  width:116%;
  height:80px;
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
  z-index:1;
}

.ref-service-banner h1,
.ref-service-banner p {
  width: 100%;
  max-width: 1000px;
}

.ref-service-banner h1 {
  color: var(--white);
  font-size: clamp(64px, 4.6vw, 128px);
  line-height: 1.12;
  margin: 0 0 18px;
  text-align: left;
}

.ref-service-banner p {
  color: var(--yellow);
  font-size: 15px;
  line-height: 1.85;
  margin: 0;
  text-align: left;
}

/* ---------------------------------------------------------
   WHAT MAKES SAFFRON DIFFERENT — blurred photo + outline cards
--------------------------------------------------------- */
.ref-different{position:relative;padding:100px 0;overflow:hidden;isolation: isolate;color:#fff}
.ref-different .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(1px)}
.ref-different:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,25,15,.35),rgba(20,25,15,.55))}
.ref-different .wrap{position:relative;z-index:1}
.ref-different h2{line-height:1.18;color:var(--white);margin:0 0 44px;max-width:600px}
.ref-diff-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.ref-diff-card{border:1px solid rgba(255, 255, 255, 0.55);padding:26px 22px;min-height:190px}
.ref-diff-card h3{color:var(--yellow);font:400 22px/1.3 var(--font-display);margin:0 0 14px;text-align: center}
.ref-diff-card p{color:rgba(255,255,255,.92);font-size:15px;line-height:1.75;margin:0;text-align: center}

/* ---------------------------------------------------------
   RESEARCH & DEVELOPMENT — checklist
--------------------------------------------------------- */
.ref-rnd{padding:90px 0}
.ref-rnd h2{color:var(--green);margin:0 0 40px}
.ref-checklist{display:grid;grid-template-columns:1fr 1fr;gap:6px 60px}
.ref-checklist li{display:flex;align-items:center;gap:14px;padding:18px 0;border-bottom:1px solid rgba(33,79,43,.16);font:600 16px/1.3 var(--font-th);color:var(--text);list-style:none}
.ref-checklist li:before{content:"✔";color:var(--green-mid);font-size:15px;flex:0 0 auto}

/* ---------------------------------------------------------
   PRODUCTS PAGE — hero banner (leaf pattern, standalone page)
--------------------------------------------------------- */
.ref-products-hero {
  background: var(--green) url("../images/bg_products.webp") center/cover no-repeat;
  padding: 70px 0;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.ref-products-hero .wrap {
  position:relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ref-products-hero:before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(33, 79, 43, 0.202);
  z-index:0;
}

.ref-products-hero:after{
  content:"";
  position:absolute;
  left:-8%;
  bottom:-1px;
  width:116%;
  height:80px;
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
  z-index:1;
}

.ref-products-hero h1,
.ref-products-hero p {
  width: 100%;
  max-width: 1000px;
}

.ref-products-hero h1 {
  color: var(--white);
  font-size: clamp(64px, 4.6vw, 128px);
  line-height: 1.12;
  margin: 0 0 18px;
  text-align: left;
}

.ref-products-hero p {
  color: var(--yellow);
  font-size: 15px;
  line-height: 1.85;
  margin: 0;
  text-align: left;
}

/* ---------------------------------------------------------
   PRODUCTS SHOWCASE — composite product photo (Products page)
--------------------------------------------------------- */
.ref-products-showcase{
  background:var(--cream) url("../images/products-bg-paper.webp") center/cover repeat;
  padding:70px 0;
}
.ref-products-showcase img{width:100%;height:auto;display:block}

/* ---------------------------------------------------------
   ACTIVITY PAGE — hero
--------------------------------------------------------- */
.ref-activity-hero {
  background: var(--green) url("../images/bg_activity_paper.webp") center/cover no-repeat;
  padding: 70px 0;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.ref-activity-hero .wrap {
  position:relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ref-activity-hero:before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(33, 79, 43, 0.202);
  z-index:0;
}

.ref-activity-hero:after{
  content:"";
  position:absolute;
  left:-8%;
  bottom:-1px;
  width:116%;
  height:80px;
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
  z-index:1;
}

.ref-activity-hero h1,
.ref-activity-hero p {
  width: 100%;
  max-width: 1000px;
}

.ref-activity-hero h1 {
  color: var(--white);
  font-size: clamp(64px, 4.6vw, 128px);
  line-height: 1.12;
  margin: 0 0 18px;
  text-align: left;
}

.ref-activity-hero p {
  color: var(--yellow);
  font-size: 15px;
  line-height: 1.85;
  margin: 0;
  text-align: left;
}

/* ---------------------------------------------------------
   ACTIVITY — quote + featured photo
--------------------------------------------------------- */
.ref-activity-quote{
  padding:80px 0 90px;text-align:center;
  background:var(--cream) url("../images/bg_activity_paper.webp") center top/cover no-repeat;
}
.ref-activity-quote .quote-mark{font:700 60px/1 var(--font-display);color:var(--text)}
.ref-activity-quote h2{display:inline-flex;align-items:center;gap:18px;color:var(--text);margin:0 0 40px}
.ref-activity-photo{max-width:540px;margin:0 auto;aspect-ratio:1/1;background:linear-gradient(135deg,#eef1ea,#e2e7db);border:0px dashed rgba(33,79,43,.35);display:flex;align-items:center;justify-content:center;overflow:hidden}
.ref-activity-photo img{width:100%;height:100%;object-fit:cover;display:block}
.ref-activity-photo .placeholder-label{color:var(--green-mid);font:600 16px/1.6 var(--font-th);text-align:center;padding:20px}
.ref-activity-divider{display:flex;align-items:center;justify-content:center;gap:18px;font:600 24px/1 var(--font-th);color:var(--text);margin:44px 0 0}
.ref-activity-divider:before,.ref-activity-divider:after{content:"";flex:1 1 auto;max-width:260px;height:1px;background:linear-gradient(90deg,rgba(33,79,43,0),rgba(33,79,43,.4))}
.ref-activity-divider:after{background:linear-gradient(90deg,rgba(33,79,43,.4),rgba(33,79,43,0))}

/* ---------------------------------------------------------
   ACTIVITY — photo grid
--------------------------------------------------------- */
.ref-activity-grid{
  padding:0 0 96px;
  background:var(--cream) url("../images/bg_activity_paper.webp") center bottom/cover no-repeat;
}
.ref-activity-grid .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ref-activity-tile{aspect-ratio:4/3;background:linear-gradient(135deg,#eef1ea,#e2e7db);border:1px dashed rgba(33,79,43,.3);display:flex;align-items:center;justify-content:center;overflow:hidden}
.ref-activity-tile img{width:100%;height:100%;object-fit:cover;display:block}
.ref-activity-tile .placeholder-label{color:var(--green-mid);font:600 16px/1.5 var(--font-th);text-align:center;padding:10px}

/* ---------------------------------------------------------
   CONTACT PAGE — hero
--------------------------------------------------------- */
.ref-contact-hero {
  background: var(--green) url("../images/bg_contact_paper.webp") center/cover no-repeat;
  padding: 70px 0;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.ref-contact-hero .wrap {
  position:relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ref-contact-hero:before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(33, 79, 43, 0.202);
  z-index:0;
}

.ref-contact-hero:after{
  content:"";
  position:absolute;
  left:-8%;
  bottom:-1px;
  width:116%;
  height:80px;
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
  z-index:1;
}

.ref-contact-hero h1,
.ref-contact-hero p {
  width: 100%;
  max-width: 1000px;
}

.ref-contact-hero h1 {
  color: var(--white);
  font-size: clamp(64px, 4.6vw, 128px);
  line-height: 1.12;
  margin: 0 0 18px;
  text-align: left;
}

.ref-contact-hero p {
  color: var(--yellow);
  font-size: 15px;
  line-height: 1.85;
  margin: 0;
  text-align: left;
}

/* ---------------------------------------------------------
   CONTACT — info section (paper texture bg)
--------------------------------------------------------- */
.ref-contact-info {
  background: var(--cream) url("../images/bg_contact_paper.webp") center top / cover no-repeat;
  padding: 80px 0 70px;
}

.ref-contact-info .inner {
  max-width: 600px;
  margin: 0 auto;
}

.ref-contact-info h2 {
  color: var(--text);
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 700;
}

.ref-contact-info h2.tt {
  margin-top: 36px;
}

.ref-contact-info p {
  font-size: 18px;
  line-height: 1.85;
  color: #3c4a3f;
  margin: 0;
}

/* Social */
.ref-contact-social {
  display: grid;
  grid-template-columns: repeat(2, 180px);
  justify-content: center;
  column-gap: 50px;
  margin: 38px 0 34px;
}

.ref-social-item {
  width: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Icon */
.ref-social-item .icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.ref-social-item .icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Label */
.ref-social-item .label {
  width: 120%;
  height: 20px;
  text-align: center;
  font: 700 15px/20px var(--font-en);
  color: var(--text);
  margin-bottom: 14px;
}

/* QR */
.ref-social-item .qr {
  width: 150px;
  height: 150px;
  object-fit: contain;
  display: block;
  box-sizing: border-box;
  background: #fff;
  padding: 8px;
  border: 1px solid rgba(33,79,43,.15);
}

/* Opening hours */
.ref-contact-hours {
  margin-top: 6px !important;
  font-size: 15px !important;
  color: #3c4a3f;
  text-align: center;
}

/* ---------------------------------------------------------
   CONTACT — Google Map section (replaces CTA banner on Contact page)
--------------------------------------------------------- */
.ref-contact-map {
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.ref-contact-map .map-frame,
.ref-contact-map iframe {
  display: block;
  width: 100%;
  height: 500px;
  border: 0;
}

/* ---------------------------------------------------------
   INQUIRY PAGE ("Tell Us About Your Product") — hero
--------------------------------------------------------- */

.ref-inquiry-hero:before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(33, 79, 43, 0.202);
  z-index:0;
}

.ref-inquiry-hero:after{
  content:"";
  position:absolute;
  left:-8%;
  bottom:-1px;
  width:116%;
  height:80px;
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
  z-index:1;
}

.ref-inquiry-hero h1,
.ref-inquiry-hero p {
  width: 100%;
  max-width: 1000px;
}

.ref-inquiry-hero p {
  color: var(--yellow);
  font-size: 15px;
  line-height: 1.85;
  margin: 0;
  text-align: left;
}

/* ---------------------------------------------------------
   INQUIRY — quote + form section (paper texture bg)
--------------------------------------------------------- */
.ref-inquiry-form-section{
  background:url("../images/bg_inquiry_paper.webp") center top/cover no-repeat;
  padding:80px 0 90px;
}
.ref-inquiry-form-section .quote{text-align:center;margin:0 0 48px}
.ref-inquiry-form-section .quote .quote-mark{font:700 60px/1 var(--font-display);color:var(--text)}
.ref-inquiry-form-section .quote h2{display:inline-flex;align-items:center;gap:18px;color:var(--text);margin:0}

.ref-inquiry-form{max-width:940px;margin:0 auto}
.ref-inquiry-form .row{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-bottom:26px}
.ref-inquiry-form .field.full{grid-column:1 / -1}
.ref-inquiry-form label{display:block;font:600 17px/1 var(--font-body);color:var(--text);margin-bottom:10px}
.ref-inquiry-form input,
.ref-inquiry-form select,
.ref-inquiry-form textarea{
  width:100%;border:1px solid rgba(20,20,20,.55);background:transparent;
  padding:12px 14px;font:400 15px/1.4 var(--font-en);color:var(--text);border-radius:0;
}
.ref-inquiry-form textarea{resize:vertical}
.ref-inquiry-form input:focus,
.ref-inquiry-form select:focus,
.ref-inquiry-form textarea:focus{outline:none;border-color:var(--green-mid)}
.ref-inquiry-form .submit-row{display:flex;justify-content:flex-end;align-items:center;gap:12px;margin-top:8px}
.ref-inquiry-form .inquiry-submit-button{
  display:inline-grid;grid-template-columns:minmax(0,1fr);align-items:center;justify-content:center;
  min-height:48px;min-width:245px;max-width:100%;padding:12px 24px;
  color:#fff;background:var(--green-mid);border:1px solid rgba(16,75,34,.18);border-radius:999px;
  cursor:pointer;font:700 14px/1.35 var(--font-body);white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 20px rgba(33,79,43,.13);
  transition:background-color .2s ease,box-shadow .2s ease,transform .2s ease,border-color .2s ease;
  touch-action:manipulation;
}
.ref-inquiry-form .inquiry-submit-button:hover:not(:disabled){background:var(--green);box-shadow:0 10px 24px rgba(33,79,43,.20);transform:translateY(-1px)}
.ref-inquiry-form .inquiry-submit-button:active:not(:disabled){transform:translateY(1px)}
.ref-inquiry-form .inquiry-submit-button:focus-visible{outline:3px solid rgba(212,181,47,.55);outline-offset:3px}
.ref-inquiry-form .inquiry-submit-button:disabled{cursor:wait;opacity:.92}
.inquiry-submit-face{grid-area:1/1;display:flex;align-items:center;justify-content:center;gap:9px;min-width:0;opacity:0;transform:translateY(3px);filter:blur(2px);pointer-events:none;transition:opacity .22s ease,transform .22s ease,filter .22s ease;}
.inquiry-submit-face svg{width:14px;height:14px;flex:0 0 14px;display:block}
.inquiry-submit-face [lang="en"]{font:600 11px/1.2 var(--font-en);opacity:.82}
.inquiry-submit-button[data-submit-state="idle"] [data-submit-face="idle"],
.inquiry-submit-button[data-submit-state="pending"] [data-submit-face="pending"],
.inquiry-submit-button[data-submit-state="success"] [data-submit-face="success"],
.inquiry-submit-button[data-submit-state="error"] [data-submit-face="error"]{opacity:1;transform:translateY(0);filter:blur(0)}
.inquiry-submit-button[data-submit-state="success"]{background:#1f6b3b;border-color:#2b8050}
.inquiry-submit-button[data-submit-state="error"]{background:#8a3e35;border-color:#9a4a41}
.inquiry-submit-spinner{width:13px;height:13px;border:1.7px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;flex:0 0 13px;animation:inquirySubmitSpin .78s linear infinite}
@keyframes inquirySubmitSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.inquiry-submit-face,.ref-inquiry-form .inquiry-submit-button{transition:none}.inquiry-submit-spinner{animation:none;border-color:#fff;border-right-color:rgba(255,255,255,.35)}}
.ref-inquiry-note{margin-top:16px;font:600 13px/1.5 var(--font-en);color:var(--green-mid);display:none;text-align:right}
.ref-inquiry-note.show{display:block}

/* ---------------------------------------------------------
   INQUIRY — factory photo quote banner
--------------------------------------------------------- */
.ref-inquiry-hero {
  position: relative;
  background: var(--green) url("../images/bg_inquiry_paper.webp") center / cover no-repeat;
  padding: 65px 0;
  overflow: hidden;
  isolation: isolate;
}

.ref-inquiry-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 30, 15, .25);
  z-index: -1;
}

.ref-inquiry-hero .wrap {
  position: relative;
  z-index: 1;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.ref-inquiry-hero .wrap > p,
.ref-inquiry-hero h1 {
  width: 100%;
  max-width: 812px;
}

.ref-inquiry-hero .wrap > p {
  color: var(--yellow);
  font-size: 15px;
  line-height: 1.85;
  margin: 0 0 18px;
  text-align: left;
}

.ref-inquiry-hero h1 {
  color: var(--white);
  font-size: clamp(64px, 4.6vw, 128px);
  line-height: 1.12;
  margin: 0;
  margin-top:-20px;
  text-align: left;
}
.ref-inquiry-banner {
  position: relative;
  background: var(--green) url("../images/bg_inquiry_quote.webp") center / cover no-repeat;
  padding: 65px 0;
  overflow: hidden;
  isolation: isolate;
}

.ref-inquiry-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 30, 15, .25);
  z-index: -1;
}

.ref-inquiry-banner .wrap {
  position: relative;
  z-index: 1;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.ref-inquiry-banner .wrap > p,
.ref-inquiry-hero h3 {
  width: 100%;
  max-width: 812px;
}

.ref-inquiry-banner .wrap > p {
  color: var(--white);
  font-size: 16px;
  line-height: 1.85;
  margin: 0 0 18px;
  text-align: center;
}

.ref-inquiry-banner h3 {
  color: var(--white);
  line-height: 1.12;
  margin: 0;
  margin-top:10px;
  text-align: center;
}
/* ---------------------------------------------------------
   Video -
--------------------------------------------------------- */
.video-wrapper {
  position: relative;
  width: 540px;
  height: 540px;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 24px;
}

.video-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 80px;
  height: 80px;
  margin: 0;
  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 0;
  border-radius: 50%;

  background: rgba(33, 79, 43, 0.85);
  color: #fff;

  font-size: 24px;
  line-height: 1;

  cursor: pointer;
  z-index: 10;
}

.video-play:hover {
  transform: translate(-50%, -50%) scale(1.08);
}

/* ---------------------------------------------------------
   ACTIVITY — automatic photo album / gallery
--------------------------------------------------------- */
.activity-album-section{margin-top:70px;text-align:left}
.activity-album-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:28px}
.activity-album-kicker{margin:0 0 8px;color:var(--green-mid);font:700 12px/1 var(--font-en);letter-spacing:.14em}
.activity-album-head h3{margin:0;color:var(--text);font:500 clamp(30px,4vw,48px)/1.1 var(--font-display)}
.activity-album-count{margin:0;color:#68736b;font:600 13px/1 var(--font-en);letter-spacing:.04em}
.activity-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.activity-gallery-item{position:relative;display:block;width:100%;padding:0;border:0;aspect-ratio:4/3;overflow:hidden;background:#e8ece5;cursor:pointer;text-align:left}
.activity-gallery-item img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .5s ease}
.activity-gallery-overlay{position:absolute;inset:auto 14px 14px 14px;display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:rgba(255,255,255,.92);color:var(--text);font:700 11px/1 var(--font-en);letter-spacing:.1em;opacity:0;transform:translateY(8px);transition:.3s ease}
.activity-gallery-overlay b{font-size:16px;font-weight:400;line-height:1}
.activity-gallery-number{position:absolute;left:14px;top:14px;padding:7px 9px;background:rgba(255,255,255,.9);color:var(--text);font:700 10px/1 var(--font-en);letter-spacing:.08em}
.activity-gallery-item:hover img{transform:scale(1.045)}
.activity-gallery-item:hover .activity-gallery-overlay{opacity:1;transform:translateY(0)}
.activity-gallery-empty{padding:40px 20px;margin:0;text-align:center;color:#68736b;background:rgba(255,255,255,.35)}

/* Fullscreen viewer */
.activity-lightbox{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:50px 90px;background:rgba(10,20,12,.92)}
.activity-lightbox[hidden]{display:none}
.activity-lightbox figure{margin:0;max-width:min(1100px,90vw);max-height:90vh;text-align:center}
.activity-lightbox figure img{display:block;max-width:100%;max-height:82vh;width:auto;height:auto;object-fit:contain;box-shadow:0 20px 70px rgba(0,0,0,.35)}
.activity-lightbox figcaption{margin-top:14px;color:#fff;font:500 13px/1.5 var(--font-en);letter-spacing:.05em}
.activity-lightbox-close,.activity-lightbox-prev,.activity-lightbox-next{position:absolute;z-index:2;border:0;color:#fff;background:rgba(255,255,255,.12);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s ease}
.activity-lightbox-close{top:22px;right:26px;width:46px;height:46px;border-radius:50%;font-size:32px;font-weight:300}
.activity-lightbox-prev,.activity-lightbox-next{top:50%;width:54px;height:54px;border-radius:50%;font-size:40px;font-weight:300;transform:translateY(-50%)}
.activity-lightbox-prev{left:24px}.activity-lightbox-next{right:24px}
.activity-lightbox-close:hover,.activity-lightbox-prev:hover,.activity-lightbox-next:hover{background:rgba(255,255,255,.22)}
.activity-lightbox-open{overflow:hidden}

/* Keep the 540 x 540 activity video square on all breakpoints */
.video-wrapper{aspect-ratio:1/1}

@media (max-width:767px){
  .activity-album-section{margin-top:48px}
  .activity-album-head{align-items:flex-start;flex-direction:column;gap:8px}
  .activity-gallery{grid-template-columns:repeat(2,1fr);gap:8px}
  .activity-gallery-overlay{opacity:1;transform:none;inset:auto 8px 8px 8px;padding:8px}
  .activity-gallery-number{left:8px;top:8px}
  .activity-lightbox{padding:45px 14px 30px}
  .activity-lightbox-prev,.activity-lightbox-next{width:42px;height:42px;font-size:30px}
  .activity-lightbox-prev{left:8px}.activity-lightbox-next{right:8px}
  .activity-lightbox figure{max-width:94vw}
}

/* =========================================================
   INQUIRY SUCCESS MODAL
========================================================= */
.inquiry-modal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease, visibility .25s ease;
  z-index:5000;
}
.inquiry-modal.show{
  visibility:visible;
  opacity:1;
  pointer-events:auto;
}
.inquiry-modal-backdrop{
  position:absolute;
  inset:0;
  z-index:0;
  background:rgba(18,31,21,.58);
  backdrop-filter:blur(4px);
}
.inquiry-modal-box{
  position:relative;
  z-index:1;
  isolation:isolate;
  flex:0 1 460px;
  width:min(460px,100%);
  padding:48px 36px 34px;
  background:#fff;
  border-radius:18px;
  box-shadow:0 24px 70px rgba(0,0,0,.22);
  text-align:center;
  transform:translateY(12px) scale(.98);
  transition:transform .25s ease;
}
.inquiry-modal.show .inquiry-modal-box{
  transform:translateY(0) scale(1);
}
.inquiry-modal-close{
  position:absolute;
  top:12px;
  right:16px;
  width:36px;
  height:36px;
  font-size:28px;
  line-height:1;
  color:#68736b;
}
.inquiry-modal-icon{
  width:68px;
  height:68px;
  margin:0 auto 20px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--green);
  color:#fff;
  font-size:34px;
  font-weight:700;
}
.inquiry-modal-icon.error{
  background:#9b3b2f;
}
.inquiry-modal-box h3{
  margin:0 0 12px;
  color:var(--green);
  font-size:30px;
}
.inquiry-modal-box p{
  margin:0 auto 26px;
  max-width:34ch;
  color:#59645d;
  font-size:15px;
  line-height:1.8;
}
.inquiry-modal-ok{
  min-width:120px;
  padding:13px 28px;
  border-radius:3px;
  background:var(--green);
  color:#fff;
  font:600 13px/1 var(--font-en);
}
.inquiry-modal-ok:hover{
  background:var(--green-mid);
}
body.modal-open{
  overflow:hidden;
}

/* Honeypot field: kept in the DOM (so simple bots that auto-fill every
   input still trip it) but hidden from real visitors and skipped by
   screen readers / keyboard tabbing. Not display:none, since some bots
   skip those — off-screen positioning is harder for scripts to detect. */
.hp-field{
  position:absolute;
  left:-9999px;
  top:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* ---------------------------------------------------------
   PARTNERS — subtle curved, inertia-based infinite gallery
   Native CSS/JS adaptation to the existing static S-LAB site.
--------------------------------------------------------- */
.ref-partners{
  width:100%;
  padding:78px 0 82px;
  background:var(--cream);
  overflow:hidden;
  position:relative;
  isolation:isolate;
}
.ref-partners-head{
  width:min(var(--max), calc(100% - 80px));
  margin:0 auto 42px;
  text-align:center;
}
.ref-partners-kicker{
  margin:0 0 12px;
  color:var(--green-mid);
  font:700 11px/1 var(--font-en);
  letter-spacing:.18em;
  text-transform:uppercase;
}
.ref-partners-head h2{
  margin:0;
  color:var(--text);
  font-size:clamp(30px,4vw,48px);
  line-height:1.12;
}
.ref-partners-marquee{
  width:100%;
  max-width:100%;
  overflow:hidden;
  position:relative;
  padding:16px 0 24px;
  cursor:grab;
  user-select:none;
  -webkit-user-select:none;
  touch-action:pan-y;
  outline:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
}
.ref-partners-marquee:focus-visible{
  outline:2px solid var(--green-mid);
  outline-offset:-2px;
}
.ref-partners-marquee.is-dragging{cursor:grabbing;}
.ref-partners-track{
  width:max-content;
  position:relative;
  display:flex;
  align-items:center;
  gap:18px;
  padding:0 2px;
  transform:translate3d(0,0,0);
  will-change:transform;
}
.ref-partner-item{
  box-sizing:border-box;
  flex:0 0 clamp(168px,18vw,220px);
  height:120px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px 28px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(33,79,43,.10);
  border-radius:12px;
  box-shadow:0 8px 24px rgba(20,40,20,.06);
  transform-origin:center center;
  will-change:transform;
  backface-visibility:hidden;
}
.ref-partner-item img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  -webkit-user-drag:none;
}
.ref-partner-item:hover{box-shadow:0 12px 30px rgba(20,40,20,.10);}
@media (prefers-reduced-motion:reduce){
  .ref-partner-item{will-change:auto;}
}
@media (max-width:767px){
  .ref-partners{padding:58px 0 62px}
  .ref-partners-head{width:calc(100% - 40px);margin-bottom:26px;}
  .ref-partners-head h2{font-size:30px}
  .ref-partners-track{gap:10px}
  .ref-partner-item{flex-basis:156px;height:94px;padding:14px 18px;border-radius:10px}
  .ref-partners-marquee{padding:10px 0 18px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);}
}

.catalog-intro{color:rgba(255,255,255,.82);max-width:650px;font-size:16px;line-height:1.8;margin:0}
.product-filter{transition:.25s ease}
.product-filter:hover,.product-filter.is-active{background:var(--green);color:var(--white);border-color:var(--green)}

.product-category{color:var(--green);font:700 10px/1.4 Manrope,sans-serif;letter-spacing:.14em;margin-bottom:7px}
.catalog-note{font:400 12px/1.7 "Noto Sans Thai",sans-serif;color:rgba(32,56,37,.5);padding-top:22px}
@media(max-width:520px){.product-toolbar{gap:6px}.product-filter{padding:9px 12px;font-size:11px}}

/* =========================================================
   S-LAB PRODUCT DETAIL — PANAOSOD INSPIRED CATALOG LAYOUT
   ========================================================= */
.slab-detail-page{background:var(--cream) url("../images/products-bg-paper2.webp") center/cover repeat;padding:28px 0 62px;min-height:680px}
.slab-detail-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(390px,.98fr);gap:36px;align-items:start}
.slab-gallery{min-width:0}.slab-main-image{position:relative;height:520px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:zoom-in}.slab-main-image img{width:100%;height:100%;object-fit:contain;display:block}.slab-image-full{position:absolute;right:15px;bottom:14px;width:42px;height:42px;display:flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.96);color:#1e2c22;cursor:pointer;box-shadow:0 5px 18px rgba(0,0,0,.12);z-index:6;transition:background .2s ease,transform .2s ease,box-shadow .2s ease}.slab-gallery-thumbs-wrap{position:relative;margin-top:8px;padding:0 28px}.slab-thumbs{display:flex;gap:2px;height:74px;background:transparent;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scroll-snap-type:x proximity;overscroll-behavior-x:contain;touch-action:pan-x;scrollbar-width:none}.slab-thumbs::-webkit-scrollbar{display:none}.slab-thumb{flex:0 0 20%;min-width:0;border:0;border-right:1px solid #e6e6e6;background:#fff;padding:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;scroll-snap-align:center}.slab-thumb.is-active{outline:1px solid #d8c800;outline-offset:-1px}.slab-thumb img{width:100%;height:100%;object-fit:contain}.slab-gallery-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:34px;height:54px;border:0;border-radius:10px;background:rgba(255,255,255,.94);color:#1f2a22;font-size:42px;line-height:44px;font-family:Georgia,serif;cursor:pointer;box-shadow:0 4px 14px rgba(32,56,37,.10);display:flex;align-items:center;justify-content:center;transition:opacity .2s ease,transform .2s ease,background .2s ease}.slab-gallery-arrow.prev{left:-2px}.slab-gallery-arrow.next{right:-2px}.slab-gallery-arrow:hover:not(:disabled){background:#fff;transform:translateY(-50%) scale(1.04)}.slab-gallery-arrow:disabled{opacity:.25;cursor:default}.slab-gallery-arrow.is-hidden{display:none}.slab-detail-content{padding:4px 0 0 0}.slab-detail-cat{font-family:Manrope,sans-serif;font-weight:700;font-size:13px;letter-spacing:.04em;color:#1f2a22}.slab-detail-content h1{font-family:var(--font-display);color:#20582e;font-weight:400;font-size:clamp(48px,5vw,66px);line-height:.94;letter-spacing:-.045em;margin:8px 0 12px}.slab-detail-thai{font-family:"Noto Sans Thai",sans-serif;color:#1f2a22;font-size:18px;margin:0 0 23px}.slab-accordions{border-top:1px solid transparent}.slab-accordion{border-bottom:0}.slab-accordion button{width:100%;display:flex;justify-content:space-between;align-items:center;background:transparent;border:0;padding:17px 5px 17px 0;cursor:pointer;color:#202720;font-family:var(--font-display);font-size:24px;font-weight:400;text-align:left}.slab-accordion button b{font-family:Arial,sans-serif;font-weight:700}.slab-accordion-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease}.slab-accordion-panel p{overflow:hidden;margin:0;padding:0 45px 0 0;font:400 14px/1.9 "Noto Sans Thai",sans-serif;color:rgba(31,39,32,.7)}.slab-accordion.is-open .slab-accordion-panel{grid-template-rows:1fr}.slab-accordion.is-open .slab-accordion-panel p{padding-bottom:17px}
.slab-related-section{background:var(--cream) url("../images/products-bg-paper2.webp") center/cover repeat;padding:26px 0 82px}.slab-related-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}.slab-related-heading h2{font-family:var(--font-display);font-size:32px;line-height:1.05;font-weight:400;letter-spacing:-.025em;color:#171c18;margin:0}.slab-related-heading a{font:400 16px/1 Manrope,sans-serif;text-decoration:none;color:#202620;background:#fff;padding:10px 14px;border-radius:14px;box-shadow:0 1px 4px rgba(0,0,0,.04)}.slab-related-wrap{position:relative}.slab-related-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 0 8px}.slab-related-track::-webkit-scrollbar{display:none}.slab-related-card{flex:0 0 calc((100% - 28px)/3);background:#fff;text-decoration:none;color:#171d18;scroll-snap-align:start;padding-bottom:20px}.slab-related-img{height:310px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}.slab-related-img img{width:100%;height:100%;object-fit:contain;transition:transform .45s ease}.slab-related-card:hover .slab-related-img img{transform:scale(1.15)}.slab-related-card h3{font-family:var(--font-display);font-size:24px;font-weight:400;line-height:1.08;letter-spacing:-.02em;color:#1c211d;margin:19px 18px 4px}.slab-related-card p{font-family:"Noto Sans Thai",sans-serif;font-size:14px;margin:0 18px;color:#272b28}.slab-related-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:54px;height:54px;border:0;border-radius:50%;background:transparent;color:#c5c5c5;font-size:70px;font-family:Georgia,serif;line-height:40px;cursor:pointer}.slab-related-arrow.prev{left:-27px}.slab-related-arrow.next{right:-27px}.slab-related-progress{height:3px;background:rgba(255,255,255,.82);margin-top:16px;position:relative}.slab-related-progress span{display:block;height:4px;width:0%;background:#4d8b43;transition:width .3s ease}.slab-lightbox img{max-width:94vw;max-height:90vh;object-fit:contain;background:#fff}.slab-lightbox-close{position:absolute;right:25px;top:15px;border:0;background:transparent;color:#fff;font-size:45px;font-weight:300;cursor:pointer}
@media(max-width:900px){.slab-detail-grid{grid-template-columns:1fr;gap:30px}.slab-main-image{height:min(72vw,520px)}.slab-detail-content h1{font-size:clamp(43px,9vw,62px)}.slab-related-card{flex-basis:calc((100% - 14px)/2)}.slab-related-arrow.prev{left:-15px}.slab-related-arrow.next{right:-15px}}
@media(max-width:600px){.slab-detail-page{padding-top:20px}.slab-main-image{height:92vw;max-height:430px}.slab-gallery-thumbs-wrap{padding:0 24px}.slab-thumbs{height:64px}.slab-thumb{flex-basis:25%;}.slab-accordion-panel p{font-size:13px}.slab-related-section{padding-bottom:58px}.slab-related-heading h2{font-size:28px}.slab-related-heading a{font-size:13px;padding:9px 12px}.slab-related-card{flex-basis:82vw}.slab-related-img{height:300px}.slab-related-card h3{font-size:25px}.slab-related-arrow{display:none}}
.slab-related-arrow{
  transition:color .2s ease;
}

.slab-related-arrow.prev:hover,
.slab-related-arrow.next:hover{
  color:#1f5b2d;
}

/* Product detail — direct accordion arrow, no animation */
/* Fixed accordion arrow: same position/box, instant icon swap with no movement */
.slab-accordion button b{
  position:relative;
  width:32px;
  height:32px;
  flex:0 0 32px;
  display:block;
  margin:0;
  padding:0;
  font-size:0;
  line-height:32px;
  transform:none !important;
  transition:none !important;
}
.slab-accordion button b::before{
  content:"﹀";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:Arial,sans-serif;
  font-size:28px;
  font-weight:900;
  -webkit-text-stroke:.6px currentColor;
  line-height:32px;
  transform:none;
  transition:none;
}
.slab-accordion.is-open button b::before{
  content:"︿";
  font-size:28px;
  font-weight:900;
  -webkit-text-stroke:.6px currentColor;
}
.slab-accordion.is-open button b{transform:none !important;transition:none !important}

/* Product image zoom — whole-frame magnification with a persistent magnifier control. */
.slab-main-image {
  --frame-zoom-x: 50%;
  --frame-zoom-y: 50%;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  cursor: zoom-in;
  touch-action: pan-y;
}
.slab-main-image > img {
  transform: scale(1);
  transform-origin: var(--frame-zoom-x) var(--frame-zoom-y);
  transition: transform .26s cubic-bezier(.2,.65,.3,1), transform-origin 0s;
  will-change: transform;
}
.slab-main-image.is-frame-zoomed > img {
  transform: scale(1.85);
}
.slab-image-full {
  z-index: 6;
  opacity: .98;
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.slab-image-full:hover,
.slab-image-full:focus-visible {
  background: #fff;
  box-shadow: 0 7px 22px rgba(33,79,43,.22);
  transform: scale(1.05);
}
.slab-main-image.is-frame-zoomed .slab-image-full { opacity: .94; }
@media (prefers-reduced-motion: reduce) {
  .slab-main-image > img, .slab-image-full { transition: none; }
}

/* =========================================================
   PRODUCTS CATALOG — reference layout
   ========================================================= */
.products-catalog-hero{
  position:relative;
  background:var(--green) url("../images/bg_products.webp") center/cover no-repeat;
  overflow:hidden;
  isolation:isolate;
}

.products-catalog-hero:before{
  content:"";
  position:absolute;
  inset:0;
}

.products-catalog-hero .wrap{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.products-catalog-hero .ref-reveal,
.products-catalog-hero h1{
  width:100%;
  max-width:1000px;
}

.products-catalog-hero .ref-reveal{
  color:var(--yellow);
  text-align:left;
}

.products-catalog-hero h1{
  color:var(--white);
  text-align:left;
  margin-top:-12px;
}

.products-catalog-hero .catalog-intro{display:none;}
.product-count{
  order:-1;
  flex:0 0 auto;
}
.product-filter{
  cursor:pointer;
}

.catalog-note{display:none;}

@media(max-width:800px){
  .products-catalog{padding-top:18px;}
  .product-toolbar{margin-bottom:18px;}
  .product-count{font-size:22px;}

}
@media(max-width:520px){
  .products-catalog-hero{min-height:205px;}
  .products-catalog-hero .ref-reveal{font-size:13px;}
  .products-catalog-hero h1{font-size:45px;max-width:320px;}

}

/* Product catalog — clean cards, no external-arrow icon */

.product-use {white-space: pre-line;}

/* =========================================================
   PRODUCTS PAGE — FINAL VISUAL MATCH TO NEW REFERENCE
   ========================================================= */
.products-catalog-hero{
  display:flex;
  align-items:center;
  text-align:center;
}
.products-catalog-hero:before{background:rgba(25,70,34,.34)}
.products-catalog-hero .ref-reveal{
  margin:0 0 9px;
  line-height:1.2;
}
.products-catalog-hero h1{
  margin:0 auto;
}

.products-catalog{
  background:var(--cream) url("../images/products-bg-paper.webp") center/cover repeat;
}
.product-toolbar{
  display:flex;
  flex-wrap:nowrap;
  overflow-x:auto;
  scrollbar-width:none;
}
.product-toolbar::-webkit-scrollbar{display:none}
.product-filter{
  flex:0 0 auto;
  border:0;
  background:transparent;
  color:#202020;
  font:400 16px/1.1 var(--font-display);
  white-space:nowrap;
}
.product-filter:hover{background:rgba(32,56,37,.07);color:#202020}
.product-filter.is-active{background:var(--green);color:#fff}

.product-count{
  font:600 15px/1.2 var(--font-en);
  letter-spacing:0;
  text-transform:none;
}

.product-category{display:none!important}

@media(max-width:800px){
  .products-catalog-hero{padding:22px 0 28px}
  .products-catalog{padding:18px 0 70px}
  .products-catalog .wrap{padding:0 12px}
  .product-toolbar{gap:3px}

}
@media(max-width:560px){
  .products-catalog-hero .ref-reveal{font-size:13px}
  .product-toolbar{margin-left:0;margin-right:0}
  .product-count{margin-top:7px;margin-bottom:8px;padding-left:4px}

}

/* =========================================================
   PRODUCTS PAGE — FINAL REFERENCE TUNING
   Based on the supplied 1080px reference artwork
   ========================================================= */
.products-catalog-hero{
  min-height:260px;
  height:260px;
  padding:70px 0;
}
.products-catalog-hero .ref-reveal{
  margin-bottom:10px;
  font-size:15px;
}
.products-catalog-hero h1{
  max-width:760px;
  font-size:clamp(58px,7vw,82px);
  line-height:1.02;
  letter-spacing:-.045em;
}
.product-toolbar{
  width:100%;
  gap:6px;
  margin:0;
  border-top:2px solid #1e241f;
  border-bottom:2px solid #1e241f;
}
.product-filter{
  line-height:1;
}
.product-count{
  width:min(770px,100%);
  padding:0;
  line-height:1.2;
  text-align:left;
}

@media(max-width:800px){
  .products-catalog-hero{
    min-height:230px;
    height:230px;
  }
  .products-catalog-hero h1{font-size:clamp(50px,10vw,68px)}
  .product-toolbar{justify-content:flex-start;overflow-x:auto}
  .product-filter{font-size:15px;padding:7px 10px}
}
@media(max-width:560px){
  .products-catalog-hero{min-height:205px;height:205px}
  .products-catalog-hero h1{font-size:45px;max-width:320px}
  .products-catalog{padding:18px 0 70px}
  .products-catalog .wrap{padding:0 12px}
  .product-toolbar{height:48px}
  .product-filter{font-size:14px;padding:7px 9px}
  .product-count{font-size:14px;margin:7px auto 8px}
}

/* =========================================================
   S-LAB PRODUCT DETAIL — SINGLE DISPLAY FONT SYSTEM
   Display headings use --font-display; body copy uses --font-body.
   ========================================================= */

/* Product category */
.slab-detail-page .slab-detail-cat{
  margin:0;
  color:#2d6540;
  font-family:Manrope,Arial,sans-serif;
  font-size:12px;
  font-weight:800;
  line-height:1.3;
  letter-spacing:.13em;
  text-transform:uppercase;
}

/* Thai product name */
.slab-detail-page .slab-detail-thai{
  margin:0 0 24px;
  color:#6d766f;
  font-family:"Noto Sans Thai",sans-serif;
  font-size:15px;
  font-weight:400;
  line-height:1.65;
  letter-spacing:0;
}

/* Accordion — thin separators, compact spacing */
.slab-detail-page .slab-accordions{
  border-top:1px solid rgba(31,42,34,.22);
}
.slab-detail-page .slab-accordion{
  border-bottom:1px solid rgba(31,42,34,.22);
}
.slab-detail-page .slab-accordion button{
  min-height:0;
  padding:15px 4px 15px 0;
  color:#202620;
  font-family:var(--font-display);
  font-size:24px;
  font-weight:400;
  line-height:1.5;
  letter-spacing:0;
}
.slab-detail-page .slab-accordion button b{
  width:26px;
  height:26px;
  flex:0 0 26px;
  line-height:26px;
}
.slab-detail-page .slab-accordion button b::before{
  font-family:Arial,sans-serif;
  font-size:18px;
  font-weight:700;
  line-height:26px;
}
.slab-detail-page .slab-accordion-panel p{
  padding-right:34px;
  color:rgba(31,42,34,.66);
  font-family:"Noto Sans Thai",sans-serif;
  font-size:16px;
  font-weight:400;
  line-height:1.85;
}
.slab-detail-page .slab-accordion-panel,
.slab-detail-page .slab-accordion-panel *,
.slab-detail-page .product-detail-list,
.slab-detail-page .product-detail-list li{
  font-family:"Noto Sans Thai",sans-serif;
}
.slab-detail-page .slab-accordion.is-open .slab-accordion-panel p{
  padding-bottom:14px;
}

/* Related-products typography */
.slab-related-section .slab-related-heading{
  margin-bottom:22px;
}
.slab-related-section .slab-related-heading a{
  color:#4f5851;
  font-family:Manrope,Arial,sans-serif;
  font-size:12px;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  background:transparent;
  padding:4px 0;
  border-radius:0;
  box-shadow:none;
  position:relative;
  text-decoration:none;
}
.slab-related-section .slab-related-heading a:hover{
  color:#000000;
  font-size:12.5px;
  font-weight:800;
}
.slab-related-section .slab-related-heading a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:2px;
  width:100%;
  height:1px;
  background:#000000;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s ease;
}
.slab-related-section .slab-related-heading a:hover::after{
  transform:scaleX(1);
}
.slab-related-section .slab-related-card p{
  color:#6d746e;
  font-family:"Noto Sans Thai",sans-serif;
  font-size:14px;
  line-height:1.6;
}

/* Mobile typography only */
@media(max-width:600px){
  .slab-detail-page .slab-detail-cat{
    font-size:9px;
    letter-spacing:.12em;
  }
  .slab-detail-page .slab-detail-content h1{
    margin:7px 0 10px;
    font-size:43px;
    line-height:.96;
    letter-spacing:-.045em;
  }
  .slab-detail-page .slab-detail-thai{
    margin-bottom:20px;
    font-size:14px;
  }
  .slab-detail-page .slab-accordion button{
    padding:14px 0;
    font-size:15px;
  }
  .slab-detail-page .slab-accordion button b{
    width:24px;
    height:24px;
    flex-basis:24px;
  }
  .slab-detail-page .slab-accordion button b::before{
    font-size:17px;
    line-height:24px;
  }
  .slab-detail-page .slab-accordion-panel p{
    padding-right:4px;
    font-size:12px;
  }
  }

/* =========================================================
   S-LAB PRODUCTS — FINAL BALANCED LAYOUT + QUICK VIEW
   ========================================================= */
.products-catalog .wrap{width:min(1180px,calc(100% - 48px));max-width:1180px;padding:0}
.products-catalog{padding:38px 0 96px}
.slab-product-search{
  width:min(680px,100%);height:52px;
  box-shadow:0 8px 24px rgba(24,48,28,.06);color:#536056;
}
.product-toolbar{border:1px solid rgba(32,56,37,.12);border-radius:16px;padding:8px;margin-bottom:26px;background:rgba(255,255,255,.55);justify-content:center;box-shadow:0 5px 18px rgba(24,48,28,.035)}
.product-filter{font-size:14px}
.product-count{padding-left:2px;margin:10px 0px 10px;font-size:14px;color:#526057}

body.lightbox-open{overflow:hidden}

@media(max-width:900px){
  .products-catalog .wrap{width:min(100% - 40px,720px)}

}
@media(max-width:600px){
  .products-catalog{padding:24px 0 68px}
  .products-catalog .wrap{width:calc(100% - 32px)}
  .slab-product-search{height:48px;margin-bottom:14px;padding:0 15px}
  .product-toolbar{justify-content:flex-start;border-radius:14px;padding:6px;gap:3px;margin-bottom:18px}
  .product-filter{padding:8px 11px;font-size:12px}
  .product-count{font-size:13px;margin-bottom:10px}

}

p, li, dt, dd, small, figcaption, label, input, textarea, select, button, .ref-outline{font-family:var(--font-body);}
h1,h2,h3{font-family:var(--font-display);font-weight:400;}

/* =========================================================
   Requested heading-size restoration
   Keep semantic H1–H3 while restoring the large visual
   treatment previously used by the page headings.
   ========================================================= */
.ref-about-banner h1,
.ref-service-banner h1,
.ref-products-hero h1,
.ref-activity-hero h1,
.ref-contact-hero h1,
.ref-inquiry-hero h1,
.products-catalog-hero h1{
  font-family:var(--font-display);
  font-size:clamp(64px,4.6vw,128px) !important;
  line-height:1.12 !important;
  font-weight:400 !important;
}

.ref-purpose h2{font-size:clamp(42px,4.8vw,64px);}
.ref-different h2{font-size:clamp(38px,4.8vw,64px);}
.ref-rnd h2{font-size:clamp(36px,4.6vw,52px);}
.ref-activity-quote h2{font-size:clamp(30px,4vw,54px);}
.activity-album-head h3{font-size:clamp(34px,4vw,50px);}
.ref-inquiry-form-section .quote h2{font-size:clamp(30px,4vw,42px);}
.ref-inquiry-banner h3{font-size:clamp(38px,4.8vw,60px);}
.ref-contact-info h2{font-size:clamp(32px,3.2vw,44px);font-weight:400;}

@media (max-width:767px){
  .ref-about-banner h1,
  .ref-service-banner h1,
  .ref-products-hero h1,
  .ref-activity-hero h1,
  .ref-contact-hero h1,
  .ref-inquiry-hero h1,
  .products-catalog-hero h1{
    font-size:clamp(46px,10.5vw,66px) !important;
    line-height:1.08 !important;
  }
  .ref-purpose h2{font-size:40px;}
  .ref-different h2{font-size:42px;}
  .ref-rnd h2{font-size:38px;}
  .ref-activity-quote h2{font-size:34px;}
  .activity-album-head h3{font-size:36px;}
  .ref-inquiry-form-section .quote h2{font-size:32px;}
  .ref-inquiry-banner h3{font-size:40px;}
  .ref-contact-info h2{font-size:34px;}
}

@media (max-width:479px){
  .ref-about-banner h1,
  .ref-service-banner h1,
  .ref-products-hero h1,
  .ref-activity-hero h1,
  .ref-contact-hero h1,
  .ref-inquiry-hero h1,
  .products-catalog-hero h1{
    font-size:44px !important;
  }
  .ref-purpose h2{font-size:36px;}
  .ref-different h2{font-size:38px;}
  .ref-rnd h2{font-size:34px;}
  .ref-activity-quote h2{font-size:30px;}
  .activity-album-head h3{font-size:32px;}
  .ref-inquiry-form-section .quote h2{font-size:29px;}
  .ref-inquiry-banner h3{font-size:36px;}
  .ref-contact-info h2{font-size:30px;}
}

/* =========================================================
   CONTACT PAGE — exact reference layout override
   ========================================================= */
.contact-hero-ref{background:#08731f;min-height:260px;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.contact-hero-inner{width:min(980px,calc(100% - 48px));display:flex;align-items:center;justify-content:center;}
.contact-hero-ref h1{margin:0;color:#fff;font-family:var(--font-display);font-size:clamp(58px,7vw,96px);font-weight:400;line-height:1;letter-spacing:.01em;text-align:center;}
.contact-clover{width:64px;height:64px;object-fit:contain;flex:0 0 auto;}
.contact-body-ref{background:#f7f6f3 url("../images/bg_contact_paper.webp") center top/cover repeat-y;padding:82px 0 70px;}
.contact-cards-ref{width:min(930px,calc(100% - 48px));margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;}
.contact-card-ref{border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;padding:28px 18px 24px;}
.contact-card-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 0 auto 20px;
  box-sizing: border-box;
}

.contact-card-icon svg {
  width: 88px;
  height: 88px;
  display: block;
}
.contact-card-ref{
  min-height:250px;
  background:#147521;
  color:#fff;
}
.contact-card-icon img{width:38px;height:38px;object-fit:contain;filter:brightness(0) invert(1);}
.contact-card-ref h2{margin:0;color:#f4e416;font-family:var(--font-display);font-size:31px;font-weight:400;line-height:1.1;}
.contact-card-ref p{margin:12px 0 0;color:#fff;font-family:"Noto Sans Thai",sans-serif;font-size:16px;line-height:1.55;}
.contact-social-ref{width:min(690px,calc(100% - 48px));margin:44px auto 0;display:grid;grid-template-columns:1fr 1fr;column-gap:72px;align-items:start;justify-items:center;}
.contact-social-item-ref{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0;}
.contact-social-icon-ref{width:82px;height:82px;object-fit:contain;margin-bottom:10px;}
.contact-social-item-ref h3{margin:0 0 13px;color:#111;font-family:var(--font-display);font-size:21px;font-weight:400;line-height:1.25;white-space:nowrap;}
.contact-qr-ref{width:224px;height:224px;object-fit:contain;display:block;background:#fff;padding:0;border:0;image-rendering:auto;}
.contact-social-item-ref:first-child .contact-qr-ref{width:223px;height:223px;}
.contact-hours-ref{margin:72px 0 0;text-align:center;color:#121212;font-family:"Noto Sans Thai","Manrope",sans-serif;font-size:24px;font-weight:700;line-height:1.25;}
.contact-map-ref{background:#147521;padding:0 0 0;display:flex;align-items:flex-start;justify-content:center;}
.contact-map-ref .map-frame{display:block;border:0;}

@media (max-width: 900px){
  .contact-hero-ref{min-height:210px;}
  .contact-hero-inner{gap:18px;}
  .contact-clover{width:48px;height:48px;}
  .contact-body-ref{padding:56px 0 58px;}
  .contact-cards-ref{width:min(760px,calc(100% - 32px));gap:18px;}
  .contact-card-ref{min-height:224px;padding:24px 14px 20px;}
  .contact-card-ref h2{font-size:27px;}
  .contact-card-ref p{font-size:14px;}
  .contact-social-ref{gap:28px;}
  .contact-social-icon-ref{width:68px;height:68px;}
  .contact-social-item-ref h3{font-size:18px;}
  .contact-qr-ref{width:190px;height:190px;}
  .contact-social-item-ref:first-child .contact-qr-ref{width:189px;height:189px;}
  .contact-hours-ref{font-size:20px;margin-top:58px;}
  .contact-map-ref{min-height:380px;}
  .contact-map-shell{width:64vw;}
  .contact-map-ref .map-frame{height:380px;}
}

@media (max-width: 767px){
  .contact-hero-ref{min-height:170px;}
  .contact-hero-inner{width:calc(100% - 24px);gap:11px;}
  .contact-clover{width:34px;height:34px;}
  .contact-hero-ref h1{font-size:clamp(45px,14vw,64px);}
  .contact-body-ref{padding:34px 0 46px;}
  .contact-cards-ref{grid-template-columns:1fr;width:calc(100% - 28px);max-width:430px;gap:14px;}
  .contact-card-ref{min-height:0;padding:22px 16px 22px;}
  .contact-card-icon{width:58px;height:58px;margin-bottom:10px;}
  .contact-card-icon img{width:32px;height:32px;}
  .contact-card-ref h2{font-size:27px;}
  .contact-card-ref p{font-size:15px;line-height:1.5;}
  .contact-social-ref{grid-template-columns:1fr;row-gap:38px;width:calc(100% - 28px);max-width:420px;margin-top:38px;}
  .contact-social-icon-ref{width:76px;height:76px;}
  .contact-social-item-ref h3{font-size:18px;white-space:normal;}
  .contact-qr-ref{width:223px;height:223px;}
  .contact-social-item-ref:first-child .contact-qr-ref{width:223px;height:223px;}
  .contact-hours-ref{font-size:18px;margin:48px auto 0;padding:0 14px;}
  .contact-map-ref{min-height:320px;}
  .contact-map-shell{width:100%;}
  .contact-map-ref .map-frame{height:320px;}
}

/* =========================================================
   SHARED INNER-PAGE TITLE — same visual language as Contact
   ========================================================= */
.page-title-ref{
  background:#08731f;
  min-height:260px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.page-title-inner{
  width:min(980px,calc(100% - 48px));
  display:flex;
  align-items:center;
  justify-content:center;
}
.page-title-ref h1{
  margin:0;
  color:#fff;
  font-family:var(--font-display);
  font-size:clamp(58px,7vw,96px);
  font-weight:400;
  line-height:1;
  letter-spacing:.01em;
  text-align:center;
}
.page-title-clover{
  width:64px;
  height:64px;
  object-fit:contain;
  flex:0 0 auto;
}
@media (max-width:900px){
  .page-title-ref{min-height:210px;}
  .page-title-inner{gap:18px;}
  .page-title-clover{width:48px;height:48px;}
}
@media (max-width:767px){
  .page-title-ref{min-height:170px;}
  .page-title-inner{width:calc(100% - 24px);gap:11px;}
  .page-title-clover{width:34px;height:34px;}
  .page-title-ref h1{font-size:clamp(45px,14vw,64px);}
}
@media (max-width:479px){
  .page-title-ref h1{font-size:44px;}
}

/* Google Map: keep the long full-width presentation from the original contact layout. */
.contact-map-ref{width:100%;min-height:470px;}
.contact-map-shell{width:100%;max-width:none;margin:0;}
.contact-map-ref .map-frame{width:100%;height:470px;}

/* Section headline requested size. */
.ref-about-content h2{font-size:72px !important;}

/* Products headline / dynamic catalog heading uses Cloud Lucent. */
.ref-products h2,.products-catalog h1,.products-catalog h2,#productsHeading{font-family:var(--font-display);}

/* Remove pointer-follow / magnetic / tilt visual effects. Keep normal hover states. */
.ref-card{transform:none !important;}
.ref-card:hover{transform:none !important;}
.ref-outline, .detail-cta{transform:none !important;}

@media(max-width:767px){

  .contact-map-ref{min-height:320px;}
  .contact-map-shell{width:100%;}
  .contact-map-ref .map-frame{height:320px;}
  .ref-about-content h2{font-size:clamp(42px,11vw,74px) !important}
}

.products-catalog-heading{font-family:var(--font-display);font-size:clamp(48px,6vw,82px);line-height:.95;font-weight:400;letter-spacing:-.035em;color:var(--green);margin:0 0 34px;}
@media(max-width:600px){.products-catalog-heading{font-size:46px;margin-bottom:26px;}}

/* ---------------------------------------------------------
   ABOUT — Company profile, quality and product story
--------------------------------------------------------- */
.about-company-profile{padding:96px 0 54px;background:var(--white)}
.about-company-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.about-company-copy h2,.about-section-head h2,.about-quality-copy h2,.about-confidence-copy h2,.about-products-copy h2{font-size:clamp(34px,4.5vw,56px);line-height:1.12;color:var(--text);margin:0 0 24px;font-family:"Cloud Lucent","Noto Sans Thai",sans-serif}
.about-company-copy p,.about-section-head>p:last-child,.about-quality-copy>p:last-child,.about-confidence-copy>p:last-child,.about-products-copy p{font-size:17px;line-height:1.9;color:#4a4a4a;margin:0 0 16px}
.about-kicker{font:700 11px/1 var(--font-en);letter-spacing:.18em;text-transform:uppercase;color:var(--green-mid);margin:0 0 16px}
.about-kicker-light{color:rgba(255,255,255,.72)}
.about-photo-mosaic{display:grid;grid-template-columns:1fr .72fr;grid-template-rows:230px 190px;gap:16px}
.about-photo{margin:0;overflow:hidden;background:#f4f3ee}
.about-photo img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .6s ease}
.about-photo:hover img{transform:scale(1.04)}
.about-photo-tall{grid-row:1 / span 2}
.about-photo-wide{grid-column:2}
.about-quality-copy h2{margin-bottom:22px}
.about-card-number{font:700 12px/1 var(--font-en);letter-spacing:.14em;color:var(--green-mid);margin-bottom:24px}
.about-assurance-card h3{font-family:var(--font-display);font-size:28px;font-weight:400;color:var(--text);margin:0 0 12px}
.about-assurance-card p{font-size:15px;line-height:1.8;color:#666;margin:0}
.about-confidence-gallery{align-items:stretch}
.about-products-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:64px;align-items:center}
.about-products-visual{position:relative}
.about-products-visual img{width:100%;height:430px;display:block;object-fit:cover}
.about-products-detail{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.about-products-detail span{font:700 10px/1 var(--font-en);letter-spacing:.12em;color:var(--green-mid);background:#fff;padding:10px 12px}
@media (prefers-reduced-motion: reduce){.about-photo img{transition:none}.about-photo:hover img{transform:none}}

/* Explicitly keep the requested English/Thai display headings on Cloud Lucent.
   These selectors also cover dynamically-rendered text and split-reveal spans. */
.ref-products h2,
#productsHeading,
.ref-quality h2,
.ref-purpose h2,
.ref-different h2,
.ref-standards .ref-divider,
.ref-activity-divider,
.ref-about-content h2,
.slab-accordion button,
.slab-accordion button span,
.products-catalog-heading,
.split-reveal,
.split-reveal .slab-split-line,
.split-reveal .slab-split-word{
  font-family:var(--font-display);
  font-weight:400;
}

/* FINAL DISPLAY FONT OVERRIDES — survive split-text/reveal spans. */
.ref-purpose h2,
.ref-purpose h2 *,
.ref-different h2,
.ref-different h2 *,
.ref-products h2,
.ref-products h2 *,
.ref-quality h2,
.ref-quality h2 *,
.ref-standards .ref-divider,
.ref-standards .ref-divider *,
.ref-activity-divider,
.ref-activity-divider *,
.products-catalog-heading,
.products-catalog-heading *,
#productsHeading,
#productsHeading *,
.slab-accordion button,
.slab-accordion button *{
  font-family:var(--font-display);
}

/* ---------------------------------------------------------
   HOME — FEATURED PRODUCTS / HORIZONTAL SHOWCASE
--------------------------------------------------------- */
.ref-featured-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:38px}
.ref-featured-products h2{font-family:var(--font-display);font-weight:400;margin:0;color:var(--yellow);font-size:clamp(48px,6.5vw,76px);line-height:.92;letter-spacing:-.025em}
.ref-outline-viewall{display:inline-flex;align-items:center;gap:10px;margin-top:8px;border:1px solid var(--green-mid);color:var(--green-mid);padding:12px 35px;font:600 12px/1 var(--font-en);transition:background .25s,color .25s;border-radius:2px}
.ref-outline-viewall:hover {font:800 12px/1 var(--font-en);background:#fff;border:1px solid var(--white)}
.ref-outline-viewall span{font-size:18px;margin-left:10px;vertical-align:-2px}
.ref-featured-track{margin-right:-20vw}
.ref-featured-card{flex:0 0 min(31vw,430px)}
.ref-featured-number{position:absolute;z-index:2;left:18px;top:17px;color:rgba(32,56,37,.48);font:600 10px/1 var(--font-en);letter-spacing:.12em}
.ref-featured-link{margin-top:auto;padding-top:16px;font:700 9px/1.2 var(--font-en);letter-spacing:.1em;text-transform:uppercase;color:var(--green)}
.ref-featured-link b{font-size:17px;font-weight:400;margin-left:8px;vertical-align:-2px}
.ref-featured-progress{height:2px;background:rgba(255,255,255,.22);flex:1;overflow:hidden}
.ref-featured-progress span{display:block;width:0;height:100%;background:var(--yellow);transition:width .25s ease}
.ref-featured-count{min-width:58px;text-align:right;color:rgba(255,255,255,.7);font:600 9px/1 var(--font-en);letter-spacing:.1em}

@media(max-width:900px){
  .ref-featured-track{margin-right:-8vw}
    }

@media(max-width:767px){
  .ref-featured-products{padding:58px 0 64px}
  .ref-featured-head{display:block;margin-bottom:28px}
  .ref-featured-products h2{font-size:clamp(46px,13vw,62px);margin-bottom:22px}
  .ref-outline-viewall{display:inline-block}
  .ref-featured-track{gap:10px;margin-right:-18px;padding-right:18px}
  .ref-featured-card{flex-basis:calc(84vw)}
  .ref-featured-image{height:330px}
  .ref-featured-info{padding:18px 18px 22px;min-height:160px}
  .ref-featured-info h3{font-size:25px}
  }

/* =========================================================
   UPDATE — HOME FEATURED PRODUCTS / LEAF PROGRESS
   ========================================================= */
.ref-featured-card{flex-basis:min(28vw,380px)}

/* =========================================================
   UPDATE — INNER PAGE YELLOW LEAF TITLE MARK
   ========================================================= */
.page-title-inner{
  flex-direction:column;
  gap:10px;
}
.page-title-leaves{
  width:104px;
  height:70px;
  object-fit:contain;
  display:block;
  flex:0 0 auto;
}

/* Contact uses the same yellow leaf mark */
.contact-hero-inner{
  flex-direction:column;
  gap:10px;
}
.contact-title-leaves{
  width:104px;
  height:70px;
  object-fit:contain;
  display:block;
  flex:0 0 auto;
}

@media(max-width:900px){
  .ref-featured-card{flex-basis:40vw}
  .ref-featured-image{height:315px}
      .page-title-leaves,
  .contact-title-leaves{width:88px;height:58px}
}

@media(max-width:650px){
  .ref-featured-card{flex-basis:calc(82vw)}
  .ref-featured-image{height:300px}
  .ref-featured-info{padding:17px 18px 20px;min-height:150px}
  .ref-featured-info h3{font-size:24px}
      .page-title-leaves,
  .contact-title-leaves{width:82px;height:54px}
}

.ref-featured-products{
  position:relative;
  isolation:isolate;
  color:#214f2b;
  padding:72px 0 54px;
}
.ref-featured-products .wrap{width:min(1540px,calc(100% - 120px));position:relative;z-index:2}
.ref-featured-title{text-align:center;margin:0 auto 38px}
.ref-featured-kicker{display:flex;align-items:center;justify-content:center;gap:24px;color:#24923d;margin-bottom:8px;font:800 14px/1 var(--font-en);letter-spacing:.24em}
.ref-featured-kicker span{display:block;width:70px;height:1px;background:#a4c2a7}
.ref-featured-kicker em{font-style:normal}
.ref-featured-title h2{font-family:var(--font-display);color:var(--green-mid);font-size:clamp(40px,4.2vw,66px);font-weight:400;line-height:1.08;letter-spacing:-.035em;margin:0 0 8px}
.ref-featured-title p{font:400 15px/1.7 "Noto Sans Thai",sans-serif;color:#53715a;margin:0}
.ref-featured-viewall{display:inline-flex;align-items:center;gap:8px;margin-top:18px;color:#1d7134;text-decoration:none;font:700 13px/1.2 "Noto Sans Thai",sans-serif;transition:.2s ease}.ref-featured-viewall span{font-size:18px}.ref-featured-viewall:hover{color:#0e5f2f;border-color:#0e5f2f;transform:translateX(2px)}
.ref-featured-shell{position:relative}
.ref-featured-track{overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none}
.ref-featured-track::-webkit-scrollbar{display:none}
.ref-featured-card{scroll-snap-align:start;display:block;overflow:hidden;background:#fffdf6;border:1px solid rgba(63,127,60,.14);border-radius:22px;color:#214f2b;text-decoration:none;box-shadow:0 9px 26px rgba(36,65,35,.10);transition:transform .28s ease,box-shadow .28s ease}
.ref-featured-card:hover{transform:translateY(-5px);box-shadow:0 15px 32px rgba(36,65,35,.16)}
.ref-featured-image{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(180deg,#ffffff 0%,#ffffff 100%)}
.ref-featured-image img{position:relative;z-index:2;width:78%;height:88%;object-fit:contain;display:block;transition:transform .45s ease}
.ref-featured-card:hover .ref-featured-image img{transform:scale(1.35)}
.ref-featured-info{position:relative;background:#08731f;color:#fff;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ref-featured-category{display:inline-flex;align-items:center;justify-content:center;background:#edf2dd;color:#39733b;border-radius:999px;padding:5px 13px;margin-bottom:9px;font:800 11px/1 var(--font-en);letter-spacing:.03em}
.ref-featured-info h3{font-family:var(--font-display);color:#fff;font-size:16px;font-weight:400;line-height:1.3;margin:0}
.ref-featured-info p{font:500 12px/1.45 "Noto Sans Thai",sans-serif;color:rgba(255,255,255,.86);margin:4px 0 0}
.ref-featured-empty{padding:50px;text-align:center;color:#214f2b;font:400 14px/1.7 "Noto Sans Thai",sans-serif}
@media(max-width:800px){
  .ref-featured-products{padding:58px 0 54px}
  .ref-featured-products .wrap{width:calc(100% - 36px)}
  .ref-featured-kicker{font-size:11px;gap:12px;letter-spacing:.16em}
  .ref-featured-kicker span{width:42px}
  .ref-featured-title{margin-bottom:26px}
  .ref-featured-title h2{font-size:42px}
  .ref-featured-title p{font-size:12px;padding:0 10px}
  .ref-featured-track{grid-template-columns:repeat(4,minmax(78vw,1fr));padding-bottom:4px}
  }
@media(max-width:520px){
  .ref-featured-products{padding:48px 0 48px}
  .ref-featured-title h2{font-size:36px}
  .ref-featured-info h3{font-size:14px}
  .ref-featured-category{font-size:10px;padding:4px 11px}
  }

/* FINAL — Featured Products: balanced 4-card layout */
.ref-featured-products{
  overflow:hidden;
  background:#ffffff;
}
.ref-featured-track{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;
  width:100%;
  max-width:100%;
  margin:0;
  padding:0;
  overflow:visible;
}
.ref-featured-card{
  width:100%;
  min-width:0;
  max-width:none;
  box-sizing:border-box;
}
.ref-featured-image{
  height:300px;
  min-height:300px;
}
.ref-featured-info{
  min-height:132px;
  height:132px;
  box-sizing:border-box;
  padding:16px 18px;
}
.ref-featured-info h3{
  width:100%;
  max-width:100%;
  line-height:1.5;
  overflow-wrap:anywhere;
}
.ref-featured-info p{
  width:100%;
  max-width:100%;
}

@media(max-width:1200px){
  .ref-featured-products .wrap{width:calc(100% - 64px)}
  .ref-featured-track{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .ref-featured-image{height:260px;min-height:260px}
}
@media(max-width:800px){
  .ref-featured-track{
    display:flex;
    gap:12px;
    overflow-x:auto;
    padding:0 0 4px;
    scroll-snap-type:x mandatory;
  }
  .ref-featured-card{
    flex:0 0 78vw;
    width:78vw;
    scroll-snap-align:start;
  }
  .ref-featured-image{height:300px;min-height:300px}
}
@media(max-width:520px){
  .ref-featured-card{flex-basis:84vw;width:84vw}
  .ref-featured-image{height:275px;min-height:275px}
  .ref-featured-info{height:122px;min-height:122px;padding:14px 12px 16px}
}

/* =========================================================
   SITE LOADER + BACK TO TOP
========================================================= */
.back-to-top{position:fixed;right:24px;bottom:24px;width:48px;height:48px;border:1px solid rgba(33,79,43,.16);border-radius:50%;background:#fff;color:var(--green);box-shadow:0 10px 28px rgba(30,60,35,.16);display:flex;align-items:center;justify-content:center;font:600 22px/1 var(--font-en);cursor:pointer;z-index:997;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .25s ease,visibility .25s ease,transform .25s ease,background .25s ease,color .25s ease}.back-to-top.show{opacity:1;visibility:visible;transform:translateY(0)}.back-to-top:hover{background:var(--green);color:#fff}
.site-loader{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center}.site-loader-inner{text-align:center}.site-loader-inner img{width:300px;max-width:70vw;height:auto;object-fit:contain;margin:0 auto 28px}.site-loader-line{width:300px;height:2px;background:rgba(33,79,43,.12);margin:0 auto;overflow:hidden}.site-loader-line span{display:block;width:40%;height:100%;background:var(--green-mid);animation:loaderMove 1.1s ease-in-out infinite}.site-loader-inner p{margin:14px 0 0;font:500 12px/1.5 var(--font-th);color:#687063}@keyframes loaderMove{0%{transform:translateX(-100%)}100%{transform:translateX(350%)}}

/* =========================================================
   ACTIVITY — ARTICLE LIST + DETAIL
========================================================= */
.activity-articles-section,.activity-related{padding:86px 0 100px;background:var(--cream) url("../images/bg_activity_paper.webp") center/cover no-repeat}.activity-section-heading{max-width:760px;margin:0 auto 48px;text-align:center}.activity-section-heading.compact{margin-bottom:34px}.activity-kicker{margin:0 0 12px;font:700 11px/1 var(--font-en);letter-spacing:.16em;color:var(--green-mid)}.activity-section-heading h2{margin:0;color:var(--green);font-size:clamp(32px,4vw,52px);line-height:1.2}.activity-section-heading>p:last-child{margin:16px auto 0;color:#666;font-size:15px;line-height:1.8}.activity-article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.activity-article-card,.activity-related-card{display:block;background:#fff;border:1px solid rgba(33,79,43,.10);border-radius:18px;overflow:hidden;color:inherit;box-shadow:0 12px 34px rgba(39,69,43,.07);transition:transform .25s ease,box-shadow .25s ease}.activity-article-card:hover,.activity-related-card:hover{transform:translateY(-5px);box-shadow:0 18px 42px rgba(39,69,43,.13)}.activity-article-image{aspect-ratio:16/10;overflow:hidden;background:#e8eee5}.activity-article-image img,.activity-related-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}.activity-article-card:hover .activity-article-image img,.activity-related-card:hover img{transform:scale(1.035)}.activity-article-content{padding:24px 24px 26px}.activity-article-date{margin:0 0 10px;font:600 11px/1 var(--font-en);letter-spacing:.04em;color:#8b927f}.activity-article-content h3{margin:0;color:var(--green);font-size:22px;line-height:1.45}.activity-article-content>p:not(.activity-article-date){margin:12px 0 18px;color:#666;font-size:14px;line-height:1.8}.activity-article-content span{font:700 12px/1 var(--font-en);color:var(--green-mid)}.activity-article-content span b{font-size:16px;margin-left:4px}.activity-detail-hero{padding:54px 0 90px;background:var(--cream) url("../images/bg_activity_paper.webp") center/cover no-repeat}.activity-detail-card{max-width:1000px;margin:0 auto;background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 16px 48px rgba(39,69,43,.10)}.activity-detail-card>img{display:block;width:100%;max-height:560px;object-fit:cover}.activity-detail-content{padding:42px 54px 54px}.activity-detail-date{margin:0 0 12px;color:#8b927f;font:600 18px/1 var(--font-en)}.activity-detail-content h1{margin:0;color:var(--green);font-size:clamp(34px,4.5vw,58px);line-height:1.25}.activity-detail-lead{margin:22px 0 28px;font-size:17px;line-height:1.9;color:#4e564d}.activity-detail-body{border-top:1px solid rgba(33,79,43,.12);padding-top:26px}.activity-detail-body p{margin:0 0 18px;font-size:15px;line-height:2;color:#555}.activity-detail-body a{color:var(--green-mid);font-weight:700}.activity-related{padding-top:70px}.activity-related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:1000px;margin:0 auto}.activity-related-card{display:grid;grid-template-columns:42% 58%;min-height:190px}.activity-related-card img{height:100%;min-height:190px}.activity-related-card>div{padding:24px}.activity-related-card p{margin:0 0 8px;color:#8b927f;font:600 11px/1 var(--font-en)}.activity-related-card h3{margin:0;color:var(--green);font-size:19px;line-height:1.5}.activity-related-card span{display:inline-block;margin-top:20px;color:var(--green-mid);font:700 11px/1 var(--font-en)}

/* Activity cards — strict image/content stacking, including narrow phones. */
.activity-article-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;}
.activity-article-card{position:relative;display:flex;flex-direction:column;min-width:0;width:100%;height:100%;overflow:hidden;}
.activity-article-image{position:relative;display:block;flex:0 0 auto;width:100%;height:auto;aspect-ratio:16/10;overflow:hidden;isolation:isolate;}
.activity-article-image img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;max-height:none;margin:0;object-fit:cover;object-position:center;}
.activity-article-content{position:relative;display:flex;flex-direction:column;flex:1 1 auto;min-width:0;overflow-wrap:anywhere;}
.activity-article-content h3,.activity-article-content p{max-width:100%;overflow-wrap:anywhere;}
.home-activity-grid>.home-activity-card{min-width:0;align-self:stretch;}
@media(max-width:767px){
  .activity-article-grid{grid-template-columns:minmax(0,1fr);gap:18px;width:100%;}
  .activity-article-grid>.activity-article-card{display:flex;flex-direction:column;width:100%;min-width:0;height:auto;margin:0;float:none;transform:none;}
  .activity-article-image{width:100%;height:auto;min-height:0;aspect-ratio:16/10;}
  .activity-article-image img{position:absolute;inset:0;width:100%;height:100%;}
  .activity-article-content{width:100%;min-width:0;padding:18px;}
  .home-activity-grid>.home-activity-card:last-child{display:flex;}
}

/* Activity articles — shared typography with the rest of S-LAB */
.activity-page .activity-section-heading h2,
.activity-detail-content h1,
.activity-related-card h3,
.activity-article-content h3,
.activity-page .activity-article-content,
.activity-related-card>div { font-family: var(--font-body); }
.activity-page .activity-section-heading h2,
.activity-detail-content h1 { font-family: var(--font-display); }
.activity-detail-category { margin:0 0 1px;color:var(--green-mid); font:600 14px/1 var(--font-en); letter-spacing:.08em; text-transform:uppercase; }
.activity-load-error { max-width:760px; margin:30px auto; padding:22px; text-align:center; color:#7b4a42; background:#fff; border:1px solid rgba(123,74,66,.15); border-radius:14px; font-family:var(--font-body); }

/* =========================================================
   DIMENSIONAL DISPLAY HEADINGS
   Subtle layered extrusion inspired by the supplied references.
   Applied to major page/section headings without image generation.
========================================================= */
.dimensional-heading{
  position:relative;
  isolation:isolate;
  text-rendering:geometricPrecision;
}

/* Light headings on dark/green backgrounds */
.dimensional-heading--light{
  color:#fff !important;
  text-shadow:
    1px 1px 0 rgba(17,74,31,.95),
    2px 2px 0 rgba(17,74,31,.82),
    3px 3px 0 rgba(17,74,31,.68),
    4px 4px 0 rgba(17,74,31,.48),
    0 7px 14px rgba(0,35,10,.18) !important;
}

/* Green headings on light backgrounds */

/* Yellow display headings: slightly outlined + dimensional, similar to the reference */
.dimensional-heading--yellow{
  color:var(--yellow) !important;
  -webkit-text-stroke:1px rgba(82,72,35,.34);
  text-shadow:
    1px 1px 0 rgba(93,82,33,.72),
    2px 2px 0 rgba(93,82,33,.56),
    3px 3px 0 rgba(93,82,33,.38),
    0 7px 13px rgba(25,35,12,.16) !important;
}

/* Inner-page title bars */
.page-title-ref h1{
  text-shadow:
    1px 1px 0 rgba(11,84,29,.98),
    2px 2px 0 rgba(11,84,29,.86),
    3px 3px 0 rgba(11,84,29,.70),
    4px 4px 0 rgba(11,84,29,.48),
    0 8px 16px rgba(0,30,8,.18) !important;
}

/* Main hero/banner headings */
.ref-about-banner h1,
.ref-service-banner h1,
.ref-activity-hero h1,
.ref-contact-hero h1,
.ref-inquiry-hero h1,
.ref-products-hero h1{
  text-shadow:
    1px 1px 0 rgba(11,84,29,.98),
    2px 2px 0 rgba(11,84,29,.86),
    3px 3px 0 rgba(11,84,29,.70),
    4px 4px 0 rgba(11,84,29,.48),
    0 8px 16px rgba(0,30,8,.18) !important;
}

/* Keep long headings readable on small screens */
@media (max-width:767px){
  .dimensional-heading--light,
  .dimensional-heading--green,
  .dimensional-heading--yellow,
  .page-title-ref h1,
  .ref-about-banner h1,
  .ref-service-banner h1,
  .ref-activity-hero h1,
  .ref-contact-hero h1,
  .ref-inquiry-hero h1,
  .ref-products-hero h1{
    text-shadow:
      1px 1px 0 rgba(17,74,31,.85),
      2px 2px 0 rgba(17,74,31,.64),
      0 5px 10px rgba(0,35,10,.14) !important;
  }
}

/* =========================================================
   PAGE TITLE — REPEATING CLOVER BACKGROUND
   Uses the original images/clover.webp as a subtle, darker
   repeating pattern behind each page title.
   ========================================================= */
.page-title-ref,
.contact-hero-ref{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}

.page-title-ref::before,
.contact-hero-ref::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:url("../images/clover.webp");
  background-repeat:repeat;
  background-position:center top;
  background-size: 80px 480px;
  opacity: .65;
  filter: brightness(0.85) contrast(0.85);
}

.page-title-ref > *,
.contact-hero-ref > *{
  position:relative;
  z-index:1;
}

/* Keep the clover pattern subtle and continuous on smaller screens. */
@media (max-width:767px){
  .page-title-ref::before,
  .contact-hero-ref::before{
    background-size:64px 392px;
    opacity:.68;
  }
}

/* =========================================================
   S-LAB SERVICES — VERTICAL SERVICE JOURNEY
   ========================================================= */
.slab-services-vertical{background:#ffffff;padding:60px 0 112px;overflow:hidden}.slab-services-layout{display:grid;grid-template-columns: minmax(0,1.0fr) minmax(340px,.68fr);gap: clamp(55px,5vw,118px);align-items:start;}.slab-services-copy{min-width:0}.slab-services-intro{max-width:760px;padding:0 0 42px 78px}.slab-services-kicker{display:inline-block;margin:0 0 13px;color:var(--green-mid);font:700 11px/1 var(--font-en);letter-spacing:.22em}.slab-services-intro h2{color:var(--green);font-size:clamp(48px,5.2vw,78px);line-height:.98;margin:0 0 20px}.slab-services-intro p{max-width:700px;color:#4a554d;font:400 16px/1.95 var(--font-th)}.slab-service-timeline{position:relative;padding-left:78px}.slab-service-timeline:before{content:"";position:absolute;left:22px;top:9px;bottom:28px;width:1px;background:linear-gradient(180deg,var(--yellow) 0%,rgba(63,127,60,.75) 18%,rgba(63,127,60,.32) 100%)}.slab-service-item{position:relative;display:grid;grid-template-columns:72px minmax(0,1fr);gap:26px;padding:0 0 50px}.slab-service-item:last-child{padding-bottom:0}.slab-service-marker{position:relative;z-index:2;display:flex;justify-content:flex-start;align-items:flex-start}.slab-service-marker:before{content:"";position:absolute;left:-64px;top:7px;width:11px;height:11px;border:2px solid var(--green-mid);border-radius:50%;background:#fffdf7;box-shadow:0 0 0 5px #fffdf7}.slab-service-item--rnd .slab-service-marker:before{background:var(--yellow);border-color:#d3cb16}.slab-service-marker span{color:var(--green);font:400 clamp(31px,3vw,48px)/.95 var(--font-display);letter-spacing:-.04em}.slab-service-content{border-bottom:1px solid rgba(33,79,43,.13);padding:0 0 35px}.slab-service-item:last-child .slab-service-content{border-bottom:0}.slab-service-en{display:block;color:#65736a;font:500 12px/1.3 var(--font-en);letter-spacing:.08em;text-transform:uppercase;margin:0 0 7px}.slab-service-content h3{color:#17251d;font-size:clamp(25px,2.1vw,34px);line-height:1.15;margin:0 0 12px}.slab-service-content p{max-width:700px;color:#465149;font:400 15px/1.9 var(--font-th)}.slab-service-subpoints{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:18px}.slab-service-subpoints span{position:relative;padding-left:15px;color:var(--green);font:500 12px/1.4 var(--font-en)}.slab-service-subpoints span:before{content:"";position:absolute;left:0;top:50%;width:5px;height:5px;border-radius:50%;background:var(--yellow);transform:translateY(-50%)}.slab-services-visual{position:sticky;top:108px;align-self:start}.slab-services-photo{position:relative;width:100%;aspect-ratio:4/6.9;min-height:650px;max-height:900px;overflow:hidden;background:#dfe7df}.slab-services-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,48,26,.02) 45%,rgba(18,48,26,.64) 100%);pointer-events:none}.slab-services-photo img{width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.86)}.slab-services-photo-caption{position:absolute;z-index:2;left:28px;right:28px;bottom:30px;color:#fff}.slab-services-photo-caption span{display:block;color:var(--yellow);font:700 11px/1 var(--font-en);letter-spacing:.24em;margin-bottom:10px}.slab-services-photo-caption strong{display:block;font:400 clamp(23px,2.2vw,34px)/1.15 var(--font-display)}@media (max-width:1199px){.slab-services-layout{grid-template-columns:minmax(0,1fr) minmax(280px,.56fr);gap:48px}.slab-services-intro,.slab-service-timeline{padding-left:62px}.slab-service-timeline:before{left:18px}.slab-service-marker:before{left:-50px}.slab-service-item{grid-template-columns:62px minmax(0,1fr);gap:18px}.slab-services-photo{min-height:600px}}
@media (max-width:767px){.slab-services-vertical{padding:64px 0 74px}.slab-services-layout{display:flex;flex-direction:column;gap:52px}.slab-services-copy{width:100%}.slab-services-intro{padding:0 0 34px 48px}.slab-services-intro h2{font-size:50px}.slab-services-intro p{font-size:14px;line-height:1.85}.slab-service-timeline{padding-left:48px}.slab-service-timeline:before{left:13px;top:7px;bottom:20px}.slab-service-item{grid-template-columns:46px minmax(0,1fr);gap:12px;padding-bottom:38px}.slab-service-marker:before{left:-41px;top:5px;width:9px;height:9px;box-shadow:0 0 0 4px #fffdf7}.slab-service-marker span{font-size:30px}.slab-service-content{padding-bottom:28px}.slab-service-en{font-size:10px}.slab-service-content h3{font-size:25px;line-height:1.22}.slab-service-content p{font-size:14px;line-height:1.82}.slab-service-subpoints{gap:7px 14px}.slab-service-subpoints span{font-size:11px}.slab-services-visual{position:relative;top:auto;width:100%}.slab-services-photo{aspect-ratio:4/5;min-height:0;max-height:none}.slab-services-photo-caption{left:22px;right:22px;bottom:24px}.slab-services-photo-caption strong{font-size:28px}}
@media (max-width:479px){.slab-services-intro{padding-left:42px}.slab-service-timeline{padding-left:42px}.slab-service-item{grid-template-columns:38px minmax(0,1fr);gap:10px}.slab-service-marker:before{left:-36px}.slab-service-marker span{font-size:27px}.slab-services-intro h2{font-size:45px}}

/* =========================================================
   SERVICES — SCROLL HIGHLIGHT + R&D 2×2 PROCESS
   ========================================================= */
.slab-service-item{
  opacity:.58;
  transform:translateY(28px);
  transition:opacity .75s ease,transform .75s cubic-bezier(.22,1,.36,1),filter .75s ease;
  will-change:opacity,transform;
}
.slab-service-item.is-visible{
  opacity:.78;
  transform:translateY(0);
}
.slab-service-item.is-active{
  opacity:1;
  transform:translateY(0);
  filter:drop-shadow(0 10px 24px rgba(0,118,60,.08));
}
.slab-service-item.is-active .slab-service-marker span{
  text-shadow:0 0 18px rgba(0,118,60,.30);
}
.slab-service-item.is-active .slab-service-marker:before{
  background:var(--yellow);
  border-color:#d8d000;
  box-shadow:0 0 0 5px #fffdf7,0 0 18px rgba(232,225,0,.65);
  animation:slabServicePulse 1.8s ease-in-out infinite;
}
.slab-service-item.is-active .slab-service-content{
  border-bottom-color:rgba(0,118,60,.30);
}
.slab-service-item.is-active .slab-service-en{
  color:var(--green);
}
.slab-service-item.is-active .slab-service-content h3{
  text-shadow:0 0 20px rgba(0,118,60,.13);
}
.slab-service-item.is-active .slab-rnd-step{
  opacity:1;
}
.slab-rnd-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:58px;
  row-gap:34px;
  margin-top:30px;
}
.slab-rnd-step{
  display:grid;
  grid-template-columns:108px minmax(0,1fr);
  gap:18px;
  align-items:start;
  opacity:.76;
  transition:opacity .5s ease,transform .5s ease;
}
.slab-rnd-step:hover{
  opacity:1;
  transform:translateY(-2px);
}
.slab-rnd-no{
  color:var(--green);
  font:400 clamp(38px,3.5vw,58px)/.92 var(--font-display);
  letter-spacing:-.04em;
}
.slab-rnd-step h4{
  margin:0 0 9px;
  color:#17251d;
  font:400 clamp(20px,1.7vw,29px)/1.15 var(--font-display);
}
.slab-rnd-step p{
  margin:0;
  color:#465149;
  font:400 13px/1.75 var(--font-th);
}
@keyframes slabServicePulse{
  0%,100%{box-shadow:0 0 0 5px #fffdf7,0 0 8px rgba(232,225,0,.35)}
  50%{box-shadow:0 0 0 5px #fffdf7,0 0 22px rgba(232,225,0,.85)}
}
@media (prefers-reduced-motion:reduce){
  .slab-service-item,.slab-rnd-step{transition:none!important;transform:none!important}
  .slab-service-item.is-active .slab-service-marker:before{animation:none}
}
@media (max-width:1199px){
  .slab-rnd-grid{column-gap:32px;row-gap:28px}
  .slab-rnd-step{grid-template-columns:70px minmax(0,1fr);gap:14px}
}
@media (max-width:767px){
  .slab-service-item{opacity:.72;transform:translateY(20px)}
  .slab-service-item.is-visible,.slab-service-item.is-active{transform:translateY(0);opacity:1}
  .slab-rnd-grid{grid-template-columns:1fr;row-gap:26px;margin-top:24px}
  .slab-rnd-step{grid-template-columns:52px minmax(0,1fr);gap:12px}
  .slab-rnd-no{font-size:34px}
  .slab-rnd-step h4{font-size:22px}
  .slab-rnd-step p{font-size:13px;line-height:1.72}
}

/* R&D showcase — standalone section, visually independent from service timeline */
/* =========================================================
   RESEARCH & DEVELOPMENT — reference layout
   ========================================================= */
.ref-rnd.rnd-v2{padding:86px 0 104px;background:#ffffff;}
.rnd-divider{display:flex;align-items:center;margin:0 0 52px;}
.rnd-divider-line{flex:1 1 auto;height:3px;background:var(--yellow);}
.rnd-divider-clovers{
  flex: 0 0 240px;
  height: 60px;
  margin-left: 8px;
  background-color:var(--yellow);
  -webkit-mask-image:url("../images/clover_iconic.webp");
  mask-image:url("../images/clover_iconic.webp");
  -webkit-mask-repeat:repeat-x;
  mask-repeat:repeat-x;
  -webkit-mask-size:60px 60px;
  mask-size:60px 60px;
  -webkit-mask-position:left center;
  mask-position:left center;
}
.ref-rnd.rnd-v2 h2{
  text-align:center;
  color:var(--green);
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(36px,4.8vw,54px);
  margin:0 0 22px;
}
.rnd-intro{
  max-width:780px;
  margin:0 auto 58px;
  text-align:center;
  font:400 15px/1.85 var(--font-en);
  color:var(--text);
}
.rnd-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:70px;row-gap:46px;}
.rnd-item{display:flex;align-items:flex-start;gap:22px;}
.rnd-num{
  flex:0 0 auto;
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(50px,5vw,64px);
  line-height:1;
  color:var(--green-mid);
}
.rnd-text h3{
  margin:6px 0 10px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:28px;
  color:var(--green);
}
.rnd-text p{margin:0;font:400 15px/1.75 var(--font-en);color:var(--text);}

@media (max-width:900px){
  .rnd-grid{grid-template-columns:1fr;row-gap:38px;}
  .rnd-divider-clovers{flex-basis:170px;}
}
@media (max-width:600px){
  .rnd-item{gap:16px;}
  .rnd-num{font-size:44px;}
  .rnd-text h3{font-size:28px;}
  .rnd-divider-clovers{flex-basis:110px;height:24px;-webkit-mask-size:24px 24px;mask-size:24px 24px;}
}

/* v14: clean section headings and consistent 600 weight */
#featuredProductsTitle,
#homeActivitiesTitle,
.ref-quality h2,
.ref-standards h2,
.company-standards h2,
.partner-section h2,
.partners-section h2 {
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  font-weight: 600 !important;
}

/* v14: scroll-driven full-width frame reveal */
.slab-stat-card, .ref-card, .activity-article-card, .herbal-type-button, .herbal-product-card,
.slab-service-item, .standards-card, .partner-card {
  transform-origin: center center;
}
.scroll-frame-expand {
  width: min(100%, var(--frame-rest-width, 100%));
  margin-left: auto; margin-right: auto;
  transition: width .85s cubic-bezier(.22,.61,.36,1), border-radius .85s cubic-bezier(.22,.61,.36,1), opacity .65s ease;
}
.scroll-frame-expand.is-expanded { width: 100%; border-radius: 0; }
@media (prefers-reduced-motion: reduce) { .scroll-frame-expand { transition: none !important; } }

/* ===== Consolidated from responsive.css ===== */
/* =========================================================
   RESPONSIVE OVERRIDES
   Desktop base lives in style.css. Rules below cascade down.
   ========================================================= */

/* ---------------- TABLET 768–1199px ---------------- */
@media (max-width:1199px){
  .wrap{width:min(var(--max), calc(100% - 48px))}

  .ref-pillar{padding:30px 24px 34px}
  .ref-pillar h2{font-size:27px}
  .ref-product-grid{gap:5px}
  
  .ref-two-col{gap:40px}
  .ref-contact-grid{grid-template-columns:1fr;gap:48px}
  .ref-steps{grid-template-columns:repeat(2,1fr)}
}

/* ---------------- MOBILE ≤767px ---------------- */
@media (max-width:767px){
  .wrap{width:calc(100% - 40px)}

  .ref-page-hero{padding:56px 0 48px}

  .ref-pillars{padding:42px 0}
  .ref-pillar-grid{grid-template-columns:1fr}
  .ref-pillar{padding:24px 6px 30px;min-height:auto}
  .ref-pillar + .ref-pillar{border-left:0;border-top:1px solid rgba(255,255,255,.14)}
  .ref-pillar h2{font-size:30px;margin-bottom:16px}
  .ref-pillar p,.ref-values{font-size:14px;max-width:min(100%,60ch)}

  .ref-about{min-height:600px;margin-top:-22px;padding-top:22px;align-items:flex-end;border-radius:0 0 180px 180px / 0 0 54px 54px}
  .ref-about-content{padding:52px 0 50px}
  .ref-about-content h2{font-size:48px}
  .ref-about-content p{font-size:14px}

  .ref-purpose{padding:56px 0}
  .ref-purpose .ref-two-col{grid-template-columns:1fr;gap:28px}
  .ref-purpose .ref-two-col > .img-wrap{order:-1}

  .ref-cosmetics-banner{
    height:clamp(620px,165vw,740px);
    min-height:620px;
    padding:46px 0 0;
    background-size:auto 100%;
    background-position:center bottom;
  }
  .ref-cosmetics-banner::after{height:clamp(170px,48vw,230px)}
  .ref-cosmetics-banner .ref-reveal{max-width:100%;padding:0 4px}
  .ref-cosmetics-banner h2{font-size:clamp(39px,9.3vw,50px);line-height:1.03;letter-spacing:-.02em}
  .ref-cosmetics-banner p{max-width:360px;margin-top:14px;font-size:clamp(14px,3.8vw,16px);line-height:1.35}

  .ref-standards{padding:52px 0 60px}
  .ref-standards .ref-divider{font-size:16px;gap:10px;margin-bottom:30px}

  .ref-products{padding:48px 0 58px}
  .ref-products h2{font-size:52px}
  .ref-product-grid{grid-template-columns:repeat(2,1fr)}
  .ref-card-title{font-size:17px;left:12px;right:10px;bottom:12px;gap:6px}
  .ref-card-title .n{font-size:18px}

  .ref-quality{min-height:390px;margin-top:-22px;padding:108px 20px 60px;border-radius:50% 50% 0 0 / 92px 92px 0 0}
  .ref-quality h2{font-size:42px}
  .ref-quality p{font-size:13px;padding:0 10px}

  .ref-section{padding:56px 0}
  .ref-two-col{grid-template-columns:1fr;gap:28px}
  .ref-two-col img{aspect-ratio:4/3}
  .ref-steps{grid-template-columns:1fr 1fr;gap:1px}
  .ref-values-list{grid-template-columns:1fr}
  .ref-form-grid{grid-template-columns:1fr}
  .ref-contact-grid{gap:40px}

}

/* ---------------- SMALL MOBILE ≤479px ---------------- */
@media (max-width:479px){
  .wrap{width:calc(100% - 32px)}
  .ref-product-grid{grid-template-columns:1fr}
  .ref-card{aspect-ratio:4/5}
  .ref-steps{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  .ref-reveal,.ref-card img{transition:none}
}

/* ---------------- SERVICE PAGE ---------------- */
@media (max-width:1199px){
  .ref-diff-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:767px){
  .ref-service-banner{padding:56px 0}
  .ref-different{padding:56px 0 64px}
  .ref-different h2{margin-bottom:30px}
  .ref-diff-grid{grid-template-columns:1fr;gap:14px}
  .ref-rnd{padding:56px 0}
  .ref-checklist{grid-template-columns:1fr;gap:0}
}

/* ---------------- PRODUCTS PAGE ---------------- */
@media (max-width:767px){
  .ref-products-hero{padding:56px 0}
  .ref-products-showcase{padding:40px 0}
}

/* ---------------- ACTIVITY PAGE ---------------- */
@media (max-width:767px){
  .ref-activity-hero{padding:56px 0}
  .ref-activity-quote{padding:48px 0 56px}
  .ref-activity-photo{aspect-ratio:1/1}
  .ref-activity-grid .grid{grid-template-columns:1fr 1fr;gap:8px}
  .ref-activity-grid{padding-bottom:56px}
}

/* ---------------- CONTACT PAGE ---------------- */
@media (max-width:767px){
  .ref-contact-hero{padding:56px 0}
  .ref-contact-info{padding:48px 0 60px}
  .ref-contact-social{gap:32px}
  .ref-social-item img{width:110px;height:110px}
}

/* ---------------- CONTACT MAP ---------------- */
@media (max-width:767px){
  .ref-contact-map{padding:34px 0}
  .ref-contact-map .map-frame{height:320px}
}

/* ---------------- INQUIRY PAGE ---------------- */
@media (max-width:767px){
  .ref-inquiry-hero{padding:56px 0}
  .ref-inquiry-form-section{padding:48px 0 56px}
  .ref-inquiry-form .row{grid-template-columns:1fr;gap:20px;margin-bottom:20px}
  .ref-inquiry-form .submit-row{justify-content:stretch}
  .ref-inquiry-form button{width:100%}
  .ref-inquiry-banner{padding:56px 0}
}

@media (max-width:767px){
 .back-to-top{right:16px;bottom:16px;width:44px;height:44px}
 .site-loader-inner img{width:300px;max-width:70vw}.activity-articles-section,.activity-related{padding:56px 0 64px}.activity-article-grid{grid-template-columns:1fr;gap:18px}.activity-article-content{padding:20px}.activity-article-content h3{font-size:20px}.activity-detail-hero{padding:36px 0 56px}.activity-detail-content{padding:28px 22px 34px}.activity-detail-content h1{font-size:34px}.activity-detail-lead{font-size:15px}.activity-related-grid{grid-template-columns:1fr}.activity-related-card{grid-template-columns:1fr}.activity-related-card img{min-height:0;aspect-ratio:16/10}.activity-related-card>div{padding:20px}
}

/* ABOUT PAGE — responsive additions */
@media (max-width: 900px){
  .about-company-profile{padding:68px 0 36px}
  .about-company-grid,.about-quality-inner,.about-confidence-grid,.about-products-grid{grid-template-columns:1fr;gap:36px}
  .about-quality-copy{padding:68px 0 0}
  .about-quality-image{min-height:360px}
  .about-assurance{padding:68px 0}
  .about-assurance-grid{grid-template-columns:1fr;gap:14px}
  .about-confidence{padding:68px 0}
  .about-confidence-gallery{grid-template-columns:1fr 1fr}
  .about-confidence-gallery img{height:330px}
  .about-confidence-gallery img+img{height:270px;margin-top:34px}
  .about-products-create{padding:68px 0 78px}
}
@media (max-width: 600px){
  .about-company-grid,.about-confidence-grid,.about-products-grid{gap:28px}
  .about-company-copy p,.about-section-head>p:last-child,.about-quality-copy>p:last-child,.about-confidence-copy>p:last-child,.about-products-copy p{font-size:15px;line-height:1.85}
  .about-photo-mosaic{grid-template-columns:1fr 1fr;grid-template-rows:180px 155px;gap:10px}
  .about-photo-tall{grid-row:1 / span 2}
  .about-quality-copy{padding:54px 0 0}
  .about-quality-image{min-height:280px}
  .about-confidence-gallery{gap:10px}
  .about-confidence-gallery img{height:250px}
  .about-confidence-gallery img+img{height:210px;margin-top:20px}
  .about-products-visual img{height:280px}
  .about-products-detail span{font-size:9px;padding:9px 10px}
}

/* =========================================================
   ABOUT PAGE — 4 QUALITY STORY SECTIONS
   Visual treatment aligned to the supplied reference layouts.
========================================================= */

/* QUALITY FIRST — edge-to-edge 50/50 split */
.about-quality-heart{
  width:100%;
  margin:0;
  padding:0;
  background:#0a7d27;
}
.about-quality-inner{
  width:100%;
  max-width:none;
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:690px;
  margin:0;
}
.about-quality-copy{
  min-width:0;
  padding:96px clamp(48px,8vw,128px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  background:#0a7d27;
}
.about-quality-copy .about-kicker{
  margin:0 0 20px;
  color:#fff21a;
  font-family:var(--font-en);
  font-size:13px;
  font-weight:700;
  letter-spacing:.05em;
  line-height:1;
}
.about-quality-copy h2{
  margin:0 0 30px;
  color:#fff;
  font-family:var(--font-display);
  font-size:clamp(48px,4.2vw,72px);
  font-weight:400;
  line-height:1.06;
  letter-spacing:-.02em;
}
.about-quality-copy>p:last-child{
  max-width:650px;
  margin:0;
  color:rgba(255,255,255,.92);
  font-size:18px;
  line-height:1.75;
}
.about-quality-image{
  min-width:0;
  min-height:690px;
  overflow:hidden;
  background:#e7efea;
}
.about-quality-image img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}

/* QUALITY ASSURANCE — image cards with dark overlay */
.about-assurance{
  padding:96px 0 110px;
  background:#f7f5f0;
}
.about-section-head{
  max-width:920px;
  margin:0 auto 58px;
  text-align:center;
}
.about-section-head .about-kicker{
  margin:0 0 12px;
  color:#a5a5a5;
  font-family:var(--font-en);
  font-size:13px;
  font-weight:500;
  letter-spacing:.02em;
  line-height:1.1;
}
.about-section-head h2{
  margin:0 0 20px;
  color:#167d26;
  font-family:var(--font-display);
  font-size:clamp(46px,4.3vw,68px);
  font-weight:400;
  line-height:1.05;
}
.about-section-head>p:last-child{
  max-width:900px;
  margin:0 auto;
  color:#242424;
  font-size:18px;
  line-height:1.75;
}
.about-assurance-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:42px;
}
.about-assurance-card{
  min-width:0;
  min-height:0;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}
.about-assurance-media{
  position:relative;
  overflow:hidden;
  aspect-ratio:1.52 / 1;
  background:#222;
}
.about-assurance-media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .7s ease;
}
.about-assurance-overlay{
  position:absolute;
  inset:0;
  background:rgba(0, 0, 0, 0.697);
}
.about-assurance-content{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:34px;
}
.about-assurance-content h3{
  margin:0 0 18px;
  color:#fff;
  font-family:var(--font-display);
  font-size:clamp(34px,3.1vw,52px);
  font-weight:400;
  line-height:1.05;
}
.about-assurance-content p{
  max-width:390px;
  margin:0;
  color:#fff;
  font-size:17px;
  line-height:1.6;
}
.about-assurance-card:hover .about-assurance-media img{
  transform:scale(1.035);
}

/* QUALITY CONFIDENCE — stacked image column + copy */
.about-confidence{
  padding:96px 0 150px;
  background:#f7f5f0;
}
.about-confidence-grid{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:64px;
  align-items:center;
}
.about-confidence-gallery{
  min-width:0;
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
}
.about-confidence-gallery img{
  width:100%;
  height:320px;
  display:block;
  object-fit:cover;
}
.about-confidence-gallery img+img{
  height:320px;
  margin-top:0;
}
.about-confidence-copy{
  padding-right:clamp(0px,3vw,44px);
}
.about-confidence-copy .about-kicker{
  margin:0 0 12px;
  color:#a5a5a5;
  font-family:var(--font-en);
  font-size:13px;
  font-weight:500;
  letter-spacing:.02em;
  line-height:1.1;
}
.about-confidence-copy h2{
  margin:0 0 26px;
  color:#167d26;
  font-family:var(--font-display);
  font-size:clamp(48px,4.2vw,68px);
  font-weight:400;
  line-height:1.06;
}
.about-confidence-copy>p:last-child{
  max-width:640px;
  margin:0;
  color:#171717;
  font-size:18px;
  line-height:1.8;
}

/* PRODUCTS WE CREATE — full width image hero */
.about-products-create{
  position:relative;
  width:100%;
  min-height:690px;
  margin:0;
  padding:0;
  overflow:hidden;
  background:#263331;
  display:flex;
  align-items:center;
}
.about-products-backdrop{
  position:absolute;
  inset:0;
}
.about-products-backdrop img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  filter:saturate(.84);
}
.about-products-overlay{
  position:absolute;
  inset:0;
  background:rgba(19,30,29,.70);
}
.about-products-content-wrap{
  position:relative;
  z-index:2;
  width:min(1180px,calc(100% - 64px));
  margin:0 auto;
}
.about-products-copy{
  max-width:1120px;
  margin:0 auto;
  text-align:center;
}
.about-products-copy .about-kicker{
  margin:0 0 20px;
  color:#fff;
  font-family:var(--font-en);
  font-size:14px;
  font-weight:500;
  letter-spacing:.03em;
  line-height:1.1;
}
.about-products-copy h2{
  margin:0 0 28px;
  color:#fff21a;
  font-family:var(--font-display);
  font-size:clamp(60px,7vw,110px);
  font-weight:400;
  line-height:.98;
  letter-spacing:-.025em;
}
.about-products-copy p{
  max-width:1080px;
  margin:0 auto 12px;
  color:#fff;
  font-size:18px;
  line-height:1.75;
}
.about-products-copy p:last-child{
  margin-bottom:0;
}

/* Preserve the remaining About page sections */
.about-standards-block{
  padding-top:54px;
}

@media (max-width:1100px){
  .about-quality-inner{min-height:620px}
  .about-quality-image{min-height:620px}
  .about-quality-copy{padding:72px 6vw}
  .about-quality-copy h2{font-size:clamp(44px,4.8vw,62px)}
  .about-assurance-grid{gap:24px}
  .about-assurance-content{padding:24px}
  .about-assurance-content h3{font-size:clamp(31px,3.7vw,46px)}
  .about-confidence-grid{gap:42px}
  .about-confidence-gallery img,.about-confidence-gallery img+img{height:290px}
  .about-products-create{min-height:620px}
  .about-products-content-wrap{width:min(1120px,calc(100% - 48px))}
}

@media (max-width:900px){
  .about-quality-inner{
    grid-template-columns:1fr;
    min-height:0;
  }
  .about-quality-copy{
    min-height:480px;
    padding:78px 7vw;
  }
  .about-quality-image{
    min-height:480px;
  }

  .about-assurance{
    padding:78px 0 88px;
  }
  .about-assurance-grid{
    grid-template-columns:1fr;
    gap:20px;
  }
  .about-assurance-media{
    aspect-ratio:1.65 / 1;
  }
  .about-assurance-content h3{
    font-size:clamp(34px,6.5vw,50px);
  }

  .about-confidence{
    padding:78px 0 88px;
  }
  .about-confidence-grid{
    grid-template-columns:1fr;
    gap:38px;
  }
  .about-confidence-copy{
    padding-right:0;
  }
  .about-confidence-copy h2{
    font-size:clamp(46px,7.5vw,62px);
  }

  .about-products-create{
    min-height:600px;
  }
  .about-products-content-wrap{
    width:min(1100px,calc(100% - 36px));
  }
  .about-products-copy h2{
    font-size:clamp(54px,10vw,82px);
  }
}

@media (max-width:600px){
  .about-quality-copy{
    min-height:420px;
    padding:58px 28px;
  }
  .about-quality-copy h2{
    font-size:clamp(40px,12vw,54px);
  }
  .about-quality-copy>p:last-child,
  .about-section-head>p:last-child,
  .about-confidence-copy>p:last-child,
  .about-products-copy p{
    font-size:15px;
    line-height:1.8;
  }
  .about-quality-image{
    min-height:360px;
  }
  .about-assurance{
    padding:64px 0 70px;
  }
  .about-section-head{
    margin-bottom:34px;
  }
  .about-section-head h2{
    font-size:clamp(42px,11vw,56px);
  }
  .about-assurance-content{
    padding:22px;
  }
  .about-assurance-content h3{
    font-size:clamp(32px,9.5vw,44px);
  }
  .about-assurance-content p{
    font-size:14px;
    line-height:1.6;
  }
  .about-confidence{
    padding:64px 0 72px;
  }
  .about-confidence-gallery{
    gap:12px;
  }
  .about-confidence-gallery img,
  .about-confidence-gallery img+img{
    height:245px;
  }
  .about-confidence-copy h2{
    font-size:clamp(42px,11vw,56px);
  }
  .about-products-create{
    min-height:650px;
  }
  .about-products-content-wrap{
    width:calc(100% - 28px);
  }
  .about-products-copy h2{
    font-size:clamp(50px,14vw,70px);
  }
  .about-products-copy .about-kicker{
    font-size:12px;
  }
}

/* ===== Consolidated from flair.css ===== */
/* =========================================================
   S-LAB · FLAIR LAYER
   Extra motion & interaction added on top of the existing
   design system. Loaded after style.css / responsive.css.
   ========================================================= */

/* ---------- Page-load fade-in ---------- */
body{opacity:0}
body.is-ready{opacity:1;transition:opacity .5s ease}

/* ---------- Scroll progress bar ---------- */
.slab-progress{
  position:fixed;top:0;left:0;height:3px;width:0%;
  background:linear-gradient(90deg,var(--yellow),var(--green-mid,#3f7f3c));
  z-index:9999;transition:width .12s linear;
  pointer-events:none;
}

/* ---------- Back to top ---------- */
.slab-top{
  position:fixed;right:22px;bottom:22px;z-index:999;
  width:48px;height:48px;border-radius:50%;
  background:var(--green);color:var(--yellow);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;line-height:1;
  border:0px solid rgba(255,255,255,.25);
  box-shadow:0 8px 20px rgba(20,40,20,.28);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.9);
  transition:opacity .3s ease,transform .3s ease,visibility .3s,background-color .25s;
  cursor:pointer;
}
.slab-top.show{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.slab-top:hover{background:var(--green-mid);color:var(--white)}
.slab-top svg{width:18px;height:18px;transform:translateY(1px)}

/* ---------- Reveal: stagger + direction variants ---------- */
.ref-reveal{
  transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
.ref-reveal.dir-left{transform:translate(-32px,10px)}
.ref-reveal.dir-left.in{transform:translate(0,0)}
.ref-reveal.dir-right{transform:translate(32px,10px)}
.ref-reveal.dir-right.in{transform:translate(0,0)}
.ref-reveal.dir-scale{transform:scale(.94) translateY(18px)}
.ref-reveal.dir-scale.in{transform:scale(1) translateY(0)}

@media (prefers-reduced-motion: reduce){
  .ref-reveal, body.is-ready, .slab-top{transition:none !important}
  body{opacity:1}
}

/* ---------- Hero: gentle ken-burns ---------- */
.ref-hero{position:relative}
.ref-hero img{
  animation:slabKenBurns 18s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes slabKenBurns{
  0%{transform:scale(1) translate3d(0,0,0)}
  100%{transform:scale(1.045) translate3d(0,-.6%,0)}
  50%{transform:translate(14px,-18px) scale(1.08)}
}

/* Desktop-only subtle parallax on full-bleed banners */
@media (min-width:993px){
  .ref-about-banner,.ref-service-banner,.ref-activity-hero,
  .ref-contact-hero,.ref-inquiry-hero,.products-catalog-hero{
    background-attachment:fixed;
  }
}
.ref-card:hover{box-shadow:0 18px 40px rgba(0,0,0,.28)}
.ref-card-title{transition:transform .4s ease}
.ref-card:hover .ref-card-title{transform:translateY(-4px)}
.ref-card:before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(120deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 40%);
  opacity:0;transition:opacity .4s ease;
  pointer-events:none;
}
.ref-card:hover:before{opacity:1}

.ref-card{
  transition:transform .25s ease, box-shadow .35s ease;
  transform-style:preserve-3d;
}
.ref-card img{transform:translateZ(0)}
.ref-card-title,.ref-card-desc{transform:translateZ(40px)}

/* ---------- Stat / counter strip ---------- */
.slab-stats{
  border-top:1px solid rgba(33,79,43,.1);
  border-bottom:1px solid rgba(33,79,43,.1);
}
.slab-stats .wrap{
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  text-align:center;
}
.slab-stat-num{
  font-family:var(--font-display);
  color:var(--green);
  font-size:clamp(34px,4vw,52px);
  line-height:1;
  letter-spacing:-.02em;
  display:inline-flex;
  align-items:baseline;
  gap:2px;
}
.slab-stat-num .suffix{font-size:.5em;color:var(--green-mid,#3f7f3c)}
.slab-stat-label{
  margin-top:10px;
  font:500 13px/1.5 var(--font-th);
  color:var(--text);
  opacity:.75;
  letter-spacing:.01em;
}
@media (max-width:767px){
  .slab-stats .wrap{grid-template-columns:repeat(2,1fr);row-gap:34px}
  .slab-top{right:16px;bottom:16px;width:44px;height:44px}
}

/* ---------- Marquee: pause on hover (progressive enhancement) ---------- */

/* =========================================================
   GRAPHIC UPGRADE — botanical accents, mesh blobs, badges,
   split-line headline reveal, unified image tone.
   ========================================================= */

/* ---------- Soft gradient mesh blobs (light sections) ---------- */

/* ---------- Split-line / word headline reveal ---------- */
.slab-split-word{
  display:inline-block;
  transform:translateY(110%);
  opacity:0;
  transition:transform .7s cubic-bezier(.22,.61,.36,1), opacity .7s ease;
}
.slab-split-ready.in .slab-split-word{transform:translateY(0);opacity:1}
@media (prefers-reduced-motion: reduce){
  .slab-split-word{transform:none;opacity:1;transition:none}
}

/* ---------- Unified product image tone ---------- */
.ref-card img{filter:saturate(1.06) contrast(1.03) brightness(1.01)}

/* ---------- Nav link underline sweep ---------- */

/* ---------- Mobile menu: glass panel ---------- */

/* ---------- Misc polish ---------- */
.ref-card img,.ref-about img,.ref-quality img{will-change:transform}

/* =========================================================
   GRAPHIC POLISH PASS 2
   Botanical accents, gradient washes, badges, split-text,
   colour grading, light sweep.
   ========================================================= */

/* ---- Gradient mesh washes on light sections ---- */
.slab-stats:before,.slab-stats:after{
  content:"";position:absolute;border-radius:50%;
  filter:blur(60px);z-index:0;pointer-events:none;
  animation:slabDrift 14s ease-in-out infinite;
}
.slab-stats:before{
  width:340px;height:340px;left:-90px;top:-140px;
  background:radial-gradient(circle,rgba(63,127,60,.16),rgba(63,127,60,0) 70%);
}
.slab-stats:after{
  width:300px;height:300px;right:-80px;bottom:-120px;
  background:radial-gradient(circle,rgba(255,247,57,.22),rgba(255,247,57,0) 70%);
  animation-delay:-6s;
}

.ref-purpose{position:relative;overflow:hidden}
.ref-purpose:before{
  content:"";position:absolute;top:-120px;right:-120px;
  width:360px;height:360px;border-radius:50%;
  /*background:radial-gradient(circle,rgba(33,79,43,.08),rgba(33,79,43,0) 70%);*/
  filter:blur(40px);z-index:0;pointer-events:none;
}
.ref-purpose .wrap{position:relative;z-index:1}

/* ---- Split-word heading reveal ---- */
.split-reveal{overflow:visible}
.split-reveal .word{
  display:inline-block;
  opacity:0;
  transform:translateY(.35em);
  transition:opacity .6s ease, transform .6s ease;
}
.split-reveal.in .word{opacity:1;transform:translateY(0)}

/* ---- Colour grading pass for photography (visual cohesion) ---- */
.ref-card img,
.activity-gallery-item img,
.slab-related-img img,
.detail-image img,
.related-card img{
  filter:saturate(1.06) contrast(1.03) brightness(1.01);
}

/* ---- Light sweep across the hero on load ---- */
.ref-hero{isolation:isolate}
.ref-hero:after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(115deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.35) 48%,rgba(255,255,255,0) 61%);
  transform:translateX(-120%);
  animation:slabSweep 2.6s ease-in-out .3s 1;
  pointer-events:none;
  mix-blend-mode:screen;
}
@keyframes slabSweep{
  to{transform:translateX(120%)}
}

@media (prefers-reduced-motion: reduce){
  .ref-hero:after{animation:none;display:none}
  .split-reveal .word{transition:none;opacity:1;transform:none}
}

/* ---- Magnetic buttons (JS sets inline transform: translate) ---- */
.ref-outline, .detail-cta{
  transition:transform .18s ease-out, background .25s,color .25s,box-shadow .25s;
}

/* ---- Cursor-follow glow (desktop hero/banners) ---- */
.slab-glow{
  position:absolute;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,247,57,.16),rgba(255,247,57,0) 70%);
  transform:translate(-50%,-50%);
  left:var(--gx,50%);top:var(--gy,50%);
  pointer-events:none;z-index:0;
  opacity:0;transition:opacity .4s ease;
}
.slab-glow.on{opacity:1}
@media (max-width:900px){.slab-glow{display:none}}

/* ---- Product Search box (products.html) ---- */
.slab-product-search{
  position:relative;
  max-width:420px;
  margin:0 0 18px;
  display:flex;
  align-items:center;
  gap:10px;
  background:#fff;
  border:1px solid rgba(32,56,37,.18);
  border-radius:999px;
  padding:11px 16px;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.slab-product-search:focus-within{
  border-color:var(--green);
  box-shadow:0 0 0 3px rgba(63,127,60,.12);
}
.slab-product-search svg{color:rgba(32,56,37,.5);flex:0 0 auto}
.slab-product-search input{
  border:0;outline:0;flex:1;min-width:0;
  font:500 14px/1.3 "Noto Sans Thai",Manrope,sans-serif;
  color:var(--green);background:transparent;
}
.slab-product-search input::placeholder{color:rgba(32,56,37,.42)}
.slab-product-search button{
  border:0;background:rgba(32,56,37,.08);color:var(--green);
  width:22px;height:22px;border-radius:50%;cursor:pointer;
  font-size:15px;line-height:1;flex:0 0 auto;
}
.slab-product-search button:hover{background:rgba(32,56,37,.16)}

/* ---- Product category filter icons (products.html) ---- */
.product-toolbar{
  align-items:flex-start !important;
  height:auto !important;
  min-height:0 !important;
  overflow:visible !important;
  padding-top:10px !important;
  padding-bottom:16px !important;
}
.product-filter{
  display:flex !important;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:16px 18px 14px !important;
  border-radius:18px !important;
  min-width:104px;
}
.product-filter-icon{
  width:72px;height:72px;border-radius:20px;
  overflow:hidden;flex:0 0 auto;
  background:#f4f1e6;
  border:1px solid rgba(32,56,37,.16);
  display:flex;align-items:center;justify-content:center;
  padding:14px;
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.product-filter-icon img{
  width:100%;height:100%;object-fit:contain;display:block;
  transition:filter .25s ease;
}
.product-filter-label{
  font:600 14px/1.2 Manrope,"Noto Sans Thai",sans-serif;
  white-space:nowrap;
}
.product-filter:hover .product-filter-icon,
.product-filter.is-active .product-filter-icon{
  background-color:var(--green);
  border-color:var(--green);
  transform:translateY(-2px);
  box-shadow:0 6px 14px rgba(32,56,37,.22);
}
.product-filter:hover .product-filter-icon img,
.product-filter.is-active .product-filter-icon img{
  filter:brightness(0) invert(1);
}
/* Icon-only inversion — the button itself never gets a pill
   background or extra ring; only the icon swatch changes. */
.product-filter:hover,
.product-filter.is-active{
  background:transparent !important;
  color:var(--green) !important;
  border-color:transparent !important;
}

/* ---- Mobile: category picker becomes a tap-to-open dropdown ---- */
.product-filter-wrap{position:relative}
.product-filter-trigger{
  display:none;
  width:100%;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  background:#fff;
  border:1px solid rgba(32,56,37,.18);
  border-radius:14px;
  cursor:pointer;
  font:600 14px/1.2 Manrope,"Noto Sans Thai",sans-serif;
  color:var(--green);
  text-align:left;
}
.product-filter-trigger-icon{
  width:44px;height:44px;border-radius:11px;flex:0 0 auto;
  background:#f4f1e6;
  display:flex;align-items:center;justify-content:center;padding:3px;
}
.product-filter-trigger-icon img{width:100%;height:100%;object-fit:contain}
.product-filter-trigger-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.product-filter-trigger-chevron{flex:0 0 auto;transition:transform .25s ease}
.product-filter-trigger[aria-expanded="true"] .product-filter-trigger-chevron{transform:rotate(180deg)}

@media (max-width:767px){
  .product-filter-trigger{display:flex}
  .product-toolbar{
    display:none;
    position:absolute;
    left:0;right:0;top:100%;
    margin-top:8px;
    background:#fff;
    border:1px solid rgba(32,56,37,.14);
    border-radius:16px;
    box-shadow:0 20px 45px rgba(20,40,20,.2);
    padding:8px;
    z-index:60;
    flex-direction:column !important;
    flex-wrap:nowrap !important;
    overflow-x:visible !important;
    max-height:70vh;
    overflow-y:auto;
    gap:2px !important;
  }
  .product-toolbar.open{display:flex}
  .product-filter{
    flex-direction:row !important;
    justify-content:flex-start !important;
    width:100%;
    min-width:0 !important;
    padding:10px 12px !important;
    border-radius:10px !important;
    gap:12px !important;
  }
  .product-filter-icon{width:38px;height:38px;border-radius:10px;padding:8px}
  .product-filter-label{font-size:14px}
  /* selected row inside the open dropdown: soft highlight instead of
     the icon-invert treatment (which stays reserved for the trigger) */
  .product-filter.is-active{background:rgba(63,127,60,.08) !important}
}

/* ---- Counter finish pulse ---- */
.slab-stat-num{transition:text-shadow .4s ease, transform .4s ease}
@keyframes slabPulse{
  0%{text-shadow:0 0 0 rgba(255,247,57,0)}
  40%{text-shadow:0 0 18px rgba(255,247,57,.55);transform:scale(1.06)}
  100%{text-shadow:0 0 0 rgba(255,247,57,0);transform:scale(1)}
}

/* Product page runtime fallback / empty state */
.product-empty{
  font:400 15px/1.7 "Noto Sans Thai",sans-serif;
}

/* Pointer-follow effects disabled per request. */
.slab-glow{display:none !important;}

/* ---------------------------------------------------------
   ABOUT — From Concept to Product banner (full-width photo, text on left)
--------------------------------------------------------- */
.ref-purpose{
  position:relative;
  z-index:1;
  margin-top:0;
  padding:14px 0 0;
  min-height:clamp(420px,45.4vw,727px);
  display:flex;align-items:center;
  overflow:hidden;
  background:#fafaff url("../images/bg_concept.webp") right center/cover no-repeat;
}
.ref-purpose .ref-purpose-text{max-width:min(46%,700px);padding:56px 0}
.ref-purpose h2,
.ref-purpose h2 *{
  color:#006a00 !important;
  font-weight:700 !important;
  font-size:clamp(32px,5.2vw,64px) !important;
  line-height:0.65 !important;
  margin:0 0 clamp(24px,3.2vw,24px);
}
.ref-purpose p{
  font-family:"Noto Sans Thai","Manrope",sans-serif;
  font-size:clamp(16px,1.6vw,16px);
  line-height:1.8;
  color:#1f1f1f;
  margin:0 0 clamp(20px,2.4vw,36px);
}
.ref-purpose p:last-child{margin-bottom:0}
@media (max-width:767px){
  .ref-purpose{
    min-height:0;align-items:flex-start;
    margin-top:-20px;padding-top:8px;
    border-radius:0;
    background:linear-gradient(180deg,rgba(250,250,255,.96) 0%,rgba(250,250,255,.9) 55%,rgba(250,250,255,.55) 100%),
               url("../images/bg_concept.webp") 78% bottom/cover no-repeat;
  }
  .ref-purpose .ref-purpose-text{max-width:100%;padding:48px 0 150px}
  .ref-purpose h2,.ref-purpose h2 *{font-size:clamp(38px,11vw,54px) !important}
  .ref-purpose p{font-size:16px}
}

/* ===== Consolidated from home-updates.css ===== */
/* Homepage updates: animated stats cards and activity preview. */
.slab-stats-heading { max-width: 800px; margin: 0 auto 34px; text-align: center; }
.slab-stats-heading > span {
  display: inline-block; margin-bottom: 10px; color: #32733d;
  font: 800 11px/1.3 var(--font-en, "Manrope", sans-serif); letter-spacing: .22em;
}
.slab-stats-heading h2 {
  margin: 0; color: #173f26; font-size: clamp(30px, 4vw, 44px); font-weight: 800; line-height: 1.25;
}
.slab-stats-heading p { margin: 13px auto 0; max-width: 620px; color: #5d6b5e; font-size: 15px; line-height: 1.8; }
.slab-stat-card {
  position: relative; min-height: 178px; display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 28px 18px; text-align: center; color: #fff; overflow: hidden;
  border: 1px solid #0d6331; border-radius: 20px;
  background: linear-gradient(145deg, #0d6331 0%, #07552b 54%, #064322 100%);
  box-shadow: 0 14px 32px rgba(11, 66, 35, .16);
  opacity: 0; transform: translateY(28px) scale(.86);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease;
}
.slab-stat-card:before {
  content: ""; position: absolute; width: 170px; height: 170px; top: -100px; right: -60px;
  border: 1px solid rgba(255,255,255,.16); border-radius: 50%; pointer-events: none;
}
.slab-stat-card:after {
  content: ""; position: absolute; inset: auto 18px 0; height: 3px; border-radius: 3px 3px 0 0;
  background: rgba(255,255,255,.26); transform: scaleX(.25); transform-origin: center; transition: transform .6s ease;
}
.slab-stat-card.in { opacity: 1; transform: translateY(0) scale(1); }
.slab-stat-card.in:after { transform: scaleX(1); }
.slab-stat-card:hover { box-shadow: 0 20px 40px rgba(11,66,35,.23); transform: translateY(-5px) scale(1.025); }
.slab-stat-card .slab-stat-num { position: relative; z-index: 1; color: #fff; font-family: var(--font-en, "Manrope", sans-serif); font-size: clamp(42px, 4vw, 58px); font-weight: 800; line-height: 1.02; letter-spacing: -.04em; }
.slab-stat-card .slab-stat-num .suffix { color: #fff; font-size: .5em; font-weight: 800; }
.slab-stat-card .slab-stat-label { position: relative; z-index: 1; margin-top: 14px; color: rgba(255,255,255,.94); opacity: 1; font: 700 14px/1.65 var(--font-th, "Noto Sans Thai", sans-serif); }
.slab-stat-card .slab-stat-label br + * { font-weight: 600; }
.slab-stat-num.pulse { animation: slabStatWhitePulse .55s ease; }
@keyframes slabStatWhitePulse { 40% { text-shadow: 0 0 22px rgba(255,255,255,.5); transform: scale(1.07); } }

.home-activities { padding: clamp(62px, 7vw, 96px) 0; background: #fff; }
.home-activities .wrap { width: min(1240px, calc(100% - 56px)); }
.home-activities .activity-section-heading { margin-bottom: 38px; }
.home-activities .activity-section-heading h2 { font-family:var(--font-display); font-weight: 700; }
.home-activity-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-activity-card .activity-article-image { aspect-ratio: 16/10; }
.home-activity-card .activity-article-content { padding: 22px 22px 24px; }
.home-activity-card .activity-article-content h3 { font-size: 20px; }
.home-activity-card .activity-article-content > p:not(.activity-article-date) { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.home-activities-footer { display: flex; justify-content: center; margin-top: 34px; }
.home-activities-footer .ref-outline { display: inline-flex; align-items: center; gap: 12px; border: 1px solid #276c3b; border-radius: 2px; padding: 14px 24px; color: #276c3b; font-size: 13px; font-weight: 800; transition: color .25s ease, background .25s ease; }
.home-activities-footer .ref-outline:hover { color: #fff; background: #276c3b; }

@media (max-width: 900px) {
  .slab-stat-card { min-height: 160px; }
  .home-activity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-activity-card:last-child { display: none; }
}
@media (max-width: 600px) {
  .slab-stats .wrap, .home-activities .wrap { width: calc(100% - 36px); }
  .slab-stat-card { min-height: 142px; padding: 20px 10px; border-radius: 16px; }
  .slab-stat-card .slab-stat-num { font-size: 40px; }
  .slab-stat-card .slab-stat-label { margin-top: 9px; font-size: 12px; }
  .home-activities { padding: 54px 0 60px; }
  .home-activity-grid { grid-template-columns: 1fr; }
  .home-activity-card:last-child { display: block; }
  .home-activity-card .activity-article-content { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .slab-stat-card, .slab-stat-card:after, .home-activities-footer .ref-outline { transition: none !important; }
  .slab-stat-card { opacity: 1; transform: none; }
}

/* ===== Consolidated from slider.css ===== */
/* =========================================================
   S-LAB · SLIDERS (Hero + Certificates)
   Native scroll-snap — swipe on touch, drag/arrows on desktop
   ========================================================= */

/* ---------- Leaf-shaped page dots ---------- */
.slider-dots{
  --dot-off:hsla(0, 0%, 100%, 0.80);
  --dot-on:#007f1c;
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.slider-dot{
  position:relative;width:30px;height:30px;padding:0;border:0;background:none;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.slider-dot::before{
  content:"";position:absolute;inset:6px;
  background:var(--dot-off);
  -webkit-mask:var(--leaf) center/contain no-repeat;
          mask:var(--leaf) center/contain no-repeat;
  transform:rotate(-12deg) scale(.82);
  transition:transform .45s cubic-bezier(.34,1.56,.64,1),background-color .3s ease;
}
.slider-dot:hover::before{transform:rotate(-12deg) scale(1)}
.slider-dot.is-active::before{
  background:var(--dot-on);
  transform:rotate(14deg) scale(1.28);
}
.slider-dot:focus-visible{outline:2px solid var(--dot-on);outline-offset:-2px;border-radius:50%}
:root{
  --leaf:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M21 2.5C11.5 2 4 7.2 4 15.2c0 1.5.3 2.9.9 4.1L2.8 21.4l1.4 1.2 2.2-2.1c1.2.6 2.7 1 4.4 1C18.600 21.500 22 12.500 21 2.500zM6.800 17.700C8.300 12.800 12.300 8.800 17.200 7.200c-3.400 2.600-6.700 6.100-8.700 10.900z'/%3E%3C/svg%3E");
}

/* ---------- Arrows ---------- */
.slider-arrow{
  position:absolute;top:50%;z-index:4;width:46px;height:46px;margin-top:-23px;
  display:grid;place-items:center;padding:0;cursor:pointer;
  border:1px solid rgba(255,255,255,.55);border-radius:50%;
  background:rgba(33,79,43,.55);color:#fff;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .3s ease,background .25s ease,transform .25s ease;
}
.slider-arrow svg{width:20px;height:20px}
.slider-arrow:hover{background:#007f1c;transform:scale(1.07)}
.slider-arrow--prev{left:18px}
.slider-arrow--next{right:18px}
[data-slider]:hover .slider-arrow,
[data-slider]:focus-within .slider-arrow{opacity:1}
@media (hover:none){.slider-arrow{display:none}}

/* ---------- Shared track ---------- */
[data-slider-track]{
  position:relative;display:flex;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;scrollbar-width:none;
}
[data-slider-track]::-webkit-scrollbar{display:none}

/* =========================================================
   HERO
   ========================================================= */
.ref-hero.hero-slider{position:relative;background:var(--cream)}
.hero-slider .hero-slide{
  position:relative;flex:0 0 100%;aspect-ratio:16/9;overflow:hidden;
  scroll-snap-align:start;scroll-snap-stop:always;background:var(--cream);
}
.ref-hero.hero-slider .hero-slide img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  animation:none;transform:scale(1);transform-origin:50% 50%;
}
.hero-slider .hero-slide.is-active img{animation:heroZoom 9s ease-out forwards}
@keyframes heroZoom{from{transform:scale(1)}to{transform:scale(1.06)}}

.hero-slide--photo::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
}
.hero-caption{
  position:absolute;z-index:2;left:max(24px,7vw);bottom:20%;max-width:min(560px,52%);color:#fff;
}
.hero-caption>*{opacity:0;transform:translateY(22px)}
.hero-slide.is-active .hero-caption>*{animation:heroRise .9s cubic-bezier(.2,.7,.2,1) forwards}
.hero-slide.is-active .hero-caption>*:nth-child(2){animation-delay:.18s}
.hero-slide.is-active .hero-caption>*:nth-child(3){animation-delay:.36s}
@keyframes heroRise{to{opacity:1;transform:none}}
.hero-kicker{
  display:flex;align-items:center;gap:12px;margin:0 0 14px;
  font:600 clamp(11px,1.1vw,15px)/1 var(--font-en,"Manrope",sans-serif);
  letter-spacing:.22em;text-transform:uppercase;color:#f2d04a;
}
.hero-kicker::before{content:"";width:38px;height:2px;background:currentColor}
.hero-caption h2{
  margin:0 0 12px;color:#fff;font:700 clamp(22px,3.8vw,56px)/1.18 var(--font-th);
  text-shadow:0 2px 18px rgba(0,0,0,.35);
}
.hero-caption p{
  margin:0;font:400 clamp(12px,1.35vw,19px)/1.7 var(--font-th);color:rgba(255,255,255,.92);
}

.hero-slider .slider-dots{
  position:absolute;left:50%;bottom:clamp(8px,2.2vw,28px);z-index:4;transform:translateX(-50%);
  padding:1px 10px;border-radius:999px;background:rgba(33,79,43,.5);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}

@media (max-width:640px){
  .hero-caption{bottom:19%;max-width:86%}
  .hero-caption p:not(.hero-kicker){display:none}
  .hero-kicker{margin-bottom:8px;white-space:nowrap;letter-spacing:.12em;font-size:10px}
  .hero-kicker::before{width:22px}
  .slider-dot{width:26px;height:26px}
}

/* =========================================================
   CERTIFICATES
   ========================================================= */
.standards-slider{position:relative;max-width:1180px;margin:0 auto}
.standards-slider .standards-certs{
  --card-w:min(380px,78vw);
  display:flex;gap:clamp(24px,4vw,56px);max-width:none;margin:0;
  padding:8px max(16px,calc(50% - var(--card-w)/2)) 18px;
  scroll-padding-inline:max(16px,calc(50% - var(--card-w)/2));
  grid-template-columns:none;
}
.standards-slider .standards-cert{
  flex:0 0 var(--card-w);scroll-snap-align:center;
  opacity:.5;transform:scale(.93);
  transition:opacity .45s ease,transform .45s ease;
}
.standards-slider .standards-cert.is-active{opacity:1;transform:scale(1)}
.standards-slider .standards-cert img{
  -webkit-user-drag:none;user-select:none;
}
.standards-slider .slider-arrow{
  opacity:1;border-color:rgba(33,79,43,.25);background:#fff;color:var(--green);
  box-shadow:0 6px 18px rgba(0,0,0,.12);top:42%;
}
.standards-slider .slider-arrow:hover{background:var(--green);color:#fff}
.standards-slider .slider-dots{--dot-off:#c7d4c9;--dot-on:var(--green);margin-top:10px}
@media (max-width:640px){.standards-slider .slider-arrow{display:none}}

@media (prefers-reduced-motion:reduce){
  .hero-slider .hero-slide.is-active img{animation:none}
  .hero-caption>*{opacity:1;transform:none;animation:none !important}
  .slider-dot::before,.standards-slider .standards-cert{transition:none}
}

/* ===== Consolidated from herbal.css ===== */
/* S-LAB Herbal page */
.herbal-page { color: #243528; }
.herbal-page-title .page-title-inner { overflow: hidden; }
.herbal-story { padding: clamp(56px, 7vw, 100px) 0; background: #fbfcf8; }
.herbal-story-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; gap: clamp(35px, 6vw, 86px); }
.herbal-kicker { margin: 0 0 14px; color: #2d773c; font: 800 11px/1.4 var(--font-en, "Manrope", sans-serif); letter-spacing: .18em; }
.herbal-story-copy h2 { margin: 0 0 24px; color: #167d26; font-weight: 800; letter-spacing: -.025em; }
.herbal-story-copy h2 span { color: #538650; }
.herbal-story-copy > p:not(.herbal-kicker) { max-width: 620px; margin: 0 0 16px; color: #526055; font-size: 15px; line-height: 1.95; }
.herbal-primary-link { display: inline-flex; align-items: center; justify-content: center; gap: 15px; margin-top: 15px; padding: 14px 21px; border-radius: 3px; background: #176332; border: 1px solid #176332; color: #fff; font-size: 14px; font-weight: 700; transition: background .25s ease, transform .25s ease; }
.herbal-primary-link:hover { background: #0d4e27; transform: translateY(-2px); color: #fff; }
.herbal-story-visual { position: relative; min-height: 400px; aspect-ratio: 1.12/1; overflow: hidden; border-radius: 18px; background: #e3eade; box-shadow: 0 20px 54px rgba(26,64,36,.16); }
.herbal-story-visual:after { content: ""; position: absolute; inset: 30% 0 0; background: linear-gradient(180deg, transparent, rgba(5,46,22,.78)); pointer-events: none; }
.herbal-story-visual img { display: block; width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; }
.herbal-image-caption { position: absolute; z-index: 1; left: 28px; bottom: 27px; color: #fff; }
.herbal-image-caption span { display: block; margin-bottom: 8px; color: #e5e9a5; font: 800 11px/1 var(--font-en, "Manrope", sans-serif); letter-spacing: .2em; }
.herbal-image-caption strong { display: block; font: 500 clamp(24px, 2.8vw, 36px)/1.2 var(--font-display, "Noto Sans Thai", sans-serif); }

.herbal-process { padding: clamp(58px, 7vw, 90px) 0; color: #fff; background: #0a7d27; position: relative; overflow: hidden; }
.herbal-process:before { content: ""; position: absolute; width: 460px; height: 460px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; left: -230px; bottom: -260px; }
.herbal-process .wrap { position: relative; z-index: 1; }
.herbal-section-heading { max-width: 780px; margin: 0 auto 42px; text-align: center; }
.herbal-section-heading .herbal-kicker { color: #fff21a; }
.herbal-section-heading h2 { margin: 0; color: inherit; font-size: clamp(31px, 4.1vw, 48px); font-weight: 800; line-height: 1.3; }
.herbal-section-heading > p:last-child { margin: 13px auto 0; max-width: 660px; color: rgba(255,255,255,.78); font-size: 14px; line-height: 1.8; }
.herbal-process-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
.herbal-process-card { position: relative; min-height: 258px; padding: 25px 22px 26px; border: 1px solid rgba(255,255,255,.16); border-radius: 16px; background: linear-gradient(145deg, rgb(0 0 0 / 15%), rgb(0 0 0 / 25%)); transition: transform .3s ease, background .3s ease, border-color .3s ease; }
.herbal-process-card:hover { transform: translateY(-5px); background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.08); }
.herbal-process-card > span { position: absolute; right: 20px; top: 18px; color: rgba(255,255,255,.35); font: 700 12px/1 var(--font-en, "Manrope", sans-serif); letter-spacing: .1em; }
.herbal-process-symbol { display: flex; width: 64px; height: 54px; align-items: center; justify-content: center; margin: 12px 0 22px; color: #174e2a; background: #ffffff; border-radius: 16px; font:700 27px var(--font-display, "Cloud Lucent", serif);}
.herbal-process-card h3 { margin: 0 0 11px; color: #fff; font-size: 21px; line-height: 1.4; }
.herbal-process-card p { margin: 0; color: rgba(255,255,255,.75); font-size: 13px; line-height: 1.9; }

.herbal-types-section { padding: clamp(58px, 7vw, 90px) 0 10px; background: #f5f7f1; }
.herbal-types-section .herbal-section-heading { color: #173f26; margin-bottom: 34px; }
.herbal-types-section .herbal-section-heading .herbal-kicker { color: #4b8447; }
.herbal-types-section .herbal-section-heading > p:last-child { color: #667166; }
.herbal-type-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 13px; }
.herbal-type-button { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 18px 12px 17px; text-align: center; border: 1px solid rgba(37,91,48,.13); border-radius: 16px; background: #fff; color: #26492d; cursor: pointer; box-shadow: 0 7px 22px rgba(37,69,41,.045); transition: transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease; }
.herbal-type-button:hover { transform: translateY(-4px); border-color: rgba(37,105,54,.35); box-shadow: 0 12px 28px rgba(37,69,41,.09); }
.herbal-type-button.is-active { background: #e9f2e7; border-color: #28703b; box-shadow: 0 0 0 2px rgba(40,112,59,.08), 0 12px 28px rgba(37,69,41,.08); }
.herbal-type-button img { display: block; width: 100%; max-width: 112px; height: 102px; object-fit: contain; margin: 0 auto 10px; }
.herbal-type-button > span { display: block; color: #194e2b; font-size: 17px; font-weight: 800; line-height: 1.4; }
.herbal-type-button small { display: block; margin-top: 5px; color: #779078; font: 700 8px/1.5 var(--font-en, "Manrope", sans-serif); letter-spacing: .08em; }

.herbal-products { padding: clamp(50px, 6vw, 5px) 0 clamp(66px, 7vw, 5px); background: #f5f7f1; scroll-margin-top: 86px; }
.herbal-products-heading { display: flex; align-items: end; justify-content: space-between; gap: 25px; margin-bottom: 28px; }
.herbal-products-heading .herbal-kicker { margin-bottom: 8px; }
.herbal-products-heading h2 { margin: 0; color: #154a28; font-size: clamp(29px, 4vw, 43px); font-weight: 800; line-height: 1.3; }
.herbal-products-heading p:not(.herbal-kicker) { margin: 9px 0 0; color: #737d73; font-size: 14px; line-height: 1.7; }
.herbal-products-count { flex: 0 0 auto; padding: 9px 14px; color: #205d31; background: #edf4e9; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; }

.herbal-product-card { min-width: 0; background: #fff; border: 1px solid rgba(33,79,43,.13); border-radius: 18px; overflow: hidden; box-shadow: 0 12px 34px rgba(39,69,43,.07); transition: transform .25s ease, box-shadow .25s ease; }
.herbal-product-card:hover { transform: translateY(-5px); box-shadow: 0 18px 42px rgba(39,69,43,.13); }
.herbal-product-image { position: relative; display: flex; align-items: center; justify-content: center; height: 285px; padding: 24px; overflow: hidden; background: #f4f6ef; }
.herbal-product-image img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .35s ease; }
.herbal-product-card:hover .herbal-product-image img { transform: scale(1.035); }
.herbal-product-type { position: absolute; left: 16px; top: 16px; padding: 8px 12px; border-radius: 999px; color: #fff; background: #1b6333; font-size: 11px; font-weight: 800; }
.herbal-product-info { padding: 23px 23px 24px; }
.herbal-product-en { margin: 0 0 9px; color: #8a9587; font: 700 10px/1.5 var(--font-en, "Manrope", sans-serif); letter-spacing: .07em; text-transform: uppercase; }
.herbal-product-info h3 { min-height: 56px; margin: 0; color: #1a4025; font-size: 20px; font-weight: 800; line-height: 1.5; }
.herbal-product-size { margin: 9px 0 18px; color: #69776b; font-size: 13px; }
.herbal-product-link { display: inline-flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid rgba(33,79,43,.12); color: #246b38; font-size: 13px; font-weight: 800; }
.herbal-empty { grid-column: 1/-1; min-height: 250px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 36px 20px; text-align: center; border: 1px dashed rgba(40,91,48,.24); border-radius: 18px; background: #f8faf6; }
.herbal-empty > span { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 12px; border-radius: 50%; color: #286c3c; background: #e6f0e1; font-size: 23px; }
.herbal-empty h3 { margin: 0 0 8px; color: #235532; font-size: 21px; }
.herbal-empty p { max-width: 480px; margin: 0; color: #748074; font-size: 14px; line-height: 1.8; }
.herbal-cta { padding: 56px 0; color: #fff; background: #103f24; }
.herbal-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.herbal-cta .herbal-kicker { color: #d9e49b; }
.herbal-cta h2 { margin: 0; color: #fff; font-size: clamp(26px, 3vw, 38px); font-weight: 800; line-height: 1.35; }
.herbal-cta p:not(.herbal-kicker) { margin: 10px 0 0; color: rgba(255,255,255,.76); font-size: 14px; line-height: 1.8; }
.herbal-cta .herbal-primary-link { flex: 0 0 auto; background: #e3eaa7; border-color: #e3eaa7; color: #174c28; }
.herbal-cta .herbal-primary-link:hover { background: #f0f4c3; }

@media (max-width: 1100px) {
  .herbal-type-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .herbal-type-button img { height: 110px; }
  .herbal-process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .herbal-product-image { height: 250px; }
}
@media (max-width: 767px) {
  .herbal-story { padding: 48px 0 58px; }
  .herbal-story-grid { grid-template-columns: 1fr; gap: 28px; }
  .herbal-story-copy > p:not(.herbal-kicker) { font-size: 14px; }
  .herbal-story-visual { min-height: 0; aspect-ratio: 1/1; }
  .herbal-image-caption { left: 20px; bottom: 19px; }
  .herbal-process-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .herbal-process-card { padding: 20px 16px; min-height: 235px; }
  .herbal-process-card h3 { font-size: 17px; }
  .herbal-process-card p { font-size: 12px; }
  .herbal-process-symbol { width: 44px; height: 44px; font-size: 24px; margin-bottom: 17px; }
  .herbal-type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .herbal-type-button { padding: 14px 8px; border-radius: 13px; }
  .herbal-type-button img { max-width: 100px; height: 90px; }
  .herbal-type-button > span { font-size: 16px; }
  .herbal-products-heading { align-items: flex-start; }
  .herbal-products-heading h2 { font-size: 29px; }
  .herbal-products-count { margin-top: 20px; }
  
  .herbal-product-image { height: 260px; }
  .herbal-product-info h3 { min-height: 0; }
  .herbal-cta-inner { align-items: flex-start; flex-direction: column; }
  .herbal-cta .herbal-primary-link { margin-top: 0; }
}
@media (max-width: 420px) {
  .herbal-process-grid { grid-template-columns: 1fr; }
  .herbal-process-card { min-height: 0; }
  .herbal-products-heading { gap: 12px; }
  .herbal-products-count { font-size: 11px; padding: 7px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .herbal-process-card, .herbal-type-button, .herbal-product-card, .herbal-product-image img, .herbal-primary-link { transition: none !important; }
}

/* Explicit selectors for the standards and partners headings */
.about-standards-block > h2,
.about-standards-block .ref-divider,
.ref-partners-head h2 {
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  font-weight: 600 !important;
}

/* ===== Latest update: full-width Stats load expansion ===== */
.slab-stats {
  position: relative;
  z-index: 0;
  overflow: hidden;
  padding: clamp(60px, 20vw, 120px) 0;
  background: linear-gradient(0deg, #fff 0%, #fcfcfc 54%, #fff 100%);
  border: 0;
}
@keyframes slabStatsExpandOnLoad {
  0% { clip-path: inset(0 50% 0 50% round 22px); }
  65% { clip-path: inset(0 1.5% 0 1.5% round 16px); }
  100% { clip-path: inset(0 0 0 0 round 0); }
}
.slab-stats:before,
.slab-stats:after {
  opacity: .22;
  pointer-events: none;
}
.slab-stats .wrap {
  display: block;
  position: relative;
  z-index: 1;
  width: min(1240px, calc(100% - 56px));
  margin-inline: auto;
}
.slab-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.8vw, 24px);
}
.slab-stats .slab-stat-card {
  min-height: 0;
  padding: 8px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.slab-stats .slab-stat-card:nth-child(1) { animation-delay: .28s; }
.slab-stats .slab-stat-card:nth-child(2) { animation-delay: .40s; }
.slab-stats .slab-stat-card:nth-child(3) { animation-delay: .52s; }
.slab-stats .slab-stat-card:nth-child(4) { animation-delay: .64s; }
.slab-stats .slab-stat-card.in { opacity: 1; transform: none; }
.slab-stats .slab-stat-card:hover { box-shadow: none; transform: none; }
.slab-stats .slab-stat-card:before { display: none; }
.slab-stats .slab-stat-card:after { display: none; }
.slab-stats .slab-stat-num {
  color: #20532e;
  font-size: clamp(38px, 4.5vw, 62px);
  font-weight: 700;
  line-height: 1.05;
}
.slab-stats .slab-stat-num .suffix { color: #20532e; }
.slab-stats .slab-stat-label {
  margin-top: 12px;
  color: var(--green-mid);
  opacity: 1;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.65;
}
@keyframes slabStatItemIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 900px) {
  .slab-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; }
}
@media (max-width: 600px) {
  .slab-stats .wrap { width: calc(100% - 32px); }
  .slab-stats-grid { gap: 14px 6px; }
  .slab-stats .slab-stat-card { padding: 8px 4px; }
  .slab-stats .slab-stat-num { font-size: clamp(34px, 10vw, 42px); }
  .slab-stats .slab-stat-label { margin-top: 8px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .slab-stats { clip-path: none; animation: none; }
  .slab-stats .slab-stat-card { opacity: 1; transform: none; animation: none; }
}

/* Certificate section: keep certificate artwork, remove the caption text. */
.standards-slider .standards-cert figcaption { display: none !important; }

/* v16: scroll-linked Stats expansion and clickable certificate artwork */
.standards-slider .standards-cert img {
  box-shadow: 0 2px 10px rgba(33,79,43,.16) !important;
  border: 1px solid rgba(33,79,43,.1);
}
.certificate-view-link {
  display: block;
  cursor: zoom-in;
  border-radius: 2px;
  outline-offset: 4px;
}
.certificate-view-link img {
  display: block;
  width: 100%;
  height: auto;
}
.certificate-view-link:focus-visible {
  outline: 2px solid #214f2b;
}
@media (prefers-reduced-motion: reduce) {
  .slab-stats { will-change: auto; width: 100% !important; }
}

/* v17 — Herbal catalogue mirrors the Products filter and card layout. */
.herbal-page .herbal-type-grid {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px 22px;
  width: 100%;
  margin: 0 auto 28px;
  padding: 22px 20px 20px;
  border: 1px solid rgba(32,56,37,.12);
  border-radius: 20px;
  background: rgba(255,255,255,.62);
  box-shadow: 0 5px 18px rgba(24,48,28,.035);
}
.herbal-page .herbal-type-button {
  display: flex !important;
  flex: 0 0 116px;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  padding: 8px 7px 9px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: transparent !important;
  color: #14251a !important;
  box-shadow: none !important;
  transform: none;
}
.herbal-page .herbal-type-button .product-filter-icon {
  display: flex;
  width: 88px;
  height: 88px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 17px;
  border: 1px solid rgba(32,56,37,.16);
  border-radius: 24px;
  background: #f4f1e6;
  overflow: hidden;
  transition: background-color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.herbal-page .herbal-type-button .product-filter-icon img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: contain;
  filter: none;
  transition: filter .25s ease;
}
.herbal-page .herbal-type-button:hover .product-filter-icon,
.herbal-page .herbal-type-button.is-active .product-filter-icon {
  border-color: #214f2b;
  background: #214f2b;
  box-shadow: 0 6px 14px rgba(32,56,37,.19);
  transform: translateY(-2px);
}
.herbal-page .herbal-type-button:hover .product-filter-icon img,
.herbal-page .herbal-type-button.is-active .product-filter-icon img {
  filter: brightness(0) invert(1);
}
.herbal-page .herbal-type-button .product-filter-label {
  color: #111b14;
  font: 600 14px/1.25 Manrope, "Noto Sans Thai", sans-serif;
  white-space: normal;
  text-align: center;
}
.herbal-page .herbal-type-button.is-active .product-filter-label { color: #214f2b; }
.herbal-page .herbal-category-th {
  display: block;
  margin: -5px 0 0;
  color: #778278;
  font: 400 11px/1.35 "Noto Sans Thai", sans-serif;
}
.herbal-page .herbal-products-heading { margin-bottom: 20px; }
.herbal-page .herbal-product-count {
  display: block;
  margin: 5px 0 13px;
  color: #526057;
  font: 500 14px/1.5 Manrope, "Noto Sans Thai", sans-serif;
  letter-spacing: 0;
  text-transform: none;
}
.herbal-page .herbal-product-count span {
  display: inline-block;
  margin-right: 4px;
  color: #214f2b;
  font: 700 25px/1 Manrope, sans-serif;
}
.herbal-page .herbal-empty-state { min-height: 235px; }
.certificate-lightbox .slab-lightbox-stage { cursor: grab; }
.certificate-lightbox .slab-lightbox-stage:active { cursor: grabbing; }
.certificate-lightbox .slab-lightbox-stage img { background: #fff; box-shadow: 0 2px 10px rgba(33,79,43,.16); }
.scroll-proximity-frame:not(.slab-stats) { transition: width .12s linear; }
@media (max-width: 900px) {
  .herbal-page .herbal-type-button { flex-basis: 102px; }

}
@media (max-width: 600px) {
  .herbal-page .herbal-type-grid { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; gap: 8px; padding: 12px 10px; scroll-snap-type: x proximity; }
  .herbal-page .herbal-type-button { flex-basis: 96px; scroll-snap-align: start; }
  .herbal-page .herbal-type-button .product-filter-icon { width: 68px; height: 68px; padding: 13px; border-radius: 18px; }
  .herbal-page .herbal-type-button .product-filter-label { font-size: 12px; }
  .herbal-page .herbal-category-th { font-size: 10px; }

}
@media (prefers-reduced-motion: reduce) {
  .herbal-page .herbal-type-button .product-filter-icon, .herbal-page .herbal-type-button .product-filter-icon img{ transition: none !important; }
  .scroll-proximity-frame:not(.slab-stats) { transition: none !important; }
}
.scroll-proximity-card { transform-origin: center center; will-change: scale; }
@media (prefers-reduced-motion: reduce) { .scroll-proximity-card { will-change: auto; } }
.herbal-story-copy h2 { font-size: clamp(31px, 3.5vw, 48px); line-height: 1.28; }
@media (max-width: 767px) { .herbal-story-copy h2 { font-size: 32px; } }
.herbal-types-section > .wrap {
  width: min(1400px, calc(100% - 48px));
  max-width: 1400px;
}
@media (max-width: 767px) {
  .herbal-types-section > .wrap { width: calc(100% - 28px); }
}

/* v18: do not animate any section or content while scrolling the Herbal page.
   All story, process, category, and product content stays visible and static. */
.herbal-page .ref-reveal,
.herbal-page .ref-reveal.in,
.herbal-page .ref-reveal.dir-scale,
.herbal-page .ref-reveal.dir-scale.in {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}
.herbal-page .scroll-proximity-frame,
.herbal-page .scroll-proximity-card {
  width: auto !important;
  scale: 1 !important;
  transform: none !important;
  transition: none !important;
  will-change: auto !important;
}

.ref-featured-card, .slab-related-card, .related-card{
  will-change: auto;
}
.ref-featured-card.scroll-proximity-card, .slab-related-card.scroll-proximity-card, .related-card.scroll-proximity-card{
  scale: 1 !important;
}

/* v20: Stats panel stays full-width. The grid pops on viewport entry and exits again when scrolled away. */
.slab-stats {
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  animation: none !important;
  transform: none !important;
  transition: none !important;
  will-change: auto !important;
}
.slab-stats-grid {
  opacity: 1;
  transform: none;
  transform-origin: center center;
  transition: opacity .42s ease, transform .68s cubic-bezier(.22, .85, .3, 1.25);
  will-change: auto;
}
.slab-stats-grid.stats-grid-pop-ready:not(.is-in-view) {
  opacity: 0;
  transform: translate3d(0, 38px, 0) scale(.94);
  will-change: opacity, transform;
}
.slab-stats-grid.stats-grid-pop-ready.is-in-view {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  will-change: opacity, transform;
}
.slab-stats .slab-stat-card {
  opacity: 1;
  transform: none;
  filter: none;
  animation: none !important;
  transition: opacity .34s ease, transform .55s cubic-bezier(.22, .85, .3, 1.18), filter .34s ease;
}
.slab-stats-grid.stats-grid-pop-ready:not(.is-in-view) .slab-stat-card {
  opacity: 0;
  transform: translate3d(0, 18px, 0) scale(.9);
  filter: blur(2px);
}
.slab-stats-grid.stats-grid-pop-ready.is-in-view .slab-stat-card {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}
.slab-stats-grid.stats-grid-pop-ready.is-in-view .slab-stat-card:nth-child(1) { transition-delay: .02s; }
.slab-stats-grid.stats-grid-pop-ready.is-in-view .slab-stat-card:nth-child(2) { transition-delay: .09s; }
.slab-stats-grid.stats-grid-pop-ready.is-in-view .slab-stat-card:nth-child(3) { transition-delay: .16s; }
.slab-stats-grid.stats-grid-pop-ready.is-in-view .slab-stat-card:nth-child(4) { transition-delay: .23s; }
@media (prefers-reduced-motion: reduce) {
  .slab-stats-grid,
  .slab-stats-grid.stats-grid-pop-ready,
  .slab-stats .slab-stat-card {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
  }
}

body { padding-bottom: calc(102px + env(safe-area-inset-bottom, 0px)); }
.site-loader::before {
  position: absolute;
  width: min(42vw, 380px);
  aspect-ratio: 1;
  border: 1px solid rgba(47,93,58,.12);
  border-radius: 50%;
  box-shadow: 0 0 0 14px rgba(47,93,58,.025), 0 0 0 30px rgba(47,93,58,.018);
  pointer-events: none;
}
.site-loader-inner { position: relative; z-index: 1; }
@keyframes siteWaterDropReveal {
  0% {
    clip-path: polygon(0 0,20% 0,40% 0,60% 0,80% 0,100% 0,100% 100%,80% 100%,60% 100%,40% 100%,20% 100%,0 100%);
    opacity: 1;
    visibility: visible;
  }
  58% {
    clip-path: polygon(50% 5%,62% 20%,72% 36%,76% 49%,72% 62%,62% 78%,50% 95%,38% 78%,28% 62%,24% 49%,28% 36%,38% 20%);
    opacity: 1;
    visibility: visible;
  }
  88% {
    clip-path: polygon(50% 43%,51.5% 47%,53% 50%,53.5% 52%,53% 54%,51.5% 57%,50% 60%,48.5% 57%,47% 54%,46.5% 52%,47% 50%,48.5% 47%);
    opacity: .92;
    visibility: visible;
  }
  100% {
    clip-path: polygon(50% 51%,50% 51%,50% 51%,50% 51%,50% 51%,50% 51%,50% 51%,50% 51%,50% 51%,50% 51%,50% 51%,50% 51%);
    opacity: 0;
    visibility: hidden;
  }
}
@keyframes siteWaterDropContent {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(.92); }
}
@media (prefers-reduced-motion: reduce) {
  
  .site-loader.loaded,
  .site-loader.loaded .site-loader-inner { animation-duration: .01ms !important; }
}

@keyframes v25MenuDrop {
  from { opacity: 0; transform: translateY(-7px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.home-page .site-loader {
  clip-path: none !important;
  animation: none !important;
  opacity: 1;
  visibility: visible;
  transition: opacity .45s ease, visibility .45s ease;
}
.home-page .site-loader.loaded {
  clip-path: none !important;
  animation: none !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.home-page .site-loader.loaded .site-loader-inner {
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .home-page .site-loader,
  .home-page .site-loader.loaded { transition: none !important; }
}

@media (min-width: 901px) {
  body { padding-bottom: 0 !important; }

}

@media (max-width: 900px) {
  /* Header carries a Menu button; selecting it opens a full-width vertical list. */
  body { padding-bottom: 0 !important; }

}

.site-loader::before { content: none !important; display: none !important; }
.site-loader {
  clip-path: none !important;
  border-radius: 0 !important;
  animation: none !important;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  background: #f8f5eb;
  transition: opacity .45s ease, visibility .45s ease;
}
.site-loader.loaded {
  clip-path: none !important;
  animation: none !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.site-loader.loaded .site-loader-inner { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .site-loader, .site-loader.loaded { transition: none !important; }
}

@media (max-width: 900px) {
  .herbal-page .herbal-types-section { overflow: hidden; }
  .herbal-page .herbal-type-grid {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: stretch;
    justify-content: flex-start !important;
    gap: 9px !important;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 12px 2px 15px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    box-sizing: border-box;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .herbal-page .herbal-type-grid .herbal-type-button {
    display: flex !important;
    flex: 0 0 94px !important;
    width: 94px;
    min-width: 94px;
    max-width: 94px;
    min-height: 122px;
    height: auto;
    box-sizing: border-box;
    margin: 0;
    padding: 11px 7px !important;
    scroll-snap-align: start;
    white-space: normal;
  }
  .herbal-page .herbal-type-button .product-filter-icon {
    display: flex !important;
    flex: 0 0 65px;
    width: 65px !important;
    height: 65px !important;
    margin: 0 auto 8px;
    padding: 10px !important;
    box-sizing: border-box;
  }
  .herbal-page .herbal-type-button .product-filter-icon img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .herbal-page .herbal-type-button .product-filter-label {
    display: block !important;
    width: 100%;
    color: #111b14;
    font: 600 12px/1.3 Manrope,"Noto Sans Thai",sans-serif;
    text-align: center;
    overflow-wrap: anywhere;
  }

}

/* Herbal category bar must stay in normal document flow on phones.
   A shared .product-toolbar rule previously turned it into an absolute dropdown,
   making it overlap the 'ผลิตภัณฑ์สมุนไพร' heading. */
@media (max-width: 767px) {
  .herbal-page .herbal-types-section { overflow: visible !important; }
  .herbal-page .herbal-types-section > .wrap {
    position: relative !important;
    display: block !important;
    width: calc(100% - 28px) !important;
    max-width: none !important;
    margin-inline: auto !important;
  }
  .herbal-page .herbal-types-section .herbal-section-heading {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    transform: none !important;
    clear: both;
  }
  .herbal-page .herbal-types-section .herbal-section-heading h2 {
    margin: 0 !important;
    line-height: 1.35 !important;
  }
  .herbal-page .herbal-types-section .herbal-type-grid.product-toolbar {
    display: flex !important;
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 8px 2px 14px !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(32,56,37,.12) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1 !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .herbal-page .herbal-types-section .herbal-type-grid.product-toolbar .herbal-type-button {
    display: flex !important;
    position: relative !important;
    flex: 0 0 94px !important;
    width: 94px !important;
    min-width: 94px !important;
    max-width: 94px !important;
    min-height: 120px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 10px 7px !important;
    box-sizing: border-box !important;
    scroll-snap-align: start;
  }
  .herbal-page .herbal-types-section .herbal-type-button .product-filter-icon {
    flex: 0 0 64px !important;
    width: 64px !important;
    min-width: 64px !important;
    height: 64px !important;
    margin: 0 auto 8px !important;
    padding: 9px !important;
    box-sizing: border-box !important;
  }
  .herbal-page .herbal-types-section .herbal-type-button .product-filter-label {
    display: block !important;
    width: 100% !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    text-align: center !important;
    white-space: normal !important;
  }
}

.herbal-page .herbal-types-section .herbal-type-filter-wrap {
  position: relative !important;
  width: 100% !important;
  margin: 0 0 26px !important;
}
.herbal-page .herbal-types-section .herbal-type-filter-wrap > .product-filter-trigger {
  display: none;
}
.herbal-page .herbal-types-section .herbal-type-filter-wrap > .herbal-type-grid.product-toolbar {
  display: flex !important;
  position: relative !important;
  inset: auto !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 18px 12px 16px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  border: 1px solid rgba(32,56,37,.12) !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.55) !important;
  box-shadow: 0 5px 18px rgba(24,48,28,.035) !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: auto !important;
}
.herbal-page .herbal-types-section .herbal-type-filter-wrap .herbal-type-grid .herbal-type-button {
  display: flex !important;
  position: relative !important;
  flex: 0 0 104px !important;
  width: auto !important;
  min-width: 104px !important;
  max-width: none !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 16px 18px 14px !important;
  box-sizing: border-box !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  border: 1px solid transparent !important;
  border-radius: 18px !important;
  background: transparent !important;
  color: var(--green) !important;
  box-shadow: none !important;
  text-align: center !important;
  transform: none !important;
  scroll-snap-align: none !important;
}
.herbal-page .herbal-types-section .herbal-type-filter-wrap .herbal-type-grid .herbal-type-button .product-filter-icon {
  display: flex !important;
  flex: 0 0 72px !important;
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  height: 72px !important;
  margin: 0 !important;
  padding: 14px !important;
  box-sizing: border-box !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(32,56,37,.16) !important;
  border-radius: 20px !important;
  background: #f4f1e6 !important;
  box-shadow: none !important;
  transform: none !important;
}
.herbal-page .herbal-types-section .herbal-type-filter-wrap .herbal-type-grid .herbal-type-button .product-filter-icon img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  object-fit: contain !important;
  filter: none !important;
}
.herbal-page .herbal-types-section .herbal-type-filter-wrap .herbal-type-grid .herbal-type-button .product-filter-label {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  color: var(--green) !important;
  font: 600 14px/1.2 Manrope, "Noto Sans Thai", sans-serif !important;
  white-space: nowrap !important;
  text-align: center !important;
}
.herbal-page .herbal-types-section .herbal-type-filter-wrap .herbal-type-grid .herbal-type-button:hover .product-filter-icon,
.herbal-page .herbal-types-section .herbal-type-filter-wrap .herbal-type-grid .herbal-type-button.is-active .product-filter-icon {
  background: var(--green) !important;
  border-color: var(--green) !important;
  box-shadow: 0 6px 14px rgba(32,56,37,.22) !important;
  transform: translateY(-2px) !important;
}
.herbal-page .herbal-types-section .herbal-type-filter-wrap .herbal-type-grid .herbal-type-button:hover .product-filter-icon img,
.herbal-page .herbal-types-section .herbal-type-filter-wrap .herbal-type-grid .herbal-type-button.is-active .product-filter-icon img {
  filter: brightness(0) invert(1) !important;
}
.herbal-page .herbal-types-section .herbal-type-filter-wrap .herbal-type-grid .herbal-type-button:hover,
.herbal-page .herbal-types-section .herbal-type-filter-wrap .herbal-type-grid .herbal-type-button.is-active {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--green) !important;
}

@media (max-width: 767px) {
  .herbal-page .herbal-types-section .herbal-type-filter-wrap {
    width: 100% !important;
    margin: 0 0 22px !important;
    overflow: visible !important;
  }
  .herbal-page .herbal-types-section .herbal-type-filter-wrap > .product-filter-trigger {
    display: flex !important;
    position: relative !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 68px !important;
    padding: 10px 14px !important;
    border: 1px solid rgba(32,56,37,.18) !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: var(--green) !important;
    text-align: left !important;
    box-shadow: none !important;
    cursor: pointer !important;
  }
  .herbal-page .herbal-types-section .herbal-type-filter-wrap > .product-filter-trigger .product-filter-trigger-icon {
    display: flex !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    padding: 3px !important;
    border-radius: 11px !important;
    background: #f4f1e6 !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .herbal-page .herbal-types-section .herbal-type-filter-wrap > .product-filter-trigger .product-filter-trigger-icon img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
  .herbal-page .herbal-types-section .herbal-type-filter-wrap > .product-filter-trigger .product-filter-trigger-label {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font: 600 14px/1.2 Manrope, "Noto Sans Thai", sans-serif !important;
  }
  .herbal-page .herbal-types-section .herbal-type-filter-wrap > .herbal-type-grid.product-toolbar {
    display: none !important;
    position: absolute !important;
    inset: calc(100% + 8px) 0 auto 0 !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 2px !important;
    width: 100% !important;
    max-height: 70vh !important;
    margin: 0 !important;
    padding: 8px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    border: 1px solid rgba(32,56,37,.14) !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 20px 45px rgba(20,40,20,.2) !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 60 !important;
  }
  .herbal-page .herbal-types-section .herbal-type-filter-wrap > .herbal-type-grid.product-toolbar.open {
    display: flex !important;
  }
  .herbal-page .herbal-types-section .herbal-type-filter-wrap .herbal-type-grid .herbal-type-button {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 58px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    background: transparent !important;
    text-align: left !important;
    scroll-snap-align: none !important;
  }
  .herbal-page .herbal-types-section .herbal-type-filter-wrap .herbal-type-grid .herbal-type-button .product-filter-icon {
    flex: 0 0 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 7px !important;
    border-radius: 10px !important;
  }
  .herbal-page .herbal-types-section .herbal-type-filter-wrap .herbal-type-grid .herbal-type-button .product-filter-label {
    width: auto !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    text-align: left !important;
    white-space: nowrap !important;
  }
  .herbal-page .herbal-types-section .herbal-type-filter-wrap .herbal-type-grid .herbal-type-button.is-active {
    background: rgba(63,127,60,.08) !important;
  }
}

/* =========================================================
   S-LAB NAVIGATION — consolidated responsive system
   ========================================================= */
.ref-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  min-height: 78px;
  background: rgba(255,253,247,.94);
  border-bottom: 1px solid rgba(33,79,43,.10);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  transition: box-shadow .22s ease, background-color .22s ease;
}
.ref-nav.scrolled { box-shadow: 0 8px 28px rgba(22,49,28,.09); }
.ref-nav .wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  width: min(1440px, calc(100% - 56px));
  min-height: 78px;
  margin-inline: auto;
}
.ref-brand { display: inline-flex; align-items: center; flex: 0 0 auto; min-width: 0; }
.ref-logo { display: block; width: auto; height: 62px; max-width: 210px; object-fit: contain; }
.ref-links { display: flex; align-items: center; justify-content: flex-end; gap: 5px; margin-left: auto; }
.ref-links .dock-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 11px 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #34443a;
  font: 600 12px/1.25 "Noto Sans Thai","Manrope",sans-serif;
  white-space: nowrap;
  text-decoration: none;
}
.ref-links .dock-icon { display: none; flex: 0 0 20px; width: 20px; height: 20px; align-items: center; justify-content: center; }
.ref-links .dock-icon svg { display: block; width: 20px; height: 20px; }
.ref-links .dock-label { display: inline; }
.ref-links .dock-item:not(.dock-cta):hover,
.ref-links .dock-item:not(.dock-cta):focus-visible { background: #f0f4e9; color: #214f2b; }
.ref-links .dock-item.active:not(.dock-cta) { background: #eef3e7; color: #214f2b; border-color: rgba(33,79,43,.10); }
.ref-links .dock-item.active:not(.dock-cta)::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 50%;
  width: 25px;
  height: 3px;
  border-radius: 0 0 5px 5px;
  background: #d4b52f;
  transform: translateX(-50%);
}
.ref-links .dock-item.dock-cta,
.ref-links .dock-item.dock-cta:hover,
.ref-links .dock-item.dock-cta:focus-visible,
.ref-links .dock-item.dock-cta.active {
  padding-inline: 16px;
  background: #214f2b;
  border-color: #214f2b;
  color: #fffdf7;
  box-shadow: 0 6px 16px rgba(33,79,43,.16);
}
.ref-links .dock-item.dock-cta:hover,
.ref-links .dock-item.dock-cta:focus-visible { background: #173e21; color: #f3d75b; transform: translateY(-1px); }
.ref-links .dock-item.dock-cta .dock-icon { display: none; }
.ref-menu {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  padding: 0;
  border: 1px solid rgba(33,79,43,.15);
  border-radius: 14px;
  color: #214f2b;
  background: #fffdf7;
  box-shadow: 0 4px 14px rgba(33,79,43,.06);
  cursor: pointer;
}
.ref-menu .ref-menu-text { display: none; }
.ref-menu .ref-menu-icon { display: block; width: 22px; height: 22px; }
.ref-menu[aria-expanded="true"] { background: #214f2b; color: #fffdf7; }
.ref-menu[aria-expanded="true"] .ref-menu-icon { transform: rotate(90deg); }

@media (max-width: 1279px) {
  .ref-nav .wrap { width: calc(100% - 36px); gap: 14px; }
  .ref-logo { height: 58px; max-width: 190px; }
  .ref-menu { display: inline-flex; }
  .ref-links.open {
    position: absolute;
    z-index: 1001;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    grid-template-columns: repeat(2, minmax(0,1fr));
    align-items: stretch;
    gap: 8px;
    margin: 0;
    padding: 12px;
    border: 1px solid rgba(33,79,43,.12);
    border-radius: 20px;
    background: rgba(255,253,247,.98);
    box-shadow: 0 18px 48px rgba(20,45,26,.18);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    max-height: min(72vh, 620px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .ref-links .dock-item,
  .ref-links .dock-item.dock-cta {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    min-width: 0;
    min-height: 48px;
    padding: 12px;
    border-radius: 13px;
    border: 1px solid rgba(33,79,43,.08);
    white-space: normal;
    font-size: 13px;
  }
  .ref-links .dock-icon,
  .ref-links .dock-item.dock-cta .dock-icon { display: inline-flex; }
  .ref-links .dock-label { display: inline; overflow-wrap: anywhere; }
  .ref-links .dock-item.active:not(.dock-cta)::before { display: none; }
  .ref-links .dock-item.active:not(.dock-cta) { background: #edf3e7; border-color: rgba(33,79,43,.18); }
  .ref-links .dock-item.dock-cta,
  .ref-links .dock-item.dock-cta:hover,
  .ref-links .dock-item.dock-cta:focus-visible,
  .ref-links .dock-item.dock-cta.active { grid-column: 1 / -1; justify-content: center; min-height: 50px; }
}
@media (max-width: 520px) {
  .ref-nav { min-height: 68px; }
  .ref-nav .wrap { min-height: 68px; width: calc(100% - 28px); gap: 10px; }
  .ref-logo { height: 48px; max-width: min(172px, 58vw); }
  .ref-menu { width: 42px; height: 42px; flex-basis: 42px; border-radius: 13px; }
  .ref-links.open { top: calc(100% + 6px); right: -2px; left: -2px; gap: 7px; padding: 10px; border-radius: 17px; }
  .ref-links .dock-item,
  .ref-links .dock-item.dock-cta { min-height: 46px; padding: 10px 9px; font-size: 12px; gap: 7px; }
  .ref-links .dock-icon,
  .ref-links .dock-item.dock-cta .dock-icon { flex-basis: 18px; width: 18px; height: 18px; }
  .ref-links .dock-icon svg { width: 18px; height: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .ref-nav, .ref-links .dock-item, .ref-menu .ref-menu-icon { transition: none !important; }
}

/* =========================================================
   S-LAB FOOTER — consolidated three-column layout
   ========================================================= */
.ref-footer {
  position: relative;
  overflow: hidden;
  padding: 30px 0 18px;
  background: #fbfaf5;
  border-top: 1px solid rgba(33,79,43,.10);
  color: #263b2d;
}
.ref-footer-wrap { position: relative; z-index: 1; width: min(1320px, calc(100% - 64px)); margin: 0 auto; }
.ref-footer-main { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); align-items: stretch; min-height: 165px; }
.ref-footer-main > div { min-width: 0; min-height: 165px; }
.ref-footer-brand,
.ref-footer-company,
.ref-footer-contact { border-right: 1px solid rgba(67,112,99,.24); }
.ref-footer-brand { display: flex; align-items: center; justify-content: center; padding: 0 28px; }
.ref-footer-logo { display: block; width: min(230px,100%); max-height: 100px; height: auto; object-fit: contain; }
.ref-footer-company { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 28px; text-align: center; font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.ref-footer-company strong,
.ref-footer-contact strong { display: block; margin: 0 0 9px; color: #214f2b; font: 700 18px/1.45 "Noto Sans Thai",sans-serif; }
.ref-footer-company .ref-footer-en { margin-bottom: 10px; font: 600 10px/1.5 "Manrope","Noto Sans Thai",sans-serif; letter-spacing: .12em; }
.ref-footer-company .ref-footer-address { margin-top: 0; }
.ref-footer-contact { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 0 24px 0 30px; border-right: 0; font-size: 12px; line-height: 1.65; }
.ref-footer-contact strong { margin-bottom: 4px; font-size: 17px; }
.ref-footer-contact span { display: flex; align-items: flex-start; gap: 10px; white-space: normal; overflow-wrap: anywhere; }
.ref-footer-icon { display: inline-block; position: relative; flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; }
.ref-icon-phone { background: url("../images/phone.svg") center/18px 18px no-repeat; }
.ref-icon-mail { background: url("../images/mail.svg") center/18px 18px no-repeat; }
.ref-footer-bottom { display: flex; align-items: center; gap: 16px; margin-top: 10px; }
.ref-footer-rule { flex: 1; height: 1px; background: rgba(82,130,117,.36); }
.ref-footer-mark { display: block; width: 48px; height: 40px; object-fit: contain; mix-blend-mode: multiply; }
.ref-footer-copy { margin-top: 10px; color: #50735a; text-align: center; font: 400 11px/1.6 "Manrope","Noto Sans Thai",sans-serif; }
@media (max-width: 900px) {
  .ref-footer-wrap { width: min(100% - 40px, 760px); }
  .ref-footer-main { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .ref-footer-brand { padding-inline: 16px; }
  .ref-footer-company { padding-inline: 16px; }
  .ref-footer-contact { padding-inline: 18px; font-size: 11px; }
  .ref-footer-company strong, .ref-footer-contact strong { font-size: 15px; }
}
@media (max-width: 650px) {
  .ref-footer { padding: 22px 0 16px; }
  .ref-footer-wrap { width: calc(100% - 32px); }
  .ref-footer-main { grid-template-columns: 1fr; min-height: 0; }
  .ref-footer-main > div { min-height: 0; border-right: 0; }
  .ref-footer-brand { padding: 8px 12px 18px; }
  .ref-footer-logo { width: 185px; max-width: 78vw; max-height: 66px; }
  .ref-footer-company { padding: 16px 12px; border-top: 1px solid rgba(67,112,99,.20); }
  .ref-footer-contact { align-items: center; padding: 16px 12px 4px; border-top: 1px solid rgba(67,112,99,.20); font-size: 12px; }
  .ref-footer-company strong, .ref-footer-contact strong { margin-bottom: 6px; font-size: 16px; }
  .ref-footer-contact span { width: min(100%, 340px); gap: 9px; }
  .ref-footer-bottom { margin-top: 14px; gap: 10px; }
  .ref-footer-mark { width: 38px; height: 34px; }
  .ref-footer-copy { font-size: 10px; }
}

/* =========================================================
   PRODUCT CARDS — consolidated catalog and herbal layouts
   ========================================================= */
.product-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  align-items: stretch;
  gap: 18px;
  width: 100%;
  max-width: none;
  border-top: 0;
}
.product-row,
.product-row:hover {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  min-height: 0;
  height: auto;
  padding: 18px 18px 20px;
  border: 1px solid rgba(33,79,43,.07);
  border-radius: 18px;
  background: #fff;
  color: var(--green);
  text-decoration: none;
  box-shadow: 0 8px 26px rgba(24,48,28,.07);
  transform: none;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.product-row:hover,
.product-row:focus-visible {
  border-color: rgba(33,79,43,.18);
  box-shadow: 0 16px 36px rgba(24,48,28,.12);
  transform: translateY(-3px);
}
.product-row:focus-visible { outline: 3px solid #d4b52f; outline-offset: 3px; }
.product-row.is-hidden { display: none; }
.product-row .product-number,
.product-row .product-category,
.product-row .product-arrow { display: none; }
.product-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 300px;
  min-width: 0;
  overflow: hidden;
  border-radius: 12px;
  background: #fafbf9;
}
.product-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .3s ease;
}
.product-row:hover .product-thumb img { transform: scale(1.025); }
.product-info { display: block; width: 100%; min-width: 0; margin-top: 14px; padding: 0 2px; text-align: left; }
.product-info h2 { min-height: 49px; margin: 0; color: #1a1a1a; font: 600 17px/1.45 "Noto Sans Thai","Manrope",sans-serif; letter-spacing: -.015em; overflow-wrap: anywhere; }
.product-info p { display: block; margin: 4px 0 0; color: rgba(32,56,37,.68); font: 400 13px/1.65 "Noto Sans Thai",sans-serif; }
.product-empty { grid-column: 1 / -1; padding: 28px 20px; border: 1px dashed rgba(33,79,43,.22); border-radius: 16px; background: rgba(255,255,255,.65); color: #4d5c50; text-align: center; line-height: 1.7; }
.product-empty p { margin-top: 6px; }

.herbal-page .herbal-product-size { display: block; margin-top: 8px; color: #7a847b; font: 400 12px/1.5 "Noto Sans Thai",sans-serif; }
@media (max-width: 1000px) {
  .product-list{ grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
  .product-thumb { height: 260px; }
  
}
@media (max-width: 600px) {
  .product-list{ grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .product-row, .product-row:hover { padding: 9px 9px 13px; border-radius: 13px; }
  .product-thumb { height: 170px; border-radius: 9px; }
  .product-info { margin-top: 9px; }
  .product-info h2 { min-height: 34px; font-size: 12px; line-height: 1.4; }
  .product-info p { font-size: 11px; line-height: 1.55; }

}
@media (max-width: 380px) {
  .product-list{ gap: 7px; }
  .product-thumb { height: 145px; }
  .product-info h2 { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .product-row, .product-thumb img { transition: none !important; }
}

/* Accessibility and conversion UX */
.sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important;
}
.skip-link {
  position: fixed; z-index: 3000; top: 10px; left: 10px;
  padding: 12px 16px; border-radius: 10px; background: #214f2b; color: #fffdf7;
  font: 600 14px/1.4 "Noto Sans Thai",sans-serif; transform: translateY(-160%);
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
}
.skip-link:focus { transform: translateY(0); }
.site-breadcrumb { width: min(1320px, calc(100% - 64px)); margin: 14px auto 20px; }
.site-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; list-style: none; margin: 0; padding: 0; color: #647267; font: 400 12px/1.7 "Noto Sans Thai",sans-serif; }
.site-breadcrumb li { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.site-breadcrumb li + li::before { content: "›"; color: #9aa49b; font-size: 16px; }
.site-breadcrumb a { color: #3d6848; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; }
.site-breadcrumb a:hover, .site-breadcrumb a:focus-visible { text-decoration-color: currentColor; }
.site-breadcrumb [aria-current="page"] { color: #3d463e; overflow-wrap: anywhere; }
.detail-inquiry-cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; width: fit-content; max-width: 100%; margin-top: 22px; padding: 14px 18px; border-radius: 12px; background: #214f2b; color: #fffdf7; font: 700 14px/1.5 "Noto Sans Thai",sans-serif; box-shadow: 0 8px 20px rgba(33,79,43,.15); transition: background .2s ease, transform .2s ease; }
.detail-inquiry-cta:hover, .detail-inquiry-cta:focus-visible { background: #173e21; color: #f3d75b; transform: translateY(-2px); }
.detail-inquiry-cta span { font-size: 20px; }
.ref-inquiry-form .field label { line-height: 1.5; }
.ref-inquiry-form input, .ref-inquiry-form select, .ref-inquiry-form textarea { min-height: 48px; border: 1px solid rgba(33,79,43,.20); border-radius: 10px; padding: 12px 14px; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.ref-inquiry-form textarea { min-height: 160px; }
.ref-inquiry-form input:focus-visible, .ref-inquiry-form select:focus-visible, .ref-inquiry-form textarea:focus-visible { outline: 3px solid rgba(212,181,47,.48); outline-offset: 1px; border-color: #3f7f3c; box-shadow: 0 0 0 3px rgba(63,127,60,.08); }
.ref-inquiry-form button[type="submit"] { min-height: 48px; padding: 13px 22px; border-radius: 999px; font-family: "Noto Sans Thai",sans-serif; }
.ref-inquiry-form button[type="submit"]:disabled { cursor: wait; opacity: .72; }
.ref-inquiry-helper { margin: -8px 0 24px; color: #667268; font: 400 13px/1.7 "Noto Sans Thai",sans-serif; }
.ref-inquiry-note { min-height: 1.5em; }
@media (max-width: 650px) {
  .site-breadcrumb { width: calc(100% - 32px); margin: 12px auto 16px; }
  .ref-inquiry-form .row { grid-template-columns: 1fr; gap: 18px; margin-bottom: 18px; }
  .ref-inquiry-form .submit-row { justify-content: stretch; }
  .ref-inquiry-form .inquiry-submit-button { width: 100%; min-width: 0; padding-inline: 16px; }
}

/* Herbal catalog cards share the product-card foundation above. */
.herbal-page .herbal-product-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.herbal-page .herbal-product-row .product-thumb { height: 260px; }
.herbal-page .herbal-product-row .product-thumb img { object-fit: contain; }
.herbal-page .herbal-product-row .product-info h2 { min-height: 49px; font-size: 17px; }
.herbal-page .herbal-product-row .product-info p { display: block; }
@media (max-width: 1000px) {
  .herbal-page .herbal-product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .herbal-page .herbal-product-row .product-thumb { height: 220px; }
}
@media (max-width: 600px) {
  .herbal-page .herbal-product-row .product-thumb { height: 150px; }
  .herbal-page .herbal-product-row .product-info h2 { min-height: 34px; font-size: 12px; line-height: 1.4; }
  .herbal-page .herbal-product-row .product-info p { font-size: 11px; }
  .herbal-page .herbal-product-row { transition: none; }
}

.product-empty-clear { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; margin-top: 12px; padding: 9px 16px; border: 1px solid rgba(33,79,43,.2); border-radius: 999px; background: #214f2b; color: #fffdf7; font: 600 13px/1.4 'Noto Sans Thai',sans-serif; }
.product-empty-clear:hover, .product-empty-clear:focus-visible { background: #173e21; color: #f3d75b; }

/* =========================================================
   S-LAB — readable product URLs, animated navigation and breadcrumbs
   ========================================================= */
.ref-links .dock-item {
  will-change: transform;
  transition: color .24s ease, background-color .24s ease, border-color .24s ease,
    transform .28s cubic-bezier(.2,.75,.25,1), box-shadow .28s ease;
}
.ref-links .dock-item:not(.dock-cta)::before { display: none !important; }
.ref-links .dock-item:not(.dock-cta)::after {
  content: "";
  position: absolute;
}
.ref-links .dock-item.active:not(.dock-cta)::after {
  transform: scaleX(1);
  opacity: 1;
}
.ref-links .dock-item:not(.dock-cta):hover,
.ref-links .dock-item:not(.dock-cta):focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 7px 18px rgba(33,79,43,.08);
}
.ref-links .dock-item.active:not(.dock-cta) { position: relative; }
.ref-menu .ref-menu-icon { transition: transform .28s cubic-bezier(.2,.75,.25,1); }

/* Animate the mobile/tablet dropdown instead of popping it in/out. */
@keyframes slabNavItemIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 1279px) {
  .ref-links,
  .ref-links:not(.open) {
    position: absolute;
    z-index: 1001;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    align-items: stretch;
    gap: 8px;
    margin: 0;
    padding: 12px;
    border: 1px solid rgba(33,79,43,.12);
    border-radius: 20px;
    background: rgba(255,253,247,.98);
    box-shadow: 0 18px 48px rgba(20,45,26,.18);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    max-height: min(72vh, 620px);
    overflow-y: auto;
    overscroll-behavior: contain;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px) scale(.985);
    transform-origin: top right;
    transition: opacity .22s ease, transform .28s cubic-bezier(.2,.75,.25,1), visibility .22s;
  }
  .ref-links.open {
    display: grid;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }
  .ref-links .dock-item { opacity: 0; transform: translateY(-5px); }
  .ref-links.open .dock-item { animation: slabNavItemIn .3s both; }
  .ref-links.open .dock-item:nth-child(1) { animation-delay: 0ms; }
  .ref-links.open .dock-item:nth-child(2) { animation-delay: 25ms; }
  .ref-links.open .dock-item:nth-child(3) { animation-delay: 50ms; }
  .ref-links.open .dock-item:nth-child(4) { animation-delay: 75ms; }
  .ref-links.open .dock-item:nth-child(5) { animation-delay: 100ms; }
  .ref-links.open .dock-item:nth-child(6) { animation-delay: 125ms; }
  .ref-links.open .dock-item:nth-child(7) { animation-delay: 150ms; }
  .ref-links.open .dock-item:nth-child(8) { animation-delay: 175ms; }
  .ref-links .dock-item.active:not(.dock-cta)::after {
    left: 12px; right: 12px; bottom: 4px; height: 2px;
  }
}
@media (max-width: 520px) {
  .ref-links, .ref-links:not(.open) { top: calc(100% + 6px); right: -2px; left: -2px; gap: 7px; padding: 10px; border-radius: 17px; }
  .ref-links .dock-item:not(.dock-cta)::after { left: 10px; right: 10px; }
}

/* Breadcrumb: compact path on the top-right of the green page-title panel. */
.site-breadcrumb--title {
  position: absolute;
  z-index: 4;
  top: 20px;
  right: max(24px, calc((100% - 1320px) / 2));
  width: auto;
  max-width: min(70%, calc(100% - 32px));
  margin: 0;
}
.site-breadcrumb--title ol {
  justify-content: flex-end;
  gap: 8px;
  color: rgba(255,255,255,.8);
  font-size: 12px;
  line-height: 1.5;
}
.site-breadcrumb--title li { gap: 8px; }
.site-breadcrumb--title li + li::before {
  content: ">";
  color: rgba(255,255,255,.62);
  font-family: "Manrope", sans-serif;
  font-size: 11px;
}
.site-breadcrumb--title a,
.site-breadcrumb--title a:visited {
  display: inline-flex;
  align-items: center;
  color: rgba(255,255,255,.88);
  text-decoration: none;
  transition: color .2s ease, opacity .2s ease;
}
.site-breadcrumb--title a:hover,
.site-breadcrumb--title a:focus-visible { color: #f3d75b; opacity: 1; }
.site-breadcrumb .breadcrumb-home { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; min-height: 18px; }
.site-breadcrumb .breadcrumb-home svg { display: block; width: 16px; height: 16px; }
.site-breadcrumb--title [aria-current="page"] { color: #fff; font-weight: 600; overflow-wrap: anywhere; }
.page-title-ref .site-breadcrumb--title,
.contact-hero-ref .site-breadcrumb--title { position: absolute; }
.page-title-ref--breadcrumb-only {
  min-height: 54px;
  height: 54px;
  flex: 0 0 54px;
  align-items: center;
  justify-content: flex-end;
}
.page-title-ref--breadcrumb-only .site-breadcrumb--title {
  top: 50%;
  right: max(24px, calc((100% - 1320px) / 2));
  transform: translateY(-50%);
  max-width: min(76%, calc(100% - 32px));
}
.site-breadcrumb--context {
  width: 100%;
  margin: 0 0 24px;
  display: flex;
  justify-content: flex-end;
}
.site-breadcrumb--context ol { justify-content: flex-end; }
.site-breadcrumb--context li + li::before { content: ">"; color: #8b998e; font-size: 11px; }
.site-breadcrumb--context a { display: inline-flex; align-items: center; color: #31623b; text-decoration: none; }
.site-breadcrumb--context a:hover,
.site-breadcrumb--context a:focus-visible { color: #987c0e; }
.site-breadcrumb--context [aria-current="page"] { color: #324a37; }
@media (max-width: 767px) {
  .site-breadcrumb--title { top: 12px; right: 14px; max-width: calc(100% - 28px); }
  .site-breadcrumb--title ol { gap: 5px; font-size: 10px; }
  .site-breadcrumb--title li { gap: 5px; }
  .site-breadcrumb--title li + li::before { font-size: 9px; }
  .site-breadcrumb--title .breadcrumb-home svg { width: 14px; height: 14px; }
  .page-title-ref--breadcrumb-only { min-height: 48px; height: 48px; flex-basis: 48px; }
  .page-title-ref--breadcrumb-only .site-breadcrumb--title { right: 14px; }
  .site-breadcrumb--context { margin-bottom: 18px; }
  .site-breadcrumb--context ol { gap: 5px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .ref-links .dock-item,
  .ref-links .dock-item::after,
  .ref-menu .ref-menu-icon,
  .ref-links,
  .ref-links.open .dock-item,
  .site-breadcrumb--title a { animation: none !important; transition: none !important; transform: none !important; }
}

/* =========================================================
   S-LAB detail-page polish — compact breadcrumbs and light-line navigation
   ========================================================= */

/* Detail pages use a compact breadcrumb row, not the oversized page-title band. */
.detail-breadcrumb-wrap .site-breadcrumb--title ol {
  gap: 8px;
  color: #68786a;
  font-size: 12px;
  line-height: 1.6;
}
.detail-breadcrumb-wrap .site-breadcrumb--title li + li::before {
  content: ">";
  color: #98a398;
  font-size: 11px;
}
.detail-breadcrumb-wrap .site-breadcrumb--title a,
.detail-breadcrumb-wrap .site-breadcrumb--title a:visited {
  color: #35653e;
}
.detail-breadcrumb-wrap .site-breadcrumb--title a:hover,
.detail-breadcrumb-wrap .site-breadcrumb--title a:focus-visible {
  color: #8d7411;
}
.detail-breadcrumb-wrap .site-breadcrumb--title [aria-current="page"] {
  color: #59665b;
  font-weight: 600;
}

/* Activity detail: breadcrumb starts at the upper-left of the content column. */
.activity-detail-hero { padding-top: 30px; }
.activity-detail-hero .site-breadcrumb--context {
  justify-content: flex-start;
  margin: 0 0 24px;
}
.activity-detail-hero .site-breadcrumb--context li + li::before { content: ">"; }
.activity-detail-hero .site-breadcrumb--context a { color: #35653e; }
.activity-detail-hero .site-breadcrumb--context [aria-current="page"] { color: #68756a; }

/* One solid gold active/hover underline with light spilling upward. */
.ref-links .dock-item:not(.dock-cta) {
  position: relative;
}
.ref-links .dock-item:not(.dock-cta)::before { content: none !important; }
.ref-links .dock-item:not(.dock-cta)::after {
  left: 15px;
  right: 15px;
  bottom: 4px;
  height: 3px;
  border: 0;
  background: linear-gradient(360deg, #f0d14c59 20%, #d8b41d 80%, #f0d14c59 20%);
  border-radius: 999px;
  opacity: 0;
  transform: scaleX(.45) translateY(4px);
  transform-origin: center;
  transition: opacity .22s ease, transform .34s cubic-bezier(.2,.75,.25,1),
              box-shadow .28s ease;
  pointer-events: none;
}
.ref-links .dock-item.active:not(.dock-cta)::after,
.ref-links .dock-item:not(.dock-cta):hover::after,
.ref-links .dock-item:not(.dock-cta):focus-visible::after {
  opacity: 1;
  transform: scaleX(1) translateY(0);
}
.ref-links .dock-item:not(.dock-cta):hover::after,
.ref-links .dock-item:not(.dock-cta):focus-visible::after {
  box-shadow: 0 -2px 9px rgba(240, 209, 76, .80),
              0 -9px 22px rgba(240, 209, 76, .42),
              0 -17px 32px rgba(240, 209, 76, .2);
}

/* Morph the hamburger into an X when the phone/tablet menu is open. */
.ref-menu .ref-menu-icon {
  overflow: visible;
  transform: none !important;
}
.ref-menu .menu-line {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .28s cubic-bezier(.2,.75,.25,1), opacity .18s ease;
}
.ref-menu[aria-expanded="true"] .menu-line-top { transform: translateY(6px) rotate(45deg); }
.ref-menu[aria-expanded="true"] .menu-line-middle { opacity: 0; transform: scaleX(.2); }
.ref-menu[aria-expanded="true"] .menu-line-bottom { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 767px) {
  .detail-breadcrumb-wrap .site-breadcrumb--title ol { gap: 5px; font-size: 11px; }
  .detail-breadcrumb-wrap .site-breadcrumb--title li { gap: 5px; }
  .detail-breadcrumb-wrap .site-breadcrumb--title .breadcrumb-home svg { width: 14px; height: 14px; }
  .activity-detail-hero { padding-top: 20px; }
  .activity-detail-hero .site-breadcrumb--context { margin-bottom: 18px; }
  .ref-links .dock-item:not(.dock-cta)::after { left: 10px; right: 10px; height: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .ref-links .dock-item:not(.dock-cta)::after,
  .ref-menu .menu-line { transition: none !important; }
}

/* =========================================================
   HARD OVERRIDE v4 — Breadcrumb pinned to left edge
   Fixes previous title-style positioning and prevents cached old rules.
   ========================================================= */
.detail-breadcrumb-wrap {
  display: block !important;
  position: relative !important;
  width: min(1320px, calc(100% - 64px)) !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 14px 0 8px !important;
  background: transparent !important;
  text-align: left !important;
}
.detail-breadcrumb-wrap .site-breadcrumb--title {
  position: static !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: 0 !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  text-align: left !important;
}
.detail-breadcrumb-wrap .site-breadcrumb--title ol {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.activity-detail-hero .wrap > .site-breadcrumb--context {
  display: flex !important;
  justify-content: flex-start !important;
  width: 100% !important;
  margin: 0 0 20px !important;
  text-align: left !important;
}
.activity-detail-hero .site-breadcrumb--context ol {
  justify-content: flex-start !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}
@media (max-width: 767px) {
  .detail-breadcrumb-wrap {
    width: calc(100% - 32px) !important;
    padding: 12px 0 7px !important;
  }
}

/* =========================================================
   FINAL PATCH 2026-10-20 — inner-page breadcrumb alignment + active nav
   ========================================================= */
/* Only standard inner-page title panels use this rule. Detail pages already
   place their breadcrumbs in .detail-breadcrumb-wrap and remain unchanged. */
.page-title-ref {
  position: relative !important;
}
.page-title-ref > .site-breadcrumb--title {
  position: absolute !important;
  top: 16px !important;
  left: max(24px, calc((100% - 1320px) / 2)) !important;
  right: auto !important;
  bottom: auto !important;
  width: auto !important;
  max-width: calc(100% - 48px) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  text-align: left !important;
  z-index: 10 !important;
}
.page-title-ref > .site-breadcrumb--title ol {
  justify-content: flex-start !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

/* Make the current navigation state unmistakable even if old theme rules
   are still present: one gold underline plus a restrained green tint. */
#refLinks .dock-item.active:not(.dock-cta),
#refLinks .dock-item[aria-current="page"]:not(.dock-cta) {
  background: #eef3e7 !important;
  color: #214f2b !important;
  border-color: rgba(33, 79, 43, .18) !important;
}
#refLinks .dock-item:not(.dock-cta)::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  bottom: 4px !important;
  height: 3px !important;
  width: auto !important;
  border: 0 !important;
  border-radius: 999px !important;
  opacity: 0 !important;
  visibility: visible !important;
  transform: scaleX(.25) translateY(3px) !important;
  transform-origin: center !important;
  transition: opacity .22s ease, transform .32s cubic-bezier(.2,.75,.25,1),
              box-shadow .28s ease !important;
  pointer-events: none !important;
}
#refLinks .dock-item.active:not(.dock-cta)::after,
#refLinks .dock-item[aria-current="page"]:not(.dock-cta)::after {
  opacity: 1 !important;
  transform: scaleX(1) translateY(0) !important;
}
#refLinks .dock-item.dock-cta.active,
#refLinks .dock-item.dock-cta[aria-current="page"] {
  box-shadow: 0 0 0 2px rgba(240, 209, 76, .4), 0 7px 18px rgba(33,79,43,.18) !important;
}
@media (max-width: 767px) {
  .page-title-ref > .site-breadcrumb--title {
    top: 12px !important;
    left: 16px !important;
    right: auto !important;
    max-width: calc(100% - 32px) !important;
  }
  #refLinks .dock-item:not(.dock-cta)::after {
    left: 12px !important;
    right: 12px !important;
    bottom: 4px !important;
    height: 2px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  #refLinks .dock-item:not(.dock-cta)::after { transition: none !important; }
}

/* =========================================================
   HOTFIX 2026-10-20 — Contact breadcrumb + Thai CTA typography
   The Contact hero uses .contact-hero-ref rather than .page-title-ref,
   so it needs its own explicit positioning rule.
   ========================================================= */
.contact-hero-ref {
  position: relative !important;
}
.contact-hero-ref > .site-breadcrumb.site-breadcrumb--title {
  position: absolute !important;
  top: 16px !important;
  left: max(24px, calc((100% - 1320px) / 2)) !important;
  right: auto !important;
  bottom: auto !important;
  width: auto !important;
  max-width: calc(100% - 48px) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  text-align: left !important;
  z-index: 10 !important;
}
.contact-hero-ref > .site-breadcrumb.site-breadcrumb--title ol {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}
@media (max-width: 767px) {
  .contact-hero-ref > .site-breadcrumb.site-breadcrumb--title {
    top: 12px !important;
    left: 16px !important;
    right: auto !important;
    max-width: calc(100% - 32px) !important;
  }
}

/* =========================================================
   SERVICE CTA — single source of truth
   Change --font-display in :root to restyle this heading.
   ========================================================= */

.ref-cta-banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 360px;
  margin-top: -100px;
  padding: clamp(76px, 8vw, 112px) 0 clamp(56px, 7vw, 88px);
  border-radius: 50% 50% 0 0 / clamp(52px, 7vw, 96px) clamp(52px, 7vw, 96px) 0 0;
  background: var(--green) url("../images/bg_cta.webp") center/cover no-repeat;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}

.ref-cta-banner .wrap {
  position: relative;
  z-index: 1;
  width: min(100%, 1040px);
  margin: 0 auto;
}

.ref-cta-banner h2 {
  max-width: 920px;
  margin: 0 auto 18px;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 58px);
  /* Cloud Lucent is supplied as a Regular face; use its real weight. */
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: .01em;
  text-wrap: balance;
}

.ref-cta-banner p {
  max-width: 850px;
  margin: 0 auto 30px;
  color: var(--yellow);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.85;
}

.ref-cta-banner .ref-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 0;
  padding: 12px 35px;
  border: 1px solid #fff;
  border-radius: 2px;
  color: #fff;
  font: 600 12px/1.4 var(--font-en);
  transition: background .25s ease, color .25s ease;
}

.ref-cta-banner .ref-outline:hover,
.ref-cta-banner .ref-outline:focus-visible {
  background: #fff;
  color: var(--green);
}

@media (max-width: 800px) {
  .ref-cta-banner { min-height: 300px; margin-top: -20px; padding: 76px 0 52px; border-radius: 50% 50% 0 0 / 54px 54px 0 0; }
  .ref-cta-banner h2 { font-size: clamp(30px, 6.8vw, 44px); line-height: 1.25; }
  .ref-cta-banner p { max-width: 620px; margin-bottom: 26px; font-size: 15px; }
  .ref-cta-banner .ref-outline { padding: 12px 26px; }
}

@media (max-width: 479px) {
  .ref-cta-banner { min-height: 0; margin-top: -16px; padding: 62px 0 46px; border-radius: 50% 50% 0 0 / 44px 44px 0 0; }
  .ref-cta-banner h2 { font-size: clamp(28px, 8vw, 36px); line-height: 1.3; }
  .ref-cta-banner p { font-size: 14px; }
}

/* Homepage Quality in Process — semicircle transition, responsive safe-area */
@media (max-width: 600px) {
  .ref-quality { min-height: 390px; margin-top: -18px; padding: 100px 18px 52px; border-radius: 50% 50% 0 0 / 82px 82px 0 0; }
  .ref-quality .wrap { width: 100%; }
  .ref-quality h2 { font-size: clamp(34px, 9vw, 44px); line-height: 1.08; }
}


/* ===== Shared product/certificate image modal ===== */
.slab-lightbox {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  background: rgba(12, 20, 14, .94);
  opacity: 0;
  transition: opacity .2s ease;
}
.slab-lightbox.is-open {
  display: flex;
  opacity: 1;
}
.slab-lightbox[aria-hidden="true"] { pointer-events: none; }
.slab-lightbox-close {
  position: absolute;
  z-index: 5;
  top: max(14px, env(safe-area-inset-top));
  right: max(18px, env(safe-area-inset-right));
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  color: #fff;
  font: 300 34px/1 Arial, sans-serif;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.slab-lightbox-close:hover { background: rgba(255,255,255,.22); transform: rotate(90deg); }
.slab-lightbox-close:focus-visible,
.slab-lightbox-toolbar button:focus-visible { outline: 2px solid #e4cf37; outline-offset: 3px; }
.slab-lightbox-stage {
  position: absolute;
  inset: 68px 28px 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.slab-lightbox-stage img {
  display: block;
  width: auto;
  height: auto;
  max-width: 94vw;
  max-height: 88vh;
  object-fit: contain;
  background: #fff;
  user-select: none;
  -webkit-user-drag: none;
}
.product-lightbox .slab-lightbox-stage { cursor: grab; touch-action: none; }
.product-lightbox .slab-lightbox-stage:active { cursor: grabbing; }
.product-lightbox .slab-lightbox-stage img {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: none;
  max-height: none;
  flex: none;
  box-shadow: 0 18px 65px rgba(0,0,0,.28);
  will-change: width, height, transform;
}
.slab-lightbox-toolbar {
  position: absolute;
  z-index: 5;
  top: max(18px, env(safe-area-inset-top));
  left: max(18px, env(safe-area-inset-left));
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 42px;
  padding: 4px 7px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 14px;
  background: rgba(255,255,255,.11);
  color: #fff;
  backdrop-filter: blur(14px);
}
.slab-lightbox-toolbar button {
  width: 34px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  font: 500 21px/1 Arial, sans-serif;
  cursor: pointer;
}
.slab-lightbox-toolbar button:hover { background: rgba(255,255,255,.16); }
.slab-zoom-value { min-width: 52px; text-align: center; font: 500 12px/1 Manrope, sans-serif; font-variant-numeric: tabular-nums; }
.certificate-lightbox .slab-lightbox-stage { cursor: default; touch-action: auto; }
.certificate-lightbox .slab-lightbox-stage img {
  position: static;
  left: auto;
  top: auto;
  width: auto;
  height: auto;
  max-width: min(94vw, 1400px);
  max-height: calc(100vh - 96px);
  transform: none;
  box-shadow: 0 18px 65px rgba(0,0,0,.28);
  cursor: default;
}
@media (max-width: 600px) {
  .slab-lightbox-close { width: 42px; height: 42px; right: max(12px, env(safe-area-inset-right)); }
  .slab-lightbox-stage { inset: 68px 10px 18px; }
  .slab-lightbox-toolbar { top: max(12px, env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left)); gap: 2px; padding: 3px 5px; }
  .slab-lightbox-toolbar button { width: 30px; }
  .slab-zoom-value { min-width: 44px; font-size: 11px; }
  .certificate-lightbox .slab-lightbox-stage img { max-width: calc(100vw - 28px); max-height: calc(100vh - 94px); }
}
@media (prefers-reduced-motion: reduce) {
  .slab-lightbox, .slab-lightbox-close { transition: none; }
}
.certificate-lightbox .slab-lightbox-stage:active { cursor: default; }

/* 2026-10-20 targeted layout correction: purpose section stays square; about lower arches also apply on mobile. */
.ref-purpose{border-radius:0}
@media (max-width:767px){
  .ref-about{border-radius:0 0 180px 180px / 0 0 54px 54px}
  .ref-purpose{border-radius:0}
}


/* =========================================================
   HERO SLIDER — botanical headline, responsive height and captions
   ========================================================= */
.hero-slider[data-adaptive-height] [data-slider-track]{
  align-items:flex-start;
  height:auto;
  transition:height .55s cubic-bezier(.22,.61,.36,1);
}
.hero-slider[data-adaptive-height] .hero-slide{align-self:flex-start}
.hero-slider .hero-slide--botanical-feature{
  aspect-ratio:1600 / 727;
  background:#fff;
}
.hero-slider .hero-slide--botanical-feature img{
  object-fit:cover;
  object-position:center;
}
.hero-slider .hero-slide--botanical-feature::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:radial-gradient(ellipse at 50% 48%,rgba(8,24,10,.18) 0%,rgba(8,24,10,.09) 42%,transparent 75%);
}
.hero-caption.hero-caption--botanical{
  left:50%;
  top:49%;
  bottom:auto;
  width:min(1380px,91%);
  max-width:none;
  transform:translate(-50%,-50%);
  text-align:center;
  color:#fff;
}
.hero-caption--botanical h2{
  margin:0;
  color:#fff;
  font:400 clamp(32px,6.3vw,104px)/1.08 var(--font-display,"Cloud Lucent",serif);
  letter-spacing:0;
  text-wrap:balance;
  text-shadow:0 2px 4px rgba(0,0,0,.64),0 6px 22px rgba(0,0,0,.42);
}
.hero-caption--botanical .hero-title-line{display:block}
.hero-caption--botanical .hero-title-line + .hero-title-line{margin-top:-.02em}
.hero-slider .hero-slide--anniversary img{object-fit:cover;object-position:center}
.hero-slider .hero-slide--factory .hero-caption,
.hero-slider .hero-slide--herbal-process .hero-caption{max-width:min(640px,57%)}
.hero-slider .hero-slide--herbal-process::after{
  background:linear-gradient(90deg,rgba(10,34,18,.72) 0%,rgba(10,34,18,.32) 52%,rgba(10,34,18,0) 86%),
             linear-gradient(0deg,rgba(10,34,18,.30) 0%,rgba(10,34,18,0) 48%);
}
@media (max-width:640px){
  .hero-slider .hero-slide--botanical-feature{aspect-ratio:4 / 5}
  .hero-caption.hero-caption--botanical{
    top:48%;
    width:88%;
  }
  .hero-caption--botanical h2{
    font-size:clamp(25px,7vw,34px);
    line-height:1.28;
    text-wrap:pretty;
  }
  .hero-caption--botanical .hero-title-line{display:block}
  .hero-slider .hero-slide--factory .hero-caption,
  .hero-slider .hero-slide--herbal-process .hero-caption{
    left:7%;
    bottom:16%;
    max-width:86%;
  }
  .hero-slider .hero-slide--factory .hero-caption h2,
  .hero-slider .hero-slide--herbal-process .hero-caption h2{font-size:clamp(23px,6vw,30px)}
}
@media (prefers-reduced-motion:reduce){
  .hero-slider[data-adaptive-height] [data-slider-track]{transition:none}
  .hero-slider .hero-slide--botanical-feature.is-active img{animation:none;transform:none}
}


/* ===== Marketing/CMS additions: product price, linked contact channels ===== */
.slab-catalog-price{display:block;margin-top:7px;color:#f5cd63;font:700 13px/1.5 "Noto Sans Thai",sans-serif;letter-spacing:.01em}
.product-info .slab-catalog-price{color:#08733a;font-size:13px}
.herbal-product-info .slab-catalog-price,.herbal-product-row .slab-catalog-price{color:#08733a}
.slab-detail-price{margin:12px 0 22px;color:#08733a;font:800 clamp(20px,2vw,28px)/1.4 "Noto Sans Thai",sans-serif}
.contact-social-icon-link-ref,.contact-social-qr-link-ref{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border-radius:12px;outline-offset:4px}
.contact-social-icon-link-ref:focus-visible,.contact-social-qr-link-ref:focus-visible{outline:2px solid #168446}
.contact-social-icon-link-ref:hover .contact-social-icon-ref{transform:translateY(-2px) scale(1.04)}
.contact-social-icon-ref{transition:transform .2s ease}

.hero-slider .hero-slide[href]{display:block;color:inherit;text-decoration:none;cursor:pointer}
.hero-slider .hero-slide[href] .hero-caption{text-decoration:none}



/* Analytics consent preferences link */
.slab-privacy-footer-link{display:inline-block;margin:0 0 8px;color:inherit;text-decoration:underline;text-underline-offset:3px;font-size:.9em;opacity:.86}
.slab-privacy-footer-link:hover{opacity:1}
.slab-privacy-page h2{margin-top:2rem;margin-bottom:.65rem}
.slab-privacy-page p{line-height:1.85;max-width:78ch}


/* S-LAB Hero Products animation inside the CMS-managed homepage banner carousel. */
.hero-slider .hero-slide--hero-products{
  position:relative;
  aspect-ratio:1600 / 727;
  overflow:hidden;
  background:#12702a;
  isolation:isolate;
}
.hero-slider .hero-slide--hero-products iframe{
  position:absolute;inset:0;display:block;width:100%;height:100%;border:0;
  background:#12702a;pointer-events:none;
}
.hero-slider .hero-slide--hero-products .hero-products-link{
  position:absolute;inset:0;z-index:3;display:block;cursor:pointer;
  pointer-events:auto;text-decoration:none;color:inherit;
}
.hero-slider .hero-slide--hero-products .hero-products-link:focus-visible{
  outline:3px solid #f2c14e;outline-offset:-6px;
}
@media (prefers-reduced-motion:reduce){
  .hero-slider .hero-slide--hero-products iframe{background:#12702a}
}