*{margin:0;padding:0;box-sizing:border-box;font-family:Arial,sans-serif}
body{background:#f5f5f5;color:#222}
header{display:flex;justify-content:space-between;align-items:center;padding:15px 6%;background:#111;color:#fff;position:sticky;top:0}
nav{display:flex;gap:20px;flex-wrap:wrap}
nav a{color:#fff;text-decoration:none}

.overlay{background:rgba(0,0,0,.45);width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#fff;text-align:center;padding:20px}
.overlay h1{font-size:clamp(2rem,5vw,4rem)}
.overlay p{margin:15px 0;font-size:1.2rem}
.btn{background:#ff4d4d;color:#fff;padding:12px 24px;text-decoration:none;border-radius:6px}
.wrap{padding:50px 6%}
.wrap h2{text-align:center;margin-bottom:30px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.card{background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 6px 15px rgba(0,0,0,.12);transition:.3s}
.card:hover{transform:translateY(-6px)}
.card img{width:100%;height:300px;object-fit:cover}
.content{padding:18px}
.badge{display:inline-block;background:#e91e63;color:#fff;padding:4px 10px;border-radius:20px;font-size:12px}
.price{margin:12px 0;font-size:1.2rem;font-weight:bold}
.price del{color:#777;font-size:.95rem}
button{width:100%;padding:12px;background:#111;color:#fff;border:none;border-radius:6px;cursor:pointer}
button:hover{background:#ff4d4d}
footer{text-align:center;background:#111;color:#fff;padding:20px;margin-top:40px}
@media(max-width:768px){
header{flex-direction:column;gap:10px}
nav{justify-content:center}
.hero{height:55vh}
}