/* =========================================================================
   GLOTOMANIA — Mega menú
   Una sola copia del árbol. Barra en escritorio, cajón con acordeón de dos
   niveles en tablet y móvil.
   ========================================================================= */

.gm {
  --gm-morado:      #6a3f99;
  --gm-morado-osc:  #55307c;
  --gm-morado-suave:#f2edf8;
  --gm-texto:       #2d2a32;
  --gm-texto-flojo: #5d5866;
  --gm-texto-tenue: #8b8595;
  --gm-borde:       #e6e2ec;
  --gm-fondo:       #fff;
  --gm-rojo:        #b3261e;

  /* LA BARRA VA SOBRE FONDO OSCURO (#554794, el morado de la cabecera).
     Si algún día la cabecera pasa a fondo claro, basta con cambiar estos
     cuatro valores por los de texto oscuro. */
  --gm-barra-texto:     #fff;
  --gm-barra-icono:     rgba(255, 255, 255, .88);
  --gm-barra-hover:     rgba(255, 255, 255, .16);
  --gm-barra-destacado: #ffd45e;

  --gm-radio:       8px;
  --gm-radio-chico: 5px;
  --gm-sombra:      0 12px 32px rgba(45, 42, 50, .14);

  /* Escala de espaciado. Todo el menú sale de estos cuatro valores; si algo
     necesita un número suelto, casi siempre es que está mal colocado. */
  --gm-e1: 4px;
  --gm-e2: 8px;
  --gm-e3: 14px;
  --gm-e4: 22px;

  /* Tope de altura del panel en escritorio. Si la cabecera de la tienda es
     más alta, subir el número: es lo único que suele hacer falta tocar. */
  --gm-alto-panel: calc(100vh - 170px);

  position: relative;
  font-size: 15px;
  line-height: 1.4;
}

.gm-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.gm *, .gm *::before, .gm *::after { box-sizing: border-box; }
.gm ul { list-style: none; margin: 0; padding: 0; }
.gm a  { text-decoration: none; color: inherit; }
.gm svg { width: 1em; height: 1em; fill: currentColor; flex: 0 0 auto; }

/* El foco se ve siempre: es la única pista para quien navega con teclado. */
.gm a:focus-visible,
.gm button:focus-visible {
  outline: 2px solid var(--gm-morado);
  outline-offset: 2px;
  border-radius: var(--gm-radio-chico);
}

/* ---------------------------------------------------------------- botones */

.gm__hamburguesa,
.gm__cerrar,
.gm__abrir,
.gm__abrir2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gm-e2);
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* La hamburguesa también va sobre el morado de la cabecera. */
.gm__hamburguesa {
  padding: 11px var(--gm-e3);
  min-height: 44px;
  color: var(--gm-barra-texto);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: var(--gm-radio);
  font-weight: 600;
}

.gm__hamburguesa:hover {
  background: var(--gm-barra-hover);
  border-color: rgba(255, 255, 255, .6);
}
.gm__hamburguesa-ico { font-size: 20px; }

/* =========================================================================
   BOTÓN DE HAMBURGUESA PARA LA CABECERA

   Va suelto, en su propio elemento de Bricks, junto al carrito. Lleva el
   atributo data-gm-menu, que es lo que el JS busca para engancharlo: al
   encontrarlo, esconde el botón «Menú» que trae el propio menú.

   Se estila aquí y no dentro del elemento para no repetir CSS en línea en
   cada página.
   ========================================================================= */

.gm-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  background: #fff;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background-color .15s ease;
  -webkit-tap-highlight-color: transparent;
}

