/* ------------------------------------------------------------------
   ATE Motors — доработки поверх шаблона.
   Подключается последним, поэтому переопределяет styles-6779.css
   ------------------------------------------------------------------ */

:root {
  --ate-orange: #f97900;
  --ate-orange-dark: #e06a00;
  --ate-ink: #101114;
  --ate-muted: #6b7076;
  --ate-line: #e7e8ec;
  --ate-line-strong: #dcdee4;
}

/* Шаблон нигде не задаёт фон страницы: у посетителя с тёмной темой
   системы браузер подставлял свой тёмный холст, а текст остаётся чёрным.
   Фиксируем светлую тему явно. */
html {
  color-scheme: light;
}

html,
body {
  background: #ffffff;
  color: var(--ate-ink);
}

/* ---------- карточки каталога ---------- */

/* шаблон подкладывает тёмный вотермарк-логотип под картинку карточки —
   на светлой плитке со студийными снимками он не нужен */
.card__header {
  background-image: none;
}

.card--car .card__img {
  height: 240px;
  /* чисто белая плитка: студийные снимки на белом фоне и PNG с прозрачностью
     ложатся без видимого шва */
  background: #ffffff;
  border: 1px solid var(--ate-line-strong);
  border-radius: 12px;
  overflow: hidden;
}

.card__img img {
  transition: transform 0.35s ease;
}

/* студийные снимки товара — вписываем целиком, с полями */
.card__img--contain img {
  object-fit: contain;
  padding: 16px;
  box-sizing: border-box;
  border-radius: 0;
}

/* обычные фотографии — заполняем кадр */
.card__img--cover img {
  object-fit: cover;
}

/* тёмный градиент шаблона мешает товару на светлом фоне */
.card--car .card__img::before {
  display: none;
}

.card--car:hover .card__img img {
  transform: scale(1.04);
}

.card__badge {
  position: absolute;
  z-index: 2;
  top: 12px;
  left: 12px;
  padding: 5px 10px;
  background: rgba(16, 17, 20, 0.82);
  border-radius: 999px;
  font-weight: 600;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: #fff;
  backdrop-filter: blur(2px);
}

.card__desc .card__title span {
  text-transform: none;
  font-size: 17px;
}

/* на тач-устройствах кнопка «Заказать» не должна прятаться под hover */
@media (hover: none), (pointer: coarse) {
  .card--car .card__btn {
    position: static;
    z-index: 1;
    opacity: 1;
    margin-top: 12px;
    height: 42px;
    font-size: 16px;
  }

  .card--car::before {
    display: none;
  }

  .goods {
    row-gap: 24px;
  }
}

/* ---------- сетка каталога на главной ---------- */

@media (max-width: 991px) {
  .card--car .card__img {
    height: 200px;
  }
}

@media (max-width: 575px) {
  .card--car .card__img {
    height: 190px;
  }
}

/* ---------- блок «Почему выбирают» ---------- */

.benefit__item > img {
  border-radius: 16px;
}

/* ---------- изображение в блоке «Что мы привозим» ---------- */

.video__right img {
  border-radius: 16px;
}

/* ---------- мелкие улучшения доступности ---------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--ate-orange);
  outline-offset: 2px;
}

img {
  max-width: 100%;
}

/* ---------- плавающие кнопки связи ---------- */

/* На телефоне стек из трёх кнопок с пульсирующими кольцами занимал
   заметную часть экрана и перекрывал кнопки «Заказать» в карточках.
   contact.js добавляет свой <style> в конец body, поэтому здесь нужна
   повышенная специфичность (body .class). */
@media (max-width: 575px) {
  body .inst-button,
  body .whatsapp-button,
  body .phone-button {
    width: 46px;
    height: 46px;
    line-height: 44px;
    font-size: 26px;
  }

  body .inst-button::before,
  body .inst-button::after,
  body .whatsapp-button::before,
  body .whatsapp-button::after,
  body .phone-button::before,
  body .phone-button::after {
    display: none;
  }
}