:root{
  --primary:#0B0B0B;      /* Deep black */
  --secondary:#111111;    /* Dark background */
  --accent:#C6A75E;       /* Royal Gold */
  --text-light:#F5F5F3;   /* Warm white text */
  --text-grey:#999999;
}

body{
  background:var(--primary);
  color:var(--text-light);
  opacity:0;
  transition:opacity 0.4s ease;
  animation:fadePage 0.6s ease forwards;

  display:flex;
  flex-direction:column;
  min-height:100vh;
}



body.fade-in{
  opacity:1;
}

body.fade-out{
  opacity:0;
}



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

/* =========================
   EMPIRE06 CINEMATIC HERO
========================= */



/* Content */
.hero-content{
  position: relative;
  z-index: 2;
  color: #ffffff;
  padding: 0 20px;
  margin-top: -20px;   /* smoother than transform */
  text-align: center;
}

/* Headline */
.hero-content h1{
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
  font-family: "Cinzel", serif;
  font-size: 30px;      /* slightly bigger for impact */
  letter-spacing: 4px;  /* 5px was a bit too wide */
  margin-bottom: 12px;
  line-height: 1.3;
}

/* Tagline */
.hero-content p{
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
  font-family: "Montserrat", sans-serif;
  font-size: 13px;      /* slightly improved readability */
  letter-spacing: 1.5px;
  color: #E5E5E5;       /* softer than pure white */
  margin-bottom: 28px;
  line-height: 1.6;
}

/* Gold Button */
.hero-btn{
  display:inline-block;
  padding:14px 28px;
  background:linear-gradient(135deg,#C6A75E,#A8832F);
  color:#000;
  font-family:"Montserrat", sans-serif;
  font-weight:600;
  letter-spacing:2px;
  text-decoration:none;
  border-radius:6px;
  transition:0.3s ease;
}

.hero-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 25px rgba(198,167,94,0.4);
}

/* Smooth bottom fade (important) */
.hero::after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:120px;   /* increase height */
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(11,11,11,0.6) 50%,
    var(--primary) 100%
  );
  pointer-events:none;
}

/* ===== FEATURED ===== */
.featured{
  text-align:center;
  padding:30px 18px 10px;
}


.title{
  font-family:"Playfair Display", serif;
  font-size:18px;
  font-weight:500;
  letter-spacing:4px;
}

.subtitle{
font-size:13px;
letter-spacing:1px;
line-height:1.6;
max-width:320px;
margin:auto;
}

.gold-line{
  width:60px;
  height:2px;
  background:var(--accent);
  margin:10px auto 12px;
  border-radius:20px;
}

/* =========================
   PRODUCT GRID
========================= */

.products{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
  padding:20px 0 40px;
}


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

.card{
  background:linear-gradient(145deg,#141414,#0f0f0f);
  border:1px solid rgba(212,175,55,0.15);
  padding:12px;
  border-radius:12px;
  transition:all .35s ease;
  position:relative;
  overflow:hidden;
}


/* HOVER EFFECT */

.card:hover{

  transform:translateY(-8px);

  border:1px solid var(--accent);

  box-shadow:
  0 20px 45px rgba(0,0,0,0.7),
  0 0 18px rgba(212,175,55,0.25);

}


/* GOLD BOTTOM LINE */

.card::after{
content:"";
position:absolute;
bottom:8px;
left:50%;
transform:translateX(-50%);
width:30px;
height:2px;
background:var(--accent);
opacity:0.8;
}


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

.card img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  background:#1a1a1a;
  border-radius:10px;
}


/* =========================
   NAME
========================= */

.card h3{

  font-family:"Cinzel", serif;
  font-size:13px;
  font-weight:600;
  letter-spacing:1.3px;
  text-transform:uppercase;

  margin-top:12px;

  line-height:1.35;

  color:var(--text-light);

  text-align:center;

}


/* =========================
   PRICE
========================= */

.price{

  font-size:18px;
  font-weight:700;

  margin-top:8px;

  letter-spacing:0.6px;

  color:var(--accent);

  text-align:center;

}

