/* FINAL — CYBER-ZOMBIE CITY BACKGROUND + BLACK OVERLAY */
* { margin:0; padding:0; box-sizing:border-box; }

body {
  background: url('images/cyber-zombie-city.png') center center fixed;
  background-size: cover;
  color:#fff;
  font-family:'Courier New',monospace;
  text-align:center;
  min-height:100vh;
  position:relative;
}

/* Dark overlay — keeps everything readable but lets the city bleed through */
body::before {
  content:"";
  position:fixed;
  top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,0.82);   /* ← adjust last number: 0.75 = more city, 0.88 = darker */
  z-index:-1;
}

header {
  padding:40px 20px;
}
.logo {
  width:300px;
  margin-bottom:20px;
  filter:drop-shadow(0 0 40px #c00);
}
h1 {
  font-size:3.8em;
  color:#c00;
  text-shadow:0 0 50px #f00;
  letter-spacing:14px;
}

/* Categories */
.categories {
  display:flex;
  flex-wrap:wrap;
  gap:40px;
  justify-content:center;
  margin:80px auto;
  max-width:1200px;
}
.category {
  width:340px;
  padding:70px 20px;
  border-radius:22px;
  background:rgba(20,20,30,0.85);
  backdrop-filter:blur(8px);
  border:5px solid #c00;
  cursor:pointer;
  transition:0.4s ease;
  box-shadow:0 0 50px rgba(255,0,0,0.6);
}
.category:hover { transform:scale(1.08); box-shadow:0 0 100px rgba(255,0,0,0.9); }
.category.herb { border-color:#0f0; box-shadow:0 0 50px rgba(0,255,0,0.6); }
.category.herb:hover { box-shadow:0 0 100px rgba(0,255,0,0.9); }
.category.box { border-color:#0ff; box-shadow:0 0 50px rgba(0,255,255,0.6); }

.category h2 { font-size:2.6em; margin-bottom:12px; }
.category p { font-size:1.3em; color:#aaa; }

/* Gallery */
.gallery-grid {
  display:none;
  grid-template-columns:repeat(auto-fill, minmax(320px,1fr));
  gap:30px;
  padding:70px 40px;
  max-width:1400px;
  margin:0 auto;
}
.gallery-grid a img {
  width:100%;
  height:auto;
  border-radius:14px;
  border:4px solid #333;
  transition:0.4s;
}
.gallery-grid a:hover img {
  border-color:#c00;
  box-shadow:0 0 40px #f00;
}
.gallery-grid a[href*="herb"] img:hover { border-color:#0f0; box-shadow:0 0 40px #0f0; }

/* Prices under images */
.price-caption {
  margin-top:14px;
  font-size:2em;
  font-weight:bold;
  color:#0f0;
  text-shadow:0 0 25px #0f0;
  background:rgba(0,0,0,0.8);
  padding:10px 20px;
  border-radius:10px;
  display:inline-block;
}

/* Active category glow */
.category.active {
  transform:scale(1.08);
  box-shadow:0 0 120px rgba(255,0,0,0.95) !important;
}
.category.herb.active { box-shadow:0 0 120px rgba(0,255,0,0.95) !important; }

footer {
  margin:140px 0 60px;
  color:#555;
  letter-spacing:4px;
}

/* Mobile */
@media (max-width:768px) {
  header h1 { font-size:2.6em; }
  .logo { width:220px; }
  .category { width:90%; padding:50px 20px; }
  .gallery-grid { padding:40px 20px; gap:20px; }
}