/* ---------------------------------------------------------------------------
 * Catálogo sobre Hello: columna de filtros, grilla y tarjeta.
 *
 * Los filtros pasan a ser una columna a la izquierda, que es la disposición
 * habitual de una tienda: los tres quedan a la vista al mismo tiempo, y elegir
 * uno no obliga a volver a buscar dónde estaban los otros dos. Antes eran una
 * barra horizontal arriba de la grilla, heredada de cuando el tema era Goya.
 *
 * Abajo de 1024 no hay lugar para dos columnas, así que la misma columna se
 * convierte en un panel que entra desde el costado con un botón "Filtros". El
 * marcado es el mismo en los dos casos; lo único que cambia es el CSS.
 *
 * Los desplegables en sí los dibuja el plugin wc-ajax-product-filter, así que su
 * marcado no cambia con el tema: lo único que hay que rehacer es el envoltorio.
 * ------------------------------------------------------------------------ */
/*
 * El título va alineado a la izquierda y no centrado. Con los filtros en
 * columna, todo lo que hay debajo arranca en el mismo borde: la miga de pan
 * arriba, la columna, la grilla. Un título centrado sobre un cuerpo alineado a
 * la izquierda es la única pieza que no sigue esa línea.
 */
.woocommerce-products-header {
	margin: 0 0 1.4rem;
	text-align: left;
}

.woocommerce-products-header__title {
	margin: 0;
	font-family: var(--insu-font-heading);
	font-size: clamp(1.9rem, 3.4vw, 2.6rem);
	font-weight: 600;
	line-height: 1.1;
	color: var(--insu-color-ink);
}

/* ---------------------------------------------------------------------------
 * La grilla de la página: columna de filtros y columna de resultados.
 * ------------------------------------------------------------------------ */
.insu-catalogo {
	display: grid;
	grid-template-columns: 16.5rem minmax(0, 1fr);
	gap: 2.25rem;
	align-items: start;
}

.insu-catalogo__resultados {
	min-width: 0;
}

.insu-shop-sidebar {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	/*
	 * Acompaña el scroll. El desfasaje son los 90 px de la cabecera, que es
	 * sticky: sin eso la columna se pega al borde de arriba y le queda medio
	 * filtro tapado.
	 */
	position: sticky;
	top: calc(90px + 1.25rem);
	margin: 0;
	padding: 1.25rem;
	background: #fff;
	border: 1px solid var(--insu-color-border-soft);
	border-radius: var(--insu-radius-lg);
}

/* El encabezado sólo hace falta cuando la columna es un panel: ver más abajo. */
.insu-shop-sidebar__cabecera {
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: .9rem;
	border-bottom: 1px solid var(--insu-color-border-soft);
}

.insu-shop-sidebar__titulo {
	margin: 0;
	font-family: var(--insu-font-heading);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--insu-color-ink);
}

/*
 * El color va explícito en los dos estados. El tema define
 * button:hover { background-color:#c36; color:#fff } para todo el sitio, y esa
 * regla vale (0,1,1): le gana a cualquier botón nuestro definido con una sola
 * clase, que vale (0,1,0). Sin un hover propio, el rótulo se vuelve blanco
 * sobre un fondo claro y desaparece.
 */
.insu-shop-sidebar__cerrar:hover,
.insu-shop-sidebar__cerrar:focus-visible {
	background: var(--insu-color-surface-soft);
	color: var(--insu-color-accent);
	border-color: var(--insu-color-border-control);
}

.insu-catalogo__filtrar:hover,
.insu-catalogo__filtrar:focus-visible {
	background: var(--insu-color-surface-soft);
	color: var(--insu-color-accent);
	border-color: var(--insu-color-accent);
}

