/* =========================================================
   Bell Drink — Stylesheet
   Mobile-first · tokens → base → layout → components → pages
   ========================================================= */

:root {
  /* color */
  --g900: #174f26;
  --g700: #1f7a35;
  --g600: #2c8f41;
  --g400: #6cb43f;
  --g100: #e6f2da;
  --g50:  #f4f9ee;
  --o600: #d45d14;
  --o500: #f08a24;
  --o100: #fdeedd;
  --cream: #fdf9f0;
  --paper: #ffffff;
  --ink: #1c2718;
  --muted: #56624f;
  --line: #ebe4d3;
  --line-brand: #06c755;
  --line-brand-dark: #05a849;
  --wood: #b98552;

  /* type */
  --f-head: "Kanit", "Sarabun", system-ui, sans-serif;
  --f-body: "Sarabun", "Kanit", system-ui, sans-serif;
  --f-script: "Itim", "Kanit", cursive;
  --fs-sm: .875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem);
  --fs-hero: clamp(2rem, 1.4rem + 2.4vw, 3.1rem);

  /* shape */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(40, 50, 20, .06), 0 4px 14px rgba(40, 50, 20, .06);
  --shadow-md: 0 2px 4px rgba(40, 50, 20, .06), 0 14px 34px rgba(40, 50, 20, .10);

  /* space */
  --gutter: clamp(16px, 4vw, 32px);
  --section: clamp(56px, 8vw, 96px);
  --header-h: 72px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  margin: 0;
  overflow-wrap: break-word;
  font-family: var(--f-body);
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
}
img, svg { max-width: 100%; display: block; }
img { height: auto; }
a { color: var(--g700); text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--f-head); line-height: 1.3; margin: 0 0 .5em; color: var(--g900); font-weight: 600; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--r-sm); }
.skip-link:focus { top: 12px; }

.container { width: min(1200px, 100%); margin-inline: auto; padding-inline: var(--gutter); }
.container.narrow { width: min(820px, 100%); }
.section { padding-block: var(--section); }
.page-pad { padding-block: 28px var(--section); }
.center { text-align: center; justify-content: center; }
.ic { width: 1.25em; height: 1.25em; flex: none; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 44px; padding: .55em 1.3em;
  font-family: var(--f-head); font-weight: 500; font-size: var(--fs-base);
  border-radius: var(--r-pill); border: 2px solid transparent;
  text-decoration: none; cursor: pointer; text-align: center;
  flex-shrink: 0; max-width: 100%; /* ข้อความปุ่มยาว (แก้ได้ในหลังบ้าน) ตัดบรรทัดแทนการล้นจอ */
  transition: background-color .15s, color .15s, border-color .15s, transform .15s;
}
.btn:active { transform: translateY(1px); }
.btn-lg { min-height: 52px; padding-inline: 1.6em; font-size: var(--fs-md); }
.btn-primary { background: var(--g700); color: #fff; box-shadow: 0 6px 16px rgba(31, 122, 53, .25); }
.btn-primary:hover { background: var(--g900); }
.btn-line { background: var(--line-brand); color: #0b2a14; } /* ข้อความเข้มเพื่อคอนทราสต์ AA */
.btn-line:hover { background: var(--line-brand-dark); }
.btn-outline { background: var(--paper); color: var(--g700); border-color: var(--g700); }
.btn-outline:hover { background: var(--g50); }
.btn-ghost { background: var(--g50); color: var(--g900); }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-row { display: flex; align-items: center; gap: 24px; min-height: var(--header-h); }

.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.logo-mark { width: 58px; height: 58px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(120, 90, 20, .22); }
.logo-text { display: grid; line-height: 1.05; }
.lt-th { font-family: var(--f-head); font-weight: 700; font-size: 1.35rem; color: var(--g900); }
.lt-en { font-family: var(--f-head); font-weight: 600; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: #b8860b; margin-top: 3px; }
.logo-lg .logo-mark { width: 88px; height: 88px; }
.logo-lg .lt-th { font-size: 1.7rem; }
.logo-lg .lt-en { font-size: .8rem; }

.main-nav { margin-left: auto; }
.main-nav ul { list-style: none; display: flex; gap: 4px; }
.main-nav a {
  display: block; padding: 10px 12px; text-decoration: none;
  color: var(--ink); font-family: var(--f-head); font-weight: 500; position: relative;
}
.main-nav a:hover { color: var(--g700); }
.main-nav a[aria-current="page"] { color: var(--g700); }
.main-nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 3px; border-radius: 3px; background: var(--g700);
}
.nav-contact-mobile { display: none; }

.header-contact { display: none; align-items: center; gap: 18px; }
.hc-phone, .hc-line { display: flex; align-items: center; gap: 10px; }
.hc-nums { display: grid; line-height: 1.25; }
.hc-nums a, .hc-line { font-family: var(--f-head); font-weight: 600; color: var(--ink); text-decoration: none; font-size: .95rem; }
.hc-nums a:hover, .hc-line:hover { color: var(--g700); }
.hc-ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; flex: none; }
.hc-ic .ic { width: 20px; height: 20px; }
.hc-ic-green { background: var(--g700); }
.hc-ic-line { background: var(--line-brand); border-radius: 10px; }
.hc-ic-line .ic { width: 26px; height: 26px; }

.nav-toggle {
  margin-left: auto; width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center; border: 1px solid var(--line); background: var(--paper); color: var(--g900); cursor: pointer;
}
.nav-toggle .ic { width: 24px; height: 24px; }
.nav-toggle .ic-close, .nav-toggle[aria-expanded="true"] .ic-open { display: none; }
.nav-toggle[aria-expanded="true"] .ic-close { display: block; }

@media (max-width: 899px) {
  .main-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-md);
    padding: 8px var(--gutter) 20px; display: none;
  }
  .main-nav.open { display: block; }
  .main-nav ul { flex-direction: column; }
  .main-nav a { padding: 14px 4px; border-bottom: 1px solid var(--line); font-size: var(--fs-md); }
  .main-nav a[aria-current="page"]::after { display: none; }
  .nav-contact-mobile { display: grid; gap: 10px; margin-top: 16px; }
}
@media (min-width: 900px) {
  .nav-toggle { display: none; }
}
@media (min-width: 1100px) {
  .header-contact { display: flex; }
  .main-nav { margin-left: auto; margin-right: 8px; }
}

