/* =========================
   PRODUCTS PAGE
========================= */

.category-page{
    padding:80px 0;

    min-height:100vh;
}

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

.filters{
    display:flex;

    flex-wrap:wrap;

    gap:16px;

    margin-bottom:50px;
}

.filters a{
    padding:14px 24px;

    background:#0d1227;

    border-radius:14px;

    border:1px solid rgba(255,255,255,0.05);

    color:white;

    font-weight:600;

    transition:0.3s;
}

.filters a:hover{
    border-color:#00d9ff;

    color:#00d9ff;

    transform:translateY(-2px);
}

/* =========================
   PRODUCTS GRID
========================= */

.products-grid{
    display:grid;

    grid-template-columns:
    repeat(auto-fill,minmax(190px,1fr));

    gap:20px;
}

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

.product-box{
    background:#0d1227;

    border-radius:20px;

    overflow:hidden;

    border:1px solid rgba(255,255,255,0.06);

    transition:0.3s;
}

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

    border-color:#00d9ff;

    box-shadow:
    0 0 30px rgba(0,217,255,0.10);
}

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

.product-box img{
    width:100%;
    height:180px;

    object-fit:cover;
}

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

.product-content{
    padding:16px;
}

.product-category{
    display:inline-block;

    margin-bottom:10px;

    color:#00d9ff;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;
}

.product-box h3{
    font-size:18px;

    margin-bottom:12px;

    line-height:26px;
}

.product-price{
    display:flex;
    align-items:center;
    gap:10px;

    margin-bottom:16px;
}

.product-price strong{
    font-size:24px;

    color:#ff7b00;
}

.product-price small{
    color:#8d95b3;

    text-decoration:line-through;
}

/* =========================
   PRODUCT BUTTON
========================= */

.product-box button{
    width:100%;

    height:46px;

    border:none;

    border-radius:12px;

    background:#00d9ff;

    color:black;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    transition:0.3s;
}

.product-box button:hover{
    transform:translateY(-2px);

    box-shadow:
    0 0 24px rgba(0,217,255,0.25);
}

/* =========================
   EMPTY STATE
========================= */

.no-products{
    width:100%;

    text-align:center;

    padding:100px 20px;

    background:#0d1227;

    border-radius:24px;

    border:1px solid rgba(255,255,255,0.06);
}

.no-products h2{
    font-size:38px;

    margin-bottom:16px;
}

.no-products p{
    color:#8d95b3;

    line-height:30px;
}

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

@media(max-width:700px){

    .products-grid{
        grid-template-columns:
        repeat(2,1fr);
    }

    .product-box img{
        height:150px;
    }

}