/* El menu de escritorio (glassmorphism)
 *
 * Estaba EN LINEA dentro de templates/desktop-menu.php, o sea que viajaba entero
 * en el HTML de todas las paginas y en todas las visitas. Aqui el navegador
 * lo guarda una vez: la regla de cache de .htaccess da un ano a los .css y .js.
 *
 * Se movio tal cual, sin tocar una linea. Si hay que cambiarlo, se cambia aqui.
 */
/* ====== ESTILOS GLASSMORPHISM PARA MENÚ ====== */
#navmenu-desktop-v3 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

/* Header wrap también con glassmorphism */
#navmenu-desktop-v3 .header-wrap {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Barra de navegación principal con efecto */
#navmenu-desktop-v3 .nx-bar {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

/* Efecto hover en botones del menú principal */
#navmenu-desktop-v3 .nx-btn:hover,
#navmenu-desktop-v3 .mm-toggle:hover {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
}

/* Paneles de submenús con glassmorphism */
#navmenu-desktop-v3 .nx-panels > div {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08) !important;
}

/* Submenús específicos con glassmorphism */
#navmenu-desktop-v3 .nx-panels > div[data-container] {
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(30px) !important;
    -webkit-backdrop-filter: blur(30px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12) !important;
}

/* Submenú específico de Living Room */
#navmenu-desktop-v3 .nx-panels > div[data-container="Living Room"] {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(30px) !important;
    -webkit-backdrop-filter: blur(30px) !important;
}

/* Submenú de Bedroom */
#navmenu-desktop-v3 .nx-panels > div[data-container="Bedroom"] {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(30px) !important;
    -webkit-backdrop-filter: blur(30px) !important;
}

/* Submenú de Mattresses */
#navmenu-desktop-v3 .nx-panels > div[data-container="Mattresses"] {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(30px) !important;
    -webkit-backdrop-filter: blur(30px) !important;
}

/* Submenú de Outdoor */
#navmenu-desktop-v3 .nx-panels > div[data-container="outdoor"] {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(30px) !important;
    -webkit-backdrop-filter: blur(30px) !important;
}

/* Menú desplegable de muebles (MOSTRAR MAS) */
#navmenu-desktop-v3 .mm-nav {
    /* background: rgba(255, 255, 255, 0.75) !important; */
    backdrop-filter: blur(30px) !important;
    -webkit-backdrop-filter: blur(30px) !important;
}

/* Layout del menú con efecto */
#navmenu-desktop-v3 .mm-layout {
    background: transparent !important;
}

/* Menú específico de furniture */
#navmenu-desktop-v3 .mm-nav[data-container="furniture"] {
    /* background: rgba(255, 255, 255, 0.75) !important; */
    backdrop-filter: blur(30px) !important;
    -webkit-backdrop-filter: blur(30px) !important;
}

/* Contenedor del menú furniture */
#navmenu-desktop-v3 #mm-nav-furniture {
    /* background: rgba(255, 255, 255, 0.75) !important; */
    backdrop-filter: blur(30px) !important;
    -webkit-backdrop-filter: blur(30px) !important;
}

/* Columnas izquierda y derecha del menú */
#navmenu-desktop-v3 .mm-left,
#navmenu-desktop-v3 .mm-right {
    background: transparent !important;
    background: rgba(255, 255, 255, 0.75) !important;
}

/* Columna izquierda - lista de categorías */
#navmenu-desktop-v3 .mm-left .desktop-menu-rooms {
    background: transparent !important;
}

/* Columna derecha - items de cada categoría */
#navmenu-desktop-v3 .mm-right {
    background: transparent !important;
}

/* Contenedor de la columna derecha */
#navmenu-desktop-v3 .mm-right > div {
    background: transparent !important;
}

/* Items individuales del submenú */
#navmenu-desktop-v3 .desktop-menu-sections-item {
    background: transparent !important;
}

/* Secciones dentro del menú furniture */
#navmenu-desktop-v3 #mm-sections {
    /* background: transparent !important; */
    background: rgba(255, 255, 255, 0.75) !important;
}

/* Items del menú con hover */
#navmenu-desktop-v3 .mm-room-trigger:hover,
#navmenu-desktop-v3 .desktop-menu-sections-item a:hover,
#navmenu-desktop-v3 .nx-item:hover {
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-radius: 8px;
    transition: all 0.2s ease;
}

/* Links dentro del menú MOSTRAR MAS */
#navmenu-desktop-v3 .mm-room-trigger {
    background: transparent !important;
    transition: all 0.2s ease;
}

#navmenu-desktop-v3 .desktop-menu-sections-item a {
    background: transparent !important;
    display: block;
    padding: 8px 12px;
    transition: all 0.2s ease;
}

/* Listas de navegación */
#navmenu-desktop-v3 .nx-list {
    background: transparent !important;
    padding: 10px;
}

#navmenu-desktop-v3 .nx-list li {
    transition: all 0.2s ease;
    background: transparent !important;
}

/* Items de la lista con hover mejorado */
#navmenu-desktop-v3 .nx-list li:hover {
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-radius: 6px;
}

/* Links dentro de los submenús */
#navmenu-desktop-v3 .nx-item {
    display: block;
    padding: 10px 15px;
    transition: all 0.2s ease;
    background: transparent !important;
}

#navmenu-desktop-v3 .nx-item:hover {
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border-radius: 6px;
}

/* Iconos del header */
#navmenu-desktop-v3 .iconheader {
    transition: all 0.2s ease;
}

#navmenu-desktop-v3 .iconheader:hover {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 50%;
    padding: 8px;
}

/* Buscador con efecto glass */
#navmenu-desktop-v3 .buscador-box2 {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    padding: 8px 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

#navmenu-desktop-v3 .buscador-box2 input {
    background: transparent;
    border: none;
    outline: none;
}

/* Badges */
#navmenu-desktop-v3 .badge_menu_item {
    position: absolute;
    top: -4px;
    right: -2px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    background: #e53935;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    border-radius: 999px;
    pointer-events: none;
    z-index: 10;
}
#savedBadge:empty,
#totalInCart:empty {
    display: none;
}

