<!DOCTYPE html>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
	<title>Greatest Hits &#8211; Explore the latest music, events, photos and updates from the Bassnectar project. Unlock over 25 years of bass in the Bassnectar Vaults.</title>
<meta name='robots' content='max-image-preview:large' />
    <script data-cfasync="false" id="bn-cache-auth-fix">
    (function(){
        try {
            if (window.location.search.indexOf("_bn_auth=") !== -1) return;
            var hasCookie = document.cookie.indexOf("bn_logged_in") !== -1;
            (function ck(){
                if (!document.body) return requestAnimationFrame(ck);
                var pageLoggedIn = document.body.classList.contains("logged-in");
                if (hasCookie === pageLoggedIn) return;

                // Mismatch — try a cache-busting reload, but cap attempts
                // so a stale bn_logged_in cookie cannot trap the user in
                // an infinite reload loop with a server that keeps
                // returning the logged-out page (PWA force-quit case).
                var KEY = "bn_cache_auth_attempt";
                var attempts = 0;
                try { attempts = parseInt(sessionStorage.getItem(KEY) || "0", 10); } catch (e) {}
                if (attempts >= 1) {
                    // Cookie and server disagree even after one reload.
                    // The cookie is stale — clear it so the page can
                    // settle in its true (logged-out) state.
                    if (hasCookie && !pageLoggedIn) {
                        document.cookie = "bn_logged_in=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
                    }
                    try { sessionStorage.removeItem(KEY); } catch (e) {}
                    return;
                }
                try { sessionStorage.setItem(KEY, String(attempts + 1)); } catch (e) {}

                var u = window.location.href.replace(/[?&]_bn_auth=\d+/, "");
                var s = u.indexOf("?") !== -1 ? "&" : "?";
                window.location.replace(u + s + "_bn_auth=" + Date.now());
            })();
        } catch (e) {
            // Any unexpected failure: fall through silently. Better to
            // render a possibly-stale page than to trap the user.
        }
    })();
    </script>
        <style id="bn-header-css">
    /* ========================================
       BN Header — Veeps-inspired
       ======================================== */

    /* Holo image fallback — overridden per-skin via bn_build_skin_vars */
    :root {
        --bn-holo-image: url("https://bassnectar.net/wp-content/themes/sonaar-child/assets/tiny-holo.jpg");
    }

    .bn-site-header,
    .bn-site-header *,
    .bn-slide-menu,
    .bn-slide-menu * {
        font-family: "Helvetica", Sans-serif;
        box-sizing: border-box;
    }

    .bn-site-header {
        width: 100%;
        z-index: 9999;
        position: relative;
        isolation: isolate;
        pointer-events: none; /* let clicks pass through the gradient shadow overflow */
    }

    /* Mobile: ensure header renders ABOVE the WP admin bar (z-index: 99999) */
    @media screen and (max-width: 782px) {
        .admin-bar .bn-site-header {
            z-index: 100000;
        }
    }

    /* ========================================
       Dynamic Skin Styles — generated from admin settings
       ======================================== */
    .bn-site-header.bn-style-transparent::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(10,10,10,0.5);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    z-index: -2;
}
.bn-site-header.bn-style-transparent::after {
    content: '';
    position: absolute;
    inset: 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    pointer-events: none;
    z-index: -1;
}
.bn-site-header.bn-style-transparent, .bn-site-header.bn-style-transparent * { color: #ffffff; }
.bn-site-header.bn-style-dark {
    background: #0a0a0a;
    border-bottom: 1px solid #ffffff;
}
.bn-site-header.bn-style-dark, .bn-site-header.bn-style-dark * { color: #ffffff; }
.bn-site-header.bn-style-liquid_glass .bn-glass-container {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.bn-site-header.bn-style-liquid_glass .bn-glass-filter {
    position: absolute;
    inset: -30px -50px;
    width: calc(100% + 100px);
    height: calc(100% + 60px);
    background: rgba(82,82,82,0.55);
    -webkit-backdrop-filter: blur(3px) saturate(1.2) brightness(0.9);
    backdrop-filter: blur(3px) saturate(1.2) brightness(0.9);
    filter: url("#bn-liquid-glass-filter") saturate(1.2) brightness(1.2);
}
.bn-site-header.bn-style-liquid_glass .bn-glass-overlay {
    position: absolute;
    inset: 0;
    background: rgba(82,82,82,0.35);
    box-shadow: inset -2px 16px 50px 0px rgba(49, 49, 49, 0.45), inset 5px 15px 20px 0px rgba(3, 3, 3, 0.33);
}
.bn-site-header.bn-style-liquid_glass::before { content: none !important; display: none !important; }
.bn-site-header.bn-style-liquid_glass .bn-glass-specular {
    position: absolute;
    inset: 0;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    border-top: 1px solid rgba(255,255,255,0.08);
    box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.07), inset 0 -1px 0 0 rgba(255,255,255,0.03), 0 1px 3px 0 rgba(0,0,0,0.15);
    pointer-events: none;
}
.bn-site-header.bn-style-custom-gold .bn-glass-container {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.bn-site-header.bn-style-custom-gold .bn-glass-filter {
    position: absolute;
    inset: -30px -50px;
    width: calc(100% + 100px);
    height: calc(100% + 60px);
    background: rgba(64,64,64,0.55);
    -webkit-backdrop-filter: blur(20px) saturate(1.2) brightness(0.9);
    backdrop-filter: blur(20px) saturate(1.2) brightness(0.9);
    filter: url("#bn-liquid-glass-filter") saturate(1.2) brightness(1.2);
}
.bn-site-header.bn-style-custom-gold .bn-glass-overlay {
    position: absolute;
    inset: 0;
    background: rgba(64,64,64,0.35);
    box-shadow: inset -2px 16px 50px 0px rgba(49, 49, 49, 0.45), inset 5px 15px 20px 0px rgba(3, 3, 3, 0.33);
}
.bn-site-header.bn-style-custom-gold::before { content: none !important; display: none !important; }
.bn-site-header.bn-style-custom-gold .bn-glass-specular {
    position: absolute;
    inset: 0;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    border-top: 1px solid rgba(255,255,255,0.08);
    box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.07), inset 0 -1px 0 0 rgba(255,255,255,0.03), 0 1px 3px 0 rgba(0,0,0,0.15);
    pointer-events: none;
}
body.bn-skin-dark {
    --bn-skin-type: solid;
    --bn-solid-bg: #0a0a0a;
    --bn-solid-accent: #ffffff;
    --bn-solid-text: #ffffff;
    --bn-solid-border: rgba(255,255,255,0.1);
    --bn-holo-image: url("https://bassnectar.net/wp-content/themes/sonaar-child/assets/tiny-holo.jpg");
}
body.bn-skin-transparent {
    --bn-skin-type: transparent;
    --bn-transparent-blur: 20px;
    --bn-transparent-saturate: 180%;
    --bn-transparent-overlay: rgba(10,10,10,0.5);
    --bn-transparent-bg: rgba(10,10,10,0.5);
    --bn-transparent-border: rgba(255,255,255,0.08);
    --bn-transparent-text: #ffffff;
    --bn-holo-image: url("https://bassnectar.net/wp-content/themes/sonaar-child/assets/tiny-holo.jpg");
}
body.bn-skin-liquid_glass {
    --bn-skin-type: liquid_glass;
    --bn-glass-color: rgba(82,82,82,0.55);
    --bn-glass-blur: 3px;
    --bn-glass-wobble: 250;
    --bn-glass-overlay: rgba(82,82,82,0.35);
    --bn-glass-accent1: #ffb8ea;
    --bn-glass-accent2: #a4ffef;
    --bn-glass-accent3: #a896ff;
    --bn-glass-accent1-50: rgba(255,184,234,0.5);
    --bn-glass-accent2-50: rgba(164,255,239,0.6);
    --bn-glass-accent3-50: rgba(168,150,255,0.5);
    --bn-glass-accent1-solid: rgb(255,184,234);
    --bn-glass-accent2-solid: rgb(164,255,239);
    --bn-glass-accent3-solid: rgb(168,150,255);
    --bn-glass-composed-bg: rgba(82,82,82,0.55);
    --bn-holo-image: url("https://bassnectar.net/wp-content/themes/sonaar-child/assets/tiny-holo.jpg");
}
body.bn-skin-omakase {
    --bn-skin-type: liquid_glass;
    --bn-glass-color: rgba(82,82,82,0.55);
    --bn-glass-blur: 3px;
    --bn-glass-wobble: 250;
    --bn-glass-overlay: rgba(82,82,82,0.35);
    --bn-glass-accent1: #ffb8ea;
    --bn-glass-accent2: #a4ffef;
    --bn-glass-accent3: #a896ff;
    --bn-glass-accent1-50: rgba(255,184,234,0.5);
    --bn-glass-accent2-50: rgba(164,255,239,0.6);
    --bn-glass-accent3-50: rgba(168,150,255,0.5);
    --bn-glass-accent1-solid: rgb(255,184,234);
    --bn-glass-accent2-solid: rgb(164,255,239);
    --bn-glass-accent3-solid: rgb(168,150,255);
    --bn-glass-composed-bg: rgba(82,82,82,0.55);
    --bn-holo-image: url("https://bassnectar.net/wp-content/themes/sonaar-child/assets/tiny-holo.jpg");
}
body.bn-skin-custom-vaults {
    --bn-skin-type: solid;
    --bn-solid-bg: #000000;
    --bn-solid-accent: #666666;
    --bn-solid-text: #ffffff;
    --bn-solid-border: rgba(255,255,255,0.1);
    --bn-solid-composed-bg: url('https://bassnectar.net/wp-content/uploads/ReliveRemix11BLANK-ART-scaled.jpg'), #000000;
    --bn-solid-bg-size: cover;
    --bn-solid-bg-position: center;
    --bn-holo-image: url("https://bassnectar.net/wp-content/themes/sonaar-child/assets/tiny-holo.jpg");
}
body.bn-skin-custom-gold {
    --bn-skin-type: liquid_glass;
    --bn-glass-color: rgba(64,64,64,0.55);
    --bn-glass-blur: 20px;
    --bn-glass-wobble: 250;
    --bn-glass-overlay: rgba(64,64,64,0.35);
    --bn-glass-accent1: #ffb8ea;
    --bn-glass-accent2: #a4ffef;
    --bn-glass-accent3: #a896ff;
    --bn-glass-accent1-50: rgba(255,184,234,0.5);
    --bn-glass-accent2-50: rgba(164,255,239,0.6);
    --bn-glass-accent3-50: rgba(168,150,255,0.5);
    --bn-glass-accent1-solid: rgb(255,184,234);
    --bn-glass-accent2-solid: rgb(164,255,239);
    --bn-glass-accent3-solid: rgb(168,150,255);
    --bn-glass-composed-bg: rgba(64,64,64,0.55);
    --bn-holo-image: url("https://bassnectar.net/wp-content/uploads/gold-bg.jpg");
}

    /* Video background inside header */
    .bn-header-bg-video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: -3;
        pointer-events: none;
        opacity: 0.4;
    }

    /* ========================================
       Gradient shadow (transparent + liquid glass only)
       ======================================== */
    .bn-site-header > .bn-header-gradient-shadow {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 200px;
        background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.18) 45%, transparent 100%);
        pointer-events: none;
        z-index: -3;
    }

    .bn-header-sticky {
        position: fixed !important;
        top: 0;
        left: 0;
    }

    .bn-header-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 60px;
        padding: 0 20px;
        position: relative;
        z-index: 1;
        max-width: 100%;
        pointer-events: auto; /* re-enable clicks on the actual header bar */
    }

    /* ---- LEFT: Back + Logo ---- */
    .bn-header-left {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .bn-header-back-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        background: rgba(255,255,255,0.08);
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 50%;
        color: rgba(255,255,255,0.85);
        cursor: pointer;
        transition: all 0.2s;
        padding: 0;
        flex-shrink: 0;
    }
    .bn-header-back-btn:hover {
        background: rgba(255,255,255,0.15);
        color: #fff;
    }
    .bn-header-back-btn svg {
        margin-left: -1px;
    }

    .bn-hamburger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        width: 36px;
        height: 36px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 6px;
        border-radius: 4px;
        transition: background 0.2s ease;
    }

    .bn-hamburger:hover {
        background: rgba(255,255,255,0.08);
    }

    .bn-hamburger-line {
        display: block;
        width: 20px;
        height: 2px;
        background: #ffffff;
        border-radius: 1px;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .bn-hamburger.active .bn-hamburger-line:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    .bn-hamburger.active .bn-hamburger-line:nth-child(2) {
        opacity: 0;
    }
    .bn-hamburger.active .bn-hamburger-line:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .bn-header-logo-link {
        display: flex;
        align-items: center;
        text-decoration: none;
    }

    .bn-header-logo {
        display: block;
        object-fit: contain;
    }

    .bn-header-site-title {
        font-size: 18px;
        font-weight: 700;
        color: #ffffff;
        letter-spacing: 0.5px;
        white-space: nowrap;
    }

    /* ---- CENTER: Icon/text nav ---- */
    .bn-header-center {
        display: flex;
        align-items: center;
        flex: 1;
        justify-content: center;
    }

    .bn-header-icon-nav {
        display: flex;
        align-items: center;
        gap: 8px;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .bn-header-icon-nav li {
        list-style: none;
    }

    .bn-header-icon-nav li a {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 6px 14px;
        color: rgba(255,255,255,0.75);
        text-decoration: none;
        font-size: 13px;
        font-weight: 500;
        border-radius: 6px;
        transition: color 0.2s ease, background 0.2s ease;
        white-space: nowrap;
    }

    .bn-header-icon-nav li a:hover,
    .bn-header-icon-nav li.current-menu-item a {
        color: #ffffff;
        background: rgba(255,255,255,0.08);
    }

    .bn-header-icon-nav li a img {
        width: 18px;
        height: 18px;
        object-fit: contain;
    }

    /* ---- RIGHT: Search + Auth + Hamburger ---- */
    .bn-header-right {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .bn-header-search-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        background: none;
        border: none;
        color: rgba(255,255,255,0.75);
        cursor: pointer;
        border-radius: 4px;
        transition: color 0.2s ease, background 0.2s ease;
    }

    .bn-header-search-toggle:hover {
        color: #ffffff;
        background: rgba(255,255,255,0.08);
    }

    .bn-header-account {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        color: rgba(255,255,255,0.75);
        text-decoration: none;
        border-radius: 50%;
        transition: color 0.2s ease, background 0.2s ease;
    }

    .bn-header-account:hover {
        color: #ffffff;
        background: rgba(255,255,255,0.08);
    }

    /* Radio button in header */
    .bn-header-radio-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        color: rgba(255,255,255,0.6);
        transition: color 0.2s, background 0.2s;
        text-decoration: none;
        pointer-events: auto;
    }
    .bn-header-radio-btn:hover {
        color: rgba(255,255,255,0.9);
        background: rgba(255,255,255,0.08);
    }
    .bn-header-radio-btn.bn-radio-active {
        color: #64b5f6;
    }
    .bn-radio-live-indicator {
        display: none;
        position: absolute;
        top: 4px;
        right: 4px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #64b5f6;
        animation: bn-radio-pulse 1.5s ease-in-out infinite;
    }
    .bn-header-radio-btn.bn-radio-active .bn-radio-live-indicator {
        display: block;
    }
    @keyframes bn-radio-pulse {
        0%, 100% { opacity: 1; transform: scale(1); }
        50% { opacity: 0.4; transform: scale(0.7); }
    }

    /* Cart icon in header — matches radio button style */
    #bn-shopify-cart-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        color: rgba(255,255,255,0.6);
        transition: color 0.2s, background 0.2s;
        cursor: pointer;
        pointer-events: auto;
    }
    #bn-shopify-cart-icon:hover {
        color: rgba(255,255,255,0.9);
        background: rgba(255,255,255,0.08);
    }
    #bn-shopify-cart-icon .bn-cart-badge {
        position: absolute;
        top: 2px;
        right: 2px;
        min-width: 16px;
        height: 16px;
        border-radius: 8px;
        background: #fff;
        color: #000;
        font-size: 10px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 3px;
        line-height: 1;
        pointer-events: none;
    }

    /* CTA Button — layout only; holo effect comes from style.css */
    .bn-header-cta-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        transition: opacity 0.25s ease;
        box-shadow: none !important;
    }

    .bn-header-cta-btn:hover {
        opacity: 0.7;
    }

    /* Text link (Sign In / Sign Out) */
    .bn-header-text-link {
        display: inline-flex;
        align-items: center;
        padding: 6px 4px;
        color: rgba(255,255,255,0.65);
        text-decoration: none;
        font-size: 12px;
        font-weight: 500;
        transition: color 0.2s ease;
        white-space: nowrap;
        letter-spacing: 0.2px;
    }

    .bn-header-text-link:hover {
        color: #ffffff;
        text-decoration: underline;
    }

    /* ========================================
       Inline Expanding Search
       ======================================== */
    .bn-inline-search {
        display: flex;
        align-items: center;
        position: relative;
    }

    .bn-inline-search-form {
        display: flex;
        align-items: center;
        width: 0;
        overflow: hidden;
        transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .bn-inline-search.active .bn-inline-search-form {
        width: 220px;
    }

    .bn-inline-search-input {
        width: 100%;
        background: rgba(255,255,255,0.08);
        border: 1px solid rgba(255,255,255,0.15);
        border-radius: 6px;
        padding: 7px 12px;
        font-size: 13px;
        color: #ffffff;
        outline: none;
        font-family: "Helvetica", Sans-serif;
        transition: border-color 0.2s ease;
    }

    .bn-inline-search-input::placeholder {
        color: rgba(255,255,255,0.35);
    }

    .bn-inline-search-input:focus {
        border-color: rgba(255,255,255,0.35);
    }

    .bn-inline-search.active .bn-header-search-toggle {
        color: #ffffff;
    }

    /* ========================================
       Slide-out Menu (ALWAYS from right, ALWAYS slide)
       ======================================== */
    .bn-menu-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.6);
        z-index: 100004;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .bn-menu-overlay.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .bn-slide-menu {
        position: fixed;
        top: 0;
        right: 0;
        width: 340px;
        max-width: 85vw;
        height: 100vh;
        height: 100dvh;
        /* Liquid glass background for slide-out panel */
        background: rgba(15, 15, 15, 0.65);
        -webkit-backdrop-filter: blur(32px) saturate(160%);
        backdrop-filter: blur(32px) saturate(160%);
        z-index: 100005;
        transform: translateX(100%);
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        /* Specular edge highlight on the left side */
        border-left: 1px solid rgba(255,255,255,0.08);
        box-shadow:
            inset 1px 0 0 0 rgba(255,255,255,0.05),
            -8px 0 40px rgba(0,0,0,0.4);
        /* Override any theme transitions that may cause fade/ghost */
        animation: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: none;
    }

    .bn-slide-menu.active {
        transform: translateX(0);
        pointer-events: auto;
    }

    .bn-slide-menu-header {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 16px 24px;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        flex-shrink: 0;
    }

    .bn-slide-menu-title {
        font-size: 14px;
        font-weight: 600;
        color: rgba(255,255,255,0.5);
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .bn-slide-menu-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        background: none;
        border: none;
        color: rgba(255,255,255,0.6);
        cursor: pointer;
        border-radius: 4px;
        transition: color 0.2s ease, background 0.2s ease;
        pointer-events: none !important; /* Override bn-protected-media button[class*="menu"] rule */
    }

    .bn-slide-menu.active .bn-slide-menu-close {
        pointer-events: auto !important; /* Re-enable when menu is open */
    }

    .bn-slide-menu-close:hover {
        color: #ffffff;
        background: rgba(255,255,255,0.08);
    }

    .bn-slide-menu-body {
        flex: 1;
        overflow-y: auto;
        padding: 16px 0;
    }

    /* Search in slide menu */
    .bn-slide-menu-search {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0 24px 16px;
        padding: 10px 14px;
        background: rgba(255,255,255,0.06);
        border-radius: 8px;
        border: 1px solid rgba(255,255,255,0.08);
    }

    .bn-slide-menu-search svg {
        flex-shrink: 0;
        color: rgba(255,255,255,0.35);
    }

    .bn-slide-menu-search input {
        flex: 1;
        background: none;
        border: none;
        outline: none;
        font-size: 14px;
        color: #ffffff;
        font-family: "Helvetica", Sans-serif;
    }

    .bn-slide-menu-search input::placeholder {
        color: rgba(255,255,255,0.3);
    }

    /* Auth buttons (top of slide menu, below search) */
    .bn-slide-menu-auth {
        padding: 0 0 8px;
        border-bottom: 0;
    }

    .bn-slide-auth-row {
        display: flex;
        gap: 10px;
        margin: 20px 24px;
    }

    /* ── Shared button base ── */
    .bn-slide-auth-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        flex: 1;
        padding: 14px 20px;
        text-decoration: none;
        font-size: 14px;
        font-weight: 700;
        border-radius: 10px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        transition: opacity 0.2s ease, filter 0.2s ease, border-color 0.2s ease;
        cursor: pointer;
    }

    /* ── SIGN IN: holo gradient fill, dark text ── */
    .bn-slide-signin-btn {
        background-image: var(--bn-holo-image, url("../../themes/sonaar-child/assets/tiny-holo.jpg"));
        background-size: 400% 400%;
        background-position: 50% 50%;
        animation: bn-holo-animate 40s ease infinite;
        color: #0d0d0d;
        border: none;
    }
    .bn-slide-signin-btn svg {
        stroke: #0d0d0d;
        opacity: 0.7;
    }
    .bn-slide-signin-btn:hover {
        filter: brightness(1.1) saturate(1.1);
        color: #0d0d0d;
    }

    /* ── JOIN: transparent bg, holo border + holo text + holo icon ── */
    .bn-slide-join-btn {
        background: transparent;
        border: 2px solid transparent;
        position: relative;
        overflow: visible;
        border-radius: 10px;
    }
    /* Holo border via pseudo-element (border-image breaks border-radius) */
    .bn-slide-join-btn::before {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: 12px;
        padding: 2px;
        background-image: var(--bn-holo-image, url("../../themes/sonaar-child/assets/tiny-holo.jpg"));
        background-size: 400% 400%;
        background-position: 50% 50%;
        animation: bn-holo-animate 40s ease infinite;
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
        z-index: 0;
    }
    /* Holo text on the span */
    .bn-slide-join-btn span {
        position: relative;
        z-index: 1;
        background-image: var(--bn-holo-image, url("../../themes/sonaar-child/assets/tiny-holo.jpg"));
        background-size: 400% 400%;
        background-position: 50% 50%;
        animation: bn-holo-animate 40s ease infinite;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }
    .bn-slide-join-btn svg {
        position: relative;
        z-index: 1;
        stroke: rgba(180, 160, 255, 0.9);
        filter: saturate(1.2) brightness(1.2);
        opacity: 0.9;
    }
    .bn-slide-join-btn:hover {
        filter: brightness(1.15) saturate(1.2);
    }

    /* ── SIGN OUT: full-width holo fill, dark text ── */
    .bn-slide-auth-loggedin .bn-slide-signout-btn {
        flex: 1;
        background-image: var(--bn-holo-image, url("../../themes/sonaar-child/assets/tiny-holo.jpg"));
        background-size: 400% 400%;
        background-position: 50% 50%;
        animation: bn-holo-animate 40s ease infinite;
        color: #0d0d0d;
        border: none;
    }
    .bn-slide-auth-loggedin .bn-slide-signout-btn svg {
        stroke: #0d0d0d;
        opacity: 0.7;
    }
    .bn-slide-auth-loggedin .bn-slide-signout-btn:hover {
        filter: brightness(1.1) saturate(1.1);
        color: #0d0d0d;
    }

    .bn-slide-menu-auth-link {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 0;
        color: rgba(255,255,255,0.65);
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
        transition: color 0.2s ease;
    }

    .bn-push-toggle-btn {
        background: none;
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 6px;
        cursor: pointer;
        padding: 8px 14px;
        margin-top: 6px;
        font-family: inherit;
        transition: all 0.2s;
    }
    .bn-push-toggle-btn:hover {
        background: rgba(255,255,255,0.05);
        border-color: rgba(255,255,255,0.2);
    }
    .bn-push-toggle-btn.bn-push-active {
        border-color: rgba(76, 175, 80, 0.3);
        color: #81c784;
    }
    .bn-push-toggle-btn.bn-push-active .bn-push-label {
        color: #81c784;
    }
    .bn-push-toggle-btn svg {
        vertical-align: middle;
        margin-right: 6px;
    }
    .bn-push-label {
        font-size: 13px;
    }

    .bn-slide-menu-auth-link:hover {
        color: #ffffff;
    }

    /* Legacy auth-action class — kept for backward compat */
    .bn-slide-menu-auth-action { display: none; }

    /* Nav links in slide menu */
    .bn-slide-menu-nav {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: 100%;
    }

    .bn-slide-menu-nav li {
        list-style: none;
    }

    .bn-slide-menu-nav > li > a {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 9px 24px;
        color: rgba(255, 255, 255, 0.85);
        text-decoration: none;
        font-size: 25px;
        font-weight: 600;
        transition: background 0.2s ease, color 0.2s ease;
        text-transform: uppercase;
        letter-spacing: 0;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.04);
        border-left: 0 !important;
        border-radius: 0 !important;
        margin-bottom: 2px;
    }

    .bn-slide-menu-nav > li > a:hover,
    .bn-slide-menu-nav > li.current-menu-item > a {
        background: rgba(255, 255, 255, 0.06);
        color: #ffffff;
        border-color: rgba(255, 255, 255, 0.08);
        border-left: 0 !important;
    }

    /* Sub-menu items */
    .bn-slide-menu-nav .sub-menu {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .bn-slide-menu-nav .sub-menu li a {
        display: block;
        padding: 4px 24px 0px 48px;
        color: rgba(255, 255, 255, 0.55);
        text-decoration: none;
        font-size: 14px;
        transition: color 0.2s ease, background 0.2s ease;
    }

    .bn-slide-menu-nav .sub-menu li a:hover {
        color: #ffffff;
        background: rgba(255,255,255,0.03);
    }

    /* Slide menu footer */
    .bn-slide-menu-footer {
        padding: 16px 24px;
        border-top: 1px solid rgba(255,255,255,0.08);
        display: flex;
        flex-direction: column;
        gap: 8px;
        flex-shrink: 0;
    }

    .bn-slide-menu-footer-link {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 0;
        color: rgba(255,255,255,0.65);
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
        transition: color 0.2s ease;
    }

    .bn-slide-menu-footer-link:hover {
        color: #ffffff;
    }

    .bn-slide-menu-auth-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px 24px;
        background: #ffffff;
        color: #0d0d0d;
        text-decoration: none;
        font-size: 14px;
        font-weight: 600;
        border-radius: 8px;
        transition: background 0.2s ease;
    }

    .bn-slide-menu-auth-btn:hover {
        background: #e0e0e0;
        color: #0d0d0d;
    }


    /* ========================================
       Nav menu icons (SVG)
       ======================================== */
    .bn-slide-menu-nav > li.bn-nav-vaults > a::before,
    .bn-slide-menu-nav > li.bn-nav-listen > a::before,
    .bn-slide-menu-nav > li.bn-nav-memories > a::before,
    .bn-slide-menu-nav > li.bn-nav-tour > a::before,
    .bn-slide-menu-nav > li.bn-nav-connect > a::before {
        content: '';
        display: inline-block;
        width: 22px;
        height: 22px;
        flex-shrink: 0;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        filter: none !important;
        opacity: 0.85;
    }

    .bn-nav-vaults > a::before   { background-image: url('https://bassnectar.net/wp-content/themes/sonaar-child/assets/vaults-white.svg') !important; }
    .bn-nav-listen > a::before   { background-image: url('https://bassnectar.net/wp-content/themes/sonaar-child/assets/listen.svg') !important; }
    .bn-nav-memories > a::before { background-image: url('https://bassnectar.net/wp-content/themes/sonaar-child/assets/memories.svg') !important; }
    .bn-nav-tour > a::before     { filter: none !important; background-image: url('https://bassnectar.net/wp-content/themes/sonaar-child/assets/tour-icon.svg') !important; }
    .bn-nav-connect > a::before  { background-image: url('https://bassnectar.net/wp-content/themes/sonaar-child/assets/connect.svg') !important; }

    /* Account icon (matches nav icon style) */
    .bn-account-icon {
        display: inline-block;
        width: 22px;
        height: 22px;
        flex-shrink: 0;
        background-image: url('https://bassnectar.net/wp-content/themes/sonaar-child/assets/vaults-white.svg');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        opacity: 0.85;
    }

    /* Hide menu items conditionally */
    .bn-slide-menu-nav li.bn-hide-menu-item {
        display: none !important;
    }

    /* ========================================
       Header notification icon + badge
       ======================================== */
    .bn-slide-menu-header-notif {
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        padding: 4px;
        border-radius: 6px;
        transition: background 0.2s ease;
    }

    .bn-slide-menu-header-notif:hover {
        background: rgba(255, 255, 255, 0.1);
    }

    .bn-header-notif-wrap {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
    }

    .bn-header-notif-icon {
        width: 28px;
        height: 28px;
        opacity: 0.9;
    }

    .bn-notif-badge {
        position: absolute;
        top: -4px;
        right: -6px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        background: #ff4444;
        color: #ffffff;
        font-size: 10px;
        font-weight: 700;
        line-height: 16px;
        text-align: center;
        border-radius: 8px;
        pointer-events: none;
    }

    /* ========================================
       Sign Out CTA button (footer)
       ======================================== */
    .bn-slide-menu-signout-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 14px 24px;
        background: rgba(255, 255, 255, 0.08);
        color: rgba(255, 255, 255, 0.75);
        text-decoration: none;
        font-size: 14px;
        font-weight: 600;
        border-radius: 8px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
        letter-spacing: 0.5px;
        text-transform: uppercase;
    }

    .bn-slide-menu-signout-btn:hover {
        background: rgba(255, 255, 255, 0.15);
        color: #ffffff;
        border-color: rgba(255, 255, 255, 0.25);
    }

    .bn-slide-menu-signout-btn svg {
        opacity: 0.75;
    }

    /* ========================================
       Body scroll lock
       ======================================== */
    body.bn-menu-open {
        overflow: hidden;
    }

    /* ========================================
       Social / Streaming Icon Classes
       Use in Appearance > Menus by adding a CSS class to a menu item.
       e.g. "bn-icon-spotify", "bn-icon-instagram"
       ======================================== */
    .bn-slide-menu-nav > li > a::before,
    .bn-header-icon-nav > li > a::before {
        display: inline-block;
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        filter: brightness(0) invert(1);
        opacity: 0.7;
    }

    /* Social platforms */
    .bn-icon-instagram > a::before { content: ''; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5' ry='5'/%3E%3Cpath d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'/%3E%3Cline x1='17.5' y1='6.5' x2='17.51' y2='6.5'/%3E%3C/svg%3E"); filter: none; }
    .bn-icon-facebook > a::before { content: ''; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z'/%3E%3C/svg%3E"); filter: none; }
    .bn-icon-twitter > a::before, .bn-icon-x > a::before { content: ''; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E"); filter: none; }
    .bn-icon-youtube > a::before { content: ''; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19.1c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.35 29 29 0 0 0-.46-5.33z'/%3E%3Cpolygon points='9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02'/%3E%3C/svg%3E"); filter: none; }
    .bn-icon-tiktok > a::before { content: ''; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-2.88 2.5 2.89 2.89 0 0 1 0-5.78 2.9 2.9 0 0 1 .88.14V9.01a6.14 6.14 0 0 0-1-.08 6.24 6.24 0 0 0 0 12.48 6.24 6.24 0 0 0 6.25-6.24V8.83a8.18 8.18 0 0 0 4.78 1.53V6.8a4.84 4.84 0 0 1-.81-.11z'/%3E%3C/svg%3E"); filter: none; }
    .bn-icon-threads > a::before { content: ''; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12.186 24h-.007c-3.581-.024-6.334-1.205-8.184-3.509C2.35 18.44 1.5 15.586 1.472 12.01v-.017c.03-3.579.879-6.43 2.525-8.482C5.845 1.205 8.6.024 12.18 0h.014c2.746.02 5.043.725 6.826 2.098 1.677 1.29 2.858 3.13 3.509 5.467l-2.773.776c-1.034-3.716-3.474-5.6-7.253-5.6h-.008c0 0-.003 0-.003 0-2.522.017-4.474.844-5.802 2.458-1.39 1.685-2.1 4.156-2.113 7.344v.013c.014 3.187.723 5.658 2.108 7.34 1.325 1.612 3.276 2.438 5.803 2.455h.003c2.035-.013 3.68-.575 4.89-1.67 1.304-1.18 1.98-2.88 2.01-5.05.007-.497-.03-.985-.11-1.46-.498.238-1.028.43-1.59.57-.172 1.453-.7 2.626-1.574 3.46-.998.952-2.37 1.44-4.076 1.448h-.003c-1.67-.006-3.034-.504-4.056-1.48-.97-.925-1.498-2.2-1.57-3.79-.033-.733.05-1.428.245-2.073a6.768 6.768 0 0 1 3.583-3.986c1.13-.537 2.434-.81 3.876-.81.173 0 .347.003.52.01 1.74.065 3.2.54 4.338 1.413 1.02.783 1.747 1.855 2.162 3.19l-2.637.903c-.55-1.814-1.92-2.726-4.075-2.726-.07 0-.141.001-.212.004-1.715.064-3.06.723-3.637 1.782a2.63 2.63 0 0 0-.162 1.916c.187.656.682 1.168 1.394 1.444.652.253 1.454.362 2.285.31 1.168-.072 2.093-.44 2.745-1.093.347-.347.6-.773.762-1.265-1.107.066-2.133-.025-3.064-.392-1.283-.506-2.14-1.452-2.416-2.665a4.308 4.308 0 0 1 .263-2.79z'/%3E%3C/svg%3E"); filter: none; }

    /* Streaming platforms */
    .bn-icon-spotify > a::before { content: ''; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z'/%3E%3C/svg%3E"); filter: none; }
    .bn-icon-soundcloud > a::before { content: ''; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M1.175 12.225c-.051 0-.094.046-.101.1l-.233 2.154.233 2.105c.007.058.05.098.101.098.05 0 .09-.04.099-.098l.255-2.105-.27-2.154c-.009-.06-.05-.1-.1-.1m-.899.828c-.06 0-.091.037-.104.094L0 14.479l.172 1.282c.013.06.045.094.104.094.057 0 .09-.037.1-.094l.2-1.282-.2-1.332c-.01-.06-.043-.094-.1-.094m1.8-1.025c-.065 0-.105.05-.108.11l-.2 2.341.2 2.268c.004.06.044.11.109.11.062 0 .105-.05.11-.11l.228-2.268-.228-2.341c-.005-.065-.048-.11-.11-.11m.9-.394c-.073 0-.12.058-.125.122l-.19 2.735.19 2.637c.006.07.052.122.125.122.07 0 .117-.053.123-.122l.215-2.637-.215-2.735c-.006-.07-.053-.122-.123-.122m.9-.175c-.08 0-.132.062-.137.134l-.172 2.91.172 2.785c.005.075.057.137.137.137.076 0 .13-.062.136-.137l.196-2.785-.196-2.91c-.006-.075-.06-.134-.136-.134m.9-.4c-.088 0-.146.07-.15.147l-.155 3.31.155 2.895c.004.082.062.147.15.147.084 0 .144-.065.15-.147l.176-2.895-.176-3.31c-.006-.082-.066-.147-.15-.147m.888-.462c-.096 0-.155.076-.16.158l-.14 3.772.14 2.94c.005.086.064.158.16.158.09 0 .155-.072.16-.158l.16-2.94-.16-3.772c-.005-.086-.07-.158-.16-.158m.912-.252c-.102 0-.166.082-.17.17l-.128 4.023.128 2.972c.004.092.068.17.17.17.098 0 .164-.078.17-.17l.145-2.972-.145-4.023c-.006-.092-.072-.17-.17-.17m.9-.097c-.11 0-.178.09-.18.182l-.115 4.12.115 2.99c.002.097.07.182.18.182.108 0 .175-.085.18-.182l.13-2.99-.13-4.12c-.005-.097-.072-.182-.18-.182m.912-.2c-.117 0-.188.095-.19.193l-.102 4.32.102 3.003c.002.103.073.193.19.193.114 0 .188-.09.192-.193l.114-3.003-.114-4.32c-.004-.103-.078-.193-.192-.193m.9.05c-.123 0-.197.1-.2.203l-.09 4.068.09 3.003c.003.107.077.203.2.203.12 0 .197-.096.2-.203l.103-3.003-.103-4.068c-.003-.107-.08-.203-.2-.203m2.962-.498c-.242 0-.44.193-.445.44l-.075 4.515.075 2.962c.006.244.203.437.445.437.24 0 .437-.193.442-.437l.084-2.962-.084-4.515c-.005-.25-.202-.44-.442-.44m.96.09c-.255 0-.453.2-.457.452l-.06 4.425.06 2.94c.004.25.202.452.457.452.253 0 .452-.202.455-.452l.068-2.94-.068-4.425c-.003-.255-.202-.452-.455-.452m3.378.772c-.158-.384-.464-.68-.85-.84-.236-.098-.494-.15-.762-.15h-4.598c-.244 0-.44.198-.44.44v6.01c.002.24.2.432.44.44h4.598c1.08 0 1.96-.882 1.96-1.962 0-.518-.2-1.008-.563-1.376-.085-.09-.178-.166-.278-.234a1.94 1.94 0 0 0-.508-2.328z'/%3E%3C/svg%3E"); filter: none; }
    .bn-icon-apple-music > a::before { content: ''; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M23.994 6.124a9.23 9.23 0 0 0-.24-2.19c-.317-1.31-1.062-2.31-2.18-3.043A5.022 5.022 0 0 0 19.7.263a10.158 10.158 0 0 0-1.564-.12C17.498.094 16.86.066 15.982.054h-8c-.876.012-1.514.04-2.152.09a10.158 10.158 0 0 0-1.564.12C3.306.576 2.47.974 1.762 1.642.958 2.398.456 3.334.212 4.424A9.56 9.56 0 0 0 .002 6.6v10.8a9.56 9.56 0 0 0 .21 2.176c.244 1.09.746 2.026 1.55 2.782.708.668 1.544 1.066 2.504 1.278.498.11 1.002.166 1.564.188.638.048 1.276.078 2.154.088h8c.876-.01 1.514-.04 2.152-.088a10.02 10.02 0 0 0 1.564-.188c.96-.212 1.796-.61 2.504-1.278.804-.756 1.306-1.692 1.55-2.782.13-.548.194-1.12.22-1.696.032-.53.046-1.06.054-1.59V8.81c-.006-.456-.014-.91-.03-1.358 0-.276-.01-.53-.024-.794zM17.42 17.3c0 .372-.14.614-.44.762-.156.078-.316.12-.488.12-.128 0-.26-.024-.392-.068l-7.79-2.826a.975.975 0 0 1-.652-.934V8.11l-.02-.19c0-.17.074-.332.2-.456a.685.685 0 0 1 .434-.178c.08-.006.162.01.236.034l7.9 2.87c.316.114.516.37.516.712v6.4h-.004z'/%3E%3C/svg%3E"); filter: none; }
    .bn-icon-bandcamp > a::before { content: ''; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M0 18.75l7.437-13.5H24l-7.438 13.5z'/%3E%3C/svg%3E"); filter: none; }
    .bn-icon-twitch > a::before { content: ''; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714z'/%3E%3C/svg%3E"); filter: none; }

    /* Misc / utility */
    .bn-icon-link > a::before { content: ''; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E"); filter: none; }
    .bn-icon-mail > a::before { content: ''; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E"); filter: none; }

    /* ========================================
       Responsive
       ======================================== */
    @media (max-width: 768px) {
        .bn-header-center {
            display: none;
        }

        .bn-header-inner {
            padding: 0 14px;
        }

        .bn-header-cta-btn {
            display: none;
        }

        .bn-header-text-link {
            display: none;
        }

        .bn-inline-search {
            display: none;
        }

        .bn-slide-menu {
            width: 100%;
            max-width: 100vw;
        }
    }

    /* WP admin bar offset */
    .admin-bar .bn-header-sticky {
        top: 32px;
    }

    @media (max-width: 782px) {
        .admin-bar .bn-header-sticky {
            top: 46px;
        }
    }

        /* ========================================
       Hide theme's default header
       ======================================== */
    .sonaar-menu-box {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        visibility: hidden !important;
    }
    
    /* ========================================
       BN Submenu — Horizontal Scrolling Bar
       (Memories CPT only)
       ======================================== */
    .bn-submenu {
        width: 100%;
        z-index: 9998;
        position: relative;
        overflow: hidden;
        background: rgba(10, 10, 10, 0.65);
        -webkit-backdrop-filter: blur(16px) saturate(160%);
        backdrop-filter: blur(16px) saturate(160%);
        border-bottom: 1px solid rgba(255,255,255,0.06);
        margin-top: -1px; /* collapse gap between header border & submenu */
    }

    .bn-header-sticky + .bn-submenu {
        position: fixed !important;
        /* top set by JS via custom property to account for admin bar */
        top: var(--bn-submenu-top, 60px);
        left: 0;
        margin-top: 0;
    }

    .bn-submenu-inner {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;       /* Firefox */
        -ms-overflow-style: none;    /* IE/Edge */
        display: flex;
        justify-content: center;
    }
    .bn-submenu-inner::-webkit-scrollbar {
        display: none;               /* Chrome/Safari */
    }

    .bn-submenu-list {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 2px;
        list-style: none;
        margin: 0;
        padding: 0;
        height: 24px;
        white-space: nowrap;
    }

    .bn-submenu-list li {
        list-style: none;
        flex: 0 0 auto;
    }

    .bn-submenu-list li a {
        display: flex;
        align-items: center;
        padding: 3px 10px;
        color: rgba(255,255,255,0.55);
        text-decoration: none;
        font-family: "Helvetica", Sans-serif;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        border-radius: 3px;
        transition: color 0.2s ease, background 0.2s ease;
        white-space: nowrap;
    }

    .bn-submenu-list li a:hover {
        color: rgba(255,255,255,0.9);
        background: rgba(255,255,255,0.08);
    }

    .bn-submenu-list li.current-menu-item a,
    .bn-submenu-list li.bn-submenu-active a {
        color: #ffffff;
        background: rgba(255,255,255,0.1);
    }

    /* Edge fade indicators */
    .bn-submenu-fade {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 32px;
        pointer-events: none;
        z-index: 2;
        opacity: 0;
        transition: opacity 0.2s ease;
    }
    .bn-submenu-fade--left {
        left: 0;
        background: linear-gradient(to right, rgba(10,10,10,0.8), transparent);
    }
    .bn-submenu-fade--right {
        right: 0;
        background: linear-gradient(to left, rgba(10,10,10,0.8), transparent);
    }
    .bn-submenu-fade.visible {
        opacity: 1;
    }

    /* Mobile tweaks */
    @media (max-width: 768px) {
        .bn-submenu-list {
            height: 22px;
        }
        .bn-submenu-list li a {
            font-size: 11px;
            padding: 2px 8px;
        }
    }

    </style>
        <meta name="theme-color" content="#1a1a1a">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="Bassnectar Vaults">
    <link rel="manifest" href="https://bassnectar.net/manifest.webmanifest">
    <link rel="icon" type="image/x-icon" href="https://bassnectar.net/favicon.ico">
    <link rel="icon" type="image/png" sizes="32x32" href="https://bassnectar.net/pwa-icons/icon-48x48.png">
    <link rel="icon" type="image/png" sizes="192x192" href="https://bassnectar.net/pwa-icons/icon-192x192.png">
    <link rel="apple-touch-icon" sizes="180x180" href="https://bassnectar.net/pwa-icons/apple-touch-icon.png">
        <script data-cfasync="false">
    window.__bnRadioConfig = {
        headerRadioUrl: "\/listen\/playlists\/bass-head-radio\/",
        headerRadioPostId: null    };
    </script>
    <link href='//hb.wpmucdn.com' rel='preconnect' />
<link rel="alternate" type="application/rss+xml" title="BASSNECTAR &raquo; Feed" href="https://bassnectar.net/feed/" />
<link rel="alternate" type="application/rss+xml" title="BASSNECTAR &raquo; Comments Feed" href="https://bassnectar.net/comments/feed/" />
		<style>
			.lazyload,
			.lazyloading {
				max-width: 100%;
			}
		</style>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/glightbox/3.3.0/css/glightbox.min.css" /><style id="wp-img-auto-sizes-contain-inline-css">
img:is([sizes=auto i],[sizes^="auto," i]){contain-intrinsic-size:3000px 1500px}
/*# sourceURL=wp-img-auto-sizes-contain-inline-css */
</style>
<link rel='stylesheet' id='mp-theme-css' href='https://bassnectar.net/wp-content/plugins/memberpress/css/ui/theme.css?ver=1.12.14' media='all' />
<style id="wp-emoji-styles-inline-css">

	img.wp-smiley, img.emoji {
		display: inline !important;
		border: none !important;
		box-shadow: none !important;
		height: 1em !important;
		width: 1em !important;
		margin: 0 0.07em !important;
		vertical-align: -0.1em !important;
		background: none !important;
		padding: 0 !important;
	}
/*# sourceURL=wp-emoji-styles-inline-css */
</style>
<style id="classic-theme-styles-inline-css">
/*! This file is auto-generated */
.wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none}
/*# sourceURL=/wp-includes/css/classic-themes.min.css */
</style>
<style id="global-styles-inline-css">
:root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgb(6,147,227) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgb(252,185,0) 0%,rgb(255,105,0) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgb(255,105,0) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);--wp--preset--shadow--crisp: 6px 6px 0px rgb(0, 0, 0);}:where(body) { margin: 0; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}body{padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;}:root :where(.wp-element-button, .wp-block-button__link){background-color: #32373c;border-width: 0;color: #fff;font-family: inherit;font-size: inherit;font-style: inherit;font-weight: inherit;letter-spacing: inherit;line-height: inherit;padding-top: calc(0.667em + 2px);padding-right: calc(1.333em + 2px);padding-bottom: calc(0.667em + 2px);padding-left: calc(1.333em + 2px);text-decoration: none;text-transform: inherit;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;}
:root :where(.wp-block-icon svg){width: 24px;}
:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}
:where(.wp-block-term-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-term-template.is-layout-grid){gap: 1.25em;}
:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}
:root :where(.wp-block-pullquote){font-size: 1.5em;line-height: 1.6;}
/*# sourceURL=global-styles-inline-css */
</style>
<link rel='stylesheet' id='bn-passkeys-css' href='https://bassnectar.net/wp-content/plugins/bn-passkeys/bn-passkeys.css?ver=1.0.3' media='all' />
<link rel='stylesheet' id='bn-pin-login-css' href='https://bassnectar.net/wp-content/plugins/bn-pin-login/bn-pin-login.css?ver=1.0.0' media='all' />
<link rel='stylesheet' id='bn-qr-login-css' href='https://bassnectar.net/wp-content/plugins/bn-qr-login/bn-qr-login.css?ver=1.0.2' media='all' />
<link rel='stylesheet' id='bn-shopify-storefront-css' href='https://bassnectar.net/wp-content/plugins/bn-shopify-storefront/assets/bn-shopify-storefront.css?ver=1.2.0' media='all' />
<link rel='stylesheet' id='bn-greatest-hits-css' href='https://bassnectar.net/wp-content/plugins/bn-greatest-hits/assets/css/bn-greatest-hits.css?ver=1780963575' media='all' />
<link rel='stylesheet' id='bn-gh-overhaul-css' href='https://bassnectar.net/wp-content/plugins/bn-greatest-hits/assets/css/bn-gh-overhaul.css?ver=1779300133' media='all' />
<link rel='stylesheet' id='bn-gh-hero-css' href='https://bassnectar.net/wp-content/plugins/bn-greatest-hits/assets/css/bn-gh-hero.css?ver=1779852225' media='all' />
<link rel='stylesheet' id='iron-master-css' href='https://bassnectar.net/wp-content/themes/sonaar/dist/css/main.min.css?ver=4.28.1' media='all' />
<link rel='stylesheet' id='sonaar-child-style-css' href='https://bassnectar.net/wp-content/themes/sonaar-child/style.css?ver=1780982057' media='all' />
<style id="sonaar-child-style-inline-css">
body, h1, h2, h3, h4, h5, h6, p, a, span, div, li, td, th, input, select, textarea, button, .elementor-widget-text-editor, .elementor-heading-title { font-family: Helvetica, Arial, sans-serif; }
/*# sourceURL=sonaar-child-style-inline-css */
</style>
<link rel='stylesheet' id='bn-device-manager-css' href='https://bassnectar.net/wp-content/plugins/bn-device-manager/assets/bn-device-manager.css?ver=1.0.0' media='all' />
<link rel='stylesheet' id='iron-custom-styles-css' href='https://bassnectar.net/?load=custom-style.css&#038;ver=1780982279' media='all' />
<style id="iron-custom-styles-inline-css">
@media only screen and (max-width: 1159px){
				.boxed {
					margin-top: 0px!important;
				}}#overlay .perspective, .single-album .sr_it-single-post.featured, .single-album .sr_it-singlealbum-sidecover-wrapper, .single-album .content-box { 
	background-color: rgba(0,0,0,1);
}
.menu-toggle span, .menu-toggle.toggled span{ background-color: #ffffff; }.menu-toggle rect{
	fill:#ffffff;

}ul.header-top-menu li a{color:#ffffff;}.menu-toggle-off polygon{
	fill:#ffffff;
}#page-banner{height:350px;}span.heading-b3{
		margin-top:30px;
		margin-bottom:75px;
		background-color:rgba(0, 0, 0, 0);
	}
/*# sourceURL=iron-custom-styles-inline-css */
</style>
<link rel='stylesheet' id='bassnectar-icons-css' href='https://bassnectar.net/Public/Core/Fonts/bassnectar-icons/style.css?ver=1.0.1' media='all' />
<link rel='stylesheet' id='elementor-icons-css' href='https://bassnectar.net/wp-content/plugins/elementor/assets/lib/eicons/css/elementor-icons.min.css?ver=5.47.0' media='all' />
<link rel='stylesheet' id='elementor-frontend-css' href='https://bassnectar.net/wp-content/plugins/elementor/assets/css/frontend.min.css?ver=3.35.5' media='all' />
<link rel='stylesheet' id='elementor-post-4216-css' href='https://bassnectar.net/wp-content/uploads/elementor/css/post-4216.css?ver=1780709003' media='all' />
<link rel='stylesheet' id='font-awesome-5-all-css' href='https://bassnectar.net/wp-content/plugins/elementor/assets/lib/font-awesome/css/all.min.css?ver=3.35.5' media='all' />
<link rel='stylesheet' id='font-awesome-4-shim-css' href='https://bassnectar.net/wp-content/plugins/elementor/assets/lib/font-awesome/css/v4-shims.min.css?ver=3.35.5' media='all' />
<link rel='stylesheet' id='widget-image-css' href='https://bassnectar.net/wp-content/plugins/elementor/assets/css/widget-image.min.css?ver=3.35.5' media='all' />
<link rel='stylesheet' id='e-animation-fadeIn-css' href='https://bassnectar.net/wp-content/plugins/elementor/assets/lib/animations/styles/fadeIn.min.css?ver=3.35.5' media='all' />
<link rel='stylesheet' id='elementor-post-3050-css' href='https://bassnectar.net/wp-content/uploads/elementor/css/post-3050.css?ver=1780709004' media='all' />
<link rel='stylesheet' id='bn-player-css-css' href='https://bassnectar.net/wp-content/themes/sonaar-child/bn-player.css?ver=1780974439' media='all' />
<style id="bn-streaming-inline-css">
/**
 * BN Streaming — Styles
 *
 * Covers:
 *  1. MemberPress account tab — platform selector grid
 *  2. Toast notification (global)
 *  3. Album sheet CTA button override styles
 */

/* ═══════════════════════════════════════════════════════════════════════
   1. ACCOUNT TAB — Platform Selector Grid
   ═══════════════════════════════════════════════════════════════════ */

.bn-streaming-prefs {
    max-width: 640px;
}

/* Account page keeps 5-column grid */
.bn-streaming-prefs .bn-streaming-grid {
    grid-template-columns: repeat(5, 1fr);
}

.bn-streaming-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

@media (max-width: 600px) {
    .bn-streaming-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 380px) {
    .bn-streaming-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.bn-streaming-option {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px;
    border: 2px solid #333;
    border-radius: 10px;
    background: #1a1a1a;
    color: #ccc;
    cursor: pointer;
    transition: border-color .2s, background .2s, transform .1s;
    font-family: inherit;
    font-size: 12px;
    line-height: 1.2;
    text-align: center;
}

.bn-streaming-option:hover {
    border-color: #555;
    background: #222;
    transform: translateY(-1px);
}

.bn-streaming-option.bn-streaming-active {
    border-color: var(--platform-color, #fff);
    background: rgba(255,255,255,0.06);
    color: #fff;
}

.bn-streaming-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bn-streaming-icon svg {
    width: 28px;
    height: 28px;
}

.bn-streaming-active .bn-streaming-icon {
    color: var(--platform-color, #fff);
}

.bn-streaming-label {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.bn-streaming-check {
    position: absolute;
    top: 4px;
    right: 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--platform-color, #1DB954);
}

/* "None" radio option */
.bn-streaming-none-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    color: #ccc;
    cursor: pointer;
    font-size: 14px;
}

.bn-streaming-none-option input[type="radio"] {
    accent-color: #888;
}

/* ═══════════════════════════════════════════════════════════════════════
   2. TOAST NOTIFICATION (global)
   ═══════════════════════════════════════════════════════════════════ */

.bn-streaming-toast {
    position: fixed;
    bottom: 80px;  /* above the sticky player bar */
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #1DB954;
    color: #000;
    font-weight: 600;
    font-size: 13px;
    padding: 10px 20px;
    border-radius: 24px;
    z-index: 200000;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s, transform .3s;
    white-space: nowrap;
    box-shadow: 0 4px 20px rgba(0,0,0,.4);
}

.bn-streaming-toast--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Account-page inline toast */
.bn-streaming-prefs .bn-streaming-toast {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    display: inline-block;
    margin-top: 10px;
    border-radius: 6px;
    pointer-events: auto;
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════════
   3. ALBUM SHEET — CTA Button Styles
   These enhance the existing .bn-streaming-cta rendered by
   bn-album-sheet.js and album-streaming.php
   ═══════════════════════════════════════════════════════════════════ */

.bn-streaming-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 20px;
    border: none;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: filter .2s, transform .1s;
    color: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,.3);
}

.bn-streaming-cta:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.bn-streaming-cta:active {
    transform: translateY(0);
}

.bn-streaming-cta svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Collapsible "Other platforms" toggle */
.bn-streaming-others-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: #888;
    font-size: 13px;
    cursor: pointer;
    padding: 8px 0;
    margin-top: 4px;
    transition: color .2s;
    font-family: inherit;
}

.bn-streaming-others-toggle:hover {
    color: #bbb;
}

.bn-streaming-others-toggle .arrow,
.bn-streaming-others-toggle .bn-toggle-arrow {
    transition: transform .2s;
    font-size: 10px;
}

.bn-streaming-others-toggle.expanded .arrow,
.bn-streaming-others-toggle.bn-expanded .bn-toggle-arrow {
    transform: rotate(180deg);
}

.bn-streaming-others-grid {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height .3s ease, opacity .3s ease;
}

.bn-streaming-others-grid.expanded,
.bn-streaming-others-grid.bn-expanded {
    max-height: 400px;
    opacity: 1;
}

/* ── PHP-rendered CTA (album-streaming.php) ── */
.bn-streaming-pref-cta {
    margin-bottom: 8px;
}

.bn-streaming-pref-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 20px;
    border: none;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: filter .2s, transform .1s;
    color: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,.3);
    font-family: inherit;
}

.bn-streaming-pref-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.bn-streaming-pref-btn:active {
    transform: translateY(0);
}

.bn-streaming-pref-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bn-streaming-pref-icon svg {
    width: 22px;
    height: 22px;
}

.bn-streaming-pref-label {
    font-size: 14px;
}

/* PHP "Not available" notice */
.bn-streaming-pref-unavailable {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
    color: #888;
    font-size: 13px;
    margin-bottom: 12px;
}

/* "Not available" notice */
.bn-streaming-unavailable {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
    color: #888;
    font-size: 13px;
    margin-bottom: 12px;
}

.bn-streaming-unavailable svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: .5;
}

/* ═══════════════════════════════════════════════════════════════════════
   4. SPOTIFY BADGE (sticky bar indicator)
   ═══════════════════════════════════════════════════════════════════ */

.bn-spotify-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    opacity: 0.85;
    vertical-align: middle;
    line-height: 1;
}

/* Connecting animation: pulse the icon */
.bn-spotify-badge.bn-spotify-connecting svg {
    animation: bn-spotify-pulse 1.2s ease-in-out infinite;
}

@keyframes bn-spotify-pulse {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.15); }
}

/* Panel Spotify badge (slide-up panel indicator — icon only, flush left) */
.bn-panel-spotify-badge {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 6px;
    color: #1DB954;
    opacity: 0.7;
    line-height: 1;
}
.bn-panel-spotify-badge svg {
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   DEVICE PICKER — player bar button + floating popup + account section
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Player bar button ─────────────────────────────────────────────── */
.bn-device-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 8px;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.45);
    cursor: pointer;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
    line-height: 1;
    white-space: nowrap;
    max-width: 120px;
    overflow: hidden;
}
.bn-device-btn:hover {
    color: rgba(255,255,255,0.85);
    background: rgba(255,255,255,0.07);
}
.bn-device-btn__icon {
    flex-shrink: 0;
}
.bn-device-btn__label {
    display: none;
}
.bn-device-btn--loading .bn-device-btn__icon {
    opacity: 0.5;
    animation: bn-device-spin 0.9s linear infinite;
}
@keyframes bn-device-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── Floating popup ────────────────────────────────────────────────── */
.bn-device-popup {
    position: fixed;
    z-index: 99999;
    min-width: 240px;
    max-width: 320px;
    background: #1a1a1a;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
    overflow: hidden;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: none;
}
.bn-device-popup--open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}
.bn-device-popup__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
}
.bn-device-popup__list {
    padding: 6px 4px;
    max-height: 320px;
    overflow-y: auto;
}
.bn-device-popup__item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.75);
    cursor: pointer;
    border-radius: 8px;
    text-align: left;
    transition: background 0.12s, color 0.12s;
    position: relative;
}
.bn-device-popup__item:hover:not([disabled]) {
    background: rgba(255,255,255,0.08);
    color: #fff;
}
.bn-device-popup__item--active {
    color: #1DB954;
}
.bn-device-popup__item[disabled] {
    opacity: 0.35;
    cursor: default;
}
.bn-device-popup__icon {
    flex-shrink: 0;
    opacity: 0.7;
    display: flex;
    align-items: center;
}
.bn-device-popup__item--active .bn-device-popup__icon {
    opacity: 1;
    color: #1DB954;
}
.bn-device-popup__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.bn-device-popup__name {
    font-size: 13px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bn-device-popup__meta {
    font-size: 11px;
    opacity: 0.5;
}
.bn-device-popup__active-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1DB954;
    flex-shrink: 0;
    box-shadow: 0 0 6px rgba(29,185,84,0.6);
}
.bn-device-popup__empty {
    padding: 20px 16px;
    font-size: 13px;
    color: rgba(255,255,255,0.4);
    text-align: center;
    line-height: 1.5;
}
.bn-device-popup__open-spotify {
    display: flex;
    align-items: center;
    gap: 8px;
    width: calc(100% - 24px);
    margin: 4px 12px 8px;
    padding: 9px 12px;
    background: rgba(29,185,84,0.12);
    border: 1px solid rgba(29,185,84,0.3);
    border-radius: 6px;
    color: #1DB954;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}
.bn-device-popup__open-spotify--top {
    margin: 8px 12px 4px;
    padding: 10px 14px;
    font-size: 14px;
    background: rgba(29,185,84,0.15);
    border-color: rgba(29,185,84,0.45);
}
.bn-device-popup__open-spotify:hover {
    background: rgba(29,185,84,0.22);
}
.bn-device-popup__open-spotify:disabled {
    opacity: 0.5;
    cursor: default;
}

/* ── Account page device list ──────────────────────────────────────── */
#bn-device-picker-section {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.08);
}
#bn-device-picker-section h4 {
    color: #fff;
    font-size: 14px;
    margin: 0 0 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.bn-device-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.bn-device-refresh {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.5);
    padding: 4px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    transition: color 0.15s, border-color 0.15s;
}
.bn-device-refresh:hover {
    color: #fff;
    border-color: rgba(255,255,255,0.3);
}
.bn-device-list__loading,
.bn-device-list__empty {
    font-size: 13px;
    color: rgba(255,255,255,0.4);
    padding: 10px 0;
    line-height: 1.5;
}
.bn-device-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    margin-bottom: 8px;
    position: relative;
}
.bn-device-row--active {
    border-color: rgba(29,185,84,0.3);
    background: rgba(29,185,84,0.06);
}
.bn-device-row__icon {
    color: rgba(255,255,255,0.5);
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.bn-device-row--active .bn-device-row__icon {
    color: #1DB954;
}
.bn-device-row__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.bn-device-row__name {
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bn-device-row__type {
    font-size: 11px;
    color: rgba(255,255,255,0.4);
}
.bn-device-row--active .bn-device-row__type {
    color: rgba(29,185,84,0.7);
}
.bn-device-row__btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.6);
    padding: 5px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    flex-shrink: 0;
}
.bn-device-row__btn:hover:not([disabled]) {
    background: rgba(255,255,255,0.08);
    color: #fff;
    border-color: rgba(255,255,255,0.25);
}
.bn-device-row__btn--preferred {
    border-color: rgba(29,185,84,0.4);
    color: #1DB954;
}
.bn-device-row--active .bn-device-row__btn {
    border-color: rgba(29,185,84,0.35);
    color: #1DB954;
    cursor: default;
}
.bn-device-row__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1DB954;
    flex-shrink: 0;
    box-shadow: 0 0 6px rgba(29,185,84,0.5);
}
.bn-device-row__restricted {
    font-size: 11px;
    color: rgba(255,255,255,0.25);
    flex-shrink: 0;
}

