/*
 * video-gallery-7.css - /video-page browse rebuild (2026-09-04, docs/plans/video-browse-plan-2026-09-04.md).
 * Part 1 (B1b): design tokens + the portrait card (.vb-card) + the grid tracks. Follows the SITE theme only:
 * light by default, dark via html[data-theme="dark"] and the --esc-dk-* tokens from css/dark.css. No page-local
 * dark mode. Every selector is prefixed vb- so neither video-gallery-6.css nor the dark.css video rules can match.
 */

body.video-gallery-page {
    /* one content width for the bar, the title row and the grid = the site header's inner box
       (.escortify-discovery-header__inner: max-width 1200px, padding 0 24px), so every edge lines up with the logo */
    --vb-box: 1200px;
    --vb-gutter: 24px;
    --vb-page: #ffffff;
    --vb-card: #f5f5f7;
    --vb-pill: #f0f0f2;
    --vb-line: rgba(15, 15, 15, 0.08);
    --vb-line-strong: rgba(15, 15, 15, 0.16);
    --vb-text: #0f0f0f;
    --vb-text-2: #45454f;   /* the advertiser name under a card title (fonts pass 2026-09-06): between text and muted */
    --vb-muted: #6b6b76;
    --vb-inv: #0f0f0f;
    --vb-inv-ink: #ffffff;
    --vb-brand: #ff3366;
    --vb-ok: #16a34a;
    --vb-verified: #7186ff;
    /* the filter bar's idiom (owner 2026-09-10, after Airbnb): thin grey borders, a dark border on hover, the ACTIVE control = a thin dark
       outline only (no fill, no bold), the search pill's soft shadow */
    --vb-ab-line: #dddddd;
    --vb-ab-line-hover: #222222;
    --vb-ab-ring: #222222;
    --vb-ab-fill: #f7f7f7;
    --vb-ab-text: #222222;
    --vb-ab-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);   /* the category page bar's pill shadow (owner 2026-09-10: one experience) */
    --vb-ab-shadow-hover: 0 8px 20px rgba(15, 23, 42, 0.10);
    --vb-ab-bg: var(--vb-page);   /* the pill fill: white in light; the category bar's #202020 inner tone in dark (owner 2026-09-10) */
    --vb-ab-bg-hover: var(--vb-page);
}

html[data-theme="dark"] body.video-gallery-page {
    --vb-page: var(--esc-dk-page, #0f0f0f);
    --vb-card: var(--esc-dk-card, #1c1c1c);
    --vb-pill: var(--esc-dk-pill, #252525);
    --vb-line: var(--esc-dk-line, rgba(255, 255, 255, 0.08));
    --vb-line-strong: var(--esc-dk-line-strong, rgba(255, 255, 255, 0.12));
    --vb-text: var(--esc-dk-text, #f2f2f4);
    --vb-text-2: #c3c6cf;
    --vb-muted: var(--esc-dk-muted, #8b93a1);
    --vb-inv: #ffffff;
    --vb-inv-ink: #0f0f0f;
    --vb-ok: #22c55e;
    --vb-ab-line: var(--esc-dk-line-strong, rgba(255, 255, 255, 0.12));   /* the category bar's dark border (was .22 over a page-black fill) */
    --vb-ab-line-hover: rgba(255, 255, 255, 0.22);
    --vb-ab-ring: #ffffff;
    --vb-ab-fill: rgba(255, 255, 255, 0.10);
    --vb-ab-text: var(--vb-text);
    --vb-ab-shadow: 0 6px 18px rgba(0, 0, 0, 0.30);   /* the category bar's dark value */
    --vb-ab-shadow-hover: 0 8px 20px rgba(0, 0, 0, 0.40);
    --vb-ab-bg: var(--esc-dk-inner, #202020);   /* the category bar's dark pill fill; the video pills sat on the page's #0f0f0f before */
    --vb-ab-bg-hover: var(--esc-dk-pill, #252525);
}

/* ---------- grid tracks (2 on phones, 4 on desktop inside the 1152px content width) ---------- */
body.video-gallery-page .video-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 8px;
    padding: 0;
    margin: 0;
}

@media (min-width: 769px) {
    body.video-gallery-page .video-gallery-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 26px 16px;
    }
}

/* ---------- card ---------- */
.vb-card {
    min-width: 0;
    position: relative;
}

.vb-media {
    display: block;
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: 12px;
    overflow: hidden;
    background: var(--vb-card);
    color: #ffffff;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.vb-media::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 42%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
    pointer-events: none;
}

.vb-poster,
.vb-preview-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
    display: block;
}

.vb-poster {
    transition: transform 0.35s ease;
}

.vb-preview-video {
    background: #000;
}

.vb-badges {
    position: absolute;
    left: 8px;
    top: 8px;
    display: flex;
    gap: 5px;
    z-index: 2;
}

.vb-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.2;
    padding: 3px 7px;
    border-radius: 6px;
    color: #ffffff;
}

.vb-badge--new {
    background: var(--vb-brand);
}

.vb-badge--stack {
    background: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    font-weight: 500;
    letter-spacing: 0;
}

/* "Seen" (featured v1.1 B4, 2026-09-11): the device remembers what the viewer watched (js/video-browse-1.js window.vidSeen); the
   badge is added by JS, the card keeps its place - the stack badge's quiet glass look, a shade dimmer */
.vb-badge--seen {
    background: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    font-weight: 500;
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.82);
}

.vb-badge svg {
    display: block;
}

.vb-views {
    position: absolute;
    left: 8px;
    bottom: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.vb-views svg {
    display: block;
}

.vb-dur {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 2;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    padding: 2px 6px;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.6);
    font-variant-numeric: tabular-nums;
    transition: opacity 0.2s;
}

/* hover-preview chrome: hidden until the card previews */
.vb-prev {
    position: absolute;
    inset: 0;
    z-index: 3;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
}

.vb-prev-mute {
    position: absolute;
    right: 8px;
    top: 8px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    display: grid;
    place-items: center;
}

.vb-prev-mute svg {
    display: block;
}

.vb-prev-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.3);
}

.vb-prev-bar i {
    display: block;
    height: 100%;
    width: 0;
    background: #ffffff;
}

.vb-card.is-previewing .vb-prev {
    opacity: 1;
}

.vb-card.is-previewing .vb-dur {
    opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
    .vb-media:hover .vb-poster {
        transform: scale(1.04);
    }
}

.vb-media:focus-visible {
    outline: 2px solid var(--vb-brand);
    outline-offset: 2px;
}

/* ---------- meta row ---------- */
.vb-meta {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    padding: 8px 2px 0;
}

.vb-ava {
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--vb-pill);
}

.vb-ava img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 20%;
}

.vb-ava-fb {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--vb-text);
}

.vb-text {
    min-width: 0;
}

.vb-name {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.25;
    color: var(--vb-text);
    text-decoration: none;
}

.vb-name:hover {
    text-decoration: underline;
}

.vb-name:focus-visible {
    outline: 2px solid var(--vb-brand);
    outline-offset: 2px;
    border-radius: 4px;
}

.vb-name > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vb-verified {
    flex: none;
    width: 14px;
    height: 14px;
    display: inline-grid;
    place-items: center;
}

.vb-verified svg {
    display: block;
    width: 14px;
    height: 14px;
}

