.elementor-102 .elementor-element.elementor-element-a0247e4{--display:flex;}.elementor-102 .elementor-element.elementor-element-3e60075 .header-top:after, .elementor-102 .elementor-element.elementor-element-3e60075 .header-top{background:#64338B;}/* Start custom CSS for bameheader, class: .elementor-element-3e60075 *//* ===== UV Store GT — Botón hamburguesa y cierre off-canvas (tablet/móvil) ===== */
@media (max-width: 1024px) {

  :root { --uv-purple: #64338B; }

  /* 1) Botón hamburguesa (cubre variantes comunes de temas) */
  .th-menu-toggle,
  .menu-toggle,
  .mobile-menu-toggle,
  .navbar-toggler,
  .offcanvas-toggle,
  .bame-menu-toggle,
  button[class*="menu"][class*="toggle"] {
    background: var(--uv-purple) !important;     /* fondo morado sólido */
    border: none !important;                      /* sin borde */
    border-radius: 8px;
    padding: 8px 10px !important;
    width: 46px !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: none !important;
    outline: none !important;
    position: relative;
    z-index: 100000; /* alto para ser clickeable cuando está cerrado */
    -webkit-tap-highlight-color: transparent;
  }

  /* 1.1) Quitar “hexágono/chevron” o decoraciones en hover/focus */
  .th-menu-toggle:hover, .th-menu-toggle:focus,
  .menu-toggle:hover, .menu-toggle:focus,
  .mobile-menu-toggle:hover, .mobile-menu-toggle:focus,
  .navbar-toggler:hover, .navbar-toggler:focus,
  .offcanvas-toggle:hover, .offcanvas-toggle:focus,
  .bame-menu-toggle:hover, .bame-menu-toggle:focus,
  button[class*="menu"][class*="toggle"]:hover,
  button[class*="menu"][class*="toggle"]:focus {
    background: var(--uv-purple) !important;     /* que no cambie */
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
  }

  /* Algunos temas dibujan “hexágonos/chevrons” con pseudo-elementos: neutralizarlos */
  .th-menu-toggle::before, .th-menu-toggle::after,
  .menu-toggle::before, .menu-toggle::after,
  .mobile-menu-toggle::before, .mobile-menu-toggle::after,
  .navbar-toggler::before, .navbar-toggler::after,
  .offcanvas-toggle::before, .offcanvas-toggle::after,
  .bame-menu-toggle::before, .bame-menu-toggle::after {
    /* IMPORTANTE: Reseteamos para evitar hexágonos del tema.
       Más abajo volveremos a dibujar las barras sólo si el tema NO tiene spans. */
    box-shadow: none !important;
    background: none !important;
    border: none !important;
    content: none !important;
  }

  /* 2) Barras del icono si el ícono son spans internos */
  .th-menu-toggle .line,
  .menu-toggle .line,
  .mobile-menu-toggle .line,
  .hamburger .line,
  .hamburger .bar,
  .bame-menu-toggle .line,
  .navbar-toggler .line,
  button[class*="menu"][class*="toggle"] span {
    display: none !important;
    width: 24px !important;
    height: 2px !important;
    background: #fff !important;                  /* barras blancas */
    margin: 4px 0 !important;
    border-radius: 1px !important;
  }

  /* 3) Si el tema NO trae spans y usa background-image para .navbar-toggler-icon (Bootstrap) */
  .navbar-toggler .navbar-toggler-icon {
    background-image:
      url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='white' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    filter: none !important;
  }

  /* 4) Fallback: dibujar las 3 barras con pseudo-elementos SÓLO si el botón está vacío */
  .th-menu-toggle:empty,
  .menu-toggle:empty,
  .bame-menu-toggle:empty,
  .mobile-menu-toggle:empty,
  .offcanvas-toggle:empty,
  .navbar-toggler:empty,
  button[class*="menu"][class*="toggle"]:empty {
    position: relative;
  }
  .th-menu-toggle:empty::before,
  .th-menu-toggle:empty::after,
  .menu-toggle:empty::before,
  .menu-toggle:empty::after,
  .bame-menu-toggle:empty::before,
  .bame-menu-toggle:empty::after,
  .mobile-menu-toggle:empty::before,
  .mobile-menu-toggle:empty::after,
  .offcanvas-toggle:empty::before,
  .offcanvas-toggle:empty::after,
  .navbar-toggler:empty::before,
  .navbar-toggler:empty::after,
  button[class*="menu"][class*="toggle"]:empty::before,
  button[class*="menu"][class*="toggle"]:empty::after {
    content: "" !important;
    position: absolute !important;
    left: 11px; right: 11px;
    height: 2px;
    background: #fff !important;                  /* barras blancas */
    border-radius: 1px;
  }
  /* barra superior e inferior */
  .th-menu-toggle:empty::before,
  .menu-toggle:empty::before,
  .bame-menu-toggle:empty::before,
  .mobile-menu-toggle:empty::before,
  .offcanvas-toggle:empty::before,
  .navbar-toggler:empty::before,
  button[class*="menu"][class*="toggle"]:empty::before { top: 10px; }
  .th-menu-toggle:empty::after,
  .menu-toggle:empty::after,
  .bame-menu-toggle:empty::after,
  .mobile-menu-toggle:empty::after,
  .offcanvas-toggle:empty::after,
  .navbar-toggler:empty::after,
  button[class*="menu"][class*="toggle"]:empty::after { bottom: 10px; }
  /* barra del medio usando un hijo fantasma para no reactivar decoraciones del tema */
  .th-menu-toggle:empty::marker,
  .menu-toggle:empty::marker,
  .bame-menu-toggle:empty::marker,
  .mobile-menu-toggle:empty::marker,
  .offcanvas-toggle:empty::marker,
  .navbar-toggler:empty::marker,
  button[class*="menu"][class*="toggle"]:empty::marker { content: ""; }
  .th-menu-toggle:empty > i,
  .menu-toggle:empty > i,
  .bame-menu-toggle:empty > i,
  .mobile-menu-toggle:empty > i,
  .offcanvas-toggle:empty > i,
  .navbar-toggler:empty > i,
  button[class*="menu"][class*="toggle"]:empty > i {
    position: absolute; left: 11px; right: 11px; top: 19px;
    height: 2px; background: #fff !important; border-radius: 1px; content: "";
  }

  /* 5) Asegurar que NO aparezcan íconos adornados (hex/chevron) que algunos temas inyectan */
  .th-menu-toggle .icon, .menu-toggle .icon,
  .mobile-menu-toggle .icon, .offcanvas-toggle .icon,
  .bame-menu-toggle .icon, .navbar-toggler .icon,
  .th-menu-toggle .hex, .menu-toggle .hex,
  .mobile-menu-toggle .hex, .offcanvas-toggle .hex,
  .bame-menu-toggle .hex, .navbar-toggler .hex,
  .th-menu-toggle [class*="chevron"], .menu-toggle [class*="chevron"],
  .mobile-menu-toggle [class*="chevron"], .offcanvas-toggle [class*="chevron"],
  .bame-menu-toggle [class*="chevron"], .navbar-toggler [class*="chevron"] {
    display: none !important;
  }

  /* 6) Botón de cierre (X) dentro del off-canvas: forzar visibilidad y jerarquía */
  .offcanvas .btn-close,
  .offcanvas .close,
  .offcanvas-close,
  .mobile-menu-close,
  .drawer-close,
  .th-menu-close,
  .th-offcanvas .close {
    position: fixed !important;             /* fijo para que siempre esté visible */
    top: 14px !important;
    right: 28px !important;
    width: 32px !important;
    height: 32px !important;
    background: transparent !important;
    color: #fff !important;
    opacity: 1 !important;
    border: none !important;
    box-shadow: none !important;
    z-index: 100002 !important;             /* por encima del burger */
    display: inline-flex !important;
    align-items: center; justify-content: center;
    line-height: 1 !important;
  }

  /* Si la X es un SVG o pseudo-elemento, que sea blanca y visible */
  .offcanvas .btn-close::before,
  .offcanvas .btn-close::after,
  .offcanvas .close::before,
  .offcanvas .close::after,
  .offcanvas-close::before, .offcanvas-close::after,
  .mobile-menu-close::before, .mobile-menu-close::after,
  .drawer-close::before, .drawer-close::after,
  .th-menu-close::before, .th-menu-close::after {
    color: #fff !important;
    background: none !important;
    box-shadow: none !important;
  }
  .offcanvas .btn-close svg,
  .offcanvas .close svg,
  .offcanvas-close svg,
  .mobile-menu-close svg,
  .drawer-close svg,
  .th-menu-close svg {
    fill: #fff !important;
    stroke: #fff !important;
  }

  /* 7) Cuando el menú móvil está ABIERTO, esconder el burger para que no tape la X */
  body.offcanvas-open .th-menu-toggle,
  body.offcanvas-open .menu-toggle,
  body.offcanvas-open .mobile-menu-toggle,
  body.offcanvas-open .navbar-toggler,
  body.offcanvas-open .offcanvas-toggle,
  body.offcanvas-open .bame-menu-toggle,

  .mobile-menu-active .th-menu-toggle,
  .mobile-menu-active .menu-toggle,
  .mobile-menu-active .mobile-menu-toggle,
  .mobile-menu-active .navbar-toggler,
  .mobile-menu-active .offcanvas-toggle,
  .mobile-menu-active .bame-menu-toggle,

  .drawer-open .th-menu-toggle,
  .drawer-open .menu-toggle,
  .drawer-open .mobile-menu-toggle,
  .drawer-open .navbar-toggler,
  .drawer-open .offcanvas-toggle,
  .drawer-open .bame-menu-toggle,

  .th-mobile-menu-open .th-menu-toggle,
  .th-mobile-menu-open .menu-toggle,
  .th-mobile-menu-open .mobile-menu-toggle,
  .th-mobile-menu-open .navbar-toggler,
  .th-mobile-menu-open .offcanvas-toggle,
  .th-mobile-menu-open .bame-menu-toggle {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }

  /* 8) Asegurar stacking del contenedor off-canvas sobre el resto */
  .offcanvas, .mobile-menu, .th-offcanvas, .drawer, .side-panel {
    z-index: 100001 !important;
  }
}/* End custom CSS */