/*# sourceURL=bn-streaming-inline-css */
</style>
<link rel='stylesheet' id='bn-album-page-css' href='https://bassnectar.net/wp-content/themes/sonaar-child/css/bn-album-page.css?ver=1778040224' media='all' />
<link rel='stylesheet' id='bn-album-sheet-css' href='https://bassnectar.net/wp-content/themes/sonaar-child/css/bn-album-sheet.css?ver=1775463798' media='all' />
<style id="bn-album-sheet-inline-css">
.bn-album-sheet { z-index: 7990 !important; }
/*# sourceURL=bn-album-sheet-inline-css */
</style>
<link rel='stylesheet' id='bn-vault-sheet-css' href='https://bassnectar.net/wp-content/themes/sonaar-child/css/bn-vault-sheet.css?ver=1780825808' media='all' />
<style id="bn-vault-sheet-inline-css">
.bn-vault-sheet { z-index: 100001 !important; }
/*# sourceURL=bn-vault-sheet-inline-css */
</style>
<link rel='stylesheet' id='bnpm-styles-css' href='https://bassnectar.net/wp-content/plugins/bn-protected-media-v2/css/bnpm-styles.css?ver=1780702287' media='all' />
<link rel='stylesheet' id='bn-pwa-styles-css' href='https://bassnectar.net/wp-content/themes/sonaar-child/pwa/pwa-styles.css?ver=1.1.1' media='all' />
<script data-cfasync="false" id="jquery-core-js-extra">
var bn_skin_ajax = {"ajax_url":"https://bassnectar.net/wp-admin/admin-ajax.php","nonce":"28f285fa41","custom_skins":["vaults","gold"],"custom_skin_bases":{"vaults":"dark","gold":"liquid_glass"},"skin":"omakase","logged_in":"0","holo_urls":{"omakase":"https://bassnectar.net/wp-content/themes/sonaar-child/assets/tiny-holo.jpg","dark":"https://bassnectar.net/wp-content/themes/sonaar-child/assets/tiny-holo.jpg","transparent":"https://bassnectar.net/wp-content/themes/sonaar-child/assets/tiny-holo.jpg","liquid_glass":"https://bassnectar.net/wp-content/themes/sonaar-child/assets/tiny-holo.jpg","vaults":"https://bassnectar.net/wp-content/themes/sonaar-child/assets/tiny-holo.jpg","_default":"https://bassnectar.net/wp-content/themes/sonaar-child/assets/tiny-holo.jpg"}};
//# sourceURL=jquery-core-js-extra
</script>
<script data-cfasync="false" id="jquery-core-js" src="https://bassnectar.net/wp-includes/js/jquery/jquery.min.js?ver=3.7.1"></script>
<script data-cfasync="false" id="jquery-migrate-js" src="https://bassnectar.net/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.4.1"></script>
<script data-cfasync="false" id="bnpm-video-gallery-js" defer src="https://bassnectar.net/wp-content/plugins/bn-protected-media-v2/bnpm-video-gallery.js?ver=1.4.1.vg25"></script>
<script data-cfasync="false" id="font-awesome-4-shim-js" src="https://bassnectar.net/wp-content/plugins/elementor/assets/lib/font-awesome/js/v4-shims.min.js?ver=3.35.5"></script>
<link rel="canonical" href="https://bassnectar.net/" />
    <style id="bn-apple-login-styles">
    /* Base OAuth button — only define if not already defined by bn-google-login */
    .bn-auth-modal .bn-oauth-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        padding: 14px 24px;
        border: none;
        border-radius: 10px;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        margin-bottom: 4px;
        box-sizing: border-box;
        font-family: "Helvetica", Sans-serif;
    }
    .bn-auth-modal .bn-oauth-btn svg { flex-shrink: 0; }
    .bn-auth-modal .bn-apple-btn {
        background: #000;
        color: #fff;
    }
    .bn-auth-modal .bn-apple-btn:hover {
        background: #1a1a1a;
    }
    </style>
        <style id="bn-google-login-styles">
    .bn-login-btn-google {
        margin-top: 12px;
        background: rgba(66, 133, 244, 0.2);
        color: rgba(138, 180, 248, 0.95);
        border: 1px solid rgba(66, 133, 244, 0.35);
    }
    .bn-login-btn-google:hover {
        background: rgba(66, 133, 244, 0.3);
        color: #fff;
    }
    .bn-login-btn-google svg { flex-shrink: 0; }
    </style>
    		<script data-cfasync="false">
			document.documentElement.className = document.documentElement.className.replace('no-js', 'js');
		</script>
				<style>
			.no-js img.lazyload {
				display: none;
			}

			figure.wp-block-image img.lazyloading {
				min-width: 150px;
			}

			.lazyload,
			.lazyloading {
				--smush-placeholder-width: 100px;
				--smush-placeholder-bg-max-width: 120px;
				--smush-placeholder-aspect-ratio: 1/1;
				width: var(--smush-image-width, var(--smush-placeholder-width)) !important;
				aspect-ratio: var(--smush-image-aspect-ratio, var(--smush-placeholder-aspect-ratio)) !important;
			}

						.lazyload, .lazyloading {
				opacity: 0;
			}

			.lazyloaded {
				opacity: 1;
				transition: opacity 400ms;
				transition-delay: 0ms;
			}

					</style>
		<meta name="generator" content="Elementor 3.35.5; features: additional_custom_breakpoints; settings: css_print_method-external, google_font-enabled, font_display-auto">
<style>.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>			<style>
				.e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload),
				.e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload) * {
					background-image: none !important;
				}
				@media screen and (max-height: 1024px) {
					.e-con.e-parent:nth-of-type(n+3):not(.e-lazyloaded):not(.e-no-lazyload),
					.e-con.e-parent:nth-of-type(n+3):not(.e-lazyloaded):not(.e-no-lazyload) * {
						background-image: none !important;
					}
				}
				@media screen and (max-height: 640px) {
					.e-con.e-parent:nth-of-type(n+2):not(.e-lazyloaded):not(.e-no-lazyload),
					.e-con.e-parent:nth-of-type(n+2):not(.e-lazyloaded):not(.e-no-lazyload) * {
						background-image: none !important;
					}
				}
			</style>
						<meta name="theme-color" content="#000000">
			<link rel="icon" href="https://bassnectar.net/wp-content/uploads/2026/01/cropped-maskable_icon-32x32.png" sizes="32x32" />
