/* Bangs Music Distro — Homepage Production UI V31
   Consolidated from V26/V29/V30 visual layers. */

/* ===== Mobile cover stability ===== */
.bmd23-card,
  .bmd23-quick,
  .bmd23-news,
  .bmd23-artist,
  .bmd23-card__art,
  .bmd23-card__cover,
  .bmd23-quick__cover,
  .bmd23-landing__art,
  .bmd23-artist__image,
  .bmd23-news > a {
    content-visibility:visible!important;
    contain:none!important;
  }

  .bmd23-card__art,
  .bmd23-card__cover,
  .bmd23-quick__cover,
  .bmd23-landing__art,
  .bmd23-artist__image,
  .bmd23-news > a {
    position:relative;
    overflow:hidden;
    background:#17171c;
    isolation:isolate;
  }

  .bmd23-card__cover,
  .bmd23-quick__cover,
  .bmd23-landing__art,
  .bmd23-artist__image,
  .bmd23-news > a {
    display:block!important;
  }

  .bmd23-card__cover img,
  .bmd23-quick__cover img,
  .bmd23-landing__art img,
  .bmd23-artist__image img,
  .bmd23-news img {
    display:block!important;
    width:100%!important;
    height:100%!important;
    min-width:100%!important;
    min-height:100%!important;
    object-fit:cover!important;
    opacity:1!important;
    visibility:visible!important;
    animation:none!important;
    transition:none!important;
    transform:none!important;
    filter:none!important;
    backface-visibility:visible!important;
    -webkit-backface-visibility:visible!important;
    -webkit-transform:none!important;
    -webkit-mask-image:none!important;
    will-change:auto!important;
  }

  .bmd23-card__cover,
  .bmd23-card__art { aspect-ratio:1 / 1; }
  .bmd23-quick__cover { aspect-ratio:1 / 1; }
  .bmd23-landing__art { aspect-ratio:1 / 1; }
  .bmd23-artist__image { aspect-ratio:1 / 1; }

  @media (max-width:899px), (hover:none) and (pointer:coarse) {
    .bmd24-swiper.swiper {
      display:block!important;
      width:100%!important;
      max-width:100%!important;
      overflow-x:auto!important;
      overflow-y:visible!important;
      touch-action:pan-x pan-y!important;
      overscroll-behavior-inline:contain;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
      scroll-snap-type:x proximity;
      contain:none!important;
    }
    .bmd24-swiper.swiper::-webkit-scrollbar { display:none; }

    .bmd24-swiper.swiper > .swiper-wrapper,
    .bmd24-swiper.swiper .bmd23-shelf {
      display:flex!important;
      width:max-content!important;
      min-width:100%!important;
      height:auto!important;
      transform:none!important;
      translate:none!important;
      transition:none!important;
      animation:none!important;
      opacity:1!important;
      visibility:visible!important;
      contain:none!important;
      will-change:auto!important;
    }

    .bmd24-swiper.swiper .swiper-slide,
    .bmd24-swiper.swiper .swiper-slide-visible,
    .bmd24-swiper.swiper .swiper-slide-active,
    .bmd24-swiper.swiper .swiper-slide-next,
    .bmd24-swiper.swiper .swiper-slide-prev {
      display:block!important;
      flex-shrink:0!important;
      height:auto!important;
      opacity:1!important;
      visibility:visible!important;
      transform:none!important;
      transition:none!important;
      animation:none!important;
      contain:none!important;
      content-visibility:visible!important;
      scroll-snap-align:start;
      will-change:auto!important;
    }

    .bmd23-card__art,
    .bmd23-card__cover,
    .bmd23-quick__cover,
    .bmd23-landing__art,
    .bmd23-artist__image,
    .bmd23-news > a,
    .bmd23-card__cover img,
    .bmd23-quick__cover img,
    .bmd23-landing__art img,
    .bmd23-artist__image img,
    .bmd23-news img {
      transform:none!important;
      translate:none!important;
      perspective:none!important;
      backface-visibility:visible!important;
      -webkit-backface-visibility:visible!important;
    }
  }

  @media (prefers-reduced-motion:reduce) {
    .bmd23-card__cover img,
    .bmd23-quick__cover img,
    .bmd23-landing__art img,
    .bmd23-artist__image img,
    .bmd23-news img { animation:none!important; transition:none!important; }
  }

