/* Criterion-inspired clean design */

   :root {
    --fv-bg: #f7f7ff;
    --fv-surface: #f7f7ff;
    --fv-surface2:  #f7f7f7;
    --fv-border:    #e0e0e0;
    --fv-border2:   #ebebeb;
    --fv-accent:    #5064cb;
    --fv-blue:      #5064cb;
    --fv-blue-dim:  rgba(80,100,203,0.10);
    --fv-red:       #ff2500;
    --fv-text:      #1a1a1a;
    --fv-text2:     #333;
    --fv-muted:     #444;
    --fv-muted2:    #bbb;
    --fv-sb-w:      280px;
}

/* Reset */
#fv-wrap *, #fv-wrap *::before, #fv-wrap *::after { box-sizing: border-box; margin: 0; }
#fv-wrap button {font-family: inherit;cursor: pointer;/* padding-right: 10px; */}
#fv-wrap a.imdb      {text-decoration: none;color: inherit;background-color: F5DE50;padding: 2px;}
#fv-wrap img    { display: block; }

/* Page wrapper full width */
#fv-wrap {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    max-width: 100%;
    margin: 0;
    padding: 40px 60px 80px;
    background: var(--fv-bg);
    color: var(--fv-text);
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    min-height: 100vh;
    font-size: 14px;
    line-height: 1.55;
}

/* Sidebar */
#fv-sidebar {
    width: var(--fv-sb-w);
    min-width: var(--fv-sb-w);
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--fv-surface);
    scrollbar-width: thin;
    scrollbar-color: var(--fv-border) transparent;
}
#fv-sidebar::-webkit-scrollbar { width: 3px; }
#fv-sidebar::-webkit-scrollbar-track { background: transparent; }
#fv-sidebar::-webkit-scrollbar-thumb { background: #ccc; border-radius: 2px; }

/* Sidebar uses atyp display font everywhere — labels, pills, numbers, badges */
#fv-sidebar,
#fv-sidebar * { font-family: 'atypbldisplay', Georgia, serif; }

#fv-sb-head {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 0 12px;
}
#fv-sb-close {
    display: none;
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--fv-text);
    cursor: pointer;
    border-radius: 50%;
    z-index: 5;
}
#fv-sb-close:hover { background: var(--fv-surface2); }
@media (max-width: 860px) {
    #fv-sb-close { display: inline-flex; }
}
#fv-clear-btn {
    background: none;
    border: none;
    color: var(--fv-accent);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0;
    cursor: pointer;
}
#fv-clear-btn[hidden] { display: none; }
#fv-clear-btn:hover { text-decoration: underline; }

.fv-sb-search {
    position: relative;
    margin-bottom: 12px;
}
.fv-sb-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
    pointer-events: none;
}
.fv-sb-search input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px 8px 32px;
    border: 1px solid var(--fv-border);
    border-radius: 6px;
    background: var(--fv-surface, #fff);
    color: var(--fv-text);
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.12s;
    -webkit-appearance: none;
    appearance: none;
}
.fv-sb-search input:focus { border-color: var(--fv-accent, #ff2500); }
.fv-sb-search input:focus + .fv-sb-search-icon,
.fv-sb-search input:not(:placeholder-shown) + .fv-sb-search-icon { color: var(--fv-text); }
.fv-sb-search input::-webkit-search-cancel-button { cursor: pointer; }

/* Streamers section: 4-col grid of bordered tiles */
.fv-streamers-section { padding: 4px 0 14px; }
#fv-wrap .fv-geo-toggle {
    display: flex;
    gap: 6px;
    margin: 0 0 10px;
}
.fv-geo-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border: 1px solid var(--fv-border);
    border-radius: 4px;
    opacity: 0.55;
    transition: opacity 0.15s, border-color 0.15s;
}
.fv-geo-flag.is-active { opacity: 1; border-color: var(--fv-text); }
.fv-geo-flag:hover { opacity: 0.9; }
.fv-geo-flag img { display: block; }
.fv-streamers-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    max-height: 90px;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.fv-streamers-grid.is-exp { max-height: 2000px; }
.fv-logo-btn {
    height: 37px;
    background: #fff;
    border: 1px solid var(--fv-border);
    /* border-radius: 6px; */
    padding: 2px 5px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.fv-logo-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.fv-logo-btn:hover:not(.is-active) { border-color: #999; }
.fv-logo-btn.is-active {
    background: #e6e8ff;
    border-color: var(--fv-accent);
}
.fv-view-more-btn {
    display: block;
    margin: 12px auto 0;
    padding: 9px 22px;
    border: none;
    background: #e6e8ff;
    color: var(--fv-accent);
    font-family: 'atypbldisplay', Georgia, serif;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s;
}
.fv-view-more-btn:hover { background: #d8dcff; }

/* Type dropdown — sidebar variant of fv-dd-toggle */
.fv-sb-dropdown { padding: 12px 0; }
.fv-sb-dropdown .fv-dd-toggle {
    width: 100%;
    justify-content: space-between;
    padding: 11px 14px;
    font-size: 12px;
    font-weight: 700;
    color: var(--fv-text);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.fv-sb-dropdown .fv-dd-menu {
    left: 0;
    right: 0;
    min-width: 0;
}
.fv-sb-dropdown .fv-dd-opt {
    font-family: 'atypbldisplay', Georgia, serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 12px;
}

/* Collapsible sidebar sections — clean horizontal rows with +/x toggle */
.fv-sec { }
.fv-sec-hd {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 12px 2px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    gap: 8px;
}
.fv-sec-hd:hover .fv-sec-label { color: var(--fv-accent); }
.fv-sec-label {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fv-text);
    transition: color 0.15s;
}
.fv-sec-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.fv-sec-badge {
    background: var(--fv-accent);
    color: #fff;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 10px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fv-sec-badge[hidden] { display: none; }
.fv-plus {
    color: var(--fv-text);
    transition: transform 0.25s ease;
    flex-shrink: 0;
}
.fv-sec:not(.is-collapsed) .fv-plus { transform: rotate(45deg); }

.fv-sec-body {
    overflow: hidden;
    max-height: 600px;
    opacity: 1;
    transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.2s ease;
    padding: 0 2px 16px;
}
.fv-sec.is-collapsed .fv-sec-body {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* My Lists row buttons (still uses fv-type-btn for shared styling) */
.fv-type-row {
    display: flex;
    gap: 0;
}
.fv-type-btn {
    flex: 1;
    padding: 10px 8px;
    border: none;
    background: #5064cb24;
    color: var(--fv-muted);
    font-size: 11px;
    font-weight: 600;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: background 0.15s, color 0.15s;
}
.fv-type-btn.is-active {
    background: #5064cb;
    color: #fff;
}
.fv-type-btn:hover:not(.is-active) { background: var(--fv-surface2); color: var(--fv-text); }

/* Taxonomy pills */
.fv-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    max-height: 150px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #ccc transparent;
    padding: 1px;
}
.fv-pills::-webkit-scrollbar { width: 3px; }
.fv-pills::-webkit-scrollbar-thumb { background: #ccc; }
.fv-pill {
    padding: 6px 14px;
    border: none;
    background: #fff;
    color: var(--fv-muted);
    font-size: 11px;
    font-weight: 500;
    font-family: inherit;
    white-space: nowrap;
    transition: all 0.15s;
    text-transform: capitalize;
}
.fv-pill.is-active {
    background: var(--fv-text);
    border-color: var(--fv-text);
    color: #fff;
}
.fv-pill:hover:not(.is-active) {
    border-color: #444;
    color: var(--fv-text);
}

/* Dual-range slider */
.fv-slider-wrap {
    position: relative;
    height: 28px;
    display: flex;
    align-items: center;
    margin: 10px 0 4px;
    padding: 0 2px;
    max-width: 96%;
}
.fv-track {
    position: absolute;
    left: 0; right: 0;
    height: 2px;
    background: var(--fv-border);
    pointer-events: none;
}
.fv-fill {
    position: absolute;
    height: 100%;
    background: var(--fv-text);
}
.fv-thumb {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: none;
    outline: none;
}
.fv-thumb::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--fv-text);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--fv-border);
    cursor: pointer;
    pointer-events: all;
    transition: transform 0.12s;
}
.fv-thumb::-webkit-slider-thumb:active { transform: scale(1.3); }
.fv-thumb::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--fv-text);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--fv-border);
    cursor: pointer;
    pointer-events: all;
}
.fv-slider-labels {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    color: var(--fv-muted);
    margin-top: 6px;
}
.fv-slider-labels .fv-val {
    color: var(--fv-text);
    font-weight: 700;
    min-width: 32px;
}
.fv-slider-labels .fv-val:last-child { text-align: right; }

/* Hero banner */
/* Section nav (What to Watch / Best Streaming Services) */
#fv-section-nav {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: 24px;
}
.fv-snav-btn {
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--fv-text);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}
.fv-snav-btn:hover { color: var(--fv-accent); border-bottom-color: var(--fv-accent); }
.fv-snav-btn.is-active {
    color: var(--fv-muted);
    border-bottom-color: var(--fv-muted);
    pointer-events: none;
}

#fv-hero {
    text-align: center;
    padding: 20px 20px 40px;
    background: #fff;
    border-bottom: 1px solid var(--fv-border);
}
#fv-hero h1 {
    font-family: 'atypbldisplay', Georgia, serif;
    font-size: clamp(26px, 4vw, 48px);
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 12px;
    color: #000;
}
#fv-hero h1 a {
    color: var(--fv-accent);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
}
#fv-hero p {
    font-size: 15px;
    color: #444;
    margin: 0;
    line-height: 1.6;
}
#fv-hero .fv-hero-how {
    color: var(--fv-accent);
    text-decoration: underline;
    font-size: 14px;
    cursor: pointer;
    margin-left: 4px;
}

/* Main content area */
#fv-content { flex: 1; min-width: 0; }

/* Toolbar */
#fv-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding-bottom: 10px;
    margin-bottom: 0px;
}
#fv-count-info {
    font-family: 'atypbldisplay', Georgia, serif;
    font-size: 14px;
    color: var(--fv-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Active filter chips — full row below the count */
.fv-active-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    flex-basis: 100%;
    order: 5;
    margin-top: 4px;
}
.fv-active-chips[hidden] { display: none; }
.fv-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 4px 4px 10px;
    background: #e6e8ff;
    color: var(--fv-accent);
    border: none;
    border-radius: 999px;
    font-family: 'atypbldisplay', Georgia, serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.12s;
}
.fv-chip:hover { background: #d8dcff; }
.fv-chip-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--fv-accent);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    font-weight: 800;
}
#fv-count-info strong {
    font-family: 'atypbldisplay', Georgia, serif;
    color: var(--fv-text);
    font-size: 16px;
    font-weight: 700;
}
#fv-criteria-btn {
    background: none; border: none; font-size: 15px;
    color: var(--fv-muted); cursor: pointer;
    vertical-align: middle; padding: 0 2px;
    transition: color 0.12s;
}
#fv-criteria-btn:hover { color: var(--fv-accent, #5064cb); }
.fv-explainer {
    margin-top: 12px; padding: 16px 20px;
    background: #f8f9fa; border: 1px solid #eee; border-radius: 8px;
    font-size: 13px; line-height: 1.7; color: #555;
    text-transform: none; letter-spacing: 0;
    /* Force full-row inside #fv-bar (flex container with space-between) so the box
       always renders right below the counter line, not between counter and sort. */
    flex-basis: 100%;
    order: 10;
}
.fv-explainer[hidden] { display: none; }
.fv-explainer p { margin: 0 0 8px; font-size: 14px; }
.fv-explainer ul { margin: 0; padding-left: 18px; }
.fv-explainer li { margin-bottom: 4px; }
.fv-explainer strong { color: #1a1a1a; }
#fv-ooc-criteria-btn {
    background: none; border: none; font-size: 15px;
    color: var(--fv-muted); cursor: pointer;
    vertical-align: middle; padding: 0 2px;
    transition: color 0.12s;
}
#fv-ooc-criteria-btn:hover { color: var(--fv-accent, #5064cb); }
/* Sort dropdown inherits button style from #fv-bar-actions */
.fv-dropdown { position: relative; }
.fv-dd-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border: 1px solid var(--fv-border);
    background: #fff;
    font-family: 'atypbldisplay', Georgia, serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--fv-muted);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.fv-dd-toggle:hover { color: var(--fv-text); border-color: #444; }

/* Search: icon button + expanding input */
.fv-search-wrap { display: inline-flex; align-items: center; gap: 0; }
.fv-search-input {
    width: 0;
    padding: 0;
    border: 1px solid var(--fv-border);
    background: #fff;
    font-family: 'atypbldisplay', Georgia, serif;
    font-size: 12px;
    color: var(--fv-text);
    height: 32px;
    box-sizing: border-box;
    opacity: 0;
    margin-left: 0;
    transition: width 0.22s ease, padding 0.22s ease, opacity 0.18s ease, margin-left 0.22s ease, border-color 0.15s ease;
    outline: none;
    pointer-events: none;
}
.fv-search-input::placeholder { color: var(--fv-muted); }
.fv-search-input:focus { border-color: #444; }
.fv-search-wrap.is-open .fv-search-input {
    width: 220px;
    padding: 0 12px;
    opacity: 1;
    margin-left: 6px;
    pointer-events: auto;
}
@media (max-width: 480px) {
    .fv-search-wrap.is-open .fv-search-input { width: 160px; }
}
.fv-dd-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 100;
    background: #fff;
    border: 1px solid var(--fv-border);
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    min-width: 140px;
    padding: 4px 0;
}
.fv-dd-menu[hidden] { display: none; }
.fv-dd-opt {
    display: block;
    width: 100%;
    padding: 9px 16px;
    text-align: left;
    font-family: 'atypbldisplay', Georgia, serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--fv-muted);
    background: none;
    border: none;
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
}
.fv-dd-opt:hover { background: var(--fv-surface2); color: var(--fv-text); }
.fv-dd-opt.is-active {
    background: var(--fv-accent);
    color: #fff;
    font-weight: 700;
}
.fv-dd-opt.is-active:hover { background: var(--fv-accent); color: #fff; }

/* Redesign notice */
#fv-redesign-notice {
    margin-bottom: 30px;
    border-bottom: 1px solid var(--fv-border);
}
#fv-redesign-toggle {
    display: block;
    width: 100%;
    padding: 10px 0;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--fv-accent);
    cursor: pointer;
    text-align: left;
}
#fv-redesign-toggle:hover { text-decoration: underline; }
#fv-redesign-body {
    padding: 0 0 16px;
    font-size: 14px;
    line-height: 1.65;
    color: #666;
}
#fv-redesign-body[hidden] { display: none; }
#fv-redesign-body p { margin: 0 0 8px; }
#fv-redesign-body ul { margin: 0 0 10px; padding-left: 20px; }
#fv-redesign-body li { margin-bottom: 4px; }
#fv-redesign-body a { color: var(--fv-accent) !important; text-decoration: underline; font-weight: 600; }

