/* ==========================================================================
   YUSR APP — Components
   Требует tokens.css. Числа сняты с Figma K5BDJ5bnFtMFeJ5ssr0vCO, страница MCP,
   node id указаны в комментариях. Экран 375, поле 16, контейнер 343.
   ========================================================================== */

@import url('assets/bg-jagged.css');

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: #0c0f12;
  font-family: var(--font-body);
  color: var(--text-neutral-primary);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }


/* ==========================================================================
   ОБОЛОЧКА ТЕЛЕФОНА
   На десктопе — рамка по центру. На реальном телефоне — во весь экран.
   ========================================================================== */

/* ==========================================================================
   ПЕРЕКЛЮЧАТЕЛЬ ВЕРСИЙ
   Инструмент просмотра, а не часть приложения — поэтому живёт вне рамки
   телефона и намеренно оформлен нейтрально, чтобы не путать с интерфейсом.
   ========================================================================== */

.variants {
  display: flex;
  gap: 4px;
  width: max-content;
  margin: 24px auto 0;
  padding: 4px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .08);
}
.variants__btn {
  padding: 8px 18px;
  border-radius: 7px;
  color: rgba(255, 255, 255, .55);
  font: 500 13px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .01em;
  transition: background-color .15s ease, color .15s ease;
}
.variants__btn:hover { color: rgba(255, 255, 255, .85); }
.variants__btn.is-active { background: var(--surface-brand-primary); color: var(--text-brand-primary); }

/* На узком экране рамки нет — переключатель прижимаем к верху поверх экрана */
@media (max-width: 420px) {
  .variants {
    position: fixed; top: 8px; left: 50%; transform: translateX(-50%);
    z-index: 100; margin: 0;
    background: rgba(12, 15, 18, .55);
    backdrop-filter: blur(8px);
  }
}

.phone {
  position: relative;
  width: var(--screen-w);
  height: 812px;
  margin: 24px auto;
  background: var(--bg-primary);
  border-radius: 44px;
  overflow: hidden;
  box-shadow: 0 0 0 10px #0c0f12, 0 24px 60px rgba(0,0,0,.5);
}
@media (max-width: 420px) {
  .phone { width: 100vw; height: 100dvh; margin: 0; border-radius: 0; box-shadow: none; }
}

/* Экраны переключаются классом. Один виден, остальные скрыты. */
.screen { position: absolute; inset: 0; display: none; flex-direction: column; background: var(--bg-primary); }
.screen.is-active { display: flex; }

/* Прокручиваемая область экрана */
.scroll { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
.scroll::-webkit-scrollbar { width: 0; }

/* Вместо имитации статус-бара iOS — камера по центру.
   Время и заряд рисовать нет смысла: они не часть продукта, а их
   недоделанный вид отвлекает при просмотре макета.

   Полоса ПАРИТ над контентом: она вне потока и без заливки, поэтому под ней
   виден фон страницы — и лаймовый градиент вверху, и то, что проедет под
   камерой при скролле. Место под неё освобождают отступы контента ниже. */
.notch {
  position: absolute; top: 0; left: 0; right: 0;
  height: var(--notch-h);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 5;
}
.notch::after {
  content: '';
  width: 80px; height: 24px;
  border-radius: var(--radius-lg);
  background: #0c0f12;
}

/* Индикатор home — 134×5 r100 (Figma) */
.home-indicator {
  flex: 0 0 auto;
  height: 24px;
  display: flex; align-items: center; justify-content: center;
}
.home-indicator::after {
  content: ''; width: 134px; height: 5px;
  border-radius: var(--radius-full); background: var(--text-neutral-primary);
}
.home-indicator--light::after { background: var(--text-absolute-white); }


/* ==========================================================================
   ТИПОГРАФИКА
   ========================================================================== */

.t-h1, .t-h2, .t-h3, .t-h4 { font-family: var(--font-display); font-weight: var(--weight-display); margin: 0; }
.t-b1, .t-b2, .t-caption { font-family: var(--font-body); margin: 0; }

.t-h1 { font-size: var(--size-h1); line-height: var(--lh-h1); }
.t-h2 { font-size: var(--size-h2); line-height: var(--lh-h2); }
.t-h3 { font-size: var(--size-h3); line-height: var(--lh-h3); }
.t-h4 { font-size: var(--size-h4); line-height: var(--lh-h4); }
.t-b1 { font-size: var(--size-b1); line-height: var(--lh-b1); font-weight: var(--weight-medium); }
.t-b2 { font-size: var(--size-b2); line-height: var(--lh-b2); font-weight: var(--weight-medium); }
.t-caption { font-size: var(--size-caption); line-height: var(--lh-caption); font-weight: var(--weight-medium); }

.c-primary   { color: var(--text-neutral-primary); }
.c-secondary { color: var(--text-neutral-secondary); }
.c-tertiary  { color: var(--text-neutral-tertiary); }
.c-brand     { color: var(--text-brand-primary); }
.c-negative  { color: var(--text-negative-primary); }
.c-white     { color: var(--text-absolute-white); }


/* ==========================================================================
   ICON — <i class="icon icon--s" data-icon="check"></i>
   Размеры приложения: xs 16, s 24, m 28, l 32.
   ========================================================================== */

.icon { width: var(--icon-s); height: var(--icon-s); flex: 0 0 auto; }
.icon--xs { width: var(--icon-xs); height: var(--icon-xs); }
.icon--s  { width: var(--icon-s);  height: var(--icon-s); }
.icon--m  { width: var(--icon-m);  height: var(--icon-m); }
.icon--l  { width: var(--icon-l);  height: var(--icon-l); }
i[data-icon] { display: inline-block; flex: 0 0 auto; }

.icon-missing {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 6px; border: 2px dashed var(--icon-critical-primary);
  border-radius: var(--radius-sm); color: var(--text-negative-primary);
  background: var(--surface-critical-primary);
  font-family: var(--font-body); font-size: 11px; line-height: 15px; white-space: nowrap;
}
.icon-missing::before { content: '⚠ '; }

.icon--spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }


