/* Grid wrapper: default gaps, overridable via CSS vars */
.wcvg-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--wcvg-row-gap, 0) var(--wcvg-column-gap, 0);
}

/* Column presets still respected if user sets Columns param */
.wcvg-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
}

.wcvg-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr))
}

.wcvg-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr))
}

.wcvg-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr))
}

.wcvg-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr))
}

/* Item-level controls via vars */
.wcvg-item {
    position: relative;
    margin: var(--wcvg-item-margin, 0);
    overflow: hidden;

    .wcvg-link {
        display: block;
        text-decoration: none;
        padding: var(--wcvg-item-padding, 0);
        border-radius: var(--wcvg-item-radius, 0);


        .wcvg-img {
            width: 100%;
            height: auto;
            display: block;
            border-radius: inherit;
            margin-bottom: 0;
        }
        
        .wcvg-caption {
            margin-top: 8px;
            color: initial
        }
        
        .wcvg-price {
            margin-top: 4px;
            font-weight: 600
        }
    }
}