.gm-boton:hover { background: #f2edf8; }

.gm-boton:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.gm-boton__lineas { position: relative; }

.gm-boton__lineas,
.gm-boton__lineas::before,
.gm-boton__lineas::after {
  display: block;
  width: 22px;
  height: 2.5px;
  background: #554794;
  border-radius: 2px;
  transition: transform .2s ease, background-color .2s ease;
}

.gm-boton__lineas::before,
.gm-boton__lineas::after {
  content: "";
  position: absolute;
  left: 0;
}

.gm-boton__lineas::before { top: -7px; }
.gm-boton__lineas::after  { top: 7px; }

/* Abierto: las tres rayas se convierten en aspa. El estado sale del
   aria-expanded, que ya lo mantiene el JS, así no hay una clase paralela
   que se pueda desincronizar. */
.gm-boton[aria-expanded="true"] .gm-boton__lineas { background: transparent; }

.gm-boton[aria-expanded="true"] .gm-boton__lineas::before {
  transform: translateY(7px) rotate(45deg);
}

.gm-boton[aria-expanded="true"] .gm-boton__lineas::after {
  transform: translateY(-7px) rotate(-45deg);
}

/* De 1200 para arriba manda la barra: el botón sobra. */
@media (min-width: 1200px) {
  .gm-boton { display: none; }
}

/* ------------------------------------------------------------------ barra */

.gm__barra {
  display: flex;
  align-items: stretch;
  justify-content: center;   /* la barra, centrada en su hueco */
  gap: 2px;
  flex-wrap: wrap;
}

.gm__item { display: flex; }

.gm__enlace {
  display: flex;
  align-items: center;
  gap: var(--gm-e2);
  padding: 12px var(--gm-e3);
  font-weight: 600;
  border-radius: var(--gm-radio);
  transition: background-color .15s ease, color .15s ease;
  white-space: nowrap;
}

.gm__ico { font-size: 18px; transition: color .15s ease; }

.gm__item:hover > .gm__enlace,
.gm__item.is-abierto > .gm__enlace {
  background: var(--gm-barra-hover);
}

/* ------------------------------------------------------------------ panel */

/*
 * FIXED y no ABSOLUTE, a propósito.
 *
 * El menú vive dentro de un contenedor de Bricks de 1.154 px, así que un
 * panel absoluto se quedaba encerrado ahí y no llegaba a los bordes de la
 * pantalla. Con position:fixed y left/right a 0 ocupa el ancho real de la
 * ventana —sin contar la barra de scroll, que es lo que rompe el truco de
 * width:100vw— y además acompaña a la cabecera fija al hacer scroll.
 *
 * El «top» y el «max-height» los pone el JS, medidos desde el borde
 * inferior del menú: así valen con la cabecera fija, con la normal, y con
 * cualquier alto de cabecera sin tener que ajustar un número a mano.
 */
.gm__panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  padding: var(--gm-e4) clamp(var(--gm-e4), 4vw, 64px) var(--gm-e3);
  background: var(--gm-fondo);
  border: 0;
  border-bottom: 1px solid var(--gm-borde);
  border-radius: 0;
  box-shadow: var(--gm-sombra);

  /* Con el catálogo entero, «Utensilios» no cabe en un portátil: se topa la
     altura y se hace scroll dentro del panel, no en la página. */
  max-height: var(--gm-alto-panel);
  overflow-y: auto;
  overscroll-behavior: contain;

  /* Oculto sin display:none para poder animarlo y no romper el foco. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}

.gm__item.is-abierto > .gm__panel {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.gm__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gm-e2) var(--gm-e4);
  align-items: start;
}

.gm__col { min-width: 0; }

/* Paneles con mucha familia: cinco columnas en vez de cuatro. */
.gm__panel--5 .gm__cols { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* Una familia grande —el fondant— ocupa dos columnas y reparte sus bloques
   por dentro. Así queda todo junto bajo un solo padre en vez de partido
   entre columnas con otra cosa por medio. */
.gm__col--doble { grid-column: span 2; }

.gm__sub {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--gm-e4);
  align-items: start;
}

.gm__grupo--padre {
  display: block;
  padding: 6px 0 7px;
  margin-bottom: var(--gm-e2);
  font-weight: 800;
  font-size: 15px;
  color: var(--gm-morado-osc);
  border-bottom: 2px solid var(--gm-morado);
  transition: color .15s ease;
}

.gm__grupo--padre:hover { color: var(--gm-morado); }

/* --------------------------------------------------------------- grupos */

.gm__grupo-fila {
  display: flex;
  align-items: center;
  gap: var(--gm-e1);
  border-bottom: 1px solid var(--gm-borde);
  margin-bottom: var(--gm-e2);
}

.gm__grupo {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 0 5px;
  font-weight: 700;
  font-size: 13.5px;
  line-height: 1.3;
  color: var(--gm-morado-osc);
  transition: color .15s ease;
}

a.gm__grupo:hover { color: var(--gm-morado); }

/* Los rótulos que agrupan sin ser categoría («Fondant por color») no son
   enlaces: se distinguen para que nadie intente pulsarlos. */
.gm__grupo--titulo {
  color: var(--gm-texto-tenue);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: default;
}

/* Un grupo sin hijos es una fila más: no lleva raya ni hueco de más. */
.gm__grupo--suelto {
  border-bottom: 0;
  margin-bottom: 0;
  padding: 5px var(--gm-e2);
  margin-left: calc(var(--gm-e2) * -1);
  border-radius: var(--gm-radio-chico);
  font-weight: 700;
  font-size: 13.5px;
  transition: background-color .12s ease, color .12s ease;
}

.gm__grupo--suelto:hover {
  background: var(--gm-morado-suave);
  color: var(--gm-morado);
}

.gm__lista { margin-bottom: 10px; }

/* El ritmo vertical va apretado a propósito: con el catálogo entero, la
   columna más alta de «Utensilios» se pasaba 283 px del alto de un
   portátil y obligaba a hacer scroll dentro del panel. */
.gm__lista a {
  display: block;
  padding: 3px var(--gm-e2);
  margin-left: calc(var(--gm-e2) * -1);
  font-size: 13.5px;
  line-height: 1.3;
  color: var(--gm-texto-flojo);
  border-radius: var(--gm-radio-chico);
  transition: background-color .12s ease, color .12s ease;
}

.gm__lista a:hover {
  background: var(--gm-morado-suave);
  color: var(--gm-morado-osc);
}

/* El último bloque de una columna no deja hueco muerto abajo. */
.gm__col > .gm__lista:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- marcas */

.gm__marcas {
  columns: 5 160px;
  column-gap: var(--gm-e4);
}

.gm__marcas li {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

.gm__marcas a {
  display: block;
  padding: 6px var(--gm-e2);
  margin-left: calc(var(--gm-e2) * -1);
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--gm-texto-flojo);
  border-radius: var(--gm-radio-chico);
  transition: background-color .12s ease, color .12s ease;
}

.gm__marcas a:hover {
  background: var(--gm-morado-suave);
  color: var(--gm-morado-osc);
}

/* --------------------------------------------------------- «Ver todo» */

/*
 * El color va con !important y con el selector completo a propósito: el CSS
 * global del sitio pinta los enlaces en negro con reglas amplias, y sobre un
 * fondo morado el texto se quedaba ilegible. Es el único !important del
 * archivo y está aquí porque el contraste no es negociable.
 */
.gm .gm__panel .gm__todo,
.gm .gm__panel .gm__todo:link,
.gm .gm__panel .gm__todo:visited,
.gm .gm__panel .gm__todo:hover,
.gm .gm__panel .gm__todo:focus {
  color: #fff !important;
}

.gm__todo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--gm-e3);
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  background: var(--gm-morado);
  border: 1px solid var(--gm-morado);
  border-radius: 999px;
  transition: background-color .15s ease, border-color .15s ease;
}

