/*
 * Kiểu chung cho các drawer trượt (off-canvas) của Woodmart:
 * full width, lề ngang 16px, lề dọc 40px, bo góc 16px.
 *
 * Gom hai drawer vào một file vì chúng dùng CHUNG bộ số. Để rải ở hai file
 * khác nhau thì sau này sửa 16px một chỗ mà quên chỗ kia là lệch nhau ngay.
 *
 * ⚠ HAI DRAWER CHẠY BẰNG HAI CƠ CHẾ KHÁC NHAU, đừng gộp selector:
 *
 * 1. Drawer LỌC SẢN PHẨM — một Elementor container bật off-canvas
 *    (`wd-col-offcanvas-sm`, `wd-alignment-left`). `offCanvasColumnBtn.js`
 *    gắn `.wd-side-hidden .wd-left .wd-inited`. KHÔNG phải `.wd-sidebar`,
 *    trang này không có element đó. Rule theme cha có `!important`:
 *      :is(.e-con,.elementor-column).wd-side-hidden.wd-left{left:0 !important}   (0,3,0)
 *    nên override phải đạt (0,4,0) VÀ có `!important`.
 *
 * 2. Drawer GIỎ HÀNG — nằm sẵn trong HTML (`.cart-widget-side`), mở từ phải.
 *    Hình học chỉ đến từ `base.css`, KHÔNG có `!important`:
 *      .wd-side-hidden.wd-right{right:0;transform:translate3d(100%,0,0)}        (0,2,0)
 *    nên (0,3,0) là đủ, không cần `!important`.
 *
 * `:is()` lấy độ ưu tiên của thành phần đặc hiệu nhất bên trong, nên
 * `:is(.e-con,.elementor-column)` tính là (0,1,0) chứ không phải (0,0,0).
 * Và bằng độ ưu tiên là không đủ: các file `parts/*.css` của Woodmart được in
 * bằng thẻ <link> ngay trong body, tức nạp SAU CSS child, hoà thì theme thắng.
 */
:root {
	/* Lề NGANG và lề DỌC cố ý tách riêng — chúng không còn bằng nhau. */
	--hm-drawer-gap: 16px;
	--hm-drawer-gap-block: 40px;
	--hm-drawer-radius: 16px;

	/*
	 * Backdrop chỉ làm mờ để tách lớp, KHÔNG phủ kín.
	 *
	 * Tham chiếu để khỏi mò lại: nền trang chỗ khung viền gần như trắng, nên
	 * màu hiện ra ≈ 255 × (1 − alpha):
	 *     .7  -> #4d4d4d  (xám rất đậm, mức theme Woodmart dùng cho drawer)
	 *     .35 -> #a6a6a6  (xám đặc, ĐỌC RA NHƯ MỘT MẢNG FILL — đã thử, bị loại)
	 *     .15 -> #d9d9d9  (voan mỏng)
	 *
	 * Lưu ý: khung viền quanh thẻ chỉ 16px ngang / 40px dọc và rơi đúng vào
	 * phần trắng trơn của trang (đệm trên header, lề hai bên), nên hạ alpha
	 * KHÔNG làm "hiện ra nội dung" — nó chỉ làm lớp voan nhẹ đi. Muốn thật sự
	 * thấy sản phẩm phía sau thì phải nới --hm-drawer-gap cho khung rộng ra.
	 */
	--hm-backdrop-color: rgba(0, 0, 0, .15);
}

/* ---------- 1. Drawer lọc sản phẩm (trượt từ trái) ---------- */
@media (max-width: 1024px) {
	:is(.e-con, .elementor-column).wd-side-hidden.wd-inited.wd-left {
		/* Neo cả hai cạnh rồi để width tự tính. Cố ý không dùng
		   `width: calc(100vw - 32px)` để không phải xử lý chuyện thanh cuộn
		   có bị tính vào `vw` hay không. */
		left: var(--hm-drawer-gap) !important;
		right: var(--hm-drawer-gap) !important;
		width: auto !important;

		inset-block: calc(var(--wd-admin-bar-h, 0px) + var(--hm-drawer-gap-block)) var(--hm-drawer-gap-block);
		border-radius: var(--hm-drawer-radius);
	}

	:is(.e-con, .elementor-column).wd-side-hidden.wd-inited.wd-left:not(.wd-opened) {
		transform: translate3d(calc(-100% - var(--hm-drawer-gap)), 0, 0);
	}
}

