/**
 * Карта подбора: силуэт с кликабельными зонами + полка товаров.
 *
 * Панели зон и товаров лежат в разметке все сразу и прячутся [hidden] —
 * JS только снимает атрибут. Без JS видно всё подряд: некрасиво, но читаемо.
 */

.body-map {
  --zone-fill: color-mix(in srgb, var(--color-primary) 55%, transparent);
  --zone-stroke: var(--color-primary);
  --stop-fill: color-mix(in srgb, var(--color-danger) 55%, transparent);
  --stop-stroke: var(--color-danger);

  padding-block: var(--space-16);
  background: var(--color-surface-subtle);
  border-block: 1px solid var(--color-border-soft);
}

/* ── Шапка ─────────────────────────────────────────── */

.body-map__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}

/* Штрих перед надзаголовком — держит взгляд на левом крае колонки */
.body-map__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  color: var(--color-primary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.body-map__eyebrow::before {
  content: '';
  width: 1.5rem;
  height: 2px;
  background: var(--color-primary);
  border-radius: 2px;
}

.body-map__title {
  margin-bottom: var(--space-2);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-black);
  letter-spacing: -0.02em;
}

/* Одна строка: подробности про крепление и разницу вариантов живут
   в панели «Как читать карту» справа, дублировать их здесь незачем */
.body-map__lead {
  max-width: 34rem;
  color: var(--color-text-muted);
  font-size: var(--fs-base);
  line-height: var(--lh-snug);
}

.body-map__lead-link {
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
}

.body-map__lead-link a {
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Выход из панели зоны в её текстовый разбор */
.body-map__more-zone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-4);
  color: var(--color-primary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.body-map__more-zone:hover {
  color: var(--color-primary-dark);
}

.body-map__more-zone .material-symbols-outlined {
  font-size: 1.125rem;
}

/* ── Три шага ──────────────────────────────────────── */

.body-map__steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
}

.body-map__steps li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text-soft);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

