/*
 * Gupy redesign v2 — styles for the Home v2 template and the v2 program page.
 *
 * Translated from the static mockup (scss/*.scss). Rules:
 *   - every rule is scoped under a `gv2-` class or `body.gupy-v2`
 *     (only the :root block below declares global custom properties);
 *   - colors come from the existing globals of style.css (--vrd-dark-*) plus
 *     the brand tokens declared below — never hard-code the mockup pink;
 *   - breakpoints follow the mockup: 360 / 480 / 768 / 1024 / 1600 / 2200px.
 *
 * Loaded (enqueued by inc/redesign.php) only when vrd_redesign_enabled().
 */

/* ==========================================================================
   TOKENS
   ========================================================================== */

:root {
  --vrd-primary: #db3575;        /* existing brand pink (was hard-coded) */
  --vrd-primary-dark: #c63873;   /* existing secondary tone */
  --vrd-primary-deep: #92346e;   /* existing secondary tone */
  --vrd-violet: #6d4fa3;         /* new color from the redesign */
}

/* Color scheme. Dark is the default; the light scheme follows the existing
   dark/light switch of the header (header.php sets body[data-theme="dark"]
   before the first paint, scripts.js flips it with the switch), so the v2
   pages read the same choice as the legacy ones.
   The "dark islands" listed here (colored banners, labels over pictures)
   keep the dark values in both schemes: they declare the tokens again on
   themselves, so their content stays light-on-dark. */
.gupy-v2,
.gupy-v2 .gv2-banner--gradient .gv2-banner__box,
.gupy-v2 .gv2-split-banner__panel--premium,
.gupy-v2 .gv2-newsletter__article-body,
.gupy-v2 .gv2-poster-card__bookmark,
.gupy-v2 .gv2-poster-card__badge,
.gupy-v2 .gv2-episode-card__thumb {
  --gv2-bg: var(--vrd-dark-body-background, #0c0f16);
  --gv2-bg-rgb: 12, 15, 22;      /* --gv2-bg as r, g, b: washes and fades */
  --gv2-fg-rgb: 255, 255, 255;   /* text tone as r, g, b: translucent tints */
  --gv2-surface: var(--vrd-dark-section-background, #141920);
  --gv2-surface-alt: var(--vrd-dark-button-hover-background, #222a37);
  --gv2-border: var(--vrd-dark-dialog-border-color, rgba(255, 255, 255, 0.08));
  --gv2-text: var(--vrd-dark-dialog-title-color, #ffffff);
  --gv2-text-muted: #9aa0ac;
  --gv2-text-dim: var(--placeholder-icon-color, #6b7280);
  --gv2-star: var(--vrd-rt-star, #f5c518);
  --gv2-success: #22c55e;
  --gv2-danger: #ef4444;
  --gv2-warning: #f59e0b;
  --gv2-glass-bg: rgba(255, 255, 255, 0.08);
  --gv2-glass-border: rgba(255, 255, 255, 0.18);
  --gv2-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
  --gv2-text-shadow: var(--gv2-text-shadow);
}

/* Light scheme: cool greys matching the blue-black of the dark one, white
   cards on a light page, darker status colors so they still read as text. */
body.gupy-v2:not([data-theme="dark"]) {
  --gv2-bg: #f4f5f8;
  --gv2-bg-rgb: 244, 245, 248;
  --gv2-fg-rgb: 18, 21, 28;
  --gv2-surface: #ffffff;
  --gv2-surface-alt: #e8eaef;
  --gv2-border: rgba(18, 21, 28, 0.1);
  --gv2-text: #12151c;
  --gv2-text-muted: #5b6170;
  --gv2-text-dim: #7a808d;
  --gv2-success: #16a34a;
  --gv2-danger: #dc2626;
  --gv2-warning: #d97706;
  --gv2-glass-bg: rgba(255, 255, 255, 0.72);
  --gv2-glass-border: rgba(18, 21, 28, 0.1);
  --gv2-shadow: 0 10px 30px rgba(18, 21, 28, 0.12);
  --gv2-text-shadow: none;
}

.gupy-v2 {
  --gv2-font-heading: "Fira Sans Condensed", "Arial Narrow", sans-serif;
  --gv2-font-body: "Lato", "Helvetica Neue", Arial, sans-serif;

  --gv2-radius-sm: 5px;
  --gv2-radius-md: 10px;
  --gv2-radius-lg: 16px;

  /* container gutters (mockup `container` mixin) */
  --gv2-gutter: 80px;
}

@media (max-width: 1024px) {
  .gupy-v2 {
    --gv2-gutter: 40px;
  }
}

@media (max-width: 768px) {
  .gupy-v2 {
    --gv2-gutter: 20px;
  }
}

@media (min-width: 1600px) {
  .gupy-v2 {
    --gv2-gutter: 160px;
  }
}

/* ==========================================================================
   PAGE SHELL (v2 templates only: body.gv2-template)
   The v2 templates render <main class="gv2-main"> right after get_header():
   neutralise the parent-theme wrappers that would box or tint it.
   ========================================================================== */

body.gupy-v2 {
  background: var(--gv2-bg);
}

body.gupy-v2.gv2-template #body-wrap,
body.gupy-v2.gv2-template #body-wrap.dark-schema,
body.gupy-v2.gv2-template #wrap {
  width: 100%;
  max-width: none;
  background: var(--gv2-bg);
}

/* The parent theme's template.js (and the engine's scripts.js) paint #wrap
   white with an INLINE style on every page ("custom background" code that
   runs even without data-background). The v2 templates must stay dark all
   the way down to the footer (no white band under the last banner, no grey
   tint through the header). */
body.gupy-v2.gv2-template #wrap[style] {
  background-color: var(--gv2-bg) !important;
}

body.gupy-v2.gv2-template #body-wrap.cactus-box #wrap {
  width: 100%;
}

body.gupy-v2 .gv2-main {
  /* flow-root: the last banner's margin-bottom stays inside the dark main
     instead of collapsing through it (it showed #wrap behind it). */
  display: flow-root;
  width: 100%;
  background: var(--gv2-bg);
  color: var(--gv2-text);
  font-family: var(--gv2-font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

@media (min-width: 1600px) {
  body.gupy-v2 .gv2-main {
    font-size: 17px;
  }
}

/* Base resets of the mockup, kept at zero specificity with :where() so every
   component rule below wins over them. */
:where(body.gupy-v2 .gv2-main) *,
:where(body.gupy-v2 .gv2-main) *::before,
:where(body.gupy-v2 .gv2-main) *::after {
  box-sizing: border-box;
}

:where(body.gupy-v2 .gv2-main) img {
  max-width: 100%;
  height: auto;
  display: block;
}

:where(body.gupy-v2 .gv2-main) a,
:where(body.gupy-v2 .gv2-main) a:focus,
:where(body.gupy-v2 .gv2-main) a:hover {
  color: inherit;
  text-decoration: none;
}

:where(body.gupy-v2 .gv2-main) ul,
:where(body.gupy-v2 .gv2-main) ol {
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: inherit;
}

:where(body.gupy-v2 .gv2-main) button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: inherit;
  line-height: inherit;
  letter-spacing: normal;
  text-shadow: none;
  box-shadow: none;
  vertical-align: middle;
}

:where(body.gupy-v2 .gv2-main) h1,
:where(body.gupy-v2 .gv2-main) h2,
:where(body.gupy-v2 .gv2-main) h3,
:where(body.gupy-v2 .gv2-main) h4,
:where(body.gupy-v2 .gv2-main) h5,
:where(body.gupy-v2 .gv2-main) h6 {
  margin: 0;
  padding: 0;
  color: inherit;
  font-size: inherit;
  line-height: 1.2;
}

:where(body.gupy-v2 .gv2-main) p {
  margin: 0;
}

body.gupy-v2 .gv2-main ::selection {
  background: var(--vrd-primary);
  color: #fff;
}

.gv2-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Container helper (mockup `container` mixin) for group templates. */
.gv2-container {
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: var(--gv2-gutter, 80px);
}

@media (min-width: 1600px) {
  .gv2-container {
    max-width: 1920px;
  }
}

@media (min-width: 2200px) {
  .gv2-container {
    max-width: 2400px;
  }
}

.gv2-accent {
  color: var(--vrd-primary);
}

/* Breadcrumbs rendered small above the program hero (SEO, kept visible). */
.gv2-breadcrumbs {
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding: 10px var(--gv2-gutter, 80px) 0;
  color: var(--gv2-text-dim);
  font-size: 12px;
}

.gv2-breadcrumbs a {
  color: var(--gv2-text-muted);
}

.gv2-breadcrumbs a:hover {
  color: var(--vrd-primary);
}

@media (min-width: 1600px) {
  .gv2-breadcrumbs {
    max-width: 1920px;
  }
}

/* ==========================================================================
   HEADER — restyle of the existing header markup (header.php +
   html/header/header-navigation.php, same markup and classes as the legacy
   home: .cactus-nav-main.dark-div.dark-bg-color-1 + an inline
   background-color from the theme options). Features unchanged, only the
   look/layout moves to the mockup (_header.scss):
     - 80px bar, logo 28px, bold 15px nav links 40px apart, 260px search
       field with a Ctrl+K key cap, pink sign-in button (10px 40px);
     - ≤1024px: the main menu collapses behind the burger (off-canvas menu);
     - ≤767px: the legacy mobile header (.vrd_mobile_header) takes over.
   Color: mockup $color-bg (#0a0c12) → existing --vrd-dark-body-background,
   opaque in the page flow (whatever the theme-option inline CSS says), the
   mockup translucent + blurred bar only for the sticky clone of the v2
   templates. The legacy layout is float based: it is rebuilt with flex here.
   ========================================================================== */

body.gupy-v2 #header-navigation .cactus-nav-main,
body.gupy-v2 #header-navigation .cactus-nav-main.dark-div.dark-bg-color-1 {
  background-color: var(--gv2-bg) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--gv2-border);
}

body.gupy-v2.gv2-template #header-navigation.sticky-menu .cactus-nav-main,
body.gupy-v2.gv2-template #header-navigation.sticky-menu .cactus-nav-main.dark-div.dark-bg-color-1 {
  background-color: rgba(var(--gv2-bg-rgb), 0.85) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

body.gupy-v2 #header-navigation .cactus-nav-control + .cactus-nav-control .cactus-nav-main {
  border-top: 0;
}

body.gupy-v2 #header-navigation .cactus-nav-main a,
body.gupy-v2 #header-navigation .cactus-nav-main a:focus {
  color: var(--gv2-text);
  text-decoration: none;
}

