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

body{
  font-family:'Inter', sans-serif;
  background:#fff;
  color:#222;
}

a{
    text-decoration:none;
    color:#000;
}

/* CONTAINER */
.container{
  width:85%;
  margin:auto;
}


/* =========================
   HEADER BASE
========================= */
.header{
  background:rgba(252,252,252,0.75);
  backdrop-filter:blur(12px);

  height:78px;
  display:flex;
  align-items:center;

  box-shadow:
    0 6px 20px rgba(0,0,0,0.05),
    inset 0 1px 0 rgba(255,255,255,0.6);

  position:sticky;
  top:0;
  z-index:1000;
}

/* =========================
   CONTAINER
========================= */
.nav-wrap{
  max-width:1320px;
  width:100%;
  margin:auto;
  padding:0 20px;

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


/* =========================
   LOGO CONTAINER
========================= */
.logo{
  display:flex;
  align-items:center;
  flex-shrink:0;
}

/* IMAGE */
.logo img{
  height:75px;      /* desktop size */
  width:auto;
  object-fit:contain;

  transition:all 0.3s ease;
}

/* =========================
   NAV
========================= */
.nav{
  display:flex;
  gap:26px;
}

.nav a{
  text-decoration:none;
  color:#222;
  font-size:14px;
  font-weight:500;

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

  position:relative;
}

/* HOVER UNDERLINE */
.nav a::after{
  content:'';
  position:absolute;
  bottom:-4px;
  left:0;
  width:0%;
  height:1px;
  background:#8a8f6a;
  transition:0.3s;
}

.nav a:hover::after{
  width:100%;
}

/* ARROW */
.arrow{
  width:5px;
  height:5px;
  border-right:1.5px solid #222;
  border-bottom:1.5px solid #222;
  transform:rotate(45deg);
}

/* =========================
   ACTIONS
========================= */
.actions{
  display:flex;
  align-items:center;
  gap:20px;
}

/* ICONS */
.icon{
  width:30px;
  height:30px;
  stroke:#222;
  fill:none;
  cursor:pointer;
  transition:0.3s;
}

.icon:hover{
  stroke:#8a8f6a;
}

.search-icon{
  position:relative;
}

/* CART */
.cart{
  position:relative;
}

.badge-header{
  position:absolute;
  top:-6px;
  right:-8px;
  background:#8a8f6a;
  color:#fff;
  font-size:10px;
  padding:2px 6px;
  border-radius:50%;
}

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

.header-account{

    position:relative;

}

.header-account-btn{

    display:flex;

    align-items:center;

    gap:12px;

    background:none;

    border:none;

    cursor:pointer;

}

.header-avatar{

    width:46px;

    height:46px;

    border-radius:50%;

    background:linear-gradient(135deg,#b8860b,#d4af37);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    letter-spacing:1px;

    font-size:15px;

}

.header-user-info{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

}

.header-user-name{

    font-size:14px;

    font-weight:600;

    color:#222;

}

.header-user-info small{

    color:#888;

    font-size:12px;

}

.header-dropdown{

    position:absolute;

    top:60px;

    right:0;

    width:260px;

    background:#fff;

    border-radius:18px;

    border:1px solid #eee;

    box-shadow:0 20px 50px rgba(0,0,0,.08);

    opacity:0;

    visibility:hidden;

    transform:translateY(10px);

    transition:.3s;

    padding:12px;

    z-index:9999;

}

.header-account:hover .header-dropdown{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.header-dropdown a{

    display:flex;

    align-items:center;

    gap:12px;

    padding:12px;

    border-radius:12px;

    color:#444;

    text-decoration:none;

    transition:.3s;

}

.header-dropdown a:hover{

    background:#faf7ef;

    color:#b8860b;

}

.header-dropdown hr{

    margin:8px 0;

}

/*====================================
ACCOUNT DROPDOWN HEADER
====================================*/

.header-dropdown-user{

    display:flex;

    align-items:center;

    gap:15px;

    padding:20px;

    margin:-12px -12px 15px;

    background:linear-gradient(
        135deg,
        #b8860b,
        #d4af37
    );

    border-radius:18px 18px 0 0;

    color:#fff;

}

.header-dropdown-avatar{

    width:58px;

    height:58px;

    border-radius:50%;

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

    backdrop-filter:blur(10px);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    font-weight:700;

    letter-spacing:1px;

    flex-shrink:0;

}

.header-dropdown-content{

    flex:1;

}

.header-dropdown-name{

    font-size:17px;

    font-weight:700;

    margin-bottom:3px;

    line-height:1.2;

}

.header-dropdown-subtitle{

    font-size:13px;

    opacity:.9;

    letter-spacing:.5px;

    text-transform:uppercase;

}

/*Nav Bar Menu*/
/* NAV ITEM */
.nav-item{
  position:relative;
}

/* DROPDOWN BASE */
.dropdown{
  position:absolute;
  top:120%;
  left:0;
  min-width:200px;
  padding:18px 0;
  background:rgba(255,255,255);
  backdrop-filter:blur(20px);
  border-radius:12px;
  box-shadow:0 15px 40px rgba(0,0,0,0.08);
  opacity:0;
  visibility:hidden;
  transform:translateY(10px) scale(0.98);
  transition:all 0.35s cubic-bezier(.22,.61,.36,1);
  z-index:999;
}

/* SHOW ON HOVER */
.nav-item:hover .dropdown{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
}

.nav-item .arrow{
  display:inline-block;
  margin-left:5px;
  transition:0.3s;
}

.nav-item:hover .arrow{
  transform:rotate(180deg);
}
.nav a{
  padding:10px 14px;
}

/* LINKS */
.dropdown a{
  display:block;
  padding:10px 22px;
  font-size:14px;
  color:#333;
  text-decoration:none;
  transition:all 0.3s ease;
}

.dropdown{
  border:1px solid rgba(0,0,0,0.05);
  transition-delay:0.05s;
}

/* HOVER EFFECT */
.dropdown a:hover{
  background:rgba(0,0,0,0.04);
  padding-left:28px;
}

/* FIRST ITEM (HIGHLIGHT) */
.dropdown a:first-child{
  font-weight:600;
}

/* =========================
   HAMBURGER
========================= */
/* HAMBURGER BASE */
.menu-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
  z-index:1001;
}

.menu-toggle span{
  width:22px;
  height:2px;
  background:#222;
  display:block;
  transition:all 0.3s cubic-bezier(.22,.61,.36,1);
}

/* ACTIVE (TO X) */
.menu-toggle.active span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2){
  opacity:0;
}

.menu-toggle.active span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

.menu-toggle span{
  width:22px;
  height:2px;
  background:#222;
  display:block;
  transition:0.3s;
}


/* HERO */
.hero{
  background:#fff;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}
.hero{
    opacity:0;
    transition:.5s ease;
}

.hero.loaded{
    opacity:1;
}

/* SLIDER */
.hero-slider{
  width:100%;
  position:relative;
  cursor:grab;
}


/* LAYOUT */
.hero-inner{
  position:relative;
  width:100%;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

.heroSwiper{
    width:100%;
    height:100vh;
}

.heroSwiper .swiper-slide{
    height:100vh;
    overflow:hidden;
}

.heroSwiper .swiper-slide,
.product,
.model,
.content-inner{

    backface-visibility:hidden;

    transform-style:preserve-3d;
}

.heroSwiper .swiper-wrapper{
    width:100%;
    height:100%;
}

.heroSwiper .swiper-slide{
    overflow:hidden;
}

.heroSwiper .swiper-pagination{
    bottom:30px !important;
}

.heroSwiper .swiper-pagination-bullet{

    width:30px;
    height:4px;

    border-radius:0;

    background:#fff;

    opacity:.4;
}

.heroSwiper .swiper-pagination-bullet-active{

    opacity:1;
}
.heroSwiper .swiper-button-prev,
.heroSwiper .swiper-button-next{

    width:60px;
    height:60px;

    border-radius:50%;

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

    backdrop-filter:blur(12px);

    transition:.3s;

    color:#fff;
    
    z-index:50;

    opacity:.6;
}

.heroSwiper .swiper-button-prev:hover,
.heroSwiper .swiper-button-next:hover{

    background:rgba(255,255,255,.25);
}

.heroSwiper .swiper:hover .heroSwiper .swiper-button-prev,
.heroSwiper .swiper:hover .heroSwiper .swiper-button-next{

    opacity:1;
}

.heroSwiper .swiper-button-prev:after,
.heroSwiper .swiper-button-next:after{

    font-size:18px;
}

.heroSwiper .swiper-fade .heroSwiper .swiper-slide{
    pointer-events:none;
}

.heroSwiper .swiper-fade .heroSwiper .swiper-slide-active{
    pointer-events:auto;
}

/* LEFT PRODUCT */
.left{
  position:absolute;
  left:0;
  bottom:0;
  width:auto;
}

.product{
    width:clamp(180px,30vw,550px);
    height:auto;
    object-fit:contain;
}


/* CENTER TEXT */

.subtitle{
  color:#777;
  margin-bottom:10px;
}


/* RIGHT MODEL */
.right{
  position:absolute;
  right:0;
  bottom:0;
  width:auto;
}

.model{
    width:clamp(220px,35vw,750px);
    height:auto;
    object-fit:contain;
}

.slide-bg{
    position:absolute;
    inset:0;
    z-index:0;
}

.slide-bg img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center
}

.overlay{
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
}

.slide-bg-color{
    position:absolute;
    inset:0;
    z-index:0;
}

.content-block{
    width:min(700px,90%);
    z-index:10;
    position:absolute;
}

.content-inner{
    opacity:0;
}

.heroSwiper .swiper-slide-active .content-inner{

    animation:
    contentReveal 1s ease forwards;

    animation-delay:.4s;
}

@keyframes contentReveal{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}

.heroSwiper .swiper-slide-active .product{

    animation:
    productReveal 1.4s ease forwards;
}

@keyframes productReveal{

    from{
        opacity:0;
        transform:translateX(-80px);
    }

    to{
        opacity:1;
        transform:translateX(0);
    }

}

.heroSwiper .swiper-slide-active .model{

    animation:
    modelReveal 1.4s ease forwards;
}

@keyframes modelReveal{

    from{
        opacity:0;
        transform:translateX(80px);
    }

    to{
        opacity:1;
        transform:translateX(0);
    }

}



.center{
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}

.center-left{
    left:8%;
    top:50%;
    transform:translateY(-50%);
}

.center-right{
    right:8%;
    top:50%;
    transform:translateY(-50%);
}

.top-left{
    left:8%;
    top:10%;
}

.top-center{
    left:50%;
    top:10%;
    transform:translateX(-50%);
}

.top-right{
    right:8%;
    top:10%;
}

.bottom-left{
    left:8%;
    bottom:10%;
}

.bottom-right{
    right:8%;
    bottom:10%;
}

.bottom-center{
    left:50%;
    bottom:10%;
    transform:translateX(-50%);
}

.left,
.right{
    z-index:5;
}

.content-block{
    z-index:10;
}

.hero-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:180px;
    padding:14px 32px;
    border-radius:50px;
    font-weight:600;
    text-decoration:none;
    transition:.3s;
}

.hero-btn:hover{
  transform:translateY(-2px);
}

.text-left{
    text-align:left;
}

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

.text-right{
    text-align:right;
}

.hero-badge{
    display:inline-block;
    padding:6px 14px;
    background:#000;
    color:#fff;
    font-size:12px;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:15px;
}

.content-block h1{
    font-size:72px;
    line-height:1.1;
    font-weight:700;
    margin-bottom:20px;
}

.description{
    margin:20px 0;
    font-size:16px;
    line-height:1.8;
    max-width:650px;
}

.mobile-bg{
    display:none;
}

.layout-classic{
    display:flex;
    align-items:center;
    justify-content:center;
}

/* CSS FOR SLIDER SPLIT LAYOUT*/
.layout-split{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:60px;

    padding:0 8%;
}

.layout-split .left{

    position:relative;

    left:auto;

    bottom:auto;

    flex:1;

    text-align:center;
}

.layout-split .content-block{

    position:relative;

    left:auto;

    top:auto;

    right:auto;

    bottom:auto;

    transform:none;

    flex:1;

    width:auto;
}

.layout-split .right{

    display:none;
}

/* MODEL LEFT */

.layout-model_left .left{
    right:0;
    left:auto;
}

.layout-model_left .right{
    left:0;
    right:auto;
}

/* CENTERED */

.layout-centered .left,
.layout-centered .right{
    display:none;
}

.layout-centered .content-block{
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    text-align:center;
}


/* PRODUCT FOCUS */

.layout-product_focus .right{
    display:none;
}

.layout-product_focus .left{
    left:50%;
    bottom:15%;
    transform:translateX(-50%);
    text-align:center;
}

.layout-product_focus .product{
    width:clamp(250px,35vw,650px);
}

.layout-product_focus .content-block{
    left:50%;
    top:65%;
    transform:translateX(-50%);
    text-align:center;
}

/* FULLSCREEN */

.layout-fullscreen .left,
.layout-fullscreen .right{
    display:none;
}

.layout-fullscreen .content-block{
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    text-align:center;
}

/* PRODUCT CARD */
.product-card{
  position:absolute;
  bottom:120px;
  left:20px;
  background:#fff;
  padding:15px;
  border-radius:15px;
  display:flex;
  gap:10px;
  align-items:center;
  box-shadow:0 10px 30px rgba(0,0,0,0.1);
}

.product-card img{
  width:60px;
}

.product-card h4{
  font-size:14px;
}

.product-card span{
  color:#8a8f6a;
}

/* SIDE PRODUCTS */
.side-products{
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:15px;
}

.side-products img{
  width:70px;
  padding:10px;
  background:#fff;
  border-radius:12px;
}

/* BACKGROUND TEXT */
.bg-text{
  position:absolute;
  font-size:200px;
  font-weight:700;
  color:#000;
  opacity:0.04;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  letter-spacing:10px;

  /* smooth rendering */
  will-change: transform, opacity;
}



/* SECTION */
#smoke-canvas{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:0;
}

.perfume-style{
  position:relative;
  overflow:hidden;
}

/* keep content above smoke */
.perfume-style *{
  position:relative;
  z-index:2;
}

.perfume-style{
  /*max-width:1320px;*/
  /*margin:auto;*/
  padding:100px 80px;
  text-align:center;
  background:#fcfcfc;
}

.perfume-style::before{
  content:'';
  position:absolute;
  inset:0;
     background: radial-gradient(circle at 50% 40%, rgb(255 255 255 / 49%), #00000008 60%);
  pointer-events:none;
}

/* TITLE 
.perfume-style h2{
  font-family:'Playfair Display', serif;
  font-size:44px;
  margin-bottom:60px;
  letter-spacing:0.8px;
}*/

/* GRID */
.style-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:24px;
}

/* CARD */
.card{
  position:relative;
  cursor:pointer;
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
}

/* GLASS BOX */
.img-box{
  position:relative;
  height:190px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(145deg, #f3f3f0, #e7e7e3);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    0 10px 30px rgba(0,0,0,0.06);
  overflow:hidden;
  transition: all 0.4s ease;
}

/* IMAGE */
.img-box img{
  max-height:200px;
  transition: transform 0.4s ease;
  filter: drop-shadow(0 10px 15px rgba(0,0,0,0.08));
}

/* LABEL */
.card h3{
  display:block;
  padding:20px 0px 0px 0px;
  font-size:15px;
  letter-spacing:0.4px;
  color:#1c1c1c;
  font-weight:700;
}

.card span{
  display:block;
  padding:5px;
  font-size:10px;
  letter-spacing:0.4px;
  color:#1c1c1c;
}

/* HOVER LIFT */
.card:hover{
  transform: translateY(-10px) scale(1.02);
}

.card:hover .img-box{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    0 25px 50px rgba(0,0,0,0.08);
}

.card:hover img{
  transform: scale(1.08);
}

/* LIGHT FOLLOW EFFECT */
.img-box::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:22px;
  background:radial-gradient(circle at var(--x) var(--y), rgb(240 240 240), #00000012,transparent 40%);
  opacity:0;
  transition:0.3s;
}

.card:hover .img-box::before{
  opacity:1;
}

/* MIST EFFECT */
.img-box::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:22px;
  background: radial-gradient(circle, rgba(255,255,255,0.15), transparent 70%);
  backdrop-filter: blur(8px);
  opacity:0;
  transition:0.4s;
}

