/* ==========================================================================
   BEATSHOUSE — App Normalize Layer v4.0
   Global resets + main app player + PROPER cart/checkout styling.
   NOTE: The old "flat pass" that stripped all button/card styles has been
   removed — it was breaking WooCommerce cart & checkout pages.
   ========================================================================== */

:root {
  /* ── BRUTAL LUXURY design tokens — v6.0 ── */
  --bh-n-bg:           #000;
  --bh-n-surface:      #080808;
  --bh-n-surface-2:    #111;
  --bh-n-border:       rgba(255,255,255,0.08);
  --bh-n-border-hover: rgba(255,255,255,0.22);
  --bh-n-text:         #F0EDE8;
  --bh-n-muted:        rgba(240,237,232,0.45);
  --bh-n-accent:       #C8FF00;
  --bh-n-radius:       0px;
  --bh-n-radius-sm:    0px;
  --bh-n-green:        #C8FF00;
  --bh-n-red:          #FF3B30;
  /* Acid accent */
  --bh-acid:           #C8FF00;
  --bh-acid-dim:       rgba(200,255,0,0.10);
  --bh-acid-glow:      rgba(200,255,0,0.18);

  /* ── Spacing scale ── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* ── Animation tokens ── */
  --bh-ease-out:    cubic-bezier(0.19, 1, 0.22, 1);
  --bh-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --bh-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --bh-duration-fast: 100ms;
  --bh-duration-base: 180ms;
  --bh-duration-slow: 320ms;
  --bh-radius-sm:   0px;
  --bh-radius-md:   0px;
  --bh-radius-lg:   0px;
  --bh-radius-pill: 999px;
  --bh-border-hair: 1px solid rgba(255,255,255,0.08);
  --bh-surface-0:   #000;
  --bh-surface-1:   rgba(255,255,255,0.03);
  --bh-surface-2:   rgba(255,255,255,0.05);

  /* ── Semantic design tokens ── */
  --bh-shadow-card:     0 0 0 1px rgba(255,255,255,0.06), 0 4px 24px rgba(0,0,0,0.8);
  --bh-shadow-elevated: 0 0 0 1px rgba(255,255,255,0.08), 0 16px 64px rgba(0,0,0,0.9);
  --bh-accent:          #C8FF00;
  --bh-accent-dim:      rgba(200,255,0,0.10);
  --bh-accent-glow:     rgba(200,255,0,0.18);
  --bh-text-primary:    #F0EDE8;
  --bh-text-secondary:  rgba(240,237,232,0.50);
  --bh-text-muted:      rgba(240,237,232,0.28);

  /* ── BH Brand design tokens (shared across all components) ── */
  /* Backgrounds */
  --bh-bg:      #000;
  --bh-bg2:     #080808;
  --bh-bg3:     #111;
  /* Borders */
  --bh-border:  rgba(255,255,255,.08);
  --bh-border2: rgba(255,255,255,.15);
  /* Text */
  --bh-text:    #F0EDE8;
  --bh-text2:   rgba(240,237,232,.50);
  --bh-muted:   rgba(240,237,232,.28);
  /* Radius — angular by default, pill only for chips */
  --bh-radius:    0px;
  --bh-radius-sm: 0px;
  /* Brand colors — acid green replaces purple as primary accent */
  --bh-purple:  #C8FF00;
  --bh-purple2: rgba(200,255,0,.7);
  --bh-blue:    #60A5FA;
  --bh-green:   #C8FF00;
  --bh-yellow:  #C8FF00;
  --bh-red:     #FF3B30;
  --bh-cyan:    #67E8F9;
  --bh-orange:  #C8FF00;
  --bh-pink:    #F472B6;
  --bh-label:   #C8FF00;
  /* Glow — acid */
  --bh-glow:  rgba(200,255,0,.15);
  --bh-glow2: rgba(200,255,0,.08);
}

/* ── Text colors per page context ── */
.bh-home-v5,
.bh-home-v5 #bh-home-app-stage .js-bh-stage-body,
.bh-service-page,
.bh-single-beat,
.bh-profile-page,
.bh-premium-contact-pane {
  color: var(--bh-n-text);
}

/* ── Headings — brutal typography ── */
.bh-home-v5 :where(h1, h2, h3, h4, h5, h6),
.bh-service-page :where(h1, h2, h3, h4),
.bh-single-beat :where(h1, h2, h3, h4),
.bh-profile-page :where(h1, h2, h3, h4),
.bh-premium-contact-pane :where(h1, h2, h3, h4) {
  color: #F0EDE8;
  font-family: 'Syne', system-ui, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.05em !important;
  text-transform: uppercase !important;
  text-wrap: balance;
  line-height: 1.0 !important;
}

