/*======================================================
 CAFÉ ANILHA
 PREMIUM EDITION
======================================================*/

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap');
:root{

/* CORES */

--bg:#090909;
--bg-light:#111111;
--card:#141414;
--card-2:#191919;

--gold:#c08a4a;
--gold-light:#d7a25d;
--gold-dark:#9b6733;

--white:#ffffff;
--text:#d9d9d9;
--muted:#8f8f8f;

--radius:22px;
--radius-big:32px;

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

--shadow-hover:
0 35px 90px rgba(0,0,0,.55);

--transition:.35s;

}

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

*{

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

}

html{

scroll-behavior:smooth;

}

body{

font-family:"Poppins",sans-serif;

background:var(--bg);

color:white;

overflow-x:hidden;

position:relative;

}

/*======================================================
 FUNDO
======================================================*/

body::before{

content:"";

position:fixed;

inset:0;

background:

radial-gradient(circle at 15% 20%,
rgba(192,138,74,.14),
transparent 28%),

radial-gradient(circle at 85% 75%,
rgba(192,138,74,.08),
transparent 32%),

linear-gradient(
180deg,
#1b120d,
#0f0f0f 30%,
#090909
);

z-index:-3;

}

/* textura */

body::after{

content:"";

position:fixed;

inset:0;

opacity:.03;

background-image:none;

pointer-events:none;

z-index:-2;

}

/*======================================================
 SCROLLBAR
======================================================*/

::-webkit-scrollbar{

width:9px;

}

::-webkit-scrollbar-track{

background:#080808;

}

::-webkit-scrollbar-thumb{

background:var(--gold);

border-radius:30px;

}

/*======================================================
 TIPOGRAFIA
======================================================*/

h1,h2,h3{

    
    font-family: "Lora", serif;
    font-weight: 400;
}
    


p{

line-height:1.9;

color:var(--text);

}

section{

padding:120px 8%;

position:relative;

}

/*======================================================
 HEADER
======================================================*/

header{

position:fixed;

top:0;
left:0;

width:100%;

display:flex;

justify-content:space-between;

align-items:center;

padding:8px 4%;

background:rgba(10,10,10,.55);

backdrop-filter:blur(18px);

border-bottom:1px solid rgba(255,255,255,.05);

z-index:999;

transition:.4s;

}


.logo{

display:flex;

align-items:center;

}

.logo img{
    width: 100px;
    height: auto;
    transform: scale(1.35);
    transform-origin: left center;
    transition: .3s;
}

.logo img:hover{

transform:scale(1.05);

}

nav{

display:flex;

gap:40px;

}

nav a{

text-decoration:none;

color:white;

font-weight:500;

position:relative;

transition:.3s;

}

nav a::after{

content:"";

position:absolute;

bottom:-6px;

left:0;

width:0;

height:2px;

background:var(--gold);

transition:.35s;

}

nav a:hover{

color:var(--gold-light);

}

nav a:hover::after{

width:100%;

}

/*======================================================
 BOTÃO CARRINHO
======================================================*/

.cart-btn{

display:flex;

align-items:center;

gap:10px;

padding:13px 24px;

border:none;

border-radius:999px;

cursor:pointer;

font-weight:600;

color:rgb(0, 0, 0);

background:linear-gradient(
135deg,
var(--gold),
var(--gold-light)
);

transition:var(--transition);

box-shadow:

0 10px 30px rgba(192,138,74,.28);

}

.cart-btn:hover{

transform:translateY(-3px);

box-shadow:

0 18px 45px rgba(192,138,74,.40);

}

.cart-icon{

width:24px;

}


/* ===========================
HERO
=========================== */

.hero{

    position:relative;

    display:flex;

    align-items:center;

    width:100%;

    height:100vh;

    overflow:hidden;
}

.hero-video{
    position: absolute;
    top: 0;
    left: -38px;   /* ajuste entre -100 e -180 conforme preferir */
    width: calc(100% + 140px);
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(0,0,0,.72),
        rgba(0,0,0,.32),
        rgba(0,0,0,.60)
    );

    z-index:1;
}