.gm__todo:hover {
  background: var(--gm-morado-osc);
  border-color: var(--gm-morado-osc);
}

.gm__todo svg { font-size: 15px; fill: #fff; }

/* ------------------------------------------------- escritorio estrecho */

@media (max-width: 1365px) and (min-width: 1200px) {
  .gm__enlace { padding: 12px 9px; font-size: 14px; gap: 6px; }
  .gm__ico { font-size: 16px; }
  .gm__cols { gap: var(--gm-e2) var(--gm-e3); }
  .gm__sub { gap: 0 var(--gm-e3); }
  .gm__marcas { columns: 4 150px; }
}

/* =========================================================================
   TABLET Y MÓVIL — cajón lateral con acordeón de DOS niveles

   El corte está en 1200 y no en 1024 a propósito: son NUEVE entradas de
   primer nivel con icono, y por debajo de 1200 la barra se parte en dos
   filas. Medido.
   ========================================================================= */

@media (max-width: 1199px) {

  /* El botón, a la derecha de su fila: es donde están el resto de iconos de
     la cabecera y donde lo busca el pulgar. Antes salía centrado y flotando
     en mitad de la pantalla. */
  .gm { display: flex; justify-content: flex-end; }

  .gm__hamburguesa { display: inline-flex; }

  /* Si en la cabecera hay otro botón marcado con data-gm-menu, el nuestro
     sobra: manda el vuestro. Lo detecta el JS y pone esta clase. */
  .gm--con-disparador .gm__hamburguesa { display: none; }

  /* Dentro del cajón el fondo es BLANCO: texto oscuro, no el blanco que usa
     la barra de escritorio sobre el morado. Sin esto el menú entero salía
     blanco sobre blanco. Pasó en producción el 03/08/2026. */
  .gm__cajon .gm__enlace { color: var(--gm-texto); }
  .gm__cajon .gm__ico { color: var(--gm-morado); }
  .gm__cajon .gm__item--destacado > .gm__enlace,
  .gm__cajon .gm__item--destacado .gm__ico { color: var(--gm-rojo); }

  .gm__velo {
    position: fixed;
    inset: 0;
    z-index: 998;
    background: rgba(28, 25, 33, .5);
    opacity: 0;
    transition: opacity .2s ease;
  }

  .gm__velo.is-visible { opacity: 1; }

  .gm__cajon {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: min(380px, 88vw);
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--gm-fondo);
    box-shadow: var(--gm-sombra);
    transform: translateX(-102%);
    transition: transform .24s ease;
    overscroll-behavior: contain;
  }

  .gm.is-cajon-abierto .gm__cajon { transform: none; }

  .gm__cajon-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gm-e3);
    padding: var(--gm-e3) 18px;
    border-bottom: 1px solid var(--gm-borde);
    flex: 0 0 auto;
  }

  .gm__cajon-titulo { font-weight: 700; font-size: 16px; }

  .gm__cerrar {
    padding: 12px;
    margin: -12px;
    font-size: 20px;
    color: var(--gm-texto-flojo);
  }

  .gm__cerrar:hover { color: var(--gm-morado); }

  .gm__barra {
    flex-direction: column;
    flex-wrap: nowrap;
    /* Se deshace el centrado de la barra de escritorio. En columna y con el
       contenido más alto que el cajón, centrar empuja los primeros ítems
       FUERA del área visible por arriba y no hay forma de llegar a ellos:
       medido, 442 px por encima. */
    justify-content: flex-start;
    gap: 0;
    padding: 0 0 var(--gm-e4);
    overflow-y: auto;
    flex: 1 1 auto;
  }

  .gm__item {
    display: block;
    border-bottom: 1px solid var(--gm-borde);
  }

  /* NIVEL 1. El nombre y la flecha son DOS controles separados: tocar el
     nombre navega a la categoría, tocar la flecha despliega. Con un solo
     control hay que elegir una de las dos cosas y siempre falla la otra. */
  .gm__item--mega { display: flex; flex-wrap: wrap; align-items: stretch; }

  .gm__enlace {
    flex: 1 1 auto;
    padding: 15px 18px;
    border-radius: 0;
    white-space: normal;
    min-height: 52px;
  }

  .gm__item:hover > .gm__enlace { background: none; color: var(--gm-texto); }
  .gm__item.is-abierto > .gm__enlace { color: var(--gm-morado-osc); }

  .gm__abrir {
    flex: 0 0 auto;
    align-self: stretch;
    width: 56px;
    font-size: 20px;
    color: var(--gm-texto-flojo);
    border-left: 1px solid var(--gm-borde);
  }

  .gm__abrir svg { transition: transform .2s ease; transform: rotate(90deg); }
  .gm__item.is-abierto .gm__abrir svg { transform: rotate(-90deg); }

  /* El panel pasa a ser un acordeón.
     La altura la fija el JS con scrollHeight en vez de con
     grid-template-rows: ese truco solo anima el PRIMER hijo del grid, y
     aquí hay dos —las columnas y el botón «Ver todo»—. */
  .gm__panel {
    position: static;
    flex: 1 0 100%;
    min-width: 0;
    padding: 0 18px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--gm-morado-suave);

    opacity: 1;
    visibility: visible;
    transform: none;
    max-height: 0;
    overflow: hidden;
    overscroll-behavior: auto;
    /* Solo se anima max-height. Si el padding también transiciona, el
       scrollHeight que lee el JS se toma a mitad de camino y sale corto:
       el botón «Ver todo» se quedaba recortado por abajo. */
    transition: max-height .24s ease;
  }

  .gm__item.is-abierto > .gm__panel {
    padding-top: var(--gm-e2);
    padding-bottom: var(--gm-e3);
  }

  .gm__cols,
  .gm__panel--5 .gm__cols { grid-template-columns: 1fr; gap: 0; }

  /* En el cajón no hay columnas: la familia grande deja de ocupar dos y sus
     bloques caen uno detrás de otro, que es como se lee en un móvil. */
  .gm__col--doble { grid-column: auto; }
  .gm__sub { grid-template-columns: 1fr; gap: 0; }

  .gm__grupo--padre {
    padding: 15px 0 13px;
    margin-bottom: 0;
    font-size: 16px;
    min-height: 48px;
    display: flex;
    align-items: center;
  }

  /* NIVEL 2. Mismo criterio: el nombre navega, la flecha despliega. */
  .gm__grupo-fila {
    gap: 0;
    margin-bottom: 0;
    border-bottom: 1px solid #e3d9ef;
  }

  .gm__grupo {
    padding: 13px 0;
    font-size: 15px;
    min-height: 46px;
    display: flex;
    align-items: center;
  }

  .gm__abrir2 {
    flex: 0 0 auto;
    align-self: stretch;
    width: 46px;
    font-size: 17px;
    color: var(--gm-texto-flojo);
  }

  .gm__abrir2 svg { transition: transform .2s ease; transform: rotate(90deg); }
  .gm__grupo-fila.is-abierto .gm__abrir2 svg { transform: rotate(-90deg); }
  .gm__grupo-fila.is-abierto .gm__grupo { color: var(--gm-morado); }

  /* La lista de tercer nivel arranca cerrada. */
  .gm__lista {
    margin-bottom: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height .22s ease;
  }

  .gm__grupo-fila.is-abierto + .gm__lista {
    padding: 6px 0 var(--gm-e2);
  }

  .gm__lista a {
    padding: 12px var(--gm-e2) 12px 18px;
    margin-left: 0;
    font-size: 14.5px;
    border-radius: 0;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .gm__grupo--suelto {
    padding: 13px 0;
    margin-left: 0;
    border-radius: 0;
    min-height: 46px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e3d9ef;
  }

  .gm__grupo--suelto:hover { background: none; color: var(--gm-morado); }

  /* En el móvil, las marcas en una sola columna con scroll propio: 77
     marcas en un acordeón dejarían el resto del menú inalcanzable. */
  .gm__marcas {
    columns: 1;
    max-height: 60vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: var(--gm-radio-chico);
  }

  .gm__marcas a {
    padding: 12px var(--gm-e2);
    margin-left: 0;
    min-height: 44px;
    display: flex;
    align-items: center;
    font-size: 14.5px;
    border-bottom: 1px solid #e3d9ef;
    border-radius: 0;
  }

  .gm__marcas li:last-child a { border-bottom: 0; }

  .gm__todo {
    width: 100%;
    justify-content: center;
    margin-top: var(--gm-e3);
    padding: 12px 16px;
  }
}