.card:hover .img-box::after{
  opacity:1;
}


/* SECTION */
.na-section{
  max-width:1320px;
  margin:auto;
  padding:100px 20px;
}


.na-head{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    margin-bottom:50px;
}

.na-title{
    text-align:center;
    font-family:'Playfair Display', serif;
    font-size:42px;
    margin-bottom:14px;
    line-height:1.1;
}

/* LINE */
.na-line{
    width:140px;
    height:2px;
    background:linear-gradient(
        90deg,
        transparent,
        #111,
        transparent
    );
    position:relative;
    overflow:hidden;
    margin-bottom:18px;
}

/* GLOW ANIMATION */
.na-line::after{
    content:'';
    position:absolute;
    top:0;
    left:-30%;
    width:30%;
    height:100%;
    background:rgba(255,255,255,0.9);
    filter:blur(4px);
    animation:naLineGlow 2.5s linear infinite;
}

@keyframes naLineGlow{

    0%{
        left:-30%;
    }

    100%{
        left:130%;
    }
}

/* VIEW ALL */
.na-view-all{
    font-size:12px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:2px;
    color:#111;
    text-decoration:none;
    transition:0.3s;
}

.na-view-all:hover{
    color:#ac0071;
}

/* GRID */
.na-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
}

/* CARD */
.na-card{
  position:relative;
  background:#f3f3f0;
  border-radius:18px;
 padding: 0px 0px 20px 0px;
  transition:all 0.3s ease;
}

/* IMAGE WRAP */
.na-img-wrap{
  position:relative;
  overflow:hidden;
  border-radius:14px;
}

/* IMAGE */
.na-img{
  width:100%;
  transition:transform 0.5s ease;
}

/* ZOOM */
.na-card:hover .na-img{
  transform:scale(1.08);
}

/* NAME */
.na-name{
  font-size:17px;
  font-weight:500;
  letter-spacing:0.4px;
  margin-bottom:4px;
}

/* TYPE */
.na-type{
  font-size:13px;
  color:#6b6b6b;
  letter-spacing:0.5px;
  margin-bottom:4px;
}

/* NOTES */
.na-notes{
  font-size:12px;
  color:#9a9a9a;
  margin-bottom:8px;
}

/* PRICE */
.na-price{
  font-size:15px;
  font-weight:600;
  color:green;
}

.na-price span{
  text-decoration:line-through;
  color:#c20000;
  margin-left:6px;
  font-weight:400;
}

.na-variant-tags{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-top:14px;
    flex-wrap:wrap;
}

.na-variant-tag{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:7px 14px;
    border-radius:40px;
    background:#5a5a5a;
    color:#fff;
    font-size:11px;
    font-weight:600;
    letter-spacing:0.5px;
}


.na-more-tag{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:7px 14px;
    border-radius:40px;
    background:#f3f3f3;
    color:#111;
    font-size:11px;
    font-weight:600;
    transition:0.3s;
    cursor:pointer;
}

.na-more-tag a{
    
    color:#9000b2;

}

.na-more-tag:hover{
    background:#111;
    color:#fff;
}

/* OVERLAY */
.na-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  background:rgba(255,255,255,0.55);
  backdrop-filter:blur(8px);
  opacity:0;
  transition:0.35s ease;
  pointer-events:none;
}

/* SHOW ON HOVER */
.na-card:hover .na-overlay{
  opacity:1;
}

/* ENABLE CLICK */
.na-overlay button{
  pointer-events:auto;
}

/* ICON BUTTONS */
.na-icon{
  width:42px;
  height:42px;
  border-radius:50%;
  border:none;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
 font-size:16px;
  cursor:pointer;
  transition:all 0.3s ease;
}

.na-description{
    text-align: center;
    padding: 20px;
    font-size: 12px;
}

/* HOVER ICON EFFECT */
.na-icon:hover{
  background:#8a8f6a;
  color:#fff;
  transform:scale(1.1);
}

/* MAIN BUTTON */
.na-btn{
  padding:12px 18px;
  background:#8a8f6a;
  color:#fff;
  border:none;
  border-radius:10px;
  font-size:14px;
  cursor:pointer;
  transition:all 0.3s ease;
}

.na-btn:hover{
  background:#6f7456;
  transform:translateY(-2px);
}

/* INITIAL STATE */
.na-overlay .na-icon,
.na-overlay .na-btn{
  transform:translateY(10px);
  opacity:0;
  transition:0.3s;
}

/* HOVER ANIMATION */
.na-card:hover .na-icon,
.na-card:hover .na-btn{
  transform:translateY(0);
  opacity:1;
}

/* STAGGER DELAY */
.na-quick{ transition-delay:0.05s; }
.na-btn{ transition-delay:0.1s; }
.na-wish{ transition-delay:0.15s; }

/* BADGES */
.na-badge{
  position:absolute;
  top:12px;
  left:12px;
  padding:4px 10px;
  font-size:12px;
  border-radius:6px;
  color:#fff;
  z-index:2;
}

.na-new{
  background:#e53935;
}

.na-hot{
  background:#ff9800;
}

/* DISCOUNT */
.na-discount{
  position:absolute;
  top:12px;
  right:5px;
  background:#2e7d32;
  color:#fff;
  font-size:12px;
  padding:4px 8px;
  border-radius:6px;
  z-index:2;
}

/* CONTENT */
.na-content{
  margin-top:15px;
  text-align:center;
}

.na-content h3{
  font-size:16px;
  margin-bottom:6px;
}

.na-price{
  font-weight:600;
}

.na-price span{
  text-decoration:line-through;
  color:#c20000;
  margin-left:6px;
}

/* =========================================
   NEW ARRIVAL SWIPER
========================================= */

.na-swiper{
    position:relative;
    width:100%;
    overflow:hidden;
    padding:10px 5px 20px;
}

/* LET SWIPER HANDLE WIDTH */
.na-swiper .swiper-slide{
    height:auto;
    display:flex;
}

/* =========================================
   NAVIGATION
========================================= */

.na-prev,
.na-next{

    position:absolute;

    top:45%;

    transform:translateY(-50%);

    width:48px;
    height:48px;

    border-radius:50%;

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

    cursor:pointer;

    z-index:20;

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

    backdrop-filter:blur(12px);

    box-shadow:0 8px 25px rgba(0,0,0,.12);

    transition:.35s ease;

    user-select:none;

    font-size:22px;

    color:#222;
}

/* POSITION */

.na-prev{
    left:10px;
}

.na-next{
    right:10px;
}

/* HOVER */

.na-prev:hover,
.na-next:hover{

    background:#8a8f6a;

    color:#fff;

    transform:translateY(-50%) scale(1.08);
}

/* DISABLED */

.na-prev.swiper-button-disabled,
.na-next.swiper-button-disabled{

    opacity:.35;

    pointer-events:none;
}



/* =========================
   SECTION BASE
========================= */
.ps-section{
  position:relative;
  padding:140px 20px;
  background:#f5f5f2;
  overflow:hidden;
}

/* PARTICLES */
.ps-particles{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:0;
}

/* =========================
   CONTAINER
========================= */
.ps-container{
  max-width:1320px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:40px;
  align-items:center;
  position:relative;
  z-index:2;
}

/* =========================
   PARALLAX
========================= */
.ps-parallax{
  will-change:transform;
  transition:transform 0.2s ease-out;
}

/* =========================
   LEFT (3D BOTTLE)
========================= */
.ps-left{
  position:relative;
}

.ps-bottle{
  perspective:1000px;
}

.ps-bottle img{
  width:100%;
  display:block;
  border-radius:20px;
  transition:transform 0.4s ease;
  will-change:transform;
}

/* =========================
   CONTENT
========================= */
.ps-content{
  text-align:left;
}

/* HEADING */
.ps-content h2{
  font-family:'Playfair Display', serif;
  font-size:48px;
  line-height:1.2;
  letter-spacing:0.5px;
}

.ps-content h2 span{
  color:#8a8f6a;
}

/* DESCRIPTION */
.ps-desc{
  margin:20px 0;
  color:#666;
  line-height:1.6;
  max-width:420px;
}

/* =========================
   NOTES INTERACTION
========================= */
.ps-notes{
  display:flex;
  gap:10px;
  margin-bottom:10px;
}

.ps-notes span{
  padding:6px 14px;
  border-radius:20px;
  background:#eaeae6;
  cursor:pointer;
  font-size:13px;
  transition:all 0.3s ease;
}

.ps-notes span:hover{
  background:#8a8f6a;
  color:#fff;
  transform:translateY(-2px);
}

/* NOTE DISPLAY */
.ps-note-display{
  font-size:13px;
  color:#888;
  margin-bottom:20px;
  transition:0.3s;
}

/* =========================
   BUTTON
========================= */
.ps-btn{
  padding:14px 26px;
  background:#8a8f6a;
  color:#fff;
  border:none;
  border-radius:10px;
  cursor:pointer;
  font-size:14px;
  transition:all 0.3s ease;
}

.ps-btn:hover{
  background:#6f7456;
  transform:translateY(-2px);
}

/* =========================
   RIGHT FLOATING BOXES
========================= */
.ps-right{
  position:relative;
}

/* LARGE BOX */
.ps-box{
  position:absolute;
  width:220px;
  top:-40px;
  right:0;
  border-radius:20px;
  background:#ececeb;
  padding:20px;

  box-shadow:0 12px 30px rgba(0,0,0,0.06);
  transition:transform 0.4s ease;
}

/* SMALL BOX */
.ps-box.small{
  width:160px;
  bottom:-20px;
  left:0;
  top:auto;
}

/* IMAGE INSIDE BOX */
.ps-box img{
  width:100%;
  display:block;
  border-radius:12px;
}

/* HOVER LIFT */
.ps-box:hover{
  transform:translateY(-6px) scale(1.02);
}

/* =========================
   BACKGROUND TEXT
========================= */
.ps-bg-text{
  position:absolute;
  font-size:260px;
  font-weight:700;
  color:#000;
  opacity:0.04;

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

  pointer-events:none;
  z-index:1;

  /* SOFT GLOW */
  text-shadow:
    0 0 20px rgba(138,143,106,0.08),
    0 0 40px rgba(138,143,106,0.04);

  will-change: opacity, transform;
}



/* SECTION */
.pc-section{
  padding:80px 20px;
  background:#f5f5f2;
}

/* GRID */
.pc-grid{
  max-width:1320px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

/* CARD */
.pc-card{
  position:relative;
  overflow:hidden;
  border-radius:20px;
  cursor:pointer;
}

/* IMAGE */
.pc-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 0.8s ease;
}

/* ZOOM EFFECT */
.pc-card:hover img{
  transform:scale(1.1);
}

/* OVERLAY */
.pc-overlay{
  position:absolute;
  inset:0;

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

  padding:30px;

  background:linear-gradient(
    to top,
    rgba(0,0,0,0.5),
    transparent 60%
  );

  color:#fff;
}

/* TEXT */
.pc-overlay h3{
  font-size:28px;
  letter-spacing:1px;
}

.pc-overlay p{
  font-size:14px;
  margin:8px 0 15px;
}

/* BUTTON */
.pc-overlay button{
  width:140px;
  padding:10px 0;
  border:none;
  border-radius:25px;
  background:#fff;
  color:#000;
  cursor:pointer;
  transition:0.3s;
}

.pc-overlay button:hover{
  background:#8a8f6a;
  color:#fff;
}


/* SECTION */
.lux-section{
  padding:120px 0;
  background:#f5f5f2;
  text-align:center;
}

/* TITLE */
.lux-title{
  font-size:38px;
  font-family:'Playfair Display', serif;
  margin-bottom:60px;
  letter-spacing:0.5px;
}

/* SLIDES */
.lux-swiper .swiper-slide{
  width:260px;

  transform:scale(0.85);
  opacity:0.35;

  transition:all 0.8s cubic-bezier(.22,.61,.36,1);
  filter:blur(3px);
}

/* CARD */
.lux-card{
  position:relative;
  border-radius:20px;
  overflow:hidden;
}

.lux-brand{
    
    color:#8a8f6a;
    font-weight:900;
    font-size:12px;
}

/* IMAGE */
.lux-card img{
  width:100%;
  height:420px;
  object-fit:cover;
  transition:transform 1.6s cubic-bezier(.22,.61,.36,1);
}

/* LIGHT REFLECTION */
.lux-light{
  position:absolute;
  inset:0;
  background:linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.4),
    transparent
  );
  opacity:0;
  transition:0.6s;
}

/* CENTER (FOCUS) */
.lux-swiper .swiper-slide-active{
  transform:scale(1.08);
  opacity:1;
  filter:blur(0);

  box-shadow:0 30px 60px rgba(0,0,0,0.12);
}

/* SIDE NEAR */
.lux-swiper .swiper-slide-prev,
.lux-swiper .swiper-slide-next{
  transform:scale(0.95);
  opacity:0.7;
  filter:blur(1px);
}

/* HOVER LIGHT */
.lux-card:hover .lux-light{
  opacity:1;
}

/* HOVER ZOOM */
.lux-card:hover img{
  transform:scale(1.06);
}


/* BASE */
.pf-footer{
  background:linear-gradient(180deg,#000,#2c342c);
  color:#eaeaea;
  padding:80px 20px 30px;
  font-family:'Inter', sans-serif;
}

/* TOP GRID */
.pf-top{
  max-width:1320px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:40px;
}

/* COLUMN */
.pf-col h4{
  font-size:16px;
  margin-bottom:15px;
  font-family:'Playfair Display', serif;
}

/* LINKS */
.pf-col a{
  display:block;
  color:#bbb;
  font-size:14px;
  margin-bottom:10px;
  text-decoration:none;
  transition:0.3s;
}

.pf-col a:hover{
  color:#fff;
}

/* CENTER */
.pf-center{
  text-align:center;
  margin:60px 0;
}

.pf-logo img{
  height:50px;
  margin-bottom:20px;
}

.pf-desc{
  max-width:600px;
  margin:auto;
  color:#ccc;
  line-height:1.6;
}

/* SOCIAL */
.pf-socials{
  margin-top:20px;
  display:flex;
  justify-content:center;
  gap:12px;
}

.pf-socials span{
  border:1px solid rgba(255,255,255,0.2);
  padding:10px;
  border-radius:8px;
  font-size:12px;
  transition:0.3s;
}

.pf-socials span:hover{
  background:#fff;
  color:#000;
}

.pf-socials a{
  width:40px;
  height:40px;

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

  border:1px solid rgba(255,255,255,0.2);
  border-radius:50%;

  transition:0.3s;
}

.pf-socials img{
  width:18px;
  height:18px;
  opacity:0.9;
}

.pf-socials a:hover{
  background:#fff;
}

.pf-socials a:hover img{
  filter:invert(1);
}

/* DIVIDER */
.pf-footer::after{
  content:'';
  display:block;
  height:1px;
  background:rgba(255,255,255,0.1);
  margin:40px auto;
  max-width:1320px;
}

/* BOTTOM */
.pf-bottom{
  max-width:1320px;
  margin:auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
}

/* MENU */
.pf-menu a{
  margin:0 10px;
  color:#bbb;
  text-decoration:none;
  font-size:14px;
}

.pf-menu a:hover{
  color:#fff;
}

/* SETTINGS */
.pf-settings select{
  background:transparent;
  border:1px solid rgba(255,255,255,0.2);
  color:#fff;
  padding:6px 10px;
  border-radius:6px;
  margin-left:10px;
}

/*Testimonial Slider*/

/* SECTION */
.ts2-section{
  padding:100px 20px;
  background:#fff;
  text-align:center;
}

/* TITLE */
.ts2-title{
  font-size:36px;
  font-family:'Playfair Display', serif;
}

.ts2-sub{
  color:#777;
  margin-bottom:50px;
}

/* CARD */
.ts2-card{
  display:flex;
  background:#ffffff;
  border-radius:16px;
  overflow:hidden;
  text-align:left;
  height:220px;

  /* LUXURY DEPTH */
  border:1px solid rgba(0,0,0,0.05);
  box-shadow:0 10px 30px rgba(0,0,0,0.05);

  transition:0.35s cubic-bezier(.22,.61,.36,1);
}

.ts2-card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 50px rgba(0,0,0,0.08);
}

.ts2-card::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:16px;
  pointer-events:none;

  background:linear-gradient(
    120deg,
    transparent,
    rgba(0,0,0,0.04),
    transparent
  );

  opacity:0;
  transition:0.4s;
}

