/* Fanor · Header — Menú móvil (hamburguesa + drawer off-canvas), independiente.
   La hamburguesa se muestra SIEMPRE (sin media query que la oculte); Elementor
   controla en qué dispositivo aparece el header que la contiene. Namespace propio
   (--mmv-*, .fanor-hdr-mmv, .fanor-hdr-mmv-lock) para convivir con "Header · Menú"
   sin colisiones. */

.fanor-hdr-mmv {
  --mmv-rojo:       #CC0000;
  --mmv-texto:      #1A1A1A;
  --mmv-icon-color: #1A1A1A;
  --mmv-icon-size:  26px;
  --mmv-panel-w:    322px;
  --mmv-panel-bg:   #FFFFFF;
  --mmv-overlay:    rgba(0, 0, 0, .5);
  --mmv-anim:       380ms;

  /* Movimiento. Entrar con desaceleración natural, salir siempre más rápido que
     entrar, y nada con rebote: es navegación, se usa muchas veces al día. */
  --mmv-ease-drawer: cubic-bezier(.32, .72, 0, 1); /* curva de drawer de iOS */
  --mmv-ease-out:    cubic-bezier(.23, 1, .32, 1); /* ease-out fuerte para estados */
  --mmv-acc:         300ms;                        /* abrir un acordeón */
  --mmv-press:       rgba(0, 0, 0, .05);           /* tinte al presionar una fila */

  /* Filas y acordeón (pestaña Estilo → Categorías / Subcategorías). */
  --mmv-item-gap:   12px;
  --mmv-sep-w:      1px;
  --mmv-sep:        #F1F1F1;
  --mmv-flecha:     #8C8C8C;
  --mmv-hover:      #FBF2F2;
  --mmv-head-texto: #FFFFFF;
  --mmv-activo:     var(--mmv-rojo);
  --mmv-todo:       var(--mmv-rojo);
  --mmv-sub-hover:  var(--mmv-rojo);
  --mmv-ic-size:    34px;
  --mmv-sub-texto:  #444444;
  --mmv-sub-bg:     #FAFAFA;
  --mmv-sub-gap:    0px;
  --mmv-sub-indent: 12px;
  --mmv-sub-pad:    6px;

  position: relative;
  font-family: var(--fanor-font-display);
}

.fanor-hdr-mmv *,
.fanor-hdr-mmv *::before,
.fanor-hdr-mmv *::after {
  box-sizing: border-box;
}

.fanor-hdr-mmv svg {
  display: block;
  width: 100%;
  height: 100%;
}

.fanor-hdr-mmv__hint {
  color: #999;
  font-style: italic;
  padding: 8px 0;
}

/* ── Hamburguesa (siempre visible) ──
   Sin padding/margin propios: el widget sale pegado y el espaciado lo controlas
   en Elementor (pestaña Avanzado del widget). El `gap` es solo interno (separa el
   icono del texto cuando se muestra). */
.fanor-hdr-mmv__burger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  color: var(--mmv-icon-color);
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .3px;
  line-height: 1;
  text-transform: uppercase;
}

.fanor-hdr-mmv__burger.is-icon-only {
  gap: 0;
}

/* Blindaje: que el :hover/:focus/:active de botones del tema o de Elementor no se
   "cuele" (fondo, sombra o borde). El botón se mantiene transparente; el aro de
   foco solo aparece con teclado (:focus-visible), no al hacer clic con el ratón. */
.fanor-hdr-mmv__burger:hover,
.fanor-hdr-mmv__burger:focus,
.fanor-hdr-mmv__burger:active {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--mmv-icon-color);
}

.fanor-hdr-mmv__burger:focus:not(:focus-visible) {
  outline: none;
}

/* Respuesta al dedo: la hamburguesa y la X se hunden un poco al presionar.
   `scale` (propiedad suelta) y no `transform`: header-base.css fuerza
   `transform: none !important` en todos los botones del header. */
.fanor-hdr-mmv__burger,
.fanor-hdr-mmv__close {
  transition: scale 160ms var(--mmv-ease-out);
}

.fanor-hdr-mmv__burger:active,
.fanor-hdr-mmv__close:active {
  scale: .92;
}

.fanor-hdr-mmv__burger-icon {
  flex: 0 0 auto;
  display: inline-flex;
  width: var(--mmv-icon-size, 26px);
  height: var(--mmv-icon-size, 26px);
}

