/**
 * Cardongy Apple WebKit compatibility fixes.
 *
 * Intentionally scoped to touch WebKit at mobile/tablet widths so the
 * existing Android and desktop layout remains unchanged.
 */
@supports (-webkit-touch-callout: none) {

    /*
     * iPhone / iPad product gallery.
     * Safari can resolve max-height:100% inside an aspect-ratio flex box
     * differently from Chromium. Let the image keep its intrinsic ratio.
     */
    @media (hover: none) and (pointer: coarse) and (max-width: 1180px) {
        .single-product .cg-main-image,
        body.single-product .cg-main-image {
            aspect-ratio: auto !important;
            height: auto !important;
            min-height: 0 !important;
            overflow: hidden;
        }

        .single-product .cg-main-image #cgMainImg,
        body.single-product .cg-main-image #cgMainImg {
            display: block !important;
            width: 100% !important;
            height: auto !important;
            max-width: 100% !important;
            max-height: none !important;
            object-fit: contain !important;
            object-position: center center !important;
            transform: none !important;
        }

        /* Hover zoom has no useful role on touch Safari. */
        .single-product .cg-main-image:hover #cgMainImg,
        body.single-product .cg-main-image:hover #cgMainImg {
            transform: none !important;
        }
    }

}