/* ── Meta / descriptor text ── */
.bh-home-v5 :where(p, small, .meta, .desc, .subtitle, .bh-track-meta, .bh-home-trackauthor),
.bh-service-page :where(p, .meta, .desc, .subtitle),
.bh-single-beat :where(p, .meta, .desc, .subtitle),
.bh-profile-page :where(p, .meta, .desc, .subtitle),
.bh-premium-contact-pane :where(p, .meta, .desc, .subtitle) {
  color: var(--bh-n-muted);
}

/* ── Buttons — brutal base ── */
.bh-home-v5 :where(.bh-home-btn, .button, a.button, button.button, input.button,
                    .single_add_to_cart_button, .wc-forward, .wp-element-button),
.bh-service-page :where(.bh-btn, .button, a.button, button.button, input.button),
.bh-single-beat :where(.button, a.button, button.button, input.button, .single_add_to_cart_button),
.bh-profile-page :where(.button, a.button, button.button, input.button),
.bh-premium-contact-pane :where(.button, a.button, button.button, input.button) {
  border-radius: 0 !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: #111 !important;
  color: #F0EDE8 !important;
  min-height: 40px;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: .72rem !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
  transition: background var(--bh-duration-fast) var(--bh-ease-out),
              border-color var(--bh-duration-fast) var(--bh-ease-out),
              color var(--bh-duration-fast) var(--bh-ease-out) !important;
}

/* ── Primary CTA — acid green on black ── */
.bh-home-v5 :where(.bh-home-btn--primary, .single_add_to_cart_button,
                    .button.checkout-button, .wc-proceed-to-checkout a.checkout-button),
.bh-service-page :where(.bh-btn-primary) {
  background: #C8FF00 !important;
  color: #000 !important;
  border-color: #C8FF00 !important;
  font-weight: 800 !important;
}

/* ── Button hover — gated to pointer devices ── */
@media (hover: hover) and (pointer: fine) {
  .bh-home-v5 :where(.bh-home-btn:hover, .button:hover, a.button:hover, button.button:hover,
                      input.button:hover, .single_add_to_cart_button:hover,
                      .wc-forward:hover, .wp-element-button:hover),
  .bh-service-page :where(.bh-btn:hover),
  .bh-single-beat :where(.button:hover, a.button:hover, button.button:hover,
                          input.button:hover, .single_add_to_cart_button:hover),
  .bh-profile-page :where(.button:hover, a.button:hover, button.button:hover, input.button:hover),
  .bh-premium-contact-pane :where(.button:hover, a.button:hover, button.button:hover, input.button:hover) {
    filter: brightness(1.06);
    border-color: var(--bh-n-border-hover) !important;
  }
}

/* ── Button active — scale press ── */
.bh-home-v5 :where(.bh-home-btn:active, .button:active, a.button:active, button.button:active,
                    input.button:active, .single_add_to_cart_button:active,
                    .wc-forward:active, .wp-element-button:active),
.bh-service-page :where(.bh-btn:active),
.bh-single-beat :where(.button:active, a.button:active, button.button:active,
                        input.button:active, .single_add_to_cart_button:active),
.bh-profile-page :where(.button:active, a.button:active, button.button:active, input.button:active),
.bh-premium-contact-pane :where(.button:active, a.button:active, button.button:active, input.button:active) {
  transform: scale(0.97) !important;
}

/* ── Form inputs ── */
.bh-home-v5 :where(input, select, textarea),
.bh-service-page :where(input, select, textarea),
.bh-single-beat :where(input, select, textarea),
.bh-profile-page :where(input, select, textarea),
.bh-premium-contact-pane :where(input, select, textarea) {
  background: #0e0e11 !important;
  border: 1px solid var(--bh-n-border) !important;
  color: var(--bh-n-text) !important;
  border-radius: var(--bh-n-radius-sm) !important;
}

/* ── Cards / surfaces ── */
.bh-home-v5 :where(.bh-home-trackrow, .track-item, .bh-price-card, .service-card, .rel-item,
                    .bh-glass-card, .bh-media-player-box, .bh-disc-player,
                    .bh-home-fab, .bh-premium-contact-card),
.bh-service-page :where(.bh-price-card, .bh-exclusive-box, .bh-service-start, .bh-audio-box),
.bh-single-beat :where(.pricing-grid, .purchase-container, .bst-player, .rel-item, .lic-card),
.bh-profile-page :where(.bh-card-glass, .bh-disc-player, .track-item),
.bh-premium-contact-pane :where(.bh-glass-card) {
  background: rgba(14, 14, 18, 0.65);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--bh-n-radius);
  box-shadow: var(--bh-shadow-card);
}

