/* ===================================================================
   AGMTW HOME STYLESHEET (v3)

   Merged 2026-07-27: the old v2.css (section / carousel chrome) is now
   PART 1 of this file and v2.css itself is gone, along with home-v2.php.
   The v3 rules in PART 2 come after so they keep overriding PART 1 -
   keep that order if you ever reshuffle this file.

   Tiles themselves are styled by filter-css.css (.fv-card ...), which
   loads before this file.
   =================================================================== */

/* ===================================================================
   PART 1 - SECTION / CAROUSEL CHROME (was v2.css)
   Lays out the sections, the h2 + bulle row, the horizontal scroll row,
   the "See all" tile and the mobile "Show more" behaviour.
   =================================================================== */
#v2-wrap {
    max-width: none;              /* full-width sections on desktop */
    margin: 0 auto;
    padding: 8px 32px 60px;
}

.v2-intro {
    margin: 4px 0 26px;
}
.v2-intro h1 {
    font-size: 1.9rem;
    font-weight: 800;
    margin: 0 0 4px;
    letter-spacing: -0.02em;
}
.v2-intro p {
    margin: 0;
    color: var(--fv-muted, #666);
    font-size: 1rem;
}

/* --- Quick links (Random / All Movies / All Shows) --- now below the search bar */
.v2-quicklinks {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
}
/* Centered directly under the search bar, inside #v2-wrap. */
#v2-wrap > .v2-quicklinks {
    justify-content: center;
    margin: 0 auto 30px;
}
.v2-ql-placeholder { flex: none; }

/* The `#fv-hero ...` rules that used to sit here were /v2/-only chrome
   (inset hero, stuck quicklinks, hero curators hidden). /v3/ has no
   #fv-hero at all and this file now also loads on /all/v3/, which DOES
   have one - so they were dropped with the merge rather than leaked. */
.v2-hero-search { margin-top: 24px; }

