/* EIWA · panels «калька»: side panel / centred modal on tracing paper (spec §3).
   Markup and behaviour: js/ui/panel.js. The root layer sits above the header (--z-panel > --z-header). */

.panel {
  /* side padding of every panel part; never under a landscape notch */
  --panel-x: max(clamp(1.25rem, 3vw, 2.25rem), var(--safe-x));
  position: fixed; inset: 0 0 auto;
  height: 100vh;
  height: 100dvh; /* the visible area: Safari's toolbars never hide the sticky buttons */
  z-index: var(--z-panel);
}
.panel__scrim {
  position: absolute; inset: -100vh 0; /* past both screen edges: iOS 26 Safari shows the page under its bars */
  background: rgba(28, 28, 28, .2);
}

.panel__sheet {
  position: absolute; top: 0; bottom: 0;
  display: flex; flex-direction: column;
  width: min(35rem, 100vw);
  overflow: hidden;
  background: var(--kalka-bg);
  -webkit-backdrop-filter: blur(var(--kalka-blur)) saturate(1.1);
  backdrop-filter: blur(var(--kalka-blur)) saturate(1.1);
  color: var(--ink);
  will-change: transform;
}
.panel__sheet:focus { outline: none; }
@supports not (backdrop-filter: blur(1px)) {
  @supports not (-webkit-backdrop-filter: blur(1px)) {
    .panel__sheet { background: var(--paper); }
  }
}

.panel--right .panel__sheet { right: 0; border-left: 1px solid var(--kalka-border); }
.panel--left .panel__sheet { left: 0; border-right: 1px solid var(--kalka-border); }
.panel--center { --safe-t: 0px; --safe-b: 0px; } /* a centred window never reaches the notch or the home indicator */
.panel--center .panel__sheet {
  inset: 0; margin: auto;
  width: min(40rem, calc(100vw - 2 * var(--gutter)));
  height: fit-content;
  max-height: min(88vh, 47.5rem);
  max-height: min(88dvh, 47.5rem);
  border: 1px solid var(--kalka-border);
}
@media (max-width: 599px) {
  .panel--right .panel__sheet, .panel--left .panel__sheet { border-inline: 0; }
  /* full-width sheet on a phone: its paper continues above and below the screen edges (iOS 26 Safari draws the
     page under the status bar and the floating toolbar — no strip of the page may show there) */
  .panel--right .panel__sheet, .panel--left .panel__sheet { box-shadow: 0 -100vh 0 0 var(--paper), 0 100vh 0 0 var(--paper); }
}
/* forms (booking, order): one solid paper sheet — the page behind no longer shows through (client, 2026-10-06) */
.panel#booking .panel__sheet, .panel#cart .panel__sheet {
  background: var(--paper);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* brand marks in the corner: barely there */
.panel__waves, .panel__koi { position: absolute; pointer-events: none; user-select: none; opacity: .12; }
.panel__waves {
  right: -8%; top: -5%; width: 62%; height: auto;
  /* the cut-out ends in a straight edge: let it dissolve */
  -webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent 96%);
  mask-image: linear-gradient(to bottom, #000 35%, transparent 96%);
}
.panel__koi { right: 7%; bottom: 14%; width: 4.5rem; height: auto; transform: rotate(-20deg); }
/* phones: the form fills the sheet, so the marks never sit behind a control. The waves stay up in the title
   row, fainter; the corner koi goes (the empty order keeps its swimming one — that is the brand moment) */
@media (max-width: 479px) {
  .panel__koi { display: none; }
  .panel__waves {
    top: calc(-4rem + var(--safe-t)); right: 0;
    width: 8.25rem;
    opacity: .08;
    -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 78%);
    mask-image: linear-gradient(to bottom, #000 30%, transparent 78%);
  }
}