/* ── Price / amount highlight ── */
.bh-home-v5 :where(.bh-dock-item.active, .bh-stat strong, .bh-price-val,
                    .bst-hero-price, .bh-home-trackprice),
.bh-service-page :where(.bh-price-val),
.bh-single-beat :where(.bst-hero-price),
.bh-profile-page :where(.amount) {
  color: var(--bh-n-text) !important;
}

/* ── App stage padding ── */
.bh-home-v5 #bh-home-app-stage .js-bh-stage-body { padding-top: 8px; }

/* ── Auth / OTP / profile mini form contrast ── */
.bh-home-v5 :where(.bh-auth-panel button, .bh-auth-panel a, .bh-auth-panel label,
                    .bh-otp-panel button, .bh-otp-panel a, .bh-otp-panel label,
                    .bh-user-profile-card button, .bh-user-profile-card a) {
  color: #f4f4f5 !important;
}

/* ── Filter chips / mini-nav ── */
.bh-home-v5 :where(.bh-home-tabs button, .bh-mini-nav button, .bh-filter-chip, .genre-filter-btn) {
  border-radius: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(14, 14, 18, 0.55) !important;
  color: #d4d4d8 !important;
}

.bh-home-v5 :where(.bh-home-tabs .is-active, .bh-mini-nav .is-active,
                    .bh-filter-chip.active, .genre-filter-btn.active) {
  border-color: rgba(255, 255, 255, 0.25) !important;
  color: #f4f4f5 !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

/* ==========================================================================
   MAIN APP WAVE PLAYER (fixed bottom)
   ========================================================================== */

.bh-home-v5 .bh-app-main-player {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: min(760px, calc(100vw - 24px));
  bottom: 100px;
  z-index: 120;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  backdrop-filter: blur(16px) saturate(1.1);
  padding: 18px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 18px 50px rgba(5,3,12,0.5);
}

.bh-home-v5 .bh-app-main-player.is-collapsed .bh-app-main-player__wave,
.bh-home-v5 .bh-app-main-player.is-collapsed .bh-app-main-player__controls {
  display: none;
}

.bh-home-v5 .bh-app-main-player.is-collapsed {
  width: min(420px, calc(100vw - 24px));
  padding: 12px 14px;
}

.bh-home-v5 .bh-app-main-player__head {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}

.bh-home-v5 .bh-app-main-player.is-collapsed .bh-app-main-player__head {
  margin-bottom: 0;
}

.bh-home-v5 .bh-app-main-player__avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.bh-home-v5 .bh-app-main-player__meta { min-width: 0; }

.bh-home-v5 .bh-app-main-player__meta strong {
  display: block;
  font-size: 12px;
  line-height: 1.2;
  color: #f4f4f5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bh-home-v5 .bh-app-main-player__meta a {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  color: #a1a1aa;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bh-home-v5 .bh-app-main-player__meta a[aria-disabled="true"] {
  pointer-events: none;
}

.bh-home-v5 .bh-app-main-player__tools {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.bh-home-v5 .bh-app-main-player__tool {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: #f4f4f5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color var(--bh-duration-fast) var(--bh-ease-out),
              background var(--bh-duration-fast) var(--bh-ease-out),
              color var(--bh-duration-fast) var(--bh-ease-out);
}

.bh-home-v5 .bh-app-main-player__tool:active {
  transform: scale(0.97);
}

.bh-home-v5 .bh-app-main-player__tool:hover {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.bh-home-v5 .bh-app-main-player__wave {
  width: 100%;
  min-height: 52px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
}

.bh-home-v5 .bh-app-main-player__controls {
  display: grid;
  grid-template-columns: 42px 42px 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.bh-home-v5 .bh-app-main-player__btn {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: #f4f4f5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color var(--bh-duration-fast) var(--bh-ease-out),
              background var(--bh-duration-fast) var(--bh-ease-out);
}

.bh-home-v5 .bh-app-main-player__btn:active {
  transform: scale(0.97);
}

.bh-home-v5 .bh-app-main-player__btn:hover {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.1);
}

.bh-home-v5 .bh-app-main-player__btn--play {
  border-color: transparent;
  background: #f4f4f5;
  color: #0c0c0d;
}

.bh-home-v5 .bh-app-main-player__time {
  font-size: 10px;
  letter-spacing: 0.06em;
  color: #a1a1aa;
  text-align: right;
}

.bh-home-v5 .master-play.is-playing {
  border-color: rgba(255, 255, 255, 0.6) !important;
  color: #ffffff !important;
}

@media (max-width: 768px) {
  .bh-home-v5 .bh-app-main-player {
    width: calc(100vw - 20px);
    left: 50%;
    transform: translateX(-50%);
    bottom: 96px;
    padding: 9px 10px;
  }

  .bh-home-v5 .bh-app-main-player.is-collapsed {
    width: calc(100vw - 20px);
  }

  .bh-home-v5 :where(.bh-home-btn, .button, a.button, button.button,
                      input.button, .single_add_to_cart_button),
  .bh-service-page :where(.bh-btn, .button, a.button, button.button, input.button),
  .bh-single-beat :where(.button, a.button, button.button, input.button,
                          .single_add_to_cart_button) {
    min-height: 42px;
    font-size: 13px;
  }
}

/* ==========================================================================
   EMBEDDED SHORTCODE NORMALIZATION (app stage)
   Ensures all shortcodes loaded inside #bh-home-app-stage inherit the
   dark theme and don't leak browser-default or theme-default colors.
   ========================================================================== */

#bh-home-app-stage .js-bh-stage-body {
  color: var(--bh-n-text);
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
}

/* Force dark backgrounds on any embedded page wrapper */
#bh-home-app-stage .js-bh-stage-body > * {
  max-width: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Service page inside stage */
#bh-home-app-stage .bh-service-page {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

#bh-home-app-stage .bh-service-page .bh-container {
  max-width: none !important;
  padding: 0 !important;
}

#bh-home-app-stage .bh-service-page .bh-title {
  font-family: 'Syne', system-ui, sans-serif;
  color: #f4f4f5;
}

