/* =========================================================
   LIVETV BANNER OVERRIDE
   ========================================================= */

/* ---------- Root scope ---------- */
.live-tv-page .live-tv-hero-section,
.live-tv-page .hero-section {
    position: relative;
}

.live-tv-page .live-tv-hero-carousel,
.live-tv-page .hero-carousel {
    position: relative;
}

    .live-tv-page .live-tv-hero-carousel .carousel-inner,
    .live-tv-page .hero-carousel .carousel-inner {
        position: relative;
    }

    /* ---------- Banner card ---------- */
    .live-tv-page .live-tv-hero-carousel .carousel-item,
    .live-tv-page .hero-carousel .carousel-item {
        position: relative !important;
        overflow: hidden !important;
        background: #000 !important;
        border-radius: 0 0 28px 28px !important;
        isolation: isolate;
        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
    }

        /* ---------- Media layer ---------- */
        .live-tv-page .live-tv-hero-carousel .carousel-item .live-tv-hero-media,
        .live-tv-page .hero-carousel .carousel-item .hero-media,
        .live-tv-page .hero-carousel .carousel-item .live-tv-hero-media {
            position: absolute !important;
            inset: 0 !important;
            z-index: 0 !important;
            overflow: hidden !important;
            background: #000 !important;
            display: flex;
            align-items: center;
            justify-content: center;
        }

            .live-tv-page .live-tv-hero-carousel .carousel-item .live-tv-hero-media > img,
            .live-tv-page .live-tv-hero-carousel .carousel-item .live-tv-hero-media > video,
            .live-tv-page .live-tv-hero-carousel .carousel-item .live-tv-hero-media .hero-video,
            .live-tv-page .hero-carousel .carousel-item .hero-media > img,
            .live-tv-page .hero-carousel .carousel-item .hero-media > video,
            .live-tv-page .hero-carousel .carousel-item .hero-video,
            .live-tv-page .hero-carousel .carousel-item .live-tv-hero-media > img,
            .live-tv-page .hero-carousel .carousel-item .live-tv-hero-media > video {
                position: absolute !important;
                inset: 0 !important;
                width: 100% !important;
                height: 100% !important;
                display: block !important;
                background: #000 !important;
            }

        .live-tv-page .live-tv-hero-carousel .carousel-item .hero-preview,
        .live-tv-page .hero-carousel .carousel-item .hero-preview {
            position: absolute !important;
            inset: 0 !important;
            z-index: 1 !important;
        }

        /* ---------- Overlay ---------- */
        .live-tv-page .live-tv-hero-carousel .carousel-item .live-tv-hero-overlay,
        .live-tv-page .hero-carousel .carousel-item .hero-overlay,
        .live-tv-page .hero-carousel .carousel-item .live-tv-hero-overlay {
            position: absolute !important;
            inset: 0 !important;
            z-index: 2 !important;
            pointer-events: none !important;
        }

        /* ---------- Content fixed on banner ---------- */
        .live-tv-page .live-tv-hero-carousel .carousel-item .site-container.hero-content,
        .live-tv-page .hero-carousel .carousel-item .site-container.hero-content,
        .live-tv-page .live-tv-hero-carousel .carousel-item .hero-content,
        .live-tv-page .hero-carousel .carousel-item .hero-content {
            position: absolute !important;
            left: 50% !important;
            transform: translateX(-50%) !important;
            top: auto !important;
            width: min(100% - 2rem, var(--container-max, 1440px)) !important;
            margin: 0 auto !important;
            padding: 0 !important;
            z-index: 3 !important;
            pointer-events: none !important;
        }

            .live-tv-page .live-tv-hero-carousel .carousel-item .hero-content .row,
            .live-tv-page .hero-carousel .carousel-item .hero-content .row {
                margin: 0 !important;
                align-items: flex-end !important;
            }

            .live-tv-page .live-tv-hero-carousel .carousel-item .hero-content .col-lg-7,
            .live-tv-page .hero-carousel .carousel-item .hero-content .col-lg-7 {
                padding: 0 !important;
                flex: 0 0 auto !important;
            }

        /* make actual content clickable */
        .live-tv-page .live-tv-hero-carousel .carousel-item .hero-logo,
        .live-tv-page .live-tv-hero-carousel .carousel-item .hero-copy,
        .live-tv-page .live-tv-hero-carousel .carousel-item .hero-actions,
        .live-tv-page .live-tv-hero-carousel .carousel-item .hero-actions .btn,
        .live-tv-page .live-tv-hero-carousel .carousel-item h1,
        .live-tv-page .live-tv-hero-carousel .carousel-item .hero-title,
        .live-tv-page .hero-carousel .carousel-item .hero-logo,
        .live-tv-page .hero-carousel .carousel-item .hero-copy,
        .live-tv-page .hero-carousel .carousel-item .hero-actions,
        .live-tv-page .hero-carousel .carousel-item .hero-actions .btn,
        .live-tv-page .hero-carousel .carousel-item h1,
        .live-tv-page .hero-carousel .carousel-item .hero-title {
            pointer-events: auto !important;
        }

        /* ---------- Common content styling ---------- */
        .live-tv-page .hero-carousel .carousel-item .hero-logo,
        .live-tv-page .live-tv-hero-carousel .carousel-item .hero-logo {
            display: block;
            width: auto;
            height: auto;
            filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.38));
        }

        .live-tv-page .hero-carousel .carousel-item h1,
        .live-tv-page .hero-carousel .carousel-item .hero-title,
        .live-tv-page .live-tv-hero-carousel .carousel-item h1,
        .live-tv-page .live-tv-hero-carousel .carousel-item .hero-title {
            margin: 0;
            color: #fff;
            font-weight: 800;
            letter-spacing: -0.04em;
            line-height: 1.08;
        }

        .live-tv-page .hero-carousel .carousel-item .hero-copy,
        .live-tv-page .live-tv-hero-carousel .carousel-item .hero-copy {
            color: rgba(255, 255, 255, 0.92) !important;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            max-width: 100% !important;
            margin: 0 !important;
        }

        .live-tv-page .hero-carousel .carousel-item .hero-actions,
        .live-tv-page .live-tv-hero-carousel .carousel-item .hero-actions {
            display: flex !important;
            align-items: center !important;
            flex-wrap: nowrap !important;
        }

            .live-tv-page .hero-carousel .carousel-item .hero-actions .btn,
            .live-tv-page .live-tv-hero-carousel .carousel-item .hero-actions .btn {
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                border-radius: 999px !important;
                white-space: nowrap !important;
                flex: 0 0 auto !important;
                width: auto !important;
            }

                .live-tv-page .hero-carousel .carousel-item .hero-actions .btn i,
                .live-tv-page .live-tv-hero-carousel .carousel-item .hero-actions .btn i {
                    margin-right: 4px !important;
                    line-height: 1 !important;
                }

            .live-tv-page .hero-carousel .carousel-item .hero-actions .button-text,
            .live-tv-page .live-tv-hero-carousel .carousel-item .hero-actions .button-text {
                white-space: nowrap !important;
                margin-left: -19px;
            }

