body.no-scroll {

    overflow: hidden !important;

    position: fixed; /* 🎯 CLAVE: Fija el body en su posición actual */

    width: 100%; /* Evita que el body se contraiga al fijarlo */

    height: 100vh; /* Asegura que ocupe toda la altura de la ventana */

    top: 0;

}



/* --------------------------------------------------------

   1. ESTILOS DE BÚSQUEDA Y OVERLAY (BARRA LATERAL DERECHA)

   -------------------------------------------------------- */



/* Contenedor del Botón de Búsqueda (Lupa) */



.bi.bi-search {

    font-size: 20px;

    color: #fff;

}



.search-btn {

    background: none;

    border: none;

    cursor: pointer;

    padding: 8px;

    display: flex;

    align-items: center;

    justify-content: center;

}



.search-btn svg {

    transition: stroke 0.3s ease;

}



.search-btn:hover svg {

    stroke: #007bff;

}



/* --------------------------------------------------------

   2. OVERLAY (FONDO NEGRO Y COMPORTAMIENTO GENERAL) - CORREGIDO

   -------------------------------------------------------- */

.search-overlay {

    position: fixed;

    top: 0;

    right: 0; /* ANCLA A LA DERECHA */

    height: 100%;

    width: 100%; /* El overlay cubre toda la pantalla para el fondo negro */

    background-color: rgba(0, 0, 0, 0.7);

    z-index: 1000;

    

    /* ANULA CENTRADO: Alineamos el contenido (la barra) a la derecha */

    display: flex;

    justify-content: flex-end; 

    align-items: flex-start; /* Alineamos verticalmente al inicio */

    

    /* 🎯 CORRECCIÓN: Usamos opacity y pointer-events para controlar la visibilidad */

    opacity: 0;

    pointer-events: none; /* No clickeable cuando está cerrado */

    

    /* La transición ahora es solo de opacidad */

    transition: opacity 0.3s ease-in-out;

}



.search-overlay.active {

    opacity: 1;

    pointer-events: auto; /* Clickeable al abrir */

    transition-delay: 0s; /* Mantenemos el delay en 0s para la apertura */

}



/* --------------------------------------------------------

   3. BARRA LATERAL (EL CONTENIDO VISIBLE Y DESLIZANTE) - CORREGIDO

   -------------------------------------------------------- */

.search-overlay-content-wrapper {

    /* 🎯 ANCHO BASE PARA ESCRITORIO */

    width: 30%; 

    height: 100%; 

    background-color: #fff; /* Fondo blanco de la barra */

    overflow-y: auto;

    -webkit-overflow-scrolling: touch;

    /* 🎯 CLAVE DE ANIMACIÓN: Empujamos la barra fuera de la pantalla horizontalmente */

    transform: translateX(100%);

    transition: transform 0.3s ease-in-out;

    

    /* Estilos de contenido */

    padding: 20px;

    box-sizing: border-box; 

    flex-direction: column;

    margin: 0; /* Eliminamos cualquier margen que cause problemas */

}



.search-overlay.active .search-overlay-content-wrapper {

    /* Al activarse, regresa a su posición original */

    transform: translateX(0);

    /* CLAVE: Si ya está en la apertura (punto 2), quitamos el delay del hijo para que se mueva al mismo tiempo que el fondo */

    transition-delay: 0s; /* Eliminamos el 0.1s para que el deslizamiento sea inmediato al abrir */

}



/* --------------------------------------------------------

   4. BOTÓN CERRAR (DENTRO DE LA BARRA)

   -------------------------------------------------------- */

.close-icon {

    position: absolute; 

    top: 15px; 

    right: 15px;

    font-size: 2rem; 

    color: #333; 

    cursor: pointer;

    z-index: 100;

    margin-top: 0; 

}





/* --------------------------------------------------------

   5. CONTENEDOR DE BÚSQUEDA Y ESTABILIDAD DEL INPUT - CORREGIDO

   -------------------------------------------------------- */



/* Nuevo Contenedor Padre para posicionamiento relativo */

#search-input-area {

    position: relative; 

    width: 100%; 

    margin: 8% auto;

}



/* Contenedor del Input (Asegura z-index sobre los resultados) */

