/*
Theme Name: ART Martin
Theme URI: https://martin.vn
Author: Web22
Author URI: https://web22.dev
Description: Custom Tailwind CSS v4 Theme for ART Martin (Hi-End Photobook)
Version: 1.0.0
Text Domain: art-martin
Requires at least: 6.0
Requires PHP: 8.0
*/

/* ============================================================
   GOOGLE FONTS & ICONS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL,GRAD,opsz@300,0..1,0,24&display=swap');

/* ============================================================
   GLOBAL BASE RESETS
   ============================================================ */

/* Chữ chỉ dành cho trình đọc màn hình — không hiện ra mắt thường */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.screen-reader-text:focus {
	position: static !important;
	width: auto;
	height: auto;
	margin: 0;
	clip: auto;
	white-space: normal;
}

/* Font rendering */
body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    color: #374151;
}

/* Headings — Inter SemiBold */
h1, h2, h3, h4, h5, h6,
.font-headline {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 600;
    line-height: 1.25;
    color: #1f2937;
}

/* Body font class */
.font-body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ============================================================
   ART CONTAINER — chuẩn width toàn site
   Dùng thay cho: class="container mx-auto px-4" style="max-width:Xpx"
   ============================================================ */
.art-container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    box-sizing: border-box;
}

/* ── Loại bỏ gạch chân mặc định của WordPress ── */
a {
    text-decoration: none;
    color: inherit;
}
a:hover {
    text-decoration: none;
}

/* Nav links */
nav a,
.site-logo a,
header a {
    text-decoration: none !important;
}

/* WooCommerce links */
.woocommerce a,
.woocommerce-page a {
    text-decoration: none;
}
.woocommerce a:hover {
    text-decoration: none;
}

/* Footer links */
footer a {
    text-decoration: none;
}

/* Giữ gạch chân cho nội dung bài viết */
.entry-content a,
.woocommerce-product-details__short-description a,
.woocommerce-Tabs-panel a {
    text-decoration: underline;
    color: #901C1C;
}


.group:hover .art-card-overlay {
    background: rgba(0, 0, 0, 0.25) !important;
}
.group:hover .art-card-title {
    transform: translateY(0) !important;
}

/* ============================================================
   WOOCOMMERCE GLOBAL RESETS
   ============================================================ */

/* Reset WC float layout — chỉ áp dụng cho archive/shop page, KHÔNG áp cho related products */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    float: none !important;
    margin: 0 !important;
}

/* ── Archive/Shop: dùng grid custom .am-product-grid ──
   ul.products bên trong grid container kế thừa display:contents
   để các li.product trực tiếp là grid-items ── */
.am-product-grid ul.products {
    display: contents;
    list-style: none;
    padding: 0;
    margin: 0;
}
.am-product-grid ul.products li.product {
    width: auto !important;
}

/* ── Related & Upsell trên single product ──
   Dùng grid 4 cột để hiển thị hình ảnh đồng đều ── */
.woocommerce .related.products ul.products,
.woocommerce .upsells.products ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1.5rem !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Ẩn các clearfix của WooCommerce để không làm hỏng Grid */
.woocommerce .related.products ul.products::before,
.woocommerce .related.products ul.products::after,
.woocommerce .upsells.products ul.products::before,
.woocommerce .upsells.products ul.products::after {
    display: none !important;
}

.woocommerce .related.products ul.products li.product,
.woocommerce .upsells.products ul.products li.product {
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    margin: 0 !important;
}

/* Ẩn tiêu đề mặc định của Woo để dùng tiêu đề custom phía trên */
.woocommerce .related.products > h2,
.woocommerce .upsells.products > h2 {
    display: none !important;
}

/* ============================================================
   ADD TO CART BUTTON
   ============================================================ */
.am-add-to-cart-btn a.button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    background-color: #1f2937 !important;
    color: #fff !important;
    font-family: inherit !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    padding: 0.6rem 1.25rem !important;
    border-radius: 2px !important;
    border: none !important;
    cursor: pointer !important;
    transition: background-color 0.25s ease !important;
    display: inline-block !important;
    width: 100% !important;
    text-align: center !important;
}

.am-add-to-cart-btn a.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
    background-color: #901C1C !important;
    color: #fff !important;
}

/* Added-to-cart state */
.woocommerce a.button.added {
    background-color: #16a34a !important;
}
.woocommerce a.button.loading::after {
    border-top-color: #fff !important;
}

