/* 
 * Product Square Images CSS
 * Ensures all product images maintain 1:1 aspect ratio across the website
 */

/* Global product image styling - force square aspect ratio */
.product-card .product-image,
.product-card picture,
.product-card img,
.product-image-container,
.responsive-image-container.square-aspect {
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    width: 100% !important;
    display: block !important;
}

/* Product list pages */
.product-card {
    overflow: hidden;
}

.product-card .product-image,
.product-card picture {
    border-radius: 0.375rem 0.375rem 0 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.product-card:hover .product-image,
.product-card:hover picture img {
    transform: scale(1.05);
}

/* Product detail page - main image */
.product-image-large,
.product-image-large .responsive-image-container,
.product-image-large picture,
.product-image-large img {
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    width: 100% !important;
    height: auto !important;
}

.product-image-large {
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Related products */
.product-card .product-image-small,
.product-card .product-image-small picture,
.product-card .product-image-small img {
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    width: 100% !important;
}

/* Responsive image component specific */
.responsive-image-container {
    display: block;
    width: 100%;
    overflow: hidden;
}

.responsive-image-container.square-aspect {
    aspect-ratio: 1 / 1 !important;
}

.responsive-image-container picture,
.responsive-image-container img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* Ensure picture elements work correctly */
picture {
    display: block !important;
    width: 100% !important;
}

picture img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Product cards in different contexts */
.product-card .card-img-top,
.food-card .food-image,
.news-card .news-image {
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
}

/* Mobile responsive adjustments */
@media (max-width: 767px) {
    .product-card .product-image,
    .product-card picture,
    .product-image-large {
        aspect-ratio: 1 / 1 !important;
    }
}

@media (max-width: 575px) {
    .product-card .product-image,
    .product-card picture,
    .product-image-large {
        aspect-ratio: 1 / 1 !important;
    }
}

/* Fix for any conflicting styles */
.product-card .product-image {
    height: auto !important;
    min-height: unset !important;
    max-height: unset !important;
}

/* Ensure containers don't override aspect ratio */
.col-lg-3 .product-card .product-image,
.col-md-6 .product-card .product-image,
.col-sm-4 .product-card .product-image,
.col-6 .product-card .product-image {
    aspect-ratio: 1 / 1 !important;
}

/* Category pages specific */
.category-products .product-card .product-image,
.search-results .product-card .product-image {
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
}

/* Homepage product cards */
.featured-products .product-card .product-image {
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
}

/* Admin preview (if needed) */
.admin-product-preview .product-image {
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    max-width: 200px;
}

/* Debug helper - remove in production */
.debug-aspect-ratio {
    position: relative;
}

.debug-aspect-ratio::after {
    content: "1:1";
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(255, 0, 0, 0.8);
    color: white;
    padding: 2px 6px;
    font-size: 10px;
    border-radius: 3px;
    z-index: 1000;
}

/* Fallback for browsers that don't support aspect-ratio */
@supports not (aspect-ratio: 1 / 1) {
    .product-card .product-image,
    .product-card picture {
        height: 250px;
        width: 100%;
        object-fit: cover;
    }
    
    @media (max-width: 767px) {
        .product-card .product-image,
        .product-card picture {
            height: 200px;
        }
    }
    
    @media (max-width: 575px) {
        .product-card .product-image,
        .product-card picture {
            height: 180px;
        }
    }
    
    .product-image-large {
        height: 400px;
    }
    
    @media (max-width: 767px) {
        .product-image-large {
            height: 300px;
        }
    }
}