/* ==========================================================================
   LAYOUT
   Content-page: pad 0/16/16/16, gap 32 (Figma 5179:44758 и др.)
   Home: pad-top 24, gap 24 (5179:44566)
   ========================================================================== */

.page { display: flex; flex-direction: column; gap: var(--spacing-32); padding: 0 var(--page-pad) var(--page-pad); }
.page--home { gap: var(--spacing-24); padding-top: var(--spacing-24); }
/* Последний блок перед бот-баром. 16 → 32 → 64: список упирался в меню */
.page--last { padding-bottom: var(--spacing-64); }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.spacer { flex: 1 1 auto; }

/* Горизонтальная лента без полосы прокрутки.
   Снап НЕ включаем по умолчанию: со scroll-snap-align на детях браузер при
   загрузке подтягивает первый элемент к границе контента и съедает
   левый отступ — карточка прилипала к краю экрана. Снап включается точечно
   там, где он действительно нужен (фото, лайтбокс). */
.hscroll {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
}
.hscroll::-webkit-scrollbar { display: none; }

/* Лента, выходящая за поля страницы (виджеты, категории) */
.bleed {
  margin-inline: calc(var(--page-pad) * -1);
  padding-inline: var(--page-pad);
}


/* ==========================================================================
   TOP BAR — 343×32, gap 16, иконка 32 (Figma 5179:44758 → Top-bar)
   ========================================================================== */

.topbar { display: flex; align-items: center; gap: var(--spacing-16); height: 32px; padding: 0 var(--page-pad); flex: 0 0 auto; }
.topbar__back { width: 32px; height: 32px; display: grid; place-items: center; }
.topbar__title {
  flex: 1 1 auto; text-align: center;
  font-family: var(--font-body); font-weight: var(--weight-medium);
  font-size: var(--size-b2); line-height: var(--lh-b2);
}
/* Компенсация ширины кнопки, чтобы заголовок стоял ровно по центру */
.topbar__title + .topbar__spacer { width: 32px; flex: 0 0 auto; }


/* ==========================================================================
   BOTTOM BAR — 375×90, pad 4/0/24/0; item 94×62, pad 8/0/4/0, gap 4
   (Figma 5179:44566 → Bottom Bar)
   ========================================================================== */

.bottombar {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  display: flex;
  height: var(--bottombar-h);
  padding: var(--spacing-4) 0 var(--spacing-24);
  background: var(--bg-secondary);
}
/* Мягкий переход в фон страницы: контент над меню растворяется, а не
   упирается в жёсткую границу */
.bottombar::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 100%;
  height: var(--spacing-32);
  background: linear-gradient(to top, var(--bg-secondary), transparent);
  pointer-events: none;
}
.bottombar__item {
  flex: 1 1 0;
  display: flex; flex-direction: column; align-items: center; gap: var(--spacing-4);
  padding: var(--spacing-8) 0 var(--spacing-4);
  color: var(--text-neutral-secondary);
}
.bottombar__item .icon { color: var(--icon-neutral-secondary); }
.bottombar__item span { font-size: var(--size-caption); line-height: var(--lh-caption); font-weight: var(--weight-medium); }
.bottombar__item.is-active { color: var(--text-neutral-primary); }
.bottombar__item.is-active .icon { color: var(--icon-neutral-primary); }
.bottombar__item.is-disabled { pointer-events: none; }


/* ==========================================================================
   WIDGET — 200×140, r8, pad 16, gap 24 (Figma 5179:45116)
   Amount-area gap 8, Minor gap 6, прогресс 168×6 r2
   ========================================================================== */

.widgets { gap: var(--spacing-8); }

.widget {
  flex: 0 0 auto;
  width: 200px; height: 140px;
  padding: var(--spacing-16);
  border-radius: var(--radius-md);
  background: var(--surface-absolute-white);
  display: flex; flex-direction: column; justify-content: space-between;
}
.widget__amount {
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--size-h4); line-height: var(--lh-h4);
}
.widget__amount--negative { color: var(--text-negative-primary); }
.widget__top { display: flex; flex-direction: column; gap: var(--spacing-8); }
.widget__sub { display: flex; flex-direction: column; gap: var(--spacing-4); }
.widget__caption { font-size: var(--size-caption); line-height: var(--lh-caption); font-weight: var(--weight-medium); color: var(--text-neutral-secondary); }