.vb-sub {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.3;
    color: var(--vb-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* .vb-avail (the card's green "Available now") was removed 2026-09-07 on the owner's call - it did not fit the card's line */

@media (min-width: 769px) {
    .vb-media {
        border-radius: 14px;
    }

    .vb-meta {
        grid-template-columns: 34px minmax(0, 1fr);
        padding-top: 10px;
    }

    .vb-ava {
        width: 34px;
        height: 34px;
    }

    .vb-name {
        font-size: 14.5px;
    }

    .vb-sub {
        font-size: 12.5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vb-poster,
    .vb-prev,
    .vb-dur {
        transition: none;
    }

    .vb-media:hover .vb-poster {
        transform: none;
    }
}

/* =====================================================================
 * Part 2 (B3): page chrome - mobile top (search pill + Filters), sticky chips row, desktop bar, title row with
 * dropdowns, stories rail, Load more, pagination, filter sheet, empty state. Sticky tops use the header's own
 * variable (--escortify-discovery-header-current-offset), which the theme drops to 0 while the phone header hides.
 * ===================================================================== */

body.video-gallery-page .vb-wrap {
    color: var(--vb-text);
}

/* ---------- shared controls ---------- */
.vb-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
    height: 40px;   /* Airbnb's pill (owner 2026-09-10); the phone chips row keeps 36px below */
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid var(--vb-ab-line);
    background: var(--vb-ab-bg);
    box-shadow: var(--vb-ab-shadow);   /* the category page bar's soft pill shadow (owner 2026-09-10: one experience on both bars) */
    color: var(--vb-ab-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    flex: none;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.vb-chip svg {
    display: block;
    width: 14px;
    height: 14px;
}

.vb-chip .vb-chev {
    width: 11px;
    height: 11px;
}

/* the active control (owner 2026-09-10): the thin dark outline alone - 1px border + 1px inset ring = Airbnb's 2px - no fill, no bold */
.vb-chip.is-on,
.vb-chip[aria-pressed="true"],
.vb-chip--loc.is-on {
    background: var(--vb-ab-bg);
    color: var(--vb-ab-text);
    border-color: var(--vb-ab-ring);
    box-shadow: inset 0 0 0 1px var(--vb-ab-ring), var(--vb-ab-shadow);   /* the ring AND the pill shadow */
}

.vb-chip:hover,
.vb-dd[open] > summary.vb-chip {
    text-decoration: none;
    border-color: var(--vb-ab-line-hover);
    background: var(--vb-ab-bg-hover);
    box-shadow: var(--vb-ab-shadow-hover);
}

.vb-chip.is-on:hover,
.vb-chip[aria-pressed="true"]:hover,
.vb-chip--loc.is-on:hover {
    border-color: var(--vb-ab-ring);
    background: var(--vb-ab-bg);   /* the active pill keeps its resting fill */
    box-shadow: inset 0 0 0 1px var(--vb-ab-ring), var(--vb-ab-shadow-hover);   /* the active pill keeps its ring while hovered */
}

.vb-chip:focus-visible,
.vb-seg-btn:focus-visible,
.vb-filters:focus-visible,
.vb-more-btn:focus-visible,
.vb-sheet-x:focus-visible,
.vb-sheet-go:focus-visible {
    outline: 2px solid var(--vb-brand);
    outline-offset: 2px;
}

.vb-seg {
    display: inline-flex;
    align-items: stretch;
    box-sizing: border-box;
    height: 40px;
    padding: 3px;   /* a padded pill group (owner 2026-09-10): the active item is a pill inside it, no inverted block, no separators */
    gap: 2px;
    border: 1px solid var(--vb-ab-line);
    border-radius: 999px;
    background: var(--vb-ab-bg);
    box-shadow: var(--vb-ab-shadow);
    overflow: hidden;
    flex: none;
}

.vb-seg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    color: var(--vb-ab-text);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    position: relative;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.vb-seg-btn:hover {
    background: var(--vb-ab-fill);
}

.vb-seg-btn.is-on,
.vb-seg-btn:has(input:checked) {
    background: var(--vb-ab-bg);   /* the ring alone marks the active item; the fill is the group's (dark: #202020, not the page's #0f0f0f) */
    color: var(--vb-ab-text);
    box-shadow: inset 0 0 0 2px var(--vb-ab-ring);   /* the same thin dark outline (2px reads inside the padded group) */
}

.vb-seg-btn input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* ---------- mobile top: search pill + Filters button ---------- */
.vb-mtop {
    padding: 10px 12px 10px;   /* room for the search pill's shadow above the sticky chips row (it was 2px: the row covered the shadow) */
    display: flex;
    gap: 10px;
    align-items: center;
}

.vb-pill {
    flex: 1;
    min-width: 0;
    height: 52px;
    margin: 0;
    border-radius: 999px;
    border: 1px solid var(--vb-ab-line);
    background: var(--vb-ab-bg);
    box-shadow: var(--vb-ab-shadow);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 8px 0 18px;
}

.vb-pill > svg {   /* the magnifier in a brand circle at the right (owner 2026-09-10, after Airbnb's search pill) */
    order: 2;
    display: block;
    width: 36px;
    height: 36px;
    padding: 9px;
    box-sizing: border-box;
    border-radius: 50%;
    background: var(--vb-brand);
    color: #ffffff;
    flex: none;
}

.vb-pill-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    line-height: 1.2;
}

.vb-pill-input {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--vb-text);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.vb-pill-input::placeholder {
    color: var(--vb-text);
    opacity: 1;
}

.vb-pill-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.vb-pill-sub {
    font-size: 12px;
    color: var(--vb-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vb-filters {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--vb-ab-line);
    box-shadow: var(--vb-ab-shadow);   /* the category bar's Filters button carries the pill shadow too (one experience, 2026-09-10) */
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
    background: var(--vb-ab-bg);
    color: var(--vb-text);
    display: grid;
    place-items: center;
    position: relative;
    flex: none;
    padding: 0;
    cursor: pointer;
}

.vb-filters:hover {
    border-color: var(--vb-ab-line-hover);
    background: var(--vb-ab-bg-hover);
    box-shadow: var(--vb-ab-shadow-hover);
}

.vb-filters svg {
    display: block;
    width: 18px;
    height: 18px;
}

.vb-filters-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--vb-inv);   /* the count badge in ink, like Airbnb's (owner 2026-09-10) */
    color: var(--vb-inv-ink);
    font-size: 11px;
    font-weight: 700;
    font-style: normal;
    line-height: 18px;
    text-align: center;
}

/* ---------- sticky chips row (phones) ---------- */
.vb-chips {
    position: sticky;
    top: var(--escortify-discovery-header-current-offset, 0px);
    z-index: 20;
    display: flex;
    gap: 8px;
    align-items: center;
    overflow-x: auto;
    padding: 10px 12px;
    background: var(--vb-page);
    border-bottom: 1px solid var(--vb-line);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.vb-chips .vb-chip,
.vb-chips .vb-seg {
    box-sizing: border-box;
    height: 36px;   /* the sticky row's height is part of the bottom-bar / rail math: the phone pills stay 36px */
}

.vb-chips .vb-seg { padding: 2px; }
.vb-chips .vb-chip { padding: 0 14px; font-size: 13px; }
.vb-chips .vb-seg-btn { padding: 0 12px; font-size: 13px; }

.vb-chips::-webkit-scrollbar {
    display: none;
}

/* ---------- Saved | Liked tabs (owner 2026-09-06, "You asemel Saved"): the saved / liked views' switcher ----------
   Phones: the sticky row's recipe (the fixed views have no chips row). From 769px: the desktop bar's box alignment, not sticky.
   From 1410px the rail carries Saved / Liked, the tabs hide. */
.vb-tabs {
    position: sticky;
    top: var(--escortify-discovery-header-current-offset, 0px);
    z-index: 20;
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: var(--vb-page);
    border-bottom: 1px solid var(--vb-line);
}

.vb-seg--tabs .vb-seg-btn {
    flex: 1;
    min-width: 96px;
}

@media (min-width: 769px) {
    .vb-tabs {
        position: static;
        box-sizing: border-box;
        width: 100%;
        max-width: var(--vb-box);
        margin: 0 auto;
        padding: 18px var(--vb-gutter) 0;
        border-bottom: 0;
    }
}

@media (min-width: 1410px) {
    .vb-tabs {
        display: none;
    }
}

/* ---------- desktop bar + title row ---------- */
.vb-bar {
    display: none;
}

/* Constant frame (owner 2026-09-08): the same bar on every view; on a member's Saved / Liked phone page the chips row is the one sticky
   row and the Saved | Liked tabs scroll with the page (both were sticky at the same top). The greyed-Sort rules left with the Stories
   view's live Sort (2026-09-08). */
.vb-chips + .vb-tabs { position: static; }

/* the title row shows on phones too since 2026-09-06 (owner: "YouTube küll näitab"); since 2026-09-07 it holds the title card
   (.vb-title-card, rules at the end of the file) - the row keeps the page's spacing, the card the look */
.vb-title {
    display: block;
    padding: 25px 0 25px;   /* owner 2026-09-07 (his phone paste): 25 above and below the card (was 4 / 20) */
}

.vb-title h1.video-page-title + .vb-title-sub {
    display: block;
    margin-top: 2px;
}

.vb-search {
    display: flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    height: 42px;   /* the bar's tallest item: 15 + 42 + 15 + the 1px line = 73px (the rail's sticky constant) */
    min-width: 160px; /* lets the whole bar stay on one row down to ~1000px; below that the bar wraps */
    max-width: 460px;
    flex: 1;
    margin: 0;
    padding: 0 5px 0 18px;
    border: 1px solid var(--vb-ab-line);
    border-radius: 999px;
    background: var(--vb-ab-bg);
    color: var(--vb-muted);
    box-shadow: var(--vb-ab-shadow);
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.vb-search:hover,
.vb-search:focus-within {
    border-color: var(--vb-ab-line-hover);
    background: var(--vb-ab-bg-hover);
    box-shadow: var(--vb-ab-shadow-hover);
}

.vb-search svg {   /* the magnifier in a brand circle at the right (after Airbnb's search pill) */
    order: 2;
    display: block;
    width: 32px;
    height: 32px;
    padding: 8px;
    box-sizing: border-box;
    border-radius: 50%;
    background: var(--vb-brand);
    color: #ffffff;
    flex: none;
}

.vb-search input {
    order: 1;
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--vb-ab-text);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    outline: none;
}

.vb-search input::placeholder {
    color: var(--vb-muted);
    opacity: 1;
}

.vb-dd {
    position: relative;
    flex: none;
}

.vb-dd > summary {
    list-style: none;
}

.vb-dd > summary::-webkit-details-marker {
    display: none;
}

.vb-dd-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 30;
    min-width: 180px;
    padding: 6px;
    border-radius: 12px;
    border: 1px solid var(--vb-ab-line);
    background: var(--vb-page);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);   /* Airbnb's soft card */
}

.vb-dd-menu a {
    display: block;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 14px;
    color: var(--vb-text);
    text-decoration: none;
    white-space: nowrap;
}

.vb-dd-menu a:hover {
    background: var(--vb-ab-fill);
    text-decoration: none;
}

.vb-dd-menu a.is-on {
    font-weight: 700;
}

/* ---------- title row (desktop) ---------- */
.vb-title h1.video-page-title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--vb-text);
}

