/* ============================================================
   ДИЗАЙН-СИСТЕМА «ANIMAL» — тёмная тема боевого мини-аппа.
   Токены перенесены из Figma (nGeSDwpByr2K6CwIlFQyRk) / webapp/animal.html.
   Эмодзи в UI запрещены — только SVG-иконки (спрайт в index.html).
   ============================================================ */
:root {
  /* — палитра Animal — */
  --black:#111110;        /* фон приложения            */
  --black-1:#161615;      /* подложка фото в карточке  */
  --black-2:#242423;      /* блок описания, неактив. таб/чип, карточки */
  --grey:#41413f;         /* вторичная кнопка          */
  --grey-1:#5d5d5a;       /* рамка плашки управления   */
  --grey-2:#777773;       /* приглушённый текст/иконки */
  --white:#ffffff;        /* бренд                     */
  --white-1:#ddddd5;      /* основной текст на тёмном   */
  --white-3:#bcbcbc;      /* третичный (тип товара)    */
  --light-grey:#8d9399;
  --orange:#e8741b;       /* акцент                    */
  --orange-1:#ff8f3a;     /* pushed                    */
  --orange-2:#ffdcc1;     /* сабтайтл на оранж. кнопке */

  /* — радиусы — */
  --r-card:16px;
  --r-pill:32px;
  --r-input:24px;

  /* — шрифт (SF Pro = системный на iOS/Telegram) — */
  --f: -apple-system, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI", Roboto, sans-serif;
  --f-display: var(--f);
  --f-body: var(--f);
  --f-mono: var(--f);

  --dock-h:150px;         /* высота нижнего дока (чат+меню) */

  /* — алиасы под существующие правила компонентов (тёмная карта) — */
  --paper: var(--black);
  --paper-deep: var(--black);
  --surface: var(--black-2);
  --ink: var(--white-1);
  --ink-deep: var(--black);
  --ink-soft: var(--grey-2);
  --thread: var(--orange);
  --thread-deep: var(--orange-1);
  --chalk: var(--grey-2);
  --hairline: rgba(221,221,213,.10);

  --accent: var(--orange);
  --bg: var(--black);
  --text: var(--white-1);
  --hint: var(--grey-2);
  --card: var(--black-2);
  --btn-text: #fff;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

html, body { margin: 0; height: 100%; }
/* Скроллер приложения: экраны/лента прокручиваются ЗДЕСЬ, а не в окне. Так инерция скролла
   изолирована в контейнере и НЕ «съедает» тапы по фиксированному доку — iOS/WKWebView во время
   инерции отдаёт тап нативному скроллеру, минуя JS (проверено диагностикой). #dock/#pdpSheet — снаружи. */
#appScroll {
  position: fixed; inset: 0; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-top: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px));
}
body {
  font-family: var(--f);
  background: var(--black);
  color: var(--white-1);
  letter-spacing: -.01em;
  padding-top: 0;                 /* safe-area переехал на #appScroll (скроллер) */
  padding-bottom: 0;
  overflow: hidden;               /* окно НЕ скроллится — скроллит #appScroll (изолирует инерцию от дока) */
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--orange); color: #fff; }
button { font-family: inherit; color: inherit; border: none; background: none; cursor: pointer; }
img { display: block; }

/* единый каркас по центру (как .app в Animal) */
.screen, .dock, .sheet { max-width: 440px; margin-left: auto; margin-right: auto; }

/* Экраны (мультиэкранный поток) */
.screen { display: none; }
.screen.active { display: block; }
/* плавное переключение разделов теперь запускает JS через Web Animations API (см. paint()) —
   надёжнее CSS-анимации на display:none→block в Telegram WebView */
/* на табах с доком — запас снизу под плавающую плашку */
body.has-dock .screen.active main { padding-bottom: calc(var(--dock-h) + 16px); }

/* ── общая типографика заголовков (бывш. Oranienbaum → SF Pro bold) ── */
.topbar__title, .hero__brand, .section-title, .result-head__title,
.quiz__q, .soon__title, .pdp__title, .cta__title, .chat__title,
.prof__name, .group-title, .scenario__name {
  font-family: var(--f); font-weight: 700; letter-spacing: -.01em;
}

/* ===================== ОБОЛОЧКА: ЛЕНТА ===================== */
/* шапка ленты */
.feed-head { padding: 64px 16px 16px; }
.feed-head__hi { font-size: 32px; font-weight: 700; line-height: 1.05; color: #fff; margin: 0; }
.feed-head__sub { font-size: 16px; line-height: 20px; color: var(--white-1); margin: 8px 0 0; }

/* ── НИЖНИЙ ДОК (плавающий): scrim + плашка (чат-инпут + меню) ── */
/* Подложка-блюр под доком (Figma 133:4121): активный чат / настройка фильтров → фон ленты
   затемняется и размывается на 4px, док (z-index 40) остаётся резким поверх (scrim z-index 39).
   Тап по подложке закрывает открытый режим (интенты/фильтры). */
.dock-scrim { position: fixed; inset: 0; z-index: 39; background: rgba(17,17,16,.24);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s; }
.dock-scrim.on { opacity: 1; visibility: visible; transition: opacity .25s ease; }
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: 40px 12px max(12px, env(safe-area-inset-bottom));
  /* как в Figma (node 1:113): ровный двухстоповый градиент снизу-чёрный → сверху-прозрачный,
     без плотной чёрной «полки» внизу и резкого перегиба (раньше было 34%/66%) */
  background: linear-gradient(to top, var(--black) 0%, rgba(17,17,16,0) 100%);
  pointer-events: none; transition: transform .3s ease, opacity .3s ease; }
.dock > * { pointer-events: auto; }
.dock-panel { background: var(--black-2); border: 1px solid var(--grey-1); border-radius: 36px;
  padding: 8px 0; overflow: hidden;
  /* контент прижат к низу: при анимации высоты клип идёт СВЕРХУ (чат-инпут/интенты «доезжают»),
     а меню (nav, нижний ребёнок) остаётся на месте и не обрезается — иначе при входе/выходе с
     Ленты меню дёргалось/гасло, пока овал пытался переехать. */
  display: flex; flex-direction: column; justify-content: flex-end; }