/* Card grid */
#fv-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    transition: opacity 0.15s ease;
}
#fv-grid.fv-grid-loading {
    opacity: 0.35;
    pointer-events: none;
}

/* Card Criterion clean style */
.fv-card {
    background: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--fv-border);
}
.fv-card {
    /* transition: transform 0.25s ease, box-shadow 0.25s ease; */
}
.fv-card:hover {
    /* transform: translateY(-4px); */
    /* box-shadow: 0 12px 28px rgba(0,0,0,0.1); */
}
.fv-card:hover .fv-cimg > img {
    transform: scale(1.03);
    transition: transform 0.4s ease;
}
.fv-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Poster clean, no overlay */
.fv-cimg {
    position: relative;
    aspect-ratio: 1/1;
    background: var(--fv-surface2);
    overflow: hidden;
}
.fv-cimg > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.3s ease;
}
.fv-no-thumb {
    width: 100%; height: 100%;
    background: #f0f0f0;
}
.fv-pro-hue {
    width: 100%; height: 100%;
    position: absolute;
    inset: 0;
}
.fv-blur { filter: blur(14px); transform: scale(1.15) !important; }

/* Subtle gradient for type/awards badge readability at bottom of poster */
.fv-cimg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.6)  0%,
        rgba(0,0,0,0.25) 20%,
        transparent        45%
    );
    pointer-events: none;
    z-index: 1;
}
/* Type/awards meta on poster (title moved out to card-bottom) */
.fv-card-overlay {
    display: block;
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 20px 12px 10px;
    z-index: 2;
}

/* Card bottom text below poster */
.fv-card-bottom {
    padding: 14px 0 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.fv-card-grow { flex: 1; }

/* Meta line: type + rating */
.fv-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}
.fv-type-text {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--fv-muted);
}
.fv-rating-text {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fv-accent);
}

