/* ===== Global ===== */
body { margin:0; font-family: Arial, sans-serif; background:#f5f5f5; }
a { text-decoration:none; color:#333; }
img { max-width:100%; display:block; border-radius:8px; }
button { cursor:pointer; }

/* ===== Header ===== */
header {
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 15px; background:#232f3e; color:white; position:sticky; top:0; z-index:100;
}
header img {height:40px;}
.search-bar {flex:1; margin:0 10px; display:flex;}
.search-bar input {flex:1; padding:6px 10px; border-radius:20px; border:none;}
.search-bar button {padding:6px 12px; border:none; border-radius:20px; background:#febd69;}
.cart-icon {position:relative; font-weight:bold; cursor:pointer;}
.cart-badge {position:absolute; top:-5px; right:-10px; background:red; color:white; font-size:0.7em; border-radius:50%; padding:2px 6px;}

/* ===== Hero Banner ===== */
.hero {background:#e7ecef; padding:30px 15px; text-align:center; border-radius:10px; margin:10px;}
.hero h2 {margin-bottom:10px;}
.hero button {padding:12px 25px; background:#febd69; border:none; border-radius:5px;}

/* ===== Categories Scroll ===== */
.categories {display:flex; overflow-x:auto; padding:10px 0; gap:10px; margin:10px 0;}
.categories button {flex:none; padding:8px 15px; border:none; border-radius:20px; background:#febd69;}
.categories button:hover {background:#f3a847;}

/* ===== Products Grid ===== */
.product-list {display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:15px; padding:0 10px 10px 10px;}
.product-item {background:white; border-radius:8px; padding:10px; text-align:center; box-shadow:0 2px 5px rgba(0,0,0,0.1);}
.product-item h3 {font-size:0.95em; margin:8px 0 5px;}
.product-item p {color:#b12704; font-weight:bold; margin:5px 0;}
.product-item button {padding:6px 10px; border:none; border-radius:5px; background:#f0c14b;}

/* ===== Footer ===== */
footer {background:#232f3e; padding:15px; text-align:center; color:white; font-size:0.85em; margin-top:10px; line-height:1.5;}

/* ===== Bottom Nav ===== */
.bottom-nav {
  display:flex; justify-content:space-around; position:fixed; bottom:0; width:100%; background:white; padding:8px 0; box-shadow:0 -2px 5px rgba(0,0,0,0.1); z-index:100;
}
.bottom-nav a {text-align:center; color:#333; font-size:0.8em;}
.bottom-nav img {height:25px; display:block; margin:0 auto;}

/* ===== Responsive ===== */
@media(max-width:768px){
  .product-list {grid-template-columns:repeat(auto-fill,minmax(130px,1fr));}
}