/* Product Info & Form Wrapper */
.woocommerce div.product .product-add-to-cart-wrapper form.cart {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Ẩn native table.variations — keep in DOM for WC JS to work,
   but show only custom swatches built by our JS */
.custom-swatches-wrapper table.variations,
.custom-swatches-wrapper form.variations_form table.variations {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* Ẩn luôn woocommerce variation current display (Kích thước: 30x40) */
.custom-swatches-wrapper .woocommerce-variation.single_variation,
.custom-swatches-wrapper .woocommerce-variation-price,
.custom-swatches-wrapper .woocommerce-variation-availability {
    display: none !important;
}

/* Giá đầu trang đổi theo biến thể — HTML của Woo phải kế thừa cỡ chữ, màu khối giá */
.price-wrapper .price,
.price-wrapper .woocommerce-Price-amount,
.price-wrapper ins,
.price-wrapper bdi {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    text-decoration: none;
}
.price-wrapper del {
    opacity: 0.45;
    font-weight: 600;
    margin-right: 0.5rem;
}

/* ============================================================
   MINIMALIST FLOATING SLIDER
   ============================================================ */
#main-product-image {
    transition: opacity 0.3s ease-in-out !important;
}
.am-slider-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.9);
    color: #1f2937;
    border-radius: 50%;
    opacity: 0;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    z-index: 10;
    border: none;
    cursor: pointer;
    outline: none;
}
.am-slider-nav-btn:hover {
    background-color: #ffffff;
}
#am-product-gallery:hover .am-slider-nav-btn {
    opacity: 1;
}
#am-slider-prev {
    left: 1.5rem;
    transform: translateY(-50%) translateX(-10px);
}
#am-product-gallery:hover #am-slider-prev {
    transform: translateY(-50%) translateX(0);
}
#am-slider-next {
    right: 1.5rem;
    transform: translateY(-50%) translateX(10px);
}
#am-product-gallery:hover #am-slider-next {
    transform: translateY(-50%) translateX(0);
}

#am-slider-indicators {
    position: absolute;
    bottom: 1.5rem;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    z-index: 10;
}

/* Swatch container do JS tạo */
.am-swatches-container {
    margin-bottom: 1.5rem;
}
.am-swatches-container .am-swatch-label {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #6b7280;
    margin-bottom: 0.625rem;
    margin-top: 1.25rem;
}
.am-swatches-container .am-swatch-label span.am-swatch-selected-val {
    color: #111827;
    font-weight: 700;
}
.am-swatch-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.am-swatch-btn {
    padding: 0.4rem 0.875rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #374151;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
    line-height: 1.4;
    letter-spacing: 0.02em;
}
.am-swatch-btn:hover {
    border-color: #901C1C;
    color: #901C1C;
}
.am-swatch-btn.is-active {
    border-color: #901C1C;
    background: #901C1C;
    color: #ffffff;
    font-weight: 700;
}
.woocommerce div.product .product-add-to-cart-wrapper form.cart table.variations {
    margin-bottom: 0;
    width: 100%;
}
.woocommerce div.product .product-add-to-cart-wrapper form.cart table.variations tr {
    display: flex;
    flex-direction: column;
    margin-bottom: 2rem;
}