.hero-content{
    position: relative;
    z-index: 2;
    max-width: 700px;

    left: -50px;
}
.hero-tag{

    display:inline-block;

    padding:8px 16px;

    border:1px solid rgba(192,138,74,.4);

    border-radius:30px;

    color:#d6b27a;

    letter-spacing:3px;

    font-size:13px;

    margin-bottom:28px;

    backdrop-filter:blur(8px);
}

.hero h1{
    font-size: 44px;
    line-height: 1.05;
    font-weight: 450;
    max-width: 620px;
    margin-bottom: 30px;
    color: #F5F0E8;
    text-shadow: 0 8px 25px rgba(0,0,0,.45);
}

.hero p{

    max-width:520px;

    font-size:18px;

    margin-bottom:40px;
}
.btn-primary{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    padding:18px 44px;
    border-radius:999px;
    background:linear-gradient(135deg,#c08a4a,#d8a55d);
    color:#F5F0E8;
    text-decoration:none;
    font-weight:600;
}

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

.section-title{

text-align:center;

margin-bottom:80px;

}

.section-title span{

display:inline-block;

color:var(--gold);

letter-spacing:4px;

font-size:14px;

margin-bottom:18px;

text-transform:uppercase;

}


.section-title h2{
    font-family: "Lora", serif;
    font-weight: 400;
}

/*======================================================
 NOSSA HISTÓRIA
======================================================*/

.about{

display:grid;

grid-template-columns:520px 1fr;

gap:90px;

align-items:center;

}

.about-image{

position:relative;

}

.about-image::before{

content:"";

position:absolute;

width:100%;

height:100%;

left:25px;

top:25px;

border:2px solid rgba(192,138,74,.20);

border-radius:30px;

z-index:-1;

}

.about-image img{

width:100%;

height:700px;

object-fit:cover;

border-radius:30px;

box-shadow:var(--shadow);

transition:.45s;

}

.about-image:hover img{

transform:scale(1.03);

box-shadow:var(--shadow-hover);

}

.about-text{

position:relative;

}

.about-text span{

display:inline-block;

color:var(--gold);

letter-spacing:4px;

font-size:14px;

margin-bottom:18px;

}

.about-text h2{

font-size:62px;

line-height:1.05;

margin-bottom:28px;

}

.about-text p{

font-size:18px;

margin-bottom:22px;

}

.about-text::after{

content:"";

display:block;

margin-top:35px;

width:90px;

height:3px;

background:var(--gold);

border-radius:50px;

}

/*======================================================
 FRASE
======================================================*/

.about-quote{

margin-top:40px;

padding-left:28px;

border-left:4px solid var(--gold);

font-family:"comorand garamond",serif;

font-size:30px;

line-height:1.6;

color:white;

}

/*======================================================
 NÚMEROS
======================================================*/

.numbers{

display:flex;

gap:55px;

margin-top:45px;

}

.numbers div{

position:relative;

}

.numbers div:not(:last-child)::after{

content:"";

position:absolute;

right:-28px;

top:10px;

width:1px;

height:45px;

background:rgba(255,255,255,.08);

}

.numbers h3{

font-size:42px;

color:var(--gold);

}

.numbers p{

margin-top:6px;

color:var(--muted);

}

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

.catalog{

display:flex;

justify-content:center;

}

.product{

width:100%;

max-width:1300px;

display:grid;

grid-template-columns:1fr 1fr;

overflow:hidden;

border-radius:30px;

background:rgba(20,20,20,.88);

backdrop-filter:blur(14px);

border:1px solid rgba(255,255,255,.06);

box-shadow:var(--shadow);

transition:.45s;

}

.product:hover{

transform:translateY(-8px);

box-shadow:var(--shadow-hover);

}

/*======================================================
 FOTO PRODUTO
======================================================*/

.product img{

width:100%;

height:100%;

min-height:760px;

object-fit:cover;

transition:.45s;

}

.product:hover img{

transform:scale(1.05);

}

/*======================================================
 INFO
======================================================*/

.product-info{

padding:70px;

display:flex;

flex-direction:column;

justify-content:center;

}

.product-tag{

display:inline-flex;

width:max-content;

padding:8px 18px;

border-radius:999px;

background:rgba(192,138,74,.15);

color:var(--gold);

letter-spacing:2px;

font-size:13px;

font-weight:600;

margin-bottom:24px;

}

.product-info h3{

font-size:52px;

margin-bottom:10px;

}

.product-subtitle{

font-size:18px;

color:var(--gold-light);

margin-bottom:30px;

}

.product-info>p{

font-size:17px;

line-height:1.9;

margin-bottom:35px;

}

/*======================================================
 NOTAS SENSORIAIS
======================================================*/

.product-description{

background:#1a1a1a;

padding:30px;

border-radius:20px;

border:1px solid rgba(255,255,255,.05);

margin-bottom:35px;

}

.product-description span{

display:block;

color:var(--gold);

font-weight:200;

letter-spacing:2px;

margin-bottom:18px;

}

.product-description ul{

list-style:none;

}

.product-description li{

padding-left:28px;

margin-bottom:14px;

position:relative;

color:var(--text);

}

.product-description li::before{

content:"✓";

position:absolute;

left:0;

color:var(--gold);

font-weight:bold;

}

/*======================================================
 PREÇO
======================================================*/

.price{

margin:10px 0 35px;

}

.price strong{

font-size:50px;

font-family:"inherit",serif;

color:white;

}

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

.sizes{

display:flex;

gap:15px;

margin-bottom:30px;

}

.sizes button{

padding:15px 28px;

border-radius:14px;

background:transparent;

border:1px solid rgba(192,138,74,.45);

color:white;

cursor:pointer;

transition:.35s;

}

.sizes button:hover,
.sizes button.active{

background:var(--gold);

border-color:var(--gold);

}

.add{

height:60px;

border:none;

border-radius:18px;

background:linear-gradient(
135deg,
var(--gold),
var(--gold-light)
);

color:white;

font-size:17px;

font-weight:600;

cursor:pointer;

transition:.35s;

box-shadow:0 18px 40px rgba(192,138,74,.25);

}

.add:hover{

transform:translateY(-4px);

box-shadow:0 28px 60px rgba(192,138,74,.40);

}
/*======================================================
 DIFERENCIAIS
======================================================*/

.features{

position:relative;

overflow:hidden;

}

.features::before{

content:"";

position:absolute;

width:700px;

height:700px;

top:-320px;

right:-250px;

background:

radial-gradient(circle,
rgba(192,138,74,.08),
transparent 70%);

pointer-events:none;

}

.feature-grid{

display:grid;

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

gap:35px;

}

.feature-card{

position:relative;

padding:45px 35px;

border-radius:28px;

background:rgba(22,22,22,.82);

backdrop-filter:blur(18px);

border:1px solid rgba(255,255,255,.05);

overflow:hidden;

transition:.45s;

box-shadow:var(--shadow);

}

.feature-card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:5px;

background:linear-gradient(
90deg,
var(--gold),
transparent
);

opacity:0;

transition:.35s;

}

