/* J&GO site styles.
   Brand book: brown #56352C, cream #F2E5D6, sand #EAD4B9, olive #868651; Mardoto ARM + Roboto.
   Mardoto @font-face rules are added by page_head() only when the font files exist in assets/fonts/.
   Tokens in three layers — PRIMITIVES (raw values) → SEMANTIC (meaning) → COMPONENT (per component).
   Components only use semantic/component tokens, so a re-theme touches the semantic layer only. */


/* === PRIMITIVES === */
:root {
    /* brand palette (+ shades derived for states and text contrast) */
    --brown-900: #3d2620;
    --brown-800: #56352C;   /* brand */
    --brown-700: #6e463b;
    --brown-600: #6f5047;   /* body-muted: 5.6:1 on cream */
    --cream-50: #FBF6EF;
    --cream-100: #F2E5D6;   /* brand */
    --sand-200: #EAD4B9;    /* brand */
    --olive-500: #868651;   /* brand — large shapes only */
    --olive-700: #6b6b3c;   /* olive for text/badges: 4.5:1 on cream */
    --white: #fff;
    /* channel triplets for alpha: rgb(var(--brown-rgb) / .15) */
    --brown-rgb: 86 53 44;
    --brown-dark-rgb: 61 38 32;
    --cream-rgb: 242 229 214;

    /* type scale (15px base) */
    --fs-2xs: .75rem;      /* 12 */
    --fs-xs: .8125rem;     /* 13 */
    --fs-sm: .875rem;      /* 14 */
    --fs-base: .9375rem;   /* 15 */
    --fs-md: 1rem;         /* 16 */
    --fs-lg: 1.125rem;     /* 18 */
    --fs-xl: 1.375rem;     /* 22 */
    --fs-2xl: 1.625rem;    /* 26 */
    --fs-3xl: 2.125rem;    /* 34 */
    --fs-4xl: 2.75rem;     /* 44 */
    --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; --fw-black: 900;
    --lh-tight: 1.15; --lh-snug: 1.3; --lh-body: 1.5;
    --tracking-label: .14em; --tracking-wide: .4em;

    /* spacing (4px base) */
    --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.25rem;
    --space-6: 1.5rem; --space-7: 1.75rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem;
    --space-14: 3.5rem; --space-16: 4rem; --space-18: 4.5rem; --space-20: 5rem;

    /* radius */
    --radius-sm: 6px; --radius-md: 14px; --radius-lg: 18px; --radius-xl: 22px; --radius-full: 999px;

    /* elevation & motion */
    --shadow-float: 0 10px 30px rgb(var(--brown-dark-rgb) / .35);
    --duration-fast: 150ms; --duration-normal: 200ms; --duration-slow: 400ms;
    --ease-out: cubic-bezier(.2, .7, .3, 1);

    --font-sans: 'Mardoto', 'Roboto', 'Noto Sans Armenian', system-ui, sans-serif;
}

/* === SEMANTIC === */
:root {
    --color-bg: var(--cream-100);
    --color-fg: var(--brown-800);
    --color-fg-muted: var(--brown-600);
    --color-surface: var(--cream-50);          /* cards */
    --color-surface-alt: var(--sand-200);      /* placeholders, steppers, bands */
    --color-accent: var(--olive-700);
    --color-border: rgb(var(--brown-rgb) / .15);
    --color-border-strong: rgb(var(--brown-rgb) / .3);
    --color-primary: var(--brown-800);
    --color-primary-hover: var(--brown-700);
    --color-primary-active: var(--brown-900);
    --color-on-primary: var(--cream-100);
    --color-overlay: rgb(var(--brown-dark-rgb) / .5);
    /* dark ("inverse") sections: hero, locations, contacts */
    --color-inverse-bg: var(--brown-800);
    --color-inverse-fg: var(--cream-100);
    --color-inverse-muted: var(--sand-200);
    --color-inverse-border: rgb(var(--cream-rgb) / .15);
    /* focus ring: switched to cream inside inverse sections */
    --ring-color: var(--brown-800);
    --ring-width: 3px;
    --ring-offset: 2px;

    --container: 1200px;
    --gutter: var(--space-10);
    --topbar-h: 72px;
    --section-gap: var(--space-18);
    --tap: 44px;                               /* minimum touch target */
}

