/*
 * Space reserved for the Hello Retail recommendation slider.
 *
 * The block is fetched over XHR after paint, so the empty placeholder has to hold
 * the height the rendered slider will take, otherwise everything below it is pushed
 * down when the recommendations arrive.
 *
 * Card image is a square that fills the card and stops growing at 240px, so on a
 * two-up slider it is (100vw - 128px) / 2. The constant on top of it covers the
 * block title, the slide paddings and the text block under the image.
 */
.uss-hello-retail-recommendation-placeholder,
.uss-hello-retail-slider {
    min-height: calc(min(240px, (100vw - 128px) / 2) + 330px);
}

@media (max-width: 479px) {
    .uss-hello-retail-recommendation-placeholder,
    .uss-hello-retail-slider {
        min-height: calc(min(240px, (100vw - 128px) / 2) + 365px);
    }
}

/*
 * The resizer keeps the source ratio, so the picture that lands is not always as tall
 * as the box the markup reserved. Locking the box keeps the card the same height
 * before and after the image loads.
 */
.uss-hello-retail-slider .uss-hello-retail-image {
    aspect-ratio: 1 / 1;
    height: auto;
}

/* Two lines keep the cards the same height whatever the product name is */
.uss-hello-retail-slider .product-item-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    min-height: 40px;
}