.ts2-card:hover::after{
  opacity:1;
}

/* IMAGE */
.ts2-img{
  width:40%;
}

.ts2-img img{
  width:100%;
  height:100%;
  object-fit:cover;

  /* subtle luxury tone */
  filter:brightness(0.96) contrast(1.02);
}

/* CONTENT */
.ts2-content{
  padding:20px;
  width:60%;
}

/* STARS */
.ts2-stars{
  color:#f5a623;
  font-size:14px;
  margin-bottom:10px;
}

/* TEXT */
.ts2-content p{
  font-size:14px;
  color:#555; /* softer than black */
  margin-bottom:15px;
}

.ts2-product span{
  font-size:13px;
  color:#888;
}

/* NAME */
.ts2-content h4{
  font-size:15px;
  margin-bottom:15px;
}

.ts2-content h4 span{
  color:#4caf50;
  margin-left:6px;
}

/* PRODUCT */
.ts2-product{
  display:flex;
  align-items:center;
  gap:10px;
  border-top:1px solid #eee;
  padding-top:10px;
}

.ts2-product img{
  width:40px;
}

.ts2-product p{
  margin:0;
  font-size:14px;
}

.ts2-product span{
  font-size:13px;
  color:#777;
}

/* SWIPER */
.ts2-swiper{
  max-width:1400px;
  margin:auto;
}

/* =========================
   FEATURE STRIP (ABOVE FOOTER)
========================= */
.fs-section{
  padding:60px 20px;

  /* BLEND WITH FOOTER */
  background:linear-gradient(
    180deg,
    #2c342c 0%,
    #010201 100%
  );

  color:#ddd;
}

/* CONTAINER */
.fs-container{
  max-width:1320px;
  margin:auto;

  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:30px;
  text-align:center;
}

/* ITEM */
.fs-item{
  position:relative;
  padding:10px 20px;
}

/* OPTIONAL SEPARATOR */
.fs-item:not(:last-child)::after{
  content:'';
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  width:1px;
  height:40px;
  background:rgba(255,255,255,0.08);
}


/* ICON */
.ps-icon{
  width:42px;
  height:42px;
  stroke:#fff;
  stroke-width:1.3;

  margin-bottom:12px;

  transition:0.4s ease;
}

/* HOVER EFFECT */
.fs-item:hover .ps-icon{
  transform:translateY(-4px) scale(1.05);
  stroke:#fff;
  opacity:1;
}

.fs-item{
  opacity:0.8;
  transition:0.3s;
}

.fs-item:hover{
  opacity:1;
}

/* TITLE */
.fs-item h4{
  font-size:16px;
  margin-bottom:8px;
  font-family:'Playfair Display', serif;
}

/* TEXT */
.fs-item p{
  font-size:13px;
  color:#aaa;
}


/*Side Cart*/
/* OVERLAY */
.sc-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.5);
  backdrop-filter:blur(4px);

  opacity:0;
  visibility:hidden;
  transition:0.4s;
  z-index:999;
}

/* CART PANEL */
.sc-cart{
  position:fixed;
  top:0;
  right:0;

  width:380px;
  height:100%;

  background:rgba(255,255,255,0.85);
  backdrop-filter:blur(20px);

  box-shadow:-10px 0 40px rgba(0,0,0,0.15);

  display:flex;
  flex-direction:column;

  transform:translateX(100%);
  z-index:1000;
}

/* HEADER */
.sc-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px;
  border-bottom:1px solid rgba(0,0,0,0.05);
  background:#000000d6;
}

.sc-header h3{
  font-family:'Playfair Display', serif;
  color:#fff;
}

/* CLOSE BUTTON */
.sc-close{
  width:36px;
  height:36px;

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

  border-radius:50%;
  border:1px solid rgba(0,0,0,0.08);

  background:rgba(255,255,255,0.6);
  backdrop-filter:blur(6px);

  font-size:20px;
  line-height:1;
  color:#333;

  cursor:pointer;

  transition:all 0.3s cubic-bezier(.22,.61,.36,1);
}

/* HOVER */
.sc-close:hover{
  background:#000;
  color:#fff;
  transform:rotate(90deg) scale(1.05);
}

/* ACTIVE CLICK */
.sc-close:active{
  transform:scale(0.95);
}

/* BODY */
.sc-body{
  flex:1;
  padding:20px;
  overflow:auto;
  background:#fff;
}


/* =========================
   CART ITEM CARD
========================= */
.sc-item{
  display:flex;
  gap:15px;
  align-items:center;

  padding:14px;
  margin-bottom:16px;

  border-radius:14px;

  background:rgba(255,255,255,0.7);
  backdrop-filter:blur(10px);

  border:1px solid rgba(0,0,0,0.05);

  box-shadow:0 8px 20px rgba(0,0,0,0.05);

  transition:0.3s ease;
}

/* HOVER LIFT */
.sc-item:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 30px rgba(0,0,0,0.08);
}

.sc-item img{
  width:70px;
  height:70px;
  object-fit:cover;

  border-radius:12px;

  background:#f8f8f8;
}

/* INFO */
.sc-info{
  flex:1;
}

.sc-info h4{
  font-size:14px;
  margin-bottom:4px;
  color:#222;
}

.sc-price{
  font-size:13px;
  color:#777;
}
/* QTY */
.sc-qty{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:8px;
}

.sc-qty button{
  width:24px;
  height:24px;

  border-radius:6px;
  border:1px solid #ddd;

  background:#fff;
  cursor:pointer;

  font-size:14px;
}

/* REMOVE */
/* REMOVE BUTTON */
.sc-remove{
  position:absolute;
  top:10px;
  right:10px;

  width:28px;
  height:28px;

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

  border-radius:50%;
  border:none;

 background:rgba(201,74,74,0.08);
  cursor:pointer;

  transition:0.3s;
}

/* ICON */
.sc-remove-icon{
  width:16px;
  height:16px;
  stroke:#c94a4a;   /* muted luxury red */
  stroke-width:1.6;
}

/* HOVER */
.sc-remove:hover{
  background:#c94a4a;
}

.sc-remove:hover .sc-remove-icon{
  stroke:#fff;
}

/* FOOTER */
.sc-footer{
  padding:20px;
  border-top:1px solid rgba(0,0,0,0.05);
  background:#000000d6;
}

.sc-subtotal{
  display:flex;
  justify-content:space-between;
  margin-bottom:15px;
  color:#e6ded5;
}

/* BUTTONS */
.sc-actions{
  display:flex;
  gap:10px;
}

.sc-view{
  flex:1;
  padding:12px;
  border:1px solid #e6ded5;
  background:#e6ded5;
  cursor:pointer;
}

.sc-checkout{
  flex:1;
  padding:12px;
  border:1px solid #fff;
  background:#fff;
  color:#000;
  border:none;
  cursor:pointer;
}

/* ACTIVE */
.sc-overlay.active{
  opacity:1;
  visibility:visible;
}

/* =========================
   SCROLLBAR (WEBKIT)
========================= */
.sc-body::-webkit-scrollbar{
  width:6px;
}

.sc-body::-webkit-scrollbar-track{
  background:transparent;
}

.sc-body::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,0.15);
  border-radius:10px;
  transition:0.3s;
}

/* HOVER */
.sc-body::-webkit-scrollbar-thumb:hover{
  background:rgba(0,0,0,0.3);
}

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

.sr-overlay{

    position:fixed;
    inset:0;

    background:rgba(10,10,10,.82);
    backdrop-filter:blur(18px);

    z-index:99999;

    opacity:0;
    visibility:hidden;

    transition:.35s ease;

    overflow-y:auto;

}

.sr-overlay.active{

    opacity:1;
    visibility:visible;

}

.sr-container{

    width:100%;
    max-width:1050px;

    margin:auto;

    padding:70px 20px;

}

.sr-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    margin-bottom:40px;

}

.sr-title span{

    color:#d4af37;

    text-transform:uppercase;

    letter-spacing:4px;

    font-size:12px;

}

.sr-title h2{

    color:#fff;

    font-size:52px;

    margin-top:12px;

    font-family:'Playfair Display',serif;

}

.sr-close{

    width:55px;
    height:55px;

    border:none;

    border-radius:50%;

    background:#ffffff10;

    color:#fff;

    font-size:30px;

    cursor:pointer;

    transition:.3s;

}

.sr-close:hover{

    background:#d4af37;

    color:#111;

}

.sr-search-box{

    position:relative;

    margin-bottom:18px;

}

.sr-search-icon{

    position:absolute;

    left:25px;

    top:50%;

    transform:translateY(-50%);

    width:22px;

    height:22px;

    color:#999;

}

.sr-search-box input{

    width:100%;

    height:72px;

    padding:0 30px 0 65px;

    background:#fff;

    border:none;

    border-radius:50px;

    font-size:18px;

    outline:none;

    transition:.3s;

}

.sr-search-box input:focus{

    box-shadow:0 0 0 3px rgba(212,175,55,.25);

}

.sr-search-status{

    color:#aaa;

    margin-bottom:45px;

    font-size:15px;

}

/*=========================================
        RESULTS
=========================================*/

.sr-results{

    display:grid;

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

    gap:20px;

    align-items:start;

}


/*=========================================
        RESULT CARD
=========================================*/

.sr-product{

    display:block;

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

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

    border-radius:24px;

    overflow:hidden;

    transition:.35s;

    text-decoration:none;

}

.sr-product:hover{

    transform:translateY(-8px);

    border-color:#d4af37;

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

    text-decoration:none;

}

.sr-product-image{

    width:100%;

    height:200px;

    overflow:hidden;

}

.sr-product-image img{

    width:100%;

    height:100%;

    object-fit:contain;

    transition:.5s;

}

.sr-product:hover img{

    transform:scale(1.08);

}

.sr-product-content{

    padding:25px;

}

.sr-product-content h4{

    color:#fff;

    font-size:12px;

    margin-bottom:12px;

    font-family:'Playfair Display',serif;

}

.sr-meta{

    display:flex;

    gap:10px;

    flex-wrap:wrap;

    margin-bottom:18px;

}

.sr-tag{

    padding:6px 14px;

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

    border-radius:30px;

    color:#bbb;

    font-size:10px;

}

.sr-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:18px;

}

.sr-price{

    color:#d4af37;

    font-size:15px;

    font-weight:700;

}

.sr-view{

    color:#fff;

    font-size:8px;

    letter-spacing:2px;

    text-transform:uppercase;

}

.sr-view i{

    margin-left:8px;

    transition:.3s;

}

.sr-product:hover .sr-view i{

    margin-left:14px;

}

.sr-result-heading{

    margin-bottom:30px;

}

.sr-result-heading h3{

    color:#fff;

    font-size:20px;

    font-weight:500;

}

.sr-results::-webkit-scrollbar{

    width:6px;

}

.sr-results::-webkit-scrollbar-thumb{

    background:#555;

    border-radius:20px;

}



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

.sr-loading{

    text-align:center;

    color:#fff;

    padding:80px 0;

}

.sr-loading .spinner-border{

    width:45px;

    height:45px;

}

.sr-loading p{

    margin-top:20px;

    color:#aaa;

}



/*==============================
ERROR
==============================*/

.sr-error{

    text-align:center;

    color:#ffb3b3;

    padding:70px;

}

.sr-empty{

    grid-column:1/-1;

    text-align:center;

    padding:120px 20px;

}

.sr-empty-icon{

    font-size:60px;

    margin-bottom:20px;

}

.sr-empty h3{

    color:#fff;

    font-size:34px;

    margin-bottom:15px;

}

.sr-empty p{

    color:#999;

}

/*=========================================
        VIEW ALL BUTTON
=========================================*/

.sr-view-all{

    grid-column:1/-1;

    text-align:center;

    margin-top:15px;

}

.sr-view-all a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:15px 32px;

    border-radius:50px;

    border:1px solid rgba(212,175,55,.35);

    color:#d4af37;

    text-decoration:none;

    transition:.3s;

    font-weight:600;

}

.sr-view-all a:hover{

    background:#d4af37;

    color:#111;

}

.sr-view-all span{

    transition:.3s;

}

.sr-view-all a:hover span{

    transform:translateX(5px);

}

.shop-search-keyword{

    margin-top:10px;

    color:#777;

    font-size:16px;

}

.shop-search-keyword strong{

    color:#111;

    font-weight:600;

}

.shop-search-box{

    position:relative;

    margin-bottom:30px;

}

.shop-search-box i{

    position:absolute;

    left:20px;

    top:50%;

    transform:translateY(-50%);

    color:#999;

    font-size:15px;

}

.shop-search-box input{

    width:100%;

    height:58px;

    padding:0 20px 0 50px;

    border:1px solid #e5e5e5;

    border-radius:50px;

    outline:none;

    font-size:15px;

    transition:.3s;

    background:#fff;

}

.shop-search-box input:focus{

    border-color:#d4af37;

    box-shadow:0 0 0 3px rgba(212,175,55,.15);

}


/* =========================================
   SHOP HERO
========================================= */
.shop-hero{
  position:relative;
  min-height:420px;
  padding:120px 20px;
  background:#efefeb;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

/* SOFT LIGHT */
.shop-hero::before{
  content:'';
  position:absolute;
  inset:0;

  background:
    radial-gradient(circle at 20% 30%,
    rgba(140,150,120,0.08),
    transparent 35%),

    radial-gradient(circle at 80% 20%,
    rgba(0,0,0,0.03),
    transparent 40%);

  z-index:1;
}

/* CONTENT */
.shop-hero-content{
  position:relative;
  z-index:5;
  max-width:760px;
}

/* BREADCRUMB */
.shop-breadcrumb{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-bottom:20px;
  font-size:15px;
  color:#7f7f7f;
}

.shop-breadcrumb .active{
  color:#1c1c1c;
  font-weight:500;
}

.crumb-dot{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#9a9a9a;
}

/* TITLE */
.shop-hero h1{
  font-size:50px;
  line-height:0.95;
  font-family:'Playfair Display', serif;
  font-weight:600;
letter-spacing:-2px;
  color:#171717;
  margin-bottom:25px;
}

.shop-hero h1 span{
  color:#9da07a;
}

/* TEXT */
.shop-hero p{
  font-size:18px;
  line-height:1.8;
  color:#666;
  max-width:620px;
  margin:auto;
}

/* BG TYPO */
.hero-bg-text{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  font-size:220px;
  font-weight:700;
  letter-spacing:14px;
  color:rgba(0,0,0,0.03);
  white-space:nowrap;
  z-index:1;
  animation:heroGlow 5s ease-in-out infinite;
}

@keyframes heroGlow{

  0%{
    opacity:0.4;
  }

  50%{
    opacity:0.8;
  }

  100%{
    opacity:0.4;
  }

}

/* FLOATING BOTTLES */
.floating-bottle{
  position:absolute;
  z-index:2;
  opacity:0.08;
  pointer-events:none;
  animation:floatBottle 7s ease-in-out infinite;
}

/* LEFT */
.bottle-left{
  width:170px;
  left:60px;
  top:60px;
  transform:rotate(-14deg);
  animation:floatLeft 7s ease-in-out infinite;
}

/* RIGHT */
.bottle-right{
  width:220px;
  right:80px;
  top:40px;
  transform:rotate(25deg);
  animation-delay:2s;
  animation:floatRight 8s ease-in-out infinite;
}

/* FLOAT */
@keyframes floatBottle{

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

  50%{
    transform:
    translateY(-18px)
    rotate(-10deg);
  }

  100%{
    transform:
    translateY(0px)
    rotate(-14deg);
  }

}

/* FLOAT ANIMATION */
@keyframes floatLeft{

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

  50%{
    transform:
    translateY(-18px)
    rotate(-10deg);
  }

  100%{
    transform:
    translateY(0px)
    rotate(-14deg);
  }

}

@keyframes floatRight{

  0%{
    transform:
    translateY(0px)
    rotate(12deg);
  }

  50%{
    transform:
    translateY(-22px)
    rotate(15deg);
  }

  100%{
    transform:
    translateY(0px)
    rotate(12deg);
  }

}

/* =========================
   HERO HOVER GLOW EFFECT
========================= */
.shop-hero:hover .floating-bottle{

  opacity:0.18;

  filter:
    drop-shadow(0 0 20px rgba(255,255,255,0.35))
    drop-shadow(0 0 40px rgba(212,192,150,0.25))
    brightness(1.08);

}

/* LEFT BOTTLE HOVER */
.shop-hero:hover .bottle-left{
  transform:
    translateY(-8px)
    rotate(-8deg)
    scale(1.05);
}

/* RIGHT BOTTLE HOVER */
.shop-hero:hover .bottle-right{
  transform:
    translateY(-10px)
    rotate(18deg)
    scale(1.06);
}

/* CURVES */
.shop-curve{
  position:absolute;
  border:1px solid rgba(110,120,100,0.25);
  border-radius:50%;
  z-index:1;
}

/* LEFT */
.curve-left{
  width:420px;
  height:420px;
  left:-180px;
  top:-220px;
}

/* RIGHT */
.curve-right{
  width:520px;
  height:520px;
  right:-240px;
  top:-300px;
}

/* DIVIDER */
.shop-divider{
  width:80px;
  height:1px;
  background:rgba(0,0,0,0.08);
  margin:80px auto;
}

/* =========================================
   CATEGORY SECTION
========================================= */
.shop-category-section{
  padding:0 20px 120px;
  background:#fff;
}

/* HEADING */
.shop-cat-heading{
  text-align:center;
  margin-bottom:70px;
}

/* SUB */
.shop-cat-sub{
  display:inline-block;
  font-size:13px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:#9a9a9a;
  margin-bottom:14px;
}

/* TITLE */
.shop-cat-heading h2{
  font-size:58px;
  line-height:1;
  margin-bottom:20px;
  color:#161616;
  font-family:'Playfair Display', serif;
}

/* TEXT */
.shop-cat-heading p{
  max-width:620px;
  margin:auto;
  color:#666;
  line-height:1.8;
  font-size:17px;
}

/* GRID */
.shop-category-grid{
  max-width:1320px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:30px;
}

/* CARD */
.shop-category-card{
  position:relative;
  background:#f2f1ed;
  border-radius:26px;
  overflow:hidden;
  min-height:435px;
  /*padding:50px 40px 0;*/
  text-decoration:none;
  transition:0.5s ease;
}

/* HOVER */
.shop-category-card:hover{
  transform:translateY(-8px);
  box-shadow:
    0 30px 60px rgba(0,0,0,0.06);
}

/* IMAGE */
.shop-category-image{
  /*height:340px;*/
  display:flex;
  align-items:center;
  justify-content:center;
}

.shop-category-image img{
  width:100%;
  object-fit:cover;
 transition:0.7s ease;
}

/* ZOOM */
.shop-category-card:hover img{
  transform:scale(1.08);
}

/* CONTENT */
.shop-category-content{
  position:relative;
  padding:24px 20px;
  text-align:center;
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.4);
  transition:0.4s ease;
}


