card-product-colors {
	z-index: 2;
	margin-bottom: 1.3rem;
}

.card__product-color-list {
	column-gap: 1.3rem;
	row-gap: 1.3rem;
  justify-content: var(--text-alignment);
}

.card__product-color-list__button {
	--outline-distance: -0.6rem;
  border-radius: var(--card-product-color-radius);
  padding: 0;
  box-shadow: inset 0.3px 0.8px 0px rgba(var(--color-foreground), 0.2);
}

.card__product-color-list__button img {
	border-radius: var(--card-product-color-radius);
}

.card__product-color-list__button:after {
  content: '';
  position: absolute;
  background: transparent;
  top: var(--outline-distance);
  bottom: var(--outline-distance);
  inset-inline: var(--outline-distance);
  z-index: -1;
  border-radius: var(--card-product-color-radius);
}

.card__product-color-list__button.selected:after {
  background: rgb(var(--color-background));
  border: 1px solid rgb(var(--color-foreground), 0.5);
}

.card__product-color-list__more {
  font-size: 1rem;
  text-decoration: none;
  padding: 0.3rem;
  color: rgb(var(--color-foreground));
  background: rgb(var(--color-foreground), 0.05);
  border-radius: 0.3rem;
}

.card__product-color-list__more--variant {
  border-radius: 50%;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
}