/* ==========================================================================
   detail.css — the routed movie / series pages (.vxm.vxm-page) and what the
   arrangement options do to them. Loaded after modal.css (the sheet the page
   shares its markup with) and cards.css.

   Selector discipline (layouts.css): tier 0 reads tokens; a tier-1 rule is
   body[data-lo-<option>="<value>"] + the identical tier-0 selector; option
   rules live below the base rule they arrange. Two options land here:

     detail_hero    fullscreen | dissolve | banner — the home hero's three
                    looks (26.495.0); a saved `auto` (the default) is resolved
                    to the home hero's word before the stamp is written.
                    Until 26.495.0 the words were band (= today's dissolve)
                    and fullbleed (= today's fullscreen); the migration moved
                    saved rows. `banner` shares dissolve's base rules through
                    body:is(...) and adds its inset frame at the end of the file.
     actions_style  bare (default) | labeled — the flex-row treatment is in
                    components.css; a full-bleed page lays the same columns
                    out as a two-row grid (the one sanctioned two-option
                    selector in the storefront, see below).

   History: everything under "fullbleed" was the cinematic layout's detail
   page (layout-cinematic.css, retired sheet by sheet from 26.480.0); the
   "band" treatment was classic's, from modal.css. Universal blocks are what
   both looks now share.
   ========================================================================== */
/* ==========================================================================
   detail_hero="band" — the routed movie/series pages, desktop (the default;
   formerly classic's page treatment, moved here from modal.css in 26.481.0).
   The modal markup used to render as a centered 1110px card with a close
   button, which reads as a dialog that lost its backdrop, not a page.
   Viewport-wide hero with a real scrim (over artwork AND the ambient
   trailer), the DS type scale, a reading measure, and the resume furniture
   reduced to the button's own bottom-edge bar. The info MODAL (.vxm without
   .vxm-page) is untouched; "fullbleed" is the other treatment, below.
   ========================================================================== */
