/**
 * Quantity stepper
 *
 * Styles WooCommerce's `.quantity` wrapper; main.js injects the − and +
 * buttons, so the bare number input still works without JavaScript.
 */

.quantity {
	display: inline-flex;
	align-items: center;
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-surface);
	overflow: hidden;
}

.quantity .qty,
.quantity input[type="number"] {
	width: 3rem;
	min-height: var(--control-height-sm);
	padding: 0;
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	text-align: center;
	color: var(--color-heading);
	background: transparent;
	border: 0;
	appearance: textfield;
	-moz-appearance: textfield;
}

.quantity input[type="number"]::-webkit-outer-spin-button,
.quantity input[type="number"]::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

.quantity .qty:focus {
	outline: none;
	box-shadow: none;
}

.quantity__button {
	display: grid;
	place-content: center;
	width: var(--control-height-sm);
	min-height: var(--control-height-sm);
	font-family: var(--font-mono);
	font-size: var(--text-md);
	line-height: 1;
	color: var(--color-heading);
	background: transparent;
	transition: background var(--transition-fast), color var(--transition-fast);
}

.quantity__button:hover {
	background: var(--color-surface-muted);
}

.quantity__button:disabled {
	color: var(--color-muted);
	cursor: not-allowed;
}

.quantity__button:focus-visible {
	outline: var(--border-width-strong) solid var(--color-border-strong);
	outline-offset: -2px;
}

/* Woo prints a screen-reader label inside the wrapper. */
.quantity label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Bare variant — no frame, used in cart rows. */
.quantity--bare {
	border: 0;
	background: transparent;
}