/* PRODUCT GRID VISUAL OPTIMIZATIONS - MyWebber.Shop */

/* Remove product card borders for cleaner look */
.woocommerce ul.products li.product,
.woocommerce .product-item,
.woocommerce .product-card,
.product-grid .product,
.woocommerce-page ul.products li.product {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Remove any inner borders */
.woocommerce ul.products li.product .product-inner,
.woocommerce ul.products li.product .product-wrapper,
.product-image-wrapper,
.product-content-wrapper {
    border: none !important;
    box-shadow: none !important;
}

/* Remove borders from product images */
.woocommerce ul.products li.product img,
.woocommerce ul.products li.product .attachment-woocommerce_thumbnail,
.product-image img {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Clean hover effects without borders or movement */
.woocommerce ul.products li.product:hover {
    border: none !important;
    box-shadow: none !important; /* No shadow on hover */
    transform: none !important; /* No movement on hover */
    transition: none !important; /* No transitions */
}

/* Ensure no movement on any product elements */
.woocommerce ul.products li.product,
.woocommerce ul.products li.product *,
.woocommerce ul.products li.product:hover *,
.woocommerce ul.products li.product .product-inner,
.woocommerce ul.products li.product .product-wrapper {
    transform: none !important; /* Absolutely no transforms */
}

/* IMAGE LOADING OPTIMIZATION - Eliminate visual bottleneck */

/* Skeleton loading for images */
.woocommerce ul.products li.product img {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%) !important;
    background-size: 200% 100% !important;
    animation: loading-skeleton 1.5s infinite !important;
}

/* Loading animation */
@keyframes loading-skeleton {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Once image loads, remove skeleton */
.woocommerce ul.products li.product img[src]:not([src=""]) {
    animation: none !important;
    background: transparent !important;
}

/* Improved image container for consistent aspect ratio */
.woocommerce ul.products li.product .attachment-woocommerce_thumbnail,
.product-image-container {
    aspect-ratio: 3/4 !important;
    overflow: hidden !important;
    background: #f8f9fa !important;
    position: relative !important;
}

/* Ensure images fill container properly */
.woocommerce ul.products li.product img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: opacity 0.3s ease !important;
}

/* Loading state for images */
.woocommerce ul.products li.product img[loading="lazy"] {
    opacity: 0 !important;
}

.woocommerce ul.products li.product img[loading="lazy"].loaded {
    opacity: 1 !important;
}

/* Optimize product grid spacing without borders */
.woocommerce ul.products {
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce ul.products li.product {
    margin: 0 0 2rem 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Clean product content area */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3 {
    margin: 0.5rem 0 !important;
    padding: 0 !important;
    border: none !important;
}

.woocommerce ul.products li.product .price {
    margin: 0.25rem 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* Remove any WooCommerce default borders */
.woocommerce div.product,
.woocommerce #content div.product,
.woocommerce-page div.product,
.woocommerce-page #content div.product {
    border: none !important;
}

/* Optimize for mobile without borders */
@media (max-width: 768px) {
    .woocommerce ul.products li.product {
        margin: 0 0 1.5rem 0 !important;
    }
    
    .woocommerce ul.products li.product:hover {
        transform: none !important; /* Disable hover transform on mobile */
        box-shadow: none !important; /* No shadow on mobile hover */
    }
    
    /* CRITICAL FIX: Override inline min-height that's causing tall mobile grid */
    .product-image-wrapper {
        min-height: auto !important; /* Override the 400px min-height */
        height: auto !important; /* Let aspect-ratio control height */
        aspect-ratio: 4/5 !important; /* Farfetch-style ratio - fashion industry standard */
        max-height: none !important; /* Remove conflicting max-height */
    }
    
    /* Ensure product images maintain aspect ratio on mobile */
    .ff-product-grid ul.products li.product .product-image-wrapper,
    .woocommerce ul.products li.product .product-image-wrapper {
        min-height: auto !important; /* Critical override */
        height: auto !important;
        aspect-ratio: 4/5 !important; /* 4:5 - Fashion industry standard like Farfetch */
        width: 100% !important;
        position: relative !important;
        overflow: hidden !important;
    }
    
    /* NUCLEAR OPTION: Override ANY inline styles on mobile */
    .product-image-wrapper[style*="min-height"] {
        min-height: auto !important;
        height: auto !important;
    }
}

/* PERFORMANCE: Reduce repaints and reflows */
.woocommerce ul.products li.product {
    will-change: auto !important; /* No transform optimization needed */
    contain: layout style paint !important;
}

/* Ensure consistent baseline for all products */
.woocommerce ul.products li.product * {
    box-sizing: border-box !important;
}

/* Clean up any remaining border artifacts */
.woocommerce ul.products li.product::before,
.woocommerce ul.products li.product::after,
.woocommerce ul.products li.product *::before,
.woocommerce ul.products li.product *::after {
    border: none !important;
    box-shadow: none !important;
}