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


body{

background:#f1f3f6;

}



/* HEADER */


.header{

height:60px;
background:#2874f0;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 15px;

}


.logo{

background:white;
height:38px;
width:100px;
border-radius:6px;
overflow:hidden;

}


.logo img{

height:100%;
width:100%;
object-fit:contain;

}


.cart{

color:white;
font-size:22px;

}




/* SEARCH */


.search{

margin:12px;
height:45px;
background:white;
border-radius:8px;
display:flex;
align-items:center;
padding:0 15px;
box-shadow:0 2px 8px rgba(0,0,0,.1);

}


.search i{

color:#2874f0;

}


.search input{

border:none;
outline:none;
width:100%;
margin-left:10px;

}





/* BANNER */


.banner{

width:100%;
height:170px;

}


.banner img{

width:100%;
height:100%;
object-fit:cover;

}






/* TIMER */


.sale-box{

background:white;
margin:12px;
padding:15px;
border-radius:12px;
box-shadow:0 5px 18px rgba(0,0,0,.15);
border:1px solid #eee;

}


.sale-title{

text-align:center;
font-size:14px;
font-weight:800;
color:#222;
display:flex;
justify-content:center;
align-items:center;
gap:8px;

}



.live-dot{

height:12px;
width:12px;
background:red;
border-radius:50%;
display:inline-block;
animation:pulse 1s infinite;

}



@keyframes pulse{

0%{
box-shadow:0 0 0 0 rgba(255,0,0,.7);
}

70%{
box-shadow:0 0 0 10px rgba(255,0,0,0);
}

100%{
box-shadow:0 0 0 0 rgba(255,0,0,0);
}

}




.timer-box{

margin-top:15px;
display:flex;
justify-content:center;
align-items:center;
gap:8px;

}



.timer-box div{

height:60px;
width:60px;
background:#fff;
border-radius:8px;
border:1px solid #ddd;
box-shadow:0 4px 12px rgba(0,0,0,.15);
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;

}



.timer-box b{

font-size:22px;
color:#2874f0;

}


.timer-box small{

font-size:10px;
color:#777;

}


.timer-box span{

font-size:25px;
font-weight:bold;

}





/* PRODUCTS */


.products{

padding:12px;

}



.products h2{

font-size:20px;
margin-bottom:12px;

}



.product-grid{

display:grid;
grid-template-columns:repeat(2,1fr);
gap:12px;

}



.product-card{

background:white;
padding:10px;
border-radius:12px;
position:relative;
box-shadow:0 4px 15px rgba(0,0,0,.1);

}



.sale-tag{

position:absolute;
top:8px;
left:8px;
background:red;
color:white;
font-size:10px;
padding:5px 8px;
border-radius:20px;

}



.product-card img{

width:100%;
height:150px;
object-fit:contain;

}



.product-card h3{

font-size:14px;
height:35px;
overflow:hidden;

}



.rating{

font-size:12px;
color:#388e3c;
margin:8px 0;

}



.price del{

font-size:12px;
color:#777;

}



.price strong{

display:block;
font-size:22px;
color:#388e3c;

}



.product-card p{

background:#388e3c;
color:white;
display:inline-block;
font-size:11px;
padding:4px 8px;
border-radius:15px;
margin:8px 0;

}



.product-card button{

width:100%;
height:38px;
border:none;
background:#ff9f00;
color:white;
font-weight:bold;
border-radius:6px;

}