/* ── WooCommerce overrides ── */

.woocommerce-page .site-main {
  background: var(--bg-primary);
}

/* ── Shop page ── */

.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

/* Kill WC's legacy clearfix pseudos — they become empty grid cells otherwise */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  content: none !important;
  display: none !important;
}

@media (min-width: 768px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
  }
}

@media (min-width: 1024px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(4, 1fr);
  }
}

.woocommerce ul.products li.product {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-base);
  margin: 0;
  padding: 0;
  float: none;
  width: 100%;
}

.woocommerce ul.products li.product:hover {
  border-color: var(--border-accent);
  box-shadow: var(--shadow-glow);
  transform: translateY(-4px);
}

.woocommerce ul.products li.product a img {
  margin: 0;
  aspect-ratio: 1;
  object-fit: cover;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  padding: var(--space-md) var(--space-md) var(--space-xs);
}

.woocommerce ul.products li.product .price {
  color: var(--accent-light);
  font-weight: var(--font-weight-semibold);
  padding: 0 var(--space-md);
  font-size: 0.9375rem;
}

.woocommerce ul.products li.product .price del {
  color: var(--text-muted);
}

.woocommerce ul.products li.product .button {
  display: block;
  margin: var(--space-md);
  padding: 0.625rem;
  background: var(--accent-subtle);
  color: var(--accent-light);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: var(--font-weight-semibold);
  text-align: center;
  transition: all var(--transition-fast);
}

.woocommerce ul.products li.product .button:hover {
  background: var(--gradient-accent);
  color: #fff;
  box-shadow: var(--shadow-glow);
}

/* ── Single product ── */

.woocommerce div.product {
  padding: var(--space-2xl) 0;
}

.woocommerce div.product div.images {
  border-radius: var(--radius-lg);
  overflow: hidden;
  transform-origin: center;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 200ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, box-shadow;
}

@media (prefers-reduced-motion: reduce) {
  .woocommerce div.product div.images.has-pulse {
    transform: none !important;
    box-shadow: none !important;
  }
}

/* ── Beat-synced particle bursts ── */

.beat-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 2;
}

.beat-particle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--size, 5px);
  height: var(--size, 5px);
  border-radius: 50%;
  background: rgb(var(--hue, 124, 92, 252));
  box-shadow: 0 0 10px rgb(var(--hue, 124, 92, 252)),
              0 0 20px rgba(var(--hue, 124, 92, 252), 0.6);
  transform: translate(-50%, -50%);
  animation: beat-particle-fly var(--duration, 700ms) cubic-bezier(0.12, 0.8, 0.32, 1) forwards;
  will-change: transform, opacity;
}

@keyframes beat-particle-fly {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  60% {
    opacity: 0.9;
  }
  100% {
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .beat-particle,
  .beat-ring {
    display: none;
  }
}

/* Radial pulse ring on strong bass hits */

.beat-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40%;
  aspect-ratio: 1;
  border: 2px solid rgba(124, 92, 252, 0.7);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 0 20px rgba(124, 92, 252, 0.4);
  animation: beat-ring-expand var(--duration, 600ms) cubic-bezier(0.22, 1, 0.36, 1) forwards;
  will-change: transform, opacity;
}

@keyframes beat-ring-expand {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
    border-width: 3px;
  }
  20% {
    opacity: 0.9;
  }
  100% {
    transform: translate(-50%, -50%) scale(var(--max-scale, 2.5));
    opacity: 0;
    border-width: 0;
  }
}

/* ── Conversion nudge: 30s playback → gold celebration on Add to Cart ── */

/* Stage wraps the cart button so particles can fly out from its center
   without affecting layout or interaction. */
.bbm-cart-stage {
  position: relative;
  display: inline-block;
}
.bbm-cart-stage .beat-particles {
  z-index: 3;
  overflow: visible;
}

/* Gold particles — pure gold core with a strong layered glow. Overrides
   the default purple shadow values so the burst reads unmistakably gold. */
.beat-particle.is-gold {
  background: rgb(var(--hue, 255, 215, 0));
  box-shadow:
    0 0 12px rgb(var(--hue, 255, 215, 0)),
    0 0 28px rgba(var(--hue, 255, 215, 0), 0.85),
    0 0 56px rgba(var(--hue, 255, 215, 0), 0.55);
}

/* Brief flash overlay at the moment of detonation. Works on whichever
 * button JS targets — cart, favorite, or make-offer. */
.single_add_to_cart_button.gold-flash,
.bbm-fav-toggle.gold-flash,
.srp-make-offer-bt.gold-flash {
  animation: bbm-cart-gold-flash 600ms ease-out forwards;
}
@keyframes bbm-cart-gold-flash {
  0% {
    box-shadow:
      0 0 0 0 rgba(255, 215, 0, 0),
      0 0 0 0 rgba(255, 235, 120, 0);
    filter: brightness(1);
  }
  20% {
    box-shadow:
      0 0 40px 18px rgba(255, 235, 120, 0.95),
      0 0 100px 30px rgba(255, 215, 0, 0.7);
    filter: brightness(1.6);
  }
  100% {
    box-shadow:
      0 0 24px rgba(250, 204, 21, 0.55),
      0 0 60px rgba(250, 204, 21, 0.3);
    filter: brightness(1);
  }
}

/* Sustained golden pulse on the cart button after the burst — the
   button itself transforms into solid gold with black lettering for
   the "this is special, move now" moment.
   Selectors are intentionally over-specified to outrank theme + WC
   defaults without resorting to `!important` on every property.
   The breathing animation pulses GLOW only (box-shadow + brightness) —
   no transform — so the button stays geometrically stable and click
   targets are instant. */
body.single-product .single_add_to_cart_button.gold-pulse,
body.single-product button.single_add_to_cart_button.gold-pulse,
body.single-product a.single_add_to_cart_button.gold-pulse,
.woocommerce.single-product button.single_add_to_cart_button.gold-pulse,
.woocommerce.single-product a.single_add_to_cart_button.gold-pulse {
  position: relative;
  isolation: isolate;
  background: linear-gradient(135deg, #ffd700 0%, #ffeb78 50%, #ffc83d 100%) !important;
  background-color: #ffd700 !important;
  color: #0a0a0a !important;
  border-color: #ffeb78 !important;
  text-shadow: none !important;
  animation: bbm-cart-gold-breathe 1.6s ease-in-out infinite;
  box-shadow:
    0 0 32px rgba(255, 215, 0, 0.95),
    0 0 80px rgba(255, 215, 0, 0.6),
    0 0 160px rgba(255, 235, 120, 0.35) !important;
}

body.single-product .single_add_to_cart_button.gold-pulse:hover,
body.single-product .single_add_to_cart_button.gold-pulse:focus,
.woocommerce.single-product .single_add_to_cart_button.gold-pulse:hover,
.woocommerce.single-product .single_add_to_cart_button.gold-pulse:focus {
  background: linear-gradient(135deg, #ffeb78 0%, #fff3a0 50%, #ffd700 100%) !important;
  background-color: #ffeb78 !important;
  color: #0a0a0a !important;
  border-color: #fff3a0 !important;
}
.single_add_to_cart_button.gold-pulse::before,
.single_add_to_cart_button.gold-pulse::after,
.bbm-fav-toggle.gold-pulse::before,
.bbm-fav-toggle.gold-pulse::after,
.srp-make-offer-bt.gold-pulse::before,
.srp-make-offer-bt.gold-pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 4px solid rgba(255, 215, 0, 1);
  pointer-events: none;
  z-index: -1;
  animation: bbm-cart-gold-ripple 1.6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  will-change: transform, opacity;
}
.single_add_to_cart_button.gold-pulse::after,
.bbm-fav-toggle.gold-pulse::after,
.srp-make-offer-bt.gold-pulse::after {
  animation-delay: 0.55s;
  border-color: rgba(255, 235, 120, 0.95);
}

/* Gold-pulse on the Favorite button (Single product). Same gold treatment
 * as the cart button with selectors specific enough to override the
 * button's outlined-default style. */
.bbm-fav-toggle.gold-pulse,
button.bbm-fav-toggle.gold-pulse {
  position: relative;
  isolation: isolate;
  background: linear-gradient(135deg, #ffd700 0%, #ffeb78 50%, #ffc83d 100%) !important;
  background-color: #ffd700 !important;
  color: #0a0a0a !important;
  border-color: #ffeb78 !important;
  text-shadow: none !important;
  animation: bbm-cart-gold-breathe 1.6s ease-in-out infinite;
  box-shadow:
    0 0 32px rgba(255, 215, 0, 0.95),
    0 0 80px rgba(255, 215, 0, 0.6),
    0 0 160px rgba(255, 235, 120, 0.35) !important;
}

.bbm-fav-toggle.gold-pulse .bbm-fav-icon,
.bbm-fav-toggle.gold-pulse .bbm-fav-label-add,
.bbm-fav-toggle.gold-pulse .bbm-fav-label-remove {
  color: #0a0a0a !important;
}

.bbm-fav-toggle.gold-pulse:hover,
.bbm-fav-toggle.gold-pulse:focus {
  background: linear-gradient(135deg, #ffeb78 0%, #fff3a0 50%, #ffd700 100%) !important;
  background-color: #ffeb78 !important;
  color: #0a0a0a !important;
  border-color: #fff3a0 !important;
}

/* Gold-pulse on the Make an Offer button — overrides the brand
 * gradient with the gold treatment when it's the warm-funnel target. */
.srp-make-offer-bt.gold-pulse,
a.srp-make-offer-bt.gold-pulse,
button.srp-make-offer-bt.gold-pulse {
  position: relative;
  isolation: isolate;
  background: linear-gradient(135deg, #ffd700 0%, #ffeb78 50%, #ffc83d 100%) !important;
  background-color: #ffd700 !important;
  color: #0a0a0a !important;
  border-color: #ffeb78 !important;
  text-shadow: none !important;
  animation: bbm-cart-gold-breathe 1.6s ease-in-out infinite;
  box-shadow:
    0 0 32px rgba(255, 215, 0, 0.95),
    0 0 80px rgba(255, 215, 0, 0.6),
    0 0 160px rgba(255, 235, 120, 0.35) !important;
}

.srp-make-offer-bt.gold-pulse:hover,
.srp-make-offer-bt.gold-pulse:focus {
  background: linear-gradient(135deg, #ffeb78 0%, #fff3a0 50%, #ffd700 100%) !important;
  color: #0a0a0a !important;
  border-color: #fff3a0 !important;
}

@keyframes bbm-cart-gold-ripple {
  0%   { transform: scale(1);   opacity: 1; border-width: 4px; }
  100% { transform: scale(1.85); opacity: 0; border-width: 0; }
}
/* No transform on the button itself — pulse glow + brightness only so
   the click target stays geometrically stable. Avoids the tap-delay
   that comes from clicking a target whose size is animating. */
@keyframes bbm-cart-gold-breathe {
  0%, 100% {
    filter: brightness(1);
    box-shadow:
      0 0 28px rgba(255, 215, 0, 0.85),
      0 0 70px rgba(255, 215, 0, 0.5),
      0 0 140px rgba(255, 235, 120, 0.3);
  }
  50% {
    filter: brightness(1.15);
    box-shadow:
      0 0 44px rgba(255, 215, 0, 1),
      0 0 100px rgba(255, 215, 0, 0.7),
      0 0 200px rgba(255, 235, 120, 0.45);
  }
}

/* Gold shockwave rings — color/width controlled by per-instance JS vars. */
.beat-ring.is-gold {
  border-color: rgb(var(--ring-hue, 255, 215, 0));
  border-width: var(--ring-width, 3px);
  box-shadow:
    0 0 24px rgba(var(--ring-hue, 255, 215, 0), 0.7),
    0 0 60px rgba(var(--ring-hue, 255, 215, 0), 0.4);
}

/* ── Cover image gold aura while audio is playing ── */
.single-product div.product div.images.is-playing-gold,
.single-product div.product .woocommerce-product-gallery.is-playing-gold {
  position: relative;
  border-radius: var(--radius-lg, 16px);
  animation: bbm-cover-gold-breathe 2.4s ease-in-out infinite;
  box-shadow:
    0 0 0 2px rgba(255, 215, 0, 0.85),
    0 0 28px rgba(255, 215, 0, 0.55),
    0 0 80px rgba(255, 215, 0, 0.3),
    0 0 160px rgba(255, 235, 120, 0.18);
  transition: box-shadow 0.4s ease;
}
.single-product div.product div.images.is-playing-gold img,
.single-product div.product .woocommerce-product-gallery.is-playing-gold img {
  border-radius: inherit;
}
@keyframes bbm-cover-gold-breathe {
  0%, 100% {
    box-shadow:
      0 0 0 2px rgba(255, 215, 0, 0.75),
      0 0 24px rgba(255, 215, 0, 0.45),
      0 0 70px rgba(255, 215, 0, 0.22);
  }
  50% {
    box-shadow:
      0 0 0 3px rgba(255, 215, 0, 1),
      0 0 36px rgba(255, 215, 0, 0.8),
      0 0 110px rgba(255, 235, 120, 0.45);
  }
}

@media (prefers-reduced-motion: reduce) {
  .single_add_to_cart_button.gold-pulse,
  .single_add_to_cart_button.gold-pulse::before,
  .single_add_to_cart_button.gold-pulse::after,
  .single_add_to_cart_button.gold-flash,
  .single-product div.product div.images.is-playing-gold,
  .single-product div.product .woocommerce-product-gallery.is-playing-gold {
    animation: none;
  }
}

/* ── Make an Offer button (Exclusive license) ── */

/* Logged-out users don't see Make an Offer. It's a registered-member
   negotiation flow — visitors are funneled into /sign-up/ via the
   listen-gate card above the player, not into price negotiation.
   `bbm-no-listen` body class is set in inc/listen-gate.php on every
   logged-out frontend response. CSS-hide matches the existing pattern
   used to hide the Sonaar player itself for logged-out users. */
body.bbm-no-listen .srp-make-offer-btn-wrapper,
body.bbm-no-listen .srp-make-offer-bt,
body.bbm-no-listen a.srp-make-offer-bt {
  display: none !important;
}

/* Match Add to Cart button dimensions and styling */
.woocommerce .single_add_to_cart_button,
.srp-make-offer-bt,
a.srp-make-offer-bt,
.woocommerce-variation-add-to-cart .srp-make-offer-bt {
  min-width: 180px;
  height: 48px;
  padding: 0 2rem !important;
  line-height: 1;
  box-sizing: border-box;
  font-family: var(--font-display) !important;
  font-size: 0.9375rem !important;
  font-weight: var(--font-weight-semibold) !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Side-by-side layout: Make an Offer + Add to Cart */
.woocommerce div.product .summary .srp-make-offer-btn-wrapper,
.woocommerce div.product .summary form.cart {
  display: inline-block;
  vertical-align: top;
  margin: 0 0.75rem 0 0;
}
.woocommerce div.product .summary form.cart {
  margin-right: 0;
}
.woocommerce div.product .summary form.cart .quantity {
  display: none; /* hidden input is irrelevant; prevents layout shift */
}

.srp-make-offer-bt,
a.srp-make-offer-bt,
.woocommerce-variation-add-to-cart .srp-make-offer-bt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-display) !important;
  font-weight: var(--font-weight-semibold) !important;
  font-size: 0.9375rem !important;
  transition: all var(--transition-base) !important;
  box-shadow: var(--shadow-glow) !important;
  text-decoration: none !important;
  cursor: pointer;
}

.srp-make-offer-bt:hover,
a.srp-make-offer-bt:hover {
  background: var(--gradient-accent-hover) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow-lg) !important;
  color: #fff !important;
}

/* Exclusive celebration — overrides the regular attention colors with gold */
.srp-make-offer-bt.needs-attention.is-exclusive {
  position: relative;
  isolation: isolate;
  background: linear-gradient(135deg, #facc15 0%, #f59e0b 50%, #fbbf24 100%) !important;
  color: #1a1a2e !important;
  animation: bbm-exclusive-breathe 1.6s ease-in-out infinite;
  box-shadow:
    0 0 30px rgba(250, 204, 21, 0.7),
    0 0 70px rgba(250, 204, 21, 0.35) !important;
}

.srp-make-offer-bt.needs-attention.is-exclusive::before,
.srp-make-offer-bt.needs-attention.is-exclusive::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 3px solid rgba(250, 204, 21, 1);
  pointer-events: none;
  z-index: -1;
  animation: bbm-cart-ripple 1.7s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  will-change: transform, opacity;
}

.srp-make-offer-bt.needs-attention.is-exclusive::after {
  animation-delay: 0.55s;
  border-color: rgba(34, 211, 238, 0.95);
}

@keyframes bbm-exclusive-breathe {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.045);
    filter: brightness(1.15);
  }
}

/* Brief gold flash on the cover art when exclusive is selected */
.woocommerce div.product div.images.exclusive-flash {
  animation: bbm-exclusive-cover-flash 900ms ease-out;
}

@keyframes bbm-exclusive-cover-flash {
  0% {
    box-shadow: 0 0 0 0 rgba(250, 204, 21, 0);
    filter: brightness(1);
  }
  30% {
    box-shadow: 0 0 60px 8px rgba(250, 204, 21, 0.85),
                0 0 120px 20px rgba(250, 204, 21, 0.4);
    filter: brightness(1.25) saturate(1.1);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(250, 204, 21, 0);
    filter: brightness(1);
  }
}

/* Gold ring variant for exclusive celebration */
.beat-ring.exclusive {
  border-color: rgba(250, 204, 21, 0.9);
  border-width: 3px;
  box-shadow: 0 0 30px rgba(250, 204, 21, 0.6);
}

@media (prefers-reduced-motion: reduce) {
  .woocommerce div.product div.images.exclusive-flash,
  .srp-make-offer-bt.needs-attention.is-exclusive,
  .srp-make-offer-bt.needs-attention.is-exclusive::before,
  .srp-make-offer-bt.needs-attention.is-exclusive::after {
    animation: none;
  }
}

.woocommerce div.product .product_title {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  margin: 0 0 var(--space-sm) 0;
}

.woocommerce div.product .summary > * + * {
  margin-top: var(--space-md);
}

.woocommerce div.product .iron_widget_radio {
  margin: var(--space-md) 0 !important;
}

.trust-badges {
  margin: var(--space-md) 0 !important;
}

.woocommerce div.product p.price,
.woocommerce div.product .woocommerce-variation-price .price,
.woocommerce div.product .woocommerce-variation-price .price .amount,
.woocommerce div.product p.price .amount {
  font-family: var(--font-display);
  color: var(--accent-light) !important;
  font-size: 1.5rem;
  font-weight: var(--font-weight-semibold);
}

.woocommerce div.product .woocommerce-variation-price {
  margin-bottom: var(--space-md);
}

.woocommerce div.product .woocommerce-product-details__short-description {
  color: var(--text-secondary);
  line-height: 1.7;
}

/* ── Liner Notes — hero treatment under the cover image ───────
   ACF `liner_notes` field. Big italic display copy, lots of
   breathing room, no animation effects (per the catalog owner's
   "let the writing carry itself" directive). The line is the
   emotional anchor of the page — restraint over flourish.
   ───────────────────────────────────────────────────────────── */

.bbm-liner-hero {
  margin: var(--space-xl) 0 var(--space-2xl);
  padding: 0;
  text-align: center;
}

/* "This beat feels like" prefix — small, uppercase, muted. Tracked
   wide so it reads as labeling the line below, not introducing it. */
.bbm-liner-hero-prefix {
  margin: 0 0 var(--space-md);
  font-family: var(--font-display, inherit);
  font-style: normal;
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted, rgba(255, 255, 255, 0.45));
}

