/*
====================================================================
 OSBEATS HOMEPAGE — UNIVERSAL MUSIC THEME V1
 Independent Music. Direct From Creators.
====================================================================
*/


/* ================================================================
   PAGE
================================================================ */

.os-universal-home{
  width:min(1440px,94vw);
  margin:16px auto 22px;
  color:#f7f7f8;
}

.os-universal-home *,
.os-universal-home *::before,
.os-universal-home *::after{
  box-sizing:border-box;
}


/* ================================================================
   GLOBAL PANELS
================================================================ */

.os-universal-panel,
.os-genre-section{
  background:
    linear-gradient(180deg,#18181c 0%,#0c0c0f 100%);
  border:1px solid #26262d;
  box-shadow:0 8px 22px rgba(0,0,0,.20);
}

.os-universal-panel{
  overflow:hidden;
}


/* ================================================================
   SECTION HEADINGS
================================================================ */

.os-universal-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  padding:12px 14px;
}

.os-universal-heading.compact{
  min-height:58px;
  align-items:center;
  border-bottom:1px solid #28282e;
}

.os-universal-heading > div{
  min-width:0;
}

.os-universal-heading h2{
  margin:1px 0 0;
  color:#fff;
  font-size:20px;
  line-height:1.1;
  font-weight:900;
  letter-spacing:-.35px;
  text-transform:none;
}

.os-universal-heading p{
  margin:3px 0 0;
  color:#8f9199;
  font-size:10px;
  line-height:1.35;
}

.os-universal-kicker{
  display:block;
  color:#a8aab1;
  font-size:8px;
  font-weight:900;
  letter-spacing:1.35px;
  text-transform:uppercase;
}

.os-universal-heading a{
  flex:0 0 auto;
  color:#ef334f;
  font-size:11px;
  font-weight:900;
  text-decoration:none;
}

.os-universal-heading a:hover{
  color:#fff;
}


/* ================================================================
   BROWSE BY GENRE
================================================================ */

.os-genre-section{
  margin-bottom:12px;
}

.os-genre-section .os-universal-heading{
  border-bottom:1px solid #27272d;
}

.os-genre-grid{
  display:grid;
  grid-template-columns:repeat(14,minmax(74px,1fr));
  gap:7px;
  padding:9px;
}

.os-genre-card{
  position:relative;
  min-height:102px;
  overflow:hidden;
  border:1px solid #35353d;
  color:#fff;
  text-decoration:none;
  background:#17171c;
}

.os-genre-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.08),
      rgba(0,0,0,.14) 45%,
      rgba(0,0,0,.88)
    );
}

.os-genre-card::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.9;
  transition:transform .2s ease;
}

.os-genre-card:hover::after{
  transform:scale(1.06);
}

.os-genre-card span{
  position:absolute;
  z-index:2;
  left:8px;
  bottom:8px;
  font-size:12px;
  font-weight:900;
  text-shadow:0 1px 5px #000;
}

