/* ============================================================
   HCVT REDESIGN — Dark Cinema Premium
   Loaded AFTER stock styles.css/overwrite.css. Overrides the
   stock Mechbunny 2018 look without breaking its JS hooks.
   ============================================================
   Palette: near-black canvas + layered charcoal + warm amber
   Type:    Space Grotesk (display) / Inter (body)
   ============================================================ */

/* ---------- tokens ---------- */
:root {
    --h-bg:        #0B0B0F;   /* page canvas             */
    --h-surface:   #131318;   /* cards, panels           */
    --h-surface-2: #1A1A21;   /* raised panels           */
    --h-surface-3: #22222B;   /* hover / active          */
    --h-border:    #26262F;   /* hairlines               */
    --h-border-2:  #32323D;   /* strong hairlines        */
    --h-text:      #F2F2F4;   /* primary text            */
    --h-text-2:    #A7A7B3;   /* secondary text          */
    --h-muted:     #6E6E7C;   /* meta / captions         */
    --h-accent:    #E8A33D;   /* amber — the signature   */
    --h-accent-2:  #F4B952;   /* amber hover             */
    --h-accent-ink:#1A1205;   /* text on amber           */
    --h-danger:    #E5484D;
    --h-radius:    10px;
    --h-radius-sm: 6px;
    --h-gutter:    16px;
    --h-container: 1400px;
    --h-font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    --h-font-body:    'Inter', system-ui, -apple-system, sans-serif;
}

html, body {
    background: var(--h-bg) !important;
    color: var(--h-text) !important;
    font-family: var(--h-font-body) !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
}

h1, h2, h3, h4, h5, h6,
.mhead__h, .box__ttl, .item__title-label {
    font-family: var(--h-font-display) !important;
}

/* ---------- container: fluid, capped ---------- */
.page-wrapper, .wrapper {
    max-width: var(--h-container) !important;
    margin: 0 auto !important;
    padding-left: var(--h-gutter) !important;
    padding-right: var(--h-gutter) !important;
}

.page-wrapper {
    padding-top: 0 !important;
}

/* ============================================================
   HEADER — 3 bars collapse into 1 sticky bar + 1 genre strip
   ============================================================ */
.header-sec {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    background: rgba(11, 11, 15, 0.92) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-bottom: 1px solid var(--h-border) !important;
}

/* bar 1: logo + search + ucp on one row */
.top-bar {
    background: transparent !important;
    border-bottom: none !important;
    padding: 10px 0 8px !important;
}
.top-bar .row {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
}
.top-bar .logo { flex: 0 0 auto !important; }
.top-bar .search {
    flex: 1 1 auto !important;
    max-width: 640px !important;
    margin: 0 auto !important;
}
.top-bar .ucp { flex: 0 0 auto !important; margin-left: auto !important; }

/* bar 2: genre strip — horizontal scroll, no wrap */
.nav-sec {
    background: transparent !important;
    border-bottom: 1px solid var(--h-border) !important;
    padding: 0 !important;
}
.nav-sec .row {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
}
.nav-sec .row::-webkit-scrollbar { display: none !important; }
.main-nav {
    flex: 1 1 auto !important;
}
.main-nav-list {
    display: flex !important;
    gap: 2px !important;
    flex-wrap: nowrap !important;
}
.main-nav-list__link {
    padding: 10px 14px !important;
    color: var(--h-text-2) !important;
    font-family: var(--h-font-display) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
    border-radius: var(--h-radius-sm) !important;
    transition: color .15s ease, background .15s ease !important;
    white-space: nowrap !important;
}
.main-nav-list__link:hover,
.main-nav-list__link.is-active {
    color: var(--h-text) !important;
    background: var(--h-surface-3) !important;
}
.main-nav-list__link.is-active {
    color: var(--h-accent) !important;
}
.main-nav-list__icon { display: none !important; }

