/* ============================================================
   BH HOME LAYER — Compact App Design v3.0
   Loaded in WP footer to override inline <style> blocks.
   ============================================================ */

/* Fonts loaded via wp_enqueue_style('beatshouse-fonts') — no @import needed */

/* ============================================================
   DESIGN TOKENS
   ============================================================ */

.bh-home-v5 {
  /* ── BRUTAL LUXURY component tokens ── */
  --_accent:      #C8FF00;
  --_accent-soft: rgba(200,255,0,0.65);
  --_bg:          #000;
  --_surface:     #080808;
  --_border:      rgba(255,255,255,0.08);
  --_text:        #F0EDE8;
  --_muted:       rgba(240,237,232,0.45);
  --_faint:       rgba(240,237,232,0.18);
  --_font-d:      'Syne', system-ui, sans-serif;
  --_font-ui:     'Manrope', system-ui, sans-serif;
  --_font-mono:   'DM Mono', ui-monospace, monospace;
  --_ease:        cubic-bezier(0.19, 1, 0.22, 1);
  --_fast:        100ms;
  --_base:        180ms;
  --_slow:        320ms;
  --_shadow-card: 0 0 0 1px rgba(255,255,255,0.06), 0 4px 24px rgba(0,0,0,0.85);
  --_shadow-menu: 0 0 0 1px rgba(255,255,255,0.08), 0 16px 64px rgba(0,0,0,0.95);
}


/* ============================================================
   1. PAGE SHELL
   ============================================================ */

