:root{
--wine:#67364c;
--wine-deep:#4d2739;
--rose:#d89494;
--rose-dark:#b66f76;
--blush:#f4dfd9;
--cream:#fffaf6;
--paper:#fffdf9;
--gold:#ba8b4d;
--gold-light:#e1c69a;
--ink:#665058;
--muted:#9c7f84;
--border:#ead9cb;
--shadow:0 20px 60px rgba(77,39,57,.12);
}

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

html{
scroll-behavior:smooth;
}

body{
min-height:100vh;
font-family:Montserrat,sans-serif;
color:var(--ink);
background:#f8f1ed;
overflow-x:hidden;
}

body.no-scroll{
overflow:hidden;
}

button,
input,
textarea{
font:inherit;
}

button{
cursor:pointer;
}

.page-bg{
position:fixed;
inset:0;
z-index:-10;
background:
linear-gradient(rgba(255,250,247,.87),rgba(250,242,238,.9)),
url("fundo.png") center/cover fixed;
}

body:after{
content:"";
position:fixed;
inset:0;
z-index:-9;
pointer-events:none;
background:url("assets/paper-texture.svg");
opacity:.15;
mix-blend-mode:multiply;
}

.ambient{
position:fixed;
border-radius:50%;
filter:blur(110px);
z-index:-8;
pointer-events:none;
}

.ambient-a{
width:500px;
height:500px;
background:#d69099;
opacity:.12;
top:5%;
left:-220px;
}

.ambient-b{
width:550px;
height:550px;
background:#d9ad77;
opacity:.08;
right:-240px;
top:40%;
}

.topbar{
height:84px;
padding:0 6%;
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:center;
position:relative;
z-index:30;
border-bottom:1px solid rgba(185,139,77,.18);
background:rgba(255,250,247,.72);
backdrop-filter:blur(18px);
}

.back-link{
justify-self:start;
text-decoration:none;
font-size:9px;
letter-spacing:1.8px;
text-transform:uppercase;
color:#8b6770;
transition:.3s;
}

.back-link:hover{
color:var(--wine);
}

.brand{
text-decoration:none;
display:flex;
flex-direction:column;
align-items:center;
gap:3px;
}

.brand-monogram{
font:400 26px Parisienne,cursive;
color:var(--wine);
}

.brand-monogram i{
font-size:18px;
color:var(--gold);
}

.brand-date{
font-size:6px;
letter-spacing:2.4px;
color:#9e7a79;
}

.cart-button{
justify-self:end;
border:1px solid rgba(103,54,76,.18);
background:rgba(255,255,255,.55);
border-radius:50px;
padding:10px 14px;
display:flex;
align-items:center;
gap:8px;
color:var(--wine);
font-size:9px;
font-weight:500;
letter-spacing:1px;
transition:.3s;
}

.cart-button:hover{
background:#fff;
box-shadow:0 8px 25px rgba(83,46,60,.1);
}

.cart-icon{
font-size:17px;
color:#bb7474;
}

.cart-button b{
width:21px;
height:21px;
display:grid;
place-items:center;
border-radius:50%;
background:var(--wine);
color:#fff;
font-size:8px;
}

.hero{
max-width:880px;
margin:0 auto;
padding:85px 25px 72px;
text-align:center;
}

.hero-ornament{
font-size:13px;
color:var(--gold);
margin-bottom:17px;
}

.eyebrow,
.section-label{
font-size:8px;
font-weight:500;
letter-spacing:4px;
color:#a07578;
}

.hero h1{
font:400 62px Italiana,serif;
color:var(--wine);
margin:11px 0 19px;
}

.hero h1 i{
font:400 55px Parisienne,cursive;
color:#bd7b73;
}

.hero>p{
max-width:610px;
margin:auto;
font:400 19px/1.6 "Cormorant Garamond",serif;
color:#826c72;
}

.hero-info{
margin:33px auto 0;
display:flex;
justify-content:center;
align-items:center;
gap:18px;
font-size:7px;
letter-spacing:1.6px;
text-transform:uppercase;
color:#96787b;
}

