/*
 * LALUZ UI Patch — MODULE EMPTY-STATE (CSS)
 *
 * Nhắc lại: WPCode 23020 in SAU file này, nên mọi rule phải prefix "html body"
 * + !important. Xem ghi chú đầy đủ trong laluz-ui-patch.php.
 *
 * ─────────────────────────────────────────────────────────────────────────────
 * LỖI GỐC
 * ─────────────────────────────────────────────────────────────────────────────
 * Vào một trang thương hiệu chưa có sản phẩm (vd /lattafa/) thì theme in khối:
 *
 *   <a class="empty-product">
 *     <div class="image-empty-product">
 *       <img src="/template/assets/images/empty-product-1.png">   <- 150x150
 *     </div>
 *     <p class="text">Hiện tại, sản phẩm bạn đang tìm kiếm không tồn tại…</p>
 *   </a>
 *   <a class="btn noic product-empty-button">CỬA HÀNG</a>
 *
 * Đo trên live:
 *  - Cái ảnh empty-product-1.png là hộp carton MÀU NÂU của bộ template cũ.
 *    Nâu này không nằm trong bảng màu site (§2.2: paper / tile / ink / soft /
 *    grey / line / brass). Nó là mảng màu bão hoà nhất trên cả trang, trong khi
 *    nội dung thật của trang chỉ là một câu thông báo.
 *  - Nút CỬA HÀNG thì ĐÃ đúng theme sẵn: nền trong suốt, viền 1px ink,
 *    border-radius 0, letter-spacing 2px. Không đụng vào.
 *  - Chữ .text đang 18px ink — to hơn cần thiết cho một dòng thông báo phụ.
 *
 * ─────────────────────────────────────────────────────────────────────────────
 * CÁCH SỬA
 * ─────────────────────────────────────────────────────────────────────────────
 * Bỏ hẳn cái minh hoạ, giữ lại chữ + nút. Trạng thái rỗng của một shop hàng
 * hiệu nên là một câu ngắn và một lối đi tiếp, không phải một bức tranh.
 * KHÔNG xoá ảnh khỏi server, chỉ ẩn — gỡ module là ảnh quay lại ngay.
 *
 * MUỐN TRẢ LẠI ẢNH CŨ: xoá đúng khối rule số 1 bên dưới.
 * MUỐN TẮT CẢ MODULE:
 *   define( 'LALUZ_UI_PATCH_DISABLE_EMPTY_STATE', true );
 */

/* ── 1. Bỏ hộp carton nâu ────────────────────────────────────────────────── */
html body .empty-product .image-empty-product {
	display: none !important;
}

/* ── 2. Cho khối thông báo thở đúng nhịp dọc của trang ───────────────────── */
html body .empty-product {
	display: block !important;
	padding: 40px 20px 0 !important;
	text-align: center !important;
	text-decoration: none !important;
}

html body .empty-product .text {
	max-width: 46ch !important;
	margin: 0 auto !important;
	font-family: var( --lz-sans, 'Be Vietnam Pro', sans-serif ) !important;
	font-size: 15px !important;
	line-height: 1.7 !important;
	color: var( --lz-grey, #6E6B63 ) !important;
}

/* ── 3. Canh giữa nút CỬA HÀNG ───────────────────────────────────────────
   ĐÃ THỬ VÀ HỎNG: html body .btn.product-empty-button { display:table;
   margin:auto } — đo trên live thì computed vẫn ra inline-flex, margin 0px,
   nghĩa là có rule khác thắng. Không đi tiếp vào cuộc đua specificity.

   Cách chạy được: canh giữa Ở CHA, khoá đúng cái cha đang chứa khối rỗng
   bằng :has() — nên không đụng tới .container nào khác trong trang
   (mô tả thương hiệu bên dưới vẫn căn trái như cũ, đã chụp lại để đối chiếu).
   :has() đã dùng sẵn ở module quickwins, trình duyệt của khách hỗ trợ.
   Trình duyệt cũ không hiểu :has() thì nút nằm trái — đúng bằng hiện trạng,
   không xấu thêm. */
html body .container:has( > .empty-product ) {
	text-align: center !important;
}

html body .container:has( > .empty-product ) .btn.product-empty-button {
	margin: 24px 0 64px !important;
}