/*
Theme Name:   Bw KidXtore Child
Theme URI:    https://kidxtore.bzotech.com/intro/
Author:       The BZOTech
Author URI:   #
Description:  KidXtore is a very cute WooCommerce theme with eye-catching designs and colorful colors. It is the ideal WordPress theme for e-commerce websites or businesses that sell goods for babies and kids.
Template:     bw-kidxtore
Version: 1.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: baby store wordpress theme, kids store wordpress theme, wordpress baby theme, wordpress kid shop theme, baby store woocommerce theme, kids store woocommerce theme, elementor theme, woocommerce theme, wordpress theme
Text Domain: bw-kidxtore-child
*/
/* ==========================================================================
   VITRINA CRIOLLA - MUNDO JUGUETERÍA: MENÚ DEL HEADER Y MEGA MENÚ
   ========================================================================== */

/* 1. Barra de Navegación Header */
.bzotech-navbar-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.bzotech-navbar-nav > li > a {
    font-family: 'Fredoka', 'Poppins', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #222222 !important;
    padding: 12px 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.2s ease !important;
    border-radius: 8px !important;
}

.bzotech-navbar-nav > li:hover > a {
    color: #ff7a00 !important;
    background: rgba(255, 122, 0, 0.06) !important;
}

/* 2. Mega Menú de 3 Columnas (Juguetes) */
.bzotech-navbar-nav > li.menu-item-mega {
    position: static !important;
}

.bzotech-navbar-nav > li.menu-item-mega > .sub-menu {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(10px) !important;
    width: 860px !important;
    max-width: 95vw !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    gap: 20px !important;
    padding: 28px 32px !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12) !important;
    border: 1px solid #f0f0f0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    z-index: 99999 !important;
}

.bzotech-navbar-nav > li.menu-item-mega:hover > .sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0) !important;
}

/* Columnas del Mega Menú */
.bzotech-navbar-nav > li.menu-item-mega > .sub-menu > li.menu-column-title {
    flex: 1 1 30% !important;
    display: block !important;
    list-style: none !important;
}

.bzotech-navbar-nav > li.menu-item-mega > .sub-menu > li.menu-column-title > a {
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #111111 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-bottom: 2px solid #ff7a00 !important;
    padding-bottom: 8px !important;
    margin-bottom: 14px !important;
    display: block !important;
}

.bzotech-navbar-nav > li.menu-item-mega > .sub-menu > li.menu-column-title > a .indicator-icon {
    display: none !important;
}

/* Enlaces dentro de cada columna */
.bzotech-navbar-nav > li.menu-item-mega > .sub-menu > li.menu-column-title > .sub-menu {
    position: static !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    margin: 0 !important;
    list-style: none !important;
}

.bzotech-navbar-nav > li.menu-item-mega > .sub-menu > li.menu-column-title > .sub-menu > li {
    display: block !important;
    margin-bottom: 6px !important;
}

.bzotech-navbar-nav > li.menu-item-mega > .sub-menu > li.menu-column-title > .sub-menu > li > a {
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #555555 !important;
    padding: 5px 0 !important;
    display: block !important;
    transition: all 0.2s ease !important;
}

.bzotech-navbar-nav > li.menu-item-mega > .sub-menu > li.menu-column-title > .sub-menu > li > a:hover {
    color: #ff7a00 !important;
    transform: translateX(5px) !important;
}

/* 3. Desplegables Estándar (Por Edad, Aire Libre, Personajes, Fiestas) */
.bzotech-navbar-nav > li:not(.menu-item-mega) {
    position: relative !important;
}

.bzotech-navbar-nav > li:not(.menu-item-mega) > .sub-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    min-width: 250px !important;
    background: #ffffff !important;
    border-radius: 14px !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12) !important;
    border: 1px solid #f0f0f0 !important;
    padding: 12px 14px !important;
    list-style: none !important;
    margin: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(10px) !important;
    transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    z-index: 99999 !important;
}

.bzotech-navbar-nav > li:not(.menu-item-mega):hover > .sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}

.bzotech-navbar-nav > li:not(.menu-item-mega) > .sub-menu > li {
    display: block !important;
    margin-bottom: 2px !important;
}

.bzotech-navbar-nav > li:not(.menu-item-mega) > .sub-menu > li > a {
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #444444 !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    display: block !important;
    transition: all 0.2s ease !important;
}

.bzotech-navbar-nav > li:not(.menu-item-mega) > .sub-menu > li > a:hover {
    background: #fff6ee !important;
    color: #ff7a00 !important;
    padding-left: 16px !important;
}

/* 4. Botón Destacado de Ofertas */
.bzotech-navbar-nav > li.menu-item-sale > a {
    background: #ff4757 !important;
    color: #ffffff !important;
    border-radius: 20px !important;
    padding: 7px 18px !important;
    margin-left: 8px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    transition: all 0.2s ease !important;
}

.bzotech-navbar-nav > li.menu-item-sale > a:hover {
    background: #e03040 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(255, 71, 87, 0.4) !important;
    transform: translateY(-1px) !important;
}


