*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial,sans-serif;
}

body{
background:#0f172a;
color:white;
}

header{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px;
background:#111827;
position:sticky;
top:0;
gap:15px;
flex-wrap:wrap;
box-shadow:0 2px 10px rgba(0,0,0,.3);
}

header h1{
color:#38bdf8;
}

#search{
padding:12px;
border:none;
border-radius:8px;
width:280px;
background:#1e293b;
color:white;
outline:none;
}

#cart{
background:#38bdf8;
padding:12px 18px;
border-radius:10px;
font-weight:bold;
color:#000;
}

#count{
background:#000;
color:#fff;
padding:2px 8px;
border-radius:20px;
margin-right:8px;
}

main{
padding:40px;
}

#products{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:20px;
}

.product{
background:#1e293b;
padding:20px;
border-radius:14px;
transition:.25s;
box-shadow:0 5px 15px rgba(0,0,0,.25);
}

.product:hover{
transform:translateY(-6px);
}

.product h2{
margin-bottom:15px;
font-size:22px;
}

.product p{
font-size:20px;
color:#38bdf8;
margin-bottom:20px;
}

button{
width:100%;
padding:12px;
border:none;
border-radius:10px;
background:#38bdf8;
font-size:16px;
font-weight:bold;
cursor:pointer;
transition:.2s;
}

button:hover{
background:#0ea5e9;
}

@media(max-width:700px){

header{
flex-direction:column;
}

#search{
width:100%;
}

}