/**
 * Product card — 1 component dùng ở mọi loop (mục B). Hierarchy tối giản:
 * brand / tên / giá + đơn vị / quick add. Border nhẹ, không shadow nặng
 * (đúng token bo góc/màu, không tự thêm màu/shadow ngoài token — mục T/2
 * owner decision "brand/design source of truth").
 */
/**
 * P0 chỉ thị Phase 7 — ROOT CAUSE regression Shop/Category/Related/Search:
 * WooCommerce core (woocommerce-layout.css) tự áp `.woocommerce ul.products
 * li.product{width:22.05%;float:left;margin:0 3.8% 2.992em 0}` lên MỌI
 * `<li class="product">` — đây chính là `<li>` mà card.php gắn thêm class
 * `alo-product-card` (wc_product_class('alo-product-card', $product), 1
 * element DUY NHẤT, không phải 2 element lồng nhau).
 *
 * `.alo-product-grid`/`ul.products` được đổi thành `display:grid` (Phase 2),
 * nhưng KHÔNG có gì trung hoà width/float/margin ở cấp ITEM — khi 1 grid
 * item có width dạng %, trình duyệt tính % đó theo GRID CELL (không phải
 * theo `<ul>`), nên 22.05% của 1 cell ~283px chỉ còn ~62px → card co lại
 * cực nhỏ, margin-right 3.8% cộng thêm dư ra khoảng trắng lớn. Đây là lý do
 * DUY NHẤT khiến Shop/Category/Related/Search bị vỡ.
 *
 * Homepage KHÔNG bị vì `template-parts/home/product-section.php` tự in
 * `<ul class="alo-product-grid">` (không có class "products") — selector
 * `.woocommerce ul.products li.product` không bao giờ khớp ở đó, nên xưa
 * nay Homepage luôn đúng trong khi Shop luôn sai — không phải do CSS khác
 * nhau giữa 2 nơi, mà do 2 nơi có/không dính đúng 1 rule core này.
 *
 * FIX tại nguồn (không hack theo từng trang — mục P0.2): trung hoà width/
 * float/margin của core NGAY TẠI component `.alo-product-card`, để nó luôn
 * lấp đầy đúng ô grid bất kể đang nằm trong `ul.products` (Shop/Category/
 * Related/Search) hay `.alo-product-grid` (Homepage) — 1 component, 1 quy
 * tắc kích thước duy nhất cho toàn site (mục P0.3).
 */
.alo-product-card {
	list-style: none;
	float: none !important;
	width: 100% !important;
	min-width: 0;
	max-width: none;
	margin: 0 !important;
}

/* mục I/J chỉ thị Phase 10 — radius bám mockup (--r 18px cho card), padding
   trong quanh ảnh (mockup .product{padding:12px}) thay vì ảnh sát viền. */
.alo-product-card__inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--alo-color-surface);
	border: 1px solid var(--alo-color-border);
	border-radius: var(--alo-radius-lg);
	overflow: hidden;
	padding: 10px;
}

.alo-product-card__image-link {
	display: block;
	aspect-ratio: 1 / 1;
	background: var(--alo-color-bg);
	border-radius: var(--alo-radius-md);
	overflow: hidden;
}
/* `<picture>` bọc ảnh card (nguồn AVIF/WebP) phải là block phủ kín khung, nếu
   không thì `height: 100%` của ảnh bên trong lại tính theo một inline box cao
   `auto` và ảnh sập chiều cao. Cùng cách đã dùng cho `.alo-hero__picture`. */
.alo-product-card__picture {
	display: block;
	width: 100%;
	height: 100%;
}

/* img.__image (element+class, không phải chỉ .class) — mục P0.12 chỉ thị
   Phase 7: đảm bảo thắng đặc trưng `.woocommerce img{height:auto;
   max-width:100%}` (WooCommerce core), tránh ảnh không lấp đầy khung vuông
   1:1 (đã phát hiện lỗi tương tự ở logo header/footer, xem header.css). */
img.alo-product-card__image {
	width: 100% !important;
	height: 100% !important;
	max-width: 100%;
	object-fit: cover;
}

.alo-product-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 10px 2px 2px;
}

.alo-product-card__brand {
	margin: 0 0 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--alo-color-text-muted);
}

/* mục K chỉ thị Phase 10 — cho phép tới 3 dòng (trước chỉ 2, cắt sớm với
   tên sản phẩm dài kiểu "Nước khoáng LaVie 19L bình úp không vòi"). */
/**
 * TÊN & GIÁ — Owner chốt 08/09/2026: cả hai cùng màu đen, tên để CHỮ THƯỜNG,
 * giá đậm và to hơn để giá là thứ nổi lên.
 *
 * Trước đây tên và giá cùng cỡ chữ (15px) và chỉ khác nhau bằng MÀU (giá
 * xanh). Khi giá về đen thì màu không còn tách được hai thứ nữa, nên thứ bậc
 * phải chuyển hẳn sang cỡ chữ + độ đậm: tên 14px/450, giá 17px/800.
 */
