/* ============================================================
   components/marketplace-gallery.css
   Galerias gerais do marketplace
   Usado principalmente nos cards/listagens da vitrine
   ============================================================ */

/* ============================================================
   Imagem dos cards de produto na vitrine
   ============================================================ */

.product-image-link {
    display: block;
}

.product-image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f6f1e8;
}

.product-image-wrap .rank-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
}

.product-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.25s ease;
}

.marketplace-product-card:hover .product-image {
    transform: scale(1.04);
}

/* ============================================================
   Galeria de origem genérica
   Mantida como fallback para páginas que ainda não usam
   marketplace-produto.css
   ============================================================ */

.origin-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.origin-gallery-grid img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid var(--color-border);
}

/* ============================================================
   Responsivo
   ============================================================ */

@media (max-width: 680px) {
    .origin-gallery-grid {
        grid-template-columns: 1fr;
    }
}