/* ============================================================
   Контент, приходящий из админки: статьи, страницы, описания товаров.
   Редактор вставляет произвольный HTML — видео, таблицы, картинки с фиксированной
   шириной, — поэтому вписываем его в колонку принудительно.
   ============================================================ */

.prose img,
.prose video,
.prose iframe,
.prose embed,
.prose object {
  max-width: 100%;
  height: auto;
}

.prose iframe,
.prose video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--r);
}

/* Таблицы из редактора шире колонки — прокручиваем их, а не страницу */
.prose table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 15px;
}

.prose table td,
.prose table th {
  border: 1px solid var(--line);
  padding: 9px 12px;
  vertical-align: top;
}

.prose pre {
  overflow-x: auto;
  max-width: 100%;
}

/* Редактор часто оставляет жёсткую ширину в атрибутах и стилях */
.prose [width],
.prose [style*="width"] {
  max-width: 100%;
}

.prose h2:first-child,
.prose h3:first-child {
  margin-top: 0;
}

/* ============================================================
   Зоны нажатия. Ссылки в подвале и строки «Все марки →» имели высоту 17–18 px:
   палец в них не попадает, и Lighthouse отдельно ругается на tap targets.
   ============================================================ */
@media (max-width: 900px) {
  /* .btn и переключатель дизайна исключены: у них своя горизонтальная
     подкладка, и общий padding 2px сплющивал текст до краёв кнопки. */
  .ft ul a:not(.btn):not(.uiswitch),
  .cars-note a,
  .ft__bottom a:not(.btn):not(.uiswitch) {
    display: inline-block;
    /* Было 6px/24px — получалось 34-35 px, всё равно ниже пальцевого минимума 44 */
    padding: 12px 2px;
    min-height: 44px;
    line-height: 20px;
  }

  .crumbs a,
  .crumbs b {
    padding: 4px 0;
  }

  /* Моноширинные подписи-акценты: 10-10,5 px на телефоне уже не читаются */
  .city__district,
  .live__hd,
  .calc__hd .s,
  .hdr__hours,
  .ptable__hd,
  .brand__tag {
    font-size: 11px;
  }
}

/* ============================================================
   Плотность. В дизайн-системе секции разделены отступами по 96 px — на страницах
   с двумя-тремя блоками это превращалось в пустые экраны. Сжимаем ритм,
   на мобильном сильнее: там каждый лишний экран прокрутки заметнее.
   ============================================================ */
.sec { padding: 62px 0; }
.sec--tight { padding: 46px 0; }
.sec + .sec { padding-top: 0; }
.sec__hd { margin-bottom: 26px; }

@media (max-width: 900px) {
  .sec { padding: 40px 0; }
  .sec--tight { padding: 30px 0; }
  .sec__hd { margin-bottom: 18px; }
}

/* ============================================================
   Калькулятор: заказ-наряд следует за прокруткой.
   Список масел бывает длинным, и итоговая сумма уезжала вверх — теперь правая колонка
   прилипает под шапкой и опускается вместе с блоком до его конца.
   ============================================================ */
@media (min-width: 901px) {
  .calc__card { align-items: start; }

  .calc__out {
    position: sticky;
    top: 84px;
    align-self: start;
  }
}

/* Длинные названия масел не должны налезать на цену */
.pick { align-items: flex-start; }
.pick__n { overflow-wrap: anywhere; }
.pick__p { padding-left: 10px; white-space: nowrap; }

/* ============================================================
   Изображения товаров. У 4 688 позиций из 5 096 в базе стоит имя файла,
   которого физически нет, поэтому карточка обязана достойно выглядеть и без фото:
   вместо пустоты — контурный знак канистры или фильтра.
   ============================================================ */
.good__pic {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-2);
  border-radius: var(--r);
  margin-bottom: 12px;
  overflow: hidden;
}