/* Streaming logos */
.fv-slogos {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
}
.fv-spill {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border: 1px solid var(--fv-border);
    background: #fff;
    color: #444;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
    text-decoration: none;
    transition: border-color 0.12s, color 0.12s;
}
.fv-spill-link:hover { border-color: #444; color: var(--fv-text); }
.fv-card-locked .fv-spill { cursor: default; }

/* Streamer brand colors — moved from JS-inlined styles (filters.js
 * fvStreamerStyle) to CSS so the single page, homepage, and any other
 * consumer share one source of truth. Keyed by data-streamer="<slug>". */
.fv-spill[data-streamer="free"]            {background: #493083;color:#ffffff;border-color:#6B46C1;font-weight:800;letter-spacing:0.06em;}

/* Synthetic FREE button in the sidebar streamer grid. Purple pill with
 * white text; no logo image (none exists). Matches the FREE pill style
 * used on cards via .fv-spill[data-streamer="free"]. */
body .fv-logo-btn.fv-logo-free, .fv-logo-btn[data-streamer="free"] {
    background: #493083;
    border-color: #493083;
    color: #ffffff;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 0.08em;
    text-align: center;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.fv-logo-btn.fv-logo-free:hover,
.fv-logo-btn[data-streamer="free"]:hover { background:#553C9A; border-color:#553C9A; }
.fv-logo-btn.fv-logo-free.is-active,
.fv-logo-btn[data-streamer="free"].is-active { background:#553C9A; border-color:#553C9A; color:#fff; }
.fv-spill[data-streamer="netflix"]         { background:#E50914; color:#ffffff; border-color:#E50914; }
.fv-spill[data-streamer="disneyplus"],
.fv-spill[data-streamer="disney-plus"]     { background:#113CCF; color:#ffffff; border-color:#113CCF; }
.fv-spill[data-streamer="hulu"]            { background:#1CE783; color:#0B0B0B; border-color:#1CE783; }
.fv-spill[data-streamer="hbomax"],
.fv-spill[data-streamer="hbo-max"]         { background:#002BE7; color:#ffffff; border-color:#002BE7; }
.fv-spill[data-streamer="paramountplus"],
.fv-spill[data-streamer="paramount-plus"]  { background:#0064FF; color:#ffffff; border-color:#0064FF; }
.fv-spill[data-streamer="amazon-prime"],
.fv-spill[data-streamer="amazon-video"]    { background:#00A8E1; color:#ffffff; border-color:#00A8E1; }
.fv-spill[data-streamer="appletv"],
.fv-spill[data-streamer="apple-tv"]        { background:#000000; color:#ffffff; border-color:#000000; }
.fv-spill[data-streamer="crunchyroll"]     { background:#F47521; color:#ffffff; border-color:#F47521; }
.fv-spill[data-streamer="plutotv"],
.fv-spill[data-streamer="pluto-tv"]        { background:#FFEC00; color:#0B0B0B; border-color:#FFEC00; }
.fv-spill[data-streamer="tubitv"],
.fv-spill[data-streamer="tubi"]            { background:#6E1AFF; color:#ffffff; border-color:#6E1AFF; }
.fv-spill[data-streamer="bbciplayer"]      { background:#FF4C98; color:#ffffff; border-color:#FF4C98; }
.fv-spill[data-streamer="itv"],
.fv-spill[data-streamer="itvx"]            { background:#FFC900; color:#0B0B0B; border-color:#FFC900; }
.fv-spill[data-streamer="channel4"]        { background:#1E1E1E; color:#AECC53; border-color:#1E1E1E; }
.fv-spill[data-streamer="stan"]            { background:#00B7E5; color:#ffffff; border-color:#00B7E5; }
.fv-spill[data-streamer="peacock"]         { background:#FCCC12; color:#0B0B0B; border-color:#FCCC12; }
.fv-spill[data-streamer="discoveryplus"]   { background:#2175D9; color:#ffffff; border-color:#2175D9; }
.fv-spill[data-streamer="starz"]           { background:#000000; color:#ffffff; border-color:#000000; }
.fv-spill[data-streamer="showtime"]        { background:#C8102E; color:#ffffff; border-color:#C8102E; }
.fv-spill[data-streamer="mubi"]            { background:#000000; color:#ffffff; border-color:#000000; }
.fv-spill[data-streamer="shudder"]         { background:#0F0F0F; color:#C61F1F; border-color:#0F0F0F; }
.fv-spill[data-streamer="fubo"]            { background:#FA4616; color:#ffffff; border-color:#FA4616; }
.fv-spill[data-streamer="sling"]           { background:#FFA500; color:#0B0B0B; border-color:#FFA500; }
.fv-spill[data-streamer="youtubetv"],
.fv-spill[data-streamer="youtube"]         { background:#FF0000; color:#ffffff; border-color:#FF0000; }
.fv-spill[data-streamer="frndlytv"]        { background:#00A19A; color:#ffffff; border-color:#00A19A; }
.fv-spill[data-streamer="philo"]           { background:#6C2C91; color:#ffffff; border-color:#6C2C91; }
.fv-spill[data-streamer="directv"]         { background:#00549A; color:#ffffff; border-color:#00549A; }
.fv-spill[data-streamer="espnplus"]        { background:#FF0033; color:#ffffff; border-color:#FF0033; }
.fv-spill[data-streamer="amc"],
.fv-spill[data-streamer="amcplus"]         { background:#B40A26; color:#ffffff; border-color:#B40A26; }
.fv-spill[data-streamer="hayu"]            { background:#000000; color:#ffffff; border-color:#000000; }
.fv-spill[data-streamer="cbcgem"]          { background:#ED1C24; color:#ffffff; border-color:#ED1C24; }
.fv-spill[data-streamer="cbsallaccess"]    { background:#0064FF; color:#ffffff; border-color:#0064FF; }
.fv-spill[data-streamer="nowtv"]           { background:#00C9C8; color:#ffffff; border-color:#00C9C8; }
.fv-spill[data-streamer="britbox"]         { background:#1A1F71; color:#ffffff; border-color:#1A1F71; }
.fv-spill[data-streamer="acorntv"]         { background:#3F8C5A; color:#ffffff; border-color:#3F8C5A; }
.fv-spill[data-streamer="curiositystream"] { background:#FB6500; color:#ffffff; border-color:#FB6500; }
.fv-spill[data-streamer="kanopy"]          { background:#0B5BD3; color:#ffffff; border-color:#0B5BD3; }
.fv-spill[data-streamer="criterionchannel"]{ background:#0F0F0F; color:#ffffff; border-color:#0F0F0F; }
.fv-spill[data-streamer="plex"]            { background:#E5A00D; color:#0B0B0B; border-color:#E5A00D; }
.fv-spill[data-streamer="roku"]            { background:#662D91; color:#ffffff; border-color:#662D91; }
.fv-spill[data-streamer="xumo"]            { background:#0066FF; color:#ffffff; border-color:#0066FF; }
.fv-spill[data-streamer="freevee"]         { background:#34D399; color:#0B0B0B; border-color:#34D399; }
.fv-spill[data-streamer="cwseed"]          { background:#1F8A1F; color:#ffffff; border-color:#1F8A1F; }
/* Non-streamer pills on single posts: IMDb / Rotten Tomatoes / Wikipedia */
.fv-spill[data-streamer="imdb"]            { background:#F5C518; color:#0B0B0B; border-color:#F5C518; }
.fv-spill[data-streamer="rt"]              { background:#FA320A; color:#ffffff; border-color:#FA320A; }
.fv-spill[data-streamer="wiki"]            { background:#ffffff; color:#0B0B0B; border-color:#ddd; }

/* Rotating quick-tips strip sitting between the toolbar and the grid. */
#fv-wrap .fv-tip {
    margin: 0 0 16px;
    padding: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #555;
}
#fv-wrap .fv-tip-line { display: block; }
#fv-wrap .fv-tip-line[hidden] { display: none; }
#fv-wrap .fv-tip-prefix { font-weight: 700; color: #1a1a1a; }
#fv-wrap .fv-tip a { color: var(--fv-blue); text-decoration: underline; }
#fv-wrap .fv-tip a:hover { color: #404fa0; }
#fv-wrap .fv-tip-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px; height: 16px;
    margin: 0 2px;
    padding: 0;
    border: 1px solid #999;
    border-radius: 50%;
    background: transparent;
    color: #666;
    font-family: Georgia, serif;
    font-size: 11px;
    font-style: italic;
    line-height: 1;
    cursor: pointer;
    vertical-align: -2px;
}
#fv-wrap .fv-tip-info:hover { border-color: #555; color: #222; }
#fv-wrap .fv-tip-info-body {
    display: block;
    margin: 6px 0 0;
    padding: 8px 10px;
    background: #f6f6f7;
    border-left: 3px solid var(--fv-blue);
    color: #444;
    font-size: 12px;
    line-height: 1.45;
    border-radius: 0 4px 4px 0;
}
#fv-wrap .fv-tip-info-body[hidden] { display: none; }

/* Non-Pro filter prompt: thin horizontal banner shown above the grid when
 * any filter is active. Render-conditional in filters.php (skipped for Pro
 * users), visibility toggled in filters.js when hasFilters flips. */
/* Scoped to #fv-wrap so `#fv-wrap * { margin: 0 }` reset doesn't strip
 * margin-bottom — the universal reset has higher specificity than .class. */
#fv-wrap .fv-filter-banner {
    display: block;
    margin: 0 0 24px;
    padding: 10px 16px;
    background: #1a0a26;
    border: 1px solid #3a1a55;
    color: #d9c2ff;
    font-size: 13px;
    line-height: 1.5;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}
#fv-wrap .fv-filter-banner[hidden] { display: none; }
#fv-wrap .fv-filter-banner:hover {
    background: #20102e;
    border-color: #6b46c1;
    color: #efe2ff;
    text-decoration: none;
}
#fv-wrap .fv-filter-banner-pro {
    display: inline-block;
    padding: 2px 7px;
    margin: 0 2px;
    background: #a800ff;
    color: #fff;
    font-family: 'atypbldisplay', Georgia, serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    border-radius: 3px;
    vertical-align: 1px;
}
#fv-wrap .fv-filter-banner-promo {
    color: #ffd700;
    font-weight: 600;
}

/* Sidebar streaming block on single posts — sits above the Genre/Director
 * list and is separated by a soft bottom border. */
.fv-single-sidebar .fv-sb-streamers {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 0 16px;
    margin: 0 0 18px;
    border-bottom: 1px solid #eee;
}

/* Title sits in card-bottom on white, above streamers */
#fv-wrap .fv-ctitle {
    font-size: 21px;
    font-weight: 700;
    font-family: 'atypbldisplay', Georgia, serif;
    line-height: 1.2;
    color: var(--fv-text);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin: 0 0 8px;
}
.fv-ctitle a { color: inherit; text-decoration: none; }
.fv-ctitle a:hover { color: var(--fv-accent); }

/* Type label inline after title on overlay */
.fv-ovl-meta {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
}
.fv-ovl-type {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.55);
}
#fv-wrap .fv-ovl-sep {
    margin: 0 8px;
    color: rgba(255,255,255,0.3);
    font-size: 10px;
}
.fv-ovl-awards {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #ecc94b;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70%;
}

/* Excerpt */
.fv-cexcerpt {
    font-size: 14px;
    line-height: 1.6;
    color: #444;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    margin: 10px 0;
}

/* Pro-only recommendation message — match excerpt size */
.fv-pro-msg {
    font-size: 14px;
    line-height: 1.6;
    color: #444;
    margin: 10px 0 0;
}

/* External links */
.fv-ext-links {
    display: flex;
    align-items: center;
    gap: 6px;
}
.fv-ext-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 700;
    text-decoration: none;
    color: #666;
    transition: color 0.12s;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid var(--fv-border);
}
.fv-ext-link:hover { color: var(--fv-text); border-color: #444; }
.fv-ext-link.imdb  { }
.fv-ext-link.rt    { border: none; padding: 3px; }
.fv-ext-link.wiki  { border: none; padding: 3px; }

/* Streaming logo truncation */
.fv-slogo-h { display: none; }
.fv-slogos.is-exp .fv-slogo-h { display: inline-block; }
.fv-slogos.is-exp .fv-logos-more { display: none; }
.fv-logos-more {
    display: inline-flex;
    align-items: center;
    height: 16px;
    padding: 0 6px;
    border: 1px solid var(--fv-border);
    background: #fff;
    color: #444;
    font-size: 9px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
    transition: border-color 0.12s, color 0.12s;
}
.fv-logos-more:hover { border-color: #444; color: var(--fv-text); }

/* Action buttons minimal bottom row */
.fv-actions {
    display: flex;
 border-top: 1px solid var(--fv-border); 
    margin: 0;
}
.fv-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex: 1;
    padding: 10px 6px;
    border: none;
    border-left: 1px solid var(--fv-border);
    background: transparent;
    color: #444;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: color 0.12s;
    line-height: 1;
}
.fv-action-btn:first-child { border-left: none; }
.fv-action-btn:hover { color: var(--fv-text); }
/* Override the inline width/height on the SVG icons (they're set to 12-13
 * in filters.js fvActionsHTML); scale up to 15-16 to match the 12px text. */
.fv-action-btn svg { flex-shrink: 0; width: 15px; height: 15px; }
.fv-action-btn.fv-loved-btn svg { width: 16px; height: 16px; }
.fv-action-btn.fv-queue-btn.is-active { color: var(--fv-accent); }
.fv-action-btn.fv-seen-btn.is-active  { color: var(--fv-accent); }

/* Top-right badge stack (rating + optional Very Best) */
.fv-top-badges {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    display: flex;
    align-items: stretch;
}

/* Rating badge top right of image */
.fv-rating {
    padding: 8px 13px;
    font-family: 'atypbldisplay', sans-serif;
    font-size: 23px;
    font-weight: 700;
    background: #ff2500;
    color: #fff;
    text-align: center;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The Very Best badge (sits to the left of the rating) */
.fv-vbest {
    background: #5064cb;
    color: #fff;
    padding: 5px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-family: 'atypbldisplay', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.fv-vbest img {
    width: 22px;
    height: 16px;
    display: block;
    margin-bottom: 3px;
}
.fv-vbest-lbl { display: block; }

/* Sidebar: The Very Best toggle */
.fv-vbest-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    padding: 4px 0;
    user-select: none;
}
.fv-vbest-toggle input { width: 16px; height: 16px; cursor: pointer; }
/* Old type tag hidden */
/* Highlighted rating (8.0+) — same red as default now */
.fv-rating-hi { background: #ff2500; }

.fv-type-tag { display: none; }

/* Locked-card top-left discount badge */
.locked-discount {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 5;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    background: #ff2500;
    color: #fff;
    padding: 5px 8px;
    font-family: 'atypbldisplay', Georgia, serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.locked-discount-first { font-size: 13px; }
.locked-discount-second { font-size: 12px; opacity: 0.92; letter-spacing: 0.08em; }

/* Pro lock */
.fv-lock-overlay {
    position: absolute;
    inset: 0; z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0.78) 100%);
    padding: 16px;
    text-align: center;
}
.fv-lock-icon {
    color: #fff;
    opacity: 0.7;
}
.fv-lock-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #fff;
    opacity: 0.6;
}
/* More Filters toggle */
#fv-more-filters { margin-top: 4px; }
#fv-more-filters-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 14px 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--fv-muted);
    transition: color 0.15s;
}
#fv-more-filters-btn:hover { color: var(--fv-text); }
#fv-more-filters-btn svg { transition: transform 0.2s; }
#fv-more-filters.is-open #fv-more-filters-btn svg { transform: rotate(45deg); }
#fv-more-filters-body[hidden] { display: none; }

.fv-sb-tagline {
    font-family: 'atypbldisplay', Georgia, serif;
    font-style: oblique;
    font-size: 30px;
    font-weight: 700;
    color: #000;
    text-align: left;
    padding: 24px 0 8px;
    letter-spacing: -0.02em;
    line-height: 1.1;
    word-spacing: -3px;
}
a.fv-sb-tagline-cta {
    display: block;
    color: #000;
    text-decoration: none;
    transition: transform 0.15s;
}
a.fv-sb-tagline-cta:hover { color: #000; }
a.fv-sb-tagline-cta:hover .fv-sb-tagline-chev { transform: translateX(4px); }
.fv-sb-tagline-chev {
    display: inline-block;
    vertical-align: -4px;
    margin-left: 2px;
    transition: transform 0.15s;
}

.fv-lock-awards {
    font-size: 13px;
    font-weight: 700;
    color: #ecc94b;
    line-height: 1.4;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-shadow: 0 1px 3px rgba(0,0,0,0.55);
    max-width: 90%;
}
.fv-lock-awards span {
    white-space: nowrap;
}
.fv-unlock-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 9px 22px;
    background: #5065cc;
    color: #ffffff;
    margin-top: 8px;
    transition: background 0.15s, transform 0.15s;
    font-family: 'atypbldisplay';
}
.fv-unlock-btn:hover { background: #3d50b5; transform: translateY(-1px); }
.fv-unlock-main {
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    line-height: 1;
}
.fv-unlock-sub {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: rgba(255,255,255,0.85);
    line-height: 1.2;
    margin-top: 3px;
}

/* No results */
#fv-no-results {
    display: none;
    text-align: center;
    padding: 80px 0;
    color: var(--fv-muted);
    font-size: 16px;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
#fv-no-results.is-visible { display: flex; }
#fv-no-results button {
    padding: 10px 24px;
    background: var(--fv-text);
    color: #fff;
    border: none;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Error state */
#fv-error {
    display: none;
    text-align: center;
    padding: 80px 0;
    color: var(--fv-muted);
    font-size: 16px;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
#fv-error.is-visible { display: flex; }
#fv-error p { margin: 0; max-width: 420px; }
#fv-error button {
    padding: 10px 24px;
    background: var(--fv-text);
    color: #fff;
    border: none;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
}

/* Infinite scroll loader */
#fv-sentinel { padding: 40px 0; display: flex; justify-content: center; }
#fv-sentinel[hidden] { display: none; }
#fv-loader { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; }
.fv-loader-fallback {
    flex: 0 0 100%;
    text-align: center;
    margin-top: 4px;
    background: transparent;
    border: 0;
    color: var(--fv-blue);
    font-size: 12px;
    font-weight: 500;
    text-decoration: underline;
    cursor: pointer;
    padding: 4px 8px;
}
.fv-loader-fallback:hover { color: #404fa0; }
#fv-loader .fv-loader-dot {
    display: block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--fv-muted);
    animation: fv-bounce 1.1s infinite ease-in-out;
}
#fv-loader .fv-loader-dot:nth-child(1) { animation-delay: 0s; }
#fv-loader .fv-loader-dot:nth-child(2) { animation-delay: 0.18s; }
#fv-loader .fv-loader-dot:nth-child(3) { animation-delay: 0.36s; }
#fv-loader .fv-loader-text {
    margin-left: 6px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--fv-muted);
}
/* Loading skeleton */
#fv-skeleton {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 36px 24px;
}
#fv-skeleton.is-hidden { display: none; }
.fv-skel-card { overflow: hidden; }
.fv-skel-img {
    aspect-ratio: 2 / 3;
    background: linear-gradient(110deg, #f0f0f0 30%, #fafafa 50%, #f0f0f0 70%);
    background-size: 200% 100%;
    animation: fv-shimmer 1.4s ease infinite;
}
.fv-skel-body { padding: 14px 0 0; display: flex; flex-direction: column; gap: 8px; }
.fv-skel-line {
    height: 10px;
    border-radius: 4px;
    background: linear-gradient(110deg, #f0f0f0 30%, #fafafa 50%, #f0f0f0 70%);
    background-size: 200% 100%;
    animation: fv-shimmer 1.4s ease infinite;
}
@keyframes fv-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@media (max-width: 860px) {
    #fv-skeleton { grid-template-columns: repeat(3, 1fr); gap: 24px 16px; }
}
@media (max-width: 480px) {
    #fv-skeleton { grid-template-columns: repeat(2, 1fr); gap: 20px 12px; }
}

@keyframes fv-bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.3; }
    40%           { transform: scale(1);   opacity: 1;   }
}

/* Mobile toggle button */
#fv-mob-toggle {
    display: none;
    position: fixed;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    padding: 12px 26px;
    background: var(--fv-text);
    color: #fff;
    border: none;
    font-size: 11px;
    font-weight: 700;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    gap: 8px;
    align-items: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.fv-mob-badge {
    background: var(--fv-accent);
    color: #fff;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 10px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Mobile sidebar overlay */
.fv-sb-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 998;
}

/* Responsive */
@media (max-width: 1080px) {
    #fv-grid { grid-template-columns: repeat(4, 1fr); }
    /* Collapse the sidebar earlier so the grid gets full width on the
       awkward 860-1080px range (cramped 4-col + sidebar before). Mobile
       drawer styles apply from here down. */
    #fv-wrap {
        flex-direction: column;
        padding: 16px 16px 80px;
    }
    #fv-sidebar {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        z-index: 999;
        transform: translateX(-110%);
        transition: transform 0.3s ease;
        max-height: 100vh;
        width: 300px;
        min-width: 0;
        border-right: 1px solid var(--fv-border);
        background: #fff;
        padding: 20px;
    }
    #fv-sidebar.is-open { transform: translateX(0); }
    #fv-mob-toggle { display: flex; }
    .fv-sb-overlay.is-open { display: block; }
}
@media (max-width: 860px) {
    #fv-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px 12px;
    }
}
@media (max-width: 480px) {
    #fv-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 12px;
    }
    #fv-wrap { padding: 12px 12px 80px; }
}

/* Very Best filter active: 3 cards per row, image-left / info-right split */
#fv-grid.fv-grid-vbest {
    grid-template-columns: repeat(3, 1fr);
}
#fv-grid.fv-grid-vbest .fv-card {
    flex-direction: row;
    align-items: stretch;
}
#fv-grid.fv-grid-vbest .fv-card > * {
    flex: 1 1 50%;
    min-width: 0;
    width: 50%;
}
#fv-grid.fv-grid-vbest .fv-card-link {
    display: block;
}
#fv-grid.fv-grid-vbest .fv-cimg {
    width: 100%;
    aspect-ratio: 2/3;
}
@media (max-width: 480px) {
    #fv-grid.fv-grid-vbest { grid-template-columns: 1fr; }
}
/* TVB: left-align locked card text + streamers */
#fv-grid.fv-grid-vbest .fv-card-locked .fv-card-bottom {
    text-align: left;
    padding: 22px 14px 14px;
}
#fv-grid.fv-grid-vbest .fv-card-locked .fv-slogos {
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
}
/* TVB: more top padding on the right column */
#fv-grid.fv-grid-vbest .fv-card-bottom { padding-top: 22px; padding-left: 14px; padding-right: 14px; }
#fv-grid.fv-grid-vbest .fv-card-info { padding: 0 14px; }
/* TVB: show full excerpt (no line clamp) */
#fv-grid.fv-grid-vbest .fv-cexcerpt,
#fv-grid.fv-grid-vbest p.fv-cexcerpt,
body #fv-wrap #fv-grid.fv-grid-vbest p.fv-cexcerpt {
    -webkit-line-clamp: unset;
    display: block;
    overflow: visible;
}


button.fv-action-btn.fv-dismiss-btn {
    background-color: #5064cb1a;
}

/* Toolbar action buttons (Surprise / Match / Roulette) */
#fv-bar-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-left: auto; /* Pin to right edge of #fv-bar even when wrapped to its own row */
    /* overflow-x: scroll; */
}
#fv-bar-actions button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border: 1px solid var(--fv-border);
    background: #fff;
    font-size: 11px;
    font-weight: 600;
    color: var(--fv-muted);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}
#fv-bar-actions button:hover {
    color: var(--fv-text);
    /* border-color: #444; */
}

/* Surprise highlight animation */
@keyframes fv-surprise-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(80,100,203,0.5); }
    50%  { box-shadow: 0 0 0 12px rgba(80,100,203,0); }
    100% { box-shadow: 0 0 0 0 rgba(80,100,203,0); }
}
.fv-surprise-highlight {
    animation: fv-surprise-pulse 0.8s ease 2;
    outline: 2px solid var(--fv-accent);
    outline-offset: 4px;
    z-index: 10;
    position: relative;
}

/* Toast notifications */
#fv-toast-wrap {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    align-items: center;
    pointer-events: none;
}
.fv-toast {
    padding: 10px 20px;
    background: var(--fv-text);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: auto;
    max-width: 380px;
    text-align: center;
}
.fv-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.fv-toast strong { font-weight: 700; }

/* Modal (shared by Roulette + Quiz) */
.fv-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fv-modal[hidden] { display: none; }
.fv-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
}
.fv-modal-box {
    position: relative;
    background: #fff;
    padding: 40px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    animation: fv-modal-in 0.25s ease;
}
@keyframes fv-modal-in {
    from { opacity: 0; transform: translateY(20px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.fv-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: none;
    border: none;
    font-size: 22px;
    color: var(--fv-muted);
    cursor: pointer;
    line-height: 1;
    padding: 4px;
}
.fv-modal-close:hover { color: var(--fv-text); }
.fv-modal-box h2 {
    font-family: 'atypbldisplay', Georgia, serif;
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--fv-text);
}
.fv-modal-sub {
    font-size: 14px;
    color: var(--fv-muted);
    margin: 0 0 24px;
}
.fv-modal-btn {
    display: inline-block;
    padding: 10px 28px;
    background: var(--fv-text);
    color: #fff;
    border: none;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: background 0.15s;
    margin-top: 16px;
}
.fv-modal-btn:hover { background: #333; }

/* Mood Roulette wheel */
#fv-wheel-wrap {
    position: relative;
    width: 280px;
    height: 280px;
    margin: 0 auto 8px;
}
#fv-wheel { display: block; }
#fv-wheel-pointer {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 18px solid var(--fv-text);
    z-index: 2;
}
#fv-wheel-result {
    margin-top: 16px;
}
#fv-wheel-result p {
    font-size: 14px;
    color: var(--fv-text);
    margin: 0;
}
#fv-wheel-result strong {
    color: var(--fv-accent);
    font-size: 18px;
    font-family: 'atypbldisplay', Georgia, serif;
}

/* Movie Match Quiz */
.fv-quiz-box { max-width: 440px; }
.fv-quiz-q {
    font-size: 16px;
    font-weight: 700;
    font-family: 'atypbldisplay', Georgia, serif;
    color: var(--fv-text);
    margin: 0 0 20px;
}
.fv-quiz-opts {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.fv-quiz-opts button {
    padding: 14px 16px;
    border: 1px solid var(--fv-border);
    background: #fff;
    font-size: 14px;
    font-weight: 500;
    color: var(--fv-text);
    cursor: pointer;
    text-align: left;
    transition: all 0.15s;
}
.fv-quiz-opts button:hover {
    border-color: var(--fv-accent);
    background: rgba(80,100,203,0.04);
}
.fv-quiz-opts button.is-picked {
    border-color: var(--fv-accent);
    background: var(--fv-accent);
    color: #fff;
}
#fv-quiz-progress {
    height: 3px;
    background: var(--fv-border);
    margin-top: 28px;
    overflow: hidden;
}
#fv-quiz-bar {
    height: 100%;
    width: 0%;
    background: var(--fv-accent);
    transition: width 0.4s ease;
}

/* Responsive: hide toolbar buttons text on mobile */
@media (max-width: 860px) {
    #fv-bar-actions button span { display: none; }
    #fv-bar-actions button { padding: 8px; }
    #fv-bar {gap: 6px;/* overflow-x: scroll; */}
}

/* In-toolbar mobile FILTERS button: hidden on desktop (sidebar is visible
   inline there). On mobile, force the toolbar actions onto their own row
   so the count line sits alone above, and pin the FILTERS button to the
   far left of that row. Selectors prefixed with #fv-bar-actions so they
   out-specificity the generic `#fv-bar-actions button { display: inline-
   flex }` rule above — without that, the default `display: none` loses
   the cascade and the button leaks onto desktop. */
#fv-bar-actions #fv-bar-filters-btn { display: none !important; }
@media (max-width: 860px) {
    #fv-bar { flex-wrap: wrap; }
    #fv-count-info { flex: 1 1 100%; }
    #fv-bar #fv-bar-actions {
        flex: 1 1 100%;
        width: 100%;
        justify-content: flex-start;
        margin-left: 0;
    }
    #fv-bar-actions #fv-bar-filters-btn {
        display: inline-flex !important;
        align-items: center;
        gap: 6px;
        margin-right: auto;
        padding: 8px 12px !important;
        background: var(--fv-text);
        color: #fff;
        border: none;
        font-family: inherit;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        cursor: pointer;
    }
    #fv-bar-actions #fv-bar-filters-btn span { display: inline !important; }
    #fv-bar-actions #fv-bar-filters-btn:hover { background: var(--fv-accent); }
}

/* Added styles */

/* Hero closable with gradient */
#fv-hero { position: relative; background: linear-gradient(135deg, #eef0ff 0%, #f5e6ff 50%, #ffe8ec 100%); }
#fv-hero.is-hidden { display: none; }
#fv-hero-close {
    position: absolute; top: 12px; right: 16px;
    background: none; border: none; font-size: 22px;
    color: #999; cursor: pointer; padding: 4px 8px; line-height: 1;
    transition: color 0.12s;
}
#fv-hero-close:hover { color: #333; }

/* Post-/plans/ recovery offer banner */
.fv-offer-hero {
    text-align: center;
    padding: 30px 20px 34px;
    background: linear-gradient(135deg, #fff1e0 0%, #ffe2ef 50%, #efe7ff 100%);
    border-bottom: 1px solid var(--fv-border);
}
.fv-offer-hero[hidden] { display: none; }
.fv-offer-variant {
    display: none;
    max-width: 640px;
    margin: 0 auto;
}
.fv-offer-variant.is-active { display: block; }
.fv-offer-eyebrow {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #b8581a;
    margin-bottom: 12px;
}
.fv-offer-variant[data-variant="20"] .fv-offer-eyebrow { color: #5b3aaa; }
.fv-offer-title {
    font-family: 'atypbldisplay', Georgia, serif;
    font-size: clamp(24px, 3.6vw, 38px);
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 10px;
    color: #000;
}
.fv-offer-desc {
    font-size: 15px;
    color: #444;
    line-height: 1.55;
    margin: 0 auto 16px;
    max-width: 520px;
}
.fv-offer-perk {
    font-size: 13px;
    font-weight: 700;
    color: #237a3b;
    margin: -6px 0 14px;
    letter-spacing: 0.02em;
}
.fv-offer-perk::before {
    content: "✓ ";
    font-weight: 900;
}
.fv-offer-timer {
    font-size: 13px;
    font-weight: 700;
    color: #b8581a;
    margin: 0 0 16px;
    letter-spacing: 0.04em;
}
.fv-offer-timer [data-offer-countdown] {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 16px;
    background: rgba(184,88,26,0.10);
    padding: 3px 10px;
    border-radius: 4px;
    margin-left: 6px;
    letter-spacing: 0.06em;
}
.fv-offer-cta {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 14px 36px;
    background: #1a1a1a;
    color: #fff;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    transition: transform 0.15s, box-shadow 0.15s;
    margin-top: 4px;
}
.fv-offer-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.24);
    color: #fff;
    text-decoration: none;
}
.fv-offer-cta-main {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.fv-offer-cta-sub {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255,255,255,0.72);
    letter-spacing: 0.02em;
}
@media (max-width: 600px) {
    .fv-offer-hero { padding: 24px 16px 26px; }
    .fv-offer-cta { padding: 12px 28px; }
    .fv-offer-desc { font-size: 14px; }
}

/* Out-of-catalog inline-counter accent (in the combined layout) */
#fv-ooc-count { color: #6b6b6b; }

/* Out-of-catalog cards: faded poster + small badge */
.fv-card-ooc { opacity: 0.82; }
.fv-card-ooc:hover { opacity: 1; }
.fv-card-ooc .fv-cimg { filter: grayscale(0.25); transition: filter 0.2s; }
.fv-card-ooc:hover .fv-cimg { filter: grayscale(0); }
.fv-ooc-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: relative;
    margin-bottom: 6px;
    padding: 3px 8px;
    background: #f3eee5;
    color: #8a5b1a;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    border-radius: 3px;
}
/* Homepage card variant of the info button — darker rim for the cream badge */
.fv-card .fv-ooc-info {
    border-color: #8a5b1a;
    color: #8a5b1a;
}
.fv-card .fv-ooc-info:hover { background: rgba(138,91,26,0.12); }

/* Card hover */
.fv-card {/* transition: transform 0.25s ease, box-shadow 0.25s ease; */}
.fv-card:hover {/* transform: translateY(-4px); *//* box-shadow: 0 12px 28px rgba(0,0,0,0.1); */border-color: #5064cc;}
.fv-card:hover .fv-cimg > img { transform: scale(1.03); transition: transform 0.4s ease; }

/* Criteria info box */
#fv-criteria-btn {
    background: none; border: none; font-size: 15px;
    color: var(--fv-muted); cursor: pointer;
    vertical-align: middle; padding: 0 2px;
    transition: color 0.12s;
}
#fv-criteria-btn:hover { color: var(--fv-accent, #5064cb); }
.fv-explainer {
    margin-top: 12px; padding: 16px 20px;
    background: #f8f9fa; border: 1px solid #eee; border-radius: 8px;
    font-size: 13px; line-height: 1.7; color: #555;
    text-transform: none; letter-spacing: 0;
    /* Force full-row inside #fv-bar (flex container with space-between) so the box
       always renders right below the counter line, not between counter and sort. */
    flex-basis: 100%;
    order: 10;
}
.fv-explainer[hidden] { display: none; }
.fv-explainer p { margin: 0 0 8px; font-size: 14px; }
.fv-explainer ul { margin: 0; padding-left: 18px; }
.fv-explainer li { margin-bottom: 4px; }
.fv-explainer strong { color: #1a1a1a; }
#fv-ooc-criteria-btn {
    background: none; border: none; font-size: 15px;
    color: var(--fv-muted); cursor: pointer;
    vertical-align: middle; padding: 0 2px;
    transition: color 0.12s;
}
#fv-ooc-criteria-btn:hover { color: var(--fv-accent, #5064cb); }

/* High-rated badge (8.0+) */
.fv-rating-hi {background: #ff2500;z-index: 99;}

.fv-card-info {
    padding: 0 10px;
}

#fv-wrap button:hover {
    background-color: #ebedff;
}

/* Pro-locked card: one continuous block, no top/bottom split.
   Renders as a single flex column over the hue gradient. */
.fv-card-locked {
    border-color: transparent;
    color: #fff;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100%;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}
.fv-card-locked:hover { opacity: 1; }
.fv-card-locked .fv-locked-toprow {
    position: absolute;
    top: 0; left: 0; right: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px;
    z-index: 3;
    pointer-events: none;
}
.fv-card-locked .fv-locked-toprow .fv-top-badges,
.fv-card-locked .fv-locked-toprow .locked-discount { pointer-events: auto; }
.fv-card-locked .fv-locked-toprow .fv-top-badges {
    position: static;
    margin: 0;
}
.fv-card-locked .locked-discount {
    position: static;
    transform: none;
}
.fv-card-locked .fv-locked-hero {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    padding: 56px 16px 18px;
}
.fv-card-locked .fv-lock-icon { color: #fff; opacity: 0.85; }
.fv-card-locked .fv-lock-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(255,255,255,0.75);
    margin: 0;
}
#fv-wrap .fv-card-locked .fv-ctitle {
    color: #fff;
    margin: 0;
}
.fv-card-locked .fv-lock-awards {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #f5d76e;
    font-weight: 600;
}
.fv-card-locked .fv-pro-msg {
    color: rgba(255,255,255,0.88);
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    max-width: 28ch;
}
.fv-card-locked .fv-similar-excerpt strong { color: #fff; }
.fv-card-locked .fv-slogos {
    justify-content: center;
    align-items: center;
    margin-top: 4px;
}
.fv-card-locked .fv-unlock-btn {
    margin-top: 6px;
}

body #fv-wrap p.fv-cexcerpt {
    margin: 10px 0;
}

.fv-card-locked .fv-slogos {
    align-items: center;
    text-align: center;
    justify-content: center;
}

/* Locked queue/seen buttons */
.fv-actions-locked .fv-btn-locked {
    padding: 8px 6px;
    line-height: 1.2;
}

@media (max-width: 480px) {
    .fv-rating {
        font-size: 23px;
        padding: 8px 9px;
    }
}

.page-id-17 header {
    background-color: #f7f7ff;
}

/* Old geo toggle/flag rules removed — see new sidebar block at top */
/* Text fallback for missing streamer logos */
.fv-logo-btn.fv-logo-text {
  font-size: 10px;
  font-weight: 600;
  color: #555;
  padding: 4px 8px;
  white-space: nowrap;
}
.fv-slogo-text {
  font-size: 11px;
  font-weight: 600;
  color: #000000;
  white-space: nowrap;
}
.fv-geo-code {
  display: block;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  background: #5065cc;
  border-radius: 2px;
  padding: 2px 4px;
  line-height: 1;
  letter-spacing: 0.5px;
  vertical-align: top;
  margin-left: -2px;
  margin-top: 1px;
  position: absolute;
  right: 1px;
  bottom: 1px;
}
.fv-pro-lock-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #9f7aea;
  background: #faf5ff;
  border: 1px solid #e9d8fd;
  border-radius: 4px;
  padding: 2px 8px;
  text-decoration: none;
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 2;
}
.fv-pro-lock-badge:hover {
  background: #e9d8fd;
  color: #6b46c1;
}
.fv-sec { position: relative; }
.fv-locked-section {
  opacity: 0.65;
  pointer-events: none;
}
.fv-actions-locked .fv-btn-locked {
  opacity: 0.85;
}
.fv-actions-locked .fv-btn-locked:hover {
  opacity: 1;
  background: #f7fafc;
}
.fv-inline-pro,
.fv-inline-count {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  color: #9f7aea;
  background: #faf5ff;
  border: 1px solid #e9d8fd;
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 4px;
  vertical-align: middle;
  line-height: 1.4;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Pro-locked filter sections (Mood / Language / MPAA / Awards / Catalog)
   for non-Pro users. Section header stays identical to free filters —
   only the inline PRO chip (rendered via fv_sec_head('Label', true))
   signals it's locked. Controls inside take a purple text + purple
   border treatment. Clicking any control opens the upsell modal. */
.fv-sec-pro .fv-pill,
.fv-sec-pro .fv-type-btn {
  color: #9f7aea;
  border: 1px solid #c4a8e8;
  background: #fff;
}
.fv-sec-pro .fv-pill:hover,
.fv-sec-pro .fv-type-btn:hover {
  background: #faf5ff;
  border-color: #9f7aea;
  color: #6b46c1;
}
.fv-sec-pro .fv-type-btn.is-active {
  background: #faf5ff;
  border-color: #9f7aea;
  color: #6b46c1;
}
.fv-btn-with-lock {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  opacity: 0.7;
  color: #718096;
  text-decoration: none;
}
.fv-btn-with-lock:hover {
  opacity: 1;
  color: #6b46c1;
}
.fv-pro-discount-badge {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
  background: #e53e3e;
  color: #fff;
  font-family: 'atypbldisplay', sans-serif;
  font-size: 20px;
  font-weight: 700;
  padding: 6px 10px;
  border-top-left-radius: 8px;
  text-decoration: none;
  line-height: 1;
  text-align: center;
}
.fv-pro-discount-badge:hover {
  background: #c53030;
}
.fv-geo-suggest {
  /* max-width: 1280px; */
  /* margin: 12px auto 0; */
  padding: 10px 16px;
  background: #faf5ff;
  border: 1px solid #e9d8fd;
  /* border-radius: 6px; */
  font-size: 14px;
  line-height: 1.5;
  color: #a911ff;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.fv-geo-suggest img { width: 20px; height: 14px; flex-shrink: 0; }
.fv-geo-suggest a {
  color: #6b46c1;
  font-weight: 600;
  text-decoration: underline;
}
.fv-geo-suggest a:hover { color: #553c9a; }
@media (max-width: 600px) {
  .fv-geo-suggest {/* margin: 8px 12px 0; */font-size: 13px;}
}

a.fv-slogo-link {
    position: relative;
}

.fv-slogos span.fv-geo-code {
    bottom: -10px;
}

/* Force cursor:pointer on all clickable card / sidebar actions and links —
   bumps specificity past the parent WP theme that resets cursor on <a>. */
button.fv-action-btn,
a.fv-action-btn,
button.fv-type-btn,
button.fv-list-btn,
button.fv-cat-btn,
button.fv-pill,
button.fv-logo-btn,
a.fv-card-link,
a.fv-spill-link,
a.fv-unlock-btn,
a.fv-sb-tagline-cta,
.fv-ctitle a,
#fv-wrap a { cursor: pointer; }

/* ─── Loved + Dismiss buttons ───────────────────────────────── */
/* Icon-only narrow columns: Queue + Loved. Seen + Hide flex with text.
 * Same default text color as the others (#444) — no gray. */
.fv-action-btn.fv-queue-btn,
.fv-action-btn.fv-loved-btn {
    flex: 0 0 auto;
    width: 36px;
    padding: 10px 4px;
    color: #444;
    position: relative;
}
.fv-action-btn.fv-dismiss-btn:hover { color: #c92020; }
.fv-action-btn.fv-dismiss-btn.is-active { color: #c92020; }
.fv-action-btn.fv-loved-btn:hover { color: #e53e3e; }
.fv-action-btn.fv-loved-btn.is-active { color: #e53e3e; }

/* Desktop: More button hidden. Mobile: More button replaces Queue + Loved
 * so the action row stays uncrowded in the 2-col card grid. Tap More to
 * swap Seen + Hide out for Queue + Loved (and back). */
.fv-action-btn.fv-more-btn {
    display: none;
    flex: 0 0 auto;
    width: 36px;
    padding: 10px 4px;
    color: #888;
    position: relative;
}
.fv-action-btn.fv-more-btn:hover { color: var(--fv-text); }
@media (max-width: 600px) {
    .fv-actions .fv-queue-btn,
    .fv-actions .fv-loved-btn { display: none; }
    .fv-actions .fv-more-btn  { display: inline-flex; }

    .fv-actions.is-more-open .fv-seen-btn,
    .fv-actions.is-more-open .fv-dismiss-btn { display: none; }
    .fv-actions.is-more-open .fv-queue-btn,
    .fv-actions.is-more-open .fv-loved-btn   { display: inline-flex; flex: 1; width: auto; padding: 10px 6px; }
    .fv-actions.is-more-open .fv-more-btn    { color: var(--fv-text); }
    .fv-actions.is-more-open .fv-action-mlbl { display: inline; }
}

/* Mobile-only labels for Queue + Loved — hidden everywhere except inside
 * an open mobile More menu (rule above). The default `display: none` lives
 * outside the @media block so desktop never shows the text. */
.fv-action-mlbl { display: none; margin-left: 5px; }

/* Tooltip on hover for the icon-only action buttons (Loved / Dismiss).
   Renders above the button via ::after; pointer-events:none so it doesn't
   intercept clicks. */
.fv-action-btn[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    background: #1a1a1a;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 10;
}
.fv-action-btn[data-tooltip]:hover::after,
.fv-action-btn[data-tooltip]:focus-visible::after {
    opacity: 1;
}

/* ─── Free-user upgrade modal ───────────────────────────────── */
.fv-upsell-modal[hidden] { display: none; }
.fv-upsell-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.fv-upsell-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 12, 24, 0.62);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: fvUpsellFade 0.18s ease-out;
}
@keyframes fvUpsellFade { from { opacity: 0; } to { opacity: 1; } }
.fv-upsell-card {
    box-sizing: border-box;
    position: relative;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 30px 80px rgba(15, 12, 24, 0.35);
    width: 100%;
    max-width: 440px;
    padding: 36px 32px 28px;
    animation: fvUpsellPop 0.22s cubic-bezier(0.2, 0.7, 0.3, 1.2);
    overflow: hidden;
}
@keyframes fvUpsellPop {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.fv-upsell-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: #999;
    cursor: pointer;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, color 0.12s;
}
.fv-upsell-close:hover { background: #f4f4f4; color: #222; }
.fv-upsell-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 22px;
}
.fv-upsell-brand img {
    height: 44px;
    width: auto;
    display: block;
}
.fv-upsell-brand-pro {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    padding: 0 6px;
    background: #ff2500;
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
}
.fv-upsell-title {
    font-family: 'atypbldisplay', Georgia, serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: #0f0c18;
    margin: 0 0 12px;
}
.fv-upsell-body {
    font-size: 15px;
    line-height: 1.5;
    color: #444;
    margin: 0 0 20px;
}
.fv-upsell-list {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
}
.fv-upsell-list li {
    position: relative;
    padding: 6px 0 6px 26px;
    font-size: 14px;
    line-height: 1.45;
    color: #1d1a28;
}
.fv-upsell-list li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 13px;
    width: 6px;
    height: 10px;
    border-right: 2px solid var(--fv-accent);
    border-bottom: 2px solid var(--fv-accent);
    transform: rotate(45deg);
}
.fv-upsell-cta {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    padding: 14px 20px;
    background: var(--fv-accent);
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-decoration: none;
    border-radius: 10px;
    transition: transform 0.12s, box-shadow 0.12s;
    box-shadow: 0 6px 20px rgba(168, 0, 255, 0.28);
}
.fv-upsell-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(168, 0, 255, 0.34); color: #fff; }
.fv-upsell-cta svg { transition: transform 0.15s; }
.fv-upsell-cta:hover svg { transform: translateX(3px); }
.fv-upsell-dismiss {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 10px;
    background: transparent;
    border: none;
    color: #888;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: color 0.12s;
}
.fv-upsell-dismiss:hover { color: #222; }
body.fv-modal-open { overflow: hidden; }
@media (max-width: 480px) {
    .fv-upsell-card { padding: 30px 22px 22px; max-width: 100%; }
    .fv-upsell-title { font-size: 24px; }
}

/* ─── Admin recsys debug panel ──────────────────────────────── */
.fv-recsys-debug[hidden] { display: none; }
.fv-recsys-debug {
    margin: 0 auto 16px;
    max-width: 1480px;
    padding: 12px 16px 14px;
    background: #f7f5ee;
    border: 1px solid #e7e2d3;
    border-radius: 10px;
    font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    color: #2c2a23;
}
.fv-recsys-debug-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.fv-recsys-debug-title {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 11px;
    color: #6e684f;
}
.fv-recsys-debug-meta {
    flex: 1;
    color: #8a8466;
    font-size: 11px;
}
#fv-recsys-debug-toggle {
    width: 22px;
    height: 22px;
    border: 1px solid #d8d2c0;
    background: #fff;
    border-radius: 5px;
    color: #5b5640;
    font-family: inherit;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}
#fv-recsys-debug-toggle:hover { background: #f0ecdf; }
.fv-recsys-debug[data-collapsed="1"] .fv-recsys-debug-body { display: none; }
.fv-recsys-debug-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.fv-recsys-debug-cols-3 {
    grid-template-columns: 1fr 1fr 1.2fr;
}
@media (max-width: 1100px) {
    .fv-recsys-debug-cols-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 800px) {
    .fv-recsys-debug-cols,
    .fv-recsys-debug-cols-3 { grid-template-columns: 1fr; gap: 14px; }
}
.fv-recsys-debug-cfg {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px dotted #e0dac4;
    font-size: 10px;
    color: #6e684f;
    line-height: 1.6;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    word-break: break-word;
}
.fv-recsys-debug-cfg strong { color: #2c2a23; font-weight: 700; }
.fv-recsys-debug-pick-parts {
    flex: 0 0 auto;
    color: #8a8466;
    font-size: 9px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    margin-left: 4px;
}
.fv-recsys-debug-pick-parts .ppc { color: #5a8a3a; }
.fv-recsys-debug-pick-parts .ppl { color: #9f7aea; }
.fv-recsys-debug-h {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #6e684f;
    margin-bottom: 6px;
}
.fv-recsys-debug-empty {
    color: #8a8466;
    font-style: italic;
    font-size: 12px;
}
.fv-recsys-debug-dim {
    margin-bottom: 8px;
}
.fv-recsys-debug-dim-h {
    font-size: 10px;
    font-weight: 600;
    color: #8a8466;
    margin-bottom: 3px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.fv-recsys-debug-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.fv-recsys-debug-tag {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 2px 7px;
    background: #fff;
    border: 1px solid #e0dac4;
    border-radius: 4px;
    font-size: 11px;
}
.fv-recsys-debug-tag-k { color: #2c2a23; }
.fv-recsys-debug-tag-v {
    color: var(--fv-accent);
    font-weight: 700;
    font-size: 10px;
}
.fv-recsys-debug-picks-list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: pick;
}
.fv-recsys-debug-picks-list li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 3px 0;
    border-bottom: 1px dotted #e0dac4;
    font-size: 12px;
}
.fv-recsys-debug-picks-list li:last-child { border-bottom: none; }
.fv-recsys-debug-pick-score {
    flex: 0 0 38px;
    text-align: right;
    font-weight: 700;
    color: var(--fv-accent);
}
.fv-recsys-debug-pick-title {
    flex: 1;
    color: #2c2a23;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fv-recsys-debug-pick-tags {
    flex: 0 0 auto;
    color: #8a8466;
    font-size: 10px;
}
/* ═══════════════════════════════════════════════════════════════
   AUTH POPUP MODULE
   In-context register / login / forgot-password + 4-level
   strong-preferences flow + plans. Replaces /login/ redirect for
   logged-out users clicking Queue/Seen/Loved/Dismiss on cards.
   ═══════════════════════════════════════════════════════════════ */
.fv-auth-modal[hidden] { display: none; }
.fv-auth-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.fv-auth-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 15, 20, 0.55);
  backdrop-filter: blur(2px);
}
.fv-auth-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 32px);
  overflow: auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
  padding: 32px 28px 24px;
  font-family: inherit;
  color: #1a1a1a;
}
.fv-auth-card[data-fv-auth-state="plans"] { max-width: 520px; }
.fv-auth-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: #777;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
.fv-auth-close:hover { background: #f5f5f5; color: #222; }

/* Progress bar — only visible during prefs flow */
.fv-auth-progress {
  height: 4px;
  background: #f0f0f0;
  border-radius: 2px;
  overflow: hidden;
  margin: 0 0 22px;
}
.fv-auth-progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #5064cb, #9f7aea);
  transition: width 0.35s ease;
}

/* Success flash — overlays the whole card briefly post-auth */
.fv-auth-flash[hidden] { display: none; }
.fv-auth-flash {
  position: absolute;
  inset: 0;
  background: #fff;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  animation: fvAuthFlashIn 0.25s ease;
}
.fv-auth-flash svg {
  color: #2bb673;
  margin-bottom: 10px;
}
.fv-auth-flash p {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
}
@keyframes fvAuthFlashIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

.fv-auth-pane[hidden] { display: none; }
.fv-auth-pane { display: block; }

.fv-auth-h {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 6px;
  line-height: 1.25;
  color: #111;
}
.fv-auth-sub {
  font-size: 13px;
  color: #666;
  margin: 0 0 16px;
  line-height: 1.5;
}
.fv-auth-step-label {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9f7aea;
  margin-bottom: 6px;
}

/* GIS-rendered Google button host — Google injects an iframe with the
   official branded button into this div. Center it; let GIS handle width. */
.fv-auth-google-host {
  display: flex;
  justify-content: center;
  min-height: 40px;
}
.fv-auth-google-host > div { width: 100% !important; }
.fv-auth-google-host iframe { margin: 0 auto !important; }

.fv-auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: #999;
  font-size: 12px;
}
.fv-auth-divider::before,
.fv-auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e5e5e5;
}

.fv-auth-form { display: flex; flex-direction: column; gap: 12px; }
.fv-auth-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #333;
  position: relative;
}
.fv-auth-label input {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 10px 12px;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
  color: #111;
  background: #fff;
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.fv-auth-label input:focus {
  border-color: #5064cb;
  box-shadow: 0 0 0 3px rgba(80, 100, 203, 0.15);
}
.fv-auth-link-sm {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  color: #5064cb;
  font-weight: 500;
  text-decoration: none;
}
.fv-auth-link-sm:hover { text-decoration: underline; }

.fv-auth-error[hidden] { display: none; }
.fv-auth-error {
  margin: 0;
  padding: 8px 10px;
  background: #fff1f0;
  border: 1px solid #fecaca;
  border-radius: 6px;
  color: #b91c1c;
  font-size: 12px;
}

.fv-auth-submit {
  width: 100%;
  padding: 12px;
  background: var(--fv-blue);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  transition: background 0.12s, transform 0.05s;
  margin-top: 6px;
}
.fv-auth-submit:hover:not(:disabled) { background: #404fa0; }
.fv-auth-submit:active:not(:disabled) { transform: translateY(1px); }
.fv-auth-submit:disabled { background: #d0d0d0; color: #888; cursor: not-allowed; }
.fv-auth-submit-step { margin-top: 18px; }

.fv-auth-secondary {
  width: 100%;
  padding: 11px;
  margin-top: 10px;
  background: #f3f3f3;
  color: #333;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
}
.fv-auth-secondary:hover { background: #e8e8e8; }

.fv-auth-foot {
  margin: 16px 0 0;
  font-size: 13px;
  color: #555;
  text-align: center;
}
.fv-auth-foot a { color: #5064cb; font-weight: 600; text-decoration: none; }
.fv-auth-foot a:hover { text-decoration: underline; }
.fv-auth-tos {
  margin: 14px 0 0;
  font-size: 11px;
  color: #888;
  text-align: center;
  line-height: 1.5;
}
.fv-auth-tos a { color: #888; text-decoration: underline; }

/* Step 1 — type choice row */
.fv-auth-choice-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
.fv-auth-choice {
  padding: 14px 8px;
  border: 1.5px solid #e0e0e0;
  background: #fff;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #333;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.fv-auth-choice:hover { border-color: #9f7aea; }
.fv-auth-choice.is-active {
  border-color: #5064cb;
  background: #eef0fb;
  color: #2c3a8a;
}

/* Steps 2, 3, 4 — pill grid */
.fv-auth-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0 6px;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px 2px;
}
.fv-auth-pill {
  padding: 7px 12px;
  border: 1px solid #d8d8d8;
  background: #fff;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: #333;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.fv-auth-pill:hover { border-color: #9f7aea; }
.fv-auth-pill.is-active {
  border-color: #5064cb;
  background: #5064cb;
  color: #fff;
}
.fv-auth-pill-all { font-weight: 700; }
.fv-auth-pane[data-fv-pane="pref-3"] .fv-auth-pill.is-active {
  border-color: #c92020;
  background: #c92020;
}

/* Plans */
.fv-auth-plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 18px 0 6px;
}
@media (max-width: 480px) {
  .fv-auth-plans { grid-template-columns: 1fr; }
}
.fv-auth-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 14px;
  border: 1.5px solid #e0e0e0;
  border-radius: 10px;
  text-decoration: none;
  color: #1a1a1a;
  transition: border-color 0.12s, transform 0.08s, box-shadow 0.12s;
  background: #fff;
}
.fv-auth-plan:hover {
  border-color: #5064cb;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(80, 100, 203, 0.12);
}
.fv-auth-plan-yearly {
  border-color: #9f7aea;
  background: linear-gradient(180deg, #faf5ff 0%, #fff 60%);
}
.fv-auth-plan-badge {
  position: absolute;
  top: -10px;
  right: 12px;
  background: #e53e3e;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 999px;
}
.fv-auth-plan-badge-mo {
  background: #5064cb;
}
.fv-auth-discount-flag {
  display: inline-block;
  margin: 6px 0 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c92020;
}
.fv-auth-plan-name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #666;
}
.fv-auth-plan-price { font-size: 15px; color: #444; }
.fv-auth-plan-price strong { font-size: 28px; color: #111; font-weight: 800; }
.fv-auth-plan-strike {
  font-size: 12px;
  color: #999;
  text-decoration: line-through;
}
.fv-auth-plan-bill {
  font-size: 11px;
  color: #888;
  margin-top: 2px;
}

/* ──────────────────────────────────────────────────────────────
 * Single post v2 — filters-homepage style
 * Class prefix: .fv-single-*
 * Reuses .fv-rating, .fv-badge-gold/-green/-grey, .fv-logo-btn,
 * .fv-action-btn, .fv-ooc-badge from the homepage card system.
 * Rollback target backed up before this block was added.
 * ────────────────────────────────────────────────────────────── */
.fv-single-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 16px 20px 60px;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}
.fv-single-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #555;
    text-decoration: none;
    font-size: 14px;
    padding: 8px 0;
    margin-bottom: 14px;
    transition: color 0.15s;
}
.fv-single-back:hover { color: #1a1a1a; }
.fv-single-back svg { display: block; }

.fv-single-top {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 32px;
    margin-bottom: 36px;
}
@media (max-width: 720px) {
    .fv-single-top { grid-template-columns: 1fr; gap: 20px; }
}

/* Poster on the single page reuses .fv-cimg from the homepage. The grid
   parent gives it width; aspect-ratio (1/1, set on .fv-cimg) gives it
   height. Just constrain max-width and add a corner radius. */
.fv-single-top .fv-cimg {
    width: 100%;
    max-width: 340px;
    /* border-radius: 8px; */
}
@media (max-width: 720px) {
    /* On mobile, poster spans the full screen width above the meta. */
    .fv-single-top .fv-cimg { max-width: 100%; }
}
.fv-single-top .fv-cimg .fv-no-thumb {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e6e6e6, #f8f8f8);
}
.fv-single-top .fv-ooc-badge {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(0,0,0,0.75);
    color: #fff;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 4px 8px;
    border-radius: 3px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.fv-ooc-info {
    width: 14px;
    height: 14px;
    padding: 0;
    border: 1px solid rgba(255,255,255,0.7);
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    font-style: italic;
    line-height: 1;
    cursor: pointer;
}
.fv-ooc-info:hover { background: rgba(255,255,255,0.15); }
.fv-ooc-pop {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    width: max-content;
    max-width: 260px;
    padding: 8px 10px;
    background: #fff;
    color: #111;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 11px;
    line-height: 1.4;
    text-transform: none;
    letter-spacing: normal;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    z-index: 3;
}

.fv-single-meta {
    min-width: 0;
    align-self: center; /* vertically center the meta column next to the poster */
    text-align: left;
}
.fv-single-type {
    display: inline-block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #888;
    margin-bottom: 6px;
}
/* Title size matches the legacy single template (h2.panel-title).
 * Selector includes h1.* so it beats the global `h1 { text-align: center }`
 * rule in style.css. */
h1.fv-single-title,
.fv-single-page .fv-single-title {
    font-family: 'atypbldisplay', Georgia, serif;
    font-size: clamp(30px, 4.5vw, 55px);
    line-height: 1.1;
    margin: 0 0 10px;
    padding: 0;
    font-weight: 700;
    text-align: left;
}
.fv-single-year {
    color: #888;
    font-weight: 400;
    font-size: 0.65em;
    margin-left: 6px;
}
.fv-single-headline {
    font-size: 1.05em;
    color: #555;
    font-style: italic;
    margin: 0 0 8px;
    line-height: 1.4;
}
.fv-single-tagline {
    font-style: italic;
    color: #555;
    font-size: 1.05em;
    margin: 0 0 12px;
    line-height: 1.45;
    display: none;
}

/* Streamers + IMDb/RT/Wiki: same .fv-slogos + .fv-logo-btn the homepage
   uses. Only override is the spacing on the single-page wrapper, since
   the homepage flexes them inside a card. */
.fv-single-meta .fv-slogos {
    margin: 14px 0 18px;
}
.fv-single-meta .fv-slogos-ext {
    margin: 8px 0 4px;
}

/* Poster column wraps the .fv-cimg + the action buttons so they stack
 * vertically inside the 280px-wide left grid cell. */
.fv-single-poster-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

/* Four compact action buttons under the poster — match homepage card actions
 * in look and behavior, just smaller so they fit the poster's width. */
.fv-single-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin: 0;
    width: 100%;
}
.fv-single-actions .fv-action-btn,
.fv-single-actions .fv-action-btn.fv-queue-btn,
.fv-single-actions .fv-action-btn.fv-seen-btn,
.fv-single-actions .fv-action-btn.fv-loved-btn,
.fv-single-actions .fv-action-btn.fv-dismiss-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    flex: 1 1 auto;
    padding: 6px 4px;
    border-radius: 6px;
    background: #fff;
    border: 1px solid #ddd;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #333;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    text-decoration: none;
    line-height: 1;
}
.fv-single-actions .fv-action-btn svg { width: 12px; height: 12px; flex-shrink: 0; }
.fv-single-actions .fv-action-btn:hover { border-color: #999; }
.fv-single-actions .fv-action-btn:disabled { opacity: 0.55; cursor: wait; }
.fv-single-actions .fv-action-btn.is-active { background: #1a1a1a; border-color: #1a1a1a; color: #fff; }
.fv-single-actions .fv-action-btn.fv-loved-btn.is-active   { background: #c33; border-color: #c33; color: #fff; }
.fv-single-actions .fv-action-btn.fv-dismiss-btn.is-active { background: #777; border-color: #777; color: #fff; }

/* Zone 2: watch-context strip — split in two halves on a 2-col grid.
 * Left half: IMDb / RT / Wikipedia (legacy a.button.imdb/.rt/.wikil).
 * Right half: streaming availabilities (.fv-spill text pills with brand
 * colors from filter-css.css, sized to match the left half). */
/* Watch-context strip: IMDb / RT / Wiki + streamer pills, all on one
 * single-row flex line inside the meta column. Sized to fit ~6 items on
 * desktop (~110px each) — wraps on smaller screens. */
.fv-single-context {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 14px 0 18px;
    align-items: center;
}
.fv-single-context > * { flex: 0 0 auto; }
.fv-ctx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 12px;
    border-radius: 4px;
    text-decoration: none;
    background: #fff;
    border: 1px solid #ddd;
    transition: border-color 0.15s, opacity 0.15s;
}
.fv-ctx-btn:hover { border-color: #999; opacity: 0.85; }
.fv-ctx-btn img { height: 18px; width: auto; display: block; }
.fv-ctx-imdb { background: #f5c518; border-color: #f5c518; }
.fv-ctx-rt   { background: #fa320a; border-color: #fa320a; }
.fv-ctx-wiki { background: #fff;    border-color: #ddd; }

/* Zone 3 collapsible: "More about it" — native <details> for storyline /
 * distinction / TL;DR. Closed by default; click summary to expand. */
.fv-single-more {
    margin: 24px 0 0;
    padding: 16px 18px;
    border: 1px solid #eee;
    border-radius: 8px;
    background: #fafafa;
}
.fv-single-more summary {
    cursor: pointer;
    font-family: 'atypbldisplay', Georgia, serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--fv-text);
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
}
.fv-single-more summary::-webkit-details-marker { display: none; }
.fv-single-more summary::after {
    content: '+';
    margin-left: auto;
    font-size: 1.2rem;
    color: #888;
    transition: transform 0.15s;
}
.fv-single-more[open] summary::after { content: '−'; }
.fv-single-more h4 {
    font-family: 'atypbldisplay', Georgia, serif;
    font-size: 1rem;
    margin: 18px 0 6px;
    font-weight: 700;
}
.fv-single-more h4:first-of-type { margin-top: 14px; }
.fv-single-more p {
    margin: 0 0 10px;
    line-height: 1.55;
    color: #333;
}

/* Zone 4: reception — full-width, breaks out of the body+sidebar grid. */
.fv-single-reception {
    margin: 36px 0 0;
    padding-top: 28px;
    border-top: 1px solid #eee;
}
.fv-single-reception h3 {
    font-family: 'atypbldisplay', Georgia, serif;
    font-size: 1.4rem;
    margin: 28px 0 10px;
    font-weight: 700;
}
.fv-single-reception h3:first-child { margin-top: 0; }

/* 2-col grid: body + taxonomy sidebar. Mirrors the legacy entry-extended
 * layout but with cleaner spacing. Sidebar collapses below body on mobile. */
.fv-single-bottom {
    margin-top: 28px;
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: 36px;
}
@media (max-width: 860px) {
    .fv-single-bottom { grid-template-columns: 1fr; gap: 24px; }
}

.fv-single-body {
    color: #222;
    min-width: 0;
}
.fv-single-sidebar {
    font-size: 14px;
    color: #444;
    border-left: 1px solid #eee;
    padding-left: 24px;
}
@media (max-width: 860px) {
    .fv-single-sidebar { border-left: 0; padding-left: 0; border-top: 1px solid #eee; padding-top: 16px; }
}
.fv-single-sidebar h3 {
    font-family: 'atypbldisplay', Georgia, serif;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #888;
    margin: 18px 0 4px;
    font-weight: 700;
}
.fv-single-sidebar h3:first-of-type { margin-top: 0; }
.fv-single-sidebar p {
    margin: 0 0 4px;
    line-height: 1.5;
    font-size: 14px;
}
.fv-single-sidebar a { color: var(--fv-text); text-decoration: none; border-bottom: 1px solid #ddd; }
.fv-single-sidebar a:hover { border-bottom-color: var(--fv-accent); color: var(--fv-accent); }
.fv-single-body h3 {
    font-family: 'atypbldisplay', Georgia, serif;
    font-size: 1.4rem;
    margin: 32px 0 10px;
    font-weight: 700;
}
.fv-single-body h3:first-child { margin-top: 0; }
.fv-single-body p,
.fv-single-body .entry-review {
    font-size: 16.5px;
    line-height: 1.65;
    color: #2a2a2a;
    margin: 0 0 14px;
}
.fv-single-body .entry-review p { margin-bottom: 14px; }
.fv-single-body a { color: #1a73d4; }
.fv-single-body a:hover { text-decoration: underline; }

/* ── "New On" sidebar filter ─────────────────────────────────── */
.fv-arrival-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.fv-arrival-btn { /* inherits .fv-logo-btn — no extra layout needed */ }

/* ── NEW THIS MONTH badge on tile streamer logos ─────────────── */
#fv-wrap .fv-spill-new {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 5px;
    background: #000000;
    color: #fff;
    font-family: 'atypbldisplay', sans-serif;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.4;
    vertical-align: middle;
    border-radius: 2px;
}
.fv-spill-link .fv-spill-new { color: #fff; }

/* ── Image fallback placeholder (when card thumb fails to load) ──── */
.fv-thumb-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 14px;
    color: rgba(255,255,255,0.95);
    font-family: 'atypbldisplay', Georgia, serif;
    font-weight: 700;
    font-size: 17px;
    line-height: 1.2;
    z-index: 0;
}
.fv-thumb-fallback span {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.fv-cimg > img { position: relative; z-index: 1; }

/* ════════════════════════════════════════════════════════════════════════
   View modes — pure CSS class swap on #fv-grid
   Default (.is-view-grid or no class) keeps the existing 5/4/3/2-col grid
   behavior already defined above. The two new modes only override what
   needs to change so the base layout stays the source of truth.
   ════════════════════════════════════════════════════════════════════════ */

/* View toggle button group (lives in #fv-bar-actions next to sort) */
#fv-view-toggle {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--fv-border);
    /* border-radius: 4px; */
    overflow: hidden;
    height: 30px;
    background-color: #fff;
}
#fv-view-toggle .fv-view-btn {
    background: transparent;
    border: 0;
    padding: 0 9px;
    height: 100%;
    color: var(--fv-text-muted, #888);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--fv-border);
    transition: background 0.12s, color 0.12s;
}
#fv-view-toggle .fv-view-btn:last-child { border-right: 0; }
#fv-view-toggle .fv-view-btn:hover { color: var(--fv-text); }
#fv-view-toggle .fv-view-btn.is-active {
    background: var(--fv-text);
    color: #fff;
}

/* ─── Detail view: same as the Very Best layout (image-left / info-right) ─── */
#fv-grid.is-view-detail { grid-template-columns: repeat(2, 1fr); }
#fv-grid.is-view-detail .fv-card {
    flex-direction: row;
    align-items: stretch;
}
#fv-grid.is-view-detail .fv-card > * {
    flex: 1 1 50%;
    min-width: 0;
    width: 50%;
}
#fv-grid.is-view-detail .fv-card-link { display: block; }
#fv-grid.is-view-detail .fv-cimg {
    width: 100%;
    aspect-ratio: 2/3;
}
#fv-grid.is-view-detail .fv-card-bottom { padding: 22px 14px 14px; }
#fv-grid.is-view-detail .fv-card-info { padding: 0 14px; }
#fv-grid.is-view-detail .fv-card-locked .fv-card-bottom {
    text-align: left;
    padding: 22px 14px 14px;
}
#fv-grid.is-view-detail .fv-card-locked .fv-slogos {
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
}
#fv-grid.is-view-detail .fv-cexcerpt,
#fv-grid.is-view-detail p.fv-cexcerpt,
body #fv-wrap #fv-grid.is-view-detail p.fv-cexcerpt {
    -webkit-line-clamp: unset;
    display: block;
    overflow: visible;
}
@media (max-width: 480px) {
    #fv-grid.is-view-detail { grid-template-columns: 1fr; }
}

/* ─── Table view: single column, horizontal card row ─── */
#fv-grid.is-view-table {
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 1px solid var(--fv-border);
}
#fv-grid.is-view-table .fv-card:not(.fv-card-locked) {
    flex-direction: row;
    align-items: stretch;
    gap: 14px;
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--fv-border);
    background: #fff;
}
#fv-grid.is-view-table .fv-card:not(.fv-card-locked):hover {
    background: var(--fv-surface2, #fafafa);
}
#fv-grid.is-view-table .fv-card-link {
    flex: 0 0 64px;
    width: 64px;
    align-self: center;
}
#fv-grid.is-view-table .fv-cimg {
    width: 64px;
    aspect-ratio: 1/1;
}
/* Hide the on-poster type/awards overlay in table view — too cramped */
#fv-grid.is-view-table .fv-card-overlay { display: none; }
#fv-grid.is-view-table .fv-cimg::after { display: none; }
#fv-grid.is-view-table .fv-card-bottom {
    padding: 0;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
}
#fv-grid.is-view-table .fv-card-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
}
#fv-grid.is-view-table .fv-ctitle {
    font-size: 16px;
    margin: 0;
    -webkit-line-clamp: 1;
    line-height: 1.25;
}
#fv-grid.is-view-table .fv-cexcerpt {
    font-size: 12px;
    margin: 0;
    -webkit-line-clamp: 1;
    color: #666;
    display: none;
}
#fv-grid.is-view-table .fv-slogos {
    flex: 0 1 auto;
    margin: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}
/* Show every streaming pill in table view; suppress the +X overflow button */
#fv-grid.is-view-table .fv-slogos .fv-slogo-h { display: inline-block; }
#fv-grid.is-view-table .fv-logos-more { display: none; }
#fv-grid.is-view-table .fv-card-grow { display: none; }
#fv-grid.is-view-table [data-fv-actions-wrap] {
    flex: 0 0 auto;
    align-self: center;
}
#fv-grid.is-view-table .fv-ooc-badge {
    position: static;
    margin-right: 8px;
}
/* Locked cards in table view: keep them as a vertical-feel interrupt row,
   just slimmer so they don't dwarf the data rows above/below. */
#fv-grid.is-view-table .fv-card-locked {
    border: 0;
    border-bottom: 1px solid var(--fv-border);
}
/* Mobile: keep table view as a true single-column horizontal list. Smaller
   thumb on the left, title + streamers wrap below, actions on the right. */
