/* The storefront and editor iframe use this same, bounded catalog widget. */
body #beats .mobile-cover { overflow: hidden; }
body #beats .mobile-cover > img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
html body .track-row .license-open.in-cart,
html body #beats .catalog-v3-widget .track-row .license-open.in-cart,
html body.beat-page-view .detail-choose-license {
  background: var(--palette-accent, var(--red)) !important;
  color: var(--palette-accent-text, #fff) !important;
  border-color: var(--palette-accent, var(--red)) !important;
}
body #beats .catalog-v3-widget {
  container-type: inline-size;
  height: var(--catalog-widget-height, 688px);
  max-width: min(var(--catalog-widget-width, 1100px), 100%);
  overflow: hidden;
  box-shadow: 0 18px 48px color-mix(in srgb, #000 13%, transparent);
  border-color: var(--catalog-player-line, color-mix(in srgb, var(--ink) 11%, var(--surface)));
  background: var(--catalog-player-surface, var(--surface));
  border: 0;
  box-shadow: 0 12px 42px -12px rgba(0, 0, 0, .18);
}
body #beats .catalog-v3-widget .catalog-v3-tools,
body #beats .catalog-v3-widget .catalog-search-row,
body #beats .catalog-v3-widget .track-row.catalog-grid,
body #beats .catalog-v3-widget .catalog-head {
  border-color: var(--catalog-player-line, color-mix(in srgb, var(--ink) 11%, var(--catalog-player-surface, var(--surface))));
}
body #beats .catalog-v3-widget .track-row.catalog-grid.active {
  background: var(--catalog-player-active, color-mix(in srgb, var(--ink) 7%, var(--catalog-player-surface, var(--surface))));
}
body #beats .catalog-v3-widget.player-boxy { border-radius: 4px; }
body #beats .catalog-v3-widget:not(.full-catalog-current)[data-color-preset]:not([data-color-preset="theme"]) { color: var(--ink); }
body #beats .catalog-v3-widget:not(.full-catalog-current)[data-color-preset]:not([data-color-preset="theme"]) :is(.save-icon, .download-icon, #savedFilter, #sortMenu .tool-pill, .catalog-bundle-sort select) { color: var(--ink) !important; background: var(--surface-soft) !important; border-color: var(--line) !important; }
body #beats .catalog-v3-widget:not(.full-catalog-current)[data-color-preset]:not([data-color-preset="theme"]) :is(.catalog-search, .license-open) { background: var(--surface-soft) !important; color: var(--ink) !important; border: 1px solid var(--line) !important; box-shadow: none; }
body #beats .catalog-v3-widget:not(.full-catalog-current)[data-color-preset]:not([data-color-preset="theme"]) .catalog-search::placeholder { color: var(--muted); }
body #beats .catalog-v3-widget:not(.full-catalog-current)[data-color-preset]:not([data-color-preset="theme"]) .track-row.active .license-open { background: var(--red) !important; color: var(--palette-accent-text, #fff) !important; border-color: var(--red) !important; }
body #beats .catalog-v3-widget[data-color-preset="light"] .catalog-v3-heading-logo { background: #171717; padding: 8px 12px; border-radius: 6px; box-sizing: content-box; }
body #beats .catalog-v3-widget[data-color-preset="light"] .catalog-card { box-shadow: none; }
body #beats .catalog-v3-widget.player-boxy .track-row.catalog-grid.active { border-radius: 4px; }
body #beats .catalog-v3-widget.player-buttons-pill :is(#savedFilter, .catalog-quick-filters button, #sortMenu .tool-pill, .license-open, .catalog-bundle-buy),
body #beats .catalog-v3-widget.player-buttons-pill .catalog-view-all { border-radius: 999px; }
body #beats .catalog-v3-widget.player-buttons-rounded :is(#savedFilter, .catalog-quick-filters button, #sortMenu .tool-pill, .license-open, .catalog-bundle-buy),
body #beats .catalog-v3-widget.player-buttons-rounded .catalog-view-all { border-radius: 9px; }
body #beats .catalog-v3-widget.player-buttons-square :is(#savedFilter, .catalog-quick-filters button, #sortMenu .tool-pill, .license-open, .catalog-bundle-buy),
body #beats .catalog-v3-widget.player-buttons-square .catalog-view-all { border-radius: 2px; }
body #beats .catalog-v3-widget .catalog-view-all { display: none; width: fit-content; margin: 18px auto 24px; }
body #beats .catalog-v3-widget .catalog-view-all[hidden],
body #beats .catalog-v3-widget.is-bundles .catalog-view-all { display: none !important; }
/* Open catalog has its own visual hierarchy; playback and cart stay shared. */
@media (min-width: 701px) {
  body #beats .catalog-v3-widget:not(.player-desktop-full) .track-row.catalog-grid { min-height: 60px; padding-block: 5px; }
  body #beats .catalog-v3-widget.player-desktop-full { height: auto; max-width: 100%; overflow: visible; border: 0; border-radius: 0; background: var(--catalog-player-surface, transparent); box-shadow: none; padding: 12px 24px 24px; }
  body #beats .player-desktop-full .catalog-v3-heading { display: flex !important; padding: 24px 0; border-bottom: 0; }
  body #beats .player-desktop-full .catalog-v3-heading h2 { font-size: clamp(28px, 3vw, 42px); }
  body #beats .player-desktop-full .catalog-v3-heading .catalog-v3-identity { position: static !important; transform: none !important; }
  body #beats .player-desktop-full .catalog-v3-tools { display: flex; flex-wrap: wrap; padding: 0 0 20px; gap: 12px; }
  body #beats .player-desktop-full.compact-player-header .catalog-v3-tools > .catalog-v3-identity { position: static; transform: none; max-width: none; flex: 1 0 100%; justify-content: flex-start; margin-bottom: 10px; }
  body #beats .player-desktop-full .catalog-v3-tools > .search-wrap { flex: 1 1 300px; max-width: 520px; }
  body #beats .player-desktop-full .catalog-search-row { padding: 14px 0; }
  body #beats .player-desktop-full .catalog-card { padding: 0; background: transparent; box-shadow: none !important; }
  body #beats .player-desktop-full .catalog-head.catalog-grid,
  body #beats .player-desktop-full .track-row.catalog-grid { grid-template-columns: 64px minmax(170px, 1fr) minmax(130px, .8fr) 52px 46px 76px 34px 34px 136px !important; column-gap: 16px !important; }
  body #beats.sf-beat-list .player-desktop-full .catalog-head.catalog-grid,
  body #beats.sf-beat-list .player-desktop-full .track-row.catalog-grid { grid-template-columns: 64px minmax(170px, 1fr) 52px 46px 76px 34px 34px 136px !important; }
  body #beats .player-desktop-full .track-row .mobile-cover { width: 64px; height: 64px; }
  body #beats .player-desktop-full .track-title-link { font-size: 17px; }
  body #beats .player-desktop-full .track-artist-tag { border: 0; background: transparent; padding: 0; font-size: 12px; font-weight: 500; }
  body #beats .player-desktop-full .track-artist-tags { gap: 10px; }
  body #beats .player-desktop-full .track-row.active { box-shadow: inset 3px 0 0 var(--red) !important; }
  body #beats .catalog-v3-widget.player-desktop-full .catalog-card,
  body #beats .catalog-v3-widget.player-desktop-full .catalog-bundles { flex: none; overflow: visible; }
  body #beats .catalog-v3-widget.player-desktop-full .catalog-list,
  body #beats .catalog-v3-widget.player-desktop-full .catalog-bundles { height: auto; max-height: none; overflow: visible; }
  body #beats .catalog-v3-widget.player-desktop-full .track-row.catalog-grid { min-height: 84px; padding-block: 12px; }
  body #beats .catalog-v3-widget.player-desktop-full .catalog-over-cap { display: none !important; }
  body #beats .catalog-v3-widget.player-desktop-full:not(.is-bundles) .catalog-view-all:not([hidden]) { display: inline-flex; align-self: center; }
}
@media (max-width: 700px) {
  body #beats .catalog-v3-widget:not(.player-mobile-full) .track-row.catalog-grid { min-height: 59px; padding-block: 5px; }
  body #beats .catalog-v3-widget.player-mobile-full { height: auto; overflow: visible; border: 0; border-radius: 0; background: var(--catalog-player-surface, transparent); box-shadow: none; padding: 8px 0 16px; }
  body #beats .player-mobile-full .catalog-v3-tools { padding: 16px 12px; }
  body #beats .player-mobile-full .catalog-v3-heading h2 { font-size: 28px; }
  body #beats .player-mobile-full .catalog-v3-heading { display: flex !important; flex-direction: column; align-items: flex-start; gap: 16px; padding: 16px 12px 8px; }
  body #beats .player-mobile-full .catalog-v3-heading .catalog-v3-identity,
  body #beats .player-mobile-full .catalog-v3-heading .catalog-views { position: static !important; transform: none !important; width: auto; margin: 0; }
  body #beats .player-mobile-full .track-row.catalog-grid { min-height: 90px; }
  body #beats .catalog-v3-widget.player-mobile-full .catalog-card,
  body #beats .catalog-v3-widget.player-mobile-full .catalog-bundles { flex: none; overflow: visible; }
  body #beats .catalog-v3-widget.player-mobile-full .catalog-list,
  body #beats .catalog-v3-widget.player-mobile-full .catalog-bundles { height: auto; max-height: none; overflow: visible; }
  body #beats .catalog-v3-widget.player-mobile-full .track-row.catalog-grid { min-height: 90px; padding-block: 12px; }
  body #beats .catalog-v3-widget.player-mobile-full .catalog-over-cap { display: none !important; }
  body #beats .catalog-v3-widget.player-mobile-full:not(.is-bundles) .catalog-view-all:not([hidden]) { display: inline-flex; align-self: center; }
}
/* Retired catalog sizing fields remain in the legacy form for draft
   compatibility, but the Beat player inspector owns these controls now. */
