/* SAMECOM advanced variations — mobile-first, built on the existing design tokens. */
.samecom-mv { display: flex; flex-direction: column; gap: 16px; }
.samecom-mv__group { border: 0; margin: 0; padding: 0; min-width: 0; }
.samecom-mv__legend { padding: 0; margin-bottom: 8px; font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--samecom-muted, #6b7280); }
.samecom-mv__chosen { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--samecom-text, #1f2937); }
.samecom-mv__options { display: flex; flex-wrap: wrap; gap: 8px; }
.samecom-mv__option {
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px;
	border: 2px solid var(--samecom-border, #e5e7eb); border-radius: 10px; background: #fff;
	cursor: pointer; font-size: .9rem; font-weight: 600; line-height: 1.2;
	transition: border-color .18s, background-color .18s, transform .12s;
}
.samecom-mv__options.has-images .samecom-mv__option { flex-direction: column; gap: 6px; padding: 8px; text-align: center; width: 96px; }
.samecom-mv__thumb { width: 50px; height: 50px; object-fit: cover; border-radius: 8px; display: block; }
.samecom-mv__options.has-images .samecom-mv__thumb { width: 72px; height: 72px; }
.samecom-mv__option:hover { transform: translateY(-1px); }
input:checked + .samecom-mv__option { border-color: var(--samecom-primary, #c9080b); background: color-mix(in srgb, var(--samecom-primary, #c9080b) 8%, #fff); color: var(--samecom-primary, #c9080b); }
input:focus-visible + .samecom-mv__option { outline: 3px solid color-mix(in srgb, var(--samecom-primary, #c9080b) 45%, transparent); outline-offset: 2px; }
.samecom-mv__label { word-break: break-word; }

.samecom-mv__builder { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.samecom-mv__price { font-size: 1.15rem; font-weight: 700; margin-inline-end: auto; }
.samecom-mv__add { min-height: 44px; }

.samecom-mv__selected { border: 1px solid var(--samecom-border, #e5e7eb); border-radius: 12px; padding: 12px; background: var(--samecom-soft, #f9fafb); }
.samecom-mv__selected[hidden] { display: none; }
.samecom-mv__selected-title { margin: 0 0 8px; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--samecom-muted, #6b7280); }
.samecom-mv__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.samecom-mv__item { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px; background: #fff; border-radius: 10px; border: 1px solid var(--samecom-border, #e5e7eb); }
.samecom-mv__item img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; flex: none; }
.samecom-mv__item-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.samecom-mv__item-text span { font-size: .85rem; color: var(--samecom-muted, #6b7280); }
.samecom-mv__item-qty { margin-inline-start: auto; display: flex; align-items: center; gap: 4px; }
.samecom-mv__item-value { min-width: 28px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; }
.samecom-mv__remove { border: 0; background: transparent; font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--samecom-muted, #6b7280); min-width: 40px; min-height: 40px; border-radius: 8px; }
.samecom-mv__remove:hover { color: var(--samecom-danger, #d63638); background: rgba(0,0,0,.04); }
.samecom-mv__totals { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 10px 2px 0; font-size: .9rem; }
.samecom-mv__totals strong { font-size: 1.2rem; color: var(--samecom-primary, #c9080b); font-variant-numeric: tabular-nums; }
.samecom-mv__submit { min-height: 48px; width: 100%; }
.samecom-mv__message[hidden] { display: none; }

@media (min-width: 640px) {
	.samecom-mv__submit { width: auto; align-self: flex-start; padding-inline: 32px; }
}
@media (prefers-reduced-motion: reduce) {
	.samecom-mv__option { transition: none; }
}