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

/*
 * Columna principal al lado de la barra lateral (filtros, lista de deseos). Un carrusel de widget
 * adentro (ej. "Los mas vendidos en celulares") la ensanchaba hasta todo el ancho y la columna
 * bajaba debajo de la barra lateral. Con min-width: 0 se queda en su ancho y el carrusel se
 * acomoda adentro. Va aca porque se carga en todas las paginas.
 */
.columns .column.main {
    min-width: 0;
}

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

    /*
     * Home: carrusel principal con la imagen entera. El CSS del admin le fija un alto por ancho
     * de pantalla (228px a 390px) mas bajo que la imagen (1060x748), y el pie quedaba cortado.
     * Con la imagen completa, los puntos van en ese espacio libre de abajo, entre el boton
     * "comprar" y la leyenda legal, en vez de encima de los botones y textos.
     */
    .cms-index-index .banner-slider-top .item-bn-slider-05 .item-slider .item {
        height: auto;
    }
    .cms-index-index .banner-slider-top .slider-2 .owl-dots {
        bottom: 8%;
        line-height: 0;
    }
    /* El HTML Head del admin les da 10px con !important */
    .cms-index-index .banner-slider-top .slider-2 .owl-dots .owl-dot span {
        width: 8px !important;
        height: 8px !important;
        margin: 0 4px;
    }

    /*
     * Banners de imagen (.item-bn, como la cuadricula debajo del carrusel): el tema les fija
     * 187px de alto y en pantallas angostas la imagen se cortaba a la derecha. Toman la
     * proporcion de su imagen, que calcula Magento_Theme::html/banner-ratio.phtml (--bn-ratio).
     * Sin ese dato (antes de que cargue la imagen) quedan como estaban.
     */
    .item-bn-inner .item-bn[style*="--bn-ratio"] {
        height: auto;
        aspect-ratio: var(--bn-ratio);
        background-size: 100% 100%;
    }
}