/* =========================================================
   LARGE DESKTOP
   ========================================================= */
@media (min-width: 1200px) {
    .live-tv-page .live-tv-hero-carousel .carousel-item,
    .live-tv-page .hero-carousel .carousel-item {
        height: clamp(430px, 34.5vw, 560px) !important;
        min-height: clamp(430px, 34.5vw, 560px) !important;
    }

        .live-tv-page .live-tv-hero-carousel .carousel-item .live-tv-hero-media > img,
        .live-tv-page .live-tv-hero-carousel .carousel-item .live-tv-hero-media > video,
        .live-tv-page .live-tv-hero-carousel .carousel-item .live-tv-hero-media .hero-video,
        .live-tv-page .hero-carousel .carousel-item .hero-media > img,
        .live-tv-page .hero-carousel .carousel-item .hero-media > video,
        .live-tv-page .hero-carousel .carousel-item .hero-video,
        .live-tv-page .hero-carousel .carousel-item .live-tv-hero-media > img,
        .live-tv-page .hero-carousel .carousel-item .live-tv-hero-media > video {
            object-fit: cover !important;
            object-position: center center !important;
        }

        .live-tv-page .live-tv-hero-carousel .carousel-item .live-tv-hero-overlay,
        .live-tv-page .hero-carousel .carousel-item .hero-overlay,
        .live-tv-page .hero-carousel .carousel-item .live-tv-hero-overlay {
            background: radial-gradient(circle at 78% 26%, rgba(229, 9, 20, 0.16), transparent 24%), linear-gradient(90deg, rgba(10,11,15,0.82) 0%, rgba(10,11,15,0.50) 34%, rgba(10,11,15,0.14) 62%, rgba(10,11,15,0.05) 100%), linear-gradient(180deg, rgba(10,11,15,0.04) 0%, rgba(10,11,15,0.08) 44%, rgba(10,11,15,0.70) 100%) !important;
        }

        .live-tv-page .live-tv-hero-carousel .carousel-item .site-container.hero-content,
        .live-tv-page .hero-carousel .carousel-item .site-container.hero-content {
            bottom: clamp(54px, 6vw, 110px) !important;
        }

        .live-tv-page .live-tv-hero-carousel .carousel-item .hero-content .col-lg-7,
        .live-tv-page .hero-carousel .carousel-item .hero-content .col-lg-7 {
            width: min(46%, 620px) !important;
            max-width: min(46%, 620px) !important;
        }

        .live-tv-page .hero-carousel .carousel-item .hero-logo,
        .live-tv-page .live-tv-hero-carousel .carousel-item .hero-logo {
            max-width: 240px !important;
            max-height: 92px !important;
            margin-bottom: 14px !important;
        }

        .live-tv-page .hero-carousel .carousel-item h1,
        .live-tv-page .hero-carousel .carousel-item .hero-title,
        .live-tv-page .live-tv-hero-carousel .carousel-item h1,
        .live-tv-page .live-tv-hero-carousel .carousel-item .hero-title {
            font-size: clamp(2rem, 2.6vw, 3.2rem) !important;
            margin-bottom: 12px !important;
        }

        .live-tv-page .hero-carousel .carousel-item .hero-copy,
        .live-tv-page .live-tv-hero-carousel .carousel-item .hero-copy {
            font-size: 1rem !important;
            line-height: 1.6 !important;
            margin-bottom: 18px !important;
            -webkit-line-clamp: 3;
            max-width: 560px !important;
        }

        .live-tv-page .hero-carousel .carousel-item .hero-actions,
        .live-tv-page .live-tv-hero-carousel .carousel-item .hero-actions {
            gap: 12px !important;
        }

            .live-tv-page .hero-carousel .carousel-item .hero-actions .btn,
            .live-tv-page .live-tv-hero-carousel .carousel-item .hero-actions .btn {
                min-height: 46px !important;
                padding: 10px 22px !important;
                font-size: 0.92rem !important;
            }
}

