/* ==========================================================================
   Taxonomy Filter — WooCommerce Product Filter
   Fully responsive design
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Custom Properties (Design Tokens)
   -------------------------------------------------------------------------- */
:root {
	--tf-green-dark: #0A4E2C;
	--tf-green: #0E6B3D;
	--tf-green-light: #EAF7EE;
	--tf-green-mid: #4FB26D;
	--tf-badge-green: #0E6B3D;
	--tf-badge-pink: #e0005e;
	--tf-badge-purple: #7c3aed;
	--tf-badge-orange: #e07b00;
	--tf-text: #1E2521;
	--tf-text-muted: #68726B;
	--tf-text-light: #A8B1AA;
	--tf-border: #E5EAE6;
	--tf-bg: #F7FAF8;
	--tf-white: #ffffff;
	--tf-radius-sm: 6px;
	--tf-radius: 10px;
	--tf-radius-lg: 14px;
	--tf-shadow-sm: 0 1px 3px rgba(10, 78, 44, .08);
	--tf-shadow: 0 4px 16px rgba(10, 78, 44, .10);
	--tf-shadow-lg: 0 8px 32px rgba(10, 78, 44, .13);
	--tf-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--tf-transition: 0.22s ease;

	/* --- Card --- */
	--tf-card-bg: #ffffff;
	--tf-card-border-color: #E5EAE6;
	--tf-card-border-width: 1px;
	--tf-card-shadow: 0 1px 3px rgba(10, 78, 44, .08);
	--tf-card-hover-bg: #ffffff;
	--tf-card-hover-border-color: #E5EAE6;
	--tf-card-hover-shadow: 0 8px 32px rgba(10, 78, 44, .13);
	--tf-card-hover-lift: -5px;
	--tf-card-body-padding: 14px;
	--tf-card-gap: 8px;
	--tf-card-title-size: 14px;
	--tf-card-title-weight: 600;
	--tf-card-title-align: left;

	/* --- Star Rating --- */
	--tf-star-size: 14px;
	--tf-star-color-filled: #FFC240;
	--tf-star-color-empty: #E5EAE6;

	/* --- CTA Button --- */
	--tf-cta-color: #0E6B3D;
	--tf-cta-bg: transparent;
	--tf-cta-border-color: #0E6B3D;
	--tf-cta-border-width: 1.5px;
	--tf-cta-radius: 6px;
	--tf-cta-font-size: 13px;
	--tf-cta-font-weight: 600;
	/* --- Sidebar --- */
	--tf-sidebar-bg: transparent;
	--tf-sidebar-border-color: #E5EAE6;
	--tf-sidebar-border-width: 0px;
	--tf-sidebar-radius: 10px;
	--tf-sidebar-padding: 0px;

	/* --- Category List (Sidebar) --- */
	--tf-cat-font-size: 13px;
	--tf-cat-font-weight: 500;
	--tf-cat-icon-size: 16px;
	--tf-cat-icon-color: #68726B;
	--tf-cat-icon-active-color: #0E6B3D;
	--tf-cat-count-bg: #f0f2f1;
	--tf-cat-count-color: #68726B;
}

/* --------------------------------------------------------------------------
   Wrapper / Layout
   -------------------------------------------------------------------------- */
.taxonomy-filter-wrapper {
	position: relative;
	display: flex;
	gap: 32px;
	align-items: flex-start;
	font-family: var(--tf-font);
	color: var(--tf-text);
	margin: 24px 0 48px;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
}

.tf-main {
	flex: 1 1 0%;
	min-width: 0;
	width: 100%;
	max-width: 100%;
}

.taxonomy-filter-wrapper *,
.taxonomy-filter-wrapper *::before,
.taxonomy-filter-wrapper *::after {
	box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   SIDEBAR
   -------------------------------------------------------------------------- */
html body .taxonomy-filter-wrapper .tf-sidebar,
.tf-sidebar {
	flex: 0 0 230px;
	min-width: 200px;
	max-width: 250px;
	background: var(--tf-sidebar-bg);
	border: var(--tf-sidebar-border-width) solid var(--tf-sidebar-border-color);
	border-radius: var(--tf-sidebar-radius);
	padding: var(--tf-sidebar-padding);
	box-sizing: border-box;
}

/* Sidebar Section Title */
.tf-sidebar-section-title {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--tf-text-muted);
	margin: 0 0 12px;
	padding: 0;
}

/* Category List */
.tf-category-list {
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
}

