/* Mengenwahl. Eine Fassung für die Karte auf der Kategorieseite und für den
   Kaufblock der Produktseite. Vorher waren es zwei mit unterschiedlicher
   Knopfbreite und Farbe.

   In der Karte steht die Menge als `output`, im Kaufblock als `input` – dort
   tippt man eine Zahl auch direkt ein. Die Knöpfe messen in beiden Fällen
   44 × 44 px. */

.stepper {
	display: flex;
	align-items: center;
	border: 0.0625rem solid var(--ffg-border-strong);
	border-radius: var(--ffg-radius);
	background: var(--ffg-white);
}

.stepper button {
	display: grid;
	place-items: center;
	width: var(--ffg-tap);
	height: var(--ffg-tap);
	border: 0;
	background: none;
	color: var(--ffg-brown-dark);
	font-size: 1.25rem;
	line-height: 1;
}

.stepper output {
	min-width: 1.5rem;
	color: var(--ffg-charcoal);
	font-size: var(--ffg-size-sm);
	font-weight: 600;
	text-align: center;
}

.stepper input {
	width: 2.5rem;
	border: 0;
	color: var(--ffg-charcoal);
	font: inherit;
	font-weight: 600;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

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