/* /assets/css/product-shelves.css
 *
 * Плоские карусели-ленты под карточкой товара.
 *
 * Задача: показать много карточек в одну строку с горизонтальной прокруткой,
 * а не сеткой 6×N. Покупатель листает ленту стрелками или пальцем, страница
 * при этом не растягивается на несколько экранов вниз.
 *
 * Стрелки стоят по КРАЯМ ленты и лежат поверх карточек: так они всегда рядом
 * с тем, что листают. В заголовке справа они смотрелись отдельно от ленты и
 * на широком экране оказывались далеко от места клика.
 *
 * Почему отдельный файл: правила касаются только карточки товара. Держать
 * их в main.css рядом с общими сетками — значит грузить их на всех
 * страницах сайта, где полок нет.
 */

.shelf-ribbon {
    position: relative;
}

.shelf-ribbon__track {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding: 4px 0 14px;
    /* Скрываем системный скроллбар: листаем стрелками и свайпом. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.shelf-ribbon__track::-webkit-scrollbar {
    display: none;
}

.shelf-ribbon__item {
    flex: 0 0 calc((100% - 5 * 18px) / 6);
    max-width: calc((100% - 5 * 18px) / 6);
    scroll-snap-align: start;
}

/* Карточка внутри ленты не должна тянуться на всю ширину трека. */
.shelf-ribbon__item .product-card {
    height: 100%;
}

/* ─── Стрелки по краям ленты ───────────────────────────────────────────── */

.shelf-arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 44px;
    height: 44px;
    margin-top: -30px;
    border: 1px solid rgba(20, 20, 20, 0.12);
    border-radius: 50%;
    background: var(--white, #fff);
    color: var(--ink, #141414);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(20, 20, 20, 0.14);
    transition: background 0.16s ease, color 0.16s ease, opacity 0.16s ease;
}

.shelf-arrow:hover:not(:disabled) {
    background: var(--ink, #141414);
    color: var(--white, #fff);
}

.shelf-arrow:disabled {
    opacity: 0;
    pointer-events: none;
}

/* Стрелки внутри ленты, а не за её краем: контейнер не выходит за поля
 * страницы, и вынесенная наружу стрелка обрезалась бы или уезжала за экран. */
.shelf-arrow--prev {
    left: 8px;
}

.shelf-arrow--next {
    right: 8px;
}

/* ─── Мобильные ────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
    .shelf-ribbon__item {
        flex-basis: calc((100% - 4 * 14px) / 5);
        max-width: calc((100% - 4 * 14px) / 5);
    }

    .shelf-ribbon__track {
        gap: 14px;
    }
}

@media (max-width: 900px) {
    .shelf-ribbon__item {
        flex-basis: calc((100% - 3 * 12px) / 4);
        max-width: calc((100% - 3 * 12px) / 4);
    }

    .shelf-ribbon__track {
        gap: 12px;
        padding: 4px 0 12px;
    }

    /* На тач-устройствах стрелки не нужны — листают свайпом. */
    .shelf-arrow {
        display: none;
    }
}

@media (max-width: 620px) {
    .shelf-ribbon__item {
        flex-basis: calc((100% - 2 * 10px) / 3);
        max-width: calc((100% - 2 * 10px) / 3);
    }

    .shelf-ribbon__track {
        gap: 10px;
    }
}

@media (max-width: 440px) {
    .shelf-ribbon__item {
        flex-basis: calc((100% - 10px) / 2);
        max-width: calc((100% - 10px) / 2);
    }
}