/* search: modern pill — submit merged into trailing edge */
.search__form {
    display: flex !important;
    align-items: center !important;
    background: var(--h-surface-2) !important;
    border: 1px solid var(--h-border-2) !important;
    border-radius: 999px !important;
    padding: 3px !important;
    height: 44px !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
}
.search__form:focus-within {
    border-color: var(--h-accent) !important;
    box-shadow: 0 0 0 3px rgba(232, 163, 61, 0.15) !important;
}
.search__input-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    background: transparent !important;
    border: none !important;
    color: var(--h-text) !important;
    font-size: 14px !important;
    padding: 0 14px !important;
    height: 36px !important;
    outline: none !important;
}
.search__submit {
    flex: 0 0 auto !important;
    background: var(--h-accent) !important;
    color: var(--h-accent-ink) !important;
    border-radius: 999px !important;
    width: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background .15s ease !important;
    border: 0 !important;
    margin: 0 !important;
    position: relative !important;
    right: 0 !important;
}
.search__submit:hover { background: var(--h-accent-2) !important; }
/* the type-scope dropdown is absolutely positioned in stock CSS (sits after
   the submit) — restore it to flow so order = input → scope → submit */
.search__type {
    flex: 0 0 auto !important;
    position: static !important;
    width: auto !important;
    order: 2 !important;
}
.search__type-selected { padding: 0 10px !important; }
/* canonical pill order: input → scope → submit */
.search__input-text { order: 0 !important; }
.search__submit { order: 3 !important; margin-left: 2px !important; }
/* hide the hidden type-input + stray trailing elements that render as tofu squares */
.search__input-text.-hidden, .search__type .search__type-icon { display: none !important; }

/* nav row: distribute across the bar, kill the dead right half */
.nav-sec .row { justify-content: space-between !important; }
.main-nav { flex: 1 1 auto !important; }
.main-nav-list { justify-content: space-between !important; }

/* ucp: quiet links, amber accent on hover */
.ucp-list__link {
    color: var(--h-text-2) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 8px 10px !important;
    border-radius: var(--h-radius-sm) !important;
}
.ucp-list__link:hover { color: var(--h-accent) !important; }
.ucp-list__icon { display: none !important; }

/* CHANGE COLORS — theme-demo artifact, never ships */
.ucp-list__li.-color-select { display: none !important; }

/* Sign Up = amber pill; Login = quiet ghost */
.ucp-list__li.-register .ucp-list__link {
    background: var(--h-accent) !important;
    color: var(--h-accent-ink) !important;
    border-radius: 999px !important;
    padding: 7px 18px !important;
    font-family: var(--h-font-display) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
}
.ucp-list__li.-register .ucp-list__link:hover { background: var(--h-accent-2) !important; color: var(--h-accent-ink) !important; }
.ucp-list__li.-login .ucp-list__link {
    border: 1px solid var(--h-border-2) !important;
    border-radius: 999px !important;
    padding: 6px 16px !important;
    color: var(--h-text) !important;
}
.ucp-list__li.-login .ucp-list__link:hover { border-color: var(--h-accent) !important; color: var(--h-accent) !important; }

/* bar 3 utility: slim, right-aligned filters only */
.utility-sec {
    display: none !important; /* moved into nav-strip via CSS reflow */
}

/* navbar-trigger (mobile hamburger) */
.navbar-trigger { display: none !important; }

/* ============================================================
   SECTION HEADERS — hairline + amber tick + ALL CAPS
   ============================================================ */
.box__ttl, .regular-sec .box > .box__inner > .box__hd,
[class*="__ttl"] {
    font-family: var(--h-font-display) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--h-text) !important;
    border-bottom: 1px solid var(--h-border) !important;
    padding-bottom: 10px !important;
    margin-bottom: 16px !important;
}
[class*="__ttl"]::before {
    content: "" !important;
    display: inline-block !important;
    width: 4px !important;
    height: 14px !important;
    background: var(--h-accent) !important;
    border-radius: 2px !important;
    margin-right: 10px !important;
    vertical-align: -2px !important;
}

/* section header icons render as tofu (icon font not loading) — hide glyph spans only */
.box__hd-icon { display: none !important; }

/* SEE MORE / SEE ALL — text links, not ghost buttons */
.btn.-outlined,
a[class*="see-"], .box__hd a, .box__hd .btn {
    background: transparent !important;
    border: none !important;
    color: var(--h-text-2) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding: 4px 0 !important;
}
.btn.-outlined:hover { color: var(--h-accent) !important; }

/* ============================================================
   VIDEO CARDS — enforced 16:9, hover play, meta below
   ============================================================ */
.item__inner {
    background: var(--h-surface) !important;
    border: 1px solid var(--h-border) !important;
    border-radius: var(--h-radius) !important;
    overflow: hidden !important;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}
.item__inner:hover {
    transform: translateY(-3px) !important;
    border-color: var(--h-border-2) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important;
}