/* Estado scrolled - más intenso el blur */
#navmenu-desktop-v3.is-scrolled {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    box-shadow: 0 6px 40px rgba(0, 0, 0, 0.1);
}

/* Efecto en el menu principal */
#navmenu-desktop-v3 .effect-menu {
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Soporte para modo oscuro (opcional) */
@media (prefers-color-scheme: dark) {
    #navmenu-desktop-v3 {
        background: rgba(0, 0, 0, 0.75);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    #navmenu-desktop-v3 .nx-panels > div,
    #navmenu-desktop-v3 .mm-nav {
        background: rgba(0, 0, 0, 0.85);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
}

@media screen and (max-width: 1023px) {
    #navmenu-desktop-v3 {
        display: none !important;
    }
}
/* =========================================================
   SOLO BLUR (DIFUMINADO) — HEADER + DROPDOWNS
   PÉGALO AL FINAL PARA QUE GANE
   ========================================================= */

/* Ajusta el nivel de blur aquí */
#navmenu-desktop-v3{
  --blur-amount: 18px;
}

/* ===== HEADER (difuminado) ===== */
#navmenu-desktop-v3,
#navmenu-desktop-v3.header-wrap,
#navmenu-desktop-v3 .header-wrap{
  /* fondo casi invisible para que se note el blur */
  background: rgba(255,255,255,.06) !important;
  backdrop-filter: blur(var(--blur-amount)) !important;
  -webkit-backdrop-filter: blur(var(--blur-amount)) !important;
}

/* (Opcional) difuminado también en la barra interna */
#navmenu-desktop-v3 .nx-bar,
#navmenu-desktop-v3 .effect-menu{
  background: rgba(255,255,255,.04) !important;
  backdrop-filter: blur(calc(var(--blur-amount) - 6px)) !important;
  -webkit-backdrop-filter: blur(calc(var(--blur-amount) - 6px)) !important;
}

/* ===== DROPDOWNS SIMPLES (Living/Bedroom/Outlet/Outdoor) ===== */
#navmenu-desktop-v3 .nx-panels [data-container]{
  background: rgba(255,255,255,.06) !important;
  backdrop-filter: blur(var(--blur-amount)) !important;
  -webkit-backdrop-filter: blur(var(--blur-amount)) !important;
}

/* ===== MEGA MENU "MOSTRAR MAS" (furniture) ===== */
/* Mantén el contenedor grande transparente (para no crear una caja rara) */
#navmenu-desktop-v3 #mm-nav-furniture{
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Aplica blur en las “tarjetas” izquierda/derecha del mega menú */
#navmenu-desktop-v3 #mm-nav-furniture .mm-left,
#navmenu-desktop-v3 #mm-nav-furniture .mm-right{
  background: rgba(255,255,255,.06) !important;
  backdrop-filter: blur(var(--blur-amount)) !important;
  -webkit-backdrop-filter: blur(var(--blur-amount)) !important;
}

/* Si .not_sticky te apagaba el blur, evita eso */
#navmenu-desktop-v3.not_sticky,
#navmenu-desktop-v3 .not_sticky{
  backdrop-filter: blur(var(--blur-amount)) !important;
  -webkit-backdrop-filter: blur(var(--blur-amount)) !important;
}

/* Fallback si no hay soporte de backdrop-filter */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #navmenu-desktop-v3,
  #navmenu-desktop-v3 .nx-panels [data-container],
  #navmenu-desktop-v3 #mm-nav-furniture .mm-left,
  #navmenu-desktop-v3 #mm-nav-furniture .mm-right{
    /* Sin blur disponible: deja un fondo leve */
    background: rgba(255,255,255,.12) !important;
  }
}
/* =========================
   BLUR REAL EN DROPDOWNS
   (fondo con alfa + backdrop-filter)
   PÉGALO AL FINAL
========================= */
#navmenu-desktop-v3{
  --dd-blur: 18px;
  --dd-bg: rgba(255,255,255,.14);     /* “superficie” para que se note el blur */
  --dd-border: rgba(255,255,255,.18);
}

/* 1) Dropdowns simples (Living/Bedroom/Outlet/Outdoor) */
#navmenu-desktop-v3 .nx-panels [data-container]{
  background: var(--dd-bg) !important;
  backdrop-filter: blur(var(--dd-blur)) !important;
  -webkit-backdrop-filter: blur(var(--dd-blur)) !important;
  border: 1px solid var(--dd-border) !important;
}

/* Quita blancos internos que se comen el blur */
#navmenu-desktop-v3 .nx-panels [data-container] .nx-list{
  background: transparent !important;
}
#navmenu-desktop-v3 .nx-panels [data-container] .nx-list li,
#navmenu-desktop-v3 .nx-panels [data-container] .nx-item{
  background: transparent !important;
}

/* 2) “Mostrar más” (mega menú): el blur debe ir en mm-left y mm-right */
#navmenu-desktop-v3 #mm-nav-furniture{
  background: transparent !important; /* el contenedor grande puede quedar transparente */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Las dos tarjetas del mega menú: aquí sí va el blur */
#navmenu-desktop-v3 #mm-nav-furniture .mm-left,
#navmenu-desktop-v3 #mm-nav-furniture .mm-right{
  background: var(--dd-bg) !important;
  backdrop-filter: blur(var(--dd-blur)) !important;
  -webkit-backdrop-filter: blur(var(--dd-blur)) !important;
  border: 1px solid var(--dd-border) !important;
}

/* Quita blancos internos del mega menú */
#navmenu-desktop-v3 #mm-nav-furniture #mm-rooms,
#navmenu-desktop-v3 #mm-nav-furniture #mm-sections,
#navmenu-desktop-v3 #mm-nav-furniture .desktop-menu-rooms,
#navmenu-desktop-v3 #mm-nav-furniture .desktop-menu-sections-item,
#navmenu-desktop-v3 #mm-nav-furniture .desktop-menu-sections-item a{
  background: transparent !important;
}