.hero-info i{
width:3px;
height:3px;
background:var(--gold);
border-radius:50%;
}

.shop{
max-width:1240px;
margin:auto;
padding:20px 30px 100px;
}

.shop-header{
display:flex;
justify-content:space-between;
align-items:flex-end;
gap:30px;
margin-bottom:35px;
}

.shop-header h2{
font:400 32px/1.2 "Cormorant Garamond",serif;
color:var(--wine);
margin-top:7px;
}

.filters{
display:flex;
gap:7px;
flex-wrap:wrap;
justify-content:flex-end;
}

.filter{
border:1px solid #ddc9c0;
background:rgba(255,255,255,.48);
color:#8b6870;
padding:10px 15px;
border-radius:30px;
font-size:7px;
letter-spacing:1px;
text-transform:uppercase;
transition:.3s;
}

.filter:hover,
.filter.active{
background:var(--wine);
border-color:var(--wine);
color:#fff;
}

.products-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:22px;
}

.product-card{
background:rgba(255,253,249,.88);
border:1px solid rgba(214,192,179,.72);
box-shadow:0 12px 35px rgba(77,39,57,.07);
overflow:hidden;
position:relative;
transition:.4s;
}

.product-card:hover{
transform:translateY(-6px);
box-shadow:0 22px 45px rgba(77,39,57,.13);
}

.product-image{
position:relative;
height:230px;
overflow:hidden;
background:#eee1dc;
}

.product-image img{
width:100%;
height:100%;
object-fit:cover;
transition:transform .7s;
}

.product-card:hover .product-image img{
transform:scale(1.055);
}

.product-image:after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(to top,rgba(70,39,51,.18),transparent 45%);
}

.product-category{
position:absolute;
z-index:2;
left:15px;
top:15px;
padding:7px 10px;
background:rgba(255,250,246,.9);
backdrop-filter:blur(7px);
font-size:6px;
font-weight:500;
letter-spacing:1.4px;
text-transform:uppercase;
color:#8b626b;
}

.product-body{
padding:20px 20px 21px;
}

.product-body h3{
font:400 21px/1.15 "Cormorant Garamond",serif;
color:var(--wine);
min-height:48px;
}

.product-body p{
font:400 14px/1.45 "Cormorant Garamond",serif;
color:#8b777b;
margin:6px 0 18px;
min-height:40px;
}

.product-footer{
display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
border-top:1px solid #ecded4;
padding-top:15px;
}

.product-price{
display:flex;
flex-direction:column;
}

.product-price small{
font-size:5px;
letter-spacing:1px;
text-transform:uppercase;
color:#a18486;
}

.product-price strong{
font:400 18px Italiana,serif;
color:var(--wine);
margin-top:3px;
}

.gift-button{
border:0;
background:var(--wine);
color:#fff;
padding:11px 13px;
font-size:7px;
letter-spacing:1.3px;
text-transform:uppercase;
transition:.3s;
}

.gift-button:hover{
background:var(--wine-deep);
transform:translateY(-1px);
}

.custom-gift{
margin-top:50px;
min-height:190px;
border:1px solid rgba(186,139,77,.35);
background:
linear-gradient(120deg,rgba(255,252,248,.94),rgba(245,224,219,.72));
display:grid;
grid-template-columns:180px 1fr auto;
align-items:center;
gap:30px;
padding:28px 40px;
position:relative;
overflow:hidden;
}

.custom-decoration{
font:400 48px Parisienne,cursive;
color:#aa7673;
text-align:center;
}

.custom-decoration i{
font-size:27px;
color:var(--gold);
}

.custom-content span{
font-size:7px;
letter-spacing:2px;
color:#a47579;
}

.custom-content h2{
font:400 30px "Cormorant Garamond",serif;
color:var(--wine);
margin:5px 0;
}

.custom-content p{
font:14px/1.5 "Cormorant Garamond",serif;
color:#846e73;
max-width:440px;
}

.custom-action{
display:flex;
flex-direction:column;
gap:8px;
width:220px;
}

.custom-value{
height:44px;
display:flex;
align-items:center;
border:1px solid #d8c1b7;
background:#fff;
}