@media (min-width: 768px) {
  /* container mixin */
  body.gupy-v2 #header-navigation .cactus-nav-main > .cactus-container {
    width: 100%;
    max-width: 1600px;
    margin-inline: auto;
    padding: 0 var(--gv2-gutter, 80px) !important;
  }

  body.gupy-v2 #header-navigation .cactus-nav-main .cactus-row {
    display: flex;
    align-items: center;
    gap: 80px;
    height: 80px;
    margin: 0 !important;
    padding: 0;
  }

  body.gupy-v2 #header-navigation .cactus-nav-main .cactus-row::before,
  body.gupy-v2 #header-navigation .cactus-nav-main .cactus-row::after {
    display: none;
  }

  body.gupy-v2 #header-navigation .cactus-nav-main .cactus-row > div {
    float: none !important;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
  }

  /* logo */
  body.gupy-v2 #header-navigation .cactus-nav-left:not(.cactus-only-main-menu) {
    order: 1;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 1;
  }

  body.gupy-v2 #header-navigation .cactus-nav-main .cactus-logo {
    display: flex;
    align-items: center;
    padding: 0 !important;
    margin: 0 !important;
  }

  body.gupy-v2 #header-navigation .cactus-nav-main .cactus-logo a {
    display: flex;
    align-items: center;
  }

  body.gupy-v2 #header-navigation .cactus-nav-main .cactus-logo img {
    height: 28px !important;
    max-height: 28px;
    width: auto !important;
    margin: 0 !important;
  }

  /* The sticky-bar copy of the burger + user icons lives in the logo column:
     the v2 bar keeps them on the right only. */
  body.gupy-v2 #header-navigation .cactus-nav-left .is_on_sticky_bar {
    display: none !important;
  }

  /* main menu */
  body.gupy-v2 #header-navigation .cactus-only-main-menu {
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.4;
  }

  body.gupy-v2 #header-navigation .cactus-only-main-menu .cactus-main-menu {
    display: block;
    padding: 0 !important;
    margin: 0 !important;
  }

  body.gupy-v2 #header-navigation .cactus-only-main-menu .cactus-main-menu > ul {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 40px;
    margin: 0 !important;
    padding: 0;
    float: none;
  }

  body.gupy-v2 #header-navigation .cactus-only-main-menu .cactus-main-menu > ul::before,
  body.gupy-v2 #header-navigation .cactus-only-main-menu .cactus-main-menu > ul::after {
    display: none;
  }

  body.gupy-v2 #header-navigation .cactus-only-main-menu .cactus-main-menu > ul > li {
    float: none;
    height: auto;
    margin: 0;
    padding: 0;
    line-height: 1.4;
  }

  body.gupy-v2 #header-navigation .cactus-only-main-menu .cactus-main-menu > ul > li > a {
    display: block;
    padding: 10px 0 !important;
    line-height: 1.4 !important;
    font-family: var(--gv2-font-body);
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: none;
    white-space: nowrap;
    color: var(--gv2-text);
    transition: color 0.2s ease;
  }

  /* right side: search + user icons + sign in (+ burger ≤1024) */
  body.gupy-v2 #header-navigation .cactus-nav-right {
    order: 3;
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: auto !important;
    line-height: 1.4;
  }

  body.gupy-v2 #header-navigation .cactus-nav-right > div {
    float: none !important;
    margin: 0 !important;
  }

  body.gupy-v2 #header-navigation .cactus-header-search-form {
    width: 260px;
    padding: 0 !important;
    margin: 0 !important;
  }

  body.gupy-v2 #header-navigation .cactus-header-search-form .cactus-open-search-mobile {
    display: none !important;
  }

  body.gupy-v2 #header-navigation .cactus-header-search-form form {
    position: relative;
    width: 100%;
    margin: 0;
  }

  body.gupy-v2 #header-navigation .cactus-header-search-form form input:not([type=submit]),
  body.gupy-v2 #header-navigation .cactus-header-search-form form input[type=text] {
    width: 100% !important;
    height: 40px;
    padding: 10px 64px 10px 42px !important;
    line-height: 20px;
  }

  body.gupy-v2 #header-navigation .cactus-header-search-form form i.fa-search {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
  }

  /* user menu (dark switch, notifications, avatar / sign in) */
  body.gupy-v2 #header-navigation .cactus-nav-right .cactus-user-menu {
    display: flex !important;
    align-items: center;
    padding: 0 !important;
  }

  body.gupy-v2 #header-navigation .cactus-nav-right .cactus-user-menu > ul {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 !important;
    padding: 0;
  }

  body.gupy-v2 #header-navigation .cactus-nav-right .cactus-user-menu > ul > li {
    float: none;
    height: auto;
    margin: 0 !important;
    padding: 0;
    line-height: 1;
  }

  body.gupy-v2 #header-navigation .cactus-nav-right .cactus-user-menu > ul > li > a {
    display: flex !important;
    align-items: center;
    height: auto;
    padding: 5px !important;
    line-height: 1 !important;
  }

  body.gupy-v2 #header-navigation .cactus-nav-right .cactus-user-menu > ul > li > a.vrd_user_menu_button_link {
    padding: 0 !important;
  }

  /* dropdown of the user menu, hanging from the 80px bar */
  body.gupy-v2 #header-navigation .cactus-nav-right .cactus-user-menu > ul > li {
    position: relative;
  }

  body.gupy-v2 #header-navigation .cactus-nav-right .cactus-user-menu > ul > li > ul {
    top: 100%;
    right: 0;
    left: auto;
    margin-top: 0;
  }

  /* burger (hidden above 1024px, see below) */
  body.gupy-v2 #header-navigation .cactus-nav-right .cactus-open-menu-mobile {
    order: 99;
    display: none !important;
    padding: 0 !important;
  }

  body.gupy-v2 #header-navigation .cactus-nav-right .cactus-open-menu-mobile > ul {
    margin: 0 !important;
    padding: 0;
  }

  body.gupy-v2 #header-navigation .cactus-nav-right .cactus-open-menu-mobile > ul > li {
    float: none;
    margin: 0;
    padding: 0;
  }

  body.gupy-v2 #header-navigation .cactus-nav-right .cactus-open-menu-mobile > ul > li > a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 1 !important;
    color: var(--gv2-text);
  }

  body.gupy-v2 #header-navigation .cactus-nav-right .cactus-open-menu-mobile > ul > li > a i {
    margin: 0 !important;
    font-size: 22px;
  }
}

@media (min-width: 1600px) {
  body.gupy-v2 #header-navigation .cactus-nav-main > .cactus-container {
    max-width: 1920px;
  }
}

@media (min-width: 2200px) {
  body.gupy-v2 #header-navigation .cactus-nav-main > .cactus-container {
    max-width: 2400px;
  }
}

/* ≤1024px: nav links behind the burger, tighter gaps (mockup $bp-laptop) */
@media (min-width: 768px) and (max-width: 1024px) {
  body.gupy-v2 #header-navigation .cactus-nav-main .cactus-row {
    gap: 20px;
  }

  body.gupy-v2 #header-navigation .cactus-only-main-menu {
    display: none !important;
  }

  body.gupy-v2 #header-navigation .cactus-nav-right .cactus-open-menu-mobile {
    display: block !important;
  }

  body.gupy-v2 #header-navigation .cactus-header-search-form {
    width: 220px;
  }
}

/* Mockup: the search field collapses at ≤768px ($bp-tablet); below 768px
   the mobile header and its search overlay take over. */
@media (min-width: 768px) and (max-width: 768px) {
  body.gupy-v2 #header-navigation .cactus-header-search-form {
    display: none !important;
  }
}

/* Main menu links: hover / current */
body.gupy-v2 #header-navigation .cactus-only-main-menu .cactus-main-menu > ul > li > a:hover,
body.gupy-v2 #header-navigation .cactus-only-main-menu .cactus-main-menu > ul > li.current-menu-item > a,
body.gupy-v2 #header-navigation .cactus-only-main-menu .cactus-main-menu > ul > li.current-menu-ancestor > a,
body.gupy-v2 #header-navigation .cactus-only-main-menu .cactus-main-menu > ul > li.current-menu-parent > a {
  color: var(--vrd-primary);
}

/* Dropdowns of the main / user menus */
body.gupy-v2 #header-navigation .cactus-main-menu ul ul {
  background-color: var(--gv2-surface);
  border: 1px solid var(--gv2-border);
  border-radius: 5px;
}

body.gupy-v2 #header-navigation .cactus-main-menu ul ul li a {
  color: var(--gv2-text);
}

body.gupy-v2 #header-navigation .cactus-main-menu ul ul li a:hover {
  color: var(--vrd-primary);
  background-color: var(--gv2-surface-alt);
}

/* Icons (dark switch, notifications, admin impersonate) */
body.gupy-v2 #header-navigation li.vrd_top_menu_icon > a,
body.gupy-v2 #header-navigation li.vrd_top_menu_icon > a svg,
body.gupy-v2 #header-navigation li.vrd_top_menu_icon > a i {
  color: var(--gv2-text-muted);
}

body.gupy-v2 #header-navigation li.vrd_top_menu_icon:hover > a,
body.gupy-v2 #header-navigation li.vrd_top_menu_icon:hover > a svg,
body.gupy-v2 #header-navigation li.vrd_top_menu_icon:hover > a i {
  color: var(--gv2-text);
}

/* Search field */
body.gupy-v2 #header-navigation .cactus-header-search-form form {
  background: var(--gv2-surface);
  border: 1px solid var(--gv2-border);
  border-radius: 5px;
  transition: border-color 0.2s ease;
}

body.gupy-v2 #header-navigation .cactus-header-search-form form.has_focus,
body.gupy-v2 #header-navigation .cactus-header-search-form form:focus-within {
  border-color: var(--vrd-primary);
}

body.gupy-v2 #header-navigation .cactus-header-search-form form input:not([type=submit]),
body.gupy-v2 #header-navigation .cactus-header-search-form form input[type=text] {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--gv2-text) !important;
  font-family: var(--gv2-font-body);
  font-size: 14px;
}

body.gupy-v2 #header-navigation .cactus-header-search-form form input::placeholder {
  color: var(--gv2-text-muted);
  opacity: 1;
}

body.gupy-v2 #header-navigation .cactus-header-search-form form i.fa-search {
  color: var(--gv2-text-muted);
  font-size: 14px;
}

/* "Ctrl + K" hint → key cap */
body.gupy-v2 #header-navigation .cactus-header-search-form form .vrd_search_helper {
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  line-height: 1.4;
  padding: 2px 6px;
  border: 1px solid var(--gv2-border);
  border-radius: 4px;
  color: var(--gv2-text-dim);
  font-family: var(--gv2-font-body);
  font-size: 11px;
  opacity: 1;
  pointer-events: none;
}

body.gupy-v2 #header-navigation .cactus-header-search-form form.has_focus .vrd_search_helper {
  display: none;
}

/* Sign-in button ("Connexion" of render_header_nav_icons + theme login link):
   mockup btn-primary, 14px, 10px 40px. */
body.gupy-v2 #header-navigation .vrd_user_menu_button.is_primary,
body.gupy-v2 .vrd_mobile_header .vrd_user_menu_button.is_primary {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: auto !important;
  background: var(--vrd-primary) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 5px !important;
  font-family: var(--gv2-font-body);
  font-weight: 700;
  font-size: 14px !important;
  line-height: 21px !important;
  padding: 10px 40px !important;
  margin: 0 !important;
  white-space: nowrap;
  transition: background 0.2s ease;
}

/* Mobile header: the legacy header keeps only the icon of the sign-in button. */
body.gupy-v2 .vrd_mobile_header .vrd_user_menu_button.is_primary {
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
}

@media (min-width: 768px) and (max-width: 1024px) {
  body.gupy-v2 #header-navigation .vrd_user_menu_button.is_primary {
    padding: 10px 20px !important;
  }
}

body.gupy-v2 #header-navigation .vrd_user_menu_button.is_primary:hover,
body.gupy-v2 .vrd_mobile_header .vrd_user_menu_button.is_primary:hover {
  background: var(--vrd-primary-dark) !important;
  color: #fff !important;
}

body.gupy-v2 #header-navigation .vrd_user_menu_button.is_primary i,
body.gupy-v2 #header-navigation .vrd_user_menu_button.is_primary e {
  color: #fff !important;
}

body.gupy-v2 #header-navigation .cactus-user-login > ul > li > a:not(.user-info) {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--vrd-primary);
  color: #fff;
  border-radius: 5px;
  font-weight: 700;
}

body.gupy-v2 #header-navigation .cactus-user-login > ul > li > a:not(.user-info):hover {
  background: var(--vrd-primary-dark);
}

/* Mobile header (≤767px): one row (burger, logo, actions), like the mockup. */
body.gupy-v2 .vrd_mobile_header {
  background-color: var(--gv2-bg) !important;
  border-bottom: 1px solid var(--gv2-border);
}

@media (max-width: 767px) {
  body.gupy-v2 .vrd_mobile_header {
    flex-wrap: nowrap;
  }

  body.gupy-v2 .vrd_mobile_header .vrd_mh_logo {
    flex-shrink: 1;
    min-width: 0;
  }

  body.gupy-v2 .vrd_mobile_header .vrd_mh_actions {
    margin-left: auto !important;
    flex-shrink: 0;
  }
}

/* No room for the theme switch in the phone header (it pushed the sign-in
   button off screen): the choice made on a larger screen is kept. */
@media (max-width: 480px) {
  body.gupy-v2 .vrd_mobile_header .vrd_mh_actions > li.vrd_top_menu_icon:has(.vrd_darkSwitch_toggle) {
    display: none !important;
  }
}

/* Avatar (logged in): a fixed round box. A broken avatar image used to print
   its alt text (the member's name) over the neighbouring icons. */
body.gupy-v2 .vrd_mobile_header .vrd_top_menu_avatar > a,
body.gupy-v2 #header-navigation .vrd_top_menu_avatar > a {
  overflow: hidden;
}

