/* Space Gate Nova - Commercial launch polish v2.41.0
   Final layer: scrolling, responsiveness, purple identity and launch-ready account/settings UI. */
:root {
    --oscar-purple: #9B4DFF;
    --oscar-purple-2: #14D7FF;
    --oscar-cyan: #14D7FF;
    --accent: #9B4DFF;
    --nova-bg: #070510;
    --nova-surface: rgba(17, 14, 28, .92);
    --nova-border: rgba(199, 152, 255, .16);
    --bottom-nav-h: 66px;
}

html,
body,
#app,
.app-root {
    width: 100% !important;
    min-height: 100dvh !important;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    background: var(--nova-bg) !important;
}

body.sg-player-open { overflow: hidden !important; }

.oscar-app,
.oscar-main,
.native-view,
.target-home-reference,
.shahid-home-reference,
.catalog-page,
.settings-page,
.commercial-settings-page,
.commercial-account {
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    overscroll-behavior-y: auto !important;
    touch-action: pan-y !important;
}

.oscar-app {
    padding-bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 18px) !important;
    background:
        radial-gradient(circle at 14% 0%, rgba(155, 77, 255, .18), transparent 32%),
        radial-gradient(circle at 92% 10%, rgba(20, 215, 255, .08), transparent 30%),
        linear-gradient(180deg, #090610 0%, #06050b 52%, #090610 100%) !important;
    --accent: var(--oscar-purple) !important;
}

.shahid-home-reference {
    overflow: visible !important;
    padding-bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 28px) !important;
    background: #090610 !important;
}

/* Remove the old top text tabs requested for launch. */
.nova-top-tabs { display: none !important; }

.oscar-toolbar {
    height: calc(62px + var(--safe-top)) !important;
    padding: var(--safe-top) 12px 0 !important;
    background: linear-gradient(180deg, rgba(6,5,12,.96), rgba(6,5,12,.56), transparent) !important;
    border-bottom: 0 !important;
    backdrop-filter: none !important;
}

.oscar-toolbar:not(.home-toolbar) {
    background: rgba(7,5,14,.94) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.28) !important;
}

.catalog-header-spacer { height: calc(62px + var(--safe-top)) !important; }

.compact-brand-button,
.nova-header-logo {
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    border-radius: 13px !important;
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.26) !important;
}
.compact-brand-button img,
.nova-header-logo img { width: 100% !important; height: 100% !important; border-radius: inherit !important; object-fit: cover !important; }

.toolbar-actions .icon-button,
.oscar-toolbar .icon-button {
    width: 38px !important;
    height: 38px !important;
}

.home-subscribe-cta {
    right: auto !important;
    left: 14px !important;
    bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 12px) !important;
    min-height: 38px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    font-size: .78rem !important;
    background: linear-gradient(135deg, #9B4DFF, #14D7FF) !important;
    box-shadow: 0 10px 26px rgba(155,77,255,.26) !important;
}