<link rel="icon" href="https://bassnectar.net/wp-content/uploads/2026/01/cropped-maskable_icon-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon" href="https://bassnectar.net/wp-content/uploads/2026/01/cropped-maskable_icon-180x180.png" />
<meta name="msapplication-TileImage" content="https://bassnectar.net/wp-content/uploads/2026/01/cropped-maskable_icon-270x270.png" />
<style id="bn-holo-overrides">.bn-holo-card{width: 300px;height: 350px;border-radius: 12px;background-color: #0a0a0c}.bn-holo-shine{filter:brightness(1) contrast(1) saturate(1);--bassdrop-size:30px;--sunpillar-1:#ff3333;--sunpillar-2:#00ccff;--sunpillar-3:#00ff66;--sunpillar-4:#ffff00;--sunpillar-5:#cc44ff}</style>    <style id="bn-header-skin-css">
    /* Dark skin CSS custom properties */
    :root {
        --bn-dark-bg: #0a0a0a;
        --bn-dark-border: rgba(255, 255, 255, 0.15);
        --bn-dark-border-subtle: rgba(255, 255, 255, 0.1);
        --bn-dark-divider: rgba(255, 255, 255, 0.12);
        --bn-dark-text: #ffffff;

        /* Transparent skin CSS custom properties */
        --bn-transparent-blur: 20px;
        --bn-transparent-saturate: 180%;
        --bn-transparent-overlay: rgba(10, 10, 10, 0.5);
        --bn-transparent-border: rgba(10, 10, 10, 0.08);
        --bn-transparent-border-accent: rgba(10, 10, 10, 0.12);
        --bn-transparent-playlist-bg: rgba(10, 10, 10, 0.94);
        --bn-transparent-text: #ffffff;

        /* Liquid Glass skin CSS custom properties */
        --bn-liquid-glass-bg: rgba(64, 64, 64, 0.55);
        --bn-liquid-glass-overlay: rgba(64, 64, 64, 0.35);
        --bn-liquid-glass-blur: 3px;
        --bn-liquid-glass-accent1: rgba(255, 184, 234, 0.5);
        --bn-liquid-glass-accent2: rgba(164, 255, 239, 0.6);
        --bn-liquid-glass-accent3: rgba(168, 150, 255, 0.5);
        --bn-liquid-glass-accent1-solid: rgb(255, 184, 234);
        --bn-liquid-glass-accent2-solid: rgb(164, 255, 239);
        --bn-liquid-glass-accent3-solid: rgb(168, 150, 255);
        --bn-liquid-glass-hover: rgba(164, 255, 239, 0.08);
        --bn-liquid-glass-active: rgba(164, 255, 239, 0.12);
        --bn-liquid-glass-tab-active: rgba(164, 255, 239, 0.1);

        /* Omakase skin CSS custom properties from admin settings */
        --bn-omakase-glass-bg: rgba(64, 64, 64, 0.01);
        --bn-omakase-blur: 40px;
        --bn-omakase-overlay-bg: rgba(64, 64, 64, 0.01);
        --bn-omakase-accent1: rgba(255, 184, 234, 0.5);
        --bn-omakase-accent2: rgba(164, 255, 239, 0.6);
        --bn-omakase-accent3: rgba(168, 150, 255, 0.5);
        --bn-omakase-accent1-solid: rgb(255, 184, 234);
        --bn-omakase-accent2-solid: rgb(164, 255, 239);
        --bn-omakase-accent3-solid: rgb(168, 150, 255);

        
        /* Custom skin: vaults (base: dark) */
        --bn-custom-vaults-bg: #000000;
        --bn-custom-vaults-border: rgba(102, 102, 102, 0.15);
        --bn-custom-vaults-border-subtle: rgba(102, 102, 102, 0.1);
        --bn-custom-vaults-text: #ffffff;
        --bn-custom-vaults-bg-image: url('https://bassnectar.net/wp-content/uploads/ReliveRemix11BLANK-ART-scaled.jpg');
        --bn-custom-vaults-bg-size: cover;

        /* Custom skin: gold (base: liquid_glass) */
        --bn-custom-gold-bg: rgba(64, 64, 64, 0.55);
        --bn-custom-gold-accent1: rgba(255, 184, 234, 0.5);
        --bn-custom-gold-accent2: rgba(164, 255, 239, 0.6);
    }
    </style>
    <link rel="icon" href="https://bassnectar.net/wp-content/uploads/2026/01/cropped-maskable_icon-32x32.png" sizes="32x32" />
<link rel="icon" href="https://bassnectar.net/wp-content/uploads/2026/01/cropped-maskable_icon-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon" href="https://bassnectar.net/wp-content/uploads/2026/01/cropped-maskable_icon-180x180.png" />
<meta name="msapplication-TileImage" content="https://bassnectar.net/wp-content/uploads/2026/01/cropped-maskable_icon-270x270.png" />
</head>
<body class="home wp-singular page-template-default page page-id-3050 wp-custom-logo wp-theme-sonaar wp-child-theme-sonaar-child bn-skin-transparent lang-en-US layout-wide sr-over-content fixed_header _bassnectar elementor-default elementor-kit-4216 elementor-page elementor-page-3050">
	<div id="overlay"><div class="perspective"></div></div>
	
				<div class="sonaar-menu-box"><div class="side-menu">
	<div class="content-menu">
				<a class="site-title" rel="home" href="https://bassnectar.net/" title="BASSNECTAR">
			<img class="logo-desktop regular" src="https://bassnectar.net/wp-content/uploads/2026/01/bassnectar-logo-white1000.png" srcset="https://bassnectar.net/wp-content/uploads/2026/01/bassnectar-logo-white1000.png 1x,https://bassnectar.net/wp-content/uploads/2026/01/bassnectar-logo-white1000.png 2x" alt="BASSNECTAR">
			<img class="logo-mobile regular" src="https://bassnectar.net/wp-content/uploads/2026/01/bassnectar-logo-white1000.png" srcset="https://bassnectar.net/wp-content/uploads/2026/01/bassnectar-logo-white1000.png 1x,https://bassnectar.net/wp-content/uploads/2026/01/bassnectar-logo-white1000.png 2x" alt="BASSNECTAR">
		</a>
		

		<!-- panel -->
		<div class="panel">
			<a class="opener" href="#"><i class="icon-reorder"></i> Menu</a>

			<!-- nav-holder -->
			<div class="nav-holder">

				<!-- nav -->
				<nav id="nav">
										
				</nav>
				<div class="clear"></div>

				<div class="panel-networks">
						<!-- social-networks -->
	<ul class="social-networks">
						  
			<li>
				<a target="_blank" href="https://facebook.com/envato">
											<i class="fa-brands fa-facebook" title="Facebook"></i>
									</a>
			</li>
								  
			<li>
				<a target="_blank" href="http://www.instagram.com">
											<i class="fa-brands fa-instagram" title="Instagram"></i>
									</a>
			</li>
								  
			<li>
				<a target="_blank" href="http://www.soundcloud.com/bassnectar">
											<i class="fa-brands fa-soundcloud" title="Soundcloud"></i>
									</a>
			</li>
			
	</ul>
					<div class="clear"></div>
				</div>

			</div>
		</div>
	</div>
</div>				<header class="opacityzero">						<div class="menu-toggle ">
								<span class="svgfill"></span>
								<span class="svgfill"></span>
								<span class="svgfill"></span>
						</div>						<a href="https://bassnectar.net/" class="site-logo" title="BASSNECTAR">							<img id="menu-trigger" class="logo desktop regular" src="https://bassnectar.net/wp-content/uploads/2026/01/bassnectar-logo-white1000.png" srcset="https://bassnectar.net/wp-content/uploads/2026/01/bassnectar-logo-white1000.png 1x,https://bassnectar.net/wp-content/uploads/2026/01/bassnectar-logo-white1000.png 2x" alt="BASSNECTAR">								<img id="menu-trigger-mobile" class="logo mobile regular" src="https://bassnectar.net/wp-content/uploads/2026/01/bassnectar-logo-white1000.png" alt="BASSNECTAR">						</a>
				</header>
					</div>
		<div id="pusher-wrap" class="pusher-type-push-menu">
			<div id="pusher" class="menu-type-push-menu">
			<div class="pjax-container">
		<div id="wrapper" class="wrapper"> <script data-cfasync="false">
/* Greatest Hits launch (2026-05-19): aggressive SW staleness check.
   Installed PWAs with old SW versions are still serving the cached
   /vaults/ page. Trigger an update on every page load (cheap — no-op
   when SW is already current) and, if the controller reports a version
   older than the one we expect, send FORCE_UPDATE to make it skip
   waiting + claim immediately. */
(function () {
  if (!('serviceWorker' in navigator)) return;

  var EXPECTED_SW_VERSION = '3.5.5';

  function versionLessThan(a, b) {
    var aa = String(a).split('.').map(function (n) { return parseInt(n, 10) || 0; });
    var bb = String(b).split('.').map(function (n) { return parseInt(n, 10) || 0; });
    for (var i = 0; i < Math.max(aa.length, bb.length); i++) {
      var x = aa[i] || 0, y = bb[i] || 0;
      if (x < y) return true;
      if (x > y) return false;
    }
    return false;
  }

  // 1. Cheap unconditional update check — pulls fresh SW bytes if any.
  navigator.serviceWorker.getRegistration().then(function (reg) {
    if (reg && typeof reg.update === 'function') {
      try { reg.update(); } catch (_) {}
    }
  });

  // 2. Version probe. If the active SW is older than what this page
  //    expects, send FORCE_UPDATE so it skipWaiting() + claim()s.
  var controller = navigator.serviceWorker.controller;
  if (!controller) return; // No active SW yet (first visit / hard reload).

  var channel = new MessageChannel();
  var settled = false;
  var timeout = setTimeout(function () {
    if (settled) return;
    settled = true;
    // SW didn't reply within 2s — assume stale and force update.
    try { controller.postMessage({ type: 'FORCE_UPDATE' }); } catch (_) {}
  }, 2000);

  channel.port1.onmessage = function (e) {
    if (settled) return;
    settled = true;
    clearTimeout(timeout);
    var v = e && e.data && e.data.version;
    if (v && versionLessThan(v, EXPECTED_SW_VERSION)) {
      try { controller.postMessage({ type: 'FORCE_UPDATE' }); } catch (_) {}
    }
  };

  try {
    controller.postMessage({ type: 'GET_SW_VERSION' }, [channel.port2]);
  } catch (_) {
    clearTimeout(timeout);
  }
})();
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dseg@0.46.0/css/dseg.css" media="all" />
<!-- v0.12.2 — Spotify IFrame API. Loaded async; the JS bootstrap waits
     for window.onSpotifyIframeApiReady to fire before creating the
     persistent controller that handles loadUri() on track clicks. -->
<script data-cfasync="false" src="https://open.spotify.com/embed/iframe-api/v1" async></script>
<main id="primary" class="bn-gh-page bn-gh-phase-voting" data-pjax-container data-bn-gh-root>

  <!-- v0.14.130 (exploratory): glitch video background promoted to a
       page-level decoration. Spans 100vw, anchored to the top of
       .bn-gh-page (top: 0 inside the .bn-gh-page's own
       padding-top — does NOT bleed into the fixed BN site header
       above). Height is tuned to extend through the hero + intro
       cells + auth row + search panel + album rail. The adjacent
       .bn-gh-page__bgvideo-fade overlays the bottom of the video
       with a transparent → page-bg gradient so it dissolves into
       the page around the rail divider. To remove: delete the two
       elements below and the .bn-gh-page__bgvideo* CSS in
       bn-gh-hero.css. Tunable via --bgvideo-opacity, --bgvideo-h,
       --bgvideo-fade-h on .bn-gh-page (see CSS). -->
  <video
    class="bn-gh-page__bgvideo"
    data-bn-gh-bgvideo
    autoplay
    loop
    muted
    playsinline
    preload="auto"
    aria-hidden="true"
    tabindex="-1"
    poster=""
    src="https://bassnectar.net/wp-content/plugins/bn-greatest-hits/assets/video/hero-bg-final.mp4"
  ></video>
  <div class="bn-gh-page__bgvideo-fade" aria-hidden="true"></div>

  <!-- v0.14.61 ctxdc: hero + intro grid — restructured to Eric's
       design screenshot. Eyebrow + BASSNECTAR namebox + GREATEST HITS
       VOL 1 + tagline, then three content blocks: THE_MISSION /
       HOW_IT_WORKS (4 numbered steps) / RULES (with multiplier tiers
       + VOTE • SHARE • WIN footer). Removed: CONST CAMPAIGN sub,
       STATUS/PHASE/CURATORS meta strip, CONTESTS cell, TIMELINE cell
       (none of those are in the new design). Reversible: delete this
       whole `<section class="bn-gh-ctxdc__hero-wrap">…</section>`
       block to remove. -->
  <section class="bn-gh-ctxdc__hero-wrap" aria-label="Campaign introduction">

    <!-- Hero -->
    <header class="bn-gh-ctxdc__hero" data-bn-gh-ctxdc-reveal>
      <!-- v0.14.114 per Eric: eyebrow changed to "// COMING SOON". -->
      <span class="bn-gh-ctxdc__hero-eyebrow">// COMING SOON</span>
      <h1 class="bn-gh-ctxdc__hero-title">
        <!-- v0.14.114 per Eric: logo + tagline now share a horizontal
             row at the top of the hero. The tagline (three stacked
             slogan lines) sits to the right of the SVG wordmark; the
             old single-line `<p class="bn-gh-ctxdc__hero-tagline">`
             below the title is gone. "Greatest Hits Vol 1" stays
             below the logo row as the big headline. -->
        <span class="bn-gh-ctxdc__hero-namerow">
          <span class="bn-gh-ctxdc__hero-logo">
            <img
              data-src="https://bassnectar.net/wp-content/plugins/bn-greatest-hits/assets/img/bassnectar-logo-green.svg"
              alt=""
              aria-hidden="true"
              class="bn-gh-ctxdc__hero-logo-img lazyload"
 src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==" />
            <span class="screen-reader-text">Bassnectar</span>
          </span>
          <span class="bn-gh-ctxdc__hero-slogan" aria-hidden="true">
            <span class="bn-gh-ctxdc__hero-slogan-line">// FAN-CURATED.</span>
            <span class="bn-gh-ctxdc__hero-slogan-line">// COMMUNITY-DRIVEN.</span>
            <span class="bn-gh-ctxdc__hero-slogan-line">// THE ULTIMATE BASSNECTAR COMPILATION</span>
          </span>
        </span>
        <span class="bn-gh-ctxdc__hero-line-2">
          <span class="bn-gh-ctxdc__hero-title-rest">Greatest Hits <span class="bn-gh-ctxdc__hero-vol">Vol 1</span></span>
        </span>
      </h1>
    </header>

    <!-- v0.14.162 — 3-column layout on desktop:
         col 1 = THE_MISSION (static, always visible),
         col 2 = nav headlines for //02-//05 (built by JS),
         col 3 = content panel showing the .is-active cell.
         On mobile the JS nav is hidden, MISSION renders first as
         a normal block, then //02-//05 stack below as accordion
         cells (v0.14.149/v0.14.157 behaviour preserved via their
         --how / --rules / --how-to-vote / --contest modifiers and
         the data-bn-gh-accordion-toggle hooks in bn-greatest-hits.js). -->
    <div class="bn-gh-ctxdc__sections-stack" data-bn-gh-sections-stack>

      <!-- v0.14.162 — MISSION cell (now full-width row 1 on tablet+desktop).
           v0.14.172 per Eric: removed the bassdrop watermark from this
           cell; it now lives as a separate grid child of the
           sections-stack (see below the //02-//05 articles) so it can
           anchor to the bottom of the nav column (col 1) instead of
           inside MISSION. -->
      <article class="bn-gh-ctxdc__intro-cell bn-gh-ctxdc__intro-cell--wide bn-gh-ctxdc__intro-cell--mission bn-gh-ctxdc__intro-cell--sections-mission" data-bn-gh-ctxdc-reveal data-bn-gh-section-mission>
        <span class="bn-gh-ctxdc__section-label"><span class="bn-gh-ctxdc__section-num">00</span> <span class="bn-gh-ctxdc__section-title">THE MISSION</span></span>
        <p class="bn-gh-ctxdc__intro-body">
          This isn't just a compilation — it's YOUR compilation. For the first time
          ever, the Bassnectar community gets to decide which tracks make
          the cut. The nomination phase is complete and the community has spoken &mdash;
          the top 50 tracks have been chosen. Now it's time to vote.
          Each weekly round locks in the next 5 tracks on the compilation. This is
          the Greatest Hits &mdash; chosen by you.
        </p>
      </article>

      <article class="bn-gh-ctxdc__intro-cell bn-gh-ctxdc__intro-cell--wide bn-gh-ctxdc__intro-cell--how" data-bn-gh-ctxdc-reveal data-bn-gh-section-cell="how">
        <span class="bn-gh-ctxdc__section-label"><span class="bn-gh-ctxdc__section-num">01</span> <span class="bn-gh-ctxdc__section-title">HOW IT WORKS</span></span>

        <div class="bn-gh-phase bn-gh-phase--complete">
          <div class="bn-gh-phase__header">
            <h3 class="bn-gh-ctxdc__step-h">SEARCH &amp; NOMINATE TRACKS</h3>
            <span class="bn-gh-phase__badge bn-gh-phase__badge--complete">&check; COMPLETE</span>
          </div>
          <p class="bn-gh-ctxdc__step-body">Browse the full Bassnectar discography directly on this page &mdash; every studio album, mixtape, single, and live cut Lorin has released. Search by track title, album name, or year to surface what you want fast. The nomination phase is now complete &mdash; the community nominated their favorites and the top 50 most-nominated tracks have advanced to the voting phase.</p>
        </div>

        <div class="bn-gh-phase bn-gh-phase--active">
          <div class="bn-gh-phase__header">
            <h3 class="bn-gh-ctxdc__step-h">VOTE FOR TRACKS</h3>
            <span class="bn-gh-phase__badge bn-gh-phase__badge--active">ACTIVE &mdash; ROUND 3 OF 4</span>
          </div>
          <p class="bn-gh-ctxdc__step-body">The nomination phase is complete and 50 tracks have made the cut. Each weekly voting round locks in 5 final compilation tracks based on community vote totals. We are currently in Round 3 of voting &mdash; vote for the next 5 tracks to make it onto the Greatest Hits compilation. Share with friends, post on socials, and rally votes for your favorites. Multipliers stack with active Vaults subscriptions so members carry the heaviest weight in shaping the final tracklist.</p>
        </div>

        <div class="bn-gh-phase bn-gh-phase--upcoming">
          <div class="bn-gh-phase__header">
            <h3 class="bn-gh-ctxdc__step-h">TRACK VS TRACK BATTLE</h3>
            <span class="bn-gh-phase__badge bn-gh-phase__badge--upcoming">BEGINS IN 4 WEEKS</span>
          </div>
          <p class="bn-gh-ctxdc__step-body">After all weekly rounds finish, the winning tracks face off head-to-head in a bracket-style elimination to decide tracklist order. Each match-up is decided by community vote &mdash; the track with more votes advances and earns a higher position on the compilation. The whole bracket plays out live so the community can watch the final running order get built in real time.</p>
        </div>

        <div class="bn-gh-phase bn-gh-phase--upcoming">
          <div class="bn-gh-phase__header">
            <h3 class="bn-gh-ctxdc__step-h">COMPILATION RELEASE</h3>
            <span class="bn-gh-phase__badge bn-gh-phase__badge--upcoming">COMING SOON</span>
          </div>
          <p class="bn-gh-ctxdc__step-body">The finished tracklist drops as the first-ever fan-curated Bassnectar Greatest Hits compilation, available on every major streaming platform and as a limited physical release for collectors. Compilation credits include every voter who helped shape the project plus a permanent record of the campaign on bassnectar.net.</p>
        </div>
      </article>

      <article class="bn-gh-ctxdc__intro-cell bn-gh-ctxdc__intro-cell--wide bn-gh-ctxdc__intro-cell--rules" data-bn-gh-ctxdc-reveal data-bn-gh-section-cell="rules">
        <span class="bn-gh-ctxdc__section-label"><span class="bn-gh-ctxdc__section-num">02</span> <span class="bn-gh-ctxdc__section-title">RULES</span></span>

        <h3 class="bn-gh-ctxdc__rule-h">TRACK ELIGIBILITY</h3>
        <p class="bn-gh-ctxdc__rule-body">Every track in the catalogue is eligible &mdash; studio albums, singles, collaborations, remixes, and live cuts spanning the full Bassnectar discography. The same track can only appear once on the final compilation, even if it exists in multiple versions (original, remix, live). If multiple versions of the same track all receive votes, the highest-voted version wins the spot.</p>

        <h3 class="bn-gh-ctxdc__rule-h">24 HOUR RESET</h3>
        <p class="bn-gh-ctxdc__rule-body">Nominations and votes reset daily at 00:00 UTC. You can come back every day and re-cast or change your selections &mdash; the campaign rewards consistent participation. Daily voting is the single biggest factor in getting your favorite tracks onto the compilation, so check in each day, share your picks, and rally your friends to do the same.</p>

        <h3 class="bn-gh-ctxdc__rule-h">MAKE YOUR VOTE COUNT MORE</h3>
        <p class="bn-gh-ctxdc__rule-body">
          Active Vaults subscribers get vote multipliers stacked on top of their daily votes:<br />
          3x &mdash; Gold / Unlocked Subscribers<br />
          2x &mdash; Freestyle Subscribers<br />
          1x &mdash; Guests &amp; non-subscribers<br />
          Sign in to your Bassnectar Vaults account before voting to make sure your multiplier applies. Guests can still vote at base weight.
        </p>

        <h3 class="bn-gh-ctxdc__rule-h">VOTE, SHARE &amp; WIN</h3>
        <p class="bn-gh-ctxdc__rule-body">Every action you take &mdash; voting, commenting on social posts, sharing the campaign, building Spotify/Apple Music playlists from your nominations &mdash; counts as a separate entry into the weekly prize drawings. Multiple entries per day are allowed; the more you engage, the higher your odds when the giveaway runs.</p>
      </article>

      <article class="bn-gh-ctxdc__intro-cell bn-gh-ctxdc__intro-cell--wide bn-gh-ctxdc__intro-cell--how-to-vote" data-bn-gh-ctxdc-reveal data-bn-gh-section-cell="how-to-vote">
        <span class="bn-gh-ctxdc__section-label"><span class="bn-gh-ctxdc__section-num">03</span> <span class="bn-gh-ctxdc__section-title">HOW TO VOTE</span></span>

        <!-- v0.14.188: phase-specific step. CSS toggles which one
             shows based on .bn-gh-phase-voting on the page root. -->
        <div class="bn-gh-phase-nom-only">
          <h3 class="bn-gh-ctxdc__step-h">ROUND 1: NOMINATE YOUR FAVORITE TRACKS</h3>
          <p class="bn-gh-ctxdc__step-body">During the nomination phase you'll select your favorite Bassnectar tracks you'd like in consideration for inclusion on the Greatest Hits compilation. Browse or search tracks &amp; click &ldquo;nominate&rdquo; to lock in your selections. You can choose up to 50 tracks per day. Nominations register automatically, but your selections can be updated, changed, or removed at anytime during the daily nomination period. Nominations are locked in daily at 00:00 UTC. You can re-submit your nominations daily to increase the chances of your favorite tracks being included in the first 50 track pool.</p>
        </div>
        <div class="bn-gh-phase-vote-only">
          <h3 class="bn-gh-ctxdc__step-h">VOTE FOR THE FINAL TRACKLIST</h3>
          <p class="bn-gh-ctxdc__step-body">The top 50 most-nominated tracks from Round 1 are now in the voting pool. Browse the pool, play any track, and vote for the ones you most want on the compilation. Each weekly round locks in 5 tracks &mdash; we're currently voting on the next 5. You can cast one vote per track every 24 hours &mdash; revisit daily and rally your favorites. Vaults multipliers stack on every vote you cast.</p>
        </div>

        <h3 class="bn-gh-ctxdc__step-h">MULTIPLY YOUR VOTING POWER</h3>
        <p class="bn-gh-ctxdc__step-body">Vaults subscribers (gold / unlocked) votes count 3X (1 vote = 3). Vaults freestyle subscribers count 2X (1 vote = 2). Guest votes count 1X (1 vote = 1).</p>

        <h3 class="bn-gh-ctxdc__step-h">CREATE A PLAYLIST</h3>
        <p class="bn-gh-ctxdc__step-body">Submit a playlist of your selections &mdash; Click the &ldquo;create playlist&rdquo; in the right column to automatically build and submit your selections as a playlist on Spotify or Apple Music. Playlists can be submitted daily.</p>

        <h3 class="bn-gh-ctxdc__step-h">COMMENT ON SOCIAL POSTS</h3>
        <p class="bn-gh-ctxdc__step-body">You can also cast additional votes by replying to social posts about the greatest hits campaign.</p>
      </article>

      <article class="bn-gh-ctxdc__intro-cell bn-gh-ctxdc__intro-cell--wide bn-gh-ctxdc__intro-cell--contest" data-bn-gh-ctxdc-reveal data-bn-gh-section-cell="contest">
        <span class="bn-gh-ctxdc__section-label"><span class="bn-gh-ctxdc__section-num">04</span> <span class="bn-gh-ctxdc__section-title">CONTEST &amp; PRIZES</span></span>

        <h3 class="bn-gh-ctxdc__step-h">WEEKLY PRIZE BUNDLE</h3>
        <p class="bn-gh-ctxdc__step-body">Every week of the campaign one voter wins the full Bassnectar Greatest Hits bundle: the digital compilation, vinyl record, CD, official campaign T-shirt, limited enamel pin, and a permanent thank-you credit on the compilation sleeve. Bundles ship to winners after the compilation drops. Multiple weekly winners across the campaign &mdash; the more weeks you participate, the more chances you have at the bundle.</p>

        <h3 class="bn-gh-ctxdc__step-h">HOW TO WIN</h3>
        <p class="bn-gh-ctxdc__step-body">Each weekly phase ends with a drawing pulled from everyone who voted that week. You can boost your odds by voting on the landing page, voting on social media, sharing posts, and submitting Spotify/Apple Music playlists from your nominations. Daily participation across all surfaces can rack up 20+ entries per week per voter. No purchase necessary &mdash; guests are eligible at the same base rate as subscribers.</p>

        <h3 class="bn-gh-ctxdc__step-h">ENTRY METHODS</h3>
        <p class="bn-gh-ctxdc__step-body">Entries are earned from any of the following actions: voting from the campaign landing page, commenting on official Bassnectar campaign posts on Instagram / X / Discord, sharing the campaign on socials with the official hashtag, and submitting a curated playlist on Spotify or Apple Music. Every action counts independently; you can earn entries from multiple methods on the same day.</p>
      </article>

      <!-- v0.14.172 per Eric: bassdrop watermark moved out of the
           MISSION cell and into the sections-stack as a direct grid
           child. CSS places it into col 1 (the nav column) with
           align-self: end so it anchors at the bottom of the nav
           rail. Hidden on mobile via display:none in the
           @media (max-width: 720px) rule (mobile is stacked
           accordions; no nav rail to anchor under). -->
      <img
        data-src="https://bassnectar.net/wp-content/plugins/bn-greatest-hits/assets/img/bassdrop-green.svg"
        alt=""
        aria-hidden="true"
        class="bn-gh-ctxdc__sections-bassdrop lazyload"
        data-bn-gh-sections-bassdrop
 src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==" />

            <script data-cfasync="false" type="application/json" id="bn-gh-sections-meta">[{"key":"how","num":"01","title":"HOW IT WORKS"},{"key":"rules","num":"02","title":"RULES"},{"key":"how-to-vote","num":"03","title":"HOW TO VOTE"},{"key":"contest","num":"04","title":"CONTEST \u0026 PRIZES"}]</script>

    </div>

  </section>
  <!-- /v0.14.61 ctxdc: hero + intro grid -->

  <!-- v0.14.116 per Eric: the standalone TOP AUTH BAR is gone —
       auth buttons now live inside the search panel (see below)
       above the TRACK SEARCH & NOMINATE title. -->

  <!-- v0.14.52 ctxdc: stats strip — DISABLED v0.14.53 per Eric (data
       is good but not for public view). Markup commented out so it
       can be re-enabled cleanly. The JS helper updateCtxdcStats() in
       bn-greatest-hits.js still runs on every /state poll but its
       setText calls no-op against missing selectors. To re-enable
       for an admin view, uncomment the block below.
  <section class="bn-gh-ctxdc__stats" aria-label="Campaign stats">
    <div class="bn-gh-ctxdc__stat">
      <span class="bn-gh-ctxdc__stat-label">TOTAL NOMS</span>
      <span class="bn-gh-ctxdc__stat-value" data-bn-gh-ctxdc-stat="totalNoms">—</span>
    </div>
    <div class="bn-gh-ctxdc__stat">
      <span class="bn-gh-ctxdc__stat-label">UNIQUE TRACKS</span>
      <span class="bn-gh-ctxdc__stat-value" data-bn-gh-ctxdc-stat="uniqueTracks">—</span>
    </div>
    <div class="bn-gh-ctxdc__stat">
      <span class="bn-gh-ctxdc__stat-label">UNIQUE VOTERS</span>
      <span class="bn-gh-ctxdc__stat-value" data-bn-gh-ctxdc-stat="uniqueVoters">—</span>
    </div>
    <div class="bn-gh-ctxdc__stat">
      <span class="bn-gh-ctxdc__stat-label">DAYS LEFT</span>
      <span class="bn-gh-ctxdc__stat-value" data-bn-gh-ctxdc-stat="daysLeft">—</span>
    </div>
  </section>
  -->

  <!-- ──────────────── INDEPENDENT-SCROLL HUD BODY ──────────────── -->
  <section class="bn-gh-hud">

    <!-- v0.13.13: LEFT panel — two stacked 50%-height blocks. The
         tabbed leaderboard/browser swap is gone; both content areas
         are visible at all times with independent vertical scroll. -->
    <div class="bn-gh-crt" data-bn-gh-crt>
      <div class="bn-gh-crt__scanlines" aria-hidden="true"></div>
      <div class="bn-gh-crt__vignette" aria-hidden="true"></div>

      <!-- Top block: Track Search & Nominate (search + album browser). -->
      <section class="bn-gh-crt__block bn-gh-crt__block--search" data-bn-gh-block="search">
        <!-- v0.14.116 per Eric: auth block lives INSIDE this section,
             above the TRACK SEARCH & NOMINATE title. Title row reads
             "Sign into your Bassnectar Vaults account or Sign Up";
             below it sit the two pill buttons.
             v0.14.152 per Eric: only render this block when the user
             is NOT logged in. WordPress login is a redirect-based
             flow (wp-login.php → back to /greatest-hits/) so the
             page reload that follows sign-in re-runs PHP and the
             block disappears naturally. updateAuth() in
             bn-greatest-hits.js also hides any leftover wrapper as
             belt-and-braces in case a same-page login ever happens. -->
                <section class="bn-gh-crt__auth" data-bn-gh-crt-auth>
          <header class="bn-gh-crt__auth-h">
            <!-- v0.14.118 per Eric -->
            Sign in to your Bassnectar Vaults subscription or Create Account
          </header>
          <div class="bn-gh-crt__auth-row" data-bn-gh-auth-row>
            <a class="bn-gh-btn bn-gh-btn--primary bn-gh-btn--hero" data-bn-gh-login  href="#">SIGN IN</a>
            <a class="bn-gh-btn bn-gh-btn--primary bn-gh-btn--hero" data-bn-gh-signup href="#">CREATE ACCOUNT</a>
          </div>
        </section>
        
        <header class="bn-gh-crt__block-head">
          <!-- v0.14.59 ctxdc: section label + IMPORT { DISCOGRAPHY } title
               removed per Eric. Original markup retained in git history
               (last present in v0.14.58). -->
          <span class="bn-gh-crt__block-title">
            <span class="bn-gh-crt__title-glyph" aria-hidden="true">⌕</span>
            <span data-bn-gh-search-heading>TRACK SEARCH &amp; VOTE</span>
          </span>
        </header>
        <!-- v0.14.191 per Eric: voting-phase intro explainer between
             heading and search bar. Only visible during voting phase
             via .bn-gh-phase-vote-only (JS toggles display). -->
        <p class="bn-gh-phase-vote-only" style="
          font-family: var(--gh-font-mono);
          font-size: 13px;
          line-height: 1.55;
          letter-spacing: 0.04em;
          color: rgba(255,255,255,0.5);
          margin: 0 18px 14px;
          padding: 0;
        ">These 50 tracks were nominated by fans during the nomination phase. Now it&rsquo;s time to vote &mdash; choose up to 5 tracks per day to lock onto the compilation.</p>
        <div class="bn-gh-crt__search bn-gh-crt__search--prominent">
          <!-- v0.14.113 per Eric: replaced the ⌕ unicode glyph with a
               larger, glowing SVG magnifying glass so the field reads
               unambiguously as a search bar. -->
          <span class="bn-gh-search__icon bn-gh-search__icon--svg" aria-hidden="true">
            <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <circle cx="9" cy="9" r="6.5" stroke="currentColor" stroke-width="1.6"/>
              <line x1="13.6" y1="13.6" x2="17.5" y2="17.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
            </svg>
          </span>
          <input
            type="search"
            class="bn-gh-search__input"
            data-bn-gh-search
            placeholder="Search tracks, albums, or artists…"
            autocomplete="off"
            spellcheck="false"
          />
          <span class="bn-gh-search__count" data-bn-gh-search-count></span>
          <button type="button" class="bn-gh-search__collapse" data-bn-gh-collapse-all hidden>COLLAPSE ALL</button>
          <!-- v0.16.3 per Eric: the inline close (X) button was removed.
               Tracks are meant to be visible at all times now, so a
               dismiss-results control no longer applies. The related JS
               dismiss handlers are all null-guarded, so removal is safe. -->
        </div>
        <div class="bn-gh-crt__block-scroll" data-bn-gh-block-scroll="search">
          <div class="bn-gh-crt__view bn-gh-crt__view--browser is-active" data-bn-gh-view-pane="browser">
            <section class="bn-gh-browser" data-bn-gh-browser aria-live="polite">
              <!-- v0.14.204: Track list intro — visible only in voting phase -->
              <div class="bn-gh-browser__loading" data-bn-gh-loading style="display:none">LOADING DISCOGRAPHY…</div>
              <ul class="bn-gh-search-results" data-bn-gh-search-results style="display:flex!important;flex-direction:column;gap:1px"></ul>
            </section>
          </div>
        </div>
      </section>

      <!-- v0.14.74: Bottom area — three-panel dashboard (leaderboard +
           globe + chart) replaces the single mode-switching block.
           Toggle buttons in the control bar above flip each panel on/off
           independently. The .bn-gh-dashboard wrapper carries data-show-*
           attributes (data-show-list / data-show-globe / data-show-chart)
           which CSS reads to apply the layout. JS in
           bn-gh-overhaul.js owns the state. -->
      <!-- v0.14.113 per Eric: dividing line between the album rail
           and the toggle-panels bar. Pure CSS hr — no semantic. -->
      <hr class="bn-gh-section-divider" aria-hidden="true" />

      <!-- v0.14.118 per Eric: each toggle is now a row with a label
           and a toggle-switch pill, matching the streaming-services
           toggle pattern from the right panel. The JS click handler
           reads data-bn-gh-mode on the <button> element; aria-pressed
           is still written there. The visual pill is a child .knob
           span styled by the existing .bn-gh-toggle-switch CSS plus
           an additive selector keying off aria-pressed (v0.14.118). -->
      <div class="bn-gh-dashboard-bar" data-bn-gh-dashboard-bar>
        <span class="bn-gh-dashboard-bar__hint">Toggle panels</span>
        <div class="bn-gh-mode-toggle bn-gh-mode-toggle--switches" data-bn-gh-mode-toggle role="group" aria-label="Toggle dashboard panels">
          <span class="bn-gh-mode-toggle__row">
            <span class="bn-gh-mode-toggle__label">GLOBAL TRACKER</span>
            <button type="button" class="bn-gh-mode-toggle__btn bn-gh-toggle-switch is-active" data-bn-gh-mode="globe" role="switch" aria-pressed="true" aria-checked="true" aria-label="Toggle Global Tracker panel">
              <span class="bn-gh-toggle-switch__knob" aria-hidden="true"></span>
            </button>
          </span>
          <span class="bn-gh-mode-toggle__row">
            <span class="bn-gh-mode-toggle__label">LEADERBOARD</span>
            <button type="button" class="bn-gh-mode-toggle__btn bn-gh-toggle-switch is-active" data-bn-gh-mode="list"  role="switch" aria-pressed="true" aria-checked="true" aria-label="Toggle Leaderboard panel">
              <span class="bn-gh-toggle-switch__knob" aria-hidden="true"></span>
            </button>
          </span>
          <span class="bn-gh-mode-toggle__row">
            <span class="bn-gh-mode-toggle__label">LIVE CHART</span>
            <button type="button" class="bn-gh-mode-toggle__btn bn-gh-toggle-switch is-active" data-bn-gh-mode="chart" role="switch" aria-pressed="true" aria-checked="true" aria-label="Toggle Live Chart panel">
              <span class="bn-gh-toggle-switch__knob" aria-hidden="true"></span>
            </button>
          </span>
        </div>
      </div>

      <div class="bn-gh-dashboard"
           data-bn-gh-dashboard
           data-show-list="1"
           data-show-globe="1"
           data-show-chart="1">

        <!-- v0.14.92: stacked layout per Eric.
             TOP ROW = Global Tracker (globe) at 100% width.
             BOTTOM ROW = Leaderboard 50% | Live Chart 50%.
             Each panel still has its expand button; focus mode now
             grows the focused panel while shrinking the others (they
             stay visible). -->

        <!-- TOP ROW — Global Tracker (globe), full width. -->
        <section class="bn-gh-crt__block bn-gh-dashboard__panel bn-gh-dashboard__panel--globe"
                 data-bn-gh-block="globe"
                 data-bn-gh-panel="globe">
          <header class="bn-gh-crt__block-head">
            <span class="bn-gh-crt__live bn-gh-crt__live--label">
              <span class="bn-gh-crt__live-dot" aria-hidden="true"></span>
              <span class="bn-gh-crt__live-text">GLOBAL TRACKER</span>
            </span>
            <span class="bn-gh-crt__block-head-meta">
              <span class="bn-gh-crt__head-status" data-bn-gh-globe-head-status>SCANNING…</span>
            </span>
          </header>
          <div class="bn-gh-crt__block-scroll" data-bn-gh-block-scroll="globe">
              <!-- v0.14.74: globe stage moved out of the leaderboard block.
                   bn-gh-overhaul.js no longer injects it dynamically; this
                   markup is the source of truth. -->
              <div class="bn-gh-globe-stage" data-bn-gh-globe-stage>
                <canvas class="bn-gh-globe-canvas" data-bn-gh-globe-canvas></canvas>
                <div class="bn-gh-globe-overlay" data-bn-gh-globe-overlay aria-hidden="true">
                  <div class="bn-gh-globe-overlay__label" data-bn-gh-latest-action-label>LATEST VOTE</div>
                  <div class="bn-gh-globe-overlay__track" data-bn-gh-globe-track>AWAITING TRANSMISSION</div>
                  <!-- v0.14.167 per Eric: new ALBUM | ARTIST line below the track title.
                       Populated by updateGlobeMeta() in bn-gh-overhaul.js. -->
                  <div class="bn-gh-globe-overlay__album" data-bn-gh-globe-album></div>
                  <div class="bn-gh-globe-overlay__voter" data-bn-gh-globe-voter>standing by…</div>
                </div>
                <div class="bn-gh-globe-status">
                  <span class="bn-gh-globe-status__dot"></span>
                  <span class="bn-gh-globe-status__text">SCANNING…</span>
                </div>
                <div class="bn-gh-globe-zoom" data-bn-gh-globe-zoom>
                  <button type="button" class="bn-gh-globe-zoom__btn" data-bn-gh-zoom="in"  aria-label="Zoom in">+</button>
                  <button type="button" class="bn-gh-globe-zoom__btn" data-bn-gh-zoom="out" aria-label="Zoom out">−</button>
                </div>
              </div>
            </div>
          </section>

        <!-- BOTTOM ROW — Leaderboard 50% | Live Chart 50%, side by side. -->
        <div class="bn-gh-dashboard__bottom" data-bn-gh-dashboard-bottom>

          <section class="bn-gh-crt__block bn-gh-crt__block--leaderboard bn-gh-dashboard__panel bn-gh-dashboard__panel--list"
                   data-bn-gh-block="leaderboard"
                   data-bn-gh-panel="list">
            <header class="bn-gh-crt__block-head">
              <span class="bn-gh-crt__live bn-gh-crt__live--label">
                <span class="bn-gh-crt__live-dot" aria-hidden="true"></span>
                <span class="bn-gh-crt__live-text">LIVE LEADERBOARD</span>
              </span>
            </header>
            <div class="bn-gh-crt__columns">
              <span class="bn-gh-crt__col bn-gh-crt__col--rank">#</span>
              <span class="bn-gh-crt__col bn-gh-crt__col--playh">▶︎</span>
              <!-- v0.14.189: art column only renders width in voting
                   phase. In nomination phase CSS collapses it so the
                   classic four-column layout stays intact. -->
              <span class="bn-gh-crt__col bn-gh-crt__col--art" aria-hidden="true"></span>
              <span class="bn-gh-crt__col bn-gh-crt__col--track">TRACK</span>
              <span class="bn-gh-crt__col bn-gh-crt__col--bar">SIGNAL</span>
              <span class="bn-gh-crt__col bn-gh-crt__col--pct">POPULARITY</span>
            </div>
            <div class="bn-gh-crt__block-scroll" data-bn-gh-block-scroll="leaderboard">
              <div class="bn-gh-crt__view bn-gh-crt__view--leaderboard is-active" data-bn-gh-view-pane="leaderboard">
                <ol class="bn-gh-crt__list" data-bn-gh-leaderboard></ol>
              </div>
            </div>
          </section>

          <section class="bn-gh-crt__block bn-gh-dashboard__panel bn-gh-dashboard__panel--chart"
                   data-bn-gh-block="chart"
                   data-bn-gh-panel="chart">
            <header class="bn-gh-crt__block-head">
              <span class="bn-gh-crt__live bn-gh-crt__live--label">
                <span class="bn-gh-crt__live-dot" aria-hidden="true"></span>
                <span class="bn-gh-crt__live-text">LIVE CHART</span>
              </span>
              <span class="bn-gh-crt__block-head-meta">
                <span class="bn-gh-crt__head-status">CEILING <b data-bn-gh-chart-ceiling>—</b></span>
              </span>
            </header>
            <div class="bn-gh-crt__block-scroll" data-bn-gh-block-scroll="chart">
              <div class="bn-gh-chart-stage" data-bn-gh-chart-stage>
                <div class="bn-gh-chart-stage__axis" data-bn-gh-chart-axis>
                  <span class="bn-gh-chart-stage__tick" data-y="100"></span>
                  <span class="bn-gh-chart-stage__tick" data-y="75"></span>
                  <span class="bn-gh-chart-stage__tick" data-y="50"></span>
                  <span class="bn-gh-chart-stage__tick" data-y="25"></span>
                  <span class="bn-gh-chart-stage__tick" data-y="0"></span>
                </div>
                <div class="bn-gh-chart-stage__scroll" data-bn-gh-chart-scroll>
                  <div class="bn-gh-chart-stage__bars" data-bn-gh-chart-bars></div>
                </div>
              </div><!-- /.bn-gh-chart-stage -->
            </div>
          </section>

        </div><!-- /.bn-gh-dashboard__bottom -->
      </div><!-- /.bn-gh-dashboard -->
    </div>

    <!-- RIGHT: instrument panel -->
    <aside class="bn-gh-panel" data-bn-gh-panel-scroll>

      <!-- v0.14.59 ctxdc: section label + CONST DEADLINE title removed
           per Eric. Countdown timer below is unchanged. Original markup
           retained in git history (last present in v0.14.58). -->

      <!-- Hero countdown FIRST
           v0.14.72: label renamed NOMINATION ROUND ENDS IN per Eric. -->
      <section class="bn-gh-panel__cell bn-gh-cd-big" data-bn-gh-hero-cd>
        <header class="bn-gh-panel__h" data-bn-gh-hero-cd-label>NOMINATION ROUND ENDS IN</header>
        <div class="bn-gh-cd-big__row" aria-live="polite">
          <span class="bn-gh-cd-big__cell"><span class="bn-gh-cd-big__seg" data-bn-gh-hero-d>--</span><label>D</label></span>
          <span class="bn-gh-cd-big__cell"><span class="bn-gh-cd-big__seg" data-bn-gh-hero-h>--</span><label>H</label></span>
          <span class="bn-gh-cd-big__cell"><span class="bn-gh-cd-big__seg" data-bn-gh-hero-m>--</span><label>M</label></span>
          <span class="bn-gh-cd-big__cell"><span class="bn-gh-cd-big__seg" data-bn-gh-hero-s>--</span><label>S</label></span>
        </div>
        <div class="bn-gh-cd-big__status" data-bn-gh-hero-cd-status hidden>ROUND COMPLETE</div>
      </section>

      <!-- v0.14.72: Daily reset countdown — counts down to the next UTC
           midnight, then loops. When this hits zero, the user's daily
           nomination cap resets server-side. Smaller, dimmer treatment
           than the hero countdown above (bn-gh-cd-small + bn-gh-cd-big__seg--small).
           HH:MM:SS only — no day cell since the window is always ≤24h. -->
      <!-- v0.14.121 per Eric: the DAILY NOMINATION LIMIT RESETS IN
           countdown was moved further down the right column to sit
           directly above NOMINATION HISTORY. See its new location
           below. -->

      <!-- CAMPAIGN STATS -->
      <section class="bn-gh-panel__cell bn-gh-stats">
        <header class="bn-gh-panel__h">CAMPAIGN</header>
        <dl class="bn-gh-stats__list">
          <div><dt>PHASE</dt><dd data-bn-gh-stat-phase>—</dd></div>
          <div><dt>ROUND</dt><dd data-bn-gh-stat-round>—</dd></div>
          <div><dt>TRACKS AVAILABLE</dt><dd data-bn-gh-stat-tracks>—</dd></div>
          <div><dt data-bn-gh-stat-limit-label>YOUR VOTES</dt><dd data-bn-gh-stat-limit>0 / 5</dd></div>
          <!-- v0.14.71: per Eric — show the user's vote multiplier in the
               campaign stats. Filled by applyState() from data.voter.multiplier
               which already comes from the same tier-resolution logic that
               powers vote weighting (Gold/Unlocked = 3x, Freestyle = 2x,
               Guest = 1x). -->
          <div><dt>YOUR VOTING POWER</dt><dd data-bn-gh-stat-power>—</dd></div>
        </dl>
      </section>

      <!-- v0.13.0: Streaming services — real brand logos, compact connect
           buttons, unified slide toggle, on-page modal trigger.
           v0.14.79: hidden by default per Eric — the page works fine with
           HTML5 audio preview fallback, so guests don't need to see the
           Spotify/Apple connect prompts. applyState() in
           bn-greatest-hits.js reveals this section once the voter is
           logged in OR a service is already connected. -->
      <section class="bn-gh-panel__cell bn-gh-services" data-bn-gh-services hidden>
        <header class="bn-gh-panel__h">STREAMING</header>

        <div class="bn-gh-services__buttons">
          <button type="button"
                  class="bn-gh-services__btn bn-gh-services__btn--spotify"
                  data-bn-gh-connect-spotify
                  aria-label="Connect Spotify">
            <span class="bn-gh-services__logo bn-gh-services__logo--spotify" aria-hidden="true">
              <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" focusable="false">
                <path fill="currentColor" d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.52 17.34a.75.75 0 0 1-1.03.25c-2.82-1.72-6.36-2.11-10.54-1.16a.75.75 0 1 1-.33-1.46c4.56-1.04 8.49-.6 11.65 1.34.36.22.47.69.25 1.03zm1.47-3.27a.94.94 0 0 1-1.29.31c-3.23-1.99-8.16-2.56-11.99-1.4a.94.94 0 1 1-.55-1.79c4.37-1.32 9.81-.69 13.51 1.59a.94.94 0 0 1 .32 1.29zm.13-3.41C15.32 8.41 8.7 8.18 5.07 9.29a1.13 1.13 0 1 1-.66-2.16c4.18-1.27 11.49-1 15.94 1.65a1.13 1.13 0 0 1-1.23 1.88z"/>
              </svg>
            </span>
            <span class="bn-gh-services__name">SPOTIFY</span>
            <span class="bn-gh-services__label" data-bn-gh-spotify-label>CONNECT</span>
          </button>
          
          <button type="button"
                  class="bn-gh-services__btn bn-gh-services__btn--apple"
                  data-bn-gh-connect-apple
                  aria-label="Connect Apple Music">
            <span class="bn-gh-services__logo bn-gh-services__logo--apple" aria-hidden="true">
              <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" focusable="false">
                <path fill="currentColor" d="M19.665 16.811a10.65 10.65 0 0 1-1.052 1.892c-.554.792-1.006 1.34-1.358 1.643-.546.498-1.13.753-1.756.766-.45 0-.99-.128-1.617-.385-.629-.256-1.207-.384-1.736-.384-.555 0-1.149.128-1.784.384-.636.257-1.149.391-1.541.404-.6.024-1.197-.231-1.796-.766-.381-.331-.853-.898-1.413-1.7-.605-.852-1.103-1.84-1.493-2.967-.418-1.215-.628-2.392-.628-3.532 0-1.305.282-2.43.846-3.376a4.96 4.96 0 0 1 1.778-1.795 4.78 4.78 0 0 1 2.404-.677c.477 0 1.103.146 1.882.435.776.291 1.275.437 1.494.437.164 0 .718-.172 1.66-.515.89-.318 1.643-.45 2.262-.397 1.673.135 2.93.79 3.768 1.972-1.497.91-2.236 2.184-2.222 3.816.013 1.272.474 2.33 1.38 3.17a4.51 4.51 0 0 0 1.376.91c-.111.32-.227.629-.354.926zM15.998 2.38c0 .974-.357 1.882-1.066 2.722-.857 1-1.892 1.575-3.014 1.484a3.04 3.04 0 0 1-.022-.367c0-.935.408-1.935 1.132-2.751.36-.413.819-.756 1.376-1.03.555-.27 1.082-.42 1.578-.444.014.13.02.26.02.388z"/>
              </svg>
            </span>
            <span class="bn-gh-services__name">APPLE MUSIC</span>
            <span class="bn-gh-services__label" data-bn-gh-apple-label>CONNECT</span>
          </button>
        </div>

        <!-- v0.13.8: Two iOS-style toggle switches. Each row: brand
             logo + label + the switch. Radio behaviour — turning one
             on turns the other off. Toggling on an unconnected
             service kicks off that service's auth flow. -->
        <div class="bn-gh-services__toggle" data-bn-gh-service-toggle hidden>
          <span class="bn-gh-services__toggle-label">PLAYBACK VIA</span>

          <div class="bn-gh-services__row" data-bn-gh-service-row="spotify">
            <span class="bn-gh-services__row-logo" aria-hidden="true">
              <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" focusable="false">
                <path fill="currentColor" d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.52 17.34a.75.75 0 0 1-1.03.25c-2.82-1.72-6.36-2.11-10.54-1.16a.75.75 0 1 1-.33-1.46c4.56-1.04 8.49-.6 11.65 1.34.36.22.47.69.25 1.03zm1.47-3.27a.94.94 0 0 1-1.29.31c-3.23-1.99-8.16-2.56-11.99-1.4a.94.94 0 1 1-.55-1.79c4.37-1.32 9.81-.69 13.51 1.59a.94.94 0 0 1 .32 1.29zm.13-3.41C15.32 8.41 8.7 8.18 5.07 9.29a1.13 1.13 0 1 1-.66-2.16c4.18-1.27 11.49-1 15.94 1.65a1.13 1.13 0 0 1-1.23 1.88z"/>
              </svg>
            </span>
            <span class="bn-gh-services__row-label">SPOTIFY</span>
            <button type="button"
                    class="bn-gh-toggle-switch"
                    role="switch"
                    aria-checked="true"
                    data-bn-gh-service-pill="spotify"
                    aria-label="Use Spotify for playback">
              <span class="bn-gh-toggle-switch__knob" aria-hidden="true"></span>
            </button>
          </div>

          <div class="bn-gh-services__row" data-bn-gh-service-row="apple">
            <span class="bn-gh-services__row-logo" aria-hidden="true">
              <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" focusable="false">
                <path fill="currentColor" d="M19.665 16.811a10.65 10.65 0 0 1-1.052 1.892c-.554.792-1.006 1.34-1.358 1.643-.546.498-1.13.753-1.756.766-.45 0-.99-.128-1.617-.385-.629-.256-1.207-.384-1.736-.384-.555 0-1.149.128-1.784.384-.636.257-1.149.391-1.541.404-.6.024-1.197-.231-1.796-.766-.381-.331-.853-.898-1.413-1.7-.605-.852-1.103-1.84-1.493-2.967-.418-1.215-.628-2.392-.628-3.532 0-1.305.282-2.43.846-3.376a4.96 4.96 0 0 1 1.778-1.795 4.78 4.78 0 0 1 2.404-.677c.477 0 1.103.146 1.882.435.776.291 1.275.437 1.494.437.164 0 .718-.172 1.66-.515.89-.318 1.643-.45 2.262-.397 1.673.135 2.93.79 3.768 1.972-1.497.91-2.236 2.184-2.222 3.816.013 1.272.474 2.33 1.38 3.17a4.51 4.51 0 0 0 1.376.91c-.111.32-.227.629-.354.926zM15.998 2.38c0 .974-.357 1.882-1.066 2.722-.857 1-1.892 1.575-3.014 1.484a3.04 3.04 0 0 1-.022-.367c0-.935.408-1.935 1.132-2.751.36-.413.819-.756 1.376-1.03.555-.27 1.082-.42 1.578-.444.014.13.02.26.02.388z"/>
              </svg>
            </span>
            <span class="bn-gh-services__row-label">APPLE MUSIC</span>
            <button type="button"
                    class="bn-gh-toggle-switch"
                    role="switch"
                    aria-checked="false"
                    data-bn-gh-service-pill="apple"
                    aria-label="Use Apple Music for playback">
              <span class="bn-gh-toggle-switch__knob" aria-hidden="true"></span>
            </button>
          </div>
        </div>
      </section>

      <!-- NOW PLAYING — v0.12 Spotify embed mode -->
      <section class="bn-gh-panel__cell bn-gh-now bn-gh-now--spotify">
        <header class="bn-gh-panel__h">NOW PLAYING</header>

        <div class="bn-gh-now__media" data-bn-gh-media>
          <div class="bn-gh-now__radar" aria-hidden="true">
            <span class="bn-gh-now__radar-ring bn-gh-now__radar-ring--outer"></span>
            <span class="bn-gh-now__radar-ring bn-gh-now__radar-ring--mid"></span>
            <span class="bn-gh-now__radar-ring bn-gh-now__radar-ring--inner"></span>
            <span class="bn-gh-now__radar-tick bn-gh-now__radar-tick--n"></span>
            <span class="bn-gh-now__radar-tick bn-gh-now__radar-tick--e"></span>
            <span class="bn-gh-now__radar-tick bn-gh-now__radar-tick--s"></span>
            <span class="bn-gh-now__radar-tick bn-gh-now__radar-tick--w"></span>
            <span class="bn-gh-now__radar-sweep"></span>
          </div>
          <canvas class="bn-gh-vu bn-gh-vu--center" data-bn-gh-vu-center width="320" height="200" aria-hidden="true"></canvas>
          <!-- v0.14.70: Idle bassdrop — shown when no track is playing
               (CSS toggles via `.bn-gh-playing` on the page root, which
               setPlayBtnGlyph() already maintains). The VU canvas above
               keeps animating behind display:none so it's instantly
               available when playback resumes. -->
          <img
            data-src="https://bassnectar.net/wp-content/plugins/bn-greatest-hits/assets/img/bassdrop-green.svg"
            alt=""
            aria-hidden="true"
            class="bn-gh-now__idle-bassdrop lazyload"
 src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==" />

          <!-- Idle / placeholder bassdrop. Hidden once a track is loaded
               into the embed (JS toggles is-placeholder accordingly). -->
          <div class="bn-gh-now__art is-placeholder" data-bn-gh-now-art>
            <span class="bn-gh-now__art-placeholder">▮▯▮</span>
          </div>
        </div>

        <!-- v0.13.0: Spotify iframe slot is parked off-screen by default
             (NOT display:none — Spotify TOS requires the embed to remain
             technically visible). A small badge floats in the panel and
             clicking it slides the embed into view; clicking again or
             clicking outside stows it back. -->
        <div class="bn-gh-spotify-stage" data-bn-gh-spotify-stage>
          <!-- v0.13.9: Floating service indicator — bare icon, no
               box. Spotify icon = clickable, slides the embed in.
               Apple icon = purely decorative when Apple is active. -->
          <button type="button"
                  class="bn-gh-spotify-badge"
                  data-bn-gh-spotify-badge
                  data-service="spotify"
                  aria-label="Show Spotify embed"
                  hidden>
            <span class="bn-gh-spotify-badge__icon bn-gh-spotify-badge__icon--spotify" aria-hidden="true">
              <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" focusable="false">
                <path fill="currentColor" d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.52 17.34a.75.75 0 0 1-1.03.25c-2.82-1.72-6.36-2.11-10.54-1.16a.75.75 0 1 1-.33-1.46c4.56-1.04 8.49-.6 11.65 1.34.36.22.47.69.25 1.03zm1.47-3.27a.94.94 0 0 1-1.29.31c-3.23-1.99-8.16-2.56-11.99-1.4a.94.94 0 1 1-.55-1.79c4.37-1.32 9.81-.69 13.51 1.59a.94.94 0 0 1 .32 1.29zm.13-3.41C15.32 8.41 8.7 8.18 5.07 9.29a1.13 1.13 0 1 1-.66-2.16c4.18-1.27 11.49-1 15.94 1.65a1.13 1.13 0 0 1-1.23 1.88z"/>
              </svg>
            </span>
            <span class="bn-gh-spotify-badge__icon bn-gh-spotify-badge__icon--apple" aria-hidden="true">
              <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" focusable="false">
                <path fill="currentColor" d="M19.665 16.811a10.65 10.65 0 0 1-1.052 1.892c-.554.792-1.006 1.34-1.358 1.643-.546.498-1.13.753-1.756.766-.45 0-.99-.128-1.617-.385-.629-.256-1.207-.384-1.736-.384-.555 0-1.149.128-1.784.384-.636.257-1.149.391-1.541.404-.6.024-1.197-.231-1.796-.766-.381-.331-.853-.898-1.413-1.7-.605-.852-1.103-1.84-1.493-2.967-.418-1.215-.628-2.392-.628-3.532 0-1.305.282-2.43.846-3.376a4.96 4.96 0 0 1 1.778-1.795 4.78 4.78 0 0 1 2.404-.677c.477 0 1.103.146 1.882.435.776.291 1.275.437 1.494.437.164 0 .718-.172 1.66-.515.89-.318 1.643-.45 2.262-.397 1.673.135 2.93.79 3.768 1.972-1.497.91-2.236 2.184-2.222 3.816.013 1.272.474 2.33 1.38 3.17a4.51 4.51 0 0 0 1.376.91c-.111.32-.227.629-.354.926zM15.998 2.38c0 .974-.357 1.882-1.066 2.722-.857 1-1.892 1.575-3.014 1.484a3.04 3.04 0 0 1-.022-.367c0-.935.408-1.935 1.132-2.751.36-.413.819-.756 1.376-1.03.555-.27 1.082-.42 1.578-.444.014.13.02.26.02.388z"/>
              </svg>
            </span>
          </button>
          <div class="bn-gh-spotify-embed is-empty is-stowed"
               data-bn-gh-spotify-embed
               data-stowed="true">
            <div class="bn-gh-spotify-embed__hint" data-bn-gh-spotify-hint>
              SELECT A TRACK TO BEGIN
            </div>
          </div>
        </div>

        <div class="bn-gh-now__meta">
          <div class="bn-gh-now__title" data-bn-gh-now-title>—</div>
          <div class="bn-gh-now__artist" data-bn-gh-now-artist>—</div>
        </div>

        <!-- v0.14.70: NOMINATE THIS TRACK — shown only when a track is
             playing (CSS uses .bn-gh-playing on the page root). Carries
             data-bn-gh-vote so the existing delegated click handler in
             bn-greatest-hits.js routes it to castVote(); data-track-id
             is updated live by updateNowPlayingDisplay(). The button
             text toggles between NOMINATE / NOMINATED based on the
             current track's userNominated state. -->
        <!-- v0.14.188: nomination-only button. CSS hides it when the
             page root carries .bn-gh-phase-voting so the voting-phase
             counterpart below renders instead. The data-bn-gh-vote
             handler routes to castVote() regardless of phase; the
             backend enforces which action (nominate vs vote). -->
        <button
          type="button"
          class="bn-gh-now__nominate bn-gh-phase-nom-only"
          data-bn-gh-vote
          data-bn-gh-now-nominate
          data-track-id=""
        >NOMINATE THIS TRACK</button>
        <!-- v0.14.188: voting-phase counterpart. CSS toggles which
             one is visible based on .bn-gh-phase-voting on the page
             root. The JS uses the same data-bn-gh-vote delegated
             handler so castVote() routing is identical. -->
        <button
          type="button"
          class="bn-gh-now__nominate bn-gh-phase-vote-only"
          data-bn-gh-vote
          data-bn-gh-now-vote
          data-track-id=""
        >VOTE FOR THIS TRACK</button>

        <div class="bn-gh-now__controls">
          <button type="button" class="bn-gh-now__btn bn-gh-now__btn--skip" data-bn-gh-skip-back aria-label="Skip back 15 seconds">«15s</button>
          <button type="button" class="bn-gh-now__btn" data-bn-gh-prev aria-label="Previous track">‹‹</button>
          <button type="button" class="bn-gh-now__btn bn-gh-now__btn--play" data-bn-gh-playpause aria-label="Play / Pause">▶︎</button>
          <button type="button" class="bn-gh-now__btn" data-bn-gh-next aria-label="Next track">››</button>
          <button type="button" class="bn-gh-now__btn bn-gh-now__btn--skip" data-bn-gh-skip-fwd aria-label="Skip forward 15 seconds">15s»</button>
        </div>
      </section>

      <section class="bn-gh-panel__cell bn-gh-cd-big bn-gh-cd-small" data-bn-gh-daily-cd>
        <header class="bn-gh-panel__h bn-gh-panel__h--dim" data-bn-gh-daily-limit-label>DAILY VOTE LIMIT RESETS IN</header>
        <div class="bn-gh-cd-big__row bn-gh-cd-big__row--small" aria-live="polite">
          <span class="bn-gh-cd-big__cell"><span class="bn-gh-cd-big__seg bn-gh-cd-big__seg--small" data-bn-gh-daily-h>--</span><label>H</label></span>
          <span class="bn-gh-cd-big__cell"><span class="bn-gh-cd-big__seg bn-gh-cd-big__seg--small" data-bn-gh-daily-m>--</span><label>M</label></span>
          <span class="bn-gh-cd-big__cell"><span class="bn-gh-cd-big__seg bn-gh-cd-big__seg--small" data-bn-gh-daily-s>--</span><label>S</label></span>
        </div>
      </section>

      <!-- YOUR TRACK NOMINATIONS -->
      <!-- v0.14.188: nomination-only — hidden by CSS in voting phase
           since the "your nominations today" concept doesn't apply
           once the pool is locked. -->
      <section class="bn-gh-panel__cell bn-gh-mine" data-bn-gh-mine-cell>
        <header class="bn-gh-panel__h" data-bn-gh-my-tracks-label>YOUR TRACK VOTES</header>
        <ol class="bn-gh-mine__list" data-bn-gh-mine-list>
          <li class="bn-gh-mine__empty" data-bn-gh-mine-empty>No nominations yet.</li>
        </ol>
      </section>

      <!-- CREATE PLAYLIST CTA
           v0.14.71: label is now platform-aware — JS updates the inner
           span to "CREATE SPOTIFY PLAYLIST" or "CREATE APPLE MUSIC
           PLAYLIST" based on the active streaming service. Note: the
           backend only implements POST /spotify-playlist today; the
           Apple Music label is a visual cue only and clicking it while
           connected to Apple Music shows a "coming soon" toast (see
           castSpotifyPlaylist in bn-greatest-hits.js). -->
      <section class="bn-gh-panel__cell bn-gh-spotify" data-bn-gh-spotify-cta hidden>
        <button type="button" class="bn-gh-btn bn-gh-btn--spotify" data-bn-gh-spotify-create>
          <span class="bn-gh-btn__icon" aria-hidden="true">♫</span>
          <span data-bn-gh-spotify-create-label>CREATE SPOTIFY PLAYLIST</span>
        </button>
        <span class="bn-gh-spotify__hint">+1 BONUS VOTE WHEN YOU SHARE</span>
      </section>

      <!-- v0.14.160 per Eric: the v0.14.155 SHARE THE CAMPAIGN
           button was removed from the landing page. Share tracking
           is admin-only now (manual log entry on the analytics
           page). The /bn-gh/v1/log-share REST endpoint + the
           bn_gh_social_shares table are kept so future automated
           tracking paths can hook in without a schema change. -->

      <!-- v0.14.121 per Eric: DAILY NOMINATION LIMIT RESETS IN
           moved here from the top of the right column, just above
           NOMINATION HISTORY so the two daily-cap signals (when
           it resets + which tracks you nominated today) sit
           together. -->
      <!-- v0.14.188: daily nomination cap doesn't exist in voting
           phase (24h-per-track cooldown applies instead), so this
           whole panel hides via CSS when .bn-gh-phase-voting is on
           the root. -->
      

      <!-- v0.14.73: NOMINATION HISTORY (replaces VOTE POWER legend
           per Eric). Accordion of UTC-date rows; client fetches
           /my-nominations-history and groups by date. Each row is a
           <details> so the open/close state is native + accessible. -->
      <!-- v0.14.188: nomination history is meaningless in voting
           phase. Hidden by CSS when .bn-gh-phase-voting is set. -->
      <section class="bn-gh-panel__cell bn-gh-nomhist bn-gh-phase-nom-only" data-bn-gh-nomhist>
        <header class="bn-gh-panel__h" data-bn-gh-nom-history-label>VOTE HISTORY</header>
        <div class="bn-gh-nomhist__list" data-bn-gh-nomhist-list>
          <p class="bn-gh-nomhist__empty" data-bn-gh-nomhist-empty>No nominations yet.</p>
        </div>
      </section>

    </aside>
  </section>

  <!-- ──────────────── v0.13.0 — STREAM CONNECT MODAL ────────────────
       Triggered when a user clicks PLAY on any track without a streaming
       service connected, OR when they click an unconnected pill in the
       toggle. Modal overlay (NOT a popup window, NOT a redirect) with
       both Spotify and Apple Music options.                          -->
  <div class="bn-gh-modal" data-bn-gh-modal hidden aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="bn-gh-modal-title">
    <div class="bn-gh-modal__backdrop" data-bn-gh-modal-dismiss></div>
    <div class="bn-gh-modal__panel" role="document">
      <button type="button" class="bn-gh-modal__close" data-bn-gh-modal-dismiss aria-label="Close">
        <span aria-hidden="true">×</span>
      </button>
      <header class="bn-gh-modal__head">
        <span class="bn-gh-modal__eyebrow">// AUDIO LINK REQUIRED</span>
        <h2 class="bn-gh-modal__title" id="bn-gh-modal-title">CONNECT A STREAMING SERVICE</h2>
        <p class="bn-gh-modal__sub" data-bn-gh-modal-sub>
          Pick where to stream from. Your choice is remembered.
        </p>
      </header>
      <div class="bn-gh-modal__options">
        <button type="button"
                class="bn-gh-modal__option bn-gh-modal__option--spotify"
                data-bn-gh-modal-spotify>
          <span class="bn-gh-modal__option-logo" aria-hidden="true">
            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" focusable="false">
              <path fill="currentColor" d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.52 17.34a.75.75 0 0 1-1.03.25c-2.82-1.72-6.36-2.11-10.54-1.16a.75.75 0 1 1-.33-1.46c4.56-1.04 8.49-.6 11.65 1.34.36.22.47.69.25 1.03zm1.47-3.27a.94.94 0 0 1-1.29.31c-3.23-1.99-8.16-2.56-11.99-1.4a.94.94 0 1 1-.55-1.79c4.37-1.32 9.81-.69 13.51 1.59a.94.94 0 0 1 .32 1.29zm.13-3.41C15.32 8.41 8.7 8.18 5.07 9.29a1.13 1.13 0 1 1-.66-2.16c4.18-1.27 11.49-1 15.94 1.65a1.13 1.13 0 0 1-1.23 1.88z"/>
            </svg>
          </span>
          <span class="bn-gh-modal__option-name">SPOTIFY</span>
          <span class="bn-gh-modal__option-state" data-bn-gh-modal-spotify-state>CONNECT</span>
        </button>
        <button type="button"
                class="bn-gh-modal__option bn-gh-modal__option--apple"
                data-bn-gh-modal-apple>
          <span class="bn-gh-modal__option-logo" aria-hidden="true">
            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" focusable="false">
              <path fill="currentColor" d="M19.665 16.811a10.65 10.65 0 0 1-1.052 1.892c-.554.792-1.006 1.34-1.358 1.643-.546.498-1.13.753-1.756.766-.45 0-.99-.128-1.617-.385-.629-.256-1.207-.384-1.736-.384-.555 0-1.149.128-1.784.384-.636.257-1.149.391-1.541.404-.6.024-1.197-.231-1.796-.766-.381-.331-.853-.898-1.413-1.7-.605-.852-1.103-1.84-1.493-2.967-.418-1.215-.628-2.392-.628-3.532 0-1.305.282-2.43.846-3.376a4.96 4.96 0 0 1 1.778-1.795 4.78 4.78 0 0 1 2.404-.677c.477 0 1.103.146 1.882.435.776.291 1.275.437 1.494.437.164 0 .718-.172 1.66-.515.89-.318 1.643-.45 2.262-.397 1.673.135 2.93.79 3.768 1.972-1.497.91-2.236 2.184-2.222 3.816.013 1.272.474 2.33 1.38 3.17a4.51 4.51 0 0 0 1.376.91c-.111.32-.227.629-.354.926zM15.998 2.38c0 .974-.357 1.882-1.066 2.722-.857 1-1.892 1.575-3.014 1.484a3.04 3.04 0 0 1-.022-.367c0-.935.408-1.935 1.132-2.751.36-.413.819-.756 1.376-1.03.555-.27 1.082-.42 1.578-.444.014.13.02.26.02.388z"/>
            </svg>
          </span>
          <span class="bn-gh-modal__option-name">APPLE MUSIC</span>
          <span class="bn-gh-modal__option-state" data-bn-gh-modal-apple-state>CONNECT</span>
        </button>
      </div>
      <footer class="bn-gh-modal__foot" data-bn-gh-modal-foot>
        <span class="bn-gh-modal__foot-text">Need a Bassnectar account? <a href="/account/" data-bn-gh-modal-account>SIGN IN</a></span>
      </footer>
    </div>
  </div>

  <!-- ──────────────── v0.14.13 — CREATE PLAYLIST MODAL ────────────────
       Triggered by [data-bn-gh-spotify-create]. Shows nominated tracks
       preview, a name input, and submits to POST /spotify-playlist.
       Status check (cooldown / spotify-connected / scope-ok) runs as
       soon as the modal opens via GET /playlist-status.            -->
  <div class="bn-gh-modal bn-gh-playlist-modal"
       data-bn-gh-playlist-modal
       hidden
       aria-hidden="true"
       role="dialog"
       aria-modal="true"
       aria-labelledby="bn-gh-playlist-modal-title">
    <div class="bn-gh-modal__backdrop" data-bn-gh-playlist-dismiss></div>
    <div class="bn-gh-modal__panel bn-gh-playlist-modal__panel" role="document">
      <button type="button"
              class="bn-gh-modal__close"
              data-bn-gh-playlist-dismiss
              aria-label="Close">
        <span aria-hidden="true">×</span>
      </button>
      <header class="bn-gh-modal__head">
        <span class="bn-gh-modal__eyebrow">
          // STATUS: <span data-bn-gh-playlist-state>READY</span>
        </span>
        <h2 class="bn-gh-modal__title" id="bn-gh-playlist-modal-title">
          CREATE SPOTIFY PLAYLIST
        </h2>
        <p class="bn-gh-modal__sub">
          We'll spin up a public Spotify playlist of your nominations.
          Creating one submits a contest entry. One entry per 24 hour period.
        </p>
      </header>

      <div class="bn-gh-playlist-modal__body">
        <label class="bn-gh-playlist-modal__field">
          <span class="bn-gh-playlist-modal__label">PLAYLIST NAME</span>
          <input type="text"
                 class="bn-gh-playlist-modal__input"
                 data-bn-gh-playlist-name
                 maxlength="100"
                 placeholder="Bassnectar - Greatest Hits Nominations" />
        </label>

        <div class="bn-gh-playlist-modal__preview">
          <header class="bn-gh-playlist-modal__preview-head">
            NOMINATED TRACKS
          </header>
          <ol class="bn-gh-playlist-modal__tracks" data-bn-gh-playlist-tracks></ol>
        </div>

        <p class="bn-gh-playlist-modal__msg" data-bn-gh-playlist-message></p>
      </div>

      <footer class="bn-gh-modal__foot bn-gh-playlist-modal__foot">
        <button type="button"
                class="bn-gh-btn bn-gh-btn--ghost"
                data-bn-gh-playlist-dismiss>
          CANCEL
        </button>
        <button type="button"
                class="bn-gh-btn bn-gh-btn--spotify"
                data-bn-gh-playlist-submit>
          <span class="bn-gh-btn__icon" aria-hidden="true">♫</span>
          CREATE PLAYLIST
        </button>
      </footer>
    </div>
  </div>

  <!-- v0.14.52 ctxdc: footer comment strip — `// END { … }` -->
  <div class="bn-gh-ctxdc__foot">
    <span class="bn-gh-ctxdc__foot-version">v0.19.0</span>
  </div>
  <!-- /v0.14.52 ctxdc -->

</main>
<script data-cfasync="false">
(function () {
  if (window.BN_GH) return; /* Already loaded — bn:navigate listener handles re-init */
  /* PJAX navigation: scripts not loaded yet. Inject config + load chain. */
  window.BN_GH_CONFIG = {"restUrl":"https:\/\/bassnectar.net\/wp-json\/bn-gh\/v1\/","nonce":"a6dc773124","isLoggedIn":false,"userId":0,"tierMultiplier":1,"tierLabel":"Guest","cooldownMs":86400000,"loginUrl":"https:\/\/bassnectar.net\/access\/?redirect_to=https%3A%2F%2Fbassnectar.net%2Fgreatest-hits%2F","signupUrl":"https:\/\/bassnectar.net\/signup","previewCampaignSlug":""};
  var base = "https:\/\/bassnectar.net\/wp-content\/plugins\/bn-greatest-hits\/assets\/js\/";
  var ver  = "0.19.0";
  function loadScript(src, cb) {
    var s = document.createElement('script');
    s.src = src;
    if (cb) s.onload = cb;
    s.onerror = function () { console.warn('[bn-gh pjax] failed to load', src); };
    document.head.appendChild(s);
  }
  loadScript(base + 'bn-greatest-hits.js?ver=' + ver, function () {
    loadScript(base + 'bn-gh-animations.js?ver=' + ver, function () {
      loadScript(base + 'bn-gh-overhaul.js?ver=' + ver);
    });
  });
})();
</script>
<!-- v0.14.194: inline PWA data-load safety net.
     This runs from the HTML itself (not the cached JS file), so it works
     even when the SW is serving stale bn-greatest-hits.js. If the
     leaderboard is still empty after 4s, re-fires loadState + loadTracks
     via the BN_GH.refresh() API. Also force-reveals any panels that are
     stuck at opacity:0 from the IntersectionObserver not firing. -->
<script data-cfasync="false">
(function () {
  var checks = 0;
  var maxChecks = 5;
  var timer = setInterval(function () {
    checks++;
    if (checks > maxChecks) { clearInterval(timer); return; }

    /* If BN_GH hasn't initialized yet, nothing to do — let the main JS try */
    if (!window.BN_GH || !window.BN_GH.getState) return;
    var st = window.BN_GH.getState();

    /* If tracks have loaded, force-reveal panels and stop checking */
    var trackCount = st.tracksById ? Object.keys(st.tracksById).length : 0;
    if (trackCount > 0) {
      clearInterval(timer);
      /* Force-reveal any panels stuck at opacity:0 */
      try {
        var hidden = document.querySelectorAll('[data-bn-gh-reveal]:not(.is-revealed)');
        hidden.forEach(function (el) { el.classList.add('is-revealed'); });
      } catch (_) {}
      return;
    }

    /* Tracks not loaded yet — retry via BN_GH.refresh() */
    if (window.console && console.warn) {
      console.warn('[bn-gh inline] check ' + checks + '/' + maxChecks + ': no tracks loaded, retrying...');
    }
    try { window.BN_GH.refresh(); } catch (_) {}
  }, 3000);

  /* Also retry on visibility change (PWA foreground) */
  document.addEventListener('visibilitychange', function () {
    if (document.hidden) return;
    if (!window.BN_GH || !window.BN_GH.getState) return;
    var st = window.BN_GH.getState();
    var tc = st.tracksById ? Object.keys(st.tracksById).length : 0;
    if (tc === 0) {
      try { window.BN_GH.refresh(); } catch (_) {}
    }
    /* Force-reveal stuck panels regardless */
    try {
      var hidden = document.querySelectorAll('[data-bn-gh-reveal]:not(.is-revealed)');
      hidden.forEach(function (el) { el.classList.add('is-revealed'); });
    } catch (_) {}
  });
})();
</script>
	</div>


		<!-- footer -->
	<footer id="footer">
		<div class="container">
		
				</div>
	</footer>
	<!--- end if elementor footer location -->
	 </div>
		</div>
		</div>
</div>

    <!-- Liquid Glass SVG Filter — wobble displacement effect -->
        <svg class="bn-liquid-glass-svg" aria-hidden="true" style="position:absolute;width:0;height:0;pointer-events:none;">
        <defs>
            <filter id="bn-liquid-glass" filterUnits="userSpaceOnUse" x="-50%" y="-50%" width="200%" height="200%">
                <feTurbulence type="fractalNoise" baseFrequency="0.13" numOctaves="1" seed="60" result="noise"/>
                <feGaussianBlur in="noise" stdDeviation="9" result="blurNoise"/>
                <feDisplacementMap in="SourceGraphic" in2="blurNoise" scale="250" xChannelSelector="R" yChannelSelector="G"/>
            </filter>
        </defs>
    </svg>

    <header class="bn-site-header bn-style-transparent bn-header-sticky" style="--bn-header-bg: #0d0d0d;">
                <!-- Glass layers for wobble displacement (real DOM elements required) -->
        <div class="bn-glass-container">
            <div class="bn-glass-filter"></div>
            <div class="bn-glass-overlay"></div>
            <div class="bn-glass-specular"></div>
        </div>

                <div class="bn-header-gradient-shadow"></div>
                <div class="bn-header-inner">

            <!-- LEFT: Back button + Vaults Logo + Radio -->
            <div class="bn-header-left">
                                <a href="https://bassnectar.net/" class="bn-header-logo-link">
                                            <img data-src="https://bassnectar.net/wp-content/uploads/2026/01/bassnectar-logo-white.svg" alt="BASSNECTAR" class="bn-header-logo lazyload" style="height: 40px;" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==">
                                    </a>
                <a href="/listen/playlists/bass-head-radio/" class="bn-header-radio-btn" id="bn-header-radio-btn" aria-label="Bass Head Radio">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4.9 16.1C1 12.2 1 5.8 4.9 1.9"/><path d="M7.8 13.2c-2.3-2.3-2.3-6.1 0-8.5"/><path d="M16.2 4.7c2.3 2.3 2.3 6.1 0 8.5"/><path d="M19.1 1.9C23 5.8 23 12.2 19.1 16.1"/><circle cx="12" cy="9" r="1"/><path d="M12 10v12"/><path d="M8 22h8"/><path d="M9 22l3-12 3 12"/></svg>
                    <span class="bn-radio-live-indicator" id="bn-radio-live-indicator"></span>
                </a>
            </div>

            <!-- CENTER: Optional icon/text links bar -->
            <div class="bn-header-center">
                            </div>

            <!-- RIGHT: Inline search + Auth + Hamburger -->
            <div class="bn-header-right">
                                <div class="bn-inline-search">
                    <button class="bn-header-search-toggle" aria-label="Search">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="11" cy="11" r="8"></circle>
                            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                        </svg>
                    </button>
                    <form role="search" method="get" action="https://bassnectar.net/" class="bn-inline-search-form">
                        <input type="search" name="s" class="bn-inline-search-input" placeholder="Search..." autocomplete="off" value="">
                    </form>
                </div>
                
                                <div id="bn-shopify-cart-icon" role="button" tabindex="0" aria-label="Open cart">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="21" r="1"/><circle cx="19" cy="21" r="1"/><path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12"/></svg>
                    <span class="bn-cart-badge" style="display:none">0</span>
                </div>
                <a href="/vaults/" class="bn-header-cta-btn" aria-label="Vaults"></a>

                <button class="bn-hamburger" aria-label="Open menu" aria-expanded="false">
                    <span class="bn-hamburger-line"></span>
                    <span class="bn-hamburger-line"></span>
                    <span class="bn-hamburger-line"></span>
                </button>
            </div>
        </div>
    </header>

    
    <!-- Slide-out menu panel (from right) -->
    <div class="bn-menu-overlay" aria-hidden="true"></div>
    <nav class="bn-slide-menu" aria-hidden="true">
        <div class="bn-slide-menu-header">
            <button class="bn-slide-menu-close" aria-label="Close menu">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <line x1="18" y1="6" x2="6" y2="18"></line>
                    <line x1="6" y1="6" x2="18" y2="18"></line>
                </svg>
            </button>
        </div>

        <div class="bn-slide-menu-body">
                        <form role="search" method="get" action="https://bassnectar.net/" class="bn-slide-menu-search">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="11" cy="11" r="8"></circle>
                    <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                </svg>
                <input type="search" name="s" placeholder="Search..." autocomplete="off">
            </form>
            
            <!-- Auth buttons (below search, top of menu) -->
            <div class="bn-slide-menu-auth">
                                    <div class="bn-slide-auth-row">
                        <a href="https://bassnectar.net/access/?redirect_to=https%3A%2F%2Fbassnectar.net%2F" class="bn-slide-auth-btn bn-slide-signin-btn">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path>
                                <polyline points="10 17 15 12 10 7"></polyline>
                                <line x1="15" y1="12" x2="3" y2="12"></line>
                            </svg>
                            <span>SIGN IN</span>
                        </a>
                        <a href="/signup/" class="bn-slide-auth-btn bn-slide-join-btn">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path>
                            </svg>
                            <span>JOIN</span>
                        </a>
                    </div>
                            </div>

            <ul id="menu-global-menu" class="bn-slide-menu-nav"><li id="menu-item-24668" class="nav-enhance nav-account menu-item menu-item-type-post_type menu-item-object-page menu-item-24668 bn-nav-account" data-id="menu-item-24668"><a href="https://bassnectar.net/account/">Account</a></li>
<li id="menu-item-27845" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-27845" data-id="menu-item-27845"><a href="https://bassnectar.net/greatest-hits/">Vote: Greatest Hits</a></li>
<li id="menu-item-17167" class="nav-enhance nav-vaults menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-17167 bn-nav-vaults" data-id="menu-item-17167"><a href="https://bassnectar.net/vaults/">Vaults</a>
<ul class="sub-menu">
	<li id="menu-item-21932" class="vaults-join menu-item menu-item-type-post_type menu-item-object-page menu-item-21932" data-id="menu-item-21932"><a href="https://bassnectar.net/signup/">Join</a></li>
	<li id="menu-item-23288" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-23288" data-id="menu-item-23288"><a href="#">Latest</a></li>
	<li id="menu-item-23289" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-23289" data-id="menu-item-23289"><a href="#">Upcoming</a></li>
</ul>
</li>
<li id="menu-item-27666" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27666" data-id="menu-item-27666"><a href="https://bassnectar.net/shop/">Shop</a></li>
<li id="menu-item-7109" class="nav-enhance menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-7109 bn-nav-listen" data-id="menu-item-7109"><a href="/listen/">Listen</a>
<ul class="sub-menu">
	<li id="menu-item-7012" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7012" data-id="menu-item-7012"><a href="https://bassnectar.net/listen/discography/">Discography</a></li>
	<li id="menu-item-17191" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17191" data-id="menu-item-17191"><a href="https://bassnectar.net/listen/singles-eps/">Singles &amp; Eps</a></li>
	<li id="menu-item-17190" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17190" data-id="menu-item-17190"><a href="https://bassnectar.net/listen/conversations/">Conversations</a></li>
	<li id="menu-item-17188" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17188" data-id="menu-item-17188"><a href="https://bassnectar.net/listen/throwbacks/">Throwbacks</a></li>
	<li id="menu-item-17189" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17189" data-id="menu-item-17189"><a href="https://bassnectar.net/listen/unreleased/">Unreleased</a></li>
</ul>
</li>
<li id="menu-item-21822" class="nav-enhance menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-21822 bn-nav-memories" data-id="menu-item-21822"><a href="https://bassnectar.net/memories/">Memories</a>
<ul class="sub-menu">
	<li id="menu-item-21826" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21826" data-id="menu-item-21826"><a href="https://bassnectar.net/memories/live/">live</a></li>
	<li id="menu-item-21825" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21825" data-id="menu-item-21825"><a href="https://bassnectar.net/memories/family-photos/">family-photos</a></li>
	<li id="menu-item-21827" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21827" data-id="menu-item-21827"><a href="https://bassnectar.net/memories/art/">art</a></li>
	<li id="menu-item-21823" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21823" data-id="menu-item-21823"><a href="https://bassnectar.net/memories/culture/">culture</a></li>
	<li id="menu-item-21824" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21824" data-id="menu-item-21824"><a href="https://bassnectar.net/memories/reminiscence/">reminiscence</a></li>
</ul>
</li>
<li id="menu-item-21927" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-21927 bn-nav-tour nav-enhance" data-id="menu-item-21927"><a href="/shows/">Shows</a></li>
<li id="menu-item-21929" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-21929" data-id="menu-item-21929"><a href="/support">Customer Support</a></li>
<li id="menu-item-27665" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-27665" data-id="menu-item-27665"><a href="https://bassnectar.net/contact/">Contact</a>
<ul class="sub-menu">
	<li id="menu-item-21930" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-21930" data-id="menu-item-21930"><a href="/press">Press</a></li>
	<li id="menu-item-21931" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-21931" data-id="menu-item-21931"><a href="/management">Management</a></li>
	<li id="menu-item-27667" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-27667" data-id="menu-item-27667"><a href="/booking">Booking</a></li>
	<li id="menu-item-27668" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-27668" data-id="menu-item-27668"><a href="/licensing">Licensing</a></li>
	<li id="menu-item-27669" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-27669" data-id="menu-item-27669"><a href="/collaborations">Collaborations</a></li>
	<li id="menu-item-27670" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-27670" data-id="menu-item-27670"><a href="/subscriptions">Subscriptions</a></li>
</ul>
</li>
</ul>        </div>

        <div class="bn-slide-menu-footer"></div>
    </nav>

        <script data-cfasync="false">
    document.addEventListener('DOMContentLoaded', function() {
        'use strict';

        // Guard: prevent duplicate execution (Barba.js PJAX re-injects footer scripts)
        if (window._bnHeaderInitDone) return;
        window._bnHeaderInitDone = true;

        // Fix "#" menu links: a third-party script overwrites real hrefs to "#".
        // We store originals, then use a MutationObserver to restore them.
        (function() {
            var menuNav = document.querySelector('.bn-slide-menu-nav');
            if (!menuNav) return;

            // Capture original hrefs from server HTML before any script changes them
            var originals = {};
            menuNav.querySelectorAll('a').forEach(function(a) {
                var href = a.getAttribute('href');
                var li = a.closest('li');
                if (li && href && href !== '#') {
                    originals[li.id] = href;
                }
            });

            function fixLinks() {
                menuNav.querySelectorAll('a[href="#"]').forEach(function(a) {
                    var li = a.closest('li');
                    if (li && originals[li.id]) {
                        a.setAttribute('href', originals[li.id]);
                    }
                });
            }

            // Fix now
            fixLinks();

            // Watch for future changes and re-fix
            var observer = new MutationObserver(fixLinks);
            observer.observe(menuNav, { subtree: true, attributes: true, attributeFilter: ['href'] });

            // Also fix after short delays in case scripts run late
            setTimeout(fixLinks, 100);
            setTimeout(fixLinks, 500);
            setTimeout(fixLinks, 2000);
        })();

        var header       = document.querySelector('.bn-site-header');
        var hamburger    = document.querySelector('.bn-hamburger');
        var slideMenu    = document.querySelector('.bn-slide-menu');
        var overlay      = document.querySelector('.bn-menu-overlay');
        var closeBtn     = document.querySelector('.bn-slide-menu-close');
        var searchWrap   = document.querySelector('.bn-inline-search');
        var searchBtn    = document.querySelector('.bn-header-search-toggle');
        var searchInput  = document.querySelector('.bn-inline-search-input');

        // --- Sticky header: push body content down ---
        // (When submenu is present, the submenu block handles padding instead)
        if (header && header.classList.contains('bn-header-sticky') && !document.querySelector('.bn-submenu')) {
            var adminBar = document.getElementById('wpadminbar');
            // The child theme's style.css has `body { padding-top: 0 !important }`
            // (to kill the parent Sonaar theme's fixed_header padding). A plain
            // inline style loses to that !important, so the fixed header overlapped
            // page content (account page loaded behind the top bar). Set the body
            // offset WITH priority 'important' so the measured header height wins.
            var setPad = function() {
                var ab = adminBar ? adminBar.offsetHeight : 0;
                document.body.style.setProperty('padding-top', (header.offsetHeight + ab) + 'px', 'important');
            };
            setPad();
            window.addEventListener('resize', setPad);
        }

        // --- Slide menu (always slide from right, no fade) ---
        function openMenu() {
            if (!slideMenu || !overlay) return;
            slideMenu.classList.add('active');
            slideMenu.setAttribute('aria-hidden', 'false');
            overlay.classList.add('active');
            overlay.setAttribute('aria-hidden', 'false');
            if (hamburger) {
                hamburger.classList.add('active');
                hamburger.setAttribute('aria-expanded', 'true');
            }
            document.body.classList.add('bn-menu-open');
        }

        function closeMenu() {
            if (!slideMenu || !overlay) return;
            slideMenu.classList.remove('active');
            slideMenu.setAttribute('aria-hidden', 'true');
            overlay.classList.remove('active');
            overlay.setAttribute('aria-hidden', 'true');
            if (hamburger) {
                hamburger.classList.remove('active');
                hamburger.setAttribute('aria-expanded', 'false');
            }
            document.body.classList.remove('bn-menu-open');
        }

        if (hamburger) hamburger.addEventListener('click', function() {
            var isOpen = slideMenu && slideMenu.classList.contains('active');
            isOpen ? closeMenu() : openMenu();
        });

        if (closeBtn) closeBtn.addEventListener('click', closeMenu);
        if (overlay)  overlay.addEventListener('click', closeMenu);

        // --- Auto-close menu when a nav link is clicked ---
        if (slideMenu) {
            slideMenu.querySelectorAll('.bn-slide-menu-nav a, .bn-slide-menu-auth a').forEach(function(link) {
                link.addEventListener('click', function() {
                    closeMenu();
                });
            });
        }

        // --- Inline expanding search ---
        if (searchBtn && searchWrap) {
            searchBtn.addEventListener('click', function(e) {
                e.preventDefault();
                var isOpen = searchWrap.classList.contains('active');
                if (isOpen) {
                    searchWrap.classList.remove('active');
                } else {
                    searchWrap.classList.add('active');
                    if (searchInput) setTimeout(function() { searchInput.focus(); }, 150);
                }
            });

            // Close search when clicking outside
            document.addEventListener('click', function(e) {
                if (searchWrap.classList.contains('active') && !searchWrap.contains(e.target)) {
                    searchWrap.classList.remove('active');
                }
            });
        }

        // Escape key closes everything
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                if (searchWrap) searchWrap.classList.remove('active');
                closeMenu();
            }
        });

        // --- Submenu: scroll fade indicators ---
        (function() {
            var submenu = document.querySelector('.bn-submenu');
            if (!submenu) return;

            var scroller = submenu.querySelector('.bn-submenu-inner');
            var fadeL = submenu.querySelector('.bn-submenu-fade--left');
            var fadeR = submenu.querySelector('.bn-submenu-fade--right');

            function updateFades() {
                if (!scroller || !fadeL || !fadeR) return;
                var sl = scroller.scrollLeft;
                var maxScroll = scroller.scrollWidth - scroller.clientWidth;
                fadeL.classList.toggle('visible', sl > 8);
                fadeR.classList.toggle('visible', sl < maxScroll - 8);
            }

            if (scroller) {
                scroller.addEventListener('scroll', updateFades, { passive: true });
                window.addEventListener('resize', updateFades);
                // Initial check
                updateFades();
                setTimeout(updateFades, 200);
            }

            // --- Position submenu below header & update body padding ---
            if (header && header.classList.contains('bn-header-sticky')) {
                var adminBar = document.getElementById('wpadminbar');
                function updateSubmenuPosition() {
                    var adminBarH = adminBar ? adminBar.offsetHeight : 0;
                    var headerH = header.offsetHeight;
                    var submenuH = submenu ? submenu.offsetHeight : 0;
                    // Set submenu top to clear both admin bar and header
                    submenu.style.setProperty('--bn-submenu-top', (headerH + adminBarH) + 'px');
                    // Body padding accounts for all three bars
                    document.body.style.paddingTop = (headerH + submenuH + adminBarH) + 'px';
                }
                updateSubmenuPosition();
                window.addEventListener('resize', updateSubmenuPosition);
            }
        })();
    });
    </script>
        <!-- SVG Filters for Liquid Glass / Omakase -->
    <svg width="0" height="0" style="position:absolute; pointer-events:none;" aria-hidden="true">
        <defs>
            <filter id="bn-liquid-glass-filter" filterUnits="userSpaceOnUse" x="-50%" y="-50%" width="200%" height="200%">
                <feTurbulence type="fractalNoise" baseFrequency="0.13" numOctaves="1" seed="60" result="noise"/>
                <feGaussianBlur in="noise" stdDeviation="9" result="blurNoise"/>
                <feDisplacementMap in="SourceGraphic" in2="blurNoise" scale="250" xChannelSelector="R" yChannelSelector="G"/>
            </filter>
        </defs>
    </svg>
    <script data-cfasync="false" src="https://cdnjs.cloudflare.com/ajax/libs/glightbox/3.3.0/js/glightbox.min.js"></script><script data-cfasync="false" type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/sonaar-child/*","/wp-content/themes/sonaar/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>
    <script data-cfasync="false">
    (function() {
        "use strict";
        function initAppleBtn() {
            var btn = document.getElementById("bn-auth-apple-btn");
            if (!btn || btn.dataset.bnAppleInit) return;
            btn.dataset.bnAppleInit = "1";
            btn.addEventListener("click", function() {
                var nonce = btn.getAttribute("data-nonce");
                btn.disabled = true;
                btn.textContent = "Redirecting…";
                var fd = new FormData();
                fd.append("action", "bn_apple_init");
                fd.append("nonce", nonce);
                fetch("https:\/\/bassnectar.net\/wp-admin\/admin-ajax.php", {
                    method: "POST",
                    body: fd,
                    credentials: "same-origin"
                })
                .then(function(r) { return r.json(); })
                .then(function(data) {
                    if (data.success && data.data && data.data.redirect) {
                        window.location.href = data.data.redirect;
                    } else {
                        var msg = (data.data && data.data.message) ? data.data.message : "Apple sign-in unavailable.";
                        alert(msg);
                        btn.disabled = false;
                        btn.innerHTML = "<svg width=\"18\" height=\"18\" viewBox=\"0 0 814 1000\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76 0-103.7 40.8-165.9 40.8s-105-57.8-155.5-127.4C46 405.5 20 341.8 20 280.8c0-145.3 91.4-245.2 195.4-245.2 53.5 0 98 34.9 131.7 34.9 32.3 0 82.7-37 142.1-37 22.8 0 107.3 2.6 168 79.7zm-134.8-99.3c6.5-36.5 29.3-79.9 57.6-107.5 36.3-35.9 81-59.6 127.4-59.6 3.2 0 6.5.3 9.7.6-3.2 35.2-18.6 76.9-44.1 106.5-22.8 27-68.7 54.4-150.6 60z\"\/><\/svg> Continue with Apple";
                    }
                })
                .catch(function() {
                    alert("Network error. Please try again.");
                    btn.disabled = false;
                });
            });
        }

        if (document.readyState === "loading") {
            document.addEventListener("DOMContentLoaded", initAppleBtn);
        } else {
            initAppleBtn();
        }

        if (window.MutationObserver) {
            var observer = new MutationObserver(function() { initAppleBtn(); });
            observer.observe(document.body, { childList: true, subtree: true });
        }
    })();
    </script>
        <script data-cfasync="false">
    (function() {
        "use strict";
        function initGoogleBtn() {
            var btn = document.getElementById("bn-auth-google-btn");
            if (!btn || btn.dataset.bnGoogleInit) return;
            btn.dataset.bnGoogleInit = "1";
            btn.addEventListener("click", function() {
                var nonce = btn.getAttribute("data-nonce");
                btn.disabled = true;
                btn.textContent = "Redirecting…";
                var fd = new FormData();
                fd.append("action", "bn_google_init");
                fd.append("nonce", nonce);
                fetch("https:\/\/bassnectar.net\/wp-admin\/admin-ajax.php", {
                    method: "POST",
                    body: fd,
                    credentials: "same-origin"
                })
                .then(function(r) { return r.json(); })
                .then(function(data) {
                    if (data.success && data.data && data.data.redirect) {
                        window.location.href = data.data.redirect;
                    } else {
                        var msg = (data.data && data.data.message) ? data.data.message : "Google sign-in unavailable.";
                        alert(msg);
                        btn.disabled = false;
                        btn.innerHTML = "<svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\"><path d=\"M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844c-.209 1.125-.843 2.078-1.796 2.717v2.258h2.908c1.702-1.567 2.684-3.874 2.684-6.615z\" fill=\"#4285F4\"\/><path d=\"M9 18c2.43 0 4.467-.806 5.956-2.18l-2.909-2.259c-.806.54-1.836.86-3.047.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332A8.997 8.997 0 009 18z\" fill=\"#34A853\"\/><path d=\"M3.964 10.71A5.41 5.41 0 013.682 9c0-.593.102-1.17.282-1.71V4.958H.957A8.996 8.996 0 000 9c0 1.452.348 2.827.957 4.042l3.007-2.332z\" fill=\"#FBBC05\"\/><path d=\"M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0A8.997 8.997 0 00.957 4.958L3.964 6.29C4.672 4.163 6.656 3.58 9 3.58z\" fill=\"#EA4335\"\/><\/svg> Continue with Google";
                    }
                })
                .catch(function() {
                    alert("Network error. Please try again.");
                    btn.disabled = false;
                });
            });
        }

        // Init on DOM ready and also watch for auth modal injection via MutationObserver
        if (document.readyState === "loading") {
            document.addEventListener("DOMContentLoaded", initGoogleBtn);
        } else {
            initGoogleBtn();
        }

        // Re-init when modal is injected into DOM (PJAX / dynamic rendering)
        if (window.MutationObserver) {
            var observer = new MutationObserver(function() { initGoogleBtn(); });
            observer.observe(document.body, { childList: true, subtree: true });
        }
    })();
    </script>
    
			<script data-cfasync="false" type="text/javascript">
				var _paq = _paq || [];
								_paq.push(['trackPageView']);
								(function () {
					var u = "https://analytics1.wpmudev.com/";
					_paq.push(['setTrackerUrl', u + 'track/']);
					_paq.push(['setSiteId', '4607']);
					var d   = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
					g.type  = 'text/javascript';
					g.async = true;
					g.defer = true;
					g.src   = 'https://analytics.wpmucdn.com/matomo.js';
					s.parentNode.insertBefore(g, s);
				})();
			</script>
			    <footer class="bn-global-footer">
        <div class="bn-footer-inner">
            <!-- Brand Column -->
            <div class="bn-footer-brand">
                <a href="https://bassnectar.net/" class="bn-footer-brand-link">
                    <span class="bn-footer-logo-bn bn-holo-icon" aria-label="Bassnectar">&#xe906;</span>
                    <span class="bn-footer-logo-vaults bn-holo-icon" aria-label="Vaults">&#xe903;</span>
                </a>
            </div>

            <!-- Nav Columns — driven by WP menus with fallback -->
            <nav class="bn-footer-nav">
                                <div class="bn-footer-col">
                    <button type="button" class="bn-footer-col-toggle" aria-expanded="false">
                        <h4>Listen</h4>
                        <span class="bn-footer-chevron"></span>
                    </button>
                    <div class="bn-footer-col-links">
                                                    <ul><li id="menu-item-23389" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-23389 bn-nav-listen nav-enhance" data-id="menu-item-23389"><a href="https://bassnectar.net/listen/">Music</a></li>
<li id="menu-item-23390" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-23390" data-id="menu-item-23390"><a href="https://bassnectar.net/listen/mixes/">Mixes</a></li>
<li id="menu-item-23391" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-23391" data-id="menu-item-23391"><a href="https://bassnectar.net/listen/live/">Live Sets</a></li>
<li id="menu-item-23392" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-23392" data-id="menu-item-23392"><a href="https://bassnectar.net/listen/collabs/">Collabs</a></li>
</ul>                                            </div>
                </div>
                                <div class="bn-footer-col">
                    <button type="button" class="bn-footer-col-toggle" aria-expanded="false">
                        <h4>Explore</h4>
                        <span class="bn-footer-chevron"></span>
                    </button>
                    <div class="bn-footer-col-links">
                                                    <ul><li id="menu-item-23393" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-23393 bn-nav-vaults nav-enhance" data-id="menu-item-23393"><a href="https://bassnectar.net/vaults/">Vaults</a></li>
<li id="menu-item-23394" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-23394" data-id="menu-item-23394"><a href="https://bassnectar.net/interact/">Interact</a></li>
<li id="menu-item-23395" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-23395 bn-nav-memories nav-enhance" data-id="menu-item-23395"><a href="https://bassnectar.net/memories/">Memories</a></li>
<li id="menu-item-23396" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-23396" data-id="menu-item-23396"><a href="https://bassnectar.net/relive/">Relive</a></li>
</ul>                                            </div>
                </div>
                                <div class="bn-footer-col">
                    <button type="button" class="bn-footer-col-toggle" aria-expanded="false">
                        <h4>Community</h4>
                        <span class="bn-footer-chevron"></span>
                    </button>
                    <div class="bn-footer-col-links">
                                                    <ul><li id="menu-item-23397" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-23397 bn-nav-connect nav-enhance" data-id="menu-item-23397"><a href="https://bassnectar.net/connect/">Connect</a></li>
<li id="menu-item-23398" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-23398 bn-nav-tour nav-enhance" data-id="menu-item-23398"><a href="https://bassnectar.net/tour/">Tour</a></li>
<li id="menu-item-23399" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-23399" data-id="menu-item-23399"><a href="https://bassnectar.net/extras/">Extras</a></li>
<li id="menu-item-23400" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-23400" data-id="menu-item-23400"><a href="https://bassnectar.net/merch/">Merch</a></li>
</ul>                                            </div>
                </div>
                                <div class="bn-footer-col">
                    <button type="button" class="bn-footer-col-toggle" aria-expanded="false">
                        <h4>Account</h4>
                        <span class="bn-footer-chevron"></span>
                    </button>
                    <div class="bn-footer-col-links">
                                                    <ul><li id="menu-item-23401" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-23401 bn-nav-account nav-enhance" data-id="menu-item-23401"><a href="https://bassnectar.net/account/">Profile</a></li>
<li id="menu-item-23402" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-23402" data-id="menu-item-23402"><a href="https://bassnectar.net/support/">Support</a></li>
<li id="menu-item-23403" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-23403 bn-nav-account nav-enhance" data-id="menu-item-23403"><a href="https://bassnectar.net/account/?action=subscriptions">Membership</a></li>
<li id="menu-item-23404" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-23404 bn-nav-account nav-enhance" data-id="menu-item-23404"><a href="https://bassnectar.net/account/?action=gift-cards">Gift Cards</a></li>
</ul>                                            </div>
                </div>
                            </nav>
        </div>

        <!-- Stats row -->
                <div class="bn-footer-stats">
          <div class="bn-footer-stats-inner">
            <div class="bn-footer-stats-placeholder"></div>
            <div class="bn-footer-stat-col">
                <div class="bn-footer-stat-big">1.2 Billion</div>
                <div class="bn-footer-stat-detail">
                    <span class="bn-footer-stat-num"
                          data-base="1157266630"
                          data-base-time="1775546228"
                          data-daily-rate="75000"
                    >1,157,266,630</span>
                    <span class="bn-footer-stat-label">Streams</span>
                </div>
            </div>
            <div class="bn-footer-stat-col">
                <div class="bn-footer-stat-big">5.1 Million</div>
                <div class="bn-footer-stat-detail">
                    <span class="bn-footer-stat-num"
                          data-base="5127438"
                          data-base-time="1780949465"
                          data-daily-rate="500"
                    >5,127,438</span>
                    <span class="bn-footer-stat-label">Followers</span>
                </div>
            </div>
            <div class="bn-footer-stat-col">
                <div class="bn-footer-stat-big">82.2 Million</div>
                <div class="bn-footer-stat-detail">
                    <span class="bn-footer-stat-num"
                          data-base="82200000"
                          data-base-time="1775517771"
                          data-daily-rate="5000"
                    >82,200,000</span>
                    <span class="bn-footer-stat-label">Fans Reached</span>
                </div>
            </div>
            <div class="bn-footer-stat-col bn-footer-stat-cta">
                <a href="#" id="bn-footer-pwa-install" onclick="if(window.BNPwa&&BNPwa.promptInstall)BNPwa.promptInstall();return false;">
                    <img data-src="https://bassnectar.net/wp-content/uploads/BassnectarVaults-InstallApp.png" alt="Install Bassnectar Vaults" class="bn-footer-install-img lazyload" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==" style="--smush-placeholder-width: 509px; --smush-placeholder-aspect-ratio: 509/153;" />
                </a>
            </div>
          </div><!-- /.bn-footer-stats-inner -->
        </div><!-- /.bn-footer-stats -->
        <script data-cfasync="false">
        (function() {
            document.querySelectorAll('.bn-footer-stat-num[data-daily-rate]').forEach(function(numEl) {
                var base     = parseInt(numEl.dataset.base, 10);
                var baseTime = parseInt(numEl.dataset.baseTime, 10) * 1000;
                var rate     = parseInt(numEl.dataset.dailyRate, 10) / 86400000;
                function tick() {
                    numEl.textContent = (base + Math.floor(rate * (Date.now() - baseTime))).toLocaleString();
                    requestAnimationFrame(tick);
                }
                tick();
            });
        })();
        </script>
        
        <!-- PWA Install CTA Bar — disabled, re-enable by changing false to true -->
        
        <!-- Copyright + versions -->
                <div class="bn-footer-bottom">
            <span class="bn-footer-copyright">&copy; 2026 Bassnectar. All rights reserved.</span>
            <span class="bn-footer-versions">Theme: 4.28.1 &middot; PWA: <span id="bn-footer-sw-version">&#8230;</span> &middot; Streaming: 1.6.0 &middot; Bridge: 3.8.3 &middot; Connect: 1.3.0 &middot; Rewards: 1.9.0</span>
        </div>
        <script data-cfasync="false">
        (function(){
            var el = document.getElementById('bn-footer-sw-version');
            if (!el) return;
            if (!navigator.serviceWorker || !navigator.serviceWorker.controller) { el.textContent = 'no SW'; return; }
            navigator.serviceWorker.controller.postMessage({ type: 'GET_VERSION' });
            navigator.serviceWorker.addEventListener('message', function onV(e) {
                if (e.data && e.data.type === 'SW_VERSION') {
                    navigator.serviceWorker.removeEventListener('message', onV);
                    var el2 = document.getElementById('bn-footer-sw-version');
                    if (el2) el2.textContent = e.data.version;
                }
            });
        })();
        </script>
    </footer>

    <script data-cfasync="false">
    (function() {
        if (window._bnFooterInitDone) return;
        window._bnFooterInitDone = true;

        document.addEventListener('click', function(e) {
            var toggle = e.target.closest('.bn-footer-col-toggle');
            if (!toggle) return;
            var col = toggle.closest('.bn-footer-col');
            if (!col) return;
            var expanded = toggle.getAttribute('aria-expanded') === 'true';
            document.querySelectorAll('.bn-footer-col.is-open').forEach(function(openCol) {
                if (openCol !== col) {
                    openCol.classList.remove('is-open');
                    var t = openCol.querySelector('.bn-footer-col-toggle');
                    if (t) t.setAttribute('aria-expanded', 'false');
                }
            });
            toggle.setAttribute('aria-expanded', String(!expanded));
            col.classList.toggle('is-open');
        });

        document.addEventListener('click', function(e) {
            if (e.target.closest('#bn-footer-pwa-btn') || e.target.closest('#bn-footer-pwa-install')) {
                if (typeof window.BNPwa !== 'undefined' && window.BNPwa.promptInstall) {
                    window.BNPwa.promptInstall();
                }
                return;
            }
            if (e.target.closest('#bn-footer-pwa-cta-close')) {
                var cta = document.getElementById('bn-footer-pwa-cta');
                if (cta) cta.style.display = 'none';
                document.cookie = 'bn_pwa_cta_dismissed=1;path=/;max-age=' + (7 * 86400);
                return;
            }
        });

        // Hide install button when already running as PWA
        if (window.matchMedia('(display-mode: standalone)').matches || navigator.standalone) {
            var cta = document.getElementById('bn-footer-pwa-cta');
            if (cta) cta.style.display = 'none';
            var installBtn = document.getElementById('bn-footer-pwa-install');
            if (installBtn) installBtn.style.display = 'none';
        }
    })();
    </script>
    			<script data-cfasync="false">
				const lazyloadRunObserver = () => {
					const lazyloadBackgrounds = document.querySelectorAll( `.e-con.e-parent:not(.e-lazyloaded)` );
					const lazyloadBackgroundObserver = new IntersectionObserver( ( entries ) => {
						entries.forEach( ( entry ) => {
							if ( entry.isIntersecting ) {
								let lazyloadBackground = entry.target;
								if( lazyloadBackground ) {
									lazyloadBackground.classList.add( 'e-lazyloaded' );
								}
								lazyloadBackgroundObserver.unobserve( entry.target );
							}
						});
					}, { rootMargin: '200px 0px 200px 0px' } );
					lazyloadBackgrounds.forEach( ( lazyloadBackground ) => {
						lazyloadBackgroundObserver.observe( lazyloadBackground );
					} );
				};
				const events = [
					'DOMContentLoaded',
					'elementor/lazyload/observe',
				];
				events.forEach( ( event ) => {
					document.addEventListener( event, lazyloadRunObserver );
				} );
			</script>
			<style>
.playerNowPlaying .album-art-link {
  display: block;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s ease;
  position: relative;
  z-index: 300;
}
.playerNowPlaying .album-art-link:hover {
  opacity: 0.8;
}

/* Extended Player Blurred Background */
.srp_extendedPlayer_container {
  background-color: #000000 !important;
}

