/* Product cards only. Clothing is portrait; other products keep the 4:3 frame. */
li.product.wsf-product-card {
    --wsf-card-image-ratio: 4 / 3;
    --wsf-card-image-padding: 75%;
}

li.product.wsf-product-card.wsf-portrait-card {
    --wsf-card-image-ratio: 3 / 4;
    --wsf-card-image-padding: 133.333333%;
}

li.product.wsf-product-card img.wsf-product-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: var(--wsf-card-image-ratio, 4 / 3);
    object-fit: contain;
    object-position: center;
    background-color: #fff;
    transform: none !important;
}

/* Woostify's image-only link; the standard Woo link also wraps title/price. */
li.product.wsf-product-card .product-loop-image-wrapper .woocommerce-loop-product__link {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: var(--wsf-card-image-ratio, 4 / 3);
    overflow: hidden;
    background-color: #fff;
}

li.product.wsf-product-card .product-loop-image-wrapper .woocommerce-loop-product__link img.wsf-product-image {
    position: absolute;
    inset: 0;
    height: 100%;
    margin: 0;
    aspect-ratio: auto;
}

li.product.wsf-product-card .product-loop-image-wrapper .product-loop-hover-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

@supports not (aspect-ratio: 4 / 3) {
    li.product.wsf-product-card .product-loop-image-wrapper .woocommerce-loop-product__link::before {
        content: "";
        display: block;
        padding-top: var(--wsf-card-image-padding, 75%);
    }
}