.good__pic img {
  max-width: 82%;
  max-height: 82%;
  width: auto;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.good__noimg {
  color: var(--line-strong);
  width: 46px;
  height: 46px;
}

.good__noimg svg { width: 100%; height: 100%; }

/* Фото модели приходит из каталога на БЕЛОЙ подложке. Раньше мы прятали это
   белой карточкой, но на зелёном первом экране она читалась как наклейка.
   Теперь машина лежит прямо на фоне, а белое гасится режимом наложения. */
.phero__pic {
  position: absolute;
  right: var(--bleed);
  bottom: 34px;
  width: 260px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.phero__pic img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* Белая подложка снимка гасится наложением. Никаких filter/opacity здесь:
     любой из них создаёт отдельный слой, и наложение перестаёт работать. */
  mix-blend-mode: multiply;
}

@media (max-width: 1100px) { .phero__pic { display: none; } }

/* Иконка личного кабинета в шапке видна и на десктопе — в отличие от кнопки
   телефона, которая появляется только на узких экранах.
   Раньше правило было привязано к href="/basket"; когда корзину заменили
   кабинетом, селектор перестал совпадать и иконка пропала на широких экранах. */
@media (min-width: 981px) {
  .hdr__right .hdr__telbtn[href="/cabinet"] { display: inline-flex; }
}

/* ============================================================
   Выбор города — как на боевом сайте: список сгруппирован по федеральным округам,
   а при первом заходе показывается подтверждение определённого города.
   ============================================================ */
.city__district {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 12px 0 6px;
  border-top: 1px solid var(--line-2);
  margin-top: 4px;
}

.city__district:first-child { border-top: 0; margin-top: 0; padding-top: 0; }

/* Список городов разложен в три колонки, и разрыв колонки рвал группу:
   заголовок округа оставался внизу одной колонки, а его города уезжали в следующую. */
.city__group {
  break-inside: avoid;
  page-break-inside: avoid;
  display: block;
  margin-bottom: 10px;
}

.city__list a {
  display: block;
  padding: 5px 8px;
  border-radius: 3px;
  font-size: 14px;
  color: var(--ink-2);
}

.city__list a:hover { background: var(--paper-2); color: var(--ink); }
.city__list a.is-active { color: var(--green); font-weight: 600; }

/* Пункты меню не должны переноситься по словам: «По маркам» рвалось на две строки */
.hdr__nav a { white-space: nowrap; }

.city-ask {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 80;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: calc(100vw - 32px);
}

.city-ask p { font-size: 15px; margin: 0; }
.city-ask b { font-family: var(--display); font-weight: 700; }
.city-ask__act { display: flex; gap: 8px; flex: none; }

@media (max-width: 620px) {
  .city-ask { flex-direction: column; align-items: stretch; gap: 12px; text-align: center; }
  .city-ask__act { justify-content: center; }
}

/* Селектор города занимает место в шапке: на средних экранах прячем
   второстепенные пункты меню, чтобы навигация не переносилась на две строки.
   Они остаются в подвале и в мобильном меню. */
@media (max-width: 1360px) {
  .hdr__nav-extra { display: none; }
}

/* ============================================================
   Читаемость мелких подписей на телефоне. Блок держим В КОНЦЕ файла:
   базовые правила (.city__district и т.п.) объявлены ниже по тексту,
   и при равной специфичности побеждает то, что идёт последним.
   ============================================================ */
@media (max-width: 900px) {
  .city__district,
  .tel span,
  .live__hd,
  .calc__hd .s,
  .ptable__hd,
  .brand__tag {
    font-size: 11px;
  }
}

/* ============================================================
   Суммы в заказ-наряде выстраиваем столбиком: названия позиций разной длины,
   и цены «прыгали» по строке. Название занимает всё свободное место,
   сумма — колонка справа фиксированной ширины и без переносов.
   ============================================================ */
.row { justify-content: space-between; }
.row > b {
  flex: none;
  min-width: 92px;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.row > span { flex: 1; min-width: 0; }

/* ============================================================
   Таблица прайса на телефоне. Сетка 1fr / 190px / 150px не помещается
   в 375 px: шапка рвалась, и «Цена» уезжала на вторую строку.
   На узком экране оставляем две колонки, а время на посту переносим
   под название услуги.
   ============================================================ */
@media (max-width: 640px) {
  .ptable__hd,
  .ptable__row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px;
    padding: 13px 14px;
  }

  .ptable__hd > span:nth-child(2) { display: none; }

  .ptable__row .ptable__t {
    grid-column: 1;
    grid-row: 2;
    font-size: 11.5px;
  }

  .ptable__row .ptable__p { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .ptable__n { font-size: 14.5px; }
  .ptable__p { font-size: 17px; }
}

/* Заказ-наряд фотоотчёта: две колонки (позиция и цена) с подзаголовками групп.
   Колонка «Бренд» ушла — бренд теперь стоит в самом названии позиции. */
.ptable--pair .ptable__row {
  grid-template-columns: minmax(0, 1fr) 150px;
}

.ptable__grp {
  padding: 12px 22px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line-2);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.ptable__row--sum {
  background: var(--paper-2);
  border-top: 1px solid var(--line);
}

.ptable__row--sum .ptable__n { font-size: 14px; color: var(--ink-3); font-weight: 500; }
.ptable__row--sum .ptable__p { font-size: 21px; }

@media (max-width: 640px) {
  .ptable--pair .ptable__row { grid-template-columns: minmax(0, 1fr) auto; }
  .ptable__grp { padding: 10px 14px; }
}

/* Фотоотчёт: снимок слева, заказ-наряд справа. По отдельности каждый блок
   занимал экран, а половина ширины оставалась пустой. */
.repv {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.repv__shots { display: grid; gap: 14px; }

.repv__shots img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-lg);
  background: var(--paper-3);
}

.repv__order h2 { font-size: clamp(22px, 2.2vw, 30px); margin-top: 12px; }
.repv__note { color: var(--ink-3); font-size: 14.5px; margin: 10px 0 20px; max-width: 46ch; }

@media (max-width: 900px) {
  .repv { grid-template-columns: 1fr; gap: 26px; }
}

/* Зелёный блок-призыв: у него не было ни полей, ни скруглений — текст лежал
   впритык к краю, а зелёная кнопка терялась на зелёном фоне. */
.cta {
  padding: 44px 48px;
  border-radius: var(--r-lg);
}

.cta::after {
  content: '';
  position: absolute;
  right: -30px;
  top: -25%;
  width: 260px;
  height: 150%;
  background: var(--chev) no-repeat center / contain;
  opacity: .10;
  pointer-events: none;
}

.cta__grid { grid-template-columns: minmax(0, 1fr) minmax(250px, auto); gap: 40px; }
.cta h2 { font-size: clamp(24px, 2.4vw, 34px); line-height: 1.12; }
.cta p { margin-top: 12px; font-size: 15.5px; }
.cta__act { gap: 14px; min-width: 250px; }
.cta__act .btn { width: 100%; }

.cta .btn--primary {
  background: #fff;
  color: var(--green-d);
  border-color: #fff;
}

.cta .btn--primary:hover { background: var(--green-l); color: var(--green-dd); }
.cta__tel { font-size: 25px; }

@media (max-width: 880px) {
  .cta { padding: 28px 20px; }
  .cta::after { display: none; }
  .cta__tel { font-size: 22px; }
}

/* Карточка под снимком: мастер, станция, дата — иначе левая колонка
   заканчивалась на фото и половина экрана пустовала. */
.repv__card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px 20px;
}

.repv__master {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line-2);
}

.repv__master img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--paper-3); }
.repv__master b { display: block; font-size: 15px; }
.repv__master span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }

.repv__facts { display: grid; gap: 10px; margin: 0; }
.repv__facts > div { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.repv__facts dt { font-size: 14px; color: var(--ink-3); margin: 0; }
.repv__facts dd { margin: 0; font-size: 14.5px; font-weight: 600; text-align: right; }
.repv__free { color: var(--green); }

/* Стрелки у карусели моделей: без них на десктопе не видно, что список листается */
.carou { position: relative; }

.carou__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .18s, color .18s, box-shadow .18s;
}

.carou__nav:hover { background: var(--green); color: #fff; border-color: var(--green); }
.carou__nav[hidden] { display: none; }
.carou__nav--prev { left: -18px; }
.carou__nav--next { right: -18px; }

@media (max-width: 1100px) {
  .carou__nav--prev { left: 4px; }
  .carou__nav--next { right: 4px; }
}

/* Карточки карусели режем ровно по ширине блока: при фиксированных 228 px
   с краю всегда торчала половина машины. Между карточками разделитель 1 px,
   поэтому его и вычитаем. */
.cars--row .car { flex: 0 0 calc((100% - 4px) / 5); }

@media (max-width: 1100px) {
  .cars--row .car { flex: 0 0 calc((100% - 3px) / 4); }
}

@media (max-width: 900px) {
  .cars--row .car { flex: 0 0 calc((100% - 2px) / 3); }
}

@media (max-width: 640px) {
  /* Полоса тянется во всю ширину экрана, первая карточка начинается от края,
     поэтому считаем от 100vw: две карточки ровно в экран, третья за краем. */
  .cars--row { gap: 10px; }
  .cars--row .car { flex: 0 0 calc((100vw - 10px) / 2); }
}

/* Станция без свободных постов: вместо «0 из 1» — время ожидания.
   Сама подпись серая, красным выделено только само время. */
.live__row--busy .live__wait {
  color: var(--ink-3);
  font-weight: 400;
  white-space: nowrap;          /* «освободится через 60 мин» должно жить одной строкой */
  text-align: right;
  font-size: 12px;
  line-height: 1.35;
}

.live__row--busy .live__wait i { font-style: normal; color: #C0392B; }

/* Карточки внутри блока выезжают по очереди — как на франшизном сайте.
   Класс вешает JS, поэтому без скрипта страница остаётся видимой. */
.rv-i {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s cubic-bezier(.2, .7, .3, 1), transform .6s cubic-bezier(.2, .7, .3, 1);
  transition-delay: var(--d, 0ms);
}

.rv.in .rv-i { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .rv-i { opacity: 1; transform: none; transition: none; }
}

/* Подсказка под выбором времени в форме записи */
.field__hint {
  display: block;
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--ink-3);
}

/* Карточка товара: счётчик и кнопки на зелёном фоне.
   Поле type=number со стрелками браузера выбивалось из вёрстки и не нажималось пальцем. */
.buyform { display: inline-flex; gap: 12px; align-items: center; flex-wrap: wrap; }

.qty {
  display: inline-flex;
  align-items: center;
  height: 50px;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .45);
  overflow: hidden;
}