.srp_extendedPlayer_scrolling_box {
  --album-bg-image: none;
  overflow: hidden;
  position: relative;
}

/* Blurred album art background */
.srp_extendedPlayer_scrolling_box::before {
  content: '';
  position: absolute;
  top: -10%;
  left: -10%;
  right: -10%;
  bottom: -10%;
  background-image: var(--album-bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(20px) brightness(.9);
  transform: scale(1.1);
  z-index: 0;
  pointer-events: none;
  transition: background-image 0.3s ease;
}

/* Dark overlay for readability */
.srp_extendedPlayer_scrolling_box::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
  pointer-events: none;
}

.srp_extendedPlayer {
  position: relative;
  z-index: 2;
  background-color: transparent !important;
}

/* Prevent body scroll when extended player or tracklist is open */
body.srp-modal-open {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
  height: 100% !important;
}
</style>
<div v-cloak id="sonaar-player" :class="[{enable: !minimize , 'show-list': showList, sr_hide: classes.emptyPlayer, 'srp_mobile': isSmallDevice,'srp_has_spectrum': classes.spectrum, srp_ext_opened: extendedPlayerOpened && isSmallDevice, 'audio-playing': isPlaying, 'srp_no_artwork': !hasArtwork, 'srp_sticky_has_ext': list.tracks.length >= 1 && outputTrackDescription }, classType, templateType, floatPos ]" style="display:none;" :data-ui-items="sr_countUIitems">
<audio id="sonaar-audio"></audio>
  <transition name="sonaar-player-slidefade" v-on:after-enter="playlistAfterEnter">
    <div class="playlist" v-if="showList">
      <div class="scroll">
        <div class="container">
          <div class="boxed">
            <div class="sricon-close close"  @click="setshowList" v-if="isSmallDevice"></div>
            <div class="title"  v-if="(playListTitle.length >= 1)">{{playListTitle}}</div>
            <button class="play" @click="play">{{ playLabelButton }}</button>
            <div class="trackscroll">
              <ul class="tracklist">
                <li v-for="(track, index) in list.tracks" :key="track.id" @click="clickTrackList(index)" :class="index == currentTrack ? 'active' : '' ">
                  <div class="srp_track_control">
                    <span class="sricon-play"></span>
                    <span class="track-status">{{ index + 1 }}</span>
                  </div>
                  <span class="track-title"><span class="content" @mouseover="scroll">{{ track.track_title }}</span></span>
                  <span class="track-artist"  v-if="classes.author"><span class="content" v-if="track.track_artist">{{ track.track_artist }}</span></span>
                  <span class="track-album"><span class="content">{{ track.album_title }}</span></span>
                  <span class="track-lenght" v-if="track.length"><span class="content">{{ track.length }}</span></span>
                  <span class="track-store" v-if="(track.song_store_list.length || (typeof track.album_store_list != 'undefined' && track.album_store_list.length) )">
                    <a v-for="(store, storeIndex) in track.song_store_list" :href="store['link-option'] == 'popup' ? '#!': store['store-link']" :target="store['store-target'] || store['link-option'] == 'popup' ? '_self': '_blank'" :download="ifDownloadAttribute(store)" @click="ctaClick(store, $(event.target))"><i class="track-store-item" :class="store['store-icon']"></i></a>
                    <a v-for="(store, storeIndex) in track.album_store_list"
                      :href="store['link-option'] == 'popup' || (store['has-variation'] == true && classes.wc_variation_lb) ? '#!': store['store-link']"
                      v-bind:class="[
                          store['make-offer-bt'] ? 'srp-make-offer-bt' : 
                          (classes.wc_ajax_add_to_cart && store['has-variation'] == false) ? 'add_to_cart_button ajax_add_to_cart' : ''
                      ]"
                      :target="store['store-target'] || store['link-option'] == 'popup' ? '_self': '_blank'"
                      :download="ifDownloadAttribute(store)"
                      :data-product_id="(store['product-id'] !== undefined) ? store['product-id'] : false"
                      @click="ctaClick(store, $(event.target))">
                      <i class="track-store-item" :class="store['store-icon']"></i>
                    </a>
                  </span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>

  </transition>

  <div role="button" tabindex="0" aria-label="Close Playlist" class="sricon-close btn_playlist" v-if="showList" @click="setshowList"></div>
  <div :class="[(list.tracks.length >= 2)?'player':'player no-list', showControlsHover, isDraggable]">
    <div class="close btn-player"  :class="{
        'sricon-down-arrow': !minimize || minimize === undefined,
        'enable': !minimize,
        'storePanel': list.tracks.length >= 1 && albumStoreList.length >= 1
    }" @click="closePlayer" v-if="list.tracks.length >= 1 && !showList">
    <svg class="audioBar" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" x="0px" y="0px" viewBox="0 0 17 17" enable-background="new 0 0 17 17" xml:space="preserve">
        <rect x="0" width="2" height="16" transform="translate(0)">
          <animate attributeName="height" attributeType="XML" dur="1s" values="2;16;2" repeatCount="indefinite" />
        </rect>
        <rect x="5" width="2" height="16" transform="translate(0)">
          <animate attributeName="height" attributeType="XML" dur="1s" values="2;16;2" repeatCount="indefinite" begin="0.3s" />
        </rect>
        <rect x="10" width="2" height="16" transform="translate(0)">
          <animate attributeName="height" attributeType="XML" dur="1s" values="2;16;2" repeatCount="indefinite" begin="0.5s" />
        </rect>
        <rect x="15" width="2" height="16" transform="translate(0)">
          <animate attributeName="height" attributeType="XML" dur="1s" values="2;16;2" repeatCount="indefinite" begin="0.3s" />
        </rect>
      </svg>
    </div>
    <div class="mobilePanel">
      <div class="mobileProgress" v-if="stickyProgressBar">
        <div class="skip" @touchmove="scrollingProgressBar"></div>
        <div class="mobileProgressing"></div>
        <div class="progressDot"></div>
      </div>
    </div>
    <div class="player-row" @click="clickPlayer($event)">
      <div :class="(hasArtwork)?'playerNowPlaying ':'playerNowPlaying no-image '" v-if="list.tracks.length >= 1">
        <a v-if="hasArtwork && currentAlbumUrl" :href="currentAlbumUrl" class="album-art-link">
          <div class="album-art" :class="{'loading-enable': !classes.waveEnable, 'loading': loading < 100 }">
            <i class="fas fa-circle-notch fa-spin fa-2x fa-fw loading-icon"></i>
            <img class="hover" alt="artwork-hover" :src="list.tracks[currentTrack].poster" />
            <img alt="Player Audio Artwork" :src="list.tracks[currentTrack].poster" />
          </div>
        </a>
        <div v-else-if="hasArtwork" class="album-art" :class="{'loading-enable': !classes.waveEnable, 'loading': loading < 100 }">
          <i class="fas fa-circle-notch fa-spin fa-2x fa-fw loading-icon"></i>
          <img class="hover" alt="artwork-hover" :src="list.tracks[currentTrack].poster" />
          <img alt="Player Audio Artwork" :src="list.tracks[currentTrack].poster" />
        </div>
        <div class="metadata">
          <div class="metadata-inner">
            <div class="track-name" @mouseover="scroll">{{list.tracks[currentTrack].track_title}}{{list.tracks[currentTrack].track_artist && typeof sonaar_music.option.show_artist_name != 'undefined' ? ' ' + sonaar_music.option.artist_separator + ' ' + list.tracks[currentTrack].track_artist:''}}</div>
            <div class="track-album" @mouseover="scroll" v-if="classes.show_album_title && list.tracks[currentTrack].album_title">{{list.tracks[currentTrack].album_title}}</div>
            <div class="track-artist" @mouseover="scroll" v-html="'by ' + list.tracks[currentTrack].album_artist" v-if="!classes.author && list.tracks[currentTrack].album_artist"></div>
          </div>
        </div>
      </div>
      <div class="playerNowPlaying" v-else></div>
      <control :player="this"></control>
      <waveform :player="this" v-if="! isSmallDevice"></waveform>



      <sonaar-extend-button :player="this" v-if="! isSmallDevice"></sonaar-extend-button>
      <store :player="this"></store>
      <div role="button" aria-label="Volume Control" class="volume control--item">
          <div class="sricon-volume" :title="sonaar_music.option.tooltip_volume_btn" :class="mute ? 'active' : '' " @mouseenter="sr_updateSlider" @click="sr_muteTrigger">
            <div class="slider-container">
              <div class="slide"></div>
          </div>
          </div>
        </div>
      </div>
  </div>
  <div class="srp_extendedPlayer_container" :class="[{srp_opened: extendedPlayerOpened}]"  v-if="isSmallDevice">  
    <div class="srp_extendedPlayer_scrolling_box">
      <div class="srp_extendedPlayer" :class="[{srp_opened_cta: extendedPlayerOverlayOpened}]" @click="extendedPlayerClickOutside">
        <div class="srp_ext_primary">
          <div class="srp_ext_header" v-if="list.tracks.length >= 1">
            <i class="sricon-down-arrow srp_collapse_btn" @click="closeExtendedPlayer"></i>
            <div class="srp_playlist_title" @click="closeExtendedPlayer">{{ list.tracks[currentTrack].album_title }}</div>
            <i class="sricon-3-dots-v srp_ellipsis_btn" @click="openExtendedPlayerOverlay" v-if="list.tracks[currentTrack].song_store_list.length || IRON.sonaar.player.albumStoreList.length"></i>
            <div v-if="!list.tracks[currentTrack].song_store_list.length && !IRON.sonaar.player.albumStoreList.length"></div>
          </div>
          <div class="srp_ext_artwork" v-if="list.tracks.length >= 1 && hasArtwork">
            <img alt="Player Audio Artwork" :src="list.tracks[currentTrack].poster" />
          </div>  
          <div class="srp_ext_content">
            <div class="srp_ext_track" v-if="list.tracks.length >= 1">
              <div class="srp_ext_track_info">
                <div class="srp_track_title">{{list.tracks[currentTrack].track_title}}</div>
                <div class="srp_artist">{{list.tracks[currentTrack].track_artist }}</div>
              </div>
              <cta :player="this" :storeid="'srp-fav-bt'" :label=false></cta>
            </div>
            <waveform :player="this"></waveform>
            <div class="srp_ext_control" v-if="list.tracks.length >= 1">
              <div class="srp_control_left">
                <div role="button" tabindex="0" aria-label="Shuffle Track" :title="sonaar_music.option.tooltip_shuffle_btn" class="shuffle control--item sricon-shuffle" :class="shuffle ? 'active' : '' " @click="sr_shuffleToggle" v-if="list.tracks.length > 1 && classes.show_shuffle_bt"></div>
              </div>
              <div class="control" :class="[{srp_ctrl_advanced: classes.show_skip_bt}]">
                <div role="button" tabindex="0" aria-label="Rewind 15 seconds" :title="sonaar_music.option.tooltip_rwd_btn" class="sr_skipBackward sricon-15s" @click="sr_audioSkipTo(-1 * classes.skipBackward)" v-if="classes.show_skip_bt"></div>
                <div role="button" tabindex="0" aria-label="Previous Track" :title="sonaar_music.option.tooltip_prev_btn" class="previous control--item sricon-back" @click="previous" v-if="list.tracks.length > 1 && classes.show_nextprevious_bt"></div>
                <div role="button" tabindex="0" aria-label="Play / Pause" :title="sonaar_music.option.tooltip_play_btn" class="play control--item sricon-play" @click="play"></div>
                <div role="button" tabindex="0" aria-label="Next Track" :title="sonaar_music.option.tooltip_next_btn" class="next control--item sricon-forward" @click="next" v-if="list.tracks.length > 1 && classes.show_nextprevious_bt"></div>
                <div role="button" tabindex="0" aria-label="Forward 30 seconds" :title="sonaar_music.option.tooltip_fwrd_btn" class="sr_skipForward sricon-30s" @click="sr_audioSkipTo(classes.skipForward)" v-if="classes.show_skip_bt"></div>
              </div>
              <div class="srp_control_right">
                <div role="button" tabindex="0" aria-label="Speed Rates" :title="sonaar_music.option.tooltip_speed_btn" class="sr_speedRate" :class="classes.speedRate != 1 ? 'active' : '' " @click="sr_setSpeedRate" v-if="classes.show_speed_bt"><div>{{classes.speedRate}}X</div></div>
                <div role="button" tabindex="0" aria-label="Repeat" :title="sonaar_music.option.tooltip_repeat_btn" class="srp_repeat sricon-repeat control--item" @click="IRON.repeatButtonToggle" :data-repeat-status="repeatStatus" v-if="repeatButton && !classes.notrackskip"></div>
              </div>
            </div>
            <div class="srp_ext_featured_cta" v-if="list.tracks.length >= 1">
              <div class="srp_ext_featured_cta_left">
                <div role="button" tabindex="0" aria-label="View Tracklist" :title="sonaar_music.option.tooltip_tracklist_btn" class="list control--item sricon-list" @click="setshowList" v-if="list.tracks.length > 1 && classes.show_tracklist_bt"></div>
              </div>
              <div class="srp_ext_featured_cta_center" @click="closeExtendedPlayer"></div>
              <div class="srp_ext_featured_cta_right">
                  <cta class="srp_ext_cta_share" :player="this" :storeid="'sr_store_force_share_bt'" :label=false></cta>
                  <cta class="srp_ext_cta_addtocart" :player="this" :storeid="'fas fa-cart-plus'" :label=true></cta>
                  <cta class="srp_ext_cta_buynow" :player="this" :storeid="'fas fa-shopping-cart'" :label=true></cta>
              </div>
            </div>
          </div>
        </div>
        <div class="srp_ext_secondary" v-if="list.tracks.length >= 1 && outputTrackDescription" @click="extendedScrolldown">
          <div v-html="outputTrackDescription" class="srp_ext_section"></div>
        </div>
        
      </div>
    </div>

    <div class="srp_ext_overlay_panel_outside" v-if="list.tracks.length >= 1 && extendedPlayerOverlayOpened" @click="closeExtendedPlayerOverlay"></div>
    <div class="srp_ext_overlay_panel" :class="[{srp_opened: extendedPlayerOverlayOpened}]" v-if="list.tracks.length >= 1">
      <div class="sricon-close close"  @click="closeExtendedPlayerOverlay"></div>
        <div class="srp_ext_cta">
          <div class="srp_ext_track_info_wrapper">
            <div class="srp_ext_artwork" v-if="list.tracks.length >= 1 && hasArtwork">
              <img alt="Player Audio Artwork" :src="list.tracks[currentTrack].poster" />
            </div>
            <div class="srp_ext_track_info">
              <div class="srp_track_title">{{list.tracks[currentTrack].track_title}}</div>
              <div class="srp_artist">{{list.tracks[currentTrack].track_artist }}</div>
            </div>
          </div>
         
          <cta :player="this" :storeid="'fas fa-cart-plus'" :label=true></cta>
          <cta :player="this" :storeid="'fas fa-shopping-cart'" :label=true></cta>
          <cta :player="this" :storeid="'sr_store_force_dl_bt'" :label=true></cta>
          <cta :player="this" :storeid="'sr_store_force_share_bt'" :label=true></cta>
          <cta :player="this" :storeid="'srp-fav-bt'" :label=true></cta>
          <cta :player="this" :storeid="'sr_store_force_pl_bt'" :label=true></cta>
          <span v-for="(cta) in list.tracks[currentTrack].song_store_list">
            <a :href="cta['store-link']" target="_blank" @click="ctaClick(cta, $(event.target))">
              <i :class="cta['store-icon']"></i>
              {{ cta['store-name'] }}
            </a>
          </span>
      </div>
    </div>
  </div>
