/* Виртуальная примерка — кнопка и модалка.
   Префикс .ftryon- везде: тема forward-sport.ru (bootstrap + свои стили) не
   должна нас задевать, и мы не должны задевать её.

   Палитра только красный / белый / чёрный — как у сайта. Взято у него же,
   а не придумано:
     красный  #ED1C24 — цвет кнопки «В корзину» в карточке товара;
     чёрный   #2d2d2d — цвет текста и рамок кнопок сайта;
     шрифты   Onest (main-page.css) и Normalidad (new-style.css) — уже
              подключены на странице товара, ничего не догружаем;
     кнопка   .SKORO_V_PRODAZHE из карточки товара: 290x50, рамка 2px,
              uppercase, без скруглений — кнопка запуска повторяет её;
              а модалка мягкая (10-14px), как карточки сайта. */

.ftryon-scope,
.ftryon-launch,
.ftryon-overlay {
  --ft-red: #ED1C24;
  --ft-red-ink: #c8151c;
  --ft-ink: #2d2d2d;
  --ft-ink-2: #6b6b6b;
  --ft-ink-3: #9b9b9b;
  --ft-line: #e6e6e6;
  --ft-line-2: #d5d5d5;
  --ft-soft: #f6f6f6;
  --ft-black: #1a1a1a;
  --ft-r: 10px;
  --ft-r-lg: 14px;
  --ft-r-sm: 8px;
  --ft-font: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --ft-display: 'Normalidad', 'Onest', -apple-system, 'Segoe UI', Arial, sans-serif;
}

/* ── Кнопка на карточке ───────────────────────────────────────
   Повторяет .SKORO_V_PRODAZHE из шаблона товара — контурный блок той же
   ширины, высоты и рамки, чтобы стоять в колонке карточки как родная.
   Отличие одно: наведение заливает красным, потому что наша кнопка, в отличие
   от той плашки, кликабельна. Залитая красная уже занята «В корзину» — второй
   такой же быть не должно. */
/* Кнопка запуска стоит в одном ряду с «В корзину» и выглядит как она: это
   равноценное решение, а не второстепенная ссылка. Контурный вариант читался
   как «может быть, потом» — примерка ради этого и делалась, чтобы человек
   нажимал её первой.

   Ряд задаём на самом блоке кнопок карточки: обе кнопки делят ширину поровну
   и не переносятся. На телефоне — друг под другом, там 290px в строку не
   помещаются. */
.ftryon-anchor {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
}
/* Раскладку задаём СВОЕЙ кнопке, а не всем детям чужого блока.
   Здесь стояло `.ftryon-anchor > *` — правило доставало кнопку «В корзину» и
   всё, что команда магазина положит в этот блок потом: навязывало ширину и
   обнуляло верхний отступ. Со стороны это выглядит как «наша вёрстка меняется,
   а в нашем CSS этого нет» — на это и жаловались (разбор 26.08.2026).
   Ряд сохраняется: flex на контейнере остаётся, чужие дети живут по своим
   правилам, наша кнопка делит с ними строку. */
.ftryon-anchor > .ftryon-launch { flex: 1 1 240px; margin-top: 0; }

.ftryon-launch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  flex: 1 1 240px;
  width: 290px;
  max-width: 100%;
  height: 50px;
  margin: 10px 0 0;
  padding: 0 .75rem;
  font-family: var(--ft-font);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: var(--ft-red);
  border: 2px solid var(--ft-red);
  border-radius: 0;
  cursor: pointer;
  user-select: none;
  transition: background .15s, border-color .15s;
}
.ftryon-launch:hover,
.ftryon-launch:focus-visible { background: var(--ft-red-ink); border-color: var(--ft-red-ink); }
.ftryon-launch:active { background: var(--ft-red-ink); border-color: var(--ft-red-ink); }
.ftryon-launch__icon { flex: none; width: 15px; height: 15px; }

/* Тот же брейкпоинт, что у .SKORO_V_PRODAZHE в шаблоне. */
@media screen and (max-width: 767px) {
  .ftryon-launch { width: 100%; flex-basis: 100%; }
  .ftryon-anchor > .ftryon-launch { flex-basis: 100%; }
}

/* ── Модалка ──────────────────────────────────────────────── */
/* Примерка занимает экран целиком. Она не «диалог поверх карточки», а
   отдельный режим: человек надолго уходит в фото, ожидание и подбор образа.
   Окно на 440px посреди страницы этому не соответствовало — контент лип к
   краям, а свайпы не помещались. */
.ftryon-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0;
  background: rgba(18, 18, 18, .70);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: ftryon-fade .18s ease-out;
}
@keyframes ftryon-fade { from { opacity: 0; } }

.ftryon-modal {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 560px;
  max-height: none;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Единый ритм отступов: 24 по бокам, 28 сверху, снизу с запасом под
     safe-area телефона — иначе кнопка образа упирается в системную полосу. */
  padding: 28px 24px calc(32px + env(safe-area-inset-bottom, 0px));
  font-family: var(--ft-font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ft-ink);
  background: #fff;
  border-radius: 0;
  box-shadow: none;
  animation: ftryon-rise .22s cubic-bezier(.2, .7, .3, 1);
}
/* На широком экране — высокая колонка по центру, а не полотно во всю ширину:
   примерка вертикальная, растягивать её некуда. */
@media (min-width: 700px) {
  .ftryon-overlay { padding: 24px; align-items: center; }
  .ftryon-modal {
    height: auto;
    /* Не выше 90% экрана: окно, которое выше монитора, читается как сломанная
       вёрстка, а не как «прокрутите». dvh — ради телефонов, где адресная
       строка то появляется, то нет, и 100vh врёт. */
    max-height: 90vh;
    max-height: 90dvh;
    border-radius: var(--ft-r-lg);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
  }
}
@keyframes ftryon-rise { from { opacity: 0; transform: translateY(10px); } }
.ftryon-modal *, .ftryon-modal *::before, .ftryon-modal *::after { box-sizing: border-box; }

.ftryon-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  font: 400 20px/1 var(--ft-font);
  color: var(--ft-ink-3);
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.ftryon-close:hover { background: var(--ft-soft); color: var(--ft-ink); }

.ftryon-eyebrow {
  margin: 0 0 6px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ft-red);
}
.ftryon-title {
  margin: 0 30px 6px 0;
  font-family: var(--ft-display);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--ft-ink);
}
.ftryon-hint { margin: 0 0 18px; font-size: 13px; color: var(--ft-ink-2); }

/* ── Экран требований к фото ──────────────────────────────── */
/* Строка над требованиями — само действие, которого мы ждём от человека.
   Крупнее списка: сначала «что сделать», потом «каким должно быть фото». */
.ftryon-lead {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ft-ink);
}
/* Подзаголовок списка требований. */
.ftryon-reqs__t {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ft-ink);
}
.ftryon-reqs { margin: 0 0 18px; padding: 0; list-style: none; }
.ftryon-reqs li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 5px 0;
  font-size: 13px;
  color: var(--ft-ink);
}
.ftryon-reqs li::before {
  content: '';
  flex: none;
  width: 5px;
  height: 5px;
  margin-top: 7px;
  background: var(--ft-red);
  border-radius: 50%;
}
.ftryon-reqs li.is-warn { color: var(--ft-ink-3); font-size: 12px; }
.ftryon-reqs li.is-warn::before { background: var(--ft-line-2); }

/* Примеры «как надо / как не надо» — те же снимки, что в demo-shop. */
.ftryon-examples { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 20px; }
.ftryon-ex__frame {
  position: relative;
  /* Примеры показывают, каким должен быть КАДР, поэтому кадр должен быть виден
     целиком. При 3:4 и cover у образцового снимка срезалась голова и ноги —
     то есть ровно то, о чём написано выше: «в полный рост, целиком в кадре».
     Пропорции ближе к вертикальному снимку, картинка вписывается, не режется. */
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--ft-soft);
  border: 1px solid var(--ft-line);
  border-radius: var(--ft-r);
}
.ftryon-ex--bad .ftryon-ex__frame { border-color: rgba(237, 28, 36, .35); }
.ftryon-ex__img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Неподходящий кадр обводим — рамка сама называет ошибку, без подписи. */
.ftryon-ex--bad .ftryon-ex__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid rgba(237, 28, 36, .6);
  border-radius: var(--ft-r);
  pointer-events: none;
}
.ftryon-ex__label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--ft-ink-2);
}
.ftryon-ex__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 18px;
  height: 18px;
  font-size: 11px;
  line-height: 1;
  color: #fff;
  border-radius: 50%;
}
.ftryon-ex--good .ftryon-ex__mark { background: var(--ft-black); }
.ftryon-ex--bad .ftryon-ex__mark { background: var(--ft-red); }

/* ── Согласие ─────────────────────────────────────────────── */
/* Галочек согласия ДВЕ — между ними отступ меньше, чем до кнопки: это один
   блок из двух строк, а не два разных места экрана. */
.ftryon-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ft-ink-2);
  cursor: pointer;
}
/* Последняя галочка отделена от кнопки обычным отступом. */
.ftryon-consent:last-of-type { margin-bottom: 16px; }
.ftryon-consent input {
  flex: none;
  width: 17px;
  height: 17px;
  margin: 1px 0 0;
  accent-color: var(--ft-red);
  cursor: pointer;
}
.ftryon-consent a { color: var(--ft-ink); text-decoration: underline; }
.ftryon-consent a:hover { color: var(--ft-red); }

/* ── Кнопки внутри модалки: мягкие, в отличие от кнопок сайта ── */
.ftryon-actions { display: flex; gap: 10px; }
.ftryon-btn {
  flex: 1;
  padding: 12px 16px;
  font-family: var(--ft-font);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ft-ink);
  background: #fff;
  border: 1px solid var(--ft-line-2);
  border-radius: var(--ft-r);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .06s;
}
.ftryon-btn:hover { background: var(--ft-soft); }
.ftryon-btn:active { transform: scale(.985); }
.ftryon-btn--primary { color: #fff; background: var(--ft-red); border-color: var(--ft-red); }
.ftryon-btn--primary:hover { background: var(--ft-red-ink); border-color: var(--ft-red-ink); }
.ftryon-btn--wide { width: 100%; flex: none; }
.ftryon-btn--sm { flex: 0 0 auto; padding: 8px 14px; font-size: 13px; }
.ftryon-btn[disabled] {
  color: var(--ft-ink-3);
  background: var(--ft-soft);
  border-color: var(--ft-line);
  cursor: not-allowed;
}
.ftryon-btn[disabled]:active { transform: none; }

/* ── Зона выбора фото ─────────────────────────────────────── */
.ftryon-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 190px;
  padding: 24px 16px;
  text-align: center;
  background: #fff;
  border: 1.5px dashed var(--ft-line-2);
  border-radius: var(--ft-r-lg);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.ftryon-drop:hover, .ftryon-drop.is-over { border-color: var(--ft-red); background: rgba(237, 28, 36, .03); }
.ftryon-drop__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 12px;
  color: var(--ft-red);
  background: rgba(237, 28, 36, .07);
  border-radius: var(--ft-r);
}
.ftryon-drop__t { font-size: 14px; font-weight: 500; }
.ftryon-drop__s { margin-top: 3px; font-size: 12px; color: var(--ft-ink-2); }
.ftryon-drop__f { margin-top: 10px; font-size: 10.5px; color: var(--ft-ink-3); }

