/*
 * Aperina Weight Options — choice cards (DESIGN.md: radio as card; selected = wine tint + wine inset border).
 * Uses the Aperina theme's role tokens, with fallbacks so it works under any theme.
 */
.aperina-weight { border: 0; padding: 0; margin: 0 0 var(--space-5, 20px); min-width: 0; }
.aperina-weight__legend { padding: 0; margin-block-end: var(--space-2, 8px); font-size: var(--text-label, 0.875rem); font-weight: 500; color: var(--text, #322D29); }
.aperina-weight__options { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px); }
.aperina-weight__option {
  position: relative; display: grid; gap: 2px; min-width: 120px;
  padding: var(--space-3, 12px) var(--space-4, 16px);
  border: 1px solid var(--border-strong, #8A7E73); border-radius: var(--radius-field, 8px);
  background: var(--bg-raised, #F7F3EE); color: var(--text, #322D29); cursor: pointer;
  transition: background-color var(--dur-base, 240ms) var(--ease-out, ease), border-color var(--dur-base, 240ms) var(--ease-out, ease);
}
.aperina-weight__option input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.aperina-weight__label { font-size: var(--text-small, 0.9375rem); font-weight: 600; line-height: 1.6; }
.aperina-weight__price { font-size: var(--text-caption, 0.8125rem); line-height: 1.6; color: var(--text-muted, #6B6159); }
.aperina-weight__option:hover { border-color: var(--text, #322D29); }
.aperina-weight__option:has(input:checked) { background: var(--accent-tint, #E7D8D5); border-color: var(--primary, #72383D); box-shadow: inset 0 0 0 1px var(--primary, #72383D); }
.aperina-weight__option:has(input:checked) .aperina-weight__price { color: var(--on-accent-tint, #72383D); }
.aperina-weight__option:has(input:focus-visible) { outline: 2px solid var(--focus-ring, #72383D); outline-offset: 3px; }
.aperina-weight__unit { font-size: 0.85em; font-weight: 400; color: var(--text-muted, #6B6159); }