/* Shadowtone Edits — Library collections Browse-style treatment
   Presentation only. One collection per row, Browse typography and digital counts. */

body:has(#libraryContainer){
  font-family:Arial,Helvetica,sans-serif;
}

body:has(#libraryContainer) main.wrap.section-tight{
  max-width:1100px;
  padding-top:34px;
  padding-bottom:64px;
}

body:has(#libraryContainer) main.wrap.section-tight::before{
  display:none;
}

body:has(#libraryContainer) #pageTitle{
  margin:0 0 6px!important;
  color:#fff;
  font-family:Arial,Helvetica,sans-serif;
  font-size:26px;
  font-weight:700;
  line-height:1.14;
  letter-spacing:0;
}

body:has(#libraryContainer) #pageSubtitle{
  margin:0 0 22px;
  color:rgba(255,255,255,.44);
  font-family:Arial,Helvetica,sans-serif;
  font-size:11px;
  font-weight:400;
  line-height:1.5;
}

/* Every collection is one full-width row. */
body:has(#libraryContainer) #libraryContainer,
body:has(#libraryContainer) #libraryContainer.vertical-collection-list{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  width:100%!important;
  max-width:100%!important;
  gap:12px!important;
}

body:has(#libraryContainer) .vertical-collection-card{
  width:100%;
  min-height:94px;
  display:grid;
  grid-template-columns:47px minmax(0,1fr) auto auto;
  align-items:center;
  gap:14px;
  padding:17px 19px;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.07);
  border-radius:15px;
  background:linear-gradient(180deg,rgba(30,27,23,.96),rgba(21,18,15,.96));
  box-shadow:0 10px 30px rgba(0,0,0,.14);
  color:#fff;
  text-decoration:none;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}

body:has(#libraryContainer) .vertical-collection-card:hover,
body:has(#libraryContainer) .vertical-collection-card:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(216,155,43,.20);
  box-shadow:0 17px 42px rgba(0,0,0,.22);
}

/* Same bounded icon language as Browse. */
body:has(#libraryContainer) .vertical-collection-icon{
  width:47px!important;
  height:47px!important;
  min-width:47px;
  min-height:47px;
  display:grid!important;
  place-items:center!important;
  flex:0 0 47px!important;
  margin:0!important;
  padding:0!important;
  border:1px solid rgba(216,155,43,.15)!important;
  border-radius:12px!important;
  background:rgba(216,155,43,.075)!important;
  color:#dda23b!important;
}

body:has(#libraryContainer) .vertical-collection-icon > i{
  margin:0!important;
  color:#dda23b!important;
  font-size:23px!important;
  line-height:1!important;
  filter:none!important;
  text-shadow:none!important;
}

body:has(#libraryContainer) .vertical-collection-info{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:5px;
}

body:has(#libraryContainer) .vertical-collection-info strong{
  margin:0;
  color:#fff;
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:16px;
  font-weight:700;
  line-height:1.25;
  letter-spacing:0!important;
  text-shadow:none;
}

body:has(#libraryContainer) .vertical-collection-info span{
  color:rgba(255,255,255,.44);
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:11px;
  font-weight:400;
  line-height:1.45;
  letter-spacing:0!important;
}

/* Normal New Release / Trending collection tiles also become vertical rows. */
body:has(#libraryContainer) #libraryContainer > .genre-tile{
  width:100%!important;
  min-height:94px!important;
  display:grid!important;
  grid-template-columns:47px minmax(0,1fr) auto!important;
  grid-template-rows:auto!important;
  align-items:center!important;
  justify-content:stretch!important;
  gap:14px!important;
  padding:17px 19px!important;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.07)!important;
  border-radius:15px!important;
  background:linear-gradient(180deg,rgba(30,27,23,.96),rgba(21,18,15,.96))!important;
  box-shadow:0 10px 30px rgba(0,0,0,.14)!important;
}