@media (max-width: 600px) {
    #fv-grid.is-view-table { grid-template-columns: 1fr; }
    #fv-grid.is-view-table .fv-card:not(.fv-card-locked) {
        padding: 8px 10px;
        gap: 10px;
        align-items: flex-start;
    }
    #fv-grid.is-view-table .fv-card-link { flex: 0 0 56px; width: 56px; align-self: flex-start; }
    #fv-grid.is-view-table .fv-cimg { width: 56px; aspect-ratio: 1/1; }
    #fv-grid.is-view-table .fv-card-bottom {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        padding: 0;
    }
    #fv-grid.is-view-table .fv-card-info { gap: 4px; }
    #fv-grid.is-view-table .fv-ctitle { font-size: 15px; -webkit-line-clamp: 2; }
    #fv-grid.is-view-table .fv-cexcerpt { display: none; }
    #fv-grid.is-view-table .fv-slogos {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 4px;
    }
    #fv-grid.is-view-table [data-fv-actions-wrap] { align-self: flex-start; }
}

/* ─── 2026-05-18: table+detail view styling tweaks ─────────────── */

/* Table view: lift the score badge out from over the image and dock it to
   the right of the thumbnail. .fv-top-badges normally sits absolute inside
   .fv-cimg; in table view we let it escape (overflow:visible on .fv-cimg)
   and absolutely-position it within the wider .fv-card-link rail. */