/* ---------- 2. Drawer giỏ hàng (trượt từ phải) ---------- */
@media (max-width: 1024px) {
	.cart-widget-side.wd-side-hidden.wd-right {
		left: var(--hm-drawer-gap);
		right: var(--hm-drawer-gap);
		width: auto;

		inset-block: calc(var(--wd-admin-bar-h, 0px) + var(--hm-drawer-gap-block)) var(--hm-drawer-gap-block);
		border-radius: var(--hm-drawer-radius);
	}

	.cart-widget-side.wd-side-hidden.wd-right:not(.wd-opened) {
		transform: translate3d(calc(100% + var(--hm-drawer-gap)), 0, 0);
	}
}

/*
 * TẠI SAO PHẢI SỬA CẢ `transform` Ở TRẠNG THÁI ĐÓNG:
 *
 * Theme đóng drawer bằng `translate3d(±100%, 0, 0)` — dịch đúng bằng chiều rộng
 * của chính nó, chỉ vừa khít khi drawer sát viền (`left: 0` / `right: 0`). Giờ
 * drawer cách viền 16px, dịch ±100% sẽ để hở một vệt 16px ngay cạnh màn hình
 * khi đóng. Phải trừ/cộng thêm đúng 16px đó.
 *
 * `:not(.wd-opened)` là BẮT BUỘC, không phải cho gọn: rule đóng ở trên đặc hiệu
 * hơn rule mở `.wd-side-hidden.wd-opened{transform:none}` (0,2,0) trong
 * `base-deferred.css`. Bỏ `:not()` ra là drawer không bao giờ mở được nữa.
 */

/* ---------- 3. Overlay tìm kiếm — plugin FiboSearch, KHÔNG phải Woodmart ---------- */
/*
 * Ô tìm kiếm ở header là plugin FiboSearch (`ajax-search-for-woocommerce-premium`,
 * prefix class `dgwt-wcas`), đang bật tính năng "mobile overlay". Bấm vào ô là nó
 * phủ full màn hình. Đây là vendor thứ ba, cơ chế thứ ba — đừng tìm class Woodmart.
 *
 * Rule của plugin (`assets/css/style.min.css`), độ ưu tiên chỉ (0,1,0):
 *   .dgwt-wcas-overlay-mobile{position:absolute;left:0;right:0;top:0;bottom:0;width:100%;background:#fff}
 *
 * Bằng (0,1,0) là hoà, mà thứ tự nạp giữa CSS plugin và CSS child không chắc
 * chắn, nên neo thêm `html.dgwt-wcas-overlay-mobile-on` để đạt (0,2,1).
 *
 * CỐ Ý KHÔNG đổi `position: absolute` sang `fixed`. Plugin dựa vào việc CẢ TRANG
 * cuộn được trên iOS (xem rule iOS bên dưới); chuyển sang `fixed` là đổi mô hình
 * cuộn của họ và rất dễ sinh lỗi với bàn phím ảo.
 */
@media (max-width: 1024px) {
	html.dgwt-wcas-overlay-mobile-on .dgwt-wcas-overlay-mobile {
		top: calc(var(--wd-admin-bar-h, 0px) + var(--hm-drawer-gap-block));
		right: var(--hm-drawer-gap);
		bottom: var(--hm-drawer-gap-block);
		left: var(--hm-drawer-gap);
		width: auto;

		border-radius: var(--hm-drawer-radius);
		/* Cần `overflow: hidden` để bo góc cắt được danh sách gợi ý bên trong —
		   `.dgwt-wcas-suggestions-wrapp` là position:absolute nên không tự bo. */
		overflow: hidden;
	}

	/*
	 * iOS đi đường riêng.
	 *
	 * Plugin cố tình cho danh sách gợi ý cao tự do trên iOS:
	 *   .dgwt-wcas-overlay-mobile-on.dgwt-wcas-is-ios .dgwt-wcas-suggestions-wrapp
	 *     { max-height:none !important; height:auto !important }
	 * kèm `body{overflow:auto}` và `html{overflow:visible}` — tức để CẢ TRANG cuộn,
	 * vì trên iOS phần tử cao cố định cộng bàn phím ảo là ổ lỗi.
	 *
	 * Nếu để nguyên `bottom: 16px` thì thẻ cao cố định, mà nội dung bên trong lại
	 * cao tự do, và `overflow: hidden` ở trên sẽ CẮT MẤT kết quả tìm kiếm không
	 * cách nào cuộn tới. Nên trên iOS bỏ neo cạnh dưới, cho thẻ tự cao theo nội
	 * dung và giữ đúng chiến lược cuộn của plugin.
	 */
	html.dgwt-wcas-overlay-mobile-on.dgwt-wcas-is-ios .dgwt-wcas-overlay-mobile {
		bottom: auto;

		/* Khai báo hai lần là CỐ Ý: `vh` trên iOS tính cả phần bị thanh công cụ
		   Safari che, nên thẻ tràn xuống dưới thanh đó. `dvh` (viewport động)
		   mới đúng phần nhìn thấy được. Trình duyệt cũ không hiểu `dvh` sẽ bỏ
		   qua dòng sau và dùng dòng trước. */
		min-height: calc(100vh - var(--hm-drawer-gap-block) * 2);
		min-height: calc(100dvh - var(--hm-drawer-gap-block) * 2);
	}
}