/* Непрерывный прогресс — 6px, r2 */
.progress { height: 6px; border-radius: var(--radius-xs); background: var(--surface-brand-tertiary); overflow: hidden; }
.progress__fill { height: 100%; border-radius: var(--radius-xs); background: var(--surface-brand-primary); }


/* ==========================================================================
   CATEGORIES — плитка 116×125, r8, pad-bottom 12, gap 8; Pic 116×87 pad 10.
   Сетка 2 ряда по 4, gap 4. Скроллится ЦЕЛИКОМ одним свайпом (Figma: Row 476)
   ========================================================================== */

/* flex: 0 0 auto обязателен — иначе полотно сожмётся до ширины экрана
   и горизонтальный свайп по всей сетке работать не будет */
.categories { flex: 0 0 auto; display: flex; flex-direction: column; gap: var(--spacing-4); }
.categories__row { display: flex; gap: var(--spacing-4); }

.category {
  flex: 0 0 auto;
  width: 116px; height: 125px;
  padding-bottom: var(--spacing-12);
  border-radius: var(--radius-md);
  background: var(--surface-absolute-white);
  display: flex; flex-direction: column; align-items: center; gap: var(--spacing-8);
}
.category__pic {
  width: 116px; height: 87px;
  padding: var(--spacing-10);
  display: grid; place-items: center;
  color: var(--icon-neutral-primary);
}
.category__pic svg { width: 100%; height: 100%; }
.category__label {
  font-size: var(--size-caption); line-height: var(--lh-caption);
  font-weight: var(--weight-medium); color: var(--text-neutral-secondary);
}


/* ==========================================================================
   FEATURED — на зазубренном фоне, горизонтальная лента круглых аватаров
   ========================================================================== */

/* Отступы вокруг зазубренной фигуры удвоены: сверху было 16 (нижний padding
   блока категорий), снизу 24 (верхний padding списка) — зубцы слипались
   с соседними секциями. */
.featured {
  position: relative;
  overflow: hidden;
  margin-top: var(--spacing-16);
  margin-bottom: var(--spacing-24);
}
/* Геометрия снята с Figma (Home 5179:44566, секция Featured):
   контент 359×180, отступ сверху 40, снизу 57 — ровно вписывается в фигуру
   433×277 между зубцами. Заголовок 18 (h4), не 28.

   По горизонтали важно: фигура шире экрана на 29 с каждой стороны
   (--jag-bleed), поэтому слева нужно 29 + 16 = 45, иначе заголовок уезжает
   за край экрана. Справа только 29 — контент доходит до правой границы
   экрана и уходит в скролл. */
.featured__inner {
  position: relative;
  display: flex; flex-direction: column;
  gap: var(--spacing-16);
  padding: 40px 0 57px;   /* по горизонтали отступает каждый ребёнок сам */
}
.featured__title { padding-left: calc(var(--jag-bleed) + var(--page-pad)); }

/* Лента занимает ВСЮ ширину фигуры, а стартовый отступ задан её внутренним
   padding. Иначе левая граница прокрутки совпадала бы с полем страницы,
   и круги обрезались бы по нему вместо края экрана. */
.featured__list {
  gap: 0;
  padding-left: calc(var(--jag-bleed) + var(--page-pad));
  padding-right: var(--jag-bleed);
}
.featured__item {
  flex: 0 0 auto; width: 98px;
  display: flex; flex-direction: column; align-items: center; gap: var(--spacing-8);
}
.featured__avatar { width: 64px; height: 64px; border-radius: var(--radius-full); background: var(--surface-absolute-white); }
.featured__name { font-size: var(--size-caption); line-height: var(--lh-caption); font-weight: var(--weight-medium); text-align: center; }


/* ==========================================================================
   MERCHANT ROW — Cell 343×78, gap 12; аватар 56 full; Content gap 4;
   Top gap 10; rate gap 4. Список: gap 20 (Figma 5179:44758 → Cells)
   ========================================================================== */

/* Разделители между строками — Stroke/Neutral/Tertiary.
   Отступ разнесён по 10 сверху и снизу от линии, чтобы она стояла ровно
   посередине промежутка: 10 + 10 даёт те же 20, что и gap в макете. */
.merchants { display: flex; flex-direction: column; gap: 0; }
.merchants > .merchant { padding: var(--spacing-10) 0; }
.merchants > .merchant + .merchant { border-top: 1px solid var(--stroke-neutral-tertiary); }

.merchant {
  display: flex; align-items: center; gap: var(--spacing-12);
  min-height: 78px;
  text-align: left; width: 100%;
}
/* Surface/Neutral/Primary — на ступень плотнее, чем Secondary:
   на светло-сером фоне Secondary почти не читался */