body.gupy-v2 .vrd_mobile_header .vrd_top_menu_avatar img,
body.gupy-v2 #header-navigation .vrd_top_menu_avatar > a img {
  width: 32px !important;
  height: 32px !important;
  max-width: 32px;
  border-radius: 50% !important;
  object-fit: cover;
  overflow: hidden;
  font-size: 0;
  color: transparent;
  background: var(--gv2-surface-alt);
  margin: 0 !important;
}

body.gupy-v2 #header-navigation .vrd_top_menu_avatar > ul li.user-display-name {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.gupy-v2 .vrd_mobile_header .vrd_mh_btn,
body.gupy-v2 .vrd_mobile_header .vrd_mh_btn i {
  color: var(--gv2-text);
}

body.gupy-v2 .vrd_mobile_header .vrd_mh_logo img {
  max-height: 26px;
  width: auto;
}

/* The parent theme opens the off-canvas menu up to 1023px only: the v2
   burger shows up to 1024px (mockup $bp-laptop). */
@media (max-width: 1024px) {
  body.gupy-v2.open-mobile-menu-ct #off-canvas {
    transform: translate(0, 0);
    visibility: visible;
  }

  body.gupy-v2.open-mobile-menu-ct .canvas-ovelay {
    visibility: visible;
    opacity: 1;
  }
}

/* Off-canvas menu accent */
body.gupy-v2 #off-canvas {
  background-color: var(--gv2-bg);
}

body.gupy-v2 #off-canvas .off-menu a:hover,
body.gupy-v2 #off-canvas .off-menu li.current-menu-item > a {
  color: var(--vrd-primary);
}

/* ==========================================================================
   FOOTER — restyle of the existing footer.php markup (widget areas
   .footer-inner-fourth / -first / -second / -third + copyright bar) into the
   mockup grid (_footer.scss): 1.6fr 1fr 1fr 1fr → 2 columns ≤1024px →
   1 column ≤480px, container gutters, thin top border, muted links.
   ========================================================================== */

body.gupy-v2 footer,
body.gupy-v2 footer .footer-inner,
body.gupy-v2 footer .footer-inner.dark-div,
body.gupy-v2 footer .footer-info,
body.gupy-v2 footer .footer-info.dark-div {
  background: var(--gv2-bg) !important;
  color: var(--gv2-text-muted);
  font-family: var(--gv2-font-body);
}

body.gupy-v2 footer .footer-inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
  width: 100%;
  max-width: 1600px;
  margin: 80px auto 0;
  padding: 80px var(--gv2-gutter, 80px) 40px;
  border-top: 1px solid var(--gv2-border);
}

body.gupy-v2 footer .footer-inner::before,
body.gupy-v2 footer .footer-inner::after,
body.gupy-v2 footer .footer-inner > .vrd_clearfix {
  display: none;
}

body.gupy-v2 footer .footer-inner > div {
  float: none;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
}

body.gupy-v2 footer .footer-inner > .footer-inner-third:not(:has(*)) {
  display: none;
}

body.gupy-v2 footer .footer-inner .cactus-container,
body.gupy-v2 footer .footer-inner .cactus-row {
  width: auto;
  max-width: none;
  margin: 0 !important;
  padding: 0 !important;
}

body.gupy-v2 footer .footer-inner .widget {
  float: none;
  width: auto;
  margin: 0 0 20px;
  padding: 0;
}

body.gupy-v2 footer .footer-info {
  width: 100%;
  border-top: 1px solid var(--gv2-border);
  padding-block: 20px;
  font-size: 13px;
}

body.gupy-v2 footer .footer-info > .cactus-container {
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding: 0 var(--gv2-gutter, 80px) !important;
}

body.gupy-v2 footer .footer-info .cactus-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin: 0 !important;
}

body.gupy-v2 footer .footer-info .cactus-row::before,
body.gupy-v2 footer .footer-info .cactus-row::after {
  display: none;
}

body.gupy-v2 footer .footer-info .cactus-row > * {
  float: none;
  width: auto;
  padding: 0 !important;
  margin: 0;
}

@media (min-width: 1600px) {
  body.gupy-v2 footer .footer-inner,
  body.gupy-v2 footer .footer-info > .cactus-container {
    max-width: 1920px;
  }
}

@media (max-width: 1024px) {
  body.gupy-v2 footer .footer-inner {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  body.gupy-v2 footer .footer-inner {
    margin-top: 40px;
    padding-top: 40px;
  }

  body.gupy-v2 footer .footer-info .cactus-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  body.gupy-v2 footer .footer-inner {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

body.gupy-v2 footer .footer-sidebar .widget-title,
body.gupy-v2 footer .footer-sidebar .widget h2,
body.gupy-v2 footer .footer-sidebar .widget h3,
body.gupy-v2 footer .footer-sidebar .widget h4 {
  color: var(--gv2-text) !important;
  font-family: var(--gv2-font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 10px;
}

body.gupy-v2 footer .footer-sidebar,
body.gupy-v2 footer .footer-sidebar p {
  color: var(--gv2-text-muted);
  font-size: 13px;
}

body.gupy-v2 footer .footer-sidebar ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

body.gupy-v2 footer .footer-sidebar ul li {
  padding: 0;
  margin: 0 0 10px;
  border: 0;
}

body.gupy-v2 footer .footer-sidebar .textwidget img {
  height: 24px;
  width: auto;
  margin-bottom: 10px;
}

body.gupy-v2 footer .tus_footer_social_links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

body.gupy-v2 footer .tus_footer_social_links a.tus_footer_social_link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0;
  border-radius: 50%;
  background: var(--gv2-surface);
  color: var(--gv2-text);
}

body.gupy-v2 footer .tus_footer_social_links a.tus_footer_social_link:hover {
  background: var(--vrd-primary);
  color: #fff;
}

body.gupy-v2 footer a,
body.gupy-v2 footer .dark-div a,
body.gupy-v2 footer .dark-div a:focus {
  color: var(--gv2-text-muted);
  text-decoration: none;
  font-size: 13px;
}

body.gupy-v2 footer a:hover,
body.gupy-v2 footer .dark-div a:hover {
  color: var(--vrd-primary);
}

body.gupy-v2 footer .copyright {
  color: var(--gv2-text-muted);
}

body.gupy-v2 footer .copyright small {
  color: var(--gv2-text-dim);
}

body.gupy-v2 footer .footer-sidebar .widget [class*="fa-facebook"],
body.gupy-v2 footer .footer-sidebar .widget [class*="fa-instagram"],
body.gupy-v2 footer .footer-sidebar .widget [class*="fa-twitter"],
body.gupy-v2 footer .footer-sidebar .widget [class*="fa-x-twitter"],
body.gupy-v2 footer .footer-sidebar .widget [class*="fa-tiktok"],
body.gupy-v2 footer .footer-sidebar .widget [class*="fa-pinterest"] {
  color: inherit;
}

body.gupy-v2 #gototop a {
  background: var(--gv2-surface);
  border: 1px solid var(--gv2-border);
  border-radius: 5px;
  color: var(--gv2-text);
}

body.gupy-v2 #gototop a:hover {
  background: var(--vrd-primary);
  color: #fff;
}

/* ==========================================================================
   COMPONENTS (translated from the mockup)
   ========================================================================== */

.gv2-landing-slider {
  position: relative;
  overflow: hidden;
}

.gv2-landing-track {
  display: flex;
  transition: transform 0.7s ease;
}

.gv2-landing-slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
}

.gv2-landing-slide__eyebrow {
  display: inline-block;
  color: var(--vrd-primary);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: var(--gv2-title-case, uppercase);
  margin-bottom: 10px;
}

.gv2-landing-slide__article-card {
  background: var(--gv2-glass-bg);
  border: 1px solid var(--gv2-glass-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 40px;
  display: flex;
  align-items: center;
  gap: 40px;
  max-width: 480px;
  margin-inline: auto;
}
.gv2-landing-slide__article-card img {
  width: 140px;
  aspect-ratio: 2/3;
  object-fit: cover;
  border-radius: 5px;
  flex-shrink: 0;
}
.gv2-landing-slide__article-card h4 {
  font-family: var(--gv2-font-heading);
  font-weight: 700;
  text-transform: var(--gv2-title-case, uppercase);
  letter-spacing: 0.02em;
  line-height: 1.1;
}
@media (min-width: 1600px) {
  .gv2-landing-slide__article-card h4 {
    letter-spacing: 0.015em;
  }
}
.gv2-landing-slide__article-card h4 {
  font-size: 19px;
  margin: 4px 0 8px;
  line-height: 1.25;
}
.gv2-landing-slide__article-card p {
  color: var(--gv2-text);
  font-size: 14px;
  line-height: 1.5;
}
@media (max-width: 1024px) {
  .gv2-landing-slide__article-card {
    max-width: 360px;
    padding: 20px;
    gap: 20px;
  }
  .gv2-landing-slide__article-card img {
    width: 90px;
  }
  .gv2-landing-slide__article-card h4 {
    font-size: 16px;
  }
  .gv2-landing-slide__article-card p {
    font-size: 13px;
  }
}

.gv2-landing-slide__article-tag {
  display: inline-block;
  color: var(--vrd-primary);
  font-size: 10px;
  font-weight: 700;
  text-transform: var(--gv2-title-case, uppercase);
  letter-spacing: 0.06em;
}

.gv2-landing-slide__meta-row {
  display: flex;
  align-items: center;
  gap: 20px;
  color: var(--gv2-text-muted);
  font-size: 13px;
  font-weight: 700;
  margin: 10px 0 20px;
  flex-wrap: wrap;
}
.gv2-landing-slide__meta-row i {
  color: var(--vrd-primary);
  margin-right: 4px;
}

.gv2-hero {
  position: relative;
  isolation: isolate;
  padding: 40px 0 40px;
  min-height: 480px;
  display: flex;
  align-items: center;
}
.gv2-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.gv2-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gv2-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--gv2-bg) 0%, rgba(var(--gv2-bg-rgb), 0) 65%), linear-gradient(0deg, var(--gv2-bg) 0%, rgba(var(--gv2-bg-rgb), 0.35) 40%, rgba(var(--gv2-bg-rgb), 0.7) 100%);
}
@media (max-width: 1024px) {
  .gv2-hero__bg::after {
    background: linear-gradient(180deg, rgba(var(--gv2-bg-rgb), 0.9) 0%, rgba(var(--gv2-bg-rgb), 0.5) 28%, rgba(var(--gv2-bg-rgb), 0.65) 48%, var(--gv2-bg) 80%, var(--gv2-bg) 100%);
  }
}
.gv2-hero__inner {
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: 80px;
}
@media (max-width: 1024px) {
  .gv2-hero__inner {
    padding-inline: 40px;
  }
}
@media (max-width: 768px) {
  .gv2-hero__inner {
    padding-inline: 20px;
  }
}
@media (min-width: 1600px) {
  .gv2-hero__inner {
    max-width: 1920px;
    padding-inline: 160px;
  }
}
@media (min-width: 2200px) {
  .gv2-hero__inner {
    max-width: 2400px;
  }
}
.gv2-hero__inner {
  width: 100%;
  padding-inline: calc(80px + 10px);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 80px;
  align-items: center;
}
@media (max-width: 1024px) {
  .gv2-hero__inner {
    grid-template-columns: 1fr;
    padding-inline: 40px;
  }
}
@media (max-width: 768px) {
  .gv2-hero__inner {
    padding-inline: 20px;
  }
}
.gv2-hero__title {
  font-family: var(--gv2-font-heading);
  font-weight: 700;
  text-transform: var(--gv2-title-case, uppercase);
  letter-spacing: 0.02em;
  line-height: 1.1;
}
@media (min-width: 1600px) {
  .gv2-hero__title {
    letter-spacing: 0.015em;
  }
}
.gv2-hero__title {
  font-size: 42px;
  margin: 0 0 20px;
}
.gv2-hero__title .gv2-accent {
  color: var(--vrd-primary);
  display: block;
}
@media (max-width: 768px) {
  .gv2-hero__title {
    font-size: 30px;
  }
}
@media (min-width: 1600px) {
  .gv2-hero__title {
    font-size: 52px;
  }
}
.gv2-hero__subtitle {
  color: var(--gv2-text-muted);
  font-size: 16px;
  max-width: 480px;
  margin-bottom: 40px;
}
@media (min-width: 1600px) {
  .gv2-hero__subtitle {
    font-size: 19px;
    max-width: 560px;
  }
}
.gv2-hero__actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.gv2-hero__cta {
  appearance: none;
  border: none;
  cursor: pointer;
  font-family: var(--gv2-font-body);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 5px;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  background: var(--vrd-primary);
  color: #fff;
  padding: 10px 40px;
}
.gv2-hero__cta:hover {
  background: var(--vrd-primary-dark);
}
.gv2-hero__how {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--gv2-text);
  font-weight: 700;
  font-size: 14px;
}
.gv2-hero__how i {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--gv2-border);
}
.gv2-hero__services {
  background: var(--gv2-glass-bg);
  border: 1px solid var(--gv2-glass-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 40px;
  max-width: 380px;
  margin-inline: auto;
}
.gv2-hero__services h3 {
  font-family: var(--gv2-font-heading);
  font-weight: 700;
  text-transform: var(--gv2-title-case, uppercase);
  letter-spacing: 0.02em;
  line-height: 1.1;
}
@media (min-width: 1600px) {
  .gv2-hero__services h3 {
    letter-spacing: 0.015em;
  }
}
.gv2-hero__services h3 {
  font-size: 24px;
  text-align: center;
  margin-bottom: 20px;
}
@media (max-width: 1024px) {
  .gv2-hero__services {
    max-width: 320px;
    margin-inline: auto;
    padding: 20px;
  }
  .gv2-hero__services h3 {
    font-size: 17px;
    margin-bottom: 10px;
  }
}
@media (max-width: 480px) {
  .gv2-hero__services {
    max-width: 260px;
    padding: 10px;
  }
}
.gv2-hero__services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 1024px) {
  .gv2-hero__services-grid {
    gap: 5px;
  }
}
.gv2-hero__service {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 5px;
  object-fit: cover;
}