/* TITLE */
.shop-category-content h3{
  font-size:28px;
  margin-bottom:8px;
  color:#1c1c1c;
  font-family:'Playfair Display', serif;
}


/* TEXT */
.shop-category-content span{
  font-size:15px;
  color:#777;
}

/* HOVER */
.shop-category-card:hover
.shop-category-content{
  transform:translateY(-5px);
}

.shop-category-content:hover{
  background:#00000017;
  color:#fff;
    
}

/*Products Page*/
    /* =========================================
   SHOP SECTION
========================================= */
.lux-shop{
  padding:80px 20px 120px;
  background:#ebe4de00;
  overflow:hidden;
}

/* WRAP */
.lux-shop-wrap{
  max-width:1440px;
  margin:auto;
}

/* =========================================
   FILTER SIDEBAR FIXED CSS
========================================= */

.lux-filter{
  position:fixed;
  top:0;
  left:-420px;

  width:400px;
  height:100vh;

  background:#fff;

  z-index:99999;

  transition:0.45s ease;

  display:flex;
  flex-direction:column;

  overflow:hidden;

  box-shadow:
  0 10px 50px rgba(0,0,0,0.12);
}

.lux-filter.active{
  left:0;
}

/* =========================================
   HEADER
========================================= */
.lux-filter-head{
  flex-shrink:0;

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

  padding:28px 32px;

  background:#fff;

  border-bottom:
  1px solid rgba(0,0,0,0.06);

  z-index:5;
}

.lux-filter-head h3{
  font-size:32px;
  font-weight:700;

  margin:0;
}

.filter-close{
  width:42px;
  height:42px;

  border:none;
  background:none;

  cursor:pointer;

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

/* =========================================
   BODY
========================================= */
.lux-filter-body{
  flex:1;

  overflow-y:auto;
  overflow-x:hidden;

  padding:10px 32px 40px;

  background:#fff;
}

/* CUSTOM SCROLLBAR */
.lux-filter-body::-webkit-scrollbar{
  width:5px;
}

.lux-filter-body::-webkit-scrollbar-thumb{
  background:#bba77a;
  border-radius:20px;
}

/* =========================================
   BLOCK
========================================= */
.filter-block{
  padding:28px 0;

  border-bottom:
  1px solid rgba(0,0,0,0.06);
}

/* =========================================
   ACCORDION BUTTON
========================================= */
.filter-accordion{
  width:100%;

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

  background:none;
  border:none;

  padding:0;

  cursor:pointer;

  font-size:22px;
  font-weight:600;

  color:#111;
}

/* ICON */
.filter-accordion i{
  width:18px;
  height:18px;

  transition:0.3s ease;
}

.filter-accordion.active i{
  transform:rotate(180deg);
}

/* =========================================
   CONTENT
========================================= */
.filter-content{
  display:none;

  padding-top:22px;
}

.filter-content.open{
  display:block;
}

/* =========================================
   LABEL
========================================= */
.filter-content label{
  display:grid;
  grid-template-columns:20px 1fr auto;

  align-items:center;

  gap:16px;

  margin-bottom:20px;

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

  color:#222;

  cursor:pointer;
}

/* CHECKBOX */
.filter-content input{
  width:18px;
  height:18px;

  margin:0;
}

/* COUNTS */
.filter-content span{
  color:#9d9d9d;
}

/* =========================================
   RANGE
========================================= */
.lux-price-range{
  margin-bottom:28px;
}

.lux-price-range input{
  width:100%;
}

/* =========================================
   PRICE BOXES
========================================= */
.lux-price-boxes{
  display:flex;
  gap:15px;
}

.price-box{
  flex:1;

  height:62px;

  border:
  1px solid rgba(0,0,0,0.08);

  border-radius:16px;

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

  gap:6px;

  font-size:20px;
  font-weight:600;

  color:#222;

  background:#fff;
}

.price-box span{
  color:#999;
}

/* =========================================
   OVERLAY
========================================= */
.filter-overlay{
  position:fixed;
  inset:0;

  background:rgba(0,0,0,0.4);

  backdrop-filter:blur(3px);

  opacity:0;
  visibility:hidden;

  transition:0.35s ease;

  z-index:9999;
}

.filter-overlay.active{
  opacity:1;
  visibility:visible;
}

/* =========================================
   ACTIVE FILTER TAGS
========================================= */

.active-filter-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:15px;

}

.active-filter-header h5{

    margin:0;

    font-size:15px;

    font-weight:600;

}

#filterCount{

    color:#777;

    font-weight:500;

}

.clear-filter-btn{

    background:none;

    border:none;

    color:#b8860b;

    font-size:13px;

    cursor:pointer;

    font-weight:600;

}

.clear-filter-btn:hover{

    text-decoration:underline;

}

#activeFilterHeader{
    display: none;
}

.active-filters{
  display:flex;
  flex-wrap:wrap;
  gap:12px;

  margin-bottom:30px;
}

.filter-tag{
  display:flex;
  align-items:center;
  gap:10px;

  padding:10px 16px;

  border-radius:50px;

  background:#f7f4ef;

  border:
  1px solid rgba(187,167,122,0.2);

  font-size:14px;
  font-weight:500;
}

.filter-tag button{
  border:none;
  background:none;

  cursor:pointer;

  padding:0;

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


/* =========================================
   PRODUCTS
========================================= */
.lux-products{
  width:100%;
}

/* =========================================
   TOP BAR
========================================= */
.lux-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:40px;
}

/* =========================================
   FILTER BUTTON
========================================= */
.filter-btn{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 20px;
  background:#fff;
  border:none;
  border-radius:14px;
  font-size:14px;
  cursor:pointer;
  transition:0.3s ease;
  box-shadow:
    0 10px 30px rgba(0,0,0,0.04);
}

.filter-btn:hover{
  background:#ece9df;
}

/* ICON */
.filter-btn svg{
  width:18px;
  height:18px;
}

/* =========================================
   GRID SWITCHER
========================================= */
.grid-switcher{
  display:flex;
  align-items:center;
  gap:10px;
}

.grid-btn{
  width:46px;
  height:46px;
  border:none;
  border-radius:12px;
  background:#efefeb;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:0.3s ease;
}

/* ACTIVE */
.grid-btn.active{
  background:#1b1b1b;
  color:#fff;
}

/* HOVER */
.grid-btn:hover{
  transform:translateY(-2px);
}

/* ICON */
.grid-btn svg{
  width:18px;
  height:18px;
}

/* =========================================
   SORT BOX
========================================= */
.sort-box select{
  border:none;
  background:#fff;
  padding:14px 18px;
  border-radius:14px;
  font-size:14px;
  outline:none;
  cursor:pointer;
  box-shadow:
    0 10px 30px rgba(0,0,0,0.04);
}

/* =========================================
   PRODUCT GRID
========================================= */
.lux-grid{
  display:grid;
  gap:30px;
}

/* 4 COLUMN */
.grid-4{
  grid-template-columns:repeat(4,1fr);
}

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

/* =========================================
   CARD
========================================= */
.lux-card{
  position:relative;
}

/* IMAGE WRAP */
.lux-image{
  position:relative;
  background:#efefeb;
  overflow:hidden;
  height:420px;
  display:flex;
  align-items:center;
  justify-content:center;

  transition:0.4s ease;
}

/* IMAGE */
.lux-image img{
  width:100%;
  transition:0.7s ease;
}

/* ZOOM */
.lux-card:hover img{
  transform:scale(1.08);
}

/* CARD HOVER */
.lux-card:hover .lux-image{
  box-shadow:
    0 25px 50px rgba(0,0,0,0.05);
}

/* =========================================
   BADGE
========================================= */
/* =========================================
   LEFT BADGES
========================================= */
.lux-badges-left{
    position:absolute;
    top:15px;
    left:15px;
    z-index:5;

    display:flex;
    flex-direction:column;
    gap:8px;
}

/* =========================================
   RIGHT BADGES
========================================= */
.lux-badges-right{
    position:absolute;
    top:15px;
    right:15px;
    z-index:5;
}

/* =========================================
   BADGE
========================================= */
.lux-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:6px 14px;

    border-radius:30px;

    color:#fff;

    font-size:11px;
    font-weight:600;

    letter-spacing:0.5px;

    white-space:nowrap;
}

/* =========================================
   BADGE COLORS
========================================= */
.new{
    background:#df0000;
}

.best_seller{
    background:#0030ac;
}

.featured{
    background:#00ac23;
}

.discount{
    background:#ac0071;
}

/* =========================================
   HOVER ACTIONS
========================================= */
/* =========================================
   HOVER OVERLAY
========================================= */
.lux-hover{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,0.18);
    backdrop-filter:blur(10px);
    opacity:0;
    transition:0.4s ease;
    padding:20px;
    text-align:center;
}

/* SHOW */
.lux-card:hover .lux-hover{
    opacity:1;
}

/* CONTENT */
.lux-hover-content{
    transform:translateY(20px);

    transition:0.4s ease;
}

.lux-card:hover .lux-hover-content{
    transform:translateY(0);
}

/* DESCRIPTION */
.lux-hover-desc{
    font-size:13px;

    line-height:1.6;

    color:#111;

    max-width:220px;

    margin:0 auto 18px;

    font-weight:500;
}

/* ACTIONS */
.lux-hover-actions{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:12px;
}

/* BUTTON */
.lux-hover-actions button{
    width:48px;
    height:48px;

    border:none;

    border-radius:50%;

    background:#fff;

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

    cursor:pointer;

    transition:0.3s ease;
}

/* ICON */
.lux-hover-actions button svg{
    width:18px;
    height:18px;
}

/* HOVER */
.lux-hover-actions button:hover{
    background:#8a8f6a;

    color:#fff;

    transform:translateY(-3px);
}

/* =========================================
   CONTENT
========================================= */
.lux-content{
  padding: 18px;
    border: 1px solid #80808047;
    background: #e8e0d72b;
}

/* TITLE */
.lux-content h3{
  font-size:22px;
  margin-bottom:8px;
  color:#1b1b1b;
  font-family:'Playfair Display', serif;
}

/* STARS */
.stars{
  color:#d4a84f;
  margin-bottom:10px;

  font-size:14px;
}

/* PRICE */
.price-row{
    display:flex;
    align-items:center;
    width:100%;
    gap:12px;
}

.price-left{
    display:flex;
    align-items:center;
    gap:10px;
}

/* NEW PRICE */
.new-price{
  color:#1b1b1b;
  font-size:18px;
  font-weight:600;
}

/* OLD PRICE */
.old-price{
  color:#d70000;
  text-decoration:line-through;
}

.price-discount{
    position:relative;
    width:48px;
    height:48px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:linear-gradient(135deg, #0ec039, #35631d);
    color:#fff;
    font-size:9px;
    font-weight:700;
    line-height:1.2;
    text-align:center;
    text-transform:uppercase;
    letter-spacing:0.5px;
    margin-left:auto;
    overflow:hidden;
    box-shadow:
    0 10px 30px rgb(0 255 81 / 25%);
    animation:floatBadge 3s ease-in-out infinite;
}

/* GLOSS EFFECT */
.price-discount::before{
    content:'';

    position:absolute;

    top:-20px;
    left:-30px;

    width:120%;
    height:55%;

    background:rgba(255,255,255,0.25);

    border-radius:50%;

    transform:rotate(-12deg);
}

/* GLARE SWEEP */
.price-discount::after{
    content:'';

    position:absolute;

    top:0;
    left:-120%;

    width:50%;
    height:100%;

    background:rgba(255,255,255,0.35);

    transform:skewX(-25deg);

    animation:badgeGlare 3s infinite;
}

/* FLOAT ANIMATION */
@keyframes floatBadge{

    0%,100%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-4px);
    }
}

/* GLARE ANIMATION */
@keyframes badgeGlare{

    0%{
        left:-120%;
    }

    100%{
        left:160%;
    }
}

/* =========================================
   PAGINATION
========================================= */
.lux-pagination{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-top:70px;
}

/* BTN */
.lux-pagination button{
  width:46px;
  height:46px;
  border:none;
  border-radius:12px;
  background:#efefeb;
  cursor:pointer;
  transition:0.3s ease;
}

/* ACTIVE */
.lux-pagination button.active{
  background:#1b1b1b;
  color:#fff;
}

/* HOVER */
.lux-pagination button:hover{
  transform:translateY(-2px);
}

/* DESKTOP */
  .mobile-cart-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:100%;
    height:46px;
    border:none;
    border-radius:14px;
    margin-top:14px;
    background:#8a8f6a;
    color:#fff;
    font-size:14px;
    font-weight:500;
    transition:0.35s ease;
    position:relative;
    overflow:hidden;
  }

 /* ICON */
  .mobile-cart-btn svg{
    width:18px;
    height:18px;
    stroke-width:1.8;
  }

  /* HOVER */
  .mobile-cart-btn:hover{
    background:#8f9570;
    transform:translateY(-2px);
  }

  /* SHIMMER */
  .mobile-cart-btn::before{
    content:'';
    position:absolute;
    top:0;
    left:-120%;
    width:80%;
    height:100%;
    background:linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,0.2),
      transparent
    );

    transition:0.7s;
  }

  .mobile-cart-btn:hover::before{
    left:120%;
  }

/* =========================================
   PRODUCT DETAILS SECTION
========================================= */
.pd-section{
  padding:40px 20px 90px;
  background:#fff;
}


/* =========================================
   PRODUCT BREADCRUMB
========================================= */
.pd-breadcrumb{
  padding:22px 20px 0;
  background:#fff;
}

.pd-breadcrumb-inner{
  max-width:1320px;
  margin:auto;

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

  flex-wrap:wrap;
}

/* LINKS */
.pd-breadcrumb-inner a{
  text-decoration:none;

  font-size:14px;
  font-weight:400;

  color:#a1a1a1;

  transition:0.3s ease;
}

.pd-breadcrumb-inner a:hover{
  color:#111;
}

/* SLASH */
.pd-breadcrumb-inner span{
  color:#c7c7c7;
  font-size:13px;
}

/* ACTIVE PAGE */
.pd-breadcrumb-inner p{
  margin:0;

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

  color:#111;
}



/* =========================================
   CONTAINER
========================================= */
.pd-container{
  max-width:1320px;
  margin:auto;
  display:grid;
  grid-template-columns:0.9fr 1fr;
  gap:65px;
  align-items:start;
}

/* =========================================
   GALLERY
========================================= */
.pd-gallery{

}

/* THUMBNAILS */
.pd-thumbs{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.pd-thumb{
  width:90px;
  height:110px;
  border-radius:18px;
  overflow:hidden;
  cursor:pointer;
  border:1px solid transparent;
  transition:0.35s ease;
}

.pd-thumb.active{
  border-color:#111;
}

.pd-thumb:hover{
  transform:translateY(-3px);
}

.pd-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.pd-thumb{
  transition:
    transform 0.4s ease,
    border-color 0.4s ease,
    opacity 0.4s ease;
}

.pd-thumb:hover{
  transform:translateY(-4px);
}

.pd-thumb.active{
  border-color:#111;

  box-shadow:
  0 10px 25px rgba(0,0,0,0.08);
}





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

/* MAIN WRAPPER */
.pd-main{
  position:relative;
  overflow:hidden;

  background:
  radial-gradient(
    circle at center,
    #f8f5f1 0%,
    #f1ece5 100%
  );

  border-radius:30px;
}

.pd-main img{
  width:100%;
  display:block;
  transition:0.5s ease;
}

.pd-main:hover img{
  transform:scale(1.03);
}


/* IMAGE */
/* =========================================
   LUXURY IMAGE TRANSITION
========================================= */

#pdMainImage{
  width:100%;
  display:block;

  position:relative;
  z-index:2;

  transition:
    opacity 1.8s ease,
    filter 1.8s ease,
    transform 2.5s ease;

  opacity:1;
  filter:blur(0px);

  transform:
  scale(1)
  translateX(0px);
}

/* OUT STATE */
#pdMainImage.image-out{

  opacity:0;

  filter:blur(12px);

  transform:
  scale(1.08)
  translateX(20px);

}

/* IN STATE */
#pdMainImage.image-in{

  animation:
  luxuryReveal 3.5s ease forwards;

}

/* =========================================
   LUXURY REVEAL
========================================= */
@keyframes luxuryReveal{

  0%{

    opacity:0;

    filter:blur(12px);

    transform:
    scale(1.08)
    translateX(-20px);

  }

  100%{

    opacity:1;

    filter:blur(0px);

    transform:
    scale(1)
    translateX(0px);

  }

}

/* ACTIVE CINEMATIC */
#pdMainImage.cinematic-active{

  animation:
  cinematicZoom 6s ease forwards;

}

/* =========================================
   SOFT LIGHT
========================================= */
.pd-main::before{
  content:'';

  position:absolute;
  inset:0;

  background:
  radial-gradient(
    circle at 30% 20%,
    rgba(255,255,255,0.35),
    transparent 45%
  );

  z-index:1;

  animation:
  ambientLight 8s ease-in-out infinite;
}

/* =========================================
   LIGHT SWEEP
========================================= */
.pd-main::after{
  content:'';

  position:absolute;
  top:-50%;
  left:-60%;

  width:80%;
  height:200%;

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

  transform:rotate(20deg);

  animation:
  lightSweep 8s linear infinite;

  z-index:3;
}

/* =========================================
   CINEMATIC ZOOM
========================================= */
@keyframes cinematicZoom{

  0%{
    transform:
    scale(1)
    translateX(0px);
  }

  50%{
    transform:
    scale(1.06)
    translateX(-6px);
  }

  100%{
    transform:
    scale(1.1)
    translateX(6px);
  }

}

/* =========================================
   AMBIENT LIGHT
========================================= */
@keyframes ambientLight{

  0%,100%{
    opacity:0.5;
    transform:translateX(0px);
  }

  50%{
    opacity:0.9;
    transform:translateX(20px);
  }

}

/* =========================================
   LIGHT SWEEP
========================================= */
@keyframes lightSweep{

  0%{
    transform:
    translateX(-120%)
    rotate(20deg);
  }

  100%{
    transform:
    translateX(260%)
    rotate(20deg);
  }

}


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

.pd-gallery-wrap{
    display:grid;
    grid-template-columns:90px 1fr;
    gap:18px;
    align-items:start;
}

/* =========================================
   THUMBNAIL SWIPER
========================================= */

.pd-gallery-thumbs{
    width:90px;
    height:502px;               /* Shows 4 thumbnails */
    overflow:hidden;
}

.pd-gallery-thumbs .swiper-wrapper{
    box-sizing:border-box;
}

.pd-gallery-thumbs .swiper-slide{
    height:110px !important;
    display:flex;
    justify-content:center;
    align-items:center;
}

/* =========================================
   THUMBNAILS
========================================= */

.pd-gallery-thumb{
    width:90px;
    height:110px;
    border-radius:18px;
    overflow:hidden;
    cursor:pointer;
    border:1px solid transparent;

}

.pd-gallery-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.pd-gallery-thumb{

    transition:

        transform .35s,

        border-color .35s,

        box-shadow .35s,

        filter .35s;

}

.pd-gallery-thumb:hover{

    transform:translateY(-5px) scale(1.04);

}

.pd-gallery-thumb.active{

    border:2px solid #111;

    box-shadow:

    0 12px 35px rgba(0,0,0,.12);

}

.pd-gallery-thumb.active img{

    animation:thumbPulse .6s ease;

}

@keyframes thumbPulse{

    0%{

        transform:scale(.95);

    }

    100%{

        transform:scale(1);

    }

}


/* =========================================
   MAIN IMAGE
========================================= */

.pd-gallery-main{

    position:relative;

    background:#F8F5F0;

    border-radius:32px;

    overflow:hidden;

}

/* =========================================
   GOLDEN AMBIENT GLOW
========================================= */

.pd-gallery-glow{

    position:absolute;

    left:50%;

    top:42%;

    width:360px;

    height:360px;

    border-radius:50%;

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

    background:
    radial-gradient(circle,

    rgba(210,170,70,.32) 0%,

    rgba(210,170,70,.18) 40%,

    rgba(210,170,70,0) 75%);

    filter:blur(45px);

    animation:luxGlow 8s ease-in-out infinite;

    pointer-events:none;

    z-index:1;

}

@keyframes luxGlow{

    0%,100%{

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

        opacity:.75;

    }

    50%{

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

        opacity:1;

    }

}

/* =========================================
   LUXURY LIGHT SWEEP
========================================= */



.pd-gallery-light{

    position:absolute;

    top:-15%;

    left:-65%;

    width:35%;

    height:130%;

    background:

    linear-gradient(

        110deg,

        transparent,

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

        rgba(255,255,255,.65),

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

        transparent

    );

    filter:blur(10px);

    transform:rotate(10deg);

    animation:lightSweep 9s linear infinite;

    pointer-events:none;

    z-index:4;

}

@keyframes lightSweep{

    0%{

        left:-60%;

        opacity:0;

    }

    12%{

        opacity:1;

    }

    45%{

        left:135%;

        opacity:1;

    }

    55%{

        opacity:0;

    }

    100%{

        left:135%;

        opacity:0;

    }

}

/* =========================================
   MAIN IMAGE
========================================= */

#pdGalleryMainImage{

    position:relative;

    width:100%;

    display:block;

    object-fit:contain;

    animation:floatingBottle 7s ease-in-out infinite;

    transition:

        transform .5s,

        opacity .35s,

        filter .35s;

}

/* Hover */

.pd-gallery-main:hover #pdGalleryMainImage{

    transform:scale(1.03);

}

@keyframes floatingBottle{

    0%,100%{

        transform:

        translateY(0)

        scale(1);

    }

    50%{

        transform:

        translateY(-6px)

        scale(1.015);

    }

}


@keyframes lightSweep{

    0%{

        left:-60%;

        opacity:0;

    }

    10%{

        opacity:1;

    }

    50%{

        left:120%;

        opacity:1;

    }

    60%{

        opacity:0;

    }

    100%{

        left:120%;

        opacity:0;

    }

}



/* Glass Highlight */
.pd-gallery-main::after{

    content:"";

    position:absolute;

    top:0;
    left:-140%;

    width:70%;
    height:100%;

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

    transform:skewX(-20deg);

    animation:shineMove 8s linear infinite;

    pointer-events:none;

}


@keyframes shineMove{

    from{

        left:-140%;

    }

    to{

        left:180%;

    }

}

#pdGalleryMainImage{

    width:100%;

    display:block;

    object-fit:contain;

    position:relative;

    transform:scale(1);

    opacity:1;

    transition:
        opacity .35s ease,
        transform .45s cubic-bezier(.22,.61,.36,1),
        filter .35s ease;

    will-change:transform,opacity;

}

/* Hover */

.pd-gallery-main:hover #pdGalleryMainImage{

    transform:scale(1.04);

}

#pdGalleryMainImage{

    animation:floatingBottle 6s ease-in-out infinite;

}

@keyframes floatingBottle{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-6px);

    }

}

.pd-gallery-thumb:hover img{

    transform:scale(1.06);

}

.pd-gallery-thumb img{

    transition:transform .4s;

}

#pdGalleryMainImage,
.pd-gallery-thumb,
.pd-gallery-thumb img{

    backface-visibility:hidden;

    transform:translateZ(0);

}

/* =========================================
   NOTES
========================================= */

.pd-notes{
    padding:20px;
    text-align:center;
}

.pd-notes h4{
    font-size:28px;
    font-weight:700;
    margin-bottom:18px;
}

.pd-note-tags{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:12px;
}

.pd-note-tags span{
    padding:10px 22px;
    background:#8B6B2E;
    color:#fff;
    border-radius:999px;
    font-size:15px;
    font-weight:500;
}

#pdGalleryMainImage{
    width:100%;
    display:block;
    object-fit:contain;
    transition:opacity .25s ease;
}

/* =========================================
   CONTENT
========================================= */
.pd-category{
  display:inline-block;

  font-size:12px;
  letter-spacing:1px;
  text-transform:uppercase;

  color:#888;

  margin-bottom:14px;
}

/* TITLE */
.pd-title{
  font-size:45px;
  line-height:1.08;
  margin-bottom:20px;
  font-family:'Playfair Display', serif;
  font-weight:600;
  color:#111;
}

/* =========================================
   RATING
========================================= */
.pd-rating{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:24px;
  font-size:14px;
  color:#666;
}

.pd-stars{
  color:#d6a54f;
  letter-spacing:2px;
}

.pd-divider{
  width:1px;
  height:14px;
  background:#ddd;
}

.pd-sold{
  color:#7c8860;
  font-weight:500;
}

/* =========================================
   PRICE
========================================= */
.pd-price-wrap{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:24px;
}

.pd-price{
  font-size:35px;
  font-weight:700;
  color:#00a308;
}

.pd-old-price{
  font-size:22px;
  color:red;
  text-decoration:line-through;
}

.pd-discount{
  padding:5px 12px;
  border-radius:30px;
  background:#e54848;
  color:#fff;
  font-size:12px;
  font-weight:600;
}

/* =========================================
   DESCRIPTION
========================================= */
.pd-desc{
  max-width:92%;
  font-size:16px;
  line-height:1.9;
  color:#666;
  margin-bottom:30px;
}

/* =========================================
   LIVE
========================================= */
.pd-live{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:34px;
  font-size:14px;
  color:#444;
}

.pd-live-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#7c8860;
  animation:pulse 1.5s infinite;
}

@keyframes pulse{
  0%{
    transform:scale(1);
    opacity:1;
  }

  100%{
    transform:scale(2);
    opacity:0;
  }
}

/* =========================================
   NOTES
========================================= */
.pd-notes{
  margin-top:15px;
  padding:10px;
}
.pd-notes h4{
    
  font-size:15px;
  font-weight:600;
  margin-bottom:14px;
  color:#111;
  text-align:center;
}

.pd-size-wrap h4,
.pd-colors h4,
.pd-qty-wrap h4{
  font-size:15px;
  font-weight:600;
  margin-bottom:14px;
  color:#111;
}

.pd-note-tags{
  display:flex;
  flex-wrap:wrap;
  align-content:center;
  justify-content:center;
  gap:10px;
}

.pd-note-tags span{
  padding:10px 16px;
  border-radius:50px;
  background:#563900d1;
  font-size:13px;
  color:#fff;
}

/* =========================================
   FLEX
========================================= */
.pd-flex{
  display:flex;
  align-items:center;
  justify-content:space-between;

  margin-bottom:14px;
}

.pd-flex span{
  color:#777;
  font-size:14px;
}

/* =========================================
   SIZE
========================================= */
.pd-size-wrap{
  margin-bottom:34px;
}

.pd-size-options{
  display:flex;
  gap:12px;
}

.pd-size{
  width:74px;
  height:48px;

  border-radius:12px;

  border:1px solid #ddd;
  background:#fff;

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

  cursor:pointer;

  transition:0.3s ease;
}

.pd-size.active{
  background:#111;
  color:#fff;
  border-color:#111;
}

/* =========================================
   COLORS
========================================= */
.pd-colors{
  margin-bottom:34px;
}

.pd-color-wrap{
  display:flex;
  gap:12px;
}

.pd-color{
  width:38px;
  height:38px;

  border-radius:50%;

  border:2px solid transparent;

  cursor:pointer;

  transition:0.3s ease;
}

.pd-color.active{
  border-color:#111;

  transform:scale(1.08);
}

/* =========================================
   CART ROW
========================================= */
.pd-cart-row{
  display:flex;
  gap:16px;

  margin-top:16px;
}

/* QTY */
.pd-qty{
  width:150px;
  height:56px;

  border-radius:50px;

  border:1px solid #ddd;

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

  padding:0 18px;
}

.pd-qty button{
  border:none;
  background:none;

  font-size:22px;
  color:#111;

  cursor:pointer;
}

.pd-qty input{
  width:40px;

  border:none;
  outline:none;

  text-align:center;

  font-size:16px;
  font-weight:500;
}

/* ADD TO CART */
.pd-cart-btn{
  flex:1;

  height:56px;

  border:none;
  border-radius:50px;

  background:#111;
  color:#fff;

  font-size:15px;
  font-weight:600;

  cursor:pointer;

  transition:0.35s ease;
}

.pd-cart-btn:hover{
  background:#7c8860;
}

/* BUY NOW */
.pd-buy-btn{
  width:100%;
  height:58px;

  margin-top:16px;

  border:none;
  border-radius:50px;

  background:#d84d4d;
  color:#fff;

  font-size:16px;
  font-weight:600;

  cursor:pointer;

  transition:0.35s ease;
}

.pd-buy-btn:hover{
  background:#111;
}

/* =========================================
   ACTIONS
========================================= */
.pd-actions{
  display:flex;
  flex-wrap:wrap;
  gap:26px;

  margin-top:32px;
}

.pd-actions a{
  position:relative;

  text-decoration:none;

  color:#222;
  font-size:14px;
}

.pd-actions a::after{
  content:'';

  position:absolute;
  left:0;
  bottom:-4px;

  width:0;
  height:1px;

  background:#111;

  transition:0.3s ease;
}

.pd-actions a:hover::after{
  width:100%;
}

/* =========================================
   DELIVERY
========================================= */
.pd-delivery{
  margin-top:36px;

  padding-top:24px;

  border-top:1px solid #eee;
}

.pd-delivery-item{
  font-size:14px;
  color:#666;

  margin-bottom:12px;
}

.pd-delivery-item strong{
  color:#111;
}

/* =========================================
   TABS
========================================= */
.pd-tabs-section{
  max-width:1320px;
  margin:20px auto 0;
}

/* NAV */
.pd-tabs-nav{
  display:flex;
  gap:50px;
  border-bottom:1px solid #eee;
  margin-bottom:40px;
}

.pd-tab-btn{
  position:relative;
  padding:0 0 18px;
  border:none;
  background:none;
  cursor:pointer;
  font-size:25px;
  font-weight:500;
  color:#777;
  transition:0.3s ease;
}

.pd-tab-btn.active{
  color:#111;
}

.pd-tab-btn.active::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-1px;
  width:100%;
  height:2px;
  background:#111;
}

/* PANELS */
.pd-tab-panel{
  display:none;
}

