/* ==========================
   MAREME GOLD
==========================*/

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Poppins,sans-serif;
}

body{

background:#0d0d0d;

color:#FFF;

max-width:430px;

margin:auto;

min-height:100vh;

overflow-x:hidden;

padding-bottom:90px;

}


img{

width:100%;

display:block;

}


a{

text-decoration:none;

color:inherit;

}


/***************************
HEADER
***************************/

.header{

padding:25px 15px;

text-align:center;

background:#111;

border-bottom:1px solid rgba(212,175,55,.15);

position:sticky;

top:0;

z-index:999;

}


.logo{

width:95px;

margin:auto;

animation:logo 1s;

}


@keyframes logo{

0%{

transform:scale(.3);

opacity:0;

}

100%{

transform:scale(1);

opacity:1;

}

}


.logo_title{

font-family:"Playfair Display",serif;

font-size:28px;

color:#D4AF37;

margin-top:10px;

}


.welcome{

color:#ddd;

font-size:14px;

margin-top:8px;

animation:fade 3s infinite;

}


@keyframes fade{

0%{opacity:0;}

50%{opacity:1;}

100%{opacity:0;}

}


/***************************
SLIDER
***************************/

.hero{

padding:15px;

}


.slider{

border-radius:22px;

overflow:hidden;

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

}


.slider img{

height:230px;

object-fit:cover;

}


/***************************
SEARCH
***************************/

.search_box{

background:#FFF;

border-radius:50px;

padding:12px 18px;

display:flex;

align-items:center;

margin:15px;

}


.search_box i{

color:#D4AF37;

font-size:18px;

margin-right:10px;

}


.search_box input{

border:none;

outline:none;

width:100%;

font-size:15px;

}


/***************************
TITLE
***************************/

.section_title{

font-size:20px;

font-family:"Playfair Display",serif;

color:#D4AF37;

margin:15px;

}


/***************************
CHIPS
***************************/

.scroll_menu{

display:flex;

overflow-x:auto;

padding:0 15px 10px;

gap:10px;

scrollbar-width:none;

}


.scroll_menu::-webkit-scrollbar{

display:none;

}


.chip{

border:none;

padding:10px 18px;

background:#1a1a1a;

color:#FFF;

border-radius:50px;

white-space:nowrap;

font-size:13px;

transition:.3s;

}


.chip:hover{

background:#D4AF37;

color:#000;

}


.chip.active{

background:#D4AF37;

color:#000;

font-weight:bold;

}


/***************************
PRODUCT
***************************/

.product-card{

background:#FFF;

border-radius:22px;

overflow:hidden;

border:none;

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

transition:.3s;

}


.product-card:hover{

transform:translateY(-6px);

}


.product-image{

height:180px;

object-fit:cover;

}


.card-body{

padding:12px;

}


.card-body h6{

font-size:16px;

font-weight:700;

color:#000;

}


.card-body small{

color:#666;

}


.badge{

background:#D4AF37!important;

color:#000!important;

padding:7px 12px;

border-radius:20px;

margin-top:6px;

display:inline-block;

}


.price{

margin-top:8px;

font-size:18px;

color:#D4AF37;

font-weight:700;

}


/***************************
FOOTER
***************************/

.bottom_bar{

position:fixed;

bottom:0;

left:50%;

transform:translateX(-50%);

max-width:430px;

width:100%;

height:70px;

background:#111;

display:flex;

justify-content:space-around;

align-items:center;

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

}


.bottom_bar a{

display:flex;

flex-direction:column;

align-items:center;

font-size:12px;

color:#AAA;

}


.bottom_bar i{

font-size:22px;

margin-bottom:4px;

}


.bottom_bar a:hover{

color:#D4AF37;

}


/***************************
MOBILE
***************************/

@media(max-width:430px){

.product-image{

height:165px;

}

}