.item__thumb {
    position: relative !important;
    display: block !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
    background: var(--h-surface-2) !important;
}
.item__thumb-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform .25s ease !important;
}
.item__inner:hover .item__thumb-img {
    transform: scale(1.06) !important;
}

/* hover play glyph */
.item__thumb::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.35) !important;
    opacity: 0 !important;
    transition: opacity .18s ease !important;
}
.item__inner:hover .item__thumb::after { opacity: 1 !important; }
.item__thumb::before {
    content: "▶" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(0.85) !important;
    width: 52px !important;
    height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(232, 163, 61, 0.92) !important;
    color: var(--h-accent-ink) !important;
    border-radius: 50% !important;
    font-size: 16px !important;
    z-index: 2 !important;
    opacity: 0 !important;
    transition: opacity .18s ease, transform .18s ease !important;
    box-shadow: 0 6px 24px rgba(0,0,0,0.5) !important;
}
.item__inner:hover .item__thumb::before {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
}

/* stats bar: duration chip bottom-right, rating chip top-left */
.item__hd { display: block !important; }
.item__stats-bar {
    position: absolute !important;
    z-index: 3 !important;
    display: flex !important;
    gap: 6px !important;
    pointer-events: none !important;
}
.item__stat {
    background: rgba(10, 10, 14, 0.82) !important;
    backdrop-filter: blur(4px) !important;
    border-radius: 4px !important;
    padding: 2px 7px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--h-text) !important;
}
.item__stat-icon { display: none !important; }
.item__stat.-rating { top: 8px !important; left: 8px !important; color: var(--h-accent) !important; }
.item__stat.-views { display: none !important; }
.item__stat.-duration {
    position: absolute !important;
    bottom: -30px !important;
    right: 8px !important;
}
.item__stat.-quality {
    position: absolute !important;
    bottom: -30px !important;
    right: 62px !important;
    color: var(--h-accent) !important;
    border: 1px solid rgba(232, 163, 61, 0.4) !important;
}

/* title: 2-line clamp, body (force OUT of the base absolute-overlay so it
   renders below the thumb as a real caption, not clipped white text on the image) */
.item__bd { display: block !important; padding: 10px 12px 12px !important; }
.item__title {
    display: block !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    z-index: auto !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
}
.item__title-label {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-family: var(--h-font-body) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    color: var(--h-text) !important;
    min-height: 2.7em !important;
}
.item__inner:hover .item__title-label { color: var(--h-accent) !important; }

/* favorites / edit overlay buttons — hide on card (clutter), keep page-level */
.item__link-fav, .item__link-edit { display: none !important; }

/* grid: consistent responsive columns */
.g-row .row, .row {
    gap: 14px !important;
}
.item.col {
    flex: 0 0 calc(25% - 11px) !important;
    max-width: calc(25% - 11px) !important;
}
@media (max-width: 1100px) {
    .item.col { flex: 0 0 calc(33.333% - 10px) !important; max-width: calc(33.333% - 10px) !important; }
}
@media (max-width: 760px) {
    .item.col { flex: 0 0 calc(50% - 7px) !important; max-width: calc(50% - 7px) !important; }
    .top-bar .row { gap: 10px !important; }
}

/* ============================================================
   FEATURED SPOTLIGHT — the signature (home hero)
   ============================================================ */
