/**
 * Buscador AJAX de productos — integrado desde el plugin Ajax Search Lite.
 *
 * NOTA: la FORMA de la caja (borde, ancho máx, alineación, cuadrado) la define el
 * tema en style.css (#header-desktop .header-top .probox). Aquí solo se aporta el
 * relleno blanco, los íconos (lupa NEGRA, como el original) y el desplegable de
 * resultados (que antes daba el plugin ASL).
 */

/* ===== Contenedor ===== */
.asl_w_container { width: 100%; }
.asl_m { position: relative; width: 100%; }

/* ===== Caja del buscador (relleno blanco; el borde/forma lo da el tema) ===== */
.asl_m .probox {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	min-height: 46px;
	/* Borde de la caja. En escritorio el tema (#header-desktop) lo sobreescribe con el
	   mismo valor; en móvil/tableta el tema NO pone borde, así que lo aporta este.
	   Fondo transparente (se ve el amarillo) para ser consistente con escritorio. */
	border: 1px solid #00000061;
	background: transparent;
}
.asl_m .probox .proinput {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	padding: 0 16px;
	background: transparent;
}
.asl_m .probox .proinput form {
	margin: 0 !important;
	padding: 0 !important;
	width: 100%;
	display: flex;
	align-items: center;
}
.asl_m .probox .proinput input.orig,
.asl_m .probox .proinput input.autocomplete {
	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	outline: none !important;
	background: transparent !important;
	box-shadow: none !important;
	font-size: 1rem !important;
	color: #333 !important;
	line-height: normal !important;
}
.asl_m .probox .proinput input.orig::-webkit-input-placeholder { color: #999; }
.asl_m .probox .proinput input.orig::placeholder { color: #999; }
/* Oculta la X nativa del navegador en input[type=search] */
.asl_m .probox .proinput input[type="search"]::-webkit-search-cancel-button,
.asl_m .probox .proinput input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
	display: none;
}

/* ===== Slot derecho: lupa / cargando / cerrar — fondo blanco, ícono NEGRO (como el original) ===== */
.asl_m .probox .promagnifier,
.asl_m .probox .proloading,
.asl_m .probox .proclose {
	flex: 0 0 48px;
	width: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	background: transparent;
}
.asl_m .probox .promagnifier {
	-webkit-appearance: none;
	appearance: none;
	border: 0 !important;
	outline: none !important;
	box-shadow: none !important;
	padding: 0;
}
.asl_m .probox .promagnifier .innericon {
	display: flex;
	align-items: center;
	justify-content: center;
}
.asl_m .probox .promagnifier .innericon svg {
	display: block;
	width: 20px;
	height: 20px;
	fill: #333;
}
.asl_m .probox .proclose svg {
	width: 20px;
	height: 20px;
	fill: #333;
}
.asl_m .probox .proloading .asl_loader {
	display: block;
	width: 20px;
	height: 20px;
	border: 3px solid rgba(0, 0, 0, .15);
	border-top-color: #333;
	border-radius: 50%;
	animation: asl-spin .8s linear infinite;
}
@keyframes asl-spin {
	100% { transform: rotate(360deg); }
}

/* ===== Desplegable de resultados ===== */
.asl_m .asl_r,
.asl_m .ozado-asl-results {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	margin-top: 6px;
	z-index: 1000;
	background: #fff;
	border: 1px solid #e5e5e5;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .16);
}
.asl_m .asl_r .results {
	max-height: 480px;
	overflow-y: auto;
}
.asl_m .asl_r .results .item {
	border-bottom: 1px solid #ededed;
}
.asl_m .asl_r .results .item:last-child {
	border-bottom: 0;
}
.asl_m .asl_r .results .item .asl_content {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 14px;
}
.asl_m .asl_r .results .item .asl_image {
	flex: 0 0 60px !important;
	width: 60px !important;
	height: 60px !important;
	margin: 0 !important;
	object-fit: contain;
}
.asl_m .asl_r .results .item .asl_text {
	flex: 1 1 auto;
	min-width: 0;
}
.asl_m .asl_r .results .item .asl_content h3 {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 15px;
	line-height: 1.35;
	font-weight: 600;
}
.asl_m .asl_r .results .item .asl_res_url {
	color: #1c6fb8;
	text-decoration: none;
}
.asl_m .asl_r .results .item .asl_res_url:hover {
	text-decoration: underline;
}
.asl_m .asl_r .results .item .asl_desc {
	margin-top: 5px;
	font-size: 13px;
	line-height: 1.5;
	color: #777;
}
.asl_m .asl_r .results .ozado-hl {
	font-weight: 700;
}
.asl_m .asl_r .results .asl_nores {
	margin: 0;
	padding: 16px 14px;
	text-align: center;
	color: #777;
	font-size: 14px;
}

/* ===== Responsive (móvil / tableta) ===== */
@media (max-width: 1024px) {
	.asl_m .probox { min-height: 44px; }
}
@media (max-width: 768px) {
	.asl_m .probox { min-height: 42px; }
	/* font-size 16px evita el auto-zoom de iOS al enfocar el buscador */
	.asl_m .probox .proinput input.orig { font-size: 16px !important; }
	.asl_m .probox .proinput { padding: 0 12px; }
	.asl_m .probox .promagnifier,
	.asl_m .probox .proloading,
	.asl_m .probox .proclose {
		flex: 0 0 42px;
		width: 42px;
	}
	/* El desplegable no se pasa de ancho ni de alto en pantallas chicas */
	.asl_m .asl_r {
		max-width: 100vw;
	}
	.asl_m .asl_r .results {
		max-height: 70vh;
	}
	.asl_m .asl_r .results .item .asl_content {
		gap: 10px;
		padding: 10px 12px;
	}
	.asl_m .asl_r .results .item .asl_image {
		flex: 0 0 48px !important;
		width: 48px !important;
		height: 48px !important;
	}
}