/* ============================================================================
   Toggle Coffee — storefront
   Dark, monochrome, Mont. Minimal ink-on-paper feel, inverted.

   Layout note (do not "simplify"): the menu page is an APP SHELL —
   the document never scrolls, only <main> scrolls inside a flex column.
   iPad kiosk browsers (WKWebView) drift sticky/fixed headers during
   momentum scrolling; a static flex row cannot move.
   ========================================================================= */

@font-face { font-family: "Mont"; src: url("/assets/fonts/Mont-Regular.woff") format("woff");  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Mont"; src: url("/assets/fonts/Mont-SemiBold.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Mont"; src: url("/assets/fonts/Mont-Bold.woff") format("woff");     font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Mont"; src: url("/assets/fonts/Mont-Black.woff2") format("woff2"),
                                       url("/assets/fonts/Mont-Black.woff") format("woff");    font-weight: 800; font-style: normal; font-display: swap; }

:root {
  /* surfaces — neutral dark greys to sit right on the near-black --bg */
  --bg:         #050505;
  --surface:    #131313;
  --surface-2:  #1b1b1b;
  --surface-3:  #252525;

  /* ink */
  --ink:        #f4efe6;
  --ink-2:      #a49f97;
  --ink-3:      #6a6560;

  /* lines */
  --line:       #232323;
  --line-2:     #343434;

  --accent:     #f4efe6;   /* inverted fills: buttons, active pill */
  --danger:     #e2685c;
  --ok:         #7bbd97;

  --rail-w:     16.5rem;
  --content-w:  46rem;
  --radius:     .75rem;
  --radius-lg:  1.125rem;

  --pad-x:      clamp(1.125rem, 3.5vw, 2.5rem);

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html { height: 100%; -webkit-text-size-adjust: 100%; }

body {
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: "Mont", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--ink); color: var(--bg); }

:focus-visible { outline: 2px solid var(--ink-2); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--bg);
  padding: .625rem 1rem; border-radius: 0 0 .5rem 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* hide scrollbars everywhere — the kiosk is touch-driven */
.scroll-y, .cats, .sheet__body { scrollbar-width: none; -ms-overflow-style: none; }
.scroll-y::-webkit-scrollbar,
.cats::-webkit-scrollbar,
.sheet__body::-webkit-scrollbar { width: 0; height: 0; display: none; }


/* ============================================================================
   APP SHELL (menu page)
   ========================================================================= */

body.menu-page { height: 100%; overflow: hidden; }

.shell {
  height: 100%;
  display: flex;
  flex-direction: column;          /* narrow: rail on top   */
}

/* ---------- navigation rail ---------- */

.rail {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top);
}
.rail > .brandbar { max-width: none; margin: 0; border-bottom: 1px solid var(--line); }

/* ---------- site header (identical on every page) ----------
   .brandbar = one lockup: logo + name + tagline, then a small utility pill.
   On the menu page it lives at the top of .rail; on checkout / order pages
   inside .site-header. Same markup, same metrics everywhere. */
.brandbar {
  flex: 0 0 auto;
  width: 100%; max-width: 64rem; margin: 0 auto;
  display: flex; align-items: center; gap: 1rem;
  min-height: 3.75rem;
  padding: .75rem var(--pad-x);
}

.brand { display: flex; align-items: center; gap: .6875rem; min-width: 0; }
.brand__logo {
  width: 2.5rem; height: 2.5rem; flex: 0 0 auto;
  border-radius: 50%;
}
.brand__name { display: flex; flex-direction: column; min-width: 0; gap: .125rem; }
.brand__name b {
  font-weight: 800; font-size: 1.0625rem; letter-spacing: -.02em; line-height: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand__name small {
  color: var(--ink-3); font-size: .625rem; font-weight: 600; line-height: 1;
  letter-spacing: .13em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.brandbar__action {
  flex: 0 0 auto; margin-left: auto;
  display: inline-flex; align-items: center; gap: .3125rem;
  min-height: 2.25rem; padding: 0 .8125rem;
  border: 1px solid var(--line-2); border-radius: 999px;
  color: var(--ink-2); font-size: .75rem; font-weight: 700; letter-spacing: .04em;
  white-space: nowrap;
  transition: color .15s, border-color .15s, transform .12s;
}
.brandbar__action:hover { color: var(--ink); border-color: var(--ink-3); }
.brandbar__action:active { transform: scale(.96); }

/* account button — sits next to the language pill in the header */
.brandbar__right { flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: .375rem; }
.brandbar__right .brandbar__action { margin-left: 0; }

.acct-btn {
  position: relative; flex: 0 0 auto;
  width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  border: 1px solid var(--line-2); border-radius: 50%;
  background: var(--surface); color: var(--ink-2);
  transition: color .15s, border-color .15s, background .15s, transform .12s;
}
.acct-btn:hover { color: var(--ink); border-color: var(--ink-3); }
.acct-btn:active { transform: scale(.94); }
.acct-btn.is-in { color: var(--ink); border-color: var(--ink-3); }
.acct-btn__ava { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
/* small mark so a signed-in guest can tell at a glance */
.acct-btn__dot {
  position: absolute; right: -1px; bottom: -1px;
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--ok); border: 2px solid var(--bg);
}

/* account sheet */
.ac-who { text-align: center; margin-bottom: 1.25rem; }
.ac-who b { display: block; font-size: 1.0625rem; font-weight: 800; letter-spacing: -.01em; }
.ac-who small { color: var(--ink-3); font-size: .8125rem; }

.ac-bal {
  padding: 1rem;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--surface-2);
}
.ac-bal__row { display: flex; align-items: center; gap: 1rem; }
.ac-bal__label {
  display: block; margin-bottom: .1875rem;
  color: var(--ink-3); font-size: .625rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.ac-bal__sum {
  font-weight: 800; font-size: 1.75rem; line-height: 1;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.ac-bal__add {
  margin-left: auto; flex: 0 0 auto;
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent); color: var(--bg);
  font-size: 1.5rem; font-weight: 400; line-height: 1;
  transition: transform .12s, opacity .15s;
}
.ac-bal__add:hover { opacity: .88; }
.ac-bal__add:active { transform: scale(.92); }
.ac-topup { margin-top: .875rem; padding-top: .875rem; border-top: 1px solid var(--line-2); }
.ac-topup b { display: block; margin-bottom: .25rem; font-size: .875rem; font-weight: 700; }
.ac-topup p { color: var(--ink-2); font-size: .8125rem; line-height: 1.5; }
.ac-topup p b { display: inline; color: var(--ink); }

.ac-links { display: flex; flex-direction: column; gap: .75rem; margin-top: 1.25rem; }
.ac-signout {
  width: 100%; padding: .625rem;
  color: var(--ink-3); font-size: .8125rem; font-weight: 600;
}
.ac-signout:hover { color: var(--danger); }

.ac-forms { display: flex; flex-direction: column; gap: .875rem; }
.ac-form { display: flex; flex-direction: column; gap: .875rem; }
.ac-field { display: flex; flex-direction: column; gap: .375rem; }
.ac-field > span { color: var(--ink-2); font-size: .8125rem; font-weight: 600; }
.ac-field > small { color: var(--ink-3); font-size: .75rem; }
.ac-field input {
  width: 100%; padding: .75rem .875rem;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--surface-2); color: var(--ink);
  font: inherit; font-size: 1rem;
}
.ac-field input:focus { outline: none; border-color: var(--ink-3); }
.ac-switch { text-align: center; color: var(--ink-3); font-size: .8125rem; }
.ac-switch button {
  color: var(--ink); font: inherit; font-weight: 600;
  border-bottom: 1px solid var(--line-2);
}
.ac-switch button:hover { border-color: var(--ink-3); }

/* category list — horizontal strip on narrow.
   The strip fades out on whichever side still has content to scroll to, so the
   cut-off chip reads as "there is more" instead of as a clipping bug.
   storefront.js toggles .at-start / .at-end. */
.cats {
  --cats-fade: 1.75rem;
  display: flex; gap: .5rem;
  overflow-x: auto; overflow-y: hidden;
  padding: .1875rem var(--pad-x) .9375rem;
  scroll-padding-inline: var(--pad-x);
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--cats-fade),
                                      #000 calc(100% - var(--cats-fade)), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 var(--cats-fade),
                                      #000 calc(100% - var(--cats-fade)), transparent 100%);
}
.cats.at-start {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--cats-fade)), transparent 100%);
          mask-image: linear-gradient(to right, #000 calc(100% - var(--cats-fade)), transparent 100%);
}
.cats.at-end {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--cats-fade));
          mask-image: linear-gradient(to right, transparent 0, #000 var(--cats-fade));
}
.cats.at-start.at-end { -webkit-mask-image: none; mask-image: none; }