.gv2-filter-bar {
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: 80px;
}
@media (max-width: 1024px) {
  .gv2-filter-bar {
    padding-inline: 40px;
  }
}
@media (max-width: 768px) {
  .gv2-filter-bar {
    padding-inline: 20px;
  }
}
@media (min-width: 1600px) {
  .gv2-filter-bar {
    max-width: 1920px;
    padding-inline: 160px;
  }
}
@media (min-width: 2200px) {
  .gv2-filter-bar {
    max-width: 2400px;
  }
}
.gv2-filter-bar {
  padding-block: 40px;
}
.gv2-filter-bar__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  align-items: stretch;
}
.gv2-filter-bar__group {
  display: flex;
  gap: 2px;
  background: var(--gv2-surface);
  border: 1px solid var(--gv2-border);
  border-radius: 5px;
  padding: 5px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.gv2-filter-bar__group::-webkit-scrollbar {
  display: none;
}
.gv2-filter-bar__group .gv2-filter-bar__pill {
  flex-shrink: 0;
}
.gv2-filter-bar__pill {
  appearance: none;
  border: none;
  cursor: pointer;
  font-family: var(--gv2-font-body);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 5px;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  background: none;
}
.gv2-filter-bar__pill:focus-visible {
  outline: 2px solid var(--vrd-primary);
  outline-offset: 2px;
}
.gv2-filter-bar__pill {
  background: none;
  color: var(--gv2-text-muted);
  font-size: 13px;
  padding: 10px 20px;
}
.gv2-filter-bar__pill.is-active {
  background: var(--vrd-primary);
  color: #fff;
}
.gv2-filter-bar__services-group {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--gv2-surface);
  border: 1px solid var(--gv2-border);
  border-radius: 5px;
  padding: 5px 10px;
}
.gv2-filter-bar__services-group img {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  object-fit: cover;
}
.gv2-filter-bar__services-more {
  color: var(--gv2-text-muted);
  font-size: 12px;
  font-weight: 700;
  padding-inline: 4px;
}
.gv2-filter-bar__spacer {
  flex: 1;
}
.gv2-filter-bar__filters-btn {
  appearance: none;
  border: none;
  cursor: pointer;
  font-family: var(--gv2-font-body);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 5px;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  background: none;
}
.gv2-filter-bar__filters-btn:focus-visible {
  outline: 2px solid var(--vrd-primary);
  outline-offset: 2px;
}
.gv2-filter-bar__filters-btn {
  background: rgba(109, 79, 163, 0.25);
  border: 1px solid rgba(109, 79, 163, 0.5);
  color: var(--gv2-text);
  padding: 10px 20px;
  font-size: 13px;
}
.gv2-filter-bar__filters-btn:hover, .gv2-filter-bar__filters-btn.is-active {
  background: rgba(109, 79, 163, 0.4);
}
.gv2-filter-bar__panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.25s ease, opacity 0.2s ease;
  width: fit-content;
  margin-left: auto;
}
.gv2-filter-bar__panel.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 10px;
}
.gv2-filter-bar__panel-inner {
  overflow: hidden;
}
.gv2-filter-bar__panel-box {
  background: rgba(109, 79, 163, 0.22);
  border: 1px solid rgba(109, 79, 163, 0.5);
  border-radius: 10px;
  padding: 20px;
}
.gv2-filter-bar__dropdowns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.gv2-filter-bar__dropdown {
  appearance: none;
  border: none;
  cursor: pointer;
  font-family: var(--gv2-font-body);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 5px;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  background: none;
}
.gv2-filter-bar__dropdown:focus-visible {
  outline: 2px solid var(--vrd-primary);
  outline-offset: 2px;
}
.gv2-filter-bar__dropdown {
  color: var(--gv2-text);
  background: var(--gv2-surface);
  border: 1px solid var(--gv2-border);
  padding: 10px 20px;
  font-size: 13px;
}

.gv2-section {
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: 80px;
}
@media (max-width: 1024px) {
  .gv2-section {
    padding-inline: 40px;
  }
}
@media (max-width: 768px) {
  .gv2-section {
    padding-inline: 20px;
  }
}
@media (min-width: 1600px) {
  .gv2-section {
    max-width: 1920px;
    padding-inline: 160px;
  }
}
@media (min-width: 2200px) {
  .gv2-section {
    max-width: 2400px;
  }
}
.gv2-section {
  padding-block: 40px;
}
.gv2-section__title {
  font-family: var(--gv2-font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.1;
}
@media (min-width: 1600px) {
  .gv2-section__title {
    letter-spacing: 0.015em;
  }
}
.gv2-section__title {
  text-transform: none;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  color: var(--gv2-text);
}
.gv2-section__title i {
  color: var(--vrd-primary);
  font-size: 20px;
}
@media (min-width: 1600px) {
  .gv2-section__title {
    font-size: 26px;
  }
  .gv2-section__title i {
    font-size: 23px;
  }
}
.gv2-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}
.gv2-section__link {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--gv2-text-muted);
  font-size: 13px;
  font-weight: 700;
}
.gv2-section__link:hover {
  color: var(--vrd-primary);
}

/* --------------------------------------------------------------------------
   Carousel — wraps VRD()->tools->render_carousel() (tiny-slider). Markup:
   .gv2-carousel[.gv2-carousel--posters|--people|--providers|--episodes|--services]
     > div > [.tns-outer > .tns-controls + .tns-ovh > .tns-inner >]
       .vrd_carousel.gv2-carousel__track[.tns-slider] > .gv2-carousel__slide > card
   Above 768px tns drives the track; below (tns not initialised) or without tns
   the track is a native horizontal scroller.
   -------------------------------------------------------------------------- */
.gv2-carousel {
  position: relative;
  padding-inline: 80px;
  margin-inline: -80px;
}
@media (max-width: 1024px) {
  .gv2-carousel {
    padding-inline: 0;
    margin-inline: 0;
  }
}
.gv2-carousel .tns-outer {
  position: relative;
}

/* render_carousel() hides the track (inline visibility:hidden) until tns has
   initialised, and only initialises tns above 768px; gupy-v2.js also destroys
   the tns instances at ≤1024px (mockup: native scroll, no arrows). A track
   without tns must always be visible. */
.gv2-carousel .vrd_carousel.gv2-carousel__track:not(.tns-slider) {
  visibility: visible !important;
}

/* Native scroller (≤1024px / no tns) */
.gv2-carousel__track:not(.tns-slider) {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding-top: 5px;
  padding-bottom: 5px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.gv2-carousel__track:not(.tns-slider)::-webkit-scrollbar {
  display: none;
}
@media (max-width: 768px) {
  .gv2-carousel__track:not(.tns-slider),
  .gv2-carousel .vrd_carousel.gv2-carousel__track {
    gap: 10px;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }
}
@media (max-width: 480px) {
  .gv2-carousel__track:not(.tns-slider),
  .gv2-carousel .vrd_carousel.gv2-carousel__track {
    gap: 5px;
  }
}
.gv2-carousel__track:not(.tns-slider) > .gv2-carousel__slide {
  flex: 0 0 200px;
  width: 200px;
  min-width: 0;
  scroll-snap-align: start;
}
.gv2-carousel__slide > * {
  width: 100%;
}

/* Slide widths of the native scroller, per variant (mockup card sizes). */
@media (max-width: 768px) {
  .gv2-carousel__track:not(.tns-slider) > .gv2-carousel__slide {
    flex-basis: 150px;
    width: 150px;
  }
}
@media (max-width: 480px) {
  .gv2-carousel__track:not(.tns-slider) > .gv2-carousel__slide {
    flex-basis: 80px;
    width: 80px;
  }
}
@media (max-width: 360px) {
  .gv2-carousel__track:not(.tns-slider) > .gv2-carousel__slide {
    flex-basis: 75px;
    width: 75px;
  }
}
.gv2-carousel--people .gv2-carousel__track:not(.tns-slider) > .gv2-carousel__slide {
  flex-basis: 110px;
  width: 110px;
}
@media (max-width: 480px) {
  .gv2-carousel--people .gv2-carousel__track:not(.tns-slider) > .gv2-carousel__slide {
    flex-basis: 76px;
    width: 76px;
  }
}
.gv2-carousel--services .gv2-carousel__track:not(.tns-slider) > .gv2-carousel__slide {
  flex-basis: 96px;
  width: 96px;
}
@media (max-width: 480px) {
  .gv2-carousel--services .gv2-carousel__track:not(.tns-slider) > .gv2-carousel__slide {
    flex-basis: 68px;
    width: 68px;
  }
}
.gv2-carousel--providers .gv2-carousel__track:not(.tns-slider) > .gv2-carousel__slide {
  flex-basis: 260px;
  width: 260px;
}
@media (max-width: 480px) {
  .gv2-carousel--providers .gv2-carousel__track:not(.tns-slider) > .gv2-carousel__slide {
    flex-basis: 210px;
    width: 210px;
  }
}
.gv2-carousel--episodes .gv2-carousel__track:not(.tns-slider) > .gv2-carousel__slide {
  flex-basis: 220px;
  width: 220px;
}
@media (max-width: 480px) {
  .gv2-carousel--episodes .gv2-carousel__track:not(.tns-slider) > .gv2-carousel__slide {
    flex-basis: 160px;
    width: 160px;
  }
}
/* Provider cards fill the tns slide height so rows line up. */
.gv2-carousel--providers .gv2-carousel__slide > .gv2-provider-card {
  height: 100%;
}

/* Static arrows (only for hand-made tracks; tns renders its own controls) */
.gv2-carousel__arrow {
  appearance: none;
  border: none;
  cursor: pointer;
  font-family: var(--gv2-font-body);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 5px;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  background: none;
}
.gv2-carousel__arrow:focus-visible {
  outline: 2px solid var(--vrd-primary);
  outline-offset: 2px;
}
.gv2-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--gv2-text);
  font-size: 22px;
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}
.gv2-carousel__arrow:hover {
  color: var(--vrd-primary);
}
.gv2-carousel__arrow--prev {
  left: 8px;
}
.gv2-carousel__arrow--next {
  right: 8px;
}
@media (max-width: 1024px) {
  .gv2-carousel__arrow {
    display: none;
  }
}

