/* 
 * CSS para Menú Móvil - Componentes
 * ==================================
 * Estilos para login, moneda y otros componentes del menú móvil
 */

/* ========================================
   OCULTAR BOTÓN BUSCADOR MÓVIL EN DESKTOP - REGLA GLOBAL
   ======================================== */
@media screen and (min-width: 1025px) {
    /* Regla ultra específica para ocultar el botón en desktop */
    .pt-stuck-nav .pt-stuck-parent-search #oneBtnBuscadorMovilStuck,
    .pt-stuck-nav .pt-stuck-parent-search button#oneBtnBuscadorMovilStuck,
    .pt-stuck-nav .pt-stuck-parent-search .one-btn-buscador-movil#oneBtnBuscadorMovilStuck,
    .pt-stuck-nav.stuck .pt-stuck-parent-search #oneBtnBuscadorMovilStuck,
    .pt-stuck-nav.stuck .pt-stuck-parent-search button#oneBtnBuscadorMovilStuck,
    .pt-stuck-nav .pt-header-row .pt-stuck-parent-search #oneBtnBuscadorMovilStuck,
    .container .pt-header-row .pt-stuck-parent-search #oneBtnBuscadorMovilStuck,
    #oneBtnBuscadorMovilStuck,
    button#oneBtnBuscadorMovilStuck {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -9999px !important;
        width: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        border: none !important;
    }
}