.cats a {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: .5rem;
  white-space: nowrap;
  min-height: 2.5rem;                 /* comfortable thumb target */
  padding: 0 1rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  font-size: .875rem; font-weight: 600; letter-spacing: -.005em;
  transition: background .18s, color .18s, border-color .18s, transform .12s;
}
.cats a:hover { color: var(--ink); background: var(--surface-2); border-color: var(--line-2); }
.cats a:active { transform: scale(.96); }
/* personal category (015): a quiet accent so it reads as "yours" */
.cats a.is-personal { border-color: var(--ink-3); color: var(--ink); }
.category--personal .cat-head h2 { color: var(--ink); }
.cats a.active {
  background: var(--accent); border-color: var(--accent); color: var(--bg);
  font-weight: 700;
}
.cats .n { display: none; }

@media (prefers-reduced-motion: reduce) { .cats { scroll-behavior: auto; } }

/* ---------- content pane ---------- */

.pane {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.pane > main {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
}
.pane > main::-webkit-scrollbar { width: 0; height: 0; display: none; }

.wrap {
  width: 100%;
  max-width: var(--content-w);
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 2.75rem) var(--pad-x) 2.5rem;
}


/* ============================================================================
   MENU CONTENT
   ========================================================================= */

.loading { color: var(--ink-3); text-align: center; padding: 4rem 0; }

/* one category at a time (switched from the rail) */
.category { display: none; }
.category.is-active { display: block; animation: fade-up .22s cubic-bezier(.2,.7,.3,1) both; }
@keyframes fade-up { from { opacity: 0; transform: translateY(.5rem); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .category.is-active { animation: none; } }

.cat-head { margin-bottom: 1.5rem; }
.cat-head h2 {
  font-weight: 800;
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -.03em;
}
.cat-note {
  margin-top: .5rem;
  color: var(--ink-2); font-size: .875rem; max-width: 42ch;
}

.items { list-style: none; }

/* in-category subgroup heading (e.g. Авторские напитки → Сладкие / Без сахара) */
.subhead {
  margin: 2rem 0 .5rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--line-2);
  font-weight: 700; font-size: .8125rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-2);
}
.subhead:first-of-type { margin-top: 0; }
.subhead + .items .item:first-child { border-top: 0; padding-top: 1rem; }

.item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: .25rem 1rem;
  padding: 1.125rem 0;
  border-top: 1px solid var(--line);
}
.item:first-child { border-top: 0; padding-top: 0; }
.item.has-photo { grid-template-columns: auto 1fr auto; }

.item-photo {
  width: 4rem; height: 4rem;
  border-radius: var(--radius);
  object-fit: cover;
  background: var(--surface-2);
}

.item-main { min-width: 0; }


.item .name {
  display: flex; align-items: center; flex-wrap: wrap; gap: .375rem .5rem;
  font-weight: 600; font-size: 1.0625rem; letter-spacing: -.01em;
  line-height: 1.3;
}
.item .desc {
  margin-top: .25rem;
  color: var(--ink-2); font-size: .8125rem; line-height: 1.45; max-width: 44ch;
}