.genre-pop::after{
  background:
    radial-gradient(circle at 60% 25%,#ff7cae,transparent 28%),
    linear-gradient(135deg,#8b173c,#2d0715);
}

.genre-hiphop::after{
  background:
    radial-gradient(circle at 50% 28%,#e23434,transparent 28%),
    linear-gradient(135deg,#481010,#09090b);
}

.genre-rnb::after{
  background:
    radial-gradient(circle at 45% 30%,#c747d2,transparent 30%),
    linear-gradient(135deg,#4e1653,#120715);
}

.genre-rock::after{
  background:
    radial-gradient(circle at 65% 22%,#3b84b7,transparent 30%),
    linear-gradient(135deg,#162735,#080b0f);
}

.genre-country::after{
  background:
    radial-gradient(circle at 55% 20%,#d97f35,transparent 30%),
    linear-gradient(135deg,#6e3815,#16100a);
}

.genre-gospel::after{
  background:
    radial-gradient(circle at 50% 25%,#795cff,transparent 30%),
    linear-gradient(135deg,#29174d,#0c0814);
}

.genre-electronic::after{
  background:
    radial-gradient(circle at 50% 30%,#594bff,transparent 28%),
    linear-gradient(135deg,#172f71,#081022);
}

.genre-latin::after{
  background:
    radial-gradient(circle at 60% 25%,#ff6240,transparent 30%),
    linear-gradient(135deg,#8a2917,#27100a);
}

.genre-jazz::after{
  background:
    radial-gradient(circle at 48% 25%,#4b91b7,transparent 28%),
    linear-gradient(135deg,#183b51,#091218);
}

.genre-reggae::after{
  background:
    radial-gradient(circle at 50% 26%,#63a02c,transparent 28%),
    linear-gradient(135deg,#31511b,#0f1709);
}

.genre-afrobeats::after{
  background:
    radial-gradient(circle at 48% 27%,#d67627,transparent 28%),
    linear-gradient(135deg,#613015,#1e1108);
}

.genre-classical::after{
  background:
    radial-gradient(circle at 55% 20%,#c7a47d,transparent 28%),
    linear-gradient(135deg,#4a392e,#14100d);
}

.genre-alternative::after{
  background:
    radial-gradient(circle at 54% 24%,#d31f53,transparent 30%),
    linear-gradient(135deg,#551029,#12070d);
}

.genre-more::after{
  background:
    radial-gradient(circle at 50% 30%,#777,transparent 28%),
    linear-gradient(135deg,#29292d,#0c0c0e);
}


/* ================================================================
   FEATURED + TRACKS
================================================================ */

.os-universal-feature-grid{
  display:grid;
  grid-template-columns:minmax(0,2.2fr) minmax(300px,.78fr);
  gap:10px;
  margin-bottom:12px;
}

.os-feature-promo #homeSecondarySlider{
  min-height:300px;
  height:300px;
}

.os-feature-promo .managed-secondary-fallback{
  min-height:300px;
  height:300px;
}

.os-feature-promo .managed-slide-fallback-copy{
  padding:48px 44px;
}

.os-featured-tracks #featuredTracks{
  max-height:300px;
  overflow:auto;
  scrollbar-width:thin;
  scrollbar-color:#3f3f46 #0d0d10;
}

.os-featured-tracks .mini-track{
  min-height:48px;
  padding:6px 9px;
  background:#0f0f12;
  border-bottom:1px solid #26262c;
}

.os-featured-tracks .mini-track:hover{
  background:#17171c;
}

.os-featured-tracks .mini-thumb{
  width:36px;
  height:36px;
}

.os-featured-tracks .mini-meta b{
  color:#fff;
  font-size:10px;
}

.os-featured-tracks .mini-meta span{
  font-size:9px;
}

.os-featured-tracks .round-play{
  width:25px;
  height:25px;
  border-color:#6f0b14;
  background:#4f070d;
}


/* ================================================================
   PRIMARY CONTENT GRID
================================================================ */

.os-universal-content-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:10px;
  margin-bottom:12px;
  align-items:stretch;
}

.os-universal-main,
.os-universal-side{
  min-width:0;
}

.os-music-shelf,
.os-creators-panel,
.os-trending-panel,
.os-featured-artist-panel{
  height:100%;
}


/* ================================================================
   NEW RELEASES
================================================================ */

.os-universal-home #latestGrid.card-row{
  display:grid !important;
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  gap:8px !important;
  padding:10px !important;
}

.os-universal-home #latestGrid .homepage-track-card{
  min-width:0 !important;
  width:auto !important;
  max-width:none !important;
  background:#0e0e11 !important;
  border:1px solid #292930 !important;
  border-radius:4px !important;
}

.os-universal-home #latestGrid .homepage-track-cover{
  width:100% !important;
  aspect-ratio:1/1 !important;
}

.os-universal-home #latestGrid .homepage-track-cover-image{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}

.os-universal-home #latestGrid .homepage-track-body{
  padding:7px !important;
}

.os-universal-home #latestGrid .track-link b{
  font-size:10px !important;
}

.os-universal-home #latestGrid .artist-link{
  font-size:9px !important;
}

.os-universal-home #latestGrid .card-foot{
  font-size:9px !important;
}


/* ================================================================
   TRENDING NOW
================================================================ */

.os-trending-panel #trendingGrid.card-row{
  display:block !important;
  padding:0 !important;
}

.os-trending-panel #trendingGrid .homepage-track-card{
  display:grid !important;
  grid-template-columns:46px minmax(0,1fr) 26px !important;
  gap:7px !important;
  align-items:center !important;
  min-height:50px !important;
  padding:5px 7px !important;
  border:0 !important;
  border-bottom:1px solid #292930 !important;
  border-radius:0 !important;
  background:#0e0e11 !important;
}

.os-trending-panel #trendingGrid .homepage-track-cover-link{
  display:block !important;
  width:46px !important;
}

.os-trending-panel #trendingGrid .homepage-track-cover{
  width:46px !important;
  height:40px !important;
  aspect-ratio:auto !important;
}

.os-trending-panel #trendingGrid .homepage-track-cover-image{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}

.os-trending-panel #trendingGrid .homepage-track-body{
  min-width:0 !important;
  padding:0 !important;
}

.os-trending-panel #trendingGrid .track-link b{
  display:block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:9.5px !important;
}

.os-trending-panel #trendingGrid .artist-link{
  font-size:8.5px !important;
}

.os-trending-panel #trendingGrid .card-foot{
  display:none !important;
}


/* ================================================================
   FEATURED CREATORS
================================================================ */

.os-creator-source-wrap{
  display:block;
}

.os-universal-home #artistGrid.card-row,
.os-universal-home #producerGrid.card-row{
  display:grid !important;
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  gap:8px !important;
  padding:10px !important;
}

.os-universal-home #producerGrid.card-row{
  padding-top:0 !important;
}

.os-universal-home .featured-creator-card{
  width:auto !important;
  max-width:none !important;
  background:#0e0e11 !important;
  border:1px solid #292930 !important;
  border-radius:4px !important;
}

.os-universal-home .featured-creator-cover{
  width:100% !important;
  aspect-ratio:1 / .68 !important;
}

.os-universal-home .featured-creator-image{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}

.os-universal-home .featured-creator-body{
  padding:7px !important;
}

.os-universal-home .featured-creator-title b{
  font-size:10px !important;
}

.os-universal-home .featured-creator-stats,
.os-universal-home .featured-creator-view{
  font-size:8.5px !important;
}


/* ================================================================
   FEATURED ARTIST
================================================================ */

.os-featured-artist-panel .sponsored-card{
  padding:9px;
}

.os-featured-artist-panel .sponsor-art{
  height:210px;
}

.os-featured-artist-panel .pill{
  margin-top:8px;
}

.os-featured-artist-panel h3{
  margin:7px 0 4px;
  font-size:14px;
}

.os-featured-artist-panel p{
  margin:0;
  color:#a0a2aa;
  font-size:9.5px;
}


/* ================================================================
   CHARTS + TOP SELLERS
================================================================ */

.os-universal-bottom-grid{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(320px,.75fr);
  gap:10px;
  margin-bottom:12px;
}

.os-chart-tabs{
  display:flex;
  gap:5px;
  padding:7px 10px;
  border-bottom:1px solid #292930;
  background:#111114;
}

.os-chart-tabs span{
  padding:4px 11px;
  border:1px solid #36363d;
  color:#aaaeb7;
  font-size:9px;
}

.os-chart-tabs span.active{
  background:#d7192d;
  border-color:#d7192d;
  color:#fff;
  font-weight:900;
}

.os-chart-panel #chartList{
  display:grid;
  grid-template-columns:1fr 1fr;
}

.os-chart-panel .chart-item,
.os-sellers-panel .chart-item{
  min-height:42px;
  padding:5px 8px;
  background:#0e0e11;
  border-bottom:1px solid #292930;
}

.os-chart-panel .chart-item{
  border-right:1px solid #292930;
}

.os-chart-panel .chart-meta b,
.os-sellers-panel .chart-meta b{
  font-size:9.5px;
}

.os-chart-panel .chart-meta span,
.os-sellers-panel .chart-meta span{
  font-size:8.5px;
}


/* ================================================================
   MEDIA
================================================================ */

@media(max-width:1180px){

  .os-genre-grid{
    grid-template-columns:repeat(7,minmax(84px,1fr));
  }

  .os-universal-home #latestGrid.card-row,
  .os-universal-home #artistGrid.card-row,
  .os-universal-home #producerGrid.card-row{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }

}


@media(max-width:900px){

  .os-universal-home{
    width:94vw;
  }

  .os-universal-feature-grid,
  .os-universal-content-grid,
  .os-universal-bottom-grid{
    grid-template-columns:1fr;
  }

  .os-genre-grid{
    grid-template-columns:repeat(4,minmax(76px,1fr));
  }

  .os-universal-home #latestGrid.card-row,
  .os-universal-home #artistGrid.card-row,
  .os-universal-home #producerGrid.card-row{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .os-chart-panel #chartList{
    grid-template-columns:1fr;
  }

}


@media(max-width:560px){

  .os-genre-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .os-genre-card{
    min-height:88px;
  }

  .os-universal-heading h2{
    font-size:17px;
  }

  .os-universal-heading p{
    display:none;
  }

}


/*
====================================================================
 OSBEATS HOMEPAGE — UNIVERSAL MUSIC THEME V2
 Visual fidelity pass against approved mockup
 2026-09-29

 Changes:
 - Browse by Genre now uses original portrait-style face cards
 - New Releases fills width better with current live item count
 - Featured Creators becomes a tighter unified creator shelf
 - Featured / Promotions and right rail tightened
 - Does NOT alter approved top hero container
====================================================================
*/


/* ================================================================
   OVERALL DENSITY TUNING
================================================================ */

.os-universal-home{
  width:min(1450px,94vw) !important;
  margin-top:14px !important;
}

.os-universal-heading.compact{
  min-height:54px !important;
}

.os-universal-heading h2{
  font-size:19px !important;
}

.os-universal-heading p{
  font-size:10px !important;
}


/* ================================================================
   BROWSE BY GENRE — FACE CARDS
   Original portrait-style cards only. No real artists used.
================================================================ */

.os-genre-grid{
  grid-template-columns:repeat(14,minmax(82px,1fr)) !important;
  gap:8px !important;
  padding:10px !important;
}

.os-genre-card{
  min-height:118px !important;
  border-radius:4px !important;
  overflow:hidden !important;
  border:1px solid #3a3a43 !important;
  background:#111317 !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
}

.os-genre-card::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.04) 0%,
      rgba(0,0,0,.08) 36%,
      rgba(0,0,0,.30) 65%,
      rgba(0,0,0,.70) 100%
    ) !important;
  z-index:1 !important;
}

.os-genre-card::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  transition:transform .22s ease !important;
  background:
    radial-gradient(circle at 50% 10%, rgba(255,255,255,.16), transparent 13%),
    radial-gradient(circle at 50% 37%, var(--skin,#e3b58d) 0 14%, transparent 14.5%),
    radial-gradient(circle at 43% 38%, rgba(36,20,15,.92) 0 1.1%, transparent 1.2%),
    radial-gradient(circle at 57% 38%, rgba(36,20,15,.92) 0 1.1%, transparent 1.2%),
    radial-gradient(ellipse at 50% 31%, var(--hair,#23120f) 0 17%, transparent 17.5%),
    radial-gradient(ellipse at 50% 75%, var(--shirt,#29313c) 0 27%, transparent 27.5%),
    radial-gradient(circle at 50% 49%, rgba(111,55,43,.50) 0 2.2%, transparent 2.3%),
    linear-gradient(135deg,var(--bg1,#5e1023),var(--bg2,#12060a)) !important;
}

.os-genre-card:hover::after{
  transform:scale(1.045) !important;
}

.os-genre-card span{
  left:9px !important;
  bottom:8px !important;
  font-size:11px !important;
  font-weight:900 !important;
  z-index:2 !important;
  text-shadow:0 2px 8px rgba(0,0,0,.9) !important;
}

.genre-pop{
  --bg1:#ab355d; --bg2:#290914; --skin:#efc3a8; --hair:#3d160f; --shirt:#77354f;
}
.genre-hiphop{
  --bg1:#7f1414; --bg2:#140709; --skin:#7e5138; --hair:#111214; --shirt:#401316;
}
.genre-rnb{
  --bg1:#7b1a66; --bg2:#180812; --skin:#d29673; --hair:#2a1417; --shirt:#542847;
}
.genre-rock{
  --bg1:#153652; --bg2:#091018; --skin:#d3ad8a; --hair:#121416; --shirt:#1c2c39;
}
.genre-country{
  --bg1:#915119; --bg2:#1b0f08; --skin:#e1b08b; --hair:#4a2918; --shirt:#6e4a28;
}
.genre-gospel{
  --bg1:#4930a5; --bg2:#120a20; --skin:#8c5a3a; --hair:#211316; --shirt:#3d3174;
}
.genre-electronic{
  --bg1:#2742b0; --bg2:#071122; --skin:#deb698; --hair:#13161d; --shirt:#1b3164;
}
.genre-latin{
  --bg1:#b03f1f; --bg2:#1e0908; --skin:#c8885e; --hair:#26120f; --shirt:#733324;
}
.genre-jazz{
  --bg1:#18445a; --bg2:#081118; --skin:#6d4937; --hair:#161311; --shirt:#183847;
}
.genre-reggae{
  --bg1:#2e5c1f; --bg2:#0a1208; --skin:#9a6b4a; --hair:#1f1510; --shirt:#2b4f20;
}
.genre-afrobeats{
  --bg1:#8f5817; --bg2:#180d07; --skin:#65412d; --hair:#17110d; --shirt:#6c461f;
}
.genre-classical{
  --bg1:#75604f; --bg2:#18120e; --skin:#e7cdb4; --hair:#312018; --shirt:#4b4035;
}
.genre-alternative{
  --bg1:#8d1d4a; --bg2:#12070d; --skin:#be8f77; --hair:#161213; --shirt:#4d2030;
}
.genre-more{
  --bg1:#555861; --bg2:#0b0c0f; --skin:#bbb0a5; --hair:#191919; --shirt:#2d323d;
}


/* ================================================================
   FEATURED / PROMOTIONS + FEATURED TRACKS
================================================================ */

.os-universal-feature-grid{
  grid-template-columns:minmax(0,2.0fr) 360px !important;
  gap:10px !important;
}

.os-feature-promo #homeSecondarySlider{
  min-height:270px !important;
  height:270px !important;
}

.os-feature-promo .managed-secondary-fallback{
  min-height:270px !important;
  height:270px !important;
}

.os-feature-promo .managed-slide-fallback-copy{
  padding:40px 40px !important;
}

.os-featured-tracks #featuredTracks{
  max-height:270px !important;
}

.os-featured-tracks .mini-track{
  min-height:44px !important;
  padding:6px 8px !important;
}


/* ================================================================
   NEW RELEASES / TRENDING LAYOUT
================================================================ */

.os-universal-content-grid{
  grid-template-columns:minmax(0,1fr) 290px !important;
  gap:10px !important;
}

.os-universal-home #latestGrid.card-row{
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  gap:8px !important;
  padding:10px !important;
}

.os-universal-home #latestGrid .homepage-track-card{
  max-width:none !important;
}

.os-trending-panel #trendingGrid .homepage-track-card{
  min-height:46px !important;
  padding:5px 7px !important;
}

.os-trending-panel #trendingGrid .track-link b{
  font-size:9px !important;
}


/* ================================================================
   FEATURED CREATORS — UNIFIED SHELF
================================================================ */

.os-creator-source-wrap{
  display:grid !important;
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  gap:8px !important;
  padding:10px !important;
}

.os-creator-source{
  display:contents !important;
}

.os-universal-home #artistGrid.card-row,
.os-universal-home #producerGrid.card-row{
  display:contents !important;
}

.os-universal-home .featured-creator-card{
  width:auto !important;
  max-width:none !important;
  height:100% !important;
}

.os-universal-home .featured-creator-cover{
  aspect-ratio:1 / .82 !important;
}

.os-universal-home .featured-creator-body{
  padding:7px !important;
}

.os-universal-home .featured-creator-title b{
  font-size:10px !important;
}

.os-universal-home .featured-creator-stats,
.os-universal-home .featured-creator-view{
  font-size:8.5px !important;
}


/* ================================================================
   FEATURED ARTIST PANEL
================================================================ */

.os-featured-artist-panel .sponsor-art{
  height:188px !important;
}

.os-featured-artist-panel .sponsored-card{
  padding:9px !important;
}


/* ================================================================
   CHARTS / TOP SELLERS DENSITY
================================================================ */

.os-universal-bottom-grid{
  grid-template-columns:minmax(0,1.55fr) minmax(320px,.78fr) !important;
  gap:10px !important;
}

.os-chart-panel .chart-item,
.os-sellers-panel .chart-item{
  min-height:40px !important;
  padding:5px 8px !important;
}

.os-chart-panel .chart-meta b,
.os-sellers-panel .chart-meta b{
  font-size:9px !important;
}

.os-chart-panel .chart-meta span,
.os-sellers-panel .chart-meta span{
  font-size:8.5px !important;
}


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

@media (max-width:1180px){

  .os-genre-grid{
    grid-template-columns:repeat(7,minmax(90px,1fr)) !important;
  }

  .os-universal-feature-grid,
  .os-universal-content-grid{
    grid-template-columns:1fr !important;
  }

}

@media (max-width:900px){

  .os-genre-grid{
    grid-template-columns:repeat(4,minmax(78px,1fr)) !important;
  }

  .os-universal-home #latestGrid.card-row{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .os-creator-source-wrap{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .os-universal-bottom-grid{
    grid-template-columns:1fr !important;
  }

}

@media (max-width:560px){

  .os-genre-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .os-genre-card{
    min-height:102px !important;
  }

}


/*
====================================================================
 OSBEATS HOMEPAGE — UNIVERSAL MUSIC THEME V3
 Genre artwork + right-column alignment + Trending Now fix
 2026-09-29
====================================================================
*/


/* ================================================================
   REAL IMAGE FILES FOR BROWSE BY GENRE
================================================================ */

.os-genre-card::after{
  background-repeat:no-repeat !important;
  background-position:center 24% !important;
  background-size:cover !important;
}


/* POP */
.genre-pop::after{
  background-image:
    linear-gradient(180deg,transparent 42%,rgba(0,0,0,.76) 100%),
    url("/assets/homepage/genres/browse-genre-pop.png") !important;
}


/* HIP-HOP */
.genre-hiphop::after{
  background-image:
    linear-gradient(180deg,transparent 42%,rgba(0,0,0,.76) 100%),
    url("/assets/homepage/genres/browse-genre-hip-hop.png") !important;
}


/* R&B */
.genre-rnb::after{
  background-image:
    linear-gradient(180deg,transparent 42%,rgba(0,0,0,.76) 100%),
    url("/assets/homepage/genres/browse-genre-rnb.png") !important;
}


/* ROCK */
.genre-rock::after{
  background-image:
    linear-gradient(180deg,transparent 42%,rgba(0,0,0,.76) 100%),
    url("/assets/homepage/genres/browse-genre-rock.png") !important;
}


/* COUNTRY */
.genre-country::after{
  background-image:
    linear-gradient(180deg,transparent 42%,rgba(0,0,0,.76) 100%),
    url("/assets/homepage/genres/browse-genre-country.png") !important;
}


/* GOSPEL */
.genre-gospel::after{
  background-image:
    linear-gradient(180deg,transparent 42%,rgba(0,0,0,.76) 100%),
    url("/assets/homepage/genres/browse-genre-gospel.png") !important;
}


/* ELECTRONIC */
.genre-electronic::after{
  background-image:
    linear-gradient(180deg,transparent 42%,rgba(0,0,0,.76) 100%),
    url("/assets/homepage/genres/browse-genre-electronic.png") !important;
}


/* LATIN */
.genre-latin::after{
  background-image:
    linear-gradient(180deg,transparent 42%,rgba(0,0,0,.76) 100%),
    url("/assets/homepage/genres/browse-genre-latin.png") !important;
}


/* JAZZ */
.genre-jazz::after{
  background-image:
    linear-gradient(180deg,transparent 42%,rgba(0,0,0,.76) 100%),
    url("/assets/homepage/genres/browse-genre-jazz.png") !important;
}


/* REGGAE */
.genre-reggae::after{
  background-image:
    linear-gradient(180deg,transparent 42%,rgba(0,0,0,.76) 100%),
    url("/assets/homepage/genres/browse-genre-reggae.png") !important;
}


/* AFROBEATS */
.genre-afrobeats::after{
  background-image:
    linear-gradient(180deg,transparent 42%,rgba(0,0,0,.76) 100%),
    url("/assets/homepage/genres/browse-genre-afrobeats.png") !important;
}


/* CLASSICAL */
.genre-classical::after{
  background-image:
    linear-gradient(180deg,transparent 42%,rgba(0,0,0,.76) 100%),
    url("/assets/homepage/genres/browse-genre-classical.png") !important;
}


/* ALTERNATIVE */
.genre-alternative::after{
  background-image:
    linear-gradient(180deg,transparent 42%,rgba(0,0,0,.76) 100%),
    url("/assets/homepage/genres/browse-genre-alternative.png") !important;
}


/*
 More intentionally remains an OSBeats generic discovery card.
 It is not one of the 13 music genres.
*/
.genre-more::after{
  background:
    radial-gradient(circle at 50% 42%,#72747c 0 9%,transparent 10%),
    linear-gradient(135deg,#292a30,#090a0d) !important;
}


/* ================================================================
   GENRE IMAGE PRESENTATION
================================================================ */

.os-genre-card{
  min-height:122px !important;
}

.os-genre-card::before{
  z-index:1 !important;
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.02) 0%,
      rgba(0,0,0,.02) 44%,
      rgba(0,0,0,.18) 67%,
      rgba(0,0,0,.76) 100%
    ) !important;
}

.os-genre-card::after{
  z-index:0 !important;
}

.os-genre-card span{
  z-index:2 !important;
}


/* ================================================================
   ONE CONSISTENT RIGHT-COLUMN WIDTH

   Featured Tracks
   Trending Now
   Featured Artist

   All now = 360px
================================================================ */

.os-universal-feature-grid{
  grid-template-columns:minmax(0,1fr) 360px !important;
}

.os-universal-content-grid{
  grid-template-columns:minmax(0,1fr) 360px !important;
}

.os-featured-tracks,
.os-trending-panel,
.os-featured-artist-panel{
  width:360px !important;
  min-width:360px !important;
  max-width:360px !important;
  justify-self:end !important;
}


/* Keep left content fluid */

.os-feature-promo,
.os-music-shelf,
.os-creators-panel{
  width:100% !important;
  min-width:0 !important;
}


/* ================================================================
   TRENDING NOW
   FIX PLAY BUTTON OVERLAPPING COVER ART
================================================================ */

.os-trending-panel #trendingGrid .homepage-track-card{
  position:relative !important;
  display:grid !important;

  grid-template-columns:
    48px
    minmax(0,1fr)
    28px !important;

  gap:8px !important;
  align-items:center !important;

  min-height:51px !important;
  padding:5px 8px !important;
}


/* Artwork stays completely in first column */

.os-trending-panel #trendingGrid .homepage-track-cover-link{
  grid-column:1 !important;
  grid-row:1 !important;

  position:relative !important;
  display:block !important;

  width:48px !important;
  height:40px !important;

  overflow:hidden !important;
}

