/* 
* La Tienda de Don Goyo - Performance Styles
* Styles for improving website performance
*/

/* Lazy loading image styles */
img.lazy {
    opacity: 1; /* Changed from 0 to ensure images are visible by default */
    transition: opacity 0.3s;
}

img.lazy.loaded {
    opacity: 1;
}

/* Reduce layout shifts with aspect ratio boxes */
.product-image {
    position: relative;
    padding-bottom: 100%; /* 1:1 Aspect Ratio */
    height: 0;
    overflow: hidden;
}

.product-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Content-visibility for off-screen content */
@supports (content-visibility: auto) {
    .catalog-section,
    .testimonials,
    .featured-products,
    .about-section,
    .contact-section {
        content-visibility: auto;
        contain-intrinsic-size: 1px 1000px; /* Approximate size placeholder */
    }
}

/* Font display swap to prevent invisible text during font loading */
/* Note: We're not actually defining our own font-face rules since we're using Google Fonts.
   These were placeholder rules that have been removed to fix lint errors.
   The actual font loading is handled via the <link> tags in the HTML head. */

/* Apply font-display: swap to all text elements for better performance */
body {
    font-display: swap;
}

/* Reduce animation for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}