/**
 * ==============================================================================
 * Product Cards & Catalog Layout — Trang Trí 4 Mùa (trangtri4mua.com)
 * Redesigned to Zara Home & Pottery Barn Editorial Standards
 *
 * 1. AI Tell Elimination: No neon badges, no artificial pulse animations,
 *    no tacky emoji labels.
 * 2. Clean Image Container: 1:1 aspect ratio with subtle 1px border, 8px radius,
 *    and elegant 1.03x hover zoom.
 * 3. Editorial Typography: 2-line title clamp in Be Vietnam Pro (14px, dark slate),
 *    transitioning to evergreen (#14532D) on hover.
 * 4. Pricing Discipline: Clear current price in dark crimson (#C41E2F), original
 *    price in muted gray (#9CA3AF) with clean strikethrough, clean percentage tag.
 * 5. Subtle CTA Button: Full-width button with 42px touch target, clean solid
 *    evergreen background, smooth tactile press effect, no cheesy icons.
 * 6. Responsive Grid: Balanced 4 columns on desktop, 2 columns on mobile with 12px gap.
 *
 * @package Blocksy_Child
 * @version 2.1.0
 * ==============================================================================
 */

/* ==========================================================================
   1. Brand Design Tokens & Palette Variables
   ========================================================================== */
:root {
	--tt4m-primary: #14532D;       /* Evergreen Forest */
	--tt4m-primary-dark: #0F3F22;  /* Deep Pine */
	--tt4m-primary-active: #0B2E19;/* Darkest Evergreen */
	--tt4m-cta: #C41E2F;           /* Festive Crimson Red */
	--tt4m-cta-hover: #A01825;     /* Deep Crimson */
	--tt4m-gold: #D97706;          /* Warm Festive Amber Gold */
	--tt4m-gold-light: #FEF3C7;    /* Soft Champagne */
	--tt4m-text: #1F2937;          /* Dark Slate Charcoal */
	--tt4m-text-muted: #6B7280;    /* Muted Slate / Subdued Gray */
	--tt4m-text-light: #9CA3AF;    /* Strikethrough Price Gray */
	--tt4m-border: #E5E7EB;        /* Subtle Hairline Border */
	--tt4m-border-warm: #EDE8E1;   /* Warm Ivory Border */
	--tt4m-bg-alt: #F9FAFB;        /* Clean Light Canvas */
	--tt4m-bg-warm: #FAF8F5;       /* Warm Pearl / Soft Ivory Canvas */
	--tt4m-font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--tt4m-font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

/* ==========================================================================
   2. Category Chips Navigation (Shop & Taxonomy Archives)
   ========================================================================== */
.tt4m-cat-chips-wrapper {
	width: 100%;
	flex-basis: 100%;
	margin-bottom: 20px;
}

.tt4m-cat-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 4px 0;
	width: 100%;
	align-items: center;
}

.tt4m-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 16px;
	border: 1px solid var(--tt4m-border, #E5E7EB);
	border-radius: 999px;
	font-family: var(--tt4m-font-family);
	font-size: 13px;
	font-weight: 500;
	color: #374151;
	text-decoration: none;
	background: #FFFFFF;
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
	white-space: nowrap;
	line-height: 1.3;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
	min-height: 38px;
	user-select: none;
}

/* Eliminate tacky emoji icons in category chips */
.tt4m-chip-icon {
	display: none !important;
}

.tt4m-chip-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #F3F4F6;
	color: var(--tt4m-text-muted, #6B7280);
	font-size: 11px;
	font-weight: 500;
	padding: 2px 7px;
	border-radius: 999px;
	min-width: 18px;
	line-height: 1.2;
	transition: background 0.2s ease, color 0.2s ease;
}

