/* Start:/bitrix/templates/lens4u/new_header/ot_breadcrumbs.css?17911400554441*/
/* ============================================================
   OpticTrend — СТАНДАРТ хлебных крошек (один в один как в карточке товара / PDP).
   Грузится на ВСЕХ страницах (с 04.10.2026; header.php). Эталон стиля — pdp.css.
   Крошки: серый фон #f3f3f3 на всю ширину, контейнер 1400 + поля 32px, системный шрифт 12.5px,
   цвет #6b6b6b, разделитель «·». Селектор по [aria-label="Хлебные крошки"] → только нав крошек.
   ============================================================ */
nav.visible-lg.extra-padding[aria-label="Хлебные крошки"] {
  max-width: none; margin: 0; padding: 14px 0 0;
  background: #f3f3f3;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}
/* 04.10.2026: файл грузится на ВСЕХ страницах. Цвет полосы: начальный — серый или прозрачный (body.ot-bc-plain, ставит header.php),
   итоговый — скрипт в footer.php (цвет того, что лежит сразу под полосой). */
body.ot-bc-plain nav.visible-lg.extra-padding[aria-label="Хлебные крошки"] { background: transparent; }
nav.visible-lg.extra-padding[aria-label="Хлебные крошки"] .breadcrumbs {
  max-width: 1400px; margin: 0 auto; padding: 0 32px;
  font-size: 12.5px;
}
nav.visible-lg.extra-padding[aria-label="Хлебные крошки"] .breadcrumbs__item,
nav.visible-lg.extra-padding[aria-label="Хлебные крошки"] .breadcrumbs__link { color: #6b6b6b; font-weight: 400; }
nav.visible-lg.extra-padding[aria-label="Хлебные крошки"] .breadcrumbs__link:hover { color: #1a1a1a; }
nav.visible-lg.extra-padding[aria-label="Хлебные крошки"] .breadcrumbs__link:after {
  content: "·"; top: 0; padding: 0 7px; color: #b0b0b0; font-weight: 400;
}

/* Мобайл/планшет (<1280px): крошки скрыты классом .visible-lg — показываем тонкой строкой (как в PDP) */
@media (max-width: 1279px) {
  nav.visible-lg.extra-padding[aria-label="Хлебные крошки"] {
    display: block !important; min-width: 0; padding-left: 0; padding-right: 0;
  }
  nav.visible-lg.extra-padding[aria-label="Хлебные крошки"] .breadcrumbs {
    margin: 8px auto; padding: 0 16px; font-size: 12px; line-height: 1.3;
    white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  nav.visible-lg.extra-padding[aria-label="Хлебные крошки"] .breadcrumbs::-webkit-scrollbar { display: none; }
  nav.visible-lg.extra-padding[aria-label="Хлебные крошки"] .breadcrumbs { scrollbar-width: none; }
}

/* На ТЕЛЕФОНЕ (≤767px) крошки = только родительский раздел как «‹ …»-ссылка назад (решение заказчика).
   Полный путь остаётся в разметке (SEO). Перебивает scroll-режим выше и стиль pdp.css (выше специфичность). */
@media (max-width: 767px) {
  nav.visible-lg.extra-padding[aria-label="Хлебные крошки"] .breadcrumbs { overflow: visible; white-space: normal; margin: 8px auto; }
  nav.visible-lg.extra-padding[aria-label="Хлебные крошки"] .breadcrumbs__item { display: none !important; }
  nav.visible-lg.extra-padding[aria-label="Хлебные крошки"] .breadcrumbs__item:nth-last-child(2) { display: inline-flex !important; align-items: center; max-width: 100%; }
  nav.visible-lg.extra-padding[aria-label="Хлебные крошки"] .breadcrumbs__item:nth-last-child(2) .breadcrumbs__link {
    font-size: 13px !important; color: #1a1a1a !important; font-weight: 500;
    max-width: 78vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  nav.visible-lg.extra-padding[aria-label="Хлебные крошки"] .breadcrumbs__item:nth-last-child(2) .breadcrumbs__link:after { content: none !important; padding: 0 !important; }
  nav.visible-lg.extra-padding[aria-label="Хлебные крошки"] .breadcrumbs__item:nth-last-child(2) .breadcrumbs__link:before { content: "‹"; margin-right: 7px; color: #6b6b6b; font-size: 16px; font-weight: 400; }
}

/* End */


/* Start:/bitrix/templates/lens4u/tryon.css?178927781436943*/
/* ============================================================
   Раздел «Примерено» (/personal/tryon/)
   Все правила изолированы под .ot-tryon-page, переменные — локальные,
   чтобы не конфликтовать со стилями сайта. Из прототипа tryon_landing.html.
   ============================================================ */
.ot-tryon-page {
  --tt-bg: #f3f3f3;
  --tt-surface: #ffffff;
  --tt-text: #1a1a1a;
  --tt-text-muted: #6b6b6b;
  --tt-text-soft: #8a8a8a;
  --tt-border: #e5e5e5;
  --tt-accent: #1c3d6e;
  --tt-accent-bg: #eef4ff;
  --tt-sale: #c63131;
  --tt-sale-bg: #fde8e8;
  color: var(--tt-text);
  font-size: 15px;
  line-height: 1.5;
}
.ot-tryon-page *, .ot-tryon-page *::before, .ot-tryon-page *::after { box-sizing: border-box; }
.ot-tryon-page a { color: inherit; text-decoration: none; }

/* Прячем шаблонный <h1 class="title">Примерено</h1> — у нас свой фирменный заголовок раздела.
   Правило действует только на этой странице (файл грузится только тут). */
.main h1.title { display: none; }

/* Контент центрируем по тому же контейнеру 1400, что и крошки PDP (ot_breadcrumbs.css → .breadcrumbs max-width:1400).
   padding:0 — боковые отступы даёт контейнер шаблона (.container-fluid.extra-padding), двойного нет. */
.ot-tryon-page .tryon-wrap { max-width: 1400px; margin: 0 auto; padding: 0; }

/* Фон страницы как в прототипе (--bg: #f3f3f3) — чтобы белые карточки выделялись.
   Правила действуют только на этой странице (файл грузится только тут). */
body, .main { background: #f3f3f3; }
.ot-tryon-page { padding-bottom: 32px; }

/* Breadcrumbs */
.ot-tryon-page .tryon-crumbs {
  padding: 14px 0 4px; font-size: 12.5px; color: var(--tt-text-muted);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.ot-tryon-page .tryon-crumbs a { color: var(--tt-text-muted); }
.ot-tryon-page .tryon-crumbs a:hover { color: var(--tt-text); text-decoration: underline; }
.ot-tryon-page .tryon-crumbs .sep { color: var(--tt-text-soft); }
.ot-tryon-page .tryon-crumbs .current { color: var(--tt-text); }

/* PAGE HEAD */
.ot-tryon-page .tryon-head {
  padding: 20px 0 24px; display: flex; align-items: flex-end;
  justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.ot-tryon-page .tryon-head h1 {
  font-size: 28px; font-weight: 700; margin: 0; letter-spacing: -0.5px;
  line-height: 1.15; display: flex; align-items: center; gap: 12px;
}
.ot-tryon-page .tryon-head h1 svg { width: 28px; height: 28px; color: var(--tt-accent); }
.ot-tryon-page .tryon-head .meta { color: var(--tt-text-muted); font-size: 14px; margin-top: 6px; }
.ot-tryon-page .tryon-head .meta strong { color: var(--tt-text); font-weight: 600; }
.ot-tryon-page .tryon-head .actions { display: flex; gap: 10px; }
.ot-tryon-page .tryon-head .btn-secondary {
  background: #fff; border: 1px solid var(--tt-border); color: var(--tt-text);
  padding: 9px 18px; border-radius: 22px; font-family: inherit; font-size: 13px;
  cursor: pointer; transition: border-color 0.1s;
}
.ot-tryon-page .tryon-head .btn-secondary:hover { border-color: var(--tt-text); }
.ot-tryon-page .tryon-head .btn-primary {
  background: #1a1a1a; border: 1px solid #1a1a1a; color: #fff; padding: 9px 18px;
  border-radius: 22px; font-family: inherit; font-size: 13px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
}
.ot-tryon-page .tryon-head .btn-primary:hover { background: #000; }
.ot-tryon-page .tryon-head .btn-primary svg { width: 14px; height: 14px; }

/* FILTER STRIP */
.ot-tryon-page .filter-strip {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 18px; flex-wrap: wrap;
}
.ot-tryon-page .filter-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ot-tryon-page .filter-chip {
  padding: 7px 14px; background: #fff; border: 1px solid var(--tt-border);
  border-radius: 22px; font-size: 13px; color: var(--tt-text); cursor: pointer;
  font-family: inherit; display: inline-flex; align-items: center; gap: 6px;
  transition: background 0.1s, border-color 0.1s;
}
.ot-tryon-page .filter-chip:hover { border-color: var(--tt-text); }
.ot-tryon-page .filter-chip.active { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.ot-tryon-page .filter-chip .count { font-size: 11px; opacity: 0.7; }
.ot-tryon-page .sort-select {
  background: #fff; border: 1px solid var(--tt-border); border-radius: 22px;
  padding: 8px 32px 8px 14px; font-size: 13px; cursor: pointer; font-family: inherit;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 13px;
}

/* GRID + CARD */
.ot-tryon-page .tryon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.ot-tryon-page .tryon-card {
  background: #fff; border-radius: 12px; overflow: hidden; position: relative;
  transition: transform 0.2s, box-shadow 0.2s; cursor: pointer;
}
.ot-tryon-page .tryon-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,0.06); }
.ot-tryon-page .tryon-card.selected { box-shadow: 0 0 0 2px var(--tt-accent), 0 10px 24px rgba(28,61,110,0.15); }

.ot-tryon-page .tryon-photo {
  position: relative; aspect-ratio: 1/1;
  background: linear-gradient(135deg, #f0f0f0, #e8e8e8); overflow: hidden;
}
.ot-tryon-page .tryon-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ot-tryon-page .tryon-photo.photo-missing img { display: none; }
.ot-tryon-page .tryon-photo-placeholder {
  position: absolute; inset: 0; display: none; flex-direction: column;
  align-items: center; justify-content: center; color: var(--tt-text-soft);
  background: linear-gradient(135deg, #eee, #ddd);
}
.ot-tryon-page .tryon-photo.photo-missing .tryon-photo-placeholder,
.ot-tryon-page .tryon-photo:not(:has(img)) .tryon-photo-placeholder { display: flex; }
.ot-tryon-page .tryon-photo-placeholder svg { width: 48px; height: 48px; opacity: 0.4; margin-bottom: 8px; }
.ot-tryon-page .tryon-photo-placeholder small { font-size: 11px; }

.ot-tryon-page .you-badge {
  position: absolute; top: 12px; left: 12px; background: rgba(26,26,26,0.85);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff;
  font-size: 11px; font-weight: 500; padding: 5px 10px; border-radius: 12px;
  display: inline-flex; align-items: center; gap: 4px; z-index: 2;
}
.ot-tryon-page .you-badge svg { width: 11px; height: 11px; }

.ot-tryon-page .select-check {
  position: absolute; top: 12px; right: 12px; width: 28px; height: 28px;
  background: rgba(255,255,255,0.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1.5px solid #fff; border-radius: 50%; cursor: pointer; display: flex;
  align-items: center; justify-content: center; z-index: 3; opacity: 0; transition: opacity 0.15s;
}
.ot-tryon-page .tryon-card:hover .select-check { opacity: 1; }
.ot-tryon-page .select-check.checked { opacity: 1; background: var(--tt-accent); border-color: var(--tt-accent); }
.ot-tryon-page .select-check svg { width: 14px; height: 14px; color: var(--tt-text); opacity: 0; transition: opacity 0.1s; }
.ot-tryon-page .select-check.checked svg { color: #fff; opacity: 1; }

.ot-tryon-page .remove-btn {
  position: absolute; bottom: 12px; right: 12px; width: 32px; height: 32px;
  background: rgba(255,255,255,0.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center;
  justify-content: center; color: var(--tt-text); opacity: 0; transition: opacity 0.15s, background 0.1s; z-index: 3;
}
.ot-tryon-page .tryon-card:hover .remove-btn { opacity: 1; }
.ot-tryon-page .remove-btn:hover { background: #fff; color: var(--tt-sale); }
.ot-tryon-page .remove-btn svg { width: 14px; height: 14px; }

.ot-tryon-page .product-thumb {
  position: absolute; bottom: 12px; left: 12px; width: 64px; height: 48px;
  background: rgba(255,255,255,0.95); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-radius: 8px; padding: 4px; z-index: 2; box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.ot-tryon-page .product-thumb img { width: 100%; height: 100%; object-fit: contain; }

.ot-tryon-page .tryon-info { padding: 14px 16px 16px; position: relative; }
.ot-tryon-page .tryon-brand { font-size: 11px; color: var(--tt-text-soft); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; font-weight: 500; }
.ot-tryon-page .tryon-name {
  font-size: 14px; font-weight: 600; color: var(--tt-text); margin: 0 0 6px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 36px;
}
.ot-tryon-page .tryon-meta { font-size: 11.5px; color: var(--tt-text-soft); margin-bottom: 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ot-tryon-page .tryon-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--tt-text-soft); flex-shrink: 0; }
.ot-tryon-page .tryon-price-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.ot-tryon-page .price-current { font-size: 16px; font-weight: 700; color: var(--tt-text); }
.ot-tryon-page .price-old { font-size: 12px; color: var(--tt-text-soft); text-decoration: line-through; }
.ot-tryon-page .price-discount { background: var(--tt-sale-bg); color: var(--tt-sale); font-size: 10px; font-weight: 600; padding: 2px 5px; border-radius: 4px; margin-left: auto; }

.ot-tryon-page .tryon-actions { display: flex; gap: 6px; }
.ot-tryon-page .btn-add-cart {
  flex: 1; height: 38px; background: #1a1a1a; color: #fff; border: 1px solid #1a1a1a;
  border-radius: 8px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: background 0.1s;
}
.ot-tryon-page .btn-add-cart:hover { background: #000; }
/* «Подобрать похожие» — та же кнопка, но ссылкой (распроданная карточка) */
.ot-tryon-page a.btn-similar { text-decoration: none; }
.ot-tryon-page a.btn-similar:hover { text-decoration: none; color: #fff; }
.ot-tryon-page .btn-add-cart svg { width: 14px; height: 14px; }
.ot-tryon-page .btn-retry {
  width: 38px; height: 38px; background: var(--tt-accent-bg); color: var(--tt-accent);
  border: 1px solid var(--tt-accent); border-radius: 8px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: background 0.1s;
}
.ot-tryon-page .btn-retry:hover { background: #dde8f7; }
.ot-tryon-page .btn-retry svg { width: 16px; height: 16px; }

.ot-tryon-page .unavailable-overlay {
  background: #f0f0f0; color: var(--tt-text-muted); border-radius: 8px;
  padding: 11px 12px; font-size: 12.5px; text-align: center; font-weight: 500;
}
.ot-tryon-page .tryon-card.is-unavailable .tryon-photo img { opacity: 0.6; }

.ot-tryon-page .tryon-when { font-size: 11px; color: var(--tt-text-soft); margin-top: 8px; display: flex; justify-content: space-between; align-items: center; }
.ot-tryon-page .tryon-when a { color: var(--tt-accent); font-weight: 500; }
.ot-tryon-page .tryon-when a:hover { text-decoration: underline; }

/* SECTION TITLES */
.ot-tryon-page .section-title { font-size: 13px; font-weight: 600; color: var(--tt-text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin: 24px 0 12px; }
.ot-tryon-page .section-title:first-of-type { margin-top: 0; }

/* INFO BANNER */
.ot-tryon-page .info-banner { background: var(--tt-accent-bg); border: 1px solid #cdd9ec; border-radius: 12px; padding: 16px 20px; margin-bottom: 24px; display: flex; gap: 14px; align-items: center; }
.ot-tryon-page .info-banner-icon { width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 1px solid #cdd9ec; display: flex; align-items: center; justify-content: center; color: var(--tt-accent); flex-shrink: 0; }
.ot-tryon-page .info-banner-icon svg { width: 18px; height: 18px; }
.ot-tryon-page .info-banner-text { flex: 1; font-size: 13.5px; color: var(--tt-text); line-height: 1.5; }
.ot-tryon-page .info-banner-text strong { color: var(--tt-accent); }
.ot-tryon-page .info-banner-close { background: none; border: none; cursor: pointer; padding: 4px; color: var(--tt-text-soft); }
.ot-tryon-page .info-banner-close svg { width: 16px; height: 16px; }

/* COMPARE BAR */
.ot-tryon-page .compare-bar {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(180%);
  background: #1a1a1a; color: #fff; padding: 12px 16px 12px 20px; border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25); display: flex; align-items: center; gap: 14px;
  transition: transform 0.25s ease-out; z-index: 1000; min-width: 320px;
}
.ot-tryon-page .compare-bar.visible { transform: translateX(-50%) translateY(0); }
.ot-tryon-page .compare-bar-text { font-size: 13px; font-weight: 500; }
.ot-tryon-page .compare-bar-text strong { background: rgba(255,255,255,0.18); padding: 2px 8px; border-radius: 10px; font-size: 11px; margin-right: 6px; }
.ot-tryon-page .compare-bar-actions { display: flex; gap: 6px; }
.ot-tryon-page .compare-bar .btn-compare { background: #fff; color: #1a1a1a; border: none; padding: 8px 16px; border-radius: 8px; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.ot-tryon-page .compare-bar .btn-compare:disabled { opacity: 0.5; cursor: not-allowed; }
.ot-tryon-page .compare-bar .btn-compare svg { width: 14px; height: 14px; }
.ot-tryon-page .compare-bar .btn-clear { background: none; color: rgba(255,255,255,0.7); border: none; padding: 8px; cursor: pointer; font-family: inherit; font-size: 12px; border-radius: 6px; }
.ot-tryon-page .compare-bar .btn-clear:hover { color: #fff; }

/* EMPTY STATE */
.ot-tryon-page .empty-state { background: #fff; border-radius: 12px; padding: 60px 40px; text-align: center; margin: 40px 0; }
.ot-tryon-page .empty-state-icon { width: 80px; height: 80px; margin: 0 auto 20px; border-radius: 50%; background: var(--tt-accent-bg); display: flex; align-items: center; justify-content: center; color: var(--tt-accent); }
.ot-tryon-page .empty-state-icon svg { width: 36px; height: 36px; }
.ot-tryon-page .empty-state h2 { font-size: 22px; font-weight: 700; margin: 0 0 10px; }
.ot-tryon-page .empty-state p { color: var(--tt-text-muted); font-size: 14px; max-width: 460px; margin: 0 auto 24px; line-height: 1.55; }
.ot-tryon-page .empty-state .btn-go { background: #1a1a1a; color: #fff; border: none; padding: 13px 28px; border-radius: 24px; font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.ot-tryon-page .empty-state .btn-go:hover { background: #000; }
.ot-tryon-page .empty-state .btn-go svg { width: 16px; height: 16px; }

/* toast (используется со страницы) */
.ot-tryon-toast {
  position: fixed; left: 50%; bottom: 88px; transform: translateX(-50%) translateY(20px);
  background: #1a1a1a; color: #fff; padding: 12px 18px; border-radius: 12px; font-size: 13px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25); z-index: 1100; opacity: 0; transition: opacity .2s, transform .2s;
  display: flex; align-items: center; gap: 12px;
}
.ot-tryon-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.ot-tryon-toast a { color: #9ec1ff; font-weight: 600; }

/* ===== Оверлей сравнения (клиентский, без отдельной страницы) ===== */
.ot-tryon-page .ot-tryon-compare {
  position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55); padding: 24px; opacity: 0; transition: opacity .2s; overflow: auto;
}
.ot-tryon-page .ot-tryon-compare.show { opacity: 1; }
.ot-tryon-page .cmp-box {
  background: #fff; border-radius: 14px; padding: 24px; max-width: 1000px; width: 100%;
  position: relative; box-shadow: 0 20px 50px rgba(0,0,0,0.3); max-height: 92vh; overflow: auto;
}
.ot-tryon-page .cmp-title { font-size: 18px; font-weight: 700; margin: 0 0 18px; padding-right: 32px; }
.ot-tryon-page .cmp-close {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border: none; cursor: pointer;
  background: #f0f0f0; border-radius: 50%; font-size: 22px; line-height: 1; color: #555;
}
.ot-tryon-page .cmp-close:hover { background: #e5e5e5; }
.ot-tryon-page .cmp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 16px; }
.ot-tryon-page .cmp-col { min-width: 0; }
.ot-tryon-page .cmp-photo { aspect-ratio: 1/1; border-radius: 10px; overflow: hidden; background: linear-gradient(135deg,#f0f0f0,#e8e8e8); display: flex; align-items: center; justify-content: center; }
.ot-tryon-page .cmp-photo img { width: 100%; height: 100%; object-fit: cover; }
.ot-tryon-page .cmp-photo--empty svg { width: 48px; height: 48px; color: var(--tt-text-soft); opacity: .4; }
.ot-tryon-page .cmp-brand { font-size: 11px; color: var(--tt-text-soft); text-transform: uppercase; letter-spacing: .5px; margin: 12px 0 4px; font-weight: 500; }
.ot-tryon-page .cmp-name { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; margin-bottom: 6px; }
.ot-tryon-page .cmp-name:hover { text-decoration: underline; }
.ot-tryon-page .cmp-meta { font-size: 11.5px; color: var(--tt-text-soft); margin-bottom: 8px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ot-tryon-page .cmp-price { display: flex; align-items: baseline; gap: 8px; }
@media (max-width: 600px) {
  .ot-tryon-page .ot-tryon-compare { padding: 12px; }
  .ot-tryon-page .cmp-box { padding: 16px; }
  .ot-tryon-page .cmp-grid { gap: 10px; }
}

/* RESPONSIVE */
@media (max-width: 899px) {
  .ot-tryon-page .tryon-wrap { padding: 0; }
  .ot-tryon-page .tryon-head h1 { font-size: 22px; }
  .ot-tryon-page .tryon-head h1 svg { width: 22px; height: 22px; }
  .ot-tryon-page .tryon-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
@media (max-width: 600px) {
  .ot-tryon-page .tryon-wrap { padding: 0; }
  .ot-tryon-page .tryon-crumbs { padding: 10px 0 0; font-size: 11.5px; }
  .ot-tryon-page .tryon-head { padding: 14px 0 18px; gap: 10px; }
  .ot-tryon-page .tryon-head h1 { font-size: 20px; }
  .ot-tryon-page .tryon-head .actions { width: 100%; gap: 6px; }
  .ot-tryon-page .tryon-head .btn-secondary,
  .ot-tryon-page .tryon-head .btn-primary { flex: 1; padding: 9px 14px; font-size: 12.5px; justify-content: center; }
  .ot-tryon-page .filter-strip { gap: 10px; margin-bottom: 14px; }
  .ot-tryon-page .filter-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 0 12px; width: calc(100% + 24px); }
  .ot-tryon-page .filter-chips::-webkit-scrollbar { display: none; }
  .ot-tryon-page .filter-chip { flex-shrink: 0; }
  .ot-tryon-page .sort-select { font-size: 12.5px; }
  .ot-tryon-page .tryon-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .ot-tryon-page .tryon-card { border-radius: 10px; }
  .ot-tryon-page .tryon-info { padding: 10px 12px 12px; }
  .ot-tryon-page .tryon-brand { font-size: 10px; }
  .ot-tryon-page .tryon-name { font-size: 12.5px; min-height: 32px; }
  .ot-tryon-page .tryon-meta { font-size: 10.5px; margin-bottom: 8px; }
  .ot-tryon-page .tryon-price-row { margin-bottom: 8px; gap: 6px; }
  .ot-tryon-page .price-current { font-size: 14px; }
  .ot-tryon-page .price-old { font-size: 11px; }
  .ot-tryon-page .price-discount { font-size: 9.5px; padding: 1px 4px; }
  .ot-tryon-page .you-badge { font-size: 9.5px; padding: 4px 8px; top: 8px; left: 8px; }
  .ot-tryon-page .you-badge svg { width: 9px; height: 9px; }
  .ot-tryon-page .product-thumb { width: 50px; height: 38px; bottom: 8px; left: 8px; padding: 3px; }
  .ot-tryon-page .remove-btn { display: none; }
  .ot-tryon-page .select-check { opacity: 1; top: 8px; right: 8px; width: 24px; height: 24px; }
  .ot-tryon-page .tryon-actions { gap: 5px; }
  .ot-tryon-page .btn-add-cart { height: 36px; font-size: 12px; }
  .ot-tryon-page .btn-retry { width: 36px; height: 36px; }
  .ot-tryon-page .tryon-when { font-size: 10px; margin-top: 6px; }
  .ot-tryon-page .compare-bar { bottom: 16px; left: 12px; right: 12px; transform: translateX(0) translateY(180%); min-width: 0; padding: 10px 12px 10px 16px; }
  .ot-tryon-page .compare-bar.visible { transform: translateX(0) translateY(0); }
  .ot-tryon-page .compare-bar-text { font-size: 12px; }
  .ot-tryon-page .compare-bar .btn-compare { padding: 8px 12px; font-size: 12px; }
  .ot-tryon-page .empty-state { padding: 36px 20px; }
  .ot-tryon-page .empty-state h2 { font-size: 18px; }
  .ot-tryon-page .empty-state p { font-size: 13px; }
  .ot-tryon-page .info-banner { padding: 12px 14px; gap: 10px; }
  .ot-tryon-page .info-banner-text { font-size: 12.5px; }
}

/* ---- Три вкладки раздела «Примерено» (OT 2026-09-06) ---- */
.ot-tabs{display:flex;gap:4px;margin:0 0 18px;border-bottom:1px solid #e6e6e6;overflow-x:auto}
.ot-tab{appearance:none;background:none;border:0;border-bottom:2px solid transparent;
  padding:10px 14px;font:inherit;font-size:15px;color:#6b6b6b;cursor:pointer;white-space:nowrap}
.ot-tab:hover{color:#1c3d6e}
.ot-tab.is-active{color:#1c3d6e;border-bottom-color:#1c3d6e;font-weight:600}
.ot-tab-count{font-size:13px;color:#9a9a9a}
.ot-tab.is-active .ot-tab-count{color:#1c3d6e}
.ot-pane[hidden]{display:none}
.ot-pane-loading{padding:24px 0;color:#9a9a9a;font-size:14px}
.ot-pane-error{padding:24px 0;color:#b00020;font-size:14px}
/* Сердце без кружка и подложки — просто иконка (замечание Юрия).
   Активное состояние — фирменный синий #1c3d6e, как акцент раздела. */
.ot-heart{position:absolute;top:10px;right:12px;z-index:2;width:28px;height:28px;border:0;
  background:none;box-shadow:none;cursor:pointer;padding:0;line-height:1;
  color:#c4c4c4;transition:color .15s,transform .1s}
.ot-heart svg{width:24px;height:24px;display:block}
.ot-heart:hover{color:#1c3d6e}
.ot-heart:active{transform:scale(.9)}
.ot-heart.is-on{color:#1c3d6e}
.ot-heart.is-on svg{fill:currentColor}
.ot-heart[disabled]{opacity:.45;cursor:default}
/* Сердце в карточке товара: контурная иконка, активное — фирменный синий. */
.ot-heart-pdp .ot-heart-ico svg{width:18px;height:18px;vertical-align:-3px}
.ot-heart-pdp .ot-heart-ico{color:#8a8a8a}
.ot-heart-pdp.is-on .ot-heart-ico{color:#1c3d6e}
.ot-heart-pdp.is-on .ot-heart-ico svg{fill:currentColor}
/* Сердце на карточке каталога */
.product-card{position:relative}
.product-card .ot-heart{top:10px;right:10px}

/* Карточки вкладок «Сохранено» и «Просмотрено» — это ФОТО ТОВАРА, а не фото человека.
   Общий .tryon-photo рассчитан на портрет: квадрат + object-fit:cover. Для товара это
   давало гигантский обрезанный фрагмент оправы. Здесь своя геометрия. */
.ot-tryon-page .ot-choice-card .tryon-photo{aspect-ratio:4/3;background:#fff;border-bottom:1px solid #f0f0f0}
.ot-tryon-page .ot-choice-card .tryon-photo img{object-fit:contain;padding:14px;box-sizing:border-box}
.ot-tryon-page .ot-choice-card .tryon-info{padding:12px 14px 14px}
.ot-tryon-page .ot-choice-card .tryon-brand{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#9a9a9a;margin-bottom:4px}
.ot-tryon-page .ot-choice-card .tryon-name{display:block;font-size:14px;line-height:1.35;color:#1a1a1a;text-decoration:none;margin-bottom:8px}
.ot-tryon-page .ot-choice-card .tryon-name:hover{color:#1c3d6e}
.ot-tryon-page .ot-choice-card .price-current{font-size:16px;font-weight:600}
@media (max-width:640px){
  .ot-tryon-page .ot-choice-card .tryon-photo img{padding:8px}
  .ot-tryon-page .ot-choice-card .tryon-name{font-size:13px}
}
.ot-tryon-page .ot-more{display:block;margin:18px auto 0}
/* Фото на карточках подборки кликабельно и ведёт в карточку товара. */
.ot-tryon-page .ot-choice-card .ot-photo-link{display:block;width:100%;height:100%}
.ot-tryon-page .ot-choice-card .ot-photo-link img{width:100%;height:100%}
/* Предложение переноса гостевой подборки.
   ⚠ Кнопки .btn-primary/.btn-secondary в этом разделе описаны ТОЛЬКО внутри .tryon-head,
   а баннер живёт вне её — поэтому они оставались голыми, как их рисует браузер
   (замечание Юрия). Повторяем ровно тот же вид: скругление 22px, те же отступы и цвета. */
.ot-tryon-page .info-banner.ot-merge{align-items:center;gap:12px;flex-wrap:wrap}
.ot-tryon-page .ot-merge .info-banner-text{flex:1 1 320px;min-width:0}
.ot-tryon-page .ot-merge .btn-primary,
.ot-tryon-page .ot-merge .btn-secondary{
  white-space:nowrap;padding:9px 18px;border-radius:22px;
  font-family:inherit;font-size:13px;cursor:pointer;transition:border-color .1s,background .1s}
.ot-tryon-page .ot-merge .btn-primary{background:#1a1a1a;border:1px solid #1a1a1a;color:#fff}
.ot-tryon-page .ot-merge .btn-primary:hover{background:#000}
.ot-tryon-page .ot-merge .btn-primary[disabled]{opacity:.6;cursor:default}
.ot-tryon-page .ot-merge .btn-secondary{background:#fff;border:1px solid var(--tt-border);color:var(--tt-text)}
.ot-tryon-page .ot-merge .btn-secondary:hover{border-color:var(--tt-text)}
@media (max-width:640px){
  .ot-tryon-page .ot-merge .btn-primary,
  .ot-tryon-page .ot-merge .btn-secondary{flex:1;justify-content:center;padding:9px 14px;font-size:12.5px}
}
.ot-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:100000;
  background:#1a1a1a;color:#fff;padding:10px 16px;border-radius:8px;font-size:14px;
  box-shadow:0 6px 20px rgba(0,0,0,.25)}
/* Кнопка покупки в окне сравнения.
   ⚠ У .btn-add-cart стоит flex:1 — в горизонтальном ряду карточки это правильно, но
   колонка сравнения вертикальная, и кнопка растягивалась во всю оставшуюся высоту
   чёрным блоком (замечание Юрия). Здесь рост запрещаем и задаём обычную высоту. */
.ot-tryon-page .cmp-cart{flex:0 0 auto;margin-top:10px;width:100%;height:42px}

/* ── §35: мобильное сравнение во весь экран, модели листаются свайпом ──────────────
   На узком экране три колонки в сетке сжимались до нечитаемых полосок. Здесь окно
   занимает весь экран, а модели идут горизонтальной лентой с прилипанием: один свайп —
   одна модель целиком, вместе со своей ценой и своей кнопкой покупки. */
@media (max-width: 640px) {
  .ot-tryon-page .ot-tryon-compare{padding:0;align-items:stretch}
  .ot-tryon-page .cmp-box{
    border-radius:0;max-height:100vh;height:100dvh;padding:16px 0 calc(16px + env(safe-area-inset-bottom));
    display:flex;flex-direction:column}
  .ot-tryon-page .cmp-title{padding:0 56px 0 16px;margin-bottom:12px}
  .ot-tryon-page .cmp-grid{
    display:flex;grid-template-columns:none;gap:12px;overflow-x:auto;overflow-y:auto;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    padding:0 16px 8px;flex:1 1 auto}
  .ot-tryon-page .cmp-col{
    flex:0 0 82%;scroll-snap-align:center;min-width:0;
    display:flex;flex-direction:column}
  .ot-tryon-page .cmp-photo{max-height:46vh}
  .ot-tryon-page .cmp-photo img{max-height:46vh;object-fit:contain}
  /* Кнопка покупки прижата к низу своей колонки — видно, к какой именно модели она
     относится. flex:0 0 auto обязателен, иначе она снова растянется на всю высоту. */
  .ot-tryon-page .cmp-cart{flex:0 0 auto;margin-top:auto;height:44px}
  /* Подсказка, что моделей больше одной. */
  .ot-tryon-page .cmp-hint{padding:0 16px 8px;font-size:12px;color:#9a9a9a}
}
@media (min-width: 641px) { .ot-tryon-page .cmp-hint{display:none} }
/* Сердце на карточке примерки — в правом верхнем углу (решение Юрия).
   Там же живёт галочка выбора для сравнения, но она появляется только при наведении,
   поэтому сдвигаем её левее сердца: обе кнопки остаются доступными и не наезжают.
   Фон белый, потому что иконка лежит поверх фотографии лица и на светлых снимках
   контур без подложки теряется. */
.ot-tryon-page .tryon-card .ot-heart-onphoto{
  position:absolute;right:12px;top:12px;z-index:4;width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 1px 4px rgba(0,0,0,.12)}
.ot-tryon-page .tryon-card .ot-heart-onphoto svg{width:20px;height:20px}
/* Миниатюра товара сидит в том же углу — сдвигаем её, чтобы не наезжали. */
/* Галочка выбора для сравнения сдвинута левее сердца, чтобы не оказаться под ним. */
.ot-tryon-page .tryon-card:has(.ot-heart-onphoto) .select-check{right:52px}
@media (max-width:640px){
  .ot-tryon-page .tryon-card:has(.ot-heart-onphoto) .select-check{right:44px}
}
/* Миниатюра товара внизу слева — с сердцем наверху справа они не пересекаются. */
@media (max-width:640px){
  .ot-tryon-page .tryon-card .ot-heart-onphoto{width:28px;height:28px;right:8px;top:8px}
  .ot-tryon-page .tryon-card .ot-heart-onphoto svg{width:18px;height:18px}
}
/* Сердце в колонке сравнения: поверх фотографии, слева сверху — как на карточках примерок. */
.ot-tryon-page .cmp-col{position:relative}
.ot-tryon-page .cmp-heart{position:absolute;right:10px;top:10px;z-index:2;
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:rgba(255,255,255,.92);box-shadow:0 1px 4px rgba(0,0,0,.12)}
.ot-tryon-page .cmp-heart svg{width:20px;height:20px}

/* ТЗ §18/§20 — предложение кабинета гостю и подтверждение после создания.
   Кнопки .btn-primary/.btn-secondary в разделе описаны только внутри .tryon-head,
   а баннер живёт вне её (та же грабля, что была у .ot-merge) — повторяем вид явно. */
.ot-tryon-page .info-banner.ot-acc-guest,
.ot-tryon-page .info-banner.ot-acc-done{align-items:center;gap:12px;flex-wrap:wrap}
.ot-tryon-page .ot-acc-guest .info-banner-text{flex:1 1 320px;min-width:0}
.ot-tryon-page .ot-acc-actions{display:flex;gap:8px;flex-wrap:wrap}
.ot-tryon-page .ot-acc-guest .btn-primary,
.ot-tryon-page .ot-acc-guest .btn-secondary{
  display:inline-flex;align-items:center;white-space:nowrap;padding:9px 18px;border-radius:22px;
  font-family:inherit;font-size:13px;line-height:1;cursor:pointer;text-decoration:none;
  transition:border-color .1s,background .1s}
.ot-tryon-page .ot-acc-guest .btn-primary{background:#1a1a1a;border:1px solid #1a1a1a;color:#fff}
.ot-tryon-page .ot-acc-guest .btn-primary:hover{background:#000;color:#fff}
.ot-tryon-page .ot-acc-guest .btn-secondary{background:#fff;border:1px solid var(--tt-border);color:var(--tt-text)}
.ot-tryon-page .ot-acc-guest .btn-secondary:hover{border-color:var(--tt-text)}
.ot-tryon-page .info-banner.ot-acc-done{background:#eaf6ec;border-color:#bfe0c6}
.ot-tryon-page .ot-acc-done .info-banner-text strong{color:#1e7a34}
@media (max-width:640px){
  .ot-tryon-page .ot-acc-actions{width:100%}
  .ot-tryon-page .ot-acc-guest .btn-primary,
  .ot-tryon-page .ot-acc-guest .btn-secondary{flex:1;justify-content:center;padding:9px 14px;font-size:12.5px}
}

/* ═══ Карточка «Примерено»: три состояния (макет, область D · 13.09.2026) ═══
   1) живое фото примерки + метка остатка срока;
   2) снимок истёк → основой становится ФОТО ТОВАРА (решение Юрия), внизу «фото хранилось N дней»;
   3) модель ушла из продажи → плашка поверх фото + «Подобрать похожие» (ссылка та же,
      что «Подобрать похожие в каталоге →» на карточке товара).
   Повторные примерки одной модели схлопнуты в одну карточку — бейдж числа попыток. */

/* бейдж повторов: в базовой раскладке слева (справа сверху живёт отметка выбора) */
.ot-tryon-page .tryon-tries {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  background: rgba(26,26,26,0.8); color: #fff; font-size: 10.5px; font-weight: 700;
  padding: 3px 8px; border-radius: 10px; letter-spacing: .01em;
}
/* метка срока снимка: у кнопки удаления тот же угол, поэтому при наведении уступаем ей место */
.ot-tryon-page .tryon-photo-tag {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  background: rgba(26,26,26,0.72); color: #fff; font-size: 10.5px; font-weight: 600;
  padding: 3px 8px; border-radius: 10px; transition: opacity .15s;
}
.ot-tryon-page .tryon-card:hover .tryon-photo-tag { opacity: 0; }
/* модель закончилась — говорим поверх фото, снимок остаётся виден */
.ot-tryon-page .tryon-gone {
  position: absolute; inset: 0; z-index: 2; display: flex; align-items: center;
  justify-content: center; background: rgba(255,255,255,0.72); pointer-events: none;
}
.ot-tryon-page .tryon-gone span {
  background: rgba(26,26,26,0.82); color: #fff; font-size: 11px; font-weight: 600;
  padding: 5px 11px; border-radius: 11px;
}
/* фото товара вместо истёкшего снимка — по стандарту сайта: серая подложка + multiply */
.ot-tryon-page .tryon-photo.photo-product { background: #f2f2f2; }
.ot-tryon-page .tryon-photo.photo-product .tryon-photo-img {
  object-fit: contain; padding: 18px; box-sizing: border-box; mix-blend-mode: multiply;
}
.ot-tryon-page .tryon-when__note { color: var(--tt-text-soft); }
/* распроданная модель: цена гаснет, «Подобрать похожие» — синяя, как в макете */
.ot-tryon-page .tryon-card.is-unavailable .price-current { color: var(--tt-text-soft); }
.ot-tryon-page a.btn-similar { background: var(--tt-accent); border-color: var(--tt-accent); }
.ot-tryon-page a.btn-similar:hover { background: #17355f; border-color: #17355f; }

/* пустой срез фильтра: пунктирная рамка — «здесь могло быть содержимое» (макет, D) */
.ot-tryon-page .tryon-filter-empty {
  margin-top: 18px; border: 1px dashed var(--tt-line, #e5e5e5); border-radius: 12px;
  text-align: center; padding: 30px 20px;
}
.ot-tryon-page .tryon-filter-empty[hidden] { display: none; }
.ot-tryon-page .tryon-filter-empty__t { font-size: 15px; font-weight: 700; }
.ot-tryon-page .tryon-filter-empty__s { font-size: 13px; color: var(--tt-text-soft); margin-top: 5px; }
.ot-tryon-page .tryon-filter-empty a { color: var(--tt-accent); }

/* End */


/* Start:/bitrix/templates/lens4u/css/tryon-section-v2.css?178954455229083*/
/* ═══ Раздел «Примерено» — раскладка v2 (макет Юрия, 12.09.2026) ═══
 *
 * Подключается ТОЛЬКО при живом флаге: index.php смотрит www/.tryon_section_v2_off.
 * ОТКАТ В ОДИН КЛИК: touch www/.tryon_section_v2_off — стили и флаг не подключаются,
 * скрипты рисуют прежнюю разметку (ветки помечены SECTION_V2). Полный откат файлов —
 * /root/ROLLBACK_SECTION_V2.sh, копии рядом с файлами (.bak.2026-09-12_section_v2).
 *
 * Всё под .ot-section-v2 — ни один класс не течёт на остальной сайт.
 * Переменные цветов взяты из макета и объявлены на самом разделе, а не в :root,
 * чтобы не переопределить палитру сайта.
 */
.ot-section-v2{
  --sv-surface:#fff; --sv-text:#1a1a1a; --sv-muted:#6b6b6b; --sv-soft:#9a9a9a;
  --sv-border:#e5e5e5; --sv-hair:#efefef;
  --sv-navy:#1c3d6e; --sv-navy-bg:#eef4ff; --sv-navy-br:#c8d8f0;
  --sv-ok:#1a7a3e; --sv-ok-bg:#eef7f1; --sv-ok-br:#c5e2d0;
  --sv-warn-bg:#fff7e8; --sv-warn-tx:#8a5e15;
  --sv-sale:#c63131; --sv-sale-bg:#fdeaea;
}
/* ⚠ Был сброс `.ot-section-v2 *{margin:0;padding:0}` — он сносил отступы у ВСЕГО
   внутри раздела, включая заголовки, вкладки и пустые состояния. Сброс нужен только
   новым блокам макета, у остальных отступы уже выверены. */
.ot-section-v2 .mass,.ot-section-v2 .mass *,
.ot-section-v2 .sticky,.ot-section-v2 .sticky *,
.ot-section-v2 .prog,.ot-section-v2 .prog *,
.ot-section-v2 .rw,.ot-section-v2 .rw *{box-sizing:border-box;margin:0;padding:0}
.ot-section-v2 a{color:var(--sv-navy);text-decoration:none}
.ot-section-v2 a:hover{text-decoration:underline}
/* ===== вкладки с разной природой ===== */
.ot-section-v2 .tabs{display:flex;gap:4px;border-bottom:1px solid var(--sv-border);margin-bottom:0}
/* ===== hero-полоса массовой примерки ===== */
.ot-section-v2 .mass{margin-top:18px;background:var(--sv-navy);border-radius:13px;padding:18px 20px;color:#fff;position:relative;overflow:hidden}
.ot-section-v2 .mass::after{content:"";position:absolute;top:-60px;right:-30px;width:220px;height:220px;background:radial-gradient(circle,rgba(255,255,255,.10),transparent 70%)}
.ot-section-v2 .mass__row{position:relative;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.ot-section-v2 .mass__b{flex:1;min-width:240px}
.ot-section-v2 .mass__t{font-size:17px;font-weight:800;letter-spacing:-.01em;display:flex;align-items:center;gap:9px}
.ot-section-v2 .mass__t svg{width:19px;height:19px}
.ot-section-v2 .mass__s{font-size:13px;color:rgba(255,255,255,.78);margin-top:4px;line-height:1.45}
.ot-section-v2 .mass__acts{display:flex;gap:9px;flex-wrap:wrap}
.ot-section-v2 .mb{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:26px;padding:13px 20px;font-size:14.5px;font-weight:700;font-family:inherit;cursor:pointer;border:none;white-space:nowrap;transition:transform .12s}
.ot-section-v2 .mb:hover{transform:translateY(-1px)}
.ot-section-v2 .mb--white{background:#fff;color:var(--sv-navy)}
.ot-section-v2 .mb--line{background:none;border:1.5px solid rgba(255,255,255,.45);color:#fff}
.ot-section-v2 .mb svg{width:16px;height:16px}
.ot-section-v2 .mass__cost{position:relative;margin-top:12px;font-size:12px;color:rgba(255,255,255,.72);display:flex;align-items:center;gap:7px}
.ot-section-v2 .mass__cost svg{width:14px;height:14px;color:#8fd6a8}
/* ===== сетка карточек ===== */
.ot-section-v2 .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(226px,1fr));gap:14px;margin-top:16px}
.ot-section-v2 .it{border:1px solid var(--sv-border);border-radius:12px;background:#fff;overflow:hidden;position:relative;transition:border-color .12s,box-shadow .12s}
.ot-section-v2 .it:hover{box-shadow:0 6px 18px rgba(0,0,0,.06)}
.ot-section-v2 .it--pick{border-color:var(--sv-navy);box-shadow:0 0 0 2px rgba(28,61,110,.12)}
.ot-section-v2 .it__media{position:relative;height:132px;background:#f7f7f7;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--sv-hair)}
.ot-section-v2 .it__media svg.gl{width:96px;height:42px;color:#c3c3c3}
.ot-section-v2 .it__chk{position:absolute;top:9px;left:9px;width:24px;height:24px;border-radius:50%;border:2px solid #d3d3d3;background:rgba(255,255,255,.95);cursor:pointer;display:flex;align-items:center;justify-content:center;color:transparent}
.ot-section-v2 .it--pick .it__chk{background:var(--sv-navy);border-color:var(--sv-navy);color:#fff}
.ot-section-v2 .it__chk svg{width:12px;height:12px}
.ot-section-v2 .it__heart{position:absolute;top:9px;right:9px;width:26px;height:26px;border:none;border-radius:50%;background:rgba(255,255,255,.92);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--sv-navy)}
.ot-section-v2 .it__heart svg{width:15px;height:15px}
.ot-section-v2 .it__b{padding:11px 12px 12px}
.ot-section-v2 .it__br{font-size:9.5px;letter-spacing:.08em;color:var(--sv-soft)}
.ot-section-v2 .it__n{font-size:13px;font-weight:700;line-height:1.3;margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ot-section-v2 .it__p{margin-top:6px;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.ot-section-v2 .it__p .now{font-size:14.5px;font-weight:800}
.ot-section-v2 .it__p .old{font-size:11px;color:var(--sv-soft);text-decoration:line-through}
.ot-section-v2 .it__p .sl{font-size:10.5px;font-weight:700;color:var(--sv-sale);background:var(--sv-sale-bg);padding:1px 6px;border-radius:8px}
.ot-section-v2 .it__act{margin-top:9px;display:flex;gap:6px}
.ot-section-v2 .ib{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;border-radius:22px;padding:9px 10px;font-size:12.5px;font-weight:700;font-family:inherit;cursor:pointer;border:none;transition:background .12s}
.ot-section-v2 .ib--dark{background:var(--sv-text);color:#fff}
.ot-section-v2 .ib--dark:hover{background:#000}
.ot-section-v2 .ib--ic{flex:0 0 36px;background:var(--sv-navy-bg);color:var(--sv-navy);border:1px solid var(--sv-navy-br)}
.ot-section-v2 .ib--ic:hover{background:#e2ebfa}
.ot-section-v2 .ib svg{width:14px;height:14px}
.ot-section-v2 .it__when{margin-top:7px;font-size:11px;color:var(--sv-soft);display:flex;align-items:center;justify-content:space-between;gap:8px}
/* состояния */
.ot-section-v2 .ph-live{position:absolute;inset:0;background:linear-gradient(165deg,#dedede,#efefef);display:flex;align-items:center;justify-content:center}
.ot-section-v2 .ph-live .fc{width:54%;opacity:.42;color:#8f8f8f}
.ot-section-v2 .ph-mini{position:absolute;bottom:8px;left:8px;width:40px;height:30px;border-radius:7px;background:#fff;border:1px solid var(--sv-border);display:flex;align-items:center;justify-content:center;color:#b5b5b5}
.ot-section-v2 .ph-mini svg{width:28px;height:13px}
.ot-section-v2 .ph-tag{position:absolute;bottom:8px;right:8px;background:rgba(26,26,26,.78);color:#fff;font-size:10px;font-weight:600;padding:3px 8px;border-radius:10px}
.ot-section-v2 .gone{position:absolute;inset:0;background:rgba(255,255,255,.72);display:flex;align-items:center;justify-content:center}
.ot-section-v2 .gone span{background:rgba(26,26,26,.82);color:#fff;font-size:11px;font-weight:600;padding:5px 11px;border-radius:11px}
.ot-section-v2 .tries{position:absolute;top:9px;right:41px;background:rgba(26,26,26,.8);color:#fff;font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:10px}
/* sticky панель */
.ot-section-v2 .sticky{position:sticky;bottom:0;margin-top:16px;background:var(--sv-text);color:#fff;border-radius:13px;padding:14px 18px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;box-shadow:0 -6px 24px rgba(0,0,0,.13)}
.ot-section-v2 .sticky__b{flex:1;min-width:200px}
.ot-section-v2 .sticky__t{font-size:15px;font-weight:800}
.ot-section-v2 .sticky__s{font-size:12px;color:rgba(255,255,255,.7);margin-top:2px}
.ot-section-v2 .sticky__s.low{color:#ffc97a}
.ot-section-v2 .sticky__acts{display:flex;gap:9px;align-items:center}
.ot-section-v2 .sb{border-radius:24px;padding:12px 20px;font-size:14px;font-weight:700;font-family:inherit;cursor:pointer;border:none;white-space:nowrap}
.ot-section-v2 .sb--ghost{background:none;color:rgba(255,255,255,.8)}
.ot-section-v2 .sb--go{background:#fff;color:var(--sv-text)}
/* прогресс массовой примерки */
.ot-section-v2 .prog{max-width:520px;margin:0 auto}
.ot-section-v2 .prog__bar{height:7px;border-radius:4px;background:#ededed;overflow:hidden;margin-top:4px}
.ot-section-v2 .prog__bar i{display:block;height:100%;width:40%;background:var(--sv-navy);border-radius:4px}
.ot-section-v2 .prog__meta{display:flex;justify-content:space-between;font-size:12px;color:var(--sv-soft);margin-top:8px}
.ot-section-v2 .qlist{margin-top:16px;display:flex;flex-direction:column}
.ot-section-v2 .q{display:flex;align-items:center;gap:12px;padding:10px 0}
.ot-section-v2 .q+.q{border-top:1px solid var(--sv-hair)}
.ot-section-v2 .q__ph{flex:0 0 44px;height:34px;border-radius:8px;background:#f5f5f5;border:1px solid var(--sv-border);display:flex;align-items:center;justify-content:center;color:#c5c5c5;overflow:hidden}
.ot-section-v2 .q__ph svg{width:30px;height:14px}
.ot-section-v2 .q__ph.done{background:linear-gradient(160deg,#dedede,#efefef)}
.ot-section-v2 .q__n{flex:1;min-width:0;font-size:13px;font-weight:600}
.ot-section-v2 .q__st{flex:0 0 auto;font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:11px}
.ot-section-v2 .q__st--wait{background:#f2f2f2;color:var(--sv-soft)}
.ot-section-v2 .q__st--now{background:var(--sv-navy-bg);color:var(--sv-navy)}
.ot-section-v2 .q__st--done{background:var(--sv-ok-bg);color:var(--sv-ok)}
.ot-section-v2 .q__st--no{background:var(--sv-warn-bg);color:var(--sv-warn-tx)}
.ot-section-v2 .spin{width:12px;height:12px;border:2px solid rgba(28,61,110,.25);border-top-color:var(--sv-navy);border-radius:50%;animation:sp .7s linear infinite;display:inline-block;vertical-align:-2px;margin-right:5px}
/* пустой фильтр */
.ot-section-v2 .empty{text-align:center;padding:30px 20px}
.ot-section-v2 .empty__ic{width:52px;height:52px;border-radius:50%;background:#f4f4f4;color:var(--sv-soft);display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.ot-section-v2 .empty__ic svg{width:24px;height:24px}
.ot-section-v2 .empty__t{font-size:15px;font-weight:700}
.ot-section-v2 .empty__s{font-size:13px;color:var(--sv-soft);margin-top:4px}
/* компактный список «просмотрено» */
.ot-section-v2 .rows{margin-top:14px;border:1px solid var(--sv-border);border-radius:12px;overflow:hidden}
.ot-section-v2 .rw{display:flex;align-items:center;gap:13px;padding:10px 14px;background:#fff}
.ot-section-v2 .rw+.rw{border-top:1px solid var(--sv-hair)}
.ot-section-v2 .rw__i{flex:0 0 52px;height:38px;border-radius:8px;background:#f7f7f7;border:1px solid var(--sv-border);display:flex;align-items:center;justify-content:center;color:#c3c3c3}
.ot-section-v2 .rw__i svg{width:38px;height:17px}
.ot-section-v2 .rw__b{flex:1;min-width:0}
.ot-section-v2 .rw__n{font-size:13.5px;font-weight:600;line-height:1.3}
.ot-section-v2 .rw__m{font-size:11.5px;color:var(--sv-soft);margin-top:1px}
.ot-section-v2 .rw__p{flex:0 0 auto;font-size:13.5px;font-weight:700}
.ot-section-v2 .rw__a{flex:0 0 auto;display:flex;gap:6px}
.ot-section-v2 .rwb{width:32px;height:32px;border-radius:50%;border:1px solid var(--sv-border);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--sv-muted)}
.ot-section-v2 .rwb:hover{border-color:var(--sv-navy-br);color:var(--sv-navy);background:var(--sv-navy-bg)}
.ot-section-v2 .rwb svg{width:15px;height:15px}
.ot-section-v2 .chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}
.ot-section-v2 .chip{border:1px solid var(--sv-border);background:#fff;border-radius:20px;padding:7px 14px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;color:var(--sv-muted)}
.ot-section-v2 .chip.on{background:var(--sv-text);color:#fff;border-color:var(--sv-text)}
.ot-section-v2 .chip i{font-style:normal;opacity:.6;margin-left:5px}

/* ── стыковка макета с рабочей разметкой раздела ───────────────────────── */
/* полоса массовой примерки: у неё сохраняются старые классы, поэтому гасим прежний вид */
.ot-section-v2 .otb-bar.mass{display:block;border:0;background:var(--sv-navy)}
.ot-section-v2 .otb-bar.mass .mass__acts{flex-shrink:0}
/* Липкая панель выбора живёт внутри прежнего .otb-dock — снимаем его оформление целиком:
   по макету это НЕ фиксированный док поверх страницы, а sticky-полоса в потоке вкладки. */
.ot-section-v2 .otb-dock,
.ot-section-v2 .otb-dock--flow{background:none;border:0;box-shadow:none;pointer-events:none}
/* Панель смонтирована ВНУТРИ вкладки (иначе теряет стили), но держится у низа экрана —
   иначе после выбора её не видно: в конце длинного списка она уходит ниже вьюпорта. */
.ot-section-v2 .otb-dock--flow{
  position:fixed;left:0;right:0;bottom:0;z-index:9998;padding:0 16px 12px}
.ot-section-v2 .otb-dock .sticky{pointer-events:auto;max-width:1200px;margin:0 auto}
.ot-section-v2 .otb-dock--flow .sticky{position:static;max-width:1200px;margin:0 auto}
/* окно выполнения: прежняя подложка остаётся, содержимое — по макету */
.ot-section-v2 .otb-progress__box.prog{max-width:520px;padding:24px}
/* ⚠ Миниатюра строки: пока идёт очередь, это ФОТО ТОВАРА на белом — его нужно вписывать
   целиком, иначе оправа обрезается по краям (Юрий 12.09). Когда примерка готова, в той же
   рамке уже ПОРТРЕТ с результатом — его, наоборот, кадрируем, чтобы лицо было крупно. */
.ot-section-v2 .otb-progress .q__ph img{
  width:100%;height:100%;object-fit:contain;padding:3px;box-sizing:border-box;border-radius:7px}
.ot-section-v2 .otb-progress .q__ph.done img{object-fit:cover;padding:0}
.ot-section-v2 .otb-progress .q__n{font-size:13px;font-weight:600}
/* строка «Просмотрено»: сердце и кнопки действий — круглые, как в макете */
.ot-section-v2 .rw .ot-heart{position:static;width:32px;height:32px;box-shadow:none}
.ot-section-v2 .rw .ot-heart.is-on{color:#c63131}
.ot-section-v2 .rw.is-unavailable{opacity:.55}
.ot-section-v2 .rw__n{color:var(--sv-text);text-decoration:none;display:block}
.ot-section-v2 .rw__i img{display:block}
@media (max-width:640px){
  .ot-section-v2 .rw{flex-wrap:wrap;gap:9px}
  .ot-section-v2 .rw__p{order:3}
  .ot-section-v2 .rw__a{order:4;margin-left:auto}
  .ot-section-v2 .mass{padding:16px}
  .ot-section-v2 .mass__acts{width:100%}
  .ot-section-v2 .mass__acts .mb{flex:1}
  .ot-section-v2 .sticky{flex-direction:column;align-items:stretch}
  .ot-section-v2 .sticky__acts{width:100%}
  .ot-section-v2 .sticky__acts .sb{flex:1}
}

/* ── режим выбора: чекбокс слева, сердце остаётся справа ────────────────
   ⚠ В прежней раскладке чекбокс рисовался в правом верхнем углу — ровно там же,
   где сердце. Накладка перекрывала сердце, и человек не понимал, что выбор включился
   (Юрий 12.09: «кнопка не срабатывает»). В макете чекбокс слева — так и делаем. */
.ot-section-v2 .otb-pick{justify-content:flex-start;align-items:flex-start;padding:9px}
.ot-section-v2 .otb-pick__box{width:24px;height:24px;border:2px solid #d3d3d3;
  background:rgba(255,255,255,.95);box-shadow:0 1px 4px rgba(16,24,40,.12)}
.ot-section-v2 .tryon-card.is-picked{outline:0;border-color:var(--sv-navy);
  box-shadow:0 0 0 2px rgba(28,61,110,.12)}
.ot-section-v2 .tryon-card.is-picked .otb-pick__box{background:var(--sv-navy);border-color:var(--sv-navy);color:#fff}
/* сердце в режиме выбора не нужно — накладка всё равно перехватывает нажатия */
.ot-section-v2 .otb-picking .ot-heart{opacity:.25;pointer-events:none}

/* ── «Просмотрено» списком: сетка превращается в список строк ───────────
   ⚠ Без этого строки .rw попадают в ячейки сетки и сплющиваются в узкую колонку —
   именно так и выглядело у Юрия 12.09. */
.ot-section-v2 .tryon-grid.rows{display:block;grid-template-columns:none;gap:0}
.ot-section-v2 .tryon-grid.rows > .rw{border-radius:0}
.ot-section-v2 .tryon-grid.rows > .rw:first-child{border-radius:12px 12px 0 0}
.ot-section-v2 .tryon-grid.rows > .rw:last-child{border-radius:0 0 12px 12px}

/* ── отметка выбора и во вкладке «Примерено» — слева, как в макете ──────
   На карточке примерки это кнопка «Выбрать для сравнения». Раньше стояла справа
   в одном углу с корзиной-удалением (Юрий 12.09: «должна быть слева»). */
/* ⚠ Вес селектора: в tryon.css есть правило с :has(), которое двигает отметку вправо
   (0,4,0). Поэтому здесь нужен такой же или больший вес, иначе позиция не применится.
   ⚠ И вторая беда: у отметки стоит opacity:0 — она проявляется только при наведении,
   то есть на телефоне не видна никогда. В новой раскладке показываем всегда. */
.ot-tryon-page.ot-section-v2 .tryon-card .select-check,
.ot-tryon-page.ot-section-v2 .tryon-card:has(.ot-heart-onphoto) .select-check{
  left:9px;right:auto;top:9px;opacity:1;width:24px;height:24px;border:2px solid #d3d3d3}
.ot-tryon-page.ot-section-v2 .select-check.checked{background:var(--sv-navy);border-color:var(--sv-navy)}
.ot-tryon-page.ot-section-v2 .select-check.checked svg{color:#fff;opacity:1}

/* ── карточка «Сохранено» по макету (секция A) ──────────────────────────
   Разметка остаётся прежней (.tryon-card / .tryon-photo / .tryon-info) — меняем только вид,
   иначе отвалятся сердце, корзина и выбор для массовой примерки. */
.ot-tryon-page.ot-section-v2 [data-pane="saved"] .tryon-card,
.ot-tryon-page.ot-section-v2 [data-pane="tryon"] .tryon-card{
  border:1px solid var(--sv-border);border-radius:12px;background:#fff;overflow:hidden;
  transition:border-color .12s,box-shadow .12s}
.ot-tryon-page.ot-section-v2 [data-pane="saved"] .tryon-card:hover,
.ot-tryon-page.ot-section-v2 [data-pane="tryon"] .tryon-card:hover{box-shadow:0 6px 18px rgba(0,0,0,.06)}
/* ⚠ ПЛОЩАДКА ФОТО ТОВАРА — СТАНДАРТ САЙТА, не выдумка раздела.
   Так сделаны карточки каталога (catalog.section/def/tpl_new/catalog.css, .product-photo)
   и галерея PDP (tpl_new/pdp.css, .product-img-d): белый фрейм, внутри него серая подложка
   --photo-bg #f2f2f2 с отступом от краёв, картинка поверх с mix-blend-mode:multiply —
   белый фон JPG растворяется в подложке и не торчит белым прямоугольником.
   Базовый .tryon-photo рассчитан на портрет (квадрат + cover) — здесь товар, поэтому 4:3. */
.ot-tryon-page.ot-section-v2 [data-pane="saved"] .tryon-photo{
  position:relative;aspect-ratio:4/3;height:auto;padding:0;overflow:hidden;
  background:#fff;border-bottom:1px solid var(--sv-hair)}
.ot-tryon-page.ot-section-v2 [data-pane="saved"] .tryon-photo::before{
  content:"";position:absolute;inset:14px;background:#f2f2f2;border-radius:6px;z-index:0}
/* ⚠ ССЫЛКЕ-ОБЁРТКЕ НЕЛЬЗЯ ДАВАТЬ z-index: она становится своим слоем, и multiply у
   картинки смешивается уже с ней, а не с серой подложкой — белый фон JPG остаётся
   белым прямоугольником (проверено рендером). Слой поднимает сама картинка, как в каталоге. */
.ot-tryon-page.ot-section-v2 [data-pane="saved"] .tryon-photo .ot-photo-link{
  position:static;display:block;width:100%;height:100%}
.ot-tryon-page.ot-section-v2 [data-pane="saved"] .tryon-photo img,
.ot-tryon-page.ot-section-v2 [data-pane="saved"] .tryon-photo-img{
  position:relative;z-index:1;width:100%;height:100%;max-height:none;object-fit:contain;
  padding:22px;box-sizing:border-box;mix-blend-mode:multiply}
@media (max-width:640px){
  .ot-tryon-page.ot-section-v2 [data-pane="saved"] .tryon-photo::before{inset:10px}
  .ot-tryon-page.ot-section-v2 [data-pane="saved"] .tryon-photo img,
  .ot-tryon-page.ot-section-v2 [data-pane="saved"] .tryon-photo-img{padding:16px}
}
.ot-tryon-page.ot-section-v2 [data-pane="saved"] .tryon-info{padding:11px 12px 12px}
.ot-tryon-page.ot-section-v2 [data-pane="saved"] .tryon-brand{font-size:9.5px;letter-spacing:.08em;color:var(--sv-soft)}
.ot-tryon-page.ot-section-v2 [data-pane="saved"] .tryon-name{
  font-size:13px;font-weight:700;line-height:1.3;margin-top:2px;color:var(--sv-text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ot-tryon-page.ot-section-v2 [data-pane="saved"] .tryon-price-row{margin-top:6px}
.ot-tryon-page.ot-section-v2 [data-pane="saved"] .price-current{font-size:14.5px;font-weight:800}
/* действия: тёмная «В корзину» + круглая иконка «Примерить» */
.ot-tryon-page.ot-section-v2 [data-pane="saved"] .tryon-actions{margin-top:9px;display:flex;gap:6px}
/* ⚠ «В корзину» НЕ переопределяем: это общая кнопка сайта (чёрная, скругление 8,
   высота 38) — в разделе она обязана выглядеть так же, как везде (Юрий 12.09).
   Здесь задаём только раскладку ряда, вид кнопки остаётся из tryon.css. */
.ot-tryon-page.ot-section-v2 [data-pane="saved"] .btn-add-cart{flex:1}
/* ⚠ Кнопка примерки рядом с корзиной — ОБЩАЯ кнопка сайта (.btn-retry из tryon.css, тот же
   вид, что во вкладке «Примерено» и у «Примерить» в каталоге): светло-синий фон, рамка
   цвета акцента, 38×38. Своих цветов здесь не заводим — только раскладка ряда. */
.ot-tryon-page.ot-section-v2 [data-pane="saved"] .btn-retry{flex:0 0 38px;padding:0}

/* ── «Показать ещё»: кнопка, а не техническая надпись ───────────────────
   (Юрий 12.09: «какая-то техническая надпись»). Показывает, сколько осталось. */
.ot-tryon-page.ot-section-v2 .ot-more--v2{
  display:inline-flex;align-items:center;gap:9px;margin:18px auto 0;
  background:#fff;border:1.5px solid var(--sv-border);border-radius:26px;
  padding:12px 22px;font:600 14px/1 inherit;color:var(--sv-text);cursor:pointer;
  transition:border-color .12s,box-shadow .12s}
.ot-tryon-page.ot-section-v2 .ot-more--v2:hover{border-color:var(--sv-navy);box-shadow:0 4px 14px rgba(16,24,40,.07)}
.ot-tryon-page.ot-section-v2 .ot-more--v2 i{
  font-style:normal;font-size:12px;font-weight:700;color:var(--sv-navy);
  background:var(--sv-navy-bg);border-radius:11px;padding:3px 9px}
.ot-tryon-page.ot-section-v2 .ot-more--v2 svg{width:15px;height:15px;color:var(--sv-soft)}
@media (prefers-reduced-motion:reduce){.ot-tryon-page.ot-section-v2 .ot-more--v2{transition:none}}

/* ⚠ Декоративный блик в правом верхнем углу блока — это ::after самого блока, и он
   ПЕРЕХВАТЫВАЛ нажатия по кнопкам (Юрий 12.09: «выбрать модели не работает»).
   Замер: document.elementFromPoint по центру кнопки возвращал сам блок, а не кнопку.
   Блик обязан быть сквозным, содержимое — выше него. */
.ot-tryon-page.ot-section-v2 .mass::after{pointer-events:none}
.ot-tryon-page.ot-section-v2 .mass__row,
.ot-tryon-page.ot-section-v2 .mass__cost{position:relative;z-index:1}

/* Отметка выбора на карточке «Сохранено» видна ВСЕГДА, слева сверху (Юрий 12.09:
   «по-прежнему иконки выбора слева нету»). Вне режима выбора кнопка компактная — карточка
   остаётся ссылкой на товар; как только человек нажал кружок, включается режим выбора и
   кнопка разворачивается на всю карточку (тап куда угодно = выбрать/снять). */
.ot-section-v2 [data-pane="saved"] .otb-pick{
  inset:auto;left:9px;top:9px;width:26px;height:26px;padding:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center}
.ot-section-v2 [data-pane="saved"].otb-picking .otb-pick{
  inset:0;left:auto;top:auto;width:100%;height:100%;padding:9px;border-radius:0;
  align-items:flex-start;justify-content:flex-start}
/* В режиме выбора карточка не должна менять высоту — действия не прячем, а гасим
   (базовый tryon-bulk.css убирает «В корзину» совсем, из-за чего ряд карточек прыгал). */
.ot-section-v2 [data-pane="saved"].otb-picking .tryon-card .btn-add-cart{display:inline-flex}
.ot-section-v2 [data-pane="saved"].otb-picking .tryon-actions{opacity:.35;pointer-events:none}

/* ── окно выполнения: разметка макета лежит поверх прежних классов .otb-row*, и те
   перебивали её цветным текстом статуса, линией над первой строкой и размерами
   миниатюры. Поднимаем специфичность ровно там, где был конфликт. */
.ot-section-v2 .q.otb-row{border-top:0;padding:10px 0}
.ot-section-v2 .q.otb-row + .q.otb-row{border-top:1px solid var(--sv-hair)}
.ot-section-v2 .q__ph.otb-row__ph{flex:0 0 44px;height:34px;border-radius:8px;
  background:#f5f5f5;border:1px solid var(--sv-border);overflow:hidden}
.ot-section-v2 .q__ph.otb-row__ph.done{background:linear-gradient(160deg,#dedede,#efefef)}
.ot-section-v2 .q__n.otb-row__name{font-size:13px;font-weight:600;line-height:1.3}
.ot-section-v2 .otb-row.is-ok .q__st--done{background:var(--sv-ok-bg);color:var(--sv-ok)}
.ot-section-v2 .otb-row.is-fail .q__st--no{background:var(--sv-warn-bg);color:var(--sv-warn-tx)}
.ot-section-v2 .otb-row.is-run .q__st--now{background:var(--sv-navy-bg);color:var(--sv-navy)}
.ot-section-v2 .otb-row__warn{color:var(--sv-warn-tx)}
/* окно смонтировано внутрь раздела — подложка обязана перекрывать страницу целиком */
.ot-section-v2 .otb-progress{position:fixed;inset:0;z-index:9999}

/* В раскладке v2 отметка выбора переехала влево — значит правый верхний угол свободен,
   и бейдж повторов встаёт туда, как в макете области D. */
.ot-tryon-page.ot-section-v2 .tryon-tries{left:auto;right:12px}

/* End */
/* /bitrix/templates/lens4u/new_header/ot_breadcrumbs.css?17911400554441 */
/* /bitrix/templates/lens4u/tryon.css?178927781436943 */
/* /bitrix/templates/lens4u/css/tryon-section-v2.css?178954455229083 */