.wc-variation-swatch { margin: 10px 0; }

.wc-variation-swatch-hidden select { display:none !important; }

.wc-variation-swatches-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; }

.wc-variation-swatches-list li { cursor: pointer; border-radius: 100%; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: 1px solid #ddd; position: relative; }

.wc-variation-swatches-list li.selected { outline: 3px solid #1e73be; box-shadow: 0 0 0 2px rgba(30,115,190,0.15); }

.wc-variation-swatches-list .swatch-color { display: block; width: 28px; height: 28px; border-radius: 50%; }

.wc-variation-swatches-list .swatch-image { display: block; width: 28px; height: 28px; border-radius: 50%; background-size: cover; background-position: center; }

.wc-variation-swatches-list .swatch-default { display: inline-block; font-size: 12px; padding: 4px 6px; border-radius: 12px; background: #f7f7f7; }

.swatch-selected-label { font-size: 14px; font-weight: 500; display:block; margin-bottom:8px; }

/* Accessibility and foous */
.wc-variation-swatches-list li:focus { outline: 2px solid #1e73be; }
.wc-variation-swatches-list li.selected { outline-offset: 3px; }
.wc-variation-swatches-list li.disabled { opacity: 0.5; cursor: not-allowed; }

/* responsive */
@media (max-width: 480px) {
  .wc-variation-swatches-list li { width: 30px; height: 30px; }
}