/* Card artwork treatment ----------------------------------------------------
   Some remote card images are rectangular files whose white square corners sit
   inside an object-fit: contain box. Clipping the full <img> box therefore may
   not touch the actual card pixels. On collection cards, let the bitmap keep its
   natural aspect ratio inside the existing 320px stage, then mask the bitmap
   itself. The source file remains untouched. PSA certificate scans and the
   market lookup detail image are intentionally excluded. */
.collection-card .img-wrap {
  min-height: 320px;
  display: grid;
  place-items: center;
}

.collection-card .img-wrap img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 320px;
  border-radius: 5.25%;
  clip-path: inset(0.35% round 5.25%);
}

/* Smaller card artwork surfaces use fixed boxes, so a slightly stronger mask
   keeps the same visual card silhouette at thumbnail size. */
.holding-card img,
.shop-hero-card img {
  border-radius: 5.25%;
  clip-path: inset(0.35% round 5.25%);
}

/* High-value holdings link to the card's SNKRDUNK page. */
.holding-card-link {
  margin: -4px;
  padding: 4px;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease;
}

.holding-card-link:hover,
.holding-card-link:focus-visible {
  background: var(--accent-soft);
  color: var(--accent-strong);
  outline: none;
}

.holding-card-link:focus-visible {
  box-shadow: 0 0 0 2px var(--accent);
}

/* Per-card history controls. */
.card-history-header {
  align-items: center;
  gap: 16px;
}

.card-history-select-shell {
  width: min(100%, 380px);
  flex: 0 1 380px;
}

.card-history-select-shell select {
  width: 100%;
  max-width: 340px;
}

.card-history-contribution {
  color: var(--muted-strong);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
  .card-history-header {
    align-items: stretch;
    flex-direction: column;
  }

  .card-history-select-shell {
    width: 100%;
    flex-basis: auto;
  }

  .card-history-select-shell select {
    max-width: none;
  }
}