/* === COMPONENT === */
:root {
    --btn-radius: var(--radius-full);
    --btn-pad: var(--space-4) var(--space-6);
    --btn-fs: var(--fs-base);
    --chip-pad: var(--space-3) var(--space-4);
    --chip-border: var(--color-border-strong);
    --card-bg: var(--color-surface);
    --card-radius: var(--radius-lg);
    --card-pad: var(--space-4) var(--space-5) var(--space-5);
    --qty-size: var(--tap);
}

/* === BASE === */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topbar-h) * 2); -webkit-tap-highlight-color: transparent; }
body { margin: 0; background: var(--color-bg); color: var(--color-fg); font: var(--fs-base)/var(--lh-body) var(--font-sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }   /* width/height attributes reserve space; CSS keeps the ratio */
svg { display: block; }
.wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.no-scroll { overflow: hidden; }

/* focus: visible only for keyboard users; cream ring on dark sections */
:focus-visible { outline: var(--ring-width) solid var(--ring-color); outline-offset: var(--ring-offset); border-radius: var(--radius-sm); }
.hero, .contacts, .loc, .order-bar, .langs a.is-on, .menu-tabs a[aria-selected="true"] { --ring-color: var(--cream-100); }
.btn:focus-visible, .cats a:focus-visible, .qty-add:focus-visible, .qty button:focus-visible, .order-bar__btn:focus-visible { border-radius: var(--radius-full); }

/* === TOP BAR === */
.topbar { position: sticky; top: 0; z-index: 20; background: rgb(var(--cream-rgb) / .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-border); }
.topbar__in { display: flex; align-items: center; gap: var(--space-8); height: var(--topbar-h); }
.logo { display: block; padding: var(--space-2) 0; }
.logo svg { height: 28px; width: auto; }
.topbar__links { display: flex; gap: var(--space-7); margin-right: auto; }
.topbar__links a { text-decoration: none; font-weight: var(--fw-medium); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .16em; padding: var(--space-3) 0; transition: color var(--duration-fast); }
.topbar__links a:hover { color: var(--color-accent); }
.langs { display: flex; gap: var(--space-1); }
.langs a { display: grid; place-items: center; min-height: var(--tap); min-width: var(--tap); text-decoration: none; font-size: var(--fs-2xs); font-weight: var(--fw-bold); padding: 0 var(--space-2); border-radius: var(--radius-sm); transition: background var(--duration-fast); }
.langs a:hover { background: var(--color-surface-alt); }
.langs a.is-on { background: var(--color-primary); color: var(--color-on-primary); }

/* === BUTTONS === */
.btn { display: inline-block; text-decoration: none; text-align: center; font: var(--fw-bold) var(--btn-fs)/1.2 var(--font-sans); padding: var(--btn-pad); min-height: var(--tap); border-radius: var(--btn-radius); border: 1px solid transparent; cursor: pointer;
    transition: background var(--duration-fast), color var(--duration-fast), transform var(--duration-fast) var(--ease-out); }
.btn:active, .qty-add:active, .qty button:active, .order-bar__btn:active, .cats a:active, .menu-tabs a:active { transform: scale(.97); }
.btn--light { background: var(--cream-100); color: var(--brown-800); }
.btn--light:hover { background: var(--sand-200); }
.btn--ghost { border-color: rgb(var(--cream-rgb) / .5); color: var(--color-inverse-fg); }
.btn--ghost:hover { background: rgb(var(--cream-rgb) / .1); }
.btn--dark { background: var(--color-primary); color: var(--color-on-primary); }
.btn--dark:hover { background: var(--color-primary-hover); }
.btn--line { background: transparent; color: var(--color-fg); border-color: var(--color-border-strong); }
.btn--line:hover { background: var(--color-surface-alt); }

/* === HERO === */
.hero { position: relative; overflow: hidden; background: var(--color-inverse-bg); color: var(--color-inverse-fg); }
.hero__mark { position: absolute; right: -80px; top: -60px; height: 640px; color: rgb(var(--cream-rgb) / .08); pointer-events: none; }
.hero__mark svg { height: 100%; width: auto; }
.hero__in { position: relative; display: flex; gap: var(--space-14); align-items: center; flex-wrap: wrap; padding-top: var(--space-20); padding-bottom: var(--space-20); }
.hero__text { flex: 1 1 420px; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-7); }
.hero__logo { margin: 0; }
.hero__logo svg { height: 180px; width: auto; }
.hero__tagline { margin: 0; font-size: var(--fs-4xl); font-weight: var(--fw-black); line-height: 1.05; }
.hero__intro { margin: 0; font-size: var(--fs-lg); line-height: 1.55; max-width: 30em; color: var(--color-inverse-muted); }
.hero__cta { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.hero__collage { flex: 1 1 380px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.hero__collage img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-xl); }
.hero__collage img:nth-child(2) { margin-top: var(--space-12); }
.hero__collage img:nth-child(3) { margin-top: calc(var(--space-12) * -1); }

/* === CATEGORY CHIPS === */
.cats { position: sticky; top: var(--topbar-h); z-index: 10; background: var(--color-bg); border-bottom: 1px solid var(--color-border); }
.cats__in { display: flex; gap: var(--space-2); overflow-x: auto; padding-top: var(--space-3); padding-bottom: var(--space-3); scrollbar-width: none; }
.cats__in::-webkit-scrollbar { display: none; }
.cats a { flex: none; display: inline-flex; align-items: center; min-height: var(--tap); text-decoration: none; font-size: var(--fs-2xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .06em; padding: var(--chip-pad); border: 1px solid var(--chip-border); border-radius: var(--radius-full); white-space: nowrap;
    transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast), transform var(--duration-fast) var(--ease-out); }
.cats a.is-on, .cats a:hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }

/* === SECTIONS === */
.cat { padding: var(--space-14) 0 var(--space-2); }
.cat__head { display: flex; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-7); }
.cat__title { margin: 0; font-size: var(--fs-3xl); font-weight: var(--fw-black); text-transform: uppercase; line-height: var(--lh-tight); }
.cat__alt { font-size: var(--fs-2xs); font-weight: var(--fw-medium); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-accent); }
.block { padding-top: var(--section-gap); }
.block > .cat__title { margin-bottom: var(--space-7); }

/* === DISH CARD === */
/* cards stretch to the tallest card in their row; price/+ rows are pinned to the bottom so they line up */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-6); align-items: stretch; }
.dish { display: flex; flex-direction: column; border-radius: var(--card-radius); overflow: hidden; background: var(--card-bg); }
.dish__img { aspect-ratio: 1; overflow: hidden; background: var(--color-surface-alt); }
.dish__img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-out); }
.dish__body { flex: 1; padding: var(--card-pad); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.dish__head { align-self: stretch; display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.dish h3 { margin: 0; font-size: var(--fs-base); font-weight: var(--fw-bold); text-transform: uppercase; line-height: var(--lh-snug); }
.dish__price { flex: none; font-weight: var(--fw-black); font-size: var(--fs-sm); white-space: nowrap; }
.dish__desc { margin: 0; color: var(--color-fg-muted); font-size: var(--fs-sm); }
.dish__note { font-size: var(--fs-2xs); font-weight: var(--fw-bold); color: var(--color-surface); background: var(--color-accent); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); }
/* no photo: brand logo on sand, same square as a photo so rows stay even */
.dish__img--logo { display: flex; align-items: center; justify-content: center; color: rgb(var(--brown-rgb) / .28); }
.dish__img--logo svg { width: 38%; height: auto; transition: transform var(--duration-slow) var(--ease-out), color var(--duration-slow); }
@media (hover: hover) {   /* no sticky "hover" zoom after a tap on phones */
    .dish:hover .dish__img img { transform: scale(1.04); }
    .dish:hover .dish__img--logo svg { transform: scale(1.06); color: rgb(var(--brown-rgb) / .4); }
}

/* === INFO SITE: about, menus, locations === */
.about { display: flex; gap: var(--space-12); flex-wrap: wrap; padding-top: var(--section-gap); }
.about__label { flex: 0 1 260px; margin: var(--space-2) 0 0; font-size: var(--fs-xs); font-weight: var(--fw-medium); letter-spacing: .5em; text-transform: uppercase; color: var(--color-accent); }
.about__text { flex: 1 1 480px; margin: 0; font-size: var(--fs-xl); line-height: 1.55; max-width: 38em; }

.menus { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-6); }
.menu-card { display: flex; gap: var(--space-5); align-items: center; padding: var(--space-4); border-radius: var(--radius-xl); background: var(--card-bg); text-decoration: none; transition: transform var(--duration-normal) var(--ease-out); }
.menu-card:hover { transform: translateY(-2px); }
.menu-card:focus-visible { border-radius: var(--radius-xl); }
.menu-card__img { flex: none; width: 132px; height: 132px; border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface-alt); }
.menu-card__img img { width: 100%; height: 100%; object-fit: cover; }
.menu-card__img svg { width: 48%; }
.menu-card__body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.menu-card__body strong { font-size: var(--fs-2xl); font-weight: var(--fw-black); text-transform: uppercase; }
.menu-card__body span { font-size: var(--fs-sm); color: var(--color-fg-muted); }
.menu-card__body small { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--color-accent); }

.locs { margin-top: var(--section-gap); background: var(--color-surface-alt); padding-bottom: var(--section-gap); }
.locs__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-6); }
.loc { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); padding: var(--space-7); border-radius: var(--radius-xl); background: var(--color-inverse-bg); color: var(--color-inverse-fg); }
.loc h3 { margin: 0; font-size: var(--fs-2xl); font-weight: var(--fw-black); text-transform: uppercase; }
.loc dl { margin: 0; display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: var(--space-3) var(--space-4); }
.loc dt, .contacts dt { font-size: var(--fs-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-inverse-muted); padding-top: 2px; }
.loc dd, .contacts dd { margin: 0; font-weight: var(--fw-bold); }
.loc dd a, .contacts dd a { text-decoration: none; }
.loc__map { width: 100%; height: 200px; border: 0; border-radius: var(--radius-md); }

/* === CONTACTS + FOOTER === */
.contacts { margin-top: var(--section-gap); background: var(--color-inverse-bg); color: var(--color-inverse-fg); }
.locs + .contacts { margin-top: 0; }
.contacts__in { display: flex; gap: var(--space-12); flex-wrap: wrap; align-items: center; padding-top: var(--space-16); padding-bottom: var(--space-16); }
.contacts__info { flex: 1 1 360px; display: flex; flex-direction: column; gap: var(--space-5); }
.contacts dl { margin: 0; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--space-3) var(--space-6); font-size: var(--fs-md); }
.socials { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.socials a { display: inline-flex; align-items: center; min-height: var(--tap); text-decoration: none; font-weight: var(--fw-bold); font-size: var(--fs-xs); padding: 0 var(--space-5); border-radius: var(--radius-full); background: var(--cream-100); color: var(--brown-800); transition: background var(--duration-fast); }
.socials a:hover { background: var(--sand-200); }
.footer { border-top: 1px solid var(--color-inverse-border); font-size: var(--fs-2xs); color: var(--color-inverse-muted); }
.footer .wrap { display: flex; align-items: center; justify-content: space-between; padding-top: var(--space-5); padding-bottom: var(--space-5); }
.footer svg { height: 22px; width: auto; color: var(--color-inverse-fg); }

/* === QR MENU PAGE === */
.qr .topbar__in { gap: var(--space-3); }
.topbar__loc { margin-right: auto; padding-left: var(--space-3); border-left: 1px solid var(--color-border); font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .12em; }
.menu-tabs { display: flex; gap: var(--space-2); padding-top: var(--space-4); padding-bottom: var(--space-1); }
.menu-tabs a { flex: 1; max-width: 220px; text-align: center; text-decoration: none; font-weight: var(--fw-black); font-size: var(--fs-base); text-transform: uppercase; letter-spacing: .08em; padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-surface); transition: background var(--duration-fast), color var(--duration-fast), transform var(--duration-fast) var(--ease-out); }
.menu-tabs a:hover { background: var(--color-surface-alt); }
.menu-tabs a[aria-selected="true"] { background: var(--color-primary); color: var(--color-on-primary); }
.menu-tabs a:focus-visible { border-radius: var(--radius-md); }
.menu-panel[hidden] { display: none; }
.qr .cat { padding-top: var(--space-10); }
.qr-foot { padding-top: var(--space-10); padding-bottom: var(--space-10); text-align: center; font-size: var(--fs-xs); color: var(--color-fg-muted); }
.qr-foot p { margin: var(--space-1) 0; }
.has-order .qr-foot { padding-bottom: 120px; } /* room for the floating bar */
.empty-note { padding: var(--space-16) 0; text-align: center; color: var(--color-fg-muted); }

