/* ============================================================================
   COMPONENT: artwork-catalog-card — catalog list/grid card (SKIN tier, AllPaintingsStore)
   PHASE B REDESIGN (2026-07-06) — see artwork-catalog-card.css header and
   DOC_CSS_COMPONENT_MIGRATION_LIST.md §F6. APS was already fav-double-ring-free
   (its fav-toggle IS a deliberate circular icon-button, not a redundant painted
   pill) — preserved here as a documented per-brand extra rule on top of the
   shared icon-only default.
   ============================================================================ */

.artwork-catalog-card {
  --artwork-catalog-card-border-color: var(--aps-rule, #DCD7CB);
  --artwork-catalog-card-radius: 2px;
  --artwork-catalog-card-bg: var(--aps-paper, #FBFAF6);

  --artwork-catalog-card-artist-color: var(--aps-ink-3, #8A857D);
  --artwork-catalog-card-artist-accent-color: var(--aps-ink, #161310);
  --artwork-catalog-card-title-color: var(--aps-ink-2, #4A4641);
  --artwork-catalog-card-desc-color: var(--aps-ink-2, #4A4641);

  --artwork-catalog-card-hover-bg: var(--aps-paper, #FBFAF6);
  --artwork-catalog-card-hover-border: 1px solid var(--aps-rule-2, #C8C2B3);

  --artwork-catalog-card-buy-btn-bg: var(--aps-burgundy, #5B1622);
  --artwork-catalog-card-buy-btn-color: var(--aps-cream-2, #F2E6D8);
  --artwork-catalog-card-buy-btn-radius: 2px;

  --artwork-catalog-card-image-hover-transform: scale(1.05);

  --artwork-catalog-card-card-hover-bg: var(--aps-paper, #FBFAF6);
  --artwork-catalog-card-card-hover-transform: translateY(-3px);
}

.artwork-catalog-card:hover {
  border-color: var(--aps-rule-2, #C8C2B3);
}

/* APS's signature: radial-gradient darkening vignette on image hover */
.artwork-catalog-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(transparent 30%, rgba(0, 0, 0, .55) 100%);
  opacity: 0;
  transition: opacity 1.1s;
  pointer-events: none;
}

.artwork-catalog-card__media:hover::after {
  opacity: 1;
}

/* APS's signature: circular fav-toggle button (already bug-free — a deliberate
   icon-button, not the redundant painted-pill pattern the shared default retires) */
.artwork-catalog-card__fav-group {
  width: 34px;
  height: 34px;
  background: var(--aps-paper, #FBFAF6);
  border: 1px solid var(--aps-rule-2, #C8C2B3);
  border-radius: 50%;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

.artwork-catalog-card__fav-group:hover,
.artwork-catalog-card__fav-group.active {
  background: var(--aps-burgundy, #5B1622);
  border-color: var(--aps-burgundy, #5B1622);
}

.artwork-catalog-card__fav-group .unfav_icon,
.artwork-catalog-card__fav-group .fav_icon {
  width: 14px;
  height: 14px;
  filter: brightness(0) saturate(100%) invert(11%) sepia(48%) saturate(2618%) hue-rotate(327deg) brightness(86%) contrast(98%);
}

.artwork-catalog-card__fav-group:hover .unfav_icon,
.artwork-catalog-card__fav-group:hover .fav_icon,
.artwork-catalog-card__fav-group.active .unfav_icon,
.artwork-catalog-card__fav-group.active .fav_icon {
  filter: brightness(10); /* white on burgundy hover/active background */
}

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

.top100-listing .artwork-catalog-card {
  background: var(--aps-paper, #FBFAF6);
}

.top100-listing .artwork-catalog-card:hover {
  border-color: var(--aps-rule-2, #C8C2B3);
}