/**
 * DES MENU — Front (override tema theshopgamer)
 * Adaptado a la línea de la web: navy (#21274A) + Outfit, hover azul de marca.
 * Se conservan todas las clases/estados que usa front.js (.is-open, .is-active,
 * .is-visible, --fixed, etc.). Los dropdowns desktop ya NO dependen de
 * .des-header__nav (que no existe en este tema).
 *
 *  @author David Escudero Digital Studio
 *  @license AFL 3.0
 */

.des-menu { font-family: var(--fuente, "Outfit"), sans-serif; }

/* ==========================================================================
   Navegación desktop (≥ 993px)
   ========================================================================== */
#header .des-menu--desktop { display: none; }
@media (min-width: 993px) { #header .des-menu--desktop {display: flex;align-items: stretch;justify-content: space-between;gap: 20px;} }

#header .des-menu__list {
  list-style: none;
  margin: 0;
  padding-block: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start; /* alineado a la izquierda, como el diseño */
  gap: 0 24px;
  position: static;            /* el mega-desplegable se ancla a #header .header__nav (100% viewport) */
}
/* Variante B (panel compacto): el desplegable se ancla A SU ITEM, no al nav.
   Antes era `static` para que el mega-panel ocupara el ancho de pantalla. */
#header .des-menu__item { position: relative; }

#header .des-menu__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 0;
  font: 600 13px/1 var(--fuente);
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--des-color-primary); /* rojo marca */
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  transition: color .25s ease;
}
#header .des-menu__link:hover,
#header .des-menu__link:focus-visible { color: var(--des-color-hover); outline: none; }

/* Estado activo: subrayado rojo bajo el item (como "PACKS GOURMET" en el diseño) */
#header .des-menu__link.active { color: var(--des-color-primary); font-weight: 700; }
#header .des-menu__item.active > .des-menu__link::after,
#header .des-menu__link.active::after,
/* Al abrir el mega-desplegable (estar en el contenido del tab): mismo borde que active */
#header .des-menu__item--has-children:hover > .des-menu__link::after,
#header .des-menu__item--has-children:focus-within > .des-menu__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--des-color-primary);
}
#header .des-menu__dropdown-link.active { color: var(--des-color-primary); font-weight: 700; }
.des-menu__mobile-link.active { color: var(--color-quinary); font-weight: 700; }

#header .des-menu__chevron { font-size: 10px; transition: transform .25s ease; }
#header .des-menu__item--has-children:hover > .des-menu__link .des-menu__chevron,
#header .des-menu__item--has-children:focus-within > .des-menu__link .des-menu__chevron { transform: rotate(180deg); }

/* ==========================================================================
   Mega-desplegable (full-width, anclado a la lista del nav)
   ========================================================================== */
/* Variante B: panel compacto anclado bajo su pestana, en una sola columna,
   con el CTA de presupuesto cerrandolo. Antes ocupaba el ancho completo de la
   pantalla con los subitems repartidos en horizontal. */
#header .des-menu__dropdown {
  list-style: none;
  margin: 0;
  padding: 18px;
  position: absolute;
  top: 100%;
  left: 0;
  right: auto;
  /* El panel se ancha lo justo para su entrada mas larga ("Cestas de Navidad
     con jamon" no cabia en 320px y caia a dos lineas). El minimo evita paneles
     ridiculos con una sola subcategoria; el maximo, que un nombre kilometrico
     lo estire de mas — a partir de ahi si parte en dos lineas. */
  width: max-content;
  min-width: 320px;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 2px;
  background: var(--brand-cream);
  border: 1px solid var(--des-color-secondary, #DBDBDB);
  border-top: 0;
  border-radius: 0 0 var(--des-radius, 15px) var(--des-radius, 15px);
  box-shadow: 0 12px 22px rgba(140, 28, 19, .12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .25s ease, visibility .25s ease, transform .25s ease;
  z-index: 1000;
}

/* Todos los paneles se alinean a la izquierda del texto de su pestana (left: 0,
   arriba). Unica excepcion: la ULTIMA pestana, y solo cuando el menu tiene mas
   de 3 entradas — ahi si queda lo bastante a la derecha como para salirse.
   `:nth-child(n+4)` = es la cuarta o posterior; junto a `:last-child`, la regla
   solo entra si hay 4 o mas items. Con las 3 actuales no aplica a ninguna. */
#header .des-menu__list > .des-menu__item:last-child:nth-child(n+4) > .des-menu__dropdown {
  left: auto;
  right: 0;
}

