/* Mini Cart Quantity Buttons
 * Sits on its own line under the "1 × $price" line.
 * Colors inherit from the theme, so it follows your Kadence palette.
 * Tweak the custom properties below to restyle.
 */
.mcqb-qty {
	--mcqb-size: 30px;
	--mcqb-border: currentColor;
	--mcqb-radius: 4px;

	display: flex;
	align-items: center;
	width: max-content;
	margin-top: 0.5em;
	border: 1px solid var(--mcqb-border);
	border-radius: var(--mcqb-radius);
	overflow: hidden;
	line-height: 1;
}

.mcqb-qty .mcqb-btn {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--mcqb-size);
	height: var(--mcqb-size);
	font-size: 16px;
	font-weight: 600;
	color: inherit;
	cursor: pointer;
	user-select: none;
	transition: background-color 0.15s ease;
}

.mcqb-qty .mcqb-btn:hover:not(:disabled),
.mcqb-qty .mcqb-btn:focus-visible {
	background-color: rgba(127, 127, 127, 0.15);
}

.mcqb-qty .mcqb-btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

.mcqb-qty .mcqb-btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.mcqb-qty .mcqb-value {
	min-width: 2em;
	padding: 0 0.25em;
	text-align: center;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
}

/* Loading state while the cart updates */
.mcqb-qty.is-loading {
	opacity: 0.5;
	pointer-events: none;
}

li.mcqb-updating {
	transition: opacity 0.15s ease;
	opacity: 0.7;
}

.mcqb-error {
	display: block;
	margin-top: 0.35em;
	font-size: 12px;
	color: #b32d2e;
}