.panel__head {
  position: relative; flex: none;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: calc(clamp(1.25rem, 3vw, 2.25rem) + var(--safe-t)) var(--panel-x) 0;
}
.panel__title {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .7em;
  min-width: 0;
  font-size: clamp(1.625rem, 2.4vw, 2.125rem);
  font-weight: 300;
  line-height: 1.1;
  white-space: nowrap; /* glyph and title stay one line: «注文 Ваш заказ», never «注/文 Ваш/заказ» */
}
.panel__jp { flex: none; font-size: 1rem; }
.panel__close {
  flex: none;
  width: 2.75rem; height: 2.75rem;
  margin: -.5rem -.625rem 0 0;
  display: grid; place-items: center;
  font-size: 2.125rem; font-weight: 200; line-height: 1;
  color: var(--ink);
}
.panel__body {
  position: relative; flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(1.125rem, 2.4vw, 1.75rem) var(--panel-x) calc(clamp(1.5rem, 3vw, 2.25rem) + var(--safe-b));
}


/* ---------- booking (js/ui/booking-panel.js, spec §4.4) ---------- */
.bk-body { scroll-padding-bottom: 10.625rem; } /* a focused field never hides under the sticky button */
.bk, .bk-done { position: relative; display: flex; flex-direction: column; min-height: 100%; }
.bk-label { display: block; margin: 1.625rem 0 .625rem; font-size: var(--fs-label); color: var(--ink-2); }
.bk-group:first-child .bk-label { margin-top: 0; }
.bk-label__opt { color: var(--mute); }

/* day strip: runs out to the panel edge, scrolls sideways (wheel too) */
.bk-days {
  position: relative;
  display: flex; gap: .375rem;
  margin: -.375rem calc(-1 * var(--panel-x)) -.375rem -.375rem;
  padding: .375rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: .375rem;
  scrollbar-width: none;
}
.bk-days::-webkit-scrollbar { display: none; }
.bk-days::after { content: ''; flex: 0 0 clamp(.875rem, 2.4vw, 1.875rem); }
.bk-day {
  position: relative; flex: 0 0 3.625rem;
  display: grid; justify-items: center; gap: 1px;
  padding: .4375rem 0 .375rem;
  border: 1px solid var(--line-strong);
  font-size: .8125rem; line-height: 1.2;
  color: var(--ink-2);
  scroll-snap-align: start;
  transition: border-color var(--dur-fast) linear;
}
.bk-day__num { font-size: 1.5rem; font-weight: 300; line-height: 1.1; color: var(--ink); font-variant: normal; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.bk-day__note { font-size: .6875rem; color: var(--mute); }
@media (hover: hover) { .bk-day:hover:not(:disabled) { border-color: var(--ink); } }
.bk-day[aria-checked='true'] { background: var(--ink); border-color: var(--ink); color: rgba(255, 255, 255, .7); }
.bk-day[aria-checked='true'] .bk-day__num { color: #fff; }
.bk-day[aria-checked='true'] .bk-day__note { color: rgba(255, 255, 255, .6); }
.bk-day:disabled { opacity: .35; cursor: default; }
/* a new micro-season starts on this day */
.bk-day--ko::after {
  content: '';
  position: absolute; top: .3125rem; right: .3125rem;
  width: .25rem; height: .25rem; border-radius: 50%;
  background: var(--season); /* the panel's one pink is the 予約 title */
}
.bk-season { margin-top: .75rem; font-size: .9375rem; color: var(--ink-2); }

.bk-past { margin-bottom: .625rem; font-size: .9375rem; color: var(--mute); } /* today's gone slots are not shown, just named */
.bk-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(4rem, 1fr)); gap: .375rem; }
.bk-time {
  min-height: 2.5rem;
  border: 1px solid var(--line-strong);
  font-size: .9375rem; font-variant-numeric: tabular-nums;
  transition: border-color var(--dur-fast) linear;
}
@media (pointer: coarse) { .bk-time { min-height: 2.75rem; } }
@media (hover: hover) { .bk-time:hover:not(:disabled) { border-color: var(--ink); } }
.bk-time[aria-checked='true'] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.bk-time:disabled { border-color: var(--line); color: var(--mute); opacity: .55; text-decoration: line-through; cursor: default; }

.bk-guests { display: flex; align-items: center; gap: 1.125rem; }
.bk-step {
  flex: none; width: 2.5rem; height: 2.5rem;
  display: grid; place-items: center;
  border: 1px solid var(--ink); border-radius: 50%;
  font-size: 1.25rem; font-weight: 300; line-height: 1;
}
.bk-step[aria-disabled='true'] { opacity: .3; cursor: default; }
.bk-guests__value { min-width: 4.6em; text-align: center; }
.bk-guests__num { font-size: 1.625rem; font-weight: 300; font-variant-numeric: tabular-nums; }
.bk-guests__word { font-size: .9375rem; color: var(--ink-2); }
.bk-hint { margin-top: .625rem; font-size: .9375rem; color: var(--ink-2); }

