/* The catalog is one player widget in both the storefront and editor preview. */
body #beats .catalog-v3-heading {
  display: flex; align-items: end; justify-content: space-between; gap: 20px;
  padding: 15px 18px 12px; color: var(--ink);
}
body #beats .catalog-v3-heading h2 { margin: 0; font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: 1; letter-spacing: -.04em; }
body #beats .catalog-v3-heading span { display: block; margin-top: 5px; color: var(--muted); font-size: .72rem; }
body #beats .catalog-v3-heading .catalog-views { flex: none; }
body #beats .catalog-v3-heading .catalog-views button { min-height: 31px; }
body #beats .catalog-v3-widget {
  display: flex; flex-direction: column; max-width: 1100px; margin-inline: auto; overflow: visible; border: 1px solid var(--line);
  border-radius: 18px; background: var(--surface); color: var(--ink);
}
body #beats .catalog-v3-player {
  display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 22px;
  align-items: start; min-height: 180px; padding: 20px 24px; margin: 0 14px;
  border: 1px solid var(--line); border-radius: 15px;
  background: radial-gradient(ellipse at 14% 0%, color-mix(in srgb, var(--red) 15%, transparent), transparent 48%), var(--surface-soft);
}
body #beats .catalog-v3-cover { width: 136px; height: 136px; object-fit: cover; border-radius: 8px; }
body #beats .catalog-v3-main { min-width: 0; }
body #beats .catalog-v3-eyebrow { display: block; color: var(--red); font-size: .63rem; font-weight: 800; letter-spacing: .13em; }
body #beats .catalog-v3-title { display: block; width: fit-content; max-width: 100%; margin: 4px 0 0; overflow: hidden; color: var(--ink); font-size: 1.8rem; font-weight: 850; letter-spacing: -.04em; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
body #beats .catalog-v3-title:hover { color: var(--red); }
body #beats .catalog-v3-meta { display: block; margin-top: 3px; color: var(--muted); font-size: .72rem; }
body #beats .catalog-v3-wave-row { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
body #beats .catalog-v3-wave-row > span { flex: none; color: var(--muted); font-size: .66rem; font-variant-numeric: tabular-nums; }
body #beats .catalog-v3-wave-row .bar-waveform { flex: 1; min-width: 0; height: 32px; }
body #beats .catalog-v3-transport { display: flex; align-items: center; justify-content: center; gap: 20px; min-height: 42px; margin: 10px 0 0 -158px; width: calc(100% + 158px); }
body #beats .catalog-v3-transport .sticky-transport-extra { display: grid; place-items: center; width: 28px; height: 36px; padding: 0; border: 0; background: transparent; color: var(--muted); }
body #beats .catalog-v3-transport .sticky-transport-extra[aria-pressed="true"] { color: var(--red); }
body #beats .catalog-v3-transport .round-play { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: var(--red); color: var(--palette-accent-text, #fff); }
body #beats .catalog-v3-transport .round-play svg { width: 18px; height: 18px; }
body #beats .catalog-toolbar { width: 100%; max-width: none; margin: 0; }
body #beats .catalog-controls { display: flex !important; flex-direction: column; width: 100%; max-width: none; gap: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
body #beats .catalog-v3-tools { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--line); box-sizing: border-box; }
body #beats .catalog-v3-tools > .search-wrap { flex: 0 1 220px; min-width: 115px; }
body #beats .catalog-v3-tools .catalog-search { width: 100%; height: 32px; border-radius: 999px; font-size: .72rem; }
body #beats .catalog-v3-tools #savedFilter { display: inline-flex; align-items: center; gap: 5px; width: auto; min-height: 32px; height: 32px; padding: 0 5px; flex: none; border: 0; background: transparent; color: var(--ink); box-shadow: none; white-space: nowrap; }
body #beats .catalog-v3-tools #savedFilter span { font-size: .68rem; }
body #beats .catalog-filter-row { display: flex; align-items: center; justify-content: flex-end; flex: 1; width: auto; min-width: 0; gap: 4px; margin: 0; padding: 0; overflow: visible; }
body #beats .catalog-quick-filters { display: flex; align-items: center; gap: 4px; }
body #beats .catalog-quick-filters button { min-height: 31px; padding: 0 8px; border-radius: 7px; font-size: .66rem; }
body #beats .catalog-quick-filters button::after { margin-left: 4px; }
body #beats [data-filter-open="bpm"] { order: 1; }
body #beats [data-filter-open="key"] { order: 2; }
body #beats [data-filter-open="type"] { order: 3; }
body #beats [data-filter-open="mood"] { order: 4; }
body #beats [data-filter-open="genre"] { display: none; }
body #beats #sortMenu { width: auto; min-width: 0; margin: 0; }
body #beats #sortMenu .tool-pill { min-height: 31px; height: 31px; padding: 0 8px; border-radius: 7px; }
body #beats #filtersMenu { position: static; width: 0; height: 0; flex: 0 0 0; }
body #beats #filtersMenu > .tool-pill { display: none; }
body #beats #filtersMenu .catalog-filters-menu { position: fixed; top: 50%; left: 50%; right: auto; bottom: auto; z-index: 120; width: min(460px, calc(100vw - 32px)); max-height: min(680px, 82vh); transform: translate(-50%, -50%); }
body #beats .catalog-search-row { display: block; width: 100%; min-width: 0; min-height: 43px; margin: 0; padding: 8px 14px 7px; overflow: hidden; box-sizing: border-box; }
body #beats .catalog-suggested { width: 100%; max-width: 100%; gap: 12px; overflow-x: auto; }
body #beats .catalog-suggested span { flex: none; font-size: .63rem; letter-spacing: .1em; text-transform: uppercase; }
body #beats .catalog-suggested button { min-height: 24px; padding: 0 2px; border: 0; background: transparent; color: var(--muted); font-size: .68rem; }
body #beats .catalog-suggested button.active { color: var(--red); }
body #beats .filter-tags { padding: 0 14px 7px; }
body #beats .filter-tags:empty { display: none; }
body #beats .catalog-card { margin: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
body #beats .catalog-head { display: none; }
body #beats .catalog-list { max-height: none; padding: 0 14px 10px; overflow: visible; }
body #beats .track-row.catalog-grid { min-height: 60px; padding: 7px 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; }
body #beats .track-row.catalog-grid:last-child { border-bottom: 0; }
body #beats .track-row.catalog-grid.active { border-radius: 8px; background: var(--surface-soft); box-shadow: inset 3px 0 0 var(--red); }
body #beats .catalog-collection-legacy { display: none; }