/* Hover suave sin “bloques blancos” */
#navmenu-desktop-v3 .nx-item:hover,
#navmenu-desktop-v3 .mm-room-trigger:hover,
#navmenu-desktop-v3 .desktop-menu-sections-item a:hover{
  background: rgba(255,255,255,.18) !important;
  border-radius: 10px;
}

/* =========================================================
   NAV V3 – BLUR CLEAN (desde 0)
   Respeta tu HTML / clases actuales
   ========================================================= */
   #navmenu-desktop-v3{
  --blur: 18px;
  --sat: 130%;
  --surface: rgba(255,255,255,.18);   /* clave: un poco de alfa para que se vea blur */
  --surface-strong: rgba(255,255,255,.26);
  --border: rgba(255,255,255,.22);
  --shadow: 0 12px 30px rgba(0,0,0,.10);
  --radius: 14px;
}

/* ---------- HEADER ---------- */
#navmenu-desktop-v3.header-wrap,
#navmenu-desktop-v3 .header-wrap,
#navmenu-desktop-v3{
  background: var(--surface) !important;
  backdrop-filter: blur(var(--blur)) saturate(var(--sat)) !important;
  -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--sat)) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.06) !important;
}

#navmenu-desktop-v3 .nx-bar,
#navmenu-desktop-v3 .effect-menu{
  background: rgba(255,255,255,.10) !important;
  backdrop-filter: blur(calc(var(--blur) - 6px)) saturate(var(--sat)) !important;
  -webkit-backdrop-filter: blur(calc(var(--blur) - 6px)) saturate(var(--sat)) !important;
  border-radius: var(--radius) !important;
}

/* ---------- DROPDOWNS SIMPLES: [data-container="Living Room"], etc. ---------- */
#navmenu-desktop-v3 .nx-panels [data-container]{
  background: var(--surface-strong) !important;
  backdrop-filter: blur(var(--blur)) saturate(var(--sat)) !important;
  -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--sat)) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
}

/* IMPORTANTÍSIMO: evita que hijos vuelvan a meter “blanco sólido” */
#navmenu-desktop-v3 .nx-panels [data-container] *{
  background-color: transparent !important;
}

/* Si quieres que links tengan hit-area sin pintar tarjeta blanca */
#navmenu-desktop-v3 .nx-panels [data-container] .nx-item{
  display:block;
  padding: 10px 14px;
  border-radius: 10px;
}
#navmenu-desktop-v3 .nx-panels [data-container] .nx-item:hover{
  background: rgba(255,255,255,.18) !important;
}

/* ---------- MEGA MENU: #mm-nav-furniture ---------- */
/* El contenedor grande NO necesita blur (para no hacer caja rara) */
#navmenu-desktop-v3 #mm-nav-furniture{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* El blur real va en las 2 columnas */
#navmenu-desktop-v3 #mm-nav-furniture .mm-left,
#navmenu-desktop-v3 #mm-nav-furniture .mm-right{
  background: var(--surface-strong) !important;
  backdrop-filter: blur(var(--blur)) saturate(var(--sat)) !important;
  -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--sat)) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
}

/* Quita blancos internos del mega menú */
#navmenu-desktop-v3 #mm-nav-furniture .mm-left *,
#navmenu-desktop-v3 #mm-nav-furniture .mm-right *{
  background-color: transparent !important;
}

/* Hover en mega menú */
#navmenu-desktop-v3 .mm-room-trigger,
#navmenu-desktop-v3 #mm-nav-furniture .desktop-menu-sections-item a{
  border-radius: 10px;
}
#navmenu-desktop-v3 .mm-room-trigger:hover,
#navmenu-desktop-v3 #mm-nav-furniture .desktop-menu-sections-item a:hover{
  background: rgba(255,255,255,.18) !important;
}

/* Fallback si no hay soporte blur */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #navmenu-desktop-v3,
  #navmenu-desktop-v3 .nx-panels [data-container],
  #navmenu-desktop-v3 #mm-nav-furniture .mm-left,
  #navmenu-desktop-v3 #mm-nav-furniture .mm-right{
    background: rgba(255,255,255,.88) !important;
  }
}
/* ========= BLUR ÚNICO FINAL (GANADOR) ========= */
#navmenu-desktop-v3{
  --blur: 18px;
  --sat: 130%;
  --surface: rgba(255,255,255,.18);
  --surface-strong: rgba(255,255,255,.26);
  --border: rgba(255,255,255,.22);
  --shadow: 0 12px 30px rgba(0,0,0,.10);
  --radius: 14px;

  background: var(--surface) !important;
  backdrop-filter: blur(var(--blur)) saturate(var(--sat)) !important;
  -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--sat)) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.06) !important;
}

/* barra */
#navmenu-desktop-v3 .nx-bar,
#navmenu-desktop-v3 .effect-menu{
  background: rgba(255,255,255,.10) !important;
  backdrop-filter: blur(calc(var(--blur) - 6px)) saturate(var(--sat)) !important;
  -webkit-backdrop-filter: blur(calc(var(--blur) - 6px)) saturate(var(--sat)) !important;
  border-radius: var(--radius) !important;
}

/* dropdowns simples */
#navmenu-desktop-v3 .nx-panels [data-container]{
  background: var(--surface-strong) !important;
  backdrop-filter: blur(var(--blur)) saturate(var(--sat)) !important;
  -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--sat)) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
}

/* evita fondos blancos internos */
#navmenu-desktop-v3 .nx-panels [data-container] *{
  background-color: transparent !important;
}

/* mega menu */
#navmenu-desktop-v3 #mm-nav-furniture{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#navmenu-desktop-v3 #mm-nav-furniture .mm-left,
#navmenu-desktop-v3 #mm-nav-furniture .mm-right{
  background: var(--surface-strong) !important;
  backdrop-filter: blur(var(--blur)) saturate(var(--sat)) !important;
  -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--sat)) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
}

#navmenu-desktop-v3 #mm-nav-furniture .mm-left *,
#navmenu-desktop-v3 #mm-nav-furniture .mm-right *{
  background-color: transparent !important;
}
/* =========================
   HEADER SIN BORDES REDONDOS
   (PÉGALO AL FINAL)
========================= */

