/* Full catalog presentation. The compact widget and popup transport stay separate. */
html body #beats .catalog-v3-widget.full-catalog-current {
  --full-gutter: clamp(14px, 2vw, 24px);
  height: auto; max-width: min(var(--catalog-widget-width, 1100px), 100%);
  padding: 0; border: 0; border-radius: 8px; overflow: visible;
  background: var(--catalog-player-surface, var(--surface)); color: var(--ink); box-shadow: none;
}
html body #beats .catalog-v3-widget.full-catalog-current .catalog-v3-heading { display: none !important; }
html body #beats .catalog-v3-widget.full-catalog-current .catalog-toolbar { height: auto; margin: 0; order: 1; }
html body #beats .catalog-v3-widget.full-catalog-current .catalog-controls { display: flex !important; flex-direction: column; padding: 0; gap: 0; }
html body #beats .catalog-v3-widget.full-catalog-current .catalog-v3-tools {
  display: flex; flex-direction: row; flex-wrap: wrap; gap: 18px; align-items: center;
  padding: 16px var(--full-gutter) 0; border-bottom: 1px solid var(--line);
}
html body #beats .catalog-v3-widget.full-catalog-current .catalog-v3-tools > .catalog-v3-identity {
  position: static; inset: auto; transform: none; flex: 0 1 auto; width: auto; max-width: 180px;
  order: 0; margin: 0 6px 14px 0; padding: 0; justify-content: flex-start;
}
html body #beats .catalog-v3-widget.full-catalog-current .catalog-v3-heading-logo { width: auto; max-width: 120px; max-height: 36px; padding: 0; background: transparent; }
html body #beats .catalog-v3-widget.full-catalog-current #catalogV3Heading h2 { font-size: 22px; font-weight: 800; letter-spacing: -.04em; }
html body #beats .catalog-v3-widget.full-catalog-current .catalog-v3-tools > .catalog-views {
  position: static; transform: none; display: flex; flex: 0 1 auto; width: auto;
  order: 1; margin: 0; gap: clamp(16px, 2vw, 28px); align-self: stretch; justify-content: flex-start;
}
html body #beats .catalog-v3-widget.full-catalog-current .catalog-views button { min-height: 52px; padding: 0 0 12px; font-size: 13px; color: var(--muted); }
html body #beats .catalog-v3-widget.full-catalog-current .catalog-views button.active { color: var(--ink); }
html body #beats .catalog-v3-widget.full-catalog-current .catalog-v3-tools > .search-wrap { flex: 1 1 220px; width: auto; max-width: 420px; min-width: 120px; margin: 0 0 14px auto; order: 2; }
html body #beats .catalog-v3-widget.full-catalog-current .catalog-search { width: 100%; height: 40px; border: 1px solid var(--line); border-radius: 6px; background: transparent !important; color: var(--ink); font-size: 14px; }
html body #beats .catalog-v3-widget.full-catalog-current .catalog-search-row { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 20px; padding: 12px var(--full-gutter); border-bottom: 1px solid var(--line); }
html body #beats .catalog-v3-widget.full-catalog-current .catalog-search-row > .catalog-suggested { order: 0; flex: 1 1 240px; width: auto; min-width: 0; }
html body #beats .catalog-v3-widget.full-catalog-current .catalog-suggested { gap: 14px; }
html body #beats .catalog-v3-widget.full-catalog-current .catalog-suggested button { font-size: 12px; }
html body #beats .catalog-v3-widget.full-catalog-current .catalog-search-row > .catalog-filter-row { order: 1; flex: 0 1 auto; width: auto; max-width: 100%; margin: 0; gap: 10px; justify-content: flex-end; overflow-x: auto; }
html body #beats .catalog-v3-widget.full-catalog-current :is(.catalog-quick-filters button, #sortMenu .tool-pill, #savedFilter) {
  min-height: 36px; height: 36px; padding: 0 8px; border: 0; border-radius: 4px;
  background: transparent !important; color: var(--ink) !important; box-shadow: none; font-size: 12px;
}
html body #beats .catalog-v3-widget.full-catalog-current .catalog-card { order: 2; flex: none; margin: 0; padding: 0 var(--full-gutter); overflow: visible; background: transparent; box-shadow: none !important; }
html body #beats .catalog-v3-widget.full-catalog-current .catalog-list { height: auto; max-height: none; padding: 0; overflow: visible; }
html body #beats .catalog-v3-widget.full-catalog-current .catalog-bundles { order: 2; flex: none; height: auto; overflow: visible; }
html body #beats .catalog-v3-widget.full-catalog-current .catalog-head.catalog-grid,
html body #beats .catalog-v3-widget.full-catalog-current .track-row.catalog-grid {
  display: grid !important; grid-template-columns: 40px minmax(120px, 1fr) 48px 44px 80px 36px 36px 106px !important;
  grid-template-areas: 'cover title time bpm key save download license' !important;
  column-gap: clamp(6px, 1vw, 14px) !important; align-items: center;
}
html body #beats .catalog-v3-widget.full-catalog-current .catalog-head.catalog-grid { min-height: 40px; padding: 0; border-bottom: 1px solid var(--line); }
html body #beats .catalog-v3-widget.full-catalog-current .catalog-head > .head-wave { display: none !important; }
html body #beats .catalog-v3-widget.full-catalog-current .track-row.catalog-grid {
  min-height: 56px; height: auto; margin: 0; padding: 8px 0; border-radius: 0;
  border-bottom: 1px solid var(--line); background: transparent; box-shadow: none !important;
}
html body #beats .catalog-v3-widget.full-catalog-current .track-row.catalog-grid.active { border-radius: 4px; background: var(--catalog-player-active, var(--surface-soft)); }
html body #beats .catalog-v3-widget.full-catalog-current .track-row.active > :is(.mobile-cover, .track-copy) { transform: none; }
html body #beats .catalog-v3-widget.full-catalog-current .track-row > .mobile-cover { display: block !important; grid-area: cover !important; width: 40px; height: 40px; border-radius: 4px; }
html body #beats .catalog-v3-widget.full-catalog-current .track-row > .track-copy { grid-area: title !important; align-self: center; min-width: 0; }
html body #beats .catalog-v3-widget.full-catalog-current .track-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; }
html body #beats .catalog-v3-widget.full-catalog-current .track-title-link { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 1.35; font-weight: 700; }
html body #beats .catalog-v3-widget.full-catalog-current .track-artist-tags { display: flex !important; flex-wrap: wrap; gap: 2px 6px; margin-top: 3px; min-width: 0; }
html body #beats .catalog-v3-widget.full-catalog-current .track-artist-tag { max-width: none; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--muted); font-size: 11px; font-weight: 400; line-height: 1.3; white-space: normal; overflow-wrap: anywhere; }
html body #beats .catalog-v3-widget.full-catalog-current .track-artist-tag + .track-artist-tag::before { content: '·'; margin-right: 6px; }
html body #beats .catalog-v3-widget.full-catalog-current .track-row > :is(.row-play, .row-wave, .mobile-facts) { display: none !important; }
html body #beats .catalog-v3-widget.full-catalog-current .track-row > :is(.time-cell, .bpm-cell, .key-cell) { display: block !important; font-size: 12px; font-weight: 500; color: var(--muted); white-space: nowrap; text-align: center; }
html body #beats .catalog-v3-widget.full-catalog-current .track-row > .row-icon { display: grid !important; place-items: center; width: 36px; min-width: 36px; height: 40px; padding: 0; background: transparent !important; color: var(--ink) !important; border: 0; box-shadow: none; }
html body #beats .catalog-v3-widget.full-catalog-current .row-icon svg { width: 18px; height: 18px; }
html body #beats .catalog-v3-widget.full-catalog-current .track-row > .save-icon { grid-area: save !important; }
html body #beats .catalog-v3-widget.full-catalog-current .track-row > .download-icon { grid-area: download !important; }
html body #beats .catalog-v3-widget.full-catalog-current .track-row > .license-open {
  display: flex !important; grid-area: license !important; align-items: center; justify-content: center;
  min-width: 0 !important; width: 100% !important; min-height: 34px; height: 34px; padding: 0 8px;
  border: 0 !important; border-radius: 6px; background: var(--ink) !important; color: var(--surface) !important;
  box-shadow: none !important; font-size: 12px; font-weight: 700; white-space: nowrap;
}
html body #beats .catalog-v3-widget.full-catalog-current .track-row > .license-open.in-cart,
html body #beats .catalog-v3-widget.full-catalog-current .track-row.active > .license-open { background: var(--palette-accent, var(--red)) !important; color: var(--palette-accent-text, #fff) !important; }
html body #beats .catalog-v3-widget.full-catalog-current .catalog-over-cap:not(.full-catalog-over-cap) { display: grid !important; }
html body #beats .catalog-v3-widget.full-catalog-current .track-row.catalog-grid.full-catalog-over-cap { display: none !important; }
html body #beats .catalog-v3-widget.full-catalog-current.player-boxy .license-open { border-radius: 2px; }
html body #beats .catalog-v3-widget.full-catalog-current.player-buttons-pill .license-open { border-radius: 999px; }
html body #beats .catalog-v3-widget.full-catalog-current.player-buttons-square .license-open { border-radius: 2px; }

