/* A square card contains the entire focal rectangle; the original image is untouched. */
.woocommerce ul.products li.product a .ff-product-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    margin: 0 0 15px;
    border-radius: 4px;
    background: #e8ebee;
}
.woocommerce ul.products li.product a .ff-product-frame__viewport {
    position: relative;
    display: block;
    flex: none;
    width: var(--ff-frame-width);
    aspect-ratio: var(--ff-frame-ratio);
    overflow: hidden;
}
.woocommerce ul.products li.product a .ff-product-frame img.ff-product-frame__image {
    position: absolute;
    display: block;
    width: var(--ff-image-width);
    height: var(--ff-image-height);
    left: var(--ff-image-left);
    top: var(--ff-image-top);
    max-width: none;
    max-height: none;
    aspect-ratio: auto;
    object-fit: fill;
    margin: 0;
    border-radius: 0;
    background: transparent;
}

/* Keep the native gallery anchor and image attributes for the full-size lightbox. */
.woocommerce div.product div.images .woocommerce-product-gallery__image a .ff-single-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 5px;
    background: #e9eaf0;
}
.woocommerce div.product div.images .ff-single-frame__viewport {
    position: relative;
    display: block;
    flex: none;
    width: var(--ff-frame-width);
    aspect-ratio: var(--ff-frame-ratio);
    overflow: hidden;
}
.woocommerce div.product div.images .ff-single-frame img.ff-single-frame__image {
    position: absolute;
    display: block;
    width: var(--ff-image-width);
    height: var(--ff-image-height);
    left: var(--ff-image-left);
    top: var(--ff-image-top);
    max-width: none;
    max-height: none;
    aspect-ratio: auto;
    object-fit: fill;
    margin: 0;
    border-radius: 0;
    background: transparent;
}