/* =========================================================
   LAPTOP / SMALL DESKTOP
   ========================================================= */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .live-tv-page .live-tv-hero-carousel .carousel-item,
    .live-tv-page .hero-carousel .carousel-item {
        height: clamp(390px, 36vw, 500px) !important;
        min-height: clamp(390px, 36vw, 500px) !important;
    }

        .live-tv-page .live-tv-hero-carousel .carousel-item .live-tv-hero-media > img,
        .live-tv-page .live-tv-hero-carousel .carousel-item .live-tv-hero-media > video,
        .live-tv-page .live-tv-hero-carousel .carousel-item .live-tv-hero-media .hero-video,
        .live-tv-page .hero-carousel .carousel-item .hero-media > img,
        .live-tv-page .hero-carousel .carousel-item .hero-media > video,
        .live-tv-page .hero-carousel .carousel-item .hero-video,
        .live-tv-page .hero-carousel .carousel-item .live-tv-hero-media > img,
        .live-tv-page .hero-carousel .carousel-item .live-tv-hero-media > video {
            object-fit: cover !important;
            object-position: center center !important;
        }

        .live-tv-page .live-tv-hero-carousel .carousel-item .live-tv-hero-overlay,
        .live-tv-page .hero-carousel .carousel-item .hero-overlay,
        .live-tv-page .hero-carousel .carousel-item .live-tv-hero-overlay {
            background: linear-gradient(90deg, rgba(10,11,15,.78) 0%, rgba(10,11,15,.46) 36%, rgba(10,11,15,.12) 64%, rgba(10,11,15,.05) 100%), linear-gradient(180deg, rgba(10,11,15,.04) 0%, rgba(10,11,15,.08) 40%, rgba(10,11,15,.72) 100%) !important;
        }

        .live-tv-page .live-tv-hero-carousel .carousel-item .site-container.hero-content,
        .live-tv-page .hero-carousel .carousel-item .site-container.hero-content {
            bottom: 44px !important;
        }

        .live-tv-page .live-tv-hero-carousel .carousel-item .hero-content .col-lg-7,
        .live-tv-page .hero-carousel .carousel-item .hero-content .col-lg-7 {
            width: min(50%, 520px) !important;
            max-width: min(50%, 520px) !important;
        }

        .live-tv-page .hero-carousel .carousel-item .hero-logo,
        .live-tv-page .live-tv-hero-carousel .carousel-item .hero-logo {
            max-width: 190px !important;
            max-height: 72px !important;
            margin-bottom: 10px !important;
        }

        .live-tv-page .hero-carousel .carousel-item h1,
        .live-tv-page .hero-carousel .carousel-item .hero-title,
        .live-tv-page .live-tv-hero-carousel .carousel-item h1,
        .live-tv-page .live-tv-hero-carousel .carousel-item .hero-title {
            font-size: clamp(1.6rem, 2.2vw, 2.4rem) !important;
            margin-bottom: 8px !important;
        }

        .live-tv-page .hero-carousel .carousel-item .hero-copy,
        .live-tv-page .live-tv-hero-carousel .carousel-item .hero-copy {
            font-size: 0.9rem !important;
            line-height: 1.52 !important;
            margin-bottom: 14px !important;
            -webkit-line-clamp: 3;
            max-width: 100% !important;
        }

        .live-tv-page .hero-carousel .carousel-item .hero-actions,
        .live-tv-page .live-tv-hero-carousel .carousel-item .hero-actions {
            gap: 10px !important;
        }

            .live-tv-page .hero-carousel .carousel-item .hero-actions .btn,
            .live-tv-page .live-tv-hero-carousel .carousel-item .hero-actions .btn {
                min-height: 40px !important;
                padding: 8px 18px !important;
                font-size: 0.84rem !important;
            }
}

/* =========================================================
   TABLET
   ========================================================= */