/* Quantity & Button Inline Wrapper */
.woocommerce div.product .product-add-to-cart-wrapper form.cart div.woocommerce-variation-add-to-cart,
.woocommerce div.product .product-add-to-cart-wrapper form.cart:not(.variations_form) {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Quantity Box */
.woocommerce div.product .product-add-to-cart-wrapper form.cart div.quantity {
    display: flex;
    align-items: center;
    border: 1px solid #e5e7eb;
    height: 3.5rem; /* 56px */
    padding: 0 0.5rem;
    margin: 0;
    float: none;
    border-radius: 0;
}
.woocommerce div.product .product-add-to-cart-wrapper form.cart div.quantity input.qty {
    width: 3rem;
    text-align: center;
    border: none !important;
    background: transparent;
    font-weight: 700;
    padding: 0;
    height: auto;
    font-size: 1rem;
    color: #1f2937;
    -moz-appearance: textfield;
}
.woocommerce div.product .product-add-to-cart-wrapper form.cart div.quantity input.qty::-webkit-outer-spin-button,
.woocommerce div.product .product-add-to-cart-wrapper form.cart div.quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.woocommerce div.product .product-add-to-cart-wrapper form.cart div.quantity input.qty:focus {
    outline: none;
    box-shadow: none;
}

/* Custom Minus / Plus buttons */
.am-qty-btn {
    background: none;
    border: none;
    padding: 0 0.5rem;
    cursor: pointer;
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.am-qty-btn:focus { outline: none; }
.am-qty-btn:hover { color: #901C1C; }

/* Submit Button */
.woocommerce div.product .product-add-to-cart-wrapper form.cart button.button.alt,
.woocommerce div.product .product-add-to-cart-wrapper form.cart button.single_add_to_cart_button {
    flex: 1;
    height: 3.5rem; /* 56px */
    background-color: #901C1C !important;
    color: #fff !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    font-size: 0.875rem !important;
    border-radius: 0 !important;
    border: none !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: all 0.4s !important;
    float: none;
    margin: 0;
    padding: 0 1rem;
    font-family: 'Inter', sans-serif !important;
}
.woocommerce div.product .product-add-to-cart-wrapper form.cart button.single_add_to_cart_button:hover {
    background-color: #ba282b !important;
}
.woocommerce div.product .product-add-to-cart-wrapper form.cart button.single_add_to_cart_button::after {
    content: 'shopping_bag';
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    font-size: 1.25rem;
    margin-left: 0.75rem;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-block;
    vertical-align: middle;
}
.woocommerce div.product .product-add-to-cart-wrapper form.cart button.single_add_to_cart_button:hover::after {
    transform: translateX(4px);
}
.woocommerce div.product .product-add-to-cart-wrapper form.cart button.single_add_to_cart_button { 
    color: #fff !important; 
    font-size: 0.875rem !important;
}
.woocommerce div.product .product-add-to-cart-wrapper .woocommerce-product-details__short-description,
.woocommerce div.product .product-add-to-cart-wrapper p.price {
    display: none !important;
}


/* Price */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color: #901C1C !important;
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    margin-bottom: 1.25rem !important;
}

/* Sale badge */
.woocommerce span.onsale {
    background-color: #901C1C !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    border-radius: 2px !important;
    min-width: auto !important;
    min-height: auto !important;
    line-height: 1 !important;
    padding: 0.35rem 0.6rem !important;
}

/* Short description + Product Description: ul li phải xuống hàng đúng */
.woocommerce div.product .woocommerce-product-details__short-description,
.content-description {
    font-size: 0.9rem !important;
    color: #4b5563 !important;
    line-height: 1.8 !important;
    margin-bottom: 1.5rem !important;
}
.woocommerce div.product .woocommerce-product-details__short-description ul,
.woocommerce div.product .woocommerce-product-details__short-description ol,
.content-description ul,
.content-description ol {
    list-style: disc !important;
    padding-left: 1.5rem !important;
    margin: 0.75rem 0 1rem !important;
}
.woocommerce div.product .woocommerce-product-details__short-description ul li,
.woocommerce div.product .woocommerce-product-details__short-description ol li,
.content-description ul li,
.content-description ol li {
    display: list-item !important;
    margin-bottom: 0.375rem !important;
    color: #4b5563 !important;
    font-size: 0.9rem !important;
    line-height: 1.7 !important;
}
.content-description ol { list-style: decimal !important; }
.content-description strong { color: #1f2937 !important; font-weight: 700 !important; }
.content-description p { margin-bottom: 0.875rem !important; }

/* Custom swatch button (variation options) */
.custom-swatch-group button {
    padding: 0.5rem 1.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #374151;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.custom-swatch-group button:hover {
    border-color: #901C1C;
    color: #901C1C;
}
.custom-swatch-group button.active {
    border-color: #901C1C;
    background: #901C1C;
    color: #ffffff;
}

/* Quantity input */
.woocommerce div.product form.cart .qty {
    width: 70px !important;
    padding: 0.5rem !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 2px !important;
    text-align: center !important;
    font-size: 1rem !important;
}

/* Add to cart single button */
.woocommerce div.product form.cart .single_add_to_cart_button {
    background-color: #901C1C !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 0.875rem !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    padding: 0.75rem 2rem !important;
    border-radius: 2px !important;
    border: none !important;
    cursor: pointer !important;
    transition: background-color 0.25s !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover {
    background-color: #7a1717 !important;
}

/* Product tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs {
    padding: 0 !important;
    border-bottom: 2px solid #e5e7eb !important;
    margin-bottom: 1.5rem !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    color: #6b7280 !important;
    padding: 0.75rem 1.25rem !important;
    display: block !important;
    letter-spacing: 0.05em !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: #901C1C !important;
    border-bottom: 2px solid #901C1C !important;
    margin-bottom: -2px !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
    display: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Related products */
.woocommerce .related.products > h2,
.woocommerce .upsells.products > h2 {
    font-family: var(--font-headline, Georgia, serif) !important;
    font-size: 1.375rem !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    border-bottom: 2px solid #e5e7eb !important;
    padding-bottom: 0.75rem !important;
    margin-bottom: 1.5rem !important;
}

/* Product images gallery */
.woocommerce div.product div.images img {
    border-radius: 2px !important;
}
.woocommerce div.product div.images .flex-control-thumbs li img {
    border-radius: 2px !important;
    border: 2px solid transparent !important;
    transition: border-color 0.2s !important;
}
.woocommerce div.product div.images .flex-control-thumbs li img:hover,
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active {
    border-color: #901C1C !important;
}

/* ============================================================
   BREADCRUMB — RankMath Styling
   ============================================================ */

/* ── Base wrapper ── */
.am-breadcrumb-wrap {
    padding: 0.85rem 0;
}
.am-breadcrumb-wrap nav,
.am-breadcrumb-wrap p {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    color: #9ca3af;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.6;
}

/* ── Links ── */
.am-breadcrumb-wrap a {
    color: #6b7280;
    text-decoration: none;
    transition: color 0.25s ease;
    position: relative;
}
.am-breadcrumb-wrap a::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 0;
    height: 1px;
    background: #901C1C;
    transition: width 0.3s ease;
}
.am-breadcrumb-wrap a:hover {
    color: #901C1C;
}
.am-breadcrumb-wrap a:hover::after {
    width: 100%;
}

/* ── Separator ── */
.am-breadcrumb-wrap .separator {
    color: #d1d5db;
    font-size: 0.6rem;
    margin: 0 0.15rem;
    user-select: none;
}

/* ── Current page (last item, not a link) ── */
.am-breadcrumb-wrap .last,
.am-breadcrumb-wrap span.last,
.am-breadcrumb-wrap .current-item {
    color: #374151;
    font-weight: 600;
}

/* ── HERO variant: breadcrumb on dark background ── */
.am-breadcrumb-hero nav,
.am-breadcrumb-hero p {
    color: rgba(255,255,255,0.5);
}
.am-breadcrumb-hero a {
    color: rgba(255,255,255,0.55);
}
.am-breadcrumb-hero a::after {
    background: rgba(255,255,255,0.6);
}
.am-breadcrumb-hero a:hover {
    color: #f5c5c5;
}
.am-breadcrumb-hero .separator {
    color: rgba(255,255,255,0.25);
}
.am-breadcrumb-hero .last,
.am-breadcrumb-hero span.last,
.am-breadcrumb-hero .current-item {
    color: rgba(255,255,255,0.8);
    font-weight: 600;
}

/* ── Mobile: smaller text, allow wrap ── */
@media (max-width: 767px) {
    .am-breadcrumb-wrap nav,
    .am-breadcrumb-wrap p {
        font-size: 0.65rem;
        gap: 0.25rem;
    }
    .am-breadcrumb-wrap a::after {
        display: none;
    }
}

/* ============================================================
   RESULT COUNT & ORDERING
   ============================================================ */
.woocommerce .woocommerce-result-count {
    color: #6b7280 !important;
    font-size: 0.85rem !important;
}
.woocommerce-ordering select {
    border: 1px solid #e5e7eb !important;
    border-radius: 2px !important;
    padding: 0.4rem 0.75rem !important;
    font-size: 0.8rem !important;
    color: #374151 !important;
    appearance: auto !important;
}

/* ============================================================
   PAGINATION
   ============================================================ */
.woocommerce nav.woocommerce-pagination ul {
    display: flex !important;
    gap: 0.4rem !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2.25rem !important;
    height: 2.25rem !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 2px !important;
    font-size: 0.85rem !important;
    color: #374151 !important;
    text-decoration: none !important;
    transition: all 0.2s !important;
}
.woocommerce nav.woocommerce-pagination ul li a:hover {
    background: #901C1C !important;
    border-color: #901C1C !important;
    color: #fff !important;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
    background: #1f2937 !important;
    border-color: #1f2937 !important;
    color: #fff !important;
    font-weight: 700 !important;
}

/* ============================================================
   NOTICES (Flash messages)
   ============================================================ */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    border-top: 3px solid #901C1C !important;
    border-radius: 0 !important;
    font-size: 0.875rem !important;
}
.woocommerce-message::before {
    color: #901C1C !important;
}

/* ============================================================
   RESPONSIVE — Mobile
   ============================================================ */
@media (max-width: 768px) {
    .woocommerce div.product {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    .am-product-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }
}

@media (max-width: 480px) {
    .am-product-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================
   SHOP ARCHIVE — MOBILE FILTER DRAWER
   ============================================================ */
@media (max-width: 1023px) {
    .am-filter-drawer {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 85%;
        max-width: 360px;
        background: #ffffff;
        z-index: 50;
        overflow-y: auto;
        padding: 1.5rem;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 4px 0 25px rgba(0,0,0,0.15);
    }
    .am-filter-drawer.is-open {
        transform: translateX(0);
    }
    #am-filter-overlay {
        transition: opacity 0.3s ease;
    }
}
@media (min-width: 1024px) {
    #am-filter-overlay {
        display: none !important;
    }
}

/* Mobile catalog ordering on filter toggle bar */
.mobile-catalog-ordering .woocommerce-ordering {
    margin: 0;
}
.mobile-catalog-ordering select {
    font-size: 0.7rem !important;
    padding: 0.35rem 1.5rem 0.35rem 0.5rem !important;
}

/* Product card text — smaller for 2-column mobile grid */
@media (max-width: 639px) {
    .product-card h3,
    .product-card h3 a {
        font-size: 0.82rem !important;
        line-height: 1.3 !important;
    }
    .am-price-wrapper {
        font-size: 0.78rem !important;
    }
}

/* ============================================================
   GLOBAL MEDIA & LAYOUT OVERFLOW FIX
   Ngăn ảnh / video / iframe / block tràn ra ngoài layout
   trên mọi thiết bị, đặc biệt Mobile.
   ============================================================ */

/* 1. Tắt scroll ngang toàn trang
   Chỉ đặt trên body — KHÔNG đặt trên html để tránh lệch layout.
   KHÔNG dùng max-width:100vw vì 100vw tính cả scrollbar (15px)
   khiến content bị center lệch so với vùng nhìn thấy thực tế. */
body {
    overflow-x: hidden;
}

/* 2. Ép tất cả media không vượt quá container cha.
   KHÔNG đưa svg vào đây — svg icon dùng width/height cố định
   nên height:auto sẽ làm vỡ layout header/nav. */
img,
video,
audio,
canvas,
embed,
object,
iframe {
    max-width: 100%;
    height: auto;
}

/* 3. Đặc biệt: iframe embed (YouTube, Vimeo…) — giữ tỉ lệ 16:9 */
.wp-block-embed__wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
}
.wp-block-embed__wrapper iframe,
.wp-block-embed__wrapper embed,
.wp-block-embed__wrapper object {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
}