.tf-category-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 6px 10px;
	border-radius: var(--tf-radius-sm);
	cursor: pointer;
	transition: background var(--tf-transition), color var(--tf-transition);
	margin-bottom: 2px;
	position: relative;
}

.tf-category-list li:hover {
	background: var(--tf-green-light);
	color: var(--tf-green);
}

.tf-category-list li.active {
	background: var(--tf-green-light);
	color: var(--tf-green);
	font-weight: 700;
}

.tf-category-list li .tf-cat-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--tf-cat-font-size);
	font-weight: var(--tf-cat-font-weight);
	color: inherit;
	text-decoration: none;
	flex: 1;
	min-width: 0;
}

/* Category icon */
.tf-cat-icon {
	width: var(--tf-cat-icon-size);
	height: var(--tf-cat-icon-size);
	color: var(--tf-cat-icon-color);
	fill: none;
	stroke: currentColor;
	transition: color var(--tf-transition), stroke var(--tf-transition);
	flex-shrink: 0;
	object-fit: contain;
}

.tf-category-list li:hover .tf-cat-icon,
.tf-category-list li.active .tf-cat-icon {
	color: var(--tf-cat-icon-active-color);
	stroke: var(--tf-cat-icon-active-color);
}

.tf-cat-count {
	font-size: 11px;
	font-weight: 600;
	color: var(--tf-cat-count-color);
	background: var(--tf-cat-count-bg);
	padding: 2px 7px;
	border-radius: 12px;
	line-height: 1.2;
	text-align: center;
	flex-shrink: 0;
	transition: background var(--tf-transition), color var(--tf-transition);
}

.tf-category-list li.active .tf-cat-count {
	background: var(--tf-green);
	color: #ffffff;
}

/* "Ver todas as categorias" toggle */
html body .taxonomy-filter-wrapper button.tf-see-all-toggle,
html body .taxonomy-filter-wrapper [type=button].tf-see-all-toggle,
.tf-see-all-toggle {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	outline: none !important;
	padding: 6px 10px;
	font-size: 13px;
	color: var(--tf-green) !important;
	font-weight: 600;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 4px;
	transition: opacity var(--tf-transition);
}

.tf-see-all-toggle:hover {
	opacity: 0.75;
}

.tf-see-all-toggle svg {
	transition: transform var(--tf-transition);
}

.tf-see-all-toggle.expanded svg {
	transform: rotate(180deg);
}

.tf-hidden-cats {
	display: none;
}

.tf-hidden-cats.visible {
	display: block;
}

/* Sidebar Divider */
.tf-sidebar-divider {
	border: none;
	border-top: 1px solid var(--tf-border);
	margin: 18px 0;
}

/* Filter Groups */
.tf-filter-group {
	margin-bottom: 4px;
}

html body .taxonomy-filter-wrapper button.tf-filter-group-header,
html body .taxonomy-filter-wrapper [type=button].tf-filter-group-header,
.tf-filter-group-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 4px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	color: var(--tf-text) !important;
	border: none !important;
	background: none !important;
	box-shadow: none !important;
	outline: none !important;
	width: 100%;
	text-align: left;
	transition: color var(--tf-transition);
	border-radius: var(--tf-radius-sm);
}

.tf-filter-group-header:hover {
	color: var(--tf-green);
}

.tf-filter-group-header .tf-toggle-icon {
	font-size: 18px;
	line-height: 1;
	color: var(--tf-text-muted);
	font-weight: 400;
	flex-shrink: 0;
	transition: transform var(--tf-transition), color var(--tf-transition);
}

.tf-filter-group-header.open .tf-toggle-icon {
	transform: rotate(45deg);
	color: var(--tf-green);
}

.tf-filter-group-body {
	display: none;
	padding: 4px 0 8px;
}

.tf-filter-group-body.open {
	display: block;
}

/* Sidebar Checkboxes */
.tf-checkbox-label {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 4px;
	font-size: 13px;
	color: var(--tf-text);
	cursor: pointer;
	border-radius: var(--tf-radius-sm);
	transition: background var(--tf-transition);
}

.tf-checkbox-label:hover {
	background: var(--tf-green-light);
}

.tf-checkbox-label input[type="checkbox"] {
	width: 15px;
	height: 15px;
	border: 2px solid var(--tf-border);
	border-radius: 3px;
	cursor: pointer;
	accent-color: var(--tf-green);
	flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   MAIN CONTENT AREA
   -------------------------------------------------------------------------- */
.tf-main {
	flex: 1;
	min-width: 0;
}

/* --------------------------------------------------------------------------
   TOP BAR (Filtros + Ordenar por + View toggle)
   -------------------------------------------------------------------------- */
.tf-topbar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	margin-bottom: 24px;
	background: #f9f9f900;
	padding: 15px;
	border-radius: 8px;
	border: solid 1px #E5EAE6;
}

