/* === COLOR SWATCHES === */

.swatches {
  display: flex;
  gap: 9px;
  align-items: center;
}

.swatch {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--color-swatch-border);
  background: transparent;
  padding: 0;
  cursor: pointer;
  position: relative;
  transition: border-color var(--transition-fast);
}

.swatch::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--swatch-color, #000);
}

.swatch:hover {
  border-color: #888;
}

.swatch.is-active {
  border-width: 2px;
  border-color: #000;
}

.swatches--dark .swatch.is-active {
  border-color: #fff;
}