/* Googlebot rendering safety fixes for product pages
   - Keep primary content visible before JavaScript runs.
   - Use JS-enhanced slider hiding only after html.js is present.
*/

.page-hero,
.page-hero-content,
.product-ai-summary,
.detail-section,
.about-section,
.product-preview,
.about-feature-card,
.recommended-store-card,
.feature-detail-card,
.screen-feature-card,
.benefit-card,
.product-card,
.case-card,
.faq-item,
.cta-section,
.contact-cta,
.fade-in-up {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

/* Without JavaScript, show every slide in normal document flow so images remain crawlable and visible. */
.dsystem-slideshow,
.screensaver-slideshow {
    position: relative !important;
    height: auto !important;
}

.dsystem-slide,
.screensaver-slide {
    position: relative !important;
    inset: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    z-index: auto !important;
}

/* When JavaScript is available, restore the designed slideshow behavior. */
html.js .dsystem-slideshow,
html.js .screensaver-slideshow {
    height: 100% !important;
}

html.js .dsystem-slide,
html.js .screensaver-slide {
    position: absolute !important;
    inset: 0 !important;
    opacity: 0 !important;
    transition: opacity 0.6s ease-in-out;
}

html.js .dsystem-slide.active,
html.js .screensaver-slide.active {
    opacity: 1 !important;
    z-index: 2 !important;
}

.product-logo-hero img,
.page-hero img,
.product-preview img {
    max-width: 100%;
    height: auto;
}