.custom-value span{
padding-left:15px;
font-size:10px;
color:#84656c;
}

.custom-value input{
width:100%;
height:100%;
border:0;
outline:0;
padding:0 12px;
color:var(--wine);
background:transparent;
}

.custom-action button{
height:43px;
border:0;
background:var(--wine);
color:#fff;
font-size:7px;
letter-spacing:1.2px;
text-transform:uppercase;
}

.closing{
text-align:center;
padding:80px 20px 90px;
background:rgba(255,250,247,.44);
border-top:1px solid rgba(185,139,77,.16);
}

.closing>span{
font:italic 16px "Cormorant Garamond",serif;
color:#94757a;
}

.closing h2{
font:400 43px Parisienne,cursive;
color:var(--wine);
margin:8px 0;
}

.closing h2 i{
font-size:25px;
color:var(--gold);
}

.closing p{
font:15px "Cormorant Garamond",serif;
color:#8b7479;
}

footer{
height:75px;
display:flex;
align-items:center;
justify-content:center;
gap:15px;
background:#603148;
color:#edd8d0;
font-size:7px;
letter-spacing:2px;
}

footer i{
font-size:8px;
color:#d8b176;
}

.overlay{
position:fixed;
inset:0;
background:rgba(48,27,36,.52);
backdrop-filter:blur(4px);
z-index:90;
opacity:0;
pointer-events:none;
transition:.35s;
}

.overlay.show{
opacity:1;
pointer-events:auto;
}

.cart-panel{
position:fixed;
right:0;
top:0;
bottom:0;
width:min(430px,100%);
background:#fffaf6;
z-index:100;
transform:translateX(105%);
transition:.45s cubic-bezier(.22,.75,.2,1);
display:flex;
flex-direction:column;
box-shadow:-20px 0 60px rgba(56,27,39,.2);
}

.cart-panel.open{
transform:translateX(0);
}

.cart-header{
padding:30px;
display:flex;
align-items:center;
justify-content:space-between;
border-bottom:1px solid var(--border);
}

.cart-header span{
font-size:7px;
letter-spacing:2px;
color:#a27b7d;
}

.cart-header h2{
font:400 31px "Cormorant Garamond",serif;
color:var(--wine);
}

.cart-header button,
.modal-close{
border:0;
background:none;
font:300 30px Montserrat,sans-serif;
color:#9b797f;
}

.cart-items{
flex:1;
overflow:auto;
padding:10px 25px;
}

.cart-item{
display:grid;
grid-template-columns:65px 1fr auto;
gap:13px;
align-items:center;
padding:16px 0;
border-bottom:1px solid #eddfd7;
}

.cart-item img{
width:65px;
height:65px;
object-fit:cover;
}

.cart-item h4{
font:400 16px "Cormorant Garamond",serif;
color:var(--wine);
}

.cart-item-price{
font-size:9px;
color:#876a70;
margin-top:4px;
}

.cart-item-actions{
display:flex;
align-items:center;
gap:7px;
margin-top:7px;
}

.cart-item-actions button{
width:22px;
height:22px;
border:1px solid #dfccc2;
background:#fff;
color:#805c65;
}

.cart-item-actions span{
font-size:9px;
}

.remove-item{
border:0!important;
background:none!important;
font-size:15px!important;
color:#b07c80!important;
}

.cart-empty{
margin:auto;
padding:50px 25px;
text-align:center;
}

.cart-empty div{
font:42px Parisienne,cursive;
color:#c99291;
}

.cart-empty h3{
font:400 22px "Cormorant Garamond",serif;
color:var(--wine);
margin:8px 0;
}

.cart-empty p{
font:14px "Cormorant Garamond",serif;
color:#957c80;
}

.cart-footer{
padding:24px 28px 30px;
border-top:1px solid var(--border);
}

.cart-total{
display:flex;
justify-content:space-between;
align-items:center;
}

.cart-total span{
font-size:8px;
letter-spacing:1.5px;
text-transform:uppercase;
}

.cart-total strong{
font:400 25px Italiana,serif;
color:var(--wine);
}

