/**
 * Luxury design pass "Noir & Or" — CSS cho phần Flatsome KHÔNG có theme_mod chính chủ
 * (hoặc mod là kiểu phức tạp/serialized, rủi ro cao hơn set trực tiếp — xem report).
 * File MỚI trong child theme assets — KHÔNG sửa child-enhancements.css.
 *
 * Phần đã set qua theme_mod (không lặp lại ở đây): color_primary/color_links/
 * color_links_hover → #C8A464; color_texts/type_headings_color → #1f1f1f;
 * button_radius → 0; text_transform_section_titles → none.
 *
 * !important dùng có chủ đích ở các chỗ đang bị 1 rule !important khác đè (Kirki
 * custom-css inline sinh ra .single_add_to_cart_button.button{background:#27ae60!important}
 * và tương tự cho #place_order/.checkout-button) — không phải thói quen, chỉ nơi cần thắng
 * rule đó chắc chắn bất kể thứ tự nạp stylesheet.
 *
 * ROUND 2 fix (root cause xác nhận qua curl so thứ tự <link>/<style> thật trong <head>):
 * link cnoles-luxury-noir-or-css nạp TRƯỚC <style id="custom-css"> (Kirki) VÀ trước
 * flatsome-main.css — 2 rule bị thua không phải do thiếu selector, mà do specificity
 * NGANG NHAU + nạp SAU thắng theo cascade:
 *   - h1..h6,.heading-font{font-family:Poppins} nằm trong custom-css, in SAU luxury-noir-or.css.
 *   - .alert{background-color:var(--fs-color-alert)} nằm trong flatsome.css (file riêng,
 *     link SAU luxury-noir-or.css) — cùng specificity 1 class như .button của mình.
 * → thêm !important cho đúng 2 chỗ đó để thắng chắc chắn, không phụ thuộc thứ tự nạp nữa.
 */

/* ---------- 1. Typography: heading → serif Cormorant Garamond ---------- */
h1, h2, h3, h5, h6, .heading-font {
	font-family: 'Cormorant Garamond', serif !important;
	font-weight: 500 !important;
}

/* Hero + section title dạng "Shop by Category" / "Find Your Perfect Bag": bỏ ALL-CAPS,
   thêm letter-spacing nhẹ. Scope đúng h1/h2/h3 CÓ class .uppercase (không đụng .uppercase
   trên nút/label/nav — những chỗ đó không phải thẻ heading nên không bị ảnh hưởng). */
h1.uppercase, h2.uppercase, h3.uppercase,
.banner h1, .banner h2 {
	text-transform: none !important;
	letter-spacing: .5px;
	font-weight: 500;
}

/* Label nhỏ (category trên product card, nav chính) — GIỮ uppercase, thu nhỏ + tracking rộng. */
#masthead .nav > li > a {
	font-size: 11px;
	letter-spacing: 2px;
}
.product-small .category.product-cat {
	font-size: 11px;
	letter-spacing: 2px;
	color: #9a948c !important;
}

/* ---------- 2. Buttons: phẳng, bỏ gradient/bóng 3D ---------- */
.button {
	background-image: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	background-color: #141414 !important;
	color: #fff;
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 1.5px;
	border: none;
}
/* Nút hero "SHOP NOW"/"BROWSE ALL BAGS" là <a class="button alert is-shade is-large">.
   flatsome.css có .alert{background-color:var(--fs-color-alert)} — cùng specificity 1 class
   với .button ở trên, file load SAU luxury-noir-or.css nên thắng theo cascade nếu không có
   !important. Đã thêm !important cho .button phía trên nên đủ thắng (KHÔNG viết thêm rule
   ".alert" trần — tránh vô tình đổi màu các phần tử "alert" khác không phải nút, VD thông báo
   lỗi WooCommerce). */
.button:before, .button:after,
.button.is-shade:before, .button.is-shade:after {
	display: none !important;
	box-shadow: none !important;
}
.button:hover {
	background-color: #C8A464 !important;
	color: #fff;
}

/* Secondary / outline: nền trong, viền đen 1px. */
.button.is-outline {
	background-color: transparent !important;
	border: 1px solid #141414 !important;
	color: #141414;
}
.button.is-outline:hover {
	background-color: #141414 !important;
	color: #fff !important;
	border-color: #141414 !important;
}

/* WooCommerce: Add to cart / Place order / Checkout / Apply coupon — hiện đang bị 1 rule
   !important riêng tô xanh lá (#27ae60) từ Kirki custom-css. Thêm "body" phía trước để tăng
   specificity, thắng chắc chắn bất kể thứ tự nạp stylesheet. */
body .button#place_order,
body .button.checkout,
body .checkout-button,
body .single_add_to_cart_button.button,
body .sticky-add-to-cart-select-options-button {
	background-color: #141414 !important;
	background-image: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}
