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

/* =========================================================================
   FRANKIN CHICK — Design System (light mode only)
   Headings: Prompt · Body: Sarabun
   ========================================================================= */
:root {
  /* Brand palette (sampled from logo + design reference) */
  --red: #c4151e;
  --red-600: #c4151e;
  --red-700: #9e0e16;
  --red-800: #7d0a11;
  --red-100: #fbe7e8;
  --red-50: #fdf2f2;
  --green: #4e9a26;
  --green-700: #3b7a1c;
  --green-100: #e8f4e0;
  --gold: #e8af4c;
  --gold-100: #fdf3df;
  --cream: #fbf7f4;
  --cream-200: #f4ece4;
  --paper: #ffffff;
  --ink: #2b2422;
  --ink-soft: #4a4340;
  --muted: #6f6862;
  --line: #ece3da;
  --line-strong: #ddd1c6;

  /* Semantic */
  --bg: var(--cream);
  --text: var(--ink);
  --primary: var(--red);

  /* Type scale (fluid) */
  --font-head: "Prompt", system-ui, sans-serif;
  --font-body: "Sarabun", system-ui, sans-serif;
  --fs-900: clamp(2.4rem, 1.6rem + 3.4vw, 4.2rem);
  --fs-800: clamp(2rem, 1.4rem + 2.6vw, 3.2rem);
  --fs-700: clamp(1.6rem, 1.2rem + 1.7vw, 2.4rem);
  --fs-600: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  --fs-500: clamp(1.15rem, 1rem + 0.5vw, 1.35rem);
  --fs-400: 1.0625rem;
  --fs-300: 0.9375rem;
  --fs-200: 0.8125rem;

  /* 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;

  /* Radii + shadows */
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px; --r-pill: 999px;
  --sh-1: 0 1px 3px rgba(43,36,34,.08), 0 1px 2px rgba(43,36,34,.06);
  --sh-2: 0 6px 18px rgba(43,36,34,.09);
  --sh-3: 0 16px 40px rgba(43,36,34,.14);
  --sh-red: 0 10px 26px rgba(196,21,30,.30);

  --wrap: 1180px;
  --header-h: 72px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- 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.75;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1, h2, h3, h4, h5 { font-family: var(--font-head); line-height: 1.2; font-weight: 600; color: var(--ink); text-wrap: balance; }
h1 { font-size: var(--fs-900); font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: var(--fs-800); font-weight: 700; }
h3 { font-size: var(--fs-600); }
h4 { font-size: var(--fs-500); }
p { text-wrap: pretty; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--red-700); text-underline-offset: 3px; }
ul, ol { padding-left: 1.2em; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--red-100); color: var(--red-800); }

/* ---------- Layout ---------- */
.wrap { width: min(100% - 2.4rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.4rem, 760px); margin-inline: auto; }
.section { padding-block: clamp(2.75rem, 5vw, 5.5rem); }
.section--tight { padding-block: clamp(2rem, 3.5vw, 3.25rem); }
.center { text-align: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--font-head); font-weight: 600; font-size: var(--fs-200);
  letter-spacing: .12em; text-transform: uppercase; color: var(--red);
  background: var(--red-50); padding: .4em 1em; border-radius: var(--r-pill);
}
.section-title { margin-top: .6rem; }
.section-lead { max-width: 56ch; margin-top: .9rem; color: var(--ink-soft); font-size: var(--fs-500); }
.center .section-lead { margin-inline: auto; }
.grid { display: grid; gap: clamp(1rem, 2.4vw, 1.75rem); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px){ .cols-4 { grid-template-columns: repeat(2,1fr); } .cols-3 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; } }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--red); --btn-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font-family: var(--font-head); font-weight: 600; font-size: var(--fs-400);
  line-height: 1; text-decoration: none; cursor: pointer;
  padding: .95em 1.6em; border: 0; border-radius: var(--r-pill);
  background: var(--btn-bg); color: var(--btn-fg);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
  box-shadow: var(--sh-1); white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.btn:active { transform: translateY(0); }
