@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght@400;500;600&display=swap');

/* REMOVE MOBILE TAP HIGHLIGHT */

*{
-webkit-tap-highlight-color: transparent;
}

a,
button,
input,
textarea,
select,
div,
svg{
-webkit-tap-highlight-color: transparent;
outline: none;
}

*{
-webkit-touch-callout:none;
-webkit-user-select:none;
user-select:none;
}

/* RESET */

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

html, body{
width:100%;
overflow-x:hidden;
}

body{
font-family:Arial,sans-serif;
background:#050505;
color:#c2c8cf;
overflow-x:hidden;
}

*{
max-width:100%;
}

/* NAVBAR */

header{
  position:fixed;
  top:0;
  left:0;
  width:100%;

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

  padding:22px 26px;

  background:#050505;

  z-index:999;
}

.brand{
  font-family:'Cinzel', serif;

  font-size:42px;
  font-weight:500;

  letter-spacing:10px;

  background:linear-gradient(
    180deg,
    #f5f5f5 0%,
    #d8d8d8 35%,
    #9d9d9d 60%,
    #f2f2f2 100%
  );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;

  text-transform:uppercase;
}

.nav-icons{
  display:flex;
  align-items:center;
  gap:15px;
}

.nav-icon-link{
  display:flex;
  align-items:center;
  gap:6px;
  color:#dfe4ea;
  text-decoration:none;
  cursor:pointer;
  font-size:14px;
  font-weight:500;
  transition:opacity 0.2s;
}

.nav-icon-link:hover{
  opacity:0.8;
}


.menu-icon{
display:block;
filter:none;
opacity:1;
}

/* ================= LUXURY MENU ================= */

.mobile-menu{

position:fixed;

top:0;

right:-430px;

opacity:0;

transform:translateX(35px);

width:390px;

height:100vh;

background:

linear-gradient(

180deg,

#080808,

#050505

);

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

padding:38px;

box-sizing:border-box;

display:flex;

flex-direction:column;

z-index:20000;

transition:

right .45s ease,

opacity .35s ease,

transform .45s ease;

overflow-y:auto;

}

.mobile-menu.active{

right:0;

opacity:1;

transform:translateX(0);

}

/* HEADER */

.menu-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:55px;

}

.menu-header span{

font-family:'Cinzel',serif;

font-size:28px;

letter-spacing:4px;

color:#f5f5f5;

}

.menu-close{

background:none;

border:none;

color:#fff;

font-size:34px;

cursor:pointer;

transition:.3s;

}

.menu-close:hover{

transform:rotate(90deg);

opacity:.6;

}

/* LINKS */

.menu-links{

display:flex;

flex-direction:column;

gap:26px;

}

.menu-links a{

font-family:'Cinzel',serif;

font-size:24px;

letter-spacing:2px;

text-decoration:none;

color:#ececec;

opacity:0;

transform:translateX(30px);

transition:

opacity .45s ease,

transform .45s ease,

padding-left .3s ease,

color .3s ease;

}

.mobile-menu.active .menu-links a{

opacity:1;

transform:translateX(0);

}

.menu-links a:nth-child(1){

transition-delay:.08s;

}

.menu-links a:nth-child(2){

transition-delay:.14s;

}

.menu-links a:nth-child(3){

transition-delay:.20s;

}

.menu-links a:nth-child(4){

transition-delay:.26s;

}

.menu-links a:nth-child(5){

transition-delay:.32s;

}

.menu-links a:nth-child(6){

transition-delay:.38s;

}

.menu-links a:hover{

padding-left:18px;

color:#ffffff;

}

/* DIVIDER */

.menu-divider{

height:1px;

margin:55px 0;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.08),

rgba(255,255,255,.55),

rgba(255,255,255,.08),

transparent

);

}

.menu-divider{

position:relative;

overflow:hidden;

}

.menu-divider::after{

content:"";

position:absolute;

left:-100%;

top:0;

width:100%;

height:1px;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.9),

transparent

);

animation:

dividerShine 6s linear infinite;

}

@keyframes dividerShine{

0%{

left:-100%;

}

100%{

left:100%;

}

}

/* FOOTER */

.menu-footer{

margin-top:auto;

}

.menu-footer p{

font-family:'Cinzel',serif;

font-size:18px;

color:#d8d8d8;

margin-bottom:28px;

line-height:1.7;

}

.menu-social{

display:flex;

gap:22px;

align-items:center;

}