.feature-card:hover{

transform:translateY(-12px);

box-shadow:var(--shadow-hover);

border-color:rgba(192,138,74,.20);

}

.feature-card:hover::before{

opacity:1;

}

.feature-card .icon{

width:95px;

height:95px;

margin:auto;

margin-bottom:30px;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

background:rgba(192,138,74,.12);

transition:.35s;

}

.feature-card:hover .icon{

transform:rotate(-10deg) scale(1.08);

background:rgba(192,138,74,.18);

}

.feature-card .icon img{

width:54px;

height:54px;

object-fit:contain;

}

.feature-card h3{

font-size:28px;

text-align:center;

margin-bottom:18px;

}

.feature-card p{

text-align:center;

font-size:16px;

color:var(--text);

}

/*======================================================
 DEPOIMENTOS
======================================================*/

.testimonials-section{

position:relative;

}

.testimonials-container{

max-width:1200px;

margin:auto;

}

.testimonials-container .subtitle{

display:block;

text-align:center;

letter-spacing:4px;

color:var(--gold);

margin-bottom:15px;

}

.testimonials-container h2{

text-align:center;

font-size:56px;

margin-bottom:65px;

}

.review-form-box{
 font-family: inherit;

max-width:700px;

margin:auto;

margin-bottom:70px;

padding:40px;

background:rgba(20,20,20,.90);

border-radius:28px;

border:1px solid rgba(255,255,255,.05);

box-shadow:var(--shadow);

}

