/* ==========================================
   BROWNIE'S BY VIRGINIA
   LUXURY FOOD BRAND
========================================== */

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

/*=========================
ROOT
=========================*/

:root{

--bg:#0A0908;
--surface:#171412;
--cream:#F8F4EE;
--beige:#E8D8C4;
--brown:#3A2419;
--brown-soft:#6B5143;
--gold:#C08A4A;
--gold-dark:#8E5D35;
--white:#FFFFFF;

--shadow-lg:0 35px 80px rgba(0,0,0,.35);
--shadow-md:0 18px 40px rgba(0,0,0,.25);

--radius-xl:42px;
--radius-lg:26px;
--radius-md:18px;

--ease:cubic-bezier(.22,.61,.36,1);

}

body.light{

--bg:#F7F3EE;
--surface:#FFFFFF;
--cream:#FFFFFF;

}

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

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

html{
scroll-behavior:smooth;
}

body{
font-family:'Poppins',sans-serif;
background:
radial-gradient(circle at top left,#24140D,#080808 65%);
overflow-x:hidden;
padding:18px;
position:relative;
min-height:100vh;
}

/*=========================
BACKGROUND GLOW
=========================*/

body::before{

content:"";

position:fixed;

width:480px;
height:480px;

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

filter:blur(130px);

border-radius:50%;

top:-140px;
left:-120px;

animation:glowMove 14s ease-in-out infinite;

z-index:-3;

}

body::after{

content:"";

position:fixed;

width:320px;
height:320px;

background:rgba(255,190,120,.06);

filter:blur(120px);

border-radius:50%;

bottom:-100px;
right:-80px;

animation:glowMove 18s ease-in-out infinite reverse;

z-index:-3;

}

@keyframes glowMove{

50%{
transform:translate(40px,30px);
}

}

/*=========================
CURSOR GLOW
=========================*/

#cursor-glow{

position:fixed;

width:220px;
height:220px;

background:
radial-gradient(circle,
rgba(255,190,120,.16),
transparent 70%);

pointer-events:none;

transform:translate(-50%,-50%);

z-index:-1;

}

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

#loader{

position:fixed;
inset:0;

background:#090909;

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

z-index:9999;

transition:.8s;

}

.loader-logo{

font-family:'Cormorant Garamond',serif;

font-size:72px;

letter-spacing:6px;

color:#F4D7B7;

animation:pulseLogo 2s ease infinite;

}

@keyframes pulseLogo{

50%{
transform:scale(1.04);
opacity:.85;
}

}

/*=========================
PROGRESS BAR
=========================*/

#progressBar{

position:fixed;

top:0;
left:0;

height:3px;

width:0;

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

z-index:5000;

}

/*=========================
NAVBAR
=========================*/

#navbar{

position:fixed;

top:16px;
left:50%;

transform:translateX(-50%);

width:calc(100% - 36px);

max-width:1320px;

background:rgba(18,18,18,.36);

backdrop-filter:blur(22px);

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

border-radius:22px;

transition:.45s var(--ease);

z-index:1000;

}

#navbar.scrolled{

background:rgba(12,12,12,.72);

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

}

nav{

display:flex;
justify-content:space-between;
align-items:center;

padding:18px 30px;

}

.logo{

font-family:'Cormorant Garamond',serif;

font-size:38px;

color:#F5D8B8;

letter-spacing:1px;

}

nav ul{

display:flex;
gap:30px;
list-style:none;

}

nav ul li a{

text-decoration:none;

color:#E8D1B5;

font-size:12px;

text-transform:uppercase;

letter-spacing:3px;

position:relative;

transition:.35s;

}

nav ul li a::after{

content:"";

position:absolute;

left:0;
bottom:-6px;

width:0;

height:1px;

background:var(--gold);

transition:.35s;

}

nav ul li a:hover{

color:#FFD7A7;

}

nav ul li a:hover::after{

width:100%;

}

/*=========================
NAV ACTIONS
=========================*/

.nav-actions{

display:flex;
align-items:center;
gap:14px;

}