/* tiny-slider controls, placed like the mockup arrows (in the side gutter). */
.gv2-carousel .tns-controls {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  z-index: 3;
}
.gv2-carousel .tns-controls:focus {
  outline: none;
}
.gv2-carousel .tns-controls > button {
  appearance: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none !important;
  border: 0;
  border-radius: 5px;
  box-shadow: none;
  color: var(--gv2-text);
  font-size: 22px;
  line-height: 1 !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  pointer-events: auto;
  transition: color 0.2s ease;
}
.gv2-carousel .tns-controls > button:hover {
  color: var(--vrd-primary);
}
.gv2-carousel .tns-controls > button:focus-visible {
  outline: 2px solid var(--vrd-primary);
  outline-offset: 2px;
}
.gv2-carousel .tns-controls > button[disabled] {
  display: none;
}
.gv2-carousel .tns-controls > button i {
  font-size: inherit;
  color: inherit;
}
.gv2-carousel .tns-controls > button[data-controls=prev] {
  left: -72px;
  right: auto;
}
.gv2-carousel .tns-controls > button[data-controls=next] {
  right: -72px;
  left: auto;
}
/* Mockup: no arrows at ≤1024px (native scroll there, see gupy-v2.js). */
@media (max-width: 1024px) {
  .gv2-carousel .tns-controls {
    display: none;
  }
}

/* Client-side filtering (gupy-v2.js) */
.gv2-is-filtered-out {
  display: none !important;
}

.gv2-poster-card {
  flex: 0 0 200px;
  scroll-snap-align: start;
  position: relative;
}
@media (max-width: 768px) {
  .gv2-poster-card {
    flex-basis: 150px;
  }
}
@media (max-width: 480px) {
  .gv2-poster-card {
    flex-basis: 80px;
  }
}
@media (max-width: 360px) {
  .gv2-poster-card {
    flex-basis: 75px;
  }
}
.gv2-poster-card__bookmark {
  appearance: none;
  border: none;
  cursor: pointer;
  font-family: var(--gv2-font-body);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 5px;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  background: none;
}
.gv2-poster-card__bookmark:focus-visible {
  outline: 2px solid var(--vrd-primary);
  outline-offset: 2px;
}
.gv2-poster-card__bookmark {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 30px;
  height: 30px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--gv2-bg-rgb), 0.55);
  backdrop-filter: blur(4px);
  color: var(--gv2-text);
  font-size: 13px;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.gv2-poster-card__bookmark.is-favorites, .gv2-poster-card__bookmark.is-watched, .gv2-poster-card__bookmark.is-watchlist, .gv2-poster-card__bookmark.is-custom {
  opacity: 1;
}
.gv2-poster-card__bookmark.is-favorites {
  color: var(--gv2-warning);
}
.gv2-poster-card__bookmark.is-watched {
  color: var(--gv2-success);
}
.gv2-poster-card__bookmark.is-watchlist {
  color: var(--vrd-violet);
}
/* In a personal list: solid bookmark in the brand pink. */
.gv2-poster-card__bookmark.is-custom {
  color: var(--vrd-primary);
}
.gv2-poster-card:hover .gv2-poster-card__bookmark, .gv2-poster-card__bookmark:focus-visible {
  opacity: 1;
}
.gv2-poster-card__badge {
  background: var(--gv2-glass-bg);
  border: 1px solid var(--gv2-glass-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: absolute;
  top: 10px;
  right: 10px;
  color: var(--gv2-text);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 5px;
  z-index: 1;
}
@media (max-width: 480px) {
  .gv2-poster-card__badge {
    top: 5px;
    right: 5px;
    font-size: 9px;
    padding: 2px 5px;
  }
}
.gv2-poster-card__rank {
  position: absolute;
  top: -26px;
  left: calc(50% - 24px);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--vrd-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 28px;
  z-index: 2;
  box-shadow: 0 0 0 4px var(--gv2-bg);
}
@media (max-width: 480px) {
  .gv2-poster-card__rank {
    width: 30px;
    height: 30px;
    top: -14px;
    left: calc(50% - 15px);
    font-size: 16px;
    box-shadow: 0 0 0 2px var(--gv2-bg);
  }
}
.gv2-poster-card__img {
  overflow: hidden;
}
.gv2-poster-card__img img {
  transition: transform 0.3s ease;
}
.gv2-poster-card__img:hover img {
  transform: scale(1.06);
}
.gv2-poster-card__img {
  position: relative;
  width: 100%;
  aspect-ratio: 2/3;
  border-radius: 10px;
  background: var(--gv2-surface);
}
.gv2-poster-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gv2-poster-card__rank--outline {
  position: absolute;
  bottom: -6px;
  left: 2px;
  font-family: var(--gv2-font-heading);
  font-weight: 800;
  font-size: 68px;
  line-height: 1;
  color: var(--gv2-bg);
  -webkit-text-stroke: 2.5px var(--vrd-primary);
  z-index: 2;
  pointer-events: none;
  user-select: none;
}
@media (max-width: 768px) {
  .gv2-poster-card__rank--outline {
    font-size: 48px;
  }
}
@media (max-width: 480px) {
  .gv2-poster-card__rank--outline {
    font-size: 30px;
    -webkit-text-stroke: 1.5px var(--vrd-primary);
  }
}
.gv2-poster-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  margin-top: 10px;
}
@media (max-width: 480px) {
  .gv2-poster-card__head {
    margin-top: 5px;
  }
}
.gv2-poster-card__title-wrap {
  min-width: 0;
}
.gv2-poster-card__title {
  font-weight: 700;
  font-size: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 480px) {
  .gv2-poster-card__title {
    font-size: 11px;
  }
}
@media (min-width: 1600px) {
  .gv2-poster-card__title {
    font-size: 16px;
  }
}
.gv2-poster-card__year {
  display: block;
  color: var(--gv2-text-muted);
  font-weight: 700;
  font-size: 13px;
  margin-top: 2px;
}
@media (max-width: 480px) {
  .gv2-poster-card__year {
    font-size: 11px;
  }
}
@media (min-width: 1600px) {
  .gv2-poster-card__year {
    font-size: 14px;
  }
}
.gv2-poster-card__gupy-pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(219, 53, 117, 0.07);
  color: var(--vrd-primary);
  border: 1px solid rgba(219, 53, 117, 0.22);
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.gv2-poster-card__gupy-pill i {
  font-size: 10px;
}
@media (max-width: 480px) {
  .gv2-poster-card__gupy-pill {
    font-size: 9px;
    padding: 1px 5px;
  }
}
.gv2-poster-card__meta {
  color: var(--gv2-text-muted);
  font-size: 12px;
  margin-top: 2px;
}
@media (max-width: 480px) {
  .gv2-poster-card__meta {
    font-size: 10px;
  }
}

.gv2-person-card {
  flex: 0 0 110px;
  text-align: center;
}
@media (max-width: 480px) {
  .gv2-person-card {
    flex-basis: 76px;
  }
}
.gv2-person-card__img {
  overflow: hidden;
}
.gv2-person-card__img img {
  transition: transform 0.3s ease;
}
.gv2-person-card__img:hover img {
  transform: scale(1.06);
}
.gv2-person-card__img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  margin-inline: auto;
  background: var(--gv2-surface);
}
.gv2-person-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 480px) {
  .gv2-person-card__img {
    width: 64px;
    height: 64px;
  }
}
.gv2-person-card__name {
  margin-top: 10px;
  font-weight: 700;
  font-size: 13px;
}
@media (max-width: 480px) {
  .gv2-person-card__name {
    font-size: 11px;
  }
}
.gv2-person-card__role {
  color: var(--gv2-text-muted);
  font-size: 12px;
}
@media (max-width: 480px) {
  .gv2-person-card__role {
    font-size: 10px;
  }
}
.gv2-person-card__more {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--gv2-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  font-weight: 700;
  color: var(--gv2-text-muted);
}
@media (max-width: 480px) {
  .gv2-person-card__more {
    width: 64px;
    height: 64px;
  }
}

.gv2-service-badge {
  flex: 0 0 96px;
  text-align: center;
}
@media (max-width: 480px) {
  .gv2-service-badge {
    flex-basis: 68px;
  }
}
.gv2-service-badge__img {
  display: block;
  object-fit: cover;
  width: 72px;
  height: 72px;
  border-radius: 10px;
  margin-inline: auto;
}
@media (max-width: 480px) {
  .gv2-service-badge__img {
    width: 52px;
    height: 52px;
  }
}
.gv2-service-badge__name {
  margin-top: 10px;
  font-size: 12px;
  color: var(--gv2-text-muted);
  font-weight: 700;
}
@media (max-width: 480px) {
  .gv2-service-badge__name {
    font-size: 10px;
  }
}

.gv2-rank-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 768px) {
  .gv2-rank-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .gv2-rank-grid {
    grid-template-columns: 1fr;
  }
}

