/* As páginas de promoção do Conecta (a de todas as ofertas e a de cada campanha). A lista é a das
   páginas de categoria, com a folha delas (categoria/solex-conecta-categoria.css), que esta segue: aqui
   fica só o que é da página, a introdução acima dos produtos, no desenho do texto da categoria (a
   coluna, a cor, o tamanho e o parágrafo), e o banner da campanha, no desenho do da página inicial. */
:root {
    --solex-conecta-promocoes-introducao-coluna: var(--solex-conecta-categoria-texto-coluna);
    --solex-conecta-promocoes-introducao-cor: var(--solex-conecta-categoria-texto-suave);
    --solex-conecta-promocoes-introducao-tamanho: var(--solex-conecta-categoria-texto-tamanho);
    --solex-conecta-promocoes-introducao-linha: var(--solex-conecta-categoria-texto-linha);
    --solex-conecta-promocoes-introducao-paragrafo: var(--solex-conecta-categoria-paragrafo-texto-margem);
    --solex-conecta-promocoes-banner-fundo: var(--solex-conecta-categoria-superficie);
    --solex-conecta-promocoes-banner-borda: var(--solex-conecta-categoria-linha);
    --solex-conecta-promocoes-banner-borda-largura: var(--solex-conecta-categoria-borda-largura);
    --solex-conecta-promocoes-banner-raio: var(--solex-conecta-categoria-raio);
    --solex-conecta-promocoes-banner-sombra: var(--solex-conecta-categoria-sombra-bloco);
}

.solex-conecta-promocoes-banner {
    overflow: hidden;
    background: var(--solex-conecta-promocoes-banner-fundo);
    border: var(--solex-conecta-promocoes-banner-borda-largura) solid var(--solex-conecta-promocoes-banner-borda);
    border-radius: var(--solex-conecta-promocoes-banner-raio);
    box-shadow: var(--solex-conecta-promocoes-banner-sombra);
}

/* A proporção vem da largura e da altura da imagem escolhida, que o HTML declara; a do celular, quando
   a loja escolhe uma, traz as dela. */
.solex-conecta-promocoes-banner-imagem {
    display: block;
    width: 100%;
    height: auto;
}

/* Com a imagem do celular, o banner vem num <picture>, que fica em linha e deixaria o vão da linha
   embaixo da imagem. */
.solex-conecta-promocoes-banner picture {
    display: block;
}

.solex-conecta-promocoes-introducao {
    max-width: var(--solex-conecta-promocoes-introducao-coluna);
    color: var(--solex-conecta-promocoes-introducao-cor);
    font-size: var(--solex-conecta-promocoes-introducao-tamanho);
    line-height: var(--solex-conecta-promocoes-introducao-linha);
    overflow-wrap: anywhere;
}

.solex-conecta-promocoes-introducao p {
    margin: var(--solex-conecta-promocoes-introducao-paragrafo);
}

.solex-conecta-promocoes-introducao p:last-child {
    margin-bottom: 0;
}