.menu-social a{

color:#8b8b8b;

display:flex;

align-items:center;

justify-content:center;

transition:

transform .3s ease,

opacity .3s ease,

color .3s ease;

}

.menu-social a:hover{

color:#ffffff;

opacity:1;

transform:

translateY(-3px)

scale(1.08);

}

.social-icon{

width:22px;

height:22px;

}

/* OVERLAY */

.menu-overlay{

position:fixed;

inset:0;

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

backdrop-filter:blur(8px);

opacity:0;

pointer-events:none;

transition:.35s;

z-index:19999;

}

.menu-overlay.active{

opacity:1;

pointer-events:auto;

}

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

.nav-icons svg{

width:24px;
height:24px;

color:#dfe4ea;

display:block;

cursor:pointer;

transition:
opacity .25s ease,
transform .25s ease;

}

.nav-icons svg:hover{

opacity:.75;

transform:scale(1.08);

}


/* FOOTER */

.luxury-footer{
background:#030303;
border-top:1px solid #151515;
padding:90px 28px;
color:#d7dde3;
}

.luxury-footer .footer-section{
display:flex;
flex-direction:column;
gap:22px;
margin-bottom:45px;
}

.luxury-footer .footer-section h3{
font-size:13px;
letter-spacing:2px;
color:#8b929b;
font-family:Arial,sans-serif;
margin-bottom:18px;
}

.luxury-footer .footer-section a{
color:#e2e7ec;
text-decoration:none;
font-size:21px;
font-family:Georgia,serif;
font-weight:300;
}

.luxury-footer .footer-divider{
height:1px;
background:#1b1b1b;
margin:38px 0;
}

.luxury-footer .footer-socials{
display:flex;
gap:28px;
margin-top:40px;
margin-bottom:60px;
}

.luxury-footer .footer-socials a{
display:flex;
align-items:center;
justify-content:center;
}

.luxury-footer .footer-bottom h2{
font-size:56px;
letter-spacing:2px;
font-family:'Cinzel', serif;
font-weight:500;
margin-bottom:28px;
line-height:1;
color:#f5f7fa;
text-shadow:
0 0 1px rgba(255,255,255,0.35),
0 0 12px rgba(255,255,255,0.06);
white-space:nowrap;
}

.luxury-footer .footer-bottom p{
color:#8b929b;
font-size:14px;
line-height:1.8;
font-family:Arial,sans-serif;
}

/* MOBILE */

@media(max-width:768px){

header{
padding:18px 14px;
}

.brand{
font-size:22px;
letter-spacing:5px;

max-width:none;

overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}

.nav-icons{
gap:15px;
flex-shrink:0;
}

.nav-icons svg{

width:24px;
height:24px;

}

.luxury-footer .footer-bottom h2{
font-size:42px !important;
letter-spacing:1px;
white-space:nowrap;
}

}

/* PRODUCT SLIDER */

.product-gallery{
width:100%;
overflow:hidden;
margin-bottom:42px;
}

.product-slider{

display:flex;

overflow-x:auto;

scroll-snap-type:x mandatory;

scroll-behavior:smooth;

-ms-overflow-style:none;

scrollbar-width:none;

}

.product-slider::-webkit-scrollbar{
display:none;
}

.product-slider img{
width:100%;
flex-shrink:0;

scroll-snap-align:start;

border-radius:24px;

object-fit:cover;
display:block;
}

/* DOTS */

.slider-dots{
display:flex;
justify-content:center;
gap:10px;
margin-top:18px;
}

.dot{
width:10px;
height:10px;
border-radius:50%;
background:#4a4f55;
}

.dot.active{
background:#f5f7fa;
}

.price,
.product-price,
.checkout-price,
.sticky-price{

font-family:'Bodoni Moda', serif !important;

font-variant-numeric:lining-nums;

}

/* ================= SEARCH ================= */

.search-overlay{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(5,5,5,.98);

display:none;

justify-content:center;

align-items:flex-start;

padding-top:120px;

z-index:10000;

overflow-y:auto;
overscroll-behavior:contain;

}

.search-overlay.active{

display:flex;

}

.search-container{

width:90%;

max-width:700px;

}

#searchInput{

width:100%;

padding:18px 24px;

background:#111;

border:1px solid #333;

border-radius:50px;

color:#fff;

font-size:20px;

outline:none;

font-family:'Cinzel', serif;

}

#searchResults{

margin-top:25px;