.pd-tab-panel.active{
  display:block;
}

/* GRID */
.pd-tab-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
}

.pd-tab-grid h3{
  margin-bottom:14px;
  font-size:24px;
  font-family:'Playfair Display', serif;
}

.pd-tab-grid p,
.pd-tab-grid li{
  color:#666;
  line-height:1.9;
  font-size:15px;
}

.pd-tab-grid ul{
  padding-left:18px;
}

/* =========================================
   RELATED PRODUCTS
========================================= */
.rp-section{
  padding:100px 20px;
  background:#fff;
}

/* TABS */
.rp-tabs{
  display:flex;
  justify-content:center;
  gap:50px;

  margin-bottom:60px;
}

.rp-tab{
  background:none;
  border:none;

  font-size:40px;
  font-family:'Playfair Display', serif;

  color:#999;
  cursor:pointer;

  position:relative;
  transition:0.4s ease;
}

.rp-tab.active{
  color:#111;
}

.rp-tab.active::after{
  content:'';

  position:absolute;
  left:0;
  bottom:-12px;

  width:100%;
  height:2px;

  background:#111;
}

.rp-content{
    display:none;
}

.rp-content.active{
    display:block;
}

/* SWIPER */
.rp-swiper{
  max-width:1320px;
  margin:auto;

  overflow:visible;
  position:relative;
}

/* CARD */
.rp-card{
  transition:0.4s ease;
}

.rp-card:hover{
  transform:translateY(-8px);
}

/* IMAGE */
.rp-img-wrap{
  position:relative;

  background:#f5f5f2;
  border-radius:24px;

  overflow:hidden;
}

.rp-img{
  width:100%;
  display:block;

  transition:1s ease;
}

.rp-card:hover .rp-img{
  transform:scale(1.08);
}

/* BADGES */
.rp-badge{
  position:absolute;
  top:18px;
  left:18px;

  z-index:3;

  padding:8px 14px;

  border-radius:30px;

  font-size:12px;
  font-weight:600;

  color:#fff;
}

.rp-badge.new{
  background:#7da36f;
}

.rp-badge.sale{
  background:#d94c4c;
}

/* HOVER */
.rp-hover{
  position:absolute;
  inset:0;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;

  background:rgba(255,255,255,0.12);
  backdrop-filter:blur(8px);

  opacity:0;
  transition:0.5s ease;
}

.rp-card:hover .rp-hover{
  opacity:1;
}

.rp-hover button{
  border:none;

  background:#fff;
  color:#111;

  padding:12px 24px;

  border-radius:40px;

  font-size:14px;
  cursor:pointer;

  transition:0.3s ease;
}

.rp-hover button:hover{
  background:#111;
  color:#fff;
}

/* INFO */
.rp-info{
  padding-top:22px;
}

.rp-info h4{
  font-size:22px;
  margin-bottom:10px;

  font-family:'Playfair Display', serif;
}

/* STARS */
.rp-stars{
  color:#d8a25e;
  font-size:15px;

  margin-bottom:12px;
}

/* PRICE */
.rp-price{
  display:flex;
  align-items:center;
  gap:12px;
}

.new-price{
  font-size:22px;
  font-weight:600;
}



/* NAVIGATION */
.rp-prev,
.rp-next{
  position:absolute;
  top:45%;

  transform:translateY(-50%);

  width:54px;
  height:54px;

  border-radius:50%;

  background:rgba(255,255,255,0.95);
  backdrop-filter:blur(10px);

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

  font-size:30px;
  cursor:pointer;

  z-index:10;

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

  transition:0.4s ease;
}

.rp-prev:hover,
.rp-next:hover{
  background:#111;
  color:#fff;

  transform:
  translateY(-50%)
  scale(1.08);
}

.rp-prev{
  left:-28px;
}

.rp-next{
  right:-28px;
}


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

.cart-hero{
    background:#f5f5f5;
    padding:50px 0 50px;
    text-align:center;
}

/* =========================
    BREADCRUMB
========================= */

.cart-breadcrumb{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:14px;
    margin-bottom:22px;
    font-size:17px;
    font-weight:400;
}

.cart-breadcrumb a{
    text-decoration:none;
    color:#b4b4b4;
    transition:0.3s;
}

.cart-breadcrumb a:hover{
    color:#111;
}

.cart-breadcrumb .separator{
    color:#b4b4b4;
    font-size:18px;
}

.cart-breadcrumb .active{
    color:#111;
    font-weight:500;
}

/* =========================
    TITLE
========================= */

.cart-title{
    font-size:40px;
    font-weight:500;
    line-height:1.1;
    margin-bottom:24px;
    color:#111;
    letter-spacing:-1px;
}

/* =========================
    SUBTITLE
========================= */

.cart-subtitle{
    max-width:820px;
    margin:auto;
    font-size:15px;
    line-height:1.8;
    color:#6f6f6f;
    font-weight:400;
}


        .cart-wrapper{
            padding:60px 0;
        }

        /* =========================
            TOP ALERT
        ========================== */

        .cart-alert{
            background:#f6eaea;
            border-radius:14px;
            padding:16px 22px;
            font-size:20px;
            display:flex;
            align-items:center;
            justify-content:center;
            gap:12px;
            margin-bottom:60px;
        }

        .cart-alert span{
            color:#eb4d4b;
            font-weight:600;
        }

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

        .cart-head{
            padding-bottom:20px;
            border-bottom:1px solid #ddd;
            margin-bottom:30px;
        }

        .cart-head h5{
            font-size:20px;
            font-weight:500;
            margin:0;
        }

        /* =========================
            PRODUCT ROW
        ========================== */

        .cart-item{
            padding:35px 0;
            border-bottom:1px solid #e5e5e5;
        }

        .product-box{
    display:flex;
    gap:28px;
    align-items:center;
}

.product-image{
    width:100px;
    border-radius:14px;
    overflow:hidden;
    flex-shrink:0;
}

.product-image img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.product-details{
    flex:1;
    display:grid;
    grid-template-columns: 2.8fr 1fr 2fr auto;
    align-items:center;
    gap:20px;
}

.product-details h4{
    font-size:18px;
    margin:0;
}

.meta{
            font-size:19px;
            color:#9a9a9a;
            margin-bottom:8px;
        }

.meta span{
            color:#111;
        }

.cprice{
    font-size:18px;
    color:#000;
    font-weight:500;
}

.cold-price{
  color:#d60000;
  text-decoration:line-through;
}

.ctotal-price{
    font-size:18px;
    color:#53b94d;
    font-weight:500;
}

.qty-box{
    width:135px;
    height:50px;
    border:1px solid #ddd;
    border-radius:50px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 20px;
}

.remove-btn{
    color:#ef4444;
    border-bottom:1px solid #ef4444;
}

        .meta{
            font-size:19px;
            color:#9a9a9a;
            margin-bottom:8px;
        }

        .meta span{
            color:#111;
        }

      

        .cprice{
            color:#000;
            font-size:18px;
            font-weight:500;
        }

        /* =========================
            QUANTITY
        ========================== */

      
        .qty-btn{
            background:none;
            border:none;
            font-size:25px;
            line-height:1;
            color:#111;
        }

        .qty-value{
            font-size:15px;
            font-weight:500;
        }

        /* =========================
            SUMMARY
        ========================== */

        .summary-card{
            background:#f1eeee;
            border-radius:24px;
            padding:30px;
            position:sticky;
            top:30px;
        }

        .shipping-text{
            font-size:18px;
            margin-bottom:14px;
        }

        .shipping-text span{
            color:#ef4444;
            font-weight:600;
        }

        .shipping-bar{
            width:100%;
            height:6px;
            background:#ddd;
            border-radius:20px;
            overflow:hidden;
            margin-bottom:35px;
        }

        .shipping-bar div{
            width:52%;
            height:100%;
            background:#53b94d;
        }

        .summary-title{
            font-size:25px;
            font-weight:500;
            margin-bottom:30px;
        }

        .summary-row{
            display:flex;
            justify-content:space-between;
            font-size:18px;
        }

        .summary-divider{
            border-top:1px solid #ddd;
            margin:15px 0;
        }

        .shipping-option{
            display:flex;
            justify-content:space-between;
            align-items:center;
            margin-bottom:18px;
            font-size:22px;
        }

        .shipping-option label{
            display:flex;
            align-items:center;
            gap:12px;
        }

        .total-row{
            display:flex;
            justify-content:space-between;
            align-items:center;
            margin-top:15px;
            margin-bottom:15px;
        }

        .total-row h3{
            font-size:18px;
            font-weight:500;
        }

        .total-row h2{
            font-size:18px;
            font-weight:600;
        }

        .terms{
            margin-bottom:30px;
            font-size:19px;
        }

        .terms a{
            color:#111;
            text-decoration:underline;
        }

   .checkout-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    height:56px;

    background:#000;

    color:#fff;

    font-size:20px;

    font-weight:500;

    text-decoration:none;

    border-radius:999px;

    transition:.35s ease;

    border:1px solid transparent;
}


/* HOVER */

.checkout-btn:hover{

    background:#111;

    color:#fff;

    transform:translateY(-2px);

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

.mobile-label{
    display:none;
}

  .desktop-label{
        display:block;
        min-width:75px;
        font-size:15px;
        font-weight:500;
        color:#d18d00;
    }
    
    #cartDiscount{
        
        color:green;
        font-weight:800;
    }

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

.checkout-section{
    padding:70px 0;
    background:#ffffff;
}

.checkout-card,
.order-summary-card{
    background:#fff;
    border-radius:22px;
    padding:32px;
    border:1px solid #f1f1f1;

    /* PREMIUM SHADOW */
    box-shadow:
        0 4px 10px rgba(0,0,0,0.02),
        0 20px 40px rgba(0,0,0,0.04);

    transition:0.3s ease;
}

/* OPTIONAL HOVER */

.checkout-card:hover,
.order-summary-card:hover{
    transform:translateY(-2px);

    box-shadow:
        0 8px 18px rgba(0,0,0,0.03),
        0 28px 50px rgba(0,0,0,0.06);
}

/* =========================
    ORDER SUMMARY STICKY
========================= */

.order-summary-card{
    position:sticky;
    top:30px;
}

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

.section-heading{
    margin-bottom:28px;
}

.section-heading h2{
    font-size:28px;
    font-weight:600;
    color:#111;
    margin-bottom:8px;
    letter-spacing:-0.3px;
}

.section-heading p{
    font-size:14px;
    color:#777;
    line-height:1.7;
    margin:0;
}

/* =========================
    FORM
========================= */

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

.form-label{
    display:block;
    margin-bottom:10px;
    font-size:14px;
    font-weight:500;
    color:#222;
}

.checkout-input{
    width:100%;
    height:54px;
    border:1px solid #e7e7e7;
    border-radius:14px;
    padding:0 18px;
    font-size:14px;
    background:#fff;
    transition:0.3s ease;
}

.checkout-input::placeholder{
    color:#aaa;
}

.checkout-input:focus{
    outline:none;
    border-color:#111;

    box-shadow:
        0 0 0 4px rgba(0,0,0,0.03);
}

.checkout-textarea{
    height:120px;
    padding-top:16px;
    resize:none;
}

/* =========================
    SUMMARY
========================= */

.summary-heading{
    font-size:24px;
    font-weight:600;
    color:#111;
    margin-bottom:28px;
}

/* =========================
    PRODUCT ITEM
========================= */

.summary-product{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;

    padding-bottom:18px;
    margin-bottom:18px;

    border-bottom:1px solid #f2f2f2;
}

.summary-product-left{
    display:flex;
    align-items:center;
    gap:14px;
    flex:1;
}

.summary-image{
    width:64px;
    height:64px;
    border-radius:16px;
    overflow:hidden;
    background:#f6f6f6;
    flex-shrink:0;
}

.summary-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.summary-product h4{
    font-size:15px;
    font-weight:500;
    margin-bottom:4px;
    color:#111;
    line-height:1.4;
}

.summary-product span{
    font-size:13px;
    color:#888;
}

.summary-price{
    font-size:16px;
    font-weight:600;
    color:#111;
}

/* =========================
    TOTAL
========================= */

.summary-total{
    margin-top:8px;
}

.summary-row{
    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:14px;

    font-size:14px;
    color:#666;
}

.summary-row.total{
    margin-top:18px;
    padding-top:18px;

    border-top:1px solid #ececec;

    font-size:18px;
    font-weight:600;
    color:#111;
}

/* =========================
    PAYMENT
========================= */

.payment-methods{
    margin-top:26px;
    margin-bottom:26px;
}

.payment-option{
    display:flex;
    align-items:center;
    gap:12px;

    height:54px;

    padding:0 18px;

    border:1px solid #ececec;
    border-radius:14px;

    margin-bottom:12px;

    cursor:pointer;

    transition:0.3s ease;

    background:#fff;

    font-size:14px;
    font-weight:500;
    color:#222;
}

.payment-option:hover{
    border-color:#111;

    box-shadow:
        0 4px 12px rgba(0,0,0,0.04);
}

.payment-option input{
    width:16px;
    height:16px;
}

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

.place-order-btn{
    width:100%;
    height:56px;

    border:none;
    border-radius:14px;

    background:#111;
    color:#fff;

    font-size:15px;
    font-weight:600;

    transition:0.3s ease;
}

.place-order-btn:hover{
    background:#000;

    transform:translateY(-1px);

    box-shadow:
        0 10px 20px rgba(0,0,0,0.10);
}

/* =========================
    NOTE
========================= */

.checkout-note{
    margin-top:16px;

    text-align:center;

    font-size:12px;
    line-height:1.7;

    color:#888;
}

.floating-toast-wrapper{

    position:fixed;

    top:30px;

    right:30px;

    z-index:999999;

    display:flex;

    flex-direction:column;

    gap:14px;
}


/* TOAST */

.floating-toast{

    min-width:340px;

    max-width:420px;

    padding:18px 20px;

    border-radius:18px;

    display:flex;

    align-items:center;

    gap:14px;

    color:#fff;

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    box-shadow:
    0 10px 40px rgba(0,0,0,.18);

    transform:
    translateX(120%) scale(.9);

    opacity:0;

    transition:.45s cubic-bezier(.19,1,.22,1);

    overflow:hidden;

    position:relative;
}


/* SHOW */

.floating-toast.show{

    transform:
    translateX(0) scale(1);

    opacity:1;
}


/* SUCCESS */

.floating-toast.success{

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

    border:
    1px solid rgba(200,169,107,.25);
}


/* ERROR */

.floating-toast.error{

    background:
    rgba(40,0,0,.88);

    border:
    1px solid rgba(255,77,77,.25);
}


/* ICON */

.toast-icon{

    width:24px;

    height:24px;

    flex-shrink:0;
}


/* TEXT */

.toast-content{

    flex:1;
}

.toast-title{

    font-size:15px;

    font-weight:600;

    margin-bottom:3px;
}

.toast-message{

    font-size:13px;

    opacity:.8;

    line-height:1.5;
}


/* PROGRESS */

.toast-progress{

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:3px;

    background:
    rgba(255,255,255,.08);
}

.toast-progress::after{

    content:'';

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:100%;

    background:#c8a96b;

    animation:toastProgress 3s linear forwards;
}

@keyframes toastProgress{

    from{
        width:100%;
    }

    to{
        width:0%;
    }
}



/* Pd Meta rid */

.pd-meta-grid{

    display:grid;

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

    gap:20px;

    margin-top:30px;
}

.pd-meta-item{

    background:#fafafa;

    padding:20px;

    border-radius:18px;

    border:1px solid #eee;
}

.pd-meta-item strong{

    display:block;

    margin-bottom:10px;

    color:#111;
}

.pd-meta-item span{

    color:#666;
}

/* Variaant Tags */

.variant-tags{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-top:15px;
}

.variant-tag{

    border:1px solid #ddd;

    background:#fff;

    padding:8px 14px;

    border-radius:50px;

    font-size:13px;

    font-weight:600;

    cursor:pointer;

    transition:0.3s ease;
}

.variant-tag:hover{

    border-color:#111;

    background:#111;

    color:#fff;
}

.variant-tag.active{

    background:#111;

    color:#fff;

    border-color:#111;
}

.dynamic-price{

    display:flex;

    align-items:center;

    gap:12px;

    margin-top:15px;
}

.current-price{

    font-size:24px;

    font-weight:700;

    color:#229c00;
}

/*-----user css ------*/

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

