/* ============================================================
   BH Single Beat — Split Hero + Producer Card Redesign v2
   Scope: .bh-single-beat.bh-sbt-v2
   ============================================================ */

.bh-single-beat.bh-sbt-v2 {
  --bst-amber:        #C8FF00;
  --bst-amber-dim:    rgba(200,255,0,.12);
  --bst-amber-glow:   rgba(200,255,0,.30);
  --bst-amber-border: rgba(200,255,0,.25);
  --bst-line:         rgba(255,255,255,.08);
  --bst-text:         #F2EDE4;
}

/* ── Hide legacy hero — v2 replaces it ── */
.bh-sbt-v2 .bst-hero { display: none !important; }

/* ============================================================
   HERO v2 — Split layout
   ============================================================ */

.bst-hero-v2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: clamp(380px, 52vh, 600px);
  position: relative;
  overflow: hidden;
}

.bst-hero-v2__left {
  position: relative;
  overflow: hidden;
}

.bst-hero-v2__cover {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 340px;
  will-change: transform;
}

.bst-hero-v2__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bst-hero-v2__cover-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 30% 70%, rgba(200,255,0,.18) 0%, transparent 65%),
    linear-gradient(to right, transparent 60%, #000 100%),
    linear-gradient(to bottom, transparent 40%, rgba(6,5,10,.65) 100%);
  pointer-events: none;
}

/* Decorative waveform bars */
.bst-hero-waveform {
  position: absolute;
  bottom: 24px;
  left: 20px;
  right: 20px;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 48px;
  pointer-events: none;
  opacity: .55;
}
.bst-hero-waveform span {
  flex: 1;
  border-radius: 0;
  background: rgba(200,255,0,.6);
  min-height: 4px;
  animation: bst-wf-pulse 1.8s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 0.06s);
}
@keyframes bst-wf-pulse {
  0%, 100% { transform: scaleY(1);   opacity: .55; }
  50%       { transform: scaleY(1.6); opacity: .9;  }
}

.bst-hero-v2__right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px,4vw,56px) clamp(24px,3vw,48px);
  background: linear-gradient(to left, #000 80%, transparent 100%);
  position: relative;
  z-index: 1;
}

.bst-hero-v2 .bst-type-tag {
  font: 700 9px/1 'DM Mono', monospace;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #C8FF00;
  margin-bottom: 12px;
  display: block;
}

.bst-hero-v2 .bst-title {
  font: 800 clamp(24px,4vw,44px)/1.05 'Syne', system-ui, sans-serif !important;
  color: #F2EDE4 !important;
  letter-spacing: -.02em;
  margin: 0 0 16px !important;
}
#main .bst-hero-v2 .bst-title {
  font: 800 clamp(24px,4vw,44px)/1.05 'Syne', system-ui, sans-serif !important;
  color: #F2EDE4 !important;
}

.bst-hero-v2 .bst-meta-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.bst-hero-v2 .bst-meta-chip {
  font: 600 9px/1 'DM Mono', monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(200,255,0,.8);
  background: rgba(200,255,0,.1);
  border: 1px solid rgba(200,255,0,.2);
  border-radius: 0;
  padding: 4px 9px;
}

.bst-hero-v2__credits {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0 4px;
}

.bst-hero-v2__prod-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  color: rgba(242,237,228,.75);
  transition: color .15s;
}
.bst-hero-v2__prod-link:hover { color: #F2EDE4; text-decoration: none; }

.bst-hero-v2__prod-av {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(200,255,0,.35);
}

.bst-hero-v2__prod-role {
  font: 600 9px/1 'DM Mono', monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(200,255,0,.75);
}

.bst-hero-v2__prod-name {
  font: 600 12px/1 'Manrope', sans-serif;
  color: rgba(242,237,228,.85);
}

.bst-hero-v2__sep {
  color: rgba(255,255,255,.25);
  font-size: 12px;
}

.bst-hero-v2__price {
  font: 700 26px/1 'DM Mono', monospace;
  color: #F2EDE4;
  letter-spacing: -.02em;
  margin-top: 18px;
}
.bst-hero-v2__price small {
  font-size: 11px;
  color: rgba(242,237,228,.4);
  font-weight: 500;
  margin-left: 6px;
  letter-spacing: .04em;
}

/* ============================================================
   PRODUCER CARD
   ============================================================ */

.bst-producer-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--bst-line);
  border-radius: 0;
  background: rgba(16,13,24,.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  margin: 20px 0;
  position: relative;
  overflow: hidden;
}
.bst-producer-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(200,255,0,.04) 0%, transparent 60%);
  pointer-events: none;
}

.bst-prod-card__av {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid rgba(200,255,0,.3);
  box-shadow: 0 0 0 4px rgba(200,255,0,.08);
}

.bst-prod-card__body { flex: 1; min-width: 0; }

.bst-prod-card__role {
  font: 700 8px/1 'DM Mono', monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(200,255,0,.7);
  margin-bottom: 4px;
  display: block;
}

.bst-prod-card__name {
  font: 700 14px/1.1 'Syne', system-ui, sans-serif !important;
  color: rgba(255,255,255,.9) !important;
  display: block;
  margin-bottom: 5px;
}
#main .bst-prod-card__name {
  font: 700 14px/1.1 'Syne', system-ui, sans-serif !important;
  color: rgba(255,255,255,.9) !important;
}

.bst-prod-card__bio {
  font: 400 10px/1.4 'Manrope', system-ui, sans-serif !important;
  color: rgba(255,255,255,.38) !important;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 0 !important;
}
#main .bst-prod-card__bio { font: 400 10px/1.4 'Manrope', system-ui, sans-serif !important; }

.bst-prod-card__socials {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.bst-prod-card__social-link {
  width: 26px;
  height: 26px;
  border-radius: 0;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.45);
  text-decoration: none;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}
.bst-prod-card__social-link:hover {
  border-color: rgba(200,255,0,.35);
  color: #C8FF00;
  background: rgba(200,255,0,.08);
  text-decoration: none;
}

.bst-prod-card__beat-count {
  font: 700 11px/1 'DM Mono', monospace;
  color: rgba(255,255,255,.55);
  padding: 6px 10px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 0;
  flex-shrink: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
}
.bst-prod-card__beat-count small {
  font: 600 7px/1 'DM Mono', monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.28);
}

/* ============================================================
   LICENSE CARDS — amber active + flip entrance
   ============================================================ */

.bh-sbt-v2 .bst-lic-card.is-active {
  border-color: rgba(200,255,0,.4) !important;
  background: rgba(200,255,0,.06) !important;
  box-shadow:
    0 0 0 1px rgba(200,255,0,.15),
    0 4px 20px rgba(200,255,0,.1) !important;
}
.bh-sbt-v2 .bst-lic-card.is-active .bst-lic-tier {
  color: #C8FF00 !important;
}

/* GSAP initial state */
.bst-lic-card--flip-ready {
  opacity: 0;
  transform: rotateY(-45deg) translateY(12px);
}

/* ============================================================
   STICKY BUY BAR
   ============================================================ */

.bst-sticky-buy {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 900;
  padding: 12px 16px;
  background: rgba(6,5,10,.92);
  border-top: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transform: translateY(100%);
  transition: transform 280ms cubic-bezier(0.19,1,0.22,1);
}
.bst-sticky-buy.is-visible { transform: translateY(0); }
.bst-sticky-buy[hidden] { display: block !important; visibility: visible; }

.bst-sticky-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.bst-sticky-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.bst-sticky-title {
  font: 600 13px/1.1 'Syne', system-ui, sans-serif;
  color: rgba(255,255,255,.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bst-sticky-lic {
  font: 600 9px/1 'DM Mono', monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(200,255,0,.7);
}
.bst-sticky-btn {
  flex-shrink: 0;
  padding: 12px 24px;
  border-radius: 0;
  background: #C8FF00;
  color: #000;
  font: 700 11px/1 'Manrope', system-ui, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: opacity 160ms ease, transform 120ms ease;
}
.bst-sticky-btn:hover { opacity: .9; }
.bst-sticky-btn:active { transform: scale(0.98); }

/* ============================================================
   RELATED BEATS — horizontal scroll
   ============================================================ */

.bst-rel-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x mandatory;
}
.bst-rel-scroll::-webkit-scrollbar { display: none; }

.bst-rel-scroll .bst-rel-item {
  flex-shrink: 0;
  width: clamp(140px, 22vw, 180px);
  scroll-snap-align: start;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 400ms ease, transform 400ms ease;
}
.bst-rel-scroll .bst-rel-item.bst-rel--animated {
  opacity: 1;
  transform: translateX(0);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
  .bst-hero-v2 {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .bst-hero-v2__left { height: 280px; flex-shrink: 0; }
  .bst-hero-v2__right {
    background: #000;
    padding: 20px 16px;
  }
  .bst-producer-card { flex-wrap: wrap; }
  .bst-sticky-btn { padding: 10px 16px; font-size: 10px; }
}

@media (max-width: 480px) {
  .bst-hero-v2__left { height: 220px; }
  .bst-hero-v2 .bst-title { font-size: 22px !important; }
  .bst-prod-card__beat-count { display: none; }
  .bst-hero-waveform { height: 32px; }
}