.bh-home-v5 {
  font-family: var(--_font-ui) !important;
  background: #000 !important;
  color: var(--_text) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

.bh-home-v5 .bh-home-shell {
  max-width: 880px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 68px 20px 32px !important;
  background: transparent !important;
  position: relative !important;
}

@media (max-width: 640px) {
  .bh-home-v5 .bh-home-shell {
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

.bh-home-v5 .bh-home-shell::before { display: none !important; }


/* ============================================================
   2. HERO — compact horizontal strip
   ============================================================ */

/* Hide elements that should not appear in app view */
.bh-home-v5 .bh-home-wave-hero,
.bh-home-v5 .bh-home-stats { display: none !important; }

.bh-home-v5 .bh-hero {
  margin: 0 !important;
  padding: 16px 16px 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Row layout: cover | content | actions */
.bh-home-v5 .bh-hero__card,
.bh-home-v5 .bh-hero__card.featured-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
  justify-content: flex-start !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  padding: 14px 0 16px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  position: relative !important;
  overflow: visible !important;
}

/* Remove gradient overlays */
.bh-home-v5 .bh-hero__card::before,
.bh-home-v5 .bh-hero__card::after,
.bh-home-v5 .featured-card::before,
.bh-home-v5 .featured-card::after { display: none !important; }

/* Cover — 88px square thumbnail */
.bh-home-v5 .bh-hero__cover {
  flex: 0 0 88px !important;
  width: 88px !important;
  height: 88px !important;
  min-width: 88px !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  background: var(--_surface) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,.5) !important;
  z-index: auto !important;
  inset: auto !important;
}

.bh-home-v5 .bh-hero__cover img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  transition: none !important;
  position: relative !important;
  border-radius: 0 !important;
}

.bh-home-v5 .bh-hero__card:hover .bh-hero__cover img {
  transform: none !important;
  opacity: 1 !important;
}

/* Content column — fills middle */
.bh-home-v5 .bh-hero__content {
  flex: 1 !important;
  min-width: 0 !important;
  position: relative !important;
  z-index: 2 !important;
  padding: 0 !important;
  width: auto !important;
  background: transparent !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

/* Badge */
.bh-home-v5 .bh-hero__badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 2px 5px !important;
  border-radius: 0 !important;
  background: rgba(200,255,0,.10) !important;
  color: #C8FF00 !important;
  font: 700 8px/1 var(--_font-mono) !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  margin-bottom: 3px !important;
}

.bh-home-v5 .bh-hero__genre {
  color: rgba(255,255,255,.3) !important;
  font: 500 9px/1 var(--_font-mono) !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
}

/* Title — compact size */
.bh-home-v5 .bh-hero__title {
  font: 800 clamp(17px,5vw,22px)/1.1 var(--_font-d) !important;
  color: #F2EDE4 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  letter-spacing: -.02em !important;
  text-shadow: none !important;
  text-transform: none !important;
}

/* Meta */
.bh-home-v5 .bh-hero__meta {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  flex-wrap: nowrap !important;
  margin-bottom: 0 !important;
}

.bh-home-v5 .bh-hero__producer {
  color: rgba(200,255,0,.8) !important;
  font: 600 11px/1 var(--_font-ui) !important;
}

.bh-home-v5 .bh-hero__sep {
  color: rgba(255,255,255,.2) !important;
  font-size: 9px !important;
}

.bh-home-v5 .bh-hero__spec {
  color: rgba(255,255,255,.3) !important;
  font: 400 10px/1 var(--_font-mono) !important;
}

/* Prices */
.bh-home-v5 .bh-hero__prices {
  display: flex !important;
  gap: 10px !important;
  margin-bottom: 0 !important;
}

.bh-home-v5 .bh-hero__prices span {
  font: 500 10px/1 var(--_font-mono) !important;
  color: rgba(255,255,255,.35) !important;
}

.bh-home-v5 .bh-hero__prices strong {
  color: #C8FF00 !important;
  font-weight: 700 !important;
}

/* Actions column */
.bh-home-v5 .bh-hero__actions {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

/* Play button — 42px circle */
.bh-home-v5 .bh-hero__play {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 50% !important;
  background: #C8FF00 !important;
  color: #000 !important;
  border: 0 !important;
  font-size: 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  box-shadow: 0 0 0 6px rgba(200,255,0,.12) !important;
  padding: 0 !important;
  transition: transform var(--_fast) var(--_ease), box-shadow var(--_fast) var(--_ease) !important;
}

@media (hover: hover) and (pointer: fine) {
  .bh-home-v5 .bh-hero__play:hover {
    transform: scale(1.06) !important;
    box-shadow: 0 0 0 8px rgba(200,255,0,.16) !important;
  }
}

.bh-home-v5 .bh-hero__play:active {
  transform: scale(0.95) !important;
  box-shadow: 0 0 0 4px rgba(200,255,0,.10) !important;
}

/* CTA link "View →" */
.bh-home-v5 .bh-hero__cta {
  flex: none !important;
  min-height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: rgba(255,255,255,.35) !important;
  font: 600 9px/1 var(--_font-mono) !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: color var(--_fast) var(--_ease) !important;
}

.bh-home-v5 .bh-hero__cta:hover {
  color: rgba(255,255,255,.65) !important;
  background: transparent !important;
  border-color: transparent !important;
  text-decoration: none !important;
}


/* ============================================================
   3. CATALOG — vertical list
   ============================================================ */

/* Section title */
.bh-home-v5 .bh-home-list-title,
.bh-home-v5 .section-title,
.bh-home-v5 .bh-catalog .section-title,
.bh-home-v5 .recent-section .section-title {
  font: 700 9px/1 var(--_font-mono) !important;
  color: rgba(200,255,0,.65) !important;
  text-transform: uppercase !important;
  letter-spacing: .28em !important;
  margin: 0 !important;
  padding: 14px 0 8px !important;
  border: 0 !important;
  display: block !important;
}

.bh-home-v5 .bh-home-list-title::before,
.bh-home-v5 .section-title::before,
.bh-home-v5 .bh-home-list-title::after,
.bh-home-v5 .section-title::after { display: none !important; }

/* Grid → vertical list */
.bh-home-v5 .bh-catalog__grid,
.bh-home-v5 .bh-catalog__grid.beats-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  grid-template-columns: none !important;
  padding: 0 !important;
}

/* Track row */
.bh-home-v5 .bh-catalog__card,
.bh-home-v5 .bh-catalog__card.beat-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 11px 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.045) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: background var(--_fast) var(--_ease) !important;
  transform: none !important;
}

.bh-home-v5 .bh-catalog__card:hover,
.bh-home-v5 .bh-catalog__card.beat-card:hover {
  background: transparent !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Cover — 52px square, relative positioned */
.bh-home-v5 .bh-catalog__cover {
  flex: 0 0 52px !important;
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  position: relative !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: var(--_surface) !important;
  box-shadow: none !important;
  aspect-ratio: auto !important;
  transition: none !important;
}

.bh-home-v5 .bh-catalog__card:hover .bh-catalog__cover {
  box-shadow: none !important;
}

.bh-home-v5 .bh-catalog__cover img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: none !important;
  transform: none !important;
  opacity: 1 !important;
  filter: none !important;
  position: relative !important;
}