.alo-product-card__title {
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 450;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.alo-product-card__title a { color: var(--alo-color-text); }

.alo-product-card__stock {
	font-size: 12px;
	margin-bottom: 6px;
}
.alo-product-card__stock p { margin: 0; }

.alo-product-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: auto;
}

/* P0.11 chỉ thị Phase 7 — giá không được co/cắt: cho phép co (flex-shrink:1
   mặc định) nhưng min-width:0 để wrap tự nhiên nếu thật sự chật, KHÔNG dùng
   text-overflow:ellipsis (cấm cắt giá theo chỉ thị). Root cause co-cực-nhỏ
   đã fix ở cấp `.alo-product-card` phía trên nên trong điều kiện bình
   thường sẽ không bao giờ chật tới mức phải wrap. */
.alo-product-card__price {
	font-weight: 800;
	/* Đen, không còn xanh: xanh nay chỉ dành cho thứ bấm được (nút "+" ngay
	   cạnh). Xem ghi chú thứ bậc ở `.alo-product-card__title`. */
	color: var(--alo-color-price);
	font-size: 17px;
	letter-spacing: -.01em;
	min-width: 0;
	white-space: normal;
}

/**
 * Giá khuyến mãi — WooCommerce in ra `<del>giá cũ</del> <ins>giá mới</ins>`.
 * Đây là chỗ DUY NHẤT trên card được dùng màu ưu đãi, nên khi nó xuất hiện
 * thì mắt biết ngay là có gì đó khác thường.
 */
.alo-product-card__price del {
	display: block;
	font-size: 12px;
	font-weight: 500;
	color: var(--alo-color-price-old);
}
.alo-product-card__price ins {
	color: var(--alo-color-price-sale);
	text-decoration: none;
}

/* Đơn vị "/ bình", "/ thùng" nếu template có in — chữ nhỏ, màu nhạt để phá
   mảng đen của con số. */
.alo-product-card__price .woocommerce-Price-currencySymbol { font-weight: inherit; }
/**
 * Quick Add "+" — mục P0.6/P0.7/P0.8 chỉ thị Phase 7. Markup/class/data-
 * attribute/aria-label vẫn 100% do WooCommerce core sinh ra
 * (woocommerce_template_loop_add_to_cart(), KHÔNG đổi PHP nữa — xem
 * inc/woocommerce.php). Dấu "+" hiển thị bằng ::before + SVG data-URI
 * (không icon font, không PNG, không phụ thuộc glyph font hệ thống).
 *
 * Text thật của WooCommerce ("Thêm vào giỏ hàng") bị đẩy ra khỏi khung nhìn
 * bằng `text-indent` (KHÔNG dùng font-size:0) — lý do: WooCommerce tự hiện
 * spinner lúc loading và dấu tick lúc added qua `::after{font-family:
 * WooCommerce; content:"..."}, nếu font-size cha = 0 thì 2 icon-font đó
 * cũng biến mất theo. text-indent chỉ đẩy text-node, không ảnh hưởng
 * pseudo-element định vị `position:absolute` của core.
 */
.alo-product-card__add a.button,
.alo-product-card__add a.add_to_cart_button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	min-height: 40px;
	padding: 0 !important; /* trung hoà .woocommerce a.button{padding:.618em 1em} core */
	margin: 0 !important;
	border-radius: var(--alo-radius-sm);
	/**
	 * #4B · 11/09/2026 — VIỀN XANH thay vì nền đặc.
	 *
	 * Nút này nhỏ (40px) nhưng LẶP NHIỀU NHẤT toàn site: 10 lần ở trang chủ,
	 * 16 lần ở /san-pham/. Chính sự lặp đều đặn xuống lưới tạo cảm giác "rải
	 * chấm xanh", chứ không phải diện tích (chỉ 0,3% trang).
	 *
	 * Viền giữ nguyên màu thương hiệu nên vẫn đọc ra ngay là nút, nhưng khối
	 * lượng màu giảm khoảng 80%. Nhờ vậy GIÁ (đen, đậm 800) trở lại là thứ
	 * nặng nhất trên thẻ — đúng thứ tự khách cần đọc.
	 *
	 * `box-sizing: border-box` toàn cục (base.css) nên viền 1px KHÔNG làm
	 * đổi 40/44px của nút.
	 *
	 * Trạng thái `.added` vẫn là nền đặc + tick trắng — xem ghi chú bên dưới.
	 */
	background: var(--alo-color-surface) !important;
	border: 1px solid var(--alo-color-primary) !important;
	color: var(--alo-color-primary);
	line-height: 1;
	flex-shrink: 0;
	overflow: hidden;
	text-indent: -9999px;
	white-space: nowrap;
}
.alo-product-card__add a.button:hover,
.alo-product-card__add a.add_to_cart_button:hover {
	background: var(--alo-color-primary-soft) !important;
	border-color: var(--alo-color-primary-2) !important;
}