#editorShowcaseOptions > .storefront-range:has(#editorShowcaseCatalogWidth),
#editorCompactOptions .storefront-range:has(#editorCompactCatalogHeight),
#editorCompactOptions .storefront-range:has(#editorCompactRowDensity),
#editorV2Options .storefront-range:has(#editorV2CatalogHeight),
#editorV2Options .storefront-range:has(#editorV2RowDensity) { display: none !important; }

body #beats .catalog-v3-player { display: none !important; }
body #beats .catalog-v3-heading { flex: 0 0 auto; align-items: center; padding: 18px 20px 10px; }
body #beats .catalog-v3-heading h2 { font-size: 1.8rem; }
body #beats .catalog-v3-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
body #beats .catalog-v3-heading { position: relative; }
body #beats .catalog-v3-outside-tabs { display: none; width: min(var(--catalog-widget-width, 1100px), 100%); margin: 0 auto 8px; }
body #beats.tabs-outside .catalog-v3-outside-tabs { display: flex; justify-content: flex-end; }
body #beats.tabs-outside.tabs-left .catalog-v3-outside-tabs { justify-content: flex-start; }
body #beats.tabs-outside.tabs-center .catalog-v3-outside-tabs { justify-content: center; }
body #beats .catalog-v3-outside-tabs .catalog-views { display: flex; align-items: center; gap: 8px; }
body #beats .catalog-v3-outside-tabs .catalog-views button { min-height: 40px; }
body #beats.tabs-left .catalog-v3-heading { flex-direction: row-reverse; }
body #beats.tabs-center .catalog-v3-heading .catalog-views { position: absolute; left: 50%; transform: translateX(-50%); }
body #beats.tabs-left .catalog-v3-heading:not(.logo-centered) .catalog-v3-identity { margin-left: auto; }
body #beats .catalog-v3-widget.heading-in-toolbar .catalog-v3-heading { display: none; }
body #beats .catalog-v3-widget.heading-in-toolbar .catalog-v3-tools { position: relative; }
body #beats .catalog-v3-tools > .catalog-v3-identity { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 180px; justify-content: center; overflow: hidden; }
body #beats .catalog-v3-widget.toolbar-logo-left .catalog-v3-tools > .catalog-v3-identity { position: static; transform: none; flex: 0 0 auto; max-width: 150px; justify-content: flex-start; margin-right: 6px; }
body #beats .catalog-v3-widget.compact-player-header .catalog-v3-heading { display: none; }
body #beats .catalog-v3-widget.compact-player-header .catalog-v3-heading .catalog-v3-identity { margin: 0; }
body #beats .catalog-v3-widget.compact-player-header .catalog-v3-heading-logo { max-height: 38px; }
body #beats .catalog-v3-widget.compact-player-header .catalog-v3-heading.logo-centered .catalog-v3-identity { position: static; transform: none; max-width: none; }
body #beats .catalog-v3-widget.compact-player-header .catalog-v3-tools { position: relative; gap: 10px; padding-block: 8px; }
body #beats .catalog-v3-widget.compact-player-header .catalog-v3-tools > .catalog-views { flex: none; }
body #beats .catalog-v3-widget.compact-player-header .catalog-v3-tools > .catalog-views button { min-height: 38px; }
body #beats .catalog-v3-widget.compact-player-header .catalog-v3-tools > .catalog-v3-identity { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); justify-content: center; max-width: 160px; }
body #beats .catalog-v3-widget.compact-player-header.toolbar-logo-left .catalog-v3-tools > .catalog-v3-identity { position: static; transform: none; flex: 0 0 auto; justify-content: flex-start; }
body #beats .catalog-v3-widget.compact-player-header .catalog-v3-tools > .search-wrap { flex: 0 1 320px; margin-left: auto; }
body #beats .catalog-v3-widget.compact-player-header .catalog-search-row { display: flex; align-items: center; gap: 16px; overflow: visible; }
body #beats .catalog-v3-widget.compact-player-header .catalog-search-row .catalog-suggested { flex: 1 1 auto; width: auto; min-width: 0; }
body #beats .catalog-v3-widget.compact-player-header .catalog-search-row .catalog-filter-row { flex: 0 0 auto; justify-content: flex-end; }
body #beats .catalog-v3-widget.compact-player-header .catalog-search-row #savedFilter { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 0 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); color: var(--ink); white-space: nowrap; }
body #beats .catalog-v3-widget.compact-player-header .catalog-search-row #savedFilter svg { width: 18px; height: 18px; }
body #beats .catalog-v3-widget.compact-player-header.is-bundles .catalog-search-row { display: flex; }
body #beats .catalog-v3-widget.compact-player-header.is-bundles .catalog-search-row .catalog-suggested,
body #beats .catalog-v3-widget.compact-player-header.is-bundles .catalog-search-row .catalog-quick-filters,
body #beats .catalog-v3-widget.compact-player-header.is-bundles .catalog-search-row #sortMenu { display: none; }
body #beats .catalog-v3-widget.compact-player-header.is-bundles .catalog-search-row .catalog-filter-row { display: flex; }
@container (max-width: 840px) {
  body #beats .catalog-v3-widget.compact-player-header .catalog-search-row { flex-wrap: wrap; gap: 6px; }
  body #beats .catalog-v3-widget.compact-player-header .catalog-search-row .catalog-filter-row { flex: 1 0 100%; justify-content: flex-start; }
}
body #beats .catalog-v3-tools > .catalog-v3-identity .catalog-v3-heading-logo { max-height: 40px; }
body #beats .catalog-v3-tools > .catalog-v3-identity h2 { margin: 0; font-size: 1.4rem; line-height: 1; }
body #beats .catalog-v3-tools > .catalog-v3-identity #catalogV3Count { margin: 0; font-size: .7rem; white-space: nowrap; }
@container (max-width: 900px) {
  body #beats .catalog-v3-widget.heading-in-toolbar .catalog-v3-tools { flex-wrap: wrap; }
  body #beats .catalog-v3-widget.heading-in-toolbar:not(.toolbar-logo-left) .catalog-v3-tools > .catalog-v3-identity { position: static; transform: none; order: -1; flex: 1 0 100%; max-width: none; justify-content: center; }
}
@container (min-width: 960px) {
  body #beats .catalog-v3-heading.logo-centered .catalog-v3-identity {
    position: absolute;
    left: 50%;
    top: 50%;
    max-width: 34%;
    transform: translate(-50%, -50%);
  }
}
body #beats .catalog-v3-identity #catalogV3Count { order: 1; margin: 0; white-space: nowrap; }
body #beats .catalog-v3-identity #catalogV3Count[hidden] { display: none; }
body #beats #catalogV3Heading { order: 0; min-width: 0; }
body #beats .catalog-v3-heading-logo { display: block; width: auto; max-width: min(200px, 100%); max-height: 48px; object-fit: contain; }
body #beats .catalog-v3-heading .catalog-views button { min-height: 40px; }
body #beats .catalog-v3-tools { gap: 8px; padding: 12px 16px; }
body #beats .catalog-v3-tools > .search-wrap { flex-basis: 270px; }
body #beats .catalog-v3-tools .catalog-search,
body #beats .catalog-v3-tools #savedFilter { height: 36px; min-height: 36px; }
body #beats .catalog-v3-tools #savedFilter { padding: 0 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); }
body #beats .catalog-v3-tools #savedFilter svg { width: 18px; height: 18px; flex: none; }
body #beats .catalog-v3-tools #savedFilter span { font-size: .69rem; white-space: nowrap; }
body #beats .catalog-quick-filters button,
body #beats #sortMenu .tool-pill { min-height: 36px; height: 36px; padding-inline: 10px; border: 1px solid var(--line); border-radius: 9px; }
body #beats .catalog-search-row { min-height: 43px; border-bottom: 1px solid var(--line); }
body #beats .catalog-v3-widget.is-bundles .catalog-filter-row,
body #beats .catalog-v3-widget.is-bundles .catalog-search-row { display: none; }
body #beats .catalog-bundle-sort { display: flex; align-items: center; gap: 8px; margin-left: auto; color: var(--muted); font-size: .69rem; white-space: nowrap; }
body #beats .catalog-bundle-sort[hidden] { display: none; }
body #beats .catalog-bundle-sort select { height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); color: var(--ink); font: inherit; }
body #beats .catalog-card,
body #beats .catalog-bundles { flex: 1 1 auto; min-height: 0; overflow: hidden; }
body #beats .catalog-card[hidden],
body #beats .catalog-bundles[hidden] { display: none !important; }
body #beats .catalog-list,
body #beats .catalog-bundles { height: 100%; max-height: none; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
body #beats .track-row.catalog-grid { min-height: 68px; padding-block: 9px; }
/* Keep every grid track fixed when a beat becomes active. The older highlight
   added outer margins and inner padding to the entire row, moving its controls. */