/* "Filtros" button (mobile drawer trigger) — hidden on desktop */
html body .taxonomy-filter-wrapper button.tf-btn-filters,
html body .taxonomy-filter-wrapper button[type=button].tf-btn-filters,
html body .taxonomy-filter-wrapper [type=button].tf-btn-filters,
.taxonomy-filter-wrapper .tf-btn-filters,
.tf-btn-filters {
	display: none;
	align-items: center;
	gap: 8px;
	padding: 9px 18px;
	background: var(--tf-white) !important;
	color: var(--tf-green) !important;
	border: 1.5px solid var(--tf-green) !important;
	border-radius: var(--tf-radius-sm) !important;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all var(--tf-transition);
	font-family: var(--tf-font);
	white-space: nowrap;
	box-shadow: none !important;
	outline: none !important;
}

html body .taxonomy-filter-wrapper button.tf-btn-filters:hover,
html body .taxonomy-filter-wrapper button[type=button].tf-btn-filters:hover,
html body .taxonomy-filter-wrapper [type=button].tf-btn-filters:hover,
.taxonomy-filter-wrapper .tf-btn-filters:hover,
.tf-btn-filters:hover {
	background: var(--tf-green-light) !important;
	color: var(--tf-green-dark) !important;
	border-color: var(--tf-green-dark) !important;
}

/* Sort Select */
.tf-sort-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}

.tf-sort-label {
	font-size: 14px;
	color: var(--tf-text-muted);
	white-space: nowrap;
}

.tf-sort-select {
	border: 1px solid var(--tf-border);
	border-radius: var(--tf-radius-sm);
	padding: 8px 32px 8px 12px;
	font-size: 14px;
	font-weight: 600;
	color: var(--tf-text);
	background: var(--tf-white);
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2368726B' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	font-family: var(--tf-font);
	transition: border-color var(--tf-transition);
	max-width: 200px;
}

.tf-sort-select:focus {
	outline: none;
	border-color: var(--tf-green);
}

/* View Toggle (grid / list icons) */
.tf-view-toggle {
	display: flex;
	gap: 2px;
	border: 1px solid var(--tf-border);
	border-radius: var(--tf-radius-sm);
	overflow: hidden;
}

html body .taxonomy-filter-wrapper button.tf-view-btn,
html body .taxonomy-filter-wrapper button[type=button].tf-view-btn,
html body .taxonomy-filter-wrapper [type=button].tf-view-btn,
.taxonomy-filter-wrapper .tf-view-btn,
.tf-view-btn {
	background: var(--tf-white) !important;
	border: none !important;
	padding: 8px 10px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--tf-text-muted) !important;
	transition: background var(--tf-transition), color var(--tf-transition);
	box-shadow: none !important;
	outline: none !important;
	border-radius: 0 !important;
	margin: 0 !important;
}

html body .taxonomy-filter-wrapper button.tf-view-btn:hover,
html body .taxonomy-filter-wrapper button[type=button].tf-view-btn:hover,
html body .taxonomy-filter-wrapper [type=button].tf-view-btn:hover,
.taxonomy-filter-wrapper .tf-view-btn:hover,
.tf-view-btn:hover {
	background: var(--tf-bg) !important;
	color: var(--tf-green) !important;
}

html body .taxonomy-filter-wrapper button.tf-view-btn.active,
html body .taxonomy-filter-wrapper button[type=button].tf-view-btn.active,
html body .taxonomy-filter-wrapper [type=button].tf-view-btn.active,
.taxonomy-filter-wrapper .tf-view-btn.active,
.tf-view-btn.active {
	background: var(--tf-green-light) !important;
	color: var(--tf-green) !important;
}

/* --------------------------------------------------------------------------
   PRODUCT GRID
   Uses --tf-cols CSS custom property (set inline from PHP shortcode).
   -------------------------------------------------------------------------- */
.taxonomy-filter-grid {
	display: grid;
	/* Fallback for browsers that don't support var() in repeat() */
	grid-template-columns: repeat(4, 1fr);
	/* Modern override using CSS custom property */
	grid-template-columns: repeat(var(--tf-cols, 4), 1fr);
	gap: var(--tf-grid-gap, 20px);
	transition: opacity var(--tf-transition);
	width: 100%;
	min-width: 100%;
	box-sizing: border-box;
}

