/**
 * GL - Promos y Descuentos - estilos del front
 *
 * Deliberadamente minimo. Los carteles traen su propio estilo en linea desde
 * la base -son HTML compuesto en el back office, con imagenes y colores
 * elegidos ahi-, asi que esta hoja no define ni tipografia ni color: solo
 * pone el cartel en su sitio y evita que rompa la grilla del catalogo.
 *
 * El modulo anterior servia en cada pagina un JS de 9 KB que no hacia nada:
 * su guarda era `typeof prestashop === "function"` y en PrestaShop 1.7
 * `prestashop` es un objeto, asi que el codigo de adentro no corria nunca.
 * Aca no hay JS en el front.
 */

.glpromos-messages {
    margin: 8px 0;
}

.glpromos-message {
    margin-bottom: 6px;
}

.glpromos-message:last-child {
    margin-bottom: 0;
}

/* Los carteles traen imagenes con ancho fijo escrito a mano. Sin esto se
   salen de la tarjeta en el movil. */
.glpromos-message img {
    max-width: 100%;
    height: auto;
}

/* Los titulos del cartel vienen como <h2> dentro del HTML guardado. En la
   ficha eso compite con el nombre del producto, asi que se los baja de
   tamano sin tocar el contenido. */
.glpromos-message h1,
.glpromos-message h2,
.glpromos-message h3 {
    margin: 0 0 4px;
    font-size: 1.1rem;
    line-height: 1.3;
}

.glpromos-message p {
    margin: 0 0 4px;
}

/* En las tarjetas del listado el espacio es escaso: el cartel se achica y no
   se le permite empujar la grilla. */
.glpromos-messages--list {
    margin: 4px 0;
    overflow: hidden;
}

.glpromos-messages--list .glpromos-message h1,
.glpromos-messages--list .glpromos-message h2,
.glpromos-messages--list .glpromos-message h3 {
    font-size: 0.95rem;
}

/* ---- vista previa ----
 *
 * Solo se dibuja para el navegador que la encendio, mientras el modulo esta en
 * modo sombra. El recuadro punteado y la etiqueta estan para que no haya
 * ninguna duda de que el cliente NO esta viendo esto.
 */
.glpromos-preview {
    position: relative;
    border: 1px dashed #c0392b;
    border-radius: 4px;
    padding: 18px 8px 8px;
    margin-top: 14px;
}

.glpromos-preview-tag {
    position: absolute;
    top: -9px;
    left: 8px;
    background: #c0392b;
    color: #fff;
    font-size: 10px;
    line-height: 1.6;
    padding: 0 6px;
    border-radius: 3px;
    white-space: nowrap;
}

.glpromos-cart {
    margin: 8px 0;
}

.glpromos-cart__line {
    margin-bottom: 4px;
}