/* ── Vitrine Grid — CdA Ferramentas ─────────────────────────────────────────
 * Versão: 3.0.9
 *
 * Reutiliza todas as classes .cdaf-vt-* do vitrine.css (card, badge, imagem,
 * info, ações, qty, atc, view-cart, rating).
 * Apenas o container e o grid são próprios deste arquivo.
 * ─────────────────────────────────────────────────────────────────────────── */

/* ── Variáveis padrão ────────────────────────────────────────────────────── */
.cdaf-vtg-wrap {
    --vtg-cols-desktop: 5;
    --vtg-cols-tablet:  3;
    --vtg-cols-mobile:  2;
    --vtg-gap:          16px;
    width: 100%;
    position: relative;
}

/* ── Grid ────────────────────────────────────────────────────────────────── */
.cdaf-vtg-grid {
    display: grid;
    gap: var(--vtg-gap);
    grid-template-columns: repeat(var(--vtg-cols-desktop), 1fr);
    /* transition suave ao redimensionar */
    transition: grid-template-columns 0.2s ease;
}

/* Tablet */
@media (max-width: 1024px) {
    .cdaf-vtg-grid {
        grid-template-columns: repeat(var(--vtg-cols-tablet), 1fr) !important;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .cdaf-vtg-grid {
        grid-template-columns: repeat(var(--vtg-cols-mobile), 1fr) !important;
    }
}

/* ── Card dentro do grid ─────────────────────────────────────────────────── */
/* Sobrescreve o flex-shrink:0 do carrossel — no grid cada card preenche a célula */
.cdaf-vtg-wrap .cdaf-vt-card {
    flex-shrink: unset;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
}

/* ── Hover touch (mobile) — acionado via JS do vitrine.js ────────────────── */
/* O vitrine.js já gerencia a classe cdaf-vt-touched nos cards */