/* + button and − n + stepper */
.dish__order { align-self: stretch; display: flex; justify-content: flex-end; margin-top: auto; padding-top: var(--space-1); }
.qty-add, .qty button { width: var(--qty-size); height: var(--qty-size); border-radius: var(--radius-full); border: 0; cursor: pointer; font: var(--fw-bold) var(--fs-xl)/1 var(--font-sans);
    transition: background var(--duration-fast), transform var(--duration-fast) var(--ease-out); }
.qty-add { background: var(--color-primary); color: var(--color-on-primary); }
.qty-add:hover { background: var(--color-primary-hover); }
.qty { display: inline-flex; align-items: center; gap: var(--space-1); background: var(--color-surface-alt); border-radius: var(--radius-full); padding: 2px; }
.qty button { background: var(--color-surface); color: var(--color-fg); }
.qty button:hover { background: var(--white); }
.qty .qty-plus { background: var(--color-primary); color: var(--color-on-primary); }
.qty .qty-plus:hover { background: var(--color-primary-hover); }
.qty-n { min-width: 26px; text-align: center; font-weight: var(--fw-black); font-size: var(--fs-md); }
.dish.is-picked { box-shadow: 0 0 0 2px var(--color-primary) inset; }

/* floating "My order" bar */
.order-bar { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom)); pointer-events: none; }
.order-bar__btn { pointer-events: auto; display: flex; align-items: center; gap: var(--space-4); width: 100%; max-width: 560px; margin: 0 auto; padding: var(--space-3) var(--space-5) var(--space-3) var(--space-3); border: 0; border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-on-primary); font: inherit; cursor: pointer; box-shadow: var(--shadow-float);
    transition: background var(--duration-fast), transform var(--duration-fast) var(--ease-out); animation: rise var(--duration-normal) var(--ease-out); }
.order-bar__btn:hover { background: var(--color-primary-hover); }
.order-bar__count { min-width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--cream-100); color: var(--brown-800); display: grid; place-items: center; font-weight: var(--fw-black); font-size: var(--fs-md); }
.order-bar__label { font-weight: var(--fw-bold); font-size: var(--fs-md); margin-right: auto; }
.order-bar__total { font-weight: var(--fw-black); font-size: var(--fs-md); }
@keyframes rise { from { transform: translateY(16px); opacity: 0; } }