/* Выбранные снимки */
.ftryon-thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 12px;
  scrollbar-width: thin;
}
.ftryon-thumb {
  position: relative;
  flex: none;
  width: 76px;
  height: 104px;
  overflow: hidden;
  background: var(--ft-soft);
  border-radius: var(--ft-r);
}
.ftryon-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ftryon-thumb__n {
  position: absolute;
  bottom: 4px;
  left: 4px;
  padding: 1px 5px;
  font-size: 10px;
  color: #fff;
  background: rgba(0, 0, 0, .55);
  border-radius: 20px;
}
.ftryon-thumb__x {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  font: 400 13px/1 var(--ft-font);
  color: #fff;
  background: rgba(0, 0, 0, .55);
  border: none;
  border-radius: 50%;
  cursor: pointer;
}
.ftryon-thumb__x:hover { background: var(--ft-red); }
.ftryon-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: none;
  width: 76px;
  height: 104px;
  font-size: 10px;
  color: var(--ft-ink-3);
  background: #fff;
  border: 1.5px dashed var(--ft-line-2);
  border-radius: var(--ft-r);
  cursor: pointer;
}
.ftryon-more:hover { border-color: var(--ft-red); color: var(--ft-red); }
.ftryon-more span:first-child { font-size: 17px; line-height: 1; }

/* Ранее загруженные */
.ftryon-saved { margin-top: 12px; }
.ftryon-saved__toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 0;
  font: 400 12px/1.2 var(--ft-font);
  color: var(--ft-ink-2);
  background: none;
  border: none;
  cursor: pointer;
}
.ftryon-saved__toggle:hover { color: var(--ft-ink); }
.ftryon-saved__row { display: flex; gap: 8px; overflow-x: auto; padding: 6px 0 2px; }
.ftryon-saved__item {
  position: relative;
  flex: none;
  width: 58px;
  height: 78px;
  padding: 0;
  overflow: hidden;
  background: var(--ft-soft);
  border: 2px solid transparent;
  border-radius: var(--ft-r-sm);
  cursor: pointer;
}
.ftryon-saved__item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ftryon-saved__item:hover { border-color: var(--ft-line-2); }
.ftryon-saved__item.is-used { border-color: var(--ft-black); }

/* ── Прогресс ─────────────────────────────────────────────── */
.ftryon-progress-wrap { padding: 22px 0 8px; text-align: center; }
.ftryon-spinner {
  width: 42px;
  height: 42px;
  margin: 0 auto 16px;
  border: 3px solid var(--ft-line);
  border-top-color: var(--ft-red);
  border-radius: 50%;
  animation: ftryon-spin .9s linear infinite;
}
@keyframes ftryon-spin { to { transform: rotate(360deg); } }
.ftryon-progress { margin: 0; font-size: 14px; font-weight: 500; color: var(--ft-ink); }
.ftryon-progress__s { margin: 4px 0 0; font-size: 12px; color: var(--ft-ink-3); }

/* ── Результат ────────────────────────────────────────────── */
.ftryon-result {
  display: block;
  /* Кадр примерки вертикальный (2:3), и при ширине окна 560 он получался
     высотой под 840 — выше экрана. Окно тянулось за ним, появлялась прокрутка,
     и человек видел кусок фотографии вместо результата.
     Теперь снимок вписывается в отведённую высоту, а не диктует её:
     ширина подстраивается, пропорции сохраняются. Остаток экрана остаётся
     оценке и кнопкам — ради них сюда и пришли. */
  width: auto;
  max-width: 100%;
  max-height: 62vh;
  max-height: 62dvh;
  margin: 0 auto 14px;
  object-fit: contain;
  border-radius: var(--ft-r);
  background: var(--ft-soft);
}
/* Столбец кадра: ширину задаёт сама фотография, а не колонка. Полоса оценки
   и переключатель кадров равняются по ней — иначе их края уезжают за край
   снимка и выглядят как чужие элементы. */
.ftryon-shot {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}
/* Рамка кадра: якорь для значка увеличения. Сама по себе ничего не рисует —
   ширину по-прежнему задаёт снимок. */
.ftryon-frame { position: relative; display: block; width: fit-content; max-width: 100%; margin: 0 auto; }
.ftryon-frame .ftryon-result { cursor: zoom-in; margin-bottom: 0; }

/* Глазик на карточке подбора: посмотреть вещь, не уходя из примерки.
   Стоит слева-внизу — по диагонали от корзины, чтобы пальцем не промахнуться
   мимо нужного действия. */
/* Лупа без подложки: круглая плашка в углу читалась как пятно, а не как
   действие. Значок держится на белом фоне снимка сам, тень нужна только на
   случай тёмного кадра. */
.ftryon-eye {
  position: absolute;
  left: 6px;
  bottom: 6px;
  width: 28px;
  height: 28px;
  border: 0;
  background: none;
  padding: 0;
  color: var(--ft-ink);
  cursor: zoom-in;
  filter: drop-shadow(0 1px 2px rgba(255, 255, 255, .9));
  transition: color .15s, transform .15s;
}
.ftryon-eye svg { width: 18px; height: 18px; display: block; margin: auto; }
.ftryon-eye:hover { color: var(--ft-red); transform: scale(1.08); }

/* Быстрый просмотр вещи: снимки, цена, оба решения. */
.ftryon-item__gal { display: block; margin-top: 4px; }
.ftryon-item__big {
  display: block;
  cursor: zoom-in;
  width: 100%;
  max-height: 46vh;
  max-height: 46dvh;
  object-fit: contain;
  background: var(--ft-soft);
  border-radius: var(--ft-r);
}
.ftryon-item__thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; }
.ftryon-item__thumbs::-webkit-scrollbar { display: none; }
.ftryon-item__th {
  flex: 0 0 54px; width: 54px; height: 70px; padding: 0; cursor: pointer;
  background: var(--ft-soft); border: 1px solid var(--ft-line); border-radius: var(--ft-r-sm);
  overflow: hidden; transition: border-color .15s;
}
.ftryon-item__th img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ftryon-item__th.is-on { border-color: var(--ft-red); box-shadow: 0 0 0 1px var(--ft-red); }
.ftryon-item__info { margin: 14px 0 16px; }
.ftryon-item__info .ftryon-sheet__n { margin: 0; text-align: left; font-size: 15px; color: var(--ft-ink); }

.ftryon-rate {
  width: 100%;
  margin-top: 14px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ft-ink);
  background: var(--ft-soft);
  border-radius: var(--ft-r);
}
/* Плашка сбоя: значок, заголовок, объяснение. Голая красная строка не
   говорит, что делать дальше, и читается как поломка сайта. */
.ftryon-fail {
  margin: 18px 0;
  padding: 20px 18px;
  text-align: center;
  background: var(--ft-soft);
  border-radius: var(--ft-r);
}
.ftryon-fail__icon {
  width: 44px;
  height: 44px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ft-red);
  background: rgba(237, 28, 36, .08);
  border-radius: 50%;
}
.ftryon-fail__icon svg { width: 24px; height: 24px; }
.ftryon-fail__t {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ft-ink);
}
.ftryon-fail__tech {
  margin: 10px 0 0;
  padding-top: 10px;
  font-size: 11px;
  line-height: 1.45;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ft-ink-3);
  border-top: 1px solid var(--ft-line-2, rgba(0, 0, 0, .08));
  text-align: left;
  word-break: break-word;
}
.ftryon-fail__d {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ft-ink-2);
}

/* Предупреждение, а не сбой: жёлтая строка про неразобранную вещь. */
.ftryon-warn {
  margin: 0 0 14px;
  padding: 9px 12px;
  font-size: 12px;
  line-height: 1.45;
  color: #7a5b00;
  background: rgba(255, 176, 32, .12);
  border-radius: 8px;
  box-shadow: inset 3px 0 0 #ffb020;
  text-align: left;
}

/* Запрет, а не предупреждение: вещь примерить нельзя вовсе. */
.ftryon-warn.is-stop {
  color: var(--ft-red-ink);
  background: rgba(237, 28, 36, .07);
  box-shadow: inset 3px 0 0 var(--ft-red);
}

/* «Назад» на результате — рядом с крестиком, слева от него. */
.ftryon-back {
  position: absolute;
  top: 14px;
  left: 16px;
  z-index: 3;
  padding: 6px 12px;
  font: inherit;
  font-size: 13px;
  line-height: 1.2;
  color: var(--ft-ink-2);
  background: var(--ft-soft);
  border: 1px solid var(--ft-line-2, rgba(0, 0, 0, .08));
  border-radius: 999px;
  cursor: pointer;
}
.ftryon-back:hover { color: var(--ft-ink); }

.ftryon-error {
  margin: 18px 0;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--ft-red-ink);
  background: rgba(237, 28, 36, .06);
  border-radius: var(--ft-r);
  box-shadow: inset 3px 0 0 var(--ft-red);
  text-align: left;
}

/* ── «С этим носят» ───────────────────────────────────────── */
/* Линию сверху убрал: она резала экран пополам и делала подбор «чужим»
   блоком, приклеенным к результату. Разделяет воздух, а не черта. */
.ftryon-reco { margin-top: 28px; }
/* ── Подбор образа по слотам (модель demo-shop) ─────────────────────────
   По ленте на каждое место фигуры: верх, низ, обувь… Выбранное обведено.
   Смысл в том, что образ собирается ПО ОДНОЙ вещи на слот — двое брюк
   надеть нельзя, поэтому вторая заменяет первую, а не добавляется. */
