/* ===================================================================
   ASTYLIO Quantity Selector — restyled WooCommerce qty input
   =================================================================== */

/* ── Container ─────────────────────────────────────────────────── */
.woocommerce div.product .quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--color-border, #DED6CE);
	border-radius: var(--radius-sm, 4px);
	overflow: hidden;
	height: var(--astylio-btn-h, 44px);
}

/* ── Buttons ───────────────────────────────────────────────────── */
.woocommerce div.product .quantity .qty {
	border: none;
	border-radius: 0;
	background: transparent;
	text-align: center;
	font-family: var(--astylio-font-body, 'Poppins', sans-serif);
	font-size: var(--astylio-body-sm, 13px);
	color: var(--color-text, #252525);
	padding: 0 var(--astylio-space-2, 8px);
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: textfield;
	width: 48px;
	height: 100%;
}

.woocommerce div.product .quantity .qty::-webkit-outer-spin-button,
.woocommerce div.product .quantity .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.woocommerce div.product .quantity .qty[type="number"] {
	-moz-appearance: textfield;
}

/* ── Quantity controls (+ and −) ──────────────────────────────── */
.woocommerce div.product .quantity .plus,
.woocommerce div.product .quantity .minus {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 100%;
	border: none;
	border-radius: 0;
	background: transparent;
	color: var(--color-text, #252525);
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	padding: 0;
	transition: background 0.15s ease, color 0.15s ease;
}

.woocommerce div.product .quantity .plus:hover,
.woocommerce div.product .quantity .minus:hover {
	background: var(--color-bg-surface, #FCFAF7);
}

.woocommerce div.product .quantity .plus:active,
.woocommerce div.product .quantity .minus:active {
	background: var(--color-border, #DED6CE);
}

/* ── Remove default WooCommerce quantity styles ────────────────── */
.woocommerce div.product .quantity .plus,
.woocommerce div.product .quantity .minus {
	border: 0;
	padding: 0 var(--astylio-space-2, 8px);
	min-height: auto;
	font-weight: 400;
}