* { margin:0; padding:0; box-sizing:border-box; font-family:'Segoe UI', sans-serif; }
body { background:#0d0d0d; color:#f5f5f5; }

/* Navbar */
header {
  background:#111;
  border-bottom:1px solid #ffb400;
  padding:15px 20px;
  display:flex; justify-content:space-between; align-items:center;
  position:sticky; top:0; z-index:1000;
}
.logo { display:flex; align-items:center; gap:10px; }
.logo img { height:40px; }
.logo span { font-size:1.3rem; font-weight:bold; color:#ffb400; }
nav a { margin-left:20px; color:#fff; text-decoration:none; }
nav a:hover { color:#ffb400; }

/* Search Bar */
.search-bar {
  background:#1a1a1a;
  padding:15px 20px;
  display:flex; justify-content:center;
}
.search-bar input {
  width:100%; max-width:500px;
  padding:10px 15px;
  border:none; border-radius:30px;
  font-size:1rem;
}

/* Shop Layout */
.shop-layout {
  max-width:1200px;
  margin:20px auto;
  padding:0 15px;
  display:grid;
  grid-template-columns:250px 1fr;
  gap:20px;
}

/* Sidebar Filters */
.filters {
  background:#1a1a1a;
  border-radius:10px;
  padding:20px;
  box-shadow:0 0 10px rgba(0,0,0,0.5);
  height:fit-content;
}
.filters h3 {
  margin-bottom:15px; font-size:1.2rem; color:#ffb400;
}
.filters label {
  display:block; margin:8px 0;
  font-size:0.9rem; color:#ddd;
}
.filters input { margin-right:6px; }

/* Products Grid */
.products {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:20px;
}
.product-item {
  background:#1a1a1a;
  border-radius:10px;
  box-shadow:0 4px 10px rgba(0,0,0,0.4);
  overflow:hidden;
  transition:transform 0.3s;
  display:flex; flex-direction:column;
}
.product-item:hover { transform:translateY(-5px); }
.product-item img { width:100%; height:200px; object-fit:cover; }
.product-info { padding:15px; flex:1; }
.product-info h4 { font-size:1rem; font-weight:bold; color:#ffb400; margin-bottom:5px; }
.rating { font-size:0.85rem; color:#ffcc33; margin-bottom:5px; }
.rating span { color:#aaa; margin-left:5px; }
.meta { font-size:0.8rem; color:#ccc; margin-bottom:8px; }
.price { font-size:1rem; margin-bottom:6px; }
.current { color:#ffb400; font-weight:bold; margin-right:6px; }
.old { text-decoration:line-through; color:#777; margin-right:6px; }
.discount { color:#4caf50; font-weight:600; }
.offer { font-size:0.8rem; color:#aaa; margin-bottom:8px; }
.view-link { font-size:0.9rem; color:#ffb400; font-weight:bold; text-decoration:none; display:inline-block; margin-top:5px; }
.view-link:hover { text-decoration:underline; }

/* Mobile Layout */
@media(max-width:768px){
  .shop-layout { grid-template-columns:1fr; }
  .filters { display:none; } /* hide sidebar on mobile */

  .product-item { flex-direction:row; padding:15px; margin-bottom:15px; height:auto; }
  .product-item img { width:120px; height:120px; border-radius:8px; }
  .product-info { padding-left:15px; }

  /* Floating Filter/Sort Bar */
  .mobile-filter-bar {
    display:flex; justify-content:space-around; align-items:center;
    position:sticky; top:60px; z-index:900;
    background:#111; border-bottom:1px solid #ffb400;
    padding:10px;
  }
  .mobile-filter-bar button {
    flex:1; margin:0 5px; padding:8px 10px;
    background:#1a1a1a; color:#ffb400;
    border:1px solid #ffb400; border-radius:20px;
    font-size:0.85rem; cursor:pointer;
  }
  .mobile-filter-bar button:hover { background:#ffb400; color:#0d0d0d; }
}

/* Footer */
footer {
  background:#000;
  border-top:1px solid #ffb400;
  padding:20px;
  text-align:center;
  color:#aaa;
  margin-top:40px;
}