/* Variant menus (Pass B2a): the typed "Other, type it" box, its note, and the unlisted and legacy tags. The menus themselves
   use the suggest-field styles (css/suggest-forms.css). */

.variant-menu { margin-top: 10px; }
.variant-menu-other { margin-top: 6px; }
.variant-menu-other[hidden] { display: none; }
.variant-menu-note { font-size: 12px; color: var(--text-muted); min-height: 1em; }

.variant-tag {
  display: inline-block;
  font-size: 11px;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 999px;
  vertical-align: middle;
  white-space: nowrap;
}
.variant-tag-unlisted { background: var(--surface-muted, #f1f1f4); color: var(--text-muted); border: 1px solid var(--border, #d6d6dc); }
.variant-tag-legacy { background: transparent; color: var(--text-muted); border: 1px dashed var(--border, #d6d6dc); }

/* Pass B2b-1: quantity and number menus. The amount box and unit dropdown sit side by side; every control is at least 44px tall
   for touch, and the quick picks wrap instead of scrolling sideways at 375px. */
.variant-menu > select, .variant-menu-other { min-height: 44px; }
.variant-menu-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.variant-menu-row input[inputmode="decimal"] { flex: 1 1 120px; min-width: 0; min-height: 44px; }
.variant-menu-row select { flex: 1 1 140px; min-width: 0; min-height: 44px; }
.variant-menu-suffix { font-size: 14px; color: var(--text-muted); min-width: 3em; }
.variant-menu-quick-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.variant-menu-quick {
  min-height: 44px;
  min-width: 44px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.variant-menu-quick:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }