.sl-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 14px;
}
.sl-swatches:empty { display: none; }
.sl-swatch-label { font-weight: 600; color: #16324f; }
.sl-swatch {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.18);
  background: #ccc;
  cursor: pointer;
  padding: 0;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: outline-color 0.12s ease, transform 0.1s ease;
  font-size: 11px;
  line-height: 28px;
  text-align: center;
  color: #555;
}
.sl-swatch:hover { transform: scale(1.08); }

/* Once you've verified in preview that the swatches drive colour selection and the
   image/price/stock update correctly, uncomment the next line to hide the now-redundant
   Colour dropdown. (.has-sl-swatches is only set when swatches build successfully, so the
   dropdown safely stays visible if anything prevents them from rendering.) */
/* .form-field.has-sl-swatches .form-select { display: none; } */
.sl-swatch--light { border-color: rgba(0, 0, 0, 0.28); }
.sl-swatch--unknown { background: #eee; }
.sl-swatch[aria-pressed="true"] { outline-color: #15596b; }
.sl-swatch:focus-visible { outline-color: #15596b; }