/* ============================================================
   Custom Hero Image and Video Slider — frontend styles (works with Swiper 11)
   Sizes / colors come from CSS variables set inline per slider.
   ============================================================ */

/* ===== container ===== */
.custom-hero-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #000;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    outline: none;
    --ntv-accent: #00ffd5;
}
.custom-hero-slider.ntv-theme-light { background: #fff; }

/* Swiper sets .swiper-slide to flex; we restore content-vertical-center
   inside our caption only. Slides themselves should be full-bleed. */
.custom-hero-slider .swiper-slide {
    position: relative;
    overflow: hidden;
}

/* ===== background media ===== */
.ntv-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Instant-paint placeholder: tiny blurred image inlined as a data URI.
   Sits behind .ntv-bg and fills the hero immediately; the real image
   paints over it once downloaded. */
.ntv-lqip {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(16px);
    transform: scale(1.08); /* hide blurred edges */
}

/* ===== skeleton / loading state =====
   A shimmering placeholder shown behind each slide's media until that media
   has loaded. It's the lowest layer, so the LQIP (first slide) and the real
   image paint over it. Hidden once the slide is loaded. */
.ntv-skeleton {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: #1a1a1a;
    background-image: linear-gradient(100deg,
        rgba(255, 255, 255, 0)    30%,
        rgba(255, 255, 255, .08)  50%,
        rgba(255, 255, 255, 0)    70%);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: ntv-shimmer 1.4s ease-in-out infinite;
}
.custom-hero-slider.ntv-theme-light .ntv-skeleton {
    background-color: #e9e9e9;
    background-image: linear-gradient(100deg,
        rgba(0, 0, 0, 0)   30%,
        rgba(0, 0, 0, .06) 50%,
        rgba(0, 0, 0, 0)   70%);
}
/* Once the slide's media is ready, drop the skeleton. */
.ntv-slide.is-loaded .ntv-skeleton { display: none; }

@keyframes ntv-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Fade the real image in over the skeleton/placeholder when it loads.
   NOTE: the first (LCP) slide image is NOT faded — it carries no .ntv-fade
   class so it paints immediately and doesn't delay the LCP metric. */
.ntv-bg.ntv-fade {
    opacity: 0;
    transition: opacity .5s ease;
}
.ntv-bg.ntv-fade.is-loaded { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .ntv-skeleton { animation: none; }
    .ntv-bg.ntv-fade { transition: none; }
}

/* ===== overlay ===== */
.ntv-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* ===== caption ===== */
.ntv-caption {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 24px;
    color: #fff;
    text-align: center;
}

/* The configurable container (per-slider max-width). Default 1800px.
   Inline style="max-width:..." on the element overrides this for per-slide. */
.ntv-container {
    width: 100%;
    max-width: var(--ntv-container-max, 1800px);
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
}

/* Inner wrapper around title + subtitle + paragraph (NOT buttons).
   Default 1024px. Buttons sit OUTSIDE this wrapper inside the container,
   so they can spread to the full container width while text stays narrow. */
.ntv-content-wrapper {
    width: 100%;
    max-width: var(--ntv-content-wrapper-max, 1024px);
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
}

/* Each direct child of the content-wrapper still respects an even narrower
   reading-width cap if you want it (default 900px). Set 'Content max width'
   = same as 'Content wrapper max width' to disable this inner cap. */
.ntv-content-wrapper > * {
    max-width: var(--ntv-content-max, 900px);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* ===== Visual order vs source order =====
   In the HTML the title comes FIRST (semantically correct h1 → h2 → h3 hierarchy
   for SEO and accessibility). On screen, however, the subtitle should appear
   above the title — that's the design pattern. Flexbox `order` swaps them
   visually without changing the DOM. */
.ntv-content-wrapper .ntv-subtitle { order: 1; }
.ntv-content-wrapper .ntv-title    { order: 2; }
.ntv-content-wrapper .ntv-text     { order: 3; }

/* Full-bleed escape hatch for Custom HTML slides */
.ntv-container .ntv-fullbleed,
.ntv-container > .ntv-fullbleed { max-width: none; }
.ntv-slide.ntv-source-html .ntv-caption { padding: 0; }
.ntv-slide.ntv-source-html .ntv-container { padding: 0 24px; }
.ntv-slide.ntv-source-html .ntv-container > * { padding: 0; }

/* ===== alignment ===== */

/* Slider-level alignment: positions the whole .ntv-container inside the caption,
   and sets default text alignment for all elements inside. */
.custom-hero-slider.ntv-align-left   .ntv-caption { align-items: flex-start; text-align: left;  padding-left: 6vw; }
.custom-hero-slider.ntv-align-center .ntv-caption { align-items: center;     text-align: center; }
.custom-hero-slider.ntv-align-right  .ntv-caption { align-items: flex-end;   text-align: right; padding-right: 6vw; }

/* The container & wrapper align their inner items to match slider alignment by default. */
.custom-hero-slider.ntv-align-left   .ntv-container,
.custom-hero-slider.ntv-align-left   .ntv-content-wrapper { align-items: flex-start; }
.custom-hero-slider.ntv-align-center .ntv-container,
.custom-hero-slider.ntv-align-center .ntv-content-wrapper { align-items: center; }
.custom-hero-slider.ntv-align-right  .ntv-container,
.custom-hero-slider.ntv-align-right  .ntv-content-wrapper { align-items: flex-end; }

/* For left/right slider alignment, children don't auto-margin-center. */
.custom-hero-slider.ntv-align-left   .ntv-content-wrapper > *,
.custom-hero-slider.ntv-align-right  .ntv-content-wrapper > * { margin-left: 0; margin-right: 0; }

/* Per-element alignment overrides — applied directly to the title/subtitle/text/buttons element.
   These are PER-SLIDE overrides, so they trump the slider-level default for that one element. */
.ntv-title.ntv-align-left,
.ntv-subtitle.ntv-align-left,
.ntv-text.ntv-align-left   { text-align: left  !important; align-self: flex-start; }
.ntv-title.ntv-align-center,
.ntv-subtitle.ntv-align-center,
.ntv-text.ntv-align-center { text-align: center !important; align-self: center; }
.ntv-title.ntv-align-right,
.ntv-subtitle.ntv-align-right,
.ntv-text.ntv-align-right  { text-align: right  !important; align-self: flex-end; }

.ntv-buttons.ntv-align-left   { justify-content: flex-start !important; }
.ntv-buttons.ntv-align-center { justify-content: center     !important; }
.ntv-buttons.ntv-align-right  { justify-content: flex-end   !important; }

/* ===== content entrance animations =====
   Targets: .ntv-content-wrapper > * (text elements) and .ntv-buttons (sibling of wrapper). */
.custom-hero-slider .ntv-content-wrapper > *,
.custom-hero-slider .ntv-container > .ntv-buttons {
    opacity: 0;
    transition: opacity .8s ease, transform .8s ease;
}
.custom-hero-slider.ntv-canim-fade-up    .ntv-content-wrapper > *,
.custom-hero-slider.ntv-canim-fade-up    .ntv-container > .ntv-buttons { transform: translateY(30px); }
.custom-hero-slider.ntv-canim-fade-in    .ntv-content-wrapper > *,
.custom-hero-slider.ntv-canim-fade-in    .ntv-container > .ntv-buttons { transform: none; }
.custom-hero-slider.ntv-canim-zoom-in    .ntv-content-wrapper > *,
.custom-hero-slider.ntv-canim-zoom-in    .ntv-container > .ntv-buttons { transform: scale(.85); }
.custom-hero-slider.ntv-canim-slide-up   .ntv-content-wrapper > *,
.custom-hero-slider.ntv-canim-slide-up   .ntv-container > .ntv-buttons { transform: translateY(60px); }
.custom-hero-slider.ntv-canim-slide-left .ntv-content-wrapper > *,
.custom-hero-slider.ntv-canim-slide-left .ntv-container > .ntv-buttons { transform: translateX(60px); }
.custom-hero-slider.ntv-canim-slide-right .ntv-content-wrapper > *,
.custom-hero-slider.ntv-canim-slide-right .ntv-container > .ntv-buttons { transform: translateX(-60px); }
.custom-hero-slider.ntv-canim-none .ntv-content-wrapper > *,
.custom-hero-slider.ntv-canim-none .ntv-container > .ntv-buttons { opacity: 1; transition: none; }

/* Active slide: animate elements in, with a stagger.
   Stagger follows VISUAL order (subtitle → title → text → buttons),
   not DOM order. We target by class so the timing is correct regardless
   of which element appears first in the source. */
.swiper-slide.swiper-slide-active .ntv-content-wrapper > *,
.swiper-slide.swiper-slide-active .ntv-container > .ntv-buttons {
    opacity: 1;
    transform: none;
}
.swiper-slide.swiper-slide-active .ntv-subtitle { transition-delay: .15s; }
.swiper-slide.swiper-slide-active .ntv-title    { transition-delay: .30s; }
.swiper-slide.swiper-slide-active .ntv-text     { transition-delay: .45s; }
.swiper-slide.swiper-slide-active .ntv-container > .ntv-buttons { transition-delay: .60s; }

/* ===== Ken Burns: zoom on the active background ===== */
.custom-hero-slider.ntv-anim-kenburns .swiper-slide.swiper-slide-active .ntv-bg {
    animation: ntv-kenburns 20s ease-out forwards;
}
@keyframes ntv-kenburns {
    0%   { transform: scale(1)    translate(0, 0); }
    100% { transform: scale(1.15) translate(-2%, -2%); }
}

/* ===== typography (sizes set inline per instance) ===== */
.ntv-subtitle {
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0 0 1rem;
    line-height: 1.3;
    font-family: var(--ntv-subtitle-font, inherit);
}

.ntv-title {
    font-weight: 800;
    letter-spacing: .5px;
    margin: 0 0 1.2rem;
    line-height: 1.1;
    text-transform: uppercase;
    font-family: var(--ntv-title-font, inherit);
}
.ntv-title span { display: block; }

.ntv-text {
    line-height: 1.7;
    margin: 0 0 2.5rem;
    font-family: var(--ntv-content-font, inherit);
}
.ntv-text p { margin: 0 0 .8em; }
.ntv-text p:last-child { margin-bottom: 0; }

/* ===== buttons ===== */
.ntv-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.custom-hero-slider.ntv-align-center .ntv-buttons { justify-content: center; }
.custom-hero-slider.ntv-align-left   .ntv-buttons { justify-content: flex-start; }
.custom-hero-slider.ntv-align-right  .ntv-buttons { justify-content: flex-end; }

.ntv-btn {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    padding: .85rem 1.6rem;
    font-size: .9rem;
    letter-spacing: .5px;
    text-decoration: none !important;
    transition: all .3s ease;
    min-width: 200px;
    justify-content: space-between;
    cursor: pointer;
    border: 1px solid transparent;
}
.ntv-btn-arrow {
    transition: transform .3s ease;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
.ntv-btn-arrow i {
    font-size: 0.95em;        /* matches surrounding text — for FA <i> */
    line-height: inherit;
}
.ntv-btn-arrow .material-icons-outlined {
    font-size: 1.2em;          /* Material Icons render at 1em looks small; bump slightly */
    line-height: 1;
    vertical-align: middle;
}
.ntv-btn:hover .ntv-btn-arrow { transform: translateX(5px); }

.ntv-btn-outline {
    background: transparent;
    border-color: rgba(255, 255, 255, .6);
    color: var(--ntv-title-color) !important;
}
.ntv-btn-outline:hover {
    background: var(--ntv-accent);
    border-color: var(--ntv-accent);
    color: #000 !important;
}
.ntv-theme-light .ntv-btn-outline { border-color: rgba(0, 0, 0, .5); color: #111 !important; }

.ntv-btn-filled {
    background: var(--ntv-accent);
    border-color: var(--ntv-accent);
    color: #000 !important;
}
.ntv-btn-filled:hover { filter: brightness(.92); }

.ntv-btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--ntv-title-color) !important;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
}
.ntv-btn-ghost:hover { color: var(--ntv-accent) !important; }

/* ===== Swiper navigation arrows (override library defaults) ===== */
.custom-hero-slider .swiper-button-prev,
.custom-hero-slider .swiper-button-next {
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, .4);
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
    border-radius: 0;
    transition: all .3s ease;
    margin-top: -25px;
    overflow: hidden; /* clips the preview thumbnail to the button's shape */
}
.custom-hero-slider .swiper-button-prev:hover,
.custom-hero-slider .swiper-button-next:hover {
    background: var(--ntv-accent);
    color: #000;
    border-color: var(--ntv-accent);
}
.custom-hero-slider .swiper-button-prev { left: 24px; }
.custom-hero-slider .swiper-button-next { right: 24px; }
.custom-hero-slider .swiper-button-prev::after,
.custom-hero-slider .swiper-button-next::after {
    font-size: 22px;
    font-weight: 700;
}
.ntv-theme-light .swiper-button-prev,
.ntv-theme-light .swiper-button-next {
    background: rgba(255, 255, 255, .6);
    border-color: rgba(0, 0, 0, .2);
    color: #111;
}

/* ===== Arrow shape ===== */
.ntv-nav-rounded .swiper-button-prev,
.ntv-nav-rounded .swiper-button-next {
    border-radius: 50%;
}
.ntv-nav-square .swiper-button-prev,
.ntv-nav-square .swiper-button-next {
    border-radius: 0;
}

/* ===== Arrows visible on hover only ===== */
.ntv-arrows-hover-only .ntv-arrow {
    opacity: 0;
    transition: opacity .3s ease;
}
.ntv-arrows-hover-only:hover .ntv-arrow,
.ntv-arrows-hover-only:focus-within .ntv-arrow {
    opacity: 1;
}
@media (hover: none) {
    /* Touch devices have no hover state — keep arrows visible so they stay usable. */
    .ntv-arrows-hover-only .ntv-arrow {
        opacity: 1;
    }
}

/* ===== Next/Previous slide image preview — shown INSIDE the arrow button
   itself, always visible (not just on hover). The button is enlarged to fit
   the thumbnail, and the default arrow glyph is hidden since the image
   takes over the whole button. ===== */
.custom-hero-slider .ntv-arrow.ntv-has-preview {
    width: 84px;
    height: 84px;
    margin-top: -42px;
    border-width: 2px;
}
.custom-hero-slider .ntv-arrow.ntv-has-preview::after {
    display: none; /* the thumbnail replaces the chevron glyph */
}
.ntv-arrow-preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .35); /* fallback tint if a slide has no thumbnail */
    background-size: cover;
    background-position: center;
    border-radius: inherit; /* follows the button's square/rounded shape */
    pointer-events: none;
    transition: transform .3s ease;
}
.custom-hero-slider .ntv-arrow.ntv-has-preview:hover .ntv-arrow-preview {
    transform: scale(1.08);
}