/* The quote itself — display serif italic, the visual heart of
   the column. clamp() keeps it readable from mobile to wide
   desktop without breakpoint switches. line-height tighter than
   typical body to feel like a single thought. */
.bbm-liner-hero-quote {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-display, Georgia, "Times New Roman", serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  line-height: 1.25;
  letter-spacing: 0.005em;
  color: var(--text-primary, #f1f3f8);
  /* Pulls the visual width in so long lines wrap to 2 lines max
     and short lines don't stretch awkwardly across the column. */
  max-width: 28ch;
  margin-left: auto;
  margin-right: auto;
}

/* Smart-quote glyphs — accent-tinted, slightly larger, hairline
   negative margin so they hang into the gutter and the words
   align to the optical baseline of the line. */
.bbm-liner-hero-mark {
  display: inline-block;
  font-style: normal;
  font-weight: 600;
  color: var(--accent, #7c5cfc);
  opacity: 0.55;
  font-size: 0.95em;
}

.bbm-liner-hero-mark-open  { margin-right: 0.04em; }
.bbm-liner-hero-mark-close { margin-left:  0.04em; }

.bbm-liner-hero-text {
  /* Reset since blockquote already handles the typography */
}

@media (max-width: 600px) {
  .bbm-liner-hero {
    margin: var(--space-lg) 0 var(--space-xl);
  }
  .bbm-liner-hero-quote {
    max-width: 24ch;
  }
}

/* ── Add to cart ── */

.woocommerce .single_add_to_cart_button {
  background: var(--gradient-accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-display) !important;
  font-weight: var(--font-weight-semibold) !important;
  padding: 0.875rem 2rem !important;
  transition: all var(--transition-base) !important;
  box-shadow: var(--shadow-glow) !important;
}

.woocommerce .single_add_to_cart_button:hover {
  background: var(--gradient-accent-hover) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow-lg) !important;
}

/* ── Quantity ── */

.woocommerce .quantity .qty {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  padding: 0.625rem;
  width: 60px;
}

/* ── Variations / license tiers ── */

.woocommerce .variations {
  margin-bottom: var(--space-lg);
  border: none;
  border-collapse: collapse;
}

.woocommerce .variations tr,
.woocommerce .variations tbody,
.woocommerce .variations thead {
  border: none;
  background: transparent;
}

.woocommerce .variations td,
.woocommerce .variations th {
  padding: var(--space-sm) 0;
  vertical-align: middle !important;
  border: none;
  background: transparent;
}

.woocommerce .variations .label {
  padding-right: var(--space-md);
  vertical-align: middle !important;
}

.woocommerce .variations .label label {
  display: inline-block;
  color: var(--text-secondary);
  font-weight: var(--font-weight-medium);
  margin: 0;
  padding: 0;
  line-height: 1;
  vertical-align: middle;
}

.woocommerce .variations .value {
  vertical-align: middle !important;
}

.woocommerce .variations select {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  padding: 0.625rem var(--space-md);
}

.woocommerce .variations select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

/* ── Cart ── */

.woocommerce-cart table.cart {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.woocommerce-cart table.cart th {
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.woocommerce-cart table.cart td {
  border-top: 1px solid var(--border);
  color: var(--text-primary);
}

/* ── Checkout + Account address forms ──
   Form-row styling applies to both the checkout page and the My Account
   → Addresses edit page so the buyer's experience stays consistent dark
   theme. <select> needs explicit appearance reset + a custom caret SVG —
   browsers default to OS-native white styling otherwise. */

.woocommerce-checkout .form-row label,
.woocommerce-account .form-row label,
.woocommerce-edit-address .form-row label {
  color: var(--text-secondary);
  font-weight: var(--font-weight-medium);
}

.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select,
.woocommerce-account .form-row input.input-text,
.woocommerce-account .form-row textarea,
.woocommerce-account .form-row select,
.woocommerce-edit-address .form-row input.input-text,
.woocommerce-edit-address .form-row textarea,
.woocommerce-edit-address .form-row select {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  padding: 0.8125rem 1rem;
}

/* ── Select2 (WooCommerce country/state dropdowns) ──────────────
   WC enhances country/state selects with Select2.js, which HIDES the
   native <select> (sets it to display:none via .select2-hidden-accessible)
   and renders a div-based replacement on top. The native styling above
   never reaches the user — we have to style the Select2 widgets too.
   Verified live via DevTools — the visible white box is .select2-selection,
   not the underlying <select>. */
.select2-container--default .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  height: auto !important;
  min-height: 48px !important;
  padding: 0.625rem 1rem !important;
  display: flex !important;
  align-items: center !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--text-primary) !important;
  line-height: 1.4 !important;
  padding-left: 0 !important;
  padding-right: 1.5rem !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--text-muted) !important;
}

/* Caret arrow — replace the default Select2 sprite with our themed SVG. */
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100% !important;
  top: 0 !important;
  right: 0.75rem !important;
  width: 18px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  display: none !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 12px;
  height: 8px;
  transform: translateY(-50%);
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23a0a0b0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
}

/* Focus state — accent border + glow, matching the text inputs. */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-subtle) !important;
}

/* The open dropdown menu (positioned absolutely, attached to <body>). */
.select2-container--default .select2-dropdown {
  background: var(--bg-card, #14141e) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45) !important;
  overflow: hidden;
}

/* Search field inside the dropdown (Select2 adds for searchable lists). */
.select2-container--default .select2-search--dropdown .select2-search__field {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm, 6px) !important;
  color: var(--text-primary) !important;
  padding: 0.5rem 0.75rem !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--accent) !important;
  outline: none !important;
}

/* Results list container. */
.select2-container--default .select2-results__options {
  background: var(--bg-card, #14141e) !important;
  color: var(--text-primary) !important;
  max-height: 280px !important;
}

/* Each option row. */
.select2-container--default .select2-results__option {
  padding: 0.625rem 1rem !important;
  color: var(--text-primary) !important;
  background: transparent !important;
}

/* Hovered / keyboard-focused option — accent tint, no jarring blue. */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
  background: rgba(124, 92, 252, 0.18) !important;
  color: var(--text-primary) !important;
}

/* Currently-selected option — slightly stronger accent so the user sees
   their stored value reflected in the open menu. */
.select2-container--default .select2-results__option[aria-selected="true"] {
  background: rgba(124, 92, 252, 0.10) !important;
  color: var(--text-primary) !important;
}

/* Disabled rows ("loading" state, etc.) — subdued. */
.select2-container--default .select2-results__option--disabled {
  color: var(--text-muted) !important;
}

/* No-results message. */
.select2-container--default .select2-results__option.loading-results,
.select2-container--default .select2-results__option.no-results {
  color: var(--text-muted) !important;
  font-style: italic;
}

.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-account .form-row input.input-text:focus,
.woocommerce-account .form-row textarea:focus,
.woocommerce-account .form-row select:focus,
.woocommerce-edit-address .form-row input.input-text:focus,
.woocommerce-edit-address .form-row textarea:focus,
.woocommerce-edit-address .form-row select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
  outline: none;
}

.woocommerce-checkout #place_order {
  background: var(--gradient-accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-weight: var(--font-weight-semibold);
  padding: 1rem 2rem;
  font-size: 1rem;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-glow);
}

.woocommerce-checkout #place_order:hover {
  background: var(--gradient-accent-hover);
  box-shadow: var(--shadow-glow-lg);
}

/* ── Notices ── */

.woocommerce-message,
.woocommerce-info {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  color: var(--text-primary);
  border-radius: var(--radius-md);
}

.woocommerce-error {
  background: var(--bg-secondary);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-left: 4px solid #ef4444;
  color: var(--text-primary);
  border-radius: var(--radius-md);
}

/* ── Breadcrumbs ── */

.woocommerce .woocommerce-breadcrumb {
  color: var(--text-muted);
  font-size: 0.8125rem;
  margin-bottom: var(--space-xl);
}

.woocommerce .woocommerce-breadcrumb a {
  color: var(--text-secondary);
}

.woocommerce .woocommerce-breadcrumb a:hover {
  color: var(--accent-light);
}

/* ── Sort dropdown (shop / archive pages) ── */

.woocommerce .woocommerce-ordering {
  margin-bottom: var(--space-lg);
}

.woocommerce .woocommerce-ordering select,
.woocommerce .woocommerce-ordering .orderby {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  padding: 0.625rem 2.25rem 0.625rem 1rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%239898a8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.woocommerce .woocommerce-ordering select:hover,
.woocommerce .woocommerce-ordering .orderby:hover {
  border-color: var(--border-accent);
}

.woocommerce .woocommerce-ordering select:focus,
.woocommerce .woocommerce-ordering .orderby:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
  outline: none;
}