.v2-qlink {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    border: 1px solid var(--fv-border, #d5d5d5);
    border-radius: 999px;
    padding: 7px 15px;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    /* Ghost/secondary  -  search bar is the single red primary action. */
    background: transparent;
    color: var(--fv-text, #222);
}
.v2-qlink:hover {
    border-color: #ff2500;
    color: #ff2500;
    background: rgba(255, 37, 0, 0.05);
}
.v2-qlink svg { flex: 0 0 auto; }

@media (max-width: 860px) {
    .v2-quicklinks { gap: 8px; margin: 2px 0 22px; }
    .v2-qlink { font-size: 0.85rem; padding: 6px 12px; }
}

/* --- Human-curation band (below the first row) --------------------- */
/* The old `#fv-hero .home-curators { display: none }` went with the /v2/
   hero - /all/v3/ shares this file and wants its hero curators. */

.v2-curators {
    margin: 4px 0 40px;
    padding: 30px 24px 32px;
    background: rgba(80, 100, 203, 0.10);   /* brand-blue tint (#5064cb) */
    /* border: 1px solid rgba(80, 100, 203, 0.16); */
    border-radius: 12px;
    text-align: center;
}
.v2-curators-title {
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 8px;
}
.v2-curators-tag {
    max-width: 580px;
    margin: 0 auto;
    color: var(--fv-muted, #666);
    font-size: 1.02rem;
    line-height: 1.5;
}
.v2-curators-tag a {
    color: var(--fv-accent, #e11);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.v2-curators .home-curators { margin-top: 20px; }
@media (max-width: 860px) {
    .v2-curators { padding: 24px 16px 26px; }
    .v2-curators-title { font-size: 1.2rem; }
    .v2-curators-tag { font-size: 0.92rem; }
}

/* --- Section ------------------------------------------------------- */
.v2-section {
    margin: 0 0 40px;
}
.v2-section[hidden] { display: none; }

.v2-sec-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
    min-width: 0;
}
.v2-sec-title {
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0;
    white-space: nowrap;
    flex: 0 0 auto;
}

/* Bulles: horizontally scrollable chips next to the h2. Scrollbar hidden;
   scrolled via the </> nav buttons (JS-added), plus drag/wheel. */
.v2-bulles {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 2px 6px;
    min-width: 0;
    flex: 1 1 auto;
    cursor: grab;
    padding-bottom: 0;
}
.v2-bulles.v2-dragging { cursor: grabbing; }
.v2-bulles::-webkit-scrollbar { display: none; }

/* </> scroll buttons for the bulle row */
.v2-bulle-nav {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #ebedff;
    background: var(--fv-surface, #fff);
    color: var(--fv-text, #333);
    cursor: pointer;
    align-self: center;
    transition: border-color 0.15s, color 0.15s;
}
.v2-bulle-nav:hover { border-color: var(--fv-accent, #e11); color: var(--fv-accent, #e11); }
.v2-bulle-nav[hidden] { display: none; }
.v2-bulle-prev { margin-right: 4px; }
.v2-bulle-next { margin-left: 4px; }
@media (hover: none) { .v2-bulle-nav { display: none; } }

.v2-bulle {
    flex: 0 0 auto;
    border: 1px solid #ebedff;
    background: transparent;
    color: inherit;
    border-radius: 999px;
    padding: 5px 13px;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.v2-bulle:hover { border-color: var(--fv-accent, #e11); color: var(--fv-accent, #e11); }
.v2-bulle.is-active {
    background: var(--fv-accent, #e11);
    border-color: var(--fv-accent, #e11);
    color: #fff;
}

/* Trailing "See all >" at the end of the bulle row */
.v2-bulle-seeall {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    text-decoration: none;
    color: var(--fv-accent, #e11);
    font-size: 0.82rem;
    font-weight: 700;
    padding: 5px 6px 5px 10px;
    margin-left: 2px;
}
.v2-bulle-seeall:hover { text-decoration: underline; }
.v2-bulle-seeall svg { flex: 0 0 auto; }

.v2-empty {
    color: var(--fv-muted, #888);
    font-size: 0.9rem;
    padding: 40px 4px;
    margin: 0;
}

/* "Added today / a week ago ..." line under the streamer pill (New on X rows) */
#v2-wrap .fv-added,
body.fv-v3 .fv-added {
    margin-top: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--fv-muted, #777);
}
/* When it sits beside the title (in .v2-ctitle-row) rather than below. */
.v2-ctitle-row .fv-added {
    flex: 0 0 auto;
    margin: 0;
    align-self: baseline;
    white-space: nowrap;
}

/* --- Row: static grid (no slider)  -  4 per line, then 2, then 1 ------- */
.v2-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 2px 0 6px;
    align-items: stretch;
}
@media (max-width: 1200px) { .v2-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .v2-row { grid-template-columns: 1fr; } }

/* Bottom "See all": small caps label with the arrow on its own line under it,
   centred (the Pitchfork "ALL BEST NEW ALBUMS" treatment). */
.v2-seeall-bottom {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin-top: 18px;
    text-decoration: none;
    color: var(--v3-accent, #e0263c);
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}
.v2-seeall-bottom:hover { text-decoration: none; }
/* The arrow steps forward on hover and keeps stepping, back and forth,
   for as long as the pointer stays on the link. */
@keyframes v3-seeall-nudge {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(5px); }
}
.v2-seeall-bottom svg { flex: 0 0 auto; transition: transform 0.18s; }
.v2-seeall-bottom:hover svg { animation: v3-seeall-nudge 0.7s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
    .v2-seeall-bottom:hover svg { animation: none; transform: translateX(5px); }
}

/* Chevron buttons  -  fade-in on wrap hover, hidden at row ends (JS) */
.v2-chev {
    position: absolute;
    top: 0;
    bottom: 14px;
    width: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    z-index: 4;
    color: var(--fv-text, #111);
    opacity: 0;
    transition: opacity 0.15s;
}
.v2-row-wrap:hover .v2-chev { opacity: 1; }
.v2-chev[hidden] { display: none; }
.v2-chev svg { width: 52px; height: 52px; }
.v2-chev-left {
    left: 0;
    justify-content: flex-start; padding-left: 2px;
    background: linear-gradient(to right, #fff 62%, rgba(255,255,255,0));
}
.v2-chev-right {
    right: 0;
    justify-content: flex-end; padding-right: 2px;
    background: linear-gradient(to left, #fff 62%, rgba(255,255,255,0));
}
/* Touch devices: no chevrons, swipe to slide */
@media (hover: none) {
    .v2-chev { display: none !important; }
}

.v2-row > .fv-card {
    border-radius: 12px;   /* rounded to match the hero */
    overflow: hidden;
    min-width: 0;
}

/* Tile title: the homepage's #fv-wrap .fv-ctitle rule doesn't reach #v2-wrap,
   so the h3 was falling back to the browser default (huge 1em margins). */
#v2-wrap .fv-ctitle {
    font-size: 25px;
    margin: 0 0 6px;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* "See more" tile at the end of each row  -  same width as a tile, stretches to
   the row height, centered label + arrow, bordered. Links to the section's see-all. */
.v2-seemore {
    flex: 0 0 220px;
    width: 220px;
    min-height: 320px;
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    color: var(--fv-accent, #e11);
    border: 2px dashed var(--fv-border, #d5d5d5);
    border-radius: 12px;
    background: transparent;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.v2-seemore:hover {
    border-color: var(--fv-accent, #e11);
    color: var(--fv-accent, #e11);
    background: rgba(225, 17, 17, 0.04);
}
.v2-seemore-inner {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.v2-seemore-inner svg { flex: 0 0 auto; }

/* Skeleton placeholders (before first paint) */
.v2-skel {
    height: 250px;
    border-radius: 12px;
    border: 1px solid var(--fv-border, #eee);
    background: linear-gradient(100deg, var(--fv-surface2, #f2f2f2) 30%, rgba(0,0,0,0.04) 50%, var(--fv-surface2, #f2f2f2) 70%);
    background-size: 200% 100%;
    animation: v2shimmer 1.3s infinite linear;
}
@keyframes v2shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.v2-section.is-loading .v2-row { opacity: 0.5; transition: opacity 0.2s; }

@media (max-width: 860px) {
    #v2-wrap { padding: 6px 12px 48px; }
    .v2-sec-title { font-size: 1.12rem; }
    .v2-row { gap: 12px; }
}

/* --- Dark mode alignment (site is light-first; keep chips readable) -- */
@media (prefers-color-scheme: dark) {
    .v2-intro p { color: var(--fv-muted, #aaa); }
}

/* ==================================================================
   TEST: horizontal tiles (poster left / text right)  -  the homepage's
   "table" view, applied to /v2/ carousels. Gated by .v2-tiles-row on
   #v2-wrap. ROLLBACK: remove class="v2-tiles-row" in home-v2.php (and
   optionally this block).
   ================================================================== */
.v2-tiles-row .v2-row > .fv-card {
    flex-direction: row;
    align-items: stretch;
    gap: 12px;
    padding: 10px;
    border: 0;
    background-color: #ffffff;
}
.v2-tiles-row .v2-row > .fv-card .fv-card-link {flex: 0 0 140px;width: 140px;align-self: center;height: 100%;}
.v2-tiles-row .v2-row > .fv-card .fv-cimg {width: 140px;aspect-ratio: 2/3;border-radius: 8px;height: 100%;}
.v2-tiles-row .v2-row > .fv-card .fv-card-overlay { display: none; }
.v2-tiles-row .v2-row > .fv-card .fv-card-bottom {
    padding: 0;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
}
.v2-tiles-row .v2-row > .fv-card .fv-card-info { justify-content: center; gap: 5px; min-width: 0; }
.v2-tiles-row .v2-row > .fv-card .fv-cexcerpt { -webkit-line-clamp: 2; }
.v2-tiles-row .v2-skel { height: 250px; }
/* New on Streaming: the mgmt buttons stay visible (not hover-gated) like /v2/. */
#v2-wrap.v3.v2-tiles-row .v2-row > .fv-card .fv-actions { opacity: 1; }
/* Hide the "More" (kebab) action button on these cards. */
#v2-wrap .v2-section[data-v2-key="new-streaming"] .fv-actions .fv-action-btn.fv-more-btn { display: none !important; }
/* Hide the streamer logos row (the "Added to X …" eyebrow already names it). */
#v2-wrap .v2-section[data-v2-key="new-streaming"] .fv-slogos { display: none !important; }
/* Larger poster on these tiles — the source is 500px wide, so a bigger slot
   uses more of it and reads noticeably crisper (140px → 172px). */
#v2-wrap .v2-section[data-v2-key="new-streaming"] .v2-row > .fv-card .fv-card-link { flex: 0 0 172px; width: 172px; }
#v2-wrap .v2-section[data-v2-key="new-streaming"] .v2-row > .fv-card .fv-cimg { width: 172px; }
/* 3-up on desktop, 2-up under 1200px, then 1-up under 700px. */
@media (min-width: 1201px) {
    .v2-section[data-v2-key="new-streaming"] .v2-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
    .v2-section[data-v2-key="new-streaming"] .v2-row { grid-template-columns: 1fr; }
}
/* "Added to X 2 days ago" eyebrow above the title in the New on Streaming cards. */
.v2-section[data-v2-key="new-streaming"] .fv-added {
    display: block;
    margin: 0 0 3px;
    padding: 0;
    background: none;
    border: 0;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #5065cb;
    white-space: normal;
}
/* The "New on Streaming" header (title + service bulles) scrolls with the
   page like every other row - it used to be pinned to the top of the window
   back when the row held 30 titles. */
.v2-section[data-v2-key="new-streaming"] .v2-sec-head {
    background: #fff;
    padding: 10px 0 8px;
    margin-bottom: 8px;
}

/* --- Bottom CTA banner -> /cord-cutting/ (hero-style) --------------- */
.v2-cta {
    display: block;
    margin: 24px 0;
    padding: 46px 30px;
    border-radius: 16px;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(135deg, #1a1f7e 0%, #5064cb 55%, #6b46c1 100%);
    transition: transform 0.15s, box-shadow 0.15s;
}
.v2-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(80,100,203,0.32); }
.v2-cta-eyebrow {
    display: block;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.75);
    margin-bottom: 10px;
}
.v2-cta-title {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}
.v2-cta-sub {
    display: block;
    max-width: 640px;
    margin: 0 auto 24px;
    font-size: 1.05rem;
    line-height: 1.5;
    color: rgba(255,255,255,0.9);
}
.v2-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    color: #1a1f7e;
    font-weight: 800;
    font-size: 1rem;
    padding: 12px 24px;
    border-radius: 999px;
    transition: color 0.15s;
}
.v2-cta:hover .v2-cta-btn { color: #6b46c1; }

@media (max-width: 860px) {
    .v2-cta { padding: 34px 18px; border-radius: 14px; }
    .v2-cta-title { font-size: 1.42rem; }
    .v2-cta-sub { font-size: 0.95rem; }
}

/* --- Share buttons (h1 + tile titles) ------------------------------ */
.v2-share {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: none;
    background: transparent;
    color: var(--fv-muted, #999);
    cursor: pointer;
    padding: 3px;
    border-radius: 6px;
    line-height: 0;
    transition: color 0.15s, background 0.15s;
}
.v2-share svg { width: 16px; height: 16px; }
.v2-share:hover { color: var(--fv-accent, #e11); background: rgba(0,0,0,0.06); }

/* Tile title + share on one row */
.v2-ctitle-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
.v2-ctitle-row .fv-ctitle { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }
.v2-ctitle-row .v2-share-tile { margin-top: 4px; }

/* Hero h1 share icon */
#fv-hero h1 .v2-share-h1 {
    vertical-align: middle;
    margin-left: 12px;
    color: var(--fv-accent, #e11);
}
#fv-hero h1 .v2-share-h1 svg { width: 22px; height: 22px; }
#fv-hero h1 .v2-share-h1:hover { background: rgba(0,0,0,0.06); }

/* --- Share popover (social platform icons) ------------------------- */
.v2-share-menu {
    position: absolute;
    z-index: 100;
    display: flex;
    gap: 2px;
    padding: 8px;
    background: var(--fv-surface, #fff);
    border: 1px solid var(--fv-border, #e2e2e2);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.18);
}
.v2-sm-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--sm, #555);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, transform 0.1s;
}
.v2-sm-item:hover { background: rgba(0,0,0,0.06); transform: translateY(-1px); }
.v2-sm-item svg { width: 22px; height: 22px; }
.v2-sm-copy { color: #6b7280; }

/* ===================================================================
   Card action buttons (Seen / Queue / Loved / More / Hide)
   Ported from the homepage  -  base styling comes from filter-css.css
   (.fv-actions, .fv-action-btn). These rules only adapt the row to the
   v2 tile, which is narrower and centers its info column.

   /all/v3/ (body.fv-v3 #fv-grid) reuses the same set rather than getting
   a second design: the selectors below are shared, no declaration is
   duplicated. The "Seen" / "Hide" text labels filters.js writes are
   swallowed by font-size:0, so no JS change is needed either.
   ================================================================== */
#v2-wrap .fv-actions,
body.fv-v3 #fv-grid .fv-actions {
    margin-top: 8px;
    border-top: 0;
    padding-top: 2px;
    gap: 4px;
}
/* The row is the widest thing in a tiles-row tile  -  let it shrink freely
   instead of forcing the whole tile wider. */
#v2-wrap .fv-action-btn,
body.fv-v3 #fv-grid .fv-action-btn {
    padding: 8px 4px;
    font-size: 11px;
    min-width: 0;
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid #ebedff;
}
#v2-wrap .fv-action-btn:first-child,
body.fv-v3 #fv-grid .fv-action-btn:first-child { border-left: none; }

/* Icon-only buttons: labels dropped, so each button is an equal-width
   square with the glyph centered. */
#v2-wrap .fv-action-btn,
body.fv-v3 #fv-grid .fv-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    gap: 0;
    padding: 8px 0;
    font-size: 0;
}
#v2-wrap .fv-action-btn svg,
body.fv-v3 #fv-grid .fv-action-btn svg { width: 14px; height: 14px; }
#v2-wrap .fv-action-mlbl,
body.fv-v3 #fv-grid .fv-action-mlbl { display: none; }

/* Horizontal "table" tiles: tighten the row a touch  -  the info column is
   narrower here, but Seen/Hide labels still fit at 11px. */
.v2-tiles-row .v2-row > .fv-card .fv-actions { margin-top: 6px; }
.v2-tiles-row .v2-row > .fv-card .fv-action-btn svg { flex: 0 0 auto; }

/* ===================================================================
   Search bar (item 11)  -  top of #v2-wrap, native GET to /all/?search=.
   ================================================================== */
.v2-search {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 640px;
    margin: 4px auto 14px;
    padding: 6px 6px 6px 16px;
    border: 1px solid var(--fv-border, #ddd);
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.v2-search:focus-within {
    border-color: #5064cb;
    box-shadow: 0 2px 12px rgba(80,100,203,0.18);
}
.v2-search-icon { flex: 0 0 auto; color: var(--fv-muted, #888); }
.v2-search-input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 1rem;
    color: inherit;
    padding: 8px 0;
}
.v2-search-input::placeholder { color: var(--fv-muted, #999); }
.v2-search-btn {
    flex: 0 0 auto;
    border: none;
    cursor: pointer;
    background: #10100f;
    color: #fff;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 9px 20px;
    border-radius: 999px;
    transition: background 0.15s;
}
.v2-search-btn:hover { background: #e01f00; }
@media (max-width: 860px) {
    .v2-search { margin: 2px 0 20px; }
    .v2-search-btn { padding: 9px 14px; font-size: 0.9rem; }
}

/* ===================================================================
   Search autocomplete dropdown (.v2-ac) under the search bar.
   ================================================================== */
.v2-search { position: relative; text-align: left; }
.v2-ac {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    text-align: left;   /* hero centers its text; keep results left-aligned */
    z-index: 60;
    max-height: 60vh;
    overflow-y: auto;
    background: var(--fv-surface, #fff);
    border: 1px solid var(--fv-border, #e2e2e2);
    border-radius: 14px;
    box-shadow: 0 12px 34px rgba(0,0,0,0.16);
    padding: 6px;
}
.v2-ac-group {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fv-muted, #999);
    padding: 8px 12px 4px;
}
.v2-ac-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 9px;
    text-decoration: none;
    color: var(--fv-text, #1a1a1a);
    font-size: 0.98rem;
    cursor: pointer;
}
.v2-ac-item:hover,
.v2-ac-item.is-active { background: rgba(80,100,203,0.10); }
.v2-ac-kind {
    flex: 0 0 auto;
    color: var(--fv-muted, #888);
    font-weight: 600;
}
.v2-ac-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}
.v2-ac-name strong { font-weight: 800; color: #ff2500; }
.v2-ac-type {
    flex: 0 0 auto;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--fv-muted, #999);
    border: 1px solid var(--fv-border, #e2e2e2);
    border-radius: 5px;
    padding: 2px 6px;
}


/* ===================================================================
   PART 2 - THE /v3/ SHELF, MASTHEAD AND BROWSE BAR
   A staff-picks shelf, not a catalog: a short list, each title carrying
   a hand-written sentence. Restraint over volume.
   NOTE: .v3 sits ON #v2-wrap, so overriding a PART 1 rule needs
   `#v2-wrap.v3 ...`, not `.v3 #v2-wrap ...`.
   =================================================================== */
:root {
    --v3-ink:    #10100f;
    --v3-muted:  #6a6a66;
    --v3-rule:   #e4e2dd;
    --v3-paper:  #ffffff;
    --v3-accent: #e0263c;
}

/* --- Masthead --------------------------------------------------- */
#v3-top {
    max-width: 980;
    margin: 0 auto;
    padding: 44px 24px 26px;
    text-align: center;
}
.v3-brand {
    margin: 0;
    font-size: clamp(1.9rem, 4vw, 2.7rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    font-weight: 800;
    color: var(--v3-ink);
}
.v3-brandsub {
    max-width: 56ch;
    margin: 12px auto 22px;
    font-size: 1.02rem;
    line-height: 1.5;
    color: var(--v3-muted);
}
#v3-top .v2-search { max-width: 560px; margin: 0 auto; }

/* --- Browse bar ------------------------------------------------- */
.v3-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
}
.v3-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 15px;
    border: 1px solid var(--v3-rule);
    border-radius: 999px;
    background: #5065cb;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--v3-ink);
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    list-style: none;          /* kills the <summary> marker */
    transition: border-color 0.15s, background 0.15s;
}
/* Collapsed state: streaming services / mood / genre stay out of the
   way until the visitor touches the search bar. */
.v3-nav.is-collapsed .v3-nav-more { display: none; }
.v3-nav:not(.is-collapsed) .v3-nav-more { animation: v3-nav-in 0.22s ease-out both; }
@keyframes v3-nav-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .v3-nav:not(.is-collapsed) .v3-nav-more { animation: none; }
}
.v3-nav-btn:hover {border-color: #b9b7b1;background: #000000;}
.v3-nav-btn[aria-expanded="true"] { border-color: var(--v3-ink); }
.v3-nav-btn[aria-expanded="true"] .v3-nav-chev { transform: rotate(180deg); }
.v3-nav-chev { transition: transform 0.18s; }

/* Inline panel: the term pills are the site's own .top-terms /
   .homepage-buttons, so they match the /mood/ page exactly. */
.v3-panel { margin-top: 16px; }
.v3-panel[hidden] { display: none; }
.v3-panel .top-terms,
.v3-panel .homepage-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0 0 10px;
    margin-left: auto;
    margin-right: auto;
}
.v3-panel .homepage-buttons { margin-bottom: 0; }
/* Top tier: same pill, one size up. */
.v3-panel .top-terms a {
    padding: 13px 22px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #000;
    background: #eaedff;
    text-decoration: none;
}
.v3-panel .top-terms a:hover,
.v3-panel .homepage-buttons a:hover { background: #dadffc; }

@media (max-width: 560px) {
    .v3-nav-btn { font-size: 0.86rem; padding: 8px 12px; }
}

/* --- Folded sections -------------------------------------------- */
/* Every titled section on /v3/ starts closed: the page reads as a list
   of shelves and the visitor opens the one they want. The rows are all
   built by v2.js at boot regardless, so opening one is instant. */
.v3-fold-btn {
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--v3-rule);
    border-radius: 50%;
    background: var(--v3-paper);
    color: var(--v3-ink);
    cursor: pointer;
    align-self: center;
    transition: border-color 0.15s, background 0.15s, transform 0.2s;
}
.v3-fold-btn:hover { border-color: #b9b7b1; background: #faf9f7; }
.v3-fold-btn svg { transition: transform 0.2s; }
.v3-fold.is-open .v3-fold-btn svg { transform: rotate(180deg); }

/* Closed: the head stays, everything under it goes (bulles included, so
   a closed section is one clean line). */
.v3-fold:not(.is-open) .v2-row,
.v3-fold:not(.is-open) .v2-seeall-bottom,
.v3-fold:not(.is-open) .v2-bulles,
.v3-fold:not(.is-open) .v2-bulle-nav,
.v3-fold:not(.is-open) .v3-shelf-grid,
.v3-fold:not(.is-open) .v3-recent,
.v3-fold:not(.is-open) .v3-pro { display: none; }

/* A closed section is a header the whole width of the page, so give the
   head a hit area and drop the bottom margin it needs when open. */
.v3-fold:not(.is-open) .v2-sec-head,
.v3-fold:not(.is-open) .v3-shelf-head { margin-bottom: 0; cursor: pointer; }
.v3-fold:not(.is-open) { margin-bottom: 0; }
.v3-fold:not(.is-open) + .v3-fold { border-top: 1px solid var(--v3-rule); }
#v2-wrap.v3 .v3-fold:not(.is-open) { padding: 14px 0; }

/* --- Shelf ------------------------------------------------------ */
/* The shelf is a white panel on the grey page, opened by a label bar. */
.v3-shelf {
    background: var(--v3-paper);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 54px;
}
/* Two lines: a tinted title band across the top of the panel, the service
   strip on white under it. */
.v3-shelf-bar {
    display: block;
    padding: 0;
    /* border-bottom: 1px solid var(--v3-rule); */
}
.v3-shelf .v3-shelf-grid {padding: 20px 22px 0;}
.v3-shelf .v3-recent { padding: 0 22px; }
.v3-shelf .v2-seeall-bottom { padding-bottom: 24px; }
@media (max-width: 700px) {
    .v3-shelf-head { padding: 13px 14px; }
    .v3-new-bar { padding: 10px 14px; }
    .v3-shelf .v3-shelf-grid { padding: 20px 14px 0; }
    .v3-shelf .v3-recent { padding: 0 14px; }
}
.v3-shelf-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 26px;
}
.v3-shelf-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--v3-ink);
}
/* Title on the left, "See all" on the right; the service bulles sit on their
   own line under both. */
.v3-shelf-head {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    padding: 15px 22px;
    background: #edeffa;
}

/* The service strip. Same chips as the rows below, one line above the shelf,
   with the same </> buttons riding either end of it. */
.v3-new-bar {
    display: flex;
    align-items: center;
    min-width: 0;
    margin-bottom: 0;
    padding: 12px 22px;
}
.v3-new-bulles { margin-bottom: 0; }
#v2-wrap.v3 .v3-shelf-bar .v2-bulle { background: transparent; border-color: var(--v3-rule); }
#v2-wrap.v3 .v3-shelf-bar .v2-bulle:hover { border-color: var(--v3-accent); }
#v2-wrap.v3 .v3-shelf-bar .v2-bulle.is-active { border-color: transparent; }
#v2-wrap.v3 .v3-shelf-bar .v2-bulle-nav { background: var(--v3-paper); border-color: var(--v3-rule); }

/* Previous days under the lead pick: three equal columns, each with its own
   "Yesterday" / "2 days ago" label above a small tile (image + name). */
.v3-recent {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 30px;
    /* padding-top: 22px; */
    /* border-top: 1px solid var(--v3-rule); */
}
.v3-recent-col { min-width: 0; }
.v3-recent-tile {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--v3-ink);
}
.v3-recent-img {
    display: block;
    flex: 0 0 46%;
    width: 46%;
    aspect-ratio: 2 / 3;
    border-radius: 8px;
    overflow: hidden;
    background: var(--fv-surface2, #f2f2f2);
    max-height: 74px;
}
.v3-recent-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v3-recent-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.v3-recent-label {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--v3-muted);
}
.v3-recent-name { font-size: 0.9rem; font-weight: 700; line-height: 1.25; }
/* "Today on Netflix" over the lead title — same eyebrow as the tiles. */
.v3-pick-added {
    margin: 0 0 8px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--v3-muted);
}
.v3-recent-tile:hover .v3-recent-name { text-decoration: underline; }
/* Mobile: three narrow columns squeeze the thumb and wrap every title, so
   the strip becomes a stacked list — one row per title, thumb left. */
@media (max-width: 780px) {
    .v3-recent {
        grid-template-columns: 1fr;
        gap: 0;
        margin-top: 22px;
        border-top: 1px solid var(--v3-rule);
    }
    .v3-recent-col + .v3-recent-col { border-top: 1px solid var(--v3-rule); }
    .v3-recent-tile { gap: 14px; padding: 11px 0; }
    .v3-recent-img {
        flex: 0 0 104px;
        width: 104px;
        aspect-ratio: 16 / 10;
        max-height: none;
    }
    .v3-recent-text { gap: 3px; }
    .v3-recent-label { font-size: 0.7rem; }
    .v3-recent-name { font-size: 0.98rem; }
}

.v3-shelf .v2-seeall-bottom { margin-top: 26px; }

.v3-shelf-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 34px;
}
@media (max-width: 900px) { .v3-shelf-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 22px; } }
@media (max-width: 560px) { .v3-shelf-grid { grid-template-columns: 1fr; gap: 30px; } }

.v3-pick { min-width: 0; }


/* The lead pick. One title carries the shelf: full width, image beside
   the card rather than above it, everything a size up. */
.v3-pick-lead {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 34px;
    align-items: center;
    /* padding-bottom: 34px; */
    margin-bottom: 6px;
    /* border-bottom: 1px solid var(--v3-rule); */
}
.v3-pick-lead .v3-pick-poster { aspect-ratio: 16 / 9; margin-bottom: 0; }
.v3-pick-lead .v3-pick-title { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 12px; }
.v3-pick-lead .v3-pick-why {
    font-size: 1.14rem;
    line-height: 1.45;
    margin-bottom: 18px;
}
.v3-pick-lead .v3-pick-by { font-size: 0.9rem; margin-bottom: 8px; }
.v3-pick-lead .v3-pick-av { width: 30px; height: 30px; }
.v3-pick-lead .v3-pick-where { font-size: 0.9rem; }

/* Outbound references on the lead. Set apart by a rule and a size drop
   so they're findable without pulling the eye off the pick. */
.v3-pick-refs {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 14px;
    margin: 16px 0 0;
    padding-top: 12px;
    /* border-top: 1px solid var(--v3-rule); */
    font-size: 0.78rem;
}
.v3-pick-refs a {
    color: var(--v3-muted);
    text-decoration: none;
    border-bottom: 1px solid var(--v3-rule);
}
.v3-pick-refs a:hover { color: var(--v3-ink); border-bottom-color: var(--v3-ink); }

/* Awards, under the references. */
.v3-pick-awards {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 0;
}
.v3-pick-awards span {
    font-size: 0.71rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #7a6320;
    background: #fbf3dd;
    border-radius: 4px;
    padding: 4px 8px;
}
@media (max-width: 780px) {
    .v3-pick-lead { grid-template-columns: 1fr; gap: 16px; padding-bottom: 28px; }
    .v3-pick-lead .v3-pick-poster { aspect-ratio: 3 / 2; }
}

/* Poster treated as an object: no rounded card, no shadow, just the image. */
.v3-pick-poster {
    display: block;
    position: relative;
    aspect-ratio: 3 / 2;
    border-radius: 6px;
    overflow: hidden;
    background: #f1efea;
    margin-bottom: 14px;
}
.v3-pick-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}
.v3-pick:hover .v3-pick-poster img { transform: scale(1.025); }

/* Score badge: the shelf and the pro band use the site's own
   .fv-top-badges / .fv-rating markup (filter-css.css) so every score on
   the page - shelf, rows, /all/ - is the same badge, top right. Nothing
   to style here beyond the small-tile sizing below. */

.v3-pick-title {
    margin: 0 0 8px;
    font-size: 1.16rem;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -0.01em;
}
.v3-pick-title a { color: var(--v3-ink); text-decoration: none; }
.v3-pick-title a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Director  -  sits between the title and the sentence on the lead. */
.v3-pick-dir {
    margin: -2px 0 10px;
    font-size: 0.92rem;
    color: var(--v3-muted);
}

/* Director . country line on the client-built row tiles (under the title). */
#v2-wrap.v3 .v3-card-dir {
    /* margin: 3px 0 0; */
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--v3-muted);
    margin-top: 0;
}

/* The card. This sentence is the whole point of the page. */
.v3-pick-why {
    margin: 0 0 12px;
    font-size: 0.99rem;
    line-height: 1.5;
    color: #33322f;
}

.v3-pick-by {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.83rem;
    color: var(--v3-muted);
    margin-bottom: 6px;
}
.v3-pick-av {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}
.v3-pick-by a { color: var(--v3-muted); text-decoration: none; border-bottom: 1px solid var(--v3-rule); }
.v3-pick-by a:hover { color: var(--v3-ink); border-bottom-color: var(--v3-ink); }

.v3-pick-where {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.83rem;
    color: var(--v3-muted);
}
.v3-pick-plogo { width: 18px; height: 18px; object-fit: contain; border-radius: 4px; flex: 0 0 auto; }
.v3-pick-where a {color: var(--v3-muted);text-decoration: none;text-transform: uppercase;}
.v3-pick-where a:hover { color: var(--v3-accent); }

/* --- Restraint pass on the rows below --------------------------- */
.v3 .v2-section { margin-bottom: 44px; }
.v3 .v2-sec-title {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--v3-ink);
}
/* Header is a link to the same target as "See all". */
.v3 .v2-sec-title a {
    color: inherit;
    text-decoration: none;
}
.v3 .v2-sec-title a:hover { text-decoration: underline; }
.v3 .v2-sec-head {
    border-top: 1px solid var(--v3-rule);
    padding-top: 18px;
    margin-bottom: 14px;
}
/* Card actions stay out of the way until you want them. */
.v3 .v2-row > .fv-card .fv-actions { opacity: 0; transition: opacity 0.18s; }
.v3 .v2-row > .fv-card:hover .fv-actions,
.v3 .v2-row > .fv-card:focus-within .fv-actions { opacity: 1; }
@media (hover: none) { .v3 .v2-row > .fv-card .fv-actions { opacity: 1; } }

/* Row tiles sit in a narrower column here than on /v2/, so the 25px
   title from v2.css clipped mid-word. The .v3 class sits ON #v2-wrap,
   so these need the compound selector to out-specify it. */
#v2-wrap.v3 .fv-ctitle {font-size: 1.02rem;line-height: 1.28;font-size: 23px;}
#v2-wrap.v3 .fv-cexcerpt { font-size: 0.88rem; }

/* --- Pro band ----------------------------------------------------
   Lives inside the shelf section now (same question, member half of the
   answer), so it sits under the picks with a rule between them and no
   bottom margin of its own. */
.v3-pro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 34px;
    align-items: center;
    border-top: 1px solid var(--v3-rule);
    padding-top: 26px;
    margin-top: 40px;
}
@media (max-width: 780px) { .v3-pro { grid-template-columns: 1fr; gap: 22px; } }

.v3-pro-title {
    margin: 0 0 8px;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--v3-ink);
}
.v3-pro-note {
    margin: 0 0 16px;
    font-size: 0.97rem;
    line-height: 1.5;
    color: var(--v3-muted);
    max-width: 46ch;
}
.v3-pro-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    background: var(--v3-ink);
    text-decoration: none;
    padding: 11px 18px;
    border-radius: 999px;
}
.v3-pro-cta:hover { background: var(--v3-accent); color: #fff; }

.v3-pro-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.v3-pro-tease {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: 6px;
    background: #ecebe7;
}
.v3-pro-tease img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: blur(9px) saturate(0.7) brightness(0.82);
    transform: scale(1.12);
}
.v3-pro-lock {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
/* The pro teasers are small stills, so the shared badge is scaled down
   there - same font, same colours, same corner. */
.v3-pro-tease .fv-top-badges { top: 6px; right: 6px; }
.v3-pro-tease .fv-rating { padding: 4px 7px; font-size: 14px; }

/* --- Browse links (practical stuff, demoted from rows to text) -- */
.v3-browse {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 28px;
    border-top: 1px solid var(--v3-rule);
    padding: 22px 0 6px;
    margin-bottom: 40px;
}
.v3-browse a {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--v3-ink);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.v3-browse a:hover { border-bottom-color: var(--v3-accent); color: var(--v3-accent); }

/* --- Page frame ------------------------------------------------- */
#v2-wrap.v3 {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px 70px;
    margin-top: 24px;
}
@media (max-width: 860px) {
    #v3-top { padding: 30px 16px 20px; }
    #v2-wrap.v3 { padding: 0 16px 50px; }
}

/* --- End-of-page: two big "browse the whole catalog" buttons --- */
.v3-browse-all {
    display: flex;
    gap: 16px;
    margin: 52px 0 8px;
}
.v3-browse-btn {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 30px 24px;
    border: 1px solid var(--v3-ink);
    border-radius: 4px;
    background: var(--v3-paper);
    color: var(--v3-ink);
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.v3-browse-btn:hover { background: var(--v3-ink); color: var(--v3-paper); }
.v3-browse-arrow { flex: 0 0 auto; }
@media (max-width: 600px) {
    .v3-browse-all { flex-direction: column; gap: 12px; }
    .v3-browse-btn { padding: 22px 20px; font-size: 1.12rem; }
}

/* --- Foot of the page: about us and how we curate ---------------- */
.v3-about {
    margin: 56px 0 10px;
    padding-top: 30px;
    border-top: 1px solid var(--v3-rule);
}
.v3-about-title {
    margin: 0 0 10px;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--v3-ink);
}
.v3-about-lede {
    max-width: 760px;
    margin: 0 0 30px;
    font-size: 1.04rem;
    line-height: 1.55;
    color: var(--v3-ink);
}
.v3-about-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px 34px;
}
.v3-about-block h3 {
    margin: 0 0 7px;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--v3-ink);
}
.v3-about-block p {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--v3-muted);
}
.v3-about-links {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin: 28px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--v3-rule);
    font-size: 0.92rem;
    font-weight: 600;
}
.v3-about-links a {
    color: var(--v3-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--v3-rule);
    padding-bottom: 2px;
}
.v3-about-links a:hover { border-bottom-color: var(--v3-ink); }
@media (max-width: 900px) { .v3-about-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .v3-about-grid { grid-template-columns: 1fr; gap: 22px; } }

/* --- Streamer chips (v3): one shared background, brand colour on the text ---
   The stock chip carries the brand colour in its BACKGROUND (white text). On
   v3 we flip that: a single quiet background for all, brand colour as the font.
   Light brand colours (yellows, bright green) are darkened to stay legible. */
.v3 .fv-spill {
    background: #f8f7ff;
    border-color: #e4e2dd;
    color: #10100f;
}
.v3 .fv-spill-link:hover { border-color: #b9b7b1; color: #10100f; }

.v3 .fv-spill[data-streamer="netflix"]          { color: #E50914; }
.v3 .fv-spill[data-streamer="amazon-prime"],
.v3 .fv-spill[data-streamer="amazon-video"]     { color: #0092C4; }
.v3 .fv-spill[data-streamer="hulu"]             { color: #12A75E; }
.v3 .fv-spill[data-streamer="disneyplus"],
.v3 .fv-spill[data-streamer="disney-plus"]      { color: #113CCF; }
.v3 .fv-spill[data-streamer="hbomax"],
.v3 .fv-spill[data-streamer="hbo-max"]          { color: #0A32E0; }
.v3 .fv-spill[data-streamer="paramountplus"],
.v3 .fv-spill[data-streamer="paramount-plus"]   { color: #0064FF; }
.v3 .fv-spill[data-streamer="appletv"],
.v3 .fv-spill[data-streamer="apple-tv"]         { color: #10100f; }
.v3 .fv-spill[data-streamer="peacock"]          { color: #B98A00; }
.v3 .fv-spill[data-streamer="plutotv"],
.v3 .fv-spill[data-streamer="pluto-tv"]         { color: #A98600; }
.v3 .fv-spill[data-streamer="tubitv"],
.v3 .fv-spill[data-streamer="tubi"]             { color: #6E1AFF; }
.v3 .fv-spill[data-streamer="crunchyroll"]      { color: #E5651A; }
.v3 .fv-spill[data-streamer="fubo"]             { color: #E23B0F; }
.v3 .fv-spill[data-streamer="sling"]            { color: #B87400; }
.v3 .fv-spill[data-streamer="showtime"]         { color: #C8102E; }
.v3 .fv-spill[data-streamer="starz"]            { color: #10100f; }
.v3 .fv-spill[data-streamer="mubi"]             { color: #10100f; }
.v3 .fv-spill[data-streamer="shudder"]          { color: #C61F1F; }
.v3 .fv-spill[data-streamer="free"]             { color: #5B3FA0; }

/* ===================================================================
   /all/v3/  -  the full filtered view (filters.php + filters.js) reskinned
   to the v3 palette. filter-css.css is fully tokenised, so remapping its
   --fv-* variables inside .fv-v3 recolours the whole page: white paper,
   ink text, hairline rules, a restrained (near-black) accent instead of
   the blue. The streamer chips reuse the .v3 rules above.
   ================================================================== */
body.fv-v3 {
    --fv-bg:       #ffffff;
    --fv-surface:  #ffffff;
    --fv-surface2: #f4f2ec;
    --fv-border:   var(--v3-rule);
    --fv-border2:  #ece9e2;
    --fv-accent:   var(--v3-ink);
    --fv-blue:     var(--v3-ink);
    --fv-blue-dim: rgba(16, 16, 15, 0.06);
    --fv-red:      var(--v3-accent);
    --fv-text:     var(--v3-ink);
    --fv-text2:    #2a2926;
    --fv-muted:    var(--v3-muted);
    --fv-muted2:   #b4b2ac;
}
/* Quieter chrome to match the shelf: hairline hero, restrained headings. */
/* (was body.fv-v3 { background:#fff } — the page is grey now, set below) */
body.fv-v3 #fv-hero {
    background: #ffffff;
    border-bottom: 1px solid var(--v3-rule);
}

/* /all/v3/ grid: 4 per row on desktop (filter-css default is 5), then 3, 2. */
body.fv-v3 #fv-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { body.fv-v3 #fv-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { body.fv-v3 #fv-grid { grid-template-columns: repeat(2, 1fr); } }

/* --- Rows: 3 titles, filling the full width -----------------------------
   Every row on /v3/ carries exactly 3 titles (data-v2-limit="3"), so the
   grid is 3 equal columns instead of the 4-up default - no empty slot at
   the end of the line. Below 1200px the poster-left tiles get too narrow
   at 3 across, so they stack one per line rather than leaving a hole. */
#v2-wrap.v3 .v2-row { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1200px) {
    #v2-wrap.v3 .v2-row { grid-template-columns: 1fr; }
}

/* --- One tile design on every row --------------------------------------
   The New on Streaming tiles were styled on their own (bigger poster, no
   kebab, no streamer-logo strip, buttons always visible) while the axis
   rows kept the smaller /v2/ tile. Same card everywhere now: these are the
   New-on-Streaming rules with the per-section key dropped. */
#v2-wrap.v3 .v2-row > .fv-card .fv-card-link { flex: 0 0 172px; width: 172px; }
#v2-wrap.v3 .v2-row > .fv-card .fv-cimg { width: 172px; }
#v2-wrap.v3 .fv-actions .fv-action-btn.fv-more-btn { display: none !important; }
#v2-wrap.v3 .fv-slogos { display: none !important; }
#v2-wrap.v3 .v2-row > .fv-card .fv-actions { opacity: 1; }

/* --- Staff pick credit line -------------------------------------------
   "On {service}" moved into the Dir. / country line, so its link inherits
   that line's colour and size instead of the old uppercase where-to-watch
   block (which, with its logo, is gone). */
.v3-pick-dir a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--v3-line); }
.v3-pick-dir a:hover { color: var(--v3-accent); border-bottom-color: var(--v3-accent); }

/* Row tiles: let the sentence run to 4 lines instead of 2. */
#v2-wrap.v3 .v2-row > .fv-card .fv-cexcerpt { -webkit-line-clamp: 4; }

/* No "See all" chip at the end of the bulle strip either - the h2 links out. */
#v2-wrap.v3 .v2-bulle-seeall { display: none; }

/* Tile titles can run to 3 lines before they clip. */
#v2-wrap.v3 .fv-ctitle { -webkit-line-clamp: 3; }

/* --- Locked (8.5+) tile inside the v3 rows ------------------------------
   The stock locked card is drawn white-on-dark because it normally sits on
   a blurred poster. In these rows the card is a pale panel, so the white
   text and lock were invisible - they take the page's own ink/muted here. */
#v2-wrap.v3 .fv-card-locked { color: var(--v3-ink); }
#v2-wrap.v3 .fv-card-locked .fv-ctitle { color: var(--v3-ink); }
#v2-wrap.v3 .fv-card-locked .fv-lock-icon { color: var(--v3-muted); opacity: 1; }
#v2-wrap.v3 .fv-card-locked .fv-lock-awards span { color: var(--v3-muted); }

/* ===================================================================
   PAPER: cards separate from the page by fill, not by outline.
   The page goes light grey, cards and chips stay white, and the 1px
   outlines they used to carry come off. Revert = delete this block.
   =================================================================== */
body.page-template-home-v3-php { background: #f4f4f6; }
#v2-wrap.v3 .v2-row > .fv-card { border: 0; }
#v2-wrap.v3 .v2-bulle {
    background: #ffffff;
    border-color: transparent;
}
#v2-wrap.v3 .v2-bulle:hover { border-color: var(--v3-accent); }
#v2-wrap.v3 .v2-bulle.is-active {
    background: var(--fv-accent, #e11);
    border-color: transparent;
    color: #fff;
}
/* The </> strip buttons are the same family as the chips. */
#v2-wrap.v3 .v2-bulle-nav { background: #ffffff; border-color: transparent; }

/* Section dividers off — the grey page + white cards already separate the
   rows, so the hairlines above each heading are redundant. Revert = delete. */
#v2-wrap.v3 .v2-sec-head { border-top: 0; padding-top: 0; }
#v2-wrap.v3 .v3-pro { border-top: 0; }

/* ===================================================================
   UNIFORM SCALE (sweep, 2026-07-28)
   One type ramp and one geometry set for the whole page: headings all
   at one size, card titles a step under the heading that owns them,
   the three eyebrow styles collapsed into one, and radii/gaps/section
   spacing off a single set of tokens. Scoped to /v3/.
   Revert = delete this block.
   =================================================================== */
body.page-template-home-v3-php {
    --v3-r-panel: 14px;
    --v3-r-card:  12px;
    --v3-r-media: 8px;
    --v3-gap:     16px;
    --v3-sec-gap: 44px;
}

/* Headings: section level is one size, one weight, one colour. */
#v2-wrap.v3 .v2-sec-title,
#v2-wrap.v3 .v3-shelf-title,
#v2-wrap.v3 .v3-pro-title {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--v3-ink);
}
#v2-wrap.v3 .v2-curators-title { font-size: 1.5rem; color: var(--v3-ink); }

/* A card title sits a step below the heading that owns it — it was
   running bigger (23px) than the section head (20px). */
#v2-wrap.v3 .v2-row .fv-ctitle,
#v2-wrap.v3 .v2-row .fv-ctitle a {
    font-size: 1.15rem;
    line-height: 1.3;
    font-weight: 800;
    color: var(--v3-ink);
}
#v2-wrap.v3 .v3-pick-title { color: var(--v3-ink); }
#v2-wrap.v3 .v3-recent-name { font-size: 0.95rem; color: var(--v3-ink); }

/* Eyebrows: lead, tile and "See all" were three sizes and three
   letter-spacings. One spec now; only the colour differs. */
#v2-wrap.v3 .v3-pick-added,
#v2-wrap.v3 .v3-recent-label,
#v2-wrap.v3 .v2-seeall-bottom {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}

/* Body copy: two steps, one colour. */
#v2-wrap.v3 .v3-pick-why { font-size: 1.1rem; line-height: 1.5; }
#v2-wrap.v3 .v2-row .fv-cexcerpt {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--v3-muted);
}

/* Geometry: panels 14, cards 12, media 8. */
#v2-wrap.v3 .v3-shelf,
#v2-wrap.v3 .v2-curators { border-radius: var(--v3-r-panel); }
#v2-wrap.v3 .v2-curators { padding: 30px 24px; }
#v2-wrap.v3 .v2-row > .fv-card { border-radius: var(--v3-r-card); }
#v2-wrap.v3 .v2-row > .fv-card .fv-cimg,
#v2-wrap.v3 .v3-recent-img,
#v2-wrap.v3 .v3-pick-poster { border-radius: var(--v3-r-media); }

/* Rhythm: every section leaves the same gap, every grid the same gutter. */
#v2-wrap.v3 .v2-section,
#v2-wrap.v3 .v3-shelf,
#v2-wrap.v3 .v2-curators { margin-bottom: var(--v3-sec-gap); }
#v2-wrap.v3 .v3-recent { gap: var(--v3-gap); }

/* The masthead gets its own surface: one white band running full width
   from the site header down to the search + browse bar, with the grey
   page picking up under it. */
body.page-template-home-v3-php > header,
body.page-template-home-v3-php #v3-top { background: var(--v3-paper); }
#v3-top { padding-bottom: 34px; }

/* ===================================================================
   ONE TYPEFACE. Atyp Display Regular, on everything the page draws —
   headings, body, chips, buttons, the header and the footer. The one
   weight is stretched across 100–900 so the browser synthesises bold
   rather than falling back to another family.
   =================================================================== */
@font-face {
    font-family: 'AtypV3';
    src: url('webfonts/AtypDisplay-Regular.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
/* No body-level font rule here on purpose: the theme sets
   `body { font-family: AtypBLDisplay }` and every heading inherits it, so a
   base override repaints all of them. Only the elements listed below (they
   were Roboto, or the UA's Arial) switch to Atyp Regular. */

/* The theme sets `p { font-family: Roboto }` and buttons/inputs fall back to
   the UA's Arial — those are the only non-Atyp things on the page, so they
   are the only ones switched. Anything that already names AtypBLDisplay
   (titles, score badges) is left exactly as it was. */
body.page-template-home-v3-php p,
body.page-template-home-v3-php p a,
body.page-template-home-v3-php li,
body.page-template-home-v3-php li a,
body.page-template-home-v3-php button,
body.page-template-home-v3-php input,
body.page-template-home-v3-php select,
body.page-template-home-v3-php textarea,
body.page-template-home-v3-php .v2-bulle,
body.page-template-home-v3-php .v3-brandsub,
body.page-template-home-v3-php .v3-pick-dir,
body.page-template-home-v3-php .v3-pick-why,
body.page-template-home-v3-php .fv-cexcerpt,
body.page-template-home-v3-php .fv-added,
body.page-template-home-v3-php .explainer-section,
body.page-template-home-v3-php .explainer-section a,
body.page-template-home-v3-php .legal,
body.page-template-home-v3-php .legal a,
body.page-template-home-v3-php .sidebar a {
    font-family: 'AtypV3', Helvetica, Arial, sans-serif;
}

/* Kicker above the h1. */
.v3-eyebrow {
    margin: 0 0 10px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--v3-accent);
    text-align: center;
}

/* "See all" is set in the heavy display face, same as the headings. */
#v2-wrap.v3 .v2-seeall-bottom,
.v3-shelf .v2-seeall-bottom {
    font-family: AtypBLDisplay, Helvetica, sans-serif;
    font-weight: 800;
}

/* ===================================================================
   PART 3 — /all/v3/ (was filters-v3.css, merged in 2026-07-28)
   Everything below used to live in its own file loaded only on
   /all/v3/. It is last on purpose: these rules are written to win
   against both filter-css.css and the /v3/ rules above.
   =================================================================== */

/* ===================================================================
   FILTERS V3  -  /all/v3/ (page 130478)

   The filtered view (filters.php + filters.js) redrawn in the /v3/
   design language. Written from scratch against v3.css so that file
   stays untouched: everything /all/v3/ needs is repeated here rather
   than shared, and v3.css is no longer loaded on this page.

   Loads AFTER filter-css.css, which is fully tokenised - remapping its
   --fv-* variables does most of the recolouring, and the blocks below
   only restate the pieces v3 draws differently: the masthead, the
   sidebar, the toolbar and the tile.

   Layout is deliberately left alone. filters.js switches #fv-grid
   between three views, so nothing here changes flex/grid direction on
   a card - only its surface, type and spacing.
   =================================================================== */

/* --- Tokens ------------------------------------------------------ */
body.fv-v3 {
    /* The v3 palette, restated so this file stands alone. */
    --v3-ink:    #10100f;
    --v3-muted:  #6a6a66;
    --v3-rule:   #e4e2dd;
    --v3-paper:  #ffffff;
    --v3-accent: #e0263c;
    --v3-blue:   #5065cb;
    --v3-panel:  #ffffff;   /* the tile surface — white, like the homepage rows */
    --v3-page:   #f4f4f6;   /* the grey the tiles sit on */

    /* filter-css.css reads these for everything it draws. */
    --fv-bg:       var(--v3-paper);
    --fv-surface:  var(--v3-paper);
    --fv-surface2: #f4f2ec;
    --fv-border:   var(--v3-rule);
    --fv-border2:  #ece9e2;
    --fv-accent:   var(--v3-ink);
    --fv-blue:     var(--v3-blue);
    --fv-blue-dim: rgba(80, 101, 203, 0.10);
    --fv-red:      var(--v3-accent);
    --fv-text:     var(--v3-ink);
    --fv-text2:    #2a2926;
    --fv-muted:    var(--v3-muted);
    --fv-muted2:   #b4b2ac;

    background: var(--v3-page);
    color: var(--v3-ink);
}

/* --- Masthead ----------------------------------------------------
   Same restraint as the /v3/ top: centred, one hairline underneath,
   the sentence muted and narrow enough to read in one go. */
body.fv-v3 #fv-hero {
    background: var(--v3-paper);
    border-bottom: 1px solid var(--v3-rule);
    padding: 40px 24px 26px;
    text-align: center;
}
body.fv-v3 #fv-hero h1 {
    margin: 0;
    font-size: clamp(1.9rem, 4vw, 2.7rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    font-weight: 800;
    color: var(--v3-ink);
}
body.fv-v3 #fv-hero > p {
    max-width: 56ch;
    margin: 12px auto 18px;
    font-size: 1.02rem;
    line-height: 1.5;
    color: var(--v3-muted);
}
body.fv-v3 #fv-hero .home-curators { margin-top: 4px; }
body.fv-v3 #fv-hero .home-curators-text { color: var(--v3-muted); }

/* --- Sidebar -----------------------------------------------------
   Hairlines instead of panels: the filters are a list, not a widget. */
/* The aside itself carries no surface: the white card is painted on its
   rows instead, so anything that is not a row - the Pro CTA at the bottom -
   falls outside the card and sits on the page grey. */
body.fv-v3 #fv-sidebar {
    background: transparent;
    padding: 0;
    border-radius: 0;
}
body.fv-v3 #fv-sidebar > *:not(:last-child):not(#fv-sb-close) {
    background: var(--v3-paper);
    padding-left: 10px;
    padding-right: 10px;
}
body.fv-v3 #fv-sb-head {
    padding-top: 10px;
    border-radius: 8px 8px 0 0;
}
/* The card closes on whichever row is last: the More filters button while the
   panel is shut, the panel itself once it is open. */
body.fv-v3 #fv-more-toggle,
body.fv-v3 #fv-more-filters {
    border-radius: 0 0 8px 8px;
    padding-bottom: 10px;
}
body.fv-v3 #fv-more-toggle.is-open {
    border-radius: 0;
    padding-bottom: 12px;
}
/* On mobile the aside is a slide-in drawer, so there it keeps its surface. */
@media (max-width: 860px) {
    body.fv-v3 #fv-sidebar { background: var(--v3-paper); }
}
/* Every sidebar row is the same object: a left-flush label, a glyph on the
   right, one black hairline underneath. Search filters, the collapsible
   sections and More filters all sit on that grid, so the rules below give
   them one shared border, one padding and one label type. */
body.fv-v3 .fv-sb-search,
body.fv-v3 .fv-sec,
body.fv-v3 #fv-more-toggle {
    border-top: 0;
    border-bottom: 1px solid #000000;
}
body.fv-v3 .fv-sec-hd,
body.fv-v3 #fv-more-toggle {
    padding: 12px 2px;
}
body.fv-v3 .fv-sec-label,
body.fv-v3 .fv-more-toggle-label,
body.fv-v3 .fv-sb-search input::placeholder {
    color: var(--v3-ink);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 1;
}

/* Search filters: the input is drawn as a label row, not a field. No box,
   no radius, text flush with the section labels above and below it, and the
   loupe moved to the right where the sections keep their +. */
body.fv-v3 .fv-sb-search {
    margin: 0;
}
body.fv-v3 .fv-sb-search input {
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--v3-ink);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 12px 24px 12px 2px;
}
body.fv-v3 .fv-sb-search input:focus { border-color: transparent; outline: none; }
body.fv-v3 .fv-sb-search-icon {
    left: auto;
    right: 2px;
    color: var(--v3-ink);
}
body.fv-v3 #fv-search-input {
    border: none;
    border-radius: 999px;
    background: var(--v3-paper);
    color: var(--v3-ink);
}
body.fv-v3 #fv-search-input:focus { border-color: var(--v3-ink); outline: none; }

/* The CTA is the one child left off the white card, so it needs no surface of
   its own - the page grey shows through, with a gap above it. */
body.fv-v3 .fv-sb-tagline,
body.fv-v3 .fv-sb-tagline-cta {
    display: block;
    margin-top: 16px;
    padding: 0 2px 4px;
    background: transparent;
    color: var(--v3-ink);
    text-decoration: none;
}

/* --- Toolbar -----------------------------------------------------
   Count line, active chips, view + sort controls: all hairline pills. */
body.fv-v3 #fv-bar {
    border-bottom: 1px solid var(--v3-rule);
    padding-bottom: 12px;
}
body.fv-v3 #fv-count-line {
    color: var(--v3-muted);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
body.fv-v3 #fv-count-combined { color: var(--v3-ink); }
body.fv-v3 .fv-chip {
    border: 1px solid var(--v3-rule);
    border-radius: 999px;
    background: transparent;
    color: var(--v3-ink);
    font-size: 0.82rem;
    font-weight: 600;
}
body.fv-v3 .fv-chip:hover { border-color: var(--v3-ink); }
/* One control, three instances. The stock CSS wraps the view buttons in a
   bordered box with dividers inside, so they read as a segmented control
   next to two free-standing pills - three different objects in one row.
   The box is dissolved here and every control in the row becomes the same
   32px hairline pill: the loupe, each view button and the sort menu. */
body.fv-v3 #fv-view-toggle {
    border: 0;
    background: transparent;
    overflow: visible;
    height: auto;
    gap: 6px;
}
body.fv-v3 .fv-search-wrap { gap: 6px; }
body.fv-v3 #fv-bar-actions button,
body.fv-v3 #fv-view-toggle .fv-view-btn,
body.fv-v3 .fv-dd-toggle,
body.fv-v3 #fv-bar-filters-btn {
    box-sizing: border-box;
    height: 32px;
    padding: 0 14px;
    border: 1px solid var(--v3-rule);
    border-radius: 999px;
    background: var(--v3-paper);
    color: var(--v3-ink);
    font-size: 0.85rem;
    font-weight: 600;
}
/* The two icon-only pills are circles rather than short capsules. */
body.fv-v3 #fv-view-toggle .fv-view-btn,
body.fv-v3 #fv-bar-actions #fv-search-toggle {
    width: 32px;
    padding: 0;
    justify-content: center;
}
body.fv-v3 #fv-view-toggle .fv-view-btn.is-active,
body.fv-v3 #fv-view-toggle .fv-view-btn.is-active:hover {
    background: var(--v3-ink);
    border-color: var(--v3-ink);
    color: var(--v3-paper);
}
body.fv-v3 #fv-bar-actions button:hover,
body.fv-v3 .fv-dd-toggle:hover {
    color: var(--v3-ink);
    border-color: var(--v3-ink);
}
body.fv-v3 .fv-dd-menu {
    border: 1px solid var(--v3-rule);
    border-radius: 12px;
    background: var(--v3-paper);
    box-shadow: none;
}

/* --- The tile ----------------------------------------------------
   The /v3/ row card: pale panel, 12px corner, 10px of air, the site's
   own score badge on the poster and the sentence running to 4 lines.
   No layout rules here - each view keeps the arrangement it ships. */
body.fv-v3 #fv-grid .fv-card {
    background: var(--v3-panel);
    border: 0;
    border-radius: 12px;
    padding: 10px;
    box-shadow: none;
}
body.fv-v3 #fv-grid .fv-cimg { border-radius: 8px; overflow: hidden; }
body.fv-v3 #fv-grid .fv-ctitle,
body.fv-v3 #fv-grid .fv-ctitle a {
    font-family: AtypBLDisplay, Helvetica, sans-serif;
    font-size: 23px;
    line-height: 1.28;
    font-weight: 700;
    color: var(--v3-ink);
    text-decoration: none;
}
body.fv-v3 #fv-grid .fv-cexcerpt,
body #fv-wrap.fv-v3-wrap #fv-grid p.fv-cexcerpt {
    font-size: 0.88rem;
    line-height: 1.6;
    color: #444;
    -webkit-line-clamp: 4;
}
/* The kebab is noise on a page that already has every filter open. */
body.fv-v3 #fv-grid .fv-actions .fv-action-btn.fv-more-btn { display: none !important; }
/* Card buttons stay put rather than fading in - the /v3/ rows do the same. */
body.fv-v3 #fv-grid .fv-actions { opacity: 1; }

/* Locked (8.5+) tiles: white-on-black by default (the black comes from an
   inline style, hence the !important). On /v3/ they are the same pale panel
   as every other tile with ink text, so they are here too. */
body.fv-v3 #fv-grid .fv-card-locked {background: #000000 !important;color: #ffffff;}
body.fv-v3 #fv-grid .fv-card-locked .fv-ctitle {color: #ffffff;}
body.fv-v3 #fv-grid .fv-card-locked .fv-lock-icon {color: #ffffff;opacity: 1;}
body.fv-v3 #fv-grid .fv-card-locked .fv-lock-awards span {color: #f5d76e;}

/* --- Streamer chips ----------------------------------------------
   Same paper chip with the service's own colour on the label, exactly
   as on /v3/ (copied here so this page no longer needs v3.css). */
body.fv-v3 .fv-spill {
    background: #f8f7ff;
    border-color: var(--v3-rule);
    color: var(--v3-ink);
}
body.fv-v3 .fv-spill-link:hover { border-color: #b9b7b1; color: var(--v3-ink); }
body.fv-v3 .fv-spill[data-streamer="netflix"]          { color: #E50914; }
body.fv-v3 .fv-spill[data-streamer="amazon-prime"],
body.fv-v3 .fv-spill[data-streamer="amazon-video"]     { color: #0092C4; }
body.fv-v3 .fv-spill[data-streamer="hulu"]             { color: #12A75E; }
body.fv-v3 .fv-spill[data-streamer="disneyplus"],
body.fv-v3 .fv-spill[data-streamer="disney-plus"]      { color: #113CCF; }
body.fv-v3 .fv-spill[data-streamer="hbomax"],
body.fv-v3 .fv-spill[data-streamer="hbo-max"]          { color: #0A32E0; }
body.fv-v3 .fv-spill[data-streamer="paramountplus"],
body.fv-v3 .fv-spill[data-streamer="paramount-plus"]   { color: #0064FF; }
body.fv-v3 .fv-spill[data-streamer="appletv"],
body.fv-v3 .fv-spill[data-streamer="apple-tv"]         { color: #10100f; }
body.fv-v3 .fv-spill[data-streamer="peacock"]          { color: #B98A00; }
body.fv-v3 .fv-spill[data-streamer="plutotv"],
body.fv-v3 .fv-spill[data-streamer="pluto-tv"]         { color: #A98600; }
body.fv-v3 .fv-spill[data-streamer="tubitv"],
body.fv-v3 .fv-spill[data-streamer="tubi"]             { color: #6E1AFF; }
body.fv-v3 .fv-spill[data-streamer="crunchyroll"]      { color: #E5651A; }
body.fv-v3 .fv-spill[data-streamer="fubo"]             { color: #E23B0F; }
body.fv-v3 .fv-spill[data-streamer="sling"]            { color: #B87400; }
body.fv-v3 .fv-spill[data-streamer="showtime"]         { color: #C8102E; }
body.fv-v3 .fv-spill[data-streamer="starz"]            { color: #10100f; }
body.fv-v3 .fv-spill[data-streamer="mubi"]             { color: #10100f; }
body.fv-v3 .fv-spill[data-streamer="shudder"]          { color: #C61F1F; }
body.fv-v3 .fv-spill[data-streamer="free"]             { color: #5B3FA0; }

/* --- Grid density ------------------------------------------------
   The tile carries a 23px title and four lines of text, so it needs
   more width than the stock 5-up: 4 across, then 3, then 2. */
body.fv-v3 #fv-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { body.fv-v3 #fv-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { body.fv-v3 #fv-grid { grid-template-columns: repeat(2, 1fr); } }

/* ===================================================================
   ONE TYPEFACE, same as /v3/: Atyp Display Regular on everything.
   =================================================================== */
@font-face {
    font-family: 'AtypV3';
    src: url('webfonts/AtypDisplay-Regular.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
/* No body-level font rule here on purpose: the theme sets
   `body { font-family: AtypBLDisplay }` and every heading inherits it, so a
   base override repaints all of them. Only the elements listed below (they
   were Roboto, or the UA's Arial) switch to Atyp Regular. */

/* The theme sets `p { font-family: Roboto }` and buttons/inputs fall back to
   the UA's Arial — those are the only non-Atyp things on the page, so they
   are the only ones switched. Anything that already names AtypBLDisplay
   (titles, score badges) is left exactly as it was. */
body.fv-v3 p,
body.fv-v3 p a,
body.fv-v3 li,
body.fv-v3 li a,
body.fv-v3 button,
body.fv-v3 input,
body.fv-v3 select,
body.fv-v3 textarea,
body.fv-v3 .v2-bulle,
body.fv-v3 .v3-brandsub,
body.fv-v3 .v3-pick-added,
body.fv-v3 .v3-pick-dir,
body.fv-v3 .v3-pick-why,
body.fv-v3 .v3-recent-label,
body.fv-v3 .v2-seeall-bottom,
body.fv-v3 .fv-cexcerpt,
body.fv-v3 .fv-added {
    font-family: 'AtypV3', Helvetica, Arial, sans-serif;
}


body #fv-wrap {
    background: none;
}

/* The arrival eyebrows are set in the heavy display face, like the headings. */
#v2-wrap.v3 .v3-pick-added,
#v2-wrap.v3 .v3-recent-label {
    font-family: AtypBLDisplay, Helvetica, sans-serif;
    font-weight: 800;
}

/* ===================================================================
   TAXONOMY HUBS — /mood/, /genre/, /language/, /award/, /country/
   These run on hub-v3.php, which carries the homepage's body class, so
   everything above already applies. Only the term buttons need saying.
   =================================================================== */
.v3-hub-terms { margin-top: 22px; }
.v3-hub-terms .top-terms,
.v3-hub-terms .homepage-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0 auto 8px;
    max-width: 980px;
}
.v3-hub-terms .tag-cloud-link {
    /* The buttons sit on the white masthead, so they take the page grey as
       their fill — the inverse of the chips down in the rows. */
    background: #f4f4f6;
    border: 0;
    border-radius: 999px;
    padding: 7px 15px;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--v3-ink, #10100f);
    text-decoration: none;
    transition: color 0.15s;
}
.v3-hub-terms .tag-cloud-link:hover { color: var(--v3-accent, #e0263c); }
.v3-hub-terms .top-term { font-size: 0.95rem; padding: 9px 19px; }