.visually-hidden {
            position: absolute;
            width: 1px;
            height: 1px;
            margin: -1px;
            padding: 0;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            border: 0;
        }

        /* Prevent layout shifts */
        img {
            display: block;
            max-width: 100%;
            height: auto;
        }

        /* Reserve space for images in sliders */
        .swiper-slide img {
            aspect-ratio: 420 / 630; /* Poster ratio */
            width: 100%;
            height: auto;
            object-fit: cover;
        }

        /* Video container aspect ratio */
        .vjs-wrap {
            position: relative;
            width: 100%;
            aspect-ratio: 16 / 9;
        }

        .vjs-wrap video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 0; /* keep video under overlays */
        }

        /* Hero Swiper - MOBILE FIRST */
        .hero-swiper {
            position: relative;          
            width: 100%;
            min-height: 400px;
            aspect-ratio: 9 / 15;
            overflow: hidden;
        }

        /* Moved fade from .hero-swiper::after to .swiper-slide::after */
        /* This ensures the fade is in the same stacking context as the text */
        .hero-swiper .swiper-slide {
            position: relative;
        }

        .hero-swiper .swiper-slide::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: -1px;
            height: 180px; /* adjust height if you want more/less shadow */
            pointer-events: none;
            z-index: 5; /* Above video (0), below text (999) */
            background: linear-gradient(
                to bottom,
                rgba(0, 0, 0, 0) 0%,
                rgba(0, 0, 0, 0.6) 50%,
                rgba(0, 0, 0, 0.95) 100%
            );
        }

        /* Hero Swiper - TABLET */
        @media (min-width: 640px) {
            .hero-swiper {
                min-height: 450px;
                aspect-ratio: 4 / 3;
            }
        }

        /* Hero Swiper - DESKTOP */
        @media (min-width: 1024px) {
            .hero-swiper {
                min-height: 600px;
                aspect-ratio: 25 / 9;
            }
        }

        /* Content sliders auto height */
        .content-slider .swiper {
            width: 100%;
            height: auto; /* Auto height based on content */
        }

        .content-slider .swiper-wrapper {
            display: flex;
            align-items: stretch;
        }

        .content-slider .swiper-slide {
            height: auto;
            display: flex;
        }

        /* Prevent text reflow */
        body {
            font-display: swap;
        }

        /* Reserve space for dynamic content */
        #order-count {
            min-width: 60px;
            display: inline-block;
            text-align: center;
        }

        /* Fix poster slides with images */
        .hero-swiper .swiper-slide .image-hero-container {
            width: 100%;
            height: 100%;
            min-height: inherit;
        }

        .hero-swiper .swiper-slide .image-hero-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* Mobile video adjustments */
        @media (max-width: 768px) {
            .vjs-wrap {
                aspect-ratio: 9 / 16;
                min-height: 400px;
            }
        }

        /* If you have hero text overlay, keep it above everything */
        .hero-meta,
        .hero-overlay {
            position: relative;
            z-index: 10;
        }