html body #beats .track-row.catalog-grid.active {
  width: 100%;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
  box-sizing: border-box;
}
@media (min-width: 701px) {
  body #beats .track-row.catalog-grid.active > .mobile-cover,
  body #beats .track-row.catalog-grid.active > .track-copy {
    transform: translateX(8px);
  }
}
body #beats .track-row .save-icon svg { width: 19px; height: 19px; }
body #beats .track-row .license-open { border-radius: 999px; }
body #beats .catalog-bundles { padding: 14px 20px 20px; }
body #beats .catalog-bundle-grid { display: grid; grid-template-columns: repeat(var(--catalog-bundle-columns, 3), minmax(0, 1fr)); align-content: start; gap: 18px 16px; }
body #beats .catalog-bundle-tile { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
body #beats .catalog-bundle-tile:hover,
body #beats .catalog-bundle-tile:focus-visible { outline: 2px solid var(--red); outline-offset: 5px; }
body #beats .catalog-bundle-tile:hover img { filter: brightness(1.12); }
body #beats .catalog-bundle-tile img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: var(--surface); }
body #beats .catalog-bundle-tile strong { margin-top: 6px; overflow: hidden; font-size: .82rem; white-space: nowrap; text-overflow: ellipsis; }
body #beats .catalog-bundle-tile span { color: var(--muted); font-size: .7rem; }
body #beats .catalog-bundle-tile b { font-size: .78rem; font-weight: 650; }
body #beats .catalog-bundle-tile s { margin-left: 4px; color: var(--muted); font-weight: 400; }
body #beats .catalog-bundle-empty { padding: 28px 4px; color: var(--muted); }
body #beats .catalog-bundle-back { padding: 4px 0 14px; border: 0; background: transparent; color: var(--muted); font: 700 .75rem var(--sans); cursor: pointer; }
body #beats .catalog-bundle-back:hover { color: var(--red); }
body #beats .catalog-bundle-summary { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
body #beats .catalog-bundle-summary img { width: 150px; aspect-ratio: 1; object-fit: cover; border-radius: 9px; }
body #beats .catalog-bundle-summary small { color: var(--red); font-size: .63rem; font-weight: 800; letter-spacing: .1em; }
body #beats .catalog-bundle-summary h3 { margin: 5px 0; font-size: clamp(1.2rem, 2vw, 1.7rem); }
body #beats .catalog-bundle-summary p { margin: 0 0 14px; color: var(--muted); font-size: .78rem; line-height: 1.5; white-space: pre-line; }
body #beats .catalog-bundle-buy { display: inline-flex; align-items: center; min-height: 36px; padding: 0 15px; border-radius: 999px; background: var(--red); color: var(--palette-accent-text, #fff); font-size: .75rem; font-weight: 750; text-decoration: none; }
body #beats .catalog-bundle-tracks { margin-top: 6px; }
body #beats .catalog-bundle-track { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }
body #beats .catalog-bundle-track > button:first-child { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; padding: 9px 0; border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
body #beats .catalog-bundle-track img { width: 40px; height: 40px; flex: none; object-fit: cover; border-radius: 5px; }
body #beats .catalog-bundle-track span { flex: 1; overflow: hidden; font-size: .78rem; font-weight: 750; white-space: nowrap; text-overflow: ellipsis; }
body #beats .catalog-bundle-track small { color: var(--muted); }
body #beats .catalog-bundle-heart { display: grid; place-items: center; width: 38px; height: 38px; border: 0; background: transparent; color: var(--ink); cursor: pointer; }
body #beats .catalog-bundle-heart svg { width: 19px; height: 19px; }