/* order sheet */
.sheet { position: fixed; inset: 0; z-index: 40; }
.sheet__backdrop { position: absolute; inset: 0; background: var(--color-overlay); animation: fade var(--duration-normal); }
.sheet__panel { position: absolute; left: 0; right: 0; bottom: 0; max-width: 640px; margin: 0 auto; max-height: 88vh; display: flex; flex-direction: column; background: var(--color-bg); border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding: var(--space-5) var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom)); animation: slide-up var(--duration-normal) var(--ease-out); }
.sheet__head { display: flex; justify-content: space-between; align-items: center; }
.sheet__head h2 { margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-black); text-transform: uppercase; }
.sheet__x { width: var(--tap); height: var(--tap); border: 0; border-radius: var(--radius-full); background: var(--color-surface-alt); color: var(--color-fg); font-size: var(--fs-2xl); cursor: pointer; transition: background var(--duration-fast); }
.sheet__x:hover { background: var(--color-border-strong); }
.sheet__hint { margin: var(--space-2) 0 var(--space-3); font-size: var(--fs-xs); color: var(--color-fg-muted); }
.sheet__list { list-style: none; margin: 0; padding: 0; overflow-y: auto; }
.sheet__list li { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name sum" "qty qty"; gap: var(--space-2) var(--space-3); padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border); }
.sheet__name { grid-area: name; font-weight: var(--fw-bold); }
.sheet__sum { grid-area: sum; font-weight: var(--fw-black); white-space: nowrap; }
.sheet__list .qty { grid-area: qty; justify-self: start; }
.sheet__empty { padding: var(--space-6) 0; text-align: center; color: var(--color-fg-muted); }
.sheet__foot { padding-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); }
.sheet__total { display: flex; justify-content: space-between; font-size: var(--fs-lg); }
.sheet__total strong { font-weight: var(--fw-black); }
.sheet__actions { display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-3); }
.sheet__actions .btn { padding: var(--space-4); }
@keyframes slide-up { from { transform: translateY(100%); } }
@keyframes fade { from { opacity: 0; } }

/* "show to waiter": big, high-contrast, readable across the table */
.waiter { position: fixed; inset: 0; z-index: 50; overflow-y: auto; background: var(--color-surface); color: var(--color-fg); padding: var(--space-6) var(--space-5) calc(var(--space-6) + env(safe-area-inset-bottom)); }
.waiter__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); max-width: 720px; margin: 0 auto var(--space-3); }
.waiter__loc { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .2em; text-transform: uppercase; color: var(--color-fg-muted); }
.waiter__list { list-style: none; margin: 0 auto; padding: 0; max-width: 720px; }
.waiter__list li { display: flex; gap: var(--space-4); align-items: baseline; padding: var(--space-4) 0; border-bottom: 2px solid var(--color-border); font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: 1.25; }
.waiter__list b { flex: none; min-width: 2.4em; font-weight: var(--fw-black); font-size: var(--fs-3xl); }
.waiter__list small { display: block; margin-top: var(--space-1); font-size: var(--fs-lg); font-weight: var(--fw-medium); color: var(--color-fg-muted); }
.waiter__total { display: flex; justify-content: space-between; max-width: 720px; margin: var(--space-5) auto 0; font-size: var(--fs-xl); }
.waiter__total strong { font-weight: var(--fw-black); }

/* === RESPONSIVE === */
@media (max-width: 720px) {
    :root { --gutter: var(--space-4); --topbar-h: 64px; --section-gap: var(--space-12); }
    .topbar__links { display: none; }
    .langs { margin-left: auto; }
    .hero__in { padding-top: var(--space-12); padding-bottom: var(--space-12); gap: var(--space-8); }
    .hero__logo svg { height: 120px; }
    .hero__tagline { font-size: var(--fs-3xl); }
    .hero__mark { height: 420px; }
    .cat__title { font-size: var(--fs-2xl); }
    .about { gap: var(--space-3); }
    .about__text { font-size: var(--fs-lg); }
    .menu-card__img { width: 96px; height: 96px; }
    .menu-card__body strong { font-size: var(--fs-xl); }
    .contacts dl { grid-template-columns: 1fr; gap: 2px; }
    .contacts dd { margin-bottom: var(--space-3); }
    .grid { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
    .dish__body { padding: var(--space-3); }
    .dish__head { flex-direction: column; gap: var(--space-1); }
    .dish h3 { font-size: var(--fs-xs); }
    .dish__desc { font-size: var(--fs-xs); }
    .topbar__loc { font-size: var(--fs-2xs); letter-spacing: .06em; padding-left: var(--space-2); }
    .menu-tabs a { max-width: none; }
    .dish__order { justify-content: flex-start; }
}
@media (max-width: 380px) { .grid { grid-template-columns: 1fr; } }

/* respect "reduce motion" system setting */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

/* two-size items (tea cup/teapot, lemonade glass/carafe) */
.dish__sizes { list-style: none; margin: auto 0 0; padding: 0; align-self: stretch; display: flex; flex-direction: column; gap: var(--space-2); }
.dish__sizes li { display: flex; align-items: center; gap: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--color-border); }
.dish__size { margin-right: auto; font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .06em; color: var(--color-fg-muted); }
.dish__sizes .dish__order { align-self: auto; margin: 0; padding: 0; }

