/* Component: product-card — design-reference/canvas/ProductCard.dc.html */

.mx-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--mx-space-5); }
.mx-card {
	display: flex; flex-direction: column;
	height: 100%;
	background: var(--mx-white);
	border: 1px solid var(--mx-line);
	border-radius: var(--mx-radius-lg);
	overflow: hidden;
}
.mx-card__visual {
	display: flex; align-items: center; justify-content: center;
	height: 250px;
	background: var(--mx-sage);
}
.mx-card__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; padding: 18px var(--mx-space-5) var(--mx-space-5); }
.mx-card__name { font-family: var(--mx-font-display); font-size: var(--mx-text-xl); font-weight: 500; line-height: 1.2; color: var(--mx-forest); text-decoration: none; }
.mx-card__name:hover { color: var(--mx-leaf-dark); text-decoration: underline; }
.mx-card__latin { font-size: var(--mx-text-base); color: var(--mx-muted); }
.mx-card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-top: var(--mx-space-2); }
.mx-card__amount { font-size: var(--mx-text-xl); font-weight: 700; color: var(--mx-ink); }
.mx-card__unit { font-size: var(--mx-text-sm); color: var(--mx-muted); }
.mx-card__tier-note { font-size: var(--mx-text-sm); color: var(--mx-leaf-dark); }
.mx-card__docs { font-size: var(--mx-text-xs); color: var(--mx-muted); }
.mx-card__badge { align-self: flex-start; margin-top: var(--mx-space-1); }
.mx-card__actions { margin-top: auto; padding-top: 14px; display: flex; gap: var(--mx-space-2); }
.mx-card__actions .mx-btn--primary { flex: 1 1 auto; min-height: var(--mx-touch); font-size: var(--mx-text-md); padding: 0 var(--mx-space-3); }