/* Basic styles for circular color swatches */
.scs-swatches-wrap { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:6px 0 12px; }
.scs-swatches-title { width:100%; font-weight:600; margin-bottom:4px; }

.scs-swatch { position:relative; display:inline-flex; align-items:center; gap:8px; padding:4px 8px 4px 4px; border:1px solid #e5e7eb; border-radius:999px; background:#fff; cursor:pointer; transition:all .15s ease; }
.scs-swatch:hover { box-shadow:0 0 0 2px rgba(0,0,0,.06) inset; }
.scs-swatch.is-active { border-color:#111; box-shadow:0 0 0 2px #111 inset; }

.scs-swatch-dot { width:18px; height:18px; border-radius:50%; display:inline-block; border:1px solid rgba(0,0,0,.15); }
.scs-swatch-empty { background:linear-gradient(45deg, #ddd 25%, #f8f8f8 25%, #f8f8f8 50%, #ddd 50%, #ddd 75%, #f8f8f8 75%, #f8f8f8 100%); background-size:8px 8px; }

.scs-swatch-label { font-size:12px; line-height:1; padding-right:4px; color:#333; }
@media (max-width:480px){ .scs-swatch-label{ display:none; } }