.colormd-swatch-group select {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.colormd-swatches { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 8px 0 0; padding: 0; }

.colormd-swatch {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 18px;
    border: 2px solid #b9c2d0;
    border-radius: 999px;
    background: #fff;
    color: #1a1f2b;
    font-size: 14px; font-weight: 600;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s, transform .15s, background .2s, color .2s;
}
.colormd-swatch:hover { border-color: #0e3c8c; transform: translateY(-1px); }

.colormd-swatch.is-selected {
    border-color: #0e3c8c;
    background: #0e3c8c;
    color: #fff;
    box-shadow: 0 4px 12px rgba(14,60,140,.25);
}

.colormd-swatch.has-color { padding-left: 8px; }
.colormd-swatch-color {
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--swatch-color); border: 1px solid rgba(0,0,0,.15);
}

.colormd-swatch.is-unavailable,
.colormd-swatch:disabled {
    border-color: #e4e7ec;
    background: #f5f6f8;
    color: #b8bcc4;
    font-weight: 500;
    box-shadow: none;
    cursor: not-allowed;
    pointer-events: none;
}
.colormd-swatch.is-unavailable .colormd-swatch-color,
.colormd-swatch:disabled .colormd-swatch-color {
    opacity: .4;
}