.shop-page{
background:#0f172a;
color:white;
padding:60px 20px;
min-height:100vh;
}

/* HERO */
.shop-hero{
text-align:center;
margin-bottom:50px;
}

.shop-hero h1{
font-size:50px;
font-weight:800;
background:linear-gradient(90deg,#17c3b2,#f59e0b);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.shop-hero p{
color:#ccc;
}

/* FILTER */
.shop-filter{
display:flex;
justify-content:center;
gap:10px;
margin-bottom:40px;
}

.shop-filter select,
.shop-filter button{
padding:10px;
border-radius:6px;
border:none;
}

.shop-filter button{
background:#17c3b2;
color:white;
cursor:pointer;
}

/* GRID */
.shop-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:25px;
}

/* CARD */
.shop-card{
background:#111827;
border-radius:15px;
overflow:hidden;
transition:0.4s;
position:relative;
}

.shop-card:hover{
transform:translateY(-10px);
box-shadow:0 15px 40px rgba(0,0,0,0.5);
}

.shop-img img{
width:100%;
height:220px;
object-fit:cover;
}

/* INFO */
.shop-info{
padding:20px;
text-align:center;
}

.shop-price{
color:#f59e0b;
font-weight:700;
margin:10px 0;
}

/* BUTTON */
.btn-shop{
display:inline-block;
background:#17c3b2;
padding:10px 20px;
border-radius:6px;
text-decoration:none;
color:white;
transition:0.3s;
}

.btn-shop:hover{
background:#f59e0b;
}

/* PAGINATION */
.shop-pagination{
margin-top:40px;
text-align:center;
}

.shop-pagination a{
margin:5px;
padding:10px 15px;
background:#1f2937;
color:white;
border-radius:5px;
text-decoration:none;
}

.shop-pagination a.active{
background:#17c3b2;
}