/**
 * FoodFlow Quantity — canonical compact control.
 * Its geometry and states come exclusively from the shared token contract.
 */
.uff-quantity,
.uff-quantity * { box-sizing: border-box !important; }

.uff-quantity {
	display: grid !important;
	grid-template-columns: var(--uff-control-button-size) var(--uff-control-center-width) var(--uff-control-button-size) !important;
	align-items: center !important;
	justify-content: center !important;
	width: var(--uff-control-width) !important;
	min-width: var(--uff-control-width) !important;
	height: var(--uff-control-height) !important;
	min-height: var(--uff-control-height) !important;
	margin: 0 !important;
	padding: var(--uff-control-padding) !important;
	gap: 0 !important;
	border: var(--uff-control-border) !important;
	border-radius: var(--uff-control-radius) !important;
	background: var(--uff-control-background) !important;
	box-shadow: var(--uff-control-shadow) !important;
	overflow: hidden !important;
	user-select: none !important;
}

.uff-quantity__button {
	display: grid !important;
	place-items: center !important;
	width: var(--uff-control-button-size) !important;
	height: var(--uff-control-button-size) !important;
	min-width: var(--uff-control-button-size) !important;
	min-height: var(--uff-control-button-size) !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: var(--uff-radius-full) !important;
	background: var(--uff-control-background) !important;
	box-shadow: var(--uff-control-button-shadow) !important;
	color: var(--uff-color-primary) !important;
	font: var(--uff-font-bold) var(--uff-text-lg)/1 var(--uff-font-body) !important;
	cursor: pointer !important;
	transition: background var(--uff-transition-fast), transform var(--uff-transition-fast) !important;
}

.uff-quantity__button:hover { background: var(--uff-control-hover-background) !important; }
.uff-quantity__button:active { transform: scale(.95) !important; }
.uff-quantity__button:disabled { opacity: var(--uff-opacity-disabled) !important; cursor: not-allowed !important; }
.uff-quantity__button:focus-visible { outline: 0 !important; box-shadow: var(--uff-control-focus-ring) !important; }
.uff-quantity__button > span { display: block !important; margin: 0 !important; padding: 0 !important; font: inherit !important; }

.uff-quantity__center {
	display: grid !important;
	place-items: center !important;
	width: var(--uff-control-center-width) !important;
	height: var(--uff-control-button-size) !important;
	min-width: var(--uff-control-center-width) !important;
	padding: 0 !important;
}

.uff-quantity__input {
	display: block !important;
	width: var(--uff-control-center-width) !important;
	height: var(--uff-control-button-size) !important;
	min-width: var(--uff-control-center-width) !important;
	min-height: var(--uff-control-button-size) !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	outline: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--uff-color-text) !important;
	-webkit-text-fill-color: var(--uff-color-text) !important;
	text-align: center !important;
	font: var(--uff-font-bold) var(--uff-text-sm)/var(--uff-control-button-size) var(--uff-font-body) !important;
	appearance: textfield !important;
	-moz-appearance: textfield !important;
	opacity: 1 !important;
}
.uff-quantity__input::-webkit-inner-spin-button,
.uff-quantity__input::-webkit-outer-spin-button { margin: 0 !important; -webkit-appearance: none !important; }