/* NUCLEAR PRODUCT IMAGE OVERRIDE - MAXIMUM SPECIFICITY */
/* This file loads LAST and overrides ALL other CSS with maximum specificity */
/* Target: Fix product card image cropping on homepage and shop page */

/* ======================================== */
/* SHOP PAGE SPECIFIC OVERRIDES */
/* ======================================== */

/* Target shop page specific classes */
html body .card-image-container,
html body .card-image-container .product-image-slider,
html body .card-image-container .product-image-slider .product-image,
html body .flipkart-card .card-image-container,
html body .flipkart-card .card-image-container .product-image-slider,
html body .flipkart-card .card-image-container .product-image-slider .product-image {
    /* Container settings - CONTAIN IMAGES PROPERLY */
    position: relative !important;
    width: 100% !important;
    height: 220px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    outline: none !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #f8f9fa !important;
    text-align: center !important;
    /* FORCE CONTAINMENT */
    max-width: 100% !important;
    max-height: 220px !important;
}

/* Shop page images */
html body .card-image-container .product-image,
html body .flipkart-card .card-image-container .product-image,
html body .product-image-slider .product-image {
    /* Image settings - CONTAIN WITHIN CARD */
    object-fit: scale-down !important;
    object-position: center !important;
    width: 100% !important;
    height: auto !important;
    max-height: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    outline: none !important;
    box-sizing: border-box !important;
    display: block !important;
    background-color: transparent !important;
    position: relative !important;
    transition: transform 0.3s ease !important;
    /* FORCE VISIBILITY - Override any opacity settings */
    opacity: 1 !important;
    visibility: visible !important;
    /* FORCE CONTAINMENT - Prevent images from breaking out */
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: none !important;
}

/* ======================================== */
/* NUCLEAR OVERRIDE - MAXIMUM SPECIFICITY */
/* ======================================== */

/* Override ALL product images with maximum specificity */
html body div.product-image-slider a img.card-img-top.product-image,
html body div.product-image-container a img.card-img-top.product-image,
html body .product-card img.card-img-top.product-image,
html body .latest-arrivals .product-card img.card-img-top.product-image,
html body .our-amazing-products .product-card img.card-img-top.product-image,
html body #latest-arrivals-section .product-card img.card-img-top.product-image,
html body #products-showcase-section .product-card img.card-img-top.product-image,
html body .shop .product-card img.card-img-top.product-image,
html body .products-grid .product-card img.card-img-top.product-image,
html body .latest-arrivals-product-card img.card-img-top.product-image,
html body .custom-product-section .product-card img.card-img-top.product-image,
html body .featured-products .product-card img.card-img-top.product-image {
    /* NUCLEAR OVERRIDE - These styles will override EVERYTHING */
    object-fit: scale-down !important;
    object-position: center !important;
    width: 100% !important;
    height: auto !important;
    max-height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    outline: none !important;
    box-sizing: border-box !important;
    display: block !important;
    background-color: transparent !important;
    position: relative !important;
    transition: transform 0.3s ease !important;
    /* FORCE VISIBILITY - Override any opacity settings */
    opacity: 1 !important;
    visibility: visible !important;
}

/* Override containers with maximum specificity */
html body div.product-image-slider,
html body div.product-image-container,
html body .product-card .product-image-slider,
html body .product-card .product-image-container,
html body .latest-arrivals .product-image-slider,
html body .latest-arrivals .product-image-container,
html body .our-amazing-products .product-image-slider,
html body .our-amazing-products .product-image-container,
html body #latest-arrivals-section .product-image-slider,
html body #latest-arrivals-section .product-image-container,
html body #products-showcase-section .product-image-slider,
html body #products-showcase-section .product-image-container,
html body .shop .product-image-slider,
html body .shop .product-image-container,
html body .products-grid .product-image-slider,
html body .products-grid .product-image-container,
html body .latest-arrivals-product-card .product-image-slider,
html body .latest-arrivals-product-card .product-image-container,
html body .custom-product-section .product-image-slider,
html body .custom-product-section .product-image-container,
html body .featured-products .product-image-slider,
html body .featured-products .product-image-container {
    /* Container settings - FIXED HEIGHT FOR CONSISTENCY */
    position: relative !important;
    width: 100% !important;
    height: 220px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    outline: none !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #f8f9fa !important;
    text-align: center !important;
}

/* Override link wrappers */
html body div.product-image-slider a,
html body div.product-image-container a,
html body .product-card .product-image-slider a,
html body .product-card .product-image-container a,
html body .latest-arrivals .product-image-slider a,
html body .latest-arrivals .product-image-container a,
html body .our-amazing-products .product-image-slider a,
html body .our-amazing-products .product-image-container a,
html body #latest-arrivals-section .product-image-slider a,
html body #latest-arrivals-section .product-image-container a,
html body #products-showcase-section .product-image-slider a,
html body #products-showcase-section .product-image-container a,
html body .shop .product-image-slider a,
html body .shop .product-image-container a,
html body .products-grid .product-image-slider a,
html body .products-grid .product-image-container a,
html body .latest-arrivals-product-card .product-image-slider a,
html body .latest-arrivals-product-card .product-image-container a,
html body .custom-product-section .product-image-slider a,
html body .custom-product-section .product-image-container a,
html body .featured-products .product-image-slider a,
html body .featured-products .product-image-container a {
    /* Link wrapper settings */
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    outline: none !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
}

