/* Caratteri ospitati sul sito (sito.css): nessuna connessione a Google Fonts. */

body { margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 24px; background: var(--surface); color: var(--ink); -webkit-font-smoothing: antialiased; }
.mb-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; padding: var(--space-6); }
.mb-stack { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); }
.mb-band { background: var(--deep); color: var(--on-deep); }

/* Button */
.mb-btn { font: inherit; font-size: 15px; line-height: 20px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--control-md); padding: 0 var(--space-6); border-radius: var(--radius-full); border: var(--stroke-control) solid transparent; cursor: pointer; text-decoration: none; transition: background-color 150ms ease-out, border-color 150ms ease-out, box-shadow 150ms ease-out; }
.mb-btn:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--focus-ring); }
.mb-btn:disabled { cursor: not-allowed; opacity: .45; }
.mb-btn-sm { height: var(--control-sm); padding: 0 var(--space-4); font-size: 14px; }
.mb-btn-lg { height: var(--control-lg); padding: 0 var(--space-8); font-size: 16px; }
.mb-btn-primary { background: var(--blue); color: var(--on-blue); }
.mb-btn-primary:hover:not(:disabled) { background: #00659f; }
.mb-btn-accent { background: var(--sun); color: var(--on-sun); }
.mb-btn-accent:hover:not(:disabled) { background: #d47c0c; }
.mb-btn-secondary { background: transparent; color: var(--link); border-color: var(--line-strong); }
.mb-btn-secondary:hover:not(:disabled) { background: var(--blue-soft); }
.mb-btn-ghost { background: transparent; color: var(--link); }
.mb-btn-ghost:hover:not(:disabled) { background: var(--blue-soft); }
.mb-band .mb-btn-secondary { color: var(--on-deep); border-color: var(--on-deep-muted); }
.mb-band .mb-btn-secondary:hover { background: transparent; border-color: var(--on-deep); }

/* Badge */
.mb-badge { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 13px; line-height: 20px; font-weight: 500; padding: 2px var(--space-3); border-radius: var(--radius-full); background: var(--surface-sunk); color: var(--ink); border: 1px solid var(--line); white-space: nowrap; }
.mb-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: none; }
.mb-badge-dot::before { display: inline-block; }
.mb-badge-blue { background: var(--blue-soft); color: var(--link); border-color: transparent; }
.mb-badge-sun { background: var(--sun); color: var(--on-sun); border-color: transparent; }
.mb-badge-success { background: var(--success-soft); color: var(--success); border-color: transparent; }
.mb-badge-warning { background: var(--sun-soft); color: var(--warning); border-color: transparent; }
.mb-badge-danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }

/* TextField */
.mb-field { display: flex; flex-direction: column; gap: var(--space-2); max-width: 360px; }
.mb-field-label { font-size: 15px; line-height: 20px; font-weight: 500; color: var(--ink); }
.mb-field-input { font: inherit; font-size: 16px; height: var(--control-md); padding: 0 var(--space-4); border-radius: var(--radius-sm); border: var(--stroke-control) solid var(--line-strong); background: var(--surface-raised); color: var(--ink); }
.mb-field-input::placeholder { color: var(--ink-muted); opacity: 1; }
.mb-field-input:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); border-color: var(--focus); }
.mb-field-hint { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.mb-field-error .mb-field-input { border-color: var(--danger); }
.mb-field-error .mb-field-hint { color: var(--danger); }

/* ProductCard */
.mb-card { display: flex; flex-direction: column; width: 280px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; color: var(--ink); text-decoration: none; transition: box-shadow 200ms ease-out, transform 200ms ease-out; }
a.mb-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
a.mb-card:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
.mb-card-media { position: relative; aspect-ratio: 4 / 3; background: var(--surface-sunk); display: flex; align-items: center; justify-content: center; }
.mb-card-media img.mb-card-photo { width: 100%; height: 100%; object-fit: cover; }
.mb-card-media img.mb-card-placeholder { width: 56px; opacity: .9; }
.mb-card-media .mb-badge { position: absolute; top: var(--space-3); left: var(--space-3); }
.mb-card-body { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4) var(--space-6) var(--space-6); }
.mb-overline { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.mb-card-name { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; }
.mb-card-spec { font-family: var(--font-mono); font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.mb-card-foot { display: flex; align-items: baseline; justify-content: space-between; margin-top: var(--space-3); }
.mb-price { font-size: 20px; line-height: 28px; font-weight: 600; color: var(--ink); }
.mb-price-old { font-size: 14px; color: var(--ink-muted); text-decoration: line-through; margin-left: var(--space-2); font-weight: 400; }

/* SpecTable */
.mb-spec { width: 100%; max-width: 520px; border-collapse: collapse; font-size: 15px; line-height: 20px; }
.mb-spec caption { text-align: left; font-size: 20px; line-height: 28px; font-weight: 600; padding-bottom: var(--space-3); color: var(--ink); }
.mb-spec th { text-align: left; font-weight: 400; color: var(--ink-muted); padding: var(--space-3) var(--space-4) var(--space-3) 0; border-top: 1px solid var(--line); width: 45%; }
.mb-spec td { font-family: var(--font-mono); font-size: 14px; color: var(--ink); padding: var(--space-3) 0; border-top: 1px solid var(--line); }
.mb-spec tr:last-child th, .mb-spec tr:last-child td { border-bottom: 1px solid var(--line); }
.mb-spec-unit { color: var(--ink-muted); margin-left: 4px; }

@media (prefers-reduced-motion: reduce) { .mb-btn, .mb-card { transition: none; } a.mb-card:hover { transform: none; } }