/**
 * AGGRESSIVE PRODUCT IMAGE NO-CROP & NO-PADDING SOLUTION
 * Forces all product card images to be fully visible without any cropping or padding
 * Applied to Homepage (Latest Arrivals, Our Amazing Products) and Shop page
 * Last Updated: September 15, 2025
 */

/* ==================================================
   ULTRA-AGGRESSIVE PRIMARY FIX - MAXIMUM OVERRIDE POWER
   ================================================== */

/* HOMEPAGE: Target ALL product images with maximum specificity */
body .latest-arrivals .product-image,
body .latest-arrivals .card-img-top,
body .latest-arrivals img.product-image,
body .latest-arrivals img,
body .our-amazing-products .product-image,
body .our-amazing-products .card-img-top,
body .our-amazing-products img.product-image,
body .our-amazing-products img,
body #latest-arrivals-section .product-image,
body #latest-arrivals-section .card-img-top,
body #latest-arrivals-section img,
body #products-showcase-section .product-image,
body #products-showcase-section .card-img-top,
body #products-showcase-section img,
body .product-card .product-image,
body .product-card .card-img-top,
body .product-card img.product-image,
body .product-card img,
body .latest-arrivals-product-card .product-image,
body .latest-arrivals-product-card .card-img-top,
body .latest-arrivals-product-card img,
body div.product-card img,
body div.product-image-container img,
body div.product-image-slider img,
body a > img.product-image,
body a > img.card-img-top {
    /* AGGRESSIVE OVERRIDE: Use scale-down for perfect fit */
    object-fit: scale-down !important;
    object-position: center !important;

    /* Dynamic dimensions for no cropping */
    width: 100% !important;
    height: auto !important;
    max-height: 100% !important;

    /* FORCE ZERO SPACING */
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    outline: none !important;

    /* Ensure proper box model */
    box-sizing: border-box !important;

    /* Display settings */
    display: block !important;

    /* Background transparent */
    background-color: transparent !important;

    /* Position relative for proper containment */
    position: relative !important;

    /* Smooth transitions */
    transition: transform 0.3s ease !important;
}

/* SHOP PAGE: Remove 20px padding specifically */
body .shop .product-card img,
body .shop .product-image,
body .shop .card-img-top,
body .shop .product-item img,
body .shop-page .product-card img,
body .shop-page .product-image,
body .products-page .product-card img,
body .products-page .product-image,
body #shop .product-card img,
body #shop .product-image,
body .shop-container .product-card img,
body .shop-container .product-image {
    /* FORCE REMOVE 20px PADDING */
    padding: 0 !important;
    margin: 0 !important;

    /* Full fit without cropping */
    object-fit: scale-down !important;
    object-position: center !important;
    width: 100% !important;
    height: auto !important;
    max-height: 100% !important;

    /* Zero spacing */
    border: none !important;
    outline: none !important;
    box-sizing: border-box !important;

    /* Display block */
    display: block !important;
    background-color: transparent !important;
}

/* ==================================================
   AGGRESSIVE CONTAINER FIXES - FORCE ZERO PADDING
   ================================================== */

/* HOMEPAGE Containers - Maximum specificity */
body .latest-arrivals .product-image-container,
body .latest-arrivals .product-image-slider,
body .our-amazing-products .product-image-container,
body .our-amazing-products .product-image-slider,
body #latest-arrivals-section .product-image-container,
body #latest-arrivals-section .product-image-slider,
body #products-showcase-section .product-image-container,
body #products-showcase-section .product-image-slider,
body .product-card .product-image-container,
body .product-card .product-image-slider,
body .latest-arrivals-product-card .product-image-container,
body .latest-arrivals-product-card .product-image-slider,
body div.product-image-container,
body div.product-image-slider {
    /* Container settings - maintain height */
    position: relative !important;
    width: 100% !important;
    height: 220px !important;

    /* FORCE ZERO SPACING */
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    outline: none !important;

    /* Proper overflow handling */
    overflow: hidden !important;

    /* Center content */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* Light background */
    background-color: #f8f9fa !important;

    /* Ensure proper box model */
    box-sizing: border-box !important;
}

/* SHOP PAGE Containers */
body .shop .product-image-container,
body .shop .product-image-slider,
body .shop-page .product-image-container,
body .products-page .product-image-container,
body #shop .product-image-container {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    outline: none !important;
    box-sizing: border-box !important;
}

/* ==================================================
   LINK WRAPPER FIXES - FORCE ZERO PADDING
   ================================================== */

/* AGGRESSIVE link wrapper fixes */
body .latest-arrivals .product-image-container a,
body .our-amazing-products .product-image-container a,
body #latest-arrivals-section .product-image-container a,
body #products-showcase-section .product-image-container a,
body .product-card .product-image-container a,
body .latest-arrivals-product-card .product-image-container a,
body div.product-image-container a,
body div.product-image-slider a,
body .shop .product-image-container a,
body .shop-page .product-image-container a {
    /* Full dimensions */
    width: 100% !important;
    height: 100% !important;

    /* FORCE ZERO SPACING */
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    outline: none !important;

    /* Display settings */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* Ensure proper box model */
    box-sizing: border-box !important;
}