.review-form-box h3{

font-size:30px;

color:var(--gold);

margin-bottom:25px;

}

.review-form-box input,
.review-form-box textarea,
.review-form-box select {
    width: 100%;
    padding: 18px;
    margin-bottom: 18px;
    border: none;
    border-radius: 16px;
    background: #202020;
    color: white;
    font-size: 15px;
    transition: .3s;

    font-family: inherit;

}

.review-form-box input:focus,
.review-form-box textarea:focus,
.review-form-box select:focus{

outline:none;

box-shadow:0 0 0 2px var(--gold);

}

.review-form-box button{

width:100%;

height:60px;

border:none;

border-radius:18px;

background:linear-gradient(
135deg,
var(--gold),
var(--gold-light)
);

color:white;

font-size:17px;

font-weight:600;

cursor:pointer;

transition:.35s;

}

.review-form-box button:hover{

transform:translateY(-3px);

}

.testimonials-grid{

display:grid;

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

gap:35px;

}

.testimonial-card{

position:relative;

padding:35px;

border-radius:26px;

background:rgba(20,20,20,.90);

border:1px solid rgba(255,255,255,.05);

transition:.4s;

box-shadow:var(--shadow);

}

.testimonial-card:hover{

transform:translateY(-10px);

box-shadow:var(--shadow-hover);

}

.testimonial-card::before{

content:"❝";

position:absolute;

top:18px;

right:25px;

font-size:90px;

font-family:serif;

color:rgba(192,138,74,.10);

}

.stars{

font-size:22px;

color:#ffc857;

margin-bottom:22px;

}

.testimonial-card p{

font-style:italic;

line-height:2;

margin-bottom:24px;

}

.testimonial-card h4{

font-size:20px;

color:white;

}

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

