/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/

/* ==========================================================================
 * Thanh thông báo trên cùng — "Freeship toàn quốc..."
 *
 * Theme khoá cỡ chữ ở:
 *     .whb-top-bar .wd-header-text { font-size: 12px; line-height: 1.2 }
 * độ ưu tiên 0-2-0.
 *
 * ⚠ KHÔNG dùng !important. Thêm class của ta vào CHUỖI CÓ SẴN thành 0-3-0 là
 * thắng sạch. Nếu chỉ viết `.whb-top-bar .labebe-topbar-freeship` thì cũng
 * 0-2-0 — HOÀ với theme, và lúc đó ai thắng chỉ còn phụ thuộc file nào nạp
 * sau. CSS phần header của Woodmart nạp theo điều kiện lúc render nên thứ tự
 * đó KHÔNG chắc chắn; đừng đặt cược vào nó.
 *
 * line-height cũng phải nâng: 1.2 là tỉ lệ đặt cho chữ 12px, giữ nguyên ở 16px
 * thì dấu tiếng Việt (ề, ạ, ổ) chạm nhau giữa các dòng khi thanh bị xuống hàng
 * trên màn hình hẹp.
 * ========================================================================== */

.whb-top-bar .wd-header-text.labebe-topbar-freeship {
	font-size: 16px;
	line-height: 1.45;
}

/* ==========================================================================
 * Menu chính trên header — cỡ chữ
 *
 * Theme đọc cỡ chữ qua BIẾN:
 *     .wd-nav-header > li > a { font-size: var(--wd-header-el-font-size) }
 * và biến đó khai báo ở `:root` = 14px (từ Theme Settings → Typography).
 *
 * ⚠ KHÔNG sửa giá trị ở :root, và KHÔNG ghi đè font-size trên thẻ <a>:
 *   - Sửa :root sẽ kéo theo MỌI phần tử header dùng chung biến này (chữ ở cụm
 *     công cụ, menu phụ, currency switcher...) — không phải thứ được yêu cầu.
 *   - Ghi đè font-size trực tiếp thì phải đấu độ ưu tiên với theme.
 *
 * Đặt lại biến ngay trên <ul> của menu chính là gọn nhất: biến tuỳ chỉnh lấy
 * theo TỔ TIÊN GẦN NHẤT có khai báo, nên .wd-nav-main luôn thắng :root bất kể
 * độ ưu tiên selector. Menu mobile mang class khác (.wd-nav-mobile,
 * .wd-nav-mob-tab) nên không bị ảnh hưởng.
 * ========================================================================== */

.wd-nav-main {
	--wd-header-el-font-size: 18px;
}

/* ==========================================================================
 * Panel trượt trên mobile — menu và giỏ hàng
 *
 * Cả hai dùng chung class .wd-side-hidden:
 *     menu     .mobile-nav.wd-side-hidden.wd-left
 *     giỏ hàng .cart-widget-side.wd-side-hidden.wd-right
 * nên một bộ quy tắc phủ cả hai.
 *
 * Mặc định của theme: bám sát mép, cao kín màn, rộng min(300px, 80vw).
 * Đổi thành: tràn ngang trừ lề, bo góc, cách mép 24px.
 *
 * ⚠ BA CÁI BẪY, cả ba đều làm hỏng nếu bỏ qua:
 *
 * 1. HIỆU ỨNG ĐÓNG PHẢI CỘNG THÊM LỀ.
 *    Theme đóng panel bằng translate3d(-100%). "100%" là bề rộng CHÍNH NÓ.
 *    Khi panel không còn bám mép mà lùi vào 24px, dịch -100% chỉ đưa mép phải
 *    của nó về đúng x=24px — tức còn ló ra một dải 24px. Phải dịch
 *    calc(-100% - 24px).
 *
 * 2. QUY TẮC MỞ PHẢI MẠNH HƠN QUY TẮC ĐÓNG.
 *    Theme mở bằng `.wd-side-hidden.wd-opened { transform: none }` — chỉ 0-2-0.
 *    Quy tắc đóng của ta là 0-2-1 (có `html`), tức MẠNH HƠN. Không viết lại
 *    trạng thái mở với độ ưu tiên cao hơn nữa thì panel bấm vào không mở ra.
 *    Đây là kiểu lỗi khiến menu chết hoàn toàn, không phải lệch vài pixel.
 *
 * 3. --wd-admin-bar-h chỉ có giá trị khi đăng nhập.
 *    Khách vãng lai không có thanh admin nên biến rỗng; phải cho fallback 0px,
 *    không thì cả biểu thức calc() hỏng và panel mất luôn vị trí.
 * ========================================================================== */

