/* iOS Image Fix - Safari Mobile */

/* Fix for images in containers on iPhone */
.container img,
.card img,
.product-image img,
img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Fix for product images specifically */
.product-card img,
.product-item img,
.product-thumbnail img {
    width: 100% !important;
    height: auto !important;
    max-height: 300px !important;
    object-fit: cover !important;
    display: block !important;
}

/* Fix for category images */
.category-card img,
.category-item img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
}

/* Fix for slider/carousel images on iOS */
.carousel img,
.slider img,
.swiper-slide img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

/* iOS Safari specific fixes */
@supports (-webkit-overflow-scrolling: touch) {
    img {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transform: translateZ(0) scale(1.0, 1.0);
        transform: translateZ(0) scale(1.0, 1.0);
    }
    
    .img-fluid,
    .img-responsive {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }
}

/* Fix for images inside flexbox on iOS */
.d-flex img,
.flex img,
.row img {
    flex-shrink: 0 !important;
    min-width: 0 !important;
}

/* Fix image container overflow */
.card-body,
.product-card,
.category-card {
    overflow: hidden !important;
}

.card-img-top,
.card-img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
}

/* Prevent image stretching on iOS */
picture,
picture img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
}

/* Fix for lazy loaded images */
img[loading="lazy"] {
    width: 100% !important;
    height: auto !important;
}

/* Safari iOS WebKit fix */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .container img,
    .card img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}