/* 4. WordPress core content classes */
.entry-content,
.post-content,
.art-product-content,
.woocommerce-product-details__short-description,
.woocommerce-Tabs-panel {
    overflow-x: hidden;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* 5. Gutenberg alignment blocks — giới hạn trên mobile */
.entry-content .alignwide,
.entry-content .alignfull,
.post-content .alignwide,
.post-content .alignfull {
    max-width: 100%;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* 6. Gutenberg: block image */
.wp-block-image {
    max-width: 100%;
    overflow: hidden;
}
.wp-block-image img {
    max-width: 100%;
    height: auto;
    display: block;
}
.wp-block-image figcaption {
    font-size: 0.78rem;
    color: #9ca3af;
    text-align: center;
    margin-top: 0.4rem;
}

/* 7. Gutenberg: Gallery */
.wp-block-gallery {
    max-width: 100%;
    overflow: hidden;
}
.wp-block-gallery img {
    max-width: 100%;
    height: auto;
}

/* 8. Gutenberg: Media & Text block */
.wp-block-media-text {
    max-width: 100%;
    overflow: hidden;
}
@media (max-width: 600px) {
    .wp-block-media-text {
        grid-template-columns: 1fr !important;
    }
    .wp-block-media-text .wp-block-media-text__media {
        margin-bottom: 1rem;
    }
}

/* 9. Gutenberg: Table block — scroll ngang trong chính nó */
.wp-block-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    display: block;
    max-width: 100%;
}
.wp-block-table table {
    min-width: 400px; /* bảng nhỏ nhất trước khi scroll */
    border-collapse: collapse;
    width: 100%;
}
.wp-block-table th,
.wp-block-table td {
    padding: 0.6rem 0.875rem;
    border: 1px solid #e5e7eb;
    font-size: 0.875rem;
    white-space: nowrap;
}

/* HTML table thông thường trong content */
.entry-content table,
.post-content table,
.art-product-content table {
    overflow-x: auto;
    display: block;
    max-width: 100%;
    border-collapse: collapse;
}

/* 10. Code / Pre — wrap thay vì overflow ngang */
pre,
code,
.wp-block-code {
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    font-size: 0.82rem;
    background: #f3f4f6;
    border-radius: 4px;
    padding: 0.2em 0.45em;
}
pre,
.wp-block-code pre {
    padding: 1rem 1.25rem;
    overflow-x: auto;
}

/* 11. Gutenberg: Cover block */
.wp-block-cover {
    max-width: 100%;
    overflow: hidden;
}

/* 12. Gutenberg: Columns block — stack trên mobile */
@media (max-width: 600px) {
    .wp-block-columns {
        flex-direction: column !important;
    }
    .wp-block-column {
        flex-basis: 100% !important;
        min-width: 100% !important;
        margin-left: 0 !important;
    }
}

/* 13. Fix inline width="" attribute trên img */
.entry-content img[width],
.post-content img[width],
.art-product-content img[width] {
    width: auto !important;
    max-width: 100% !important;
}


/* 15. Responsive video wrapper helper class */
.art-video-wrap {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 8px;
}
.art-video-wrap iframe,
.art-video-wrap video {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
}

/* ============================================================
   MOBILE-SPECIFIC CONTENT IMPROVEMENTS
   ============================================================ */
@media (max-width: 767px) {

    /* Căn lại font size trong bài viết */
    .entry-content,
    .post-content,
    .art-product-content {
        font-size: 0.9rem;
        line-height: 1.85;
    }

    /* Heading trong content nhỏ hơn trên mobile */
    .entry-content h1,
    .post-content h1,
    .art-product-content h1 { font-size: 1.4rem; }

    .entry-content h2,
    .post-content h2,
    .art-product-content h2 { font-size: 1.2rem; }

    .entry-content h3,
    .post-content h3,
    .art-product-content h3 { font-size: 1.05rem; }

    /* Bảng trong content — scroll ngang */
    .entry-content table,
    .post-content table {
        font-size: 0.8rem;
    }

    /* Gallery — 2 cột trên mobile */
    .wp-block-gallery {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }

    /* Full-width embed */
    .wp-block-embed {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* ============================================================
   SINGLE PRODUCT — MOBILE RESPONSIVE (content-single-product)
   ============================================================ */

/* ── Related Products: responsive grid ── */
@media (max-width: 900px) {
    .woocommerce .related.products ul.products,
    .woocommerce .upsells.products ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }
}

@media (max-width: 767px) {

    /* ── Gallery: giảm aspect-ratio ── */
    #am-product-gallery {
        aspect-ratio: 1/1 !important;
    }

    /* ── Slider nav arrows: luôn hiện trên mobile (không có hover) ── */
    .am-slider-nav-btn {
        opacity: 1 !important;
        width: 2rem;
        height: 2rem;
    }
    #am-slider-prev {
        left: 0.75rem !important;
        transform: translateY(-50%) !important;
    }
    #am-slider-next {
        right: 0.75rem !important;
        transform: translateY(-50%) !important;
    }

    /* ── Tab buttons: padding nhỏ hơn ── */
    .csp-tabs-row {
        gap: 0;
    }
    .csp-tabs-row button,
    div[style*="overflow-x:auto"] button {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        font-size: 0.65rem !important;
    }

    /* ── Quantity + Button: stack dọc trên mobile ── */
    .woocommerce div.product .product-add-to-cart-wrapper form.cart div.woocommerce-variation-add-to-cart,
    .woocommerce div.product .product-add-to-cart-wrapper form.cart:not(.variations_form) {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .woocommerce div.product .product-add-to-cart-wrapper form.cart div.quantity {
        width: 100% !important;
        justify-content: center;
    }
    .woocommerce div.product .product-add-to-cart-wrapper form.cart button.button.alt,
    .woocommerce div.product .product-add-to-cart-wrapper form.cart button.single_add_to_cart_button {
        width: 100% !important;
        flex: none !important;
    }

    /* ── Related Products: 2 cột ── */
    .woocommerce .related.products ul.products,
    .woocommerce .upsells.products ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }

    /* ── Related product images: nhỏ hơn ── */
    .woocommerce .related.products ul.products li.product img,
    .woocommerce .upsells.products ul.products li.product img {
        aspect-ratio: 3/4;
        object-fit: cover;
    }

    /* ── Product price trên mobile: nhỏ hơn ── */
    .price-wrapper {
        font-size: 1.35rem !important;
    }

    /* ── Section padding giảm ── */
    .woocommerce div.product section.bg-gray-50 {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    /* ── Specs list: stack dọc trên XS ── */
    .content-description + ul li {
        flex-wrap: wrap;
    }
}