.bk-field { display: block; margin-top: 1.375rem; }
.bk-field .bk-label { margin: 0 0 2px; }
.bk-input {
  display: block; width: 100%;
  min-height: 2.75rem;
  padding: .5rem 0;
  background: transparent;
  border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0;
  font-size: 1.0625rem;
  transition: border-color var(--dur-fast) linear;
}
.bk-input::placeholder { color: var(--mute); opacity: 1; }
@media (hover: hover) { .bk-input:hover { border-bottom-color: var(--ink-2); } }
.bk-input:focus-visible { outline: none; border-bottom-color: var(--ink); box-shadow: 0 1px 0 var(--ink); }
.bk-input--area { min-height: 4rem; resize: vertical; line-height: 1.4; }

.bk-error { margin-bottom: .875rem; padding: .875rem 1rem 1rem; border-left: 1px solid var(--ink); background: rgba(255, 255, 255, .7); }
.bk-error:empty { margin: 0; padding: 0; border: 0; }
.bk-error p { margin-bottom: .75rem; font-size: 1rem; }

/* the button stays in reach while the form scrolls under it */
.bk-actions {
  --pad-b: calc(clamp(1.5rem, 3vw, 2.25rem) + var(--safe-b)); /* = .panel__body bottom padding */
  position: sticky; bottom: calc(-1 * var(--pad-b)); z-index: 1;
  margin: auto calc(-1 * var(--panel-x)) calc(-1 * var(--pad-b));
  padding: 1.25rem var(--panel-x) max(calc(clamp(1.5rem, 3vw, 2.25rem) - .5rem), var(--safe-b)); /* clear of the home indicator */
  background: var(--paper); /* the sheet's own colour: no fade, no second tone (client, 2026-10-06) */
}
/* typing on a touch screen (panel.js): the actions stop sticking so they never cover the field,
   and the body gets room to lift its last field above the keyboard */
.panel--typing .bk-actions { position: static; }
.panel--typing .panel__body { padding-bottom: 50vh; }
.bk-submit { width: 100%; min-height: 3.25rem; white-space: normal; text-align: center; }
.bk-submit[aria-disabled='true'] { opacity: .35; cursor: default; }
.bk-submit[aria-busy='true'] { opacity: .6; cursor: progress; }
.bk-missing { min-height: 1.4em; margin-top: .5rem; font-size: .875rem; color: var(--mute); }

.bk-done { padding-top: clamp(1rem, 6vh, 4.5rem); }
.bk-done__jp { font-size: clamp(2.125rem, 3.4vw, 3rem); line-height: 1.2; color: var(--ink-2); letter-spacing: .3em; } /* one pink per screen: the title's 予約 */
.bk-done__title { margin-top: .875rem; font-size: clamp(1.875rem, 3vw, 2.5rem); }
.bk-done__title:focus { outline: none; }
.bk-done__details { margin-top: 1.25rem; font-size: 1.1875rem; font-weight: 300; }
.bk-done__note { margin-top: .375rem; color: var(--ink-2); }
.bk-done__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.125rem 1.75rem; margin-top: 2.25rem; }


/* phones: bigger targets and type — thumbs, not cursors (client, 2026-10-06: «на мобилке слишком мелко») */
@media (max-width: 599px) {
  .panel__close { width: 3.25rem; height: 3.25rem; font-size: 2.5rem; }
  .bk-label { margin: 1.875rem 0 .75rem; font-size: .875rem; }
  .bk-day { flex-basis: 4.375rem; padding: .625rem 0 .5rem; font-size: .875rem; }
  .bk-day__num { font-size: 1.875rem; }
  .bk-day__note { font-size: .75rem; }
  .bk-season, .bk-past, .bk-hint { font-size: 1rem; }
  .bk-times { grid-template-columns: repeat(auto-fill, minmax(4.75rem, 1fr)); gap: .5rem; }
  .bk-time { min-height: 3.375rem; font-size: 1.125rem; }
  .bk-guests { gap: 1.5rem; }
  .bk-step { width: 3.5rem; height: 3.5rem; font-size: 1.75rem; }
  .bk-guests__num { font-size: 2.125rem; }
  .bk-guests__word { font-size: 1.0625rem; }
  .bk-input { min-height: 3.25rem; font-size: 1.1875rem; }
  .bk-submit { min-height: 3.75rem; font-size: 1.125rem; }
  .bk-missing { font-size: .9375rem; }
}

/* ---------- order (js/ui/cart-panel.js, spec §4.5) ---------- */
.ct { position: relative; display: flex; flex-direction: column; min-height: 100%; }
.ct[hidden], .ct-lines[hidden], .ct-empty[hidden] { display: none; }
.ct-count { margin-left: auto; padding-left: .6em; font-size: var(--fs-label); color: var(--mute); }
@media (max-width: 359px) {
  .ct-count { flex-basis: 100%; margin: .375rem 0 0; padding-left: 0; } /* «1 блюдо» under the title on the smallest phones */
}
.panel--empty .panel__koi { display: none; } /* the swimming koi is the only one */

/* Доставка / Самовывоз — square segments */
.ct-mode { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 1.125rem; border: 1px solid var(--ink); font-size: 1rem; }
.ct-mode[hidden] { display: none; }
.ct-mode__opt { min-height: 2.75rem; transition: background-color var(--dur-fast) linear, color var(--dur-fast) linear; }
.ct-mode__opt[aria-checked='true'] { background: var(--ink); color: var(--paper); }

/* empty: the koi swims through a strip as wide as the panel */
.ct-empty { display: flex; flex-direction: column; align-items: flex-start; flex: 1 1 auto; }
/* «Ваш заказ № 1042 — Готовится →» above the order: the latest order from this browser */
.ct-recent { margin: 0 0 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); font-size: 1.0625rem; }
.ct-notice { margin: 0 0 1.25rem; padding: .625rem .875rem; border-left: 1px solid var(--ink); background: rgba(255, 255, 255, .7); font-size: 1rem; line-height: 1.45; }
.ct-notice[hidden] { display: none; }
.ct-recent[hidden] { display: none; }
.ct-recent__link { font-variant-numeric: tabular-nums; }
.ct-track[hidden] { display: none; }
.ct-pond {
  position: relative; flex: 1 1 auto;
  align-self: stretch;
  min-height: 13.75rem;
  margin: -.5rem calc(-1 * var(--panel-x)) 0;
  overflow: hidden;
}
.ct-koi {
  position: absolute; left: 0; top: 0;
  width: clamp(3rem, 5vw, 4rem); height: auto;
  opacity: .85;
  transform: translate(-200%, 0); /* off-stage until the swim starts */
  will-change: transform;
}
.ct-koi.koi--still { left: 58%; top: 26%; transform: rotate(70deg); will-change: auto; }
.ct-empty__text { margin-top: 1.125rem; font-size: clamp(1.375rem, 2vw, 1.625rem); font-weight: 300; line-height: 1.25; }
.ct-empty__season { margin-top: .5rem; font-size: .9375rem; color: var(--mute); }
.ct-empty__link { margin-top: 1.375rem; font-size: 1.0625rem; }

