/* =====================================================

   MAX MEGA MENU – FINAL CLEAN VERSION (JANCHIN)

   ===================================================== */



/* =====================================================

   HEADER BASE (NO ROMPER MAX MEGA MENU)

   ===================================================== */



#mega-menu-wrap-menu-1 {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  z-index: 9999;

  background: transparent;

  transition: background 0.3s ease, box-shadow 0.3s ease;

}



/* =====================================================

   TIPOGRAFÍA DEL MENÚ

   ===================================================== */



#mega-menu-wrap-menu-1

#mega-menu-menu-1

li.mega-menu-item > a.mega-menu-link {

  font-family: "Syncopate", sans-serif;

  text-transform: uppercase;

  font-weight: bold;

}



/* Hover del menú */

#mega-menu-wrap-menu-1

#mega-menu-menu-1

li.mega-menu-item > a.mega-menu-link:hover {

  color: #ffe523;

  text-shadow: none;

}



/* =====================================================

   POSICIÓN DEL MENÚ (SIN TOCAR EL <UL>)

   ===================================================== */



/* Gallery comienza desde mitad de pantalla - 1em */

#mega-menu-item-20 {

  margin-left: calc(50vw - 1em);

}



@media (max-width: 768px) {

  #mega-menu-item-20 {

    margin-left: 0;

  }

}



/* =====================================================

   LOGO GLOBAL ÚNICO (FUERA DEL MENÚ)

   ===================================================== */



.global-logo-link {

  position: fixed;

  left: 3em;

  top: 32px;



  width: 180px;

  height: 100px;



  background-image: url("https://www.janchin.com/wp-content/uploads/2026/04/Recurso-1.webp");

  background-repeat: no-repeat;

  background-position: left center;

  background-size: contain;



  z-index: 10001;

  display: block;

}



/* Mobile logo */

@media (max-width: 768px) {

  .global-logo-link {

    left: 1.5em;

    top: 24px;

    width: 140px;

    height: 80px;

  }

}



/* =====================================================

   ELIMINAR LOGOS INTERNOS DEL MENÚ

   ===================================================== */



#mega-menu-menu-1 li.logo-item,

#mega-menu-wrap-menu-1 .mega-logo-item {

  display: none !important;

}

/* =====================================

   OCULTAR SOLO EL LOGO AUTOMÁTICO

   (NO EL HEADER NI LA NAVEGACIÓN)

   ===================================== */



.site-header .site-branding,

.site-header .site-logo,

.site-header .custom-logo-link,

.site-header img.custom-logo {

  display: none !important;

  visibility: hidden !important;

  opacity: 0 !important;

  pointer-events: none !important;

}

/* =====================================

   ALINEAR MENÚ CON LOGO

   ===================================== */



#mega-menu-wrap-menu-1 {

  top: 32px; /* mismo top que el logo */

}


/* =====================================================

   MENÚ MÓVIL – STYLE SAFE

   ===================================================== */



@media (max-width: 768px) {



  #mega-menu-wrap-menu-1 {

    padding: 0 !important;

  }



  #mega-menu-wrap-menu-1 .mega-menu-toggle {

    display: flex !important;

    justify-content: flex-end !important;

    padding: 10px 14px;

    position: relative;

    z-index: 10000;

  }



  #mega-menu-wrap-menu-1 .mega-menu {

    position: absolute !important;

    top: 100% !important;

    right: 0;

    margin-top: 14px;

    width: 92vw;

    max-width: 380px;

    background: rgba(255, 255, 255, 0.55);

    backdrop-filter: blur(6px);

    -webkit-backdrop-filter: blur(6px);

    border-radius: 8px;

    overflow: hidden;

  }



  #mega-menu-wrap-menu-1 .mega-menu a.mega-menu-link {

    font-size: 26px;

    line-height: 1.5;

    padding: 12px 16px;

  }

}



/* =====================================================

   FIX SCROLL MOBILE

   ===================================================== */



@media (max-width: 768px) {

  html,

  body,

  html.mega-menu-open,

  body.mega-menu-open,

  html.mega-menu-active,

  body.mega-menu-active {

    overflow: auto !important;

    position: static !important;

  }

}



/* =====================================================

   ELIMINAR FOOTER HELLO THEME

   ===================================================== */



.site-footer,

#site-footer,

footer {

  display: none !important;

  height: 0 !important;

  margin: 0 !important;

  padding: 0 !important;

}



body {

  margin-bottom: 0 !important;

}



/* =====================================

   ICONO CARRITO – MENU

   ===================================== */



#mega-menu-menu-1 .menu-cart > a.mega-menu-link {

  position: relative;

  padding-left: 22px; /* espacio para ícono */

  font-size: 0;       /* oculta texto "Cart" */

}



/* Ícono carrito */

#mega-menu-menu-1 .menu-cart > a.mega-menu-link::before {

  content: "\f174"; /* dashicons-cart */

  font-family: dashicons;

  font-size: 20px;

  color: #000;

  position: absolute;

  left: 0;

  top: 50%;

  transform: translateY(-50%);

}

/* Punto rojo cuando hay productos */

#mega-menu-menu-1 .menu-cart .cart-badge {

  position: absolute;

  top: -2px;

  right: -6px;

  width: 8px;

  height: 8px;

  background-color: #e00000;

  border-radius: 50%;

}



@media (max-width: 768px) {



  #mega-menu-menu-1 .menu-cart > a.mega-menu-link::before {

    font-size: 24px;

  }



  #mega-menu-menu-1 .menu-cart .cart-badge {

    width: 10px;

    height: 10px;

  }



}



/* =====================================================

   MOBILE – HAMBURGUESA MAX MEGA MENU A LA DERECHA

   ===================================================== */

@media (max-width: 768px) {



  /* Header principal como fila */

  #site-header .header-inner {

    display: flex;

    align-items: center;

  }



  /* El branding del theme no ocupa espacio */

  #site-header .site-branding {

    display: none !important;

  }



  /* La navegación DEBE existir y ocupar ancho */

  #site-header .site-navigation {

    display: block !important;

    margin-left: auto;

    width: auto;

  }



  /* Wrapper del mega menu */

  #mega-menu-wrap-menu-1 {

    position: relative;

    display: block !important;

  }



  /* ESTA ES LA HAMBURGUESA CORRECTA */

  #mega-menu-wrap-menu-1 .mega-menu-toggle {

    display: flex !important;

    position: relative;

    margin-left: auto;

    z-index: 10002;

  }



}

/* Eliminar botón móvil del Hello Theme */

.site-navigation-toggle-holder,

.site-navigation-toggle {

  display: none !important;

}