.icon-btn,
.cart-icon{

width:46px;
height:46px;

border:none;

border-radius:50%;

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

color:white;

cursor:pointer;

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

transition:.35s;

}

.icon-btn:hover,
.cart-icon:hover{

transform:translateY(-2px);

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

}

.cart-icon{

position:relative;

font-size:20px;

}

#cartCount{

position:absolute;

top:-4px;
right:-4px;

width:22px;
height:22px;

border-radius:50%;

background:var(--gold);

color:white;

font-size:11px;

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

font-weight:700;

}

/* Hamburger */

#hamburger{

display:none;
flex-direction:column;
gap:5px;

}

#hamburger span{

width:22px;
height:2px;

background:white;

transition:.35s;

}

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

.hero{

max-width:1320px;

margin:110px auto 70px;

background:
linear-gradient(135deg,
#F8F1E8,
#E6D2BE);

border-radius:var(--radius-xl);

padding:72px;

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;

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

position:relative;

overflow:hidden;

}

.hero::before{

content:"";

position:absolute;

width:320px;
height:320px;

border-radius:50%;

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

top:-140px;
left:-80px;

}

.hero::after{

content:"";

position:absolute;

width:180px;
height:180px;

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

filter:blur(25px);

border-radius:50%;

bottom:-60px;
right:-40px;

}

.hero-badge{

display:inline-block;

padding:8px 18px;

border-radius:999px;

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

color:#8A664A;

font-size:13px;

letter-spacing:2px;

margin-bottom:22px;

}

.hero h1{

font-family:'Cormorant Garamond',serif;

font-size:86px;

line-height:.92;

color:var(--brown);

}

.hero h1 span{

display:block;

font-size:70px;

font-style:italic;

font-weight:500;

color:#6B4631;

}

.tagline{

margin:18px 0;

letter-spacing:3px;

text-transform:uppercase;

color:#A77755;

}

.hero-desc{

font-size:16px;

line-height:2;

color:var(--brown-soft);

max-width:520px;

}

/* Buttons */

.hero-buttons{

display:flex;
gap:18px;
margin:36px 0;
flex-wrap:wrap;

}

.btn{

padding:16px 32px;

border-radius:999px;

text-decoration:none;

font-weight:600;

position:relative;

overflow:hidden;

transition:.4s;

}

.btn::before{

content:"";

position:absolute;

top:0;
left:-120%;

width:70%;
height:100%;

background:
linear-gradient(120deg,
transparent,
rgba(255,255,255,.35),
transparent);

transition:.8s;

}

.btn:hover::before{

left:140%;

}

.btn-gold{

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

color:white;

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

}

.btn-gold:hover{

transform:translateY(-4px);

}

.btn-outline{

border:1px solid rgba(100,70,45,.35);

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

color:var(--brown);

}

.hero-features{

display:flex;
gap:22px;
flex-wrap:wrap;

color:#7A5B47;

font-size:14px;

}

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

.hero-image{

position:relative;
display:flex;
justify-content:center;

}

.image-wrapper{

position:relative;
max-width:520px;

}

.image-wrapper img{

width:108%;
margin-left:-4%;

display:block;

border-radius:34px;

box-shadow:
0 45px 90px rgba(0,0,0,.32);

transition:.8s;

}

.image-wrapper:hover img{

transform:translateY(-12px) scale(1.03);

}

.floating-label{

position:absolute;

bottom:20px;
left:20px;

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

padding:14px 22px;

border-radius:18px;

font-weight:600;

color:var(--brown);

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

}

/* Floating Chocolate */

.floating-choco{

position:absolute;

border-radius:50%;

background:
radial-gradient(circle,#D9A46A,#8A5B2E);

opacity:.35;

animation:floatChocolate 7s ease infinite;

}

.choco1{

width:50px;
height:50px;

top:20px;
right:-10px;

}

.choco2{

width:28px;
height:28px;

bottom:90px;
left:-8px;

animation-delay:2s;

}

.choco3{

width:16px;
height:16px;

top:150px;
right:30px;

animation-delay:4s;

}

@keyframes floatChocolate{

50%{
transform:translateY(-14px) rotate(12deg);
}

}

/*=========================
SECTION
=========================*/

section{

max-width:1320px;

margin:120px auto;

}

.section-header{

text-align:center;

margin-bottom:55px;

}

.section-header p{

color:#C7A47E;

letter-spacing:3px;

text-transform:uppercase;

font-size:12px;

margin-bottom:10px;

}

.section-header h2{

font-family:'Cormorant Garamond',serif;

font-size:56px;

color:var(--cream);

}

/*=========================
PRODUCT SLIDER
=========================*/

.product-slider{

display:flex;
gap:28px;

overflow-x:auto;

scroll-snap-type:x mandatory;

padding-bottom:10px;

}

.product-slider::-webkit-scrollbar{

height:6px;

}

.product-slider::-webkit-scrollbar-thumb{

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

border-radius:999px;

}

.product-card{

flex:0 0 320px;

scroll-snap-align:start;

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

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

backdrop-filter:blur(16px);

border-radius:32px;

overflow:hidden;

transition:.5s var(--ease);

position:relative;

}

.product-card:hover{

transform:
translateY(-12px);

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

}

.product-card img{

width:100%;
height:340px;

object-fit:cover;

transition:.7s;

}

.product-card:hover img{

transform:scale(1.08);

}

.product-info{

padding:24px;

color:white;

}

.product-info h3{

font-family:'Cormorant Garamond',serif;

font-size:34px;

margin-bottom:8px;

}

.product-info p{

color:#C8B6A4;

line-height:1.7;

}

.price{

color:#FFCA84;

font-size:28px;

font-weight:700;

margin:18px 0;

}

.cart-btn{

width:100%;

padding:15px;

border:none;

border-radius:999px;

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

color:white;

cursor:pointer;

transition:.35s;

}

.cart-btn:hover{

transform:translateY(-3px);

}

/*=========================
STORY
=========================*/

.story-card{

background:
linear-gradient(135deg,
rgba(255,255,255,.05),
rgba(255,255,255,.03));

backdrop-filter:blur(18px);

border-radius:40px;

padding:70px;

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

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

}

.small-title{

color:#C8A37E;

letter-spacing:3px;

text-transform:uppercase;

margin-bottom:10px;

}

.story-card h2{

font-family:'Cormorant Garamond',serif;

font-size:62px;

color:white;

}

.story-card p{

color:#C8B6A4;

line-height:2;

}

/*=========================
WHY US
=========================*/

.why-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:24px;

}

.why-card{

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

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

backdrop-filter:blur(16px);

padding:34px;

border-radius:28px;

text-align:center;

transition:.35s;

}

.why-card:hover{

transform:translateY(-8px);

}

.why-icon{

font-size:42px;

margin-bottom:18px;

}

.why-card h3{

font-family:'Cormorant Garamond',serif;

font-size:32px;

color:white;

margin-bottom:12px;

}

.why-card p{

color:#C8B6A4;

line-height:1.8;

}

/*=========================
TESTIMONIAL
=========================*/

.testimonial-track{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:22px;

}

.testimonial{

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

backdrop-filter:blur(18px);

border-radius:28px;

padding:32px;

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

color:white;

transition:.35s;

}

.testimonial:hover{

transform:translateY(-8px);

}

.testimonial p{

margin:18px 0;

color:#C8B6A4;

line-height:1.8;

}

/*=========================
GALLERY
=========================*/

.gallery-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:18px;

}