.mbx-spotlight {
    position: relative !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    margin: 18px 0 26px !important;
    border: 1px solid var(--h-border) !important;
    background: var(--h-surface) !important;
}
.mbx-spotlight__media {
    position: relative !important;
    aspect-ratio: 21 / 9 !important;
    overflow: hidden !important;
    background: var(--h-surface-2) !important;
}
.mbx-spotlight__media img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 30% !important;
    display: block !important;
    max-width: none !important;
    border: 0 !important;
    margin: 0 !important;
}
.mbx-spotlight__scrim {
    position: absolute !important;
    inset: 0 0 0 0 !important;
    height: 100% !important;
    background: linear-gradient(to top, rgba(11,11,15,0.95) 0%, rgba(11,11,15,0.62) 32%, rgba(11,11,15,0.18) 55%, transparent 72%) !important;
    pointer-events: none !important;
}
.mbx-spotlight__scrim::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 62% 0 0 !important;
    background: linear-gradient(to right, rgba(11,11,15,0.72) 0%, transparent 100%) !important;
    pointer-events: none !important;
}
.mbx-spotlight__media img {
    object-position: center 28% !important;
}
.mbx-spotlight__body {
    position: absolute !important;
    inset: auto 0 0 0 !important;
    padding: 22px 26px !important;
    z-index: 2 !important;
}
.mbx-spotlight__eyebrow {
    font-family: var(--h-font-display) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--h-accent) !important;
    margin-bottom: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.mbx-spotlight__eyebrow::before {
    content: "" !important;
    width: 26px !important;
    height: 2px !important;
    background: var(--h-accent) !important;
    border-radius: 1px !important;
}
.mbx-spotlight__title {
    font-family: var(--h-font-display) !important;
    font-size: clamp(20px, 3vw, 32px) !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    color: var(--h-text) !important;
    margin: 0 0 12px !important;
    max-width: 70% !important;
}
.mbx-spotlight__meta {
    font-size: 12.5px !important;
    color: var(--h-text-2) !important;
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}
.mbx-spotlight__meta span { display: inline-flex !important; align-items: center !important; gap: 5px !important; }
.mbx-spotlight__meta b { color: var(--h-text) !important; font-weight: 600 !important; }
.mbx-chip {
    background: rgba(232, 163, 61, 0.14) !important;
    border: 1px solid rgba(232, 163, 61, 0.35) !important;
    color: var(--h-accent) !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    padding: 2px 9px !important;
    font-size: 12.5px !important;
}
.mbx-tag {
    color: var(--h-text-2) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--h-border-2) !important;
    border-radius: 999px !important;
    padding: 2px 10px !important;
    font-size: 12px !important;
}
.mbx-spotlight__btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: var(--h-accent) !important;
    color: var(--h-accent-ink) !important;
    font-family: var(--h-font-display) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    letter-spacing: 0.04em !important;
    padding: 13px 28px !important;
    border-radius: 999px !important;
    margin-top: 16px !important;
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease !important;
    box-shadow: 0 6px 24px rgba(232, 163, 61, 0.28) !important;
}
.mbx-spotlight__btn:hover { background: var(--h-accent-2) !important; transform: translateY(-2px) !important; box-shadow: 0 10px 30px rgba(232, 163, 61, 0.4) !important; }

@media (max-width: 760px) {
    .mbx-spotlight__media { aspect-ratio: 16 / 9 !important; }
    .mbx-spotlight__title { max-width: 100% !important; font-size: 19px !important; }
    .mbx-spotlight__body { padding: 14px 16px !important; }
}

/* ============================================================
   WATCH PAGE — media player, description, actions
   ============================================================ */
.media__inner, .box__inner {
    background: var(--h-surface) !important;
    border: 1px solid var(--h-border) !important;
    border-radius: var(--h-radius) !important;
}
.mhead__h {
    font-size: clamp(18px, 2.4vw, 26px) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: var(--h-text) !important;
}

/* Visit Source — amber primary */
.btn-visit-source {
    background: var(--h-accent) !important;
    color: var(--h-accent-ink) !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 7px 16px !important;
    font-family: var(--h-font-display) !important;
    font-weight: 700 !important;
    font-size: 12.5px !important;
    letter-spacing: 0.03em !important;
}
.btn-visit-source:hover { background: var(--h-accent-2) !important; color: var(--h-accent-ink) !important; }

/* description + tags */
.main-info, .expandable__inner, .tab__inner {
    color: var(--h-text-2) !important;
    font-size: 14px !important;
}
.tag-list__li a {
    color: var(--h-text-2) !important;
    background: var(--h-surface-2) !important;
    border: 1px solid var(--h-border) !important;
    border-radius: 999px !important;
    padding: 3px 12px !important;
    font-size: 12.5px !important;
    transition: color .15s ease, border-color .15s ease !important;
}
.tag-list__li a:hover { color: var(--h-accent) !important; border-color: var(--h-accent) !important; }

/* ============================================================
   FOOTER — quiet, hairline top, 3 zones
   ============================================================ */
.footer, footer, .footer-sec {
    background: var(--h-surface) !important;
    border-top: 1px solid var(--h-border) !important;
    padding: 34px 0 !important;
    margin-top: 40px !important;
    color: var(--h-text-2) !important;
    font-size: 13px !important;
}
.footer a, footer a {
    color: var(--h-text-2) !important;
    text-decoration: none !important;
    transition: color .15s ease !important;
}
.footer a:hover, footer a:hover { color: var(--h-accent) !important; }