.bh-home-v5 .bh-catalog__card:hover .bh-catalog__cover img {
  transform: none !important;
}

/* Play overlay — fills cover, hidden by default */
.bh-home-v5 .bh-catalog__play {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  border-radius: 0 !important;
  background: rgba(6,5,10,.7) !important;
  color: #fff !important;
  border: 0 !important;
  font-size: 11px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  opacity: 0 !important;
  transform: none !important;
  transition: opacity var(--_fast) var(--_ease) !important;
  z-index: 3 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.bh-home-v5 .bh-catalog__card:hover .bh-catalog__play {
  opacity: 1 !important;
  transform: none !important;
}

.bh-home-v5 .bh-catalog__play:hover {
  background: rgba(6,5,10,.85) !important;
}

/* Fav — static flex item, right side of row */
.bh-home-v5 .bh-catalog__fav,
.bh-home-v5 .bh-home-fav.bh-catalog__fav {
  position: static !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  flex-shrink: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  color: rgba(255,255,255,.2) !important;
  border: 0 !important;
  font-size: 13px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  opacity: 1 !important;
  transform: none !important;
  transition: color var(--_fast) var(--_ease) !important;
  z-index: auto !important;
  box-shadow: none !important;
}

.bh-home-v5 .bh-catalog__fav:active {
  transform: scale(0.90) !important;
}

.bh-home-v5 .bh-catalog__card:hover .bh-catalog__fav {
  color: rgba(255,255,255,.55) !important;
  opacity: 1 !important;
}

.bh-home-v5 .bh-catalog__fav:hover {
  color: rgba(255,82,82,.7) !important;
  transform: none !important;
}

.bh-home-v5 .bh-catalog__fav.is-fav {
  color: #ef4444 !important;
  opacity: 1 !important;
}

/* Info link — fills row */
.bh-home-v5 .bh-catalog__info {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  padding: 0 !important;
  text-decoration: none !important;
  color: inherit !important;
}

.bh-home-v5 .bh-catalog__info:hover { text-decoration: none !important; }

.bh-home-v5 .bh-catalog__title {
  font: 700 13px/1.2 var(--_font-d) !important;
  color: #F0EBE1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  letter-spacing: -.01em !important;
  margin: 0 !important;
}

.bh-home-v5 .bh-catalog__author {
  font: 400 10px/1 var(--_font-ui) !important;
  color: rgba(255,255,255,.45) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin: 0 !important;
}

.bh-home-v5 .bh-catalog__foot {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 1px !important;
  justify-content: flex-start !important;
}

.bh-home-v5 .bh-catalog__specs {
  font: 400 9px/1 var(--_font-mono) !important;
  color: rgba(255,255,255,.22) !important;
  letter-spacing: .04em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
  flex: 1 !important;
}

.bh-home-v5 .bh-catalog__price {
  font: 700 11px/1 var(--_font-mono) !important;
  color: rgba(255,255,255,.55) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.bh-home-v5 .bh-catalog__num {
  flex: 0 0 20px !important;
  width: 20px !important;
  text-align: right !important;
  font: 600 10px/1 var(--_font-mono) !important;
  color: rgba(255,255,255,.2) !important;
  flex-shrink: 0 !important;
}


/* ============================================================
   4. GENERAL BUTTON RESET (within home scope)
   ============================================================ */

/* Only reset appearance properties, do NOT override layout */
.bh-home-v5 .bh-home-btn,
.bh-home-v5 .bh-btn,
.bh-home-v5 .pill,
.bh-home-v5 .vault-tab,
.bh-home-v5 .bh-chip {
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 0 !important;
}


/* ============================================================
   5. DOCK NAV
   ============================================================ */

.bh-home-v5 .bh-dock-nav,
.bh-home-v5 .bottom-nav {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9990 !important;
  background: rgba(6,5,10,.95) !important;
  backdrop-filter: blur(36px) !important;
  -webkit-backdrop-filter: blur(36px) !important;
  border-top: 1px solid rgba(200,255,0,.10) !important;
  box-shadow: 0 -1px 0 rgba(255,255,255,.05), 0 -8px 32px rgba(5,3,12,.85) !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: space-around !important;
  padding: 0 8px !important;
  padding-bottom: env(safe-area-inset-bottom) !important;
}

.bh-home-v5 .bh-dock-nav .bh-dock-item,
.bh-home-v5 .bottom-nav .bh-dock-item,
.bh-home-v5 .bh-dock-nav .nav-item,
.bh-home-v5 .bottom-nav .nav-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  padding: 10px 14px 8px !important;
  border-radius: 0 !important;
  font-family: var(--_font-mono) !important;
  font-size: 9px !important;
  font-weight: 400 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: rgba(242,237,228,.28) !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  transition: color var(--_base) var(--_ease) !important;
  position: relative !important;
}

.bh-home-v5 .bh-dock-nav .bh-dock-item.active,
.bh-home-v5 .bottom-nav .nav-item.active {
  color: var(--_accent) !important;
  background: transparent !important;
}

.bh-home-v5 .bh-dock-nav .bh-dock-item .bh-dock-icon,
.bh-home-v5 .bottom-nav .nav-item .nav-icon {
  font-size: 19px !important;
  transition: color var(--_base) var(--_ease), transform var(--_base) var(--_ease) !important;
}


/* ============================================================
   6. SLIDE MENU
   ============================================================ */

.bh-home-v5 .bh-slide-menu {
  position: fixed !important;
  bottom: 80px !important;
  left: 50% !important;
  /* Use translateX(-50%) for centering + translateY for enter/exit animation.
     Do NOT use translateX(100%/0) here — that's owned by the base slide-in animation.
     Open/close is handled via opacity + pointer-events toggled by .is-open. */
  transform: translateX(-50%) translateY(8px) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity var(--_base) var(--_ease), transform var(--_base) var(--_ease) !important;
  width: min(300px, calc(100vw - 32px)) !important;
  max-height: calc(100vh - 140px) !important;
  overflow-y: auto !important;
  background: rgba(16,13,24,.97) !important;
  backdrop-filter: blur(40px) !important;
  -webkit-backdrop-filter: blur(40px) !important;
  border: 1px solid rgba(200,255,0,.10) !important;
  border-radius: 0 !important;
  padding: 8px !important;
  z-index: 9995 !important;
  box-shadow: var(--_shadow-menu) !important;
}

.bh-home-v5 .bh-slide-menu.is-open {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) !important;
}

