/* Мобильные правки поверх вёрстки Тильды.
   Файл подключается последним, генерируемые Тильдой стили не трогаются —
   если что-то пойдёт не так, достаточно убрать <link> из index.html. */

@media (max-width: 767px) {

  /* 1. Поле телефона: было 21px — палец не попадает, а iOS зумил страницу
        при фокусе, потому что шрифт меньше 16px. */
  .hp-quick__input,
  input[type="tel"], input[type="text"], input[type="email"] {
    min-height: 48px;
    font-size: 16px;
    padding-top: 12px;
    padding-bottom: 12px;
    box-sizing: border-box;
  }

  /* 2. Кнопки-таблетки в фильтрах каталога: 26–30px → 40px. */
  .bistro-pill, .bistro-chip {
    min-height: 40px;
    padding-top: 10px;
    padding-bottom: 10px;
    box-sizing: border-box;
  }

  /* 3. Кнопки в шоуруме и каталоге добираются до 44px. */
  .bz-pano__btn, .bz-pano__bar-tab, .bz-pano__chip,
  .bistro-shop__more-btn, .hp-quick__submit {
    min-height: 44px;
    box-sizing: border-box;
  }

  /* 4. Ссылки и кнопки в шапке: высоту НЕ меняем — шапка фиксированной
        высоты, поедет вёрстка. Вместо этого расширяем область нажатия
        невидимым слоем: палец попадает, пиксели не двигаются. */
  .hp-nav__logo, .hp-nav__phone, .hp-nav__cta,
  .hp-hero__rating-link {
    position: relative;
  }
  .hp-nav__logo::after, .hp-nav__phone::after, .hp-nav__cta::after,
  .hp-hero__rating-link::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 44px;
    min-height: 100%;
  }

  /* 5. Длинные слова не должны распирать блоки на узком экране. */
  body { overflow-wrap: break-word; }
}

/* Аватарки под первым экраном налезают друг на друга отрицательным
   отступом. Он стоит и на первой — из-за этого вся плашка с рейтингом
   висела на 10 px левее колонки с заголовком и смотрелась криво. */
.hp-hero__rating-avatars > *:first-child {
  margin-left: 0;
}

/* На узком экране стрелки слайдера встают ровно на подпись
   «Автомобиль из Китая»: они привязаны к высоте картинки, а она
   на телефоне ниже. Отодвигаем текст, стрелки остаются в зазоре
   под фотографией. */
@media (max-width: 640px) {
  /* правило блока объявлено ниже по документу, поэтому берём по id */
  #hp-slider .hp-slider__body {
    padding-top: 48px;
  }
}