/**
 * [-] [1] [+] quanh input số lượng chuẩn WooCommerce (mục I/W chỉ thị
 * Phase 4). Markup input.qty do chính WooCommerce sinh ra
 * (global/quantity-input.php, KHÔNG override) — chỉ thêm 2 nút qua hook
 * before/after_quantity_input_field (xem inc/single-product.php).
 */
.quantity {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--alo-color-border);
	border-radius: var(--alo-radius-sm);
	overflow: hidden;
	margin: 0 0 16px;
}

.alo-qty-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--alo-control-size);
	min-height: var(--alo-control-size);
	background: var(--alo-color-bg);
	border: none;
	/* Cùng cỡ/trọng lượng với `[−] [n] [+]` của giỏ hàng (cart-controls.css)
	   — trước đây 18/700 ở PDP so với 19/900 ở giỏ hàng. */
	font-size: 19px;
	font-weight: 800;
	color: var(--alo-color-text);
	cursor: pointer;
}
.alo-qty-btn:hover { background: var(--alo-color-primary-soft); color: var(--alo-color-primary); }

.quantity input.qty {
	width: 56px;
	min-height: 44px;
	border: none;
	border-left: 1px solid var(--alo-color-border);
	border-right: 1px solid var(--alo-color-border);
	text-align: center;
	font-size: 16px;
	font-weight: 800;
	-moz-appearance: textfield;
}
.quantity input.qty::-webkit-outer-spin-button,
.quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Trên PDP, `.quantity` là grid item span 2 cột. Grid mặc định stretch item
   theo trục ngang, khiến cụm [-][1][+] thành thanh full-width dù bản thân nó
   là inline-flex. Neo item về đầu track và giữ đúng intrinsic width. */
.alo-pdp__summary form.cart > .quantity {
	justify-self: start;
	width: auto !important;
	max-width: max-content;
	float: none !important;
	margin: 0 0 4px !important;
}

/**
 * Owner annotation "volum tách ra làm 3 card riêng biệt" — PDP dùng 3
 * control ĐỘC LẬP thay vì segmented control liền khối.
 *
 * ROOT CAUSE của segmented control: rule cơ sở `.quantity` ở đầu file đặt
 * `border` + `border-radius` + `overflow:hidden` lên chính wrapper (tạo 1
 * khung bao chung), còn `input.qty` cố tình `border:none` và chỉ có
 * `border-left/right` làm VẠCH NGĂN bên trong khung đó — nên 3 control dính
 * liền thành 1 khối.
 *
 * Scope CHỈ trong `.alo-pdp__summary` — rule cơ sở `.quantity` vẫn giữ
 * nguyên dạng segmented cho Cart Page/Cart Drawer (nằm trong danh sách DO
 * NOT TOUCH của pass này), không đụng tới.
 */
.alo-pdp__summary form.cart > .quantity {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 0;
	border-radius: 0;
	overflow: visible;
	background: transparent;
}

.alo-pdp__summary form.cart > .quantity .alo-qty-btn,
.alo-pdp__summary form.cart > .quantity input.qty {
	width: var(--alo-control-size);
	min-width: var(--alo-control-size);
	height: var(--alo-control-size);
	min-height: var(--alo-control-size);
	border: 1px solid var(--alo-color-border);
	/* Cùng bán kính với stepper ở Giỏ hàng/Drawer (UI Consistency 2027). */
	border-radius: var(--alo-radius-md);
	background: var(--alo-color-surface);
	text-align: center;
}

.alo-pdp__summary form.cart > .quantity .alo-qty-btn:hover {
	border-color: var(--alo-color-primary);
	background: var(--alo-color-primary-soft);
	color: var(--alo-color-primary);
}