display:flex;

flex-direction:column;

gap:15px;

}

.search-item{
display:flex;
align-items:center;
gap:18px;
padding:14px;
background:#111;
border-radius:18px;
text-decoration:none;
transition:.25s;
}

.search-item:hover{
background:#1b1b1b;
}

.search-item img{
width:80px;
height:80px;
border-radius:12px;
object-fit:cover;
}

.search-info{
display:flex;
flex-direction:column;
}

.search-info h3{
color:#fff;
font-size:18px;
font-family:'Cinzel',serif;
font-weight:500;
margin-bottom:6px;
}

.search-info p{
color:#bcbcbc;
font-size:15px;
}

.no-results{

text-align:center;

padding:40px 20px;

color:#cfcfcf;

}

.no-results h3{

font-family:'Cinzel', serif;

font-size:26px;

font-weight:500;

margin-bottom:10px;

color:#ffffff;

}

.no-results p{

font-size:16px;

color:#9a9a9a;

}

/* SEARCH CLOSE BUTTON */

.close-search-btn{

position:absolute;

top:35px;

right:35px;

background:none;

border:none;

color:#ffffff;

font-size:36px;

font-weight:300;

cursor:pointer;

transition:.25s;

font-family:Arial,sans-serif;

z-index:10001;

}

.close-search-btn:hover{

opacity:.6;

transform:rotate(90deg);

}

.cart-link{

position:relative;

display:inline-flex;

align-items:center;

justify-content:center;

}

#cart-count{

position:absolute;

left:50%;

top:46%;

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

width:10px;

text-align:center;

font-size:7px;

font-weight:700;

font-family:Arial,sans-serif;

color:#f5f5f5;

line-height:1;

pointer-events:none;

user-select:none;

}

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

.mini-cart{

position:fixed;

top:25px;

right:-430px;

width:390px;

background:#0a0a0a;

border:1px solid #222;

border-radius:18px;

padding:26px;

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

z-index:20000;

transition:right .45s ease;

}

.mini-cart.active{

right:25px;

}

.mini-cart h3{

font-family:'Cinzel',serif;

font-size:24px;

font-weight:500;

color:#ffffff;

margin-bottom:28px;

}

.mini-cart-product{

display:flex;

align-items:center;

gap:18px;

margin-bottom:28px;

}

.mini-cart-product img{

width:90px;

height:90px;

border-radius:12px;

object-fit:cover;

}

.mini-cart-product h4{

font-family:'Cinzel',serif;

font-size:18px;

font-weight:500;

color:#ffffff;

margin-bottom:8px;

}

.mini-cart-product p{

font-size:17px;

color:#d5d5d5;

}

.mini-cart-buttons{

display:flex;

gap:12px;

}

.mini-cart-buttons a{

flex:1;

padding:15px;

border:1px solid #444;

text-align:center;

text-decoration:none;

color:#ffffff;

font-size:13px;

letter-spacing:2px;

transition:.25s;

}

.mini-cart-buttons a:hover{

background:#ffffff;

color:#000000;

}

.mini-cart-close{

position:absolute;

top:18px;

right:18px;

background:none;

border:none;

color:#ffffff;

font-size:28px;

cursor:pointer;

transition:.25s;

}

.mini-cart-close:hover{

transform:rotate(90deg);

opacity:.6;

}

@media(max-width:768px){

.mini-cart{

width:92%;

right:-100%;

top:18px;

padding:22px;

}

.mini-cart.active{

right:4%;

}

}

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

@media (max-width:768px){

.mobile-menu{

width:100%;

right:-100%;

padding:34px 30px;

}

.mobile-menu.active{

right:0;

}

.menu-header{

margin-bottom:42px;

}

.menu-header span{

font-size:22px;

letter-spacing:3px;

}

.menu-close{

font-size:38px;

line-height:1;

}

.menu-links{

gap:18px;

}

.menu-links a{

font-size:17px;

letter-spacing:1px;

}

.menu-divider{

margin:36px 0;

}

.menu-footer p{

font-size:16px;

margin-bottom:18px;

}

.menu-social{

gap:20px;

}

.social-icon{

width:24px;

height:24px;

}

}

/* ================= MOBILE MINI CART ================= */