/* ── Drawer / off-canvas ── */
.fanor-hdr-mmv__drawer {
  position: fixed;
  inset: 0;
  z-index: 100000;
}

.fanor-hdr-mmv__drawer[hidden] {
  display: none;
}

/* ── Entrada y salida del drawer ──
   Tres capas con el mismo ritmo: el velo oscurece, el panel desliza con la curva de
   drawer de iOS (arranca decidido y se posa suave) y las filas llegan en cascada
   corta detrás del panel. Al cerrar todo va un 30% más rápido y sin cascada: quien
   cierra ya decidió y no debe esperar. El JS lee la duración real de la salida del
   panel antes de volver a poner `hidden`. */
.fanor-hdr-mmv__overlay {
  position: absolute;
  inset: 0;
  background: var(--mmv-overlay, rgba(0, 0, 0, .5));
  opacity: 0;
  pointer-events: none;
  transition: opacity calc(var(--mmv-anim) * .6) var(--mmv-ease-out);
}

.fanor-hdr-mmv__panel {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: var(--mmv-panel-w, 322px);
  max-width: 86%;
  background: var(--mmv-panel-bg, #FFFFFF);
  box-shadow: 0 0 40px rgba(0, 0, 0, .22);
  transform: translateX(-100%);
  transition: transform calc(var(--mmv-anim) * .7) var(--mmv-ease-drawer);
}

/* Variante: drawer desde la derecha (cerrado, fuera de pantalla a la derecha). */
.fanor-hdr-mmv.is-right .fanor-hdr-mmv__panel {
  left: auto;
  right: 0;
  transform: translateX(100%);
}

/* Estado abierto (el JS pone .is-open en la raíz). Va después de .is-right para
   ganar por orden y llevar el panel a 0 en ambos lados. */
.fanor-hdr-mmv.is-open .fanor-hdr-mmv__overlay {
  opacity: 1;
  pointer-events: auto;
  transition-duration: calc(var(--mmv-anim) * .8);
}

.fanor-hdr-mmv.is-open .fanor-hdr-mmv__panel {
  transform: translateX(0);
  transition-duration: var(--mmv-anim);
}

/* Filas en cascada: llegan 14px desde el lado del que sale el panel. El retraso
   crece 30ms por fila y se corta en la décima (una lista larga no hace esperar).
   `translate` suelto y no `transform`, por el reset de header-base.css. El retraso
   es solo para opacidad y desplazamiento: el tinte de hover responde al instante.
   Al cerrar las filas NO se desvanecen: se van con el panel y vuelven a su punto
   de partida cuando ya está fuera (retraso = duración de la salida). Con la raíz en
   el selector para ganarle al `transition` de `.fanor-hdr-mmv__item`. */
.fanor-hdr-mmv .fanor-hdr-mmv__list > * {
  opacity: 0;
  translate: -14px 0;
  transition:
    opacity 0s linear calc(var(--mmv-anim) * .7),
    translate 0s linear calc(var(--mmv-anim) * .7),
    background-color 150ms ease;
}

.fanor-hdr-mmv.is-right .fanor-hdr-mmv__list > * {
  translate: 14px 0;
}

.fanor-hdr-mmv.is-open .fanor-hdr-mmv__list > * {
  --mmv-d: calc(calc(var(--mmv-anim) * .22) + min(var(--i, 0), 10) * 30ms);
  opacity: 1;
  translate: 0 0;
  transition:
    opacity 260ms var(--mmv-ease-out) var(--mmv-d),
    translate 460ms var(--mmv-ease-out) var(--mmv-d),
    background-color 150ms ease;
}

.fanor-hdr-mmv__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--mmv-rojo);
  color: var(--mmv-head-texto);
}

.fanor-hdr-mmv__title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
}

.fanor-hdr-mmv__headicon {
  flex: 0 0 auto;
  display: inline-flex;
  width: 20px;
  height: 20px;
}

.fanor-hdr-mmv__close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 7px;
  background: rgba(255, 255, 255, .18) !important;
  border: 0;
  border-radius: 50%;
  color: var(--mmv-head-texto);
  cursor: pointer;
}

.fanor-hdr-mmv__list {
  flex: 1;
  overflow: auto;
  padding: 6px 0;
}