#header .des-menu__item--has-children:hover > .des-menu__dropdown,
#header .des-menu__item--has-children:focus-within > .des-menu__dropdown { opacity: 1; visibility: visible; transform: translateY(0); }

#header .des-menu__dropdown-item { position: relative; }
/* Variante B: cada subcategoria ocupa su fila. El line-height de 40px venia del
   panel horizontal y aqui separaba demasiado las filas. */
#header .des-menu__dropdown-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  font: 400 14px/1.35 var(--fuente, "Outfit");
  text-transform: uppercase;
  letter-spacing: .03em;
  color: rgba(140, 28, 19, .75);
  text-decoration: none;
  border-radius: 8px;
  transition: color .2s ease, background .2s ease;
}
#header .des-menu__dropdown-link::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  background: var(--des-color-primary);
}
#header .des-menu__dropdown-link:hover,
#header .des-menu__dropdown-link:focus-visible {
  color: var(--des-color-primary);
  background: #fff;
  outline: none;
}

#header .des-menu__chevron--right { font-size: 10px; transition: transform .25s ease; }

/* CTA promo dentro del mega-desplegable ("¿Prefieres personalizar tu cesta?") */
/* Variante B: el CTA cierra el panel, separado por una linea y a todo su ancho.
   El margin-top de 50px era para el panel a pantalla completa. */
#header .des-menu__dropdown-cta {
  display: flex;
  justify-content: stretch;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--des-color-secondary, #DBDBDB);
}
#header .des-menu__cta-btn {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 18px;
  border-radius: var(--des-radius-pill, 999px);
  background: var(--des-color-primary);
  color: #fff;
  font: 500 13px/1.3 var(--fuente);
  text-align: center;
  text-decoration: none;
  transition: background .2s ease;
}
#header .des-menu__cta-btn:hover,
#header .des-menu__cta-btn:focus-visible { background: var(--des-color-hover); }
#header .des-menu__cta-btn svg { width: 20px; height: 20px; flex: 0 0 auto; }

/* Nivel 2: en el mega-menú los sub-subelementos se muestran en línea.
   TODO: definir con el cliente si hay 3er nivel (de momento oculto). */
#header .des-menu__dropdown--level2 { display: none; }

/* ==========================================================================
   Botón hamburguesa (estático en el header del tema, #des-menu-toggle-slot).
   El slot .header__menu-toggle lo muestra/oculta por CSS (oculto en desktop,
   visible ≤992px), así que aquí el botón es simplemente flex.
   ========================================================================== */
.des-menu__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background: none;
  border: 0;
  cursor: pointer;
}

.des-menu__toggle-icon {
  display: block;
  width: 25px;
  height: 18px;
}

/* ==========================================================================
   Panel móvil (portalizado al body por JS)
   ========================================================================== */
.des-menu--mobile {
  position: fixed;
  top: 0;
  left: 0;
  width: 340px;
  max-width: 88vw;
  height: 100%;
  background: #FAF6F0;
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 9000;
  transform: translateX(-100%);
  pointer-events: none;
  visibility: hidden;
  transition: transform .35s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .35s;
  box-shadow: 6px 0 32px rgba(15, 20, 26, .18);
  padding: 22px;
  display:flex;
  flex-direction:column;
}
.des-menu--mobile.is-open {
  transform: translateX(0);
  pointer-events: auto;
  visibility: visible;
  transition: transform .35s cubic-bezier(.4, 0, .2, 1), visibility 0s linear 0s;
}

/* Cabecera: solo el botón cerrar, alineado a la derecha */
.des-menu__mobile-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0;
  margin-bottom: 10px;
  background: transparent;
  border: 0;
}
.des-menu__mobile-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: opacity .2s ease;
}
.des-menu__mobile-close:hover,
.des-menu__mobile-close:focus-visible { opacity: .65; outline: none; }
.des-menu__mobile-close svg { display: block; width: 15px; height: auto; }

/* Lista de categorías: cada item es un botón */
.des-menu__mobile-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.des-menu__mobile-item { border: 0; }

