/* === Retro Soda Diner theme === */

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Montserrat', system-ui, sans-serif;
  background: linear-gradient(180deg,#fff6f2 0%, #f9efe9 100%);
  color:#402323;
  min-height:100vh;
}

/* HEADER */
.topbar {
  padding: 28px 18px 12px;
  text-align:center;
  border-bottom:6px solid #e9cfc7;
  box-shadow:0 6px 18px rgba(160,40,40,0.06);
}
.brand { display:flex; align-items:center; justify-content:center; gap:12px; }
.brand h1 {
  font-family:'Lobster',cursive;
  font-size:clamp(28px,4vw,44px);
  color:#af0718;
  text-shadow:1px 1px 0 #fffefc;
}
.accent { color:#054f4f; }
.cap {
  width:48px; height:48px;
  border-radius:50%;
  background:#faefe8;
  border:3px solid #f7d6d3;
  display:flex; align-items:center; justify-content:center;
  box-shadow: inset 0 3px 0 rgba(255,255,255,0.6);
}
.cap-left { transform:rotate(-8deg); }
.cap-right { transform:rotate(8deg); }
.tagline { margin-top:8px; color:#6b3b3b; font-weight:500; }

/* CONTROLS */
.controls {
  display:flex; flex-wrap:wrap; gap:10px;
  justify-content:center; align-items:center; margin-top:14px;
}
.controls input, .controls select {
  padding:10px 12px;
  border:2px solid #f0cfcf;
  border-radius:10px;
  background:#fff;
  font-size:0.95rem;
  min-width:180px;
}
.controls input:focus, .controls select:focus {
  border-color:#b33a3a;
  box-shadow:0 6px 18px rgba(160,40,40,0.12);
  outline:none;
}
.btn-row { display:flex; gap:8px; }

.soda-cap {
  background: linear-gradient(180deg,#fffbf9 0%, #ffe9e6 70%);
  border:3px solid #f0cfcf;
  border-radius:999px;
  padding:8px 14px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 6px 12px rgba(120,30,30,0.12);
  transition:transform .12s ease, box-shadow .12s ease;
}
.soda-cap:hover { transform:translateY(-3px); box-shadow:0 12px 18px rgba(120,30,30,0.18); }
.soda-cap.small { padding:6px 10px; font-size:0.9rem; }

/* GALLERY */
main { padding:26px 18px 60px; max-width:1200px; margin:0 auto; }
.gallery {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:20px;
}
.card {
  background: linear-gradient(180deg,#fff 0%, #fff9f7 100%);
  border:3px solid #fff0ef;
  border-radius:12px;
  padding:10px;
  text-align:center;
  box-shadow:0 10px 18px rgba(50,20,20,0.07);
  transition:transform .18s ease, box-shadow .18s ease;
  position:relative;
  cursor:pointer;
}
.card:hover { transform:translateY(-6px) scale(1.02); box-shadow:0 18px 30px rgba(50,20,20,0.12); }
.photo-frame {
  background:linear-gradient(180deg,#fff 0%, #fffbfa 100%);
  padding:8px;
  border-radius:8px;
  border:1px solid #f3e3e3;
  box-shadow:0 6px 14px rgba(0,0,0,0.06);
}
.card img {
  width:100%; height:220px; object-fit:contain;
  border-radius:6px;
  background:#fff;
}
.label { margin-top:8px; font-weight:600; color:#5a2323; }
.meta { font-size:0.82rem; color:#8b4b4b; margin-top:4px; }
.sticker {
  position:absolute; top:-12px; left:10px;
  background:#ffdede; color:#7a1f1f;
  padding:6px 8px; border-radius:999px; font-weight:700;
  font-size:0.8rem; box-shadow:0 6px 10px rgba(120,20,20,0.08);
  transform:rotate(-6deg);
}

/* LIGHTBOX */
.lightbox {
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(10,10,10,0.6);
  backdrop-filter:blur(3px);
  z-index:80;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
}
.lightbox.active {
  opacity:1;
  pointer-events:auto;
}
.lightbox-panel {
  background:linear-gradient(180deg,#fffaf8 0%, #fff7f5 100%);
  padding:18px; border-radius:12px; max-width:900px; width:100%;
  box-shadow:0 20px 40px rgba(10,10,10,0.45); position:relative;
  transform:scale(0.95);
  transition:transform .3s ease;
}
.lightbox.active .lightbox-panel { transform:scale(1); }
.lightbox-panel img { width:100%; max-height:70vh; object-fit:contain; border-radius:8px; background:#fff; }
.lightbox-panel figcaption { margin-top:8px; color:#5c2525; font-weight:700; text-align:center; }
.close {
  position:absolute; top:8px; right:10px;
  background:transparent; border:none;
  font-size:28px; color:#6b3b3b; cursor:pointer;
}
.lightbox-actions {
  display:flex; justify-content:center; gap:8px; margin-top:10px;
}

/* Hide lightbox by default */
.lightbox.hidden { display:none !important; }

.lb-info {
  margin-top: 12px;
  padding: 10px 14px;
  background: #fff3f0;
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0,0,0,0.05);
  font-size: 0.95rem;
  color: #532626;
  text-align: left;
  line-height: 1.4;
}
.lb-info p { margin: 4px 0; }
.lb-info strong { color: #8a2222; font-weight: 700; }


/* FOOTER */
.footer { text-align:center; padding:14px; color:#7b4a4a; }

/* RESPONSIVE */
/* --- Responsive tuning for phones & tablets --- */
@media (max-width: 900px) {
  .gallery {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 18px;
  }
  .card img {
    height: 260px; /* Taller images for better can proportions */
  }
}

@media (max-width: 640px) {
  .gallery {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
  }
  .card img {
    height: 240px; /* Still larger than before */
  }
  .card { padding: 12px; }
  .controls input, .controls select { min-width: 140px; }
  .cap { width: 42px; height: 42px; font-size: 0.95rem; }
}