/* ============================================================
   Сибирский Мишка — фронт по макетам Figma (v3)
   Файл: B70VAdrNWqochL36a1gDZQ, страница «Обложка»
   Токены цветов/радиусов/шрифтов сняты с макетов напрямую.
   ============================================================ */

:root {
  /* фон из Figma 118:449 «Лоадер {ФОН}» — один цвет сверху донизу, без «брови» */
  --g-top: #64cdd3; --g-mid: #69cfd3; --g-bot: #6dcbcd;
  --accent: #4fdbe2;          /* чипсы, бейджи, ценники */
  --btn: #25bec6;             /* большие кнопки-пилюли (Figma) */
  --fab: #3ccad1;             /* пилюля корзины */
  --btn-glow: rgba(0, 188, 199, .7);
  --ink: #282828;             /* основной тёмный текст */
  --coral: #ff836b;
  --brand-pink: #ff7aa8;      /* партнёрская сеть Mishkacoffee */           /* ошибки, «погорячее», крестик */
  --line: #ececec;
  --sheet-r: 40px;            /* верхний радиус белого листа */
  --card-r: 20px;
  --pill-r: 71px;

  /* Figma 01.08: везде Nunito; Bounded (нет в вебе) — только мелкие подписи размеров */
  --font-display: "Nunito", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, sans-serif;
  --font-size-label: "Unbounded", system-ui, sans-serif;
  --font-script: "Pacifico", cursive;

  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body {
  /* Высоту макета держит #app (fixed). Здесь только фон под ним. */
  height: 100%;
  background: var(--g-top);
}
body {
  font-family: var(--font-body); color: var(--ink);
  background: var(--g-top);
  overflow: hidden; user-select: none; -webkit-user-select: none;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
[hidden] { display: none !important; }
img { display: block; }
input { font-family: inherit; }

/* iOS-standalone с вырезом: полоса под нашим вьюпортом лежит ниже экрана страницы,
   индикатор «домой» физически не пересекает контент — отступ под него не нужен,
   иначе кнопки повисают на 34pt выше края без причины. */
/* без viewport-fit=cover env() возвращает 0, но индикатор «домой» физически перекрывает
   низ нашей области — держим под него собственный отступ */
/* под статус-баром: индикатор «домой» внутри нашей области — нужен свой отступ,
   env() без cover возвращает 0. В полноэкранном режиме индикатор вне области — отступ не нужен. */
html.ios-standalone[data-sb="default"] { --safe-b: 22px; }
html.ios-standalone[data-sb="translucent"] { --safe-b: 0px; }

/* ---------- каркас: колонка телефона по центру ---------- */
/* Никаких vh/dvh/svh: fixed + inset:0 всегда ровно равен экрану — и в Safari,
   и в standalone. Именно расчёт по единицам высоты оставлял снизу полосу фона. */
#app {
  position: fixed; inset: 0; margin: 0 auto; width: 100%;
  max-width: 480px; overflow: hidden;
  /* тот же градиент 118:449 — сплошной слой под статус-баром и контентом */
  background: linear-gradient(180deg, var(--g-top) 0%, var(--g-mid) 75%, var(--g-bot) 100%);
}

/* ---------- экраны ---------- */
.screen {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: visibility .28s; /* opacity/transform ведут keyframes ниже — transition с ними конфликтовал */
  overflow: hidden;
}
.screen.is-on { opacity: 1; visibility: visible; transform: none; z-index: 1; }
/* переходы между экранами и каскад на карточке позиции убраны — экраны меняются сразу */
.screen--white { background: #fff; }
/* на белых экранах под шторкой — тёмный кант, иначе белые иконки iOS не читаются */
.screen--white::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; z-index: 4;
  height: var(--safe-t); background: #0d3f44; pointer-events: none;
}

/* ============ общие элементы ============ */
/* круглая белая кнопка в шапке */
.hbtn {
  width: 55px; height: 55px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; position: relative;
  background: #fff; box-shadow: 0 4px 14px rgba(12,104,109,.08);
}
.hbtn--glass { background: rgba(255,255,255,.4); border: 1px solid rgba(255,255,255,.25); }
.screen--white .hbtn--glass, .result .hbtn--glass { border-color: rgba(0,0,0,.1); }
.screen--white .hbtn--glass img, .result .hbtn--glass img { filter: invert(1); }
.hbtn img { width: 27px; height: 27px; }
.hbtn .dot { position: absolute; top: 6px; right: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--coral); }

/* большая кнопка-пилюля (Figma 66:896 / 79:3583) */
.pill {
  height: 59px; border-radius: 68px; width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--font-display); font-weight: 400; font-size: 16px; color: #fff;
  background:
    radial-gradient(120% 220% at 50% 0%, rgba(136,249,255,.85) 0%, rgba(136,249,255,0) 60%),
    var(--btn);
  box-shadow: 0 6px 12px rgba(12,104,109,.15), inset 0 -5px 5px rgba(255,255,255,.15);
  text-shadow: 0 0 10px var(--btn-glow);
  transition: transform .15s ease, filter .2s;
}
.pill:active { transform: scale(.97); }
.pill:disabled { filter: grayscale(.5) opacity(.7); }
.pill .sep { width: 1px; height: 26px; background: rgba(255,255,255,.5); }

/* чипс */
.chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  padding: 10px 16px; border-radius: var(--pill-r);
  font-weight: 600; font-size: clamp(13px, 4vw, 16px); color: var(--ink);
  background: rgba(178,251,255,.2); border: 1px solid transparent;
  transition: background .22s ease, color .22s ease, transform .16s ease, box-shadow .22s ease;
}
.chip:active { transform: scale(.94); }
.chip.is-active { background: var(--accent); color: #fff; text-shadow: 0 0 10px #48c7ce;
  box-shadow: 0 6px 14px rgba(79,219,226,.35); }

/* чипс-вариант на белом (оформление) */
.wchip {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 34px; padding: 7px 15px; border-radius: 42px;
  font-family: var(--font-display); font-size: 14px; color: var(--ink);
  background: #fff; border: 1px solid #e1e1e1; opacity: .6;
  transition: background .2s, border-color .2s, color .2s, opacity .2s;
}
/* Выбор читался только по тонкой рамке — на белом фоне казалось, что «горят» сразу
   несколько. Делаем как на главной: выбранный залит, остальные однозначно нет. */
.wchip.is-active { background: var(--accent); border-color: var(--accent); color: #fff;
  opacity: 1; font-weight: 600; box-shadow: 0 4px 12px rgba(79,219,226,.35); }

.ci { cursor: pointer; }
.h-display { font-family: var(--font-display); font-weight: 500; }

/* ============ AUTH GATE ============ */
.authgate { position: absolute; inset: 0; z-index: 60; display: flex; align-items: flex-end;
  background: rgba(0,0,0,.4); backdrop-filter: blur(8px); }
.authgate[hidden] { display: none; }
.ag-card { width: 100%; background: #fff; border-radius: var(--sheet-r) var(--sheet-r) 0 0;
  padding: 28px 20px calc(24px + var(--safe-b)); animation: sheetUp .35s ease; }
/* палочка не декоративная: за неё шторку можно смахнуть вниз */
.ag-grip { width: 60px; height: 4px; border-radius: 4px; background: #d9d9d9; margin: 0 auto 18px;
  position: relative; touch-action: none; cursor: grab; }
.ag-grip::after { content: ""; position: absolute; left: -40px; right: -40px; top: -14px; bottom: -14px; }
.ag-grip:active { background: #c2c2c2; }
.ag-title { font-family: var(--font-display); font-weight: 600; font-size: 24px; margin-bottom: 16px; }
.ag-tabs { display: flex; gap: 5px; margin-bottom: 18px; }
.ag-mode { display: flex; gap: 5px; margin-bottom: 14px; }
.ag-pane { display: flex; flex-direction: column; gap: 12px; }
.ag-skip { margin-top: 4px; font-size: 14px; color: #8a8a8a; text-decoration: underline; }
.ag-err { min-height: 20px; margin-top: 8px; color: var(--coral); font-size: 14px; font-weight: 700; text-align: center; }

.fld label { display: block; font-family: var(--font-display); font-size: 12px; margin-bottom: 6px; opacity: .7; }
.inp {
  width: 100%; height: 48px; padding: 0 18px; border-radius: 42px;
  border: 1px solid #e1e1e1; font-size: 16px; color: var(--ink); background: #fff; outline: none;
}
.inp:focus { border-color: var(--accent); }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: #6a6a6a; }
.consent input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--accent); }
.consent.err span { color: var(--coral); }