.qty__b {
  width: 44px;
  height: 100%;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s;
}

.qty__b:hover { background: rgba(255, 255, 255, .18); }

.qty__i {
  width: 46px;
  height: 100%;
  border: 0;
  background: transparent;
  color: #fff;
  font-family: var(--display);
  font-weight: 800;
  font-size: 18px;
  text-align: right;
  padding: 0;
  -moz-appearance: textfield;
  appearance: textfield;
}

.qty__i::-webkit-outer-spin-button,
.qty__i::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty__i:focus { outline: none; }

.qty__u {
  padding: 0 8px 0 5px;
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(255, 255, 255, .75);
}

@media (max-width: 560px) {
  .buyform { width: 100%; }
  .buyform .btn { flex: 1; }
}

/* Шапка: содержимое (лого + город + меню + телефон + кнопка) шире колонки 1280,
   поэтому кнопку «Онлайн-запись» срезало краем экрана. Шапку пускаем во всю ширину
   окна и поджимаем меню, а на узких экранах убираем подпись у лого и часы работы. */
.hdr .wrap { max-width: none; }
.hdr__bar { gap: 16px; }
.hdr__nav a { padding: 9px 10px; }

@media (max-width: 1360px) {
  .brand__tag { display: none; }
  .hdr__nav a { padding: 9px 8px; font-size: 14px; }
}

@media (max-width: 1180px) {
  .tel span { display: none; }
  .hdr__bar { gap: 12px; }
}

/* Форма-сетка: у поля сверху подпись, у кнопки её нет, поэтому кнопка
   растягивалась на всю высоту строки и стояла выше поля. Прижимаем к низу
   и выравниваем по высоте ввода. */
.form > .btn {
  align-self: end;
  height: 50px;
  width: 100%;
}

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

/* Список городов помещаем целиком: скролл внутри выпадашки прятал половину
   городов, а их всего 37 — раскладываем в четыре колонки и снимаем ограничение
   по высоте. Узким экранам оставляем две колонки и прокрутку. */
.city__pop { width: min(860px, 94vw); }

.city__list {
  columns: 4;
  column-gap: 20px;
  max-height: none;
  overflow: visible;
}

@media (max-width: 1100px) {
  .city__pop { width: min(680px, 94vw); }
  .city__list { columns: 3; }
}

@media (max-width: 760px) {
  /* Колонки + ограничение по высоте = горизонтальная прокрутка: многоколоночный
     блок с фиксированной высотой переливается ВБОК, и список городов на телефоне
     приходилось листать вправо. Поэтому columns снимаем совсем, а две колонки
     делаем СЕТКОЙ внутри округа: сетка растёт вниз, вбок ничего не уезжает. */
  .city__list { columns: 1; max-height: none; overflow: visible; }
  .city__pop { overflow-x: hidden; }

  .city__list .city__group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 12px;
  }

  /* Заголовок округа — на всю ширину, над своими городами */
  .city__list .city__district { grid-column: 1 / -1; }
  .city__list a { min-width: 0; overflow-wrap: anywhere; }
}

/* Целая группа в одной колонке (break-inside: avoid) задирала высоту: в СЗФО
   двадцать городов, и высота списка равнялась высоте этой группы. Разрешаем
   группе переноситься между колонками, но отрываться заголовку округа от его
   городов — нет. */
.city__list .city__group { break-inside: auto; page-break-inside: auto; }
.city__list .city__district { break-after: avoid; page-break-after: avoid; break-inside: avoid; }

/* Крупные города первой строкой: код региона — как на номерном знаке */
.city__major {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line-2);
}

.city__big {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 7px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  transition: border-color .15s, background .15s;
}

.city__big b {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 3px 7px;
  border-radius: 3px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  color: var(--ink-2);
}

.city__big:hover { border-color: var(--green); background: var(--green-l2); }
.city__big.is-active { border-color: var(--green); color: var(--green); }
.city__big.is-active b { border-color: var(--green); color: var(--green); background: #fff; }

/* Городской мотив лежит на фоновом кадре, по центру его видимой части
   (плашка закрывает левые 62 %, поэтому середина фото — примерно 81 % ширины). */
.hero__motif {
  position: absolute;
  /* Зажимаем между правым краем плашки и краем экрана и центруем полями:
     проценты для top на флекс-героe считались не от той высоты. */
  top: 0;
  /* Снизу справа висит плашка «Прямо сейчас» — не центруем рисунок под неё */
  bottom: 150px;
  left: 62%;
  right: 0;
  margin: auto;
  width: min(440px, 26%);
  height: auto;
  z-index: 2;
  color: #fff;
  opacity: .34;
  stroke-width: 1.4;
  pointer-events: none;
}

@media (max-width: 1240px) {
  .hero__motif { left: 64%; width: 28%; }
}

@media (max-width: 980px) {
  /* Плашка во всю ширину, кадр — отдельной полосой сверху: рисунок по центру кадра */
  .hero__motif { left: 0; right: 0; top: 0; bottom: auto; height: auto;
    margin: 60px auto 0; width: 44%; opacity: .42; stroke-width: 1.6; }
}

/* Крупные города первой строкой: код региона — как на номерном знаке */
.city__major {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line-2);
}

.city__big {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 7px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  transition: border-color .15s, background .15s;
}

.city__big b {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 3px 7px;
  border-radius: 3px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  color: var(--ink-2);
}

.city__big:hover { border-color: var(--green); background: var(--green-l2); }
.city__big.is-active { border-color: var(--green); color: var(--green); }
.city__big.is-active b { border-color: var(--green); color: var(--green); background: #fff; }

/* Городской мотив на зелёной плашке первого экрана. Плашка срезана по диагонали
   (104 px), поэтому держимся левее среза — иначе у Казани уезжает минарет. */
.hero__motif {
  position: absolute;
  /* Свободный угол справа от заголовка: плашка срезана по диагонали (104 px),
     поэтому держимся левее среза. */
  right: 44px;
  top: 24%;
  width: min(330px, 34%);
  height: auto;
  color: #fff;
  /* Неон: линия светится, поэтому её видно и на светлых местах кадра */
  opacity: .5;
  stroke-width: 2.2;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, .85)) drop-shadow(0 0 16px rgba(255, 198, 41, .45));
  pointer-events: none;
}

@media (max-width: 1240px) {
  .hero__motif { right: 52px; top: 28%; width: 38%; }
}

@media (max-width: 980px) {
  /* На телефоне плашка во всю ширину: мотив прижимаем к низу, под цифры */
  .hero__motif { right: 16px; bottom: 14px; width: 74%; opacity: .18; stroke-width: 1.6; }
}

/* Десктоп: белое лого SPOT — по центру над мостом, постоянно (не как фейд-сплэш) */
@media (min-width: 981px) {
  /* Десктоп: сплэш не нужен — белое лого над мостом. Центрируется по мотиву скриптом
     (CSS-контейнеры SVG-мотива и span разные, поэтому left ставит JS). */
  .hero__brand { display: none; }
  .hero__deskbrand { position: absolute; z-index: 3; top: 5%; left: 0; display: flex;
    justify-content: center; pointer-events: none; transform: translateX(-50%); }
  .hero__deskbrand img { width: 210px; max-width: 44vw; height: auto; }
}
@media (max-width: 980px) {
  .hero__deskbrand { display: none; }
}