.bh-home-v5 .bh-slide-menu .bh-menu-item,
.bh-home-v5 .bh-slide-menu a,
.bh-home-v5 .bh-slide-menu button {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 10px 12px !important;
  border-radius: 0 !important;
  font-family: var(--_font-ui) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--_muted) !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background var(--_fast) var(--_ease), color var(--_fast) var(--_ease) !important;
}

.bh-home-v5 .bh-slide-menu .bh-menu-item:hover,
.bh-home-v5 .bh-slide-menu a:hover,
.bh-home-v5 .bh-slide-menu button:hover {
  background: rgba(200,255,0,.08) !important;
  color: var(--_accent) !important;
}


/* ============================================================
   7. APP PLAYER BAR
   ============================================================ */

.bh-home-v5 .bh-app-main-player {
  background: rgba(16,13,24,.92) !important;
  backdrop-filter: blur(28px) !important;
  -webkit-backdrop-filter: blur(28px) !important;
  border: 1px solid rgba(200,255,0,.10) !important;
  border-radius: 0 !important;
  padding: 12px 16px !important;
  gap: 12px !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 8px 36px rgba(5,3,12,.65) !important;
}

.bh-home-v5 .bh-app-main-player[hidden] { display: none !important; }

.bh-home-v5 .bh-app-main-player .bh-player-cover,
.bh-home-v5 .bh-app-main-player .player-cover {
  width: 44px !important;
  height: 44px !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  border: 1px solid rgba(200,255,0,.18) !important;
}

.bh-home-v5 .bh-app-main-player .bh-player-cover img,
.bh-home-v5 .bh-app-main-player .player-cover img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.bh-home-v5 .bh-app-main-player .bh-player-title,
.bh-home-v5 .bh-app-main-player .player-title {
  font: 700 13px/1.3 var(--_font-ui) !important;
  color: var(--_text) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin: 0 !important;
}