.vb-title-sub {
    font-size: 14px;
    color: var(--vb-muted);
}

/* ---------- stories rail (grid child) ---------- */
.vb-stories {
    grid-column: 1 / -1;
    min-width: 0;
}

/* owner 2026-09-07 ("viisakad õhuvahed"): the rail is a <section> and inherited a 30px top padding from the theme; with the grid's row
   gap that put the "Stories" heading 46px (phone) / 56px (desktop) under the first row. Now 16px on top of the 16px row gap on phones
   (32) and 12px on top of the 26px gap on desktop (38); the specificity beats a body-scoped section rule. */
body.video-gallery-page .vb-stories {
    padding: 16px 0 0;
}

.vb-stories-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0 12px;
    font-size: 22px;   /* owner 2026-09-07: the home page's "Recent stories" title size on phones (22.4px there; 17px and 13px before) */
    font-weight: 500;
    line-height: 1.2;
    color: var(--vb-text);
}

.vb-story-row {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding: 2px 0 6px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.vb-story-row::-webkit-scrollbar {
    display: none;
}

.vb-story {
    flex: none;
    width: 72px;   /* owner 2026-09-07: the home page's Recent stories strip - 72px circles, full names (was 64 / first name) */
    text-align: center;
    font-size: 12px;
    color: var(--vb-text);
    text-decoration: none;
}

.vb-story:hover {
    text-decoration: none;
}

.vb-story-ring {
    display: block;
    position: relative;
    box-sizing: border-box;   /* 72px OUTER like the home strip's circle (the 3px padding inside it; was content-box, 62 + 6) */
    width: 72px;
    height: 72px;
    margin: 0 auto 5px;
    padding: 3px;
    border-radius: 50%;
    background: none;
}

/* owner 2026-09-07 ("profiilivaates see käib ju ringi ja on gradientiga"): the profile page's ring - the story plugin's
   .str-circle:after in css/profile12.css: an Instagram conic gradient that spins - drawn here on a pseudo-element so the photo
   never turns; it spins like the profile's (owner: "aga see ei käi ringi sul?" - the first cut spun fresh ones only); a quiet ring
   (the story past its 24 h) is flat grey and still */
.vb-story-ring::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888, #f09433);
    z-index: 0;
}

.vb-story:not(.is-quiet) .vb-story-ring::before {
    animation: vb-ring-spin 3s linear infinite;
}

@keyframes vb-ring-spin {
    to { transform: rotate(360deg); }
}

.vb-story-ring img,
.vb-story-fb {
    display: block;
    position: relative;
    z-index: 1;
    box-sizing: border-box;   /* owner 2026-09-07: the 2px border was ADDED to the 100% box (content-box), so the image overflowed the ring's padding 4px right / down and the ring read as a crescent; the profile page's avatar ring has border-box */
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid var(--vb-page);
    object-fit: cover;
    object-position: 50% 20%;
    background: var(--vb-pill);
}

.vb-story-fb {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
}

.vb-story-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 500;   /* the home strip's name weight (Circular Medium there; Söhne kräftig here, the site pair) */
    line-height: 14px;
    margin-top: 1px;
}

.vb-story:focus-visible .vb-story-ring {
    outline: 2px solid var(--vb-brand);
    outline-offset: 2px;
}

/* stories rule 2026-09-06 (the category strip's 60-day window): a circle whose newest story has passed its own 24 h stays in the
   rail with a muted ring; fresh (< story_new_hours) and unexpired ones keep the brand ring */
.vb-story.is-quiet .vb-story-ring::before {
    background: var(--vb-line-strong);
}

/* ---------- load more (phones) + pagination (desktop) ---------- */
.vb-more {
    padding: 6px 12px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.vb-more[hidden] {
    display: none;
}

.vb-more-btn {
    height: 44px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    background: var(--vb-inv);
    color: var(--vb-inv-ink);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.vb-more-btn[disabled] {
    opacity: 0.6;
    cursor: default;
}

.vb-more-pg {
    font-size: 12px;
    color: var(--vb-muted);
}

body.video-gallery-page .video-pagination {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 10px 0 40px;
    font-size: 14px;
}
/* Stories catalog (2026-09-10): its numbered pages show on every screen - the Videos view keeps Load more on phones */
body.video-gallery-page .video-pagination--stories {
    display: flex;
    flex-wrap: wrap;
}
body.video-gallery-page .video-pagination--stories .video-pagination-numbers {
    flex-wrap: wrap;   /* the number row itself (9+ pages on a phone) - Codex B2 */
    justify-content: center;
}

body.video-gallery-page .video-pagination-numbers {
    display: flex;
    gap: 6px;
    align-items: center;
}

body.video-gallery-page .video-pagination-numbers a,
body.video-gallery-page .video-pagination-btn {
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 999px;
    color: var(--vb-text);
    text-decoration: none;
    font-weight: 500;
}

body.video-gallery-page .video-pagination-btn {
    border: 1px solid var(--vb-line-strong);
}

body.video-gallery-page .video-pagination-numbers a.active {
    background: var(--vb-inv);
    color: var(--vb-inv-ink);
}

body.video-gallery-page .video-pagination-ellipsis {
    color: var(--vb-muted);
    padding: 0 4px;
}

/* ---------- filter sheet (phones) ---------- */
.vb-sheet {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: block;
}

.vb-sheet[hidden] {
    display: none;
}

.vb-sheet-scrim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}

.vb-sheet-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 56px;
    margin: 0;
    display: flex;
    flex-direction: column;
    background: var(--vb-page);
    color: var(--vb-text);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.4);
}

.vb-sheet-hd {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    height: 56px;
    border-bottom: 1px solid var(--vb-line);
    flex: none;
}

.vb-sheet-hd h2 {
    margin: 0;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    color: var(--vb-text); /* the theme's global h2/h3 rules set a fixed colour; the sheet follows the tokens */
    font-family: inherit;
}

.vb-sheet-x {
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: var(--vb-text);
    display: grid;
    place-items: center;
    cursor: pointer;
    padding: 0;
}

.vb-sheet-x svg {
    display: block;
    width: 16px;
    height: 16px;
}

.vb-sheet-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 4px 16px 12px;
    -webkit-overflow-scrolling: touch;
}

.vb-sheet-sec {
    padding: 14px 0;
    border-bottom: 1px solid var(--vb-line);
}

.vb-sheet-sec h3 {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--vb-text);
    font-family: inherit;
}

.vb-sheet-sec .vb-seg {
    display: flex;
    width: 100%;
    height: 40px;
    box-shadow: none;   /* the sheet stays flat, the segment too */
}

.vb-sheet-sec .vb-seg-btn {
    flex: 1;
    font-size: 14px;
}

.vb-sheet-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.vb-sheet-chips .vb-chip input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.vb-sheet-chips .vb-chip {
    position: relative;
    box-shadow: none;   /* the sheet's toggle chips stay flat (the category page's filter dialog chips carry no shadow either) */
}

.vb-sheet-chips .vb-chip:has(input:checked) {
    background: var(--vb-ab-bg);   /* the same fill as its unchecked neighbours (dark: #202020), the ring marks it */
    color: var(--vb-ab-text);
    border-color: var(--vb-ab-ring);
    box-shadow: inset 0 0 0 1px var(--vb-ab-ring);
}