/* ==================================================
   CARD WRAPPER FIXES - ENSURE NO PADDING
   ================================================== */

body .latest-arrivals .product-card,
body .our-amazing-products .product-card,
body #latest-arrivals-section .product-card,
body #products-showcase-section .product-card,
body .latest-arrivals-product-card,
body .shop .product-card,
body .shop-page .product-card,
body .products-page .product-card {
    /* Remove card padding that might affect image */
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* ==================================================
   ULTRA-AGGRESSIVE INLINE STYLE OVERRIDES
   ================================================== */

/* Override ANY inline styles with object-fit: cover */
[style*="object-fit: cover"] {
    object-fit: scale-down !important;
}

[style*="object-fit: fill"] {
    object-fit: scale-down !important;
}

/* Override inline height: 100% that causes issues */
img[style*="height: 100%"] {
    height: auto !important;
    max-height: 100% !important;
}

/* Override inline padding */
img[style*="padding:"],
div[style*="padding:"] img {
    padding: 0 !important;
}

/* ==================================================
   ALTERNATIVE SELECTORS (MAXIMUM COVERAGE)
   ================================================== */

/* Generic product image selectors with body prefix for higher specificity */
/* EXCLUDE CHECKOUT PAGE - Don't override checkout item images */
body .product-img:not(.checkout-page .item-image):not(.order-summary-card .item-image):not(.summary-item .item-image),
body .item-image:not(.checkout-page .item-image):not(.order-summary-card .item-image):not(.summary-item .item-image),
body .product-photo,
body .product-picture,
body .product-thumbnail,
body [class*="product"] img:not(.checkout-page .item-image img):not(.order-summary-card .item-image img):not(.summary-item .item-image img),
body [class*="arrival"] img,
body [class*="showcase"] img,
body [id*="product"] img,
body [id*="arrival"] img {
    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;
    box-sizing: border-box !important;
}

/* ==================================================
   MOBILE RESPONSIVE ADJUSTMENTS - AGGRESSIVE OVERRIDES
   ================================================== */

/* Tablet and below */
@media (max-width: 768px) {
    body .latest-arrivals .product-image-container,
    body .latest-arrivals .product-image-slider,
    body .our-amazing-products .product-image-container,
    body .our-amazing-products .product-image-slider,
    body #latest-arrivals-section .product-image-container,
    body #latest-arrivals-section .product-image-slider,
    body #products-showcase-section .product-image-container,
    body #products-showcase-section .product-image-slider,
    body .product-card .product-image-container,
    body .product-card .product-image-slider,
    body .shop .product-image-container,
    body .shop-page .product-image-container {
        height: 180px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Ensure images use scale-down on mobile */
    body .latest-arrivals img,
    body .our-amazing-products img,
    body #latest-arrivals-section img,
    body #products-showcase-section img,
    body .product-card img,
    body .shop img,
    body .shop-page img {
        object-fit: scale-down !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        height: auto !important;
        max-height: 100% !important;
    }
}

/* Small mobile */
@media (max-width: 576px) {
    body .latest-arrivals .product-image-container,
    body .latest-arrivals .product-image-slider,
    body .our-amazing-products .product-image-container,
    body .our-amazing-products .product-image-slider,
    body #latest-arrivals-section .product-image-container,
    body #latest-arrivals-section .product-image-slider,
    body #products-showcase-section .product-image-container,
    body #products-showcase-section .product-image-slider,
    body .product-card .product-image-container,
    body .product-card .product-image-slider,
    body .shop .product-image-container,
    body .shop-page .product-image-container {
        height: 160px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    body .product-card img,
    body .shop img {
        object-fit: scale-down !important;
        padding: 0 !important;
        width: 100% !important;
        height: auto !important;
        max-height: 100% !important;
    }
}

/* Extra small mobile */
@media (max-width: 375px) {
    body .latest-arrivals .product-image-container,
    body .latest-arrivals .product-image-slider,
    body .our-amazing-products .product-image-container,
    body .our-amazing-products .product-image-slider,
    body #latest-arrivals-section .product-image-container,
    body #latest-arrivals-section .product-image-slider,
    body #products-showcase-section .product-image-container,
    body #products-showcase-section .product-image-slider,
    body .product-card .product-image-container,
    body .product-card .product-image-slider,
    body .shop .product-image-container,
    body .shop-page .product-image-container {
        height: 140px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    body .product-card img,
    body .shop img {
        object-fit: scale-down !important;
        padding: 0 !important;
        width: 100% !important;
        height: auto !important;
        max-height: 100% !important;
    }
}

/* ==================================================
   HOVER EFFECTS (MAINTAIN NO-CROP ON HOVER)
   ================================================== */

body .product-card:hover .product-image,
body .product-card:hover img,
body .latest-arrivals .product-card:hover img,
body .our-amazing-products .product-card:hover img,
body .shop .product-card:hover img {
    /* Slight zoom on hover without cropping */
    transform: scale(1.05) !important;
    object-fit: scale-down !important; /* Maintain scale-down on hover */
}

/* ==================================================
   FINAL NUCLEAR OVERRIDES - MAXIMUM SPECIFICITY
   ================================================== */

/* Override ALL img tags in product contexts with attribute selectors */
img[class*="product"],
img[alt*="product"],
img[alt*="Product"],
div[class*="product"] img,
div[id*="product"] img,
a[href*="product"] img {
    object-fit: scale-down !important;
    width: 100% !important;
    height: auto !important;
    max-height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Target by src attribute patterns */
img[src*="/products/"]:not(.checkout-page .item-image img):not(.order-summary-card .item-image img):not(.summary-item .item-image img),
img[src*="/storage/"]:not(.checkout-page .item-image img):not(.order-summary-card .item-image img):not(.summary-item .item-image img),
img[src*="/uploads/"]:not(.checkout-page .item-image img):not(.order-summary-card .item-image img):not(.summary-item .item-image img) {
    object-fit: scale-down !important;
    padding: 0 !important;
}

/* ==================================================
   CHECKOUT PAGE EXCLUSIONS - KEEP ORIGINAL SIZING
   ================================================== */

/* Redesigned checkout item images - smaller and more compact */
.checkout-page .item-image,
.checkout-page .item-image img,
.order-summary-card .item-image,
.order-summary-card .item-image img,
.summary-item .item-image,
.summary-item .item-image img {
    /* Smaller, more compact sizing */
    width: 45px !important;
    height: 45px !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    position: relative !important;
    border: 1px solid #e5e7eb !important;
}

/* Improve the quantity badge positioning */
.checkout-page .item-quantity,
.order-summary-card .item-quantity,
.summary-item .item-quantity {
    position: absolute !important;
    top: -6px !important;
    right: -6px !important;
    background: #dc2626 !important;
    color: white !important;
    border-radius: 50% !important;
    width: 18px !important;
    height: 18px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid white !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

/* Adjust summary item layout for better spacing */
.checkout-page .summary-item,
.order-summary-card .summary-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid #f3f4f6 !important;
}

.checkout-page .summary-item:last-child,
.order-summary-card .summary-item:last-child {
    border-bottom: none !important;
}

/* Improve item details layout */
.checkout-page .item-details,
.order-summary-card .item-details {
    flex: 1 !important;
    min-width: 0 !important;
}

.checkout-page .item-details h6,
.order-summary-card .item-details h6 {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #374151 !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.3 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

/* Price styling */
.checkout-page .item-price,
.order-summary-card .item-price {
    font-weight: 600 !important;
    color: #111827 !important;
    font-size: 14px !important;
    white-space: nowrap !important;
}

/* Mobile adjustments */
@media (max-width: 576px) {
    .checkout-page .item-image,
    .checkout-page .item-image img,
    .order-summary-card .item-image,
    .order-summary-card .item-image img,
    .summary-item .item-image,
    .summary-item .item-image img {
        width: 40px !important;
        height: 40px !important;
    }

    .checkout-page .item-quantity,
    .order-summary-card .item-quantity,
    .summary-item .item-quantity {
        width: 16px !important;
        height: 16px !important;
        font-size: 9px !important;
        top: -5px !important;
        right: -5px !important;
    }

    .checkout-page .summary-item,
    .order-summary-card .summary-item {
        gap: 10px !important;
        padding: 10px 0 !important;
    }

    .checkout-page .item-details h6,
    .order-summary-card .item-details h6 {
        font-size: 13px !important;
    }

    .checkout-page .item-price,
    .order-summary-card .item-price {
        font-size: 13px !important;
    }
}

/* ==================================================
   CRITICAL OVERRIDES FOR INLINE STYLES
   ================================================== */

/* Override inline styles with maximum specificity */
body div.product-image-slider a img[style] {
    object-fit: scale-down !important;
    width: 100% !important;
    height: auto !important;
    max-height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Target specific inline style patterns */
img[style*="object-fit"][style*="cover"] {
    object-fit: scale-down !important;
}

img[style*="padding"][style*="20px"] {
    padding: 0 !important;
}

img[style*="padding"][style*="4px"] {
    padding: 0 !important;
}

/* ==================================================
   IMPLEMENTATION NOTES
   ================================================== */

/*
 * AGGRESSIVE OVERRIDE SOLUTION - September 15, 2025
 *
 * This CSS ensures:
 * 1. ✓ All product images are fully visible (no cropping)
 * 2. ✓ 20px padding removed from shop page
 * 3. ✓ Images maintain aspect ratio (no distortion)
 * 4. ✓ No card height changes
 * 5. ✓ Works on all screen sizes
 * 6. ✓ Overrides inline styles and theme CSS
 *
 * Key techniques used:
 * - body prefix for higher specificity
 * - !important on all critical properties
 * - object-fit: scale-down for perfect fit
 * - height: auto with max-height: 100%
 * - Multiple fallback selectors
 * - Attribute selectors for maximum coverage
 *
 * Testing checklist:
 * □ Homepage - Latest Arrivals section
 * □ Homepage - Our Amazing Products section
 * □ Shop page - Product grid
 * □ Mobile view (< 768px)
 * □ Inspect computed styles: padding should be 0
 * □ Verify no card height changes
 */