/* Крупные города первой строкой: код региона — как на номерном знаке */
.city__major {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line-2);
}

.city__big {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 7px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  transition: border-color .15s, background .15s;
}

.city__big b {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 3px 7px;
  border-radius: 3px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  color: var(--ink-2);
}

.city__big:hover { border-color: var(--green); background: var(--green-l2); }
.city__big.is-active { border-color: var(--green); color: var(--green); }
.city__big.is-active b { border-color: var(--green); color: var(--green); background: #fff; }

/* Городская полоса под первым экраном: рисунок города во всю высоту блока,
   рядом — сколько станций и постов в этом городе. В зелёной плашке мотив тонул
   за заголовком, здесь его видно. */
.citybar { background: var(--paper-2); border-bottom: 1px solid var(--line); }

.citybar__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  padding: 34px 0;
}

.citybar__art { color: var(--green); }

.hero__motif {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  stroke-width: 1.5;
  opacity: .85;
}

.citybar__txt h2 { font-size: clamp(22px, 2.2vw, 30px); margin: 14px 0 10px; }
.citybar__txt p { color: var(--ink-2); font-size: 15.5px; max-width: 46ch; }

.citybar__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-weight: 600;
  color: var(--green);
}

.citybar__go .ico { width: 18px; height: 18px; }
.citybar__go:hover { color: var(--green-d); }

@media (max-width: 900px) {
  .citybar__in { grid-template-columns: 1fr; gap: 18px; padding: 26px 0; }
  .hero__motif { max-width: 340px; margin: 0 auto; }
}

/* Крупные города первой строкой: код региона — как на номерном знаке */
.city__major {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line-2);
}

.city__big {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 7px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  transition: border-color .15s, background .15s;
}

.city__big b {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 3px 7px;
  border-radius: 3px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  color: var(--ink-2);
}

.city__big:hover { border-color: var(--green); background: var(--green-l2); }
.city__big.is-active { border-color: var(--green); color: var(--green); }
.city__big.is-active b { border-color: var(--green); color: var(--green); background: #fff; }

/* Фон первого экрана приглушаем: ролик кричал ярче заголовка и мешал читать.
   Снимаем насыщенность и яркость у самого кадра и добавляем зелёную вуаль. */
.hero__video video,
.hero__video > img {
  filter: saturate(.72) contrast(.96) brightness(.82);
}

.hero__video::after {
  background:
    linear-gradient(90deg, rgba(7, 74, 14, .62) 0%, rgba(7, 74, 14, .4) 42%, rgba(7, 74, 14, .5) 100%),
    linear-gradient(to top, rgba(7, 74, 14, .5), rgba(7, 74, 14, .06) 55%);
}

@media (max-width: 980px) {
  .hero__video::after {
    background: linear-gradient(to top, rgba(7, 74, 14, .45), rgba(7, 74, 14, .1) 60%);
  }
}

/* Оговорка на «Контактах», когда карта показывает станции другого города */
.city-note {
  margin-top: 12px;
  padding: 12px 16px;
  border-left: 3px solid var(--green);
  background: var(--green-l2);
  font-size: 15px;
  color: var(--ink-2);
  max-width: 62ch;
}

.city-note a { color: var(--green); font-weight: 600; }


/* Картинки машин в карусели: у исходников разные поля, из-за чего одни авто
   казались вдвое мельче других. Даём общий бокс и вписываем картинку в него. */
/* Машины в карточках крупные: исходники обрезаны по кузову (см. bin/trim_cars),
   поэтому кадр заполняется целиком, а не наполовину, как было у квадратных сканов. */
.cars--row .car__pic { height: 148px; }

.cars--row .car__pic img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  transform: scale(1.04);
}

.cars--row .car:hover .car__pic img { transform: scale(1.12); }

/* «Контакты»: список станций слева, карта справа на пол-экрана и липкая —
   раньше карта висела отдельным блоком сверху, и адреса приходилось искать ниже. */
.stmap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.stmap__map { position: sticky; top: 96px; }

.stmap__map #stationsMap {
  height: calc(100vh - 150px);
  min-height: 460px;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper-2);
}