@media (max-width:768px){

.mini-cart{

width:92%;
max-width:380px;

left:50%;
top:18px;

padding:20px;

border-radius:16px;

transform:translate(-50%,-30px);
opacity:0;
visibility:hidden;
pointer-events:none;

transition:
transform .35s ease,
opacity .35s ease;

}

.mini-cart.active{

transform:translate(-50%,0);

opacity:1;
visibility:visible;
pointer-events:auto;

}

.mini-cart-product{

gap:14px;

}

.mini-cart-product img{

width:72px;
height:72px;

}

.mini-cart h3{

font-size:20px;
margin-bottom:18px;

}

.mini-cart-product h4{

font-size:16px;

}

.mini-cart-product p{

font-size:15px;

}

.mini-cart-buttons{

flex-direction:column;
gap:10px;

}

.mini-cart-buttons a{

padding:14px;
font-size:12px;

}

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

.hero{

height:100vh;

}

.hero picture,
.hero img{

width:100%;
height:100%;
object-fit:cover;
display:block;

}

.hero-content{

position:absolute;

top:90px;

left:26px;

right:26px;

transform:none;

max-width:280px;

z-index:5;

}

.hero-small{

font-family:'Cinzel',serif;

font-size:11px;

letter-spacing:4px;

margin-bottom:18px;

color:#d7dbe0;

opacity:0;

transform:translateY(30px);

animation:heroFade .9s ease forwards;

animation-delay:.2s;

}

.hero-title{

font-family:'Cinzel',serif;

font-size:56px;

line-height:.9;

font-weight:400;

letter-spacing:1px;

margin:0;

color:#ffffff;

opacity:0;

transform:translateY(30px);

animation:heroFade .9s ease forwards;

animation-delay:.5s;

}

.hero-sub{

margin-top:14px;

font-size:16px;

letter-spacing:4px;

font-family:'Montserrat',sans-serif;

color:#d8d8d8;

opacity:0;

transform:translateY(30px);

animation:heroFade .9s ease forwards;

animation-delay:.9s;

}

.hero-description{

margin-top:18px;

font-size:14px;

line-height:1.8;

max-width:220px;

color:#bfc5cb;

opacity:0;

transform:translateY(30px);

animation:heroFade .9s ease forwards;

animation-delay:1.3s;

}

.hero-button{

display:inline-block;

margin-top:26px;

padding:14px 26px;

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

border-radius:999px;

text-decoration:none;

color:#ffffff;

font-size:11px;

letter-spacing:2px;

text-transform:uppercase;

transition:.35s;

opacity:0;

transform:translateY(30px);

animation:heroFade .9s ease forwards;

animation-delay:1.7s;

}

.hero-button:hover{

background:#ffffff;

color:#000000;

}

@keyframes heroFade{

0%{

opacity:0;

transform:translateY(30px);

filter:blur(8px);

}

100%{

opacity:1;

transform:translateY(0);

filter:blur(0);

}

}

}

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


@media(min-width:769px){
.hero{

position:relative;

height:100vh;

overflow:hidden;

}

.hero picture,
.hero img{

width:100%;

height:100%;

display:block;

object-fit:cover;

}

.hero-content{

position:absolute;

top:50%;

left:80px;

transform:translateY(-50%);

z-index:5;

max-width:650px;

color:white;

}

.hero-small{

font-family:'Cinzel',serif;

letter-spacing:8px;

font-size:16px;

margin-bottom:30px;

color:#cfd4da;

}

.hero-title{

font-family:'Cinzel',serif;

font-size:110px;

line-height:.9;

font-weight:400;

margin:0;

}

.hero-sub{

margin-top:25px;

font-size:28px;

letter-spacing:10px;

font-family:'Montserrat',sans-serif;

}

.hero-description{

margin-top:40px;

font-size:20px;

line-height:1.8;

max-width:430px;

color:#c5c5c5;

}

.hero-button{

display:inline-block;

margin-top:45px;

padding:18px 42px;

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

border-radius:999px;

text-decoration:none;

color:white;

letter-spacing:3px;

text-transform:uppercase;

transition:.3s;

}

.hero-button:hover{

background:white;

color:black;

}
}
/* ================= HERO ANIMATION ================= */

.reveal{

opacity:0;

transform:translateY(45px);

filter:blur(12px);

transition:

opacity 1.2s ease,

transform 1.2s ease,

filter 1.2s ease;

}

.reveal.show{

opacity:1;

transform:translateY(0);

filter:blur(0);

}

.delay1{

transition-delay:.4s;

}

.delay2{

transition-delay:.8s;

}

.delay3{

transition-delay:1.2s;

}