.gv2-rank-card {
  background: var(--gv2-surface);
  border: 1px solid rgba(219, 53, 117, 0.35);
  border-radius: 16px;
  padding: 20px;
}
.gv2-rank-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  font-weight: 700;
}
.gv2-rank-card__head img {
  display: block;
  object-fit: cover;
  width: 24px;
  height: 24px;
  border-radius: 6px;
}
.gv2-rank-card__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-block: 6px;
}
.gv2-rank-card__num {
  color: var(--gv2-text-dim);
  font-weight: 700;
  width: 16px;
  flex-shrink: 0;
}
.gv2-rank-card__thumb {
  width: 32px;
  height: 44px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--gv2-surface-alt);
  flex-shrink: 0;
}
.gv2-rank-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gv2-rank-card__title {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gv2-rank-card__trend {
  font-size: 12px;
}
.gv2-rank-card__trend--up {
  color: var(--gv2-success);
}
.gv2-rank-card__trend--down {
  color: var(--gv2-danger);
}
.gv2-rank-card__cta {
  appearance: none;
  border: none;
  cursor: pointer;
  font-family: var(--gv2-font-body);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 5px;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  background: var(--gv2-surface);
  border: 1px solid var(--gv2-border);
  color: var(--gv2-text);
  padding: 10px 40px;
}
.gv2-rank-card__cta:hover {
  border-color: var(--vrd-primary);
}
.gv2-rank-card__cta {
  width: 100%;
  margin-top: 10px;
  font-size: 13px;
}

.gv2-banner {
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: 80px;
}
@media (max-width: 1024px) {
  .gv2-banner {
    padding-inline: 40px;
  }
}
@media (max-width: 768px) {
  .gv2-banner {
    padding-inline: 20px;
  }
}
@media (min-width: 1600px) {
  .gv2-banner {
    max-width: 1920px;
    padding-inline: 160px;
  }
}
@media (min-width: 2200px) {
  .gv2-banner {
    max-width: 2400px;
  }
}
.gv2-banner {
  margin-block: 40px;
}
.gv2-banner__box {
  border-radius: 16px;
  padding: 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  position: relative;
}
.gv2-banner__box > * {
  min-width: 0;
}
@media (max-width: 1024px) {
  .gv2-banner__box {
    grid-template-columns: 1fr;
    padding: 40px;
  }
}
.gv2-banner--gradient .gv2-banner__box {
  background: linear-gradient(120deg, #2c1656 0%, #6d1a4a 60%, var(--vrd-primary) 100%);
  overflow: hidden;
}
.gv2-banner--gradient .gv2-banner__box::before {
  content: "";
  position: absolute;
  inset: -60%;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.16) 50%, transparent 58%);
  animation: gv2-dune-sheen 7s ease-in-out infinite alternate;
  z-index: 0;
  pointer-events: none;
}
.gv2-banner--gradient .gv2-banner__box > * {
  position: relative;
  z-index: 1;
}
.gv2-banner--surface .gv2-banner__box {
  background: var(--gv2-surface);
  border: 1px solid var(--gv2-border);
}
@media (min-width: 1025px) {
  .gv2-banner__box--replay {
    grid-template-columns: 1fr 1.3fr;
  }
}
.gv2-banner__title {
  font-family: var(--gv2-font-heading);
  font-weight: 700;
  text-transform: var(--gv2-title-case, uppercase);
  letter-spacing: 0.02em;
  line-height: 1.1;
}
@media (min-width: 1600px) {
  .gv2-banner__title {
    letter-spacing: 0.015em;
  }
}
.gv2-banner__title {
  font-size: 30px;
}
.gv2-banner__title .gv2-accent {
  color: var(--vrd-primary);
}
@media (max-width: 768px) {
  .gv2-banner__title {
    font-size: 22px;
  }
}
@media (min-width: 1600px) {
  .gv2-banner__title {
    font-size: 36px;
  }
}
.gv2-banner__text {
  color: var(--gv2-text-muted);
  margin-top: 10px;
  max-width: 460px;
}
@media (min-width: 1600px) {
  .gv2-banner__text {
    font-size: 17px;
    max-width: 520px;
  }
}
.gv2-banner__cta {
  appearance: none;
  border: none;
  cursor: pointer;
  font-family: var(--gv2-font-body);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 5px;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  background: var(--vrd-primary);
  color: #fff;
  padding: 10px 40px;
}
.gv2-banner__cta:hover {
  background: var(--vrd-primary-dark);
}
.gv2-banner__cta {
  margin-top: 20px;
}
.gv2-banner__cta--outline {
  background: transparent;
  border: 1px solid var(--vrd-primary);
  color: var(--vrd-primary);
}
.gv2-banner__cta--outline:hover {
  background: rgba(219, 53, 117, 0.12);
}
.gv2-banner__cta--outline-green {
  background: transparent;
  border: 1px solid var(--gv2-success);
  color: var(--gv2-success);
}
.gv2-banner__cta--outline-green:hover {
  background: rgba(34, 197, 94, 0.12);
}
.gv2-banner__orb {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 30% 28%, rgba(219, 53, 117, 0.65), rgba(20, 12, 24, 0.95) 55%, #100b14 100%);
  box-shadow: 0 0 18px rgba(219, 53, 117, 0.4), inset 0 0 10px rgba(0, 0, 0, 0.6);
  color: #fff; /* always a dark orb */
  font-size: 18px;
}
.gv2-banner__head-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.gv2-banner__card {
  position: relative;
  background: var(--gv2-surface);
  border: 1px solid var(--gv2-border);
  border-radius: 10px;
  padding: 40px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.gv2-banner__card img {
  width: 110px;
  aspect-ratio: 2/3;
  object-fit: cover;
  border-radius: 5px;
  flex-shrink: 0;
}
.gv2-banner__card h4 {
  font-size: 18px;
}
.gv2-banner__card p {
  color: var(--gv2-text-muted);
  font-size: 13px;
  margin-bottom: 10px;
}
@media (max-width: 480px) {
  .gv2-banner__card img {
    width: 76px;
  }
}
.gv2-banner__card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.gv2-banner__card-year {
  color: var(--gv2-text-muted);
  font-weight: 400;
  font-size: 14px;
}
.gv2-banner__gupy-pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(219, 53, 117, 0.07);
  color: var(--vrd-primary);
  border: 1px solid rgba(219, 53, 117, 0.22);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 700;
}
.gv2-banner__gupy-pill i {
  font-size: 11px;
}
.gv2-banner__provider-group {
  margin-top: 20px;
}
.gv2-banner__provider-group span {
  display: block;
  font-size: 11px;
  text-transform: var(--gv2-title-case, uppercase);
  color: var(--gv2-text-dim);
  font-weight: 700;
  margin-bottom: 10px;
}
.gv2-banner__provider-icons {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.gv2-banner__provider {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 56px;
}
.gv2-banner__provider img {
  display: block;
  object-fit: cover;
  width: 44px;
  height: 44px;
  border-radius: 5px;
}
.gv2-banner__provider span {
  font-size: 10px;
  color: var(--gv2-text-dim);
  text-align: center;
  line-height: 1.2;
}
.gv2-banner__provider-more {
  width: 44px;
  height: 44px;
  border-radius: 5px;
  background: var(--gv2-surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--gv2-text-muted);
}
.gv2-banner__list {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gv2-banner__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
}
.gv2-banner__check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gv2-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 11px;
  color: var(--gv2-text);
}
.gv2-banner__crown {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 28px rgba(219, 53, 117, 0.5);
  color: var(--gv2-text);
  font-size: 34px;
  justify-self: center;
}
.gv2-banner__crown i {
  -webkit-text-stroke: 1.5px #fff;
  color: transparent;
}
@media (max-width: 480px) {
  .gv2-banner__crown {
    width: 68px;
    height: 68px;
    font-size: 24px;
  }
}
.gv2-banner__mock {
  max-width: 70%;
  border-radius: 10px;
  border: 1px solid var(--gv2-border);
}
.gv2-banner__mock--web {
  aspect-ratio: 16/9;
  object-fit: cover;
  height: 20vh;
}
@media (max-width: 480px) {
  .gv2-banner__mock--web {
    height: auto;
    max-width: 100%;
  }
}
.gv2-banner__mock--phone {
  width: 140px;
  aspect-ratio: 9/16;
  object-fit: cover;
  position: relative;
  right: 40px;
}
@media (max-width: 1024px) {
  .gv2-banner__mock--phone {
    right: 0;
  }
}
@media (max-width: 480px) {
  .gv2-banner__mock--phone {
    width: 96px;
  }
}
.gv2-banner__mocks {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: flex-end;
}
.gv2-banner__members {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}
.gv2-banner__avatars {
  display: flex;
}
.gv2-banner__avatars img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--gv2-surface);
  object-fit: cover;
  margin-left: -10px;
}
.gv2-banner__avatars img:first-child {
  margin-left: 0;
}
.gv2-banner__members-count {
  font-size: 13px;
  color: var(--gv2-text-muted);
  font-weight: 700;
}
.gv2-banner__comments {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}
.gv2-banner__comment {
  background: var(--gv2-surface-alt);
  border-radius: 10px;
  padding: 10px 20px;
  font-size: 13px;
}
.gv2-banner__comment b {
  color: var(--vrd-primary);
}
.gv2-banner__comment p {
  color: var(--gv2-text-muted);
  margin-top: 2px;
}

.gv2-split-banner {
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: 80px;
}
@media (max-width: 1024px) {
  .gv2-split-banner {
    padding-inline: 40px;
  }
}
@media (max-width: 768px) {
  .gv2-split-banner {
    padding-inline: 20px;
  }
}
@media (min-width: 1600px) {
  .gv2-split-banner {
    max-width: 1920px;
    padding-inline: 160px;
  }
}
@media (min-width: 2200px) {
  .gv2-split-banner {
    max-width: 2400px;
  }
}
.gv2-split-banner {
  margin-block: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: stretch;
}
@media (max-width: 1024px) {
  .gv2-split-banner {
    grid-template-columns: 1fr;
  }
}
.gv2-split-banner--single {
  grid-template-columns: 1fr;
}
.gv2-split-banner__panel {
  min-width: 0;
  border-radius: 16px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.gv2-split-banner__panel--premium {
  background: radial-gradient(circle at 15% 20%, rgba(219, 53, 117, 0.25), transparent 60%), #17101c;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 20px;
}
@media (max-width: 480px) {
  .gv2-split-banner__panel--premium {
    grid-template-columns: 1fr;
  }
}
.gv2-split-banner__panel--premium > div {
  min-width: 0;
}
.gv2-split-banner__panel--community {
  background: var(--gv2-surface);
  border: 1px solid var(--gv2-border);
}

.gv2-tile-stack {
  position: relative;
  width: 220px;
  height: 240px;
  justify-self: center;
  align-self: center;
}
@media (max-width: 480px) {
  .gv2-tile-stack {
    transform: scale(0.7);
    margin-block: -36px;
  }
}
.gv2-tile-stack__item {
  position: absolute;
  aspect-ratio: 2/3;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--gv2-shadow);
  border: 1px solid var(--gv2-border);
}
.gv2-tile-stack__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gv2-tile-stack__item:nth-child(1) {
  width: 130px;
  top: 0;
  left: 0;
  z-index: 4;
}
.gv2-tile-stack__item:nth-child(2) {
  width: 102px;
  top: 34px;
  left: 100px;
  z-index: 3;
}
.gv2-tile-stack__item:nth-child(3) {
  width: 78px;
  top: 62px;
  left: 180px;
  z-index: 2;
}
.gv2-tile-stack__item:nth-child(4) {
  width: 56px;
  top: 84px;
  left: 240px;
  z-index: 1;
}

