/* TANKZONE_CART_RECOMMENDATIONS_V1 */

.tz-cart-recommendations{
    padding-top:14px;
    border-top:1px solid #ddddD7;
}

.tz-cart-recommendations-heading{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:24px;
    margin-bottom:28px;
}

.tz-cart-recommendations-heading h2{
    margin:5px 0 7px;
    font-size:clamp(1.55rem,3vw,2.6rem);
    line-height:1.05;
}

.tz-cart-recommendations-heading p:last-child{
    margin:0;
    color:#777;
    font-size:.82rem;
}

.tz-cart-recommendations-all{
    flex:0 0 auto;
    color:#111;
    font-size:.72rem;
    font-weight:800;
    text-decoration:underline;
    text-underline-offset:4px;
}

.tz-cart-recommendations-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
}

.tz-cart-recommendations-grid .product-card{
    min-width:0;
}

.tz-cart-recommendations-grid .product-card-image{
    background:#e9e9e4;
}

.tz-cart-recommendations-grid .product-card-image img{
    object-fit:contain;
}

/*
 * Cart recommendation cards should feel compact; the user has already
 * made a purchasing decision and should not be pushed far away from
 * checkout.
 */
.tz-cart-recommendations-grid .product-card-copy{
    padding-top:12px;
}

.tz-cart-recommendations-grid .product-card h3{
    font-size:.88rem;
    margin-top:5px;
}

@media(max-width:900px){
    .tz-cart-recommendations-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:20px 10px;
    }
}

@media(max-width:640px){
    .tz-cart-recommendations{
        overflow:hidden;
        padding-top:8px;
    }

    .tz-cart-recommendations-heading{
        align-items:start;
        margin-bottom:18px;
        gap:12px;
    }

    .tz-cart-recommendations-heading h2{
        font-size:1.45rem;
    }

    .tz-cart-recommendations-heading p:last-child{
        font-size:.69rem;
        max-width:250px;
    }

    .tz-cart-recommendations-all{
        font-size:.64rem;
        margin-top:22px;
        white-space:nowrap;
    }

    /*
     * Horizontal rail on mobile:
     * recommendations are visible without making the cart page
     * excessively tall.
     */
    .tz-cart-recommendations-grid{
        display:flex;
        gap:10px;
        overflow-x:auto;
        overscroll-behavior-inline:contain;
        scroll-snap-type:x mandatory;
        padding:0 0 10px;
        scrollbar-width:none;
    }

    .tz-cart-recommendations-grid::-webkit-scrollbar{
        display:none;
    }

    .tz-cart-recommendations-grid > .product-card{
        flex:0 0 min(70vw,260px);
        scroll-snap-align:start;
    }

    .tz-cart-recommendations-grid .product-card-image{
        aspect-ratio:4/5;
    }
}