/**
 * Autocompletado del buscador por categorías.
 *
 * POR QUÉ ESTÁ EN UN FICHERO
 *
 * Vivía como una cadena dentro del PHP, inyectada en cada página. Así no se
 * cachea, no se minifica, no se puede desregistrar y engorda todas las
 * respuestas del sitio. Además arrastraba dos cosas del tema anterior: colores
 * escritos a mano y referencias a variables de paleta de Kadence — un tema que
 * este proyecto ya no usa, así que caían siempre a su valor de reserva y
 * pintaban un azul que no está en ninguna paleta nuestra.
 *
 * Ahora usa los tokens del tema. Cambiar el aspecto del desplegable es cambiar
 * un token, como en el resto de la tienda.
 *
 * Los valores de reserva que acompañan a cada token no son decoración: este
 * plugin tiene que seguir funcionando si se activa con otro tema, y entonces
 * los tokens no existen. Pero son una COPIA de la paleta, así que envejecen
 * solas: esta hoja conservó el azul de Kadence mucho después de que la cabecera
 * de aquí arriba diera la purga por hecha. Ahora las compara una prueba
 * (`ProyectoCoherenteTest::test_las_reservas_de_los_plugins_coinciden_con_los_tokens`).
 *
 * @package MaderasLamelas\Catalogo
 */

.ml-sug-wrap {
	position: relative;
}

/* Visible solo para lectores de pantalla.
   La define el plugin y no se toma prestada del tema: `ml-sr-only` es del tema
   propio, y con cualquier otro tema el recuento de sugerencias se pintaba a la
   vista, debajo del buscador. */
.ml-sug-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.ml-sug {
	position: absolute;
	z-index: 60;
	top: calc(100% + 6px);
	right: 0;
	left: 0;
	display: none;
	min-width: 280px;
	overflow: hidden;
	border: 1px solid var(--ml-border, #e5ded4);
	border-radius: var(--ml-radius-lg, 12px);
	background: var(--ml-surface-raised, #ffffff);
	color: var(--ml-text, #2b2622);
	box-shadow: var(--ml-shadow-3, 0 8px 24px rgba(43, 38, 34, 0.14));
}

.ml-sug.open {
	display: block;
}

.ml-sug-list {
	margin: 0;
	padding: 6px;
	list-style: none;
}

.ml-sug-item {
	display: flex;
	box-sizing: border-box;
	align-items: center;
	min-height: 44px;
	padding: 9px 10px;
	border-radius: var(--ml-radius-md, 8px);
	color: inherit;
	cursor: pointer;
	gap: 12px;
	text-decoration: none;
}

.ml-sug-item:hover,
.ml-sug-item.active {
	background: var(--ml-surface-hover, #f2ede5);
}

.ml-sug-img {
	display: flex;
	overflow: hidden;
	width: 42px;
	height: 42px;
	align-items: center;
	justify-content: center;
	flex: 0 0 42px;
	border-radius: var(--ml-radius-sm, 4px);
	background: var(--ml-surface-sunken, #f2ede5);
}

.ml-sug-img img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.ml-sug-main {
	min-width: 0;
	flex: 1;
}

.ml-sug-label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}

/* Lo que coincide con lo tecleado, resaltado con el color de acción. */
.ml-sug-label b {
	background: var(--ml-brand-subtle, #e2f0ee);
	color: var(--ml-brand-text, #0e655e);
}

.ml-sug-path {
	display: block;
	overflow: hidden;
	margin-top: 1px;
	color: var(--ml-text-subtle, #736a64);
	font-size: 12px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ml-sug-count {
	padding: 2px 8px;
	flex: 0 0 auto;
	border-radius: var(--ml-radius-full, 999px);
	background: var(--ml-surface-sunken, #f2ede5);
	color: var(--ml-text-subtle, #736a64);
	font-size: 11px;
	font-variant-numeric: tabular-nums;
}

.ml-sug-all {
	display: block;
	box-sizing: border-box;
	min-height: 44px;
	padding: 12px 14px;
	border-top: 1px solid var(--ml-border, #e5ded4);
	color: var(--ml-brand-text, #0e655e);
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

.ml-sug-all:hover,
.ml-sug-all.active {
	background: var(--ml-surface-hover, #f2ede5);
}

.ml-sug-empty {
	padding: 14px;
	color: var(--ml-text-muted, #666d72);
	font-size: 13px;
}

/*
 * Sugerencia de PRODUCTO (encontrado por su referencia).
 *
 * Se distingue de una categoría por la referencia en monoespaciada: un código
 * se compara dígito a dígito con el que se lleva apuntado, y con la tipografía
 * del texto es fácil confundir un 1 con una l.
 */
.ml-sug-item--product .ml-sug-path {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
}