.auth-section{

    position:relative;

    overflow:hidden;

    background:
    radial-gradient(
        circle at top right,
        #f9f4ea 0%,
        #faf8f5 45%,
        #ffffff 100%
    );

    min-height:85vh;

    padding:80px 0;
}

.auth-section::before{

    content:"";

    position:absolute;

    width:550px;

    height:550px;

    border-radius:50%;

    background:rgba(184,134,11,.05);

    top:-200px;

    right:-150px;

    pointer-events:none;
}

/* =========================================
   WRAPPER
========================================= */

.auth-wrapper{

    min-height:700px;
}

/* =========================================
   LEFT PANEL
========================================= */

.auth-left{

    position:relative;

    width:100%;

    height:100%;

    min-height:700px;

    border-radius:32px;

    overflow:hidden;

    background:
    url("../images/login.png")
    center center / cover no-repeat;

    box-shadow:
    0 25px 60px rgba(0,0,0,.12);
}

/* =========================================
   DARK OVERLAY
========================================= */

.auth-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:70px;

    background:
    linear-gradient(
        to top,
        rgba(0,0,0,.75) 0%,
        rgba(0,0,0,.55) 35%,
        rgba(0,0,0,.15) 100%
    );

    color:#fff;
}

/* =========================================
   BADGE
========================================= */

.auth-badge{

    display:inline-flex;

    align-items:center;

    width:max-content;

    padding:10px 18px;

    border-radius:50px;

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

    backdrop-filter:blur(10px);

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

    font-size:13px;

    font-weight:500;

    letter-spacing:.5px;

    margin-bottom:25px;
}

/* =========================================
   HEADING
========================================= */

.auth-heading{

    font-size:54px;

    font-weight:700;

    line-height:1.15;

    margin-bottom:20px;

    color:#fff;

    max-width:520px;
}

/* =========================================
   DESCRIPTION
========================================= */

.auth-description{

    font-size:16px;

    line-height:1.8;

    color:rgba(255,255,255,.88);

    max-width:500px;

    margin-bottom:0;
}

/* =========================================
   HOVER EFFECT
========================================= */

.auth-left img{

    transition:transform .8s ease;
}

.auth-left:hover{

    transform:translateY(-3px);

    transition:.4s ease;
}


/* =========================================
   AUTH CARD
========================================= */

.auth-card{

    background:#ffffff;

    border-radius:32px;

    padding:45px;

    border:1px solid #f3f3f3;

    box-shadow:
    0 25px 60px rgba(0,0,0,.08);

    position:relative;

    transition:.35s ease;
}

.auth-card:hover{

    transform:translateY(-4px);

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

/* =========================================
   LOGO
========================================= */

.auth-logo{

    text-align:center;

    margin-bottom:30px;
}

.auth-logo img{

    max-height:80px;

    width:auto;
}

/* =========================================
   BRAND TEXT
========================================= */

.auth-brand-text{

    margin-top:15px;

    font-size:13px;

    letter-spacing:3px;

    text-transform:uppercase;

    color:#b8860b;

    font-weight:600;
}

.auth-brand-desc{

    margin-top:10px;

    margin-bottom:0;

    font-size:14px;

    color:#8a8a8a;

    line-height:1.7;
}

/* =========================================
   LOGIN / REGISTER TABS
========================================= */

.auth-tabs{

    display:flex;

    align-items:center;

    background:#f7f7f7;

    border-radius:50px;

    padding:5px;

    margin-bottom:35px;
}

.auth-tab{

    flex:1;

    height:48px;

    border:none;

    background:none;

    border-radius:50px;

    font-size:15px;

    font-weight:600;

    color:#777;

    transition:.3s;
}

.auth-tab:hover{

    color:#b8860b;
}

.auth-tab.active{

    background:#ffffff;

    color:#b8860b;

    box-shadow:
    0 5px 15px rgba(0,0,0,.06);
}

/* =========================================
   TITLE
========================================= */

.auth-title{

    font-size:32px;

    font-weight:700;

    color:#222;

    text-align:center;

    margin-bottom:12px;
}

/* =========================================
   SUBTITLE
========================================= */

.auth-subtitle{

    text-align:center;

    color:#7d7d7d;

    font-size:15px;

    line-height:1.7;

    margin-bottom:30px;
}

/* =========================================
   BENEFITS TITLE
========================================= */

.auth-benefits-title{

    margin-top:35px;

    margin-bottom:18px;

    text-align:center;

    font-size:15px;

    font-weight:600;

    color:#222;
}

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

.auth-features{

    display:grid;

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

    gap:12px;

    margin-top:0;
}

.auth-feature{

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    min-height:48px;

    padding:12px;

    border-radius:14px;

    background:#fafafa;

    border:1px solid #f0f0f0;

    color:#666;

    font-size:13px;

    transition:.3s;
}

.auth-feature:hover{

    border-color:#e0d3a4;

    background:#fffdf8;

    transform:translateY(-2px);
}

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

.auth-support{

    margin-top:35px;

    padding-top:25px;

    border-top:1px solid #eeeeee;

    text-align:center;
}

.auth-support small{

    display:block;

    color:#999;

    margin-bottom:8px;

    font-size:13px;
}

.auth-support a{

    text-decoration:none;

    color:#b8860b;

    font-weight:600;

    transition:.3s;
}

.auth-support a:hover{

    color:#9c7209;
}

/* =========================================
   GUEST TEXT
========================================= */

.auth-guest-text{

    margin-top:12px;

    margin-bottom:0;

    text-align:center;

    color:#8a8a8a;

    font-size:13px;

    line-height:1.6;
}

/* =========================================
   INFO TEXT
========================================= */

.auth-info{

    margin-top:18px;

    text-align:center;

    color:#888;

    font-size:13px;
}

.auth-info i{

    color:#b8860b;

    margin-right:5px;
}

/* =========================================
   FORM
========================================= */

.auth-form,
#loginForm{

    width:100%;

    margin:0;

}

.auth-field{

    margin-bottom:20px;

}

/* =========================================
   LABEL
========================================= */

.auth-label{

    display:block;

    margin-bottom:10px;

    font-size:14px;

    font-weight:600;

    color:#444;

    letter-spacing:.3px;

}


/* =========================================
   PHONE GROUP
========================================= */

.auth-phone-group{

    display:flex;

    align-items:center;

    border:1px solid #e7e7e7;

    border-radius:16px;

    background:#fff;

    overflow:hidden;

    transition:.3s ease;

}

.auth-phone-group:hover{

    border-color:#d6d6d6;

}

.auth-phone-group:focus-within{

    border-color:#b8860b;

    box-shadow:

    0 0 0 5px rgba(184,134,11,.08);

}

/* COUNTRY CODE */

.auth-phone-group .input-group-text{

    background:#fafafa;

    border:none;

    padding:0 18px;

    font-size:15px;

    font-weight:600;

    color:#222;

}

/* =========================================
   INPUT
========================================= */

.auth-input{

    height:58px;

    border:none !important;

    background:transparent;

    padding:0 18px;

    font-size:15px;

    color:#222;

    box-shadow:none !important;

}

.auth-input:focus{

    outline:none;

}

.auth-input::placeholder{

    color:#bbbbbb;

    font-weight:400;

}

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

.auth-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    height:58px;

    border:none;

    border-radius:50px;

    background:

    linear-gradient(

        135deg,

        #b8860b,

        #d4af37

    );

    color:#fff;

    font-size:15px;

    font-weight:600;

    letter-spacing:.4px;

    transition:.35s ease;

}

.auth-btn:hover{

    color:#fff;

    transform:translateY(-2px);

    box-shadow:

    0 15px 35px rgba(184,134,11,.30);

}

.auth-btn:focus{

    color:#fff;

    box-shadow:

    0 0 0 4px rgba(184,134,11,.15);

}

.auth-btn:disabled{

    opacity:.8;

    cursor:not-allowed;

}

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

.auth-outline-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    height:56px;

    border-radius:50px;

    border:1px solid #e5e5e5;

    background:#fff;

    color:#444;

    font-size:15px;

    font-weight:500;

    transition:.3s;

}

.auth-outline-btn:hover{

    background:#fafafa;

    border-color:#b8860b;

    color:#b8860b;

}

/* =========================================
   DIVIDER
========================================= */

.auth-divider{

    position:relative;

    text-align:center;

    margin:28px 0;

}

.auth-divider::before{

    content:"";

    position:absolute;

    left:0;

    right:0;

    top:50%;

    height:1px;

    background:#ececec;

}

.auth-divider span{

    position:relative;

    background:#fff;

    padding:0 16px;

    font-size:13px;

    color:#999;

}

/* =========================================
   GUEST INFO
========================================= */

.auth-guest-text{

    margin-top:12px;

    text-align:center;

    font-size:13px;

    color:#888;

    line-height:1.7;

}

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

.auth-btn.loading{

    pointer-events:none;

    opacity:.9;

}

.auth-btn .spinner-border{

    width:18px;

    height:18px;

}

/* =========================================
   REMOVE BOOTSTRAP DEFAULT
========================================= */

.auth-input:focus,

.auth-phone-group input:focus{

    border:none !important;

    outline:none !important;

    box-shadow:none !important;

}

/* =========================================
   OTP STEP
========================================= */

.auth-step{

    display:none;

    animation:authFade .35s ease;
}

.auth-step.active{

    display:block;
}

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

@keyframes authFade{

    from{

        opacity:0;

        transform:translateY(15px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* =========================================
   CHANGE NUMBER BUTTON
========================================= */

.auth-back{

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

    border:none;

    background:none;

    color:#b8860b;

    font-size:14px;

    font-weight:600;

    margin-bottom:25px;

    transition:.3s ease;
}

.auth-back:hover{

    color:#9c7209;
}

/* =========================================
   OTP GROUP
========================================= */

.auth-otp-group{

    display:flex !important;

    justify-content:center;

    align-items:center;

    gap:10px;

    margin:35px 0;
}

.auth-otp-input{

    width:44px !important;

    min-width:44px;

    max-width:64px;

    height:65px !important;

    border:2px solid #e6e6e6;

    border-radius:18px;

    text-align:center;

    font-size:28px;

    font-weight:700;

    background:#fff;

    outline:none;
}

.auth-otp-separator{

    width:8px;

    height:8px;

    border-radius:50%;

    background:#d4af37;

    margin:0 10px;
}

/* =========================================
   OTP BOX
========================================= */

.auth-otp-input{

    width:64px;

    height:70px;

    border:2px solid #ececec;

    border-radius:18px;

    background:#fff;

    text-align:center;

    font-size:28px;

    font-weight:700;

    color:#222;

    outline:none;

    transition:all .3s ease;
}

/* hover */

.auth-otp-input:hover{

    border-color:#d4af37;
}

/* focus */

.auth-otp-input:focus{

    border-color:#b8860b;

    box-shadow:
    0 0 0 5px rgba(184,134,11,.12);

    transform:translateY(-2px);
}

/* =========================================
   TIMER
========================================= */

.auth-timer{

    margin-top:30px;

    text-align:center;

    color:#888;

    font-size:14px;

    line-height:1.7;

}

/* =========================================
   TIMER VALUE
========================================= */

#authTimer{

    margin:10px 0;

    font-size:22px;

    font-weight:700;

    color:#222;

    letter-spacing:2px;

}

/* =========================================
   RESEND
========================================= */

.auth-resend{

    display:inline-block;

    color:#b0b0b0;

    cursor:not-allowed;

    transition:.3s;

    font-weight:500;

}

.auth-resend.active{

    color:#b8860b;

    cursor:pointer;

}

.auth-resend.active:hover{

    color:#9c7209;

}

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

.auth-verify-btn{

    margin-top:30px !important;

}

/* =========================================
   SUCCESS STATE
========================================= */

.auth-success{

    text-align:center;

    padding:40px 0;

}

.auth-success-icon{

    width:90px;

    height:90px;

    margin:auto;

    border-radius:50%;

    background:#28a745;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:36px;

    margin-bottom:20px;

}

.auth-success h4{

    font-size:28px;

    font-weight:700;

    margin-bottom:10px;

}

.auth-success p{

    color:#777;

}

.auth-mobile-tagline{

    display:none;
}
.auth-mobile-display{

    text-align:center;

    font-size:18px;

    font-weight:700;

    color:#222;

    letter-spacing:1px;

    margin-bottom:12px;
}
.auth-error{

    display:none;

    margin-top:8px;

    color:#dc3545;

    font-size:13px;

}

.auth-error.active{

    display:block;

}

.auth-mobile-preview{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:15px 18px;

    border:1px solid #ececec;

    border-radius:16px;

    background:#fcfcfc;

    margin-top:18px;

}

.auth-mobile-icon{

    width:46px;

    height:46px;

    border-radius:50%;

    background:#f8f4ea;

    color:#b8860b;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

}

.auth-mobile-value{

    font-weight:600;

    color:#222;

}

.auth-mobile-badge{

    color:#198754;

    font-size:13px;

    font-weight:600;

}

.auth-register-note{

    margin-top:20px;

    text-align:center;

    font-size:12px;

    color:#999;

    line-height:1.7;

}

.auth-register-note a{

    color:#b8860b;

    text-decoration:none;

}

.auth-register-note a:hover{

    text-decoration:underline;

}

.thank-section{

padding:80px 0;

background:#faf9f7;

}

.thank-card{

max-width:850px;

margin:auto;

background:#fff;

padding:60px;

border-radius:20px;

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

text-align:center;

}

.thank-icon{

width:90px;

height:90px;

margin:auto;

background:#f4f1eb;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

margin-bottom:25px;

}

.thank-icon svg{

width:42px;

height:42px;

color:#111;

}

.thank-card h1{

font-size:42px;

font-weight:700;

margin-bottom:15px;

}

.order-number{

display:inline-block;

padding:12px 25px;

background:#f7f7f7;

border-radius:50px;

margin-top:20px;

font-weight:600;

}

.thank-grid{

display:grid;

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

gap:20px;

margin-top:50px;

text-align:center;

}

.thank-grid div{

background:#fafafa;

padding:20px;

border-radius:15px;

}

.order-progress{

display:flex;

justify-content:space-between;

margin-top:50px;

gap:20px;

}

.order-progress div{

flex:1;

padding:20px;

border:1px solid #eee;

border-radius:15px;

}

.order-progress .active{

background:#111;

color:#fff;

}

.thank-actions{

display:flex;

justify-content:center;

gap:15px;

margin-top:50px;

}

.continue-btn{

padding:15px 35px;

background:#111;

color:#fff;

border-radius:50px;

text-decoration:none;

}

.track-btn{

padding:15px 35px;

border:1px solid #111;

color:#111;

border-radius:50px;

text-decoration:none;

}

@media(max-width:768px){

.thank-grid{

grid-template-columns:1fr 1fr;

}

.order-progress{

flex-direction:column;

}

.thank-actions{

flex-direction:column;

}

}

.load-more-wrap{
    text-align:center;
    margin-top:50px;
}

.load-more-btn{
    min-width:220px;
    height:52px;

    border:none;

    background:#111;
    color:#fff;

    font-size:14px;
    font-weight:600;

    border-radius:60px;

    cursor:pointer;

    transition:0.3s;
}

.load-more-btn:hover{
    transform:translateY(-2px);
}

.nl-founder-story{
    padding:120px 0;
    background:#faf8f5;
}


.nl-founder-story{
    position:relative;
    overflow:hidden;
}

.nl-bg-brand-text{
    position:absolute;
    top:80px;
    left:-50px;
    font-size:280px;
    font-weight:900;
    line-height:1;
    color:#d4af37;
    opacity:.03;
    letter-spacing:15px;
    pointer-events:none;
}

.nl-founder-story .container{
    position:relative;
    z-index:2;
}

.nl-founder-header{
    text-align:center;
    margin-bottom:60px;
}

.nl-founder-label{
    color:#b38b59;
    text-transform:uppercase;
    letter-spacing:4px;
    font-size:12px;
    font-weight:600;
}

.nl-founder-heading{
    font-size:60px;
    font-family:'Playfair Display',serif;
    color:#111;
    margin:20px 0;
}

.nl-founder-line{
    width:80px;
    height:2px;
    background:#d4af37;
    margin:auto;
}

.nl-founder-intro{
    max-width:900px;
    margin:0 auto 60px;
    text-align:center;
    font-size:34px;
    line-height:1.5;
    color:#111;
    font-family:'Playfair Display',serif;
}

.nl-founder-content{
    max-width:900px;
    margin:auto;
}

.nl-founder-content p{
    font-size:18px;
    line-height:2;
    color:#555;
    margin-bottom:25px;
}

.nl-founder-meaning{
    margin-top:20px;
}



.nl-meaning-title{
    text-align:center;
    font-size:110px;
    font-weight:700;
    color:#f1ede8;
    letter-spacing:15px;
    margin-bottom:40px;
}

.nl-meaning-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.nl-meaning-card{
    background:#fff;
    padding:40px;
    border-radius:20px;
    text-align:center;
    border:1px solid #eee;
    transition:.3s;
}

.nl-meaning-card:hover{
    transform:translateY(-8px);
}

.nl-meaning-card h4{
    color:#111;
    margin-bottom:15px;
    font-size:24px;
}

.nl-meaning-card p{
    color:#666;
    line-height:1.8;
}

.nl-founder-quote{
    max-width:900px;
    margin:80px auto;
    text-align:center;
    position:relative;
    padding:60px;
    background:#fff;
    border-radius:24px;
    border:1px solid #eee;
}

.nl-quote-mark{
    position:absolute;
    top:-30px;
    left:50%;
    transform:translateX(-50%);
    font-size:120px;
    font-family:'Playfair Display',serif;
    color:#d4af37;
    line-height:1;
}

.nl-founder-quote p{
    font-size:38px;
    line-height:1.5;
    color:#111;
    font-family:'Playfair Display',serif;
    margin-bottom:25px;
}

.nl-founder-quote span{
    display:block;
    max-width:700px;
    margin:auto;
    color:#666;
    font-size:17px;
    line-height:1.9;
}

.nl-pillar{
    text-align:center;
    border:1px solid rgba(255,255,255,.08);
    padding:45px 20px;
    transition:.4s;
}

.nl-pillar:hover{
    transform:translateY(-8px);
    border-color:#d6b36a;
}

.nl-pillar span{
    display:block;
    font-size:48px;
    color:#d6b36a;
    font-family:'Playfair Display',serif;
    margin-bottom:15px;
}

.nl-pillar h4{
    color:#fff;
    font-size:20px;
    margin:0;
}

.nl-brand-pillars{
    margin-top:80px;
}

.nl-pillars-header{
    text-align:center;
    margin-bottom:50px;
}

.nl-pillars-header h3{
    font-size:42px;
    font-family:'Playfair Display',serif;
    color:#111;
    margin-bottom:15px;
}

.nl-pillars-header p{
    max-width:650px;
    margin:auto;
    color:#777;
    line-height:1.8;
}

.nl-pillar-box{
    position:relative;
    height:100%;
    padding:45px 35px;
    background:#fff;
    border:1px solid #eee;
    border-radius:20px;
    transition:.4s;
    overflow:hidden;
}

.nl-pillar-box:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 40px rgba(0,0,0,.08);
}

.nl-pillar-number{
    position:absolute;
    top:20px;
    right:25px;
    font-size:70px;
    font-weight:700;
    color:rgba(212,175,55,.10);
    line-height:1;
}

.nl-pillar-box h4{
    font-size:24px;
    color:#111;
    margin-bottom:20px;
    font-family:'Playfair Display',serif;
    padding-right:50px;
}

.nl-pillar-box p{
    color:#666;
    line-height:1.9;
    margin-bottom:0;
}

/* ===================================
   WHY NEELOW EXISTS
=================================== */

.nl-exists-section{
    position:relative;
    padding:140px 0;
    background:#111111;
    overflow:hidden;
}

.nl-exists-bg-text{
    position:absolute;
    top:50%;
    left:40%;
    transform:translate(-50%,-50%);
    font-size:280px;
    font-weight:900;
    letter-spacing:15px;
    color:#ffffff;
    opacity:.03;
    white-space:nowrap;
    line-height:1;
    pointer-events:none;
    user-select:none;
}

.nl-exists-left{
    position:relative;
    z-index:2;
}

.nl-exists-right{
    position:relative;
    z-index:2;
}

.nl-exists-label{
    display:block;
    color:#d4af37;
    text-transform:uppercase;
    letter-spacing:4px;
    font-size:12px;
    margin-bottom:20px;
}

.nl-exists-left h2{
    font-size:64px;
    line-height:1.1;
    color:#fff;
    font-family:'Playfair Display',serif;
    margin:0;
}

.nl-exists-highlight{
    font-size:42px;
    line-height:1.4;
    color:#d4af37;
    font-family:'Playfair Display',serif;
    margin-bottom:40px;
}

.nl-exists-right p{
    color:rgba(255,255,255,.75);
    font-size:18px;
    line-height:2;
    margin-bottom:25px;
}

.nl-exists-line{
    width:80px;
    height:2px;
    background:#d4af37;
    margin-top:25px;
}

.nl-different-section{
    padding:140px 0;
    background:#faf8f5;
}

.nl-different-image img{
    width:100%;
    height:700px;
    object-fit:cover;
    border-radius:24px;
}

.nl-different-label{
    color:#d4af37;
    letter-spacing:4px;
    text-transform:uppercase;
    font-size:12px;
}

.nl-different-content h2{
    font-size:60px;
    margin:20px 0 40px;
    font-family:'Playfair Display',serif;
}

.nl-different-content p{
    font-size:18px;
    line-height:2;
    color:#666;
}

.nl-different-highlight{
    font-size:34px;
    line-height:1.5;
    color:#111;
    font-family:'Playfair Display',serif;
    margin:35px 0;
    padding-left:30px;
    border-left:3px solid #d4af37;
}

.nl-different-manifesto{
    padding:120px 0;
    text-align:center;
    background:#fff;
}

.nl-different-manifesto h3{
    font-size:36px;
    color:#777;
    font-family:'Playfair Display',serif;
}

.nl-manifesto-line{
    width:100px;
    height:2px;
    background:#d4af37;
    margin:40px auto;
}

.nl-different-manifesto h2{
    font-size:60px;
    line-height:1.4;
    color:#111;
    font-family:'Playfair Display',serif;
}

/* =====================================
   WHO NEELOW IS FOR
===================================== */

.nl-who-section{
    position:relative;
    padding:180px 0;
    background:url('../images/about-neelow.png') center center;
    background-size:cover;
    overflow:hidden;
}

.nl-who-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.72);
}

