/* ===================================================================
 * Personalizaciones de la tienda de Edelvives México.
 *
 * Todo lo propio vive aquí, en el tema hijo. NO editar theme.css del
 * tema padre: es un fichero compilado y cualquier actualización o
 * recompilación se lo lleva por delante (fue lo que pasó al actualizar
 * desde 1.7.1.1).
 * =================================================================== */

/* -------------------------------------------------------------------
 * Portadas de categoría.
 * Antes estaba dentro de theme.css del tema padre.
 * ------------------------------------------------------------------- */
#js-product-list-header .category-cover {
    width: 100%;
    max-width: 1900px;
    height: auto;
    margin: 0 auto 1rem;
    display: block;
    position: relative;
}

#js-product-list-header .category-cover img {
    width: 100%;
    height: auto;
    max-height: 640px;
    display: block;
    object-fit: cover; /* evita deformación si el contenedor no respeta el ratio */
}

/* -------------------------------------------------------------------
 * Resumen de paginación ("Mostrando X-Y de Z"): fuente algo menor e
 * interlineado normal. theme.css fuerza line-height:2.5rem, así que
 * hace falta más especificidad.
 * ------------------------------------------------------------------- */
nav.pagination > div:first-child {
    font-size: 0.8125rem;
    line-height: 1.4;
}

/* Cuando solo hay una página no se muestran los enlaces:
   centramos el resumen a todo el ancho. */
.pagination--single .col-md-4 {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    text-align: center;
}

/* -------------------------------------------------------------------
 * Lightbox de pago Mastercard (checkout.js): el iframe se crea con
 * fondo transparente y la página del reto 3-D Secure del banco (BBVA)
 * no define fondo propio, así que el popup se veía semitransparente
 * sobre la tienda. El estilo inline del iframe no lleva !important,
 * por lo que estas reglas ganan.
 * ------------------------------------------------------------------- */
iframe[title="Hosted Checkout"],
iframe[title="Payment Page Embedded In Frame"],
#hc-comms-layer-iframe {
    background-color: #fff !important;
}

/* Colchón: cualquier iframe en la página de checkout con fondo sólido,
   por si cambia el identificador del lightbox en futuras versiones. */
body#checkout iframe {
    background-color: #fff !important;
}

/* ===================================================================
 * TIPOGRAFIA
 *
 * PrestaShop 9 cambio la fuente del tema Classic de "Noto Sans" a
 * "Manrope", que se ve mas gruesa y cuesta mas de leer. Aqui se
 * recupera la Noto Sans que usaba la tienda en 1.7, copiando los
 * ficheros de fuente del tema anterior a assets/fonts/ del hijo.
 * =================================================================== */

@font-face {
    font-family: "Noto Sans";
    src: local("Noto Sans Regular"), local("NotoSans-Regular"),
         url("../fonts/notosans-regular.woff2") format("woff2"),
         url("../fonts/notosans-regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Sans";
    src: local("Noto Sans Bold"), local("NotoSans-Bold"),
         url("../fonts/notosans-bold.woff2") format("woff2"),
         url("../fonts/notosans-bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Sans";
    src: local("Noto Sans Italic"), local("NotoSans-Italic"),
         url("../fonts/notosans-italic.woff2") format("woff2"),
         url("../fonts/notosans-italic.woff") format("woff");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Noto Sans";
    src: local("Noto Sans BoldItalic"), local("NotoSans-BoldItalic"),
         url("../fonts/notosans-bolditalic.woff2") format("woff2"),
         url("../fonts/notosans-bolditalic.woff") format("woff");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* Sustituye Manrope por Noto Sans en toda la tienda.
   Los iconos (Material Icons) quedan fuera a proposito. */
html,
body,
button,
input,
select,
textarea,
optgroup,
.btn,
.form-control,
.custom-select,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Los iconos deben seguir usando su propia fuente */
.material-icons,
i.material-icons {
    font-family: "Material Icons", Arial, sans-serif !important;
}

/* ===================================================================
 * PIE: newsletter y redes sociales en la misma linea
 *
 * PrestaShop 9 estiliza .block_newsletter como un bloque centrado
 * (float:none; clear:both; max-width:800px; margin auto), lo que
 * expulsa el bloque de redes sociales a la linea siguiente y rompe
 * la maquetacion que tenia la tienda en 1.7.
 *
 * Aqui se restaura el comportamiento de columna de la rejilla, para
 * que .block_newsletter (col-lg-8) y .block-social (col-lg-4)
 * convivan en la misma fila. Solo a partir de 992px: por debajo,
 * ambos son col-12 y deben apilarse, que es lo correcto en movil.
 * =================================================================== */
@media (min-width: 992px) {
    /* El tema fuerza float:inherit y width:100% desde un selector de ID
       (#blockEmailSubscription_displayFooterBefore), que gana a cualquier
       selector de clases. Por eso aqui hay que incluir el ID. */
    footer .row > #blockEmailSubscription_displayFooterBefore,
    footer .row > .block_newsletter {
        float: left;
        clear: none;
        width: 66.6667%;   /* equivalente a col-lg-8 */
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }

    footer .row > .block-social {
        float: left;
        clear: none;
        width: 33.3333%;   /* equivalente a col-lg-4 */
    }
}