.ftryon-outfit { margin: 10px 0 4px; }
.ftryon-strip { margin-bottom: 20px; }
.ftryon-strip__h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ftryon-strip__t { font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: #6b6b6b; }
.ftryon-strip__x { border: 0; background: #f0f0f0; color: #6b6b6b; font-size: 10px;
  padding: 2px 8px; border-radius: 20px; cursor: pointer; font-family: inherit; }
.ftryon-strip__x:hover { background: #e4e4e4; }
.ftryon-strip__row { display: flex; gap: 10px; overflow-x: auto; padding: 2px;
  scrollbar-width: none; }
.ftryon-strip__row::-webkit-scrollbar { display: none; }

/* Ячейка подбора не может схлопнуться.
   Высоту ей давал только снимок; не загрузился — оставалась полоска в 19 px,
   и полка из восемнадцати вещей выглядела пустой (разбор 31.08.2026). */
.ftryon-cell { min-height: 104px; }
/* Название вместо снимка — запасной вид, чтобы вещь оставалась узнаваемой. */
.ftryon-cell__n {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 8px;
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
  color: var(--ft-mut);
}
.ftryon-cell { flex: 0 0 auto; width: 92px; padding: 0 0 4px; cursor: pointer;
  background: #fff; border: 1px solid #e6e6e6; border-radius: 12px; overflow: hidden;
  font-family: inherit; text-align: left; transition: border-color .15s, box-shadow .15s; }
.ftryon-cell:hover { border-color: #c8c8c8; }
.ftryon-cell.is-on { border-color: var(--ft-red); box-shadow: 0 0 0 1px var(--ft-red); }
.ftryon-cell img { display: block; width: 100%; aspect-ratio: 3/4; object-fit: contain;
  background: #fafafa; }
.ftryon-cell__n { display: block; padding: 4px 6px 0; font-size: 10px; line-height: 1.25;
  color: #555; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Переключение между кадрами: сборка образа не затирает предыдущий результат. */
.ftryon-rnav { display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 8px 0 2px; }
.ftryon-rnav__b { width: 30px; height: 30px; border-radius: 9px; border: 1px solid #e0e0e0;
  background: #fff; cursor: pointer; font-size: 16px; line-height: 1; color: #111; }
.ftryon-rnav__b:disabled { opacity: .35; cursor: default; }
.ftryon-rnav__c { font-size: 12px; color: #6b6b6b; }

/* Кадр во весь экран: одежду выбирают глазами, мелкого превью мало. */
.ftryon-lb { position: fixed; inset: 0; z-index: 2147483000; background: rgba(0,0,0,.92);
  display: flex; align-items: center; justify-content: center; cursor: zoom-out; }
.ftryon-lb img { max-width: 96vw; max-height: 96vh; object-fit: contain; }
.ftryon-lb__x { position: absolute; top: 16px; right: 18px; width: 38px; height: 38px;
  border-radius: 50%; border: 0; background: rgba(255,255,255,.16); color: #fff;
  font-size: 22px; line-height: 1; cursor: pointer; }

.ftryon-reco__title {
  margin: 0 0 12px;
  font-family: var(--ft-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--ft-ink);
}
.ftryon-reco__hint { margin: 0 0 12px; font-size: 12px; color: var(--ft-ink-3); }
/* Постоянный текст под «Добавить к образу» (Forward, 15.09.2026). */
.ftryon-reco__lead {
  margin: -4px 0 12px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ft-ink-2);
}
/* Инструкция магазина — на карточке, над названием: прямо над кнопками
   «Пропустить» / «Добавить» (владелец 28.09.2026). Светлая подложка поверх
   тёмного градиента низа карточки — текст длинный, и читаться он должен как
   текст, а не как подпись к снимку. Касаний плашка не ловит: свайп по ней
   листает карточку; ловит только крестик. */
.ftryon-swipe__hint {
  position: relative;
  margin: 0 0 10px;
  padding: 8px 34px 8px 11px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ft-ink);
  background: rgba(255, 255, 255, .94);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
  pointer-events: none;
}
.ftryon-swipe__hint-h {
  margin: 0 0 4px;
  font-family: var(--ft-display);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ft-ink);
}
.ftryon-swipe__hint-t { margin: 0; }
.ftryon-swipe__hint-x {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 32px;
  height: 32px;
  padding: 0;
  font: 400 20px/1 var(--ft-font);
  color: var(--ft-ink-2);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
}
.ftryon-swipe__hint-x:hover { color: var(--ft-ink); background: var(--ft-soft); }

/* Колода со свайпами — модель demo-shop/SwipeCard */
/* Колода — во всю ширину модалки, до самых краёв: карточка вещи это главное
   на экране ожидания, а поля по бокам съедали её и делали мелкой.
   Отрицательные поля гасят внутренний отступ модалки (24px). */
.ftryon-swipe {
  position: relative;
  width: calc(100% + 48px);
  margin: 0 -24px 16px;
  aspect-ratio: 3 / 4;
  max-height: none;
  user-select: none;
}
.ftryon-swipe .ftryon-swipe__card { border-radius: 0; }
@media (min-width: 700px) {
  /* На широком экране край модалки скруглён — возвращаем радиус карточке. */
  .ftryon-swipe .ftryon-swipe__card { border-radius: var(--ft-r-lg); }
  .ftryon-swipe { width: 100%; margin: 0 0 16px; }
}
.ftryon-swipe__card {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--ft-soft);
  border-radius: var(--ft-r-lg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
  cursor: grab;
  /* Горизонталь забираем себе, вертикальную прокрутку страницы оставляем. */
  touch-action: pan-y;
  /* Пружина — та же кривая, что в demo-shop. */
  transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), opacity .3s ease-out;
}
.ftryon-swipe__card--behind {
  transform: scale(.96);
  opacity: .5;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
  cursor: default;
  pointer-events: none;
}
.ftryon-swipe__card.is-entering { transform: scale(.75); opacity: 0; }
.ftryon-swipe__card.is-dragging { transition: none; cursor: grabbing; }
.ftryon-swipe__card.is-gone-right { transform: translateX(120%) rotate(20deg); opacity: 0; transition-duration: .3s; }
.ftryon-swipe__card.is-gone-left { transform: translateX(-120%) rotate(-20deg); opacity: 0; transition-duration: .3s; }
.ftryon-swipe__img {
  display: block;
  width: 100%;
  height: 100%;
  /* Заполняем кадр целиком — и это безопасно: пропорция карточки берётся у
     самой фотографии (см. `deck.style.aspectRatio`), значит обрезать нечего.
     `contain` здесь оставлял бы поля на снимках, чью пропорцию не успели
     прочитать. */
  object-fit: cover;
  pointer-events: none;
}
.ftryon-swipe__chip {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0, 0, 0, .58);
  border-radius: 20px;
}
.ftryon-swipe__meta {
  position: absolute;
  inset: auto 0 0 0;
  padding: 30px 14px 14px;
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, .35) 55%, transparent);
  pointer-events: none;
}
.ftryon-swipe__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
}
.ftryon-swipe__price { margin: 3px 0 0; font-size: 13px; opacity: .8; }

/* Марки решения. Появляются по мере смещения — видно, что засчитается. */
.ftryon-stamp {
  position: absolute;
  top: 22px;
  padding: 5px 14px;
  font-family: var(--ft-display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 3px solid currentColor;
  border-radius: var(--ft-r);
  opacity: 0;
  pointer-events: none;
  transform: rotate(var(--ft-stamp-rot, 0deg)) scale(var(--ft-stamp-scale, .8));
}
.ftryon-stamp--yes {
  left: 20px;
  color: var(--ft-black);
  background: rgba(255, 255, 255, .82);
  --ft-stamp-rot: -12deg;
}
.ftryon-stamp--no {
  right: 20px;
  color: var(--ft-red);
  background: rgba(255, 255, 255, .82);
  --ft-stamp-rot: 12deg;
}

/* Действия прямо на карточке */
.ftryon-swipe__acts { display: flex; gap: 8px; pointer-events: auto; }
/* Название с ценой и корзина — одной строкой: кнопка одна, и отдельным рядом
   под текстом она висела в пустоте. */
.ftryon-swipe__line { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ftryon-swipe__texts { min-width: 0; }
.ftryon-mini {
  flex: 1;
  padding: 8px 10px;
  font-family: var(--ft-font);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: var(--ft-r-sm);
  cursor: pointer;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: background .15s, color .15s;
}
.ftryon-mini:hover { color: var(--ft-ink); background: #fff; }
.ftryon-mini--buy { color: #fff; background: var(--ft-red); border-color: var(--ft-red); }
.ftryon-mini--buy:hover { color: #fff; background: var(--ft-red-ink); border-color: var(--ft-red-ink); }

/* Копилка понравившегося: из неё собирается образ */
.ftryon-basket { margin-top: 14px; }
.ftryon-basket__t { margin: 0 0 8px; font-size: 12px; color: var(--ft-ink-2); }
.ftryon-basket__row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 10px; }
.ftryon-basket__i {
  position: relative;
  flex: none;
  width: 54px;
  height: 72px;
  overflow: hidden;
  background: var(--ft-soft);
  border: 2px solid var(--ft-black);
  border-radius: var(--ft-r-sm);
}
.ftryon-basket__i img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ftryon-basket__x {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  font: 400 12px/1 var(--ft-font);
  color: #fff;
  background: rgba(0, 0, 0, .6);
  border: none;
  border-radius: 50%;
  cursor: pointer;
}
.ftryon-basket__x:hover { background: var(--ft-red); }

/* Круглые кнопки — дубль жеста */
/* Кнопки решения под колодой: «Пропустить» и «Добавить» (Forward,
   15.09.2026). Две равные половины — решения равноправны, громче только
   «Добавить», как и основное действие везде в окне. */
.ftryon-swipe__ctrl {
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}
.ftryon-swipe__ctrl[hidden] { display: none; }
.ftryon-swipe__ctrl .ftryon-btn { flex: 1 1 0; padding: 11px 12px; }
.ftryon-round {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: #fff;
  border: 2px solid var(--ft-line-2);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
  transition: transform .12s, border-color .15s, color .15s;
}
.ftryon-round:hover { transform: scale(1.08); }
.ftryon-round:active { transform: scale(.95); }
.ftryon-round--no { color: var(--ft-red); border-color: rgba(237, 28, 36, .35); }
.ftryon-round--no:hover { border-color: var(--ft-red); }
.ftryon-round--yes { color: var(--ft-black); border-color: rgba(26, 26, 26, .3); }
.ftryon-round--yes:hover { border-color: var(--ft-black); }
.ftryon-round svg { pointer-events: none; }

.ftryon-swipe__count {
  margin: 10px 0 0;
  font-size: 11px;
  text-align: center;
  color: var(--ft-ink-3);
  font-variant-numeric: tabular-nums;
}
.ftryon-swipe__done {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 100%;
  background: var(--ft-soft);
  border-radius: var(--ft-r-lg);
}
/* Значок над заголовком: экран конца колоды — итог, а не сбой. */
.ftryon-swipe__done-i {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--ft-ink-2);
  font-size: 18px;
  line-height: 1;
}
.ftryon-swipe__done-t {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--ft-ink);
  text-align: center;
}
/* Подпись под заголовком: почему список кончился. */
.ftryon-swipe__done-s {
  margin: -6px 0 0;
  max-width: 260px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ft-ink-3);
  text-align: center;
}
/* Пояснение под заголовком: почему взяли не всё отмеченное.
   Здесь стояла ПОГАШЕННАЯ кнопка с текстом «Слишком много вещей · 5 из 3» —
   ошибка вместо действия, и человек упирался в тупик (владелец 03.09.2026). */
.ftryon-swipe__done-n {
  margin: 0;
  max-width: 260px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ft-ink-3);
  text-align: center;
}

/* Снимок крупно — по нажатию на карточку */
.ftryon-zoom {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10, 10, 10, .92);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: ftryon-fade .18s ease-out;
}
.ftryon-zoom__img { max-width: 92%; max-height: 82%; object-fit: contain; border-radius: var(--ft-r); }
.ftryon-zoom__x {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  font: 400 22px/1 var(--ft-font);
  color: #fff;
  background: rgba(255, 255, 255, .18);
  border: none;
  border-radius: 50%;
  cursor: pointer;
}
.ftryon-zoom__x:hover { background: rgba(255, 255, 255, .3); }
.ftryon-zoom__name {
  position: absolute;
  inset: auto 24px 22px;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  text-align: center;
}

.ftryon-reco__row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
}
.ftryon-reco__card {
  flex: 0 0 138px;
  scroll-snap-align: start;
  overflow: hidden;
  border: 1px solid var(--ft-line);
  border-radius: var(--ft-r);
  transition: opacity .2s, border-color .2s;
}
.ftryon-reco__card--liked { border-color: var(--ft-black); }
.ftryon-reco__card--disliked { opacity: .4; }
.ftryon-reco__img { display: block; width: 100%; height: 158px; object-fit: cover; background: var(--ft-soft); }
.ftryon-reco__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding: 8px 10px 2px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--ft-ink);
}
.ftryon-reco__price { padding: 0 10px 8px; font-size: 13px; font-weight: 600; color: var(--ft-ink); }
.ftryon-reco__votes { display: flex; gap: 6px; padding: 0 10px 10px; }
.ftryon-reco__votes .ftryon-btn { flex: 1; padding: 6px; font-size: 14px; }