body .button#place_order:hover,
body .button.checkout:hover,
body .checkout-button:hover,
body .single_add_to_cart_button.button:hover,
body .sticky-add-to-cart-select-options-button:hover {
	background-color: #C8A464 !important;
}

/* ---------- 3. Product card ---------- */
/* Scope đúng .product-small (card trong grid) — KHÔNG dùng bare .product-title vì PDP h1 cũng
   mang class product-title (product_title product-title entry-title), lúc trước bị 15px lây
   sang PDP (round-3 bug, xem mục 8 để hiểu vì sao PDP h1 bị nhỏ + cách sửa). */
.product-small .product-title,
.product-small .product-title a {
	color: #1f1f1f !important;
	font-family: 'Cormorant Garamond', serif;
	font-size: 15px;
	font-weight: 500;
}
.product-small .price,
.product-small .price .woocommerce-Price-amount {
	color: #6f6a63;
}
.product-small .wishlist-button {
	opacity: .55;
	font-size: .85em;
}

/* Sao rating — vàng đồng antique thay vì màu mặc định Flatsome. */
.star-rating {
	color: #C8A464;
}

/* ---------- 4. Hero overlay ---------- */
.banner h1 {
	font-size: 3em; /* base .banner h1 mặc định 3.5em — giảm ~15% */
}
.banner .text-box-content p,
.banner p {
	color: #d9d4cc;
	font-size: 15px;
}

/* ---------- 5. Announcement bar (đã có từ P1-2, chỉnh màu/size theo token mới) ---------- */
.cnoles-announce-bar__inner,
.cnoles-announce-bar {
	color: #d9d4cc !important;
	font-size: 12px !important;
	letter-spacing: 1px !important;
}

/* ---------- 6. Trust badges PDP (đã có, chỉnh muted + heading nhỏ) ---------- */
.cnoles-trust-item {
	color: #6f6a63;
}
.cnoles-trust-item strong {
	font-size: 12px;
	letter-spacing: .5px;
	font-weight: 600;
	color: #1f1f1f;
}
.cnoles-trust-item svg {
	color: #6f6a63;
}

/* ---------- 7. Round 2 bổ sung: trust line checkout/cart + label switcher header ---------- */

/* Trust line "🔒 Secure SSL Checkout · Easy 14-Day Returns" (P1-4, khác .cnoles-trust-item ở
   mục 6 — đây là dòng ở cart/checkout, không phải badge PDP). */
.cnoles-trust-line {
	color: #6f6a63 !important;
}

/* Label switcher "EN · $ USD" — CHỈ áp cho bản desktop trong header (nền đen #141414, #d9d4cc
   đủ tương phản). KHÔNG áp cho bản mobile off-canvas (.lang-currency-switcher-mobile nằm trên
   nền sáng sidebar-menu — #d9d4cc sẽ mờ/khó đọc, để nguyên màu chữ mặc định của sidebar). */
.lang-currency-switcher > a.nav-top-link {
	color: #d9d4cc;
}
.lang-currency-switcher > a.nav-top-link:hover,
.lang-currency-switcher.current-dropdown > a.nav-top-link {
	color: #C8A464;
}

/* ---------- 8. Round 3 ---------- */

/* PDP h1 (product_title) bị lây font-size:15px từ rule .product-title ở mục 3 — WooCommerce
   render h1 với class "product_title product-title entry-title" nên bare .product-title khớp
   luôn cả PDP. Mục 3 đã scope lại .product-small .product-title (card grid, không đụng PDP
   nữa) — ở đây set riêng kích thước PDP h1 thật, "body" phía trước tăng specificity đủ thắng
   .product-title.product_title{font-size:22px} trong child-enhancements.css (mobile-only,
   file cũ không sửa). */
body .product-title.product_title {
	font-size: 30px !important;
	line-height: 1.25 !important;
}
@media (max-width: 549px) {
	body .product-title.product_title {
		font-size: 24px !important;
	}
}

/* Nút trên nền tối (.dark — convention Flatsome cho section tối, xác nhận qua flatsome.css:
   ".dark .button{color:#fff}"; hero + section "Find Your Perfect Bag" đều bọc trong
   section/div class "dark"): nút đen-trên-đen-nền sẽ chìm → đảo màu nền sáng/chữ đen, hover
   vẫn theo token vàng đồng. !important vì phải thắng .button{background:#141414!important}
   ở mục 2 — .dark .button có specificity cao hơn (2 lớp) NHƯNG mục 2 đã important nên vẫn
   cần important ở đây để thắng theo tie-break specificity giữa 2 rule cùng important. */