.btn--line { --btn-bg: #06c755; --btn-fg: #fff; box-shadow: 0 8px 20px rgba(6,199,85,.28); }
.btn--line:hover { --btn-bg: #05b34c; }
.btn--call { --btn-bg: #fff; --btn-fg: var(--red-700); box-shadow: inset 0 0 0 2px var(--line-strong), var(--sh-1); }
.btn--call:hover { --btn-bg: #fff; box-shadow: inset 0 0 0 2px var(--red), var(--sh-2); }
.btn--primary { --btn-bg: var(--red); box-shadow: var(--sh-red); }
.btn--primary:hover { --btn-bg: var(--red-700); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); box-shadow: inset 0 0 0 2px var(--line-strong); }
.btn--lg { padding: 1.05em 2em; font-size: var(--fs-500); }
.btn--block { display: flex; width: 100%; }
.btn-ico { width: 1.25em; height: 1.25em; flex: none; }
.cta-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.center .cta-row { justify-content: center; }
/* Long Thai labels must wrap rather than overflow their pill on narrow screens. */
@media (max-width: 620px) {
  .btn { white-space: normal; text-wrap: balance; max-width: 100%; padding-inline: 1.25em; }
  .btn--lg { font-size: var(--fs-400); padding: .95em 1.35em; }
  .cta-row > .btn { flex: 1 1 100%; }
}

/* ---------- Cards ---------- */
.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(1.25rem, 2.4vw, 1.9rem); box-shadow: var(--sh-1);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.card--hover:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: var(--red-100); }
.card__ico {
  width: 56px; height: 56px; display: grid; place-items: center;
  border-radius: var(--r-md); background: var(--red-50); color: var(--red); margin-bottom: .9rem;
}
.card__ico svg { width: 30px; height: 30px; }
.badge {
  display: inline-flex; align-items: center; gap: .4em; font-family: var(--font-head);
  font-weight: 600; font-size: var(--fs-200); padding: .35em .85em; border-radius: var(--r-pill);
  background: var(--green-100); color: var(--green-700);
}
.badge--gold { background: var(--gold-100); color: #9a6b12; }
.badge--red { background: var(--red-50); color: var(--red-700); }

/* ---------- Menu card (one dish = one photo) ----------
   Photo-led variant of .card used for individual menu items. The dish photo
   carries the card, so padding moves off the article and onto __body, and the
   kcal badge rides on the image over a scrim instead of sitting beside the
   title. Cards in a row must line up, hence flex column + margin-top:auto on
   the macro strip: titles wrap to two lines for the longer Thai flavour names
   (ซอสเผ็ดเกาหลี, น้ำพริกอ่อง) and the macros would otherwise float mid-card. */
.menu-card {
  display: flex; flex-direction: column; height: 100%;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-1);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.menu-card:hover { transform: translateY(-5px); box-shadow: var(--sh-3); border-color: var(--red-100); }
/* Held at 4:3 at EVERY breakpoint on purpose. The thigh and fish photos are
   generated on a 4:3 canvas framed with margin around the product, so a 4:3 box
   shows 100% of them with no crop; any other ratio here starts slicing the base
   off the cup or the rim off the plate, which is exactly what this replaced. */
.menu-card__media {
  position: relative; margin: 0; aspect-ratio: 4 / 3;
  background: var(--cream-200); overflow: hidden;
}
/* The portrait breast frames sit just below centre, so bias their crop downward
   — a plain `center` loses the plate rim. No-op for the 4:3 sets, which fit exactly. */
.menu-card__media img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: center 60%;
  transition: transform .5s var(--ease);
}
.menu-card:hover .menu-card__media img { transform: scale(1.06); }
/* Zoom modifiers. The thigh and rice-bowl photos are generated on a 4:3 canvas
   with deliberate margin so nothing ever clips — which leaves the subject small
   once scaled down to card size. These crop back in purely in CSS: the source is
   1024x768 shown at 270–370px, so there are pixels to spare and no re-render is
   needed to retune. Set the amount per set via --media-zoom.
   Must stay after the rules above (same specificity, later wins), and the hover
   pair must beat `.menu-card:hover .menu-card__media img`. */
.menu-card__media--tight img,
.menu-card__media--bowl img { transform: scale(var(--media-zoom)); }
.menu-card:hover .menu-card__media--tight img,
.menu-card:hover .menu-card__media--bowl img { transform: scale(calc(var(--media-zoom) + .09)); }
.menu-card__media--tight { --media-zoom: 1.55; }  /* สะโพกไก่ — cup is small in frame */
.menu-card__media--bowl  { --media-zoom: 1.35; }  /* ข้าวกล่องคลีน — plate/tray must keep its rim */
.menu-card__media::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 48%;
  background: linear-gradient(to top, rgba(43,36,34,.58), rgba(43,36,34,0));
  pointer-events: none;
}
.menu-card__kcal {
  position: absolute; right: .7rem; bottom: .7rem; z-index: 1;
  font-family: var(--font-head); font-weight: 600; font-size: var(--fs-200);
  color: #fff; background: var(--red); padding: .35em .9em;
  border-radius: var(--r-pill); box-shadow: 0 2px 10px rgba(0,0,0,.28);
}
.menu-card__body {
  display: flex; flex-direction: column; gap: .5rem; flex: 1;
  padding: 1rem 1.15rem 1.2rem;
}
.menu-card__title { margin: 0; font-size: var(--fs-500); }
.menu-card__desc { margin: 0; color: var(--muted); font-size: var(--fs-300); line-height: 1.6; }
.menu-card__macros {
  display: flex; gap: .9rem; flex-wrap: wrap; margin-top: auto;
  padding-top: .75rem; border-top: 1px solid var(--line); font-size: var(--fs-300);
}

/* ---------- Notice card (icon + copy callout, e.g. the allergen warning) ----------
   The copy column MUST keep min-width:0. A flex item's default min-width:auto
   floors it at min-content, and Thai runs have no spaces to break on — the
   allergen heading contains a single 395px run at mobile sizes, far wider than
   the ~260px column it sits in, so the text used to shoot past the card's right
   edge (silently clipped by body{overflow-x:hidden} rather than scrolling).
   overflow-wrap:anywhere is the backstop for engines that do not apply Thai
   dictionary line breaking. */
.notice { border: 2px solid var(--red); background: var(--red-50); }
.notice__row { display: flex; gap: .9rem; align-items: flex-start; }
.notice__ico { flex: none; color: var(--red); }
.notice__ico svg { width: 34px; height: 34px; }
.notice__body { min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; }
.notice__title { margin: .6rem 0 .5rem; }
.notice__text { color: var(--ink-soft); margin: 0; }
/* Narrow screens: the side-by-side icon steals width a 32px Thai heading needs,
   so stack the icon above the copy and step the heading down one size. */
@media (max-width: 520px) {
  .notice__row { display: block; }
  .notice__ico { display: block; margin-bottom: .55rem; }
  .notice__title { font-size: var(--fs-700); }
}

/* pill list of macros */
.macro { display: inline-flex; align-items: baseline; gap: .3em; font-family: var(--font-head); font-weight: 700; }
.macro small { font-family: var(--font-body); font-weight: 500; color: var(--muted); font-size: .72em; }

/* ---------- Header ---------- */
.topbar {
  background: var(--red-700); color: #fff; font-size: var(--fs-200);
  font-family: var(--font-head); font-weight: 500;
}
.topbar__inner { display: flex; gap: 1.5rem; justify-content: center; align-items: center; padding: .5rem 0; flex-wrap: wrap; }
.topbar__item { display: inline-flex; align-items: center; gap: .45em; opacity: .95; }
.topbar__item svg { width: 1.05em; height: 1.05em; }
@media (max-width: 680px){ .topbar__item:nth-child(n+2){ display:none; } }

.site-header {
  position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.9);
  backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line); transition: box-shadow .25s var(--ease);
}
.site-header.is-stuck { box-shadow: var(--sh-2); }
.nav { display: flex; align-items: center; gap: 1rem; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; margin-right: auto; }
.brand img { width: 44px; height: 44px; }
.brand__name { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; color: var(--red); line-height: 1; letter-spacing: .01em; }
.brand__name small { display: block; font-size: .58em; letter-spacing: .28em; color: var(--ink-soft); font-weight: 600; }
.nav__links { display: flex; align-items: center; gap: .25rem; list-style: none; padding: 0; margin: 0; }
.nav__links a {
  font-family: var(--font-head); font-weight: 500; font-size: .98rem; color: var(--ink-soft);
  text-decoration: none; padding: .55rem .8rem; border-radius: var(--r-pill); transition: color .15s, background .15s;
}
.nav__links a:hover { color: var(--red); background: var(--red-50); }
.nav__links a[aria-current="page"] { color: var(--red); font-weight: 600; }
.nav__cta { display: inline-flex; align-items: center; gap: .5rem; }
.nav__toggle {
  display: none; width: 46px; height: 46px; border: 1px solid var(--line-strong); background: #fff;
  border-radius: var(--r-md); cursor: pointer; align-items: center; justify-content: center; color: var(--ink);
}
.nav__toggle svg { width: 24px; height: 24px; }

