/* Bordo brand sulle card #compare (variabile --brand-color impostata in CompareView.js) */

.compare-card {
  border: 1px solid var(--color-divider);
  border-left: 5px solid var(--brand-color, #cccccc);
  box-shadow:
    0 2px 12px color-mix(in srgb, var(--brand-color, #cccccc) 15%, transparent),
    var(--shadow-sm);
}

.compare-card:hover {
  box-shadow:
    0 4px 16px color-mix(in srgb, var(--brand-color, #cccccc) 18%, transparent),
    var(--shadow-md);
  border-color: var(--color-border);
  border-left-color: var(--brand-color, #cccccc);
}

.compare-card--best {
  border-left-color: var(--brand-color, #cccccc);
  box-shadow:
    0 2px 12px color-mix(in srgb, var(--brand-color, #cccccc) 15%, transparent),
    0 0 0 2px var(--color-primary-subtle),
    var(--shadow-sm);
}