.merchant__avatar { width: 56px; height: 56px; flex: 0 0 auto; border-radius: var(--radius-full); background: var(--surface-neutral-primary); }
/* Отступ 4 только между названием и описанием; две нижние строки идут
   вплотную, поэтому gap на колонке нулевой */
.merchant__body { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.merchant__name { font-size: var(--size-b1); line-height: var(--lh-b1); font-weight: var(--weight-medium); margin-bottom: var(--spacing-4); }
.merchant__services { font-size: var(--size-b2); line-height: var(--lh-b2); font-weight: var(--weight-medium); color: var(--text-neutral-secondary); }
.merchant__rate { display: flex; align-items: center; gap: var(--spacing-4); font-size: var(--size-b2); line-height: var(--lh-b2); font-weight: var(--weight-medium); color: var(--text-neutral-secondary); }

/* Звезда в СПИСКЕ — серая, заодно с текстом рейтинга.
   Оранжевой она остаётся только на странице мерчанта (.rate), где рейтинг
   работает акцентом, а не фоновой информацией. */
.merchant__rate .icon { color: var(--icon-neutral-secondary); }
.rate .icon { color: var(--icon-warning-primary); }

/* Разделители между строками */
.merchants--divided { gap: 0; }
.merchants--divided .merchant { padding: var(--spacing-16) 0; }
.merchants--divided .merchant + .merchant { border-top: 1px solid var(--stroke-neutral-tertiary); }


/* ==========================================================================
   FILTER CHIP — ряд 343×48, gap 8; иконка 24 (Figma 5179:44758 → Filters)
   Активный — лайм с тёмно-оливковым текстом.
   ========================================================================== */

.filters { gap: var(--spacing-8); }
.filter {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: var(--spacing-8);
  height: 48px; padding: 0 var(--spacing-16);
  border-radius: var(--radius-md);
  background: var(--surface-neutral-secondary);
  font-size: var(--size-b2); line-height: var(--lh-b2); font-weight: var(--weight-medium);
  white-space: nowrap;
}
.filter .icon { color: var(--icon-neutral-primary); }
.filter.is-active { background: var(--surface-brand-primary); color: var(--text-brand-primary); }
.filter.is-active .icon { color: var(--icon-brand-primary); }


/* ==========================================================================
   BUTTON — 56, r8, во всю ширину. Ряд кнопок gap 12 (Figma → Buttons 343×124)
   ========================================================================== */

.btn {
  display: flex; align-items: center; justify-content: center; gap: var(--spacing-8);
  width: 100%; height: 56px;
  border-radius: var(--radius-md);
  font-size: var(--size-b1); line-height: var(--lh-b1); font-weight: var(--weight-medium);
  transition: background-color .15s ease;
}
.btn--primary { background: var(--surface-brand-primary); color: var(--text-brand-primary); }
.btn--primary:active { background: var(--surface-brand-secondary); }
.btn--secondary { background: var(--surface-neutral-secondary); color: var(--text-neutral-primary); }
.btn--secondary:active { background: var(--surface-neutral-primary); }

.buttons { display: flex; flex-direction: column; gap: var(--spacing-12); }

/* Липкая панель действий внизу экрана */
.actions-sticky {
  position: sticky; bottom: 0;
  padding: var(--spacing-16) 0 0;
  background: linear-gradient(to bottom, transparent, var(--bg-primary) var(--spacing-16));
}


/* ==========================================================================
   BOTTOM SHEET — 375×594, pad 8/16/48/16, gap 32; ручка 80×4 r4;
   Title+close 343×32 gap 16; Items gap 20 (Figma 5179:44900 → Bottom-sheet)
   ========================================================================== */

.sheet-backdrop {
  position: absolute; inset: 0; z-index: 40;
  background: rgba(12, 15, 18, .5);
  display: none;
}
.sheet-backdrop.is-open { display: block; }

/* visibility, а не display: иначе смена display в том же кадре съедает
   анимацию и шторка появляется рывком */
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 50;
  max-height: 92%;
  display: flex; flex-direction: column; gap: var(--spacing-32);
  padding: var(--spacing-8) var(--page-pad) var(--spacing-48);
  background: var(--bg-primary);
  border-radius: var(--radius-3xl) var(--radius-3xl) 0 0;
  transform: translateY(100%);
  visibility: hidden;
  pointer-events: none;
  transition: transform .25s ease, visibility 0s .25s;
}
.sheet.is-open {
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition: transform .25s ease, visibility 0s;
}

.sheet__handle { display: flex; justify-content: center; padding-bottom: var(--spacing-12); }
.sheet__handle::after { content: ''; width: 80px; height: 4px; border-radius: var(--radius-sm); background: var(--surface-neutral-primary); }

/* Крестик — в самом углу шторки, вне потока, чтобы не отжимать заголовок вниз */
.sheet__close {
  position: absolute; top: var(--spacing-16); right: var(--page-pad);
  width: 32px; height: 32px;
  display: grid; place-items: center;
  z-index: 2;
}

/* Заголовок шторок-инструкций — по центру */
.sheet__title { text-align: center; }

