/* ===================================================================
   MK Mega Menu — Click Triggered + Wide Panel + Imagen lateral
   Cubre header clásico (.main-navigation-ul) y Header Builder (.mkhb-navigation-ul)
   =================================================================== */

/* ── 1. Cancelar apertura por hover (dropdownOpen) en nivel 0 ──────── */
/* .dropdownJavascript se añade AL ul (no a un ancestro), por eso va junto */
.main-navigation-ul.dropdownJavascript  > li.dropdownOpen > ul.sub-menu,
.mkhb-navigation-ul.dropdownJavascript > li.dropdownOpen > ul.sub-menu {
    display: none !important;
}

/* ── 2. Animación compartida ────────────────────────────────────────── */
@keyframes mkMegaFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── 3. Dropdowns normales (pocos hijos): abre con click ────────────── */
.mk-main-navigation .main-navigation-ul > li.mk-click-open:not(.mk-wide-dropdown) > ul.sub-menu,
.mkhb-navigation    .mkhb-navigation-ul > li.mk-click-open:not(.mk-wide-dropdown) > ul.sub-menu {
    display:   block !important;
    animation: mkMegaFadeIn 0.15s ease;
}

/* ═══════════════════════════════════════════════════════════════════
   PANEL ANCHO (mk-wide-dropdown) — aplica a ambos sistemas de header
   ═══════════════════════════════════════════════════════════════════ */

/* El LI no crea contexto de posicionamiento */
.main-navigation-ul  > li.mk-wide-dropdown,
.mkhb-navigation-ul  > li.mk-wide-dropdown {
    position: static;
}

/* Panel base: posición absoluta + columnas */
.mk-main-navigation .main-navigation-ul > li.mk-wide-dropdown.mk-click-open > ul.sub-menu,
.mkhb-navigation    .mkhb-navigation-ul > li.mk-wide-dropdown.mk-click-open > ul.sub-menu {
    display:    block !important;
    position:   absolute !important;
    top:        100% !important;
    left:       0 !important;
    right:      0 !important;
    width:      100% !important;
    min-width:  0 !important;
    box-sizing: border-box;
    padding:    20px 30px 24px !important;
    columns:    4;
    column-gap: 10px;
    animation:  mkMegaFadeIn 0.18s ease;
    z-index:    9999;
}

/* Con imagen lateral: reducir a 3 columnas y reservar espacio */
.mk-main-navigation .main-navigation-ul > li.mk-wide-dropdown.mk-click-open > ul.sub-menu.has-mega-image,
.mkhb-navigation    .mkhb-navigation-ul > li.mk-wide-dropdown.mk-click-open > ul.sub-menu.has-mega-image {
    columns:       3 !important;
    padding-right: 250px !important;
}

/* Cada brand: bloque en su columna, no se parte */
.mk-main-navigation li.mk-wide-dropdown.mk-click-open > ul.sub-menu > li.menu-item,
.mkhb-navigation    li.mk-wide-dropdown.mk-click-open > ul.sub-menu > li.menu-item {
    display:                     block !important;
    float:                       none  !important;
    width:                       auto  !important;
    break-inside:                avoid;
    -webkit-column-break-inside: avoid;
    padding:    0 !important;
    border:     none !important;
    background: transparent !important;
    box-shadow: none !important;
    position:   relative;
}

/* Ocultar flecha de sub-nivel */
.mk-main-navigation li.mk-wide-dropdown.mk-click-open .menu-sub-level-arrow,
.mkhb-navigation    li.mk-wide-dropdown.mk-click-open .menu-sub-level-arrow {
    display: none !important;
}

/* Enlace brand nivel 1 */
.mk-main-navigation li.mk-wide-dropdown.mk-click-open > ul.sub-menu > li.menu-item > a.menu-item-link,
.mkhb-navigation    li.mk-wide-dropdown.mk-click-open > ul.sub-menu > li.menu-item > a.menu-item-link {
    display:       block !important;
    width:         auto  !important;
    padding:       6px 8px 6px 0 !important;
    font-size:     13px;
    font-weight:   600;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

/* Sub-marcas nivel 2 (ARMATUREN): siempre visibles en el panel */
.mk-main-navigation li.mk-wide-dropdown.mk-click-open > ul.sub-menu > li.menu-item > ul.sub-menu,
.mkhb-navigation    li.mk-wide-dropdown.mk-click-open > ul.sub-menu > li.menu-item > ul.sub-menu {
    display:    block !important;
    position:   static !important;
    visibility: visible !important;
    opacity:    1 !important;
    background: transparent !important;
    border:     none !important;
    box-shadow: none !important;
    padding:    0 0 8px 14px !important;
    margin:     0 !important;
    width:      auto !important;
    min-width:  0 !important;
    max-width:  none !important;
}

.mk-main-navigation li.mk-wide-dropdown.mk-click-open > ul.sub-menu > li.menu-item > ul.sub-menu > li.menu-item > a.menu-item-link,
.mkhb-navigation    li.mk-wide-dropdown.mk-click-open > ul.sub-menu > li.menu-item > ul.sub-menu > li.menu-item > a.menu-item-link {
    display:     block !important;
    width:       auto  !important;
    padding:     3px 0 !important;
    font-size:   12px;
    font-weight: 400;
    white-space: nowrap;
}

/* ── Imagen lateral ─────────────────────────────────────────────────── */
.mk-main-navigation li.mk-wide-dropdown.mk-click-open > ul.sub-menu > li.mk-mega-image-item,
.mkhb-navigation    li.mk-wide-dropdown.mk-click-open > ul.sub-menu > li.mk-mega-image-item {
    position:   absolute !important;
    top:        20px;
    right:      30px;
    width:      200px;
    float:      none !important;
    padding:    0 !important;
    border:     none !important;
    background: transparent !important;
    box-shadow: none !important;
    break-inside: auto;
}

.mk-main-navigation li.mk-wide-dropdown.mk-click-open > ul.sub-menu > li.mk-mega-image-item img,
.mkhb-navigation    li.mk-wide-dropdown.mk-click-open > ul.sub-menu > li.mk-mega-image-item img {
    width:         100%;
    height:        auto;
    display:       block;
    border-radius: 6px;
    object-fit:    cover;
}