/*
 Theme Name:   Mazz Company
 Template:     yith-proteo
*/

/* =================== ESCRITORIO (>=1025px) =================== */
/* Alinear header: logo + menú + iconos en una fila */
@media (min-width:1025px){
  #masthead .container,
  .site-header .container,
  #masthead .site-header__container,
  .site-header .site-header__container,
  .site-header .site-header-wrapper{
    display:flex; align-items:center; gap:32px;
  }
  .site-branding{ flex:0 0 auto; }
  nav#site-navigation{ flex:1 1 auto; margin:0 !important; }
  .site-header .header-actions,
  .site-header .site-tools,
  .site-header .site-header__right,
  .site-header .header-right{ margin-left:auto; }

  /* En PC no debe verse el botón móvil */
  .yith-proteo-mobile-menu-toggle,
  .menu-toggle{ display:none !important; }
}

/* ===================== MÓVIL (<=1024px) ===================== */
/* Mostrar el toggle nativo y que NO tenga el estilo "píldora" */
@media (max-width:1024px){
  header.site-header .container,
  header.site-header .site-header__container,
  header.site-header .site-header-wrapper{ display:flex; align-items:center; }

  header.site-header .site-branding{ flex:0 0 auto; }
  header.site-header .header-actions,
  header.site-header .site-tools,
  header.site-header .site-header__right,
  header.site-header .header-right{
    margin-left:auto; display:flex; align-items:center; gap:14px;
  }

  /* FORZAR visibilidad del botón nativo del tema */
  .yith-proteo-mobile-menu-toggle,
  .menu-toggle,
  button[aria-controls="yith-proteo-mobile-menu"]{
    display:inline-flex !important;
    align-items:center; justify-content:center;
    width:32px; height:24px;
    margin-left:10px;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    -webkit-appearance:none; appearance:none;
    position:relative; color:#111; line-height:1;
  }

  /* Dibujo 3 líneas (por si el svg del tema no aparece) */
  .yith-proteo-mobile-menu-toggle::before,
  .yith-proteo-mobile-menu-toggle::after,
  .menu-toggle::before,
  .menu-toggle::after{
    content:""; position:absolute; left:0; right:0; height:2px;
    background:currentColor; border-radius:1px; transition:transform .2s ease;
  }
  .yith-proteo-mobile-menu-toggle::before,
  .menu-toggle::before{ top:0; box-shadow:0 11px 0 0 currentColor; } /* barra central */
  .yith-proteo-mobile-menu-toggle::after,
  .menu-toggle::after{ bottom:0; }
  .yith-proteo-mobile-menu-toggle[aria-expanded="true"]::before,
  .menu-toggle[aria-expanded="true"]::before{ transform:translateY(11px) rotate(45deg); box-shadow:none; }
  .yith-proteo-mobile-menu-toggle[aria-expanded="true"]::after,
  .menu-toggle[aria-expanded="true"]::after{  transform:translateY(-11px) rotate(-45deg); }

  /* IMPORTANTÍSIMO: NO ocultar ni tocar el contenedor del off-canvas */
  /* (Si en algún momento lo habíamos escondido, esto lo neutraliza) */
  #yith-proteo-mobile-menu,
  .yith-proteo-offcanvas,
  .yith-proteo-offcanvas__container{
    visibility:visible !important;
    pointer-events:auto !important;
    opacity:1 !important;  /* el tema lo manejará al abrir/cerrar */
  }
}

/* Apagar cualquier resto de controles custom si todavía existieran */
#mc-toggle, #mc-menu-toggle, .mc-sub, .mc-sub-toggle{ display:none !important; }
