/* ==========================================================================
   Card de produto (home, categoria, busca, "outros produtos") e card de vídeo
   Estrutura: .card do Bootstrap + estes complementos
   ========================================================================== */

.card-produto { color: var(--jj-text); overflow: hidden; transition: transform .22s, box-shadow .22s, border-color .22s; }
.card-produto:hover { color: var(--jj-text); transform: translateY(-4px); box-shadow: var(--jj-shadow-hover); border-color: rgba(85, 224, 210, .5); }
.card-produto-img {
    aspect-ratio: 1; margin: 10px 10px 0; border-radius: 12px; overflow: hidden;
    background: var(--jj-img-bg); display: flex; align-items: center; justify-content: center;
}
.card-produto-img img { width: 86%; height: 86%; object-fit: contain; transition: transform .35s; }
.card-produto:hover .card-produto-img img { transform: scale(1.06); }
.card-produto .card-body { padding: 14px 16px 16px; }
.card-produto .ref { font-size: .72rem; font-weight: 600; letter-spacing: .06em; color: var(--jj-muted); text-transform: uppercase; }
.card-produto .nome {
    font-size: .92rem; font-weight: 600; line-height: 1.3; margin: 0; min-height: 2.6em;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-produto .minimo { font-size: .78rem; color: var(--jj-muted); }
.card-produto:hover .btn-outline-primary { background: var(--jj-cta); border-color: var(--jj-cta); color: var(--jj-cta-contrast); }
.card-produto .selo-orcamento { position: absolute; top: 18px; left: 18px; z-index: 1; background: var(--jj-cta); }
@media (max-width: 575.98px) {
    .card-produto .card-body { padding: 10px 12px 12px; }
    .card-produto .nome { font-size: .82rem; }
    .card-produto .minimo { display: none !important; }
}

/* Card de vídeo (VIDEO_1 / VIDEO_2 da home) */
.card-video video { width: 100%; max-height: 300px; border-radius: 0 0 var(--jj-radius) var(--jj-radius); background: #000; }