.gallery-grid img{

width:100%;
height:260px;

object-fit:cover;

border-radius:24px;

transition:.45s;

cursor:pointer;

}

.gallery-grid img:hover{

transform:
translateY(-8px)
scale(1.03);

}

/*=========================
CART
=========================*/

#cart{

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

backdrop-filter:blur(18px);

border-radius:28px;

padding:28px;

color:white;

min-height:120px;

}

.cart-footer{

display:flex;
justify-content:space-between;
align-items:center;

margin-top:24px;

flex-wrap:wrap;

gap:20px;

}

#total{

font-family:'Cormorant Garamond',serif;

font-size:32px;

color:white;

}

#checkout{

padding:15px 30px;

border:none;

border-radius:999px;

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

color:white;

cursor:pointer;

}

/*=========================
CTA
=========================*/

.cta-card{

background:
linear-gradient(135deg,#F8F1E8,#E6D2BE);

padding:70px;

border-radius:40px;

text-align:center;

}

.cta-card p{

letter-spacing:3px;

text-transform:uppercase;

color:#A77755;

margin-bottom:10px;

}

.cta-card h2{

font-family:'Cormorant Garamond',serif;

font-size:64px;

color:var(--brown);

margin-bottom:30px;

}

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

footer{

margin-top:120px;

padding:90px 20px;

text-align:center;

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

}

footer h2{

font-family:'Cormorant Garamond',serif;

font-size:54px;

color:white;

margin-bottom:10px;

}

footer p{

color:#BDA992;

}

.footer-links{

display:flex;
justify-content:center;
gap:30px;
flex-wrap:wrap;

margin:30px 0;

}

.footer-links a{

color:#D8C1A5;

text-decoration:none;

transition:.35s;

}

.footer-links a:hover{

color:#FFD6A2;

}

.footer-divider{

width:120px;
height:1px;

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

margin:30px auto;

}

/*=========================
MODAL
=========================*/

.modal{

position:fixed;
inset:0;

display:none;

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

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

padding:20px;

z-index:2000;

}

.modal.active{

display:flex;

}

.modal-content{

width:min(900px,100%);

background:var(--cream);

border-radius:34px;

overflow:hidden;

display:grid;

grid-template-columns:1fr 1fr;

position:relative;

}

.modal-content img{

width:100%;
height:100%;

object-fit:cover;

}

.modal-body{

padding:40px;

display:flex;
flex-direction:column;
justify-content:center;

}

.modal-body h3{

font-family:'Cormorant Garamond',serif;

font-size:42px;

color:var(--brown);

margin-bottom:12px;

}

.modal-body p{

line-height:1.8;

color:var(--brown-soft);

margin-bottom:18px;

}

#modalPrice{

font-size:28px;

font-weight:700;

color:var(--gold-dark);

margin-bottom:22px;

}

