/* ============================================================
   Beshop Mega Menu — front.css
   Selectores prefijados con #header para ganar especificidad
   ============================================================ */
:root {
  --mm-bg: var(--beshop-bg-card);
  --mm-border: var(--beshop-line);
  --mm-color: var(--beshop-text);
  --mm-color-hover: var(--beshop-text);
  /* Enlaces principales: colores de la cabecera; desplegables: --mm-color */
  --mm-color-top: var(--beshop-header-text);
  --mm-shadow: 0 8px 24px rgba(0,0,0,.12);
  --mm-z: 1000;
  --mm-transition: .2s ease;
}

/* ---- Desktop ---- */
#header .mm-nav--desktop { position: relative; }
#header .mm-menu { display: flex; flex-wrap: nowrap; list-style: none; margin: 0; padding: 0; }
#header .mm-menu__item { position: relative; padding: 12px 16px; }

#header .mm-menu__link {
 
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--mm-color-top); text-decoration: none;
  font-size: 17px; background: none; border: none; cursor: pointer;
  white-space: nowrap; transition: color var(--mm-transition);
  position: relative;
}
#header .mm-menu__link:hover,
#header .mm-menu__link:focus-visible,
#header .mm-menu__link--trigger[aria-expanded="true"] { color: var(--mm-color-top); }
#header .mm-menu__link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* ---- Línea animada items principales ---- */
/* Solo en links de texto, no en el botón que solo tiene el chevron */
#header .mm-menu__link:not(.mm-menu__link--chevron-only)::after,
#header .mm-menu__link--trigger:not(.mm-menu__link--chevron-only)::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 1px;
  background: var(--mm-line, var(--beshop-menu-line));
  transition: width .35s ease;
}
#header .mm-menu__link:not(.mm-menu__link--chevron-only):hover::after,
#header .mm-menu__link:not(.mm-menu__link--chevron-only):focus-visible::after,
#header .mm-menu__link--trigger:not(.mm-menu__link--chevron-only)[aria-expanded="true"]::after,
#header .mm-menu__item:hover > .mm-menu__link--trigger:not(.mm-menu__link--chevron-only)::after { width: 100%; }

#header .mm-chevron { font-size: .7em; transition: transform var(--mm-transition); }
#header .mm-menu__link--trigger[aria-expanded="true"] .mm-chevron { transform: rotate(180deg); }

/* ---- Dropdown ---- */
#header .mm-dropdown {
  position: absolute; top: 100%; left: 0;
  background: var(--mm-bg); border: 1px solid var(--mm-border); border-top: none;
 z-index: var(--mm-z); min-width: 200px;
  margin-top: 10px;
}
#header .mm-dropdown__inner { display: flex; flex-wrap: nowrap; padding: 50px 20px; gap: 20px; justify-content: center;}

/* ---- Columnas ---- */
#header .mm-dd-col { flex: 0 0 auto; }
#header .mm-dd-col--break { flex-basis: 100%; height: 0; padding: 0; margin: 0; flex-shrink: 0; }
#header .mm-dd-col--2  { flex: 0 0 calc(100% / 6   - 20px * 5 / 6); }
#header .mm-dd-col--3  { flex: 0 0 calc(100% / 4   - 20px * 3 / 4); }
#header .mm-dd-col--4  { flex: 0 0 calc(100% / 3   - 20px * 2 / 3); }
#header .mm-dd-col--5  { flex: 0 0 calc(100% / 12 * 5 - 20px * 7 / 12); }
#header .mm-dd-col--6  { flex: 0 0 calc(50%         - 20px * 1 / 2); }
#header .mm-dd-col--8  { flex: 0 0 calc(100% / 3 * 2 - 20px * 1 / 3); }
#header .mm-dd-col--9  { flex: 0 0 calc(75%         - 20px * 1 / 4); }
#header .mm-dd-col--12 { flex: 0 0 100%; }

/* ---- Bloques ---- */
#header .mm-block-link {
  display: block; padding: 4px 0;
  color: var(--mm-color); text-decoration: none; font-size: .9rem;
  transition: color var(--mm-transition);
  position: relative;
}

/* ---- Línea animada subcategorías ---- */
#header .mm-block-link::after,
#header .mm-block-cat__list a::after,
#header .mm-cat-child-link::after,
#header .mm-cat-flyout__item::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 1px;
  background: var(--beshop-menu-line);
  transition: width .3s ease;
}
#header .mm-block-link:hover::after,
#header .mm-block-cat__list a:hover::after,
#header .mm-cat-child-link:hover::after,
#header .mm-cat-flyout__item:hover::after { width: 100%; }

#header .mm-block-link:hover,
#header .mm-block-link:focus-visible { color: var(--mm-color-hover); }
#header .mm-block-link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

