/* Страница машины, вторая редакция. Надстройка НАД product_page.css:
   разметка та же, меняется только подача. Так её можно включить на все
   машины одной строкой — и так же выключить.

   ЧТО ЛЕЧИМ (Allan, 2026-09-01):
   • «в гармошках спрятаны целые разделы с множеством фото и графики. Лучше
     без гармошек а скролом иначе пользователь и не дойдет до того чтоб
     гармошку раскрыть» — на странице 17 гармошек, открыты 2. Пятнадцать
     блоков контента человек не видит вообще.
   • «упор конечно на мобильного пользователя, интерфейс должен быть ему
     знаком от других массовых платформ» — отсюда горизонтальные ленты со
     snap-прокруткой (как карусели в ленте), липкая строка разделов (как
     табы в приложении), липкая нижняя панель действия (как в маркетплейсе).
   • «смотрят профессионалы» — читаемая длина строки, табличные цифры,
     возможность сравнивать не листая. */

/* ── 1. Липкая навигация по разделам ─────────────────────────────────
   Заменяет собой гармошки: раздел не прячется, но до него можно допрыгнуть.
   На узком экране — горизонтальная лента чипов, ровно тот жест, которым
   листают сторис и табы. */
/* СТЕК ЛИПКИХ ПОЛОС. На странице их теперь четыре: шапка (top:0, 52px),
   строка разделов, полоса «Назад / крошка / язык» и баннер спаривания.
   Каждая следующая обязана прилипать ПОД предыдущей, иначе они наезжают
   друг на друга — строка разделов встала к top:0, то есть поверх шапки, а
   баннер спаривания заехал под переключатель языка (Allan, 2026-09-01).
   Высоты меряет product_page_v2.js и кладёт в переменные: у полос разная
   высота на разной ширине экрана, захардкодить нельзя. */