@media (max-width: 400px) {
    /* Related: 1 cột */
    .woocommerce .related.products ul.products,
    .woocommerce .upsells.products ul.products {
        grid-template-columns: 1fr !important;
    }

    /* Gallery vuông nhỏ hơn */
    #am-product-gallery {
        aspect-ratio: 4/5 !important;
    }
}

/* ============================================================
   WOOCOMMERCE — CART / CHECKOUT / ORDER PAGES — MOBILE
   ============================================================ */

/* ── Wrapper chung: giới hạn width + padding ── */
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce,
.woocommerce-account .woocommerce {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2.5rem 1rem;
    box-sizing: border-box;
}

/* ── CART TABLE ── */
/* Cho bảng giỏ hàng scroll ngang trên màn nhỏ thay vì vỡ layout */
.woocommerce-cart table.shop_table {
    width: 100%;
    border-collapse: collapse;
}

/* ── CART COLLATERALS (coupon + totals) ── */
/* Desktop: WC mặc định float left/right — reset thành flex stack */
.woocommerce .cart-collaterals {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 2rem;
}
.woocommerce .cart-collaterals .cart_totals {
    width: 100%;
    max-width: 420px;
    margin-left: auto;
    float: none !important;
}
.woocommerce .cart-collaterals .cross-sells {
    flex: 1;
    float: none !important;
    width: 100% !important;
}

