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

/*
 * Boton de regalos (Aheadworks Add Free Product to Cart): flotante abajo a la derecha, encima del
 * boton del chat y del mismo tamano (56px a 20px del borde), en vez de ir en la cabecera. En mobile el modulo lo
 * mostraba como una barra debajo de la cabecera y le agregaba 60px de margen (.aw-afptc-open),
 * y la pagina saltaba hacia abajo al aparecer. Lo mueve Magento_Theme/layout/default.xml.
 * Por debajo del panel del chat (z-index 2147483000) para que no lo tape cuando esta abierto.
 * Mismo estilo que el boton del chat (Standard_AiChatbot widget.js): circulo azul de la
 * plataforma (#2563eb), icono blanco de linea (Feather "gift", la familia del icono del chat)
 * y el numero como la burbuja de mensajes sin leer. Si cambia el color del chat en la
 * plataforma, cambiarlo aca tambien.
 */
body .aw-afptc__promo-offer-link {
    position: fixed;
    right: 20px;
    bottom: 88px;
    left: auto;
    z-index: 2147482990;
    width: auto;
    margin: 0;
    padding: 0;
    float: none;
    border: 0;
    background: transparent;
}
body .aw-afptc__promo-offer-link .aw-afptc__desc-text {
    display: none;
}
body .aw-afptc__promo-offer-link .action {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0;
    border-radius: 50%;
    background: #2563eb;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}
body .aw-afptc__promo-offer-link .action.no-display {
    display: none;
}
body .aw-afptc__promo-offer-link .action::before,
body .aw-afptc__promo-offer-link .action:hover::before {
    width: 28px;
    height: 28px;
    margin: 0;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 12 20 22 4 22 4 12"/><rect x="2" y="7" width="20" height="5"/><line x1="12" y1="22" x2="12" y2="7"/><path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z"/><path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z"/></svg>');
    background-size: 28px 28px;
    background-repeat: no-repeat;
}
body .aw-afptc__promo-offer-link .aw-afptc__counter {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    margin: 0;
    padding: 0 5px;
    border-radius: 10px;
    background: #e11d1d;
    color: #fff;
    font: bold 12px/20px system-ui, -apple-system, sans-serif;
    text-align: center;
    text-shadow: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
    box-sizing: border-box;
}
/*
 * Icono del chat centrado a la vista: el globo de Feather tiene la cola abajo a la izquierda y la
 * parte redonda queda corrida hacia arriba a la derecha del centro del boton. Al lado del regalo
 * (simetrico) se notaba. Solo el icono por defecto (svg), no la imagen que asigna la plataforma.
 */
body #aichatbot-launcher > svg {
    transform: translate(-1px, 1px);
}
body .aw-afptc-open.page-header {
    margin-bottom: 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%;
    }
}