.card-produto,
.card-artigo {
    background: var(--cor-branco);
    border: 1px solid var(--cor-cinza-borda);
    border-radius: var(--raio-borda-grande);
    overflow: hidden;
    box-shadow: var(--sombra-card);
    transition: box-shadow var(--transicao-padrao), transform var(--transicao-padrao);
    display: flex;
    flex-direction: column;
}

.card-produto:hover,
.card-artigo:hover {
    box-shadow: var(--sombra-card-hover);
    transform: translateY(-2px);
}

.card-produto img,
.card-artigo img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
}

/*
 * Fotos de produto: melhor conter do que cobrir, para não cortar a peça.
 * Caixa quadrada (em vez de 4:3) para produtos em formato retrato (a maioria)
 * ocuparem mais espaço — em paisagem eles ainda preenchem a largura toda.
 */
.card-produto img {
    aspect-ratio: 1 / 1;
    object-fit: contain;
    padding: var(--espaco-3);
    background: var(--cor-branco);
}

.card-produto__conteudo,
.card-artigo__conteudo {
    padding: var(--espaco-3);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.card-produto__conteudo h3,
.card-artigo__conteudo h2,
.card-artigo__conteudo h3 {
    margin-bottom: var(--espaco-1);
}

.card-produto__conteudo p,
.card-artigo__conteudo p {
    color: var(--cor-cinza-medio);
    flex: 1;
}

.card-produto__link {
    display: inline-block;
    margin-top: var(--espaco-1);
    font-weight: var(--peso-semibold);
    color: var(--cor-azul-marinho);
}

.card-produto__link:hover {
    color: var(--cor-laranja);
}

.card-produto--personalizado {
    background: var(--cor-cinza-claro);
    align-items: flex-start;
    justify-content: center;
}

.card-artigo__categoria {
    display: inline-block;
    align-self: flex-start;
    background: var(--cor-cinza-claro);
    color: var(--cor-azul-marinho);
    font-size: 0.75rem;
    font-weight: var(--peso-semibold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    margin-bottom: var(--espaco-1);
}

.card-artigo__meta {
    font-size: 0.875rem;
    color: var(--cor-cinza-medio);
    margin-top: auto;
}