.step-by-step-variant-picker color-swatch {
  width: 100%;
}

.step-by-step-variant-picker color-swatch .sbs-swatch-item {
  width: calc((100% - 20px) / 3);
}

step-indicator .steps {
  display: flex;
  justify-content: space-between;
  margin-bottom: 25px;
}

step-indicator .steps__step {
  flex: 1;
  text-align: center;
  position: relative;
  padding: 0.5rem 0;
  color: rgba(var(--steps-color));
  font-weight: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
}

step-indicator .steps__step:before {
  content: "";
  position: absolute;
  top: 25%;
  right: 75%;
  width: 50%;
  height: 3px;
  border-radius: 30px;
  background-color: rgba(var(--steps-color));
  z-index: 1;
}

step-indicator .steps__step:first-child:before {
  display: none;
}

step-indicator .steps__step.steps__step--current:before {
  background-color: rgba(var(--steps-color-added), 0.6);
}

step-indicator .steps__step.steps__step--done:before {
  background-color: rgba(var(--steps-color-added));
}

step-indicator .steps__step-number {
  width: 32px;
  height: 32px;
  background-color: transparent;
  border: 2px solid rgba(var(--steps-color));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

step-indicator .steps__step-number .checkmark {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(var(--steps-color), 0.5);
  display: inline-block;
  position: relative;
  transition: all 0.2s ease;
}

step-indicator .steps__step-number .checkmark:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%) scale(0.9);
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='far' data-icon='check' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' class='svg-inline--fa fa-check fa-w-16 fa-3x'%3E%3Cpath fill='%23ffffff' d='M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z' class=''%3E%3C/path%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
  transition: transform .3s ease-out;
  opacity: 0;
}

step-indicator .steps__step.steps__step--done .checkmark {
  background-color: transparent;
}

step-indicator .steps__step.steps__step--done .checkmark::after {
  opacity: 1;
  transform: translate(-50%,-50%) scale(1);
}

step-indicator .steps__step-name {
  padding-top: 10px;
}

step-indicator .steps__step--current .steps__step-number {
  border: 2px solid rgba(var(--steps-color-added));
}

step-indicator .steps__step--current .checkmark {
  background-color: rgba(var(--steps-color-added));
}

step-indicator .steps__step--done .steps__step-number {
  border: 2px solid rgba(var(--steps-color-added));
  background-color: rgba(var(--steps-color-added));
  color: #FFFFFF;
}

step-indicator .steps__step--current .steps__step-name,
step-indicator .steps__step--done .steps__step-name {
  color: rgba(var(--steps-color-added));
}

step-indicator .variant-selects .product-form__input {
  display: none;
}

step-indicator:has(.steps__step--current[data-step="0"]) variant-selects .product-form__input:nth-child(1),
step-indicator:has(.steps__step--current[data-step="1"]) variant-selects .product-form__input:nth-child(2),
step-indicator:has(.steps__step--current[data-step="2"]) variant-selects .product-form__input:nth-child(3),
step-indicator:has(.steps__step--current[data-step="3"]) variant-selects .product-form__input:nth-child(4),
step-indicator:has(.steps__step:last-child.steps__step--done) variant-selects .product-step__input {
  display: block;
  width: 100%;
}

step-indicator .product-form__tab-content .product-form__label {
  width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
  max-width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
  flex-grow: 1;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  height: auto;
  overflow: unset;
}

.btn-step-variant[data-action][aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-step-variant {
  display: block;
  width: 50px;
  height: 50px;
  border: 1px solid transparent;
  box-shadow: 0 0 0 var(--quantity-border-width) var(--color-foreground);
  background-color: var(--color-input-background);
  text-align: center;
  justify-items: center;
  overflow: hidden;
  padding: 12px;
  border-radius: 50%;
  cursor: pointer!important;
}

.btn-step-variant .icon {
  width: 100%;
  height: auto;
  fill: var(--color-input-text);
  vertical-align: middle;
}

.btn-next__variant {
  cursor: pointer!important;
}

.productView-prev:has(.btn-step-variant[data-action][aria-disabled=true]) {
  display: none;
}

step-indicator .product-form__swatch .product-form__label,
step-indicator .product-form__swatch .product-form__radio:checked + .product-form__label {
  border-color: transparent;
}

step-indicator .product-form__swatch .product-form__label .pattern {
  border: 1px solid var(--swatch-border);
  aspect-ratio: 1;
}

step-indicator .product-form__swatch .product-form__radio:checked + .product-form__label .pattern {
  border: 1px solid var(--swatch-border-active);
}

step-indicator .product-form__label .text,
step-indicator .product-form__radio:checked + .product-form__label .text {
  color: var(--variant-color);
  background-color: transparent;
  border-color: transparent;
  font-size: max(calc(var(--font-body-size) - 4px), 12px);
  height: fit-content;
  line-height: 1.5;
  padding-top: 5px;
}

step-indicator .product-form__label.soldout:before {
  display: none;
}

step-indicator .product-form__label.soldout .pattern:before {
  content: "";
  top: 50%;
  left: -10px;
  height: 1px;
  opacity: 1;
  z-index: 1;
  border: none;
  position: absolute;
  visibility: visible;
  width: calc(100% + 20px);
  background-color: var(--product-sale-price-color);
  transform: translateY(-50%) rotate(-45deg);
}

.sbs-swatch-item .swatch {
  --swatch--border-radius: var(--variant-pills-radius, 50%);
  position: relative;
  border: .1rem solid rgb(var(--color-black-rgb) / var(--opacity-15));
  border-radius: var(--swatch--border-radius);
  padding: .2rem;
  box-shadow: var(--variant-pills-shadow-horizontal-offset) var(--variant-pills-shadow-vertical-offset) var(--variant-pills-shadow-blur-radius) var(--color-shadow);
}

.sbs-swatch-item .sbs-text {
  padding-top: 8px;
}