chek kero css ko ,body{margin:0;font-family:Poppins;background:#fafafa}

.hero{text-align:center;padding:40px 15px;background:#fff}

.banner{max-width:1200px;margin:auto}
.banner img{width:100%;border-radius:10px;margin-bottom:10px}

/* SECTION */
.section-header{
  max-width:1200px;
  margin:30px auto 10px;
  padding:0 20px;
  text-align:center;
  position:relative;
}

.view-all{
  position:absolute;
  right:20px;
  top:50%;
  transform:translateY(-50%);
  font-size:14px;
  color:#007bff;
  font-weight:600;
  text-decoration:none;
}

/* CATEGORY */
.categories-wrapper{position:relative;max-width:1200px;margin:auto}
.categories{display:flex;gap:15px;overflow-x:auto;padding:15px}
.cat{min-width:150px;background:#fff;border-radius:12px;padding:8px;box-shadow:0 3px 10px rgba(0,0,0,.08)}
.cat img{width:100%;height:110px;object-fit:cover;border-radius:10px}
.cat p{text-align:center;font-size:13px;font-weight:600}

/* GRID */
.grid{
 display:grid;
 grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
 gap:20px;
 padding:20px;
 max-width:1200px;
 margin:auto;
}

.card{
 background:#fff;
 border-radius:14px;
 overflow:hidden;
 box-shadow:0 4px 12px rgba(0,0,0,.08);
 position:relative;
 cursor:pointer;
}

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

.card h3{font-size:14px;margin:10px}

.price{margin:5px 10px;font-weight:bold;color:#e91e63}

.rating{font-size:12px;color:#ffb400;margin:0 10px}

.badge{position:absolute;background:#ff5a5f;color:#fff;padding:4px 8px;font-size:11px;border-radius:6px;margin:10px}

.btns{display:flex;gap:8px;padding:10px}

.btn{flex:1;text-align:center;padding:8px;border-radius:8px;font-size:13px;text-decoration:none}
.add{background:#111;color:#fff}
.buy{background:#ff5a5f;color:#fff}