/* ==========================================================================
   Магазин: витрина с фильтрами и карточка.
   Оформление намеренно сдержанное — в каталоге главное фотография и цена,
   а не рамки вокруг них.
   ========================================================================== */

.shop-vitrina {
  display: grid;
  gap: 20px;
}

/* ------------------------------------------------------------------ фильтры */
.shop-filtry {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: end;
  gap: 12px 14px;
  padding: 18px 20px;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: var(--news-radius-lg);
  background: #ffffff;
  box-shadow: var(--news-shadow);
}

.shop-filtr {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.shop-filtr__podpis {
  font-size: var(--news-font-meta);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--news-text-muted);
}

.shop-filtr select,
.shop-filtr input {
  width: 100%;
  min-width: 0;
  min-height: var(--news-control-height, 42px);
  padding: 0 12px;
  border: 1px solid rgba(17, 17, 17, 0.14);
  border-radius: 12px;
  background: #fff;
  font: inherit;
  font-size: 15px;
  color: var(--news-text);
}

.shop-filtr__para {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.shop-filtry__sbros {
  min-height: var(--news-control-height, 42px);
  padding: 0 18px;
  border: 1px solid rgba(17, 17, 17, 0.14);
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--news-text-muted);
  cursor: pointer;
}

.shop-filtry__sbros:hover {
  color: var(--news-text);
  border-color: rgba(17, 17, 17, 0.3);
}

.shop-filtry__schet {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--news-font-small);
  color: var(--news-text-muted);
}

/* ------------------------------------------------------------------ карточки */
.shop-setka {
  /* shop-setka--tri: по три в ряд — на широком экране `auto-fill` ставил по
     пять, и машины становились размером с почтовую марку. */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

/* Рамка, ссылка, снимок и тело карточки описаны ОДИН раз для всех пяти видов
   карточек — в конце 17-stranicy.css («Единый слой»). Здесь только то, чем
   витрина отличается: заглушка без фото, название, строка характеристик. */

.shop-card__media--pusto {
  background: repeating-linear-gradient(45deg, #efefef, #efefef 10px, #e7e7e7 10px, #e7e7e7 20px);
}

.shop-card__title {
  margin: 0;
  font-family: var(--news-font-sans);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
}

.shop-card__meta {
  margin: 0;
  font-size: var(--news-font-small);
  color: var(--news-text-muted);
}

/* -------------------------------------------------------------------- цена */
.shop-cena {
  display: grid;
  gap: 10px;
}

.shop-card__cena .shop-cena {
  display: block;
  font-family: var(--news-font-sans);
  font-size: 18px;
  font-weight: 800;
  color: var(--news-text);
}

.shop-card__cena .shop-cena--zapros {
  font-size: 15px;
  font-weight: 700;
  color: var(--news-text-muted);
}

.shop-cena__eyebrow {
  margin: 0;
  font-size: var(--news-font-meta);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--news-text-muted);
}

.shop-cena__itog {
  margin: 0;
  font-family: var(--news-font-sans);
  font-size: clamp(28px, 4vw, 36px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.shop-cena__note {
  margin: 0;
  font-size: var(--news-font-meta);
  line-height: 1.5;
  color: var(--news-text-muted);
}

/* Видна только вошедшему в админку: почему цена не посчиталась. */
.shop-cena__podskazka {
  display: block;
  margin-top: 6px;
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(200, 60, 40, 0.1);
  font-size: 11px;
  color: #a33;
}

.shop-pusto {
  margin: 0;
  padding: 28px 20px;
  border: 1px dashed rgba(17, 17, 17, 0.16);
  border-radius: var(--news-radius-lg);
  text-align: center;
  color: var(--news-text-muted);
}

@media (max-width: 760px) {
  .shop-filtry {
    grid-template-columns: 1fr 1fr;
    padding: 16px;
  }

  .shop-filtr--diapazon,
  .shop-filtry__sbros {
    grid-column: 1 / -1;
  }
}

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

/* Заголовок раздела магазина.
   🔴 Общий .section-heading — это флекс с разгоном по краям: он рассчитан на
   пару «заголовок слева, ссылка справа». Положив в него надзаголовок и h1,
   получаешь их по разным углам. В магазине это одна колонка. */
.shop-body .section-heading {
  display: block;
}

.shop-body .section-heading h1 {
  margin: 0;
  font-weight: 800;
  letter-spacing: var(--news-track-title);
  font-size: clamp(30px, 3.6vw, 42px);
  line-height: 1.02;
}

/* --------------------------------------------------------------- карточка */
.shop-karta__verh {
  /* `stretch` вместо `start`: правый столбец подтягивается к низу галереи,
     когда он короче, и не висит в воздухе. Содержимое внутри столбца
     по-прежнему прижато к верху — за это отвечает `align-content: start`
     у самой сводки. */
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 1fr);
  gap: 24px;
  /* 🔴 Ни `stretch`, ни растяжка: тянется всегда та колонка, что короче, и
     под ней появляется пустая белая плита. Обе колонки начинаются сверху. */
  align-items: start;
}

.shop-karta__media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--news-radius-lg);
  background: repeating-linear-gradient(45deg, #efefef, #efefef 10px, #e7e7e7 10px, #e7e7e7 20px);
}

.shop-karta__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shop-karta__svodka {
  display: grid;
  gap: 18px;
  align-content: start;
  padding: 22px 24px;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: var(--news-radius-lg);
  background: #fff;
  box-shadow: var(--news-shadow);
}

.shop-karta__title {
  margin: 0;
  font-family: var(--news-font-sans);
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

/* ---------------------------------------------------------------- заявка */
.shop-zayavka {
  display: grid;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid rgba(17, 17, 17, 0.1);
}

.shop-zayavka__podpis {
  margin: 0;
  font-size: var(--news-font-meta);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--news-text-muted);
}

/* Три кнопки связи — столбиком во всю ширину колонки на любом экране.
   🔴 Было flex с переносом: на 390 столбик 169/203/119 px с рваным правым
   краем, на 1280 WhatsApp уезжал один на вторую строку. Пополам две нижние
   не встают: «Написать в Telegram» шире половины колонки (332/2 = 166 px).
   Вид самой кнопки — в едином слое (17-stranicy.css). */
.shop-zayavka__knopki {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.shop-zayavka__chasy {
  margin: 0;
  font-size: var(--news-font-meta);
  color: var(--news-text-muted);
}

/* ------------------------------------------------------- характеристики */
.shop-harakteristiki {
  margin-top: 28px;
}

.shop-harakteristiki__title {
  margin: 0 0 14px;
  font-family: var(--news-font-sans);
  font-size: 22px;
  font-weight: 800;
}

.shop-harakteristiki__list {
  /* Три колонки вместо `auto-fit`. 🔴 На широком экране вставало четыре, а
     пунктов девять — последний оставался один в ряду со своей пунктирной
     чертой посреди пустоты. Это и есть «висящие линии». */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 28px;
  margin: 0;
}

@media (max-width: 760px) {
  .shop-harakteristiki__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .shop-harakteristiki__list { grid-template-columns: minmax(0, 1fr); }
}

.shop-harakteristiki__list > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(17, 17, 17, 0.14);
}

.shop-harakteristiki__list dt {
  color: var(--news-text-muted);
  font-size: var(--news-font-small);
}

.shop-harakteristiki__list dd {
  margin: 0;
  font-weight: 700;
  text-align: right;
}

/* 🔴 На 768 две колонки давали галерею 387×258 рядом со сводкой 700 px —
   под фото пустота. Ниже 1180 колонок две, только если каждой достаётся
   не меньше 420 px (1024 — да, 768 — нет), иначе одна; порог для этого не
   нужен, сетка решает сама. */
@media (max-width: 1180px) {
  .shop-karta__verh {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  }
}

/* «Цена по запросу» набрана тем же кеглем, что и название, и спорит с ним за
   внимание. Настоящая цифра — главное на карточке, отсутствие цены — нет. */
.shop-karta__svodka .shop-cena--zapros .shop-cena__itog {
  font-size: 24px;
  color: var(--news-text-muted);
}

/* «Купить» в меню на телефоне — заголовок группы, а не пункт: ссылка ниже.
   Набираем его так же, как пункты, иначе он выпадает из ритма списка. */
.news-mobile-menu__zagolovok {
  width: fit-content;
  font-size: 22px;
  line-height: 1.15;
  color: var(--news-text);
}

/* ==========================================================================
   Карточки витрины: одинаковая высота и видимая кнопка перехода.
   🔴 Было: кликабельна вся карточка, но снаружи это не видно — человек не
   понимает, куда нажимать. И высоты гуляли из-за разной длины названий.
   ========================================================================== */

/* (ссылка и тело карточки — единый слой, 17-stranicy.css) */

/* Прижимаем кнопку к низу: у карточек разной длины названия она всё равно
   оказывается на одной линии. */
.shop-card__cta {
  margin-top: auto;
  padding-top: 12px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--news-accent);
}

.shop-card:hover .shop-card__cta,
.shop-card:focus-within .shop-card__cta {
  text-decoration: underline;
}

/* Панель подбора: компонент тот же, что у новостей, поэтому своих правил
   почти не нужно — только диапазоны «от/до», которых в новостях нет. */
.shop-filtry .shop-filtr--diapazon .shop-filtr__para {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.shop-filtry .shop-filtr--diapazon input {
  width: 100%;
  min-width: 0;
  min-height: var(--news-control-height, 42px);
  padding: 0 12px;
  border: 1px solid rgba(17, 17, 17, 0.14);
  border-radius: 12px;
  background: #fff;
  font: inherit;
  font-size: 15px;
}

.shop-filtry__schet {
  margin: 10px 0 0;
  font-size: var(--news-font-small);
  color: var(--news-text-muted);
}

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

.shop-tipy {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: 4px;
  scrollbar-width: thin;
}

.shop-tipy__punkt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid rgba(17, 17, 17, 0.14);
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--news-text-muted);
  white-space: nowrap;
  cursor: pointer;
}

.shop-tipy__punkt:hover {
  color: var(--news-text);
  border-color: rgba(17, 17, 17, 0.3);
}

.shop-tipy__punkt.is-vybran {
  border-color: var(--news-accent);
  background: var(--news-accent);
  color: #fff;
}

.shop-tipy__schet {
  font-size: 11px;
  font-weight: 700;
  opacity: 0.66;
}

/* 🔴 Панель подбора у новостей рассчитана на четыре фильтра в строке
   (`repeat(4, ...) auto`). В каталоге их семь, и последние уезжали за край
   экрана. Здесь сетка переносится сама. */
.shop-vitrina .filters-grid {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.shop-vitrina .filters-grid .shop-filtry__sbros {
  align-self: end;
}

/* Ряд типов карточками — как на витрине мотосалона: фотография модели и
   название типа под ней. Слова без картинок читаются как список настроек,
   а не как каталог. */
.shop-tipy {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 2px 2px 10px;
  margin-bottom: 6px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.shop-tipy__punkt {
  display: grid;
  grid-template-rows: auto auto;
  justify-items: center;
  gap: 8px;
  flex: 0 0 auto;
  width: 176px;
  padding: 12px 12px 14px;
  border: 1px solid rgba(17, 17, 17, 0.1);
  border-radius: var(--news-radius-md, 18px);
  background: #fff;
  font: inherit;
  cursor: pointer;
  scroll-snap-align: start;
  transition: border-color 0.16s ease, transform 0.16s ease;
}

.shop-tipy__punkt:hover {
  transform: translateY(-2px);
  border-color: rgba(17, 17, 17, 0.28);
}

.shop-tipy__punkt.is-vybran {
  border-color: var(--news-accent);
  box-shadow: inset 0 0 0 1px var(--news-accent);
}

.shop-tipy__foto {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 12px;
  background: repeating-linear-gradient(45deg, #efefef, #efefef 8px, #e7e7e7 8px, #e7e7e7 16px);
}

.shop-tipy__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shop-tipy__imya {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--news-text);
  text-align: center;
}

.shop-tipy__punkt.is-vybran .shop-tipy__imya {
  color: var(--news-accent);
}

.shop-tipy__schet {
  font-size: 11px;
  font-weight: 700;
  color: var(--news-text-muted);
}

/* «Все» — без фотографии: у него нет одной машины-представителя. */
.shop-tipy__punkt--vse {
  align-content: center;
  width: 118px;
}

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

/* ==========================================================================
   Ряд типов: иконка кузова вместо фотографии.
   🔴 Фотография «первой машины такого типа» случайна: сегодня чёрный пикап,
   завтра белый — ряд каждый раз выглядит иначе. Иконка обозначает ТИП и не
   зависит от наполнения. Счётчик под названием убран: он ничего не решает,
   а строку занимает.
   ========================================================================== */

.shop-tipy__punkt {
  grid-template-rows: auto auto;
  width: 148px;
  padding: 14px 12px 12px;
  color: var(--news-text-muted);
}

.shop-tipy__ramka {
  display: grid;
  place-items: center;
  width: 100%;
  height: 46px;
}

.shop-tipy__ikonka {
  width: 76px;
  height: 38px;
  color: inherit;
}

.shop-tipy__punkt.is-vybran {
  color: var(--news-accent);
}

.shop-tipy__punkt:hover {
  color: var(--news-text);
}

/* 🔴 Панель подбора у новостей — сетка ровно на четыре фильтра в строке.
   В каталоге их семь, и лишние уезжали за край. Флекс переносит сам, сколько
   бы фильтров ни задали настройкой. */
.shop-vitrina .filters-bar .filters-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px 14px;
}

.shop-vitrina .filters-bar .filters-grid > label {
  flex: 1 1 168px;
  min-width: 0;
}

.shop-vitrina .filters-bar .filters-grid > .shop-filtry__sbros {
  flex: 0 0 auto;
}

/* ==========================================================================
   Правки после осмотра витрины.
   ========================================================================== */

/* 🔴 Выбранная плитка заливалась акцентом, а иконка и подпись красились тем же
   акцентом — синее по синему, плитка выглядела пустым прямоугольником.
   Выбор показываем рамкой, а не заливкой. */
.shop-tipy__punkt.is-vybran {
  background: #fff;
  border-color: var(--news-accent);
  box-shadow: inset 0 0 0 1px var(--news-accent);
  color: var(--news-accent);
}

.shop-tipy__punkt.is-vybran .shop-tipy__imya {
  color: var(--news-accent);
}

/* 🔴 Подписи фильтров обрезались слева: я задал пунктам жёсткую основу
   (flex: 1 1 168px), и при семи фильтрах они сжимались ниже собственной
   ширины. Подпись у этого компонента стоит СБОКУ и сжиматься не умеет.
   Пусть пункты занимают столько, сколько нужно, и переносятся. */
.shop-vitrina .filters-bar .filters-grid > label {
  flex: 0 1 auto;
  min-width: 0;
}

.shop-vitrina .filters-bar .filters-grid > label > span {
  flex: 0 0 auto;
}

/* Плитка с настоящей фотографией: снимок всегда выигрывает у иконки, поэтому
   как только у типа появляется живое фото — показываем его, а иконка остаётся
   запасным вариантом. */
.shop-tipy__punkt--foto .shop-tipy__ramka {
  height: 62px;
  border-radius: 12px;
  overflow: hidden;
  background: #f1f1f1;
}

.shop-tipy__punkt--foto .shop-tipy__ramka img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shop-tipy__ikonka {
  width: 84px;
  height: 42px;
}

/* Иконки набора Tabler квадратные 24×24 — под них своя рамка. */
.shop-tipy__ikonka {
  width: 44px;
  height: 44px;
}

.shop-tipy__ramka {
  height: 48px;
}

/* ==========================================================================
   Подбор хештегами (16.09.2026).

   Заменил выпадающие списки: они прятали ассортимент и позволяли выбрать
   только одно значение. Строка = признак, хештег = значение, выбирается
   сколько угодно. Оформление намеренно тихое — подбор стоит НАД товаром и не
   должен с ним спорить за внимание.
   ========================================================================== */

.shop-podbor {
  display: grid;
  gap: 0;
  padding: 6px 20px 14px;
  border: 1px solid var(--news-stroke);
  border-radius: var(--news-radius-lg);
  background: var(--news-surface);
  box-shadow: var(--news-shadow);
}

.shop-podbor__shapka {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 4px 0;
}

.shop-podbor__zagolovok {
  margin: 0;
  font-size: var(--news-font-meta);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--news-text-muted);
}

.shop-podbor__schet {
  margin: 0;
  margin-right: auto;
  font-size: var(--news-font-small);
  font-variant-numeric: tabular-nums;
  color: var(--news-text-muted);
}

/* Счёта может не быть — тогда кнопка сброса всё равно уходит вправо. */
.shop-podbor__schet[hidden] + .shop-podbor__sbros {
  margin-left: auto;
}

.shop-podbor__sbros {
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid var(--news-stroke-strong);
  border-radius: 999px;
  background: var(--news-surface);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--news-text-muted);
  cursor: pointer;
}

.shop-podbor__sbros:hover {
  border-color: var(--news-text);
  color: var(--news-text);
}

/* Строка признака: подпись держит свою колонку, значения занимают остаток.
   Колонка подписи фиксированной ширины — иначе строки не выстраиваются
   по левому краю и список хештегов читается как мешанина. */
.shop-podbor__ryad {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  align-items: baseline;
  gap: 10px 14px;
  padding: 12px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.shop-podbor__podpis {
  font-size: var(--news-font-meta);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--news-text-soft);
}

.shop-podbor__znacheniya {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.shop-teg {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--news-stroke);
  border-radius: 999px;
  background: var(--news-surface-soft);
  font: inherit;
  font-family: var(--news-font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--news-text);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.shop-teg:hover {
  border-color: var(--news-stroke-strong);
  background: var(--news-surface);
}

.shop-teg.is-vybran {
  border-color: var(--news-accent);
  background: var(--news-accent);
  color: #fff;
}

.shop-teg:focus-visible {
  outline: 2px solid var(--news-accent);
  outline-offset: 2px;
}

/* Свёрнутый хвост длинного списка. */
.shop-teg--pod-katom {
  display: none;
}

.shop-teg--esche {
  background: transparent;
  border-style: dashed;
  color: var(--news-text-muted);
}

/* Строка «от/до»: те же габариты, что у хештегов, — иначе она выпадает из ряда. */
.shop-podbor__znacheniya--para {
  align-items: center;
  gap: 8px;
}

.shop-podbor__chislo {
  width: 104px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--news-stroke);
  border-radius: 999px;
  background: var(--news-surface-soft);
  font: inherit;
  font-family: var(--news-font-sans);
  font-size: 14px;
  color: var(--news-text);
}

/* 🔴 Браузерные стрелочки-крутилки у числового поля — чужой элемент: они не
   из нашего набора и в разных браузерах выглядят по-разному. Поле теперь
   текстовое с числовой клавиатурой, но правило оставляем: оно страхует, если
   поле когда-нибудь снова сделают числовым. */
.shop-podbor__chislo::-webkit-outer-spin-button,
.shop-podbor__chislo::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.shop-podbor__chislo {
  -moz-appearance: textfield;
  appearance: textfield;
  font-variant-numeric: tabular-nums;
}

.shop-podbor__chislo:focus {
  outline: none;
  border-color: var(--news-accent);
  background: var(--news-surface);
}

.shop-podbor__tire {
  color: var(--news-text-soft);
}

@media (max-width: 760px) {
  .shop-podbor {
    padding: 4px 14px 12px;
  }

  /* Подпись уходит НАД значениями: в 92 пикселя колонки на телефоне
     не остаётся места под сами хештеги. */
  .shop-podbor__ryad {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 10px 0;
  }

  /* Хештеги листаются вбок одной строкой: марок бывает полсотни, и
     переносом они съедают пол-экрана раньше первой машины. */
  .shop-podbor__znacheniya {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
    margin: 0 -14px;
    padding-left: 14px;
    padding-right: 14px;
  }

  .shop-podbor__znacheniya::-webkit-scrollbar {
    display: none;
  }

  .shop-teg {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  /* В свёрнутом виде листать нечего — на телефоне показываем всё. */
  .shop-teg--pod-katom {
    display: inline-flex;
  }

  .shop-teg--esche {
    display: none;
  }
}

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

/* ==========================================================================
   Год выпуска: выбор из сетки.

   🔴 Было поле с числом и стрелками — владелец: «стрелочками надо 2026 раз
   нажать, нелогично». Год — не количество, его выбирают из готового списка.
   Сетка показывает только те годы, что есть в каталоге, и умеет промежуток:
   первое нажатие — начало, второе — конец.
   ========================================================================== */

.shop-podbor__ryad[data-shop-gody] .shop-podbor__znacheniya {
  position: relative;
  align-items: center;
}

.shop-god__vyzov {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid var(--news-stroke);
  border-radius: 999px;
  background: var(--news-surface-soft);
  font: inherit;
  font-family: var(--news-font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--news-text);
  cursor: pointer;
}

.shop-god__vyzov::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: 0.45;
}

.shop-god__vyzov:hover {
  border-color: var(--news-stroke-strong);
  background: var(--news-surface);
}

.shop-god__vyzov.is-vybran {
  border-color: var(--news-accent);
  background: var(--news-accent);
  color: #fff;
}

/* Сама сетка. Всплывает над витриной, поэтому ей нужны и тень, и фон:
   на прозрачной панели годы легли бы поверх карточек. */
.shop-god {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--news-stroke);
  border-radius: 18px;
  background: var(--news-surface);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.14);
}

.shop-god__podskazka {
  margin: 0;
  font-size: var(--news-font-meta);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--news-text-soft);
}

.shop-god__setka {
  display: grid;
  grid-template-columns: repeat(4, 72px);
  gap: 6px;
}

.shop-god__yach {
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--news-surface-soft);
  font: inherit;
  font-family: var(--news-font-sans);
  font-size: 15px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--news-text);
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.shop-god__yach:hover {
  background: rgba(15, 76, 129, 0.12);
}

/* Края промежутка — залиты, середина подкрашена: так видно, что выбран
   не один год, а отрезок. */
.shop-god__yach.is-vnutri {
  background: rgba(15, 76, 129, 0.12);
  color: var(--news-accent);
}

.shop-god__yach.is-kray {
  background: var(--news-accent);
  color: #fff;
}

.shop-god__lyuboy {
  min-height: 34px;
  border: 1px solid var(--news-stroke);
  border-radius: 999px;
  background: var(--news-surface);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--news-text-muted);
  cursor: pointer;
}

.shop-god__lyuboy:hover {
  border-color: var(--news-text);
  color: var(--news-text);
}

@media (max-width: 760px) {
  /* Боковая прокрутка значений — только у строк со списком. У года внутри
     лежит всплывающая сетка, и прокрутка обрезала бы её. */
  .shop-podbor__ryad[data-shop-gody] .shop-podbor__znacheniya {
    overflow: visible;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .shop-god__setka {
    grid-template-columns: repeat(3, 1fr);
  }

  .shop-god {
    left: 0;
    right: 0;
  }
}

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

/* ==========================================================================
   Ряд типов кузова — снимками, как на витрине мотосалона (16.09.2026).

   🔴 Иконки убраны совсем. У мотосалона этот ряд держится СТУДИЙНЫМИ СНИМКАМИ
   техники на белом: ни рамок, ни коробок, ни теней — только фотография и
   подпись под ней. Любая иконка на этом месте проигрывает не качеством
   рисунка, а жанром.

   Все прежние пласты оформления плиток (их накопилось четыре) гасим здесь
   явно: селекторы совпадают, и без сброса от них остаются рамки и фон.
   ========================================================================== */

.shop-tipy {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px 0 2px;
  margin: 0;
}

.shop-tipy::-webkit-scrollbar {
  display: none;
}

.shop-tipy__punkt {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: grid;
  justify-items: center;
  gap: 2px;
  width: 190px;
  padding: 6px 8px 10px;
  /* Сброс прежних пластов. */
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font: inherit;
  cursor: pointer;
}

.shop-tipy__foto {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 104px;
}

.shop-tipy__foto img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  /* Снимок на белом: вписываем целиком, не обрезая, иначе у машины
     отрежется нос или колесо. */
  object-fit: contain;
  transition: transform 0.18s ease;
}

