/* Start:/local/templates/truckservice/components/bitrix/news.list/catalog-slider/style.css?17872515372327*/
/* Категории техники на главной — статичная плитка (без карусели).
   16 категорий в ряд по 8 (два ряда). Переиспользуем оформление плиток и ховер
   из основной темы (.home-catalog-slide), а раскладку задаём своей сеткой.
   Селекторы из двух классов перебивают базовую ширину calc(20%…) и мобильные правила. */

.home-catalog-tiles {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}

.home-catalog-tiles .home-catalog-slide {
    width: auto;                 /* ширину колонки задаёт сетка — гасим базовый calc(20% - 40px) */
    padding: 16px 12px 18px;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 6px;
}

.home-catalog-tiles .home-catalog-slide__img {
    height: 110px;
    margin-top: auto;            /* картинка и подпись прижаты к низу — ряды выглядят ровно */
}

.home-catalog-tiles .home-catalog-slide__name {
    font-size: 14px;
    line-height: 1.2;
}

/* --- адаптив: плавно уменьшаем число колонок --- */
@media (max-width: 1400px) {
    .home-catalog-tiles {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {
    .home-catalog-tiles {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
    }

    .home-catalog-tiles .home-catalog-slide__img {
        height: 120px;
    }
}

@media (max-width: 640px) {
    .home-catalog-tiles {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    .home-catalog-tiles .home-catalog-slide {
        padding: 12px 8px 14px;
    }

    .home-catalog-tiles .home-catalog-slide__img {
        height: 92px;
    }

    .home-catalog-tiles .home-catalog-slide__name {
        font-size: 12px;
    }
}

@media (max-width: 420px) {
    .home-catalog-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-catalog-tiles .home-catalog-slide__img {
        height: 110px;
    }
}

/* End */


/* Start:/local/templates/truckservice/components/bitrix/news.list/dealer-logos/style.css?17884067152509*/
/* Лента логотипов в блоке «Официальный дилер»: едет по кругу без остановок,
   логотип у центра крупнее. Своя карусель на requestAnimationFrame —
   штатный loop в Swiper 11.0.5 на этой сборке залипает (проверено на ленте категорий). */

.dealer-logos {
    position: relative;
}

.dealer-logos__viewport {
    overflow: hidden;
    padding: 20px 0;
    /* мягкие края: лента будто уходит за пределы блока */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.dealer-logos__track {
    display: flex;
    align-items: center;
    gap: 40px;
    will-change: transform;
}

.dealer-logos__item {
    flex: 0 0 auto;
    width: 200px;
    height: 110px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transform-origin: center center;
}

/* кликабельный логотип: масштаб и прозрачность задаёт скрипт (inline-стилями),
   поэтому для отклика на наведение берём то, что скрипт не трогает */
a.dealer-logos__item {
    cursor: pointer;
}

@media (hover: hover) {
    a.dealer-logos__item img {
        transition: filter .25s ease;
    }

    a.dealer-logos__item:hover img {
        filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .28));
    }
}

.dealer-logos__item img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: none;
}

@media (max-width: 1024px) {
    .dealer-logos__track {
        gap: 28px;
    }

    .dealer-logos__item {
        width: 160px;
        height: 90px;
    }
}

@media (max-width: 480px) {
    .dealer-logos__viewport {
        padding: 12px 0;
    }

    .dealer-logos__track {
        gap: 20px;
    }

    .dealer-logos__item {
        width: 120px;
        height: 70px;
    }
}

/* если посетитель просил меньше движения — лента стоит, логотипы просто в ряд */
@media (prefers-reduced-motion: reduce) {
    .dealer-logos__viewport {
        overflow-x: auto;
    }
}

/* End */
/* /local/templates/truckservice/components/bitrix/news.list/catalog-slider/style.css?17872515372327 */
/* /local/templates/truckservice/components/bitrix/news.list/dealer-logos/style.css?17884067152509 */