#fv-grid.is-view-table .fv-card:not(.fv-card-locked) .fv-card-link {
    position: relative;
    flex: 0 0 130px;
    width: 130px;
    display: block;
    align-self: center;
}
#fv-grid.is-view-table .fv-card:not(.fv-card-locked) .fv-cimg {
    overflow: visible;
}
#fv-grid.is-view-table .fv-card:not(.fv-card-locked) .fv-top-badges {
    top: 50%;
    right: auto;
    left: 76px;
    transform: translateY(-50%);
}
#fv-grid.is-view-table .fv-card:not(.fv-card-locked) .fv-rating {
    padding: 5px 9px;
    font-size: 17px;
}
#fv-grid.is-view-table .fv-card:not(.fv-card-locked) .fv-vbest {
    padding: 4px 6px;
    font-size: 9px;
}
#fv-grid.is-view-table .fv-card:not(.fv-card-locked) .fv-vbest img {
    width: 16px;
    height: 12px;
    margin-bottom: 2px;
}

/* Streaming pills: cap to 50% of the card-info width and keep on a single
   line. Anything past the cap gets clipped so the row stays uniform. Locked
   cards keep their own .fv-locked-hero layout. */
#fv-grid.is-view-table .fv-card:not(.fv-card-locked) .fv-slogos {
    flex: 0 1 auto;
    max-width: 50%;
    flex-wrap: nowrap;
    overflow: hidden;
    white-space: nowrap;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Mobile keeps the badge inline-rail trick (still escapes the thumb) but
   stacks the badge above the thumb rather than to its right; 56px thumb
   is too narrow to share a row with a badge. */
