/* Loaded after styles.css. Only cards with a current New badge move their category label. */
.asset-art[data-catalog-new],
.package-card-image[data-catalog-new] {
  position: relative;
  --catalog-new-inset: 10px;
  --catalog-new-height: 24px;
}

.catalog-new-badge {
  position: absolute;
  top: var(--catalog-new-inset);
  left: var(--catalog-new-inset);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 4px;
  color: #fff;
  background: var(--primary-hover, #4054c8);
  box-shadow: 0 1px 3px #17204b40;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  white-space: nowrap;
  pointer-events: none;
}

.asset-art[data-catalog-new] > .asset-category {
  top: calc(var(--catalog-new-inset) + var(--catalog-new-height) + 6px);
}

@media (max-width: 560px) {
  .asset-art[data-catalog-new],
  .package-card-image[data-catalog-new] { --catalog-new-inset: 7px; }
}