</div><script data-cfasync="false" id="bn-passkeys-js-extra">
var BN_PK = {"ajaxUrl":"https://bassnectar.net/wp-admin/admin-ajax.php","nonce":"136e3b4500","isLoggedIn":"","redirectTo":"https://bassnectar.net/account/"};
//# sourceURL=bn-passkeys-js-extra
</script>
<script data-cfasync="false" id="bn-passkeys-js" src="https://bassnectar.net/wp-content/plugins/bn-passkeys/bn-passkeys.js?ver=1.0.3"></script>
<script data-cfasync="false" id="bn-pin-login-js-extra">
var BN_PIN = {"ajaxUrl":"https://bassnectar.net/wp-admin/admin-ajax.php","nonce":"5884958d4f","redirectTo":"https://bassnectar.net/account/"};
//# sourceURL=bn-pin-login-js-extra
</script>
<script data-cfasync="false" id="bn-pin-login-js" src="https://bassnectar.net/wp-content/plugins/bn-pin-login/bn-pin-login.js?ver=1.0.0"></script>
<script data-cfasync="false" id="bn-qr-login-js-extra">
var BN_QR = {"ajaxUrl":"https://bassnectar.net/wp-admin/admin-ajax.php","nonce":"06af01f70a","refreshInterval":"60000","pollInterval":"2000"};
//# sourceURL=bn-qr-login-js-extra
</script>
<script data-cfasync="false" id="bn-qr-login-js" src="https://bassnectar.net/wp-content/plugins/bn-qr-login/bn-qr-login.js?ver=1.0.2"></script>
<script data-cfasync="false" id="bn-shopify-storefront-js-extra">
var bnShopify = {"ajaxUrl":"https://bassnectar.net/wp-admin/admin-ajax.php","nonce":"bc7d1a3eda","cartIconSelector":".header-icons, .nav-icons, .header-right, .site-header","domain":"http://183139.myshopify.com"};
//# sourceURL=bn-shopify-storefront-js-extra
</script>
<script data-cfasync="false" id="bn-shopify-storefront-js" src="https://bassnectar.net/wp-content/plugins/bn-shopify-storefront/assets/bn-shopify-storefront.js?ver=1.2.0"></script>
<script data-cfasync="false" id="bn-shop-pages-js" src="https://bassnectar.net/wp-content/plugins/bn-shopify-storefront/assets/bn-shop-pages.js?ver=1.2.0"></script>
<script data-cfasync="false" id="bn-engine-apple-music-js-before">
window.bnStreamingConfig = window.bnStreamingConfig || {"siteUrl":"https:\/\/bassnectar.net","loggedIn":""};
//# sourceURL=bn-engine-apple-music-js-before
</script>
<script data-cfasync="false" id="bn-engine-apple-music-js" src="https://bassnectar.net/wp-content/plugins/bn-streaming/assets/js/bn-engine-apple-music.js?ver=1778041539"></script>
<script data-cfasync="false" id="bn-greatest-hits-js-extra">
var BN_GH_CONFIG = {"restUrl":"https://bassnectar.net/wp-json/bn-gh/v1/","nonce":"a6dc773124","isLoggedIn":"","userId":"0","tierMultiplier":"1","tierLabel":"Guest","cooldownMs":"86400000","loginUrl":"https://bassnectar.net/access/?redirect_to=https%3A%2F%2Fbassnectar.net%2Fgreatest-hits%2F","signupUrl":"https://bassnectar.net/signup","previewCampaignSlug":""};
//# sourceURL=bn-greatest-hits-js-extra
</script>
<script data-cfasync="false" id="bn-greatest-hits-js" src="https://bassnectar.net/wp-content/plugins/bn-greatest-hits/assets/js/bn-greatest-hits.js?ver=1780976214"></script>
<script data-cfasync="false" id="bn-gh-animations-js" src="https://bassnectar.net/wp-content/plugins/bn-greatest-hits/assets/js/bn-gh-animations.js?ver=1779243384"></script>
<script data-cfasync="false" id="bn-gh-overhaul-js" src="https://bassnectar.net/wp-content/plugins/bn-greatest-hits/assets/js/bn-gh-overhaul.js?ver=1779244633"></script>
<script data-cfasync="false" id="bn-device-manager-js-extra">
var bnDeviceManager = {"restUrl":"https://bassnectar.net/wp-json/bn/v1/devices","nonce":"a6dc773124","deviceHash":""};
//# sourceURL=bn-device-manager-js-extra
</script>
<script data-cfasync="false" id="bn-device-manager-js" src="https://bassnectar.net/wp-content/plugins/bn-device-manager/assets/bn-device-manager.js?ver=1.0.0"></script>
<script data-cfasync="false" id="bassnectar-custom-scripts-js-extra">
var bn_gallery = {"ajax_url":"https://bassnectar.net/wp-admin/admin-ajax.php","nonce":"b0a0b928c0"};
//# sourceURL=bassnectar-custom-scripts-js-extra
</script>
<script data-cfasync="false" id="bassnectar-custom-scripts-js" src="https://bassnectar.net/wp-content/themes/sonaar-child/scripts.js?ver=1780931443.11"></script>
<script data-cfasync="false" id="elementor-webpack-runtime-js" src="https://bassnectar.net/wp-content/plugins/elementor/assets/js/webpack.runtime.min.js?ver=3.35.5"></script>
<script data-cfasync="false" id="elementor-frontend-modules-js" src="https://bassnectar.net/wp-content/plugins/elementor/assets/js/frontend-modules.min.js?ver=3.35.5"></script>
<script data-cfasync="false" id="jquery-ui-core-js" src="https://bassnectar.net/wp-includes/js/jquery/ui/core.min.js?ver=1.13.3"></script>
<script data-cfasync="false" id="elementor-frontend-js" defer src="https://bassnectar.net/wp-content/plugins/elementor/assets/js/frontend.min.js?ver=3.35.5"></script>
<script data-cfasync="false" id="bn-navigator-js" src="https://bassnectar.net/wp-content/themes/sonaar-child/bn-navigator.js?ver=1777684454"></script>
<script data-cfasync="false" id="bn-player-js-extra">
var bnPlayerConfig = {"ajaxUrl":"https://bassnectar.net/wp-admin/admin-ajax.php","restUrl":"https://bassnectar.net/wp-json/bnpm/v1/","nonce":"a6dc773124","loggedIn":"","userId":"0","analyticsUrl":"https://bassnectar.net/analytics-event.php","analyticsNonce":"e2c4d35f5fec38b3"};
//# sourceURL=bn-player-js-extra
</script>
<script data-cfasync="false" id="bn-player-js" src="https://bassnectar.net/wp-content/themes/sonaar-child/bn-player.js?ver=1780954105"></script>
<script data-cfasync="false" id="bn-streaming-core-js-extra">
var bnStreamingConfig = {"preference":"none","connections":[],"platformConnections":{"spotify":{"connected":false,"configured":true},"apple-music":{"connected":false,"configured":true},"soundcloud":{"connected":false,"configured":true},"tidal":{"connected":false,"configured":true}},"fallbackOrder":["spotify","apple-music","soundcloud","tidal"],"playbackPlatforms":["spotify","apple-music","soundcloud","tidal"],"loggedIn":"","ajaxUrl":"https://bassnectar.net/wp-admin/admin-ajax.php","nonce":"fec6934a2b","restNonce":"a6dc773124","spotifyClientId":"f3c5bb69240d44e7bafa1a72cccf75b7","spotifyConnected":"","redirectUri":"https://bassnectar.net/streaming-callback/","spotifyScopes":"streaming user-read-email user-read-private user-modify-playback-state user-read-playback-state playlist-modify-public ugc-image-upload user-read-recently-played user-follow-read","siteUrl":"https://bassnectar.net","isMobile":""};
//# sourceURL=bn-streaming-core-js-extra
</script>
<script data-cfasync="false" id="bn-streaming-core-js" src="https://bassnectar.net/wp-content/plugins/bn-streaming/assets/js/bn-streaming-core.js?ver=1.6.0"></script>
<script data-cfasync="false" id="bn-engine-spotify-js" src="https://bassnectar.net/wp-content/plugins/bn-streaming/assets/js/bn-engine-spotify.js?ver=1.6.0"></script>
<script data-cfasync="false" id="bn-engine-spotify-connect-js" src="https://bassnectar.net/wp-content/plugins/bn-streaming/assets/js/bn-engine-spotify-connect.js?ver=1.6.0"></script>
<script data-cfasync="false" id="bn-player-spotify-bridge-js" src="https://bassnectar.net/wp-content/plugins/bn-streaming/assets/js/bn-player-spotify-bridge.js?ver=1.6.0"></script>
<script data-cfasync="false" id="bn-device-picker-js" src="https://bassnectar.net/wp-content/plugins/bn-streaming/assets/js/bn-device-picker.js?ver=1.6.0"></script>
<script data-cfasync="false" id="bn-album-sheet-js-before">
window.__bnSheetVer=1780903384;
//# sourceURL=bn-album-sheet-js-before
</script>
<script data-cfasync="false" id="bn-album-sheet-js" src="https://bassnectar.net/wp-content/themes/sonaar-child/bn-album-sheet.js?ver=1778040217"></script>
<script data-cfasync="false" id="bn-vault-sheet-js-extra">
var wpApiSettings = {"nonce":"a6dc773124","root":"https://bassnectar.net/wp-json/"};
//# sourceURL=bn-vault-sheet-js-extra
</script>
<script data-cfasync="false" id="bn-vault-sheet-js" src="https://bassnectar.net/wp-content/themes/sonaar-child/bn-vault-sheet.js?ver=1780884510"></script>
<script data-cfasync="false" id="smush-lazy-load-js-before">
var smushLazyLoadOptions = {"autoResizingEnabled":false,"autoResizeOptions":{"precision":5,"skipAutoWidth":true}};
//# sourceURL=smush-lazy-load-js-before
</script>
<script data-cfasync="false" id="smush-lazy-load-js" src="https://bassnectar.net/wp-content/plugins/wp-smush-pro/app/assets/js/smush-lazy-load.min.js?ver=4.1.0"></script>
<script data-cfasync="false" id="bn-pwa-init-js-before">
window.BN_SW_VER="1780982048";
//# sourceURL=bn-pwa-init-js-before
</script>
<script data-cfasync="false" id="bn-pwa-init-js" defer src="https://bassnectar.net/bn-pwa-loader.php?f=pwa-init.js&#038;v=1780876343"></script>
    <script data-cfasync="false">
    (function(){
        function bnIsLoggedIn() {
            return document.cookie.split(";").some(function(c) {
                return c.trim().indexOf("bn_logged_in=") === 0;
            });
        }

        function bnBuildAuthNav() {
            var nav = document.querySelector('.side-menu .nav-holder');
            if (!nav) return;
            var existing = nav.querySelector('.bn-menu-auth-row');
            if (existing) existing.remove();

            var loggedIn = bnIsLoggedIn();
            var authRow = document.createElement('div');
            authRow.className = 'bn-menu-auth-row';

            if (loggedIn) {
                authRow.innerHTML =
                    '<a href="/account/" class="bn-menu-auth-btn bn-menu-signin-btn" data-barba-prevent>' +
                        '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>' +
                        '<span>ACCOUNT</span>' +
                    '</a>' +
                    '<a href="#" class="bn-menu-auth-btn bn-menu-signout-btn" id="bn-signout-link">' +
                        '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>' +
                        '<span>SIGN OUT</span>' +
                    '</a>';
            } else {
                authRow.innerHTML =
                    '<a href="/access/" class="bn-menu-auth-btn bn-menu-signin-btn" data-barba-prevent>' +
                        '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" y1="12" x2="3" y2="12"/></svg>' +
                        '<span>SIGN IN</span>' +
                    '</a>' +
                    '<a href="/signup/" class="bn-menu-auth-btn bn-menu-join-btn" data-barba-prevent>' +
                        '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>' +
                        '<span>JOIN</span>' +
                    '</a>';
            }

            var firstSection = nav.querySelector('.menu');
            if (firstSection) {
                nav.insertBefore(authRow, firstSection);
            } else {
                nav.insertBefore(authRow, nav.firstChild);
            }

            var signoutBtn = document.getElementById('bn-signout-link');
            if (signoutBtn) {
                signoutBtn.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopImmediatePropagation();
                    // Clear JS auth cookie immediately before navigating
                    document.cookie = 'bn_logged_in=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/';
                    window.location.href = 'https://bassnectar.net/?bn_logout=1&amp;_wpnonce=e0ec8dccd2';
                }, true);
            }
        }

        // Build on load
        bnBuildAuthNav();

        // Expose globally so it can be called after Barba transitions
        window.bnBuildAuthNav = bnBuildAuthNav;
        window.bnLogoutUrl = 'https://bassnectar.net/?bn_logout=1&amp;_wpnonce=e0ec8dccd2';
    })();
    </script>
    
        <style>#bn-popup-23351 .bn-popup-heading {