.oscar-bottom-nav {
    height: calc(var(--bottom-nav-h) + var(--safe-bottom)) !important;
    padding: 4px 2px var(--safe-bottom) !important;
    background: rgba(6,5,12,.985) !important;
    border-top-color: rgba(199,152,255,.10) !important;
}
.oscar-bottom-nav button, .oscar-bottom-nav a { flex-basis: 60px !important; min-width: 60px !important; gap: 2px !important; }
.oscar-bottom-nav .oscar-icon { width: 23px !important; height: 23px !important; }
.oscar-bottom-nav b { font-size: .56rem !important; }
.oscar-bottom-nav button.active, .oscar-bottom-nav a.active { color: #caa7ff !important; }
.oscar-bottom-nav button.active .nav-icon, .oscar-bottom-nav a.active .nav-icon { filter: drop-shadow(0 4px 10px rgba(155,77,255,.45)) !important; }

/* Smooth but light interactions: no heavy blur or scroll-jank. */
* { -webkit-tap-highlight-color: transparent !important; }
button,
a,
[role="button"],
.oscar-card,
.shahid-short-card,
.shahid-person-card,
.shahid-ranked-card,
.shahid-poster-card,
.shahid-landscape-card,
.series-standard-card,
.series-feature-card,
.catalog-showcase,
.match-card {
    touch-action: manipulation !important;
    user-select: none !important;
    cursor: pointer;
}
button:active,
[role="button"]:active,
.oscar-card:active,
.shahid-short-card:active,
.shahid-poster-card:active,
.shahid-landscape-card:active,
.series-standard-card:active,
.series-feature-card:active,
.catalog-showcase:active,
.match-card:active {
    transform: scale(.985);
    transition: transform .08s ease-out !important;
}

.target-home-hero-rail,
.target-match-rail,
.target-program-rail,
.target-episode-rail,
.poster-rail,
.shahid-rail,
.category-tabs,
.filter-panel {
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-inline: contain !important;
    touch-action: pan-x pan-y !important;
}

.safe-image,
.safe-background-image {
    background-color: #000000 !important;
}

/* Purple commercial palette overrides. */
.target-watch-button,
.catalog-watch,
.series-watch-button,
.primary-action,
.primary-sync-button,
.commercial-settings-button.primary {
    background: linear-gradient(135deg, #F04AD8 0%, #9B4DFF 48%, #14D7FF 100%) !important;
    box-shadow: 0 12px 30px rgba(155,77,255,.24) !important;
}

.target-save-button {
    border: 3px solid transparent !important;
    background:
        linear-gradient(rgba(0,0,0,.72), rgba(0,0,0,.72)) padding-box,
        linear-gradient(100deg, #F04AD8 0%, #9B4DFF 48%, #14D7FF 100%) border-box !important;
}

.outline-action,
.commercial-settings-button {
    border-color: rgba(155,77,255,.28) !important;
}

.shahid-home-reference .target-hero-status::before,
.shahid-brand-mark i:nth-child(1),
.shahid-brand-mark i:nth-child(2),
.shahid-brand-mark i:nth-child(3) {
    background: linear-gradient(135deg, #F04AD8 0%, #9B4DFF 48%, #14D7FF 100%) !important;
}

.shahid-home-reference .target-hero-dots button.active,
.shahid-home-reference .target-watch-button {
    background: linear-gradient(135deg, #F04AD8 0%, #9B4DFF 48%, #14D7FF 100%) !important;
}

.shahid-home-reference .target-save-button {
    border: 3px solid transparent !important;
    background: linear-gradient(rgba(0,0,0,.72), rgba(0,0,0,.72)) padding-box, linear-gradient(100deg, #F04AD8 0%, #9B4DFF 48%, #14D7FF 100%) border-box !important;
}

/* Launch-ready settings screen. */
.commercial-settings-page {
    padding: 0 14px 132px !important;
    color: #fbf9ff;
    background:
        radial-gradient(circle at 10% 0, rgba(155,77,255,.20), transparent 32%),
        radial-gradient(circle at 90% 8%, rgba(20,215,255,.08), transparent 30%);
}
.commercial-settings-hero {
    min-height: 154px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 22px;
    border-radius: 26px;
    border: 1px solid var(--nova-border);
    background: linear-gradient(135deg, rgba(26,14,42,.96), rgba(8,7,15,.96));
    box-shadow: 0 20px 48px rgba(0,0,0,.30), inset 0 1px rgba(255,255,255,.06);
}
.commercial-settings-hero span { color: #c7b8df; letter-spacing: 1.5px; font-size: .72rem; }
.commercial-settings-hero h2 { margin: 6px 0 7px; font-size: clamp(1.45rem, 4vw, 2.25rem); line-height: 1.05; font-weight: 950; }
.commercial-settings-hero p { margin: 0; color: #b8b2c8; line-height: 1.7; }
.commercial-settings-hero > .oscar-icon { color: #caa7ff; }
.commercial-settings-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 14px; margin-top: 14px; }
.commercial-setting-card {
    min-width: 0;
    padding: 18px;
    border-radius: 24px;
    border: 1px solid var(--nova-border);
    background: linear-gradient(155deg, rgba(18,16,29,.90), rgba(8,8,16,.95));
    box-shadow: 0 18px 42px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.045);
}
.commercial-setting-card.wide { grid-row: span 2; }
.commercial-setting-card header { display: flex; align-items: center; gap: 11px; margin-bottom: 13px; }
.commercial-setting-card header > .oscar-icon { color: #caa7ff; }
.commercial-setting-card header b,
.commercial-setting-card header small { display: block; }
.commercial-setting-card header b { color: #fff; font-size: 1.05rem; font-weight: 950; }
.commercial-setting-card header small { margin-top: 3px; color: #9e96b3; font-size: .74rem; }
.commercial-setting-card label {
    min-height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid rgba(255,255,255,.055);
}
.commercial-setting-card label:first-of-type { border-top: 0; }
.commercial-setting-card label b,
.commercial-setting-card label small { display: block; }
.commercial-setting-card label b { color: #f8f4ff; font-size: .92rem; }
.commercial-setting-card label small { margin-top: 4px; color: #9890a9; line-height: 1.55; font-size: .72rem; }
.commercial-setting-card input[type="checkbox"] { width: 48px; height: 27px; accent-color: #9B4DFF; }
.commercial-setting-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 4px 0 12px; }
.commercial-setting-stats div { padding: 12px; border-radius: 15px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.06); }
.commercial-setting-stats span,
.commercial-setting-stats strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.commercial-setting-stats span { color: #8f889d; font-size: .70rem; }
.commercial-setting-stats strong { margin-top: 5px; font-size: .83rem; }
.commercial-settings-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.commercial-settings-button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    border-radius: 14px;
    border: 1px solid rgba(199,152,255,.18);
    background: rgba(255,255,255,.06);
    color: #fff;
    font-weight: 900;
}
.commercial-settings-button.subtle { color: #cbbfe0; background: rgba(255,255,255,.035); }
.commercial-settings-button:disabled { opacity: .58; }
.commercial-mini-status,
.commercial-settings-note { margin: 11px 0; padding: 11px 12px; border-radius: 14px; background: rgba(155,77,255,.10); color: #d8cef0; }
.commercial-mini-status { display: flex; align-items: center; gap: 10px; }
.commercial-mini-status strong,
.commercial-mini-status small { display: block; }
.commercial-mini-status small { margin-top: 2px; color: #a89db8; }

@media (max-width: 820px) {
    .commercial-settings-grid { grid-template-columns: 1fr; }
    .commercial-setting-card.wide { grid-row: auto; }
}
@media (max-width: 560px) {
    .oscar-toolbar { height: calc(56px + var(--safe-top)) !important; }
    .catalog-header-spacer { height: calc(56px + var(--safe-top)) !important; }
    .commercial-settings-page { padding-inline: 10px !important; }
    .commercial-settings-hero { min-height: 130px; padding: 18px; border-radius: 22px; }
    .commercial-settings-hero > .oscar-icon { display: none; }
    .commercial-setting-card { padding: 15px; border-radius: 21px; }
    .commercial-setting-card label { min-height: 58px; }
    .commercial-setting-stats { grid-template-columns: 1fr; }
    .commercial-settings-button { flex: 1 1 100%; }
}


/* v2.42.0: commercial empty states, reliable vertical scrolling, and lighter rendering. */
html,
body {
    position: static !important;
    scroll-behavior: auto !important;
    scrollbar-gutter: stable both-edges;
}

#app {
    display: block !important;
    min-height: 100dvh !important;
    overflow: visible !important;
}

.oscar-main.native-view {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-height: calc(100dvh - var(--bottom-nav-h) - var(--safe-bottom)) !important;
    padding-bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 48px) !important;
    overflow: visible !important;
    will-change: auto !important;
}

.catalog-page,
.channels-catalog,
.commercial-settings-page,
.commercial-account,
.favorites-page,
.schedule-page {
    padding-bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 72px) !important;
}

.channel-grid,
.oscar-grid {
    contain: layout paint style;
}

.channel-grid > *,
.oscar-grid > *,
.poster-rail > *,
.shahid-rail > * {
    content-visibility: auto;
    contain-intrinsic-size: 260px 180px;
}

.catalog-inline-loader {
    min-height: 44vh !important;
    display: grid !important;
    place-items: center !important;
    gap: 12px !important;
    color: #d9cff0 !important;
    background:
        radial-gradient(circle at 50% 35%, rgba(155,77,255,.16), transparent 34%),
        linear-gradient(180deg, rgba(18,12,31,.60), rgba(7,5,13,.20)) !important;
}

.oscar-empty.nova-empty-state-pro,
.oscar-empty {
    min-height: clamp(360px, 58vh, 620px) !important;
    margin: 18px 12px calc(var(--bottom-nav-h) + var(--safe-bottom) + 28px) !important;
    padding: clamp(26px, 6vw, 48px) 18px !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 14px !important;
    text-align: center !important;
    border: 1px solid rgba(199,152,255,.16) !important;
    border-radius: 30px !important;
    background:
        radial-gradient(circle at 18% 0%, rgba(155,77,255,.24), transparent 32%),
        radial-gradient(circle at 82% 16%, rgba(20,215,255,.10), transparent 30%),
        linear-gradient(145deg, rgba(20,13,34,.95), rgba(7,6,14,.96)) !important;
    box-shadow: 0 22px 60px rgba(0,0,0,.30), inset 0 1px rgba(255,255,255,.06) !important;
    color: #fbf8ff !important;
}

.nova-empty-visual {
    width: 132px;
    height: 132px;
    position: relative;
    display: grid;
    place-items: center;
    margin-bottom: 4px;
    isolation: isolate;
}

.nova-empty-visual .screen {
    width: 84px;
    height: 84px;
    display: grid;
    place-items: center;
    border-radius: 27px;
    color: #ffffff;
    background: linear-gradient(135deg, rgba(155,77,255,.94), rgba(240,74,216,.90));
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 18px 46px rgba(155,77,255,.35), inset 0 1px rgba(255,255,255,.18);
    z-index: 2;
}

.nova-empty-visual .orbital {
    position: absolute;
    inset: 11px;
    border-radius: 999px;
    border: 1px solid rgba(202,167,255,.22);
    transform: rotate(-18deg);
}
.nova-empty-visual .orbital.two {
    inset: 22px;
    border-color: rgba(20,215,255,.18);
    transform: rotate(28deg);
}
.nova-empty-visual .spark {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #caa7ff;
    box-shadow: 0 0 18px rgba(202,167,255,.70);
}
.nova-empty-visual .spark.a { top: 18px; right: 22px; }
.nova-empty-visual .spark.b { bottom: 26px; left: 16px; background: #14D7FF; }
.nova-empty-visual .spark.c { top: 44px; left: 8px; width: 5px; height: 5px; }

.oscar-empty strong {
    max-width: 680px;
    color: #ffffff !important;
    font-size: clamp(1.18rem, 4.5vw, 1.72rem) !important;
    font-weight: 950 !important;
    line-height: 1.25 !important;
}

.oscar-empty p {
    max-width: 620px;
    margin: 0 !important;
    color: #bdb4cf !important;
    font-size: .96rem !important;
    line-height: 1.8 !important;
}

.nova-empty-action {
    min-height: 46px;
    margin-top: 6px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    font-weight: 950;
    background: linear-gradient(135deg, #9B4DFF, #14D7FF);
    box-shadow: 0 14px 34px rgba(155,77,255,.30);
}

.nova-empty-state-pro[data-state="connection"] .screen {
    background: linear-gradient(135deg, rgba(240,74,216,.94), rgba(20,215,255,.88));
}

@media (max-width: 560px) {
    .oscar-empty.nova-empty-state-pro,
    .oscar-empty {
        min-height: 52vh !important;
        margin-inline: 9px !important;
        border-radius: 24px !important;
    }
    .nova-empty-visual { width: 110px; height: 110px; }
    .nova-empty-visual .screen { width: 72px; height: 72px; border-radius: 23px; }
}


/* v2.44 commercial taxonomy map: visible Nova2-compatible sections on every main catalog landing. */
.nova2-primary-section-map{
    margin:18px 16px 22px;
    padding:16px;
    border:1px solid rgba(174,84,255,.28);
    border-radius:28px;
    background:
        radial-gradient(circle at 92% 0%, rgba(155,77,255,.32), transparent 34%),
        linear-gradient(145deg, rgba(24,11,34,.94), rgba(8,8,12,.96));
    box-shadow:0 18px 45px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.05);
}
.nova2-map-heading{margin:0 0 14px!important;}
.nova2-map-heading h2{font-size:18px!important;color:#fff!important;}
.nova2-map-heading button{
    border:1px solid rgba(210,156,255,.35);
    background:rgba(155,77,255,.18);
    color:#ead7ff;
    border-radius:999px;
    padding:7px 12px;
}
.nova2-primary-section-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}
.nova2-primary-section-card{
    position:relative;
    overflow:hidden;
    min-height:112px;
    padding:13px 13px 12px;
    border:1px solid rgba(170,90,255,.24);
    border-radius:22px;
    background:
        radial-gradient(circle at 18% 12%, rgba(196,108,255,.20), transparent 26%),
        linear-gradient(145deg, rgba(36,19,53,.92), rgba(12,12,18,.94));
    color:#fff;
    text-align:right;
    box-shadow:0 10px 30px rgba(0,0,0,.28);
    touch-action:manipulation;
}
.nova2-primary-section-card::after{
    content:"";
    position:absolute;
    inset:auto -26px -34px auto;
    width:92px;
    height:92px;
    border-radius:50%;
    background:rgba(155,77,255,.22);
    filter:blur(2px);
}
.nova2-primary-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    border-radius:15px;
    background:linear-gradient(135deg, #F04AD8, #9B4DFF);
    box-shadow:0 8px 18px rgba(155,77,255,.34);
    margin-bottom:10px;
}
.nova2-primary-section-card strong{display:block;font-size:15px;line-height:1.25;margin-bottom:4px;}
.nova2-primary-section-card small{display:block;color:rgba(245,235,255,.74);font-size:11px;line-height:1.35;min-height:30px;}
.nova2-primary-section-card em{
    display:inline-flex;
    margin-top:8px;
    font-style:normal;
    color:#fff;
    font-size:10px;
    padding:4px 8px;
    border-radius:999px;
    background:rgba(255,255,255,.10);
}
@media (min-width:720px){.nova2-primary-section-grid{grid-template-columns:repeat(4,minmax(0,1fr));}.nova2-primary-section-card{min-height:122px;}}
.season-switcher{display:flex;gap:10px;overflow-x:auto;padding:4px 0 13px;scrollbar-width:none;touch-action:pan-x pan-y;}
.season-switcher button{
    flex:0 0 auto;
    min-width:118px;
    border:1px solid rgba(170,90,255,.24);
    border-radius:18px;
    padding:11px 12px;
    color:#fff;
    background:rgba(255,255,255,.06);
    text-align:right;
}
.season-switcher button.active{
    background:linear-gradient(135deg, rgba(155,77,255,.96), rgba(20,215,255,.94));
    box-shadow:0 12px 24px rgba(155,77,255,.28);
}
.season-switcher button strong{display:block;font-size:13px;}
.season-switcher button small{display:block;color:rgba(255,255,255,.72);font-size:11px;margin-top:3px;}

/* FIX: My List hero button stays transparent; only the frame carries the screenshot purple/blue color. */
.shahid-home-reference .target-save-button,
.shahid-home-reference .target-save-button.saved,
.shahid-home-reference .target-save-button:hover,
.shahid-home-reference .target-save-button:focus,
.shahid-home-reference .target-save-button:active,
.target-save-button,
.target-save-button.saved,
.target-save-button:hover,
.target-save-button:focus,
.target-save-button:active,
.hero-list-button,
.hero-list-button:hover,
.hero-list-button:focus,
.hero-list-button:active {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    color: #ffffff !important;
    border: 0 !important;
    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.28), 0 0 18px rgba(155,77,255,.18) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.shahid-home-reference .target-save-button::before,
.shahid-home-reference .target-save-button.saved::before,
.shahid-home-reference .target-save-button:hover::before,
.shahid-home-reference .target-save-button:focus::before,
.shahid-home-reference .target-save-button:active::before,
.target-save-button::before,
.target-save-button.saved::before,
.target-save-button:hover::before,
.target-save-button:focus::before,
.target-save-button:active::before,
.hero-list-button::before,
.hero-list-button:hover::before,
.hero-list-button:focus::before,
.hero-list-button:active::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    padding: 3px;
    pointer-events: none;
    background: linear-gradient(100deg, #F04AD8 0%, #9B4DFF 48%, #14D7FF 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
}

.shahid-home-reference .target-save-button > *,
.shahid-home-reference .target-save-button span,
.shahid-home-reference .target-save-button .oscar-icon,
.shahid-home-reference .target-save-button svg,
.target-save-button > *,
.target-save-button span,
.target-save-button .oscar-icon,
.target-save-button svg,
.hero-list-button > *,
.hero-list-button span,
.hero-list-button .oscar-icon,
.hero-list-button svg {
    position: relative;
    z-index: 1;
    background: transparent !important;
    background-image: none !important;
}

@supports not (-webkit-mask-composite: xor) {
    .shahid-home-reference .target-save-button::before,
    .shahid-home-reference .target-save-button.saved::before,
    .shahid-home-reference .target-save-button:hover::before,
    .shahid-home-reference .target-save-button:focus::before,
    .shahid-home-reference .target-save-button:active::before,
    .target-save-button::before,
    .target-save-button.saved::before,
    .target-save-button:hover::before,
    .target-save-button:focus::before,
    .target-save-button:active::before,
    .hero-list-button::before,
    .hero-list-button:hover::before,
    .hero-list-button:focus::before,
    .hero-list-button:active::before {
        padding: 0;
        border: 3px solid #8E44FF;
        background: transparent;
        -webkit-mask: none;
        mask: none;
    }
}