.cwl-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0;
}

.cwl-swatch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border: 1px solid #ddd;
    border-radius: 32px;
    cursor: pointer;
    transition: all 0.3s ease;
    /* min-width: 60px; */
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    position: relative;
}
.cwl-swatch span.cwl-label-color{
    min-width: 32px;
    min-height: 32px;
    border-radius: 50%;
    margin-right: 5px;
}
span.cwl-label{
    margin-right: 8px;
}

.cwl-swatch:hover {
    border-color: #999;
    transform: translateY(-1px);
}

.cwl-swatch.selected {
    border-color: #333;
    /* box-shadow: 0 2px 5px rgba(0,0,0,0.2); */
}

.cwl-swatch-display {
    margin: 2px 5px 2px 0;
    cursor: default;
}

.cwl-swatch-display:hover {
    transform: none;
    border-color: #ddd;
}

.cwl-label {
    color: #333;
    font-weight: 500;
    z-index: 1;
}

/* Ensure good contrast for light text on dark backgrounds */
.cwl-swatch[style*="background-color: #000"] .cwl-label,
.cwl-swatch[style*="background-color: #000000"] .cwl-label,
.cwl-swatch[style*="background-color: #333"] .cwl-label,
.cwl-swatch[style*="background-color: #444"] .cwl-label,
.cwl-swatch[style*="background-color: #555"] .cwl-label,
.cwl-swatch[style*="background-color: #666"] .cwl-label {
    color: #fff;
}

/* Hide default select when swatches are shown */
.cwl-swatches + select {
    display: none;
}