.taxonomy-filter-grid.tf-list-view {
	grid-template-columns: 1fr !important;
}

.taxonomy-filter-grid.tf-loading {
	opacity: 0.35;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   PRODUCT CARD
   -------------------------------------------------------------------------- */
.taxonomy-filter-card {
	background: var(--tf-card-bg);
	border: var(--tf-card-border-width) solid var(--tf-card-border-color);
	border-radius: var(--tf-radius-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	position: relative;
	box-shadow: var(--tf-card-shadow);
	transition: transform var(--tf-transition), box-shadow var(--tf-transition), background var(--tf-transition);
	min-width: 0;
}

.taxonomy-filter-card:hover {
	background: var(--tf-card-hover-bg);
	border-color: var(--tf-card-hover-border-color);
	transform: translateY(var(--tf-card-hover-lift));
	box-shadow: var(--tf-card-hover-shadow);
}

/* --- Badge --- */
.tf-card-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	padding: 4px 10px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: var(--tf-white);
	line-height: 1.4;
	white-space: nowrap;
}

.tf-badge-bestseller {
	background: var(--tf-badge-green);
}

.tf-badge-new {
	background: var(--tf-badge-pink);
}

.tf-badge-popular {
	background: var(--tf-badge-purple);
}

.tf-badge-featured {
	background: var(--tf-badge-orange);
}

/* --- Wishlist Button --- */
.tf-wishlist-btn {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	background: var(--tf-white);
	border: 1px solid var(--tf-border);
	border-radius: 50%;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background var(--tf-transition), border-color var(--tf-transition), transform var(--tf-transition);
	box-shadow: var(--tf-shadow-sm);
	padding: 0;
}

.tf-wishlist-btn:hover {
	border-color: var(--tf-green);
	background: var(--tf-green-light);
	transform: scale(1.1);
}

.tf-wishlist-btn.active {
	background: var(--tf-green-light);
	border-color: var(--tf-green);
}

.tf-wishlist-btn svg {
	width: 16px;
	height: 16px;
	stroke: var(--tf-text-muted);
	fill: none;
	transition: stroke var(--tf-transition), fill var(--tf-transition);
}

.tf-wishlist-btn:hover svg,
.tf-wishlist-btn.active svg {
	stroke: var(--tf-green);
	fill: var(--tf-green);
}

/* --- Image --- */
.taxonomy-filter-card-image-link {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--tf-bg);
	position: relative;
}

.taxonomy-filter-card-image-link img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.4s ease, transform 0.4s ease;
}

.tf-main-image {
	position: relative;
	z-index: 1;
}

.tf-secondary-image {
	position: absolute;
	inset: 0;
	z-index: 2;
	opacity: 0;
	pointer-events: none;
}

.taxonomy-filter-card:hover .taxonomy-filter-card-image-link.has-secondary-image .tf-secondary-image {
	opacity: 1;
	transform: scale(1.05);
}

.taxonomy-filter-card:hover .taxonomy-filter-card-image-link.has-secondary-image .tf-main-image {
	opacity: 0;
}

.taxonomy-filter-card:hover .taxonomy-filter-card-image-link:not(.has-secondary-image) img {
	transform: scale(1.05);
}

/* --- Card Body --- */
.taxonomy-filter-card-body {
	padding: var(--tf-card-body-padding);
	gap: var(--tf-card-gap);
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	min-width: 0;
}

/* --- Star Rating --- */
.tf-card-rating {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	flex-wrap: nowrap;
}

.tf-stars {
	display: flex;
	gap: 1px;
	flex-shrink: 0;
}

.tf-stars svg {
	width: var(--tf-star-size);
	height: var(--tf-star-size);
}

.tf-star-filled {
	fill: var(--tf-star-color-filled);
}

