body{
font-family:Arial;
margin:0;
background:#f5f5f5;
}

header{
background:#111;
color:white;
padding:15px;
display:flex;
justify-content:space-between;
align-items:center;
}

.nav button{
margin-left:10px;
}

.search{
padding:15px;
background:white;
}

#products{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
gap:15px;
padding:15px;
}

.product{
background:white;
padding:10px;
border-radius:10px;
text-align:center;
}

.product img{
width:100%;
height:150px;
object-fit:contain;
}

.price{
font-weight:bold;
}


.modal.hidden{display:none;}
.modal{position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; padding:12px; z-index:9999;}
.modal-card{background:#fff; width:min(520px, 100%); border-radius:14px; padding:14px;}
.modal-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;}
.modal-head button{border:0; background:#eee; border-radius:10px; padding:6px 10px; cursor:pointer;}
.option-row{display:flex; gap:8px; margin:10px 0;}
select{padding:10px; border-radius:10px; border:1px solid #ddd; flex:1;}