/**
 * 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: block; } }

#header .des-menu__list {
  list-style: none;
  margin: 0;
  padding-block: 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
#header .des-menu__item { position: relative; }

#header .des-menu__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  font: 600 13px/1 var(--fuente, "Outfit");
  text-transform: uppercase;
  color: var(--color-quaternary);
  text-decoration: none;
  white-space: nowrap;
  transition: color .25s ease;
}
#header .des-menu__link:hover,
#header .des-menu__link:focus-visible { color: var(--color-secondary); outline: none; }

/* Estado activo: categoria/pagina actual (y su rama de ancestros) */
#header .des-menu__link.active { color: var(--color-quinary); font-weight: 700; }
#header .des-menu__dropdown-link.active { color: var(--color-quinary); 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); }

/* Dropdown */
#header .des-menu__dropdown {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  background: #fff;
  border-radius: 12px;
  border-top: 3px solid var(--color-quaternary);
  box-shadow: 0 12px 32px rgba(33, 39, 74, .14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .25s ease, visibility .25s ease, transform .25s ease;
  z-index: 1000;
}
#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; }
#header .des-menu__dropdown-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 18px;
  font: 500 14px/1.2 var(--fuente, "Outfit");
  color: var(--color-quaternary);
  text-decoration: none;
  transition: color .2s ease, background .2s ease;
}
#header .des-menu__dropdown-link:hover,
#header .des-menu__dropdown-link:focus-visible { color: var(--color-secondary); background: #f7f8fb; outline: none; }

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

/* Nivel 2 (se despliega a la derecha) */
#header .des-menu__dropdown--level2 {
  top: 0;
  left: 100%;
  border-top: 0;
  border-left: 3px solid var(--color-quaternary);
  border-radius: 0 12px 12px 0;
}
#header .des-menu__dropdown-item--has-children:hover > .des-menu__dropdown--level2,
#header .des-menu__dropdown-item--has-children:focus-within > .des-menu__dropdown--level2 { opacity: 1; visibility: visible; transform: translateY(0); }
#header .des-menu__dropdown-item--has-children:hover > .des-menu__dropdown-link .des-menu__chevron--right { transform: rotate(90deg); }

/* ==========================================================================
   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: 320px;
  max-width: 85vw;
  height: 100%;
  background: #fff;
  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: 0 0 20px;
  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;
}

.des-menu__mobile-header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  background: #fff;
  border-bottom: 1px solid #eef0f5;
}
.des-menu__mobile-title {
  font: 700 18px/1 var(--fuente, "Outfit");
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-quaternary);
}
.des-menu__mobile-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  background: #f2f3f6;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: var(--color-quaternary);
  font-size: 15px;
  transition: background .2s ease, color .2s ease;
}
.des-menu__mobile-close:hover,
.des-menu__mobile-close:focus-visible { background: var(--color-quaternary); color: #fff; outline: none; }

.des-menu__mobile-list { list-style: none; margin: 0; padding: 0;flex-grow:1; }
.des-menu__mobile-item { border-bottom: 1px solid #eef0f5; }
.des-menu__mobile-row { display: flex; align-items: stretch; }

.des-menu__mobile-link {
  flex: 1;
  display: block;
  padding: 14px 20px;
  font: 600 16px/1.3 var(--fuente, "Outfit");
  color: var(--color-quaternary);
  text-decoration: none;
  transition: color .2s ease;
}
.des-menu__mobile-link:hover,
.des-menu__mobile-link:focus-visible { color: var(--color-secondary); outline: none; }
.des-menu__mobile-link--sub { padding-left: 32px; font-weight: 500; font-size: 15px; }
.des-menu__mobile-link--sub2 { padding-left: 44px; font-weight: 400; font-size: 14px; }

.des-menu__mobile-expand {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  flex-shrink: 0;
  background: none;
  border: 0;
  border-left: 1px solid #eef0f5;
  cursor: pointer;
  color: var(--color-terciary);
  font-size: 12px;
  transition: background .2s ease, color .2s ease;
}
.des-menu__mobile-expand:hover { background: #f7f8fb; color: var(--color-quaternary); }
.des-menu__mobile-expand i { transition: transform .3s ease; }
.des-menu__mobile-expand.is-open i { transform: rotate(180deg); }

.des-menu__mobile-sub { list-style: none; margin: 0; padding: 0; display: none; background: #f7f8fb; }
.des-menu__mobile-sub.is-open { display: block; }
.des-menu__mobile-sub--level2 { background: #f2f3f6; }
.des-menu__mobile-subitem { border-top: 1px solid #eef0f5; }

/* ==========================================================================
   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;
}