/* Fila: la misma para enlaces (<a>) y para categorías que despliegan (<button>). */
.fanor-hdr-mmv__item {
  display: flex;
  align-items: center;
  gap: var(--mmv-item-gap);
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 11px 16px;
  border: 0;
  border-bottom: var(--mmv-sep-w) solid var(--mmv-sep);
  border-radius: 0;
  color: var(--mmv-texto) !important;
  font-family: inherit;
  text-align: left;
  text-decoration: none;
  transition: background-color 150ms ease;
}

/* El botón del acordeón no hereda fondos, sombras ni colores de botón del tema/Kit. */
button.fanor-hdr-mmv__item,
button.fanor-hdr-mmv__item:hover,
button.fanor-hdr-mmv__item:focus,
button.fanor-hdr-mmv__item:active {
  background: transparent !important;
  border-width: 0 0 var(--mmv-sep-w) !important;
  border-style: solid !important;
  border-color: var(--mmv-sep) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--mmv-texto) !important;
  font-family: inherit !important;
  cursor: pointer;
  letter-spacing: normal;
  line-height: normal;
  text-transform: none;
}

/* Hover solo con puntero real; en táctil el tinte se quedaba pegado tras tocar. */
@media (hover: hover) {
  .fanor-hdr-mmv__item:hover,
  button.fanor-hdr-mmv__item:hover {
    background: var(--mmv-hover) !important;
  }
}

/* Presionar: tinte inmediato (sin transición de entrada) para que el dedo sienta
   que la fila respondió antes de navegar o desplegar. */
.fanor-hdr-mmv .fanor-hdr-mmv__item:active,
.fanor-hdr-mmv .fanor-hdr-mmv__sub-link:active {
  background: var(--mmv-press) !important;
  transition-duration: 0s;
}

.fanor-hdr-mmv__item:focus:not(:focus-visible) {
  outline: none;
}

.fanor-hdr-mmv__item:focus-visible,
.fanor-hdr-mmv__sub-link:focus-visible {
  outline: 2px solid var(--mmv-rojo);
  outline-offset: -2px;
}

.fanor-hdr-mmv__ic {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--mmv-ic-size);
  height: var(--mmv-ic-size);
  padding: calc(var(--mmv-ic-size) * .235);
  background: #F4F4F4;
  border-radius: 9px;
  color: var(--mmv-rojo);
}

.fanor-hdr-mmv__name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
}

.fanor-hdr-mmv__item.is-destacado .fanor-hdr-mmv__name,
.fanor-hdr-mmv__grupo.is-open > .fanor-hdr-mmv__item .fanor-hdr-mmv__name {
  color: var(--mmv-activo);
}

/* El SVG apunta hacia abajo: en un enlace directo se gira a la derecha (›); en un
   acordeón queda abajo (⌄) y da media vuelta al abrir. */
.fanor-hdr-mmv__chevron {
  flex: 0 0 auto;
  display: inline-flex;
  width: 16px;
  height: 16px;
  margin-left: auto;
  color: var(--mmv-flecha);
  transform: rotate(-90deg);
  transition:
    transform var(--mmv-acc) var(--mmv-ease-out),
    color 200ms ease;
}

.fanor-hdr-mmv__chevron.is-acordeon {
  transform: none;
}

.fanor-hdr-mmv__grupo.is-open > .fanor-hdr-mmv__item .fanor-hdr-mmv__chevron {
  color: var(--mmv-activo);
  transform: rotate(180deg);
}

/* ── Acordeón de subcategorías ──
   Cerrado = fila de altura 0 (grid 0fr) + visibility:hidden, que además saca los
   enlaces del orden de tabulación. Abrir: el bloque crece con ease-out fuerte y las
   subcategorías bajan 6px y aparecen escalonadas (28ms, tope en la décima), así el
   ojo ve de dónde salen. Cerrar: más corto, y los textos se apagan primero para que
   el bloque no se pliegue con letras encima. La visibilidad cambia al final del
   cierre para que se vea plegarse. */
.fanor-hdr-mmv__sub {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  background: var(--mmv-sub-bg);
  border-bottom: var(--mmv-sep-w) solid transparent;
  transition:
    grid-template-rows calc(var(--mmv-acc) * .75) var(--mmv-ease-out),
    border-color calc(var(--mmv-acc) * .75) ease,
    visibility 0s linear calc(var(--mmv-acc) * .75);
}