@media (min-width: 992px) {
  /* full bleed: undo the Bootstrap container pair */
  body:is([data-lo-detail-hero="dissolve"], [data-lo-detail-hero="banner"]) .vxm.vxm-page,
  body:is([data-lo-detail-hero="dissolve"], [data-lo-detail-hero="banner"]) .vxm.vxm-page .detailsContainer {
    /* legacy-override: vodlix.css:1673 pins .detailsContainer to 1440px
       with !important — at wider viewports that left a dead column beside
       the "full-bleed" hero */
    max-width: 100% !important;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    margin: 0;
  }
  /* hero: viewport-wide, height capped so the fold keeps the info in view.
     The cap is a HEIGHT on the ratio box, not a max-height: the box takes
     its 16:9 from `padding-top: 56.25%` (vodlix.css:1029) and max-height
     never limits padding, so until 26.497.4 the box stayed a full 16:9 and
     the frame only clipped its bottom. The artwork was then cropped from
     the top edge down instead of around its middle, and a trailer with a
     baked-in letterbox (a 2.39:1 film in a 16:9 file) showed its top bar
     as a black band under the header while its bottom bar was cut away
     (owner report, development.clouddev, 2026-09-10). With a real height
     the absolute children cover the frame and crop evenly from both ends,
     which drops the bars. 56.25vw keeps the frame no taller than 16:9 of
     the viewport, so a still is never scaled past its own width. */
  body:is([data-lo-detail-hero="dissolve"], [data-lo-detail-hero="banner"]) .vxm.vxm-page .detailsThumb {
    overflow: hidden;
  }
  body:is([data-lo-detail-hero="dissolve"], [data-lo-detail-hero="banner"]) .vxm.vxm-page .detailsThumb .ratio-16x9 {
    height: min(76vh, 56.25vw);
    min-height: 420px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  body:is([data-lo-detail-hero="dissolve"], [data-lo-detail-hero="banner"]) .vxm.vxm-page .detailsThumb img.imgFull,
  body:is([data-lo-detail-hero="dissolve"], [data-lo-detail-hero="banner"]) .vxm.vxm-page .detailsThumb .ratio-16x9 video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* Dissolve runs under the transparent header the way the home dissolve
     does (header.css clears .contentHolder on the home page for the same
     reason). `.contentHolder` carries pt-5 mt-5: 96px of page background
     between the bar and the artwork, which read as a gap, not a beat. The
     banner keeps its beat (set in its own block below). */
  body[data-lo-detail-hero="dissolve"].page-video_details .contentHolder,
  body[data-lo-detail-hero="dissolve"].page-series_details .contentHolder {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  /* THE scrim — on the cropped box itself, so it covers the artwork and the
     ambient trailer alike. (A gradient on .innerShade dies with the crop:
     that element is the 16:9 ratio height, and its bottom — where the melt
     lives — is exactly the part overflow:hidden removes.) z-index sits above
     the video (auto) and below .overlapData (2). */
  body:is([data-lo-detail-hero="dissolve"], [data-lo-detail-hero="banner"]) .vxm.vxm-page .detailsThumb::after {
    content: "";
    position: absolute;
    inset: 0;
    /* modal.css gives this same pseudo the sheet's dissolve strip — bottom: 0
       + height: 45%. `inset: 0` wins top/bottom but leaves that height in
       place, and top + height beat bottom: the scrim became a 45% strip pinned
       to the TOP of the hero, its "to top" ramp ending in a hard horizontal
       edge across the artwork (owner report, 26.492.2). Full height here. */
    height: auto;
    z-index: 1;
    pointer-events: none;
    background:
      linear-gradient(
        to top,
        var(--vod-body-back-color, #141414) 0%,
        color-mix(in srgb, var(--vod-body-back-color, #141414) 62%, transparent) 20%,
        transparent 52%
      ),
      linear-gradient(
        to bottom,
        color-mix(in srgb, var(--vod-body-back-color, #141414) 45%, transparent) 0%,
        transparent 16%
      ),
      /* a light flat dim keeps bright ambient trailers behind the UI */
      color-mix(in srgb, var(--vod-body-back-color, #141414) 14%, transparent);
  }
  /* overlay block breathes with the page gutter, not card padding */
  body:is([data-lo-detail-hero="dissolve"], [data-lo-detail-hero="banner"]) .vxm.vxm-page .overlapData {
    padding-left: var(--vxl-gutter, 3%);
    padding-right: var(--vxl-gutter, 3%);
    padding-bottom: 36px;
  }
  /* the title: text takes the DS display scale; a logo image gets real
     presence and a shadow so it reads on bright frames */
  body:is([data-lo-detail-hero="dissolve"], [data-lo-detail-hero="banner"]) .vxm.vxm-page .videoLogo h1,
  body:is([data-lo-detail-hero="dissolve"], [data-lo-detail-hero="banner"]) .vxm.vxm-page .videoLogo h2,
  body:is([data-lo-detail-hero="dissolve"], [data-lo-detail-hero="banner"]) .vxm.vxm-page .vxm-info__title {
    font-size: clamp(2.5rem, 3.9vw, 3.5rem) !important; /* owner call: step toward cinematic's scale */
    font-weight: 700;
    letter-spacing: var(--vxl-tracking-tight, -0.02em);
    line-height: 1.05;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
  }
  /* 26.499.0 — the wordmark keeps its mark weight under the title rule above */
  body:is([data-lo-detail-hero="dissolve"], [data-lo-detail-hero="banner"]) .vxm.vxm-page .videoLogo .vxm-wordmark {
    font-weight: 800;
    text-transform: none;
    letter-spacing: var(--vxl-tracking-tight, -0.03em);
  }
  body:is([data-lo-detail-hero="dissolve"], [data-lo-detail-hero="banner"]) .vxm.vxm-page .overlapData .videoLogo img {
    display: block;
    width: auto;
    height: auto;
    max-height: 160px;
    max-width: 38%;
    filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.55));
  }
  /* resume furniture: the Resume button already wears the DS bottom-edge
     progress — the extra Bootstrap .progress rule above the buttons (red
     fill, floating label) said the same thing twice, worse */
  body:is([data-lo-detail-hero="dissolve"], [data-lo-detail-hero="banner"]) .vxm.vxm-page .vxm-info__progressRow .progress {
    display: none;
  }
  body:is([data-lo-detail-hero="dissolve"], [data-lo-detail-hero="banner"]) .vxm.vxm-page .vxm-info__progressRow {
    margin: 0 0 8px !important;
    width: auto;
  }
  body:is([data-lo-detail-hero="dissolve"], [data-lo-detail-hero="banner"]) .vxm.vxm-page .vxm-info__remaining {
    font-size: 12.5px;
    font-weight: 600;
    color: color-mix(in srgb, var(--vod-white-color, #fff) 72%, transparent);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
  }
  /* body content keeps the same gutter rhythm as the rails */
  body:is([data-lo-detail-hero="dissolve"], [data-lo-detail-hero="banner"]) .vxm.vxm-page .card.videoDetails > .insidePadding {
    padding-left: var(--vxl-gutter, 3%);
    padding-right: var(--vxl-gutter, 3%);
    padding-top: 18px;
  }
  /* meta chips: legible, and visually attached to the description below */
  body:is([data-lo-detail-hero="dissolve"], [data-lo-detail-hero="banner"]) .vxm.vxm-page .card.videoDetails > .insidePadding .vxm-meta,
  body:is([data-lo-detail-hero="dissolve"], [data-lo-detail-hero="banner"]) .vxm.vxm-page .card.videoDetails > .insidePadding .d-flex.align-content-center {
    font-size: 13.5px;
    column-gap: 10px;
    margin-bottom: 10px !important;
  }
  /* description: a reading measure, not a column-width slab */
  body:is([data-lo-detail-hero="dissolve"], [data-lo-detail-hero="banner"]) .vxm.vxm-page .card.videoDetails > .insidePadding > .row p {
    max-width: 68ch;
    font-size: var(--vxl-fs-body, 15.5px);
    line-height: 1.65;
    color: var(--vod-grey-text, #b3b3b3);
  }
  /* section heading ("More Like This") joins the rail-title scale */
  body:is([data-lo-detail-hero="dissolve"], [data-lo-detail-hero="banner"]) .vxm.vxm-page .card.videoDetails > .insidePadding > h2 {
    font-size: var(--vxl-rail-title-size, clamp(1.15rem, 1.5vw, 1.45rem)) !important;
    font-weight: var(--vxl-rail-title-weight, 600);
    color: var(--vod-white-color, #fff);
    margin-bottom: 16px !important;
  }
  /* related grid: four across at page width — three 450px slabs read heavy */
  body:is([data-lo-detail-hero="dissolve"], [data-lo-detail-hero="banner"]) .vxm.vxm-page .card.videoDetails > .insidePadding > .row.mb-2 > [class*="col-"] {
    flex: 0 0 25%;
    max-width: 25%;
  }
}

/* --------------------------------------------------------------------------
   Universal desktop page furniture (formerly cinematic-only, 26.481.0): a
   routed page has nothing to close; the episode list and its heading sit on
   the page's own left edge; section headings read as tabs. The bare
   body[data-layout] prefix keeps the specificity the rules were written at.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  body[data-layout] .vxm.vxm-page .series-detail-close {
    display: none !important;
  }
  /* Bootstrap's negative row margin had the episode rows sitting 15px left
     of every other element; removing it leaves the columns' own padding,
     which put the heading and the season field 15px right. Zero both, so
     the section shares one left edge. */
  body[data-layout] .vxm.vxm-page .vxm-epList {
    margin-inline: 0 !important;
  }
  body[data-layout] .vxm.vxm-page .vxm-epList > [class*="col"]:not(.vxm-ep) {
    padding-inline: 0 !important;
  }
  body[data-layout].page-video_details .videoDetails > .insidePadding > h2.h5,
  body[data-layout].page-series_details .videoDetails > .insidePadding > h2.h5 {
    display: inline-block;
    padding-bottom: 10px;
    border-bottom: 3px solid var(--vxl-ink) !important;
  }
  /* ---- Section tabs: ink underline over a hairline --------------------- */
  body[data-layout].page-video_details .videoDetails > .insidePadding > h2.h5,
  body[data-layout].page-series_details .videoDetails > .insidePadding > h2.h5 {
    border-bottom: 3px solid var(--vxl-ink) !important;
    padding-bottom: 10px !important;
  }
  /* The rule runs the full width behind the active tab, as a tab strip should —
     without it the underline floats with nothing to sit on. */
  body[data-layout].page-video_details .videoDetails > .insidePadding > h2.h5::after,
  body[data-layout].page-series_details .videoDetails > .insidePadding > h2.h5::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 1px;
    background: var(--vxl-line);
    z-index: -1;
  }
  body[data-layout] .videoDetails > .insidePadding > h2.h5 {
    position: relative;
  }

  /* ---- Episodes: heading over a full-width season field --------------- */
  /* The markup puts "Episodes" and the season picker in two columns of one
     row. The reference stacks them — an underlined section heading, then the
     season as a full-width field — which also gives the picker a 46px target
     instead of the 32px chip it was. `:not(.vxm-ep)`: the episode rows are
     direct children of the same list (since 26.482.0 removed their wrapper)
     and size themselves — the vertical list bleeds its hover surface past
     the gutter, which a 100% max-width would clip. */
  body[data-layout] .vxm.vxm-page .vxm-epList > [class*="col"]:not(.vxm-ep) {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  /* Mirrors the base rule's shape exactly, plus the layout attribute — the base
     is `body.page-series_details .vxm-epList > .col:first-child > h2`, and
     `:first-child` counts as a class, so a shorter selector here lost and the
     underline stayed the accent red instead of ink. */
  body[data-layout].page-series_details .vxm-epList > .col:first-child > h2,
  body[data-layout] .vxm.vxm-page .vxm-epList h2.h4 {
    display: inline-block;
    margin-bottom: 14px !important;
    padding-bottom: 10px;
    border-bottom: 3px solid var(--vxl-ink) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
  }
}

/* ==========================================================================
   detail_hero="fullbleed" — shared rules: CTA paint, action row order, the
   resume furniture. The desktop block further down builds on these, and
   wins its ties exactly as it did inside the cinematic sheet. Desktop only
   (≥992px).

   There is no phone copy any more (26.492.3): phones run ONE info screen
   today whatever the word says — the landscape frame in mobile-app.css.
   The phone copy that restated the cinematic sheet (frame, CTA paint,
   action order, episode rows, section tabs) went with it; the word's own
   phone looks (Band / Dissolve / Banner, following the home hero) are the
   next release's work, and they build on the landscape frame, not on that
   copy.
   ========================================================================== */
@media (min-width: 992px) {
  /* ======================================================================
     DETAIL SCREEN — the HBO Max content page.

     Measured off the same reference (iPhone, 1284x2778, so ÷3 for points):
     a tall 3:4 portrait frame from y=0, the title sitting ON its lower edge,
     an inverted full-width CTA, a LEFT-aligned action row, and section tabs
     underlined in ink over a hairline rule.

     The shared mobile detail screen (mobile-app.css) is a 16:9 frame with the
     title below it and the actions spread edge to edge — that stays, for
     Classic and everything else. This is Cinematic's alone.
     ====================================================================== */

  /* ---- Frame: 16:9, full bleed ----------------------------------------
     Was a 3:4 portrait plate with the title pulled onto its lower edge. The
     phone detail screen is now ONE design across every layout (owner call,
     matching the supplied reference): a 16:9 frame with the title below it,
     which is what puts the CTA above the fold instead of under it. The
     desktop block (min-width: 992px) still overrides this with its own
     86vh hero, so cinematic keeps its identity where there is room for it. */
  body[data-lo-detail-hero="fullscreen"].page-video_details .detailsThumb .ratio-16x9,
  body[data-lo-detail-hero="fullscreen"].page-series_details .detailsThumb .ratio-16x9 {
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    border-radius: 0 !important;
  }
  /* The artwork COVERS the frame. A title with only landscape art renders
     that still at its natural 16:9 otherwise, leaving the lower two thirds
     of the portrait frame black. (The desktop block carries the same rule
     for its own frame.) */
  body[data-lo-detail-hero="fullscreen"].page-video_details .detailsThumb .ratio-16x9 img,
  body[data-lo-detail-hero="fullscreen"].page-video_details .detailsThumb .ratio-16x9 video,
  body[data-lo-detail-hero="fullscreen"].page-series_details .detailsThumb .ratio-16x9 img,
  body[data-lo-detail-hero="fullscreen"].page-series_details .detailsThumb .ratio-16x9 video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* No scrim on the phone frame any more: it existed to keep an OVERLAID
     title readable, and the title now sits below the picture. A gradient
     over nothing just dims the artwork. Desktop keeps its own scrim in the
     min-width block, where the copy still sits on the image. */
  body[data-lo-detail-hero="fullscreen"].page-video_details .detailsThumb .ratio-16x9::after,
  body[data-lo-detail-hero="fullscreen"].page-series_details .detailsThumb .ratio-16x9::after {
    display: none;
  }

  /* ---- Title sits BELOW the frame ------------------------------------
     The info block used to be pulled up by --vxc-info-pull (104px) so the
     title landed on the artwork. With the shared 16:9 frame the title reads
     under the picture, as the reference draws it — so the pull is gone and
     the shared mobile-app.css margin stands. */
  body[data-lo-detail-hero="fullscreen"].page-video_details .detailsThumb .overlapData,
  body[data-lo-detail-hero="fullscreen"].page-series_details .detailsThumb .overlapData {
    position: relative;
    z-index: 3;
    margin-top: 0 !important;
  }
  body[data-lo-detail-hero="fullscreen"] .vxm-info__title {
    font-size: clamp(1.6rem, 7vw, 2.1rem) !important;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: var(--vxl-tracking-tight);
  }

  /* ---- Resume progress: inside the button, under the label ------------
     The reference draws how far you are through as a short rule beneath
     the CTA's own text, not as a separate bar above it. Nesting the bar in
     the label makes it exactly the label's width for free. Colours come
     from `currentColor`, so it reads correctly on the inverted primary
     (dark ink on the light slab) without hard-coding either. */
  /* Not scoped to the detail row: the homepage hero's Resume CTA draws the
     same rule, and both are `.vxc-resumeLabel` wrapping the label text. */
  body[data-lo-detail-hero="fullscreen"] .vxc-resumeLabel {
    position: relative;
  }
  body[data-lo-detail-hero="fullscreen"] .vxc-resumeBar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -7px;
    height: 3px;
    border-radius: var(--vxl-radius-pill, 999px);
    background: color-mix(in srgb, currentColor 26%, transparent);
    overflow: hidden;
  }
  body[data-lo-detail-hero="fullscreen"] .vxc-resumeBar__fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: currentColor;
  }
  /* The in-button progress bar is the shared component now: the templates
     emit .vxl-btn__progress (components.css) as a direct child of the CTA —
     detail pages via .vxl-btn--progress, the hero via the host rule below.
     The whole optical-nudge/bar-lift machinery that aligned the old
     under-label rule is gone with the rule itself; nothing hangs off the
     label anymore. The base .vxc-resumeBar rules above STAY: the card
     overflow menu (cwMenuMarkup in video.html/series.html) still draws its
     miniature under-label bar inside menu items, which is that surface's
     own design. */
  body[data-lo-detail-hero="fullscreen"] .vxe-billboard .sldieBtns .btn {
    position: relative;
    overflow: hidden; /* the bottom-edge bar clips to the pill radius */
  }

  /* The standalone row is BACK on the phone: the reference puts the resume
     context under the CTAs — "S1:E1 <title>", the bar, and how much is left —
     which the in-button rule cannot say. (The in-button progress above still
     draws on the CTA itself; the two read as one idea.) Desktop keeps the
     row too, via the min-width block further down. */
  body[data-lo-detail-hero="fullscreen"].page-video_details .vxm-info__progressRow,
  body[data-lo-detail-hero="fullscreen"].page-series_details .vxm-info__progressRow {
    display: flex !important;
  }

  /* ---- Phone title: the LOGO when the item has one --------------------
     mobile-app.css hides .videoLogo on the phone detail screen in favour of
     the info head's text <h1>. Cinematic shows the logo art, desktop parity.
     Only the PHONE copy is re-shown (its column carries .d-sm-none, so at
     ≥576px nothing doubles up with the desktop copy), and only its IMG: the
     block's own text fallback stays hidden so a title with no logo shows one
     h1 (the info head's), not two. A logo that 404s flips logoFailed, the
     img leaves the DOM, and :has() puts the text title straight back. */
  /* SUPERSEDED: the phone detail screen is now shared across layouts and
     titles with a plain text <h1> under the artwork (owner reference). The
     logo re-show is off, so the rules below it are inert — kept rather than
     deleted because restoring the logo treatment is a one-line revert. */
  body[data-lo-detail-hero="fullscreen"].page-video_details .vxm-heroCol.d-sm-none .videoLogo,
  body[data-lo-detail-hero="fullscreen"].page-series_details .vxm-heroCol.d-sm-none .videoLogo {
    display: block !important;
    margin: 0 0 10px !important;
  }
  body[data-lo-detail-hero="fullscreen"].page-video_details .vxm-heroCol.d-sm-none .videoLogo h1,
  body[data-lo-detail-hero="fullscreen"].page-video_details .vxm-heroCol.d-sm-none .videoLogo h2,
  body[data-lo-detail-hero="fullscreen"].page-series_details .vxm-heroCol.d-sm-none .videoLogo h1,
  body[data-lo-detail-hero="fullscreen"].page-series_details .vxm-heroCol.d-sm-none .videoLogo h2 {
    display: none !important;
  }
  body[data-lo-detail-hero="fullscreen"].page-video_details .vxm-heroCol.d-sm-none .videoLogo img,
  body[data-lo-detail-hero="fullscreen"].page-series_details .vxm-heroCol.d-sm-none .videoLogo img {
    max-width: min(64vw, 280px);
    max-height: 110px;
  }
  /* SUPERSEDED with the logo re-show above: this hid the text title whenever
     logo art EXISTED IN THE DOM, which is still true — the column is merely
     display:none now — so leaving it would blank the title on every item that
     has a logo. The shared screen always titles in text. */
  body[data-lo-detail-hero="fullscreen"].page-video_details .overlapData .row:has(.vxm-heroCol.d-sm-none .videoLogo img) .vxm-info__title,
  body[data-lo-detail-hero="fullscreen"].page-series_details .overlapData .row:has(.vxm-heroCol.d-sm-none .videoLogo img) .vxm-info__title {
    display: block !important;
  }

  /* ---- CTA: tenant primary, every width -------------------------------- */
  /* OWNER DECISION (26.314.x): the detail CTA wears the tenant's action
     colour, same as the hero — the HBO reference's inverted light-on-dark
     slab is retired. Stated here with page weight because the legacy cascade
     (mobile-app page rules, old chip paints) still fights the bare component
     tier at some widths; the values are the .vxl-btn primary tier's own.
     Trailer and "Play from beginning" re-paint themselves right below. */
  /* Trailer is excluded: it is a `.playResumeBtn` too, but never the primary.
     On phones mobile-app.css paints it as the secondary slab under Play, and
     this rule ties it on specificity and loads later — so without the guard
     it painted the trailer accent as well: two identical Play slabs. */
  body[data-lo-detail-hero="fullscreen"].page-video_details .detailsIcon .playResumeBtn:not([data-stats-event="trailer_play"]),
  body[data-lo-detail-hero="fullscreen"].page-series_details .detailsIcon .playResumeBtn:not([data-stats-event="trailer_play"]) {
    /* through the curated button chain, same as the component tier — this
       guard must not cut the customizer's Primary Button controls out of
       cinematic pages (#5350 items 15/16) */
    background: var(--vod-btn-primary-bg, var(--vxl-accent)) !important;
    border: 0 !important;
    color: var(--vod-btn-primary-text, var(--vxl-on-accent)) !important;
    border-radius: var(--vxl-btn-radius, 999px) !important; /* Button corners word */
  }
  body[data-lo-detail-hero="fullscreen"].page-video_details .detailsIcon .playResumeBtn:not([data-stats-event="trailer_play"]):hover,
  body[data-lo-detail-hero="fullscreen"].page-series_details .detailsIcon .playResumeBtn:not([data-stats-event="trailer_play"]):hover {
    /* the guard's !important would otherwise freeze the tier's hover */
    background: var(--vod-btn-primary-hover-bg, var(--vxl-accent-hover)) !important;
  }
  body[data-lo-detail-hero="fullscreen"] .detailsIcon .playResumeBtn .vxm-ico,
  body[data-lo-detail-hero="fullscreen"] .detailsIcon .playResumeBtn i {
    color: inherit !important;
  }
  /* The secondary CTA (Play from beginning) keeps a surface fill so the pair
     still reads as primary + secondary once the primary is inverted.

     It needs the same page-class prefix as the rule above: the secondary button
     IS a `.playResumeBtn`, so a shorter selector loses the tie and it inverted
     too — two identical light slabs stacked on top of each other.

     Trailer used to be listed here too, back when it was a filled chip beside
     Play. It is a quiet text link now (see the trailer rule further down), and
     this rule was still winning that argument — it carries one more class
     (`.page-series_details`), so it outranked the newer rule's
     `background: transparent !important` and kept painting an 8% slab with
     square corners in the middle of a row of circles. Removed from the list
     rather than out-specified further down: one rule, one owner. */
  body[data-lo-detail-hero="fullscreen"].page-video_details .detailsIcon .playResumeBtn.vxm-info__cta--secondary,
  body[data-lo-detail-hero="fullscreen"].page-series_details .detailsIcon .playResumeBtn.vxm-info__cta--secondary {
    background: var(--vxl-surface-2) !important;
    color: var(--vxl-ink) !important;
  }
  /* Only the PRIMARY CTA inverts. Trailer is also a `.playResumeBtn`, so it was
     inverting too — and a base rule paints its label `rgba(255,255,255,.92)`,
     which on an inverted (near-white) button is white on white: the button
     rendered as an empty white slab. The label colour has to be restated, not
     just the fill. */
  body[data-lo-detail-hero="fullscreen"] .detailsIcon .playResumeBtn[data-stats-event="trailer_play"] > span,
  body[data-lo-detail-hero="fullscreen"] .detailsIcon .playResumeBtn[data-stats-event="trailer_play"] .vxm-ico,
  body[data-lo-detail-hero="fullscreen"] .detailsIcon .vxm-info__cta--secondary > span,
  body[data-lo-detail-hero="fullscreen"] .detailsIcon .vxm-info__cta--secondary .vxm-ico {
    color: var(--vxl-ink) !important;
  }
  /* ...and on DESKTOP the trailer is a quiet inline chip beside the icons
     (its own block further down restyles it). Desktop only: this used to
     apply everywhere, and on phones its `flex: 0 0 auto` outranked the
     mobile slab rule (mobile-app.css, 26.458.0) that seats Trailer as the
     full-width second button under Play — the trailer sat as a lone text
     chip at the start of the My List / Rate / Share row (owner report,
     26.473.0). Phones now fall through to the slab. */
  @media (min-width: 992px) {
    body[data-lo-detail-hero="fullscreen"].page-video_details .detailsIcon .playResumeBtn[data-stats-event="trailer_play"],
    body[data-lo-detail-hero="fullscreen"].page-series_details .detailsIcon .playResumeBtn[data-stats-event="trailer_play"] {
      flex: 0 0 auto !important;
      width: auto !important;
      padding: 0 12px !important;
      background: transparent !important;
      border: 0 !important;
      color: var(--vxl-ink) !important;
    }
  }

  /* The trailer mute disc is pinned with `calc(56.25vw - 52px)` — the height of
     a 16:9 frame — so on this 3:4 frame it sat ~340px high, on top of the Play
     button.

     It cannot simply be re-pointed at the 3:4 height either: the disc lives
     inside `.overlapData`, and making that `position: relative` (for the
     z-index above) turned it into the disc's containing block. So the offset is
     measured from there — the block is pulled up by exactly one
     `--vxc-info-pull`, so `pull - 52` puts the disc 52px above the artwork's
     bottom edge wherever that is. Both sides read the same variable, so
     changing the overlap cannot silently move the disc again. */
  body[data-lo-detail-hero="fullscreen"].page-video_details .detailsIcon .playPausePage,
  body[data-lo-detail-hero="fullscreen"].page-video_details .detailsIcon .playPauseModal,
  body[data-lo-detail-hero="fullscreen"].page-series_details .detailsIcon .iframePlayPauseSeries {
    top: calc(var(--vxc-info-pull) - 52px);
  }

  /* ---- Actions: left-aligned, not spread ------------------------------ */
  /* Four columns pinned to both edges reads as a toolbar; the reference groups
     them at the start, which reads as a set belonging to the title above. */
  body[data-lo-detail-hero="fullscreen"].page-video_details .detailsIcon,
  body[data-lo-detail-hero="fullscreen"].page-series_details .detailsIcon {
    justify-content: flex-start !important;
    column-gap: 34px !important;
  }
  body[data-lo-detail-hero="fullscreen"] .detailsIcon .vxm-actCol {
    flex: 0 0 auto !important;
  }
  /* Reference order is CTA → actions → synopsis. The markup emits the synopsis
     before the action columns, so reorder visually rather than move it in the
     template — the DOM order is the sensible reading order for a screen reader
     (what it is, then what you can do about it) and worth keeping. */
  /* One explicit sequence for the whole row. Ordering `.vxr` is useless — the
     shared rules give it `display: contents`, so it has no box and the flex
     items are really its hoisted like/dislike buttons, which carry order 4 and
     5 of their own and therefore landed AFTER the synopsis. They have to be
     numbered here alongside everything else.

     The like/dislike pair is addressed by position, not by class, because the
     pop's DOM order is dislike-then-like while the intended reading order is
     the reverse — the same language-agnostic trick the shared rules use. */
  body[data-lo-detail-hero="fullscreen"] .detailsIcon .playResumeBtn { order: 1; }
  body[data-lo-detail-hero="fullscreen"] .detailsIcon .vxm-actCol--list { order: 2; }
  body[data-lo-detail-hero="fullscreen"] .detailsIcon .vxr__pop .vxr__optBtn:nth-child(2) { order: 3; }
  body[data-lo-detail-hero="fullscreen"] .detailsIcon .vxr__pop .vxr__optBtn:nth-child(1) { order: 4; }
  body[data-lo-detail-hero="fullscreen"] .detailsIcon .vxm-actCol--share { order: 5; }
  body[data-lo-detail-hero="fullscreen"] .detailsIcon .vxm-info__body {
    order: 6;
    margin-block: 20px 0 !important;
  }
  /* `.copyDiv` is the clipboard SOURCE behind the Share button, not a control —
     but it is a flex item, and it was claiming a full 321px row of blank space
     between the actions and the synopsis. Kept in the DOM (clipboard.js reads
     from it) and in flow, just collapsed and moved to the end. */
  body[data-lo-detail-hero="fullscreen"] .detailsIcon .copyDiv {
    order: 7;
    flex: 0 0 100% !important;
    height: 0 !important;
    margin: 0 !important;
    overflow: hidden;
  }

  /* ---- Episode rows: thumbnail left, text beside it --------------------
     The Netflix row: number, a 16:9 still with a play affordance, then title
     (duration right-aligned) with the synopsis directly under it — all beside
     the still, not below it. The first cut ran the synopsis full-width under
     the whole row, which with a short description left the right two-thirds
     of every row empty and made the list read as broken. The markup is three
     levels of Bootstrap columns wrapping a card that stacks vertically, so
     the layers in between are flattened with `display: contents` and the
     whole row is laid out as one grid. Nothing moves in the DOM — reading
     order is untouched, which matters because that order (number, title,
     synopsis) is the sensible one to hear read aloud. */
  body[data-lo-detail-hero="fullscreen"] .vxm.vxm-page .vxm-ep {
    display: grid;
    grid-template-columns: 18px 148px minmax(0, 1fr);
    grid-template-areas:
      "num thumb head"
      "num thumb desc"
      "rule rule rule";
    /* `1fr` pins the synopsis directly under the title row: with two auto
       rows, the still (which spans both) donates its spare height to the
       FIRST track too, and the synopsis floated mid-row. */
    grid-template-rows: auto 1fr auto;
    column-gap: 12px;
    row-gap: 6px;
    align-items: start;
    padding: 0 !important;
  }
  body[data-lo-detail-hero="fullscreen"] .vxm.vxm-page .vxm-ep > .row,
  body[data-lo-detail-hero="fullscreen"] .vxm.vxm-page .vxm-ep > .row > [class*="col-"],
  body[data-lo-detail-hero="fullscreen"] .vxm.vxm-page .vxm-ep .listMenu,
  body[data-lo-detail-hero="fullscreen"] .vxm.vxm-page .vxm-ep .listMenu > div,
  body[data-lo-detail-hero="fullscreen"] .vxm.vxm-page .vxm-ep .listMenu > div > a {
    display: contents !important;
  }
  /* ...except the column holding the episode number, which is a real cell —
     it spans both text rows now, centred on the still's height. */
  body[data-lo-detail-hero="fullscreen"] .vxm.vxm-page .vxm-ep > .row > .col-1 {
    display: block !important;
    grid-area: num;
    align-self: center;
    padding: 0 !important;
    text-align: start !important;
  }
  body[data-lo-detail-hero="fullscreen"] .vxm.vxm-page .vxm-ep .seriesIndex {
    font-size: 18px;
    font-weight: 600;
    color: var(--vxl-ink-muted);
    line-height: 1;
  }
  body[data-lo-detail-hero="fullscreen"] .vxm.vxm-page .vxm-ep .listMenu > a.img {
    grid-area: thumb;
    display: block !important;
    width: 100%;
    margin: 0 !important;
    border-radius: var(--vxl-card-radius, 4px); /* Thumbnail corners word */
    overflow: hidden;
  }
  /* A still with no affordance reads as decoration. The reference puts a play
     triangle on it; drawn in CSS so it needs no icon and no markup change. */
  body[data-lo-detail-hero="fullscreen"] .vxm.vxm-page .vxm-ep .listMenu > a.img::after {
    content: "";
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 3;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7px 0 7px 12px;
    border-color: transparent transparent transparent var(--vxl-ink);
    filter: drop-shadow(0 1px 2px var(--vxl-scrim));
  }
  /* The card's hover play chip would be a SECOND play affordance on top of the
     triangle above — and it ships in the accent colour, which is exactly the
     shout this layout avoids. One affordance is enough. */
  body[data-lo-detail-hero="fullscreen"] .vxm.vxm-page .vxm-ep .listMenu .playBtn {
    display: none !important;
  }
  body[data-lo-detail-hero="fullscreen"] .vxm.vxm-page .vxm-ep .listMenu > div > div:first-child {
    grid-area: head;
    display: flex !important;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 0 !important;
    padding: 0 !important;
  }
  body[data-lo-detail-hero="fullscreen"] .vxm.vxm-page .vxm-ep .listMenu h2 {
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.3;
  }
  body[data-lo-detail-hero="fullscreen"] .vxm.vxm-page .vxm-ep .listMenu .vid-description {
    grid-area: desc;
    margin: 0 !important;
    font-size: 13px;
    line-height: 1.45;
    color: var(--vxl-ink-muted) !important;
  }
  /* The divider is the row separator, so it spans everything and uses the line
     token rather than Bootstrap's default rule colour. */
  body[data-lo-detail-hero="fullscreen"] .vxm.vxm-page .vxm-ep > div:last-child {
    grid-area: rule;
  }
  body[data-lo-detail-hero="fullscreen"] .vxm.vxm-page .vxm-ep hr {
    margin: 4px 0 14px !important;
    border: 0;
    border-top: 1px solid var(--vxl-line);
  }

  body[data-lo-detail-hero="fullscreen"] .vxm.vxm-page .vxm-epList select.form-select {
    width: 100% !important;
    height: 46px;
    padding: 0 16px !important;
    border: 0 !important;
    border-radius: var(--vxl-btn-radius, var(--vxl-radius-pill)) !important;
    background-color: var(--vxl-surface-2) !important;
    color: var(--vxl-ink) !important;
    font-size: 15px;
    font-weight: 600;
  }
}
/* ==========================================================================
   DETAIL PAGE — DESKTOP. "fullbleed" (the HBO Max pattern): the ARTWORK runs
   edge to edge while the text stays on the page's own left margin.
   `.ratio` and `.overlapData` are siblings, so only the artwork is bled and
   the info block is left exactly where the page already puts it, then pulled
   up onto the picture. Universal blocks in between (related wall, vertical
   episode list, section rhythm) apply to band as well.
   ========================================================================== */
@media (min-width: 992px) {
  /* Three ancestors carry `overflow: hidden` and all three are the width of the
     page container, so a bled child was laid out full-width and then simply
     clipped back to the container — the artwork measured 1440 wide while only
     the middle 1110 of it painted. They have to be opened for the bleed to be
     visible at all; the artwork is the only bled child, so nothing else spills. */
  body[data-lo-detail-hero="fullscreen"].page-video_details .detailsThumb,
  body[data-lo-detail-hero="fullscreen"].page-series_details .detailsThumb,
  body[data-lo-detail-hero="fullscreen"] .card.videoDetails,
  body[data-lo-detail-hero="fullscreen"] .videoDetails.detail {
    overflow: visible !important;
  }

  /* The artwork runs BEHIND the header, as the editors-pick billboard does on
     the homepage — the header is transparent over this layout, so a bar of page
     background above the picture is just a gap. `.contentHolder` carries
     Bootstrap's `pt-5 mt-5`, which is exactly the 96px the artwork was sitting
     below; the hero is the only thing at the top of this page, so zeroing it
     here costs nothing else. */
  body[data-lo-detail-hero="fullscreen"].page-video_details .contentHolder,
  body[data-lo-detail-hero="fullscreen"].page-series_details .contentHolder {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  body[data-lo-detail-hero="fullscreen"].page-video_details .detailsThumb .ratio-16x9,
  body[data-lo-detail-hero="fullscreen"].page-series_details .detailsThumb .ratio-16x9 {
    margin-inline: calc(50% - 50vw);
    width: 100vw;
    /* Fills the viewport the way the editors-pick billboard does, rather than
       being a 16:9 band that happens to be wide. A fixed height instead of an
       aspect-ratio means the frame is the same commanding shape on every
       screen and never letterboxes; `object-fit: cover` on the image does the
       cropping. 86vh matches the home hero — the two should feel like the same
       layout, because they are. */
    height: 86vh !important;
    min-height: 520px;
    /* the ratio classes size with a padding-top hack; aspect-ratio alone does
       not defeat it */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-radius: 0 !important;
  }
  body[data-lo-detail-hero="fullscreen"] .detailsThumb .ratio-16x9 img,
  body[data-lo-detail-hero="fullscreen"] .detailsThumb .ratio-16x9 video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* Left-weighted wash for the text, plus a bottom dissolve into the page.

     The dissolve is ONE eased ramp, and this pseudo-element is its only
     owner. It used to stack on the legacy .innerShade (solid to 6%, 0.6 at
     26%, gone at 58%): two linear ramps ending at different heights add up
     to a wash that is near-opaque over the lower third and then lets go
     within ~100px — which on bright footage reads as a hard black slab
     under the picture, not a blend (owner report, 26.473.0). The stops
     below approximate an ease-in curve, so the artwork loses density
     gradually from the midpoint and is fully the page colour only at the
     bottom edge, where the info block sits. */
  body[data-lo-detail-hero="fullscreen"].page-video_details .detailsThumb .ratio-16x9::after,
  body[data-lo-detail-hero="fullscreen"].page-series_details .detailsThumb .ratio-16x9::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
      linear-gradient(0deg,
        var(--vxl-scrim-solid) 0%,
        color-mix(in srgb, var(--vxl-scrim-solid) 94%, transparent) 10%,
        color-mix(in srgb, var(--vxl-scrim-solid) 78%, transparent) 22%,
        color-mix(in srgb, var(--vxl-scrim-solid) 56%, transparent) 36%,
        color-mix(in srgb, var(--vxl-scrim-solid) 32%, transparent) 52%,
        color-mix(in srgb, var(--vxl-scrim-solid) 12%, transparent) 70%,
        transparent 88%),
      linear-gradient(90deg, var(--vxl-scrim) 0%, var(--vxl-scrim-weak) 34%, transparent 60%);
  }
  body[data-lo-detail-hero="fullscreen"].page-video_details .detailsThumb .innerShade,
  body[data-lo-detail-hero="fullscreen"].page-series_details .detailsThumb .innerShade {
    display: none !important;
  }

  /* Info block: untouched horizontally — it keeps the page gutter — and
     lifted well onto the artwork, the reference's position: the logo sits
     around the vertical midpoint of the first screen, not on the fold.

     ONE number owns the lift. The ambient-trailer discs are positioned
     against this same block and measure from its top (see their rule), so
     they read the same variable — change the pull and they follow. The
     original -190 was tuned when the block held only title + CTA + icons;
     the hero now carries the meta, synopsis and genres too, so the taller
     block earns a deeper pull without the rows colliding. */
  body[data-lo-detail-hero="fullscreen"].page-video_details,
  body[data-lo-detail-hero="fullscreen"].page-series_details {
    --vxc-desktop-pull: 330px;
  }
  body[data-lo-detail-hero="fullscreen"].page-video_details .detailsThumb .overlapData,
  body[data-lo-detail-hero="fullscreen"].page-series_details .detailsThumb .overlapData {
    position: relative;
    z-index: 3;
    margin-top: calc(-1 * var(--vxc-desktop-pull)) !important;
  }
  /* The hero column carries the reference's width: the description runs to
     roughly half the screen (905px at 1920), not a narrow 56ch strip. The
     CTA and icon rows size themselves, so only the text gets wider. */
  body[data-lo-detail-hero="fullscreen"] .detailsThumb .overlapData .vxm-heroCol {
    max-width: min(48vw, 920px);
  }
  body[data-lo-detail-hero="fullscreen"] .detailsIcon .vxm-info__body {
    max-width: 56ch;
  }
  /* Title logo at the reference's presence — about a third of the screen.
     width (not just max-width) so small logo assets scale up to it too;
     contain keeps the art's own aspect. */
  body[data-lo-detail-hero="fullscreen"].page-video_details .detailsThumb .overlapData .videoLogo img,
  body[data-lo-detail-hero="fullscreen"].page-series_details .detailsThumb .overlapData .videoLogo img {
    width: min(32vw, 620px);
    max-width: min(32vw, 620px) !important;
    height: auto;
    max-height: 210px;
    object-fit: contain;
    object-position: left bottom;
  }
  body[data-lo-detail-hero="fullscreen"] .vxm-info__title,
  body[data-lo-detail-hero="fullscreen"] .videoLogo h1,
  body[data-lo-detail-hero="fullscreen"] .videoLogo h2 {
    font-size: clamp(2rem, 3.4vw, 3.2rem) !important;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: var(--vxl-tracking-tight);
  }
  /* 26.499.0 — the wordmark keeps its mark weight under the title rule above */
  body[data-lo-detail-hero="fullscreen"] .videoLogo .vxm-wordmark {
    font-weight: 800;
    text-transform: none;
    letter-spacing: var(--vxl-tracking-tight, -0.03em);
  }

  /* ---- Actions row: ARRANGEMENT ONLY -----------------------------------
     The buttons' paint and geometry moved to the shared component tier
     (components.css): the templates co-class the primary CTA as
     .vxl-btn--lg (tenant primary via the legacy adapter), Trailer as
     .vxl-btn--ghost --lg, "Play from beginning" as --secondary --lg, and
     every icon as .vxl-btn--icon. What remains here is what makes the
     cinematic ROW cinematic: flex behaviour, ordering, group separation,
     and guards against legacy rules that hid labels or sprinkled margins. */
  body[data-lo-detail-hero="fullscreen"].page-video_details .detailsIcon .playResumeBtn,
  body[data-lo-detail-hero="fullscreen"].page-series_details .detailsIcon .playResumeBtn {
    /* `flex: 0 0 auto` is load-bearing: the mobile rules make this CTA
       `flex: 1 1 100%` so it spans the phone's width, and that leaked to
       desktop — the button stretched across the whole row. */
    flex: 0 0 auto !important;
    width: auto;
    min-height: 0;
    /* a step more air after the CTA than between the icons; when Trailer
       follows, its own 20px margin takes over the group separation */
    margin: 0 8px 0 0 !important;
  }
  body[data-lo-detail-hero="fullscreen"] .detailsIcon .playResumeBtn > span {
    display: inline !important;
    color: inherit !important;
  }
  body[data-lo-detail-hero="fullscreen"] .detailsIcon .playResumeBtn .vxm-ico,
  body[data-lo-detail-hero="fullscreen"] .detailsIcon .playResumeBtn i {
    color: inherit !important;
    margin: 0 !important; /* templates carry mr utilities on glyphs */
  }
  /* Trailer sits second, with the CTA-pair-to-icons separation. Its ghost
     paint is .vxl-btn--ghost --lg now — one pill, one measure with Play. */
  body[data-lo-detail-hero="fullscreen"] .detailsIcon .playResumeBtn[data-stats-event="trailer_play"] {
    order: 0;
    margin-right: 20px !important;
  }
  /* Icon strip: geometry+paint are .vxl-btn--icon (hardened against the
     legacy disc rules in components.css). The glyph WRAPPER divs between the
     button and the svg are this markup's quirk, so their sizing stays here;
     no `display` on them — the components toggle two glyphs via inline
     style, and an !important display would print both. */
  body[data-lo-detail-hero="fullscreen"] .detailsIcon .rundedBtn > *,
  body[data-lo-detail-hero="fullscreen"] .detailsIcon .boxBtn > * {
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    color: inherit !important;
  }
  body[data-lo-detail-hero="fullscreen"] .detailsIcon .rundedBtn svg,
  body[data-lo-detail-hero="fullscreen"] .detailsIcon .boxBtn svg {
    width: 24px !important;
    height: 24px !important;
    stroke-width: 1.75;
  }

  /* ---- Ambient-trailer controls: pinned to the artwork's corner --------
     Mute and play/pause act on the artwork behind the text (the background
     trailer), not on the title — mixed into the action strip they read as two
     more mystery icons, and the toggle's play glyph collided with Play itself.
     They keep a thin ring (they are player controls, not actions) and sit in
     the hero's lower-right corner, where the reference pins its mute disc.
     Selector carries one class more than the bare `.rundedBtn` rule above, so
     the ring wins the tie. */
  body[data-lo-detail-hero="fullscreen"] .detailsIcon .rundedBtn.playPausePage,
  body[data-lo-detail-hero="fullscreen"] .detailsIcon .rundedBtn.playPauseModal,
  body[data-lo-detail-hero="fullscreen"] .detailsIcon .rundedBtn.iframePlayPauseSeries,
  body[data-lo-detail-hero="fullscreen"] .detailsIcon .rundedBtn.trailerPlayPauseBtn {
    order: 11;
    border: 0 !important;
    color: var(--vxl-ink-muted) !important;
  }
  /* Corner pinning, DETAIL PAGES only — the intended containing block is
     `.overlapData` (`.insidePadding` is `position: relative`), whose padding
     is the same `var(--vxl-gutter)` the inset resolves against, so the pair
     lands on the info block's opposite gutter. Bootstrap makes every column
     `position: relative`, which would capture the discs inside the 56ch hero
     column instead — the column is made static here; nothing inside it
     anchors to it on desktop (the reactions pop anchors to its own trigger).
     `top: auto` matters too: an older rule aims these discs with a `top:`
     calc, and with the height pinned a set `top` beats `bottom`. */
  body[data-lo-detail-hero="fullscreen"].page-video_details .detailsThumb .overlapData .vxm-heroCol,
  body[data-lo-detail-hero="fullscreen"].page-series_details .detailsThumb .overlapData .vxm-heroCol {
    position: static;
  }
  body[data-lo-detail-hero="fullscreen"].page-video_details .detailsIcon .rundedBtn.playPausePage,
  body[data-lo-detail-hero="fullscreen"].page-series_details .detailsIcon .rundedBtn.iframePlayPauseSeries,
  body[data-lo-detail-hero="fullscreen"].page-video_details .detailsIcon .rundedBtn.trailerPlayPauseBtn,
  body[data-lo-detail-hero="fullscreen"].page-series_details .detailsIcon .rundedBtn.trailerPlayPauseBtn {
    position: absolute;
    top: auto;
    bottom: 34px;
    z-index: 4;
  }
  body[data-lo-detail-hero="fullscreen"].page-video_details .detailsIcon .rundedBtn.trailerPlayPauseBtn,
  body[data-lo-detail-hero="fullscreen"].page-series_details .detailsIcon .rundedBtn.trailerPlayPauseBtn {
    inset-inline-end: var(--vxl-gutter, 3%);
  }
  body[data-lo-detail-hero="fullscreen"].page-video_details .detailsIcon .rundedBtn.playPausePage,
  body[data-lo-detail-hero="fullscreen"].page-series_details .detailsIcon .rundedBtn.iframePlayPauseSeries {
    inset-inline-end: calc(var(--vxl-gutter, 3%) + 56px);
  }
  /* The info MODAL can open on top of a detail page (related titles), and the
     series modal reuses the very same classes — inside a modal the pair goes
     back into the row, hugging its right edge. The margin has to be restated:
     modal.css pins it with a weaker selector than the bare `.rundedBtn`
     margin reset above. */
  body[data-lo-detail-hero="fullscreen"] .modal .detailsIcon .rundedBtn.playPausePage,
  body[data-lo-detail-hero="fullscreen"] .modal .detailsIcon .rundedBtn.iframePlayPauseSeries,
  body[data-lo-detail-hero="fullscreen"] .modal .detailsIcon .rundedBtn.trailerPlayPauseBtn {
    position: static;
  }
  body[data-lo-detail-hero="fullscreen"] .modal .detailsIcon .rundedBtn.playPauseModal,
  body[data-lo-detail-hero="fullscreen"] .modal .detailsIcon .rundedBtn.iframePlayPauseSeries {
    margin-left: auto !important;
  }
  body[data-lo-detail-hero="fullscreen"] .detailsIcon .rundedBtn.playPausePage:hover,
  body[data-lo-detail-hero="fullscreen"] .detailsIcon .rundedBtn.playPauseModal:hover,
  body[data-lo-detail-hero="fullscreen"] .detailsIcon .rundedBtn.iframePlayPauseSeries:hover,
  body[data-lo-detail-hero="fullscreen"] .detailsIcon .rundedBtn.trailerPlayPauseBtn:hover {
    border: 0 !important;
    background: transparent !important;
    color: var(--vxl-ink) !important;
  }
  /* their glyphs stay a step smaller than the social icons' */
  body[data-lo-detail-hero="fullscreen"] .detailsIcon .rundedBtn.playPausePage svg,
  body[data-lo-detail-hero="fullscreen"] .detailsIcon .rundedBtn.playPauseModal svg,
  body[data-lo-detail-hero="fullscreen"] .detailsIcon .rundedBtn.iframePlayPauseSeries svg,
  body[data-lo-detail-hero="fullscreen"] .detailsIcon .rundedBtn.trailerPlayPauseBtn svg {
    width: 20px !important;
    height: 20px !important;
  }

  /* The bare action icons already read as a set; drop their captions. */
  body[data-lo-detail-hero="fullscreen"] .detailsIcon .vxm-actLabel {
    display: none !important;
  }
  /* 12px is what "close to each other" means once the rings are gone; the
     !important is needed because the older detail-screen rule pins 34px with
     one of its own. */
  body[data-lo-detail-hero="fullscreen"].page-video_details .detailsIcon,
  body[data-lo-detail-hero="fullscreen"].page-series_details .detailsIcon {
    align-items: center;
    column-gap: 12px !important;
  }
  /* One explicit sequence: Play, Trailer, then My List / rate / share, then
     the ambient controls (11/12 above). The two detail templates emit their
     controls in different orders, and the reactions pop's DOM order is
     dislike-then-like, so every slot is numbered rather than left to DOM
     order. The `.vxm-actCol` wrappers are `display: contents` on desktop, so
     the order has to land on the hoisted child, not the wrapper. */
  body[data-lo-detail-hero="fullscreen"] .detailsIcon .playResumeBtn {
    order: -1;
  }
  body[data-lo-detail-hero="fullscreen"] .detailsIcon .vxm-actCol--list > * {
    order: 1;
  }
  /* The reactions widget's flex item is its trigger — the option buttons live
     inside the pop, which lays itself out. */
  body[data-lo-detail-hero="fullscreen"] .detailsIcon .vxr__trigger,
  body[data-lo-detail-hero="fullscreen"] .detailsIcon .vxr {
    order: 2;
  }
  body[data-lo-detail-hero="fullscreen"] .detailsIcon .vxr__pop .vxr__optBtn:nth-child(2) {
    order: 2;
  }
  body[data-lo-detail-hero="fullscreen"] .detailsIcon .vxr__pop .vxr__optBtn:nth-child(1) {
    order: 3;
  }
  body[data-lo-detail-hero="fullscreen"] .detailsIcon .vxm-actCol--share > .copyButton {
    order: 4;
  }
  /* The clipboard source div is a flex item ordered mid-row by an older rule;
     anything with `flex-basis: 100%` placed before order 11 would break the
     line and dump the ambient controls onto their own row. Send it last. */
  body[data-lo-detail-hero="fullscreen"] .detailsIcon .copyDiv {
    order: 20;
  }
  /* The synopsis on the series page runs the full page width; the movie page
     caps it. Same measure for both — a line that long is hard to track back to
     its start. */
  body[data-lo-detail-hero="fullscreen"] .detailsThumb .overlapData p {
    max-width: 62ch;
  }

  /* Meta reads as one spaced caption line, as the reference's does. */
  body[data-lo-detail-hero="fullscreen"] .vxm-info__meta,
  body[data-lo-detail-hero="fullscreen"] .detailsThumb .overlapData .vxm-meta {
    gap: 18px;
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--vxl-ink-muted);
  }

  /* "12m remaining" beside the bar. The bar is a 3px line; on its own it shows
     a proportion but never answers the only question worth asking, which is how
     much is left. */
  body[data-lo-detail-hero="fullscreen"] .detailsThumb .overlapData .vxm-info__progressRow {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 420px;
    margin: 6px 0 18px !important;
  }
  body[data-lo-detail-hero="fullscreen"] .detailsThumb .overlapData .vxm-info__progressRow .progress {
    flex: 1 1 0;
    margin: 0 !important;
  }
  body[data-lo-detail-hero="fullscreen"] .vxm-info__remaining {
    flex: 0 0 auto;
    font-size: 13px;
    color: var(--vxl-ink-muted);
    white-space: nowrap;
  }

  /* ---- Everything BELOW the hero -------------------------------------
     The page is built as a CARD: `.videoDetails` and `.card.videoDetails` both
     paint the card colour across a 1110px column. That was invisible while the
     artwork sat inside it — bleeding the artwork out exposed the panel below as
     a grey slab with hard edges, which is why the lower half looked unfinished
     next to a full-bleed top half. The page is the surface here, as it is in
     the reference; the panel has nothing left to do. */
  body[data-lo-detail-hero="fullscreen"] .videoDetails.detail,
  body[data-lo-detail-hero="fullscreen"] .card.videoDetails,
  body[data-lo-detail-hero="fullscreen"] .detailsContainer {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* Continue-watch bar: it was a stray 215px rule floating under the logo.
     Give it the text column's width, a token track, and a place in the stack —
     directly under the title, where it reads as "you are 40% through this". */
  body[data-lo-detail-hero="fullscreen"] .detailsThumb .overlapData .progress {
    width: 100% !important;
    max-width: 420px;
    height: 3px !important;
    margin: 6px 0 18px !important;
    border-radius: var(--vxl-radius-pill, 999px);
    background: var(--vxl-surface-3) !important;
    overflow: hidden;
  }

  /* ---- Related row: even, compact cards ------------------------------
     The columns came out 696 / 348 / 348 — a Bootstrap grid meant for a
     different breakpoint — so the first card was double width and the row read
     as a mistake. One even grid instead, sized like the reference's Extras row,
     and the cards lose the date and synopsis: at this size they are a wall of
     grey text under a picture that already says what the thing is. */
  /* `:has(.cardBg)` matters — the related row is not the only direct-child
     `.row` here. Without it this also caught the meta/synopsis row and turned
     its `col-lg-8` into a 210px grid cell, so the description wrapped at four
     words while two thirds of the page sat empty. Only the row that actually
     holds cards becomes a grid. */
  body[data-layout].page-video_details .videoDetails > .insidePadding > .row:has(.cardBg),
  body[data-layout].page-series_details .videoDetails > .insidePadding > .row:has(.cardBg) {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 18px;
    margin-inline: 0 !important;
  }
  body[data-layout].page-video_details .videoDetails > .insidePadding > .row:has(.cardBg) > [class*="col-"],
  body[data-layout].page-series_details .videoDetails > .insidePadding > .row:has(.cardBg) > [class*="col-"] {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  body[data-layout] .videoDetails > .insidePadding .cardBg {
    background: transparent !important;
  }
  /* Corner radius, matched to the homepage rails. A rail card is rounded by
     `.card.no-border` — 4px with `overflow: hidden` — NOT by `.ratio`, which
     is why reading `.ratio` alone suggested the rails were square. The wall
     has no `.card` layer, so the poster frame carries the same 4px and does
     the clipping; every other layer is zeroed, because with four stacked
     wrappers (card, anchor, frame, image) any one left rounded shows through
     as a mismatched corner. */
  body[data-layout] .videoDetails > .insidePadding .cardBg,
  body[data-layout] .videoDetails > .insidePadding .cardBg > a,
  body[data-layout] .videoDetails > .insidePadding .cardBg .ratio > div,
  body[data-layout] .videoDetails > .insidePadding .cardBg .ratio img {
    border-radius: 0 !important;
  }
  body[data-layout] .videoDetails > .insidePadding .cardBg .ratio {
    /* the Thumbnail corners word, like every rail tile (QA: sharp/soft never
       reached the title page's wall or its episodes) */
    border-radius: var(--vxl-card-radius, 4px) !important;
    overflow: hidden;
  }
  /* keep the title, drop the date badge and the synopsis */
  body[data-layout] .videoDetails > .insidePadding .cardBg p,
  body[data-layout] .videoDetails > .insidePadding .cardBg .badge-secondary,
  body[data-layout] .videoDetails > .insidePadding .cardBg .vid-description {
    display: none !important;
  }
  body[data-layout] .videoDetails > .insidePadding .cardBg h2 {
    margin-top: 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
  }

  /* ======================================================================
     DETAIL PAGE — HBO MAX PASS (desktop reference, movie page).

     The reference's hero column reads title → meta → Watch CTA → labeled
     icon row → synopsis → genres, with the CTA on its own line and the
     icons as small captioned columns beneath it. The template renders the
     meta (.vxc-heroMeta) and synopsis/genres (.vxc-heroBody) into the hero
     for cinematic pages (see videoDetailBlock.html cineDetail); everything
     visual is here.
     ====================================================================== */

  /* Title is ink — it inherited a muted heading colour and read as a ghost. */
  body[data-lo-detail-hero="fullscreen"] .videoLogo h1 {
    color: var(--vxl-ink) !important;
  }

  /* Meta: one quiet caption line directly under the title. */
  body[data-lo-detail-hero="fullscreen"] .detailsThumb .overlapData .vxc-heroMeta {
    align-items: center;
    gap: 4px 6px;
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--vxl-ink-muted);
    /* one vertical rhythm for the whole stack: meta→CTA equals the action
       grid's own 22px row-gap (the utility mb-3 gave 16 and the block read
       unevenly spaced) */
    margin-bottom: 22px !important;
  }

  /* CTA: a pill sized by its own label, like the hero's — the reference's
     420px column-spanning slab put ~120px of empty red on either side of a
     six-letter word, which reads as a banner, not a button. Width comes
     from content + the base rule's 28px padding; the bottom-edge resume
     bar sizes with it for free. */
  body[data-lo-detail-hero="fullscreen"].page-video_details .detailsIcon .playResumeBtn,
  body[data-lo-detail-hero="fullscreen"].page-series_details .detailsIcon .playResumeBtn {
    border-radius: var(--vxl-btn-radius, 999px) !important; /* Button corners word */
    width: auto;
    max-width: none;
    min-width: 0;
    justify-content: center !important;
  }

  /* ---- actions_style arrangement option --------------------------------
     Everything from here to the .copyDiv clip is the LABELED treatment:
     two-row grid, icon columns with captions, Trailer as a column. It is
     scoped to body[data-lo-actions-style="labeled"] (the default) so that
     "bare" simply falls back to the earlier treatment already above in
     this sheet: one flex row, tight bare icons, Trailer as a ghost pill.
     No bare-specific rules exist — absence IS the bare look. */
  /* The action area becomes a two-row grid: CTA line, then the icon row.
     Flexbox has no forced line break, so the wrap is stated as placement. */
  body[data-lo-detail-hero="fullscreen"][data-lo-actions-style="labeled"].page-video_details .detailsIcon,
  body[data-lo-detail-hero="fullscreen"][data-lo-actions-style="labeled"].page-series_details .detailsIcon {
    display: grid !important;
    /* the trailing 1fr lets the full-width CTA span the hero column instead
       of being capped at the icon tracks' summed width */
    grid-template-columns: repeat(4, max-content) 1fr;
    justify-items: center;
    /* !important for the same reason as the non-cinematic labeled row in
       components.css: bootstrap's `align-items-center` utility is in the
       row's markup as `center !important` and outranks a plain declaration,
       so the CTA sat centred against the taller labeled tracks. */
    align-items: start !important;
    column-gap: 40px !important;
    row-gap: 22px;
  }
  body[data-lo-detail-hero="fullscreen"][data-lo-actions-style="labeled"].page-video_details .detailsIcon .playResumeBtn:not([data-stats-event="trailer_play"]),
  body[data-lo-detail-hero="fullscreen"][data-lo-actions-style="labeled"].page-series_details .detailsIcon .playResumeBtn:not([data-stats-event="trailer_play"]) {
    grid-row: 1;
    grid-column: 1 / -1;
    justify-self: start;
  }
  /* Part-watched: Resume + "Play from beginning" share row 1 as a pair, the
     way the reference pairs Resume with Restart. The wrapper (not the
     buttons) is the grid item, so the two sit side by side inside it and
     split the width evenly — placing both buttons at `1 / -1` would stack
     them in the same cell. */
  body[data-lo-detail-hero="fullscreen"][data-lo-actions-style="labeled"].page-video_details .detailsIcon .vxc-ctaPair,
  body[data-lo-detail-hero="fullscreen"][data-lo-actions-style="labeled"].page-series_details .detailsIcon .vxc-ctaPair {
    display: flex !important;
    grid-row: 1;
    grid-column: 1 / -1;
    justify-self: start;
    order: -1;
    align-items: center;
    gap: 12px;
    /* content-sized, same reasoning as the solo CTA above: stretching the
       pair to split 640px put "Resume" in a 314px pill */
    width: auto;
    max-width: none;
  }
  body[data-lo-detail-hero="fullscreen"][data-lo-actions-style="labeled"].page-video_details .detailsIcon .vxc-ctaPair .playResumeBtn,
  body[data-lo-detail-hero="fullscreen"][data-lo-actions-style="labeled"].page-series_details .detailsIcon .vxc-ctaPair .playResumeBtn {
    flex: 0 0 auto !important;
    width: auto;
    min-width: 0;
    max-width: none;
    margin: 0 !important;
    /* same 30px as the solo CTA and the hero — one control, one measure */
    padding-inline: 30px !important;
  }
  /* Icon order under the CTA: My List, Rate, Trailer, Share. */
  body[data-lo-detail-hero="fullscreen"][data-lo-actions-style="labeled"].page-video_details .detailsIcon .vxm-actCol--list,
  body[data-lo-detail-hero="fullscreen"][data-lo-actions-style="labeled"].page-series_details .detailsIcon .vxm-actCol--list { order: 1; }
  body[data-lo-detail-hero="fullscreen"][data-lo-actions-style="labeled"].page-video_details .detailsIcon .vxm-actCol--rate,
  body[data-lo-detail-hero="fullscreen"][data-lo-actions-style="labeled"].page-series_details .detailsIcon .vxm-actCol--rate { order: 2; }
  body[data-lo-detail-hero="fullscreen"][data-lo-actions-style="labeled"].page-video_details .detailsIcon .playResumeBtn[data-stats-event="trailer_play"],
  body[data-lo-detail-hero="fullscreen"][data-lo-actions-style="labeled"].page-series_details .detailsIcon .playResumeBtn[data-stats-event="trailer_play"] { order: 3; }
  body[data-lo-detail-hero="fullscreen"][data-lo-actions-style="labeled"].page-video_details .detailsIcon .vxm-actCol--share,
  body[data-lo-detail-hero="fullscreen"][data-lo-actions-style="labeled"].page-series_details .detailsIcon .vxm-actCol--share { order: 4; }

  /* Labeled icon columns — glyph over a small caption, as the reference. */
  body[data-lo-detail-hero="fullscreen"][data-lo-actions-style="labeled"].page-video_details .detailsIcon .vxm-actCol,
  body[data-lo-detail-hero="fullscreen"][data-lo-actions-style="labeled"].page-series_details .detailsIcon .vxm-actCol {
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  body[data-lo-detail-hero="fullscreen"][data-lo-actions-style="labeled"].page-video_details .detailsIcon .vxm-actLabel,
  body[data-lo-detail-hero="fullscreen"][data-lo-actions-style="labeled"].page-series_details .detailsIcon .vxm-actLabel {
    display: block !important;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: var(--vxl-ink-muted);
  }
  /* Inside a column the glyph comes first, the caption second — the older
     row-ordering rules (.vxr order 2, --share > .copyButton order 4) would
     otherwise sort the caption ABOVE its icon. */
  body[data-lo-detail-hero="fullscreen"][data-lo-actions-style="labeled"].page-video_details .detailsIcon .vxm-actCol > *,
  body[data-lo-detail-hero="fullscreen"][data-lo-actions-style="labeled"].page-series_details .detailsIcon .vxm-actCol > * {
    order: 0;
  }

  /* ---- Labeled icons in the INFO MODAL ---------------------------------
     Everything above is scoped to the routed detail pages (.page-video_details
     / .page-series_details), and the shared labeled rule in components.css
     excludes cinematic — so with "Labeled icons" switched on, cinematic's
     modal still ran the bare row: .vxm-actCol stayed `display: contents`
     (the components' inline default) and the caption stayed under the
     `display: none !important` at the top of this section. The operator
     picked a setting and this one surface silently ignored it.

     The modal is a narrower stage than the page, so it does NOT get the
     page's two-row grid; it gets the same single-row treatment classic uses
     (components.css): glyph over caption, 24px rhythm, columns aligned to
     the button line. Order is restated here because the bare row orders the
     HOISTED children (list > *, .vxr, share > .copyButton) — once the
     wrappers are real boxes those orders only sort inside each column, and
     the rate column, having no order of its own, would land before My List. */
  body[data-lo-detail-hero="fullscreen"][data-lo-actions-style="labeled"] .modal .detailsIcon {
    /* !important: the row's markup carries bootstrap's `align-items-center`,
       itself `center !important` */
    align-items: flex-start !important;
    column-gap: 24px !important;
  }
  body[data-lo-detail-hero="fullscreen"][data-lo-actions-style="labeled"] .modal .detailsIcon > .playResumeBtn {
    margin-right: 0 !important;
  }
  body[data-lo-detail-hero="fullscreen"][data-lo-actions-style="labeled"] .modal .detailsIcon .vxm-actCol {
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  body[data-lo-detail-hero="fullscreen"][data-lo-actions-style="labeled"] .modal .detailsIcon .vxm-actCol > * {
    order: 0;
    margin: 0 !important;
  }
  body[data-lo-detail-hero="fullscreen"][data-lo-actions-style="labeled"] .modal .detailsIcon .vxm-actLabel {
    display: block !important;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: var(--vxl-ink-muted);
  }
  body[data-lo-detail-hero="fullscreen"][data-lo-actions-style="labeled"] .modal .detailsIcon .vxm-actCol--list  { order: 1; }
  body[data-lo-detail-hero="fullscreen"][data-lo-actions-style="labeled"] .modal .detailsIcon .vxm-actCol--rate  { order: 2; }
  body[data-lo-detail-hero="fullscreen"][data-lo-actions-style="labeled"] .modal .detailsIcon .vxm-actCol--share { order: 3; }

  /* Trailer joins the icon row as a labeled column (it was a ghost pill).
     The attribute selector outweighs the CTA rule above, so every slab
     property has to be restated. */
  body[data-lo-detail-hero="fullscreen"][data-lo-actions-style="labeled"].page-video_details .detailsIcon .playResumeBtn[data-stats-event="trailer_play"],
  body[data-lo-detail-hero="fullscreen"][data-lo-actions-style="labeled"].page-series_details .detailsIcon .playResumeBtn[data-stats-event="trailer_play"] {
    flex-direction: column;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    gap: 6px;
    font-size: 12px !important;
    font-weight: 600;
    color: var(--vxl-ink) !important;
  }
  /* 10px vertical margins seat the 24px glyph in the same 44px optical box
     as the circled icons beside it, so the caption baselines line up. */
  body[data-lo-detail-hero="fullscreen"][data-lo-actions-style="labeled"].page-video_details .detailsIcon .playResumeBtn[data-stats-event="trailer_play"] .vxm-ico,
  body[data-lo-detail-hero="fullscreen"][data-lo-actions-style="labeled"].page-video_details .detailsIcon .playResumeBtn[data-stats-event="trailer_play"] svg,
  body[data-lo-detail-hero="fullscreen"][data-lo-actions-style="labeled"].page-video_details .detailsIcon .playResumeBtn[data-stats-event="trailer_play"] i,
  body[data-lo-detail-hero="fullscreen"][data-lo-actions-style="labeled"].page-series_details .detailsIcon .playResumeBtn[data-stats-event="trailer_play"] .vxm-ico,
  body[data-lo-detail-hero="fullscreen"][data-lo-actions-style="labeled"].page-series_details .detailsIcon .playResumeBtn[data-stats-event="trailer_play"] svg,
  body[data-lo-detail-hero="fullscreen"][data-lo-actions-style="labeled"].page-series_details .detailsIcon .playResumeBtn[data-stats-event="trailer_play"] i {
    width: 24px !important;
    height: 24px !important;
    font-size: 24px !important;
    margin: 10px 0 !important;
  }
  body[data-lo-detail-hero="fullscreen"][data-lo-actions-style="labeled"].page-video_details .detailsIcon .playResumeBtn[data-stats-event="trailer_play"] > span,
  body[data-lo-detail-hero="fullscreen"][data-lo-actions-style="labeled"].page-series_details .detailsIcon .playResumeBtn[data-stats-event="trailer_play"] > span {
    color: var(--vxl-ink-muted) !important;
  }
  body[data-lo-detail-hero="fullscreen"][data-lo-actions-style="labeled"].page-video_details .detailsIcon .playResumeBtn[data-stats-event="trailer_play"]:hover > span,
  body[data-lo-detail-hero="fullscreen"][data-lo-actions-style="labeled"].page-series_details .detailsIcon .playResumeBtn[data-stats-event="trailer_play"]:hover > span {
    color: var(--vxl-ink) !important;
  }

  /* The related section starts exactly at the hero's bottom edge, and the
     unclipped 16:9 artwork spills ~50px past that line under the melt — the
     dimmed spill painted over the heading's top half. Clearance puts the
     heading below the melt zone. */
  body[data-lo-detail-hero="fullscreen"].page-video_details .card.videoDetails > .insidePadding,
  body[data-lo-detail-hero="fullscreen"].page-series_details .card.videoDetails > .insidePadding {
    padding-top: 64px;
  }

  /* The clipboard source must not occupy a grid cell — a zero-height item
     still owns a row, and the row gap paints as dead space. */
  body[data-lo-detail-hero="fullscreen"][data-lo-actions-style="labeled"].page-video_details .detailsIcon .copyDiv,
  body[data-lo-detail-hero="fullscreen"][data-lo-actions-style="labeled"].page-series_details .detailsIcon .copyDiv {
    position: absolute;
    width: 1px;
    height: 1px !important;
    overflow: hidden;
    clip-path: inset(50%);
  }

  /* Ambient trailer discs stay on the artwork's corner. They anchor to
     .overlapData, whose BOTTOM has moved down (the hero now carries the
     synopsis), so bottom-offsets drifted off the picture. Measured from the
     top instead: the block is pulled up by --vxc-desktop-pull, so the
     artwork's bottom edge is that far below the block's top — minus the
     44px disc and its 34px inset. Same variable as the pull, so retuning
     the lift cannot strand the discs again. */
  body[data-lo-detail-hero="fullscreen"].page-video_details .detailsIcon .rundedBtn.playPausePage,
  body[data-lo-detail-hero="fullscreen"].page-video_details .detailsIcon .rundedBtn.trailerPlayPauseBtn,
  body[data-lo-detail-hero="fullscreen"].page-series_details .detailsIcon .rundedBtn.iframePlayPauseSeries,
  body[data-lo-detail-hero="fullscreen"].page-series_details .detailsIcon .rundedBtn.trailerPlayPauseBtn {
    top: calc(var(--vxc-desktop-pull, 190px) - 78px);
    bottom: auto;
  }

  /* Synopsis + genre line under the actions — the reference gives the
     description real presence: it fills the hero column (about half the
     screen) at reading size, two lines, with the genre line quiet below. */
  body[data-lo-detail-hero="fullscreen"] .vxc-heroBody {
    max-width: 100%;
    margin-top: 26px;
  }
  /* Heavy selector on purpose: the shared synopsis-measure rule
     (.detailsThumb .overlapData p, 62ch) would otherwise cap this at a
     strip and defeat the half-screen presence. */
  body[data-lo-detail-hero="fullscreen"] .detailsThumb .overlapData p.vxc-heroDesc {
    max-width: none;
    margin: 0 0 14px;
    font-size: clamp(17px, 1.15vw, 22px);
    line-height: 1.5;
    color: var(--vxl-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* Genres are spans separated by air, not commas ("Action  Fantasy & Sci-Fi"). */
  body[data-layout] .vxc-heroGenres {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 26px;
    margin: 0;
    font-size: 14px;
    letter-spacing: 0.03em;
    color: var(--vxl-ink-muted);
  }

  /* Related titles: the reference is a six-across portrait poster wall with
     no captions — the poster carries the title (same call as the search
     wall; the h2 stays in the DOM for screen readers). */
  body[data-layout].page-video_details .videoDetails > .insidePadding > .row:has(.cardBg),
  body[data-layout].page-series_details .videoDetails > .insidePadding > .row:has(.cardBg) {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px 12px;
  }
  body[data-layout].page-video_details .videoDetails > .insidePadding .cardBg h2,
  body[data-layout].page-series_details .videoDetails > .insidePadding .cardBg h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    margin: 0 !important;
  }
  body[data-layout].page-video_details .videoDetails > .insidePadding .cardBg .card-img-overlay,
  body[data-layout].page-series_details .videoDetails > .insidePadding .cardBg .card-img-overlay {
    display: none !important;
  }
  /* Every PORTRAIT cell keeps the RAILS' poster shape — 9:16, the 177.78%
     padding hack `.ratio.portrait` uses in cards.css — so a title is
     identical here and on the homepage. (This used to force 2:3, which made
     the wall's cards visibly shorter than the same card in a rail.) Scoped
     to `.portrait` since 26.443.x: the detail blocks emit that class only
     when display_thumb_type is portrait, so a landscape tenant's wall stays
     .ratio-16x9 (owner report). A title with no portrait artwork falls back
     to a landscape still; the frame crops it with object-fit below. */
  body[data-layout].page-video_details .videoDetails > .insidePadding .cardBg .ratio.portrait,
  body[data-layout].page-series_details .videoDetails > .insidePadding .cardBg .ratio.portrait {
    aspect-ratio: auto !important;
    height: 0 !important;
    padding: 0 0 177.78% !important;
  }
  body[data-layout].page-video_details .videoDetails > .insidePadding .cardBg .ratio img,
  body[data-layout].page-series_details .videoDetails > .insidePadding .cardBg .ratio img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* ---- Reference pass 2 (HBO Max, Two Towers screenshots) --------------- */

  /* Meta is plain quiet text — "13+ 3h 2002" — not outlined chips. */
  body[data-lo-detail-hero="fullscreen"] .vxc-heroMeta .badge-secondary-outline {
    border: 0 !important;
    padding: 0 !important;
    background: none !important;
    font-weight: 400;
    color: inherit;
  }

  /* The detail page runs (nearly) full-bleed like the reference: the grid and
     tabs span the viewport minus the 48px inside gutter, instead of floating
     in a centered column. The hero artwork's own bleed is measured from the
     container, so it stays edge-to-edge either way. !important because the
     base theme caps .detailsContainer at 1440px with one of its own; the
     modal and every other layout keep that cap. */
  body[data-layout].page-video_details .container.vxm-page,
  body[data-layout].page-video_details .detailsContainer,
  body[data-layout].page-series_details .container.vxm-page,
  body[data-layout].page-series_details .detailsContainer {
    max-width: 100% !important;
  }

  /* Poster wall: the SAME cards as the homepage rails, so a title is the
     same size wherever it appears. The rails run 8 portrait cards at this
     width on cinematic (base 9, less the layout's -1 density delta) at a
     10px gap — GAPS.cinematic in _layout_resolver.html and the swiper's
     own `spaceBetween` — so the grid mirrors both. Column counts follow the
     rails' breakpoints further down; the row gap is a touch larger because
     rows need separating where a single rail does not. */
  body[data-layout].page-video_details .videoDetails > .insidePadding > .row:has(.cardBg),
  body[data-layout].page-series_details .videoDetails > .insidePadding > .row:has(.cardBg) {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 18px var(--vxl-card-gap, 10px);
    margin-inline: 0 !important;
  }

  /* The rails step down at exactly these widths (new-swiper.html
     breakpoints, minus the cinematic delta): 9-1=8 from 1450, 8-1=7 from
     1200, 7-1=6 from 992. The wall steps with them so the two never show
     different card sizes on the same screen. */
  @media (max-width: 1449.98px) {
    body[data-layout].page-video_details .videoDetails > .insidePadding > .row:has(.cardBg),
    body[data-layout].page-series_details .videoDetails > .insidePadding > .row:has(.cardBg) {
      grid-template-columns: repeat(7, minmax(0, 1fr));
    }
  }
  @media (max-width: 1199.98px) {
    body[data-layout].page-video_details .videoDetails > .insidePadding > .row:has(.cardBg),
    body[data-layout].page-series_details .videoDetails > .insidePadding > .row:has(.cardBg) {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }

  /* ---- Landscape wall (display_thumb_type = landscape) ------------------
     Everything above sizes the PORTRAIT wall (poster-rail counts minus the
     cinematic delta). Since the detail blocks emit `.portrait` only when
     the tenant's default thumbnail shape is portrait (owner report), a
     landscape wall mirrors the LANDSCAPE rails instead — 7/6/5 minus the
     delta = 6/5/4 across the same steps — and gets its caption back: a
     16:9 still, unlike a poster, does not carry the title in the artwork.

     Tracks are `minmax(0, 1fr)`, NOT `1fr`. A bare `1fr` is
     `minmax(auto, 1fr)`, so no track may shrink below its content's
     min-content width — and the caption below carries `white-space:
     nowrap`, whose min-content width is the WHOLE untruncated title. The
     wall then sized every column to its own title: 506px for "The
     Neighborhood - S07E19 - …" beside 168px for "Thumbs Testing", cards
     at six different widths (owner report). Zeroing the floor lets the
     ellipsis do its job. The portrait counts above carry it too — they
     hide their caption today, but the same trap is one edit away. */
  body[data-layout].page-video_details .videoDetails > .insidePadding > .row:has(.ratio-16x9),
  body[data-layout].page-series_details .videoDetails > .insidePadding > .row:has(.ratio-16x9) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  @media (max-width: 1449.98px) {
    body[data-layout].page-video_details .videoDetails > .insidePadding > .row:has(.ratio-16x9),
    body[data-layout].page-series_details .videoDetails > .insidePadding > .row:has(.ratio-16x9) {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }
  @media (max-width: 1199.98px) {
    body[data-layout].page-video_details .videoDetails > .insidePadding > .row:has(.ratio-16x9),
    body[data-layout].page-series_details .videoDetails > .insidePadding > .row:has(.ratio-16x9) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  body[data-layout].page-video_details .videoDetails > .insidePadding .cardBg:has(.ratio-16x9) h2,
  body[data-layout].page-series_details .videoDetails > .insidePadding .cardBg:has(.ratio-16x9) h2 {
    position: static;
    width: auto;
    height: auto;
    clip-path: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 8px 2px 0 !important;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--vxl-ink);
  }

  /* ---- Episodes: the vertical list ------------------------------------
     26.309.1 ran the episodes as one horizontally scrolling row of cards.
     A row that scrolls needs a scrollbar, and on a mouse-and-Windows
     machine that is a full-height grey bar under the season's stills; a
     season of twenty episodes also hid fourteen of them behind a scroll
     nobody discovers. Retired (owner report, 26.473.0). The episodes read
     top to bottom again — number, a 16:9 still with a play affordance,
     then title (duration right-aligned) over a two-line synopsis, every
     row a hover surface and a hairline between rows.

     The wrapper stays display:contents (see the style block in
     seriesDetailBlock.html), so the .vxm-ep rows are direct items of the
     .vxm-epList row and stack full-width on their own. The markup is three
     levels of Bootstrap columns around a card that stacks vertically, so
     the layers in between are flattened with display:contents and the row
     is laid out as one grid — the phone block above does the same at a
     smaller scale, and for the same reason. */
  body[data-layout].page-series_details .vxm-epList .vxm-ep {
    display: grid;
    grid-template-columns: 40px 268px minmax(0, 1fr);
    grid-template-areas:
      "num thumb head"
      "num thumb desc";
    /* `1fr` on the second track pins the synopsis directly under the title
       row; with two auto rows the still (spanning both) donates its spare
       height to the first track and the synopsis floats mid-row. */
    grid-template-rows: auto 1fr;
    column-gap: 24px;
    row-gap: 6px;
    align-items: start;
    /* the surface bleeds 20px past the gutter on both sides, so the still
       and the text keep the page's left edge while the hover reads as a
       card around the row rather than a strip clipped to it */
    width: calc(100% + 40px) !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    margin: 0 -20px !important;
    padding: 18px 20px !important;
    border-radius: var(--vxl-radius-md, 8px);
    transition: background-color var(--vxl-dur-1) var(--vxl-ease);
  }
  body[data-layout].page-series_details .vxm-epList .vxm-ep:hover {
    background-color: var(--vxl-surface-1);
  }
  /* Hairline between rows, on the row itself — the markup's own <hr> is a
     child of the grid, so it would have to become a track of its own and
     then sit INSIDE the hover surface, splitting it. */
  body[data-layout].page-series_details .vxm-epList .vxm-ep + .vxm-ep {
    position: relative;
  }
  body[data-layout].page-series_details .vxm-epList .vxm-ep + .vxm-ep::before {
    content: "";
    position: absolute;
    top: 0;
    left: 20px;
    right: 20px;
    height: 1px;
    background: var(--vxl-line);
  }
  body[data-layout].page-series_details .vxm-epList .vxm-ep > .row,
  body[data-layout].page-series_details .vxm-epList .vxm-ep > .row > [class*="col-"],
  body[data-layout].page-series_details .vxm-epList .vxm-ep .listMenu,
  body[data-layout].page-series_details .vxm-epList .vxm-ep .listMenu > div,
  body[data-layout].page-series_details .vxm-epList .vxm-ep .listMenu > div > a {
    display: contents !important;
  }
  body[data-layout].page-series_details .vxm-epList .vxm-ep hr,
  body[data-layout].page-series_details .vxm-epList .vxm-ep > div:last-child:not(.row) {
    display: none !important;
  }
  /* the number is a real cell, centred on the still's height */
  body[data-layout].page-series_details .vxm-epList .vxm-ep > .row > .col-1 {
    display: block !important;
    grid-area: num;
    align-self: center;
    /* Bootstrap's 8.333% max-width would be 3px of a 40px track */
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
    text-align: start !important;
  }
  body[data-layout].page-series_details .vxm-epList .vxm-ep .seriesIndex {
    font-size: 22px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--vxl-ink-faint);
    line-height: 1;
  }
  body[data-layout].page-series_details .vxm-epList .vxm-ep .listMenu > a.img {
    grid-area: thumb;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    border-radius: var(--vxl-card-radius, 4px); /* Thumbnail corners word */
    overflow: hidden;
    /* vodlix.css gives .listMenu a `flex: 0 0 auto`; harmless here, but the
       anchor must not become a flex column of its own */
    position: relative;
  }
  body[data-layout].page-series_details .vxm-epList .vxm-ep .listMenu > a.img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    transition: transform var(--vxl-dur-2) var(--vxl-ease);
  }
  body[data-layout].page-series_details .vxm-epList .vxm-ep:hover .listMenu > a.img img {
    transform: scale(1.04);
  }
  /* one play affordance: the CSS triangle; the card's accent play chip
     would be a second, louder one */
  body[data-layout].page-series_details .vxm-epList .vxm-ep .listMenu > a.img::after {
    content: "";
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 3;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 0 8px 14px;
    border-color: transparent transparent transparent var(--vxl-ink);
    filter: drop-shadow(0 1px 2px var(--vxl-scrim));
  }
  body[data-layout].page-series_details .vxm-epList .vxm-ep .listMenu .playBtn {
    display: none !important;
  }
  body[data-layout].page-series_details .vxm-epList .vxm-ep .listMenu > div > div:first-child {
    grid-area: head;
    display: flex !important;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 4px 0 0 !important;
    padding: 0 !important;
  }
  body[data-layout].page-series_details .vxm-epList .vxm-ep .listMenu h2 {
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.35;
    color: var(--vxl-ink);
  }
  /* duration: quiet, never wraps, never pushed off the text column */
  body[data-layout].page-series_details .vxm-epList .vxm-ep .listMenu > div > div:first-child > span {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 500;
    color: var(--vxl-ink-faint);
    font-variant-numeric: tabular-nums;
  }
  body[data-layout].page-series_details .vxm-epList .vxm-ep .listMenu .vid-description {
    grid-area: desc;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 !important;
    max-width: 72ch;
    font-size: 14px;
    line-height: 1.5;
    color: var(--vxl-ink-muted) !important;
  }
  /* the list itself: no trailing gap of its own — the next section's top
     margin owns the distance to it (see below) */
  body[data-layout].page-series_details .vxm-epList {
    margin-bottom: 0 !important;
  }
  body[data-layout].page-series_details .vxm-epList .loadMoreIcon {
    flex: 0 0 100%;
    max-width: 100%;
    padding-top: 20px;
  }

  /* ---- Sections keep their distance --------------------------------------
     "More Like This" sat 16px under the last episode — the two sections read
     as one run of content. A section break is a beat, not a line break.
     Series page only: on the movie page the heading follows the hero block,
     whose own bottom padding already carries the distance. */
  body[data-layout].page-series_details .videoDetails > .insidePadding > h2.h5 {
    margin-top: 56px !important;
    margin-bottom: 22px !important;
  }
  /* compact "Season 1 ▾" picker, like the reference — not a full-width bar,
     and seated LEFT under the heading: its Bootstrap column would otherwise
     keep its 4/12 width and park the picker at the right edge. */
  body[data-layout].page-series_details .vxm-epList > [class*="col"]:not(.vxm-ep) {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* ==========================================================================
   SEASON PICKER — the episodes section's season control.

   Replaces the native <select> on the cinematic detail page (see
   .vxc-seasonPick in seriesDetailBlock.html; every other surface still
   renders the <select>, which the rules further up this file style).

   One shape on both: a list anchored under the field and sized to it —
   the panel is exactly as wide as the closed "Season 1" field above it, as
   the reference app draws it, on phone and desktop alike. Only the metrics
   differ between the two (row height, radius, how far it may scroll).

   Rows carry the episode count under the season name, which the OS popup
   could never show: the choice is "Season 2 · 8 Episodes", not "Season 2".
   ========================================================================== */
body[data-layout] .vxc-seasonPick {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

/* ---- The closed field ---------------------------------------------------- */
body[data-layout] .vxc-seasonPick__field {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 180px;
  max-width: 100%;
  height: 44px;
  margin: 0;
  padding: 0 14px 0 16px;
  border: 1px solid var(--vxl-line);
  /* follows the Button corners word like every other labeled control;
     the open panel below keeps its own radius */
  border-radius: var(--vxl-btn-radius, var(--vxl-radius-pill));
  background: var(--vxl-surface-2);
  color: var(--vxl-ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color var(--vxl-dur-2, 0.25s) var(--vxl-ease),
    border-color var(--vxl-dur-2, 0.25s) var(--vxl-ease);
}
body[data-layout] .vxc-seasonPick__field:hover,
body[data-layout] .vxc-seasonPick.is-open .vxc-seasonPick__field {
  border-color: var(--vxl-ink-faint);
  background: var(--vxl-surface-3);
}
body[data-layout] .vxc-seasonPick__field:focus {
  outline: none;
}
body[data-layout] .vxc-seasonPick__field:focus-visible {
  outline: 2px solid var(--vxl-ink);
  outline-offset: 2px;
}
/* The label is the shrinkable part — a long tenant-authored season name
   ellipsises rather than pushing the caret out of the field. */
body[data-layout] .vxc-seasonPick__value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: start;
}
body[data-layout] .vxc-seasonPick__caret {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  opacity: 0.7;
  transition: transform var(--vxl-dur-2, 0.25s) var(--vxl-ease, ease);
}
body[data-layout] .vxc-seasonPick.is-open .vxc-seasonPick__caret {
  transform: rotate(180deg);
  opacity: 1;
}

/* ---- Scrim ---------------------------------------------------------------
   Desktop: an invisible full-viewport click target, so a click anywhere off
   the menu closes it without a document-level listener. Phones: the sheet's
   dimmer (see the ≤991.98px block). */
body[data-layout] .vxc-seasonPick__scrim {
  position: fixed;
  inset: 0;
  z-index: 2040;
  background: transparent;
}

/* ---- The list ------------------------------------------------------------ */
body[data-layout] .vxc-seasonPick__menu {
  position: absolute;
  z-index: 2050;
  top: calc(100% + 8px);
  inset-inline-start: 0;
  /* Exactly the field's width, on every screen: the wrapper is inline-block
     so it is sized by the button, and the panel takes 100% of it. Open and
     closed are one column — the two can never drift apart. */
  width: 100%;
  max-height: 300px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  border: 1px solid var(--vxl-line);
  border-radius: 12px;
  background: var(--vxl-scrim-strong);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: var(--vxl-shadow-3, 0 20px 48px rgba(0, 0, 0, 0.46));
  scrollbar-width: thin;
  animation: vxcSeasonPop 0.16s var(--vxl-ease, ease) both;
}
@keyframes vxcSeasonPop {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
body[data-layout] .vxc-seasonPick__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
body[data-layout] .vxc-seasonPick__opt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--vxl-ink-muted);
  text-align: start;
  cursor: pointer;
  transition:
    background-color var(--vxl-dur-1, 0.15s) var(--vxl-ease),
    color var(--vxl-dur-1, 0.15s) var(--vxl-ease);
}
body[data-layout] .vxc-seasonPick__opt:hover,
body[data-layout] .vxc-seasonPick__opt:focus-visible {
  outline: none;
  background: var(--vxl-surface-2);
  color: var(--vxl-ink);
}
body[data-layout] .vxc-seasonPick__opt.is-active {
  background: var(--vxl-surface-3);
  color: var(--vxl-ink);
}
body[data-layout] .vxc-seasonPick__optText {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
body[data-layout] .vxc-seasonPick__optName {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
}
body[data-layout] .vxc-seasonPick__opt.is-active .vxc-seasonPick__optName {
  font-weight: 700;
}
body[data-layout] .vxc-seasonPick__optMeta {
  color: var(--vxl-ink-faint);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
}
/* The tick holds its cell whether or not it is showing, so the names of the
   selected and unselected rows share one left edge. */
body[data-layout] .vxc-seasonPick__tick {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--vxl-accent, var(--vod-primary, #e50914));
  opacity: 0;
}
body[data-layout] .vxc-seasonPick__opt.is-active .vxc-seasonPick__tick {
  opacity: 1;
}

/* ---- Phones: the same dropdown, one step tighter ------------------------
   Pinned to the field's width (the base rule) and to its leading edge, so
   the open panel and the closed field are one column — the shape the
   reference app uses. Nothing here is allowed to widen the panel. */
@media (max-width: 991.98px) {
  body[data-layout] .vxc-seasonPick__field {
    height: 42px;
    min-width: 168px;
    font-size: 14px;
  }
  body[data-layout] .vxc-seasonPick__menu {
    top: calc(100% + 6px);
    /* enough for ~5 rows before it scrolls, so the panel never swallows
       the episode row behind it */
    max-height: 252px;
    padding: 5px;
    border-radius: 10px;
  }
  /* 46px rows — a real touch target, which the 32px pill never was */
  body[data-layout] .vxc-seasonPick__opt {
    min-height: 46px;
    gap: 8px;
    padding: 8px 10px;
  }
  body[data-layout] .vxc-seasonPick__optName {
    font-size: 14px;
  }
  body[data-layout] .vxc-seasonPick__optMeta {
    font-size: 11.5px;
  }
  body[data-layout] .vxc-seasonPick__tick {
    width: 16px;
    height: 16px;
  }
}

/* ---- Desktop: a touch more room ------------------------------------------ */
@media (min-width: 992px) {
  body[data-layout] .vxc-seasonPick__field {
    min-width: 200px;
    height: 46px;
    padding: 0 16px 0 18px;
  }
  /* Width comes from the base rule — the panel is the field, exactly, on
     every screen. It was briefly allowed to grow to its content here, and
     the result read as a loose slab hanging past the field's right edge
     rather than as one column. Desktop only gets more height. */
  body[data-layout] .vxc-seasonPick__menu {
    max-height: 340px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-layout] .vxc-seasonPick__menu,
  body[data-layout] .vxc-seasonPick__scrim {
    animation: none !important;
  }
  body[data-layout] .vxc-seasonPick__caret {
    transition: none !important;
  }
}

/* ==========================================================================
   detail_hero="banner" — the home banner's frame on the title page (26.495.0).
   Builds on the dissolve base above (every dissolve rule matches banner too,
   through body:is()): what changes is the frame — inset on the page gutter,
   rounded like the billboard, capped at the billboard's height with the
   artwork cropped to cover — and the header keeps the page's own top beat
   (`.contentHolder`'s pt-5 mt-5), so the frame sits UNDER the header the way
   the home banner does. The title still sits on the frame's foot over the
   dissolve, which now ends inside the rounded frame: the bottom of the
   artwork blends into the page before the corner, so it reads as one card.
   ========================================================================== */
@media (min-width: 992px) {
  body[data-lo-detail-hero="banner"] .vxm.vxm-page .detailsThumb {
    margin-inline: var(--vxl-gutter, 3%);
    border-radius: var(--vxl-radius-lg, 12px);
    overflow: hidden;
  }
  /* the billboard's cap: 66vh, or 21:9 of the inset width — a height, for
     the padding reason given on the base rule above */
  body[data-lo-detail-hero="banner"] .vxm.vxm-page .detailsThumb .ratio-16x9 {
    height: min(66vh, 40vw);
    min-height: 360px;
  }
  body[data-lo-detail-hero="banner"] .vxm.vxm-page .detailsThumb img.imgFull {
    /* faces sit in the upper third of most key art; a trailer stays centred
       so a baked-in letterbox is cropped evenly from both ends */
    object-position: center 35%;
  }
  /* the frame sits under the header with the home banner's beat: 84px to
     the frame's top, 16px under the 68px bar (editorpick.css mirrors the
     same number on #items-list .featureSlider). pt-5 mt-5 gave 96. */
  body[data-lo-detail-hero="banner"].page-video_details .contentHolder,
  body[data-lo-detail-hero="banner"].page-series_details .contentHolder {
    padding-top: 84px !important;
    margin-top: 0 !important;
  }
  /* the melt into the page, confined to the frame's lower half so the
     artwork stays a picture; the flat dim stays for ambient trailers */
  body[data-lo-detail-hero="banner"] .vxm.vxm-page .detailsThumb::after {
    background:
      linear-gradient(
        to top,
        var(--vod-body-back-color, #141414) 0%,
        color-mix(in srgb, var(--vod-body-back-color, #141414) 72%, transparent) 18%,
        color-mix(in srgb, var(--vod-body-back-color, #141414) 30%, transparent) 40%,
        transparent 58%
      ),
      color-mix(in srgb, var(--vod-body-back-color, #141414) 10%, transparent);
  }
  /* the copy breathes inside the frame, the billboard's 40px */
  body[data-lo-detail-hero="banner"] .vxm.vxm-page .overlapData {
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 32px;
  }
  /* the row under the frame keeps a beat from it */
  body[data-lo-detail-hero="banner"] .vxm.vxm-page .card.videoDetails > .insidePadding {
    padding-top: 24px;
  }
}