/* ── CHECKOUT: billing + order review side by side → stack ── */
/* WooCommerce mặc định dùng float, ta override */
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review {
    float: none !important;
    width: 100% !important;
    margin-right: 0 !important;
    padding: 0 !important;
}
/* NOTE: Old grid-on-.woocommerce approach removed. Layout now handled
   by .am-co-grid inside form-checkout.php template. Do NOT set grid/flex
   on .woocommerce-checkout .woocommerce — it makes the form only 380px wide. */
.woocommerce-checkout .woocommerce {
    display: block !important;
}
@media (min-width: 768px) {
    /* Keep block so form-checkout.php grid works at full width */
    .woocommerce-checkout .woocommerce {
        display: block !important;
    }
    .woocommerce-cart .cart-collaterals .cart_totals {
        max-width: 380px;
    }
}

/* ── Form fields full-width trên mobile ── */
.woocommerce form .form-row {
    padding: 0;
    margin: 0 0 1rem 0;
}
.woocommerce form .form-row input,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d1d5db;
    padding: 0.6rem 0.85rem;
    font-size: 0.875rem;
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    color: #374151;
    outline: none;
    transition: border-color 0.2s;
}
.woocommerce form .form-row input:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
    border-color: #901C1C;
}
.woocommerce form .form-row label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.35rem;
    display: block;
}