@media (min-width: 768px) and (max-width: 991.98px) {
    .live-tv-page .live-tv-hero-carousel .carousel-item,
    .live-tv-page .hero-carousel .carousel-item {
        height: clamp(330px, 42vw, 420px) !important;
        min-height: clamp(330px, 42vw, 420px) !important;
        border-radius: 0 0 24px 24px !important;
    }

        .live-tv-page .live-tv-hero-carousel .carousel-item .live-tv-hero-media > img,
        .live-tv-page .live-tv-hero-carousel .carousel-item .live-tv-hero-media > video,
        .live-tv-page .live-tv-hero-carousel .carousel-item .live-tv-hero-media .hero-video,
        .live-tv-page .hero-carousel .carousel-item .hero-media > img,
        .live-tv-page .hero-carousel .carousel-item .hero-media > video,
        .live-tv-page .hero-carousel .carousel-item .hero-video,
        .live-tv-page .hero-carousel .carousel-item .live-tv-hero-media > img,
        .live-tv-page .hero-carousel .carousel-item .live-tv-hero-media > video {
            object-fit: contain !important;
            object-position: center center !important;
            background: #000 !important;
        }

        .live-tv-page .live-tv-hero-carousel .carousel-item .live-tv-hero-overlay,
        .live-tv-page .hero-carousel .carousel-item .hero-overlay,
        .live-tv-page .hero-carousel .carousel-item .live-tv-hero-overlay {
            background: linear-gradient(90deg, rgba(10,11,15,.66) 0%, rgba(10,11,15,.30) 42%, rgba(10,11,15,.08) 72%, rgba(10,11,15,0) 100%), linear-gradient(180deg, rgba(10,11,15,.05) 0%, rgba(10,11,15,.08) 36%, rgba(10,11,15,.78) 100%) !important;
        }

        .live-tv-page .live-tv-hero-carousel .carousel-item .site-container.hero-content,
        .live-tv-page .hero-carousel .carousel-item .site-container.hero-content {
            bottom: 18px !important;
            width: calc(100% - 32px) !important;
            left: 16px !important;
            transform: none !important;
        }

        .live-tv-page .live-tv-hero-carousel .carousel-item .hero-content .col-lg-7,
        .live-tv-page .hero-carousel .carousel-item .hero-content .col-lg-7 {
            width: min(64%, 360px) !important;
            max-width: min(64%, 360px) !important;
        }

        .live-tv-page .hero-carousel .carousel-item .hero-logo,
        .live-tv-page .live-tv-hero-carousel .carousel-item .hero-logo {
            max-width: 132px !important;
            max-height: 52px !important;
            margin-bottom: 7px !important;
        }

        .live-tv-page .hero-carousel .carousel-item h1,
        .live-tv-page .hero-carousel .carousel-item .hero-title,
        .live-tv-page .live-tv-hero-carousel .carousel-item h1,
        .live-tv-page .live-tv-hero-carousel .carousel-item .hero-title {
            font-size: 1.18rem !important;
            margin-bottom: 6px !important;
        }

        .live-tv-page .hero-carousel .carousel-item .hero-copy,
        .live-tv-page .live-tv-hero-carousel .carousel-item .hero-copy {
            font-size: 0.76rem !important;
            line-height: 1.34 !important;
            margin-bottom: 10px !important;
            -webkit-line-clamp: 2;
            max-width: 100% !important;
        }

        .live-tv-page .hero-carousel .carousel-item .hero-actions,
        .live-tv-page .live-tv-hero-carousel .carousel-item .hero-actions {
            gap: 8px !important;
        }

            .live-tv-page .hero-carousel .carousel-item .hero-actions .btn,
            .live-tv-page .live-tv-hero-carousel .carousel-item .hero-actions .btn {
                min-height: 34px !important;
                padding: 6px 12px !important;
                font-size: 0.72rem !important;
            }
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 767.98px) {
    .live-tv-page .live-tv-hero-section,
    .live-tv-page .hero-section {
        padding-top: 5.6rem !important;
    }

    .live-tv-page .live-tv-hero-carousel .carousel-item,
    .live-tv-page .hero-carousel .carousel-item {
        height: clamp(250px, 66vw, 340px) !important;
        min-height: clamp(250px, 66vw, 340px) !important;
        border-radius: 0 0 22px 22px !important;
    }

        .live-tv-page .live-tv-hero-carousel .carousel-item .live-tv-hero-media > img,
        .live-tv-page .live-tv-hero-carousel .carousel-item .live-tv-hero-media > video,
        .live-tv-page .live-tv-hero-carousel .carousel-item .live-tv-hero-media .hero-video,
        .live-tv-page .hero-carousel .carousel-item .hero-media > img,
        .live-tv-page .hero-carousel .carousel-item .hero-media > video,
        .live-tv-page .hero-carousel .carousel-item .hero-video,
        .live-tv-page .hero-carousel .carousel-item .live-tv-hero-media > img,
        .live-tv-page .hero-carousel .carousel-item .live-tv-hero-media > video {
            object-fit: contain !important;
            object-position: center center !important;
            background: #000 !important;
        }

        .live-tv-page .live-tv-hero-carousel .carousel-item .live-tv-hero-overlay,
        .live-tv-page .hero-carousel .carousel-item .hero-overlay,
        .live-tv-page .hero-carousel .carousel-item .live-tv-hero-overlay {
            background: linear-gradient(180deg, rgba(10,11,15,.02) 0%, rgba(10,11,15,.05) 34%, rgba(10,11,15,.88) 100%), linear-gradient(90deg, rgba(10,11,15,.22) 0%, rgba(10,11,15,.08) 30%, rgba(10,11,15,0) 72%) !important;
        }

        .live-tv-page .live-tv-hero-carousel .carousel-item .site-container.hero-content,
        .live-tv-page .hero-carousel .carousel-item .site-container.hero-content {
            bottom: 12px !important;
            left: 12px !important;
            transform: none !important;
            width: calc(100% - 24px) !important;
        }

        .live-tv-page .live-tv-hero-carousel .carousel-item .hero-content .col-lg-7,
        .live-tv-page .hero-carousel .carousel-item .hero-content .col-lg-7 {
            width: min(82%, 245px) !important;
            max-width: min(82%, 245px) !important;
        }

        .live-tv-page .hero-carousel .carousel-item .hero-logo,
        .live-tv-page .live-tv-hero-carousel .carousel-item .hero-logo {
            max-width: 88px !important;
            max-height: 34px !important;
            margin-bottom: 5px !important;
        }

        .live-tv-page .hero-carousel .carousel-item h1,
        .live-tv-page .hero-carousel .carousel-item .hero-title,
        .live-tv-page .live-tv-hero-carousel .carousel-item h1,
        .live-tv-page .live-tv-hero-carousel .carousel-item .hero-title {
            font-size: 0.9rem !important;
            margin-bottom: 4px !important;
        }

        .live-tv-page .hero-carousel .carousel-item .hero-copy,
        .live-tv-page .live-tv-hero-carousel .carousel-item .hero-copy {
            font-size: 0.68rem !important;
            line-height: 1.28 !important;
            margin-bottom: 8px !important;
            -webkit-line-clamp: 2;
            max-width: 100% !important;
        }

        .live-tv-page .hero-carousel .carousel-item .hero-actions,
        .live-tv-page .live-tv-hero-carousel .carousel-item .hero-actions {
            gap: 6px !important;
        }

            .live-tv-page .hero-carousel .carousel-item .hero-actions .btn,
            .live-tv-page .live-tv-hero-carousel .carousel-item .hero-actions .btn {
                min-height: 30px !important;
                height: 30px !important;
                padding: 5px 10px !important;
                font-size: 0.66rem !important;
                max-width: 48% !important;
            }

                .live-tv-page .hero-carousel .carousel-item .hero-actions .btn i,
                .live-tv-page .live-tv-hero-carousel .carousel-item .hero-actions .btn i {
                    font-size: 0.64rem !important;
                }

        .live-tv-page .hero-carousel .carousel-item .hero-preview,
        .live-tv-page .live-tv-hero-carousel .carousel-item .hero-preview {
            display: none !important;
        }

    .live-tv-page .live-tv-hero-carousel .carousel-control-prev,
    .live-tv-page .live-tv-hero-carousel .carousel-control-next,
    .live-tv-page .hero-carousel .carousel-control-prev,
    .live-tv-page .hero-carousel .carousel-control-next {
        width: 12% !important;
        z-index: 5 !important;
    }

    .live-tv-page .live-tv-hero-carousel .carousel-indicators,
    .live-tv-page .hero-carousel .carousel-indicators {
        display: none !important;
    }
}