/* ── «Вместо примеренной вещи» — лента замен ────────────────────────────
   Ниже колоды и отдельной секцией: колода собирает ОБРАЗ (что надеть вместе),
   а здесь то, что примеренное ЗАМЕНЯЕТ. Тише колоды — карточки мельче и без
   свайпа: замен единицы, их сравнивают глазами рядом, а не перебирают.
   Пустого состояния у секции нет: нет замен — нет и секции. */
.ftryon-alt { margin-top: 26px; }
.ftryon-alt__t {
  margin: 0 0 2px;
  font-family: var(--ft-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--ft-ink);
}
/* Пояснение под заголовком: без него футболка под костюмом читается как
   промах подбора, а не как осознанная замена. */
.ftryon-alt__s { margin: 0 0 12px; font-size: 12px; color: var(--ft-ink-3); }
/* Плитки раздела — ОБЩИЕ (.ftryon-cell в .ftryon-strip__row), те же, что на
   полках образа. Здесь жил свой набор правил: карточка шире, со снимком 158 px,
   названием, ценой и двумя кнопками внутри. Раздел от этого читался как чужой
   кусок интерфейса, хотя показывает такие же вещи такого же каталога
   (владелец 31.08.2026). Смысл раздела объясняют заголовок и подпись, а не
   особый вид карточки. */

/* Чья это технология — самой последней строкой, тише всего остального.
   Это подпись, а не действие: она не должна спорить ни с кнопками, ни с
   вещью, но должна быть на каждом экране примерки. */
/* Оговорка о нейросетевом происхождении кадра — под самим кадром.
   Не выделяем цветом: это не ошибка и не предупреждение об опасности, а
   пояснение. Заметно, но не спорит с кнопкой покупки, стоящей следом. */
.ftryon-ai-note {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ft-ink-2);
  text-align: left;
}

.ftryon-by {
  margin: 16px 0 0;
  text-align: center;
  font-size: 11px;
  line-height: 1.4;
  color: var(--ft-ink-3);
}
.ftryon-by a { color: var(--ft-ink-2); text-decoration: underline; text-underline-offset: 2px; }
.ftryon-by a:hover { color: var(--ft-red); }

@media (max-width: 480px) {
  .ftryon-overlay { padding: 0; align-items: flex-end; }
  .ftryon-modal {
    max-width: 100%;
    max-height: 90vh;
    max-height: 90dvh;
    padding: 22px 18px 20px;
    border-radius: var(--ft-r-lg) var(--ft-r-lg) 0 0;
  }
  /* Здесь окно уже 18 px — полоса догоняет. */
  .ftryon-sticky {
    margin-left: -18px;
    margin-right: -18px;
    padding-left: 18px;
    padding-right: 18px;
  }
  .ftryon-actions { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .ftryon-overlay, .ftryon-modal { animation: none; }
  .ftryon-spinner { animation-duration: 2s; }
  .ftryon-btn:active { transform: none; }
}

/* ── Полоса прогресса генерации ─────────────────────────────────────
   Сверху и с процентами: ожидающему важно «сколько ещё», а не «идёт». */
.ftryon-bar { height: 4px; border-radius: 999px; background: rgba(0,0,0,.08);
  overflow: hidden; margin: 2px 0 6px; }
.ftryon-bar__f { height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, #d31f26, #f2545b); transition: width .25s linear; }
.ftryon-bar__p { display: block; text-align: right; font-size: 12px;
  font-variant-numeric: tabular-nums; color: var(--ft-ink-3); margin-bottom: 10px; }
/* Строка ожидания: процент и полоса рядом, ниже крестика.
   ─────────────────────────────────────────────────────────────────────
   Замер 04.09.2026 на телефоне: полоса лежала на 30..34 px от верха окна, а
   крестик занимает 12..56 — шкала пряталась под ним, процент вставал на него
   сверху. Владелец: «обрезает окно нейростилиста — не видно шкалу загрузки».
   Отступ считается от крестика: 44 px кнопка плюс 12 сверху. */
.ftryon-wait {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Место крестику отдаём ШИРИНОЙ, а не высотой.
     ─────────────────────────────────────────────────────────────────────
     Здесь стоял `margin-top: 46px` — я отодвигал строку ВНИЗ, под кнопку
     закрытия. Сорок шесть пикселей и съели карточку: при 844 px окна
     содержимое выходило на 799 при потолке 760, и низ обрезался. Владелец
     04.09.2026 со снимком: «ты сделал отступ сверху — и карточка не
     помещается».
     Крестик абсолютный и висит справа вверху; чтобы не столкнуться с ним,
     достаточно не заезжать под него по ГОРИЗОНТАЛИ: 44 px кнопки плюс 8 на
     воздух. Высота при этом остаётся у карточки. */
  margin: 0 0 12px;
  padding-right: 52px;
}
.ftryon-wait__p {
  flex: none;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ft-ink);
  min-width: 38px;
}
.ftryon-wait .ftryon-bar { flex: 1 1 auto; height: 6px; margin: 0; }

/* ── Полки подбора образа ───────────────────────────────────────────
   По одной вещи на слот: выбранное обведено, повторное нажатие снимает. */
.ftryon-outfit { margin-top: 14px; }
.ftryon-strip { margin-bottom: 14px; }
.ftryon-strip__h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 7px; }
.ftryon-strip__t { font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ft-ink-3); }
.ftryon-strip__x { background: none; border: 0; cursor: pointer; font-size: 11px;
  color: var(--ft-ink-3); text-decoration: underline; padding: 0; }
.ftryon-strip__row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: none; }
.ftryon-strip__row::-webkit-scrollbar { display: none; }
.ftryon-cell { flex: 0 0 104px; width: 104px; padding: 0 0 4px; border-radius: 12px; cursor: pointer;
  background: #fff; border: 1px solid rgba(0,0,0,.10); overflow: hidden; text-align: left;
  transition: border-color .15s, box-shadow .15s; }
/* Цена под снимком: по одному кадру без цены вещь не выбирают (владелец
   03.09.2026). Тонкая строка, не спорит со снимком и не ломает высоту ряда. */
.ftryon-cell__p {
  display: block;
  padding: 4px 6px 0;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ft-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* На погашенной вещи цена тоже гаснет — она уже на человеке. */
.ftryon-cell--worn .ftryon-cell__p { color: var(--ft-ink-3); }
/* Есть цена — «глазик» поднимается над её строкой.
   Значок стоит слева-внизу поверх карточки, и появившаяся 03.09.2026 цена
   оказалась ровно под ним: на снимке с телефона лупа наезжала на «3 500 ₽». */
.ftryon-cell--priced .ftryon-eye { bottom: 26px; }
.ftryon-cell:hover { border-color: rgba(0,0,0,.28); }
/* Выбранное отмечаем красным — цветом действия на этом сайте. Чёрная рамка
   не отличалась от обычной границы карточки и читалась как «просто рамка». */
.ftryon-cell.is-on { border-color: var(--ft-red); box-shadow: 0 0 0 1px var(--ft-red); }
.ftryon-cell img { display: block; width: 100%; aspect-ratio: 3/4; object-fit: contain; background: #f6f6f7; }
.ftryon-cell__n { display: block; padding: 5px 6px; font-size: 10.5px; line-height: 1.25;
  color: var(--ft-ink-2); max-height: 2.5em; overflow: hidden; }

/* Подбор на экране результата — крупными карточками: их немного, и по ним
   принимают решение. Мелкая сетка на 20 вещей была каталогом, а не выбором.
   Названия убраны: «Футболка игро…» не говорит ни о крое, ни о цвете. */
.ftryon-col--pick .ftryon-cell { flex: 0 0 132px; width: 132px; }
.ftryon-col--pick .ftryon-cell img { aspect-ratio: 3/4; }
@media (max-width: 700px) {
  .ftryon-col--pick .ftryon-cell { flex: 0 0 116px; width: 116px; }
}

/* Подбор одной плиткой: три в ряд. Вбок не листаем — то, что уезжало за
   правый край полки, не видел никто. Вниз листаем: отмеченное человеком
   показывается целиком, сколько бы он ни отметил, и обрезать этот список
   ради ровной сетки нельзя. */
/* Сколько ещё влезет в образ — строка над плиткой. Сказать заранее дешевле,
   чем извиняться после нажатия. */
.ftryon-room {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.4;
  /* ink-3 (#9b9b9b) на 12 px давал контраст 2.78:1 — ниже порога читаемости.
     ink-2 — тот же оттенок, что и в состоянии is-full, 4.8:1. */
  color: var(--ft-ink-2);
}
.ftryon-room.is-full {
  padding: 8px 10px;
  color: var(--ft-ink-2);
  background: var(--ft-soft);
  border-radius: 8px;
  box-shadow: inset 3px 0 0 var(--ft-ink-3);
}

/* Вещь, которая в образ уже не влезет: гасим и не даём нажать. Запрет, о
   котором узнают только нарушив, выглядит сбоем. */
/* Гасим СНИМОК, а не всю карточку: прежнее opacity/grayscale на .ftryon-cell
   гасило заодно текст ярлыка и рабочую кнопку корзины — они остаются нужными
   и на непроходной карточке (разбор 25.08.2026). */
.ftryon-cell.is-locked { cursor: not-allowed; }
.ftryon-cell.is-locked img { opacity: .38; filter: grayscale(1); }
.ftryon-cell__lock {
  /* Ярлык — подпись, а не кнопка. Без этого он перехватывал клик по лупе:
     на узком экране они накладываются. */
  pointer-events: none;
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
  color: #fff;
  background: rgba(45, 45, 45, .82);
  border-radius: 999px;
}

.ftryon-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-height: 64vh;
  max-height: 64dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  /* Отступ по кругу — под кольцо выделения. Без него красная обводка крайних
     карточек срезалась краем прокручиваемого блока. */
  padding: 3px;
  margin: -3px;
}
.ftryon-grid .ftryon-cell { flex: none; width: auto; position: relative; }
/* Снятая с себя вещь: не убираем её из плитки — человек должен видеть, что
   можно надеть обратно, — но видно, что сейчас её на кадре не будет. */
/* Вещь, которая сейчас на человеке, стоит первой и держит красную рамку —
   это точка отсчёта, а не одна из карточек. */
.ftryon-grid .ftryon-cell.is-off { opacity: .5; border-color: var(--ft-line-2); box-shadow: none; }
.ftryon-grid .ftryon-cell.is-off .ftryon-cell__worn { background: var(--ft-ink-3); }
.ftryon-grid .ftryon-cell--worn { cursor: pointer; }
/* Ширину задаёт колонка, а не карточка: иначе фиксированные 132px рвут сетку
   на узком экране и возвращают горизонтальную прокрутку. */
.ftryon-col--pick .ftryon-grid .ftryon-cell { flex: none; width: auto; }

/* Плитка на экране результата: снимок во всю карточку, цена справа внизу.
   ─────────────────────────────────────────────────────────────────────
   Распоряжение владельца 04.09.2026 (со снимком экрана результата): «сделай
   так, чтобы цена была справа внизу, а фото было [на] всю карточку».
   Было: снимок `contain` на сером поле — вертикальное фото оставляло белые
   поля по бокам, — и цена отдельной строкой ПОД ним, слева. Карточка читалась
   как таблица, а не как вещь.
   Правила адресные: узкие полки (`.ftryon-strip__row`) остаются как были —
   там плитка 104 px, и цена поверх неё не поместится. */
.ftryon-grid .ftryon-cell { padding: 0; }
.ftryon-grid .ftryon-cell img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: #f6f6f7;
}
.ftryon-grid .ftryon-cell__p {
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  /* Подложка обязательна: цена ложится на снимок, а он бывает любой. */
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
  font-size: 11px;
  line-height: 1.25;
  color: var(--ft-ink);
}
/* Цена ушла с отдельной строки — «глазику» больше не надо над ней подниматься. */
.ftryon-grid .ftryon-cell--priced .ftryon-eye { bottom: 6px; }
/* Название под снимком на этой плитке не показывается: имя вещи человек
   читает в увеличении по «глазику», а здесь оно отнимало бы место у снимка. */