/* REMOVE BUTTON */


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


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

.luxury-features{
  padding:30px 0px 30px;
  text-align:center;
  margin-top:10px;
  background:#0B0B0B;
}
/* ===== BRAND PROMISE TEXT ===== */

.brand-promise{
  color:var(--accent);
  font-family:"Cinzel", serif;
  letter-spacing:2px;
  font-size:12px;
  text-transform:uppercase;
  text-align:center;
  margin-bottom:30px;   /* 🔥 gap here */
}

/* feature block */
.feature-item{
  margin-bottom:18px;
}

/* icon circle */
.feature-icon{
  width:60px;
  height:60px;
  margin:0 auto 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  border:1px solid rgba(212,175,55,0.25);
  background:#0B0B0B;
  transition:all 0.4s ease;
}

/* icon image */
.feature-icon img{
  width:24px;
  height:24px;
  filter:brightness(0) saturate(100%) invert(76%) sepia(28%) saturate(650%) hue-rotate(5deg) brightness(95%) contrast(90%);
}

/* text */
.feature-item p{
  font-size:12px;
  letter-spacing:2px;
  font-weight:600;
  text-transform:uppercase;
  color:#C6A75E;   /* GOLD TEXT */
  font-family:'Cinzel', serif;
}

/* hover effect */
.feature-item:hover .feature-icon{
  border:1px solid #D4AF37;
  transform:translateY(-6px);
  box-shadow:0 0 10px rgba(212,175,55,0.3);
}
/* ===== FINAL CINEMATIC PACKAGING ===== *


/* ===== ULTRA TACTICAL FOOTER ===== */

.footer{
  position:relative;
  background:#0d0d0d;

  padding:22px 0;  /* 🔥 controlled height */

  width:100%;          /* 🔥 correct */
  max-width:none;
  margin:0;

  box-sizing:border-box;

  margin-top:auto;     /* 🔥 bottom stick */

  border-top-left-radius:18px;
  border-top-right-radius:18px;
  border-top:1px solid rgba(198,167,94,0.25);

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

  overflow:hidden;
  z-index:10;
}
.social-icon{
  width:42px;
  height:42px;
  border-radius:8px;
  background:#141414;
   border-top:1px solid rgba(198,167,94,0.3);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;            /* 🔥 important */
}

.social-icon img{
  width:20px;
  height:20px;
  object-fit:contain;         /* 🔥 important */
  display:block;
}

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

.footer-links{
  display:flex;
  justify-content:space-between;
  width:100%;
  max-width:100%;
  margin:20px auto;
  flex-wrap:wrap;
  gap:15px;
}

.footer-links a{
  font-family:"Cinzel", serif;
  font-size:15px;
  font-weight:800;
  letter-spacing:5px;
  text-transform:uppercase;
  color:#e0e0e0;
  text-decoration:none;
  position:relative;
  display:inline-block;
  transition:0.3s ease;
}

/* SUPPORT right */
.footer-links a:nth-child(2){
  justify-self:end;
}

/* POLICIES center */
.footer-links a:nth-child(3){
  grid-column:1 / 3;
  justify-self:center;
}


/* Copyright */
.footer-copy{
  text-align:center;
  font-size:11px;
  letter-spacing:2px;
  color:#777;
  margin-top:25px;
}

/* Sharp underline effect */



/* ===== IMAGE HOVER ===== */

.click-img{
  cursor:pointer;
  transition:0.3s ease;
}

.click-img:hover{
  transform:scale(1.04);
}

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





/* ================================
   SUBTLE LUXURY ANIMATIONS
================================ */

/* Page Fade In */

