variant-selects {
  display: block;
}

.product--no-media .product-form__input--pill,
.product--no-media .product-form__input--swatch,
.product--no-media .product-form__input--dropdown {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.product--no-media .product-form__input.product-form__input--pill,
.product--no-media .product-form__input.product-form__input--swatch {
  flex-wrap: wrap;
  margin: 0 auto 1.2rem auto;
}

.product--no-media .product-form__input--dropdown {
  flex-direction: column;
  max-width: 100%;
}

:is(.product-form__input--pill, .product-form__input--swatch) .form__label {
  margin-bottom: 0.2rem;
  display: none;
}

.product-form__input input[type='radio'] {
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
  position: absolute;
  height: 1px;
  width: 1px;
}

.product-form__input input[type='radio']:not(.disabled):not(.visually-disabled) + label > .label-unavailable {
  display: none;
}

.product-form__input--dropdown {
  --swatch-input--size: 2rem;
  margin-bottom: 1.6rem;
}

.product-form__input--dropdown .dropdown-swatch + select {
  padding-left: calc(2.4rem + var(--swatch-input--size));
}

.product-form__input--dropdown .dropdown-swatch {
  position: absolute;
  left: 1.6rem;
  top: calc(50% - var(--swatch-input--size) / 2);
  width: var(--swatch-input--size);
  height: var(--swatch-input--size);
  z-index: 1;
}

/* Custom styles for Pill display type */
.product-form__input--pill input[type='radio'] + label {
  /* border: var(--variant-pills-border-width) solid rgba(var(--color-foreground), var(--variant-pills-border-opacity));
  background-color: rgb(var(--color-background));
  color: rgba(var(--color-foreground));
  border-radius: var(--variant-pills-radius);
  color: rgb(var(--color-foreground));
  display: inline-block;
  margin: 0.7rem 0.5rem 0.2rem 0;
  padding: 1rem 2rem;
  font-size: 1.4rem;
  letter-spacing: 0.1rem;
  line-height: 1;
  text-align: center;
  transition: border var(--duration-short) ease;
  cursor: pointer;
  position: relative; */
  display: inline-flex;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  background: none;
  color: var(--neutral-900);
  align-items: center;
  justify-content: center;
  margin: 0;
  position: relative;
  padding-inline: 0.75rem;
  padding-block: 0.25rem;

  svg {
    display: none;
    width: 1.5rem;
    height: 1.5rem;
  }

  .swatch-pill--value {
    margin-top: 0.25rem;
  }
}
.product-form__input--pill input[type='radio'] + label:before {
  content: '';
  position: relative;
  min-height: 1.5rem;
  display: inline-block;
  vertical-align: middle;
  width: 0;
  background: transparent;
}

.product-form__input--pill input[type='radio'] + label:after {
  content: '';
  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 172 52" fill="none" preserveAspectRatio="none"><path d="M3.35274 10.3352C3.88426 8.41469 2.77474 4.96161 4.03978 3.14605C4.37936 2.75122 5.20536 2.77803 5.90458 2.69673C7.87289 2.46788 10.0425 2.2912 12.0388 2.24741C21.2776 2.04474 30.6011 2.27263 39.8513 2.36866C47.1858 2.4448 54.5417 2.61664 61.8731 2.63254C70.22 2.65065 78.6128 2.88763 86.9497 2.63254C98.732 2.27205 110.493 2.33795 122.283 2.14756C127.634 2.06114 132.99 2.17173 138.342 2.1119C145.62 2.03054 152.777 1.84051 160.045 2.27594C162.83 2.44279 165.544 2.6929 168.24 3.13179C168.737 3.2127 169.089 3.21213 169.332 3.467C169.985 4.15051 169.648 5.28629 169.774 6.03455C170.162 8.33914 170 10.7877 169.663 13.0882C169.213 16.1619 169.454 19.2505 169.05 22.3314C168.457 26.8542 167.676 31.3236 167.676 35.8681C167.676 39.3205 167.068 42.8035 165.799 46.1811C165.467 47.0658 165.569 47.6931 164.02 47.6931C162.176 47.6931 160.538 47.773 158.72 48.014C153.261 48.7378 147.379 48.5725 141.814 48.7914C136.464 49.0019 131.187 49.5047 125.841 49.6472C122.135 49.7461 118.45 49.9667 114.738 49.9967C110.671 50.0295 106.626 49.8078 102.567 49.6972C95.9859 49.5178 89.3906 49.7645 82.803 49.7471C69.1464 49.711 55.2696 48.5333 41.7652 47.4363C37.6271 47.1001 33.5019 46.6112 29.3127 46.5662C23.793 46.5069 18.3446 46.8011 12.8485 47.0226C9.84307 47.1438 6.84855 47.3237 3.92936 46.8015C3.74936 46.7693 2.8118 46.6388 2.72706 46.4663C2.46605 45.9353 2.72706 44.0888 2.72706 43.5385C2.72706 42.3456 2.6487 41.0389 2.61664 39.8462C2.58322 38.6029 2.82049 38.6016 2.61664 37.3658C2.31312 35.5257 2.33718 33.6625 2.15044 31.817C1.86026 28.9493 2.04879 26.1227 2.22405 23.2585C2.36217 21.0013 2.21847 18.7409 2.3222 16.4831C2.41712 14.4168 2.78817 12.3751 3.35274 10.3352Z" stroke="%23413D39" stroke-width="3" stroke-linecap="round"/></svg>');
  background-color: var(--neutral-300);
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
}

/* .product-form__input--pill input[type='radio'] + label:before {
  content: '';
  position: absolute;
  top: calc(var(--variant-pills-border-width) * -1);
  right: calc(var(--variant-pills-border-width) * -1);
  bottom: calc(var(--variant-pills-border-width) * -1);
  left: calc(var(--variant-pills-border-width) * -1);
  z-index: -1;
  border-radius: var(--variant-pills-radius);
  box-shadow: var(--variant-pills-shadow-horizontal-offset) var(--variant-pills-shadow-vertical-offset)
    var(--variant-pills-shadow-blur-radius) rgba(var(--color-shadow), var(--variant-pills-shadow-opacity));
}

.product-form__input--pill input[type='radio'] + label:hover {
  border-color: rgb(var(--color-foreground));
} */
.product-form__input--pill input[type='radio']:checked + label:after {
  opacity: 1;
}

.product-form__input--pill input[type='radio']:checked + label {
  svg {
    display: block;
  }
}

@media screen and (forced-colors: active) {
  .product-form__input--pill input[type='radio']:checked + label {
    text-decoration: underline;
  }

  .product-form__input--pill input[type='radio']:focus-visible + label {
    outline: transparent solid 1px;
    outline-offset: 2px;
  }
}

.product-form__input--pill input[type='radio']:checked + label::selection {
  background-color: rgba(var(--color-background), 0.3);
}

.product-form__input--pill input[type='radio']:disabled + label,
.product-form__input--pill input[type='radio'].disabled + label {
  border-color: rgba(var(--color-foreground), 0.1);
  color: rgba(var(--color-foreground), 0.6);
  text-decoration: line-through;
}

.product-form__input--pill input[type='radio'].disabled:checked + label,
.product-form__input--pill input[type='radio']:disabled:checked + label {
  color: rgba(var(--color-background), 0.6);
}
.product-form__input--pill input[type='radio']:focus-visible + label {
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0 0.5rem rgba(var(--color-foreground), 0.55);
}

/* Fallback */
.product-form__input--pill input[type='radio'].focused + label {
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0 0.5rem rgba(var(--color-foreground), 0.55);
}

/* Custom styles for Swatch display type */
.product-form__input--swatch {
  display: flex;
  flex-wrap: wrap;
}

.product-form__input--swatch .swatch-input__input + .swatch-input__label {
  --swatch-input--size: 1.5rem;

  margin: 1rem 0.75rem 0.2rem 0;
  position: relative;
}

@media screen and (min-width: 750px) {
  .product-form__input--swatch .swatch-input__input + .swatch-input__label {
    --swatch-input--size: 1.5rem;
  }
}
/* End custom styles for Swatch display type */