.tf-star-half {
	fill: url(#tf-half-grad);
}

.tf-star-empty {
	fill: var(--tf-star-color-empty);
}

.tf-rating-count {
	font-size: 12px;
	color: var(--tf-text-muted);
	line-height: 1;
	white-space: nowrap;
}

/* --- Title --- */
.taxonomy-filter-card-title {
	font-size: var(--tf-card-title-size);
	font-weight: var(--tf-card-title-weight);
	text-align: var(--tf-card-title-align);
	margin: 0;
	line-height: 1.4;
	flex-grow: 1;
	overflow-wrap: break-word;
	word-wrap: break-word;
	word-break: break-word;
	hyphens: auto;
}

.taxonomy-filter-card-title a {
	color: var(--tf-text);
	text-decoration: none;
	transition: color var(--tf-transition);
}

.taxonomy-filter-card-title a:hover {
	color: var(--tf-green);
}

/* --- Price --- */
.taxonomy-filter-card-price {
	font-size: 17px;
	font-weight: 800;
	color: var(--tf-text);
	margin: 0;
	line-height: 1.2;
	overflow-wrap: break-word;
}

.taxonomy-filter-card-price del,
.taxonomy-filter-card-price .woocommerce-Price-currencySymbol+del {
	color: var(--tf-text-light);
	font-size: 13px;
	font-weight: 400;
	margin-right: 4px;
}

/* --- Installment --- */
.tf-card-installment {
	font-size: 12px;
	color: var(--tf-text-muted);
	margin: 0;
	line-height: 1.3;
}

/* --- Action Button --- */
.taxonomy-filter-card-actions {
	margin-top: auto;
}

html body .taxonomy-filter-wrapper a.taxonomy-filter-btn-cart,
html body .taxonomy-filter-wrapper .taxonomy-filter-btn-cart,
.taxonomy-filter-btn-cart {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	gap: 6px !important;
	margin-top: 10px !important;
	width: 100% !important;
	padding: 9px 10px !important;
	background: var(--tf-cta-bg) !important;
	color: var(--tf-cta-color) !important;
	border: var(--tf-cta-border-width) solid var(--tf-cta-border-color) !important;
	border-radius: var(--tf-cta-radius) !important;
	font-size: var(--tf-cta-font-size) !important;
	font-weight: var(--tf-cta-font-weight) !important;
	line-height: 1.2 !important;
	text-decoration: none !important;
	cursor: pointer;
	font-family: var(--tf-font);
	transition: background var(--tf-transition), color var(--tf-transition), box-shadow var(--tf-transition), border-color var(--tf-transition);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	box-sizing: border-box !important;
}

html body .taxonomy-filter-wrapper a.taxonomy-filter-btn-cart:hover,
html body .taxonomy-filter-wrapper .taxonomy-filter-btn-cart:hover,
.taxonomy-filter-btn-cart:hover {
	background: var(--tf-cta-hover-bg) !important;
	color: var(--tf-cta-hover-color) !important;
	border-color: var(--tf-cta-hover-bg) !important;
	box-shadow: var(--tf-cta-hover-shadow);
}

html body .taxonomy-filter-wrapper .taxonomy-filter-btn-cart svg {
	width: 15px !important;
	height: 15px !important;
	flex-shrink: 0 !important;
	stroke: currentColor !important;
	fill: none !important;
	display: inline-block !important;
	vertical-align: middle !important;
	margin: 0 !important;
	transition: stroke var(--tf-transition);
}

html body .taxonomy-filter-wrapper .taxonomy-filter-btn-cart::before,
html body .taxonomy-filter-wrapper .taxonomy-filter-btn-cart::after {
	display: none !important;
}

html body .taxonomy-filter-wrapper .taxonomy-filter-btn-cart.loading::after {
	display: inline-block !important;
}

/* Elementor card reset — full isolation */
.taxonomy-filter-card.taxonomy-filter-elementor-card {
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	transform: none;
	padding: 0;
	margin: 0;
	overflow: visible;
	min-width: 0;
	max-width: 100%;
}

.taxonomy-filter-card.taxonomy-filter-elementor-card:hover {
	box-shadow: none;
	transform: none;
}

/* Force Elementor inner content to respect grid */
.taxonomy-filter-card.taxonomy-filter-elementor-card>.elementor {
	width: 100%;
}

.taxonomy-filter-card.taxonomy-filter-elementor-card .elementor-section-wrap>.elementor-section,
.taxonomy-filter-card.taxonomy-filter-elementor-card .elementor-widget-wrap {
	padding: 0 !important;
	margin: 0 !important;
}

/* No products */
.taxonomy-filter-no-products {
	grid-column: 1 / -1;
	text-align: center;
	padding: 48px 24px;
	color: var(--tf-text-muted);
	background: var(--tf-bg);
	border-radius: var(--tf-radius-lg);
	font-size: 15px;
}

/* --------------------------------------------------------------------------
   LOADER
   -------------------------------------------------------------------------- */
.taxonomy-filter-loader {
	position: absolute;
	top: 120px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 20;
	background: rgba(255, 255, 255, 0.92);
	padding: 14px 22px;
	border-radius: 30px;
	box-shadow: var(--tf-shadow);
}

.tf-spinner {
	width: 26px;
	height: 26px;
	border: 3px solid #E5EAE6;
	border-top-color: var(--tf-green);
	border-radius: 50%;
	animation: tf-spin 0.7s linear infinite;
}

@keyframes tf-spin {
	to {
		transform: rotate(360deg);
	}
}

/* --------------------------------------------------------------------------
   PAGINATION — compact, single-line layout
   -------------------------------------------------------------------------- */
.taxonomy-filter-pagination {
	margin-top: 36px;
	display: flex;
	justify-content: center;
}

.taxonomy-filter-pagination-nav {
	width: 100%;
}

.taxonomy-filter-pagination-list {
	display: flex;
	list-style: none;
	padding: 0;
	margin: 0;
	gap: 4px;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
}

.tf-page-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 8px;
	background: var(--tf-white);
	border: 1px solid var(--tf-border);
	border-radius: var(--tf-radius-sm);
	color: var(--tf-text);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: all var(--tf-transition);
	white-space: nowrap;
	font-family: var(--tf-font);
}