/* ===== Homepage visual system ===== */
:root {
    --bmdx-bg: #070807;
    --bmdx-bg-soft: #0c0e0d;
    --bmdx-panel: #111412;
    --bmdx-panel-2: #151916;
    --bmdx-panel-3: #1a1f1b;
    --bmdx-text: #f7f8f7;
    --bmdx-text-2: #c4cbc6;
    --bmdx-muted: #89928c;
    --bmdx-line: rgba(255,255,255,.085);
    --bmdx-line-strong: rgba(255,255,255,.14);
    --bmdx-accent: #23e36f;
    --bmdx-accent-2: #7cffac;
    --bmdx-accent-soft: rgba(35,227,111,.14);
    --bmdx-accent-glow: rgba(35,227,111,.27);
    --bmdx-danger: #ff6a77;
    --bmdx-shadow: 0 24px 80px rgba(0,0,0,.36);
    --bmdx-shadow-soft: 0 12px 36px rgba(0,0,0,.24);
    --bmdx-radius-xs: 10px;
    --bmdx-radius-sm: 14px;
    --bmdx-radius-md: 20px;
    --bmdx-radius-lg: 28px;
    --bmdx-radius-xl: 36px;
    --bmdx-sidebar: 264px;
    --bmdx-topbar: 76px;
    --bmdx-content: 1560px;
  }

  html { background: var(--bmdx-bg); }
  body.bmd24-page {
    background:
      radial-gradient(circle at 78% -10%, rgba(35,227,111,.10), transparent 28rem),
      radial-gradient(circle at 18% 16%, rgba(83,108,255,.055), transparent 26rem),
      var(--bmdx-bg) !important;
    color: var(--bmdx-text) !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  body.bmd24-page * { box-sizing: border-box; }
  body.bmd24-page ::selection { background: rgba(35,227,111,.26); color: #fff; }
  body.bmd24-page a { text-underline-offset: 3px; }

  .bmd23-home {
    color: var(--bmdx-text) !important;
    background: transparent !important;
    min-height: 100vh;
  }

  .bmd23-layout {
    display: grid !important;
    grid-template-columns: var(--bmdx-sidebar) minmax(0,1fr) !important;
    min-height: 100vh;
    background: transparent !important;
  }

  /* SIDEBAR */
  .bmd23-sidebar {
    position: sticky !important;
    inset: 0 auto auto 0 !important;
    width: var(--bmdx-sidebar) !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 20px 14px 22px !important;
    border: 0 !important;
    border-right: 1px solid var(--bmdx-line) !important;
    border-radius: 0 !important;
    background: rgba(7,9,8,.94) !important;
    color: var(--bmdx-text) !important;
    overflow-y: auto !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.12) transparent;
  }

  .bmd23-brand {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    min-height: 54px;
    padding: 7px 10px !important;
    margin-bottom: 15px !important;
    border-radius: 14px !important;
    color: var(--bmdx-text) !important;
    text-decoration: none !important;
  }

  .bmd23-brand__mark {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
    display: inline-flex !important;
    align-items: end !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 9px 8px !important;
    border-radius: 12px !important;
    background: linear-gradient(145deg, var(--bmdx-accent-2), var(--bmdx-accent)) !important;
    box-shadow: 0 8px 24px rgba(35,227,111,.22);
  }

  .bmd23-brand__mark > span {
    width: 4px !important;
    border-radius: 99px !important;
    background: #061108 !important;
  }
  .bmd23-brand__mark > span:nth-child(1) { height: 11px !important; }
  .bmd23-brand__mark > span:nth-child(2) { height: 19px !important; }
  .bmd23-brand__mark > span:nth-child(3) { height: 14px !important; }

  .bmd23-brand > span:last-child { min-width: 0; }
  .bmd23-brand strong {
    display: block !important;
    color: var(--bmdx-text) !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    letter-spacing: -.02em;
    line-height: 1.05 !important;
  }
  .bmd23-brand small {
    display: block !important;
    margin-top: 4px !important;
    color: var(--bmdx-muted) !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: .11em !important;
    text-transform: uppercase;
  }

  .bmd23-sidebar__label {
    margin: 24px 10px 8px !important;
    color: #66716a !important;
    font-size: 9px !important;
    font-weight: 850 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase;
  }

  .bmd23-nav { display: grid !important; gap: 3px !important; }
  .bmd23-nav a,
  .bmd23-nav button {
    min-height: 45px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 0 12px !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: #9fa8a2 !important;
    font: inherit !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease !important;
  }
  .bmd23-nav a svg,
  .bmd23-nav button svg { width: 19px !important; height: 19px !important; flex: 0 0 19px; }
  .bmd23-nav a:hover,
  .bmd23-nav button:hover {
    color: var(--bmdx-text) !important;
    background: rgba(255,255,255,.055) !important;
  }
  .bmd23-nav a.is-active {
    color: #051008 !important;
    border-color: rgba(124,255,172,.35) !important;
    background: linear-gradient(135deg, var(--bmdx-accent-2), var(--bmdx-accent)) !important;
    box-shadow: 0 8px 24px rgba(35,227,111,.16) !important;
  }

  .bmd23-sidebar__account {
    margin-top: 28px !important;
    padding: 15px !important;
    border: 1px solid rgba(124,255,172,.14) !important;
    border-radius: 18px !important;
    background:
      linear-gradient(145deg, rgba(35,227,111,.10), rgba(35,227,111,.025) 52%),
      rgba(255,255,255,.025) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
  }
  .bmd23-sidebar__account > span {
    width: 30px !important;
    height: 30px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 10px !important;
    background: var(--bmdx-accent-soft) !important;
    color: var(--bmdx-accent) !important;
  }
  .bmd23-sidebar__account > span svg { width: 16px !important; height: 16px !important; }
  .bmd23-sidebar__account strong { display: block !important; margin-top: 10px !important; color: var(--bmdx-text) !important; font-size: 12px !important; }
  .bmd23-sidebar__account p { margin: 7px 0 12px !important; color: var(--bmdx-muted) !important; font-size: 11px !important; line-height: 1.55 !important; }
  .bmd23-sidebar__account a {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 32px !important;
    padding: 0 11px !important;
    border-radius: 9px !important;
    background: rgba(255,255,255,.075) !important;
    color: #eef3ef !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
  }

  /* MAIN SHELL + TOPBAR */
  .bmd23-main { min-width: 0 !important; background: transparent !important; }
  .bmd23-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 70 !important;
    height: var(--bmdx-topbar) !important;
    display: grid !important;
    grid-template-columns: auto minmax(220px, 580px) auto !important;
    align-items: center !important;
    gap: 18px !important;
    padding: 12px clamp(18px, 2vw, 34px) !important;
    border-bottom: 1px solid var(--bmdx-line) !important;
    background: rgba(7,8,7,.80) !important;
    backdrop-filter: blur(20px) saturate(135%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(135%) !important;
  }

  .bmd23-menu,
  .bmd23-mobile-brand { display: none !important; }

  .bmd23-search-trigger {
    width: 100% !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 12px 0 15px !important;
    border: 1px solid var(--bmdx-line-strong) !important;
    border-radius: 15px !important;
    background: rgba(255,255,255,.055) !important;
    color: var(--bmdx-text-2) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease !important;
  }
  .bmd23-search-trigger:hover {
    border-color: rgba(124,255,172,.28) !important;
    background: rgba(255,255,255,.075) !important;
    box-shadow: 0 0 0 4px rgba(35,227,111,.045) !important;
  }
  .bmd23-search-trigger svg { width: 19px !important; height: 19px !important; }
  .bmd23-search-trigger span { flex: 1; text-align: left; color: #aab2ad !important; font-size: 12px !important; }
  .bmd23-search-trigger kbd {
    padding: 5px 7px !important;
    border: 1px solid var(--bmdx-line) !important;
    border-radius: 7px !important;
    background: rgba(0,0,0,.24) !important;
    color: #717a74 !important;
    font: 700 9px/1 Inter, ui-sans-serif, system-ui !important;
  }

  .bmd23-topbar__actions { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 9px !important; }
  .bmd23-topbar__upload,
  .bmd23-account {
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 12px !important;
    border: 1px solid var(--bmdx-line) !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.045) !important;
    color: #eef2ef !important;
    text-decoration: none !important;
    transition: background-color .18s ease, border-color .18s ease, transform .18s ease !important;
  }
  .bmd23-topbar__upload:hover,
  .bmd23-account:hover { background: rgba(255,255,255,.075) !important; border-color: var(--bmdx-line-strong) !important; transform: translateY(-1px); }
  .bmd23-topbar__upload svg { width: 17px !important; height: 17px !important; }
  .bmd23-topbar__upload span { font-size: 11px !important; font-weight: 800 !important; }
  .bmd23-account > span {
    width: 27px !important;
    height: 27px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 9px !important;
    background: linear-gradient(145deg, var(--bmdx-accent-2), var(--bmdx-accent)) !important;
    color: #051008 !important;
    font-size: 10px !important;
    font-weight: 900 !important;
  }
  .bmd23-account strong { max-width: 104px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px !important; font-weight: 800 !important; }

  /* CONTENT */
  .bmd23-content {
    width: min(100%, var(--bmdx-content)) !important;
    margin: 0 auto !important;
    padding: clamp(18px, 2.2vw, 36px) clamp(18px, 2.5vw, 40px) 150px !important;
  }

  /* FEATURED HERO */
  .bmd23-landing {
    position: relative !important;
    isolation: isolate !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(220px, .65fr) !important;
    align-items: end !important;
    gap: clamp(24px, 4vw, 64px) !important;
    min-height: clamp(410px, 47vw, 610px) !important;
    padding: clamp(28px, 4.8vw, 70px) !important;
    margin: 0 0 clamp(28px, 4vw, 54px) !important;
    overflow: hidden !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: var(--bmdx-radius-xl) !important;
    background: #0b0e0c !important;
    box-shadow: var(--bmdx-shadow) !important;
  }

  /* V30 — the featured cover is now a real DOM image behind the hero instead
     of existing only inside a CSS custom-property background. A real <img> is
     stable across normal loads, hard refreshes, bfcache/pageshow and image
     fallback handling. */
  .bmd23-landing__backdrop {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    display: block !important;
    overflow: hidden !important;
    pointer-events: none !important;
    background: #0b0e0c !important;
  }
  .bmd23-landing__backdrop img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    object-position: center 42% !important;
    opacity: .82 !important;
    visibility: visible !important;
    transform: scale(1.025) !important;
    filter: saturate(.9) contrast(1.03) !important;
  }
  .bmd23-landing::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      linear-gradient(90deg, rgba(3,5,4,.95) 0%, rgba(3,5,4,.82) 43%, rgba(3,5,4,.38) 72%, rgba(3,5,4,.18) 100%),
      radial-gradient(circle at 75% 40%, rgba(124,255,172,.11), transparent 28%),
      linear-gradient(180deg, transparent 52%, rgba(0,0,0,.45));
    pointer-events: none;
  }
  .bmd23-landing__copy { position: relative !important; z-index: 2 !important; max-width: 760px !important; }
  .bmd23-landing__eyebrow,
  .bmd23-eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    color: var(--bmdx-accent-2) !important;
    font-size: 10px !important;
    font-weight: 850 !important;
    letter-spacing: .135em !important;
    text-transform: uppercase;
  }
  .bmd23-landing__eyebrow::before,
  .bmd23-eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--bmdx-accent);
    box-shadow: 0 0 0 5px rgba(35,227,111,.10);
  }
  .bmd23-landing h1 {
    max-width: 820px !important;
    margin: 14px 0 18px !important;
    color: #fff !important;
    font-size: clamp(42px, 6.2vw, 92px) !important;
    line-height: .92 !important;
    font-weight: 900 !important;
    letter-spacing: -.065em !important;
    text-wrap: balance;
  }
  .bmd23-landing__copy > p {
    max-width: 640px !important;
    margin: 0 !important;
    color: #b9c1bc !important;
    font-size: clamp(13px, 1.15vw, 16px) !important;
    line-height: 1.7 !important;
  }
  .bmd23-landing__copy > p strong { color: #fff !important; font-weight: 800 !important; }
  .bmd23-landing__actions { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 10px !important; margin-top: 25px !important; }

  .bmd23-primary,
  .bmd23-secondary,
  .bmd23-circle {
    min-height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border-radius: 13px !important;
    font: 800 11px/1 Inter, ui-sans-serif, system-ui !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: transform .18s ease, filter .18s ease, background-color .18s ease, border-color .18s ease !important;
  }
  .bmd23-primary {
    padding: 0 18px !important;
    border: 1px solid transparent !important;
    background: linear-gradient(135deg, var(--bmdx-accent-2), var(--bmdx-accent)) !important;
    color: #041007 !important;
    box-shadow: 0 10px 26px rgba(35,227,111,.19) !important;
  }
  .bmd23-primary svg { width: 18px !important; height: 18px !important; }
  .bmd23-secondary {
    padding: 0 17px !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    background: rgba(255,255,255,.065) !important;
    color: #f2f5f3 !important;
    backdrop-filter: blur(8px);
  }
  .bmd23-circle {
    width: 48px !important;
    padding: 0 !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    background: rgba(255,255,255,.065) !important;
    color: #f2f5f3 !important;
  }
  .bmd23-circle svg { width: 18px !important; height: 18px !important; }
  .bmd23-primary:hover,
  .bmd23-secondary:hover,
  .bmd23-circle:hover { transform: translateY(-2px); filter: brightness(1.06); }

  .bmd23-landing__art {
    position: relative !important;
    z-index: 2 !important;
    width: min(100%, 390px) !important;
    justify-self: end !important;
    aspect-ratio: 1/1 !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    background: #151816 !important;
    box-shadow: 0 30px 80px rgba(0,0,0,.50) !important;
  }
  .bmd23-landing__art::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
    pointer-events: none;
  }
  .bmd23-landing__art > span {
    position: absolute !important;
    inset: auto 12px 12px 12px !important;
    z-index: 2 !important;
    display: block !important;
    padding: 11px 12px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 12px !important;
    background: rgba(5,7,6,.78) !important;
    backdrop-filter: blur(12px);
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
  }
  .bmd23-landing__art > span small { display: block !important; margin-top: 3px !important; color: #9ca59f !important; font-size: 9px !important; font-weight: 650 !important; }

  /* QUICK START */
  .bmd23-mobile-search { display: none !important; }
  .bmd23-quick-section { margin: 0 0 clamp(34px, 4vw, 58px) !important; }
  .bmd23-quick-section > header,
  .bmd23-news-section > header {
    display: flex !important;
    align-items: end !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin-bottom: 15px !important;
  }
  .bmd23-quick-section > header h2,
  .bmd23-news-section > header h2,
  .bmd23-browse > header h2 {
    margin: 0 !important;
    color: var(--bmdx-text) !important;
    font-size: clamp(22px, 2.2vw, 31px) !important;
    line-height: 1.05 !important;
    font-weight: 880 !important;
    letter-spacing: -.045em !important;
  }
  .bmd23-quick-section > header a,
  .bmd23-news-section > header > a {
    color: #9da6a0 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
  }
  .bmd23-quick-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 10px !important;
  }
  .bmd23-quick {
    min-width: 0 !important;
    min-height: 70px !important;
    display: grid !important;
    grid-template-columns: 70px minmax(0,1fr) 42px !important;
    align-items: center !important;
    overflow: hidden !important;
    border: 1px solid var(--bmdx-line) !important;
    border-radius: 15px !important;
    background: rgba(255,255,255,.04) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
    transition: transform .18s ease, background-color .18s ease, border-color .18s ease !important;
  }
  .bmd23-quick:hover { transform: translateY(-2px); background: rgba(255,255,255,.065) !important; border-color: rgba(255,255,255,.13) !important; }
  .bmd23-quick__cover { width: 70px !important; height: 70px !important; border-radius: 0 !important; }
  .bmd23-quick__copy { min-width: 0 !important; padding: 0 12px !important; }
  .bmd23-quick__copy > a { display: block !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #f7f8f7 !important; font-size: 11px !important; font-weight: 800 !important; text-decoration: none !important; }
  .bmd23-quick__copy > span { display: block !important; margin-top: 4px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--bmdx-muted) !important; font-size: 9px !important; }
  .bmd23-quick__play {
    width: 34px !important;
    height: 34px !important;
    display: grid !important;
    place-items: center !important;
    margin-right: 8px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--bmdx-accent) !important;
    color: #041007 !important;
    cursor: pointer;
    opacity: .94 !important;
  }
  .bmd23-quick__play svg { width: 15px !important; height: 15px !important; }

  /* STANDARD SECTIONS */
  .bmd23-section { margin: 0 0 clamp(40px, 5vw, 72px) !important; }
  .bmd23-section__header {
    display: flex !important;
    align-items: end !important;
    justify-content: space-between !important;
    gap: 18px !important;
    margin-bottom: 17px !important;
  }
  .bmd23-section__header h2 {
    margin: 7px 0 0 !important;
    color: var(--bmdx-text) !important;
    font-size: clamp(24px, 2.35vw, 34px) !important;
    line-height: 1 !important;
    font-weight: 890 !important;
    letter-spacing: -.05em !important;
  }
  .bmd23-section__header p { margin: 7px 0 0 !important; color: var(--bmdx-muted) !important; font-size: 11px !important; }
  .bmd23-section__tools { display: flex !important; align-items: center !important; gap: 7px !important; }
  .bmd23-showall {
    min-height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 11px !important;
    border-radius: 9px !important;
    color: #aeb6b1 !important;
    font-size: 9px !important;
    font-weight: 850 !important;
    text-decoration: none !important;
    transition: color .18s ease, background-color .18s ease !important;
  }
  .bmd23-showall:hover { color: #fff !important; background: rgba(255,255,255,.055) !important; }
  .bmd23-shelf-arrow {
    width: 34px !important;
    height: 34px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    border: 1px solid var(--bmdx-line) !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,.04) !important;
    color: #cbd2cd !important;
    cursor: pointer;
  }
  .bmd23-shelf-arrow svg { width: 15px !important; height: 15px !important; }
  .bmd23-shelf-arrow--prev svg { transform: rotate(180deg); }

  .bmd24-swiper { overflow: visible !important; }
  .bmd23-shelf { align-items: stretch !important; }

  /* MUSIC / RELEASE / PLAYLIST CARDS */
  .bmd23-card {
    position: relative !important;
    width: clamp(158px, 15vw, 218px) !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 9px !important;
    border: 1px solid transparent !important;
    border-radius: 18px !important;
    background: transparent !important;
    color: var(--bmdx-text) !important;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease !important;
  }
  .bmd23-card:hover {
    transform: translateY(-5px) !important;
    border-color: rgba(255,255,255,.09) !important;
    background: rgba(255,255,255,.045) !important;
    box-shadow: var(--bmdx-shadow-soft) !important;
  }
  .bmd23-card__art {
    position: relative !important;
    aspect-ratio: 1/1 !important;
    overflow: hidden !important;
    border-radius: 14px !important;
    background: var(--bmdx-panel-2) !important;
    box-shadow: 0 11px 28px rgba(0,0,0,.20);
  }
  .bmd23-card__cover { width: 100% !important; height: 100% !important; border-radius: inherit !important; }
  .bmd23-card__cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 56%, rgba(0,0,0,.24));
    pointer-events: none;
  }
  .bmd23-card__type {
    position: absolute !important;
    top: 9px !important;
    left: 9px !important;
    z-index: 2 !important;
    min-height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 8px !important;
    border: 1px solid rgba(255,255,255,.11) !important;
    border-radius: 8px !important;
    background: rgba(4,6,5,.74) !important;
    backdrop-filter: blur(8px);
    color: #d8ddd9 !important;
    font-size: 8px !important;
    font-weight: 850 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase;
  }
  .bmd23-card__play {
    position: absolute !important;
    right: 10px !important;
    bottom: 10px !important;
    z-index: 3 !important;
    width: 42px !important;
    height: 42px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: linear-gradient(145deg, var(--bmdx-accent-2), var(--bmdx-accent)) !important;
    color: #041007 !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.35), 0 4px 18px rgba(35,227,111,.18) !important;
    cursor: pointer;
    opacity: 0 !important;
    transform: translateY(7px) scale(.96) !important;
    transition: opacity .18s ease, transform .18s ease, filter .18s ease !important;
  }
  .bmd23-card:hover .bmd23-card__play,
  .bmd23-card:focus-within .bmd23-card__play { opacity: 1 !important; transform: translateY(0) scale(1) !important; }
  .bmd23-card__play:hover { filter: brightness(1.06); }
  .bmd23-card__play svg { width: 18px !important; height: 18px !important; }
  .bmd23-card__copy { min-width: 0 !important; padding: 12px 3px 4px !important; }
  .bmd23-card__title {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: #f3f6f4 !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: -.015em !important;
    text-decoration: none !important;
  }
  .bmd23-card__artist,
  .bmd23-card__description {
    min-height: 18px;
    margin: 5px 0 0 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: var(--bmdx-muted) !important;
    font-size: 9.5px !important;
    line-height: 1.45 !important;
  }
  .bmd23-card__artist a { color: inherit !important; text-decoration: none !important; }
  .bmd23-card__artist a:hover { color: #dfe4e1 !important; }
  .bmd23-card__foot { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; margin-top: 8px !important; color: #6f7972 !important; font-size: 8.5px !important; }
  .bmd23-card__share {
    width: 26px !important;
    height: 26px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #727c75 !important;
    cursor: pointer;
  }
  .bmd23-card__share:hover { background: rgba(255,255,255,.055) !important; color: #fff !important; }
  .bmd23-card__share svg { width: 13px !important; height: 13px !important; }

  /* ARTISTS */
  .bmd23-artist {
    width: clamp(148px, 14vw, 198px) !important;
    padding: 8px !important;
    border-radius: 18px !important;
    text-align: center !important;
    transition: transform .2s ease, background-color .2s ease !important;
  }
  .bmd23-artist:hover { transform: translateY(-4px); background: rgba(255,255,255,.04) !important; }
  .bmd23-artist__image {
    width: 100% !important;
    aspect-ratio: 1/1 !important;
    display: block !important;
    overflow: hidden !important;
    border-radius: 50% !important;
    background: var(--bmdx-panel-2) !important;
    box-shadow: 0 18px 35px rgba(0,0,0,.28);
  }
  .bmd23-artist__name { display: block !important; margin-top: 12px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #f3f6f4 !important; font-size: 11px !important; font-weight: 800 !important; text-decoration: none !important; }
  .bmd23-artist > span { display: block !important; margin-top: 3px !important; color: #6f7972 !important; font-size: 8px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .08em; }

  /* GENRE + MOOD */
  .bmd23-browse {
    margin: 0 0 clamp(42px, 5vw, 72px) !important;
    padding: clamp(22px, 3vw, 34px) !important;
    border: 1px solid var(--bmdx-line) !important;
    border-radius: 26px !important;
    background: linear-gradient(145deg, rgba(255,255,255,.042), rgba(255,255,255,.018)) !important;
  }
  .bmd23-browse > header { margin-bottom: 18px !important; }
  .bmd23-browse > header p { max-width: 560px !important; margin: 9px 0 0 !important; color: var(--bmdx-muted) !important; font-size: 10.5px !important; line-height: 1.55 !important; }
  .bmd23-browse-grid { display: grid !important; grid-template-columns: repeat(4,minmax(0,1fr)) !important; gap: 9px !important; }
  .bmd23-browse-card {
    position: relative !important;
    min-height: 112px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    padding: 16px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255,255,255,.075) !important;
    border-radius: 16px !important;
    background:
      radial-gradient(circle at 100% 0%, rgba(35,227,111,.12), transparent 45%),
      rgba(255,255,255,.035) !important;
    color: #fff !important;
    text-decoration: none !important;
    transition: transform .18s ease, border-color .18s ease, background-color .18s ease !important;
  }
  .bmd23-browse-card:hover { transform: translateY(-3px); border-color: rgba(124,255,172,.18) !important; background-color: rgba(255,255,255,.055) !important; }
  .bmd23-browse-card > span { position: relative; z-index: 2; font-size: 14px !important; font-weight: 850 !important; letter-spacing: -.025em; }
  .bmd23-browse-card > small { position: relative; z-index: 2; margin-top: 5px !important; color: #89948d !important; font-size: 9px !important; }
  .bmd23-browse-card > i { position: absolute !important; right: 12px !important; top: 5px !important; color: rgba(124,255,172,.15) !important; font-size: 58px !important; font-style: normal !important; line-height: 1 !important; transform: rotate(10deg); }

  /* ARTIST CTA */
  .bmd23-artist-cta {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    align-items: center !important;
    gap: 24px !important;
    margin: 0 0 clamp(44px, 5vw, 74px) !important;
    padding: clamp(28px, 4vw, 48px) !important;
    overflow: hidden !important;
    border: 1px solid rgba(124,255,172,.14) !important;
    border-radius: 28px !important;
    background:
      radial-gradient(circle at 88% 20%, rgba(35,227,111,.16), transparent 24rem),
      linear-gradient(135deg, #101612, #0d100e 64%, #0b0d0c) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  }
  .bmd23-artist-cta h2 { max-width: 760px !important; margin: 8px 0 10px !important; color: #fff !important; font-size: clamp(28px, 3.6vw, 50px) !important; line-height: .98 !important; font-weight: 900 !important; letter-spacing: -.055em !important; }
  .bmd23-artist-cta p { max-width: 660px !important; margin: 0 0 18px !important; color: #9da7a0 !important; font-size: 11px !important; line-height: 1.6 !important; }
  .bmd23-artist-cta > div > div { display: flex !important; flex-wrap: wrap !important; gap: 9px !important; }
  .bmd23-artist-cta__wave { display: flex !important; align-items: center !important; gap: 5px !important; height: 92px !important; padding: 0 20px !important; }
  .bmd23-artist-cta__wave i { width: 5px !important; border-radius: 99px !important; background: linear-gradient(to top, var(--bmdx-accent), var(--bmdx-accent-2)) !important; box-shadow: 0 0 18px rgba(35,227,111,.12); }
  .bmd23-artist-cta__wave i:nth-child(1), .bmd23-artist-cta__wave i:nth-child(7) { height: 25px; }
  .bmd23-artist-cta__wave i:nth-child(2), .bmd23-artist-cta__wave i:nth-child(6) { height: 48px; }
  .bmd23-artist-cta__wave i:nth-child(3), .bmd23-artist-cta__wave i:nth-child(5) { height: 72px; }
  .bmd23-artist-cta__wave i:nth-child(4) { height: 92px; }

  /* NEWS */
  .bmd23-news-section { margin: 0 0 24px !important; }
  .bmd23-news-grid { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 10px !important; }
  .bmd23-news {
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 116px minmax(0,1fr) !important;
    overflow: hidden !important;
    border: 1px solid var(--bmdx-line) !important;
    border-radius: 17px !important;
    background: rgba(255,255,255,.03) !important;
    transition: background-color .18s ease, border-color .18s ease, transform .18s ease !important;
  }
  .bmd23-news:hover { transform: translateY(-2px); background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.12) !important; }
  .bmd23-news > a { width: 116px !important; height: 116px !important; border-radius: 0 !important; }
  .bmd23-news > div { min-width: 0 !important; padding: 14px !important; }
  .bmd23-news > div > span { display: block !important; margin-bottom: 6px !important; color: var(--bmdx-accent) !important; font-size: 8px !important; font-weight: 850 !important; letter-spacing: .08em !important; text-transform: uppercase; }
  .bmd23-news > div > a { display: -webkit-box !important; overflow: hidden !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #f3f6f4 !important; font-size: 12px !important; font-weight: 820 !important; line-height: 1.3 !important; text-decoration: none !important; }
  .bmd23-news p { margin: 7px 0 0 !important; display: -webkit-box !important; overflow: hidden !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: var(--bmdx-muted) !important; font-size: 9px !important; line-height: 1.45 !important; }

  /* SEARCH DIALOG */
  .bmd23-search {
    width: 100vw !important;
    max-width: none !important;
    height: 100vh !important;
    max-height: none !important;
    padding: 0 !important;
    border: 0 !important;
    background: rgba(0,0,0,.52) !important;
    backdrop-filter: blur(12px) !important;
  }
  .bmd23-search::backdrop { background: rgba(0,0,0,.48) !important; backdrop-filter: blur(10px); }
  .bmd23-search__backdrop { position: fixed !important; inset: 0 !important; border: 0 !important; background: transparent !important; }
  .bmd23-search__dialog {
    position: relative !important;
    z-index: 2 !important;
    width: min(92vw, 760px) !important;
    max-height: min(84vh, 760px) !important;
    margin: min(9vh, 72px) auto 0 !important;
    padding: 22px !important;
    overflow: auto !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 24px !important;
    background: #0f1210 !important;
    color: var(--bmdx-text) !important;
    box-shadow: 0 40px 100px rgba(0,0,0,.58) !important;
  }
  .bmd23-search__dialog > header { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; }
  .bmd23-search__dialog h2 { margin: 7px 0 0 !important; color: #fff !important; font-size: 27px !important; font-weight: 890 !important; letter-spacing: -.045em !important; }
  .bmd23-search__dialog > header button { width: 36px !important; height: 36px !important; display: grid !important; place-items: center !important; border: 1px solid var(--bmdx-line) !important; border-radius: 11px !important; background: rgba(255,255,255,.04) !important; color: #fff !important; }
  .bmd23-search__dialog > header button svg { width: 17px !important; height: 17px !important; }
  .bmd23-search__form {
    display: grid !important;
    grid-template-columns: 20px minmax(0,1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 18px !important;
    padding: 7px 7px 7px 14px !important;
    border: 1px solid var(--bmdx-line-strong) !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.05) !important;
  }
  .bmd23-search__form > span svg { width: 18px !important; height: 18px !important; color: #7f8983 !important; }
  .bmd23-search__form input { min-width: 0 !important; height: 42px !important; border: 0 !important; outline: 0 !important; background: transparent !important; color: #fff !important; font: 600 13px/1 Inter, ui-sans-serif, system-ui !important; }
  .bmd23-search__form input::placeholder { color: #69726d !important; }
  .bmd23-search__form > button { min-height: 38px !important; padding: 0 14px !important; border: 0 !important; border-radius: 10px !important; background: var(--bmdx-accent) !important; color: #041007 !important; font-size: 10px !important; font-weight: 850 !important; }
  .bmd23-search__status { margin: 14px 2px !important; color: #7f8882 !important; font-size: 10px !important; }
  .bmd23-search__all { display: inline-flex !important; margin-top: 12px !important; color: var(--bmdx-accent-2) !important; font-size: 10px !important; font-weight: 800 !important; }

  .bmd23-bottom-nav { display: none !important; }

  /* LIGHT THEME COMPATIBILITY — visual only; existing toggle remains authoritative */
  html[data-theme="light"] body.bmd24-page,
  body.bmd24-page[data-theme="light"],
  body.bmd24-page.theme-light,
  body.bmd24-page.light-theme {
    --bmdx-bg: #f5f7f5;
    --bmdx-bg-soft: #eef1ee;
    --bmdx-panel: #ffffff;
    --bmdx-panel-2: #f2f4f2;
    --bmdx-panel-3: #e9ecea;
    --bmdx-text: #111512;
    --bmdx-text-2: #39423c;
    --bmdx-muted: #6d786f;
    --bmdx-line: rgba(10,22,13,.09);
    --bmdx-line-strong: rgba(10,22,13,.15);
    --bmdx-shadow: 0 24px 70px rgba(34,53,40,.12);
    --bmdx-shadow-soft: 0 12px 32px rgba(34,53,40,.09);
    background: #f5f7f5 !important;
  }
  html[data-theme="light"] .bmd23-sidebar,
  body.bmd24-page[data-theme="light"] .bmd23-sidebar,
  body.bmd24-page.theme-light .bmd23-sidebar,
  body.bmd24-page.light-theme .bmd23-sidebar { background: rgba(250,252,250,.95) !important; }
  html[data-theme="light"] .bmd23-topbar,
  body.bmd24-page[data-theme="light"] .bmd23-topbar,
  body.bmd24-page.theme-light .bmd23-topbar,
  body.bmd24-page.light-theme .bmd23-topbar { background: rgba(245,247,245,.82) !important; }
  html[data-theme="light"] .bmd23-card__title,
  html[data-theme="light"] .bmd23-quick__copy > a,
  html[data-theme="light"] .bmd23-section__header h2,
  html[data-theme="light"] .bmd23-quick-section > header h2,
  html[data-theme="light"] .bmd23-news-section > header h2,
  html[data-theme="light"] .bmd23-browse > header h2,
  body.bmd24-page[data-theme="light"] .bmd23-card__title,
  body.bmd24-page[data-theme="light"] .bmd23-section__header h2 { color: var(--bmdx-text) !important; }

  /* TABLET */
  @media (max-width: 1180px) {
    :root { --bmdx-sidebar: 228px; }
    .bmd23-quick-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
    .bmd23-browse-grid { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
    .bmd23-landing { grid-template-columns: minmax(0,1.25fr) minmax(190px,.75fr) !important; }
  }

  /* MOBILE / SMALL TABLET */
  @media (max-width: 899px) {
    :root { --bmdx-topbar: 64px; }
    body.bmd24-page { padding-bottom: 74px !important; }
    .bmd23-layout { display: block !important; }

    .bmd23-sidebar {
      position: fixed !important;
      inset: 0 auto 0 0 !important;
      z-index: 120 !important;
      width: min(88vw, 330px) !important;
      height: 100dvh !important;
      padding-top: 58px !important;
      box-shadow: 28px 0 80px rgba(0,0,0,.48) !important;
    }

    .bmd24-nav-close {
      position: absolute !important;
      top: 12px !important;
      right: 12px !important;
      width: 36px !important;
      height: 36px !important;
      display: grid !important;
      place-items: center !important;
      border: 1px solid var(--bmdx-line) !important;
      border-radius: 11px !important;
      background: rgba(255,255,255,.055) !important;
      color: #fff !important;
    }
    .bmd24-nav-close svg { width: 16px !important; height: 16px !important; }

    .bmd23-sidebar-backdrop {
      position: fixed !important;
      inset: 0 !important;
      z-index: 110 !important;
      display: block !important;
      border: 0 !important;
      background: rgba(0,0,0,.55) !important;
      backdrop-filter: blur(5px);
    }

    .bmd23-topbar {
      grid-template-columns: 40px 40px minmax(0,1fr) auto !important;
      gap: 8px !important;
      height: var(--bmdx-topbar) !important;
      padding: 9px 12px !important;
    }
    .bmd23-menu,
    .bmd23-mobile-brand {
      width: 40px !important;
      height: 40px !important;
      display: grid !important;
      place-items: center !important;
      padding: 0 !important;
      border: 1px solid var(--bmdx-line) !important;
      border-radius: 12px !important;
      background: rgba(255,255,255,.04) !important;
      color: #e9eeeb !important;
    }
    .bmd23-menu svg { width: 18px !important; height: 18px !important; }
    .bmd23-mobile-brand .bmd23-brand__mark { width: 30px !important; height: 30px !important; flex-basis: 30px !important; border-radius: 9px !important; padding: 7px 6px !important; }
    .bmd23-search-trigger { min-height: 40px !important; border-radius: 12px !important; }
    .bmd23-search-trigger span { display: none !important; }
    .bmd23-search-trigger kbd { display: none !important; }
    .bmd23-search-trigger { width: 40px !important; justify-content: center !important; padding: 0 !important; }
    .bmd23-topbar__actions { min-width: 0 !important; }
    .bmd23-topbar__upload { display: none !important; }
    .bmd23-account { min-height: 40px !important; padding: 0 6px !important; }
    .bmd23-account strong { display: none !important; }
    .bmd23-account > span { width: 28px !important; height: 28px !important; }

    .bmd23-content { padding: 14px 13px 120px !important; }
    .bmd23-landing {
      grid-template-columns: minmax(0,1fr) !important;
      align-items: end !important;
      min-height: 440px !important;
      padding: 24px !important;
      margin-bottom: 24px !important;
      border-radius: 24px !important;
      background:
        linear-gradient(180deg, rgba(4,6,5,.20) 0%, rgba(4,6,5,.45) 38%, rgba(4,6,5,.96) 82%),
        var(--bmd23-hero-image) center 28%/cover no-repeat !important;
    }
    .bmd23-landing__copy { align-self: end !important; }
    .bmd23-landing h1 { max-width: 96% !important; font-size: clamp(38px, 13vw, 62px) !important; line-height: .94 !important; margin: 11px 0 13px !important; }
    .bmd23-landing__copy > p { font-size: 11px !important; line-height: 1.55 !important; }
    .bmd23-landing__actions { margin-top: 18px !important; }
    .bmd23-primary, .bmd23-secondary { min-height: 44px !important; }
    .bmd23-circle { width: 44px !important; min-height: 44px !important; }
    /* V31: mobile foreground hero artwork is intentionally visible. */

    .bmd23-mobile-search { display: block !important; margin: 0 0 25px !important; }
    .bmd23-mobile-search button {
      width: 100% !important;
      min-height: 48px !important;
      display: flex !important;
      align-items: center !important;
      gap: 10px !important;
      padding: 0 14px !important;
      border: 1px solid var(--bmdx-line) !important;
      border-radius: 13px !important;
      background: rgba(255,255,255,.045) !important;
      color: #aab2ad !important;
      font-size: 10px !important;
      text-align: left !important;
    }
    .bmd23-mobile-search svg { width: 17px !important; height: 17px !important; }

    .bmd23-quick-grid { grid-template-columns: 1fr !important; gap: 7px !important; }
    .bmd23-quick { min-height: 62px !important; grid-template-columns: 62px minmax(0,1fr) 40px !important; border-radius: 13px !important; }
    .bmd23-quick__cover { width: 62px !important; height: 62px !important; }

    .bmd23-section { margin-bottom: 38px !important; }
    .bmd23-section__header { margin-bottom: 12px !important; }
    .bmd23-section__header h2 { font-size: 24px !important; }
    .bmd23-section__tools { gap: 3px !important; }
    .bmd23-shelf-arrow { display: none !important; }
    .bmd23-showall { padding: 0 4px !important; }

    .bmd24-swiper.swiper { margin-inline: -13px !important; padding-inline: 13px !important; }
    .bmd24-swiper.swiper > .swiper-wrapper,
    .bmd24-swiper.swiper .bmd23-shelf { gap: 2px !important; padding-right: 11px !important; }
    .bmd23-card { width: 154px !important; padding: 6px !important; border-radius: 15px !important; }
    .bmd23-card:hover { transform: none !important; box-shadow: none !important; }
    .bmd23-card__art { border-radius: 12px !important; }
    .bmd23-card__play { width: 36px !important; height: 36px !important; right: 8px !important; bottom: 8px !important; opacity: 1 !important; transform: none !important; }
    .bmd23-card__play svg { width: 15px !important; height: 15px !important; }
    .bmd23-card__type { top: 7px !important; left: 7px !important; min-height: 21px !important; font-size: 7px !important; }
    .bmd23-card__copy { padding-top: 9px !important; }
    .bmd23-card__title { font-size: 10.5px !important; }
    .bmd23-card__artist, .bmd23-card__description { font-size: 8.5px !important; }

    .bmd23-artist { width: 142px !important; padding: 7px !important; }
    .bmd23-browse { margin-inline: 0 !important; padding: 18px !important; border-radius: 20px !important; }
    .bmd23-browse-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 7px !important; }
    .bmd23-browse-card { min-height: 92px !important; padding: 13px !important; border-radius: 13px !important; }
    .bmd23-browse-card > span { font-size: 12px !important; }

    .bmd23-artist-cta { grid-template-columns: 1fr !important; padding: 24px !important; border-radius: 22px !important; }
    .bmd23-artist-cta h2 { font-size: clamp(29px, 9vw, 42px) !important; }
    .bmd23-artist-cta__wave { display: none !important; }
    .bmd23-news-grid { grid-template-columns: 1fr !important; }

    .bmd23-bottom-nav {
      position: fixed !important;
      left: 8px !important;
      right: 8px !important;
      bottom: 8px !important;
      z-index: 100 !important;
      min-height: 64px !important;
      display: grid !important;
      grid-template-columns: repeat(5,minmax(0,1fr)) !important;
      align-items: center !important;
      padding: 5px !important;
      border: 1px solid rgba(255,255,255,.11) !important;
      border-radius: 18px !important;
      background: rgba(10,12,10,.90) !important;
      backdrop-filter: blur(20px) saturate(140%) !important;
      -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
      box-shadow: 0 18px 50px rgba(0,0,0,.42) !important;
    }
    .bmd23-bottom-nav a,
    .bmd23-bottom-nav button {
      min-width: 0 !important;
      min-height: 52px !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 4px !important;
      padding: 4px 2px !important;
      border: 0 !important;
      border-radius: 13px !important;
      background: transparent !important;
      color: #7f8982 !important;
      font: 700 8px/1 Inter, ui-sans-serif, system-ui !important;
      text-decoration: none !important;
    }
    .bmd23-bottom-nav a svg,
    .bmd23-bottom-nav button svg { width: 18px !important; height: 18px !important; }
    .bmd23-bottom-nav a.is-active { background: rgba(35,227,111,.12) !important; color: var(--bmdx-accent-2) !important; }

    .bmd23-search__dialog { width: calc(100vw - 20px) !important; max-height: calc(100dvh - 40px) !important; margin: 20px auto 0 !important; padding: 17px !important; border-radius: 20px !important; }
    .bmd23-search__dialog h2 { font-size: 23px !important; }
  }

  @media (max-width: 540px) {
    .bmd23-content { padding-inline: 10px !important; }
    .bmd23-landing { min-height: 410px !important; padding: 21px !important; border-radius: 21px !important; }
    .bmd23-mobile-search { margin-inline: 2px !important; }
    .bmd24-swiper.swiper { margin-inline: -10px !important; padding-inline: 10px !important; }
    .bmd23-card { width: 148px !important; }
    .bmd23-browse { padding: 15px !important; }
    .bmd23-news { grid-template-columns: 92px minmax(0,1fr) !important; }
    .bmd23-news > a { width: 92px !important; height: 100% !important; min-height: 100px !important; }
    .bmd23-news > div { padding: 12px !important; }
  }

  @media (prefers-reduced-motion: reduce) {
    .bmd23-nav a,
    .bmd23-nav button,
    .bmd23-card,
    .bmd23-quick,
    .bmd23-primary,
    .bmd23-secondary,
    .bmd23-circle,
    .bmd23-browse-card,
    .bmd23-news { transition: none !important; }
  }

/* ===== Single canonical shell ===== */
.bmd23-home--single-shell{
    container-name:bmd-home-content;
    container-type:inline-size;
    width:100%;
    min-width:0;
    min-height:100vh;
    background:transparent!important;
    isolation:isolate;
  }

  .bmd23-home--single-shell .bmd23-content{
    width:min(100%, 1680px)!important;
    max-width:1680px!important;
    margin:0 auto!important;
    padding:22px clamp(14px, 2.15vw, 36px) 132px!important;
  }

  /* The real global header owns the top of the page. */
  .bmd23-home--single-shell .bmd23-landing{
    margin-top:0!important;
  }

  /* Card shelves remain horizontally fluid without depending on a second app shell. */
  .bmd23-home--single-shell .bmd24-swiper,
  .bmd23-home--single-shell .bmd23-shelf{
    min-width:0!important;
  }

  /* Modern component responsiveness based on the homepage container, not only viewport width. */
  @container bmd-home-content (max-width: 760px){
    .bmd23-home--single-shell .bmd23-content{
      padding-inline:12px!important;
      padding-top:12px!important;
      padding-bottom:118px!important;
    }
    .bmd23-home--single-shell .bmd23-landing{
      border-radius:22px!important;
    }
  }

  @container bmd-home-content (min-width: 1180px){
    .bmd23-home--single-shell .bmd23-content{
      padding-inline:clamp(24px, 2.4vw, 42px)!important;
    }
  }

/* ===== Hero responsive artwork ===== */
/* Desktop: stop pinning the copy to the bottom of an oversized 610px panel. */
  .bmd23-home--single-shell .bmd23-landing{
    align-items:center!important;
    min-height:clamp(360px, 34vw, 470px)!important;
    padding:clamp(26px, 3.2vw, 46px)!important;
    gap:clamp(22px, 3vw, 42px)!important;
  }
  .bmd23-home--single-shell .bmd23-landing__copy{
    align-self:center!important;
  }
  .bmd23-home--single-shell .bmd23-landing__art{
    width:min(100%, 330px)!important;
    align-self:center!important;
  }
  .bmd23-home--single-shell .bmd23-landing h1{
    font-size:clamp(42px, 5.4vw, 76px)!important;
  }

  /* Phones/tablets: the previous theme explicitly set the cover to display:none.
     Use a real artwork card above the copy instead of relying on a background image. */
  @media (max-width:899px){
    .bmd23-home--single-shell .bmd23-content{
      padding-top:12px!important;
    }
    .bmd23-home--single-shell .bmd23-landing{
      grid-template-columns:minmax(0,1fr)!important;
      grid-template-areas:
        "art"
        "copy"!important;
      align-items:start!important;
      min-height:0!important;
      height:auto!important;
      gap:20px!important;
      padding:18px!important;
      margin-bottom:26px!important;
      background:
        radial-gradient(circle at 50% 8%, rgba(124,255,172,.11), transparent 34%),
        linear-gradient(180deg, #17150c 0%, #111510 35%, #070908 100%)!important;
    }
    .bmd23-home--single-shell .bmd23-landing__backdrop{
      display:none!important;
    }
    .bmd23-home--single-shell .bmd23-landing__art{
      grid-area:art!important;
      display:block!important;
      width:min(72vw, 300px)!important;
      max-width:300px!important;
      min-width:0!important;
      aspect-ratio:1 / 1!important;
      justify-self:center!important;
      align-self:start!important;
      border-radius:20px!important;
      box-shadow:0 20px 50px rgba(0,0,0,.42)!important;
    }
    .bmd23-home--single-shell .bmd23-landing__art img{
      display:block!important;
      width:100%!important;
      height:100%!important;
      min-width:100%!important;
      min-height:100%!important;
      object-fit:cover!important;
      opacity:1!important;
      visibility:visible!important;
    }
    .bmd23-home--single-shell .bmd23-landing__art > span{
      inset:auto 10px 10px 10px!important;
      padding:9px 10px!important;
      border-radius:11px!important;
    }
    .bmd23-home--single-shell .bmd23-landing__copy{
      grid-area:copy!important;
      align-self:start!important;
      width:100%!important;
      max-width:none!important;
    }
    .bmd23-home--single-shell .bmd23-landing h1{
      max-width:100%!important;
      margin:10px 0 12px!important;
      font-size:clamp(38px, 11.7vw, 54px)!important;
      line-height:.94!important;
    }
    .bmd23-home--single-shell .bmd23-landing__copy > p{
      font-size:12px!important;
      line-height:1.55!important;
    }
    .bmd23-home--single-shell .bmd23-landing__actions{
      margin-top:16px!important;
    }
  }

  @media (max-width:540px){
    .bmd23-home--single-shell .bmd23-landing{
      min-height:0!important;
      padding:14px!important;
      gap:17px!important;
      border-radius:20px!important;
    }
    .bmd23-home--single-shell .bmd23-landing__art{
      width:min(74vw, 270px)!important;
      max-width:270px!important;
      border-radius:18px!important;
    }
    .bmd23-home--single-shell .bmd23-landing h1{
      font-size:clamp(37px, 12.4vw, 50px)!important;
    }
  }


/* ===== V31 production hardening ===== */
.bmd23-home [data-bmd24-swiper].bmd-mobile-native-shelf {
  overflow-x:auto!important; overflow-y:hidden!important;
  -webkit-overflow-scrolling:touch; overscroll-behavior-inline:contain; scrollbar-width:none;
}
.bmd23-home [data-bmd24-swiper].bmd-mobile-native-shelf::-webkit-scrollbar{display:none}
.bmd23-home [data-bmd24-swiper].bmd-mobile-native-shelf>.bmd23-shelf{transform:none!important}
@media (max-width:899px),(hover:none) and (pointer:coarse){
  .bmd23-home .bmd23-landing__art{display:block!important}
  .bmd23-home .bmd23-landing__art img,.bmd23-home .bmd23-card__cover img,.bmd23-home .bmd23-quick__cover img,.bmd23-home .bmd23-artist__image img,.bmd23-home .bmd23-news img{opacity:1!important;visibility:visible!important}
}