/* Override product cards */
html body .product-card,
html body .latest-arrivals .product-card,
html body .our-amazing-products .product-card,
html body #latest-arrivals-section .product-card,
html body #products-showcase-section .product-card,
html body .shop .product-card,
html body .products-grid .product-card,
html body .latest-arrivals-product-card,
html body .custom-product-section .product-card,
html body .featured-products .product-card {
    /* Card settings */
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    outline: none !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border-radius: 8px !important;
    max-width: 280px !important;
    margin: 0 auto !important;
}

/* Shop page flipkart-card specific overrides */
html body .flipkart-card {
    /* Card settings - CONTAIN IMAGES PROPERLY */
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    outline: none !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border-radius: 8px !important;
    max-width: 280px !important;
    margin: 0 auto !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    /* FORCE CONTAINMENT */
    max-height: none !important;
}

/* ======================================== */
/* INLINE STYLE OVERRIDES - MAXIMUM POWER */
/* ======================================== */

/* Override inline opacity styles that hide images */
img[style*="opacity: 0"],
img[style*="opacity:0"],
img[style*="opacity: 0;"],
img[style*="opacity:0;"] {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Override any inline styles with maximum specificity */
html body img[style*="object-fit: cover"],
html body img[style*="object-fit: fill"],
html body img[style*="object-fit: contain"] {
    object-fit: scale-down !important;
}

html body img[style*="height: 100%"] {
    height: auto !important;
    max-height: 100% !important;
}

html body img[style*="padding:"] {
    padding: 0 !important;
}

html body div[style*="padding:"] img {
    padding: 0 !important;
}

/* ======================================== */
/* RESPONSIVE OVERRIDES - MAXIMUM SPECIFICITY */
/* ======================================== */

/* Mobile overrides - MAINTAIN CONSISTENT HEIGHTS */
@media (max-width: 768px) {
    /* Shop page specific */
    html body .card-image-container,
    html body .flipkart-card .card-image-container,
    html body .card-image-container .product-image-slider,
    html body .flipkart-card .card-image-container .product-image-slider {
        height: 180px !important;
    }
    
    /* Homepage and other sections */
    html body div.product-image-slider,
    html body div.product-image-container,
    html body .product-card .product-image-slider,
    html body .product-card .product-image-container,
    html body .latest-arrivals .product-image-slider,
    html body .latest-arrivals .product-image-container,
    html body .our-amazing-products .product-image-slider,
    html body .our-amazing-products .product-image-container,
    html body #latest-arrivals-section .product-image-slider,
    html body #latest-arrivals-section .product-image-container,
    html body #products-showcase-section .product-image-slider,
    html body #products-showcase-section .product-image-container,
    html body .shop .product-image-slider,
    html body .shop .product-image-container,
    html body .products-grid .product-image-slider,
    html body .products-grid .product-image-container,
    html body .latest-arrivals-product-card .product-image-slider,
    html body .latest-arrivals-product-card .product-image-container,
    html body .custom-product-section .product-image-slider,
    html body .custom-product-section .product-image-container,
    html body .featured-products .product-image-slider,
    html body .featured-products .product-image-container {
        height: 180px !important;
    }
}

@media (max-width: 576px) {
    /* Shop page specific */
    html body .card-image-container,
    html body .flipkart-card .card-image-container,
    html body .card-image-container .product-image-slider,
    html body .flipkart-card .card-image-container .product-image-slider {
        height: 160px !important;
    }
    
    /* Homepage and other sections */
    html body div.product-image-slider,
    html body div.product-image-container,
    html body .product-card .product-image-slider,
    html body .product-card .product-image-container,
    html body .latest-arrivals .product-image-slider,
    html body .latest-arrivals .product-image-container,
    html body .our-amazing-products .product-image-slider,
    html body .our-amazing-products .product-image-container,
    html body #latest-arrivals-section .product-image-slider,
    html body #latest-arrivals-section .product-image-container,
    html body #products-showcase-section .product-image-slider,
    html body #products-showcase-section .product-image-container,
    html body .shop .product-image-slider,
    html body .shop .product-image-container,
    html body .products-grid .product-image-slider,
    html body .products-grid .product-image-container,
    html body .latest-arrivals-product-card .product-image-slider,
    html body .latest-arrivals-product-card .product-image-container,
    html body .custom-product-section .product-image-slider,
    html body .custom-product-section .product-image-container,
    html body .featured-products .product-image-slider,
    html body .featured-products .product-image-container {
        height: 160px !important;
    }
}

@media (max-width: 375px) {
    /* Shop page specific */
    html body .card-image-container,
    html body .flipkart-card .card-image-container,
    html body .card-image-container .product-image-slider,
    html body .flipkart-card .card-image-container .product-image-slider {
        height: 140px !important;
    }
    
    /* Homepage and other sections */
    html body div.product-image-slider,
    html body div.product-image-container,
    html body .product-card .product-image-slider,
    html body .product-card .product-image-container,
    html body .latest-arrivals .product-image-slider,
    html body .latest-arrivals .product-image-container,
    html body .our-amazing-products .product-image-slider,
    html body .our-amazing-products .product-image-container,
    html body #latest-arrivals-section .product-image-slider,
    html body #latest-arrivals-section .product-image-container,
    html body #products-showcase-section .product-image-slider,
    html body #products-showcase-section .product-image-container,
    html body .shop .product-image-slider,
    html body .shop .product-image-container,
    html body .products-grid .product-image-slider,
    html body .products-grid .product-image-container,
    html body .latest-arrivals-product-card .product-image-slider,
    html body .latest-arrivals-product-card .product-image-container,
    html body .custom-product-section .product-image-slider,
    html body .custom-product-section .product-image-container,
    html body .featured-products .product-image-slider,
    html body .featured-products .product-image-container {
        height: 140px !important;
    }
}

/* ======================================== */
/* FINAL NUCLEAR OVERRIDE - ABSOLUTE MAXIMUM */
/* ======================================== */

/* This is the final override that will definitely work */
html body * img[class*="product"],
html body * img[class*="card-img"],
html body * img[alt*="product"],
html body * img[alt*="Product"],
html body * div[class*="product"] img,
html body * div[class*="image"] img,
html body * a[href*="product"] img {
    object-fit: scale-down !important;
    object-position: center !important;
    width: 100% !important;
    height: auto !important;
    max-height: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    outline: none !important;
    box-sizing: border-box !important;
    display: block !important;
    background-color: transparent !important;
    position: relative !important;
    /* FORCE VISIBILITY AND CONTAINMENT */
    opacity: 1 !important;
    visibility: visible !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: none !important;
}

/* ======================================== */
/* OVERRIDE SHOP PAGE SPECIFIC OPACITY RULES */
/* ======================================== */

/* Override the specific opacity rules from products.blade.php */
html body .product-image,
html body .product-image.active,
html body .card-image-container .product-image,
html body .card-image-container .product-image.active,
html body .flipkart-card .product-image,
html body .flipkart-card .product-image.active,
html body .product-image-slider .product-image,
html body .product-image-slider .product-image.active {
    /* FORCE ALL IMAGES TO BE VISIBLE */
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: 100% !important;
    max-width: 100% !important;
    object-fit: scale-down !important;
    object-position: center !important;
    display: block !important;
    background-color: transparent !important;
    mix-blend-mode: normal !important;
    transition: none !important;
}

/* ======================================== */
/* DEBUGGING HELPERS */
/* ======================================== */

/* Uncomment these for debugging - they add visible borders */
/*
html body .product-card {
    border: 3px solid red !important;
}

html body .product-card img {
    border: 3px solid blue !important;
}

html body .product-image-container {
    border: 3px solid green !important;
}
*/

    width: 100% !important;
    height: auto !important;
    max-height: 100% !important;
    max-width: 100% !important;
    object-fit: scale-down !important;
    object-position: center !important;
    display: block !important;
    background-color: transparent !important;
    mix-blend-mode: normal !important;
    transition: none !important;
}

