/* ==========================================================================
   shorts.css — the Shorts section (#5428): the `shorts` surface of
   styles/default_v2/layouts.json.

   Loaded only by layout/shorts/*.html, so the rest of the site never sees
   this sheet. Blocks:

     vxs-hero   the Shorts home's featured band (shorts/_hero.html) — the one
                word the surface owns, body[data-lo-shorts-hero], desktop only;
                a phone always gets the portrait billboard
     vxs-btn    the hero's two buttons, the mono CTA pair the storefront uses
     vxs-page   paddings shared by the Shorts pages

   Everything else on these pages is the site's own: rails and cards come
   from new-swiper / the series card (rail_density, tile_shape, card_hover,
   portrait_hover), buttons follow --vxl-btn-radius, posters follow
   --vxl-card-radius. Colour is tokens only (ink / scrim / surface / cta),
   so a light palette needs nothing extra. Right-to-left needs nothing
   extra either: the band is a grid and every offset is logical.
   ========================================================================== */

/* ---------- poster shape and size (shorts_tile, shorts_tile_size) -------- */

/* One set of numbers every Shorts poster reads — shelves, the browse wall,
   "You May Also Like", their skeletons, and the Continue Watching / Top 10
   rows when those are drawn as posters. Top 10's big numbers and the
   Continue Watching card keep the board's own shapes. */
body {
  --vxs-tile-ratio: 9 / 16;
  --vxs-tile-across: 6;
  --vxs-tile-min: 160px;
  --vxs-tile-phone: 132px;
  --vxs-wall-min: 200px;
  --vxs-wall-cols-phone: 3;
}

/* Classic: the boards' desktop 3:4 card, cropped from the 9:16 artwork */
body[data-lo-shorts-tile="classic"] {
  --vxs-tile-ratio: 3 / 4;
}

body[data-lo-shorts-tile-size="small"] {
  --vxs-tile-across: 8;
  --vxs-tile-min: 120px;
  --vxs-tile-phone: 108px;
  --vxs-wall-min: 150px;
  --vxs-wall-cols-phone: 4;
}

body[data-lo-shorts-tile-size="large"] {
  --vxs-tile-across: 4;
  --vxs-tile-min: 200px;
  --vxs-tile-phone: 160px;
  --vxs-wall-min: 260px;
  --vxs-wall-cols-phone: 2;
}

/* ---------- the band --------------------------------------------------- */

.vxs-hero {
  position: relative;
  color: var(--vxl-ink, #fff);
}

.vxs-hero__band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* One pick per slide: the backdrop, scrims and copy move together. The
   leaving slide is lifted out of flow onto the incoming one, so the band
   keeps the incoming pick's height through the change. */
.vxs-hero__slide {
  position: relative;
  isolation: isolate;
}

.vxs-hx-slide-leave-active,
.vxs-hx-fade-leave-active {
  position: absolute;
  inset: 0;
}

/* hero_transition = slide: the home billboard's push (300ms) — the next pick
   in from the right, from the left when going back */
.vxs-hx-slide-enter-active,
.vxs-hx-slide-leave-active {
  transition: transform 300ms var(--vxl-ease-io, ease-in-out);
}

.vxs-hx-slide-enter {
  transform: translateX(100%);
}

.vxs-hx-slide-leave-to {
  transform: translateX(-100%);
}

.is-back .vxs-hx-slide-enter {
  transform: translateX(-100%);
}

.is-back .vxs-hx-slide-leave-to {
  transform: translateX(100%);
}

/* hero_transition = fade: the home billboard's 900ms dissolve — the old copy
   leaves fast, the new copy rises in once the new art has mostly landed,
   and the incoming poster settles from a 3% push-in */
.vxs-hx-fade-enter-active,
.vxs-hx-fade-leave-active {
  transition: opacity 900ms var(--vxl-ease-io, ease-in-out);
}

.vxs-hx-fade-enter,
.vxs-hx-fade-leave-to {
  opacity: 0;
}

.vxs-hx-fade-leave-active .vxs-hero__copy {
  transition: opacity var(--vxl-dur-2, 0.25s) var(--vxl-ease, ease);
}

.vxs-hx-fade-leave-to .vxs-hero__copy {
  opacity: 0;
}

.vxs-hx-fade-enter .vxs-hero__copy {
  opacity: 0;
  transform: translateY(12px);
}

.vxs-hx-fade-enter-active .vxs-hero__copy {
  transition: opacity 450ms var(--vxl-ease, ease) 350ms,
              transform 450ms var(--vxl-ease, ease) 350ms;
}

.vxs-hx-fade-enter .vxs-hero__poster {
  transform: scale(1.03);
}

.vxs-hx-fade-enter-active .vxs-hero__poster {
  transition: transform 900ms var(--vxl-ease, ease);
}

@media (prefers-reduced-motion: reduce) {
  .vxs-hx-slide-enter-active,
  .vxs-hx-slide-leave-active {
    transition: opacity var(--vxl-dur-2, 0.25s) var(--vxl-ease, ease);
  }

  .vxs-hx-slide-enter,
  .vxs-hx-slide-leave-to,
  .is-back .vxs-hx-slide-enter,
  .is-back .vxs-hx-slide-leave-to {
    transform: none;
    opacity: 0;
  }

  .vxs-hx-fade-enter .vxs-hero__copy,
  .vxs-hx-fade-enter .vxs-hero__poster {
    transform: none;
  }
}

.vxs-hero__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  filter: blur(28px) saturate(1.15);
  transform: scale(1.2);
  z-index: 0;
}

.vxs-hero__scrim,
.vxs-hero__fade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.vxs-hero__scrim {
  background: linear-gradient(
    to right,
    var(--vxl-scrim-solid, #000) 0%,
    var(--vxl-scrim-strong, rgba(0, 0, 0, 0.86)) 38%,
    var(--vxl-scrim-weak, rgba(0, 0, 0, 0.35)) 100%
  );
}

.vxs-hero__fade {
  top: auto;
  height: 160px;
  background: linear-gradient(to bottom, transparent, var(--vxl-scrim-solid, #000));
}

.vxs-hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 620px) minmax(280px, 1fr);
  align-items: center;
  gap: var(--vxl-space-6, 32px) var(--vxl-space-7, 48px);
  min-height: 600px;
  /* the band sits under the fixed header like the home billboard, so its
     content starts the header's height down */
  padding: calc(var(--vxl-header-h, 68px) + var(--vxl-space-6, 32px)) var(--vxl-gutter, 4vw) var(--vxl-space-7, 48px);
}

/* The Shorts home opens with its hero under the bar, as the site's home does
   (header.css clears .contentHolder's pt-5 mt-5 there). With the hero off
   on desktop the page keeps the ordinary offset; phones always carry the
   hero, which pads for the chrome itself. */
/* Keyed on the Shorts root, not a page class: on an all-Shorts site the
   Shorts home renders at / and the body is .page-home (#5428). The id inside
   :has() also outranks header.css / editorpick.css's .page-home offsets. */
body:not([data-lo-shorts-hero="none"]) .contentHolder:has(#shorts-page) {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

@media (max-width: 991.98px) {
  body .contentHolder:has(#shorts-page) {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}

.vxs-hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--vxl-space-4, 16px);
  min-width: 0;
}

.vxs-hero__tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--vxl-space-2, 8px);
}

.vxs-hero__badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--vxl-radius-sm, 4px);
  background: var(--vxl-accent, #e50914);
  color: var(--vxl-on-accent, #fff);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.vxs-hero__genres {
  color: var(--vxl-ink-muted, rgba(255, 255, 255, 0.72));
  font-size: 14px;
}

.vxs-hero__title {
  margin: 0;
  font-size: clamp(34px, 4.4vw, 58px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: inherit;
}

/* ---------- shorts_hero = edge / centered (computers) -------------------
   Edge: Spotlight with the poster standing on the right gutter and the
   title on ONE line. Centred card: the poster as a card in the middle, the
   tags, title, a line of synopsis, meta and buttons centred under it, the
   title on one line too. The one-line title is fitted by _hero.html
   fitTitle(): it steps down from the clamp above until the name fits, to a
   28px floor; a name still too long there gets an ellipsis and its full
   text as a tooltip. Phones follow shorts_hero_phone, untouched. */
@media (min-width: 992px) {
  body[data-lo-shorts-hero="edge"] .vxs-hero__inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  body[data-lo-shorts-hero="edge"] .vxs-hero__poster {
    justify-self: end;
  }

  body[data-lo-shorts-hero="centered"] .vxs-hero__inner {
    grid-template-columns: minmax(0, 880px);
    justify-content: center;
    justify-items: center;
    align-content: center;
    gap: var(--vxl-space-5, 24px);
    min-height: 0;
    text-align: center;
  }

  body[data-lo-shorts-hero="centered"] .vxs-hero__poster {
    order: 0;
    width: 220px;
    justify-self: center;
  }

  body[data-lo-shorts-hero="centered"] .vxs-hero__copy {
    order: 1;
    width: 100%;
    align-items: center;
    gap: var(--vxl-space-3, 12px);
  }

  body[data-lo-shorts-hero="centered"] .vxs-hero__tags,
  body[data-lo-shorts-hero="centered"] .vxs-hero__meta,
  body[data-lo-shorts-hero="centered"] .vxs-hero__actions {
    justify-content: center;
  }

  body[data-lo-shorts-hero="centered"] .vxs-hero__synopsis {
    max-width: 60ch;
    margin-inline: auto;
    -webkit-line-clamp: 2;
  }

  /* the strip of the other picks centres under the column */
  body[data-lo-shorts-hero="centered"] .vxs-hero__strip {
    justify-content: center;
  }

  body[data-lo-shorts-hero="edge"] .vxs-hero__title,
  body[data-lo-shorts-hero="centered"] .vxs-hero__title {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.vxs-hero__synopsis {
  margin: 0;
  max-width: 46ch;
  color: var(--vxl-ink-muted, rgba(255, 255, 255, 0.72));
  font-size: 15px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vxs-hero__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--vxl-space-2, 8px);
  color: var(--vxl-ink-muted, rgba(255, 255, 255, 0.72));
  font-size: 14px;
}

.vxs-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vxl-space-3, 12px);
  margin-top: var(--vxl-space-1, 4px);
}

.vxs-hero__poster {
  display: block;
  justify-self: center;
  width: 280px;
  aspect-ratio: 9 / 16;
  border-radius: var(--vxl-card-radius, 6px);
  overflow: hidden;
  background: var(--vxl-surface-2, rgba(255, 255, 255, 0.08));
  box-shadow: var(--vxl-shadow-3, 0 20px 48px rgba(0, 0, 0, 0.46));
  transition: transform var(--vxl-dur-2, 0.25s) var(--vxl-ease, ease);
}

.vxs-hero__poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (hover: hover) {
  .vxs-hero__poster:hover {
    transform: scale(1.02);
  }
}

/* ---------- the two buttons: the storefront's mono CTA pair ------------- */

.vxs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 46px;
  padding: 0 26px;
  border-radius: var(--vxl-btn-radius, 999px);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--vxl-dur-1, 0.15s) var(--vxl-ease, ease),
              color var(--vxl-dur-1, 0.15s) var(--vxl-ease, ease),
              border-color var(--vxl-dur-1, 0.15s) var(--vxl-ease, ease);
}