font-size: 20px;
letter-spacing:0;
}</style>
    
    <!-- BN Pop-up: Welcome to Bassnectar Vaults -->
    <div class="bn-popup-overlay bn-popup-has-login" id="bn-popup-23351" style="display:none;align-items:center;justify-content:center;"
         data-trigger="page_load"
         data-delay="3"
         data-scroll="50"
         data-dismiss='{&quot;type&quot;:&quot;permanent&quot;,&quot;days&quot;:30,&quot;key&quot;:&quot;bn_popup_23351&quot;}'
         data-popup-id="23351">
        <div class="bn-popup-backdrop" style="background:rgba(0,0,0,0.65);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);"></div>
        <div class="bn-popup-modal" style="background:#0a0000;border-radius:16px;">
            <button type="button" class="bn-popup-close" aria-label="Close">&times;</button>

                        <!-- TWO-COLUMN LAYOUT -->
            <div class="bn-popup-columns">
                <div class="bn-popup-col-content">
                                        <div class="bn-popup-image">
                        <img data-src="https://bassnectar.net/wp-content/uploads/vaults-with-icon.svg" alt="" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==" class="lazyload">
                    </div>
                    
                                        <h2 class="bn-popup-heading">The Bassnectar Vaults are open!</h2>
                    
                                        <div class="bn-popup-text"><strong>Level up.</strong> The Other Side is now the Bassnectar Vaults. We've merged TOS &amp; bassnectar.net into one unified experience with a new look, more content, &amp; expanded features to explore it all.