#bh-home-app-stage .bh-service-page .bh-desc {
  color: var(--bh-n-muted);
}

#bh-home-app-stage .bh-service-page .bh-badge {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.04);
  color: var(--bh-n-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#bh-home-app-stage .bh-service-page .bh-service-icon {
  opacity: 0.85;
}

/* Mastering form inside stage */
#bh-home-app-stage .bh-master-auth-guard {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: rgba(14, 14, 18, 0.6) !important;
}

/* Price cards inside stage */
#bh-home-app-stage .bh-price-grid {
  gap: 12px;
}

#bh-home-app-stage .bh-price-card {
  background: rgba(14, 14, 18, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 0 !important;
  padding: 20px 16px !important;
}

#bh-home-app-stage .bh-price-card.featured {
  border-color: rgba(255, 255, 255, 0.14) !important;
}

#bh-home-app-stage .bh-price-name {
  color: #f4f4f5;
}

#bh-home-app-stage .bh-price-val {
  color: #f4f4f5;
  font-weight: 800;
}

#bh-home-app-stage .bh-price-features li {
  color: var(--bh-n-muted);
}

/* Audio demo box inside stage */
#bh-home-app-stage .bh-audio-box {
  background: rgba(14, 14, 18, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 0 !important;
}

#bh-home-app-stage .bh-wave-slot {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 0;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Profile page inside stage */
#bh-home-app-stage .bh-profile-page,
#bh-home-app-stage .bh-user-profile-card {
  background: transparent !important;
  color: var(--bh-n-text);
}

/* Beats page inside stage */
#bh-home-app-stage .beats-page-grid,
#bh-home-app-stage .bh-beats-page {
  background: transparent !important;
  color: var(--bh-n-text);
}

/* Songs library inside stage */
#bh-home-app-stage .bh-songs-library {
  background: transparent !important;
}

/* WooCommerce inside stage */
#bh-home-app-stage .woocommerce {
  color: var(--bh-n-text);
}

#bh-home-app-stage .woocommerce a {
  color: var(--bh-n-text);
}

#bh-home-app-stage .woocommerce th {
  color: var(--bh-n-muted);
}

/* Exclusive/unlocked box */
#bh-home-app-stage .bh-exclusive-box {
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border-radius: 0 !important;
  padding: 20px 16px !important;
  box-shadow: var(--bh-shadow-card);
}

/* Price card shadow upgrade */
#bh-home-app-stage .bh-price-card {
  box-shadow: var(--bh-shadow-card) !important;
}

/* ── Global scroll smoothing ── */
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ── Content-visibility: skip off-screen rendering cost ── */
.bh-home-v5 > section:not(:first-child),
.bh-producers-strip,
.bst-related {
  content-visibility: auto;
  contain-intrinsic-size: 0 400px;
}

/* ── will-change hints for frequently animated elements ── */
/* JS should reset to 'auto' after GSAP tween completes (clearProps handles this) */
.bh-genre-card,
.track-row,
.bh-ps-card {
  will-change: transform;
}