/* === SHARED: a11y, admin bar, contact form, coming soon, category tiles === */
.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; }
.admin-bar { position: relative; z-index: 60; padding: var(--space-2) var(--gutter); background: var(--olive-700); color: var(--cream-50); font-size: var(--fs-xs); font-weight: var(--fw-bold); text-align: center; }
.admin-bar a { color: inherit; }

.contacts__form { flex: 1 1 420px; }
.contact-form { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); border-radius: var(--radius-xl); background: var(--color-surface); color: var(--color-fg); --ring-color: var(--brown-800); }
.contact-form__title { margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-black); text-transform: uppercase; }
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.contact-form label { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .04em; }
.contact-form input, .contact-form select, .contact-form textarea { font: var(--fw-regular) var(--fs-md)/1.4 var(--font-sans); color: var(--color-fg); background: var(--white); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); min-height: var(--tap); width: 100%; }
.contact-form textarea { resize: vertical; }
.contact-form input:focus-visible, .contact-form select:focus-visible, .contact-form textarea:focus-visible { outline-offset: 0; border-color: var(--color-primary); }
.contact-form .btn { align-self: flex-start; }
.contact-form__privacy { margin: 0; font-size: var(--fs-2xs); color: var(--color-fg-muted); }
.contact-form__msg { margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-weight: var(--fw-bold); }
.contact-form__msg--ok { background: #e4efd9; color: #2f5320; }
.contact-form__msg--err { background: #f7dcd5; color: #7a2a17; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.g-recaptcha { min-height: 78px; }

/* category photo tiles: only shown by theme C */
.cat-tiles { display: none; }

/* coming soon */
.soon { min-height: 100vh; background: var(--color-inverse-bg); color: var(--color-inverse-fg); }
.soon__main { position: relative; overflow: hidden; min-height: 100vh; display: flex; flex-direction: column; align-items: center; gap: var(--space-10); padding: var(--space-6) var(--gutter) var(--space-8); }
.soon__mark { opacity: 1; height: 120vh; top: -10vh; right: -20vw; }
.soon__top { position: relative; align-self: stretch; display: flex; justify-content: flex-end; --ring-color: var(--cream-100); }
.soon__top .langs a:not(.is-on) { color: var(--color-inverse-fg); }
.soon__top .langs a:not(.is-on):hover { background: rgb(var(--cream-rgb) / .12); }
.soon__top .langs a.is-on { background: var(--cream-100); color: var(--brown-800); }
.soon__in { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-5); text-align: center; max-width: 640px; --ring-color: var(--cream-100); }
.soon__logo { margin: 0; }
.soon__logo svg { height: clamp(120px, 22vw, 200px); width: auto; color: var(--cream-100); }
.soon__label { margin: 0; font-size: var(--fs-xs); font-weight: var(--fw-medium); letter-spacing: .6em; text-transform: uppercase; color: var(--sand-200); }
.soon__tagline { margin: 0; font-size: var(--fs-4xl); font-weight: var(--fw-black); line-height: 1.05; }
.soon__text { margin: 0; font-size: var(--fs-lg); color: var(--sand-200); }
.soon__locs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.soon__locs li { padding: var(--space-2) var(--space-4); border: 1px solid rgb(var(--cream-rgb) / .35); border-radius: var(--radius-full); font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .1em; }
.soon__form { position: relative; width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: var(--space-3); }
.soon__stay { margin: 0; text-align: center; color: var(--sand-200); font-weight: var(--fw-bold); }
.soon__foot { position: relative; margin: auto 0 0; font-size: var(--fs-2xs); color: var(--sand-200); }
@media (max-width: 720px) {
    .contact-form__row { grid-template-columns: 1fr; }
    .soon__tagline { font-size: var(--fs-3xl); }
}

/* theme hooks: hidden in theme A, used by B (and C where noted) */
.cat__num, .dish__alt { display: none; }
.qr .cat__alt { display: none; }