.fanor-hdr-mmv__grupo.is-open > .fanor-hdr-mmv__sub {
  grid-template-rows: 1fr;
  visibility: visible;
  border-bottom-color: var(--mmv-sep);
  transition:
    grid-template-rows var(--mmv-acc) var(--mmv-ease-out),
    border-color var(--mmv-acc) ease,
    visibility 0s linear 0s;
}

.fanor-hdr-mmv__sub-list > li {
  opacity: 0;
  translate: 0 -6px;
  transition:
    opacity 120ms ease-out,
    translate 0s linear 120ms;
}

.fanor-hdr-mmv__grupo.is-open > .fanor-hdr-mmv__sub .fanor-hdr-mmv__sub-list > li {
  --mmv-dj: calc(50ms + min(var(--j, 0), 10) * 28ms);
  opacity: 1;
  translate: 0 0;
  transition:
    opacity 240ms var(--mmv-ease-out) var(--mmv-dj),
    translate 340ms var(--mmv-ease-out) var(--mmv-dj);
}

.fanor-hdr-mmv__sub-inner {
  min-height: 0;
  overflow: hidden;
}

.fanor-hdr-mmv__sub-list {
  display: flex;
  flex-direction: column;
  gap: var(--mmv-sub-gap);
  list-style: none;
  margin: 0;
  padding: var(--mmv-sub-pad) 0 var(--mmv-sub-pad) var(--mmv-sub-indent);
}

.fanor-hdr-mmv__sub-list li {
  margin: 0;
  padding: 0;
}

.fanor-hdr-mmv__sub-link {
  display: block;
  padding: 9px 16px;
  color: var(--mmv-sub-texto) !important;
  font-family: var(--fanor-font-body, inherit);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
  text-decoration: none;
}

.fanor-hdr-mmv__sub-link.is-todo {
  color: var(--mmv-todo) !important;
  font-weight: 700;
}

@media (hover: hover) {
  .fanor-hdr-mmv__sub-link:hover {
    color: var(--mmv-sub-hover) !important;
  }
}

/* ── Menos movimiento ──
   No es «sin animación»: se quitan los desplazamientos (panel, cascada, subcategorías
   que bajan, flecha que gira, botones que se hunden) y queda un fundido corto, que
   sigue explicando qué se abrió y qué se cerró. */
@media (prefers-reduced-motion: reduce) {
  .fanor-hdr-mmv .fanor-hdr-mmv__panel,
  .fanor-hdr-mmv.is-right .fanor-hdr-mmv__panel {
    transform: none;
    opacity: 0;
    transition: opacity 160ms ease-out;
  }

  .fanor-hdr-mmv.is-open .fanor-hdr-mmv__panel {
    opacity: 1;
    transition-duration: 160ms;
  }

  .fanor-hdr-mmv .fanor-hdr-mmv__list > *,
  .fanor-hdr-mmv.is-right .fanor-hdr-mmv__list > *,
  .fanor-hdr-mmv.is-open .fanor-hdr-mmv__list > * {
    opacity: 1;
    translate: none;
    transition: background-color 150ms ease;
  }

  .fanor-hdr-mmv__sub,
  .fanor-hdr-mmv__grupo.is-open > .fanor-hdr-mmv__sub {
    transition: none;
  }

  .fanor-hdr-mmv__sub-list > li,
  .fanor-hdr-mmv__grupo.is-open > .fanor-hdr-mmv__sub .fanor-hdr-mmv__sub-list > li {
    translate: none;
    transition: opacity 160ms ease-out;
  }

  .fanor-hdr-mmv__chevron {
    transition: color 150ms ease;
  }

  .fanor-hdr-mmv__burger:active,
  .fanor-hdr-mmv__close:active {
    scale: none;
  }
}

/* Bloquea el scroll del fondo cuando el drawer está abierto. */
html.fanor-hdr-mmv-lock {
  overflow: hidden;
}

/* Red de seguridad opcional: ocultar en escritorio si el control lo activa (por si
   se coloca fuera de un header solo-móvil). Por defecto no aplica. */
@media (min-width: 1025px) {
  .fanor-hdr-mmv.is-hide-desktop {
    display: none;
  }
}

/* ════════ La fila del header en móvil y tablet ════════
 *
 * Las dos reglas de abajo arreglan la fila donde vive la hamburguesa. El selector
 * no lleva ningún id de Elementor: describe "la fila del header que contiene el
 * menú móvil de Fanor y una imagen", que es exactamente este montaje, así que
 * sigue valiendo si se rehace la plantilla. `.elementor-widget-image` cubre tanto
 * el widget "Logo del sitio" como un widget Imagen normal (Elementor pone las dos
 * clases en el del logo). El tope de 1024px es el techo de tablet de Elementor:
 * por encima manda el header de escritorio, que es otro contenedor. */

