*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#0a0a0a;color:#f5f5f5;font:14px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
header{padding:32px 16px 16px;text-align:center;border-bottom:1px solid #222}
h1{font-size:24px;letter-spacing:.15em;text-transform:uppercase;font-weight:600}
.tag{color:#888;font-size:12px;margin-top:6px;letter-spacing:.1em;text-transform:uppercase}
nav#filters{margin-top:16px;display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
nav#filters button{background:none;color:#aaa;border:1px solid #333;padding:6px 12px;cursor:pointer;font:inherit;letter-spacing:.05em;text-transform:uppercase;font-size:11px;transition:.15s}
nav#filters button:hover{color:#fff;border-color:#666}
nav#filters button.active{background:#f5f5f5;color:#0a0a0a;border-color:#f5f5f5}
main#grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:2px;padding:2px}
.card{background:#111;cursor:pointer;position:relative;aspect-ratio:1;overflow:hidden;transition:.2s}
.card img{width:100%;height:100%;object-fit:cover;display:block}
.card:hover img{transform:scale(1.03)}
.card .meta{position:absolute;left:0;right:0;bottom:0;padding:8px 10px;background:linear-gradient(transparent,rgba(0,0,0,.85));font-size:12px}
.card .name{font-weight:500;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .price{color:#aaa;font-size:11px}
@media (min-width:768px){main#grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}}
dialog#lightbox{background:#0a0a0a;color:#f5f5f5;border:none;max-width:100vw;max-height:100vh;width:100%;height:100%;padding:0;margin:0}
dialog#lightbox::backdrop{background:rgba(0,0,0,.95)}
#close{position:fixed;top:12px;right:12px;background:none;color:#fff;border:none;font-size:32px;cursor:pointer;z-index:10;width:40px;height:40px;line-height:1}
#lb-photos{display:flex;flex-direction:column;gap:2px;padding-top:40px}
#lb-photos img{width:100%;display:block}
#lb-meta{padding:24px 16px 64px;text-align:center}
#lb-meta h2{font-size:20px;font-weight:500;margin-bottom:8px}
#lb-meta p{margin:4px 0;color:#aaa}
#lb-meta #lb-price{color:#f5f5f5;font-size:18px}
#lb-meta #lb-quality{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#888;margin-top:12px}
#lb-meta a{display:inline-block;margin-top:24px;background:#f5f5f5;color:#0a0a0a;padding:12px 32px;text-decoration:none;font-weight:500;letter-spacing:.1em;text-transform:uppercase;font-size:12px}
@media (min-width:900px){#lb-photos{display:grid;grid-template-columns:1fr 1fr;gap:4px}}