.newsletter {
    position: relative;
    overflow: hidden;

    background-image:
        linear-gradient(
            rgba(12, 12, 12, 0.72),
            rgba(12, 12, 12, 0.72)
        ),
        url("../assets/imagens/fotograonewsletter.png");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.newsletter::before{

content:"";

position:absolute;

inset:0;

background:

radial-gradient(circle at top right,

rgba(192,138,74,.10),

transparent 40%);

pointer-events:none;

}

.newsletter-box{

max-width:850px;

margin:auto;

text-align:center;

position:relative;

z-index:2;

}

.newsletter-box h2{

font-size:58px;

margin-bottom:25px;

}

.newsletter-box p{

font-size:18px;

margin-bottom:35px;

}

.newsletter-form{

display:flex;

gap:18px;

}

.newsletter-form input{

flex:1;

height:62px;

padding:20px;

border:none;

border-radius:18px;

font-size:16px;

}

.newsletter-form button{

padding:0 36px;

border:none;

border-radius:18px;

background:linear-gradient(
135deg,
var(--gold),
var(--gold-light)
);

color:white;

font-size:16px;

font-weight:600;

cursor:pointer;

transition:.35s;

}

.newsletter-form button:hover{

transform:translateY(-3px);

}
/*======================================================
/*======================================================
CONTATO
======================================================*/

.contact{
    position:relative;
    padding:80px 0;
}

.contact-container{

    max-width:1200px;
    margin:auto;

    display:grid;
    grid-template-columns:420px 1fr;

    gap:70px;

    align-items:center;

}


/* INFORMAÇÕES */

.contact-info{

    display:flex;
    flex-direction:column;
    gap:25px;

}


.info-box{

    display:block;

    padding:28px;

    background:rgba(20,20,20,.75);

    backdrop-filter:blur(15px);

    border:1px solid rgba(255,255,255,.05);

    border-radius:22px;

    transition:.35s;

    text-decoration:none;

}


.info-box:hover{

    transform:translateY(-6px);

    border-color:rgba(192,138,74,.35);

}


.info-box h3{

    margin-bottom:12px;

    font-size:22px;

    color:var(--gold);

}


.info-box p{

    color:var(--text);

}



/* FORMULÁRIO */

.contact-form{

    display:flex;

    flex-direction:column;

    gap:18px;

    background:rgba(20,20,20,.45);

    padding:40px;

    border-radius:28px;

    border:1px solid rgba(255,255,255,.05);

}


.contact-form input,
.contact-form textarea{

    width:100%;

    padding:18px 22px;

    background:rgba(25,25,25,.85);

    border:1px solid rgba(255,255,255,.05);

    border-radius:18px;

    color:white;

    font-size:15px;

    transition:.35s;

}


.contact-form textarea{
     font-family: "inherit", sans-serif;

    height:180px;

    resize:none;

}


.contact-form input:focus,
.contact-form textarea:focus{

    outline:none;

    border-color:var(--gold);

    box-shadow:0 0 0 4px rgba(192,138,74,.10);

}



.contact-form button{

    height:60px;

    border:none;

    border-radius:18px;

    background:linear-gradient(135deg,var(--gold),var(--gold-light));

    color:white;

    font-size:17px;

    font-weight:600;

    cursor:pointer;

    transition:.35s;

}


.contact-form button:hover{

    transform:translateY(-4px);

    box-shadow:0 20px 45px rgba(192,138,74,.30);

}



/* RESPONSIVO */

@media(max-width:900px){

    .contact-container{

        grid-template-columns:1fr;

        gap:40px;

    }


    .contact-form{

        padding:25px;

    }

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

footer{

padding:90px 8% 35px;

background:#070707;

border-top:1px solid rgba(255,255,255,.05);

}

.footer-content{

display:grid;

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

gap:50px;

}

.footer-content h2,
.footer-content h3{

margin-bottom:20px;

color:var(--gold);

}

.footer-content p{

color:var(--muted);

line-height:1.9;

}

.footer-content a{

display:block;

margin-bottom:12px;

text-decoration:none;

color:#d6d6d6;

transition:.35s;

}

.footer-content a:hover{

color:var(--gold);

padding-left:8px;

}

.copyright{

margin-top:55px;

padding-top:25px;

text-align:center;

border-top:1px solid rgba(255,255,255,.05);

color:#888;

}
/* ===========================
MODAL CHECKOUT
=========================== */

.modal{
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.75);
    justify-content: center;
    align-items: center;
    z-index: 999999;
}

.modal.active{
    display: flex;
}

.modal-box{
    width: 420px;
    max-width: 90%;
    background: #0b1319;
    padding: 35px;
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(0,0,0,.4);
}

.modal-box h2{
    margin-bottom: 20px;
    color: #F5F0E8;
}

.modal-box input,
.modal-box select{

    width:100%;

    padding:14px;

    margin-bottom:15px;

    border:1px solid rgba(255,255,255,.06);

    border-radius:10px;

    background:#111;

    color:#F5F0E8;

    font-family:inherit;

    font-size:15px;

}

.modal-box input:focus,
.modal-box select:focus{

    outline:none;

    border-color:var(--gold);

    box-shadow:0 0 0 3px rgba(192,138,74,.12);

}

.modal-box select option{

    background:#111;

    color:white;

}

.modal-box button{
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 10px;
    background: #c08a4a;
    color: #F5F0E8;
    font-weight: 600;
    cursor: pointer;
    transition: .3s;
}

.modal-box button:hover{
    background: #d49a55;
}

/*======================================================
CARRINHO PREMIUM
======================================================*/

.cart{

position:fixed;

top:0;

right:0;

width:420px;

max-width:100%;

height:100vh;

padding:35px;

background:rgba(15,15,15,.97);

backdrop-filter:blur(22px);

border-left:1px solid rgba(255,255,255,.06);

box-shadow:-20px 0 80px rgba(0,0,0,.55);

display:flex;

flex-direction:column;

transform:translateX(100%);

transition:.45s cubic-bezier(.22,.61,.36,1);

z-index:99999;

}

.cart.active,
.cart.open{

transform:translateX(0);

}

.cart-header{

display:flex;

justify-content:space-between;

align-items:center;

padding-bottom:20px;

margin-bottom:25px;

border-bottom:1px solid rgba(255,255,255,.06);

}

.cart-header h2{

font-size:32px;

}

.cart-header button{

width:42px;

height:42px;

border:none;

border-radius:50%;

background:#202020;

color:white;

font-size:20px;

cursor:pointer;

transition:.3s;

}

.cart-header button:hover{

background:var(--gold);

transform:rotate(90deg);

}

#cart-list{

flex:1;

overflow-y:auto;

list-style:none;

padding-right:8px;

}