/* Quita redondeo del contenedor header */
#navmenu-desktop-v3,
#navmenu-desktop-v3 .header-wrap,
#navmenu-desktop-v3 .nx-bar,
#navmenu-desktop-v3 .effect-menu{
  border-radius: 0 !important;
}

/* Quita redondeo del buscador (ahí también se ve mucho) */
#navmenu-desktop-v3 .buscador-box2,
#navmenu-desktop-v3 .buscador-box2 input{
  border-radius: 9999px !important;
}

/* Evita que parezca “tarjeta” con margen interno raro */
#navmenu-desktop-v3 .effect-menu{
  box-shadow: none !important;      /* opcional */
  margin: 0 !important;
}

/* Asegura que el header ocupe todo el ancho/alto sin “capsula” */
#navmenu-desktop-v3{
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
}

/* Si ves bordecito/outline alrededor, quítalo */
#navmenu-desktop-v3,
#navmenu-desktop-v3 .nx-bar,
#navmenu-desktop-v3 .effect-menu{
  outline: none !important;
}
/* =========================================
   HEADER – ESPACIO LATERAL (MOCKUP FIX)
   PÉGALO AL FINAL DEL CSS
   ========================================= */

/* 1) Aire contra los bordes del viewport */
#navmenu-desktop-v3{
  padding-left: 32px !important;
  padding-right: 32px !important;
}

/* En pantallas grandes, más aire (mockup se ve más premium) */
@media (min-width: 1280px){
  #navmenu-desktop-v3{
    padding-left: 56px !important;
    padding-right: 56px !important;
  }
}

/* 2) Más espacio entre el bloque izquierdo (logo/idioma) y el menú */
#navmenu-desktop-v3 .effect-menu{
  gap: 24px !important;
}

/* 3) Bloque derecho (buscador + iconos) con más separación */
#navmenu-desktop-v3 .nx-right{
  gap: 16px !important;
}

/* 4) Cada icono con hit-area más cómoda (se ve menos pegado a orillas) */
#navmenu-desktop-v3 .iconheader{
  padding: 10px !important;
}

/* 5) Buscador con un poco más de “aire” respecto a los iconos */
#navmenu-desktop-v3 .buscador-box2{
  margin-right: 12px !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}
/* =========================================
   HEADER – ESPACIADO LIMPIO (SIN FRANJAS)
   ========================================= */

/* Header principal con fondo sólido uniforme */
#navmenu-desktop-v3{
  padding-left: 32px !important;
  padding-right: 32px !important;

  /* MISMO FONDO DEL HEADER */
  background: rgba(255,255,255,0.75) !important;
  backdrop-filter: blur(18px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(130%) !important;
}

/* Pantallas grandes = más aire lateral */
@media (min-width: 1280px){
  #navmenu-desktop-v3{
    padding-left: 56px !important;
    padding-right: 56px !important;
  }
}

/* El contenedor interno NO debe sobresalir ni verse como cápsula */
#navmenu-desktop-v3 .effect-menu,
#navmenu-desktop-v3 .nx-bar{
  background: transparent !important;
  box-shadow: none !important;
}

/* Espacio correcto entre logo / idioma / menú */
#navmenu-desktop-v3 .effect-menu{
  gap: 24px !important;
}

/* Bloque derecho (search + iconos) */
#navmenu-desktop-v3 .nx-right{
  gap: 16px !important;
}

/* Iconos con área cómoda sin “manchas” */
#navmenu-desktop-v3 .iconheader{
  padding: 10px !important;
  border-radius: 50%;
}

/* Buscador integrado (sin corte visual) */
#navmenu-desktop-v3 .buscador-box2{
  margin-right: 12px !important;
  padding: 8px 16px !important;

  background: rgba(255,255,255,0.55) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}
/* =========================================
   FIX: EL HEADER DEBE CUBRIR TODO EL ANCHO
   (DESPUÉS DE LA BANDERA NO DEBE CAMBIAR COLOR)
   PÉGALO AL FINAL
   ========================================= */

/* 1) El contenedor FIXED debe tener el fondo (a todo lo ancho) */
#navmenu-desktop-v3{
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;

  background: rgba(255,255,255,0.75) !important;
  backdrop-filter: blur(18px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(130%) !important;
}

/* 2) Asegura que el wrapper también cubra el ancho (por si hay estilos heredados) */
#navmenu-desktop-v3.header-wrap{
  width: 100% !important;
  background: transparent !important; /* ya pinta el padre */
}

/* 3) Los hijos NO deben pintar fondos que “corten” el color */
#navmenu-desktop-v3 .effect-menu,
#navmenu-desktop-v3 .nx-nav,
#navmenu-desktop-v3 .nx-bar{
  background: transparent !important;
}

/* 4) Si algo está dejando un “parche” oscuro a la derecha, suele ser overflow/caja */
#navmenu-desktop-v3{
  overflow: visible !important;
}
/* =========================================
   ICONO CARRITO – HOVER IGUAL A USUARIO
   PÉGALO AL FINAL
   ========================================= */

/* Asegura que TODOS los iconos tengan la misma “cápsula” */
#navmenu-desktop-v3 .iconheader{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border-radius: 9999px !important;
  transition: background .2s ease, box-shadow .2s ease, transform .15s ease !important;
}

/* Hover consistente (igual que el usuario) */
#navmenu-desktop-v3 .iconheader:hover{
  background: rgba(255,255,255,0.6) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* --- CARRITO: el “clickable” real es el div interno --- */
#navmenu-desktop-v3 #append-shoppingcart{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 9999px !important;
  padding: 0 !important;
}

/* Haz que el div interno NO cree una forma diferente */
#navmenu-desktop-v3 #append-shoppingcart .shopping-toggle-button{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 9999px !important;
  background: transparent !important;
}

/* Hover del carrito exactamente igual */
#navmenu-desktop-v3 #append-shoppingcart:hover{
  background: rgba(255,255,255,0.6) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}