/* The heading and rows use the same named tracks, so switching styles never
   leaves values floating in columns that no longer exist. */
@media (min-width: 701px) {
  body #beats .catalog-head.catalog-grid { display: grid !important; }
  body #beats .catalog-head.catalog-grid,
  body #beats .track-row.catalog-grid {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    grid-template-columns: 44px minmax(150px, 1.1fr) minmax(130px, 1.15fr) 50px 44px 62px 32px 32px minmax(104px, 120px) !important;
    grid-template-areas: 'cover title wave time bpm key save download license' !important;
    column-gap: clamp(5px, .9vw, 13px) !important;
    align-items: center;
  }
  body #beats .catalog-head > .head-cover,
  body #beats .track-row > .mobile-cover { grid-area: cover !important; }
  body #beats .catalog-head > .head-title,
  body #beats .track-row > .track-copy { grid-area: title !important; min-width: 0; }
  body #beats .catalog-head > .head-wave,
  body #beats .track-row > .row-wave { grid-area: wave !important; min-width: 0; }
  body #beats .catalog-head > .head-time,
  body #beats .track-row > .time-cell { grid-area: time !important; }
  body #beats .catalog-head > .head-bpm,
  body #beats .track-row > .bpm-cell { grid-area: bpm !important; }
  body #beats .catalog-head > .head-key,
  body #beats .track-row > .key-cell { grid-area: key !important; }
  body #beats .catalog-head > .head-save,
  body #beats .track-row > .save-icon { grid-area: save !important; }
  body #beats .catalog-head > .head-download,
  body #beats .track-row > .download-icon { grid-area: download !important; }
  body #beats .catalog-head > .head-license,
  body #beats .track-row > .license-open { grid-area: license !important; }
  body #beats .track-row > .row-play,
  body #beats .track-row > .mobile-facts { display: none !important; }
  body #beats .track-row > .time-cell,
  body #beats .track-row > .bpm-cell,
  body #beats .track-row > .key-cell { display: block !important; text-align: center; white-space: nowrap; }
  body #beats .track-row > .license-open { display: flex !important; width: 100% !important; min-width: 0 !important; padding-inline: 8px; align-items: center; justify-content: center; white-space: nowrap; }
  body #beats .catalog-head > span { display: block !important; color: var(--muted); font-size: .62rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; text-align: center; }
  body #beats .catalog-head > .head-title,
  body #beats .catalog-head > .head-wave { text-align: left; }
  body #beats.sf-beat-list .catalog-head.catalog-grid,
  body #beats.sf-beat-list .track-row.catalog-grid {
    grid-template-columns: 44px minmax(150px, 1fr) 50px 44px 62px 32px 32px minmax(104px, 120px) !important;
    grid-template-areas: 'cover title time bpm key save download license' !important;
  }
  body #beats.sf-beat-list .catalog-head > .head-wave,
  body #beats.sf-beat-list .track-row > .row-wave { display: none !important; }
  body #beats.sf-beat-list .catalog-head > .head-key { display: block !important; }
  body #beats.sf-beat-list .track-row > .key-cell { display: block !important; }
  body #beats.sf-beat-list .catalog-list { max-height: none; overflow-y: auto; }
}