.woocommerce .woocommerce-ordering select option {
  background: var(--bg-card);
  color: var(--text-primary);
}

.woocommerce .woocommerce-result-count {
  color: var(--text-secondary);
  font-size: 0.875rem;
}

/* ── Product tabs (Description / Reviews / etc) ── */

.woocommerce div.product .woocommerce-tabs {
  margin-top: var(--space-2xl);
  background: transparent;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex;
  gap: var(--space-xs);
  padding: 0;
  margin: 0 0 var(--space-xl) 0;
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after {
  display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0;
  padding: 0;
  position: relative;
  top: 1px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 0.875rem 1.25rem;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: var(--font-weight-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
  text-shadow: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
  color: var(--text-primary);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--accent-light);
  border-bottom-color: var(--accent);
}

.woocommerce div.product .woocommerce-tabs .panel {
  background: transparent;
  color: var(--text-secondary);
  padding: 0;
  margin: 0;
  box-shadow: none;
}

.woocommerce div.product .woocommerce-tabs .panel h2 {
  display: none;
}

.woocommerce div.product .woocommerce-tabs .panel p {
  color: var(--text-secondary);
  line-height: 1.7;
}

/* End-of-page browse CTA */

.browse-all-cta {
  margin: var(--space-4xl) 0 var(--space-3xl);
  padding: var(--space-3xl) var(--space-xl);
  text-align: center;
  background: linear-gradient(135deg, rgba(124, 92, 252, 0.08) 0%, rgba(34, 211, 238, 0.06) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.browse-all-cta h2 {
  font-family: var(--font-display);
  font-size: 1.75rem;
  color: var(--text-primary);
  margin: 0 0 var(--space-sm);
}

.browse-all-cta p {
  color: var(--text-secondary);
  margin: 0 0 var(--space-xl);
}

.browse-all-cta .btn-browse-all {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.875rem 1.75rem;
  background: var(--gradient-accent);
  color: #fff;
  font-family: var(--font-display);
  font-weight: var(--font-weight-semibold);
  font-size: 0.9375rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-glow);
}

.browse-all-cta .btn-browse-all:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow-lg);
}

/* Related products */

.woocommerce .related.products,
.woocommerce .upsells.products {
  margin-top: var(--space-4xl);
  padding-top: var(--space-3xl);
  border-top: 1px solid var(--border);
}

.woocommerce .related.products > h2,
.woocommerce .upsells.products > h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin-bottom: var(--space-xl);
  color: var(--text-primary);
}

/* Collapse any empty li that sneaks into the related grid so the first
   real card starts in column 1 instead of leaving a blank cell. */
.woocommerce .related.products ul.products li.product:empty,
.woocommerce .upsells.products ul.products li.product:empty,
.woocommerce .related.products ul.products li.product:not(:has(.beat-card)),
.woocommerce .upsells.products ul.products li.product:not(:has(.beat-card)) {
  display: none !important;
}

/* Stock status */

/* Hide "In stock" label (reveals inventory), keep out-of-stock message */
.woocommerce .stock.in-stock {
  display: none;
}

.woocommerce .out-of-stock {
  color: #ef4444;
  font-weight: var(--font-weight-medium);
  font-size: 0.875rem;
}

/* Hide "Clear" variation link — visually redundant, tightens alignment */
.woocommerce .reset_variations {
  display: none !important;
}

/* ── Sold Exclusively — single product badge ── */

.sold-exclusively-badge {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-xl);
  margin-top: var(--space-lg);
  background: linear-gradient(135deg, rgba(250, 204, 21, 0.08) 0%, rgba(34, 211, 238, 0.06) 100%);
  border: 1px solid rgba(250, 204, 21, 0.35);
  border-radius: var(--radius-lg);
  box-shadow: 0 0 30px rgba(250, 204, 21, 0.08);
  position: relative;
  overflow: hidden;
}

.sold-exclusively-badge::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 20% 0%, rgba(250, 204, 21, 0.12) 0%, transparent 60%);
  pointer-events: none;
}

.sold-badge-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #facc15 0%, #f59e0b 100%);
  color: #1a1a2e;
  position: relative;
}

.sold-badge-body {
  position: relative;
}

.sold-badge-eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #facc15;
  margin-bottom: var(--space-xs);
}

.sold-badge-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  margin: 0 0 var(--space-xs) 0;
}

.sold-badge-copy {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.6;
}

/* ── Sold Exclusively — shop/archive card badge ── */

.loop-sold-badge {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  z-index: 2;
  padding: 0.375rem 0.75rem;
  background: linear-gradient(135deg, #facc15 0%, #f59e0b 100%);
  color: #1a1a2e;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: var(--radius-full);
  box-shadow: 0 4px 12px rgba(250, 204, 21, 0.35);
}

.woocommerce ul.products li.product,
.beat-card {
  position: relative;
}

/* Hide SKU + categories in summary (category moved to Track Sheet) */

.woocommerce div.product .product_meta {
  display: none;
}

/* License dropdown + Add to Cart locked inline; price slots underneath
   without pushing the button out of place. */

.woocommerce div.product form.cart {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-md);
  position: relative;
  padding-bottom: 2.5rem; /* reserved space for variation price */
}

.woocommerce div.product form.cart .variations {
  flex: 1 1 auto;
  margin: 0 !important;
  min-width: 0;
}

.woocommerce div.product form.cart .single_variation_wrap {
  display: contents;
}

.woocommerce div.product form.cart .woocommerce-variation {
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 0 !important;
}

.woocommerce div.product form.cart .woocommerce-variation-price {
  margin: 0 !important;
}

.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
  flex: 0 0 auto;
  margin: 0 !important;
}

.woocommerce div.product form.cart .single_variation {
  margin: 0 !important;
}

.woocommerce div.product .woocommerce-variation-price,
.woocommerce div.product .woocommerce-variation-price .price,
.woocommerce div.product .woocommerce-variation-price .amount {
  font-size: 1.25rem !important;
}

/* ── Pagination ── */

.woocommerce nav.woocommerce-pagination ul {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-2xl);
  border: none;
}

.woocommerce nav.woocommerce-pagination ul li {
  border: none;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span.current {
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: var(--font-weight-medium);
}

.woocommerce nav.woocommerce-pagination ul li a {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-secondary);
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: var(--bg-elevated);
  border-color: var(--border-accent);
  color: var(--text-primary);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--gradient-accent);
  color: #fff;
}

/* ── Sonaar: swap "info" (i) icon → FontAwesome tag for License CTA ── */
.sr_store_force_pl_bt .sricon-info::before {
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome", sans-serif;
  font-weight: 900;
  content: "\f02b"; /* fa-tag */
}

/* ==========================================================================
   Sticky bottom player — force light text on dark surface
   Sonaar's "adaptive colors" feature samples cover art and can produce
   dark text colors that vanish against our dark theme. Lock text to
   --text-primary regardless of palette.
   ========================================================================== */

/* Track / album title */
#sonaar-player .album-title,
#sonaar-player .playerNowPlaying .album-title,
#sonaar-player .audio-track,
#sonaar-player .playlist .title,
#sonaar-player .song-name,
#sonaar-player .now-playing,
.iron-audioplayer.skin_floated .album-title,
.iron-audioplayer.skin_floated .audio-track {
  color: var(--text-primary) !important;
}

/* Time / duration display */
#sonaar-player .timing,
#sonaar-player .player .timing,
#sonaar-player .player-time,
#sonaar-player .duration,
#sonaar-player .current-time {
  color: var(--text-primary) !important;
  opacity: 0.9;
}

/* Artist or secondary metadata under title */
#sonaar-player .player .artist,
#sonaar-player .album-info .artist,
#sonaar-player .audio-track-artist,
#sonaar-player .album-subtitle {
  color: var(--text-secondary) !important;
}

/* Playlist popup (the expanded queue) — track titles */
#sonaar-player .playlist .tracklist li,
#sonaar-player .playlist .tracklist li a,
#sonaar-player .playlist .tracklist .audio-track,
#sonaar-player .playlist .tracklist li .audio-track-artist {
  color: var(--text-primary) !important;
}

/* Currently playing track in the playlist popup — accent it */
#sonaar-player .playlist .tracklist li.active,
#sonaar-player .playlist .tracklist li.active a,
#sonaar-player .playlist .tracklist li.active .audio-track,
#sonaar-player .playlist .tracklist li.current,
#sonaar-player .playlist .tracklist li.current .audio-track {
  color: var(--accent-light) !important;
}

/* ==========================================================================
   "License All Favorites" — bulk cart CTA
   Rendered above the favorites grid via [bbm_license_all_favorites].
   ========================================================================== */

.bbm-license-all-wrap {
  background: var(--bg-card);
  background-image: var(--gradient-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-2xl);
  margin: 0 auto var(--space-2xl);
  max-width: 1100px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center; /* vertical center — button sits middle of its row */
  gap: var(--space-xl);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}

/* Subtle gradient sheen across the card */
.bbm-license-all-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 90% 50%, var(--accent-glow) 0%, transparent 60%);
  opacity: 0.5;
  pointer-events: none;
}

.bbm-license-all-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  z-index: 1;
}

.bbm-license-all-eyebrow {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent-light);
}

.bbm-license-all-text {
  font-family: var(--font-body);
  font-size: 1.1rem;
  color: var(--text-primary);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
}

.bbm-license-all-btn {
  display: inline-flex;
  align-items: center;
  align-self: center; /* vertically center within grid cell, regardless of info column height */
  gap: 12px;
  background: var(--gradient-accent);
  color: #fff !important;
  border: none;
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 16px 32px;
  cursor: pointer;
  transition: transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base), opacity var(--transition-base);
  box-shadow: var(--shadow-md), 0 0 0 0 var(--accent-glow);
  white-space: nowrap;
  position: relative;
  z-index: 1;
}

.bbm-license-all-btn:hover {
  background: var(--gradient-accent-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg), var(--shadow-glow);
}

.bbm-license-all-btn:active {
  transform: translateY(0);
}

.bbm-license-all-btn:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 3px;
}

.bbm-license-all-btn-icon {
  display: inline-flex;
  align-items: center;
  font-size: 0.95rem;
  opacity: 0.9;
}

.bbm-license-all-btn-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  font-size: 0.85rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0;
}

/* Loading state — disable interactions and show subtle pulse */
.bbm-license-all-btn.is-loading {
  cursor: progress;
  opacity: 0.85;
  animation: bbm-license-all-pulse 1.4s ease-in-out infinite;
}

.bbm-license-all-btn.is-loading .bbm-license-all-btn-icon i {
  animation: bbm-license-all-spin 800ms linear infinite;
}

.bbm-license-all-btn:disabled {
  cursor: not-allowed;
}

@keyframes bbm-license-all-pulse {
  0%, 100% { box-shadow: var(--shadow-md), 0 0 0 0 var(--accent-glow); }
  50%      { box-shadow: var(--shadow-lg), 0 0 0 12px transparent; }
}

@keyframes bbm-license-all-spin {
  to { transform: rotate(360deg); }
}

/* Feedback message below button (success / error) */
.bbm-license-all-feedback {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  font-size: 0.9rem;
  text-align: center;
  margin: 0;
  padding: 0;
}

.bbm-license-all-feedback:not(:empty) {
  margin-top: var(--space-md);
  padding: 10px 16px;
  border-radius: var(--radius-md);
}

.bbm-license-all-feedback.is-success {
  color: #86efac;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.bbm-license-all-feedback.is-error {
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Empty state — no favorites yet */
.bbm-license-all-empty {
  text-align: center;
  padding: var(--space-2xl) var(--space-md);
  margin: 0 auto var(--space-xl);
  max-width: 480px;
  background: var(--bg-card);
  background-image: var(--gradient-card);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
}

.bbm-license-all-empty p {
  color: var(--text-secondary);
  font-size: 1rem;
  margin: 0 0 var(--space-md);
}

.bbm-license-all-empty-link {
  display: inline-block;
  background: var(--gradient-accent);
  color: #fff !important;
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 12px 28px;
  text-decoration: none;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  box-shadow: var(--shadow-md);
}

.bbm-license-all-empty-link:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg), var(--shadow-glow);
}

/* Mobile — stack info above button */
@media (max-width: 720px) {
  .bbm-license-all-wrap {
    grid-template-columns: 1fr;
    text-align: center;
    padding: var(--space-lg) var(--space-md);
  }
  .bbm-license-all-info {
    align-items: center;
  }
  .bbm-license-all-btn {
    justify-content: center;
    width: 100%;
  }
}

/* ==========================================================================
   Sonaar — Make an Offer modal
   ========================================================================== */

/* Backdrop — dark blur overlay */
.sr_popup-backdrop,
.sr_popup-backdrop.sr_show {
  background: rgba(8, 8, 15, 0.78) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Dialog wrapper */
.sr_popup-dialog {
  z-index: 99999;
}

/* Card surface — compact */
.sr_popup-content {
  background: var(--bg-card) !important;
  background-image: var(--gradient-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg), var(--shadow-glow) !important;
  color: var(--text-primary) !important;
  width: calc(100% - 32px) !important;
  max-width: 460px !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  padding: var(--space-xl) var(--space-lg) !important;
}

/* Close (X) button */
.sr_popup-content .sr_close {
  color: var(--text-secondary) !important;
  opacity: 0.8;
  transition: color var(--transition-base), transform var(--transition-base), opacity var(--transition-base);
  top: var(--space-md) !important;
  right: var(--space-md) !important;
}
.sr_popup-content .sr_close:hover {
  color: var(--accent-light) !important;
  opacity: 1;
  transform: rotate(90deg);
}

/* Title — gradient headline */
.srp-popup-title {
  font-family: var(--font-display) !important;
  font-size: clamp(1.5rem, 3.5vw, 1.875rem) !important;
  font-weight: var(--font-weight-bold) !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 var(--space-xs) !important;
  line-height: 1.1;
}

/* Subtitle */
.srp-popup-desc {
  color: var(--text-secondary) !important;
  font-size: 0.85rem;
  margin: 0 0 var(--space-md) !important;
  line-height: 1.5;
}

/* Track preview row */
.srp-make-offer-heading {
  display: flex !important;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-md) !important;
}

