/* Keep missing app artwork from changing card geometry or showing broken-image chrome. */
:root { --xl-home-banner-fallback: #475569; }
html[data-theme="dark"] { --xl-home-banner-fallback: #35363a; }

.xl-card-sm.xl-app-card .xl-card-media > .xl-icon-fallback {
  display: grid;
  place-items: center;
  background: var(--xl-bg-alt, #f8fafc);
  color: var(--xl-text-secondary, #64748b);
  font-size: 1.1rem;
  font-weight: 750;
}

.xl-collection-cover-apps .xl-collection-app-icon.xl-icon-fallback {
  background: var(--xl-bg-alt, #f8fafc);
  color: var(--xl-text-secondary, #64748b);
}

.xl-collection-card--banner.has-missing-banner { background: var(--xl-home-banner-fallback); }
.xl-collection-card--banner.has-missing-banner > .xl-collection-card-banner { background: transparent; }
.xl-collection-card--banner.has-missing-banner::after { background: none; }
.xl-section--collection .xl-collection-card--banner > .xl-collection-card-banner img[hidden],
.xl-collections-page .xl-collection-card--banner > .xl-collection-card-banner img[hidden] { display: none; }
.xl-collection-card--banner.has-missing-banner .xl-collection-copy,
.xl-collection-card--banner.has-missing-banner .xl-collection-copy > span,
.xl-collection-card--banner.has-missing-banner .xl-collection-arrow { color: #fff; }

.related-carousel__icon-fallback {
  color: var(--xl-text-secondary, #64748b);
  font-size: 1.15rem;
  font-weight: 750;
}