@media (max-width: 700px) {
  body #beats .catalog-v3-widget.compact-player-header .catalog-v3-tools { flex-wrap: wrap; }
  body #beats .catalog-v3-widget.compact-player-header .catalog-v3-tools > .catalog-views { width: 100%; }
  body #beats .catalog-v3-widget.compact-player-header .catalog-v3-tools > .search-wrap { flex: 1 1 0; margin-left: 0; }
  body #beats .catalog-v3-widget.compact-player-header .catalog-search-row { flex-wrap: wrap; gap: 6px; }
  body #beats .catalog-v3-widget.compact-player-header .catalog-search-row .catalog-filter-row { flex: 1 0 100%; justify-content: flex-start; }
  body #beats.tabs-outside .catalog-v3-outside-tabs { padding: 0 12px; box-sizing: border-box; }
  body #beats .catalog-v3-tools > .catalog-v3-identity,
  body #beats .catalog-v3-widget.toolbar-logo-left .catalog-v3-tools > .catalog-v3-identity { position: static; transform: none; order: -1; flex: 1 0 100%; max-width: none; justify-content: center; padding: 4px 0; margin: 0; }
  body #beats .catalog-v3-tools > .catalog-v3-identity .catalog-v3-heading-logo { max-height: 36px; }
  body #beats .catalog-v3-widget { height: var(--catalog-widget-mobile-height, 646px); }
  body #beats .catalog-v3-heading { display: block; order: 1; padding: 5px 12px 0; }
  body #beats .catalog-v3-identity { padding: 8px 0; }
  body #beats .catalog-v3-heading .catalog-views { gap: 12px; }
  body #beats .catalog-toolbar { order: 2; }
  body #beats .catalog-card,
  body #beats .catalog-bundles { order: 3; }
  body #beats .catalog-v3-tools { padding: 9px 12px; }
  body #beats .catalog-v3-tools #savedFilter { min-width: 54px; justify-content: center; padding: 0 6px; }
  body #beats .catalog-v3-tools #savedFilter span { font-size: .67rem; }
  body #beats .catalog-v3-tools #savedFilter span::first-letter { font-size: inherit; }
  body #beats .catalog-bundle-sort { font-size: .62rem; }
  body #beats .catalog-bundle-sort select { max-width: 120px; }
  body #beats .catalog-filter-row { gap: 5px; }
  body #beats .catalog-quick-filters { min-width: 0; }
  body #beats .catalog-quick-filters button { min-height: 34px; height: 34px; padding: 0 3px; }
  body #beats #sortMenu .tool-pill { min-height: 34px; height: 34px; padding: 0 6px; }
  body #beats .catalog-list { padding: 0 8px 8px; }
  body #beats .track-row.catalog-grid { min-height: 67px; }
  body #beats .track-row .save-icon { width: 30px; min-width: 30px; }
  body #beats .catalog-bundles { padding: 12px 14px 18px; }
  body #beats .catalog-bundle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body #beats .catalog-bundle-summary { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
  body #beats .catalog-bundle-summary img { width: 96px; }
  body #beats .catalog-bundle-summary h3 { font-size: 1.1rem; }
}