@media (max-width: 1023px) {
	.alo-product-card__add a.button,
	.alo-product-card__add a.add_to_cart_button {
		width: 44px;
		height: 44px;
		min-height: 44px;
	}
}

/**
 * ROOT CAUSE nút "biến mất" sau khi bấm (Owner Review 2027).
 *
 * Dấu "+" là `::before` của chính theme, trước đây bị tắt ở CẢ `.loading` LẪN
 * `.added` với giả định "nhường chỗ cho spinner/tick icon-font của core".
 * Đo thật ở trạng thái `.added`:
 *
 *   ::before  content: none        ← "+" đã bị gỡ
 *   ::after   content: ""          ← tick của core RỖNG
 *   nút       text-indent: -9999px; overflow: hidden
 *
 * ⇒ nút thành một ô vuông xanh TRỐNG RỖNG. Chữ "Thêm vào giỏ hàng" thì đã bị
 * đẩy ra ngoài màn hình bằng `text-indent`, tick thì không có glyph. Tệ hơn,
 * WooCommerce KHÔNG bao giờ gỡ class `.added` (đo: vẫn còn sau 4.3 giây) nên
 * nút không bao giờ trở lại bình thường.
 *
 * Sửa: chỉ ẩn "+" khi `.loading` (lúc đó core có spinner thật), còn `.added`
 * hiện dấu TICK của chính theme. Vòng đời trở về bình thường nhờ
 * assets/js/cart-drawer.js gỡ `.added` sau ~1.8s.
 */
.alo-product-card__add a.ajax_add_to_cart:not(.loading)::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316834B' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
}

/* Trạng thái loading/added — class do chính JS wc-add-to-cart.js gốc
   WooCommerce toggle (mục K: không viết JS riêng). Icon-font ::after của
   core (spinner lúc loading, tick lúc added) giữ nguyên vị trí/kích thước
   mặc định vì font-size cha không bị ép về 0 (xem docblock trên). */
.alo-product-card__add a.loading { pointer-events: none; }

/* Trạng thái đã thêm: đổi "+" thành dấu tick của theme (không phụ thuộc
   icon-font của core, vốn render rỗng trong nút này). */
/**
 * #4B · 11/09/2026 — `.added` GIỮ NỀN ĐẶC. Bắt buộc, không phải trang trí:
 * dấu tick là data-URI với `stroke='white'`, mà nền nút ở trạng thái nghỉ
 * nay là TRẮNG — không khôi phục nền đặc thì tick trắng trên nền trắng và
 * phản hồi "đã thêm" biến mất hoàn toàn.
 *
 * Phụ thêm một cái lợi: nghỉ = viền nhẹ, vừa thêm = nền đặc. Màu thương hiệu
 * bùng lên đúng khoảnh khắc hành động thành công rồi tắt sau ~1,8s, nên nó
 * không cộng vào khối lượng xanh ở trạng thái nghỉ.
 */
.alo-product-card__add a.ajax_add_to_cart.added,
.alo-product-card__add a.ajax_add_to_cart.added:hover {
	background: var(--alo-color-primary) !important;
	border-color: var(--alo-color-primary) !important;
}
.alo-product-card__add a.ajax_add_to_cart.added::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
/* `::after` icon-font của core rỗng trong nút này (đo thật `content: ""`) và
   còn bị `text-indent: -9999px` đẩy đi — vô hiệu hoá để không tạo hộp lạ. */
.alo-product-card__add a.ajax_add_to_cart::after { content: none !important; }

/* WooCommerce tự chèn <a class="added_to_cart wc-forward"> ("Xem giỏ hàng")
   ngay sau nút khi thêm thành công — mục P0.9: ẩn đi vì Cart Drawer (Phase 6)
   đã tự mở cung cấp đúng chức năng đó, tránh phá layout footer card (link
   text dài chen vào hàng ngang 40px). Không xoá khỏi DOM (display:none vẫn
   giữ trong DOM, không phải xoá hẳn), chức năng xem giỏ hàng vẫn có ngay
   trong Cart Drawer vừa mở — không mất điều hướng thật sự. */
.alo-product-card__add a.added_to_cart {
	display: none !important; /* trung hoà .woocommerce a.added_to_cart{display:inline-block} core (đặc trưng cao hơn selector không !important) */
}

/* Sản phẩm variable/grouped/external không phải quick-add — WC trả về link
   text "Chọn tùy chọn" thay vì nút tròn, style lại cho gọn thay vì ép tròn.
   KHÔNG bị ảnh hưởng bởi text-indent ở trên (selector đó chỉ khớp
   .ajax_add_to_cart). */