/* плавная смена высоты дока: чат-инпут на вкладке, слой интентов, шиммер (FLIP по height из JS). */
.dock-panel.dock-panel--anim { transition: height .3s cubic-bezier(.22,.61,.36,1); }
/* СКРЫТИЕ дока: уезжает вниз + гаснет (скролл вниз, старт welcome). ПОЯВЛЕНИЕ: выезжает снизу +
   проявляется (скролл вверх / закрытие welcome). Движение + фейд за .3с (transition на .dock). */
.dock.dock--hidden { transform: translateY(115%); opacity: 0; pointer-events: none; }

.chatrow { display: flex; align-items: flex-end; gap: 12px; padding: 8px 16px 6px; }

/* ── ЧАТ-ИНПУТ (Figma 1:214) ── */
.chat-input { flex: 1 0 0; min-height: 54px; display: flex; align-items: center;
  padding: 17px 16px; border-radius: var(--r-input); background: var(--black); overflow: hidden; }
.chat-input textarea { flex: 1; background: none; border: none; outline: none; resize: none; display: block;
  color: var(--white-1); caret-color: var(--white-1); font-family: inherit; font-size: 16px; line-height: 20px;
  padding: 0; max-height: 102px; overflow-y: auto; scrollbar-width: none; }
.chat-input textarea::-webkit-scrollbar { display: none; }
.chat-input textarea::placeholder { color: var(--grey-2); }
.ci-loading { color: var(--grey-2); font-size: 16px; line-height: 20px; white-space: nowrap; }
.chat-input.shimmer { background: linear-gradient(90deg, var(--black) 0%, var(--black-2) 48%, var(--black) 100%);
  background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }

/* круглый FAB справа: фильтры (≡) / отправка (↑, оранж) / отмена (✕) */
/* обёртка нужна для позиционирования бейджа-счётчика поверх кнопки (innerHTML кнопки перезаписывается) */
.dock-fab-wrap { position: relative; flex: 0 0 54px; align-self: flex-end; }
/* счётчик применённых фильтров (Figma 122:1420): оранжевый пилюль в правом верхнем углу ≡ */
.dock-fab__badge { position: absolute; top: 0; right: 0; min-width: 22px; height: 20px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; padding: 2px 4px; border-radius: 16px;
  background: var(--orange); color: #fff; font-size: 13px; line-height: 16px; font-weight: 400;
  pointer-events: none; }
.dock-fab { width: 54px; height: 54px; flex: 0 0 54px; border-radius: 50%; display: grid; place-items: center;
  background: var(--black); transition: background .15s, transform .12s; }