/* Off-canvas mobile menu */
.mobile-menu { position: fixed; inset: 0; z-index: 90; visibility: hidden; }
.mobile-menu__scrim { position: absolute; inset: 0; background: rgba(43,36,34,.5); opacity: 0; transition: opacity .3s var(--ease); }
.mobile-menu__panel {
  position: absolute; top: 0; right: 0; height: 100%; width: min(88vw, 360px);
  background: var(--paper); box-shadow: var(--sh-3); padding: 1.25rem;
  transform: translateX(100%); transition: transform .32s var(--ease); overflow-y: auto;
  display: flex; flex-direction: column; gap: .35rem;
}
.mobile-menu.is-open { visibility: visible; }
.mobile-menu.is-open .mobile-menu__scrim { opacity: 1; }
.mobile-menu.is-open .mobile-menu__panel { transform: translateX(0); }
.mobile-menu__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.mobile-menu__close { width: 44px; height: 44px; border: 1px solid var(--line-strong); background: #fff; border-radius: var(--r-md); cursor: pointer; display: grid; place-items: center; }
.mobile-menu__close svg { width: 24px; height: 24px; }
.mobile-menu a.m-link {
  font-family: var(--font-head); font-weight: 500; font-size: 1.1rem; color: var(--ink);
  text-decoration: none; padding: .85rem .75rem; border-radius: var(--r-md); border-bottom: 1px solid var(--line);
}
.mobile-menu a.m-link[aria-current="page"] { color: var(--red); }
.mobile-menu a.m-link:hover { background: var(--red-50); color: var(--red); }
.mobile-menu__cta { margin-top: 1rem; display: grid; gap: .6rem; }

/* The LINE CTA stays in the header at every breakpoint and scales with the viewport;
   only the link list collapses into the hamburger. */
.nav__cta .btn { white-space: nowrap; padding: .8em 1.15em; font-size: .95rem; }
@media (max-width: 1050px) {
  .nav__links { display: none; }
  .nav__toggle { display: inline-flex; }
  .nav__cta .btn { padding: .75em 1.05em; font-size: .9rem; }
}
@media (max-width: 560px) {
  .nav__cta .btn { padding: .7em .9em; font-size: .82rem; gap: .4em; }
  .nav { gap: .5rem; }
}
@media (max-width: 390px) {
  .nav__cta .btn { padding: .62em .78em; font-size: .76rem; }
  .brand img { width: 36px; height: 36px; }
  .brand__name { font-size: 1rem; }
  .nav__toggle { width: 42px; height: 42px; }
}
body.no-scroll { overflow: hidden; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: clip; background:
    radial-gradient(120% 90% at 85% 0%, var(--red-50) 0%, transparent 55%),
    radial-gradient(90% 80% at 0% 100%, var(--green-100) 0%, transparent 55%), var(--cream); }
.hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; padding-block: clamp(2rem, 5vw, 4.5rem); }
.hero__media { position: relative; }
.hero__media img { border-radius: var(--r-xl); box-shadow: var(--sh-3); }
.hero h1 .accent { color: var(--green); }
.hero__lead { font-size: var(--fs-500); color: var(--ink-soft); margin-top: 1rem; max-width: 46ch; }
@media (max-width: 860px){
  .hero__grid { grid-template-columns: 1fr; text-align: center; }
  .hero .cta-row { justify-content: center; }
  .hero__lead { margin-inline: auto; }
  /* Once the hero stacks, the benefit icons centre under the copy. */
  .hero .feat-row { justify-content: center; }
  .hero .list-check { display: inline-grid; text-align: left; }
}

