*{
margin:0;
padding:0;
box-sizing:border-box;
}

html,
body{

height:100%;
overflow:hidden;
font-family:Inter,sans-serif;

}

.app{

display:flex;
flex-direction:column;
height:100dvh;

}

.top{

padding:20px;

}

.top h1{

font-size:2.2rem;
margin-bottom:6px;
line-height:1.1;

}

.green{color:#34C759;}
.orange{color:#FF9500;}
.red{color:#FF3B30;}

.camera{

flex:1;

display:flex;

justify-content:center;

align-items:center;

position:relative;

background:#dcdcdc;

overflow:hidden;

}

.product{

height:38vh;

width:auto;

object-fit:contain;

}

.overlay{

position:absolute;

top:18%;

left:50%;

transform:translateX(-50%) scale(.9);

width:220px;

background:white;

border-radius:20px;

padding:18px;

text-align:center;

box-shadow:0 12px 40px rgba(0,0,0,.18);

opacity:0;

transition:.35s;

pointer-events:none;

}

.overlay.show{

opacity:1;

transform:translateX(-50%) scale(1);

}

.overlay-title{

font-weight:700;

color:#00A651;

margin-bottom:10px;

}

.overlay-price{

font-size:2.2rem;

font-weight:800;

color:#00A651;

}

.overlay-text{

margin-top:10px;

font-size:.95rem;

color:#555;

}

.bottom{

padding:20px;

}

.bottom h2{

text-align:center;

font-size:2rem;

margin-bottom:20px;

}

.buttons{

display:flex;

justify-content:space-evenly;

}

button{

width:90px;
height:90px;

border:none;

border-radius:50%;

}

.red-btn{

background:#ff3b30;

}

.green-btn{

background:#34c759;

}