/**
 * Mengenfeld mit "-" / "+" Buttons (Produktseite + Warenkorb).
 * Buttons werden von zw-qty-stepper.js eingefuegt.
 * Groesse/Farben ueber die Variablen anpassbar (z. B. im jeweiligen Modul).
 */

.et-db #et-boc .et-l .quantity.zw-qty-stepper {
	--zw-qty-h: 46px;
	--zw-qty-text: #333;
	--zw-qty-border: #9a9a9a;
	--zw-qty-hover: #f4f4f4;

	display: flex !important;
	align-items: stretch;
	float: none !important;
	height: var(--zw-qty-h);
	margin: 0 !important;
	background: #fff;
	border: 1px solid var(--zw-qty-border);
}

.et-db #et-boc .et-l .quantity.zw-qty-stepper input.qty.input-text {
	-moz-appearance: textfield;
	flex: 1 1 auto;
	min-width: 0 !important;
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	color: var(--zw-qty-text) !important;
	text-align: center !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

.et-db #et-boc .et-l .quantity.zw-qty-stepper input.qty::-webkit-outer-spin-button,
.et-db #et-boc .et-l .quantity.zw-qty-stepper input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.et-db #et-boc .et-l .quantity.zw-qty-stepper .zw-qty-step {
	flex: 0 0 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 100%;
	margin: 0;
	padding: 0;
	font-size: 20px;
	line-height: 1;
	color: var(--zw-qty-text);
	background: transparent;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.et-db #et-boc .et-l .quantity.zw-qty-stepper .zw-qty-step:hover:not(:disabled) {
	background: var(--zw-qty-hover);
}

.et-db #et-boc .et-l .quantity.zw-qty-stepper .zw-qty-step:disabled {
	color: #b3b3b3;
	cursor: default;
}

.et-db #et-boc .et-l .quantity.zw-qty-stepper .zw-qty-step:focus-visible {
	outline: 2px solid var(--zw-qty-text);
	outline-offset: -2px;
}