body:has(#libraryContainer) #libraryContainer > .genre-tile > i{
  position:static!important;
  width:47px!important;
  height:47px!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  padding:0!important;
  border:1px solid rgba(216,155,43,.15)!important;
  border-radius:12px!important;
  background:rgba(216,155,43,.075)!important;
  color:#dda23b!important;
  font-size:23px!important;
  line-height:1!important;
}

body:has(#libraryContainer) #libraryContainer > .genre-tile > strong{
  margin:0!important;
  color:#fff;
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:16px!important;
  font-weight:700;
  line-height:1.25;
  letter-spacing:0!important;
}

/* Riddim rows already render vertically; align their typography with Browse. */
body:has(#libraryContainer) #libraryContainer > a:not(.vertical-collection-card):not(.genre-tile){
  font-family:Arial,Helvetica,sans-serif!important;
}

body:has(#libraryContainer) #libraryContainer > a:not(.vertical-collection-card):not(.genre-tile) strong{
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:16px!important;
  font-weight:700!important;
  letter-spacing:0!important;
}

body:has(#libraryContainer) #libraryContainer > a:not(.vertical-collection-card):not(.genre-tile) span:not(.library-song-count):not(.library-digital-number):not(.library-digital-icon):not(.library-count-sr){
  font-family:Arial,Helvetica,sans-serif!important;
  letter-spacing:0!important;
}

/*
   Permanent Browse font lock for all dynamically rendered collection labels.
   Any future collection generated by the existing Library renderers inherits
   the same Arial/Helvetica typography automatically.
*/
body:has(#libraryContainer) .vertical-collection-card,
body:has(#libraryContainer) .vertical-collection-info,
body:has(#libraryContainer) #libraryContainer > .genre-tile,
body:has(#libraryContainer) #libraryContainer > a:not(.vertical-collection-card):not(.genre-tile){
  font-family:Arial,Helvetica,sans-serif!important;
}

/* Exact Browse-style digital song-count display. */
body:has(#libraryContainer) .library-song-count.library-digital-count{
  width:auto!important;
  min-width:82px!important;
  min-height:34px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;
  margin:0!important;
  padding:6px 9px!important;
  border:1px solid rgba(216,155,43,.16)!important;
  border-radius:9px!important;
  background:#0d0c0a!important;
  color:#e2a33b!important;
  box-shadow:none!important;
  font-family:Consolas,"Courier New",monospace!important;
  line-height:1!important;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

body:has(#libraryContainer) .library-digital-number{
  display:inline-block;
  color:#f0b047;
  font-family:Consolas,"Courier New",monospace!important;
  font-size:15px;
  font-weight:700;
  letter-spacing:.08em;
  line-height:1;
}

body:has(#libraryContainer) .library-digital-icon{
  position:static!important;
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  display:inline-block!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#b98939!important;
  font-size:15px!important;
  line-height:1!important;
  filter:none!important;
  text-shadow:none!important;
}

body:has(#libraryContainer) .library-count-sr{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

body:has(#libraryContainer) .vertical-collection-arrow{
  margin-left:2px;
}

@media(max-width:620px){
  body:has(#libraryContainer) main.wrap.section-tight{
    padding-top:24px;
  }

  body:has(#libraryContainer) .vertical-collection-card{
    grid-template-columns:42px minmax(0,1fr) auto;
    gap:11px;
    padding:14px;
  }

  body:has(#libraryContainer) .vertical-collection-icon{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
  }

  body:has(#libraryContainer) .vertical-collection-count{
    grid-column:3;
  }

  body:has(#libraryContainer) .vertical-collection-arrow{
    display:none!important;
  }

  body:has(#libraryContainer) #libraryContainer > .genre-tile{
    grid-template-columns:42px minmax(0,1fr) auto!important;
    padding:14px!important;
  }

  body:has(#libraryContainer) #libraryContainer > .genre-tile > i{
    width:42px!important;
    height:42px!important;
  }
}