@media (max-width: 600px) {
    #fv-grid.is-view-table .fv-card:not(.fv-card-locked) .fv-card-link {
        flex: 0 0 56px;
        width: 56px;
    }
    #fv-grid.is-view-table .fv-card:not(.fv-card-locked) .fv-top-badges {
        top: 10px;
        left: auto;
        right: 10px;
        transform: none;
        top: 0;
        left: 0;
        padding: 0;
    }
    #fv-grid.is-view-table .fv-card:not(.fv-card-locked) .fv-cimg { overflow: hidden; }
    #fv-grid.is-view-table .fv-card:not(.fv-card-locked) .fv-slogos { max-width: 100%; flex-wrap: wrap; white-space: normal; }
}

/* Detail view: management buttons (SEEN / Queue / Loved / Hide) — vertical
   stack with no top divider. The default `.fv-actions` has `border-top` and
   children use `border-left` to separate; swap that to `border-top` on
   children so the divider rotates with the stack. Always-on text labels
   beside each icon (the `.fv-action-mlbl` span is otherwise mobile-only),
   and the mobile "More" toggle is hidden since the buttons are already
   visible. */
#fv-grid.is-view-detail .fv-actions {
    flex-direction: column;
    border-top: none;
}
#fv-grid.is-view-detail .fv-action-btn {
    border-left: none;
    border-top: 1px solid var(--fv-border);
    width: 100%;
    flex: 0 0 auto;
    justify-content: center;
    padding: 12px 6px;
    font-size: 12px;
}
#fv-grid.is-view-detail .fv-action-btn:first-child {
    border-top: none;
}
#fv-grid.is-view-detail .fv-action-btn.fv-more-btn { display: none; }
#fv-grid.is-view-detail .fv-action-mlbl { display: inline; }