.vb-sheet-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    cursor: pointer;
}

.vb-sheet-row b {
    display: block;
    font-size: 14px;
    font-weight: 500;
}

.vb-sheet-row small {
    display: block;
    font-size: 12px;
    color: var(--vb-muted);
}

.vb-sheet-row input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.vb-sw {
    position: relative;
    flex: none;
    width: 44px;
    height: 26px;
    border-radius: 999px;
    background: var(--vb-line-strong);
    transition: background 0.2s;
}

.vb-sw::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: left 0.2s;
}

.vb-sheet-row:has(input:checked) .vb-sw {
    background: var(--vb-brand);
}

.vb-sheet-row:has(input:checked) .vb-sw::after {
    left: 21px;
}

.vb-sheet-row:has(input:focus-visible) .vb-sw {
    outline: 2px solid var(--vb-brand);
    outline-offset: 2px;
}

.vb-sheet-ft {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--vb-line);
    flex: none;
}

.vb-sheet-clear {
    font-weight: 500;
    color: var(--vb-text);
    text-decoration: underline;
    white-space: nowrap;
}

.vb-sheet-go {
    height: 46px;
    padding: 0 22px;
    border: 0;
    border-radius: 12px;
    background: var(--vb-inv);
    color: var(--vb-inv-ink);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

/* ---------- location chip + sheet (location chip plan, owner 2026-09-06) ---------- */
/* The chip is a <button> in the phone sticky row: the theme's phone `button { width: 100% }` rule would stretch it (the Follow-pill
   lesson), so width / flex are explicit; otherwise it borrows the chips' look. */
.vb-chip--loc {
    width: auto;
    flex: none;
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    font-family: inherit;   /* a button's UA font only; the chip's own size / weight / line-height stay (Codex 2026-09-10) */
    cursor: pointer;
    gap: 6px;
}

.vb-chip--loc svg {
    flex: none;
}

.vb-chip--loc .vb-chev {
    width: 12px;
    height: 12px;
    transition: transform 0.2s ease;
}

.vb-chip--loc[aria-expanded="true"] .vb-chev {
    transform: rotate(180deg);
}

/* the phone Sort chip (owner 2026-09-10, "mobiilis tahaks sortimist näha kohe alguses, vb esimese valikuna"): the chips row's first item,
   a button styled as the Location chip; it opens the sort sheet (#vb-sort, the location sheet's twin). The desktop has its dropdown. */
.vb-chip--sort {
    width: auto;
    flex: none;
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    font-family: inherit;
    cursor: pointer;
    gap: 6px;
}

.vb-chip--sort .vb-chev {
    width: 12px;
    height: 12px;
    transition: transform 0.2s ease;
}

.vb-chip--sort[aria-expanded="true"] .vb-chev {
    transform: rotate(180deg);
}

@media (min-width: 769px) {
    .vb-chip--sort { display: none; }
}

/* the location sheet hugs its 9 rows instead of the filter sheet's full height */
.vb-sheet-panel--fit {
    top: auto;
    max-height: 80vh;
}

.vb-sheet-list {
    display: block;
    padding: 8px 0 12px;
}

.vb-sheet-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 15px;
    line-height: 1.2;
    color: var(--vb-text);
    text-decoration: none;
}

.vb-sheet-list a:hover,
.vb-sheet-list a:focus-visible {
    background: var(--vb-pill);
    text-decoration: none;
}

.vb-sheet-list a .vb-check {
    display: none;
    width: 18px;
    height: 18px;
    flex: none;
}

.vb-sheet-list a.is-on {
    font-weight: 500;
    background: var(--vb-pill);
}

.vb-sheet-list a.is-on .vb-check {
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    .vb-chip--loc .vb-chev,
    .vb-chip--sort .vb-chev { transition: none; }
    .vb-story:not(.is-quiet) .vb-story-ring::before { animation: none; }   /* the tile ring's reduced-motion rule sits after its spin rule further down (cascade order, Codex) */
}

body.vb-sheet-open {
    overflow: hidden;
}

/* ---------- empty state ---------- */
body.video-gallery-page .video-empty-state {
    padding: 48px 16px;
    text-align: center;
    color: var(--vb-text);
}

body.video-gallery-page .video-empty-state h3 {
    margin: 0 0 6px;
    font-size: 20px;
}

body.video-gallery-page .video-empty-state p {
    margin: 0 0 16px;
    color: var(--vb-muted);
}

body.video-gallery-page .video-empty-btn {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 22px;
    border-radius: 999px;
    background: var(--vb-inv);
    color: var(--vb-inv-ink);
    text-decoration: none;
    font-weight: 500;
}

/* ---------- header category sub-nav (site-wide strip under the header) stays hidden on this page, as before ---------- */
body.video-gallery-page .escortify-discovery-subnav,
body.video-gallery-page .bg_city {
    display: none !important;
}

/* the fixed header's spacer is sized from the stack height (shell + sub-nav); with the sub-nav hidden the sub-nav
   share is dead space (the "empty black band" of the old page), so this page zeroes it - the shell stays 74px */
body.video-gallery-page.escortify-global-discovery {
    --escortify-discovery-subnav-height: 0px;
}

/* the theme's desktop spacer is stack + 24px (a gap under the sub-nav); with no sub-nav here that was a 24px black
   strip under the 74px shell - the spacer is exactly the shell so the sticky bar starts where the header ends */
@media (min-width: 769px) {
    body.video-gallery-page.escortify-global-discovery .escortify-global-discovery-spacer {
        height: var(--escortify-discovery-header-shell-height, 74px);
    }
}

/* short pages (few videos, tall window): the footer sits at the bottom instead of a white band under it.
   body's in-flow children are the spacer, #page (bar + grid) and the footer; the header, menus and sheets are fixed */
body.video-gallery-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

@supports (min-height: 100dvh) {
    body.video-gallery-page {
        min-height: 100dvh;
    }
}

body.video-gallery-page #page {
    flex: 1 0 auto;
}

/* ---------- layout containers ---------- */
body.video-gallery-page .video-gallery-container {
    max-width: none;
    margin: 0;
    padding: 0 12px 24px;
}