.bh-home-v5 .bh-app-main-player .bh-player-subtitle,
.bh-home-v5 .bh-app-main-player .player-subtitle {
  font: 400 10px/1.3 var(--_font-mono) !important;
  color: var(--_muted) !important;
  margin: 0 !important;
}

.bh-home-v5 .bh-app-main-player .bh-player-controls,
.bh-home-v5 .bh-app-main-player .player-controls {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

.bh-home-v5 .bh-app-main-player .bh-player-controls button,
.bh-home-v5 .bh-app-main-player .player-controls button {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: none !important;
  background: transparent !important;
  color: var(--_muted) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  cursor: pointer !important;
  transition: color var(--_fast) var(--_ease), background var(--_fast) var(--_ease) !important;
}

.bh-home-v5 .bh-app-main-player .bh-player-controls button:active,
.bh-home-v5 .bh-app-main-player .player-controls button:active {
  transform: scale(0.95) !important;
}

.bh-home-v5 .bh-app-main-player .bh-player-controls .bh-player-play,
.bh-home-v5 .bh-app-main-player .player-controls .player-play,
.bh-home-v5 .bh-app-main-player .bh-player-controls .bh-btn-play,
.bh-home-v5 .bh-app-main-player .player-controls .btn-play {
  background: var(--_accent) !important;
  color: #000 !important;
  box-shadow: 0 0 14px rgba(200,255,0,.28) !important;
}

.bh-home-v5 .bh-app-main-player .bh-player-progress,
.bh-home-v5 .bh-app-main-player .player-progress {
  height: 2px !important;
  background: rgba(242,237,228,.06) !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  width: 100% !important;
  margin-top: 8px !important;
}

.bh-home-v5 .bh-app-main-player .bh-player-progress .bh-progress-fill,
.bh-home-v5 .bh-app-main-player .player-progress .progress-fill {
  height: 100% !important;
  background: linear-gradient(90deg, var(--_accent), var(--_accent-soft)) !important;
  border-radius: 0 !important;
  transition: width .1s linear !important;
}


/* ============================================================
   8. LOADING STATE
   ============================================================ */

.bh-home-v5 .bh-home-loader {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: calc(100dvh - 140px) !important;
  gap: 14px !important;
}

@keyframes bhSpin    { to { transform: rotate(360deg); } }
@keyframes bhFadeText { 0%, 100% { opacity: .4; } 50% { opacity: .7; } }
@keyframes bhPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.88); } }
@keyframes bhShimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }


/* ============================================================
   9. FAV BUTTON (generic .bh-home-fav)
   ============================================================ */

.bh-home-v5 .bh-home-fav:not(.bh-catalog__fav) {
  color: var(--_faint) !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  transition: color var(--_fast) var(--_ease) !important;
  font-size: 16px !important;
  padding: 4px !important;
}

@media (hover: hover) and (pointer: fine) {
  .bh-home-v5 .bh-home-fav:not(.bh-catalog__fav):hover {
    color: rgba(255,82,82,.7) !important;
  }
}

.bh-home-v5 .bh-home-fav:not(.bh-catalog__fav):active {
  transform: scale(0.88) !important;
}

.bh-home-v5 .bh-home-fav:not(.bh-catalog__fav).is-fav {
  color: #FF5252 !important;
}


/* ============================================================
   10. FONT AWESOME ICON PROTECTION
   Force correct font-family/weight so theme overrides can't break icons.
   ============================================================ */

.bh-home-v5 i.fas,
.bh-home-v5 i.fa-solid,
.bh-home-v5 i.fa {
  font-family: 'Font Awesome 6 Free' !important;
  font-weight: 900 !important;
  font-style: normal !important;
  font-variant: normal !important;
  line-height: 1 !important;
  display: inline-block !important;
  text-rendering: auto !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  vertical-align: middle !important;
  border: 0 !important;
  background: none !important;
  text-decoration: none !important;
  width: auto !important;
  height: auto !important;
}

.bh-home-v5 i.far,
.bh-home-v5 i.fa-regular {
  font-family: 'Font Awesome 6 Free' !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-variant: normal !important;
  line-height: 1 !important;
  display: inline-block !important;
  text-rendering: auto !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  vertical-align: middle !important;
  border: 0 !important;
  background: none !important;
  text-decoration: none !important;
  width: auto !important;
  height: auto !important;
}