/* feature icon row */
.feat-row { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 1.6rem; }
.center .feat-row { justify-content: center; }
.feat { display: flex; flex-direction: column; align-items: center; gap: .4rem; width: 84px; text-align: center; }
.feat__ico { width: 58px; height: 58px; display: grid; place-items: center; border-radius: var(--r-pill); background: #fff; box-shadow: var(--sh-1); color: var(--green-700); }
.feat__ico svg { width: 30px; height: 30px; }
.feat span { font-family: var(--font-head); font-weight: 500; font-size: .8rem; color: var(--ink-soft); line-height: 1.25; }

/* ---------- Section dividers ---------- */
.divider-wave { display: block; width: 100%; height: clamp(28px, 4vw, 60px); }
.bg-cream2 { background: var(--cream-200); }
.bg-paper { background: var(--paper); }
.bg-red { background: linear-gradient(135deg, var(--red-700), var(--red-800)); color: #fff; }
.bg-red h2, .bg-red h3 { color: #fff; }
.bg-red .section-lead { color: rgba(255,255,255,.85); }

/* ---------- Stat / count ---------- */
.stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; }
@media (max-width:720px){ .stats { grid-template-columns: repeat(2,1fr); } }
.stat { text-align: center; padding: 1.25rem; }
.stat__num { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-800); color: var(--red); line-height: 1; }
.bg-red .stat__num { color: var(--gold); }
.stat__label { font-size: var(--fs-300); color: var(--muted); margin-top: .4rem; }
.bg-red .stat__label { color: rgba(255,255,255,.8); }

/* Stat panel: a boxed stat group sized for a half-width column (buy page).
   Unlike .stats (full-bleed, 4 across) the tiles sit two per row and each
   number keeps its unit on one line. */
.stat-panel { max-width: 33rem; margin-inline: auto; }
.stat-tiles { display: grid; gap: .8rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat-tiles .stat { padding: 1.15rem .8rem; background: var(--red-50); border-radius: var(--r-md); }
/* Number + unit must never split across lines; scale it down inside the tile. */
.stat-tiles .stat__num { font-size: clamp(1.55rem, 1.05rem + 1.6vw, 2.3rem); white-space: nowrap; }
.stat-tiles .stat__label { line-height: 1.45; text-wrap: balance; overflow-wrap: normal; }
.stat-panel__rule { border: 0; border-top: 1px solid var(--line); margin: 1.2rem 0; }
.stat-panel__note { margin: 0; color: var(--muted); text-wrap: pretty; }
/* Below 390px two tiles leave the Thai labels too narrow, so stack them. */
@media (max-width: 390px){ .stat-tiles { grid-template-columns: 1fr; } }
/* .list-check li is a flex row, so a bare <strong> would become its own narrow
   column. Wrapping the sentence in a <span> gives one text item; min-width:0
   lets that item shrink instead of overflowing on narrow screens. */
.list-check li > span { min-width: 0; }

/* ---------- Accordion (FAQ) ---------- */
.accordion { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--paper); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion details:last-child { border-bottom: 0; }
.accordion summary {
  list-style: none; cursor: pointer; padding: 1.1rem 1.3rem; font-family: var(--font-head); font-weight: 600;
  font-size: var(--fs-500); display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: var(--ink);
}
.accordion summary::-webkit-details-marker { display: none; }
/* The question is an <h3> for document outline; it inherits the summary's styling. */
.accordion summary > h3 { font: inherit; color: inherit; margin: 0; line-height: inherit; text-wrap: pretty; }
.accordion summary::after { content: "+"; font-size: 1.5em; color: var(--red); transition: transform .25s var(--ease); line-height: 1; flex: none; }
.accordion details[open] summary::after { transform: rotate(45deg); }
/* Answers are authored with varying wrappers (.accordion__body, a bare <div>, or a
   bare <p>) — pad whatever follows the summary so every page indents alike. */
/* Two authoring shapes exist: .accordion as a wrapper around <details>, and
   .accordion on each <details> itself (products/chicken-breast). Cover both. */
.accordion details > *:not(summary),
details.accordion > *:not(summary) { padding: 0 1.3rem 1.25rem; color: var(--ink-soft); }
.accordion details > *:not(summary) > *:first-child,
details.accordion > *:not(summary) > *:first-child { margin-top: 0; }

/* ---------- Breadcrumb ---------- */
.crumbs { font-size: var(--fs-300); color: var(--muted); padding-block: .9rem; }
.crumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .3rem .5rem; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--red); }
.crumbs li + li::before { content: "›"; margin-right: .5rem; color: var(--line-strong); }
.crumbs [aria-current="page"] { color: var(--ink-soft); }

