:root{
  --bg-dark: #222222;
  --bg-dark-2: #1a1a1a;
  --gold: #D2AB68;
  --gold-bright: #E8C98A;
  --white: #F5F3EF;
  --white-dim: rgba(245,243,239,0.7);
}
*{margin:0;padding:0;box-sizing:border-box;}
body{
  font-family: 'Vazirmatn', sans-serif;
  background: var(--bg-dark);
  min-height: 100vh;
}

/* ===== Header ===== */
.site-header{
  position: relative;
  z-index: 50;
  background: linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-dark) 85%, var(--bg-dark-2) 100%);
  padding: 28px 0 0 0;
  border-bottom: 1px solid rgba(210,171,104,0.15);
}
.gold-vein{
  position:absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 1px; height: 210px;
  background: linear-gradient(180deg, rgba(210,171,104,0) 0%, rgba(210,171,104,0.55) 40%, rgba(210,171,104,0) 100%);
  filter: blur(0.5px);
  pointer-events: none;
}
.gold-vein::before, .gold-vein::after{
  content:""; position:absolute; top:0; width:1px; height:100%; background: inherit; opacity:0.5;
}
.gold-vein::before{ left:-40px; }
.gold-vein::after{ left:40px; }

.logo-wrap{ position: relative; display:flex; justify-content:center; align-items:center; z-index: 2; }
.logo-wrap img{ width: 150px; height: auto; filter: drop-shadow(0 0 18px rgba(210,171,104,0.25)); }

/* Social icons */
.social-rail{ position:absolute; top: 34px; left: 100px; z-index: 3; display:flex; flex-direction: row; align-items:center; gap: 10px; }
.social-rail a{
  width: 26px; height: 26px; display:flex; align-items:center; justify-content:center;
  border-radius: 50%; border: 1px solid rgba(210,171,104,0.35); color: var(--white-dim);
  transition: all 0.3s ease;
}
.social-rail a svg{ width: 12px; height: 12px; fill: currentColor; }
.social-rail a img{ width: 13px; height: 13px; object-fit: contain; display:block; }
.social-rail a:hover{
  color: var(--bg-dark); background: var(--gold); border-color: var(--gold);
  box-shadow: 0 0 14px rgba(210,171,104,0.5); transform: translateY(-2px);
}

/* Language switch */
.lang-switch{
  position:absolute; top: 34px; right: 100px; z-index: 3; display:flex; align-items:center;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(210,171,104,0.35); border-radius: 999px; padding: 2px; gap:2px;
}
.lang-switch a{
  font-family:'Vazirmatn', sans-serif; border:none; background: transparent; color: var(--white-dim);
  font-size: 11px; font-weight: 600; line-height: 1; padding: 5px 10px; border-radius: 999px;
  cursor:pointer; transition: all 0.25s ease; text-decoration:none; display:inline-block;
}
.lang-switch a.active{ background: var(--gold); color: var(--bg-dark); }

