/* ==========================================================================
   ДиалогАвто — базовые стили
   Цвета и шрифты вынесены в переменные (:root), чтобы поменять их в одном
   месте, а не искать по всем файлам. Все остальные стили строятся на них.
   ========================================================================== */

:root {
  /* Реальные цвета бренда (сэмплированы из логотипа клиента) */
  --color-bg: #0b0b0b;
  --color-bg-elevated: #17171a;
  --color-bg-light: #f7f7f5;
  --color-border: #262626;
  --color-border-light: #d8d8d5;
  --color-accent: #feed01;
  --color-text: #ffffff;
  --color-text-dark: #171717;
  --color-text-muted: #8a8a8a;
  --color-text-muted-dark: #555555;

  --font-heading: "Montserrat", sans-serif;
  --font-body: "Open Sans", sans-serif;

  --max-width: 1280px;
  --radius: 10px;
  --radius-pill: 999px;
  --gap: 20px;
}

/* ---------- Сброс и база ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
  margin: 0;
  font-weight: 800;
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 64px 0;
}

.section--light {
  background: var(--color-bg-light);
  color: var(--color-text-dark);
}

.section--light h2 {
  color: var(--color-text-dark);
}

/* ---------- Шапка и навигация ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 11, 11, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--color-border);
}

.site-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 24px;
}

.site-header__logo {
  /* Без этого на тесной мобильной шапке логотип как самый "сжимаемый"
     flex-элемент мог схлопнуться почти до нуля, когда телефон/иконки/
     гамбургер вместе не помещались в строку. */
  flex-shrink: 0;
}

.site-header__logo img {
  /* Лого двухстрочное (Dialog / Авто), на маленькой высоте превращается
     в нечитаемое пятно - держим его крупнее, чем обычно ставят однострочные
     логотипы. */
  height: 52px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 26px;
}

.site-nav__link {
  color: #cfcfcf;
  font-weight: 600;
  font-size: 15px;
}

.site-nav__link:hover,
.site-nav__link--active {
  color: var(--color-accent);
}

/* Кнопка "Записаться" внутри мобильного выпадающего меню.
   На десктопе её прячем - там для этого есть .site-header__cta.
   !important оправдан: иначе .btn{display:inline-block}, который
   объявлен ниже по каскаду, побеждает при равной специфичности. */
.site-nav__cta {
  display: none !important;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.site-header__phone {
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Телефон/WhatsApp/MAX компактными кружками - только на мобильном,
   см. медиа-запрос внизу. На десктопе там и так есть текстовый номер
   и кнопка "Записаться". */
.header-contact-icons {
  display: none;
  align-items: center;
  gap: 8px;
}

.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1c1c1c;
  color: var(--color-text);
  flex-shrink: 0;
}

.icon-btn--whatsapp {
  background: #25d366;
}

.icon-btn--max {
  background: #1c1c1c;
  color: var(--color-accent);
  border: 1.5px solid var(--color-accent);
}

/* Кнопка-гамбургер: видна только на мобильном (см. медиа-запрос внизу) */
.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.nav-toggle span,
.nav-toggle::before,
.nav-toggle::after {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  margin: 5px auto;
  background: var(--color-text);
}

/* ---------- Кнопки ---------- */

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  padding: 13px 26px;
  border-radius: 4px;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-align: center;
}

.btn--primary {
  background: var(--color-accent);
  color: var(--color-bg);
}

.btn--primary:hover {
  background: #ffffff;
}

.btn--outline {
  background: transparent;
  border-color: var(--color-accent);
  color: var(--color-accent);
  padding: 11.5px 24px;
}

.btn--outline:hover {
  background: var(--color-accent);
  color: var(--color-bg);
}

/* Тот же аутлайн, но для светлых секций (.section--light) - желтый
   текст/рамка на белом фоне почти не видны, поэтому здесь берём
   тёмный цвет текста вместо акцентного жёлтого. */