/* price + add */
.price-add { display: flex; align-items: center; gap: .75rem; }
.item .price {
  font-weight: 700; font-size: 1rem; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.add-btn {
  flex: 0 0 auto;
  width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--surface);
  font-size: 1.25rem; font-weight: 400; line-height: 1; color: var(--ink);
  transition: background .15s, color .15s, border-color .15s, transform .12s;
}
.add-btn:hover { background: var(--surface-3); border-color: var(--line-2); }
.add-btn:active, .add-btn.added {
  background: var(--accent); border-color: var(--accent); color: var(--bg);
  transform: scale(.88);
}

/* variants — right column of the item, top-aligned; a column when there are
   several prices, so every pill lines up on the same right edge */
.variants {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: .375rem; min-width: 0;
}
/* several prices: equal-width pills make a tidy stack */
.variants--stack { align-items: stretch; }

.variants > span,
.variants .var-add {
  display: flex; align-items: center;
  gap: .5rem;
  padding: .3125rem .3125rem .3125rem .8125rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  font-size: .8125rem; font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1.2; white-space: nowrap;
}
/* static pills (stop-list / ordering off) have no plus — even them out */
.variants > span { padding-right: .8125rem; }

.var-label { color: var(--ink-3); }
.variants b { margin-left: auto; color: var(--ink); font-weight: 700; }

.variants .plus {
  flex: 0 0 auto;
  width: 1.5rem; height: 1.5rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--surface-3); color: var(--ink);
  font-size: .9375rem; font-weight: 400; line-height: 1;
  transition: background .15s, color .15s;
}
.variants .var-add {
  transition: background .15s, color .15s, border-color .15s, transform .12s;
}
.variants .var-add:hover { background: var(--surface-2); border-color: var(--line-2); color: var(--ink); }
.variants .var-add:hover .plus { background: var(--ink); color: var(--bg); }
.variants .var-add:active { transform: scale(.97); }
.variants .var-add.added {
  background: var(--accent); border-color: var(--accent); color: var(--bg); transform: scale(.97);
}
.variants .var-add.added .var-label { color: rgba(5,5,5,.62); }
.variants .var-add.added b { color: var(--bg); }
.variants .var-add.added .plus { background: rgba(5,5,5,.16); color: var(--bg); }

/* phones: shave the pill down so the name keeps its room */
@media (max-width: 26rem) {
  .variants > span,
  .variants .var-add { font-size: .75rem; gap: .375rem; padding-left: .5625rem; }
  .variants > span { padding-right: .5625rem; }
  .variants .plus { width: 1.375rem; height: 1.375rem; font-size: .875rem; }
}

/* grid tiles: pills sit at the bottom of the card, always stacked and compact */
.items--grid .variants {
  align-items: stretch; margin-top: auto; padding: 0 .875rem .875rem;
}
.items--grid .variants > span,
.items--grid .variants .var-add { font-size: .75rem; gap: .375rem; padding-left: .5625rem; }
.items--grid .variants > span { padding-right: .5625rem; }
.items--grid .variants .plus { width: 1.375rem; height: 1.375rem; font-size: .875rem; }


/* tags */
.tag {
  padding: .1875rem .4375rem;
  border: 1px solid var(--line-2); border-radius: .3125rem;
  color: var(--ink-3);
  font-size: .5625rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
}
.tag.is-new { border-color: var(--ink-2); color: var(--ink); }

.item.is-out { opacity: .45; }
.item.is-out .item-photo { filter: grayscale(1); }


/* ----------------------------------------------------------------------------
   Per-category layout: large tiles, 2 per row  (categories.layout = 'grid')
   -------------------------------------------------------------------------- */
.items--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.items--grid .item,
.items--grid .item.has-photo {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.items--grid .item:first-child,
.subhead + .items--grid .item:first-child { padding-top: 0; }
.items--grid .item-photo {
  width: 100%; height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 0;
}
.items--grid .item-main { padding: .875rem; min-width: 0; }
.items--grid .name { font-size: 1rem; line-height: 1.25; }
.items--grid .desc { max-width: none; }
.items--grid .item .price-add {
  margin-top: auto;
  justify-content: space-between;
  padding: 0 .875rem .875rem;
}
@media (max-width: 30rem) {
  .items--grid { gap: .625rem; }
  .items--grid .item-main { padding: .75rem; }
  .items--grid .item .price-add,
  .items--grid .variants { padding: 0 .75rem .75rem; }
}


/* ============================================================================
   FOOTER
   ========================================================================= */

.site-footer {
  margin-top: 3.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  color: var(--ink-3); font-size: .8125rem;
}
.foot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.5rem; }
.foot-grid b {
  display: block; margin-bottom: .25rem;
  color: var(--ink-2); font-size: .625rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.foot-grid a { color: var(--ink-2); }
.foot-grid a:hover { color: var(--ink); }
.fineprint { margin-top: 1.5rem; color: var(--ink-3); font-size: .75rem; }

/* kiosk: footer is a QR that sends the guest to the phone-friendly site */
.kiosk-foot { display: flex; align-items: center; gap: 1.25rem; }
.kiosk-foot__qr {
  flex: 0 0 auto; width: 6.5rem; height: 6.5rem;
  background: #fff; border-radius: .5rem; padding: .4rem;
}
.kiosk-foot__qr svg { display: block; width: 100%; height: 100%; }
.kiosk-foot__text b {
  display: block; margin-bottom: .25rem;
  color: var(--ink); font-size: .9375rem; font-weight: 700;
}
.kiosk-foot__text p { color: var(--ink-3); font-size: .8125rem; line-height: 1.45; max-width: 40ch; }


/* ============================================================================
   CART BAR  (static flex row — never fixed, see layout note)
   ========================================================================= */

.cart-bar {
  flex: 0 0 auto;
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding: .75rem var(--pad-x) calc(.75rem + env(safe-area-inset-bottom));
}
.cart-bar__open {
  width: 100%; max-width: var(--content-w); margin: 0 auto;
  display: flex; align-items: center; gap: .75rem;
  padding: .875rem 1.125rem;
  border-radius: var(--radius);
  background: var(--accent); color: var(--bg);
  font-weight: 700; font-size: .9375rem;
  transition: transform .12s;
}
.cart-bar__open:active { transform: scale(.99); }
.cart-bar__count {
  display: grid; place-items: center;
  min-width: 1.5rem; height: 1.5rem; padding: 0 .375rem;
  border-radius: 999px; background: var(--bg); color: var(--ink);
  font-size: .8125rem; font-weight: 700;
}
.cart-bar__sum { margin-left: auto; font-variant-numeric: tabular-nums; }


/* ============================================================================
   CART SHEET
   ========================================================================= */

.sheet { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; }
.sheet__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.72); }
.sheet__panel {
  position: relative;
  width: 100%; max-width: var(--content-w); margin: 0 auto;
  max-height: 85vh;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line-2);
  box-shadow: 0 -1.5rem 3rem rgba(0,0,0,.5);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 1.25rem var(--pad-x) calc(1.25rem + env(safe-area-inset-bottom));
  animation: sheet-up .24s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes sheet-up { from { transform: translateY(1.5rem); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sheet__panel { animation: none; } }

.sheet__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-bottom: .25rem;
}
.sheet__head b { font-weight: 800; font-size: 1.125rem; letter-spacing: -.02em; }
.sheet__head-actions { display: flex; align-items: center; gap: .5rem; }
.sheet__clear {
  padding: .375rem .625rem; border-radius: 999px;
  color: var(--danger); font-size: .75rem; font-weight: 700; letter-spacing: .03em;
  transition: background .15s;
}
.sheet__clear:hover { background: rgba(226,104,92,.12); }
.sheet__clear:active { transform: scale(.95); }
.sheet__x {
  width: 2rem; height: 2rem; display: grid; place-items: center;
  border-radius: 50%; color: var(--ink-3); font-size: .875rem;
}
.sheet__x:hover { color: var(--ink); background: var(--surface-3); }

