@import url("/assets/fonts/fonts.css");

/* =============================================================
   แม่สายหยกค้าส่ง — Design System (light mode only)
   Headings: Prompt · Body: Sarabun
   ============================================================= */

:root {
  /* Brand palette — jade + gold on cream */
  --jade-900: #08402f;
  --jade-800: #0a4d38;
  --jade-700: #0d6446;
  --jade-600: #107a54;
  --jade-500: #189065;
  --jade-400: #3fae86;
  --jade-200: #bfe3d3;
  --jade-100: #e7f3ee;
  --jade-50:  #f3f9f6;

  --gold-700: #a6821c;
  --gold-600: #c9a227;
  --gold-500: #d8b23f;
  --gold-300: #e9d488;
  --gold-100: #f7efd4;

  /* lavender jade — used by the belief-card colour icons */
  --lav-600: #7e5aa8;
  --lav-200: #ded0ef;
  --lav-100: #f2ecfa;

  --line-green: #06c755;
  --line-green-dark: #05a948;

  --cream: #fbf8f2;
  --cream-2: #f5efe3;
  --white: #ffffff;
  --ink: #1b2621;
  --ink-soft: #33423b;
  --muted: #5f6f67;
  --muted-2: #8a988f;
  --border: #e7e1d4;
  --border-strong: #d7cfbd;
  --danger: #b4472f;
  --star: #e6a817;

  /* Semantic */
  --bg: var(--cream);
  --surface: var(--white);
  --text: var(--ink);
  --text-muted: var(--muted);
  --primary: var(--jade-600);
  --primary-dark: var(--jade-800);
  --accent: var(--gold-600);

  /* Type scale (fluid) */
  --font-head: "Prompt", system-ui, sans-serif;
  --font-body: "Sarabun", system-ui, sans-serif;
  --fs-900: clamp(2.15rem, 1.55rem + 2.9vw, 3.75rem);
  --fs-800: clamp(1.8rem, 1.35rem + 2.1vw, 2.9rem);
  --fs-700: clamp(1.5rem, 1.2rem + 1.45vw, 2.25rem);
  --fs-600: clamp(1.3rem, 1.12rem + 0.9vw, 1.75rem);
  --fs-500: clamp(1.14rem, 1.05rem + 0.42vw, 1.35rem);
  --fs-400: clamp(1rem, 0.97rem + 0.16vw, 1.075rem);
  --fs-300: 0.94rem;
  --fs-200: 0.84rem;

  /* Spacing scale */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem;
  --sp-9: 6rem; --sp-10: 8rem;

  --container: 1200px;
  --container-wide: 1360px;
  --container-narrow: 760px;

  --radius-sm: 8px; --radius: 14px; --radius-lg: 22px; --radius-xl: 30px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(16,42,32,.06);
  --shadow-sm: 0 2px 8px rgba(16,42,32,.07);
  --shadow: 0 10px 30px -12px rgba(16,42,32,.20);
  --shadow-lg: 0 26px 60px -22px rgba(16,42,32,.30);
  --shadow-gold: 0 10px 30px -10px rgba(201,162,39,.45);

  --ring: 0 0 0 3px rgba(16,122,84,.28);
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .45s;
  --header-h: 72px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
body {
  font-family: var(--font-body);
  font-size: var(--fs-400);
  line-height: 1.72;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
img { object-fit: cover; }
a { color: var(--primary-dark); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--primary); }
ul, ol { padding-left: 1.25rem; }
li { margin: .3rem 0; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; }
::selection { background: var(--jade-200); color: var(--jade-900); }
hr { border: none; border-top: 1px solid var(--border); margin: var(--sp-6) 0; }

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); font-weight: 600; line-height: 1.18; color: var(--ink); letter-spacing: -0.01em; }
h1 { font-size: var(--fs-900); font-weight: 700; }
h2 { font-size: var(--fs-800); }
h3 { font-size: var(--fs-600); }
h4 { font-size: var(--fs-500); }
p { margin: 0 0 1rem; max-width: 72ch; }
.lead { font-size: var(--fs-500); color: var(--ink-soft); line-height: 1.7; }
strong, b { font-weight: 600; color: var(--ink); }
small { font-size: var(--fs-200); }
.eyebrow { font-family: var(--font-head); font-weight: 600; font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-700); display: inline-flex; align-items: center; gap: .5rem; }
.text-gold { color: var(--gold-700); }
.text-jade { color: var(--primary); }
.text-gradient { background: linear-gradient(100deg, var(--jade-700), var(--gold-600)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.container-wide { max-width: var(--container-wide); }
.container-narrow { max-width: var(--container-narrow); }
.section { padding-block: clamp(3rem, 7vw, 6rem); }
.section-sm { padding-block: clamp(2rem, 4vw, 3.5rem); }
.section-tint { background: var(--jade-50); }
.section-cream { background: var(--cream-2); }
.section-dark { background: linear-gradient(160deg, var(--jade-900), var(--jade-700)); color: #eaf5ef; }
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; }
.section-dark p { color: #cbe4d8; }

.grid { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.flow > * + * { margin-top: var(--sp-4); }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.stack-sm > * + * { margin-top: var(--sp-3); }

.section-head { max-width: 68ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head.center { margin-inline: auto; }
.section-head h1, .section-head h2 { margin-bottom: .6rem; }
.section-head p { color: var(--text-muted); }

/* ---------- Buttons ---------- */
.btn { --btn-bg: var(--jade-600); --btn-fg: #fff; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; font-family: var(--font-head); font-weight: 600; font-size: 1rem; line-height: 1; padding: .95rem 1.6rem; border-radius: var(--radius-pill); background: var(--btn-bg); color: var(--btn-fg); box-shadow: var(--shadow-sm); transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease); white-space: nowrap; text-align: center; }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }
.btn:hover { color: var(--btn-fg); transform: translateY(-2px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); }
.btn-line { --btn-bg: var(--line-green); box-shadow: 0 8px 22px -8px rgba(6,199,85,.6); }
.btn-line:hover { --btn-bg: var(--line-green-dark); }
.btn-phone { --btn-bg: var(--white); --btn-fg: var(--jade-800); border: 1.5px solid var(--border-strong); box-shadow: var(--shadow-xs); }
.btn-phone:hover { --btn-fg: var(--jade-800); border-color: var(--jade-400); background: var(--jade-50); }
.btn-gold { --btn-bg: linear-gradient(120deg, var(--gold-600), var(--gold-500)); --btn-fg: #3b2f07; box-shadow: var(--shadow-gold); }
.btn-outline { --btn-bg: transparent; --btn-fg: var(--jade-800); border: 1.5px solid var(--jade-400); box-shadow: none; }
.btn-outline:hover { --btn-bg: var(--jade-600); --btn-fg: #fff; }
/* On dark bands the default jade-800 label is near-invisible against the
   background, so the outline button inverts to a light-on-dark treatment. */
.section-dark .btn-outline,
.section-emerald .btn-outline,
.hero-luxe .btn-outline { --btn-fg: #fff; border-color: rgba(255,255,255,.45); }
.section-dark .btn-outline:hover,
.section-emerald .btn-outline:hover,
.hero-luxe .btn-outline:hover { --btn-bg: rgba(255,255,255,.12); --btn-fg: #fff; border-color: var(--gold-300); }
.btn-ghost { --btn-bg: transparent; --btn-fg: var(--jade-800); box-shadow: none; }
.btn-ghost:hover { --btn-bg: var(--jade-100); }
.btn-lg { padding: 1.1rem 2rem; font-size: 1.08rem; }
.btn-sm { padding: .65rem 1.1rem; font-size: .92rem; }
.btn-block { width: 100%; }
/* Row-gap is larger than column-gap so buttons only gain breathing room once
   they wrap or stack; side-by-side rows keep the tighter .8rem rhythm. */
.btn-group,
.cta-group { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem .8rem; }

/* ---------- Badges / chips ---------- */
.badge { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-head); font-weight: 500; font-size: .8rem; padding: .35rem .8rem; border-radius: var(--radius-pill); background: var(--jade-100); color: var(--jade-800); }
.badge-gold { background: var(--gold-100); color: var(--gold-700); }
.badge-outline { background: transparent; border: 1px solid var(--border-strong); color: var(--ink-soft); }
.chip-row { display: flex; flex-wrap: wrap; gap: .55rem; }

/* ---------- Cards ---------- */
.card { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.card-media, .card-body { display: block; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--jade-200); }
.card-body { padding: clamp(1.1rem, 2.5vw, 1.6rem); }
.card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--jade-50); }
.card-media img { width: 100%; height: 100%; transition: transform .6s var(--ease); }
.card:hover .card-media img { transform: scale(1.06); }

/* Product card */
.product-card { display: flex; flex-direction: column; height: 100%; }
.product-card .card-media { aspect-ratio: 1 / 1; }
.product-card h2, .product-card h3 { font-size: 1.1rem; margin-bottom: .3rem; }
.product-card .price { font-family: var(--font-head); font-weight: 700; color: var(--jade-700); font-size: 1.15rem; }
.product-card .price .unit { font-weight: 400; font-size: .85rem; color: var(--muted); }
.product-card .card-body { display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.product-card .card-foot { margin-top: auto; }
.tag-float { position: absolute; top: .8rem; left: .8rem; z-index: 2; }

/* Feature / value cards */
.feature { padding: clamp(1.3rem, 3vw, 1.9rem); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); transition: transform .3s var(--ease), box-shadow .3s var(--ease); height: 100%; }
.feature:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.feature .icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 14px; background: var(--jade-100); color: var(--jade-700); margin-bottom: 1rem; }
.feature .icon svg { width: 28px; height: 28px; }
.feature h3 { font-size: 1.18rem; margin-bottom: .4rem; }
.feature p { color: var(--text-muted); font-size: .98rem; margin: 0; }

/* ---------- Header / Nav ---------- */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(251,248,242,.85); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--border); transition: box-shadow .3s var(--ease), background .3s var(--ease); }
.site-header.scrolled { box-shadow: var(--shadow-sm); background: rgba(251,248,242,.95); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-head); font-weight: 700; font-size: 1.12rem; color: var(--jade-800); }
.brand:hover { color: var(--jade-700); }
.brand img { width: 42px; height: 42px; border-radius: 50%; }
.brand .brand-name { line-height: 1.1; white-space: nowrap; }
.brand .brand-name small { display: block; font-family: var(--font-body); font-weight: 400; font-size: .68rem; letter-spacing: .04em; color: var(--muted); }

.nav-menu { display: flex; align-items: center; gap: .3rem; }
.nav-menu > li { list-style: none; margin: 0; position: relative; }
.nav-link { display: inline-flex; align-items: center; gap: .3rem; font-family: var(--font-head); font-weight: 500; font-size: .96rem; color: var(--ink-soft); padding: .55rem .8rem; border-radius: var(--radius-pill); transition: background .2s, color .2s; }
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--jade-800); background: var(--jade-100); }
.nav-link[aria-expanded] svg { transition: transform .25s var(--ease); }
.nav-link[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Dropdown (desktop hover / mobile toggle) */
.has-dropdown .dropdown { position: absolute; top: calc(100% + 8px); left: 0; min-width: 240px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: .5rem; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s; list-style: none; z-index: 5; }
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown li { margin: 0; }
.dropdown a { display: block; padding: .6rem .8rem; border-radius: 8px; font-size: .94rem; color: var(--ink-soft); }
.dropdown a:hover { background: var(--jade-50); color: var(--jade-800); }
.nav-actions { display: flex; align-items: center; gap: .6rem; }
.nav-actions .btn { padding: .7rem 1.2rem; }

/* Dropdown parent + mobile submenu toggle */
.nav-parent { display: flex; align-items: center; }
.submenu-toggle { display: none; width: 40px; height: 40px; border-radius: 10px; place-items: center; color: var(--ink-soft); }
.submenu-toggle svg { width: 20px; height: 20px; transition: transform .3s var(--ease); }
.has-dropdown.open .submenu-toggle svg { transform: rotate(180deg); }
.nav-link .caret { width: 16px; height: 16px; }
@media (max-width: 1099.98px) {
  .nav-parent { justify-content: space-between; }
  .submenu-toggle { display: grid; }
  .nav-link .caret { display: none; }
}

.nav-toggle { display: none; width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--surface); place-items: center; }
.nav-toggle span { position: relative; width: 22px; height: 2px; background: var(--jade-800); border-radius: 2px; transition: background .2s; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: var(--jade-800); border-radius: 2px; transition: transform .3s var(--ease), top .3s var(--ease); }
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
body.menu-open .nav-toggle span { background: transparent; }
body.menu-open .nav-toggle span::before { top: 0; transform: rotate(45deg); }
body.menu-open .nav-toggle span::after { top: 0; transform: rotate(-45deg); }

.menu-backdrop { position: fixed; inset: 0; background: rgba(11,42,32,.45); opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s; z-index: 120; }
body.menu-open .menu-backdrop { opacity: 1; visibility: visible; }
/* the sticky header creates a stacking context (z-index + backdrop-filter),
   which would trap the fixed off-canvas .nav-menu below the backdrop.
   Lift the whole header above the backdrop while the menu is open. */
body.menu-open .site-header { z-index: 130; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; }
.hero-inner { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; padding-block: clamp(2.5rem, 6vw, 5rem); }
.hero h1 { margin-bottom: 1rem; }
.hero .lead { margin-bottom: 1.6rem; max-width: 54ch; }
.hero-media { position: relative; }
.hero-media img { width: 100%; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); aspect-ratio: 3 / 2; }
.hero-badges { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }

/* Decorative blobs */
.blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; z-index: 0; pointer-events: none; }
.blob-jade { background: radial-gradient(circle, var(--jade-200), transparent 70%); }
.blob-gold { background: radial-gradient(circle, var(--gold-100), transparent 70%); }

/* ---------- Breadcrumb ---------- */
.breadcrumb { padding-block: .9rem; font-size: .88rem; }
.breadcrumb ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; color: var(--muted); }
.breadcrumb li { margin: 0; display: inline-flex; align-items: center; gap: .35rem; }
.breadcrumb li:not(:last-child)::after { content: "›"; color: var(--muted-2); }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--jade-700); }
.breadcrumb [aria-current] { color: var(--ink-soft); font-weight: 500; }

/* ---------- Trust bar ---------- */
.trust-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2rem; padding-block: clamp(1.1rem, 3vw, 1.8rem); border-block: 1px solid var(--border); background: var(--jade-50); }
.trust-bar > .container { width: 100%; }
.trust-bar .item, .trust-bar li { display: inline-flex; align-items: center; gap: .5rem; font-size: .95rem; color: var(--ink-soft); font-weight: 500; margin: 0; }
.trust-bar ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem 2rem; }
.trust-bar svg { width: 22px; height: 22px; color: var(--jade-600); flex: none; }