.gv2-linked-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
@media (max-width: 768px) {
  .gv2-linked-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 1024px) {
  .gv2-linked-grid {
    display: none;
  }
}
.gv2-linked-grid__logo {
  display: block;
  object-fit: cover;
  width: 100%;
  border-radius: 5px;
  height: 40px;
}
.gv2-linked-grid__poster {
  border-radius: 5px;
  overflow: hidden;
  aspect-ratio: 2/3;
}
.gv2-linked-grid__poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gv2-newsletter__title {
  color: var(--vrd-primary);
}
.gv2-newsletter__articles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.gv2-newsletter__article {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 4/3;
}
.gv2-newsletter__article img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gv2-newsletter__article > span {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--vrd-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 5px;
  z-index: 2;
}
.gv2-newsletter__article-body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  padding: 10px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.9) 40%, transparent);
}
.gv2-newsletter__article-title {
  font-weight: 700;
  font-size: 13px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gv2-newsletter__article-excerpt {
  color: var(--gv2-text-muted);
  font-size: 11px;
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gv2-newsletter__article-date {
  display: block;
  color: var(--gv2-text-dim);
  font-size: 10px;
  margin-top: 4px;
}

.gv2-banner__box,
.gv2-banner__card,
.gv2-split-banner__panel--community {
  position: relative;
}
.gv2-banner__box::after,
.gv2-banner__card::after,
.gv2-split-banner__panel--community::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(800px circle at var(--aura-x, 50%) var(--aura-y, 50%), rgba(219, 53, 117, 0.85), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.gv2-banner__box:hover::after,
.gv2-banner__card:hover::after,
.gv2-split-banner__panel--community:hover::after {
  opacity: 1;
}

@keyframes gv2-dune-sheen {
  0% {
    transform: translate(-15%, -10%) rotate(8deg);
  }
  100% {
    transform: translate(15%, 10%) rotate(8deg);
  }
}
.gv2-split-banner__panel--premium {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* The mouse-following glow must follow the panel's rounded corners. */
.gv2-split-banner__panel--premium::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(260px circle at var(--premium-x, 22%) var(--premium-y, 32%), rgba(219, 53, 117, 0.55), transparent 70%);
  z-index: 0;
  pointer-events: none;
}
.gv2-split-banner__panel--premium > * {
  position: relative;
  z-index: 1;
}


/* ==========================================================================
   INTEGRATION ADDITIONS (real markup: links, states, WP data edge cases,
   replacements for the mockup inline styles)
   ========================================================================== */

/* Poster card */
.gv2-poster-card__link,
.gv2-poster-card__link:hover,
.gv2-poster-card__link:focus {
  display: block;
  color: inherit;
  text-decoration: none;
}
.gv2-poster-card__link:hover .gv2-poster-card__img img {
  transform: scale(1.06);
}
.gv2-poster-card__bookmark {
  padding: 0;
  margin: 0;
  line-height: 1;
  -webkit-backdrop-filter: blur(4px);
}
.gv2-poster-card__bookmark:hover {
  color: var(--vrd-primary);
}
@media (hover: none) {
  .gv2-poster-card__bookmark {
    opacity: 1;
  }
}
.gv2-poster-card__gupy-pill small,
.gv2-banner__gupy-pill small {
  font-size: 0.8em;
  font-weight: 400;
  opacity: 0.8;
  margin-left: 1px;
}
.gv2-poster-card__gupy-pill--user i {
  color: var(--gv2-star);
}
.gv2-poster-card__rank--outline {
  -webkit-text-fill-color: var(--gv2-bg);
}

/* Person card (link) */
a.gv2-person-card,
a.gv2-person-card:hover,
a.gv2-person-card:focus {
  display: block;
  color: inherit;
  text-decoration: none;
}
a.gv2-person-card:hover .gv2-person-card__name {
  color: var(--vrd-primary);
}
.gv2-person-card__img--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gv2-text-dim);
  font-size: 32px;
}
@media (max-width: 480px) {
  .gv2-person-card__img--empty {
    font-size: 22px;
  }
}
a.gv2-person-card--more:hover .gv2-person-card__more {
  color: var(--gv2-text);
  background: var(--gv2-surface-alt);
}

/* Service badge (link) */
a.gv2-service-badge,
a.gv2-service-badge:hover,
a.gv2-service-badge:focus {
  display: block;
  color: inherit;
  text-decoration: none;
}
span.gv2-service-badge__img {
  background: var(--gv2-surface-alt);
}
a.gv2-service-badge:hover .gv2-service-badge__name {
  color: var(--gv2-text);
}

/* Rank card (rows are links) */
a.gv2-rank-card__row,
a.gv2-rank-card__row:hover,
a.gv2-rank-card__row:focus {
  color: inherit;
  text-decoration: none;
}
a.gv2-rank-card__row:hover .gv2-rank-card__title {
  color: var(--vrd-primary);
}
.gv2-rank-card__head a,
.gv2-rank-card__head a:hover {
  color: inherit;
  text-decoration: none;
}
.gv2-rank-card__trend--same {
  color: var(--gv2-text-dim);
  font-size: 10px;
}
.gv2-rank-card__trend--new {
  color: var(--vrd-primary);
  font-size: 7px;
}
a.gv2-rank-card__cta,
a.gv2-rank-card__cta:hover {
  color: var(--gv2-text);
  text-decoration: none;
}

/* Replacements for the mockup inline styles */
.gv2-banner__cta--light {
  background: #fff;
  color: var(--vrd-primary);
}
.gv2-banner__cta--light:hover {
  background: rgba(255, 255, 255, 0.85);
  color: var(--vrd-primary-dark);
}
/* The parent dark scheme colors every link white (.dark-schema a, 0-1-1):
   the CTA variants with their own text color need more weight than that
   (the premium "Try Premium" button was white on white). */
body.gupy-v2 a.gv2-banner__cta.gv2-banner__cta--light,
body.gupy-v2 a.gv2-banner__cta.gv2-banner__cta--light:focus,
body.gupy-v2 a.gv2-banner__cta.gv2-banner__cta--light i {
  color: var(--vrd-primary);
}
body.gupy-v2 a.gv2-banner__cta.gv2-banner__cta--light:hover,
body.gupy-v2 a.gv2-banner__cta.gv2-banner__cta--light:hover i {
  color: var(--vrd-primary-dark);
}
body.gupy-v2 a.gv2-banner__cta.gv2-banner__cta--outline,
body.gupy-v2 a.gv2-banner__cta.gv2-banner__cta--outline:focus,
body.gupy-v2 a.gv2-banner__cta.gv2-banner__cta--outline:hover {
  color: var(--vrd-primary);
}
body.gupy-v2 a.gv2-section__link {
  color: var(--gv2-text-muted);
}
body.gupy-v2 a.gv2-section__link:hover {
  color: var(--vrd-primary);
}
body.gupy-v2 a.gv2-banner__comment-program {
  color: var(--gv2-text-dim);
}
body.gupy-v2 a.gv2-banner__comment-program:hover {
  color: var(--gv2-text);
}
body.gupy-v2 a.gv2-banner__cta.gv2-banner__cta--outline-green,
body.gupy-v2 a.gv2-banner__cta.gv2-banner__cta--outline-green:focus,
body.gupy-v2 a.gv2-banner__cta.gv2-banner__cta--outline-green:hover {
  color: var(--gv2-success);
}
a.gv2-banner__cta,
a.gv2-banner__cta:hover,
a.gv2-hero__cta,
a.gv2-hero__cta:hover,
a.gv2-rating-panel__cta,
a.gv2-rating-panel__cta:hover {
  text-decoration: none;
}
a.gv2-banner__cta:not(.gv2-banner__cta--outline):not(.gv2-banner__cta--outline-green):not(.gv2-banner__cta--light),
a.gv2-hero__cta,
a.gv2-rating-panel__cta {
  color: #fff;
}
.gv2-banner__badge--free {
  display: inline-block;
  background: rgba(34, 197, 94, 0.15);
  color: var(--gv2-success);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 5px;
  margin-bottom: 10px;
}
.gv2-filter-bar__group--inline {
  display: inline-flex;
  max-width: 100%;
  margin-bottom: 20px;
}
.gv2-section__title .gv2-accent {
  color: var(--vrd-primary);
}
.gv2-review__avatar--initial {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gv2-avatar-bg, var(--vrd-primary));
  color: #fff;
  font-family: var(--gv2-font-heading);
  font-weight: 800;
}

/* Landing slider dots (optional, generated by gupy-v2.js when
   [data-gv2-dots] is set on .gv2-landing-slider) */
/* Progress dots, bottom right (same component as the program page sponsored
   carousel): the active dot fills over the interval (--gv2-interval, set by JS). */
.gv2-landing-dots {
  position: absolute;
  right: 80px;
  bottom: 20px;
  display: flex;
  gap: 5px;
  z-index: 2;
}
@media (max-width: 1024px) {
  .gv2-landing-dots {
    right: 40px;
  }
}
@media (max-width: 768px) {
  .gv2-landing-dots {
    right: 20px;
    bottom: 10px;
  }
}
@media (min-width: 1600px) {
  .gv2-landing-dots {
    right: 160px;
  }
}
.gv2-landing-dot {
  position: relative;
  overflow: hidden;
  appearance: none;
  width: 8px;
  height: 8px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(var(--gv2-fg-rgb), 0.35);
  cursor: pointer;
  transition: width 0.25s ease;
}
.gv2-landing-dot.is-active {
  width: 28px;
}
.gv2-landing-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--vrd-primary);
}
.gv2-landing-dot.is-active::after {
  transform: scaleX(1);
}
.gv2-landing-dot.is-running::after {
  animation: gv2-landing-dot-progress var(--gv2-interval, 5000ms) linear forwards;
}
.gv2-landing-slider.is-paused .gv2-landing-dot.is-running::after {
  animation-play-state: paused;
}
@keyframes gv2-landing-dot-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.gv2-landing-dot:focus-visible {
  outline: 2px solid var(--vrd-primary);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .gv2-landing-track {
    transition: none;
  }
  .gv2-banner--gradient .gv2-banner__box::before {
    animation: none;
  }
}

/* Filters panel: keep it out of the tab order when closed */
.gv2-filter-bar__panel:not(.is-open) .gv2-filter-bar__panel-inner {
  visibility: hidden;
}
.gv2-filter-bar__panel.is-open .gv2-filter-bar__panel-inner {
  visibility: visible;
}

/* Filter pills rendered as links */
a.gv2-filter-bar__pill,
a.gv2-filter-bar__pill:hover {
  text-decoration: none;
}
.gv2-filter-bar__pill:hover {
  color: var(--gv2-text);
}
.gv2-filter-bar__pill.is-active:hover {
  color: #fff;
}

/* Empty state after client-side filtering */
.gv2-filter-empty {
  color: var(--gv2-text-muted);
  font-size: 13px;
  padding-block: 10px;
}
.gv2-filter-empty[hidden] {
  display: none;
}

/* ==========================================================================
   HOME v2 (Group C markup)
   ========================================================================== */

.gv2-hero__service-link {
  display: block;
  border-radius: 5px;
  overflow: hidden;
  transition: transform 0.2s ease;
}
.gv2-hero__service-link:hover {
  transform: translateY(-2px);
}
.gv2-hero__service-link .gv2-hero__service {
  height: auto;
}
.gv2-linked-grid__logo-link {
  display: block;
  border-radius: 5px;
  overflow: hidden;
}
.gv2-banner__badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 5px;
  margin-bottom: 10px;
  background: rgba(219, 53, 117, 0.15);
  color: var(--vrd-primary);
}
.gv2-banner__badge.gv2-banner__badge--free {
  background: rgba(34, 197, 94, 0.15);
  color: var(--gv2-success);
}
.gv2-banner__comment-program {
  display: inline-block;
  margin-left: 5px;
  color: var(--gv2-text-dim);
  font-size: 12px;
  font-style: italic;
}
a.gv2-banner__comment-program:hover {
  color: var(--gv2-text);
}
.gv2-home__ad {
  width: 100%;
  max-width: 1600px;
  margin: 20px auto;
  padding-inline: var(--gv2-gutter, 80px);
  text-align: center;
  overflow: hidden;
}
@media (min-width: 1600px) {
  .gv2-home__ad {
    max-width: 1920px;
  }
}
a.gv2-newsletter__article,
a.gv2-newsletter__article:hover {
  display: block;
  color: inherit;
  text-decoration: none;
}
a.gv2-newsletter__article img {
  transition: transform 0.3s ease;
}
a.gv2-newsletter__article:hover img {
  transform: scale(1.06);
}
.gv2-tile-stack__item a {
  display: block;
  width: 100%;
  height: 100%;
}


/* Replay banner: free contents as provider-logo + poster pairs (banner-replay.php).
   8 pairs are rendered; one less is shown at each breakpoint down, 5 on a
   classic 1920px screen: >=3200: 8 | 2560: 7 | 2200: 6 | 1600: 5 | 1280: 4 |
   1024: 3 | 768: 2 | <768: 1. Pairs flow in columns (one column per shown pair). */
.gv2-linked-grid.gv2-linked-grid--pairs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  grid-template-columns: none;
  gap: 10px;
  width: 100%;
}
.gv2-linked-grid--pairs .gv2-linked-grid__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.gv2-linked-grid--pairs .gv2-linked-grid__item:nth-child(n+8) { display: none; }
@media (min-width: 3200px) {
  .gv2-linked-grid--pairs .gv2-linked-grid__item:nth-child(n+8) { display: flex; }
}
@media (max-width: 2559px) {
  .gv2-linked-grid--pairs .gv2-linked-grid__item:nth-child(n+7) { display: none; }
}
@media (max-width: 2199px) {
  .gv2-linked-grid--pairs .gv2-linked-grid__item:nth-child(n+6) { display: none; }
}
@media (max-width: 1599px) {
  .gv2-linked-grid--pairs .gv2-linked-grid__item:nth-child(n+5) { display: none; }
}
@media (max-width: 1279px) {
  .gv2-linked-grid--pairs .gv2-linked-grid__item:nth-child(n+4) { display: none; }
}
@media (max-width: 1023px) {
  .gv2-linked-grid--pairs .gv2-linked-grid__item:nth-child(n+3) { display: none; }
  /* Stacked banner: fixed-width pairs instead of stretching across the row. */
  .gv2-linked-grid.gv2-linked-grid--pairs {
    grid-auto-columns: 140px;
    justify-content: start;
  }
}
@media (max-width: 767px) {
  .gv2-linked-grid--pairs .gv2-linked-grid__item:nth-child(n+2) { display: none; }
}

/* Popular actors / top services: tighter spacing (tns gutter 10px, see section.php)
   and a grey count line under the name ("12 séries/films"). */
.gv2-carousel--people .gv2-carousel__track:not(.tns-slider),
.gv2-carousel--services .gv2-carousel__track:not(.tns-slider) {
  gap: 10px;
}
.gv2-service-badge__meta {
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.3;
  color: var(--gv2-text-dim);
}
@media (max-width: 480px) {
  .gv2-service-badge__meta {
    font-size: 10px;
  }
}

/* Mobile: exactly 3 posters in view in the native scroller (gaps: 10px <= 768,
   5px <= 480 — see .gv2-carousel__track above), capped for landscape phones. */
@media (max-width: 767px) {
  .gv2-carousel--posters .gv2-carousel__track:not(.tns-slider) > .gv2-carousel__slide {
    flex-basis: min(calc((100% - 20px) / 3), 200px);
    width: min(calc((100% - 20px) / 3), 200px);
  }
}
@media (max-width: 480px) {
  .gv2-carousel--posters .gv2-carousel__track:not(.tns-slider) > .gv2-carousel__slide {
    flex-basis: calc((100% - 10px) / 3);
    width: calc((100% - 10px) / 3);
  }
}

/* "Trouvez où regarder" card: never wider than its column (long titles, the Gupy
   pill, many services), tighter on small screens. */
