/* =============================================================================
   Desktop full-page media profile (FPMP) — horizontal desktop layout (v11.316)
   File: assets/public/css/21-desktop-fpmp-fix.css   (loads LAST → wins cascade)

   DESKTOP ONLY — gated to
     @media (min-width:701px) and (hover:hover) and (pointer:fine)
            and (not (display-mode:standalone))
   so the iOS app (standalone) and phone widths are NEVER touched.

   Layout (per request):
     • Wider, centred ~680px panel.
     • Trailer is just its own inline 16:9 banner at the top (NOT the app's
       phone "trailer-as-hero-background" effect); YouTube native controls work.
     • Horizontal hero: poster on the LEFT, title + score + synopsis + genres +
       where-to-watch on the RIGHT.
     • The "Episode & Season Details" row (seasons entry) is restyled so its
       text is visible and its chevron is normal-sized — it was rendering with
       invisible text + a giant chevron on desktop (mobile-only styling), which
       looked like blank empty space between Where-to-Watch and the stats.
     • Top-right controls (Add / Share / Volume) are consistent 40px circles.

   Scope: .discover-standard-title-page (movie / tv / anime).
   ========================================================================== */
@media (min-width: 701px) and (hover: hover) and (pointer: fine) and (not (display-mode: standalone)) {

  /* Opaque backdrop. */
  .discover-media-profile-overlay { background: #08070f !important; }

  /* v11.329: Person (actor/actress) profile — desktop fix.

     Root causes of "absolutely nothing happens" when clicking a cast card:
     1. The `shelfdDiscoverPersonSlideIn` animation starts from
        translate3d(100%,0,0). The overlay has transform:translateY(0) (its
        open state), which creates a new containing block for position:fixed —
        so "100%" was relative to the overlay, not the viewport. The section
        slid in correctly on mobile but our previous position:fixed attempt
        broke the animation's containing block calculation on desktop.
     2. will-change:transform on .discover-media-page (file 06) promoted the
        person section to its own layer, which interacted badly with our
        position override.
     3. max-width:760px; margin:0 auto from .discover-media-page was constraining
        the section's effective width even when position was changed.

     Fix: keep position:absolute (matching the JS inline style so the
     containing block is the overlay as intended), zero all transforms/animations
     immediately, set explicit full-overlay dimensions with max-width:none, and
     disable will-change so no extra containing block is created. */
  .discover-media-profile-overlay > .discover-person-active-section,
  .discover-media-profile-overlay > .discover-person-page:not(.discover-back-underlay) {
    position: absolute !important;
    inset: 0 !important;
    z-index: 3200 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    background-color: #0E0E0E !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    will-change: auto !important;
    /* Kill the slide-in animation that starts from translate3d(100%,0,0) —
       on desktop the animation fires but the translate is resolved relative
       to the overlay's transform context and the section stays off-screen. */
    animation: none !important;
    transform: none !important;
  }
  /* Content inside: centred column matching the main FPMP width. */
  .discover-media-profile-overlay > .discover-person-active-section .discover-media-hero,
  .discover-media-profile-overlay > .discover-person-active-section .discover-media-body,
  .discover-media-profile-overlay > .discover-person-page:not(.discover-back-underlay) .discover-media-hero,
  .discover-media-profile-overlay > .discover-person-page:not(.discover-back-underlay) .discover-media-body {
    max-width: 1040px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  /* ============================================================================
     v11.336 — Actor / actress profile hero (desktop).

     The desktop person profile was rendering as a BLACK SCREEN: css/16 styles
     the desktop-cinema BODY panels but never restyles the hero, so the hero
     fell back to the mobile full-bleed photo hero — a tall dark block (≈100vh)
     with the backdrop photo. On desktop that backdrop often doesn't paint, so
     you saw a black hero with the real content (bio facts, filmography) pushed
     entirely below the fold.

     Fix: convert the person hero into the same clean horizontal layout as the
     main FPMP — poster on the LEFT, name + biography on the RIGHT — with a
     normal auto height so the body sits right beneath it.
     ============================================================================ */
  .discover-media-profile-overlay > .discover-person-active-section .discover-person-hero,
  .discover-media-profile-overlay > .discover-person-page:not(.discover-back-underlay) .discover-person-hero {
    background-image: none !important;
    background-color: transparent !important;
    min-height: 0 !important;
    height: auto !important;
    display: block !important;
    padding-top: 8px !important;
    padding-bottom: 10px !important;
  }
  .discover-media-profile-overlay > .discover-person-active-section .discover-person-hero .discover-media-hero-shade,
  .discover-media-profile-overlay > .discover-person-page:not(.discover-back-underlay) .discover-person-hero .discover-media-hero-shade {
    display: none !important;
  }
  .discover-media-profile-overlay > .discover-person-active-section .discover-person-hero .discover-media-hero-content,
  .discover-media-profile-overlay > .discover-person-page:not(.discover-back-underlay) .discover-person-hero .discover-media-hero-content {
    position: relative !important;
    display: block !important;
    inset: auto !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    padding: 0 !important;
    max-width: none !important;
  }
  .discover-media-profile-overlay > .discover-person-active-section .discover-person-hero .discover-media-hero-top,
  .discover-media-profile-overlay > .discover-person-page:not(.discover-back-underlay) .discover-person-hero .discover-media-hero-top {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 26px !important;
    text-align: left !important;
  }
  /* Poster — normal 200px portrait on the left. */
  .discover-media-profile-overlay > .discover-person-active-section .discover-person-poster,
  .discover-media-profile-overlay > .discover-person-page:not(.discover-back-underlay) .discover-person-poster {
    position: relative !important;
    flex: 0 0 200px !important;
    width: 200px !important;
    min-width: 200px !important;
    height: auto !important;
    aspect-ratio: 2 / 3 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    margin: 0 !important;
    background: rgba(255, 255, 255, 0.06) !important;
  }
  .discover-media-profile-overlay > .discover-person-active-section .discover-person-poster img,
  .discover-media-profile-overlay > .discover-person-page:not(.discover-back-underlay) .discover-person-poster img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center top !important;
    opacity: 1 !important;
  }
  /* Name + meta + bio on the right. */
  .discover-media-profile-overlay > .discover-person-active-section .discover-person-hero .discover-media-hero-main,
  .discover-media-profile-overlay > .discover-person-page:not(.discover-back-underlay) .discover-person-hero .discover-media-hero-main {
    flex: 1 1 auto !important;
    text-align: left !important;
    align-items: flex-start !important;
  }
  .discover-media-profile-overlay > .discover-person-active-section .discover-person-hero h2,
  .discover-media-profile-overlay > .discover-person-page:not(.discover-back-underlay) .discover-person-hero h2 {
    text-align: left !important;
    margin: 0 0 6px !important;
    font-size: 34px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    max-width: none !important;
  }
  .discover-media-profile-overlay > .discover-person-active-section .discover-person-hero .discover-media-kicker,
  .discover-media-profile-overlay > .discover-person-page:not(.discover-back-underlay) .discover-person-hero .discover-media-kicker {
    color: rgba(255, 255, 255, 0.58) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
  }
  .discover-media-profile-overlay > .discover-person-active-section .discover-person-hero p,
  .discover-media-profile-overlay > .discover-person-page:not(.discover-back-underlay) .discover-person-hero p {
    color: rgba(255, 255, 255, 0.84) !important;
    text-align: left !important;
    max-width: none !important;
    margin: 14px 0 0 !important;
    line-height: 1.5 !important;
  }

  /* v11.329: More Like This star + rating on the same line.
     File 16 sets display:block on .discover-media-similar-card span which
     forces the rating star span onto its own line. Override to inline. */
  .discover-media-profile-overlay .discover-standard-title-page .discover-media-similar-card .discover-more-like-rating-star,
  .discover-media-profile-overlay .discover-standard-title-page .discover-media-similar-card .discover-more-like-rating-wrap {
    display: inline !important;
    white-space: nowrap !important;
  }

  /* v11.329: "Episode & Season Details" button — clicking it does nothing on
     desktop because the seasons page is a position:fixed full-screen overlay
     that relies on the same slide-in animation as the person profile (same
     animation + containing-block problem). Kill the animation so it appears
     instantly. Also ensure the seasons overlay covers the full viewport. */
  .discover-seasons-page {
    animation: none !important;
    transform: none !important;
    will-change: auto !important;
  }

  /* v11.320: 16px / weight-500 for all FPMP body text except the title (h2).
     Set on the two root content areas so it cascades to every text node inside;
     h2 is explicitly reset to its existing 30px so it is unaffected. */
  .discover-media-profile-overlay .discover-standard-title-page .discover-media-hero-content,
  .discover-media-profile-overlay .discover-standard-title-page .discover-media-body {
    font-size: 16px !important;
    font-weight: 500 !important;
  }
  .discover-media-profile-overlay .discover-standard-title-page .discover-media-hero h2 {
    font-size: 30px !important;
    font-weight: 600 !important;
  }

  /* Wider centred panel — IMDb-style wide content area so the poster and the
     large trailer can sit side-by-side. A top band (padding-top) reserves
     clear space for the back button + action controls so they never overlap
     the title bar. */
  .discover-media-profile-overlay .discover-media-page.discover-standard-title-page {
    width: min(100%, 1040px) !important;
    max-width: 1040px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: 66px !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  /* Back button — pinned top-left in the band, clear of the title. */
  .discover-media-profile-overlay .discover-standard-title-page .discover-media-back {
    top: 16px !important;
    left: 20px !important;
    right: auto !important;
    bottom: auto !important;
  }
  /* Action controls (add / share / volume) — pinned top-RIGHT in the band and
     laid out HORIZONTALLY so they sit in a single row instead of stacking down
     over the score / trailer. */
  .discover-media-profile-overlay .discover-standard-title-page .discover-media-action-row {
    top: 16px !important;
    right: 20px !important;
    left: auto !important;
    bottom: auto !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
  }

  /* Top-right controls → consistent 40px circles. */
  .discover-media-profile-overlay .discover-standard-title-page .discover-media-action-row .discover-media-add-floating,
  .discover-media-profile-overlay .discover-standard-title-page .discover-media-action-row .discover-media-share-floating,
  .discover-media-profile-overlay .discover-standard-title-page .discover-media-action-row .discover-media-hero-preview-sound {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    flex: 0 0 40px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .discover-media-profile-overlay .discover-standard-title-page .discover-media-action-row .discover-media-share-floating,
  .discover-media-profile-overlay .discover-standard-title-page .discover-media-action-row .discover-media-hero-preview-sound {
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    background: rgba(8, 7, 18, 0.6) !important;
    color: rgba(255, 255, 255, 0.92) !important;
    box-shadow: none !important;
  }
  .discover-media-profile-overlay .discover-standard-title-page .discover-media-action-row .discover-media-share-floating svg,
  .discover-media-profile-overlay .discover-standard-title-page .discover-media-action-row .discover-media-hero-preview-sound svg {
    width: 18px !important;
    height: 18px !important;
  }

  /* Volume button glyph: the speaker SVG paths have no fill set, so on desktop
     (where the phone fill rule doesn't apply) they rendered black/invisible.
     Paint them with the button colour and show the correct muted/unmuted icon. */
  .discover-media-profile-overlay .discover-standard-title-page .discover-media-hero-preview-sound svg { fill: currentColor !important; }
  .discover-media-profile-overlay .discover-standard-title-page .discover-media-hero-preview-sound .discover-media-hero-preview-sound-icon { width: 18px !important; height: 18px !important; }
  .discover-media-profile-overlay .discover-standard-title-page .discover-media-hero-preview-sound .discover-media-hero-preview-sound-icon-unmuted { display: none !important; }
  .discover-media-profile-overlay .discover-standard-title-page .discover-media-hero-preview-sound[data-sound-state="unmuted"] .discover-media-hero-preview-sound-icon-muted { display: none !important; }
  .discover-media-profile-overlay .discover-standard-title-page .discover-media-hero-preview-sound[data-sound-state="unmuted"] .discover-media-hero-preview-sound-icon-unmuted { display: block !important; }

  /* Volume slider dropdown — vertical layout (v11.323).
     Appended to <body>, positioned by js/37-desktop-trailer-volume.js. */
  .desktop-trailer-volume-dropdown {
    position: fixed;
    transform: translateX(-50%);
    z-index: 100000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 8px;
    width: 36px;
    background: rgba(12, 11, 22, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 18px;
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
  .desktop-trailer-volume-icon { display: inline-flex; color: rgba(255, 255, 255, 0.86); }
  .desktop-trailer-volume-icon svg { width: 14px; height: 14px; }
  .desktop-trailer-volume-slider {
    writing-mode: vertical-lr;
    direction: rtl;
    -webkit-appearance: slider-vertical;
    appearance: auto;
    width: 4px;
    height: 100px;
    accent-color: #c4b5fd;
    cursor: pointer;
    padding: 0;
  }
  .desktop-trailer-volume-value {
    font-size: 10px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.78);
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }

  /* ============================================================================
     v11.330 — IMDb-style hero.

     Target layout (per the IMDb reference screenshots):
       Row 1  ── Title bar (full width): big title + meta on the left, the
                 ★ score pinned top-right.
       Row 2  ── Media row: poster on the LEFT, a large 16:9 trailer on the
                 RIGHT taking the remaining width.
       Row 3+ ── Genre chips, synopsis, export buttons and where-to-watch,
                 each spanning the full width beneath the media row.

     The hero markup nests the poster + title inside
     .discover-media-hero-content > .discover-media-hero-top, while the trailer
     (.discover-media-hero-preview) is a sibling of that wrapper. We use
     display:contents on the wrappers so the poster, the title block
     (.discover-media-hero-main) and the trailer all collapse into direct grid
     items of .discover-media-hero, then place them explicitly.
     ============================================================================ */
  .discover-media-profile-overlay .discover-standard-title-page .discover-media-hero {
    display: grid !important;
    grid-template-columns: 240px minmax(0, 1fr) !important;
    column-gap: 26px !important;
    row-gap: 18px !important;
    align-items: start !important;
    min-height: 0 !important;
    padding-top: 10px !important;
    padding-bottom: 12px !important;
  }
  .discover-media-profile-overlay .discover-standard-title-page .discover-media-hero-content,
  .discover-media-profile-overlay .discover-standard-title-page .discover-media-hero-top {
    display: contents !important;
  }
  .discover-media-profile-overlay .discover-standard-title-page .discover-media-hero-shade {
    display: none !important;
  }

  /* ---- Row 1: title bar (full width). Title left, ★ score top-right. ---- */
  .discover-media-profile-overlay .discover-standard-title-page .discover-media-hero-main {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 138px 10px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
  .discover-media-profile-overlay .discover-standard-title-page .discover-media-hero h2 {
    order: 1 !important;
    text-align: left !important;
    max-width: none !important;
    margin: 0 !important;
    font-size: 40px !important;
    font-weight: 600 !important;
    line-height: 1.04 !important;
    letter-spacing: 0 !important;
  }
  .discover-media-profile-overlay .discover-standard-title-page .discover-media-hero-main .discover-media-kicker {
    order: 2 !important;
    margin: 6px 0 0 !important;
    color: rgba(255, 255, 255, 0.58) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
  }
  .discover-media-profile-overlay .discover-standard-title-page .discover-media-hero-main .discover-media-tagline {
    order: 3 !important;
    margin: 6px 0 0 !important;
    text-align: left !important;
    color: rgba(255, 255, 255, 0.72) !important;
    font-style: italic !important;
  }
  .discover-media-profile-overlay .discover-standard-title-page .discover-media-score-hero {
    position: absolute !important;
    top: 4px !important;
    right: 0 !important;
    margin: 0 !important;
    justify-content: flex-end !important;
    align-self: flex-start !important;
  }
  /* Score (★ 4.2) — 21px / weight 600, no "/5" denominator. */
  .discover-media-profile-overlay .discover-standard-title-page .discover-media-score-hero,
  .discover-media-profile-overlay .discover-standard-title-page .discover-media-score-hero .discover-media-score-star,
  .discover-media-profile-overlay .discover-standard-title-page .discover-media-score-hero .discover-media-score-value {
    font-size: 21px !important;
    font-weight: 600 !important;
  }
  .discover-media-profile-overlay .discover-standard-title-page .discover-media-score-hero .discover-media-score-denominator {
    display: none !important;
  }

  /* ---- Row 2: poster (left). The trailer is placed by the trailer block. ---- */
  .discover-media-profile-overlay .discover-standard-title-page .discover-media-poster {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 240px !important;
    max-width: 240px !important;
    aspect-ratio: 2 / 3 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    align-self: start !important;
    margin: 0 !important;
  }

  /* ---- Row 3: genre chips (full width). ---- */
  .discover-media-profile-overlay .discover-standard-title-page .discover-media-chips {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: flex-start !important;
    margin: 0 !important;
  }
  .discover-media-profile-overlay .discover-standard-title-page .discover-media-chips span {
    display: inline-flex !important;
    align-items: center !important;
    padding: 7px 13px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 500 !important;
  }

  /* ---- Row 4: synopsis (full width). ---- */
  .discover-media-profile-overlay .discover-standard-title-page .discover-media-synopsis {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    text-align: left !important;
    max-width: none !important;
    margin: 0 !important;
    line-height: 1.5 !important;
    color: rgba(255, 255, 255, 0.86) !important;
  }

  /* ---- Rows 5/6: export buttons + where-to-watch (full width). ---- */
  .discover-media-profile-overlay .discover-standard-title-page .media-profile-floating-exports {
    grid-column: 1 / -1 !important;
    grid-row: 5 !important;
    justify-content: flex-start !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .discover-media-profile-overlay .discover-standard-title-page .discover-media-watch-inline {
    grid-column: 1 / -1 !important;
    grid-row: 6 !important;
    margin: 0 !important;
  }

  /* ---- No-trailer fallback: with no trailer the right column would be empty,
     so let the poster span the media + chips rows and pull chips/synopsis/etc.
     up beside it (classic poster-left, details-right layout). ---- */
  .discover-media-profile-overlay .discover-standard-title-page .discover-media-hero:not(.has-trailer-preview) .discover-media-poster {
    grid-row: 2 / span 4 !important;
  }
  .discover-media-profile-overlay .discover-standard-title-page .discover-media-hero:not(.has-trailer-preview) .discover-media-chips {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: start !important;
  }
  .discover-media-profile-overlay .discover-standard-title-page .discover-media-hero:not(.has-trailer-preview) .discover-media-synopsis {
    grid-column: 2 !important;
    grid-row: 3 !important;
  }
  .discover-media-profile-overlay .discover-standard-title-page .discover-media-hero:not(.has-trailer-preview) .media-profile-floating-exports {
    grid-column: 2 !important;
    grid-row: 4 !important;
  }
  .discover-media-profile-overlay .discover-standard-title-page .discover-media-hero:not(.has-trailer-preview) .discover-media-watch-inline {
    grid-column: 2 !important;
    grid-row: 5 !important;
  }

  /* ---- Body: single column, 3-col facts ---- */
  .discover-media-profile-overlay .discover-standard-title-page .discover-media-body {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-top: 14px !important;
    display: block !important;
  }
  .discover-media-profile-overlay .discover-standard-title-page .discover-media-detail-grid { display: block !important; grid-template-columns: none !important; }
  .discover-media-profile-overlay .discover-standard-title-page .discover-media-detail-stack { display: block !important; }
  .discover-media-profile-overlay .discover-standard-title-page .discover-media-facts {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  /* ---- "Episode & Season Details" row — make text visible + chevron normal
     (was invisible dark text + a giant chevron → looked like empty space). */
  .discover-media-profile-overlay .discover-standard-title-page .discover-media-seasons-entry-copy h3 {
    color: #ffffff !important;
    font-size: 15.9px !important;
  }
  .discover-media-profile-overlay .discover-standard-title-page .discover-media-seasons-entry-meta {
    color: rgba(196, 181, 253, 0.78) !important;
    font-size: 12.5px !important;
  }
  .discover-media-profile-overlay .discover-standard-title-page .discover-media-seasons-entry-chevron {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    color: rgba(255, 255, 255, 0.62) !important;
  }

  /* ---- Cast row — desktop fixes (v11.321) --------------------------------
     Problems fixed:
       1. Poster image was zoomed/cropped top-left: the <img> inside
          .discover-media-cast-photo had no desktop object-fit rule, so it
          defaulted to fill → the photo stretched to the top-left corner.
          Fix: width/height 100%, object-fit:cover, object-position:center top
          (head-shot crops better from the top).
       2. Cards were 136px (bloated). Bumped to 144px for better desktop
          readability while keeping proportional posters.
       3. Row now shows a visible scrollbar on desktop so users know it scrolls.
       4. .discover-ai-more-list (More Like This) converted from 4-col static
          grid to the same horizontal scroll row as Cast, matching the mobile
          UX. Cards are larger (150px) so they look intentional at desktop size.
       5. More Like This rating star = champagne gold (#f4d27a). */

  /* Cast: larger cards, visible scrollbar. */
  .discover-media-profile-overlay .discover-standard-title-page .discover-media-cast {
    grid-auto-columns: 164px !important;
    gap: 14px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255,255,255,0.22) transparent !important;
    padding-bottom: 10px !important;
  }
  .discover-media-profile-overlay .discover-standard-title-page .discover-media-cast::-webkit-scrollbar { height: 5px !important; display: block !important; }
  .discover-media-profile-overlay .discover-standard-title-page .discover-media-cast::-webkit-scrollbar-track { background: transparent !important; }
  .discover-media-profile-overlay .discover-standard-title-page .discover-media-cast::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.22) !important; border-radius: 99px !important; }

  .discover-media-profile-overlay .discover-standard-title-page .discover-media-cast-card { width: 164px !important; min-width: 164px !important; }
  .discover-media-profile-overlay .discover-standard-title-page .discover-media-cast-photo { border-radius: 8px !important; overflow: hidden !important; }

  /* Fix the actual <img> tag inside the photo div — was missing object-fit on
     desktop so it zoomed/cropped to the top-left corner. */
  .discover-media-profile-overlay .discover-standard-title-page .discover-media-cast-photo img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center top !important;
    position: absolute !important;
    inset: 0 !important;
  }

  /* More Like This: horizontal scroll row matching Cast, with scrollbar. */
  .discover-media-profile-overlay .discover-standard-title-page .discover-ai-more-list {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 170px !important;
    grid-template-columns: none !important;
    gap: 14px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255,255,255,0.22) transparent !important;
    padding-bottom: 10px !important;
  }
  .discover-media-profile-overlay .discover-standard-title-page .discover-ai-more-list::-webkit-scrollbar { height: 5px !important; display: block !important; }
  .discover-media-profile-overlay .discover-standard-title-page .discover-ai-more-list::-webkit-scrollbar-track { background: transparent !important; }
  .discover-media-profile-overlay .discover-standard-title-page .discover-ai-more-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.22) !important; border-radius: 99px !important; }
  .discover-media-profile-overlay .discover-standard-title-page .discover-ai-more-list .discover-media-similar-card { min-width: 0 !important; width: 170px !important; }

  /* Champagne gold star in More Like This ratings. */
  .discover-media-profile-overlay .discover-standard-title-page .discover-more-like-rating-star { color: #f4d27a !important; }

  /* Strip ALL shadow/gradient/backdrop effects from the trailer hero on desktop.
     The phone app blends the trailer into a full-bleed hero backdrop using:
       1. The hero div's inline background-image (the title's backdrop photo)
       2. .discover-media-hero-shade — a dark gradient overlay div
       3. ::before / ::after on .discover-media-hero-preview — edge vignettes
     On desktop the trailer is a standalone inline box so all of these bleed
     as a dark shadow beneath the trailer into the poster/info area below. */
  .discover-media-profile-overlay:not(.media-profile-trailer-fullscreen):not(.media-profile-trailer-expanding):not(.media-profile-trailer-collapsing) .discover-standard-title-page .discover-media-hero.has-trailer-preview {
    background-image: none !important;
    background-color: transparent !important;
  }
  .discover-media-profile-overlay:not(.media-profile-trailer-fullscreen):not(.media-profile-trailer-expanding):not(.media-profile-trailer-collapsing) .discover-standard-title-page .discover-media-hero.has-trailer-preview .discover-media-hero-shade {
    display: none !important;
  }
  .discover-media-profile-overlay:not(.media-profile-trailer-fullscreen):not(.media-profile-trailer-expanding):not(.media-profile-trailer-collapsing) .discover-standard-title-page .discover-media-hero.has-trailer-preview .discover-media-hero-preview::before,
  .discover-media-profile-overlay:not(.media-profile-trailer-fullscreen):not(.media-profile-trailer-expanding):not(.media-profile-trailer-collapsing) .discover-standard-title-page .discover-media-hero.has-trailer-preview .discover-media-hero-preview::after {
    display: none !important;
    background: none !important;
  }

  /* ---- Trailer = its own inline 16:9 banner at the top, no outline, with the
     YouTube native control bar usable inline (controls=1 is already set; we make
     the iframe interactive and hide the phone-only custom overlay controls).
     Guards exclude the click-to-fullscreen states. */
  /* Keep the hero a GRID (the new IMDb layout) even with a trailer present —
     do NOT collapse to flex column, or the poster + trailer would stack. */
  .discover-media-profile-overlay:not(.media-profile-trailer-fullscreen):not(.media-profile-trailer-expanding):not(.media-profile-trailer-collapsing) .discover-standard-title-page .discover-media-hero.has-trailer-preview {
    position: relative !important;
    display: grid !important;
    min-height: 0 !important;
  }
  /* Trailer = the large 16:9 panel in row 2, column 2 (to the RIGHT of the
     poster), filling the remaining width. */
  .discover-media-profile-overlay:not(.media-profile-trailer-fullscreen):not(.media-profile-trailer-expanding):not(.media-profile-trailer-collapsing) .discover-standard-title-page .discover-media-hero.has-trailer-preview .discover-media-hero-preview {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: start !important;
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    max-height: none !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    cursor: default !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: 0 !important;
  }
  .discover-media-profile-overlay:not(.media-profile-trailer-fullscreen):not(.media-profile-trailer-expanding):not(.media-profile-trailer-collapsing) .discover-standard-title-page .discover-media-hero.has-trailer-preview .discover-media-hero-preview-media,
  .discover-media-profile-overlay:not(.media-profile-trailer-fullscreen):not(.media-profile-trailer-expanding):not(.media-profile-trailer-collapsing) .discover-standard-title-page .discover-media-hero.has-trailer-preview .discover-media-hero-preview-frame {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .discover-media-profile-overlay:not(.media-profile-trailer-fullscreen):not(.media-profile-trailer-expanding):not(.media-profile-trailer-collapsing) .discover-standard-title-page .discover-media-hero.has-trailer-preview .discover-media-hero-preview-frame iframe,
  .discover-media-profile-overlay:not(.media-profile-trailer-fullscreen):not(.media-profile-trailer-expanding):not(.media-profile-trailer-collapsing) .discover-standard-title-page .discover-media-hero.has-trailer-preview .discover-media-hero-preview iframe,
  .discover-media-profile-overlay:not(.media-profile-trailer-fullscreen):not(.media-profile-trailer-expanding):not(.media-profile-trailer-collapsing) .discover-standard-title-page .discover-media-hero.has-trailer-preview .discover-media-hero-preview img {
    width: 100% !important;
    height: 100% !important;
    inset: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    pointer-events: auto !important;
  }
  .discover-media-profile-overlay:not(.media-profile-trailer-fullscreen):not(.media-profile-trailer-expanding):not(.media-profile-trailer-collapsing) .discover-standard-title-page .discover-media-hero.has-trailer-preview .discover-media-hero-preview-controls {
    display: none !important;
  }
}