/* =========================================================
   TIENDA JOCHY - NAVEGACIÓN MÓVIL DEFINITIVA
   Un solo archivo, sin reglas sticky/fixed contradictorias
   ========================================================= */

.cart-link__icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
}

/* Escritorio: conserva el comportamiento normal */
@media (min-width: 681px){
    .cart-link__icon{
        display:none;
    }
}

@media (max-width: 680px){

    /*
     * La franja superior se desplaza normalmente.
     * El header completo permanece visible durante el scroll.
     */
    .announcement{
        position:relative !important;
        z-index:1 !important;
    }

    .announcement__inner{
        min-height:30px !important;
        padding:0 4px !important;
        font-size:10px !important;
    }

    .announcement__inner span:last-child{
        display:none !important;
    }

    .site-header{
        position:sticky !important;
        top:0 !important;
        z-index:5000 !important;
        width:100% !important;
        overflow:visible !important;
        background:rgba(255,255,255,.98) !important;
        border-bottom:1px solid var(--border) !important;
        box-shadow:0 8px 25px rgba(75,24,51,.09) !important;
        backdrop-filter:blur(14px) !important;
        -webkit-backdrop-filter:blur(14px) !important;
    }

    /*
     * Fila superior compacta:
     * logo | buscador | carrito
     */
    .header-main{
        display:grid !important;
        grid-template-columns:54px minmax(0,1fr) 42px !important;
        align-items:center !important;
        gap:7px !important;
        width:100% !important;
        max-width:100% !important;
        min-height:62px !important;
        padding:6px 8px !important;
        margin:0 !important;
    }

    .site-logo{
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        width:54px !important;
        height:54px !important;
        margin:0 !important;
        overflow:hidden !important;
    }

    .site-logo img{
        display:block !important;
        width:52px !important;
        max-width:52px !important;
        height:52px !important;
        max-height:52px !important;
        object-fit:contain !important;
    }

    .header-search{
        display:grid !important;
        grid-template-columns:minmax(0,1fr) 60px !important;
        width:100% !important;
        min-width:0 !important;
        height:38px !important;
        margin:0 !important;
        border-radius:12px !important;
        overflow:hidden !important;
        box-shadow:none !important;
    }

    .header-search input{
        width:100% !important;
        min-width:0 !important;
        height:38px !important;
        padding:0 10px !important;
        font-size:11px !important;
        border:0 !important;
    }

    .header-search button{
        width:60px !important;
        min-width:60px !important;
        height:38px !important;
        padding:0 6px !important;
        font-size:10px !important;
    }

    .header-actions{
        display:flex !important;
        align-items:center !important;
        justify-content:flex-end !important;
        width:42px !important;
        min-width:42px !important;
        gap:0 !important;
    }

    /* Oculta únicamente "Ayuda" */
    .header-actions > a:not(.cart-link){
        display:none !important;
    }

    .cart-link{
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:0 !important;
        position:relative !important;
        width:40px !important;
        min-width:40px !important;
        height:40px !important;
        min-height:40px !important;
        padding:0 !important;
        margin:0 !important;
        border-radius:13px !important;
        background:var(--rose) !important;
        color:var(--primary) !important;
        overflow:visible !important;
    }

    .cart-link__icon{
        display:inline-flex !important;
        width:20px !important;
        height:20px !important;
    }

    .cart-link__label{
        display:none !important;
    }

    .cart-link strong{
        position:absolute !important;
        top:-5px !important;
        right:-5px !important;
        display:grid !important;
        place-items:center !important;
        width:18px !important;
        min-width:18px !important;
        height:18px !important;
        padding:0 !important;
        border:2px solid #fff !important;
        border-radius:50% !important;
        background:var(--primary) !important;
        color:#fff !important;
        font-size:9px !important;
        line-height:1 !important;
    }

    /*
     * Menú siempre visible porque está dentro del site-header sticky.
     * No usa position fixed ni bottom.
     */
    .main-nav{
        position:relative !important;
        top:auto !important;
        left:auto !important;
        right:auto !important;
        bottom:auto !important;
        z-index:auto !important;
        display:block !important;
        width:100% !important;
        height:43px !important;
        min-height:43px !important;
        max-height:43px !important;
        overflow-x:auto !important;
        overflow-y:hidden !important;
        white-space:nowrap !important;
        background:#fff !important;
        border-top:1px solid var(--border) !important;
        border-bottom:0 !important;
        box-shadow:none !important;
        scrollbar-width:none !important;
        -webkit-overflow-scrolling:touch !important;
    }

    .main-nav::-webkit-scrollbar{
        display:none !important;
    }

    .main-nav__inner{
        display:flex !important;
        flex-direction:row !important;
        flex-wrap:nowrap !important;
        align-items:center !important;
        justify-content:flex-start !important;
        gap:3px !important;
        width:max-content !important;
        min-width:100% !important;
        min-height:43px !important;
        padding:0 7px !important;
        margin:0 !important;
    }

    .main-nav a{
        flex:0 0 auto !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        min-height:34px !important;
        padding:0 12px !important;
        border-radius:10px !important;
        color:#584d53 !important;
        font-size:11px !important;
        font-weight:800 !important;
        line-height:1 !important;
        white-space:nowrap !important;
    }

    .main-nav a:hover,
    .main-nav a.is-active{
        color:var(--primary) !important;
        background:var(--rose) !important;
    }

    /*
     * Anula el espacio inferior agregado por el parche anterior.
     */
    body{
        padding-bottom:0 !important;
    }

    .whatsapp-float{
        bottom:18px !important;
    }

    .promotion-popup{
        padding-bottom:0 !important;
    }

    html{
        scroll-padding-top:112px !important;
        scroll-padding-bottom:0 !important;
    }
}

@media (max-width: 390px){

    .header-main{
        grid-template-columns:48px minmax(0,1fr) 38px !important;
        gap:5px !important;
        padding:5px 6px !important;
    }

    .site-logo{
        width:48px !important;
        height:48px !important;
    }

    .site-logo img{
        width:46px !important;
        max-width:46px !important;
        height:46px !important;
        max-height:46px !important;
    }

    .header-search{
        grid-template-columns:minmax(0,1fr) 52px !important;
        height:36px !important;
    }

    .header-search input{
        height:36px !important;
        padding:0 8px !important;
        font-size:10px !important;
    }

    .header-search button{
        width:52px !important;
        min-width:52px !important;
        height:36px !important;
        font-size:9px !important;
    }

    .header-actions{
        width:38px !important;
        min-width:38px !important;
    }

    .cart-link{
        width:36px !important;
        min-width:36px !important;
        height:36px !important;
        min-height:36px !important;
    }

    .main-nav a{
        padding:0 10px !important;
        font-size:10px !important;
    }
}