/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */
@media (max-width: 420px) {
    .live-tv-page .live-tv-hero-carousel .carousel-item,
    .live-tv-page .hero-carousel .carousel-item {
        height: clamp(228px, 69vw, 300px) !important;
        min-height: clamp(228px, 69vw, 300px) !important;
    }

        .live-tv-page .live-tv-hero-carousel .carousel-item .site-container.hero-content,
        .live-tv-page .hero-carousel .carousel-item .site-container.hero-content {
            bottom: 10px !important;
            left: 10px !important;
            width: calc(100% - 20px) !important;
        }

        .live-tv-page .live-tv-hero-carousel .carousel-item .hero-content .col-lg-7,
        .live-tv-page .hero-carousel .carousel-item .hero-content .col-lg-7 {
            width: min(84%, 225px) !important;
            max-width: min(84%, 225px) !important;
        }

        .live-tv-page .hero-carousel .carousel-item .hero-logo,
        .live-tv-page .live-tv-hero-carousel .carousel-item .hero-logo {
            max-width: 78px !important;
            max-height: 30px !important;
        }

        .live-tv-page .hero-carousel .carousel-item .hero-copy,
        .live-tv-page .live-tv-hero-carousel .carousel-item .hero-copy {
            font-size: 0.64rem !important;
        }

        .live-tv-page .hero-carousel .carousel-item .hero-actions,
        .live-tv-page .live-tv-hero-carousel .carousel-item .hero-actions {
            gap: 5px !important;
        }

            .live-tv-page .hero-carousel .carousel-item .hero-actions .btn,
            .live-tv-page .live-tv-hero-carousel .carousel-item .hero-actions .btn {
                min-height: 28px !important;
                height: 28px !important;
                font-size: 0.63rem !important;
                padding: 4px 8px !important;
            }

                .live-tv-page .hero-carousel .carousel-item .hero-actions .btn i,
                .live-tv-page .live-tv-hero-carousel .carousel-item .hero-actions .btn i {
                    margin-right: 3px !important;
                }
}