.os-trending-panel #trendingGrid .homepage-track-cover{
  position:relative !important;

  width:48px !important;
  height:40px !important;

  min-width:48px !important;
  max-width:48px !important;

  overflow:hidden !important;
}

.os-trending-panel #trendingGrid .homepage-track-cover-image{
  display:block !important;

  width:48px !important;
  height:40px !important;

  object-fit:cover !important;
}


/*
 Disable any legacy cover-level play icon.
 The actual button belongs in column 3.
*/

.os-trending-panel #trendingGrid .homepage-track-cover::after{
  display:none !important;
  content:none !important;
}


/* Metadata stays in center column */

.os-trending-panel #trendingGrid .homepage-track-body{
  grid-column:2 !important;
  grid-row:1 !important;

  min-width:0 !important;
  padding:0 !important;
}

.os-trending-panel #trendingGrid .track-link{
  display:block !important;
  min-width:0 !important;
}

.os-trending-panel #trendingGrid .track-link b{
  display:block !important;

  overflow:hidden !important;
  white-space:nowrap !important;
  text-overflow:ellipsis !important;

  font-size:9.5px !important;
  line-height:1.15 !important;
}

.os-trending-panel #trendingGrid .artist-link{
  display:block !important;

  overflow:hidden !important;
  white-space:nowrap !important;
  text-overflow:ellipsis !important;

  font-size:8.5px !important;
}


