/*
 * Ajustes propios de Miel El Pinsapar (Artdinamica).
 * PrestaShop carga este archivo automáticamente después de theme.css.
 *
 * Casi todo lo de aquí reserva el espacio de elementos que se rellenan tarde (CLS); la portada de la
 * ficha se adelanta para el LCP. Las reglas usan :has() (Chrome 105+, Safari 15.4+, Firefox 121+); en
 * navegadores más antiguos no hacen nada.
 */

/*
 * Ficha de producto: leogallery construye la galería con JavaScript cuando termina de cargar la página
 * y, hasta entonces, el hueco mide 0. Se reserva con la misma proporción que tendrá después: cuadrado
 * si solo hay una foto y cuadrado más la fila de miniaturas si hay más.
 */
#main.product-detail .images-container {
    aspect-ratio: 1 / 1;
}

#main.product-detail .images-container:has(.product-thumb-images .thumb-container:nth-child(2)) {
    aspect-ratio: 100 / 119;
}

/*
 * leogallery oculta la portada (.product-cover, en lightslider.min.css) y no muestra la galería hasta
 * que termina de cargar la página. Mientras la galería (.lSSlideOuter) no existe se enseña la portada,
 * que es la misma foto, para que se pinte en cuanto llega en vez de varios segundos después (LCP).
 * Sus etiquetas (Nuevo, descuento...) siguen ocultas, como cuando ya está la galería.
 */
#main.product-detail .images-container:not(:has(.lSSlideOuter)) > .product-cover {
    display: block;
}

#main.product-detail .images-container:not(:has(.lSSlideOuter)) > .product-cover .product-flags {
    display: none;
}

/*
 * Logo de la cabecera (734 x 266, logo-1733836802.jpg): la imagen no lleva width/height y es perezosa,
 * así que hasta que llega mide 0 y empuja toda la página (unos 108 px en móvil con red lenta). Hasta
 * 1024 px el ancho es el de la pantalla menos 60 px (con tope de 734 px) y por encima la columna ya
 * le da el ancho. Si se cambia el logo en el BO cambia el nombre del archivo, estas reglas dejan de
 * aplicarse y hay que actualizar el nombre y las medidas.
 */
.elementor-widget:has(.header_logo img[src*="logo-1733836802"]) {
    width: 100%;
}

.header_logo:has(img[src*="logo-1733836802"]) {
    max-width: 734px;
    aspect-ratio: 734 / 266;
}

@media (max-width: 1024px) {
    .header_logo:has(img[src*="logo-1733836802"]) {
        min-height: calc(min(100vw - 60px, 734px) * 266 / 734);
    }
}

/*
 * Slider de portada (Leo Slideshow con iView): el servidor imprime la altura del slider (style="height:473px")
 * y el JavaScript la recalcula al iniciarse (altura x ancho / ancho base). Se reserva esa altura final
 * hasta que iView escribe la suya (queda "height: 254px;", con espacio) y entonces se libera la
 * reserva. Cada dispositivo recibe un grupo distinto, que se distingue por el final de su clase:
 *   -14: móviles y tablets, ancho base 767 y alto 473
 *   -15: escritorio, ancho base 1920 y alto 927
 * Si se cambian los tamaños o se recrean los grupos en el BO hay que actualizar estos números.
 * Hasta que iView arranca se oculta el contenido sin estilos.
 */
.LeoSlideshow .bannercontainer:has(.iview[class$="-14"]:not([style*="height: "])) {
    aspect-ratio: 767 / 473;
    max-height: 473px;
    overflow: hidden;
}

.LeoSlideshow .bannercontainer:has(.iview[class$="-15"]:not([style*="height: "])) {
    aspect-ratio: 1920 / 927;
    max-height: 927px;
    overflow: hidden;
}

/* A partir de ~1891 px de ancho útil iView deja el alto en 927 sin reescribirlo. */
@media (min-width: 1906px) {
    .LeoSlideshow .bannercontainer:has(.iview[class$="-15"]:not([style*="height: "])) {
        aspect-ratio: auto;
        height: 927px;
    }
}

.LeoSlideshow .iview:not(:has(.iviewSlider)) {
    visibility: hidden;
}