/*
 * Menú principal de la cabecera del Theme Builder (módulo de menú de Divi).
 * El marcado extra (iconos, subtítulos, tarjeta, buscador) lo genera
 * isthari_menu_item_output() a partir de las clases y la descripción de cada
 * ítem. Solo var(--…) del tema, nunca hex.
 */

.et-l--header .et_pb_menu {
    --ihn-mm-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

body #page-container .et-l--header .et_pb_menu ul li a,
body #page-container .et-l--header .et_pb_menu .ihn-search-form input {
    font-family: 'Outfit', system-ui, sans-serif;
}

body #page-container .et-l--header .et_pb_menu .ihn-mm-ico svg,
body #page-container .et-l--header .et_pb_menu .ihn-mm-chev svg,
body #page-container .et-l--header .et_pb_menu .ihn-mm-btn svg,
body #page-container .et-l--header .et_pb_menu li.ihn-cta svg,
body #page-container .et-l--header .et_pb_menu .ihn-search-btn svg {
    display: block;
    flex: none;
}

/* ---------- Escritorio ---------- */
@media (min-width: 981px) {
    /* El panel de productos se centra en la fila de la cabecera: todo lo que
       hay entre la fila y el <li> queda sin posicionar. */
    .et-l--header .et_pb_row {
        position: relative;
    }

    /* La fila es 100% sin márgenes: por debajo de 1296px el logo tocaba el borde. */
    body #page-container .et-l--header .et_pb_row {
        box-sizing: border-box;
        max-width: 1360px;
        padding-left: 32px;
        padding-right: 32px;
    }

    .et-l--header .et_pb_row .et_pb_column,
    .et-l--header .et_pb_menu,
    .et-l--header .et_pb_menu .et_pb_menu_inner_container,
    .et-l--header .et_pb_menu .et_pb_menu__wrap,
    .et-l--header .et_pb_menu .et_pb_menu__menu,
    .et-l--header .et_pb_menu .et-menu-nav,
    .et-l--header .et_pb_menu .et-menu,
    body #page-container .et-l--header .et_pb_menu .et-menu > li.ihn-mm {
        position: static;
    }

    .et-l--header .et_pb_menu .et_pb_menu_inner_container {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
    }

    .et-l--header .et_pb_menu .et_pb_menu__logo-wrap {
        flex: none;
    }

    .et-l--header .et_pb_menu .et_pb_menu__wrap,
    .et-l--header .et_pb_menu .et_pb_menu__menu,
    .et-l--header .et_pb_menu .et-menu-nav {
        flex: 1 1 auto;
        display: flex;
        min-width: 0;
    }

    body #page-container .et-l--header .et_pb_menu .et-menu-nav > ul.et-menu {
        display: flex;
        flex: 1 1 auto;
        flex-wrap: nowrap;
        align-items: center;
        margin: 0;
    }

    body #page-container .et-l--header .et_pb_menu .et-menu > li {
        display: flex;
        align-items: center;
        position: relative;
        padding: 18px 2px;
    }

    /* Los enlaces quedan centrados; buscador, CTA e idioma a la derecha. */
    body #page-container .et-l--header .et_pb_menu .et-menu > li:first-child,
    body #page-container .et-l--header .et_pb_menu .et-menu > li.ihn-search {
        margin-left: auto;
    }

    body #page-container .et-l--header .et_pb_menu .et-menu > li > a {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 9px 16px;
        border-radius: 8px;
        font-size: 15px;
        font-weight: 500;
        line-height: 22px;
        color: var(--text-primary) !important;
        opacity: 1;
        transition: background-color .2s ease, color .2s ease;
    }

    body #page-container .et-l--header .et_pb_menu .et-menu > li.menu-item-has-children > a:first-child:after {
        content: '';
        position: static;
        transform: none;
        width: 14px;
        height: 14px;
        background: currentColor;
        -webkit-mask: var(--ihn-mm-chev) center / contain no-repeat;
        mask: var(--ihn-mm-chev) center / contain no-repeat;
        transition: transform .2s ease;
    }

    body #page-container .et-l--header .et_pb_menu .et-menu > li.menu-item-has-children:hover > a,
    body #page-container .et-l--header .et_pb_menu .et-menu > li.menu-item-has-children.et-hover > a,
    body #page-container .et-l--header .et_pb_menu .et-menu > li.menu-item-has-children:focus-within > a {
        background-color: var(--primary);
        color: var(--button-primary-text) !important;
    }

    body #page-container .et-l--header .et_pb_menu .et-menu > li.menu-item-has-children:hover > a:after,
    body #page-container .et-l--header .et_pb_menu .et-menu > li.menu-item-has-children.et-hover > a:after,
    body #page-container .et-l--header .et_pb_menu .et-menu > li.menu-item-has-children:focus-within > a:after {
        transform: rotate(180deg);
    }

    body #page-container .et-l--header .et_pb_menu .et-menu > li:not(.menu-item-has-children):not(.ihn-cta) > a:hover {
        background-color: var(--menu-hover-bg);
    }

    /* Desplegables sencillos */
    body #page-container .et-l--header .et_pb_menu .et-menu li ul.sub-menu {
        top: 100%;
        width: 300px;
        padding: 8px;
        border: 1px solid var(--border-default);
        border-radius: 14px;
        background-color: var(--header-bg) !important;
        box-shadow: 0 24px 48px var(--modal-overlay);
    }

    /* Puente para no perder el hover entre el ítem y el desplegable. */
    body #page-container .et-l--header .et_pb_menu .et-menu > li > ul.sub-menu:before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 100%;
        height: 20px;
    }

    body #page-container .et-l--header .et_pb_menu .et-menu li li {
        display: block;
        width: 100%;
        padding: 0;
    }

    body #page-container .et-l--header .et_pb_menu .et-menu li li a {
        width: auto;
        padding: 10px 12px;
        border-radius: 8px;
        font-size: 15px;
        line-height: 1.4;
        color: var(--text-primary) !important;
        opacity: 1;
    }

    body #page-container .et-l--header .et_pb_menu .et-menu li li a:hover {
        background-color: var(--menu-hover-bg) !important;
    }

    body #page-container .et-l--header .et_pb_menu .ihn-mm-txt {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-width: 0;
    }

    body #page-container .et-l--header .et_pb_menu .ihn-mm-title {
        font-size: 15px;
        font-weight: 600;
        color: var(--text-primary);
    }

    body #page-container .et-l--header .et_pb_menu .ihn-mm-sub {
        font-size: 14px;
        font-weight: 500;
        color: var(--primary);
    }

    body #page-container .et-l--header .et_pb_menu .ihn-mm-desc {
        margin-top: 2px;
        font-size: 13.5px;
        line-height: 1.4;
        color: var(--text-secondary);
    }

    /* Panel de productos: dos columnas de cuatro y la tarjeta a la derecha. */
    body #page-container .et-l--header .et_pb_menu .et-menu > li.ihn-mm > ul.sub-menu {
        display: grid;
        grid-template-columns: 1fr 1fr 300px;
        grid-template-rows: repeat(4, auto);
        grid-auto-flow: column;
        width: min(1000px, calc(100vw - 48px));
        left: 50% !important;
        top: 100%;
        transform: translateX(-50%);
        padding: 20px 0;
    }

    body #page-container .et-l--header .et_pb_menu .et-menu > li.ihn-mm > ul > li {
        padding: 0 16px;
        border-right: 1px solid var(--border-subtle);
    }

    body #page-container .et-l--header .et_pb_menu .et-menu > li.ihn-mm > ul > li > a {
        display: flex;
        align-items: flex-start;
        gap: 16px;
        padding: 14px;
        border-radius: 10px;
    }

    body #page-container .et-l--header .et_pb_menu .ihn-mm-ico {
        display: grid;
        place-items: center;
        flex: none;
        width: 44px;
        height: 44px;
        border-radius: 10px;
        background: color-mix(in srgb, var(--primary) 16%, transparent);
        color: var(--primary);
    }

    body #page-container .et-l--header .et_pb_menu .ihn-mm-ico svg {
        width: 22px;
        height: 22px;
    }

    body #page-container .et-l--header .et_pb_menu .ihn-mm-chev {
        align-self: center;
        color: var(--text-disabled);
        transition: color .2s ease, transform .2s ease;
    }

    body #page-container .et-l--header .et_pb_menu .ihn-mm-chev svg {
        width: 16px;
        height: 16px;
    }

    body #page-container .et-l--header .et_pb_menu li li a:hover .ihn-mm-chev {
        color: var(--text-primary);
        transform: translateX(2px);
    }

    body #page-container .et-l--header .et_pb_menu .et-menu > li.ihn-mm > ul > li.ihn-mm-card {
        grid-column: 3;
        grid-row: 1 / span 4;
        padding: 4px 24px;
        border-right: 0;
    }

    body #page-container .et-l--header .et_pb_menu .et-menu > li.ihn-mm > ul > li.ihn-mm-card > a {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        height: 100%;
        padding: 0;
        background: none !important;
    }

    body #page-container .et-l--header .et_pb_menu .ihn-mm-card-img {
        display: block;
        width: 100%;
        aspect-ratio: 16 / 9;
        margin-bottom: 24px;
        border-radius: 8px;
        background: var(--surface-card) center / cover no-repeat;
    }

    body #page-container .et-l--header .et_pb_menu .ihn-mm-card .ihn-mm-title {
        font-size: 20px;
    }

    body #page-container .et-l--header .et_pb_menu .ihn-mm-card .ihn-mm-desc {
        margin-top: 6px;
        font-size: 14.5px;
    }

    body #page-container .et-l--header .et_pb_menu .ihn-mm-btn {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin-top: 24px;
        padding: 11px 22px;
        border-radius: 999px;
        background: var(--surface-elevated);
        font-size: 15px;
        font-weight: 500;
        color: var(--text-primary);
        transition: background-color .2s ease;
    }

    body #page-container .et-l--header .et_pb_menu .ihn-mm-card a:hover .ihn-mm-btn {
        background: var(--menu-pressed-bg);
    }

    body #page-container .et-l--header .et_pb_menu .ihn-mm-btn svg {
        width: 16px;
        height: 16px;
    }

    /* Buscador */
    body #page-container .et-l--header .et_pb_menu .ihn-search-btn {
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: none;
        color: var(--text-primary);
        cursor: pointer;
        transition: background-color .2s ease;
    }

    body #page-container .et-l--header .et_pb_menu .ihn-search-btn:hover,
    body #page-container .et-l--header .et_pb_menu li.ihn-open .ihn-search-btn {
        background: var(--menu-hover-bg);
    }

    body #page-container .et-l--header .et_pb_menu .ihn-search-btn svg {
        width: 20px;
        height: 20px;
    }

    body #page-container .et-l--header .et_pb_menu .ihn-search-form {
        display: none;
        position: absolute;
        top: calc(100% - 8px);
        right: 0;
        z-index: 10000;
    }

    body #page-container .et-l--header .et_pb_menu li.ihn-open .ihn-search-form {
        display: block;
    }

    body #page-container .et-l--header .et_pb_menu .ihn-search-form input {
        width: 300px;
        padding: 11px 16px;
        border: 1px solid var(--input-border);
        border-radius: 10px;
        background: var(--input-bg);
        font-size: 15px;
        color: var(--input-text);
        box-shadow: 0 24px 48px var(--modal-overlay);
    }

    body #page-container .et-l--header .et_pb_menu .ihn-search-form input:focus {
        border-color: var(--input-border-focus);
        outline: none;
    }

    /* Botón principal */
    body #page-container .et-l--header .et_pb_menu .et-menu > li.ihn-cta {
        padding-left: 14px;
    }

    body #page-container .et-l--header .et_pb_menu .et-menu > li.ihn-cta > a {
        gap: 10px;
        padding: 11px 22px;
        border-radius: 999px;
        background-color: var(--button-primary-bg);
        color: var(--button-primary-text) !important;
    }

    body #page-container .et-l--header .et_pb_menu .et-menu > li.ihn-cta > a:hover {
        background-color: var(--button-primary-hover);
    }

    body #page-container .et-l--header .et_pb_menu .et-menu > li.ihn-cta > a:active {
        background-color: var(--button-primary-active);
    }

    body #page-container .et-l--header .et_pb_menu .et-menu > li.ihn-cta svg {
        width: 18px;
        height: 18px;
    }

    /* Selector de idioma: solo la bandera. */
    body #page-container .et-l--header .et_pb_menu .et-menu > li.pll-parent-menu-item > a > span {
        display: none;
    }

    body #page-container .et-l--header .et_pb_menu .et-menu > li.pll-parent-menu-item > ul.sub-menu {
        right: 0;
        left: auto;
        width: 180px;
    }

    /* Árabe (body.rtl): los desplegables anclados al borde derecho se abren hacia dentro por la izquierda. */
    body.rtl #page-container .et-l--header .et_pb_menu .et-menu > li:first-child,
    body.rtl #page-container .et-l--header .et_pb_menu .et-menu > li.ihn-search {
        margin-left: 0;
        margin-right: auto;
    }

    body.rtl #page-container .et-l--header .et_pb_menu .et-menu > li.pll-parent-menu-item > ul.sub-menu,
    body.rtl #page-container .et-l--header .et_pb_menu .ihn-search-form {
        right: auto;
        left: 0;
    }

    body.rtl #page-container .et-l--header .et_pb_menu .et-menu > li.ihn-mm > ul > li:not(.ihn-mm-card) {
        border-right: 0;
        border-left: 1px solid var(--border-subtle);
    }

    body.rtl #page-container .et-l--header .et_pb_menu .et-menu > li.ihn-cta {
        padding-left: 0;
        padding-right: 14px;
    }

    body.rtl #page-container .et-l--header .et_pb_menu .et-menu > li.ihn-cta svg {
        transform: scaleX(-1);
    }
}

