/* Component classes, from the source kit's components/bundle.css */
.mx-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); box-sizing: border-box; min-height: 48px; padding: 0 var(--space-6); border-radius: var(--radius-pill); border: 2px solid transparent; font-family: var(--font-sans); font-size: 17px; font-weight: 600; line-height: 20px; text-decoration: none; cursor: pointer; }
.mx-btn--primary { background: var(--action); color: var(--on-fill); }
.mx-btn--light { background: var(--ink); color: var(--surface); }
.mx-btn--outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.mx-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.mx-chip { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 44px; padding: 0 var(--space-4); border-radius: var(--radius-pill); border: 2px solid var(--ink); background: transparent; color: var(--ink); font-family: var(--font-sans); font-size: 15px; font-weight: 600; cursor: pointer; }
.mx-chip--selected { background: var(--violet); border-color: var(--violet); color: var(--on-fill); }

.mx-field { display: flex; flex-direction: column; gap: var(--space-3); }
.mx-field__label { font-size: 15px; line-height: 20px; font-weight: 600; color: var(--ink); }
.mx-field__control { box-sizing: border-box; width: 100%; min-height: 48px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); border: 2px solid var(--ink-muted); background: var(--surface-alt); color: var(--ink); font-family: var(--font-sans); font-size: 18px; line-height: 24px; }
.mx-field__control::placeholder { color: var(--ink-muted); opacity: 1; }
.mx-field__note { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.mx-field--error .mx-field__control { border-width: 4px; border-color: var(--ink); }
.mx-field__note--error { display: flex; align-items: center; gap: var(--space-1); color: var(--ink); font-weight: 600; }

.mx-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding: var(--space-6) var(--space-8); background: var(--surface); flex-wrap: wrap; }
.mx-header__brand { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--ink); text-decoration: none; }
.mx-header__nav { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.mx-header__link { font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; padding: var(--space-2) 0; border-bottom: 3px solid transparent; }
.mx-header__link--active { border-bottom-color: var(--accent); }
.mx-header__cart { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink); text-decoration: none; min-height: 44px; }
.mx-header__count { min-width: 24px; text-align: center; }

.mx-eyebrow { margin: 0; text-transform: uppercase; color: var(--ink-muted); }

.mx-score { display: flex; flex-direction: column; box-sizing: border-box; width: 340px; padding: var(--space-6); gap: var(--space-4); background: var(--surface-alt); border: 1px solid var(--line); border-radius: var(--radius-lg); color: var(--ink); }
.mx-score__cover { display: flex; align-items: center; justify-content: center; height: 220px; background: var(--panel-light); color: var(--ink-on-light); border-radius: var(--radius-md); box-shadow: var(--shadow-cover); overflow: hidden; }
.mx-score__cover img { width: 100%; height: 100%; object-fit: cover; }
.mx-score__body { display: flex; flex-direction: column; gap: var(--space-2); }
.mx-score__title { margin: 0; }
.mx-score__title a { color: inherit; text-decoration: none; }
.mx-score__meta { margin: 0; color: var(--ink-muted); }
.mx-score__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-2); }
.mx-score__price { color: var(--accent); }

.mx-wave { display: flex; align-items: flex-end; gap: var(--space-2); height: 160px; }
.mx-wave__bar { flex: 0 0 14px; border-radius: var(--radius-pill); background: var(--accent); }
.mx-wave__bar--violet { background: var(--violet); }

@media (prefers-reduced-motion: no-preference) {
  .mx-btn, .mx-chip { transition: background-color 200ms; }
}