/* PDP Performance Optimization - Speed & Loading */

/* ===== LAZY LOADING OPTIMIZATION ===== */
/* Optimize images that are not immediately visible */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s ease;
}

img[loading="lazy"].loaded {
    opacity: 1;
}

/* ===== CRITICAL IMAGE OPTIMIZATION ===== */
/* Main product image - highest priority */
#productmainimage {
    fetchpriority: high;
    decoding: sync; /* Critical image - decode synchronously */
}

/* Non-critical images */
img:not(#productmainimage) {
    decoding: async; /* Non-critical images - decode asynchronously */
}

/* ===== PRELOAD OPTIMIZATION ===== */
/* Preload critical resources */
.pdp-preload-hint {
    display: none;
}

/* ===== FONT OPTIMIZATION ===== */
/* Optimize font loading */
@font-face {
    font-family: 'Lato-Regular';
    font-style: normal;
    font-weight: 400;
    font-display: swap; /* Improve font loading performance */
    src: local('Lato Regular'), local('Lato-Regular'),
         url(https://fonts.gstatic.com/s/lato/v11/UyBMtLsHKBKXelqf4x7VRQ.woff2) format('woff2');
    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Lato-Regular';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Lato Regular'), local('Lato-Regular'),
         url(https://fonts.gstatic.com/s/lato/v11/1YwB1sO8YE1Lyjf12WNiUA.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

@font-face {
    font-family: 'Lato-Bold';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Lato Bold'), local('Lato-Bold'),
         url(https://fonts.gstatic.com/s/lato/v11/DvlFBScY1r-FMtZSYIYoYw.woff2) format('woff2');
}

/* ===== CSS OPTIMIZATION ===== */
/* Use CSS containment for better performance */
.product-slider {
    contain: layout style paint;
}

.product-details {
    contain: layout style paint;
}

/* ===== ANIMATION OPTIMIZATION ===== */
/* Use transform and opacity for better performance */
.pdp-smooth-transition {
    transition: transform 0.3s ease, opacity 0.3s ease;
    will-change: transform, opacity;
}

/* ===== IMAGE OPTIMIZATION ===== */
/* Optimize image rendering */
img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: optimize-contrast;
}

/* ===== SCROLL OPTIMIZATION ===== */
/* Optimize scrolling performance */
.Product-detail {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* ===== REDUCED MOTION SUPPORT ===== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===== HIGH CONTRAST SUPPORT ===== */
@media (prefers-contrast: high) {
    .product-slider,
    .product-details {
        border: 1px solid;
    }
}

/* ===== DARK MODE SUPPORT ===== */
@media (prefers-color-scheme: dark) {
    .product-details {
        color: #ffffff;
    }
    
    .product-details .product-title h1 {
        color: #ffffff;
    }
}

/* ===== MOBILE PERFORMANCE ===== */
/* Optimize for mobile performance */
@media (max-width: 767px) {
    /* Reduce animations on mobile for better performance */
    * {
        animation-duration: 0.2s !important;
        transition-duration: 0.2s !important;
    }
    
    /* Optimize touch interactions */
    button, .btn, a {
        touch-action: manipulation;
    }
}

/* ===== CRITICAL CSS INLINING HELPERS ===== */
/* These classes help identify critical CSS */
.pdp-critical {
    /* Critical above-the-fold styles */
}

.pdp-non-critical {
    /* Non-critical below-the-fold styles */
}

/* ===== RESOURCE HINTS ===== */
/* DNS prefetch for external resources */
.pdp-dns-prefetch {
    /* Applied via HTML link tags */
}

/* ===== CACHING OPTIMIZATION ===== */
/* Optimize cache headers via CSS (complemented by server config) */
.pdp-cacheable {
    /* Static content that can be cached */
}

/* ===== COMPRESSION OPTIMIZATION ===== */
/* Optimize for gzip/brotli compression */
.pdp-compressible {
    /* Content that compresses well */
}

/* ===== LAZY LOADING ENHANCEMENTS ===== */
/* Enhanced lazy loading with intersection observer */
.pdp-lazy {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.pdp-lazy.loaded {
    opacity: 1;
}

/* ===== PERFORMANCE MONITORING ===== */
/* Classes for performance monitoring */
.pdp-performance-mark {
    /* Mark elements for performance monitoring */
}

/* ===== ACCESSIBILITY PERFORMANCE ===== */
/* Optimize for screen readers without impacting performance */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ===== MODERN CSS FEATURES ===== */
/* Use modern CSS features for better performance */
.pdp-modern-grid {
    display: grid;
    gap: 1rem;
}

.pdp-modern-flex {
    display: flex;
    gap: 1rem;
}

/* ===== OPTIMIZATION UTILITIES ===== */
/* Utility classes for performance optimization */
.pdp-gpu-accelerated {
    transform: translateZ(0);
    will-change: transform;
}

.pdp-no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.pdp-pointer-events-none {
    pointer-events: none;
}