.swatches {
    display: flex;
    gap: 12px;
}

.swatch {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    cursor: pointer;
    background: var(--swatch);
    box-shadow: inset 0 0 0 1px rgba(var(--store-ink-rgb), 0.18);
    outline: 2px solid transparent;
    outline-offset: 3px;
    transition: outline-color var(--transition-fast), transform var(--transition-fast);
}

.swatch:hover { transform: scale(1.06); }

.swatch.is-selected { outline-color: var(--store-text); }

.swatch:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }