/*=================================
        SHOP.CSS
==================================*/

/* SHOP HEADER */

.shop-header{

padding:80px 0;

background:linear-gradient(135deg,#2563eb,#1d4ed8,#0b1120);

text-align:center;

}

.shop-header h1{

font-size:52px;

font-weight:800;

margin-bottom:15px;

}

.shop-header p{

font-size:18px;

color:#dbeafe;

margin-bottom:35px;

}

/* SEARCH */

.shop-search{

max-width:650px;

margin:auto;

position:relative;

}

.shop-search input{

width:100%;

padding:18px 22px;

font-size:17px;

border:none;

border-radius:18px;

background:#fff;

color:#111827;

box-shadow:0 15px 40px rgba(0,0,0,.2);

}

.shop-search i{

position:absolute;

right:22px;

top:20px;

font-size:22px;

color:#2563eb;

}

/* FILTER */

.filter{

padding:40px 0;

}

.filter-list{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:15px;

}

.filter-btn{

padding:12px 24px;

background:#111827;

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

border-radius:40px;

color:#fff;

font-weight:600;

transition:.3s;

cursor:pointer;

}

.filter-btn:hover,

.filter-btn.active{

background:#2563eb;

}

/* PRODUCT */

.product-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

gap:28px;

padding-bottom:80px;

}

.product-card{

position:relative;

overflow:hidden;

background:#111827;

border-radius:22px;

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

transition:.35s;

}

.product-card:hover{

transform:translateY(-10px);

box-shadow:0 20px 40px rgba(0,0,0,.35);

border-color:#2563eb;

}

.product-card img{

width:100%;

height:220px;

object-fit:cover;

transition:.4s;

}

.product-card:hover img{

transform:scale(1.08);

}

.product-body{

padding:20px;

}

.product-title{

font-size:24px;

font-weight:700;

margin-bottom:10px;

}

.product-desc{

color:#cbd5e1;

line-height:1.7;

margin-bottom:15px;

}

/* PRICE */

.price-box{

display:flex;

align-items:center;

gap:10px;

margin-bottom:18px;

}

.old-price{

text-decoration:line-through;

color:#94a3b8;

font-size:15px;

}

.price{

font-size:30px;

font-weight:800;

color:#22c55e;

}

/* BADGE */

.badge{

position:absolute;

top:15px;

left:15px;

padding:7px 14px;

border-radius:30px;

font-size:13px;

font-weight:700;

color:white;

}

.badge.hot{

background:#ef4444;

}

.badge.sale{

background:#f59e0b;

}

.badge.new{

background:#22c55e;

}

/* FAVORITE */

.favorite{

position:absolute;

top:15px;

right:15px;

width:42px;

height:42px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

background:rgba(0,0,0,.5);

color:white;

cursor:pointer;

transition:.3s;

}

.favorite:hover{

background:#ef4444;

}

/* STOCK */

.stock{

display:inline-block;

padding:6px 12px;

border-radius:20px;

background:rgba(34,197,94,.15);

color:#22c55e;

font-size:13px;

font-weight:700;

margin-bottom:15px;

}

/* BUTTON */

.buy-btn{

width:100%;

padding:15px;

border:none;

border-radius:15px;

background:linear-gradient(135deg,#2563eb,#3b82f6);

color:white;

font-size:16px;

font-weight:700;

transition:.3s;

cursor:pointer;

}

.buy-btn:hover{

transform:translateY(-3px);

box-shadow:0 15px 30px rgba(37,99,235,.35);

}

/* PAGINATION */

.pagination{

display:flex;

justify-content:center;

gap:12px;

padding-bottom:80px;

}

.page-btn{

width:48px;

height:48px;

display:flex;

justify-content:center;

align-items:center;

background:#111827;

border-radius:12px;

transition:.3s;

cursor:pointer;

}

.page-btn:hover,

.page-btn.active{

background:#2563eb;

}

/* RESPONSIVE */

@media(max-width:992px){

.product-grid{

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

}

}

@media(max-width:768px){

.shop-header h1{

font-size:36px;

}

.shop-header{

padding:60px 20px;

}

.product-grid{

grid-template-columns:1fr;

}

.filter-list{

justify-content:flex-start;

overflow:auto;

padding-bottom:10px;

}

.filter-list::-webkit-scrollbar{

display:none;

}

.shop-search{

padding:0 20px;

}

}