.sheet__head { display: flex; align-items: center; gap: var(--spacing-16); min-height: 32px; }
.sheet__head .t-h3, .sheet__head .t-h4 { flex: 1 1 auto; }

.sheet__body { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: var(--spacing-32); }
.sheet__body::-webkit-scrollbar { width: 0; }

/* Кнопки живут отдельным нижним блоком: не уезжают со скроллом и, главное,
   не сжимаются — внутри flex-колонки .btn с фиксированной высотой
   схлопывался, потому что flex-item по умолчанию можно ужать. */
.sheet__actions {
  position: relative;
  flex: 0 0 auto;
  display: flex; flex-direction: column; gap: var(--spacing-12);
  padding-top: var(--spacing-12);
  background: var(--bg-primary);
}
/* Короткая растушёвка над кнопками. На 48px в зоне размытия оставался
   полупрозрачный текст, и это читалось как пустая белая дыра — 16 хватает,
   чтобы убрать жёсткую границу, но не съесть строку. */
.sheet__actions::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: calc(var(--page-pad) * -1);
  right: calc(var(--page-pad) * -1);
  height: var(--spacing-16);
  background: linear-gradient(to top, var(--bg-primary), transparent);
  pointer-events: none;
}
.btn { flex: 0 0 auto; }

/* Список опций фильтра — gap 20, галочка справа */
.options { display: flex; flex-direction: column; gap: var(--spacing-20); }
.option { display: flex; align-items: center; gap: var(--spacing-16); width: 100%; text-align: left;
          font-size: var(--size-b2); line-height: var(--lh-b2); font-weight: var(--weight-medium); }
.option .icon { margin-left: auto; color: var(--icon-neutral-secondary); visibility: hidden; }
.option.is-selected .icon { visibility: visible; }


/* ==========================================================================
   PLANS
   Amount-area 250, pad 48/0, gap 12; прогресс 250×6 r2
   Cell 343×92 r12 pad 16 gap 16; Cells gap 8 (Figma 5179:45006)
   ========================================================================== */

.limit {
  display: flex; flex-direction: column; align-items: center; gap: var(--spacing-12);
  width: 250px; margin: 0 auto; padding: var(--spacing-48) 0;
  text-align: center;
}
.limit__bar { width: 250px; display: flex; flex-direction: column; gap: var(--spacing-12); }

.plans { display: flex; flex-direction: column; gap: var(--spacing-8); }
.plan {
  padding: var(--spacing-16);
  border-radius: var(--radius-lg);
  background: var(--surface-absolute-white);
  display: flex; flex-direction: column; gap: var(--spacing-6);
}
.plan__top { display: flex; align-items: center; gap: var(--spacing-16); min-height: 26px; }
.plan__name { flex: 1 1 auto; font-size: var(--size-b1); line-height: var(--lh-b1); font-weight: var(--weight-medium); }
.plan__amount { font-size: var(--size-b1); line-height: var(--lh-b1); font-weight: var(--weight-medium); }
.plan__bot { display: flex; align-items: center; gap: var(--spacing-8); min-height: 18px;
             font-size: var(--size-caption); line-height: var(--lh-caption); font-weight: var(--weight-medium);
             color: var(--text-neutral-secondary); }
.plan__bot .spacer { flex: 1 1 auto; }

/* Сегментированный прогресс — сегменты 6px r2, gap 4, максимум 6 штук */
.segments { display: flex; gap: var(--spacing-4); }
.segments > i { flex: 1 1 0; height: 6px; border-radius: var(--radius-xs); background: var(--surface-neutral-primary); }
.segments > i.is-paid { background: var(--surface-brand-primary); }


/* ==========================================================================
   MERCHANT PAGE
   Title-area gap 12; Sub gap 4; Photos gap 12; счётчик 52×26 r4 pad 4/8
   Services gap 12, Service gap 12, Price gap 4; Table gap 12, Row 24 gap 16
   ========================================================================== */

.mtitle { display: flex; flex-direction: column; gap: var(--spacing-12); }
.mtitle__sub { display: flex; flex-direction: column; gap: var(--spacing-4);
               font-size: var(--size-b2); line-height: var(--lh-b2); font-weight: var(--weight-medium); }
.mtitle__info { display: flex; align-items: center; gap: var(--spacing-4); color: var(--text-neutral-secondary); }
.rate { display: flex; align-items: center; gap: var(--spacing-4); }

/* Фото — во всю ширину экрана, без скруглений (жёсткое требование) */
.photos { position: relative; margin-inline: calc(var(--page-pad) * -1); }
.photos__track { scroll-snap-type: x mandatory; }
.photos__slide { flex: 0 0 100%; scroll-snap-align: center; }
.photos__slide img { width: 100%; height: 200px; object-fit: cover; border-radius: var(--radius-none); }
.photos__counter {
  position: absolute; right: calc(var(--page-pad) + var(--spacing-8)); bottom: var(--spacing-8);
  padding: var(--spacing-4) var(--spacing-8);
  border-radius: var(--radius-sm);
  background: var(--surface-absolute-white);
  font-size: var(--size-caption); line-height: var(--lh-caption); font-weight: var(--weight-medium);
}

