/* EIWA · menu page (spec §4.3): rail, «Список», dish cards, dish panel, order bar.
   Markup: js/ui/menu-list.js, js/ui/dish-panel.js, js/pages/menu.js. */

/* no hero here: dishes scroll under the header from the first pixel, so its backdrop is always on
   (header.js only switches it on after a scroll it has seen) */
.page--menu .header:not(.header--menu-open)::before { opacity: 1; }

/* ---------- page grid: rail | dishes ---------- */
.page--menu main {
  --strip-h: 0px; /* the phone strip under the header; sections stop below it */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-inline: var(--gutter);
  padding-bottom: clamp(1.5rem, 4vw, 3rem);
}
@media (min-width: 1024px) {
  .page--menu main {
    grid-template-columns: clamp(11.25rem, 15vw, 13.75rem) minmax(0, 1fr);
    column-gap: clamp(2rem, 4vw, 4.5rem);
    padding-top: calc(var(--header-h) + clamp(1.75rem, 3vw, 3rem));
  }
}
@media (max-width: 1023px) {
  /* the sticky chrome under the header: the category strip, then the search row */
  .page--menu main { --rail-h: 3.25rem; --search-h: 3.25rem; --strip-h: calc(var(--rail-h) + var(--search-h)); }
  .page--bar main { --search-h: 0px; } /* the bar card has no search row */
}

/* ---------- rail: categories (+ tag filters) ---------- */
.rail:empty { display: none; }
.rail__label { margin-bottom: .625rem; font-size: var(--fs-label); color: var(--mute); }
.rail__list { margin: 0; padding: 0; list-style: none; }
.rail__link {
  position: relative;
  display: inline-flex; align-items: baseline;
  padding-block: .25rem;
  font-size: 1.0625rem; line-height: 1.35;
  color: var(--ink-2);
  white-space: nowrap;
  transition: color var(--dur-fast) linear;
}
.rail__link sup { margin-left: .1875rem; font-size: .6875rem; line-height: 0; color: var(--mute); font-variant-numeric: tabular-nums; }
.rail__link[aria-current] { color: var(--ink); }
@media (hover: hover) { .rail__link:hover { color: var(--ink); } }
.rail__link::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 2px;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}
.rail__link[aria-current]::after { transform: scaleX(1); }
.rail__link--season { color: var(--ink); }
.rail__link--season::before {
  content: '';
  flex: none; align-self: center;
  width: .4375rem; height: .4375rem; margin-right: .5rem;
  border-radius: 50%;
  background: var(--season);
}

