/* Accessible product-combination chips. */
#product .ms-variant-options {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

#product .ms-variant-option {
  float: none;
  margin: 0;
  position: relative;
}

#product .ms-native-variant-select {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

#product .ms-variant-option > .input-radio {
  height: 1px;
  opacity: 0;
  position: absolute;
  width: 1px;
}

#product .ms-variant-chip {
  align-items: center;
  background: #fff;
  border: 1px solid rgb(93 59 59 / 20%);
  color: var(--ms-color-brown);
  cursor: pointer;
  display: inline-flex;
  font-size: .8125rem;
  justify-content: center;
  line-height: 1.25;
  margin: 0;
  min-height: 2.75rem;
  min-width: 4rem;
  padding: .65rem 1rem;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

#product .ms-variant-option > .input-radio:checked + .ms-variant-chip,
#product .ms-variant-chip.is-selected {
  background: var(--ms-color-brown);
  border-color: var(--ms-color-brown);
  color: #fff;
}

#product button.ms-variant-chip {
  appearance: none;
}

#product button.ms-variant-chip:focus-visible {
  outline: 2px solid var(--ms-color-red);
  outline-offset: 2px;
}

#product .ms-variant-option > .input-radio:focus-visible + .ms-variant-chip {
  outline: 2px solid var(--ms-color-red);
  outline-offset: 2px;
}

#product .ms-variant-option > .input-radio:disabled + .ms-variant-chip {
  background: rgb(255 255 255 / 45%);
  border-color: rgb(93 59 59 / 10%);
  color: var(--ms-color-gray);
  cursor: not-allowed;
  text-decoration: line-through;
}

#product .ms-variant-options--color .input-container {
  float: none;
  margin: 0;
}

#product .ms-variant-options--color label {
  cursor: pointer;
  margin: 0;
}

#product .ms-variant-options--color .color {
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgb(93 59 59 / 24%);
  height: 2.75rem;
  margin: 0;
  width: 2.75rem;
}

#product .ms-variant-options--color .input-color:checked + .color {
  box-shadow: 0 0 0 2px var(--ms-color-red);
}

#product .product-variants-item .control-label {
  margin-bottom: .7rem;
}

@media (max-width: 575px) {
  #product .ms-variant-chip {
    min-height: 2.65rem;
    padding-left: .8rem;
    padding-right: .8rem;
  }
}