* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: 'Segoe UI', Arial, sans-serif; background: #000; color:#eee; line-height:1.5; }
header { background: #000; padding:1rem 0; text-align:center; }
header h1 { font-size:1rem; color:#b2202a; font-weight:900; letter-spacing:2px; }

a { color: #069; }
a:hover {text-decoration: none;}

nav { background:#222; padding:0.8rem 0; }
nav ul { list-style:none; text-align:center; }
nav ul li { display:inline; margin:0 0.8rem;}
nav ul li a { color:#fff; text-decoration:none; text-transform: uppercase; font-size:0.8rem; }
nav ul li a:hover { color:#369; }

main { max-width:650px; margin:2rem auto; padding:0 1rem; }

h1 { font-size:2rem; font-weight:400; color:#b2202a; margin: 1rem auto; text-align:center; }
h2 { text-align:center; margin:1rem 0; font-size:1.6rem; font-weight:800; color:#b2202a; }

.pirata {
  font-family: "Pirata One", "Trebuchet MS", serif;
  font-weight: 400;
  font-style: normal;
}

.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:2rem; }

.review {
    background:#111; border-radius:15px; overflow:hidden; text-align: left; padding: 30px 20px; font-size: 0.8em;
    transition:transform .3s; box-shadow:0 4px 1px rgba(111,111,111,0.2);
}

.product {
    background:#222; border-radius:15px; overflow:hidden; text-align:center;
    transition:transform .3s; box-shadow:0 4px 1px rgba(111,111,111,0.2);
}
.product:hover { transform:translateY(-4px); }
.product img { width:100%; height:220px; object-fit:contain; background:#fff; padding:1rem; border: 4px solid #369; }
.product h3 { padding:0.8rem 0 0 0; font-size:1.1rem; min-height:20px; }
.price { background: #aaa; color:#000; font-size:1.2rem; font-weight:bold; }
.msrp { color:#ccc; font-size:0.7rem; font-weight:normal; }
.btn {
    display:block; background:#e9a911; color:black; padding:0.9rem;
    text-decoration:none; font-size:1.5rem; letter-spacing:0rem; margin:1rem; font-variant: small-caps;
    border-radius:8px;
}
.btn:hover { background:#ffbf27; }
#search-container { text-align:center; margin:2rem 0; }
#search-input {
    padding:1rem 1.5rem; width:100%; max-width:600px;
    font-size:1.1rem; border:2px solid #432; border-radius:50px;
    background:#111; color:white;
}
#no-results { text-align:center; color:#432; font-size:1.4rem; margin:3rem; display:none; }

footer { background:#000; color:#888; text-align:center; padding:1rem 0 3rem; margin-top:2rem; font-size:0.7rem; font-variant: small-caps; }
@media (max-width:768px) { nav ul li { display:inline; margin:1rem 0.3rem; } }