body .dark .button,
body .banner .button {
	background-color: #faf8f5 !important;
	color: #141414 !important;
}
body .dark .button:hover,
body .banner .button:hover {
	background-color: #C8A464 !important;
	color: #fff !important;
}

/* ---------- 9. Round 4 — polish sâu ---------- */

/* 1) Khoảng thở: .section thật hiện tại chỉ padding:30px 0 (không phải 60px như giả định ban
   đầu — grep flatsome.css xác nhận, không có override responsive nào khác). Tăng ~2x lên 60px
   desktop (≥850px, breakpoint Flatsome) cho cảm giác thoáng hơn; mobile giữ nguyên 30px gốc
   (không đụng — "giữ mobile vừa phải"). Chỉ set padding-top/bottom, không đụng padding-left/
   right (rule riêng .container .section{padding-left/right:30px} không nằm trong scope này). */
@media screen and (min-width: 850px) {
	body .section {
		padding-top: 60px !important;
		padding-bottom: 60px !important;
	}
}

/* Product grid gap rộng hơn (~40%): gốc .row-small>.col{padding:0 9.8px 19.6px}. */
body .row-small > .col {
	padding: 0 14px 28px !important;
}

/* 2) Search bar header: ghost style thay pill xám. Rule gốc thắng hiện tại là
   ".dark .form-flat input:not([type=submit]){background-color:hsla(0,0%,100%,.2)!important}"
   trong flatsome.css (đúng 3 class + 1 element = specificity cao) — cần selector khớp/khớp hơn
   + !important để thắng chắc, không phụ thuộc thứ tự nạp. */
body .ux-search-box.form-flat input.search-field,
body .searchform-wrapper input.search-field {
	background-color: transparent !important;
	border: 1px solid #3a3a3a !important;
	border-radius: 0 !important;
	color: #d9d4cc !important;
	box-shadow: none !important;
}
body .ux-search-box.form-flat input.search-field::placeholder {
	color: #d9d4cc;
	opacity: .6;
}
body .ux-search-box.form-flat input.search-field:focus {
	border-color: #C8A464 !important;
}
body .searchform .button.icon,
body .ux-search-submit {
	background-color: transparent !important;
	color: #d9d4cc !important;
}

/* 3) Badge sale — hình chữ nhật viền vàng đồng thay vì tròn đen. Giữ nguyên text đa ngữ, chỉ
   restyle .badge-inner.on-sale thật (markup xác nhận: .badge.badge-circle > .badge-inner.
   secondary.on-sale > span.onsale). Scope .on-sale để không đụng badge khác (New/Hot...). */
body .badge-inner.on-sale {
	background-color: transparent !important;
	border: 1px solid #C8A464 !important;
	border-radius: 0 !important;
	color: #C8A464 !important;
	width: auto !important;
	height: auto !important;
	padding: 4px 8px !important;
	display: table !important;
}
body .badge-inner.on-sale .onsale {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #C8A464 !important;
}

/* 4) "Add to wishlist" text trên card: ẨN sẽ thu hẹp tap-target của .add_to_wishlist (icon+text
   dùng chung 1 thẻ <a>) — theo đúng phương án dự phòng đã nêu: thu nhỏ + muted thay vì ẩn. */
body .product-small .add_to_wishlist span {
	font-size: 11px;
	color: #9a948c;
}
body .product-small .box-image,
body .product-small .add_to_wishlist,
body .product-small .wishlist-button {
	transition: all .3s ease;
}

/* 5) Nav desktop hover: underline vàng đồng, bỏ đổi màu (color:inherit thắng bất kể rule màu
   hover nào đang có, không cần biết chính xác nguồn — .nav>li>a:hover hiện đổi sang
   hsla(0,0%,7%,.85) trong flatsome.css). LƯU Ý: menu category chính (SHOP/HANDBAGS/...) nằm
   trong #wide-nav (header-bottom), KHÔNG phải #masthead (đó là top row logo/search/account) —
   #masthead .nav>li>a:hover ban đầu không khớp gì cả. Dùng chung class .header-nav (cả 2 nav
   đều có) để khớp cả hai chỗ. */
body .header-nav > li > a:hover {
	color: inherit !important;
	text-decoration: underline;
	text-decoration-color: #C8A464;
	text-decoration-thickness: 1px;
	text-underline-offset: 6px;
}

/* 6) Footer: heading serif + tracking, link muted → vàng đồng khi hover. Nền giữ nguyên. */
body #footer .widget-title {
	font-family: 'Cormorant Garamond', serif;
	font-size: 14px;
	letter-spacing: 1px;
	text-transform: uppercase;
}
body #footer .widget a {
	color: #9a948c;
}
body #footer .widget a:hover {
	color: #C8A464;
}