/* Portátiles pequeños: el menú completo no cabe con los espaciados de 1440. */
@media (min-width: 981px) and (max-width: 1279px) {
    .et-l--header .et_pb_menu .et_pb_menu__logo img {
        max-width: 130px;
    }

    body #page-container .et-l--header .et_pb_menu .et-menu > li {
        padding-left: 0;
        padding-right: 0;
    }

    body #page-container .et-l--header .et_pb_menu .et-menu > li > a {
        gap: 6px;
        padding: 8px 10px;
        font-size: 14px;
    }

    body #page-container .et-l--header .et_pb_menu .et-menu > li.ihn-cta {
        padding-left: 8px;
    }

    body #page-container .et-l--header .et_pb_menu .et-menu > li.ihn-cta > a {
        padding: 10px 16px;
    }
}

/* ---------- Móvil (menú clonado por Divi) ---------- */
@media (max-width: 980px) {
    body #page-container .et-l--header .et_pb_menu .et_mobile_menu {
        border-top-color: var(--primary) !important;
    }

    body #page-container .et-l--header .et_pb_menu .et_mobile_menu li a {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 15px;
        opacity: 1;
    }

    body #page-container .et-l--header .et_pb_menu .ihn-mm-txt {
        display: flex;
        flex-direction: column;
    }

    body #page-container .et-l--header .et_pb_menu .ihn-mm-ico {
        display: grid;
        place-items: center;
        flex: none;
        width: 32px;
        height: 32px;
        border-radius: 8px;
        background: color-mix(in srgb, var(--primary) 16%, transparent);
        color: var(--primary);
    }

    body #page-container .et-l--header .et_pb_menu .ihn-mm-ico svg {
        width: 18px;
        height: 18px;
    }

    body #page-container .et-l--header .et_pb_menu .ihn-mm-sub {
        font-size: 13px;
        color: var(--primary);
    }

    body #page-container .et-l--header .et_pb_menu .ihn-mm-desc,
    body #page-container .et-l--header .et_pb_menu .ihn-mm-chev,
    body #page-container .et-l--header .et_pb_menu li.ihn-mm-card,
    body #page-container .et-l--header .et_pb_menu .ihn-search-btn {
        display: none;
    }

    body #page-container .et-l--header .et_pb_menu .ihn-search-form {
        padding: 10px 5%;
    }

    body #page-container .et-l--header .et_pb_menu .ihn-search-form input {
        width: 100%;
        padding: 10px 14px;
        border: 1px solid var(--input-border);
        border-radius: 10px;
        background: var(--input-bg);
        color: var(--input-text);
    }

    body #page-container .et-l--header .et_pb_menu li.ihn-cta a svg {
        width: 16px;
        height: 16px;
    }
}