.product-quantity {
  min-inline-size: 0;
}

.product-quantity__control {
  display: grid;
  overflow: hidden;
  min-block-size: 3.4rem;
  grid-template-columns: minmax(0, 1fr) 2rem;
  border: 1px solid var(--store-border);
  border-radius: var(--store-radius-sm);
  background: var(--store-surface);
}

.product-quantity__control:focus-within {
  border-color: var(--store-focus-color);
}

.product-quantity__control:has(input:focus-visible) {
  box-shadow: inset 0 0 0 1px var(--store-focus-color);
}

.product-quantity__control input {
  min-inline-size: 0;
  inline-size: 100%;
  border: 0;
  color: var(--store-text);
  background: transparent;
  font-weight: 650;
  text-align: center;
  appearance: textfield;
}

.product-quantity__control input::-webkit-inner-spin-button,
.product-quantity__control input::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
}

.product-quantity__steps {
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  border-inline-start: 1px solid var(--store-border);
}

.product-quantity__step {
  display: grid;
  min-block-size: 1.65rem;
  place-items: center;
  padding: 0;
  border: 0;
  color: var(--store-muted);
  background: transparent;
  cursor: pointer;
}

.product-quantity__step + .product-quantity__step {
  border-block-start: 1px solid var(--store-border);
}

.product-quantity__step svg {
  inline-size: .8rem;
  block-size: .8rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.product-quantity__step--up svg {
  transform: rotate(180deg);
}

.product-quantity__step:hover {
  color: var(--store-accent);
  background: color-mix(in srgb, var(--store-accent) 9%, transparent);
}

.product-quantity__step:active {
  background: color-mix(in srgb, var(--store-accent) 15%, transparent);
}

.product-quantity__control input:focus-visible {
  outline: none;
}

.product-quantity__step:focus-visible {
  position: relative;
  z-index: 1;
  outline: none;
  box-shadow: inset 0 0 0 var(--store-focus-width) var(--store-focus-color);
}

.product-quantity__step:disabled {
  cursor: not-allowed;
  opacity: .45;
}