.btn--outline-dark {
  background: transparent;
  border-color: var(--color-text-dark);
  color: var(--color-text-dark);
  padding: 11.5px 24px;
}

.btn--outline-dark:hover {
  background: var(--color-text-dark);
  color: #fff;
}

.btn--ghost {
  border-color: #4a4a4a;
  color: #e8e8e8;
  padding: 11.5px 24px;
}

.btn--ghost:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.btn--block {
  display: block;
  width: 100%;
}

/* ---------- Карточки ---------- */

.card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 24px;
}

.card:hover {
  border-color: var(--color-accent);
}

.icon-box {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

/* ---------- Плейсхолдеры под фото, которых ещё нет ---------- */

.placeholder {
  border: 2px dashed #3a3a3a;
  border-radius: var(--radius);
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--color-text-muted);
  text-align: center;
  font-size: 13px;
  padding: 24px;
}

/* ---------- Сетки ---------- */

.grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}

/* Галерея фото сервиса: сетка на десктопе, горизонтальный свайп-скролл
   на мобильном (см. медиа-запрос внизу) - вместо того чтобы фото просто
   стопкой падали друг под друга на весь экран. */
.photo-scroll {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.gallery-photo {
  border-radius: var(--radius);
  width: 100%;
  object-fit: cover;
  height: 260px;
}

/* ---------- Блок "Наши услуги" с фоновым фото ----------
   Лёгкая полупрозрачная фотография на фоне, чтобы секция не выглядела
   совсем "по шаблону" - фото затемнено и приглушено, текст поверх читается
   как обычно. */
.services-section {
  position: relative;
  overflow: hidden;
  padding-bottom: 72px;
}

.services-section__bg {
  position: absolute;
  inset: 0;
  background-image: url("../img/tseh.jpg");
  background-size: cover;
  background-position: center 35%;
  opacity: 0.1;
  filter: grayscale(55%);
  pointer-events: none;
}

.services-section__inner {
  position: relative;
  z-index: 1;
}

/* ---------- Блок "Нам доверяют" с фоновым фото ----------
   Та же идея, что и у блока услуг: фото на фоне, затемнённое и
   приглушённое, для визуального разнообразия страницы. Фото - свободное
   stock-фото с Unsplash (деталь двигателя, без логотипов автопроизводителей
   крупным планом), не фотография реального сервиса - декоративный фон. */
.stats-section {
  position: relative;
  overflow: hidden;
}

.stats-section__bg {
  position: absolute;
  inset: 0;
  background-image: url("../img/stock-detail2.jpg");
  background-size: cover;
  background-position: center 40%;
  opacity: 0.14;
  filter: grayscale(40%);
  pointer-events: none;
}

.stats-section__inner {
  position: relative;
  z-index: 1;
}

/* ---------- Герой на главной ---------- */

.hero {
  display: flex;
  gap: 48px;
  align-items: center;
  flex-wrap: wrap;
  padding: 64px 0 72px;
  position: relative;
}

.hero__text {
  flex: 1 1 480px;
  min-width: 0;
}

.hero__media {
  flex: 1 1 420px;
  min-width: 0;
  position: relative;
}

/* ---------- Декоративные диагональные полосы ----------
   Чисто визуальный акцент по краю секции (фирменный жёлтый), чтобы
   страница не выглядела как типовой шаблон - без текста и смысловой
   нагрузки, просто "живее". */
.diagonal-stripe {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  background: var(--color-accent);
}

.diagonal-stripe--hero {
  width: 140px;
  height: 18px;
  top: -6px;
  right: 6%;
  transform: rotate(-8deg);
  opacity: 0.85;
}

.diagonal-stripe--hero::after {
  content: "";
  position: absolute;
  width: 60px;
  height: 18px;
  background: var(--color-accent);
  opacity: 0.4;
  top: 28px;
  left: 40px;
  transform: rotate(0deg);
}

.diagonal-stripe--services {
  width: 180px;
  height: 22px;
  bottom: 12px;
  left: -40px;
  transform: rotate(-8deg);
  opacity: 0.12;
}

/* ---------- Рукописные подписи у фото ----------
   Имитация "от руки" аннотации, как на рефе клиента: изогнутая стрелка
   SVG + подпись шрифтом Caveat. Реальный текст, без выдуманных фактов. */
.handwritten-note {
  position: absolute;
  font-family: "Caveat", cursive;
  font-weight: 600;
  font-size: 22px;
  color: var(--color-accent);
  line-height: 1.2;
  z-index: 2;
  pointer-events: none;
}

.handwritten-note--hero {
  bottom: -34px;
  left: 12px;
  transform: rotate(-3deg);
  max-width: 220px;
}

.annotation-arrow {
  position: absolute;
  pointer-events: none;
  z-index: 2;
}

.hero__eyebrow {
  color: var(--color-accent);
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 14px;
  margin-bottom: 16px;
}

.hero h1 {
  font-size: 52px;
  line-height: 1.08;
}

.hero p {
  font-size: 17px;
  line-height: 1.6;
  color: #b9b9b9;
  margin-top: 20px;
  max-width: 520px;
}

.hero__actions {
  display: flex;
  gap: 16px;
  margin-top: 32px;
  flex-wrap: wrap;
}

/* ---------- Строка преимуществ (иконка + текст) ---------- */

.benefits-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  padding: 8px 0 56px;
  position: relative;
  z-index: 1;
}