.sheet__hint {
  margin-bottom: .25rem;
  color: var(--ink-3); font-size: .6875rem; letter-spacing: .02em;
}

.sheet__body { overflow-y: auto; overscroll-behavior: contain; }
.cl-empty { color: var(--ink-3); padding: 1.75rem 0; text-align: center; }

/* --- cart row: swipe left reveals a delete button, tap it to remove --- */
.cl-row {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  transition: max-height .3s ease, opacity .3s ease;
}
.cl-row--removing { opacity: 0; border-bottom-color: transparent; }

.cl-row__bg {
  position: absolute; top: 0; bottom: 0; right: 0;
  width: 5.5rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem;
  border: 0; padding: 0;
  background: var(--danger); color: #fff;
  font: inherit; font-size: .625rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer;
}
.cl-row__bg svg { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; }
.cl-row__bg:active { filter: brightness(.88); }

.cl-row__fg {
  position: relative;
  display: flex; align-items: center; gap: 1rem;
  padding: .875rem 0;
  background: var(--surface);
  touch-action: pan-y;
  transition: transform .28s cubic-bezier(.22,.61,.36,1);
}
.cl-row.is-dragging .cl-row__fg { transition: none; cursor: grabbing; }
.cl-row--removing .cl-row__fg { transform: translateX(-100%); transition: transform .3s ease; }

.cl-name { flex: 1 1 auto; min-width: 0; font-size: .9375rem; font-weight: 600; line-height: 1.3; }
.cl-name span { display: block; margin-top: .125rem; color: var(--ink-3); font-size: .8125rem; font-weight: 400; }
.cl-qty { flex: 0 0 auto; display: flex; align-items: center; gap: .625rem; }
.cl-qty span { min-width: 1.25rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.cl-qty button {
  width: 1.875rem; height: 1.875rem; display: grid; place-items: center;
  border: 1px solid var(--line-2); border-radius: 50%; color: var(--ink-2);
  font-size: 1rem; line-height: 1;
  transition: color .15s, border-color .15s, transform .12s;
}
.cl-qty button:hover { color: var(--ink); border-color: var(--ink-3); }
.cl-qty button:active { transform: scale(.9); }

.sheet__foot { padding-top: 1rem; margin-top: .25rem; border-top: 1px solid var(--line-2); }
.sheet__total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: .875rem;
  font-weight: 700; font-size: 1.0625rem;
}
.sheet__total span { color: var(--ink-2); font-weight: 500; font-size: .9375rem; }
.sheet__total b { font-variant-numeric: tabular-nums; }

.btn-primary {
  display: block; width: 100%; text-align: center;
  padding: .9375rem 1.25rem;
  border-radius: var(--radius);
  background: var(--accent); color: var(--bg);
  font-weight: 700; font-size: .9375rem;
  transition: transform .12s, opacity .15s;
}
.btn-primary:active { transform: scale(.99); }
.btn-primary.is-disabled { opacity: .35; pointer-events: none; }


/* ============================================================================
   OPTION / ADD-ON CONFIGURATOR  (shares the .sheet shell)
   ========================================================================= */

#optSheet .sheet__body { padding: .25rem 0 .375rem; }

.opt-group { padding: .625rem 0; border-bottom: 1px solid var(--line); }
.opt-group:first-child { padding-top: .375rem; }
.opt-group:last-child { border-bottom: 0; }
.opt-group.is-missing .opt-group__title { color: var(--danger); }

/* lone yes/no checkbox — no heading, sits tight */
.opt-group--toggle { padding: .25rem 0; }

/* pick-one dropdown group — name and select share one row */
.opt-group--select { display: flex; align-items: center; gap: .75rem; }
.opt-group__label {
  flex: 0 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 700; font-size: .875rem; letter-spacing: -.01em;
}
.opt-group--select .opt-select { flex: 1 1 55%; min-width: 0; margin-top: 0; }
.opt-group.is-missing .opt-group__label { color: var(--danger); }

/* hidden by another choice (e.g. "декаф" hides the bean group) */
.opt-group.opt-group--hidden { display: none; }

.opt-group__title {
  display: flex; align-items: baseline; gap: .5rem;
  margin-bottom: .25rem;
  font-weight: 700; font-size: .875rem; letter-spacing: -.01em;
}
.opt-group__hint {
  color: var(--ink-3); font-size: .5625rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}

