.catalog-index-frame {
  margin-bottom: 24px;
}
.catalog-index-frame::before {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  top: calc(100% + 10px);
  height: 40px;
  background: radial-gradient(ellipse closest-side, rgba(0, 0, 0, .65), transparent);
  pointer-events: none;
}
.catalog-index {
  pointer-events: none;
  user-select: none;
  border: 1px solid rgba(148, 173, 215, .3);
  border-radius: 12px;
  background: #1a2234;
  box-shadow: 0 0 20px rgba(0, 0, 0, .18);
  overflow: hidden;
}
.catalog-index-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(148, 163, 184, .12);
  background: #253149;
  color: #e7edfa;
  font-size: 12px;
  font-weight: 650;
}
.catalog-index-columns, .catalog-index-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 60px 62px 88px;
  column-gap: 12px;
  align-items: center;
  padding: 0 16px;
}
.catalog-index-columns {
  height: 32px;
  color: #a4b2cb;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  background: #202a40;
}
.catalog-index-window {
  height: 354px;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 85%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 85%, transparent);
}
.catalog-index-row { height: 82px; border-bottom: 1px solid rgba(148, 163, 184, .1); }
.catalog-index-copy { min-width: 0; }
.catalog-index-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #f1f3f8; font-size: 12px; font-weight: 700; }
.catalog-index-tag { display: inline-block; margin-top: 4px; padding: 1px 5px; border: 1px solid #37425d; border-radius: 4px; background: #222a3d; color: #b9c9eb; font-size: 8px; line-height: 1.35; }
.catalog-index-copy p { margin: 4px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #a4aec2; font-size: 10px; line-height: 1.4; }
.catalog-index-icons { display: flex; align-items: center; min-width: 0; }
.catalog-index-icons > img { flex: 0 0 24px; width: 24px; height: 24px; object-fit: contain; padding: 4px; background: #192032; border: 1px solid #3b4354; border-radius: 50%; }
.catalog-index-icons > img + img { margin-left: -3px; }
.catalog-index-provider { gap: 4px; }
.catalog-index-provider > .ps-provider-icon { width: 24px; height: 24px; border-radius: 50%; }
.catalog-index-people img { padding: 0; object-fit: cover; }
.catalog-index-people img + img { margin-left: -7px; }
.catalog-index[data-ready] .catalog-index-track { animation: catalog-index-scroll 42s linear infinite; }
.catalog-index[data-suspended] .catalog-index-track { animation-play-state: paused !important; }
@keyframes catalog-index-scroll { to { transform: translateY(-50%); } }
@media (max-width: 480px) {
  .catalog-index-columns, .catalog-index-row { padding: 0 10px; column-gap: 7px; grid-template-columns: minmax(0, 1fr) 54px 50px 82px; }
  .catalog-index-icons > img { width: 22px; height: 22px; flex-basis: 22px; }
  .catalog-index-provider > .ps-provider-icon { width: 22px; height: 22px; }
  .catalog-index-copy strong { font-size: 11px; }
  .catalog-index-window { height: 320px; }
}
@media (prefers-reduced-motion: reduce) {
  .catalog-index[data-ready] .catalog-index-track { animation: none; }
}