/* Hai cột first name / last name trên tablet+ */
@media (min-width: 480px) {
    .woocommerce-billing-fields__field-wrapper,
    .woocommerce-shipping-fields__field-wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 1rem;
    }
    .woocommerce-billing-fields__field-wrapper .form-row-wide,
    .woocommerce-shipping-fields__field-wrapper .form-row-wide {
        grid-column: 1 / -1;
    }
}

/* ── ORDER REVIEW table ── */
.woocommerce-checkout #order_review .shop_table {
    width: 100%;
    font-size: 0.875rem;
    border-collapse: collapse;
}
.woocommerce-checkout #order_review .shop_table th,
.woocommerce-checkout #order_review .shop_table td {
    padding: 0.6rem 0.5rem;
    border-bottom: 1px solid #f3f4f6;
}

/* ── PAYMENT BOX ── */
#payment {
    border-radius: 6px;
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
}
#payment .wc_payment_methods {
    padding: 1rem !important;
}
#payment div.place-order {
    padding: 1rem !important;
}
#payment #place_order {
    width: 100%;
    background: linear-gradient(135deg, #901C1C 0%, #ba282b 100%) !important;
    color: #fff !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.05em !important;
    border-radius: 25px !important;
    border: none !important;
    padding: 0.85rem 1.5rem !important;
    cursor: pointer;
    transition: box-shadow 0.2s, transform 0.2s;
}
#payment #place_order:hover {
    box-shadow: 0 6px 18px rgba(144,28,28,0.35) !important;
    transform: translateY(-1px);
}

/* ── ORDER RECEIVED / THANK YOU ── */
.woocommerce-order .woocommerce-order-details,
.woocommerce-order .woocommerce-customer-details {
    margin-top: 2rem;
}
.woocommerce-order ul.order_details {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.woocommerce-order ul.order_details li {
    background: #fff;
    border: 1px solid #e5e7eb;
    padding: 0.85rem 1.25rem;
    border-radius: 6px;
    flex: 1;
    min-width: 140px;
    font-size: 0.8rem;
}
.woocommerce-order ul.order_details li strong {
    display: block;
    font-size: 1rem;
    color: #901C1C;
    margin-top: 0.25rem;
}

/* ── ACCOUNT PAGE ──
   NOTE: Old pill-nav + grid-on-.woocommerce approach replaced by
   my-account.php template which uses .am-account-wrap (CSS grid 240px+1fr).
   Keep display:block on .woocommerce so hero+wrap render full-width. */
.woocommerce-account .woocommerce { display: block !important; }
@media (min-width: 768px) {
    .woocommerce-account .woocommerce { display: block !important; }
}

/* ── CART TABLE mobile: scroll ngang ── */
@media (max-width: 767px) {
    .woocommerce-cart table.shop_table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: 0.82rem;
    }
    .woocommerce-cart table.shop_table td,
    .woocommerce-cart table.shop_table th {
        padding: 0.6rem 0.5rem;
        white-space: nowrap;
    }
    /* Ảnh sản phẩm trong giỏ nhỏ hơn */
    .woocommerce-cart table.shop_table .product-thumbnail img {
        width: 52px !important;
        height: 52px !important;
        object-fit: cover;
    }
    /* Tên sản phẩm wrap */
    .woocommerce-cart table.shop_table .product-name {
        white-space: normal;
        min-width: 120px;
    }
    /* Coupon + update full width */
    .woocommerce .coupon {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        width: 100%;
    }
    .woocommerce .coupon input,
    .woocommerce .coupon button {
        width: 100% !important;
    }
    /* Cart totals: full width */
    .woocommerce .cart-collaterals .cart_totals {
        max-width: 100%;
        margin-left: 0;
    }
}

/* ============================================================
   WC FLOAT OVERRIDES — My Account + Checkout
   ============================================================ */

/* Account page: xoá float mặc định của WC, dùng grid trong my-account.php */
.woocommerce-account .woocommerce-MyAccount-navigation {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
}
.woocommerce-account .woocommerce-MyAccount-content {
    float: none !important;
    width: auto !important;
}

/* Checkout col2-set: WC dùng float, ta dùng grid trong am-co-card */
.am-co-card .col2-set { overflow: visible; }
.am-co-card .col2-set::after { content: ''; display: block; clear: both; }
.am-co-card .col2-set .col-1,
.am-co-card .col2-set .col-2 {
    float: none !important;
    width: 100% !important;
    padding: 0 !important;
}

