@inmadigital, entiendo perfectamente lo que buscas. La clave está en aplicar los estilos adecuados a los selectores correctos y asegurar un z-index lo suficientemente alto para evitar conflictos con el mega menú. Asumo que estás en PrestaShop 1.7.8.0 como mencionaste después.
Aquí tienes un bloque de CSS que puedes añadir a tu archivo themes/classic/assets/css/custom.css. Esto debería darte la apariencia de tarjeta moderna y resolver el z-index:
/* Estilo del contenedor principal del desplegable de búsqueda */
.autocomplete-suggestions {
background-color: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
position: absolute;
width: 100%; /* Asegura que ocupe todo el ancho disponible */
max-height: 400px; /* Limita la altura del desplegable */
overflow-y: auto; /* Añade scroll si hay muchos resultados */
Explicación de los cambios:
.autocomplete-suggestions: Le he dado un border-radius de 8px, una box-shadow más prominente para el efecto flotante y un z-index de 2000. Este valor es generalmente suficiente para superar la mayoría de los mega menús. También he añadido max-height y overflow-y para un mejor manejo de muchos resultados..autocomplete-suggestion: Utilizo display: flex para alinear la imagen y el texto fácilmente. Añadí un transition para un efecto hover suave.autocomplete-suggestion img: Le di border-radius a las imágenes para que sean redondeadas y un borde suave.autocomplete-suggestion strong: Este es el selector para el texto que coincide con la búsqueda. Le di un color #007bff (azul de Bootstrap) y font-weight: 600 para que destaque.- Añadí un
border-top entre sugerencias para un separador más limpio.
Después de añadir esto, asegúrate de limpiar la caché de tu PrestaShop y la de tu navegador. Pruébalo y me dices qué tal.