/* ==========================================================
   VBC Framework
   Product Grid
   Version: 1.0.0
========================================================== */

.vbc-product-grid{
    width:100%;
}

/* ==========================================================
   Grid
========================================================== */

.vbc-product-grid__wrapper{

    display:grid;

    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:16px;

    align-items:start;

}

.vbc-product-grid--list .vbc-product-grid__wrapper{

    grid-template-columns:1fr;

    gap:18px;

}

.vbc-product-grid--list .vbc-product-card{

    flex-direction:row;

}

.vbc-product-grid--list .vbc-product-card__image{

    width:220px;

    flex:0 0 220px;

    aspect-ratio:auto;

}

.vbc-product-grid--list .vbc-product-card__content{

    flex-direction:column;

    justify-content:center;

}

.vbc-product-grid--list .vbc-product-card__footer{

    flex-direction:row;

}

@media (max-width:768px){

    .vbc-product-grid--list .vbc-product-card{

        flex-direction:column;

    }

    .vbc-product-grid--list .vbc-product-card__image{

        width:100%;

        aspect-ratio:1;

    }

}

/* ==========================================================
   Empty State
========================================================== */

.vbc-product-grid__empty{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    padding:120px 40px;

    border:2px dashed var(--vbc-color-border);

    border-radius:0;

    background:#faf9f6;

    text-align:center;

}

.vbc-product-grid__empty svg{

    margin-bottom:24px;

    color:var(--vbc-color-accent);

}

.vbc-product-grid__empty h3{

    margin-bottom:12px;

    color:var(--vbc-color-heading);

    font-size:32px;

}

.vbc-product-grid__empty p{

    max-width:420px;

    color:var(--vbc-color-muted);

    font-size:16px;

    line-height:1.8;

}

/* ==========================================================
   Responsive
========================================================== */

@media (max-width:1400px){

    .vbc-product-grid__wrapper{

        grid-template-columns:repeat(3,minmax(0,1fr));

    }

}

@media (max-width:992px){

    .vbc-product-grid__wrapper{

        grid-template-columns:repeat(2,minmax(0,1fr));

        gap:24px;

    }

}

@media (max-width:640px){

    .vbc-product-grid__wrapper{

        grid-template-columns:1fr;

    }

    .vbc-product-grid__empty{

        padding:70px 24px;

    }

    .vbc-product-grid__empty h3{

        font-size:26px;

    }

}
/* ==========================================================
   Pagination
========================================================== */

.vbc-pagination{
    display:flex;
    justify-content:center;
    margin-top:40px;
}

.vbc-pagination__list{
    display:flex;
    align-items:center;
    gap:8px;
    list-style:none;
    margin:0;
    padding:0;
}

.vbc-pagination__item .page-numbers{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:40px;
    height:40px;
    padding:0 10px;
    border:1px solid var(--vbc-color-border);
    border-radius:var(--vbc-radius-sm);
    background:var(--vbc-color-white);
    color:var(--vbc-color-text);
    font-weight:600;
    text-decoration:none;
    transition:var(--vbc-transition-fast);
}

.vbc-pagination__item .page-numbers:hover{
    border-color:var(--vbc-color-primary);
    color:var(--vbc-color-primary);
}

.vbc-pagination__item .page-numbers.current{
    background:var(--vbc-color-primary);
    border-color:var(--vbc-color-primary);
    color:var(--vbc-color-white);
}

.vbc-pagination__item .page-numbers.dots{
    border:none;
    background:none;
}