/* ============================================================
   CRITICAL: FIRST-PAINT MOBILE SLIDER OVERRIDE
   Loads BEFORE CSS files to prevent flicker on initial paint
   NEW MOBILE SYSTEM ONLY - Uses .mobile-hero-system wrapper
   ============================================================ */
@media (max-width: 991px) {
    /* CRITICAL: Hide old system IMMEDIATELY before it can render */
    .desktop-hero-system .search-luxury-wrapper,
    .page-section:has(.site-search-module:not(.mobile-hero-search-overlay)) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    
    /* Prevent old mobile-search-force-visible.js from hiding showcase */
    .site-showcase.mobile-hero-system {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: calc(75vh - 12px) !important;
        min-height: 330px !important;
        max-height: 520px !important;
        overflow: visible !important;
    }
    
    /* NEW MOBILE SYSTEM ONLY - Isolated from old systems */
    .mobile-hero-system.site-showcase {
        display: block !important;
        visibility: visible !important;
        position: relative !important;
        height: calc(75vh - 12px) !important;
        min-height: 330px !important;
        max-height: 520px !important;
        overflow: visible !important;
        background: transparent !important;
    }
    
    /* Kill FlexSlider’s default white box before flexslider.css paints */
    .mobile-hero-system .hero-slider.flexslider {
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    .mobile-hero-system .hero-slider .flex-viewport,
    .mobile-hero-system .hero-slider ul.slides {
        background: transparent !important;
        background-color: transparent !important;
    }
    
    .mobile-hero-system .hero-slider {
        display: block !important;
        visibility: visible !important;
        height: calc(75vh - 12px) !important;
        min-height: 330px !important;
        max-height: 520px !important;
        background: transparent !important;
        background-color: transparent !important;
    }
    
    /* Do not force display on all slides — FlexSlider needs display:none on inactive items.
       No filter() — WebKit often defers compositing until interaction. Slides get inline BG in vitrin.php. */
    .mobile-hero-system .hero-slider .slides li {
        visibility: visible !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }
    
    /* Ensure overlay is visible immediately (flex center, no transform) */
    .mobile-search-overlay-wrapper {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: stretch !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        -webkit-transform: none !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 25 !important;
    }
}