/* =========================================================================
   ESCRITORIO
   ========================================================================= */

@media (min-width: 1200px) {
  .gm__hamburguesa,
  .gm__velo,
  .gm__cajon-cab,
  .gm__abrir2 { display: none; }

  .gm__cajon { display: block; }

  /*
   * SOLO AQUÍ el texto va en blanco: en escritorio la barra está sobre el
   * morado de la cabecera. En el cajón de móvil el fondo es blanco, y poner
   * esto fuera del media query dejaba el menú entero en blanco sobre blanco
   * —invisible—. Pasó en producción el 03/08/2026.
   */
  .gm .gm__barra .gm__enlace,
  .gm .gm__barra .gm__enlace:link,
  .gm .gm__barra .gm__enlace:visited { color: var(--gm-barra-texto); }

  .gm__ico { color: var(--gm-barra-icono); }

  .gm .gm__barra .gm__item--destacado > .gm__enlace { color: var(--gm-barra-destacado); }
  .gm__item--destacado .gm__ico { color: var(--gm-barra-destacado); }

  /* En escritorio la flecha solo indica; abrir se hace con el ratón o con
     el teclado sobre el propio enlace. */
  .gm__abrir {
    padding: 12px var(--gm-e2) 12px 0;
    font-size: 14px;
    color: var(--gm-texto-flojo);
    pointer-events: none;
  }

  .gm__abrir svg { transform: rotate(90deg); transition: transform .18s ease; }
  .gm__item.is-abierto .gm__abrir svg { transform: rotate(-90deg); }

  .gm__item--mega > .gm__enlace { padding-right: var(--gm-e1); }
}