/* Side-by-side layouts are narrower than the viewport. */
@media (min-width: 701px) {
@container (min-width: 761px) and (max-width: 1000px) {
  body #beats .player-desktop-full .catalog-head.catalog-grid,
  body #beats .player-desktop-full .track-row.catalog-grid { grid-template-columns: 48px minmax(120px, 1fr) minmax(80px, .6fr) 42px 36px 64px 30px 30px 104px !important; column-gap: 8px !important; }
  body #beats.sf-beat-list .player-desktop-full .catalog-head.catalog-grid,
  body #beats.sf-beat-list .player-desktop-full .track-row.catalog-grid { grid-template-columns: 48px minmax(120px, 1fr) 42px 36px 64px 30px 30px 104px !important; }
  body #beats .player-desktop-full .track-row .mobile-cover { width: 48px; height: 48px; }
}
@container (max-width: 760px) {
  body #beats .catalog-head.catalog-grid { display: none !important; }
  body #beats .track-row.catalog-grid,
  body #beats.sf-beat-list .track-row.catalog-grid,
  body #beats .player-desktop-full .track-row.catalog-grid,
  body #beats.sf-beat-list .player-desktop-full .track-row.catalog-grid {
    grid-template-columns: 44px minmax(0, 1fr) 32px minmax(96px, 112px) !important;
    grid-template-rows: auto auto !important;
    grid-template-areas: 'cover title save license' 'cover facts save license' !important;
    gap: 2px 9px !important;
    min-height: 66px;
  }
  body #beats .track-row > .mobile-facts { display: block !important; grid-area: facts !important; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  body #beats .track-row > :is(.row-wave, .time-cell, .bpm-cell, .key-cell, .download-icon) { display: none !important; }
  body #beats .track-row > .track-copy { align-self: end; }
  body #beats .track-row > .save-icon,
  body #beats .track-row > .license-open { align-self: center; }
}
}

