/* =========================================================
FEATURED PRODUCTS
========================================================= */

.featured-products
{
    width: 100%;

    padding: 80px 20px;

    background: #0b1220;
}


/* =========================================================
SECTION HEADER
========================================================= */

.section-header
{
    text-align: center;

    margin-bottom: 35px;
}

.section-header h2
{
    font-size: 34px;

    color: #ffffff;

    margin-bottom: 8px;

    line-height: 1.2;
}

.section-header p
{
    font-size: 15px;

    color: rgba(255,255,255,.6);

    max-width: 600px;

    margin: 0 auto;
}


/* =========================================================
FILTERS
========================================================= */

.product-filters
{
    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 40px;
}

.filter-btn
{
    padding: 8px 14px;

    border-radius: 999px;

    font-size: 13px;

    text-decoration: none;

    color: rgba(255,255,255,.7);

    background: rgba(255,255,255,.04);

    border: 1px solid rgba(255,255,255,.06);

    transition: all .2s ease;

    white-space: nowrap;

    user-select: none;
}

.filter-btn:hover
{
    background: rgba(255,255,255,.08);

    color: #fff;

    transform: translateY(-1px);
}

.filter-btn.active
{
    background: #2563eb;

    color: #fff;

    border-color: transparent;
}


/* =========================================================
GRID (BASE DESKTOP = 4 COLUNAS)
========================================================= */

.products-grid
{
    display: grid;

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

    gap: 25px;

    max-width: 1200px;

    margin: 0 auto;
}


/* =========================================================
CARD
========================================================= */

.product-card
{
    background: #111a2e;

    border-radius: 14px;

    overflow: hidden;

    border: 1px solid rgba(255,255,255,.05);

    transition: all .25s ease;

    display: flex;

    flex-direction: column;
}

.product-card:hover
{
    transform: translateY(-6px);

    border-color: rgba(255,255,255,.12);

    box-shadow: 0 10px 25px rgba(0,0,0,.25);
}


/* =========================================================
IMAGE
========================================================= */

.product-image
{
    height: 170px;

    background-size: cover;

    background-position: center;

    position: relative;
}

/* placeholders */
.paint1 { background: #3b82f6; }
.paint2 { background: #fb7185; }
.paint3 { background: #22c55e; }
.paint4 { background: #facc15; }


/* overlay leve */
.product-image::after
{
    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(
        to bottom,
        rgba(0,0,0,.05),
        rgba(0,0,0,.25)
    );
}


/* =========================================================
INFO
========================================================= */

.product-info
{
    padding: 18px;

    display: flex;

    flex-direction: column;

    flex: 1;
}

.product-info h3
{
    font-size: 16px;

    color: #fff;

    margin-bottom: 6px;
}

.product-info p
{
    font-size: 13px;

    color: rgba(255,255,255,.6);

    margin-bottom: 16px;

    line-height: 1.4;
}


/* =========================================================
FOOTER
========================================================= */

.product-footer
{
    margin-top: auto;

    display: flex;

    flex-direction: column;

    gap: 10px;

    align-items: flex-start;
}
.product-footer .btn
{
    width: 100%;

    text-align: center;

    padding: 10px 14px;
}
.price
{
    font-size: 15px;

    font-weight: 600;

    color: #fff;
}


/* =========================================================
PAGINATION
========================================================= */

.pagination
{
    display: flex;

    justify-content: center;

    gap: 8px;

    margin-top: 45px;
}

.pagination a
{
    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    border-radius: 10px;

    font-size: 13px;

    color: rgba(255,255,255,.7);

    background: rgba(255,255,255,.04);

    border: 1px solid rgba(255,255,255,.06);

    transition: all .2s ease;
}

.pagination a:hover
{
    background: rgba(255,255,255,.08);

    color: #fff;
}

.pagination a.active
{
    background: #2563eb;

    color: #fff;

    border-color: transparent;
}


/* =========================================================
RESPONSIVE BREAKPOINTS
========================================================= */

/* tablets */
@media (max-width: 1024px)
{
    .products-grid
    {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* mobile */
@media (max-width: 768px)
{
    .products-grid
    {
        grid-template-columns: repeat(2, 1fr);
    }

    .section-header h2
    {
        font-size: 28px;
    }
}

/* mobile pequeno */
@media (max-width: 480px)
{
    .products-grid
    {
        grid-template-columns: 1fr;
    }
}