.gv2-banner__card > div {
  flex: 1 1 auto;
  min-width: 0;
}
.gv2-banner__card-head {
  flex-wrap: wrap;
}
.gv2-banner__card-head h4 {
  min-width: 0;
  overflow-wrap: anywhere;
}
.gv2-banner__provider-icons {
  min-width: 0;
}
@media (max-width: 768px) {
  .gv2-banner__card {
    padding: 20px;
  }
  .gv2-banner__provider-icons {
    gap: 10px;
  }
}
@media (max-width: 480px) {
  .gv2-banner__card {
    padding: 15px;
    gap: 15px;
  }
  .gv2-banner__provider {
    width: 48px;
  }
  .gv2-banner__provider img,
  .gv2-banner__provider-more {
    width: 40px;
    height: 40px;
  }
}
/* Under 375px: 2 posters in view — with 3, titles get truncated too much. */
@media (max-width: 374px) {
  .gv2-carousel--posters .gv2-carousel__track:not(.tns-slider) > .gv2-carousel__slide {
    flex-basis: calc((100% - 5px) / 2);
    width: calc((100% - 5px) / 2);
  }
}

/* Titles case (banners, heroes, program title): Gupy Engine > Advanced Options >
   "v2 Titles Case", body class from vrd_redesign_body_class(). Default = uppercase. */
body.gv2-case-words {
  --gv2-title-case: capitalize;
}
body.gv2-case-sentence {
  --gv2-title-case: none;
}

/* "Create your custom lists" banner: a staircase of 4 posters, laid out by
   gupy-v2.js (initTileStacks): each poster's size depends on its distance to the
   active one (pointed last; the first by default) — active = size 1, its
   neighbours = size 2, then 3, 4. The stack is fluid (max 440px) so it never
   covers the text column. */
.gv2-banner--lists .gv2-banner__box {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}
.gv2-banner--lists .gv2-banner__title {
  overflow-wrap: break-word;
}
@media (max-width: 1024px) {
  .gv2-banner--lists .gv2-banner__box {
    grid-template-columns: minmax(0, 1fr);
  }
}
.gv2-tile-stack {
  width: 100%;
  max-width: 440px;
  height: auto;
  aspect-ratio: 44 / 30;
  justify-self: center;
}
.gv2-tile-stack__item {
  transition: left 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), top 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
    width 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.45s ease, box-shadow 0.45s ease;
  cursor: pointer;
}
.gv2-tile-stack__item.is-active {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 2px var(--vrd-primary);
}
@media (prefers-reduced-motion: reduce) {
  .gv2-tile-stack__item {
    transition: none;
  }
}
@media (max-width: 480px) {
  .gv2-tile-stack {
    transform: none;
    margin: 0;
  }
}

/* Hero, tablet & mobile (<= 1024px, one column): the 3x3 services grid became a
   tall box under the text. It is now one compact row (title + scrolling logos)
   and the vertical gaps are tightened so the posters show up sooner. */
@media (max-width: 1024px) {
  .gv2-hero {
    min-height: 0;
    padding-block: 40px 30px;
  }
  .gv2-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }
  .gv2-hero__inner > * {
    min-width: 0;
  }
  .gv2-hero__subtitle {
    margin-bottom: 25px;
  }
  .gv2-hero__services {
    max-width: none;
    width: 100%;
    margin-inline: 0;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    border-radius: 12px;
  }
  .gv2-hero__services h3 {
    flex: 0 0 auto;
    max-width: 110px;
    margin: 0;
    font-size: 16px;
    text-align: left;
  }
  .gv2-hero__services-grid {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .gv2-hero__services-grid::-webkit-scrollbar {
    display: none;
  }
  .gv2-hero__service-link {
    flex: 0 0 56px;
  }
}
@media (max-width: 480px) {
  .gv2-hero {
    padding-block: 30px 40px; /* room for the slider dots */
  }
  .gv2-hero__inner {
    gap: 20px;
  }
  .gv2-hero__subtitle {
    font-size: 15px;
    margin-bottom: 20px;
  }
  .gv2-hero__actions {
    gap: 15px;
  }
  .gv2-hero__services {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px;
  }
  .gv2-hero__services h3 {
    max-width: none;
    font-size: 14px;
  }
  .gv2-hero__service-link {
    flex-basis: 46px;
  }
}

/* Banner titles: the desktop line breaks (one fragment per line) only make sense
   next to the visual. Under 1024px the banner is one column: titles and texts
   flow over the whole width instead of leaving half of it empty. */
.gv2-banner__line {
  display: block;
}
@media (max-width: 1024px) {
  .gv2-banner__line {
    display: inline;
  }
  .gv2-banner__text {
    max-width: none;
  }
}

/* Rankings by platform: bigger platform head (logo + name) and posters. */
.gv2-rank-card__head {
  gap: 12px;
  font-size: 19px;
  font-family: var(--gv2-font-heading);
}
.gv2-rank-card__head img {
  width: 36px;
  height: 36px;
  border-radius: 8px;
}
.gv2-rank-card__row {
  gap: 12px;
  padding-block: 7px;
}
.gv2-rank-card__num {
  width: 20px;
  font-size: 17px;
}
.gv2-rank-card__thumb {
  width: 46px;
  height: 66px;
  border-radius: 6px;
}
.gv2-rank-card__title {
  font-size: 15px;
  -webkit-line-clamp: 2;
  line-height: 1.3;
}
@media (max-width: 480px) {
  .gv2-rank-card__head {
    font-size: 17px;
  }
  .gv2-rank-card__thumb {
    width: 40px;
    height: 58px;
  }
  .gv2-rank-card__title {
    font-size: 14px;
  }
}

/* Text for screen readers only (accessible labels next to icons / numbers). */
.gv2-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Hero, article slide: a single article — its picture framed on the right and,
   blurred, as background (the side card of a second article is gone). */
/* The blurred, scaled picture must stay inside its own slide (it spilled over
   the neighbouring slides of the track). */
.gv2-landing-slide--article .gv2-hero__bg {
  overflow: hidden;
}
.gv2-landing-slide--article .gv2-hero__bg img {
  filter: blur(22px) saturate(1.15);
  transform: scale(1.15);
}
.gv2-landing-slide--article .gv2-landing-slide__eyebrow i {
  margin-right: 4px;
}
.gv2-landing-slide__article-visual {
  display: block;
  justify-self: end;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--gv2-glass-border);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  transform: rotate(1.5deg);
  transition: transform 0.4s ease;
}
.gv2-landing-slide__article-visual:hover {
  transform: rotate(0deg) scale(1.02);
}
.gv2-landing-slide__article-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 1024px) {
  .gv2-landing-slide__article-visual {
    justify-self: stretch;
    max-width: none;
    aspect-ratio: 16 / 7;
    transform: none;
  }
}
@media (max-width: 480px) {
  .gv2-landing-slide__article-visual {
    display: none;
  }
}

/* Each hero slide clips its own content (blurred background, the article
   picture's drop shadow...): nothing may bleed onto the neighbouring slides. */
.gv2-landing-slide {
  overflow: hidden;
}

/* Rankings grid: columns may shrink below their content (1fr = minmax(auto, 1fr)
   pushed the 2nd card off screen at ~500px), one card per row under 600px. */
.gv2-rank-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1024px) {
  .gv2-rank-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .gv2-rank-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.gv2-rank-card {
  min-width: 0;
}

/* Premium panel: a compact pitch. Narrower than the community panel next to it,
   tighter spacing (font sizes unchanged); alone (program page) it stays full width. */
.gv2-split-banner:not(.gv2-split-banner--single) {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}
@media (max-width: 1024px) {
  .gv2-split-banner:not(.gv2-split-banner--single) {
    grid-template-columns: minmax(0, 1fr);
  }
}
.gv2-split-banner__panel--premium {
  padding: 30px;
}
.gv2-split-banner__panel--premium .gv2-banner__list {
  margin-top: 14px;
  gap: 8px;
}
.gv2-split-banner__panel--premium .gv2-banner__cta {
  margin-top: 18px;
}
@media (max-width: 480px) {
  .gv2-split-banner__panel--premium {
    padding: 20px;
  }
}

/* Poster card head: the title gets the whole width on its own line, then
   YEAR ··· SCORE on the line below (more room for the title). */
.gv2-poster-card__head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 3px;
}
.gv2-poster-card__head .gv2-poster-card__title {
  min-width: 0;
}
.gv2-poster-card__meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}
.gv2-poster-card__meta-row .gv2-poster-card__year {
  margin-top: 0;
}

/* Phones: banner buttons with long labels ("Voir les contenus gratuits",
   "Rejoindre la communauté", 270px on one line) overflowed their box, whose
   40px padding left ~275px. Tighter boxes, and the label may wrap. */
@media (max-width: 480px) {
  .gv2-banner__box,
  .gv2-split-banner__panel {
    padding: 20px;
  }
  .gv2-banner__cta {
    max-width: 100%;
    padding-inline: 20px;
    white-space: normal;
    text-align: center;
  }
}

/* "Restez informé" (blog banner), phones: the articles full width, one under
   the other (two side by side were too narrow to read), in a wider ratio. */
@media (max-width: 767px) {
  .gv2-newsletter__articles {
    grid-template-columns: minmax(0, 1fr);
  }
  .gv2-newsletter__article {
    aspect-ratio: 16 / 9;
  }
}
/* Title / excerpt (<p>): a legacy p rule pads them (8px / 7px), which pushed
   a slice of a third line into the 2-line clamp. */
.gv2-newsletter__article .gv2-newsletter__article-title,
.gv2-newsletter__article .gv2-newsletter__article-excerpt {
  padding: 0;
}

/* --------------------------------------------------------------------------
   Loader: three pink dots bouncing in turn (gv2_dots_loader(), and the legacy
   archive "load more" button while it loads — gupy-v2-archive.css).
   -------------------------------------------------------------------------- */
.gv2-dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
}
.gv2-dots > span,
.gv2-archive-more #navigation-ajax.hidden1-loading::before,
.gv2-archive-more #navigation-ajax.hidden1-loading::after,
.gv2-archive-more #navigation-ajax.hidden1-loading .load-spinner {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--vrd-primary);
  animation: gv2-dot-bounce 0.9s ease-in-out infinite;
}
.gv2-dots > span:nth-child(2),
.gv2-archive-more #navigation-ajax.hidden1-loading .load-spinner {
  animation-delay: 0.15s;
}
.gv2-dots > span:nth-child(3),
.gv2-archive-more #navigation-ajax.hidden1-loading::after {
  animation-delay: 0.3s;
}
@keyframes gv2-dot-bounce {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.55;
  }
  30% {
    transform: translateY(-10px);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gv2-dots > span,
  .gv2-archive-more #navigation-ajax.hidden1-loading::before,
  .gv2-archive-more #navigation-ajax.hidden1-loading::after,
  .gv2-archive-more #navigation-ajax.hidden1-loading .load-spinner {
    animation-duration: 2.4s;
  }
}

/* ------------------------------------------------------------------
 * Tooltip — [data-gv2-tip] / [data-gv2-tip-title] (bubble built by gupy-v2.js).
 * Inverted colours (text colour as background) so it stands out in both themes.
 * ---------------------------------------------------------------- */
.gv2-tip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100000;
  max-width: 240px;
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--gv2-text);
  color: var(--gv2-bg);
  box-shadow: var(--gv2-shadow);
  font-size: 12px;
  line-height: 1.35;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.gv2-tip.is-below {
  transform: translateY(-4px);
}
.gv2-tip.is-on {
  opacity: 1;
  transform: none;
}
.gv2-tip strong {
  display: block;
  font-weight: 700;
}
.gv2-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: var(--gv2-tip-arrow, 50%);
  margin-left: -5px;
  border: 5px solid transparent;
  border-top-color: var(--gv2-text);
}
.gv2-tip.is-below::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--gv2-text);
}
@media (prefers-reduced-motion: reduce) {
  .gv2-tip {
    transition: none;
  }
}

/* "How is it calculated?" (i) button: its explanation is a [data-gv2-tip] tooltip. */
.gv2-info {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-left: 8px;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: none;
  color: var(--gv2-text-dim);
  font-size: 9px;
  line-height: 1;
  vertical-align: middle;
  cursor: help;
  transition: color 0.15s;
}
.gv2-info:hover,
.gv2-info:focus-visible {
  color: var(--gv2-text);
}
.gv2-info:focus-visible {
  outline: 2px solid var(--vrd-primary);
  outline-offset: 2px;
}