/****1****/
/* --- TYPOGRAPHY & FONT --- */
@import url('https://fonts.googleapis.com/css2?family=Mali:wght@300;400;600&display=swap');

.storefront-primary-navigation a, .main-navigation a {
    font-family: 'Mali', cursive !important;
    color: #1B4D3E !important; /* Dark green */
    font-size: 16px !important;
    text-transform: none;
}

/****2****/
/* --- DROPDOWN MENU FIXES --- */
.main-navigation ul li { position: relative !important; }

.main-navigation ul.sub-menu {
    display: none;
    position: absolute;
    background-color: #fffdf0;
    z-index: 9999;
    min-width: 180px;
    padding: 10px 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.main-navigation li:hover > ul.sub-menu { display: block !important; }

/****3****/
/* --- MOBILE NAVIGATION --- */
@media screen and (max-width: 1024px) {
    .menu-toggle {
        background-color: #fffdf0;
        color: #1B4D3E;
        border: 1px solid #1B4D3E;
    }
    .handheld-navigation ul li a {
        text-transform: uppercase !important;
        color: #1B4D3E !important;
    }
}

/****4****/
/* --- SHOP PAGE FIXES --- */
.page-id-2212 .storefront-sorting:nth-of-type(2),
.page-id-2212 .site-main > .products + .products {
    display: none !important;
}

/****5****/
/* --- CENTER PAGE TITLES --- */
.hentry.type-page .entry-header { text-align: center !important; }

/****6****/
/* --- 1. OUTLINE EXTRA FINO (Efecto Alta Definición) --- */
.main-navigation a,
.storefront-primary-navigation a,
.handheld-navigation ul li a {
    color: #497c02 !important; /* Verde principal */

    /* Quitamos el 'stroke' grueso y usamos sombras de 0.5px para finura total */
    -webkit-text-stroke: 0;
    text-shadow:
        -0.5px -0.5px 0 #fbfcf4,
         0.5px -0.5px 0 #fbfcf4,
        -0.5px  0.5px 0 #fbfcf4,
         0.5px  0.5px 0 #fbfcf4;

    font-weight: 500 !important; /* Bajamos un poco el peso para que se vea más fino */
    letter-spacing: 0.03em;
}

/* --- 2. EL MENÚ DE 3 LÍNEAS (Rescate Total) --- */
/* Escondemos cualquier texto que diga "Menu" para dejar solo las líneas */
.menu-toggle {
    text-indent: -9999px;
    background: #fbfcf4 !important; /* Fondo crema */
    border: 1px solid #497c02 !important;
    width: 45px;
    height: 40px;
    position: relative;
    padding: 0 !important;
}

/* Dibujamos las 3 líneas con CSS puro (Geometría Sagrada) */
.menu-toggle::before {
    content: "" !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 2px;
    background: #497c02 !important;
    box-shadow:
        0 -6px 0 #497c02, /* Línea superior */
        0 6px 0 #497c02;  /* Línea inferior */
    text-indent: 0;
}

/****7****/
/* --- COMPRESIÓN DEL MENÚ DESKTOP --- */
@media screen and (min-width: 1025px) {
    /* 1. Reducir el espacio entre las palabras */
    .main-navigation ul.menu li a {
        padding-left: 10px !important;
        padding-right: 10px !important;
        font-size: 15px !important; /* Reducimos un pelín el tamaño para que respire */
    }

    /* 2. Asegurar que los ítems se agrupen al centro sin separarse tanto */
    .main-navigation ul.menu {
        justify-content: center !important;
        flex-wrap: nowrap !important; /* ¡Prohibido saltar a la siguiente línea! */
    }

    /* 3. Ajustar el margen entre los contenedores de los ítems */
    .main-navigation ul.menu li {
        margin: 0 4px !important;
    }

    /* 4. Mover el buscador un poco para que no empuje el menú */
    .site-header-blocks {
        padding-right: 10px !important;
        max-width: 250px !important; /* Limitamos el ancho del buscador */
    }
}

/****8****/
/* --- EL BANNER (Un poco más alto y sin repetición) --- */
.site-header {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center top !important; /* Mantiene tu cara visible */
    padding-top: 100px !important; /* 🚀 ESTA ES LA MAGIA: Cambia este número a 120px o 150px si lo quieres aún más alto */
}