.quantity{

display:flex;
align-items:center;
gap:12px;

margin-bottom:22px;

}

.quantity button{

width:40px;
height:40px;

border:none;

border-radius:50%;

background:var(--beige);

cursor:pointer;

}

#modalAddCart{

padding:15px;

border:none;

border-radius:999px;

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

color:white;

cursor:pointer;

}

.close{

position:absolute;

top:16px;
right:22px;

font-size:34px;

cursor:pointer;

}

/*=========================
TOAST
=========================*/

#toast{

position:fixed;

top:95px;
left:50%;

transform:translateX(-50%) translateY(-20px);

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

color:white;

padding:14px 24px;

border-radius:999px;

opacity:0;

pointer-events:none;

transition:.4s;

z-index:3000;

}

#toast.show{

opacity:1;

transform:translateX(-50%) translateY(0);

}

/*=========================
ANIMATION
=========================*/

.fade{

opacity:0;

transform:
translateY(50px)
scale(.98);

filter:blur(6px);

transition:1s var(--ease);

}

.fade.show{

opacity:1;

transform:none;

filter:blur(0);

}

/*=========================
RESPONSIVE
=========================*/

@media(max-width:900px){

body{
padding:10px;
}

#navbar{
top:10px;
width:calc(100% - 20px);
}

.hero{

grid-template-columns:1fr;

padding:40px;

text-align:center;

margin-top:90px;

}

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

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

.hero-buttons,
.hero-features{
justify-content:center;
}

#hamburger{
display:flex;
}

