/* Pro filmstrip remake with CRT/VHS effects */
*{box-sizing:border-box} html,body{height:100%} body{margin:0; font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; background:#060606; color:#eee}
img{display:block; max-width:100%; height:auto}
button{font:inherit; cursor:pointer}

:root{
  --accent:#ff8c00;
  --panel:#0e0e0e;
  --border:#1a1a1a;
}

/* Overlays */
.overlay{ pointer-events:none; position:fixed; inset:0; z-index:1 }
.fx-scanlines{
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.03) 0, rgba(255,255,255,.03) 1px, transparent 2px, transparent 4px);
  mix-blend-mode: soft-light;
}
.fx-grain{
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQIW2O0dOnSfwAJNANoKkP2iQAAAABJRU5ErkJggg==');
  opacity:.08; filter:contrast(140%) brightness(110%);
}
.fx-vignette{
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.55) 100%);
}

/* Header / Footer */
.hdr,.ftr{ position:fixed; left:0; right:0; display:flex; align-items:center; justify-content:space-between; padding:10px 14px; z-index:2;
  background:linear-gradient(#0c0c0c,#070707); border-bottom:1px solid #000 }
.ftr{ bottom:0; border-top:1px solid #000; border-bottom:none }
.wordmark{ height:20px; filter:invert(90%) contrast(110%) }
.crumbs{ display:flex; gap:8px }
.dot{ width:10px; height:10px; border-radius:50%; background:#2a2a2a; border:1px solid #000 }
.dot.is-active{ background:var(--accent); box-shadow:0 0 8px var(--accent) }
.keys{ color:#9a9a9a; font-size:12px }

/* Filmstrip */
.strip-wrap{ position:fixed; left:0; right:0; top:52px; height:200px; display:grid; place-items:center; z-index:0 }
.filmstrip{ width:min(96vw, 1400px); height:auto; display:block; filter:contrast(110%) }

/* Content frames */
.frames{ position:fixed; left:0; right:0; top:260px; bottom:48px; overflow:auto; padding:12px; z-index:2 }
.frame{ display:none; background:var(--panel); border:1px solid var(--border); border-radius:12px; box-shadow:0 12px 40px rgba(0,0,0,.55), inset 0 0 0 1px #000; padding:18px; max-width:1100px; margin:0 auto; animation:fadeIn .35s ease both }
.frame.is-active{ display:block }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }

h1,h2{ margin:0 0 8px; letter-spacing:.06em; font-weight:900 }
.tag{ margin:0 0 12px; color:#bdbdbd }
.cta,.btn{ padding:10px 14px; border-radius:10px; border:1px solid #333; background:#161616; color:#eee }
.cta:hover,.btn:hover{ border-color:#444 }
.btn.ghost{ background:transparent; color:#bbb }

/* Shop / Gallery */
.products{ list-style:none; padding:0; margin:8px 0; display:grid; gap:10px }
.product{ display:grid; grid-template-columns:120px 1fr; gap:12px; align-items:center; background:#0f0f0f; border:1px solid #1a1a1a; border-radius:10px; padding:10px }
.product .price{ color:#ffc280; font-weight:800 }
.grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:10px }
figure{ margin:0; background:#0d0d0d; border:1px solid #1a1a1a; border-radius:8px; overflow:hidden }
figcaption{ padding:6px 8px; color:#aaa; font-size:12px }

/* Modal shop */
.modal{ position:fixed; inset:10% 6% auto 6%; background:#0b0b0b; border:1px solid #1a1a1a; border-radius:12px; box-shadow:0 30px 90px rgba(0,0,0,.8), inset 0 0 0 1px #000; transform:translateY(16px) scale(.98); opacity:0; pointer-events:none; z-index:3 }
.modal[aria-hidden="false"]{ transform:none; opacity:1; pointer-events:auto; transition:.28s ease }
.modal-chrome{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid #1a1a1a; background:linear-gradient(#121212,#0a0a0a) }
.modal-chrome button{ width:28px; height:28px; border-radius:8px; border:1px solid #2a2a2a; background:#111; color:#eee }
.modal-body{ padding:12px; min-height:220px; }

/* Mobile tweaks */
@media (max-width: 900px){
  .strip-wrap{ height:160px }
  .frames{ top:220px }
  .grid{ grid-template-columns: 1fr 1fr }
  .product{ grid-template-columns: 1fr }
}
@media (max-width: 620px){
  .strip-wrap{ height:140px }
  .frames{ top:200px }
  .grid{ grid-template-columns: 1fr }
}