@media (max-width: 768.98px) {

	/*
	 * ⚠ PHẢI TỰ KHAI BÁO NỀN CHO PANEL — KHÔNG CÓ SẴN Ở MỌI TRANG.
	 *
	 * `.wd-side-hidden{position:fixed;…}` của Woodmart nằm trong CSS part CÓ
	 * ĐIỀU KIỆN (parts/int-elem-opt-off-canvas-column.css và họ hàng), chỉ được
	 * nạp khi trang thực sự dùng off-canvas column. Trang cửa hàng dựng bằng
	 * layout Elementor nên part đó KHÔNG nạp.
	 *
	 * Hậu quả nếu thiếu: gắn class vào thì `transform` vẫn ăn (đẩy phần tử ra
	 * ngoài màn hình) nhưng `position:fixed` thì không, nên `left`/`inset-block`
	 * bị bỏ qua và panel không bao giờ hiện. Đúng triệu chứng "chỉ thấy backdrop".
	 *
	 * Không nạp part đó vì hai lý do: nó chỉ nhắm :is(.e-con,.elementor-column)
	 * — không khớp thẻ widget sidebar; và nó có `left:0 !important` sẽ đè mất
	 * lề 24px.
	 *
	 * Khai báo lại cho panel của theme là vô hại: cùng giá trị, chúng đã có sẵn
	 * từ part riêng của chúng.
	 */
	html .wd-side-hidden {
		position: fixed;
		z-index: 500;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		width: min(var(--wd-side-hidden-w), calc(100vw - (var(--labebe-drawer-m) * 2)));
		background-color: var(--bgcolor-white, #fff);
		transition: transform .5s cubic-bezier(0.19, 1, 0.22, 1);
	}

	html .wd-side-hidden {
		--labebe-drawer-m: 24px;
		--labebe-drawer-r: 16px;

		/* tràn ngang trừ lề hai bên */
		--wd-side-hidden-w: calc(100vw - (var(--labebe-drawer-m) * 2));

		inset-block:
			calc(var(--wd-admin-bar-h, 0px) + var(--labebe-drawer-m))
			var(--labebe-drawer-m);
		border-radius: var(--labebe-drawer-r);
		box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
	}

	/* --- trạng thái ĐÓNG: lùi hết ra ngoài, cộng cả phần lề --- */
	html .wd-side-hidden.wd-left {
		left: var(--labebe-drawer-m);
		transform: translate3d(calc(-100% - var(--labebe-drawer-m)), 0, 0);
	}

	html .wd-side-hidden.wd-right {
		right: var(--labebe-drawer-m);
		transform: translate3d(calc(100% + var(--labebe-drawer-m)), 0, 0);
	}

	/* --- trạng thái MỞ: phải mạnh hơn hai quy tắc trên (0-3-1 > 0-2-1) --- */
	html .wd-side-hidden.wd-left.wd-opened,
	html .wd-side-hidden.wd-right.wd-opened {
		transform: none;
	}
}

/* ==========================================================================
 * Panel bộ lọc cửa hàng trên mobile
 *
 * JS (assets/shop-filters.js) gắn class .wd-side-hidden.wd-left lên thẻ bọc
 * widget sidebar, nên nó tự thừa hưởng toàn bộ phần bo góc / lề / hiệu ứng
 * trượt đã định nghĩa ở khối trên. Đây chỉ là vài chi tiết riêng của panel này.
 * ========================================================================== */

@media (max-width: 768.98px) {

	/*
	 * ⚠ GHI ĐÈ display CHỈ KHI ĐÃ Ở CHẾ ĐỘ TRƯỢT.
	 *
	 * Elementor đặt cho container này:
	 *     @media (max-width:768px) { .elementor .e-6510a76-fab7da1 { display:none } }
	 * Đó là CHỦ Ý — để sidebar không chen vào giữa lưới sản phẩm trên mobile.
	 * KHÔNG được bỏ nó đi ở phía Elementor: bỏ là sidebar trở lại dòng chảy và
	 * đẩy toàn bộ lưới xuống.
	 *
	 * Quy tắc dưới đây chỉ thắng KHI phần tử đã mang .wd-side-hidden — lúc đó
	 * nó đã là position:fixed, nằm ngoài dòng chảy, nên hiện lên không đụng gì
	 * tới lưới. Chưa bấm nút thì transform vẫn đẩy nó ra ngoài màn hình.
	 *
	 * Nếu JS không chạy: container giữ nguyên display:none — bố cục y như cũ.
	 *
	 * Độ ưu tiên 0-3-1 để thắng quy tắc 0-2-0 của Elementor, và thắng cả
	 * `width: 450px` mà Elementor đặt cho container ở mọi bề rộng.
	 */
	html .elementor .e-con.wd-side-hidden {
		display: flex;
	}

	/*
	 * ⚠ PHẢI DÙNG !important Ở ĐÂY — một trong số rất ít chỗ chính đáng.
	 *
	 * Part off-canvas của theme đặt:
	 *     :is(.e-con,.elementor-column).wd-side-hidden.wd-left { left:0 !important }
	 * Không có cách nào thắng một khai báo !important bằng độ ưu tiên suông.
	 *
	 * Độ ưu tiên thật của quy tắc theme là 0-3-0 — `:is()` chỉ lấy độ ưu tiên
	 * của nhánh cao nhất bên trong (1 class), không cộng dồn cả hai nhánh.
	 * Selector dưới đây là 0-4-1, nên khi hai bên cùng !important thì ta thắng.
	 *
	 * ⚠ CĂN GIỮA BẰNG left + right, KHÔNG bằng width:
	 * đặt bề rộng qua var(--wd-side-hidden-w) sẽ phụ thuộc biến đó có bị theme
	 * ghi đè hay không (theme đặt min(300px,80vw) ở ngưỡng 1024px). Ghim hai mép
	 * rồi để width:auto thì hai lề luôn bằng nhau.
	 */
	html .elementor .e-con.wd-side-hidden.wd-left,
	html .elementor .e-con.wd-side-hidden.wd-right {
		left: var(--labebe-drawer-m) !important;
		right: var(--labebe-drawer-m) !important;
		width: auto !important;
		max-width: none !important;
	}

	/* Chừa chỗ cho nút đóng, và cho nội dung thở trong khung bo góc. */
	html .e-con.wd-side-hidden,
	html .elementor-widget-wd_sidebar.wd-side-hidden > .elementor-widget-container {
		padding: 56px 20px 24px;
	}

	/*
	 * ⚠ KHOÁ 1:1 BẰNG NHIỀU LỚP — width + height là chưa đủ.
	 * Đây là thẻ <button>, mà Woodmart đặt --btn-default-padding và min-width
	 * cho nút. min-width lớn hơn sẽ THẮNG width và kéo nút thành bầu dục —
	 * đúng lỗi đã gặp ở ô màu trên thanh sticky. aspect-ratio là chốt cuối.
	 */
	.lbb-filters-close {
		position: absolute;
		top: 12px;
		inset-inline-end: 12px;
		z-index: 2;

		display: flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		box-sizing: border-box;
		width: 36px;
		min-width: 36px;
		max-width: 36px;
		height: 36px;
		min-height: 36px;
		aspect-ratio: 1 / 1;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background-color: rgba(0, 0, 0, .06);
		cursor: pointer;
	}

	/* Dấu X vẽ bằng hai gạch, không phụ thuộc font icon của theme. */
	.lbb-filters-close::before,
	.lbb-filters-close::after {
		content: "";
		position: absolute;
		width: 15px;
		height: 1.5px;
		background-color: var(--color-gray-900, #242424);
	}

	.lbb-filters-close::before { transform: rotate(45deg); }
	.lbb-filters-close::after  { transform: rotate(-45deg); }

	/*
	 * Lớp phủ của theme. Không có nó thì nền sau panel không tối đi và người
	 * dùng không nhận ra panel đang mở.
	 */
	.wd-close-side.wd-close-side-opened {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}
}

/* ==========================================================================
 * Các bước thanh toán — hiện đủ trên mobile
 *
 * Woodmart CỐ Ý chỉ hiện bước hiện tại trên màn nhỏ:
 *     @media (max-width: 768.98px) { .wd-checkout-steps .step-inactive { display:none } }
 * Markup có 3 <li>, hai cái không phải bước hiện tại đều mang .step-inactive.
 *
 * ⚠ BỎ ẨN THÔI LÀ CHƯA ĐỦ.
 * Ba quy tắc tạo nên hình hài của dải bước đều nằm trong @media (min-width: 769px):
 *     li > :is(a,span)              { opacity: .7 }          <- làm mờ bước chưa tới
 *     li:not(:last-child)::after    { content: "\f120" }     <- mũi tên ngăn cách
 *     .step-active > :is(a,span)    { text-decoration: … }   <- gạch chân bước hiện tại
 * Chỉ gỡ display:none thì ra ba chữ bằng nhau, không mũi tên, không biết đang ở
 * đâu — tệ hơn hiện trạng. Phải mang cả ba xuống mobile.
 *
 * Màu gạch chân dùng var(--wd-primary-color) y như bản desktop của theme.
 * ========================================================================== */

@media (max-width: 768.98px) {

	html .wd-checkout-steps .step-inactive {
		display: flex;
	}

	/* Khoảng cách hẹp lại để ba bước đỡ phải xuống dòng trên máy nhỏ. */
	html .wd-checkout-steps {
		gap: 6px 8px;
	}

	html .wd-checkout-steps li {
		gap: 8px;
	}

	html .wd-checkout-steps li > :is(a, span) {
		opacity: .7;
	}

	html .wd-checkout-steps .step-active > :is(a, span) {
		opacity: 1;
		text-decoration: underline 2px solid var(--wd-primary-color);
		text-underline-offset: 6px;
	}

	html .wd-checkout-steps li:not(:last-child)::after {
		content: "\f120";
		font-family: "woodmart-font";
		font-weight: 400;
		font-size: 85%;
		opacity: .7;
	}
}

/* ==========================================================================
 * Mục lục của Elementor (widget Table of Contents) — đồng bộ màu thương hiệu
 *
 * Widget dùng ở trang bài viết đang để màu hover/active là #0D78F2 — xanh dương
 * mặc định của Elementor, chưa ai đổi. Trên nền tông đất của LaBéBé nó là màu
 * lạc duy nhất, và khác hẳn mục lục ở các trang chính sách.
 *
 * ⚠ Ghi đè bằng CSS thay vì sửa trong Elementor: sửa trong editor thì phải mở
 * layout #2004, và mỗi lần import lại layout là mất. CSS ở child theme thì bền.
 * Muốn quay về xanh mặc định: xoá nguyên khối này.
 * ========================================================================== */

.elementor-toc__list-item-text:hover,
.elementor-toc__list-item.elementor-item-active .elementor-toc__list-item-text {
	color: var(--wd-primary-color, #c16241);
}