/* =========================================================================
   INTEGRACIÓN CON LA CABECERA DE GLOTOMANIA

   Esto NO es del menú: son tres reglas que dependen de cómo está montada
   vuestra cabecera en Bricks. Si algún día cambian los ids, se ajustan aquí
   y el resto del archivo sigue valiendo.

   Medido el 03/08/2026:
     #brx-header ....... position: relative  (por eso no se quedaba al scroll)
     #brxe-ohsaiv ...... la sección del menú, fondo rgb(85,71,148)
     #brxe-gkhkwl ...... contenedor de 1.154 px que encerraba el panel
   ========================================================================= */

/*
 * LA FILA DEL MENÚ SE QUEDA ARRIBA AL HACER SCROLL
 *
 * Con position:sticky no bastaba, y conviene saber por qué: un elemento
 * sticky solo puede moverse DENTRO de su padre. Aquí el padre es
 * #brx-header, que mide 238 px, y la sección del menú 55. Se quedaba
 * pegada 183 px y se iba con la cabecera. Medido el 03/08/2026.
 *
 * Por eso se saca del flujo con position:fixed a partir del punto en que
 * la cabecera se ha ido, y se compensa el hueco con un padding en el
 * propio header para que la página no pegue un salto. La clase la pone el
 * JS, que es quien sabe a qué altura pasa eso.
 *
 * Se fija SOLO la fila del menú y no la cabecera entera: son 238 px y
 * dejarla toda pegada se come un cuarto de la pantalla en un portátil.
 */
/* .gm-fila-menu la pone el JS sobre la fila del menú. No se usa el id de
   Bricks porque cambia si se rehace el elemento. */
body.gm-fijo .gm-fila-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 300;
  box-shadow: 0 2px 12px rgba(28, 25, 33, .18);
}

/* El hueco que deja la fila al salir del flujo. La altura la mide el JS. */
body.gm-fijo #brx-header { padding-bottom: var(--gm-alto-barra, 55px); }

/* Un ancestro con overflow recortado rompe tanto el fixed como el panel.
   El <body> de las páginas de categoría trae overflow-x: clip. */
html, body,
#brx-header,
.gm-fila-menu { overflow-x: visible; }

/* Quien haya pedido menos animación, que no la tenga. */
@media (prefers-reduced-motion: reduce) {
  .gm *, .gm *::before, .gm *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}