/*
 * BACKDROP cho overlay tìm kiếm.
 *
 * Hai drawer kia không cần: theme Woodmart đã có sẵn `.wd-close-side`
 * (`position:fixed; background:rgba(0,0,0,.7); z-index:400`, bật bằng
 * `.wd-close-side-opened`). Còn FiboSearch KHÔNG có backdrop nào — vì overlay
 * gốc của nó phủ kín màn hình nên chưa bao giờ cần. Thu nó thành thẻ cách viền
 * 16px thì nội dung trang lộ ra khung viền, trông như lỗi.
 *
 * VỀ Z-INDEX — chỗ này có hai cái bẫy:
 *
 * 1. Plugin set z-index của thẻ **inline bằng JS**:
 *      $('.js-dgwt-wcas-overlay-mobile').css('zIndex', 99999999999)
 *    nên CSS thường không đổi được z-index của thẻ (inline luôn thắng, muốn đổi
 *    phải `!important`). May là không cần đổi.
 *
 * 2. `99999999999` vượt phạm vi int32, browser **kẹp về 2147483647**. Nên đặt
 *    backdrop ở `2147483646` là đúng một bậc dưới thẻ.
 *
 * Cố ý KHÔNG dùng z-index 400 như `.wd-close-side` của theme: các widget nổi
 * của bên thứ ba (Zalo, Messenger, nút Gọi điện) thường dùng z-index cỡ 999999
 * và sẽ chọc xuyên qua lớp mờ. Ở ngay dưới thẻ thì phủ được tất cả.
 *
 * Dùng `body::before` chứ không phải `html::before`: `overflow` đặt trên thẻ
 * gốc được truyền lên viewport nên có thể cắt mất phần tử `position: fixed`,
 * mà plugin thì đang set `html.dgwt-wcas-overlay-mobile-on{overflow:hidden}`.
 *
 * Lớp này cũng CHẶN THAO TÁC CHẠM vào khung viền 16px. Không có nó, chạm vào
 * viền là bấm trúng link sản phẩm phía sau và bị điều hướng đi mất.
 *
 * Không có transition: overlay của plugin hiện ra tức thì (khác drawer của
 * theme có fade .5s), backdrop hiện tức thì mới khớp. Muốn fade thì phải khai
 * báo `body::before` tồn tại thường trực rồi chuyển `opacity`, vì transition
 * không chạy trên phần tử vừa được tạo.
 */
@media (max-width: 1024px) {
	html.dgwt-wcas-overlay-mobile-on body::before {
		content: "";
		position: fixed;
		inset: 0;
		z-index: 2147483646;

		/*
		 * ⚠ TUYỆT ĐỐI KHÔNG THÊM `backdrop-filter: blur()` VÀO ĐÂY.
		 *
		 * Đã thử ngày 2026-09-05 và phải bỏ. Trên Safari/iOS, `backdrop-filter`
		 * không lấy mẫu được nội dung nằm ở compositing layer khác — mà trang
		 * này đầy phần tử fixed/transform nên nội dung nằm layer riêng hết. Kết
		 * quả: nó chỉ lấy nền trắng của trang, trắng + .35 đen = một mảng xám
		 * PHẲNG TUYỆT ĐỐI (#a5a5a5), che sạch nội dung. Đúng cái mà lớp mờ này
		 * không được phép làm.
		 *
		 * Chỉ dùng màu nền trong suốt. Muốn đậm/nhạt thì sửa --hm-backdrop-color.
		 */
		background-color: var(--hm-backdrop-color);
	}
}