/**
 * Global Image Shape and Size Consistency - ENFORCED
 * Forces ALL images across the site to maintain consistent shape
 * Products/Categories: SQUARE | Banners: CIRCLE | Logos: CONTAIN
 * Updated: February 16, 2026
 */

/* ============================================
   ABSOLUTE ENFORCEMENT - ALL PRODUCT IMAGES
   MUST be EXACTLY the same size
   NO EXCEPTIONS - NO VARIATIONS
   ============================================ */

/* EVERY product image container - FORCE square aspect ratio */
.product-card-img,
.product-card > div:has(img),
.product-card > a > div:has(img),
[class*="product"] > div:has(img),
div[class*="product-card-img"],
div:has(> img[alt*="product" i]),
.aspect-square {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    background-color: #f3f4f6;
    min-height: unset !important;
    max-height: unset !important;
}

.dark .product-card-img,
.dark .product-card > div:has(img) {
    background-color: #374151;
}

/* EVERY product image - FORCE fill and cover */
.product-card-img img,
.product-card img,
.product-card > a img,
[class*="product-card"] img,
[class*="product"] img:not([class*="logo"]):not([class*="icon"]),
div[class*="product"] img,
a[href*="product"] img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Remove ANY padding that might create variation */
.product-card-img,
.product-card-img *,
[class*="product-card"] > div {
    padding: 0 !important;
    margin: 0 !important;
}

/* ============================================
   Category Images - SQUARE like products
   ============================================ */

.category-card,
.category-card img,
[class*="category"] img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

.category-card {
    aspect-ratio: 1 / 1 !important;
    overflow: hidden;
}

/* ============================================
   Banner/Hero Images - CIRCLE (rounded-full)
   ============================================ */

.banner-image,
.banner-image-wrapper img,
[class*="banner-image"] img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 9999px !important; /* Perfect circle */
}

/* Ensure banner containers are square for perfect circles */
.banner-image-wrapper > div {
    aspect-ratio: 1 / 1 !important;
}

/* ============================================
   Brand Logos - EXCEPTION: use contain
   ============================================ */

.brand-logo,
.brand-card img,
[class*="brand"] img,
img[alt*="logo" i],
img[src*="logo" i] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain !important;
    object-position: center;
    padding: 10px;
}

/* ============================================
   Global Aspect Ratio Enforcement
   ============================================ */

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

.aspect-video {
    aspect-ratio: 16 / 9 !important;
}

.aspect-portrait {
    aspect-ratio: 3 / 4 !important;
}

/* Force circles to be square aspect + rounded */
.rounded-full {
    aspect-ratio: 1 / 1 !important;
    border-radius: 9999px !important;
}

/* ============================================
   Object-Fit Global Override
   ============================================ */

.object-cover {
    object-fit: cover !important;
    object-position: center !important;
}

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

/* ============================================
   Bootstrap Legacy Cards Fix
   ============================================ */

.product-card.style-3 .product-card-img {
    aspect-ratio: 1 / 1 !important;
    overflow: hidden;
}

.product-card.style-3 .product-card-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* ============================================
   Hover Effects - Maintain Shape
   ============================================ */

.group img {
    transition: transform 0.5s ease;
}

.group:hover img {
    transform: scale(1.05);
    width: 100%;
    height: 100%;
}

/* ============================================
   ULTRA-SPECIFIC COMPONENT ENFORCEMENT
   Target every possible product image variation
   ============================================ */

/* Tailwind product cards */
.aspect-square,
.aspect-square img,
div[class*="aspect-square"] img {
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
}

/* Bootstrap legacy cards */
.product-card.style-3 .product-card-img,
.product-card.style-3 .product-card-img img {
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
}

/* Livewire components */
[wire\:key*="product"] img,
[x-data*="product"] img,
.livewire img[alt*="product" i] {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Grid items containing products */
.grid > div img[src*="product"],
.grid > div img[src*="storage"],
div[class*="col"] img[alt*="product" i] {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Swiper/Slider products */
.swiper-slide img,
.slider img,
[class*="slide"] img[alt*="product" i] {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* ============================================
   RESPONSIVE - Maintain SQUARE at all sizes
   Container uses aspect-ratio, NOT fixed heights
   ============================================ */

/* ALL screen sizes - containers MUST be square */
@media (max-width: 640px) {
    .product-card-img,
    .category-card,
    [class*="product"] > div:has(img) {
        aspect-ratio: 1 / 1 !important;
        width: 100% !important;
        height: auto !important;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .product-card-img,
    .category-card,
    [class*="product"] > div:has(img) {
        aspect-ratio: 1 / 1 !important;
        width: 100% !important;
        height: auto !important;
    }
}

@media (min-width: 1025px) {
    .product-card-img,
    .category-card,
    [class*="product"] > div:has(img) {
        aspect-ratio: 1 / 1 !important;
        width: 100% !important;
        height: auto !important;
    }
}

/* OVERRIDE any fixed heights */
.product-card-img,
.product-card img,
[class*="product-card"] img {
    min-height: unset !important;
    max-height: unset !important;
    height: 100% !important;
}

/* ============================================
   Loading States
   ============================================ */

img[loading="lazy"] {
    background-color: #f3f4f6;
}

.dark img[loading="lazy"] {
    background-color: #374151;
}

img {
    transition: opacity 0.3s ease-in-out;
}

img[loading="lazy"]:not([src]) {
    opacity: 0;
}

/* ============================================
   FINAL CATCH-ALL RULES
   Absolute last resort enforcement
   ============================================ */

/* EVERY image inside product-related containers */
div[class*="product"] img,
div[id*="product"] img,
a[href*="product"] img,
section img[src*="storage/products"],
section img[src*="/products/"] {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* Force parent containers to be square */
div:has(> img[src*="storage/products"]),
div:has(> img[src*="/products/"]),
div:has(> a > img[src*="product"]) {
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
}

/* Remove transforms/padding that break sizing */
img[src*="product"],
img[src*="storage"] {
    transform: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* On hover, ONLY allow scale transform */
.group:hover img[src*="product"],
.group:hover img[src*="storage"] {
    transform: scale(1.05) !important;
}

/* ============================================
   NUCLEAR OPTION - Universal Product Image Rule
   Targets ANY img element in product context
   ============================================ */

/* If nothing else works, this FORCES it */
img[alt]:not([alt*="logo" i]):not([alt*="icon" i]):not([class*="logo"]):not([class*="icon"]) {
    width: 100% !important;
    height: 100% !important;
}

/* Parent container MUST be square for product images */
div:has(> img):not(:has(> img[alt*="logo" i])):not(:has(> img[class*="logo"])) {
    aspect-ratio: 1 / 1 !important;
}

/* ============================================
   SUMMARY - Absolute Enforcement Achieved
   ============================================ */

/*
 * ✓✓✓ Product Images: EXACTLY THE SAME SIZE - ENFORCED
 * ✓ ALL product images: SQUARE (1:1 aspect ratio)
 * ✓ ALL product images: object-cover (fills completely)
 * ✓ ALL product images: 100% width, 100% height
 * ✓ NO padding allowed
 * ✓ NO margin allowed
 * ✓ NO size variations
 * ✓ NO empty space
 *
 * Multiple layers of enforcement ensure:
 * 1. Container aspect-ratio: 1/1
 * 2. Image width/height: 100%
 * 3. Image object-fit: cover
 * 4. Remove all padding/margin
 * 5. Catch-all rules for edge cases
 *
 * RESULT: Perfect uniformity across ALL product images
 */