.bms-swatches-wrap select {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
border: 0 !important;
}
.bms-swatches {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0.35rem 0 0.75rem;
}
.bms-swatch {
appearance: none;
border: 1.5px solid var(--bms-line, #e2e8f0);
background: #fff;
cursor: pointer;
border-radius: 999px;
font: inherit;
font-size: 0.85rem;
font-weight: 600;
color: var(--bms-ink, #1c2430);
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.bms-swatch:hover,
.bms-swatch:focus-visible {
border-color: var(--bms-sky, #2f6fad);
outline: none;
}
.bms-swatch.is-selected {
border-color: var(--bms-sky, #2f6fad);
box-shadow: 0 0 0 2px rgba(47, 111, 173, 0.25);
}
.bms-swatch--button {
padding: 0.45rem 0.85rem;
}
.bms-swatch--color {
width: 2rem;
height: 2rem;
padding: 0;
border-radius: 999px;
background: var(--bms-swatch, #ccc);
}
.bms-swatch--color span {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
}
.bms-swatch.is-disabled {
opacity: 0.35;
pointer-events: none;
}