.opt-row {
  display: flex; align-items: center; gap: .625rem;
  padding: .375rem .25rem;
  cursor: pointer;
}
.opt-row input { flex: 0 0 auto; width: 1rem; height: 1rem; accent-color: var(--accent); }
.opt-row__name { flex: 1 1 auto; min-width: 0; font-size: .875rem; line-height: 1.3; }
.opt-row__price {
  flex: 0 0 auto; color: var(--ink-2);
  font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.opt-row.is-disabled { opacity: .4; cursor: default; }

/* pick-one groups render as a dropdown */
.opt-select {
  width: 100%;
  margin-top: .0625rem;
  padding: .5625rem 2rem .5625rem .75rem;
  background-color: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  color: var(--ink);
  font: inherit; font-size: .875rem;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='none' stroke='%23a79e91' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M2.5 4.5 6 8l3.5-3.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right .6875rem center;
}
.opt-select:focus { outline: none; border-color: var(--ink-3); }
.opt-group.is-missing .opt-select { border-color: var(--danger); }


/* ============================================================================
   SECONDARY PAGES (checkout, order status) — normal document scroll
   ========================================================================= */

/* Same app shell as the menu page: the document never scrolls, the header is a
   static flex row and <main> is the only scroll region. Required for iPad kiosk
   browsers (WKWebView), where a sticky header drifts during momentum scroll. */
body.page {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* soft ambient gradient so the header -> content seam isn't a hard edge.
     Fixed to the viewport (main is the scroll region), fades to --bg. */
  background:
    linear-gradient(180deg, #111114 0, rgba(5, 5, 5, 0) 44vh),
    radial-gradient(120% 60% at 50% -8%, #131317 0, rgba(5, 5, 5, 0) 60%),
    var(--bg);
}
body.page > main {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
  padding-bottom: env(safe-area-inset-bottom);
}
body.page > main::-webkit-scrollbar { width: 0; height: 0; display: none; }

.site-header {
  flex: 0 0 auto;
  background: transparent;                 /* let body.page's gradient run through */
  border-bottom: 1px solid rgba(255, 255, 255, .04);
  padding-top: env(safe-area-inset-top);
}

.page-title {
  margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 800; font-size: clamp(1.625rem, 5vw, 2.25rem);
  letter-spacing: -.03em; line-height: 1.05;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

/* ---------- checkout ---------- */

.checkout {
  max-width: 64rem; margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 2.5rem) var(--pad-x) 4rem;
}
.co-grid { display: grid; gap: 1.25rem; align-items: start; }

/* form */
.co-form { padding: .25rem 1.25rem; }
.co-sec { padding: 1.25rem 0; border-top: 1px solid var(--line); }
.co-sec:first-of-type, .co-form > .co-sec:first-child { border-top: 0; }
.co-sec__title {
  margin-bottom: .875rem;
  font-size: .6875rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}
/* direct children only — inside .co-row2 the fields sit side by side */
.co-sec > .co-field + .co-field,
.co-sec > .co-row2 + .co-field { margin-top: .875rem; }

.seg { display: flex; gap: .5rem; flex-wrap: wrap; }
.seg__opt {
  flex: 1 1 8rem; text-align: center; cursor: pointer;
  padding: .8125rem .75rem;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  font-size: .9375rem; font-weight: 600; color: var(--ink-2);
  transition: background .15s, color .15s, border-color .15s;
}
.seg__opt:hover { border-color: var(--ink-3); color: var(--ink); }
.seg__opt input { position: absolute; opacity: 0; pointer-events: none; }
.seg__opt:has(input:checked) { background: var(--accent); border-color: var(--accent); color: var(--bg); }

/* "Когда" — a pill toggle inside a track */
.seg--when {
  gap: .25rem;
  padding: .25rem;
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
}
.seg--when .seg__opt {
  flex: 1 1 0;
  border: 0; border-radius: calc(var(--radius) - .1875rem);
  padding: .625rem .5rem;
  font-size: .875rem;
}
.seg--when .seg__opt:hover { background: var(--surface-2); color: var(--ink); }
.seg--when .seg__opt:has(input:checked) { background: var(--accent); color: var(--bg); }

.co-field { display: flex; flex-direction: column; gap: .4375rem; }
.co-field > label {
  color: var(--ink-3); font-size: .6875rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.co-field > label .opt { font-weight: 500; letter-spacing: .04em; text-transform: none; opacity: .8; }
.co-field > input,
.co-field > textarea,
.co-field > select {
  width: 100%;
  padding: .8125rem .875rem;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--radius);
  font: inherit; font-size: .9375rem;
  transition: border-color .15s;
}
.co-field > input::placeholder,
.co-field > textarea::placeholder { color: var(--ink-3); }
.co-field > input:focus,
.co-field > textarea:focus,
.co-field > select:focus { border-color: var(--ink-2); outline: none; }
.co-field > textarea { resize: vertical; min-height: 3.25rem; }

.co-note { color: var(--ink-2); font-size: .8125rem; line-height: 1.45; }

/* compact one-line control: label + dropdown share a row */
.co-inline { display: flex; align-items: center; gap: .75rem; margin-top: .875rem; }
.co-inline__label {
  flex: 0 0 auto;
  color: var(--ink-3); font-size: .6875rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.co-select {
  flex: 1 1 auto; min-width: 0;
  padding: .75rem 2.25rem .75rem .875rem;
  background-color: var(--bg); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--radius);
  font: inherit; font-size: .9375rem; font-variant-numeric: tabular-nums;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='none' stroke='%23a79e91' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M2.5 4.5 6 8l3.5-3.5'/></svg>");
  background-repeat: no-repeat; background-position: right .8125rem center;
  transition: border-color .15s;
}
.co-select:focus { border-color: var(--ink-2); outline: none; }

.co-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .875rem; }

/* signed-in banner on checkout */
.co-user {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  margin-bottom: .875rem; padding: .625rem .75rem;
  background: var(--surface-2); border-radius: var(--radius);
  font-size: .8125rem;
}
.co-user__who { color: var(--ink-2); }
.co-user__who b { color: var(--ink); font-weight: 700; }
.co-user__link { color: var(--ink-2); border-bottom: 1px solid var(--line-2); }
.co-user__link:hover { color: var(--ink); }

/* optional sign-up inside the contacts block */
.co-signup { margin-top: 1rem; padding-top: .875rem; border-top: 1px solid var(--line); }
.co-signup__toggle { display: flex; align-items: flex-start; gap: .625rem; cursor: pointer; }
.co-signup__toggle input { flex: 0 0 auto; margin-top: .125rem; width: 1rem; height: 1rem; accent-color: var(--accent); }
.co-signup__toggle b { display: block; font-size: .875rem; font-weight: 700; }
.co-signup__toggle small { display: block; margin-top: .0625rem; color: var(--ink-3); font-size: .75rem; line-height: 1.35; }
.co-signup__pass { margin-top: .875rem; }
.co-signup__pass .co-note { margin-top: .375rem; }
.co-signup__login { margin-top: .75rem; }
.co-signup__login a { color: var(--ink); border-bottom: 1px solid var(--line-2); }
.co-signup__login a:hover { border-color: var(--ink-3); }

/* "Sign in with Yandex" */
.btn-yandex {
  display: flex; align-items: center; justify-content: center; gap: .625rem;
  width: 100%; padding: .875rem 1.25rem;
  border-radius: var(--radius);
  background: #fc3f1d; color: #fff;
  font-weight: 700; font-size: .9375rem;
  transition: transform .12s, filter .15s;
}
.btn-yandex:hover { filter: brightness(1.06); }
.btn-yandex:active { transform: scale(.99); }
.btn-yandex__logo {
  display: grid; place-items: center;
  width: 1.375rem; height: 1.375rem; border-radius: 50%;
  background: #fff; color: #fc3f1d;
  font-size: .875rem; font-weight: 800; line-height: 1;
}
.btn-yandex--sm { padding: .6875rem 1rem; font-size: .875rem; }

.or-line {
  display: flex; align-items: center; gap: .75rem;
  margin: .875rem 0;
  color: var(--ink-3); font-size: .6875rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.or-line::before, .or-line::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--line-2);
}

/* ---------- account pages ---------- */
.acct {
  max-width: 34rem; margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 2.5rem) var(--pad-x) 4rem;
  display: flex; flex-direction: column; gap: 1rem;
}
.acct--narrow { max-width: 26rem; }
.acct__card { padding: 1.25rem; }
.acct__avatar { display: flex; justify-content: center; margin-bottom: 1rem; }
.acct__avatar img { width: 3.5rem; height: 3.5rem; border-radius: 50%; object-fit: cover; background: var(--surface-2); }
.acct__submit { margin-top: .25rem; }
.acct__aside { margin-top: .875rem; }
.co-ok {
  padding: .75rem .875rem; border-radius: var(--radius);
  background: rgba(123,189,151,.12); border: 1px solid rgba(123,189,151,.4);
  color: var(--ok); font-size: .8125rem;
}
.acct__pass > summary {
  cursor: pointer; list-style: none;
  font-size: .6875rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}