.alo-product-card__add a.product_type_variable,
.alo-product-card__add a.product_type_grouped,
.alo-product-card__add a.product_type_external {
	position: static;
	width: auto;
	height: auto;
	min-height: 40px;
	padding: 0 12px !important;
	text-indent: 0;
	border-radius: var(--alo-radius-sm);
	font-size: 12px;
	font-weight: 600;
	background: var(--alo-color-primary) !important;
	color: #fff;
}

/* ============================================================
   HÀNG NHÃN PHÂN LOẠI — 11/09/2026 (Owner chốt phương án B3)
   ============================================================

   Trước pass này loại nước là pill `position: absolute` ở góc (8,8) CỦA
   CHÍNH Ô ẢNH. Đo thật ở mobile 390px: pill 104×24 phủ **10,7%** ô ảnh
   154×154, và với sản phẩm nước bình nó đè đúng NẮP/CỔ BÌNH — phần giúp
   khách phân biệt bình vòi với bình úp. Nay nhãn ra khỏi ảnh hoàn toàn:
   ảnh lo phần hình, chữ lo phần chữ.

   VÌ SAO HAI NHÃN RỜI, KHÔNG PHẢI MỘT DÒNG "A | B":
   thân thẻ chỉ rộng 151px ở mobile 2 cột. Đo bề rộng chữ thật (canvas,
   font 12px):
       "I-on kiềm | Bình đa năng"        142px   vừa, dư 9px
       "Nước khoáng | Bình đa năng"      164px   TRÀN
       "Nước tinh khiết | Bình đa năng"  ~174px  TRÀN
   Tức 2/3 loại nước sẽ xuống dòng, và dòng gộp khi tràn thì ngắt GIỮA CỤM
   ("Bình đa" / "năng"). Hai nhãn rời xuống dòng theo nguyên cụm, không bao
   giờ vỡ chữ, không phải cắt bớt bằng ellipsis, và còn chỗ cho nhãn thứ ba.

   MÀU: loại nước dùng sắc thương hiệu NHẠT (`primary-soft` + `on-soft`) để
   mắt bắt trước — đây là tiêu chí khách lọc nhanh nhất. Quy cách dùng nhãn
   trung tính. Cặp `on-soft`/`primary-soft` đạt 8,33:1 (AAA); nhãn trung
   tính `text-secondary` trên `surface-2` đạt 7,9:1. Cả hai đều dư ngưỡng
   AA dù chữ chỉ 10,5px.
*/
.alo-product-card__image-link { position: relative; }

.alo-product-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin: 7px 0 0;
	/* `<p>` mặc định có margin dưới — triệt để giữ nhịp dọc của thân thẻ. */
	padding: 0;
}

.alo-product-card__tag {
	display: inline-block;
	padding: 2px 8px;
	border: 1px solid var(--alo-color-border);
	border-radius: var(--alo-radius-pill);
	background: var(--alo-color-surface-2);
	color: var(--alo-color-text-secondary);
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1.45;
	/* Nhãn là một đơn vị: không cho ngắt giữa cụm, xuống dòng thì xuống cả
	   nhãn. Đây chính là điểm hơn của phương án này so với dòng gộp. */
	white-space: nowrap;
}

/**
 * NHÃN LOẠI NƯỚC — mỗi loại một sắc (12/09/2026).
 *
 * Trước đây cả ba loại dùng chung xanh thương hiệu, nên màu không mang
 * thông tin gì: khách phải ĐỌC mới biết thẻ nào là nước khoáng. Giờ liếc
 * là ra.
 *
 * Đồng thời đây là chỗ trả xanh lá về đúng một nghĩa trên thẻ sản phẩm:
 * sau thay đổi này thứ duy nhất còn xanh lá trên mỗi thẻ là NÚT THÊM.
 *
 * Lớp `--type` giữ lại làm mặc định cho sản phẩm không xác định được loại
 * nước — không để nhãn rơi về kiểu xám trung tính của nhãn quy cách.
 */
.alo-product-card__tag--type {
	background: var(--alo-color-info-soft);
	border-color: var(--alo-color-info-border);
	color: var(--alo-color-info);
}

.alo-product-card__tag--purified {
	background: var(--alo-color-water-purified-soft);
	border-color: var(--alo-color-water-purified-border);
	color: var(--alo-color-water-purified);
}

.alo-product-card__tag--mineral {
	background: var(--alo-color-water-mineral-soft);
	border-color: var(--alo-color-water-mineral-border);
	color: var(--alo-color-water-mineral);
}

.alo-product-card__tag--alkaline {
	background: var(--alo-color-water-alkaline-soft);
	border-color: var(--alo-color-water-alkaline-border);
	color: var(--alo-color-water-alkaline);
}