/* Ensure ::before content (the icon glyph) is never suppressed */
.bh-home-v5 i.fas::before,
.bh-home-v5 i.fa-solid::before,
.bh-home-v5 i.fa::before,
.bh-home-v5 i.far::before,
.bh-home-v5 i.fa-regular::before {
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;
}


/* ============================================================
   11. GLOBAL RESETS
   ============================================================ */

.bh-home-v5 *,
.bh-home-v5 *::before,
.bh-home-v5 *::after {
  box-sizing: border-box !important;
}

.bh-home-v5 a {
  color: inherit !important;
  text-decoration: none !important;
}

.bh-home-v5 button {
  font-family: var(--_font-ui) !important;
}

/* img display:block — intentionally NOT set here to avoid interfering with
   inline-flex icon containers. Cover images use explicit display via parent. */


/* ============================================================
   11. RESPONSIVE
   ============================================================ */

@media (max-width: 640px) {
  .bh-home-v5 .bh-home-shell {
    padding: 68px 0 94px !important;
  }
  .bh-home-v5 .bh-hero {
    padding: 12px 12px 0 !important;
  }
  .bh-home-v5 .bh-hero__cover {
    flex: 0 0 76px !important;
    width: 76px !important;
    height: 76px !important;
    min-width: 76px !important;
  }
  .bh-home-v5 .bh-hero__title {
    font-size: clamp(15px, 4.5vw, 20px) !important;
  }
  .bh-home-v5 .bh-hero__play {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    font-size: 12px !important;
  }
  .bh-home-v5 .bh-catalog__cover {
    flex: 0 0 46px !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
  }
}


/* ============================================================
   12. SCROLLBAR
   ============================================================ */

.bh-home-v5::-webkit-scrollbar       { width: 4px !important; }
.bh-home-v5::-webkit-scrollbar-track { background: transparent !important; }
.bh-home-v5::-webkit-scrollbar-thumb {
  background: rgba(200,255,0,.16) !important;
  border-radius: 0 !important;
}
.bh-home-v5::-webkit-scrollbar-thumb:hover {
  background: rgba(200,255,0,.28) !important;
}


/* ============================================================
   13. GLOBAL BUTTON SYSTEM — .bh-btn
   ============================================================ */

.bh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 0;
  border: none;
  cursor: pointer;
  font: 700 11px/1 'Manrope', system-ui, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: opacity 160ms ease, transform 120ms ease;
  text-decoration: none;
}
.bh-btn:active { transform: scale(0.97); }

.bh-btn--primary { background: #C8FF00; color: #000; border-color: #C8FF00; }
.bh-btn--primary:hover { background: #d4ff26; }

.bh-btn--ghost {
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.8);
  border: 1px solid rgba(255,255,255,.1);
}
.bh-btn--ghost:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.18);
  color: #fff;
}

.bh-btn--sm  { padding: 7px 14px;  font-size: 9px;  border-radius: 0; }
.bh-btn--lg  { padding: 14px 28px; font-size: 13px; border-radius: 0; }


/* ══════════════════════════════════════════════════
   Global Player v2 — Redesign Layer
   Scoped to .bh-gp-v2
   ══════════════════════════════════════════════════ */

.bh-gp-v2 {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  gap: 20px !important;
  padding: 10px 20px !important;
  height: 70px !important;
  background: rgba(6,5,10,.96) !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}

/* Left */
.bh-gp-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.bh-gp-cover-stack {
  position: relative;
  flex-shrink: 0;
}

.bh-gp-cover-art {
  width: 46px;
  height: 46px;
  border-radius: 0;
  overflow: hidden;
  background: rgba(255,255,255,.06);
  flex-shrink: 0;
  position: relative;
}

.bh-gp-cover-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  display: block !important;
}

