/*
 * Product long-description media.
 * Public classes are neutral; the body scope prevents collisions with theme or
 * third-party components that happen to use a similar generic class name.
 * Legacy selectors remain only for products rendered before normalization.
 */
body.single-product .product-content-media,
body.single-product .auto-product-pro-content-image {
    box-sizing: border-box;
    max-width: 100%;
    margin-block: clamp(1.25rem, 2.5vw, 2rem);
    margin-inline: auto;
}

body.single-product .product-content-media > img,
body.single-product .auto-product-pro-content-image > img,
body.single-product .auto-product-pro-content-image__media {
    display: block;
    max-width: 100%;
    height: auto;
    margin-inline: auto;
}

body.single-product .product-content-media-grid,
body.single-product .auto-product-pro-content-image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: clamp(0.875rem, 2vw, 1.5rem);
    margin-block: clamp(1.5rem, 3vw, 2.5rem);
}

body.single-product .product-content-media-grid .product-content-media,
body.single-product .auto-product-pro-content-image-grid .auto-product-pro-content-image {
    min-width: 0;
    margin: 0;
}

body.single-product .product-content-media-grid img,
body.single-product .auto-product-pro-content-image-grid img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}