.site-header{

    position: fixed;
    top:0;
    left:0;

    width:100%;

    background:rgba(255,255,255,.95);

    backdrop-filter:blur(10px);

    border-bottom:1px solid rgba(0,0,0,.05);

    z-index:9999;

    overflow:visible;

}

.header-container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    min-height:90px;

    padding:15px 0;

}

.logo{

    display:flex;

    align-items:center;

    flex-shrink:0;

}

.logo img{

    height:60px;
    width:auto;

}

/* ==========================
   MENÚ ESCRITORIO
========================== */

.main-nav{

    display:flex;

    align-items:center;

    gap:35px;

}

.main-nav a{

    color:#1d3b20;

    font-weight:600;

    transition:.3s;

}

.main-nav a:hover{

    color:#f4b400;

}

.header-button{

    background:#1d3b20;

    color:#fff;

    padding:14px 24px;

    border-radius:999px;

    font-weight:700;

    transition:.3s;

}

.header-button:hover{

    transform:translateY(-2px);

}

/* ==========================
   BOTÓN HAMBURGUESA
========================== */

.menu-toggle{

    display:none;

    width:50px;
    height:50px;

    background:none;

    border:none;

    cursor:pointer;

    z-index:10001;

}

.menu-toggle span{

    display:block;

    width:28px;
    height:3px;

    margin:6px auto;

    background:#1d3b20;

    border-radius:30px;

    transition:.35s;

}

/* X */

.menu-open .menu-toggle span:nth-child(1){

    transform:translateY(9px) rotate(45deg);

}

.menu-open .menu-toggle span:nth-child(2){

    opacity:0;

}

.menu-open .menu-toggle span:nth-child(3){

    transform:translateY(-9px) rotate(-45deg);

}

/* ==========================
   TABLETS
========================== */

@media(max-width:1024px){

    .header-button{

        display:none;

    }

}

/* ==========================
   MÓVIL
========================== */

@media(max-width:768px){

    .header-container{

        flex-direction:row;

        justify-content:space-between;

        padding:15px 0;

    }

    .menu-toggle{

        display:block;

        position:relative;

    }

    .main-nav{

    position:fixed;

    top:0;

    right:-100%;

    width:320px;

    max-width:85vw;

    height:100vh;

    background:#fff;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:35px;

    transition:right .4s ease;

    box-shadow:-10px 0 35px rgba(0,0,0,.15);

    z-index:10000;

}

    .main-nav.active{

        right:0;

    }

    .main-nav a{

        font-size:1.2rem;

    }

    .main-nav a:hover{

        transform:translateX(8px);

    }

}
/* ==========================
   ICONO DE CARRITO (nuevo)
   No modifica reglas existentes,
   solo agrega el wrapper .header-actions
   y el ícono de carrito.
========================== */

.header-actions{

    display:flex;

    align-items:center;

    gap:14px;

    flex-shrink:0;

}

.header-cart-icon{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    width:44px;
    height:44px;

    border-radius:50%;

    color:#1d3b20;

    transition:.3s;

}

.header-cart-icon:hover{

    background:rgba(29,59,32,.08);

}

.header-cart-icon svg{

    width:22px;
    height:22px;

}

.header-cart-count{

    position:absolute;

    top:2px;
    right:2px;

    min-width:16px;
    height:16px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#f4b400;

    color:#1d3b20;

    font-size:.65rem;

    font-weight:700;

    border-radius:50%;

    line-height:1;

    padding:0 2px;

}

@media(max-width:768px){

    .header-actions{

        gap:6px;

    }

    .header-cart-icon{

        width:40px;
        height:40px;

    }

}