.rail__filters { display: flex; flex-wrap: wrap; gap: .375rem; }
.rail__tag {
  min-height: 2rem; padding: 2px .625rem;
  border: 1px solid var(--line-strong);
  font-size: .9375rem; color: var(--ink-2);
  transition: background-color var(--dur-fast) linear, color var(--dur-fast) linear;
}
.rail__tag[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* desktop: a column that stays in view */
@media (min-width: 1024px) {
  .rail {
    position: sticky; top: calc(var(--header-h) + 1.75rem);
    align-self: start;
    max-height: calc(100vh - var(--header-h) - 3rem);
    max-height: calc(100svh - var(--header-h) - 3rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail__filters { margin-top: 1.75rem; }
}
/* tablets in landscape (iPad Pro, 1024+): the column of categories gets finger-sized rows */
@media (min-width: 1024px) and (pointer: coarse) {
  .rail__link { padding-block: .65625rem; } /* 23 px line + 2 × 10.5 = 44 px */
  .rail__link::after { bottom: .5rem; }
}

/* phones and tablets: one sticky strip under the header, scrolls sideways */
@media (max-width: 1023px) {
  .rail {
    position: sticky; top: var(--header-h); z-index: 20;
    display: flex; align-items: center;
    height: var(--rail-h);
    margin-inline: calc(-1 * var(--gutter));
    background: rgba(243, 243, 242, .9);
    -webkit-backdrop-filter: blur(.75rem) saturate(1.1);
    backdrop-filter: blur(.75rem) saturate(1.1);
    border-bottom: 1px solid var(--line);
  }
  .rail__nav { display: contents; }
  .rail__label { display: none; }
  .rail__list {
    display: flex; align-items: center; gap: 1.375rem;
    min-width: 0; height: 100%;
    padding-inline: var(--gutter);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
    mask-image: linear-gradient(to right, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
  }
  .rail__list {
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
  }
  .rail__list::-webkit-scrollbar { display: none; }
  .rail__list li { flex: none; scroll-snap-align: start; }
  .rail__link { min-width: 2.75rem; font-size: 1rem; padding-block: .75rem; } /* 44 px tall inside the 52 px strip */
  .rail__link::after { bottom: .5rem; }
  .rail__filters { flex: none; flex-wrap: nowrap; padding-right: var(--gutter); }
}

/* ---------- top row: delivery hours · «Список / Галерея» ---------- */
.menu-content { min-width: 0; }
.rail:empty + .menu-content, .rail[hidden] + .menu-content { grid-column: 1 / -1; } /* no JS / no data: no rail */
.menu-top {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem;
  margin-bottom: clamp(1.25rem, 2.4vw, 2rem);
}
@media (max-width: 1023px) { .menu-top { padding-top: 1rem; } }

/* ---------- search (js/pages/menu.js searchBox): one quiet line over the dishes ---------- */
.msearch {
  position: relative;
  display: flex; align-items: center;
  max-width: 30rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--line-strong);
  transition: border-color var(--dur-fast) linear;
}
.msearch:focus-within { border-bottom-color: var(--ink); box-shadow: 0 1px 0 var(--ink); }
.msearch__input {
  flex: 1 1 auto; min-width: 0;
  min-height: 2.75rem;
  padding: .5rem 0;
  background: transparent; border: 0; border-radius: 0;
  font-size: 1.0625rem;
  -webkit-appearance: none; appearance: none;
}
.msearch__input::-webkit-search-cancel-button, .msearch__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.msearch__input::placeholder { color: var(--mute); opacity: 1; }
.msearch__input:focus-visible { outline: none; }
.msearch__clear { flex: none; width: 2.75rem; height: 2.75rem; margin-right: -.75rem; font-size: 1.625rem; font-weight: 200; line-height: 1; color: var(--ink-2); }
.msearch__key {
  flex: none;
  min-width: 1.5rem; padding: 0 .375rem;
  border: 1px solid var(--line-strong);
  font: inherit; font-size: .8125rem; line-height: 1.4; text-align: center;
  color: var(--ink-2);
}
@media (hover: none), (pointer: coarse), (max-width: 1023px) { .msearch__key { display: none; } } /* «/» is a keyboard habit */
.msearch__empty { padding: 1.5rem 0 2rem; }
.msearch__none { margin-bottom: .5rem; font-size: clamp(1.25rem, 2vw, 1.625rem); font-weight: 300; }
.msearch__empty .link { font-size: 1.0625rem; }

/* phones and tablets: the field sticks under the category strip, on the same quiet backdrop */
@media (max-width: 1023px) {
  .msearch {
    position: sticky; top: calc(var(--header-h) + var(--rail-h)); z-index: 19;
    max-width: none; height: var(--search-h);
    margin: 0 calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    background: rgba(243, 243, 242, .9);
    -webkit-backdrop-filter: blur(.75rem) saturate(1.1);
    backdrop-filter: blur(.75rem) saturate(1.1);
    border-bottom: 1px solid var(--line);
  }
  .msearch:focus-within { border-bottom-color: var(--ink); box-shadow: none; }
  .msearch__clear { margin-right: -.625rem; }
}
.menu-top__note { font-size: .9375rem; color: var(--mute); }

.view-switch { display: flex; gap: 1.25rem; font-size: 1rem; }
.view-switch__opt {
  display: inline-flex; align-items: center; gap: .4375rem;
  min-height: 2.25rem;
  color: var(--ink-2);
  transition: color var(--dur-fast) linear;
}
.view-switch__opt::before {
  content: '';
  width: .5rem; height: .5rem;
  border: 1px solid currentColor; border-radius: 50%;
}
.view-switch__opt[aria-checked='true'] { color: var(--ink); }
.view-switch__opt[aria-checked='true']::before { background: currentColor; }
.view-switch__opt[aria-disabled='true'] { color: var(--mute); cursor: default; }
@media (pointer: coarse) { .view-switch__opt { min-height: 2.75rem; } }
.view-switch__soon { margin-left: 2px; font-size: .6875rem; line-height: 0; }

/* ---------- sections ---------- */
.menu-sec { scroll-margin-top: calc(var(--strip-h) + 1.25rem); }
.menu-sec + .menu-sec { margin-top: clamp(3.5rem, 6vw, 6rem); }
.menu-sec__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .375rem 1.5rem;
  margin-bottom: clamp(1.25rem, 2.4vw, 2rem);
  padding-bottom: .875rem;
  border-bottom: 1px solid var(--line);
}
.menu-sec__title {
  display: flex; align-items: baseline; gap: .45em;
  font-size: var(--fs-h2);
  line-height: 1.05;
}
.menu-sec__title:focus { outline: none; }
.menu-sec__jp {
  font-size: max(.46em, .9375rem);
  color: var(--mute-lg);
  letter-spacing: .2em;
  transition: color var(--dur) linear;
}
.menu-sec.is-active .menu-sec__jp { color: var(--pink-ink); } /* one pink per screen */
.menu-sec__until { font-size: .9375rem; color: var(--mute); }
.menu-sec__until b { font-weight: 400; color: var(--ink); }

/* ---------- dish cards: 3 / 2 / 2 narrow / 1 ---------- */
.dish-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem .75rem;
  margin: 0; padding: 0; list-style: none;
}
@media (min-width: 640px) { .dish-grid { gap: 2.75rem 1.25rem; } }
@media (min-width: 1100px) { .dish-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3.25rem clamp(1.25rem, 2vw, 2rem); } }