@media (max-width: 700px) {
  body #beats .catalog-v3-heading { display: block; order: 2; padding: 4px 12px 0; }
  body #beats .catalog-v3-heading > .catalog-v3-identity { display: flex; }
  body #beats .catalog-v3-heading .catalog-views { display: flex; width: 100%; gap: 10px; }
  body #beats .catalog-v3-heading .catalog-views button { min-height: 35px; padding: 0 2px; font-size: .62rem; }
  body #beats .catalog-v3-widget { border-radius: 14px; }
  body #beats .catalog-v3-player { order: 1; grid-template-columns: 63px minmax(0, 1fr); gap: 10px; min-height: 0; margin: 8px 8px 0; padding: 12px; }
  body #beats .catalog-toolbar { order: 3; }
  body #beats .catalog-card { order: 4; }
  body #beats .catalog-v3-cover { width: 63px; height: 63px; }
  body #beats .catalog-v3-eyebrow { font-size: .56rem; }
  body #beats .catalog-v3-title { font-size: 1.1rem; }
  body #beats .catalog-v3-meta { font-size: .63rem; }
  body #beats .catalog-v3-wave-row { display: none; }
  body #beats .catalog-v3-transport { width: calc(100% + 73px); margin: 10px 0 0 -73px; gap: clamp(8px, 4vw, 20px); }
  body #beats .catalog-v3-transport .sticky-transport-extra { width: 27px; }
  body #beats .catalog-v3-tools { display: flex; flex-wrap: wrap; gap: 7px; padding: 8px 12px; }
  body #beats .catalog-v3-tools > .search-wrap { flex: 1 1 0; min-width: 0; }
  body #beats .catalog-v3-tools .catalog-search { height: 34px; }
  body #beats .catalog-v3-tools #savedFilter { min-width: 39px; padding: 0 3px; }
  body #beats .catalog-v3-tools #savedFilter span { font-size: 0; }
  body #beats .catalog-v3-tools #savedFilter span::first-letter { font-size: .68rem; }
  body #beats .catalog-filter-row { display: flex; justify-content: center; flex: 1 0 100%; width: 100%; gap: 4px; }
  body #beats .catalog-quick-filters { display: flex; flex: 1 1 0; gap: 4px; }
  body #beats .catalog-quick-filters button { flex: 1 1 0; min-width: 0; min-height: 30px; padding: 0 3px; font-size: .62rem; }
  body #beats .catalog-quick-filters button::after { margin-left: 2px; }
  body #beats #sortMenu .tool-pill { min-height: 30px; height: 30px; padding: 0 5px; }
  body #sortMenuLabel, body.storefront-compact #sortMenuLabel { font-size: 0; }
  body #sortMenuLabel::after, body.storefront-compact #sortMenuLabel::after { content: 'Sort'; font-size: .62rem; }
  body #beats #filtersMenu .catalog-filters-menu { top: auto; bottom: 0; left: 0; right: 0; width: 100%; max-height: 80dvh; transform: none; }
  body #beats .catalog-search-row { min-height: 42px; padding: 7px 12px; }
  body #beats .catalog-suggested { gap: 10px; }
  body #beats .catalog-suggested span { font-size: .58rem; }
  body #beats .catalog-list { padding: 0 8px 8px; }
  body #beats .track-row.catalog-grid { min-height: 59px; padding: 6px; }
}