@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap');

*{box-sizing:border-box}
body{
margin:0;
font-family:'Poppins',sans-serif;
background:black;
color:white;
animation:fadeIn 1s ease-in-out;
}

/* NAVBAR */
nav{
display:flex;
align-items:center;
justify-content:space-between;
padding:15px 30px;
background:#111;
box-shadow:0 0 15px rgba(255,0,0,.7);
}
nav h2 a{
color:#ff4d4d;
text-decoration:none;
text-shadow:0 0 8px red;
}
nav ul{
list-style:none;
display:flex;
gap:20px;
}
nav a{
color:#ff4d4d;
text-decoration:none;
transition:.3s;
}
nav a:hover{color:red}

/* SEARCH */
nav input{
padding:8px 14px;
border-radius:8px;
border:2px solid #ff4d4d;
background:black;
color:white;
box-shadow:0 0 10px rgba(255,0,0,.5);
}

/* DROPDOWN */
.dropdown{position:relative}
.dropdown-content{
display:none;
position:absolute;
top:30px;
background:#111;
min-width:220px;
box-shadow:0 0 15px rgba(255,0,0,.7);
border-radius:8px;
z-index:99;
}
.dropdown-content a{
display:block;
padding:10px 15px;
}
.dropdown-content a:hover{
background:#ff4d4d;
color:black;
}
.dropdown:hover .dropdown-content{display:block}

/* HERO */
.hero{
text-align:center;
margin-top:120px;
}
.hero span{
color:#ff4d4d;
text-shadow:0 0 10px red;
}

/* TITLES */
.title{
text-align:center;
color:#ff4d4d;
margin:40px 0;
}

/* PRODUCT GRID */
.products-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
padding:40px;
}
.product-card{
background:#111;
padding:20px;
border-radius:12px;
text-align:center;
box-shadow:0 0 15px rgba(255,0,0,.5);
transition:.3s;
}
.product-card:hover{
transform:scale(1.05);
box-shadow:0 0 25px rgba(255,0,0,1);
}
.product-card img{
width:100%;
height:160px;
object-fit:cover;
border-radius:8px;
}
.product-card h3{color:#ff4d4d}
.price{color:#999}

/* QTY + ACTIONS */
.qty,.actions{
display:flex;
justify-content:center;
gap:10px;
margin-top:10px;
}
button{
background:#ff4d4d;
border:none;
padding:8px 14px;
border-radius:8px;
cursor:pointer;
box-shadow:0 0 10px rgba(255,0,0,.5);
}
button:hover{
background:black;
color:#ff4d4d;
}
.wishlist{
background:black;
border:2px solid #ff4d4d;
color:#ff4d4d;
}

/* CART */
#cart{
max-width:600px;
margin:40px auto;
background:#111;
padding:20px;
border-radius:10px;
box-shadow:0 0 15px red;
}
#cart p{
display:flex;
justify-content:space-between;
border-bottom:1px solid #333;
padding:10px 0;
}
#total{
text-align:center;
color:#ff4d4d;
font-size:1.5rem;
}

/* CONTACT */
.contact-box{
max-width:500px;
margin:40px auto;
background:#111;
padding:30px;
border-radius:10px;
box-shadow:0 0 15px red;
}
.contact-box input,
.contact-box textarea{
width:100%;
padding:12px;
margin:10px 0;
background:black;
border:2px solid red;
color:white;
border-radius:8px;
}

/* RESPONSIVE */
@media(max-width:900px){
.products-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:500px){
.products-grid{grid-template-columns:1fr;}
nav{flex-direction:column;gap:10px}
}

/* ANIM */
@keyframes fadeIn{
from{opacity:0;transform:translateY(20px)}
to{opacity:1;transform:translateY(0)}
}