/* ============================================================
   MISC — pagination, badges, empty states, ads
   ============================================================ */
.pagination, .pagination-list { gap: 6px !important; }
.pagination a, .pagination-list li a, .pagination .btn {
    background: var(--h-surface-2) !important;
    border: 1px solid var(--h-border) !important;
    border-radius: 8px !important;
    color: var(--h-text-2) !important;
    min-width: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 600 !important;
    font-size: 13px !important;
}
.pagination a:hover, .pagination .is-active, .pagination-list li.is-active a {
    background: var(--h-accent) !important;
    color: var(--h-accent-ink) !important;
    border-color: var(--h-accent) !important;
}
/* pagination icon glyphs (arrows) render as tofu — hide glyph, keep the button */
.pagination .icon, .pagination-list .icon { display: none !important; }

/* empty sections — HIDE, never ship blank boxes */
.regular-sec .box:empty,
.regular-sec [class*="widget"]:empty,
.box__bd:empty { display: none !important; }

/* stock ad blocks — hide the pink house ads entirely (no real ad tags yet);
   real ad slots stay visible once filled */
/* ============================================================
   AD SLOTS — restyled as clearly-labeled premium units.
   Stock pink Mechbunny placeholder PNGs ("Ads by mechbunny") are
   hidden — honest UI shows a real "advertisement" placeholder,
   not fake content, ready to swap in a real network tag later.
   4 live slots: bottom banner (3-up), sidebar (3 stacked, video/
   gallery pages), in-grid native card (home grid only). Top slot
   stays PHP-commented (unused) — no CSS needed for it.
   ============================================================ */

.aff {
    background: var(--h-surface) !important;
    border: 1px solid var(--h-border) !important;
    border-radius: var(--h-radius) !important;
    overflow: hidden !important;
    position: relative !important;
    transition: border-color .15s ease, transform .15s ease !important;
}
.aff:hover { border-color: var(--h-border-2) !important; transform: translateY(-1px) !important; }
.aff__inner { padding: 0 !important; height: 100% !important; }
.aff__link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 96px !important;
    height: 100% !important;
    background: linear-gradient(135deg, var(--h-surface) 0%, var(--h-surface-3) 100%) !important;
    position: relative !important;
}
/* stock pink placeholder art — hidden, not shipped */
.aff__img { display: none !important; }
.aff__desc { display: none !important; }
/* honest label + placeholder copy, drawn via CSS so no fabricated ad content ships */
.aff::before {
    content: "ADVERTISEMENT";
    position: absolute; top: 8px; left: 12px; z-index: 1;
    font-size: 10px; letter-spacing: .14em; font-weight: 700;
    color: var(--h-muted) !important;
}
.aff__link::after {
    content: "Ad space available";
    color: var(--h-muted) !important;
    font-size: 12px; opacity: .55; letter-spacing: .02em;
}

/* bottom banner row (home + video footer) — 3-up */
.inline-aff-sec { padding: 28px 0 !important; border-top: 1px solid var(--h-border) !important; }
.inline-aff-sec .aff col, .inline-aff-sec .aff { min-height: 90px !important; }

/* sidebar stack (video/gallery pages) — vertical rhythm */
aside.aside .aff { margin-bottom: 16px !important; }
aside.aside .aff .aff__link { min-height: 250px !important; }

/* in-grid native ad card (home grid, index only) — match the 16:9 card
   grid instead of a stray small box; tagged "Sponsored" not "Ad" since
   it lives inside the content grid, not a banner rail */
.item.col.-aff, .item[data-mb="ad-in-items"] { display: block !important; }
.item.col.-aff .aff.col.-in-items,
[data-mb="ad-in-items"] .aff.col.-in-items { height: 100% !important; }
.item.col.-aff .aff__link,
[data-mb="ad-in-items"] .aff__link { aspect-ratio: 16/9 !important; min-height: 0 !important; height: auto !important; }
.item.col.-aff .aff::before,
[data-mb="ad-in-items"] .aff::before { content: "SPONSORED"; }

/* scrollbar (webkit) — dark */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--h-bg); }
::-webkit-scrollbar-thumb { background: var(--h-surface-3); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--h-border-2); }

/* focus visible — a11y */
:focus-visible {
    outline: 2px solid var(--h-accent) !important;
    outline-offset: 2px !important;
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}