/*
 * Lane — горизонтальная лента карточек (замена owl.carousel v1, Фаза 3 / волна C3).
 * Используется в module/bestseller.tpl, module/latest.tpl, module/similar.tpl,
 * module/special.tpl, module/reviews.tpl, product/product.tpl (Сопутствующие товары).
 *
 * Разметка не менялась: тот же контейнер .box-product, тот же ребёнок <div class="item">.
 * Класс "owl-carousel" заменён на "lane" — в монолите (stylesheet.v1.38.css:3343)
 * `.owl-carousel{display:none}` держит блок скрытым до инициализации JS-плагина,
 * которого больше нет, поэтому старый класс с лентой несовместим.
 *
 * Специфичность .box-product.lane > .item (3 класса) выше монолитного
 * .box-product .item (2 класса) и .box-product > div:nth-child(4n) (класс+psevdo,
 * тоже 2) — переопределяет ширину/margin гарантированно, независимо от порядка
 * подключения файлов (в отличие от base.css, здесь можно не полагаться на cascade).
 *
 * items:4 везде, БЕЗ autoplay, БЕЗ видимых стрелок/точек (владелец: c-plan.md
 * "Волна 3", подтверждено A.10/A.3 — .box-content .owl-controlls{display:none}
 * в монолите). Раньше owl.carousel считал ширину карточки как containerWidth/4 —
 * на ≥1024px повторяем той же формулой (100% - 3 гэпа) / 4, визуальный паритет.
 */

.box-product.lane {
  display: flex;
  gap: 20px; /* было margin-right:20px на .item в монолите — тот же интервал */
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* старый Edge */
  padding-bottom: 4px; /* не даём скроллбар-желобу(если появится) прилипать к карточкам */
}

.box-product.lane::-webkit-scrollbar {
  display: none; /* Chrome/Safari — скроллбар скрыт, скролл жестом остаётся */
}

.box-product.lane > .item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  margin: 0; /* гасит margin-right/bottom .item и margin-right:0 у :nth-child(4n) монолита */
  width: clamp(180px, 65vw, 330px); /* мобайл/планшет: ~45-70vw, частичный пик следующей карточки */
}

@media (min-width: 1024px) {
  .box-product.lane > .item {
    width: calc((100% - 3 * 20px) / 4); /* 4 карточки в ряд — прежний вид */
  }
}

@media (prefers-reduced-motion: reduce) {
  .box-product.lane {
    scroll-behavior: auto;
  }
}