/* Checkout form-row-first / last: WC float 47% */
.am-co-card .form-row-first { float: left !important; width: 47% !important; clear: none !important; }
.am-co-card .form-row-last  { float: right !important; width: 47% !important; clear: none !important; }
.am-co-card .form-row-wide  { float: none !important; width: 100% !important; clear: both !important; }

/* Mobile: stack tất cả form field */
@media (max-width: 767px) {
    .am-co-card .form-row-first,
    .am-co-card .form-row-last {
        float: none !important;
        width: 100% !important;
    }
}

/* WC notices trên checkout/cart: đảm bảo hiện đúng */
.woocommerce-notices-wrapper { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error {
    border-radius: 8px;
    font-size: .88rem;
    padding: .85rem 1.1rem;
    margin-bottom: 1rem;
    list-style: none;
}
.woocommerce-notices-wrapper .woocommerce-message { background: #f0fdf4; border-left: 3px solid #22c55e; color: #166534; }
.woocommerce-notices-wrapper .woocommerce-info    { background: #eff6ff; border-left: 3px solid #3b82f6; color: #1e40af; }
.woocommerce-notices-wrapper .woocommerce-error   { background: #fff0f0; border-left: 3px solid #ef4444; color: #991b1b; }
.woocommerce-notices-wrapper .woocommerce-message a.button,
.woocommerce-notices-wrapper .woocommerce-error a.button {
    float: right;
    background: #901C1C !important;
    color: #fff !important;
    border-radius: 20px !important;
    font-size: .8rem !important;
    padding: .3rem .9rem !important;
    border: none !important;
    text-decoration: none;
    font-weight: 600;
}

/* ============================================================
   FIX: WC targets #customer_details & #order_review with float+width
   These must be overridden so our CSS Grid works on checkout page
   ============================================================ */
form.woocommerce-checkout #customer_details {
    float: none !important;
    width: auto !important;
    clear: none !important;
}
form.woocommerce-checkout #order_review_heading {
    float: none !important;
    width: auto !important;
}
form.woocommerce-checkout #order_review {
    float: none !important;
    width: auto !important;
    clear: none !important;
    padding: 0 !important;
}
.woocommerce-checkout .col2-set {
    float: none !important;
    width: 100% !important;
    overflow: visible !important;
}
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
    float: none !important;
    width: 100% !important;
    padding: 0 !important;
}
/* Grid must not be broken by WC overflow:hidden on .woocommerce */
.woocommerce-checkout.woocommerce form.checkout.woocommerce-checkout { overflow: visible !important; }
.am-co-grid { display: grid !important; }
.am-co-left { min-width: 0 !important; width: auto !important; float: none !important; }
.am-co-right { width: auto !important; float: none !important; }

/* ============================================================
   FIX: Account page — WC floats .woocommerce-MyAccount-navigation
   and .woocommerce-MyAccount-content. Grid in my-account.php handles layout.
   ============================================================ */
.am-account-wrap { display: grid !important; }
.am-account-nav.woocommerce-MyAccount-navigation {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}
.am-account-content.woocommerce-MyAccount-content {
    float: none !important;
    width: auto !important;
    padding: 0 !important;
}

/* Select2 dropdown list */
.select2-dropdown {
    border: 1.5px solid #e5e7eb !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.1) !important;
    overflow: hidden;
    font-family: 'Inter', sans-serif;
}
.select2-results__option {
    font-size: .88rem;
    padding: .55rem .9rem !important;
    color: #374151;
}
.select2-results__option--highlighted {
    background: #fef2f2 !important;
    color: #901C1C !important;
}
.select2-results__option[aria-selected="true"] {
    background: #fff8f8 !important;
    color: #901C1C !important;
    font-weight: 600;
}
.select2-search--dropdown .select2-search__field {
    border: 1.5px solid #e5e7eb !important;
    border-radius: 6px !important;
    padding: .4rem .7rem !important;
    font-size: .85rem;
    outline: none;
}
.select2-search--dropdown .select2-search__field:focus {
    border-color: #901C1C !important;
}

/* ============================================================
   NO-IMAGE PLACEHOLDER — ART MARTIN
   ============================================================ */

/* Ảnh placeholder trong mọi vị trí — WC cart, product card, single... */
img.am-no-img,
img[data-ph-applied] {
    object-fit: contain !important;
    padding: 12px !important;
    background: #f8f4f4 !important;
}

/* Cart: thumbnail nhỏ — đừng để padding quá lớn */
.am-cart-thumb img.am-no-img,
.am-cart-thumb img[data-ph-applied] {
    padding: 6px !important;
}

/* Product card — đảm bảo wrapper cũng có background đúng màu */
.product-card .am-no-img-wrap,
.product-card img[data-ph-applied] {
    background: #f8f4f4 !important;
}