<em>Existing TOS subscribers (Freestyle | Unlocked | Gold): Your account is ready to go. Use the <em><strong>magic link</strong></em> option to authorize your account and start exploring.</em></div>
                    
                    
                                        <div class="bn-popup-ctas">
                        <a href="https://bassnectar.net/vaults" class="bn-popup-cta bn-popup-cta-primary">Explore The Vaults</a>
                                                <a href="https://bassnectar.net/support" class="bn-popup-cta bn-popup-cta-secondary">Need Help?</a>
                                            </div>
                                    </div>

                <div class="bn-popup-col-login">
                        <div class="bnp-login-form-wrap">
        <p class="bnp-login-subtitle">Sign in or create an account to continue.</p>

        <!-- Social Login Buttons -->
        <div class="bnp-login-social">
                    </div>

        <!-- Email Login Form (hidden by default) -->
        <div class="bnp-login-email-form" id="bnp-email-login" style="">
            <div class="bnp-login-divider"><span>Sign in with email</span></div>

            <!-- Tab toggle: Password / Magic Link -->
            <div class="bnp-login-tabs">
                <button type="button" class="bnp-login-tab active" data-tab="password" data-prefix="bnp">Password</button>
                <button type="button" class="bnp-login-tab" data-tab="magic" data-prefix="bnp">Magic Link</button>
            </div>

            <!-- Form panels (stacked grid so container keeps the taller panel's height) -->
            <div class="bnp-login-panels">
                <!-- Password form -->
                <form method="post" class="bnp-login-form bnp-login-panel active" id="bnp-password-form" data-ajax="true">
                    <input type="text" name="log" placeholder="Email or username" required autocomplete="username" class="bnp-login-input">
                    <input type="password" name="pwd" placeholder="Password" required autocomplete="current-password" class="bnp-login-input">
                    <input type="hidden" name="redirect_to" value="https://bassnectar.net/">
                    <div class="bnp-login-form-error" id="bnp-password-error" style="display:none;"></div>
                    <button type="submit" class="bnp-login-btn bnp-login-btn-accent">Sign In</button>
                    <button type="button" class="bnp-login-forgot" onclick="var tabs=document.querySelectorAll('.bnp-login-tab');if(tabs.length>1){tabs[1].click();}return false;">Forgot password? Use a magic link</button>
                </form>

                <!-- Magic Link form -->
                <form method="post" class="bnp-login-form bnp-login-panel" id="bnp-magic-form" data-ajax="true">
                    <p class="bnp-magic-desc">We'll send a login link to your email — no password needed.</p>
                    <input type="email" name="email" placeholder="Your email address" required autocomplete="email" class="bnp-login-input">
                    <button type="submit" class="bnp-login-btn bnp-login-btn-accent">Send Login Link</button>
                    <div class="bnp-magic-status" id="bnp-magic-status"></div>
                </form>
            </div>
        </div>


        <!-- Extra login methods (QR, PIN, Passkey) -->
        <div class="bn-pk-login-section" id="bn-pk-login-section">
        <button type="button" class="bn-pk-login-btn" id="bn-pk-login-trigger">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12C2 6.5 6.5 2 12 2a10 10 0 0 1 8 4"/><path d="M5 19.5C5.5 18 6 15 6 12c0-.7.12-1.37.34-2"/><path d="M17.29 21.02c.12-.6.43-2.3.5-3.02"/><path d="M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4"/><path d="M8.65 22c.21-.66.45-1.32.57-2"/><path d="M14 13.12c0 2.38 0 6.38-1 8.88"/><path d="M2 16h.01"/><path d="M21.8 16c.2-2 .131-5.354 0-6"/><path d="M9 6.8a6 6 0 0 1 9 5.2c0 .47 0 1.17-.02 2"/></svg>
            Sign in with Passkey / Touch ID
        </button>
        <p class="bn-pk-status bn-pk-error" id="bn-pk-login-error" style="display:none;"></p>
        <div class="bn-pk-loading" id="bn-pk-login-loading" style="display:none;">
            <div class="bn-pk-spinner"></div>
            <span>Waiting for biometric…</span>
        </div>
        <p class="bn-pk-setup-hint" style="font-size:12px;color:rgba(255,255,255,0.5);margin-top:6px;">Set up passkeys in <strong>Account → Edit Profile</strong> after signing in</p>
    </div><div class="bn-pin-login-section" id="bn-pin-section">
        <button type="button" class="bn-pin-toggle-btn" id="bn-pin-toggle" aria-expanded="false" data-target="bn-pin-panel">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <rect x="5" y="2" width="14" height="20" rx="2"/>
                <line x1="12" y1="18" x2="12" y2="18" stroke-width="3" stroke-linecap="round"/>
            </svg>
            Sign in with PIN
        </button>
        <div class="bn-pin-panel" id="bn-pin-panel" style="display:none;">
            <!-- Step 1: Enter email -->
            <div class="bn-pin-step" id="bn-pin-step-email">
                <p class="bn-pin-hint">We'll email you a 6-digit code. No password needed.</p>
                <input type="email" class="bn-pin-input" id="bn-pin-email" placeholder="Your email address" autocomplete="email">
                <button type="button" class="bn-pin-btn" id="bn-pin-send-btn">Send PIN</button>
                <p class="bn-pin-status bn-pin-error" id="bn-pin-send-error" style="display:none;"></p>
                <div class="bn-pin-loading" id="bn-pin-send-loading" style="display:none;">
                    <div class="bn-pin-spinner"></div>
                    <span>Sending…</span>
                </div>
            </div>
            <!-- Step 2: Enter PIN -->
            <div class="bn-pin-step" id="bn-pin-step-verify" style="display:none;">
                <p class="bn-pin-hint" id="bn-pin-sent-msg">Check your email for a 6-digit PIN.</p>
                <div class="bn-pin-code-inputs" id="bn-pin-code-inputs">
                    <input type="tel" class="bn-pin-digit" maxlength="1" inputmode="numeric" pattern="[0-9]" autocomplete="one-time-code">
                    <input type="tel" class="bn-pin-digit" maxlength="1" inputmode="numeric" pattern="[0-9]">
                    <input type="tel" class="bn-pin-digit" maxlength="1" inputmode="numeric" pattern="[0-9]">
                    <span class="bn-pin-sep">–</span>
                    <input type="tel" class="bn-pin-digit" maxlength="1" inputmode="numeric" pattern="[0-9]">
                    <input type="tel" class="bn-pin-digit" maxlength="1" inputmode="numeric" pattern="[0-9]">
                    <input type="tel" class="bn-pin-digit" maxlength="1" inputmode="numeric" pattern="[0-9]">
                </div>
                <p class="bn-pin-status bn-pin-error" id="bn-pin-verify-error" style="display:none;"></p>
                <div class="bn-pin-loading" id="bn-pin-verify-loading" style="display:none;">
                    <div class="bn-pin-spinner"></div>
                    <span>Verifying…</span>
                </div>
                <button type="button" class="bn-pin-back-btn" id="bn-pin-back">← Send a new PIN</button>
            </div>
        </div>
    </div><div class="bn-qr-login-section" id="bn-qr-section">
        <button type="button" class="bn-qr-toggle-btn" id="bn-qr-toggle" aria-expanded="false" data-target="bn-qr-panel">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <rect x="3" y="3" width="7" height="7" rx="1"/>
                <rect x="14" y="3" width="7" height="7" rx="1"/>
                <rect x="3" y="14" width="7" height="7" rx="1"/>
                <rect x="14" y="14" width="3" height="3"/>
                <rect x="19" y="14" width="2" height="2"/>
                <rect x="14" y="19" width="2" height="2"/>
                <rect x="17" y="17" width="2" height="2"/>
            </svg>
            Sign in with QR code
        </button>
        <div class="bn-qr-panel" id="bn-qr-panel" style="display:none;">
            <p class="bn-qr-hint">Scan with your phone camera to log in instantly</p>
            <div class="bn-qr-code-wrap" id="bn-qr-code-wrap">
                <div class="bn-qr-loading" id="bn-qr-loading">
                    <div class="bn-qr-spinner"></div>
                    <span>Generating code…</span>
                </div>
                <img id="bn-qr-img" src="" alt="QR Code" style="display:none;" />
            </div>
            <p class="bn-qr-timer" id="bn-qr-timer"></p>
            <p style="text-align:center;margin:8px 0 0;"><a href="#" class="bn-qr-refresh-link" id="bn-qr-refresh" style="font-size:12px;color:rgba(255,255,255,0.45);text-decoration:none;letter-spacing:0.03em;" onclick="typeof bnQrInit==='function'&&bnQrInit();return false;">&#x21bb; Refresh QR code</a></p>
            <p class="bn-qr-status" id="bn-qr-status" style="display:none;"></p>
        </div>
    </div>
        <!-- Social Sign In -->
        <div style="text-align:center;color:rgba(255,255,255,0.4);font-size:12px;letter-spacing:2px;margin:20px 0 12px;text-transform:uppercase">Social Sign in / Sign up</div>
                    <button type="button" class="bnp-login-btn bnp-login-btn-discord" onclick="window.open('https://discord.com/oauth2/authorize?client_id=1473576170220945488&#038;redirect_uri=https%3A%2F%2Fbassnectar.net%2F%3Fbn_discord_callback%3D1&#038;response_type=code&#038;scope=identify%20email%20guilds.join&#038;state=5ae092d6d1&#038;prompt=consent','_blank','width=500,height=700');return false;">
                <svg width="20" height="20" viewBox="0 0 48 48" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M40.23 8.57a39.3 39.3 0 00-9.7-3.01.15.15 0 00-.16.07 27.37 27.37 0 00-1.2 2.48 36.27 36.27 0 00-10.34 0A25.1 25.1 0 0017.6 5.63a.15.15 0 00-.16-.07 39.2 39.2 0 00-9.7 3.01.14.14 0 00-.06.05C3.55 14.9 2.06 21 2.82 27.01a.16.16 0 00.06.11 39.5 39.5 0 0011.89 6.01.15.15 0 00.17-.06 28.24 28.24 0 002.43-3.96.15.15 0 00-.08-.21 26.03 26.03 0 01-3.72-1.77.15.15 0 01-.01-.26c.25-.19.5-.38.74-.58a.15.15 0 01.15-.02c7.81 3.57 16.26 3.57 23.98 0a.15.15 0 01.16.02c.24.2.49.4.74.58a.15.15 0 01-.01.26c-1.19.69-2.42 1.28-3.72 1.77a.15.15 0 00-.08.21 31.7 31.7 0 002.43 3.96.15.15 0 00.16.06 39.39 39.39 0 0011.91-6.01.15.15 0 00.06-.11c.9-9.38-1.52-17.53-6.42-24.75a.12.12 0 00-.06-.05zM16.96 23.46c-2.14 0-3.9-1.97-3.9-4.38s1.73-4.38 3.9-4.38 3.94 1.97 3.9 4.38c0 2.41-1.73 4.38-3.9 4.38zm14.41 0c-2.14 0-3.9-1.97-3.9-4.38s1.73-4.38 3.9-4.38 3.94 1.97 3.9 4.38c0 2.41-1.73 4.38-3.9 4.38z"/></svg>
                Continue with Discord
            </button>
        
        <!-- Social login methods from plugins (Google, Apple, etc.) -->
        <button type="button" class="bn-login-btn bn-login-btn-google" id="bn-auth-google-btn"
        data-nonce="b5cec657c2"><svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <path d="M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844c-.209 1.125-.843 2.078-1.796 2.717v2.258h2.908c1.702-1.567 2.684-3.874 2.684-6.615z" fill="#4285F4"/>
        <path d="M9 18c2.43 0 4.467-.806 5.956-2.18l-2.909-2.259c-.806.54-1.836.86-3.047.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332A8.997 8.997 0 009 18z" fill="#34A853"/>
        <path d="M3.964 10.71A5.41 5.41 0 013.682 9c0-.593.102-1.17.282-1.71V4.958H.957A8.996 8.996 0 000 9c0 1.452.348 2.827.957 4.042l3.007-2.332z" fill="#FBBC05"/>
        <path d="M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0A8.997 8.997 0 00.957 4.958L3.964 6.29C4.672 4.163 6.656 3.58 9 3.58z" fill="#EA4335"/>
    </svg> Continue with Google</button>
        <!-- Signup prompt -->
        <div class="bnp-login-signup-prompt">
                            <p>Don't have an account? <button type="button" class="bnp-login-link-btn" onclick="window.open('https://bassnectar.net/vaults/freestyle/','_blank');return false;">Sign up free</button> or <button type="button" class="bnp-login-link-btn" onclick="window.open('https://bassnectar.net/vaults/unlocked/','_blank');return false;">Subscribe to Unlocked</button></p>
                    </div>
    </div>

    <script data-cfasync="false">
    (function() {
        var prefix = 'bnp';
        var isPopup = true;

        // Email toggle — use button, no navigation possible
        var toggle = document.getElementById(prefix + '-email-toggle');
        var emailSection = document.getElementById(prefix + '-email-login');
        if (toggle && emailSection) {
            toggle.addEventListener('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                emailSection.style.display = emailSection.style.display === 'none' ? 'block' : 'none';
            });
        }

        // Tab switching
        var tabs = document.querySelectorAll('.' + prefix + '-login-tab');
        tabs.forEach(function(tab) {
            tab.addEventListener('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                var p = this.getAttribute('data-prefix');
                this.parentElement.querySelectorAll('.' + p + '-login-tab').forEach(function(t) { t.classList.remove('active'); });
                this.classList.add('active');
                var target = this.getAttribute('data-tab');
                var pwdPanel = document.getElementById(p + '-password-form');
                var magicPanel = document.getElementById(p + '-magic-form');
                if (target === 'password') {
                    pwdPanel.classList.add('active');
                    magicPanel.classList.remove('active');
                } else {
                    magicPanel.classList.add('active');
                    pwdPanel.classList.remove('active');
                }
            });
        });

        // Password login via AJAX
        var pwdForm = document.getElementById(prefix + '-password-form');
        if (pwdForm) {
            pwdForm.addEventListener('submit', function(e) {
                e.preventDefault();
                e.stopPropagation();
                var log = this.querySelector('input[name="log"]').value;
                var pwd = this.querySelector('input[name="pwd"]').value;
                var redirectTo = this.querySelector('input[name="redirect_to"]').value;
                var btn = this.querySelector('button[type="submit"]');
                var errorEl = document.getElementById(prefix + '-password-error');

                errorEl.style.display = 'none';
                btn.disabled = true;
                btn.textContent = 'Signing in...';

                var formData = new FormData();
                formData.append('action', 'bn_password_login');
                formData.append('log', log);
                formData.append('pwd', pwd);
                formData.append('nonce', 'd8bb2baef1');
                formData.append('redirect_to', redirectTo);

                fetch('https://bassnectar.net/wp-admin/admin-ajax.php', {
                    method: 'POST',
                    body: formData,
                    credentials: 'same-origin',
                }).then(function(r) { return r.json(); }).then(function(data) {
                    if (data.success && data.data.redirect) {
                        var _rUrl = data.data.redirect.replace(/[?&]_bn_auth=\d+/, "");
                        var _rSep = _rUrl.indexOf("?") !== -1 ? "&" : "?";
                        window.location.assign(_rUrl + _rSep + "_bn_auth=" + Date.now());
                    } else {
                        errorEl.textContent = data.data.message || 'Invalid email or password.';
                        errorEl.style.display = 'block';
                        btn.disabled = false;
                        btn.textContent = 'Sign In';
                    }
                }).catch(function() {
                    errorEl.textContent = 'Something went wrong. Please try again.';
                    errorEl.style.display = 'block';
                    btn.disabled = false;
                    btn.textContent = 'Sign In';
                });
            });
        }

        // Magic link AJAX
        var magicForm = document.getElementById(prefix + '-magic-form');
        if (magicForm) {
            magicForm.addEventListener('submit', function(e) {
                e.preventDefault();
                e.stopPropagation();
                var email = this.querySelector('input[name="email"]').value;
                var status = document.getElementById(prefix + '-magic-status');
                var btn = this.querySelector('button[type="submit"]');

                btn.disabled = true;
                btn.textContent = 'Sending...';

                var formData = new FormData();
                formData.append('action', 'bn_send_magic_link');
                formData.append('email', email);
                formData.append('nonce', '8adcfa89ff');

                fetch('https://bassnectar.net/wp-admin/admin-ajax.php', {
                    method: 'POST',
                    body: formData,
                    credentials: 'same-origin',
                }).then(function(r) { return r.json(); }).then(function(data) {
                    status.textContent = data.data.message;
                    status.style.display = 'block';
                    btn.disabled = false;
                    btn.textContent = 'Send Login Link';
                }).catch(function() {
                    status.textContent = 'Something went wrong. Please try again.';
                    status.style.display = 'block';
                    btn.disabled = false;
                    btn.textContent = 'Send Login Link';
                });
            });
        }
    })();
    </script>
                    </div>
            </div>

                    </div>
    </div>

    <script data-cfasync="false">
    (function() {
        'use strict';
        var overlay = document.getElementById('bn-popup-23351');
        if (!overlay) return;

        var trigger   = overlay.dataset.trigger;
        var delay     = parseInt(overlay.dataset.delay, 10) || 3;
        var scrollPct = parseInt(overlay.dataset.scroll, 10) || 50;
        var dismiss   = JSON.parse(overlay.dataset.dismiss || '{}');
        var shown     = false;

        function isDismissed() {
            if (dismiss.type === 'none') return false;
            if (dismiss.type === 'session') {
                return sessionStorage.getItem(dismiss.key) === '1';
            }
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                if (cookies[i].trim().indexOf(dismiss.key + '=') === 0) return true;
            }
            return false;
        }

        function markDismissed() {
            if (dismiss.type === 'session') {
                sessionStorage.setItem(dismiss.key, '1');
            } else if (dismiss.type === 'permanent') {
                document.cookie = dismiss.key + '=1; max-age=' + (365*24*60*60) + '; path=/;';
            } else if (dismiss.type === 'days') {
                document.cookie = dismiss.key + '=1; max-age=' + (dismiss.days*24*60*60) + '; path=/;';
            }
        }

        function showPopup() {
            if (shown || isDismissed()) return;
            shown = true;
            overlay.style.display = 'flex';
            document.body.classList.add('bn-popup-open');
            requestAnimationFrame(function() {
                overlay.classList.add('bn-popup-visible');
            });
        }

        function hidePopup() {
            overlay.classList.remove('bn-popup-visible');
            document.body.classList.remove('bn-popup-open');
            markDismissed();
            setTimeout(function() { overlay.style.display = 'none'; }, 300);
        }

        overlay.querySelector('.bn-popup-close').addEventListener('click', hidePopup);
        overlay.querySelector('.bn-popup-backdrop').addEventListener('click', hidePopup);
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape' && shown) hidePopup();
        });

                if (isDismissed()) return;

        if (trigger === 'page_load') {
            setTimeout(showPopup, 500);
        } else if (trigger === 'delay') {
            setTimeout(showPopup, delay * 1000);
        } else if (trigger === 'scroll') {
            var scrollHandler = function() {
                var scrolled = (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100;
                if (scrolled >= scrollPct) {
                    showPopup();
                    window.removeEventListener('scroll', scrollHandler);
                }
            };
            window.addEventListener('scroll', scrollHandler, { passive: true });
        } else if (trigger === 'exit_intent') {
            document.addEventListener('mouseout', function(e) {
                if (e.clientY <= 0) showPopup();
            });
        }
            })();
    </script>
        <script data-cfasync="false">
    document.addEventListener('DOMContentLoaded', function() {
        document.querySelectorAll('iframe[src*="vimeo"]').forEach(function(iframe) {
            var src = iframe.src;
            if (!src) return;
            var changed = false;
            if (/[?&]autoplay=1/.test(src)) {
                src = src.replace(/([?&])autoplay=1(&?)/, '$1$2');
                changed = true;
            }
            if (/[?&]muted=1/.test(src)) {
                src = src.replace(/([?&])muted=1(&?)/, '$1$2');
                changed = true;
            }
            if (changed) {
                // Clean up URL artifacts
                src = src.replace(/\?&/, '?').replace(/&&+/g, '&').replace(/[?&]$/, '');
                iframe.src = src;
            }
        });
    });
    </script>
        <script data-cfasync="false">
    // Detect modal mode and add class
    (function() {
        var urlParams = new URLSearchParams(window.location.search);
        if (urlParams.get('bnpm_modal') === '1' || window.self !== window.top) {
            document.body.classList.add('bnpm-modal-mode');

            // Replace product name with "ALL ACCESS" in pricing table
            document.addEventListener('DOMContentLoaded', function() {
                // Replace product name with "ALL ACCESS" everywhere
                var nameEls = document.querySelectorAll('.bn-checkout-title, .page-title h1, .mepr-signup-pricing-table th, .mepr-product-name, .mepr-page-title, .mp_header h3');
                nameEls.forEach(function(el) {
                    var text = el.textContent.trim().toLowerCase();
                    if (text === 'unlocked' || text.indexOf('unlock') !== -1) {
                        el.textContent = 'ALL ACCESS';
                    }
                });
                // Hide <hr> and coupon toggle
                document.querySelectorAll('hr').forEach(function(hr) { hr.style.display = 'none'; });
                document.querySelectorAll('.have-coupon, .have-coupon-link, .mepr-has-coupon-link, .mepr_coupon_link, .mepr-coupon-toggle').forEach(function(el) { el.style.display = 'none'; });
            });
        }
    })();
    
    jQuery(document).ready(function($) {
        // ============================================
        // ACCOUNT PAGE ENHANCEMENTS
        // Uses CSS Grid + order for layout (no DOM manipulation)
        // Uses AJAX preloading for instant tab switching
        // ============================================
        var $accountNav = $('#mepr-account-nav');
        
        if ($accountNav.length) {
            // Helper to apply per-tab enhancements
            function applyAccountEnhancements() {
                var $wm = $('#mepr-account-welcome-message');
                if ($wm.length) {
                    var fn = $('input[name="user_first_name"]').val();
                    var dn = fn || '';
                    if (dn) $wm.text('Hey there, ' + dn);
                }
                // Add logout button if not already present
                var $cw = $('.entry .mp_wrapper').eq(1);
                if ($cw.length && !$cw.find('.bnpm-logout-btn').length && bnpmLogoutUrl) {
                    $cw.append('<a href="' + bnpmLogoutUrl + '" class="bnpm-logout-btn">Log Out</a>');
                }
            }
            
            // Get logout URL before hiding it
            var $logoutLi = $accountNav.find('li:last-child');
            var $logoutA = $logoutLi.find('a');
            var bnpmLogoutUrl = ($logoutA.length && $logoutA.text().trim().toLowerCase() === 'logout') ? $logoutA.attr('href') : null;
            
            // Apply enhancements on current page
            applyAccountEnhancements();
            
            // --- AJAX Tab Preloading ---
            var tabCache = {};
            var currentAction = new URLSearchParams(window.location.search).get('action') || 'home';
            var basePath = window.location.pathname;
            
            // Cache current content
            var $contentArea = $('.entry .mp_wrapper').eq(1);
            if ($contentArea.length) {
                tabCache[currentAction] = $contentArea.html();
            }
            
            // Preload other tabs
            ['home', 'subscriptions', 'payments', 'courses'].forEach(function(action) {
                if (action === currentAction) return;
                fetch(basePath + '?action=' + action, {credentials: 'same-origin'})
                    .then(function(r) { return r.text(); })
                    .then(function(html) {
                        var doc = new DOMParser().parseFromString(html, 'text/html');
                        var wrappers = doc.querySelectorAll('.entry .mp_wrapper');
                        var content = wrappers.length > 1 ? wrappers[1] : wrappers[0];
                        if (content) tabCache[action] = content.innerHTML;
                    })
                    .catch(function() {});
            });
            
            // Intercept tab clicks
            $accountNav.find('li a').on('click', function(e) {
                var url = new URL($(this).attr('href'), window.location.origin);
                var action = url.searchParams.get('action') || 'home';
                if (action === 'logout') return; // let logout navigate normally
                if (!tabCache[action]) return; // not cached yet, let normal nav happen
                
                e.preventDefault();
                
                // Update active tab
                $accountNav.find('li').removeClass('mepr-active-nav-tab');
                $(this).closest('li').addClass('mepr-active-nav-tab');
                
                // Swap content
                $contentArea.html(tabCache[action]);
                
                // Re-apply enhancements
                applyAccountEnhancements();
                
                // Update URL
                window.history.pushState({action: action}, '', basePath + '?action=' + action);
            });
            
            // Handle back/forward
            window.addEventListener('popstate', function(e) {
                var action = e.state ? e.state.action : (new URLSearchParams(window.location.search).get('action') || 'home');
                if (tabCache[action] && $contentArea.length) {
                    $accountNav.find('li').removeClass('mepr-active-nav-tab');
                    $accountNav.find('li a').each(function() {
                        var u = new URL($(this).attr('href'), window.location.origin);
                        if ((u.searchParams.get('action') || 'home') === action) {
                            $(this).closest('li').addClass('mepr-active-nav-tab');
                        }
                    });
                    $contentArea.html(tabCache[action]);
                    applyAccountEnhancements();
                }
            });
        }
        
        // Handle option selection for Elementor-based layouts
        var currentProduct = null;
        
        // Single purchase option click
        $(".bnpm-option-single, [data-bnpm-option='single']").css("cursor", "pointer").on("click", function(e) {
            e.preventDefault();
            e.stopPropagation();
            
            // Remove selected from all options
            $(".bnpm-option-single, .bnpm-option-all-access").removeClass("bnpm-selected");
            
            // Add selected to this one
            $(this).addClass("bnpm-selected");
            
            // Update data if available
            if (window.bnpmAccessData) {
                currentProduct = window.bnpmAccessData.singleProduct;
            }
            
            // Also update modal options if they exist
            $(".bnpm-product-option").removeClass("selected");
            $(".bnpm-product-option[data-product='" + currentProduct + "']").addClass("selected")
                .find("input").prop("checked", true);
            
            console.log("BNPM: Selected single option");
        });
        
        // All access option click
        $(".bnpm-option-all-access, [data-bnpm-option='all-access']").css("cursor", "pointer").on("click", function(e) {
            e.preventDefault();
            e.stopPropagation();
            
            // Remove selected from all options
            $(".bnpm-option-single, .bnpm-option-all-access").removeClass("bnpm-selected");
            
            // Add selected to this one
            $(this).addClass("bnpm-selected");
            
            // Update data if available
            if (window.bnpmAccessData) {
                currentProduct = window.bnpmAccessData.allAccessProduct;
            }
            
            // Also update modal options if they exist
            $(".bnpm-product-option").removeClass("selected");
            $(".bnpm-product-option[data-product='" + currentProduct + "']").addClass("selected")
                .find("input").prop("checked", true);
            
            console.log("BNPM: Selected all-access option");
        });
        
        // Unlock button click - opens modal with selected product
        $(".bnpm-unlock-btn").on("click", function(e) {
            e.preventDefault();
            
            // Determine which product based on selection
            var selectedSingle = $(".bnpm-option-single.bnpm-selected").length > 0;
            var productType = selectedSingle ? "single" : "all-access";
            
            // If modal function exists, open it
            if (typeof bnpmOpenModal === "function") {
                bnpmOpenModal(productType);
            } else if (window.bnpmAccessData) {
                // Fallback - redirect to MemberPress registration
                var productId = selectedSingle ? window.bnpmAccessData.singleProduct : window.bnpmAccessData.allAccessProduct;
                if (productId) {
                    window.location.href = window.bnpmAccessData.registerUrl + "?membership=" + productId;
                }
            }
        });
        
        console.log("BNPM: Selection script loaded. Found " + $(".bnpm-option-single").length + " single options and " + $(".bnpm-option-all-access").length + " all-access options.");
    });
    </script>
        <script data-cfasync="false">
    if (typeof jQuery !== 'undefined') {
        jQuery.ajaxPrefilter(function(options) {
            if (options.url && options.url.indexOf('load=playlist.json') !== -1 && options.url.indexOf('_cb=') === -1) {
                options.url += (options.url.indexOf('?') !== -1 ? '&' : '?') + '_cb=' + Date.now();
            }
        });
    }
    </script>
        <script data-cfasync="false">
    (function(){
        var SQUARE_CLS  = 'mepr_payment_method-t9vhqn-3dy';
        var PAYPAL_CLS  = 'mepr_payment_method-tfo2lj-4ey';
        var SQUARE_ID   = 't9vhqn-3dy';
        var PAYPAL_ID   = 'tfo2lj-4ey';

        function restructurePaymentForm() {
            var wrapper = document.querySelector('.mepr-payment-methods-wrapper');
            if (!wrapper) return;
            if (wrapper.dataset.bnRestructured) return;
            wrapper.dataset.bnRestructured = "1";

            var squareLabel = wrapper.querySelector('label.payment-option-square');
            var paypalLabel = wrapper.querySelector('label.payment-option-paypalcommerce');
            if (!squareLabel || !paypalLabel) return;

            var squareGateway = wrapper.querySelector(':scope > .' + SQUARE_CLS);
            var paypalGateway = wrapper.querySelector(':scope > .' + PAYPAL_CLS);
            var iconsRow = wrapper.querySelector('.mepr-payment-methods-icons');

            // --- 1. REMOVE the original .mepr-payment-method-icon inside each label ---
            squareLabel.querySelectorAll('.mepr-payment-method-icon').forEach(function(el){ el.remove(); });
            paypalLabel.querySelectorAll('.mepr-payment-method-icon').forEach(function(el){ el.remove(); });

            // --- 2. Clone icons from the icons-row and place inline ---
            if (iconsRow) {
                var allIcons = iconsRow.querySelectorAll('.mepr-payment-method-icon img');
                allIcons.forEach(function(img) {
                    var strip = document.createElement('span');
                    strip.className = 'bn-inline-icons';
                    var clone = img.cloneNode(true);
                    strip.appendChild(clone);

                    if (img.alt === 'Square') {
                        squareLabel.appendChild(strip);
                    } else if (img.alt === 'PayPal') {
                        paypalLabel.appendChild(strip);
                    }
                });
                iconsRow.style.display = 'none';
            }

            // --- 3. Convert labels to block, wrap existing content in flex row ---
            squareLabel.style.cssText += ';display:block!important;';
            paypalLabel.style.cssText += ';display:block!important;';
            wrapLabelContents(squareLabel);
            wrapLabelContents(paypalLabel);

            // --- 4. Move gateway forms inside their respective labels ---
            if (squareGateway) {
                squareGateway.classList.add('bn-gateway-slot');
                squareLabel.appendChild(squareGateway);
            }
            if (paypalGateway) {
                paypalGateway.classList.add('bn-gateway-slot');
                paypalLabel.appendChild(paypalGateway);
            }

            // --- 5. Remove "Pay via your PayPal account" text ---
            if (paypalGateway) {
                paypalGateway.querySelectorAll('p').forEach(function(p) {
                    if (p.textContent.trim().toLowerCase().indexOf('pay via') !== -1) {
                        p.remove();
                    }
                });
            }

            syncGatewayVisibility();
        }

        function wrapLabelContents(label) {
            var row = document.createElement('div');
            row.className = 'bn-radio-row';
            var children = Array.from(label.childNodes);
            children.forEach(function(child) {
                if (child.nodeType === 1 && child.classList &&
                    (child.classList.contains('bn-gateway-slot') ||
                     child.classList.contains(SQUARE_CLS) ||
                     child.classList.contains(PAYPAL_CLS))) return;
                row.appendChild(child);
            });
            label.insertBefore(row, label.firstChild);
        }

        function syncGatewayVisibility() {
            var checked = document.querySelector('input[name="mepr_payment_method"]:checked');
            if (!checked) return;
            var val = checked.value;
            var sq = document.querySelector('.' + SQUARE_CLS);
            var pp = document.querySelector('.' + PAYPAL_CLS);
            if (sq) sq.style.display = (val === SQUARE_ID) ? '' : 'none';
            if (pp) pp.style.display = (val === PAYPAL_ID) ? '' : 'none';

            document.querySelectorAll('.mepr-payment-methods-radios .mepr-payment-option-label').forEach(function(lbl) {
                var r = lbl.querySelector('input[name="mepr_payment_method"]');
                if (r && r.checked) lbl.classList.add('selected');
                else lbl.classList.remove('selected');
            });
        }

        document.addEventListener('DOMContentLoaded', function(){
            restructurePaymentForm();
            // --- Coupon: force visible, remove toggle ---
            var couponRow = document.querySelector(".mp-form-row.mepr_coupon");
            if (couponRow) {
                couponRow.classList.remove("mepr-hidden");
                couponRow.style.display = "block";
            }
            var couponLink = document.querySelector("a.have-coupon-link");
            if (couponLink) couponLink.style.display = "none";

            // --- ToS: only underline "Terms Of Service" ---
            var tosLink = document.querySelector(".mp-form-row.mepr_tos label a[href*=\"terms\"]");
            if (tosLink) {
                var orig = tosLink.textContent;
                var idx = orig.indexOf("Terms");
                if (idx > -1) {
                    var before = orig.substring(0, idx);
                    var keyword = orig.substring(idx);
                    tosLink.innerHTML = before + "<span class=\"bn-tos-underline\">" + keyword + "</span>";
                }
            }

            // --- Privacy: wrap text+link in inline span ---
            var privLabel = document.querySelector("label[for=\"mepr_agree_to_privacy_policy1\"]");
            if (privLabel) {
                var cb = privLabel.querySelector("input[type=\"checkbox\"]");
                var nodes = [];
                privLabel.childNodes.forEach(function(n){ if (n !== cb) nodes.push(n); });
                var wrap = document.createElement("span");
                wrap.className = "bn-privacy-text";
                nodes.forEach(function(n){ wrap.appendChild(n); });
                privLabel.appendChild(wrap);
            }
            var checked = document.querySelector('input[name="mepr_payment_method"]:checked');
            if (checked) setTimeout(function(){ checked.click(); }, 100);
        });

        document.addEventListener('click', function(e){
            var radio = e.target.closest && e.target.closest('input[name="mepr_payment_method"]');
            if (!radio) {
                var label = e.target.closest && e.target.closest('.mepr-payment-option-label');
                if (label) radio = label.querySelector('input[name="mepr_payment_method"]');
            }
            if (radio) setTimeout(syncGatewayVisibility, 50);
        });
    })();
    </script>
    <div class="bnpm-um-overlay" id="bn-auth-overlay"></div><div class="bnpm-um-modal bn-auth-modal" id="bn-auth-modal"
          data-freestyle-url="https://bassnectar.net/vaults/freestyle/"
          data-unlocked-url="https://bassnectar.net/vaults/unlocked/"
          data-ajax-url="https://bassnectar.net/wp-admin/admin-ajax.php"
          data-login-nonce="d8bb2baef1"
          data-magic-nonce="8adcfa89ff"
          data-discord-url="https://discord.com/oauth2/authorize?client_id=1473576170220945488&#038;redirect_uri=https%3A%2F%2Fbassnectar.net%2F%3Fbn_discord_callback%3D1&#038;response_type=code&#038;scope=identify%20email%20guilds.join&#038;state=5ae092d6d1&#038;prompt=consent"
          data-forgot-url="https://bassnectar.net/wp-login.php?action=lostpassword"><button class="bnpm-um-close" id="bn-auth-close">&times;</button><div class="bnpm-um-screen bnpm-um-screen-active" data-screen="main"><div class="bnpm-um-icon"><svg viewBox="0 0 306.17 309.99" width="50" height="50" fill="currentColor"><path d="M215.71,202.53h-14.55v-48.86c0-4.19-.56-8.24-1.6-12.11-5.35-19.87-23.51-34.53-45.04-34.53h-2.9c-21.54,0-39.71,14.68-45.04,34.56-1.04,3.86-1.6,7.91-1.6,12.08v48.86h-14.55c-4.19,0-7.6,3.41-7.6,7.6v92.27c0,4.19,3.41,7.6,7.6,7.6h125.27c4.19,0,7.6-3.41,7.6-7.6v-92.27c0-4.19-3.41-7.6-7.6-7.6ZM168.16,286.13h-29.93l5.02-31.53c-1.45-1.15-2.7-2.56-3.67-4.14-1.53-2.48-2.33-5.34-2.33-8.25,0-8.72,7.1-15.82,15.82-15.82s15.82,7.1,15.82,15.82c0,2.91-.8,5.77-2.33,8.25-.92,1.5-2.1,2.85-3.45,3.97l5.04,31.71ZM181.86,170.16v32.37h-57.57v-3.01s0-29.35,0-29.35v-16.51c0-7.24,2.86-14.09,8.04-19.29,2.34-2.34,5.03-4.2,7.93-5.55,3.53-1.63,7.39-2.5,11.36-2.5h2.9c3.97,0,7.83.86,11.35,2.49,2.91,1.34,5.59,3.21,7.94,5.55,5.19,5.19,8.05,12.04,8.05,19.29v16.5Z"/></svg></div><h3 class="bnpm-um-title">SIGN IN TO CONTINUE</h3><p class="bnpm-um-subtitle">Sign in or create a free account to access this feature.</p><div class="bnpm-um-divider"><span>or sign in with email</span></div><div class="bn-auth-tabs"><button type="button" class="bn-auth-tab active" data-tab="password">Password</button><button type="button" class="bn-auth-tab" data-tab="magic">Magic Link</button></div><div class="bn-auth-tab-content" id="bn-auth-tab-password"><input type="text" class="bnpm-um-input" id="bn-auth-user" placeholder="Email or username" autocomplete="username"><input type="password" class="bnpm-um-input" id="bn-auth-pass" placeholder="Password" autocomplete="current-password"><p class="bnpm-um-login-error" id="bn-auth-error"></p><button type="button" class="bnpm-um-submit" id="bn-auth-login-btn">Sign In</button><div class="bnpm-um-login-loading" id="bn-auth-login-loading" style="display:none;"><div class="bnpm-um-spinner"></div><p>Signing in...</p></div><p class="bn-auth-forgot"><a href="#" id="bn-auth-forgot-link">Forgot password? Use a magic link</a></p></div><div class="bn-auth-tab-content" id="bn-auth-tab-magic" style="display:none;"><p class="bn-auth-magic-desc">We'll send a login link to your email — no password needed.</p><input type="email" class="bnpm-um-input" id="bn-auth-magic-email" placeholder="Your email address" autocomplete="email"><button type="button" class="bnpm-um-submit" id="bn-auth-magic-btn">Send Login Link</button><div class="bn-auth-magic-status" id="bn-auth-magic-status" style="display:none;"></div></div><div class="bn-pk-login-section" id="bn-pk-login-section">
        <button type="button" class="bn-pk-login-btn" id="bn-pk-login-trigger">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12C2 6.5 6.5 2 12 2a10 10 0 0 1 8 4"/><path d="M5 19.5C5.5 18 6 15 6 12c0-.7.12-1.37.34-2"/><path d="M17.29 21.02c.12-.6.43-2.3.5-3.02"/><path d="M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4"/><path d="M8.65 22c.21-.66.45-1.32.57-2"/><path d="M14 13.12c0 2.38 0 6.38-1 8.88"/><path d="M2 16h.01"/><path d="M21.8 16c.2-2 .131-5.354 0-6"/><path d="M9 6.8a6 6 0 0 1 9 5.2c0 .47 0 1.17-.02 2"/></svg>
            Sign in with Passkey / Touch ID
        </button>
        <p class="bn-pk-status bn-pk-error" id="bn-pk-login-error" style="display:none;"></p>
        <div class="bn-pk-loading" id="bn-pk-login-loading" style="display:none;">
            <div class="bn-pk-spinner"></div>
            <span>Waiting for biometric…</span>
        </div>
        <p class="bn-pk-setup-hint" style="font-size:12px;color:rgba(255,255,255,0.5);margin-top:6px;">Set up passkeys in <strong>Account → Edit Profile</strong> after signing in</p>
    </div><div class="bn-pin-login-section" id="bn-pin-section">
        <button type="button" class="bn-pin-toggle-btn" id="bn-pin-toggle" aria-expanded="false" data-target="bn-pin-panel">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <rect x="5" y="2" width="14" height="20" rx="2"/>
                <line x1="12" y1="18" x2="12" y2="18" stroke-width="3" stroke-linecap="round"/>
            </svg>
            Sign in with PIN
        </button>
        <div class="bn-pin-panel" id="bn-pin-panel" style="display:none;">
            <!-- Step 1: Enter email -->
            <div class="bn-pin-step" id="bn-pin-step-email">
                <p class="bn-pin-hint">We'll email you a 6-digit code. No password needed.</p>
                <input type="email" class="bn-pin-input" id="bn-pin-email" placeholder="Your email address" autocomplete="email">
                <button type="button" class="bn-pin-btn" id="bn-pin-send-btn">Send PIN</button>
                <p class="bn-pin-status bn-pin-error" id="bn-pin-send-error" style="display:none;"></p>
                <div class="bn-pin-loading" id="bn-pin-send-loading" style="display:none;">
                    <div class="bn-pin-spinner"></div>
                    <span>Sending…</span>
                </div>
            </div>
            <!-- Step 2: Enter PIN -->
            <div class="bn-pin-step" id="bn-pin-step-verify" style="display:none;">
                <p class="bn-pin-hint" id="bn-pin-sent-msg">Check your email for a 6-digit PIN.</p>
                <div class="bn-pin-code-inputs" id="bn-pin-code-inputs">
                    <input type="tel" class="bn-pin-digit" maxlength="1" inputmode="numeric" pattern="[0-9]" autocomplete="one-time-code">
                    <input type="tel" class="bn-pin-digit" maxlength="1" inputmode="numeric" pattern="[0-9]">
                    <input type="tel" class="bn-pin-digit" maxlength="1" inputmode="numeric" pattern="[0-9]">
                    <span class="bn-pin-sep">–</span>
                    <input type="tel" class="bn-pin-digit" maxlength="1" inputmode="numeric" pattern="[0-9]">
                    <input type="tel" class="bn-pin-digit" maxlength="1" inputmode="numeric" pattern="[0-9]">
                    <input type="tel" class="bn-pin-digit" maxlength="1" inputmode="numeric" pattern="[0-9]">
                </div>
                <p class="bn-pin-status bn-pin-error" id="bn-pin-verify-error" style="display:none;"></p>
                <div class="bn-pin-loading" id="bn-pin-verify-loading" style="display:none;">
                    <div class="bn-pin-spinner"></div>
                    <span>Verifying…</span>
                </div>
                <button type="button" class="bn-pin-back-btn" id="bn-pin-back">← Send a new PIN</button>
            </div>
        </div>
    </div><div class="bn-qr-login-section" id="bn-qr-section">
        <button type="button" class="bn-qr-toggle-btn" id="bn-qr-toggle" aria-expanded="false" data-target="bn-qr-panel">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <rect x="3" y="3" width="7" height="7" rx="1"/>
                <rect x="14" y="3" width="7" height="7" rx="1"/>
                <rect x="3" y="14" width="7" height="7" rx="1"/>
                <rect x="14" y="14" width="3" height="3"/>
                <rect x="19" y="14" width="2" height="2"/>
                <rect x="14" y="19" width="2" height="2"/>
                <rect x="17" y="17" width="2" height="2"/>
            </svg>
            Sign in with QR code
        </button>
        <div class="bn-qr-panel" id="bn-qr-panel" style="display:none;">
            <p class="bn-qr-hint">Scan with your phone camera to log in instantly</p>
            <div class="bn-qr-code-wrap" id="bn-qr-code-wrap">
                <div class="bn-qr-loading" id="bn-qr-loading">
                    <div class="bn-qr-spinner"></div>
                    <span>Generating code…</span>
                </div>
                <img id="bn-qr-img" src="" alt="QR Code" style="display:none;" />
            </div>
            <p class="bn-qr-timer" id="bn-qr-timer"></p>
            <p style="text-align:center;margin:8px 0 0;"><a href="#" class="bn-qr-refresh-link" id="bn-qr-refresh" style="font-size:12px;color:rgba(255,255,255,0.45);text-decoration:none;letter-spacing:0.03em;" onclick="typeof bnQrInit==='function'&&bnQrInit();return false;">&#x21bb; Refresh QR code</a></p>
            <p class="bn-qr-status" id="bn-qr-status" style="display:none;"></p>
        </div>
    </div><div style="text-align:center;color:rgba(255,255,255,0.4);font-size:12px;letter-spacing:2px;margin:20px 0 12px;text-transform:uppercase">Social Sign in / Sign up</div><button type="button" class="bnpm-um-discord-btn" id="bn-auth-discord-btn"><svg width="20" height="20" viewBox="0 0 48 48" fill="currentColor"><path d="M40.23 8.57a39.3 39.3 0 00-9.7-3.01.15.15 0 00-.16.07 27.37 27.37 0 00-1.2 2.48 36.27 36.27 0 00-10.34 0A25.1 25.1 0 0017.6 5.63a.15.15 0 00-.16-.07 39.2 39.2 0 00-9.7 3.01.14.14 0 00-.06.05C3.55 14.9 2.06 21 2.82 27.01a.16.16 0 00.06.11 39.5 39.5 0 0011.89 6.01.15.15 0 00.17-.06 28.24 28.24 0 002.43-3.96.15.15 0 00-.08-.21 26.03 26.03 0 01-3.72-1.77.15.15 0 01-.01-.26c.25-.19.5-.38.74-.58a.15.15 0 01.15-.02c7.81 3.57 16.26 3.57 23.98 0a.15.15 0 01.16.02c.24.2.49.4.74.58a.15.15 0 01-.01.26c-1.19.69-2.42 1.28-3.72 1.77a.15.15 0 00-.08.21 31.7 31.7 0 002.43 3.96.15.15 0 00.16.06 39.39 39.39 0 0011.91-6.01.15.15 0 00.06-.11c.9-9.38-1.52-17.53-6.42-24.75a.12.12 0 00-.06-.05zM16.96 23.46c-2.14 0-3.9-1.97-3.9-4.38s1.73-4.38 3.9-4.38 3.94 1.97 3.9 4.38c0 2.41-1.73 4.38-3.9 4.38zm14.41 0c-2.14 0-3.9-1.97-3.9-4.38s1.73-4.38 3.9-4.38 3.94 1.97 3.9 4.38c0 2.41-1.73 4.38-3.9 4.38z"/></svg> Continue with Discord</button><button type="button" class="bn-login-btn bn-login-btn-google" id="bn-auth-google-btn"
        data-nonce="b5cec657c2"><svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <path d="M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844c-.209 1.125-.843 2.078-1.796 2.717v2.258h2.908c1.702-1.567 2.684-3.874 2.684-6.615z" fill="#4285F4"/>
        <path d="M9 18c2.43 0 4.467-.806 5.956-2.18l-2.909-2.259c-.806.54-1.836.86-3.047.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332A8.997 8.997 0 009 18z" fill="#34A853"/>
        <path d="M3.964 10.71A5.41 5.41 0 013.682 9c0-.593.102-1.17.282-1.71V4.958H.957A8.996 8.996 0 000 9c0 1.452.348 2.827.957 4.042l3.007-2.332z" fill="#FBBC05"/>
        <path d="M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0A8.997 8.997 0 00.957 4.958L3.964 6.29C4.672 4.163 6.656 3.58 9 3.58z" fill="#EA4335"/>
    </svg> Continue with Google</button><div class="bnpm-um-divider bn-auth-signup-divider"><span>or create an account</span></div><div class="bnpm-um-options"><label class="bnpm-um-option" data-product="freestyle"><input type="radio" name="bn_auth_product" value="freestyle"><span class="bnpm-um-option-radio"></span><span class="bnpm-um-option-name">Freestyle Access</span><span class="bnpm-um-option-price">FREE</span></label><label class="bnpm-um-option" data-product="unlocked"><input type="radio" name="bn_auth_product" value="unlocked"><span class="bnpm-um-option-radio"></span><div class="bnpm-um-option-details"><span class="bnpm-um-option-name">Unlocked | All Access</span><span class="bnpm-um-option-desc">Unlock unlimited all-access to all Bassnectar Vault content.</span></div><span class="bnpm-um-option-price">$9.99</span></label></div><button class="bnpm-um-submit bn-auth-signup-submit" id="bn-auth-signup-btn">Sign Up</button></div><div class="bnpm-um-screen" data-screen="checkout"><button class="bnpm-um-back bn-auth-back">&larr; Back</button><div class="bnpm-um-loading" id="bn-auth-checkout-loading"><div class="bnpm-um-spinner"></div><p>Loading...</p></div><iframe class="bnpm-um-iframe" id="bn-auth-iframe" frameborder="0" allow="payment"></iframe></div><div class="bnpm-um-screen" data-screen="success"><div class="bnpm-um-success-icon"><svg viewBox="0 0 24 24" width="48" height="48" fill="none" stroke="#a4ffef" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><polyline points="8,12 11,15 16,9" stroke-linecap="round" stroke-linejoin="round"></polyline></svg></div><h3 class="bnpm-um-title">You're In!</h3><p class="bnpm-um-subtitle">Your access has been granted. Enjoy!</p></div></div><script data-cfasync="false">