/* ---------- Stat ---------- */
.stat { text-align: center; }
.stat .num { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); color: var(--jade-700); line-height: 1; }
.stat .label { color: var(--text-muted); font-size: .92rem; margin-top: .35rem; }

/* ---------- Accordion (FAQ) ---------- */
.accordion { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.accordion + .accordion { margin-top: .8rem; }
.accordion summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.4rem; font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; color: var(--ink); }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary .acc-q { margin: 0; font: inherit; color: inherit; letter-spacing: inherit; line-height: inherit; }
.accordion summary .plus { flex: none; width: 26px; height: 26px; position: relative; }
.accordion summary .plus::before, .accordion summary .plus::after { content: ""; position: absolute; inset: 0; margin: auto; background: var(--jade-600); border-radius: 2px; transition: transform .3s var(--ease); }
.accordion summary .plus::before { width: 14px; height: 2px; }
.accordion summary .plus::after { width: 2px; height: 14px; }
.accordion[open] summary .plus::after { transform: rotate(90deg); opacity: 0; }
.accordion .acc-body { padding: 0 1.4rem 1.3rem; color: var(--ink-soft); }
.accordion .acc-body p:last-child { margin-bottom: 0; }

/* ---------- Table ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
table.data { width: 100%; border-collapse: collapse; min-width: 420px; }
table.data th, table.data td { padding: .85rem 1rem; text-align: left; border-bottom: 1px solid var(--border); }
table.data th { font-family: var(--font-head); font-weight: 600; background: var(--jade-50); color: var(--jade-800); font-size: .92rem; }
table.data tr:last-child td { border-bottom: none; }

/* ---------- Prose (article content) ---------- */
.prose { max-width: 72ch; }
.prose h2 { margin-top: 2.4rem; margin-bottom: .8rem; }
.prose h3 { margin-top: 1.8rem; margin-bottom: .5rem; }
.prose p, .prose ul, .prose ol { margin-bottom: 1.1rem; }
.prose ul { padding-left: 1.3rem; }
.prose li::marker { color: var(--gold-600); }
.prose img { border-radius: var(--radius); margin: 1.5rem 0; box-shadow: var(--shadow-sm); }
.prose blockquote { border-left: 4px solid var(--gold-500); background: var(--jade-50); padding: 1rem 1.3rem; border-radius: 0 var(--radius) var(--radius) 0; margin: 1.5rem 0; font-style: italic; color: var(--ink-soft); }
.callout { display: flex; gap: .9rem; padding: 1.1rem 1.3rem; border-radius: var(--radius); background: var(--gold-100); border: 1px solid var(--gold-300); margin: 1.5rem 0; }
.callout svg { flex: none; width: 24px; height: 24px; color: var(--gold-700); margin-top: .15rem; }
.callout.jade { background: var(--jade-50); border-color: var(--jade-200); }
.callout.jade svg { color: var(--jade-600); }
/* A callout that puts a .cta-group beside its copy has two competing columns:
   the buttons are white-space:nowrap so they never shrink, and the copy absorbs
   every pixel lost — Thai breaks per word, so it collapses to one word per line
   long before the buttons do. Give the copy the full width and drop the buttons
   below it from the tablet breakpoint down. The inline margin-top on .cta-group
   supplies the row gap, so zero out the flex gap to avoid doubling it. */
@media (max-width: 991px) {
  .callout:has(> .cta-group) { flex-direction: column; gap: 0; }
}
/* Below the phone breakpoint the callout's inner width falls under the LINE
   button's ~300px nowrap intrinsic width, so it can't shrink and spills past
   the box's right edge. Give each button the full row and let the label wrap. */
@media (max-width: 575px) {
  .callout:has(> .cta-group) .cta-group { flex-direction: column; align-items: stretch; }
  .callout:has(> .cta-group) .cta-group .btn { width: 100%; white-space: normal; }
}

/* ---------- Table of contents ---------- */
.toc { background: var(--jade-50); border: 1px solid var(--jade-200); border-radius: var(--radius-lg); padding: 1.3rem 1.5rem; }
.toc h2 { font-size: 1.1rem; margin-bottom: .6rem; }
.toc ol { margin: 0; padding-left: 1.1rem; }
.toc a { color: var(--jade-800); }

/* ---------- Reviews ---------- */
.stars { display: inline-flex; gap: 2px; color: var(--star); }
.stars svg { width: 18px; height: 18px; }
.review-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--shadow-xs); height: 100%; }
.review-card p { font-size: .98rem; }
.review-author { display: flex; align-items: center; gap: .7rem; margin-top: 1rem; }
.review-author .avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--jade-100); color: var(--jade-700); display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; }

/* ---------- Steps ---------- */
.steps { counter-reset: step; display: grid; gap: 1.2rem; list-style: none; padding: 0; margin: 0; }
.step { position: relative; padding-left: 4rem; }
.step::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--jade-600), var(--jade-800)); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; display: grid; place-items: center; box-shadow: var(--shadow-sm); }
.step h3 { font-size: 1.15rem; margin-bottom: .25rem; }
.step p { margin: 0; color: var(--text-muted); }

