/**
 * ĐIỀU KHIỂN DÒNG GIỎ HÀNG — component dùng chung.
 *
 * Một implementation duy nhất cho Cart Page và Cart Drawer (CLAUDE.md §2:
 * "mọi component tái sử dụng phải có một implementation trung tâm"). Trước
 * Revision 3, style cơ sở của `.alo-cart-qty` nằm trong `cart.css` (chỉ nạp ở
 * trang Giỏ hàng) còn drawer — vốn có mặt ở MỌI trang — phải tự chép lại một
 * bản trong `cart-drawer.css`. Hai bản đó lệch nhau dần. Nay style cơ sở nằm
 * ở đây và được nạp toàn site cùng drawer; `cart.css`/`cart-drawer.css` chỉ
 * còn chỉnh KÍCH THƯỚC theo mật độ của từng ngữ cảnh.
 *
 * Số lượng là BA Ô ĐỘC LẬP `[−] [n] [+]` — Owner chốt trong mockup mới, khớp
 * với control số lượng ở PDP (xem components/quantity.css).
 */

.alo-cart-controls {
	display: grid;
	gap: 10px;
	justify-items: start;
	margin-top: 12px;
}

/* --- Tình trạng vỏ bình (chỉ sản phẩm bình) --- */
.alo-cart-option {
	display: grid;
	gap: 6px;
	width: 100%;
	max-width: 430px;
}
.alo-cart-option__label {
	font-size: 13px;
	font-weight: 800;
	color: var(--alo-color-text-muted);
}
.alo-cart-option__select {
	width: 100%;
	/* Cùng chiều cao/viền với ô nhập của Liên hệ và Checkout. */
	min-height: var(--alo-field-height);
	padding: 0 12px;
	border: 1px solid var(--alo-color-field-border);
	border-radius: var(--alo-radius-md);
	background: var(--alo-color-surface);
	color: var(--alo-color-text);
	font-size: 14px;
	font-weight: 650;
	line-height: 1.3;
}
/* Cùng ngôn ngữ focus với mọi ô nhập khác của site. */
.alo-cart-option__select:focus {
	border-color: var(--alo-color-primary);
	outline: 2px solid var(--alo-color-primary-soft);
	outline-offset: 0;
}

/* --- Gợi ý cọc vỏ (chỉ khi chọn "Không có vỏ") --- */
.alo-cart-hint {
	display: flex;
	align-items: flex-start;
	gap: 7px;
	margin: 0;
	max-width: 430px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--alo-color-text-muted);
}
.alo-cart-hint__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 16px;
	height: 16px;
	margin-top: 1px;
	border-radius: 999px;
	background: var(--alo-color-primary-soft);
	color: var(--alo-color-on-soft);
	font-size: 11px;
	font-weight: 900;
	font-style: normal;
}

/* --- Số lượng: 3 ô độc lập --- */
.alo-cart-qty {
	display: inline-grid;
	grid-template-columns: 44px 52px 44px;
	gap: 8px;
	align-items: center;
	width: max-content;
}
.alo-cart-qty__btn,
.alo-cart-qty__num {
	display: grid;
	place-items: center;
	height: var(--alo-control-size);
	border: 1px solid var(--alo-color-border);
	/* 12px — đúng mockup giỏ hàng đã duyệt và cùng họ với nút xoá/ô chọn
	   nằm ngay cạnh (UI Consistency 2027). */
	border-radius: var(--alo-radius-md);
	background: var(--alo-color-surface);
	color: var(--alo-color-text);
	font-weight: 800;
}
.alo-cart-qty__btn {
	font-size: 19px;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.alo-cart-qty__btn:hover {
	border-color: var(--alo-color-primary);
	background: var(--alo-color-primary-soft);
	color: var(--alo-color-on-soft);
}
.alo-cart-qty__num { font-size: 16px; }

/* --- Nút xoá: luôn neo góc trên bên phải của dòng ---
   Hình dạng, hover đỏ và vùng chạm 44px do `.alo-icon-btn--sm.--danger`
   (components/buttons.css) lo; ở đây chỉ còn VỊ TRÍ. */
.alo-cart-remove-btn,
.alo-cart-item__remove-btn {
	position: absolute;
	top: 22px;
	left: auto;
	right: 0;
}