.body-map__step-n {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  background: var(--color-primary-light);
  border-radius: 999px;
  color: var(--color-primary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

/* ── Полка ─────────────────────────────────────────── */

.body-map__rack {
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.body-map__rack-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.body-map__rack-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

.body-map__rack-count {
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}

/* Лента. На узком экране — горизонтальная, на широком встаёт в колонку.
   Прокрутка нативная: DOM здесь переупорядочивается при выборе зоны,
   а слайдеры на JS такого не переживают — им нужен ручной пересчёт.
   scroll-snap по той же причине выключен: после перестановки Chrome
   переснапливается на ранее залипшую плитку и утаскивает прокрутку за ней,
   так что сброс в начало не выживает. overflow-anchor — то же самое. */
.body-map__rack-strip {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  overflow-anchor: none;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
  padding-bottom: var(--space-2);
}

.body-map__rack-strip::-webkit-scrollbar {
  height: 0.375rem;
  width: 0.375rem;
}

.body-map__rack-strip::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: 999px;
}

.body-map__chip {
  display: grid;
  place-items: center;
  flex: none;
  width: 4.25rem;
  aspect-ratio: 1;
  padding: var(--space-1);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, opacity 0.15s;
}

.body-map__chip-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.body-map__chip:hover,
.body-map__chip:focus-visible {
  border-color: var(--color-primary);
  outline: none;
}

/*
 * Выделение плиток. Раньше «подходит» рисовалось двойным кольцом, а «выбран» —
 * сплошным трёхпиксельным ободом фирменного цвета: рядом с бледной фотографией
 * товара он выглядел как жирная рамка вокруг пустоты.
 * Теперь разница держится на насыщенности границы и мягком ореоле.
 */

/* Товар подходит выбранной зоне */
.body-map__chip.is-on {
  border-color: rgb(15 95 117 / 0.45);
}

/* Товар выбран на полке */
.body-map__chip[aria-pressed='true'] {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgb(15 95 117 / 0.14);
}

/* Когда выбор сделан, неподходящее глушим */
.body-map__rack-strip.is-filtered .body-map__chip:not(.is-on):not([aria-pressed='true']) {
  opacity: 0.35;
}

/* ── Раскладка ─────────────────────────────────────── */

/* minmax(0, 1fr), а не auto: иначе колонка берёт max-content ленты — все плитки
   в один ряд — и раздувается далеко за экран вместо того, чтобы дать ленте
   прокрутку. Та же причина у min-width: 0 ниже. */
.body-map__app {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.body-map__rack,
.body-map__stage,
.body-map__panel {
  min-width: 0;
}

@media (min-width: 60rem) {
  /*
   * Высоту ряда задаём явно через --bm-h и вешаем её на все три карточки.
   * Раньше высоту диктовал силуэт в натуральную величину (около 800 px):
   * лента слева прокручивалась своей, панель справа стояла наполовину
   * пустой, и три блока жили каждый своей высотой. Теперь одна цифра —
   * фигура ужимается под неё, лента и панель скроллятся внутри.
   */
  .body-map__app {
    --bm-h: 34rem;

    grid-template-columns: 8rem minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-6);
    align-items: stretch;
  }

  .body-map__rack,
  .body-map__stage,
  .body-map__panel {
    max-height: var(--bm-h);
  }

  /* Рейл узкий — отступы внутри режем, иначе плитка ужимается до неузнаваемости */
  .body-map__rack {
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
  }

  /* Панель ровно в высоту ряда, длинный список зон скроллится внутри.
     sticky тут не нужен: высоты трёх карточек и так совпадают. */
  .body-map__panel {
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }

  .body-map__rack-head {
    display: block;
  }

  .body-map__rack-count {
    display: block;
    margin-top: 0.125rem;
  }

  /* Лента занимает всё, что осталось под заголовком карточки, и скроллится
     внутри. min-height: 0 обязателен — иначе flex-элемент не даёт себя сжать
     ниже содержимого и прокрутка не появляется. */
  .body-map__rack-strip {
    flex: 1;
    min-height: 0;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    padding-bottom: 0;
    padding-right: var(--space-1);
  }

  .body-map__chip {
    width: 100%;
  }

}

/* ── Силуэт ────────────────────────────────────────── */

.body-map__stage {
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

/* Переключатель сторон — только на узком экране */
.body-map__sides {
  display: flex;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
  padding: var(--space-1);
  background: var(--color-surface-subtle);
  border-radius: var(--radius);
}

.body-map__side {
  flex: 1;
  padding: var(--space-2);
  background: none;
  border: 0;
  border-radius: calc(var(--radius) - 0.25rem);
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}

.body-map__side.is-active {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.08);
}

.body-map__figs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.body-map__fig-label {
  margin-bottom: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.body-map__fig {
  position: relative;
}

.body-map__fig-img {
  display: block;
  width: 100%;
  height: auto;
}

.body-map__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Десктоп: фигура вписывается в высоту карточки, а не диктует её.
   Правила стоят после базовых — иначе height: auto у картинки перебивает
   height: 100% просто потому, что объявлен ниже при равной специфичности. */
@media (min-width: 60rem) {
  .body-map__stage {
    display: flex;
    flex-direction: column;
  }

  .body-map__figs,
  .body-map__fig {
    flex: 1;
    min-height: 0;
  }

  .body-map__figbox {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  /* object-fit: contain у картинки и preserveAspectRatio="xMidYMid meet"
     у SVG вписывают их в один и тот же прямоугольник одинаково — поэтому
     полигоны зон остаются ровно на своих местах при любой высоте. */
  .body-map__fig-img {
    height: 100%;
    object-fit: contain;
  }
}

/* ── Зоны ──────────────────────────────────────────── */

.body-map__zone {
  fill: transparent;
  stroke: transparent;
  stroke-width: 2;
  stroke-linejoin: round;
  cursor: pointer;
  transition: fill 0.15s, stroke 0.15s;
}

.body-map__zone:hover,
.body-map__zone:focus-visible,
.body-map__zone.is-lit {
  fill: var(--zone-fill);
  stroke: var(--zone-stroke);
  outline: none;
}

.body-map__zone[aria-pressed='true'] {
  fill: var(--zone-fill);
  stroke: var(--zone-stroke);
  stroke-width: 3;
}

.body-map__zone.is-stop:hover,
.body-map__zone.is-stop:focus-visible,
.body-map__zone.is-stop.is-lit,
.body-map__zone.is-stop[aria-pressed='true'] {
  fill: var(--stop-fill);
  stroke: var(--stop-stroke);
}

/*
 * Подсказка: пока по карте не кликали, зоны по очереди медленно
 * подсвечиваются — иначе силуэт выглядит картинкой, и что по нему можно
 * нажимать, догадывается не каждый. Приглушённее наведения, чтобы подсказка
 * не спорила с настоящим выбором.
 */
.body-map__zone.is-hint {
  fill: var(--zone-fill);
  stroke: var(--zone-stroke);
  opacity: 0.55;
  transition: fill 700ms ease, stroke 700ms ease, opacity 700ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .body-map__zone.is-hint {
    fill: transparent;
    stroke: transparent;
  }
}

/* Глаза лежат поверх лица — иначе голова перехватывает клик */
.body-map__zone--head {
  pointer-events: visiblePainted;
}

.body-map__zone--eyes {
  pointer-events: all;
}

/* ── Легенда ───────────────────────────────────────── */

.body-map__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-soft);
  list-style: none;
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
}

.body-map__legend li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.body-map__swatch {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 0.25rem;
}

.body-map__swatch--ok {
  background: var(--zone-fill);
  border: 1px solid var(--zone-stroke);
}

.body-map__swatch--stop {
  background: var(--stop-fill);
  border: 1px solid var(--stop-stroke);
}

.body-map__hint {
  margin-top: var(--space-3);
  color: var(--color-text-faint);
  font-size: var(--fs-xs);
}

/* ── Правая панель ─────────────────────────────────── */

.body-map__panel {
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.body-map__kicker {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--color-text-faint);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.body-map__panel-title {
  margin-bottom: var(--space-1);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  letter-spacing: -0.01em;
}

.body-map__sub {
  margin-bottom: var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.body-map__axis {
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  background: var(--color-surface-subtle);
  border-radius: var(--radius);
}

.body-map__axis p {
  color: var(--color-text-soft);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.body-map__note,
.body-map__warn {
  margin-bottom: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

.body-map__note {
  background: var(--color-surface-subtle);
  color: var(--color-text-muted);
}

.body-map__warn {
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  color: var(--color-warning);
}

/* ── Вариант в панели зоны ─────────────────────────── */

.body-map__opt {
  position: relative;
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: var(--space-4);
  padding: var(--space-4);
  margin-inline: calc(var(--space-4) * -1);
  border-top: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
  transition: background-color var(--transition);
}

.body-map__opt:hover {
  background: var(--color-surface-subtle);
}

.body-map__opt.is-pick {
  background: var(--color-primary-light);
  border-top-color: transparent;
}

.body-map__opt.is-pick:hover {
  background: color-mix(in srgb, var(--color-primary) 16%, var(--color-surface));
}

/* Ссылка растянута на всю карточку: кликается любое место, но в разметке
   это по-прежнему <a href> — с ним живут поисковик и Ctrl+клик.
   Вложенных <a> при этом нет, поэтому HTML остаётся валидным. */
.body-map__opt-name::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.body-map__opt-media {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.body-map__opt-thumb {
  display: block;
  aspect-ratio: 1;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
  overflow: hidden;
}

/* Поверх растянутой ссылки: ведёт на полную страницу товара,
   тогда как сама карточка открывает быстрый просмотр */
.body-map__opt-more {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: 0.375rem;
  color: var(--color-text-muted);
  font-size: 0.6875rem;
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

.body-map__opt-more:hover {
  background: var(--color-surface);
  color: var(--color-primary);
}

.body-map__opt-more .material-symbols-outlined {
  font-size: 0.875rem;
}

.body-map__opt-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.body-map__opt-thumb--lg {
  width: 6rem;
  flex: none;
}

.body-map__tag {
  display: inline-block;
  margin-bottom: var(--space-2);
  padding: 0.125rem var(--space-2);
  background: var(--color-surface-subtle);
  border-radius: 0.375rem;
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}

.body-map__tag--pick {
  background: var(--color-primary);
  color: var(--color-text-invert);
}

.body-map__opt-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.body-map__opt-name {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

.body-map__opt-name:hover {
  color: var(--color-primary);
}

.body-map__opt-price {
  flex: none;
  font-weight: var(--fw-bold);
  white-space: nowrap;
}

.body-map__how,
.body-map__why {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.body-map__how {
  margin-bottom: var(--space-1);
  color: var(--color-text-soft);
}

.body-map__why {
  color: var(--color-text-muted);
}

/* Панель товара: там кнопки остаются, карточка зоны их лишилась */
.body-map__opt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* ── Панель товара ─────────────────────────────────── */

.body-map__product-lead {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.body-map__zone-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
  list-style: none;
}

.body-map__zone-link {
  padding: 0.25rem var(--space-3);
  background: var(--color-primary-light);
  border: 0;
  border-radius: 999px;
  color: var(--color-primary);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}

.body-map__zone-link:hover {
  background: var(--color-primary);
  color: var(--color-text-invert);
}

/* ── Родня: альтернативы под выбранным товаром ─────── */

.body-map__kin {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-soft);
}

.body-map__kin .body-map__kicker {
  margin-bottom: var(--space-3);
}

.body-map__kin-row {
  display: grid;
  grid-template-columns: 3rem 1fr auto auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-border-soft);
}

.body-map__kin-row:first-of-type {
  border-top: 0;
}

.body-map__kin-name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

.body-map__kin-name:hover {
  color: var(--color-primary);
}

.body-map__kin-price {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}

.body-map__kin-pick {
  padding: 0.25rem var(--space-3);
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  cursor: pointer;
}

.body-map__kin-pick:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ── Противопоказания ──────────────────────────────── */

/*
 * Не красная. Красный на всю ширину читался как ошибка на странице, а это
 * не ошибка — это обязательная строка, которую нужно прочитать один раз
 * перед выбором. Отсюда спокойный янтарный фон, обычный тёмный текст
 * и значок: заметно, но не кричит.
 */
.body-map__contra {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);

  margin-top: var(--space-6);
  padding: var(--space-3) var(--space-4);
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  border-radius: var(--radius);
  color: var(--color-text-soft);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
}

.body-map__contra-icon {
  flex: none;
  font-size: 1.125rem;
  color: var(--color-warning);
}

/* Выбрали зону — строку убираем: её уже прочитали, а место нужно разбору.
   Вернётся, как только панель снова покажет вступление. */
@media (min-width: 48rem) {
  .body-map.is-picked .body-map__contra {
    display: none;
  }
}

/* ── Узкий экран: одна компактная фигура, пилюли по бокам головы,
      содержимое зоны — в шторке (.bm-sheet), панель скрыта ──────── */

@media (max-width: 47.9375rem) {
  .body-map__stage {
    position: relative;
  }

  .body-map__figs {
    grid-template-columns: 1fr;
    max-width: 13rem;
    margin-inline: auto;
  }

  .body-map__fig-label {
    display: none;
  }

  .body-map__figbox[data-side]:not(.is-active) {
    display: none;
  }

  /* Переключатель — две пилюли на уровне головы, по краям карточки.
     pointer-events на обёртке выключен, чтобы полоса не перекрывала зоны. */
  .body-map__sides {
    position: absolute;
    z-index: 2;
    top: var(--space-8);
    left: var(--space-3);
    right: var(--space-3);
    display: flex;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    background: none;
    border-radius: 0;
    pointer-events: none;
  }

  .body-map__side {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.3rem var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    box-shadow: 0 4px 12px rgb(15 23 42 / 0.08);
    font-size: var(--fs-xs);
    pointer-events: auto;
  }

  .body-map__side.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-invert);
    box-shadow: none;
  }

  .body-map__side-icon {
    font-size: 1rem;
  }

  /* Заполненный человечек = вид спереди, контурный = со спины */
  .body-map__side-icon--front {
    font-variation-settings: 'FILL' 1;
  }
}

@media (max-width: 59.9375rem) {
  /* Содержимое зон показывает шторка — сама панель с интро не нужна */
  /* Панель на телефоне не показываем — её содержимое уезжает в шторку.
     Кроме противопоказаний: строка обязательная, и здесь она единственная. */
  .body-map__panel {
    padding: 0;
    border: 0;
    background: none;
  }

  .body-map__panel > *:not(.body-map__contra) {
    display: none;
  }

  /*
   * Главное на этом экране — силуэт: до него доходило 567 px из 926, то есть
   * две трети первого экрана уходило на подводку. Всё, что можно прочитать
   * позже, уезжает ниже или убирается.
   */

  /* Три шага — инструкция к тому, что уже сказано лидом одной строкой */
  .body-map__steps {
    display: none;
  }

  /* «Нажмите зону… или аппарат на полке» — то же самое второй раз,
     да ещё и про полку, которая теперь ниже силуэта */
  .body-map__hint {
    display: none;
  }

  /* Полка аппаратов — второй вход в подбор, а не первый: пропускаем её вперёд
     силуэта только там, где хватает ширины показать обе колонки сразу */
  .body-map__stage { order: 1; }
  .body-map__rack { order: 2; }

  .body-map__head {
    margin-bottom: var(--space-5);
  }

  .body-map__title {
    font-size: var(--fs-2xl);
  }
}

@media (min-width: 60rem) {
  .body-map__sides {
    display: none;
  }
}

/* переключатель нужен и на планшете, где фигура одна */
@media (min-width: 48rem) and (max-width: 59.9375rem) {
  .body-map__sides {
    position: static;
    display: flex;
    gap: var(--space-2);
    justify-content: center;
    margin-bottom: var(--space-4);
    pointer-events: auto;
  }

  .body-map__side {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
  }
}

/* ── Шторка зоны (телефон) ──────────────────────────── */

.bm-sheet {
  width: 100%;
  max-width: none;
  max-height: 82vh;
  margin: auto 0 0;
  padding: 0;
  border: 0;
  border-radius: 1.25rem 1.25rem 0 0;
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 -12px 40px rgb(15 23 42 / 0.2);
}

.bm-sheet::backdrop {
  background: rgb(15 23 42 / 0.45);
}

@media (prefers-reduced-motion: no-preference) {
  .bm-sheet[open] { animation: bm-sheet-up 0.28s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .bm-sheet[open]::backdrop { animation: bm-sheet-fade 0.28s ease; }
}

@keyframes bm-sheet-up { from { transform: translateY(100%); } }
@keyframes bm-sheet-fade { from { opacity: 0; } }

.bm-sheet__grip {
  width: 2.5rem;
  height: 0.25rem;
  margin: 0.5rem auto 0;
  background: var(--color-border-strong);
  border-radius: 999px;
}

.bm-sheet__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  background: var(--color-surface-subtle);
  border: 0;
  border-radius: 999px;
  color: var(--color-text-soft);
  cursor: pointer;
}

.bm-sheet__body {
  max-height: calc(82vh - 1.5rem);
  overflow-y: auto;
  overscroll-behavior-y: contain;
  padding: var(--space-4) var(--space-5) var(--space-8);
}