/* BuddySocial v10.88 - artwork occupies the left player panel.
   Removes the old round music-note/vinyl look and places stream/MP3 artwork
   directly beside the information panel. Desktop layout/functionality otherwise untouched. */

.profile-player.profile-playlist .pp-visual.pp-vinyl-wrap{
  grid-area:cover!important;
  width:92px!important;
  min-width:92px!important;
  max-width:92px!important;
  height:92px!important;
  min-height:92px!important;
  padding:0!important;
  margin:0!important;
  transform:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  overflow:hidden!important;
  position:relative!important;
  z-index:2!important;
}

/* The old circular vinyl/button becomes a clean artwork tile. */
.profile-player.profile-playlist .pp-vinyl{
  width:86px!important;
  height:86px!important;
  min-width:86px!important;
  min-height:86px!important;
  max-width:86px!important;
  max-height:86px!important;
  flex:0 0 86px!important;
  padding:0!important;
  margin:0!important;
  border-radius:12px!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
  background:rgba(0,0,0,.22)!important;
}

.profile-player.profile-playlist .pp-vinyl-label{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  border-radius:12px!important;
  overflow:hidden!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:rgba(0,0,0,.16)!important;
}

.profile-player.profile-playlist .pp-vinyl-cover{
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  display:block!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:12px!important;
}

/* Never show the old center hole / music-note decoration. */
.profile-player.profile-playlist .pp-vinyl-hole,
.profile-player.profile-playlist .pp-vinyl-label::before,
.profile-player.profile-playlist .pp-vinyl-label::after{
  display:none!important;
  content:none!important;
}

/* Pull the artwork panel neatly against the new information panel. */
.profile-player.profile-playlist{
  column-gap:6px!important;
}

@media (max-width:1100px){
  .profile-player.profile-playlist .pp-visual.pp-vinyl-wrap{
    width:90px!important;
    min-width:90px!important;
    max-width:90px!important;
    height:88px!important;
    min-height:88px!important;
    transform:none!important;
    justify-content:flex-end!important;
  }
  .profile-player.profile-playlist .pp-vinyl{
    width:86px!important;
    height:86px!important;
    min-width:86px!important;
    min-height:86px!important;
    max-width:86px!important;
    max-height:86px!important;
  }
}

@media (max-width:430px){
  .profile-player.profile-playlist{
    column-gap:4px!important;
  }
  .profile-player.profile-playlist .pp-visual.pp-vinyl-wrap{
    transform:none!important;
  }
}