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


body{

font-family:Arial, Helvetica, sans-serif;

color:#4b3025;

line-height:1.5;

background-color:#fff8ed;

background-image:

radial-gradient(circle at 8% 12%,
rgba(255,182,193,.22) 0,
rgba(255,182,193,.22) 38px,
transparent 39px),

radial-gradient(circle at 92% 18%,
rgba(255,210,120,.22) 0,
rgba(255,210,120,.22) 42px,
transparent 43px),

radial-gradient(circle at 12% 82%,
rgba(190,230,170,.20) 0,
rgba(190,230,170,.20) 45px,
transparent 46px),

radial-gradient(circle at 88% 78%,
rgba(255,170,200,.20) 0,
rgba(255,170,200,.20) 40px,
transparent 41px),

linear-gradient(
135deg,
#fff8ed,
#fff1dc
);

background-attachment:fixed;

}



img{

max-width:100%;

display:block;

}



a{

text-decoration:none;

}





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


.header{

max-width:1200px;

margin:20px auto;

padding:18px 35px;

display:flex;

align-items:center;

justify-content:space-between;

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

backdrop-filter:blur(12px);

border-radius:30px;

box-shadow:

0 10px 30px rgba(75,48,37,.12);

}



.logo img{

width:95px;

}



nav{

display:flex;

gap:35px;

}



nav a{

font-weight:700;

color:#4b3025;

transition:.3s;

}



nav a:hover{

color:#c47b52;

transform:translateY(-2px);

}



.menu-btn{

display:none;

font-size:32px;

cursor:pointer;

}






/* ==========================
MOBILE MENU
========================== */


.mobile-menu{

position:fixed;

top:0;

right:-320px;

width:290px;

height:100vh;

background:#fff8ed;

padding:100px 35px;

z-index:999;

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

transition:.35s;

}



.mobile-menu.active{

right:0;

}



.mobile-menu a{

display:block;

font-size:21px;

font-weight:bold;

margin-bottom:28px;

color:#4b3025;

}



.mobile-menu .telegram{

background:#5b3828;

color:white !important;

text-align:center;

padding:14px;

border-radius:40px;

}





/* ==========================
BUTTON
========================== */


.button,
.telegram,
.product-card a{


display:inline-block;

margin:8px;

background:#5b3828;

color:white;

padding:13px 28px;

border-radius:40px;

font-weight:bold;

transition:.35s;

}



.button:hover,
.telegram:hover,
.product-card a:hover{


transform:translateY(-4px);

box-shadow:

0 10px 20px rgba(91,56,40,.25);

}






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


.hero{

max-width:1200px;

margin:70px auto;

padding:45px;

display:flex;

align-items:center;

gap:60px;

background:

linear-gradient(

135deg,

#fff8ed,

#ffe5cc

);

border-radius:45px;

box-shadow:

0 20px 50px rgba(75,48,37,.12);

position:relative;

overflow:hidden;

}



.hero::before{

content:"";

position:absolute;

width:180px;

height:180px;

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

border-radius:50%;

top:-60px;

left:-60px;

}



.hero-text{

flex:1;

position:relative;

z-index:2;

}



.hero-text h1{

font-size:58px;

letter-spacing:-2px;

}



.hero-text h2{

font-size:35px;

margin:20px 0;

}



.hero-text p{

font-size:18px;

max-width:500px;

}



.hero-image{

flex:1;

position:relative;

z-index:2;

}



.hero-image img{

border-radius:35px;

box-shadow:

0 20px 40px rgba(75,48,37,.18);

}

/* ==========================
FEATURES
========================== */


.features{

max-width:1200px;

margin:70px auto;

display:grid;

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

gap:30px;

}



.feature-card{

background:white;

padding:35px 25px;

border-radius:30px;

box-shadow:

0 15px 35px rgba(75,48,37,.08);

transition:.35s;

}



.feature-card:hover{

transform:translateY(-10px);

}



.icon{

font-size:40px;

}







/* ==========================
COLLECTION
========================== */


.collection{

max-width:1200px;

margin:80px auto;

text-align:center;

position:relative;

}



.collection::after{

content:"🍭";

position:absolute;

right:20px;

bottom:0;

font-size:70px;

opacity:.12;

transform:rotate(20deg);

}



.collection h1,
.collection h2{

font-size:42px;

}



.collection p{

color:#806554;

}






/* ==========================
PRODUCTS
========================== */


.products{

margin-top:45px;

display:grid;

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

gap:30px;

}



.product-card{

background:white;

padding:15px;

border-radius:32px;

box-shadow:

0 15px 35px rgba(75,48,37,.1);

transition:.35s;

overflow:hidden;

}



.product-card:hover{

transform:translateY(-12px);

box-shadow:

0 25px 50px rgba(75,48,37,.18);

}



.product-card img{

border-radius:25px;

transition:.35s;

}



.product-card:hover img{

transform:scale(1.05);

}



.product-card h3{

margin-top:18px;

font-size:22px;

}







