.cvc-carousel {
    --cvc-ratio: 16 / 9;
    --cvc-radius: clamp(18px, 2vw, 30px);
    position: relative;
    width: 100%;
    max-width: 1800px;
    margin-inline: auto;
    color: #fff;
    border-radius: var(--cvc-radius);
    overflow: hidden;
    background: #090a0d;
    box-shadow: 0 28px 80px rgba(0,0,0,.22);
    isolation: isolate;
}
.cvc-stage {
    position: relative;
    width: 100%;
    aspect-ratio: var(--cvc-ratio);
    min-height: 260px;
    overflow: hidden;
    background: radial-gradient(circle at 50% 35%, #252832 0, #0c0d11 60%, #050506 100%);
}
.cvc-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(1.018);
    transition: opacity .58s cubic-bezier(.22,.61,.36,1), transform .72s cubic-bezier(.22,.61,.36,1);
    pointer-events: none;
}
.cvc-slide.is-current { opacity: 1; transform: scale(1); pointer-events: auto; z-index: 2; }
.cvc-slide.is-leaving { opacity: 0; transform: scale(.992); z-index: 1; }
.cvc-player, .cvc-player iframe, .cvc-player--youtube { width: 100%; height: 100%; border: 0; display: block; }
.cvc-player--media { object-fit: contain; background: #000; }
.cvc-loading, .cvc-error {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px;
    font: 500 14px/1.4 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color: rgba(255,255,255,.7);
}
.cvc-loading__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: cvcPulse 1.2s infinite ease-in-out; }
@keyframes cvcPulse { 50% { opacity: .25; transform: scale(.7); } }
.cvc-ready .cvc-loading { display: none; }
.cvc-bottom {
    position: absolute;
    left: 50%; bottom: clamp(12px, 2vw, 24px); z-index: 6;
    width: min(calc(100% - 28px), clamp(760px, 72vw, 1180px));
    transform: translateX(-50%);
    padding: clamp(8px, .65vw, 12px) clamp(9px, .8vw, 14px) clamp(9px, .75vw, 13px);
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 18px;
    background: rgba(9,10,13,.48);
    box-shadow: 0 12px 38px rgba(0,0,0,.25);
    backdrop-filter: blur(16px) saturate(130%);
    -webkit-backdrop-filter: blur(16px) saturate(130%);
    transition: background .35s ease, border-color .35s ease, transform .35s ease;
}
.cvc-bottom:hover { background: rgba(9,10,13,.64); border-color: rgba(255,255,255,.22); transform: translateX(-50%) translateY(-2px); }
.cvc-progress { height: 2px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.12); margin: 0 3px 7px; }
.cvc-progress span { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left center; background: rgba(255,255,255,.92); transition: transform .15s linear; }
.cvc-nav {
    display: flex; align-items: center; justify-content: center; gap: clamp(7px, .65vw, 11px);
    overflow-x: auto; scrollbar-width: none; padding: 1px 1px 0;
}
.cvc-nav::-webkit-scrollbar { display: none; }
.cvc-thumb {
    appearance: none; flex: 0 0 auto; position: relative; width: clamp(60px, 4.8vw, 88px); aspect-ratio: 16 / 9; height: auto; padding: 0; overflow: hidden;
    border: 1px solid rgba(255,255,255,.12); border-radius: 9px; background: #181a20; cursor: pointer;
    opacity: .34; filter: saturate(.45); transform: scale(.9);
    transition: width .42s cubic-bezier(.22,.61,.36,1), height .42s cubic-bezier(.22,.61,.36,1), opacity .35s ease, filter .35s ease, transform .42s cubic-bezier(.22,.61,.36,1), border-color .35s ease, box-shadow .35s ease;
}
.cvc-thumb:hover, .cvc-thumb:focus-visible {
    width: clamp(124px, 9vw, 178px); height: auto; opacity: 1; filter: saturate(1); transform: scale(1);
    border-color: rgba(255,255,255,.45); box-shadow: 0 7px 20px rgba(0,0,0,.3); outline: none;
}
.cvc-thumb.is-active { width: clamp(82px, 6.2vw, 112px); height: auto; opacity: .92; filter: saturate(.9); transform: scale(1); border-color: rgba(255,255,255,.75); }
.cvc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1); transition: transform .55s cubic-bezier(.22,.61,.36,1), filter .35s ease; }
.cvc-thumb:hover img, .cvc-thumb:focus-visible img { transform: scale(1.09); }
.cvc-thumb__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.2)); pointer-events: none; transition: background .35s ease; }
.cvc-thumb:hover .cvc-thumb__veil, .cvc-thumb:focus-visible .cvc-thumb__veil { background: linear-gradient(180deg, rgba(0,0,0,.02) 38%, rgba(0,0,0,.72) 100%); }
.cvc-thumb__title { position: absolute; left: 9px; right: 9px; bottom: 7px; z-index: 2; color: #fff; font: 600 clamp(10px, .72vw, 12px)/1.2 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; letter-spacing: .01em; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(7px); transition: opacity .28s ease .06s, transform .38s cubic-bezier(.22,.61,.36,1) .03s; pointer-events: none; text-shadow: 0 1px 8px rgba(0,0,0,.65); }
.cvc-thumb:hover .cvc-thumb__title, .cvc-thumb:focus-visible .cvc-thumb__title { opacity: 1; transform: translateY(0); }
.cvc-thumb__fallback { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; color: rgba(255,255,255,.78); }
.cvc-sound {
    position: absolute; top: clamp(12px, 1.4vw, 22px); right: clamp(12px, 1.4vw, 22px); z-index: 8;
    display: inline-grid; place-items: center; width: clamp(46px, 3.5vw, 58px); height: clamp(46px, 3.5vw, 58px); padding: 0;
    border: 1px solid rgba(255,255,255,.24); border-radius: 999px; color: #fff; background: rgba(0,0,0,.46);
    box-shadow: 0 8px 24px rgba(0,0,0,.22); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    cursor: pointer; transition: transform .25s ease, background .25s ease, border-color .25s ease;
}
.cvc-sound svg { width: 58%; height: 58%; display: block; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.cvc-sound:hover, .cvc-sound:focus-visible { background: rgba(0,0,0,.72); border-color: rgba(255,255,255,.48); transform: scale(1.045); outline: none; }
.cvc-sound:focus-visible { box-shadow: 0 0 0 3px rgba(255,255,255,.34), 0 8px 24px rgba(0,0,0,.22); }
@media (max-width: 700px) {
    .cvc-carousel { border-radius: 16px; }
    .cvc-stage { min-height: 220px; }
    .cvc-bottom { width: calc(100% - 14px); bottom: 8px; padding: 7px 7px 8px; border-radius: 14px; }
    .cvc-thumb { width: clamp(52px, 15vw, 68px); height: auto; border-radius: 7px; }
    .cvc-thumb:hover, .cvc-thumb:focus-visible { width: clamp(82px, 25vw, 112px); height: auto; }
    .cvc-thumb.is-active { width: clamp(66px, 19vw, 84px); height: auto; }
    .cvc-nav { justify-content: flex-start; }
    .cvc-thumb__title { left: 7px; right: 7px; bottom: 5px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .cvc-slide, .cvc-thumb, .cvc-bottom, .cvc-sound { transition-duration: .01ms !important; }
}

/* Section background mode -------------------------------------------------- */
.cvc-carousel--background {
    /* Break out of theme content columns to the current document viewport.
       If the WordPress page is embedded in an iframe, 100vw is the iframe width,
       so the carousel stays scoped to the embedded page rather than the parent site. */
    max-width: none;
    width: 100vw;
    margin-left: var(--cvc-breakout-left, calc(50% - 50vw));
    margin-right: 0;
    min-height: var(--cvc-section-height, 75svh);
    margin-top: var(--cvc-clear-top, 0px);
    margin-bottom: var(--cvc-clear-bottom, 0px);
    border-radius: 0;
    box-shadow: none;
    overflow: clip;
    contain: paint;
}
.cvc-carousel--background.cvc-carousel--contained-background {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}
.cvc-carousel--background .cvc-stage {
    container-type: size;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
}
.cvc-carousel--background .cvc-player--media {
    object-fit: var(--cvc-object-fit, cover);
    object-position: var(--cvc-object-position, center center);
}
.cvc-carousel--background .cvc-player--youtube,
.cvc-carousel--background .cvc-player--youtube iframe {
    width: 100%;
    height: 100%;
}
/* YouTube iframes cannot use object-fit; overscan them in cover mode. */
.cvc-carousel--background[data-cvc-fit="cover"] .cvc-player--youtube iframe {
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100cqw, 177.78cqh);
    height: max(100cqh, 56.25cqw);
    transform: translate(-50%, -50%);
}
.cvc-carousel--background.cvc-carousel--parallax {
    min-height: calc(var(--cvc-section-height, 75svh) + var(--cvc-parallax-depth, 35svh));
    overflow: visible;
    background: transparent;
    contain: layout;
}
.cvc-carousel--background.cvc-carousel--parallax .cvc-stage {
    position: sticky;
    top: 0;
    height: min(var(--cvc-section-height, 75svh), 100svh);
    overflow: hidden;
    isolation: isolate;
}
.cvc-carousel--background.cvc-carousel--parallax .cvc-bottom {
    position: sticky;
    top: calc(min(var(--cvc-section-height, 75svh), 100svh) - 104px);
    bottom: auto;
}
@supports not (overflow: clip) {
    .cvc-carousel--background { overflow: hidden; }
}
@media (max-width: 700px) {
    .cvc-carousel--background { border-radius: 0; min-height: var(--cvc-section-height-mobile, 58svh); }
    .cvc-carousel--background.cvc-carousel--parallax { min-height: calc(var(--cvc-section-height-mobile, 58svh) + var(--cvc-parallax-depth, 35svh)); }
    .cvc-carousel--background.cvc-carousel--parallax .cvc-stage { height: min(var(--cvc-section-height-mobile, 58svh), 100svh); }
    .cvc-carousel--background.cvc-carousel--parallax .cvc-bottom { top: calc(min(var(--cvc-section-height-mobile, 58svh), 100svh) - 92px); }
}


/* YouTube letterbox masking -------------------------------------------------
   These panels sit above the iframe only in geometry that falls outside a
   centered 16:9 picture. They never receive pointer events. */
.cvc-youtube-mask {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    overflow: hidden;
}
.cvc-youtube-mask > span {
    position: absolute;
    display: block;
    background: #090a0d;
    opacity: 0;
    transition: opacity .35s ease, width .3s ease, height .3s ease;
}
.cvc-youtube-mask__top,
.cvc-youtube-mask__bottom {
    left: 0;
    width: 100%;
    height: var(--cvc-mask-y, 0px);
}
.cvc-youtube-mask__top { top: 0; }
.cvc-youtube-mask__bottom { bottom: 0; }
.cvc-youtube-mask__left,
.cvc-youtube-mask__right {
    top: 0;
    height: 100%;
    width: var(--cvc-mask-x, 0px);
}
.cvc-youtube-mask__left { left: 0; }
.cvc-youtube-mask__right { right: 0; }
.cvc-youtube-mask.has-horizontal-bars .cvc-youtube-mask__top,
.cvc-youtube-mask.has-horizontal-bars .cvc-youtube-mask__bottom,
.cvc-youtube-mask.has-vertical-bars .cvc-youtube-mask__left,
.cvc-youtube-mask.has-vertical-bars .cvc-youtube-mask__right { opacity: 1; }
.cvc-carousel--background .cvc-youtube-mask > span {
    background: linear-gradient(135deg, #101116 0%, #090a0d 52%, #050506 100%);
}


/* Layered section composition (v1.7) ---------------------------------------
   Instead of visible bars, let neighboring page content overlap the video
   while soft edge blends dissolve the video into the page background. */
.cvc-carousel--background.cvc-carousel--layered {
    z-index: 1;
    margin-top: calc(var(--cvc-clear-top, 0px) - var(--cvc-content-overlap, 96px));
    margin-bottom: calc(var(--cvc-clear-bottom, 0px) - var(--cvc-content-overlap, 96px));
}
.cvc-carousel--background.cvc-carousel--layered::before,
.cvc-carousel--background.cvc-carousel--layered::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    z-index: 4;
    height: calc(var(--cvc-content-overlap, 96px) * 1.55);
    pointer-events: none;
}
.cvc-carousel--background.cvc-carousel--layered::before {
    top: 0;
    background: linear-gradient(to bottom,
        var(--cvc-page-bg, #fff) 0%,
        color-mix(in srgb, var(--cvc-page-bg, #fff) 82%, transparent) 32%,
        transparent 100%);
}
.cvc-carousel--background.cvc-carousel--layered::after {
    bottom: 0;
    background: linear-gradient(to top,
        var(--cvc-page-bg, #fff) 0%,
        color-mix(in srgb, var(--cvc-page-bg, #fff) 82%, transparent) 32%,
        transparent 100%);
}
@supports not (background: color-mix(in srgb, white 50%, transparent)) {
    .cvc-carousel--background.cvc-carousel--layered::before {
        background: linear-gradient(to bottom, var(--cvc-page-bg, #fff) 0%, transparent 100%);
    }
    .cvc-carousel--background.cvc-carousel--layered::after {
        background: linear-gradient(to top, var(--cvc-page-bg, #fff) 0%, transparent 100%);
    }
}
.cvc-overlap-neighbor {
    position: relative !important;
    z-index: 7 !important;
}

/* Keep the iframe itself non-interactive in minimal presentation mode.
   This prevents pointer hover/click from waking YouTube's central play/pause
   overlay. Our sound control and carousel navigation live above this layer. */
.cvc-youtube-shield {
    position: absolute;
    inset: 0;
    z-index: 5;
    background: transparent;
    pointer-events: auto;
    cursor: default;
    touch-action: pan-y;
}

/* The legacy letterbox mask is now a soft page blend rather than a hard box. */
.cvc-youtube-mask--blend > span {
    background: var(--cvc-page-bg, #090a0d) !important;
}
.cvc-youtube-mask--blend .cvc-youtube-mask__top {
    background: linear-gradient(to bottom, var(--cvc-page-bg, #090a0d), transparent) !important;
}
.cvc-youtube-mask--blend .cvc-youtube-mask__bottom {
    background: linear-gradient(to top, var(--cvc-page-bg, #090a0d), transparent) !important;
}
.cvc-youtube-mask--blend .cvc-youtube-mask__left {
    background: linear-gradient(to right, var(--cvc-page-bg, #090a0d), transparent) !important;
}
.cvc-youtube-mask--blend .cvc-youtube-mask__right {
    background: linear-gradient(to left, var(--cvc-page-bg, #090a0d), transparent) !important;
}

/* Inline dimensions are calculated from the live stage size in JS so the
   16:9 YouTube iframe keeps overscanning correctly through resize/orientation. */
.cvc-carousel--background .cvc-player--youtube iframe {
    max-width: none !important;
    max-height: none !important;
}

@media (max-width: 700px) {
    .cvc-carousel--background.cvc-carousel--layered {
        margin-top: calc(var(--cvc-clear-top, 0px) - var(--cvc-content-overlap-mobile, 56px));
        margin-bottom: calc(var(--cvc-clear-bottom, 0px) - var(--cvc-content-overlap-mobile, 56px));
    }
    .cvc-carousel--background.cvc-carousel--layered::before,
    .cvc-carousel--background.cvc-carousel--layered::after {
        height: calc(var(--cvc-content-overlap-mobile, 56px) * 1.55);
    }
}

/* v1.8 — tectonic overlap + cinematic controls --------------------------- */
.cvc-carousel--background.cvc-carousel--layered {
    /* The plate slides under neighboring content; the video does not paint over it. */
    z-index: 0;
    isolation: auto;
    contain: layout;
    overflow: clip;
}
.cvc-carousel--background.cvc-carousel--layered::before,
.cvc-carousel--background.cvc-carousel--layered::after { display: none !important; }
.cvc-carousel--background.cvc-carousel--layered .cvc-stage { z-index: 0; }
.cvc-overlap-neighbor {
    position: relative !important;
    z-index: 30 !important;
    isolation: isolate;
}
/* Promote common theme wrapper layers too, without changing their geometry. */
.cvc-overlap-neighbor > * { position: relative; z-index: 1; }

/* Controls now live clearly inside the moving picture, not on the edge. */
.cvc-player-controls {
    position: absolute;
    right: clamp(18px, 2.5vw, 42px);
    top: clamp(76px, 16%, 170px);
    z-index: 14;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 9px;
    pointer-events: auto;
}
.cvc-player-controls .cvc-sound {
    position: relative;
    inset: auto;
    opacity: .62;
    transform: scale(.98);
}
.cvc-player-controls:hover .cvc-sound,
.cvc-player-controls .cvc-sound:hover,
.cvc-player-controls .cvc-sound:focus-visible { opacity: 1; transform: scale(1.07); }
.cvc-play-toggle {
    display: inline-grid;
    place-items: center;
    width: clamp(42px, 3.1vw, 52px);
    height: clamp(42px, 3.1vw, 52px);
    padding: 0;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    color: #fff;
    background: rgba(0,0,0,.52);
    box-shadow: 0 8px 24px rgba(0,0,0,.22);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateX(13px) scale(.88);
    transition: opacity .3s ease, transform .4s cubic-bezier(.22,.61,.36,1), visibility .3s linear;
}
.cvc-player-controls.is-expanded .cvc-play-toggle,
.cvc-play-toggle:focus-visible {
    opacity: .84;
    visibility: visible;
    transform: translateX(0) scale(1);
}
.cvc-play-toggle:hover { opacity: 1 !important; transform: translateX(0) scale(1.06) !important; }
.cvc-play-toggle svg { width: 52%; height: 52%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Pull navigation farther into the live picture. */
.cvc-carousel--background .cvc-bottom { bottom: clamp(38px, 6.5svh, 82px); z-index: 13; }

/* Thumbnail/poster curtain prevents the split-second YouTube chrome flash. */
.cvc-youtube-reveal {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    background-color: var(--cvc-page-bg, #090a0d);
    background-position: center;
    background-size: cover;
    opacity: 1;
    transform: scale(1.035);
    transition: opacity .18s ease, visibility 0s linear .18s;
}
.cvc-youtube-reveal.is-hidden { opacity: 0; visibility: hidden; }
/* The shield stays above YouTube but below our reveal-independent controls. */
.cvc-youtube-shield { z-index: 7; }

@media (max-width: 700px) {
    .cvc-player-controls { right: 14px; top: clamp(62px, 14%, 104px); gap: 7px; }
    .cvc-player-controls .cvc-sound { width: 48px; height: 48px; }
    .cvc-play-toggle { width: 44px; height: 44px; }
    .cvc-carousel--background .cvc-bottom { bottom: clamp(22px, 5svh, 46px); }
}

/* v1.9 — wrapper-aware tectonic stacking + zero-flash YouTube startup ----- */
/* The branch containing the video is deliberately lower than the neighboring
   WordPress/theme wrapper branches. This fixes themes where the visible WATCH
   heading is not the carousel's immediate DOM sibling. */
.cvc-plate-branch {
    position: relative !important;
    z-index: 0 !important;
    isolation: isolate;
}
.cvc-overlap-neighbor,
.cvc-overlap-neighbor-branch {
    position: relative !important;
    z-index: 40 !important;
}
.cvc-overlap-neighbor {
    isolation: isolate;
}
/* Never let the carousel's own background become a painted slab over the
   heading while it is in tectonic/layered mode. Only the stage paints video. */
.cvc-carousel--background.cvc-carousel--layered {
    background: transparent !important;
    box-shadow: none !important;
}

/* YouTube startup is two-stage: a clean poster remains fully opaque while the
   live player starts behind it, then the live iframe crossfades in only after
   YouTube's transient startup title/channel chrome has had time to disappear. */
.cvc-slide.cvc-youtube-starting .cvc-player--youtube,
.cvc-youtube-starting .cvc-player--youtube {
    opacity: 0;
    transition: opacity .18s ease;
}
.cvc-slide.cvc-youtube-starting.cvc-youtube-safe .cvc-player--youtube,
.cvc-youtube-starting.cvc-youtube-safe .cvc-player--youtube {
    opacity: 1;
}
.cvc-youtube-reveal {
    transition: opacity .18s cubic-bezier(.22,.61,.36,1), visibility 0s linear .18s !important;
}
.cvc-youtube-reveal.is-hidden { transition-delay: 0s, .18s; }


/* v2.0 — common-parent tectonic stacking + continuously responsive geometry */
.cvc-carousel--background {
    min-height: var(--cvc-responsive-section-height, var(--cvc-section-height, 75svh));
}
.cvc-carousel--background.cvc-carousel--parallax {
    min-height: calc(var(--cvc-responsive-section-height, var(--cvc-section-height, 75svh)) + var(--cvc-parallax-depth, 35svh));
}
.cvc-carousel--background.cvc-carousel--parallax .cvc-stage {
    height: min(var(--cvc-responsive-section-height, var(--cvc-section-height, 75svh)), 100svh);
}
.cvc-carousel--background.cvc-carousel--parallax .cvc-bottom {
    top: calc(min(var(--cvc-responsive-section-height, var(--cvc-section-height, 75svh)), 100svh) - clamp(82px, 9vw, 118px));
}

/* Put competing branches in ONE local stacking context. This is the part that
   theme wrappers prevented earlier versions from doing reliably. */
.cvc-stack-parent {
    position: relative !important;
    isolation: isolate !important;
    overflow: visible !important;
}
.cvc-stack-plate {
    position: relative !important;
    z-index: 1 !important;
    isolation: auto !important;
}
.cvc-stack-neighbor,
.cvc-stack-neighbor-sampled {
    position: relative !important;
    z-index: 20 !important;
    isolation: isolate !important;
}
/* Older helper classes no longer get to establish a competing isolated plate. */
.cvc-plate-branch { isolation: auto !important; z-index: auto !important; }
.cvc-overlap-neighbor-branch { isolation: auto !important; }

/* Scale controls/nav continuously instead of snapping at one breakpoint. */
.cvc-carousel--background .cvc-bottom {
    bottom: clamp(24px, 6.2cqh, 86px);
    width: min(94vw, 1180px);
    transform: translateX(-50%) scale(var(--cvc-fluid-ui-scale, 1));
    transform-origin: center bottom;
}
.cvc-carousel--background .cvc-nav { gap: clamp(7px, .8vw, 13px); }
.cvc-carousel--background .cvc-thumb { width: clamp(62px, 5.4vw, 96px); }
.cvc-carousel--background .cvc-thumb.is-active { width: clamp(88px, 7.2vw, 132px); }
@media (hover:hover) and (pointer:fine) {
    .cvc-carousel--background .cvc-thumb:hover,
    .cvc-carousel--background .cvc-thumb:focus-visible { width: clamp(142px, 11vw, 208px); }
}
.cvc-player-controls {
    right: clamp(14px, 2.4cqw, 42px);
    top: clamp(64px, 14cqh, 164px);
    transform: scale(var(--cvc-fluid-ui-scale, 1));
    transform-origin: right top;
}

/* Absolutely no YouTube pixel is allowed to appear during startup. YouTube may
   replace the original div with an iframe, so target the iframe directly. */
.cvc-youtube-starting iframe {
    opacity: 0 !important;
    visibility: hidden !important;
}
.cvc-youtube-starting.cvc-youtube-safe iframe {
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity .18s cubic-bezier(.22,.61,.36,1) !important;
}
.cvc-youtube-reveal {
    z-index: 9 !important;
    background-color: var(--cvc-page-bg, #090a0d) !important;
}
.cvc-youtube-shield { z-index: 10 !important; }
.cvc-player-controls { z-index: 16 !important; }
.cvc-carousel--background .cvc-bottom { z-index: 15 !important; }

@media (max-width: 760px) {
    .cvc-carousel--background { min-height: var(--cvc-responsive-section-height, 62svh); }
    .cvc-carousel--background .cvc-bottom { bottom: clamp(20px, 4.5cqh, 42px); width: 96vw; }
    .cvc-carousel--background .cvc-thumb { width: clamp(58px, 17vw, 78px); }
    .cvc-carousel--background .cvc-thumb.is-active { width: clamp(72px, 22vw, 96px); }
    .cvc-player-controls { top: clamp(58px, 12cqh, 98px); right: 12px; }
}

/* v2.1 — true background plate architecture --------------------------------
   The video stage is physically separated from the WordPress content layer.
   Neighboring headings/sections therefore paint naturally above it without
   brittle ancestor z-index promotion. */
.cvc-plate-parent {
    isolation: isolate !important;
    overflow: visible !important;
}
.cvc-background-plate {
    position: absolute;
    z-index: 0;
    overflow: clip;
    pointer-events: none;
    contain: paint;
}
.cvc-background-plate .cvc-stage {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0 !important;
    pointer-events: auto;
}
/* Every normal direct content branch stays above the plate. */
.cvc-plate-parent > :not(.cvc-background-plate) {
    position: relative;
    z-index: 2;
}
/* The block is now only the foreground UI/spacing shell; it never paints a
   background over WATCH or the section below. */
.cvc-carousel--background.cvc-stage-portaled {
    background: transparent !important;
    isolation: auto !important;
    overflow: visible !important;
    z-index: 3 !important;
}
.cvc-carousel--background.cvc-stage-portaled .cvc-bottom,
.cvc-carousel--background.cvc-stage-portaled > .cvc-player-controls {
    pointer-events: auto;
}
/* Retire the v2 common-parent promotion rules; plate architecture supersedes them. */
.cvc-stack-parent,
.cvc-stack-plate,
.cvc-stack-neighbor,
.cvc-stack-neighbor-sampled,
.cvc-plate-branch,
.cvc-overlap-neighbor-branch,
.cvc-overlap-neighbor {
    isolation: auto !important;
}
.cvc-stack-plate,
.cvc-stack-neighbor,
.cvc-stack-neighbor-sampled,
.cvc-plate-branch,
.cvc-overlap-neighbor-branch,
.cvc-overlap-neighbor { z-index: auto !important; }

/* Controls are foreground UI now, outside the portaled video plate. */
.cvc-carousel--background.cvc-stage-portaled > .cvc-player-controls {
    position: absolute;
    z-index: 30 !important;
    top: clamp(72px, 15%, 170px);
    right: clamp(14px, 2.4vw, 42px);
}
.cvc-carousel--background.cvc-stage-portaled .cvc-bottom { z-index: 29 !important; }

@media (max-width: 700px) {
    .cvc-carousel--background.cvc-stage-portaled > .cvc-player-controls {
        top: clamp(64px, 12%, 108px);
        right: 12px;
    }
}


/* v2.2 — content-aware tectonic underlap -----------------------------------
   The portaled plate is deliberately larger than the carousel shell. This is
   the literal "plate sliding underneath" effect: the video continues behind
   the neighboring WordPress content, while the content stays in normal flow. */
.cvc-background-plate {
    overflow: hidden !important;
    background: var(--cvc-page-bg, #090a0d);
}
.cvc-background-plate .cvc-stage {
    inset: 0 !important;
}
/* Prevent a root-level paint/clip from reintroducing a hard seam where the
   background plate crosses into the neighboring section. */
.cvc-carousel--background.cvc-stage-portaled,
.cvc-carousel--background.cvc-carousel--layered.cvc-stage-portaled {
    contain: layout !important;
    clip-path: none !important;
}
/* Keep foreground UI comfortably inside the *visible* carousel shell even
   though the video plate extends beyond it. */
.cvc-carousel--background.cvc-stage-portaled > .cvc-player-controls {
    top: clamp(82px, 17%, 190px);
}
.cvc-carousel--background.cvc-stage-portaled .cvc-bottom {
    bottom: clamp(34px, 7.2%, 84px) !important;
}
/* The startup poster itself uses the same overscanned crop as the player, so
   swapping from poster to iframe does not reveal a different top/bottom zone. */
.cvc-background-plate .cvc-youtube-reveal {
    inset: -2px;
    background-size: cover;
}
@media (max-width: 700px) {
    .cvc-carousel--background.cvc-stage-portaled > .cvc-player-controls {
        top: clamp(72px, 14%, 124px);
    }
    .cvc-carousel--background.cvc-stage-portaled .cvc-bottom {
        bottom: clamp(22px, 5.5%, 48px) !important;
    }
}


/* v2.3 — preserve neighboring sections exactly -----------------------------
   The video plate underlaps geometrically, but JS clips its paint to the real
   bounds of the sections above/below. Crucially, we no longer alter those
   sections' backgrounds, opacity, blend mode or isolation. */
.cvc-carousel--background.cvc-stage-portaled,
.cvc-carousel--background.cvc-carousel--layered.cvc-stage-portaled {
    margin-top: var(--cvc-clear-top, 0px) !important;
    margin-bottom: var(--cvc-clear-bottom, 0px) !important;
}
.cvc-background-plate {
    will-change: clip-path, top, height;
}
/* Do not force neighboring branches into new isolated compositing surfaces.
   Their own theme paint must remain authoritative. */
.cvc-plate-parent > :not(.cvc-background-plate) {
    opacity: revert;
    mix-blend-mode: normal;
}


/* v2.5 — mathematically coupled responsive UI ------------------------------
   JS derives this inset from the solved visible section height, so the rail
   rises into the image continuously instead of snapping between breakpoints. */
.cvc-carousel--background.cvc-stage-portaled .cvc-bottom {
    bottom: var(--cvc-nav-bottom, clamp(48px, 9cqh, 112px)) !important;
}
@media (max-width: 760px) {
    .cvc-carousel--background.cvc-stage-portaled .cvc-bottom {
        bottom: var(--cvc-nav-bottom, clamp(44px, 8cqh, 72px)) !important;
    }
}

/* v2.8: YouTube is presentation-only; all interaction belongs to CVC controls. */
.cvc-carousel .cvc-player--youtube iframe,
.cvc-carousel .cvc-slide iframe[src*="youtube.com"],
.cvc-carousel .cvc-slide iframe[src*="youtube-nocookie.com"] {
    pointer-events: none !important;
}

/* v2.8: the stage is moved outside .cvc-carousel in layered background mode,
   so repeat the iframe safeguards against its actual portaled ancestor. Inline
   dimensions remain the primary crop; these rules are a reliable fallback while
   YouTube replaces its mount node and during resize/orientation changes. */
.cvc-background-plate .cvc-player--youtube,
.cvc-background-plate iframe.cvc-player--youtube,
.cvc-background-plate iframe[src*="youtube.com"],
.cvc-background-plate iframe[src*="youtube-nocookie.com"] {
    max-width: none !important;
    max-height: none !important;
    border: 0 !important;
    pointer-events: none !important;
}


/* v2.10 — responsive selector drawer + continuing-picture mode ------------
   The drawer deliberately does not set .cvc-bottom's transform. Background
   mode's fluid UI scale therefore remains authoritative in every state. */
.cvc-bottom.cvc-selector-drawer {
    --cvc-drawer-ease: cubic-bezier(.2, .82, .22, 1);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: visible;
    will-change: width, bottom, padding;
    transition:
        width .58s var(--cvc-drawer-ease),
        bottom .68s cubic-bezier(.18, .88, .26, 1.08),
        padding .48s var(--cvc-drawer-ease),
        border-radius .42s ease,
        background .35s ease,
        border-color .35s ease,
        box-shadow .42s ease,
        transform .35s ease;
}

/* During the first reveal, JS leaves the toolbox open. Removing the intro
   state and adding is-drawer-docked lets width/bottom/padding settle together. */
.cvc-bottom.cvc-selector-drawer.is-drawer-intro {
    box-shadow: 0 18px 46px rgba(0, 0, 0, .32);
}
.cvc-bottom.cvc-selector-drawer.is-drawer-intro .cvc-drawer-handle {
    animation: cvcDrawerArrival .72s cubic-bezier(.2, .84, .22, 1.18) both;
}

.cvc-drawer-content {
    order: 1;
    min-width: 0;
    max-height: 240px;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition:
        max-height .58s var(--cvc-drawer-ease),
        opacity .3s ease .08s,
        transform .52s var(--cvc-drawer-ease),
        visibility 0s linear 0s;
}

/* Once docked, the bottom edge remains fixed at the safe-area inset. Opening
   removes only the compact rules, so the contents grow upward from that edge. */
.cvc-bottom.cvc-selector-drawer.is-drawer-docked,
.cvc-bottom.cvc-selector-drawer.is-drawer-open:not(.is-drawer-intro) {
    top: auto !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
}
.cvc-bottom.cvc-selector-drawer.is-drawer-docked:not(.is-drawer-open) {
    width: min(calc(100% - 24px), calc(100vw - 24px), clamp(220px, 28vw, 340px));
    padding: 0;
    border-radius: 15px;
    background: rgba(9, 10, 13, .76);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .3);
}
.cvc-bottom.cvc-selector-drawer.is-drawer-docked:not(.is-drawer-open) .cvc-drawer-content,
.cvc-bottom.cvc-selector-drawer .cvc-drawer-content[aria-hidden="true"] {
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    pointer-events: none;
    transition:
        max-height .5s var(--cvc-drawer-ease),
        opacity .18s ease,
        transform .4s var(--cvc-drawer-ease),
        visibility 0s linear .5s;
}

.cvc-drawer-handle {
    appearance: none;
    order: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 7px 12px;
    border: 0;
    border-radius: 11px;
    color: rgba(255, 255, 255, .9);
    background: rgba(255, 255, 255, .045);
    font: 600 12px/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: .035em;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: color .24s ease, background .24s ease, box-shadow .24s ease;
}
.cvc-drawer-handle:hover { color: #fff; background: rgba(255, 255, 255, .09); }
.cvc-drawer-handle:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .9);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, .38);
}

/* Support both the compact class names used by the renderer and BEM-style
   child names, so custom templates can retain the same drawer affordance. */
.cvc-drawer-grip,
.cvc-drawer-handle__grip {
    flex: 0 0 auto;
    width: 30px;
    height: 4px;
    border-radius: 999px;
    background: currentColor;
    opacity: .48;
}
.cvc-drawer-text,
.cvc-drawer-handle__text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cvc-drawer-chevron,
.cvc-drawer-handle__chevron {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    transform: rotate(0deg);
    transform-origin: center;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .38s var(--cvc-drawer-ease);
}
.cvc-drawer-chevron svg,
.cvc-drawer-handle__chevron svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.cvc-selector-drawer.is-drawer-open .cvc-drawer-chevron,
.cvc-selector-drawer.is-drawer-open .cvc-drawer-handle__chevron {
    transform: rotate(180deg);
}

@keyframes cvcDrawerArrival {
    0% { transform: translateY(7px); opacity: .58; }
    62% { transform: translateY(-3px); opacity: 1; }
    82% { transform: translateY(1px); }
    100% { transform: translateY(0); opacity: 1; }
}
@keyframes cvcDrawerPeek {
    0%, 100% { transform: translateY(0); }
    42% { transform: translateY(-5px); }
    68% { transform: translateY(1px); }
}
@media (hover: hover) and (pointer: fine) {
    .cvc-selector-drawer.is-drawer-docked:not(.is-drawer-open) .cvc-drawer-handle:hover,
    .cvc-selector-drawer.is-drawer-docked:not(.is-drawer-open) .cvc-drawer-handle:focus-visible {
        animation: cvcDrawerPeek .55s cubic-bezier(.22, .76, .24, 1.16) both;
    }
}

/* Thumbnails remain reachable by touch even when their combined width exceeds
   the mobile drawer. Safe alignment avoids clipping the first item. */
@media (max-width: 760px) {
    .cvc-bottom.cvc-selector-drawer.is-drawer-docked,
    .cvc-bottom.cvc-selector-drawer.is-drawer-open:not(.is-drawer-intro) {
        bottom: calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
    }
    .cvc-bottom.cvc-selector-drawer.is-drawer-docked:not(.is-drawer-open) {
        width: min(calc(100% - 18px), calc(100vw - 18px), 300px);
    }
    .cvc-selector-drawer .cvc-drawer-content { max-height: 210px; }
    .cvc-selector-drawer .cvc-nav {
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-inline: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y;
    }
    .cvc-selector-drawer .cvc-nav::-webkit-scrollbar { display: none; }
    .cvc-selector-drawer .cvc-thumb {
        scroll-snap-align: center;
        touch-action: manipulation;
    }
    .cvc-drawer-handle { min-height: 46px; padding-inline: 11px; }
}


/* Continuing-picture host. It is layout-transparent until JS promotes it to
   PiP; the same fixed rule is the non-top-layer fallback. When the host is a
   popover/dialog, its active state is also rendered in the browser top layer. */
.cvc-pip-host { display: contents; }
/* In the ordinary in-block layout, a real wrapper preserves the stage's
   original width/aspect-ratio footprint. Background plates stay contents-like
   because their stage already owns absolute plate geometry. */
.cvc-carousel:not(.cvc-carousel--background) > .cvc-pip-host:not(.cvc-pip-active) {
    display: block;
    position: relative;
    width: 100%;
}
.cvc-pip-placeholder {
    display: none;
    width: 100%;
    aspect-ratio: var(--cvc-ratio, 16 / 9);
    min-height: 260px;
    visibility: hidden;
    pointer-events: none;
}
.cvc-pip-placeholder.is-active { display: block; }
.cvc-pip-host.cvc-pip-active {
    --cvc-pip-gap: clamp(10px, 2vw, 22px);
    position: fixed !important;
    inset: auto calc(env(safe-area-inset-right, 0px) + var(--cvc-pip-gap))
        calc(env(safe-area-inset-bottom, 0px) + var(--cvc-pip-gap)) auto !important;
    z-index: 2147483000 !important;
    display: block;
    box-sizing: border-box;
    width: min(430px, calc(100vw - var(--cvc-pip-gap) - var(--cvc-pip-gap) - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
    width: min(430px, calc(100vw - var(--cvc-pip-gap) - var(--cvc-pip-gap) - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)), calc(177.7778dvh - 78px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
    min-width: min(200px, calc(100vw - var(--cvc-pip-gap) - var(--cvc-pip-gap) - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
    min-width: min(200px, calc(100vw - var(--cvc-pip-gap) - var(--cvc-pip-gap) - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)), calc(177.7778dvh - 78px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
    aspect-ratio: 16 / 9;
    height: auto;
    min-height: 0;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: clamp(12px, 1.5vw, 18px);
    color: #fff;
    background: #090a0d;
    box-shadow: 0 18px 56px rgba(0, 0, 0, .54), 0 3px 14px rgba(0, 0, 0, .34);
    pointer-events: auto;
    animation: cvcPipEnter .38s cubic-bezier(.2, .82, .22, 1) both;
}
.cvc-pip-host::backdrop { background: transparent !important; backdrop-filter: none !important; }

/* Older browsers without Popover top-layer support keep the stable player in
   its background plate. Temporarily remove that plate's paint containment so
   the fixed card can reach the viewport instead of being clipped to WATCH. */
.cvc-background-plate.cvc-pip-fallback-active {
    z-index: 2147482999 !important;
    overflow: visible !important;
    contain: none !important;
    clip-path: none !important;
    will-change: auto;
}
.cvc-carousel.cvc-pip-fallback-active {
    overflow: visible !important;
    contain: none !important;
    clip-path: none !important;
    isolation: auto !important;
}

.cvc-pip-host:not(.cvc-pip-active) > .cvc-pip-close { display: none; }
.cvc-pip-host.cvc-pip-active .cvc-stage {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    border-radius: inherit;
}
.cvc-pip-host.cvc-pip-active .cvc-slide {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.cvc-pip-close {
    appearance: none;
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 8;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 999px;
    color: #fff;
    background: rgba(0, 0, 0, .64);
    box-shadow: 0 5px 18px rgba(0, 0, 0, .28);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    cursor: pointer;
    touch-action: manipulation;
    transition: transform .22s ease, background .22s ease, border-color .22s ease;
}
.cvc-pip-close svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}
.cvc-pip-close:hover { transform: scale(1.055); background: rgba(0, 0, 0, .82); border-color: rgba(255, 255, 255, .5); }
.cvc-pip-close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    background: rgba(0, 0, 0, .84);
}

.cvc-pip-host.cvc-pip-active .cvc-player-controls {
    position: absolute !important;
    inset: 9px 58px auto auto !important;
    z-index: 7 !important;
    display: flex;
    gap: 7px;
    transform: none !important;
    transform-origin: right top;
    pointer-events: auto;
}
.cvc-pip-host.cvc-pip-active .cvc-player-controls .cvc-sound,
.cvc-pip-host.cvc-pip-active .cvc-player-controls .cvc-play-toggle {
    width: 44px;
    height: 44px;
}
.cvc-pip-host.cvc-pip-active:hover .cvc-player-controls .cvc-play-toggle,
.cvc-pip-host.cvc-pip-active:focus-within .cvc-player-controls .cvc-play-toggle,
.cvc-pip-host.cvc-pip-active .cvc-player-controls.is-expanded .cvc-play-toggle {
    opacity: .94;
    visibility: visible;
    transform: translateX(0) scale(1);
}

/* YouTube's actual iframe never shrinks below its 200 x 200 API floor. On a
   narrow 16:9 card the excess height is intentionally clipped by the stage. */
.cvc-pip-host.cvc-pip-active .cvc-player--youtube,
.cvc-pip-host.cvc-pip-active iframe.cvc-player--youtube,
.cvc-pip-host.cvc-pip-active iframe[src*="youtube.com"],
.cvc-pip-host.cvc-pip-active iframe[src*="youtube-nocookie.com"] {
    min-width: 200px !important;
    min-height: 200px !important;
    max-width: none !important;
    max-height: none !important;
    border: 0 !important;
    pointer-events: none !important;
}

@keyframes cvcPipEnter {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
    .cvc-pip-host.cvc-pip-active {
        --cvc-pip-gap: max(8px, 2.5vw);
        width: min(320px, calc(100vw - var(--cvc-pip-gap) - var(--cvc-pip-gap) - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
        width: min(320px, calc(100vw - var(--cvc-pip-gap) - var(--cvc-pip-gap) - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)), calc(177.7778dvh - 78px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
        border-radius: 13px;
    }
    .cvc-pip-close { top: 6px; right: 6px; }
    .cvc-pip-host.cvc-pip-active .cvc-player-controls { inset: 7px 55px auto auto !important; gap: 5px; }
}

@media (max-width: 700px) {
    .cvc-pip-placeholder { min-height: 220px; }
}

@media (hover: none), (pointer: coarse) {
    .cvc-pip-host.cvc-pip-active .cvc-player-controls .cvc-play-toggle {
        opacity: .9;
        visibility: visible;
        transform: translateX(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cvc-bottom.cvc-selector-drawer,
    .cvc-selector-drawer .cvc-drawer-content,
    .cvc-selector-drawer .cvc-drawer-handle,
    .cvc-selector-drawer .cvc-drawer-chevron,
    .cvc-selector-drawer .cvc-drawer-handle__chevron,
    .cvc-pip-host.cvc-pip-active,
    .cvc-pip-host.cvc-pip-active .cvc-pip-close,
    .cvc-pip-host.cvc-pip-active .cvc-play-toggle {
        animation: none !important;
        transition: none !important;
    }
    .cvc-selector-drawer .cvc-nav { scroll-behavior: auto !important; }
}