.benefit-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.benefit-item .icon-box {
  margin-bottom: 0;
  flex-shrink: 0;
}

.benefit-item strong {
  display: block;
  font-size: 15px;
  margin-bottom: 4px;
}

.benefit-item p {
  color: #8a8a8a;
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

/* ---------- Формы ---------- */

.field-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted-dark);
  margin-bottom: 6px;
}

input,
select,
textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  padding: 12px 14px;
  border-radius: 6px;
  border: 1px solid var(--color-border-light);
  background: #fff;
  color: var(--color-text-dark);
}

/* Тёмные инпуты (используются на странице Запчасти) */
.input--dark {
  background: #121214;
  border-color: #2e2e2e;
  color: #fff;
}

.input--dark::placeholder {
  color: #777;
}

/* ---------- Таблица цен ---------- */

.price-table {
  width: 100%;
  border-collapse: collapse;
}

.price-table th {
  text-align: left;
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 16px;
  border-bottom: 1px solid var(--color-border);
}

.price-table td {
  padding: 13px 16px;
  border-bottom: 1px solid #1c1c1c;
  font-size: 14px;
}

.price-table__price {
  color: var(--color-accent);
  font-weight: 700;
  white-space: nowrap;
  text-align: right;
}

.tag--estimate {
  font-size: 11px;
  color: var(--color-text-muted);
  border: 1px solid #333;
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 8px;
}

/* ---------- Пилюли-фильтры ---------- */

.pill {
  border: 1px solid #2e2e2e;
  border-radius: var(--radius-pill);
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  color: #cfcfcf;
  font-family: var(--font-body);
}

.pill--active {
  background: var(--color-accent);
  color: var(--color-bg);
  border-color: var(--color-accent);
}

.pill-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ---------- Бейджи наличия (Запчасти) ---------- */

.badge {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

.badge--in-stock {
  background: #143318;
  color: #5fd37a;
}

.badge--on-order {
  background: #332a10;
  color: #e8c24a;
}

/* ---------- Каталог запчастей: сетка категорий ---------- */

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 16px;
}

.category-tile {
  background: #141414;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 24px 18px;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.15s, transform 0.15s;
}

.category-tile:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

.category-tile__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: #0b0b0b;
  display: flex;
  align-items: center;
  justify-content: center;
}

.category-tile strong {
  font-size: 15px;
  line-height: 1.3;
  color: #fff;
}