.section { display: flex; flex-direction: column; gap: var(--spacing-24); }
.services { display: flex; flex-direction: column; gap: var(--spacing-12); }
.service { display: flex; align-items: flex-start; gap: var(--spacing-12); }
.service__name { flex: 1 1 auto; font-size: var(--size-b1); line-height: var(--lh-b1); font-weight: var(--weight-medium); }
.service__price { display: flex; flex-direction: column; align-items: flex-end; gap: var(--spacing-4); }
.service__price b { font-size: var(--size-b1); line-height: var(--lh-b1); font-weight: var(--weight-medium); }
.service__price span { font-size: var(--size-b2); line-height: var(--lh-b2); font-weight: var(--weight-medium); color: var(--text-neutral-secondary); }
.services--divided .service + .service { border-top: 1px solid var(--stroke-neutral-tertiary); padding-top: var(--spacing-12); }

.hours { display: flex; flex-direction: column; gap: var(--spacing-12); }
.hours__row { display: flex; align-items: center; gap: var(--spacing-16); min-height: 24px;
              font-size: var(--size-b2); line-height: var(--lh-b2); font-weight: var(--weight-medium); }
.hours__row span:first-child { flex: 1 1 auto; color: var(--text-neutral-secondary); }


/* ==========================================================================
   LIGHTBOX — чёрный фон; лента превью: активное 32×32, остальные 16×32,
   gap 2, r2; центр активного совпадает с центром экрана (Figma 5179:44189)
   ========================================================================== */

.lightbox { background: var(--surface-absolute-black); }
.lightbox__head { display: flex; justify-content: flex-end; padding: var(--spacing-16); }
.lightbox__head .icon { color: var(--icon-absolute-white); }
.lightbox__stage { flex: 1 1 auto; display: flex; align-items: center; }
.lightbox__track { width: 100%; scroll-snap-type: x mandatory; }
.lightbox__slide { flex: 0 0 100%; scroll-snap-align: center; }
.lightbox__slide img { width: 100%; height: auto; }

.previews {
  gap: 2px;
  padding-bottom: var(--spacing-32);
  /* Активное превью встаёт в центр экрана: слева половина экрана минус
     половина активного (187.5 - 16 = 171.5), справа — вся ширина, чтобы
     последний элемент тоже мог дойти до центра. */
  padding-left: 171px;
  padding-right: 343px;
  scroll-snap-type: x proximity;
}
.preview {
  flex: 0 0 auto;
  width: 16px; height: 32px;
  border-radius: var(--radius-xs);
  overflow: hidden;
  scroll-snap-align: center;
  transition: width .18s ease;
}
.preview img { width: 100%; height: 100%; object-fit: cover; }
.preview.is-active { width: 32px; }


/* ==========================================================================
   INFO TILES + STEPS (шторки от кнопок мерчанта)
   ========================================================================== */

.tiles { display: flex; gap: var(--spacing-8); }
.tile {
  flex: 1 1 0;
  display: flex; flex-direction: column; gap: var(--spacing-12);
  padding: var(--spacing-16);
  border-radius: var(--radius-md);
  background: var(--surface-neutral-secondary);
  font-size: var(--size-b2); line-height: var(--lh-b2); font-weight: var(--weight-medium);
}
.tile .icon { color: var(--icon-neutral-primary); }

.steps { display: flex; flex-direction: column; }
.step { display: flex; gap: var(--spacing-16); padding: var(--spacing-16) 0; }
.step + .step { border-top: 1px solid var(--stroke-neutral-tertiary); }
.step__mark {
  flex: 0 0 auto; width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: var(--radius-full);
  background: var(--surface-neutral-secondary);
  font-size: var(--size-b2); line-height: 1; font-weight: var(--weight-medium);
  color: var(--text-neutral-secondary);
}
.step--done .step__mark { background: transparent; color: var(--icon-neutral-primary); }
.step__body { display: flex; flex-direction: column; gap: var(--spacing-4); }
.step__title { font-size: var(--size-b1); line-height: var(--lh-b1); font-weight: var(--weight-medium); }
.step__sub { font-size: var(--size-b2); line-height: var(--lh-b2); font-weight: var(--weight-medium); color: var(--text-neutral-secondary); }

/* Карточка «прочитай на ресепшене» */
.readout {
  display: flex; flex-direction: column; gap: var(--spacing-16);
  padding: var(--spacing-24);
  border-radius: var(--radius-lg);
  background: var(--surface-neutral-secondary);
  text-align: center;
}
.readout hr { width: 100%; height: 1px; border: 0; background: var(--stroke-neutral-tertiary); margin: 0; }
/* Сумма и подпись под ней идут плотнее остального содержимого */
.readout__amount { display: flex; flex-direction: column; gap: var(--spacing-4); }


/* ==========================================================================
   SCANNER — окно 245×245 r8 (Figma Rectangle 7), затемнение 50% на весь
   экран с вырезом, уголки белые, фонарик в круге 64
   ========================================================================== */