/* ===== Mobile nav toggle (hamburger) button base style ===== */
.nav-toggle{
  display:none;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(210,171,104,0.35); background: transparent;
  align-items:center; justify-content:center; flex-direction:column; gap: 4px;
  cursor:pointer; z-index: 6;
}
.nav-toggle span{ width: 15px; height: 1.5px; background: var(--white); transition: all .3s ease; }
.nav-toggle.is-active span:nth-child(1){ transform: translateY(5.5px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2){ opacity: 0; }
.nav-toggle.is-active span:nth-child(3){ transform: translateY(-5.5px) rotate(-45deg); }

/* Nav */
nav.main-nav{ position:relative; z-index:2; margin-top: 18px; }
nav.main-nav ul{ list-style:none; display:flex; justify-content:center; align-items:center; flex-wrap: wrap; gap: 8px; padding: 18px 24px; }
nav.main-nav li{ position: relative; }
nav.main-nav a{
  display:inline-block; position:relative; color: var(--white); text-decoration:none;
  font-size: 16px; font-weight: 500; letter-spacing: 0.2px; padding: 10px 18px; transition: color 0.35s ease;
}
nav.main-nav a::before{
  content:""; position:absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  width: 0%; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transition: width 0.4s cubic-bezier(.4,0,.2,1);
}
nav.main-nav a::after{
  content:""; position:absolute; bottom: -2px; left: 50%; transform: translateX(-50%) scale(0);
  width: 4px; height: 4px; border-radius: 50%; background: var(--gold-bright);
  box-shadow: 0 0 8px 2px rgba(232,201,138,0.7); transition: transform 0.4s cubic-bezier(.4,0,.2,1);
}
nav.main-nav a:hover, nav.main-nav a:focus-visible, nav.main-nav a.active{ color: var(--gold-bright); }
nav.main-nav a:hover::before, nav.main-nav a:focus-visible::before, nav.main-nav a.active::before{ width: 100%; }
nav.main-nav a:hover::after, nav.main-nav a:focus-visible::after, nav.main-nav a.active::after{ transform: translateX(-50%) scale(1); }

/* submenu */
nav.main-nav .has-children{ position:relative; }
nav.main-nav .submenu{
  list-style:none; position:absolute; top:100%; right:0; min-width:180px;
  background: var(--bg-dark-2); border:1px solid rgba(210,171,104,0.25); border-radius:8px;
  padding:8px; display:none; z-index:10; box-shadow:0 12px 24px rgba(0,0,0,0.4);
}
nav.main-nav .has-children:hover .submenu{ display:block; }
nav.main-nav .submenu a{ display:block; padding:8px 12px; font-size:14px; }
nav.main-nav .submenu a::before, nav.main-nav .submenu a::after{ display:none; }

/* ===== Product carousel ===== */
.product-carousel{ position: relative; background: var(--bg-dark-2); padding: 0; overflow: hidden; }
.product-carousel .stage{ position: relative; width: 100%; aspect-ratio: 1920 / 750; margin: 0; }
.product-carousel .slide{
  position:absolute; inset: 0; display:flex; align-items:center; justify-content:center;
  opacity: 0; transition: opacity 0.8s ease; pointer-events:none;
}
.product-carousel .slide.is-active{ opacity: 1; pointer-events:auto; }
.product-carousel .slide img{ width: 100%; height: 100%; object-fit: cover; object-position: center bottom; border-radius: 0; filter:none; display:block; }
.product-carousel .slide .tag{ position:absolute; bottom:18px; right:28px; margin-top:0; color: var(--gold-bright); font-size: 13px; letter-spacing: 0.5px; font-weight: 600; opacity: 0.9; background:rgba(26,26,26,0.55); padding:4px 12px; border-radius:999px; }
.carousel-dots{ position:absolute; bottom:16px; left:50%; transform:translateX(-50%); display:flex; justify-content:center; gap: 8px; margin-top: 0; z-index:5; }
.product-carousel .slide a.slide-link{ position:absolute; inset:0; }
.carousel-dots button{ width: 7px; height: 7px; border-radius: 50%; border: 1px solid rgba(210,171,104,0.5); background: transparent; padding:0; cursor:pointer; transition: all 0.3s ease; }
.carousel-dots button.is-active{ background: var(--gold); border-color: var(--gold); width: 18px; border-radius: 4px; }
.no-slides{ text-align:center; color: rgba(245,243,239,0.4); padding: 40px 20px; font-size:14px; }

/* =========================================================
   MOBILE OVERRIDES — این بخش عمداً آخر فایل قرار داره
   (چون توی CSS، هرچی آخر نوشته بشه با اولویت یکسان برنده می‌شه؛
   اگه این بخش رو قبل از قوانین اصلی بذاری، موبایل کار نمی‌کنه)
   ========================================================= */
@media (max-width: 640px){
  .social-rail{ display:none; }
  .lang-switch{ position:absolute; top: 30px; left: 20px; right:auto; width:auto; margin:0; }

  .nav-toggle{ display:flex; position:absolute; top: 30px; right: 20px; }

  nav.main-nav{ margin-top: 14px; width:100%; }
  nav.main-nav ul{
    display:none; flex-direction:column; align-items:stretch; gap:0;
    flex-wrap: nowrap; padding: 8px 20px 20px; overflow:visible;
  }
  nav.main-nav ul.is-open{ display:flex; }
  nav.main-nav li{ border-bottom: 1px solid rgba(210,171,104,0.12); flex:none; }
  nav.main-nav a{ display:block; padding: 12px 6px; font-size:15px; white-space:normal; }
  nav.main-nav a::before, nav.main-nav a::after{ display:none; }
  nav.main-nav .submenu{ position:static; display:none; border:none; background:transparent; box-shadow:none; padding:0 0 0 16px; }
  nav.main-nav .has-children.is-open .submenu{ display:block; }
}