/* =========================================
   HEADER RESPONSIVE (solo V3)
   PÉGALO AL FINAL
========================================= */

/* El header fijo debe contener todo */
#navmenu-desktop-v3{
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
}

/* Contenedor interno: centrado y responsivo */
#navmenu-desktop-v3{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Creamos un layout real: 3 columnas (izq / centro / der) */
#navmenu-desktop-v3{
  padding-left: clamp(12px, 3vw, 56px) !important;
  padding-right: clamp(12px, 3vw, 56px) !important;
}

/* Agrupa el primer bloque (logo+bandera) + nav como una sola barra */
#navmenu-desktop-v3 > .effect-menu,
#navmenu-desktop-v3 > nav.nx-nav{
  flex: 0 0 auto;
}

/* El nav debe crecer y encogerse según espacio */
#navmenu-desktop-v3 > nav.nx-nav{
  flex: 1 1 auto !important;
  min-width: 0 !important; /* clave para que no empuje infinito */
}

/* Barra principal: una sola línea siempre */
#navmenu-desktop-v3 .nx-bar{
  display: flex !important;
  align-items: center !important;
  gap: clamp(2px, 0.6vw, 10px) !important;
  flex-wrap: nowrap !important;
  min-width: 0 !important;
}

/* Botones del menú */
#navmenu-desktop-v3 .nx-btn,
#navmenu-desktop-v3 .mm-toggle{
  white-space: nowrap !important;
  font-size: clamp(10px, 0.85vw, 13px) !important;
  padding: 10px clamp(6px, 0.6vw, 12px) 12px !important;
  flex-shrink: 0 !important;
}

/* La derecha (search + iconos) siempre pegada a la derecha */
#navmenu-desktop-v3 .nx-right{
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 0 0 auto !important;
}

/* Buscador: escala con la pantalla */
#navmenu-desktop-v3 .buscador-box2{
  width: clamp(140px, 14vw, 280px) !important;
  min-width: 120px !important;
  flex: 0 1 auto !important;
}

/* Pantallas compactas */
@media (max-width: 1200px){
  #navmenu-desktop-v3 .buscador-box2{
    width: clamp(110px, 12vw, 200px) !important;
  }
  #navmenu-desktop-v3 .nx-btn,
  #navmenu-desktop-v3 .mm-toggle{
    font-size: clamp(9px, 0.75vw, 11px) !important;
    padding: 10px clamp(4px, 0.4vw, 8px) 12px !important;
  }
}
/* Oculta el header viejo (bloque duplicado después del V3) */
#navmenu-desktop-v3 + .oh-flex.oh-center.nowrap.oh-separated{
  display: none !important;
}
/* =========================================================
   MOBILE: DEJAR TODO COMO ESTABA (APAGA NAV V3 EN TELÉFONOS)
   PÉGALO AL FINAL
   ========================================================= */

/* En móviles/tablet chico, ocultamos el V3 para que use el header original */
@media (max-width: 1018px){
  #navmenu-desktop-v3{
    display: none !important;
  }

  /* Si antes ocultamos el header viejo, lo reactivamos SOLO en móvil */
  #navmenu-desktop-v3 + .oh-flex.oh-center.nowrap.oh-separated{
    display: flex !important;
  }
}
/* =========================================
   FIX BOTÓN "MOSTRAR MÁS"
   ========================================= */

/* 1) Igualar comportamiento a .nx-btn */
#navmenu-desktop-v3 .mm-toggle{
  display: inline-flex !important;
  align-items: center !important;
  height: 44px !important;              /* MISMA altura visual */
  padding: 12px 8px 14px !important;    /* MISMO padding */
  white-space: nowrap !important;
  position: relative !important;
  font-weight: 600 !important;
}

/* 2) Subrayado EXACTO como los demás */
#navmenu-desktop-v3 .mm-toggle::before{
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 6px;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease;
}

/* Hover / activo */
#navmenu-desktop-v3 .mm-toggle:hover::before,
#navmenu-desktop-v3 .mm-toggle[aria-expanded="true"]::before{
  transform: scaleX(1);
}

/* 3) Flecha estable (NO empuja el layout) */
#navmenu-desktop-v3 .mm-toggle::after{
  display: inline-block;
  margin-left: 6px;
  transform-origin: center;
  transition: transform .18s ease;
}

/* Rotación limpia */
#navmenu-desktop-v3 .mm-toggle[aria-expanded="true"]::after{
  transform: rotate(180deg);
}

/* 4) Evitar “saltos” al abrir */
#navmenu-desktop-v3 .mm-toggle{
  will-change: transform;
}

/* 5) Hover sin fondo raro */
#navmenu-desktop-v3 .mm-toggle:hover{
  background: transparent !important;
}
/* =========================================================
   FIX MEGA MENU "MOSTRAR MÁS" (subcontenido)
   PÉGALO AL FINAL DEL CSS
   ========================================================= */

/* 1) NO apliques "todo transparente" al mega menú */
#navmenu-desktop-v3 .nx-panels [data-container]:not(#mm-nav-furniture) *{
  background-color: transparent !important;
}

/* 2) Asegura que el contenedor del mega menú NO quede transparente raro */
#navmenu-desktop-v3 #mm-nav-furniture{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 3) Devuelve la “tarjeta” (glass) a las dos columnas */
#navmenu-desktop-v3 #mm-nav-furniture .mm-left,
#navmenu-desktop-v3 #mm-nav-furniture .mm-right{
  background: rgba(255, 255, 255, 0.78) !important;
  backdrop-filter: blur(88px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(88px) saturate(130%) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 14px !important;
}

/* 4) IMPORTANTE: dentro del mega menú, NO borres fondos de las columnas */
#navmenu-desktop-v3 #mm-nav-furniture .mm-left *,
#navmenu-desktop-v3 #mm-nav-furniture .mm-right *{
  background-color: unset !important;
}

/* 5) Fix líneas negras: por defecto NUNCA visibles */
#navmenu-desktop-v3 #mm-nav-furniture .mm-room-trigger::after,
#navmenu-desktop-v3 #mm-nav-furniture .desktop-menu-sections-item a::after{
  transform: scaleX(0) !important;
  opacity: 1 !important;
}