.scanner { background: #000; }
.scanner__cam { position: absolute; inset: 0; }
.scanner__cam img { width: 100%; height: 100%; object-fit: cover; }

.scanner__ui { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; }

/* Вырез: сам элемент прозрачен, затемнение даётся тенью наружу */
.scanner__window {
  position: absolute; top: 50%; left: 50%;
  width: 245px; height: 245px;
  transform: translate(-50%, -50%);
  border-radius: var(--radius-md);
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .5);
}
.scanner__window::before,
.scanner__window::after,
.scanner__corner::before,
.scanner__corner::after {
  content: ''; position: absolute; width: 44px; height: 44px;
  border: 4px solid var(--text-absolute-white); border-radius: var(--radius-md);
}
.scanner__window::before { top: -2px; left: -2px; border-right: 0; border-bottom: 0; }
.scanner__window::after  { top: -2px; right: -2px; border-left: 0; border-bottom: 0; }
.scanner__corner::before { bottom: -2px; left: -2px; border-right: 0; border-top: 0; }
.scanner__corner::after  { bottom: -2px; right: -2px; border-left: 0; border-top: 0; }
.scanner__corner { position: absolute; inset: 0; }

.scanner__spinner {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 64px; height: 64px; display: grid; place-items: center;
  border-radius: var(--radius-full); background: rgba(255, 255, 255, .35);
  color: var(--icon-neutral-primary);
}
.scanner__text {
  position: absolute; top: 100px; left: 0; right: 0;
  padding: 0 var(--spacing-32);
  display: flex; flex-direction: column; align-items: center; gap: var(--spacing-16);
  text-align: center; color: var(--text-absolute-white);
}
.scanner__title { text-transform: uppercase; }


/* ==========================================================================
   HOME · ВЕРСИЯ B
   Числа сняты с Figma 5211:49219. Всё, что здесь, относится только к v2.
   ========================================================================== */

/* --- Шапка: видео поверх градиента ---
   Подложка 375×543, снята пиксельно с Figma 5211:49398: ровный кремовый до
   54.5% высоты, дальше растяжка в серый фон страницы.

   ВАЖНО про цвет. В Figma на Home стоит другое видео (colorFlow-3), у него низ
   жёлтый #f8ff6c, и под него сделана жёлтая подложка. Присланное видео
   (animation-4) заканчивается кремовым #d2c394 — под него подходит кремовый
   вариант #e5d19b. Спутать варианты легко, стык сразу становится виден. */
