/* ==========================================================
   CANTAIMY v6.6.2 — Genre filter
   ========================================================== */

#genres #genreGrid .genre-card{
  position:relative !important;
  cursor:pointer !important;
}

#genres #genreGrid .genre-card.active{
  border-color:rgba(0,232,255,.28) !important;
  background:
    linear-gradient(135deg,rgba(0,232,255,.07),rgba(129,77,255,.09)),
    rgba(12,20,46,.72) !important;
  box-shadow:none !important;
  transform:none !important;
}

#genres #genreGrid .genre-card.active::after{
  content:none !important;
  display:none !important;
}

#genres #genreGrid .genre-card.active .genre-check{
  border-color:#77f2ff !important;
  background:#77f2ff !important;
  color:#07101e !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.12),0 0 12px rgba(119,242,255,.24) !important;
}

#genres .genre-results-wrap{
  width:min(1320px,88vw) !important;
  margin:8px auto 54px !important;
}

#genres .genre-results-head{
  display:flex !important;
  align-items:flex-end !important;
  justify-content:space-between !important;
  gap:16px !important;
  margin:0 0 14px !important;
}

#genres .genre-results-head .eyebrow{
  margin:0 0 4px !important;
  color:#00e8ff !important;
  font-size:10px !important;
  letter-spacing:.13em !important;
  text-transform:uppercase !important;
}

#genres .genre-results-head h2{
  margin:0 !important;
  font-size:22px !important;
  line-height:1.1 !important;
}

#genres .genre-clear{
  flex:0 0 auto !important;
}

#genres .genre-results-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:14px !important;
}

#genres .genre-results-grid .track-card{
  min-width:0 !important;
}

#genres .genre-results-grid .track-card .track-cover{
  aspect-ratio:1/1 !important;
  height:auto !important;
  max-height:none !important;
}

#genres .genre-empty{
  min-height:110px !important;
  display:grid !important;
  place-items:center !important;
  padding:24px !important;
  border:1px dashed rgba(255,255,255,.12) !important;
  border-radius:16px !important;
  color:#9aa3bb !important;
  text-align:center !important;
}

#genres .genre-empty[hidden]{
  display:none !important;
}

@media(max-width:1200px){
  #genres .genre-results-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}

@media(max-width:820px){
  #genres .genre-results-wrap{
    width:calc(100vw - 34px) !important;
  }

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

@media(max-width:520px){
  #genres .genre-results-grid{
    grid-template-columns:1fr !important;
  }
}