.insu-shop-sidebar__cerrar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--insu-color-border-soft);
	border-radius: var(--insu-radius-md);
	background: #fff;
	color: var(--insu-color-ink);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.insu-shop-sidebar__cuerpo {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.insu-shop-filtro {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.insu-shop-filtro__titulo {
	margin: 0 0 .45rem;
	font-family: var(--insu-font-heading);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .09em;
	line-height: 1.2;
	text-align: left;
	text-transform: uppercase;
	color: var(--insu-color-text-muted);
}

/* El plugin envuelve cada desplegable en una lista. */
.insu-shop-filtro ul,
.insu-shop-filtro li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.insu-shop-filtro select {
	width: 100%;
	height: 44px;
	padding: 0 2.2rem 0 .9rem;
	border: 1px solid var(--insu-color-border-control);
	border-radius: var(--insu-radius-md);
	background-color: #fff;
	color: var(--insu-color-ink);
	font-family: var(--insu-font-body);
	font-size: .92rem;
	line-height: 1.2;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	/* La flecha, dibujada con gradientes: sin imagen ni fuente de iconos. */
	background-image:
		linear-gradient(45deg, transparent 50%, var(--insu-color-ink-soft) 50%),
		linear-gradient(135deg, var(--insu-color-ink-soft) 50%, transparent 50%);
	background-position:
		calc(100% - 1.15rem) calc(50% + 1px),
		calc(100% - .8rem) calc(50% + 1px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}

.insu-shop-filtro select:hover {
	border-color: var(--insu-color-accent);
}

.insu-shop-filtro select:focus-visible {
	outline: 2px solid rgba(164, 44, 23, .24);
	outline-offset: 0;
	border-color: var(--insu-color-accent);
}

/* ---------------------------------------------------------------------------
 * La grilla de productos.
 *
 * WooCommerce todavía la arma con float y anchos en porcentaje calculados por
 * él: ul.products queda en display:block y cada li.product en float:left con un
 * width de 22.05% y un margen derecho de 3.8%. Es la disposición de antes de que
 * existiera grid, y trae sus problemas: las tarjetas de una fila no comparten
 * alto, así que los botones de abajo quedan a distinta altura según lo largo que
 * sea cada rótulo.
 *
 * Los selectores llevan .insu-catalogo y .insu-catalogo__resultados por delante
 * para ganarle en especificidad a la regla de WooCommerce sin recurrir a
 * !important: la suya es .woocommerce ul.products li.product, y con las dos
 * clases nuestras quedamos por encima sin depender de en qué orden se encolan
 * las hojas.
 * ------------------------------------------------------------------------ */
.insu-catalogo .insu-catalogo__resultados ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* El clearfix de WooCommerce crea dos celdas fantasma en la grilla. */
.insu-catalogo .insu-catalogo__resultados ul.products::before,
.insu-catalogo .insu-catalogo__resultados ul.products::after {
	content: none;
}

@media (min-width: 600px) {
	.insu-catalogo .insu-catalogo__resultados ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1300px) {
	.insu-catalogo .insu-catalogo__resultados ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ---------------------------------------------------------------------------
 * La tarjeta.
 * ------------------------------------------------------------------------ */
.insu-catalogo .insu-catalogo__resultados ul.products li.product {
	/* Contexto para el botón de sumar al pedido, que se apoya sobre la imagen. */
	position: relative;
	display: flex;
	flex-direction: column;
	float: none;
	clear: none;
	width: auto;
	margin: 0;
	padding: .9rem .9rem 1rem;
	background: #fff;
	border: 1px solid var(--insu-color-border-soft);
	border-radius: var(--insu-radius-lg);
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.insu-catalogo .insu-catalogo__resultados ul.products li.product:hover,
.insu-catalogo .insu-catalogo__resultados ul.products li.product:focus-within {
	border-color: var(--insu-color-border-control);
	box-shadow: var(--insu-shadow-soft);
	transform: translateY(-2px);
}

.insu-catalogo ul.products li.product > a.woocommerce-loop-product__link {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: .75rem;
	text-decoration: none;
}

/*
 * Las fotos vienen de laboratorios distintos y no comparten proporción: hay
 * envases altos, aerosoles finos y baldes anchos. Se las encuadra en un cuadrado
 * con object-fit: contain para que ninguna se recorte y todas las filas arranquen
 * a la misma altura.
 */
.insu-catalogo ul.products li.product img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	margin: 0;
	object-fit: contain;
	background: var(--insu-color-surface-soft);
	border-radius: var(--insu-radius-md);
}

.insu-catalogo ul.products li.product .woocommerce-loop-product__title {
	margin: 0;
	padding: 0;
	font-family: var(--insu-font-heading);
	font-size: .88rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--insu-color-ink);
}

/* El botón de sumar al pedido, sobre la esquina de la foto. */
.insu-catalogo ul.products li.product .insu-cart-add--catalog {
	position: absolute;
	top: 1.35rem;
	right: 1.35rem;
	z-index: 2;
}

/*
 * margin-top: auto empuja el botón al pie de la tarjeta. Con la tarjeta en flex
 * column, todas las filas terminan con el botón alineado aunque los rótulos
 * tengan uno, dos o tres renglones.
 */
.insu-catalogo ul.products li.product .insu-precio-consultar--btn {
	width: 100%;
	margin-top: .85rem;
}

/* ---------------------------------------------------------------------------
 * Abajo de 1024: la columna se vuelve panel.
 * ------------------------------------------------------------------------ */
.insu-catalogo__filtrar {
	display: none;
	align-items: center;
	gap: .5rem;
	min-height: 44px;
	margin: 0 0 1.1rem;
	padding: 0 1.1rem;
	border: 1px solid var(--insu-color-border-control);
	border-radius: 999px;
	background: #fff;
	color: var(--insu-color-ink);
	font-family: var(--insu-font-heading);
	font-size: .9rem;
	font-weight: 600;
	cursor: pointer;
}

.insu-catalogo__filtrar[data-cuenta]::after {
	content: attr(data-cuenta);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 .35rem;
	border-radius: 999px;
	background: var(--insu-color-accent);
	color: #fff;
	font-size: .72rem;
	font-weight: 700;
}

@media (max-width: 1024px) {
	.insu-catalogo {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.insu-catalogo__filtrar {
		display: inline-flex;
	}

	.insu-shop-sidebar__cabecera {
		display: flex;
	}

	.insu-shop-sidebar {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 1200;
		width: min(21rem, 88vw);
		max-height: 100%;
		overflow-y: auto;
		border-radius: 0;
		border-width: 0 1px 0 0;
		transform: translateX(-100%);
		transition: transform .22s ease;
	}

	body.insu-filtros-abiertos .insu-shop-sidebar {
		transform: translateX(0);
	}

	/*
	 * El velo es un pseudoelemento de la columna de resultados y no un div que
	 * agregue el JS: position: fixed lo saca igual del flujo, y así el panel se
	 * abre y se cierra sin tocar el árbol de la página.
	 */
	.insu-catalogo__resultados::before {
		content: '';
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1100;
		background: rgba(2, 6, 23, .5);
		opacity: 0;
		visibility: hidden;
		transition: opacity .22s ease, visibility .22s;
	}

	body.insu-filtros-abiertos .insu-catalogo__resultados::before {
		opacity: 1;
		visibility: visible;
	}

	body.insu-filtros-abiertos {
		overflow: hidden;
	}
}

/* ---------------------------------------------------------------------------
 * Los desplegables de los filtros, sobre el contenedor nuevo.
 *
 * Los dibuja Select2: el <select> real queda en 0x0 y lo visible es el marcado
 * que arma la librería. Todo este diseño ya existía, colgado de .shop-container,
 * que es el contenedor de Goya; acá va lo mismo, palabra por palabra, colgado de
 * .insu-shop-sidebar, que es el que imprime el tema. No se cambió ni una
 * declaración: es una mudanza, no un rediseño.
 *
 * Las reglas viejas siguen en su lugar mientras el sitio en vivo corra Goya.
 * ------------------------------------------------------------------------ */
.insu-shop-sidebar .wcapf-dropdown-nav .select2-container {
	width: 100% !important;
	min-width: 200px !important;
}

.insu-shop-sidebar .wcapf-dropdown-nav .select2-container > .selection {
	display: block !important;
}

.insu-shop-sidebar .wcapf-dropdown-nav .select2-selection {
	display: flex !important;
	align-items: center;
	min-height: 44px !important;
	padding: 4px 12px !important;
	border: 1px solid var(--insu-color-border) !important;
	border-radius: 10px !important;
	background: rgba(255, 255, 255, 0.96) !important;
}

.insu-shop-sidebar .wcapf-dropdown-nav .select2-search__field {
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	height: auto !important;
	min-height: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font-size: 0.82rem;
	line-height: 1.5;
	color: var(--insu-color-text);
}

.insu-shop-sidebar .wcapf-dropdown-nav .select2-search__field:focus {
	outline: none !important;
	box-shadow: none !important;
}

.insu-shop-sidebar .wcapf-dropdown-nav .select2-search__field::placeholder {
	color: var(--insu-color-text-muted, #6b7280);
	opacity: 1;
}

.insu-shop-sidebar .wcapf-dropdown-nav .select2-container--open .select2-selection {
	border-color: var(--insu-color-accent) !important;
	box-shadow: 0 0 0 3px rgba(164, 44, 23, 0.12) !important;
}

.insu-shop-sidebar .wcapf-dropdown-nav .select2-selection__rendered {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--insu-color-text);
	line-height: 34px !important;
}

.insu-shop-sidebar .wcapf-dropdown-nav .select2-selection--multiple .select2-selection__rendered {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	width: 100%;
	margin: 0;
	padding: 0 !important;
	line-height: normal !important;
	list-style: none;
}

.insu-shop-sidebar .wcapf-dropdown-nav .select2-selection__choice {
	background: rgba(164, 44, 23, 0.09) !important;
	border-color: rgba(164, 44, 23, 0.28) !important;
	border-radius: 999px !important;
	color: var(--insu-color-accent) !important;
	font-weight: 600;
	padding: 2px 8px !important;
}

.insu-shop-sidebar .wcapf-dropdown-nav .select2-dropdown {
	border-color: var(--insu-color-border) !important;
	border-radius: 10px !important;
	overflow: hidden;
}

.insu-shop-sidebar .wcapf-dropdown-nav .select2-results__option--highlighted {
	background: rgba(164, 44, 23, 0.1) !important;
	color: var(--insu-color-accent) !important;
}

/* ---------------------------------------------------------------------------
 * "Limpiar filtros" en la barra nueva.
 *
 * Lo inserta insuplagas-catalog-ui.js cuando hay algún filtro puesto, y hasta
 * ahora vivía dentro del panel deslizante de Goya. Sin esto, quien filtra por
 * categoría y laboratorio no tiene forma de volver al catálogo completo salvo
 * borrando la dirección a mano.
 *
 * Va arriba de los desplegables, dentro del cuerpo de la columna: es lo primero
 * que se busca cuando la lista quedó en cero resultados.
 * ------------------------------------------------------------------------ */
.insu-shop-sidebar .insu-filter-actions {
	display: flex;
	justify-content: stretch;
	margin: 0;
}

.insu-shop-sidebar .insu-filter-reset {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 36 px y no 30: en teléfono esto se toca con el dedo. */
	min-height: 36px;
	padding: 0 .9rem;
	border: 1px solid rgba(164, 44, 23, 0.2);
	border-radius: 999px;
	background: #fff;
	color: var(--insu-color-accent);
	font-family: var(--insu-font-heading);
	font-size: .78rem;
	font-weight: 700;
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease;
}

.insu-shop-sidebar .insu-filter-reset:hover,
.insu-shop-sidebar .insu-filter-reset:focus-visible {
	background: var(--insu-color-accent-soft);
	border-color: rgba(164, 44, 23, 0.45);
}

.insu-shop-sidebar .insu-filter-reset {
	width: 100%;
	min-height: 44px;
}

/* ---------------------------------------------------------------------------
 * Paginación del catálogo.
 *
 * Sin estas reglas se veía con el estilo clásico de WooCommerce: una caja
 * violeta con borde recto rodeando todos los números, cada uno separado del
 * siguiente por un filete vertical, "Siguiente" como texto suelto. No tenía
 * relación con el resto del catálogo, que usa pastillas —los filtros, "Limpiar
 * filtros", el botón de filtrar en teléfono— con los mismos colores.
 *
 * El marcado lo arma WooCommerce (nav.woocommerce-pagination > ul.page-numbers)
 * y no se toca; sólo se le da forma. "Siguiente" y "Anterior" —el rótulo lo
 * traduce insuplagas_catalog_pagination_labels()— quedan con más ancho porque
 * llevan texto y no un solo dígito.
 *
 * La especificidad de acá no es cosmética: hace falta para ganarle a WooCommerce.
 * Su hoja clásica trae, sin que este repositorio la escriba,
 *
 *     .woocommerce nav.woocommerce-pagination ul { border:1px solid #cfc8d8; ... }
 *     .woocommerce nav.woocommerce-pagination ul li { border-right:1px solid #cfc8d8; float:left; ... }
 *
 * con especificidad (0,2,2) y (0,2,3). Un primer intento escribió estas reglas
 * como `.woocommerce-pagination .page-numbers` —(0,2,0)—, que pierde: WooCommerce
 * seguía imponiendo su display:inline-block y su borde alrededor de todo el
 * bloque, y como los números siguen siendo pastillas redondeadas por su cuenta,
 * el borde recto de WooCommerce quedaba "tapado" por las puntas redondeadas del
 * primer y el último número, y el conjunto se leía como un óvalo gris que
 * envolvía toda la fila —no una regla nueva, sino el borde viejo asomando por
 * los bordes de las pastillas—.
 *
 * Se repite el prefijo .woocommerce nav.woocommerce-pagination de WooCommerce y
 * se agrega .page-numbers como clase explícita en vez de "ul": eso suma una
 * clase más que la regla que hay que vencer, y la comparación de especificidad
 * se decide por cantidad de clases antes que por cantidad de elementos, así que
 * alcanza sin necesitar !important.
 * ------------------------------------------------------------------------ */
.woocommerce-pagination {
	margin: 2.5rem 0 0;
}

.woocommerce nav.woocommerce-pagination .page-numbers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.woocommerce nav.woocommerce-pagination .page-numbers li {
	margin: 0;
	padding: 0;
	border: 0;
	float: none;
	display: list-item;
}

.woocommerce nav.woocommerce-pagination .page-numbers a,
.woocommerce nav.woocommerce-pagination .page-numbers span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	padding: 0 .6rem;
	border: 1px solid var(--insu-color-border-control);
	border-radius: 999px;
	background: #fff;
	color: var(--insu-color-ink);
	font-family: var(--insu-font-heading);
	font-size: .9rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.woocommerce nav.woocommerce-pagination .page-numbers a:hover,
.woocommerce nav.woocommerce-pagination .page-numbers a:focus-visible {
	background: var(--insu-color-accent-soft);
	border-color: var(--insu-color-accent);
	color: var(--insu-color-accent);
}

.woocommerce nav.woocommerce-pagination .page-numbers .current {
	border-color: var(--insu-color-accent);
	background: var(--insu-color-accent);
	color: #fff;
}

/* Los puntos suspensivos no son un control: sin borde, sin fondo, sin hover. */
.woocommerce nav.woocommerce-pagination .page-numbers .dots {
	min-width: auto;
	border: 0;
	background: none;
	color: var(--insu-color-text-muted);
}

.woocommerce nav.woocommerce-pagination .page-numbers .next,
.woocommerce nav.woocommerce-pagination .page-numbers .prev {
	padding: 0 1rem;
	font-weight: 700;
}

/*
 * El tamaño de 44 px en teléfono ya lo fija insuplagas-mobile.css, medido
 * sobre el sitio real; ese archivo usa el mismo prefijo por la misma razón y
 * por eso le sigue ganando a WooCommerce ahí también.
 */