/* =========================================================
   LIVETV FINAL MOBILE/TABLET BLACK-SPACE FIX
   Load this LAST
   ========================================================= */

@media (max-width: 991.98px) {

    /* kill all inherited oversized heights */
    .live-tv-page .hero-section,
    .live-tv-page .hero-carousel,
    .live-tv-page .carousel,
    .live-tv-page .carousel-inner,
    .live-tv-page .carousel-item,
    .live-tv-page .live-tv-hero-section,
    .live-tv-page .live-tv-hero-carousel {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

        /* the slide itself should size by aspect ratio only */
        .live-tv-page .live-tv-hero-carousel .carousel-item,
        .live-tv-page .hero-carousel .carousel-item {
            position: relative !important;
            aspect-ratio: 1536 / 530 !important;
            background: #000 !important;
            overflow: hidden !important;
            border-radius: 0 0 22px 22px !important;
        }

            /* media must fully occupy the slide */
            .live-tv-page .live-tv-hero-carousel .carousel-item .live-tv-hero-media,
            .live-tv-page .hero-carousel .carousel-item .hero-media,
            .live-tv-page .hero-carousel .carousel-item .live-tv-hero-media {
                position: absolute !important;
                inset: 0 !important;
                width: 100% !important;
                height: 100% !important;
                min-height: 0 !important;
                max-height: none !important;
                overflow: hidden !important;
                background: #000 !important;
                display: block !important;
            }

                /* image/video must fill actual banner box */
                .live-tv-page .live-tv-hero-carousel .carousel-item .live-tv-hero-media > img,
                .live-tv-page .live-tv-hero-carousel .carousel-item .live-tv-hero-media > video,
                .live-tv-page .live-tv-hero-carousel .carousel-item .live-tv-hero-media .hero-video,
                .live-tv-page .hero-carousel .carousel-item .hero-media > img,
                .live-tv-page .hero-carousel .carousel-item .hero-media > video,
                .live-tv-page .hero-carousel .carousel-item .hero-video,
                .live-tv-page .hero-carousel .carousel-item .live-tv-hero-media > img,
                .live-tv-page .hero-carousel .carousel-item .live-tv-hero-media > video {
                    position: absolute !important;
                    inset: 0 !important;
                    width: 100% !important;
                    height: 100% !important;
                    min-height: 0 !important;
                    max-height: none !important;
                    object-fit: cover !important;
                    object-position: center center !important;
                    display: block !important;
                    background: transparent !important;
                }

            /* overlay only over the real banner */
            .live-tv-page .live-tv-hero-carousel .carousel-item .live-tv-hero-overlay,
            .live-tv-page .hero-carousel .carousel-item .hero-overlay,
            .live-tv-page .hero-carousel .carousel-item .live-tv-hero-overlay {
                position: absolute !important;
                inset: 0 !important;
                z-index: 2 !important;
                pointer-events: none !important;
            }

            /* keep content inside banner */
            .live-tv-page .live-tv-hero-carousel .carousel-item .site-container.hero-content,
            .live-tv-page .hero-carousel .carousel-item .site-container.hero-content,
            .live-tv-page .live-tv-hero-carousel .carousel-item .hero-content,
            .live-tv-page .hero-carousel .carousel-item .hero-content {
                position: absolute !important;
                left: 12px !important;
                right: 12px !important;
                bottom: 12px !important;
                top: auto !important;
                width: auto !important;
                max-width: none !important;
                transform: none !important;
                margin: 0 !important;
                padding: 0 !important;
                z-index: 3 !important;
            }

                .live-tv-page .live-tv-hero-carousel .carousel-item .hero-content .row,
                .live-tv-page .hero-carousel .carousel-item .hero-content .row {
                    margin: 0 !important;
                    align-items: flex-end !important;
                }

                .live-tv-page .live-tv-hero-carousel .carousel-item .hero-content .col-lg-7,
                .live-tv-page .hero-carousel .carousel-item .hero-content .col-lg-7 {
                    width: min(82%, 250px) !important;
                    max-width: min(82%, 250px) !important;
                    padding: 0 !important;
                    flex: 0 0 auto !important;
                }

            .live-tv-page .live-tv-hero-carousel .carousel-item .hero-logo,
            .live-tv-page .hero-carousel .carousel-item .hero-logo {
                max-width: 88px !important;
                max-height: 34px !important;
                margin-bottom: 5px !important;
            }

            .live-tv-page .live-tv-hero-carousel .carousel-item h1,
            .live-tv-page .live-tv-hero-carousel .carousel-item .hero-title,
            .live-tv-page .hero-carousel .carousel-item h1,
            .live-tv-page .hero-carousel .carousel-item .hero-title {
                font-size: 0.9rem !important;
                margin-bottom: 4px !important;
            }

            .live-tv-page .live-tv-hero-carousel .carousel-item .hero-copy,
            .live-tv-page .hero-carousel .carousel-item .hero-copy {
                font-size: 0.68rem !important;
                line-height: 1.28 !important;
                margin-bottom: 8px !important;
                -webkit-line-clamp: 2 !important;
                display: -webkit-box !important;
                -webkit-box-orient: vertical !important;
                overflow: hidden !important;
            }

            .live-tv-page .live-tv-hero-carousel .carousel-item .hero-actions,
            .live-tv-page .hero-carousel .carousel-item .hero-actions {
                display: flex !important;
                flex-direction: row !important;
                flex-wrap: nowrap !important;
                gap: 6px !important;
                align-items: center !important;
            }

                .live-tv-page .live-tv-hero-carousel .carousel-item .hero-actions .btn,
                .live-tv-page .hero-carousel .carousel-item .hero-actions .btn {
                    min-height: 30px !important;
                    height: 30px !important;
                    padding: 5px 10px !important;
                    font-size: 0.66rem !important;
                    width: auto !important;
                    max-width: 48% !important;
                    flex: 0 0 auto !important;
                }

            .live-tv-page .live-tv-hero-carousel .carousel-item .hero-preview,
            .live-tv-page .hero-carousel .carousel-item .hero-preview {
                display: none !important;
            }
}

@media (max-width: 575.98px) {
    .live-tv-page .live-tv-hero-carousel .carousel-item,
    .live-tv-page .hero-carousel .carousel-item {
        aspect-ratio: 16 / 9 !important;
    }

        .live-tv-page .live-tv-hero-carousel .carousel-item .site-container.hero-content,
        .live-tv-page .hero-carousel .carousel-item .site-container.hero-content,
        .live-tv-page .live-tv-hero-carousel .carousel-item .hero-content,
        .live-tv-page .hero-carousel .carousel-item .hero-content {
            left: 10px !important;
            right: 10px !important;
            bottom: 10px !important;
        }

            .live-tv-page .live-tv-hero-carousel .carousel-item .hero-content .col-lg-7,
            .live-tv-page .hero-carousel .carousel-item .hero-content .col-lg-7 {
                width: min(84%, 230px) !important;
                max-width: min(84%, 230px) !important;
            }
}

/* =========================================
   LIVETV MOBILE - SHOW FULL BANNER
   ========================================= */
@media (max-width: 575.98px) {

    .live-tv-page .live-tv-hero-carousel .carousel-item,
    .live-tv-page .hero-carousel .carousel-item {
        aspect-ratio: 1536 / 530 !important;
        height: auto !important;
        min-height: 0 !important;
        background: #000 !important;
    }

        .live-tv-page .live-tv-hero-carousel .carousel-item .live-tv-hero-media,
        .live-tv-page .hero-carousel .carousel-item .hero-media,
        .live-tv-page .hero-carousel .carousel-item .live-tv-hero-media {
            position: absolute !important;
            inset: 0 !important;
            width: 100% !important;
            height: 100% !important;
            overflow: hidden !important;
            background: #000 !important;
        }

            .live-tv-page .live-tv-hero-carousel .carousel-item .live-tv-hero-media > img,
            .live-tv-page .live-tv-hero-carousel .carousel-item .live-tv-hero-media > video,
            .live-tv-page .live-tv-hero-carousel .carousel-item .live-tv-hero-media .hero-video,
            .live-tv-page .hero-carousel .carousel-item .hero-media > img,
            .live-tv-page .hero-carousel .carousel-item .hero-media > video,
            .live-tv-page .hero-carousel .carousel-item .hero-video,
            .live-tv-page .hero-carousel .carousel-item .live-tv-hero-media > img,
            .live-tv-page .hero-carousel .carousel-item .live-tv-hero-media > video {
                object-fit: contain !important; /* full banner visible */
                object-position: center center !important;
                background: #000 !important;
            }

        .live-tv-page .live-tv-hero-carousel .carousel-item .site-container.hero-content,
        .live-tv-page .hero-carousel .carousel-item .site-container.hero-content,
        .live-tv-page .live-tv-hero-carousel .carousel-item .hero-content,
        .live-tv-page .hero-carousel .carousel-item .hero-content {
            left: 10px !important;
            right: 10px !important;
            bottom: 10px !important;
            width: auto !important;
            transform: none !important;
        }

            .live-tv-page .live-tv-hero-carousel .carousel-item .hero-content .col-lg-7,
            .live-tv-page .hero-carousel .carousel-item .hero-content .col-lg-7 {
                width: min(86%, 230px) !important;
                max-width: min(86%, 230px) !important;
            }

        .live-tv-page .live-tv-hero-carousel .carousel-item .hero-copy,
        .live-tv-page .hero-carousel .carousel-item .hero-copy {
            -webkit-line-clamp: 2 !important;
        }

        .live-tv-page .live-tv-hero-carousel .carousel-item .hero-actions .btn,
        .live-tv-page .hero-carousel .carousel-item .hero-actions .btn {
            max-width: none !important;
        }
}

/* =========================================================
   LIVETV HERO MOBILE/TABLET CONTENT OVERRIDE
   ========================================================= */

@media (max-width: 991.98px) {

    /* content position */
    section.hero-section > #heroCarousel.hero-carousel > .carousel-inner > .carousel-item > .site-container.hero-content {
        left: 18px !important;
        right: 12px !important;
        bottom: 18px !important;
        top: auto !important;
        width: auto !important;
        max-width: none !important;
        transform: none !important;
        margin: 0 !important;
        padding: 0 !important;
        position: absolute !important;
        z-index: 3 !important;
    }

        /* content width */
        section.hero-section > #heroCarousel.hero-carousel > .carousel-inner > .carousel-item > .site-container.hero-content .col-lg-7 {
            width: min(76%, 250px) !important;
            max-width: min(76%, 250px) !important;
            flex: 0 0 auto !important;
            padding: 0 !important;
        }

        /* logo */
        section.hero-section > #heroCarousel.hero-carousel > .carousel-inner > .carousel-item > .site-container.hero-content .hero-logo {
            max-width: 82px !important;
            max-height: 32px !important;
            margin-bottom: 4px !important;
        }

        /* title */
        section.hero-section > #heroCarousel.hero-carousel > .carousel-inner > .carousel-item > .site-container.hero-content h1 {
            font-size: 0.82rem !important;
            line-height: 1.1 !important;
            margin: 0 0 4px !important;
        }

        /* description */
        section.hero-section > #heroCarousel.hero-carousel > .carousel-inner > .carousel-item > .site-container.hero-content .hero-copy {
            font-size: 0.60rem !important;
            line-height: 1.2 !important;
            margin: 0 0 6px !important;
            max-width: 100% !important;
            display: -webkit-box !important;
            -webkit-line-clamp: 2 !important;
            -webkit-box-orient: vertical !important;
            overflow: hidden !important;
        }

        /* action row */
        section.hero-section > #heroCarousel.hero-carousel > .carousel-inner > .carousel-item > .site-container.hero-content .hero-actions {
            display: flex !important;
            flex-direction: row !important;
            flex-wrap: nowrap !important;
            align-items: center !important;
            gap: 5px !important;
            width: auto !important;
            max-width: 190px !important;
            margin: 0 !important;
        }

            /* buttons */
            section.hero-section > #heroCarousel.hero-carousel > .carousel-inner > .carousel-item > .site-container.hero-content .hero-actions .btn,
            section.hero-section > #heroCarousel.hero-carousel > .carousel-inner > .carousel-item > .site-container.hero-content .hero-actions .btn-ott {
                width: auto !important;
                max-width: none !important;
                min-width: 0 !important;
                flex: 0 0 auto !important;
                min-height: 24px !important;
                height: 24px !important;
                padding: 3px 8px !important;
                font-size: 0.56rem !important;
                line-height: 1 !important;
                border-radius: 999px !important;
                justify-content: center !important;
                white-space: nowrap !important;
                gap: 3px !important;
            }

                /* icon gap */
                section.hero-section > #heroCarousel.hero-carousel > .carousel-inner > .carousel-item > .site-container.hero-content .hero-actions .btn i,
                section.hero-section > #heroCarousel.hero-carousel > .carousel-inner > .carousel-item > .site-container.hero-content .hero-actions .btn-ott i {
                    font-size: 0.52rem !important;
                    margin-right: 1px !important;
                }

            section.hero-section > #heroCarousel.hero-carousel > .carousel-inner > .carousel-item > .site-container.hero-content .hero-actions .button-text {
                white-space: nowrap !important;
                margin-left: -5px;
            }
}