.shop-tipy__punkt:hover .shop-tipy__foto img {
  transform: translateY(-2px) scale(1.03);
}

.shop-tipy__imya {
  font-family: var(--news-font-sans);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  text-align: center;
  color: var(--news-text-muted);
  transition: color 0.16s ease;
}

.shop-tipy__punkt:hover .shop-tipy__imya {
  color: var(--news-text);
}

/* Выбранный тип: подпись акцентом и тонкая черта под ней — ровно столько,
   сколько нужно, чтобы понять выбор, и не столько, чтобы спорить с фото. */
.shop-tipy__punkt.is-vybran .shop-tipy__imya {
  color: var(--news-accent);
  box-shadow: inset 0 -2px 0 0 var(--news-accent);
  padding-bottom: 3px;
}

.shop-tipy__punkt:focus-visible {
  outline: 2px solid var(--news-accent);
  outline-offset: 2px;
  border-radius: 12px;
}

@media (max-width: 760px) {
  .shop-tipy {
    margin: 0 -14px;
    padding-left: 14px;
    padding-right: 14px;
  }

  .shop-tipy__punkt {
    width: 136px;
  }

  .shop-tipy__foto {
    height: 76px;
  }

  .shop-tipy__imya {
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shop-tipy__foto img,
  .shop-tipy__imya {
    transition: none;
  }
}

/* ==========================================================================
   Ряд типов: центровка и стрелки по бокам (16.09.2026).

   Владелец: «их надо отцентровать… и в целом стрелочки добавятся по бокам,
   так как классы будут увеличиваться, нужно это предусмотреть».

   🔴 Центруем ТОЛЬКО пока ряд помещается: у прокручиваемой строки
   justify-content:center отрезает начало — до первых плиток нельзя домотать.
   Класс ставит скрипт, он же прячет стрелки, когда листать нечего.
   ========================================================================== */

.shop-tipy-obertka {
  position: relative;
  display: block;
}

.shop-tipy.is-po-centru {
  justify-content: center;
}

/* Место под стрелки, чтобы они не наезжали на крайние плитки. */
.shop-tipy {
  padding-left: 40px;
  padding-right: 40px;
}

.shop-tipy.is-po-centru {
  padding-left: 0;
  padding-right: 0;
}

.shop-tipy__strelka {
  position: absolute;
  top: 40px;
  z-index: 2;
  display: grid;
  place-items: center;
  /* 44 — минимальная цель для пальца; на 36 промахивались. */
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--news-stroke);
  border-radius: 999px;
  background: var(--news-surface);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  color: var(--news-text);
  cursor: pointer;
  transition: border-color 0.16s ease, color 0.16s ease;
}

.shop-tipy__strelka svg {
  width: 18px;
  height: 18px;
}

.shop-tipy__strelka--vlevo {
  left: 0;
}

.shop-tipy__strelka--vpravo {
  right: 0;
}

.shop-tipy__strelka:hover {
  border-color: var(--news-accent);
  color: var(--news-accent);
}

.shop-tipy__strelka:focus-visible {
  outline: 2px solid var(--news-accent);
  outline-offset: 2px;
}