.acct__pass > summary::-webkit-details-marker { display: none; }
.acct__pass > summary::after { content: " ▾"; }
.acct__pass[open] > summary::after { content: " ▴"; }
.acct__pass .co-form { padding: 0; }
.acct__pass .co-sec { padding: .875rem 0 0; border-top: 0; }

.acct-orders { list-style: none; display: flex; flex-direction: column; }
.acct-orders li + li { border-top: 1px solid var(--line); }
.acct-order {
  display: grid; grid-template-columns: 1fr auto auto;
  align-items: center; gap: .375rem .75rem;
  padding: .8125rem 0;
}
.acct-order:hover .acct-order__main b { text-decoration: underline; }
.acct-order__main b { display: block; font-size: .9375rem; font-weight: 700; }
.acct-order__main small { display: block; margin-top: .125rem; color: var(--ink-3); font-size: .75rem; }
.acct-order__status {
  padding: .1875rem .4375rem; border-radius: .3125rem;
  border: 1px solid var(--line-2); color: var(--ink-3);
  font-size: .5625rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.acct-order__status--ready { border-color: var(--ok); color: var(--ok); }
.acct-order__status--canceled { opacity: .55; text-decoration: line-through; }
.acct-order__sum { font-size: .9375rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* order summary card */
.co-card { padding: 1.25rem; }
.co-card__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-bottom: .25rem;
}
.co-card__head .co-sec__title { margin-bottom: 0; }
.co-muted { color: var(--ink-3); font-size: .875rem; padding: .5rem 0 1rem; }

.co-lines { display: flex; flex-direction: column; }
.co-line {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center; gap: .25rem .75rem;
  padding: .8125rem 0;
  border-bottom: 1px solid var(--line);
}
.co-line:first-child { padding-top: 0; }
.co-line__img {
  grid-row: span 2; width: 2.75rem; height: 2.75rem;
  border-radius: .5rem; object-fit: cover; background: var(--surface-2);
}
.co-line__main { min-width: 0; }
.co-line__name { display: block; font-size: .9375rem; font-weight: 600; line-height: 1.3; }
.co-line__opts { display: block; margin-top: .125rem; color: var(--ink-2); font-size: .75rem; line-height: 1.35; }
.co-line__unit { display: block; margin-top: .125rem; color: var(--ink-3); font-size: .75rem; }
.co-line__sum { font-size: .9375rem; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }

.co-qty { display: flex; align-items: center; gap: .5rem; }
.co-qty span { min-width: 1.125rem; text-align: center; font-weight: 700; font-size: .875rem; font-variant-numeric: tabular-nums; }
.co-qty button {
  width: 1.75rem; height: 1.75rem; display: grid; place-items: center;
  border: 1px solid var(--line-2); border-radius: 50%; color: var(--ink-2);
  font-size: .9375rem; line-height: 1;
  transition: color .15s, border-color .15s, transform .12s;
}
.co-qty button:hover { color: var(--ink); border-color: var(--ink-3); }
.co-qty button:active { transform: scale(.9); }

.co-totals { padding-top: .875rem; }
.co-totals__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .25rem 0; color: var(--ink-2); font-size: .875rem;
}
.co-totals__row span:last-child { font-variant-numeric: tabular-nums; }
.co-totals__row--grand {
  margin-top: .5rem; padding-top: .75rem;
  border-top: 1px solid var(--line-2);
  color: var(--ink); font-size: 1.0625rem; font-weight: 700;
}
.co-totals__row--grand b { font-variant-numeric: tabular-nums; }

