/*
 * Aromars: catálogo (tienda, categorías y etiquetas) sobre Filter Everything y Avada.
 *
 * Mobile first: la base es móvil y el escritorio se añade desde 769px, el corte en el que el
 * plugin deja de mostrar el botón "Filtros". Excepción: el reordenamiento de la estructura de
 * Avada en móvil va en max-width (ver el bloque al final), porque sus valores de escritorio
 * son los del propio Avada y no se redeclaran aquí.
 */

/* Contador: "[N] perfumes disponibles en decant". En móvil va junto a "Filtros"; en escritorio, bajo el título. */
.aw-catalogo-encabezado .wpc-posts-found {
	display: none;
}

.aw-catalogo .wpc-posts-found p {
	margin: 0;
	color: var(--awb-color6);
}

.aw-catalogo-filtros .wpc-posts-found p {
	font-size: 13px;
}

/* Ordenar: etiqueta y select en una fila; en móvil el select ocupa el ancho restante, como el buscador. */
.aw-catalogo-encabezado .fusion-column-wrapper.fusion-flex-justify-content-flex-end {
	justify-content: flex-start;
}

.aw-catalogo-encabezado .widget_wpc_sorting_widget {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	margin: 0;
}

.aw-catalogo-encabezado .widget_wpc_sorting_widget .widgettitle {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: var(--awb-typography4-font-family);
	font-size: 14px;
	font-weight: 300;
	letter-spacing: normal;
	text-transform: none;
	color: var(--awb-color6);
}

.aw-catalogo-encabezado .wpc-sorting-form {
	flex: 1;
}

.aw-catalogo-encabezado .wpc-orderby-select {
	width: 100%;
	max-width: none;
	height: 46px;
	padding: 0 12px;
	border: 1px solid var(--awb-color3);
	border-radius: 0;
	background-color: var(--awb-color2);
	color: var(--awb-color8);
	font-size: 14px;
}

/* Contenedor vacío del plugin tras el select: ocupaba un hueco del gap. */
.aw-catalogo-encabezado .wpc-after-sorting-form:empty {
	display: none;
}

/* Chips de categorías en una sola fila con scroll horizontal (en escritorio caben sin scroll). */
.aw-chips .awb-menu__main-ul {
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
}

.aw-chips .awb-menu__main-li {
	flex: none;
}

/* Buscador del set de filtros (el plugin usa un selector de 4 clases). */
.aw-catalogo-filtros .wpc-filters-widget-content .wpc-filters-section .wpc-filter-search-form .wpc-search-field {
	height: 46px;
	border: 1px solid var(--awb-color3);
	border-radius: 0;
	background-color: var(--awb-color2);
	color: var(--awb-color8);
	font-size: 15px;
}

/* Grupos de filtros: línea superior y título en versalitas grises. */
.aw-catalogo-filtros .wpc-filters-main-wrap .wpc-filters-section:not(.wpc-filter-layout-search-field) {
	margin-bottom: 32px;
	padding-top: 20px;
	border-top: 1px solid var(--awb-color3);
}

.aw-catalogo-filtros .wpc-filters-main-wrap .wpc-filter-title {
	margin: 0 0 12px;
	font-family: var(--awb-typography4-font-family);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--awb-color6);
}

/* Checkbox nativo con el dorado del tema, como en el diseño. */
.aw-catalogo-filtros .wpc-filters-main-wrap .wpc-term-item input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 0 12px 0 0;
	accent-color: var(--awb-color5);
}

.aw-catalogo-filtros .wpc-filters-main-wrap .wpc-term-item label,
.aw-catalogo-filtros .wpc-filters-main-wrap .wpc-term-item label a {
	font-size: 15px;
	color: var(--awb-color8);
}

.aw-catalogo-filtros .wpc-filters-main-wrap .wpc-see-more-control {
	color: var(--awb-color5);
}

/* La versión gratis solo activa los contadores para todo el set; el diseño los muestra solo en Marca. */
.wpc-filters-main-wrap .wpc-filters-section:not(.wpc-filter-product_brand) .wpc-term-count {
	display: none;
}

/* Marca: número sin paréntesis, alineado a la derecha y en gris. */
.wpc-filters-main-wrap .wpc-filter-product_brand .wpc-term-count-brackets-open,
.wpc-filters-main-wrap .wpc-filter-product_brand .wpc-term-count-brackets-close {
	display: none;
}

