.vp__input {
  display: flex;
  padding: 0;
  margin: 0 0 1.0625rem 0;
  min-width: 0;
  border: none;
}

@media screen and (min-width: 750px) {
  .vp__input {
    margin: 0 0 0.6250rem 0;
  }
}

.vp__legend {
  font: var(--hh-body-x-small-font);
  padding: 0 0 0 0.6250rem;
}

@media screen and (min-width: 750px) {
  .vp__legend {
    padding: 0;
  }
}

.vp__options {
  width: 100%;
  display: flex;
  padding: 0 0.6250rem;
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: none;
}

.vp__options::-webkit-scrollbar {
  display: none;
}

.vp__options::-webkit-scrollbar-thumb {
  background-color: var(--hh-color-foreground);
}

@media screen and (min-width: 750px) {
  .vp__options {
    padding: 0;
  }
}

.vp__input--dropdown {
  margin-bottom: 1.0000rem;
}

.vp__input .form__label {
  padding-left: 0;
}

fieldset.vp__input .form__label {
  margin-bottom: 0.1250rem;
}

.vp__input input[type='radio'] {
  position: absolute;
  height: 1px;
  width: 1px;
  opacity: 0;
  cursor: pointer;
  outline: none;
}

.vp__input input[type='radio'] + label {
  border: 0.0625rem solid var(--hh-color-neutral);
  background-color: var(--hh-color-background);
  color: var(--hh-color-foreground);
  display: inline-block;
  margin: 0.4375rem 0.5000rem 0.1250rem 0;
  padding: 0.7500rem 0.5000rem;
  font: var(--hh-body-small-font);
  letter-spacing: 0.0625rem;
  text-align: center;
  transition: border var(--hh-duration-short) ease;
  cursor: pointer;
  width: 4.0625rem;
}

@media screen and (min-width: 750px) {
  .vp__input input[type='radio'] + label {
    padding: 0.7500rem 0.6250rem;
    margin: 0.4375rem 0.6250rem 0 0;
    width: 5.3125rem;
  }
}

.vp__input input[type='radio'] + label:hover {
  border: 0.0625rem solid var(--hh-color-foreground);
}

.product__container:not(.is-loading) .vp__input input[type='radio']:checked + label {
  border: 0.0625rem solid var(--hh-color-foreground);
  background-color: var(--hh-color-foreground);
  color: var(--hh-color-background);
}

.product__container.is-loading .vp__input input[type='radio'] + label {
  pointer-events: none;
}

.vp__input input[type='radio']:disabled + label {
  border-color: var(--hh-color-light);
  color: var(--hh-color-neutral);
  text-decoration: line-through;
}

.vp__input input[type='radio']:focus-visible + label {
  box-shadow: 0 0 0 0.1875rem var(--hh-color-background),
    0 0 0 0.3125rem var(--hh-color-focus);
}

/* Safari Only Fallback */
/* https://stackoverflow.com/questions/16348489/is-there-a-way-to-apply-styles-to-safari-only */
_::-webkit-full-page-media,
_:future,
:root .vp__input input[type='radio']:focus + label {
  box-shadow: 0 0 0 0.1875rem var(--hh-color-background),
    0 0 0 0.3125rem var(--hh-color-focus);
}

_::-webkit-full-page-media,
_:future,
:root .vp__input input[type='radio'] {
  height: 0;
  width: 0;
}

.vp__input__select {
  display: inline-block;
  position: relative;
  width: 100%;
  max-width: 15.6250rem;
}

.vp__input__select svg {
  height: 0.3750rem;
  pointer-events: none;
  position: absolute;
  top: calc(50% - 0.2188rem);
  right: 0.9375rem;
}

.vp__input__select__select {
  padding: 0 2.5000rem 0 0.9375rem;
  appearance: none;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  color: rgb(var(--hh-color-foreground));
  width: 100%;
  box-shadow: 0 0 0 0.0625rem var(--hh-color-foreground);
  height: 2.8125rem;
  box-sizing: border-box;
  transition: box-shadow var(--hh-duration-short) ease;
}

.vp__wrapper hh-scroll-bar {
  --hh-scroll-container-padding: 0 0.6250rem 0.3125rem;
}

@media screen and (min-width: 750px) {
  .vp__wrapper hh-scroll-bar {
    --hh-scroll-container-padding: 0 0.6250rem;
  }
}