/* Адреса короткие — в колонке под списком они спокойно встают в два ряда */
.stmap__list .stations { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 1180px) {
  .stmap__list .stations { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
  .stmap { grid-template-columns: 1fr; gap: 20px; }
  .stmap__map { position: static; order: -1; }
  .stmap__map #stationsMap { height: 320px; min-height: 0; }
}

/* Какая машина была на обслуживании: марка и госномер в стиле номерного знака */
.feed__car { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.feed__car b { font-size: 15px; font-weight: 700; }

.plate {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  color: var(--ink-2);
}

.phero__car { display: flex; align-items: center; gap: 12px; margin-top: 14px; color: #fff; }
.phero__car b { font-size: 18px; font-weight: 700; }
.plate--big { font-size: 14px; padding: 5px 10px; background: #fff; color: var(--ink); border-color: #fff; }

/* Страница станции: панорама улицы и кадры с камер этой станции */
.stview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }

.stview__pano iframe {
  width: 100%;
  height: 420px;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--paper-2);
}

.stview__shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.stview__shots img {
  width: 100%;
  height: 132px;
  object-fit: cover;
  border-radius: var(--r);
  background: var(--paper-3);
  transition: transform .3s;
}

.stview__shots a:hover img { transform: scale(1.03); }

@media (max-width: 900px) {
  .stview { grid-template-columns: 1fr; }
  .stview__pano iframe { height: 300px; }
}

/* Мастера станции: аватарки из СРМ рядом с именем */
.masters { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px; }

.masters__cap {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.masters__item { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; }

.masters__item img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--paper-3);
}

/* Иконка вместо обложки статьи: один холст, один цвет, одна толщина линии —
   сетка «Полезного» перестала прыгать высотами разномастных фотографий. */
.artico {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 132px;
  margin: -4px 0 16px;
  border-radius: 12px;
  background: linear-gradient(160deg, var(--green-l2, #eef7f0), var(--paper-3, #f4f6f4));
  color: var(--green, #12a150);
}

.artico__svg { width: 76px; height: 76px; }

.art:hover .artico__svg { transform: scale(1.06); }
.artico__svg { transition: transform .2s ease; }

@media (max-width: 720px) {
  .artico { height: 104px; margin-bottom: 12px; }
  .artico__svg { width: 60px; height: 60px; }
}

/* ------------------------------------------------------------------
   Первый экран на телефоне: мотив города и плашка «Прямо сейчас».

   Обоих на телефоне фактически не было. Мотив рисуется абсолютом от секции
   и на узком экране оказывался НИЖЕ полосы с кадром — на зелёной плашке,
   у которой z-index выше, поэтому он просто скрывался за ней. Плашка
   занятости стояла последней в потоке и уезжала на 1 059-й пиксель, то есть
   за пределы первого экрана. Кладём мотив на кадр, а плашку — сразу под кадр.
   ------------------------------------------------------------------ */
@media (max-width: 980px) {
  .hero__motif {
    /* Нижняя половина кадра: сверху лежит фирменная заставка с логотипом,
       которая видна, пока не поехал ролик.
       Центруем полями, а НЕ transform: рисунок участвует в анимации
       переключения страниц, и её `transform: none` сбрасывал сдвиг —
       мотив уезжал вправо и обрезался краем экрана. */
    top: 132px;
    left: 0;
    right: 0;
    bottom: auto;
    margin: 0 auto;
    width: min(220px, 54%);
    max-width: none;
    /* Тот же неон, что на десктопе: кадр под рисунком светлый и пёстрый */
    opacity: .55;
    stroke-width: 2.2;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, .85)) drop-shadow(0 0 16px rgba(255, 198, 41, .45));
    z-index: 4;
  }

  /* Заставка бренда: логотип уводим ВНИЗ кадра. Сверху теперь подпись города
     и переключатель города — логотип их перекрывал. */
  /* Логотип-заставка встаёт в свободную полосу между переключателем города
     и городским мотивом: сверху его перекрывала плашка города, снизу он лёг
     прямо на рисунок. */
  .hero__brand { align-items: flex-start; padding-top: 150px; }
  .hero__brand img { width: min(34%, 150px); }

  /* Первый экран — один блок: кадр, плашка занятости и подсказка внутри
     .hero__first. Пока это были три соседних элемента, точка привязки стояла
     только на кадре, и переход с первого экрана на второй шёл иначе остальных.
     Сбрасываем смещения из абсолютного позиционирования: при position:relative
     они сдвигают блок. */
  .hero__first { order: 1; display: flex; flex-direction: column; }
  .hero__live {
    position: relative;
    inset: auto;
    margin: -24px var(--gut) 0;
    z-index: 5;
  }
  .hero__panel { order: 3; padding-top: 34px; }
}

/* ------------------------------------------------------------------
   Телефон: первый экран листается «страницами».

   Владелец: «сделай на мобиле, чтобы листалось страницами логическими:
   видео — зелёный блок — подбор масла — популярные авто, и нужна анимация
   при переключении». Делаем нативным scroll-snap: браузер сам доводит
   экран до начала блока, никаких перехватов колеса и свайпа. Режим
   proximity, а не mandatory: блок подбора выше экрана, и в mandatory
   в нём нельзя было бы остановиться посередине.
   ------------------------------------------------------------------ */
@media (max-width: 980px) {
  html {
    /* proximity, а не mandatory: один свайп по-прежнему листает на следующий
       блок, но внутри длинного блока (расчёт) страницу больше не утаскивает
       обратно к его началу — у кнопки «Записаться» это выглядело как
       самопроизвольная прокрутка вверх. Доводку до начала блока делает
       скрипт на главной, и только вниз. */
    /* Привязку делает скрипт главной, а не браузер: нативный snap на телефоне
       срабатывал через раз (см. index.php, «Листание страницами»). */
    scroll-snap-type: none;
    /* шапка липкая, 77 px — иначе заголовок блока уезжает под неё */
    scroll-padding-top: 77px;
    /* ПЛАВНАЯ прокрутка вместе с mandatory не работает вовсе: и переход по
       якорю, и scrollTo/scrollIntoView оставляли страницу на месте — кнопка
       «Узнать цену по автомобилю» просто ничего не делала. На телефоне,
       где включена привязка, прокрутка мгновенная. */
    scroll-behavior: auto;
  }

  /* Точки привязки нужны НА ВСЕЙ странице, не только на четырёх экранах:
     при mandatory браузер обязан остановиться на точке, и когда ниже «цен по
     маркам» их не было, прокрутку отбрасывало назад — дальше было не уйти.
     Поэтому точка есть у каждой секции и у подвала. */
  .snapp,
  section.sec,
  .ft {
    scroll-snap-align: start;
  }

  /* scroll-snap-stop: always убран: на iPhone он заставлял браузер гасить
     инерцию — палец отпустил, секунду ничего, потом рывком доводит до блока.
     Обычная привязка доводит плавно и сразу. */

  /* scroll-margin ставили под якоря, чтобы блок не уезжал под липкую шапку.
     Со снапом он же сдвигает и точку привязки: подбор вставал на 92 px ниже,
     и сверху торчала полоса предыдущего экрана. Про шапку теперь знает
     scroll-padding-top у html, так что отступ здесь не нужен. */
  section[id],
  .calc,
  #uslugi { scroll-margin-top: 0; }

  /* Экран = dvh минус шапка. svh не подошёл: у браузеров с «плавающей» нижней
     панелью (Яндекс) она лежит поверх страницы и площадь не отнимает, а svh
     всё равно вычитал её — под подсказкой оставалась лишняя полоса, из которой
     выглядывал заголовок следующего экрана. dvh считает то, что видно сейчас. */
  .hero__panel,
  .sec--marks {
    min-height: calc(100dvh - 77px);
  }

  /* Кадр короче на высоту плашки занятости и запас под нижнюю панель браузера:
     на iPhone она наезжает поверх, и плашка «Прямо сейчас» пряталась за ней. */
  /* Кадр = экран минус шапка, видимая часть плашки занятости (79 − 24 нахлёста)
     и подсказка «Свайп» (74). Тогда первый экран заканчивается ровно на ней. */
  .hero__video { min-height: calc(100dvh - 206px); }

  .hero__panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* Флексом центрировать нельзя: внутри горизонтальная карусель, и .wrap как
     флекс-элемент растягивался по ширине её ленты — заголовок и текст уезжали
     за край экрана. Оставляем обычный поток, высоту добираем отступами. */
  .sec--marks { padding-top: 40px; }
  .sec--marks > .wrap { min-width: 0; }

  /* Мотив на полный экран кадра — держим его в верхней трети */
  .hero__motif { top: 18%; width: min(260px, 62%); }

  /* Плашка занятости прижата к низу кадра: это конец первой «страницы» */
  .hero__live { margin-top: -38px; }

  /* Зелёный зазор после подсказки. Нижняя панель браузера полупрозрачная и
     «плавающая», поэтому под ней просвечивал заголовок второго экрана
     «Замена масла за 0 ₽». Отодвигаем его ниже — под подсказкой только фон. */
  .swipehint { margin-bottom: 110px; }

  /* Анимация переключения: содержимое страницы въезжает, когда она
     занимает экран, и отъезжает, когда уходит. Переключение туда-обратно
     повторяет анимацию — наблюдатель не отписывается. */
  .snapin {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .55s cubic-bezier(.2, .7, .3, 1),
                transform .55s cubic-bezier(.2, .7, .3, 1);
    transition-delay: var(--sd, 0ms);
  }

  /* is-on вешается и на страницу, и на её секцию: мотив с плашкой занятости
     лежат РЯДОМ с кадром, а не внутри него, и по `.snapp.is-on .snapin` не
     находились вовсе — оставались с opacity: 0. */
  .is-on .snapin { opacity: 1; transform: none; }

  @media (prefers-reduced-motion: reduce) {
    .snapin { opacity: 1; transform: none; transition: none; }
  }
}

/* Ролик не запустился (экономный режим, автозапуск запрещён, ошибка сети) —
   показываем постер, а не фирменную заставку: на телефоне кадр занимает
   целый экран, и сплошной зелёный прямоугольник с логотипом читался как сбой. */
.hero__video.is-poster .hero__brand { opacity: 0; visibility: hidden; }

/* Иконка в круглых кнопках шапки. У «личного кабинета» не было класса .ico,
   то есть и размеров: Safari на iPhone рисовал inline-SVG без width/height
   нулевой ширины, и кнопка выглядела пустым белым квадратом. Размер задаём
   и по классу, и по самой кнопке — чтобы следующая иконка не повторила это. */
.hdr__telbtn svg { width: 20px; height: 20px; flex: none; }

/* ------------------------------------------------------------------
   Плашка занятости на телефоне: полоса под ней и раскрытие по тапу.
   ------------------------------------------------------------------ */
@media (max-width: 980px) {
  /* Плашка стоит между кадром и зелёным блоком, по бокам от неё просвечивал
     фон секции — белая полоса во всю ширину. Красим его в цвет верха плашки. */
  .hero { background: #17A024; }
}

/* Сенсорный экран: на hover рассчитывать нельзя, а :focus-within после тапа
   не снимается — список станций открывался и больше не закрывался.
   Здесь раскрываем только по классу, который ставит тап. */
@media (hover: none) {
  .hero__live:hover .live__list,
  .hero__live:focus-within .live__list {
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
  }

  .hero__live.is-open .live__list {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}

/* На первом экране кнопка звонка не нужна: телефон есть в шапке, а круг
   наезжал на плашку занятости. */
body.at-hero .callfab { opacity: 0; visibility: hidden; pointer-events: none; }
.callfab { transition: opacity .2s, visibility .2s; }

/* Подпись города на первом экране. На десктопе она живёт в зелёной плашке,
   на телефоне кадр занимает целый экран — и без подписи он был безымянным. */
.hero__top { display: none; }

@media (max-width: 980px) {
  /* Верх кадра: подпись города и выбор города. Оба нужны на первом экране —
     в шапке на телефоне их нет, а в гамбургер за городом никто не полезет. */
  .hero__top {
    display: block;
    position: absolute;
    top: 16px;
    left: var(--gut);
    right: var(--gut);
    z-index: 6;
  }

  .hero__top-eyebrow {
    margin: 0 0 9px;
    color: #fff;
    text-shadow: 0 1px 12px rgba(7, 74, 14, .55);
  }

  /* В плашке остаётся вторая копия подписи — на телефоне она лишняя */
  .hero__panel > .eyebrow { display: none; }

  /* Сам переключатель: белый по кадру, а не по светлой шапке */
  .hero__top .city { display: block; }

  .hero__top .city__btn {
    padding: 7px 11px;
    border-color: rgba(255, 255, 255, .55);
    background: rgba(7, 74, 14, .28);
    backdrop-filter: blur(3px);
    color: #fff;
  }

  .hero__top .city__btn b { font-size: 14px; }
  .hero__top .city__btn .ico { color: #fff; }
  .hero__top .city__btn .chv { color: rgba(255, 255, 255, .75); }

  /* Список городов длинный — на телефоне он должен помещаться в экран */
  .hero__top .city__pop {
    width: min(560px, calc(100vw - 2 * var(--gut)));
    max-height: min(62vh, 430px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
  }
}

/* ------------------------------------------------------------------
   Подсказка «Свайп» на зелёной полосе под плашкой занятости.
   Первый экран — кадр во весь рост, и без подсказки не видно, что дальше
   листаются страницы. Стрелки мигают волной снизу вверх.
   ------------------------------------------------------------------ */
.swipehint { display: none; }

@media (max-width: 980px) {
  .swipehint {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 74px;
    color: #fff;
    /* По подсказке кликают, а не только свайпают — клик уводит на второй экран */
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .swipehint:active { opacity: .7; }

  /* Нижняя панель браузера лежит ПОВЕРХ страницы, поэтому видимая область выше
     dvh, и под зелёным блоком проглядывала светлая полоса — верх блока подбора.
     Зелёный блок делаем заведомо выше экрана: точка привязки у него всё равно
     сверху, а лишняя высота снизу просто не даёт просветов. */
  .hero__panel {
    order: 2;
    min-height: calc(100dvh + 60px);
    padding-bottom: 120px;
  }

  .swipehint__arrows { display: flex; flex-direction: column; align-items: center; }

  .swipehint svg {
    display: block;
    width: 22px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .22;
    animation: swipeUp 1.8s ease-in-out infinite;
  }

  /* Волна идёт снизу вверх: первой загорается нижняя «галочка» */
  .swipehint svg + svg { margin-top: -4px; }
  .swipehint svg:nth-child(3) { animation-delay: 0s; }
  .swipehint svg:nth-child(2) { animation-delay: .18s; }
  .swipehint svg:nth-child(1) { animation-delay: .36s; }

  .swipehint__t {
    margin-top: 5px;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    opacity: .8;
  }
}

@keyframes swipeUp {
  0%, 100% { opacity: .2; transform: translateY(2px); }
  50% { opacity: 1; transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  .swipehint svg { animation: none; opacity: .7; }
}

/* ------------------------------------------------------------------
   Карточки масла в калькуляторе на телефоне — компактнее.
   Каждая занимала почти четверть экрана: крупные отступы, полуторные
   межстрочные и отдельная строка под цену. Ужимаем, не трогая десктоп.
   ------------------------------------------------------------------ */
@media (max-width: 720px) {
  .pick {
    gap: 10px;
    padding: 9px 11px;
    margin-bottom: 5px;
  }

  .pick--tier { padding-top: 9px; }
  .pick__b { gap: 1px; }
  .pick--tier .pick__n { font-size: 14px; line-height: 1.22; }
  .pick__n { font-size: 13.5px; line-height: 1.25; }
  .pick__s { font-size: 10px; }

  .tier { margin-bottom: 1px; gap: 7px; }
  .tier__t, .tier__n { font-size: 9.5px; letter-spacing: .08em; }
  .tier__ico { width: 11px; height: 11px; }

  .pick input { width: 15px; height: 15px; }

  .pick__p { margin-top: 1px; gap: 8px; font-size: 15px; }
  .pick__meta { gap: 5px; }
  .stars { font-size: 11px; letter-spacing: 1px; }
  .tag { font-size: 9px; padding: 2px 6px; }

  /* Подпись группы «Масло N л по допуску» тоже занимала строку с воздухом */
  .conf__group h4 { margin-bottom: 7px; }
}

/* Подсказка «на этой станции нет — езжайте вот сюда» в калькуляторе */
.nostock {
  margin: 10px 0 2px;
  padding: 10px 12px;
  border-radius: var(--r);
  background: var(--amber);
  color: #231A00;
  font-size: 13px;
  line-height: 1.45;
}

.nostock__go {
  font: inherit;
  font-weight: 700;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Поле госномера в записи: номер набирают заглавными, моноширинный шрифт
   помогает не спутать О и 0. */
.field__plate {
  text-transform: uppercase;
  font-family: var(--mono);
  letter-spacing: .08em;
}

/* Состав расчёта, с которым человек пришёл из калькулятора */
.bookorder {
  margin: 18px 0 6px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper-2);
}

.bookorder h3 {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
}

.bookorder .row,
.done__order .row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 0;
  border-top: 1px solid var(--line-2);
  font-size: 14px;
}

.bookorder .row:first-of-type,
.done__order .row:first-of-type { border-top: 0; }

.bookorder .total,
.done__order .total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1.5px solid var(--ink);
  font-family: var(--display);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -.02em;
}

/* Подтверждение записи: факты и состав — карточками, а не сплошным текстом */
.done__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 32px;
  margin: 18px 0 4px;
}

.done__facts div { min-width: 0; }

.done__facts dt {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 3px;
}

.done__facts dd { margin: 0; font-size: 15.5px; font-weight: 600; }

.done__order {
  margin: 20px 0 22px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  text-align: left;
  max-width: 560px;
}

.done__order h3 {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
}

/* Кружок выбора и подпись категории — в одну строку. Раньше точка занимала
   отдельную строку над «НОРМ ВЫБОР»: карточка начиналась с пустоты. */
@media (max-width: 720px) {
  .pick--tier {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    column-gap: 10px;
    row-gap: 2px;
  }

  .pick--tier input { grid-column: 1; grid-row: 1; margin-top: 2px; }
  .pick--tier .pick__b { grid-column: 2; grid-row: 1; }
  .pick--tier .pick__p { grid-column: 1 / -1; }
}

/* Страница записи: под кнопкой «Записаться» листать нечего. Разделы сайта в
   подвале здесь лишние — на телефоне это ещё полтора экрана прокрутки. */
.page-book .ft__grid > div:not(.ft__brand) { display: none; }
.page-book .ft__brand { max-width: 46ch; }

@media (max-width: 720px) {
  .page-book .ft__grid { display: block; }
  .page-book .ft__brand p { font-size: 13.5px; }
  .page-book .ft { padding-top: 26px; }
}

/* Машина выбрана: ниже расчёта листать нечего. Витрину под калькулятором
   прячем — с ней человек прокручивал мимо кнопки «Записаться» к популярным
   маркам и начинал выбирать заново. Сброс марки возвращает страницу. */
@media (max-width: 980px) {
  .has-order main > .calc ~ *:not(.calc__bar) { display: none; }
  .has-order .ft { display: none; }

  /* Ниже расчёта блоков не осталось, значит не осталось и точек привязки:
     при mandatory прокрутку к кнопке «Записаться» отбрасывало обратно
     к выбору машины. Пока показан расчёт, листаем обычным образом. */
  html.has-order { scroll-snap-type: none; }
}

/* Липкая строка «Итого / Записаться» стоит поверх страницы и закрывала
   последнее поле формы — выбор станции. Освобождаем под неё место снизу. */
@media (max-width: 980px) {
  body.has-calcbar .calc__form,
  body.has-calcbar .calc__out { padding-bottom: 104px; }

  body.has-calcbar .bookform { padding-bottom: 96px; }
}

/* Кнопка «Как проехать» в подтверждении записи: иконка маршрута рядом с текстом */
.done .btn { display: inline-flex; align-items: center; gap: 9px; }
.done .btn .ico { width: 19px; height: 19px; flex: none; }

/* Строка таблицы моделей кликабельна целиком: раньше ссылкой было только
   название, и попасть по нему на телефоне получалось не всегда. */
.ptable__row--link { color: inherit; }
.ptable__row--link .ptable__link { color: var(--green); font-weight: 500; }
.ptable__row--link:hover { background: var(--green-l2); }
.ptable__row--link:hover .ptable__link { text-decoration: underline; text-underline-offset: 2px; }

/* Фото станции из карточки организации на Яндекс.Картах */
.stphotos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 16px;
}

.stphotos img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  background: var(--paper-3);
  display: block;
}

@media (max-width: 900px) { .stphotos { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .stphotos { grid-template-columns: repeat(2, 1fr); gap: 8px; } }

/* Кнопка записи в подвале: `.ft li a` перекрывает цвет `.btn--primary`
   по специфичности, и надпись становилась зелёной на зелёном. */
.ft li a.btn--primary,
.ft li a.btn--primary:hover { color: #fff; }

/* Полоска загруженности на день: слева утро, справа конец рабочего дня.
   Живёт в списке станций — под каждым адресом своя. */
.load__bar { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 2px; height: 20px; }
/* Подписи поверх полоски: утро — день — вечер. Ставим по долям ширины,
   а не колонками, иначе крайние уедут внутрь. */
/* Раскладываем по сторонам явно: inset понимает не всякий Safari на iPhone */
.load__hrs { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none;
  font-family: var(--mono); font-size: 9px; letter-spacing: .04em; color: #fff; }
.load__hrs i { position: absolute; top: 50%; font-style: normal; transform: translateY(-50%);
  text-shadow: 0 1px 2px rgba(8, 30, 12, .6); }

/* Подпись под полоской: без неё цветная лента непонятно что означает */
.load__cap { display: block; margin-top: 3px; font-family: var(--mono); font-size: 9px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.load__hrs i:nth-child(1) { left: 0; }
.load__hrs i:nth-child(2) { left: 50%; transform: translate(-50%, -50%); }
.load__hrs i:nth-child(3) { right: 0; }
/* Цвет полоски — сплошной градиент, его ставит скрипт: салатовый там, где посты
   свободны, жёлтый где занята часть, красный где занято всё. Получасовки поверх
   градиента прозрачные и нужны только ради подсказки при наведении. */
.load__seg { display: block; background: transparent; }


/* Выбор станции: свой список вместо нативного <select> — в него нужно положить
   полоску загруженности под каждым адресом. */
/* Обёртке достаётся общее оформление поля — гасим его, рамку рисует сама кнопка,
   иначе получается коробка в коробке. */
.field .pick, .pick { position: relative; border: 0; padding: 0; background: none; border-radius: 0; box-shadow: none; }
.pick__native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pick__btn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 50px;
  padding: 0 40px 0 14px; border: 1px solid var(--line); border-radius: 4px; background: #fff;
  font: inherit; font-size: 15px; color: var(--ink); text-align: left; cursor: pointer; }
.pick__btn::after { content: ''; position: absolute; right: 16px; top: 50%; width: 9px; height: 9px;
  margin-top: -6px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg); pointer-events: none; }
.pick__btn:hover { border-color: var(--green); }
.pick__btn[aria-expanded="true"] { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-l2, #eef7f0); }

/* Позицию ставит __spotPlacePop: список должен вылезать за карточку расчёта,
   у которой overflow: hidden — иначе видна только первая строка. */
.pick__pop { position: fixed; z-index: 60; max-height: 340px; overflow-y: auto; padding: 6px;
  border: 1px solid var(--line); border-radius: 12px; background: #fff;
  box-shadow: 0 18px 40px rgba(16, 32, 20, .14); }
.pick__opt { display: grid; gap: 5px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px;
  background: none; font: inherit; text-align: left; cursor: pointer; }
.pick__opt:hover { background: var(--green-l2, #eef7f0); }
.pick__opt.is-on { background: var(--green-l2, #eef7f0); }
.pick__opt.is-on .pick__adr { color: var(--green-dd, #0c6b35); font-weight: 600; }
.pick__adr { font-size: 14.5px; color: var(--ink); }


/* Страница записи заканчивается кнопкой: ниже листать нечего, а подвал
   на форме только уводит внимание — прячем его и лишний отступ. */
body.page-book .ft { display: none; }
body.page-book main { padding-bottom: 20px; }

/* Полоска загруженности рядом с адресом: в контактах, на странице станции,
   в списке «свободно сейчас» и в таблице наличия. Пока данные не приехали,
   место не занимаем — пустой span ничего не рисует. */
.load__strip { display: block; margin-top: 8px; }
.load__strip:empty { display: none; }
.load__strip .load__bar { height: 16px; }
.load__strip .load__hrs { font-size: 9px; }

.live__row .load__strip { margin-top: 5px; }
.live__row .load__bar { height: 12px; gap: 1px; }
.live__row .load__hrs { display: none; }

.ptable__n .load__strip { margin-top: 6px; max-width: 320px; }
.ptable__n .load__bar { height: 12px; }
.ptable__n .load__hrs { display: none; }

.stload { margin: 18px 0 4px; max-width: 460px; }
.stload__t { display: block; margin-bottom: 6px; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.stload .load__hrs { color: rgba(255, 255, 255, .85); }
.stload .load__hrs i { text-shadow: none; }

/* Телефоны станций: в регионах у каждой станции свой номер, общего колл-центра нет */
.phones { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(12, 24, 15, .55); }
.phones[hidden] { display: none; }
.phones__win { width: min(520px, 100%); max-height: 80vh; overflow-y: auto; padding: 8px;
  border-radius: 14px; background: #fff; box-shadow: 0 24px 60px rgba(8, 20, 12, .3); }
.phones__hd { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px 12px; font-size: 16px; }
.phones__x { width: 32px; height: 32px; border: 0; border-radius: 8px; background: var(--paper-3, #f0f2f0);
  font-size: 20px; line-height: 1; color: var(--ink-2); cursor: pointer; }
.phones__x:hover { background: var(--green-l2, #eef7f0); }
.phones__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 11px 12px; border-radius: 10px; text-decoration: none; }
.phones__row:hover { background: var(--green-l2, #eef7f0); }
.phones__adr { font-size: 14.5px; color: var(--ink-2); }
.phones__tel { font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--green-dd, #0c6b35);
  white-space: nowrap; }

/* Кнопка «Телефоны станций» в шапке: у региона единого номера нет */
.tel--list { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 0;
  border-radius: 10px; background: none; font: inherit; color: var(--ink-2); cursor: pointer; text-align: left; }
.tel--list:hover { background: var(--green-l2, #eef7f0); color: var(--green-dd, #0c6b35); }
.tel--list .ico { width: 20px; height: 20px; }
.tel--list span { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }

/* Плитки регионов: их стало тринадцать, и на телефоне список занимал пол-экрана.
   Делаем компактнее — меньше воздуха внутри плитки и плотнее сетка. */
.city__major { gap: 6px; padding-bottom: 10px; margin-bottom: 10px; }
.city__big { gap: 6px; padding: 4px 9px 4px 4px; font-size: 13.5px; }
.city__big b { font-size: 11px; padding: 2px 5px; }

@media (max-width: 720px) {
  .city__major { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
  .city__big { padding: 4px 6px 4px 4px; font-size: 12.5px; gap: 5px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; }
  .city__big b { font-size: 10px; padding: 2px 4px; }
}

/* Мастера сети: лицо и имя. Фото приходят из СРМ разного размера — режем по кругу. */
.crew { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 18px 12px; }
.crew__i { margin: 0; text-align: center; }
.crew__i img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
  background: var(--paper-3, #f0f2f0); }
.crew__i figcaption { margin-top: 8px; font-size: 13.5px; color: var(--ink-2); }

@media (max-width: 720px) {
  .crew { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 14px 10px; }
  .crew__i img { width: 76px; height: 76px; }
  .crew__i figcaption { font-size: 12.5px; }
}

/* Таблица модификаций: что зальём — в колонке «Масло и фильтр», под ней кнопка.
   Раньше кнопка была прозрачной с белым текстом (вариант для зелёного фона)
   и на белой строке читалась только при наведении. */
.ptable__parts { display: block; font-size: 13px; color: var(--ink-3); line-height: 1.4; }
.ptable__pick { margin-top: 8px; border: 1px solid var(--green); background: #fff; color: var(--green-dd, #0c6b35); }
.ptable__pick:hover { background: var(--green); color: #fff; }

/* Телефоны станций из шапки — выпадающий список под кнопкой, а не окно */
.phones--pop { position: fixed; z-index: 70; inset: auto; padding: 0; background: none; display: block;
  min-width: 320px; max-height: 360px; overflow-y: auto; }
.phones--pop .phones__win { width: 100%; max-height: none; box-shadow: 0 18px 40px rgba(16, 32, 20, .16);
  border: 1px solid var(--line); column-gap: 0; }
/* Раскладка в колонки: число колонок ставит скрипт, чтобы список влез без прокрутки */
.phones--pop .phones__row { break-inside: avoid; -webkit-column-break-inside: avoid; }
@media (max-width: 720px) {
  .phones--pop { min-width: 0; }
}

/* Мастера в карточке станции: кто работал тут за последнюю неделю.
   Ровно как на старом сайте — лицо и имя, без должностей. */
.crewline { display: flex; align-items: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.crewline__i {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.14); background: #eef2ee;
}
.crewline__i + .crewline__i { margin-left: -12px; }
.crewline__cap { margin-left: 8px; font-style: normal; font-size: 12px; color: #7b857b; }

/* Заголовок группы в списке телефонов («Пригород») */
.phones__head { padding: 10px 12px 4px; font: 600 11.5px/1.2 var(--display, inherit);
  letter-spacing: .08em; text-transform: uppercase; color: #8a948a; break-inside: avoid; }

/* В заголовке группы «Все адреса» стоит общий номер — один раз на всю группу,
   вместо двадцати трёх одинаковых строк справа от адресов. */
.phones__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.phones__headtel { font-family: var(--display); font-weight: 700; font-size: 15px;
  letter-spacing: 0; text-transform: none; color: var(--green-dd, #0c6b35); text-decoration: none; }
.phones__headtel:hover { text-decoration: underline; }

/* Город и пригород — два блока со своими колонками */
.phones--pop .phones__grid { column-gap: 0; }

/* Список телефонов не должен вылезать за экран: на телефоне номер уезжал вправо
   и появлялась горизонтальная прокрутка. Ограничиваем шириной экрана, а строке
   разрешаем перенести номер под адрес, если вдвоём они не помещаются. */
.phones--pop { max-width: calc(100vw - 24px); overflow-x: hidden; }
.phones--pop .phones__row { flex-wrap: wrap; row-gap: 2px; }
.phones--pop .phones__adr { flex: 1 1 auto; min-width: 0; }
.phones--pop .phones__tel { flex: 0 0 auto; white-space: nowrap; }

/* Скрытый нативный select стоял на своём «естественном» месте и на телефоне
   вылезал за правый край, раскачивая страницу вбок. Прижимаем его к началу поля. */
.pick__native { left: 0; top: 0; }

/* Оговорка о правах под расчётом: тихая строка, не спорит с ценой */
.calc__rights { margin: 10px 0 0; font-size: 12px; line-height: 1.45; color: #8a948a; }