/* ==========================================================================
   CATALOGUE / CATEGORY PAGE - Catch-all border for ALL product images
   (including new/placeholder products with different markup)
   ========================================================================== */

/* Broad catch: any element that directly wraps a product grid image,
   regardless of exact class combination */
.products-grid .product-item-photo,
.products-grid .product-image-container,
.products-grid .product-item-info .product-image-container,
.products-grid a.product-item-photo,
.products-grid .product-item a[href] > span.product-image-container,
.page-products .product-image-wrapper,
.product-item-photo {
    background-color: #ffffff !important;
    border: 2px solid #e5e5e5 !important;
    padding: 1.5rem !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Fallback: target the <img> itself and reach up to style its
   immediate parent, in case the wrapper class is completely different
   on new products (covers placeholder images too) */
.products-grid img.product-image-photo {
    max-height: 100% !important;
    max-width: 100% !important;
    object-fit: contain !important;
}

.products-grid img.product-image-photo:not(.product-image-container *) {
    outline: 2px solid #e5e5e5 !important;
    outline-offset: -2px !important;
    background-color: #ffffff !important;
    padding: 1.5rem !important;
    box-sizing: border-box !important;
}

/* Specifically catch Magento's default placeholder image, which often
   uses its own class and skips the normal product-image-container markup */
.products-grid img[src*="placeholder"],
.products-grid img.photo.image {
    outline: 2px solid #e5e5e5 !important;
    outline-offset: -2px !important;
    background-color: #ffffff !important;
    padding: 1.5rem !important;
    box-sizing: border-box !important;
}