/* ==========================================================
   ТОЧЕЧНЫЕ ПРАВКИ ДИЗАЙНА
   Подключить после style.css:
   <link href="/assets/css/custom-fixes.css" rel="stylesheet">
   ========================================================== */

/* 1. ФОТО КАНЬЕ обрезается криво — контейнер вообще без размеров.
   Задаём чёткую высоту и object-fit, чтобы кроп был управляемым. */
.callback__banner {
  max-height: 520px;
  width: 100%;
  object-fit: contain;
  object-position: bottom;
  display: block;
}

/* 2. КАРТОЧКИ ТОВАРА в сетке — фото маленькое (156px) в большом
   пустом контейнере (334px) — сетка выглядит "разреженной".
   Увеличиваем фото, чуть уменьшаем лишний воздух. */
.cart__products {
  width: 260px;
  height: 300px; /* было 334px */
}
.img__cart {
  max-height: 210px; /* было 156px */
  width: 100%;
  object-fit: contain;
}
.cart__name {
  padding-top: 16px; /* было 29px — меньше пустоты после увеличения фото */
}

/* 3. Более плотная сетка карточек — меньше зазоров по вертикали
   между рядами товаров в каталоге и на главной ("ТОП ПРОДАЖ"). */
.product__container {
  row-gap: 24px; /* явный контроль, вместо накопленных верт. отступов */
}

/* 4. ХИРО-БАННЕР: заголовок и цена слишком разъезжаются по высоте/
   пустоте между ними. Слегка подтягиваем блок с ценой ближе к центру
   по вертикали, чтобы не было ощущения "оторванности". */
.banner__text {
  top: 12%; /* было 5% — уравновешивает пустоту сверху */
}

/* 5. Зачёркнутая цена на хиро без актуальной цены рядом читается
   как баг. Если у зачёркнутой цены есть класс — оформляем её явно
   отличным от акцентной цены цветом/размером (пример, класс может
   отличаться в разметке — проверить фактический класс элемента). */
.slider__title-text del,
.slider__title-text s {
  color: #9a9a9a;
  font-size: 0.6em;
  font-weight: 400;
  margin-right: 8px;
}

/* 6. Иерархия заголовков разделов — сейчас всё одинаковым весом.
   Немного разводим "продающие" H2 и служебные подзаголовки. */
.top__sales-title,
.items__title-faq {
  font-size: 34px; /* было 30px */
}