#cart-list::-webkit-scrollbar{

width:6px;

}

#cart-list::-webkit-scrollbar-thumb{

background:var(--gold);

border-radius:20px;

}
/*======================================================
 ITENS DO CARRINHO
======================================================*/

.cart-empty{

    padding:45px 10px;

    text-align:center;

    color:var(--muted);

}

.cart-item{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:16px;

    padding:22px 0;

    border-bottom:1px solid rgba(255,255,255,.06);

}

.cart-item-info{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    flex:1;

    min-width:0;

    gap:9px;

}

.cart-item-name{

    display:block;

    color:white;

    font-size:17px;

    line-height:1.4;

}

.cart-item-details{

    display:flex;

    flex-direction:column;

    gap:4px;

}

.cart-item-details span{

    display:block;

    color:var(--muted);

    font-size:13px;

    font-weight:400;

    line-height:1.5;

}

.cart-item-controls{

    display:flex;

    align-items:center;

    gap:10px;

    margin-top:3px;

}

.quantity-btn{

    width:32px;

    height:32px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid rgba(192,138,74,.40);

    border-radius:9px;

    background:#202020;

    color:white;

    font-size:19px;

    line-height:1;

    cursor:pointer;

    transition:.3s;

}

.quantity-btn:hover{

    background:var(--gold);

    border-color:var(--gold);

}

.cart-item-quantity{

    min-width:22px;

    color:white;

    text-align:center;

    font-weight:600;

}

.cart-item-price{

    color:var(--gold);

    font-size:16px;

}

.remove-item-btn{

    flex-shrink:0;

    padding:8px 11px;

    border:1px solid rgba(192,138,74,.28);

    border-radius:10px;

    background:transparent;

    color:var(--muted);

    font-size:12px;

    cursor:pointer;

    transition:.3s;

}

.remove-item-btn:hover{

    border-color:#b33030;

    background:#8d2424;

    color:white;

}

.cart-footer{

padding-top:25px;

border-top:1px solid rgba(255,255,255,.06);

}

.cart-footer p{

    display:block;

    font-size:22px;

    font-weight:600;

    margin-bottom:20px;

    color:white;

}

.checkout-btn{

width:100%;

height:58px;

border:none;

border-radius:18px;

background:linear-gradient(
135deg,
#2e8b57,
#43b97a
);

color:white;

font-size:16px;

font-weight:600;

cursor:pointer;

transition:.35s;

margin-bottom:14px;

}

.checkout-btn:hover{

transform:translateY(-3px);

box-shadow:0 20px 40px rgba(67,185,122,.30);

}

.clear-btn{

width:100%;

height:56px;

border:none;

border-radius:18px;

background:#8d2424;

color:white;

font-size:15px;

cursor:pointer;

transition:.35s;

}

.clear-btn:hover{

background:#b33030;

transform:translateY(-3px);

}
.grind-options{

    margin-bottom:25px;

}

.grind-options span{

    display:block;

    margin-bottom:12px;

    color:var(--gold);

    font-weight:600;

}

.grind-options{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

}

.grind-options button{

    padding:14px 22px;

    border-radius:14px;

    border:1px solid rgba(192,138,74,.45);

    background:transparent;

    color:#fff;

    cursor:pointer;

    transition:.3s;

}

.grind-options button:hover,
.grind-options button.active{

    background:var(--gold);

    border-color:var(--gold);

}
/*======================================================
 CARRINHO RESPONSIVO
======================================================*/