/* ======================================== */
/* DEBUGGING HELPERS */
/* ======================================== */

/* Uncomment these for debugging - they add visible borders */
/*
html body .product-card {
    border: 3px solid red !important;
}

html body .product-card img {
    border: 3px solid blue !important;
}

html body .product-image-container {
    border: 3px solid green !important;
}
*/

    width: 100% !important;
    height: auto !important;
    max-height: 100% !important;
    max-width: 100% !important;
    object-fit: scale-down !important;
    object-position: center !important;
    display: block !important;
    background-color: transparent !important;
    mix-blend-mode: normal !important;
    transition: none !important;
    transform: none !important;
}

/* ======================================== */
/* JAVASCRIPT OVERRIDE - DISABLE SLIDER */
/* ======================================== */

/* Override JavaScript opacity changes */
html body .product-image[style*="opacity: 0"],
html body .product-image[style*="opacity:0"],
html body .product-image[style*="opacity: 0;"],
html body .product-image[style*="opacity:0;"] {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Force all product images to be visible regardless of JavaScript */
html body .card-image-container .product-image,
html body .flipkart-card .card-image-container .product-image,
html body .product-image-slider .product-image {
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: 100% !important;
    max-width: 100% !important;
    object-fit: scale-down !important;
    object-position: center !important;
    display: block !important;
    background-color: transparent !important;
    mix-blend-mode: normal !important;
    transition: none !important;
    transform: none !important;
}

/* ======================================== */
/* DEBUGGING HELPERS */
/* ======================================== */

/* Uncomment these for debugging - they add visible borders */
/*
html body .product-card {
    border: 3px solid red !important;
}

html body .product-card img {
    border: 3px solid blue !important;
}

html body .product-image-container {
    border: 3px solid green !important;
}
*/