/* La fila es UN botón: enlace + toggle juntos, sin separación ni redondeo */
.des-menu__mobile-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  transition: background .2s ease;
}
.des-menu__mobile-row:hover { background: rgba(140, 28, 19, .08); }
.des-menu__mobile-item.active > .des-menu__mobile-row,
.des-menu__mobile-subitem.active > .des-menu__mobile-row,
.des-menu__mobile-row:has(> .des-menu__mobile-link.active) { background: #8C1C13; }
.des-menu__mobile-row:has(> .des-menu__mobile-link.active):hover { background: #8C1C13; }

.des-menu__mobile-link {
  flex: 1;
  display: block;
  padding: 13px 16px;
  font: 600 15px/20px var(--fuente, "Outfit");
  color: #8C1C13;
  text-decoration: none;
  border-radius: 0;
  transition: color .2s ease;
}
.des-menu__mobile-link:hover,
.des-menu__mobile-link:focus-visible { color: #8C1C13; outline: none; }
.des-menu__mobile-item.active > .des-menu__mobile-row > .des-menu__mobile-link,
.des-menu__mobile-subitem.active > .des-menu__mobile-row > .des-menu__mobile-link,
.des-menu__mobile-link.active { color: #fff; }
.des-menu__mobile-link--sub  { padding-left: 28px; font-size: 14px; }
.des-menu__mobile-link--sub2 { padding-left: 40px; font-size: 14px; font-weight: 500; }

/* Toggle de subcategorías: parte del mismo botón (chevron rojo, blanco si activo) */
.des-menu__mobile-expand {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  flex-shrink: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}
.des-menu__expand-ico { display: block; width: 12px; height: auto; transition: transform .3s ease; }
.des-menu__expand-ico path { fill: #8C1C13; }
.des-menu__mobile-item.active > .des-menu__mobile-row .des-menu__expand-ico path,
.des-menu__mobile-subitem.active > .des-menu__mobile-row .des-menu__expand-ico path { fill: #fff; }
.des-menu__mobile-expand.is-open .des-menu__expand-ico { transform: rotate(180deg); }

/* Submenú desplegable */
.des-menu__mobile-sub {
  list-style: none;
  margin: 2px 0;
  padding: 0;
  display: none;
}
.des-menu__mobile-sub.is-open { display: block; }
.des-menu__mobile-subitem { border: 0; }

/* ==========================================================================
   Overlay (portalizado al body por JS)
   ========================================================================== */
.des-menu__overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 20, 26, .45);
  z-index: 8999;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.des-menu__overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: opacity .35s ease, visibility 0s linear 0s;
}

/* ==========================================================================
   Icono por enlace (FA o imagen subida)
   ========================================================================== */
#header .des-menu__item-icon,
.des-menu__mobile-link .des-menu__item-icon { font-size: 13px; margin-left: 4px; vertical-align: middle; }
#header .des-menu__item-img,
.des-menu__mobile-link .des-menu__item-img { display: inline-block; height: 1.2em; width: auto; margin-left: 4px; vertical-align: middle; object-fit: contain; }

/* ==========================================================================
   Utilidades por enlace (preset del backoffice)
   ========================================================================== */
#header .des-menu__link--underline,
#header .des-menu__dropdown-link--underline,
.des-menu__mobile-link--underline { text-decoration: underline; text-underline-offset: 3px; }

#header .des-menu__link--highlight,
#header .des-menu__dropdown-link--highlight,
.des-menu__mobile-link--highlight { color: var(--color-secondary); }
#header .des-menu__link--highlight:hover,
#header .des-menu__dropdown-link--highlight:hover,
.des-menu__mobile-link--highlight:hover { color: var(--color-quaternary); }

#header .des-menu__link--bold,
#header .des-menu__dropdown-link--bold,
.des-menu__mobile-link--bold { font-weight: 800; }

#header .des-menu__link--new::after,
#header .des-menu__dropdown-link--new::after,
.des-menu__mobile-link--new::after {
  content: "Nuevo";
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  font: 700 10px/1.4 var(--fuente, "Outfit");
  text-transform: uppercase;
  color: #fff;
  background: var(--color-quinary);
  border-radius: 999px;
  vertical-align: middle;
}

/* ==========================================================================
   Pie del panel móvil: contenido trasladado del topbar (idioma + enlaces).
   ========================================================================== */
.des-menu__mobile-footer {
  margin-top: 8px;
  padding: 16px 0 0;
  border-top: 1px solid #eef0f5;
}
.des-menu__footer-lang {
  margin-bottom: 4px;
  padding-inline: 20px;
  border-bottom: 1px solid #eef0f5;
}
.des-menu__footer-lang i.fas.fa-globe{
  display:none;
}
/* El selector de idioma está estilado para el topbar oscuro (texto claro, abre
   en hover). Aquí lo adaptamos al panel blanco y táctil. */
.des-menu__footer-lang .des-lang { display: flex; width: 100%; }
.des-menu__footer-lang .des-lang__toggle {
  width: 100%;
  justify-content: flex-start;
  gap: 10px;
  padding: 12px 0;
  color: var(--color-quaternary);
  font: 500 15px/1.3 var(--fuente, "Outfit");
}
.des-menu__footer-lang .des-lang__toggle:hover { opacity: 1; color: var(--color-secondary); }
.des-menu__footer-lang .des-lang__current { flex: 1; text-align: left; }
.des-menu__footer-lang .des-lang__caret { margin-left: auto; }
/* Dropdown flotante (absolute, como en el componente) pero a ancho del toggle
   para que no se salga del panel. En el pie se abre/cierra por click (.is-open,
   gestionado en front.js), NO por hover/focus — así se pliega al re-tocar. */
.des-menu__footer-lang .des-lang__menu {
  min-width: 100%;
  max-height: 260px;
}
/* Anula la apertura por hover/focus-within del componente dentro del pie. */
.des-menu__footer-lang .des-lang:hover .des-lang__menu,
.des-menu__footer-lang .des-lang:focus-within .des-lang__menu {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
}
.des-menu__footer-lang .des-lang:hover .des-lang__caret,
.des-menu__footer-lang .des-lang:focus-within .des-lang__caret {
  transform: none;
}
/* Estado abierto por click. */
.des-menu__footer-lang .des-lang.is-open .des-lang__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.des-menu__footer-lang .des-lang.is-open .des-lang__caret {
  transform: rotate(180deg);
}
.des-menu__footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.des-menu__footer-links li {
  border-bottom: 1px solid #eef0f5;
  padding-inline: 20px;
}
.des-menu__footer-link {
  display: block;
  padding: 12px 0;
  font: 500 15px/1.3 var(--fuente, "Outfit");
  color: var(--color-quaternary);
  text-decoration: none;
  transition: color .2s ease;
}
.des-menu__footer-link:hover,
.des-menu__footer-link:focus-visible { color: var(--color-secondary); outline: none; }
.des-menu__footer-note {
  margin: 12px 0 0;
  font: 400 13px/1.4 var(--fuente, "Outfit");
  color: var(--color-terciary);
  padding-inline: 20px;
}

/* ==========================================================================
   Panel móvil — "Sobre nosotros" (toggle) + CTA personalizar cesta
   ========================================================================== */
.des-menu__about { margin-top: 4px; }
.des-menu__about-toggle {
  width: 100%;
  justify-content: space-between;
  padding: 13px 16px;
  background: transparent;
  border-radius: 0;
}
.des-menu__about-toggle:hover { filter: none; background: rgba(140, 28, 19, .08); }
.des-menu__about-label {
  font: 600 15px/20px var(--fuente, "Outfit");
  color: #8C1C13;
}
/* En este toggle el chevron va en rojo (fondo crema); el fill CSS gana al del SVG */
.des-menu__about-toggle .des-menu__expand-ico path { fill: #8C1C13; }

.des-menu__about-sub { padding-left: 16px; }
.des-menu__about-link {
  display: block;
  padding: 2px 0;
  font: 600 15px/28px var(--fuente, "Outfit");
  color: #C08179;
  text-decoration: none;
  transition: color .2s ease;
}
.des-menu__about-link:hover,
.des-menu__about-link:focus-visible { color: #8C1C13; outline: none; }

/* CTA: ¿Prefieres personalizar tu cesta? */
.des-menu__custom-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  padding: 6px 13px;
  background: #8C1C13;
  border-radius: 15px;
  text-decoration: none;
  transition: filter .2s ease;
}
.des-menu__custom-cta:hover,
.des-menu__custom-cta:focus-visible { filter: brightness(1.08); outline: none; }
.des-menu__custom-ico { flex: 0 0 auto; width: 24px; height: auto; }
.des-menu__custom-text {
  flex: 1;
  font: 500 14px/19px var(--fuente, "Outfit");
  color: #fff;
}
.des-menu__custom-arrow { flex: 0 0 auto; width: 7px; height: auto; }