/* Sonaar player widget — clamp to a square cover */
.srp-make-offer-heading article.iron_widget_radio {
  width: 88px !important;
  height: 88px !important;
  flex: 0 0 88px !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: var(--radius-md) !important;
}
.srp-make-offer-heading article.iron_widget_radio .album-art,
.srp-make-offer-heading article.iron_widget_radio .album-art a {
  width: 88px !important;
  height: 88px !important;
  position: relative !important;
  display: block !important;
}
.srp-make-offer-heading article.iron_widget_radio .album-art img {
  width: 88px !important;
  height: 88px !important;
  border-radius: var(--radius-md) !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
}

/* Center the play button over the cover, kill stray chrome */
.srp-make-offer-heading article.iron_widget_radio .srp-play-button,
.srp-make-offer-heading article.iron_widget_radio .srp_control_box {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
}
.srp-make-offer-heading article.iron_widget_radio .srp-play-circle {
  width: 44px !important;
  height: 44px !important;
}
.srp-make-offer-heading article.iron_widget_radio .srp_progressbar,
.srp-make-offer-heading article.iron_widget_radio .srp_wave_box,
.srp-make-offer-heading article.iron_widget_radio .srp_player_meta,
.srp-make-offer-heading article.iron_widget_radio .srp_noteButton,
.srp-make-offer-heading article.iron_widget_radio .currentTime,
.srp-make-offer-heading article.iron_widget_radio .duration {
  display: none !important;
}

/* Track title row */
.srp-make-offer-heading .srp-make-offer-product-info {
  flex: 1 1 auto;
  min-width: 0;
}
.srp-make-offer-heading .srp-make-offer-product-title,
.srp-make-offer-heading h2,
.srp-make-offer-heading h3 {
  font-family: var(--font-display) !important;
  font-size: 1.0625rem !important;
  font-weight: var(--font-weight-semibold) !important;
  color: var(--text-primary) !important;
  margin: 0 !important;
  line-height: 1.3;
}

/* Form — compact */
#make-offer-form,
.srp-popup-form--makeoffer form {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--space-md) !important;
}

/* Labels — light, small, tight */
.srp-popup-form--makeoffer label,
#make-offer-form label {
  display: block !important;
  font-family: var(--font-body) !important;
  font-size: 0.7rem !important;
  font-weight: var(--font-weight-semibold) !important;
  color: var(--text-primary) !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  margin: 0 0 4px !important;
}

/* Thank-you / confirmation popup */
div#sonaar-modal .srp-popup-form--confirm h3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.5vw, 1.875rem);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  margin: 0 0 var(--space-sm);
  line-height: 1.1;
}
div#sonaar-modal .srp-popup-form--confirm p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
}

/* Override Sonaar's modal CSS variables (defaults are dark text on light bg) */
#sonaar-modal,
#sonaar-modal .sr_popup-content {
  --srp-global-modal-form-input-color: var(--text-primary);
  --srp-global-modal-form-input-bg-color: var(--bg-secondary);
  --srp-global-modal-form-input-border-color: var(--border);
  --srp-global-modal-btn-txt-color: #fff;
  --srp-global-modal-btn-bg-color: transparent;
  --srp-global-modal-bg-color: var(--bg-card);
  --srp-global-modal-color: var(--text-primary);
}

/* Match Sonaar's specificity for inputs */
#sonaar-modal .sr_popup-content .srp-popup-form input,
#sonaar-modal .sr_popup-content .srp-popup-form textarea,
#sonaar-modal .sr_popup-content .srp-popup-form select {
  color: var(--text-primary) !important;
  background: var(--bg-secondary) !important;
  border-color: var(--border) !important;
}
#sonaar-modal .sr_popup-content .srp-popup-form input:-webkit-autofill,
#sonaar-modal .sr_popup-content .srp-popup-form textarea:-webkit-autofill {
  color: var(--text-primary) !important;
  -webkit-text-fill-color: var(--text-primary) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--bg-secondary) inset !important;
}

/* Inputs + textarea — tighter */
#make-offer-form input,
#make-offer-form textarea,
.srp-popup-form--makeoffer input,
.srp-popup-form--makeoffer textarea {
  width: 100% !important;
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-body) !important;
  font-size: 0.95rem !important;
  padding: 10px 12px !important;
  transition: border-color var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
  margin: 0 !important;
}
#make-offer-form textarea,
.srp-popup-form--makeoffer textarea {
  min-height: 80px !important;
  resize: vertical !important;
  line-height: 1.5;
}
#make-offer-form input::placeholder,
#make-offer-form textarea::placeholder {
  color: var(--text-muted);
}
#make-offer-form input:hover,
#make-offer-form textarea:hover {
  border-color: var(--border-hover) !important;
  background: var(--bg-tertiary) !important;
}
#make-offer-form input:focus,
#make-offer-form textarea:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  background: var(--bg-tertiary) !important;
  box-shadow: 0 0 0 3px var(--accent-glow) !important;
}

/* Submit ("Send offer") — compact pill */
#make-offer-form button[type="submit"],
.srp-popup-form--makeoffer button[type="submit"] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: var(--gradient-accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-full) !important;
  font-family: var(--font-display) !important;
  font-size: 0.875rem !important;
  font-weight: var(--font-weight-semibold) !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  height: 44px !important;
  padding: 0 28px !important;
  margin-top: 4px !important;
  cursor: pointer;
  transition: transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
  box-shadow: var(--shadow-md) !important;
  width: auto !important;
}
#make-offer-form button[type="submit"]:hover,
.srp-popup-form--makeoffer button[type="submit"]:hover {
  background: var(--gradient-accent-hover) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg), var(--shadow-glow) !important;
}

/* Mobile */
@media (max-width: 640px) {
  .sr_popup-content {
    padding: var(--space-lg) var(--space-md) !important;
    margin: var(--space-md) !important;
  }
  .srp-make-offer-heading article.iron_widget_radio,
  .srp-make-offer-heading article.iron_widget_radio .album-art,
  .srp-make-offer-heading article.iron_widget_radio .album-art a,
  .srp-make-offer-heading article.iron_widget_radio .album-art img {
    width: 72px !important;
    height: 72px !important;
    flex-basis: 72px !important;
  }
  #make-offer-form button[type="submit"],
  .srp-popup-form--makeoffer button[type="submit"] {
    width: 100% !important;
  }
}

/* ==========================================================================
   Favorites page — minimal scoped tweaks
   Scoped to .page-favorites so they don't leak to shop / archives / etc.
   ========================================================================== */

/* Hide Sonaar's generic "Sorry, no results / try another keyword" empty
   state on the favorites page. It's misleading copy for this context —
   the user didn't search, they have no favorites yet. The bbm_license_all_
   favorites card below already gives proper empty-state messaging
   ("Heart a beat to start saving your list"), so Sonaar's message is
   pure noise here.

   Scoped to .page-template-page-favorites (WP-generated body class
   from page-favorites.php) so the same Sonaar empty state still shows
   on the smart search page where "no results / try another keyword"
   actually makes sense. */
.page-template-page-favorites .srp_notfound,
.page-favorites .srp_notfound {
  display: none !important;
}

/* 1. Bigger cover thumbnail in the favorites list (default ~45px → 90px) */
.page-favorites .sr_track_cover,
.page-favorites .iron-audioplayer .sr_track_cover {
  width: 90px !important;
  min-width: 90px !important;
  height: 90px !important;
}

.page-favorites .sr_track_cover img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

/* 2. Force light track titles even when active/playing.
      Sonaar marks the active row with class `.selected` (NOT current/active/
      playing as in some other layouts) AND applies an inline
      `background-color: rgb(204,204,204)` style. We override both the
      class-based bg and the descendant text color. */
.page-favorites .iron-audioplayer li.selected,
.page-favorites .iron-audioplayer li.selected *,
.page-favorites .iron-audioplayer li.selected .audio-track,
.page-favorites .iron-audioplayer li.selected .audio-track-end,
.page-favorites .iron-audioplayer li.selected a,
.page-favorites .iron-audioplayer li.selected span:not(.bbm-license-all-eyebrow):not(.bbm-license-all-text):not(.eyebrow),
.page-favorites .iron-audioplayer .audio-track {
  color: var(--text-primary) !important;
}

/* 3. Force dark background on the active row. Inline style on the li is
      `background-color: rgb(204,204,204)` (no !important on inline) — our
      !important rule below wins.  Also covers other state class variants
      Sonaar might use (current/active/playing) defensively. */
.page-favorites .iron-audioplayer li.selected,
.page-favorites .iron-audioplayer li.sr-playlist-item.selected,
.page-favorites .iron-audioplayer .playlist li.current,
.page-favorites .iron-audioplayer .playlist li.active,
.page-favorites .iron-audioplayer .playlist li.playing {
  background: var(--bg-tertiary) !important;
  background-color: var(--bg-tertiary) !important;
  background-image: none !important;
}

/* Subtle accent left-border on the active row so it's clearly "now playing"
 * without needing a light background. */
.page-favorites .iron-audioplayer li.selected,
.page-favorites .iron-audioplayer .playlist li.current,
.page-favorites .iron-audioplayer .playlist li.active,
.page-favorites .iron-audioplayer .playlist li.playing {
  border-left: 3px solid var(--accent) !important;
  box-shadow: inset 0 0 0 0 transparent !important;
}

/* ==========================================================================
   Sonaar Share Track popup — themed to match site modal aesthetic
   Card surface comes from the .sr_popup-content base styles above;
   below we polish the share-specific innards: gradient title, themed
   social icons, branded copy button, generous spacing.
   ========================================================================== */

/* All text inside the share modal — light by default */
.srp-modal-share,
.srp-modal-share * {
  color: var(--text-primary);
}

/* Tighter share-modal card — auto-height, snug interior gaps so the
 * popup doesn't have excess vertical empty space. */
.sr_popup-content:has(.srp-modal-share) {
  padding: var(--space-lg) var(--space-lg) !important;
  height: auto !important;
  min-height: 0 !important;
  max-width: 440px !important;
}

.srp-modal-share {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: 0;
}

/* Headline — gradient accent matching contact / sign-up page titles */
.srp-modal-share .srp-share-title {
  font-family: var(--font-display) !important;
  font-size: clamp(1.5rem, 3vw, 1.85rem) !important;
  font-weight: var(--font-weight-bold) !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent !important; /* Safari fallback */
  margin: 0;
  line-height: 1.1;
  text-align: center;
}

/* Track info row — cover thumb + title side-by-side */
.srp-modal-share .srp-share-trackinfo-container {
  display: flex !important;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.srp-modal-share .srp-share-img {
  width: 60px !important;
  height: 60px !important;
  border-radius: var(--radius-md);
  object-fit: cover;
  flex-shrink: 0;
}

.srp-modal-share .srp-share-tracktitle {
  color: var(--text-primary) !important;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.3px;
  line-height: 1.3;
  margin: 0;
}

/* "FULL URL" label — eyebrow style */
.srp-modal-share .srp-modal-linkurl-label {
  display: block;
  color: var(--accent-light) !important;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 0 0 var(--space-sm);
}

/* URL input row — themed dark field with gradient copy button.
 * Explicit dark bg with !important so browser defaults / autofill /
 * any Sonaar inline styles can't render the field as light. */
.srp-modal-share .srp-modal-linkurl-input-container {
  display: flex !important;
  align-items: stretch;
  gap: 6px;
  background: var(--bg-secondary) !important;
  background-color: var(--bg-secondary) !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  padding: 4px 4px 4px 14px;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.srp-modal-share .srp-modal-linkurl-input-container:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.srp-modal-share .srp-modal-linkurl-input-container i.fa-link,
.srp-modal-share .srp-modal-linkurl-input-container .fas {
  color: var(--text-muted) !important;
  align-self: center;
  margin-right: 8px;
  font-size: 0.95rem;
}

.srp-modal-share .srp-modal-linkurl-input-container input,
.srp-modal-share #myInput {
  flex: 1;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  color: var(--text-primary) !important;
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 8px 4px !important;
  outline: none !important;
  min-width: 0;
  box-shadow: none !important;
}

/* Kill browser autofill white background on the URL field */
.srp-modal-share .srp-modal-linkurl-input-container input:-webkit-autofill,
.srp-modal-share #myInput:-webkit-autofill {
  -webkit-text-fill-color: var(--text-primary) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--bg-secondary) inset !important;
  caret-color: var(--text-primary) !important;
}

/* Copy button — branded gradient pill */
.srp-modal-share #copyButton,
.srp-modal-share .srp_button {
  background: var(--gradient-accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-display) !important;
  font-size: 0.85rem !important;
  font-weight: var(--font-weight-semibold) !important;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 8px 18px !important;
  cursor: pointer;
  transition: transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
  white-space: nowrap;
  flex-shrink: 0;
}

.srp-modal-share #copyButton:hover,
.srp-modal-share .srp_button:hover {
  background: var(--gradient-accent-hover) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md), var(--shadow-glow);
}

/* "Share current page with sticky player ready" checkbox row */
.srp-modal-share .srp-share-stickyplayer,
.srp-modal-share .srp-share-stickyplayer-container {
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.srp-modal-share .srp-share-stickyplayer-label,
.srp-modal-share label {
  color: var(--text-secondary) !important;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  margin: 0;
}

.srp-modal-share input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  margin: 0;
  cursor: pointer;
}

/* Social media share row — Facebook / WhatsApp / X / Email */
.srp-modal-share .srp-share-social,
.srp-modal-share .srp-share-social-container {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
  margin: 0;
}

.srp-modal-share .srp-share-social a,
.srp-modal-share a[class*="srp-share-"]:not(.srp-share-mobile-more) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text-secondary) !important;
  font-size: 1rem;
  text-decoration: none;
  transition: all var(--transition-base);
}

.srp-modal-share .srp-share-social a:hover,
.srp-modal-share a[class*="srp-share-"]:not(.srp-share-mobile-more):hover {
  color: var(--accent-light) !important;
  background: var(--bg-tertiary);
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md), var(--shadow-glow);
}