.search-overlay .search-container {

    position: relative; 

    z-index: 20; 

    width: 100%; 

    margin-bottom: 0; 

    border: 1px solid #333; 

    border-radius: 50px;

    box-shadow: none; 

    padding: 0!important;



    /* CLAVE FLEXBOX: Para alinear input y botón */

    display: flex;

    align-items: center;

}



.search-container {

    max-width: none!important;

    width: 100%;

    box-shadow: none; 

}

/* Resaltado para la navegación por teclado */
.active-result-item {
    background-color: #f0f0f0 !important; /* Un gris claro o el color de tu marca */
    border-left: 4px solid #000 !important; /* Una línea para indicar enfoque */
    outline: none;
}



/* Input de Búsqueda */

.search-input {

    /* CLAVE: Crece y empuja el botón a la derecha */

    flex-grow: 1; 

    min-width: 50px;

    padding: 12px 15px;

    border: none!important; 

    font-size: 1.2rem;

    outline: none;

    background: none;

    color: #333; 

}



.search-input:focus {

    color: #333;

}



/* Botón de Submit */

.search-submit-btn {

    background-color: transparent; 

    color: #333; 

    border: none;

    

    /* 🎯 AJUSTE CLAVE: Reducimos el padding en pantallas pequeñas.

       Mantenemos 10px arriba/abajo, pero reducimos el padding derecho a 15px 

       (y 0 a la izquierda para pegarlo al input) */

    padding: 10px 15px 10px 0; 

    

    border-radius: 5px;

    cursor: pointer;

    font-size: 1.2rem;

    transition: background-color 0.3s ease;

    white-space: nowrap; 

}



/* --------------------------------------------------------

   6. CONTENEDOR DE RESULTADOS (POSITION ABSOLUTE)

   -------------------------------------------------------- */

.search-results-overlay-content {

    /* CLAVE: Lo sacamos del flujo normal para que no mueva el input */

    position: absolute; 

    top: 130%; 

    left: 0;

    z-index: 15; 

    width: 100%;

    /* Estilos de caja base (transparentes para evitar el salto) */

    border: 1px solid transparent; 

    box-shadow: none;

}



/* Estado Oculto */

#searchResultsContainer {

    overflow: hidden; 

    display: none; 

}



/* Estado Visible (Clase 'has-results') */

#searchResultsContainer.has-results {

  display: block;

  height: auto;

  overflow-y: auto;

  background-color: #fff;

}



/* --------------------------------------------------------

   7. ESTILOS DE ITEMS DE RESULTADO

   -------------------------------------------------------- */



.search-result-list-item {

    display: flex;

    align-items: center;

    text-decoration: none; 

    color: #333; 

    border-bottom: 1px solid #eee;

    margin: 5% 0;

}



.search-result-list-item:last-child {

    border-bottom: none; 

}



.search-result-list-item:hover {

    background-color: #f5f5f5; 

    color: #007bff; 

}



.result-list-img {

    width: 25%;

    object-fit: contain;

    margin-right: 10px;

}



.result-list-info {

    flex-grow: 1;

}



.result-list-title {

    font-size: 1em;

    font-weight: 500;

    margin: 0;

    line-height: 1.2;

}



.result-list-sku {

    font-size: 0.8em;

    color: #777;

    margin: 0;

}



.list-item.no-results-message {

    padding: 10px;

    text-align: center;

    color: #999;

    font-style: italic;

}



/* --------------------------------------------------------

   8. MEDIA QUERIES (Ajuste de Ancho de Barra Lateral)

   -------------------------------------------------------- */



@media screen and (max-width: 991px) {

    /* Tabletas */

    .search-overlay-content-wrapper {

        width: 50%; /* 50% de ancho en tabletas */

    }

}



@media screen and (max-width: 768px) {

    /* Móviles */

    .search-overlay-content-wrapper {

        width: 90%; /* 90% de ancho en móviles */

    }

}



@media screen and (max-width: 576px) {

    /* Si el botón se sale en móvil, reducimos el padding y el tamaño de la fuente */

    .search-submit-btn {

        padding: 8px 10px 8px 0; /* Menos padding horizontal */

        font-size: 1rem; /* Reducimos el tamaño de la fuente para que quepa */

    }

    

    .search-input {

        padding: 10px 10px; /* Reducimos el padding del input también */

        font-size: 1rem;

    }

}