:root{

--primary:#7d1414;
--secondary:#a81d1d;
--gold:#d4af37;
--light:#f8f9fa;
--dark:#222;
--radius:18px;

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

body{

font-family:'Poppins',sans-serif;
background:#f7f7f7;
color:#333;

}

/* HEADER */

.top-bar{

background:linear-gradient(90deg,#5b0d0d,#7d1414);
color:#fff;
font-size:14px;

}

.top-bar a{

color:white;
text-decoration:none;
margin-left:20px;
transition:.3s;

}

.top-bar a:hover{

opacity:.7;

}

header{

position:sticky;
top:0;
z-index:999;
background:white;
box-shadow:0 8px 30px rgba(0,0,0,.08);

}

.logo{

max-height:75px;

}

.search-box input{

height:54px;
border-radius:50px 0 0 50px;
border:2px solid #eee;

}

.search-box button{

border-radius:0 50px 50px 0;
padding:0 30px;
background:var(--primary);
border:none;

}

.search-box button:hover{

background:var(--secondary);

}

.icon-link{

text-decoration:none;
color:#555;
font-weight:500;
transition:.3s;

}

.icon-link:hover{

color:var(--primary);

}

.icon-link i{

font-size:24px;
display:block;

}

/* MENU */

.navbar{

background:white;

}

.navbar-nav .nav-link{

font-weight:600;
color:#333;
padding:18px;

position:relative;

}

.navbar-nav .nav-link::after{

content:'';

position:absolute;

left:0;
bottom:5px;

width:0;

height:3px;

background:var(--primary);

transition:.3s;

}

.navbar-nav .nav-link:hover::after{

width:100%;

}

.navbar-nav .nav-link:hover{

color:var(--primary);

}

/* BANNER */

.hero{

background:
linear-gradient(rgba(0,0,0,.55),
rgba(0,0,0,.55)),
url("banner-bg.jpg");

background-size:cover;
background-position:center;

min-height:650px;

display:flex;

align-items:center;

}

.hero h1{

font-size:70px;
font-weight:800;

}

.hero p{

font-size:22px;

}

.btn-shop{

background:linear-gradient(45deg,#d4af37,#f6dc86);

border:none;

padding:16px 40px;

border-radius:50px;

font-weight:700;

transition:.4s;

}

.btn-shop:hover{

transform:translateY(-5px);

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

}

/* MOBILE */

@media(max-width:768px){

.hero{

text-align:center;
padding:60px 0;
min-height:450px;

}

.hero h1{

font-size:45px;

}

.hero p{

font-size:18px;

}

.logo{

max-height:55px;

}

}

/*=====================================
    TÍTULOS DAS SEÇÕES
=====================================*/

.section-title{

font-size:2.5rem;
font-weight:700;
color:var(--primary);

}

.section-subtitle{

color:#777;
font-size:1rem;

}

/*=====================================
        CATEGORIAS
=====================================*/

.categories{

padding:80px 0;

}

.category-card{

background:#fff;

border-radius:25px;

padding:25px;

text-align:center;

transition:.35s;

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

height:100%;

}

.category-card:hover{

transform:translateY(-10px);

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

}

.category-card img{

width:120px;
height:120px;

border-radius:50%;

object-fit:cover;

transition:.4s;

border:5px solid #f3f3f3;

}

.category-card:hover img{

transform:scale(1.08);

}

.category-card h5{

margin-top:20px;

font-weight:600;

}

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

.products{

padding:80px 0;

}

.product-card{

background:white;

border-radius:20px;

overflow:hidden;

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

transition:.35s;

height:100%;

position:relative;

}

.product-card:hover{

transform:translateY(-10px);

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

}

.product-card img{

height:260px;

width:100%;

object-fit:cover;

transition:.5s;

}

.product-card:hover img{

transform:scale(1.06);

}

.product-info{

padding:20px;

}

.product-title{

font-size:1.05rem;

font-weight:600;

min-height:52px;

}

.old-price{

text-decoration:line-through;

color:#999;

font-size:.9rem;

}

.price{

font-size:1.8rem;

font-weight:700;

color:var(--primary);

}

.discount{

position:absolute;

top:15px;

left:15px;

background:#dc3545;

color:white;

padding:6px 12px;

border-radius:50px;

font-size:.8rem;

font-weight:600;

}

.favorite{

position:absolute;

right:15px;

top:15px;

width:42px;

height:42px;

background:white;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

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

cursor:pointer;

transition:.3s;

}

.favorite:hover{

background:var(--primary);

color:white;

}

.buy-btn{

width:100%;

border-radius:50px;

padding:12px;

font-weight:600;

}

/*=====================================
      CAROUSEL
=====================================*/

.carousel-control-prev-icon,
.carousel-control-next-icon{

background-color:var(--primary);

border-radius:50%;

padding:18px;

}

/*==================================
    PROMOÇÕES
==================================*/

.promo-section{
    padding:90px 0;
}

.promo-card{
    position:relative;
    overflow:hidden;
    border-radius:25px;
    min-height:320px;
    color:#fff;
    box-shadow:0 15px 35px rgba(0,0,0,.12);
}

.promo-card img{
    width:100%;
    height:320px;
    object-fit:cover;
    transition:.5s;
}

.promo-card:hover img{
    transform:scale(1.08);
}

.promo-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(rgba(0,0,0,.25),rgba(0,0,0,.65));
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}

.promo-overlay h2{
    font-size:2.3rem;
    font-weight:700;
}

/*==================================
    BENEFÍCIOS
==================================*/

.features{
    padding:90px 0;
    background:#fff;
}

.feature-card{
    background:#fff;
    border-radius:20px;
    padding:35px;
    text-align:center;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    transition:.35s;
    height:100%;
}

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

.feature-icon{
    width:80px;
    height:80px;
    margin:auto;
    border-radius:50%;
    background:#7d1414;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:34px;
    margin-bottom:20px;
}

/*==================================
 NEWSLETTER
==================================*/

.newsletter{
    padding:80px 0;
    background:linear-gradient(135deg,#7d1414,#b32025);
    color:white;
}

.newsletter input{
    height:55px;
    border-radius:40px 0 0 40px;
}

.newsletter button{
    border-radius:0 40px 40px 0;
}

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

footer{
    background:#181818;
    color:#ddd;
    padding:70px 0 20px;
}

footer h5{
    color:white;
    margin-bottom:20px;
}

footer a{
    color:#bbb;
    text-decoration:none;
    display:block;
    margin-bottom:10px;
}

footer a:hover{
    color:#fff;
}

.footer-bottom{
    margin-top:40px;
    border-top:1px solid #333;
    padding-top:20px;
    text-align:center;
}

/*==================================
 BOTÕES FLUTUANTES
==================================*/

.whatsapp{

position:fixed;

bottom:25px;

right:25px;

width:65px;

height:65px;

border-radius:50%;

background:#25D366;

display:flex;

align-items:center;

justify-content:center;

font-size:32px;

color:white;

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

z-index:999;

text-decoration:none;

}

.topo{

position:fixed;

bottom:105px;

right:25px;

width:55px;

height:55px;

border-radius:50%;

background:#7d1414;

display:flex;

align-items:center;

justify-content:center;

color:white;

text-decoration:none;

font-size:24px;

}

/*=====================================
LOADER
=====================================*/

#loader{

position:fixed;

left:0;
top:0;

width:100%;
height:100%;

background:#fff;

display:flex;

justify-content:center;

align-items:center;

z-index:99999;

transition:.5s;

}

#loader.hide{

opacity:0;

visibility:hidden;

}

header{

transition:.35s;

}

header.scrolled{

padding:5px 0;

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

}

.product-card{

transition:.35s;

}

.product-card:hover{

transform:translateY(-12px);

box-shadow:0 30px 60px rgba(0,0,0,.18);

}

.buy-btn{

transition:.3s;

}

.buy-btn:hover{

transform:scale(1.05);

}

.product-card img{

transition:.6s;

}

.product-card:hover img{

transform:scale(1.08);

}

footer{

background:#111;

color:white;

}

footer a{

transition:.3s;

}

footer a:hover{

padding-left:8px;

color:#d4af37;

}

.newsletter{

background:

linear-gradient(135deg,#7d1414,#b32025);

}

.btn-danger{

border-radius:40px;

font-weight:600;

padding:12px 28px;

}

.btn-warning{

border-radius:40px;

font-weight:600;

}

.search-box{

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

border-radius:50px;

overflow:hidden;

}

.section-title{

font-size:48px;

font-weight:800;

position:relative;

display:inline-block;

}

.section-title::after{

content:"";

position:absolute;

bottom:-12px;

left:0;

width:80px;

height:4px;

background:#d4af37;

border-radius:20px;

}

body{

background:

linear-gradient(#fafafa,#f2f2f2);

}