/* ============================================
   STORE SELECTOR - FIX PARA TEMA HUELLITAS
   Simple Display Block/None Version
   ============================================ */

/* Desktop - Asegurar visibilidad en pantallas grandes */
@media (min-width: 769px) {
    .store-selector-desktop {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 999 !important;
        position: relative !important;
    }

    .store-selector-header {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .store-selector-toggle {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Dropdown cerrado por defecto */
    .store-selector-dropdown {
        display: none !important;
    }

    /* Dropdown abierto cuando tiene clase .open o aria-expanded="true" */
    .store-selector-desktop.open .store-selector-dropdown,
    .store-selector-desktop[aria-expanded="true"] .store-selector-dropdown {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* Mobile - Asegurar visibilidad en pantallas pequeñas */
@media (max-width: 768px) {
    .store-selector-mobile {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .store-selector-mobile-toggle {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
    }

    /* Contenido cerrado por defecto */
    .store-selector-mobile-content {
        display: none !important;
    }

    /* Contenido abierto cuando tiene clase .open o aria-expanded="true" */
    .store-selector-mobile.open .store-selector-mobile-content,
    .store-selector-mobile[aria-expanded="true"] .store-selector-mobile-content {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        max-height: calc(100vh - 200px) !important;
        overflow-y: auto !important;
    }

    .store-item-mobile {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .store-item-mobile .btn-select-store-mobile {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
    }
}

/* Asegurar que desktop está oculto en mobile */
@media (max-width: 768px) {
    .store-selector-desktop {
        display: none !important;
    }
}

/* Asegurar que mobile está oculto en desktop */
@media (min-width: 769px) {
    .store-selector-mobile {
        display: none !important;
    }
}

/* ============================================
   AJUSTES PARA MÓVIL - Layout y Menú
   ============================================ */

@media (max-width: 768px) {
    /* Cambiar menú de flex a grid - SOLO el menú top */
    header#header .header-top .menu.js-top-menu ul#top-menu {
        display: grid !important;
        padding: 0 !important;
    }

    /* Contenedor del menú en móvil - position static y width 100% */
    .menu.js-top-menu.position-static {
        width: 100% !important;
        position: static !important;
    }
    header#header .header-top .menu.js-top-menu ul#top-menu li {
        margin-bottom: 6px!important;
    }
    /* Quitar justify-content-center y d-flex en móvil - SOLO para Store Selector */
    header#header .header-top .content_mobile .col-xs-12.d-flex.justify-content-center {
        display: block !important;
        text-align: left !important;
    }

    /* Asegurar que el store selector mobile ocupe el ancho completo */
    .store-selector-wrapper.store-selector-mobile {
        width: 100% !important;
        margin: 0!important;
        padding: 0 15px!important;
    }

    /* Botón toggle en móvil - asegurar tamaño */
    .store-selector-mobile-toggle {
        width: 100% !important;
        margin: 0 !important;
        padding: 6px 16px !important;
        font-size: 16px !important;
        min-height: 30px !important;
    }

    /* Contenido en móvil - ancho completo */
    .store-selector-mobile-content {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Items del store selector mobile - asegurar layout */
    .store-item-mobile {
        display: block !important;
        width: 100% !important;
    }

    /* Botones de tienda en móvil */
    .btn-select-store-mobile {
        width: 100% !important;
        display: block !important;
    }
}