.wpc-filters-main-wrap .wpc-filter-product_brand .wpc-term-item-content-wrapper label {
	display: flex;
	flex: 1;
	align-items: center;
}

.wpc-filters-main-wrap .wpc-filter-product_brand .wpc-term-count {
	margin-left: auto;
	color: var(--awb-color6);
	font-size: 13px;
}

/* Botón "Filtros" (el plugin solo lo muestra hasta 768px). */
body .aw-catalogo-filtros .wpc-filters-open-button-container {
	padding: 0;
}

body .aw-catalogo-filtros .wpc-filters-open-button-container a.wpc-open-close-filters-button {
	height: 36px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid var(--awb-color7);
	border-radius: 0;
	color: var(--awb-color8);
	font-size: 13px;
	line-height: 34px;
}

.aw-catalogo-filtros .wpc-open-close-filters-button .wpc-icon-html-wrapper span,
.aw-catalogo-filtros .wpc-open-close-filters-button .wpc-icon-html-wrapper span::after {
	border-color: var(--awb-color8);
	background-color: var(--awb-color8);
}

.aw-catalogo-filtros .wpc-open-close-filters-button .wpc-icon-html-wrapper span::after {
	background-color: var(--awb-color1);
}

/*
 * Paginación: tamaño y radio salen de Avada (Opciones globales → Paginación); aquí los colores
 * del diseño. En móvil Anterior/Siguiente son círculos con flecha para que todo quepa en una fila.
 */
.aw-catalogo .pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 6px;
	margin-top: 32px;
	padding-top: 32px;
	border-top: 1px solid var(--awb-color3);
}

/* El clearfix de Avada (::before/::after) sobra en flex y cuenta como items del gap. */
.aw-catalogo .pagination::before,
.aw-catalogo .pagination::after {
	display: none;
}

/* Avada suma margen lateral a cada botón (width/height ÷ 10); el espacio lo da el gap. */
#content .aw-catalogo .pagination > * {
	margin: 0;
}

.aw-catalogo .pagination a,
.aw-catalogo .pagination .current {
	border: 1px solid var(--awb-color3);
	color: var(--awb-color8);
}

.aw-catalogo .pagination .pagination-dots {
	color: var(--awb-color6);
}

.aw-catalogo .pagination .current {
	border-color: var(--awb-color5);
	background-color: var(--awb-color5);
	color: var(--awb-color1);
	font-weight: 500;
}

.aw-catalogo .pagination a:hover {
	border-color: var(--awb-color5);
	color: var(--awb-color5);
}

/* Anterior / Siguiente (Avada les quita el borde con .fusion-show-pagination-text). */
body .aw-catalogo .pagination a.pagination-prev,
body .aw-catalogo .pagination a.pagination-next {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: var(--pagination_width_height, 44px);
	height: var(--pagination_width_height, 44px);
	box-sizing: border-box;
	padding: 0;
	border: 1px solid var(--awb-color7);
	border-radius: 22px;
}

/* Avada dibuja las flechas como ::before/::after absolutos fuera del enlace; se meten dentro. */
body .aw-catalogo .pagination a.pagination-prev::before,
body .aw-catalogo .pagination a.pagination-next::after {
	position: static;
	margin: 0;
	line-height: 1;
	transform: none;
}

/* En móvil, el texto solo para lectores de pantalla. */
.aw-catalogo .pagination .page-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (min-width: 769px) {
	.aw-catalogo-encabezado .wpc-posts-found {
		display: block;
	}

	.aw-catalogo-filtros .fusion-column-wrapper > .wpc-posts-found {
		display: none;
	}

	/* Ordenar a la derecha del título, con el select a su ancho natural. */
	.aw-catalogo-encabezado .fusion-column-wrapper.fusion-flex-justify-content-flex-end {
		justify-content: flex-end;
	}

	.aw-catalogo-encabezado .widget_wpc_sorting_widget {
		width: auto;
	}

	.aw-catalogo-encabezado .wpc-sorting-form {
		flex: none;
	}

	.aw-catalogo-encabezado .wpc-orderby-select {
		width: auto;
	}

	/* Paginación: Anterior/Siguiente como píldoras con texto. */
	.aw-catalogo .pagination {
		gap: 8px;
	}

	body .aw-catalogo .pagination a.pagination-prev,
	body .aw-catalogo .pagination a.pagination-next {
		width: auto;
		padding: 0 16px;
	}

	.aw-catalogo .pagination .page-text {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip-path: none;
	}
}