.dock-fab:active { transform: scale(.94); }
.dock-fab svg { width: 24px; height: 24px; color: var(--white-1); }
.dock-fab.send { background: var(--orange); }
.dock-fab.send:active { background: var(--orange-1); }
.dock-fab.send svg { color: #fff; }

/* set-флоу: ряд дока = [← назад к списку] + 2-табный нав. Балансировка как у .pdp__actions:
   внешний отступ 16px у ряда, внутренний нав без горизонтального паддинга (иначе двойной отступ). */
.setnav-wrap { display: flex; align-items: center; gap: 8px; padding: 8px 16px; }
.setnav-wrap .setnav__nav { flex: 1; padding: 8px 0; }
.setnav__back { flex: 0 0 54px; width: 54px; height: 54px; border-radius: var(--r-pill); background: var(--black);
  display: grid; place-items: center; transition: transform .12s; }
.setnav__back:active { transform: scale(.94); }
.setnav__back .ico { width: 24px; height: 24px; color: var(--white-1); }

/* ── НИЖНЕЕ МЕНЮ (4 таба) ── */
.nav { display: flex; padding: 8px 16px; position: relative; }
/* активный «овал» — одна общая плашка, плавно переезжает между табами */
.nav__pill { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 1;
  border-radius: var(--r-pill); background: var(--black); pointer-events: none;
  transition: transform .3s cubic-bezier(.22,.61,.36,1), width .3s cubic-bezier(.22,.61,.36,1); }
.nav__pill--noanim { transition: none; }
.nav__btn { flex: 1 0 0; height: 54px; min-width: 0; border-radius: var(--r-pill); border: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding-top: 2px;
  background: transparent; cursor: pointer; }
/* фон неактивного таба — отдельным слоем ПОД переезжающим овалом (z-index 0 < 1) */
.nav__btn::before { content: ""; position: absolute; inset: 0; z-index: 0;
  border-radius: var(--r-pill); background: var(--black-2); }
/* иконка и подпись — НАД овалом (z-index 2 > 1), чтобы не перекрывались */
.nav__btn svg { position: relative; z-index: 2; width: 24px; height: 24px; color: var(--grey-2); transition: color .3s; }
.nav__lbl { position: relative; z-index: 2; font-size: 12px; line-height: 14px; color: var(--grey-2); transition: color .3s; }
.nav__btn.on svg { color: var(--orange); }
.nav__btn.on .nav__lbl { color: var(--orange); }
.nav__btn { position: relative; }

/* «Поделиться» избранным: ряд-кнопка над навом (только на «Любимое» с вещами, Figma 209:7245). */
.dockshare { padding: 8px 16px; }
.dockshare__btn { display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 54px; border: none; border-radius: var(--r-pill); background: var(--black);
  color: var(--white-1); font-family: inherit; font-size: 16px; font-weight: 510; line-height: 20px;
  cursor: pointer; transition: transform .12s, opacity .15s; }
.dockshare__btn:active { transform: scale(.98); }
.dockshare__btn:disabled { opacity: .5; }
.dockshare__btn svg { width: 24px; height: 24px; color: var(--white-1); }

/* Залипшее состояние кнопки после копии ссылки (Figma 209:8024): серая заливка + приглушённый текст. */
.dockshare__btn--copied { background: var(--grey); color: var(--grey-2); }
.dockshare__btn--copied svg { color: var(--grey-2); }

/* интент-подсказки в раскрытой плашке (чёрные пиллы над инпутом) */
/* ФИКСИРОВАННАЯ высота (не скролл!): когда AI-чипы «дотекают», панель НЕ меняет высоту → инпут
   не сдвигается → каретка textarea не слетает (баг iOS/Android при reflow фикс-дока под кареткой).
   overflow:hidden — это не скролл-контейнер (тот ронял каретку отдельно), просто клип редкого 4-го ряда. */
.intents { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 7px; padding: 6px 16px 4px;
  height: 126px; overflow: hidden; }
.sugg { height: 34px; display: inline-flex; align-items: center; padding: 0 13px; border-radius: var(--r-input);
  background: var(--black); color: var(--white-1); font-size: 14px; line-height: 18px; white-space: nowrap;
  border: none; cursor: pointer; }
.sugg:active { background: var(--grey); }
/* Все интент-чипы — одинаковые пилюли: без стрелок, без кнопки «назад», без цветового выделения. */

/* базовая иконка (точные пути из Figma, fill=currentColor) */
.ico, .ico-heart { display: block; width: 24px; height: 24px; color: inherit; }
.ico--flip { transform: rotate(180deg); }
.ico--up { transform: rotate(90deg); }

/* ── ВЕРХНЯЯ ПАНЕЛЬ вторичных экранов ── */
.topbar { padding: 56px 16px 6px; display: flex; align-items: center; gap: 12px; }
.topbar__title { font-size: 22px; font-weight: 700; }
.ico-star { display: none; }   /* звезда-лого FA в Animal не используется */

/* ── КНОПКИ (Animal Button) ── */
.btn { min-height: 54px; border: none; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 28px; font-family: var(--f); font-size: 16px; font-weight: 510; line-height: 20px;
  cursor: pointer; color: #fff; background: var(--orange);
  transition: background .15s ease, transform .12s ease; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; }
.btn--primary { background: var(--orange); color: #fff; }
.btn--primary:active { background: var(--orange-1); }
.btn--ghost { background: var(--black-2); border: none; color: var(--white-1); }
.btn--ghost:active { background: var(--grey); }
.btn--wide { display: block; width: calc(100% - 32px); margin: 16px 16px 0; }
.soon .btn { display: block; width: 100%; margin-top: 12px; }

/* ── СЕКЦИЯ ── */
.section-title { margin: 8px 16px 2px; font-size: 20px; font-weight: 700; }
.section-sub { margin: 0 16px 16px; font-size: 14px; color: var(--grey-2); }

/* подборка от стилиста: без топбара (как основная лента) — отступ сверху под статус-бар + лид-подпись */
.set-main { padding-top: 56px; }
/* название подборки крупно — как «Привет» в основном аппе (имя или дата создания) */
.set-title { margin: 0 16px 20px; font-size: 26px; font-weight: 700; line-height: 1.15; color: #fff; }
.set-cta { margin: 24px 16px 0; }
/* главное фото подборки — крупный герой во всю ширину (как основное фото на PDP), снизу скруглён */
.set-cover { margin: 0 0 18px; aspect-ratio: 3 / 4; background: var(--black-1); overflow: hidden;
  border-bottom-left-radius: 24px; border-bottom-right-radius: 24px; }
.set-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* список подборок стилиста (нав-таб «Подборки»): крупные карточки обложка + название + кол-во */
.setlist { display: flex; flex-direction: column; gap: 10px; padding: 0 16px; }
.setlist__card { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: var(--r-card);
  background: var(--black-2); cursor: pointer; transition: transform .12s; }
.setlist__card:active { transform: scale(.985); }
.setlist__cover { flex: 0 0 64px; width: 64px; height: 84px; border-radius: 12px; overflow: hidden;
  background: var(--black-1); display: grid; place-items: center; }
.setlist__cover img { width: 100%; height: 100%; object-fit: cover; }
.setlist__cover img.ph-star { width: 40%; height: auto; object-fit: contain; opacity: .5; }
.setlist__b { flex: 1; min-width: 0; }
.setlist__name { font-size: 17px; font-weight: 700; color: #fff; }
.setlist__meta { margin-top: 4px; font-size: 13px; color: var(--grey-2); }
.setlist__chev { flex: 0 0 auto; color: var(--grey-2); transform: rotate(180deg); }
.setlist__chev svg { width: 18px; height: 18px; }

/* карточка В РЕЖИМЕ ПОДБОРКИ (.card--set): без PDP-шита/сердечка/кнопки. Тап → товар выделяется
   рамкой как у дока, размеры выбираются В ДОКЕ. Касается ТОЛЬКО подборок — лента (.card) не трогается. */
.setcard__body { background: var(--black-2); padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; }
.setcard__price { font-size: 16px; font-weight: 510; line-height: 20px; color: var(--orange); }
.setcard__brand { font-size: 16px; line-height: 20px; color: var(--white); }
.setcard__title { font-size: 16px; line-height: 20px; color: var(--white-3); font-weight: 400;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* выделение выбранного товара — тонкая оранжевая рамка поверх скруглений */
.card--selected { box-shadow: 0 0 0 2px var(--orange); }
/* док-режим товара в подборке наследует стили PDP (.dockpdp/.pdp__*); крестик слева,
   кнопка «Купить в магазине» — оранжевая (.pdp__add). Голова — цена + тип + бренд (как блок инфо
   на PDP), ниже — блок магазина (.pdp__store). */
.setpdp__head { padding: 14px 16px 2px; }

/* ── СЕТКА ленты: 2 колонки, gap 2px ── */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 0 2px; }
/* плавная замена ленты при применении фильтра: грид гаснет → меняется контент → проявляется */
#roughGrid { transition: opacity .22s ease; }
#roughGrid.grid--swapping { opacity: 0; }

/* ── КАРТОЧКА товара (Animal) ── */
.card { background: var(--black-1); border: none; border-radius: var(--r-card); overflow: hidden;
  display: flex; flex-direction: column; cursor: pointer; }
.card:active { opacity: .92; }
.card__img { position: relative; aspect-ratio: 197/267; display: flex; align-items: center; justify-content: center;
  background: var(--black-1); overflow: hidden; }
.card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card__img.noimg::after { content: ""; position: absolute; inset: 0;
  background: url(star.png) center / 40% no-repeat; opacity: .25; }
/* фото-карусель внутри карточки: viewport + transform-трек (свайп на touch, см. initGallerySwipe).
   Нативный scroll-snap в iOS Telegram не свайпался — жест перехватывал WebView; делаем сами. */
/* карусель-оверлей поверх первичного фото (.card__photo остаётся под ней → нет мерцания при возврате) */
.card__gallery { position: absolute; inset: 0; overflow: hidden; z-index: 1; }
.card__track { display: flex; width: 100%; height: 100%; will-change: transform;
  transition: transform .28s cubic-bezier(.2,.8,.2,1); }
.card__gslide { flex: 0 0 100%; height: 100%; }
.card__gslide img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* точки-индикаторы в ленте убраны — листаем без них (карусель бесконечная) */
/* сердечко-избранное на фото */
.card__fav { position: absolute; top: 16px; right: 16px; width: 26px; height: 26px;
  display: grid; place-items: center; border: none; background: none; cursor: pointer; z-index: 2; }
/* сердечко как в макете (node 1:308): глиф 22px в 26px-боксе (top/right 16), чёрный контур,
   при избранном — чёрная заливка (не оранж). fill переключаем классом .on (а не подменой symbol
   через <use href>) → без мерцания при клике. Без свечения (в макете его нет; толстый контур
   при 26px читался как «двойное сердце»). Заливку наследует path внутри #i-heart (снят атрибут fill). */
.card__fav .ico-heart { width: 22px; height: 22px; color: var(--black); fill: none; }
.card__fav.on .ico-heart { fill: currentColor; }
/* бейдж акцента ДНК убран — на карточках ленты не показываем */
.card__season { position: absolute; top: 14px; left: 14px;
  font-size: 11px; padding: 3px 8px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; }
.card__emoji { display: none; }
.card__body { background: var(--black-2); padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; }
/* «В магазин» — инлайновая кнопка на карточке избранного (только в приложении, Figma 209:7245). */
.card__store { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; margin-top: 10px; height: 40px; padding: 0 8px 0 16px; border: none;
  border-radius: var(--r-pill); background: var(--black); color: var(--white-1); font-family: inherit;
  font-size: 16px; font-weight: 510; line-height: 20px; cursor: pointer; transition: background .15s; }
.card__store:active { background: #0c0c0b; }
.card__store svg { width: 24px; height: 24px; color: var(--white-1); flex: 0 0 auto; }
.card__title { font-size: 16px; line-height: 20px; color: var(--white-3); font-weight: 400;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 0; order: 3; }
.card__brand { font-size: 16px; line-height: 20px; color: var(--white); order: 2; }
.card__price { font-size: 16px; font-weight: 510; line-height: 20px; color: var(--orange); order: 1; }
.card__oldprice { color: var(--grey-2); text-decoration: line-through; font-weight: 400; font-size: 13px; }
.card__btn { display: none; }

.note { margin: 22px 16px 0; font-size: 12px; line-height: 1.5; color: var(--grey-2); text-align: center; }

/* индикатор дозагрузки бесконечной ленты */
.feed-more { display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 18px 16px 8px; color: var(--grey-2); font-size: 14px; }
.feed-spin { width: 18px; height: 18px; border-radius: 50%; flex: 0 0 18px;
  border: 2px solid var(--grey); border-top-color: var(--orange); animation: feedSpin .8s linear infinite; }
@keyframes feedSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .feed-spin { animation-duration: 1.6s; } }

/* бар активного сценарного режима убран — режим виден по чипу в шите фильтров (≡) */

/* пустое состояние (нет вещей / избранное пусто) */
.empty { margin: 60px 24px; text-align: center; color: var(--grey-2); }
.empty__title { font-size: 18px; font-weight: 700; color: var(--white-1); margin-bottom: 8px; }
.empty__text { font-size: 14px; line-height: 1.5; }

/* ── мост к сценариям / CTA-карточка (тёмная) ── */
.cta { margin: 24px 16px 0; padding: 20px; border-radius: var(--r-card);
  background: var(--black-2); border: none; text-align: center; }
.cta__title { font-size: 17px; font-weight: 700; color: #fff; }
.cta__sub { margin: 8px 0 16px; font-size: 14px; line-height: 1.45; color: var(--grey-2); }
.cta .btn { display: block; width: 100%; margin: 16px 0 0; }

/* ── хаб/карточки сценариев и «углубить» ── */
.scenarios { padding: 6px 16px 0; display: flex; flex-direction: column; gap: 12px; }
.scenario { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; border: none;
  cursor: pointer; background: var(--black-2); border-radius: var(--r-card); padding: 16px; color: var(--white-1); }
.scenario:active { background: var(--grey); }
.scenario__emoji { font-size: 26px; line-height: 1; }
.scenario__text { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.scenario__name { font-size: 16px; font-weight: 700; color: #fff; }
.scenario__desc { font-size: 13px; line-height: 1.4; color: var(--grey-2); }
.scenario__arrow { font-size: 20px; color: var(--grey-2); }

.intro { margin: 8px 16px 0; padding: 16px 18px; border-radius: var(--r-card); background: var(--black-2); border: none; }
.intro p { margin: 0 0 8px; font-size: 14px; line-height: 1.5; }
.intro p:last-child { margin-bottom: 0; color: var(--grey-2); }

/* ── форма сценария: поля + чипы ── */
.field { margin: 18px 16px 0; }
.field__label { font-size: 13px; font-weight: 600; color: var(--grey-2); margin-bottom: 10px; }
.field__hint { font-weight: 400; opacity: .8; }
.field__note { margin: 10px 16px 0; font-size: 13px; color: var(--grey-2); }
#budgetSlider { margin-top: 14px; }
#budgetRange { width: 100%; accent-color: var(--orange); }
.range-val { margin-top: 8px; font-size: 14px; color: var(--white-1); }
.range-val b { font-size: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: none; background: var(--black-2); color: var(--white-1); border-radius: var(--r-pill);
  padding: 10px 16px; font-size: 14px; cursor: pointer; }
.chip--on { background: var(--orange); color: #fff; }

/* результат капсулы */
.result-head { padding: 4px 16px 0; }
.result-head__title { font-size: 21px; font-weight: 700; }
.result-head__note { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--grey-2); }
.group-title { margin: 22px 16px 10px; font-size: 15px; letter-spacing: .02em; }

.deepen { margin: 20px 16px 0; display: flex; flex-direction: column; gap: 10px; }
.deepen__title { margin: 4px 4px; font-size: 15px; font-weight: 700; color: #fff; }
.capsule-deepen { margin: 24px 16px 0; display: flex; flex-direction: column; gap: 10px; }

/* комментарий стилиста */
/* комментарий стилиста — НЕ отдельный блок: продолжаем тем же шрифтом, что и подзаголовок ленты
   (.feed-head__sub), без плашки/рамки/заголовка. Лёгкий отрицательный отступ — чтобы читалось
   как продолжение текста шапки, а не как карточка. */
.stylist-note { display: block; margin: -8px 16px 16px; padding: 0; background: none; border: none; }
.stylist-note__ava { display: none; }
.stylist-note__text { font-size: 16px; line-height: 20px; color: var(--white-1); }

/* чат-уточнение капсулы (на экране капсулы) */
.chat { margin: 22px 16px 0; padding: 16px; border-radius: var(--r-card); background: var(--black-2); border: none; }
.chat__title { font-size: 15px; font-weight: 700; }
.chat__sub { font-size: 13px; color: var(--grey-2); margin: 4px 0 10px; line-height: 1.4; }
.chat__log { display: flex; flex-direction: column; gap: 8px; max-height: 240px; overflow-y: auto; }
.chat__log:empty { display: none; }
.bubble { max-width: 85%; padding: 9px 13px; border-radius: 16px; font-size: 14px; line-height: 1.4; }
.bubble--you { align-self: flex-end; background: var(--orange); color: #fff; border-bottom-right-radius: 5px; }
.bubble--bot { align-self: flex-start; background: var(--black); border: 1px solid var(--grey-1); border-bottom-left-radius: 5px; }
.bubble--typing { display: inline-flex; align-items: center; gap: 5px; padding: 13px 14px; }
.typing-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--grey-2);
  opacity: .35; animation: typingBounce 1.2s infinite ease-in-out; }
.typing-dot:nth-child(2) { animation-delay: .18s; }
.typing-dot:nth-child(3) { animation-delay: .36s; }
@keyframes typingBounce { 0%,65%,100% { transform: translateY(0); opacity: .35; } 30% { transform: translateY(-5px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .typing-dot { animation: typingFade 1.2s infinite ease-in-out; }
  @keyframes typingFade { 0%,100% { opacity: .3; } 50% { opacity: 1; } }
}
.chat__row { display: flex; gap: 8px; margin-top: 12px; }
.chat__input { flex: 1; border-radius: var(--r-input); padding: 14px 16px; font-size: 15px;
  background: var(--black); color: var(--white-1); border: 1px solid var(--grey-1); }
.chat__input::placeholder { color: var(--grey-2); }
.chat__send { border: none; border-radius: 50%; width: 46px; height: 46px; font-size: 20px; cursor: pointer;
  background: var(--orange); color: #fff; flex: 0 0 46px; }
.chat__send:active { background: var(--orange-1); }
.chat__hints { margin-top: 10px; font-size: 12px; color: var(--grey-2); line-height: 1.5; }

.linkbtn { display: block; width: calc(100% - 32px); margin: 16px 16px 0; padding: 12px; border: none;
  background: none; color: var(--orange); font-size: 15px; font-weight: 600; cursor: pointer; }
.linkbtn:active { opacity: .7; }

/* профиль */
.prof { display: flex; flex-direction: column; gap: 12px; padding: 8px 16px 0; }
.prof__card { background: var(--black-2); border: none; border-radius: var(--r-card); padding: 16px; }
.prof__name { font-size: 16px; font-weight: 700; color: #fff; }
.prof__val { font-size: 14px; line-height: 1.45; color: var(--grey-2); margin: 6px 0 12px; }
.prof__card .btn { display: inline-flex; min-height: 44px; padding: 8px 18px; font-size: 14px; }
.prof__btns { display: flex; flex-wrap: wrap; gap: 8px; }

/* разбор результата опросника */
.report { margin-top: 14px; }
#quizReport { padding: 0 16px; }
.prof__card .report { margin-top: 12px; border-top: 1px solid var(--hairline); padding-top: 12px; }
.report__title { font-size: 15px; font-weight: 700; margin-bottom: 8px; color: #fff; }
.report__p { font-size: 14px; line-height: 1.55; margin: 0 0 10px; }
.report__lists { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.report__list { font-size: 13.5px; line-height: 1.5; }
.report__list-h { font-weight: 600; margin-bottom: 4px; }
.report__list ul { margin: 0; padding-left: 18px; }
.report__list li { margin: 2px 0; }
.report__list--good .report__list-h { color: #5ec27e; }
.report__list--avoid .report__list-h { color: #e0738c; }

/* опросник */
.quiz__nav { display: flex; align-items: center; gap: 12px; padding: 6px 16px 0; }
.quiz__back { background: none; border: none; color: var(--orange); font-size: 14px; padding: 4px 6px;
  cursor: pointer; font-weight: 500; }
.quiz__back:active { opacity: .7; }
.quiz__nav .quiz__progress { margin: 0; }
.quiz__progress { margin: 6px 16px; font-size: 13px; color: var(--grey-2); }
.quiz__q { margin: 8px 16px 4px; font-size: 18px; font-weight: 700; line-height: 1.35; }
.quiz__hint { margin: 0 16px 8px; font-size: 13px; color: var(--grey-2); }
.quiz__opts { display: flex; flex-direction: column; gap: 10px; padding: 10px 16px 0; }
.quiz__opt { text-align: left; border: 1.5px solid var(--grey-1); background: var(--black-2); color: var(--white-1);
  border-radius: 12px; padding: 14px 16px; font-size: 15px; line-height: 1.35; cursor: pointer; }
.quiz__opt--on { border-color: var(--orange); background: color-mix(in srgb, var(--orange) 16%, var(--black-2)); }
.quiz__opt:active { opacity: .9; }
.quiz__opts--scale { flex-direction: row; gap: 8px; }
.quiz__num { flex: 1; border: 1.5px solid var(--grey-1); background: var(--black-2); color: var(--white-1);
  border-radius: 12px; padding: 16px 0; font-size: 18px; font-weight: 700; cursor: pointer; }
.quiz__num.quiz__opt--on { border-color: var(--orange); }
.quiz__num:active { opacity: .9; }
#quizNumInput { background: var(--black-2) !important; color: var(--white-1) !important;
  border: 1px solid var(--grey-1) !important; }

/* экран-заглушка */
.soon { margin: 30px 16px 0; padding: 28px 22px; border-radius: var(--r-card); background: var(--black-2);
  border: none; text-align: center; }
.soon__emoji { font-size: 40px; }
.soon__title { margin-top: 12px; font-size: 19px; font-weight: 700; color: #fff; }
.soon__text { margin: 12px 0 20px; font-size: 14px; line-height: 1.5; color: var(--grey-2); }

/* ===== карточка товара (шит) ===== */
.card--tap { cursor: pointer; }
.price__old { color: var(--grey-2); text-decoration: line-through; margin-right: 8px; font-size: 15px; }
.price__cur { font-size: 20px; font-weight: 700; color: var(--orange); }
.fa__row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.fa__badge { background: var(--orange); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.fa__price { font-size: 18px; font-weight: 700; color: var(--orange); }
.fa__note { margin-top: 6px; font-size: 12px; line-height: 1.45; color: var(--grey-2); }

/* шит (overlay снизу) */
.sheet { position: fixed; inset: 0; z-index: 50; }
.sheet__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); opacity: 0; transition: opacity .22s ease; }
.sheet.open .sheet__backdrop { opacity: 1; }
.sheet__panel { position: absolute; left: 50%; transform: translateX(-50%) translateY(100%); bottom: 0;
  width: 100%; max-width: 440px; max-height: 90vh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--black-1); border-radius: 24px 24px 0 0; transition: transform .24s cubic-bezier(.2,.8,.2,1);
  padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
.sheet.open .sheet__panel { transform: translateX(-50%) translateY(0); }
body.pdp-open #appScroll { overflow: hidden; }   /* PDP открыт — лента под ним не скроллится */
/* при активном чате/фильтрах (виден блюр-скрим) фон ленты НЕ скроллим — иначе dockOnScroll прячет
   плашку дока, а скрим остаётся (плашка «пропадает», блюр висит). Лочим прокрутку фона. */
body.scrim-lock #appScroll { overflow: hidden; }
.sheet__close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 36px; height: 36px; border: none;
  border-radius: 999px; background: rgba(0,0,0,.5); color: #fff; font-size: 16px; cursor: pointer; }

/* ── КАРТОЧКА ТОВАРА (PDP, макет Figma 52:1288 / 53:2188) ──
   ВАЖНО: в Figma «black-1»=#242423 (= наш --black-2), «black»=#111110 (= наш --black). */
/* PDP занимает ВЕСЬ экран (не sheet над лентой): сплошной чёрный фон, контент скроллится,
   нижний док — отдельный слой с градиент-подложкой поверх контента (как у дока ленты). */
.sheet--pdp .sheet__panel { height: 100%; max-height: 100%; border-radius: 0; background: var(--black);
  display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.pdp__scroll { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: max(56px, calc(var(--tg-content-safe-area-inset-top, 0px) + var(--tg-safe-area-inset-top, 0px) + 32px)) 0 210px; }
/* фото + инфо = единая карточка (на всю ширину, скругление 24) */
.pdp__card { border-radius: 24px; overflow: hidden; background: var(--black-2); }
.pdp__photo { position: relative; }
.pdp__gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; }
.pdp__gallery::-webkit-scrollbar { display: none; }
.pdp__slide { flex: 0 0 100%; scroll-snap-align: center; aspect-ratio: 3/4; background: var(--black-2); }
.pdp__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp__slide--empty { display: flex; align-items: center; justify-content: center; }
.pdp__slide--empty .ph-star { width: 40%; opacity: .25; }
.pdp__fav { position: absolute; top: 24px; right: 24px; }   /* сердечко-избранное поверх фото (как в ленте) */
.pdp__info { padding: 16px 16px 8px; }
.pdp__price { font-size: 20px; line-height: normal; }
.pdp__price .price__cur { font-size: 20px; font-weight: 510; }
.pdp__type { font-size: 16px; line-height: 20px; color: #aaaaa4; }
.pdp__fa { margin: 8px 0 4px; }
/* круглый чип-лого: app-icon бренда с сайта (лого + родной фон), cover в круг (Figma 53:2184) */
.logo-mono { flex: 0 0 auto; border-radius: 50%; overflow: hidden; background: var(--black-2); }
.logo-mono img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp__brandrow { display: flex; gap: 8px; align-items: center; padding: 8px 0 0; }
.pdp__brandrow:empty { display: none; }
.pdp__brandrow .logo-mono { width: 40px; height: 40px; }
.pdp__brandrow__name { font-size: 16px; line-height: 20px; color: var(--white-1); }
.pdp__brandrow__sub { font-size: 13px; line-height: 16px; color: var(--grey-2); }
/* секции «С чем носить» / «Похожее» */
.pdp__sectiontitle { font-size: 34px; font-weight: 700; color: #fff; margin: 24px 16px 12px; letter-spacing: -.01em; }
/* PDP-док теперь — общий персистентный #dock (секция #dockPdp). Когда PDP открыт, поднимаем док
   НАД шитом PDP (sheet z-index 50), чтобы плашка дока оставалась на месте поверх контента PDP. */
body.pdp-open .dock { z-index: 60; }
/* нижний док PDP: блок магазина (круглый чип-лого + название + домен) + кнопки «назад» / «Купить» */
.pdp__store { display: flex; gap: 8px; align-items: center; padding: 8px 16px; min-width: 0; }
.pdp__store:empty { display: none; }
.pdp__store .logo-mono { width: 54px; height: 54px; }
.pdp__store__b { min-width: 0; }
.pdp__store__name { font-size: 16px; line-height: 20px; color: var(--white-1); }
.pdp__store__url { font-size: 13px; line-height: 16px; color: var(--grey-2); }
.pdp__actions { display: flex; gap: 8px; align-items: center; padding: 8px 16px; }
.pdp__back { flex: 0 0 54px; width: 54px; height: 54px; border-radius: var(--r-pill); background: var(--black);
  display: grid; place-items: center; cursor: pointer; }
.pdp__back .ico { width: 24px; height: 24px; color: var(--white-1); }
.pdp__add { flex: 1 1 0; height: 54px; margin: 0; border-radius: var(--r-pill); }

/* карточка стилиста: тумблер «отдать скидку» */
.st-give { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 12px; border: 1px solid var(--grey-1);
  border-radius: 12px; background: var(--black-2); cursor: pointer; }
.st-give input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--orange); flex: 0 0 auto; }
.st-give__txt { font-size: 14px; font-weight: 700; line-height: 1.3; }
.st-give__hint { display: block; font-size: 12px; font-weight: 400; color: var(--grey-2); margin-top: 4px; }

/* ── оверлеи (welcome / filters) ── */
/* WELCOME — режим контента дока (не оверлей): приветствие + кнопка внутри плашки дока. */
.dockwelcome { padding: 20px 20px 12px; }
.welcome__title { font-size: 22px; font-weight: 700; color: #fff; margin: 0 0 8px; }
.welcome__text { font-size: 16px; line-height: 22px; color: var(--white-3); margin: 0 0 16px; }
.dockwelcome .btn { width: 100%; }

/* ── ФИЛЬТРЫ (Figma 1:146): применённые в диалоге фильтры — секция ВНУТРИ дока ── */
/* Фрейм дока остаётся на месте (высоту меняет общий FLIP .dock-panel--anim), а контент фильтров
   раскрывается из кнопки ≡ (нижний-правый угол) через clip-path. ≡ сидит в чат-инпуте сразу под
   этой секцией, поэтому круг с центром у правого-нижнего угла «выезжает» именно из кнопки. */
/* gap 16px = ритм между чёрными блоками как в Figma (201:5609): применённые ↔ базовый ↔ кнопки. */
.dockfilters { padding: 8px 16px 12px; will-change: clip-path; display: flex; flex-direction: column; gap: 16px;
  transition: clip-path .3s cubic-bezier(.22,.61,.36,1);
  clip-path: circle(160% at calc(100% - 43px) 100%); }
.dockfilters.dockfilters--closed { clip-path: circle(0px at calc(100% - 43px) 100%); }
/* заголовок экрана фильтров (без нижнего паддинга — 16px до первого блока даёт gap дока) */
.fsheet__title { font-size: 26px; font-weight: 700; line-height: 30px; color: var(--white-1); padding: 8px 8px 0; }
/* СКРОЛЛ-ЗОНА — применённые фильтры / список брендов уезжают под прибитый низ, если не влезают */
.fsheet__scroll { overflow-y: auto; max-height: 44vh; scrollbar-width: none; }
.fsheet__scroll::-webkit-scrollbar { display: none; }
/* экран брендов: базового блока нет → список тянем почти до верха (высокий скролл) */
.dockfilters--brands .fsheet__scroll { max-height: 72vh; }
/* контейнер применённых фильтров: чёрный скруглённый блок на панели дока (--black-2) */
.fsheet__list { display: flex; flex-direction: column; gap: 8px; background: var(--black);
  border-radius: 24px; padding: 8px 0; }
.fsheet__list:empty { display: none; }
/* строка применённого фильтра: подпись + ✕ */
.frow { display: flex; align-items: center; gap: 8px; min-height: 54px; padding: 8px 16px; }
.frow__t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--white-1); font-size: 16px; font-weight: 510; line-height: 20px; }
.frow__x { flex: 0 0 24px; width: 24px; height: 24px; display: grid; place-items: center;
  color: var(--white-1); cursor: pointer; }
.frow__x svg { width: 24px; height: 24px; }
/* плейсхолдер пустого верхнего блока — сам чёрный блок (как контейнер фильтров), текст по левому краю */
.fsheet__empty { background: var(--black); border-radius: 24px; padding: 16px; text-align: left;
  color: var(--grey-2); font-size: 15px; line-height: 1.5; }

/* ── список брендов (экран «Бренды») ── */
.fsheet__brands { display: flex; flex-direction: column; gap: 8px; background: var(--black);
  border-radius: 24px; padding: 8px 0; }
.brow { display: flex; align-items: center; gap: 8px; min-height: 54px; padding: 8px 16px;
  width: 100%; border: none; background: none; text-align: left; cursor: pointer; }
.brow .logo-mono { width: 40px; height: 40px; border: 1px solid var(--grey); }
.brow__t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--white-1); font-size: 16px; font-weight: 510; line-height: 20px; }
.brow__radio { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; background: var(--black-2);
  display: grid; place-items: center; }
.brow__radio svg { width: 0; height: 0; }
.brow__radio--on { background: var(--orange); }
.brow__radio--on svg { width: 16px; height: 16px; color: #fff; }

/* ── прибитый блок базовых фильтров: тир-табы + Мои размеры + Бренды + Цены ── */
.fbase { background: var(--black); border-radius: 24px; padding: 8px 0;
  display: flex; flex-direction: column; gap: 8px; }
.ftiers { display: flex; gap: 8px; padding: 8px 16px; overflow-x: auto; scrollbar-width: none;
  /* Позиционный фейд краёв (подсказка, что ряд скроллится): левый фейд — только после скролла
     (класс НЕ .is-start), иначе первый чип целиком; правый фейд шире (--fadeR), чтобы у «Премиума»
     справа было больше воздуха. .is-end (доскроллено вправо) убирает правый фейд. Ширины через
     переменные — переключаются классами is-start/is-end (см. syncTierFade). Правая полоса — крутой
     градиент: альфа 1→0.3 на первой половине (промежуточный стоп), потом до 0 → доля тёмного больше. */
  --fadeL: 22px; --fadeR: 26px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fadeL), #000 calc(100% - var(--fadeR)), rgba(0,0,0,0.3) calc(100% - var(--fadeR) * 0.5), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--fadeL), #000 calc(100% - var(--fadeR)), rgba(0,0,0,0.3) calc(100% - var(--fadeR) * 0.5), transparent 100%); }
.ftiers.is-start { --fadeL: 0px; }   /* до скролла — левый край без фейда (первый чип не тронут) */
.ftiers.is-end { --fadeR: 0px; }     /* доскроллено вправо — правый край без фейда («Премиум» целиком) */
.ftiers::-webkit-scrollbar { display: none; }
.ftier { flex: 0 0 auto; min-height: 36px; padding: 8px 12px; border-radius: 32px; border: none;
  background: var(--black-2); color: var(--white-1); font-size: 16px; font-weight: 510; line-height: 20px; cursor: pointer; }
.ftier--on { background: var(--orange); color: #fff; }
/* ячейка базового фильтра: иконка + [заголовок + подпись] + шеврон/переключатель */
.fcell { display: flex; align-items: center; gap: 8px; min-height: 54px; padding: 8px 16px; width: 100%;
  border: none; background: none; text-align: left; cursor: pointer; }
.fcell__ico { flex: 0 0 24px; width: 24px; height: 24px; color: var(--white-1); }
.fcell__ico svg { width: 24px; height: 24px; }
.fcell__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.fcell__t { color: var(--white-1); font-size: 16px; font-weight: 510; line-height: 20px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fcell__sub { color: var(--grey-2); font-size: 13px; line-height: 16px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fcell__chev { flex: 0 0 24px; width: 24px; height: 24px; color: var(--white-1); }
.fcell__chev svg { width: 24px; height: 24px; }
/* «позже»: плейсхолдер-ячейки/табы приглушены и не кликаются */
.fcell--soon, .ftiers[aria-hidden="true"] { opacity: .5; pointer-events: none; }
/* переключатель «Мои размеры» (Figma I201:5622;201:5161): OFF — серый трек, кнопка слева; ON
   (.fswitch--on) — оранж трек, широкий белый пилюль-кнопка 31×22 у правого края */
.fswitch { flex: 0 0 52px; width: 52px; height: 24px; border-radius: 12px; background: var(--black-2);
  position: relative; transition: background .18s ease; }
.fswitch::after { content: ""; position: absolute; top: 1px; left: 1px; width: 31px; height: 22px;
  border-radius: 16px; background: #fff; transition: left .18s ease; }
.fswitch--on { background: var(--orange); }
.fswitch--on::after { left: 20px; }

/* ── ряд действий (Назад / Сбросить) ── */
.fsheet__foot { display: flex; gap: 8px; align-items: center; }
.fbtn { flex: 1 1 0; min-width: 0; height: 54px; border-radius: 32px; background: var(--black); color: var(--white-1);
  border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 16px; font-weight: 510; line-height: 20px; transition: background .15s; }
.fbtn svg { width: 24px; height: 24px; color: var(--white-1); }
.fbtn:active { background: var(--grey); }

/* ── экран «Диапазон цен» (Figma 133:3004): вертикальный 2-хендл range-слайдер ──
   Трек — узкий скруглённый прямоугольник (--black), внутри которого: серые зоны исключения
   (--black-2 = Figma «--black-1»), тянущиеся от краёв до ЦЕНТРА соответствующего хендла, и два
   оранжевых пилюль-хендла во всю ширину трека. Низ трека = дёшево, верх = дорого. Позиция хендла
   задаётся переменной --p = (1 − pos): --p=0 → у верхнего упора, --p=1 → у нижнего; центр никогда
   не выходит за трек (инсет 27px = полувысота пилюли), поэтому пилюля всегда видна целиком. */
.fprice { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 24px 16px 8px; }
.fprice__track { position: relative; width: 220px; height: min(56vh, 460px);
  background: var(--black); border: 1px solid var(--grey-1); border-radius: 27px; overflow: hidden; }
/* серые зоны вне выбора: сверху (дороже max) и снизу (дешевле min); высота до центра хендла */
.fprice__dim { position: absolute; left: 0; right: 0; background: var(--black-2); }
.fprice__dim--top { top: 0; height: calc(27px + var(--p, 0) * (100% - 54px)); }
.fprice__dim--bottom { bottom: 0; top: calc(27px + var(--p, 1) * (100% - 54px)); }
/* хендл: оранжевая пилюля во всю ширину трека с ₽ по центру */
.fprice__handle { position: absolute; left: 0; right: 0; height: 54px; z-index: 2;
  top: calc(27px + var(--p, .5) * (100% - 54px)); transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center; padding: 8px 16px;
  border: none; border-radius: 32px; background: var(--orange); cursor: grab;
  color: #fff; font-size: 16px; font-weight: 510; line-height: 20px; white-space: nowrap;
  touch-action: none; -webkit-user-select: none; user-select: none; }
/* тени направлены к упорам: верхний хендл (max) отбрасывает тень ВВЕРХ, нижний (min) — ВНИЗ */
.fprice__handle--max { box-shadow: 0 -16px 16px 0 rgba(17, 17, 16, .28); }
.fprice__handle--min { box-shadow: 0 16px 16px 0 rgba(17, 17, 16, .28); }
.fprice__handle:active, .fprice__handle--drag { cursor: grabbing; z-index: 4; }
/* дивайдер над рядом «Назад/Сбросить» (Figma 133:3015) */
.fprice__divider { width: 100%; height: 1px; background: var(--grey-1); margin: 16px 0 0; }

/* ── пустой результат ленты по цене (не обнуляем молча) ── */
.feed-note { margin: 24px 16px; padding: 20px 16px; background: var(--black-2); border-radius: 24px;
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.feed-note__t { color: var(--white-1); font-size: 16px; line-height: 20px; }
.feed-note__btn { min-height: 44px; padding: 8px 20px; border: none; border-radius: 32px;
  background: var(--orange); color: #fff; font-size: 16px; font-weight: 510; line-height: 20px; cursor: pointer; }
.feed-note__btn:active { background: var(--orange-1); }

/* плейсхолдер-звезда вместо фото */
.ph-star { width: 40%; height: auto; opacity: .25; }
.hero { display: none; }   /* старая paper-шапка лендинга убрана — её заменил .feed-head */