.ftryon-grid .ftryon-cell__n { display: none; }

/* Два действия над собранным образом — в один ряд: примерить или купить.
   Кнопки равной ширины, ведущая — красная. */
.ftryon-actrow { display: flex; gap: 10px; flex-wrap: wrap; }
.ftryon-actrow .ftryon-btn { flex: 1 1 0; min-width: 0; }

/* Почему кнопка не нажимается. Без объяснения выключенная кнопка читается как
   поломка — человек не видит, что образ просто перегружен. */
.ftryon-note {
  flex: 1 0 100%;
  order: -1;
  font-size: 13px;
  line-height: 1.35;
  color: var(--ft-ink-2);
  background: var(--ft-soft);
  border-radius: 8px;
  padding: 8px 10px;
}

/* Купить примеренную вещь — сразу под кадром, до оценки. */
.ftryon-shot .ftryon-btn--wide { width: 100%; margin-top: 12px; }
.ftryon-btn.is-done { background: var(--ft-ink); border-color: var(--ft-ink); color: #fff; }

/* ── Навигация по кадрам результата ─────────────────────────────── */
.ftryon-rnav { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 8px; }
.ftryon-rnav__b { width: 30px; height: 30px; border-radius: 9px; cursor: pointer;
  background: #fff; border: 1px solid rgba(0,0,0,.12); font-size: 16px; line-height: 1; }
.ftryon-rnav__b:disabled { opacity: .35; cursor: default; }
.ftryon-rnav__c { font-size: 12px; color: var(--ft-ink-3); font-variant-numeric: tabular-nums; }

/* ── Полноэкранный просмотр ─────────────────────────────────────── */
.ftryon-lb { position: fixed; inset: 0; z-index: 2147483647; background: rgba(0,0,0,.92);
  display: flex; align-items: center; justify-content: center; padding: 20px; cursor: zoom-out; }
.ftryon-lb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ftryon-lb__x { position: absolute; top: 16px; right: 18px; width: 40px; height: 40px;
  border-radius: 50%; border: 0; background: rgba(255,255,255,.16); color: #fff;
  font-size: 22px; line-height: 1; cursor: pointer; }

/* Оговорка об ИИ под кадром — только у кадра примерки (.ftryon-lb--ai).
   Просмотр выстроен в строку и по центру: абзац, положенный рядом со снимком,
   становился второй колонкой и уезжал в середину экрана сбоку от кадра
   (жалоба владельца 31.08.2026). Поэтому у этого случая направление колонкой,
   и снимок отдаёт строке свою высоту, а не наезжает на неё. */
.ftryon-lb--ai { flex-direction: column; gap: 12px; }
.ftryon-lb--ai img { max-height: calc(100% - 48px); }
.ftryon-lb__note {
  flex: none;
  max-width: min(92vw, 680px);
  margin: 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .78);
}

/* Обёртка колоды. Стрелок поверх снимка больше нет (Forward, 15.09.2026):
   решение принимают кнопки с надписями под колодой, а снимок остаётся чистым. */
.ftryon-swipe__stage { position: relative; }

/* ── Страница статуса (dev) ─────────────────────────────────────────
   Поэтапный разбор одной примерки: что ушло в модель и что вернулось. */
.ftryon-status__btn { position: absolute; top: 12px; right: 52px; width: 30px; height: 30px;
  border-radius: 50%; border: 1px solid rgba(0,0,0,.12); background: #fff; cursor: pointer;
  font-size: 15px; line-height: 1; color: var(--ft-ink-3); z-index: 5; }
.ftryon-status__btn:hover { color: var(--ft-ink); border-color: rgba(0,0,0,.3); }

.ftryon-st { position: fixed; inset: 0; z-index: 2147483646; background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.ftryon-st__s { position: relative; background: #fff; border-radius: 16px; width: min(860px, 100%);
  max-height: 88vh; overflow-y: auto; padding: 22px 24px 28px; }
.ftryon-st__x { position: absolute; top: 12px; right: 14px; width: 32px; height: 32px;
  border: 0; background: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--ft-ink-3); }
.ftryon-st__h { margin: 0 0 16px; font-size: 18px; font-weight: 600; }
.ftryon-st__step { padding: 14px 0; border-top: 1px solid rgba(0,0,0,.08); }
.ftryon-st__t { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; }
.ftryon-st__n { display: inline-flex; align-items: center; justify-content: center;
  width: 21px; height: 21px; border-radius: 50%; background: var(--ft-ink); color: #fff;
  font-size: 11px; font-weight: 600; flex: none; }
.ftryon-st__note { margin: 6px 0 10px; font-size: 12px; color: var(--ft-ink-3); }
.ftryon-st__empty { margin: 6px 0; font-size: 12px; color: var(--ft-ink-3); font-style: italic; }
.ftryon-st__warn { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: #b3261e;
  background: rgba(179,38,30,.07); border-radius: 8px; padding: 8px 10px; }
.ftryon-st__f { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 8px 0 10px; }
.ftryon-st__k { font-size: 12px; color: var(--ft-ink-3); }
.ftryon-st__v { font-size: 12.5px; color: var(--ft-ink); word-break: break-word; }
.ftryon-st__row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.ftryon-st__c { flex: 0 0 88px; width: 88px; }
.ftryon-st__c img { width: 88px; height: 118px; object-fit: contain; background: #f6f6f7;
  border: 1px solid rgba(0,0,0,.1); border-radius: 9px; cursor: zoom-in; display: block; }
.ftryon-st__cl { display: block; margin-top: 4px; font-size: 10.5px; color: var(--ft-ink-3); text-align: center; }
.ftryon-st__p { margin-top: 10px; font-size: 12px; }
.ftryon-st__p summary { cursor: pointer; color: var(--ft-ink-3); }
.ftryon-st__p pre { margin: 8px 0 0; padding: 10px; background: #f6f6f7; border-radius: 9px;
  font-size: 11px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; max-height: 320px; overflow-y: auto; }

/* ── «Эта вещь и похожие» ───────────────────────────────────────────
   Замена вещи, а не дополнение к ней: подбор образа собирает комплект и
   свой слот исключает, поэтому вторая футболка к футболке живёт здесь. */
.ftryon-same { margin-top: 24px; }
.ftryon-cell--link { cursor: pointer; }
.ftryon-cell.is-current { border-color: var(--ft-ink); cursor: default; }
.ftryon-cell.is-current .ftryon-cell__n { color: var(--ft-ink); font-weight: 600; }

/* ── Иконка корзины на карточке вещи ────────────────────────────────
   Ведёт на карточку товара: на сайте вещь кладётся торговым предложением,
   то есть с конкретным размером, — класть наугад нельзя, приедет не тот. */
.ftryon-cell { position: relative; }
.ftryon-buy {
  position: absolute; top: 6px; right: 6px;
  width: 28px; height: 28px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--ft-red); color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
  transition: background .15s, transform .12s;
}
.ftryon-buy:hover { background: var(--ft-red-ink); transform: scale(1.06); }
.ftryon-buy svg { width: 15px; height: 15px; display: block; }
/* Вещь уехала в корзину — значок ЗЕЛЁНЫЙ.
   ─────────────────────────────────────────────────────────────────────
   Класс `is-done` кнопка получала с самого начала, а правила под него не было:
   визуально не менялось НИЧЕГО. Владелец 04.09.2026: «нажимаешь добавить
   безразмерную вещь — шапку или сумку — и система никак не реагирует; товар
   добавляется, но это непонятно, начинаешь тыкать ещё, думая, что кнопка не
   сработала».
   Тост о добавлении есть, но он живёт три секунды и уходит; отметка на самой
   плитке остаётся и отвечает на вопрос «я это уже брал?» в любой момент.
   Зелёный тот же, что у значка корзины в колоде (`.ftryon-ico.is-done`) —
   владелец на него и сослался: «как это сделано в нейростилисте».
   Наведение и `disabled` зелёный не перебивают: после успеха кнопка остаётся
   выключенной, и общее правило прозрачности сделало бы отметку бледной. */
