/* ============================= */
/* GLOBAL RESET */
/* ============================= */

body{
margin:0;
font-family:'Poppins',sans-serif;
background:#f8f9fa;
}

/* ============================= */
/* HEADER FIX (ntacyo ibangamira) */
/* ============================= */

.main-header{
position:sticky;
top:0;
background:#ffffff;
z-index:1000;
box-shadow:0 2px 8px rgba(0,0,0,0.05);
}

/* ============================= */
/* SHOP CONTAINER */
/* ============================= */

.shop-container{
max-width:1300px;
margin:10px auto 40px auto; /* 🔥 Umwanya muto cyane hejuru */
padding:15px 5% 40px 5%;     /* 🔥 Spacing nto kandi clean */
}

/* ============================= */
/* TITLE */
/* ============================= */

.shop-title{
text-align:center;
margin-bottom:25px;
font-size:26px;
font-weight:700;
color:#222;
}

/* ============================= */
/* FILTER BUTTONS */
/* ============================= */

.filters{
display:flex;
gap:12px;
flex-wrap:wrap;
justify-content:center;
margin-bottom:30px;
}

.filters button{
padding:8px 18px;
border:none;
background:#e9ecef;
border-radius:25px;
cursor:pointer;
transition:all 0.3s ease;
font-size:14px;
font-weight:500;
}

.filters button.active,
.filters button:hover{
background:#0d6efd;
color:#fff;
transform:translateY(-2px);
}

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

.products-grid{
display:grid;
gap:22px;
}

/* Desktop */
@media(min-width:1200px){
.products-grid{
grid-template-columns:repeat(5,1fr);
}
}

/* Tablet */
@media(min-width:768px) and (max-width:1199px){
.products-grid{
grid-template-columns:repeat(4,1fr);
}
}

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

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

.card{
background:#ffffff;
border-radius:16px;
overflow:hidden;
box-shadow:0 6px 18px rgba(0,0,0,0.06);
transition:all 0.3s ease;
position:relative;
}

.card:hover{
transform:translateY(-6px);
box-shadow:0 10px 25px rgba(0,0,0,0.1);
}

.card img{
width:100%;
height:200px;
object-fit:cover;
display:block;
}

/* ============================= */
/* PRODUCT BADGE */
/* ============================= */

.product-badge{
position:absolute;
top:12px;
left:12px;
background:#dc3545;
color:#ffffff;
padding:5px 12px;
font-size:11px;
border-radius:20px;
font-weight:600;
}

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

.card-content{
padding:15px;
}

.card-content h4{
margin:0 0 8px 0;
font-size:15px;
font-weight:600;
color:#222;
}

/* ============================= */
/* PRICE */
/* ============================= */

.price{
color:#0d6efd;
font-weight:700;
font-size:15px;
}

.old-price{
text-decoration:line-through;
color:#999;
font-size:13px;
margin-left:6px;
}

/* ============================= */
/* ADD TO CART BUTTON */
/* ============================= */

.add-to-cart{
width:100%;
margin-top:12px;
padding:12px 0;
border:none;
border-radius:14px;
background:linear-gradient(135deg,#0d6efd,#0b5ed7);
color:#fff;
font-weight:600;
font-size:14px;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
transition:all 0.3s ease;
}

.add-to-cart:hover{
transform:translateY(-2px);
box-shadow:0 6px 18px rgba(0,0,0,0.15);
}

.add-to-cart.added{
background:linear-gradient(135deg,#28a745,#20c997);
}

/* ============================= */
/* LOAD MORE BUTTON */
/* ============================= */

.load-more{
margin:35px auto 0 auto;
display:block;
padding:10px 28px;
border:none;
background:#0d6efd;
color:white;
border-radius:30px;
cursor:pointer;
font-weight:600;
transition:0.3s;
}

.load-more:hover{
background:#0b5ed7;
transform:translateY(-2px);
}