/* Unlayered overrides for WooCommerce category archive pages.
 * Loaded after WooCommerce plugin CSS so these rules win. */

.product-card {
	display: flex;
	flex-direction: column;
}

body.woocommerce .vaer-category-products ul.products {
	margin-top: 0;
}

body.woocommerce .vaer-category-products ul.products li.product {
	width: auto;
}

body.woocommerce .vaer-category-products.vaer-view-list ul.products {
	display: flex;
	flex-direction: column;
	grid-template-columns: none;
	gap: var(--space-16);
}

body.woocommerce .vaer-category-products.vaer-view-list ul.products li.product {
	width: 100%;
	max-width: 100%;
}

.vaer-category-products.vaer-view-list .product-card {
	flex-direction: row;
	align-items: stretch;
	max-width: none;
}

.vaer-category-products.vaer-view-list .product-card-image {
	width: 240px;
	aspect-ratio: 218 / 145;
	flex-shrink: 0;
}

.vaer-category-products.vaer-view-list .product-card-content {
	flex: 1;
	justify-content: center;
}

.vaer-category-products.vaer-view-list .product-card-actions {
	flex: 0 0 240px;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	width: 240px;
}

.vaer-category-products.vaer-view-list .product-card-btn {
	flex: 0 0 38px;
	height: 38px;
}

.vaer-results-bar .woocommerce-ordering {
	margin: 0;
}

.vaer-category-sidebar .woocommerce-ordering {
	margin: 0;
	width: 100%;
}

@media (width <= 768px) {
	.vaer-view-list .product-card {
		flex-direction: column;
	}

	.vaer-view-list .product-card-image {
		width: 100%;
	}
}

/* ===== Products pagination (frame 85:1076) ===== */
/* body.woocommerce prefix beats WooCommerce core pagination styles (higher specificity). */
body.woocommerce .woocommerce-pagination {
	padding-top: var(--space-24);
}

body.woocommerce .woocommerce-pagination .page-numbers {
	list-style: none;
	margin: 0;
	padding: 0;
	border: none;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	white-space: normal;
}

body.woocommerce .woocommerce-pagination .page-numbers li {
	display: inline-flex;
	float: none;
	margin: 0;
	padding: 0;
	border: none;
	overflow: visible;
}

body.woocommerce .woocommerce-pagination .page-numbers li > a,
body.woocommerce .woocommerce-pagination .page-numbers li > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	min-width: 0;
	border: 1px solid var(--color-gray-150);
	border-radius: 7px;
	font-size: var(--font-size-sm);
	font-weight: 500;
	color: var(--color-gray-900);
	text-decoration: none;
	line-height: 1;
	transition: border-color 0.2s, color 0.2s, background 0.2s;
}

body.woocommerce .woocommerce-pagination .page-numbers li > a:hover,
body.woocommerce .woocommerce-pagination .page-numbers li > a:focus {
	border-color: var(--color-green-500);
	color: var(--color-green-700);
	background: transparent;
}

body.woocommerce .woocommerce-pagination .page-numbers .current {
	background: var(--color-green-500);
	border-color: var(--color-green-500);
	color: var(--color-white);
	font-weight: 700;
}

body.woocommerce .woocommerce-pagination .page-numbers .prev,
body.woocommerce .woocommerce-pagination .page-numbers .next {
	color: var(--color-gray-600);
}

body.woocommerce .woocommerce-pagination .page-numbers .prev svg,
body.woocommerce .woocommerce-pagination .page-numbers .next svg {
	display: block;
}

body.woocommerce .woocommerce-pagination .page-numbers .prev.disabled,
body.woocommerce .woocommerce-pagination .page-numbers .next.disabled {
	color: var(--color-gray-300);
	background: transparent;
	border-color: transparent;
	cursor: default;
}

body.woocommerce .woocommerce-pagination .page-numbers .dots {
	width: auto;
	padding: 0 var(--space-8);
	border: none;
	color: var(--color-gray-600);
	font-weight: 700;
}

/* En mobile/tablet la vista lista se renderiza como grilla (sin toggle). */
@media (width <= 1024px) {
	body.woocommerce .vaer-category-products.vaer-view-list ul.products {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
	}

	body.woocommerce .vaer-category-products.vaer-view-list ul.products li.product {
		width: auto;
		max-width: none;
	}

	.vaer-category-products.vaer-view-list .product-card {
		flex-direction: column;
	}

	.vaer-category-products.vaer-view-list .product-card-image {
		width: 100%;
		aspect-ratio: auto;
	}

	.vaer-category-products.vaer-view-list .product-card-actions {
		flex: none;
		flex-direction: row;
		width: auto;
	}
}

/* Resultados de búsqueda: grilla fija de 4 columnas (3 y 2 en breakpoints menores). */
.vaer-search-page ul.products.products {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.vaer-search-page ul.products.products li.product {
	float: none;
	width: auto;
	margin: 0;
	min-width: 0;
}

.vaer-search-page ul.products .product-card {
	min-width: 0;
	max-width: none;
}

@media (max-width: 1100px) {
	.vaer-search-page ul.products.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.vaer-search-page ul.products.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}