#header .mm-block-cat__title {
  display: block; font-weight: 600; font-size: 16px;
  color: var(--mm-color); text-decoration: none; margin-bottom: 8px;
  letter-spacing: .04em;
}
#header .mm-block-cat__title:focus-visible { outline: 2px solid currentColor; }
#header .mm-block-cat__list { list-style: none; margin: 0; padding: 0; }
#header .mm-block-cat__list li { margin-bottom: 4px; }

/* ---- Lista de categorías repartida en columnas (solo escritorio) ----
   Se activa desde la config del bloque (check "Dividir la lista en columnas").
   Al usar column-count el orden alfabético se mantiene: llena la 1ª columna
   de arriba a abajo y sigue en la siguiente. Solo dentro del dropdown de
   escritorio; el móvil (.mm-mobile-dd) queda siempre en una sola columna. */
#header .mm-dropdown .mm-block-cat__list--cols {
  column-count: var(--mm-cat-cols, 3);
  column-gap: 32px;
  /* asegura que el dropdown se ensanche lo suficiente para las columnas */
  min-width: calc(var(--mm-cat-cols, 3) * 190px);
}
#header .mm-dropdown .mm-block-cat__list--cols li {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}
#header .mm-block-cat__list a {
  color: var(--beshop-text); text-decoration: none; font-size: 16px;
  transition: color var(--mm-transition);
  position: relative; display: inline-block;
}
#header .mm-block-cat__list a:hover,
#header .mm-block-cat__list a:focus-visible { color: var(--mm-color-hover); }
#header .mm-block-cat__list a:focus-visible { outline: 2px solid currentColor; }

/* ---- Bloque imagen ----
   El ancho lo marca --mm-img-w (campo "Ancho máx." del bloque, 300px por defecto)
   y nunca supera la columna. Así una imagen de 2000px no ensancha el desplegable. */
#header .mm-block-img { display: block; width: var(--mm-img-w, 300px); max-width: 100%; }
#header .mm-block-img__link { display: block; color: var(--mm-color); text-decoration: none; }
#header .mm-block-img__media { position: relative; display: block; overflow: hidden; }
#header .mm-block-img__media img { display: block; width: 100%; height: auto; transition: transform .4s ease; }
#header a.mm-block-img__link:hover .mm-block-img__media img { transform: scale(1.03); }
#header .mm-block-cat img { max-width: 100%; height: auto; display: block; }

#header .mm-block-img__title {
  display: block; font-size: 15px; letter-spacing: .04em; line-height: 1.3;
  color: var(--mm-color);
}
#header .mm-block-img--title-above .mm-block-img__title { margin-bottom: 10px; }
#header .mm-block-img--title-below .mm-block-img__title { margin-top: 10px; }
#header .mm-block-img__title--overlay-top,
#header .mm-block-img__title--overlay-bottom {
  position: absolute; left: 0; right: 0; padding: 10px 14px;
  color: var(--mm-img-title-color, #fff);
  background: var(--mm-img-title-bg, rgba(0,0,0,.30));
}
#header .mm-block-img__title--overlay-top { top: 0; }
#header .mm-block-img__title--overlay-bottom { bottom: 0; }
#header .mm-block-img--no-img .mm-block-img__title { margin: 0; padding: 4px 0; }

/* En móvil la imagen ocupa el ancho disponible del panel, con el mismo tope */
#header .mm-mobile-dd .mm-block-img { margin-bottom: 12px; }
#header .mm-block-html { font-size: .9rem; color: var(--mm-color); }

#header .mm-menu__link--split-label { padding-right: 0; }
#header .mm-menu__link--chevron-only { padding-left: 2px; }

/* ---- Full width ---- */
#header .mm-menu__item--has-dd { position: static; }
#header .mm-dropdown--fullwidth {
  position: fixed; left: 0; right: 0; width: 100%; top: auto;
}
#header .mm-dropdown--fullwidth .mm-dropdown__inner {
  max-width: 1200px; margin: 0 auto;
}

/* ---- Visibilidad responsive ---- */
#header .mm-nav--desktop { display: block; }
#header .mm-nav--mobile  { display: none;  }


/* ---- Móvil ---- */
#header .mm-hamburger {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 10px;
  background: none; border: none; cursor: pointer;
}
#header .mm-hamburger__line {
  display: block; width: 100%; height: 2px;
  color: var(--beshop-header-text);
  background: currentColor; border-radius: 2px;
  transition: transform var(--mm-transition), opacity var(--mm-transition);
}
#header .mm-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.5); z-index: calc(var(--mm-z) - 1);
}
#header .mm-overlay.is-visible { display: block; }
#header .mm-mobile-panel {
  position: fixed; top: 0; left: 0; width: 320px; max-width: 100vw; height: 100%;
  background: var(--mm-bg); z-index: var(--mm-z);
  overflow-y: auto; transform: translateX(-100%);
  transition: transform .3s ease;
}
#header .mm-mobile-panel.is-open { transform: translateX(0); }
#header .mm-mobile-panel__head {
  display: flex; justify-content: flex-end; padding: 12px;
  border-bottom: 1px solid var(--mm-border);
}
#header .mm-mobile-close {
  width: 44px; height: 44px; background: none; border: none;
  font-size: 1.5rem; cursor: pointer; color: var(--mm-color);
  display: flex; align-items: center; justify-content: center;
}
#header .mm-mobile-close:focus-visible { outline: 2px solid currentColor; }
#header .mm-mobile-list { list-style: none; margin: 0; padding: 0; }
#header .mm-mobile-list li { border-bottom: 1px solid var(--mm-border); }

