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

.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);
  cursor: pointer;
}

.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 {
  --tw-ring-offset-shadow: inset 0 0 0 0 rgb(var(--color-background));
  --tw-ring-shadow: inset 0 0 0 1px rgb(var(--color-text) / 0.115);
  --swatch-size: 100%;
  --swatch-offset: 1px;
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--swatch-background);
  background-position: 50%;
  background-size: cover;
  border-radius: var(--swatch-radius, inherit);
  box-shadow: none;
}

.v-swatches .color-swatch::before {
  position: absolute;
  inset: 0;
  content: "";
  background: inherit;
  border-radius: inherit;
  box-shadow: none;
}

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

.v-swatches .color-swatch.with-image {
  background-image: var(--swatch-background-image);
}

.v-swatches .color-swatch__hit-area {
  position: absolute;
  inset: -6px;
}

@media (pointer: fine) {
  .v-swatches .color-swatch .tooltip {
    position: absolute;
    inset-block-end: calc(100% + 12px);
    inset-inline-start: 50%;
    width: max-content;
    padding: 7px 6px;
    font-size: 12px;
    font-weight: normal;
    line-height: 1;
    color: rgb(var(--color-background));
    visibility: hidden;
    background-color: rgb(var(--color-text));
    opacity: 0 !important;
    transform: translateX(calc(-50% * var(--transform-logical)));
    transition: visibility 0.3s ease;
  }

  .v-swatches .color-swatch .tooltip::after {
    position: absolute;
    inset-block-end: -7px;
    inset-inline-start: 50%;
    display: block;
    width: 0;
    content: "";
    border-color: rgb(var(--color-text)) transparent;
    border-style: solid;
    border-width: 10px 10px 0;
    transform: translateX(calc(-50% * var(--transform-logical)));
  }

  .v-swatches .color-swatch:hover .tooltip {
    visibility: visible;
    opacity: 1 !important;
  }
}

.block-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;
}

.block-product-card__image-wrapper
  .block-product-card__swatches.v-swatches
  .v-swatches__item,
.block-product-card__image-wrapper
  .block-product-card__swatches
  .v-swatches
  .v-swatches__item,
.block-product-card__image-wrapper
  .block-product-card__swatches.v-swatches
  .v-swatches__more,
.block-product-card__image-wrapper
  .block-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%;
  }
}
.sr-only {
  clip: rect(0, 0, 0, 0);
  border-width: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
}
.color-swatch::before {
  --tw-shadow: inset 1px 3px 0px rgb(var(--color-text) / 0.115);
  box-shadow:
    var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  border-radius: inherit;
  transition: inset 0.3s ease;
}
.color-swatch.with-image {
  background-size: cover;
  background-position: 50%;
  background-repeat: no-repeat;
  background-image: var(--swatch-background-image);
}
.color-swatch {
  --tw-ring-offset-shadow: inset 0 0 0 0 rgb(var(--color-background));
  --tw-ring-shadow: inset 0 0 0 1px rgb(var(--color-text) / 0.115);
  --swatch-radius: 0px;
  --swatch-offset: 2px;
  --swatch-size: 22px;
  --swatch-margin: calc(var(--swatch-offset) * 2);
  width: var(--swatch-size);
  height: var(--swatch-size);
  border-radius: var(--swatch-radius);
  background: var(--swatch-background);
  transition: outline-color 0.2s ease;
}
@media (pointer: fine) {
  .color-swatch .tooltip,
  .color-swatch .tooltip::after {
    position: absolute;
    inset-inline-start: 50%;
    transform: translateX(calc(-50% * var(--transform-logical)));
  }
}
@media (pointer: fine) {
  .color-swatch .tooltip {
    background-color: rgb(var(--color-text));
    inset-block-end: calc(100% + 12px);
    color: rgb(var(--color-background));
    padding: 7px 6px;
    font-size: 12px;
    font-weight: normal;
    line-height: 1;
    width: max-content;
    visibility: hidden;
    animation: animation-tooltip-out 0.3s ease;
    transition: visibility 0.3s ease;
    opacity: 0 !important;
  }
}
@media (min-width: 960px) {
  .lg\:block {
    display: block;
  }
}

@keyframes animation-tooltip-in {
  0% {
    transform: translate3d(calc(-50% * var(--transform-logical)), -20%, 0);
    opacity: 0;
  }

  to {
    transform: translate3d(calc(-50% * var(--transform-logical)), 0%, 0);
    opacity: 1;
  }
}

@keyframes animation-tooltip-out {
  0% {
    transform: translate3d(calc(-50% * var(--transform-logical)), 0%, 0);
    opacity: 1;
  }

  to {
    transform: translate3d(calc(-50% * var(--transform-logical)), -20%, 0);
    opacity: 0;
  }
}