/* Для Chrome и Safari */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Для Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

/* Для IE и Edge */
input[type="number"]::-ms-clear {
  display: none;
}

.price:has(+ #product) {
  font-size: 2em;
  padding: 0;
}
#product .qty-group {
  font-size: 1.5em;
  background-color: #ddd;
  margin: 0;
  &:has(input:user-invalid) { background-color: #c331; }
  &:has(input:not(:focus):user-invalid) { background-color: #c333; }
  button {
    border-radius: 1em;
    margin-inline: .125em;
    background-color: #eee;
    &:hover {background-color: #fff;}
  }
}
.qty-group {
    display: flex;
    align-items: center;
    border-radius: 1em;
    border: 1px solid #ccc;

    &:focus-within {
      outline: 1px solid var(--brand-color);
      color: #111;
    }
    &:has(input:user-invalid) {
      outline-color: #c33;
      background-color: #c331;
    }
    &:has(input:not(:focus):user-invalid) {
      /* outline: #c33 solid 3px; */
      /* outline-offset: 2px; */
      background-color: #c333;
    }
    button {
      flex-basis: 30%;
      padding: .125em 0 0;
      background: transparent;
      outline: none;
      border: none;
      line-height: 1;
      &:hover {color: #111;}
    }
    svg {
      fill: currentColor;
      top: -.125em;
      height: 1em;
      width: 1em;
    }
    input[type=number] {
      flex-basis: 40%;
      border: none;
      background: transparent;
      text-align: center;
      outline: none;
      padding: 0;
      height: 1.5em;
      width: 2em;
    }
}
.radio-btn-group {
  fieldset {
    display: grid;
    gap: 0 .5em;
    /* grid-auto-columns: max-content; */
    grid-template-columns: repeat(auto-fit, minmax(12em, 1fr));
    margin-block-end: 1em;
    &:not(:has(img)) {
      grid-template-columns: repeat(auto-fit, minmax(6em, 1fr));
      label { min-block-size: 2.5em; }
    }
    label {
      color: #111;
      font-size: .875em;
      text-transform: uppercase;
      border: 1px solid #999;
      corner-shape: squircle;
      /* width: fit-content; */
      line-height: 1.25;
      overflow: hidden;
      display: flex;
      cursor: pointer;
      border-radius: 2em;
      align-items: center;
      font-weight: 400;
      user-select: none;
      /* @supports (corner-shape: squircle) {} */
      &:where(:focus-visible,:hover) {
        background-color: #ddd;
        border-color: #666;
      }
      &:has(input[type=radio]:checked) {
        background-color: #eee;
        border-color: #333;
        outline: 3px solid #ef7618;
      }
      &:has(input[type=radio]:disabled) { opacity: .5; cursor: not-allowed; }
      &:not(:has(img)) > span:first-of-type { text-align: center; }
      > input[type=radio] { position: absolute; opacity: 0; visibility: hidden; }
      > img { margin: -.5em; }
      > span { user-select: none; }
      > span:first-of-type { text-wrap: pretty; flex-grow: 1; }
      > span:nth-of-type(2) { writing-mode: sideways-lr; font-size: .75em; font-style: italic; }
    }
  }
}