/* ---------- Prose (long-form legal / content) ---------- */
.prose { max-width: 72ch; }
.prose > * + * { margin-top: 1.05rem; }
.prose h2 { margin-top: 2.4rem; font-size: var(--fs-700); }
.prose h3 { margin-top: 1.8rem; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: .4rem; }
.prose a { color: var(--red-700); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-300); }
.prose th, .prose td { border: 1px solid var(--line); padding: .6rem .8rem; text-align: left; }
.prose th { background: var(--cream-200); font-family: var(--font-head); }

/* ---------- Tables ---------- */
/* Any table that can outgrow a phone gets wrapped in .table-wrap so it scrolls
   inside its own box instead of pushing the page sideways. */
/* Grid and flex children default to min-width:auto, so a wide child (e.g. a table
   with min-width:520px) can force its column — and the page — past the viewport.
   body{overflow-x:hidden} then silently CLIPS the overflow instead of scrolling it,
   which is exactly how a table ends up looking "cut off". Let columns shrink so
   scrolling falls to .table-wrap, where it belongs. */
.grid > *, .table-wrap { min-width: 0; }

.table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  border-radius: var(--r-lg); box-shadow: var(--sh-1); background: var(--paper);
  border: 1px solid var(--line);
}
.table-wrap > table { margin: 0; border-radius: 0; box-shadow: none; border: 0; }
/* Fades a hint that there is more table to the right. */
.table-wrap::-webkit-scrollbar { height: 8px; }
.table-wrap::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-pill); }
.table-scroll-hint { font-size: var(--fs-200); color: var(--muted); margin-top: .5rem; display: none; }
@media (max-width: 720px){ .table-scroll-hint { display: block; } }