.pix-note{
font:italic 12px "Cormorant Garamond",serif;
color:#988084;
margin:10px 0 15px;
}

.checkout-button,
.generate-pix-button,
.payment-done-button,
.success-step button{
width:100%;
height:50px;
border:0;
background:var(--wine);
color:#fff;
font-size:8px;
font-weight:500;
letter-spacing:1.6px;
text-transform:uppercase;
transition:.3s;
}

.checkout-button:hover,
.generate-pix-button:hover,
.payment-done-button:hover,
.success-step button:hover{
background:var(--wine-deep);
}

.checkout-modal{
position:fixed;
width:min(480px,calc(100% - 30px));
max-height:90vh;
overflow:auto;
left:50%;
top:50%;
transform:translate(-50%,-46%) scale(.96);
z-index:110;
background:#fffaf6;
box-shadow:0 30px 100px rgba(48,25,35,.3);
padding:43px;
opacity:0;
pointer-events:none;
transition:.35s;
}

.checkout-modal.show{
opacity:1;
pointer-events:auto;
transform:translate(-50%,-50%) scale(1);
}

.modal-close{
position:absolute;
right:19px;
top:13px;
}

.checkout-step{
display:none;
}

.checkout-step.active{
display:block;
}

.modal-eyebrow{
display:block;
text-align:center;
font-size:7px;
letter-spacing:2.6px;
color:#a5797c;
}

.checkout-step h2{
font:400 34px "Cormorant Garamond",serif;
color:var(--wine);
text-align:center;
margin:7px 0 9px;
}

.modal-intro,
.pix-description{
font:14px/1.45 "Cormorant Garamond",serif;
color:#8b7479;
text-align:center;
}

.checkout-summary,
.pix-value{
margin:22px 0;
padding:15px 18px;
border-top:1px solid #e5d2c6;
border-bottom:1px solid #e5d2c6;
}

.checkout-summary div,
.pix-value{
display:flex;
justify-content:space-between;
align-items:center;
}

.checkout-summary span,
.pix-value span{
font-size:8px;
letter-spacing:1px;
text-transform:uppercase;
}

.checkout-summary strong,
.pix-value strong{
font:400 21px Italiana,serif;
color:var(--wine);
}

.form-group{
margin-bottom:17px;
}

.form-group label{
display:block;
font-size:8px;
letter-spacing:1px;
text-transform:uppercase;
color:#80636a;
margin-bottom:7px;
}

.form-group label span{
text-transform:none;
letter-spacing:0;
font-weight:300;
}

.form-group input,
.form-group textarea{
width:100%;
border:1px solid #ddc9bf;
background:#fff;
outline:0;
padding:13px;
color:#654d55;
resize:none;
transition:.3s;
}

.form-group input:focus,
.form-group textarea:focus{
border-color:#a9787f;
box-shadow:0 0 0 3px rgba(169,120,127,.08);
}

.security-info{
display:flex;
align-items:flex-start;
gap:8px;
margin-top:13px;
color:#9c8588;
}

.security-info span{
color:var(--gold);
}

.security-info p{
font:11px/1.4 "Cormorant Garamond",serif;
}

.qr-container{
width:220px;
height:220px;
margin:20px auto;
padding:12px;
display:grid;
place-items:center;
background:#fff;
border:1px solid #e4d5cc;
}

#qrcode img,
#qrcode canvas{
max-width:100%;
height:auto!important;
}

.pix-copy-area label{
display:block;
font-size:7px;
letter-spacing:1.4px;
text-transform:uppercase;
margin-bottom:7px;
color:#876b71;
}

.pix-copy-area>div{
display:flex;
}

.pix-copy-area input{
width:100%;
min-width:0;
height:43px;
border:1px solid #ddc9bf;
padding:0 10px;
font-size:9px;
outline:0;
background:#fff;
color:#6e555c;
}

.pix-copy-area button{
width:85px;
border:0;
background:#a56f76;
color:#fff;
font-size:7px;
letter-spacing:1px;
text-transform:uppercase;
}

