/* Catalogue responsive layer — page scoped, aligned with responsive foundation. */
body[data-page="catalog"] #catalog-grid{min-width:0;align-items:start}

/* Phone: 0–599px. Keep two stable columns. */
@media (max-width:599px){
  body[data-page="catalog"] #catalog-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
    align-items:start!important;
  }

  body[data-page="catalog"] #catalog-grid .card-body{padding:9px 10px 11px}
  body[data-page="catalog"] #catalog-grid .card-title{font-size:.82rem}
  body[data-page="catalog"] #catalog-grid .card-meta{font-size:.67rem;gap:4px}

  body[data-page="catalog"] #quick-chips{
    display:flex!important;
    flex-wrap:wrap!important;
    align-content:flex-start!important;
    gap:7px!important;
    max-height:84px!important;
    overflow:hidden!important;
    transition:max-height .25s var(--ease)!important;
  }
  body[data-page="catalog"] #quick-chips.is-expanded{max-height:none!important;overflow:visible!important}
  body[data-page="catalog"] #quick-chips .chip{flex:0 0 auto!important;min-height:32px!important}
  body[data-page="catalog"] .genre-more-wrap{display:flex!important;justify-content:center!important;margin-top:4px!important}
  body[data-page="catalog"] #genres-more{min-height:38px!important;padding:8px 14px!important}
}

/* Small tablet / large phone: 600–767px. Three compact cards. */
@media (min-width:600px) and (max-width:767px){
  body[data-page="catalog"] #catalog-grid{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:12px!important;
    align-items:start!important;
  }

  body[data-page="catalog"] #catalog-grid .card-cover{aspect-ratio:280/400!important}
  body[data-page="catalog"] .genre-filter .gf-head{align-items:flex-start}
}

/* Tablet + compact desktop: 768–1100px. Never stretch cards to fill tracks. */
@media (min-width:768px) and (max-width:1100px){
  body[data-page="catalog"] #catalog-grid{
    display:grid!important;
    grid-template-columns:repeat(auto-fill,170px)!important;
    justify-content:start!important;
    gap:12px!important;
    align-items:start!important;
  }

  body[data-page="catalog"] #catalog-grid>.card{
    width:170px!important;
    min-width:170px!important;
    max-width:170px!important;
    flex:0 0 170px!important;
    box-sizing:border-box!important;
  }

  body[data-page="catalog"] #catalog-grid .card-cover{aspect-ratio:280/400!important}
}

/* Tablet filters. */
@media (min-width:768px) and (max-width:1023px){
  body[data-page="catalog"] .filters{
    display:grid;
    grid-template-columns:minmax(0,2fr) repeat(2,minmax(145px,1fr));
    gap:10px;
  }
  body[data-page="catalog"] .filters .grow{grid-column:1 / -1}
  body[data-page="catalog"] #f-min{width:100%!important}

  body[data-page="catalog"] .genre-filter .gf-head{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:12px!important;
    margin-bottom:12px!important;
  }

  body[data-page="catalog"] #quick-chips{
    display:flex!important;
    flex-wrap:wrap!important;
    align-content:flex-start!important;
    gap:8px!important;
    max-height:88px!important;
    overflow:hidden!important;
    transition:max-height .2s ease!important;
  }
  body[data-page="catalog"] #quick-chips.is-expanded{max-height:none!important;overflow:visible!important}
  body[data-page="catalog"] .genre-more-wrap{display:flex!important;justify-content:center!important;margin-top:4px!important;margin-bottom:12px!important;min-height:40px!important}
  body[data-page="catalog"] .genre-more-wrap[hidden]{display:none}
  body[data-page="catalog"] #genres-more{appearance:none!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;min-height:40px!important;padding:8px 15px!important;border:1px solid rgba(134,66,255,.50)!important;border-radius:999px!important;background:linear-gradient(135deg,rgba(134,66,255,.18),rgba(217,70,239,.10))!important;color:var(--text-strong)!important;font-size:.82rem!important;font-weight:650!important;line-height:1!important}
  body[data-page="catalog"] #genres-more::after{content:'⌄';font-size:1rem;line-height:1;transform:translateY(-1px)}
  body[data-page="catalog"] #genres-more[aria-expanded="true"]::after{content:'⌃'}
}

@media (min-width:768px) and (max-width:1023px) and (orientation:landscape){
  body[data-page="catalog"] .genre-filter .gf-head{margin-bottom:12px}
  body[data-page="catalog"] #quick-chips{max-height:none;overflow:visible}
  body[data-page="catalog"] .genre-more-wrap{display:none}
}

/* Compact desktop: 1024–1100px. */
@media (min-width:1024px) and (max-width:1100px){
  body[data-page="catalog"] .filters{
    display:grid;
    grid-template-columns:minmax(0,2fr) repeat(3,minmax(120px,1fr));
    gap:10px;
  }
  body[data-page="catalog"] .filters .grow{grid-column:auto}
  body[data-page="catalog"] #f-min{grid-column:1 / -1;width:100%!important}
}

/* Desktop: 1101px+. */
@media (min-width:1101px){
  body[data-page="catalog"] #catalog-grid{
    display:grid!important;
    grid-template-columns:repeat(auto-fill,170px)!important;
    justify-content:start!important;
    gap:12px!important;
  }

  body[data-page="catalog"] #catalog-grid>.card{
    width:170px!important;
    min-width:170px!important;
    max-width:170px!important;
  }
}

/* Genre list: identical two-row collapsed state on every viewport. */
body[data-page="catalog"] #quick-chips{
  display:flex!important;
  flex-wrap:wrap!important;
  align-content:flex-start!important;
  gap:7px!important;
  max-height:84px!important;
  overflow:hidden!important;
  transition:max-height .25s var(--ease)!important;
}
body[data-page="catalog"] #quick-chips.is-expanded{max-height:none!important;overflow:visible!important}
body[data-page="catalog"] #quick-chips .chip{flex:0 0 auto!important;min-height:32px!important}
body[data-page="catalog"] .genre-more-wrap{display:flex!important;justify-content:center!important;margin-top:4px!important;margin-bottom:8px!important;min-height:40px!important}
body[data-page="catalog"] .genre-more-wrap[hidden]{display:none!important}
body[data-page="catalog"] #genres-more{
  appearance:none!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  min-height:40px!important;
  padding:8px 15px!important;
  border:1px solid rgba(134,66,255,.50)!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,rgba(134,66,255,.18),rgba(217,70,239,.10))!important;
  color:var(--text-strong)!important;
  font-size:.82rem!important;
  font-weight:650!important;
  line-height:1!important;
}
body[data-page="catalog"] #genres-more::after{content:'⌄';font-size:1rem;line-height:1;transform:translateY(-1px)}
body[data-page="catalog"] #genres-more[aria-expanded="true"]::after{content:'⌃'}