/* AGGRESSIVE PRODUCT CARD IMAGE OVERRIDE - NO PADDING, NO CROPPING */
/* This CSS file overrides all existing styles to ensure product images fit edge-to-edge */
/* Target: Shop page (remove 20px padding) and Homepage (fix cropping) */

/* ======================================== */
/* SHOP PAGE PRODUCT CARDS - REMOVE PADDING */
/* ======================================== */

/* Target all possible shop page selectors */
.shop .product-card img,
.shop .product-item img,
.shop .product-image,
.shop .card-img-top,
.shop .product-card .product-image,
.shop .product-card .card-img-top,
.shop .product-item .product-image,
.shop .product-item .card-img-top,
#shop .product-card img,
#shop .product-item img,
#shop .product-image,
#shop .card-img-top,
.shop-page .product-card img,
.shop-page .product-item img,
.shop-page .product-image,
.shop-page .card-img-top,
.products-grid .product-card img,
.products-grid .product-item img,
.products-grid .product-image,
.products-grid .card-img-top {
    width: 100% !important;
    height: auto !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-sizing: border-box !important;
    display: block !important;
    background-color: transparent !important;
}

/* Remove padding from shop page containers */
.shop .product-card,
.shop .product-item,
.shop .product-card .product-image-container,
.shop .product-item .product-image-container,
.shop .product-card .card-img-top-container,
.shop .product-item .card-img-top-container,
#shop .product-card,
#shop .product-item,
#shop .product-card .product-image-container,
#shop .product-item .product-image-container,
.shop-page .product-card,
.shop-page .product-item,
.shop-page .product-card .product-image-container,
.shop-page .product-item .product-image-container,
.products-grid .product-card,
.products-grid .product-item,
.products-grid .product-card .product-image-container,
.products-grid .product-item .product-image-container {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

/* ======================================== */
/* HOMEPAGE PRODUCT CARDS - FIX CROPPING */
/* ======================================== */

/* Target all possible homepage selectors */
.latest-arrivals .product-card img,
.latest-arrivals .product-item img,
.latest-arrivals .product-image,
.latest-arrivals .card-img-top,
.our-amazing-products .product-card img,
.our-amazing-products .product-item img,
.our-amazing-products .product-image,
.our-amazing-products .card-img-top,
#latest-arrivals-section .product-card img,
#latest-arrivals-section .product-item img,
#latest-arrivals-section .product-image,
#latest-arrivals-section .card-img-top,
#products-showcase-section .product-card img,
#products-showcase-section .product-item img,
#products-showcase-section .product-image,
#products-showcase-section .card-img-top,
.homepage .product-card img,
.homepage .product-item img,
.homepage .product-image,
.homepage .card-img-top,
.product-showcase .product-card img,
.product-showcase .product-item img,
.product-showcase .product-image,
.product-showcase .card-img-top {
    width: 100% !important;
    height: auto !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-sizing: border-box !important;
    display: block !important;
    background-color: transparent !important;
}

/* Remove padding from homepage containers */
.latest-arrivals .product-card,
.latest-arrivals .product-item,
.latest-arrivals .product-card .product-image-container,
.latest-arrivals .product-item .product-image-container,
.our-amazing-products .product-card,
.our-amazing-products .product-item,
.our-amazing-products .product-card .product-image-container,
.our-amazing-products .product-item .product-image-container,
#latest-arrivals-section .product-card,
#latest-arrivals-section .product-item,
#latest-arrivals-section .product-card .product-image-container,
#latest-arrivals-section .product-item .product-image-container,
#products-showcase-section .product-card,
#products-showcase-section .product-item,
#products-showcase-section .product-card .product-image-container,
#products-showcase-section .product-item .product-image-container,
.homepage .product-card,
.homepage .product-item,
.homepage .product-card .product-image-container,
.homepage .product-item .product-image-container,
.product-showcase .product-card,
.product-showcase .product-item,
.product-showcase .product-card .product-image-container,
.product-showcase .product-item .product-image-container {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

/* ======================================== */
/* UNIVERSAL PRODUCT CARD OVERRIDES */
/* ======================================== */

/* Target any product card image regardless of page */
.product-card img,
.product-item img,
.product-image,
.card-img-top,
.product-card .product-image,
.product-card .card-img-top,
.product-item .product-image,
.product-item .card-img-top,
img.product-image,
img.card-img-top,
.product-image-container img,
.card-img-top-container img {
    width: 100% !important;
    height: auto !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-sizing: border-box !important;
    display: block !important;
    background-color: transparent !important;
}

/* Universal container overrides */
.product-card,
.product-item,
.product-card .product-image-container,
.product-item .product-image-container,
.product-card .card-img-top-container,
.product-item .card-img-top-container,
.product-image-container,
.card-img-top-container {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

/* ======================================== */
/* RESPONSIVE OVERRIDES - MOBILE */
/* ======================================== */

@media (max-width: 1200px) {
    .shop .product-card img,
    .shop .product-item img,
    .latest-arrivals .product-card img,
    .latest-arrivals .product-item img,
    .our-amazing-products .product-card img,
    .our-amazing-products .product-item img,
    .product-card img,
    .product-item img,
    .product-image,
    .card-img-top {
        width: 100% !important;
        height: auto !important;
        max-height: 100% !important;
        object-fit: contain !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}

@media (max-width: 991px) {
    .shop .product-card img,
    .shop .product-item img,
    .latest-arrivals .product-card img,
    .latest-arrivals .product-item img,
    .our-amazing-products .product-card img,
    .our-amazing-products .product-item img,
    .product-card img,
    .product-item img,
    .product-image,
    .card-img-top {
        width: 100% !important;
        height: auto !important;
        max-height: 100% !important;
        object-fit: contain !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}

@media (max-width: 768px) {
    .shop .product-card img,
    .shop .product-item img,
    .latest-arrivals .product-card img,
    .latest-arrivals .product-item img,
    .our-amazing-products .product-card img,
    .our-amazing-products .product-item img,
    .product-card img,
    .product-item img,
    .product-image,
    .card-img-top {
        width: 100% !important;
        height: auto !important;
        max-height: 100% !important;
        object-fit: contain !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}

@media (max-width: 576px) {
    .shop .product-card img,
    .shop .product-item img,
    .latest-arrivals .product-card img,
    .latest-arrivals .product-item img,
    .our-amazing-products .product-card img,
    .our-amazing-products .product-item img,
    .product-card img,
    .product-item img,
    .product-image,
    .card-img-top {
        width: 100% !important;
        height: auto !important;
        max-height: 100% !important;
        object-fit: contain !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}

@media (max-width: 375px) {
    .shop .product-card img,
    .shop .product-item img,
    .latest-arrivals .product-card img,
    .latest-arrivals .product-item img,
    .our-amazing-products .product-card img,
    .our-amazing-products .product-item img,
    .product-card img,
    .product-item img,
    .product-image,
    .card-img-top {
        width: 100% !important;
        height: auto !important;
        max-height: 100% !important;
        object-fit: contain !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}

/* ======================================== */
/* TAILWIND CSS UTILITY OVERRIDES */
/* ======================================== */

/* Override Tailwind padding utilities */
.p-0,
.px-0,
.py-0,
.pt-0,
.pb-0,
.pl-0,
.pr-0 {
    padding: 0 !important;
}

.m-0,
.mx-0,
.my-0,
.mt-0,
.mb-0,
.ml-0,
.mr-0 {
    margin: 0 !important;
}

.w-full {
    width: 100% !important;
}

.h-auto {
    height: auto !important;
}

.object-contain {
    object-fit: contain !important;
}

/* ======================================== */
/* BOOTSTRAP OVERRIDES */
/* ======================================== */

/* Override Bootstrap card padding */
.card,
.card-body,
.card-img-top,
.card-img {
    padding: 0 !important;
    margin: 0 !important;
}

.card-img-top {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    padding: 0 !important;
    margin: 0 !important;
}

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

/* Uncomment these for debugging - they add visible borders to identify elements */
/*
.product-card {
    border: 2px solid red !important;
}

.product-card img {
    border: 2px solid blue !important;
}

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