.v2-nav {
  position: sticky; top: 52px; z-index: 48;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--gray-100);
}
.v2-nav-scroll {
  display: flex; gap: 6px; overflow-x: auto; scroll-behavior: smooth;
  padding: 9px 14px; scrollbar-width: none; -ms-overflow-style: none;
  scroll-snap-type: x proximity;
}
.v2-nav-scroll::-webkit-scrollbar { display: none; }
.v2-nav a {
  flex: 0 0 auto; scroll-snap-align: center;
  padding: 7px 13px; border-radius: 999px;
  font-size: 13px; font-weight: 600; line-height: 1.2;
  color: var(--gray-700); text-decoration: none; white-space: nowrap;
  background: var(--gray-100);
  transition: background .18s ease, color .18s ease;
}
.v2-nav a:hover { background: var(--gray-300); }
.v2-nav a.on { background: var(--red); color: #fff; }
/* Тонкая полоса прогресса чтения — единственный индикатор «сколько ещё»,
   которого длинной странице всегда не хватает. */
.v2-progress {
  position: absolute; left: 0; bottom: -1px; height: 2px;
  background: var(--red); width: 0;
  transition: width .1s linear;
}

/* ── 2. Гармошки раскрыты навсегда ───────────────────────────────────
   Заголовок гармошки становится подзаголовком раздела: он больше ничего не
   переключает, поэтому и выглядеть кнопкой не должен. Стрелку убираем,
   курсор обычный. */
.v2 .mp-accordion { border: 0; margin: 0 0 26px; }
.v2 .mp-accordion-body { display: block !important; height: auto !important; }
.v2 .mp-accordion-head {
  cursor: default; pointer-events: none;
  padding: 0 0 10px; border: 0; background: none;
  font-size: 15px; font-weight: 700; letter-spacing: -.01em;
  border-bottom: 1px solid var(--gray-100); margin-bottom: 14px;
  width: 100%; text-align: left;
}
.v2 .mp-accordion-head::after,
.v2 .mp-accordion-head .mp-acc-arrow { display: none !important; }

/* Исключение: «Комплектация и цена» без введённой базовой цены. Раскрывать
   её вместе с остальными нечего — внутри только прочерки и заблокированные
   чекбоксы. Оставляем сворачивающейся: заголовок снова кликабелен, стрелка
   на месте, по клику раздел открывается (Allan, 2026-09-03). */
.v2 .mp-accordion.mp-config-empty .mp-accordion-body { display: none !important; }
.v2 .mp-accordion.mp-config-empty.open .mp-accordion-body { display: block !important; }
.v2 .mp-accordion.mp-config-empty .mp-accordion-head {
  cursor: pointer; pointer-events: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.v2 .mp-accordion.mp-config-empty .mp-chevron {
  display: inline-block !important; font-style: normal;
  transition: transform .18s var(--ease, ease); color: var(--gray-500);
}
.v2 .mp-accordion.mp-config-empty.open .mp-chevron { transform: rotate(180deg); }

/* ── 3. Карточки особенностей — лента со snap на мобильном ───────────
   Кнопки «показать все 23» больше нет (её вешал product_page.js): вместо
   клика — привычный горизонтальный свайп, и видно, что карточек много. */
@media (max-width: 760px) {
  .v2 .mp-feature-grid {
    display: grid; grid-auto-flow: column;
    grid-auto-columns: 78%; gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 2px 14px 14px; margin: 0 -14px;
    scrollbar-width: none;
  }
  .v2 .mp-feature-grid::-webkit-scrollbar { display: none; }
  .v2 .mp-feature-card { scroll-snap-align: center; margin: 0; }
  .v2 .mp-common-chips {
    display: grid; grid-auto-flow: column; grid-auto-columns: 42%;
    gap: 10px; overflow-x: auto; scroll-snap-type: x proximity;
    padding: 2px 14px 12px; margin: 0 -14px; scrollbar-width: none;
  }
  .v2 .mp-common-chips::-webkit-scrollbar { display: none; }
  .v2 .mp-common-chip { scroll-snap-align: center; }
}
/* Кнопки «показать все» больше не нужны — всё и так раскрыто. ВАЖНО: этот
   же класс носит кнопка «показать всё навесное» (mpShowAllAttachments), и
   пока раскрывались только карточки особенностей, 44 из 68 совместимых
   позиций оставались скрытыми, а кнопка, которая их открывала, была
   спрятана этим же правилом — попасть в них было нельзя вообще
   (Allan, 2026-09-02: «пишет 68, а показывает только 24»).
   Поэтому раскрываем ЛЮБЫЕ «*-card-extra», а не перечисляем их по одному:
   появится третий такой список — он раскроется сам. */
.v2 .mp-feature-more { display: none !important; }
.v2 [class*="-card-extra"] { display: flex !important; }

/* ── 4. Шапка ────────────────────────────────────────────────────────
   Параметров стало девять — на телефоне это две строки мелких плиток или
   одна лента. Лента: пролистать девять чисел большим пальцем быстрее, чем
   читать сетку 3×3 шрифтом 10 px. */
@media (max-width: 760px) {
  .v2 .mp-spec-chips {
    display: grid; grid-auto-flow: column; grid-auto-columns: max-content;
    gap: 8px; overflow-x: auto; scroll-snap-type: x proximity;
    padding: 2px 14px 4px; margin: 0 -14px; scrollbar-width: none;
  }
  .v2 .mp-spec-chips::-webkit-scrollbar { display: none; }
  .v2 .mp-spec-chip { scroll-snap-align: center; min-width: 118px; }
}
.v2 .mp-spec-chip {
  border: 1px solid var(--gray-100);
  transition: transform .16s ease, box-shadow .16s ease;
}
.v2 .mp-spec-chip:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.v2 .mp-spec-chip b { font-variant-numeric: tabular-nums; }

/* ── 5. Таблицы характеристик ────────────────────────────────────────
   Цифры выравниваем по разряду: в таблице ряда три модели стоят рядом
   столбцами, и пропорциональные цифры не дают их сравнить взглядом.

   ЛИПКОЙ ПЕРВОЙ КОЛОНКИ ЗДЕСЬ НЕТ, и это осознанно. Пробовал —
   position:sticky на th:first-child ломает вёрстку существующих таблиц
   (у них своя ширина колонок и свой контейнер прокрутки), подпись строки
   уезжала в пустое место. Выигрыш не стоил поломки: таблицы и так
   помещаются по ширине, а на телефоне прокручиваются целиком. */
.v2 .mp-spec-table,
.v2 table { font-variant-numeric: tabular-nums; }

/* ── 6. Плавное появление ────────────────────────────────────────────
   Тот самый «модный эффект», но сдержанный: 12 px подъёма и прозрачность.
   Без него длинная страница читается как один сплошной лист; с ним видно,
   что раздел начался. Уважает системную настройку «меньше движения». */
.v2 .v2-rise { opacity: 0; transform: translateY(12px); }
.v2 .v2-rise.v2-in {
  opacity: 1; transform: none;
  transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion: reduce) {
  .v2 .v2-rise, .v2 .v2-rise.v2-in { opacity: 1; transform: none; transition: none; }
  .v2-nav-scroll { scroll-behavior: auto; }
}

/* ── 7. Липкая панель действия ───────────────────────────────────────
   Как в любом маркетплейсе: что бы человек ни читал, спросить цену можно
   не возвращаясь наверх. Только на телефоне — на десктопе шапка и так
   рядом. */
.v2-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: none; align-items: center; gap: 12px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--gray-100);
  transform: translateY(110%); transition: transform .25s ease;
}
.v2-bar.on { transform: none; }
.v2-bar-name { flex: 1; min-width: 0; font-size: 13px; line-height: 1.25; }
.v2-bar-name b { display: block; font-size: 15px; font-weight: 800; }
.v2-bar-name span { color: var(--gray-500); }
.v2-bar a {
  flex: 0 0 auto; padding: 11px 18px; border-radius: 999px;
  background: var(--red); color: #fff;
  font-size: 14px; font-weight: 700; text-decoration: none;
}
@media (max-width: 760px) {
  .v2-bar { display: flex; }
  .v2 { padding-bottom: 76px; }
}