a.tf-page-link:hover {
	border-color: var(--tf-green);
	color: var(--tf-green);
	background: var(--tf-green-light);
}

.tf-page-link.tf-current {
	background: var(--tf-green);
	border-color: var(--tf-green);
	color: var(--tf-white);
}

.tf-page-link.tf-prev,
.tf-page-link.tf-next {
	padding: 0 10px;
	font-size: 18px;
	font-weight: 400;
	color: var(--tf-text);
	line-height: 1;
}

.tf-page-ellipsis {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 34px;
	color: var(--tf-text-muted);
	font-size: 14px;
}

/* --------------------------------------------------------------------------
   SIDEBAR MOBILE OVERLAY
   -------------------------------------------------------------------------- */
.tf-sidebar-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .8);
	z-index: 999;
}

.tf-sidebar-overlay.open {
	display: block;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tablet (≤ 1200px): 3 columns
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
	.taxonomy-filter-grid {
		--tf-cols: 3 !important;
		gap: 18px;
	}
}

/* --------------------------------------------------------------------------
   Mobile landscape / small tablet (≤ 900px)
   Sidebar → off-canvas drawer; Grid → 2 columns
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.taxonomy-filter-wrapper {
		flex-direction: column;
		gap: 0;
	}

	/* Sidebar = off-canvas drawer */
	.tf-sidebar {
		position: fixed;
		top: 0;
		left: -290px;
		height: 100%;
		height: 100dvh;
		width: 280px;
		background: var(--tf-white);
		z-index: 9999;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 24px 20px;
		box-shadow: var(--tf-shadow-lg);
		transition: left 0.3s ease;
		flex: none;
		min-width: unset;
		max-width: unset;
	}

	.tf-sidebar.open {
		left: 0;
	}

	/* Show mobile filters button */
	html body .taxonomy-filter-wrapper button.tf-btn-filters,
	html body .taxonomy-filter-wrapper button[type=button].tf-btn-filters,
	html body .taxonomy-filter-wrapper [type=button].tf-btn-filters,
	.taxonomy-filter-wrapper .tf-btn-filters,
	.tf-btn-filters {
		display: flex !important;
	}

	.tf-topbar {
		margin-bottom: 16px;
	}

	/* Grid → 2 columns */
	.taxonomy-filter-grid {
		--tf-cols: 2 !important;
		gap: 14px;
	}

	/* Card adjustments */
	.taxonomy-filter-card-body {
		padding: 10px 12px 14px;
	}

	.taxonomy-filter-card-title {
		font-size: 13px;
		margin-bottom: 6px;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.taxonomy-filter-card-price {
		font-size: 15px;
	}

	.tf-card-installment {
		font-size: 11px;
		margin-bottom: 8px;
	}

	.taxonomy-filter-btn-cart {
		font-size: 12px;
		padding: 8px 8px;
		gap: 5px;
	}

	.tf-card-badge {
		font-size: 10px;
		padding: 3px 8px;
		top: 8px;
		left: 8px;
	}

	.tf-wishlist-btn {
		width: 28px;
		height: 28px;
		top: 8px;
		right: 8px;
	}

	.tf-wishlist-btn svg {
		width: 13px;
		height: 13px;
	}

	/* Disable list view on mobile — force grid */
	.taxonomy-filter-grid.tf-list-view {
		--tf-cols: 2 !important;
	}

	.taxonomy-filter-grid.tf-list-view .taxonomy-filter-card {
		flex-direction: column;
		max-height: none;
	}

	.taxonomy-filter-grid.tf-list-view .taxonomy-filter-card-image-link {
		flex: none;
		aspect-ratio: 1 / 1;
		height: auto;
	}

	.taxonomy-filter-grid.tf-list-view .taxonomy-filter-card-body {
		flex-direction: column;
		gap: 0;
	}

	.taxonomy-filter-grid.tf-list-view .taxonomy-filter-card-actions {
		margin-top: auto;
	}
}

