/*
    Block: Product Listing
    Note: Selectors must start with .block-product-listing
*/

@layer blocks {
    .block-product-listing .products-list {
        --cols: 1;
        display: -ms-grid;
        display: grid;
        grid-template-columns: repeat(var(--cols),1fr);
        gap: 5rem 1.25rem;

        margin: 0;
        padding: 0;
        list-style: none;
    }

    .block-product-listing .products-list:where(.cols-2) {
        --cols: 2;
    }
    
    .block-product-listing .products-list:where(.cols-3) {
        --cols: 3;
    }
    
    .block-product-listing .products-list:where(.cols-4) {
        --cols: 4;
    }

    .block-product-listing .product-card {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        gap: 2.5rem;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
    }
    
    .block-product-listing .product-card .image-wrapper {
        aspect-ratio: .919;
        overflow: hidden;
        background-color: #E9EAEB;
    }

    .block-product-listing .image-wrapper .product__image  {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
    }

    .block-product-listing .product__tagline {
        margin: 0;
    }

    .block-product-listing .product__title {
        margin-block: 1.875rem;
    }

    .block-product-listing .product__excerpt {
        margin: 0;
    }

    .block-product-listing .product__features {
        list-style: none;
        padding: 0;
        margin: 0;
        margin-top: 1.875rem;

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        gap: 0.875rem;
    }

    .block-product-listing .product__features li {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        gap: 0.625rem;
        font-weight: 500;
    }

    .block-product-listing .product__features li svg {
        color: var(--c-orange);
    }

    .block-product-listing .product-card .product__link {
        margin-top: auto;
    }

    @media screen and (width > 920px) {
        .block-product-listing .product-card {
            --transition-dur: 180ms;
            --transition-func: ease-in-out;
        }

        .block-product-listing .image-wrapper {
            -webkit-transition: background-color var(--transition-dur) var(--transition-func);
            transition: background-color var(--transition-dur) var(--transition-func);
        }

        .block-product-listing .image-wrapper .product__image {
            -webkit-transition: -webkit-transform var(--transition-dur) var(--transition-func);
            transition: -webkit-transform var(--transition-dur) var(--transition-func);
            transition: transform var(--transition-dur) var(--transition-func);
            transition: transform var(--transition-dur) var(--transition-func), -webkit-transform var(--transition-dur) var(--transition-func);
        }

        .block-product-listing .product-card:is(:hover, :focus-within) .image-wrapper {
            background-color: #00000005;
        }

        .block-product-listing .product-card:is(:hover, :focus-within) .image-wrapper .product__image {
            -webkit-transform: scale(1.03);
                -ms-transform: scale(1.03);
                    transform: scale(1.03);
        }
    }

    @media screen and (width <= 1024px) {
        .block-product-listing .products-list:where(.cols-4) {
            --cols: 3;
        }
    }

    @media screen and (width <= 920px) {
        .block-product-listing .products-list:where(.cols-3, .cols-4) {
            --cols: 2;
        }
    }

    @media screen and (width <= 620px) {
        .block-product-listing .products-list {
            --cols: 1;
            gap: 2.5rem;
        }
        .block-product-listing .product-card .image-wrapper img {
            aspect-ratio: 0.9;
        }
        .block-product-listing .product__title {
            margin-block: 1.375rem;
        }
        .block-product-listing .product__features li {
            gap: 0.375rem;
        }
        .block-product-listing .product__features {
            gap: 0.75rem;
            margin-top: 1.75rem;
        }
    }
}