/* ── 8. Читаемость длинного текста ───────────────────────────────────
   Строка основного текста была вдвое длиннее комфортной (Allan, 2026-09-01,
   пункт 08 прошлого аудита). 66 символов — верх нормы для сплошного чтения. */
.v2 .mp-feature-text p,
.v2 .mp-hero-desc,
.v2 .mp-section > p { max-width: 66ch; }
/* Прыжок по чипу раздела должен останавливаться ПОД всем липким стеком,
   иначе заголовок раздела оказывается спрятан за полосами. */
.v2 .mp-section {
  scroll-margin-top: calc(52px + var(--v2-nav-h, 49px) + var(--v2-backrow-h, 45px) + 10px);
}
.v2 h2 { letter-spacing: -.015em; }


/* ── 9. «Здесь листается вбок» ────────────────────────────────────────
   Само решение с лентами Allan принял, но (2026-09-01): «не очевидно что
   нужно вправо влево скролить <…> нужно дать понять что эти таблицы
   скролятся горизонтально». На телефоне системная полоса прокрутки не
   видна вовсе, и лента выглядит просто как обрезанный блок.

   Три сигнала, каждый работает сам по себе:
     • край растворяется, когда в ту сторону есть ещё содержимое — самый
       честный намёк, потому что появляется ровно тогда, когда есть куда
       листать, и пропадает в конце;
     • под лентой своя полоска-бегунок: она выглядит как полоса прокрутки
       и заодно показывает, где мы в ряду;
     • один раз при первом появлении лента коротко качается — движение
       читается как «это двигается» быстрее любой подписи.

   Маской, а не градиентом-накладкой: накладка потребовала бы обёртки и
   позиционирования над содержимым, а mask-image не трогает вёрстку. */
.v2-hs { scrollbar-width: none; }
.v2-hs::-webkit-scrollbar { display: none; }
.v2-hs.can-r {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent 100%);
          mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent 100%);
}
.v2-hs.can-l {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 44px);
          mask-image: linear-gradient(to right, transparent 0, #000 44px);
}
.v2-hs.can-l.can-r {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%);
}

.v2-rail {
  height: 4px; border-radius: 999px; background: var(--gray-100);
  margin: 9px 0 2px; position: relative; overflow: hidden;
}
.v2-rail i {
  position: absolute; top: 0; bottom: 0; left: 0; width: 30%;
  border-radius: 999px; background: var(--gray-500);
  transition: left .08s linear, width .12s ease;
}
/* Ленты у карточек и плиток выходят за поля секции (margin: 0 -14px),
   поэтому их бегунок нужно вернуть внутрь — иначе он шире текста. */
.mp-feature-grid + .v2-rail,
.mp-common-chips + .v2-rail,
.mp-spec-chips + .v2-rail { margin-left: 14px; margin-right: 14px; }

/* Разовое покачивание: 14 px вправо и обратно. Ровно один раз и только
   если человек ещё не листал сам. */
@keyframes v2Nudge {
  0%, 100% { transform: translateX(0); }
  35%      { transform: translateX(-14px); }
  70%      { transform: translateX(0); }
}
.v2-hs.v2-nudge > * { animation: v2Nudge .9s ease .35s 1 both; }
@media (prefers-reduced-motion: reduce) {
  .v2-hs.v2-nudge > * { animation: none; }
}


/* Продолжение стека: смещения считаются от измеренных высот. Фолбэки
   соответствуют десктопной раскладке — если скрипт не отработает, полосы
   всё равно не наедут. */
.v2 .mp-backrow { top: calc(52px + var(--v2-nav-h, 49px)); }
.v2 .mp-pair-bar {
  top: calc(52px + var(--v2-nav-h, 49px) + var(--v2-backrow-h, 45px));
}


/* Когда закреплённые полосы съедают больше 40% экрана, строка «Назад /
   крошка / язык» перестаёт липнуть — см. measure() в product_page_v2.js.
   Она не пропадает, просто уезжает со страницей: на входе и выходе она
   нужна, а всё время чтения — нет. */
html.v2-slim-chrome .mp-backrow { position: static; }