/*
 * Aliances Experience - capa de marca de la plantilla de Resultados de busqueda.
 *
 * Se carga despues de ae-categoria.css y solo anade lo que esta pagina tiene y
 * la categoria no: el formulario de busqueda del hero (widget v3, no admite
 * clases globales v4) y el bloque de «no hay resultados», que es un shortcode.
 *
 * Todo cuelga de las custom properties --ae-* del Kit, igual que el resto.
 */

/* ---------------------------------------------------------------------------
 * Formulario del hero
 *
 * Va sobre la foto, asi que el texto y la linea son blancos. El widget de
 * Elementor Pro con piel «minimal» pinta un input transparente y un boton de
 * lupa; aqui solo se le da color, ancho y una linea inferior.
 * ------------------------------------------------------------------------ */

.elementor .ae-hero-cat .elementor-search-form {
	max-width: 420px;
}


/*
 * El color, la linea y el fondo del formulario van en los controles del propio
 * widget, no aqui: el CSS por elemento de Elementor gana a esta hoja. Lo unico
 * que queda es el placeholder, que no tiene control.
 */

.elementor .ae-hero-cat .elementor-search-form__input::placeholder {
	color: rgba(255, 255, 255, .72);
	opacity: 1;
}


/* ---------------------------------------------------------------------------
 * Migas
 *
 * La ultima lleva el termino entre comillas y puede ser larga; que no rompa la
 * linea del hero.
 * ------------------------------------------------------------------------ */

.elementor .ae-hero-cat .woocommerce-breadcrumb {
	overflow-wrap: anywhere;
}


/* ---------------------------------------------------------------------------
 * Bloque de «no hay resultados»
 *
 * La seccion existe siempre en la plantilla; el shortcode devuelve cadena
 * vacia cuando si hay productos. Como el contenedor de Elementor tiene
 * padding propio, se colapsa cuando no hay nada dentro.
 * ------------------------------------------------------------------------ */

.elementor .ae-vacio {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	width: 100%;
	text-align: center;
}


.elementor .ae-vacio-titulo {
	margin: 0;
	font-family: var(--ae-font-heading), serif;
	font-size: clamp(24px, 2.4vw, 32px);
	font-weight: 500;
	line-height: 1.25;
	color: var(--ae-ink);
}


.elementor .ae-vacio-texto {
	margin: 0;
	font-family: var(--ae-font-body), sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: var(--ae-body);
}


.elementor .ae-vacio-ayuda {
	max-width: 560px;
}


.elementor .ae-vacio-ayuda a {
	color: var(--ae-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 300ms ease;
}


.elementor .ae-vacio-ayuda a:hover,
.elementor .ae-vacio-ayuda a:focus-visible {
	color: var(--ae-accent-dark);
}


/* Las fichas sugeridas: misma proporcion cuadrada que la rejilla. */

.elementor .ae-vacio-productos {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	width: 100%;
	max-width: 860px;
}


.elementor .ae-vacio-producto {
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-family: var(--ae-font-body), sans-serif;
	font-size: 15px;
	line-height: 1.4;
	color: var(--ae-ink);
	text-decoration: none;
}


.elementor .ae-vacio-producto img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	transition: transform 300ms ease;
}


.elementor .ae-vacio-producto span {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--product-h3, #8C8079);
}


.elementor .ae-vacio-producto:hover img,
.elementor .ae-vacio-producto:focus-visible img {
	transform: scale(1.06);
}


/* La foto es la que se escala, no la caja. */

.elementor .ae-vacio-producto {
	overflow: hidden;
}


@media (max-width: 1024px) {
	.elementor .ae-vacio-productos {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}


@media (max-width: 767px) {
	.elementor .ae-vacio-productos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}


	.elementor .ae-hero-cat .elementor-search-form {
		max-width: 100%;
	}
}