vốn có display:flex — để mặc định nó là phần tử
khối và đẩy nhãn xuống dòng dưới. */
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
margin: 0;
padding: 11px 14px;
border: 0;
border-radius: var(--wd-brd-radius, 8px);
background-color: var(--wd-primary-color, #e6a58e);
color: #fff;
font-size: 13px;
font-weight: 600;
line-height: 1.3;
text-align: center;
text-transform: none;
letter-spacing: .2px;
transition: background-color .15s ease, opacity .15s ease;
}
/*
* Ô icon rỗng: glyph đến từ biến --wd-btn-icon do class .wd-add-cart-icon đặt,
* mà class đó đã bỏ khi chuyển nút ra dải CTA. Giữ lại chỉ tạo khoảng trống
* thừa, nên ẩn hẳn để nút thành CTA chữ.
*/
.wd-product .labebe-card-cta .wd-action-icon {
display: none;
}
/* Theme không định nghĩa biến màu hover, nên dùng sắc đậm hơn của
--wd-primary-color hiện tại là rgb(230,165,142). */
.wd-product .labebe-card-cta > a.button:hover,
.wd-product .labebe-card-cta > a.button:focus-visible {
background-color: #d58a6f;
color: #fff;
}
/* Trạng thái đang thêm vào giỏ của WooCommerce. */
.wd-product .labebe-card-cta > a.button.loading {
opacity: .7;
pointer-events: none;
}
/*
* Chữ mô tả cho trình đọc màn hình mà WooCommerce chèn cạnh nút — phải giữ
* trong DOM nhưng không được chiếm chỗ trong dải CTA.
*/
.wd-product .labebe-card-cta > .screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
/*
* Khi module chọn biến thể mở ra, theme ẩn .wd-buttons và .product-labels bằng
* quy tắc :is(.quick-shop-shown,.wd-loading-quick-shop). Dải CTA không nằm
* trong hai class đó nên phải tự ẩn, nếu không nó đè lên chính module vừa mở.
*/
.quick-shop-shown .labebe-card-cta,
.wd-loading-quick-shop .labebe-card-cta {
opacity: 0;
visibility: hidden;
}
/*
* Thiết bị cảm ứng không có trạng thái hover — nếu giữ nguyên quy tắc trên thì
* CTA không bao giờ hiện. Cho hiện thường trực trên các thiết bị đó.
*/
/* --------------------------------------------------------------------------
* Ngưỡng thiết bị cho dải CTA trên thẻ sản phẩm
*
* ⚠ CẮT THEO BỀ RỘNG, KHÔNG CẮT THEO (hover: hover).
* iPad và phần lớn tablet báo `hover: none` giống hệt điện thoại. Nếu chốt điều
* kiện theo khả năng hover thì tablet cũng mất luôn nút — trong khi yêu cầu là
* tablet VẪN CÓ. Bề rộng là thứ duy nhất phân biệt được hai loại này.
*
* 769px là mép trên của ngưỡng 768.98px mà Woodmart dùng xuyên suốt.
* -------------------------------------------------------------------------- */
/*
* TABLET (≥769px, màn cảm ứng): không có hover thật nên "rê chuột để hiện" sẽ
* không bao giờ kích hoạt. Cho CTA hiện sẵn.
*/
@media (hover: none) and (min-width: 769px) {
.wd-product .labebe-card-cta {
opacity: 1;
visibility: visible;
transform: none;
}
}
/*
* MOBILE (≤768.98px): ẩn hoàn toàn dải CTA.
*
* Không đụng tới .quick-shop-wrapper — giữ nguyên nguyên tắc fail-open đã đặt
* từ đầu file: không quy tắc nào của child theme được phép ẩn module đó. Ở đây
* không cần: JS đã chặn không cho mở, và nút bấm duy nhất để mở nó cũng nằm
* trong chính dải CTA vừa bị ẩn. Không có đường nào kích hoạt.
*/
@media (max-width: 768.98px) {
.wd-product .labebe-card-cta {
display: none;
}
}
.wd-product .labebe-card-cta > a.button.loading {
opacity: .7;
pointer-events: none;
}
/* --------------------------------------------------------------------------
* Sản phẩm có biến thể: KHÔNG dùng dải CTA
*
* Loại này dùng module quick shop gốc của theme (.quick-shop-wrapper), được mở
* bằng hover trong assets/product-card.js. Module đó tự phủ kín vùng ảnh và có
* CSS riêng của theme, nên dải CTA chỉ chồng lên gây rối.
*
* Vẫn giữ thẻ trong DOM — đó chính là phần tử mà
* quickShop.js lắng nghe click, JS của ta phát sự kiện vào đó. Ẩn bằng CSS
* không ảnh hưởng tới việc phát sự kiện.
* -------------------------------------------------------------------------- */
.wd-product.product-type-variable .labebe-card-cta {
display: none;
}
/* --------------------------------------------------------------------------
* Giữ card nguyên trạng trong lúc đang tải module
*
* Khi phát click, theme gắn `wd-loading-quick-shop` và kéo theo ba biểu hiện
* nhìn thấy được: làm mờ cụm nút, làm mờ nhãn giảm giá, và ẩn ảnh hover bằng
* !important. Người dùng chỉ thấy card "nháy" rồi mới có module.
*
* Class `labebe-qs-loading` do JS gắn trong đúng khoảng đó, ở đây vô hiệu hoá
* cả ba để card đứng yên cho tới khi module sẵn sàng.
*
* Bắt buộc dùng !important: quy tắc ẩn ảnh hover của theme cũng !important.
* -------------------------------------------------------------------------- */
.wd-product.labebe-qs-loading .wd-buttons,
.wd-product.labebe-qs-loading .product-labels {
opacity: 1 !important;
}
.wd-product.labebe-qs-loading .wd-product-thumb .wd-product-img-hover {
opacity: 1 !important;
}
/*
* ⚠ CỐ Ý KHÔNG ẨN .quick-shop-wrapper Ở ĐÂY NỮA.
*
* Bản trước có quy tắc ẩn module trong lúc tải. Khi logic JS gỡ cờ bị sai (do
* theme bắn wdQuickShopSuccess TRƯỚC khi gắn class quick-shop-loaded), cờ không
* bao giờ được gỡ và module bị ẩn vĩnh viễn — card chết hẳn tới khi tải lại
* trang. Một quy tắc CSS !important không được phép biến lỗi logic nhỏ thành
* hỏng hoàn toàn.
*
* Các quy tắc còn lại phía trên chỉ giảm nhấp nháy; sai thì hậu quả tệ nhất là
* nút hiện hơi lâu, không bao giờ làm mất module.
*/
/* --------------------------------------------------------------------------
* Giao diện module quick shop
*
* Đè lên woo-opt-quick-shop.css của theme. Selector thêm .wd-product ở đầu để
* đủ đặc hiệu, không cần !important.
* -------------------------------------------------------------------------- */
/* Nền mờ (blur) thay cho nền trắng đục 90% của theme.
Nền phải trong bớt thì blur mới thấy được ảnh sản phẩm phía sau. */
.wd-product .quick-shop-wrapper {
background-color: rgba(255, 255, 255, .88);
background-color: rgba(var(--bgcolor-white-rgb, 255, 255, 255), .88);
-webkit-backdrop-filter: blur(14px) saturate(1.4);
backdrop-filter: blur(14px) saturate(1.4);
}
/* Trình duyệt không hỗ trợ backdrop-filter thì phải quay lại nền đặc, nếu không
chữ nằm trên ảnh sản phẩm sẽ không đọc được. */
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
.wd-product .quick-shop-wrapper {
background-color: rgba(255, 255, 255, .95);
background-color: rgba(var(--bgcolor-white-rgb, 255, 255, 255), .95);
}
}
/*
* Căn trái toàn bộ nội dung.
*
* Template của theme gắn class .text-center lên .quick-shop-form, mà class đó
* không set text-align trực tiếp — nó set qua ba biến CSS rồi mới dùng. Đè mỗi
* text-align là không đủ, các thành phần con vẫn đọc biến cũ và tự căn giữa.
*/
.wd-product .quick-shop-wrapper .quick-shop-form {
--content-align: start;
--wd-align: start;
--text-align: start;
padding: 16px;
text-align: start;
margin-inline: 0; /* .text-center có margin-inline:auto */
}
/*
* Theme kéo khối nút thêm giỏ ra sát mép bằng margin âm -10px, khớp với padding
* 10px cũ. Padding giờ là 16px nên margin âm đó làm nút lệch ra ngoài — bỏ đi
* để nút nằm gọn trong padding.
*/
.wd-product .quick-shop-wrapper .woocommerce-variation-add-to-cart {
margin-right: 0;
margin-left: 0;
}
/* --------------------------------------------------------------------------
* Ô màu biến thể phải đọc được trên nền blur
*
* Theme chỉ vẽ viền cho ô màu trong một số điều kiện màu nhất định, nên các màu
* nhạt (trắng, kem, vàng nhạt, xanh mint) nằm trên nền panel sáng + blur sẽ hoà
* lẫn vào nhau, nhìn như ô trống. Ở đây luôn vẽ viền cho MỌI ô màu trong panel.
* -------------------------------------------------------------------------- */
.wd-product .quick-shop-wrapper [class*="wd-swatches"] {
--wd-swatch-brd-color: rgba(0, 0, 0, .25);
}
/* Nền trắng đặc phía sau ô màu: chặn blur ăn vào chính ô màu. */
.wd-product .quick-shop-wrapper .wd-swatch.wd-bg {
background-color: #fff;
}
/* Viền cho mọi ô màu, không phụ thuộc màu bên trong. */
.wd-product .quick-shop-wrapper .wd-swatch.wd-bg::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
border: 1px solid var(--wd-swatch-brd-color);
border-radius: inherit;
pointer-events: none;
}
/* Ô đang chọn: viền đậm hơn để phân biệt rõ với các ô còn lại. */
.wd-product .quick-shop-wrapper .wd-swatch.wd-bg.wd-active::before,
.wd-product .quick-shop-wrapper .wd-swatch-wrap.wd-active .wd-swatch.wd-bg::before {
border-width: 2px;
border-color: var(--wd-primary-color, #e6a58e);
}
/* --------------------------------------------------------------------------
* Nút "Thêm vào giỏ hàng" bo tròn
*
* ⚠ BẮT BUỘC !important: theme đặt `border-radius: 0 !important` cho nút này
* trong woo-opt-quick-shop.css (nút vốn được thiết kế tràn sát mép panel). Đây
* là một trong số ít chỗ !important là cần thiết chứ không phải lười.
* -------------------------------------------------------------------------- */
.wd-product .quick-shop-wrapper .single_add_to_cart_button {
border-radius: 999px !important;
}
/* Nút của sản phẩm ĐƠN (dải CTA) giữ cùng hình dáng, tránh hai kiểu nút khác
nhau giữa hai loại sản phẩm trên cùng một lưới. */
.wd-product .labebe-card-cta > a.button {
border-radius: 999px;
}
/* --------------------------------------------------------------------------
* Ẩn dòng tồn kho "Còn N trong kho" trong quick shop
*
* Markup do WooCommerce core sinh (single-product/stock.php, không bị theme ghi
* đè): . JS biến thể đổ vào .woocommerce-variation-
* availability mỗi lần chọn xong tổ hợp.
*
* ⚠ CHỈ ẩn `.in-stock`, KHÔNG ẩn cả khối:
* Cùng khối đó còn dùng để in `.out-of-stock` ("Hết hàng") và
* `.available-on-backorder` ("Có thể đặt hàng trước"). Hai thông báo này KHÔNG
* thừa — nếu giấu luôn thì khách chọn đúng tổ hợp đã hết hàng sẽ thấy nút thêm
* giỏ bị mờ mà không hiểu tại sao.
*
* Hai quy tắc, cố ý:
* 1. Ẩn thẻ
— nền tảng, chạy trên mọi trình duyệt.
* 2. Thu gọn khối cha bằng :has() — khối cha là inline-block, để rỗng vẫn tạo
* line box nên còn chừa khoảng trống. Trình duyệt cũ không hiểu :has() sẽ
* bỏ qua dòng này: chữ vẫn mất, chỉ thừa chút khoảng trắng.
*
* Phạm vi bó trong .quick-shop-wrapper: TRANG SẢN PHẨM VẪN HIỆN tồn kho như cũ.
* -------------------------------------------------------------------------- */
.wd-product .quick-shop-wrapper .woocommerce-variation-availability .stock.in-stock {
display: none;
}
.wd-product .quick-shop-wrapper .woocommerce-variation-availability:has(> .stock.in-stock) {
display: none;
}
/* --------------------------------------------------------------------------
* Ẩn giá trị đã chọn cạnh nhãn "Kích thước"
*
* Span .wd-attr-selected do JS chèn (swatchesVariations.js:623), không có trong
* HTML gốc, nên phải xử lý bằng CSS chứ không gỡ được ở PHP.
*
* ⚠ VÌ SAO KHÔNG DÙNG OPTION `swatches_labels_name` CỦA THEME:
* Điều kiện trong JS là
* (swatches_labels_name === 'yes' && width >= 769) || width <= 768
* -> dưới 769px nó hiện BẤT KỂ option. Tắt option chỉ dọn được desktop, mobile
* vẫn còn. Ngoài ra option là toàn cục và mô tả của nó ghi rõ: tắt đi thì
* tooltip khi hover quay lại — đổi hành vi chứ không phải chỉ ẩn.
*
* ⚠ VÌ SAO CHỈ ẨN CHO pa_size, KHÔNG ẩn cho pa_color:
* Pill kích thước đã in sẵn "3-4 tuổi" nên nhắc lại là thừa. Còn ô màu chỉ là
* một vòng tròn — bỏ chữ đi thì không còn chỗ nào cho biết đó là "Xanh navy".
*
* :has() cần thiết vì span nằm trong