/* Readable default for data tables (several pages shipped bare <table> markup
   that inherited no styling at all). */
.data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-300); min-width: 520px; background: var(--paper); }
.data-table thead th {
  background: var(--red); color: #fff; font-family: var(--font-head); font-weight: 600;
  text-align: left; padding: .85rem 1rem; font-size: var(--fs-300); white-space: nowrap;
}
.data-table thead th:first-child { border-top-left-radius: 0; }
.data-table th, .data-table td { padding: .8rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.data-table tbody tr:nth-child(even) { background: var(--cream); }
.data-table tbody tr:hover { background: var(--red-50); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody th, .data-table td:first-child { font-family: var(--font-head); font-weight: 600; color: var(--ink); }

/* ---------- Footer ---------- */
/* Deep ink rather than red: the final CTA above every page is a red slab, and two
   adjacent reds read as one undifferentiated block. Ink ends the page cleanly and
   lets the red top-rule act as the seam. */
.site-footer { background: linear-gradient(180deg, #2a1a17, #180e0d); color: rgba(255,255,255,.72); padding-block: clamp(2.5rem,4vw,4rem) 1.5rem; border-top: 4px solid var(--red); }
.site-footer a { color: rgba(255,255,255,.72); text-decoration: none; }
.site-footer a:hover { color: #fff; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2rem; }
@media (max-width: 860px){ .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .footer__grid { grid-template-columns: 1fr; } }
.footer__brand { display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 1rem; text-decoration: none; }
.footer__brand img { width: 44px; height: 44px; }
.footer__brand .brand__name { color: #fff; }
.footer__brand .brand__name small { color: rgba(255,255,255,.66); }
/* NB: these were previously scoped to `.footer`, which no element carries — the
   headings fell back to black-on-red and the lists kept their bullets. */
.site-footer h4 { color: #fff; font-family: var(--font-head); font-size: 1.05rem; font-weight: 600; margin-bottom: .9rem; letter-spacing: .02em; display: flex; align-items: center; gap: .6rem; }
.site-footer h4::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.16); }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; font-size: var(--fs-300); }
.footer__contact li { display: flex; gap: .6rem; align-items: flex-start; }
.footer__contact svg { width: 1.15em; height: 1.15em; flex: none; margin-top: .2em; opacity: .9; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.16); margin-top: 2rem; padding-top: 1.25rem; display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between; font-size: var(--fs-200); }
.footer__social { display: flex; gap: .6rem; }
.footer__social a { width: 38px; height: 38px; border-radius: var(--r-pill); background: rgba(255,255,255,.12); display: grid; place-items: center; }
.footer__social a:hover { background: rgba(255,255,255,.24); }
.footer__social svg { width: 20px; height: 20px; }

/* ---------- Sticky chat widget ---------- */
.chat-fab { position: fixed; right: clamp(14px, 3vw, 26px); bottom: clamp(14px, 3vw, 26px); z-index: 80; display: flex; flex-direction: column; align-items: flex-end; gap: .7rem; }
.chat-fab__items { display: flex; flex-direction: column; gap: .6rem; align-items: flex-end; transition: opacity .25s var(--ease), transform .25s var(--ease); }
.chat-fab__items[hidden] { display: none; }
.chat-fab.is-open .chat-fab__items { }
.chat-item { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.chat-item__label { background: #fff; color: var(--ink); font-family: var(--font-head); font-weight: 600; font-size: .9rem; padding: .5em .9em; border-radius: var(--r-pill); box-shadow: var(--sh-2); white-space: nowrap; }
.chat-item__btn { width: 52px; height: 52px; border-radius: var(--r-pill); display: grid; place-items: center; box-shadow: var(--sh-2); color: #fff; flex: none; border: 0; cursor: pointer; }
.chat-item__btn svg { width: 26px; height: 26px; }
.chat-item--line .chat-item__btn { background: #06c755; }
.chat-item--delivery .chat-item__btn { background: #f07818; }
.chat-item--stores .chat-item__btn { background: var(--red); }
.chat-toggle { width: 62px; height: 62px; border-radius: var(--r-pill); background: #06c755; color: #fff; border: 0; cursor: pointer; box-shadow: 0 10px 26px rgba(6,199,85,.4); display: grid; place-items: center; position: relative; transition: transform .2s var(--ease); }
.chat-toggle:hover { transform: scale(1.06); }
.chat-toggle svg { width: 32px; height: 32px; }
.chat-toggle .ico-close { display: none; }
.chat-fab.is-open .chat-toggle .ico-chat { display: none; }
.chat-fab.is-open .chat-toggle .ico-close { display: block; }
.chat-toggle::after { content: ""; position: absolute; inset: 0; border-radius: inherit; 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);} }
@media (prefers-reduced-motion: reduce){ .chat-toggle::after{ animation: none; } }

/* chat items entrance */
.chat-fab__items .chat-item { opacity: 0; transform: translateY(8px); }
.chat-fab.is-open .chat-fab__items .chat-item { opacity: 1; transform: translateY(0); transition: opacity .25s var(--ease), transform .25s var(--ease); }
.chat-fab.is-open .chat-fab__items .chat-item:nth-child(1){ transition-delay:.02s; }
.chat-fab.is-open .chat-fab__items .chat-item:nth-child(2){ transition-delay:.06s; }
.chat-fab.is-open .chat-fab__items .chat-item:nth-child(3){ transition-delay:.10s; }

/* ---------- LINE modal (tablet/desktop) ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: none; place-items: center; padding: 1.25rem; }
.modal.is-open { display: grid; }
.modal__scrim { position: absolute; inset: 0; background: rgba(43,36,34,.55); backdrop-filter: blur(3px); }
.modal__card { position: relative; background: var(--paper); border-radius: var(--r-xl); box-shadow: var(--sh-3); width: min(100%, 460px); max-height: 92vh; overflow-y: auto; padding: clamp(1.5rem, 3vw, 2.25rem); animation: pop .3s var(--ease); }
@keyframes pop { from { opacity: 0; transform: translateY(12px) scale(.97); } }
.modal__close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: var(--r-pill); border: 0; background: var(--cream-200); cursor: pointer; display: grid; place-items: center; }
.modal__close svg { width: 22px; height: 22px; }
.modal__head { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; }
.modal__head .li-badge { width: 46px; height: 46px; border-radius: var(--r-md); background: #06c755; display: grid; place-items: center; color: #fff; flex: none; }
.modal__head .li-badge svg { width: 28px; height: 28px; }
.modal__title { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-600); }
.modal__qr { width: 208px; height: 208px; margin: .5rem auto 1rem; padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); }
.modal__qr img { width: 100%; height: 100%; }
.copy-field { display: flex; align-items: center; gap: .5rem; background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-md); padding: .5rem .5rem .5rem .9rem; margin-top: .5rem; }
.copy-field__val { flex: 1; font-family: var(--font-head); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* pre-line so the "มาจากเว็บ <url>" line the JS appends stays on its own line */
.copy-field__msg { flex: 1; font-size: var(--fs-300); color: var(--ink-soft); line-height: 1.4; white-space: pre-line; }
.copy-btn { flex: none; border: 0; background: var(--red); color: #fff; font-family: var(--font-head); font-weight: 600; font-size: .85rem; padding: .55em 1em; border-radius: var(--r-sm); cursor: pointer; transition: background .15s; }
.copy-btn:hover { background: var(--red-700); }
.copy-btn.is-done { background: var(--green); }
.modal__label { font-family: var(--font-head); font-weight: 600; font-size: var(--fs-300); color: var(--muted); margin-top: 1.1rem; }
.modal__hint { font-size: var(--fs-300); color: var(--ink-soft); margin-top: 1rem; text-align: center; }
.modal__open-line { margin-top: 1.1rem; }

/* ---------- Cookie consent ---------- */
.cookie { position: fixed; left: clamp(12px,3vw,24px); right: clamp(12px,3vw,24px); bottom: clamp(12px,3vw,24px); z-index: 95; max-width: 520px; background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--r-lg); box-shadow: var(--sh-3); padding: 1.25rem 1.35rem; transform: translateY(150%); transition: transform .4s var(--ease); }
.cookie.is-visible { transform: translateY(0); }
.cookie h4 { font-size: var(--fs-500); margin-bottom: .4rem; }
.cookie p { font-size: var(--fs-300); color: var(--ink-soft); }
.cookie__row { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.cookie .btn { padding: .7em 1.3em; font-size: .95rem; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .reveal { opacity: 1; transform: none; } }

/* ---------- Back to top ---------- */
.to-top { position: fixed; left: clamp(12px,3vw,24px); bottom: clamp(84px,12vw,96px); z-index: 70; width: 46px; height: 46px; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--line-strong); box-shadow: var(--sh-2); cursor: pointer; display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; color: var(--red); }
.to-top.is-visible { opacity: 1; visibility: visible; }
.to-top svg { width: 22px; height: 22px; }

/* ---------- 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: 12px; top: -60px; z-index: 200; background: var(--red); color: #fff; padding: .6em 1em; border-radius: var(--r-sm); transition: top .2s; text-decoration: none; font-family: var(--font-head); }
.skip-link:focus { top: 12px; }
.mt-0{margin-top:0}.mt-4{margin-top:var(--sp-4)}.mt-6{margin-top:var(--sp-6)}
.text-red{color:var(--red)}.text-green{color:var(--green-700)}
.list-check { list-style: none; padding: 0; display: grid; gap: .7rem; }
/* In a centred block the ticks still read best left-aligned, block-centred. */
.center > .list-check, .center .list-check { display: inline-grid; text-align: left; justify-self: center; }
/* The tick is absolutely positioned rather than a flex sibling. As a flex row,
   any element child (typically a <strong> label) became its OWN flex item, so
   the bold lead and the rest of its sentence split into two ragged columns —
   64 list items across 12 pages were affected. Positioning the marker lets the
   whole item flow as ordinary inline text, emphasis included. */
.list-check li { position: relative; padding-left: 2.15em; min-width: 0; }
.list-check li::before { content: ""; position: absolute; left: 0; top: .1em; width: 1.5em; height: 1.5em; background: var(--green-100); border-radius: var(--r-pill); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b7a1c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 62%; }

/* ---------- Nutrition facts tiles ---------- */
/* Salmon nutrition section: the five key facts used to render as a bare
   .list-check, so the bold label and its em-dash description ran together into
   one wrapping paragraph. Each item is promoted to its own tile on the cream
   background, with the label on its own line above the description. Built on
   top of .list-check so the green check affordance is inherited, not re-declared. */
.nutri-facts { gap: .75rem; align-content: start; }
.nutri-facts li {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: clamp(.85rem, 1.8vw, 1.1rem) clamp(.9rem, 2vw, 1.15rem);
  box-shadow: var(--sh-1); align-items: flex-start;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.nutri-facts li:hover { transform: translateY(-2px); box-shadow: var(--sh-2); border-color: var(--green-100); }
/* min-width:0 lets the long Thai description wrap inside the flex row instead
   of forcing the tile wider than its column. */
.nutri-facts__txt { min-width: 0; margin: 0; font-size: var(--fs-300); color: var(--muted); line-height: 1.65; }
.nutri-facts__txt strong {
  display: block; font-family: var(--font-head); font-weight: 600;
  font-size: var(--fs-400); color: var(--ink); line-height: 1.35; margin-bottom: .15rem;
}
@media (max-width: 620px){ .nutri-facts { gap: .65rem; } }

/* The nutrition table sits on .bg-cream2, where the default .table-wrap border
   nearly disappears. Lift it with a stronger edge and shadow so it reads as a
   discrete object. Scoped so other .table-wrap instances are untouched. */
.nutri-table { border-color: var(--line-strong); box-shadow: var(--sh-2); }
/* A grid item defaults to min-width:auto, so .data-table's 520px min-width was
   propagating up and forcing the whole column — and the page — wider than a
   320px viewport. min-width:0 lets the column shrink and hands the scrolling
   back to .table-wrap, where it belongs. */
.nutri-col { min-width: 0; }