/* Real open/play control moves to third column */

.os-trending-panel #trendingGrid .homepage-track-open{
  grid-column:3 !important;
  grid-row:1 !important;

  position:static !important;
  inset:auto !important;
  transform:none !important;

  justify-self:end !important;
  align-self:center !important;

  display:grid !important;
  place-items:center !important;

  width:26px !important;
  height:26px !important;

  margin:0 !important;

  border:1px solid #9a111c !important;
  border-radius:0 !important;

  background:
    linear-gradient(135deg,#860914,#410407) !important;
}


/* Hide unnecessary lower card footer only in Trending Now */

.os-trending-panel #trendingGrid .card-foot{
  display:none !important;
}


/* ================================================================
   FEATURED TRACK ARTWORK
================================================================ */

.os-featured-tracks .mini-thumb{
  display:block !important;
  flex:0 0 38px !important;

  width:38px !important;
  height:38px !important;

  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;

  border:1px solid #25262c !important;
}


/* ================================================================
   FEATURED ARTIST WIDTH / IMAGE
================================================================ */

.os-featured-artist-panel .sponsored-card{
  width:100% !important;
}

.os-featured-artist-panel .sponsor-art{
  width:100% !important;
  height:188px !important;

  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}


/* ================================================================
   TABLET / MOBILE
================================================================ */