.tt4m-chip:hover {
	border-color: var(--tt4m-primary, #14532D);
	color: var(--tt4m-primary, #14532D);
	background: var(--tt4m-bg-warm, #FAF8F5);
	transform: translateY(-1px);
	box-shadow: 0 2px 6px rgba(20, 83, 45, 0.08);
}

.tt4m-chip:hover .tt4m-chip-count {
	background: #DCFCE7;
	color: var(--tt4m-primary, #14532D);
}

.tt4m-chip.is-active {
	background: var(--tt4m-primary, #14532D) !important;
	color: #FFFFFF !important;
	border-color: var(--tt4m-primary, #14532D) !important;
	font-weight: 600;
	box-shadow: 0 2px 6px rgba(20, 83, 45, 0.18);
}

.tt4m-chip.is-active .tt4m-chip-count {
	background: rgba(255, 255, 255, 0.22) !important;
	color: #FFFFFF !important;
}

.tt4m-chip.is-active:hover {
	background: var(--tt4m-primary-dark, #0F3F22) !important;
	border-color: var(--tt4m-primary-dark, #0F3F22) !important;
	color: #FFFFFF !important;
}

/* Category Chips Mobile Horizontal Scrolling */
@media (max-width: 767.98px) {
	.tt4m-cat-chips-wrapper {
		margin-bottom: 14px;
		margin-left: -8px;
		margin-right: -8px;
		width: calc(100% + 16px);
	}

	.tt4m-cat-chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		scroll-snap-type: x mandatory;
		padding: 4px 8px 8px 8px;
		gap: 6px;
	}

	.tt4m-cat-chips::-webkit-scrollbar {
		display: none;
	}

	.tt4m-chip {
		flex-shrink: 0;
		scroll-snap-align: start;
		padding: 6px 12px;
		font-size: 12.5px;
		min-height: 38px;
	}

	.tt4m-chip-count {
		font-size: 10px;
		padding: 1.5px 5px;
	}
}

/* ==========================================================================
   3. SEO Intro & Micro-Trust Bar (Quiet Editorial Style)
   ========================================================================== */
.tt4m-cat-intro {
	background: var(--tt4m-bg-warm, #FAF8F5);
	border: 1px solid var(--tt4m-border, #E5E7EB);
	border-radius: 8px;
	padding: 14px 18px;
	margin: 8px 0 16px 0;
	font-family: var(--tt4m-font-family);
	font-size: 13.5px;
	line-height: 1.6;
	color: #4B5563;
	text-align: left;
}

.tt4m-cat-intro p {
	margin: 0;
}

.tt4m-micro-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 18px;
	align-items: center;
}

.tt4m-trust-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-family: var(--tt4m-font-family);
	font-size: 12px;
	font-weight: 500;
	color: #4B5563;
	background: #FFFFFF;
	border: 1px solid var(--tt4m-border, #E5E7EB);
	padding: 4px 10px;
	border-radius: 999px;
	line-height: 1.3;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

/* Hide cheesy emoji icons in trust pills */
.tt4m-trust-pill .tt4m-trust-icon {
	display: none !important;
}

@media (max-width: 689.98px) {
	.tt4m-micro-trust {
		gap: 6px;
		margin-bottom: 14px;
	}

	.tt4m-trust-pill {
		font-size: 11px;
		padding: 3px 8px;
	}
}

/* ==========================================================================
   4. Product Cards Container & Elevation
   ========================================================================== */
/* Hide unnecessary theme card metadata */
[data-products] .product .entry-meta,
[data-products] .product .ct-woo-card-cats {
	display: none !important;
}

[data-products] .product,
.woocommerce ul.products li.product {
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
	background: #FFFFFF !important;
	border: 1px solid var(--tt4m-border, #E5E7EB) !important;
	border-radius: 10px !important;
	padding: 12px !important;
	position: relative !important;
	box-sizing: border-box !important;
	transition: border-color 0.25s ease,
	            box-shadow 0.25s ease,
	            transform 0.25s ease !important;
}

/* Subtle, calm elevation on card hover (No neon glow) */
[data-products] .product:hover,
.woocommerce ul.products li.product:hover {
	transform: translateY(-3px) !important;
	box-shadow: 0 10px 24px -4px rgba(20, 83, 45, 0.08),
	            0 2px 6px -1px rgba(0, 0, 0, 0.04) !important;
	border-color: #D1D5DB !important;
}

/* ==========================================================================
   5. Card Thumbnail & Hover Zoom (Clean 1:1, 1px Border, 8px Radius, 1.03x)
   ========================================================================== */
[data-products] .product figure,
.woocommerce ul.products li.product figure {
	position: relative !important;
	margin: 0 0 12px 0 !important;
	padding: 0 !important;
	aspect-ratio: 1 / 1 !important;
	border: 1px solid var(--tt4m-border, #E5E7EB) !important;
	border-radius: 8px !important;
	overflow: hidden !important;
	background: var(--tt4m-bg-warm, #FAF8F5) !important;
	box-sizing: border-box !important;
}

[data-products] .product figure a,
.woocommerce ul.products li.product figure a,
[data-products] .product figure .ct-media-container {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	overflow: hidden !important;
}

[data-products] .product figure img,
.woocommerce ul.products li.product figure img {
	width: 100% !important;
	height: 100% !important;
	aspect-ratio: 1 / 1 !important;
	object-fit: cover !important;
	display: block !important;
	transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Refined 1.03x zoom on card hover */
[data-products] .product:hover figure img,
.woocommerce ul.products li.product:hover figure img {
	transform: scale(1.03) !important;
}

/* ==========================================================================
   6. Product Badges (No Neon, No Artificial Pulse, No Emoji Labels)
   ========================================================================== */
/* Generic badge styling in loop cards */
[data-products] .product .onsale,
[data-products] .product .tt4m-sale-badge,
[data-products] .product .tt4m-badge,
.woocommerce ul.products li.product .onsale {
	position: absolute !important;
	top: 8px !important;
	z-index: 5 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-family: var(--tt4m-font-family) !important;
	text-transform: none !important;
	letter-spacing: 0.02em !important;
	line-height: 1.2 !important;
	pointer-events: none !important;
	animation: none !important; /* Strip all pulse/shimmer animations */
	box-shadow: none !important;
}

/* Clean Percentage Discount Tag (e.g. -15%) */
[data-products] .product .onsale,
[data-products] .product .tt4m-sale-badge,
.woocommerce ul.products li.product .onsale {
	left: 8px !important;
	right: auto !important;
	background: var(--tt4m-cta, #C41E2F) !important;
	color: #FFFFFF !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	padding: 3px 7px !important;
	border-radius: 4px !important;
	min-width: auto !important;
	min-height: auto !important;
	border: none !important;
	box-shadow: 0 1px 3px rgba(196, 30, 47, 0.22) !important;
}

/* Featured / Curated Badge: Warm Amber Gold without neon pulse */
[data-products] .product .tt4m-badge-hot,
.woocommerce ul.products li.product .tt4m-badge-hot {
	right: 8px !important;
	left: auto !important;
	background: var(--tt4m-gold, #D97706) !important;
	color: #FFFFFF !important;
	font-family: var(--tt4m-font-family) !important;
	font-size: 10.5px !important;
	font-weight: 600 !important;
	padding: 3px 7px !important;
	border-radius: 4px !important;
	box-shadow: 0 1px 3px rgba(217, 119, 6, 0.22) !important;
	animation: none !important;
}

/* Out of Stock Badge */
[data-products] .product .out-of-stock-badge,
.woocommerce ul.products li.product .out-of-stock-badge {
	position: absolute !important;
	top: 8px !important;
	right: 8px !important;
	background: #4B5563 !important;
	color: #FFFFFF !important;
	font-family: var(--tt4m-font-family) !important;
	font-size: 10.5px !important;
	font-weight: 500 !important;
	padding: 3px 7px !important;
	border-radius: 4px !important;
	z-index: 5 !important;
	animation: none !important;
	box-shadow: none !important;
}

/* ==========================================================================
   7. Product Title (2-Line Clamp in Be Vietnam Pro, 14px, Dark Slate, Hover to Evergreen)
   ========================================================================== */
[data-products] .woocommerce-loop-product__title,
[data-products] .woocommerce-loop-category__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--tt4m-font-family) !important;
	font-size: 14px !important;
	line-height: 1.4 !important;
	font-weight: 500 !important;
	color: var(--tt4m-text, #1F2937) !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	min-height: 2.8em !important;
	max-height: 2.8em !important;
	margin: 0 0 6px 0 !important;
	word-break: break-word !important;
	transition: color 0.2s ease !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

[data-products] .woocommerce-loop-product__title a,
.woocommerce ul.products li.product .woocommerce-loop-product__title a {
	font-family: inherit !important;
	font-weight: inherit !important;
	color: inherit !important;
	text-decoration: none !important;
	transition: color 0.2s ease !important;
}

/* Smooth transition to Evergreen on card hover */
[data-products] .product:hover .woocommerce-loop-product__title,
[data-products] .product:hover .woocommerce-loop-product__title a,
.woocommerce ul.products li.product:hover .woocommerce-loop-product__title,
.woocommerce ul.products li.product:hover .woocommerce-loop-product__title a {
	color: var(--tt4m-primary, #14532D) !important;
}

/* ==========================================================================
   8. Pricing Discipline (Current Dark Crimson, Original Muted Strikethrough)
   ========================================================================== */
[data-products] .product .price,
.woocommerce ul.products li.product .price {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: baseline !important;
	gap: 6px !important;
	font-family: var(--tt4m-font-family) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	color: var(--tt4m-cta, #C41E2F) !important;
	margin-top: auto !important;
	margin-bottom: 8px !important;
	line-height: 1.3 !important;
}

/* Current price amount */
[data-products] .product .price ins,
.woocommerce ul.products li.product .price ins,
[data-products] .product .price > .woocommerce-Price-amount,
.woocommerce ul.products li.product .price > .woocommerce-Price-amount {
	text-decoration: none !important;
	font-weight: 600 !important;
	font-size: 15px !important;
	color: var(--tt4m-cta, #C41E2F) !important;
}

/* Original price in muted gray with clean strikethrough */
[data-products] .product .price del,
.woocommerce ul.products li.product .price del {
	color: var(--tt4m-text-light, #9CA3AF) !important;
	font-weight: 400 !important;
	font-size: 12px !important;
	text-decoration: line-through !important;
	text-decoration-color: #9CA3AF !important;
	margin-right: 2px !important;
}

[data-products] .product .price del .woocommerce-Price-amount,
.woocommerce ul.products li.product .price del .woocommerce-Price-amount {
	color: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
}

/* Clean percentage discount tag beside price */
.tt4m-card-discount-tag,
.tt4m-badge-discount,
.price .tt4m-sale-tag {
	display: inline-flex !important;
	align-items: center !important;
	font-family: var(--tt4m-font-family) !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	color: var(--tt4m-cta, #C41E2F) !important;
	background: #FEF2F2 !important;
	border: 1px solid #FECACA !important;
	padding: 1px 6px !important;
	border-radius: 4px !important;
	line-height: 1.2 !important;
	letter-spacing: 0.01em !important;
}

/* ==========================================================================
   9. Stock & Delivery Reassurance Tags (Clean Micro-Labels, No Emojis)
   ========================================================================== */
.tt4m-card-reassurance {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	margin-bottom: 10px;
	min-height: 20px;
}

.tt4m-reassurance-tag {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-family: var(--tt4m-font-family);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.25;
	padding: 2.5px 7px;
	border-radius: 4px;
	white-space: nowrap;
	background: var(--tt4m-bg-alt, #F9FAFB);
	color: #4B5563;
	border: 1px solid var(--tt4m-border, #E5E7EB);
	transition: background-color 0.15s ease;
}

/* Eliminate cheesy emoji icons */
.tt4m-reassurance-tag .tt4m-tag-icon {
	display: none !important;
}

/* Subtle contextual color accents without neon */
.tt4m-tag-freeship {
	background: #F0FDF4;
	color: #166534;
	border-color: #DCFCE7;
}

.tt4m-tag-express {
	background: #FFFBEB;
	color: #92400E;
	border-color: #FEF3C7;
}

.tt4m-tag-cod {
	background: #F9FAFB;
	color: #374151;
	border-color: #E5E7EB;
}

.tt4m-tag-soldout {
	background: #FEF2F2;
	color: #991B1B;
	border-color: #FEE2E2;
}

/* ==========================================================================
   10. CTA Buttons (42px Touch Target, Clean Solid Background, Tactile Press)
   ========================================================================== */
[data-products] .product .ct-woo-card-actions,
.woocommerce ul.products li.product .ct-woo-card-actions {
	margin-top: 0 !important;
	width: 100% !important;
}

[data-products] .product .button,
[data-products] .product .added_to_cart,
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button {
	width: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 42px !important;
	height: 42px !important;
	box-sizing: border-box !important;
	padding: 0 12px !important;
	font-family: var(--tt4m-font-family) !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	border-radius: 6px !important;
	background: var(--tt4m-primary, #14532D) !important;
	color: #FFFFFF !important;
	border: 1px solid transparent !important;
	text-align: center !important;
	text-decoration: none !important;
	line-height: 1 !important;
	letter-spacing: 0.01em !important;
	box-shadow: 0 1px 2px rgba(20, 83, 45, 0.12) !important;
	transition: background-color 0.2s ease,
	            box-shadow 0.2s ease,
	            transform 0.15s ease !important;
	cursor: pointer !important;
	user-select: none !important;
}

/* Hover: Deep Pine #0F3F22 with gentle elevation */
[data-products] .product .button:hover,
.woocommerce ul.products li.product .button:hover {
	background: var(--tt4m-primary-dark, #0F3F22) !important;
	color: #FFFFFF !important;
	box-shadow: 0 3px 8px rgba(15, 63, 34, 0.2) !important;
	transform: translateY(-1px) !important;
}

/* Tactile Active Press Feedback */
[data-products] .product .button:active,
.woocommerce ul.products li.product .button:active {
	transform: scale(0.98) !important;
	background: var(--tt4m-primary-active, #0B2E19) !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14) inset !important;
}

/* Strip any pseudo-element tacky icons */
[data-products] .product .button::before,
[data-products] .product .button::after,
.woocommerce ul.products li.product .button::before,
.woocommerce ul.products li.product .button::after {
	display: none !important;
	content: none !important;
}

/* Added to cart indicator state */
[data-products] .product .added_to_cart,
.woocommerce ul.products li.product a.added_to_cart {
	margin-top: 6px !important;
	background: var(--tt4m-bg-warm, #FAF8F5) !important;
	color: var(--tt4m-primary, #14532D) !important;
	border: 1px solid var(--tt4m-primary, #14532D) !important;
	box-shadow: none !important;
}

[data-products] .product .added_to_cart:hover,
.woocommerce ul.products li.product a.added_to_cart:hover {
	background: #F0FDF4 !important;
	color: var(--tt4m-primary-dark, #0F3F22) !important;
}

/* Contact button for non-purchasable / consultation items */
[data-products] .product .tt4m-contact-btn {
	background: var(--tt4m-primary, #14532D) !important;
	color: #FFFFFF !important;
	box-shadow: 0 1px 2px rgba(20, 83, 45, 0.12) !important;
}

[data-products] .product .tt4m-contact-btn:hover {
	background: var(--tt4m-primary-dark, #0F3F22) !important;
	box-shadow: 0 3px 8px rgba(15, 63, 34, 0.2) !important;
}

/* ==========================================================================
   11. Responsive Grid Layout (Desktop 4 Columns, Mobile 2 Columns with 12px Gap)
   ========================================================================== */
/* Desktop (>= 1024px): Balanced 4-Column Grid */
@media (min-width: 1024px) {
	[data-products],
	[data-products].columns-4,
	.woocommerce ul.products,
	.related [data-products],
	.upsells [data-products] {
		display: grid !important;
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
		--shop-columns: repeat(4, minmax(0, 1fr)) !important;
		gap: 20px !important;
		row-gap: 28px !important;
	}
}

/* Tablet (768px - 1023.98px): 3-Column Grid */
@media (min-width: 768px) and (max-width: 1023.98px) {
	[data-products],
	[data-products].columns-3,
	[data-products].columns-4,
	.woocommerce ul.products,
	.related [data-products],
	.upsells [data-products] {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		--shop-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 16px !important;
		row-gap: 24px !important;
	}
}

/* Mobile (< 768px): Exact 2-Column Grid with 12px Gap */
@media (max-width: 767.98px) {
	[data-products],
	[data-products].columns-2,
	[data-products].columns-3,
	[data-products].columns-4,
	[data-products].columns-5,
	[data-products].columns-6,
	.woocommerce ul.products,
	.related [data-products],
	.upsells [data-products] {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		--shop-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 12px !important;
		row-gap: 16px !important;
		margin-bottom: 24px !important;
	}

	[data-products] .product,
	.woocommerce ul.products li.product {
		padding: 8px !important;
		border-radius: 8px !important;
	}

	[data-products] .product figure,
	.woocommerce ul.products li.product figure {
		margin-bottom: 8px !important;
		border-radius: 6px !important;
	}

	[data-products] .woocommerce-loop-product__title,
	[data-products] .woocommerce-loop-category__title,
	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: 13px !important;
		line-height: 1.35 !important;
		min-height: 2.7em !important;
		max-height: 2.7em !important;
		margin-bottom: 4px !important;
	}

	[data-products] .product .price,
	.woocommerce ul.products li.product .price {
		font-size: 14px !important;
		margin-bottom: 6px !important;
	}

	[data-products] .product .price ins,
	.woocommerce ul.products li.product .price ins,
	[data-products] .product .price > .woocommerce-Price-amount,
	.woocommerce ul.products li.product .price > .woocommerce-Price-amount {
		font-size: 14px !important;
	}

	[data-products] .product .price del,
	.woocommerce ul.products li.product .price del {
		font-size: 11px !important;
	}

	.tt4m-card-reassurance {
		margin-bottom: 6px !important;
		min-height: 18px !important;
		gap: 3px !important;
	}

	.tt4m-reassurance-tag {
		font-size: 10px !important;
		padding: 1.5px 5px !important;
	}

	/* 42px touch target on mobile */
	[data-products] .product .button,
	[data-products] .product .added_to_cart,
	.woocommerce ul.products li.product .button {
		min-height: 42px !important;
		height: 42px !important;
		padding: 0 8px !important;
		font-size: 12.5px !important;
		border-radius: 6px !important;
	}

	/* Compact top badges on mobile */
	[data-products] .product .onsale,
	[data-products] .product .tt4m-sale-badge {
		font-size: 10px !important;
		padding: 2px 5px !important;
		top: 6px !important;
		left: 6px !important;
	}

	[data-products] .product .tt4m-badge-hot {
		font-size: 9.5px !important;
		padding: 2px 5px !important;
		top: 6px !important;
		right: 6px !important;
	}
}

/* ==========================================================================
   12. Enhanced Empty State (Custom woocommerce_no_products_found)
   ========================================================================== */
.tt4m-empty-state {
	background: #FFFFFF;
	border: 1px solid var(--tt4m-border, #E5E7EB);
	border-radius: 12px;
	padding: 40px 24px;
	text-align: center;
	max-width: 680px;
	margin: 28px auto 44px auto;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.tt4m-empty-icon {
	font-size: 40px;
	line-height: 1;
	margin-bottom: 14px;
	display: inline-block;
	opacity: 0.85;
}

.tt4m-empty-title {
	font-family: var(--tt4m-font-serif);
	font-size: 22px;
	font-weight: 600;
	color: var(--tt4m-primary, #14532D);
	margin: 0 0 10px 0;
	line-height: 1.3;
}

.tt4m-empty-desc {
	font-family: var(--tt4m-font-family);
	font-size: 14px;
	line-height: 1.6;
	color: #4B5563;
	max-width: 520px;
	margin: 0 auto 20px auto;
}

.tt4m-empty-recs {
	margin-bottom: 24px;
	padding: 16px;
	background: var(--tt4m-bg-warm, #FAF8F5);
	border-radius: 8px;
	border: 1px solid var(--tt4m-border, #E5E7EB);
}

.tt4m-empty-recs-title {
	display: block;
	font-family: var(--tt4m-font-family);
	font-size: 13px;
	font-weight: 600;
	color: var(--tt4m-primary, #14532D);
	margin-bottom: 10px;
}

.tt4m-empty-recs-pills {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.tt4m-empty-rec-pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px 12px;
	background: #FFFFFF;
	border: 1px solid var(--tt4m-border, #E5E7EB);
	border-radius: 999px;
	font-family: var(--tt4m-font-family);
	font-size: 12.5px;
	font-weight: 500;
	color: var(--tt4m-text, #1F2937);
	text-decoration: none;
	transition: all 0.2s ease;
}

.tt4m-empty-rec-pill:hover {
	border-color: var(--tt4m-primary, #14532D);
	color: var(--tt4m-primary, #14532D);
	background: var(--tt4m-bg-warm, #FAF8F5);
	transform: translateY(-1px);
}

.tt4m-empty-rec-count {
	font-size: 11px;
	color: var(--tt4m-text-muted, #6B7280);
}

.tt4m-empty-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-bottom: 16px;
}

.tt4m-empty-btn-primary {
	background: var(--tt4m-primary, #14532D) !important;
	color: #FFFFFF !important;
	min-height: 42px;
	padding: 10px 22px !important;
	border-radius: 6px !important;
	font-family: var(--tt4m-font-family) !important;
	font-weight: 600 !important;
	font-size: 13.5px !important;
	text-decoration: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: background-color 0.2s ease !important;
	border: none !important;
	box-shadow: 0 1px 2px rgba(20, 83, 45, 0.12) !important;
}

.tt4m-empty-btn-primary:hover {
	background: var(--tt4m-primary-dark, #0F3F22) !important;
	color: #FFFFFF !important;
}

.tt4m-empty-btn-zalo {
	background: #0068FF !important;
	color: #FFFFFF !important;
	min-height: 42px;
	padding: 10px 22px !important;
	border-radius: 6px !important;
	font-family: var(--tt4m-font-family) !important;
	font-weight: 600 !important;
	font-size: 13.5px !important;
	text-decoration: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	transition: background-color 0.2s ease !important;
	border: none !important;
	box-shadow: 0 1px 2px rgba(0, 104, 255, 0.15) !important;
}

.tt4m-empty-btn-zalo:hover {
	background: #0052CC !important;
	color: #FFFFFF !important;
}

.tt4m-empty-hotline {
	font-family: var(--tt4m-font-family);
	font-size: 13px;
	color: #6B7280;
}

.tt4m-empty-tel {
	font-weight: 600;
	color: var(--tt4m-cta, #C41E2F);
	text-decoration: none;
}

.tt4m-empty-tel:hover {
	text-decoration: underline;
}

.tt4m-empty-hours {
	display: block;
	font-size: 11.5px;
	color: #9CA3AF;
	margin-top: 2px;
}