/* --------------------------------------------------------------------------
   Small Mobile (≤ 576px)
   -------------------------------------------------------------------------- */
@media (max-width: 576px) {
	.taxonomy-filter-wrapper {
		margin: 12px 0 32px;
		width: 100%;
	}

	.tf-main {
		width: 100%;
		flex: 1 1 100%;
		min-width: 0;
	}

	/* 2 columns, tighter gap */
	.taxonomy-filter-grid {
		--tf-cols: 2 !important;
		gap: 10px;
		width: 100%;
		min-width: 100%;
	}

	/* Top bar */
	.tf-sort-label {
		display: none;
	}

	.tf-topbar {
		flex-wrap: wrap;
		gap: 8px;
	}

	.tf-sort-select {
		font-size: 13px;
		padding: 7px 28px 7px 10px;
	}

	.tf-view-toggle {
		display: none;
	}

	.tf-btn-filters {
		font-size: 13px;
		padding: 7px 14px;
	}

	/* Cards */
	.taxonomy-filter-card-body {
		padding: 8px 10px 12px;
	}

	.taxonomy-filter-card-title {
		font-size: 12px;
		line-height: 1.35;
		margin-bottom: 5px;
	}

	.taxonomy-filter-card-price {
		font-size: 14px;
	}

	.tf-card-installment {
		font-size: 10px;
	}

	.taxonomy-filter-btn-cart {
		font-size: var(--tf-cta-font-size, 11px);
		padding: 7px 6px;
		gap: 4px;
	}

	.taxonomy-filter-btn-cart svg {
		width: 12px;
		height: 12px;
	}

	.tf-card-badge {
		font-size: 9px;
		padding: 2px 7px;
		top: 6px;
		left: 6px;
	}

	.tf-wishlist-btn {
		width: 26px;
		height: 26px;
	}

	.tf-wishlist-btn svg {
		width: 12px;
		height: 12px;
	}

	.tf-stars svg {
		width: 12px;
		height: 12px;
	}

	.tf-rating-count {
		font-size: 10px;
	}

	/* Mobile Skeleton adjustment to match real mobile cards */
	.tf-skeleton-body {
		padding: 8px 10px;
		gap: 6px;
	}

	.tf-skeleton-stars {
		width: 35%;
		height: 10px;
	}

	.tf-skeleton-title {
		width: 85%;
		height: 12px;
	}

	.tf-skeleton-price {
		width: 50%;
		height: 14px;
	}

	.tf-skeleton-btn {
		height: 28px;
		margin-top: 4px;
	}

	/* Pagination — compact on mobile */
	.tf-page-link {
		min-width: 28px;
		height: 28px;
		font-size: 11px;
		padding: 0 6px;
	}

	.tf-page-link.tf-prev,
	.tf-page-link.tf-next {
		padding: 0 8px;
		font-size: 16px;
	}

	.tf-page-ellipsis {
		min-width: 18px;
		height: 28px;
		font-size: 12px;
	}

	.taxonomy-filter-pagination {
		margin-top: 24px;
	}
}

/* --------------------------------------------------------------------------
   Very small screens (≤ 400px): single column
   -------------------------------------------------------------------------- */
@media (max-width: 400px) {
	.taxonomy-filter-grid {
		--tf-cols: 1 !important;
		gap: 12px;
	}

	.taxonomy-filter-card-title {
		font-size: 13px;
		-webkit-line-clamp: unset;
	}

	.taxonomy-filter-card-price {
		font-size: 16px;
	}

	.taxonomy-filter-btn-cart {
		font-size: 13px;
		padding: 9px 10px;
	}
}

/* --------------------------------------------------------------------------
   List View (desktop only, ≥ 901px)
   -------------------------------------------------------------------------- */
