/* Color swatch — scale + ring on hover/selected */
.swatch {
  --swatch-size: 40px;
  width: var(--swatch-size);
  height: var(--swatch-size);
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  border: 1px solid rgba(20, 20, 20, 0.08);
  transition: transform 200ms var(--ease-out);
}
.swatch::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
  pointer-events: none;
}
.swatch:hover {
  transform: scale(1.1);
}
.swatch:hover::after,
.swatch[aria-pressed="true"]::after {
  opacity: 1;
  transform: scale(1);
}
.swatch[aria-pressed="true"] {
  transform: scale(1.05);
}