@media(max-width:1180px){

  .os-universal-feature-grid,
  .os-universal-content-grid{
    grid-template-columns:1fr !important;
  }

  .os-featured-tracks,
  .os-trending-panel,
  .os-featured-artist-panel{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    justify-self:stretch !important;
  }

}


@media(max-width:900px){

  .os-trending-panel #trendingGrid .homepage-track-card{
    grid-template-columns:
      46px
      minmax(0,1fr)
      28px !important;
  }

}


/*
============================================================
 OSBEATS UNIVERSAL HOMEPAGE
 "MORE" GENRE CARD POLISH
============================================================
*/

.os-genre-card.genre-more{
  position:relative !important;
  background:
    linear-gradient(145deg,#17181d 0%,#101114 58%,#08090b 100%) !important;

  border:1px solid #44464f !important;
}


/* Remove old generic person/circle artwork */

.os-genre-card.genre-more::after{
  content:"•••" !important;

  position:absolute !important;
  inset:0 !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  padding-bottom:19px !important;

  background:
    radial-gradient(
      circle at 50% 46%,
      rgba(196,14,35,.22),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      #1b1c21,
      #0d0e11
    ) !important;

  color:#fff !important;

  font-size:32px !important;
  font-weight:900 !important;
  letter-spacing:5px !important;

  opacity:1 !important;
  transform:none !important;
}


/* Subtle OSBeats red accent */

.os-genre-card.genre-more::before{
  content:"" !important;

  position:absolute !important;
  inset:0 !important;

  z-index:1 !important;

  border-top:2px solid #a60b18 !important;

  background:
    linear-gradient(
      180deg,
      transparent 54%,
      rgba(0,0,0,.82) 100%
    ) !important;
}


/* Change visible text */

.os-genre-card.genre-more span{
  font-size:11px !important;
  font-weight:900 !important;
  letter-spacing:.1px !important;

  color:#fff !important;
}


/* Hover */

.os-genre-card.genre-more:hover{
  border-color:#b80d1c !important;
}

.os-genre-card.genre-more:hover::after{
  background:
    radial-gradient(
      circle at 50% 46%,
      rgba(221,17,39,.34),
      transparent 37%
    ),
    linear-gradient(
      145deg,
      #201418,
      #0c0d10
    ) !important;

  transform:none !important;
}



/*
====================================================================
 OSBEATS HOMEPAGE — UNIVERSAL MUSIC THEME V5
 Section-header text cleanup to match approved mockup
 - Browse by Genre
 - New Releases
 - Featured Creators
 - OSBeats Top 10
====================================================================
*/


/* ================================================================
   DESKTOP — ONE-LINE TITLE + DESCRIPTION
================================================================ */

.os-genre-section .os-universal-heading,
.os-music-shelf .os-universal-heading,
.os-creators-panel .os-universal-heading,
.os-chart-panel .chart-heading{
  align-items:center !important;
  min-height:auto !important;
  padding:10px 14px !important;
}

.os-genre-section .os-universal-heading > div,
.os-music-shelf .os-universal-heading > div,
.os-creators-panel .os-universal-heading > div,
.os-chart-panel .chart-heading > div{
  display:flex !important;
  align-items:baseline !important;
  gap:12px !important;
  min-width:0 !important;
  flex-wrap:wrap !important;
}


/* Remove extra top row/kicker on these sections */

.os-genre-section .os-universal-kicker,
.os-music-shelf .os-universal-kicker,
.os-creators-panel .os-universal-kicker,
.os-chart-panel .os-universal-kicker{
  display:none !important;
}


/* Titles */

.os-genre-section .os-universal-heading h2,
.os-music-shelf .os-universal-heading h2,
.os-creators-panel .os-universal-heading h2,
.os-chart-panel .chart-heading h2{
  margin:0 !important;
  font-size:17px !important;
  line-height:1.1 !important;
  white-space:nowrap !important;
}


/* Inline descriptions */

.os-genre-section .os-universal-heading p,
.os-music-shelf .os-universal-heading p,
.os-creators-panel .os-universal-heading p{
  margin:0 !important;
  color:#9ea2ab !important;
  font-size:11px !important;
  line-height:1.2 !important;
}


/* Right-side action links */

.os-genre-section .os-universal-heading a,
.os-music-shelf .os-universal-heading a,
.os-creators-panel .os-universal-heading a,
.os-chart-panel .chart-heading a{
  align-self:center !important;
  white-space:nowrap !important;
  font-size:11px !important;
}


/* Slightly tighten section divider spacing */

.os-genre-section .os-universal-heading,
.os-music-shelf .os-universal-heading,
.os-creators-panel .os-universal-heading,
.os-chart-panel .chart-heading{
  border-bottom:1px solid #262931 !important;
}


/* ================================================================
   MOBILE / SMALLER WIDTHS
   Let title and description stack when needed
================================================================ */

@media(max-width:980px){

  .os-genre-section .os-universal-heading > div,
  .os-music-shelf .os-universal-heading > div,
  .os-creators-panel .os-universal-heading > div,
  .os-chart-panel .chart-heading > div{
    display:block !important;
  }

  .os-genre-section .os-universal-heading h2,
  .os-music-shelf .os-universal-heading h2,
  .os-creators-panel .os-universal-heading h2,
  .os-chart-panel .chart-heading h2{
    white-space:normal !important;
  }

  .os-genre-section .os-universal-heading p,
  .os-music-shelf .os-universal-heading p,
  .os-creators-panel .os-universal-heading p{
    margin-top:3px !important;
  }

}



/*
====================================================================
 OSBEATS UNIVERSAL HOMEPAGE
 FEATURED / PROMOTIONS — ADMIN MANAGED CARD RENDERER
====================================================================
*/


/* Remove former slider sizing from secondary placement */

.os-feature-promo #homeSecondarySlider.os-promo-card-grid{
  display:grid !important;

  grid-template-columns:
    repeat(4,minmax(0,1fr)) !important;

  gap:9px !important;

  width:100% !important;
  height:auto !important;
  min-height:0 !important;

  padding:10px !important;

  overflow:visible !important;

  background:#0d0e11 !important;
}


