/* EMBER demo: the slow bar after dark. Charcoal walls, pools of pendant-lamp light, pine crate wood and slate surfaces; lamp amber is the only action colour, the serif comes from the logo. */
:root {
  /* the room */
  --wall: #14181B; --wall-2: #1A1F23; --wood: #C9A57A; --wood-dk: #8E6C47;
  /* slate surfaces (named iron so table and staff pages inherit them) */
  --iron: #1D2327; --iron-2: #252C31; --iron-rim: #333C42; --iron-hi: #46515A;
  /* lamp light and cream text */
  --steam: #F4EDE1; --steam-2: #BDB3A4; --yolk: #EBA94E; --yolk-2: #F6C27A; --white-egg: transparent;
  /* paper slips: table QR card, kitchen tickets */
  --paper: #F4EDE1; --paper-ink: #1D2327; --paper-rule: #CDBFA9; --paper-muted: #5E5446;

  /* roles used across pages */
  --bg: var(--wall); --bg-2: var(--iron); --bg-3: var(--iron-2); --rule: #F4EDE11f; --rule-iron: var(--iron-rim);
  --accent: var(--yolk); --accent-2: var(--yolk-2); --on-accent: var(--wall);
  --ink: var(--steam); --muted: var(--steam-2); --text-2: var(--steam); --link: var(--yolk-2);
  --head-bg: #14181Bf0; --tint: #EBA94E24; --field: #6A6F70; --placeholder: #8F948F; --error: #FFB4AB;
  --card: var(--paper); --card-ink: var(--paper-ink); --card-accent: #8A3A12; --card-muted: var(--paper-muted); --card-rule: var(--paper-rule); --on-card-accent: var(--paper);
  --card-btn: var(--iron); --card-btn-ink: var(--steam); --tcard-bg: var(--paper); --late-ink: #B71C1C;
  --shadow: #000000a6; --backdrop: #07090ac7; --switch-off: var(--iron-rim); --switch-knob: var(--steam);
  --red: #B5121B; --warn: #EBA94E;

  --display: 'Cormorant Garamond', 'Sarabun', serif; --head: 'Sarabun', sans-serif; --body: 'Sarabun', sans-serif;
  --r: 18px; --pad: clamp(16px, 4vw, 40px); --max: 1200px;
  --plate-shadow: 0 18px 36px -16px #000000d9, 0 2px 4px #00000066;
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-color: var(--iron-hi) var(--wall); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
/* The wall, with a lamp hanging just above the first screen. */
body { margin: 0; color: var(--ink); font: 400 1rem/1.7 var(--body); background: radial-gradient(80% 60% at 70% -10%, #EBA94E1a, #EBA94E00 70%) no-repeat, var(--wall); }
::selection { background: var(--yolk); color: var(--wall); }
img { max-width: 100%; height: auto; display: block; }
svg { width: 1.15em; height: 1.15em; flex: none; }
.sprite { position: absolute; }
h1, h2, h3 { font-family: var(--head); font-weight: 700; line-height: 1.2; margin: 0; text-wrap: balance; }
p { margin: 0 0 .8em; }
a { color: var(--link); text-underline-offset: .2em; }
:focus-visible { outline: 3px solid var(--yolk); outline-offset: 4px; border-radius: 6px; }
input, select, textarea { caret-color: var(--yolk); accent-color: var(--yolk); }

/* Language: both languages are in the markup, show the active one. */
:root[data-ui="th"] .en, :root[data-ui="en"] .th { display: none !important; }
/* Demo versions: hide what a version does not include. */
:root[data-offer="1"] [data-min="2"], :root:not([data-offer="3"]) [data-min="3"], :root:not([data-offer="1"]) [data-only="1"] { display: none !important; }

[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 50; background: var(--yolk); color: var(--wall); padding: .5rem 1rem; border-radius: 8px; font-weight: 700; }
.skip:focus { top: 8px; }

/* Slate: the one surface for content, lit from above like a table under a pendant. */
.iron, .head, .versions, .foot, .lang, .ibtn, .sbtn, .tabs [role="tab"], .legal .draft, .tbl-head, .tbl-cats a, .tbl-sec ul, .tbl-status, .sheet, .staff-head, .kcol, .kpi, .report, .medit-wrap { --ink: var(--steam); --muted: var(--steam-2); --text-2: var(--steam); --link: var(--yolk-2); color: var(--ink); color-scheme: dark; }
.iron { background: radial-gradient(120% 80% at 50% 0%, var(--iron-2), var(--iron) 70%); box-shadow: inset 0 0 0 1px var(--iron-rim), inset 0 1px 0 var(--iron-hi), var(--plate-shadow); border-radius: var(--r); }

/* ---------- Demo flag + version switcher ---------- */
.demo-flag { background: var(--red); color: #fff; padding: .55rem var(--pad); font-size: .9rem; line-height: 1.5; display: flex; gap: .7rem; align-items: baseline; justify-content: center; text-align: center; flex-wrap: wrap; }
.demo-flag strong { letter-spacing: .14em; font-weight: 700; background: #fff; color: var(--red); padding: 0 .5rem; border-radius: 4px; }
.versions { background: var(--iron); border-bottom: 1px solid var(--iron-rim); padding: .55rem var(--pad); display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center; font-size: .9rem; }
.versions__label { color: var(--muted); font-weight: 600; font-size: .85rem; }
.versions__seg { display: flex; flex-wrap: wrap; background: var(--iron-2); border-radius: 999px; padding: 3px; gap: 2px; box-shadow: inset 0 0 0 1px var(--iron-rim); }
.versions__seg a { color: var(--ink); text-decoration: none; padding: .3rem .85rem; border-radius: 999px; min-height: 36px; display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.versions__seg a b { color: var(--yolk); }
.versions__seg a:hover { background: var(--iron-rim); }
.versions__seg a[aria-current] { background: var(--yolk); color: var(--wall); font-weight: 600; }
.versions__seg a[aria-current] b { color: var(--wall); }
/* "What's included": an amber-outlined pill; the chevron turns when the panel is open. */
.versions__more { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 40px; padding: .3rem .6rem .3rem 1rem; border: 0; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--yolk); color: var(--yolk-2); font: 600 .9rem var(--body); cursor: pointer; white-space: nowrap; transition: background .2s; }
.versions__more:hover, .versions__more[aria-expanded="true"] { background: var(--tint); }
.versions__more svg { transform: rotate(90deg); transition: transform .25s var(--ease); }
.versions__more[aria-expanded="true"] svg { transform: rotate(-90deg); }
.included { flex-basis: 100%; border-top: 1px solid var(--iron-rim); padding-top: .7rem; }
.included ul { margin: .3rem 0 0; padding-left: 1.2rem; columns: 2 320px; column-gap: 2rem; }
.included li { break-inside: avoid; margin-bottom: .25rem; }
.included li::marker { color: var(--yolk); }
.included__price { font-weight: 700; color: var(--yolk); margin: 0; }
.included__try { font-weight: 700; white-space: nowrap; }

/* ---------- Header ---------- */
.head { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 1rem; padding: .55rem var(--pad); background: var(--head-bg); backdrop-filter: blur(8px); box-shadow: inset 0 -1px 0 var(--iron-rim), 0 8px 20px -12px #000c; }
.head__brand { display: flex; align-items: center; gap: .7rem; color: var(--ink); text-decoration: none; margin-right: auto; }
.head__brand img, .foot img, .tcard img, .tbl-head img, .staff-head img, .story__mark img { border-radius: 50%; box-shadow: 0 0 0 1px #F4EDE133; }
.head__name { display: flex; flex-direction: column; line-height: 1.05; }
.head__name b { font: 500 1.55rem var(--display); letter-spacing: .08em; }
.head__name small { font-size: .62rem; letter-spacing: .24em; color: var(--muted); }
.head__nav { display: flex; gap: 1.4rem; }
.head__nav a { color: var(--ink); text-decoration: none; font-weight: 600; padding: .4rem 0; background: linear-gradient(var(--yolk), var(--yolk)) 0 100% / 0 2px no-repeat; transition: background-size .25s var(--ease); }
.head__nav a:hover { background-size: 100% 2px; }
.lang { background: var(--iron-2); border: 0; box-shadow: inset 0 0 0 1px var(--iron-rim); color: var(--ink); border-radius: 999px; min-width: 48px; min-height: 44px; font: 700 .9rem var(--body); cursor: pointer; }
.head__name b, .head__book { white-space: nowrap; }
@media (max-width: 860px) { .head__nav { display: none; } .head__name small { display: none; } }
@media (max-width: 420px) { .head { gap: .6rem; } .head__brand img { width: 44px; height: 44px; } .head__name b { font-size: 1.3rem; } .head__book { padding: .5rem .9rem; font-size: .95rem; } }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .55rem 1.3rem; border-radius: 999px; font: 700 1rem var(--body); text-decoration: none; cursor: pointer; border: 0; transition: background-color .2s, transform .2s var(--ease), box-shadow .2s; }
.btn:active { transform: scale(.97); }
/* Primary: lamp light. */
.btn--solid { background: var(--yolk); color: var(--wall); box-shadow: inset 0 1px 0 #ffffff59, 0 8px 18px -8px #EBA94E80; }
.btn--solid:hover { background: var(--yolk-2); }
.btn--line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px currentColor; }
.btn--line:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.ibtn { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--iron-2); box-shadow: inset 0 0 0 1px var(--iron-hi); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.ibtn:hover { background: var(--iron-rim); }
.is-placeholder { outline: 1px dashed var(--muted); outline-offset: 3px; }

.sec-h { font: 500 clamp(2.3rem, 5vw, 3.6rem)/1.05 var(--display); letter-spacing: -.005em; }
.note { color: var(--muted); font-size: .92rem; }
section { padding: clamp(48px, 6vw, 88px) var(--pad); scroll-margin-top: 72px; }
main > section:not(.hero):not(.walk) { max-width: calc(var(--max) + 2 * var(--pad)); margin: 0 auto; }

/* ---------- Hero: the wordmark over the video of a pizza being made, the booking bar below ---------- */
.hero { position: relative; isolation: isolate; padding: clamp(20px, 3.4vw, 44px) var(--pad) 76px; display: grid; min-height: clamp(520px, 74svh, 760px); grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; grid-template-areas: "word" "book"; gap: clamp(20px, 3vw, 36px); align-items: center; max-width: calc(var(--max) + 2 * var(--pad)); margin: 0 auto; }
.hero__word { grid-area: word; }
/* Background film of a pizza being made: full-bleed behind the hero, dimmed, darkest behind the wordmark, fading into the wall below. */
.hero__bg { position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); overflow: hidden; pointer-events: none; }
.hero__bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; filter: saturate(.85) contrast(1.05); }
.hero__bg video.is-on { opacity: .62; }
.hero__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #14181Bf0 0%, #14181Bb8 40%, #14181B4d 72%, #14181B8c 100%), linear-gradient(#14181B66, #14181B00 25%, #14181B00 70%, var(--wall)); }
.hero__vid { position: absolute; right: var(--pad); bottom: 16px; z-index: 2; background: #14181Bb3; backdrop-filter: blur(6px); }
/* Phones and tablets: the video only fills the top (name and promise) and fades out above the booking box, which sits
   on the plain wall below it. An absolutely placed grid child takes its grid area as its box, so the video ends exactly
   where the words end; it reaches up through the hero's top padding to meet the header. */
@media (max-width: 820px) {
  .hero { min-height: 0; grid-template-rows: auto auto; padding-bottom: 40px; }
  .hero__word { min-height: 52svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 32px 0 36px; }
  .hero__bg { grid-area: word; top: calc(-1 * clamp(20px, 3.4vw, 44px)); bottom: 0; }
  .hero__bg video.is-on { opacity: .8; }
  .hero__bg::after { background: linear-gradient(#14181B4d, #14181B1a 30%, #14181B8c 62%, #14181Be6 85%, var(--wall)); }
  .hero__vid { top: 12px; bottom: auto; }
}
.hero__word h1 { font: 500 clamp(3.6rem, 10vw, 6rem)/.95 var(--display); letter-spacing: .06em; color: var(--ink); }
.hero__word h1 small { display: block; font: 600 clamp(.8rem, 1.3vw, .95rem)/1.4 var(--body); letter-spacing: .32em; color: var(--muted); margin-top: 1rem; }
.hero__promise { font: 500 clamp(1.25rem, 2vw, 1.5rem)/1.5 var(--body); margin: 1.4rem 0 0; color: var(--ink); max-width: 30ch; }
/* Thai has no italic: only the English line is set in the serif italic. */
.hero__promise .en { font: italic 500 clamp(1.45rem, 2.4vw, 1.9rem)/1.3 var(--display); }
/* Keeps Thai phrases whole; the line-break dictionary splits loanwords like สโลว์คุก. */
.nw { white-space: nowrap; }

/* One-off glow when something is added, booked or starts cooking (site.js / table.js / staff.js add .puff). */
.puff { position: relative; }
.puff::after { content: ''; position: absolute; left: 50%; top: 0; width: 64px; height: 64px; margin-left: -32px; border-radius: 50%; background: radial-gradient(closest-side, #F6C27Acc, #F6C27A00); filter: blur(6px); pointer-events: none; animation: puff .9s ease-out forwards; }
@keyframes puff { from { transform: translateY(0) scale(.4); opacity: 1; } to { transform: translateY(-60px) scale(1.4); opacity: 0; } }
@keyframes rise { 0% { transform: translateY(25%) scaleY(.7); opacity: 0; } 30% { opacity: .9; } 100% { transform: translate(-10%, -55%) scaleY(1.15); opacity: 0; } }

/* Booking strip under the first screen. */
.quick { grid-area: book; display: flex; flex-wrap: wrap; align-items: end; gap: .8rem 1rem; padding: clamp(14px, 2vw, 20px) clamp(16px, 2.4vw, 26px); }
.quick__title { margin: 0 .4rem .45rem 0; font: 600 1.6rem/1.2 var(--display); flex: none; }
.quick label { display: grid; gap: .3rem; flex: 1 1 140px; }
.quick .lbl { font-weight: 600; font-size: .88rem; color: var(--muted); }
.quick .btn { flex: 0 0 auto; }
.quick--links { align-items: center; }
.quick--links .quick__title { margin-bottom: 0; }
.quick--links p { margin: 0; flex: 1 1 260px; color: var(--muted); }

/* Fields share one look on slate. */
.field, .bform input:not([type="radio"]), .bform select { width: 100%; min-height: 48px; padding: .55rem .85rem; border-radius: 12px; border: 0; box-shadow: inset 0 0 0 1.5px var(--field); background: #0000004d; color: var(--ink); font: inherit; }
.field:hover, .bform input:not([type="radio"]):hover, .bform select:hover { box-shadow: inset 0 0 0 1.5px var(--steam-2); }
.field:focus-visible, .bform input:focus-visible, .bform select:focus-visible { outline: 3px solid var(--yolk); outline-offset: 1px; }
select option { background: var(--iron); color: var(--ink); }
::placeholder { color: var(--placeholder); }
::-webkit-calendar-picker-indicator { filter: invert(.9); }

@media (max-width: 1100px) { .quick__title { flex-basis: 100%; } }
@media (max-width: 820px) {
  .hero__word h1 { font-size: clamp(3.4rem, 18vw, 5.4rem); }
}
/* Phones: the version pills scroll sideways on their own row; "What's included" gets a full-width row under them, and its panel opens in place below. */
@media (max-width: 520px) {
  .versions { padding-block: .45rem .55rem; gap: .45rem; }
  .versions > .versions__label { display: none; }
  .versions__seg { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .versions__seg a { flex: none; }
  .versions__more { flex: 1 1 100%; min-height: 44px; }
  .included ul { padding-left: 1.1rem; }
  .demo-flag { font-size: .82rem; padding-block: .45rem; }
}

/* ---------- Walk-in: scroll through the room. Without JS or with reduced motion, the three photos simply sit side by side. ---------- */
.walk { padding: clamp(48px, 6vw, 88px) var(--pad); max-width: calc(var(--max) + 2 * var(--pad)); margin: 0 auto; }
.walk__stage { display: grid; gap: clamp(24px, 4vw, 48px); }
.walk__frames { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px); }
.walk__frame { margin: 0; border-radius: var(--r); overflow: hidden; aspect-ratio: 3 / 4; background: var(--wall-2); box-shadow: var(--plate-shadow); }
.walk__frame img { width: 100%; height: 100%; object-fit: cover; }
.walk__copy h2 { margin-bottom: clamp(18px, 3vh, 32px); }
.walk__lines { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px); }
.walk__lines h3 { font: 500 clamp(1.7rem, 3vw, 2.4rem)/1.1 var(--display); }
.walk__lines p { color: var(--muted); margin: .4rem 0 0; max-width: 34ch; }

.walk.is-live { height: 420vh; height: 420svh; max-width: none; padding: 0; }
.walk.is-live .walk__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; padding: 84px var(--pad) clamp(24px, 4vh, 48px); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; max-width: calc(var(--max) + 2 * var(--pad)); margin: 0 auto; }
/* The room's lamps come up as you walk in. */
.walk.is-live .walk__stage::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(55% 50% at 72% 18%, #EBA94E2e, #EBA94E00 70%); opacity: var(--p, 0); }
.walk.is-live .walk__frames { display: block; position: relative; height: min(100%, 720px); aspect-ratio: 3 / 4; justify-self: center; max-width: 100%; }
.walk.is-live .walk__frame {
  position: absolute; inset: 0; aspect-ratio: auto;
  clip-path: inset(calc((1 - var(--e, 0)) * 100%) 0 0 0 round var(--r));
  transform: translateY(calc((1 - var(--e, 0)) * 8%)) scale(calc(1 - var(--x, 0) * .1)) rotate(calc(var(--x, 0) * -3deg));
  filter: brightness(calc(1 - var(--x, 0) * .55));
  will-change: clip-path, transform;
}
/* The first room opens like a lamp switching on: a circle of light from the top. */
.walk.is-live .walk__frame:first-child { clip-path: circle(calc(var(--e, 0) * 120%) at 50% 0%); }
.walk.is-live .walk__frame img { transform: scale(calc(1.22 - var(--e, 0) * .22)); }
.walk.is-live .walk__lines { grid-template-columns: 1fr; gap: clamp(18px, 3vh, 32px); }
.walk.is-live .walk__lines li { opacity: calc(.28 + var(--a, 0) * .72); transform: translateX(calc(var(--a, 0) * 14px)); transition: opacity .2s linear; }
.walk.is-live .walk__lines li::before { content: ''; display: block; width: calc(24px + var(--a, 0) * 48px); height: 2px; margin-bottom: .7rem; background: var(--yolk); opacity: var(--a, 0); }
@media (max-width: 760px) {
  .walk:not(.is-live) .walk__frames, .walk:not(.is-live) .walk__lines { grid-template-columns: 1fr; }
  .walk.is-live .walk__stage { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; padding-top: 76px; gap: 18px; }
  .walk.is-live .walk__frames { height: 100%; order: -1; }
  .walk.is-live .walk__copy h2 { font-size: 1.9rem; margin-bottom: .5rem; }
  /* Phones: one line at a time, crossfading under the photo. */
  .walk.is-live .walk__lines { display: grid; grid-template-areas: "l"; min-height: 7.5rem; }
  .walk.is-live .walk__lines li { grid-area: l; opacity: var(--a, 0); transform: translateY(calc((1 - var(--a, 0)) * 10px)); }
  .walk.is-live .walk__lines li::before { display: none; }
}

/* ---------- Story ---------- */
.story { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.story__mark { width: clamp(150px, 18vw, 220px); }
.story__mark img { width: 100%; height: auto; transform: rotate(-6deg); }
.story__text h2 { margin-bottom: .9rem; }
.story__text > p { max-width: 62ch; }
@media (max-width: 760px) { .story { grid-template-columns: 1fr; justify-items: start; } }

/* ---------- Offer 1 gallery ---------- */
.round { border-radius: 50%; padding: clamp(6px, 1vw, 10px); background: var(--iron); box-shadow: inset 0 0 0 1px var(--iron-hi), var(--plate-shadow); }
.round img { border-radius: 50%; aspect-ratio: 1; object-fit: cover; width: 100%; }
.plates__grid { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: clamp(20px, 3vw, 36px) clamp(14px, 2vw, 24px); }
.plates__grid li { text-align: center; }
.plates__grid .round { transition: transform .5s var(--ease); }
.plates__grid span { display: block; margin-top: .8rem; font: 600 1.3rem/1.3 var(--display); }

/* ---------- Menu ---------- */
.menu__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .5rem 2rem; }
.menu__head .note { max-width: 46ch; margin: 0; }
.tabs { display: flex; gap: .45rem; overflow-x: auto; margin: 1.6rem calc(-1 * var(--pad)) 1.8rem; padding: .3rem var(--pad) .5rem; scrollbar-width: thin; }
.tabs [role="tab"] { flex: none; min-height: 44px; padding: .4rem 1.1rem; border-radius: 999px; border: 0; background: var(--iron); box-shadow: inset 0 0 0 1px var(--iron-rim); color: var(--ink); font: 600 .98rem var(--body); cursor: pointer; transition: background .2s; }
.tabs [role="tab"]:hover { background: var(--iron-2); }
.tabs [role="tab"][aria-selected="true"] { background: var(--yolk); color: var(--wall); font-weight: 700; box-shadow: none; }
.tags { display: inline-flex; flex-wrap: wrap; gap: .3rem; }
.tag { font: 700 .75rem/1 var(--body); padding: .32rem .55rem; border-radius: 999px; white-space: nowrap; }
.tag--chef { background: var(--yolk); color: var(--wall); }
.tag--best { box-shadow: inset 0 0 0 1.5px var(--yolk); color: var(--yolk-2); }
.tag--out { background: #7A1616; color: #FFE1DE; }
.price { font: 700 1.15rem var(--head); color: var(--yolk-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.is-out { opacity: .6; }
.is-out .price { text-decoration: line-through; }

.dishes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.dishes + .dishes, .dishes + .rows { margin-top: 18px; }
.dish { overflow: hidden; display: flex; flex-direction: column; }
.dish img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; transition: transform .6s var(--ease); }
.dish__media { overflow: hidden; border-radius: var(--r) var(--r) 0 0; }
.dish__body { padding: .9rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.dish__body h3 { font: 600 1.45rem/1.15 var(--display); }
.dish__body h3 small { color: var(--muted); font: 600 .82rem var(--body); }
.dish__body p { color: var(--muted); font-size: .94rem; margin: 0; }
.dish__body .price { margin-top: auto; padding-top: .3rem; }
.rows { list-style: none; padding: .4rem 1.4rem; margin: 0; max-width: 780px; }
.row { display: flex; justify-content: space-between; gap: 1rem; padding: .95rem 0; border-bottom: 1px solid var(--iron-rim); }
.row:last-child { border-bottom: 0; }
.row h3 { font: 600 1.35rem/1.2 var(--display); display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.row p { color: var(--muted); font-size: .94rem; margin: .1rem 0 0; }
[role="tabpanel"] > .note { margin-bottom: 1rem; }

/* ---------- Order at table (offer 3) ---------- */
.order { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.order h2 { margin-bottom: 1.1rem; }
.steps { padding: 0; margin: 0 0 1.6rem; list-style: none; counter-reset: s; }
.steps li { counter-increment: s; display: flex; gap: 1rem; align-items: baseline; padding: .55rem 0; }
.steps li::before { content: counter(s); font: 600 1.15rem var(--display); color: var(--wall); background: var(--yolk); width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; flex: none; }
.order__try { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; }
.order__card { margin: 0; justify-self: center; text-align: center; }
.order__card figcaption { color: var(--muted); font-size: .88rem; margin-top: 1rem; }
/* Table QR card: a paper card propped on the table. */
.tcard { width: 250px; background: var(--paper); color: var(--paper-ink); border-radius: 14px; padding: 1.3rem 1.2rem 1.4rem; display: flex; flex-direction: column; align-items: center; gap: .45rem; box-shadow: 0 0 0 1px var(--paper-rule), var(--plate-shadow); transform: rotate(2deg); }
.tcard__no { font: 600 1.9rem var(--display); margin: 0; color: var(--paper-ink); }
.tcard__qr { background: #fff; padding: 12px; border-radius: 8px; width: 176px; }
.tcard__qr svg { width: 100%; height: auto; display: block; }
.tcard__hint { margin: 0; font-weight: 700; color: var(--paper-muted); }
@media (max-width: 760px) { .order { grid-template-columns: 1fr; } .tcard { transform: none; } }

/* ---------- Reviews: one big quote, three short ones beside it ---------- */
.reviews__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .6rem 2rem; }
.reviews__score { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; color: var(--muted); }
.reviews__score b { font: 600 2rem/1 var(--display); color: var(--ink); }
.stars { display: inline-flex; gap: 2px; color: var(--yolk); }
.stars svg { width: 1.05em; height: 1.05em; }
.stars .off { color: var(--iron-hi); }
.reviews__note { margin: .7rem 0 1.8rem; max-width: 62ch; }
.reviews__wall { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(14px, 2vw, 22px); }
.review { margin: 0; padding: clamp(18px, 2.4vw, 28px); display: flex; flex-direction: column; gap: .7rem; }
.review blockquote { margin: 0; flex: 1; }
.review p { margin: 0; }
.review figcaption { color: var(--muted); font-size: .85rem; }
.review--lead { grid-row: span 3; justify-content: center; padding: clamp(24px, 4vw, 48px); background: radial-gradient(90% 70% at 20% 0%, #EBA94E1f, #EBA94E00 70%), radial-gradient(120% 80% at 50% 0%, var(--iron-2), var(--iron) 70%); }
.review--lead .stars { font-size: 1.3rem; }
.review--lead .en { font: italic 500 clamp(1.7rem, 3vw, 2.4rem)/1.25 var(--display); }
.review--lead .th { font-size: clamp(1.35rem, 2.6vw, 1.95rem); line-height: 1.55; }
.review--lead blockquote { flex: none; margin: .4rem 0 .6rem; }
.reviews__cta { margin-top: 1.6rem; }
.reviews__cta svg { color: var(--yolk); }
@media (max-width: 760px) { .reviews__wall { grid-template-columns: 1fr; } .review--lead { grid-row: auto; } }

/* ---------- Booking ---------- */
.book { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
:root[data-offer="1"] .book { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.book__intro p { color: var(--muted); max-width: 46ch; margin-top: 1rem; }
.book__alt { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.4rem; }
:root[data-offer="1"] .book__alt { justify-content: center; }
.bform { padding: clamp(20px, 3vw, 34px); display: grid; gap: 1.1rem; }
.bform fieldset { border: 0; padding: 0; margin: 0; }
.bform legend, .lbl { font-weight: 600; font-size: .9rem; color: var(--muted); margin-bottom: .35rem; display: block; }
.bform__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; }
.bform [aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--error); }
.bform__error { color: var(--error); margin: 0; font-weight: 600; }
.bform__error:empty { display: none; }
.bform__send { justify-self: start; }
.fineprint { font-size: .85rem; color: var(--muted); margin: 0; }
/* Confirmation lands like a stamp of the badge, then stays still. */
.bform__done { position: relative; border-radius: 16px; padding: 1.1rem 1.2rem 1.1rem 5.4rem; background: #0000004d; box-shadow: inset 0 0 0 1.5px var(--yolk); }
.bform__done::before { content: ''; position: absolute; left: 1rem; top: 1rem; width: 3.4rem; height: 3.4rem; border-radius: 50%; background: url(../img/logo.svg) center / cover no-repeat; box-shadow: 0 0 0 1.5px var(--yolk); transform: rotate(-10deg); animation: stamp .45s var(--ease) both; }
@keyframes stamp { from { transform: rotate(-10deg) scale(1.8); opacity: 0; } to { transform: rotate(-10deg) scale(1); opacity: 1; } }
.bform__done h3 { color: var(--yolk); margin-bottom: .3rem; font-size: 1.2rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .4rem 1rem; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--field); cursor: pointer; }
.chip:hover { box-shadow: inset 0 0 0 1.5px var(--steam-2); }
.chip:has(input:checked) { box-shadow: inset 0 0 0 2px var(--yolk); background: var(--tint); }
.chip input { accent-color: var(--yolk); width: 18px; height: 18px; margin: 0; }
@media (max-width: 860px) { .book { grid-template-columns: 1fr; } }

/* ---------- How to find us: three steps from the main road, a photo slot per step, joined by a dashed amber path ---------- */
.find { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.find__intro h2 { margin-bottom: .9rem; }
.find__intro p { max-width: 46ch; }
.find__btns { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.4rem; }
.route { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); counter-reset: step; }
.route li { counter-increment: step; }
/* Placeholder until the restaurant sends its photos: a dashed frame that says which shot goes here. */
.route__shot { margin: 0 0 1rem; aspect-ratio: 3 / 4; border-radius: var(--r); box-shadow: inset 0 0 0 1.5px var(--field); background: #0000002e; display: grid; place-content: center; justify-items: center; gap: .5rem; padding: 1rem; text-align: center; color: var(--muted); font-size: .85rem; line-height: 1.5; }
.route__shot svg { width: 2rem; height: 2rem; }
.route h3 { display: flex; align-items: center; gap: .6rem; font: 600 1.45rem/1.15 var(--display); margin-bottom: .35rem; }
.route h3::before { content: counter(step); flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center; background: var(--yolk); color: var(--wall); font: 600 1.05rem var(--display); }
.route li:not(:last-child) h3::after { content: ''; flex: 1 1 1rem; min-width: 1rem; margin-right: calc(-1 * clamp(14px, 2vw, 24px)); border-top: 2px dashed #EBA94E99; }
.route p { color: var(--muted); font-size: .94rem; margin: 0; }
@media (max-width: 900px) { .find { grid-template-columns: 1fr; } }
/* Phones: steps stack, photo beside the words, the path runs down the left. */
@media (max-width: 600px) {
  .route { grid-template-columns: 1fr; gap: 0; }
  .route li { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 14px; padding-bottom: 18px; }
  .route__shot { grid-row: span 2; aspect-ratio: 1; margin: 0; padding: .4rem; font-size: .7rem; }
  .route__shot svg { width: 1.4rem; height: 1.4rem; }
  .route li:not(:last-child) h3::after { display: none; }
}

/* ---------- Branch + contact ---------- */
.branches { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; margin-top: 1.8rem; }
.branch { padding: 1.5rem; }
.branch h3 { font: 600 1.8rem/1.15 var(--display); margin-bottom: .7rem; }
.branch p { display: flex; gap: .6rem; align-items: center; }
.branch p svg { color: var(--yolk); }
.branch__btns { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.1rem; }
.social { margin-top: 2.4rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.social p { margin: 0; font: 600 1.6rem var(--display); }
.social__row { display: flex; flex-wrap: wrap; gap: .7rem; }
.sbtn { display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; padding: .5rem 1.15rem; border-radius: 999px; color: var(--ink); text-decoration: none; font: 700 1rem var(--body); background: var(--iron); box-shadow: inset 0 0 0 1px var(--iron-rim), 0 6px 14px -8px #000c; }
.sbtn svg { width: 1.35em; height: 1.35em; color: var(--yolk); }
.sbtn:hover { background: var(--iron-2); }

/* ---------- Footer ---------- */
.foot { text-align: center; padding: 48px var(--pad) 40px; background: var(--iron); box-shadow: inset 0 1px 0 var(--iron-rim); color: var(--muted); font-size: .92rem; }
.foot img { margin: 0 auto 1rem; }
.foot__demo { font-size: .85rem; }

.toast { position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 160%); background: var(--steam); color: var(--wall); padding: .75rem 1.15rem; border-radius: 14px; z-index: 60; font-weight: 700; max-width: calc(100% - 32px); transition: transform .35s var(--ease); box-shadow: 0 12px 28px -6px var(--shadow); }
.toast.is-on { transform: translate(-50%, 0); }

/* ---------- Privacy page ---------- */
.legal { max-width: 760px; margin: 0 auto; padding: 48px var(--pad); }
.legal h1 { font: 500 clamp(2.2rem, 5vw, 3rem)/1.1 var(--display); margin-bottom: .4rem; }
.legal h2 { font-size: 1.3rem; margin: 1.8rem 0 .5rem; color: var(--ink); }
.legal .draft { box-shadow: inset 0 0 0 2px var(--yolk); background: var(--iron); padding: .8rem 1rem; border-radius: 12px; }

@media (hover: hover) {
  .dish:hover img, .plates__grid li:hover .round { transform: scale(1.04); }
  .btn:hover { transform: translateY(-1px); }
}