.pix-recipient{
font:italic 12px "Cormorant Garamond",serif;
text-align:center;
color:#947b80;
margin:13px 0 18px;
}

.back-checkout{
display:block;
margin:14px auto 0;
border:0;
background:none;
font-size:7px;
letter-spacing:1px;
text-transform:uppercase;
color:#956f76;
}

.success-step{
text-align:center;
}

.success-icon{
width:70px;
height:70px;
display:grid;
place-items:center;
margin:0 auto 22px;
border:1px solid #d6b793;
border-radius:50%;
font-size:22px;
color:#b67574;
}

.success-step p{
font:15px/1.5 "Cormorant Garamond",serif;
color:#887176;
}

.success-signature{
font:34px Parisienne,cursive;
color:var(--wine);
margin:26px 0;
}

.success-signature i{
font-size:20px;
color:var(--gold);
}

.success-step small{
display:block;
font:11px/1.4 "Cormorant Garamond",serif;
color:#a18b8e;
margin-top:14px;
}

.toast{
position:fixed;
left:50%;
bottom:25px;
transform:translate(-50%,30px);
z-index:200;
padding:12px 20px;
background:#583044;
color:#fff;
font-size:8px;
letter-spacing:1px;
opacity:0;
pointer-events:none;
transition:.3s;
}

.toast.show{
opacity:1;
transform:translate(-50%,0);
}

@media(max-width:1050px){

.products-grid{
grid-template-columns:repeat(3,1fr);
}

.custom-gift{
grid-template-columns:130px 1fr 210px;
}

}

@media(max-width:800px){

.topbar{
height:70px;
padding:0 18px;
grid-template-columns:1fr auto;
}

.back-link{
display:none;
}

.brand{
justify-self:start;
}

.cart-button span:nth-child(2){
display:none;
}

.hero{
padding:60px 20px 55px;
}

.hero h1{
font-size:48px;
}

.hero h1 i{
font-size:44px;
}

.hero-info{
gap:10px;
flex-wrap:wrap;
}

.shop{
padding:10px 17px 70px;
}

.shop-header{
display:block;
}

.filters{
justify-content:flex-start;
margin-top:18px;
}

.products-grid{
grid-template-columns:repeat(2,1fr);
gap:14px;
}

.product-image{
height:210px;
}

.custom-gift{
grid-template-columns:1fr;
text-align:center;
padding:32px 25px;
}

.custom-decoration{
display:none;
}

.custom-content p{
margin:auto;
}

.custom-action{
width:min(280px,100%);
margin:auto;
}

}

@media(max-width:520px){

.hero{
padding:50px 18px 45px;
}

.eyebrow{
font-size:6px;
letter-spacing:3px;
}

.hero h1{
font-size:39px;
line-height:1.05;
}

.hero h1 i{
display:block;
font-size:43px;
margin-top:5px;
}

.hero>p{
font-size:16px;
}

.hero-info{
font-size:5.5px;
letter-spacing:1px;
}

.shop-header h2{
font-size:27px;
}

.filters{
flex-wrap:nowrap;
overflow-x:auto;
padding-bottom:8px;
}

.filter{
flex:0 0 auto;
}

.products-grid{
grid-template-columns:1fr 1fr;
gap:10px;
}

.product-image{
height:175px;
}

.product-category{
font-size:5px;
left:9px;
top:9px;
padding:6px 7px;
}

.product-body{
padding:14px 12px 15px;
}

.product-body h3{
font-size:17px;
min-height:39px;
}

.product-body p{
font-size:12px;
min-height:50px;
margin:4px 0 12px;
}

.product-footer{
display:block;
}

.gift-button{
width:100%;
margin-top:10px;
}

.product-price strong{
font-size:15px;
}

.checkout-modal{
padding:38px 22px 25px;
}

.qr-container{
width:200px;
height:200px;
}

.closing h2{
font-size:37px;
}

footer{
font-size:5.5px;
}

}

@media(max-width:355px){

.products-grid{
grid-template-columns:1fr;
}

.product-image{
height:220px;
}

.product-body h3,
.product-body p{
min-height:auto;
}

}