.midg-ovl-swatches { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 2px; }
.midg-ovl-swatch { cursor: pointer; border: 2px solid #dcdcde; background: #fff; color: inherit; border-radius: 6px; padding: 7px 14px; font: inherit; line-height: 1.2; transition: border-color .15s, box-shadow .15s, transform .15s; }
.midg-ovl-swatch:hover:not(:disabled) { border-color: #8c8f94; transform: translateY(-1px); }
.midg-ovl-swatch:focus-visible { outline: 2px solid var(--ovl-accent, #2271b1); outline-offset: 2px; }
.midg-ovl-swatch.is-selected { border-color: var(--ovl-accent, #2271b1); box-shadow: 0 0 0 1px var(--ovl-accent, #2271b1); }
.midg-ovl-swatch.is-unavailable { opacity: .35; cursor: not-allowed; }
.midg-ovl-swatch.is-unavailable.midg-ovl-text { text-decoration: line-through; }
.midg-ovl-swatches--image .midg-ovl-swatch { padding: 0; width: var(--ovl-size, 64px); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
.midg-ovl-swatches--image .midg-ovl-swatch img { width: 100%; height: var(--ovl-size, 64px); object-fit: cover; display: block; }
.midg-ovl-swatches--image .midg-ovl-swatch span { display: block; font-size: 11px; padding: 3px 2px 4px; line-height: 1.2; }