.srp-modal-share .srp-share-social a i,
.srp-modal-share a[class*="srp-share-"] i {
  color: inherit !important;
}

/* Favorites page — skeleton loader shown until Sonaar finishes its AJAX
   playlist fetch. Reserves space so the page doesn't reflow when tracks
   render, and gives the user explicit "Loading…" feedback. */
.page-favorites .page-favorites__player {
  position: relative;
  min-height: 240px;
}

.page-favorites .page-favorites__loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
  color: var(--text-secondary);
  font-size: 0.95rem;
  pointer-events: none;
  z-index: 0;
}

/* Hide loader instantly (no fade) so it can't overlap the player reveal */
.page-favorites .page-favorites__loader.is-hidden {
  display: none;
}

/* Hold the Sonaar player invisible WHILE the loader is up — only for
 * guest sessions where Sonaar fetches favorites via AJAX. Logged-in
 * users render server-side and don't get this hold (no .is-loading
 * class). JS adds .is-ready on the wrapper *after* the loader is
 * removed → player fades in cleanly with no overlap. */
.page-favorites .page-favorites__player.is-loading .iron-audioplayer {
  opacity: 0 !important;
  transition: opacity 280ms ease;
}

.page-favorites .page-favorites__player.is-loading.is-ready .iron-audioplayer {
  opacity: 1 !important;
}

.page-favorites .page-favorites__loader p {
  margin: 0;
  letter-spacing: 0.3px;
}

.page-favorites .page-favorites__spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255, 255, 255, 0.12);
  border-top-color: var(--accent-light);
  border-radius: 50%;
  animation: page-favorites-spin 800ms linear infinite;
}

@keyframes page-favorites-spin {
  to { transform: rotate(360deg); }
}

/* ==========================================================================
   Favorites — guest email-capture funnel ([bbm_favorites_signup])
   Same visual surface as .bbm-license-all-wrap so the CTA card looks
   identical regardless of whether the visitor is logged in or out —
   only the contents differ (email field vs. bulk License button).
   ========================================================================== */

.bbm-fav-signup-wrap {
  background: var(--bg-card);
  background-image: var(--gradient-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-2xl);
  margin: 0 auto var(--space-2xl);
  max-width: 720px;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
  text-align: center;
}

.bbm-fav-signup-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, var(--accent-glow) 0%, transparent 70%);
  opacity: 0.4;
  pointer-events: none;
}

.bbm-fav-signup-info {
  position: relative;
  z-index: 1;
  margin-bottom: var(--space-lg);
}

.bbm-fav-signup-eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: var(--space-md);
}

.bbm-fav-signup-text {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text-primary);
  margin: 0 auto;
  max-width: 480px;
}

/* Email + button row */
.bbm-fav-signup-form {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.bbm-fav-signup-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  max-width: 540px;
  margin: 0 auto;
}

.bbm-fav-signup-input {
  flex: 1;
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-full) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-body);
  font-size: 1rem !important;
  padding: 14px 22px !important;
  transition: border-color var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  margin: 0 !important;
}

.bbm-fav-signup-input::placeholder {
  color: var(--text-muted);
}

.bbm-fav-signup-input:hover {
  border-color: var(--border-hover) !important;
}

.bbm-fav-signup-input:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  background: var(--bg-tertiary) !important;
  box-shadow: 0 0 0 3px var(--accent-glow) !important;
}

.bbm-fav-signup-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center;
  gap: 8px;
  background: var(--gradient-accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-full) !important;
  font-family: var(--font-display) !important;
  font-size: 0.95rem !important;
  font-weight: var(--font-weight-semibold) !important;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 14px 28px !important;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
  box-shadow: var(--shadow-md);
  margin: 0 !important;
}

.bbm-fav-signup-btn:hover {
  background: var(--gradient-accent-hover) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg), var(--shadow-glow);
  color: #fff !important;
}

.bbm-fav-signup-btn:active {
  transform: translateY(0);
}

.bbm-fav-signup-btn:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 3px;
}

.bbm-fav-signup-btn-arrow {
  display: inline-block;
  transition: transform var(--transition-base);
}

.bbm-fav-signup-btn:hover .bbm-fav-signup-btn-arrow {
  transform: translateX(3px);
}

/* "Already have an account?" link below the form */
.bbm-fav-signup-altlink {
  position: relative;
  z-index: 1;
  text-align: center;
  margin: var(--space-md) 0 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.bbm-fav-signup-altlink a {
  color: var(--accent-light);
  font-weight: var(--font-weight-semibold);
  margin-left: 4px;
  text-decoration: none;
  transition: color var(--transition-base);
}

.bbm-fav-signup-altlink a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* Empty state — guest with zero favorites */
.bbm-favorites-empty {
  text-align: center;
  padding: var(--space-2xl) var(--space-md);
  margin: 0 auto var(--space-xl);
  max-width: 480px;
  background: var(--bg-card);
  background-image: var(--gradient-card);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
}

.bbm-favorites-empty p {
  color: var(--text-secondary);
  font-size: 1rem;
  margin: 0 0 var(--space-md);
}

.bbm-favorites-empty-link {
  display: inline-block;
  background: var(--gradient-accent);
  color: #fff !important;
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 12px 28px;
  text-decoration: none;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  box-shadow: var(--shadow-md);
}

.bbm-favorites-empty-link:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg), var(--shadow-glow);
}

/* Mobile — stack input + button */
@media (max-width: 540px) {
  .bbm-fav-signup-wrap {
    padding: var(--space-lg) var(--space-md);
  }
  .bbm-fav-signup-row {
    flex-direction: column;
    gap: 10px;
  }
  .bbm-fav-signup-btn {
    width: 100%;
  }
}

/* ==========================================================================
   License-All card mode variants
   - .bbm-license-all-wrap--message → only headline + copy (top of page)
   - .bbm-license-all-wrap--button  → only button (bottom of page)
   ========================================================================== */

/* Top message card — text block sits centered within the card so the
 * readable line length (max 760px) doesn't leave an unbalanced gap on
 * the right. Text remains left-aligned within its block for natural
 * scan rhythm. */
.bbm-license-all-wrap.bbm-license-all-wrap--message {
  display: flex;
  justify-content: center;
  text-align: left;
  padding: var(--space-xl) var(--space-2xl);
  max-width: 1100px;
  margin: 0 auto var(--space-2xl);
}

.bbm-license-all-wrap--message .bbm-license-all-info {
  max-width: 760px;
  width: 100%;
}

/* Bottom button card — center the button, modest padding, no info column */
.bbm-license-all-wrap.bbm-license-all-wrap--button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--space-xl) var(--space-2xl);
  max-width: 720px;
  margin: var(--space-2xl) auto 0;
}

.bbm-license-all-wrap--button .bbm-license-all-btn {
  align-self: center;
}

/* Spacing wrappers for the message + button sections in page-favorites.php */
.page-favorites__message {
  margin: 0 0 var(--space-xl);
}

@media (max-width: 720px) {
  .bbm-license-all-wrap.bbm-license-all-wrap--message,
  .bbm-license-all-wrap.bbm-license-all-wrap--button {
    padding: var(--space-lg) var(--space-md);
  }
}


/* CTA "thinking" state — shown while AJAX fetches the AI message.
   The fallback text stays in the DOM (so the layout is reserved and
   screen-readers see something) but is blurred + dimmed; a soft
   "Reading your list…" indicator overlays it. When AJAX returns, JS
   swaps the text BEHIND the blur, then the blur clears — the user
   only ever sees the final message reveal cleanly, never a jarring
   text-to-text swap. */

.bbm-license-all-wrap.is-thinking {
  position: relative;
}

.bbm-license-all-wrap .bbm-license-all-info {
  transition: filter 480ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

.bbm-license-all-wrap.is-thinking .bbm-license-all-info {
  filter: blur(7px);
  opacity: 0.35;
  user-select: none;
  pointer-events: none;
}

/* The thinking overlay — centered "Reading your list…" with subtle pulse */
.bbm-cta-thinking {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  z-index: 2;
  pointer-events: none;
  transition: opacity 320ms ease;
}

.bbm-license-all-wrap:not(.is-thinking) .bbm-cta-thinking {
  opacity: 0;
  visibility: hidden;
}

.bbm-cta-thinking-label {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent-light);
  animation: bbm-cta-thinking-text 1.6s ease-in-out infinite;
}

@keyframes bbm-cta-thinking-text {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* Soft pulsing accent dot beside the label — reads as the system
 * thinking, not a generic spinner. */
.bbm-cta-thinking-pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  position: relative;
  animation: bbm-cta-thinking-pulse-core 1.6s ease-in-out infinite;
}

.bbm-cta-thinking-pulse::before,
.bbm-cta-thinking-pulse::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  opacity: 0;
  animation: bbm-cta-thinking-pulse-ring 1.6s ease-out infinite;
}

.bbm-cta-thinking-pulse::after {
  animation-delay: 0.55s;
}

@keyframes bbm-cta-thinking-pulse-core {
  0%, 100% { transform: scale(1);   box-shadow: 0 0 12px var(--accent); }
  50%      { transform: scale(1.25); box-shadow: 0 0 20px var(--accent); }
}

@keyframes bbm-cta-thinking-pulse-ring {
  0%   { transform: scale(1);   opacity: 0.8; }
  80%  { transform: scale(2.4); opacity: 0;   }
  100% { transform: scale(2.4); opacity: 0;   }
}

/* ==========================================================================
   Bundle discount offer card — sits between the tracks and the
   License-All button on /favorites/. Same surface as the personalized
   AI message card up top so the page reads as one coherent flow.
   ========================================================================== */

.bbm-bundle-offer-wrap {
  background: var(--bg-card);
  background-image: var(--gradient-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-2xl);
  margin: 0 auto var(--space-2xl);
  max-width: 1100px; /* match the personalized message card up top */
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
  text-align: center;
}

.page-favorites__bundle {
  margin: var(--space-2xl) 0;
}

/* Two-step action row: [Get Code]  [License All Favorites].
   Step 1 (code) left, Step 2 (license all) right. Mental model: get
   the deal, then move the beats to cart. */
.bbm-bundle-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin: 0 auto;
}

.bbm-bundle-step {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bbm-bundle-step--code {
  flex: 0 0 auto;
}

/* Neutralize the License All shortcode's wrapper chrome when it sits
 * inside the bundle card — the bundle card IS the surface; the inner
 * shortcode just contributes its button. */
.bbm-bundle-step--license .bbm-license-all-wrap {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.bbm-bundle-step--license .bbm-license-all-wrap::before {
  display: none !important;
}

.bbm-bundle-step--license .bbm-license-all-feedback {
  position: absolute;
  bottom: -2.2em;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  margin: 0;
}

.bbm-bundle-offer-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, var(--accent-glow) 0%, transparent 70%);
  opacity: 0.4;
  pointer-events: none;
}

.bbm-bundle-offer-info {
  position: relative;
  z-index: 1;
  margin-bottom: var(--space-lg);
}

.bbm-bundle-offer-eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: var(--space-md);
}

.bbm-bundle-offer-text {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text-primary);
  margin: 0 auto;
  max-width: 480px;
}

/* Active code display — the user's bundle code, shown whenever the
 * /project/ card renders (codes are minted externally; the card only
 * appears for logged-in users who already hold one). */
.bbm-bundle-code-display {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hidden meta line below the action row — only visible once code exists */
.bbm-bundle-code-meta[hidden] { display: none; }

.bbm-bundle-code-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 6px 6px 6px 22px;
  min-width: 320px;
}

.bbm-bundle-code {
  flex: 1;
  align-self: center;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 2px;
  color: var(--accent-light);
  background: transparent;
  user-select: all;
}

.bbm-bundle-code-copy {
  background: var(--gradient-accent);
  color: #fff !important;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 10px 18px;
  cursor: pointer;
  transition: transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
  white-space: nowrap;
}

.bbm-bundle-code-copy:hover {
  background: var(--gradient-accent-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md), var(--shadow-glow);
}

.bbm-bundle-code-meta {
  position: relative;
  z-index: 1;
  margin: var(--space-md) auto 0;
  color: var(--text-secondary);
  font-size: 0.85rem;
  letter-spacing: 0.3px;
}

/* (.bbm-bundle-code-cart removed — Step 2 button "License All Favorites"
 * inside the same card now serves the same purpose.) */

/* Feedback line below — copy success / error */
.bbm-bundle-offer-feedback {
  position: relative;
  z-index: 1;
  margin: var(--space-md) 0 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
  min-height: 1.2em;
  transition: opacity var(--transition-base);
}

.bbm-bundle-offer-feedback.is-success {
  color: #86efac;
}

.bbm-bundle-offer-feedback.is-error {
  color: #fca5a5;
}

/* Mobile — stack the code display and License-All button vertically
 * under 720px so neither has to scrunch. */
@media (max-width: 720px) {
  .bbm-bundle-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .bbm-bundle-step {
    width: 100%;
  }
  .bbm-bundle-step--license .bbm-license-all-btn {
    width: 100%;
    justify-content: center;
  }
  .bbm-bundle-code-row {
    min-width: 0;
    width: 100%;
  }
  .bbm-bundle-step--license .bbm-license-all-feedback {
    position: static;
    transform: none;
    margin-top: var(--space-sm);
  }
}

@media (max-width: 540px) {
  .bbm-bundle-offer-wrap {
    padding: var(--space-lg) var(--space-md);
  }
  .bbm-bundle-code-row {
    flex-direction: column;
    padding: 12px;
    border-radius: var(--radius-md);
  }
  .bbm-bundle-code-copy {
    width: 100%;
  }
}

/* =========================================================================
   WooCommerce Blocks — Cart & Checkout dark-theme overrides
   -------------------------------------------------------------------------
   The new block-based Cart/Checkout (introduced via the cart/checkout block
   shortcodes) ships its own light-theme inputs that ignore the classic-cart
   styles above. We re-skin the inputs, coupon box and order summary so the
   experience matches the rest of the dark site.
   ========================================================================= */