/* A single cart-driven counter belongs to the player and uses its resolved palette. */
html body #beats > #bundleHome.player-bundle-connected {
  display: block; width: min(var(--catalog-widget-width, 1100px), 100%); max-width: 100%;
  margin: var(--catalog-bundle-gap, 16px) auto 0; padding: 0;
}
html body.sf-bundle-off #beats > #bundleHome.player-bundle-connected { display: none !important; }
html body #bundleHome.player-bundle-connected .bundle-bar {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 12px 20px; width: 100%; margin: 0; padding: 16px clamp(14px, 2vw, 24px);
  color: var(--ink); background: var(--catalog-player-surface, var(--surface));
  border: 1px solid var(--catalog-player-line, var(--line)); border-radius: 8px; box-shadow: none !important;
}
html body #bundleHome.player-bundle-connected[data-shape='boxy'] .bundle-bar { border-radius: 2px; }
html body #bundleHome.player-bundle-connected .bundle-copy { display: flex; flex-wrap: wrap; gap: 6px 14px; min-width: 0; width: auto; max-width: 100%; }
html body #bundleHome.player-bundle-connected .bundle-copy strong { font-size: 12px; color: var(--ink); white-space: normal; }
html body #bundleHome.player-bundle-connected #bundleMessage { flex: 1 1 180px; width: auto; overflow: visible; text-overflow: clip; white-space: normal; color: var(--muted); font-size: 12px; }
html body #bundleHome.player-bundle-connected .bundle-progress { margin-left: auto; flex: 0 0 auto; color: var(--ink); }