@media (max-width: 767px) {
    .custom-hero-slider .ntv-arrow.ntv-has-preview {
        width: 58px;
        height: 58px;
        margin-top: -29px;
    }
}

/* ===== Swiper pagination dots ===== */
.custom-hero-slider .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, .4);
    opacity: 1;
    margin: 0 5px !important;
    transition: all .3s ease;
}
.ntv-theme-light .swiper-pagination-bullet { background: rgba(0, 0, 0, .3); }
.custom-hero-slider .swiper-pagination-bullet-active {
    background: #fff;
    transform: scale(1.2);
}
.ntv-theme-light .swiper-pagination-bullet-active { background: #111; }
.custom-hero-slider .swiper-pagination {
    bottom: 28px !important;
}

/* ===== Thumbnail-style pagination bullets ===== */
.ntv-dots-thumbs .swiper-pagination-bullet.ntv-bullet-thumb {
    width: 46px;
    height: 30px;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, .25);
    background-size: cover;
    background-position: center;
    opacity: .65;
    border: 2px solid transparent;
}
.ntv-dots-thumbs .swiper-pagination-bullet-active.ntv-bullet-thumb {
    opacity: 1;
    border-color: var(--ntv-accent, #00ffd5);
    transform: none;
}

/* ===== Thumbnail Slider layouts ===== */
.ntv-slider-outer {
    display: flex;
    width: 100%;
}
.ntv-slider-outer .custom-hero-slider {
    min-width: 0; /* allow flex child to shrink below content size */
}

/* Below (default) — also used by the Arrows and Zoom variants. */
.ntv-layout-thumbs_below,
.ntv-layout-thumbs_arrows,
.ntv-layout-thumbs_zoom {
    flex-direction: column;
}

/* Right side thumbnails. */
.ntv-layout-thumbs_right {
    flex-direction: row;
}
.ntv-layout-thumbs_right .custom-hero-slider { flex: 1 1 auto; }

/* Left side thumbnails — thumbs stay after the slider in the DOM (so screen
   readers and keyboard tab order hit the slide content first) but are
   visually reordered to the left. */
.ntv-layout-thumbs_left {
    flex-direction: row;
}
.ntv-layout-thumbs_left .custom-hero-slider { order: 2; flex: 1 1 auto; }
.ntv-layout-thumbs_left .ntv-thumbs-wrap { order: 1; }

/* The thumbnail strip itself. */
.ntv-thumbs-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #0a0a0a;
    flex-shrink: 0;
}
.ntv-thumbs-horizontal {
    flex-direction: row;
    padding: 10px 14px;
    width: 100%;
}
.ntv-thumbs-vertical {
    flex-direction: column;
    padding: 14px 10px;
    width: 130px;
}
.ntv-thumbs-swiper {
    overflow: hidden;
    flex: 1 1 auto;
    min-width: 0;
}
.ntv-thumbs-horizontal .ntv-thumbs-swiper .swiper-wrapper { align-items: stretch; }
.ntv-thumbs-horizontal .ntv-thumb-slide {
    width: 110px;
    height: 68px;
    flex-shrink: 0;
}
.ntv-thumbs-vertical .ntv-thumb-slide {
    width: 100%;
    height: 68px;
}
.ntv-thumb-slide {
    background-size: cover;
    background-position: center;
    background-color: #1a1a1a;
    border-radius: 4px;
    border: 2px solid transparent;
    opacity: .55;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .25s ease, border-color .25s ease, transform .25s ease;
}
.ntv-thumb-slide:hover { opacity: .85; }
.ntv-thumb-slide.swiper-slide-thumb-active {
    opacity: 1;
    border-color: var(--ntv-accent, #00ffd5);
}
.ntv-thumb-fallback {
    color: #fff;
    font-weight: 600;
    font-size: 1.1rem;
    opacity: .8;
}

/* "With Arrows" variant — scroll buttons flanking the strip. */
.ntv-thumb-arrow {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .08);
    color: #fff;
    cursor: pointer;
    position: relative;
    transition: background .25s ease, border-color .25s ease;
}
.ntv-thumb-arrow:hover {
    background: var(--ntv-accent, #00ffd5);
    border-color: var(--ntv-accent, #00ffd5);
    color: #000;
}
.ntv-thumb-arrow::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
}
.ntv-thumb-prev::after { transform: translate(-30%, -50%) rotate(-135deg); }
.ntv-thumb-next::after { transform: translate(-70%, -50%) rotate(45deg); }

/* "Inner Zoom" variant — the active thumbnail scales up. */
.ntv-thumbs-zoom .ntv-thumb-slide { transform: scale(.92); }
.ntv-thumbs-zoom .ntv-thumb-slide:hover { transform: scale(1); }
.ntv-thumbs-zoom .ntv-thumb-slide.swiper-slide-thumb-active {
    transform: scale(1.18);
    z-index: 2;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
}

@media (max-width: 767px) {
    /* Right/Left thumbnail layouts stack under the slider on small screens.
       The strip stays vertically-oriented internally (matching its Swiper
       `direction`) but shrinks and gets a max-height so it doesn't dominate
       the screen. */
    .ntv-layout-thumbs_right,
    .ntv-layout-thumbs_left {
        flex-direction: column;
    }
    .ntv-layout-thumbs_right .custom-hero-slider,
    .ntv-layout-thumbs_left .custom-hero-slider { order: 0; }
    .ntv-layout-thumbs_left .ntv-thumbs-wrap { order: 0; }
    .ntv-thumbs-vertical {
        width: 100%;
        max-height: 160px;
    }
    .ntv-thumbs-horizontal .ntv-thumb-slide,
    .ntv-thumbs-vertical .ntv-thumb-slide {
        width: 90px;
        height: 56px;
    }
}

/* ===== mute button ===== */
.ntv-mute {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 10;
    width: 44px;
    height: 44px;
    background: rgba(0, 0, 0, .4);
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease;
    padding: 0;
}
.ntv-mute:hover {
    background: var(--ntv-accent);
    color: #000;
    border-color: var(--ntv-accent);
}
.ntv-theme-light .ntv-mute {
    background: rgba(255, 255, 255, .6);
    border-color: rgba(0, 0, 0, .2);
    color: #111;
}

/* ===== play/pause button ===== */
/* Sits to the left of the mute button (right: 24px + 44px button + 8px gap = 76px). */
.ntv-playpause {
    position: absolute;
    top: 24px;
    right: 76px;
    z-index: 10;
    width: 44px;
    height: 44px;
    background: rgba(0, 0, 0, .4);
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease;
    padding: 0;
}
.ntv-playpause:hover {
    background: var(--ntv-accent);
    color: #000;
    border-color: var(--ntv-accent);
}
.ntv-theme-light .ntv-playpause {
    background: rgba(255, 255, 255, .6);
    border-color: rgba(0, 0, 0, .2);
    color: #111;
}
/* When mute button is hidden (image-only slider), play/pause shifts to the rightmost position. */
.ntv-mute[style*="display: none"] ~ .ntv-playpause,
.ntv-mute[style*="display:none"]  ~ .ntv-playpause {
    right: 24px;
}

/* ===== mobile ===== */
@media (max-width: 768px) {
    .ntv-buttons {
        flex-direction: column;
        width: 100%;
        max-width: 320px;
    }
    .custom-hero-slider.ntv-align-center .ntv-buttons { margin-left: auto; margin-right: auto; }
    .ntv-btn { width: 100%; }
    .custom-hero-slider .swiper-button-prev,
    .custom-hero-slider .swiper-button-next {
        width: 40px;
        height: 40px;
        margin-top: -20px;
    }
    .custom-hero-slider .swiper-button-prev::after,
    .custom-hero-slider .swiper-button-next::after { font-size: 18px; }
    .custom-hero-slider .swiper-button-prev { left: 10px; }
    .custom-hero-slider .swiper-button-next { right: 10px; }
    .ntv-mute { top: 12px; right: 12px; }
    .ntv-playpause { top: 12px; right: 64px; }
}

/* ===== fix: prevent Swiper from showing horizontal scroll ===== */
.custom-hero-slider .swiper-wrapper {
    height: 100%;
}