.category-tile__count {
  font-size: 13px;
  color: #8a8a8a;
}

/* ---------- Каталог запчастей: список + сайдбар ---------- */

.catalog-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  align-items: start;
}

.catalog-sidebar {
  display: flex;
  flex-direction: column;
  gap: 28px;
  position: sticky;
  top: 20px;
}

.catalog-sidebar__block h3 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #8a8a8a;
  margin-bottom: 12px;
}

.catalog-sidebar__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.catalog-sidebar__link {
  background: none;
  border: none;
  color: #b9b9b9;
  font-size: 14px;
  text-align: left;
  padding: 6px 0;
  cursor: pointer;
}

.catalog-sidebar__link:hover {
  color: #fff;
}

.catalog-sidebar__link--active {
  color: var(--color-accent);
  font-weight: 700;
}

.catalog-price-range {
  display: flex;
  gap: 10px;
}

.catalog-price-range input {
  width: 100%;
  background: #141414;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: #fff;
  padding: 8px 10px;
  font-size: 14px;
}

.catalog-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  color: #b9b9b9;
  cursor: pointer;
  text-align: left;
  width: 100%;
}

/* Жёстко фиксируем размер и позицию самого чекбокса - раньше при
   переносе длинных названий бренда на 2 строки (align-items:center)
   чекбокс "гулял" по вертикали вслед за высотой строки, что на
   некоторых мобильных браузерах выглядело как хаотичный разъезд.
   flex-shrink:0 + свой margin-top (подгон под высоту первой строки
   текста) держат его ровно у левого края. */
.catalog-checkbox input[type="checkbox"] {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
}

.catalog-checkbox__count {
  color: #666;
  margin-left: auto;
  flex-shrink: 0;
}

.catalog-results {
  min-width: 0;
}

.part-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border);
}

.part-row__thumb {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: var(--radius);
  background: #141414;
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #555;
  text-align: center;
  line-height: 1.2;
}

.part-row__info {
  flex: 1;
  min-width: 0;
}

.part-row__name {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}

.part-row__meta {
  font-size: 13px;
  color: #8a8a8a;
}

.part-row__category {
  margin-left: 8px;
  padding-left: 8px;
  border-left: 1px solid var(--color-border);
}

.part-row__side {
  flex-shrink: 0;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}

.part-row__price {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
}

.part-row__order {
  flex-shrink: 0;
  padding: 8px 16px;
  font-size: 13px;
}

/* ---------- Футер ---------- */

.site-footer {
  background: #000;
  border-top: 1px solid var(--color-border);
  padding: 40px 0 28px;
}

.site-footer__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.site-footer img {
  /* Та же логика, что и в шапке - двухстрочный логотип мельче 32px
     превращается в кашу. opacity тоже убрали - на чёрном фоне бледнило
     и без того некрупную картинку. */
  height: 36px;
}

.site-footer__meta {
  color: #7a7a7a;
  font-size: 13px;
}

/* ---------- Прочее ---------- */

.chip {
  border: 1px solid #2e2e2e;
  border-radius: var(--radius-pill);
  padding: 8px 18px;
  font-weight: 700;
  color: #d9d9d9;
  font-size: 14px;
}

.rating {
  font-weight: 800;
  color: var(--color-accent);
}

.breadcrumbs {
  color: #6e6e6e;
  font-size: 13px;
  padding: 20px 0 0;
}

.breadcrumbs a {
  color: #6e6e6e;
}

.notice {
  background: #1c1a08;
  border: 1px solid #4a4310;
  color: #e8d24a;
  font-size: 13px;
  border-radius: 8px;
  padding: 14px 18px;
  line-height: 1.6;
}

/* ---------- Попап лид-формы (assets/js/lead-modal.js) ---------- */

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 200;
}

.modal-overlay--open {
  display: flex;
}