/* Solo en hover/activo se muestran */
#navmenu-desktop-v3 #mm-nav-furniture .mm-room-trigger:hover::after,
#navmenu-desktop-v3 #mm-nav-furniture .mm-room-trigger[aria-expanded="true"]::after,
#navmenu-desktop-v3 #mm-nav-furniture .desktop-menu-sections-item a:hover::after,
#navmenu-desktop-v3 #mm-nav-furniture .desktop-menu-sections-item a:focus::after{
  transform: scaleX(1) !important;
}

/* 6) (Opcional) un poco de “aire” dentro para que no se vea apretado */
#navmenu-desktop-v3 #mm-nav-furniture .mm-left{ padding: 10px !important; }
#navmenu-desktop-v3 #mm-nav-furniture .mm-right{ padding: 10px !important; }


/* =========================================================
   FIX: "MOSTRAR MÁS" (mega menú) abre completo y sin cortes
   PÉGALO AL FINAL DEL CSS
   ========================================================= */

/* 1) El mega menú NO debe heredar fit-content */
#navmenu-desktop-v3 #mm-nav-furniture{
  position: absolute !important;
  top: calc(100% + 10px) !important;
  left: 0 !important;

  width: min(980px, calc(100vw - 24px)) !important; /* ancho responsivo */
  max-width: 980px !important;

  display: block !important;
  z-index: 9999 !important;

  /* evita que el panel “se corte” */
  overflow: visible !important;
}

/* 2) El layout interno SIEMPRE debe ser flex (no se parte) */
#navmenu-desktop-v3 #mm-nav-furniture .mm-layout{
  display: flex !important;
  gap: 16px !important;
  align-items: flex-start !important;
  flex-wrap: nowrap !important;   /* clave: evita que baje la columna derecha */
}

/* 3) Columna izquierda fija, derecha flexible */
#navmenu-desktop-v3 #mm-nav-furniture .mm-left{
  flex: 0 0 260px !important;
  width: 260px !important;
  min-width: 260px !important;
}

#navmenu-desktop-v3 #mm-nav-furniture .mm-right{
  flex: 1 1 auto !important;
  min-width: 0 !important;        /* clave para que el contenido no “explote” */
}

/* 4) Evita que el contenido interno fuerce el ancho y rompa el layout */
#navmenu-desktop-v3 #mm-nav-furniture #mm-rooms,
#navmenu-desktop-v3 #mm-nav-furniture #mm-sections{
  width: 100% !important;
  max-width: 100% !important;
}

/* 5) Si alguna capa del header recorta: forzamos visible */
#navmenu-desktop-v3,
#navmenu-desktop-v3 .nx-nav,
#navmenu-desktop-v3 .nx-bar,
#navmenu-desktop-v3 .nx-panels{
  overflow: visible !important;
}

/* 6) En pantallas medianas: reduce ancho para que quepa sin partirse */
@media (max-width: 1100px){
  #navmenu-desktop-v3 #mm-nav-furniture{
    width: min(860px, calc(100vw - 24px)) !important;
  }
}

/* 7) En pantallas más chicas (pero aún desktop): stack vertical en vez de “partirse raro” */
@media (max-width: 900px){
  #navmenu-desktop-v3 #mm-nav-furniture .mm-layout{
    flex-direction: column !important;
  }
  #navmenu-desktop-v3 #mm-nav-furniture .mm-left{
    width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
  }
  #navmenu-desktop-v3 #mm-nav-furniture .mm-right{
    width: 100% !important;
  }
}
#navmenu-desktop-v3 .mm-wrapper{
  position: relative !important;
}
/* =========================================================
   MEGA MENU (MOSTRAR MÁS) – UNIFICAR COLORES EN AMBAS COLUMNAS
   PÉGALO AL FINAL
   ========================================================= */

   #navmenu-desktop-v3{
  --mm-bg: rgba(255, 255, 255, 0.8);     /* sube opacidad (antes estaba muy transparente) */
  --mm-border: rgba(255, 255, 255, 0.8);
  --mm-blur: 18px;
  --mm-sat: 130%;
}

/* MISMO “glass” en izquierda y derecha */
#navmenu-desktop-v3 #mm-nav-furniture .mm-left,
#navmenu-desktop-v3 #mm-nav-furniture .mm-right{
  background: var(--mm-bg) !important;
  backdrop-filter: blur(var(--mm-blur)) saturate(var(--mm-sat)) !important;
  -webkit-backdrop-filter: blur(var(--mm-blur)) saturate(var(--mm-sat)) !important;
  border: 1px solid var(--mm-border) !important;
  border-radius: 14px !important;
}

/* Asegura que nada interno “apague” el fondo */
#navmenu-desktop-v3 #mm-nav-furniture .mm-left *,
#navmenu-desktop-v3 #mm-nav-furniture .mm-right *{
  background-color: transparent !important;
}

/* Hover suave (sin mancha blanca sólida) */
#navmenu-desktop-v3 #mm-nav-furniture .mm-room-trigger:hover,
#navmenu-desktop-v3 #mm-nav-furniture .desktop-menu-sections-item a:hover{
  background: rgba(255, 255, 255, 0.9) !important;
  border-radius: 10px;
}
/* =========================================================
   MEGA MENU (MOSTRAR MÁS) – REDUCIR TAMAÑO (ANCHO + ALTO + PADDING)
   PÉGALO AL FINAL
   ========================================================= */

/* 1) Panel más compacto */
#navmenu-desktop-v3 #mm-nav-furniture{
  width: min(760px, calc(100vw - 24px)) !important; /* antes 980px */
  max-width: 760px !important;
}

/* 2) Baja el padding de las “tarjetas” */
#navmenu-desktop-v3 #mm-nav-furniture .mm-left,
#navmenu-desktop-v3 #mm-nav-furniture .mm-right{
  padding: 6px !important;           /* antes 10px+ */
  border-radius: 12px !important;
}