/*
 * Estructura móvil: orden del diseño título y ordenar → buscador → chips → "[N] perfumes" +
 * "Filtros" → panel → productos. El buscador vive en el widget de la columna de filtros, en otro
 * contenedor que los chips: ese contenedor y el widget no generan caja, así sus piezas son items
 * de .post-content y se ordenan con order. El panel se abre con las clases que alterna
 * assets/js/filtros-catalogo.js. Va en max-width porque en escritorio rige la estructura de Avada.
 */
@media (max-width: 768px) {
	#content .post-content:has(> .aw-catalogo) {
		/* Margen de las piezas sueltas para alinearlas con el padding de 24px de los contenedores. */
		--aw-lateral: calc(24px - var(--hundredp_padding, 30px));

		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	/* flex-grow absorbe los márgenes negativos con los que Avada estira los contenedores. */
	#content .post-content:has(> .aw-catalogo) > * {
		flex: 1 1 100%;
		min-width: 0;
	}

	/* Avada no tiene padding de página móvil: sin él, el título queda a 24px del header (padding_top_small del contenedor). */
	#main:has(.aw-catalogo) {
		--main_padding-top: 0px;
	}

	.aw-catalogo-encabezado {
		order: 1;
	}

	.aw-catalogo-categorias {
		order: 3;
	}

	/* Sin caja: contenedor, fila y columna de filtros (Avada les fija flex con varias clases), widget y panel. */
	#content .post-content > .aw-catalogo,
	#content .aw-catalogo > .fusion-builder-row,
	#content .aw-catalogo .aw-catalogo-filtros,
	#content .aw-catalogo-filtros > .fusion-column-wrapper,
	.aw-catalogo-filtros .widget_wpc_filters_widget,
	.aw-catalogo-filtros .wpc-filters-main-wrap,
	body.wpc_show_open_close_button .aw-catalogo .aw-catalogo-filtros .wpc-filters-widget-content,
	.aw-catalogo-filtros .wpc-filters-widget-containers-wrapper,
	.aw-catalogo-filtros .wpc-filters-scroll-container,
	.aw-catalogo-filtros .wpc-filters-widget-wrapper {
		display: contents;
	}

	/* Piezas sueltas: el margen lateral sustituye al padding del contenedor que ya no existe. */
	.aw-catalogo-filtros .wpc-filters-widget-top-container,
	.aw-catalogo-filtros .wpc-filters-section {
		flex: 1 1 100%;
		margin-inline: var(--aw-lateral);
		order: 6;
	}

	.aw-catalogo-filtros .wpc-filters-section.wpc-filter-layout-search-field {
		order: 2;
		margin-bottom: 16px;
	}

	.aw-catalogo-filtros .fusion-column-wrapper > .wpc-posts-found {
		flex: 1 1 0;
		order: 4;
		margin: 8px 12px 24px var(--aw-lateral);
	}

	.aw-catalogo-filtros .wpc-filters-open-button-container {
		flex: none;
		order: 5;
		margin: 8px var(--aw-lateral) 24px 0;
	}

	/* Solo la columna de productos: las tarjetas también son .fusion-layout-column. */
	#content .aw-catalogo > .fusion-builder-row > .fusion-layout-column:not(.aw-catalogo-filtros) {
		flex: 1 1 100%;
		order: 7;
		padding-bottom: 96px;
	}

	/* Avada aplica el espaciado entre columnas como margen del wrapper; se sustituye por el lateral. */
	#content .aw-catalogo > .fusion-builder-row > .fusion-layout-column:not(.aw-catalogo-filtros) > .fusion-column-wrapper {
		width: auto;
		margin-inline: var(--aw-lateral);
	}

	/* Panel cerrado: solo el buscador. */
	.aw-catalogo-filtros .wpc-filters-widget-content:not(.wpc-opened) .wpc-filters-widget-top-container,
	.aw-catalogo-filtros .wpc-filters-widget-content:not(.wpc-opened) .wpc-filters-section:not(.wpc-filter-layout-search-field) {
		display: none;
	}
}