.vxs-btn--cta {
  background: var(--vxl-cta-bg, #fff);
  color: var(--vxl-cta-ink, #000);
}

.vxs-btn--cta:hover,
.vxs-btn--cta:focus-visible {
  background: var(--vxl-cta-bg-hover, #d6d6d6);
  color: var(--vxl-cta-ink, #000);
}

.vxs-btn--ghost {
  background: transparent;
  color: var(--vxl-ink, #fff);
  border: 1px solid var(--vxl-ink, #fff);
  box-sizing: border-box;
}

.vxs-btn--ghost:hover,
.vxs-btn--ghost:focus-visible {
  background: var(--vxl-btn-soft-hover, rgba(255, 255, 255, 0.12));
  color: var(--vxl-ink, #fff);
}

/* the board's grey fill — Previous on the watch page */
.vxs-btn--soft {
  background: var(--vxl-glass-raised, rgba(109, 109, 110, 0.7));
  color: var(--vxl-ink, #fff);
  border: 0;
}

.vxs-btn--soft:hover,
.vxs-btn--soft:focus-visible {
  background: var(--vxl-glass-raised-hover, rgba(109, 109, 110, 0.5));
  color: var(--vxl-ink, #fff);
}

.vxs-btn:focus-visible {
  outline: 2px solid var(--vxl-focus-ring, #e50914);
  outline-offset: 3px;
}

/* ---------- the strip of picks ------------------------------------------ */

.vxs-hero__strip {
  position: relative;
  z-index: 3;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px var(--vxl-gutter, 4vw) 0;
  margin-top: -20px;
}

/* ---------- Browse by Genre: the category chips under the hero ----------- */

.vxs-genres {
  padding: 56px var(--vxl-gutter, 4vw) 0;
  margin-bottom: 56px;
  color: var(--vxl-ink, #fff);
}

.vxs-genres__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 18px;
}

.vxs-genres__title {
  margin: 0;
  font-size: var(--vxl-rail-title-size, 22px);
  font-weight: 700;
  color: inherit;
}

.vxs-genres__all {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: var(--vxl-ink, #fff);
  text-decoration: none;
}

.vxs-genres__all:hover {
  color: var(--vxl-accent, #e50914);
}

.vxs-genres .vxs-chips {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

.vxs-genres .vxs-chips::-webkit-scrollbar {
  display: none;
}

.vxs-chip--md {
  height: 36px;
}

.vxs-hero__strip::-webkit-scrollbar {
  display: none;
}

.vxs-hero__pick {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 230px;
  padding: 8px;
  border-radius: var(--vxl-card-radius, 6px);
  border: 2px solid transparent;
  background: var(--vxl-surface-2, rgba(255, 255, 255, 0.08));
  color: var(--vxl-ink, #fff);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: border-color var(--vxl-dur-1, 0.15s) var(--vxl-ease, ease),
              background-color var(--vxl-dur-1, 0.15s) var(--vxl-ease, ease);
}

.vxs-hero__pick:hover {
  background: var(--vxl-surface-3, rgba(255, 255, 255, 0.14));
}

.vxs-hero__pick.is-active {
  border-color: var(--vxl-accent, #e50914);
}

.vxs-hero__pick:focus-visible {
  outline: 2px solid var(--vxl-focus-ring, #e50914);
  outline-offset: 2px;
}

.vxs-hero__pick img {
  flex: none;
  width: 40px;
  height: 71px;
  object-fit: cover;
  border-radius: var(--vxl-radius-sm, 4px);
}

.vxs-hero__pickTitle {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vxs-hero__dot {
  display: none;
}

/* ---------- loading ------------------------------------------------------ */

.vxs-hero__skeleton {
  min-height: 600px;
  background: var(--vxl-surface-1, rgba(255, 255, 255, 0.04));
}

/* ---------- the rows under the hero -------------------------------------- */

.shorts-page {
  position: relative;
  z-index: 2;
}

/* ---------- phones: the portrait billboard ------------------------------- */

@media (max-width: 991.98px) {
  .vxs-hero__slide {
    padding-top: calc(var(--vxm-header-h, 68px) + 58px);
  }

  .vxs-hero__backdrop {
    filter: blur(32px) saturate(1.2) brightness(0.8);
  }

  .vxs-hero__scrim {
    background: linear-gradient(
      to bottom,
      var(--vxl-scrim-weak, rgba(0, 0, 0, 0.35)) 0%,
      var(--vxl-scrim, rgba(0, 0, 0, 0.62)) 45%,
      var(--vxl-scrim-solid, #000) 100%
    );
  }

  .vxs-hero__fade {
    height: 90px;
  }

  .vxs-hero__inner {
    grid-template-columns: 1fr;
    justify-items: center;
    min-height: 0;
    gap: var(--vxl-space-4, 16px);
    padding: 0 20px var(--vxl-space-5, 24px);
    text-align: center;
  }

  /* the poster first, the words under it */
  .vxs-hero__poster {
    order: 0;
    width: min(62vw, 250px);
    border-radius: var(--vxm-hero-radius, 16px);
  }

  .vxs-hero__copy {
    order: 1;
    align-items: center;
    gap: 10px;
  }

  .vxs-hero__tags {
    justify-content: center;
  }

  .vxs-hero__title {
    font-size: 30px;
    letter-spacing: -0.01em;
  }

  .vxs-hero__synopsis {
    -webkit-line-clamp: 2;
    font-size: 14px;
  }

  .vxs-hero__actions {
    justify-content: center;
  }

  .vxs-btn {
    height: 44px;
  }

  .vxs-btn--cta {
    padding: 0 30px;
    font-size: 16px;
  }

  /* More Info becomes the round icon button */
  .vxs-btn--ghost {
    width: 44px;
    padding: 0;
    border-radius: 999px;
  }

  .vxs-btn--ghost span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  /* the strip collapses to dots */
  .vxs-hero__strip {
    justify-content: center;
    gap: 2px;
    margin-top: 0;
    padding: 0 16px var(--vxl-space-3, 12px);
  }

  .vxs-hero__pick {
    width: auto;
    padding: 0 3px;
    height: 28px;
    border: 0;
    background: none;
  }

  .vxs-hero__pick img,
  .vxs-hero__pickTitle {
    display: none;
  }

  .vxs-hero__dot {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background: var(--vxl-ink-faint, rgba(255, 255, 255, 0.55));
    transition: width var(--vxl-dur-2, 0.25s) var(--vxl-ease, ease),
                background-color var(--vxl-dur-2, 0.25s) var(--vxl-ease, ease);
  }

  .vxs-hero__pick.is-active .vxs-hero__dot {
    width: 26px;
    background: var(--vxl-ink, #fff);
  }

  .vxs-hero__skeleton {
    min-height: 420px;
  }
}

/* ---------- the word ----------------------------------------------------- */

/* shorts_hero = none, desktop: no band. The component already skips the
   request; this keeps the page right if the stamp changes under a preview
   before the component re-reads it. The word is desktop-scoped, so phones
   are untouched. */
@media (min-width: 992px) {
  body[data-lo-shorts-hero="none"] .vxs-hero {
    display: none;
  }
}

/* shorts_hero = billboard, desktop: the artwork itself across the band —
   sharp, the original image (_hero.html), framed on its upper third where a
   poster keeps its faces — with the copy centred over its foot and a dot per
   pick. Shorts carry portrait art only, so the band is a wide crop of it. */
@media (min-width: 992px) {
  body[data-lo-shorts-hero="billboard"] .vxs-hero__backdrop {
    filter: none;
    transform: none;
    object-position: center 22%;
  }

  body[data-lo-shorts-hero="billboard"] .vxs-hero__scrim {
    background: linear-gradient(
      to bottom,
      var(--vxl-scrim-weak, rgba(0, 0, 0, 0.35)) 0%,
      transparent 30%,
      var(--vxl-scrim, rgba(0, 0, 0, 0.62)) 66%,
      var(--vxl-scrim-solid, #000) 100%
    );
  }

  body[data-lo-shorts-hero="billboard"] .vxs-hero__inner {
    grid-template-columns: minmax(0, 760px);
    justify-content: center;
    align-content: end;
    min-height: min(82vh, 760px);
    padding-bottom: var(--vxl-space-5, 24px);
    text-align: center;
  }

  body[data-lo-shorts-hero="billboard"] .vxs-hero__poster {
    display: none;
  }

  body[data-lo-shorts-hero="billboard"] .vxs-hero__copy {
    align-items: center;
  }

  body[data-lo-shorts-hero="billboard"] .vxs-hero__tags,
  body[data-lo-shorts-hero="billboard"] .vxs-hero__meta,
  body[data-lo-shorts-hero="billboard"] .vxs-hero__actions {
    justify-content: center;
  }

  body[data-lo-shorts-hero="billboard"] .vxs-hero__synopsis {
    max-width: 60ch;
  }

  /* the strip of picks becomes a row of dots, as on a phone */
  body[data-lo-shorts-hero="billboard"] .vxs-hero__strip {
    justify-content: center;
    gap: 2px;
    margin-top: 0;
    padding: 0 var(--vxl-gutter, 4vw) var(--vxl-space-3, 12px);
  }

  body[data-lo-shorts-hero="billboard"] .vxs-hero__pick {
    width: auto;
    height: 28px;
    padding: 0 3px;
    border: 0;
    background: none;
  }

  body[data-lo-shorts-hero="billboard"] .vxs-hero__pick img,
  body[data-lo-shorts-hero="billboard"] .vxs-hero__pickTitle {
    display: none;
  }

  body[data-lo-shorts-hero="billboard"] .vxs-hero__dot {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background: var(--vxl-ink-faint, rgba(255, 255, 255, 0.55));
    transition: width var(--vxl-dur-2, 0.25s) var(--vxl-ease, ease),
                background-color var(--vxl-dur-2, 0.25s) var(--vxl-ease, ease);
  }

  body[data-lo-shorts-hero="billboard"] .vxs-hero__pick.is-active .vxs-hero__dot {
    width: 26px;
    background: var(--vxl-ink, #fff);
  }

  body[data-lo-shorts-hero="billboard"] .vxs-hero__skeleton {
    min-height: min(82vh, 760px);
  }
}

@media (max-width: 991.98px) {
  /* shorts_hero_phone = billboard: the "Shorts Home, mobile" board — the
     artwork 470px tall from the top of the screen, fading into the page, the
     title and buttons over its last 170px */
  body[data-lo-shorts-hero-phone="billboard"] .vxs-hero__slide {
    padding-top: 0;
  }

  body[data-lo-shorts-hero-phone="billboard"] .vxs-hero__backdrop,
  body[data-lo-shorts-hero-phone="billboard"] .vxs-hero__scrim {
    bottom: auto;
    height: 470px;
  }

  body[data-lo-shorts-hero-phone="billboard"] .vxs-hero__backdrop {
    filter: none;
    transform: none;
    object-position: center 22%;
  }

  body[data-lo-shorts-hero-phone="billboard"] .vxs-hero__scrim {
    background: linear-gradient(
      to bottom,
      transparent 40%,
      color-mix(in srgb, var(--vod-body-bg, #141414) 70%, transparent) 70%,
      var(--vod-body-bg, #141414) 100%
    );
  }

  body[data-lo-shorts-hero-phone="billboard"] .vxs-hero__fade,
  body[data-lo-shorts-hero-phone="billboard"] .vxs-hero__poster {
    display: none;
  }

  body[data-lo-shorts-hero-phone="billboard"] .vxs-hero__inner {
    padding-top: 300px;
  }

  /* shorts_hero_phone = none: no band; the page keeps its place under the
     header and the category pills */
  body[data-lo-shorts-hero-phone="none"] .vxs-hero {
    display: none;
  }

  body[data-lo-shorts-hero-phone="none"] .contentHolder:has(#shorts-page) {
    padding-top: calc(var(--vxm-header-h, 68px) + 58px) !important;
  }
}

/* ==========================================================================
   The other Shorts pages: browse, a series, an episode. Shared bits first.
   ========================================================================== */

.vxs-page {
  padding: 28px var(--vxl-gutter, 4vw) 56px;
  color: var(--vxl-ink, #fff);
}

.vxs-crumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: var(--vxl-ink-faint, rgba(255, 255, 255, 0.55));
}

.vxs-crumb a {
  color: var(--vxl-ink-muted, rgba(255, 255, 255, 0.72));
  text-decoration: none;
}

.vxs-crumb a:hover {
  color: var(--vxl-ink, #fff);
}

.vxs-crumb [aria-current] {
  color: var(--vxl-ink, #fff);
}

/* chips: the category row, and the genre tags on a series */
.vxs-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vxs-chip {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 18px;
  border-radius: var(--vxl-btn-radius, 999px);
  border: 1px solid var(--vxl-line-strong, rgba(255, 255, 255, 0.26));
  color: var(--vxl-ink, #fff);
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  box-sizing: border-box;
  transition: background-color var(--vxl-dur-1, 0.15s) var(--vxl-ease, ease),
              color var(--vxl-dur-1, 0.15s) var(--vxl-ease, ease),
              border-color var(--vxl-dur-1, 0.15s) var(--vxl-ease, ease);
}

.vxs-chip:hover {
  background: var(--vxl-btn-soft-hover, rgba(255, 255, 255, 0.12));
  color: var(--vxl-ink, #fff);
}

.vxs-chip.is-active {
  background: var(--vxl-cta-bg, #fff);
  border-color: var(--vxl-cta-bg, #fff);
  color: var(--vxl-cta-ink, #000);
  font-weight: 600;
}

.vxs-chip--sm {
  height: 32px;
  padding: 0 14px;
  font-size: 13px;
}

.vxs-chips--inline {
  margin: 2px 0;
}

.vxs-btn--sm {
  height: 36px;
  padding: 0 18px;
  font-size: 13px;
}

.vxs-btn.is-off,
.vxs-btn[disabled] {
  opacity: 0.4;
  pointer-events: none;
}

.vxs-linkbtn {
  display: inline-flex;
  align-items: center;
  padding: 8px 4px;
  border: 0;
  background: none;
  color: var(--vxl-ink, #fff);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.vxs-linkbtn--muted {
  font-weight: 400;
  color: var(--vxl-ink-muted, rgba(255, 255, 255, 0.72));
}

.vxs-linkbtn:hover {
  color: var(--vxl-ink, #fff);
}

.vxs-iconbtn,
.vxs-watch__action .boxBtn,
.vxs-watch__rail .boxBtn {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.vxs-bar {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: var(--vxl-track, rgba(255, 255, 255, 0.2));
  overflow: hidden;
}

.vxs-bar > span {
  display: block;
  height: 100%;
  background: var(--vxl-accent, #e50914);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* ---------- browse: Browse.dc.html / BrowseMobile.dc.html ----------------- */

.vxs-browse {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-top: 28px;
  /* room for the last row's hover panel above the footer */
  padding-bottom: 120px;
}

.vxs-browse__top {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.vxs-browse__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.vxs-browse__title {
  margin: 0;
  font-size: 40.96px;
  line-height: 1.1;
  font-weight: 700;
  color: inherit;
}

.vxs-browse__pick {
  position: relative;
}

.vxs-browse__active {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px 0 16px;
  border-radius: var(--vxl-btn-radius, 999px);
  border: 1px solid var(--vxl-line-strong, rgba(255, 255, 255, 0.26));
  background: transparent;
  color: var(--vxl-ink, #fff);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  box-sizing: border-box;
  cursor: pointer;
}

.vxs-browse__active:hover {
  background: var(--vxl-btn-soft-hover, rgba(255, 255, 255, 0.12));
}

.vxs-browse__menu {
  position: absolute;
  inset-inline-start: 0;
  top: calc(100% + 8px);
  z-index: 20;
  min-width: 200px;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  border-radius: 10px;
  background: var(--vxl-surface-raised, #1e1e1e);
  border: 1px solid var(--vxl-line, rgba(255, 255, 255, 0.12));
  box-shadow: var(--vxl-shadow-3, 0 20px 48px rgba(0, 0, 0, 0.46));
  display: flex;
  flex-direction: column;
}

.vxs-browse__menu a {
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 14px;
  color: var(--vxl-ink, #fff);
  text-decoration: none;
}

.vxs-browse__menu a:hover,
.vxs-browse__menu a[aria-current] {
  background: var(--vxl-surface-3, rgba(255, 255, 255, 0.14));
  color: var(--vxl-ink, #fff);
}

.vxs-browse__wall {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.vxs-browse__sub {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px;
}

.vxs-browse__subTitle {
  margin: 0;
  font-size: 22.4px;
  font-weight: 700;
  color: inherit;
}

.vxs-browse__count {
  color: var(--vxl-ink-faint, #9e9e9e);
  font-size: 14px;
}

/* the wall: as many --vxs-wall-min columns as fit (200px on Medium), the
   board's 80px row gap */
.vxs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--vxs-wall-min), 1fr));
  gap: 80px 20px;
}

.vxs-grid__cell {
  min-width: 0;
}

.vxs-grid .vxs-skel {
  width: auto;
  min-width: 0;
}

/* computer: numbered pages */
.vxs-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 20px;
}

.vxs-pager__step,
.vxs-pager__num {
  min-width: 44px;
  height: 44px;
  border-radius: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--vxl-ink, #fff);
  text-decoration: none;
  box-sizing: border-box;
}

.vxs-pager__step {
  width: 44px;
  border: 1px solid var(--vxl-line-strong, rgba(255, 255, 255, 0.26));
}

.vxs-pager__step.is-off {
  border-color: var(--vxl-line, rgba(255, 255, 255, 0.12));
  color: var(--vxl-ink-faint, #5a5a5a);
  opacity: 0.6;
}

.vxs-pager__num {
  font-weight: 400;
}

.vxs-pager__num:hover,
.vxs-pager__step:not(.is-off):hover {
  background: var(--vxl-btn-soft-hover, rgba(255, 255, 255, 0.12));
  color: var(--vxl-ink, #fff);
}

.vxs-pager__num.is-current {
  background: var(--vxl-accent, #e50914);
  color: var(--vxl-on-accent, #fff);
  font-weight: 600;
}

.vxs-pager__gap {
  padding: 0 4px;
  color: var(--vxl-ink-faint, #9e9e9e);
}

/* phone: Load More (hidden on a computer, which pages) */
.vxs-more {
  display: none;
}

/* ---------- a series ------------------------------------------------------ */

.vxs-series {
  color: var(--vxl-ink, #fff);
}

.vxs-series__hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.vxs-series__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to right,
    var(--vxl-scrim-strong, rgba(0, 0, 0, 0.86)) 0%,
    var(--vxl-scrim, rgba(0, 0, 0, 0.62)) 50%,
    var(--vxl-scrim-weak, rgba(0, 0, 0, 0.35)) 100%
  );
}

.vxs-series__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 24px;
  /* the band runs up under the fixed header (see the .contentHolder rule
     below), so the content starts the header's height down */
  padding: calc(var(--vxl-header-h, 68px) + 24px) var(--vxl-gutter, 4vw) 40px;
}

/* the series band merges with the header like the Shorts home's hero:
   no pt-5 mt-5 band of page colour between the bar and the backdrop */
body .contentHolder:has(#vxs-series) {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.vxs-series__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 40px;
}

.vxs-series__poster {
  flex: 0 1 260px;
  min-width: 180px;
  aspect-ratio: 9 / 16;
  border-radius: var(--vxl-card-radius, 6px);
  overflow: hidden;
  background: var(--vxl-surface-2, rgba(255, 255, 255, 0.08));
  box-shadow: var(--vxl-shadow-3, 0 20px 48px rgba(0, 0, 0, 0.46));
}

.vxs-series__poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vxs-series__copy {
  flex: 999 1 420px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 8px;
}

.vxs-series__title {
  margin: 0;
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: inherit;
}

.vxs-series__stats {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 14px;
  font-weight: 500;
}

.vxs-series__stats > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.vxs-series__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  color: var(--vxl-ink-muted, rgba(255, 255, 255, 0.72));
  font-size: 14px;
}

.vxs-series__new {
  padding: 2px 8px;
  border-radius: var(--vxl-radius-sm, 4px);
  background: var(--vxl-accent, #e50914);
  color: var(--vxl-on-accent, #fff);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.vxs-series__syn {
  max-width: 66ch;
}

.vxs-series__syn p {
  margin: 0;
  color: var(--vxl-ink-muted, rgba(255, 255, 255, 0.72));
  font-size: 15px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vxs-series__syn p.is-open {
  -webkit-line-clamp: unset;
  display: block;
}

.vxs-series__progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 420px;
}

.vxs-series__progressRow {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--vxl-ink-muted, rgba(255, 255, 255, 0.72));
}

.vxs-series__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.vxs-series__body {
  display: flex;
  flex-direction: column;
  gap: 44px;
  padding-top: 16px;
}

.vxs-series__skeleton {
  min-height: 60vh;
  background: var(--vxl-surface-1, rgba(255, 255, 255, 0.04));
}

/* the free-window notice */
.vxs-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--vxl-card-radius, 6px);
  background: var(--vxl-surface-2, rgba(255, 255, 255, 0.08));
  font-size: 14px;
}

.vxs-banner__text {
  flex: 1 1 260px;
  color: var(--vxl-ink-muted, rgba(255, 255, 255, 0.72));
}

/* ---------- the episode grid --------------------------------------------- */

.vxs-eps {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.vxs-eps__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.vxs-eps__title {
  margin: 0;
  font-size: 22.4px;
  font-weight: 700;
  color: inherit;
}

.vxs-eps__count {
  color: var(--vxl-ink-faint, rgba(255, 255, 255, 0.55));
  font-weight: 400;
}

.vxs-eps__ranges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.vxs-eps__range {
  height: 36px;
  padding: 0 16px;
  border-radius: var(--vxl-btn-radius, 999px);
  border: 1px solid var(--vxl-line-strong, rgba(255, 255, 255, 0.26));
  background: transparent;
  color: var(--vxl-ink, #fff);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.vxs-eps__range.is-active {
  background: var(--vxl-cta-bg, #fff);
  border-color: var(--vxl-cta-bg, #fff);
  color: var(--vxl-cta-ink, #000);
}

.vxs-eps__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 20px 10px;
}

.vxs-eps--aside .vxs-eps__grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.vxs-eps--sheet .vxs-eps__grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.vxs-eps--aside .vxs-eps__title,
.vxs-eps--sheet .vxs-eps__title {
  font-size: 18px;
}

.vxs-eps--aside .vxs-eps__range,
.vxs-eps--sheet .vxs-eps__range {
  height: 32px;
  padding: 0 12px;
  font-size: 12px;
}

.vxs-eps__tile {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  border-radius: var(--vxl-card-radius, 6px);
  overflow: hidden;
  background: var(--vxl-surface-2, rgba(255, 255, 255, 0.08));
  color: var(--vxl-ink, #fff);
  text-decoration: none;
  transition: transform var(--vxl-dur-2, 0.25s) var(--vxl-ease, ease);
}

.vxs-eps--aside .vxs-eps__tile,
.vxs-eps--sheet .vxs-eps__tile {
  aspect-ratio: 9 / 16;
  border-radius: var(--vxl-radius-sm, 4px);
}

.vxs-eps__tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--vxl-dur-2, 0.25s) var(--vxl-ease, ease), opacity var(--vxl-dur-2, 0.25s) var(--vxl-ease, ease);
}

@media (hover: hover) {
  .vxs-eps__tile:hover img {
    transform: scale(1.05);
  }
}

.vxs-eps__tile.is-watched img {
  opacity: 0.5;
}

.vxs-eps__tile.is-locked img {
  opacity: 0.75;
}

.vxs-eps__tile.is-current::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--vxl-accent, #e50914);
  border-radius: inherit;
  background: var(--vxl-scrim-weak, rgba(0, 0, 0, 0.35));
  pointer-events: none;
}

.vxs-eps__playing {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vxl-accent, #e50914);
}

.vxs-eps__num {
  position: absolute;
  left: 6px;
  bottom: 6px;
  z-index: 2;
  min-width: 22px;
  padding: 1px 6px;
  border-radius: var(--vxl-radius-sm, 4px);
  background: var(--vxl-scrim-strong, rgba(0, 0, 0, 0.86));
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

.vxs-eps__flag {
  position: absolute;
  left: 6px;
  top: 6px;
  z-index: 2;
  padding: 2px 7px;
  border-radius: var(--vxl-radius-sm, 4px);
  background: var(--vxl-scrim-strong, rgba(0, 0, 0, 0.86));
  font-size: 11px;
  font-weight: 500;
}

.vxs-eps__flag--accent {
  background: var(--vxl-accent, #e50914);
  color: var(--vxl-on-accent, #fff);
  font-weight: 600;
}

.vxs-eps__lock {
  position: absolute;
  right: 6px;
  top: 6px;
  z-index: 2;
  width: 24px;
  height: 24px;
  border-radius: 12px;
  background: var(--vxl-scrim-strong, rgba(0, 0, 0, 0.86));
  display: flex;
  align-items: center;
  justify-content: center;
}

.vxs-eps__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  height: 4px;
  background: var(--vxl-track, rgba(255, 255, 255, 0.25));
}

.vxs-eps__bar > span {
  display: block;
  height: 100%;
  background: var(--vxl-accent, #e50914);
}

.vxs-eps__tile--skeleton {
  background: var(--vxl-surface-1, rgba(255, 255, 255, 0.04));
}

/* the series page's tiles: a length badge on the art, the name under it */
.vxs-eps__dur {
  position: absolute;
  right: 6px;
  bottom: 10px;
  z-index: 2;
  padding: 2px 6px;
  border-radius: var(--vxl-radius-sm, 4px);
  background: var(--vxl-scrim-strong, rgba(0, 0, 0, 0.86));
  font-size: 11px;
  font-weight: 500;
}

.vxs-eps__label {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--vxl-ink, #fff);
}

.vxs-eps__label.is-watched {
  color: var(--vxl-ink-faint, rgba(255, 255, 255, 0.55));
}

.vxs-eps__label.is-current {
  font-weight: 600;
}

.vxs-eps--page .vxs-eps__cell {
  display: flex;
  flex-direction: column;
}

.vxs-eps__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12px;
  color: var(--vxl-ink-faint, rgba(255, 255, 255, 0.55));
}

.vxs-eps__legend > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.vxs-eps__swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--vxl-surface-3, rgba(255, 255, 255, 0.14));
}

.vxs-eps__swatch--accent {
  background: var(--vxl-accent, #e50914);
}

/* ---------- the watch page ----------------------------------------------- */

.vxs-watch {
  color: var(--vxl-ink, #fff);
  padding: 16px var(--vxl-gutter, 4vw) 56px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.vxs-watch__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 520px);
  gap: 32px;
  align-items: start;
}

.vxs-watch__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 88px;
  border-radius: var(--vxl-card-radius, 6px);
  overflow: hidden;
  background: #000;
  isolation: isolate;
}

/* the overlay layer: Previous / Next, the lock, the phone chrome. It sits
   over the player but lets clicks through except on its own controls. */
.vxs-watch__ui {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.vxs-watch__ui > * {
  pointer-events: auto;
}

.vxs-watch__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(40px) brightness(0.35);
  transform: scale(1.2);
  z-index: 0;
}

.vxs-watch__frame {
  position: relative;
  z-index: 1;
  height: min(76vh, 720px);
  min-height: 480px;
  aspect-ratio: 9 / 16;
  max-width: 100%;
  border-radius: var(--vxl-card-radius, 6px);
  overflow: hidden;
  background: #000;
}

/* the site's player, made to fill a 9:16 frame */
.vxs-watch__frame #playerApp,
.vxs-watch__frame #playerApp > .row,
.vxs-watch__frame #playerApp > .row > .col-12,
.vxs-watch__frame #playerApp .player-ratio {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.vxs-watch__frame #playerApp .player-ratio.ratio-16x9 {
  padding-top: 0 !important;
}

.vxs-watch__frame #playerApp .vdx-player,
.vxs-watch__frame #playerApp .vdx-fluid {
  width: 100% !important;
  height: 100% !important;
  background: #000 !important;
}

.vxs-watch__frame #playerApp video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  background: #000;
}

.vxs-watch__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 48px;
  height: 48px;
  border-radius: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--vxl-glass-raised, rgba(109, 109, 110, 0.7));
  color: var(--vxl-ink, #fff);
  text-decoration: none;
  transition: background-color var(--vxl-dur-1, 0.15s) var(--vxl-ease, ease);
}

.vxs-watch__nav:hover {
  background: var(--vxl-surface-3, rgba(255, 255, 255, 0.2));
  color: var(--vxl-ink, #fff);
}

.vxs-watch__nav.is-off {
  opacity: 0.35;
  pointer-events: none;
}

/* the arrows sit beside the frame (the frame is 9:16 of its height) */
.vxs-watch__nav--prev {
  right: calc(50% + max(480px, min(76vh, 720px)) * 0.28125 + 20px);
}

.vxs-watch__nav--next {
  left: calc(50% + max(480px, min(76vh, 720px)) * 0.28125 + 20px);
}

/* a gate the player raised itself (#playerApp.not-player — a plan, a
   region…): its wide card stays hidden and the page draws the 9:16 Shorts
   lock over the stage from its message and links (watch.html s.gate) */
.vxs-watch__frame #playerApp.not-player {
  visibility: hidden;
}

.vxs-watch__top,
.vxs-watch__rail,
.vxs-watch__foot {
  display: none;
}

.vxs-watch__aside {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.vxs-watch__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--vxl-ink-muted, rgba(255, 255, 255, 0.72));
  text-decoration: none;
}

.vxs-watch__back:hover {
  color: var(--vxl-ink, #fff);
}

.vxs-watch__title {
  margin: 0;
  font-size: 32px;
  line-height: 1.15;
  font-weight: 700;
  color: inherit;
}

.vxs-watch__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--vxl-ink-muted, rgba(255, 255, 255, 0.72));
  font-size: 14px;
}

.vxs-watch__meta a {
  color: inherit;
}

.vxs-watch__desc {
  margin: 0;
  color: var(--vxl-ink-muted, rgba(255, 255, 255, 0.72));
  font-size: 15px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vxs-watch__actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vxs-watch__action {
  height: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
}

.vxs-watch__pager {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.vxs-watch__pager .vxs-btn--soft {
  flex: 1 1 140px;
}

.vxs-watch__pager .vxs-btn--cta {
  flex: 2 1 200px;
}

.vxs-watch__eps {
  padding: 18px;
  border-radius: var(--vxl-card-radius, 6px);
  background: var(--vxl-surface-1, rgba(255, 255, 255, 0.04));
}

.vxs-watch__moreTitle {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 700;
  color: inherit;
}

.vxs-watch__moreRow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px;
  border-radius: var(--vxl-card-radius, 6px);
  color: var(--vxl-ink, #fff);
  text-decoration: none;
}

.vxs-watch__moreRow:hover {
  background: var(--vxl-surface-2, rgba(255, 255, 255, 0.08));
  color: var(--vxl-ink, #fff);
}

.vxs-watch__moreRow img {
  flex: none;
  width: 50px;
  height: 89px;
  object-fit: cover;
  border-radius: var(--vxl-radius-sm, 4px);
  background: var(--vxl-surface-2, rgba(255, 255, 255, 0.08));
}

.vxs-watch__moreText {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.vxs-watch__moreName {
  font-weight: 600;
}

.vxs-watch__moreSub {
  font-size: 12px;
  color: var(--vxl-ink-faint, rgba(255, 255, 255, 0.55));
}

/* the lock on the stage: the same frame the player would fill */
.vxs-lock {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: min(76vh, 720px);
  min-height: 480px;
  aspect-ratio: 9 / 16;
  max-width: 100%;
  border-radius: var(--vxl-card-radius, 6px);
  overflow: hidden;
  background: #000;
}

.vxs-lock__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(14px) brightness(0.6);
  transform: scale(1.1);
}

.vxs-lock__body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 28px;
  text-align: center;
  background: var(--vxl-scrim, rgba(0, 0, 0, 0.62));
}

.vxs-lock__icon {
  width: 56px;
  height: 56px;
  border-radius: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--vxl-glass-raised, rgba(109, 109, 110, 0.7));
}

.vxs-lock__title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.vxs-lock__text {
  margin: 0;
  max-width: 30ch;
  font-size: 14px;
  color: var(--vxl-ink-muted, rgba(255, 255, 255, 0.72));
}

.vxs-lock__balance,
.vxs-lock__error {
  margin: 0;
  font-size: 13px;
  color: var(--vxl-ink-muted, rgba(255, 255, 255, 0.72));
}

.vxs-lock__error {
  color: var(--vxl-danger, #f87171);
}

/* the phone's episode sheet: mobile-app.css shows .vxm-sheet on .is-open */
.vxs-sheet.is-open {
  z-index: 1050;
}

/* ---------- phones ------------------------------------------------------- */

@media (max-width: 991.98px) {
  .vxs-series__inner {
    padding: calc(var(--vxm-header-h, 60px) + 16px) 16px 28px;
    gap: 16px;
  }

  .vxs-series__row {
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
  }

  .vxs-series__poster {
    flex: none;
    width: min(56vw, 220px);
    min-width: 0;
    border-radius: var(--vxm-hero-radius, 16px);
  }

  .vxs-series__copy {
    flex: none;
    width: 100%;
    align-items: center;
  }

  .vxs-series__title {
    font-size: 26px;
  }

  .vxs-eps__title {
    font-size: 20px;
  }

  .vxs-chips--inline,
  .vxs-series__actions,
  .vxs-series__meta,
  .vxs-series__stats {
    justify-content: center;
  }

  .vxs-series__progress {
    width: 100%;
    max-width: none;
  }

  .vxs-series__body {
    gap: 32px;
  }

  .vxs-eps__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 8px;
  }

  .vxs-page {
    padding: 20px 16px 40px;
  }

  .vxs-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 -16px;
    padding: 0 16px;
  }

  .vxs-chips::-webkit-scrollbar {
    display: none;
  }

  .vxs-chips--inline {
    margin: 2px 0;
    padding: 0;
    flex-wrap: wrap;
  }

  /* the watch page is the screen */
  .vxs-watchpage header,
  .vxs-watchpage #header,
  .vxs-watchpage footer,
  .vxs-watchpage #footer,
  .vxs-watch__crumb,
  .vxs-watch__aside,
  .vxs-watch__nav {
    display: none !important;
  }

  .vxs-watch {
    padding: 0;
    gap: 0;
  }

  .vxs-watch__layout {
    display: block;
  }

  .vxs-watch__stage {
    position: fixed;
    inset: 0;
    z-index: 1040;
    padding: 0;
    gap: 0;
    border-radius: 0;
    display: block;
  }

  .vxs-watch__frame {
    position: absolute;
    inset: 0;
    height: auto;
    min-height: 0;
    aspect-ratio: auto;
    border-radius: 0;
  }

  .vxs-watch__top {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 28px 6px;
    background: linear-gradient(to bottom, var(--vxl-scrim-strong, rgba(0, 0, 0, 0.75)), transparent);
    pointer-events: none;
  }

  .vxs-watch__top > * {
    pointer-events: auto;
  }

  .vxs-watch__topBtn {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--vxl-ink, #fff);
  }

  .vxs-watch__topText {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
  }

  .vxs-watch__topTitle {
    font-weight: 600;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .vxs-watch__topSub {
    font-size: 12px;
    color: var(--vxl-ink-muted, rgba(255, 255, 255, 0.72));
  }

  .vxs-watch__rail {
    position: absolute;
    right: 10px;
    bottom: 200px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .vxs-watch__railItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 52px;
    font-size: 11px;
    font-weight: 500;
  }

  .vxs-watch__railItem .boxBtn {
    width: 44px;
    height: 44px;
    background: var(--vxl-glass-raised, rgba(109, 109, 110, 0.7));
    border: 0;
  }

  .vxs-watch__foot {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 48px 16px calc(22px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, var(--vxl-scrim-strong, rgba(0, 0, 0, 0.85)), transparent);
    pointer-events: none;
  }

  .vxs-watch__foot > * {
    pointer-events: auto;
  }

  .vxs-watch__footDesc {
    margin: 0;
    padding-right: 60px;
    font-size: 14px;
    color: var(--vxl-ink-muted, rgba(255, 255, 255, 0.72));
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .vxs-watch__footRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .vxs-watch__footBtn {
    width: 44px;
    height: 44px;
    border-radius: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--vxl-glass-raised, rgba(109, 109, 110, 0.7));
    color: var(--vxl-ink, #fff);
  }

  .vxs-watch__footBtn.is-off {
    opacity: 0.4;
  }

  /* the board's Next pill: 44 tall, 14/600, icon after the words */
  .vxs-watch__footNext {
    height: 44px;
    padding: 0 18px;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
  }

  .vxs-watch__topLogo {
    height: 20px;
    width: auto;
    max-width: 96px;
    flex: none;
    object-fit: contain;
  }

  /* the lock, phone: the whole screen */
  .vxs-lock {
    inset: 0;
    top: 0;
    left: 0;
    transform: none;
    height: auto;
    min-height: 0;
    aspect-ratio: auto;
    border-radius: 0;
  }

  .vxs-lock__body {
    padding: 28px 24px 120px;
  }

  /* the episode sheet */
  .vxs-sheet .vxm-sheet__panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: 72vh;
  }

  .vxs-sheet__grip {
    align-self: center;
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--vxl-line-strong, rgba(255, 255, 255, 0.26));
  }

  .vxs-sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .vxs-sheet__title {
    display: flex;
    flex-direction: column;
    font-weight: 700;
    font-size: 18px;
  }

  .vxs-sheet__title small {
    font-size: 12px;
    font-weight: 400;
    color: var(--vxl-ink-faint, rgba(255, 255, 255, 0.55));
  }

  .vxs-sheet__body {
    overflow-y: auto;
    min-height: 0;
  }

  html.vxs-sheet-open,
  html.vxs-sheet-open body {
    overflow: hidden;
  }
}

/* ---------- the watch page's wrapper -------------------------------------
   #wrapper is overflow:hidden with the footer absolute at its foot — the
   ordinary watch page pads for that with footerfixedBottom(). This page
   is taller than a screen (the episode grid), so it flows: the wrapper
   grows with its content and the footer follows it. */
#wrapper.vxs-watchpage {
  height: auto;
  min-height: 100vh;
  overflow: visible;
  padding-bottom: 0 !important;
}

#wrapper.vxs-watchpage #footer,
#wrapper.vxs-watchpage .footerHolder {
  position: static;
}

/* an episode tile with no art of its own: the series poster, dimmed, so a
   grid never shows a broken image */
.vxs-eps__tile img.is-fallback {
  opacity: 0.45;
}

.vxs-eps__tile.is-noart {
  background: var(--vxl-surface-3, rgba(255, 255, 255, 0.14));
}

/* ---------- phones: the player stays upright ----------------------------
   mobile-app.css turns #playerApp on its side on a portrait phone (a fixed,
   rotated 100dvh × 100dvw box) so a 16:9 film fills the screen. A short is
   9:16 — the screen's own shape — so on this page the player fills the stage
   as it is, no rotation. Same media query, more specific, both !important. */
@media (orientation: portrait) and (max-width: 991.98px) {
  .watchVideoPage.vxs-watchpage #playerApp,
  .watchVideoPage.vxs-watchpage .player {
    position: absolute !important;
    inset: 0 !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    z-index: 1;
  }

}

/* ---------- phones: the page's foot and rail sit above the bar ------------ */
@media (max-width: 991.98px) {
  /* the foot and its scrim stop above the player's 53px control row,
     so the row is never dimmed behind them */
  .vxs-watch__foot {
    bottom: calc(53px + env(safe-area-inset-bottom, 0px));
    padding-bottom: 12px;
  }

  .vxs-watch__rail {
    bottom: 240px;
  }

  /* the cookie button clears the player's mute button on the classic page */
  html:not(.vxs-swipe) body:has(.vxs-watchpage) #cookiepanda-resurface {
    bottom: calc(69px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* the hero's buttons are links: no underline from the global a:hover /
   focus rules, at any width */
.vxs-hero a.vxs-btn,
.vxs-hero a.vxs-btn:hover,
.vxs-hero a.vxs-btn:focus,
.vxs-series a.vxs-btn,
.vxs-series a.vxs-btn:hover,
.vxs-watch a.vxs-btn,
.vxs-watch a.vxs-btn:hover {
  text-decoration: none !important;
}

.vxs-hero a.vxs-btn span,
.vxs-series a.vxs-btn span,
.vxs-watch a.vxs-btn span {
  text-decoration: none !important;
}

/* ==========================================================================
   The Shorts card set (shorts/_row.html) — measured off the design boards:
   Main.dc.html at 1440 and MainMobile.dc.html at 390.
   ========================================================================== */

/* ---------- the rows' rhythm ---------------------------------------------- */

#shorts-page.vxs-rows {
  display: flex;
  flex-direction: column;
  gap: 56px;
  padding-bottom: 64px;
}

.vxs-row {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: var(--vxl-ink, #fff);
}

.vxs-row__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 0 var(--vxl-gutter, 4vw);
}

.vxs-row__title,
.vxs-genres__title {
  margin: 0;
  font-size: 22.4px;
  font-weight: 700;
  line-height: 1.3;
  color: inherit;
}

body[data-lo-rail-title-style="bold"] .vxs-row__title,
body[data-lo-rail-title-style="bold"] .vxs-genres__title {
  font-size: var(--vxl-rail-title-size, 22.4px);
}

.vxs-row__all {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 400;
  color: var(--vxl-ink, #fff);
  text-decoration: none;
}

.vxs-row__all:hover,
.vxs-row__all:focus-visible {
  color: var(--vxl-accent, #e50914);
}

/* The scroller bleeds to both page edges and carries the gutter as its own
   padding, so the first card sits on the page's left edge and the row runs
   off the right one. The extra top and bottom padding (pulled back with
   negative margins) is the room the quick view opens into; it lets pointer
   events through so it never blocks the row underneath. */
.vxs-row__scroller {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  padding: 18px var(--vxl-gutter, 4vw) 24px;
  margin: -18px 0 -24px;
  pointer-events: none;
}

.vxs-row__scroller::-webkit-scrollbar {
  display: none;
}

.vxs-row__scroller > * {
  pointer-events: auto;
}

/* Room under a shelf for the hover panel: the scroller clips (it scrolls
   sideways, so overflow-y cannot stay visible). The panel reaches ~159px
   past the poster with a one-line title, ~180px with a two-line one, plus
   its 24px/60px shadow — 240px holds all of it. Invisible and click-through
   (pointer-events above), and the negative margin keeps the row's spacing. */
.vxs-row--list .vxs-row__scroller {
  padding-bottom: 240px;
  margin-bottom: -240px;
}

.vxs-row--continue .vxs-row__scroller,
.vxs-row--top10 .vxs-row__scroller {
  gap: 10px;
}

.vxs-row__item {
  flex: none;
}

/* --vxs-tile-across shelf cards fill the content width (20px gaps), the next
   one peeks — six on Medium (shorts_tile_size) */
.vxs-row__item--card {
  width: calc((100% - (var(--vxs-tile-across) - 1) * 20px) / var(--vxs-tile-across));
  min-width: var(--vxs-tile-min);
}

/* ---------- arrows: a pointer's way along a row --------------------------- */

.vxs-row__arrow {
  position: absolute;
  top: 50%;
  z-index: 7;
  width: 44px;
  height: 44px;
  border-radius: 22px;
  border: 1px solid var(--vxl-line-strong, rgba(255, 255, 255, 0.26));
  background: var(--vxl-glass, rgba(20, 20, 20, 0.82));
  color: var(--vxl-ink, #fff);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--vxl-dur-1, 0.15s) var(--vxl-ease, ease), background-color var(--vxl-dur-1, 0.15s) var(--vxl-ease, ease);
}

.vxs-row__arrow--prev { inset-inline-start: 8px; }
.vxs-row__arrow--next { inset-inline-end: 8px; }

@media (hover: hover) and (min-width: 992px) {
  .vxs-row__arrow { display: inline-flex; }
  .vxs-row.is-hover .vxs-row__arrow { opacity: 1; }
  .vxs-row__arrow:hover { background: var(--vxl-surface-3, rgba(255, 255, 255, 0.14)); }
}

.vxs-row__arrow:focus-visible {
  opacity: 1;
  outline: 2px solid var(--vxl-focus-ring, #e50914);
  outline-offset: 2px;
}

body.rtl .vxs-row__arrow svg { transform: scaleX(-1); }

/* ---------- the shelf card ------------------------------------------------ */

.vxs-card {
  position: relative;
}

.vxs-card__link {
  display: flex;
  flex-direction: column;
  color: var(--vxl-ink, #fff);
  text-decoration: none;
}

.vxs-card__link:hover,
.vxs-card__link:focus-visible {
  color: var(--vxl-ink, #fff);
  text-decoration: none;
}

.vxs-card__art {
  position: relative;
  display: block;
  aspect-ratio: var(--vxs-tile-ratio);
  border-radius: var(--vxl-card-radius, 6px);
  overflow: hidden;
  background: var(--vxl-surface-2, #181818);
}

.vxs-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--vxl-dur-2, 0.25s) ease;
}

@media (hover: hover) {
  .vxs-card__link:hover .vxs-card__img,
  .vxs-t10:hover .vxs-card__img {
    transform: scale(1.05);
  }
}

.vxs-card__title {
  margin-top: 12px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vxs-card__tags {
  margin-top: 5px;
  font-size: 13px;
  font-weight: 400;
  color: var(--vxl-ink-faint, #9e9e9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vxs-badge {
  position: absolute;
  z-index: 1;
  border-radius: var(--vxl-radius-sm, 4px);
  line-height: 1.5;
  white-space: nowrap;
}

.vxs-badge--new {
  left: 8px;
  top: 8px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: var(--vxl-accent, #e50914);
  color: var(--vxl-on-accent, #fff);
}

.vxs-badge--eps {
  left: 8px;
  bottom: 8px;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 500;
  background: rgba(14, 14, 16, 0.72);
  color: #fff;
}

.vxs-narrow { display: none; }

.vxs-card__link:focus-visible .vxs-card__art,
.vxs-t10:focus-visible .vxs-t10__art,
.vxs-cw:focus-visible {
  outline: 2px solid var(--vxl-focus-ring, #e50914);
  outline-offset: 3px;
}

/* ---------- the quick view ---------------------------------------------- */

/* The quick view (.vxs-qv) lives in cards.css since 26.625.0: the site's
   portrait cards draw the same panel under card_hover = Info panel. */

/* ---------- Top 10 -------------------------------------------------------- */

.vxs-t10 {
  width: 250px;
  display: flex;
  align-items: flex-end;
  color: var(--vxl-ink, #fff);
  text-decoration: none;
}

.vxs-t10:hover {
  color: var(--vxl-ink, #fff);
  text-decoration: none;
}

.vxs-t10__n {
  position: relative;
  z-index: 0;
  flex: none;
  width: 78px;
  margin-inline-end: -16px;
  text-align: end;
  font-size: 130px;
  line-height: 0.78;
  font-weight: 700;
  letter-spacing: -0.06em;
  color: var(--vod-body-bg, #141414);
  -webkit-text-stroke: 2px var(--vxl-line-strong, #5a5a5a);
}

.vxs-t10__art {
  position: relative;
  display: block;
  flex: none;
  width: 172px;
  aspect-ratio: 9 / 16;
  border-radius: var(--vxl-card-radius, 6px);
  overflow: hidden;
  background: var(--vxl-surface-2, #181818);
}

.vxs-t10__title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 28px 10px 10px;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.85));
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
}

/* ---------- Continue Watching --------------------------------------------- */

.vxs-cw {
  width: 320px;
  display: flex;
  gap: 14px;
  padding: 10px;
  border-radius: var(--vxl-card-radius, 6px);
  background: var(--vxl-surface-2, #181818);
  color: var(--vxl-ink, #fff);
  text-decoration: none;
  box-sizing: border-box;
  transition: background-color var(--vxl-dur-1, 0.15s) var(--vxl-ease, ease);
}

.vxs-cw:hover {
  background: var(--vxl-surface-3, #222);
  color: var(--vxl-ink, #fff);
  text-decoration: none;
}

.vxs-cw__art {
  position: relative;
  flex: none;
  width: 64px;
  height: 114px;
  border-radius: var(--vxl-radius-sm, 4px);
  overflow: hidden;
  background: var(--vxl-surface-3, #272727);
}

.vxs-cw__art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vxs-cw__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

.vxs-cw__title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vxs-cw__ep {
  font-size: 13px;
  color: var(--vxl-ink-faint, #9e9e9e);
}

.vxs-cw .vxs-bar {
  background: var(--vxl-track, #333);
}

.vxs-cw__play {
  align-self: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 19px;
  background: var(--vxl-cta-bg, #fff);
  color: var(--vxl-cta-ink, #000);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- loading and failure ------------------------------------------- */

.vxs-skel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: calc((100% - (var(--vxs-tile-across) - 1) * 20px) / var(--vxs-tile-across));
  min-width: var(--vxs-tile-min);
}

.vxs-skel__art {
  display: block;
  aspect-ratio: var(--vxs-tile-ratio);
  border-radius: var(--vxl-card-radius, 6px);
  background: var(--vxl-surface-2, #272727);
}

.vxs-skel__line {
  display: block;
  height: 12px;
  width: 80%;
  border-radius: 4px;
  background: var(--vxl-surface-2, #272727);
}

.vxs-skel__line--short { width: 50%; }

.vxs-row__error {
  margin: 0 var(--vxl-gutter, 4vw);
  padding: 24px;
  min-height: 200px;
  border-radius: var(--vxl-card-radius, 6px);
  background: var(--vxl-surface-1, #181818);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  color: var(--vxl-ink-faint, #9e9e9e);
}

.vxs-row__errorTitle {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--vxl-ink, #fff);
}

.vxs-row__errorText {
  margin: 0;
  max-width: 32ch;
  font-size: 14px;
}

/* ---------- phones: MainMobile.dc.html ------------------------------------ */

@media (max-width: 991.98px) {
  #shorts-page.vxs-rows {
    gap: 30px;
    padding-bottom: 40px;
  }

  .vxs-genres {
    padding-top: 20px;
    margin-bottom: 30px;
  }

  .vxs-row {
    gap: 12px;
  }

  .vxs-row__head {
    justify-content: space-between;
    align-items: center;
    padding: 0 6px 0 16px;
  }

  .vxs-row--continue .vxs-row__head {
    padding-inline-end: 16px;
  }

  .vxs-row__title,
  .vxs-genres__title {
    font-size: 20px;
  }

  .vxs-row__all {
    width: 44px;
    height: 44px;
    justify-content: center;
    margin: -12px 0;
  }

  .vxs-row__all span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .vxs-row__all svg {
    width: 20px;
    height: 20px;
  }

  .vxs-row__scroller,
  .vxs-row--list .vxs-row__scroller {
    gap: 10px;
    padding: 0 16px;
    margin: 0;
    pointer-events: auto;
  }

  .vxs-row--top10 .vxs-row__scroller { gap: 6px; }

  .vxs-row__item--card,
  .vxs-skel {
    width: var(--vxs-tile-phone);
    min-width: 0;
  }

  .vxs-card__link { gap: 6px; }

  .vxs-card__title {
    margin-top: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
    -webkit-line-clamp: 1;
  }

  .vxs-card__tags {
    margin-top: -4px;
    font-size: 12px;
  }

  .vxs-badge--new {
    left: 6px;
    top: 6px;
    padding: 2px 6px;
    font-size: 10px;
  }

  .vxs-badge--eps {
    left: 6px;
    bottom: 6px;
    padding: 2px 6px;
    font-size: 11px;
  }

  .vxs-wide { display: none; }
  .vxs-narrow { display: inline; }

  .vxs-qv { display: none; }

  .vxs-t10 { width: 170px; }

  .vxs-t10__n {
    width: 56px;
    margin-inline-end: -12px;
    font-size: 92px;
  }

  .vxs-t10__art { width: 120px; }

  .vxs-t10__title { display: none; }

  .vxs-cw {
    width: 272px;
    gap: 12px;
    padding: 8px;
  }

  .vxs-cw__art {
    width: 56px;
    height: 100px;
  }

  .vxs-cw__title { font-size: 14px; }
  .vxs-cw__ep { font-size: 12px; }

  .vxs-cw__play {
    width: 36px;
    height: 36px;
  }

  .vxs-row__error { margin: 0 16px; }
}

.vxs-skel__line--title {
  width: 180px;
  height: 22px;
}

/* ---------- empty pages and walls (Browse board, States board) ------------ */

.vxs-empty {
  border-radius: var(--vxl-card-radius, 6px);
  background: var(--vxl-surface-1, #181818);
  padding: 64px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  color: var(--vxl-ink-faint, #9e9e9e);
}

.vxs-empty__title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--vxl-ink, #fff);
}

.vxs-empty__text {
  margin: 0;
  max-width: 40ch;
  font-size: 14px;
}

.vxs-empty .vxs-btn {
  margin-top: 8px;
}

@media (max-width: 991.98px) {
  .vxs-empty {
    padding: 48px 20px;
    gap: 10px;
  }

  .vxs-empty__title {
    font-size: 17px;
  }
}

/* a Shorts row on the site's home sits in the home's own rail column: its
   gutter is the home's, and it keeps the home's rail spacing */
#items-list .vxs-row {
  margin: 8px 0 32px;
}

/* ---------- browse on a phone --------------------------------------------- */
@media (max-width: 991.98px) {
  .vxs-page.vxs-browse {
    padding: 14px 0 40px;
    gap: 18px;
  }

  .vxs-browse__top {
    gap: 18px;
  }

  .vxs-browse__head,
  .vxs-browse__wall {
    padding: 0 16px;
  }

  .vxs-browse__wall {
    gap: 14px;
  }

  .vxs-browse__title {
    font-size: 30px;
  }

  .vxs-browse__pick {
    display: none;
  }

  .vxs-browse__chips {
    margin: 0;
    padding: 0 16px;
  }

  .vxs-browse__chips .vxs-chip {
    height: 36px;
    padding: 0 16px;
    font-size: 13px;
  }

  .vxs-browse__sub {
    gap: 10px;
  }

  .vxs-browse__subTitle {
    font-size: 20px;
  }

  .vxs-browse__count {
    font-size: 13px;
  }

  .vxs-grid {
    grid-template-columns: repeat(var(--vxs-wall-cols-phone), minmax(0, 1fr));
    gap: 18px 8px;
  }

  .vxs-grid .vxs-card__link {
    gap: 5px;
  }

  .vxs-grid .vxs-card__title {
    font-size: 13px;
    line-height: 1.3;
    -webkit-line-clamp: 2;
  }

  .vxs-grid .vxs-card__tags {
    margin-top: 0;
    font-size: 11px;
  }

  .vxs-grid .vxs-badge--eps {
    left: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 10px;
  }

  .vxs-grid .vxs-badge--new {
    left: 5px;
    top: 5px;
  }

  .vxs-pager {
    display: none;
  }

  .vxs-more {
    display: block;
    margin-top: 8px;
    height: 46px;
    border-radius: var(--vxl-btn-radius, 999px);
    border: 1px solid var(--vxl-ink, #fff);
    background: transparent;
    color: var(--vxl-ink, #fff);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
  }

  .vxs-more:disabled {
    opacity: 0.6;
  }
}

/* a row inside a padded page (the series page's You May Also Like): the
   page already carries the gutter, so the row does not add its own */
.vxs-page .vxs-row__head {
  padding-left: 0;
  padding-right: 0;
}

.vxs-page .vxs-row__scroller {
  padding-left: 0;
  padding-right: 0;
}

@media (max-width: 991.98px) {
  .vxs-page .vxs-row__head {
    padding-right: 0;
  }
}

@media (max-width: 991.98px) {
  .vxs-genres {
    padding-right: 6px;
  }

  .vxs-genres__head {
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
  }

  .vxs-genres .vxs-chips {
    margin-right: -6px;
  }
}

/* ==========================================================================
   Plans & Coins — shorts/store.html, the "Store" / "StoreMobile" boards.
   The board's greys are mixes of the ink into the page colour at the
   board's own ratios (#181818, #1E1E1E, #272727, #2A2A2A on #141414), so a
   light palette still comes out as a lighter panel on its page. Coins keep
   their gold; the picked option, the radio and the ticks are the accent;
   the Buy button is the site CTA (mono), never the accent.
   ========================================================================== */

.vxs-store {
  --vxs-st-bg: var(--vod-body-bg, #141414);
  --vxs-st-ink: var(--vod-white-color, #fff);
  --vxs-st-card: color-mix(in srgb, var(--vxs-st-ink) 1.7%, var(--vxs-st-bg));
  --vxs-st-well: color-mix(in srgb, var(--vxs-st-ink) 4.3%, var(--vxs-st-bg));
  --vxs-st-chip: color-mix(in srgb, var(--vxs-st-ink) 8%, var(--vxs-st-bg));
  --vxs-st-line: color-mix(in srgb, var(--vxs-st-ink) 9.4%, var(--vxs-st-bg));
  --vxs-st-hover: color-mix(in srgb, var(--vxs-st-ink) 40%, transparent);
  --vxs-st-radio: color-mix(in srgb, var(--vxs-st-ink) 29.8%, var(--vxs-st-bg));
  --vxs-st-soft: color-mix(in srgb, var(--vxs-st-ink) 89.4%, var(--vxs-st-bg));
  --vxs-st-muted: color-mix(in srgb, var(--vxs-st-ink) 78.3%, var(--vxs-st-bg));
  --vxs-st-faint: color-mix(in srgb, var(--vxs-st-ink) 58.7%, var(--vxs-st-bg));
  --vxs-st-accent: var(--vxl-accent, #e50914);
  --vxs-st-coin: #f5b301;
  --vxs-st-coin-ink: #1a1100;
  color: var(--vxs-st-ink);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.5;
}

/* the page starts the header's height down, as the board does */
body .contentHolder:has(#vxs-store) {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* #wrapper is overflow:hidden, which makes it the order summary's scroll
   container — one that never scrolls, so the summary would not stick.
   clip cuts the same overflow without being a scroll container. */
body:has(#vxs-store) #wrapper {
  overflow: clip;
}

#vxs-store-coins {
  scroll-margin-top: calc(var(--vxl-header-h, 68px) + 20px);
}

.vxs-store__main {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: calc(var(--vxl-header-h, 68px) + 20px) var(--vxl-gutter, 4vw) 72px;
}

.vxs-store button {
  font: inherit;
}

/* ---------- head ------------------------------------------------------- */

.vxs-store__head {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vxs-store__crumb {
  color: var(--vxs-st-faint);
}

.vxs-store__crumb a {
  color: var(--vxs-st-muted);
}

.vxs-store__crumb [aria-current] {
  color: var(--vxs-st-ink);
}

.vxs-store .vxs-store__title {
  margin: 0;
  font-size: 40.96px;
  line-height: 1.1;
  font-weight: 700;
  color: inherit;
}

.vxs-store__lede {
  margin: 0;
  max-width: 60ch;
  font-size: 15px;
  color: var(--vxs-st-muted);
}

.vxs-store__layout {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: flex-start;
}

.vxs-store__col {
  flex: 999 1 640px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* ---------- coins + plan ------------------------------------------------- */

.vxs-store__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.vxs-store__stat {
  flex: 1 1 200px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 10px;
  background: var(--vxs-st-card);
}

.vxs-store__statIcon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.vxs-store__statIcon--plan {
  background: color-mix(in srgb, var(--vxs-st-ink) 8%, transparent);
}

.vxs-store__statText {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.vxs-store__statLabel {
  font-size: 13px;
  color: var(--vxs-st-faint);
}

.vxs-store__statValue {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}

.vxs-store__statPlan {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}

.vxs-store__history {
  font-size: 13px;
  font-weight: 400;
  color: var(--vxs-st-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.vxs-store__history:hover {
  color: var(--vxs-st-ink);
}

.vxs-store__planRow {
  display: none;
}

/* ---------- sections ----------------------------------------------------- */

.vxs-store__sec {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.vxs-store__secHead {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vxs-store .vxs-store__h2 {
  margin: 0;
  font-size: 22.4px;
  font-weight: 700;
  line-height: 1.5;
  color: inherit;
}

.vxs-store__secSub {
  margin: 0;
  font-size: 14px;
  color: var(--vxs-st-faint);
}

.vxs-store__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.vxs-store__tabs,
.vxs-store__includes {
  display: none;
}

/* ---------- an option: a pass or a pack ---------------------------------- */

.vxs-store__opt {
  position: relative;
  text-align: start;
  border: 2px solid var(--vxs-st-line);
  border-radius: 10px;
  background: var(--vxs-st-card);
  color: var(--vxs-st-ink);
  cursor: pointer;
  transition: border-color 0.16s ease-out, background-color 0.16s ease-out;
}

.vxs-store__opt:hover {
  border-color: var(--vxs-st-hover);
}

.vxs-store__opt.is-on {
  border-color: var(--vxs-st-accent);
  background: color-mix(in srgb, var(--vxs-st-accent) 8%, var(--vxs-st-bg));
}

.vxs-store__opt:focus-visible,
.vxs-store__method:focus-visible,
.vxs-store__tab:focus-visible,
.vxs-store__q summary:focus-visible {
  outline: 2px solid var(--vxl-focus-ring, var(--vxs-st-accent));
  outline-offset: 3px;
}

.vxs-store__plan {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 20px 20px;
}

.vxs-store__badge {
  position: absolute;
  top: -11px;
  inset-inline-start: 18px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.vxs-store__badge--accent {
  background: var(--vxs-st-accent);
  color: var(--vxl-on-accent, #fff);
}

.vxs-store__badge--muted {
  background: var(--vxs-st-chip);
  color: var(--vxs-st-ink);
}

.vxs-store__planTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.vxs-store__planTop .vxs-store__radio {
  order: 2;
}

.vxs-store__planName {
  font-size: 16px;
  font-weight: 600;
}

.vxs-store__radio {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--vxs-st-radio);
}

.vxs-store__radio span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.is-on .vxs-store__radio {
  border-color: var(--vxs-st-accent);
}

.is-on .vxs-store__radio span {
  background: var(--vxs-st-accent);
}

.vxs-store__planMid {
  display: none;
}

.vxs-store__planPrice {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}

.vxs-store__price {
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
}

.vxs-store__unit {
  font-size: 14px;
  color: var(--vxs-st-muted);
}

.vxs-store__planNote {
  min-height: 20px;
  font-size: 13px;
  color: var(--vxs-st-faint);
}

.vxs-store__rule {
  display: block;
  height: 1px;
  background: var(--vxs-st-line);
}

.vxs-store__feats {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  font-weight: 400;
  color: var(--vxs-st-soft);
}

.vxs-store__feat {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vxs-store__feat > span {
  display: flex;
  flex: none;
  color: var(--vxs-st-accent);
}

/* the packs */
.vxs-store__pack {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 18px 18px 16px;
}

.vxs-store__bonusTag {
  position: absolute;
  top: -10px;
  inset-inline-end: 14px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--vxs-st-coin);
  color: var(--vxs-st-coin-ink);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
}

.vxs-store__stack {
  position: relative;
  flex: none;
  width: 52px;
  height: 44px;
}

.vxs-store__stackBack,
.vxs-store__stackFront {
  position: absolute;
  display: block;
}

.vxs-store__stackBack {
  inset-inline-start: 0;
  top: 4px;
  width: 36px;
  height: 36px;
}

.vxs-store__stackFront {
  inset-inline-start: 14px;
  top: 0;
  width: 38px;
  height: 38px;
}

.vxs-store__stackBack svg,
.vxs-store__stackFront svg,
.vxs-store__packCoin svg,
.vxs-store__statIcon--coin svg,
.vxs-store__itemCoin svg,
.vxs-store__methodCoin svg {
  display: block;
}

.vxs-store__packText {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.vxs-store__packCoins {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

.vxs-store__packBonus {
  font-size: 13px;
  font-weight: 500;
  color: var(--vxs-st-faint);
}

.vxs-store__packBonus.is-bonus {
  color: var(--vxs-st-coin);
}

.vxs-store__packPrice {
  flex: none;
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--vxs-st-chip);
  color: var(--vxs-st-ink);
  font-size: 14px;
  font-weight: 600;
  transition: background-color 0.16s ease-out;
}

.vxs-store__pack.is-on .vxs-store__packPrice {
  background: var(--vxs-st-accent);
  color: var(--vxl-on-accent, #fff);
}

.vxs-store__skel {
  display: block;
  border-radius: 10px;
  background: var(--vxs-st-card);
  animation: vxs-store-pulse 1.4s ease-in-out infinite;
}

.vxs-store__skel--plan {
  height: 236px;
}

.vxs-store__skel--pack {
  height: 84px;
}

@keyframes vxs-store-pulse {
  50% { opacity: 0.55; }
}

/* ---------- questions ---------------------------------------------------- */

.vxs-store__faqSec {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vxs-store__faq {
  padding: 4px 20px;
  border-radius: 10px;
  background: var(--vxs-st-card);
}

.vxs-store__q {
  border-bottom: 1px solid var(--vxs-st-line);
}

.vxs-store__q:last-child {
  border-bottom: 0;
}

.vxs-store__q summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  font-size: 15px;
  font-weight: 500;
  list-style: none;
  cursor: pointer;
}

.vxs-store__q summary::-webkit-details-marker {
  display: none;
}

.vxs-store__q p {
  margin: 0 0 16px;
  color: var(--vxs-st-muted);
}

.vxs-store__chev {
  flex: none;
  transition: transform 0.2s ease;
}

.vxs-store__q[open] .vxs-store__chev {
  transform: rotate(180deg);
}

/* ---------- the order summary ------------------------------------------ */

.vxs-store__sum {
  flex: 1 1 340px;
  max-width: 420px;
  position: sticky;
  top: calc(var(--vxl-header-h, 68px) + 20px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
  border-radius: 10px;
  background: var(--vxs-st-card);
}

.vxs-store .vxs-store__sumTitle {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: inherit;
}

.vxs-store__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 8px;
  background: var(--vxs-st-well);
}

.vxs-store__itemIcon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

.vxs-store__itemIcon--plan {
  background: color-mix(in srgb, var(--vxs-st-accent) 15%, transparent);
  color: var(--vxs-st-accent);
}

.vxs-store__itemIcon--pack {
  background: color-mix(in srgb, var(--vxs-st-coin) 14%, transparent);
}

.vxs-store__itemCoin {
  display: block;
  width: 30px;
  height: 30px;
}

.vxs-store__itemText {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.vxs-store__itemTitle {
  font-size: 15px;
  font-weight: 600;
}

.vxs-store__itemSub {
  font-size: 13px;
  color: var(--vxs-st-faint);
}

.vxs-store__payBox,
.vxs-store__pay {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vxs-store__payLabel {
  font-size: 13px;
  font-weight: 500;
  color: var(--vxs-st-muted);
}

.vxs-store__methods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.vxs-store__method {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 48px;
  border-radius: 8px;
  border: 2px solid var(--vxs-st-line);
  background: var(--vxs-st-well);
  color: var(--vxs-st-ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.16s ease-out;
}

.vxs-store__method:hover {
  border-color: var(--vxs-st-hover);
}

.vxs-store__method.is-on {
  border-color: var(--vxs-st-ink);
}

.vxs-store__methodCoin {
  display: block;
  width: 18px;
  height: 18px;
}

.vxs-store__paypal {
  font-style: italic;
  font-weight: 800;
}

.vxs-store__paypal span:first-child {
  color: #3b7bbf;
}

.vxs-store__paypal span:last-child {
  color: #2fa7e0;
}

.vxs-store__none {
  margin: 0;
  font-size: 13px;
  color: var(--vxs-st-faint);
}

.vxs-store__lines {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
}

.vxs-store__line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--vxs-st-muted);
}

.vxs-store__line--total {
  align-items: baseline;
  margin-top: 4px;
  color: var(--vxs-st-ink);
  font-size: 15px;
  font-weight: 600;
}

.vxs-store__total {
  font-size: 26px;
  font-weight: 700;
}

.vxs-btn.vxs-store__cta {
  width: 100%;
  height: 50px;
  gap: 8px;
  font-size: 16px;
}

.vxs-store__cta > span,
.vxs-store__barCta > span {
  display: flex;
}

.vxs-btn.is-off {
  opacity: 0.5;
  cursor: default;
}

.vxs-store__fine {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--vxs-st-faint);
}

.vxs-store__fine a {
  color: var(--vxs-st-muted);
  text-decoration: underline;
}

.vxs-store__bar {
  display: none;
}

/* one copy per device: the boards word a few things differently */
@media (min-width: 992px) {
  .vxs-store .vxs-store__m {
    display: none;
  }
}

/* ---------- phone: the StoreMobile board ------------------------------- */

@media (max-width: 991.98px) {
  .vxs-store {
    line-height: 1.45;
  }

  .vxs-store .vxs-store__d {
    display: none;
  }

  .vxs-store__main {
    gap: 22px;
    padding: calc(var(--vxm-header-h, 68px) + 12px) 16px 28px;
  }

  .vxs-store__head {
    gap: 6px;
  }

  .vxs-store__crumb {
    display: none;
  }

  .vxs-store .vxs-store__title {
    font-size: 28px;
  }

  .vxs-store__lede {
    font-size: 14px;
  }

  .vxs-store__layout {
    display: block;
  }

  .vxs-store__col {
    gap: 22px;
  }

  .vxs-store__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .vxs-store__stat {
    grid-column: 1 / -1;
    gap: 10px;
    padding: 12px 14px;
  }

  .vxs-store__stat--plan {
    display: none;
  }

  .vxs-store__statIcon {
    width: 30px;
    height: 30px;
  }

  .vxs-store__statLabel {
    font-size: 12px;
  }

  .vxs-store__statValue {
    font-size: 18px;
  }

  .vxs-store__planRow {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 44px;
    padding: 0 14px;
    border-radius: 10px;
    background: var(--vxs-st-card);
    color: var(--vxs-st-ink);
    font-size: 14px;
    font-weight: 400;
  }

  .vxs-store__planRow > span:first-child {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .vxs-store__planRow strong {
    font-weight: 600;
  }

  .vxs-store__planRowLink {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--vxs-st-muted);
    white-space: nowrap;
  }

  .vxs-store__tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: var(--vxs-st-well);
  }

  .vxs-store__tab {
    height: 40px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--vxs-st-ink);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
  }

  .vxs-store__tab.is-on {
    background: var(--vxl-cta-bg, #fff);
    color: var(--vxl-cta-ink, #000);
  }

  .vxs-store__sec:not(.is-tab),
  .vxs-store__secHead {
    display: none;
  }

  .vxs-store__sec {
    gap: 12px;
  }

  .vxs-store__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding-top: 6px;
  }

  .vxs-store__grid--packs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 10px;
  }

  .vxs-store__plan {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 16px;
  }

  .vxs-store__badge {
    top: -10px;
    inset-inline-start: 14px;
    padding: 2px 9px;
    font-size: 10px;
  }

  .vxs-store__planTop .vxs-store__radio {
    order: 0;
  }

  .vxs-store__planMid {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
  }

  .vxs-store__planMid .vxs-store__planName {
    font-size: 15px;
  }

  .vxs-store__planMid .vxs-store__planNote {
    min-height: 0;
    font-size: 12px;
  }

  .vxs-store__planPrice {
    flex: none;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 0;
  }

  .vxs-store__price {
    font-size: 20px;
    line-height: 1.1;
  }

  .vxs-store__unit {
    font-size: 11px;
  }

  .vxs-store__includes {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    border-radius: 10px;
    background: var(--vxs-st-card);
    font-size: 13px;
    font-weight: 400;
    color: var(--vxs-st-soft);
  }

  .vxs-store__includesTitle {
    font-size: 13px;
    font-weight: 600;
    color: var(--vxs-st-ink);
  }

  .vxs-store__pack {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 12px 12px;
  }

  .vxs-store__bonusTag {
    top: -9px;
    inset-inline-end: 10px;
    padding: 2px 8px;
    font-size: 10px;
  }

  .vxs-store__packCoin {
    display: block;
    width: 36px;
    height: 36px;
  }

  .vxs-store__packText {
    align-items: center;
    flex: none;
    text-align: center;
  }

  .vxs-store__packCoins {
    font-size: 18px;
    line-height: 1.1;
  }

  .vxs-store__packBonus {
    font-size: 12px;
    line-height: 1.45;
  }

  .vxs-store__packPrice {
    align-self: stretch;
    justify-content: center;
    height: 34px;
    margin-top: 4px;
  }

  .vxs-store .vxs-store__payTitle {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.45;
    color: inherit;
  }

  .vxs-store__faqSec .vxs-store__h2 {
    display: none;
  }

  .vxs-store__faq {
    padding: 2px 16px;
  }

  .vxs-store__q summary {
    box-sizing: border-box;
    min-height: 48px;
    gap: 12px;
    padding: 12px 0;
    font-size: 14px;
  }

  .vxs-store__q p {
    margin: 0 0 14px;
    font-size: 13px;
  }

  .vxs-store__chev {
    width: 16px;
    height: 16px;
  }

  /* checkout: the order bar takes the tab bar's place, as on the board */
  body:has(#vxs-store) .vxm-tabbar {
    display: none;
  }

  /* room for the order bar, which is fixed: #wrapper clips overflow, so a
     sticky bar would never leave the end of the page */
  body:has(#vxs-store) .contentHolder {
    padding-bottom: calc(81px + env(safe-area-inset-bottom, 0px));
  }

  /* Cookie Panda's re-open button is pinned 16px off the corner by an
     inline style; lift it over the bar so it does not sit on the price */
  body:has(#vxs-store) #cookiepanda-resurface {
    bottom: calc(81px + 16px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .vxs-store__q:nth-child(2) {
    border-bottom: 0;
  }

  .vxs-store__bar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px calc(20px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--vxs-st-line);
    background: color-mix(in srgb, var(--vxs-st-bg) 96%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  .vxs-store__barText {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
  }

  .vxs-store__barTitle {
    font-size: 12px;
    color: var(--vxs-st-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .vxs-store__barTotal {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
  }

  .vxs-btn.vxs-store__barCta {
    flex: none;
    height: 48px;
    padding: 0 24px;
    gap: 8px;
    font-size: 15px;
  }
}

/* ==========================================================================
   Row styles (shorts_continue, shorts_top10): the same markup laid out as an
   ordinary poster, sized and shaped by the poster words above.
   ========================================================================== */

/* Continue Watching = poster: the poster, the progress bar under it, then the
   title and "Episode N of M"; the round play button goes */
body[data-lo-shorts-continue="poster"] .vxs-row--continue .vxs-row__scroller {
  gap: 20px;
}

body[data-lo-shorts-continue="poster"] .vxs-cw {
  width: calc((100% - (var(--vxs-tile-across) - 1) * 20px) / var(--vxs-tile-across));
  min-width: var(--vxs-tile-min);
  flex-direction: column;
  gap: 10px;
  padding: 0;
  background: none;
}

body[data-lo-shorts-continue="poster"] .vxs-cw:hover {
  background: none;
}

body[data-lo-shorts-continue="poster"] .vxs-cw__art {
  width: 100%;
  height: auto;
  aspect-ratio: var(--vxs-tile-ratio);
  border-radius: var(--vxl-card-radius, 6px);
}

body[data-lo-shorts-continue="poster"] .vxs-cw__text {
  justify-content: flex-start;
  gap: 4px;
}

body[data-lo-shorts-continue="poster"] .vxs-cw .vxs-bar {
  order: -1;
  margin-bottom: 4px;
}

body[data-lo-shorts-continue="poster"] .vxs-cw__title {
  font-weight: 500;
}

body[data-lo-shorts-continue="poster"] .vxs-cw__play {
  display: none;
}

/* Top 10 = badge: an ordinary poster with its rank on the corner, in the
   accent like the NEW badge */
body[data-lo-shorts-top10="badge"] .vxs-row--top10 .vxs-row__scroller {
  gap: 20px;
}

body[data-lo-shorts-top10="badge"] .vxs-t10 {
  position: relative;
  display: block;
  width: calc((100% - (var(--vxs-tile-across) - 1) * 20px) / var(--vxs-tile-across));
  min-width: var(--vxs-tile-min);
}

body[data-lo-shorts-top10="badge"] .vxs-t10__n {
  position: absolute;
  top: 8px;
  inset-inline-start: 8px;
  z-index: 2;
  width: auto;
  margin: 0;
  padding: 3px 8px;
  border-radius: var(--vxl-radius-sm, 4px);
  background: var(--vxl-accent, #e50914);
  color: var(--vxl-on-accent, #fff);
  -webkit-text-stroke: 0;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-align: center;
}

body[data-lo-shorts-top10="badge"] .vxs-t10__n::before {
  content: "#";
}

body[data-lo-shorts-top10="badge"] .vxs-t10__art {
  width: 100%;
  aspect-ratio: var(--vxs-tile-ratio);
}

@media (max-width: 991.98px) {
  body[data-lo-shorts-continue="poster"] .vxs-row--continue .vxs-row__scroller,
  body[data-lo-shorts-top10="badge"] .vxs-row--top10 .vxs-row__scroller {
    gap: 10px;
  }

  body[data-lo-shorts-continue="poster"] .vxs-cw,
  body[data-lo-shorts-top10="badge"] .vxs-t10 {
    width: var(--vxs-tile-phone);
    min-width: 0;
  }

  body[data-lo-shorts-continue="poster"] .vxs-cw__art {
    width: 100%;
    height: auto;
  }

  body[data-lo-shorts-top10="badge"] .vxs-t10__n {
    top: 6px;
    inset-inline-start: 6px;
    padding: 2px 6px;
    font-size: 11px;
  }

  body[data-lo-shorts-top10="badge"] .vxs-t10__art {
    width: 100%;
  }
}

/* Small posters on a phone are ~84px on the wall: the corner badges shrink
   with them so NEW and the episode count don't cover the artwork */
@media (max-width: 991.98px) {
  body[data-lo-shorts-tile-size="small"] .vxs-card .vxs-badge,
  body[data-lo-shorts-tile-size="small"][data-lo-shorts-top10="badge"] .vxs-t10__n {
    padding: 1px 5px;
    font-size: 10px;
  }

  body[data-lo-shorts-tile-size="small"] .vxs-card .vxs-badge--new,
  body[data-lo-shorts-tile-size="small"][data-lo-shorts-top10="badge"] .vxs-t10__n {
    top: 5px;
    left: 5px;
  }

  body[data-lo-shorts-tile-size="small"] .vxs-card .vxs-badge--eps {
    bottom: 5px;
    left: 5px;
  }
}

/* ==========================================================================
   Top 10 with the quick view (26.627.0). The poster sits in a cell
   (.vxs-t10__cell, a .vxs-card--qv) beside the numeral, and the cell
   carries the same panel as a shelf card, shown under Info panel.
   ========================================================================== */
/* the poster sits OVER its numeral, which tucks 16px behind its edge (as on
   the site's Top 10) — the numeral used to paint across the artwork. The
   hovered cell still rises to 6 (.vxs-card--qv:hover) for its panel. */
.vxs-t10__cell {
  position: relative;
  z-index: 1;
  flex: none;
  width: 172px;
}

.vxs-t10__cell .vxs-t10__art {
  width: 100%;
  color: #fff;
  text-decoration: none;
}

/* Big numbers keeps the 9:16 poster whatever the Poster shape word says */
body:not([data-lo-shorts-top10="badge"]) .vxs-t10__cell {
  --vxs-tile-ratio: 9 / 16;
}

body[data-lo-shorts-top10="badge"] .vxs-t10__cell {
  width: 100%;
}

/* The rank is the site Top 10's numeral, not typed text: the same glyph
   SVGs (styles/default/theme/images/top10/N.svg) as a mask painted with
   --vod-top10-color, the Studio's "Top 10 numbers" colour — see
   new-swiper.html rankStyle() and vodlix.css `span.top10-image-portrait`.
   It used to be a 130px digit outlined in a fixed grey, so the two Top 10
   rows on one site drew different numbers. Sized like the site's portrait
   numeral (about half the poster's height), standing on the poster's foot,
   tucked 16px under its edge; the item takes the glyph's own width, so the
   two-digit "10" gets its room instead of spilling into card 9. */
.vxs-t10 {
  width: auto;
}

body:not([data-lo-shorts-top10="badge"]) .vxs-t10__n {
  width: auto;
  font-size: 0;
  line-height: 0;
  color: transparent;
  -webkit-text-stroke: 0;
}

.vxs-t10__glyph {
  display: block;
  height: 158px;
  background-color: var(--vod-top10-color, var(--vod-body-text-color, #fff));
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.vxs-t10__digit {
  display: none;
}

/* Rank badge keeps its small "#N" chip: the typed digit, no glyph */
body[data-lo-shorts-top10="badge"] .vxs-t10__glyph {
  display: none;
}

body[data-lo-shorts-top10="badge"] .vxs-t10__digit {
  display: inline;
}

/* room under the row for the panel to open into, as the shelves have
   (240px: a two-line title and the shadow were cut off at 170px) */
.vxs-row--top10 .vxs-row__scroller {
  padding-bottom: 240px;
  margin-bottom: -240px;
}

.vxs-t10__art:focus-visible {
  outline: 2px solid var(--vxl-focus-ring, #e50914);
  outline-offset: 3px;
}

/* Lift: the poster lifts, no panel */
body[data-lo-card-hover="lift"] .vxs-t10__art {
  transition: transform var(--vxl-dur-2, 0.25s) var(--vxl-ease, ease),
              box-shadow var(--vxl-dur-2, 0.25s) var(--vxl-ease, ease);
}

@media (hover: hover) {
  body[data-lo-card-hover="lift"] .vxs-t10__art:hover {
    transform: scale(1.04);
    box-shadow: var(--vxl-shadow-3, 0 20px 48px rgba(0, 0, 0, 0.46));
  }
}

@media (max-width: 991.98px) {
  .vxs-t10__cell {
    width: 120px;
  }

  body[data-lo-shorts-top10="badge"] .vxs-t10__cell {
    width: 100%;
  }

  .vxs-row--top10 .vxs-row__scroller {
    padding-bottom: 0;
    margin-bottom: 0;
  }

  /* about half the 120px poster's height, as on a computer */
  .vxs-t10__glyph {
    height: 108px;
  }
}

/* ==========================================================================
   The phone swipe pager — shorts/_pager.html (shorts_watch_phone = swipe)
   Drawn to the native app's Shorts player (vodlix-mobile-flutter-v2,
   ui/shorts/): the app's design px are used as CSS px. Below 992px only —
   _pager.html removes itself on a computer, and html.vxs-swipe is set only
   on a phone. Buttons stay the site CTA; the accent marks state only (an
   action that is on, the playing tile, the selected tab).
   ========================================================================== */

html.vxs-swipe,
html.vxs-swipe body {
  overflow: hidden !important;
  background: #000 !important;
}

/* the page's own layout steps aside; the player moves into the pager */
html.vxs-swipe #wrapper > :not(#vxs-pager),
html.vxs-swipe .vxm-tabbar {
  display: none !important;
}

.vxsp[v-cloak] {
  display: none !important;
}

.vxsp {
  position: fixed;
  inset: 0;
  z-index: 1040;
  overflow: hidden;
  background: #000;
  color: #fff;
  -webkit-tap-highlight-color: transparent;
}

.vxsp button {
  font: inherit;
}

.vxsp-ico {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- the pager: one page per episode, one swipe per page ----------
   The track holds every page, each one screen tall, and moves by a
   transform (_pager.html trackStyle); the scroller only clips it and owns
   the gesture, so the browser never scrolls or zooms it. */
.vxsp__scroller {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  outline: 0;
}

.vxsp__track {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  will-change: transform;
}

.vxsp__page {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: #000;
}

.vxsp__poster:not([src]) {
  display: none;
}

.vxsp__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
}

/* the one player: hidden until the new episode plays, so the poster — not
   the last frame of the one before — is what a swipe lands on */
.vxsp__host {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.15s linear;
}

.vxsp__page.is-ready .vxsp__host {
  opacity: 1;
}

.vxsp .vxsp__host .vxs-watch__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  border-radius: 0;
  background: transparent;
}

/* the app scales the picture to cover the screen (OverflowBox + ClipRect) */
.vxsp .vxs-watch__frame #playerApp video {
  object-fit: cover;
  background: transparent;
}

.vxsp .vxs-watch__frame #playerApp .vdx-player,
.vxsp .vxs-watch__frame #playerApp .vdx-fluid {
  background: transparent !important;
}

/* the pager draws the app's disc itself (userPaused or chrome up), so the
   player's Shorts disc stands down in here; it still serves the computer
   and the classic phone page */
.vxsp .vdx-shorts-disc {
  display: none !important;
}

/* ShortsShade: dark at the top for the bar, clear through the middle,
   dark at the foot for the words */
.vxsp__shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.78) 100%);
}

/* the player's bare Shorts mode (shorts.pageOwnsChrome) draws this same
   shade between the picture and its seek strip, as the app layers it — on
   the page that holds the player, the page's own copy stands down */
.vxsp__page:has(.vdx-shorts-bare) .vxsp__shade {
  display: none;
}

/* the tap layer: over the picture, clear of the seek strip at the foot */
.vxsp__tap {
  position: absolute;
  inset: 0 0 40px 0;
  z-index: 3;
}

/* ---------- the chrome: rail and words, per page ---------- */
.vxsp__chrome {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s linear;
}

/* one chrome state for every page, as the app's ShortsChromeController:
   a neighbour scrolls in showing what the current page shows */
.vxsp.is-chrome .vxsp__chrome {
  opacity: 1;
}

.vxsp.is-chrome .vxsp__page.is-active .vxsp__chrome .vxsp__rail,
.vxsp.is-chrome .vxsp__page.is-active .vxsp__chrome .vxsp__info {
  pointer-events: auto;
}

.vxsp__rail {
  position: absolute;
  right: 8px;
  bottom: 28%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.vxsp__act {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 0 6px;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
}

.vxsp__actIco {
  display: block;
  width: 30px;
  height: 30px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

.vxsp__act.is-on .vxsp__actIco {
  color: var(--vxl-accent, #e50914);
  filter: none;
}

.vxsp__act--share .vxsp__actIco {
  transform: scaleX(-1);
}

.vxsp__actLabel {
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.2;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
}

.vxsp__info {
  position: absolute;
  left: 14px;
  right: 72px;
  bottom: 15%;
}

.vxsp__ep {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
}

.vxsp__free {
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(61, 220, 151, 0.14);
  color: #3ddc97;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  line-height: 1.2;
  text-shadow: none;
}

.vxsp__syn {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 6px 0 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  line-height: 1.35;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
  cursor: pointer;
}

.vxsp__syn.is-open {
  -webkit-line-clamp: 8;
}

/* ---------- the top bar ---------- */
.vxsp__top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 4px) 6px 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s linear;
}

.vxsp.is-chrome .vxsp__top {
  opacity: 1;
  pointer-events: auto;
}

.vxsp__topBtn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 12px;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
}

.vxsp__topTitle {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
}

/* ---------- the centre disc and the "Next episode" cue ---------- */
.vxsp__disc {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  margin: -34px 0 0 -34px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s linear;
}

.vxsp__disc.is-shown {
  opacity: 1;
}

.vxsp__disc .vxsp-ico {
  width: 30px;
  height: 30px;
  stroke: none;
}

/* the play glyph sits 4px right, as the app nudges it */
.vxsp__disc .vxsp-ico polygon {
  transform: translateX(1px);
}

.vxsp__cue {
  position: absolute;
  top: 12%;
  left: 50%;
  z-index: 7;
  transform: translateX(-50%);
  padding: 8px 14px;
  border-radius: 100px;
  background: rgba(0, 0, 0, 0.65);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
}

.vxsp-fade-enter-active,
.vxsp-fade-leave-active {
  transition: opacity 0.15s linear;
}

.vxsp-fade-enter,
.vxsp-fade-leave-to {
  opacity: 0;
}

/* ---------- the lock, on the page itself ---------- */
.vxsp__lock {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  cursor: pointer;
}

.vxsp__lockArt {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(14px);
  transform: scale(1.12);
}

/* the app blurs what lies under it — the poster and the shade — then lays
   45% black over it */
.vxsp__lock::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.78) 100%);
}

.vxsp__lockBody {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 32px;
  text-align: center;
}

.vxsp__lockDisc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
}

.vxsp__lockDisc .vxsp-ico {
  width: 28px;
  height: 28px;
}

.vxsp__lockTitle {
  margin: 14px 0 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.vxsp__lockText {
  margin: 6px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  line-height: 1.4;
}

.vxsp__lockText:empty {
  display: none;
}

.vxs-btn.vxsp__lockCta {
  gap: 8px;
  height: 46px;
  margin-top: 18px;
  padding: 0 22px;
  font-size: 15px;
  font-weight: 700;
}

.vxs-btn.vxsp__lockCta + .vxsp__lockCta {
  margin-top: 10px;
}

.vxsp__lockCta--soft {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.vxsp__coin,
.vxsp-coin {
  display: inline-flex;
  flex: none;
}

/* ---------- sheets: Episodes, Options, the picker, Unlock ---------- */
.vxsp-sheet {
  position: absolute;
  inset: 0;
  z-index: 20;
  visibility: hidden;
  transition: visibility 0s linear 0.25s;
}

.vxsp-sheet.is-open {
  visibility: visible;
  transition-delay: 0s;
}

.vxsp-sheet--picker {
  z-index: 21;
}

.vxsp-sheet__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.54);
  opacity: 0;
  transition: opacity 0.25s linear;
}

.vxsp-sheet.is-open .vxsp-sheet__scrim {
  opacity: 1;
}

.vxsp-sheet__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  max-height: 82%;
  padding: 8px 18px calc(env(safe-area-inset-bottom, 0px) + 18px);
  border-radius: 20px 20px 0 0;
  background: rgba(0, 0, 0, 0.87);
  transform: translateY(100%);
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.vxsp-sheet.is-open .vxsp-sheet__panel {
  transform: none;
}

.vxsp-sheet__panel--eps {
  height: auto;
  padding: 0 0 env(safe-area-inset-bottom, 0px);
}

.vxsp-sheet__grip {
  flex: none;
  display: block;
  width: 38px;
  height: 4px;
  margin: 8px auto 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.18);
}

.vxsp-sheet__grip--strong {
  margin: 0 auto 10px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.3);
}

.vxsp-sheet__head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 8px 18px;
}

.vxsp-sheet__head--tight {
  padding: 0;
  margin-bottom: 6px;
}

.vxsp .vxsp-sheet__title {
  margin: 0;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}

.vxsp-sheet__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: -8px -12px -8px 0;
  padding: 12px;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
}

.vxsp-sheet__close--sm {
  padding: 13px;
}

.vxsp-sheet__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 18px 18px;
}

.vxsp-sheet__note {
  margin: 14px 0 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12.5px;
  line-height: 1.4;
}

/* the series at the head of the Episodes sheet */
.vxsp-series {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.vxsp-series__art {
  flex: none;
  width: 64px;
  height: 96px;
  border-radius: 8px;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.08);
}

.vxsp-series__text {
  min-width: 0;
}

.vxsp-series__name,
.vxsp-series__meta {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 0;
}

.vxsp-series__name {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.vxsp-series__meta {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12.5px;
  line-height: 1.35;
}

.vxsp-tabs {
  display: flex;
  gap: 18px;
  margin-bottom: 12px;
  overflow-x: auto;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  scrollbar-width: none;
}

.vxsp-tabs__tab {
  flex: none;
  padding: 8px 0 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.vxsp-tabs__tab.is-active {
  border-bottom-color: var(--vxl-accent, #e50914);
  color: #fff;
}

.vxsp-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vxsp-grid__tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  border: 1.5px solid transparent;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
}

.vxsp-grid__tile.is-current {
  border-color: var(--vxl-accent, #e50914);
  background: color-mix(in srgb, var(--vxl-accent, #e50914) 14%, transparent);
  color: var(--vxl-accent, #e50914);
}

.vxsp-grid__n {
  font-size: 15px;
  font-weight: 700;
}

.vxsp-grid__lock {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 12px;
  height: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.vxsp-grid__free {
  position: absolute;
  top: 4px;
  left: 4px;
  color: #3ddc97;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
  line-height: 1;
}

/* the playing tile's equaliser: three bars, 3 → 9 → 3 over 900ms */
.vxsp-eq {
  position: absolute;
  bottom: 5px;
  left: 50%;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 9px;
  transform: translateX(-50%);
}

.vxsp-eq i {
  display: block;
  width: 2px;
  height: 3px;
  background: var(--vxl-accent, #e50914);
  animation: vxsp-eq 0.9s ease-in-out infinite;
}

.vxsp-eq i:nth-child(2) {
  animation-delay: -0.18s;
}

.vxsp-eq i:nth-child(3) {
  animation-delay: -0.36s;
}

@keyframes vxsp-eq {
  0%,
  100% {
    height: 3px;
  }
  50% {
    height: 9px;
  }
}

.vxsp-spin {
  display: block;
  width: 20px;
  height: 20px;
  margin: 12px auto 0;
  border: 2px solid color-mix(in srgb, var(--vxl-accent, #e50914) 25%, transparent);
  border-top-color: var(--vxl-accent, #e50914);
  border-radius: 50%;
  animation: vxsp-spin 0.8s linear infinite;
}

@keyframes vxsp-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Options / Unlock rows */
.vxsp-opts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vxsp-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  border: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.vxsp-opt:hover,
.vxsp-opt:focus {
  color: #fff;
  text-decoration: none;
}

.vxsp-opt:disabled {
  opacity: 0.5;
  cursor: default;
}

.vxsp-opt__ico {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 9px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
}

.vxsp-opt__text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vxsp-opt__title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.vxsp-opt__value {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.vxsp-opt__chev {
  flex: none;
  width: 18px;
  height: 18px;
  color: rgba(255, 255, 255, 0.6);
}

/* the pass: the app's gold card */
.vxsp-opt--pass {
  border: 1px solid rgba(243, 209, 139, 0.35);
  background: linear-gradient(90deg, rgba(243, 209, 139, 0.2), rgba(243, 209, 139, 0.06));
}

.vxsp-opt--pass .vxsp-opt__ico {
  background: #f3d18b;
  color: #2b2008;
}

/* Switch.adaptive */
.vxsp-switch {
  flex: none;
  position: relative;
  width: 51px;
  height: 31px;
  margin: 0;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.16);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: background-color 0.2s linear;
}

.vxsp-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.vxsp-switch:checked {
  background: var(--vxl-accent, #e50914);
}

.vxsp-switch:checked::after {
  transform: translateX(20px);
}

/* the Unlock card */
.vxsp-card {
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
}

.vxsp-card__row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
}

.vxsp-card__row + .vxsp-card__row {
  margin-top: 10px;
}

.vxsp-card__what {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.65);
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.vxsp-card__row strong {
  font-size: 14px;
  font-weight: 700;
}

.vxs-btn.vxsp-card__cta {
  width: 100%;
  height: 46px;
  margin-top: 14px;
  font-size: 15px;
  font-weight: 700;
}

.vxsp-card__error {
  margin: 10px 0 0;
  color: #ff8a80;
  font-size: 12px;
}

/* the picker: a ListTile per choice */
.vxsp-sheet--picker .vxsp-sheet__panel {
  padding: 0 0 env(safe-area-inset-bottom, 0px);
}

.vxsp-pick__title {
  margin: 0;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}

.vxsp-pick {
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}

.vxsp-pick__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 56px;
  padding: 0 16px;
  border: 0;
  background: none;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.vxsp-pick__row.is-on {
  color: var(--vxl-accent, #e50914);
  font-weight: 700;
}

.vxsp-pick__check {
  width: 18px;
  height: 18px;
}

/* ---------- For You: the feed (?feed=, /shorts/feed) ---------- */
.vxsp--feed .vxsp__rail {
  bottom: 27%;
}

.vxsp--feed .vxsp__info {
  bottom: 10%;
}

.vxsp__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
}

.vxsp__epline {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
}

.vxsp--feed .vxsp__syn {
  cursor: default;
}

/* "Watch full series": the app's flat bar, no blur */
.vxsp__full {
  display: flex;
  align-items: center;
  height: 46px;
  margin-top: 12px;
  padding: 0 12px;
  border-radius: 12px;
  background: rgba(40, 40, 46, 0.82);
  color: #fff;
  text-decoration: none;
}

.vxsp__full:hover,
.vxsp__full:focus {
  color: #fff;
  text-decoration: none;
}

.vxsp__fullIco,
.vxsp__fullChev {
  flex: none;
  width: 18px;
  height: 18px;
}

.vxsp__fullText {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: 10px;
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.vxsp__fullCount {
  flex: none;
  margin-right: 4px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12.5px;
}

/* the feed's bar: back · Following | For You · search */
.vxsp__top--feed {
  justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) 12px 0 8px;
}

.vxsp__topBtn--feed {
  padding: 11px;
}

.vxsp__tabs {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.vxsp__tab {
  position: relative;
  padding: 0 0 6px;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
  cursor: pointer;
}

.vxsp__tab::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 20px;
  height: 2px;
  margin-left: -10px;
  border-radius: 2px;
  background: transparent;
}

.vxsp__tab.is-on {
  color: #fff;
  font-weight: 700;
}

.vxsp__tab.is-on::after {
  background: #fff;
}

/* nothing in the feed: the app's centred line and Retry */
.vxsp__empty {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 32px;
  text-align: center;
}

.vxsp__empty[hidden] {
  display: none;
}

.vxsp__empty p {
  margin: 0;
  color: #fff;
  font-size: 14px;
}

.vxsp__retry {
  padding: 8px 12px;
  border: 0;
  background: none;
  color: var(--vxl-accent, #e50914);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.vxsp--hop .vxsp-spin--hop {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  border-width: 3px;
}

.vxsp-spin[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .vxsp-eq i,
  .vxsp-spin {
    animation: none;
  }

  .vxsp-sheet__panel {
    transition: none;
  }
}

/* ==========================================================================
   Phones: the app's Shorts tiles (shorts_badge_phone)
   The app's home rows draw a 9:16 poster with no words under it and one
   corner badge (series_tile_badge): "24 EPs" or NEW on the accent, tucked
   into the poster's top-left corner, which it shares the radius of. The
   computer keeps the boards' two badges and captions.
   ========================================================================== */
.vxs-corner {
  display: none;
}

@media (max-width: 991.98px) {
  .vxs-card .vxs-badge,
  .vxs-t10 .vxs-badge {
    display: none;
  }

  .vxs-corner {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    padding: 2px 4px;
    border-radius: var(--vxl-card-radius, 6px) 0 4px 0;
    background: var(--vxl-accent, #e50914);
    color: var(--vxl-on-accent, #fff);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    white-space: nowrap;
    pointer-events: none;
  }

  body:not([data-lo-shorts-badge-phone="new"]):not([data-lo-shorts-badge-phone="none"]) .vxs-corner--eps,
  body[data-lo-shorts-badge-phone="new"] .vxs-corner--new {
    display: block;
  }

  /* a row's poster stands alone: the series name is on the artwork */
  .vxs-row .vxs-card__title,
  .vxs-row .vxs-card__tags {
    display: none;
  }
}

/* Continue Watching = Poster on a phone: the app's card (ShortsContinueCard)
   — "EP 4" on a fade at the poster's foot, the episode's progress as a 3px
   accent line along the bottom edge, then the title and "EP 4 of 20" */
.vxs-cw__strip,
.vxs-cw__line,
.vxs-cw__epApp {
  display: none;
}

@media (max-width: 991.98px) {
  body[data-lo-shorts-continue="poster"] .vxs-cw__art {
    position: relative;
    overflow: hidden;
  }

  body[data-lo-shorts-continue="poster"] .vxs-cw__strip {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 3px;
    display: block;
    padding: 16px 8px 4px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body[data-lo-shorts-continue="poster"] .vxs-cw__line {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    height: 3px;
    background: rgba(255, 255, 255, 0.2);
  }

  body[data-lo-shorts-continue="poster"] .vxs-cw__line > span {
    display: block;
    height: 100%;
    background: var(--vxl-accent, #e50914);
  }

  body[data-lo-shorts-continue="poster"] .vxs-cw .vxs-bar {
    display: none;
  }

  body[data-lo-shorts-continue="poster"] .vxs-cw__text {
    gap: 2px;
    margin-top: 6px;
  }

  body[data-lo-shorts-continue="poster"] .vxs-cw__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    white-space: normal;
  }

  body[data-lo-shorts-continue="poster"] .vxs-cw__ep {
    font-size: 12px;
    color: var(--vxl-ink-faint, rgba(255, 255, 255, 0.6));
  }

  body[data-lo-shorts-continue="poster"] .vxs-cw__epWide {
    display: none;
  }

  body[data-lo-shorts-continue="poster"] .vxs-cw__epApp {
    display: inline;
  }
}