/* Detail view: let the poster fill the full card height instead of being
   pinned to a 2/3 aspect ratio. Right-column content (title + streamers +
   excerpt + actions) drives the row height; the image now stretches to
   match instead of leaving a blank slab below it. */
#fv-grid.is-view-detail .fv-card-link { height: 100%; }
#fv-grid.is-view-detail .fv-cimg {
    height: 100%;
    aspect-ratio: auto;
}


.is-view-table .fv-actions {
    border-top: 0;
}

.is-view-table .fv-actions button.fv-action-btn.fv-seen-btn {}

.is-view-table .fv-actions button.fv-action-btn {
    padding: 0;
}

.is-view-table button.fv-action-btn.fv-dismiss-btn {
    background-color: #fff;
}
/* ─────────────────────────────────────────────────────────── */
/* AD SYSTEM — merged from ads.css, originally a separate file. */
/* ─────────────────────────────────────────────────────────── */

/* AGMTW ads — sticky bottom + in-post banner + remove-ads modal.
 * Loaded site-wide via functions.php agmtw_inject_ads_config.
 *
 * Sticky bottom and in-post share the same card-style layout (logo + copy +
 * body + CTA). Sticky is position:fixed; in-post is in flow with margin.
 * Body padding-bottom is set inline by ads.js after the sticky renders, so
 * the reservation always matches actual height.
 */