.co-pay { margin: 1rem 0; color: var(--ink-3); font-size: .8125rem; line-height: 1.45; }
.co-warn { margin-top: .75rem; color: var(--danger); font-size: .8125rem; }
.co-error {
  margin-bottom: 1rem;
  padding: .75rem .875rem; border-radius: var(--radius);
  background: rgba(226,104,92,.12); color: var(--danger); font-size: .875rem;
}

.btn-ghost {
  display: block; width: 100%; text-align: center;
  padding: .875rem 1.25rem;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  color: var(--ink-2); font-weight: 600; font-size: .9375rem;
  transition: color .15s, border-color .15s;
}
.btn-ghost:hover { color: var(--ink); border-color: var(--ink-3); }

/* ---------- order status ---------- */

.order-status {
  max-width: 34rem; margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 2.5rem) var(--pad-x) 4rem;
  display: flex; flex-direction: column; gap: 1rem;
}

.os-hero { text-align: center; padding: .5rem 0 1.5rem; }
.os-label {
  display: block; margin-bottom: .625rem;
  color: var(--ink-3); font-size: .625rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.os-num {
  font-weight: 800; font-size: clamp(2rem, 8vw, 2.75rem);
  letter-spacing: -.02em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.os-num { font-size: clamp(2.75rem, 12vw, 4rem); }   /* daily number is the headline now */
.os-code {
  display: inline-block; margin-top: .5rem;
  color: var(--ink-3); font-size: .75rem; font-weight: 600;
  letter-spacing: .04em; font-variant-numeric: tabular-nums;
}
.os-headline {
  margin-top: 1.125rem;
  font-weight: 800; font-size: clamp(1.125rem, 4vw, 1.375rem); letter-spacing: -.02em;
}
.os-hero.is-canceled .os-num,
.os-hero.is-canceled .os-headline { color: var(--danger); }
.os-sub { margin-top: .375rem; color: var(--ink-2); font-size: .875rem; }

/* live status update — brief pulse when track.js swaps the copy/progress */
@keyframes os-bump { 0% { transform: none; } 30% { transform: scale(1.015); } 100% { transform: none; } }
.os-hero--bump { animation: os-bump .5s ease-out; }
@media (prefers-reduced-motion: reduce) { .os-hero--bump { animation: none; } }

/* progress */
.os-steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: .5rem; }
.os-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.os-step::before {
  content: ""; position: absolute; top: .4375rem; right: 50%; width: 100%; height: 2px;
  background: var(--line-2);
}
.os-step:first-child::before { display: none; }
.os-step.is-done::before, .os-step.is-current::before { background: var(--ink); }
.os-step__dot {
  position: relative; z-index: 1;
  width: 1rem; height: 1rem; border-radius: 50%;
  border: 2px solid var(--line-2); background: var(--bg);
}
.os-step.is-done .os-step__dot { background: var(--ink); border-color: var(--ink); }
.os-step.is-current .os-step__dot {
  border-color: var(--ink);
  box-shadow: 0 0 0 .25rem rgba(244,239,230,.14);
}
.os-step__label { color: var(--ink-3); font-size: .6875rem; font-weight: 600; text-align: center; line-height: 1.3; }
.os-step.is-done .os-step__label { color: var(--ink-2); }
.os-step.is-current .os-step__label { color: var(--ink); }

.os-card { padding: 1.25rem; }

.os-meta { display: flex; flex-direction: column; }
.os-meta > div {
  display: flex; justify-content: space-between; gap: 1.25rem;
  padding: .625rem 0; border-bottom: 1px solid var(--line);
  font-size: .875rem;
}
.os-meta > div:first-child { padding-top: 0; }
.os-meta > div:last-child { padding-bottom: 0; border-bottom: 0; }
.os-meta dt { color: var(--ink-3); flex: 0 0 auto; }
.os-meta dd { text-align: right; min-width: 0; }
.os-meta dd a { border-bottom: 1px solid var(--line-2); }

.os-items { list-style: none; margin-bottom: .25rem; }
.os-items li {
  display: grid; grid-template-columns: 1fr auto auto;
  align-items: baseline; gap: .75rem;
  padding: .4375rem 0; font-size: .875rem;
}
.os-items__name small { display: block; margin-top: .125rem; color: var(--ink-3); font-size: .8125rem; }
.os-items__qty { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.os-items b { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* leave-a-tip card (Yandex Tips) — the one warm accent on the dark UI */
.os-tip {
  display: flex; align-items: center; gap: .875rem;
  padding: .9375rem 1rem;
  border: 1px solid rgba(232,184,75,.42);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(232,184,75,.16), rgba(232,184,75,.04));
  color: var(--ink);
  transition: transform .12s, border-color .15s, background .15s;
}
.os-tip:hover { border-color: rgba(232,184,75,.7); background: linear-gradient(135deg, rgba(232,184,75,.22), rgba(232,184,75,.07)); }
.os-tip:active { transform: scale(.99); }
.os-tip__icon {
  flex: 0 0 auto;
  width: 2.5rem; height: 2.5rem; display: grid; place-items: center;
  border-radius: 50%; background: rgba(232,184,75,.2);
  font-size: 1.25rem;
}
.os-tip__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .0625rem; }
.os-tip__text b { font-weight: 700; font-size: .9375rem; letter-spacing: -.01em; }
.os-tip__text small { color: var(--ink-3); font-size: .75rem; line-height: 1.3; }
.os-tip__go { flex: 0 0 auto; color: #d8ac54; font-size: 1.125rem; font-weight: 700; }


/* kiosk order confirmation: QR to the phone-friendly tracking page */
.os-qr {
  display: flex; flex-direction: column; align-items: center; gap: .625rem;
  padding: 1.25rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); text-align: center;
}
.os-qr__code {
  width: 12.5rem; height: 12.5rem;
  background: #fff; border-radius: .625rem; padding: .625rem;
}
.os-qr__code svg { display: block; width: 100%; height: 100%; }
.os-qr b { font-size: .9375rem; font-weight: 700; }
.os-qr small { color: var(--ink-3); font-size: .8125rem; line-height: 1.4; max-width: 24ch; }

/* deposit (014) — account card + checkout line */
.dep { display: flex; flex-direction: column; gap: 1rem; }
.dep__head { text-align: center; }
.dep__label {
  display: block; margin-bottom: .375rem;
  color: var(--ink-3); font-size: .625rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.dep__sum {
  font-weight: 800; font-size: clamp(2rem, 9vw, 2.75rem); line-height: 1;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.dep__hint { margin-top: .625rem; color: var(--ink-2); font-size: .8125rem; line-height: 1.45; }
.dep__empty { text-align: center; }

.dep-list { list-style: none; display: flex; flex-direction: column; }
.dep-row {
  display: flex; align-items: center; gap: 1rem;
  padding: .75rem 0; border-top: 1px solid var(--line);
}
.dep-row:first-child { border-top: 0; }
.dep-row__main { display: flex; flex-direction: column; gap: .1875rem; min-width: 0; }
.dep-row__kind { font-size: .875rem; font-weight: 600; }
.dep-row__meta { color: var(--ink-3); font-size: .75rem; }
.dep-row__meta a { color: var(--ink-2); border-bottom: 1px solid var(--line-2); }
.dep-row__amt {
  margin-left: auto; white-space: nowrap;
  font-size: .9375rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.dep-row__amt.is-plus { color: var(--ok); }
.dep-row__amt.is-minus { color: var(--ink-2); }

/* checkout: opt in to spending the deposit */
.co-dep {
  display: flex; align-items: flex-start; gap: .625rem;
  margin-top: .875rem; padding: .75rem .875rem;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--surface-2); cursor: pointer;
}
.co-dep input { margin-top: .1875rem; flex: 0 0 auto; accent-color: var(--accent); }
.co-dep__text { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.co-dep__text b { font-size: .875rem; font-weight: 700; }
.co-dep__text small { color: var(--ink-2); font-size: .75rem; }
.co-totals__row--dep span:last-child { color: var(--ok); }

.os-account { text-align: center; }
.os-account a { color: var(--ink); border-bottom: 1px solid var(--line-2); }
.os-account a:hover { border-color: var(--ink-3); }

.os-actions { display: flex; flex-direction: column; gap: .625rem; margin-top: .5rem; }

/* ============================================================================
   WIDE SCREENS — rail becomes a sidebar (iPad landscape, desktop)
   ========================================================================= */

@media (min-width: 48rem) {
  .shell { flex-direction: row; }

  .rail {
    width: var(--rail-w);
    height: 100%;
    border-bottom: 0;
    border-right: 1px solid var(--line);
    background: var(--surface);
    padding-bottom: env(safe-area-inset-bottom);
  }
  /* sidebar: brand lockup on the left, language pill inline on the right */
  .rail > .brandbar {
    align-items: center;
    gap: .5rem;
    padding: .9375rem .875rem;
  }
  .rail > .brandbar .brand { gap: .5625rem; }
  .rail > .brandbar .brand__logo { width: 2.25rem; height: 2.25rem; }
  .rail > .brandbar .brandbar__action {
    min-height: 1.875rem; padding: 0 .5625rem; font-size: .6875rem; letter-spacing: .02em;
  }
  .rail > .brandbar .acct-btn { width: 1.875rem; height: 1.875rem; }
  .rail > .brandbar .acct-btn svg { width: 15px; height: 15px; }
  /* the sidebar is narrow — claw back room for the brand lockup */
  .rail > .brandbar .brandbar__right { gap: .25rem; }

  .cats {
    flex-direction: column; gap: .125rem;
    overflow-x: hidden; overflow-y: auto;
    padding: 0 .625rem 1rem;
    scroll-snap-type: none;
    -webkit-mask-image: none; mask-image: none;   /* the fade is for the strip only */
  }
  .cats a {
    justify-content: space-between;
    white-space: normal;
    min-height: 0;
    padding: .625rem .875rem;
    border: 0;
    border-radius: .625rem;
    background: none;
    line-height: 1.25;
  }
  .cats a:hover { background: var(--surface-3); }
  .cats a.active { background: var(--accent); color: var(--bg); }
  .cats .n {
    display: inline-block; flex: 0 0 auto;
    color: var(--ink-3); font-size: .75rem; font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .cats a.active .n { color: var(--bg); opacity: .55; }

  .item-photo { width: 4.5rem; height: 4.5rem; }
  .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* cart sheet becomes a centred modal */
  .sheet { align-items: center; justify-content: center; padding: 2rem; }
  .sheet__panel {
    max-width: 28rem; max-height: 80vh;
    border-radius: var(--radius-lg);
    box-shadow: 0 1.5rem 4rem rgba(0,0,0,.6);
    padding: 1.5rem;
  }
  @keyframes sheet-up { from { transform: scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
}

@media (min-width: 64rem) {
  :root { --rail-w: 18rem; }

  /* checkout: form left, order summary sticky on the right
     (sticky offset is relative to <main>, which is the scroll container) */
  .co-grid { grid-template-columns: minmax(0, 1fr) 21rem; gap: 1.5rem; }
  .co-aside { position: sticky; top: 1.5rem; }
}
@media (min-width: 80rem) { :root { --rail-w: 20rem; } }

@media (max-width: 30rem) {
  .co-row2 { grid-template-columns: 1fr; }
  /* narrow: photo shrinks, but price / pills stay in the top-right corner */
  .item.has-photo { grid-template-columns: auto minmax(0, 1fr) auto; }
  .item-photo { width: 3.25rem; height: 3.25rem; }
  .item { gap: .25rem .625rem; }
}