.ftryon-buy.is-done,
.ftryon-buy.is-done:hover { background: #1a7f37; transform: none; }
.ftryon-buy.is-done[disabled] { opacity: 1; cursor: default; }
/* То же для широкой кнопки «В корзину» на плитке замены: она меняет надпись на
   «В корзине», но цветом оставалась красной — то есть звала нажать снова. */
.ftryon-cell__buy.is-done,
.ftryon-cell__buy.is-done:hover { background: #1a7f37; }

/* ── Плашка «примерка идёт» ─────────────────────────────────────────
   Правый нижний угол. Возврат к свёрнутой примерке: без неё свёрнутый сеанс
   терялся, хотя генерация уже оплачена.

   Слой НИЖЕ всплывающих окон магазина. Здесь стояло 99999 — выше fancybox
   магазина (99992), и наша плашка перекрывала их акционный поп-ап, который
   висит на сайте постоянно. Модалка примерки поверх всего оправдана: её
   открыл человек. Плашка появляется сама и уступает (разбор 26.08.2026). */
.ftryon-pill {
  position: fixed; right: 16px; z-index: 99990;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 0;
  min-width: 210px; max-width: calc(100vw - 32px);
  padding: 12px 16px; overflow: hidden;
  font-family: var(--ft-font, inherit); font-size: 13px; font-weight: 600;
  color: #fff; text-align: left; cursor: pointer;
  background: #1d1d1d; border: 0; border-radius: 999px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
  animation: ftryon-pill-in .22s cubic-bezier(.2, .7, .3, 1);
}
@keyframes ftryon-pill-in { from { opacity: 0; transform: translateY(8px); } }
.ftryon-pill:hover { background: #000; }
/* Полоса прогресса — фоном самой плашки, без отдельного элемента-рамки.
   Скругление слева СВОЁ, а не только у родителя: плашка — это <button>, и
   часть браузеров не обрезает по её border-radius вложенный абсолютный блок.
   Полоса упиралась квадратным углом в круглый край, и слева проступала тёмная
   долька — выглядело как незакрашенный кусок.
   Без opacity: красный поверх тёмного давал грязноватый оттенок вместо
   фирменного. Прозрачность тут ничего не решала — под полосой всё равно
   ничего нет. */
.ftryon-pill__bar {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: var(--ft-red, #ED1C24);
  border-radius: 999px 0 0 999px;
  transition: width .4s linear;
}
/* Дошло до конца — скругляем и справа, иначе на сотне процентов полоса
   срезает круглый край плашки. */
.ftryon-pill__bar.is-full { border-radius: 999px; }
.ftryon-pill__t { position: relative; z-index: 1; white-space: nowrap; }
.ftryon-pill__x {
  position: relative; z-index: 1; flex: 0 0 auto;
  margin-left: 12px; padding: 0 2px;
  font-size: 17px; line-height: 1; opacity: .55;
}
.ftryon-pill__x:hover { opacity: 1; }
@media (max-width: 480px) { .ftryon-pill { left: 16px; right: 16px; justify-content: center; } }

/* ── Отзыв согласия (152-ФЗ ст. 9 п. 5) ───────────────────────
   Право отозвать согласие должно быть под рукой, но это не действие, к
   которому мы подталкиваем: подпись под основной кнопкой, без рамки и
   заливки. Красным становится только на наведении — чтобы было понятно,
   что нажатие необратимо. */
.ftryon-revoke {
  display: block;
  width: 100%;
  margin: 12px 0 0;
  padding: 6px 0;
  font-family: var(--ft-font);
  font-size: 12px;
  line-height: 1.4;
  color: var(--ft-ink-3);
  text-align: center;
  background: none;
  border: 0;
  cursor: pointer;
  transition: color .15s ease;
}
.ftryon-revoke:hover { color: var(--ft-red-ink); }
.ftryon-revoke:focus-visible { outline: 2px solid var(--ft-red); outline-offset: 2px; }

/* ── Примеренная вещь на экране результата ────────────────────
   Стоит первой полкой, перед категориями подбора, и выглядит иначе: это не
   кандидат в образ, а то, ради чего человек сюда пришёл. Раньше её на экране
   не было совсем — кадр с собой, ряды «с чем носить», и ни одного способа
   купить саму вещь. */
.ftryon-strip--base {
  padding: 12px;
  margin-bottom: 14px;
  background: var(--ft-soft);
  border: 1px solid var(--ft-red);
  border-radius: var(--ft-r);
}
.ftryon-strip--base .ftryon-strip__t { color: var(--ft-red); }

/* Карточка вещи здесь во всю ширину и не нажимается: выбирать нечего,
   она уже на вас. */
.ftryon-cell--base {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 0;
  margin-bottom: 10px;
  text-align: left;
  background: none;
  border: 0;
  cursor: default;
}
.ftryon-cell--base img {
  flex: none;
  width: 56px;
  height: 74px;
  object-fit: cover;
  background: #fff;
  border-radius: var(--ft-r-sm);
}
.ftryon-cell--base .ftryon-cell__n {
  font-size: 13px;
  line-height: 1.35;
  color: var(--ft-ink);
  white-space: normal;
}
.ftryon-buy-main { width: 100%; }

/* Подсветка кнопки «В корзину» самого сайта, когда возвращаем к ней человека:
   иначе после закрытия окна непонятно, куда смотреть. */
.ftryon-flash { animation: ftryon-flash 1.6s ease-out; }
@keyframes ftryon-flash {
  0%, 100% { box-shadow: none; }
  20%, 60% { box-shadow: 0 0 0 3px rgba(237, 28, 36, .45); }
}
@media (prefers-reduced-motion: reduce) { .ftryon-flash { animation: none; } }

/* ── Экран результата: кадр и выбор рядом ─────────────────────
   На широком экране примерка вертикальная и занимает его целиком, а всё
   остальное — похожие вещи, категории образа — уезжало за нижний край, и о
   нём просто не узнавали. Теперь кадр слева, выбор справа, и оба видны сразу.
   На узком колонки схлопываются в прежний порядок сверху вниз. */
.ftryon-cols { display: block; }
.ftryon-col--shot { min-width: 0; }
.ftryon-col--pick { min-width: 0; }

/* Кнопка сборки образа всегда на виду: полок много, и в конце списка её
   не находили. */
.ftryon-sticky {
  position: sticky;
  bottom: calc(-32px - env(safe-area-inset-bottom, 0px));
  z-index: 2;
  margin: 10px -24px calc(-32px - env(safe-area-inset-bottom, 0px));
  padding: 12px 24px calc(12px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 22%);
}
.ftryon-sticky:empty { display: none; }

/* Примеренная вещь в ленте «эта вещь и другие» — с явной кнопкой покупки. */
.ftryon-cell__buy {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 7px 8px;
  font: 600 12px/1 var(--ft-font);
  color: #fff;
  background: var(--ft-red);
  border: 0;
  border-radius: var(--ft-r-sm);
  cursor: pointer;
}
.ftryon-cell__buy:hover { background: var(--ft-red-ink); }
.ftryon-cell.is-current { border-color: var(--ft-red); }

@media (min-width: 900px) {
  /* Широким окно становится ТОЛЬКО на экране результата — там две колонки.
     Раньше ширина стояла на самом окне, и экран ожидания растягивался вместе
     с ним: одна колонка на тысячу пикселей, карточка свайпа во весь экран и
     прокрутка там, где её быть не должно.
     Переход плавный: скачок ширины посреди работы читается как сбой. */
  .ftryon-modal--wide { max-width: 1040px; }
  .ftryon-cols {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
  }
  /* Кадр держится на месте, пока справа листают категории. */
  .ftryon-col--shot { position: sticky; top: 0; }
  .ftryon-result { max-height: 58vh; max-height: 58dvh; }
}

/* Плавная смена ширины окна: на результате оно раскрывается под две колонки.
   Скачок посреди работы читается как сбой, поэтому переход, а не прыжок. */
.ftryon-modal { transition: max-width .3s cubic-bezier(.2, .7, .3, 1); }
@media (prefers-reduced-motion: reduce) { .ftryon-modal { transition: none; } }

/* Примеренная вещь в полке своего слоя: она уже на человеке, выбирать нечего. */
.ftryon-cell--worn { cursor: default; border-color: var(--ft-red); }
.ftryon-cell--worn:hover { transform: none; }
.ftryon-cell__worn {
  position: absolute; left: 6px; top: 6px;
  padding: 2px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 600; line-height: 1.4;
  color: #fff; background: var(--ft-red);
}

/* В слое примеренной вещи выбор заменяет её, а не добавляет — подпись рядом
   с названием слоя, потому что во всех остальных полках правило другое. */
.ftryon-strip__hint {
  margin-left: 8px;
  font-size: 11px;
  font-weight: 400;
  color: var(--ft-ink-3);
}

/* ── Знакомство: три шага перед первой примеркой ──────────────
   Нумерация здесь по делу: это настоящая последовательность, а не украшение —
   человек проходит шаги именно в этом порядке. */
.ftryon-intro { margin: 0 0 18px; padding: 0; list-style: none; counter-reset: none; }
.ftryon-intro__i {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--ft-line);
}
.ftryon-intro__i:first-child { border-top: 0; }
.ftryon-intro__n {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  background: var(--ft-red);
  border-radius: 50%;
}
.ftryon-intro__i b { display: block; font-size: 14px; font-weight: 600; color: var(--ft-ink); }
.ftryon-intro__i span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ft-ink-2); }

/* Кнопки на карточке свайпа: «Купить» кладёт в корзину сайта, «Примерить»
   выбирает вещь в образ — генерация пойдёт одна, со всем набранным. */
.ftryon-mini--try { background: var(--ft-red); border-color: var(--ft-red); color: #fff; }
.ftryon-mini--try:hover { background: var(--ft-red-ink); border-color: var(--ft-red-ink); }
.ftryon-mini[disabled] { opacity: .5; cursor: default; }

/* ── Действия на карточке подбора ─────────────────────────────
   Были две крупные красные кнопки во всю ширину: забирали нижнюю треть
   карточки и спорили друг с другом — обе одинаково громкие, хотя решения
   разные. Иконки возвращают вещи её место, а значок читается быстрее слова. */
.ftryon-swipe__acts {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 8px;
}
.ftryon-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  color: #fff;
  background: rgba(20, 20, 20, .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  cursor: pointer;
  transition: background .15s, transform .12s, border-color .15s;
}
.ftryon-ico svg { width: 19px; height: 19px; }
.ftryon-ico:hover { background: rgba(20, 20, 20, .78); transform: translateY(-1px); }
/* Примерка — главное действие этого экрана, поэтому она фирменного цвета. */
.ftryon-ico.is-primary { background: var(--ft-red); border-color: var(--ft-red); }
.ftryon-ico.is-primary:hover { background: var(--ft-red-ink); }
.ftryon-ico.is-done { background: #1a7f37; border-color: #1a7f37; }
.ftryon-ico.is-busy { opacity: .6; }
.ftryon-ico[disabled] { opacity: .4; cursor: default; transform: none; }

/* Размеры спрашиваем здесь же: уводить в карточку ради одного выбора незачем. */
.ftryon-sizes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
.ftryon-sizes__t { font-size: 12px; color: rgba(255, 255, 255, .8); }
.ftryon-sizes__b {
  min-width: 34px;
  padding: 5px 9px;
  font: 600 12px/1 var(--ft-font);
  color: #fff;
  background: rgba(20, 20, 20, .55);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: var(--ft-r-sm);
  cursor: pointer;
}
/* Шторка размера собрана как карточка товара: крупный снимок слева, справа
   название, цена и вопрос. Когда в корзину уходит образ целиком, вопросов
   подряд несколько — по одному названию не понять, о какой вещи речь, а цена
   нужна, чтобы решать, а не вспоминать. */
.ftryon-sheet__head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 4px; }
.ftryon-sheet__img {
  flex: 0 0 132px;
  width: 132px;
  height: 176px;
  object-fit: contain;
  background: var(--ft-soft);
  border: 1px solid var(--ft-line);
  border-radius: var(--ft-r);
}
.ftryon-sheet__info { min-width: 0; padding-top: 2px; }
.ftryon-sheet__head .ftryon-sheet__n {
  margin: 0; text-align: left; font-size: 14px; line-height: 1.35; color: var(--ft-ink);
}
.ftryon-sheet__p {
  margin: 6px 0 0; font-size: 20px; font-weight: 700; color: var(--ft-ink);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.ftryon-sheet__head .ftryon-sheet__t {
  margin: 14px 0 0; text-align: left; font-size: 13px; font-weight: 500; color: var(--ft-ink-2);
}
/* Крестик вместо широкой кнопки отказа: та стояла последней и читалась как
   продолжение выбора, хотя означала обратное. */
.ftryon-sheet__x {
  position: absolute; top: 10px; right: 12px;
  width: 32px; height: 32px; border-radius: 50%;
  border: 0; background: transparent; color: var(--ft-ink-3);
  font-size: 22px; line-height: 1; cursor: pointer;
}
.ftryon-sheet__x:hover { background: var(--ft-soft); color: var(--ft-ink); }
@media (max-width: 480px) {
  .ftryon-sheet__img { flex: 0 0 104px; width: 104px; height: 140px; }
  .ftryon-sheet__p { font-size: 18px; }
}

.ftryon-sizes__b:hover { background: var(--ft-red); border-color: var(--ft-red); }

/* ── Выбор размера ────────────────────────────────────────────
   Прежде размеры вываливались списком прямо на карточку: занимали её целиком
   и наезжали на вещь, ради которой человек сюда пришёл. Теперь отдельный
   слой — на телефоне шторка снизу (до неё дотягивается большой палец), на
   большом экране окно по центру. */
.ftryon-sheet {
  /* Шторка размеров кроет ЭКРАН, а не окно.
     ─────────────────────────────────────────────────────────────────────
     Здесь стояло `position: absolute` — то есть отсчёт от верха окна, а окно
     на телефоне длинное и прокручиваемое. «Образ в корзину» нажимают ВНИЗУ,
     а шторка появлялась вверху, за экраном. Снаружи это выглядит как зависание:
     кнопка встаёт в «Кладём…» и ничего не происходит. Владелец 05.09.2026:
     «ждёшь и ничего не происходит, а оказывается нужно мотануть вверх к началу
     виджета, чтобы выбрать размер — это пользовательски непонятно».
     z-index выше оверлея примерки (100000) и ниже тоста (100010): тост должен
     читаться и поверх шторки. */
  position: fixed;
  inset: 0;
  z-index: 100005;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(18, 18, 18, .5);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .2s ease;
}
.ftryon-sheet.is-on { opacity: 1; }
.ftryon-sheet.is-off { opacity: 0; }

.ftryon-sheet__c {
  position: relative;   /* якорь для крестика */
  width: 100%;
  padding: 10px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-radius: var(--ft-r-lg) var(--ft-r-lg) 0 0;
  transform: translateY(14px);
  transition: transform .22s cubic-bezier(.2, .7, .3, 1);
}
.ftryon-sheet.is-on .ftryon-sheet__c { transform: none; }

/* Полоска-ручка: знак того, что это шторка, а не приклеенная панель. */
.ftryon-sheet__grip {
  display: block;
  width: 38px;
  height: 4px;
  margin: 0 auto 12px;
  background: var(--ft-line-2);
  border-radius: 999px;
}
.ftryon-sheet__t { margin: 0; font-size: 15px; font-weight: 600; color: var(--ft-ink); }
.ftryon-sheet__n { margin: 2px 0 0; font-size: 12.5px; color: var(--ft-ink-2); }

.ftryon-sheet__g {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 8px;
  margin: 14px 0;
}
.ftryon-sheet__b {
  padding: 12px 8px;
  font: 600 14px/1 var(--ft-font);
  color: var(--ft-ink);
  background: #fff;
  border: 1px solid var(--ft-line-2);
  border-radius: var(--ft-r);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.ftryon-sheet__b:hover { color: #fff; background: var(--ft-red); border-color: var(--ft-red); }

@media (min-width: 700px) {
  /* На большом экране шторка снизу неуместна — окно по центру. */
  .ftryon-sheet { align-items: center; }
  .ftryon-sheet__c {
    max-width: 380px;
    padding: 20px;
    border-radius: var(--ft-r-lg);
    transform: scale(.96);
  }
  .ftryon-sheet.is-on .ftryon-sheet__c { transform: none; }
  .ftryon-sheet__grip { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ftryon-sheet, .ftryon-sheet__c { transition: none; }
}

/* ── Короткое сообщение ───────────────────────────────────────
   Исход добавления в корзину раньше жил в `title` кнопки: успех и отказ
   выглядели одинаково — «нажимаю, ничего не происходит». Плашка стоит там,
   куда человек смотрит после нажатия, и уходит сама.

   Живёт вне .ftryon-scope (её вешаем на body, чтобы не зависеть от модалки),
   поэтому палитру задаём здесь же — цвета те же, что у сайта. */
.ftryon-toast {
  --ft-red: #ED1C24;
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 100010;
  max-width: min(92vw, 420px);
  padding: 12px 18px;
  border-radius: 10px;
  background: #1a1a1a;
  color: #fff;
  font: 500 14px/1.35 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
  opacity: 0;
  transform: translate(-50%, 12px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.ftryon-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
/* Отказ держим дольше и красным кантом: его надо прочитать, а не заметить. */
.ftryon-toast.is-err { background: #2d2d2d; border-left: 3px solid var(--ft-red); text-align: left; }

@media (prefers-reduced-motion: reduce) {
  .ftryon-toast { transition: none; }
}

/* ══ Мобильная примерка ═══════════════════════════════════════════════
   Жалоба владельца 18 августа: «много разных непонятных скроллов, пользоваться
   неудобно». Так и было: окно прокручивалось само, внутри него отдельно
   прокручивалась плитка подбора (max-height 64dvh), а поперёк — девять лент по
   горизонтали. Палец попадал то в одно, то в другое, и страница под окном
   иногда уезжала следом.

   Правило, по которому это приведено в порядок (так же сделано в demo-shop):
   на экране ровно ОДИН вертикальный скролл. Всё остальное либо не скроллится
   вовсе, либо листается строго вбок и вертикальный жест отдаёт наверх.
   ═══════════════════════════════════════════════════════════════════════ */

/* Высота по dvh: на телефоне адресная строка то появляется, то уезжает, и
   100% от неё дают то обрезанный низ, то скачок при первом же свайпе. */
.ftryon-overlay { height: 100dvh; }

@media (max-width: 700px) {
  .ftryon-modal {
    height: 100dvh;
    /* Инерция прокрутки как в родных списках iOS: без неё окно листается
       рывками и кажется неживым. */
    -webkit-overflow-scrolling: touch;
    /* Боковые вырезы в горизонтальной ориентации. */
    padding-left: calc(20px + env(safe-area-inset-left, 0px));
    padding-right: calc(20px + env(safe-area-inset-right, 0px));
  }

  /* ── Ни одного вложенного вертикального скролла ──
     Плитка подбора росла до 64dvh и дальше прокручивалась внутри себя. Это и
     был главный «непонятный скролл»: два вертикальных слоя друг в друге, и
     угадать, какой сейчас поедет, невозможно. Пусть растёт сколько нужно —
     прокручивает её общее окно. */
  .ftryon-grid {
    max-height: none;
    overflow: visible;
  }
  /* Кадр результата тоже не должен заводить свою прокрутку. */
  .ftryon-result { max-height: none; }

  /* ── Ленты листаются только вбок ──
     touch-action: pan-x — ключевая строка. Без неё вертикальный жест, начатый
     на ленте, «залипал» в ней: человек тянул вверх, а не двигалось ничего.
     Теперь лента забирает себе только горизонтальные жесты, вертикальные
     отдаёт окну.
     overscroll-behavior-x: contain — долистав ленту до края, не начинаем
     листать то, что за ней (в Chrome это уводило страницу назад по истории). */
  .ftryon-thumbs,
  .ftryon-saved__row,
  .ftryon-item__thumbs,
  .ftryon-strip__row,
  .ftryon-st__row {
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    /* Карточка не липнет к краю окна при остановке — видно, что лента длиннее. */
    scroll-padding-inline: 4px;
  }
  .ftryon-thumbs::-webkit-scrollbar,
  .ftryon-saved__row::-webkit-scrollbar,
  .ftryon-st__row::-webkit-scrollbar { display: none; }

  .ftryon-thumbs > *,
  .ftryon-saved__row > *,
  .ftryon-item__thumbs > *,
  .ftryon-strip__row > * {
    scroll-snap-align: start;
    /* Карточки в ленте не сжимаются: иначе flex ужимает их до нечитаемых
       полосок, и лента перестаёт быть лентой. */
    flex: none;
  }

  /* ── Главное действие всегда под рукой ──
     Полоса с кнопкой уже липкая, но полупрозрачный градиент поверх фотографий
     читался плохо, а кнопка местами была ниже комфортной высоты нажатия. */
  .ftryon-sticky {
    background: #fff;
    box-shadow: 0 -8px 16px -12px rgba(0, 0, 0, .35);
    /* Полоса выходит за края окна ровно на ширину его отступов. В основном
       правиле это 24 px, а здесь окно сжато до 20 px плюс боковой вырез —
       лишние 4 px с каждой стороны давали горизонтальную прокрутку
       (разбор 25.08.2026). Считаем тем же выражением, что и отступ окна. */
    margin-left: calc(-20px - env(safe-area-inset-left, 0px));
    margin-right: calc(-20px - env(safe-area-inset-right, 0px));
    padding-left: calc(20px + env(safe-area-inset-left, 0px));
    padding-right: calc(20px + env(safe-area-inset-right, 0px));
  }
  .ftryon-sticky button,
  .ftryon-sticky .ftryon-btn { min-height: 48px; }

  /* Пальцем в цель 32 пикселя не попасть — 44 это нижняя граница, ниже
     которой промахи становятся правилом. */
  .ftryon-close { min-width: 44px; min-height: 44px; }

  /* Служебные окна поверх примерки — тоже на весь экран, со своим единственным
     скроллом, а не «карточка в 88vh посреди телефона». */
  .ftryon-st__s {
    width: 100%;
    max-height: 100dvh;
    height: 100dvh;
    border-radius: 0;
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  }
}

/* Точность нажатия важнее анимаций: на слабых телефонах прокрутка со
   множеством теней и размытий заметно дёргается. */
@media (max-width: 700px) and (prefers-reduced-motion: no-preference) {
  .ftryon-overlay { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
}

/* Невысокий экран: карточка 3:4 во всю ширину не помещается вместе со
   счётчиком и кнопками — на iPhone SE (667 по высоте) колода занимала 520
   пикселей, и «Хочу»/«Нет» уезжали под сгиб. Человек тянул вверх, чтобы их
   достать, — вот и ещё одна прокрутка на ровном месте.

   Отвязываем ширину от экрана и считаем её от высоты: карточка остаётся 3:4,
   просто становится уже и встаёт по центру. Полноэкранный вариант с полями
   в край остаётся там, где он помещается. */
@media (max-width: 700px) and (max-height: 780px) {
  .ftryon-swipe {
    width: min(calc(100% + 48px), calc(52dvh * 3 / 4));
    max-height: 52dvh;
    margin-left: auto;
    margin-right: auto;
  }
  /* Карточка больше не в край — возвращаем ей скруглённые углы. */
  .ftryon-swipe .ftryon-swipe__card { border-radius: var(--ft-r-lg); }
  /* Кнопки под колодой прижимаем ближе: каждый лишний отступ здесь — риск
     снова выдавить их за экран. */
  .ftryon-swipe__ctrl { gap: 14px; }
}

/* ══ Экран ожидания: колода в размер окна, без прокрутки ══════════════
   Жалоба владельца 18 августа: «при свайпах должен отсутствовать вертикальный
   скролл на любом типе устройств». Так и было: под колодой шла лента замен, а
   сама карточка 3:4 во всю ширину не оставляла места кнопкам — и всё это
   приходилось доставать прокруткой. Ленту замен перенесли на экран результата,
   а сам экран ожидания теперь колонка фиксированной высоты: полоса прогресса,
   колода, кнопки — и ничего за краем.
   ═══════════════════════════════════════════════════════════════════════ */
.ftryon-modal--fit {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* На телефоне у окна обязан быть КОНЕЦ.
   ─────────────────────────────────────────────────────────────────────
   `overflow: hidden` задумывался как «экран ожидания не прокручивается»: всё
   должно помещаться. На широком окне так и есть, а на телефоне колода занимает
   77.7dvh (размер выбрал владелец), и остаток колонки за нижний край уходит —
   молча, потому что скрыт. Владелец 05.09.2026: «нейростилист при первой
   примерке сильно растянут вниз — границ не видно» и «у виджета нет конца:
   сверху есть граница, а снизу нет».
   Прокрутка возвращает нижнюю границу, не трогая размер карточки. Жест колоды
   от этого не страдает: у карточки `touch-action: pan-y` — горизонтальное она
   забирает себе, вертикальное отдаёт окну. */
@media (max-width: 480px) {
  .ftryon-modal--fit { overflow-y: auto; }
}
/* Колода на экране ожидания держит СВОЮ высоту, а не ждёт остатка колонки.
   ─────────────────────────────────────────────────────────────────────
   Здесь стояло `flex: 1 1 auto; min-height: 0; aspect-ratio: auto` — расчёт на
   то, что колонка фиксированной высоты отдаст колоде всё свободное место. Оба
   допущения оказались неверны:

   1. Колода ПЕРЕСТАЛА быть прямым потомком окна: между ними появилась обёртка
      `.ftryon-swipe__stage` со стрелками, и она не flex-контейнер. Значит
      `flex: 1 1 auto` не действует вовсе.
   2. На широком экране окно имеет ВЫСОТУ ПО СОДЕРЖИМОМУ (`height: auto`,
      `max-height: 90dvh`). Отдавать остаток колонки нечего — его нет.

   А снятые `aspect-ratio` и `max-height` остались в силе. Итог: высота ноль.
   Карточка честно собиралась и лежала в дереве — её просто негде было увидеть.
   След с живого сайта 31.08.2026: `deck:new 23 > deck:render l=23 i=0 >
   deck:card`, при этом `cards=1, h=0`. Владелец пять раз сообщал «нет
   рекомендаций», и всё это время подбор работал.

   Поэтому размер задаём сами, и нижняя граница обязательна — без неё низкое
   окно снова схлопнет колоду. */
.ftryon-modal--fit .ftryon-swipe {
  flex: 0 0 auto;
  /* Кадр колоды — 9:16, по ширине содержимого окна.
     ─────────────────────────────────────────────────────────────────────
     Размеры сняты ЗАМЕРОМ со снимка владельца (31.08.2026, «сделай как тут»):
     окно 66..1185 px, карточка 87..1164 — то есть по 21 px поля с каждой
     стороны, ровно отступ содержимого. Карточка НЕ встык к краям, углы
     скруглены. Мои прежние попытки промахивались по обе стороны: сперва узкая
     по центру, потом встык к краям.

     Высоту считает пропорция, потолка у неё НЕТ: потолок срезал высоту, и
     9:16 превращалось в почти квадрат — отсюда «фото не вмещается». Низ на
     широком экране достаётся прокруткой самого окна (max-height: 90dvh,
     overflow-y: auto). */
  /* Ведёт ВЫСОТА, ширину считает пропорция.
     ─────────────────────────────────────────────────────────────────────
     Обратный порядок (ширина 100%, высота от пропорции) при 9:16 даёт карточку
     1030 → 1831 px: почти вдвое выше окна. Низ уходит за край, а `contain`
     добавляет серую полосу сверху — ровно то, что владелец увидел 31.08.2026.
     Широкая карточка и полностью видимый кадр 9:16 несовместимы: это
     геометрия, а не настройка. Выбрано «видно целиком».
     Ширина при 877 px окна выходит около 370 — привычный вертикальный кадр. */
  /* Кадр помещается по ВЫСОТЕ и повторяет пропорцию самой фотографии.
     ─────────────────────────────────────────────────────────────────────
     Никакой заданной пропорции: любая чужая (3:4, 9:16) означает поля сверху
     и снизу либо обрезку. Владелец 31.08.2026: «фото должно помещаться всегда
     и быть без рамок, и помещаться в высоту». Значит высоту задаём мы, а
     пропорцию — сам снимок: её проставляет колода, когда кадр загрузился
     (`deck.style.aspectRatio`). Здесь только значение ДО загрузки, чтобы
     карточка не схлопнулась в ноль. */
  /* +5% к прежним 74dvh / 720px по слову владельца 04.09.2026.
     ─────────────────────────────────────────────────────────────────────
     Перед этим я сжал колоду на телефоне до 64dvh, чтобы окно помещалось
     целиком, — и сломал свайпер: «верни как было и просто немного увеличь
     высоту карточки». Место под подпись даёт не колода: строку ожидания я
     увёл из-под крестика отдельной правкой, и нижний край перестал резаться
     без всякого сжатия. */
  height: min(77.7dvh, 756px);
  aspect-ratio: 3 / 4;
  width: auto;
  min-width: 0;
  max-width: 100%;
  max-height: none;
  min-height: 240px;
  margin: 0 auto 12px;
}
/* Обёртка колоды собственного размера не имеет — она обнимает колоду. */
.ftryon-modal--fit .ftryon-swipe__stage {
  flex: 0 0 auto;
  min-height: 0;
}
/* Полоса, счётчик и кнопки — по своему размеру, их не сжимаем. */
.ftryon-modal--fit > .ftryon-wait,
.ftryon-modal--fit > .ftryon-bar,
.ftryon-modal--fit > .ftryon-bar__p,
.ftryon-modal--fit .ftryon-swipe__ctrl,
.ftryon-modal--fit .ftryon-swipe__count,
.ftryon-modal--fit > .ftryon-by { flex: none; }
/* Подпись о технологии дописывается наблюдателем последней — прижимаем её
   к низу, чтобы она не отъедала место у колоды. */
.ftryon-modal--fit > .ftryon-by { margin-top: auto; padding-top: 8px; }

/* ══ Колода + кнопки — в высоту окна ══════════════════════════════════
   С 28.09.2026 инструкция магазина лежит на самой карточке (см.
   .ftryon-swipe__hint) и места в колонке не занимает; 23.09 она стояла над
   колодой. Под колодой кнопки
   «Пропустить» / «Добавить» (Forward, 15.09.2026). Колода держала свою высоту
   min(77.7dvh, 756px), и вместе с новыми блоками кнопки уезжали за нижний
   край: на iPhone SE — на 872 px при экране 667, на ноутбуке 1366×768 — на
   885 px. Замер стенда. А правило владельца от 18.08.2026 — «при свайпах не
   должно быть вертикального скролла».

   Поэтому колода теперь — ОСТАТОК колонки: окно на экране ожидания получает
   явную высоту, кнопки берут своё, карточка — всё, что осталось, и
   не больше прежних 756 px. Высота окна задаётся явно именно здесь: без неё
   остатка нет, и колода схлопывается в ноль (разбор 31.08.2026 выше). Нижняя
   граница min-height у колоды остаётся той же страховкой. */
.ftryon-modal--fit { height: 100%; }
@media (min-width: 700px), (max-width: 480px) {
  .ftryon-modal--fit { height: 90vh; height: 90dvh; }
}
.ftryon-modal--fit > .ftryon-reco {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-top: 12px;
}
.ftryon-modal--fit .ftryon-swipe__stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.ftryon-modal--fit .ftryon-swipe {
  height: 100%;
  max-height: 756px;
  margin: 0 auto;
}
/* Отступ — у кнопок, а не у колоды: нижнее поле колоды гасится внутри
   обёртки высотой 100%, и кнопки вставали к карточке вплотную. */
.ftryon-modal--fit .ftryon-swipe__ctrl { margin-top: 10px; }
/* Телефон: инструкция длинная, а карточка узкая — плотнее, чтобы закрывать
   меньше вещи. */
@media (max-width: 480px) {
  .ftryon-swipe__hint { padding: 7px 32px 7px 9px; font-size: 11px; line-height: 1.35; }
  .ftryon-swipe__hint-h { font-size: 13px; margin-bottom: 3px; }
  .ftryon-modal--fit > .ftryon-reco { margin-top: 8px; }
}


/* ══ Камера: съёмка в полный рост прямо в окне ═══════════════════════
   Кнопка «снять камерой» раньше открывала выбор файла — атрибут `capture`
   работает только на телефоне, а на компьютере браузер его игнорирует. И даже
   на телефоне в руке выходит селфи, а нужен полный рост. Поэтому снимаем сами
   и даём отойти: отсчёт до десяти секунд (владелец 31.08.2026). */
.ftryon-cam {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 56dvh;
  margin: 0 0 12px;
  overflow: hidden;
  border-radius: var(--ft-r-lg);
  background: #111;
}
.ftryon-cam__v {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Зеркалим: человек видит себя как в зеркале, иначе движения путаются.
     На сам кадр это не влияет — он снимается с потока, а не с экрана. */
  transform: scaleX(-1);
}
/* Обратный отсчёт — крупно поверх кадра: его должно быть видно с трёх метров,
   иначе таймер бесполезен ровно там, ради чего он и заведён. */
.ftryon-cam__count {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(64px, 22vw, 160px);
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .55);
  background: rgba(0, 0, 0, .18);
  pointer-events: none;
}
.ftryon-cam__delays {
  display: flex;
  gap: 8px;
  margin: 0 0 14px;
}
/* Переключатель камеры: тумблер, а не выбор из трёх — поэтому отдельной
   строкой и без заливки. Полный рост на телефоне снимает кто-то другой, и ему
   нужна задняя камера (владелец 05.09.2026). */
.ftryon-cam__swap {
  display: block;
  width: 100%;
  margin: 8px 0 0;
  padding: 9px 6px;
  border: 1px solid rgba(10, 10, 10, .12);
  border-radius: var(--ft-r-sm, 10px);
  background: #fff;
  font: inherit;
  font-size: 13px;
  color: var(--ft-ink-2);
  cursor: pointer;
}
.ftryon-cam__swap:hover { color: var(--ft-ink); border-color: rgba(10, 10, 10, .28); }
.ftryon-cam__swap[disabled] { opacity: .5; cursor: default; }

.ftryon-cam__d {
  flex: 1 1 0;
  padding: 9px 6px;
  border: 1px solid rgba(10, 10, 10, .12);
  border-radius: var(--ft-r-sm, 10px);
  background: #fff;
  font: inherit;
  font-size: 13px;
  color: var(--ft-ink);
  cursor: pointer;
}
.ftryon-cam__d.is-on {
  border-color: var(--ft-accent, #e11d2e);
  background: rgba(225, 29, 46, .06);
  font-weight: 600;
}

/* Тестовый режим примерки (04.11.2026): строка на экранах до генерации.
   Мягкая плашка, а не красная ошибка — это пояснение, а не запрет. */
.ftryon-test-note {
  margin: 0 0 14px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--ft-soft);
  font-size: 12px;
  line-height: 1.45;
  color: var(--ft-ink-2);
}

/* Демоверсия (владелец 05.11.2026): оговорку о тестовом режиме под кадром и
   в шагах не показываем, вместо неё — пометка на самой кнопке «Примерить на
   себя». Сделано стилем, без правки скрипта. */
.ftryon-test-note { display: none !important; }
/* Под кадром примерки — короткая оговорка про ИИ без слов о тестовом режиме
   (владелец 05.11.2026). Текст скрипта прячем, свой ставим стилем. */
.ftryon-ai-note,
.ftryon-lb__note { font-size: 0 !important; }
.ftryon-ai-note::before,
.ftryon-lb__note::before {
  content: 'Изображения генерируются с помощью ИИ — возможны неточности. Перед покупкой ориентируйтесь на фото товара в карточке.';
  font-size: 12px;
}
.ftryon-launch::after {
  content: 'демоверсия';
  flex: none;
  padding: 1px 5px;
  font-size: 9px;
  line-height: 1.4;
  letter-spacing: .03em;
  border: 1px solid rgba(255,255,255,.7);
  opacity: .9;
}