@keyframes fadePage{
  from{
    opacity:0;
    transform:translateY(8px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* Product Cards Soft Reveal */
.card{
  position:relative;
  overflow:hidden;
}

.card:nth-child(1){ animation-delay:0.1s; }
.card:nth-child(2){ animation-delay:0.2s; }
.card:nth-child(3){ animation-delay:0.3s; }
.card:nth-child(4){ animation-delay:0.4s; }

@keyframes cardReveal{
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* Gold Line Animation */
.gold-line{
  animation:goldGrow 0.8s ease forwards;
  transform-origin:center;
   background:var(--accent);
}

@keyframes goldGrow{
  from{
    width:0;
    opacity:0;
  }
  to{
    width:90px;
    opacity:1;
  }
}


/* ==========================
   PREMIUM FEATURED CARDS
========================== */


/* Button Lift */
.card .btn{
  transition:0.3s ease;
}

.card .btn:hover{
  transform:translateY(-3px);
  box-shadow:0 6px 18px rgba(0,0,0,0.15);
}

/* Gold Divider Under Price */
.price{
  position:relative;
  display:inline-block;
}


/* =========================
   SMOOTH PAGE TRANSITION
========================= */



body.fade-in{
  opacity:1;
}

body.fade-out{
  opacity:0;
}
.card .btn{
  display:none;
}
/* ===== CART BUTTON ===== */

.cart-btn{
  position:relative;
  background:transparent;
  border:none;
  cursor:pointer;
  color:var(--text-light);
  transition:0.3s ease;
}

.cart-btn:hover{
  color:var(--accent);
  transform:translateY(-2px);
}

.cart-count{
  position:absolute;
  top:-6px;
  right:-8px;
  background:var(--accent);
  color:white;
  font-size:10px;
  font-weight:600;
  padding:3px 6px;
  border-radius:20px;
}
/* ===== PRODUCT SLIDER ===== */

.media-slider{
  position:relative;
  width:100%;
}

.slides{
  position:relative;
}

.slide{
  display:none;
}

.slide.active{
  display:block;
}

.slide img,
.slide video{
  width:100%;
  border-radius:20px;
  background:#141414;
}

/* Dots Container */
.dots{
  text-align:center;
  margin-top:15px;
}

/* Default Dot */
.dot{
  height:8px;
  width:8px;
  margin:0 6px;
  background:rgba(255,255,255,0.25);
  border-radius:50%;
  display:inline-block;
  cursor:pointer;
  transition:all 0.35s ease;
}

/* Active Dot (Luxury Gold) */
.dot.active{
  background:var(--accent);
  transform:scale(1.35);
  box-shadow:0 0 8px rgba(198,167,94,0.6);
}
/* =========================
   SUPPORT PAGE PREMIUM
========================= */

.support-hero{
  text-align:center;
  padding:60px 20px 30px;
}

.support-hero h1{
  font-family:"Cinzel", serif;
  font-size:28px;
  letter-spacing:5px;
}

.support-hero p{
  margin-top:10px;
  color:var(--accent);
  letter-spacing:2px;
  font-size:12px;
}

.support-section{
  padding:30px 20px;
  display:flex;
  justify-content:center;
}

.support-box{
  width:100%;
  max-width:720px;
  background:var(--secondary);
  padding:30px;
  border-radius:18px;
  border:1px solid rgba(198,167,94,0.15);
  box-shadow:0 20px 60px rgba(0,0,0,0.6);
}

.support-box h2{
  font-family:"Cinzel", serif;
  letter-spacing:3px;
  margin-bottom:20px;
}

.support-form input,
.support-form select,
.support-form textarea{
  width:100%;
  padding:14px;
  margin-bottom:15px;
  background:#141414;
  border:1px solid rgba(255,255,255,0.08);
  color:var(--text-light);
  border-radius:10px;
  transition:0.3s ease;
}

.support-form input:focus,
.support-form select:focus,
.support-form textarea:focus{
  border:1px solid var(--accent);
  outline:none;
}

.support-form textarea{
  min-height:120px;
  resize:none;
}

.support-form button{
  width:100%;
  padding:14px;
  background:linear-gradient(135deg,#C6A75E,#A8832F);
  border:none;
  color:#000;
  font-weight:600;
  letter-spacing:2px;
  border-radius:10px;
  cursor:pointer;
  transition:0.3s ease;
}

.support-form button:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 25px rgba(198,167,94,0.4);
}

.support-btn{
  display:inline-block;
  margin-top:20px;
  padding:14px 22px;
  background:linear-gradient(135deg,#C6A75E,#A8832F);
  color:#000;
  font-weight:600;
  letter-spacing:2px;
  border-radius:10px;
  text-decoration:none;
  transition:0.3s ease;
}

.support-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 25px rgba(198,167,94,0.4);
}
/* ==========================
   RETURN PAGE – PREMIUM SYSTEM
========================== */

.return-page{
  background:linear-gradient(to bottom,#000,#0b0b0b);
  color:#fff;
  padding:10px 0 0;
  width:100%;
  max-width:100%;
  margin:0;


  position:relative;
}

/* subtle center glow */
.return-page::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:300px;
  height:200px;
  background:radial-gradient(
    circle,
    rgba(198,167,94,0.08),
    transparent 70%
  );
  pointer-events:none;
}

/* ==========================
   HEADING
========================== */

.return-page h1{
  font-family:"Cinzel", serif;
  font-size:28px;
  letter-spacing:5px;
  text-align:center;
  margin-bottom:12px;
}

.return-page .subtitle{
  text-align:center;
  color:#888;
  font-size:12px;
  letter-spacing:3px;
  margin-bottom:35px;
}

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

.return-form{
  display:flex;
  flex-direction:column;
  gap:20px;

  background:rgba(255,255,255,0.02);
  padding:25px;
  border-radius:18px;

  border:1px solid rgba(255,255,255,0.06);

  box-shadow:0 15px 40px rgba(0,0,0,0.6);
}

/* ==========================
   LABELS
========================== */

.return-form label{
  font-size:11px;
  letter-spacing:2px;
  color:var(--accent);
}

/* ==========================
   INPUTS
========================== */

.return-form input,
.return-form select{
  width:100%;
  padding:15px 16px;

  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  color:#fff;

  border-radius:16px;
  font-size:14px;

  transition:all 0.3s ease;
}

/* focus premium glow */
.return-form input:focus,
.return-form select:focus{
  outline:none;
  border:1px solid var(--accent);
  box-shadow:0 0 18px rgba(198,167,94,0.35);
}

/* ==========================
   FILE INPUT
========================== */

.return-form input[type="file"]{
  background:rgba(255,255,255,0.03);
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.08);
}

/* upload button */
.return-form input[type="file"]::-webkit-file-upload-button{
  background:linear-gradient(135deg,#C6A75E,#A8832F);
  border:none;
  color:#000;
  padding:8px 14px;
  border-radius:20px;
  font-size:12px;
  cursor:pointer;
  transition:0.3s ease;
}

.return-form input[type="file"]::-webkit-file-upload-button:hover{
  box-shadow:0 0 12px rgba(198,167,94,0.6);
}

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

.return-form .btn-gold{
  width:100%;
  padding:18px;

  border:none;
  border-radius:50px;

  font-family:"Cinzel", serif;
  font-size:14px;
  letter-spacing:3px;
  font-weight:700;

  background:linear-gradient(135deg,#C6A75E,#A8832F);
  color:#000;

  cursor:pointer;

  box-shadow:
    0 0 18px rgba(198,167,94,0.4),
    0 10px 30px rgba(0,0,0,0.7);

  transition:all 0.35s ease;
}

/* hover */
.return-form .btn-gold:hover{
  transform:translateY(-4px);
  box-shadow:
    0 0 28px rgba(198,167,94,0.7),
    0 14px 40px rgba(0,0,0,0.8);
}

/* click */
.return-form .btn-gold:active{
  transform:scale(0.96);
}

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




/* ===== MOBILE HERO FOCUS FIX ===== */

@media (max-width:768px){

  .hero img{
  object-position:center 60%;
}

}
/* ==========================
   SCROLLING OFFER STRIP
========================== */

.offer-strip{
  width:100%;
  background:#000000;   /* Pure black */
  overflow:hidden;
  border:none;
}

.offer-track{
  display:flex;
  align-items:center;
  gap:40px;
  white-space:nowrap;
  padding:8px 0;
  animation:scrollLeft 22s linear infinite;
}

.offer-track span{
  color:#ffffff;   /* Full white text */
  font-size:11px;
  letter-spacing:2px;
  font-weight:600;
}

.offer-track .dot{
  color:#ffffff;   /* Dot also white */
  opacity:0.6;
  font-size:14px;
}

@keyframes scrollLeft{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}

.offer-strip:hover .offer-track{
  animation-play-state:paused;
}
/* =========================
GLOBAL
========================= */

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


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

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

.menu-dropdown{
  position:fixed;
  top:0;                     /* important */
  left:-260px;
  width:260px;
  height:100vh;

  background:#0b0b0b;
  backdrop-filter:blur(8px);

  padding:110px 22px 40px;   /* header space */

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

  transition:all 0.45s ease;

  z-index:99999;

  overflow-y:auto;
  -webkit-overflow-scrolling:touch;

  box-shadow:40px 0 80px rgba(0,0,0,0.9);
}

/* ===== MENU OPEN ===== */

.menu-dropdown.active{
  left:0;
}

/* ===== MENU LINKS ===== */

.menu-dropdown a{
  text-decoration:none;
  color:#ffffff;

  font-family:"Cinzel", serif;
  letter-spacing:2px;

  padding:14px 16px;

  border-bottom:1px solid rgba(255,255,255,0.08);

  transition:0.35s ease;
}

/* ===== HOVER EFFECT ===== */

.menu-dropdown a:hover{
  color:var(--accent);
  transform:translateX(6px);
}
/* =========================
BUTTON
========================= */

.btn-gold{
margin-top:10px;
padding:14px;
border:none;
background:#d4af37;
color:black;
font-weight:700;
letter-spacing:1px;
cursor:pointer;
border-radius:6px;
transition:0.3s;
}

.btn-gold:hover{
background:#e6c45c;
}
/* ===== GLOBAL BUTTON SYSTEM (SCOPED) ===== */

.product-buttons button,
.btn,
.hero-btn,
.btn-main{
  width:100%;
  height:58px;

  border-radius:40px;
  border:2px solid #C8A34A;

  background:#C8A34A;
  color:#000;

  font-family:'Cinzel', serif;
  font-size:13px;
  letter-spacing:2px;

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

  box-shadow:0 0 15px rgba(200,163,74,.35);
}

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

.footer-social{
display:flex;
justify-content:center;
gap:20px;
margin-top:auto;
}

.footer-social img{
width:22px;
}

.footer-links{
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
}

.footer-links a{
color:#ccc;
text-decoration:none;
font-size:12px;
}

.footer-links a:hover{
color:#d4af37;
}

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

.top-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:70px;        /* header height increase */
  padding:0 18px;
  background:#000;
  position:sticky;
  top:0;
  z-index:1000;
}

.brand-block{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
}

.brand-logo{
  height:150px;        /* logo bigger */
  width:auto;
  display:block;
}
.icon-btn{
  display:flex;
  align-items:center;
  justify-content:center;

  width:38px;
  height:38px;

  font-size:20px;
  text-decoration:none;

  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:8px;

  color:#ffffff;
  cursor:pointer;

  transition:all 0.25s ease;
}

.icon-btn:hover{
  border:1px solid var(--accent);
  color:var(--accent);
  background:rgba(198,167,94,0.08);
  transform:translateY(-1px);
}


/* PAYMENT SELECT */

select{
width:100%;
padding:14px;
border-radius:12px;
border:1px solid #333;
background:#111;
color:#fff;
font-size:14px;
outline:none;
appearance:none;
cursor:pointer;
}

select:focus{
border:1px solid #C6A75E;
box-shadow:0 0 0 1px rgba(198,167,94,0.4);
}

/* GOLD ARROW */

select{
background-image:url("data:image/svg+xml;utf8,<svg fill='%23C6A75E' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
background-repeat:no-repeat;
background-position:right 14px center;
background-size:18px;
}


.order-card{
  background:#111;
  padding:15px;
  margin-top:15px;
  border-radius:8px;
}

.close-btn{
position:absolute;
top:20px;
left:20px;

background:none;
border:none;

color:white;
font-size:28px;
font-weight:300;

cursor:pointer;

line-height:1;
}

.close-btn:hover{
color:#C6A75E;
}

.btn-loader{
display:none;
width:18px;
height:18px;
border:2px solid #000;
border-top:2px solid transparent;
border-radius:50%;
animation:spin 0.8s linear infinite;
margin-left:8px;
}

@keyframes spin{
from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}
.story-section{
padding:20px 20px;
text-align:center;
background:#0B0B0B;
}

.story-heading{
font-family:"Cinzel", serif;
font-size:20px;
letter-spacing:6px;
color:#fff;
margin-bottom:8px;
}

.story-sub{
font-size:12px;
letter-spacing:2px;
color:#aaa;
margin-bottom:30px;
}

.story-img{
width:100%;
max-width:850px;
border-radius:10px;
margin:0 auto 15px;
display:block;
}

/* same gold line like packaging */

.gold-divider{
width:90px;
height:2px;
margin:12px auto 25px;
background:linear-gradient(
to right,
transparent,
#C6A75E,
transparent
);
}
.card{
text-decoration:none !important;
color:var(--text-light) !important;
}

.card:visited{
text-decoration:none !important;
color:var(--text-light) !important;
}

.card:hover{
text-decoration:none !important;
}
.card{
  position: relative;
}

.tag{
  position: absolute;
  top: 10px;
  left: 10px;
  background: #C8A34A;
  color: black;
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 600;
}
.tag{
  position:absolute;
  top:10px;
  left:10px;
  background:#C8A34A;
  color:#000;
  font-size:10px;
  padding:5px 10px;
  border-radius:20px;
  font-weight:700;
  letter-spacing:1px;
}
.card{
  position:relative;
}
.hero{
  position: relative;
  height: 75vh;
  overflow: hidden;
}

.hero-slider{
  position: absolute;
  width: 100%;
  height: 100%;
}

.slide{
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}

.slide.active{
  opacity: 1;
}
.tabs{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-bottom:30px;
}

.tab-btn{
  padding:12px 22px;
  border-radius:30px; /* 🔥 rounded pill */
  border:1px solid rgba(255,255,255,0.1);
  background:var(--secondary);
  color:var(--text-grey);
  cursor:pointer;
  font-family:"Cinzel", serif;
  letter-spacing:1.5px;
  font-size:13px;
  transition:all 0.3s ease;
}

/* hover feel (premium micro interaction) */
.tab-btn:hover{
  color:var(--text-light);
  border-color:var(--accent);
}

/* active state */
.tab-btn.active{
  background:var(--accent);
  color:#000;
  border-color:var(--accent);
  box-shadow:0 4px 18px rgba(198,167,94,0.35);
}

/* content */
.tab-content{
  display:none;
  animation:fadeIn 0.4s ease;
}

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

/* smooth animation */
@keyframes fadeIn{
  from{
    opacity:0;
    transform:translateY(10px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}
div:empty{
  display:none;
}
/* ===== FOOTER FINAL FIX ===== */

.footer{
  width:100%;
  max-width:100%;
  margin:0;
  padding:25px 0;

  background:#0D0D0D;

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

  box-sizing:border-box;
}

/* inner content center + control */
.footer-links{
  width:100%;
  max-width:600px;
  margin:auto;

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

  text-align:center;
}

/* links style */
.footer-links a{
  text-decoration:none;
  color:#aaa;
  font-size:12px;
  letter-spacing:2px;
  transition:0.3s;
}

.footer-links a:hover{
  color:#C6A75E;
}

/* social section fix */
.footer-social{
  display:flex;
  justify-content:center;
  gap:18px;
  margin-bottom:15px;
}

/* remove side gap issue (mobile killer fix) */
@media(max-width:768px){
  .footer{
    padding:22px 0;
  }
}
/* ==========================
   🔥 PREMIUM CHECKOUT UI
========================== */

/* GLASS BOX */
.box{
  background:linear-gradient(145deg,#0a0a0a,#111);
  padding:30px;
  border-radius:16px;
  margin-bottom:30px;
  border:1px solid rgba(212,175,55,0.15);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.02),
    0 20px 40px rgba(0,0,0,0.8);
  backdrop-filter: blur(6px);
  transition:0.4s;
}

.box:hover{
  transform:translateY(-4px);
  box-shadow:
    0 0 0 1px rgba(212,175,55,0.2),
    0 25px 60px rgba(0,0,0,0.9);
}

/* HEADING */
.box h3{
  font-size:20px;
  margin-bottom:22px;
  color:#d4af37;
  letter-spacing:1.5px;
  position:relative;
}

.box h3::after{
  content:"";
  position:absolute;
  bottom:-6px;
  left:0;
  width:40px;
  height:2px;
  background:#d4af37;
}

/* FORM */
#checkoutForm{
  display:flex;
  flex-direction:column;
  gap:16px;
}

/* LABEL */
#checkoutForm label{
  font-size:12px;
  color:#888;
  letter-spacing:0.5px;
}

/* INPUT FIELD */
#checkoutForm input,
#checkoutForm select{
  width:100%;
  padding:14px;
  background:linear-gradient(145deg,#0a0a0a,#111);
  border:1px solid #1a1a1a;
  color:#fff;
  border-radius:8px;
  font-size:14px;
  outline:none;
  transition:all 0.3s ease;
}

/* PREMIUM FOCUS */
#checkoutForm input:focus,
#checkoutForm select:focus{
  border-color:#d4af37;
  box-shadow:
    0 0 0 1px #d4af37,
    0 0 12px rgba(212,175,55,0.25);
  transform:scale(1.01);
}

/* PLACEHOLDER */
#checkoutForm input::placeholder{
  color:#555;
}

/* GRID */
.two-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

/* BUTTON (LUXURY GOLD) */
.btn-main{
  margin-top:20px;
  padding:16px;
  background:linear-gradient(135deg,#d4af37,#f5d76e);
  color:#000;
  border:none;
  border-radius:10px;
  font-weight:700;
  letter-spacing:1px;
  cursor:pointer;
  transition:all 0.3s ease;
  box-shadow:0 10px 25px rgba(212,175,55,0.25);
}

/* BUTTON HOVER */
.btn-main:hover{
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 15px 40px rgba(212,175,55,0.4);
}

/* BUTTON ACTIVE */
.btn-main:active{
  transform:scale(0.98);
}

/* ORDER DETAILS */
.order-id-box{
  font-size:13px;
  color:#888;
  margin-bottom:12px;
}

.cart-preview{
  font-size:14px;
  color:#ccc;
  line-height:1.7;
  margin-bottom:12px;
}

/* TOTAL (HIGHLIGHT) */
.final-total{
  font-size:18px;
  font-weight:700;
  color:#fff;
  padding:12px;
  background:rgba(212,175,55,0.05);
  border:1px solid rgba(212,175,55,0.2);
  border-radius:8px;
}

/* MOBILE */
@media(max-width:600px){
  .two-grid{
    grid-template-columns:1fr;
  }

  .box{
    padding:22px;
  }
}
.payment-box{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.payment-option{
  padding:16px;
  border:1px solid #333;
  border-radius:10px;
  cursor:pointer;
  background:#0a0a0a;
  color:#ccc;
  transition:0.3s;
}

.payment-option:hover{
  border-color:#d4af37;
}

.payment-option.active{
  border:2px solid #d4af37;
  color:#fff;
  box-shadow:0 0 15px rgba(212,175,55,0.2);
}

.tabs .tab-btn{
  width:100%;
  height:58px;

  border-radius:40px !important;
  border:2px solid #C8A34A !important;

  background:transparent !important;
  color:#C8A34A !important;

  font-family:'Cinzel', serif;
  font-size:13px;
  letter-spacing:2px;

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

  box-shadow:none !important;
}

.tabs .tab-btn.active{
  background:#C8A34A !important;
  color:#000 !important;
  box-shadow:0 0 15px rgba(200,163,74,.35) !important;
}
.close-btn{
  all:unset !important;
  font-size:26px !important;
  color:white !important;
  cursor:pointer !important;
}

/* =========================
STRIP CONTAINER
========================= */
.trust-strip{
  width:100%;
  overflow:hidden;
  background:#000;
  border-top:1px solid rgba(255,255,255,0.08);
  border-bottom:1px solid rgba(255,255,255,0.08);
}

/* =========================
TRACK (MAIN FIX)
========================= */
.trust-track{
  display:flex;
  gap:60px;
  white-space:nowrap;
  padding:10px 0;

  width:max-content;              /* 🔥 CRITICAL */
  animation:scrollStrip 30s linear infinite; /* 🔥 SPEED BALANCED */
}

/* =========================
TEXT + ICON ALIGN
========================= */
.trust-track span{
  display:flex;
  align-items:center;
  gap:8px;

  color:#C8A34A;
  font-size:12px;
  letter-spacing:2px;
  font-family:'Cinzel', serif;
}

/* =========================
ICON FIX
========================= */
.trust-track svg{
  width:14px;
  height:14px;
  display:block;
  position:relative;
  top:-1px;
}

/* =========================
ANIMATION (FULL WIDTH)
========================= */
@keyframes scrollStrip{
  0%{
    transform:translateX(0);
  }
  100%{
    transform:translateX(-100%);
  }
}

/* =========================
MOBILE OPTIMIZATION
========================= */
@media (max-width:768px){

  .trust-track{
    gap:40px;
    animation:scrollStrip 20s linear infinite; /* mobile fast */
  }

  .trust-track span{
    font-size:11px;
    letter-spacing:1.5px;
  }

  .trust-track svg{
    width:12px;
    height:12px;
  }
}
.trust-strip{
  width:100%;
  overflow:hidden;
  background:#000;

  border-top:1px solid rgba(255,255,255,0.08);
  border-bottom:1px solid rgba(255,255,255,0.08);

  position:relative;
}

/* 🔥 GOLD LINE */
.trust-strip::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:1px;

  background:linear-gradient(
    90deg,
    transparent,
    #C8A34A,
    transparent
  );
}
.trust-strip{
  width:100%;
  overflow:hidden;
  background:#000;

  border-top:1px solid rgba(255,255,255,0.08);
  border-bottom:1px solid rgba(255,255,255,0.08);

  position:sticky;   /* 🔥 main */
  top:70px;          /* header height */
  z-index:999;
}
.top-header {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: #000;
}
.thumbnail-row{
  display:flex;
  gap:6px;
  overflow-x:auto;
  padding:10px;
  background:#000;
}

.thumbnail-row img{
  width:60px;
  height:70px;
  object-fit:cover;
  border-radius:6px;
  cursor:pointer;
  opacity:0.6;
  border:2px solid transparent;
}

.thumbnail-row img.active{
  opacity:1;
  border:2px solid #C8A34A;
}
/* Section Title */
.section-title, 
h2 {
  font-size: 18px;
  letter-spacing: 2px;
  margin-bottom: 12px;
  line-height: 1.4;
}

/* Order Details Text */
.order-details p {
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 6px;
  color: #ccc;
}

/* Highlight Text (like ₹1599) */
.total-box {
  margin-top: 12px;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #C8A34A;
  font-size: 14px;
  line-height: 1.5;
}

/* Section Container */
.section {
  padding: 16px;
  margin-bottom: 18px;
}

/* Delivery Address Inputs */
input, textarea {
  margin-top: 6px;
  margin-bottom: 12px;
  padding: 10px;
  font-size: 14px;
}
.product-buttons button,
.btn,
.hero-btn,
.btn-main,
.big-btn   /* 🔥 ADD THIS */
{
  width:100%;
  height:58px;

  border-radius:40px;
  border:2px solid #C8A34A;

  background:#C8A34A;
  color:#000;

  font-family:'Cinzel', serif;
  font-size:13px;
  letter-spacing:2px;

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

  box-shadow:0 0 15px rgba(200,163,74,.35);
}
.spec-hint{
  display:block;
  margin-top:6px;

  font-size:11px;
  letter-spacing:2px;

  color:#C8A34A;
  opacity:0.8;

  font-family:'Cinzel', serif;
}