@media (max-width: 760px) {
  /* На телефоне листают пальцем — стрелки только отнимают место. */
  .shop-tipy__strelka {
    display: none;
  }

  .shop-tipy {
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* 🔴 Прилипание («снап») не знало про поле под стрелки: первая плитка
   прилипала к краю САМОГО ряда, и лента при загрузке оказывалась сдвинутой на
   40 пикселей — левая стрелка появлялась там, где листать ещё нечего.
   scroll-padding объясняет прилипанию, где настоящее начало. */
.shop-tipy {
  scroll-padding-left: 40px;
  scroll-padding-right: 40px;
}

.shop-tipy.is-po-centru {
  scroll-padding-left: 0;
  scroll-padding-right: 0;
}

@media (max-width: 760px) {
  .shop-tipy {
    scroll-padding-left: 14px;
    scroll-padding-right: 14px;
  }
}

/* ==========================================================================
   Главная страница автосалона (16.09.2026).

   🔴 До этого дня корень сайта отдавал страницу установки MODX. Здесь только
   то, что можно показать честно: что мы делаем, куда возим, что везём сейчас
   и живая лента новостей. Сроков и цен «от» тут нарочно нет — не на чем их
   основывать, пока не заданы ставки.
   ========================================================================== */

.glav-shapka {
  display: grid;
  gap: 14px;
}

.glav-shapka__zagolovok {
  margin: 0;
  font-family: var(--news-font-sans);
  font-size: clamp(30px, 5vw, var(--news-font-display));
  font-weight: 800;
  line-height: var(--news-line-title);
  letter-spacing: var(--news-track-title);
  text-wrap: balance;
}

.glav-shapka__lead {
  margin: 0;
  max-width: 62ch;
  font-size: var(--news-font-lead);
  line-height: var(--news-line-lead);
  color: var(--news-text-muted);
}

/* Три маршрута — входы в каталог с уже выбранной страной. */
.glav-strany {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 6px;
}

.glav-strana {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 18px 20px;
  border: 1px solid var(--news-stroke);
  border-radius: var(--news-radius-lg);
  background: var(--news-surface);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.16s ease, transform 0.16s ease;
}

.glav-strana:hover {
  border-color: var(--news-accent);
  transform: translateY(-2px);
}

.glav-strana__imya {
  font-family: var(--news-font-sans);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.glav-strana__nota {
  font-size: var(--news-font-small);
  line-height: 1.45;
  color: var(--news-text-muted);
}

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

/* ---------------------------------------------------- витрина: узкие экраны */
/* 12 карточек на страницу: делятся и на три, и на две — сирот нет. */
@media (max-width: 760px) {
  .shop-setka {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .shop-setka {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------ витрина: страницы */
.shop-stranicy {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin-top: 26px;
}

/* Вид кнопки страницы — единый слой (17-stranicy.css); здесь состояния. */

.shop-stranicy__knopka:hover:not([disabled]) {
  border-color: var(--news-accent, #12457f);
  color: var(--news-accent, #12457f);
}

.shop-stranicy__knopka[aria-current="true"] {
  border-color: var(--news-accent, #12457f);
  background: var(--news-accent, #12457f);
  color: #fff;
}

.shop-stranicy__knopka[disabled] {
  opacity: 0.4;
  cursor: default;
}

.shop-stranicy__mnogotochie {
  padding: 0 4px;
  color: #6b6b6b;
}

/* ------------------------------------------------ значки марок в подборе */
.shop-teg--s-logo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.shop-teg__logo {
  /* Высота общая, ширина — по самому значку, но не шире 52px. 🔴 Раньше
     значок был квадратом 18×18: круглые марки (Mercedes) читались, а широкие
     (Aston Martin, Range Rover) ужимались в полоску 18×4 и пропадали —
     владелец: «лого Рендж Ровера не видно почти». */
  width: auto;
  height: 18px;
  max-width: 68px;
  object-fit: contain;
  /* 🔴 Не приглушать. Было opacity 0.75 «значок — подсказка»: тонкие буквы
     шильдика на четверть прозрачности бледнеют сильнее сплошной звезды
     Mercedes, и владелец видел Range Rover «бледнее соседей». */
  flex: none;
}

/* Широкий шильдик (слово, не эмблема; класс ставит сниппет по viewBox):
   чуть выше и шире, иначе буквы высотой 6px не читаются. */
.shop-teg__logo--shirokiy {
  height: 20px;
  max-width: 76px;
}

/* Выбранная кнопка синяя с белым текстом — значок тоже белый, чёрный на
   синем не виден. Значки одноцветные, поэтому инверсия безопасна. */
.shop-teg[aria-pressed="true"] .shop-teg__logo {
  filter: brightness(0) invert(1);
}

/* --------------------------------------- «Поделиться» на карточке витрины */
/* Кнопка лежит поверх нижнего края карточки: вся карточка — ссылка, поэтому
   кнопка вынесена из неё и позиционируется отдельно. */
.shop-card__share {
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 6px 12px;
  border: 1px solid rgba(17, 17, 17, 0.14);
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  color: #4a4a4a;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* На тачскрине наведения нет — там кнопка видна всегда. */
.shop-card:hover .shop-card__share,
.shop-card:focus-within .shop-card__share,
.shop-card__share:focus-visible {
  opacity: 1;
}

@media (hover: none) {
  .shop-card__share {
    opacity: 1;
  }
}

.shop-card__share:hover {
  border-color: var(--news-accent, #12457f);
  color: var(--news-accent, #12457f);
}

/* ------------------------------------------------- ползунок цены в подборе */
/* Владелец 17.09: «непонятно куда крутить, сколько заполнено». Поэтому у
   ползунка три этажа: сверху — плашки «от … / до …» с тем, что выбрано;
   посередине — дорожка с двумя ручками; снизу — края всего диапазона.
   Без нижних подписей человек не знает, между какими числами он двигает;
   без плашек — что уже выбрал. Плашки и ручки делаем того же размера и
   цвета, что кнопки подбора: так строка цены не выпадает из ряда.
   Сами поля-ползунки прозрачные и без собственной дорожки: видимую рисуем
   мы, иначе в каждом браузере она своя. */

.shop-podbor__znacheniya--polzunok {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 520px;
}

.shop-polzunok {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

/* Этаж 1: что выбрано. */
.shop-polzunok__podpis {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-variant-numeric: tabular-nums;
}

.shop-polzunok__plashka {
  display: inline-flex;
  align-items: center;
  min-height: var(--news-pill-height, 32px);
  padding: 0 var(--news-pill-pad-x, 12px);
  border: 1px solid var(--news-stroke);
  border-radius: 999px;
  background: var(--news-surface-soft);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--news-text);
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

/* Ручку сдвинули с края — её плашка загорается: видно, ЧТО именно сузили. */
.shop-polzunok__plashka.is-sdvinuta {
  border-color: var(--news-accent);
  background: var(--news-surface);
  color: var(--news-accent);
  font-weight: 700;
}

/* Ручку держат или она в фокусе — её плашка залита, как выбранная кнопка:
   человек видит, какое из двух чисел сейчас меняет. */
.shop-polzunok__plashka.is-aktivna {
  border-color: var(--news-accent);
  background: var(--news-accent);
  color: #fff;
}

/* Этаж 2: дорожка. Высота — под ручку 24px плюс кольцо при наведении. */
.shop-polzunok__dorozhka {
  position: relative;
  height: 32px;
}

/* Серая подложка во всю ширину — это «весь диапазон». */
.shop-polzunok__dorozhka::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 8px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.12);
}

/* Синий кусок между ручками — выбранный отрезок. */
.shop-polzunok__zapolnenie {
  position: absolute;
  top: 50%;
  height: 8px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: var(--news-accent);
}

/* 🔴 Оба поля занимают всю дорожку и лежат друг на друге. Чтобы нижняя ручка
   не была навсегда перекрыта верхним полем, сами поля событий не ловят —
   ловят только ручки (правила ниже). */
.shop-polzunok__ruchka {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 32px;
  margin: 0;
  padding: 0;
  background: none;
  appearance: none;
  -webkit-appearance: none;
  pointer-events: none;
  outline: none;
}

.shop-polzunok__ruchka::-webkit-slider-runnable-track {
  height: 32px;
  background: none;
  border: 0;
}

.shop-polzunok__ruchka::-moz-range-track {
  height: 32px;
  background: none;
  border: 0;
}

/* Ручка: белый круг с синим ободом, как у выбранной кнопки, но пустой внутри —
   чтобы читалась как «то, за что тянут». 🔴 В WebKit ручка сама по дорожке
   не центрируется: margin-top = (дорожка − ручка) / 2. */
.shop-polzunok__ruchka::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  margin-top: 4px;
  border: 3px solid var(--news-accent);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  cursor: grab;
  transition: box-shadow 0.15s ease, background-color 0.15s ease;
}

.shop-polzunok__ruchka::-moz-range-thumb {
  pointer-events: auto;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  border: 3px solid var(--news-accent);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  cursor: grab;
  transition: box-shadow 0.15s ease, background-color 0.15s ease;
}

/* Наведение — светлое кольцо: «это можно тянуть». */
.shop-polzunok__ruchka:hover::-webkit-slider-thumb {
  box-shadow: 0 0 0 6px rgba(15, 76, 129, 0.16), 0 1px 4px rgba(0, 0, 0, 0.25);
}

.shop-polzunok__ruchka:hover::-moz-range-thumb {
  box-shadow: 0 0 0 6px rgba(15, 76, 129, 0.16), 0 1px 4px rgba(0, 0, 0, 0.25);
}

/* Тянут — ручка заливается синим, кольцо гуще. */
.shop-polzunok__ruchka:active::-webkit-slider-thumb {
  background: var(--news-accent);
  box-shadow: 0 0 0 8px rgba(15, 76, 129, 0.22);
  cursor: grabbing;
}

.shop-polzunok__ruchka:active::-moz-range-thumb {
  background: var(--news-accent);
  box-shadow: 0 0 0 8px rgba(15, 76, 129, 0.22);
  cursor: grabbing;
}

/* Фокус с клавиатуры — двойное кольцо (белое + синее), видно на любом фоне.
   🔴 outline на ручке-псевдоэлементе Safari не рисует, поэтому тень. */
.shop-polzunok__ruchka:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--news-accent);
}

.shop-polzunok__ruchka:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--news-accent);
}

/* Этаж 3: края диапазона под концами дорожки. */
.shop-polzunok__kraya {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  line-height: 1.2;
  color: var(--news-text-muted);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
  .shop-podbor__znacheniya--polzunok {
    max-width: none;
  }
}

@media (max-width: 760px) {
  /* На телефоне ряды подбора листаются вбок и режут всё, что выходит за
     край, — кольцо вокруг ручки резалось бы. Ползунку листание не нужно. */
  .shop-podbor__znacheniya--polzunok {
    flex-wrap: wrap;
    overflow: visible;
    margin: 0;
    padding: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shop-polzunok__plashka,
  .shop-polzunok__ruchka::-webkit-slider-thumb,
  .shop-polzunok__ruchka::-moz-range-thumb {
    transition: none;
  }
}

/* ====================================================== ГЛАВНАЯ СТРАНИЦА */
/* Строй — как у новостного портала news.msn1.ru (образец владельца, 17.09):
   сверху «главный материал» — крупный снимок с плашкой-стеклом, справа
   колонка; ниже — разделы в белых карточках через ОДИН отступ 24px
   (`.news-section` из 03-layout). Прежние два баннера-плитки сняты: их
   слова («доставка из Европы», «любая комплектация») уже стоят в оффере,
   а снимки теперь — у героя. */

/* --------------------------------------------------- заголовок страницы */
/* Обещание салона — h1 и первое, что видно; без карточки, как заголовок
   страницы над главным материалом. 🔴 Раньше оно лежало белой плитой ПОД
   героем: страница открывалась именем одной машины, а h1 стоял ниже h2.
   Прежние правила .glav-shapka__zagolovok/.glav-shapka__lead — выше в файле. */
.listing-layout > .glav-shapka {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr);
  gap: 16px 26px;
  align-items: end;
  margin: 0 0 24px;
  padding: 0 4px;
}

.glav-shapka__slova {
  display: grid;
  gap: 8px;
}

.glav-shapka__slova .section-heading__eyebrow {
  margin: 0;
}

.listing-layout > .glav-shapka .glav-shapka__zagolovok {
  font-size: clamp(28px, 3.4vw, 44px);
}

.listing-layout > .glav-shapka .glav-shapka__lead {
  margin: 0 0 6px;
  max-width: none;
  font-size: var(--news-font-small);
  line-height: 1.55;
}

/* ------------------------------------------------------------- герой */
/* Сетка, снимок, плашка, метки и кнопка — классы портала `listing-showcase__*`
   (05-listing.css). Здесь только то, чем автомобиль отличается от новости. */

/* Новостей нет — герой один во всю ширину, без пустой правой колонки. */
.glav-geroy--odin {
  grid-template-columns: minmax(0, 1fr);
}

/* 🔴 У портала блок вытянут по вертикали (430–590px) под фото 16:9 и плашку
   с заголовком в шесть строк. Автомобильный снимок — 2:1 и шире, а имя машины
   короткое: при высоте портала от машины оставалась бы одна дверь. Ниже и
   плашка — по содержимому, а не 414px. Высоту всё равно раздаёт соседняя
   колонка (align-items: stretch у образца). */
.glav-geroy .listing-showcase__feature {
  min-height: clamp(400px, 38vw, 540px);
}

/* Кадр по центру: студийный снимок и так с воздухом по краям; сдвиг «вверх»
   у портала рассчитан на бильд-фото, у машины он режет колёса. */
.glav-geroy .listing-showcase__media img {
  object-position: 50% 50%;
}

.glav-geroy .listing-showcase__feature-overlay {
  grid-template-rows: none;
  grid-auto-rows: auto;
  gap: 14px;
  min-height: 0;
  /* Уже, чем у портала (82%): плашка лежит на переде машины, и чем она уже
     и ниже, тем больше кузова видно. Кнопка «Подробнее о машине» — 274px
     (у портала «Открыть материал» — 247px), метки при ней складываются
     столбиком слева — так же, как три метки у портала. */
  max-width: min(66%, 500px);
}

/* Заголовок — h2, а не h1 как у портала: h1 главной — оффер «Привезём
   машину…». Начертание — то же, что задаёт 04-components для h1 в плашке. */
.glav-geroy__zagolovok {
  margin: 0;
  max-width: none;
  font-weight: 800;
  font-size: clamp(30px, 3.2vw, 46px);
  letter-spacing: var(--news-track-title);
  -webkit-line-clamp: 3;
}

/* Цена под ключ — то, чего у новости нет. Строку отдаёт asn1ShopCena;
   его собственные стили рассчитаны на белую карточку, здесь фон тёмный. */
.glav-geroy__cena {
  margin: 0;
  color: #fff;
  font-family: var(--news-font-sans);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.glav-geroy__cena .shop-cena {
  display: inline;
  font: inherit;
  color: inherit;
}

.glav-geroy__cena .shop-cena--zapros {
  font-size: 0.8em;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.82);
}

/* Подводка на широком экране спрятана: она стандартная («…привозит под
   заказ»), а каждая её строка поднимает плашку на 25px и прячет капот.
   На телефоне плашка стоит ПОД снимком, там подводка ничего не закрывает —
   и она возвращается (см. узкий экран). */
.glav-geroy .listing-showcase__feature-excerpt {
  display: none;
  -webkit-line-clamp: 2;
}

/* --------------------------------------------- правая колонка: новость */
/* У портала правая колонка — 800px с тремя абсолютно поставленными
   карточками. У нас одна новость, и колонка живёт обычным потоком:
   заголовок, карточка, ссылка «Все новости». Высоту потом подхватывает
   герой слева. */
.glav-geroy .listing-showcase__promo {
  height: auto;
  min-height: 0;
}

.glav-novost {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 14px;
  height: 100%;
  min-height: 0;
  padding: 20px;
}

.glav-novost .listing-showcase__carousel-head,
.glav-novost .listing-showcase__carousel-footer {
  position: static;
  inset: auto;
}

/* Подпись колонки — вид заголовка «Почитать ещё» у портала (05-listing,
   там правило висит на h2), но тегом <p>: это подпись, не раздел. Одной
   строкой: с ограничением 10ch «Свежая новость» ломалась на две и поднимала
   всю колонку вместе с героем. */
.glav-novost__zagolovok {
  margin: 0;
  font-family: var(--news-font-sans);
  font-size: clamp(var(--news-font-title), 2.8vw, var(--news-font-display));
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--news-text);
}

/* Карточка новости — канон `news-card`; 🔴 высоту раздаёт колонка, а не
   обложка: обложка держится на aspect-ratio. Колонка задаёт высоту герою
   слева, поэтому здесь всё компактно: обложка 2:1, заголовок до трёх строк,
   подводка до двух. Иначе герой вытягивался до 680px и от машины 2:1 в
   кадре оставалась середина без носа и хвоста. */
.glav-novost__karta {
  min-height: 0;
}

.glav-novost__karta .news-card__media {
  aspect-ratio: 2 / 1;
}

.glav-novost__karta .news-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.glav-novost__karta .news-card__lead {
  -webkit-line-clamp: 2;
}

/* -------------------------------------------------------------- кузова */
/* Плитки — канон `news-card` (04-components): белая карточка, снимок
   сверху, низ «Поделиться / Подробнее». Сетка и зазор — как у ленты
   новостей (`.news-grid`). 🔴 Высоту раздаёт карточка, а не снимок:
   `.news-card__media` — коробка с aspect-ratio, снимок в ней cover. */
.glav-kuzova__setka {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--news-space-lg);
  align-items: stretch;
}

/* Марки в подводке — одной-двумя строками, дальше многоточие. */
.glav-kuzov .news-card__lead {
  -webkit-line-clamp: 2;
}

/* --------------------------------------------------------------- марки */
/* Второй ряд того же раздела «Что возим»: подпись капителью и лента значков. */
.glav-marki {
  margin-top: 28px;
}

.glav-marki__podpis {
  margin: 0 0 12px;
}

.glav-marki__lenta {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

.glav-marka {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 12px;
  border: 1px solid var(--news-stroke);
  border-radius: var(--news-radius-md, 18px);
  background: var(--news-surface, #fff);
  text-decoration: none;
  color: inherit;
  text-align: center;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.glav-marka:hover {
  border-color: var(--news-accent);
  transform: translateY(-2px);
}

.glav-marka__logo {
  width: auto;
  height: 34px;
  max-width: 100%;
  object-fit: contain;
}

.glav-marka__imya {
  font-size: var(--news-font-small);
  font-weight: 700;
}

.glav-marka__schet {
  font-size: var(--news-font-meta);
  color: var(--news-text-muted);
}

/* ------------------------------------------------ «Как это работает» */
/* Третья подача блока (17.09). Первая — абзацы («вставил тупо текст»),
   вторая — плитки-факты и сетка вопросов («скучная, тупо блоки с текстом»,
   «не хватает картинок или иконок»). Теперь две вещи, которые хочется
   рассмотреть: разбор цены на трёх настоящих машинах со снимками
   (`.glav-cena`) и путь машины в пять шагов со значками Tabler, как этапы
   на /about/ (`.glav-put`). Текст ответов остался — но он привязан к шагу
   и значку, а не лежит сеткой. */

/* --- разбор цены: панель на мягком фоне, чтобы читалась как «прибор» --- */
.glav-cena {
  display: grid;
  gap: 20px;
  padding: 24px;
  border: 1px solid var(--news-stroke);
  border-radius: var(--news-radius-lg);
  background: var(--news-surface-soft, #f5f5f5);
}

.glav-cena__shapka {
  display: grid;
  gap: 6px;
  max-width: 76ch;
}

.glav-cena__zagolovok {
  margin: 0;
  font-family: var(--news-font-sans);
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: var(--news-track-title);
}

.glav-cena__lead {
  margin: 0;
  font-size: var(--news-font-small);
  line-height: 1.55;
  color: var(--news-text-muted);
}

.glav-cena__lead b {
  color: var(--news-text);
}

.glav-cena__lead a {
  color: var(--news-accent);
  font-weight: 700;
  text-decoration: none;
}

.glav-cena__lead a:hover {
  text-decoration: underline;
}

/* Три машины на выбор: снимок слева, роль капителью, имя, цена. Это
   кнопки, а не карточки: нажатие меняет разбор ниже. */
.glav-cena__vybor {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.glav-cena__mashina {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  gap: 2px 14px;
  align-items: center;
  min-width: 0;
  padding: 0 12px 0 0;
  border: 1px solid var(--news-stroke);
  border-radius: 16px;
  background: var(--news-surface, #fff);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.glav-cena__mashina:hover {
  border-color: var(--news-accent);
}

.glav-cena__mashina[aria-pressed="true"] {
  border-color: var(--news-accent);
  box-shadow: inset 0 0 0 1px var(--news-accent);
}

/* 🔴 object-fit работает только при заданной высоте коробки: снимки в
   каталоге и 480×640, и 480×226 — без фиксированной коробки кнопки были бы
   разной высоты. */
.glav-cena__foto {
  grid-row: 1 / 4;
  width: 96px;
  height: 92px;
  background: var(--news-surface-soft, #f5f5f5);
}

.glav-cena__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.glav-cena__rol {
  padding-top: 12px;
  font-size: var(--news-font-meta);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--news-accent);
}

.glav-cena__imya {
  font-family: var(--news-font-sans);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
}

.glav-cena__kratko {
  padding-bottom: 12px;
  font-size: var(--news-font-small);
  color: var(--news-text-muted);
  font-variant-numeric: tabular-nums;
}

/* --- итог и вывод --- */
.glav-cena__telo {
  display: grid;
  gap: 16px;
}

.glav-cena__verh {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 24px;
}

.glav-cena__itog {
  display: grid;
  gap: 4px;
}

.glav-cena__itog-podpis {
  font-size: var(--news-font-meta);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--news-text-muted);
}

.glav-cena__itog-summa {
  font-family: var(--news-font-sans);
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: var(--news-track-title);
  font-variant-numeric: tabular-nums;
}

.glav-cena__karta {
  font-size: var(--news-font-small);
  font-weight: 700;
  color: var(--news-accent);
  text-decoration: none;
}

.glav-cena__karta:hover {
  text-decoration: underline;
}

.glav-cena__vyvod {
  margin: 0;
  max-width: 44ch;
  font-size: var(--news-font-small);
  line-height: 1.5;
  color: var(--news-text-muted);
}

.glav-cena__vyvod b {
  color: var(--news-text);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* --- полоса долей --- */
/* Цвет доли задаётся один раз на пару «доля в полосе + метка в строке».
   Палитра проверена на дальтонизм и контраст (валидатор dataviz):
   соседние пары различимы и без цвета — их разделяет зазор 2px. */
.glav-cena__dolya--avto,
.glav-cena__stroka--avto { --dolya: #0f4c81; }
.glav-cena__dolya--dostavka,
.glav-cena__stroka--dostavka { --dolya: #7fb3e0; }
.glav-cena__dolya--poshlina,
.glav-cena__stroka--poshlina { --dolya: #c2410c; }
.glav-cena__dolya--sbor,
.glav-cena__stroka--sbor { --dolya: #9a9a9a; }
.glav-cena__dolya--util,
.glav-cena__stroka--util { --dolya: #e9a23b; }

.glav-cena__polosa {
  display: flex;
  gap: 2px;
  height: 22px;
}

/* 🔴 Сбор за оформление — 0,2 % суммы: без min-width его доля исчезала бы
   вовсе. 4px — видно, что строка есть, и она не врёт про размер. */
.glav-cena__dolya {
  flex: 0 1 auto;
  min-width: 4px;
  background: var(--dolya, #9a9a9a);
  transition: flex-basis 0.35s ease;
}

.glav-cena__dolya:first-child {
  border-radius: 4px 0 0 4px;
}

.glav-cena__dolya:last-child {
  border-radius: 0 4px 4px 0;
}

/* --- строки --- */
.glav-cena__stroki {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.glav-cena__stroka {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  gap: 0 12px;
  align-items: start;
  min-width: 0;
  padding: 10px 0;
  border-top: 1px solid var(--news-stroke);
}

.glav-cena__metka {
  width: 12px;
  height: 12px;
  margin-top: 4px;
  border-radius: 3px;
  background: var(--dolya, #9a9a9a);
}

.glav-cena__nazvanie {
  display: grid;
  gap: 2px;
  font-size: var(--news-font-small);
  font-weight: 700;
  line-height: 1.4;
}

.glav-cena__poyasnenie {
  font-style: normal;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.45;
  color: var(--news-text-muted);
}

.glav-cena__cifry {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-variant-numeric: tabular-nums;
}

.glav-cena__summa {
  font-size: var(--news-font-body);
  font-weight: 800;
  white-space: nowrap;
}

.glav-cena__procent {
  min-width: 5ch;
  font-size: var(--news-font-small);
  color: var(--news-text-muted);
  text-align: right;
  white-space: nowrap;
}

.glav-cena__snoska {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--news-text-muted);
}

/* --- путь машины: пять шагов, соединённых линией --- */
.glav-put__podpis {
  margin: 32px 0 14px;
}

.glav-put {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--news-space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.glav-shag {
  position: relative;
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}

/* Круг со значком — как `.onas-etap__krug` на /about/, но на белом:
   тонкая обводка цветом акцента вместо белой на тёмном. */
.glav-shag__krug {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 6px;
  border: 1.5px solid var(--news-accent);
  border-radius: 50%;
  color: var(--news-accent);
  background: var(--news-surface, #fff);
}

.glav-shag__krug svg {
  width: 26px;
  height: 26px;
}

/* Линия маршрута — от круга к следующему кругу через зазор сетки. */
.glav-shag:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 26px;
  left: 52px;
  right: calc(-1 * var(--news-space-lg));
  height: 1px;
  background: var(--news-stroke-strong);
}

.glav-shag__etap {
  font-size: var(--news-font-meta);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--news-accent);
}

.glav-shag__nomer {
  color: var(--news-text-muted);
}

.glav-shag__vopros {
  margin: 0;
  font-family: var(--news-font-sans);
  font-size: var(--news-font-body);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: var(--news-track-title);
  color: var(--news-text);
}

.glav-shag__otvet {
  margin: 0;
  font-size: var(--news-font-small);
  line-height: 1.55;
  color: var(--news-text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .glav-cena__mashina,
  .glav-cena__dolya {
    transition: none;
  }
}

/* Форма заявки на главной — тот же компонент, что на карточке машины, но
   там он стоит с отступом 36px внутри карточки. Здесь — общий ритм 24px. */
.listing-layout > .shop-forma {
  margin-top: 24px;
}

/* ----------------------------------------------------------- узкий экран */
@media (max-width: 1180px) {
  /* Портал здесь складывает колонки одну под другую (07-responsive) и
     задаёт 680px высоты — это для его карусели. Нам высота по содержимому. */
  .glav-geroy .listing-showcase__feature,
  .glav-geroy .listing-showcase__promo {
    height: auto;
    min-height: 0;
  }

  .glav-geroy .listing-showcase__feature {
    min-height: clamp(400px, 52vw, 540px);
  }
}

/* Кузовов и марок по шесть: делятся и на три, и на две — сирот нет. */
@media (max-width: 760px) {
  .glav-kuzova__setka {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .glav-marki__lenta {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .listing-layout > .glav-shapka {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin-bottom: 16px;
    padding: 0;
  }

  /* 🔴 На телефоне у портала плашка лежит ПОВЕРХ снимка и закрывает его почти
     целиком — для новости это терпимо, для машины нет: от кадра 2:1 в окне
     358×500 оставалась бы полоса двери. Поэтому здесь снимок — блок 16:10
     сверху, плашка — под ним, в той же тёмной карточке. Плашка-состояние
     остаётся на снимке. */
  .glav-geroy .listing-showcase__feature {
    display: grid;
    grid-template-rows: auto auto;
    min-height: 0;
  }

  .glav-geroy .listing-showcase__media {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  .glav-geroy .listing-showcase__feature::after {
    content: none;
  }

  .glav-geroy .listing-showcase__feature-overlay {
    position: static;
    margin: 0 var(--news-feature-inset-mobile, 12px) var(--news-feature-inset-mobile, 12px);
    max-width: none;
  }

  .glav-geroy__zagolovok {
    font-size: clamp(26px, 7.4vw, 36px);
    -webkit-line-clamp: 4;
  }

  .glav-geroy .listing-showcase__feature-excerpt {
    display: -webkit-box;
  }

  .glav-novost {
    padding: 16px;
  }
}

@media (max-width: 1180px) {
  /* Пять шагов в ряд не помещаются. 🔴 Три и два давали сироту в пустом
     ряду; столбик «круг слева, слова справа» читается как маршрут и не
     оставляет пустоты. Линия идёт вниз от круга к следующему кругу. */
  .glav-put {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .glav-shag {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 4px 14px;
  }

  .glav-shag__krug {
    grid-row: 1 / 4;
    margin: 0;
  }

  .glav-shag:not(:last-child)::before {
    content: "";
    top: 52px;
    right: auto;
    bottom: -20px;
    left: 26px;
    width: 1px;
    height: auto;
  }
}

@media (max-width: 760px) {
  .glav-cena {
    padding: 18px 16px;
    gap: 16px;
  }

  .glav-cena__vybor {
    grid-template-columns: minmax(0, 1fr);
  }

  .glav-cena__mashina {
    grid-template-columns: 84px minmax(0, 1fr);
  }

  .glav-cena__foto {
    width: 84px;
    height: 84px;
  }

  .glav-cena__rol {
    padding-top: 10px;
  }

  .glav-cena__kratko {
    padding-bottom: 10px;
  }

  /* Сумма и процент — столбиком справа, чтобы название не сжималось. */
  .glav-cena__cifry {
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
  }

  /* Шаги столбиком — уже с 1180, см. выше. */
}

@media (max-width: 560px) {
  .glav-kuzova__setka {
    grid-template-columns: minmax(0, 1fr);
  }

  .glav-marki__lenta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

/* ==========================================================================
   Карточка модели: вводный текст, галерея, секции «подробнее», новости.
   Строение повторяет страницу модели у мотосалона — рассказ, а не анкета.
   ========================================================================== */

.shop-karta__kicker {
  margin: 0;
  font-size: var(--news-font-meta);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--news-accent);
}

/* ------------------------------------------------------------ вводный текст */
.shop-karta__lead {
  margin-top: 26px;
  padding: 0 0 0 18px;
  border-left: 3px solid var(--news-accent);
}

.shop-karta__lead p {
  margin: 0;
  max-width: 62ch;
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.55;
  color: var(--news-text);
}

/* ----------------------------------------------------------------- галерея */
.shop-galereya {
  margin-top: 28px;
}

/* Лента с прилипанием: листается пальцем и колесом, без единой строки скрипта. */
.shop-galereya__lenta {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 46%);
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  scrollbar-width: thin;
}

.shop-galereya__kadr {
  margin: 0;
  scroll-snap-align: start;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--news-radius-lg);
  background: #ececec;
}

.shop-galereya__kadr img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shop-galereya__schet {
  margin: 8px 0 0;
  font-size: var(--news-font-meta);
  color: var(--news-text-muted);
}

/* ------------------------------------------------------ секции «подробнее» */
.shop-razdely {
  margin-top: 34px;
}

.shop-razdely__oglavlenie {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}

.shop-razdely__punkt {
  padding: 7px 16px;
  border: 1px solid rgba(17, 17, 17, 0.14);
  border-radius: 999px;
  font-size: var(--news-font-meta);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--news-text-muted);
}

.shop-razdely__punkt:hover,
.shop-razdely__punkt:focus-visible {
  color: var(--news-accent);
  border-color: var(--news-accent);
}

.shop-razdel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  padding: 26px 0;
  border-top: 1px solid rgba(17, 17, 17, 0.08);
}

/* Стороны чередуются: ровный ряд одинаковых блоков читается как таблица,
   а не как рассказ. */
.shop-razdel--naoborot .shop-razdel__tekst {
  order: 2;
}

.shop-razdel--bez-foto {
  grid-template-columns: minmax(0, 1fr);
}

.shop-razdel__metka {
  margin: 0 0 8px;
  font-size: var(--news-font-meta);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--news-text-muted);
}

.shop-razdel__zagolovok {
  margin: 0 0 12px;
  font-family: var(--news-font-sans);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.shop-razdel__tekst p {
  margin: 0 0 10px;
  max-width: 60ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--news-text-muted);
}

.shop-razdel__tekst p:last-child {
  margin-bottom: 0;
}

.shop-razdel__tekst b {
  color: var(--news-text);
}

.shop-razdel__foto {
  display: grid;
  gap: 10px;
}

.shop-razdel__foto img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--news-radius-lg);
}

/* ------------------------------------------------------- новости о модели */
.shop-novosti {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid rgba(17, 17, 17, 0.08);
}

.shop-novosti__shapka {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  margin-bottom: 16px;
}

.shop-novosti__title {
  margin: 0;
  font-family: var(--news-font-sans);
  font-size: 22px;
  font-weight: 800;
}

.shop-novosti__vse {
  margin-left: auto;
  font-size: var(--news-font-meta);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--news-accent);
  white-space: nowrap;
}

.shop-novosti__lenta {
  /* Ровно три колонки. 🔴 `auto-fit` растягивал единственную найденную
     новость во всю ширину — снимок вырастал на полтора экрана.
     `align-items: start` убран: с ним карточки заканчивались на трёх разных
     уровнях, потому что заголовки в одну, две и три строки. */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

/* Снимок новости — единый слой карточки (17-stranicy.css). */

/* Надзаголовок формы: сниппет отдаёт `.section-eyebrow`, а стиль в
   компонентах есть только у `.section-heading__eyebrow` — надпись
   «Расчёт под вашу машину» печаталась обычным абзацем 16 px. */
.shop-forma .section-eyebrow {
  margin: 0 0 10px;
  font-size: var(--news-font-meta);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--news-accent);
}

.shop-novosti__podpis {
  margin: -6px 0 16px;
  max-width: 68ch;
  color: #5a5a5a;
}

/* Новостей три: три колонки или одна. 🔴 Две давали «2 + 1» с пустотой. */
@media (max-width: 760px) {
  .shop-novosti__lenta {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 🔴 Было `.shop-novosti__karta a` — селектор ловил и кнопку «Подробнее»:
   она получала белый фон, рамку и `height: 100%` и наезжала на свой же текст.
   Фон и рамку держит карточка, ссылка внутри прозрачная — ровно так это уже
   сделано у врезки мотоновостей. */
/* Ссылка, снимок и тело карточки новости — единый слой (17-stranicy.css). */

.shop-novosti__meta {
  margin: 0;
  font-size: var(--news-font-meta);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--news-text-muted);
}

.shop-novosti__zagolovok {
  margin: 0;
  font-family: var(--news-font-sans);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

@media (max-width: 760px) {
  .shop-razdel {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  /* На одной колонке перестановка сторон теряет смысл и только путает порядок
     «сначала текст, потом фото». */
  .shop-razdel--naoborot .shop-razdel__tekst {
    order: 0;
  }

  .shop-galereya__lenta {
    grid-auto-columns: minmax(240px, 86%);
  }

  .shop-novosti__vse {
    margin-left: 0;
  }
}

/* ==========================================================================
   Галерея карточки: крупный кадр и миниатюры.
   Стопка одинаковых фотографий подряд — это не галерея, а свалка: смотреть
   неудобно, листать долго. Один большой кадр держит внимание, миниатюры дают
   понять, сколько всего снимков и что на них.
   ========================================================================== */

.shop-gal {
  display: grid;
  gap: 10px;
  align-content: start;
}

.shop-gal__glavnoe {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--news-radius-lg);
  background: #ececec;
}

.shop-gal__glavnoe img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shop-gal__schet {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(9, 9, 11, 0.62);
  color: #fff;
  font-size: var(--news-font-meta);
  font-weight: 700;
  letter-spacing: 0.04em;
  backdrop-filter: blur(6px);
}

.shop-gal__mini-lenta {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(86px, 1fr);
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.shop-gal__mini {
  padding: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 12px;
  background: #ececec;
  cursor: pointer;
}

.shop-gal__mini img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Невыбранные приглушены — глаз сразу находит текущий кадр. */
  opacity: 0.62;
  transition: opacity 0.16s ease;
}

.shop-gal__mini.is-vybran {
  border-color: var(--news-accent);
}

.shop-gal__mini.is-vybran img,
.shop-gal__mini:hover img,
.shop-gal__mini:focus-visible img {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .shop-gal__mini img {
    transition: none;
  }
}

/* ==========================================================================
   «Полный обзор» — разворачивающаяся строка под характеристиками.

   Свёрнут по умолчанию: обзор длинный, а человеку на карточке сначала нужны
   цена, фотографии и характеристики. Текст при этом лежит в разметке целиком —
   свёрнут он только на вид.
   ========================================================================== */

.shop-obzor {
  margin: 0;
  border-top: 1px solid var(--news-stroke);
  border-bottom: 1px solid var(--news-stroke);
}

.shop-obzor__vyzov {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 4px;
  cursor: pointer;
  list-style: none;
}

/* Свой значок вместо системного треугольника — он в разных браузерах разный. */
.shop-obzor__vyzov::-webkit-details-marker {
  display: none;
}

.shop-obzor__imya {
  font-family: var(--news-font-sans);
  font-size: clamp(19px, 2.2vw, 23px);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--news-text);
}

.shop-obzor__znak {
  position: relative;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid var(--news-stroke-strong);
  border-radius: 999px;
}

.shop-obzor__znak::before,
.shop-obzor__znak::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 1.5px;
  background: var(--news-text);
  transform: translate(-50%, -50%);
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.shop-obzor__znak::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

/* Развёрнуто — плюс превращается в минус. */
.shop-obzor[open] .shop-obzor__znak::after {
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 0;
}

.shop-obzor__vyzov:hover .shop-obzor__znak {
  border-color: var(--news-accent);
}

.shop-obzor__vyzov:hover .shop-obzor__imya {
  color: var(--news-accent);
}

.shop-obzor__telo {
  padding: 0 4px 24px;
  max-width: 68ch;
}

@media (prefers-reduced-motion: reduce) {
  .shop-obzor__znak::before,
  .shop-obzor__znak::after {
    transition: none;
  }
}

/* ==========================================================================
   «Полный обзор»: правка знака и внутренностей (16.09.2026, вечер).

   🔴 Плюс в кружке читался как «добавить» — так он и работает во всех
   интерфейсах. Владелец: «плюсик я бы стилизованно сделал по середине снизу
   стрелочкой, типа понятно будет развернуть». Ставим стрелку вниз по центру
   нижнего края и подписываем словом: стрелка говорит направление, слово —
   действие.
   ========================================================================== */

.shop-obzor__vyzov {
  position: relative;
  display: block;
  padding: 22px 4px 46px;
  cursor: pointer;
  list-style: none;
}

.shop-obzor__vyzov::-webkit-details-marker {
  display: none;
}

/* Знак раскрытия — по центру нижнего края, как просили. */
.shop-obzor__strelka {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 14px;
  border: 1px solid var(--news-stroke);
  border-radius: 999px;
  background: var(--news-surface);
  font-size: var(--news-font-meta);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--news-text-muted);
  transition: border-color 0.16s ease, color 0.16s ease;
}

.shop-obzor__strelka svg {
  width: 15px;
  height: 15px;
  transition: transform 0.2s ease;
}

.shop-obzor[open] .shop-obzor__strelka svg {
  transform: rotate(180deg);
}

/* Подпись меняется вместе с состоянием: «Развернуть» ↔ «Свернуть». */
.shop-obzor__slovo--svernut,
.shop-obzor[open] .shop-obzor__slovo--razvernut {
  display: none;
}

.shop-obzor[open] .shop-obzor__slovo--svernut {
  display: inline;
}

.shop-obzor__vyzov:hover .shop-obzor__strelka {
  border-color: var(--news-accent);
  color: var(--news-accent);
}

/* Знак «плюс» из первого захода больше не рисуем. */
.shop-obzor__znak {
  display: none;
}

.shop-obzor__telo {
  padding: 0 0 28px;
  max-width: none;
}

/* Свободный текст под секциями — колонка нормальной ширины, а не во всю
   страницу: длинная строка не читается. */
.shop-obzor__tekst {
  max-width: 68ch;
  padding: 0 4px;
}

@media (prefers-reduced-motion: reduce) {
  .shop-obzor__strelka,
  .shop-obzor__strelka svg {
    transition: none;
  }
}

/* ==========================================================================
   Галерея карточки: стрелки вместо прокрутки (16.09.2026).

   🔴 Владелец: «стрелочки было бы здорово сделать всё-таки, скролл не модно».
   Лента миниатюр не прокручивается руками — её двигает скрипт, поэтому у неё
   overflow: hidden, а не auto.
   ========================================================================== */

.shop-gal {
  display: grid;
  gap: 10px;
}

.shop-gal__scena {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: var(--news-radius-lg);
  overflow: hidden;
  background: #ececec;
}

/* 🔴 Кадр вписывается целиком, а не обрезается: снимки в каталоге и 3:2, и
   вертикальные 3:4 (DBX 707: 810×1080 — в обрезке 3:2 колёс не видно), и
   2:1. Рамка при этом остаётся 3:2, чтобы страница не прыгала при
   листании. Пустые поля закрывает размытая копия того же снимка
   (.shop-gal__fon — элемент добавляет shop.js, сниппет не трогаем). */
.shop-gal__kadr {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.shop-gal__fon {
  position: absolute;
  inset: -24px;
  background: #ececec center / cover no-repeat;
  filter: blur(22px) saturate(0.9) brightness(0.85);
  pointer-events: none;
}

.shop-gal__strelka {
  position: absolute;
  top: 50%;
  z-index: 2;   /* над кадром (у него z-index 1 ради подложки) */
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--news-text);
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.shop-gal__strelka svg {
  width: 22px;
  height: 22px;
}

.shop-gal__strelka--vlevo { left: 14px; }
.shop-gal__strelka--vpravo { right: 14px; }

.shop-gal__strelka:hover {
  background: #fff;
  transform: translateY(-50%) scale(1.06);
}

.shop-gal__strelka:focus-visible {
  outline: 2px solid var(--news-accent);
  outline-offset: 2px;
}

.shop-gal__schet {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  margin: 0;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.72);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

.shop-gal__lenta {
  overflow: hidden;
}

.shop-gal__ryad {
  display: flex;
  gap: 8px;
  transition: transform 0.28s ease;
}

.shop-gal__mini {
  flex: 0 0 auto;
  /* Ровно шесть целых миниатюр в ряд: при жёстких 104 px помещалось 5,87 —
     последняя всегда была срезана пополам и читалась как обрыв ленты.
     Пропорция та же, что у большого кадра. */
  width: calc((100% - 5 * 8px) / 6);
  height: auto;
  /* Квадрат, а не 3:2: миниатюра — указатель на кадр, а не сам кадр; в
     квадрате по центру и вертикальный, и горизонтальный снимок узнаваемы. */
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #ececec;
  cursor: pointer;
  opacity: 0.62;
  transition: opacity 0.15s ease, box-shadow 0.15s ease;
}

.shop-gal__mini img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shop-gal__mini:hover { opacity: 0.85; }

.shop-gal__mini.is-vybran {
  opacity: 1;
  box-shadow: inset 0 0 0 2px var(--news-accent);
}

@media (max-width: 560px) {
  .shop-gal__mini { width: calc((100% - 3 * 8px) / 4); }
  /* Стрелки остаются 44: на 38 палец промахивался. Только ближе к краю. */
  .shop-gal__strelka--vlevo { left: 8px; }
  .shop-gal__strelka--vpravo { right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .shop-gal__ryad,
  .shop-gal__strelka,
  .shop-gal__mini { transition: none; }
}

/* ==========================================================================
   Вкладки карточки — вместо блока «Полный обзор» с кнопкой «Развернуть».

   🔴 Раскрывашку владелец забраковал трижды: разделы должны переключаться
   вкладками, как на странице модели мотосалона. Текст всех вкладок лежит в
   разметке сразу — скрыта только неактивная панель.
   ========================================================================== */

.shop-vkladki {
  display: grid;
  gap: 22px;
  padding-top: 26px;
  border-top: 1px solid var(--news-stroke);
}

/* Ряд вкладок: подчёркивание активной, как в образце. На узком экране
   переносится, а не прокручивается — прокрутку владелец не любит. */
.shop-vkladki__ryad {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  align-items: center;
}

.shop-vkladka {
  position: relative;
  padding: 6px 0 10px;
  border: 0;
  background: transparent;
  font: inherit;
  font-family: var(--news-font-sans);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--news-text-soft);
  cursor: pointer;
  transition: color 0.15s ease;
}

.shop-vkladka::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: 3px;
  background: transparent;
  transition: background-color 0.15s ease;
}

.shop-vkladka:hover {
  color: var(--news-text);
}

.shop-vkladka.is-vybran {
  color: var(--news-accent);
}

.shop-vkladka.is-vybran::after {
  background: var(--news-accent);
}

.shop-vkladka:focus-visible {
  outline: 2px solid var(--news-accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Панель: текст слева, фотография справа. Без фотографии — одна колонка,
   чтобы не оставалось пустого места. */
.shop-vkladka__panel {
  /* Как на странице модели мотосалона: две равные колонки, снимок своей
     пропорции, колонки центрованы по вертикали.
     🔴 Высота снимка НЕ должна зависеть от длины текста: с `stretch` и
     `height:100%` вертикальный кадр растягивал панель до 670 px, а
     горизонтальный при длинном тексте срезался вдвое. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
}

.shop-vkladka__panel--bez-foto {
  grid-template-columns: minmax(0, 1fr);
}

.shop-vkladka__zagolovok {
  margin: 0 0 12px;
  font-family: var(--news-font-sans);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.shop-vkladka__tekst {
  max-width: 62ch;
}

.shop-vkladka__tekst p {
  margin: 0 0 12px;
  font-size: var(--news-font-body);
  line-height: var(--news-line-body);
  color: var(--news-text-muted);
}

.shop-vkladka__tekst p:last-child {
  margin-bottom: 0;
}

.shop-vkladka__foto {
  display: grid;
  gap: 10px;
}

.shop-vkladka__foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  border-radius: var(--news-radius-lg);
  object-fit: cover;
}

@media (max-width: 760px) {
  .shop-vkladka__panel {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shop-vkladka,
  .shop-vkladka::after { transition: none; }
}



/* ==========================================================================
   Шаги «Как привозим» и форма запроса расчёта (16.09.2026).
   ========================================================================== */



.shop-shagi {
  display: grid;
  gap: 14px;
  padding-top: 26px;
  border-top: 1px solid var(--news-stroke);
}

.shop-shagi__lead {
  margin: 0;
  max-width: 62ch;
  font-size: var(--news-font-body);
  line-height: var(--news-line-body);
  color: var(--news-text-muted);
}

.shop-shagi__spisok {
  /* Пять шагов — один ряд. 🔴 `auto-fit` на 1024 и 768 давал 4+1: пятая
     карточка стояла сиротой в пустом ряду. */
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: shag;
}

@media (max-width: 1180px) {
  /* Места на пять колонок нет — переходим к списку «номер слева, текст
     справа» в два столбца (3 + 2, ряды выровнены): это читается лучше, чем
     четыре карточки и одна отдельно. 🔴 Раньше на 768 стоял сразу один
     столбец из пяти широких плит — 771 px прокрутки. */
  .shop-shagi__spisok {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .shop-shag {
    grid-template-columns: 30px minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 4px;
    padding: 14px 18px;
  }

  .shop-shag__nomer { grid-row: 1 / span 2; }

  .shop-shag__imya,
  .shop-shag__tekst { grid-column: 2; }
}

@media (max-width: 760px) {
  .shop-shagi__spisok {
    grid-template-columns: minmax(0, 1fr);
  }
}

.shop-shag {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 18px 20px 20px;
  border: 1px solid var(--news-stroke);
  border-radius: var(--news-radius-lg);
  background: var(--news-surface);
}

.shop-shag__nomer {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--news-accent);
  color: #fff;
  font-family: var(--news-font-sans);
  font-size: 14px;
  font-weight: 800;
}

.shop-shag__imya {
  margin: 0;
  font-family: var(--news-font-sans);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.shop-shag__tekst {
  margin: 0;
  font-size: var(--news-font-small);
  line-height: 1.55;
  color: var(--news-text-muted);
}

/* ------------------------------------------------------------------- форма */
.shop-forma {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  margin-top: 26px;
  padding: 26px;
  border-radius: var(--news-radius-xl);
  background: var(--news-surface);
  border: 1px solid var(--news-stroke);
}

.shop-forma__zagolovok {
  margin: 6px 0 12px;
  font-family: var(--news-font-sans);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.shop-forma__lead {
  margin: 0 0 14px;
  font-size: var(--news-font-body);
  line-height: var(--news-line-body);
  color: var(--news-text-muted);
}

.shop-forma__telefon {
  margin: 0;
  font-size: var(--news-font-small);
  color: var(--news-text-muted);
}

.shop-forma__telefon b {
  color: var(--news-text);
  font-size: var(--news-font-body);
}

.shop-forma__polya {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.shop-forma__pole {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.shop-forma__pole--shire,
.shop-forma__knopka,
.shop-forma__soglasie,
.shop-forma__otvet {
  grid-column: 1 / -1;
}

.shop-forma__pole > span {
  font-size: var(--news-font-meta);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--news-text-soft);
}

.shop-forma__pole > span b {
  color: var(--news-accent);
}

.shop-forma__pole input,
.shop-forma__pole textarea {
  width: 100%;
  min-height: 46px;
  padding: 12px 14px;
  border: 1px solid var(--news-stroke);
  border-radius: 14px;
  background: var(--news-surface-soft);
  font: inherit;
  font-family: var(--news-font-sans);
  /* 🔴 Ровно 16 px: при меньшем размере iOS увеличивает страницу, как только
     человек попадает в поле, и вёрстка «уезжает». Это не вкус, это поведение
     системы. */
  font-size: 16px;
  color: var(--news-text);
  resize: vertical;
}

.shop-forma__pole input:focus,
.shop-forma__pole textarea:focus {
  outline: none;
  border-color: var(--news-accent);
  background: var(--news-surface);
}

/* Кнопка формы — единый слой (17-stranicy.css), крупный размер 52. */

.shop-forma__soglasie {
  margin: 0;
  font-size: var(--news-font-meta);
  line-height: 1.5;
  color: var(--news-text-soft);
}

.shop-forma__otvet {
  margin: 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(15, 76, 129, 0.1);
  font-size: var(--news-font-small);
  color: var(--news-accent);
}

.shop-forma__otvet--oshibka {
  background: rgba(200, 60, 40, 0.1);
  color: #a33;
}

/* Ловушка для роботов: убираем из виду, но не display:none — часть роботов
   такие поля пропускает. */
.shop-forma__lovushka {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 760px) {
  .shop-forma {
    grid-template-columns: minmax(0, 1fr);
    padding: 20px;
  }
}

@media (max-width: 560px) {
  .shop-forma__polya { grid-template-columns: 1fr; }
}


/* ------------------------------------------------- комплектация во вкладке */
/* 🔴 Раньше опции шли абзацами сплошняком — «читается тяжело, выходит за
   пределы». Теперь список в две колонки, а полный перечень — в окне. */
.shop-opcii {
  margin-top: 14px;
}

.shop-opcii__spisok {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 22px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.shop-opcii__spisok li {
  position: relative;
  padding-left: 16px;
  font-size: 15px;
  line-height: 1.45;
  color: #3a3a3a;
}

.shop-opcii__spisok li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--news-accent, #12457f);
  opacity: 0.55;
}

/* Кнопка «все опции» — единый слой (17-stranicy.css), тихий вид. */
/* --- окно с полным перечнем --- */
.shop-opcii__okno {
  width: min(880px, 92vw);
  max-height: 86vh;
  /* На телефоне адресная строка съедает часть `vh` — `dvh` считает по
     видимой области. Старые браузеры возьмут строку выше. */
  max-height: 86dvh;
  padding: 0;
  border: 0;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(17, 17, 17, 0.28);
}

.shop-opcii__okno::backdrop {
  background: rgba(17, 17, 17, 0.5);
}

.shop-opcii__okno-shapka {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(17, 17, 17, 0.1);
  background: #fff;
}

.shop-opcii__okno-shapka h3 {
  margin: 0;
  font-family: var(--news-font-sans);
  font-size: 19px;
  font-weight: 800;
}

.shop-opcii__zakryt {
  margin-left: auto;
  /* Пальцем нужно попадать: меньше 44 px — промах. */
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 9px;
  background: #f0f0f0;
  font-size: 22px;
  line-height: 1;
  color: #333;
  cursor: pointer;
}

.shop-opcii__zakryt:hover {
  background: #e2e2e2;
}

.shop-opcii__okno-telo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 32px;
  padding: 20px 22px;
  overflow-y: auto;
}

.shop-opcii__gruppa h4 {
  margin: 0 0 8px;
  font-family: var(--news-font-sans);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b6b6b;
}

.shop-opcii__gruppa ul {
  margin: 0;
  padding-left: 18px;
}

.shop-opcii__gruppa li {
  margin-bottom: 4px;
  font-size: 15px;
  line-height: 1.4;
}

.shop-opcii__snoska {
  margin: 0;
  padding: 14px 22px 20px;
  border-top: 1px solid rgba(17, 17, 17, 0.08);
  font-size: 13px;
  color: #6b6b6b;
}

@media (max-width: 760px) {
  .shop-opcii__spisok,
  .shop-opcii__okno-telo {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------- коротко о машине + поделиться */
.shop-korotko {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(17, 17, 17, 0.1);
}

.shop-korotko__podpis {
  margin: 0 0 10px;
  font-size: var(--news-font-meta, 12px);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b6b6b;
}

.shop-korotko__spisok {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.shop-korotko__spisok li {
  padding: 5px 11px;
  border-radius: 999px;
  background: #f1f3f6;
  font-size: 13px;
  color: #2c2c2c;
}

.shop-korotko__esche {
  margin: 10px 0 0;
  font-size: 13px;
  color: #6b6b6b;
}

.shop-podelitsya {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(17, 17, 17, 0.1);
}

/* Кнопка «поделиться» — единый слой (17-stranicy.css), нейтральный вид. */
.shop-podelitsya__artikul {
  font-size: 12px;
  color: #8a8a8a;
}


/* ==========================================================================
   Единая шкала шрифтов магазина (ревизия 16.09.2026).
   Замер показал 13 размеров на одной карточке и h3 вкладки крупнее h2 секций.
   Здесь всё сводится к семи уровням на портальных токенах; body не трогаем —
   бандл общий с новостями.
   ========================================================================== */

/* H2 секций карточки: одна величина на четыре секции (было 22 / 42 / 34 / 22). */
.shop-harakteristiki__title,
.shop-shagi .section-heading h2,
.shop-forma__zagolovok,
.shop-novosti__title {
  margin: 0;
  font-family: var(--news-font-sans);
  font-size: var(--news-font-title);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* Отступ под заголовком: у «Как привозим» его даёт сам .section-heading
   (margin-bottom: 18px), остальным — здесь. */
.shop-harakteristiki__title { margin: 0 0 14px; }
.shop-forma__zagolovok { margin: 6px 0 12px; }

/* H3 внутри блока — ниже H2 секции, а не выше (было 30). */
.shop-vkladka__zagolovok,
.shop-opcii__okno-shapka h3 {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* Заголовки карточек (витрина, новости, похожие, мотолента) — единый слой в
   17-stranicy.css: 18/800. Шаг «Как привозим» — того же ранга. */
.shop-shag__imya {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
}

/* Лид карточки — портальный лид, а не своя clamp-величина. */
.shop-karta__lead p {
  font-size: var(--news-font-lead);
  line-height: var(--news-line-lead);
}

/* Текст: то, что падало на браузерные 16px. */
.shop-harakteristiki__list dd,
.shop-novosti__podpis,
.shop-pusto {
  font-size: var(--news-font-body);
  line-height: var(--news-line-body);
}

/* Мелкий текст — одна величина (было 13 / 14 / 15). */
.shop-shag__tekst,
.shop-opcii__spisok li,
.shop-opcii__gruppa li,
.shop-korotko__spisok li,
.shop-korotko__esche,
.shop-harakteristiki__list dt,
.shop-forma__telefon,
.shop-opcii__snoska {
  font-size: var(--news-font-small);
  line-height: 1.5;
}

/* Подписи (артикул, заметки, счётчик, согласие). */
.shop-podelitsya__artikul,
.shop-cena__note,
.shop-zayavka__chasy,
.shop-forma__soglasie,
.shop-gal__schet {
  font-size: 12px;
  line-height: 1.5;
}

.shop-gal__schet { font-weight: 800; letter-spacing: 0.06em; }

/* Капс-подписи: один трекинг (было 0.06 / 0.08 / 0.10 / 0.12em). */
.shop-karta__kicker,
.shop-cena__eyebrow,
.shop-zayavka__podpis,
.shop-korotko__podpis,
.shop-novosti__meta,
.shop-forma__pole > span,
.shop-podbor__zagolovok,
.shop-podbor__podpis,
.shop-god__podskazka,
.shop-opcii__gruppa h4,
.shop-forma .section-eyebrow {
  font-size: var(--news-font-meta);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Капс-кнопки и вкладки: один кегль (было 12 / 13 / 14).
   «Все новости» (.shop-novosti__vse) — теперь текстовая кнопка единого слоя. */
.shop-vkladka,
.shop-card__cta,
.shop-tipy__imya,
.shop-podbor__sbros,
.shop-god__lyuboy {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Кнопки действия — единый слой (17-stranicy.css): 14/800, высота 44. */
.shop-opcii__zakryt { font-size: 22px; font-weight: 800; } /* это «×», ему свой кегль */

@media (max-width: 760px) {
  .shop-harakteristiki__title,
  .shop-shagi .section-heading h2,
  .shop-forma__zagolovok,
  .shop-novosti__title {
    font-size: calc(var(--news-font-title) - 6px);
  }

  .shop-vkladka__zagolovok { font-size: 20px; }
  .shop-tipy__imya { font-size: 11px; }
}

/* ------------------------------------------------------------ хлебные крошки */
/* 🔴 Из карточки было нечем вернуться в каталог — владелец: «проваливаясь в
   карточку, я никак не могу вернуться назад». */
.shop-kroshki {
  margin: 0 0 14px;
}

.shop-kroshki__ryad {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--news-font-small);
  color: var(--news-text-muted);
}

.shop-kroshki__punkt + .shop-kroshki__punkt::before {
  content: "→";
  margin-right: 10px;
  color: rgba(17, 17, 17, 0.3);
}

.shop-kroshki__punkt a {
  color: var(--news-text-muted);
  text-decoration: none;
  border-bottom: 1px solid rgba(17, 17, 17, 0.18);
}

.shop-kroshki__punkt a:hover {
  color: var(--news-accent);
  border-bottom-color: var(--news-accent);
}

.shop-kroshki__punkt [aria-current="page"] {
  color: var(--news-text);
  font-weight: 700;
}

/* Низ карточки новости — единый слой карточки (17-stranicy.css). */


/* ---------------------------------------------------- ритм секций карточки */
/* 🔴 Разделитель не должен липнуть к содержимому соседней секции: сверху
   воздух, потом линия, потом снова воздух. */
.shop-harakteristiki,
.shop-vkladki,
.shop-shagi,
.shop-novosti {
  margin-top: 36px;
  padding-top: 30px;
  border-top: 1px solid var(--news-stroke);
}

.shop-forma {
  margin-top: 36px;
}

/* Первый блок после галереи и сводки — без линии сверху: там её роль
   выполняет сам отступ. */
.shop-karta__lead + .shop-harakteristiki,
.shop-karta__verh + .shop-harakteristiki {
  border-top: 0;
  padding-top: 0;
}

@media (max-width: 760px) {
  .shop-harakteristiki,
  .shop-vkladki,
  .shop-shagi,
  .shop-novosti,
  .shop-forma {
    margin-top: 26px;
    padding-top: 22px;
  }
}

/* --------------------------------------- цена: кнопка «i» и окно разбивки */
/* 🔴 Разбивка убрана из колонки в окно по двум причинам сразу: она растягивала
   правую колонку, и под фотографией слева оставалась пустота — а ещё в ней
   стояла строка с нашей комиссией, которой покупателю видеть незачем. */

.shop-cena__itog {
  display: flex;
  align-items: center;
  gap: 10px;
}

.shop-cena__i {
  position: relative;   /* якорь для зоны касания ::before */
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(17, 17, 17, 0.2);
  border-radius: 50%;
  background: #fff;
  font-family: var(--news-font-sans);
  font-size: 13px;
  font-weight: 800;
  font-style: normal;
  line-height: 1;
  color: var(--news-text-muted);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.shop-cena__i:hover,
.shop-cena__i:focus-visible {
  border-color: var(--news-accent);
  color: var(--news-accent);
}

/* Зона касания 44×44 при кружке 28: невидимая площадка вокруг. */
.shop-cena__i::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
}

.shop-cena__okno-lead {
  margin: 0 0 16px;
  color: var(--news-text-muted);
  font-size: var(--news-font-small);
}

.shop-cena__razbivka {
  margin: 0;
  padding: 0;
  list-style: none;
}

.shop-cena__razbivka li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px 24px;
  padding: 12px 0;
  border-bottom: 1px solid var(--news-stroke);
}

.shop-cena__stroka {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.shop-cena__podpis {
  font-weight: 700;
}

/* Пояснение под строкой — обычным текстом, без курсива: тег `i` взят как
   контейнер, а не как начертание. */
.shop-cena__poyasnenie {
  font-style: normal;
  font-size: var(--news-font-small);
  color: var(--news-text-muted);
}

/* Суммы держим в колонку: цифры одной ширины, иначе столбец «пляшет». */
.shop-cena__summa {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.shop-cena__vsego {
  border-bottom: 0;
  padding-top: 16px;
  font-size: calc(var(--news-font-body) + 2px);
}

.shop-cena__vsego .shop-cena__summa {
  font-size: calc(var(--news-font-body) + 4px);
}

.shop-cena__okno-snoska {
  margin: 16px 0 0;
  font-size: var(--news-font-small);
  color: var(--news-text-muted);
}

@media (max-width: 560px) {
  .shop-cena__razbivka li {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

/* 🔴 Тело окна комплектации сделано в две колонки — там это уместно, список
   опций длинный. Разбивке цены две колонки вредят: строки короткие, и текст
   разъезжается. Своему окну задаём одну колонку. */
.shop-cena__okno .shop-opcii__okno-telo {
  display: block;
}

/* ------------------------------------------- низ карточки витрины */
/* 🔴 Ловушка «ссылка внутри заняла всю высоту и выдавила низок за край»
   чинилась здесь в третий раз — потому что карточек было пять. Теперь все
   пять описаны одним правилом в конце 17-stranicy.css; сюда не дописывать. */
/* =====
   ЕДИНЫЙ СЛОЙ (17.09.2026, по аудиту вёрстки): карточка, кнопка, пороги.

   🔴 Почему он в конце ЭТОГО файла: 17-stranicy.css грузится в бандл
   последним (порядок задаёт news-portal.css) — уже ПОСЛЕ 07-responsive.css.
   Только отсюда общее правило побеждает разрозненные при равной
   специфичности. Не переносить выше и не дробить по файлам.

   Что здесь сведено в одно:
   1. Карточка. Пять классов — .news-card, .shop-card, .shop-pohozhaya,
      .shop-novosti__karta, .moto-tape__card — описаны ОДНИМ набором правил
      через :is(). Дефект «ссылка внутри заняла всю высоту и выдавила низок
      за край» чинился трижды, потому что карточек было пять. Списки ниже —
      единственное место, где пять видов перечислены; частности каждого —
      только пропорция снимка и то, что лежит в теле. Прежние описания в
      04-components (news-card) и 14-motosalon (moto-tape) остались — они
      чужие файлы, но грузятся раньше и здесь перекрыты.
   2. Кнопка. Одна высота 44 (крупная 52), кегль 14/800, без капители,
      скругление 999. Три вида: основная (залита), тихая (обводка),
      текстовая (без рамки, но с той же зоной касания 44).
   3. Пороги: 1180 / 760 / 560 — те же, что у портала (07-responsive).
   4. Сетки «по три»: три колонки или одна, никогда две.
   ===================================================================== */

:root {
  /* 🔴 Подписи капителью были 11 px — ниже читаемого минимума; токен
     портала поднят до 12. Подписи полей формы — 13 (ниже). */
  --news-font-meta: 12px;

  --knopka-h: 44px;
  --knopka-h-krupnaya: 52px;
  --knopka-fon-hover: #0c3f6c;    /* акцент #0F4C81 на шаг темнее */
  --knopka-fon-active: #0a3459;
  --knopka-tihaya-hover: rgba(15, 76, 129, 0.08);
  --knopka-tihaya-active: rgba(15, 76, 129, 0.16);

  --karta-pad: 20px;
  --karta-foto: 3 / 2;
}

/* ------------------------------------------------------------ карточка */
:is(.news-card, .shop-card, .shop-pohozhaya, .shop-novosti__karta, .moto-tape__card) {
  position: relative;
  display: grid;
  /* 🔴 Высоту раздаёт карточка: содержимое сверху, низок прижат вниз.
     Ссылке внутри height:100% не даём НИКОГДА — именно она выдавливала
     низок за край, где его срезала обрезка. */
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--news-stroke);
  border-radius: var(--news-radius-lg);
  background: var(--news-surface);
  box-shadow: var(--news-shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

:is(.news-card, .shop-card, .shop-pohozhaya, .shop-novosti__karta, .moto-tape__card):hover,
:is(.news-card, .shop-card, .shop-pohozhaya, .shop-novosti__karta, .moto-tape__card):focus-within {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.1);
}

/* Ссылка — прозрачная обёртка снимка и тела. Рамку, фон и тень держит
   карточка, ссылка их не дублирует. */
:is(.news-card__link, .shop-card__link, .shop-pohozhaya__ssylka, .shop-novosti__ssylka, .moto-tape__link) {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: start;
  gap: 0;
  height: auto;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  border: 0;
  border-radius: inherit;
  background: transparent;
  box-shadow: none;
  transform: none;
  color: inherit;
  text-decoration: none;
}

:is(.news-card__link, .shop-card__link, .shop-pohozhaya__ssylka, .shop-novosti__ssylka, .moto-tape__link):hover,
:is(.news-card__link, .shop-card__link, .shop-pohozhaya__ssylka, .shop-novosti__ssylka, .moto-tape__link):focus-visible {
  transform: none;
  box-shadow: none;
}

/* Снимок: коробка с пропорцией, снимок внутри заполняет её. 🔴 Пропорция
   держится на aspect-ratio, а не на padding-top: два способа в разных
   карточках давали разную высоту ряда. Обрезка по центру остаётся — превью
   под 3:2 должен готовить конвейер на входе, стили этого не починят. */
:is(.news-card__media, .shop-card__media, .shop-pohozhaya__media, .shop-novosti__media, .moto-tape__media) {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 0;
  aspect-ratio: var(--karta-foto);
  overflow: hidden;
  border-radius: 0;
  background: #ececec;
}

:is(.news-card__media, .shop-card__media, .shop-pohozhaya__media, .shop-novosti__media, .moto-tape__media) img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

/* Частности: у новостей (своих и мото) снимки 16:9, у машин — 3:2. */
.shop-novosti__karta,
.moto-tape__card {
  --karta-foto: 16 / 9;
}

/* Тело: один отступ на всех, низ тонкий — под ним низок с кнопками высотой
   44, у которых текст стоит по центру: 6 + 14 = те же 20 px до текста. */
:is(.news-card__body, .shop-card__body, .shop-novosti__telo, .moto-tape__body) {
  display: grid;
  grid-template-rows: none;
  grid-auto-rows: auto;
  align-content: start;
  gap: 14px;
  min-width: 0;
  padding: 18px var(--karta-pad) var(--karta-pad);
}

/* Заголовок карточки — один кегль у всех пяти видов (было 24 / 17 / 15 / 16). */
:is(.news-card__title, .shop-card__title, .shop-novosti__zagolovok, .moto-tape__title, .shop-pohozhaya__imya) {
  margin: 0;
  font-family: var(--news-font-sans);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* Низок с «Поделиться» и «Подробнее». Общий класс у четырёх видов; у
   «похожих» вместо него цена. Отступы — ровно те же, что на портале:
   0/20/20. 🔴 Раньше сбоку вычиталось 12 px под отрицательные поля
   текстовых кнопок; полей больше нет, и вычитание прижимало подписи
   к самому краю карточки. */
:is(.news-card, .shop-card, .shop-novosti__karta, .moto-tape__card) > .news-card__footer,
.news-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 var(--karta-pad) var(--karta-pad);
}

.shop-pohozhaya__cena {
  font-size: var(--news-font-body);
}

/* ------------------------------------------------------------- кнопка */
/* Форма: всё, что «нажми и перейди/сделай». Цвет — ниже, по видам. */
:is(.shop-zayavka__knopka,
    .shop-forma__knopka,
    .news-shop-cta__knopka,
    .not-found-card__primary,
    .not-found-card__secondary,
    .shop-podelitsya__knopka,
    .shop-opcii__esche,
    .shop-stranicy__knopka,
    .listing-showcase__feature-link,
    .news-section__archive-link,
    .news-moto__action) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  min-height: var(--knopka-h);
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-family: var(--news-font-sans);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

/* Основная: залита акцентом. */
:is(.shop-zayavka__knopka,
    .shop-forma__knopka,
    .news-shop-cta__knopka,
    .not-found-card__primary) {
  border-color: var(--news-accent);
  background: var(--news-accent);
  color: #fff;
}

/* Тихая: обводка акцентом, без заливки. */
:is(.shop-zayavka__knopka--tihaya,
    .news-shop-cta__knopka--tihaya,
    .not-found-card__secondary,
    .shop-opcii__esche,
    .news-section__archive-link) {
  border-color: var(--news-accent);
  background: transparent;
  color: var(--news-accent);
}

/* Нейтральная: серая обводка, чёрный текст — «поделиться», страницы. */
:is(.shop-podelitsya__knopka, .shop-stranicy__knopka) {
  border-color: var(--news-stroke-strong);
  background: var(--news-surface);
  color: var(--news-text);
}

.shop-stranicy__knopka {
  min-width: var(--knopka-h);
  padding: 0 14px;
}

/* Крупная — одна на сайте: отправка формы расчёта. */
.shop-forma__knopka {
  min-height: var(--knopka-h-krupnaya);
}

/* Кнопка на тёмной плашке героя: цвет свой (стекло), форма общая. */
.listing-showcase__feature-link {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* Мотоврезка красная по замыслу — цвет оставляем ей, форму берём общую. */
.news-moto__action {
  border-color: var(--moto-krasnyy, #841618);
}

/* Состояния. 🔴 Их не было у главных кнопок связи вовсе. */
@media (hover: hover) {
  :is(.shop-zayavka__knopka, .shop-forma__knopka, .news-shop-cta__knopka, .not-found-card__primary):hover {
    border-color: var(--knopka-fon-hover);
    background: var(--knopka-fon-hover);
  }

  :is(.shop-zayavka__knopka--tihaya, .news-shop-cta__knopka--tihaya, .not-found-card__secondary,
      .shop-opcii__esche, .news-section__archive-link):hover {
    background: var(--knopka-tihaya-hover);
    color: var(--news-accent);
  }

  :is(.shop-podelitsya__knopka, .shop-stranicy__knopka):hover:not([disabled]) {
    border-color: var(--news-accent);
    color: var(--news-accent);
  }

  .listing-showcase__feature-link:hover {
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.18);
    transform: none;
  }
}

:is(.shop-zayavka__knopka, .shop-forma__knopka, .news-shop-cta__knopka, .not-found-card__primary):active {
  border-color: var(--knopka-fon-active);
  background: var(--knopka-fon-active);
  transform: translateY(1px);
}

:is(.shop-zayavka__knopka--tihaya, .news-shop-cta__knopka--tihaya, .not-found-card__secondary,
    .shop-opcii__esche, .news-section__archive-link, .shop-podelitsya__knopka, .shop-stranicy__knopka,
    .listing-showcase__feature-link):active {
  background: var(--knopka-tihaya-active);
  transform: translateY(1px);
}

:is(.shop-zayavka__knopka, .shop-forma__knopka, .news-shop-cta__knopka, .not-found-card__primary,
    .not-found-card__secondary, .shop-podelitsya__knopka, .shop-opcii__esche, .shop-stranicy__knopka,
    .listing-showcase__feature-link, .news-section__archive-link, .news-moto__action):focus-visible {
  outline: 2px solid var(--news-accent);
  outline-offset: 2px;
}

/* Текстовая кнопка: без рамки, но та же высота 44 — зона касания. Отступ
   12 px по бокам и такое же отрицательное поле: текст стоит в линию с
   соседями, а площадка под пальцем шире. В низке карточек поле снимается
   (см. .news-card__footer > *), там его роль играет отступ низка. */
:is(.news-card__cta, .news-card__share, .section-heading__link, .shop-novosti__vse, .moto-tape__all, .glav-cena__karta),
.listing-showcase__carousel-footer a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  font-family: var(--news-font-sans);
  font-size: calc(var(--news-font-small) - 1px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  color: var(--news-accent);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s ease;
}

.news-card__share {
  color: var(--news-text-muted);
}

/* Поля у текстовых подписей больше не отрицательные — правило оставлено
   страховкой на случай, если где-то снаружи их снова добавят. */
.news-card__footer > :is(a, button) {
  margin: 0;
}

.shop-novosti__vse {
  margin-left: auto;
}

@media (hover: hover) {
  :is(.news-card__cta, .news-card__share, .section-heading__link, .shop-novosti__vse, .moto-tape__all, .glav-cena__karta):hover,
.listing-showcase__carousel-footer a:hover {
    color: var(--news-accent);
    text-decoration: none;
  }
}

:is(.news-card__cta, .news-card__share, .section-heading__link, .shop-novosti__vse, .moto-tape__all, .glav-cena__karta):active,
.listing-showcase__carousel-footer a:active {
  opacity: 0.75;
}

:is(.news-card__cta, .news-card__share, .section-heading__link, .shop-novosti__vse, .moto-tape__all, .glav-cena__karta):focus-visible,
.listing-showcase__carousel-footer a:focus-visible {
  outline: 2px solid var(--news-accent);
  outline-offset: 2px;
}

/* Ссылка «Весь каталог →» — справа от h2, по центру строки. 🔴 На страницах
   магазина .section-heading переведён в display:block ради одноколонного h1
   (15-shop.css), и ссылка проваливалась ПОД заголовок. Шапка со ссылкой —
   снова пара «заголовок слева, ссылка справа», как у портала. */
.section-heading {
  align-items: center;
}

.section-heading:has(> .section-heading__link) {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

/* Наведение у остальных ссылок, где его не было. */
@media (hover: hover) {
  .news-contact:hover strong,
  .shop-tekst__telefon:hover {
    color: var(--news-accent);
  }

  .news-brand:hover,
  .news-footer__logo:hover {
    opacity: 0.8;
  }
}

/* ------------------------------------------------ мелкие цели касания */
/* Правило одно: у любого a/button площадка ≥ 44 px. Картинка внутри может
   оставаться 20 px — площадку даёт невидимый псевдоэлемент или высота. */
.news-socials__link {
  position: relative;
}

.news-socials__link::after {
  content: "";
  position: absolute;
  inset: -12px;
}

.news-footer__socials .news-socials__link {
  width: 24px;
  height: 24px;
}

.news-footer__tax-heading {
  font-size: var(--news-font-meta);
}

/* Ссылки марок и кузовов в подвале: перенос вместо жёстких колонок. 🔴 Пять
   колонок по 128 px на 768 ставили «Range Rover» и «Седан» сиротами. */
.news-footer__tax-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 22px;
}

.news-footer__tax-link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  font-size: var(--news-font-small);
}

/* Правовые ссылки подвала: одна строка на широком, столбик на телефоне.
   🔴 На 768 переносились 3 + 1 с висячей чёрточкой перед «Документы». */
.news-footer__docs a {
  display: inline-flex;
  align-items: center;
  min-height: var(--knopka-h);
}

/* На 768 четыре ссылки 14 px с зазором 32 — 753 px, а строка 720: третья
   строка снова была 3 + 1. Кегль 13 и зазор 24 дают 682 — одна строка. */
@media (max-width: 1180px) {
  .news-footer__docs {
    gap: 0 24px;
    font-size: 13px;
  }

  .news-footer__docs a + a::before {
    left: -12px;
  }
}

/* Вкладки карточки: высота 44; перенос оставлен — прокрутку владелец не любит. */
.shop-vkladka {
  min-height: var(--knopka-h);
  padding: 0 0 4px;
}

.shop-vkladki__ryad {
  gap: 4px 22px;
}

/* «…» в шапке: текст вылезал из кнопки 18 px. */
.news-nav__item--more {
  width: auto;
  min-width: 28px;
  padding: 5px 4px;
}

.news-nav__item--more .news-nav__more {
  width: auto;
  letter-spacing: 0.06em;
}

/* Подписи полей формы — 13, а не 11: «ТЕЛЕФОН *» — единственное, что
   объясняет обязательность. */
.shop-forma__pole > span {
  font-size: 13px;
}

/* 🔴 Одна форма — одна высота полей. На «О нас» поля были 54 против 46:
   статья задаёт свой межстрочный, а он входит в высоту поля. */
.shop-forma .shop-forma__pole :is(input, textarea) {
  min-height: 46px;
  padding: 12px 14px;
  line-height: 1.3;
  font-size: 16px;
}

.onas .shop-forma__zagolovok {
  font-size: var(--news-font-title);
}

/* ---------------------------------------------------------- заголовки */
/* H2 разделов — одна ступень на весь сайт (было 24 и 31,98 на одной
   странице; дробь — от clamp без округления). H1 остаётся крупнее. */
.section-heading h2,
.shop-harakteristiki__title,
.shop-forma__zagolovok,
.shop-novosti__title,
.glav-cena__zagolovok {
  font-size: var(--news-font-title);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* ------------------------------------------------------ герой главной */
/* 🔴 Снимок 2:1 в рамке 698×572 терял 43 % ширины, а сверху ложилась
   плашка 474×278: видны были дверь и колесо. Плашка теперь ПОД снимком на
   всех ширинах — так уже сделано на 390, и там всё в порядке. Снимок — в
   рамке 2:1 на всю ширину карточки, тёмный фон карточки — фон плашки. */
.glav-geroy .listing-showcase__feature {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: auto;
  min-height: 0;
}

.glav-geroy .listing-showcase__feature::after {
  content: none;
}

.glav-geroy .listing-showcase__media {
  position: relative;
  height: auto;
  min-height: 0;
  aspect-ratio: 2 / 1;
}

.glav-geroy .listing-showcase__media img {
  object-position: 50% 50%;
}

.glav-geroy .listing-showcase__feature-overlay {
  position: static;
  inset: auto;
  width: auto;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: var(--geroy-otstup, 20px 24px 24px);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  background: transparent;
}

/* Подводка возвращается: плашка больше ничего не закрывает. */
.glav-geroy .listing-showcase__feature-excerpt {
  display: -webkit-box;
}

/* --------------------------------------------------------------- 404 */
/* 🔴 На 390 водяной знак «404» лез на кнопку, сверху пустовало 131 px
   (min-height у main с центровкой), кнопки были разной ширины. */
@media (max-width: 760px) {
  .not-found-layout {
    min-height: 0;
  }

  .not-found-card::before {
    content: none;
  }
}

@media (max-width: 560px) {
  .not-found-card__actions > * {
    flex: 1 1 100%;
  }
}

/* ------------------------------------------ сетки «по три»: 3 или 1 */
.shop-pohozhie__lenta,
.shop-novosti__lenta,
.moto-tape__list,
.glav-cena__vybor {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* 🔴 14-motosalon прячет третью мотоновость в полосе 641–900 под свои две
   колонки. У нас в этой полосе три колонки (до 760) или одна — третья нужна.
   Возвращаем тем же display, что у карточки, иначе ломается её сетка. */
@media (min-width: 641px) and (max-width: 900px) {
  .moto-tape__card:nth-child(3) {
    display: grid;
  }
}

@media (max-width: 760px) {
  .shop-pohozhie__lenta,
  .shop-novosti__lenta,
  .moto-tape__list,
  .glav-cena__vybor {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------ узкий экран */
@media (max-width: 760px) {
  :root {
    --geroy-otstup: 16px var(--news-feature-inset-mobile, 16px) var(--news-feature-inset-mobile, 16px);
  }

  /* Ряды подбора листаются пальцем: цели 44. */
  .shop-teg,
  .shop-god__vyzov,
  .shop-god__lyuboy,
  .shop-god__yach,
  .shop-podbor__sbros,
  .shop-podbor__chislo,
  .shop-razdely__punkt {
    min-height: var(--knopka-h);
  }

  .shop-novosti__vse {
    margin-left: -12px;
  }

  .section-heading h2,
  .shop-harakteristiki__title,
  .shop-forma__zagolovok,
  .shop-novosti__title,
  .glav-cena__zagolovok {
    font-size: calc(var(--news-font-title) - 4px);
  }

  /* Правовые ссылки — столбиком, без чёрточек-разделителей. */
  .news-footer__docs {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .news-footer__docs a + a::before {
    content: none;
  }
}

@media (max-width: 560px) {
  /* Крошки: на телефоне два верхних уровня прячем — иначе две строки со
     стрелками в начале строки. Логотип ведёт на главную, каталог — в меню. */
  .shop-kroshki__punkt:nth-child(-n+2) {
    display: none;
  }

  .shop-kroshki__punkt:nth-child(3)::before {
    content: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(.news-card, .shop-card, .shop-pohozhaya, .shop-novosti__karta, .moto-tape__card),
  :is(.shop-zayavka__knopka, .shop-forma__knopka, .news-shop-cta__knopka, .not-found-card__primary,
      .not-found-card__secondary, .shop-podelitsya__knopka, .shop-opcii__esche, .shop-stranicy__knopka,
      .listing-showcase__feature-link, .news-section__archive-link, .news-moto__action),
  :is(.news-card__cta, .news-card__share, .section-heading__link, .shop-novosti__vse, .moto-tape__all, .glav-cena__karta),
.listing-showcase__carousel-footer a {
    transition: none;
  }
}
/* ===== конец единого слоя ===== */
/* ===== Магазин мотосалона: то, чего нет у автомобилей =====
   Основа — стили карточки и витрины АВТОСАЛОНА №1 (подключены выше без
   правок). Здесь только цвета-варианты, наличие, электронные системы и
   «Особенности». Цвета — из токенов портала, своих не заводим. */

/* 🔴 У галереи и цены стоит display:grid/block — он сильнее атрибута hidden,
   и спрятанный цвет оставался бы на странице. */
.shop-gal[hidden],
.shop-cena[hidden],
.shop-podelitsya__artikul[hidden] {
  display: none;
}

.moto-galerei {
  min-width: 0;
}

/* Снимки мотоциклов — студийные, на белом или прозрачном фоне: серую
   подложку автомобильной галереи меняем на белую, иначе вокруг вырезанного
   мотоцикла видна серая рамка. */
.moto-galerei .shop-gal__scena,
.moto-galerei .shop-gal__mini {
  background: #fff;
}
.moto-galerei .shop-gal__scena {
  border: 1px solid var(--news-stroke);
}
.moto-galerei .shop-gal__fon {
  display: none;
}

.moto-artikul {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--news-text-muted);
}
.moto-opisanie {
  margin: 16px 0 4px;
}
.moto-opisanie p {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--news-text);
}
.moto-opisanie p:last-child {
  margin-bottom: 0;
}

/* Цвета — квадратные образцы, как на прежнем сайте; название выбранного в подписи. */
.moto-cveta {
  display: grid;
  gap: 8px;
  margin: 16px 0 18px;
}
.moto-cveta__podpis {
  margin: 0;
  font-size: 14px;
  color: var(--news-text-muted);
}
.moto-cveta__podpis b {
  color: var(--news-text);
}
.moto-cveta__ryad {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.moto-cvet {
  width: 40px;
  height: 40px;
  padding: 4px;
  border: 2px solid transparent;
  border-radius: 10px;
  background: none;
  cursor: pointer;
}
.moto-cvet:hover {
  border-color: var(--news-stroke);
}
.moto-cvet:focus-visible {
  outline: 2px solid var(--news-accent);
  outline-offset: 2px;
}
.moto-cvet.is-vybran {
  border-color: var(--news-accent);
}
.moto-cvet__obrazec {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}
.moto-sosed__cveta .moto-cvet__obrazec {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 4px;
}

.moto-nalichie {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--news-text-muted);
}
.moto-nalichie::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.moto-nalichie--est {
  color: #1f7a3f;
}

.moto-lead__slogan {
  margin: 0 0 14px;
  font-size: clamp(24px, 3.2vw, 38px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--news-text);
  text-wrap: balance;
}
.moto-lead p + p {
  margin-top: 12px;
}

/* Вкладки: в описаниях мотоциклов есть списки и несколько подзаголовков. */
.shop-vkladka__tekst ul {
  margin: 0 0 14px;
  padding-left: 20px;
  color: var(--news-text-muted);
  font-size: var(--news-font-body);
  line-height: var(--news-line-body);
}
.shop-vkladka__tekst li + li {
  margin-top: 4px;
}
.shop-vkladka__tekst ul + .shop-vkladka__zagolovok,
.shop-vkladka__tekst p + .shop-vkladka__zagolovok {
  margin-top: 22px;
}
/* Вкладка без снимка (обычно «Характеристики») — колонки заданы ниже, в блоке вкладок. */
.shop-vkladka__panel--bez-foto .shop-vkladka__tekst > * {
  break-inside: avoid;
}
.shop-vkladka__panel--bez-foto .shop-vkladka__zagolovok {
  break-after: avoid;
}

.moto-sistemy,
.moto-osobennosti {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--news-stroke);
}
.moto-razdel__zagolovok {
  margin: 0 0 14px;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.moto-sistemy__slova {
  max-width: 72ch;
}
.moto-sistemy__slova p {
  margin: 0;
  color: var(--news-text-muted);
  font-size: var(--news-font-body);
  line-height: var(--news-line-body);
}
.moto-sistemy__setka {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.moto-sistema {
  padding: 18px;
  border: 1px solid var(--news-stroke);
  border-radius: var(--news-radius-lg);
  background: #fff;
}
.moto-sistema__znachok {
  width: 48px;
  height: 48px;
  object-fit: contain;
  margin-bottom: 12px;
}
.moto-sistema__sokr {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--news-accent);
}
.moto-sistema__imya {
  margin: 2px 0 8px;
  font-weight: 700;
}
.moto-sistema__tekst {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--news-text-muted);
}

/* Слоган поверх затемнённой фотографии модели. */
.moto-geroy {
  position: relative;
  margin-top: 36px;
  border-radius: var(--news-radius-lg);
  overflow: hidden;
  background: #1c1c1c;
  color: #fff;
}
.moto-geroy__fon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.38;
}
.moto-geroy__slova {
  position: relative;
  max-width: 780px;
  padding: clamp(28px, 6vw, 72px) clamp(20px, 5vw, 64px);
}
.moto-geroy__slogan {
  margin: 0 0 16px;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #fff;
  text-wrap: balance;
}
.moto-geroy__slova p {
  margin: 0 0 12px;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
}
.moto-geroy__slova p:last-child {
  margin-bottom: 0;
}
.moto-geroy__slova b {
  color: #fff;
}

/* Точки на фотографии. */
.moto-tochki {
  position: relative;
  max-width: 1150px;
  margin: 8px auto 0;
  background: #fff;
  border-radius: var(--news-radius-lg);
}
.moto-tochki__foto {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--news-radius-lg);
}
.moto-tochka {
  position: absolute;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.moto-tochka span {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 2px solid #111;
  background: rgba(255, 255, 255, 0.55);
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.moto-tochka::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 2px solid var(--news-accent);
  animation: moto-puls 2.4s ease-out infinite;
}
.moto-tochka:hover span,
.moto-tochka:focus-visible span {
  transform: scale(1.15);
  background: var(--news-accent);
  border-color: var(--news-accent);
}
.moto-tochka:focus-visible {
  outline: 2px solid var(--news-accent);
  outline-offset: 2px;
}
@keyframes moto-puls {
  0% { transform: scale(1); opacity: 0.9; }
  100% { transform: scale(2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .moto-tochka::before { animation: none; opacity: 0; }
}
.moto-tochki__spisok {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.moto-tochki__punkt {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--news-stroke);
  border-radius: 999px;
  background: #fff;
  color: var(--news-text);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.moto-tochki__punkt:hover {
  border-color: var(--news-accent);
  color: var(--news-accent);
}
.moto-okno {
  width: min(920px, calc(100vw - 24px));
}
.moto-okno__telo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.moto-okno__foto {
  width: 100%;
  height: auto;
  border-radius: 12px;
}
.moto-okno__tekst p {
  margin: 0 0 10px;
  line-height: 1.5;
  color: var(--news-text-muted);
}

/* Модельный ряд. */
.moto-ryad {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--news-stroke);
}
.moto-ryad__setka {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 8px;
}
.moto-sosed {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--news-stroke);
  border-radius: var(--news-radius-lg);
  background: #fff;
  color: var(--news-text);
  text-decoration: none;
}
.moto-sosed:hover {
  border-color: var(--news-accent);
}
.moto-sosed img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
}
.moto-sosed__imya {
  font-weight: 700;
}
.moto-sosed__cena {
  font-size: 14px;
  color: var(--news-text-muted);
}
.moto-sosed__cveta {
  display: flex;
  gap: 6px;
}

/* Текущая модель в ряду — без ссылки, с меткой: на прежней странице ряд
   показывал всю линейку вместе с открытой моделью. */
.moto-sosed--tekushchiy {
  position: relative;
  border-color: var(--news-accent);
  cursor: default;
}
.moto-sosed__metka {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--news-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Кнопка «Заказать» под выбором цвета — главное действие карточки, как на
   прежней странице; остальные каналы — тихие, под галереей. */
.moto-zakazat {
  width: 100%;
  margin: 0;
}

/* ===== Верх карточки: колонки одной высоты.
   🔴 Было: правая сводка вдвое выше галереи — под фото пустой прямоугольник
   ~600 px; потом три обведённые кнопки связи под галереей — тоже «не круто».
   Стало: кадр галереи 4:3, как на прежней странице (640×480), — левая колонка
   выше; сводка компактнее: «Поделиться» в строке с артикулом, связь — одной
   тихой строкой под «Заказать». Колонки начинаются сверху, короткую не тянем. */
.moto-galerei .shop-gal__scena {
  aspect-ratio: 4 / 3;
}
/* Один кадр без миниатюр — чуть выше (5:4), чтобы колонка не отставала от панели. */
.moto-galerei .shop-gal--odin .shop-gal__scena {
  aspect-ratio: 5 / 4;
}
.shop-karta__svodka {
  gap: 12px;
  padding: 18px 22px 20px;
}
@media (min-width: 1101px) {
  .shop-karta__verh {
    grid-template-columns: minmax(0, 1.3fr) minmax(300px, 1fr);
  }
}
/* 🔴 На 1024 две колонки по 476 px: панель 630 px против кадра 360 — под фото
   пустота. До 1100 — одна колонка: галерея во всю ширину, панель под ней. */
@media (max-width: 1100px) {
  .shop-karta__verh {
    grid-template-columns: minmax(0, 1fr);
  }
}
.moto-artikul,
.moto-opisanie,
.moto-cveta,
.moto-nalichie {
  margin: 0;
}
.moto-artikul-ryad {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}
.moto-artikul-ryad .shop-podelitsya__knopka {
  --knopka-h: 34px;
  padding: 0 14px;
  font-size: 13px;
}

/* Строка связи: подпись и часы слева, круглые значки справа (SVG — из шапки
   и подвала портала). Цель касания 44 px. На широком экране у телефона
   виден номер. */
.moto-svyaz {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-top: -4px;
}
.moto-svyaz__podpis {
  display: grid;
  margin: 0;
  font-size: 13px;
  line-height: 1.3;
  color: var(--news-text-muted);
}
.moto-svyaz__chasy {
  font-size: 12px;
  color: var(--news-text-soft);
}
.moto-svyaz__knopki {
  display: flex;
  align-items: center;
  gap: 8px;
}
.moto-svyaz__knopka {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  height: 44px;
  padding: 0 11px;
  border: 1px solid var(--news-stroke);
  border-radius: 999px;
  background: var(--news-surface-soft, #f6f6f6);
  color: var(--news-accent);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.moto-svyaz__knopka svg {
  width: 20px;
  height: 20px;
  flex: none;
  fill: currentColor;
}
.moto-svyaz__knopka:hover {
  border-color: var(--news-accent);
  background: #fff;
}
.moto-svyaz__knopka--telefon {
  padding-right: 14px;
}
@media (max-width: 1279px) {
  .moto-svyaz__knopka--telefon {
    padding-right: 11px;
  }
  .moto-svyaz__nomer {
    display: none;
  }
}

/* ===== Вкладки: высота блока постоянная — всё ниже не скачет.
   Все панели лежат в одной ячейке сетки, неактивные скрыты через visibility
   (атрибут hidden ставит общий shop.js, display переопределяем здесь):
   блок высотой в самую высокую панель, скрытые недоступны ни мышью, ни
   клавиатурой, ни читалке. Текст и фото — по верху, кадр везде 3:2. */
.shop-karta .shop-vkladki {
  grid-template-columns: minmax(0, 1fr);
}
.shop-karta .shop-vkladki__ryad {
  grid-row: 1;
}
.shop-karta .shop-vkladki > .shop-vkladka__panel {
  grid-column: 1;
  grid-row: 2;
  align-items: start;
}
.shop-karta .shop-vkladki--odna > .shop-vkladka__panel {
  grid-row: 1;
}
/* 🔴 В bundle.css портала `[hidden] { display: none !important }` — без своего
   `!important` панели не складывались в одну ячейку, и блок прыгал. */
.shop-karta .shop-vkladka__panel[hidden] {
  display: grid !important;
  visibility: hidden;
  pointer-events: none;
}
/* Панель без фото держит ту же сетку; текст — колонками по ширине (не уже
   260 px: на 390 одна колонка, на 1190 — три), 🔴 без жёсткого числа колонок —
   на телефоне получались две узкие. */
@media (min-width: 761px) {
  .shop-karta .shop-vkladka__panel--bez-foto {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .shop-karta .shop-vkladka__panel--bez-foto .shop-vkladka__tekst {
    grid-column: 1 / -1;
  }
}
/* 🔴 Было: текст вкладки без фото резался на три газетные колонки — владелец: «как будто
   вставки какие-то, даже читать не хочется; в новостном блок чтения устроен интереснее».
   Теперь одна колонка для чтения, как у статьи портала (не шире 760 px). */
.shop-karta .shop-vkladka__panel--bez-foto .shop-vkladka__tekst {
  max-width: 760px;
}

/* Кольцо фокуса — только с клавиатуры. Браузер владельца рисовал его и по
   нажатию мышью; после нажатия указателем документ получает класс
   `ukazatel` (shop-moto.js), и кольцо у кнопок карточки гаснет до первого
   нажатия клавиши. */
.ukazatel :is(.shop-vkladka, .moto-cvet, .shop-gal__strelka, .shop-gal__mini, .moto-tochka,
  .moto-tochki__punkt, .moto-tipy__strelka, .moto-tip, .moto-tipy__lenta, .moto-zakazat,
  .moto-geroy__knopka, .moto-svyaz__knopka, .shop-podelitsya__knopka, .shop-opcii__zakryt, .moto-har__fishka, .moto-sosed, .moto-svertka__knopka, .shop-teg, .shop-podbor__sbros, .moto-tipy__tochka):focus-visible {
  outline: none;
}

/* «Обратная связь» в герое: светлая кнопка на тёмном фото. */
.moto-geroy__deystvie {
  margin: 22px 0 0 !important;
}
.moto-geroy__knopka {
  min-height: 48px;
  padding: 0 26px;
  border: 0;
  border-radius: 12px;
  background: #fff;
  color: #111;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.moto-geroy__knopka:hover {
  background: #f1f1f1;
}
.moto-lead .moto-geroy__knopka {
  border: 1px solid var(--news-accent);
  background: #fff;
  color: var(--news-accent);
}

/* Жирный вывод в конце вкладки (строка «## » без текста после неё). */
.moto-vyvod {
  margin: 14px 0 0;
  font-size: 17px;
  line-height: 1.45;
  color: var(--news-text);
}

/* Большая лента фото под вкладками — та же галерея, во всю ширину. */
.moto-lenta {
  margin-top: 32px;
}
.moto-lenta .shop-gal__scena {
  background: #fff;
  border: 1px solid var(--news-stroke);
}
.moto-lenta .shop-gal__mini {
  width: calc((100% - 9 * 8px) / 10);
}

/* Фото в окне особенности: рамка 3:2 с подложкой, чтобы до загрузки снимка
   окно не прыгало и не мигало пустотой. */
.moto-okno__kadr {
  aspect-ratio: 3 / 2;
  border-radius: 12px;
  overflow: hidden;
  background: #f0f0f0;
}
.moto-okno__kadr .moto-okno__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
/* Окно длиннее экрана — прокручивается само, а не страница под ним. */
.moto-okno {
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ===== Карусель типов техники — общий блок (msn1ShopKartaTipy), сверен с
   оригиналом снимками и замерами на 1440: между стрелками четыре типа шагом
   294 px, фото 239 px без рамок, подпись Inter 16/700 бордовым без
   подчёркивания, при наведении фото плавно растёт, крайние плитки за
   стрелками полупрозрачные (0.55 — класс is-kray ставит shop-moto.js), лента
   зациклена.
   🔴 Шаг считается от ширины КОНТЕНТА (контейнерные единицы cqw), а не окна:
   на 1920/2560 плитки не растут, стрелки у краёв контента в фото не упираются.
   Два вида:
   — отдельно стоящий (низ карточки, главная): белая полоса во всю ширину
     окна, за стрелками видны полупрозрачные соседи;
   — .moto-tipy--vnutri (внутри белой карточки витрины): без своего фона и без
     выхода за края, лента вписана между стрелками, соседей за ними нет. */
.shop-body {
  overflow-x: clip;    /* полоса выходит за контент отрицательными полями */
}
.moto-tipy {
  --tipy-vidno: 4;                               /* сколько целиком между стрелками */
  /* 🔴 Геометрия без наездов на любой ширине: стрелка 50 px стоит в промежутке
     между фото соседа и первым фото группы. Для этого фото 210 px при шаге
     контент/4,17 (285 px при 1190; у оригинала 239/294, но там стрелка на 10 px
     заходит на рамку фото и спасают только прозрачные поля PNG). */
  --tipy-shag: calc(100cqw / 4.17);
  --tipy-foto: 210px;
  --tipy-strelka: 50px;
  position: relative;
  container-type: inline-size;
  margin-top: 40px;
}
.moto-tipy__lenta {
  display: flex;
  align-items: start;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 30px 0 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: calc((100% - var(--tipy-vidno) * var(--tipy-shag)) / 2);
  scrollbar-width: none;
  background: #fff;
}
.moto-tipy--vnutri {
  --tipy-shag: calc((100cqw - 2 * (var(--tipy-strelka) + 16px)) / var(--tipy-vidno));
}
.moto-tipy--vnutri .moto-tipy__lenta {
  width: auto;
  margin: 0 calc(var(--tipy-strelka) + 16px);
  padding: 6px 0 2px;
  background: none;
  scroll-padding-left: 0;
}
.moto-tipy__lenta::-webkit-scrollbar {
  display: none;
}
.moto-tipy__lenta:focus-visible {
  outline: 2px solid var(--news-accent);
  outline-offset: -2px;
}
.moto-tip__yacheyka {
  flex: 0 0 var(--tipy-shag);
  box-sizing: border-box;
  padding: 0 10px;
  scroll-snap-align: start;
  transition: opacity 0.3s ease;
}
.moto-tip__yacheyka.is-kray {
  opacity: 0.55;
}
/* Плитка, срезанная краем ленты или окна: подпись целиком или никак. */
.moto-tip__yacheyka.is-obrezan .moto-tip__imya {
  visibility: hidden;
}
.moto-tip {
  display: grid;
  width: 100%;
  justify-items: center;
  align-content: start;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}
.moto-tip img {
  display: block;
  width: min(var(--tipy-foto), 100%);
  height: auto;
  aspect-ratio: 239 / 134;
  object-fit: contain;
  object-position: center bottom;   /* колёса — на одной линии */
  /* Замер оригинала: при наведении 1.055 за 1.35 с, кривая как у Flexbe. */
  transition: transform 1.35s cubic-bezier(0.45, 0.16, 0, 0.57);
}
.moto-tip:hover img {
  transform: scale(1.055);
}
.moto-tip__imya {
  position: relative;
  padding-bottom: 4px;
  font-family: Inter, var(--news-font-sans);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--news-accent);
}
/* Выбранный тип подбора на витрине (класс от shop.js): тонкая полоска под
   подписью. На карточке текущий тип ничем не выделен — как в оригинале. */
.moto-tip.is-vybran .moto-tip__imya::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: 3px;
  background: var(--news-accent);
}
.moto-tip:focus-visible {
  outline: 2px solid var(--news-accent);
  outline-offset: 2px;
  border-radius: 8px;
}
.moto-tip__marki {
  margin-top: 8px;
}
.moto-tipy__strelka {
  position: absolute;
  top: calc(50% - 4px);
  z-index: 1;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: var(--tipy-strelka);
  height: var(--tipy-strelka);
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--news-accent);
  color: #fff;
  cursor: pointer;
}
.moto-tipy--s-markami .moto-tipy__strelka {
  top: 100px;
}
.moto-tipy__strelka svg {
  width: 22px;
  height: 22px;
}
.moto-tipy__strelka--vlevo { left: 0; }
.moto-tipy__strelka--vpravo { right: 0; }
.moto-tipy__strelka:hover {
  filter: brightness(1.12);
}
.moto-tipy__strelka:focus-visible {
  outline: 2px solid var(--news-accent);
  outline-offset: 2px;
}
/* После нажатия мышью кольца нет — только с клавиатуры. */
.moto-tipy__strelka:focus:not(:focus-visible),
.moto-tip:focus:not(:focus-visible) {
  outline: none;
}
.moto-tipy + .moto-ryad {
  margin-top: 28px;
  padding-top: 0;
  border-top: 0;
}
@media (max-width: 1100px) {
  .moto-tipy {
    --tipy-vidno: 3;
    --tipy-shag: calc(100cqw / 3.1);
  }
  /* 🔴 Внутри карточки — после общего правила, иначе оно перебивает шаг. */
  .moto-tipy--vnutri {
    --tipy-shag: calc((100cqw - 2 * (var(--tipy-strelka) + 16px)) / 3);
  }
}
@media (prefers-reduced-motion: reduce) {
  .moto-tip img,
  .moto-tip__yacheyka { transition: none; }
}

/* Окно заказа: одна колонка, поля формы — как у формы автосалона. */
.moto-zayavka {
  width: min(640px, calc(100vw - 24px));
}
.moto-zayavka__telo {
  display: block;
}
.moto-zayavka__lead {
  margin: 0 0 16px;
  color: var(--news-text-muted);
  line-height: 1.5;
}
.moto-zayavka__forma .shop-forma__knopka {
  width: 100%;
}
/* 🔴 Единый слой автопортала красит :hover главной кнопки в синий (12,63,108).
   У мотосалона — тёмно-бордовый. */
.moto-zakazat:hover,
.moto-zakazat:focus-visible,
.moto-zayavka__forma .shop-forma__knopka:hover,
.moto-zayavka__forma .shop-forma__knopka:focus-visible {
  border-color: #6b1013;
  background: #6b1013;
  color: #fff;
}
.moto-zakazat:active,
.moto-zayavka__forma .shop-forma__knopka:active {
  border-color: #5a0d10;
  background: #5a0d10;
}
/* Состояния кнопки и ответа — цветами портала, а не синим автосалона. */
.moto-zayavka__forma .shop-forma__knopka:disabled {
  border-color: var(--news-accent);
  background: var(--news-accent);
  color: #fff;
  opacity: 0.7;
  cursor: default;
}
.moto-zayavka__forma .shop-forma__knopka.is-otpravleno {
  border-color: #1f7a3f;
  background: #1f7a3f;
  opacity: 1;
}
.moto-zayavka .shop-forma__otvet {
  background: rgba(128, 20, 30, 0.08);
}
.moto-zayavka .shop-forma__otvet--oshibka {
  background: rgba(200, 60, 40, 0.1);
}
.moto-zayavka__telefon {
  margin: 16px 0 0;
  font-size: 14px;
  color: var(--news-text-muted);
}
.moto-zayavka__telefon a {
  color: var(--news-text);
  text-decoration: none;
}

@media (max-width: 760px) {
  .moto-okno__telo {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .moto-geroy {
    margin-top: 24px;
  }
  .moto-sistemy,
  .moto-osobennosti,
  .moto-ryad,
  .moto-tipy {
    margin-top: 26px;
    padding-top: 22px;
  }
  /* Телефон, как в оригинале: один тип по центру, стрелки по краям на белом. */
  .moto-tipy {
    --tipy-vidno: 1;
    --tipy-shag: calc(100cqw / 1.25);
    --tipy-strelka: 44px;
  }
  .moto-tipy--vnutri {
    --tipy-shag: calc(100cqw - 2 * (var(--tipy-strelka) + 8px));
  }
  .moto-tipy--vnutri .moto-tipy__lenta {
    margin: 0 calc(var(--tipy-strelka) + 8px);
  }
  .moto-tipy__lenta {
    padding: 18px 0 14px;
  }
  .moto-tipy__strelka {
    width: 44px;
    height: 44px;
  }
  .moto-lenta .shop-gal__mini {
    width: calc((100% - 3 * 8px) / 4);
  }
  .moto-lenta {
    margin-top: 22px;
  }
}
@media (max-width: 560px) {
  .moto-zayavka__forma {
    grid-template-columns: 1fr;
  }
}

/* ===== Верх карточки: низы фото и панели на одной линии (13.10.2026).
   🔴 Владелец: «блок нижних фото и блок где заказ — не по линии; чем больше текст описания,
   тем ниже блок, и появляется пустота». Раньше высоты считались независимо (кадр 4:3 против
   панели по содержимому) и сходились случайно: разница 13 px у RS 660, 79 px у RS 660 Factory.
   Теперь высоту ряда задаёт ТОЛЬКО правая панель, а галерея вписана в неё целиком: кадр
   занимает всё, что осталось над миниатюрами. Ничего не тянется пустым фоном, описание и
   кнопки на своих местах. Только там, где колонок две (шире 1100 px). */
@media (min-width: 1101px) {
  .shop-karta__verh {
    align-items: stretch;
  }
  .moto-galerei {
    position: relative;
    min-height: 420px;
  }
  .moto-galerei .shop-gal:not([hidden]) {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 10px;
  }
  /* Одно фото — миниатюр нет: второй строки и зазора под неё быть не должно,
     иначе кадр на 10 px короче панели. */
  .moto-galerei .shop-gal--odin:not([hidden]) {
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
  }
  .moto-galerei .shop-gal__scena,
  .moto-galerei .shop-gal--odin .shop-gal__scena {
    aspect-ratio: auto;
    width: 100%;
    height: 100%;
    min-height: 0;
  }
  .moto-galerei .shop-gal__kadr {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

/* ===== «Характеристики»: фильтр по группам (13.10.2026).
   Кнопки — те же фишки, что в подборе каталога (.shop-teg). Все группы в одной ячейке
   сетки: высота поля = самая длинная группа, переключение без скачка страницы. */
.shop-karta .shop-vkladka__panel--bez-foto .shop-vkladka__tekst.moto-har {
  columns: auto;
  max-width: none;
}
.moto-har__filtr {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
}
.moto-har__pole {
  display: grid;
}
.moto-har__gruppa {
  grid-area: 1 / 1;
  visibility: hidden;
}
.moto-har__gruppa.is-vidna {
  visibility: visible;
}
/* 🔴 Видимая группа не должна просвечивать, когда сама вкладка скрыта (у панелей
   вкладок hidden = visibility:hidden, а visible у потомка его перебивает). */
.shop-vkladka__panel[hidden] .moto-har__gruppa.is-vidna {
  visibility: hidden;
}
.moto-har__stroki {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 48px;
  align-content: start;
  margin: 0;
}
.moto-har__stroki > div {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 16px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid var(--news-stroke);
}
.moto-har__stroki > .moto-har__stroka--odna {
  grid-template-columns: minmax(0, 1fr);
}
.moto-har__stroki dt {
  font-size: var(--news-font-small);
  line-height: 1.4;
  color: var(--news-text-muted);
}
.moto-har__stroki dd {
  margin: 0;
  font-size: var(--news-font-body);
  font-weight: 500;
  line-height: 1.4;
  color: var(--news-text);
}
@media (max-width: 760px) {
  .moto-har__stroki {
    grid-template-columns: minmax(0, 1fr);
  }
  /* На телефоне ряд фишек листается вбок — в две-три строки он занял бы пол-экрана. */
  .moto-har__filtr {
    flex-wrap: nowrap;
    overflow-x: auto;
    /* 🔴 Без отрицательных полей: ряд, выходящий за колонку, давал прокрутку всей страницы вбок. */
    max-width: 100%;
    scrollbar-width: none;
  }
  .moto-har__filtr::-webkit-scrollbar {
    display: none;
  }
  .moto-har__filtr .shop-teg {
    flex: none;
  }
}

/* ===== Текст вкладок — блок чтения как у статьи портала (06-article.css): тот же кегль,
   интерлиньяж и почти чёрный текст, заголовок с бордовой чертой слева. */
.shop-karta .shop-vkladka__tekst p,
.shop-karta .shop-vkladka__tekst li {
  font-size: var(--news-font-body);
  line-height: var(--news-line-body);
  color: rgba(24, 18, 15, 0.92);
}
.shop-karta .shop-vkladka__tekst p {
  margin: 0 0 1.05em;
}
.shop-karta .shop-vkladka__tekst p:last-child {
  margin-bottom: 0;
}
.shop-karta .shop-vkladka__tekst .shop-vkladka__zagolovok {
  position: relative;
  margin: 0 0 0.7em;
  padding-left: 16px;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.1;
  letter-spacing: var(--news-track-title, -0.02em);
  text-wrap: balance;
}
.shop-karta .shop-vkladka__tekst .shop-vkladka__zagolovok::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.14em;
  bottom: 0.1em;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--news-accent), rgba(132, 22, 24, 0.18));
}
.shop-karta .shop-vkladka__tekst b {
  color: var(--news-text);
}

/* Фишки групп характеристик: значок Tabler + короткое слово; полное название группы —
   заголовком над таблицей и во всплывающей подсказке. */
.moto-har__fishka {
  gap: 7px;
  min-height: 36px;
  padding: 0 14px 0 11px;
}
.moto-har__fishka svg {
  width: 18px;
  height: 18px;
  flex: none;
}
.moto-har__zagolovok {
  margin: 0 0 6px;
  font-family: var(--news-font-sans);
  font-size: var(--news-font-meta, 12px);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--news-text-muted);
}

/* ===== Низ карточки: новости портала, подписка на Telegram, врезка автосалона (13.10.2026).
   Блоки свои у портала и автосайта (shop-novosti, news-tg, shop-card) — здесь только отступы,
   чтобы ритм был тот же, что у остальных разделов карточки. */
.shop-karta > .shop-novosti,
.shop-karta > .news-tg,
.shop-karta > .moto-avto {
  margin-top: 40px;
}
.moto-avto__setka {
  margin-top: 18px;
}
@media (max-width: 760px) {
  .shop-karta > .shop-novosti,
  .shop-karta > .news-tg,
  .shop-karta > .moto-avto {
    margin-top: 26px;
  }
}

/* Окно особенности: текст — тем же блоком чтения, что и вкладки (было серым жирным, читалось тяжело). */
.moto-okno__tekst p {
  font-size: var(--news-font-body);
  line-height: var(--news-line-body);
  color: rgba(24, 18, 15, 0.92);
}
.moto-okno__tekst b {
  color: var(--news-text);
}

/* ===== Длинная текстовая вкладка сворачивается (13.10.2026): характеристики прозой у Vespa
   растягивали блок вкладок до 2100 px, и под остальными вкладками зияла пустота. */
.moto-svertka.is-svernuta {
  max-height: 420px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 70px), transparent);
  mask-image: linear-gradient(#000 calc(100% - 70px), transparent);
}
.moto-svertka__knopka {
  justify-self: start;
  align-self: start;
  margin-top: 14px;
}
.shop-karta .shop-vkladka__panel--bez-foto .moto-svertka__knopka {
  grid-column: 1 / -1;
}

/* Точки на фото: белая заливка и тёмная обводка — видны и на светлом, и на чёрном узле
   (тонкий чёрный кружок терялся на двигателе и колесе). */
.moto-tochka span {
  border-color: #111;
  background: #fff;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
.moto-tochka span::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 10px;
  height: 10px;
  background:
    linear-gradient(#111, #111) center / 10px 2px no-repeat,
    linear-gradient(#111, #111) center / 2px 10px no-repeat;
}
.moto-tochka:hover span::after,
.moto-tochka:focus-visible span::after {
  filter: invert(1);
}

/* Характеристики, собранные из текста (Vespa): пояснение к значению — мелкой серой строкой,
   абзац без «параметр — значение» — во всю ширину, обычным текстом. */
.moto-har__poyasnenie {
  display: block;
  margin-top: 4px;
  font-size: var(--news-font-small);
  font-weight: 400;
  line-height: 1.45;
  color: var(--news-text-muted);
}
.moto-har__stroki > .moto-har__stroka--odna {
  grid-column: 1 / -1;
}
.moto-har__stroki > .moto-har__stroka--odna dd {
  font-weight: 400;
  color: var(--news-text-muted);
  font-size: var(--news-font-small);
}
.moto-har__stroki dd b {
  font-weight: 700;
}

/* Плитки модельного ряда: у живых фото из салона были прямые углы — выбивались из скруглённой плитки. */
.moto-sosed img {
  border-radius: 12px;
}

/* Таблица характеристик, свёрнутая до высоты соседних вкладок (высоту ставит shop-moto.js). */
.moto-har__pole.is-svernuto {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(#000 calc(100% - 56px), transparent);
}

/* 🔴 Скругление на плитке ряда не было видно: фото вписано в рамку 3:2 (contain), и скруглялись
   пустые поля, а не сам снимок. Живые фото из салона заполняют рамку целиком — тогда углы скруглены. */
.moto-sosed img.moto-sosed__zhivoe {
  object-fit: cover;
}

/* Пояснения к значениям и абзацы-комментарии в таблице характеристик скрыты, пока не нажата
   «Показать пояснения» (класс is-podrobno ставит shop-moto.js; без скрипта видно всё). */
/* 🔴 Скрываются только пояснения и абзацы-комментарии (есть у Vespa). Строка характеристики без
   «параметр: значение» (moto-har__stroka--odna) — это данные, она видна всегда. */
.moto-har.est-poyasneniya:not(.is-podrobno) .moto-har__poyasnenie,
.moto-har.est-poyasneniya:not(.is-podrobno) .moto-har__kommentariy {
  display: none;
}
.moto-har__stroki > .moto-har__stroka--odna:not(.moto-har__kommentariy) dd {
  font-weight: 500;
  color: var(--news-text);
  font-size: var(--news-font-body);
}
.moto-har > .moto-svertka__knopka {
  margin-top: 16px;
}

/* ===== Главная: лента типов с марками и «Бренды» — как на прежней главной msn1.ru (13.10.2026).
   Оба блока — та же карусель, что в карточке и каталоге (один движок [data-tipy]): по кругу,
   приглушённые соседи, стрелки вне фото. Здесь только отличия главной. */
.moto-tipy--s-markami {
  --tipy-vidno: 3;                       /* у оригинала между стрелками три типа, по краям — приглушённые */
  --tipy-shag: calc(100cqw / 3.55);
  --tipy-foto: 290px;
}
.moto-tipy--s-markami .moto-tipy__lenta {
  padding-bottom: 12px;
}
.moto-tipy--s-markami .moto-tipy__strelka {
  top: 232px;                            /* на уровне подписи типа, под фото */
}
.moto-tipy--s-markami .moto-tip__imya {
  font-size: 18px;
}
/* Точки-указатели под лентой. У ленты типов фон — белая полоса во всю ширину окна. */
.moto-tipy__tochki {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 6px 0 26px;
}
.moto-tipy--s-markami .moto-tipy__tochki {
  background: #fff;
  box-shadow: 0 0 0 100vmax #fff;
  clip-path: inset(0 -100vmax);
}
.moto-tipy__tochka {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(132, 22, 24, 0.28);
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.moto-tipy__tochka::before {             /* цель касания 28 px при точке 8 px */
  content: "";
  position: absolute;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
}
.moto-tipy__tochka { position: relative; }
.moto-tipy__tochka.is-aktivna {
  background: var(--news-accent);
  transform: scale(1.6);
}
/* Столбик марок под типом: раскрытый список — белой карточкой с тенью, как меню оригинала. */
.moto-tipy--s-markami .glav-tip__marki > li > details[open] > .glav-tip__spisok {
  margin: 4px auto 12px;
  padding: 8px;
  max-width: 300px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(17, 17, 17, 0.14);
  text-align: left;
}
.moto-tipy--s-markami .glav-tip__spisok a,
.moto-tipy--s-markami .glav-tip__spisok details summary {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
}
.moto-tipy--s-markami .glav-tip__spisok a:hover,
.moto-tipy--s-markami .glav-tip__spisok details summary:hover {
  background: #ececec;
  text-decoration: none;
}
.moto-tip__yacheyka.is-kray .glav-tip__marki {
  pointer-events: none;                  /* приглушённый сосед не раскрывается, пока не пролистан в центр */
}

/* «Бренды»: белая полоса, заголовок по центру, три логотипа между стрелками, тонкие разделители. */
.glav-brendy {
  margin-top: 40px;
  padding: 44px 0 8px;
  background: #fff;
  box-shadow: 0 0 0 100vmax #fff;
  clip-path: inset(0 -100vmax);
}
.glav-brendy__zagolovok {
  margin: 0 0 28px;
  font-family: Inter, var(--news-font-sans);
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 500;
  letter-spacing: 0;
  text-align: center;
}
.moto-tipy--brendy {
  --tipy-vidno: 3;
  --tipy-shag: calc((100cqw - 2 * (var(--tipy-strelka) + 16px)) / 3);
  margin-top: 0;
}
.moto-tipy--brendy .moto-tip__yacheyka {
  padding: 0;
  border-left: 1px solid var(--news-stroke);
}
.moto-tipy--brendy .moto-brend {
  display: grid;
  place-items: center;
  height: 170px;
}
.moto-tipy--brendy .moto-brend img {
  width: auto;
  max-width: min(200px, 60%);
  height: auto;
  max-height: 84px;
  aspect-ratio: auto;
  object-position: center;
}
.moto-tipy--brendy .moto-tipy__strelka {
  top: 85px;
  background: #fff;
  color: var(--news-accent);
  border: 2px solid var(--news-accent);
}
.moto-tipy--brendy .moto-tipy__strelka:hover {
  background: var(--news-accent);
  color: #fff;
  filter: none;
}
@media (max-width: 1100px) {
  .moto-tipy--s-markami {
    --tipy-vidno: 2;
    --tipy-shag: calc(100cqw / 2.4);
    --tipy-foto: 240px;
  }
  .moto-tipy--s-markami .moto-tipy__strelka { top: 200px; }
}
@media (max-width: 760px) {
  .moto-tipy--s-markami {
    --tipy-vidno: 1;
    --tipy-shag: calc(100cqw / 1.25);
    --tipy-foto: 230px;
  }
  .moto-tipy--s-markami .moto-tipy__strelka { top: 150px; }
  .moto-tipy--brendy {
    --tipy-vidno: 1;
    --tipy-shag: calc(100cqw - 2 * (var(--tipy-strelka) + 8px));
  }
  .moto-tipy--brendy .moto-brend { height: 130px; }
  .moto-tipy--brendy .moto-tipy__strelka { top: 65px; }
  .glav-brendy { margin-top: 26px; padding-top: 30px; }
}

/* 🔴 Контейнер главной резал всё по ширине колонки (22-stranicy: .glav { overflow-x: clip }) — белая
   полоса ленты и «Брендов» обрывалась на 1240 px, соседние типы срезались вместе с подписями.
   Прокрутку вбок и так режет body (.shop-body { overflow-x: clip }), так что на главной режем там же. */
/* селектор сильнее, чем в 22-stranicy.css: тот файл склеивается ПОСЛЕ этого */
main.listing-layout.glav {
  overflow-x: visible;
}
/* Срезанный краем окна сосед: столбик марок не показываем — иначе от него торчит одна буква. */
.moto-tip__yacheyka.is-obrezan .moto-tip__marki {
  visibility: hidden;
}
/* Логотип бренда — по центру своей ячейки по вертикали. */
.moto-tipy--brendy .moto-brend {
  align-content: center;
}
.moto-tipy--brendy .moto-tipy__lenta {
  align-items: center;
}

/* ===== Главная: столбик марок — меню как у оригинала: марка раскрывается карточкой, модельный ряд —
   вбок, по наведению мыши (на телефоне — по нажатию, вниз). */
@media (hover: hover) and (min-width: 761px) {
  .moto-tipy--s-markami .glav-tip__marki > li { position: relative; }
  .moto-tipy--s-markami .glav-tip__marki > li > details[open] > .glav-tip__spisok {
    position: absolute;
    z-index: 5;
    top: 100%;
    left: 50%;
    width: max-content;
    min-width: 240px;
    max-width: 320px;
    margin: 2px 0 0;
    transform: translateX(-50%);
  }
  .moto-tipy--s-markami .glav-tip__spisok > li { position: relative; }
  .moto-tipy--s-markami .glav-tip__spisok details > summary svg { transform: rotate(-90deg); }
  .moto-tipy--s-markami .glav-tip__spisok details[open] > .glav-tip__spisok {
    position: absolute;
    z-index: 6;
    top: -8px;
    left: calc(100% + 4px);
    width: max-content;
    min-width: 220px;
    max-width: 320px;
    margin: 0;
    padding: 8px;
    border: 0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(17, 17, 17, 0.14);
  }
  /* место под раскрытое меню: лента — область прокрутки и резала бы его снизу */
  /* 🔴 Белый фон ленты на время меню закрашивал серый промежуток под блоком («наводишь — серая полоса
     пропадает», владелец 12.10): добавочное место под меню оставляем прозрачным. */
  .moto-tipy--s-markami .moto-tipy__lenta:has(details[open]) {
    padding-bottom: 300px;
    margin-bottom: -288px;
    background: linear-gradient(#fff, #fff) no-repeat top / 100% calc(100% - 288px);
  }
  .moto-tipy--s-markami:has(details[open]) .moto-tipy__tochki { position: relative; z-index: 0; }
}
.moto-tipy--s-markami .glav-tip__spisok details > summary:focus-visible,
.moto-tipy--s-markami .glav-tip__marki summary:focus-visible {
  outline: 2px solid var(--news-accent);
  outline-offset: -2px;
}
.ukazatel .moto-tipy--s-markami summary:focus-visible { outline: none; }

/* ===== Главная: баннеры шире основной колонки (как на прежней главной — почти во всю ширину окна),
   иначе они мельче блоков под ними. Ниже — новости портала, подписка на Telegram и врезка автосалона. */
@media (min-width: 1280px) {
  main.listing-layout.glav .glav-geroy {
    /* 🔴 Не через transform: сдвинутый блок оставлял свою исходную ширину справа — страница получала
       прокрутку вбок. Отрицательное поле слева прокрутки не даёт. */
    --geroy-shirina: min(1760px, 100vw - 2 * clamp(24px, 4vw, 96px));
    width: var(--geroy-shirina);
    margin-left: calc(50% - var(--geroy-shirina) / 2);
  }
}
.glav-niz {
  display: grid;
  gap: 40px;
  margin-top: 16px;
}
.glav-niz > * {
  margin-top: 0;
}
.glav-niz:empty {
  display: none;
}

/* Окно особенности: фото по центру высоты текста — при длинном тексте оно висело вверху с пустотой под ним. */
@media (min-width: 761px) {
  .moto-okno__telo {
    align-items: center;
  }
}

/* Подвал: подпись разработчика (как на foodcore.pro). */
.news-footer__razrabotka {
  margin: 14px 0 0;
  text-align: center;
  font-size: var(--news-font-small);
  color: var(--news-text-muted);
}
.news-footer__razrabotka a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.news-footer__razrabotka a:hover {
  color: var(--news-accent);
}
/* Главная: у блока новостей нет линии сверху — он стоит сразу под белой полосой брендов. */
.glav-niz > .shop-novosti {
  border-top: 0;
  padding-top: 0;
}

/* 🔴 Пустота под характеристиками (владелец, 12.10: «снова гигант пространство»). Группы лежали
   стопкой в одной ячейке — поле было высотой с самую длинную группу (у Vespa VXL «Подвеска» 426 px
   против 140 у «Двигателя»), а вся вкладка — высотой с соседние вкладки с фото. Теперь видимая
   группа занимает ровно своё место, и вкладка «Характеристики» — тоже: при ней скрытые панели
   высоту не держат, а сама она скрытая не раздувает соседей. Вкладки с фото между собой
   по-прежнему одной высоты. */
.moto-har__pole {
  display: block;
}
.moto-har__gruppa:not(.is-vidna) {
  display: none;
}
.shop-karta .shop-vkladka__panel--bez-foto[hidden]:has(.moto-har),
.shop-karta .shop-vkladki:has(> .shop-vkladka__panel--bez-foto:not([hidden]) .moto-har) > .shop-vkladka__panel[hidden] {
  display: none !important;
}

/* Согласие на обработку персональных данных — обязательная галочка перед кнопкой отправки (все формы). */
.shop-forma__galka {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--news-font-small);
  line-height: 1.45;
  color: var(--news-text);
  cursor: pointer;
}
.shop-forma__galka input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--news-accent);
}
.shop-forma__galka a {
  color: var(--news-accent);
  text-decoration: underline;
}
.shop-forma__galka b {
  color: var(--news-accent);
}
/* Окно особенности без фото (у производителя в окне только текст): текст во всю ширину, окно уже — иначе справа пустая половина. */
.moto-okno:not(:has(.moto-okno__kadr)) {
  width: min(640px, calc(100vw - 24px));
}
.moto-okno__telo:not(:has(.moto-okno__kadr)) {
  grid-template-columns: minmax(0, 1fr);
}
/* Пока согласие не отмечено, кнопка отправки приглушена (нажатие покажет подсказку у галочки, заявка не уйдёт). */
.shop-forma__polya:has(input[name="soglasie"]:not(:checked)) [type="submit"] {
  opacity: .45;
}
/* «Продано» — статус ставит салон; карточка остаётся на сайте. */
.moto-nalichie--prodano {
  color: #8d1118;
}
/* Шапка магазина и новостей — один в один. Единый слой автосалона расширял «…» до 28 px (на портале 18),
   из-за чего телефон и значки стояли на 10 px левее, чем на news.msn1.ru, и «прыгали» при переходе (владелец, 13.10). */
.news-nav__item--more {
  width: 18px;
  min-width: 18px;
  padding: 0;
}
.news-nav__item--more .news-nav__more {
  letter-spacing: normal;
}
/* Заявка отправлена: вместо полей — одно спокойное сообщение. */
.shop-forma__polya.is-otpravlena > :not([data-zayavka-otvet]) {
  display: none;
}
.shop-forma__polya.is-otpravlena {
  display: block;
}
.shop-forma__polya.is-otpravlena [data-zayavka-otvet] {
  margin: 0;
  padding: 28px 24px 28px 68px;
  border-radius: 16px;
  background: #eef6f0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f7a3f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M7.5 12.5l3 3 6-6.5'/%3E%3C/svg%3E") 22px 50% / 30px no-repeat;
  color: #14532b;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  outline: none;
}
/* ===== Витрина мотосалона: /shop/ и /sale/ =====
   Основа — витрина АВТОСАЛОНА №1 (shop-tipy, shop-podbor, shop-card, выше без
   правок). Здесь только то, чем плитка мотоцикла отличается от плитки машины:
   артикул, образцы цветов, наличие, снимок-рендер на белом. */

.vitrina-shapka__lead {
  margin: 10px 0 0;
  max-width: 72ch;
  font-size: var(--news-font-body);
  line-height: var(--news-line-body);
  color: var(--news-text-muted);
}

/* 🔴 Единый слой ставит карточке и сетке display:grid — он сильнее атрибута
   hidden, и карточки с других страниц подбора оставались бы на виду. */
.shop-card[hidden],
.shop-setka[hidden] {
  display: none;
}

/* 🔴 .shop-vitrina — grid без заданных колонок: единственная авто-колонка
   росла до min-content ряда типов (712 px на телефоне), и вместо прокрутки
   внутри ряда ехала вся страница. Колонка не шире контейнера — ряд листается сам. */
.vitrina {
  grid-template-columns: minmax(0, 1fr);
}
.vitrina > * {
  min-width: 0;
}
/* Ряд типов — общая карусель .moto-tipy (20-moto.css); свои стили ряда убраны. */
.vitrina .moto-tipy {
  margin-top: 0;
  margin-bottom: 6px;
}

/* Снимки мотоциклов — на белом: серая подложка автомобильной карточки даёт
   серую рамку вокруг вырезанного мотоцикла. Рендеры (png на прозрачном)
   вписываем целиком, иначе срезало бы колесо; студийные фото заполняют коробку. */
.vitrina-plitka .shop-card__media {
  background: #fff;
}
.vitrina-plitka__foto--render img {
  object-fit: contain;
  padding: 6%;
  box-sizing: border-box;
}

.vitrina-plitka .shop-card__body {
  gap: 6px;
}
.vitrina-plitka__artikul {
  margin: 0;
  font-size: 13px;
  color: var(--news-text-muted);
}
.vitrina-plitka .moto-nalichie {
  margin: 2px 0 0;
}
.vitrina-plitka .shop-card__cena {
  margin-top: 4px;
}

/* Образцы цветов — те же квадраты, что в карточке, только мельче; название
   выбранного цвета рядом. Лежат ВНЕ ссылки: нажатие меняет цвет, а не открывает карточку. */
.vitrina-plitka__cveta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  padding: 0 var(--karta-pad, 20px) 10px;
}
.vitrina-plitka__obrazcy {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.vitrina-plitka .moto-cvet {
  width: 32px;
  height: 32px;
  padding: 3px;
  border-radius: 8px;
}
.vitrina-plitka__cvet-imya {
  font-size: 13px;
  color: var(--news-text-muted);
}

/* 🔴 На телефоне 15-shop.css листает фишки подбора одной строкой — край
   карточки резал «SCOOTE», «Цена по убыванию|» без намёка на продолжение.
   У мотосалона значений немного (6 типов, 8 марок) — переносим строками. */
@media (max-width: 760px) {
  .vitrina .shop-podbor__znacheniya {
    flex-wrap: wrap;
    overflow: visible;
    margin: 0;
    padding: 0;
  }
}

/* Ссылка на весь каталог со страницы «В наличии». */
.vitrina-vse {
  margin: 18px 0 0;
  font-size: var(--news-font-body);
}
.vitrina-vse a {
  color: var(--news-accent);
  font-weight: 700;
  text-decoration: none;
}
.vitrina-vse a:hover {
  text-decoration: underline;
}

/* Значение подбора, которое при текущем выборе дало бы ноль моделей (класс ставит shop-moto-vitrina.js). */
.shop-teg.is-nedostupna,
.shop-teg:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  background: transparent;
}
.moto-tip.is-nedostupna {
  opacity: 0.3;
  pointer-events: none;
}

/* «Модельный ряд»: недоступные при выбранной марке ряды не гаснут, а убираются — их десятки. */
[data-shop-gruppa="shop_ryad"] .shop-teg.is-nedostupna {
  display: none;
}
/* ===== Магазин мотосалона: главная и обычные страницы (зона «Страницы») =====
   Каркас — портал: токены 01-tokens, плита .stranica и кнопка .kontakty__knopka
   из 15-stranicy портала, карточка .news-card — «единый слой» автосалона (выше
   в этом же файле). Здесь только то, чего у портала нет: герой страницы, сетки
   карточек, цифры, преимущества со значками, аккордеон документов, лента со
   стрелками (главная) и блок «связаться» на месте форм Flexbe.
   Пороги — те же, что у портала: 1180 / 760 / 560. Сетки «по три»: три или одна. */

/* ------------------------------------------------------------ общий каркас */
.str,
.glav {
  display: grid;
  gap: 24px;
  min-width: 0;
}

/* 🔴 Герой и лента типов шире экрана (100vw): при полосе прокрутки в настоящем браузере
   это дало бы горизонтальную прокрутку на 17 px — режем по контейнеру главной. */
.glav {
  overflow-x: clip;
}

.str-blok {
  min-width: 0;
  padding: 32px;
  border: 1px solid var(--news-stroke);
  border-radius: var(--news-radius-xl);
  background: var(--news-surface);
}

/* Тёмная плита — там, где у оригинала тёмный блок (герой сервиса, аренды, «О нас»). */
.str-blok--temnyy {
  border-color: transparent;
  background: #141416;
  color: #fff;
}

.str-blok--temnyy :is(h1, h2, h3, p, li, .section-heading__title) {
  color: inherit;
}

.str-blok--temnyy .section-heading__eyebrow {
  color: rgba(255, 255, 255, 0.72);
}

.str-blok--temnyy .str-geroy__lead,
.str-blok--temnyy .str-tekst {
  color: rgba(255, 255, 255, 0.88);
}

/* Плита с фоновым фото оригинала (герой сервиса, «О нас», полоса аренды): адрес
   фото — переменной --str-fon в style самой плиты; поверх — затемнение, чтобы
   белый текст читался. */
.str-blok--foto {
  background-image: linear-gradient(180deg, rgba(10, 10, 12, 0.58), rgba(10, 10, 12, 0.74)), var(--str-fon);
  background-size: cover;
  background-position: center;
}

.str-akcent {
  color: var(--news-accent);
}

.str-blok--temnyy .str-akcent {
  color: #ff5a5e;
}

.str-blok > .section-heading {
  margin-bottom: 20px;
}

.str-blok .section-heading__title {
  margin: 0;
}

.str-tekst,
.str-blok > p {
  margin: 0;
  max-width: 76ch;
  font-size: var(--news-font-body);
  line-height: 1.6;
  color: var(--news-text);
}

.str-tekst + .str-tekst,
.str-blok > p + p {
  margin-top: 10px;
}

.str-tekst--tihiy {
  color: var(--news-text-muted);
}

.str-podpis {
  margin: 12px 0 0;
  font-size: var(--news-font-small);
  color: var(--news-text-muted);
}

.str-spisok {
  margin: 12px 0 0;
  padding-left: 22px;
  font-size: var(--news-font-body);
  line-height: 1.55;
}

.str-spisok li + li {
  margin-top: 6px;
}

.str-h3 {
  margin: 0 0 10px;
  font-family: var(--news-font-sans);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

* + .str-h3 {
  margin-top: 22px;
}

.str-knopki {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

/* ----------------------------------------------------------------- герой */
.str-geroy {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}

.str-geroy--s-foto {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}

.str-geroy__zagolovok {
  margin: 0;
  font-family: var(--news-font-sans);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 800;
  line-height: var(--news-line-title);
  letter-spacing: var(--news-track-title);
  text-wrap: balance;
}

.str-geroy__zagolovok--krupnyy {
  font-size: clamp(40px, 6vw, 72px);
  text-transform: uppercase;
}

.str-geroy__lead {
  margin: 18px 0 0;
  max-width: 62ch;
  font-size: var(--news-font-lead);
  line-height: var(--news-line-lead);
}

.str-geroy__foto {
  min-width: 0;
}

.str-geroy__foto img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--news-radius-lg);
}

.str-geroy__foto figcaption {
  margin-top: 10px;
  font-size: var(--news-font-small);
  color: inherit;
  opacity: 0.8;
}

/* --------------------------------------------------------- сетки карточек */
.str-setka {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.str-setka--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Карточка услуги / цвета / причины — .news-card «единого слоя»; здесь только тело. */
.str-karta__tekst {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--news-text-muted);
}

.str-karta__cena {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.str-karta__cena small {
  display: block;
  margin-top: 2px;
  font-size: var(--news-font-small);
  font-weight: 400;
  color: var(--news-text-muted);
}

.str-karta__metka {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--news-surface-soft);
  font-size: 13px;
  font-weight: 700;
}

.str-karta .kontakty__knopka {
  justify-self: start;
}

/* Услуга сервиса — как у оригинала: во всю ширину, фото слева, слова справа по центру. */
.str-uslugi {
  display: grid;
  gap: 16px;
}

.str-usluga {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  padding: 22px;
  border: 1px solid var(--news-stroke);
  border-radius: var(--news-radius-lg);
  background: var(--news-surface);
}

.str-usluga__foto {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: 16px;
  background: #ececec;
}

.str-usluga__slova {
  display: grid;
  gap: 12px;
  justify-items: center;
  min-width: 0;
  text-align: center;
}

.str-usluga__slova .str-h3 {
  margin: 0;
}

.str-usluga__slova .str-karta__tekst {
  color: var(--news-text);
}

/* ------------------------------------------------------------------ цифры */
.str-cifry {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.str-cifra {
  padding: 22px 24px;
  border: 1px solid var(--news-stroke);
  border-radius: var(--news-radius-lg);
  background: var(--news-surface);
}

.str-cifra__chislo {
  margin: 0;
  font-family: var(--news-font-sans);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--news-accent);
}

.str-cifra__podpis {
  margin: 8px 0 0;
  font-size: 15px;
  color: var(--news-text-muted);
}

/* ---------------------------------------------------- преимущества со значком */
.str-plyusy {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.str-plyus {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

/* Значки — свои у оригинала (svg/png с msn1.ru), не рисуем. */
.str-plyus__znachok {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

/* 🔴 SVG-значки оригинала нарисованы с fill:inherit — в <img> они чёрные. Цвет
   даём маской: сам файл тот же, закрашивается currentColor (бордовый / белый). */
.str-maska {
  display: inline-block;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  background: currentColor;
  color: var(--news-accent);
  -webkit-mask: var(--maska) center / contain no-repeat;
  mask: var(--maska) center / contain no-repeat;
}

.str-blok--temnyy .str-plyus .str-maska {
  color: #ff5a5e;
}

.kontakty__knopka .str-maska {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  color: #fff;
}

.str-plyus__znachok--krug {
  box-sizing: border-box;
  padding: 10px;
  border: 2px solid var(--news-accent);
  border-radius: 50%;
}

.str-blok--temnyy .str-plyus__znachok--krug {
  border-color: rgba(255, 255, 255, 0.85);
}

.str-plyus__imya {
  margin: 0 0 6px;
  font-family: var(--news-font-sans);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.str-plyus__tekst {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--news-text-muted);
}

.str-blok--temnyy .str-plyus__tekst {
  color: rgba(255, 255, 255, 0.82);
}

/* Этапы в столбик (аренда с выкупом): тот же элемент, без значка. */
.str-plyusy--stolbik {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.str-plyusy--stolbik .str-plyus {
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.str-plyus__nomer {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--news-accent);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}

/* 🔴 Специфичность: правило столбика (.str-plyusy--stolbik .str-plyus) сильнее одного класса —
   пункт без значка уезжал в колонку 32 px по слову в строке. */
.str-plyus--bez-znachka,
.str-plyusy--stolbik .str-plyus--bez-znachka {
  grid-template-columns: minmax(0, 1fr);
}

/* Подменю страницы (аренда: Скутеры / Условия / Заявка) — строка якорей и кнопка. */
.str-podmenu {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: center;
  padding: 10px 20px;
  border: 1px solid var(--news-stroke);
  border-radius: var(--news-radius-lg);
  background: var(--news-surface);
}

.str-podmenu > a:not(.kontakty__knopka) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--news-text);
  text-decoration: none;
}

.str-podmenu > a:not(.kontakty__knopka):hover {
  color: var(--news-accent);
}

.str-podmenu__knopka {
  margin-left: auto;
}

/* Узкая тёмная полоса-заголовок (аренда, авто). */
.str-blok--polosa {
  display: grid;
  place-items: center;
  min-height: 220px;
}

/* Цитата (авто). */
.str-citata {
  margin: 0;
  padding: 0;
}

.str-citata__slova {
  margin: 0;
  font-family: var(--news-font-sans);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.str-citata__avtor {
  margin-top: 10px;
  font-size: 15px;
  opacity: 0.8;
}

.str-cifry--na-temnom .str-cifra {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
}

.str-cifry--na-temnom .str-cifra__chislo {
  color: #fff;
}

.str-cifry--na-temnom .str-cifra__podpis {
  color: rgba(255, 255, 255, 0.8);
}

/* Предложение авто: снимок, имя, строки. */
.str-avto {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.str-avto__foto {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  border-radius: 16px;
  background: var(--news-surface-soft);
}

.str-avto .str-h3 {
  margin: 8px 0 0;
}

.str-avto .str-knopki {
  margin-top: 8px;
}

/* ------------------------------------------------------- прайс и описания */
.str-prays {
  margin: 0;
}

.str-prays__stroka {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--news-stroke);
  font-size: 15px;
}

.str-prays__stroka:last-child {
  border-bottom: 1px solid var(--news-stroke);
}

.str-prays__stroka dt {
  margin: 0;
}

.str-prays__stroka dd {
  margin: 0;
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
}

.str-opis {
  margin: 16px 0 0;
}

.str-opis__stroka {
  padding: 10px 0;
  border-top: 1px solid var(--news-stroke);
}

.str-opis__stroka:last-child {
  border-bottom: 1px solid var(--news-stroke);
}

.str-opis__stroka dt {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
}

.str-opis__stroka dd {
  margin: 2px 0 0;
  font-size: 15px;
  color: var(--news-text-muted);
}

/* Колонки «что входит / что потребуется / как проходит» и «выкуп / долгосрочная». */
.str-kolonki {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.str-kolonki--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.str-kolonka {
  min-width: 0;
  padding: 22px 24px;
  border: 1px solid var(--news-stroke);
  border-radius: var(--news-radius-lg);
  background: var(--news-surface);
}

.str-kolonka .str-h3:first-child {
  margin-top: 0;
}

.str-kolonka .str-spisok {
  margin-top: 8px;
}

/* ----------------------------------------- «связаться» на месте формы Flexbe */
/* Приёмника заявок ещё нет, и куда слать заявки, владелец не решил — вместо полей
   формы те же три пути связи, что в шапке: позвонить, Telegram, WhatsApp. */
.str-svyaz {
  padding: 24px 26px;
  border-radius: var(--news-radius-lg);
  background: var(--news-surface-soft);
}

.str-blok--temnyy .str-svyaz {
  background: rgba(255, 255, 255, 0.08);
}

.str-svyaz .str-h3 {
  margin-top: 0;
}

.str-svyaz .str-knopki {
  margin-top: 16px;
}

.str-svyaz__knopki .kontakty__knopka {
  flex: 1 1 160px;
}

.str-blok--temnyy .kontakty__knopka--tihaya {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

/* Форма страницы — разметка и вид .shop-forma__* из карточки; здесь только то, чего
   в карточке нет: выпадающий список и группа флажков. */
.str-forma select {
  box-sizing: border-box;
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid var(--news-stroke-strong);
  border-radius: 12px;
  background: var(--news-surface);
  font: inherit;
  font-size: 16px;
  color: var(--news-text);
}

.str-forma__gruppa {
  margin: 0;
  padding: 0;
  border: 0;
}

.str-forma__gruppa legend {
  padding: 0;
  margin-bottom: 6px;
  font-size: 13px;
}

.str-forma__galka {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  margin-right: 16px;
  font-size: 15px;
  cursor: pointer;
}

.str-forma__galka input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--news-accent);
}

/* Два столбца: слова слева, связь справа (сервис, аренда, авто). */
.str-dva {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

/* ------------------------------------------------- контакты (как на портале) */
/* Карточка и карта — классы .kontakty* портала (15-stranicy). Здесь — только
   чтобы карта не теряла высоту внутри нашей плиты. */
.str-blok .kontakty__karta {
  min-height: 420px;
}

/* Контакты без карты (сервис): карточка одна, не растягивать на две колонки. */
.kontakty--bez-karty {
  grid-template-columns: minmax(0, 1fr);
}

.kontakty--bez-karty .kontakty__kartochka {
  max-width: 560px;
}

/* ----------------------------------------------------------------- QR-блок */
.str-qr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 32px;
  align-items: center;
}

.str-qr__kod {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
}

.str-qr__kod img {
  width: 220px;
  height: 220px;
  border-radius: 16px;
  background: #fff;
  object-fit: contain;
}

.str-qr__kod p {
  margin: 0;
  font-size: var(--news-font-small);
  color: inherit;
  opacity: 0.85;
}

/* --------------------------------------------- документы: аккордеон и текст */
/* Перенесено с asn1 (17-stranicy) без .article-content: его у нас нет. */
.dokumenty__punkt {
  border-top: 1px solid var(--news-stroke);
}

.dokumenty__punkt:last-child {
  border-bottom: 1px solid var(--news-stroke);
}

.dokumenty__punkt summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--news-font-sans);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--news-text);
}

.dokumenty__punkt summary::-webkit-details-marker {
  display: none;
}

.dokumenty__punkt summary:hover {
  color: var(--news-accent);
}

.dokumenty__punkt summary svg {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  transition: transform 160ms ease;
}

.dokumenty__punkt[open] summary svg {
  transform: rotate(180deg);
}

.dokumenty__telo {
  max-width: 76ch;
  padding: 0 0 22px;
}

.dokument {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(24, 18, 15, 0.92);
}

.dokument p {
  margin: 0 0 0.6em;
}

.dokument h3 {
  margin: 1.6em 0 0.5em;
  font-family: var(--news-font-sans);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.dokument ul {
  margin: 0 0 0.8em;
  padding-left: 22px;
}

.dokument li {
  margin: 0 0 0.25em;
}

.dokument a {
  color: var(--news-accent);
}

.dokument__rekvizity p {
  margin: 0 0 0.2em;
}

/* ------------------------------------------------------------- главная: герой */
/* Два баннера одной высоты в ряд в контейнере; слева слайдер (кадры стопкой, плавная
   смена), справа баннер «В наличии». 12.10: вид сайта переделает арт-директор — здесь
   только несломанное состояние на всех ширинах. */
.glav-geroy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
}

.glav-banner {
  position: relative;
  display: block;
  min-width: 0;
  aspect-ratio: 760 / 325;
  overflow: hidden;
  border-radius: 24px;
  background: #1c1c1c;
}

.glav-banner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slayder__kadr {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.slayder__kadr.is-aktivnyy {
  opacity: 1;
  pointer-events: auto;
}

.slayder__knopka {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--news-accent);
  color: #fff;
  cursor: pointer;
}

.slayder__knopka svg {
  width: 20px;
  height: 20px;
}

.slayder__knopka--vlevo {
  left: 10px;
}

.slayder__knopka--vpravo {
  right: 10px;
}

.slayder__knopka:hover {
  background: #6e1214;
}

.slayder__knopka:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.slayder__tochki {
  position: absolute;
  right: 0;
  bottom: 10px;
  left: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.slayder__tochka {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}

.slayder__tochka.is-tekushchaya {
  background: var(--news-accent);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7);
}

/* -------------------------------------------------------------- главная: типы */
.glav-tipy {
  padding: 24px;
  border: 1px solid var(--news-stroke);
  border-radius: var(--news-radius-xl);
  background: var(--news-surface);
}

.glav-tipy__setka {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.glav-tip {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  text-align: center;
}

.glav-tip__foto {
  display: block;
  color: inherit;
  text-decoration: none;
}

.glav-tip__foto img {
  display: block;
  width: 100%;
  max-width: 350px;
  margin: 0 auto;
  aspect-ratio: 350 / 196;
  object-fit: contain;
  transition: transform 0.25s ease;
}

.glav-tip__foto:hover img {
  transform: scale(1.03);
}

.glav-tip__imya {
  margin: 10px 0 0;
  font-family: var(--news-font-sans);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--news-accent);
}

/* Столбик марок под типом: марки капителью с шевроном, по ⌄ — модельные ряды и модели.
   Эту же разметку отдаёт msn1ShopStranicaMarki общему компоненту ленты типов «Карточки». */
.glav-tip__marki {
  display: grid;
  gap: 2px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.glav-tip__marki summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 8px;
  cursor: pointer;
  list-style: none;
  font-family: var(--news-font-sans);
  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--news-text);
}

.glav-tip__marki summary::-webkit-details-marker {
  display: none;
}

.glav-tip__marki summary svg {
  width: 16px;
  height: 16px;
  transition: transform 160ms ease;
}

.glav-tip__marki details[open] > summary svg {
  transform: rotate(180deg);
}

.glav-tip__marki summary:hover,
.glav-tip__marki details[open] > summary {
  color: var(--news-accent);
}

.glav-tip__spisok {
  display: grid;
  gap: 2px;
  margin: 2px 0 10px;
  padding: 0;
  list-style: none;
}

.glav-tip__spisok a {
  display: inline-block;
  min-height: 32px;
  padding: 5px 8px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--news-text);
  text-decoration: none;
}

.glav-tip__spisok a:hover {
  color: var(--news-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.glav-tip__spisok a.glav-tip__vse {
  color: var(--news-accent);
  font-weight: 700;
}

.glav-tip__spisok details summary {
  text-transform: none;
  font-size: 15px;
}

.glav-tip__spisok .glav-tip__spisok {
  margin: 0 0 6px;
  padding-left: 12px;
  border-left: 2px solid var(--news-stroke);
}

/* ------------------------------------------------------------ главная: бренды */
.glav-marki {
  padding: 24px 24px 8px;
  border: 1px solid var(--news-stroke);
  border-radius: var(--news-radius-xl);
  background: var(--news-surface);
}

.glav-marki__zagolovok {
  margin: 0 0 20px;
  font-family: var(--news-font-sans);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 500;
  line-height: 1.1;
  text-align: center;
}

.glav-marki__ryad {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Логотипы без рамок, между ними тонкие вертикальные линии. */
.glav-marka {
  display: grid;
  place-items: center;
  width: 200px;
  min-height: 150px;
  padding: 16px 20px;
  border-left: 1px solid var(--news-stroke);
  text-decoration: none;
}

.glav-marki__ryad li:first-child .glav-marka {
  border-left-color: transparent;
}

.glav-marka img {
  display: block;
  width: 160px;
  max-width: 100%;
  height: auto;
  max-height: 110px;
  object-fit: contain;
  transition: transform 0.25s ease;
}

.glav-marka:hover img {
  transform: scale(1.05);
}

/* --------------------------------------------- виджет «Прямо сейчас в канале» */
/* Перенесён с оригинала как есть (разметку строит его скрипт); только область имени. */
.str-tg {
  --tg: #229ed9;
  --card-ratio: 694 / 416;
}

.str-tg .msn1tg-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.str-tg .msn1tg-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  opacity: 0;
  transform: translateY(10px);
  animation: 0.45s forwards msn1tg-in;
}

@keyframes msn1tg-in {
  to { opacity: 1; transform: none; }
}

.str-tg .msn1tg-img {
  position: relative;
  aspect-ratio: var(--card-ratio);
  overflow: hidden;
  border: 1px solid rgba(132, 22, 24, 0.5);
  border-radius: 14px;
  background: linear-gradient(135deg, #23262e, #0c0c0e);
}

.str-tg .msn1tg-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s;
}

.str-tg .msn1tg-card:hover .msn1tg-img img {
  transform: scale(1.05);
}

.str-tg .msn1tg-card.msn1tg-haslogo .msn1tg-img {
  background: #871619;
}

.str-tg .msn1tg-img .msn1tg-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.str-tg .msn1tg-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--news-font-sans);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}

.str-tg .msn1tg-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--tg);
}

.str-tg .msn1tg-cta svg {
  width: 18px;
  height: 18px;
}

.str-tg .msn1tg-skel .msn1tg-img {
  animation: 1.3s ease-in-out infinite msn1tg-pulse;
}

.str-tg .msn1tg-skel .msn1tg-title {
  height: 38px;
  border-radius: 6px;
  background: #e5e5e5;
}

@keyframes msn1tg-pulse {
  0%, to { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ------------------------------------------------------------------ пороги */
@media (max-width: 1180px) {
  .str-setka,
  .str-plyusy,
  .str-kolonki,
  .glav-tipy__setka {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .str-tg .msn1tg-grid {
    gap: 16px;
  }
}

@media (max-width: 760px) {
  .str,
  .glav {
    gap: 16px;
  }

  .str-blok {
    padding: 20px;
  }

  .str-geroy,
  .str-geroy--s-foto,
  .str-usluga,
  .str-setka,
  .str-setka--2,
  .str-cifry,
  .str-plyusy,
  .str-kolonki,
  .str-kolonki--2,
  .str-dva,
  .str-qr,
  .str-tg .msn1tg-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .str-geroy {
    gap: 20px;
  }

  .str-qr__kod {
    justify-items: start;
    text-align: left;
  }

  .str-knopki {
    margin-top: 16px;
  }

  .str-podmenu__knopka {
    flex: 1 1 100%;
    margin-left: 0;
  }

  .str-blok--polosa {
    min-height: 160px;
  }

  .glav-geroy {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .glav-tipy,
  .glav-marki {
    padding: 20px 16px;
  }

  .glav-tipy__setka {
    grid-template-columns: minmax(0, 1fr);
  }

  .glav-marka {
    width: 50%;
    min-height: 110px;
  }

  .glav-marki__ryad li:nth-child(odd) .glav-marka {
    border-left-color: transparent;
  }

  .str-blok .kontakty__karta {
    min-height: 320px;
  }
}

@media (max-width: 560px) {
  .str-knopki > .kontakty__knopka {
    flex: 1 1 100%;
  }

  .str-prays__stroka {
    flex-direction: column;
    gap: 2px;
  }

  .str-prays__stroka dd {
    text-align: left;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .str-tg .msn1tg-card {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ===== Выпадающий список формы в стиле сайта (12.10.2026). Родной <select> остаётся в разметке
   (уходит в заявку, работает без скрипта), скрипт прячет его и рисует поле и список сам:
   системный список Мака был серым и чужим. */
.str-spisok {
  position: relative;
}
.str-spisok select {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.str-spisok__pole {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-sizing: border-box;
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid var(--news-stroke-strong);
  border-radius: 12px;
  background: var(--news-surface);
  font: inherit;
  font-size: 16px;
  color: var(--news-text);
  text-align: left;
  cursor: pointer;
}
.str-spisok__pole::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s;
}
.str-spisok.is-otkryt .str-spisok__pole {
  border-color: var(--news-accent, #8a1418);
}
.str-spisok.is-otkryt .str-spisok__pole::after {
  margin-top: 4px;
  transform: rotate(-135deg);
}
.str-spisok__spisok {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 320px;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--news-stroke);
  border-radius: 14px;
  background: var(--news-surface);
  box-shadow: 0 16px 40px rgba(20, 10, 10, 0.14);
}
.str-spisok__spisok[hidden] {
  display: none;
}
.str-spisok__punkt {
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 16px;
  line-height: 1.35;
  color: var(--news-text);
  cursor: pointer;
}
.str-spisok__punkt.is-navedyon {
  background: rgba(138, 20, 24, 0.08);
}
.str-spisok__punkt[aria-selected="true"] {
  font-weight: 600;
  color: var(--news-accent, #8a1418);
}

/* ===== Плашка про cookie — текст дословно с msn1.ru (там она тоже по центру внизу, с отказом). */
.kuki {
  position: fixed;
  z-index: 90;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 16px;
  box-sizing: border-box;
  width: min(720px, calc(100vw - 32px));
  padding: 14px 16px 14px 20px;
  border: 1px solid var(--news-stroke);
  border-radius: 18px;
  background: var(--news-surface);
  box-shadow: 0 16px 40px rgba(20, 10, 10, 0.16);
  font-size: var(--news-font-small);
  line-height: 1.45;
  color: var(--news-text);
}
.kuki p {
  flex: 1 1 auto;
  margin: 0;
}
.kuki a {
  color: var(--news-accent, #8a1418);
}
.kuki__knopki {
  display: flex;
  flex: none;
  gap: 8px;
}
.kuki__knopka {
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid var(--news-accent, #8a1418);
  border-radius: 999px;
  background: var(--news-accent, #8a1418);
  font: inherit;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
}
.kuki__knopka--tihaya {
  background: transparent;
  color: var(--news-accent, #8a1418);
}
@media (max-width: 600px) {
  .kuki {
    flex-direction: column;
    align-items: stretch;
    bottom: 8px;
    padding: 14px;
  }
  .kuki__knopki > * {
    flex: 1 1 0;
  }
}

/* ===== Календарь формы в стиле сайта (12.10.2026): системный был синим и чужим. */
.str-data {
  position: relative;
}
.str-data input {
  cursor: pointer;
}
.str-data__okno {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  box-sizing: border-box;
  width: 300px;
  max-width: calc(100vw - 48px);
  padding: 14px;
  border: 1px solid var(--news-stroke);
  border-radius: 16px;
  background: var(--news-surface);
  box-shadow: 0 16px 40px rgba(20, 10, 10, 0.14);
}
.str-data__okno[hidden] {
  display: none;
}
.str-data__shapka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.str-data__mesyac {
  font-weight: 700;
  font-size: 16px;
  color: var(--news-text);
}
.str-data__strelka {
  width: 34px;
  height: 34px;
  border: 1px solid var(--news-stroke);
  border-radius: 50%;
  background: transparent;
  font: inherit;
  font-size: 16px;
  line-height: 1;
  color: var(--news-text);
  cursor: pointer;
}
.str-data__strelka:hover:not(:disabled) {
  border-color: var(--news-accent);
  color: var(--news-accent);
}
.str-data__strelka:disabled {
  opacity: 0.3;
  cursor: default;
}
.str-data__setka {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
}
.str-data__den-nedeli {
  padding: 6px 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--news-text-muted);
}
.str-data__den {
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font: inherit;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: var(--news-text);
  cursor: pointer;
}
.str-data__den:hover:not(:disabled) {
  background: rgba(138, 20, 24, 0.08);
}
.str-data__den:disabled {
  color: var(--news-text-muted);
  opacity: 0.4;
  cursor: default;
}
.str-data__den.is-segodnya {
  box-shadow: inset 0 0 0 1px var(--news-accent);
}
.str-data__den.is-vybran {
  background: var(--news-accent);
  font-weight: 700;
  color: #fff;
}
.str-data__niz {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
}
.str-data__ssylka {
  padding: 6px 4px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--news-accent);
  cursor: pointer;
}