/* ============ HOME ============ */
#scr-home { padding-top: 0; background: transparent; }
/* зона фона 118:449: блик + вензель только над шторкой, без линии «брови» */
.home-hero-bg {
  position: absolute; left: 0; right: 0; top: 0; z-index: 0; pointer-events: none;
  height: min(52vh, 460px); height: min(52svh, 460px); overflow: hidden;
}
/* Ellipse 118:455 */
.home-bg-glow {
  position: absolute; left: 12%; top: -2%; width: 76%; height: 110%;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(213, 253, 255, .68) 0%,
    rgba(137, 251, 255, .42) 55%,
    rgba(137, 251, 255, 0) 100%);
  opacity: .85;
}
/* надпись поверх фона, ниже статус-бара, не залезает на белую шторку */
.home-watermark {
  position: absolute; left: -24px; top: 22%; z-index: 1; pointer-events: none;
  font-family: var(--font-script); font-size: clamp(120px, 46vw, 188px); line-height: .62;
  color: rgba(255,255,255,.12); white-space: pre;
}
.home-head { position: relative; z-index: 4; display: flex; align-items: center; gap: 8px;
  padding: calc(21px + var(--safe-t)) 20px 0; }
.home-addr { flex: 1; min-width: 0; color: #fff; }
.home-addr .a1 { font-weight: 700; font-size: clamp(18px, 5.6vw, 22px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-addr .a2 { font-family: var(--font-display); font-size: 12px; opacity: .7; margin-top: 2px; }

/* промо-карточки */
.promos { position: relative; z-index: 2; display: flex; gap: 10px; padding: 18px 20px 0;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.promos::-webkit-scrollbar { display: none; }
/* Лента ещё не пришла — держим её место, иначе белый лист прыгнет, когда сторис появятся.
   Как только ответ получен и сторис действительно нет, резерв снимаем. */
/* та же арифметика, что у карточки: ширина 22% контента, пропорция 83/97, плюс верхний отступ */
.promos:empty { min-height: calc(18px + (min(100vw, 480px) - 40px) * 0.2571); }
.promos.is-loaded:empty { min-height: 0; padding-top: 0; }
.promo { flex: 0 0 22%; min-width: 78px; aspect-ratio: 83 / 97; height: auto; border-radius: 15px; position: relative; overflow: hidden;
  border: 1px solid rgba(255,255,255,.5); }
.promo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.promo > span { position: absolute; left: 9px; top: 9px; right: 6px; z-index: 1;
  font-family: var(--font-display); font-weight: 500; font-size: 8px; line-height: 1.2; color: #fff; }
.promo--welcome { background: linear-gradient(148deg, #6adde3 38%, #fff 108%); }
.promo--dessert { background: linear-gradient(172deg, #c9a5ff 5%, #ff8ce8 92%); }
.promo--hits    { background: linear-gradient(146deg, #f7b7ab 11%, #fff 108%); }
.promo--friends .shade { position: absolute; inset: 0; background: linear-gradient(180deg, #4a633d 0%, rgba(74,99,61,0) 30%); }

/* белый лист меню */
.sheet {
  position: relative; z-index: 2; flex: 1; min-height: 0; margin-top: 18px;
  background: #fff; border-radius: var(--sheet-r) var(--sheet-r) 0 0;
  display: flex; flex-direction: column; overflow: hidden;
}
/* «палочка» на верхнем крае листа: за неё меню поднимается и опускается,
   не заставляя гостя скроллить. Зона нажатия крупнее самой полоски. */
.grip { flex: 0 0 auto; display: grid; place-items: center; height: 26px; padding-top: 8px;
  cursor: grab; touch-action: none; }
.grip i { width: 56px; height: 5px; border-radius: 5px; background: #dcdcdc;
  transition: background .2s, width .2s; }
.grip:active i { background: #c2c2c2; width: 64px; }

.chips { display: flex; gap: 8px; padding: 10px 20px 12px; overflow-x: auto; scrollbar-width: none; flex: 0 0 auto;
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.chips::-webkit-scrollbar { display: none; }

.grid {
  flex: 1; overflow-y: auto; padding: 10px 20px calc(110px + var(--safe-b));
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: start;
  scrollbar-width: none; align-items: start; grid-auto-rows: min-content;
  /* плавный инерционный скролл на iOS/Android */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
}
.grid::-webkit-scrollbar { display: none; }
/* подзаголовок добора витрины в коротких категориях */
.grid-more { grid-column: 1 / -1; padding: 18px 2px 2px; color: #8a8a8a;
  font-family: var(--font-display); font-size: 13px; letter-spacing: .04em; }

.grid-empty { grid-column: 1 / -1; text-align: center; padding: 48px 12px; color: #9a9a9a;
  font-family: var(--font-display); font-size: 14px; line-height: 1.5; }
.grid-empty button { margin-top: 14px; color: var(--btn); text-decoration: underline; font-size: 14px; }

/* карточка позиции (Figma 63:339)
   На iOS нельзя вешать transform на тот же узел, что overflow+radius — после тапа/скролла углы «отваливаются».
   Скругление держит внутренний .pcard__clip без transform; scale/анимация — на кнопке снаружи. */
.pcard { position: relative; aspect-ratio: 176 / 224; border-radius: var(--card-r);
  text-align: left; background: #e8f4f5; cursor: pointer; }
/* карточка сама себе система координат для кегля названия (см. .nm) */
@supports (container-type: inline-size) { .pcard { container-type: inline-size; } }
.pcard__clip { position: absolute; inset: 0; border-radius: var(--card-r); overflow: hidden;
  background: #e8f4f5; pointer-events: none; z-index: 0; }
/* появление карточек лесенкой убрано — витрина рисуется сразу */
.pcard img.ph {
  display: block; width: 100%; height: 100%; object-fit: cover;
  background: #e8f4f5;
}
.pcard .nm, .pcard .pr, .pcard .fav, .pcard .tagb { z-index: 1; }
/* Название набирается по ширине САМОЙ карточки, а не экрана: кегль в cqw — это
   доля ширины карточки, поэтому на любом телефоне текст занимает одну и ту же
   часть плашки. Ступень (.t1…t5) ставит makeCard по длине названия: короткое имя
   крупное, длинное мельче — но целиком, без «…».
   Справа было 44px под бейдж .tagb, который в витрине не рисуется: этот запас
   съедал треть строки и рвал слова. Теперь поля симметричные. */
.pcard .nm { position: absolute; left: 14px; top: 12px; right: 14px; z-index: 1;
  font-weight: 700; line-height: 1.16;
  font-size: clamp(12px, 4.6vw, 21px); /* без cqw (iOS < 16): прежняя привязка к экрану */
  color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.18);
  hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@supports (container-type: inline-size) {
  .pcard .nm { font-size: clamp(12px, var(--nm, 10cqw), 21px); }
  .pcard .nm.t1 { --nm: 12.5cqw; }  /* до 12 символов: «Матча», «Сырная матча» */
  .pcard .nm.t2 { --nm: 11cqw; }    /* до 18: «Вишнёвый американо» */
  .pcard .nm.t3 { --nm: 10cqw; }    /* до 26: «Матча малина-белый шоколад» */
  .pcard .nm.t4 { --nm: 9.2cqw; }   /* до 36: «Айс-матча латте с клубникой» */
  .pcard .nm.t5 { --nm: 8.2cqw; }   /* длиннее — редкость, но и такое влезает */
}
.pcard .pr { position: absolute; right: 10px; bottom: 12px; z-index: 2;
  padding: 8px 14px; border-radius: var(--pill-r); background: #fff;
  box-shadow: 0 3px 10px rgba(12,104,109,.12);
  font-weight: 700; font-size: clamp(13px, 4vw, 17px); color: var(--accent);
  cursor: pointer; overflow: hidden;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
.pcard .pr.is-added { background: var(--accent); color: #fff; box-shadow: 0 4px 14px rgba(79,219,226,.45); }
/* галочка кладётся поверх цены: даже если класс почему-то залипнет,
   сам ценник останется в разметке и вернётся при следующей перерисовке */
.pcard .pr.is-added { color: transparent; }
.pcard .pr.is-added::before {
  content: "✓"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(13px, 4vw, 17px); font-weight: 700; color: #fff;
}
/* нативный switch поверх ценника — палец бьёт в него напрямую (Taptic на iOS) */
.pcard .pr-haptic {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0;
  opacity: 0.02; cursor: pointer; z-index: 5; border: 0;
  border-radius: inherit;
  -webkit-appearance: auto;
  appearance: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
/* фото, летящее в корзину */
.fly { position: fixed; z-index: 60; pointer-events: none; }
.fly img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
  box-shadow: 0 10px 24px rgba(6,42,50,.28); background: #e8f4f5; }
.pcard .tagb { position: absolute; right: 10px; top: 10px; z-index: 1; width: 28px; height: 28px;
  border-radius: 50%; background: rgba(255,255,255,.4);
  display: grid; place-items: center; }
.pcard .tagb img { width: 12px; height: 12px; }
/* сердечко-избранное (Figma: слева внизу карточки) */
.pcard .fav { position: absolute; left: 10px; bottom: 12px; z-index: 2; width: 36px; height: 36px;
  border-radius: 50%; background: rgba(255,255,255,.45);
  display: grid; place-items: center;
  font-size: 18px; line-height: 1; color: #fff; transition: background .2s, transform .15s; }
.pcard .fav:active { transform: scale(.88); }
.pcard .fav.on { background: var(--coral); color: #fff; }
.pcard .fav.on { box-shadow: 0 4px 12px rgba(255,131,107,.4); }
#pFav { background: #fff; color: #d7dfe1; }
#pFav.on { background: var(--coral); color: #fff; }
#pFav img { width: 25px; height: 25px; }
/* подпись категории под названием (Figma: «Кофе») */
.prod-title .cat { font-weight: 500; font-size: 18px;
  color: rgba(255,255,255,.5); margin-top: 2px; }

/* Герой-медведь с подносом (860×745). Кадр шире, чем высокий, слева уже обрезан,
   а поднос упирается в правый край — поэтому размер задаём по ширине и прижимаем
   ВПРАВО: обрезка идёт по телу слева, стаканы остаются целыми. */
.hero-bear {
  position: absolute; top: calc(var(--safe-t) + 104px); right: 0; left: auto;
  width: min(105%, 505px); height: auto;
  z-index: 1; pointer-events: none;
  transition: opacity .46s cubic-bezier(.28,.72,.22,1), transform .62s cubic-bezier(.28,.72,.22,1);
}
.hero-bear img { width: 100%; height: auto; display: block; }
#scr-home.is-scrolled .hero-bear { opacity: 0; transform: translateY(-16%) scale(.96); }
/* мягкое сжатие зоны мишки — помедленнее (~1.35s) */
.promos {
  /* Зона мишки: база 130px + 12% экрана, в рамках 150…290 —
     лишняя высота большого телефона уходит в меню, а не в иллюстрацию. */
  margin-top: min(34vh, 290px);
  margin-top: clamp(150px, calc(12svh + 130px), 290px);
  transition: opacity .42s cubic-bezier(.28,.72,.22,1);
}

/* Лента и белый лист сворачиваются ОДНИМ слоем и только через transform:
   раскладка не пересчитывается, поэтому положение скролла в меню не сбивается
   и нет скачка вниз. --slide меряет скрипт под фактическую высоту ленты. */
.home-slide {
  position: relative; z-index: 2; flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  /* тянемся ниже экрана ровно на ход сворачивания — снизу не появится просвет */
  margin-bottom: calc(-1 * var(--slide, 0px));
  /* длинная мягкая доводка: разгон почти без рывка, гашение в конце */
  transition: transform .62s cubic-bezier(.28,.72,.22,1);
  will-change: transform;
}
#scr-home.is-scrolled .home-slide { transform: translateY(calc(-1 * var(--slide, 0px))); }
#scr-home.is-scrolled .promos { opacity: 0; pointer-events: none; }
/* пока лист внизу, последние карточки должны доезжать до видимой части */
#scr-home:not(.is-scrolled) .grid { padding-bottom: calc(110px + var(--safe-b) + var(--slide, 0px)); }
.home-addr { cursor: pointer; }
.home-addr .a2 u { text-decoration: underline; }

/* пункты выбора точки */
/* ---- поп-ап выбора кофейни (Figma 327:1023), поверх общей карточки .dlg__card ---- */
.dlg__card.loc-card { padding: 36px 26px 30px; text-align: left; }
/* заголовок компактный: список кофеен важнее крупной надписи.
   line-height 1.02 — иначе краткая над «й» задевает букву строкой выше */
.loc-title { font-family: var(--font-display); font-weight: 900;
  font-size: clamp(24px, 7.5vw, 30px); line-height: 1.02;
  letter-spacing: -.01em; color: #282828; }
.loc-title em { font-style: normal; color: var(--accent); }
.loc-list { margin-top: 25px; max-height: 44vh; max-height: 44svh; overflow: auto; border-top: 1px solid #ececec;
  scrollbar-width: none; }
.loc-list::-webkit-scrollbar { width: 0; height: 0; }
.loc-opt { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 15px 0; border-bottom: 1px solid #ececec;
  font-family: var(--font-display); font-weight: 600; font-size: 18px; color: #282828; }
.loc-opt small { display: block; font-family: var(--font-text); font-weight: 400; font-size: 13px; opacity: .55; }
.loc-opt span { flex: 1; }
/* переключатель: у выбранной точки — коралловая точка внутри кольца */
.loc-opt i { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; border: 1px solid #dfe4e4;
  display: grid; place-items: center; }
.loc-opt i::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: transparent; }
.loc-opt.on { font-weight: 700; color: var(--coral); }
.loc-opt.on i { border-color: var(--coral); }
.loc-opt.on i::after { background: var(--coral); }
.loc-save { margin-top: 25px; }
.loc-cancel { width: 100%; height: 59px; margin-top: 10px; border-radius: var(--pill-r);
  background: #fff; color: var(--coral); box-shadow: 0 6px 20px rgba(6,42,50,.12);
  font-family: var(--font-display); font-weight: 700; font-size: 18px; }

/* строка «Уведомления на телефон»: справа — состояние, чтобы не гадать, включено ли */
.pf-row--push { display: flex; align-items: center; gap: 10px; }
.pf-state { margin-left: auto; font-size: 13px; font-weight: 700; opacity: .55; }
.pf-state.is-on { color: var(--accent); opacity: 1; }

/* ---------- поддержка ---------- */
.sup-title { font-family: var(--font-display); font-weight: 900;
  font-size: clamp(24px, 7.5vw, 30px); line-height: 1.02;
  letter-spacing: -.01em; color: #282828; }
.sup-title em { font-style: normal; color: var(--accent); }
.sup-note { margin-top: 12px; font-size: 15px; line-height: 1.35; opacity: .55; }
/* номер крупный: его читают вслух и набирают руками, мелкий тут не годится */
.sup-phone { margin-top: 18px; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(22px, 6.6vw, 26px); letter-spacing: .01em; color: #282828;
  user-select: text; -webkit-user-select: text; }
.sup-acts { margin-top: 20px; display: grid; gap: 10px; }
.sup-call { display: grid; place-items: center; text-decoration: none; }
.sup-copy { width: 100%; height: 52px; border-radius: var(--pill-r);
  background: #f2f7f8; color: var(--ink);
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  transition: background .2s ease, color .2s ease; }
.sup-copy.is-done { background: rgba(100,205,211,.18); color: var(--accent); }

/* пилюля-корзина поверх меню */
.cartfab {
  position: absolute; left: 50%; bottom: calc(24px + var(--safe-b)); transform: translateX(-50%);
  z-index: 10; display: flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 90px;
  background: radial-gradient(120% 220% at 50% 0%, rgba(136,249,255,.85) 0%, rgba(136,249,255,0) 60%), var(--btn);
  box-shadow: 0 8px 20px rgba(12,104,109,.25), inset 0 -6px 6px rgba(255,255,255,.3);
  font-family: var(--font-display); font-size: 15px; color: #fff; text-shadow: 0 0 8px var(--btn-glow);
  transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
.cartfab img { width: 26px; height: 26px; }

/* ---- полоса «установить на экран»: живёт над корзиной, уступая ей место ---- */
.inst { position: absolute; left: 14px; right: 14px; bottom: calc(24px + var(--safe-b)); z-index: 11;
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 26px;
  background: #fff; box-shadow: 0 10px 30px rgba(6,42,50,.18); animation: instIn .35s ease-out; }
.inst[hidden] { display: none; }
#scr-home.has-fab .inst { bottom: calc(88px + var(--safe-b)); }
@keyframes instIn { from { opacity: 0; transform: translateY(16px); } }
.inst > video { width: 54px; height: 54px; border-radius: 16px; flex: 0 0 auto; object-fit: cover; }
.inst__txt { flex: 1; min-width: 0; line-height: 1.2; }
.inst__txt b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 14px; }
.inst__txt span { font-size: 12px; color: #6b8085; }
.inst__go { flex: 0 0 auto; height: 38px; padding: 0 16px; border-radius: 99px;
  background: linear-gradient(180deg, #7fe3e8, var(--btn)); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 14px; }
.inst__x { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: #f2f6f6;
  color: #6b8085; font-size: 13px; line-height: 1; }
.cartfab.is-bump { animation: bump .4s cubic-bezier(.34,1.56,.64,1); }
@keyframes bump { 40% { transform: translateX(-50%) scale(1.12); } }
.cartfab.is-in { animation: fab-in .36s cubic-bezier(.34,1.56,.64,1); }
@keyframes fab-in {
  from { opacity: 0; transform: translateX(-50%) translateY(14px) scale(.82); }
  to { opacity: 1; transform: translateX(-50%); }
}

/* ============ PRODUCT ============ */
#scr-product { background: #2a1a2e; }
.prod-hero { position: absolute; inset: 0; }
.prod-hero img { width: 100%; height: 100%; object-fit: cover; }
.prod-hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 102px;
  background: linear-gradient(180deg, rgba(0,0,0,.25), transparent); }
.prod-hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 205px;
  background: linear-gradient(0deg, rgba(0,0,0,.3), transparent); }
.prod-top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between;
  padding: calc(21px + var(--safe-t)) 20px 0; }
.prod-more { display: flex; align-items: center; gap: 6px; height: 55px; padding: 0 20px; border-radius: 35px;
  background: rgba(255,255,255,.35); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.2);
  font-family: var(--font-display); font-size: 12px; color: #fff; }
/* на высоких экранах отступ не раздувается, на коротких не съедает фото */
.prod-title { position: relative; z-index: 2; margin-top: clamp(10px, 8vh, 78px);
  margin-top: clamp(10px, 8svh, 78px); padding: 0 26px; text-align: center; color: #fff; }
.prod-title h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(30px, 11vw, 46px);
  line-height: .96; text-shadow: 0 0 9px rgba(0,0,0,.3); }
.prod-title .sub { margin-top: 10px; font-family: var(--font-display); font-size: 14px;
  color: rgba(255,255,255,.6); text-shadow: 0 0 3px rgba(0,0,0,.3); }
.prod-title .newb { display: inline-flex; align-items: center; gap: 5px; margin-top: 14px;
  padding: 10px 14px; border-radius: var(--pill-r); background: var(--accent);
  font-family: var(--font-display); font-size: 12px; color: #fff; text-shadow: 0 0 10px #48c7ce;
  filter: drop-shadow(0 6px 15px rgba(79,219,226,.4)); }
.prod-title .newb img { width: 9px; height: 9px; }
.prod-desc { position: relative; z-index: 2; margin: 12px 26px 0; padding: 12px 16px; border-radius: 18px;
  background: rgba(0,0,0,.35); backdrop-filter: blur(8px); color: #fff; font-size: 14px; line-height: 1.45; }
.prod-desc[hidden] { display: none; }

.prod-controls { position: relative; z-index: 2; margin-top: auto; padding: 0 20px calc(20px + var(--safe-b));
  display: flex; flex-direction: column; gap: 8px; }
.prod-row { display: flex; gap: 8px; }
/* тумблер «погорячее» */
.hot { flex: 1; display: flex; align-items: center; justify-content: space-between; height: 35px;
  padding: 0 6px 0 12px; border-radius: 35px; background: rgba(255,255,255,.4);
  backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.15);
  font-family: var(--font-display); font-size: 12px; color: var(--ink); }
.hot .tgl { width: 41px; height: 25px; border-radius: 28px; background: rgba(255,255,255,.5); position: relative; transition: background .2s; }
.hot .tgl::after { content: ""; position: absolute; top: 2px; left: 2px; width: 21px; height: 21px; border-radius: 50%;
  background: #fff; transition: transform .2s; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.hot.is-on .tgl { background: var(--coral); }
.hot.is-on .tgl::after { transform: translateX(16px); }
/* кнопка «Добавки» */
.addons-btn { display: flex; align-items: center; gap: 7px; height: 35px; padding: 0 6px 0 12px;
  border-radius: 68px; background: #fff; font-family: var(--font-display); font-size: 12px; color: var(--ink); }
.addons-btn .plus { width: 29px; height: 29px; border-radius: 50%; background: var(--accent); color: #fff;
  display: grid; place-items: center; font-size: 18px; font-family: var(--font-body); font-weight: 800;
  box-shadow: 0 4px 10px rgba(79,219,226,.5); }
.addons-btn .cnt { font-size: 11px; color: #8a8a8a; }
/* размеры */
.sizes { display: flex; align-items: center; height: 43px; padding: 5px; border-radius: 35px;
  background: rgba(255,255,255,.4); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.15); }
.sizes .sz { flex: 1; height: 100%; border-radius: 68px; font-family: var(--font-display); font-weight: 500;
  font-size: 15px; color: var(--ink); transition: background .2s; }
.sizes .sz small { font-size: 10px; opacity: .6; font-weight: 400; }
.sizes .sz.is-active { background: rgba(255,255,255,.85);
  box-shadow: inset 0 4px 5px rgba(255,255,255,.1), inset 0 -4px 5px rgba(255,255,255,.1); }
/* цена + в корзину */
.buyrow { display: flex; align-items: center; height: 69px; padding: 5px; border-radius: 68px;
  background: rgba(255,255,255,.55); backdrop-filter: blur(8px); }
.buyrow .price { flex: 0 0 96px; text-align: center; font-family: var(--font-display); font-weight: 500; font-size: 18px; }
.buyrow .pill { flex: 1; height: 59px; }

/* ============ ADDON SHEET ============ */
.sheet-ov { position: absolute; inset: 0; z-index: 40; display: flex; align-items: flex-end;
  background: rgba(0,0,0,.4); backdrop-filter: blur(8px); }
.sheet-ov[hidden] { display: none; }
.addon-card { width: 100%; background: #fff; border-radius: 35px 35px 0 0;
  padding: 19px 20px calc(20px + var(--safe-b)); animation: sheetUp .35s ease; }
@keyframes sheetUp { from { transform: translateY(60px); opacity: .4; } }
.addon-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 25px; margin: 12px 0 20px; }
.addon-list { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.addon-list::-webkit-scrollbar { display: none; }
.addon { flex: 0 0 156px; border-radius: var(--card-r); border: 1px solid #e1e1e1; padding: 12px;
  text-align: center; position: relative; transition: border-color .2s; background: #fff; }
.addon.is-on { border-color: var(--accent); }
.addon img.ai { width: 100%; height: 96px; object-fit: contain; }
.addon .an { font-family: var(--font-display); font-weight: 500; font-size: 14px; margin-top: 10px; min-height: 34px; }
.addon .ap { font-family: var(--font-display); font-size: 13px; opacity: .5; margin-top: 6px; }
.addon .chk { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: #fff; display: none; place-items: center; font-size: 12px; font-weight: 800; }
.addon.is-on .chk { display: grid; }
.addon-foot { display: flex; gap: 10px; margin-top: 20px; align-items: center; }
.addon-close { flex: 0 0 59px; height: 59px; border-radius: 50%; background: var(--coral); color: #fff;
  font-size: 24px; display: grid; place-items: center; }
.addon-total { flex: 1; display: flex; align-items: center; height: 59px; border-radius: 68px; background: #e6f1f2; position: relative; }
.addon-total .at { flex: 0 0 90px; text-align: center; font-family: var(--font-display); font-weight: 500; font-size: 18px; }
.addon-total .pill { flex: 1; height: 59px; }

/* ============ CART ============ */
.wh-head { display: flex; align-items: center; gap: 8px; padding: calc(21px + var(--safe-t)) 20px 0; }
.wh-head .mid { flex: 1; min-width: 0; text-align: center; }
.wh-head .mid .a1 { font-family: var(--font-body); font-weight: 800; font-size: 20px; }
.wh-head .mid .a2 { font-family: var(--font-display); font-size: 12px; opacity: .7; margin-top: 2px; }
.cart-scroll { flex: 1; overflow-y: auto; padding: 20px 20px 12px; scrollbar-width: none; }
.cart-scroll::-webkit-scrollbar { display: none; }
.cart-empty { text-align: center; color: #9a9a9a; padding: 60px 20px; font-family: var(--font-display); font-size: 15px; line-height: 1.6; }

.ci { display: flex; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.ci .ph { flex: 0 0 96px; height: 96px; border-radius: var(--card-r); object-fit: cover; }
.ci .mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ci .nm { font-weight: 700; font-size: 18px; }
.ci .sz, .ci .ad { font-weight: 600; font-size: 13px; opacity: .5; }
.ci .adt { font-weight: 600; font-size: 13px; margin-top: 2px; }
.ci .hotmark { font-size: 11px; color: var(--coral); font-weight: 600; }
.ci .qty { margin-top: auto; display: inline-flex; align-items: center; gap: 14px; align-self: flex-start;
  height: 27px; padding: 0 12px; border-radius: 42px; background: #e5e5e5; font-size: 16px; font-weight: 700; }
.ci .right { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; }
.ci .pr { font-weight: 800; font-size: 19px; white-space: nowrap; }
.ci .rm { color: #c2c2c2; font-size: 18px; padding: 4px; }

.recs-title { font-family: var(--font-display); font-weight: 500; font-size: 19px; margin: 22px 0 14px; }
.recs { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.recs::-webkit-scrollbar { display: none; }
.rec { flex: 0 0 83px; width: 83px; text-align: center; display: flex; flex-direction: column; }
.rec img { width: 83px; height: 83px; border-radius: var(--card-r); object-fit: cover; }
.rec .rn { font-family: var(--font-display); font-weight: 500; font-size: 11px; line-height: 1.25;
  margin-top: 8px; flex: 1 1 auto; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rec .rp { font-family: var(--font-display); font-size: 11px; opacity: .5; margin-top: 4px; }

.cart-foot { flex: 0 0 auto; padding: 0 20px calc(16px + var(--safe-b)); }
.total-row { display: flex; justify-content: space-between; padding: 14px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-weight: 500; font-size: 18px; }
.legal { text-align: center; font-size: 10px; color: rgba(0,0,0,.25); margin: 10px 0; }
.legal u { cursor: pointer; }

/* ============ CHECKOUT ============ */
.co-scroll { flex: 1; overflow-y: auto; padding: 24px 20px 12px; display: flex; flex-direction: column; gap: 22px; scrollbar-width: none; }
.co-scroll::-webkit-scrollbar { display: none; }
.co-sec h3 { font-family: var(--font-display); font-weight: 500; font-size: 19px; margin-bottom: 14px; }
.co-sec .row { display: flex; gap: 5px; flex-wrap: wrap; }
.co-sec .fld { margin-top: 10px; }

/* ============ RESULT (принят / ошибка) ============ */
.result { align-items: center; text-align: center; background: #fff; padding: 0 24px; }
.result .rbear { width: min(62vw, 268px); height: auto; margin-top: min(20vh, 168px); margin-top: min(20svh, 168px); }
.result h1 { color: var(--btn); }
.result.fail h1 { color: var(--ink); }
.result .pre { margin-top: 34px; font-family: var(--font-display); font-size: 14px; color: #9a9a9a; }
.result h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(34px, 12vw, 46px); line-height: 1.1; }
.result.ok h1 { color: var(--accent); margin-top: 30px; }
.result.fail h1 em { font-style: normal; color: var(--coral); }
.result .sub { margin-top: 16px; font-size: 16px; font-weight: 600; line-height: 1.4; max-width: 320px; }
.result .foot { margin-top: auto; width: 100%; padding-bottom: calc(16px + var(--safe-b));
  display: flex; flex-direction: column; align-items: center; gap: 6px; }
/* второй, необязательный выход — заказ не должен запирать гостя на экране */
.linkbtn { min-height: 44px; padding: 0 16px; background: none; border: 0;
  font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink); opacity: .65; }
.result .back { position: absolute; left: 20px; top: calc(21px + var(--safe-t)); }

/* ============ ИНБОКС: история заказов + уведомления (Figma 330:2100 / 330:2356) ============ */
.ibx-head { display: flex; justify-content: space-between; padding: calc(20px + var(--safe-t)) 20px 0; }
.hbtn--pale { background: #f4f4f4; }
.hbtn--pale img { width: 25px; height: 25px; }
/* стрелка нарисована белой для тёмных шапок — на светлой кнопке перекрашиваем в тёмное */
.ibx-head [data-back] img, #fbClose img { filter: brightness(0); opacity: .85; }

.ibx-tabs { display: flex; margin: 25px 20px 0; padding: 4px; border-radius: 64px; background: #f2f2f2; }
.ibx-tab { flex: 1; height: 49px; border-radius: 57px; font-family: var(--font-display);
  font-weight: 700; font-size: 15px; color: var(--ink); transition: background .2s, color .2s; }
.ibx-tab.is-on { background: var(--accent); color: #fff; font-size: 16px;
  box-shadow: 0 6px 16px rgba(79,219,226,.45); }

.ibx-list { flex: 1; overflow-y: auto; padding: 20px 20px calc(120px + var(--safe-b)); scrollbar-width: none; }
.ibx-list::-webkit-scrollbar { display: none; }
.ibx-month { font-family: var(--font-display); font-weight: 700; font-size: 26px; margin: 6px 0 20px; }
.ibx-empty { padding: 60px 10px; text-align: center; font-family: var(--font-display);
  font-size: 15px; color: #9a9a9a; line-height: 1.5; }

/* карточка активного заказа над списком уведомлений */
.ibx-active { display: flex; align-items: center; gap: 12px; padding: 11px 14px; margin-bottom: 24px;
  border-radius: var(--card-r); background: #fff; box-shadow: 0 8px 24px rgba(6,42,50,.1); }
.ibx-active .t { font-family: var(--font-display); font-weight: 700; font-size: 20px; }
.ibx-active .s { font-size: 15px; opacity: .55; margin-top: 4px; }
.ibx-active .go { margin-left: auto; width: 47px; height: 47px; flex: none; border-radius: 50%;
  background: var(--accent); display: grid; place-items: center; box-shadow: 0 6px 16px rgba(79,219,226,.5); }
.ibx-active .go img { width: 22px; height: 22px; transform: rotate(180deg); filter: brightness(0) invert(1); }

/* уведомление */
.ibx-note { padding: 15px 0; border-top: 1px solid var(--line); }
.ibx-note .r1 { display: flex; align-items: baseline; gap: 10px; }
.ibx-note .ttl { font-family: var(--font-display); font-weight: 700; font-size: 18px; }
.ibx-note .dt { margin-left: auto; font-size: 13px; opacity: .5; white-space: nowrap; }
.ibx-note .r2 { display: flex; align-items: flex-start; gap: 10px; margin-top: 6px; }
.ibx-note .bd { font-size: 15px; line-height: 1.33; opacity: .5; }
.ibx-note .dot { width: 12px; height: 12px; flex: none; margin-left: auto; margin-top: 4px;
  border-radius: 50%; background: var(--coral); opacity: 0; transition: opacity .45s ease; }
/* Непрочитанное подсвечиваем мягко. Гаснет не от захода в раздел, а от действия
   гостя: тапа по уведомлению или свайпа по нему — поэтому переход описан и здесь,
   на самой карточке, чтобы фон и отступы уезжали плавно вместе с точкой. */
.ibx-note { transition: background .45s ease, padding .3s ease, margin .3s ease; }
.ibx-note.is-new { background: rgba(255,122,90,.08); border-radius: 16px;
  margin: 0 -12px; padding: 15px 12px; border-top-color: transparent; }
.ibx-note.is-new .dot { opacity: 1; }
.ibx-note.is-new .bd { opacity: .68; }

/* заказ в истории */
.ibx-order { padding: 25px 0; border-top: 1px solid var(--line); }
.ibx-order .r1 { display: flex; align-items: center; gap: 10px; }
.ibx-order .num { font-family: var(--font-display); font-weight: 700; font-size: 22px; }
.ibx-order .meta { font-size: 15px; opacity: .5; margin-top: 6px; }
.ibx-order .again { margin-left: auto; width: 43px; height: 43px; flex: none; border-radius: 50%;
  background: #fff; box-shadow: 0 6px 18px rgba(6,42,50,.12); display: grid; place-items: center; }
.ibx-order .again img { width: 21px; height: 21px; }
.ibx-order .goods { display: flex; gap: 10px; margin-top: 14px; overflow-x: auto; scrollbar-width: none; }
.ibx-order .goods::-webkit-scrollbar { display: none; }
/* плитка держит ширину фото: длинное название переносится, а не растягивает строку */
.ibx-good { flex: 0 0 83px; width: 83px; display: flex; flex-direction: column; }
.ibx-good img { width: 83px; height: 83px; border-radius: var(--card-r); object-fit: cover; }
.ibx-good .n { font-family: var(--font-display); font-weight: 700; font-size: 13px; line-height: 1.22;
  margin-top: 8px; text-align: center; flex: 1 1 auto; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ibx-good .p { font-size: 15px; opacity: .5; text-align: center; margin-top: 4px; }
/* что было выбрано к напитку: объём, добавки, «погорячее» — гость видит, что повтор соберёт то же */
.ibx-good .o { font-size: 11px; line-height: 1.25; opacity: .55; text-align: center; margin-top: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ============ СТОРИС ============ */
.story { position: absolute; inset: 0; z-index: 90; background: #0d2b2f; overflow: hidden; }
.story[hidden] { display: none; }
.story__stage { position: absolute; inset: 0; display: flex; flex-direction: column;
  justify-content: flex-end; }
.story__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* подложка под текстом: фон и картинку выбирает владелец, читаемость не должна от них зависеть */
.story__stage.has-img .story__text::before { content: ""; position: absolute; inset: -40px -22px -60px;
  background: linear-gradient(180deg, transparent, rgba(6,26,29,.85) 55%); z-index: -1; }
.story__stage:not(.has-img) .story__text::before { content: ""; position: absolute; inset: -20px 8px;
  border-radius: 22px; background: rgba(7,34,38,.34); z-index: -1; }
.story__text { position: relative; z-index: 1; padding: 0 22px calc(46px + var(--safe-b)); color: #fff;
  text-shadow: 0 1px 10px rgba(6,26,29,.45); }
.story__text h2 { font-family: var(--font-display); font-weight: 900; font-size: 34px; line-height: .95;
  letter-spacing: -.01em; }
.story__text p { margin-top: 12px; font-size: 17px; line-height: 1.32; white-space: pre-line; }
/* сторис без картинки — просто крупный текст на фирменном фоне */
.story__stage:not(.has-img) { justify-content: center; background: linear-gradient(160deg, #56bbc1, #2f8f96); }
.story__stage:not(.has-img) .story__text { padding-bottom: 0; }
.story__bars { position: absolute; top: calc(10px + var(--safe-t)); left: 12px; right: 12px; z-index: 3;
  display: flex; gap: 4px; }
.story__bars i { flex: 1; height: 3px; border-radius: 99px; background: rgba(255,255,255,.35); overflow: hidden; }
.story__bars i span { display: block; height: 100%; width: 0; background: #fff; }
.story__bars i.done span { width: 100%; }
.story__bars i.run span { animation: storyRun var(--story-ms, 7000ms) linear forwards; }
@keyframes storyRun { to { width: 100%; } }
.story__x { position: absolute; top: calc(24px + var(--safe-t)); right: 14px; z-index: 4;
  width: 36px; height: 36px; border-radius: 50%; background: rgba(0,0,0,.35); color: #fff; font-size: 15px; }
.story__tap { position: absolute; top: 0; bottom: 0; width: 34%; z-index: 2; background: transparent; }
.story__tap--prev { left: 0; }
.story__tap--next { right: 0; width: 66%; }

/* ============ ДИАЛОГ-ПОДТВЕРЖДЕНИЕ (Figma «Поп-ап отмены» 174:1358) ============ */
.dlg { position: absolute; inset: 0; z-index: 80; display: grid; place-items: center;
  padding: 0 22px; background: rgba(0,0,0,.4); }
.dlg[hidden] { display: none; }
.dlg__card { width: 100%; max-width: 359px; padding: 36px 30px 30px; border-radius: 40px;
  background: #fff; text-align: center; animation: dlgIn .2s ease-out; }
@keyframes dlgIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
.dlg__title { font-family: var(--font-display); font-weight: 900; font-size: 45px; line-height: .82;
  letter-spacing: -.01em; }
.dlg__title em { font-style: normal; color: var(--coral); }
.dlg__text { margin-top: 14px; font-size: 18px; line-height: 1.22; }
.dlg__text[hidden] { display: none; }
/* безопасное действие — заливкой, опасное — «призраком»: как в макете */
.dlg__keep, .dlg__go { width: 100%; height: 59px; margin-top: 30px; border-radius: var(--pill-r);
  font-family: var(--font-display); font-weight: 700; font-size: 18px; }
.dlg__keep { background: linear-gradient(180deg, #ffa795, var(--coral)); color: #fff;
  box-shadow: 0 10px 24px rgba(255,131,107,.35); }
.dlg__go { margin-top: 10px; background: #fff; color: var(--coral);
  box-shadow: 0 6px 20px rgba(6,42,50,.12); }

/* ============ ОЦЕНКА ЗАКАЗА (Figma 173:1294 / 171:1207) ============ */
.fb-body { flex: 1; overflow-y: auto; padding: 0 20px; text-align: center; scrollbar-width: none;
  display: flex; flex-direction: column; }
.fb-body::-webkit-scrollbar { display: none; }
.fb-h1 { margin-top: min(15vh, 118px); margin-top: min(15svh, 118px); font-family: var(--font-display); font-weight: 900; font-size: 45px;
  line-height: .82; letter-spacing: -.01em; }
.fb-h1 em { font-style: normal; color: #ffc355; }
.fb-sub { margin-top: 14px; font-size: 18px; line-height: 1.22; }
.fb-order { margin-top: 8px; font-size: 14px; opacity: .45; }

/* звёзды дугой: центральная крупнее, все выровнены по центру строки */
.fb-stars { display: flex; align-items: center; justify-content: center; gap: min(22px, 5vw); margin-top: 26px; }
.fb-star { flex: none; color: #d9d9d9; transition: color .15s, transform .15s; }
.fb-star svg { display: block; width: 100%; height: auto; }
.fb-star:nth-child(1), .fb-star:nth-child(5) { width: 43px; }
.fb-star:nth-child(2), .fb-star:nth-child(4) { width: 52px; }
.fb-star:nth-child(3) { width: 62px; }
.fb-star.is-on { color: #ffc355; filter: drop-shadow(0 8px 8px rgba(229,170,93,.35)); }
.fb-star:active { transform: scale(.92); }

.fb-thanks { margin-top: 18px; font-family: var(--font-display); font-weight: 700; font-size: 18px; }
.fb-box { position: relative; margin: 30px 9px 0; padding: 15px 15px 34px; min-height: 85px;
  border-radius: 19px; background: #f2f2f2; text-align: left; }
.fb-box textarea { width: 100%; border: none; background: none; resize: none; outline: none;
  font-family: var(--font-body); font-weight: 500; font-size: 14px; color: var(--ink); }
.fb-box textarea::placeholder { color: var(--ink); opacity: .45; }
.fb-count { position: absolute; right: 15px; bottom: 12px; font-weight: 500; font-size: 14px; opacity: .55; }

.fb-foot { padding: 16px 20px calc(16px + var(--safe-b)); }
.fb-send { width: 100%; height: 59px; border-radius: var(--pill-r); background: var(--accent); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
  box-shadow: 0 10px 24px rgba(0,188,199,.35); }
.fb-send:disabled { background: #a5eaee; box-shadow: none; }
.fb-later { display: block; width: 100%; margin-top: 12px; padding: 6px;
  font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink); opacity: .45; }

/* ============ ПРОФИЛЬ (Figma 330:3242) ============ */
.pf-scroll { flex: 1; overflow-y: auto; padding: 20px 20px calc(24px + var(--safe-b));
  display: flex; flex-direction: column; scrollbar-width: none; }
.pf-scroll::-webkit-scrollbar { display: none; }
.pf-h1 { font-family: var(--font-display); font-weight: 700; font-size: 26px; }
.pf-h1--menu { margin-top: 30px; }
.pf-card { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 16px;
  border-radius: var(--card-r); background: #fff; box-shadow: 0 8px 24px rgba(6,42,50,.08); }
.pf-field .l { font-size: 15px; opacity: .5; }
.pf-field .v { font-family: var(--font-display); font-weight: 700; font-size: 20px; margin-top: 5px; }
.pf-edit { margin-left: auto; font-family: var(--font-display); font-weight: 600; font-size: 14px;
  color: var(--coral); }
.pf-menu { margin-top: 20px; border-bottom: 1px solid var(--line); }
.pf-row { display: block; width: 100%; text-align: left; padding: 22px 0; border-top: 1px solid var(--line);
  font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--ink); }
.pf-row--red { color: var(--coral); }
.pf-ver { margin-top: auto; padding-top: 30px; text-align: center; font-size: 12px; opacity: .3; }

/* ============ STATUS (Figma: Статус 0/50/100, 95:1059) ============ */
.status { position: absolute; inset: 0; z-index: 50;
  background: linear-gradient(180deg, var(--g-top) 0%, var(--g-mid) 75%, var(--g-bot) 100%); }
.status[hidden] { display: none; }
.status__inner { display: flex; flex-direction: column; height: 100%; }

/* герой: мишка на градиенте со свечением за спиной */
.st-hero { position: relative; flex: 0 0 auto; height: clamp(175px, 28%, 232px); }
.st-hero::before { content: ""; position: absolute; left: 50%; top: 62%; transform: translate(-50%, -50%);
  width: 120%; height: 165%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(213,253,255,.85) 0%, rgba(137,251,255,.4) 60%, rgba(137,251,255,0) 100%);
  filter: blur(30px); }
.st-bear { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  height: 74%; max-height: 172px; width: auto; }
.st-head { position: absolute; top: calc(18px + var(--safe-t)); left: 20px; right: 20px;
  display: flex; justify-content: space-between; z-index: 2; }
.st-head .hbtn img.inv { filter: invert(1); }

/* белая карточка со статусом и деталями (Figma: radius 40) */
.st-card { position: relative; flex: 1; min-height: 0; background: #fff;
  border-radius: 40px 40px 0 0; overflow: hidden; }
.st-scroll { height: 100%; overflow-y: auto; padding: 24px 22px 150px; scrollbar-width: none; }
.st-scroll::-webkit-scrollbar { display: none; }
.st-toprow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.st-title { font-size: 30px; font-weight: 700; line-height: 1; color: var(--ink); }
.st-time { font-size: 14px; font-weight: 500; line-height: 1; color: var(--ink); opacity: .3; }
.st-sub { margin-top: 3px; font-size: 16px; font-weight: 500; line-height: 1; color: var(--ink); opacity: .5; }

/* прогресс: текущий шаг — большой круг с иконкой этапа, пройденные — залитые точки */
.st-progress { display: flex; align-items: center; margin: 20px 0 0; min-height: 52px; }
.st-node { box-sizing: border-box; flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; background: #fff; border: 4px solid #cefcff;
  transition: flex-basis .45s cubic-bezier(.22,.86,.28,1), width .45s cubic-bezier(.22,.86,.28,1), height .45s cubic-bezier(.22,.86,.28,1),
    background .45s cubic-bezier(.22,.86,.28,1), border-color .45s cubic-bezier(.22,.86,.28,1), box-shadow .45s cubic-bezier(.22,.86,.28,1); }
.st-node img { width: 22px; height: 22px; opacity: 0; transform: scale(.4);
  transition: opacity .28s cubic-bezier(.22,.86,.28,1), transform .35s cubic-bezier(.22,.86,.28,1); }
.st-node.is-done { background: #5edfe6; border-color: #5edfe6; }
.st-node.is-cur { flex-basis: 52px; width: 52px; height: 52px; border: 0;
  background: radial-gradient(140% 240% at 50% 0%, rgba(136,249,255,.95) 0%, rgba(136,249,255,0) 65%), #3bc9d0;
  box-shadow: 0 8px 16px rgba(93,222,229,.28), inset 0 -6px 6px rgba(255,255,255,.3); }
.st-node.is-cur img { opacity: 1; transform: none; transition-delay: .12s; }
.st-bar { position: relative; flex: 1; height: 4px; border-radius: 41px; background: #cefcff; margin: 0 4px; overflow: hidden; }
.st-bar i { position: absolute; inset: 0; border-radius: inherit; background: #5edfe6;
  transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.22,.86,.28,1); }
.st-bar.fill i { transform: none; }
/* экран только открыли — состояние ставим сразу, без проезда */
.st-progress.no-anim .st-node, .st-progress.no-anim .st-node img, .st-progress.no-anim .st-bar i { transition: none; }

.st-swap { animation: st-swap .32s cubic-bezier(.22,.86,.28,1) both; }
@keyframes st-swap { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* адрес: пунктир 3–3 как в Figma (Line 5/6) */
.st-addr { margin-top: 30px; padding: 15px 0; border-top: 1px dashed rgba(0,0,0,.2); border-bottom: 1px dashed rgba(0,0,0,.2); }
.st-addr .l1 { font-size: 16px; font-weight: 400; line-height: 1.35; color: var(--ink); opacity: .5; }
.st-addr .l2 { margin-top: 2px; font-size: 20px; font-weight: 600; line-height: 1.35; color: var(--ink); }

.st-dt { margin: 20px 0 15px; font-size: 20px; font-weight: 700; }
.st-item { display: flex; align-items: flex-start; gap: 10px; }
.st-item img { width: 70px; height: 70px; border-radius: 20px; object-fit: cover; }
.st-item .mid { flex: 1; min-width: 0; }
.st-item .nm { font-size: 18px; font-weight: 700; }
.st-item .sz { font-size: 14px; }
.st-item .adt { margin-top: 9px; font-size: 12px; }
.st-item .ad { font-size: 12px; font-weight: 600; }
.st-item .pr { font-size: 20px; font-weight: 700; white-space: nowrap; }
.st-div { height: 1px; background: var(--line); margin: 10px 0; }

/* низ: белый градиент-фейд и кнопка отмены */
.st-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 46px 20px calc(18px + var(--safe-b));
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 55%); pointer-events: none; }
.st-cancel { pointer-events: auto; width: 100%; height: 59px; border-radius: 68px; background: #fff;
  border: 1px solid rgba(160,160,160,.2); box-shadow: 0 6px 30px rgba(7,41,43,.1);
  font-size: 18px; font-weight: 700; color: #48c7ce; }
.st-cancel:active { transform: scale(.97); }

/* ============ ORDER BAR / TOAST ============ */
.orderbar { position: absolute; top: calc(88px + var(--safe-t)); right: 12px; z-index: 30;
  display: flex; flex-direction: column; gap: 8px; }
.orderbar[hidden] { display: none; }
.ochip { display: flex; align-items: center; gap: 6px; padding: 9px 13px; border-radius: 99px;
  background: rgba(255,255,255,.92); box-shadow: 0 6px 18px rgba(6,42,50,.25);
  font-family: var(--font-display); font-size: 12px; color: var(--ink); }
.ochip--ready { background: var(--accent); color: #fff; }

.toast { position: absolute; left: 50%; bottom: calc(104px + var(--safe-b)); transform: translate(-50%, 16px);
  z-index: 90; padding: 12px 20px; border-radius: 99px; background: rgba(12,42,48,.92); color: #fff;
  font-size: 14px; font-weight: 700; opacity: 0; transition: opacity .25s, transform .25s;
  pointer-events: none; white-space: nowrap; max-width: 92%; overflow: hidden; text-overflow: ellipsis; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* короткие экраны */
@media (max-height: 700px) {
  .result .rball { width: 200px; height: 200px; margin-top: 14vh; margin-top: 14svh; }
  .prod-title { margin-top: 5vh; margin-top: 5svh; }
}

/* ============ карточка позиции: состав + КБЖУ (Figma «Подробнее») ============ */
.prod-desc h3 { font-family: var(--font-display); font-weight: 600; font-size: 20px; margin: 14px 0 6px; color: #fff; }
.prod-desc p { font-size: 15px; line-height: 1.45; color: rgba(255,255,255,.85); }
/* Figma 169:895 — двойная пилюля: внешняя белая 60% (r35, pad5), внутри белая 80% (r68);
   блок цены ~29% ширины, кнопка ~71%, высота 59px */
.buyrow { position: relative; background: rgba(255,255,255,.6); border-radius: 35px;
  padding: 5px; gap: 0; align-items: stretch; }
.buyrow::before { content: ""; position: absolute; inset: 5px;
  background: rgba(255,255,255,.8); border-radius: 68px; }
.buyrow .price, .buyrow .pill { position: relative; z-index: 1; }
.buyrow .price { flex: 0 0 29%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; line-height: 1.05; gap: 1px; }
.buyrow .price > span { font-weight: 700; font-size: clamp(17px, 5vw, 20px); color: var(--ink); }
.buyrow .price s { font-size: 13px; font-weight: 600; color: #9a9a9a; }
.buyrow .pill { flex: 1 1 71%; height: 59px; font-weight: 700; font-size: clamp(15px, 4.6vw, 18px);
  text-shadow: none; box-shadow: none; }

/* добавки без фото — нейтральный плейсхолдер */
.addon .ai--none { display: block; width: 100%; aspect-ratio: 1; border-radius: 14px; background: #eef4f5; }
.addon-none { padding: 26px 12px; text-align: center; font-family: var(--font-display); font-size: 14px; opacity: .55; }

/* иконка внутри чипса категории */
.chip .chip-ic { width: 10px; height: 10px; flex: 0 0 auto; display: block; padding: 0;
  color: var(--accent); }
.chip.is-active .chip-ic { color: #fff; }
/* название товара: Nunito 900 (Figma 55px) */
.prod-title h1 { font-family: var(--font-body); font-weight: 900; font-size: clamp(38px, 13vw, 55px); line-height: 1; }
/* мелкие подписи размеров — единственное место с Bounded */
.sizes .sz { font-family: var(--font-size-label); }

/* точки-индикаторы карусели добавок (Figma) */
.addon-dots { display: flex; justify-content: center; gap: 6px; margin: 12px 0 4px; }
.ad-dot { width: 7px; height: 7px; border-radius: 50%; background: #d6eef0; transition: background .2s; }
.ad-dot.on { background: var(--accent); }
.promo--friends2 { background: linear-gradient(160deg, #ffd8a8, #ffb26b); }

/* промо «Добро пожаловать»: голова мишки прижата к низу карточки (Figma Group 2) */
.promo--welcome img { position: absolute; inset: auto 0 0 0; top: auto; width: 100%; height: auto;
  object-fit: contain; object-position: bottom; }

/* система просит меньше движения — оставляем только смену состояний */
@media (prefers-reduced-motion: reduce) {
  .cartfab.is-in { animation: none; }
}


/* ============ производительность на iOS ============ */
/* инерционный скролл + слой на GPU для всех прокручиваемых лент */
.grid, .chips, .promos, .addon-list, .recs, .cart-scroll, .co-scroll, .st-scroll {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  transform: translateZ(0);
}
/* карточки вне экрана не рендерятся (Safari 17+, Chrome) */
/* content-visibility убран намеренно: в Safari содержимое карточки (название и цена)
   местами не отрисовывалось — выигрыш в скорости не стоил пропавших ценников. */
/* фото в сетке: свой слой, чтобы Safari не переклеивал при каждом кадре */
.pcard img.ph { transform: translateZ(0); backface-visibility: hidden; }
/* медведь: анимируем только composited-свойства */
.hero-bear { will-change: opacity, transform; }
#scr-home:not(.is-scrolled) .hero-bear { will-change: auto; }
/* уважать системную настройку «уменьшить движение» */
@media (prefers-reduced-motion: reduce) {
  .hero-bear, .promos, .screen, .splash { transition: none !important; }
}


/* ============ смахивание шторок вниз ============ */
.addon-card, .ag-card { touch-action: pan-x; will-change: transform; }
/* полоска-ручка: увеличенная зона нажатия, но визуально та же */
.ag-grip { position: relative; }
.ag-grip::after { content: ""; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); width: 120px; height: 34px; }


/* подсказка под паролем в оформлении */
.co-hint { margin: 6px 4px 0; font-size: 12px; line-height: 1.35; color: #8a8a8a; }
.co-hint.err { color: var(--coral); font-weight: 700; }


/* ============ группы точек: бренд → район ============ */
/* заголовок группы в оформлении */
.loc-group { width: 100%; margin: 12px 0 6px; font-weight: 700; font-size: 13px; color: #8a8a8a; }
.loc-group:first-child { margin-top: 0; }
.loc-group-items { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }

/* заголовок группы в шторке выбора кофейни */
.loc-head { display: flex; align-items: baseline; gap: 8px; margin: 16px 0 6px; }
.loc-head:first-child { margin-top: 0; }
.loc-head b { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink); }
.loc-head span { font-size: 13px; color: var(--btn); font-weight: 700; }
/* ориентир под адресом */
.loc-opt em { display: block; font-style: normal; font-size: 12px; color: #9a9a9a; margin-top: 2px; }


/* ============ партнёрская сеть: отдельная светящаяся карточка ============ */
/* Приложение — агрегатор: чужой бренд отделяем визуально, но без крика.
   Мягкий бирюзовый ореол медленно дышит — притягивает взгляд и не мешает. */
.loc-brand {
  position: relative;
  margin: 16px 0 4px;
  padding: 12px 14px 4px;
  border-radius: 20px;
  border: 1.5px solid rgba(255, 122, 168, .45);
  background: linear-gradient(180deg, rgba(255, 122, 168, .07), rgba(255, 122, 168, .02));
  box-shadow: 0 0 18px rgba(255, 122, 168, .18);
  animation: brandGlow 3.4s ease-in-out infinite;
}
/* имя партнёрской сети — в розовом овале */
.loc-brand .loc-head b {
  display: inline-block; padding: 5px 13px; border-radius: 99px;
  background: var(--brand-pink); color: #fff; font-size: 14px;
  box-shadow: 0 3px 10px rgba(255, 122, 168, .35);
}
.loc-brand .loc-head span { color: var(--brand-pink); }
.loc-brand .loc-head { margin-top: 0; }
.loc-brand .loc-opt:last-child { border-bottom: none; }
@keyframes brandGlow {
  0%, 100% { box-shadow: 0 0 16px rgba(255, 122, 168, .16); border-color: rgba(255, 122, 168, .40); }
  50%      { box-shadow: 0 0 26px rgba(255, 122, 168, .34); border-color: rgba(255, 122, 168, .70); }
}

/* тот же акцент для группы в оформлении */
.loc-group--partner { color: var(--brand-pink); font-weight: 800; }
.loc-group-items--partner {
  padding: 10px; border-radius: 16px;
  border: 1.5px solid rgba(255, 122, 168, .4);
  background: rgba(255, 122, 168, .06);
  box-shadow: 0 0 14px rgba(255, 122, 168, .16);
}

/* «уменьшить движение» — свечение замирает, рамка остаётся */
@media (prefers-reduced-motion: reduce) {
  .loc-brand { animation: none; }
}