/* ---------------------------------------------------------------
   PROMOTION CARD
---------------------------------------------------------------- */

.os-promo-card{
  display:flex !important;
  flex-direction:column !important;

  min-width:0 !important;

  overflow:hidden !important;

  border:1px solid #292c34 !important;
  border-radius:4px !important;

  background:
    linear-gradient(
      180deg,
      #15171c,
      #0c0d10
    ) !important;

  transition:
    transform .18s ease,
    border-color .18s ease !important;
}

.os-promo-card:hover{
  transform:translateY(-2px) !important;
  border-color:#75101a !important;
}


/* ---------------------------------------------------------------
   ARTWORK
---------------------------------------------------------------- */

.os-promo-card-art{
  position:relative !important;

  display:block !important;

  width:100% !important;
  aspect-ratio:1.18 / 1 !important;

  overflow:hidden !important;

  background:#101115 !important;
}

.os-promo-card-art picture,
.os-promo-card-art img{
  display:block !important;

  width:100% !important;
  height:100% !important;
}

.os-promo-card-art img{
  object-fit:cover !important;

  transition:transform .22s ease !important;
}

.os-promo-card:hover .os-promo-card-art img{
  transform:scale(1.025) !important;
}


/* fallback if an admin slide is missing artwork */

.os-promo-card-art-fallback{
  background:
    radial-gradient(
      circle at 50% 35%,
      rgba(199,16,35,.35),
      transparent 27%
    ),
    linear-gradient(
      135deg,
      #281014,
      #0c0d10
    ) !important;
}


/* ---------------------------------------------------------------
   CARD BODY
---------------------------------------------------------------- */

.os-promo-card-body{
  display:flex !important;
  flex:1 !important;
  flex-direction:column !important;

  min-height:100px !important;

  padding:8px 9px 9px !important;
}

.os-promo-card-type{
  align-self:flex-start !important;

  margin-bottom:5px !important;

  padding:2px 5px !important;

  border:1px solid #8d101a !important;

  color:#fff !important;
  background:#5f0810 !important;

  font-size:7.5px !important;
  font-weight:900 !important;
  line-height:1.2 !important;

  text-transform:uppercase !important;
  letter-spacing:.45px !important;
}

.os-promo-card-title{
  display:block !important;

  color:#fff !important;

  font-size:12px !important;
  font-weight:900 !important;
  line-height:1.15 !important;

  text-decoration:none !important;
}

.os-promo-card-title:hover{
  color:#ef334f !important;
}

.os-promo-card-subtitle{
  display:-webkit-box !important;

  margin:4px 0 8px !important;

  overflow:hidden !important;

  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:2 !important;

  color:#999da6 !important;

  font-size:9px !important;
  line-height:1.3 !important;
}

.os-promo-card-cta{
  margin-top:auto !important;

  color:#ef334f !important;

  font-size:9px !important;
  font-weight:900 !important;

  text-decoration:none !important;
}

.os-promo-card-cta:hover{
  color:#fff !important;
}


/* ---------------------------------------------------------------
   RESPONSIVE
---------------------------------------------------------------- */

@media(max-width:1100px){

  .os-feature-promo #homeSecondarySlider.os-promo-card-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
  }

}


@media(max-width:600px){

  .os-feature-promo #homeSecondarySlider.os-promo-card-grid{
    grid-template-columns:1fr !important;
  }

  .os-promo-card-art{
    aspect-ratio:16 / 9 !important;
  }

}



/*
====================================================================
 OSBEATS HOMEPAGE — UNIVERSAL MUSIC THEME V7
 Header text cleanup + bottom membership/footer spacing
====================================================================
*/


/* ================================================================
   ONE-ROW HEADER CLEANUP
   Targets:
   - Featured / Promotions
   - Featured Tracks
   - Trending Now
   - Top Sellers
================================================================ */

/* Shared heading shells */

.os-feature-promo .os-universal-heading,
.os-featured-tracks .os-universal-heading,
.os-trending-panel .os-universal-heading,
.os-sellers-panel .chart-heading{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;

  min-height:auto !important;
  padding:10px 14px !important;

  border-bottom:1px solid #262931 !important;
}


/* Left text cluster becomes one row */

.os-feature-promo .os-universal-heading > div,
.os-featured-tracks .os-universal-heading > div,
.os-trending-panel .os-universal-heading > div,
.os-sellers-panel .chart-heading > div{
  display:flex !important;
  align-items:baseline !important;
  gap:10px !important;
  flex-wrap:wrap !important;
  min-width:0 !important;
}


/* Remove extra top kicker row */

.os-feature-promo .os-universal-kicker,
.os-featured-tracks .os-universal-kicker,
.os-trending-panel .os-universal-kicker,
.os-sellers-panel .os-universal-kicker,
.os-sellers-panel .chart-kicker{
  display:none !important;
}


/* Titles */

.os-feature-promo .os-universal-heading h2,
.os-featured-tracks .os-universal-heading h2,
.os-trending-panel .os-universal-heading h2,
.os-sellers-panel .chart-heading h2{
  margin:0 !important;
  font-size:17px !important;
  line-height:1.08 !important;
  white-space:nowrap !important;
}


/* Inline descriptions if present */

.os-feature-promo .os-universal-heading p,
.os-featured-tracks .os-universal-heading p,
.os-trending-panel .os-universal-heading p,
.os-sellers-panel .chart-heading p{
  margin:0 !important;
  color:#9ea2ab !important;
  font-size:11px !important;
  line-height:1.2 !important;
}


/* Right-side links */

.os-feature-promo .os-universal-heading a,
.os-featured-tracks .os-universal-heading a,
.os-trending-panel .os-universal-heading a,
.os-sellers-panel .chart-heading a{
  align-self:center !important;
  white-space:nowrap !important;
  font-size:11px !important;
}


