/* ===================================
   IMAGE OVERFLOW FIXES
   ===================================
   This file fixes image overlapping issues caused by object-fit: cover
   Use this to override problematic image styling
   
   IMPORTANT: This CSS is designed to be conservative and preserve
   existing mobile responsive behavior. It only fixes the specific
   object-fit: cover issue without breaking responsive layouts.
*/

/* Fix for cart item images */
.tf-cart-item .tf-cart-item_product .img-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; /* Changed from cover to contain */
    object-position: center !important;
    border-radius: 8px;
    transition: all 0.3s ease;
}

/* Fix for ALL product list images - Main fix */
.card-product .card-product-wrapper img,
.card-product .product-img img,
.card-product img,
.tf-grid-layout .card-product img,
.tf-list-layout .card-product img {
    /* Preserve original responsive sizing */
    width: 100% !important;
    height: 100% !important;
    /* Only change object-fit to prevent cropping */
    object-fit: contain !important; /* Changed from cover to contain */
    object-position: center !important;
    /* Add subtle styling without breaking layout */
    border-radius: 4px;
    transition: all 0.3s ease;
    /* Ensure images don't overflow but preserve responsive behavior */
}

/* Alternative: Keep object-fit: cover but fix container overflow */
.tf-cart-item .tf-cart-item_product .img-box {
    overflow: hidden !important;
    border-radius: 8px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Container fixes for ALL product list images */
.card-product .card-product-wrapper,
.card-product .product-img,
.card-product .card-product-wrapper .img-hover,
.tf-grid-layout .card-product .card-product-wrapper,
.tf-list-layout .card-product .card-product-wrapper {
    /* Only fix overflow, preserve original layout */
    overflow: hidden !important;
    /* Keep original positioning and display */
    position: relative;
    /* Don't change display or alignment to preserve responsive behavior */
}

/* Product detail page image fixes */
.tf-product-media-thumbs img,
.tf-product-media-main img,
.quickView-item img,
.tf-product-info-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: 8px;
    transition: all 0.3s ease;
}

/* Container fixes for product images */
.tf-product-media-thumbs .swiper-slide,
.tf-product-media-main .swiper-slide,
.quickView-item,
.tf-product-info-item .image {
    overflow: hidden !important;
    border-radius: 8px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Responsive image sizing - prevents overflow */
.tf-product-media-thumbs .swiper-slide img,
.tf-product-media-main .swiper-slide img,
.quickView-item img,
.tf-product-info-item .image img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
}

/* Enhanced hover effects */
.tf-product-media-thumbs img:hover,
.tf-product-media-main img:hover,
.quickView-item img:hover,
.tf-product-info-item .image img:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

/* Fix for any other problematic image containers */
[class*="img-box"] img,
[class*="product-img"] img,
[class*="cart-item"] img {
    object-fit: contain !important;
    object-position: center !important;
    max-width: 100% !important;
    max-height: 100% !important;
}

/* Container overflow fixes */
[class*="img-box"],
[class*="product-img"],
[class*="cart-item"] {
    overflow: hidden !important;
    border-radius: 8px;
    position: relative;
}

/* Responsive breakpoints for better mobile experience */
@media (max-width: 768px) {
    .tf-cart-item .tf-cart-item_product .img-box img,
    .tf-product-media-thumbs img,
    .tf-product-media-main img,
    .quickView-item img,
    .tf-product-info-item img {
        object-fit: contain !important;
        width: 100% !important;
        height: auto !important;
    }
    
    .tf-cart-item .tf-cart-item_product .img-box,
    .tf-product-media-thumbs .swiper-slide,
    .tf-product-media-main .swiper-slide,
    .quickView-item,
    .tf-product-info-item .image {
        height: auto !important;
        min-height: 200px;
    }
    
    /* Mobile fixes for product list images - Preserving original responsive behavior */
    .card-product .card-product-wrapper img,
    .card-product .product-img img,
    .card-product img {
        object-fit: contain !important;
        /* Keep original responsive sizing */
        width: 100% !important;
        height: 100% !important;
        /* Don't override max-height to preserve mobile layout */
    }
    
    /* Only fix overflow, don't change container dimensions */
    .card-product .card-product-wrapper,
    .card-product .product-img {
        overflow: hidden !important;
        /* Preserve original height and responsive behavior */
    }
}

/* High DPI display fixes */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .tf-cart-item .tf-cart-item_product .img-box img,
    .tf-product-media-thumbs img,
    .tf-product-media-main img,
    .quickView-item img,
    .tf-product-info-item img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* ===================================
   MOBILE RESPONSIVE PRESERVATION
   ===================================
   These rules ensure we don't break existing mobile responsive behavior
*/

/* Preserve original grid/list layout responsive behavior */
@media (max-width: 1200px) {
    .tf-grid-layout .card-product,
    .tf-list-layout .card-product {
        /* Keep original responsive sizing */
        width: 100% !important;
    }
}

@media (max-width: 768px) {
    .tf-grid-layout .card-product,
    .tf-list-layout .card-product {
        /* Preserve mobile grid/list behavior */
        margin-bottom: 20px !important;
    }
    
    /* Only fix image overflow, don't change container dimensions */
    .card-product .card-product-wrapper img {
        object-fit: contain !important;
        /* Keep original responsive sizing */
        width: 100% !important;
        height: 100% !important;
    }
}

@media (max-width: 576px) {
    /* Ensure small mobile devices maintain original layout */
    .card-product .card-product-wrapper,
    .card-product .product-img {
        /* Only fix overflow, preserve original dimensions */
        overflow: hidden !important;
        /* Don't override height/width to maintain responsive grid */
    }
}