/* ==========================================================================
   DESIGN SYSTEM ADDITIONS v8.0 — Typography, Spacing, Focus, Scroll, etc.
   ========================================================================== */

/* ── 1. Typography: Syne headings across all plugin contexts ── */
.bh-home-v5 h1, .bh-home-v5 h2, .bh-home-v5 h3,
.bh-library-v3 h1, .bh-library-v3 h2, .bh-library-v3 h3,
.bh-single-beat h1, .bh-single-beat h2 {
  font-family: 'Syne', system-ui, sans-serif !important;
  letter-spacing: -.02em !important;
}

/* ── Body text baseline ── */
.bh-home-v5,
.bh-library-v3,
.bh-single-beat {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
}

/* ── Mono elements: prices, BPM, counts ── */
.bh-home-v5 .bh-home-trackprice,
.bh-home-v5 .bh-hero__prices,
.bh-home-v5 .bh-hero__spec,
.bh-library-v3 .track-price,
.bh-library-v3 .track-bpm,
.bh-library-v3 .track-key,
.bh-single-beat .bst-hero-price,
.bh-single-beat .bst-bpm,
.bh-single-beat .bst-key {
  font-family: 'DM Mono', 'Space Mono', ui-monospace, monospace;
}

/* ── 2. Spacing: apply vars to shells where currently hardcoded ── */
.bh-library-shell {
  padding-top: var(--sp-6);
}

/* ── 5. Focus states ── */
.bh-home-v5 *:focus-visible,
.bh-library-v3 *:focus-visible,
.bh-single-beat *:focus-visible {
  outline: 2px solid rgba(200,255,0,.7);
  outline-offset: 3px;
  border-radius: 0;
}

/* ── 6. Scrollbar styling ── */
.bh-home-v5, .bh-library-v3, .bh-hub-v5, .bh-single-beat {
  scrollbar-width: thin;
  scrollbar-color: rgba(200,255,0,.3) transparent;
}
.bh-home-v5 ::-webkit-scrollbar,
.bh-library-v3 ::-webkit-scrollbar,
.bh-hub-v5 ::-webkit-scrollbar,
.bh-single-beat ::-webkit-scrollbar { width: 5px; height: 5px; }
.bh-home-v5 ::-webkit-scrollbar-track,
.bh-library-v3 ::-webkit-scrollbar-track,
.bh-hub-v5 ::-webkit-scrollbar-track,
.bh-single-beat ::-webkit-scrollbar-track { background: transparent; }
.bh-home-v5 ::-webkit-scrollbar-thumb,
.bh-library-v3 ::-webkit-scrollbar-thumb,
.bh-hub-v5 ::-webkit-scrollbar-thumb,
.bh-single-beat ::-webkit-scrollbar-thumb {
  background: rgba(200,255,0,.25);
  border-radius: 999px;
}

/* ── 7. Selection color ── */
.bh-home-v5 ::selection,
.bh-library-v3 ::selection,
.bh-single-beat ::selection {
  background: rgba(200,255,0,.35);
  color: #F2EDE4;
}

/* ── 8. Image aspect-ratio safeguards ── */
.bh-home-v5 img, .bh-library-v3 img, .bh-hub-v5 img {
  max-width: 100%;
  height: auto;
}
/* Fixed-size UI cover images */
.bh-home-v5 .track-cover img,
.bh-library-v3 .track-cover img {
  height: 100%;
  object-fit: cover;
}

/* ── 9. Mobile touch targets ── */
@media (hover: none) {
  .bh-home-v5 button, .bh-library-v3 button, .bh-single-beat button {
    min-height: 44px; min-width: 44px;
  }
  /* Exception: EQ animation bars in tight grids */
  .bh-home-v5 .bh-eq, .bh-library-v3 .bh-eq { min-height: unset; min-width: unset; }
}

/* ── 10. Scroll-margin for content containers ── */
.bh-home-embed-body,
.bh-library-shell,
.bh-hub-shell,
.bh-single-beat > .bst-hero-v2 {
  scroll-margin-top: var(--bh-header-h, 64px);
}

/* ══════════════════════════════════════════
   BRUTAL LUXURY — Grain noise overlay
   SVG feTurbulence tile fixed over everything
   ══════════════════════════════════════════ */
.bh-home-v5::after,
.bh-single-beat::after,
.bh-profile-page::after,
body.woocommerce-cart::after,
body.woocommerce-checkout::after,
body.woocommerce-account::after {
  content: '';
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9000;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 180px 180px;
}