/* 7) Sao rating: đã set màu #C8A464 ở mục 3 (round 1) — verify vẫn ăn, chỉ giảm thêm 1px. */
.star-rating {
	font-size: 15px;
}

/* 8) Quantity input + variation select: viền be nhạt, bo 0, focus vàng đồng. */
body .quantity input.qty,
body .variations select {
	border: 1px solid #d5d0c8 !important;
	border-radius: 0 !important;
}
body .quantity input.qty:focus,
body .variations select:focus {
	border-color: #C8A464 !important;
	outline: none;
}

/* 9) Breadcrumb: nhỏ, uppercase, tracking rộng, màu muted (giữ uppercase — class .uppercase đã
   có sẵn trên .woocommerce-breadcrumb). */
body .woocommerce-breadcrumb {
	font-size: 11px;
	letter-spacing: 1.5px;
	color: #9a948c;
}
body .woocommerce-breadcrumb a {
	color: #9a948c;
}

/* ---------- 10. Round 5 — cart/checkout/account/mobile/404/notice (round cuối chuỗi luxury) ---------- */

/* Input text dùng chung (checkout fields, coupon cart, my-account login/register) — WooCommerce
   core dùng đồng nhất class .input-text ở cả 3 nơi này. */
body .input-text {
	border: 1px solid #d5d0c8 !important;
	border-radius: 0 !important;
}
body .input-text:focus {
	border-color: #C8A464 !important;
	outline: none;
}

/* 1) Cart page */
body .shop_table thead th {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #9a948c;
}
body .woocommerce-cart-form .remove {
	color: #9a948c !important;
}
body .woocommerce-cart-form .remove:hover {
	color: #C8A464 !important;
}
body .cart_totals h2,
body .coupon .widget-title {
	font-family: 'Cormorant Garamond', serif;
}
/* Nút Apply coupon: outline thay vì đen đặc — phân biệt với Proceed to Checkout (đen đặc). */
body button[name="apply_coupon"] {
	background-color: transparent !important;
	border: 1px solid #141414 !important;
	color: #141414 !important;
}
body button[name="apply_coupon"]:hover {
	background-color: #141414 !important;
	color: #fff !important;
}
body .shipping__list_label {
	font-size: 13px;
}

/* 2) Checkout */
body.woocommerce-checkout h3 {
	font-size: 20px;
}
body ul.payment_methods {
	border: 1px solid #e8e4de;
	border-bottom-color: #e8e4de !important;
}
/* Place order full-width đen — verify đã ăn từ round 1 (.button#place_order); không cần rule mới,
   chỉ xác nhận qua browser (xem report). */

/* 3) My Account — input đã dùng chung .input-text ở trên. Nút login/register dùng .button chung
   (đã đen từ round 1). Nav account (chỉ thấy khi đăng nhập — style theo class chuẩn WooCommerce,
   chưa verify trực tiếp vì không có tài khoản test sẵn). */
body .woocommerce-MyAccount-navigation-link a {
	color: #9a948c;
}
body .woocommerce-MyAccount-navigation-link a:hover,
body .woocommerce-MyAccount-navigation-link.is-active a {
	color: #C8A464;
}

/* 4) Mobile off-canvas menu — nền sáng thật (không có rule .mobile-sidebar background-color nào
   trong flatsome.css → mặc định trắng), dùng divider #e8e4de. */
body .mobile-sidebar .nav-sidebar > li {
	font-size: 15px;
	border-top: 1px solid #e8e4de;
}
body .lang-currency-switcher-mobile .lcs-heading {
	letter-spacing: 1px;
}
/* Announcement bar mobile: đảm bảo không quá 32px (font 12px + padding hiện 8px trên/dưới ~ sát
   32px) — giảm nhẹ padding dọc trên mobile cho chắc. */
@media (max-width: 549px) {
	body .cnoles-announce-bar {
		padding-top: 6px !important;
		padding-bottom: 6px !important;
	}
}

/* 5) 404 + search results: h1 đã serif từ rule chung (mục 1); nút "Return to shop" dùng .button
   chung (đã đen từ round 1) — không cần rule riêng, chỉ verify. */

/* 6) Toast/notice WooCommerce (added-to-cart, error, info) — bỏ border-top màu chói (xanh lá/
   xanh dương/đỏ mặc định), đồng bộ 1 kiểu neutral + accent vàng đồng. */
body .woocommerce-message,
body .woocommerce-error,
body .woocommerce-info,
body .woocommerce-notice {
	background-color: #faf8f5 !important;
	color: #1f1f1f !important;
	border-top: none !important;
	border-left: 2px solid #C8A464 !important;
}
body .woocommerce-message a.button,
body .woocommerce-error a.button,
body .woocommerce-info a.button {
	background-color: #141414 !important;
	color: #fff !important;
}
