/**
 * Desplegable de sugerencias del buscador de la cabecera.
 *
 * Se posiciona sobre `.ace-header__search`, que ya tiene `position: relative`
 * declarado en el estilo propio del componente (plugin de widgets, etapa 06).
 */

.ace-search-suggest {
	background-color: var(--wp--preset--color--surface, #fff);
	border: 1px solid var(--wp--preset--color--hairline, #e2e1de);
	border-radius: 1rem;
	box-shadow: var(--wp--preset--shadow--header, 0 10px 30px rgba(0, 0, 0, 0.12));
	inset-block-start: calc(100% + 0.5rem);
	inset-inline: 0;
	max-block-size: 70vh;
	overflow-y: auto;
	padding-block: 0.5rem;
	position: absolute;
	z-index: var(--wp--custom--layer--header, 100);
}

.ace-search-suggest[hidden] {
	display: none;
}

.ace-search-suggest__label {
	color: var(--wp--preset--color--contrast-muted, #6b6b6b);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	margin: 0;
	padding: 0.5rem 1rem 0.25rem;
	text-transform: uppercase;
}

.ace-search-suggest__item {
	align-items: center;
	color: inherit;
	display: flex;
	gap: 0.75rem;
	padding: 0.5rem 1rem;
	text-decoration: none;
}

.ace-search-suggest__item:hover,
.ace-search-suggest__item.is-active,
.ace-search-suggest__item:focus-visible {
	background-color: var(--wp--preset--color--base-alt, #f1f0ee);
}

.ace-search-suggest__thumb {
	block-size: 3rem;
	border-radius: 0.5rem;
	flex-shrink: 0;
	inline-size: 3rem;
	object-fit: cover;
}

.ace-search-suggest__info {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.125rem;
	min-inline-size: 0;
}

.ace-search-suggest__name {
	font-size: 0.9375rem;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ace-search-suggest__name mark {
	background-color: transparent;
	color: var(--wp--preset--color--accent, #3f4a5a);
	font-weight: 700;
}

.ace-search-suggest__meta {
	color: var(--wp--preset--color--contrast-muted, #6b6b6b);
	font-size: 0.8125rem;
}

.ace-search-suggest__price {
	flex-shrink: 0;
	font-size: 0.875rem;
	font-weight: 600;
	text-align: end;
}

.ace-search-suggest__price ins {
	color: var(--wp--preset--color--accent, #3f4a5a);
	text-decoration: none;
}

.ace-search-suggest__price del {
	color: var(--wp--preset--color--contrast-muted, #6b6b6b);
	font-size: 0.75rem;
	font-weight: 400;
}

.ace-search-suggest__empty {
	color: var(--wp--preset--color--contrast-muted, #6b6b6b);
	font-size: 0.875rem;
	margin: 0;
	padding: 0.75rem 1rem;
}

.ace-search-suggest__viewall {
	border-block-start: 1px solid var(--wp--preset--color--hairline, #e2e1de);
	color: var(--wp--preset--color--accent, #3f4a5a);
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	margin-block-start: 0.25rem;
	padding: 0.75rem 1rem 0.5rem;
	text-decoration: none;
}

.ace-search-suggest__viewall:hover {
	text-decoration: underline;
}

@media (max-width: 48rem) {
	.ace-search-suggest {
		inset-block-start: calc(100% + 0.375rem);
		max-block-size: calc(100vh - 6rem);
	}

	/*
	 * `inset-inline:0` mide contra `.ace-header__search` (su padre
	 * posicionado), que en celular no llega hasta el borde de la pantalla:
	 * le queda el padding de la cabecera a cada lado (`.ace-header__inner`).
	 * Esa franja quedaba sin fondo propio, y ahi se transparentaba lo que
	 * hay debajo -el contenido de la pagina, corrido para atras-. El
	 * desplegable tiene que tapar la pantalla entera de punta a punta en
	 * celular, no solo el ancho del buscador: se lo saca de su padre con la
	 * tecnica estandar de "ancho completo" (mitad de la pantalla menos
	 * mitad del propio elemento).
	 */
	.ace-search-suggest {
		inset-inline: auto;
		inset-inline-start: 50%;
		margin-inline-start: -50vw;
		border-radius: 0;
		border-inline: 0;
		width: 100vw;
	}
}