/**
 * Nissei - Cabecera, igual en todas las paginas.
 * Se carga desde Magento_Theme/layout/default.xml. La version compacta solo aplica por debajo de 768px.
 */

/*
 * Capa oscura del menu al pasar el mouse (MageBig_SmartMenu): el modulo le da
 * height: 100000% (~30000px). Como el body tiene overflow-x: hidden, tiene scroll propio,
 * y la capa le agrega una segunda barra que corre la pagina al abrir y cerrar el menu.
 * Con el alto de la pantalla sigue tapando todo lo visible.
 * El HTML Head del admin le pone height: 10000% !important al del menu vertical.
 */
body .horizontal-menu .level0.level-top.parent:hover::after,
body .vertical-menu:hover::after {
    height: 100vh !important;
}

/*
 * Banners, categorias y capa oscura al ras de la barra de menu (48px).
 * - El HTML Head del admin sube los banners 3px (margin-top: -3px) por encima de la barra.
 * - El menu vertical mide 50px, asi que su lista y su capa empezaban 2px por debajo.
 * - La capa de los items del menu horizontal empezaba 1px por debajo (100% + 9px).
 * - Lista de categorias sin el padding de 15px arriba y abajo del tema.
 */
@media (min-width: 768px) {
    .cms-index-index .banner-slider-top {
        margin-top: 0;
    }
    body.layout05.cms-index-index .vertical-menu .navigation {
        margin-top: -2px;
    }
    body .vertical-menu .navigation {
        padding: 0;
    }
    /* Home: sin la linea negra del tema arriba de "Comprar por departamento" */
    body.layout05.cms-index-index .vertical-menu::before {
        background-color: transparent;
    }
    /* Categorias un poco mas juntas para que entren las 15 en el alto fijo de la lista */
    body.layout05 .vertical-menu .navigation .level0.level-top > a.level-top {
        padding: 8.7px 15px;
    }
    body .horizontal-menu .level0.level-top.parent:hover::after {
        top: calc(100% + 8px);
    }
    body .vertical-menu:hover::after {
        top: calc(100% - 2px);
    }
}
@media (max-width: 767px) {
    /* Bloque de promociones superior vacio: al ser inline-block genera una linea de ~22px */
    .widgetplus-block:not(:has(*)) {
        display: none;
    }
    .page-header .header-top-inner {
        display: none;
    }

    /* Logo e iconos mas chicos */
    .header-main-content .logo img {
        height: 42px;
        width: auto;
    }
    .header-main-content .icon-top-mobile .mbi,
    .header-main-content .icon-top-mobile .mbi:before {
        font-size: 22px;
    }
}