/* ---------- desktop ---------- */
@media (min-width: 769px) {
    .vb-mtop,
    .vb-chips,
    .vb-more,
    .vb-sheet {
        display: none;
    }

    .vb-bar {
        position: sticky;
        top: var(--escortify-discovery-header-current-offset, 0px);
        z-index: 20;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        /* same left/right edge as the header's inner box and the grid below; 15px above and below (owner 2026-09-10) = a 73px bar
           (15 + the 42px search pill + 15 + the 1px line), the rail's sticky constant below */
        padding: 15px max(var(--vb-gutter), calc(50% - var(--vb-box) / 2 + var(--vb-gutter)));
        background: var(--vb-page);
        border-bottom: 1px solid var(--vb-line);
    }

    .vb-title {
        display: block;   /* the card inside lays out the h1 + line + icon (2026-09-07; was a flex row of h1 + subline) */
        padding: 30px 0 30px;   /* owner 2026-09-07 (his paste): 30 above and below the title card (was 26 / 20) */
    }

    /* the sort is the bar's FIRST control since 2026-09-10 (owner: one experience with the category page bar - Sort, search, pills);
       B1's margin-left: auto (the sort flush right) and the right-aligned menu are gone: the menu opens under its pill's left edge */

    .vb-title h1.video-page-title {
        /* one line, so the title row height is a constant the rail can align to (B2) */
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .vb-title-sub {
        flex: none;
    }

    /* owner 2026-09-07 ("desktopis kas stories ei peaks olema pärast esimest rida videosid"): the rail follows the FIRST ROW of cards
       on desktop too (it was order: -1 = first). The rail is the grid's third child (after two cards, the phone's first row); the first
       four cards - children 1, 2, 4, 5 - go first, the rail keeps order 0 and sorts before card 5 by DOM order. Without a rail the
       same rule is a no-op (the first five cards, then the rest, DOM order). */
    .vb-stories {
        order: 0;
    }

    body.video-gallery-page .vb-stories {
        padding: 12px 0 0;
    }

    body.video-gallery-page .video-gallery-grid > .vb-card:nth-child(-n+5) {
        order: -1;
    }

    .vb-stories-hd {
        padding: 0 0 12px;
        font-size: 24px;   /* the home strip's desktop title (25.6px there; was 14px) */
    }

    .vb-story-row {
        gap: 18px;
    }

    .vb-story {
        width: 72px;
    }

    .vb-story-ring {
        width: 72px;
        height: 72px;
    }

    body.video-gallery-page .video-pagination {
        display: flex;
    }

    body.video-gallery-page .video-gallery-container {
        box-sizing: border-box;
        max-width: var(--vb-box);
        margin: 0 auto;
        padding: 0 var(--vb-gutter) 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vb-sw,
    .vb-sw::after {
        transition: none;
    }
}

/* ---------- desktop rail (rail plan B2, 2026-09-06) ----------
   Destinations menu in the left margin next to the 1200px box. Anchored to the container (its origin is the title row's
   top), sticky BELOW the sticky filter bar (offset + 73px bar since the 15px padding of 2026-09-10), so it never overlaps the bar or its border. Widths by
   media query: from 1410px a 72px icon rail (top group only, no toggle), from 1730px the 240px labelled rail unless the
   visitor collapsed it (html[data-vb-rail="collapsed"], remembered in localStorage and applied before first paint by an
   inline head script in page-video.php). Alignment constants: title row = 26 + 29 + 20 = 75px (the bottom padding is 20px
   since 2026-09-07, the owner's air under the title; it was 6 = 61px), so the first item starts at 75px (= the grid's top edge)
   and the 36px toggle sits at 22px (centred on the h1 line). */
.vb-rail {
    display: none;
}

@media (min-width: 1410px) {
    body.video-gallery-page .video-gallery-container {
        position: relative;
    }

    .vb-rail {
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        right: calc(100% + 24px);
        width: var(--vb-rail-w, 72px);
        z-index: 5;
    }

    .vb-rail-in {
        position: sticky;
        top: calc(var(--escortify-discovery-header-current-offset, 74px) + 73px);
        max-height: calc(100vh - var(--escortify-discovery-header-current-offset, 74px) - 73px);
        overflow-y: auto;
        overflow-x: hidden;
        padding: 75px 0 16px;   /* = a plain title row (26 + 29 + 20), the first item level with the grid's top; every view prints the title card now, whose row is 164px - see the :has() rules at the end of the file (75 stays for a page without the row) */
        scrollbar-width: thin;
        color: var(--vb-text);
    }

    .vb-rail-toggle {
        display: none;
        align-items: center;
        justify-content: flex-end;
        width: 100%;
        height: 36px;
        margin: 0 0 17px;   /* 22 + 36 + 17 = 75px: the first item level with the grid's top (the title row is 75px since 2026-09-07; was 3 = 61) */
        padding: 0 10px;
        border: 0;
        border-radius: 10px;
        background: none;
        color: var(--vb-muted);
        cursor: pointer;
    }

    .vb-rail-toggle:hover {
        color: var(--vb-text);
        background: var(--vb-pill);
    }

    .vb-rail-toggle svg {
        width: 20px;
        height: 20px;
        transform: scaleX(-1); /* icon state: the arrow points at "expand" */
    }

    /* follow plan B0 (owner 2026-09-06): a 4px gap between the pills - an active item and a hovered neighbour used to share an edge
       (two grey backgrounds touching); both widths inherit it */
    .vb-rail-group {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 0 0 8px;
    }

    .vb-rail-group + .vb-rail-group {
        margin-top: 2px;
        padding-top: 8px;
        border-top: 1px solid var(--vb-line);
    }

    .vb-rail-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        height: 64px;
        padding: 0 4px;
        border-radius: 10px;
        color: var(--vb-text);
        font-size: 12px;   /* owner 2026-09-06: was 10px; the compact rail's labels at 12px, weight 500 (his pasted rule) */
        line-height: 1;
        text-decoration: none;
        white-space: nowrap;
        font-weight: 500;
    }

    .vb-rail-item svg {
        width: 24px;
        height: 24px;
        flex: none;
    }

    .vb-rail-item:hover {
        background: var(--vb-pill);
        text-decoration: none;
    }

    .vb-rail-item.is-active {
        background: var(--vb-pill);
        font-weight: 500;
    }

    .vb-rail-lb {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* icon rail: only the top group */
    .vb-rail-group:not(.vb-rail-group--top),
    .vb-rail-h {
        display: none;
    }
}

@media (min-width: 1730px) {
    html:not([data-vb-rail="collapsed"]) .vb-rail {
        --vb-rail-w: 240px;
    }

    .vb-rail-toggle {
        display: flex; /* the toggle exists only where there is room to expand */
    }

    html:not([data-vb-rail="collapsed"]) .vb-rail-in {
        padding: 22px 8px 16px 0;
    }

    html:not([data-vb-rail="collapsed"]) .vb-rail-toggle svg {
        transform: none;
    }

    html:not([data-vb-rail="collapsed"]) .vb-rail-item {
        flex-direction: row;
        justify-content: flex-start;
        gap: 20px;
        height: 40px;
        padding: 0 12px;
        font-size: 14px;
        font-weight: 400;   /* the expanded rail keeps its weight: the compact rule above got 500 on the owner's paste (Codex B0) */
    }

    html:not([data-vb-rail="collapsed"]) .vb-rail-group:not(.vb-rail-group--top) {
        display: flex;              /* was block: the lower groups (Following list, My studio) keep the 4px pill gap too (Codex B0) */
    }

    html:not([data-vb-rail="collapsed"]) .vb-rail-h {
        display: block;
    }

    html[data-vb-rail="collapsed"] .vb-rail-in {
        padding-top: 22px; /* toggle shown, then the first item at 75px like the labelled rail */
    }

    .vb-rail-h {
        margin: 6px 12px 6px;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: -0.01em;
        color: var(--vb-text);
    }

    .vb-rail-h a {
        color: inherit;
        text-decoration: none;
    }

    .vb-rail-login {
        margin: 0;
        padding: 10px 12px 12px;
        font-size: 14px;
        line-height: 1.35;
    }

    .vb-rail-login p {
        margin: 0 0 12px;
    }

    .vb-rail-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 38px;
        padding: 0 22px;
        border-radius: 999px;
        background: linear-gradient(90deg, #ff3366, #ff1f5a);
        color: #fff;
        font-weight: 500;
        text-decoration: none;
        box-shadow: 0 8px 20px rgba(255, 51, 102, 0.28);
    }

    .vb-rail-btn:hover {
        color: #fff;
        filter: brightness(1.06);
        text-decoration: none;
    }

    .vb-rail-sub {
        display: block;
        margin-top: 10px;
        font-size: 12px;
        color: var(--vb-muted);
    }

    .vb-rail-sub a {
        color: var(--vb-text);
        font-weight: 500;
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .vb-rail-item--ava {
        gap: 14px;
    }

    .vb-rail-ava {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        object-fit: cover;
        flex: none;
        background: var(--vb-pill);
    }

    .vb-rail-ava--fb {
        display: inline-grid;
        place-items: center;
        font-size: 11px;
        font-weight: 700;
    }

    .vb-rail-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--vb-verified);
        flex: none;
        margin-left: auto;
    }
}

/* ---------- personal views: guest gate + member empty state (rail plan B3, 2026-09-06) ---------- */
.vb-gate {
    max-width: 560px;
    margin: 48px auto 64px;
    padding: 0 16px;
    text-align: center;
    color: var(--vb-text);
}

.vb-gate-ill {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--vb-pill);
}

.vb-gate-ill svg {
    width: 32px;
    height: 32px;
    stroke: var(--vb-text);
}

.vb-gate h2 {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--vb-text);
}

.vb-gate p {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--vb-muted);
}

.vb-gate-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
}

.vb-gate-btn {
    display: inline-flex;
    align-items: center;
    height: 42px;
    padding: 0 20px;
    border-radius: 999px;
    background: var(--vb-inv);
    color: var(--vb-inv-ink);
    font-weight: 500;
    text-decoration: none;
}

.vb-gate-btn:hover {
    color: var(--vb-inv-ink);
    text-decoration: none;
    filter: brightness(1.08);
}

.vb-gate-btn--ghost {
    background: var(--vb-pill);
    color: var(--vb-text);
}

.vb-gate-btn--ghost:hover {
    color: var(--vb-text);
}

/* ---------- suggested-advertisers wall (rail plan B4, 2026-09-06) ---------- */
.vb-wall {
    padding: 0 0 48px;   /* owner 2026-09-07: no heading of its own any more (the title card's line carries the state text) - the tiles start right under the row */
    color: var(--vb-text);
}

.vb-wall-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

@media (min-width: 769px) {
    .vb-wall-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
    }
}

.vb-wall-tile {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: 14px;
    overflow: hidden;
    background: var(--vb-card) center 30% / cover no-repeat;
    color: #fff;
    isolation: isolate;
}

.vb-wall-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.72) 100%);
    z-index: 0;
}