@media (max-width: 760px) {
  html body #beats .catalog-v3-widget.full-catalog-current .catalog-v3-tools { gap: 10px 16px; }
  html body #beats .catalog-v3-widget.full-catalog-current .catalog-v3-tools > .catalog-v3-identity { max-width: 120px; margin-bottom: 0; }
  html body #beats .catalog-v3-widget.full-catalog-current .catalog-v3-tools > .catalog-views { flex: 1 1 auto; justify-content: flex-end; gap: 18px; }
  html body #beats .catalog-v3-widget.full-catalog-current .catalog-views button { min-height: 44px; padding-bottom: 8px; font-size: 12px; }
  html body #beats .catalog-v3-widget.full-catalog-current .catalog-search-row > .search-wrap { flex: 1 0 100%; order: -1; width: 100%; margin: 0; }
  html body #beats .catalog-v3-widget.full-catalog-current .catalog-search { font-size: 16px; height: 42px; }
  html body #beats .catalog-v3-widget.full-catalog-current .catalog-search-row > .catalog-filter-row { flex: 1 0 100%; justify-content: space-between; order: 0; gap: 4px; }
  html body #beats .catalog-v3-widget.full-catalog-current .catalog-search-row > .catalog-suggested { flex: 1 0 100%; order: 1; }
  html body #beats .catalog-v3-widget.full-catalog-current .catalog-head.catalog-grid { display: none !important; }
  html body #beats .catalog-v3-widget.full-catalog-current .track-row.catalog-grid {
    grid-template-columns: 38px minmax(0, 1fr) 36px 82px !important;
    grid-template-areas: 'cover title save license' 'cover title download license' 'cover facts download license' !important;
    grid-template-rows: auto auto auto !important; column-gap: 8px !important; row-gap: 0 !important;
    min-height: 88px; padding: 8px 0;
  }
  html body #beats .catalog-v3-widget.full-catalog-current .track-row > .mobile-cover { width: 38px; height: 38px; align-self: center; }
  html body #beats .catalog-v3-widget.full-catalog-current .track-row > .track-copy { align-self: end; }
  html body #beats .catalog-v3-widget.full-catalog-current .track-title-link { font-size: 13px; }
  html body #beats .catalog-v3-widget.full-catalog-current .track-artist-tags { display: flex !important; margin-top: 2px; }
  html body #beats .catalog-v3-widget.full-catalog-current .track-artist-tag { font-size: 11px; }
  html body #beats .catalog-v3-widget.full-catalog-current .track-row > .mobile-facts { display: block !important; grid-area: facts !important; align-self: start; min-width: 0; margin-top: 3px; font-size: 10px; line-height: 1.4; white-space: normal; overflow: visible; color: var(--muted); }
  html body #beats .catalog-v3-widget.full-catalog-current .track-row > :is(.time-cell, .bpm-cell, .key-cell) { display: none !important; }
  html body #beats .catalog-v3-widget.full-catalog-current .track-row > .row-icon { height: 36px; align-self: start; }
  html body #beats .catalog-v3-widget.full-catalog-current .track-row > .license-open { min-height: 40px; height: 40px; padding-inline: 5px; font-size: 11px; align-self: center; }
}
@media (min-width: 761px) and (max-width: 1000px) {
  html body #beats .catalog-v3-widget.full-catalog-current .catalog-head.catalog-grid,
  html body #beats .catalog-v3-widget.full-catalog-current .track-row.catalog-grid { grid-template-columns: 36px minmax(100px, 1fr) 40px 36px 65px 30px 30px 92px !important; column-gap: 7px !important; }
}

/* Tablet and desktop rows (701px and wider): keep the artist tags under the title on one line.
   Tags that do not fit wrap out of view whole (the tall row gap keeps any second line fully hidden), so none is ever cut in half, and the title stays
   centered beside the cover. Phones (700px and below) keep their own details line instead. */
@media (min-width: 701px) {
  html body #beats .track-row .track-artist-tags { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 24px 6px; margin-top: 3px; min-width: 0; max-height: 21px; overflow: hidden; }
  html body #beats .track-row .track-copy { align-self: center; justify-content: center; }
}