/*
 * Слайдер товарных полос главной страницы.
 * Механика и расположение стрелок повторяют shopscorpion redesign-games-strip.
 * Карточки на <=1100 px используют ту же ширину, что и сразу после breakpoint 861 px.
 */

.home-products-slider {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/*
 * После удаления старого data-product-slider прежний JS больше не выставляет
 * is-centered-row. Короткие полосы теперь центрируются напрямую, пока реального
 * горизонтального переполнения нет.
 */
.home-products-slider:not(.is-scrollable) .home-products-track {
    justify-content: center !important;
}

.home-products-slider.is-scrollable {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    align-items: center;
    column-gap: 14px;
    overflow: visible !important;
}

.home-products-slider.is-scrollable .home-products-track {
    grid-column: 2;
    grid-row: 1;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    touch-action: auto;
    overscroll-behavior-x: contain;
    user-select: none;
    -webkit-user-select: none;
}

.home-products-slider.is-scrollable .home-products-track::-webkit-scrollbar,
.home-products-slider.is-scrollable .home-products-track::-webkit-scrollbar-track,
.home-products-slider.is-scrollable .home-products-track::-webkit-scrollbar-thumb {
    display: none;
    width: 0;
    height: 0;
    background: transparent;
}

.home-products-slider.is-scrollable .home-products-track.dragging {
    cursor: grabbing;
    scroll-behavior: auto !important;
}

.home-products-slider.is-scrollable .home-products-track.dragging * {
    user-select: none !important;
    pointer-events: none !important;
}

.home-products-slider .redesign-games-arrow {
    position: static;
    z-index: 5;
    width: 34px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0 4px;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    color: rgba(255,255,255,.82);
    box-shadow: none !important;
    font-size: 42px;
    line-height: 1;
    cursor: pointer;
    transform: none;
    transition: color .18s ease, opacity .18s ease, transform .18s ease;
}

.home-products-slider.is-scrollable .redesign-games-arrow-left {
    grid-column: 1;
    grid-row: 1;
}

.home-products-slider.is-scrollable .redesign-games-arrow-right {
    grid-column: 3;
    grid-row: 1;
}

@media (hover: hover) and (pointer: fine) {
    .home-products-slider .redesign-games-arrow:hover:not(:disabled) {
        background: transparent !important;
        color: #d92fff;
        transform: scale(1.12);
    }
}

.home-products-slider .redesign-games-arrow:focus,
.home-products-slider .redesign-games-arrow:focus-visible {
    outline: none;
    color: rgba(255,255,255,.82);
    background: transparent !important;
    box-shadow: none !important;
}

.home-products-slider .redesign-games-arrow:disabled {
    opacity: .22;
    cursor: default;
    transform: none;
}

.home-products-slider .redesign-games-arrow[hidden] {
    display: none !important;
}

/*
 * 1100 px и меньше:
 * - каждая обычная категория занимает всю доступную ширину;
 * - ряд карточек всегда flex, поэтому старые mobile-grid правила его не перебивают;
 * - ширина карточки 210 px — это фактический min-width карточки на 861 px;
 * - если карточки помещаются, они стоят по центру; если нет — JS включает слайдер.
 *
 * Открытую пользователем категорию не затрагиваем: она сохраняет существующую
 * многострочную раскладку полного каталога.
 */
@media (max-width: 1100px) {
    .home-catalog-layout:not(.is-category-focused) .home-catalog-row > .home-product-section,
    .home-catalog-layout:not(.is-category-focused) > .home-product-section {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        justify-self: stretch !important;
    }

    .home-catalog-layout:not(.is-category-focused) .home-catalog-row > .home-product-section > .home-products-slider,
    .home-catalog-layout:not(.is-category-focused) > .home-product-section > .home-products-slider,
    .home-catalog-layout:not(.is-category-focused) .home-catalog-row > .home-product-section.is-mobile-single-section > .home-products-slider,
    .home-catalog-layout:not(.is-category-focused) > .home-product-section.is-mobile-single-section > .home-products-slider {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .home-catalog-layout:not(.is-category-focused) .home-product-section .home-products-track,
    .home-catalog-layout:not(.is-category-focused) .home-product-section.is-mobile-single-section .home-products-track {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: center !important;
        grid-template-columns: none !important;
        gap: 16px !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .home-catalog-layout:not(.is-category-focused) .home-product-section .home-products-track > .product-card,
    .home-catalog-layout:not(.is-category-focused) .home-product-section.is-mobile-single-section .home-products-track > .product-card,
    .home-catalog-layout:not(.is-category-focused) .home-product-section .home-products-track > .product-card:last-child:nth-child(odd) {
        grid-column: auto !important;
        justify-self: auto !important;
        flex: 0 0 210px !important;
        width: 210px !important;
        min-width: 210px !important;
        max-width: 210px !important;
    }

    .home-catalog-layout:not(.is-category-focused) .home-products-slider.is-scrollable .home-products-track,
    .home-catalog-layout:not(.is-category-focused) .home-product-section.is-mobile-single-section .home-products-slider.is-scrollable .home-products-track {
        justify-content: flex-start !important;
    }
}

/*
 * На телефоне расположение элементов повторяет shopscorpion:
 * сама лента остаётся горизонтальной, touch использует нативный momentum-scroll,
 * а при ширине <=520 px стрелки уходят под карточки.
 */
@media (max-width: 520px) {
    .home-products-slider.is-scrollable {
        grid-template-columns: 1fr auto 16px auto 1fr;
        grid-template-rows: auto auto;
        column-gap: 0;
        row-gap: 8px;
    }

    .home-products-slider.is-scrollable .home-products-track {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .home-products-slider.is-scrollable .redesign-games-arrow-left {
        grid-column: 2;
        grid-row: 2;
    }

    .home-products-slider.is-scrollable .redesign-games-arrow-right {
        grid-column: 4;
        grid-row: 2;
    }

    .home-products-slider .redesign-games-arrow {
        width: 38px;
        height: 36px;
        padding-bottom: 3px;
        font-size: 36px;
    }
}

/*
 * Случайная лента товаров на странице игры.
 * Использует ту же механику data-home-shop-carousel, что и полосы каталога,
 * но не зависит от home-catalog-layout и поэтому остаётся горизонтальной
 * на всех разрешениях.
 */
.game-related-products {
    min-width: 0;
    margin-top: 28px;
}

.game-related-products .game-related-products-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 16px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

.game-related-products .home-products-slider.is-scrollable .game-related-products-track {
    justify-content: flex-start !important;
}

.game-related-products .game-related-products-track > .product-card {
    flex: 0 0 calc((100% - 64px) / 5) !important;
    width: calc((100% - 64px) / 5) !important;
    min-width: 0 !important;
    max-width: calc((100% - 64px) / 5) !important;
    margin: 0 !important;
}

@media (max-width: 1100px) {
    .game-related-products .game-related-products-track > .product-card {
        flex: 0 0 210px !important;
        width: 210px !important;
        min-width: 210px !important;
        max-width: 210px !important;
    }
}


.game-related-products .game-related-loader {
    min-height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    opacity: .72;
    font-size: 14px;
}

.game-related-products[data-related-load-state="ready"] .game-related-loader,
.game-related-products[data-related-load-state="empty"] .game-related-loader {
    display: none;
}