.agmtw-ad {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  box-sizing: border-box;
}
.agmtw-ad *, .agmtw-ad *::before, .agmtw-ad *::after { box-sizing: border-box; }

.agmtw-ad-link {
  display: flex;
  align-items: center;
  gap: 18px;
  text-decoration: none;
  color: var(--ad-fg, #fff);
  background: var(--ad-bg, #111);
  width: 100%;
  padding: 18px 22px;
  min-height: 120px;
}
.agmtw-ad-link:hover, .agmtw-ad-link:focus {
  text-decoration: none;
  color: var(--ad-fg, #fff);
}

.agmtw-ad-logo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.agmtw-ad-logo img {
  display: block;
  object-fit: contain;
  background: transparent;
  height: 64px;
  width: auto;
  max-width: 140px;
}

.agmtw-ad-text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.agmtw-ad-copy {
  font-weight: 600;
  font-size: 18px;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.agmtw-ad-body-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 4px;
  min-width: 0;
}
.agmtw-ad-body {
  font-weight: 400;
  opacity: 0.85;
  font-size: 14px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-width: 0;
}

.agmtw-ad-cta {
  flex: 0 0 auto;
  background: var(--ad-accent, #a800ff);
  color: var(--ad-bg, #111);
  font-weight: 700;
  border-radius: 999px;
  white-space: nowrap;
  padding: 12px 22px;
  font-size: 14px;
}

.agmtw-ad-meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.agmtw-ad-more,
.agmtw-ad-remove {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  color: var(--ad-fg, #fff);
  opacity: 0.7;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  padding: 2px 0;
  text-decoration: none;
}
.agmtw-ad-more:hover,
.agmtw-ad-remove:hover { opacity: 1; }
.agmtw-ad-meta-label { text-decoration: underline; text-underline-offset: 2px; }
.agmtw-ad-icon { flex: 0 0 auto; }

/* -- Sticky bottom ------------------------------------------------------- */
.agmtw-ad--sticky-bottom {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9000;
  background: var(--ad-bg, #111);
  box-shadow: 0 -4px 12px rgba(0,0,0,0.18);
  display: flex;
  align-items: stretch;
  justify-content: center;
}
.agmtw-ad--sticky-bottom .agmtw-ad-link {
  max-width: 900px;
  margin: 0 auto;
}

/* Body padding so footer/sidebar content is not hidden behind the bar,
 * and lift fixed floating widgets (Ask Gianni feedback-link) above it.
 * Height variable is set inline by ads.js after the bar renders. */
body.agmtw-has-sticky-ad {
  padding-bottom: var(--agmtw-ads-sticky-h, 0px);
}
body.agmtw-has-sticky-ad .feedback-link {
  bottom: calc(var(--agmtw-ads-sticky-h, 0px) + 10px);
}

/* -- In-post banner ------------------------------------------------------ */
.agmtw-ad--in-post {
  border-radius: 12px;
  overflow: hidden;
  margin: 28px 0;
  background: var(--ad-bg, #111);
  position: relative;
}

/* -- Pro category accent ------------------------------------------------- */
.agmtw-ad--pro .agmtw-ad-cta {
  background: #ffffff;
  color: #a800ff;
}

/* -- Mobile -------------------------------------------------------------- */
@media (max-width: 700px) {
  .agmtw-ad-link {
    padding: 12px 14px;
    gap: 12px;
    min-height: 0;
  }
  .agmtw-ad-logo img { height: 44px; max-width: 90px; }
  .agmtw-ad-copy { font-size: 14px; -webkit-line-clamp: 2; }
  .agmtw-ad-body { display: none; }
  .agmtw-ad-cta { padding: 9px 14px; font-size: 12px; }

  .agmtw-ad--in-post {
    margin: 22px 0;
  }
  .agmtw-ad--in-post .agmtw-ad-link {
    padding: 14px 16px;
    gap: 12px;
  }
  .agmtw-ad--in-post .agmtw-ad-body { display: block; font-size: 13px; }

  /* On the compact mobile sticky bar, hide the body-row (body + meta) entirely.
   * In-post keeps both visible. */
  .agmtw-ad--sticky-bottom .agmtw-ad-body-row { display: none; }
  .agmtw-ad--in-post .agmtw-ad-body-row { display: flex; }
  .agmtw-ad--in-post .agmtw-ad-meta { display: inline-flex; }
}

/* -- Remove-ads modal ---------------------------------------------------- */
.agmtw-ad-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.agmtw-ad-modal[hidden] { display: none; }
.agmtw-ad-modal-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.55);
}
.agmtw-ad-modal-card {
  position: relative;
  background: #fff;
  color: #111;
  border-radius: 14px;
  padding: 28px 28px 24px;
  max-width: 460px;
  width: calc(100% - 32px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.agmtw-ad-modal-card h3 {
  margin: 0 0 12px;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
}
.agmtw-ad-modal-card p {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.5;
  color: #2a2a2a;
}
.agmtw-ad-modal-cta {
  display: inline-block;
  background: #a800ff;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 14px;
}
.agmtw-ad-modal-cta:hover { background: #8d00d4; color: #fff; }
.agmtw-ad-modal-x {
  position: absolute;
  top: 8px; right: 12px;
  background: transparent;
  border: 0;
  font-size: 26px;
  line-height: 1;
  color: #777;
  cursor: pointer;
  padding: 4px 8px;
}
.agmtw-ad-modal-x:hover { color: #111; }

html.agmtw-ad-modal-open { overflow: hidden; }

/* -- Partner offers modal ------------------------------------------------ */
.agmtw-partners-card {
  position: relative;
  background: #fff;
  color: #111;
  border-radius: 14px;
  padding: 24px 24px 20px;
  max-width: 520px;
  width: calc(100% - 32px);
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.agmtw-partners-card h3 {
  margin: 0 0 6px;
  font-size: 1.25rem;
  font-weight: 800;
}
.agmtw-partners-sub {
  margin: 0 0 18px;
  font-size: 0.9rem;
  color: #666;
  line-height: 1.45;
}
.agmtw-partners-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.agmtw-partners-item { margin: 0; }
.agmtw-partners-link {
  display: flex;
  gap: 12px;
  padding: 12px;
  border: 1px solid #eee;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  background: #fff;
  transition: background 0.15s, border-color 0.15s;
  align-items: center;
}
.agmtw-partners-logo {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  background: #f4f4f4;
  display: flex;
  align-items: center;
  justify-content: center;
}
.agmtw-partners-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.agmtw-partners-link:hover, .agmtw-partners-link:focus {
  background: #fafafa;
  border-color: #ddd;
  color: inherit;
  text-decoration: none;
}
.agmtw-partners-discount {
  flex: 0 0 auto;
  background: #fff3cf;
  color: #7a5a00;
  font-weight: 700;
  font-size: 0.75rem;
  padding: 6px 10px;
  border-radius: 999px;
  align-self: flex-start;
  white-space: nowrap;
  line-height: 1.2;
}
.agmtw-partners-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.agmtw-partners-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: #111;
  margin-bottom: 3px;
}
.agmtw-partners-desc {
  font-size: 0.85rem;
  color: #555;
  line-height: 1.45;
}



/* ─────────────────────────────────────────────────────────────────────────
   Older "archive"-style designs (taxonomy / mood / streamer pages) only.
   Scoped to .panel-grid-archive, which the homepage filtered view (.panel-grid)
   never uses — so none of this affects the homepage.
   Added 2026-06-01 (streamer-suggestions cleanup).
   ───────────────────────────────────────────────────────────────────────── */

/* 1. Left-align titles (homepage keeps its centered titles). */
.panel-grid-archive .panel-title,
.panel-grid-archive h2.panel-title,
.panel-grid-archive .panel-title-score,
.panel-grid-archive .panel-title-score a { text-align: left !important; }

/* 2. Clamp the review/synopsis to 3 lines. */
.panel-grid-archive .entry-review p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 3. Push IMDb / RT / Wiki onto their own line, below the streamer logos.
      A bit of JS (in the template + wp_footer) wraps the three rating pills in
      .fv-rating-row; that wrapper is the only flex child forced full-width, so
      the pills inside keep their natural size and sit together on one row. */
.panel-grid-archive .entry-availabilities { flex-wrap: wrap; row-gap: 6px; }
.panel-grid-archive .entry-availabilities .fv-rating-row {
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 0;
}

/* 4. Show the real names instead of the abbreviations (RT / Wiki). */
.panel-grid-archive .fv-spill[data-streamer="rt"]   { font-size: 0; }
.panel-grid-archive .fv-spill[data-streamer="rt"]::after   { content: "RottenT"; font-size: 12px; }
.panel-grid-archive .fv-spill[data-streamer="wiki"] { font-size: 0; }
.panel-grid-archive .fv-spill[data-streamer="wiki"]::after { content: "Wikipedia"; font-size: 12px; }