@media(max-width:600px){

    .cart{

        width:100%;

        padding:25px 20px;

    }

    .cart-item{

        gap:10px;

    }

    .cart-item-name{

        font-size:15px;

    }

    .remove-item-btn{

        padding:7px 8px;

        font-size:11px;

    }

    .modal-box{

        width:100%;

        max-width:92%;

        padding:28px 22px;

    }

}
.sensorial h4{

    font-family: "Cormorant Garamond", serif;

    font-size: 1.35rem;

    font-weight: 600;

    letter-spacing: .4px;

    color: #b3915b;

}
.aviso-entrega{

    margin: -5px 0 20px;

    padding: 12px 15px;

    border: 1px solid rgba(201,145,74,.35);

    border-radius: 12px;

    background: rgba(201,145,74,.08);

    color: #d8d8d8;

    font-size: .95rem;

    line-height: 1.5;

}

.linha-dupla{

    display:flex;

    gap:12px;

}

.linha-dupla input{

    flex:1;

}
/* =========================================
   BOTÕES DO CARRINHO
========================================= */

.cart-footer {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
}

.cart-footer button {
    width: 100%;
    padding: 14px 18px;
    border: none;
    border-radius: 10px;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.25s ease;
}

.clear-cart {
    background: #8f2323;
    color: #ffffff;
}

.clear-cart:hover {
    background: #aa2c2c;
    transform: translateY(-1px);
}

.checkout-btn {
    background: #2f6b42;
    color: #ffffff;
}

.checkout-btn:hover {
    background: #397f50;
    transform: translateY(-1px);
}

.cart-footer button:active {
    transform: scale(0.98);
}
/* ==================================================
   ACESSIBILIDADE
================================================== */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* ======================================================
   RESPONSIVIDADE GERAL
====================================================== */

@media (max-width: 768px){

section{
    padding:70px 24px;
}

header{
    padding:12px 20px;
}

.logo img{
    width:78px;
    transform:none;
}

nav{
    display:none;
}

/* HERO */

.hero{
    height:100svh;
    justify-content:center;
}

.hero-video{
    left:0;
    width:100%;
}

.hero-content{
    left:0;
    width:100%;
    max-width:100%;
    padding:0 12px;
    text-align:center;
}

.hero h1{
    font-size:42px;
    line-height:1.15;
}

.hero p{
    max-width:100%;
    font-size:17px;
}

.btn-primary{
    width:100%;
    max-width:320px;
}

/* HISTÓRIA */

.about{

    grid-template-columns:1fr;

    gap:45px;

}

.about-image{

    order:1;

}

.about-text{

    order:2;

    text-align:left;

}

.about-image img{

    height:auto;

}

.about-text h2{

    font-size:48px;

}

.about-text p{

    font-size:17px;

}

.about-quote{

    font-size:24px;

}

.numbers{

    flex-wrap:wrap;

    gap:25px;

}

/* PRODUTO */

.product{

    grid-template-columns:1fr;

}

.product img{

    min-height:420px;

}

.product-info{

    padding:35px 26px;

}

.product-info h3{

    font-size:42px;

}

.product-description{

    padding:22px;

}

.price strong{

    font-size:42px;

}

.sizes{

    flex-wrap:wrap;

}

.sizes button{

    flex:1;

}

.add{

    width:100%;

}

/* DIFERENCIAIS */

.feature-grid{

    grid-template-columns:1fr;

}

/* AVALIAÇÕES */

.review-form-box{

    padding:25px;

}

.testimonials-grid{

    grid-template-columns:1fr;

}

/* NEWSLETTER */

.newsletter-box h2{

    font-size:42px;

}

.newsletter-form{

    flex-direction:column;

}

.newsletter-form button{

    height:58px;

}

/* CONTATO */

.contact-container{

    grid-template-columns:1fr;

}

.contact-form{

    padding:25px;

}

/* FOOTER */

.footer-content{

    grid-template-columns:1fr;

    text-align:center;

}

.footer-content a{

    padding-left:0;

}

/* CARRINHO */

.cart{

    width:100%;

}

/* IMAGENS */

img{

    max-width:100%;

    height:auto;

}

}