/* 3) Control de altura: que no se vea gigante */
#navmenu-desktop-v3 #mm-nav-furniture .mm-left{
  max-height: calc(100vh - 160px) !important;
  overflow: auto !important;
}

#navmenu-desktop-v3 #mm-nav-furniture .mm-right{
  max-height: calc(100vh - 160px) !important;
  overflow: auto !important;
}

/* 4) Links más compactos (menos alto por fila) */
#navmenu-desktop-v3 #mm-nav-furniture .mm-room-trigger,
#navmenu-desktop-v3 #mm-nav-furniture .desktop-menu-sections-item a{
  padding: 8px 12px 10px !important;   /* antes 10/12/14 */
  line-height: 1.2 !important;
}

/* 5) La columna izquierda un poco más delgada */
#navmenu-desktop-v3 #mm-nav-furniture .mm-left{
  flex: 0 0 250px !important;
  width: 250px !important;
  min-width: 250px !important;
}
/* =========================================================
   FIX: MEGA MENU NO BLOQUEA OTROS BOTONES CUANDO ESTÁ CERRADO
   PÉGALO AL FINAL
   ========================================================= */

/* Por defecto: cerrado => no visible y NO captura clicks */
#navmenu-desktop-v3 #mm-nav-furniture[aria-hidden="true"]{
  display: none !important;
  pointer-events: none !important;
}

/* Abierto => visible y sí captura clicks */
#navmenu-desktop-v3 #mm-nav-furniture[aria-hidden="false"]{
  display: block !important;
  pointer-events: auto !important;
}

/* BONUS: evita que el wrapper haga una “capa” rara encima */
#navmenu-desktop-v3 .mm-wrapper{
  position: relative !important;
  z-index: 1 !important;
}

/* El panel arriba del resto, pero solo cuando está abierto */
#navmenu-desktop-v3 #mm-nav-furniture{
  z-index: 9999 !important;
}
/* =========================================
   HEADER CON ALTURA EQUILIBRADA (NO GROTESCO)
   PÉGALO AL FINAL (REEMPLAZA EL ANTERIOR)
   ========================================= */

/* 1) Padding moderado en el contenedor principal */
#navmenu-desktop-v3 {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

/* 2) Espacio interno de la barra - sutil */
#navmenu-desktop-v3 .nx-bar {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* 3) Botones con altura moderada */
#navmenu-desktop-v3 .nx-btn,
#navmenu-desktop-v3 .mm-toggle {
  height: 46px !important;
  padding: 13px 8px 15px !important;
}

/* 4) Buscador proporcional */
#navmenu-desktop-v3 .buscador-box2 {
  height: 46px !important;
  padding: 9px 16px !important;
}

/* 5) Iconos balanceados */
#navmenu-desktop-v3 .iconheader {
  width: 44px !important;
  height: 44px !important;
}

/* 6) Contenedor interno con espacio ligero */
#navmenu-desktop-v3 .effect-menu {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* 7) En pantallas grandes: un toque más de espacio (opcional) */
@media (min-width: 1440px) {
  #navmenu-desktop-v3 {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }
}
/* =========================================
   ALINEAR "MOSTRAR MAS" CON ICONOS DERECHA
   PÉGALO AL FINAL
   ========================================= */

/* 1) Asegurar que toda la barra esté alineada verticalmente al centro */
#navmenu-desktop-v3 .nx-bar {
  align-items: center !important;
  display: flex !important;
}

/* 2) El botón "MOSTRAR MAS" debe tener la misma altura que los iconos */
#navmenu-desktop-v3 .mm-toggle {
  height: 44px !important;
  padding: 12px 8px 14px !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* 3) Todos los botones del menú con la misma altura */
#navmenu-desktop-v3 .nx-btn {
  height: 44px !important;
  padding: 12px 8px 14px !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* 4) El bloque derecho (iconos) también centrado */
#navmenu-desktop-v3 .nx-right {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

/* 5) Buscador alineado */
#navmenu-desktop-v3 .buscador-box2 {
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
}

/* 6) Iconos con altura consistente */
#navmenu-desktop-v3 .iconheader {
  width: 44px !important;
  height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 7) La bandera también centrada */
#navmenu-desktop-v3 #imgLang {
  display: inline-flex !important;
  align-items: center !important;
  height: 44px !important;
}

/* 8) Eliminar cualquier margen/padding que desalinee */
#navmenu-desktop-v3 .mm-toggle,
#navmenu-desktop-v3 .nx-btn {
  margin: 0 !important;
  vertical-align: middle !important;
}
/* ALINEACIÓN PERFECTA (todas las opciones a la misma línea base) */
#navmenu-desktop-v3 .nx-bar > * {
  align-self: center !important;
}

#navmenu-desktop-v3 .nx-btn,
#navmenu-desktop-v3 .mm-toggle,
#navmenu-desktop-v3 .buscador-box2,
#navmenu-desktop-v3 .iconheader,
#navmenu-desktop-v3 #imgLang {
  line-height: 44px !important;
}
/* =========================================
   TOOLTIP NUBE – SIN PICO + HOVER INVERTIDO
   ========================================= */

   #navmenu-desktop-v3 .tooltip_bottom{
  position: relative !important;
}

/* Bubble base */
#navmenu-desktop-v3 .tooltip_bottom[data-title]::after{
  content: attr(data-title);
  position: absolute;
  left: 50%;
  top: calc(100% + 10px);
  transform: translateX(-50%) translateY(-4px);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;

  /* Estado normal */
  background: #111;              /* negro */
  color: #fff;                   /* texto blanco */
  padding: 10px 16px;
  border-radius: 9999px;
  border: 1px solid rgba(0,0,0,.15);

  font-size: 13px;
  font-weight: 500;
  line-height: 1;

  transition:
    opacity .16s ease,
    transform .16s ease,
    background .18s ease,
    color .18s ease;
  
  z-index: 999999;
}