/* lines: plate · name, weight, sum · − n + */
.ct-lines { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.ct-line {
  display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; align-items: center; gap: .875rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--line);
}
.ct-plate { display: block; width: 3.5rem; height: 3.5rem; border-radius: 50%; object-fit: cover; background: var(--paper-2); }
img.ct-plate:not(.ct-plate--cat) { border-radius: 0; object-fit: contain; background: #121212; } /* the dish photo whole, as in the menu */
.ct-plate--cat { border-radius: 0; object-fit: contain; background: none; filter: saturate(.72); opacity: .92; } /* the category's cut-out until the dish photo arrives */
.ct-plate--empty { background: radial-gradient(circle, #fbfbfa 0 54%, var(--paper-2) 55% 61%, #fbfbfa 62% 100%); box-shadow: inset 0 0 0 1px var(--line); }
.ct-line__name { display: block; font-size: 1rem; line-height: 1.3; }
.ct-line__meta { display: block; margin-top: .1875rem; font-size: .875rem; color: var(--mute); font-variant-numeric: tabular-nums; }
.ct-qty { display: flex; align-items: center; gap: .25rem; }
.ct-step { width: 2.125rem; height: 2.125rem; font-size: 1.125rem; }
.ct-qty__n { min-width: 1.8em; text-align: center; font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
@media (max-width: 479px) {
  .ct-line { grid-template-columns: 2.75rem minmax(0, 1fr) auto; gap: .75rem; }
  .ct-plate { width: 2.75rem; height: 2.75rem; }
  .ct-qty { gap: 0; }
  .ct-step { width: 2rem; height: 2rem; }
  .ct-line__name { font-size: .9375rem; }
}

/* free delivery progress — only when settings.delivery.freeFrom is set */
.ct-free { margin-top: 1.125rem; }
.ct-free[hidden], .ct-hint[hidden], .ct-actions[hidden] { display: none; }
.ct-free__track { display: block; height: .1875rem; background: var(--paper-2); overflow: hidden; }
.ct-free__bar {
  display: block; height: 100%;
  background: var(--ink);
  transform-origin: left; transform: scaleX(0);
  transition: transform var(--dur) var(--ease-out);
}
.ct-free__text { margin-top: .5rem; font-size: .875rem; color: var(--mute); }

/* season hint: 旬 · dish · + price */
.ct-hint {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: .75rem;
  margin-top: 1.125rem; padding: .875rem 1rem;
  background: rgba(255, 255, 255, .55);
}
.ct-hint__jp { font-size: 1.125rem; color: var(--mute-lg); letter-spacing: 0; } /* grey: one pink per screen is the title's 注文 */
.ct-hint__text { font-size: .9375rem; line-height: 1.35; color: var(--ink-2); }
.ct-hint__add { font-size: .9375rem; white-space: nowrap; font-variant-numeric: tabular-nums; }

.ct-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .875rem; font-size: 1.125rem; }
.ct-total__sum { font-variant-numeric: tabular-nums; }
.ct-go[aria-disabled='true'] { opacity: .35; cursor: default; }
.ct-nomenu { margin-top: .5rem; }

/* checkout */
.ct-co__head { display: grid; justify-items: start; gap: .375rem; }
.ct-back { font-size: .9375rem; color: var(--ink-2); }
.ct-co__title { margin-top: .875rem; font-size: clamp(1.5rem, 2.2vw, 1.875rem); font-weight: 300; }
.ct-co__title:focus { outline: none; }
.ct-co__summary { font-size: .9375rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.bk-field[hidden] { display: none; }

/* the checkout in three steps: «1 Куда и кому ✓», «2 Когда», «3 Как оплатить», then the optional bits */
.co-step { margin-top: 2.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.co-step__head {
  display: flex; align-items: center; gap: .75rem;
  margin-bottom: .25rem;
  font-size: 1.25rem; font-weight: 300; line-height: 1.2;
}
.co-step__n {
  flex: none;
  display: grid; place-items: center;
  width: 1.625rem; height: 1.625rem;
  border: 1px solid var(--line-strong);
  font-size: .875rem; font-weight: 400; font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}
.co-step__ok { margin-left: auto; font-size: 1.125rem; color: var(--ink); }
.co-step .bk-group:first-child .bk-label, .co-step__head + .bk-group .bk-label { margin-top: 1rem; }
.co-step > .bk-field:first-of-type { margin-top: .875rem; }
.co-step .ct-paygroup { margin-top: 1rem; }
.co-step .ct-gone { margin-top: 1rem; }
.co-step .ct-times, .co-step .ct-closed { margin-top: 1rem; }

/* кв. / офис · подъезд · этаж · домофон: short fields in one row (two on phones) */
.ct-parts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 1rem; }
@media (max-width: 479px) { .ct-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ct-parts .bk-field { margin-top: 1rem; }
.ct-courier { margin-top: 1rem; }
.ct-courier .ct-check { margin-top: 0; }
.co-extra { margin-top: 2.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.co-extra .bk-label { margin-top: 0; }
.ct-cutlery__value { min-width: 7.5em; text-align: center; font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.ct-times[hidden], .ct-closed[hidden] { display: none; }
/* «Когда»: «Как можно скорее · ≈ 60 мин» | «Ко времени» → hour chips that scroll sideways, then :00 / :30 */
.ct-when { margin-bottom: 0; }
.ct-when .ct-mode__opt { padding: .375rem .5rem; line-height: 1.2; }
@media (max-width: 479px) {
  /* phones: «≈ 60 мин» goes under «Как можно скорее», never broken mid-way */
  .ct-when__eta { display: block; font-size: .9375rem; opacity: .75; }
  .ct-when__dot { display: none; }
}
.ct-mode__opt:disabled { color: var(--mute); cursor: default; }
.ct-picker .bk-label { margin: 1rem 0 .5rem; }
.ct-hours {
  display: flex; gap: .375rem;
  margin: -.25rem calc(-1 * var(--panel-x)) -.25rem 0;
  padding: .25rem var(--panel-x) .25rem 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.ct-hours::-webkit-scrollbar { display: none; }
.ct-hour, .ct-min {
  flex: none;
  min-width: 3.25rem; min-height: 2.75rem;
  border: 1px solid var(--line-strong);
  font-size: 1.0625rem; font-variant-numeric: tabular-nums;
  scroll-snap-align: start;
  transition: border-color var(--dur-fast) linear;
}
@media (hover: hover) { .ct-hour:hover, .ct-min:hover:not(:disabled) { border-color: var(--ink); } }
.ct-hour[aria-checked='true'], .ct-min[aria-checked='true'] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.ct-mins { display: flex; gap: .375rem; }
.ct-min { min-width: 4.5rem; }
.ct-min:disabled { border-color: var(--line); color: var(--mute); opacity: .55; cursor: default; }
/* the chosen time went by while the panel was open: said in the error box's quiet style, the guest picks again */
.ct-gone { margin-bottom: .75rem; padding: .625rem .875rem; border-left: 1px solid var(--ink); background: rgba(255, 255, 255, .7); font-size: 1rem; }
.ct-gone[hidden] { display: none; }
.ct-closed { margin-top: 0; }
/* payment: the same square two-way switch as «Доставка / Самовывоз»; without ЮKassa just «при получении» */
.ct-pay { font-size: 1rem; color: var(--ink-2); }
.ct-pay[hidden] { display: none; }
.ct-paychoice { margin-bottom: 0; }
.ct-paychoice .ct-mode__opt { padding: .375rem .5rem; line-height: 1.2; }

/* delivery terms under the order (settings.delivery.note) */
.ct-terms { margin-top: 1.125rem; font-size: .875rem; color: var(--mute); }

/* delivery zone: a flat schematic (js/ui/zone-map.js) — the season's colour at low alpha, a thin ink line,
   the restaurant is an ink dot (the panel's one pink is the title's 注文); quiet labels; then the line about Яндекс Еда and the guest's checkbox */
.ct-zone[hidden], .ct-zone__map[hidden], .ct-zone__confirm[hidden] { display: none; }
.ct-zone .bk-label { margin-top: 1.625rem; }
.zm { max-width: 24rem; margin: 0; }
.zm__svg {
  width: 100%; height: auto;
  background: rgba(255, 255, 255, .45);
  border: 1px solid var(--line);
  overflow: visible;
}
.zm__zone {
  fill: var(--season); fill-opacity: .3;
  stroke: var(--ink); stroke-opacity: .7; stroke-width: 1; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.zm__mark circle { fill: var(--ink-2); }
.zm__mark text, .zm__home text {
  font-family: var(--font-sans);
  font-size: 10.5px; /* SVG user units: the map is 320 wide, so this follows its width */
  font-variant: all-small-caps; letter-spacing: .08em;
  fill: var(--ink-2);
  paint-order: stroke; stroke: rgba(247, 247, 246, .85); stroke-width: 3px; stroke-linejoin: round; /* a halo over the line */
}
.zm__home text { fill: var(--ink); font-variant: normal; letter-spacing: .12em; font-weight: 600; font-size: 9.5px; }
.zm__dot { fill: var(--ink); stroke: var(--paper); stroke-width: 1.5; vector-effect: non-scaling-stroke; } /* ink, not pink: one pink per screen */
.zm__cap { margin-top: .375rem; font-size: .75rem; color: var(--mute); }
.ct-zone__note { margin-top: .875rem; font-size: .9375rem; line-height: 1.45; color: var(--ink-2); }
.ct-zone__note .link { color: var(--ink); white-space: nowrap; }
.ct-zone__status { margin-top: .625rem; font-size: 1rem; }
.ct-zone__status:empty { display: none; }
.ct-zone__status[data-state='in'] { color: var(--ink); }
.ct-zone__status[data-state='out'], .ct-zone__status[data-state='not-found'] { color: var(--ink-2); }
.ct-zone__status[data-state='checking'] { color: var(--mute); }

/* «Мой адрес в зоне доставки»: a square box (no pills, no browser chrome), the whole row is the target */
.ct-zone__confirm {
  position: relative;
  display: flex; align-items: center; gap: .75rem;
  min-height: 2.75rem; margin-top: .5rem;
  font-size: 1.0625rem;
  cursor: pointer;
}
.ct-zone__check { position: absolute; opacity: 0; width: 1.25rem; height: 1.25rem; margin: 0; }
.ct-zone__box {
  flex: none; position: relative;
  width: 1.25rem; height: 1.25rem;
  border: 1px solid var(--ink);
  transition: background-color var(--dur-fast) linear;
}
.ct-zone__box::after {
  content: '';
  position: absolute; left: .375rem; top: .125rem;
  width: .3125rem; height: .625rem;
  border: solid var(--paper); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: 0;
}
.ct-zone__check:checked + .ct-zone__box { background: var(--ink); }
.ct-zone__check:checked + .ct-zone__box::after { opacity: 1; }
.ct-zone__check:focus-visible + .ct-zone__box { outline: 2px solid var(--focus); outline-offset: .1875rem; }

/* points from the guest card: one quiet block, square controls, no pink */
.ct-bonus { margin-top: .25rem; }
.ct-bonus .bk-label { margin-top: 1.625rem; }
.ct-bonus__line { font-size: 1rem; line-height: 1.45; }
.ct-bonus__line .link, .ct-bonus__card { white-space: nowrap; }
.ct-bonus__pick { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.125rem; margin-top: .75rem; }
.ct-bonus__qty { gap: .375rem; }
.ct-bonus__amount {
  width: 4.6em; min-height: 2.75rem; padding: .375rem 0;
  background: transparent;
  border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0;
  font-size: 1.25rem; font-weight: 300; text-align: center; font-variant-numeric: tabular-nums;
}
.ct-bonus__amount:focus-visible { outline: none; border-bottom-color: var(--ink); box-shadow: 0 1px 0 var(--ink); }
.ct-bonus__send { min-height: 2.75rem; padding-inline: 1.125rem; }
.ct-bonus__send[aria-busy='true'] { opacity: .6; cursor: progress; }
.ct-bonus .bk-field { margin-top: .875rem; }
.ct-bonus__code { font-size: 1.375rem; letter-spacing: .3em; font-variant-numeric: tabular-nums; }
.ct-bonus__change { font-size: 1rem; }
.ct-bonus__note { margin-top: .5rem; font-size: .875rem; color: var(--ink-2); }
.ct-bonus__note:empty { display: none; }

/* Итого · Баллами · К оплате — only while points are being written off */
.ct-sumup { margin: 0 0 .875rem; font-variant-numeric: tabular-nums; }
.ct-sumup div { display: flex; justify-content: space-between; align-items: baseline; padding: 2px 0; font-size: 1rem; color: var(--ink-2); }
.ct-sumup dd { margin: 0; }
.ct-sumup .ct-sumup__pay { margin-top: .25rem; padding-top: .5rem; border-top: 1px solid var(--line); font-size: 1.125rem; color: var(--ink); }

@media (max-width: 599px) {
  /* phones: no running text under 15px */
  .bk-missing, .ct-line__meta, .ct-free__text, .ct-bonus__note, .ct-terms { font-size: .9375rem; }
}

@media (prefers-reduced-motion: reduce) {
  .panel__sheet { will-change: auto; }
  .ct-koi { will-change: auto; }
}

/* «К этому берут» (js/ui/pairings-list.js): the dish panel and the order — a few quiet rows, «+ 190 ₽» adds one */
.pairs { margin-top: 1.375rem; }
.pairs__label { margin-bottom: .375rem; font-size: var(--fs-label); color: var(--ink-2); }
.pairs__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.pairs__item {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 2.75rem; padding: .25rem 0;
  border-bottom: 1px solid var(--line);
}
.pairs__name { min-width: 0; font-size: 1rem; line-height: 1.3; }
.pairs__weight { font-size: .875rem; color: var(--mute); }
.pairs__add { flex: none; font-size: .9375rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ct-pairs:empty { display: none; }

/* ---------- the news window (js/ui/news-modal.js): photo left, text right; menu page and home ---------- */
.news-modal .panel__sheet {
  width: min(57.5rem, calc(100vw - 2 * var(--gutter)));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
}
/* the full text of a news item is long: no wave or koi behind it, and the page behind it is barely there */
.news-modal .panel__sheet { background: rgba(243, 243, 242, .96); }
.news-modal .panel__waves, .news-modal .panel__koi { display: none; }
.news-modal__media {
  position: relative;
  grid-column: 1; grid-row: 1 / -1;
  display: grid; place-items: center;
  min-height: clamp(21.25rem, 36vw, 32.5rem);
  background: rgba(230, 230, 228, .72);
  overflow: hidden;
}
/* a poster (square, lettering to the edges) is shown whole; the same picture, blurred, fills the rest */
.news-modal__media--photo { background: var(--ink); }
.news-modal__media--photo::before {
  content: ''; position: absolute; inset: -10%;
  background: var(--news-bg) center / cover no-repeat;
  filter: blur(28px) brightness(.7);
}
.news-modal__cutout { width: 88%; height: auto; }
.news-modal__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.news-modal__media .plate { width: 62%; }
.news-modal .panel__head {
  grid-column: 2; grid-row: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 1rem;
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
}
.news-modal__meta {
  display: flex; align-items: center; gap: .5rem;
  font-size: var(--fs-label); color: var(--mute);
}
.news-modal__meta::before { content: ''; flex: none; width: .4375rem; height: .4375rem; border-radius: 50%; background: var(--line-strong); }
.news-modal__meta--season::before { background: var(--season); }
.news-modal__meta--promo::before { background: var(--ink); }
.news-modal .panel__close { grid-column: 2; grid-row: 1; margin-block: -.5rem; }
.news-modal .panel__title {
  grid-column: 1 / -1; grid-row: 2;
  flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: .75rem;
  white-space: normal;
  margin-top: clamp(1.125rem, 2vw, 1.75rem);
  font-size: clamp(1.75rem, 3vw, 2.625rem); line-height: 1.06;
}
.news-modal .panel__jp { font-size: 1.375rem; letter-spacing: .25em; line-height: 1; }
.news-modal__body { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; padding-top: .875rem; }
.news-modal__text { font-size: 1.0625rem; line-height: 1.55; color: var(--ink-2); }
.news-modal__text > * + * { margin-top: .75em; }
.news-modal__list { margin: 0; padding: 0; list-style: none; }
.news-modal__list li { position: relative; padding-left: 1.25em; }
.news-modal__list li::before { content: '—'; position: absolute; left: 0; color: var(--mute); }
.news-modal__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .875rem 1.75rem; margin-top: auto; padding-top: 2rem; }
.news-modal__go { min-height: 3rem; padding-inline: 1.625rem; }
.news-modal__back { font-size: 1rem; }
@media (max-width: 679px) {
  .news-modal .panel__sheet { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); }
  .news-modal__media { grid-row: 1; min-height: 0; aspect-ratio: 16 / 9; }
  .news-modal__media--photo { aspect-ratio: 4 / 3; max-height: 38dvh; width: 100%; }
  .news-modal__cutout { width: auto; height: 92%; }
  .news-modal .panel__head { grid-column: 1; grid-row: 2; padding-top: 1.25rem; }
  .news-modal__body { grid-column: 1; grid-row: 3; }
  .news-modal .panel__title { margin-top: .75rem; gap: .5rem; }
  .news-modal .panel__jp { font-size: 1.125rem; }
}