/* ================================================================
   FEATURED / PROMOTIONS DESCRIPTION
   Keep it one-row inline like the approved mockup
================================================================ */

.os-feature-promo .os-universal-heading p{
  display:inline !important;
}


/* ================================================================
   FEATURED TRACKS / TRENDING NOW / TOP SELLERS
   Keep them title-first and prevent extra stacked text behavior
================================================================ */

.os-featured-tracks .os-universal-heading p,
.os-trending-panel .os-universal-heading p,
.os-sellers-panel .chart-heading p{
  display:none !important;
}


/* ================================================================
   BOTTOM MEMBERSHIP STRIP + FOOTER GAP FIX
================================================================ */

/* Tighten spacing above the membership strip */

#homeMembershipSlider{
  margin-top:10px !important;
  margin-bottom:0 !important;
}


/* Remove extra lower spacing around membership area */

.os-universal-home{
  padding-bottom:0 !important;
}

.os-home-refresh{
  padding-bottom:0 !important;
}


/* If the membership slider sits in a wrapper, collapse the wrapper spacing too */

#homeMembershipSlider,
#homeMembershipSlider .managed-slide,
#homeMembershipSlider .managed-slider-track{
  margin-bottom:0 !important;
}


/* Pull footer flush beneath membership area */

.global-social-footer,
footer,
.site-footer{
  margin-top:0 !important;
}


/* If footer has top padding causing visible gray gap, tighten it */

.global-social-footer{
  padding-top:0 !important;
}


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

@media(max-width:980px){

  .os-feature-promo .os-universal-heading > div,
  .os-featured-tracks .os-universal-heading > div,
  .os-trending-panel .os-universal-heading > div,
  .os-sellers-panel .chart-heading > div{
    display:block !important;
  }

  .os-feature-promo .os-universal-heading h2,
  .os-featured-tracks .os-universal-heading h2,
  .os-trending-panel .os-universal-heading h2,
  .os-sellers-panel .chart-heading h2{
    white-space:normal !important;
  }

  .os-feature-promo .os-universal-heading p{
    display:block !important;
    margin-top:3px !important;
  }

}



/*
====================================================================
 OSBEATS HOMEPAGE — UNIVERSAL MUSIC THEME V8
 - Fix Trending Now cover play-button overlap
 - Remove PROMOTION kicker above Featured Artist
====================================================================
*/


/* ================================================================
   TRENDING NOW
   Remove legacy play icon sitting on top of cover artwork
================================================================ */

.os-trending-panel #trendingGrid .homepage-track-open{
  display:none !important;
}


/*
 Use the actual play button from card-foot on the far right instead.
*/

.os-trending-panel #trendingGrid .homepage-track-card{
  position:relative !important;
  padding-right:42px !important;
}

.os-trending-panel #trendingGrid .card-foot{
  display:block !important;

  position:absolute !important;
  right:8px !important;
  top:50% !important;

  width:26px !important;
  height:26px !important;

  margin:0 !important;
  padding:0 !important;

  transform:translateY(-50%) !important;

  border:0 !important;
}


/* Hide pricing text from compact Trending row */

.os-trending-panel #trendingGrid .card-foot > span{
  display:none !important;
}


/* Real play button */

.os-trending-panel #trendingGrid .text-play{
  display:grid !important;
  place-items:center !important;

  width:26px !important;
  height:26px !important;

  margin:0 !important;
  padding:0 !important;

  border:1px solid #99101b !important;
  border-radius:0 !important;

  background:
    linear-gradient(
      135deg,
      #870914,
      #410407
    ) !important;

  color:#fff !important;
}


/* ================================================================
   FEATURED ARTIST
   Remove PROMOTION row above title
================================================================ */

.os-featured-artist-panel .os-universal-kicker{
  display:none !important;
}

.os-featured-artist-panel .os-universal-heading{
  min-height:auto !important;
  padding:10px 14px !important;
}

.os-featured-artist-panel .os-universal-heading h2{
  margin:0 !important;
  font-size:17px !important;
  line-height:1.08 !important;
}


/* ================================================================
   OSBEATS HOMEPAGE MOCKUP DETAIL V2
   ================================================================ */


/* FEATURED TRACKS — REMOVE PROMOTED RIBBON */

.os-featured-tracks .promotion-ribbon,
.os-featured-tracks .promotion-ribbon.mini{
  display:none !important;
}


.os-featured-tracks .mini-track{
  display:grid !important;

  grid-template-columns:
    38px
    minmax(0,1fr)
    auto
    25px !important;

  gap:7px !important;
  align-items:center !important;
}


.os-featured-tracks .mini-price{
  color:#fff !important;
  font-size:9px !important;
  white-space:nowrap !important;

  padding:3px 5px !important;

  background:#24262b !important;

  border:1px solid #303238 !important;
}



/* TRENDING NOW — REMOVE PROMOTED RIBBON + SHOW PRICE */

.os-trending-panel #trendingGrid .promotion-ribbon{
  display:none !important;
}


.os-trending-panel #trendingGrid .homepage-track-card{
  grid-template-columns:
    48px
    minmax(0,1fr)
    auto
    28px !important;
}


.os-trending-panel #trendingGrid .homepage-track-price{
  grid-column:3 !important;
  grid-row:1 !important;

  align-self:center !important;

  color:#fff !important;

  font-size:9px !important;

  white-space:nowrap !important;

  padding:3px 5px !important;

  background:#24262b !important;

  border:1px solid #303238 !important;
}


.os-trending-panel #trendingGrid .homepage-track-open{
  grid-column:4 !important;
  grid-row:1 !important;
}



/* FEATURED ARTIST — APPROVED MOCKUP STRUCTURE */

.os-featured-artist-panel
.sponsored-card.has-sponsored-artist{

  display:grid !important;

  grid-template-columns:
    128px
    minmax(0,1fr) !important;

  gap:11px !important;

  align-items:stretch !important;

  padding:10px !important;
}


.os-featured-artist-panel
.sponsored-card.has-sponsored-artist
.sponsor-art{

  width:128px !important;

  height:154px !important;

  min-height:154px !important;

  background-size:cover !important;

  background-position:center !important;

  border:1px solid #2b2d32 !important;
}


.os-featured-artist-panel .sponsor-info{
  min-width:0 !important;

  display:flex !important;

  flex-direction:column !important;

  justify-content:center !important;
}


.os-featured-artist-panel .sponsor-info h3{
  display:flex !important;

  align-items:center !important;

  gap:5px !important;

  margin:0 0 4px !important;

  font-size:14px !important;
}


.os-featured-artist-panel .sponsor-info h3 a{
  color:#fff !important;

  text-decoration:none !important;
}


.os-featured-artist-panel .sponsor-verified{
  display:inline-grid !important;

  place-items:center !important;

  width:15px !important;

  height:15px !important;

  border-radius:50% !important;

  background:#e31b2f !important;

  color:#fff !important;

  font-size:9px !important;

  font-weight:900 !important;
}


