.pome-cs-swatches { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.pome-cs-swatch { display:inline-flex; align-items:center; cursor:pointer; }
.pome-cs-swatch input { position:absolute; opacity:0; pointer-events:none; }
.pome-cs-dot { width:28px; height:28px; border-radius:50%; border:1px solid rgba(0,0,0,.15); display:inline-block; background: var(--pome-cs-color, #000); box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); }
.pome-cs-swatch input:checked + .pome-cs-dot { outline:2px solid currentColor; box-shadow: 0 0 0 2px #00000020, inset 0 0 0 2px rgba(255,255,255,.9); }
.pome-cs--round .pome-cs-dot { border-radius:999px; }
.pome-cs-loop { margin-top:.35rem; display:flex; gap:.35rem; }
.pome-cs-loop .pome-cs-dot { width:14px; height:14px; border-radius:50%; border:1px solid rgba(0,0,0,.15); }