.dish { position: relative; display: flex; flex-direction: column; }
.dish[hidden] { display: none; }
.dish__media {
  position: relative;
  display: grid; place-items: center;
  aspect-ratio: 1;
  margin-bottom: .875rem;
  background: var(--paper-2);
  overflow: hidden;
}
.dish__tag {
  position: absolute; left: .625rem; top: .625rem;
  padding: 1px .5rem .1875rem;
  background: #fff;
  font-size: .8125rem; color: var(--ink-2);
}

/* the plate placeholder (mockup): white rim, one soft shadow */
.plate {
  display: block;
  width: 70%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #fbfbfa 0 58%, #ececea 59% 64%, #fbfbfa 65% 100%);
  box-shadow: 0 .875rem 1.75rem rgba(28, 28, 28, .11), 0 2px .3125rem rgba(28, 28, 28, .05);
  transition: transform .7s var(--ease-out);
}
@media (hover: hover) {
  .dish:hover .plate { transform: translateY(-.25rem) scale(1.035); }
}

.dish__name { margin-bottom: .375rem; font-size: 1.1875rem; font-weight: 400; line-height: 1.25; text-wrap: pretty; }
/* the name button stretches over the whole card: a click anywhere but the counter opens the dish */
.dish__open { text-align: left; line-height: inherit; }
.dish__open::after { content: ''; position: absolute; inset: 0; }
.dish__open:focus-visible { outline: none; }
.dish:has(.dish__open:focus-visible) { outline: 2px solid var(--focus); outline-offset: .375rem; }
.dish__desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin-bottom: .75rem;
  font-size: .875rem; line-height: 1.45;
  color: var(--mute);
}
.dish__foot {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  margin-top: auto;
  min-height: 2.75rem;
}
.dish__price { font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.dish__price small { font-size: .875rem; color: var(--mute); }
@media (max-width: 639px) {
  .dish__name { font-size: 1rem; }
  .dish__desc { font-size: .8125rem; }
  .dish__price { font-size: 1rem; line-height: 1.2; }
  .dish__price small { display: block; font-size: .8125rem; }
  .dish__dot { display: none; } /* weight under the price: no «·» */
}

/* phones: one column of compact rows — plate thumbnail · name (2 lines), composition (1 line),
   «price · weight» and the counter at the right. The whole row still opens the dish. */
@media (max-width: 599px) {
  .dish-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .dish {
    display: grid;
    grid-template-columns: 5.75rem minmax(0, 1fr);
    grid-template-areas: 'media name' 'media desc' 'media foot';
    grid-template-rows: auto auto 1fr;
    column-gap: .875rem;
    padding: .875rem 0;
    border-bottom: 1px solid var(--line);
  }
  .dish:first-child { padding-top: 0; }
  .dish__media { grid-area: media; align-self: start; margin: 0; }
  .dish__media .plate { box-shadow: 0 .375rem .75rem rgba(28, 28, 28, .1), 0 1px .1875rem rgba(28, 28, 28, .05); }
  .dish__tag { left: .25rem; top: .25rem; padding: 0 .3125rem 1px; font-size: .6875rem; line-height: 1.3; }
  .dish__name { grid-area: name; margin-bottom: 2px; font-size: 1.0625rem; line-height: 1.25; }
  .dish__open {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }
  .dish__desc { grid-area: desc; -webkit-line-clamp: 1; line-clamp: 1; margin-bottom: 0; font-size: .9375rem; line-height: 1.4; }
  .dish__foot { grid-area: foot; align-self: end; margin-top: .375rem; }
  .dish__price { font-size: 1rem; line-height: 1.3; white-space: nowrap; }
  .dish__price small { display: inline; font-size: .9375rem; }
  .dish__dot { display: inline; }
}
@media (max-width: 359px) {
  .dish { grid-template-columns: 5rem minmax(0, 1fr); column-gap: .75rem; }
  .dish__price { white-space: normal; }
  .dish__price small { display: block; } /* weight under the price: room for «− n +» */
  .dish__dot { display: none; }
}

/* a picture on the plate area (js/ui/menu-list.js dishMedia): the dish's own photo, or — where there is none
   (breakfasts, a few drinks) — its category's cut-out, smaller and a little muted, so a row never shows an empty plate */
.plate--cat, .plate--photo, .dish__media .plate--cat, .dish__media .plate--photo {
  display: grid; place-items: center;
  background: none; box-shadow: none;
}
.plate--cat img, .plate--photo img { width: 100%; height: 100%; object-fit: contain; }
.plate--cat img { width: 80%; height: 80%; filter: saturate(.72) contrast(.96); opacity: .92; }
@media (max-width: 599px) { .dish__media .plate--cat img { width: 100%; height: 100%; } } /* the phone thumbnail is small already */
/* the dish's own photo (square studio shots on black, from eiwabistro.com): shown whole, filling the
   media square — no round crop (client, 2026-10-06); list, dish panel and gallery alike */
.plate--photo, .dish__media .plate--photo {
  border-radius: 0;
  background: #121212;
  box-shadow: none;
}
.plate--photo img { object-fit: contain; }
.dish__media .plate--photo, .gal-card__media .plate--photo { width: 100%; }
.dp__media .plate--photo { height: 100%; }
.gal__plate:has(.plate--photo) { border-radius: 0; background: none; }
.gal__plate .plate--photo { width: 100%; box-shadow: none; }
@media (hover: hover) {
  .dish:hover .plate--photo { transform: none; }
}

/* ---------- «+» → «− n +» ---------- */
.qty-ctl { position: relative; z-index: 1; flex: none; }
.qty-add {
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border: 1px solid var(--ink); border-radius: 50%;
  font-size: 1.5rem; font-weight: 300; line-height: 1;
  transition: background-color var(--dur-fast) linear, color var(--dur-fast) linear;
}
@media (hover: hover) { .qty-add:hover { background: var(--ink); color: var(--paper); } }
.qty { display: flex; align-items: center; }
.qty__step {
  width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong); border-radius: 50%;
  font-size: 1.25rem; font-weight: 300; line-height: 1;
  transition: border-color var(--dur-fast) linear;
}
@media (hover: hover) { .qty__step:hover { border-color: var(--ink); } }
.qty__step[aria-disabled='true'] { opacity: .3; cursor: default; }
.qty__n { display: inline-block; min-width: 1.9em; text-align: center; font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
@media (max-width: 599px) {
  .qty-add { width: 3rem; height: 3rem; font-size: 1.625rem; }
  .qty__step { width: 2.5rem; height: 2.5rem; font-size: 1.375rem; }
  .qty__n { font-size: 1.125rem; }
}
@media (max-width: 379px) {
  .qty__step { width: 2rem; height: 2rem; }
  .qty__n { min-width: 1.6em; }
}

/* ---------- data error / no JS ---------- */
.menu-error { max-width: 35rem; margin-top: 1.5rem; }

/* ---------- dish panel ---------- */
.dp { position: relative; display: flex; flex-direction: column; min-height: 100%; }
.dp__name { flex: 1 1 0; min-width: 0; white-space: normal; } /* the dish name wraps; its 献立 does not */
.dp__media {
  display: grid; place-items: center;
  aspect-ratio: 16 / 11;
  background: rgba(230, 230, 228, .72);
}
.dp__media .plate { width: auto; height: 76%; }
.dp__cat { margin-top: 1.25rem; font-size: var(--fs-label); color: var(--mute); }
.dp__desc { margin-top: .375rem; font-size: 1.0625rem; line-height: 1.55; color: var(--ink-2); }
.dp__kbju {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 1.375rem;
  border-block: 1px solid var(--line);
}
.dp__kbju-cell { display: flex; flex-direction: column-reverse; padding: .75rem 0; }
.dp__kbju dd { margin: 0; font-size: 1.375rem; font-weight: 300; line-height: 1.2; font-variant-numeric: tabular-nums; }
.dp__kbju dt { font-size: var(--fs-label); color: var(--mute); }
.dp__actions { padding-top: 2rem; }
.dp__buy { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.25rem; }
.dp__price { font-size: 1.25rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 399px) { .qty-add--big { min-width: 0; } } /* «620 ₽ · 180 г» keeps one line beside «В заказ» */
.qty-add--big { min-width: 10.5rem; min-height: 3.25rem; font-size: 1.0625rem; }
.qty-ctl--big .qty__step { width: 2.75rem; height: 2.75rem; }
.qty-ctl--big .qty__n { min-width: 2.2em; font-size: 1.25rem; }
.dp__to-cart { margin-top: .75rem; font-size: 1rem; }

/* ---------- order bar ---------- */
.order-bar {
  position: fixed; right: var(--gutter); bottom: calc(1.25rem + var(--safe-b));
  z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 1.75rem;
  min-height: 3.25rem;
  padding: .75rem 1.375rem;
  background: var(--ink); color: var(--paper);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 .625rem 1.875rem rgba(28, 28, 28, .18);
  --focus: var(--ink);
}
.order-bar__go { white-space: nowrap; }
@media (min-width: 900px) {
  .has-order-bar .footer { padding-bottom: calc(var(--gutter) + 5.25rem + var(--safe-b)); }
}
/* phones: the action bar's «Заказ · N · сумма» does this job (js/ui/action-bar.js) */
@media (max-width: 899px) {
  .order-bar { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .plate { transition: none; }
}

/* ---------- «Галерея» (js/motion/gallery.js): one big plate per screen, sticky info ---------- */
.gal {
  --stage-top: calc(var(--header-h) + var(--strip-h)); /* the stage sticks under the header (and the phone strip) */
  --stage-h: calc(100vh - var(--stage-top));
  --stage-h: calc(100svh - var(--stage-top));
  --gal-step: 80vh; /* scroll per dish */
  --gal-step: 80svh;
}
.gal--motion {
  position: relative;
  height: calc(var(--stage-h) + (var(--n) - 1) * var(--gal-step));
}
.gal__slides { position: absolute; inset: 0 0 auto; visibility: hidden; pointer-events: none; }
.gal__slide { height: var(--gal-step); }

.gal__stage {
  position: sticky; top: var(--stage-top);
  height: var(--stage-h);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  column-gap: clamp(2rem, 4vw, 4.5rem);
}
.gal__plates { position: relative; overflow: clip; }
.gal__plate {
  --size: min(32vw, calc(var(--stage-h) * .7), 100%);
  position: absolute; inset: 0; margin: auto;
  width: var(--size); height: var(--size);
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--paper-2); /* the ring the plate sits in */
  will-change: transform;
}
.gal__plate .plate {
  width: 86%;
  box-shadow: 0 1.375rem 2.75rem rgba(28, 28, 28, .14), 0 .1875rem .5rem rgba(28, 28, 28, .05);
}
.gal__hint { position: absolute; left: 0; bottom: clamp(1rem, 3vh, 2rem); font-size: var(--fs-label); color: var(--mute); }

.gal__info { display: grid; align-items: center; margin: 0; padding: 0 0 4vh; list-style: none; }
.gal__empty { padding: 3rem 0; }
.gal__info .gal-info { grid-area: 1 / 1; }
.gal-info { max-width: 28.75rem; }
.gal-info[hidden] { display: none; }
.gal-info__count { font-size: var(--fs-label); color: var(--mute); font-variant-numeric: tabular-nums; }
.gal-info__name {
  margin: .625rem 0 .875rem;
  font-size: clamp(1.75rem, 2.6vw, 2.5rem); font-weight: 300; line-height: 1.08;
  text-wrap: balance;
}
.gal-info__desc { font-size: 1rem; line-height: 1.55; color: var(--ink-2); }
.gal-info__buy { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.75rem; margin-top: 1.625rem; min-height: 3.25rem; }
.gal-info__price { font-size: 1.25rem; font-variant-numeric: tabular-nums; }

/* phones and reduced motion: big plate + info, one after another */
.gal-list { display: grid; gap: clamp(3.5rem, 8vw, 6.5rem); margin: 0; padding: 0; list-style: none; }
.gal-card { display: grid; gap: 1.375rem; }
.gal-card__media { display: grid; place-items: center; aspect-ratio: 1; background: var(--paper-2); }
.gal-card__media .plate { width: 78%; }
@media (min-width: 768px) {
  .gal-card { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; column-gap: clamp(2rem, 4vw, 4.5rem); }
}
@media (max-width: 767px) {
  .gal-info__name { font-size: 1.75rem; }
  .gal-info__buy { justify-content: space-between; }
}

/* the news window (js/ui/news-modal.js) is styled in panels.css: the home page opens it too */

/* skeleton until the menu arrives: a section title and a few cards in the real grid */
.menu-skel { padding-top: 1rem; }
.menu-skel .skel__line--title { width: 12rem; height: calc(var(--fs-h2) * 1.05); margin: 0 0 clamp(1.25rem, 2.4vw, 2rem); }
.menu-skel .dish__name { width: 80%; height: 1.125rem; margin-top: .875rem; }
.menu-skel .dish__foot { height: 2.75rem; margin-top: .75rem; }
@media (max-width: 599px) { .menu-skel .dish__name { margin-top: 0; } }
.menu-skel .skel { animation: none; } /* the block pulses once, not each card again */

/* the rail and the search line while the menu loads (replaced by renderRail / the search box) */
.rail-skel .skel__line { width: 7.5rem; height: .875rem; margin: 0 0 1.125rem; }
.menu-skel .skel__line--search { max-width: 30rem; height: 2.75rem; margin: 0 0 1.25rem; background: none; border-bottom: 1px solid var(--line-strong); }
@media (max-width: 1023px) {
  .rail-skel { display: flex; align-items: center; gap: 1.375rem; padding-inline: var(--gutter); overflow: hidden; }
  .rail-skel .skel__line { flex: none; width: 5rem; margin: 0; }
  .menu-skel { padding-top: 0; }
  .menu-skel .skel__line--search { max-width: none; height: var(--search-h); margin: 0 calc(-1 * var(--gutter)) 1rem; }
}
/* the server-rendered menu (server/site.js): what search engines and no-JS visitors read; with JS the page renders its own */
.js .menu-ssr { display: none; }
.menu-ssr__note { margin: 0 0 1.5rem; max-width: 40rem; color: var(--ink-2); }
.menu-ssr .dish__desc { display: block; -webkit-line-clamp: unset; line-clamp: none; overflow: visible; } /* no panel to open: the whole composition */
.menu-ssr__nav ul { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 0 0 2rem; padding: 0; list-style: none; }
html:not(.js) .rail { display: none; } /* no JS: no rail (its skeleton included), the noscript line spans the page */
html:not(.js) .menu-content { grid-column: 1 / -1; }