/*
 * Storefront-wide product photography ratio contract.
 *
 * Theme styles intentionally remain responsible for borders, colours and
 * animation. This file owns only the selected product image ratio and is
 * loaded after each theme stylesheet so fixed theme ratios cannot override
 * the merchant's Appearance setting.
 */
body[data-product-image-ratio="square"] {
    --storefront-product-image-ratio: 1 / 1;
    --storefront-product-image-fit: cover;
}

body[data-product-image-ratio="portrait"] {
    --storefront-product-image-ratio: 3 / 4;
    --storefront-product-image-fit: cover;
}

body[data-product-image-ratio="landscape"] {
    --storefront-product-image-ratio: 4 / 3;
    --storefront-product-image-fit: cover;
}

body[data-product-image-ratio="original"] {
    --storefront-product-image-ratio: auto;
    --storefront-product-image-fit: contain;
}

.storefront-product-card[data-image-ratio] .storefront-product-media {
    display: block;
    width: 100%;
    aspect-ratio: var(--storefront-product-image-ratio) !important;
    overflow: hidden;
}

.storefront-product-card[data-image-ratio] .storefront-product-media > .storefront-product-image:first-child {
    display: block;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: var(--storefront-product-image-ratio) !important;
    object-fit: var(--storefront-product-image-fit) !important;
}

body[data-product-image-ratio="original"] .storefront-product-card[data-image-ratio] .storefront-product-media,
body[data-product-image-ratio="original"] .storefront-product-card[data-image-ratio] .storefront-product-media > .storefront-product-image:first-child {
    aspect-ratio: auto !important;
    height: auto !important;
}

.storefront-product-gallery-main {
    width: 100%;
    aspect-ratio: var(--storefront-product-image-ratio) !important;
    overflow: hidden;
}

.storefront-product-gallery-main .swiper-wrapper,
.storefront-product-gallery-main .swiper-slide {
    height: 100% !important;
}

.storefront-product-gallery-main .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0 !important;
}

.storefront-product-gallery-main .storefront-product-gallery-image {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    aspect-ratio: var(--storefront-product-image-ratio) !important;
    object-fit: var(--storefront-product-image-fit) !important;
}

body[data-product-image-ratio="original"] .storefront-product-gallery-main {
    aspect-ratio: auto !important;
    overflow: hidden;
}

body[data-product-image-ratio="original"] .storefront-product-gallery-main .swiper-wrapper,
body[data-product-image-ratio="original"] .storefront-product-gallery-main .swiper-slide,
body[data-product-image-ratio="original"] .storefront-product-gallery-main .storefront-product-gallery-image {
    height: auto !important;
    aspect-ratio: auto !important;
}

body[data-product-image-ratio="original"] .storefront-product-gallery-main .storefront-product-gallery-image {
    object-fit: contain !important;
}