/* ── 1. El logo, centrado ──
 *
 * La fila es un flex `space-between` con cuatro hijos: hamburguesa · logo ·
 * Mi cuenta · Carrito. Con `space-between` el logo solo cae en el centro si los dos
 * lados pesan lo mismo, y eso era pura casualidad: cuando a la derecha solo estaba
 * el Carrito (26px) contra la hamburguesa (26px) quedaba centrado. Al sumar
 * "Mi cuenta" el lado derecho pasó a 69px y el logo se corrió 29px a la izquierda
 * (medido a 375px de ancho de pantalla).
 *
 * No se arregla compensando con paddings —volvería a romperse el día que se añada
 * o se quite un ícono—: se saca el logo del flujo y se centra sobre la fila, con lo
 * que su centro ES el centro de la fila pase lo que pase a los lados; y los íconos
 * de la derecha se agrupan al final con un margen automático (el margen `auto` se
 * come todo el hueco libre antes de que `space-between` lo reparta).
 *
 * El centrado es por `left/right: 0` + márgenes `auto`, NO por `transform`: el tema
 * tiene una transición de 400ms sobre `transform` en los widgets de imagen y el logo
 * entraría deslizándose. En vertical no hace falta nada: al ser un hijo absoluto de
 * un contenedor flex, sin `top`/`bottom` conserva su posición estática, ya centrada. */
@media (max-width: 1024px) {
  .elementor-location-header .e-con-inner:has(> .elementor-widget-fanor_header_menu_movil):has(> .elementor-widget-image) {
    position: relative;
    /* Ancho del grupo de íconos más pesado, para que el logo nunca se le meta
       debajo. En móvil son íconos pelados (Mi cuenta 23 + hueco 20 + Carrito 26);
       en tablet Mi cuenta y Carrito muestran además su etiqueta y ocupan ~244.
       Es el único número a tocar si algún día cambian los íconos de la fila. */
    --fnr-hdr-iconos: 69px;
  }

  /* Se reserva ese ancho a cada mitad (el logo va centrado, así que el hueco es
     simétrico) más 12px de aire. Solo muerde por debajo de ~350px de pantalla; en
     un teléfono normal no llega a aplicar. */
  .elementor-location-header .e-con-inner:has(> .elementor-widget-fanor_header_menu_movil) > .elementor-widget-image {
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    max-width: calc(100% - (var(--fnr-hdr-iconos, 69px) * 2) - 24px);
  }

  /* Lo que venga justo detrás del logo abre el grupo de la derecha (hoy Mi cuenta;
     si se quita, el Carrito). */
  .elementor-location-header .e-con-inner:has(> .elementor-widget-fanor_header_menu_movil) > .elementor-widget-image + * {
    margin-left: auto;
  }
}

/* ── 2. En tablet, la fila vuelve a ser una fila ──
 *
 * Este header es `elementor-hidden-desktop`: se ve en móvil Y en tablet. Pero la
 * dirección "row" y el `space-between` estaban puestos solo en el breakpoint de
 * móvil de Elementor, así que entre 768 y 1024 la fila caía al valor de escritorio
 * —`column`— y los cuatro widgets se apilaban uno debajo de otro. Y en columna el
 * eje transversal es el horizontal: con `align-items: stretch` cada widget se
 * estiraba al ancho completo. Resultado medido en producción a 819px: un header de
 * **432px de alto** (la fila sola, 238) y 34px de scroll horizontal.
 *
 * Con la dirección corregida los anchos se arreglan solos —en fila, un ítem flex se
 * ajusta a su contenido— y no hace falta tocar ni un ancho. El alto del header baja
 * de 432 a 258px. En tablet Mi cuenta y Carrito conservan su etiqueta (el
 * `is-icon-only-movil` solo esconde el texto por debajo de 767px), que es justo lo
 * que sobra sitio para mostrar. */
@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-location-header .e-con-inner:has(> .elementor-widget-fanor_header_menu_movil) {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .elementor-location-header .e-con-inner:has(> .elementor-widget-fanor_header_menu_movil):has(> .elementor-widget-image) {
    --fnr-hdr-iconos: 244px;
  }
}