@media (max-width: 575.98px) {
    section.hero-section > #heroCarousel.hero-carousel > .carousel-inner > .carousel-item > .site-container.hero-content {
        left: 16px !important;
        right: 10px !important;
        bottom: 16px !important;
    }

        section.hero-section > #heroCarousel.hero-carousel > .carousel-inner > .carousel-item > .site-container.hero-content .col-lg-7 {
            width: min(78%, 220px) !important;
            max-width: min(78%, 220px) !important;
        }

        section.hero-section > #heroCarousel.hero-carousel > .carousel-inner > .carousel-item > .site-container.hero-content .hero-actions {
            max-width: 180px !important;
        }
}

/* =========================================
   Prev-Next buttons
   ========================================= */
@media (max-width: 480px) {
    .carousel-control-prev-icon {
        margin-bottom: 30px;
        height: 23px;
    }

    .carousel-control-next-icon {
        margin-bottom: 30px;
        height: 23px;
    }
}

/*Adjust Watch buttons positions*/
.live-tv-page .live-tv-hero-carousel .carousel-item .hero-content .col-lg-7, .live-tv-page .hero-carousel .carousel-item .hero-content .col-lg-7 {
    margin-left: 96px;
}

@media (max-width: 480px) {
    .live-tv-page .live-tv-hero-carousel .carousel-item .hero-content .col-lg-7, .live-tv-page .hero-carousel .carousel-item .hero-content .col-lg-7 {
        margin-left: 10px;
    }
}