/*
 * Product rail: a row of product cards to add alongside the page's own
 * purchase - the cart's cross-sell, the product pages' accessories. Below
 * 1024px a horizontal scroller that snaps card by card (it never pushes the
 * page's main action out of reach); from 1024px a grid. Decisions 22 and 23.
 */

.product-rail {
    display: grid;
    grid-auto-columns: minmax(13rem, 70%);
    grid-auto-flow: column;
    gap: var(--shop-space-3);
    margin: 0;
    padding: 0 0 var(--shop-space-2);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    /* proximity, not mandatory: a mandatory snap can refuse the small scroll a
       focused card needs to come fully into view. */
    scroll-snap-type: x proximity;
    list-style: none;
}

.product-rail > li {
    display: grid;
    scroll-snap-align: start;
}

@media (min-width: 1024px) {
    .product-rail {
        grid-auto-flow: row;
        grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
        grid-auto-columns: auto;
        overflow: visible;
    }
}