.os-featured-artist-panel .sponsor-meta{
  color:#aeb1ba !important;

  font-size:9px !important;

  margin-bottom:8px !important;
}


.os-featured-artist-panel .sponsor-info p{
  margin:0 0 10px !important;

  color:#b5b7bf !important;

  font-size:9px !important;

  line-height:1.35 !important;

  display:-webkit-box !important;

  -webkit-line-clamp:3 !important;

  -webkit-box-orient:vertical !important;

  overflow:hidden !important;
}


.os-featured-artist-panel .sponsor-actions{
  display:flex !important;

  gap:7px !important;

  align-items:center !important;
}


.os-featured-artist-panel .sponsor-play,
.os-featured-artist-panel .sponsor-profile-btn{

  min-height:28px !important;

  padding:0 9px !important;

  display:inline-flex !important;

  align-items:center !important;

  justify-content:center !important;

  gap:5px !important;

  font-size:8.5px !important;

  font-weight:900 !important;

  text-decoration:none !important;

  cursor:pointer !important;
}


.os-featured-artist-panel .sponsor-play{
  border:1px solid #e31b2f !important;

  background:#d7192d !important;

  color:#fff !important;
}


.os-featured-artist-panel .sponsor-profile-btn{
  border:1px solid #4a4c53 !important;

  background:#111216 !important;

  color:#fff !important;
}


@media(max-width:700px){

  .os-featured-artist-panel
  .sponsored-card.has-sponsored-artist{

    grid-template-columns:
      110px
      minmax(0,1fr) !important;
  }


  .os-featured-artist-panel
  .sponsored-card.has-sponsored-artist
  .sponsor-art{

    width:110px !important;

    height:140px !important;

    min-height:140px !important;
  }

}



/* ================================================================
   OSBEATS TOP 10 + TOP SELLERS COVER ART V1
   ================================================================ */

.os-chart-panel .chart-item,
.os-sellers-panel .chart-item{

  display:grid !important;

  grid-template-columns:
    28px
    42px
    minmax(0,1fr)
    30px !important;

  gap:7px !important;

  align-items:center !important;

  min-height:50px !important;

  padding:5px 8px !important;
}


.os-chart-panel .chart-rank,
.os-sellers-panel .chart-rank{

  font-size:15px !important;

  line-height:1 !important;

  color:#fff !important;

  font-weight:500 !important;
}


.os-chart-panel .chart-thumb,
.os-sellers-panel .chart-thumb{

  display:block !important;

  width:42px !important;

  height:36px !important;

  overflow:hidden !important;

  background:#151519 !important;

  border:1px solid #292930 !important;
}


.os-chart-panel .chart-thumb img,
.os-sellers-panel .chart-thumb img{

  display:block !important;

  width:100% !important;

  height:100% !important;

  object-fit:cover !important;
}


.os-chart-panel .chart-meta,
.os-sellers-panel .chart-meta{

  min-width:0 !important;
}


.os-chart-panel .chart-meta .track-link,
.os-sellers-panel .chart-meta .track-link{

  display:block !important;

  overflow:hidden !important;

  white-space:nowrap !important;

  text-overflow:ellipsis !important;
}


.os-chart-panel .chart-meta .artist-link,
.os-sellers-panel .chart-meta .artist-link{

  display:block !important;

  overflow:hidden !important;

  white-space:nowrap !important;

  text-overflow:ellipsis !important;
}


.os-chart-panel .round-play,
.os-sellers-panel .round-play{

  justify-self:end !important;
  align-self:center !important;
}



/* ================================================================
   OSBEATS TOP 10 + TOP SELLERS HEADER/TABS FIX V1
   ================================================================ */


/* Exact same title-bar height */

.os-chart-panel > .os-universal-heading.compact.chart-heading,
.os-sellers-panel > .os-universal-heading.compact{

  height:50px !important;
  min-height:50px !important;
  max-height:50px !important;

  padding:0 14px !important;

  display:flex !important;

  align-items:center !important;

  justify-content:space-between !important;

  box-sizing:border-box !important;
}


/* Keep both titles vertically centered */

.os-chart-panel > .chart-heading h2,
.os-sellers-panel > .os-universal-heading h2{

  margin:0 !important;

  line-height:1 !important;
}


/* Top 10 tabs are interactive */

.os-chart-tabs span{

  cursor:pointer !important;

  user-select:none !important;

  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease !important;
}


.os-chart-tabs span:hover{

  border-color:#8f111d !important;

  color:#fff !important;
}


.os-chart-tabs span:focus{

  outline:1px solid #d7192d !important;

  outline-offset:1px !important;
}


/* Empty category state */

.home-chart-empty{

  grid-column:1 / -1 !important;

  padding:22px 14px !important;

  color:#a7aab2 !important;

  font-size:11px !important;

  text-align:center !important;

  background:#0e0e11 !important;
}



/* ================================================================
   OSBEATS TOP 10 + TOP SELLERS PRICING V1
   ================================================================ */

.os-chart-panel .chart-item,
.os-sellers-panel .chart-item{

  grid-template-columns:
    28px
    42px
    minmax(0,1fr)
    auto
    30px !important;

}


/* Price badge */

.os-chart-panel .chart-price,
.os-sellers-panel .chart-price{

  display:inline-flex !important;

  align-items:center !important;

  justify-content:center !important;

  min-width:48px !important;

  min-height:23px !important;

  padding:3px 6px !important;

  color:#fff !important;

  background:#24262b !important;

  border:1px solid #343740 !important;

  font-size:9px !important;

  font-weight:700 !important;

  line-height:1 !important;

  white-space:nowrap !important;

}


/* Keep play button on far right */

.os-chart-panel .round-play,
.os-sellers-panel .round-play{

  grid-column:5 !important;

  justify-self:end !important;

}


/* Top Sellers has less horizontal room */

@media(max-width:1180px){

  .os-chart-panel .chart-price,
  .os-sellers-panel .chart-price{

    min-width:44px !important;

    padding-left:4px !important;

    padding-right:4px !important;

    font-size:8px !important;

  }

}



/* ================================================================
   OSBEATS FEATURED CREATOR ARROW REMOVAL V1
   ================================================================ */

.featured-creator-open{
  display:none !important;
}






/* OSBEATS FEATURED ARTIST PLAY NOW BUTTON V2 */

.os-featured-artist-panel .sponsor-play{
  background:
    linear-gradient(
      135deg,
      #b90d1b 0%,
      #73070b 42%,
      #310306 70%,
      #08090b 100%
    ) !important;

  border:1px solid #a80d18 !important;

  color:#ffffff !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 2px 6px rgba(0,0,0,.30) !important;
}

.os-featured-artist-panel .sponsor-play:hover{
  background:
    linear-gradient(
      135deg,
      #d7192d 0%,
      #8c0912 42%,
      #3a0407 70%,
      #0c0d10 100%
    ) !important;

  border-color:#d7192d !important;
}

.os-featured-artist-panel .sponsor-play:active{
  background:
    linear-gradient(
      135deg,
      #870914 0%,
      #520407 50%,
      #111216 100%
    ) !important;
}