/* Product AdSense Ad Styles - Optimized for Fastest Loading & Mobile Full-Width */

/* Ad Container Base Styles - Performance Optimized */
.product-ad-container {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 20px auto;
    text-align: center;
    min-height: 100px;
    position: relative;
    overflow: hidden;
    background: transparent;
    /* Performance optimizations */
    contain: layout style paint;
    will-change: auto;
    transform: translateZ(0); /* GPU acceleration */
    backface-visibility: hidden;
    box-sizing: border-box;
}

/* Ensure ads are visible and don't disappear */
.product-ad-container ins.adsbygoogle {
    display: block !important;
    width: 100% !important;
    min-height: 100px !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Fix for blank ads - ensure container has proper dimensions */
.product-ad-container {
    line-height: 0;
}

.product-ad-container ins.adsbygoogle[data-ad-status="unfilled"] {
    display: none !important;
}

/* 728x90 Banner Ads (Top, Infeed, Bottom) - Desktop */
.product-ad-728x90 {
    width: 100%;
    max-width: 728px;
    margin: 20px auto;
    text-align: center;
}

.product-ad-728x90 ins.adsbygoogle {
    display: inline-block !important;
    width: 728px !important;
    height: 90px !important;
}

/* Banner Top Ad */
.product-ad-banner-top {
    margin: 20px auto;
}

/* Rectangle Sidebar Ad */
.product-ad-rectangle-sidebar {
    min-height: 250px;
    max-width: 300px;
    margin: 20px auto;
}

/* Large Rectangle Ad */
.product-ad-large-rectangle {
    min-height: 280px;
    max-width: 336px;
    margin: 20px auto;
}

/* In-feed Ad - 728x90 Banner Style */
.product-ad-infeed {
    margin: 30px auto;
}

/* Bottom Ad - 728x90 Banner */
.product-ad-bottom {
    margin: 40px auto 20px;
}

/* ==================== MOBILE RESPONSIVE - FULL WIDTH ==================== */
@media (max-width: 768px) {
    .product-ad-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 15px auto;
        padding: 0;
    }
    
    /* 728x90 Banner Ads - FULL WIDTH on Mobile */
    .product-ad-728x90 {
        max-width: 100% !important;
        width: 100% !important;
        margin: 15px 0 !important;
        padding: 0 !important;
    }
    
    .product-ad-728x90 ins.adsbygoogle {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 90px !important;
        min-height: 90px !important;
    }
    
    .product-ad-banner-top {
        margin: 15px 0 !important;
    }
    
    .product-ad-infeed {
        margin: 20px 0 !important;
    }
    
    .product-ad-bottom {
        margin: 30px 0 15px !important;
    }
    
    /* Sidebar Rectangle Ads - Keep responsive */
    .product-ad-rectangle-sidebar {
        min-height: 250px;
        max-width: 100%;
        margin: 15px auto;
    }
    
    .product-ad-large-rectangle {
        min-height: 250px;
        max-width: 100%;
        margin: 15px auto;
    }
    
    /* Ensure adsbygoogle elements are visible on mobile */
    .product-ad-container ins.adsbygoogle {
        display: block !important;
        width: 100% !important;
        min-height: 50px !important;
    }
}

/* Tablet Styles */
@media (min-width: 769px) and (max-width: 1024px) {
    .product-ad-banner-top {
        max-width: 728px;
    }
    
    .product-ad-infeed {
        max-width: 728px;
    }
    
    .product-ad-rectangle-sidebar {
        max-width: 300px;
    }
    
    .product-ad-large-rectangle {
        max-width: 336px;
    }
    
    .product-ad-bottom {
        max-width: 728px;
    }
}

/* Desktop Styles */
@media (min-width: 1025px) {
    .product-ad-banner-top {
        max-width: 728px;
    }
    
    .product-ad-infeed {
        max-width: 728px;
    }
    
    .product-ad-rectangle-sidebar {
        max-width: 300px;
    }
    
    .product-ad-large-rectangle {
        max-width: 336px;
    }
    
    .product-ad-bottom {
        max-width: 728px;
    }
}

/* Performance: Prevent layout shifts and optimize rendering */
.product-ad-container {
    contain: layout style paint;
    content-visibility: auto; /* Modern browsers: skip rendering until visible */
}

/* Optimize ad rendering */
.product-ad-container ins.adsbygoogle {
    contain: layout style paint;
    transform: translateZ(0); /* GPU acceleration */
}

/* Fast loading placeholder - prevents layout shift */
.product-ad-container:not(:has(ins[data-adsbygoogle-status="filled"])) {
    min-height: 90px;
}

/* Prevent ad disappearing - ensure container stays visible */
.product-ad-container[data-ad-loaded="true"] {
    min-height: 90px;
    visibility: visible !important;
    opacity: 1 !important;
}