/* ==========================
   ATELIÊ CAKE FAKE HAPPY
   ========================== */

:root{
    --azul:#8CC8FF;
    --verde:#A8E6CF;
    --amarelo:#FFF3B0;
    --branco:#FFFFFF;
    --cinza:#F7F8FA;
    --texto:#4A4A4A;
    --sombra:0 5px 20px rgba(0,0,0,.08);
    --radius:20px;
}

/* Fundo Geral */

body{
    background:var(--cinza);
    color:var(--texto);
    font-family:'Poppins',sans-serif;
}

/* Cabeçalho */

.header{
    background:#fff;
    box-shadow:var(--sombra);
}

.header .logo{
    max-height:120px;
}

/* Menu */

.navbar{
    background:linear-gradient(
        90deg,
        var(--azul),
        var(--verde)
    );
}

.navbar a{
    color:#fff;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:1px;
}

.navbar a:hover{
    color:#fff;
    opacity:.8;
}

/* Banner Principal */

.hero{
    background:linear-gradient(
        135deg,
        #8CC8FF,
        #A8E6CF
    );
    
    padding:80px 20px;
    
    border-radius:30px;
    
    text-align:center;
    
    color:white;
}

.hero h1{
    font-size:3rem;
    font-weight:700;
}

.hero p{
    font-size:1.2rem;
}

/* Categorias */

.categoria-card{
    
    background:#fff;
    
    border-radius:25px;
    
    padding:20px;
    
    text-align:center;
    
    box-shadow:var(--sombra);
    
    transition:.3s;
}

.categoria-card:hover{
    
    transform:translateY(-8px);
}

.categoria-card img{
    
    border-radius:20px;
}

.categoria-card h3{
    
    margin-top:15px;
    
    color:var(--texto);
}

/* Produtos */

.product-card{
    
    background:#fff;
    
    border-radius:20px;
    
    overflow:hidden;
    
    box-shadow:var(--sombra);
}

.product-card:hover{
    
    transform:translateY(-5px);
    
    transition:.3s;
}

.product-title{
    
    font-size:18px;
    
    font-weight:600;
}

.product-price{
    
    color:#66B3FF;
    
    font-size:22px;
    
    font-weight:700;
}

/* Botões */

.btn-primary{
    
    background:linear-gradient(
        90deg,
        var(--azul),
        var(--verde)
    );
    
    border:none;
    
    border-radius:30px;
    
    padding:12px 30px;
    
    color:white;
    
    font-weight:600;
}

.btn-primary:hover{
    
    opacity:.9;
}

/* Carrinho */

.cart-box{
    
    background:white;
    
    border-radius:20px;
    
    padding:20px;
    
    box-shadow:var(--sombra);
}

/* Rodapé */

.footer{
    
    margin-top:50px;
    
    background:white;
    
    padding:50px 20px;
    
    text-align:center;
    
    box-shadow:0 -5px 20px rgba(0,0,0,.05);
}

.footer h4{
    
    color:#66B3FF;
}

.footer p{
    
    color:#777;
}

/* WhatsApp Flutuante */

.whatsapp-float{
    
    position:fixed;
    
    bottom:25px;
    
    right:25px;
    
    width:65px;
    
    height:65px;
    
    background:#25D366;
    
    border-radius:50%;
    
    display:flex;
    
    align-items:center;
    
    justify-content:center;
    
    color:white;
    
    font-size:30px;
    
    box-shadow:var(--sombra);
    
    z-index:999;
}

/* Títulos */

.section-title{
    
    text-align:center;
    
    margin-bottom:40px;
    
    font-size:2rem;
    
    color:#66B3FF;
    
    font-weight:700;
}

/* Busca */

.search-box input{
    
    border:none;
    
    border-radius:30px;
    
    padding:15px 20px;
    
    box-shadow:var(--sombra);
}

/* Responsivo */

@media(max-width:768px){

.hero h1{
    font-size:2rem;
}

.section-title{
    font-size:1.6rem;
}

}