/* [vd-split] video-player — extracted verbatim from videos/css/video.css. Tokens (--vd-*) come from .vd in video.css. */
.vd-embed lite-youtube { max-width: 100%; width: 100%; border-radius: var(--vd-radius); overflow: hidden; box-shadow: var(--vd-shadow); }
/* zero-height anchor used by the floating-player observer (stays in flow) */
.vd-stage-sentinel { height: 1px; width: 100%; }
/* reserves the stage's height while it is docked (position:fixed); player.js sets
   the inline height on dock and back to 0 on undock, so the page never jumps. */
.vd-stage-placeholder { height: 0; width: 100%; }
/* =========================================================================
   Floating mini-player (desktop; bottom-right)
   ========================================================================= */
.vd-video-stage { position: relative; }
.vd-float-bar { display: none; }
.vd-video-stage.vd-floating { position: fixed; right: 20px; bottom: 20px; z-index: 60; width: 360px; max-width: 40vw; box-shadow: 0 14px 44px rgba(0,0,0,.38); border-radius: 12px; overflow: hidden; background: #000; }
.vd-video-stage.vd-floating .vd-float-bar { display: flex; align-items: center; justify-content: space-between; background: #121417; color: #fff; padding: 6px 10px; font-size: 12px; font-weight: 700; }
.vd-float-label { display: inline-flex; align-items: center; gap: 5px; }
.vd-float-label .vd-icon { font-size: 16px; color: #ff9a52; }
.vd-float-close { background: transparent; border: none; color: #fff; cursor: pointer; display: inline-flex; padding: 2px; }
.vd-float-close .vd-icon { font-size: 19px; }
.vd-video-stage.vd-floating .vd-embed lite-youtube { border-radius: 0; box-shadow: none; }
/* On phones, dock the floating player full-width at the BOTTOM, flush on top of
   the sticky buy bar — player.js publishes the bar's real height as
   --vd-buybar-h (0 when there is no bar), so there is never a stray gap.
   Full-bleed because a corner thumbnail is too small to watch. */
@media (max-width: 900px) {
  .vd-video-stage.vd-floating {
    top: auto; bottom: var(--vd-buybar-h, 0px); left: 0; right: auto;
    /* 100vw, not 100% — an ancestor (transform/contain) is the containing block
       at ~375px, so width:100% leaves a gap; 100vw is true edge-to-edge. */
    width: 100vw; max-width: 100vw; border-radius: 0;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .35);
  }
}