/* Items desplegables con enlace propio: el enlace y la flecha en la MISMA fila,
   flecha a la derecha; el submenú desplegado ocupa el ancho completo debajo. */
#header .mm-mobile-list li { display: flex; flex-wrap: wrap; align-items: stretch; }
#header .mm-mobile-item-link--split { flex: 1 1 auto; width: auto; }
#header .mm-mobile-item-btn--chevron-only {
  flex: 0 0 auto; width: auto;
  padding-left: 8px; padding-right: 20px;
  border-left: 1px solid var(--mm-border);
}
#header .mm-mobile-dd { flex: 0 0 100%; }
#header .mm-mobile-item-link,
#header .mm-mobile-item-btn {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 14px 20px;
  color: var(--mm-color); text-decoration: none; font-size: .9375rem;
  background: none; border: none; text-align: left; cursor: pointer;
}
#header .mm-mobile-item-link:focus-visible,
#header .mm-mobile-item-btn:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
#header .mm-mobile-item-btn .mm-chevron { transition: transform var(--mm-transition); }
#header .mm-mobile-item-btn[aria-expanded="true"] .mm-chevron { transform: rotate(180deg); }
#header .mm-mobile-dd { padding: 12px 20px 20px; background: var(--beshop-bg-soft); }
#header .mm-mobile-dd .mm-block-link { padding: 5px 0; }
#header .mm-locked { overflow: hidden; }

/* ---- Subcategorías flyout ---- */
#header .mm-cat-has-flyout { position: relative; }
#header .mm-cat-has-flyout .mm-cat-flyout {
  display: none; position: absolute; left: 100%; top: 0;
  min-width: 180px; background: var(--beshop-bg-card); border: 1px solid var(--beshop-line);
  box-shadow: 4px 4px 12px rgba(0,0,0,.08); z-index: 100;
  padding: 6px 0; flex-direction: column;
}
#header .mm-cat-has-flyout:hover > .mm-cat-flyout,
#header .mm-cat-has-flyout:focus-within > .mm-cat-flyout { display: flex; }
#header .mm-cat-flyout__item {
  display: block; padding: 6px 14px; font-size: .85rem;
  color: inherit; text-decoration: none; white-space: nowrap;
  transition: background .12s;
  position: relative;
}
#header .mm-cat-flyout__item:hover { background: var(--beshop-bg-soft); }
#header .mm-cat-flyout-arrow { margin-left: 4px; font-size: .8em; opacity: .5; }

/* ---- Subcategorías anidadas ---- */
#header .mm-cat-parent-link--nested { font-weight: 600; display: block; margin-bottom: 2px; }
#header .mm-cat-children { list-style: none; margin: 0 0 8px 0; padding: 0; }
#header .mm-cat-child-link {
  display: inline-block; font-weight: 400; font-size: .85rem;
  padding: 2px 0; color: inherit; text-decoration: none;
  opacity: .85; transition: opacity .12s;
  position: relative;
}
#header .mm-cat-child-link:hover { opacity: 1; }

/* ---- Responsive ---- */

/* ---- Visibilidad responsive ----
   Fuente única de verdad: la clase .mm-mobile-mode que front.js pone en #header. */
#header .mm-nav--desktop { display: block; }
#header .mm-nav--mobile  { display: none;  }
#header.mm-mobile-mode .mm-nav--desktop { display: none;  }
#header.mm-mobile-mode .mm-nav--mobile  { display: block; }

/* Red de seguridad sin JS: por debajo de 992, hamburguesa siempre */
@media (max-width: 991px) {
  #header .mm-nav--desktop { display: none;  }
  #header .mm-nav--mobile  { display: block; }
}
/* Pantallas medianas (aún escritorio, todavía no hamburguesa): compactar un poco
   los items para que quepan más antes de que salte la hamburguesa y no se
   "chafen" las opciones. Ajusta los valores/breakpoints a tu menú si hace falta. */
@media (min-width: 992px) and (max-width: 1200px) {
  #header .mm-menu__item { padding: 12px 10px; }
  #header .mm-menu__link { font-size: 15px; gap: 2px; }
}


@media (max-width: 991px) {
  #header .mm-cat-has-flyout .mm-cat-flyout {
    display: block !important; position: static;
    box-shadow: none; border: none; padding: 0 0 0 12px;
  }
  #header .mm-cat-flyout__item { padding: 4px 0; }
  #header .mm-cat-flyout-arrow { display: none; }
}