.vb-wall-in {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 12px 16px;
}

.vb-wall-ava {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    margin-bottom: 10px;
    background: var(--vb-pill);
}

.vb-wall-ava--fb {
    display: inline-grid;
    place-items: center;
    font-size: 22px;
    font-weight: 700;
    color: var(--vb-text);
}

.vb-wall-nm {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.vb-wall-nm .vb-verified {
    width: 15px;
    height: 15px;
    color: var(--vb-verified);
}

.vb-wall-sb {
    margin: 3px 0 12px;
    font-size: 13px;
    opacity: 0.92;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.vb-wall-avail {
    color: #4ade80;
}

.vb-follow {
    /* owner 2026-09-07 ("valgega nagu video vaates follow nupp, et oleks ühtne ui loogika"): the same pill as the Reels viewer's
       .vreels-follow (css/video-reels-1.css) - solid white with ink text, translucent white with a hairline once Following -
       at the wall's own size; the brand-pink gradient + glow is gone.
       2026-09-11 (owner's phone: "kaartides pole õhku"): border-box, so min-width 130 is the whole pill (content-box made it
       130 + 44 padding + 2 border = 176px = the phone tile's full width); width auto + flex none so the column never stretches it;
       no backdrop-filter - the pill is solid white anyway, and blur inside a rounded overflow-hidden tile painted a tall white
       block on iOS Safari. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: auto;
    max-width: 100%;
    height: 38px;
    min-width: 130px;
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: #fff;
    color: #111;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    box-shadow: none;
}
/* 2026-09-11 (owner: "profiilipilt ja nimi ei ava profiili"): the avatar and the name are links to the profile */
.vb-wall-ava-link {
    display: block;
    line-height: 0;
    border-radius: 50%;
    margin-bottom: 10px;
}
.vb-wall-ava-link .vb-wall-ava {
    margin-bottom: 0;
}
a.vb-wall-nm,
a.vb-wall-nm:hover,
a.vb-wall-nm:focus {
    color: #fff;
    text-decoration: none;
}
.vb-follow:hover {
    background: rgba(255, 255, 255, 0.86);
    color: #111;
    text-decoration: none;
}
.vb-follow.is-on {
    /* the viewer's translucent Following, on a dark base: the wall tile's photo can be bright where the viewer's video has its own
       scrim, so white text on 18% white alone could lose contrast there (Codex) */
    background: rgba(0, 0, 0, 0.42);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.55);
}
.vb-follow.is-on:hover {
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
}
.vb-follow:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.6);   /* a dark outer ring so the white ring reads on a light photo too (Codex) */
}
.vb-follow[disabled],
.vb-follow[data-busy="1"],
.vb-follow[aria-disabled="true"] {   /* the shared client marks busy / unavailable with attributes, never disabled (Codex B2) */
    opacity: 0.7;
    cursor: default;
}

/* ---------- Stories view (rail plan B5, 2026-09-06): 9:16 tiles, one per listing ---------- */
.vb-stories-wall {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 0 0 48px;   /* owner 2026-09-07 (his paste): the title card's row gives the air above (was 12px) */
}

/* The story viewer's ground on this page (owner 2026-09-10, "stories taust ei tule juurde"): the plugin's own sheet (socialstory21.css, the
   category strip's - page-video.php enqueues it instead of the CDN socialstory25.css) hides its .story-cover scrim and leaves the full-screen
   fixed .storytime overlay transparent, so the page and its header showed through above and below the centred 90%-height window. A dark,
   blurred backdrop on the open overlay gives the viewer its own ground; the plugin's !important rules position it, we only paint it. */
body.video-gallery-page .str-storybox .storytime.is-open {
    background: rgba(8, 8, 10, 0.94);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

@media (min-width: 769px) {
    .vb-stories-wall {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 14px;
    }
}

.vb-st {
    position: relative;
    display: block;
    aspect-ratio: 9 / 16;
    border-radius: 14px;
    overflow: hidden;
    background: var(--vb-card) center 30% / cover no-repeat;
    color: #fff;
    text-decoration: none;
}

.vb-st::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 35%);
}

.vb-st:hover {
    filter: brightness(1.06);
    text-decoration: none;
    color: #fff;
}

.vb-st-hd {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.vb-st-ring {
    position: relative;
    width: 38px;
    height: 38px;
    padding: 2px;
    border-radius: 50%;
    background: none;
    flex: none;
}

.vb-st-ring::before {   /* the profile page's Instagram conic ring, like the rail (owner 2026-09-07) */
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888, #f09433);
    z-index: 0;
}

.vb-st:not(.is-quiet) .vb-st-ring::before {
    animation: vb-ring-spin 3s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .vb-st:not(.is-quiet) .vb-st-ring::before { animation: none; }   /* after the spin rule on purpose: same specificity, the later one wins */
}

.vb-st.is-quiet .vb-st-ring::before {
    background: rgba(255, 255, 255, 0.32);   /* the tile is a dark poster: a quiet grey ring instead of the gradient */
}

.vb-st-ring img,
.vb-st-fb {
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid #000;
    box-sizing: border-box;
    object-fit: cover;
    background: #000;
}

.vb-st-fb {
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 700;
}

.vb-st-nm {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vb-st-nm .vb-verified {
    width: 13px;
    height: 13px;
    color: var(--vb-verified);
    flex: none;
}

.vb-st-age {
    margin-left: auto;
    opacity: 0.85;
    font-weight: 400;
    flex: none;
}

.vb-st-count {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    font-size: 11px;
    font-weight: 700;
}

/* the desktop card's hover Follow (follow plan B3) was removed 2026-09-07 on the owner's call ("see on mingi imelik .. tekstid ei saa normaalse
   pikkusega olla"): .vb-meta stays two columns on every width; the viewer's Follow pill and the Following wall keep the feature. */

/* ---- Card titles (titles plan, owner 2026-09-06; .vb-card-title because .vb-title is the page's h1 row): a titled video shows its title first (two lines max, opens the viewer at that video)
   and "name (verified) · Available now · location" on one muted line; an untitled video keeps the name-first card above. ---- */
.vb-card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    font-size: 13.5px;
    font-weight: 500;   /* Söhne has no real 600 */
    line-height: 1.3;
    color: var(--vb-text);
    text-decoration: none;
}

.vb-card-title:hover {
    text-decoration: underline;
}

.vb-card-title:focus-visible {
    outline: 2px solid var(--vb-brand);
    outline-offset: 2px;
    border-radius: 4px;
}

.vb-line2 {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.3;
    color: var(--vb-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vb-line2 .vb-name {
    display: inline-flex;
    max-width: 100%;
    vertical-align: bottom;
    font-size: inherit;
    font-weight: 500;
    line-height: inherit;
}

.vb-line2 .vb-sub {
    display: inline;
    margin: 0;
    white-space: inherit;
}

@media (min-width: 769px) {
    .vb-card-title {
        font-size: 14.5px;
    }

    .vb-line2 {
        font-size: 12.5px;
    }
}

/* ---- Fonts pass (owner 2026-09-06): the site moved from CircularXXWeb to the Söhne + National 2 pair, and this page still inherited
   Circular from the body. Söhne (300 / 400 / 500 loaded - no real 600 / 700) for the UI and for names + titles: the h1, the bar, the
   segment, chips, dropdowns, the rail, the phone sheet, the cards, badges, Load more, Follow buttons, wall + story tiles. National 2
   (400 / 500 / 700) for running text: the title subline, gate / wall / empty-state paragraphs. Card text: the title Söhne 500 in the text
   colour, the advertiser name Söhne 400 in --vb-text-2, the location 400 muted - three tones, one face (owner: "kasutame mõlemas shönet,
   pealkiri ja kasutajanimi veidi eri värvi ja paksusega"). ---- */
body.video-gallery-page .vb-bar,
body.video-gallery-page .vb-mtop,
body.video-gallery-page .vb-chips,
body.video-gallery-page .vb-sheet,
body.video-gallery-page .vb-rail,
body.video-gallery-page .video-gallery-container {
    font-family: "National 2", "S\00F6hne", sans-serif;
}

body.video-gallery-page .vb-bar,
body.video-gallery-page .vb-bar input,
body.video-gallery-page .vb-mtop,
body.video-gallery-page .vb-chips,
body.video-gallery-page .vb-sheet,
body.video-gallery-page .vb-seg,
body.video-gallery-page .vb-chip,
body.video-gallery-page .vb-sheet-list a,
body.video-gallery-page .vb-dd,
body.video-gallery-page .vb-rail,
body.video-gallery-page .vb-title h1,
body.video-gallery-page .vb-card,
body.video-gallery-page .vb-more,
body.video-gallery-page .vb-follow,
body.video-gallery-page .vb-wall-tile,
body.video-gallery-page .vb-st,
body.video-gallery-page .vb-stories-hd,
body.video-gallery-page .vb-story-name,
body.video-gallery-page .vb-story-fb,
body.video-gallery-page .vb-gate h2,
body.video-gallery-page .vb-empty h2 {
    font-family: "S\00F6hne", sans-serif;
}

body.video-gallery-page .vb-title h1 {
    font-weight: 500;   /* Söhne's heaviest real face */
}

/* Söhne ships in 300 / 400 / 500 only: every rule above that asked for 600 / 700 on a now-Söhne element would render faux-bold (Codex),
   so they are capped at 500 here - badges, the active dropdown item, sheet headings, rail heading, gate / wall headings, wall + story
   names / counters / letter avatars. */
body.video-gallery-page .vb-badge,
body.video-gallery-page .vb-ava-fb,
body.video-gallery-page .vb-filters-badge,
body.video-gallery-page .vb-dd-menu a.is-on,
body.video-gallery-page .vb-story-fb,
body.video-gallery-page .vb-sheet-hd h2,
body.video-gallery-page .vb-sheet-sec h3,
body.video-gallery-page .vb-rail-h,
body.video-gallery-page .vb-rail-ava--fb,
body.video-gallery-page .vb-gate h2,
body.video-gallery-page .vb-wall-ava--fb,
body.video-gallery-page .vb-wall-nm,
body.video-gallery-page .vb-st-fb,
body.video-gallery-page .vb-st-count {
    font-weight: 500;
}

body.video-gallery-page .vb-card-title {
    font-weight: 500;
    color: var(--vb-text);
}

body.video-gallery-page .vb-line2 .vb-name {
    font-weight: 400;
    color: var(--vb-text-2);
}

body.video-gallery-page .vb-title-sub,
body.video-gallery-page .vb-gate p,
body.video-gallery-page .vb-empty p {
    font-family: "National 2", "S\00F6hne", sans-serif;
}

/* ===== member gate (member-gate plan, owner 2026-09-07 - the approved mockup): a guest's Saved / Liked / Following is a short sales
   page - a hero (copy, two CTAs, a trust line) beside a preview of the member's view (real cards + story circles), then a benefits
   strip (not on Following, where the suggested wall follows). Tokens only; Söhne on headings / UI, National 2 on running text; one block
   after the fonts pass so the cascade is unambiguous. The member empty state keeps the .vb-gate rules above. Markup:
   inc/video-feed.php vidfeed_render_gate(). ===== */
body.video-gallery-page .vb-mg {
    padding: 0;   /* declared: a theme-wide section rule adds 30px of top padding otherwise (the .vb-stories note); the title card's row above gives the air (owner 2026-09-07: the card on the gate too) */
    color: var(--vb-text);
    font-family: "S\00F6hne", sans-serif;
}

body.video-gallery-page .vb-mg-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    align-items: start;   /* B3 (owner 2026-09-07): the copy starts at the top beside the tall preview - the h1 up, the benefits under it */
    padding: 0 0 40px;
}

body.video-gallery-page .vb-mg-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--vb-muted);
}

