.v-swatches {
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  gap: 4px;
}

.v-swatches .v-swatches__item {
  display: inline-flex;
  box-sizing: border-box;
  width: 11.8%;
  aspect-ratio: 1 / 1;
  padding: 2px;
  border: 1px solid rgb(var(--color-text) / 0.2);
  border-radius: var(--v-swatch-radius, 4px);
}

.v-swatches.v-swatches--round .v-swatches__item,
.v-swatches.v-swatches--round .v-swatches__more,
.v-swatches.v-swatches--round .color-swatch {
  --swatch-radius: 999px;
  border-radius: 999px;
}

.v-swatches.v-swatches--square .v-swatches__item,
.v-swatches.v-swatches--square .v-swatches__more,
.v-swatches.v-swatches--square .color-swatch {
  --swatch-radius: var(--v-swatch-radius, 4px);
  border-radius: var(--v-swatch-radius, 4px);
}

.v-swatches .v-swatches__item:hover,
.v-swatches .v-swatches__item.is-active {
  border-color: rgb(var(--color-text));
}

.v-swatches .color-swatch {
  --swatch-size: 100%;
  --swatch-offset: 1px;
  display: block;
  width: 100%;
  height: 100%;
  box-shadow: none;
}

.v-swatches .color-swatch::before {
  box-shadow: none;
}

.v-swatches .color-swatch::after {
  display: none;
}

.product-card__swatches.v-swatches .color-swatch:hover::before {
  inset: 0;
}

.v-swatches__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 11.8%;
  aspect-ratio: 1 / 1;
  border: 1px solid rgb(var(--color-text) / 0.2);
  color: rgb(var(--color-text));
  background-color: rgb(var(--color-background));
  line-height: 1;
}

.product-card__image-wrapper
  .product-card__swatches.v-swatches
  .v-swatches__item,
.product-card__image-wrapper
  .product-card__swatches
  .v-swatches
  .v-swatches__item,
.product-card__image-wrapper
  .product-card__swatches.v-swatches
  .v-swatches__more,
.product-card__image-wrapper
  .product-card__swatches
  .v-swatches
  .v-swatches__more {
  width: 20px;
  min-width: 20px;
  aspect-ratio: 1 / 1;
}
@media (max-width: 500px) and (min-width: 400px) {
  .v-swatches .v-swatches__item {
    width: 13.8%;
  }
  .v-swatches__more {
    min-width: 13.8%;
  }
}

@media (max-width: 399px) {
  .v-swatches .v-swatches__item {
    width: 16.8%;
  }
  
  .v-swatches__more {
    min-width: 16.8%;
  }
}