/* =========================
   RESET
========================= */

*{
 box-sizing:border-box;
}

body{
 margin:0;
 font-family:Arial, Helvetica, sans-serif;
 background:#E5ECF6;
 color:#111;
}


.wrap{
 max-width:980px;
 margin:auto;
 padding:16px;
 background:#fff;
}



/* =========================
   FACHADA
========================= */

.fachada-img{

 width:100%;
 height:auto;
 max-height:220px;
 object-fit:cover;

 border-radius:14px;

 box-shadow:
 0 10px 30px rgba(0,0,0,.08);

}



/* =========================
   MENU
========================= */


.menu{
 position:sticky;
 top:10px;
 z-index:10;
 margin:15px 0;
}


.menu ul{

 display:flex;
 gap:10px;

 list-style:none;
 padding:0;

 overflow-x:auto;

}


.menu-btn{

 border:0;
 background:#f3f3f3;

 padding:10px 18px;

 border-radius:30px;

 cursor:pointer;

 font-weight:bold;

 white-space:nowrap;

}


.menu-btn.active{

 background:#111;
 color:white;

}



/* =========================
   TITULO
========================= */


.section-title{

 font-size:22px;
 margin:20px 0;

}



/* =========================
   GRID PRODUTOS
========================= */


.grid{

 display:grid;

 grid-template-columns:
 repeat(auto-fit,minmax(220px,1fr));

 gap:20px;

}



.card{

 background:white;

 border-radius:18px;

 overflow:hidden;

 box-shadow:
 0 10px 30px rgba(0,0,0,.08);

 transition:.25s;

}



.card:hover{

 transform:translateY(-5px);

}



.card-link{

 text-decoration:none;

 color:#111;

}



.card img{

 width:100%;
 height:220px;

 object-fit:contain;

 background:#f7f7f7;

 padding:12px;

}



.card-body{

 padding:16px;

}



.card-body strong{

 display:block;

 font-size:16px;

 line-height:1.3;

 min-height:45px;

}



.price{

 display:inline-block;

 margin-top:12px;

 background:#111;

 color:#fff;

 padding:8px 15px;

 border-radius:30px;

 font-weight:bold;

}



/* =========================
   PAGINA PRODUTO
========================= */


.product-page{

 display:grid;

 grid-template-columns:
 minmax(0,520px) 1fr;

 gap:35px;

 background:white;

 padding:25px;

 border-radius:18px;

}



.product-gallery{

 width:100%;

}



.zoom-wrapper{

 width:100%;

 max-height:520px;

 overflow:hidden;

 background:#f6f6f6;

 border-radius:16px;

 display:flex;

 align-items:center;

 justify-content:center;

}



.zoom-wrapper img{

 width:100%;

 height:auto;

 max-height:520px;

 object-fit:contain;

 transition:.3s;

}



.product-info h1{

 font-size:22px;

}



.product-info p{

 line-height:1.6;

 text-align:justify;

}



.price-current{

 font-size:24px;

 font-weight:bold;

 margin:15px 0;

}



/* =========================
   MINIATURAS
========================= */


.mini-thumbs{

 display:flex;

 gap:10px;

 flex-wrap:wrap;

 margin-top:15px;

}



.mini-thumbs img{

 width:70px;

 height:70px;

 object-fit:cover;

 border-radius:10px;

 cursor:pointer;

 border:2px solid transparent;

}



.mini-thumbs img.active{

 border-color:#111;

}



/* =========================
   BOTAO
========================= */


.btn{

 border:0;

 background:#111;

 color:white;

 padding:14px 25px;

 border-radius:30px;

 font-size:16px;

 font-weight:bold;

 cursor:pointer;

 transition:.25s;

}



.btn:hover{

 background:#1f7a4d;

 transform:translateY(-3px);

}




/* =========================
   WHATSAPP FLUTUANTE PREMIUM
========================= */

.whatsapp-fab{

 position:fixed;

 right:22px;
 bottom:22px;

 width:64px;
 height:64px;

 border-radius:50%;

 border:none;

 background:#25D366;

 color:white;

 display:flex;

 align-items:center;
 justify-content:center;

 cursor:pointer;

 box-shadow:
 0 8px 25px rgba(0,0,0,.30);

 z-index:999;

 transition:.25s ease;

}



.whatsapp-fab svg{

 width:34px;
 height:34px;

 filter:
 drop-shadow(0 2px 2px rgba(0,0,0,.25));

}



.whatsapp-fab:hover{

 transform:
 translateY(-5px)
 scale(1.08);

 box-shadow:
 0 15px 35px rgba(0,0,0,.35);

}



.whatsapp-fab:active{

 transform:
 scale(.95);

}



/* animação discreta */

@keyframes pulseWhats{

0%{
 box-shadow:
 0 0 0 0 rgba(37,211,102,.45);
}


70%{
 box-shadow:
 0 0 0 14px rgba(37,211,102,0);
}


100%{
 box-shadow:
 0 0 0 0 rgba(37,211,102,0);
}

}



/* =========================
   FOOTER
========================= */


.site-footer{

 margin-top:30px;

 text-align:center;

 padding:20px;

 background:#BCC3DB;

 border-radius:15px;

 color:white;

 font-size:14px;

}



.footer-links{

 margin-top:10px;

}



.footer-links a{

 color:white;

 text-decoration:none;

}




/* =========================
   MOBILE
========================= */


@media(max-width:900px){


.product-page{

 grid-template-columns:1fr;

 padding:15px;

}


.zoom-wrapper{

 max-height:320px;

}


.zoom-wrapper img{

 max-height:320px;

}


}



@media(max-width:600px){


.wrap{

 padding:10px;

}


.fachada-img{

 max-height:160px;

}


.card img{

 height:180px;

}


.product-info h1{

 font-size:18px;

}


}