/* ==========================
PRODUCT DETAIL
========================== */


.product-detail{

max-width:1200px;

margin:70px auto;

padding:20px;

}



.product-detail-card{

display:flex;

gap:50px;

align-items:flex-start;

background:white;

padding:35px;

border-radius:40px;

box-shadow:

0 20px 50px rgba(75,48,37,.12);

}





/* Product Image */


.product-image-box{

flex:1;

}



.product-image-box img{

width:100%;

max-width:520px;

border-radius:35px;

}







/* Product Content */


.product-content{

flex:1;

padding:20px;

}



.product-content h1{

font-size:42px;

margin-bottom:15px;

color:#4b3025;

}



.product-description{

font-size:18px;

line-height:1.7;

margin-bottom:25px;

}





.info-box{

background:#fff7ef;

padding:25px;

border-radius:30px;

}



.info-box h3{

margin-bottom:15px;

font-size:24px;

}





.product-buttons{

margin-top:30px;

display:flex;

gap:15px;

flex-wrap:wrap;

}






/* ==========================
ABOUT
========================== */


.about-preview{

max-width:900px;

margin:80px auto;

padding:50px;

background:white;

border-radius:40px;

box-shadow:

0 15px 40px rgba(75,48,37,.1);

text-align:center;

}



.about-preview img{

width:160px;

margin:auto;

}

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


footer{

margin-top:80px;

background:#4b3025;

color:white;

padding:50px;

text-align:center;

}



.footer-logo img{

width:90px;

margin:auto;

}






/* ==========================
CANDY DECORATION
========================== */


body::before{

content:"🍭";

position:fixed;

top:120px;

left:25px;

font-size:65px;

opacity:.08;

z-index:-1;

transform:rotate(-25deg);

}



body::after{

content:"🍬";

position:fixed;

bottom:100px;

right:25px;

font-size:70px;

opacity:.08;

z-index:-1;

transform:rotate(20deg);

}






/* ==========================
MOBILE
========================== */


@media(max-width:768px){

.button,
.telegram{

display:block;

width:fit-content;

margin:12px auto;

}



.header{

margin:15px;

padding:15px 20px;

}



.logo img{

width:75px;

}



nav{

display:none;

}



.menu-btn{

display:block;

}





.hero{

margin:30px 15px;

padding:25px;

flex-direction:column;

text-align:center;

gap:30px;

}



.hero-text h1{

font-size:40px;

}



.hero-text h2{

font-size:26px;

}






.features{

grid-template-columns:1fr;

margin:40px 15px;

}






.collection{

margin:50px 15px;

}



.collection h1,
.collection h2{

font-size:32px;

}






.products{

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

gap:15px;

}



.product-card{

padding:10px;

}



.product-card h3{

font-size:17px;

}







/* PRODUCT DETAIL MOBILE */


.product-detail{

margin:30px 15px;

padding:0;

}



.product-detail-card{

flex-direction:column;

padding:20px;

gap:25px;

}



.product-image-box img{

max-width:100%;

}



.product-content{

padding:10px;

}



.product-content h1{

font-size:32px;

}



.product-description{

font-size:16px;

}



.info-box{

padding:20px;

}




.product-buttons{

flex-direction:column;

}



.product-buttons .button,
.product-buttons .telegram{

text-align:center;

width:100%;

}







.about-preview{

margin:40px 15px;

padding:30px 20px;

}







body::before{

font-size:45px;

left:5px;

}



body::after{

font-size:45px;

right:5px;

}



}

/* ==========================
MENU BANNER
========================== */


.menu-banner{

width:100%;

max-width:1200px;

margin:50px auto;

padding:0;

text-align:center;

}

width:100%;

max-width:1200px;

margin:50px auto;

padding:0;

}



.menu-banner img{

width:100%;

height:auto;

display:block;

margin:0 auto;

border-radius:35px;

box-shadow:

0 20px 50px rgba(75,48,37,.15);

}

width:100%;

height:auto;

display:block;

border-radius:35px;

box-shadow:

0 20px 50px rgba(75,48,37,.15);

}



/* MOBILE MENU BANNER */


@media(max-width:768px){


.menu-banner{

width:100%;

margin:30px 15px;

padding:0;

}



.menu-banner img{

width:100%;

height:auto;

border-radius:25px;

}


}


/* ==========================
MENU CATEGORY
========================== */


.menu-info{

max-width:1200px;

margin:50px auto;

display:grid;

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

gap:25px;

}



.menu-category{

background:white;

padding:30px;

border-radius:30px;

box-shadow:

0 15px 35px rgba(75,48,37,.1);

text-align:center;

transition:.35s;

}



.menu-category:hover{

transform:translateY(-8px);

}



.menu-category h2{

font-size:28px;

margin-bottom:15px;

}



.menu-category p{

font-size:18px;

color:#806554;

}




@media(max-width:768px){


.menu-info{

grid-template-columns:1fr;

margin:30px 15px;

}


.menu-category{

padding:25px;

}


}