/* Inputs — coupon entry, email, name, address, phone, ZIP, etc. */
.wc-block-components-text-input input.wc-block-components-text-input,
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-address-form input,
.wc-block-components-country-input input,
.wc-block-components-state-input input,
.wc-block-components-totals-coupon input,
.wc-block-components-totals-coupon__input input,
.wc-block-checkout input[type="text"],
.wc-block-checkout input[type="email"],
.wc-block-checkout input[type="tel"],
.wc-block-cart input[type="text"] {
  background-color: var(--surface-2, #11131a) !important;
  color: var(--text, #f1f3f8) !important;
  border: 1px solid var(--border, rgba(255,255,255,.12)) !important;
  border-radius: var(--radius-md, 10px) !important;
  -webkit-text-fill-color: var(--text, #f1f3f8) !important;
}

.wc-block-components-text-input input:focus,
.wc-block-components-totals-coupon input:focus,
.wc-block-components-address-form input:focus,
.wc-block-checkout input:focus {
  border-color: var(--accent, #7c5cfc) !important;
  box-shadow: 0 0 0 3px rgba(124, 92, 252, .25) !important;
  outline: none !important;
}

/* Floating labels inside inputs (the "Email address" / "Enter code" labels) */
.wc-block-components-text-input label,
.wc-block-components-checkout-step label,
.wc-block-components-totals-coupon label {
  color: var(--text-dim, rgba(241,243,248,.65)) !important;
}

.wc-block-components-text-input.is-active label,
.wc-block-components-text-input:focus-within label {
  color: var(--accent, #7c5cfc) !important;
}

/* Select dropdowns (Country/Region, State) */
.wc-block-components-combobox input,
.wc-block-components-select select,
.wc-block-components-country-input select,
.wc-block-components-state-input select {
  background-color: var(--surface-2, #11131a) !important;
  color: var(--text, #f1f3f8) !important;
  border: 1px solid var(--border, rgba(255,255,255,.12)) !important;
  border-radius: var(--radius-md, 10px) !important;
}
/* The chevron icon inside the select */
.wc-block-components-select::after,
.wc-block-components-combobox::after {
  color: var(--text-dim, rgba(241,243,248,.65)) !important;
}

/* Coupon collapsible panel ("Add coupons" toggle) */
.wc-block-components-totals-coupon,
.wc-block-components-panel,
.wc-block-components-panel__button {
  color: var(--text, #f1f3f8) !important;
  background: transparent !important;
}
.wc-block-components-panel__button:hover {
  color: var(--accent, #7c5cfc) !important;
}
.wc-block-components-panel__button .wc-block-components-panel__button-icon {
  fill: var(--text-dim, rgba(241,243,248,.65)) !important;
}

/* Apply button — match accent button styling */
.wc-block-components-totals-coupon__button,
.wc-block-components-button.wc-block-components-totals-coupon__button {
  color: var(--text, #f1f3f8) !important;
  background: transparent !important;
}
.wc-block-components-totals-coupon__button:hover {
  color: var(--accent, #7c5cfc) !important;
}

/* Checkbox controls (license agreement, "Add a note", etc.) — make the
   check glyph white so it's visible on the dark themed checkbox fill.
   WC Blocks renders the check as an inline SVG with stroke="currentColor"
   that defaults to a near-black color. We override to white. */
.wc-block-components-checkbox__mark,
.wc-block-components-checkbox .wc-block-components-checkbox__mark,
.wc-block-checkout .wc-block-components-checkbox__mark {
  color: #fff !important;
  fill: #fff !important;
  stroke: #fff !important;
}
.wc-block-components-checkbox__mark path {
  stroke: #fff !important;
  fill: none !important;
}
/* When checked, give the checkbox box itself an accent fill so the white
   check sits on a visible background (instead of transparent on dark). */
.wc-block-components-checkbox input[type="checkbox"]:checked + .wc-block-components-checkbox__mark,
.wc-block-components-checkbox input[type="checkbox"]:checked ~ .wc-block-components-checkbox__mark {
  background: var(--accent, #7c5cfc) !important;
  border-color: var(--accent, #7c5cfc) !important;
}

/* Place Order button — turn the bare-text checkout submit into a
   prominent primary CTA. At our price point the buyer should never
   miss the action; we match the gradient pill style used by the
   product-page Make Offer / Add to Cart buttons so the funnel feels
   consistent. */
.wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-checkout-actions-block button[type="submit"],
.wc-block-components-button.wc-block-components-checkout-place-order-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 52px !important;
  padding: 14px 36px !important;
  background: linear-gradient(135deg, var(--accent, #7c5cfc), var(--accent-2, #22d3ee)) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--radius-md, 10px) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  box-shadow: 0 6px 24px rgba(124, 92, 252, .35) !important;
  cursor: pointer !important;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease !important;
}
.wc-block-components-checkout-place-order-button:hover,
.wp-block-woocommerce-checkout-actions-block button[type="submit"]:hover,
.wc-block-components-checkout-place-order-button:focus-visible {
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 32px rgba(124, 92, 252, .5) !important;
  filter: brightness(1.06) !important;
  outline: none !important;
  color: #fff !important;
}
.wc-block-components-checkout-place-order-button:active {
  transform: translateY(0) !important;
  box-shadow: 0 4px 16px rgba(124, 92, 252, .35) !important;
}
.wc-block-components-checkout-place-order-button:disabled,
.wc-block-components-checkout-place-order-button[disabled] {
  opacity: .55 !important;
  cursor: not-allowed !important;
  transform: none !important;
}
.wc-block-components-checkout-place-order-button .wc-block-components-button__text {
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
}

/* Make the actions row stretch the full form-column width so "Return
   to Cart" anchors to the far left while "Place Order" anchors to the
   far right. WC Blocks wraps the row in a container plus an inner flex
   wrapper — we force both to 100% width and split-justify the contents. */
.wp-block-woocommerce-checkout-actions-block {
  width: 100% !important;
  padding: 8px 0 !important;
}
.wp-block-woocommerce-checkout-actions-block > div,
.wp-block-woocommerce-checkout-actions-block > .wp-block-buttons,
.wp-block-woocommerce-checkout-actions-block .wc-block-components-checkout-place-order-button-wrapper,
.wp-block-woocommerce-checkout-actions-block-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}
/* Belt-and-suspenders: force the return-to-cart link to the left edge
   and the place-order button to the right edge regardless of how WC
   Blocks groups them in their inner wrapper. */
.wc-block-components-checkout-return-to-cart-button {
  margin-right: auto !important;
  color: var(--text-dim, rgba(241,243,248,.7)) !important;
  text-decoration: none !important;
  font-size: 14px !important;
}
.wc-block-components-checkout-return-to-cart-button:hover {
  color: var(--text, #f1f3f8) !important;
}
.wc-block-components-checkout-place-order-button {
  margin-left: auto !important;
}

/* Validation / error messages under inputs */
.wc-block-components-validation-error,
.wc-block-components-totals-coupon__content .wc-block-components-validation-error {
  color: #ff8a8a !important;
}
.wc-block-components-validation-error svg,
.wc-block-components-notice-banner__content svg {
  fill: #ff8a8a !important;
}

/* Applied coupon chip ("bbm-1-eva4xl ✕") */
.wc-block-components-chip,
.wc-block-components-totals-coupon-link {
  background-color: var(--surface-2, #11131a) !important;
  color: var(--text, #f1f3f8) !important;
  border: 1px solid var(--border, rgba(255,255,255,.12)) !important;
}
.wc-block-components-chip__remove {
  color: var(--text-dim, rgba(241,243,248,.65)) !important;
}
.wc-block-components-chip__remove:hover {
  color: var(--accent, #7c5cfc) !important;
}

/* Order Summary card — only the OUTERMOST wrapper gets the bordered
   card chrome. Inner sections (items list, coupons panel, totals
   wrapper) inherit the transparent surface so the whole panel reads
   as a single rounded card, not a stack. */
.wc-block-cart__sidebar,
.wp-block-woocommerce-checkout-order-summary-block {
  background: var(--surface-1, #0c0e14) !important;
  color: var(--text, #f1f3f8) !important;
  border: 1px solid var(--border, rgba(255,255,255,.08)) !important;
  border-radius: var(--radius-lg, 14px) !important;
}
.wc-block-components-totals-wrapper,
.wc-block-components-order-summary {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Quantity badge — the small white circle on each line-item thumbnail.
   WC Blocks renders the quantity number in a default text color that
   matches the page background on dark themes (white-on-white →
   invisible). Force dark text so the "1" / "2" / etc. is legible. */
.wc-block-components-order-summary-item__quantity,
.wc-block-cart-item__quantity,
.wc-block-components-product-badge {
  color: #11131a !important;
  background: #fff !important;
  font-weight: 700 !important;
}
.wc-block-components-order-summary-item__quantity *,
.wc-block-cart-item__quantity *,
.wc-block-components-product-badge * {
  color: #11131a !important;
}

/* Strip borders + horizontal rules between line items inside the order
   summary. Per-row borders on a dark theme read as visual noise. */
.wc-block-components-order-summary,
.wc-block-components-order-summary-item,
.wc-block-components-order-summary__content,
.wc-block-components-totals-wrapper,
.wc-block-components-totals-item,
.wc-block-components-panel,
.wc-block-components-panel__button {
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
/* The summary's own item dividers (rendered via ::before / ::after
   pseudo-elements in some WC Blocks versions). */
.wc-block-components-order-summary-item::before,
.wc-block-components-order-summary-item::after,
.wc-block-components-totals-wrapper::before,
.wc-block-components-totals-wrapper::after {
  display: none !important;
  content: none !important;
}
.wc-block-components-totals-item,
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item,
.wc-block-components-product-name,
.wc-block-components-product-metadata,
.wc-block-components-order-summary-item__description {
  color: var(--text, #f1f3f8) !important;
}
.wc-block-components-totals-item__description,
.wc-block-cart-item__total-price-and-sale-badge-wrapper {
  color: var(--text-dim, rgba(241,243,248,.7)) !important;
}

/* Cart items table */
.wc-block-cart-items,
.wc-block-cart-items__header,
.wc-block-cart-items__row,
.wc-block-cart-item__wrap,
.wc-block-checkout__main {
  background: transparent !important;
  color: var(--text, #f1f3f8) !important;
}
.wc-block-cart-items__header th,
.wc-block-components-product-details {
  color: var(--text-dim, rgba(241,243,248,.7)) !important;
}

/* Section headings inside checkout (Contact information, Billing, etc.) */
.wc-block-components-title,
.wc-block-components-checkout-step__title {
  color: var(--text, #f1f3f8) !important;
}
.wc-block-components-checkout-step__description {
  color: var(--text-dim, rgba(241,243,248,.7)) !important;
}

/* Payment method radio cards */
.wc-block-components-radio-control__option,
.wc-block-components-payment-method-label {
  color: var(--text, #f1f3f8) !important;
}
.wc-block-components-radio-control__option {
  border-color: var(--border, rgba(255,255,255,.12)) !important;
  background-color: var(--surface-2, #11131a) !important;
  border-radius: var(--radius-md, 10px) !important;
}
.wc-block-components-radio-control__option--checked,
.wc-block-components-radio-control__option:has(input:checked) {
  border-color: var(--accent, #7c5cfc) !important;
}

/* License preview link on single product page (between trust badges and price) */
.bbm-license-preview-link {
  margin: 6px 0 14px;
  font-size: 13px;
}
.bbm-license-preview-link a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-dim, rgba(241,243,248,.7));
  text-decoration: none;
  border-bottom: 1px dashed var(--border, rgba(255,255,255,.2));
  padding-bottom: 1px;
  transition: color .15s ease, border-color .15s ease;
}
.bbm-license-preview-link a:hover {
  color: var(--accent, #7c5cfc);
  border-color: var(--accent, #7c5cfc);
}

/* =========================================================================
   Sonaar [sonaar_license] block — single product page
   -------------------------------------------------------------------------
   Sonaar renders its own license card with the licence post's term metas.
   We restyle their .srp_* classes to match the dark theme and replace our
   former "trust badges" bullet list. The 5 marketing items previously
   hard-coded in PHP now live as meta entries on the Exclusive license
   post (#42), so this is the single source of truth for what's listed.
   ========================================================================= */
.bbm-license-preview {
  margin: 14px 0 22px;
}

/* "Exclusive" heading — hide. The product title above is sufficient
   context; this would otherwise read as a redundant page heading. */
.bbm-license-preview .srp_term_title {
  display: none;
}

/* Single-column list, similar layout to the prior trust-badges block. */
.bbm-license-preview .srp_variant_terms_container,
.bbm-license-preview .srp_variant_terms {
  background: transparent;
  padding: 0;
  border: 0;
}
.bbm-license-preview .srp_term_meta_list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 8px 22px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  align-items: start !important; /* keep 1-line cells anchored to top of taller rows */
}
@media (max-width: 600px) {
  .bbm-license-preview .srp_term_meta_list {
    grid-template-columns: 1fr;
  }
}
.bbm-license-preview .srp_term_meta {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  color: var(--text, #f1f3f8) !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
}

/* Sonaar's icon-font glyph (sricon-filedownload, sricon-layers, etc.).
   Sonaar applies the icon as a ::before via its icon font; we just
   theme the color/size so it sits flush like a bullet. */
.bbm-license-preview .srp_term_meta::before {
  color: var(--accent, #7c5cfc) !important;
  font-size: 18px !important;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  margin: 0 !important;
}

/* Fallback "checkmark" for license items that don't map to one of
   Sonaar's predefined icon classes. Sonaar emits `<i class="fa-solid
   fa-check">` for those, but Font Awesome isn't enqueued on every page
   — so we render the check via CSS mask + inline SVG instead. No font
   dependency, identical look to Sonaar's accent-purple icon styling. */
.bbm-license-preview .srp_term_meta i.fa-solid,
.bbm-license-preview .srp_term_meta i.fa-check {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background: var(--accent, #7c5cfc);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
  font-size: 0; /* hide any glyph if FA does load */
  margin: 0;
}

/* Per-item icon overrides for the trust badge list. Sonaar emits the
   same <i class="fa-check"> for every meta item, so by default all
   non-first badges render the same checkmark mask. We override the
   mask SVG per nth-child position to give each badge a semantic icon.
   The first item is intentionally not overridden — Sonaar's term
   editor controls its icon directly, and that's the icon you see.
   If you reorder badges in the license term editor, update the
   nth-child indices below to match the new display order.

   Applied to both surfaces that show the license meta list:
     - .bbm-license-preview  → inline list on the single-product page
     - .sr_popup-content     → "Preview License" popup */

/* nth-child(2) — Lock icon for EXCLUSIVE ACCESS */
.bbm-license-preview .srp_term_meta:nth-child(2) i.fa-solid,
.bbm-license-preview .srp_term_meta:nth-child(2) i.fa-check,
.sr_popup-content .srp_term_meta:nth-child(2) i.fa-solid,
.sr_popup-content .srp_term_meta:nth-child(2) i.fa-check {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='11' rx='2' ry='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='11' rx='2' ry='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>") center/contain no-repeat;
}

/* nth-child(3) — Percent icon for FAIR SHARE IN ROYALTIES */
.bbm-license-preview .srp_term_meta:nth-child(3) i.fa-solid,
.bbm-license-preview .srp_term_meta:nth-child(3) i.fa-check,
.sr_popup-content .srp_term_meta:nth-child(3) i.fa-solid,
.sr_popup-content .srp_term_meta:nth-child(3) i.fa-check {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='19' y1='5' x2='5' y2='19'/><circle cx='6.5' cy='6.5' r='2.5'/><circle cx='17.5' cy='17.5' r='2.5'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='19' y1='5' x2='5' y2='19'/><circle cx='6.5' cy='6.5' r='2.5'/><circle cx='17.5' cy='17.5' r='2.5'/></svg>") center/contain no-repeat;
}

/* nth-child(4) — Contract/document icon for BUY-OUT PROVISION */
.bbm-license-preview .srp_term_meta:nth-child(4) i.fa-solid,
.bbm-license-preview .srp_term_meta:nth-child(4) i.fa-check,
.sr_popup-content .srp_term_meta:nth-child(4) i.fa-solid,
.sr_popup-content .srp_term_meta:nth-child(4) i.fa-check {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><polyline points='14 2 14 8 20 8'/><line x1='16' y1='13' x2='8' y2='13'/><line x1='16' y1='17' x2='8' y2='17'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><polyline points='14 2 14 8 20 8'/><line x1='16' y1='13' x2='8' y2='13'/><line x1='16' y1='17' x2='8' y2='17'/></svg>") center/contain no-repeat;
}

/* nth-child(5) — Layers icon for REFERENCE MIX + 24-BIT TRACKOUT STEMS */
.bbm-license-preview .srp_term_meta:nth-child(5) i.fa-solid,
.bbm-license-preview .srp_term_meta:nth-child(5) i.fa-check,
.sr_popup-content .srp_term_meta:nth-child(5) i.fa-solid,
.sr_popup-content .srp_term_meta:nth-child(5) i.fa-check {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polygon points='12 2 2 7 12 12 22 7 12 2'/><polyline points='2 17 12 22 22 17'/><polyline points='2 12 12 17 22 12'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polygon points='12 2 2 7 12 12 22 7 12 2'/><polyline points='2 17 12 22 22 17'/><polyline points='2 12 12 17 22 12'/></svg>") center/contain no-repeat;
}

/* nth-child(6) — Sliders icon for ON-REQUEST ADJUSTMENTS */
.bbm-license-preview .srp_term_meta:nth-child(6) i.fa-solid,
.bbm-license-preview .srp_term_meta:nth-child(6) i.fa-check,
.sr_popup-content .srp_term_meta:nth-child(6) i.fa-solid,
.sr_popup-content .srp_term_meta:nth-child(6) i.fa-check {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='4' y1='21' x2='4' y2='14'/><line x1='4' y1='10' x2='4' y2='3'/><line x1='12' y1='21' x2='12' y2='12'/><line x1='12' y1='8' x2='12' y2='3'/><line x1='20' y1='21' x2='20' y2='16'/><line x1='20' y1='12' x2='20' y2='3'/><line x1='1' y1='14' x2='7' y2='14'/><line x1='9' y1='8' x2='15' y2='8'/><line x1='17' y1='16' x2='23' y2='16'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='4' y1='21' x2='4' y2='14'/><line x1='4' y1='10' x2='4' y2='3'/><line x1='12' y1='21' x2='12' y2='12'/><line x1='12' y1='8' x2='12' y2='3'/><line x1='20' y1='21' x2='20' y2='16'/><line x1='20' y1='12' x2='20' y2='3'/><line x1='1' y1='14' x2='7' y2='14'/><line x1='9' y1='8' x2='15' y2='8'/><line x1='17' y1='16' x2='23' y2='16'/></svg>") center/contain no-repeat;
}

/* Flatten any Sonaar-injected vertical spacing on individual rows so the
   layout is uniform regardless of whether the row uses an sricon glyph
   or the FA fallback. Without this, custom items get larger vertical
   gaps because Sonaar's stylesheet treats them differently. */
.bbm-license-preview .srp_term_meta {
  margin: 0 !important;
  padding: 0 !important;
}
.bbm-license-preview .srp_term_meta_list > .srp_term_meta + .srp_term_meta {
  margin-top: 0 !important;
}

/* Label + the inline "Unlimited"-style value */
.bbm-license-preview .srp_term_meta_label {
  color: var(--text, #f1f3f8) !important;
  font-weight: 400 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.25 !important;
  font-size: 13px !important;
}
.bbm-license-preview .srp_term_meta_value {
  color: var(--text, #f1f3f8) !important;
  font-weight: 600 !important;
}

/* Preview License button */
.bbm-license-preview .view-license-button {
  margin: 18px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  background: transparent;
  color: var(--text, #f1f3f8);
  border: 1px solid var(--border, rgba(255,255,255,.18));
  border-radius: var(--radius-md, 10px);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .02em;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
  pointer-events: auto;
}
.bbm-license-preview .view-license-button:hover,
.bbm-license-preview .view-license-button:focus-visible {
  border-color: var(--accent, #7c5cfc);
  color: var(--accent, #7c5cfc);
  background: rgba(124, 92, 252, .08);
  outline: none;
}
.bbm-license-preview .view-license-button::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/><circle cx='12' cy='12' r='3'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/><circle cx='12' cy='12' r='3'/></svg>") center/contain no-repeat;
}

/* "Preview the agreement →" sibling link rendered below the WC Blocks
   checkbox at checkout. Sits in its own row so the checkbox/label
   stays untouched by our enhancer (avoids breaking React's tracking
   of the underlying input state). */
.bbm-license-preview-link-checkout {
  margin: 4px 0 12px 28px; /* indent to align with the label text */
  font-size: 13px;
}
.bbm-license-link {
  display: inline-flex;
  align-items: center;
  color: var(--accent, #7c5cfc) !important;
  text-decoration: none;
  border-bottom: 1px dashed rgba(124, 92, 252, .5);
  padding-bottom: 1px;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.bbm-license-link:hover {
  color: var(--accent-hot, #a07cff) !important;
  border-color: var(--accent-hot, #a07cff);
}

/* "Your License" summary on thank-you page + emails */
.bbm-order-license {
  margin: 32px 0;
  padding: 20px 24px;
  background: var(--surface-1, #0c0e14);
  border: 1px solid var(--border, rgba(255,255,255,.08));
  border-radius: var(--radius-lg, 14px);
  color: var(--text, #f1f3f8);
}
.bbm-order-license h2 {
  margin: 0 0 8px;
  font-size: 20px;
  letter-spacing: .01em;
}
.bbm-order-license p {
  margin: 0 0 12px;
  color: var(--text-dim, rgba(241,243,248,.75));
  line-height: 1.55;
}
.bbm-order-license__beats {
  margin: 8px 0 16px;
  padding-left: 20px;
}
.bbm-order-license__beats li {
  margin: 4px 0;
  color: var(--text, #f1f3f8);
}
.bbm-order-license__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  margin: 0 !important;
}
.bbm-order-license__meta a {
  color: var(--accent, #7c5cfc);
  text-decoration: none;
  font-weight: 500;
}
.bbm-order-license__meta a:hover {
  color: var(--accent-hot, #a07cff);
}
.bbm-order-license__download {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  background: rgba(124, 92, 252, .12);
  border: 1px solid rgba(124, 92, 252, .35);
  border-radius: var(--radius-sm, 6px);
  color: var(--accent, #7c5cfc) !important;
  font-weight: 600 !important;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.bbm-order-license__download:hover {
  background: rgba(124, 92, 252, .2);
  border-color: var(--accent, #7c5cfc);
  color: var(--accent-hot, #a07cff) !important;
}
.bbm-order-license__version {
  color: var(--text-dim, rgba(241,243,248,.5));
  font-size: 12px;
  letter-spacing: .03em;
  text-transform: uppercase;
}

/* =========================================================================
   Sonaar license PREVIEW MODAL — popped from "Preview License" button
   -------------------------------------------------------------------------
   Sonaar's modal renders on its own backdrop with light defaults that
   ignore our theme. We re-skin the card, the close button, the badges
   grid (re-using the same .srp_term_meta_* rules from the inline block)
   and the long-form license text inside .sr_popup-body.
   ========================================================================= */

/* The popup is rendered into a fixed overlay; .sr_popup-content is the
   white "card". Replace its surface + chrome to match the dark theme.
   Sonaar's .srp-modal-medium-size caps width too tight for legal copy
   — bump to comfortable reading width with sane mobile fallback.
   Scoped via :has() so we only widen the popup when the license
   preview is inside; other popups (Make an Offer, etc.) keep their
   own narrower widths. */
.sr_popup-content:has(.srp-license-preview-modal) {
  background: var(--surface-1, #0c0e14) !important;
  color: var(--text, #f1f3f8) !important;
  border: 1px solid var(--border, rgba(255,255,255,.08)) !important;
  border-radius: var(--radius-lg, 14px) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.6) !important;
  width: min(880px, 92vw) !important;
  max-width: min(880px, 92vw) !important;
  max-height: 88vh !important;
}
.sr_popup-content:has(.srp-license-preview-modal) .srp-license-preview-modal,
.sr_popup-content:has(.srp-license-preview-modal) .srp-modal-medium-size {
  max-width: none !important;
  width: 100% !important;
}

/* Close button — themed and bigger hit area */
.sr_popup-content .sr_close {
  color: var(--text-dim, rgba(241,243,248,.65)) !important;
  background: rgba(255,255,255,.04) !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  transition: color .15s ease, background .15s ease;
}
.sr_popup-content .sr_close:hover {
  color: var(--text, #f1f3f8) !important;
  background: rgba(255,255,255,.1) !important;
}
.sr_popup-content .sr_close svg {
  width: 14px !important;
  height: 14px !important;
}
.sr_popup-content .sr_close svg rect {
  fill: currentColor !important;
}

/* Body wrapper — kill any white background */
.sr_popup-body,
.sr_popup-content .srp-license-preview-modal {
  background: transparent !important;
  color: var(--text, #f1f3f8) !important;
}

/* === Badges grid INSIDE the modal — reuse the same rules from the
   inline product-page block. Keep .bbm-license-preview as the primary
   scope for the inline render, and add .sr_popup-content here so the
   rules apply in both places. === */
.sr_popup-content .srp_variant_terms_container,
.sr_popup-content .srp_variant_terms {
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
}
.sr_popup-content .srp_term_title {
  display: none !important; /* product/license title is implicit */
}
.sr_popup-content .srp_term_meta_list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 8px 22px !important;
  padding: 0 !important;
  margin: 0 0 20px !important;
  list-style: none !important;
  align-items: start !important; /* keep 1-line cells anchored to top of taller rows */
}
.sr_popup-content .srp_term_meta {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  color: var(--text, #f1f3f8) !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
}
.sr_popup-content .srp_term_meta::before {
  color: var(--accent, #7c5cfc) !important;
  font-size: 18px !important;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  margin: 0 !important;
}
.sr_popup-content .srp_term_meta i.fa-solid,
.sr_popup-content .srp_term_meta i.fa-check {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background: var(--accent, #7c5cfc);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
  font-size: 0;
  margin: 0;
}
.sr_popup-content .srp_term_meta_label {
  color: var(--text, #f1f3f8) !important;
  font-weight: 400 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.35 !important;
  font-size: 13px !important;
}
.sr_popup-content .srp_term_meta_value {
  color: var(--text, #f1f3f8) !important;
  font-weight: 600 !important;
}

/* Long-form license body text — paragraphs + headings inside the modal */
.sr_popup-content .sr_popup-body p {
  color: var(--text, #f1f3f8) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin: 0 0 12px !important;
}
.sr_popup-content .sr_popup-body strong {
  color: var(--text, #f1f3f8) !important;
  font-weight: 600 !important;
}
.sr_popup-content .sr_popup-body a {
  color: var(--accent, #7c5cfc) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sr_popup-content .sr_popup-body a:hover {
  color: var(--accent-hot, #a07cff) !important;
}

/* Headings inside the modal contract body. The contract source uses
   <h1>/<h2>/<h3> for the document title, section headings, and
   sub-section labels. Without these overrides they inherit the
   theme's page-level heading sizes, which renders the contract
   title huge. (HTML modal preview only — does NOT affect the PDF
   render which uses its own inline styles.) */
.sr_popup-content .sr_popup-body h1 {
  font-size: 22px !important;
  margin: 4px 0 18px !important;
  text-align: center;
  font-weight: 700;
  color: var(--text, #f1f3f8) !important;
}
.sr_popup-content .sr_popup-body h2 {
  font-size: 16px !important;
  margin: 18px 0 6px !important;
  font-weight: 700;
  color: var(--text, #f1f3f8) !important;
}
.sr_popup-content .sr_popup-body h3 {
  font-size: 14px !important;
  margin: 12px 0 4px !important;
  font-weight: 600;
  color: var(--text, #f1f3f8) !important;
}
.sr_popup-content .sr_popup-body h4,
.sr_popup-content .sr_popup-body h5,
.sr_popup-content .sr_popup-body h6 {
  font-size: 13px !important;
  margin: 10px 0 4px !important;
  font-weight: 600;
  color: var(--text, #f1f3f8) !important;
}


/* The first <p> after the badges acts as a section heading
   ("Exclusive License Agreement"). Give it a touch more weight. */
.sr_popup-content .srp-license-preview-modal > p:first-of-type {
  font-size: 18px !important;
  margin: 8px 0 16px !important;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,.08));
}

/* The whole-document scrollable region — make the scrollbar themed */
.sr_popup-body {
  scrollbar-color: var(--accent, #7c5cfc) transparent;
}
.sr_popup-body::-webkit-scrollbar { width: 8px; }
.sr_popup-body::-webkit-scrollbar-thumb {
  background: rgba(124, 92, 252, .4);
  border-radius: 4px;
}
.sr_popup-body::-webkit-scrollbar-track { background: transparent; }

/* Redaction notice — appears at the top of every preview render
   (modal, public agreement page, cart/checkout previews). Tells the
   buyer why some fields read as redacted placeholders. */
.bbm-license-preview-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  margin: 0 0 18px;
  background: rgba(124, 92, 252, .10);
  border: 1px solid rgba(124, 92, 252, .35);
  border-radius: var(--radius-md, 10px);
  color: var(--text, #f1f3f8);
  font-size: 13px;
  line-height: 1.5;
}
.bbm-license-preview-notice__icon {
  flex-shrink: 0;
  font-size: 16px;
  color: var(--accent, #7c5cfc);
  line-height: 1.4;
}
.bbm-license-preview-notice__text {
  color: var(--text-dim, rgba(241,243,248,.85));
}
.bbm-license-preview-notice__text strong {
  color: var(--text, #f1f3f8);
  font-weight: 600;
}

/* Modal-context tweaks — within the Sonaar popup the notice sits above
   the badges grid; we tighten the bottom margin so the badges anchor
   cleanly below it. */
.sr_popup-content .bbm-license-preview-notice {
  margin: 4px 0 16px;
}

/* "View Your Personalized License" CTA button — appears in customer
   order emails to drive buyers to the full contract on the order page. */
.bbm-order-license__cta {
  margin: 14px 0 !important;
}
.bbm-order-license__view-button {
  display: inline-block;
  padding: 10px 18px;
  background: var(--accent, #7c5cfc);
  color: #fff !important;
  border-radius: var(--radius-md, 10px);
  text-decoration: none !important;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .02em;
}
.bbm-order-license__view-button:hover {
  background: var(--accent-hot, #a07cff);
}

/* Full personalized contract block (thank-you page + My Account view).
   The <details> wrapper lets buyers collapse the long-form text after
   skimming. We style the disclosure summary as a clean card header so
   it reads as a clear UI affordance rather than a raw HTML disclosure. */
.bbm-order-license-full {
  margin: 28px 0;
  background: var(--surface-1, #0c0e14);
  border: 1px solid var(--border, rgba(255,255,255,.08));
  border-radius: var(--radius-lg, 14px);
  overflow: hidden;
}
.bbm-order-license-full__details {
  width: 100%;
}
.bbm-order-license-full__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease, background .15s ease;
}
.bbm-order-license-full__summary::-webkit-details-marker { display: none; }
.bbm-order-license-full__summary:hover {
  background: rgba(255,255,255,.02);
}
.bbm-order-license-full__details[open] > .bbm-order-license-full__summary {
  border-bottom-color: var(--border, rgba(255,255,255,.08));
}
.bbm-order-license-full__heading {
  color: var(--text, #f1f3f8);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .01em;
}
.bbm-order-license-full__hint {
  color: var(--text-dim, rgba(241,243,248,.5));
  font-size: 14px;
  transition: transform .2s ease;
}
.bbm-order-license-full__details[open] > .bbm-order-license-full__summary > .bbm-order-license-full__hint {
  transform: rotate(180deg);
}
.bbm-order-license-full__body {
  padding: 22px 24px 6px;
  color: var(--text, #f1f3f8);
  font-size: 14px;
  line-height: 1.6;
}
.bbm-order-license-full__body p {
  margin: 0 0 12px;
  color: var(--text, #f1f3f8);
}
.bbm-order-license-full__body strong {
  color: var(--text, #f1f3f8);
  font-weight: 600;
}
.bbm-order-license-full__body a {
  color: var(--accent, #7c5cfc);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.bbm-order-license-full__note {
  padding: 0 20px 18px;
  margin: 0;
  font-size: 12px;
  color: var(--text-dim, rgba(241,243,248,.55));
}

/* Embedded license-preview badges grid that lives inside the inline
   contract render (output of `bbm_license_render_for_order`) — same
   styling rules as the modal/single-product variants. */
.bbm-order-license-full__body .srp_term_meta_list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 8px 22px !important;
  padding: 0 !important;
  margin: 0 0 18px !important;
  list-style: none !important;
  align-items: start !important;
}
.bbm-order-license-full__body .srp_term_meta {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
.bbm-order-license-full__body .srp_term_meta::before,
.bbm-order-license-full__body .srp_term_meta i.fa-solid,
.bbm-order-license-full__body .srp_term_meta i.fa-check {
  color: var(--accent, #7c5cfc) !important;
  font-size: 16px !important;
  width: 18px;
}
.bbm-order-license-full__body .srp_term_meta i.fa-solid,
.bbm-order-license-full__body .srp_term_meta i.fa-check {
  display: inline-block;
  height: 18px;
  background: var(--accent, #7c5cfc);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
  font-size: 0;
}
.bbm-order-license-full__body .srp_term_title {
  display: none !important;
}

/* Single consolidated "Review License Agreement" row on the cart page
   (above the proceed-to-checkout button). One agreement covers all
   beats — the button + hint together communicate that explicitly. */
.bbm-cart-license-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  margin: 0 0 14px;
  padding: 14px 16px;
  background: var(--surface-2, #11131a);
  border: 1px solid var(--border, rgba(255,255,255,.08));
  border-radius: var(--radius-md, 10px);
}
.bbm-cart-license-row .bbm-cart-license-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 10px 18px !important;
  background: transparent !important;
  color: var(--text, #f1f3f8) !important;
  border: 1px solid var(--border, rgba(255,255,255,.18)) !important;
  border-radius: var(--radius-md, 10px) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  cursor: pointer !important;
  transition: border-color .15s ease, color .15s ease, background .15s ease !important;
}
.bbm-cart-license-row .bbm-cart-license-button:hover,
.bbm-cart-license-row .bbm-cart-license-button:focus-visible {
  border-color: var(--accent, #7c5cfc) !important;
  color: var(--accent, #7c5cfc) !important;
  background: rgba(124, 92, 252, .08) !important;
  outline: none !important;
}
.bbm-cart-license-row__hint {
  font-size: 12px;
  color: var(--text-dim, rgba(241,243,248,.6));
  letter-spacing: .01em;
  text-align: center;
}

/* Autofill protection — Chrome injects white bg on autofilled inputs */
.wc-block-components-text-input input:-webkit-autofill,
.wc-block-components-text-input input:-webkit-autofill:hover,
.wc-block-components-text-input input:-webkit-autofill:focus,
.wc-block-checkout input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--surface-2, #11131a) inset !important;
  -webkit-text-fill-color: var(--text, #f1f3f8) !important;
  caret-color: var(--text, #f1f3f8) !important;
}

/**
 * Sonaar tracklist mobile fix.
 *
 * On narrow viewports the track title was being squeezed to a single letter
 * ("C…", "F…", "N…") because Sonaar's row layout reserves a fixed 200px slot
 * for `.store-list` (the share/heart/tag drawer, which is positioned
 * absolute and only needs ~88px to show its three icons). The cf-container
 * (Vibe/Key/BPM columns at 100+100+60=260px) further competes for space.
 *
 * Fix on phones:
 *   1. Hide the Vibe/Key/BPM columns inside each track row — they're
 *      duplicated on the single-product page and don't fit comfortably.
 *   2. Shrink `.store-list` reserved width to 96px (just enough for the 88px
 *      visible icons strip — the absolute-positioned drawer overflow is
 *      fine since the drawer is `overflow:hidden` and slides in over the
 *      adjacent column).
 *   3. Set `min-width: 0` on `.audio-track` and the title element so flex
 *      shrink actually engages instead of clamping to text content.
 *   4. Full-bleed the .archive-player to the viewport edges by cancelling
 *      the .container's 1.5rem inline padding with a matching negative
 *      margin. The section header above it stays constrained as expected;
 *      only the playlist box breaks out, recovering ~48px of horizontal
 *      room for titles + grid tiles.
 */
@media (max-width: 600px) {
  .iron-audioplayer .sr-playlist-cf-container {
    display: none !important;
  }
  .iron-audioplayer .sr-playlist-item-flex .store-list {
    flex: 0 0 96px !important;
  }
  .iron-audioplayer .sr-playlist-item-flex .song-store-list-menu {
    width: 96px !important;
    max-width: 96px !important;
  }
  .iron-audioplayer .sr-playlist-item-flex .audio-track {
    min-width: 0 !important;
  }
  .iron-audioplayer .sr-playlist-item-flex .tracklist-item-title {
    min-width: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
  }
  .archive-player {
    margin-left: calc(-1 * var(--space-lg));
    margin-right: calc(-1 * var(--space-lg));
  }
}

/**
 * Active-track highlight on list-layout playlists.
 *
 * When a track is playing Sonaar adds .current to .sr-playlist-item. The grid
 * layout already gets an accent border + glow elsewhere; for the list layout
 * (search results, taxonomy archives, favorites/project page) we paint the
 * row with a translucent theme purple plus a 3px accent rail down the left
 * edge. Translucent (not solid) so hover/scroll states underneath still
 * read, and so the tint blends rather than creating a hard color block.
 */
.iron-audioplayer:not(.srp_tracklist_grid) .sr-playlist-item.current {
  background-color: rgba(124, 92, 252, 0.16) !important;
  box-shadow: inset 3px 0 0 0 var(--accent);
  border-radius: 6px;
}

.iron-audioplayer:not(.srp_tracklist_grid) .sr-playlist-item.current .tracklist-item-title {
  color: var(--text-primary) !important;
}

/* ── Listen Gate ───────────────────────────────────────────────────────
   Logged-out visitors get `body.bbm-no-listen`. The catalog player on
   shop / category archives is left fully visible and functional —
   playback gating happens at the AUDIO LAYER via Sonaar's preview /
   watermark feature, which serves a single "studio invitation" MP3
   (the producer's voice) to logged-out visitors instead of the real
   tracks. This means we don't have to hide every play button class
   (which moves between Sonaar versions).

   On SINGLE-PRODUCT pages we still fully hide the player block, because
   inc/listen-gate.php injects a dedicated "Sign in to listen" gate card
   into the product summary instead of relying on a heard-it-once
   invitation. Two reasons: (1) the single-beat page is a higher-intent
   moment that deserves explicit conversion copy, (2) the gate card
   keeps the layout sane where the player would have lived. */

/* Single-product page Sonaar player — full hide. The gate card injected
   by inc/listen-gate.php takes its visual slot.
   Layered defenses because Sonaar's runtime applies inline styles via JS
   that can override a plain `display: none` cascade — collapse the box
   geometrically (width/height/margin → 0) AND visually (visibility/
   opacity/pointer-events). Wide attribute-selector net catches whatever
   Sonaar versions name the single-product player container. */
body.bbm-no-listen.single-product [class*="music-player"],
body.bbm-no-listen.single-product [class*="audio-player"],
body.bbm-no-listen.single-product [class*="audioplayer"],
body.bbm-no-listen.single-product [class*="sonaar"],
body.bbm-no-listen.single-product [class*="sr_modern"],
body.bbm-no-listen.single-product [class*="srp_player"],
body.bbm-no-listen.single-product [class*="srp-player"],
body.bbm-no-listen.single-product [class*="iron-music"],
body.bbm-no-listen.single-product [class*="iron-audio"] {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Catch standalone play-button elements that might render outside the
   single-product player container (cover-overlay buttons, header
   buttons, etc). Same layered hide so geometry collapses too. */
body.bbm-no-listen.single-product [class*="play-pause"],
body.bbm-no-listen.single-product [class*="play_pause"],
body.bbm-no-listen.single-product [class*="play-button"],
body.bbm-no-listen.single-product [class*="play_button"],
body.bbm-no-listen.single-product [class*="btn-play"],
body.bbm-no-listen.single-product [class*="sr-btn-play"],
body.bbm-no-listen.single-product [class*="srp-play"],
body.bbm-no-listen.single-product [class*="sr_play"] {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ── Listen Gate Cards ──
   Two variants of the same component, sharing typography and layout
   tokens with the rest of the site:
   - Default (vertical) — used on single-product pages in place of the
     player block.
   - .bbm-listen-gate--banner — slim horizontal version above the shop
     archive grid, so visitors see "why no play buttons?" up front. */

.bbm-listen-gate {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-lg);
  margin: var(--space-md) 0 var(--space-lg);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.bbm-listen-gate-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(124, 92, 252, 0.12);
  color: var(--accent-light);
  border-radius: var(--radius-full);
}

.bbm-listen-gate-body {
  flex: 1;
  min-width: 0;
}

.bbm-listen-gate-title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  letter-spacing: 0.01em;
}

.bbm-listen-gate-text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.bbm-listen-gate-text strong {
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
  margin-right: 4px;
}

.bbm-listen-gate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

/* The vertical variant on single-product pages stacks actions under the
   body text (default flow above). The banner variant shifts to a
   horizontal layout and pulls the actions to the right edge. */
.bbm-listen-gate--banner {
  align-items: center;
  margin: 0 0 var(--space-lg);
}

.bbm-listen-gate--banner .bbm-listen-gate-actions {
  margin-top: 0;
  flex-shrink: 0;
}

.bbm-listen-gate--banner .bbm-listen-gate-text {
  font-size: 0.9375rem;
}

@media (max-width: 640px) {
  .bbm-listen-gate {
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-md);
  }
  .bbm-listen-gate-icon {
    align-self: flex-start;
  }
  .bbm-listen-gate--banner .bbm-listen-gate-actions {
    margin-top: var(--space-md);
  }
  .bbm-listen-gate-actions .btn {
    flex: 1 1 auto;
    text-align: center;
    justify-content: center;
  }
}