/* Mostrar tooltip */
#navmenu-desktop-v3 .tooltip_bottom:hover::after,
#navmenu-desktop-v3 .tooltip_bottom:focus-visible::after{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Hover invertido (negro → blanco) */
#navmenu-desktop-v3 .tooltip_bottom:hover::after{
  background: #111 !important;              /* blanco */
  color: #fff !important;                   /* texto negro */
  border: 1px solid rgba(0,0,0,.08) !important;
}

/* Quita COMPLETAMENTE el pico si existía antes */
#navmenu-desktop-v3 .tooltip_bottom::before{
  display: none !important;
}

/* En pantallas táctiles no mostramos tooltip */
@media (hover: none){
  #navmenu-desktop-v3 .tooltip_bottom[data-title]::after{
    display: none !important;
  }
}
/* =========================================================
   HEADER (V3) – FORZAR TIPOGRAFÍA GalanoGrotesqueLight
   PÉGALO AL FINAL DEL CSS
   ========================================================= */

/* Variable de fuente (ahora sí activa) */
:root{
  --nx-font: "GalanoGrotesqueLight", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Aplica a TODO el header */
#navmenu-desktop-v3,
#navmenu-desktop-v3 *{
  font-family: var(--nx-font) !important;
}

/* Ajuste fino: si quieres que NO se vea tan “bold” */
#navmenu-desktop-v3 .nx-btn,
#navmenu-desktop-v3 .mm-toggle,
#navmenu-desktop-v3 .nx-item,
#navmenu-desktop-v3 .mm-room-trigger,
#navmenu-desktop-v3 .desktop-menu-link,
#navmenu-desktop-v3 #mm-sections .desktop-menu-sections-item a{
  font-weight: 300 !important;  /* GalanoGrotesqueLight = 300 */
  letter-spacing: .02em;        /* opcional para look más “premium” */
}
/* =========================================================
   FIX: SUBMENU DERECHA (MOSTRAR MÁS) NO TRANSPARENTE
   (cuando hover en "cocina" abre el 2do submenu)
   PÉGALO AL FINAL
   ========================================================= */

   #navmenu-desktop-v3 #mm-nav-furniture .mm-left,
#navmenu-desktop-v3 #mm-nav-furniture .mm-right,
#navmenu-desktop-v3 #mm-nav-furniture #mm-rooms,
#navmenu-desktop-v3 #mm-nav-furniture #mm-sections{
  background: rgba(255,255,255,0.96) !important;
backdrop-filter: blur(18px) saturate(130%) !important;
-webkit-backdrop-filter: blur(18px) saturate(130%) !important;
}

/* Asegura que el contenido se vea siempre (no “apagado”) */
#navmenu-desktop-v3 #mm-nav-furniture .desktop-menu-sections-item,
#navmenu-desktop-v3 #mm-nav-furniture .desktop-menu-sections-item a{
  color: #111 !important;
  opacity: 1 !important;
}

/* Evita que tu regla de “todo transparente” mate el fondo/links */
#navmenu-desktop-v3 #mm-nav-furniture .mm-left *,
#navmenu-desktop-v3 #mm-nav-furniture .mm-right *{
  background-color: transparent !important;
}

/* Pero al hover sí pinta suave (opcional) */
#navmenu-desktop-v3 #mm-nav-furniture .mm-room-trigger:hover,
#navmenu-desktop-v3 #mm-nav-furniture .desktop-menu-sections-item a:hover{
  background: rgba(0,0,0,0.05) !important;
  border-radius: 10px;
}
/* =========================================================
   FIX FINAL: CONTRASTE REAL EN TODOS LOS DROPDOWNS (V3)
   PÉGALO AL FINAL DEL ÚLTIMO <style>
   ========================================================= */

/* Dropdowns simples: Living / Bedroom / Dining / Outdoor / Mattresses */
#navmenu-desktop-v3 .nx-panels > div[data-container]:not(#mm-nav-furniture){
  background: rgba(255,255,255,0.96) !important;
  backdrop-filter: blur(18px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(130%) !important;
  box-shadow: 0 10px 35px rgba(0,0,0,0.12) !important;
  border-radius: 18px !important;
}

/* Mega menú "Mostrar más": mismas dos columnas */
#navmenu-desktop-v3 #mm-nav-furniture .mm-left,
#navmenu-desktop-v3 #mm-nav-furniture .mm-right{
  background: rgba(255,255,255,0.96) !important;
  backdrop-filter: blur(18px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(130%) !important;
  box-shadow: 0 10px 35px rgba(0,0,0,0.12) !important;
  border-radius: 18px !important;
}

/* Asegura lectura */
#navmenu-desktop-v3 .nx-panels > div[data-container] .nx-item,
#navmenu-desktop-v3 #mm-nav-furniture .desktop-menu-sections-item a,
#navmenu-desktop-v3 #mm-nav-furniture .mm-room-trigger{
  color: #111 !important;
  opacity: 1 !important;
}

/* =========================================
   RESPONSIVE DESKTOP: iconos siempre visibles
   ========================================= */

/* Ocultar los dos botones más largos cuando no hay espacio */
@media (max-width: 1200px) {
  #navmenu-desktop-v3 a.nx-btn[href="/fastdelivery"],
  #navmenu-desktop-v3 a.nx-btn[href="/stock"] {
    display: none !important;
  }
}

/* Overflow items hidden por JS */
#navmenu-desktop-v3 .nx-btn[data-overflow="hidden"] {
  display: none !important;
}

/* Botón overflow "+N" */
#nx-overflow-btn {
  display: none;
  position: relative;
  font-size: clamp(10px, 0.85vw, 13px) !important;
  padding: 10px clamp(6px, 0.6vw, 12px) 12px !important;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-weight: 600;
  flex-shrink: 0;
}
#nx-overflow-btn.visible { display: block; }

#nx-overflow-panel {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
  min-width: 160px;
  z-index: 999;
  padding: 6px 0;
}
#nx-overflow-panel.open { display: block; }
#nx-overflow-panel .nx-btn {
  display: block !important;
  width: 100%;
  text-align: left;
  padding: 10px 18px !important;
  font-size: 12px !important;
  border-radius: 0;
}