body.video-gallery-page .vb-mg-eyebrow i {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--vb-brand);
}

body.video-gallery-page .vb-mg-h1 {
    margin: 0 0 18px;
    font-family: "S\00F6hne", sans-serif;   /* the theme's h1-h5 rule (Circular) beats inheritance; the page's own title has the same guard */
    font-size: 34px;
    line-height: 1.04;
    font-weight: 500;   /* Söhne's heaviest real face */
    letter-spacing: -0.025em;
    text-wrap: balance;
    color: var(--vb-text);
}

body.video-gallery-page .vb-mg-h1 em {
    font-style: normal;
    color: var(--vb-brand);
    display: block;   /* the pink line always starts its own line (owner 2026-09-10: the black sentence never runs into it) */
}

body.video-gallery-page .vb-mg-lead {
    margin: 0 0 28px;
    max-width: 46ch;
    font-family: "National 2", "S\00F6hne", sans-serif;
    font-size: 16.5px;
    line-height: 1.5;
    color: var(--vb-text-2);
}

body.video-gallery-page .vb-mg-ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

body.video-gallery-page .vb-mg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    box-sizing: border-box;   /* the theme leaves <a> content-box: 50 + the 1px borders would be 52 */
    height: 50px;
    padding: 0 26px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
}

body.video-gallery-page .vb-mg-btn--brand {
    background: linear-gradient(90deg, #ff3366, #ff1f5a);   /* the rail's Log in recipe */
    color: #fff;
    box-shadow: 0 10px 24px rgba(255, 51, 102, 0.28);
}

body.video-gallery-page .vb-mg-btn--brand:hover {
    color: #fff;
    text-decoration: none;
    filter: brightness(1.06);
}

body.video-gallery-page .vb-mg-btn--ghost {
    background: var(--vb-pill);
    color: var(--vb-text);
}

body.video-gallery-page .vb-mg-btn--ghost:hover {
    color: var(--vb-text);
    text-decoration: none;
    filter: brightness(0.97);
}

body.video-gallery-page .vb-mg-btn:focus-visible {
    outline: 2px solid var(--vb-brand);
    outline-offset: 3px;
}

body.video-gallery-page .vb-mg-trust {
    margin: 18px 0 0;
    font-family: "National 2", "S\00F6hne", sans-serif;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--vb-muted);
}

body.video-gallery-page .vb-mg-trust b {
    font-weight: 700;
    color: var(--vb-text);
}

body.video-gallery-page .vb-mg-trust span {
    display: block;   /* the private sentence on its own line, phones and desktop (owner 2026-09-10) */
}

/* the preview: the member's view as an illustration (role="img", nothing focusable) */
body.video-gallery-page .vb-mg-preview {
    padding: 16px 14px 18px;
    border-radius: 20px;
    background: var(--vb-card);
}

body.video-gallery-page .vb-mg-phead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 14px;
}

body.video-gallery-page .vb-mg-ptitle {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

body.video-gallery-page .vb-mg-seg {
    display: inline-flex;
    flex: none;
    height: 34px;
    border: 1px solid var(--vb-line-strong);
    border-radius: 999px;
    overflow: hidden;
    background: var(--vb-page);
}

body.video-gallery-page .vb-mg-seg > span {
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 500;
}

body.video-gallery-page .vb-mg-seg > span.is-on {
    background: var(--vb-inv);
    color: var(--vb-inv-ink);
}

body.video-gallery-page .vb-mg-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 10px;
}

body.video-gallery-page .vb-mg-card {
    min-width: 0;
}

body.video-gallery-page .vb-mg-media {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: 12px;
    overflow: hidden;
    background: #111;
    color: #fff;
}

body.video-gallery-page .vb-mg-media > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
}

body.video-gallery-page .vb-mg-media::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 42%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
}

body.video-gallery-page .vb-mg-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

body.video-gallery-page .vb-mg-badge svg {
    width: 15px;
    height: 15px;
}

body.video-gallery-page .vb-mg-views {
    position: absolute;
    left: 8px;
    bottom: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

body.video-gallery-page .vb-mg-views svg {
    width: 10px;
    height: 10px;
    fill: currentColor;
}

body.video-gallery-page .vb-mg-dur {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 2;
    padding: 2px 6px;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.6);
    font-size: 11px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

body.video-gallery-page .vb-mg-meta {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    padding: 8px 2px 0;
}

body.video-gallery-page .vb-mg-ava {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--vb-pill);
    font-size: 12px;
    font-weight: 500;
}

body.video-gallery-page .vb-mg-ava img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 20%;
}

body.video-gallery-page .vb-mg-t {
    min-width: 0;
}

