/* General Reset & Base */
* { margin:0; padding:0; box-sizing:border-box; font-family:Arial, sans-serif; }
body { background:#111; color:#eee; }
a { color:#fff; text-decoration:none; }
header { background:#222; padding:1em; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; }
header h1 { font-size:1.5em; }
nav ul { display:flex; list-style:none; gap:1em; }
nav a.active { font-weight:bold; color:#f0f; }

/* Footer */
footer { background:#222; padding:1em; text-align:center; margin-top:2em; }

/* Intro/Home */
.intro { padding:2em; text-align:center; }
.featured-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1em; padding:1em; }
.featured-item { background:#333; padding:1em; border-radius:8px; text-align:center; height:300px; display:flex; flex-direction:column; justify-content:end; color:#fff; background-size:cover; background-position:center; }

/* Catalog */
.controls { display:flex; justify-content:center; gap:1em; padding:1em; flex-wrap:wrap; }
#catalog-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1em; padding:1em; }
.catalog-item { background:#222; border-radius:10px; overflow:hidden; display:flex; flex-direction:column; text-align:center; }
.catalog-item .img { height:180px; width:100%; background-size:cover; background-position:center; }
.catalog-item h3 { margin:0.5em 0; }
.catalog-item p.meta { font-size:0.9em; color:#aaa; margin-bottom:0.5em; }

/* About & Contact */
.about-section, .contact-section { padding:2em; max-width:800px; margin:0 auto; }
input, select, textarea { width:100%; padding:0.5em; margin:0.5em 0; border-radius:5px; border:none; }
button { background:#f0f; color:#111; padding:0.5em 1em; border:none; border-radius:5px; cursor:pointer; }

/* Responsive */
@media(max-width:600px){ nav ul{ flex-direction:column; gap:0.5em; } }