nav ul{

position:absolute;

top:88px;
left:12px;
right:12px;

background:rgba(18,18,18,.95);

backdrop-filter:blur(20px);

border-radius:22px;

padding:24px;

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

opacity:0;
visibility:hidden;

transform:translateY(-20px);

transition:.35s;

}

nav ul.active{

opacity:1;
visibility:visible;
transform:translateY(0);

}

.story-card,
.modal-content{

grid-template-columns:1fr;

}

.why-grid,
.testimonial-track{

grid-template-columns:1fr;

}

.gallery-grid{

grid-template-columns:repeat(2,1fr);

}

.gallery-grid img{

height:180px;

}

.product-card{

flex:0 0 86%;

}

.cta-card{

padding:45px 30px;

}

.cta-card h2{

font-size:42px;

}

}

/*=========================
PREMIUM CHECKOUT
=========================*/

.checkout-wrapper{
display:grid;
grid-template-columns:1.2fr .8fr;
gap:30px;
}

.checkout-form,
.cart-summary{
background:rgba(255,255,255,.05);
backdrop-filter:blur(18px);
border:1px solid rgba(255,255,255,.08);
border-radius:30px;
padding:30px;
}

.checkout-form input,
.checkout-form textarea,
.checkout-form select{
width:100%;
padding:16px;
margin-bottom:18px;
border:none;
border-radius:16px;
background:rgba(255,255,255,.08);
color:white;
font-family:Poppins,sans-serif;
outline:none;
}

.checkout-form textarea{
min-height:110px;
resize:vertical;
}

.checkout-form input::placeholder,
.checkout-form textarea::placeholder{
color:#C8B6A4;
}

@media(max-width:900px){
.checkout-wrapper{
grid-template-columns:1fr;
}
}

.input-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    margin-bottom:18px;
}

.input-group{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.input-group label{
    color:#E8D1B5;
    font-size:13px;
    letter-spacing:1px;
}

@media(max-width:900px){
    .input-row{
        grid-template-columns:1fr;
    }
}

/*=========================
PREMIUM CHECKOUT
=========================*/

.checkout-wrapper{
display:grid;
grid-template-columns:1.2fr .8fr;
gap:30px;
}

.checkout-form,
.cart-summary{
background:rgba(255,255,255,.05);
backdrop-filter:blur(18px);
border:1px solid rgba(255,255,255,.08);
border-radius:30px;
padding:30px;
}

.input-group{
display:flex;
flex-direction:column;
gap:8px;
margin-bottom:18px;
}

.input-group label{
color:#E8D1B5;
font-size:13px;
letter-spacing:1px;
font-weight:500;
}

.input-group input,
.input-group textarea{
width:100%;
padding:16px;
border:none;
border-radius:16px;
background:rgba(255,255,255,.08);
color:white;
font-family:Poppins,sans-serif;
outline:none;
}

.input-group select{
    width:100%;
    padding:16px;
    border:1px solid rgba(192,138,74,.45);
    border-radius:16px;
    background:linear-gradient(145deg,#1A120D,#241811);
    color:#F7E7CE;
    font-family:Poppins,sans-serif;
    cursor:pointer;
    outline:none;
    transition:.35s ease;
    appearance:none;
}

.input-group select:focus{
    border-color:#D4AF37;
    box-shadow:0 0 18px rgba(212,175,55,.35);
}

.input-group select option{
    background:#18120D;
    color:#F7E7CE;
}

.input-group textarea{
min-height:110px;
resize:vertical;
}

.input-group input::placeholder,
.input-group textarea::placeholder{
color:#C8B6A4;
}

.input-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
}

.cart-summary{
display:flex;
flex-direction:column;
gap:20px;
}

#checkout{
width:100%;
padding:16px;
border:none;
border-radius:999px;
background:linear-gradient(135deg,#C08A4A,#8E5D35);
color:white;
font-weight:600;
cursor:pointer;
transition:.35s;
}

#checkout:hover{
transform:translateY(-3px);
}

@media(max-width:900px){

.checkout-wrapper{
grid-template-columns:1fr;
}

.input-row{
grid-template-columns:1fr;
}

}