/* ---------- section heading ---------- */
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: 28px; }
.h-leaf { display: flex; align-items: center; gap: 10px; font-size: var(--fs-xl); font-weight: 700; }
.h-leaf-ic { width: 38px; height: 38px; flex: none; transform: rotate(-8deg); }
.section-sub { color: var(--muted); margin: 0; font-size: var(--fs-md); }
.brand-th { color: var(--g600); }

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(45% 60% at 0% 20%, #dcefc7 0%, rgba(220,239,199,0) 70%),
    radial-gradient(40% 50% at 30% 100%, #f3e3c6 0%, rgba(243,227,198,0) 70%),
    linear-gradient(180deg, #f7f6ea, #fbf4e6);
}
/* รูปหลัก: แสดงทั้งภาพในสัดส่วนจริง + พื้นหลังเบลอจากภาพเดียวกันเติมพื้นที่รอบๆ */
.hero-visual { position: relative; overflow: hidden; }
.hero-backdrop {
  position: absolute; inset: -40px; background-size: cover; background-position: center;
  filter: blur(26px) saturate(1.15); opacity: .55;
}
.hero-side { display: none; }
.hero-stage { position: relative; width: 100%; max-height: 62vh; aspect-ratio: 1082 / 1094; margin-inline: auto; }
.hero-photo {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%;
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent);
          mask-image: linear-gradient(180deg, #000 78%, transparent);
}
.hero-grid { position: relative; padding-block: 20px 44px; }
.hero-logo {
  width: 150px; height: auto; margin: 0 0 10px; display: none; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .55), 0 14px 34px rgba(90, 70, 10, .25);
}
.hero-title {
  font-size: var(--fs-hero); font-weight: 700; line-height: 1.2; margin-bottom: .1em;
  transform: rotate(-3deg); transform-origin: left bottom; word-break: keep-all;
}
.ht-lead { color: var(--g900); display: block; font-size: .78em; }
.ht-rest { color: var(--o600); font-size: 1.12em; }
.hero-leaf { display: inline-grid; vertical-align: .15em; margin-left: .1em; place-items: center; width: .9em; height: .9em; border-radius: 50%; background: var(--o500); color: #fff; }
.hero-leaf .ic { width: .56em; height: .56em; }
.hero-sub {
  font-family: var(--f-head); font-weight: 600; font-size: clamp(1.05rem, .85rem + 1vw, 1.45rem); color: var(--g700);
  margin-bottom: 22px; transform: rotate(-3deg); transform-origin: left bottom;
}
.hero-features { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 24px; }
.hero-features li {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.92); border-radius: var(--r-md); padding: 10px 12px; box-shadow: var(--shadow-sm);
  font-size: var(--fs-sm); line-height: 1.35; font-weight: 600; color: var(--ink);
}
.hf-ic { width: 40px; height: 40px; display: grid; place-items: center; flex: none; color: var(--g600); }
.hf-ic .ic { width: 34px; height: 34px; stroke-width: 2; }
.hf-ic-0, .hf-ic-2 { color: #6a9e1f; }
.hf-ic-0 .ic, .hf-ic-2 .ic { fill: #f6c945; fill-opacity: .55; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-actions .btn { min-width: 220px; }

@media (min-width: 640px) {
  .hero-features { grid-template-columns: repeat(4, 108px); gap: 12px; }
  .hero-features li {
    flex-direction: column; justify-content: center; text-align: center; gap: 4px;
    aspect-ratio: 1; border-radius: 50%; padding: 10px; font-size: .74rem; line-height: 1.3;
  }
}
@media (min-width: 960px) {
  .hero { min-height: 560px; }
  .hero-visual { position: absolute; inset: 0 0 0 auto; width: 64%; overflow: visible; }
  .hero-backdrop { inset: -40px -40px -40px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); mask-image: linear-gradient(90deg, transparent, #000 45%); }
  /* ภาพสูง 90% ของส่วนหัว ชิดล่าง ขวาอยู่ในแนวคอนเทนเนอร์ → ขนาดขวดใกล้เคียงแบบ */
  .hero-stage { position: absolute; top: 0; bottom: 0; height: 100%; width: auto; max-height: none; margin: 0; right: 0; }
  /* แก้วชาเขียวด้านหลังขวด เติมช่องว่างแบบในภาพตัวอย่าง */
  .hero-side {
    display: block; position: absolute; right: 72%; bottom: 2%; height: 86%; width: auto; filter: blur(.6px) saturate(1.05);
    -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 100%);
  }
  .hero-photo { position: relative; }
  .hero-photo, .hero-glow {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%);
            mask-image: linear-gradient(90deg, transparent 0, #000 12%);
  }
  .hero-title { font-size: clamp(2.2rem, 1rem + 2vw, 2.8rem); } /* ไม่ใช้ nowrap: หัวข้อที่แก้ให้ยาวขึ้นจะตัดบรรทัดแทนการทับรูป */
  .hero-grid { padding-block: 12px 60px; }
  .hero-copy { max-width: 470px; }
  .hero-logo { display: block; width: 190px; }
}

/* hero: ฉากหลังมีมิติ — แสงลอดใบไม้ + โบเก้เต็มความกว้าง + คลื่นขอบล่าง */
.hero::before {
  content: ""; position: absolute; inset: -40px; z-index: -1;
  background: url("../img/hero-blur.webp") center / cover;
  filter: blur(34px) saturate(1.2); opacity: .5;
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .35), #000 55%);
          mask-image: linear-gradient(90deg, rgba(0, 0, 0, .35), #000 55%);
}
.hero-wave { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 2; width: 100%; height: 34px; fill: #fffdf8; pointer-events: none; }

/* ป้ายลอยบนรูป */
.hb {
  position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px;
  padding: 10px 16px 10px 10px; border-radius: 16px;
  background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(40, 60, 20, .18); font-family: var(--f-head);
  animation: hb-float 5s ease-in-out infinite;
}
.hb strong { display: block; color: var(--g900); font-size: .95rem; font-weight: 600; line-height: 1.25; }
.hb small { display: block; color: var(--muted); font-size: .75rem; line-height: 1.3; font-family: var(--f-body); }
.hb-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--g700); color: #fff; flex: none; }
.hb-ic .ic { width: 22px; height: 22px; }
.hb-factory { left: 6%; bottom: 10%; }
.hb-hot {
  left: 12%; top: 16%; padding: 6px 14px; gap: 6px; border-radius: var(--r-pill);
  background: var(--o600); color: #fff; font-size: .9rem; font-weight: 600; rotate: -6deg; animation-delay: -3s;
}
.hb-hot .ic { width: 16px; height: 16px; fill: #ffd54a; stroke: #ffd54a; }
@keyframes hb-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }

/* แถวรสชาติ */
.hero-features { margin-bottom: 18px; }
.hero-flavors {
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: 22px; padding: 7px 18px 7px 8px;
  border-radius: var(--r-pill); background: rgba(255, 255, 255, .8); box-shadow: var(--shadow-sm);
  color: var(--ink); text-decoration: none; transition: box-shadow .2s, background .2s;
}
.hero-flavors:hover { background: #fff; box-shadow: var(--shadow-md); }
.hfl-stack { display: flex; padding-left: 12px; }
.hfl-stack img, .hfl-stack svg {
  width: 42px; height: 42px; margin-left: -12px; border-radius: 50%; object-fit: cover;
  border: 2px solid #fff; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); transition: margin .25s;
}
.hero-flavors:hover .hfl-stack img, .hero-flavors:hover .hfl-stack svg { margin-left: -6px; }
.hfl-text strong { display: block; font: 600 .9rem/1.3 var(--f-head); color: var(--g900); }
.hfl-text small { display: block; font-size: .78rem; color: var(--o600); font-weight: 600; }
.btn-glass { background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hero-actions .btn-glass { min-width: 0; }

@media (max-width: 959px) {
  .hero { padding-bottom: 24px; }
  .hb-hot { display: none; }
  .hb-factory { left: 4%; bottom: 20%; padding: 8px 12px 8px 8px; }
  .hb-factory .hb-ic { width: 34px; height: 34px; }
}
@media (max-width: 479px) {
  .hfl-stack img:nth-child(n+5), .hfl-stack svg:nth-child(n+5) { display: none; }
}

/* hero motion: ใบไม้จริงปลิวแบบ 3 มิติ · รูปขยับหายใจ · แสงวาบ · ข้อความค่อยๆ ขึ้น */
.hero-leaves { position: absolute; inset: 0; pointer-events: none; overflow: hidden; container-type: size; }
/* 3 ชั้น: .fl ตกลงมา → .fl-sway ส่ายซ้ายขวา → .fl-leaf พลิกหมุนในแนว 3D */
.fl { position: absolute; top: -80px; left: var(--x); width: var(--s); perspective: 500px; animation: fl-fall var(--d) linear var(--delay) infinite; }
.fl-sway { display: block; animation: fl-sway calc(var(--d) / 4) ease-in-out var(--delay) infinite alternate; }
.fl-leaf {
  width: 100%; height: auto; backface-visibility: visible;
  filter: hue-rotate(var(--hue, 0deg)) brightness(var(--br, 1)) drop-shadow(0 6px 5px rgba(40, 70, 10, .22));
  animation: fl-tumble var(--t, 5s) ease-in-out var(--delay) infinite;
}
.fl-1  { --x: 3%;  --s: 34px; --d: 14s; --delay: -2s;  --dx: 110px;  --t: 4.5s; }
.fl-2  { --x: 14%; --s: 26px; --d: 17s; --delay: -9s;  --dx: -70px;  --t: 6s;   --hue: 15deg;  --br: 1.1; }
.fl-3  { --x: 27%; --s: 40px; --d: 15s; --delay: -5s;  --dx: 140px;  --t: 5s;   --hue: -12deg; }
.fl-4  { --x: 41%; --s: 30px; --d: 19s; --delay: -13s; --dx: -100px; --t: 7s;   --br: .9; }
.fl-5  { --x: 52%; --s: 24px; --d: 13s; --delay: -1s;  --dx: 80px;   --t: 4s;   --hue: 20deg;  --br: 1.15; }
.fl-6  { --x: 63%; --s: 44px; --d: 16s; --delay: -7s;  --dx: 120px;  --t: 5.5s; }
.fl-7  { --x: 73%; --s: 28px; --d: 18s; --delay: -3s;  --dx: -90px;  --t: 6.5s; --hue: -18deg; }
.fl-8  { --x: 84%; --s: 38px; --d: 15s; --delay: -11s; --dx: 70px;   --t: 4.8s; --br: 1.1; }
.fl-9  { --x: 93%; --s: 26px; --d: 14s; --delay: -6s;  --dx: -130px; --t: 5.2s; --hue: 12deg; }
.fl-10 { --x: 35%; --s: 22px; --d: 12s; --delay: -4s;  --dx: 100px;  --t: 3.8s; --hue: 25deg;  --br: 1.2; }
.fl-11 { --x: 20%; --s: 62px; --d: 23s; --delay: -8s;  --dx: 180px;  --t: 9s; }
.fl-12 { --x: 78%; --s: 56px; --d: 25s; --delay: -17s; --dx: -160px; --t: 10s;  --hue: -8deg; }
.fl-11 .fl-leaf, .fl-12 .fl-leaf { filter: blur(2.5px) drop-shadow(0 8px 6px rgba(40, 70, 10, .2)); opacity: .9; }
@keyframes fl-fall {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  6%   { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translate3d(var(--dx), calc(100cqh + 100px), 0); opacity: 0; }
}
@keyframes fl-sway {
  from { transform: translateX(-34px) rotate(-14deg); }
  to   { transform: translateX(34px) rotate(16deg); }
}
@keyframes fl-tumble {
  0%   { transform: rotateX(10deg) rotateY(0deg) rotateZ(0deg); }
  25%  { transform: rotateX(55deg) rotateY(70deg) rotateZ(35deg); }
  50%  { transform: rotateX(-10deg) rotateY(160deg) rotateZ(80deg); }
  75%  { transform: rotateX(-55deg) rotateY(250deg) rotateZ(130deg); }
  100% { transform: rotateX(10deg) rotateY(360deg) rotateZ(180deg); }
}
/* ใบไม้ใหญ่เบลอที่ขอบ เหมือนภาพตัวอย่าง */
.hero-frame { position: absolute; width: 150px; height: auto; filter: blur(3px); opacity: .95; animation: frame-sway 6s ease-in-out infinite alternate; }
.hero-frame-1 { left: -56px; top: 60%; rotate: 30deg; transform-origin: 0 100%; }
.hero-frame-2 { left: 42%; top: -46px; width: 110px; rotate: 165deg; filter: blur(4px); animation-duration: 7.5s; }
@keyframes frame-sway { from { transform: rotate(-5deg); } to { transform: rotate(6deg); } }

.hero-stage { animation: hero-breathe 9s ease-in-out infinite alternate; transform-origin: 55% 90%; }
@keyframes hero-breathe { from { transform: scale(1); } to { transform: scale(1.035) translateY(-4px); } }

.hero-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .38) 50%, transparent 58%) no-repeat;
  background-size: 300% 100%; animation: hero-sheen 8s ease-in-out 1.2s infinite;
}
@keyframes hero-sheen { 0% { background-position: 120% 0; } 45%, 100% { background-position: -20% 0; } }

.hero-copy > * { animation: hero-in .8s cubic-bezier(.2, .8, .2, 1) both; }
.hero-copy > :nth-child(2) { animation-delay: .12s; }
.hero-copy > :nth-child(3) { animation-delay: .24s; }
.hero-copy > :nth-child(4) { animation-delay: .36s; }
.hero-copy > :nth-child(5) { animation-delay: .5s; }
.hero-copy > :nth-child(6) { animation-delay: .64s; }
@keyframes hero-in { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
.hero-leaf { animation: leaf-wiggle 3.2s ease-in-out infinite; }
@keyframes leaf-wiggle { 0%, 100% { rotate: 0deg; } 50% { rotate: 18deg; } }

.hero-features li { animation: hf-bob 4.5s ease-in-out infinite; transition: box-shadow .2s; }
.hero-features li:nth-child(2) { animation-delay: -1.1s; }
.hero-features li:nth-child(3) { animation-delay: -2.2s; }
.hero-features li:nth-child(4) { animation-delay: -3.3s; }
.hero-features li:hover { box-shadow: var(--shadow-md); }
.hero-features li:hover .hf-ic { animation: leaf-wiggle .6s ease-in-out; }
@keyframes hf-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }

.hero-actions .btn { position: relative; overflow: hidden; }
.hero-actions .btn::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%) no-repeat;
  background-size: 250% 100%; animation: hero-sheen 4.5s ease-in-out 2s infinite;
}

