/* =============================================================================
   CARD V2 — мобильная карточка-конструктор («сцена»)
   Полигон: engrave.cc (store 1). Гейт — в product.tpl (класс .card-v2 на .product).
   Всё, что тут есть, скоупится под .card-v2, поэтому на остальных магазинах
   темы engrave_3 (md, com.de, kz, uz, biz, by) файл не влияет ни на один пиксель.
   Отдельный файл (а не styles.css) выбран намеренно: styles.css параллельно правят
   другие сессии, и общий файл = гонка правок.
   2026-08-06
   ========================================================================== */

/* Сцена живёт только на мобильном — на десктопе макет и так виден в левой колонке. */
@media (max-width: 767px) {

  /* .product-wrap уже flex-column в теме; фиксируем явно, т.к. на нём держится порядок. */
  .card-v2 .product-wrap {
    display: flex;
    flex-direction: column;
  }

  /* Порядок: сцена → карточка с шагами → галерея фото уезжает вниз. */
  .card-v2 .cv2-stage        { order: 1; }
  .card-v2 .product-detail   { order: 2; }
  .card-v2 .product-slider-wrap { order: 9; }

  /* --- Сцена: три плитки «Лицевая / Оборот 1 / Оборот 2» --------------------
     Тест механики (решение Семёна 2026-08-06): плитки на per-colour картинках
     жетона (275x448, те же, что у старого сайта). Целевой источник — поле
     конструктора «спереди/сзади», подменится в card_v2.js (baseFor). */
  .card-v2 {
    --cv2-tile: min(104px, 12vh);
  }
  .card-v2.cv2-mini {
    --cv2-tile: min(64px, 8vh);
  }

  .card-v2 .cv2-stage {
    position: sticky;
    top: 0;
    z-index: 60;
    background: #fff;
    padding: 8px 0 6px;
    border-bottom: 1px solid #eceff1;
    display: flex;
    justify-content: center;
  }

  .card-v2 .cv2-stage:empty {
    display: none;
  }

  .card-v2 .cv2-views {
    display: flex;
    gap: 16px;
    align-items: flex-start;
  }

  .card-v2 .cv2-view {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    cursor: pointer;
  }

  .card-v2 .cv2-view__img {
    position: relative;
    display: block;
    width: var(--cv2-tile);
    aspect-ratio: 275 / 448;
    transition: width .18s ease;
  }
  .card-v2 .cv2-view__img img.cv2-base {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  /* Подсветка активного вида (фокус в полях → лицевая). */
  .card-v2 .cv2-view.active .cv2-view__img {
    outline: 2px solid #2ba7b8;
    outline-offset: 2px;
    border-radius: 10px;
  }

  /* Текст на лицевой — грубая примерка для теста механики: повёрнут на 90°,
     по центру металла. Размер от ширины плитки, чтобы жил и в mini-режиме. */
  .card-v2 .cv2-view__text {
    position: absolute;
    inset: 9% 14% 7%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    pointer-events: none;
  }
  .card-v2 .cv2-view__text > span {
    transform: rotate(90deg);
    white-space: pre;
    text-align: center;
    font-size: calc(var(--cv2-tile) * 0.10);
    line-height: 1.4;
    color: #3a3b40;
    letter-spacing: .2px;
    max-width: calc(var(--cv2-tile) * 3.4);
  }
  body.invert .card-v2 .cv2-view__text > span {
    color: #f2f2f4;
  }

  /* Гравировка на обороте. */
  .card-v2 .cv2-view__ovl {
    position: absolute;
    inset: 13% 17% 11%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }
  .card-v2 .cv2-view__ovl img {
    max-width: 100%;
    max-height: 100%;
  }
  body.invert .card-v2 .cv2-view__ovl img {
    filter: invert(1);
  }

  .card-v2 .cv2-view figcaption {
    font-size: 10.5px;
    color: #6d7078;
    white-space: nowrap;
  }
  .card-v2.cv2-mini .cv2-view figcaption {
    font-size: 9px;
  }

  /* Фолбэк одной схемой (когда у товара нет per-colour картинок). */
  .card-v2 .cv2-ph {
    width: min(300px, 32vh);
    height: min(300px, 32vh);
    transition: width .18s ease, height .18s ease;
  }
  .card-v2.cv2-mini .cv2-ph {
    width: min(176px, 19vh);
    height: min(176px, 19vh);
  }
  .card-v2 .cv2-ph img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  /* Подсказки «макет обновлён выше» / «доступен предпросмотр» теряют смысл:
     макет и так всегда на экране. */
  .card-v2 .show-preview-banner,
  .card-v2 .preview-is-updated,
  .card-v2 .product-slider-content > .has-constructor {
    display: none !important;
  }

  /* Заголовок над галереей, уехавшей вниз, — чтобы блок фото читался как раздел. */
  .card-v2 .cv2-gallery-title {
    order: 8;
    margin: 22px 14px 8px;
    font-size: 17px;
    font-weight: 700;
    color: #1c1c1e;
  }
  .card-v2 .cv2-gallery-title:only-child {
    display: none;
  }
}

/* На десктопе сцена не участвует вообще. */
@media (min-width: 768px) {
  .card-v2 .cv2-stage,
  .card-v2 .cv2-gallery-title {
    display: none !important;
  }
}

/* =============================================================================
   Явное назначение гравировки на жетоны (этап 4).
   Работает на любом вьюпорте: путаница «какая картинка на какой жетон» одинаково
   вредит и на мобильном, и на десктопе.
   ========================================================================== */

/* Тумблер «одинаковая гравировка на оба жетона» — показывается только при 2 жетонах
   (класс cv2-two вешает card_v2.js). */
.card-v2 .cv2-same-row {
    display: none;
    align-items: center;
    gap: 10px;
    margin: 10px 0 4px;
    font-size: 14px;
    color: #1c1c1e;
    cursor: pointer;
    user-select: none;
}
.card-v2.cv2-two .cv2-same-row {
    display: flex;
}
.cv2-same-row .cv2-switch {
    position: relative;
    width: 42px;
    height: 24px;
    flex: 0 0 auto;
}
.cv2-same-row .cv2-switch input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
}
.cv2-same-row .cv2-switch i {
    position: absolute;
    inset: 0;
    background: #d8dbe0;
    border-radius: 999px;
    transition: background .15s;
    pointer-events: none;
}
.cv2-same-row .cv2-switch i::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    transition: left .15s;
}
.cv2-same-row .cv2-switch input:checked + i {
    background: #2ba7b8;
}
.cv2-same-row .cv2-switch input:checked + i::after {
    left: 21px;
}
.cv2-same-row .cv2-switch input:focus-visible + i {
    outline: 2px solid #2ba7b8;
    outline-offset: 2px;
}

