/* ============================================================================
   COMPONENT: artwork-catalog-card — catalog list/grid card (SKIN tier, OriginalUniqueArt)
   PHASE B REDESIGN (2026-07-06) — see artwork-catalog-card.css header and
   DOC_CSS_COMPONENT_MIGRATION_LIST.md §F6. OUA was already fav-double-ring-free
   (a single pill lives on `.fav-toggle` itself, not a redundant group wrapper) —
   preserved as a documented per-brand extra rule on top of the shared
   icon-only default.
   ============================================================================ */

.artwork-catalog-card {
  --artwork-catalog-card-border-color: var(--oua-line, #e6e6e6);
  --artwork-catalog-card-radius: var(--oua-radius, 4px);
  --artwork-catalog-card-bg: var(--oua-bg, #ffffff);

  --artwork-catalog-card-artist-color: var(--oua-ink-3, #848484);
  --artwork-catalog-card-artist-accent-color: var(--oua-accent, #575248);
  --artwork-catalog-card-title-color: var(--oua-ink, #333333);
  --artwork-catalog-card-desc-color: var(--oua-ink-2, #575757);

  --artwork-catalog-card-hover-bg: var(--oua-bg, #ffffff);
  --artwork-catalog-card-hover-border: 1px solid var(--oua-line, #e6e6e6);

  --artwork-catalog-card-buy-btn-bg: var(--oua-ink, #232323);
  --artwork-catalog-card-buy-btn-color: #ffffff;
  --artwork-catalog-card-buy-btn-radius: 999px;

  --artwork-catalog-card-image-hover-transform: scale(1.02);
  --artwork-catalog-card-image-hover-filter: grayscale(100%);

  --artwork-catalog-card-card-hover-bg: var(--oua-band, #f7f7f7);
  --artwork-catalog-card-card-hover-shadow: 0 14px 30px -20px rgba(35, 35, 35, 0.28);
  --artwork-catalog-card-card-hover-transform: translateY(-2px);
}

.artwork-catalog-card:hover {
  border-color: var(--oua-divider, #ddd);
}

.artwork-catalog-card__artist h2,
.artwork-catalog-card__artist h2 a {
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* OUA's signature: pill-bordered fav-toggle (single layer, already bug-free —
   the group itself carries no chrome, only the toggle does) */
.artwork-catalog-card__fav-toggle {
  border: 1px solid var(--oua-line-2, #d6d6d6);
  border-radius: 999px;
  padding: 7px 10px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.artwork-catalog-card__fav-toggle:hover,
.artwork-catalog-card__fav-group.active .artwork-catalog-card__fav-toggle {
  background: var(--oua-slot, #ececec);
  border-color: var(--oua-accent, #575248);
}

/* ---- top100-listing ---- */

.top100-listing .artwork-catalog-card {
  background: var(--oua-bg, #ffffff);
}

.top100-listing .artwork-catalog-card:hover {
  border-color: var(--oua-ink, #232323);
  box-shadow: 0 16px 32px -22px rgba(0,0,0,0.45);
  transform: translateY(-2px);
}

.top100-listing .artwork-catalog-card__artist h2,
.top100-listing .artwork-catalog-card__artist h2 a {
  color: var(--oua-ink, #232323);
}

.top100-listing .artwork-catalog-card__title,
.top100-listing .artwork-catalog-card__title a {
  color: var(--oua-muted, #848484);
}

.top100-listing .artwork-catalog-card__title a:hover {
  color: var(--oua-accent, #575248);
}

.top100-listing .artwork-catalog-card__buy-btn:hover {
  background: var(--oua-accent, #575248);
  border-color: var(--oua-accent, #575248);
}