@media (max-width: 639px) {
  :is(.fl-7, .fl-8, .fl-9, .fl-10, .fl-12), .hero-frame-2 { display: none; }
  .hero-frame-1 { width: 100px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-leaves, .hero-glow, .hero-actions .btn::after { display: none; }
}

.deco { position: absolute; pointer-events: none; opacity: .9; z-index: 0; }

/* ---------- categories ---------- */
.cats { background: #fffdf8; padding-block: 36px 48px; }
.cats .section-head { margin-bottom: 20px; }
.h-leaf-sm { width: 22px; height: 22px; flex: none; transform: rotate(10deg); }
.cat-grid { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.cat-card {
  display: flex; flex-direction: column; height: 100%;
  background: var(--paper); border-radius: 12px; overflow: hidden;
  box-shadow: 0 2px 10px rgba(60, 50, 20, .10); text-decoration: none; color: var(--ink);
  transition: box-shadow .2s, transform .2s;
}
.cat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.cat-media {
  aspect-ratio: 124 / 176; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 70%, #fff 0%, var(--c2) 75%);
}
.cat-media img { width: 100%; height: 100%; object-fit: cover; }
.cat-media .drink-art { width: 72%; }
.cat-name { font-family: var(--f-head); font-weight: 700; font-size: var(--fs-md); text-align: center; padding: 10px 8px 0; color: var(--ink); }
.cat-tag { font-size: .8rem; color: var(--muted); text-align: center; padding: 0 8px 12px; line-height: 1.4; }
@media (min-width: 640px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .cat-grid { grid-template-columns: repeat(6, 1fr); gap: 10px; } }

/* ---------- uses ---------- */
.uses {
  position: relative; overflow: hidden; padding-block: 36px 40px;
  background:
    radial-gradient(60% 90% at 70% 40%, #fffaf0 0%, rgba(255,250,240,0) 70%),
    linear-gradient(100deg, #f4ead6 0%, #fbf5e8 40%, #fdf8ee 100%);
}
.uses-visual { width: min(320px, 70%); margin: 0 auto 8px; }
.uses-visual img { width: 100%; height: auto; border-radius: var(--r-lg); }
.uses-grid { position: relative; z-index: 1; }
.script-note { display: flex; align-items: flex-end; gap: 6px; font-family: var(--f-script); font-style: italic; color: var(--o600); font-size: 1.3rem; margin: 0 0 .1em; }
.script-arrow { width: 40px; height: 40px; color: var(--o600); transform: translateY(18px); display: none; }
.uses-copy h2 { font-size: var(--fs-xl); font-weight: 700; margin-bottom: .1em; }
.uses-sub { font-family: var(--f-head); font-weight: 500; font-size: var(--fs-lg); color: var(--g900); margin: 0; }
.use-list { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 10px; margin-top: 22px; }
.use-list li { display: grid; justify-items: center; gap: 8px; font-family: var(--f-head); font-weight: 500; text-align: center; }
.use-circle { width: 84px; height: 84px; border-radius: 50%; background: var(--paper); box-shadow: 0 3px 12px rgba(60,40,10,.14); border: 3px solid #fff; overflow: hidden; }
.use-circle img { width: 100%; height: 100%; object-fit: cover; }
.deco-uses { width: 70px; right: -14px; top: 30px; transform: rotate(-20deg); }
@media (min-width: 900px) {
  .uses { min-height: 280px; padding-block: 34px 30px; }
  .uses-visual { position: absolute; left: 0; top: 0; bottom: 0; width: 34%; margin: 0; }
  .uses-visual img { height: 100%; object-fit: cover; object-position: 60% 40%; border-radius: 0;
    -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent); mask-image: linear-gradient(90deg, #000 70%, transparent); }
  .uses-copy { margin-left: 33%; }
  .script-note { margin-left: -44px; }
  .script-arrow { display: block; }
  .use-list { grid-template-columns: repeat(6, 1fr); }
}

/* ---------- why ---------- */
.why { background: #fff; position: relative; overflow: hidden; padding-block: 40px 44px; }
.why-grid { position: relative; z-index: 1; }
.h-leaf-pair { display: inline-flex; flex: none; }
.h-leaf-pair svg { width: 30px; height: 30px; }
.h-leaf-pair svg:first-child { transform: rotate(-30deg) scaleX(-1); margin-right: -10px; }
.h-leaf-pair svg:last-child { transform: rotate(-4deg); }
.why-list { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 20px; }
.why-card { background: var(--paper); border-radius: 12px; padding: 20px 12px; text-align: center; box-shadow: 0 2px 12px rgba(60, 50, 20, .10); }
.why-ic { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 10px; color: var(--g700); }
.why-ic .ic { width: 42px; height: 42px; stroke-width: 1.6; }
.why-ic-cup .ic { color: #6a9e1f; fill: #f6c945; fill-opacity: .55; }
.why-card h3 { font-size: var(--fs-base); font-weight: 700; margin-bottom: .3em; color: var(--ink); }
.why-card p { font-size: var(--fs-sm); color: var(--muted); margin: 0; line-height: 1.5; }
.why-visual { margin: 24px auto 0; width: min(420px, 90%); }
.why-visual img { width: 100%; height: auto; }
@media (min-width: 760px) { .why-list { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) {
  .why { min-height: 300px; }
  .why-grid > div { max-width: 68%; }
  .why-visual { position: absolute; right: 0; bottom: 0; top: 0; width: 33%; margin: 0; }
  .why-visual img { height: 100%; object-fit: cover; object-position: 30% 50%;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%); mask-image: linear-gradient(90deg, transparent, #000 18%); }
}

/* ---------- order steps ---------- */
.order { background: var(--g50); }
.order.compact { background: none; padding-block: 40px 0; }
.steps { list-style: none; counter-reset: step; display: grid; gap: 16px; margin-top: 28px; }
.steps li {
  counter-increment: step; position: relative;
  background: var(--paper); border-radius: var(--r-lg); padding: 24px 22px 22px 22px; box-shadow: var(--shadow-sm);
}
.steps li::before {
  content: counter(step); position: absolute; top: 18px; right: 20px;
  font-family: var(--f-head); font-weight: 700; font-size: 2.4rem; line-height: 1; color: var(--g100);
}
.step-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--g700); color: #fff; margin-bottom: 12px; }
.step-ic .ic { width: 26px; height: 26px; }
.steps h3 { font-size: var(--fs-md); margin-bottom: .2em; }
.steps p { color: var(--muted); margin: 0; }
.order-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); } }

/* ---------- recipe ideas ---------- */
.ideas {
  position: relative; padding-block: 40px 48px; overflow: hidden;
  background:
    radial-gradient(40% 80% at 100% 50%, #e3f0cf 0%, rgba(227,240,207,0) 70%),
    linear-gradient(90deg, #fbf3e3 0%, #f8f3e2 60%, #f1f6e6 100%);
}
.ideas-grid { position: relative; z-index: 1; display: grid; gap: 28px; align-items: center; }
.ideas-copy h2 { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xl); font-weight: 700; margin-bottom: .2em; }
.ideas-copy .section-sub { margin-bottom: 18px; font-size: var(--fs-base); color: var(--ink); }
.polaroids { list-style: none; display: flex; gap: 12px; overflow-x: auto; padding: 12px 4px 20px; scroll-snap-type: x mandatory; }
.polaroids li { flex: 0 0 132px; scroll-snap-align: start; }
.polaroids li:nth-child(3n+1) .polaroid { transform: rotate(-4deg); }
.polaroids li:nth-child(3n+2) .polaroid { transform: rotate(3deg); }
.polaroids li:nth-child(3n) .polaroid { transform: rotate(-2deg); }
.polaroid {
  display: block; background: var(--paper); padding: 6px 6px 16px; border-radius: 2px;
  box-shadow: 0 4px 16px rgba(50, 40, 10, .18); text-decoration: none; color: var(--ink); transition: transform .2s;
}
.polaroid:hover { transform: rotate(0) translateY(-4px) !important; }
.pol-media { display: grid; place-items: center; aspect-ratio: 176 / 200; background: radial-gradient(circle at 50% 70%, #fff, var(--c2)); overflow: hidden; }
.pol-media img { width: 100%; height: 100%; object-fit: cover; }
.pol-media .drink-art { width: 76%; }
.pol-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.deco-ideas-1 { width: 56px; left: 30%; bottom: -10px; transform: rotate(60deg); }
.deco-ideas-2 { width: 34px; left: 38%; top: 12px; transform: rotate(-20deg); }
@media (min-width: 1024px) {
  .ideas-grid { grid-template-columns: 1fr 2.1fr; }
  .polaroids { overflow: visible; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; padding: 0; }
  .polaroids li { flex: none; }
  .polaroids li:nth-child(even) { margin-top: 22px; }
}

/* ---------- faq ---------- */
.faq-list { display: grid; gap: 12px; margin-top: 28px; }
.faq-list details { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); }
.faq-list summary {
  cursor: pointer; list-style: none; padding: 16px 52px 16px 20px; position: relative;
  font-family: var(--f-head); font-weight: 500; font-size: var(--fs-md); color: var(--ink);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 50%; background: var(--g50); color: var(--g700);
  display: grid; place-items: center; font-size: 1.2rem; line-height: 1;
}
.faq-list details[open] summary::after { content: "–"; }
.faq-list details p { padding: 0 20px 18px; margin: 0; color: var(--muted); }

/* ---------- footer ---------- */
.site-footer { background: var(--paper); border-top: 1px solid var(--line); padding-top: 48px; position: relative; }
.footer-grid { display: grid; gap: 32px; }
.f-brand p { color: var(--muted); margin-top: 14px; max-width: 42ch; }
.f-contact { display: grid; gap: 14px; align-content: start; }
.f-row { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; font-family: var(--f-head); font-size: var(--fs-md); line-height: 1.35; }
.f-row:hover { color: var(--g700); }
.f-hours { display: flex; align-items: center; gap: 8px; color: var(--muted); margin: 0; font-size: var(--fs-sm); }
.site-footer h2 { font-size: var(--fs-base); font-weight: 600; margin-bottom: 10px; }
.f-menu ul { list-style: none; display: grid; gap: 4px; }
.f-menu a { color: var(--muted); text-decoration: none; }
.f-menu a:hover { color: var(--g700); text-decoration: underline; }
.social-row { display: flex; gap: 10px; }
.soc { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.soc .ic { width: 22px; height: 22px; }
.soc-fb { background: #1877f2; } .soc-tt { background: #111; } .soc-line { background: var(--line-brand); }
.f-bottom { border-top: 1px solid var(--line); margin-top: 40px; padding-block: 18px; font-size: var(--fs-sm); color: var(--muted); }
.f-bottom p { margin: 0; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.4fr 1.1fr .8fr .8fr; } }

/* ---------- floating contact buttons (ทุกหน้า) ---------- */
.float-contact {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 70;
  display: grid; gap: 12px; justify-items: end;
}
.fc-phone { position: relative; }
.fc-btn {
  position: relative; display: flex; flex-direction: row-reverse; align-items: center;
  height: 56px; min-width: 56px; padding: 0; border: 0; border-radius: var(--r-pill); cursor: pointer;
  text-decoration: none; color: #fff; font: 500 var(--fs-base) var(--f-head);
  box-shadow: 0 8px 22px rgba(20, 40, 10, .25); transition: transform .2s, box-shadow .2s;
}
.fc-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(20, 40, 10, .3); }
.fc-ic { position: relative; z-index: 1; width: 56px; height: 56px; display: grid; place-items: center; flex: none; }
.fc-ic .ic { width: 28px; height: 28px; }
.fc-label { position: relative; z-index: 1; max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .3s ease, padding .3s ease; }
.fc-btn:hover .fc-label, .fc-btn:focus-visible .fc-label { max-width: 240px; padding-left: 20px; }
.fc-line { background: var(--line-brand); }
.fc-line .fc-label { color: #06361a; } /* ข้อความเข้มบนเขียว LINE เพื่อคอนทราสต์ */
.fc-line .fc-ic .ic { width: 34px; height: 34px; }
.fc-tel { background: var(--g700); }
/* วงแหวนกระเพื่อมดึงสายตา */
.fc-btn::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; z-index: 0;
  animation: fc-ping 2.6s cubic-bezier(0, 0, .2, 1) infinite;
}
.fc-tel::before { animation-delay: 1.3s; }
@keyframes fc-ping { 0% { transform: scale(1); opacity: .55; } 80%, 100% { transform: scale(1.45); opacity: 0; } }
.fc-tel .fc-ic .ic { animation: fc-ring 3.2s ease-in-out infinite; }
@keyframes fc-ring {
  0%, 60%, 100% { transform: rotate(0); }
  64% { transform: rotate(-16deg); } 68% { transform: rotate(14deg); } 72% { transform: rotate(-12deg); }
  76% { transform: rotate(10deg); } 80% { transform: rotate(0); }
}
.fc-menu {
  position: absolute; right: 0; bottom: calc(100% + 10px); min-width: 210px;
  display: grid; gap: 2px; padding: 6px; background: var(--paper); border-radius: var(--r-md); box-shadow: var(--shadow-md);
}
.fc-menu[hidden] { display: none; }
.fc-menu a {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 14px; border-radius: var(--r-sm);
  color: var(--ink); text-decoration: none; font: 600 var(--fs-md) var(--f-head);
}
.fc-menu a:hover { background: var(--g50); color: var(--g700); }
.fc-menu .ic { color: var(--g700); }
@media (max-width: 639px) {
  .float-contact { right: 12px; gap: 10px; }
  .fc-btn, .fc-ic { height: 52px; min-width: 52px; }
  .fc-ic { width: 52px; }
}
@media (prefers-reduced-motion: reduce) { .fc-btn::before { display: none; } }

/* ---------- inner pages ---------- */
.breadcrumb { font-size: var(--fs-sm); color: var(--muted); margin-bottom: 18px; display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumb a { color: var(--muted); }
.breadcrumb [aria-current] { color: var(--ink); }
.page-head { margin-bottom: 24px; }
.page-head h1 { font-size: var(--fs-xl); font-weight: 700; margin-bottom: .2em; }

.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 28px; }
.chip {
  flex: none; padding: 8px 18px; border-radius: var(--r-pill); border: 1px solid var(--line);
  background: var(--paper); color: var(--ink); text-decoration: none; font-family: var(--f-head); font-weight: 500;
}
.chip:hover { border-color: var(--g700); color: var(--g700); }
.chip[aria-current="page"] { background: var(--g700); border-color: var(--g700); color: #fff; }

.product-grid, .post-grid { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.product-card, .post-card { height: 100%; background: var(--paper); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.pc-media, .post-media { display: grid; place-items: center; aspect-ratio: 1; background: radial-gradient(circle at 50% 70%, #fff, var(--c2)); }
.post-media { aspect-ratio: 4 / 3; }
.pc-media img, .post-media img { width: 100%; height: 100%; object-fit: cover; }
.pc-media .drink-art { width: 64%; }
.post-media .drink-art { width: 44%; }
.pc-body, .post-body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.pc-cat { font-size: .8rem; color: var(--g600); font-weight: 600; margin: 0; }
.pc-name, .post-body h3 { font-size: var(--fs-md); margin: 0 0 4px; font-weight: 600; line-height: 1.35; }
.pc-name a, .post-body h3 a { color: var(--ink); text-decoration: none; }
.pc-name a:hover, .post-body h3 a:hover { color: var(--g700); text-decoration: underline; }
.pc-size { font-size: var(--fs-sm); color: var(--muted); margin: 0; }
.pc-price { margin: auto 0 0; padding-top: 6px; font-family: var(--f-head); font-weight: 600; color: var(--o600); }
.post-body p { color: var(--muted); font-size: var(--fs-sm); margin: 0; }
@media (min-width: 760px) { .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }

.pd { display: grid; gap: 28px; align-items: start; }
.pd-media { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 1; display: grid; place-items: center; background: radial-gradient(circle at 50% 70%, #fff, var(--c2)); }
.pd-media img { width: 100%; height: 100%; object-fit: cover; }
.pd-media .drink-art { width: 60%; }
.pd-info h1 { font-size: var(--fs-xl); font-weight: 700; margin-bottom: .2em; }
.pd-lead { font-size: var(--fs-md); color: var(--muted); }
.pd-facts { display: grid; gap: 0; margin: 20px 0; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.pd-facts div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 12px 16px; }
.pd-facts div + div { border-top: 1px solid var(--line); }
.pd-facts dt { color: var(--muted); }
.pd-facts dd { margin: 0; font-weight: 600; }
.pd-price { color: var(--o600); font-family: var(--f-head); }
.pd-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.pd-hint { font-size: var(--fs-sm); color: var(--muted); margin-top: 12px; }
.related { margin-top: var(--section); }
.related .h-leaf { margin-bottom: 20px; }
@media (min-width: 860px) { .pd { grid-template-columns: 1fr 1fr; gap: 48px; } }

.prose { margin-top: 24px; max-width: 70ch; }
.prose .prose-h { font-size: var(--fs-lg); margin: 1.4em 0 .4em; }
.prose ul, .prose ol { padding-left: 1.4em; margin-bottom: 1em; }
.prose li { margin-bottom: .3em; }

.post header h1 { font-size: var(--fs-xl); font-weight: 700; }
.post-hero { margin: 20px 0; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16 / 9; display: grid; place-items: center; background: radial-gradient(circle at 50% 70%, #fff, var(--c2)); }
.post-hero img { width: 100%; height: 100%; object-fit: cover; }
.post-hero .drink-art { height: 80%; width: auto; }
.post-product { display: flex; gap: 18px; align-items: center; background: var(--g50); border-radius: var(--r-lg); padding: 18px; margin-top: 36px; flex-wrap: wrap; }
.pp-media { width: 110px; aspect-ratio: 1; border-radius: var(--r-md); display: grid; place-items: center; background: radial-gradient(circle at 50% 70%, #fff, var(--c2)); overflow: hidden; }
.pp-media .drink-art { width: 70%; }
.pp-media img { width: 100%; height: 100%; object-fit: cover; }
.post-product h2 { font-size: var(--fs-lg); margin-bottom: 10px; }
.pp-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.pager { display: flex; justify-content: center; gap: 8px; margin-top: 36px; }
.pager a { min-width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-sm); border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.pager a[aria-current] { background: var(--g700); color: #fff; border-color: var(--g700); }

.empty-state { text-align: center; padding: 48px 20px; background: var(--g50); border-radius: var(--r-lg); }
.empty-state h1 { font-size: var(--fs-xl); }

/* ---------- contact page ---------- */
.btn-white { background: var(--paper); color: var(--g900); }
.btn-white:hover { background: var(--g50); }
.breadcrumb-light, .breadcrumb-light a, .breadcrumb-light [aria-current] { color: rgba(255, 255, 255, .88); }

.ct-hero {
  position: relative; overflow: hidden; color: #fff; padding-block: 24px 96px;
  background:
    radial-gradient(55% 90% at 85% 45%, rgba(124, 192, 74, .55) 0%, rgba(124, 192, 74, 0) 70%),
    linear-gradient(120deg, #123f1e 0%, #1f7a35 60%, #2c8f41 100%);
}
.ct-hero-grid { position: relative; z-index: 1; display: grid; gap: 20px; align-items: center; }
.ct-hero h1 { color: #fff; font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.2rem); font-weight: 700; margin-bottom: .2em; }
.ct-hero p { color: rgba(255, 255, 255, .92); font-size: var(--fs-md); max-width: 52ch; margin-bottom: 22px; }
.ct-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* โลโก้บริษัทในแบนเนอร์ติดต่อเรา */
.ct-hero-art { width: min(180px, 50%); justify-self: center; order: -1; }
.ct-hero-art img {
  width: 100%; height: auto; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .25), 0 20px 50px rgba(0, 30, 10, .4);
  animation: hf-bob 6s ease-in-out infinite;
}
.ct-leaf-1 { width: 90px; left: -24px; bottom: 40px; transform: rotate(35deg); opacity: .35; }
.ct-leaf-2 { width: 40px; right: 44%; top: 26px; transform: rotate(-20deg); opacity: .7; }
@media (min-width: 900px) {
  .ct-hero { padding-block: 36px 120px; }
  .ct-hero-grid { grid-template-columns: 1.2fr 1fr; }
  .ct-hero-art { width: min(340px, 100%); order: 0; }
}

.ct-cards-wrap { position: relative; z-index: 2; margin-top: -64px; }
.ct-cards { list-style: none; display: grid; gap: 14px; }
.ct-card {
  height: 100%; display: grid; gap: 2px; justify-items: start; align-content: start;
  background: var(--paper); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow-md);
  color: var(--ink); text-decoration: none; transition: transform .2s, box-shadow .2s;
}
a.ct-card:hover { transform: translateY(-3px); box-shadow: 0 4px 8px rgba(40, 50, 20, .08), 0 20px 40px rgba(40, 50, 20, .14); }
.ct-ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--g700); color: #fff; margin-bottom: 10px; flex: none; }
.ct-ic .ic { width: 28px; height: 28px; }
.ct-ic-orange { background: var(--o500); }
.ct-ic-blue { background: #1877f2; }
.ct-card-line { background: linear-gradient(160deg, #fff 45%, #e3f8eb); }
.ct-card-line .ct-ic { background: var(--line-brand); }
.ct-card-line .ct-ic .ic { width: 34px; height: 34px; }
.ct-label { color: var(--muted); font-size: var(--fs-sm); }
.ct-card strong { font-family: var(--f-head); font-size: var(--fs-lg); font-weight: 600; line-height: 1.35; }
.ct-card .ct-text { font-size: var(--fs-md); }
.ct-phone { font-family: var(--f-head); font-size: var(--fs-lg); font-weight: 600; color: var(--ink); text-decoration: none; line-height: 1.45; }
.ct-phone:hover { color: var(--g700); text-decoration: underline; }
.ct-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; color: #067a3a; font-weight: 600; font-size: var(--fs-sm); }
.ct-cta .ic { width: 1em; height: 1em; }
.ct-social { display: flex; gap: 10px; margin-top: 6px; }
@media (min-width: 600px) { .ct-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ct-cards { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }

.ct-map-grid { display: grid; gap: 24px; }
.ct-address { display: flex; gap: 12px; align-items: flex-start; background: var(--g50); border-radius: var(--r-md); padding: 16px; margin: 18px 0; }
.ct-ic-sm { width: 42px; height: 42px; border-radius: 50%; margin: 0; }
.ct-ic-sm .ic { width: 22px; height: 22px; }
.ct-address address { font-style: normal; font-size: var(--fs-md); line-height: 1.6; padding-top: 6px; }
.ct-map-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ct-note { color: var(--muted); font-size: var(--fs-sm); margin: 14px 0 0; }
.ct-map-frame { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); background: #e8eee0; min-height: 320px; }
.ct-map-frame iframe { display: block; width: 100%; height: 100%; min-height: 320px; border: 0; }
@media (min-width: 900px) {
  .ct-map-grid { grid-template-columns: 1fr 1.4fr; align-items: stretch; }
  .ct-map-frame, .ct-map-frame iframe { min-height: 420px; }
}

.ct-cta-band { background: linear-gradient(90deg, #fbf3e3, #eef6e4); padding-block: 44px; }
.ct-cta-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.ct-cta-inner h2 { font-size: var(--fs-lg); font-weight: 700; margin-bottom: .2em; }
.ct-cta-inner p { color: var(--muted); margin: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- mobile refinements ---------- */
@media (max-width: 639px) {
  .hero-title, .hero-sub { transform: none; }
}

/* ---------- OEM ---------- */
.oem-kicker { display: inline-block; margin: 0 0 .4em; padding: 4px 12px; border-radius: var(--r-pill); background: rgba(240, 138, 36, .15); color: var(--o600); font: 600 .85rem var(--f-head); letter-spacing: .02em; }
.ct-hero .oem-kicker { background: rgba(255, 255, 255, .16); color: #ffe2b8; }
.oem-checks { list-style: none; display: grid; gap: 10px; margin: 18px 0 24px; }
.oem-checks li { display: flex; align-items: center; gap: 10px; font-family: var(--f-head); font-weight: 500; color: var(--ink); }
.oem-checks .ic { width: 26px; height: 26px; padding: 4px; border-radius: 50%; background: var(--g700); color: #fff; stroke-width: 2.6; flex: none; }

/* ส่วน OEM หน้าแรก */
.oem-band { padding-block: var(--section); background: linear-gradient(120deg, #fffaf0 0%, #fdf1dc 55%, #f4f8ea 100%); overflow: hidden; }
.oem-band-grid { display: grid; gap: 32px; align-items: center; }
.oem-band-art { position: relative; width: min(460px, 100%); margin-inline: auto; }
.oem-band-art img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 28px; box-shadow: 0 24px 50px rgba(90, 60, 10, .22); }
.oem-tag {
  position: absolute; right: -10px; top: 18px; padding: 10px 18px; border-radius: 14px; rotate: 6deg;
  background: linear-gradient(145deg, var(--o500), var(--o600)); color: #fff; font: 700 1.5rem var(--f-head); letter-spacing: .06em;
  box-shadow: 0 10px 24px rgba(212, 93, 20, .35);
}
.oem-band-copy h2 { font-size: var(--fs-xl); font-weight: 700; line-height: 1.25; margin-bottom: .4em; }
.oem-band-copy h2 span { color: var(--o600); }
.oem-band-copy > p { color: var(--muted); font-size: var(--fs-md); max-width: 52ch; }
@media (min-width: 900px) { .oem-band-grid { grid-template-columns: 1fr 1.15fr; gap: 56px; } }

/* หน้า OEM */
.oem-hero h1 { line-height: 1.25; }
.oem-hero-art { display: none; }
.oem-hero-art img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 8px solid rgba(255, 255, 255, .85); box-shadow: 0 20px 50px rgba(0, 30, 10, .4); animation: hf-bob 6s ease-in-out infinite; }
@media (min-width: 900px) { .oem-hero-art { display: block; width: min(360px, 100%); justify-self: center; } }
.oem-card-p { color: var(--muted); font-size: var(--fs-sm); line-height: 1.55; margin: 4px 0 0; }
.oem-offers .ct-card strong { font-size: var(--fs-md); }
/* ขั้นตอนการสั่งผลิต — ไทม์ไลน์เด่นบนพื้นเขียวเข้ม (มือถือแนวตั้ง / จอใหญ่แนวนอน) */
.oem-process {
  position: relative; overflow: hidden; color: #fff; padding-block: clamp(64px, 9vw, 110px);
  background:
    radial-gradient(60% 80% at 12% 0%, rgba(124, 192, 74, .35) 0%, rgba(124, 192, 74, 0) 70%),
    radial-gradient(50% 70% at 100% 100%, rgba(240, 138, 36, .22) 0%, rgba(240, 138, 36, 0) 70%),
    linear-gradient(135deg, #0f3a1b 0%, #1a6630 55%, #1f7a35 100%);
}
.op-leaf-1 { width: 130px; left: -34px; top: 40px; opacity: .22; transform: rotate(30deg); }
.op-leaf-2 { width: 64px; right: 5%; bottom: 36px; opacity: .45; transform: rotate(-20deg); }
.op-head { position: relative; text-align: center; max-width: 760px; margin: 0 auto 44px; }
.op-kicker {
  display: inline-block; margin: 0 0 14px; padding: 6px 18px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .28); color: #ffe2b8; font: 600 .95rem var(--f-head);
}
.op-head h2 { color: #fff; font-size: clamp(2rem, 1.3rem + 3vw, 3.3rem); font-weight: 700; line-height: 1.2; margin-bottom: .25em; }
.op-sub { color: rgba(255, 255, 255, .88); font-size: var(--fs-md); margin: 0; }

.op-steps { position: relative; list-style: none; display: grid; gap: 22px; }
.op-steps::before { /* เส้นเชื่อมขั้นตอน */
  content: ""; position: absolute; left: 34px; top: 36px; bottom: 36px; width: 4px; border-radius: 4px;
  background: linear-gradient(#f5a04a, rgba(255, 255, 255, .35));
}
.op-step { position: relative; display: grid; grid-template-columns: 72px 1fr; gap: 18px; align-items: start; }
.op-marker {
  position: relative; z-index: 1; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: var(--g700); box-shadow: 0 0 0 6px rgba(255, 255, 255, .14), 0 12px 28px rgba(0, 0, 0, .28);
  transition: transform .25s ease;
}
.op-step:hover .op-marker { transform: scale(1.07) rotate(-4deg); }
.op-ic .ic { width: 32px; height: 32px; stroke-width: 1.7; }
.op-num {
  position: absolute; top: -6px; right: -6px; width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(145deg, var(--o500), var(--o600)); color: #fff; font: 700 1rem/30px var(--f-head); text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .25);
}
.op-body {
  height: 100%; padding: 18px 20px; border-radius: 18px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background .25s;
}
.op-step:hover .op-body { background: rgba(255, 255, 255, .13); }
.op-label { display: block; margin-bottom: 4px; color: #ffd08a; font: 600 .8rem var(--f-head); letter-spacing: .06em; }
.op-body h3 { color: #fff; font-size: 1.25rem; font-weight: 600; line-height: 1.35; margin-bottom: .35em; }
.op-body p { color: rgba(255, 255, 255, .86); font-size: .98rem; line-height: 1.6; margin: 0; }
.op-cta { text-align: center; margin-top: 44px; }
@media (min-width: 1024px) {
  .op-steps { grid-template-columns: repeat(var(--n), 1fr); gap: 20px; }
  .op-steps::before {
    left: calc(100% / var(--n) / 2); right: calc(100% / var(--n) / 2); top: 46px; bottom: auto; width: auto; height: 4px;
    background: linear-gradient(90deg, #f5a04a, rgba(255, 255, 255, .45));
  }
  .op-step { grid-template-columns: 1fr; grid-template-rows: auto 1fr; justify-items: center; text-align: center; gap: 22px; }
  .op-body { width: 100%; }
  .op-marker { width: 96px; height: 96px; }
  .op-ic .ic { width: 42px; height: 42px; }
  .op-num { width: 36px; height: 36px; font-size: 1.1rem; line-height: 36px; }
  .op-body { padding: 20px 16px 22px; }
  .op-body h3 { font-size: 1.15rem; }
}
.oem-fit { background: var(--g50); }
.oem-fit-grid { display: grid; gap: 28px; align-items: start; }
.oem-note { background: var(--paper); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--shadow-sm); border-top: 4px solid var(--o500); }
.oem-note h3 { font-size: var(--fs-md); }
.oem-note ul { padding-left: 1.2em; margin-bottom: 12px; color: var(--ink); }
.oem-note p { color: var(--muted); font-size: var(--fs-sm); margin: 0; }
@media (min-width: 860px) { .oem-fit-grid { grid-template-columns: 1.2fr 1fr; } }

/* ---------- product card: กดแล้วไป LINE ---------- */
.pc-media { position: relative; overflow: hidden; }
.pc-media img { transition: transform .35s ease; }
.product-card:hover .pc-media img { transform: scale(1.05); }
.pc-line-hint {
  position: absolute; left: 50%; bottom: 12px; translate: -50% 0;
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--r-pill);
  background: var(--line-brand); color: #06361a; font: 600 .85rem var(--f-head); white-space: nowrap;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .18); opacity: 0; transition: opacity .2s, translate .2s;
}
.pc-line-hint .ic { width: 20px; height: 20px; }
.product-card:hover .pc-line-hint { opacity: 1; translate: -50% -4px; }
.pc-order { width: 100%; margin-top: 10px; min-height: 44px; font-size: var(--fs-sm); padding-inline: .6em; gap: .35em; } /* การ์ดแคบบนมือถือ 360px */
.pc-detail { align-self: center; margin-top: 8px; font-size: var(--fs-sm); color: var(--muted); text-decoration: none; }
.pc-detail:hover { color: var(--g700); text-decoration: underline; }
@media (hover: none) { .pc-line-hint { display: none; } }
.oem-standards { padding-block: 40px 8px; }
.oem-std-list { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.oem-std-list li { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: var(--r-pill); background: #fff8e8; border: 1px solid #f1d9a6; font: 600 var(--fs-base) var(--f-head); color: var(--g900); }
.oem-std-list .ic { width: 20px; height: 20px; color: #b8860b; stroke-width: 2.6; }
.oem-hero h1 { font-size: clamp(1.55rem, 1rem + 2.2vw, 2.55rem); }

/* หมวด/สูตรน้อย (≤3) — การ์ดใหญ่ขึ้นและจัดกึ่งกลาง แทนการเว้นที่ว่าง */
.cat-grid.few { grid-template-columns: repeat(var(--n), minmax(0, 260px)); justify-content: center; gap: 20px; }
.cat-grid.few .cat-name { font-size: var(--fs-lg); }
.cat-grid.few .cat-tag { font-size: var(--fs-sm); }
@media (max-width: 639px) { .cat-grid.few { grid-template-columns: repeat(min(var(--n), 2), minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .polaroids.few { grid-template-columns: repeat(var(--n), minmax(0, 210px)); justify-content: center; gap: 28px; }
}