/* Reflow the compact header before its desktop controls can collide. */
@media (max-width: 1024px) {
  body #beats { --catalog-header-gutter: clamp(14px, 2.5vw, 24px); }
  body #beats .catalog-v3-widget .catalog-v3-tools,
  body #beats .catalog-v3-widget.compact-player-header .catalog-v3-tools {
    display: flex; flex-wrap: wrap; height: auto; min-width: 0;
    padding: 14px var(--catalog-header-gutter); gap: 12px;
  }
  body #beats .catalog-v3-widget.compact-player-header .catalog-v3-tools > .catalog-v3-identity,
  body #beats .catalog-v3-widget.compact-player-header.toolbar-logo-left .catalog-v3-tools > .catalog-v3-identity {
    position: static; inset: auto; transform: none; order: -2;
    flex: 0 0 auto; width: auto; max-width: 90px; margin: 0; padding: 4px 0;
    justify-content: flex-start;
  }
  body #beats .catalog-v3-widget.compact-player-header.toolbar-logo-left .catalog-v3-tools > .catalog-v3-identity { justify-content: flex-start; }
  body #beats .catalog-v3-widget .catalog-v3-heading-logo { max-width: min(160px, 100%); max-height: clamp(32px, 5vw, 44px); }
  body #beats .catalog-v3-widget.compact-player-header .catalog-v3-tools > .catalog-views {
    position: static; transform: none; order: -1; flex: 1 1 0; width: auto; min-width: 0;
    display: flex; justify-content: flex-end; gap: clamp(10px, 2vw, 20px); margin: 0;
  }
  body #beats.tabs-center .catalog-v3-widget .catalog-v3-tools > .catalog-views { justify-content: center; }
  body #beats:not(.tabs-left):not(.tabs-center) .catalog-v3-widget .catalog-v3-tools > .catalog-views { justify-content: flex-end; }
  body #beats .catalog-v3-widget .catalog-v3-tools > .search-wrap,
  body #beats .catalog-v3-widget.compact-player-header .catalog-v3-tools > .search-wrap {
    position: relative; flex: 1 1 100%; width: 100%; max-width: none; min-width: 0; margin: 0;
  }
  body #beats .catalog-v3-widget .catalog-v3-tools .catalog-search { width: 100%; min-width: 0; height: 44px; box-sizing: border-box; font-size: 16px; }
  body #beats .catalog-v3-widget .catalog-search-row { padding: 10px var(--catalog-header-gutter); display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 12px; min-width: 0; }
  body #beats .catalog-v3-widget.compact-player-header .catalog-search-row > .search-wrap { flex: 1 1 180px; min-width: 0; order: 0; margin: 0; }
  body #beats .catalog-v3-widget.compact-player-header .catalog-search-row .catalog-filter-row { order: 1; flex: 0 1 auto; width: auto; max-width: 100%; min-width: 0; overflow-x: auto; }
  body #beats .catalog-v3-widget.compact-player-header .catalog-search-row .catalog-suggested { order: 2; flex: 1 0 100%; }
  body #beats .catalog-v3-widget .catalog-search-row .catalog-search { width: 100%; height: 40px; font-size: 16px; }
  body #beats .catalog-v3-widget.compact-player-header .catalog-v3-tools { padding-block: 10px 0; align-items: flex-end; }
  body #beats .catalog-v3-widget.compact-player-header .catalog-v3-tools > .catalog-views { justify-content: flex-end; }
  body #beats .catalog-v3-widget.compact-player-header .catalog-v3-tools > .catalog-views button { min-height: 42px; font-size: clamp(10px, 1.8vw, 13px); padding-inline: 0; }
  body #beats .catalog-v3-widget .catalog-v3-heading.logo-centered .catalog-v3-identity { position: static; transform: none; justify-content: center; max-width: 100%; }
}
@media (max-width: 560px) {
  body #beats .catalog-v3-widget.compact-player-header .catalog-search-row > .search-wrap { flex-basis: 100%; }
  body #beats .catalog-v3-widget.compact-player-header .catalog-search-row .catalog-filter-row { flex: 0 0 100%; width: 100%; justify-content: flex-start; }
  body #beats .catalog-v3-widget.compact-player-header .catalog-v3-tools .catalog-v3-heading-logo { max-width: 64px; max-height: 32px; }
}