/**
 * Stile dell'anteprima prodotti sotto il campo di ricerca.
 * I colori e le spaziature sono neutri e si possono adattare al brand.
 */

/* Il riquadro si posiziona rispetto al form di ricerca. */
form.e-search-form {
	position: relative;
}

.averla-suggest {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 9999;
	display: none;
	max-height: 70vh;
	overflow-y: auto;
	margin-top: 6px;
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: 4px;
	box-shadow: 0 10px 30px rgba( 0, 0, 0, 0.14 );
	-webkit-overflow-scrolling: touch;
}

.averla-suggest.is-open {
	display: block;
}

/* Ogni riga tiene l'immagine a sinistra e il titolo a destra. */
.averla-suggest__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 12px;
	text-decoration: none;
	color: inherit;
	border-bottom: 1px solid #f0f0f0;
}

.averla-suggest__item:hover,
.averla-suggest__item:focus {
	background: #f7f7f7;
}

/* L'immagine occupa un quarto della riga. */
.averla-suggest__img {
	flex: 0 0 25%;
	max-width: 25%;
}

.averla-suggest__img img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 3px;
}

/* Il titolo occupa i tre quarti restanti. */
.averla-suggest__title {
	flex: 1 1 75%;
	min-width: 0;
	font-size: 14px;
	line-height: 1.35;
}

/* Pulsante finale che apre la ricerca completa. */
.averla-suggest__more {
	display: block;
	width: 100%;
	padding: 12px 14px;
	border: 0;
	border-radius: 0;
	background: #111;
	color: #fff;
	font-family: "Montserrat", sans-serif;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	cursor: pointer;
}

.averla-suggest__more:hover,
.averla-suggest__more:focus {
	background: #333;
}

/* Testo mostrato durante la ricerca o quando non ci sono risultati. */
.averla-suggest__msg {
	padding: 14px;
	text-align: center;
	color: #666;
	font-size: 14px;
}