/* Подпись на выбранной гравировке: «Жетон 1» / «Жетон 2» / «На оба жетона».
   Показывается только когда жетонов два — при одном жетоне назначать нечего. */
.cv2-chip-tag {
    display: none;
    margin-top: 3px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    color: #137d8d;
    text-align: center;
}
.card-v2.cv2-two .cv2-chip-tag {
    display: block;
}

/* =============================================================================
   ЭТАП 3 — порядок блоков и «рельсы» шагов (только мобильный).

   Порядок меняем flex-order'ом, БЕЗ переноса узлов в DOM: перенос узлов ломает
   делегированные обработчики темы и даёт видимый скачок вёрстки, пока грузится JS.
   Числа шагов рисуем CSS-псевдоэлементом — так они не требуют новых строк
   перевода и одинаково читаются на любом языке магазина.
   ========================================================================== */
@media (max-width: 767px) {

  .card-v2 .product-detail-content {
    display: flex;
    flex-direction: column;
  }

  /* Дефолт — группа «ваши данные»: сюда же попадают поля, свободный текст и
     любой неизвестный блок опций, что для данных о гравировке правильно. */
  .card-v2 .product-detail-content > * { order: 32; }

  .card-v2 .breadcrumb-product-wrap        { order: 10; }
  .card-v2 .cv2-head                       { order: 20; }
  .card-v2 .product-detail__description    { order: 21; }

  /* 1. Ваши данные */
  .card-v2 .field-tabs                     { order: 30; }

  /* 2. Цвет и количество */
  .card-v2 .product-detail__variants       { order: 40; }
  .card-v2 .product-detail-size            { order: 41; }

  /* 3. Гравировка оборота */
  .card-v2 .category-filter-item__row_checkbox { order: 50; }
  .card-v2 .cv2-engrave                    { order: 51; }

  /* Кнопки покупки — всегда последними в карточке. */
  .card-v2 .product-detail__btns           { order: 60; }

  /* --- Шапки шагов ----------------------------------------------------------
     Полноценные заголовки «кружок + название + подсказка» вставляет card_v2.js
     (.cv2-step) — они пришли на смену голым кружкам-псевдоэлементам 2026-08-11.
     ⛔ Номер НЕ ставить слева через padding у самой группы: ряд свотчей цвета —
     flex на 5 колонок, и 30px слева выдавливают «Чёрный» за край экрана. Шапка —
     отдельный узел, на раскладку групп не влияет. */
  .card-v2 .cv2-step {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 24px 0 2px;
  }
  .card-v2 .cv2-step__n {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2b1a78, #2fa9bc);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 24px;
    text-align: center;
  }
  .card-v2 .cv2-step > b {
    font-size: 16px;
    font-weight: 700;
    color: #1c1c1e;
    line-height: 1.2;
  }
  .card-v2 .cv2-step__sub {
    font-size: 12px;
    color: #8a8d95;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Шапки — прямые дети product-detail-content, встают перед своими группами. */
  .card-v2 .product-detail-content > .cv2-step[data-step="1"] { order: 29; }
  .card-v2 .product-detail-content > .cv2-step[data-step="2"] { order: 39; }
  .card-v2 .product-detail-content > .cv2-step[data-step="3"] { order: 49; }

  /* Чипы «Вы выбрали» (выбранные гравировки) — в шаг 3, к пикеру, а не в дефолтную
     группу данных: иначе выбранный дизайн всплывал среди текстовых полей шага 1. */
  .card-v2 .product-detail-content > .product-detail-selected { order: 52; }

  /* Итого перед кнопками. */
  .card-v2 .product-detail-content > .cv2-total { order: 59; }

}

/* =============================================================================
   ПОЛИРОВКА СЦЕНЫ (2026-08-11, по замечаниям Семёна):
   — вместо жёсткой линии и «белого блока» у сцены мягкая тень и скруглённый низ;
   — сворачивание плавное: ширина плиток по кривой, подписи растворяются
     (а не прыгают в мелкий кегль), отступы анимируются;
   — появление плиток каскадом при загрузке, «пульс» плитки при обновлении;
   — подсказка «Укажите текст» на пустой лицевой;
   — кружки шагов — фирменный градиент темы.
   Секция идёт ПОСЛЕ базовых правил и переопределяет их каскадом.
   ========================================================================== */
@media (max-width: 767px) {

  .card-v2 .cv2-stage {
    border-bottom: 0;
    border-radius: 0 0 18px 18px;
    box-shadow: 0 14px 22px -18px rgba(28, 28, 38, .45);
    padding: 10px 0 8px;
    transition: padding .25s ease;
  }
  .card-v2.cv2-mini .cv2-stage {
    padding: 5px 0 5px;
  }

  .card-v2 .cv2-views {
    transition: gap .25s ease;
  }
  .card-v2.cv2-mini .cv2-views {
    gap: 10px;
  }

  .card-v2 .cv2-view__img {
    transition: width .25s cubic-bezier(.4, 0, .2, 1);
  }

  /* Подписи в mini не сжимаются в нечитаемый кегль, а растворяются. */
  .card-v2 .cv2-view figcaption {
    max-height: 16px;
    overflow: hidden;
    transition: opacity .18s ease, max-height .25s ease;
  }
  .card-v2.cv2-mini .cv2-view figcaption {
    opacity: 0;
    max-height: 0;
  }

  /* Появление плиток каскадом. */
  @keyframes cv2In {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
  }
  .card-v2 .cv2-view { animation: cv2In .45s ease backwards; }
  .card-v2 .cv2-view[data-view="back1"] { animation-delay: .07s; }
  .card-v2 .cv2-view[data-view="back2"] { animation-delay: .14s; }

  /* Пульс при обновлении содержимого (класс ставит card_v2.js). */
  @keyframes cv2Pulse {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.045); }
    100% { transform: scale(1); }
  }
  .card-v2 .cv2-view.pulse .cv2-view__img { animation: cv2Pulse .32s ease; }

  /* Подсказка на пустой лицевой. */
  .card-v2 .cv2-view__hint {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #30afbf;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
  }
  .card-v2.cv2-mini .cv2-view__hint {
    display: none;
  }

  /* Кружки шагов — фирменный градиент темы (как у CTA). */
  .card-v2 .field-tabs::before,
  .card-v2 .product-detail__variants::before,
  .card-v2 .cv2-engrave::before {
    background: linear-gradient(135deg, #2b1a78, #2fa9bc);
  }
}