body.video-gallery-page .vb-mg-t b {
    display: block;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.video-gallery-page .vb-mg-t > span {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.3;
    color: var(--vb-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.video-gallery-page .vb-mg-t em {
    font-style: normal;
    color: var(--vb-text-2);
}

body.video-gallery-page .vb-mg-tick {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 3px;
    vertical-align: -1px;
}

body.video-gallery-page .vb-mg-follow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 18px 0 10px;
    font-size: 14px;
    font-weight: 500;
}

body.video-gallery-page .vb-mg-follow small {
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--vb-brand);
    color: #fff;
    font-size: 11px;
    font-weight: 500;
}

body.video-gallery-page .vb-mg-circles {
    display: flex;
    gap: 10px;
    overflow: hidden;
}

body.video-gallery-page .vb-mg-circle {
    flex: none;
    width: 62px;
    text-align: center;
    font-size: 11.5px;
    line-height: 14px;
}

body.video-gallery-page .vb-mg-circle > span {
    display: block;
    margin-top: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* the ring = the Stories rail's recipe (.vb-story-ring): the conic gradient on a ::before that spins, flat when the story is past its 24 h */
body.video-gallery-page .vb-mg-ring {
    display: block;
    position: relative;
    box-sizing: border-box;
    width: 62px;
    height: 62px;
    padding: 3px;
    border-radius: 50%;
}

body.video-gallery-page .vb-mg-ring::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888, #f09433);
}

body.video-gallery-page .vb-mg-circle:not(.is-quiet) .vb-mg-ring::before {
    animation: vb-ring-spin 3s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    body.video-gallery-page .vb-mg-circle:not(.is-quiet) .vb-mg-ring::before { animation: none; }   /* after the spin rule on purpose */
}

body.video-gallery-page .vb-mg-circle.is-quiet .vb-mg-ring::before {
    background: var(--vb-line-strong);
}

body.video-gallery-page .vb-mg-ring img,
body.video-gallery-page .vb-mg-ring-fb {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid var(--vb-card);
    background: var(--vb-pill);
}

body.video-gallery-page .vb-mg-ring img {
    display: block;
    object-fit: cover;
    object-position: 50% 20%;
}

body.video-gallery-page .vb-mg-ring-fb {
    display: grid;
    place-items: center;
    font-size: 16px;
    font-weight: 500;
}

/* benefits: no boxes - an icon + text list inside the hero grid (B3: under the copy on desktop; on phones right after the copy, BEFORE the preview - owner 2026-09-10, nobody scrolls past the graphic) */
body.video-gallery-page .vb-mg-benefits {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    padding: 28px 0 8px;   /* no divider above the list (owner 2026-09-10: "vahejoont pole vaja", phones and desktop) */
}

body.video-gallery-page .vb-mg-benefit {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

body.video-gallery-page .vb-mg-bt {
    min-width: 0;
}

body.video-gallery-page .vb-mg-ic {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin: 0;
    border-radius: 50%;
    background: var(--vb-pill);
}

body.video-gallery-page .vb-mg-ic svg {
    width: 18px;
    height: 18px;
}

body.video-gallery-page .vb-mg-benefit h3 {
    margin: 7px 0 4px;   /* the title's cap height on the icon's centre line */
    font-family: "S\00F6hne", sans-serif;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--vb-text);
}

body.video-gallery-page .vb-mg-benefit p {
    margin: 0;
    max-width: 34ch;
    font-family: "National 2", "S\00F6hne", sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--vb-muted);
}

@media (min-width: 769px) {
    body.video-gallery-page .vb-mg-btn { flex: none; }
    body.video-gallery-page .vb-mg-preview { padding: 22px 22px 24px; border-radius: 24px; }
    body.video-gallery-page .vb-mg-circles { gap: 14px; }
    body.video-gallery-page .vb-mg-benefits { gap: 24px; padding: 32px 0 0; }
}

/* Phones (owner 2026-09-10): the copy gets the title card's inner inset ("vb-mg-copy vajaks rohkem õhku äärtest" - the card sits 12px
   from the edge with 24px inside), the headline drops to 30px so the black sentence fits one line inside the padded column ("Save it now,
   watch it later." / "Like it once, see it again."), and the three USPs come right after the copy, BEFORE the preview graphic ("need usp-d
   peaks ka mobiilis ikkagi ülesse näitama" - a reader who never scrolls past the preview still sees them; desktop keeps them left, below). */
@media (max-width: 768px) {
    body.video-gallery-page .vb-mg-h1 { font-size: 30px; line-height: 1.1; }
    body.video-gallery-page .vb-mg-copy { order: 1; padding-left: 20px; padding-right: 20px; }
    body.video-gallery-page .vb-mg-benefits { order: 2; padding: 4px 20px 0; }
    body.video-gallery-page .vb-mg-preview { order: 3; }
}

@media (min-width: 901px) {   /* the mockup's split (769-900 would squeeze the 2x2 preview beside the copy) */
    body.video-gallery-page .vb-mg-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 32px 56px; padding: 0 0 64px; }
    body.video-gallery-page .vb-mg-copy { grid-column: 1; grid-row: 1; }
    body.video-gallery-page .vb-mg-preview { grid-column: 2; grid-row: 1 / span 2; }   /* the whole height on the right */
    body.video-gallery-page .vb-mg-benefits { grid-column: 1; grid-row: 2; }           /* under the copy, left */
    body.video-gallery-page .vb-mg-hero--solo { grid-template-columns: minmax(0, 640px); }
    body.video-gallery-page .vb-mg-h1 { font-size: min(4vw, 46px); }   /* 46px from ~1150; in the 901-1149 band the copy column is 400-500px wide and the black sentence must stay one line (owner 2026-09-10) - measured: 46px wraps below ~1090 */
    body.video-gallery-page .vb-mg-lead { font-size: 18px; }
}

/* ===== title card (owner 2026-09-07, after the trial): the category pages' Airbnb-style intro card (css/cat-pills-3d.css) on the video
   page's title row - white / --esc-dk-inner, radius 24, hairline + soft shadow, Söhne 500 title, a grey line, the owner's 3D icon per view
   (images/3d/escortify-*-icon.png) right on phones, left on desktop. The row's height becomes the rail's constant (164px = 30 + (22 + 60
   + 22) + 30 since the owner's measures - the 90px icon's -15px margins make it 60 in the row); every view prints the row, the member
   gate included; 75 stays for a page without it. Markup: page-video.php. ===== */
body.video-gallery-page .vb-title-card {
    display: flex;
    align-items: center;
    gap: 14px;
    box-sizing: border-box;
    padding: 18px 16px 18px 20px;
    background: var(--vb-page);
    border-radius: 24px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.02), 0 8px 24px rgba(0, 0, 0, 0.10);
}

body.video-gallery-page .vb-title-card__text {
    min-width: 0;
    flex: 1 1 auto;
}

body.video-gallery-page .vb-title-card h1.video-page-title {
    margin: 0 0 4px;
    font-size: 20px;   /* owner 2026-09-07 (his phone paste): 20px on phones (was 15) */
    line-height: 20px;
    font-weight: 500;
    letter-spacing: -0.01em;
    white-space: normal;
}

body.video-gallery-page .vb-title-card .vb-title-sub {
    display: block;
    margin: 0;
    font-size: 13px;
    line-height: 18px;
    color: var(--vb-muted);
}

body.video-gallery-page .vb-title-card__icon {
    display: block;
    flex: 0 0 auto;
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin: -20px 0;   /* owner 2026-09-07 (his phone paste): 80px bleeding 20px into the card's padding - 40px in the row (was 72, no margin) */
}

html[data-theme="dark"] body.video-gallery-page .vb-title-card {
    background: var(--esc-dk-inner, #1c1c1c);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

@media (min-width: 769px) {
    body.video-gallery-page .vb-title-card { gap: 22px; padding: 22px 24px; }
    body.video-gallery-page .vb-title-card h1.video-page-title { margin: 0 0 6px; font-size: 22px; line-height: 28px; white-space: nowrap; }
    body.video-gallery-page .vb-title-card .vb-title-sub { font-size: 15px; line-height: 22px; }
    body.video-gallery-page .vb-title-card__icon { order: -1; width: 90px; height: 90px; margin: -15px -10px; }   /* owner 2026-09-07 (his paste): a bigger icon that bleeds 15px into the card's padding - 60px in the row */
    html[data-theme="dark"] body.video-gallery-page .vb-title-card { box-shadow: 0 0 0 1px var(--esc-dk-line-strong, rgba(255, 255, 255, 0.12)), 0 8px 24px rgba(0, 0, 0, 0.5); }
}

/* the rail's title-row constant with the card: 164px = 30 + (22 + 60 + 22) + 30 (the 90px icon's -15px margins make it 60 in the row;
   the collapse control centred on the card: 22 + 42 + 18 = 82 = 30 + 52); the member gate prints the row too (2026-09-07), so its hero
   starts level with the rail's first item */
@media (min-width: 1410px) {
    body.video-gallery-page .video-gallery-container:has(> .vb-title) .vb-rail-in { padding-top: 164px; }
}

@media (min-width: 1730px) {
    body.video-gallery-page .video-gallery-container:has(> .vb-title) .vb-rail-in { padding-top: 22px; }
    body.video-gallery-page .video-gallery-container:has(> .vb-title) .vb-rail-toggle { margin: 42px 0 64px; }   /* 22 + 42 + 36 + 64 = 164 */
}