/* ===== DAL — Hamburguesa fija (solo escritorio) ===== */

/* Ocultar menú horizontal del header SOLO en escritorio (Astra) */
@media (min-width: 922px){
  .main-header-menu,
  .ast-builder-menu-1,
  .main-header-menu-toggle{
    display: none !important;
  }
}

/* ============= Top Layer (popover) ============= */
/* Contenedor que vive en la Top Layer del navegador */
#dal-toplayer[popover]{
  position: fixed; top: 0; left: 0;
  width: 0; height: 0;
  margin: 0; padding: 0; border: 0;
  background: transparent; outline: none;
  z-index: 2147483646;       /* debajo del botón, encima del sitio */
  pointer-events: none;      /* no bloquea clics del sitio */
}
/* cuando está abierto (siempre) */
#dal-toplayer:popover-open{
  position: fixed; top: 0; left: 0;
}
/* el botón dentro SÍ recibe clics */
#dal-toplayer #dal-shop-toggle{
  pointer-events: auto;
}

/* ───────── Botón hamburguesa ───────── */
.dal-shop-toggle{
  position: absolute !important;     /* posicionado respecto al contenedor Top Layer */
  top: 38px;                         /* JS sube a 70px si hay admin bar */
  left: 24px;                        /* para derecha: right:24px; left:auto; */
  width: 42px; height: 30px;
  display: inline-flex; flex-direction: column; justify-content: space-between;
  background: transparent;
  border: 0;
  padding: 0; margin: 0;
  cursor: pointer;
  z-index: 2147483647 !important;    /* máximo */
  outline: none; box-shadow: none;
  transform: none !important;
  will-change: top, left;
}
.dal-shop-toggle:hover,
.dal-shop-toggle:focus,
.dal-shop-toggle:active{
  background: transparent;
  outline: none; box-shadow: none;
}

/* barras (negras por defecto) */
.dal-shop-toggle .dal-bar{
  width:100%; height:2px; background:#000; display:block; transition: background .12s ease;
}

/* al abrir: blancas */
body.dal-menu-open .dal-shop-toggle .dal-bar{ background:#fff !important; }

/* en móvil NO mostramos nuestro botón (el tema usa el suyo) */
@media (max-width: 921.98px){
  #dal-toplayer, .dal-shop-toggle{ display:none !important; }
}

/* ───────── Overlay + Sidebar ───────── */
.dal-shop-overlay{
  position: fixed; inset: 0; z-index: 100000;
  background: transparent !important;
  opacity: 1; visibility: visible;
}
.dal-shop-overlay[hidden]{ display:none !important; }

.dal-overlay-close{
  position: fixed;
  top: 16px;
  left: calc(min(280px, 88vw) - 70px);
  width: 40px; height: 40px;
  background: transparent !important;
  color: #fff;
  border: 0 !important; border-radius: 0;
  font-size: 35px; line-height: 1;
  cursor: pointer;
  outline: none !important; box-shadow: none !important;
  z-index: 2147483646;
}

.dal-overlay-nav{
  position: fixed; top:0; left:0; height:100%;
  width: min(280px, 88vw);
  padding: 24px 24px 28px;
  background: rgba(0,0,0,.62);
  transform: translateX(-16px);
  opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
  z-index: 2147483645;
}
body.dal-drawer-open .dal-overlay-nav{ transform: translateX(0); opacity: 1; }

.dal-overlay-nav ul{ list-style:none; margin:62px 0 0; padding:0; }
.dal-overlay-nav li{ margin:10px 0; }
.dal-overlay-nav a{
  display:inline-block; color:#fff; text-decoration:none !important;
  font-size:clamp(18px,2.6vw,26px); line-height:1.25;
  opacity:.95; transition:opacity .15s ease, transform .15s ease;
}
.dal-overlay-nav a:hover,
.dal-overlay-nav a:focus{ opacity:1; transform:translateX(2px); outline:none; }

/* No interferir con el off-canvas nativo en móvil */
@media (min-width: 922px){
  .ast-mobile-popup-wrapper,
  .ast-mobile-popup-drawer{ display:none !important; }
}



/* === Fade de la hamburguesa al hacer scroll (solo escritorio) === */
@media (min-width: 922px){
  .dal-shop-toggle{
    transition: opacity .18s ease, visibility .18s ease;
  }
  /* Oculta al hacer scroll */
  .dal-shop-toggle.dal-faded{
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  /* Si el menú está abierto, que NO se desvanezca */
  body.dal-menu-open .dal-shop-toggle{
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