(function(){
    "use strict";
    var authModal = document.getElementById("bn-auth-modal");
    var authOverlay = document.getElementById("bn-auth-overlay");
    if (!authModal || !authOverlay) return;
    document.body.appendChild(authOverlay);
    document.body.appendChild(authModal);

    var cfg = { freestyleUrl: authModal.dataset.freestyleUrl, unlockedUrl: authModal.dataset.unlockedUrl, ajaxUrl: authModal.dataset.ajaxUrl, loginNonce: authModal.dataset.loginNonce, magicNonce: authModal.dataset.magicNonce, discordUrl: authModal.dataset.discordUrl, forgotUrl: authModal.dataset.forgotUrl };
    var authScreens = authModal.querySelectorAll(".bnpm-um-screen");
    var authOptions = authModal.querySelectorAll(".bnpm-um-option");
    var selectedPlan = null;
    var authIframe = document.getElementById("bn-auth-iframe");
    var checkoutLoading = document.getElementById("bn-auth-checkout-loading");
    var pollInterval = null;

    function showAuthScreen(n) { authScreens.forEach(function(s) { s.classList.remove("bnpm-um-screen-active"); }); var t = authModal.querySelector('[data-screen="' + n + '"]'); if (t) t.classList.add("bnpm-um-screen-active"); authModal.scrollTop = 0; }
    function openAuthModal() { authOverlay.classList.add("active"); authModal.classList.add("active"); document.body.style.overflow = "hidden"; document.body.classList.add("bnpm-modal-open"); }
    function closeAuthModal() { authOverlay.classList.remove("active"); authModal.classList.remove("active"); document.body.style.overflow = ""; document.body.classList.remove("bnpm-modal-open"); if (authIframe) authIframe.src = ""; if (pollInterval) { clearInterval(pollInterval); pollInterval = null; } }
    function softRefresh() { var _u = window.location.href.replace(/[?&]_bn_auth=\d+/, ""); var _s = _u.indexOf("?") !== -1 ? "&" : "?"; window.location.href = _u + _s + "_bn_auth=" + Date.now(); }
    function startLoginPoll() { if (pollInterval) return; var ct = 0; pollInterval = setInterval(function() { if (++ct > 150) { clearInterval(pollInterval); pollInterval = null; return; } fetch(cfg.ajaxUrl, { method: "POST", headers: { "Content-Type": "application/x-www-form-urlencoded" }, body: "action=bn_check_logged_in", credentials: "same-origin" }).then(function(r) { return r.json(); }).then(function(d) { if (d.success && d.data.logged_in) { clearInterval(pollInterval); pollInterval = null; showAuthScreen("success"); setTimeout(function() { closeAuthModal(); softRefresh(); }, 1500); } }).catch(function() {}); }, 2000); }

    // Tab switching
    var authTabs = authModal.querySelectorAll(".bn-auth-tab");
    authTabs.forEach(function(tab) {
        tab.addEventListener("click", function() {
            authTabs.forEach(function(t) { t.classList.remove("active"); });
            this.classList.add("active");
            var target = this.dataset.tab;
            document.getElementById("bn-auth-tab-password").style.display = target === "password" ? "block" : "none";
            document.getElementById("bn-auth-tab-magic").style.display = target === "magic" ? "block" : "none";
        });
    });

    authOptions.forEach(function(opt) { opt.addEventListener("click", function() { authOptions.forEach(function(o) { o.classList.remove("selected"); }); this.classList.add("selected"); this.querySelector("input").checked = true; selectedPlan = this.dataset.product; }); });
    document.addEventListener("click", function(e) { var ab = e.target.closest(".bn-auth-required"); if (!ab) return; e.preventDefault(); e.stopPropagation(); showAuthScreen("main"); openAuthModal(); });

    // Sign In link in nav goes directly to /access/ (no modal intercept)

    var signupBtn = document.getElementById("bn-auth-signup-btn");
    if (signupBtn) { signupBtn.addEventListener("click", function() { if (!selectedPlan) { var opts = authModal.querySelector(".bnpm-um-options"); if (opts) { opts.classList.add("bn-auth-options-highlight"); setTimeout(function() { opts.classList.remove("bn-auth-options-highlight"); }, 1500); } return; } var url = selectedPlan === "unlocked" ? cfg.unlockedUrl : cfg.freestyleUrl; url += (url.indexOf("?") !== -1 ? "&" : "?") + "bnpm_modal=1"; showAuthScreen("checkout"); checkoutLoading.style.display = "flex"; authIframe.style.display = "none"; authIframe.src = url; authIframe.onload = function() { checkoutLoading.style.display = "none"; authIframe.style.display = "block"; authIframe.onload = null; startLoginPoll(); }; }); }

    var discordBtn = document.getElementById("bn-auth-discord-btn");
    if (discordBtn) { discordBtn.addEventListener("click", function() { window.open(cfg.discordUrl, "_blank", "width=500,height=700"); startLoginPoll(); }); }

    var forgotLink = document.getElementById("bn-auth-forgot-link");
    if (forgotLink) { forgotLink.addEventListener("click", function(e) { e.preventDefault(); var tabs = authModal.querySelectorAll(".bn-auth-tab"); if (tabs.length > 1) tabs[1].click(); }); }

    var loginBtn = document.getElementById("bn-auth-login-btn");
    var loginLoading = document.getElementById("bn-auth-login-loading");
    var loginError = document.getElementById("bn-auth-error");
    if (loginBtn) {
        loginBtn.addEventListener("click", function() {
            var user = document.getElementById("bn-auth-user").value.trim();
            var pass = document.getElementById("bn-auth-pass").value;
            if (!user || !pass) { loginError.textContent = "Please enter email and password"; loginError.style.display = "block"; return; }
            loginLoading.style.display = "flex"; loginBtn.style.display = "none"; loginError.style.display = "none";
            fetch(cfg.ajaxUrl, { method: "POST", headers: { "Content-Type": "application/x-www-form-urlencoded" }, body: "action=bn_password_login&log=" + encodeURIComponent(user) + "&pwd=" + encodeURIComponent(pass) + "&nonce=" + cfg.loginNonce + "&redirect_to=" + encodeURIComponent(window.location.href), credentials: "same-origin" })
            .then(function(r) { return r.json(); }).then(function(data) { if (data.success) { showAuthScreen("success"); setTimeout(function() { closeAuthModal(); softRefresh(); }, 1500); } else { loginLoading.style.display = "none"; loginBtn.style.display = "block"; loginError.textContent = data.data && data.data.message ? data.data.message : "Invalid email or password"; loginError.style.display = "block"; } })
            .catch(function() { loginLoading.style.display = "none"; loginBtn.style.display = "block"; loginError.textContent = "Connection error. Please try again."; loginError.style.display = "block"; });
        });
        document.getElementById("bn-auth-pass").addEventListener("keypress", function(e) { if (e.key === "Enter") loginBtn.click(); });
        document.getElementById("bn-auth-user").addEventListener("keypress", function(e) { if (e.key === "Enter") document.getElementById("bn-auth-pass").focus(); });
    }

    // Magic Link
    var magicBtn = document.getElementById("bn-auth-magic-btn");
    var magicStatus = document.getElementById("bn-auth-magic-status");
    if (magicBtn) {
        magicBtn.addEventListener("click", function() {
            var email = document.getElementById("bn-auth-magic-email").value.trim();
            if (!email) { magicStatus.textContent = "Please enter your email address"; magicStatus.style.display = "block"; magicStatus.className = "bn-auth-magic-status error"; return; }
            magicBtn.disabled = true; magicBtn.textContent = "Sending..."; magicStatus.style.display = "none";
            fetch(cfg.ajaxUrl, { method: "POST", headers: { "Content-Type": "application/x-www-form-urlencoded" }, body: "action=bn_send_magic_link&email=" + encodeURIComponent(email) + "&nonce=" + cfg.magicNonce, credentials: "same-origin" })
            .then(function(r) { return r.json(); }).then(function(data) { magicStatus.textContent = data.data && data.data.message ? data.data.message : "If an account exists with that email, a login link has been sent."; magicStatus.style.display = "block"; magicStatus.className = "bn-auth-magic-status success"; magicBtn.disabled = false; magicBtn.textContent = "Send Login Link"; })
            .catch(function() { magicStatus.textContent = "Something went wrong. Please try again."; magicStatus.style.display = "block"; magicStatus.className = "bn-auth-magic-status error"; magicBtn.disabled = false; magicBtn.textContent = "Send Login Link"; });
        });
        document.getElementById("bn-auth-magic-email").addEventListener("keypress", function(e) { if (e.key === "Enter") magicBtn.click(); });
    }

    authModal.querySelectorAll(".bn-auth-back").forEach(function(btn) { btn.addEventListener("click", function() { if (authIframe) authIframe.src = ""; showAuthScreen("main"); }); });
    document.getElementById("bn-auth-close").addEventListener("click", closeAuthModal);
    authOverlay.addEventListener("click", closeAuthModal);
    authModal.addEventListener("click", function(e) { e.stopPropagation(); });
    document.addEventListener("keydown", function(e) { if (e.key === "Escape" && authModal.classList.contains("active")) closeAuthModal(); });
})();
</script>    <script data-cfasync="false">
    (function() {
        document.addEventListener("click", function(e) {
            var link = e.target.closest(".bn-family-lightbox-link");
            if (!link) return;
            e.preventDefault();
            e.stopPropagation();
            var src = link.getAttribute("data-src");
            if (!src) return;
            var overlay = document.createElement("div");
            overlay.style.cssText = "position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.92);z-index:99999;display:flex;align-items:center;justify-content:center;cursor:zoom-out;";
            var img = document.createElement("img");
            img.src = src;
            img.style.cssText = "max-width:95vw;max-height:95vh;object-fit:contain;border-radius:4px;opacity:0;transition:opacity 0.2s ease;";
            img.onload = function() { img.style.opacity = "1"; };
            overlay.appendChild(img);
            overlay.addEventListener("click", function() { overlay.remove(); });
            document.addEventListener("keydown", function handler(ev) {
                if (ev.key === "Escape") { overlay.remove(); document.removeEventListener("keydown", handler); }
            });
            document.body.appendChild(overlay);
        });
    })();
    </script>

    <!-- Barba hook: re-inject CTA buttons after PJAX transition -->
    <script data-cfasync="false">
    (function() {
        if (typeof Barba === "undefined" || !Barba.Dispatcher) return;

        Barba.Dispatcher.on("transitionCompleted", function() {
            // Remove stale CTA payload from previous page
            var oldPayload = document.getElementById("bn-event-cta-payload");
            if (oldPayload) oldPayload.remove();

            // Remove stale auth modal/overlay from previous page
            var oldModal = document.getElementById("bn-auth-modal");
            var oldOverlay = document.getElementById("bn-auth-overlay");
            if (oldModal) oldModal.remove();
            if (oldOverlay) oldOverlay.remove();

            // Fetch the new page's HTML to extract its CTA payload
            // (since wp_footer PHP doesn't re-execute after Barba transitions)
            var target = document.querySelector(".event-reminder");
            if (!target) return; // Not a show/event page, nothing to inject

            fetch(window.location.href, { credentials: "same-origin" })
                .then(function(r) { return r.text(); })
                .then(function(html) {
                    try {
                        var doc = new DOMParser().parseFromString(html, "text/html");
                        var freshPayload = doc.getElementById("bn-event-cta-payload");
                        var freshTarget = document.querySelector(".event-reminder");
                        if (freshPayload && freshTarget) {
                            // Clear any existing content in target
                            var existing = freshTarget.querySelector("#bn-event-cta-payload, .bn-event-actions");
                            if (existing) existing.remove();

                            var imported = document.importNode(freshPayload, true);
                            freshTarget.appendChild(imported);
                            imported.style.display = "";

                            // Bind tooltip
                            var infoBtn = imported.querySelector(".bn-event-info-btn");
                            var infoTip = imported.querySelector(".bn-event-info-tooltip");
                            if (infoBtn && infoTip && !infoBtn.dataset.bound) {
                                infoBtn.dataset.bound = "1";
                                infoBtn.addEventListener("click", function(e) {
                                    e.stopPropagation();
                                    infoTip.style.display = infoTip.style.display === "none" ? "block" : "none";
                                });
                            }

                            // Also inject auth modal if present (logged-out users)
                            if (!document.getElementById("bn-auth-modal")) {
                                var freshModal = doc.getElementById("bn-auth-modal");
                                var freshOverlay = doc.getElementById("bn-auth-overlay");
                                if (freshModal) document.body.appendChild(document.importNode(freshModal, true));
                                if (freshOverlay) document.body.appendChild(document.importNode(freshOverlay, true));
                            }
                        }
                    } catch(e) {
                        console.warn("[BN CTA] Barba CTA inject error:", e);
                    }
                })
                .catch(function() {});

            // Also re-init show page actions if available
            if (typeof window.bnInitShowPage === "function") {
                setTimeout(window.bnInitShowPage, 200);
            }
        });
    })();
    </script>
        <script data-cfasync="false" type="text/javascript">
    jQuery(document).ready(function($) {
        setTimeout(function() {
            var pageUrl = "https:\/\/bassnectar.net\/";
            $('.iron-audioplayer').each(function() {
                var $player = $(this);
                // Only set if not already set by the widget PHP
                if (!$player.attr('data-album-page-url') || $player.attr('data-album-page-url') === '') {
                    $player.attr('data-album-page-url', pageUrl);
                }
            });
        }, 1500);
    });
    </script>
        <script data-cfasync="false">
    (function(){
      function bindToggles(){
        var btns=document.querySelectorAll("[data-target]");
        for(var i=0;i<btns.length;i++){
          if(!btns[i]._bound){
            btns[i]._bound=true;
            btns[i].onclick=(function(b){
              return function(e){
                e.preventDefault();
                e.stopPropagation();
                var cls=b.getAttribute("data-target");
                var sec=b.closest("div");
                var p=sec?sec.querySelector("."+cls):document.querySelector("."+cls);
                if(p)p.style.display=p.style.display==="none"?"block":"none";
                if(p&&p.style.display==="block"&&cls==="bn-qr-panel"&&typeof window.bnQrInit==="function")window.bnQrInit();
              };
            })(btns[i]);
          }
        }
      }
      bindToggles();
      new MutationObserver(bindToggles).observe(document.body,{childList:true,subtree:true});
      document.body.addEventListener("touchend",function(e){
        var b=e.target.closest("[data-target]");
        if(b&&b.onclick)b.onclick(e);
      },{passive:false});
    })();
    </script>
    <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'a08dbac7edb6d0af',t:'MTc4MDk4Mjg3Mg=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body>
</html>