/* EQ overlay bars */
.bh-gp-eq-overlay {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
}
.bh-app-main-player.is-playing .bh-gp-eq-overlay { opacity: 1; }
.bh-gp-eq-overlay span {
  width: 2px;
  border-radius: 0;
  background: #C8FF00;
  animation: bh-gp-eq .7s ease-in-out infinite alternate;
}
.bh-gp-eq-overlay span:nth-child(1) { height: 6px;  animation-duration: .55s; }
.bh-gp-eq-overlay span:nth-child(2) { height: 12px; animation-duration: .70s; animation-delay: .1s; }
.bh-gp-eq-overlay span:nth-child(3) { height: 10px; animation-duration: .62s; animation-delay: .05s; }
.bh-gp-eq-overlay span:nth-child(4) { height: 7px;  animation-duration: .80s; animation-delay: .15s; }
@keyframes bh-gp-eq {
  from { transform: scaleY(.3); }
  to   { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  .bh-gp-eq-overlay span { animation: none; height: 8px !important; }
}

/* Producer avatar badge */
.bh-gp-producer-av {
  position: absolute !important;
  bottom: -4px !important;
  right: -4px !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(6,5,10,.9) !important;
  object-fit: cover !important;
  background: rgba(255,255,255,.06) !important;
}

/* Meta text */
.bh-gp-meta {
  min-width: 0;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
.bh-gp-title {
  font: 600 12px/1.2 'Syne', system-ui, sans-serif !important;
  color: rgba(255,255,255,.9) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-decoration: none !important;
  max-width: 180px !important;
}
.bh-gp-title:hover { color: #C8FF00 !important; }
.bh-gp-producer-name {
  font: 500 10px/1 'Manrope', system-ui, sans-serif !important;
  color: rgba(255,255,255,.42) !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}
.bh-gp-producer-name:hover { color: rgba(255,255,255,.7) !important; }

/* Center */
.bh-gp-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 260px;
  max-width: 480px;
  width: 100%;
}

/* Control buttons */
.bh-gp-controls {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.bh-gp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: rgba(255,255,255,.6);
  cursor: pointer;
  border-radius: 0;
  padding: 6px;
  transition: color .15s ease, background .15s ease;
}
.bh-gp-btn:hover { color: #fff; background: rgba(255,255,255,.07); }

.bh-gp-btn--play {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: #C8FF00 !important;
  color: #000 !important;
  margin: 0 6px !important;
  box-shadow: 0 0 16px rgba(200,255,0,.35) !important;
}
.bh-gp-btn--play:hover { opacity: .88 !important; background: #C8FF00 !important; }
.bh-gp-btn--play:active { transform: scale(.95) !important; }

/* Progress bar */
.bh-gp-progress-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
}

.bh-gp-time {
  font: 600 10px/1 'DM Mono', monospace !important;
  color: rgba(255,255,255,.35) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  min-width: 30px !important;
}

.bh-gp-track-container {
  flex: 1;
  height: 4px;
  position: relative;
  border-radius: 999px;
  overflow: hidden;
  cursor: pointer;
}
.bh-gp-track-bg {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.1);
  border-radius: 999px;
}
.bh-gp-track-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;
  background: #C8FF00;
  border-radius: 999px;
  transition: width .1s linear;
  pointer-events: none;
}
.bh-gp-range {
  position: absolute;
  inset: -8px 0;
  width: 100%;
  opacity: 0;
  cursor: pointer;
  height: 20px !important;
  -webkit-appearance: none;
  appearance: none;
  background: none;
}

/* Right */
.bh-gp-right {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
}

.bh-gp-buy-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 6px 12px !important;
  border-radius: 0 !important;
  background: rgba(200,255,0,.12) !important;
  border: 1px solid rgba(200,255,0,.25) !important;
  color: #C8FF00 !important;
  font: 700 9px/1 'Manrope', system-ui, sans-serif !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: background .15s ease, border-color .15s ease !important;
  white-space: nowrap !important;
}
.bh-gp-buy-btn:hover {
  background: rgba(200,255,0,.2) !important;
  border-color: rgba(200,255,0,.45) !important;
  color: #C8FF00 !important;
  text-decoration: none !important;
}

/* Mobile: stack into compact bar */
@media (max-width: 768px) {
  .bh-gp-v2 {
    grid-template-columns: auto 1fr auto !important;
    gap: 10px !important;
    padding: 8px 12px !important;
    height: 60px !important;
  }
  .bh-gp-title { max-width: 120px !important; font-size: 11px !important; }
  .bh-gp-buy-btn span { display: none; }
  .bh-gp-btn--vol { display: none; }
  .bh-gp-btn--expand { display: none; }
}

@media (max-width: 480px) {
  .bh-gp-right { gap: 2px; }
  .bh-gp-meta { display: none !important; }
  .bh-gp-center { min-width: 160px; }
}