/* ==========================================================================
   OPTIMIZACIONES MOBILE PARA HOME 4 (KIDS SUPPLY MARKET) Y NAVEGACIÓN
   ========================================================================== */

/* 1. Buscador siempre visible en móvil y cabecera compacta */
@media (max-width: 767px) {
    .site-header .bzotech-search_global,
    .elementor-widget-bzotech-search_global {
        display: block !important;
        width: 100% !important;
        margin: 8px 0 !important;
    }
    
    .site-header .bzotech-search_global input[type="search"] {
        height: 44px !important;
        font-size: 14px !important;
        border-radius: 25px !important;
        border: 1.5px solid #ff7a00 !important;
        padding-left: 18px !important;
    }
    
    .site-header .bzotech-search_global button[type="submit"] {
        background-color: #ff7a00 !important;
        color: #ffffff !important;
        border-radius: 0 25px 25px 0 !important;
        height: 44px !important;
        padding: 0 20px !important;
    }
    
    /* 2. Cuadrícula de íconos de categorías en móvil */
    .elementor-widget-bzotech-slider_global .list-category-slider,
    .list-category-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 12px 6px !important;
        padding: 10px 0 !important;
        justify-items: center !important;
    }
    
    .list-category-slider .item-category,
    .item-category-slider {
        text-align: center !important;
        width: 100% !important;
    }
    
    .item-category-slider .image-category,
    .item-category .cat-thumb {
        width: 65px !important;
        height: 65px !important;
        margin: 0 auto 6px !important;
        border-radius: 50% !important;
        border: 2px solid #ff7a00 !important;
        padding: 3px !important;
        box-shadow: 0 4px 10px rgba(255, 122, 0, 0.15) !important;
        background: #fff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .item-category-slider .image-category img,
    .item-category .cat-thumb img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 50% !important;
    }
    
    .item-category-slider .title-category a,
    .item-category .cat-name {
        font-size: 11px !important;
        font-weight: 600 !important;
        color: #333333 !important;
        line-height: 1.2 !important;
        display: block !important;
        text-align: center !important;
    }

    /* 3. Hero Slider adaptado a pantallas pequeñas */
    .elementor-widget-bzotech-slider_global .slider-wrapper img {
        height: auto !important;
        max-height: 240px !important;
        object-fit: cover !important;
        border-radius: 12px !important;
    }
    
    /* 4. Flyers verticales y horizontales en móvil */
    .elementor-widget-bzotech-banner-info-global {
        margin-bottom: 15px !important;
    }
    
    .elementor-widget-bzotech-banner-info-global img {
        width: 100% !important;
        height: auto !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    }
    
    /* 5. Grilla de productos en 2 columnas parejas en móvil */
    .bzotech-products-global ul.products,
    .woocommerce ul.products[class*="columns-"] {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        margin: 15px 0 !important;
        padding: 0 !important;
    }
    
    .bzotech-products-global ul.products li.product,
    .woocommerce ul.products li.product {
        width: 100% !important;
        margin: 0 !important;
        float: none !important;
        border-radius: 12px !important;
        padding: 10px !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
        border: 1px solid #f0f0f0 !important;
        background: #ffffff !important;
    }

    /* 6. Tabs de layouts en móvil con scroll horizontal fluido */
    .bzotech-tabs-global .tab-nav,
    .bzotech-products-global .tab-title,
    .bzotech-tab-title {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 8px !important;
        padding-bottom: 8px !important;
        scrollbar-width: none !important;
    }
    
    .bzotech-tabs-global .tab-nav::-webkit-scrollbar,
    .bzotech-tab-title::-webkit-scrollbar {
        display: none !important;
    }
    
    .bzotech-tab-title li a,
    .bzotech-tabs-global .tab-nav a {
        white-space: nowrap !important;
        font-size: 13px !important;
        padding: 6px 14px !important;
        border-radius: 20px !important;
        background: #f7f7f7 !important;
        color: #555555 !important;
    }
    
    .bzotech-tab-title li.active a,
    .bzotech-tabs-global .tab-nav a.active {
        background: #ff7a00 !important;
        color: #ffffff !important;
    }

    /* 7. Menú móvil tipo acordeón y navegación táctil */
    .bzotech-menu-mobile {
        background: #ffffff !important;
    }
    
    .bzotech-menu-mobile .bzotech-navbar-nav {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
    }
    
    .bzotech-menu-mobile .bzotech-navbar-nav > li {
        border-bottom: 1px solid #f2f2f2 !important;
        position: relative !important;
    }
    
    .bzotech-menu-mobile .bzotech-navbar-nav > li > a {
        padding: 14px 18px !important;
        font-size: 15px !important;
        color: #222222 !important;
        justify-content: space-between !important;
    }
    
    .bzotech-menu-mobile .bzotech-navbar-nav > li .sub-menu {
        position: static !important;
        width: 100% !important;
        transform: none !important;
        box-shadow: none !important;
        border: none !important;
        background: #fafafa !important;
        padding: 10px 18px 10px 28px !important;
        border-radius: 0 !important;
    }
}