/* Estilos para My Account (Login) */
.my-account-menu {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.my-account-menu li {
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.my-account-menu li a {
    display: flex !important;
    align-items: center !important;
    padding: 11px 0 !important;
    text-decoration: none !important;
    color: inherit !important;
}

.my-account-menu li a .icon-wrapper {
    width: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-shrink: 0 !important;
}

.my-account-menu li a .icon-wrapper svg {
    width: 18px !important;
    height: 23px !important;
}

.my-account-menu li a .icon-wrapper.user-icon {
    position: relative !important;
    left: -4px !important;
}

.my-account-menu li a .icon-wrapper.user-icon svg {
    width: 24px !important;
    height: 24px !important;
}

.my-account-menu li a .text {
    display: inline-block !important;
    margin-left: 10px !important;
}

/* Estilos para Currency (Moneda) */
.currency-menu {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.currency-menu li {
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.currency-menu li a {
    display: flex !important;
    align-items: center !important;
    padding: 11px 0 !important;
    text-decoration: none !important;
    color: inherit !important;
}

.currency-menu li a .icon-wrapper {
    width: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-shrink: 0 !important;
    font-size: 22px !important;
    font-weight: 400 !important;
}

.currency-menu li a .text {
    display: inline-block !important;
    margin-left: 10px !important;
}

/* ========================================
   INICIO CSS NUEVO - BUSCADOR MÓVIL
   Prefijo: one-x
   ======================================== */
/* one-x: Solo aplicar en pantallas móviles (menor o igual a 1024px) */
@media screen and (max-width: 1024px) {
    /* one-x: Asegurar que el contenedor del buscador móvil sea visible */
    .one-x-mobile-search-container {
        position: relative !important;
        display: block !important;
        visibility: visible !important;
    }
    
    /* one-x: Asegurar que el componente de búsqueda sea visible */
    .one-x-mobile-search-container .pt-search {
        display: block !important;
        visibility: visible !important;
        position: relative !important;
    }
    
    /* one-x: Asegurar que el botón toggle de búsqueda sea visible */
    .one-x-mobile-search-container .pt-search .pt-dropdown-toggle {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        cursor: pointer !important;
    }
    
    /* one-x: Estado por defecto del dropdown - oculto */
    .one-x-mobile-search-container .pt-search .pt-dropdown-menu {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: center !important;
        background: #ffffff !important;
        position: absolute !important;
        z-index: -2 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        width: 100% !important;
        top: 0 !important;
        left: 0 !important;
    }
    
    /* one-x: Estado activo del dropdown - visible */
    .one-x-mobile-search-container .pt-search.active .pt-dropdown-menu {
        z-index: 9999 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* one-x: Contenedor del formulario */
    .one-x-mobile-search-container .pt-search.active .pt-dropdown-menu .container {
        display: block !important;
        width: 100% !important;
        position: relative !important;
        max-width: 100% !important;
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
    
    /* one-x: Formulario */
    .one-x-mobile-search-container .pt-search.active .pt-dropdown-menu form {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: center !important;
        width: 100% !important;
    }
    
    /* one-x: Columna del input */
    .one-x-mobile-search-container .pt-search.active .pt-dropdown-menu form .pt-col:first-child {
        flex: 2 1 auto !important;
    }
    
    /* one-x: Columna del botón cerrar */
    .one-x-mobile-search-container .pt-search.active .pt-dropdown-menu form .pt-col:last-child {
        margin-left: 20px !important;
    }
    
    /* one-x: Input de búsqueda */
    .one-x-mobile-search-container .pt-search.active .pt-dropdown-menu .pt-search-input {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        background: transparent !important;
        font-size: 16px !important;
        border: 1px solid transparent !important;
        padding: 14px 12px 8px 0px !important;
        box-shadow: none !important;
        outline: none !important;
        font-weight: 700 !important;
        width: calc(100% - 40px) !important;
        color: #777777 !important;
        border-radius: 0 !important;
    }
    
    /* one-x: Botón de búsqueda (lupa) */
    .one-x-mobile-search-container .pt-search.active .pt-dropdown-menu .pt-btn-search {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: #48CAB2 !important;
        font-size: 20px !important;
        line-height: 1 !important;
        position: absolute !important;
        cursor: pointer !important;
        top: 50% !important;
        margin-top: -20px !important; /* Subir la lupa más (cambió de -15px a -20px) */
        right: 41px !important;
        z-index: 3 !important;
        background: none !important;
        border: none !important;
    }
    
    /* one-x: Botón cerrar (X) */
    .one-x-mobile-search-container .pt-search.active .pt-dropdown-menu .pt-btn-close {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: #D0D0D0 !important;
        font-size: 20px !important;
        line-height: 1 !important;
        padding: 3px 0px 5px 5px !important;
        background: none !important;
        border: none !important;
        cursor: pointer !important;
        position: relative !important;
        top: 3px !important;
    }
    
    /* one-x: Cuando body tiene clase pt-open-search, ajustar el contenedor */
    body.pt-open-search .one-x-mobile-search-container {
        width: calc(100% + 40px) !important;
        left: 0 !important;
        right: 0 !important;
        margin-left: -20px !important;
        margin-right: -20px !important;
    }
    
    body.pt-open-search .one-x-mobile-search-container .pt-dropdown-menu {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    body.pt-open-search #pt-header .pt-mobile-header .pt-header-row > :not(.pt-logo-container):not(.pt-mobile-parent-logo).one-x-mobile-search-container {
        z-index: inherit !important;
    }
}

/* one-x: Aplicar la clase one-x al contenedor del buscador móvil */
@media screen and (max-width: 1024px) {
    /* one-x: El dropdown del buscador debe expandirse desde el contenedor sin montarse sobre otros elementos */
    .pt-mobile-parent-search .pt-search .pt-dropdown-menu {
        position: absolute !important; /* NO fixed - debe ser absolute */
        transform: none !important; /* NO transform para menú lateral */
        -webkit-transform: none !important;
        right: auto !important; /* NO right auto */
        height: auto !important; /* NO height 100% */
        left: 0 !important; /* left 0, no auto */
        top: 0 !important; /* top 0 para expandirse desde el contenedor */
        margin-top: 0 !important;
    }
    
    /* one-x: Cuando está activo, expandirse hacia abajo sin montarse sobre otros elementos */
    .pt-mobile-parent-search .pt-search.active .pt-dropdown-menu {
        position: absolute !important; /* NO fixed */
        transform: none !important; /* NO transform */
        -webkit-transform: none !important;
        right: auto !important;
        height: auto !important;
        left: 0 !important;
        top: 0 !important; /* top 0 para expandirse desde el contenedor */
        margin-top: 0 !important;
        z-index: 1 !important; /* Relativo al contenedor, no extremo */
    }
    
    
    /* one-x: Sobrescribir cualquier regla que aplique position fixed al buscador */
    header .pt-dropdown-obj.pt-search .pt-dropdown-menu {
        position: absolute !important; /* NO fixed */
        transform: none !important;
        -webkit-transform: none !important;
        right: auto !important;
        height: auto !important;
    }
    
    header .pt-dropdown-obj.pt-search.active .pt-dropdown-menu {
        position: absolute !important; /* NO fixed */
        transform: none !important;
        -webkit-transform: none !important;
        right: auto !important;
        height: auto !important;
        z-index: 1 !important; /* Relativo al contenedor */
    }
    /* 
     * POSICIONAMIENTO DE ICONOS DEL HEADER MÓVIL
     * ===========================================
     * Ajustes de posición para evitar que el logo tape los iconos:
     * - Menú hamburguesa: 30px desde la izquierda
     * - Lupa (buscador): 22px desde la derecha
     * - Carrito: 0px desde la derecha (extremo derecho)
     * 
     * Estos valores fueron ajustados para que los iconos sean visibles
     * incluso cuando el logo tiene su altura máxima (75px + márgenes).
     */
    
    /* one-x: Z-index del contenedor del buscador - igual que otros elementos cuando NO está activo */
    .pt-mobile-parent-search {
        z-index: 2 !important; /* Igual que otros elementos del header-row */
        position: absolute !important; /* Asegurar posición absoluta */
        right: 22px !important; /* Posición ajustada para evitar solapamiento con el logo */
    }
    
    
    
    /* one-x: Asegurar que el carrito NO se monte - debe estar por encima siempre */
    .pt-mobile-parent-cart {
        z-index: 3 !important; /* SIEMPRE por encima del buscador */
        position: absolute !important;
        right: 0 !important; /* Forzar posición derecha - extremo derecho */
    }
    
    /* one-x: SEPARADOR FÍSICO entre buscador y carrito */
    .pt-mobile-separator {
        min-width: 0px !important;
        width: 0px !important;
        display: block !important;
        position: absolute !important;
        z-index: 1 !important;
        height: 100% !important;
        right: 40px !important; /* Posición entre buscador (right: 86px) y carrito (right: 0) */
        top: 0 !important;
    }
    
    /* one-x: Asegurar que el menú hamburguesa NO se monte */
    .pt-mobile-parent-menu {
        z-index: 2 !important;
        position: absolute !important;
        left: 30px !important; /* Posición ajustada para evitar solapamiento con el logo */
    }
    
    /* one-x: El componente de búsqueda dentro del contenedor */
    /* Aplicar estilos cuando buscador_oculto.php está dentro de pt-mobile-parent-search (estructura anidada) */
    .pt-mobile-parent-search .pt-search {
        position: relative !important; /* Necesario para que el dropdown se posicione relativo a este */
    }
    
    .pt-mobile-parent-search,
    .one-x-mobile-search-container {
        position: relative !important;
        display: block !important;
        visibility: visible !important;
    }
    
    .pt-mobile-parent-search .pt-search,
    .one-x-mobile-search-container .pt-search {
        display: block !important;
        visibility: visible !important;
        position: relative !important;
    }
    
    .pt-mobile-parent-search .pt-search .pt-dropdown-toggle,
    .one-x-mobile-search-container .pt-search .pt-dropdown-toggle {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        cursor: pointer !important;
    }
    
    /* one-x: OCULTAR el toggle button cuando el buscador está activo - para evitar duplicación de lupas */
    .pt-mobile-parent-search .pt-search.active .pt-dropdown-toggle,
    .one-x-mobile-search-container .pt-search.active .pt-dropdown-toggle {
        display: none !important; /* Ocultar el toggle cuando está activo */
        visibility: hidden !important;
        opacity: 0 !important;
        position: absolute !important; /* Usar absolute para que no afecte el layout */
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* one-x: Asegurar que al ocultar el toggle, el dropdown se mantenga en la parte superior del header */
    .pt-mobile-parent-search .pt-search.active .pt-dropdown-menu,
    .one-x-mobile-search-container .pt-search.active .pt-dropdown-menu {
        top: 0 !important; /* Mantener top: 0 relativo al contenedor */
        margin-top: 0 !important;
        position: absolute !important; /* Absolute relativo al contenedor, NO al toggle */
    }
    
    /* one-x: El contenedor del buscador debe tener posición relativa para que el dropdown se posicione correctamente */
    .pt-mobile-parent-search .pt-search.active {
        position: relative !important; /* Necesario para que el dropdown se posicione relativo a este */
        height: auto !important; /* Altura automática */
        min-height: 0 !important; /* Sin altura mínima que pueda empujar el dropdown */
    }
    
    .pt-mobile-parent-search .pt-search .pt-dropdown-menu,
    .one-x-mobile-search-container .pt-search .pt-dropdown-menu {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: center !important;
        background: #ffffff !important;
        position: absolute !important;
        z-index: -2 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        width: 100% !important;
        top: 0 !important; /* top 0 para expandirse desde el contenedor */
        left: 0 !important;
        margin-top: 0 !important;
    }
    
    .pt-mobile-parent-search .pt-search.active .pt-dropdown-menu,
    .one-x-mobile-search-container .pt-search.active .pt-dropdown-menu {
        z-index: 1 !important; /* Relativo al contenedor que tiene z-index alto */
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .pt-mobile-parent-search .pt-search.active .pt-dropdown-menu .container,
    .one-x-mobile-search-container .pt-search.active .pt-dropdown-menu .container {
        display: block !important;
        width: 100% !important;
        position: relative !important;
        max-width: 100% !important;
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
    
    .pt-mobile-parent-search .pt-search.active .pt-dropdown-menu form,
    .one-x-mobile-search-container .pt-search.active .pt-dropdown-menu form {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: center !important;
        width: 100% !important;
    }
    
    .pt-mobile-parent-search .pt-search.active .pt-dropdown-menu .pt-search-input,
    .one-x-mobile-search-container .pt-search.active .pt-dropdown-menu .pt-search-input {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        background: transparent !important;
        font-size: 16px !important;
        border: 1px solid transparent !important;
        padding: 14px 12px 8px 0px !important;
        box-shadow: none !important;
        outline: none !important;
        font-weight: 700 !important;
        width: calc(100% - 40px) !important;
        color: #777777 !important;
        border-radius: 0 !important;
    }
    
    .pt-mobile-parent-search .pt-search.active .pt-dropdown-menu .pt-btn-search,
    .one-x-mobile-search-container .pt-search.active .pt-dropdown-menu .pt-btn-search {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: #48CAB2 !important;
        font-size: 20px !important;
        line-height: 1 !important;
        position: absolute !important;
        cursor: pointer !important;
        top: 50% !important;
        margin-top: -20px !important; /* Subir la lupa más (cambió de -15px a -20px) */
        right: 41px !important;
        z-index: 3 !important;
        background: none !important;
        border: none !important;
    }
    
    .pt-mobile-parent-search .pt-search.active .pt-dropdown-menu .pt-btn-close,
    .one-x-mobile-search-container .pt-search.active .pt-dropdown-menu .pt-btn-close {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: #D0D0D0 !important;
        font-size: 20px !important;
        line-height: 1 !important;
        padding: 3px 0px 5px 5px !important;
        background: none !important;
        border: none !important;
        cursor: pointer !important;
        position: relative !important;
        top: 3px !important;
    }
    
    /* one-x: Cuando body tiene pt-open-search, el buscador móvil ocupa el 100% del ancho con z-index MÁS ALTO */
    /* Igual que el menú flotante: left: 0, right: 0, top: 0 */
    body.pt-open-search .pt-mobile-parent-search {
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        z-index: 99999 !important;
        position: absolute !important;
        max-width: 100% !important;
    }
    
    /* one-x: Compensar el padding del container-fluid cuando el buscador está activo */
    body.pt-open-search .pt-mobile-header .container-fluid {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* one-x: Compensar el padding del pt-header-row también */
    body.pt-open-search .pt-mobile-header .pt-header-row {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* one-x: El dropdown dentro del contenedor expandido - ocupa 100% del ancho sin desplazamiento */
    /* Igual que el menú flotante: left: 0, top: 0, width: 100vw con margin-left para centrar */
    body.pt-open-search .pt-mobile-parent-search .pt-dropdown-menu {
        padding-left: 20px !important;
        padding-right: 20px !important;
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-top: 0 !important;
        z-index: 99999 !important;
        box-sizing: border-box !important;
    }
    
    /* one-x: El buscador tiene z-index MÁS ALTO cuando está activo - por encima de cualquier elemento */
    body.pt-open-search #pt-header .pt-mobile-header .pt-header-row > :not(.pt-logo-container):not(.pt-mobile-parent-logo).pt-mobile-parent-search {
        z-index: 99999 !important; /* Z-index MÁS ALTO - por encima de todo (igual que desktop) */
        position: absolute !important;
    }
    
    /* one-x: Asegurar que el buscador esté por encima de TODO cuando está activo - igual que desktop */
    body.pt-open-search .pt-mobile-parent-search,
    body.pt-open-search .pt-mobile-parent-search * {
        z-index: 99999 !important; /* Z-index MÁS ALTO para todos los elementos del buscador (igual que desktop) */
    }
    
    /* one-x: Asegurar que el componente de búsqueda tenga z-index alto */
    body.pt-open-search .pt-mobile-parent-search .pt-search {
        z-index: 99999 !important; /* Z-index MÁS ALTO (igual que desktop) */
        position: relative !important;
    }
    
    /* one-x: Asegurar que el toggle del buscador tenga z-index alto */
    body.pt-open-search .pt-mobile-parent-search .pt-search .pt-dropdown-toggle {
        z-index: 99999 !important; /* Z-index MÁS ALTO (igual que desktop) */
        position: relative !important;
    }
}

/* ========================================
   CSS BUSCADOR DESKTOP - Z-INDEX MÁS ALTO
   ======================================== */
/* one-x: En desktop (PC), cuando el buscador está abierto, debe tener el z-index MÁS ALTO */
@media screen and (min-width: 1025px) {
    /* one-x: Cuando body tiene pt-open-search, el buscador debe estar por encima de TODO */
    body.pt-open-search header .pt-search {
        z-index: 99999 !important; /* Z-index MÁS ALTO - por encima de todo */
        position: relative !important;
    }
    
    /* one-x: El dropdown del buscador en desktop debe tener z-index MÁS ALTO */
    body.pt-open-search header .pt-search .pt-dropdown-menu {
        z-index: 99999 !important; /* Z-index MÁS ALTO - por encima de todo */
        position: fixed !important; /* Mantener position fixed como en el original */
    }
    
    /* one-x: Asegurar que todos los elementos del buscador tengan z-index alto */
    body.pt-open-search header .pt-search,
    body.pt-open-search header .pt-search * {
        z-index: 99999 !important; /* Z-index MÁS ALTO para todos los elementos del buscador */
    }
    
    /* one-x: El contenedor del buscador debe estar por encima de otros elementos del header */
    body.pt-open-search header .pt-search.pt-dropdown-obj {
        z-index: 99999 !important; /* Z-index MÁS ALTO */
    }
}

/* ========================================
   FIN CSS BUSCADOR DESKTOP
   ======================================== */
/* ========================================
   FIN CSS NUEVO - BUSCADOR MÓVIL
   ======================================== */

/* ========================================
   ESTILOS PARA LOGO CENTRADO AL 100%
   ======================================== 
   Documentación:
   - El logo tiene altura máxima de 75px
   - Si la imagen es menor a 75px, se respeta su altura original
   - Márgenes: 7px superior, 13px inferior
   - El contenedor se adapta dinámicamente al tamaño del logo
   ======================================== */
@media screen and (max-width: 1024px) {
    /* Asegurar que el header-row se adapte al contenido del logo */
    .pt-mobile-header .pt-header-row {
        height: auto !important;
        min-height: 84px !important;
        align-items: center !important;
    }
    
    /* Contenedor padre del logo - centrado al 100% del ancho */
    .pt-mobile-parent-logo {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-content: center !important;
        align-items: center !important;
        height: auto !important;
        min-height: auto !important;
        top: 0 !important;
        z-index: 1 !important; /* Por debajo de los iconos laterales */
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Contenedor interno del logo */
    .pt-mobile-parent-logo .pt-logo-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-content: center !important;
        align-items: center !important;
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Logo dentro del contenedor */
    .pt-mobile-parent-logo .pt-logo {
        text-align: center !important;
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }
    
    /* 
     * Imagen del logo - MÁXIMA ESPECIFICIDAD
     * --------------------------------------
     * Configuración del logo móvil:
     * - Altura máxima: 75px (si la imagen es menor, se respeta su altura original)
     * - Margen superior: 7px
     * - Margen inferior: 13px
     * - Márgenes laterales: automáticos (centrado horizontal)
     * - Ancho: automático, máximo 100%
     * 
     * Múltiples selectores para asegurar que se aplique correctamente
     * independientemente de la estructura HTML del logo.
     */
    .pt-mobile-header .pt-logo img.pt-logo-img,
    .pt-mobile-header .pt-logo .pt-logo-img,
    .pt-mobile-header .pt-logo a img.pt-logo-img,
    .pt-mobile-header .pt-logo a .pt-logo-img,
    .pt-mobile-parent-logo .pt-logo img.pt-logo-img,
    .pt-mobile-parent-logo .pt-logo .pt-logo-img,
    .pt-mobile-parent-logo .pt-logo a img.pt-logo-img,
    .pt-mobile-parent-logo .pt-logo a .pt-logo-img,
    .pt-mobile-parent-logo .pt-logo img,
    .pt-mobile-header .pt-logo-container .pt-logo img.pt-logo-img,
    .pt-mobile-header .pt-logo-container .pt-logo .pt-logo-img,
    header.pt-mobile-header .pt-logo-img {
        max-height: 75px !important;
        max-width: 100% !important;
        width: auto !important;
        height: auto !important;
        margin-top: 7px !important;
        margin-bottom: 13px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: block !important;
        box-sizing: border-box !important;
        object-fit: contain !important;
    }
}
/* ========================================
   FIN ESTILOS PARA LOGO CENTRADO
   ======================================== */

/* ========================================
   ESTILOS PARA BUSCADOR EN HEADER STUCK (OCULTO) - MÓVIL
   ======================================== */
@media screen and (max-width: 1024px) {
    /* Aplicar TODOS los estilos del buscador móvil normal al buscador stuck - Copia exacta */
    
    /* Contenedor del buscador stuck - igual que móvil normal */
    .stuck.pt-stuck-nav .pt-stuck-parent-search {
        position: relative !important;
        display: block !important;
        visibility: visible !important;
        z-index: 2 !important;
    }
    


/* ========================================
   MODAL BUSCADOR MÓVIL
   ======================================== */
.modal-buscador-movil {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 99999 !important;
    display: none;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.modal-buscador-movil-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.modal-buscador-movil-content {
    position: absolute !important;
    top: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 90% !important;
    max-width: 90% !important;
    height: auto !important;
    z-index: 2 !important;
    background: #ffffff !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
}

/* Botón X para cerrar */
.modal-buscador-movil-close {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    width: 30px !important;
    height: 30px !important;
    z-index: 3 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    line-height: 1 !important;
    color: #333333 !important;
    transition: color 0.2s, opacity 0.2s !important;
}

.modal-buscador-movil-close:hover {
    color: #000000 !important;
    opacity: 0.8 !important;
}

.modal-buscador-movil-close:before {
    content: '×' !important;
    font-size: 32px !important;
    line-height: 1 !important;
    font-weight: 300 !important;
}

/* Estilos para el contenido del modal */
.modal-buscador-movil-content .pt-info-text {
    font-size: 16px !important;
    line-height: 25px !important;
    margin-bottom: 15px !important;
    text-align: left !important;
    width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* ========================================
   ESTILOS DEL FORMULARIO DEL MODAL
   ======================================== */
.modal-buscador-movil-content form {
    width: 100% !important;
    position: relative !important;
}

/* ========================================
   CONTENEDOR SEARCH-FORM: Input y Botón
   ========================================
   
   Este contenedor agrupa el input y el botón de búsqueda.
   Usa position: relative para que el botón (absolute) se posicione
   relativo a este contenedor, no al viewport.
   
   MÁRGENES Y PADDINGS:
   - margin: 0 (sin márgenes externos)
   - padding: según necesidad del diseño
   ======================================== */
.modal-buscador-movil-content .search-form {
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

/* ========================================
   INPUT DE BÚSQUEDA
   ========================================
   
   El input ocupa todo el ancho del contenedor.
   El padding-right debe ser suficiente para que el texto
   no se solape con el botón de búsqueda (lupa).
   
   PADDING:
   - padding-top: 11px (espacio superior)
   - padding-bottom: 13px (espacio inferior)
   - padding-left: 10px (espacio izquierdo para el texto)
   - padding-right: 10px (espacio derecho - debe dejar espacio para la lupa)
   
   NOTA: El botón está posicionado absolutamente sobre el input,
   por lo que el padding-right del input es el espacio entre
   el texto y la lupa.
   ======================================== */
.modal-buscador-movil-content .search-form .pt-search-input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    /* Padding: top right bottom left */
    padding-top: 11px !important;
    padding-right: 50px !important; /* Espacio para la lupa (24px icono + 26px margen) */
    padding-bottom: 13px !important;
    padding-left: 10px !important;
    border: none !important;
    border-bottom: 1px solid #ccc !important;
    background: transparent !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #333333 !important;
    border-radius: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    margin: 0 !important;
}

/* Tamaño de fuente del placeholder */
.modal-buscador-movil-content .search-form .pt-search-input::placeholder {
    font-size: 16px !important;
}

/* ========================================
   BOTÓN DE BÚSQUEDA (LUPA)
   ========================================
   
   El botón se posiciona absolutamente sobre el input,
   alineado a la derecha y centrado verticalmente.
   
   POSICIONAMIENTO:
   - position: absolute (no ocupa espacio en el flow)
   - right: 10px (distancia desde el borde derecho)
   - top: 50% (centrado verticalmente)
   - transform: translateY(-50%) (ajuste fino del centrado)
   
   MÁRGENES Y PADDINGS:
   - margin: 0 (sin márgenes)
   - padding: 0 (el SVG tiene su propio tamaño)
   
   TAMAÑO:
   - El botón no tiene width/height fijos, se ajusta al contenido (SVG)
   - El SVG tiene 24x24px
   ======================================== */
.modal-buscador-movil-content .search-form .pt-btn-search {
    position: absolute !important;
    right: 10px !important; /* Alineado a la derecha con margen */
    top: 50% !important; /* Centrado verticalmente */
    transform: translateY(-50%) !important; /* Ajuste fino del centrado */
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 3 !important; /* Por encima del input */
    width: auto !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Estilos del SVG dentro del botón */
.modal-buscador-movil-content .search-form .pt-btn-search svg {
    width: 24px !important;
    height: 24px !important;
    display: block !important;
    pointer-events: none !important; /* El click pasa al botón, no al SVG */
    color: #333333 !important;
}

/* Hover del botón */
.modal-buscador-movil-content .search-form .pt-btn-search:hover {
    opacity: 0.7 !important;
}

.modal-buscador-movil-content .search-form .pt-btn-search:hover svg {
    color: #48CAB2 !important;
}

/* Prevenir scroll del body cuando el modal está abierto */
body.modal-buscador-movil-open {
    overflow: hidden !important;
}

/* ========================================
   ESTILOS PARA BUSCADOR_OCULTO.PHP
   ========================================
   
   Aplica los mismos paddings y margins que el modal del buscador móvil
   para mantener consistencia en el diseño.
   
   Estructura visual deseada:
   - .pt-info-text (texto label) ← ARRIBA, a la izquierda
   - .pt-col:last-child (botón cerrar X) ← ARRIBA, a la derecha (misma línea que texto)
   - .pt-col:first-child (input + botón búsqueda) ← ABAJO
   ======================================== */


/* ========================================
   OCULTAR LUPAS EN MÓVIL - BOTONES NUEVOS
   ========================================
   
   Cuando el menú hamburguesa está visible, ocultamos las lupas originales
   y mostramos los botones nuevos que abren el modal.
   ======================================== */
@media screen and (max-width: 1024px) {
    /* Ocultar todas las lupas de buscador en móvil */
    .pt-mobile-parent-search .pt-search,
    .pt-stuck-parent-search .pt-search {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* También ocultar cuando el menú hamburguesa está visible (incluso si ancho > 1024px) */
.pt-menu-toggle:not([style*="display: none"]) ~ * .pt-mobile-parent-search .pt-search,
.pt-stuck-parent-search .pt-search {
    /* Si el menú hamburguesa está visible, también ocultar lupas */
}

/* Estilos para los botones nuevos - SOLO MÓVIL */
@media screen and (max-width: 1024px) {
    .one-btn-buscador-movil {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        background: transparent !important;
        border: none !important;
        padding: 5px !important;
        cursor: pointer !important;
        color: #333333 !important;
        margin: 0 !important;
        vertical-align: middle !important;
    }
}

.one-btn-buscador-movil svg {
    width: 24px !important;
    height: 24px !important;
    display: block !important;
    pointer-events: none !important;
}

.one-btn-buscador-movil:hover {
    opacity: 0.7 !important;
}

.one-btn-buscador-movil:active {
    opacity: 0.5 !important;
}

/* ========================================
   DESKTOP: Mostrar buscador original, ocultar botón móvil
   ======================================== */
@media screen and (min-width: 1025px) {
    /* En desktop, ocultar los botones nuevos del buscador móvil - REGLA MÁS ESPECÍFICA */
    .pt-stuck-parent-search .one-btn-buscador-movil,
    .pt-stuck-parent-search #oneBtnBuscadorMovilStuck,
    .pt-mobile-parent-search .one-btn-buscador-movil,
    .pt-mobile-parent-search #oneBtnBuscadorMovilHeader,
    #oneBtnBuscadorMovilStuck,
    #oneBtnBuscadorMovilHeader,
    button.one-btn-buscador-movil,
    button#oneBtnBuscadorMovilStuck {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        width: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }
    
    /* En desktop, asegurar que el buscador original esté visible */
    .pt-stuck-parent-search .pt-search {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}

/* ========================================
   FIN MODAL BUSCADOR MÓVIL
   ======================================== */

/* ========================================
   ESTILO PARA BOTÓN BUSCAR EN BUSCADOR OCULTO
   Separar la lupa del borde derecho - APLICAR AL BOTÓN
   ======================================== */
header .pt-search .pt-dropdown-menu .pt-btn-search,
.pt-desctop-parent-search .pt-search .pt-dropdown-menu .pt-btn-search,
.pt-stuck-parent-search .pt-search .pt-dropdown-menu .pt-btn-search,
.pt-search.active .pt-dropdown-menu .pt-btn-search,
.pt-search .pt-dropdown-menu .pt-btn-search {
    margin-right: 5px !important;
    right: 4px !important; /* Ajustar posición absoluta para separar del borde (cambia de -1px) */
}

/* ========================================
   REGLA FINAL PARA OCULTAR BOTÓN EN DESKTOP - SIN MEDIA QUERY
   Aplicar siempre que la pantalla sea mayor a 1024px
   ======================================== */
@media (min-width: 1025px) {
    .pt-stuck-nav #oneBtnBuscadorMovilStuck,
    .pt-stuck-nav button#oneBtnBuscadorMovilStuck,
    .pt-stuck-nav .one-btn-buscador-movil#oneBtnBuscadorMovilStuck {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -9999px !important;
        width: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        font-size: 0 !important;
        line-height: 0 !important;
    }
}

/* ========================================
   BOTÓN HAMBURGUESA EN MENÚ FLOTANTE MÓVIL
   ========================================
   Asegurar que el botón hamburguesa sea clickeable
   cuando está en el menú flotante (stuck nav) en móvil
   ======================================== */
@media (max-width: 1024px) {
    /* ASEGURAR QUE EL CONTENEDOR DEL MENÚ HAMBURGUESA SEA VISIBLE */
    .pt-stuck-nav .pt-header-row > .pt-stuck-parent-menu {
        left: 0 !important;
        margin-left: 0 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
        top: 0 !important;
    }
    
    /* Asegurar que el contenedor del botón también tenga z-index alto y sea visible */
    .pt-stuck-nav .pt-stuck-parent-menu {
        position: relative !important;
        z-index: 21 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Aplicar posicionamiento manual al botón hamburguesa */
    .pt-stuck-nav .pt-stuck-parent-menu .pt-menu-toggle {
        position: absolute !important;
        left: 20px !important; /* Mover 12px a la izquierda (32px - 12px = 20px) */
        top: 8px !important; /* Bajar 6px desde la posición anterior (2px + 6px = 8px) */
        z-index: 21 !important; /* Por encima del menú flotante (z-index: 20) */
        pointer-events: auto !important; /* Asegurar que sea clickeable */
        cursor: pointer !important;
        margin: 0 !important; /* Eliminar márgenes para usar posición absoluta */
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Aplicar el mismo color que la lupa al SVG del botón hamburguesa */
    .pt-stuck-nav .pt-stuck-parent-menu .pt-menu-toggle svg {
        pointer-events: none !important; /* El SVG no debe interceptar clics */
        fill: currentColor !important; /* Heredar el color del botón */
        color: #333333 !important; /* Mismo color que la lupa por defecto */
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Asegurar que el botón completo sea clickeable */
    .pt-stuck-nav .pt-stuck-parent-menu .pt-menu-toggle * {
        pointer-events: none !important; /* Los hijos no interceptan clics */
    }
    
    /* CORREGIR POSICIONAMIENTO DE LA LUPA - POSICIÓN MANUAL EXACTA */
    .pt-stuck-nav .pt-header-row > .pt-stuck-parent-search {
        position: absolute !important;
        right: 67px !important; /* Mover 28px a la derecha (95px - 28px = 67px) */
        top: 16px !important; /* Bajar 7px desde la posición anterior (9px + 7px = 16px) */
        margin: 0 !important; /* Eliminar márgenes para usar posición absoluta */
    }
    
    /* Aplicar posicionamiento al botón de búsqueda dentro del contenedor */
    .pt-stuck-nav .pt-stuck-parent-search .pt-search .pt-dropdown-toggle {
        position: relative !important;
        margin: 0 !important;
    }
    
    /* También aplicar posicionamiento al botón de búsqueda móvil si existe */
    .pt-stuck-nav .pt-stuck-parent-search #oneBtnBuscadorMovilStuck,
    .pt-stuck-nav .pt-stuck-parent-search .one-btn-buscador-movil {
        position: relative !important;
        margin: 0 !important;
    }
    
    /* CORREGIR POSICIONAMIENTO DEL CARRITO - ASEGURAR QUE QUEDE DENTRO */
    .pt-stuck-nav .pt-header-row > .pt-stuck-parent-cart {
        right: 15px !important; /* Mover 15px a la izquierda (de 0 a 15px) */
        padding-right: 15px !important; /* Padding interno para que no se salga */
    }
    
    /* Asegurar que el contenedor tenga padding para que los elementos no se salgan */
    .pt-stuck-nav .container,
    .pt-stuck-nav .container-fluid {
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow: visible !important;
    }
    
    /* CENTRAR EL LOGO DE FORMA ABSOLUTA - INDEPENDIENTE DE OTROS ELEMENTOS */
    .pt-stuck-nav .pt-header-row > .pt-logo-container {
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        top: 0 !important;
        width: auto !important;
        max-width: calc(100% - 200px) !important; /* Evitar solapamiento con iconos laterales */
        z-index: 1 !important; /* Mantener z-index bajo (iconos tienen z-index 21) */
        height: 100% !important; /* Mantener altura completa */
        display: flex !important; /* Mantener flex para centrar contenido interno */
        align-items: center !important; /* Centrar verticalmente */
        justify-content: center !important; /* Centrar horizontalmente */
    }
}