/* скрываем исходные select (оставляем доступными для скринридеров при желании) */
.mia-swatch-hidden { position:absolute !important; left:-9999px !important; }

/* группа свотчей */
.mia-swatch-group { display:flex; flex-wrap:wrap; gap:8px; margin:.5rem 0 1rem; }

/* базовая кнопка */
.mia-swatch {
    display:inline-flex; align-items:center; justify-content:center;
    width:34px; height:34px; border-radius:999px;
    border:1px solid #d0d7de; background:#fff; cursor:pointer;
    transition:box-shadow .15s ease, transform .05s ease;
}
.mia-swatch:hover { box-shadow:0 0 0 3px rgba(0,0,0,.05) inset; }
.mia-swatch.is-selected { box-shadow:0 0 0 2px #111 inset; }
.mia-swatch.is-disabled { opacity:.35; cursor:not-allowed; }

/* тип color */
.mia-swatch .mia-swatch-dot{ display:block; width:20px; height:20px; border-radius:50%; box-shadow:0 0 0 1px rgba(0,0,0,.15) inset; }

/* тип image */
.mia-swatch img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:999px; }

/* тип label */
.mia-swatch.is-label { width:auto; min-width:34px; padding:0 10px; border-radius:18px; }
.mia-swatch .mia-swatch-label{ font-size:12px; line-height:1; }