/* ---------- Footer ---------- */
/* The darkest band on the site — it reads as the ground the page sits on, so it
   must stay well below .section-emerald (#083b27) and .section-dark (#0d6446),
   which are what land on top of it. 180deg, not an angle: an angled gradient
   varies along the top edge, and against the angled .section-emerald above it
   the seam inverted partway across the width and vanished where they crossed. */
.site-footer { position: relative; background: linear-gradient(180deg, #031a14, #02120c); color: #cfe6db; padding-block: clamp(3rem, 6vw, 4.5rem) 0; }
/* Hue break to define the seam, not just a value step — same gold hairline as
   .info-tile::before / .belief-card::before, faded at both ends since this one
   spans the full bleed rather than a card. */
.site-footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-600) 22%, var(--gold-300) 50%, var(--gold-600) 78%, transparent);
  opacity: .55;
}
.site-footer a { color: #cfe6db; }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; gap: 2.5rem; grid-template-columns: 1.6fr repeat(3, 1fr); }
.footer-brand .brand { color: #fff; }
.footer-brand .brand .brand-name small { color: #9fc4b5; }
.footer-brand p { color: #a9cabc; font-size: .94rem; max-width: 34ch; }
.footer-col h4 { color: #fff; font-size: 1rem; margin-bottom: 1rem; }
.footer-col ul { list-style: none; padding: 0; }
.footer-col li { margin: .5rem 0; }
.footer-col a { font-size: .94rem; }
.footer-social { display: flex; gap: .6rem; margin-top: 1rem; }
.footer-social a { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.08); display: grid; place-items: center; transition: background .2s, transform .2s; }
.footer-social a:hover { background: var(--jade-500); transform: translateY(-2px); }
.footer-social svg { width: 20px; height: 20px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 2.5rem; padding-block: 1.4rem; display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; justify-content: space-between; align-items: center; font-size: .86rem; color: #92b3a5; }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; }

/* ---------- Sticky chat FAB ---------- */
.chat-fab { position: fixed; right: clamp(1rem, 3vw, 1.6rem); bottom: clamp(1rem, 3vw, 1.6rem); z-index: 90; display: flex; flex-direction: column-reverse; align-items: flex-end; gap: .8rem; }
.chat-actions { display: flex; flex-direction: column; gap: .7rem; align-items: flex-end; }
.chat-item { display: flex; align-items: center; gap: .6rem; opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.chat-fab.open .chat-item { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.chat-fab.open .chat-item:nth-child(1) { transition-delay: .02s; }
.chat-fab.open .chat-item:nth-child(2) { transition-delay: .07s; }
.chat-fab.open .chat-item:nth-child(3) { transition-delay: .12s; }
.chat-item .lbl { background: var(--surface); color: var(--ink); font-family: var(--font-head); font-weight: 500; font-size: .86rem; padding: .4rem .8rem; border-radius: var(--radius-pill); box-shadow: var(--shadow); white-space: nowrap; }
.chat-btn { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; box-shadow: var(--shadow); color: #fff; transition: transform .25s var(--ease); flex: none; }
.chat-btn:hover { transform: scale(1.08); }
.chat-btn svg { width: 26px; height: 26px; }
.chat-btn.line { background: var(--line-green); }
.chat-btn.phone { background: var(--jade-600); }
.chat-btn.map { background: var(--gold-600); }
.chat-toggle { width: 62px; height: 62px; border-radius: 50%; background: linear-gradient(135deg, var(--line-green), var(--line-green-dark)); color: #fff; display: grid; place-items: center; box-shadow: 0 12px 30px -8px rgba(6,199,85,.6); transition: transform .3s var(--ease); position: relative; }
.chat-toggle:hover { transform: scale(1.06); }
.chat-toggle svg { width: 32px; height: 32px; transition: transform .3s var(--ease); }
.chat-fab.open .chat-toggle svg.ic-chat { display: none; }
.chat-toggle svg.ic-close { display: none; }
.chat-fab.open .chat-toggle svg.ic-close { display: block; }
.chat-toggle .pulse { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(6,199,85,.5); animation: pulse 2.4s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(6,199,85,.45); } 70% { box-shadow: 0 0 0 16px rgba(6,199,85,0); } 100% { box-shadow: 0 0 0 0 rgba(6,199,85,0); } }

/* ---------- Modal (LINE / lightbox) ---------- */
.modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 1.2rem; opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s; }
.modal.open { opacity: 1; visibility: visible; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(9,34,25,.55); backdrop-filter: blur(4px); }
.modal-card { position: relative; background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); max-width: 440px; width: 100%; padding: clamp(1.5rem, 4vw, 2.2rem); transform: translateY(16px) scale(.98); transition: transform .35s var(--ease); max-height: 92vh; overflow-y: auto; }
.modal.open .modal-card { transform: translateY(0) scale(1); }
.modal-close { position: absolute; top: 1rem; right: 1rem; width: 40px; height: 40px; border-radius: 50%; background: var(--jade-50); display: grid; place-items: center; color: var(--ink-soft); }
.modal-close:hover { background: var(--jade-100); }
.modal-close svg { width: 22px; height: 22px; }
.line-modal-head { text-align: center; margin-bottom: 1.2rem; }
.line-modal-head .li-logo { width: 58px; height: 58px; border-radius: 16px; background: var(--line-green); display: grid; place-items: center; margin: 0 auto .8rem; box-shadow: 0 8px 20px -6px rgba(6,199,85,.5); }
.line-modal-head .li-logo svg { width: 34px; height: 34px; color: #fff; }
.line-modal-head h3 { font-size: 1.35rem; }
.line-modal-head p { color: var(--text-muted); font-size: .94rem; margin: .35rem auto 0; max-width: 34ch; }
.qr-box { text-align: center; background: var(--jade-50); border: 1px solid var(--jade-200); border-radius: var(--radius-lg); padding: 1.2rem; margin-bottom: 1rem; }
.qr-box img { width: 190px; height: 190px; margin: 0 auto .6rem; border-radius: 12px; background: #fff; padding: 8px; border: 1px solid var(--border); }
.qr-box .hint { font-size: .86rem; color: var(--text-muted); margin: 0; }
.copy-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; background: var(--cream-2); border: 1px solid var(--border); border-radius: var(--radius); padding: .7rem .7rem .7rem 1rem; margin-bottom: .7rem; }
.copy-row .cr-label { font-size: .76rem; color: var(--muted); font-family: var(--font-head); letter-spacing: .04em; text-transform: uppercase; }
.copy-row .cr-value { font-weight: 600; color: var(--ink); word-break: break-word; }
.copy-row.msg .cr-value { font-weight: 400; font-size: .92rem; color: var(--ink-soft); }
.copy-btn { flex: none; display: inline-flex; align-items: center; gap: .35rem; background: var(--jade-600); color: #fff; font-family: var(--font-head); font-weight: 500; font-size: .84rem; padding: .5rem .85rem; border-radius: var(--radius-pill); transition: background .2s, transform .2s; }
.copy-btn:hover { background: var(--jade-700); }
.copy-btn.copied { background: var(--gold-600); }
.copy-btn svg { width: 15px; height: 15px; }
.line-modal-foot { margin-top: 1rem; }
.line-modal-foot .btn { width: 100%; }

/* ---------- Cookie banner ---------- */
.cookie-banner { position: fixed; left: clamp(1rem, 3vw, 1.5rem); right: clamp(1rem, 3vw, 1.5rem); bottom: clamp(1rem, 3vw, 1.5rem); z-index: 150; max-width: 640px; margin-inline: auto; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 1.2rem 1.4rem; transform: translateY(140%); transition: transform .5s var(--ease); }
.cookie-banner.show { transform: translateY(0); }
.cookie-banner p { font-size: .9rem; color: var(--ink-soft); margin: 0 0 .9rem; }
.cookie-banner .actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.cookie-banner .actions .btn { padding: .6rem 1.2rem; font-size: .9rem; }

/* ---------- Toast ---------- */
.toast-wrap { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 300; display: flex; flex-direction: column; gap: .5rem; align-items: center; pointer-events: none; }
.toast { background: var(--jade-800); color: #fff; padding: .7rem 1.2rem; border-radius: var(--radius-pill); font-size: .9rem; box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(12px); transition: opacity .3s, transform .3s; }
.toast.show { opacity: 1; transform: translateY(0); }

/* ---------- Back to top ---------- */
.to-top { position: fixed; left: clamp(1rem, 3vw, 1.6rem); bottom: clamp(1rem, 3vw, 1.6rem); z-index: 80; width: 46px; height: 46px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border-strong); color: var(--jade-700); display: grid; place-items: center; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .3s, transform .3s, visibility .3s; }
.to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top svg { width: 22px; height: 22px; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ---------- Utilities ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 1rem; top: -100px; z-index: 300; background: var(--jade-800); color: #fff; padding: .7rem 1.2rem; border-radius: var(--radius-pill); transition: top .2s; }
.skip-link:focus { top: 1rem; color: #fff; }
.divider-wave { display: block; width: 100%; height: auto; color: var(--cream); }
.hidden { display: none !important; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.pill-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.pill-list li { margin: 0; }
.pill-list a, .pill-list span { display: inline-block; padding: .45rem .9rem; border-radius: var(--radius-pill); background: var(--jade-50); border: 1px solid var(--jade-200); font-size: .9rem; color: var(--jade-800); }
.pill-list a:hover { background: var(--jade-100); }
.icon-list { list-style: none; padding: 0; }
.icon-list li { display: flex; align-items: flex-start; gap: .6rem; margin: .55rem 0; }
.icon-list svg { flex: none; width: 22px; height: 22px; color: var(--jade-600); margin-top: .2rem; }

/* ---------- Feature cards (icon list as cards) ---------- */
.feature-cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
@media (min-width: 640px) { .feature-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.feature-cards li {
  display: flex; align-items: flex-start; gap: 1rem; margin: 0;
  background: #fff; border: 1px solid var(--jade-200);
  border-radius: var(--radius-lg); padding: 1.15rem 1.25rem;
  box-shadow: var(--shadow-sm); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.feature-cards li:hover { border-color: var(--jade-400); box-shadow: var(--shadow); transform: translateY(-2px); }
.fc-icon {
  flex: none; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; color: var(--jade-700);
  background: linear-gradient(135deg, var(--jade-100), var(--jade-50));
  border: 1px solid var(--jade-200);
}
.fc-icon svg { width: 25px; height: 25px; }
.fc-body { margin: 0; color: var(--text-muted); line-height: 1.65; }
.fc-body strong { color: var(--jade-800); font-weight: 700; }

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (min-width: 992px) {
  .hero-inner { grid-template-columns: 1.05fr .95fr; }
  .hero-inner.reverse { direction: rtl; }
  .hero-inner.reverse > * { direction: ltr; }
}
@media (max-width: 991px) {
  :root { --header-h: 64px; }
}
@media (max-width: 1099.98px) {
  /* backdrop-filter makes the header the containing block for its
     position:fixed children. That collapses the open off-canvas .nav-menu to
     the header's own height, and turns the closed panel's translateX(100%)
     into real horizontal page overflow. Drop the blur below the nav
     breakpoint and go opaque, so the panel resolves against the viewport. */
  .site-header, .site-header.scrolled {
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: var(--cream);
  }
  .nav-toggle { display: grid; }
  .nav-actions .btn-phone { display: none; }
  /* the panel slides in beneath the header row (its top padding reserves the
     space), so the logo, LINE CTA and the close button must stay above it */
  .brand, .nav-actions { position: relative; z-index: 110; }
  .nav-menu {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(86vw, 360px);
    background: var(--surface); flex-direction: column; align-items: stretch; gap: .2rem;
    padding: calc(var(--header-h) + 1.2rem) 1.2rem 2rem; z-index: 109;
    transform: translateX(100%); transition: transform .4s var(--ease);
    overflow-y: auto; box-shadow: var(--shadow-lg); border-left: 1px solid var(--border);
  }
  body.menu-open .nav-menu { transform: translateX(0); }
  .nav-link { width: 100%; font-size: 1.05rem; padding: .85rem 1rem; justify-content: space-between; }
  .has-dropdown .dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; border-left: 2px solid var(--jade-200); border-radius: 0; margin: .2rem 0 .4rem 1rem; padding: 0; max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
  .has-dropdown.open .dropdown { max-height: 640px; }
  .has-dropdown > .nav-link { cursor: pointer; }
  .nav-menu .mobile-cta { margin-top: 1rem; display: grid; gap: .6rem; }
  .nav-menu .mobile-cta .btn { width: 100%; }
}
@media (min-width: 1100px) {
  .nav-menu .mobile-cta { display: none; }
  .has-dropdown > .nav-link .caret { pointer-events: none; }
}
@media (max-width: 767px) {
  .cols-4 { grid-template-columns: repeat(2, 1fr); }
  .cols-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .btn-group.hero-cta .btn { flex: 1 1 auto; }
  .trust-bar { gap: .8rem 1.2rem; }
}
@media (max-width: 575px) {
  .cols-2 { grid-template-columns: 1fr; }
  .cols-3, .cols-4 { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .btn-group.hero-cta { flex-direction: column; }
  .btn-group.hero-cta .btn { width: 100%; }
  .chat-item .lbl { display: none; }
  .modal-card { padding: 1.4rem 1.2rem; }
  .qr-box img { width: 168px; height: 168px; }
  /* LINE is the primary conversion path, so it stays in the header at every
     width; tighten it instead so the brand and hamburger still fit */
  .nav-actions { gap: .4rem; }
  .nav-actions .btn-line { padding: .6rem .85rem; font-size: .85rem; gap: .35rem; }
  .brand .brand-name small { display: none; }
  .brand img { width: 38px; height: 38px; }
}
@media (max-width: 419.98px) {
  .cols-3, .cols-4 { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
  .brand .brand-name { font-size: 1rem; }
}
@media (max-width: 359.98px) {
  /* not enough room for wordmark + LINE + hamburger; LINE wins, logo still brands */
  .brand .brand-name { display: none; }
}

/* =============================================================
   LUXE TOOLKIT — reference aesthetic (dark emerald + gold)
   Additive components; pages opt in. Light mode only.
   ============================================================= */
:root {
  --emerald-975: #04180f;
  --emerald-950: #062a1c;
  --emerald-900b: #083b27;
  --ink-wash: #f4efe4;
}

/* --- Decorative gold ornament divider (❖ with side rules) --- */
.ornament { display: flex; align-items: center; justify-content: center; gap: .7rem; color: var(--gold-600); margin: 0 auto .9rem; }
.ornament::before, .ornament::after { content: ""; height: 1px; width: clamp(28px, 6vw, 64px); background: linear-gradient(90deg, transparent, var(--gold-500)); }
.ornament::after { background: linear-gradient(90deg, var(--gold-500), transparent); }
.ornament svg, .ornament .rhombus { width: 16px; height: 16px; flex: none; }
.ornament .rhombus { background: var(--gold-500); transform: rotate(45deg); border-radius: 2px; box-shadow: 0 0 0 3px rgba(201,162,39,.16); }

/* --- Decorative section header (centered, gold eyebrow + ornament) --- */
.deco-head { text-align: center; max-width: 60ch; margin: 0 auto clamp(2rem,4vw,3.2rem); }
.deco-head .eyebrow { justify-content: center; letter-spacing: .22em; }
.deco-head h2 { font-size: clamp(1.7rem,1.2rem+2vw,2.7rem); }
/* A head that carries the page h1 sits one step above the h2 section heads
   without reaching the full --fs-900 display scale. */
.section-head h1, .deco-head h1 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.1rem); }
.deco-head p { color: var(--text-muted); margin-top: .5rem; }
.section-emerald .deco-head p { color: #b9d6c8; }

/* --- Emerald (dark) section --- */
.section-emerald { position: relative; background: linear-gradient(165deg, var(--emerald-950), var(--emerald-900b)); color: #e9f4ee; overflow: hidden; }
.section-emerald h1, .section-emerald h2, .section-emerald h3, .section-emerald h4 { color: #fff; }
.section-emerald p { color: #c4ddd0; }
/* strong/b default to --ink, which is near-black on the emerald band */
.section-emerald strong, .section-emerald b { color: #fff; }
.section-emerald .text-gold, .section-emerald .eyebrow { color: var(--gold-300); }
.section-emerald p a { color: var(--gold-300); text-decoration: underline; text-decoration-color: rgba(233,212,136,.5); text-underline-offset: .2em; }
.section-emerald p a:hover { color: var(--gold-100); text-decoration-color: var(--gold-100); }
.section-emerald::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 15% 20%, rgba(201,162,39,.10), transparent 40%), radial-gradient(circle at 85% 80%, rgba(63,174,134,.12), transparent 45%); pointer-events: none; }
.section-emerald > * { position: relative; z-index: 1; }

/* --- Luxe hero (dark emerald, gold serif-ish heading) --- */
.hero-luxe { position: relative; background: linear-gradient(160deg, var(--emerald-975), var(--emerald-900b) 70%); color: #eaf5ef; overflow: hidden; }
.hero-luxe::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 78% 42%, rgba(63,174,134,.20), transparent 55%), radial-gradient(circle at 12% 12%, rgba(201,162,39,.10), transparent 45%); pointer-events: none; }
.hero-luxe .hero-inner { position: relative; z-index: 1; }
.hero-luxe h1, .hero-luxe h2, .hero-luxe h3, .hero-luxe h4 { color: #fff; }
.hero-luxe h1 .accent, .hero-luxe h2 .accent, .hero-luxe .text-gradient { background: linear-gradient(100deg, var(--gold-300), var(--gold-600)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-luxe .lead, .hero-luxe p { color: #c8e0d5; }
/* Emphasis words inside the emerald hero must stay light, not near-black --ink */
.hero-luxe strong, .hero-luxe b { color: #fff; }
/* Product cards sit on a white card even though they live in .hero-luxe —
   keep their body text dark so it reads against the light card, not the mint hero default */
.hero-luxe .product-card p { color: var(--ink-soft); }
.hero-luxe .product-card strong, .hero-luxe .product-card b { color: var(--ink); }
.hero-luxe .eyebrow { color: var(--gold-300); }
.hero-luxe .hero-media img { box-shadow: 0 40px 90px -30px rgba(0,0,0,.65); }

/* --- Circular outlined icon badge (feature strip like reference) --- */
.icon-badge { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--gold-300); background: var(--white); color: var(--jade-700); margin: 0 auto 1rem; box-shadow: inset 0 0 0 4px rgba(247,239,212,.5); }
.icon-badge svg { width: 28px; height: 28px; }
.section-emerald .icon-badge, .hero-luxe .icon-badge { background: rgba(255,255,255,.04); border-color: rgba(233,212,136,.5); color: var(--gold-300); }
/* Trust strip: five icon+heading points. Never drops to one column — a single
   full-width badge per row reads as an empty band on narrow phones. */
.feature-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(1.2rem, 3vw, 2rem) 1rem; }
@media (max-width: 900px) { .feature-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) {
  .feature-strip { grid-template-columns: repeat(2, 1fr); }
  /* Odd item count strands the last one alone in column 1 — span the row so it centres.
     :last-child:nth-child(odd) matches only when the total count is odd. */
  .feature-strip > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.feature-lux { text-align: center; padding: 1rem; }
.feature-lux h3 { font-size: 1.12rem; margin-bottom: .3rem; }
.feature-lux p { color: var(--text-muted); font-size: .95rem; margin: 0; }

/* --- Gold outline button (for dark backgrounds) --- */
.btn-gold-outline { --btn-bg: transparent; --btn-fg: var(--gold-300); border: 1.5px solid var(--gold-500); box-shadow: none; }
.btn-gold-outline:hover { --btn-bg: var(--gold-600); --btn-fg: #2a2205; border-color: var(--gold-600); }

/* --- Luxe product card (full-width LINE order action) --- */
.product-card .card-foot { display: flex; flex-direction: column; align-items: stretch; gap: .7rem; }
.p-add { width: 100%; font-size: .95rem; padding: .78rem 1rem; gap: .45rem; }
.p-add svg { width: 1.1em; height: 1.1em; }
/* Cards run two-up between 420px and 575px, leaving little body width.
   Drop the icon there so the label still fits on one line. */
@media (min-width: 420px) and (max-width: 575px) {
  .p-add { font-size: .85rem; padding: .7rem .5rem; }
  .p-add svg { display: none; }
}
.product-card .p-sub { color: var(--text-muted); font-size: .9rem; margin: 0; }

/* --- Stats band (trust, with gold quote marks) --- */
.stats-band { background: var(--ink-wash); border-block: 1px solid var(--border); }
.stats-quote { text-align: center; font-family: var(--font-head); font-weight: 700; color: var(--gold-500); font-size: 2.4rem; line-height: 1; }
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; }
.stats-grid .stat { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.stats-grid .stat .ic { width: 46px; height: 46px; color: var(--gold-600); margin-bottom: .2rem; }
.stats-grid .stat .num { color: var(--jade-800); }
@media (max-width: 767px) { .stats-grid { grid-template-columns: repeat(2,1fr); gap: 1.8rem 1rem; } }
@media (max-width: 380px) { .stats-grid { grid-template-columns: 1fr; } }

/* --- Ink-wash soft backdrop utility --- */
.bg-wash { background: linear-gradient(180deg, var(--cream), var(--ink-wash)); }

/* --- Split feature row (alternating image/text, breaks text walls) --- */
.split { display: grid; gap: clamp(1.5rem,4vw,3.5rem); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } .split.reverse > .split-media { order: 2; } }
.split-media img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }

/* --- Overlay card (image with gradient + text over, reference cat style) --- */
.overlay-card { position: relative; display: block; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/5; box-shadow: var(--shadow); }
.overlay-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.overlay-card:hover img { transform: scale(1.06); }
.overlay-card .ov { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.2rem; background: linear-gradient(to top, rgba(4,24,15,.82), rgba(4,24,15,.15) 55%, transparent); color: #fff; }
.overlay-card .ov h3 { color: #fff; font-size: 1.25rem; margin: 0 0 .15rem; }
.overlay-card .ov p { color: #d8e8e0; font-size: .9rem; margin: 0; }
.overlay-card .ov .go { margin-top: .5rem; color: var(--gold-300); font-family: var(--font-head); font-weight: 500; font-size: .9rem; display: inline-flex; align-items: center; gap: .35rem; }

/* --- Drop cap intentionally disabled: Thai script combines vowels/tone marks
       with the base consonant, so a floated ::first-letter drop cap splits the
       cluster and overlaps the following lines. Not suitable for Thai text. --- */

/* --- Info tiles grid (for legal/policy pages instead of walls) --- */
.info-tiles { display: grid; gap: clamp(.85rem, 1.5vw, 1.15rem); grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); }
.info-tile {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 2.2vw, 1.5rem);
  box-shadow: var(--shadow-xs);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
/* gold hairline that reads as the old left rule, now across the top */
.info-tile::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--gold-600), var(--gold-300) 45%, transparent 92%);
}
.info-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--border-strong); }
.info-tile h3 { font-size: 1.05rem; margin-bottom: .35rem; color: var(--jade-800); }
.info-tile p { font-size: .95rem; color: var(--ink-soft); margin: 0; }

/* icon badge above the title */
.info-tile .icon {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  border-radius: 13px;
  margin-bottom: .85rem;
  background: linear-gradient(150deg, var(--jade-100), var(--jade-50));
  color: var(--jade-700);
  box-shadow: inset 0 0 0 1px rgba(201,162,39,.22);
  transition: background .3s var(--ease), color .3s var(--ease);
}
.info-tile .icon svg { width: 24px; height: 24px; }
.info-tile:hover .icon { background: linear-gradient(150deg, var(--jade-200), var(--jade-100)); color: var(--jade-800); }

/* on the emerald bands */
.section-emerald .info-tile { background: rgba(255,255,255,.045); border-color: rgba(233,212,136,.22); box-shadow: none; }
.section-emerald .info-tile:hover { border-color: rgba(233,212,136,.45); box-shadow: none; }
.section-emerald .info-tile h3 { color: #fff; }
.section-emerald .info-tile p { color: #c4ddd0; }
.section-emerald .info-tile .icon,
.section-emerald .info-tile:hover .icon { background: rgba(255,255,255,.06); color: var(--gold-300); box-shadow: inset 0 0 0 1px rgba(233,212,136,.35); }

@media (prefers-reduced-motion: reduce) { .info-tile, .info-tile:hover { transform: none; } }

/* --- Belief cards (ความเชื่อ / มงคล) — term lists with meaning icons --- */
.belief-grid {
  display: grid; align-items: start;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.belief-card {
  position: relative; overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(1.3rem, 2.4vw, 1.75rem);
  box-shadow: var(--shadow-xs);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
/* same gold hairline as .info-tile so the two read as one family */
.belief-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--gold-600), var(--gold-300) 45%, transparent 92%);
}
.belief-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--border-strong); }

.belief-head {
  display: flex; align-items: center; gap: .85rem;
  margin-bottom: 1.05rem; padding-bottom: .9rem;
  border-bottom: 1px solid var(--border);
}
.belief-head h3 { margin: 0; min-width: 0; font-size: 1.06rem; line-height: 1.5; color: var(--jade-800); }
.belief-card .icon {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border-radius: 13px;
  background: linear-gradient(150deg, var(--jade-100), var(--jade-50));
  color: var(--jade-700);
  box-shadow: inset 0 0 0 1px rgba(201,162,39,.22);
  transition: background .3s var(--ease), color .3s var(--ease);
}
.belief-card .icon svg { width: 23px; height: 23px; }
.belief-card:hover .icon { background: linear-gradient(150deg, var(--jade-200), var(--jade-100)); color: var(--jade-800); }
.belief-card > p { font-size: .95rem; line-height: 1.75; color: var(--ink-soft); }
.belief-card > p:last-child { margin-bottom: 0; }

.belief-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .72rem; }
.belief-list li {
  display: grid; grid-template-columns: 32px 1fr; gap: .78rem; align-items: start;
  font-size: .95rem; line-height: 1.7; color: var(--ink-soft);
}
.belief-list strong { font-family: var(--font-head); font-weight: 600; color: var(--jade-800); }
.belief-list a { font-weight: 600; }
/* per-item meaning icon; tinted to the jade colour it describes */
.belief-list .bi {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  border-radius: 10px; margin-top: .1rem;
  background: var(--jade-50); color: var(--jade-600);
  box-shadow: inset 0 0 0 1px var(--jade-200);
}
.belief-list .bi svg { width: 20px; height: 20px; }
.belief-list .bi.is-lavender { background: var(--lav-100); color: var(--lav-600); box-shadow: inset 0 0 0 1px var(--lav-200); }
.belief-list .bi.is-mint { background: var(--jade-50); color: var(--jade-400); box-shadow: inset 0 0 0 1px var(--jade-200); }
.belief-list .bi.is-clear { background: var(--cream); color: var(--gold-700); box-shadow: inset 0 0 0 1px var(--gold-300); }

/* on the emerald bands */
.section-emerald .belief-card { background: rgba(255,255,255,.045); border-color: rgba(233,212,136,.22); box-shadow: none; }
.section-emerald .belief-card:hover { border-color: rgba(233,212,136,.45); box-shadow: none; }
.section-emerald .belief-head { border-bottom-color: rgba(233,212,136,.2); }
.section-emerald .belief-head h3 { color: #fff; }
.section-emerald .belief-card > p { color: #c4ddd0; }
.section-emerald .belief-card .icon,
.section-emerald .belief-card:hover .icon { background: rgba(255,255,255,.06); color: var(--gold-300); box-shadow: inset 0 0 0 1px rgba(233,212,136,.35); }
.section-emerald .belief-list li { color: #c4ddd0; }
.section-emerald .belief-list strong { color: #fff; }
.section-emerald .belief-list .bi { background: rgba(255,255,255,.06); color: var(--jade-400); box-shadow: inset 0 0 0 1px rgba(63,174,134,.4); }
.section-emerald .belief-list .bi.is-lavender { background: rgba(255,255,255,.06); color: #cbb1ea; box-shadow: inset 0 0 0 1px rgba(203,177,234,.42); }
.section-emerald .belief-list .bi.is-mint { background: rgba(255,255,255,.06); color: #8fd8ba; box-shadow: inset 0 0 0 1px rgba(143,216,186,.42); }
.section-emerald .belief-list .bi.is-clear { background: rgba(255,255,255,.06); color: var(--gold-300); box-shadow: inset 0 0 0 1px rgba(233,212,136,.42); }

@media (max-width: 420px) {
  .belief-head { gap: .7rem; }
  .belief-card .icon { width: 38px; height: 38px; border-radius: 11px; }
  .belief-card .icon svg { width: 20px; height: 20px; }
}
@media (prefers-reduced-motion: reduce) { .belief-card, .belief-card:hover { transform: none; } }

/* --- Belief section footer: category links as chips ---
   Global `a` has text-decoration:none, so these read as plain text.
   The pill + icon + arrow gives them an unmistakable affordance. */
/* global `p` is capped at 72ch with margin 0, which pins this row to the left
   and lets text-align:center only centre text inside that narrow box */
.belief-links { max-width: none; margin-inline: auto; text-align: center; }
.belief-links .bl-lead { display: block; margin-bottom: .85rem; }
.belief-links .bl-chips { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .55rem; }
.belief-links .sep { display: none; } /* chips provide their own separation */
.belief-chip {
  display: inline-flex; align-items: center; gap: .48rem;
  padding: .42rem .8rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--jade-200);
  background: var(--surface);
  color: var(--jade-800);
  font-family: var(--font-head); font-weight: 600; font-size: .92rem; line-height: 1.5;
  box-shadow: var(--shadow-xs);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.belief-chip .ci { width: 18px; height: 18px; flex: none; color: var(--jade-600); transition: color .25s var(--ease); }
.belief-chip .arw { width: 15px; height: 15px; flex: none; opacity: .5; transition: transform .25s var(--ease), opacity .25s var(--ease); }
.belief-chip:hover { color: var(--jade-900); border-color: var(--jade-400); background: var(--jade-50); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.belief-chip:hover .ci { color: var(--jade-700); }
.belief-chip:hover .arw { transform: translateX(3px); opacity: 1; }
.belief-chip:focus-visible { outline: none; box-shadow: var(--ring); }

/* on the emerald bands */
.section-emerald .belief-chip { background: rgba(255,255,255,.06); border-color: rgba(233,212,136,.35); color: #fff; box-shadow: none; }
.section-emerald .belief-chip .ci { color: var(--gold-300); }
.section-emerald .belief-chip:hover { background: rgba(255,255,255,.13); border-color: var(--gold-300); color: #fff; }
.section-emerald .belief-chip:hover .ci { color: var(--gold-500); }

@media (prefers-reduced-motion: reduce) { .belief-chip, .belief-chip:hover { transform: none; } }

/* ── Product pages: narrow-width overflow guard ──────────────────────────────
   body{overflow-x:hidden} CLIPS anything wider than the viewport instead of
   scrolling it. The product hero can exceed the viewport when a grid track's
   `auto` floor equals its widest child and that child is a long, non-wrapping
   .btn (white-space:nowrap) — e.g. the "ทักแชท LINE สั่งซื้อ / ขอราคาส่ง" CTA.
   That single button then widens the whole column, clipping the h1, price,
   thumbnails and spec values alongside it.

   The product pages were authored independently, so the hero grid appears as
   .product-top / .product-layout / .product-hero / .product-grid, and the CTA
   stack as .buy-cta / .buy-box / .cta-group / .product-cta. Two rules cover
   them all: (1) let hero grid/flex items shrink below their content min-size,
   and (2) below the single-column breakpoint, let CTA copy wrap and stack
   full-width so no button can force the page wider than the screen. */
.product-top > *, .product-layout > *, .product-hero > *, .product-grid > *,
.product-gallery, .product-info, .product-media, .product-buy { min-width: 0; }

@media (max-width: 900px) {
  /* long CTA labels wrap instead of forcing horizontal overflow */
  .buy-cta .btn, .buy-box .btn, .cta-group .btn, .product-cta .btn,
  .btn-lg { white-space: normal; }
  /* the vertical CTA stacks go full-width for clean wrapped buttons */
  .buy-cta, .buy-box, .product-cta { display: flex; flex-direction: column; align-items: stretch; }
  .buy-cta > .btn, .buy-box > .btn, .product-cta > .btn { width: 100%; }
}