@media (min-width: 901px) {
	.taxonomy-filter-grid.tf-list-view .taxonomy-filter-card {
		flex-direction: row;
		max-height: 160px;
	}

	.taxonomy-filter-grid.tf-list-view .taxonomy-filter-card-image-link {
		flex: 0 0 140px;
		aspect-ratio: unset;
		height: 158px;
	}

	.taxonomy-filter-grid.tf-list-view .taxonomy-filter-card-body {
		flex-direction: row;
		align-items: center;
		gap: 16px;
		flex-wrap: wrap;
	}

	.taxonomy-filter-grid.tf-list-view .taxonomy-filter-card-title {
		flex: 1;
		font-size: 15px;
	}

	.taxonomy-filter-grid.tf-list-view .taxonomy-filter-card-actions {
		margin-top: 0;
	}
}

/* --------------------------------------------------------------------------
   SKELETON SHIMMER LOADER
   -------------------------------------------------------------------------- */
@keyframes tfShimmer {
	0% {
		background-position: -200% 0;
	}

	100% {
		background-position: 200% 0;
	}
}

.tf-shimmer {
	background: linear-gradient(90deg,
			#f0f2f1 25%,
			#e5eae6 37%,
			#f0f2f1 63%);
	background-size: 400% 100%;
	animation: tfShimmer 1.4s ease infinite;
}

.tf-skeleton-card {
	background: #ffffff;
	border: 1px solid var(--tf-card-border-color);
	border-radius: var(--tf-radius-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-width: 0;
	box-shadow: var(--tf-card-shadow);
}

.tf-skeleton-img {
	aspect-ratio: 1 / 1;
	width: 100%;
}

.tf-skeleton-body {
	padding: var(--tf-card-body-padding);
	display: flex;
	flex-direction: column;
	gap: var(--tf-card-gap);
	flex-grow: 1;
}

.tf-skeleton-line {
	border-radius: 4px;
}

.tf-skeleton-cat {
	width: 35%;
	height: 11px;
}

.tf-skeleton-stars {
	width: 40%;
	height: 12px;
}

.tf-skeleton-title {
	width: 85%;
	height: 16px;
}

.tf-skeleton-price {
	width: 50%;
	height: 18px;
}

.tf-skeleton-btn {
	width: 100%;
	height: 36px;
	margin-top: auto;
	border-radius: var(--tf-cta-radius);
}

/* --------------------------------------------------------------------------
   LOAD MORE & INFINITE SCROLL
   -------------------------------------------------------------------------- */
.tf-pagination-container {
	margin-top: 32px;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.tf-load-more-wrap {
	display: flex;
	justify-content: center;
	width: 100%;
}

.tf-btn-load-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 28px;
	background: var(--tf-green);
	color: #ffffff;
	border: 1px solid var(--tf-green-dark);
	border-radius: var(--tf-cta-radius, 8px);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background var(--tf-transition), transform var(--tf-transition), box-shadow var(--tf-transition);
	box-shadow: 0 2px 8px rgba(14, 107, 61, 0.18);
}

.tf-btn-load-more:hover {
	background: var(--tf-green-dark);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(14, 107, 61, 0.25);
}

.tf-btn-load-more:disabled,
.tf-btn-load-more.is-loading {
	opacity: 0.8;
	cursor: wait;
	transform: none;
}

.tf-load-more-spinner {
	width: 14px;
	height: 14px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top-color: #ffffff;
	border-radius: 50%;
	animation: tfSpinner .6s linear infinite;
}

.tf-infinite-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 24px 0;
	width: 100%;
}

.tf-infinite-spinner {
	width: 28px;
	height: 28px;
	border: 3px solid var(--tf-border);
	border-top-color: var(--tf-green);
	border-radius: 50%;
	animation: tfSpinner .7s linear infinite;
}

.tf-no-more-products {
	font-size: 13px;
	font-weight: 500;
	color: var(--tf-text-muted);
	text-align: center;
	margin: 16px 0;
	opacity: 0.7;
}

/* --------------------------------------------------------------------------
   PRIMARY CATEGORY & PRICE INQUIRY IN CARD
   -------------------------------------------------------------------------- */
.tf-card-primary-cat {
	font-size: var(--tf-card-cat-font-size, 11px);
	font-weight: var(--tf-card-cat-font-weight, 700);
	color: var(--tf-card-cat-color, #0E6B3D);
	text-transform: var(--tf-card-cat-transform, uppercase);
	letter-spacing: 0.05em;
	line-height: 1.25;
	margin-bottom: 2px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tf-price-inquiry {
	font-size: var(--tf-price-inquiry-font-size, 14px);
	font-weight: var(--tf-price-inquiry-font-weight, 700);
	color: var(--tf-price-inquiry-color, #0E6B3D);
	line-height: 1.3;
	margin: 2px 0;
	letter-spacing: 0.02em;
}