/**
 * Quantity – Wrap quantity input
 *
 * The − / + buttons added around the WooCommerce quantity input on single product
 * pages. The visual styling lives in the "Quantity field" section below (migrated
 * from the theme's custom.css, borderless); only the interaction states are kept
 * scoped here.
 */

/* Interaction states for the − / + buttons (a11y); the look comes from below. */
.product form.cart .quantity.buttons-added .qty-button:hover {
	opacity: 0.7;
}

.product form.cart .quantity.buttons-added .qty-button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

/* --------------------------------------------------------------------------
 * Quantity field (migrated from the theme's "5.5 Quantity Field" styles)
 * -------------------------------------------------------------------------- */

.qty-button {
	background: #ffffff00;
	border: none;
	cursor: pointer;
	font-size: 16px;
	padding: 5px 10px;
	user-select: none;
}

.quantity {
	align-items: center;
	display: flex;
	gap: 5px;
}

.woocommerce .quantity {
	width: 120px;
}

.woocommerce .quantity .qty {
	padding: 10px !important;
	text-align: center !important;
}

/* Remove number field spinners */
input[type="number"] {
	-moz-appearance: textfield;
}

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