/**
 * Grid sản phẩm dùng chung — Shop, category/brand, Related, Search, Homepage
 * (mục F Phase 2, mục P0.3 chỉ thị Phase 7). MỘT hệ thống grid DUY NHẤT cho
 * toàn site — mobile 2 cột, tablet 3 cột, desktop (≥1024px) 4 cột.
 *
 * `minmax(0, 1fr)` (không phải `1fr` trơn) — mục P0.3: `1fr` một mình vẫn có
 * min-width mặc định = auto (= max-content của nội dung bên trong, VD ảnh/
 * chữ dài không xuống dòng), có thể đẩy track rộng hơn dự kiến. `minmax(0,1fr)`
 * ép min-width về 0, cột luôn chia đều đúng theo track, item bên trong co giãn
 * bình thường qua width:100% (xem product-card.css).
 */
.alo-product-grid,
ul.products {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

/**
 * Phase 10B mục D — ROOT CAUSE "hàng đầu lõm 1 ô": WooCommerce core
 * (woocommerce-layout.css) có clearfix cũ `.woocommerce ul.products::before,
 * .woocommerce ul.products::after { content:" "; display:table; }` (dành cho
 * hệ float trước đây — ul.products li.product{float:left}). `content` khác
 * `none` khiến pseudo-element TỰ SINH RA 1 BOX; khi cha đã là `display:grid`
 * (chỉ thị Phase 2/7), box đó tự động trở thành 1 GRID ITEM ẨN, chiếm đúng
 * ô đầu tiên (grid auto-placement luôn đặt theo thứ tự DOM, `::before` luôn
 * "trước" mọi `<li>` thật) — đẩy toàn bộ sản phẩm lùi 1 ô, hàng đầu thiếu
 * đúng 1 card ở vị trí cột 1. Xác nhận qua đo DOM thật: sản phẩm đầu tiên
 * (`li.product.first`) nằm ở toạ độ CỘT 2, không phải cột 1.
 *
 * Fix tại nguồn — trung hoà `content` (không phải ẩn bằng display:none trên
 * chính .alo-product-grid, vì display:none trên chính nó sẽ ẩn cả grid).
 * `content:none` khiến pseudo-element không sinh box nào cả, loại hẳn khỏi
 * grid item list — đúng 1 dòng sửa, không hack theo vị trí (:first-child...).
 */
.alo-product-grid::before,
.alo-product-grid::after,
ul.products::before,
ul.products::after {
	content: none !important;
	display: none !important;
}

@media (min-width: 640px) {
	.alo-product-grid, ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}

@media (min-width: 1024px) {
	.alo-product-grid, ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ============================================================
   HÀNG CUỘN NGANG — Đợt B mockup hợp nhất (09/09/2026)

   Cách rút độ dài trang chủ mà KHÔNG cắt nội dung: một section sản phẩm từ
   hai hàng dọc (~590px trên điện thoại) còn một hàng ngang (~230px).
   Đánh đổi có chủ ý: sản phẩm thứ ba trở đi phải vuốt mới thấy — nên dòng
   chủ lực "Bình 20L" vẫn để dạng lưới.

   Từ 1024px trở lên quay về lưới bình thường: desktop có đủ bề ngang cho
   cả hàng, không ai phải vuốt.
   ============================================================ */
@media (max-width: 1023px) {
	.alo-product-grid--scroll {
		display: grid;
		/**
		 * `grid-template-columns: none` — BẮT BUỘC.
		 *
		 * Base `.alo-product-grid` khai `repeat(2, minmax(0, 1fr))`. Nếu
		 * không xoá, hai sản phẩm ĐẦU bị đặt vào hai track explicit đó; trong
		 * hàng cuộn ngang thì không có free space nên `1fr` giải ra **0px**,
		 * hai thẻ đầu co về 0 và nội dung tràn đè lên các thẻ sau.
		 * Đo được ngày 09/09: `grid-template-columns` ra
		 * "0px 0px 160px 160px 160px 160px 160px 160px" — đúng triệu chứng
		 * "sản phẩm xếp chồng lên nhau" Owner báo.
		 */
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 160px;
		gap: 12px;
		overflow-x: auto;
		/* `contain` để vuốt ngang trong hàng không kéo luôn cả trang. */
		overscroll-behavior-x: contain;
		/**
		 * `contain: paint` — BẮT BUỘC, không phải tối ưu.
		 *
		 * Lỗi đo được 09/09/2026 ở 375px: hàng cuộn này CLIP đúng (hộp rộng
		 * 351px, mép phải 363px) nhưng nội dung bên trong rộng 1.052px, và
		 * trình duyệt lấy chính con số đó để nới LAYOUT VIEWPORT lên 1.047px.
		 * Hệ quả: mọi phần tử `position: fixed` bám viewport bị kéo rộng
		 * 1.047px — thanh nav dưới cùng ở trang chủ chỉ còn thấy hai mục
		 * "Trang chủ" và "Sản phẩm", ba mục kia văng ra ngoài màn hình.
		 *
		 * Đã thử và LOẠI: `overflow-x: clip`, bỏ margin âm + `max-width`,
		 * `overflow-x: hidden` và `clip` trên `<main>` — không cách nào ăn.
		 * Chỉ `contain: paint` chặn được việc nội dung của vùng cuộn lan ra
		 * phép tính bề rộng trang.
		 *
		 * An toàn: vùng cuộn vốn đã cắt phần tràn, và bên trong không có
		 * phần tử `position: fixed` nào để `contain` làm đổi mốc.
		 */
		contain: paint;
		scrollbar-width: none;
		/* 4px chừa chỗ cho viền focus của thẻ đầu/cuối không bị cắt. */
		padding: 4px;
		margin: -4px;
	}
	.alo-product-grid--scroll::-webkit-scrollbar { display: none; }
	.alo-product-grid--scroll > li { min-width: 0; }
}