.hero-v2 {
  position: relative;
  z-index: 0;
  height: 543px;
  background: linear-gradient(180deg, #e5d19b 0%, #e5d19b 54.5%, #f3f5f7 100%);
}
.hero-v2__video {
  position: absolute; top: 0; left: 0;
  width: 100%;
  aspect-ratio: 375 / 281;
  object-fit: cover;
  display: block;
}
/* Растушёвка на нижних 48px видео. Низ видео и подложка расходятся на 23
   пункта по цвету — на глаз это заметная полоса. Плавный переход убирает её
   и остаётся правильным, даже если видео заменят на другую версию. */
.hero-v2::after {
  content: '';
  position: absolute; left: 0; right: 0;
  top: calc(281px - 48px); height: 48px;
  background: linear-gradient(to bottom, rgba(229, 209, 155, 0), #e5d19b);
  pointer-events: none;
}

/* Контент идёт поверх шапки и подтягивается так, чтобы виджеты встали на
   отметку 59 + 24, как в макете. Без z-index шапка перекрывала бы содержимое:
   она позиционирована, а блоки контента — нет. */
.hero-v2 + .page--home {
  position: relative;
  z-index: 1;
  margin-top: -484px;   /* 543 высота шапки − 59 зона камеры */
}
.hero-v2 ~ .card-v2 { position: relative; z-index: 1; }

/* --- Категории v2 ---
   Ряд 375×90, поля по 8, элемент 90×90, четыре в ряд ровно по ширине экрана.
   Прокрутки нет. Круг 64 с Surface/Neutral/Primary, иллюстрация вылезает
   за него, поэтому обрезка снята на всех уровнях. */
/* Блок гасит боковые поля страницы и занимает всю ширину экрана: поля здесь
   свои, по 8 у ряда. С полями страницы четыре элемента по 90 не помещались
   и уезжали вправо. */
.cats-v2 {
  display: flex; flex-direction: column;
  gap: var(--spacing-24);
  padding-top: var(--spacing-16);
  margin-inline: calc(var(--page-pad) * -1);
}
.cats-v2__row { display: flex; padding: 0 var(--spacing-8); overflow: visible; }

/* Четыре равные колонки на всю ширину ряда. Жёсткую ширину не задаём: любой
   расчёт с полями ряда легко ошибиться дважды и получить перекос. */
.cat-v2 {
  flex: 1 1 0;
  min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: var(--spacing-8);
  overflow: visible;
}
.cat-v2__circle {
  position: relative;
  width: 64px; height: 64px;
  border-radius: var(--radius-full);
  background: var(--surface-neutral-primary);
  overflow: visible;          /* иллюстрация не обрезается кругом */
}
/* Иллюстрация 64×59 со смещением −5/−4 — так она выходит за круг слева и сверху */
.cat-v2__circle svg {
  position: absolute; left: -5px; top: -4px;
  width: 64px; height: 59px;
  color: var(--icon-neutral-primary);
}
/* Подпись шире элемента (98 против 90) и намеренно вылезает за его границы */
.cat-v2__label {
  width: 98px; text-align: center;
  font-size: var(--size-caption); line-height: var(--lh-caption);
  font-weight: var(--weight-medium);
  color: var(--text-neutral-primary);
  white-space: nowrap;
}

/* --- Белая карточка со списком ---
   359×r24 при отступе 8 от краёв экрана. Горизонтальных паддингов нет:
   их держат дети по 16, чтобы Featured мог выйти за карточку. */
/* Отступ сверху 32. В макете стоит 48, но вживую оказалось много —
   уменьшено по решению от 21.08.2026. */
.card-v2 {
  margin: var(--spacing-32) var(--spacing-8) 0;
  padding: var(--spacing-24) 0;
  border-radius: var(--radius-3xl);
  background: var(--surface-absolute-white);
  display: flex; flex-direction: column; gap: var(--spacing-24);
  overflow: visible;
}
.card-v2__pad { padding: 0 var(--page-pad); }

/* --- Featured внутри карточки ---
   Фигура 433×311 при x −13 от карточки: в координатах экрана это от −5 до 428,
   то есть она выходит за карточку и за края экрана. Обрезает её только
   рамка телефона. */
.featured-v2 {
  position: relative;
  width: 433px;
  margin-left: -13px;
  aspect-ratio: 433 / 311;
  background-image: url('assets/bg-jagged-v2.webp');
  background-size: cover;
  background-position: center;
  clip-path: polygon(
    0% 20.257%,      21.824% 0%,      18.014% 13.183%,
    53.695% 0%,      45.727% 13.183%, 81.755% 0%,
    72.402% 13.183%, 100% 3.698%,     100% 93.408%,
    55.658% 100%,    62.587% 87.460%, 28.291% 100%,
    35.219% 87.460%, 0% 100%
  );
}
/* Контент отступает на 29 от фигуры — это ровно 16 от края карточки, то есть
   он встаёт в один ряд с остальным содержимым списка.

   Отступ задан не контейнеру, а каждому ребёнку: лента должна занимать всю
   ширину фигуры, иначе карточки мерчантов обрезались бы по границе контента,
   а не по краю экрана. */
.featured-v2__inner {
  position: absolute; inset: 40px 0 0 0;
  display: flex; flex-direction: column; gap: var(--spacing-24);
}
.featured-v2__inner > h2 { padding-left: 29px; }
.featured-v2__list { gap: 0; padding-left: 29px; padding-right: 29px; }
.featured-v2__item {
  flex: 0 0 auto; width: 98px;
  display: flex; flex-direction: column; align-items: center; gap: var(--spacing-8);
}
.featured-v2__avatar {
  width: 64px; height: 64px;
  border-radius: var(--radius-full);
  background: var(--surface-absolute-white);
}
.featured-v2__name {
  font-size: var(--size-caption); line-height: var(--lh-caption);
  font-weight: var(--weight-medium); text-align: center;
}


/* ==========================================================================
   UTILITIES
   ========================================================================== */

.u-center { text-align: center; }
.u-white { color: var(--text-absolute-white); }
.bg-secondary { background: var(--bg-secondary); }

/* ==========================================================================
   ЛАЙМОВАЯ ШАПКА
   Градиент лежит ВНУТРИ прокручиваемого блока и уезжает вверх вместе с
   контентом. Закреплённым слоем он быть не должен: при скролле лайм оставался
   на месте, и на нём оказывались секции, которым он не принадлежит.

   Полоса с камерой — без заливки. Она показывает то, что под ней.
   ========================================================================== */

.screen--lime { background: var(--bg-secondary); }

/* padding-top, а не margin: фон блока должен доходить до самого верха экрана
   и быть виден под парящей камерой */
.lime-block {
  padding-top: var(--notch-h);
  background: linear-gradient(180deg, #c5dd3e 0%, #c5dd3e 18%, #d7e777 55%, var(--bg-secondary) 100%);
}

/* Plans: растяжка заканчивается выше. Блок здесь низкий, и при общей
   раскладке прогресс-бар попадал на бледно-лаймовый участок — лаймовая
   заливка бара сливалась с фоном. Теперь к бару фон уже почти серый. */
.lime-block--tight {
  background: linear-gradient(180deg, #c5dd3e 0%, #c5dd3e 14%, #dcea9c 38%, var(--bg-secondary) 62%);
}

/* Экраны без лаймовой шапки: освобождаем место под камеру у первого
   элемента в потоке */
.topbar { margin-top: var(--notch-h); }
.lightbox__head { margin-top: var(--notch-h); }