/**
 * "Novidades": os produtos do painel da Teresa sem card na vitrine
 * (inc/vitrine-novidades.php).
 *
 * Continua o bloco dos cards, que é um export do GreatPages: o mesmo rosa de
 * fundo, o título branco com a linha amarela, nome em itálico, preço grande e
 * o botão verde. Os números vêm medidos no layout (1280 px): título 20 px,
 * nome 19 px, preço 30 px, botão de 240 × 47 px. Abaixo de 800 px, onde o
 * layout troca para a versão de celular, os cards ficam um por linha e o título
 * centralizado, com a linha embaixo, como lá.
 *
 * Bloco fechado: tudo mora em .pnv e declara as próprias bases. O layout tem
 * `html { font-size: 10px }`, por isso nada aqui usa rem.
 */

.pnv {
    --pnv-fundo: rgb(216, 21, 116);   /* o rosa do bloco dos cards */
    --pnv-linha: rgb(255, 218, 0);    /* a linha amarela ao lado dos títulos */
    --pnv-botao: rgb(28, 201, 60);    /* o verde do "Comprar Agora" */

    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 0 0 76px;
    /* O bloco dos cards termina com ~100 px de rosa vazio no computador (97 a
       113 px, medidos em todas as páginas de 1024 a 1920 px). Subir 40 deixa
       o título a ~75 px dos botões de cima: o mesmo respiro que há entre a
       linha dos combos e "Escolha seu Complemento". O teste no navegador
       confere que a seção não cobre nada do bloco. */
    margin-top: -40px;
    background: var(--pnv-fundo);
    color: #fff;
    font-family: Montserrat, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.35;
    text-align: left;
    /* O export empilha blocos com z-index alto (o mesmo cuidado do banner). */
    position: relative;
    z-index: 1;
}
.pnv *, .pnv *::before, .pnv *::after { box-sizing: border-box; }

/* 1280 com 40 de cada lado: o título começa onde começam os do layout
   ("Escolha seu Complemento" fica a 40 px da borda numa tela de 1280). */
.pnv-in { max-width: 1280px; margin: 0 auto; padding: 0 40px; }

/* ------------------------------------------------------------- título */
.pnv-cab { display: flex; align-items: center; gap: 30px; margin: 0 0 42px; }
.pnv-tit {
    margin: 0;
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    font-style: normal;
    color: #fff;
    white-space: nowrap;
}
.pnv-linha { flex: 1; height: 0; border-bottom: 2px solid var(--pnv-linha); }

/* ------------------------------------------------------------- cards */
.pnv-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 48px 40px;
}
.pnv-card {
    width: 250px;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.pnv-ver {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    color: inherit;
    text-decoration: none;
}
/* A foto com fundo (Branco no editor do painel, ou foto de cena) vai num
   quadro branco de cantos redondos: solta no rosa, ela viraria um retângulo
   sem acabamento. A recortada (.is-recorte, abaixo) fica solta. */
.pnv-foto {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 26px rgba(90, 0, 45, .28);
    transition: transform .2s ease, box-shadow .2s ease;
}
.pnv-foto img { display: block; width: 100%; height: 100%; object-fit: contain; }
a.pnv-ver:hover .pnv-foto { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(90, 0, 45, .34); }
a.pnv-ver:focus-visible { outline: 3px solid #fff; outline-offset: 5px; border-radius: 20px; }
/* A foto recortada ("Fundo: Transparente" no editor do painel): solta no
   rosa, sem quadro nem sombra, como as fotos dos cards do layout. No quadro
   branco, o transparente do recorte aparecia branco. */
.pnv-foto.is-recorte,
a.pnv-ver:hover .pnv-foto.is-recorte { background: none; border-radius: 0; box-shadow: none; }

.pnv-nome {
    margin: 16px 0 0;
    font-size: 19px;
    line-height: 1.35;
    font-weight: 700;
    font-style: italic;
    color: #fff;
    overflow-wrap: anywhere;
}
/* "(Roxo)": embaixo do nome, sem negrito, como "(Rosa)" nos cards fixos. */
.pnv-var { display: block; font-weight: 400; }
.pnv-desc {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.4;
    font-style: italic;
    color: rgba(255, 255, 255, .86);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Preço e botão no pé do card: na mesma linha, os botões ficam alinhados
   mesmo quando um nome quebra em mais linhas que o outro. */
.pnv-pe { margin-top: auto; padding-top: 10px; width: 100%; display: flex; flex-direction: column; align-items: center; }
.pnv-preco { margin: 0; font-size: 30px; line-height: 1.3; font-weight: 700; font-style: italic; color: #fff; white-space: nowrap; }
.pnv-preco s { font-size: 16px; font-weight: 600; opacity: .8; }
.pnv-promo {
    margin: 2px 0 0;
    max-width: 100%;
    font-size: 12px;
    line-height: 1.3;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* O botão é o de sempre (botao_comprar): "Comprar Agora", ou ESGOTADO em
   cinza (estoque_css já pinta o .pup-esgotado). */
.pnv .pnv-pe .pup-add,
.pnv .pnv-pe .pup-esgotado {
    margin-top: 12px;
    width: 240px;
    max-width: 100%;
    height: 47px;
    padding: 0 16px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-size: 14.5px;
    line-height: 1;
    font-weight: 700;
    font-style: normal;
    text-decoration: none;
    color: #fff;
}
.pnv .pnv-pe .pup-add {
    background: var(--pnv-botao);
    transition: transform .14s ease, filter .18s ease;
}
.pnv .pnv-pe .pup-add:hover { filter: brightness(1.07); }
.pnv .pnv-pe .pup-add:active { transform: scale(.97); }
.pnv .pnv-pe .pup-add:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.pnv-card.is-off .pnv-foto img { filter: grayscale(1) contrast(.92); opacity: .6; }

/* ------------------------------------------------------------- celular */
/* No celular o bloco dos cards termina colado no último elemento (a caixa
   verde da frase da marca): aqui a seção não sobe, e respira por conta própria. */
@media (max-width: 800px) {
    .pnv { margin-top: 0; padding: 44px 0 60px; }
    .pnv-in { padding: 0 16px; }
    .pnv-cab { flex-direction: column; gap: 12px; margin-bottom: 34px; }
    .pnv-tit { white-space: normal; text-align: center; }
    .pnv-linha { flex: none; width: 100%; }
    .pnv-lista { gap: 52px 24px; }
    .pnv-card { width: min(280px, 100%); }
}

@media (prefers-reduced-motion: reduce) {
    .pnv-foto, .pnv .pnv-pe .pup-add { transition: none; }
    a.pnv-ver:hover .pnv-foto { transform: none; }
}