.modal {
  position: relative;
  background: var(--color-bg-light);
  color: var(--color-text-dark);
  border-radius: var(--radius);
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 32px;
}

.modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: #555;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

/* ==========================================================================
   Адаптив: на мобильном — одна колонка, крупные кнопки, меню-гамбургер.
   Требование из ТЗ, поэтому делаем честный переключаемый мобильный навбар,
   а не просто "сжимаем" десктопную шапку.
   ========================================================================== */

@media (max-width: 860px) {
  .nav-toggle {
    display: block;
  }

  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    flex-direction: column;
    gap: 0;
    padding: 8px 24px 16px;
  }

  .site-nav--open {
    display: flex;
  }

  .site-nav__link {
    padding: 12px 0;
    border-bottom: 1px solid #1c1c1c;
    font-size: 16px;
  }

  /* "Записаться" переезжает внутрь открытого меню - в самой верхней
     строке на мобильном и так тесно (телефон + WhatsApp + MAX + гамбургер). */
  .site-nav__cta {
    display: block !important;
    width: 100%;
    margin-top: 12px;
    text-align: center;
  }

  .site-header__cta {
    display: none !important;
  }

  /* Тесно: логотип + телефон + 3 иконки + гамбургер в одну строку на
     узком экране. Подрезаем размеры и, на всякий случай, разрешаем
     перенос второй группы на новую строку, если где-то не хватит места. */
  .site-header__row {
    flex-wrap: wrap;
    row-gap: 8px;
    padding: 12px 16px;
  }

  .site-header__phone {
    font-size: 12px;
  }

  .site-header__actions {
    gap: 8px;
  }

  .header-contact-icons {
    display: flex;
    gap: 6px;
  }

  .icon-btn {
    width: 32px;
    height: 32px;
  }

  .nav-toggle {
    width: 36px;
    height: 36px;
  }

  .hero h1 {
    font-size: 36px;
  }

  .btn {
    width: 100%;
  }

  .hero__actions,
  .site-footer__row {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  /* align-items:stretch выше растягивал лого на всю ширину экрана -
     у <img> это не то же самое, что текстовые строки рядом, ему нужен
     свой размер, а не "растянуться как родитель". */
  .site-footer img {
    align-self: center;
  }

  /* Фото сервиса на мобильном - горизонтальная галерея со свайпом,
     а не колонка во весь экран. */
  .photo-scroll {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 14px;
    margin: 0 -24px;
    padding: 0 24px 6px;
  }

  .photo-scroll figure {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }

  .gallery-photo {
    height: 220px;
  }

  /* Декоративные элементы (полосы, рукописные подписи) на мобильном
     только мешают - узкая колонка, им некуда деться без наложения на
     текст, поэтому на мобильном просто прячем. */
  .diagonal-stripe,
  .handwritten-note,
  .annotation-arrow {
    display: none;
  }

  .benefits-row {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* Плитки услуг на главной (не на странице "Услуги" - там у карточек
     ещё и кнопки, нужна отдельная ширина) - по рефу должны быть
     компактным 2-колоночным гридом, а не растянутыми "простынями". */
  .services-section .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .services-section .grid .card {
    padding: 16px;
  }

  .services-section .grid .icon-box {
    width: 36px;
    height: 36px;
    margin-bottom: 10px;
  }

  .services-section .grid strong {
    font-size: 14px;
    line-height: 1.3;
  }

  .services-section .grid p {
    font-size: 12px;
    margin-top: 4px;
  }

  /* Каталог запчастей на мобильном - сайдбар фильтров уходит под список,
     карточка товара переходит в двухстрочную раскладку. */
  .catalog-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .catalog-sidebar {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
  }

  .catalog-sidebar__block {
    flex: 1 1 160px;
  }

  .part-row {
    flex-wrap: wrap;
  }

  .part-row__side {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin-left: 72px;
  }

  .part-row__order {
    margin-left: auto;
  }
}