.nl-who-content{
    position:relative;
    z-index:2;
    text-align:center;
    color:#fff;
    max-width:1000px;
    margin:auto;
}

.nl-who-label{
    display:block;
    color:#d4af37;
    text-transform:uppercase;
    letter-spacing:4px;
    font-size:12px;
    margin-bottom:20px;
}

.nl-who-content h2{
    font-size:68px;
    font-family:'Playfair Display',serif;
    margin-bottom:60px;
}

.nl-who-list{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:25px;
    margin-bottom:70px;
}


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

.nl-contact-hero{
    position:relative;
    min-height:550px;
    display:flex;
    align-items:center;
    background:url('../images/neelow-contact-us.png') center center;
    background-size:cover;
    overflow:hidden;
}

.nl-contact-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.65);
}

.nl-contact-hero-content{
    position:relative;
    z-index:2;
    max-width:800px;
    color:#fff;
}

.nl-contact-label{
    display:inline-block;
    color:#d4af37;
    letter-spacing:4px;
    text-transform:uppercase;
    font-size:12px;
    margin-bottom:20px;
}

.nl-contact-hero-content h1{
    font-size:72px;
    line-height:1.1;
    font-family:'Playfair Display',serif;
    margin-bottom:25px;
}

.nl-contact-hero-content p{
    font-size:20px;
    line-height:1.9;
    color:rgba(255,255,255,.85);
}

@media(max-width:991px){

    .nl-contact-hero{
        min-height:450px;
    }

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

}

@media(max-width:576px){

    .nl-contact-hero-content h1{
        font-size:36px;
    }

    .nl-contact-hero-content p{
        font-size:16px;
    }

}
.nl-who-item{
    padding:25px;
    border:1px solid rgba(255,255,255,.15);
    background:rgba(255,255,255,.05);
    backdrop-filter:blur(8px);
    font-size:18px;
}

/* =====================================
   CONTACT INFO
===================================== */

.nl-contact-info{
    padding:100px 0;
    background:#fff;
}

.nl-contact-card{
    text-align:center;
    padding:45px 35px;
    border:1px solid #eee;
    border-radius:20px;
    height:100%;
    transition:.4s;
}

.nl-contact-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 40px rgba(0,0,0,.08);
}

.nl-contact-icon{
    width:70px;
    height:70px;
    margin:0 auto 25px;
    border-radius:50%;
    background:#faf8f5;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    color:#d4af37;
}

.nl-contact-card h4{
    margin-bottom:15px;
    font-family:'Playfair Display',serif;
}

.nl-contact-card p{
    color:#666;
    margin:0;
}

.nl-who-divider{
    width:100px;
    height:2px;
    background:#d4af37;
    margin:0 auto 50px;
}

.nl-who-description{
    max-width:850px;
    margin:auto;
    font-size:18px;
    line-height:2;
    color:rgba(255,255,255,.85);
    padding-bottom: 50px;
}

.nl-who-quote{
    margin-top:80px;
    font-size:30px;
    font-family:'Playfair Display',serif;
    color:rgba(255,255,255,.75);
}


/* =====================================
   CONTACT FORM SECTION
===================================== */

.nl-contact-form-section{
    padding:120px 0;
    background:#faf8f5;
}

.nl-contact-image{
    position:relative;
    overflow:hidden;
    border-radius:24px;
}

.nl-contact-image img{
    width:100%;
    height:700px;
    object-fit:cover;
    display:block;
}

.nl-contact-image::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(
        to top,
        rgba(0,0,0,.75),
        rgba(0,0,0,.10)
    );
}

.nl-contact-image-content{
    position:absolute;
    left:40px;
    bottom:40px;
    color:#fff;
    z-index:2;
}

.nl-contact-image-content span{
    color:#d4af37;
    letter-spacing:4px;
    font-size:12px;
    text-transform:uppercase;
}

.nl-contact-image-content h3{
    margin-top:15px;
    font-size:34px;
    line-height:1.4;
    font-family:'Playfair Display',serif;
}

.nl-contact-form-wrap{
    padding-left:50px;
}

.nl-form-label{
    color:#d4af37;
    letter-spacing:4px;
    text-transform:uppercase;
    font-size:12px;
}

.nl-contact-form-wrap h2{
    font-size:56px;
    margin:20px 0 40px;
    font-family:'Playfair Display',serif;
}

.nl-form-group{
    margin-bottom:25px;
}

.nl-form-group .form-control{
    height:58px;
    border:none;
    border-radius:12px;
    background:#fff;
    box-shadow:none;
    padding:15px 20px;
}

.nl-form-group textarea.form-control{
    height:auto;
    resize:none;
    padding-top:18px;
}

.nl-form-group .form-control:focus{
    border:1px solid #d4af37;
    box-shadow:none;
}

.nl-contact-btn{
    background:#111;
    color:#fff;
    border:none;
    padding:16px 40px;
    border-radius:50px;
    transition:.3s;
}

.nl-contact-btn:hover{
    background:#d4af37;
    color:#111;
}

@media(max-width:991px){

    .nl-contact-form-wrap{
        padding-left:0;
        margin-top:50px;
    }

    .nl-contact-image img{
        height:500px;
    }

    .nl-contact-form-wrap h2{
        font-size:40px;
    }

}
.nl-who-final{
    margin-top:25px;
    font-size:62px;
    line-height:1.3;
    color:#fff;
    font-family:'Playfair Display',serif;
}

@media(max-width:991px){

    .nl-who-content h2{
        font-size:44px;
    }

    .nl-who-final{
        font-size:40px;
    }

    .nl-who-list{
        grid-template-columns:1fr;
    }

}

@media(max-width:576px){

    .nl-who-section{
        padding:100px 0;
    }

    .nl-who-final{
        font-size:30px;
    }

    .nl-who-quote{
        font-size:22px;
    }

}


@media(max-width:1200px){

    .nl-exists-bg-text{
        font-size:220px;
    }

}

@media(max-width:991px){

    .nl-exists-section{
        padding:100px 0;
    }

    .nl-exists-bg-text{
        font-size:140px;
        letter-spacing:10px;
    }

    .nl-exists-left{
        margin-bottom:40px;
    }

    .nl-exists-left h2{
        font-size:46px;
    }

    .nl-exists-highlight{
        font-size:30px;
    }

}

@media(max-width:576px){

    .nl-exists-bg-text{
        font-size:80px;
        letter-spacing:5px;
    }

    .nl-exists-left h2{
        font-size:34px;
    }

    .nl-exists-highlight{
        font-size:24px;
    }

    .nl-exists-right p{
        font-size:16px;
    }

}

@media(max-width:991px){

    .nl-exists-title{
        font-size:42px;
    }

    .nl-exists-statement{
        font-size:28px;
    }

    .nl-exists-pillars{
        grid-template-columns:1fr;
    }

}

@media(max-width:576px){

    .nl-exists-section{
        padding:90px 0;
    }

    .nl-exists-title{
        font-size:34px;
    }

    .nl-exists-statement{
        font-size:22px;
    }

    .nl-exists-content p{
        font-size:16px;
    }

}

@media(max-width:991px){

    .nl-founder-heading{
        font-size:42px;
    }

    .nl-founder-intro{
        font-size:24px;
    }

    .nl-meaning-grid{
        grid-template-columns:1fr;
    }

    .nl-meaning-title{
        font-size:60px;
        letter-spacing:8px;
    }

}

.nl-floating-contact{
    position:fixed;
    right:25px;
    bottom:25px;
    z-index:999;
    background:#d4af37;
    color:#111;
    padding:14px 22px;
    border-radius:50px;
    text-decoration:none;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:10px;
    box-shadow:0 10px 30px rgba(0,0,0,.2);
    transition:.3s;
}

.nl-floating-contact:hover{
    background:#111;
    color:#fff;
    text-decoration:none;
    transform:translateY(-3px);
}

@media(max-width:576px){

    .nl-floating-contact{
        padding:12px 18px;
        font-size:14px;
    }

}


/* ===========================
   POLICY PAGES
=========================== */

.nl-policy-hero{
    background:#111111;
    padding:120px 0;
    text-align:center;
}

.nl-policy-header{
    max-width:800px;
    margin:auto;
}

.nl-policy-label{
    display:inline-block;
    color:#d4af37;
    text-transform:uppercase;
    letter-spacing:4px;
    font-size:12px;
    margin-bottom:20px;
}

.nl-policy-header h1{
    color:#fff;
    font-size:64px;
    margin-bottom:20px;
    font-family:'Playfair Display',serif;
}

.nl-policy-header p{
    color:rgba(255,255,255,.75);
    font-size:18px;
    line-height:1.8;
}

.nl-policy-content{
    background:#faf8f5;
    padding:100px 0;
}

.nl-policy-card{
    background:#fff;
    border-radius:24px;
    padding:60px;
    box-shadow:0 10px 40px rgba(0,0,0,.05);
}

.nl-policy-section{
    margin-bottom:50px;
}

.nl-policy-section:last-child{
    margin-bottom:0;
}

.nl-policy-section h2{
    font-size:30px;
    margin-bottom:20px;
    color:#111;
    font-family:'Playfair Display',serif;
}

.nl-policy-section p{
    color:#666;
    line-height:2;
}

.nl-policy-section ul,
.nl-policy-section ol{
    margin:0;
    padding-left:20px;
}

.nl-policy-section li{
    margin-bottom:12px;
    color:#555;
    line-height:1.8;
}

.nl-policy-note{
    margin-top:40px;
    background:#faf8f5;
    border-left:4px solid #d4af37;
    padding:25px;
    color:#555;
    line-height:1.8;
    border-radius:12px;
}

@media(max-width:768px){

    .nl-policy-header h1{
        font-size:40px;
    }

    .nl-policy-card{
        padding:30px;
    }

}

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

@media(max-width:768px){

    .sr-container{

        padding:40px 15px;

    }

    .sr-title h2{

        font-size:34px;

    }

    .sr-search-box input{

        height:60px;

        font-size:16px;

    }
    
      .sr-results{

        grid-template-columns:1fr;

}
    .sr-product{

        gap:15px;

    }

    .sr-product-image{

        width:70px;

    }

    .sr-product-image img{

        height:90px;

    }

    .sr-product-content h4{

        font-size:18px;

    }

}