/* =============================================================================
   ДОРАБОТКА 2026-08-11 (второй заход): «Итого» с расшифровкой, лента дизайнов
   в шаге 3, пикер нижней шторкой, живая цена в прилипшем баре, аффордансы сцены.
   ========================================================================== */
@media (max-width: 767px) {

  /* --- Итого + расшифровка перед кнопками ---------------------------------- */
  .card-v2 .cv2-total {
    margin: 0;
  }
  .card-v2 .cv2-total__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    font-size: 15px;
    color: #4a4d55;
  }
  .card-v2 .cv2-total__row > b {
    font-size: 21px;
    font-weight: 800;
    color: #1c1c1e;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .card-v2 .cv2-total__sub {
    font-size: 12px;
    color: #8a8d95;
    margin-top: 2px;
  }

  /* --- Лента дизайнов в шаге 3 --------------------------------------------
     «Своё фото» + первые дизайны + «Все N →». Большая кнопка «Выбрать гравировку»
     при живой ленте прячется — вход в полный список идёт через «Все N →». */
  /* ⛔ Родитель ленты — flex-элемент: без min-width:0 лента НЕ ужимается до
     ширины экрана, вырастает под все плитки и не листается (поймано ревизией
     2026-08-11 — правый край уезжал на 689px при экране 375). */
  .card-v2 .product-detail-engrave {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  /* --- Шапка ленты: «Популярные дизайны» + «Все N →» ------------------------
     Раскладка по решению Семёна 2026-08-11: возле «Своё фото» кнопки «Все» нет,
     вход в каталог — ссылкой в шапке и плиткой в конце ленты.
     ⛔ Подпись внутри прокручиваемой ленты (абсолютом над первой популярной
     плиткой + JS-приклейка к краю) отменена — «так тупо». Не возвращать. */
  .card-v2 .cv2-rib-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 4px 0 0;
  }
  .card-v2 .cv2-rib-head__t {
    font-size: 13.5px;
    font-weight: 700;
    color: #1c1c1e;
  }
  .card-v2 .cv2-rib-head__all {
    border: 0;
    background: none;
    padding: 4px 0 4px 12px; /* зона тапа без визуального веса */
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: #137d8d;
    cursor: pointer;
    white-space: nowrap;
  }
  .card-v2 .cv2-rib-head__all:active { opacity: .6; }

  /* Разделитель между «Своё фото» и каталогом популярных. */
  .card-v2 .cv2-rib-sep {
    flex: 0 0 auto;
    width: 1px;
    align-self: stretch;
    margin: 6px 2px;
    background: #e6e8ec;
  }

  .card-v2 .cv2-ribbon {
    display: flex;
    align-items: stretch; /* служебные плитки той же высоты, что и дизайны */
    gap: 8px;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    padding: 6px 2px 8px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .card-v2 .cv2-ribbon::-webkit-scrollbar { display: none; }
  /* Плитка = мини-жетон + подпись, как в пикере: без названия покупателю
     приходится угадывать дизайн по мелкой картинке. Рамка обнимает и жетон,
     и подпись — тот же паттерн, что у плиток модалки. */
  .card-v2 .cv2-rib {
    flex: 0 0 auto;
    width: 74px;
    border-radius: 12px;
    border: 2px solid #e2e4e8;
    background: #fff;
    padding: 5px 3px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    position: relative;
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    color: #5d6068;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .card-v2 .cv2-rib:active { transform: scale(.95); }

  /* Жетон: пропорция подложек 275×448. */
  .card-v2 .cv2-rib__tag {
    position: relative;
    display: block;
    width: 46px;
    height: 75px;
    flex: 0 0 auto;
  }
  .card-v2 .cv2-rib__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
  }
  /* Дизайн — в зоне гравировки жетона (те же пропорции, что у сцены). */
  .card-v2 .cv2-rib__d {
    position: absolute;
    left: 20%;
    top: 17%;
    width: 60%;
    height: 70%;
    object-fit: contain;
    pointer-events: none;
    z-index: 1;
  }
  /* Подпись: две строки максимум, дальше многоточие — иначе «Георгий
     Победоносец» растянет ленту и собьёт высоту соседних плиток. */
  .card-v2 .cv2-rib__cap {
    width: 100%;
    font-size: 9.5px;
    font-weight: 600;
    line-height: 1.15;
    color: #5d6068;
    text-align: center;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
  }
  .card-v2 .cv2-rib.on .cv2-rib__cap { color: #137d8d; }
  /* Чёрный жетон: подложка сама тёмная (per-colour картинка), дизайн — белым. */
  body.invert .card-v2 .cv2-rib__d { filter: invert(1); }
  .card-v2 .cv2-rib.on {
    border-color: #2ba7b8;
    box-shadow: 0 0 0 2px rgba(43, 167, 184, .18);
  }
  .card-v2 .cv2-rib[data-count]::after {
    content: attr(data-count);
    position: absolute;
    top: -7px;
    right: -6px;
    font-size: 9px;
    line-height: 1.4;
    background: #2ba7b8;
    color: #fff;
    font-weight: 700;
    border-radius: 999px;
    padding: 1px 6px;
    white-space: nowrap;
  }
  /* Служебные плитки «Своё фото» и «Все N» — первые в той же ленте.
     ⛔ Листающиеся превью в «Все N» не возвращать: анимация не читалась как
     «весь каталог» (Семён, 2026-08-11) — вместо неё иконка-сетка 2×2. */
  .card-v2 .cv2-rib--up,
  .card-v2 .cv2-rib--all {
    justify-content: center;
    gap: 8px;
  }
  .card-v2 .cv2-rib__ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #f3f4f6;
  }
  .card-v2 .cv2-rib--up {
    border-style: dashed;
    border-color: #c6c9cf;
  }
  .card-v2 .cv2-rib--all {
    border-color: #bfe9ee;
    background: #eafafc;
    color: #137d8d;
  }
  .card-v2 .cv2-rib--all .cv2-rib__ico { background: #d5f2f6; }
  .card-v2 .cv2-rib--all .cv2-rib__cap { color: #137d8d; font-weight: 700; }
  .card-v2.cv2-ribbon-on .product-detail-engrave__btn { display: none; }

  /* Пикер «Все N» — ШТАТНАЯ модалка темы, без рестайла (решение Семёна 2026-08-11:
     «там сделай как у нас было, там интерфейс лучше»). Рестайл в нижнюю шторку,
     сделанный ранее в этот же день, снят целиком — не возвращать без запроса. */

  /* --- Прилипший бар: живая цена + корзина ----------------------------------
     Сам бар (.fixed-btns) и его show/hide через transform — механика темы,
     её не трогаем. Прячем только «Показать макет» (сцена и так всегда на экране)
     и добавляем цену, которую обновляет card_v2.js. */
  .card-v2 .fixed-btns .get-preview { display: none; }
  .card-v2 .cv2-bar-sum {
    align-self: center;
    font-size: 17px;
    font-weight: 800;
    color: #1c1c1e;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    margin-right: 10px;
  }

  /* --- Аффордансы сцены ----------------------------------------------------- */
  /* Пустой оборот: пунктирный «+» — видно, что сюда можно добавить гравировку. */
  .card-v2 .cv2-view__ovl:empty::before {
    content: "+";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38%;
    aspect-ratio: 1 / 1;
    border: 2px dashed #b9bdc4;
    border-radius: 50%;
    color: #9a9da3;
    font-size: calc(var(--cv2-tile) * .22);
    font-weight: 600;
    line-height: 1;
  }
  body.invert .card-v2 .cv2-view__ovl:empty::before {
    border-color: #6f7278;
    color: #a7abb2;
  }
  .card-v2.cv2-mini .cv2-view__ovl:empty::before { border-width: 1.5px; }
  /* Отклик на нажатие плитки. */
  .card-v2 .cv2-view__img { transition: width .25s cubic-bezier(.4, 0, .2, 1), transform .12s ease; }
  .card-v2 .cv2-view:active .cv2-view__img { transform: scale(.96); }

  /* Подсказка темы «Введите текст для просмотра» дублирует пилюлю на сцене. */
  .card-v2 .has-constructor-info { display: none !important; }

  /* Хлебные крошки скроллятся горизонтально — сам скроллбар-полоса не нужен. */
  .card-v2 .breadcrumb { scrollbar-width: none; }
  .card-v2 .breadcrumb::-webkit-scrollbar { display: none; }

  /* --- Ревизия линий и ритма (2026-08-11, «криво-косо») --------------------
     Всё содержимое карточки сидит на одной левой линии 20px. */
  /* «Больше фото» стояло на 34px (лишние 14px своего margin поверх отступа
     родителя) — на общую линию. */
  .card-v2 .cv2-gallery-title {
    margin-left: 0;
    margin-right: 0;
  }
  /* Чекбокс «Гравировка обратной стороны» был утоплен на 15px правее шапки. */
  .card-v2 .category-filter-item__row_checkbox {
    padding-left: 0;
    padding-right: 0;
  }
  /* --- Единый вертикальный ритм -------------------------------------------
     У блоков темы свои margin-bottom вразнобой (3/6/11/12/19), из-за чего зазор
     до шапок шагов гулял 31/40/28 и набегали пустоты. Считать их по одному
     бессмысленно: карточка — flex-колонка, поэтому ВСЕ вертикальные margin у
     прямых детей обнуляем и задаём расстояние одним `gap`.
     ⛔ Обнулять только вертикальные: у `.breadcrumb-product-wrap` горизонтальные
     margin -20px держат full-bleed, без них крошки уедут на 40px. */
  .card-v2 .product-detail-content { gap: 12px; }
  .card-v2 .product-detail-content > * {
    margin-top: 0;
    margin-bottom: 0;
  }
  /* Перед шапкой шага — воздуха больше: 12 (gap) + 16 = 28. */
  .card-v2 .product-detail-content > .cv2-step { margin-top: 16px; }
  .card-v2 .cv2-step { margin-bottom: 0; }
  /* Внутренние хвосты блока гравировки (mb 19 у обёртки, padding ленты). */
  .card-v2 .product-detail-engrave { margin-bottom: 0; }
  .card-v2 .cv2-ribbon { padding-bottom: 2px; }
  /* У блока гравировки правило темы со своей специфичностью держит mt:10px —
     перебиваем адресно (общее `> *` проигрывает каскад). */
  .card-v2 .product-detail-content > .product-detail-wrap { margin-top: 0; }

}

/* На десктопе лента и Итого не выводятся: там свой макет слева и старая раскладка. */
@media (min-width: 768px) {
  .card-v2 .cv2-ribbon,
  .card-v2 .cv2-total,
  .card-v2 .cv2-bar-sum,
  .card-v2 .cv2-step {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-v2 .cv2-view,
  .card-v2 .cv2-view.pulse .cv2-view__img {
    animation: none !important;
  }
  .card-v2 .cv2-stage,
  .card-v2 .cv2-views,
  .card-v2 .cv2-view__img,
  .card-v2 .cv2-view figcaption,
  .card-v2 #selectEngrave .modal-dialog,
  .card-v2 .cv2-rib {
    transition: none !important;
  }
}