/* ====== المتغيرات والأُسس ====== */
:root{
  --bg: #000000;
  --panel: rgba(255,255,255,0.06);
  --panel-2: rgba(255,255,255,0.08);
  --border: rgba(255,255,255,0.12);
  --txt: #f6e27a;           /* ذهبي ناعم */
  --muted: #c7b979;
  --red: #d21e1e;           /* Italian red */
  --red-2: #a51414;
  --shadow: 0 10px 25px rgba(0,0,0,0.5);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background: var(--bg);
  color: var(--txt);
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  line-height:1.6;
}

/* ====== Topbar ====== */
.topbar{
  display:flex;justify-content:space-between;align-items:center;
  gap:12px;padding:8px 14px;background:rgba(0,0,0,.75);
  border-bottom:1px solid var(--border); backdrop-filter: blur(6px);
}
.contact-line{display:flex;gap:8px;align-items:center;font-size:.95rem;color:var(--muted)}
.icon{width:20px;height:20px;fill:var(--txt);opacity:.9}
.icon.discord{fill:var(--txt)}
.icon.instagram{fill:var(--txt)}
.insta-link{display:flex;gap:8px;align-items:center;text-decoration:none;color:var(--txt);padding:6px 10px;border-radius:999px;border:1px solid var(--border)}
.insta-link:hover{box-shadow:0 0 18px rgba(210,30,30,.35); border-color:var(--red)}

/* ====== Navbar ====== */
.navbar{
  position:sticky; top:0; z-index:30;
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 14px; background:rgba(0,0,0,.7); backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}
.brand{display:flex; gap:10px; align-items:center}
.logo{width:44px;height:44px;object-fit:contain; border-radius:12px; box-shadow: var(--shadow)}
.brand-text{display:flex;flex-direction:column}
.site-title{
  margin:0; font-family:"Playfair Display", Georgia, serif; font-style:italic;
  font-weight:700; letter-spacing:.3px; font-size:1.25rem;
}
.site-sub{margin:0; color:var(--muted); font-weight:600}

.menu{display:flex; align-items:center; gap:10px}
.nav-link{
  color:#ffd; text-decoration:none; padding:10px 14px; border-radius:12px;
  border:1px solid transparent; transition: .25s transform, .25s box-shadow, .25s background;
}
.nav-link:hover{background:var(--panel-2); box-shadow:0 0 16px rgba(210,30,30,.35)}
#quickSwitch{
  appearance:none; background:var(--panel); color:var(--txt);
  border:1px solid var(--border); padding:10px 12px; border-radius:12px;
}

/* ====== Sections ====== */
.section{padding:56px 14px; max-width:1200px; margin:0 auto}
.section-title{margin:0 0 18px 0; font-size:1.4rem; font-weight:700; letter-spacing:.2px}
.card{
  background:linear-gradient(180deg, var(--panel), transparent), var(--panel);
  border:1px solid var(--border); border-radius:18px; padding:18px; box-shadow: var(--shadow);
}

/* ====== Hero ====== */
.hero{position:relative; min-height:64vh; display:grid; place-items:center; border-bottom:1px solid var(--border); overflow:hidden}
.hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.35; transform:scale(1.08)}
.hero-overlay{position:absolute; inset:0; background:radial-gradient(transparent, rgba(0,0,0,.7) 60%)}
.hero-inner{position:relative; text-align:center; display:grid; gap:14px; animation:fadeUp .8s ease both}
.hero-title{
  margin:0; font-size:2rem; letter-spacing:.4px;
  font-family:"Playfair Display", Georgia, serif; font-style:italic;
}
.hero-tag{margin:0; color:var(--muted)}
.btn{
  display:inline-block; padding:12px 18px; border-radius:16px; border:1px solid var(--border);
  background:var(--panel); color:var(--txt); text-decoration:none; cursor:pointer; transition:.25s;
}
.btn:hover{transform:translateY(-2px)}
.btn.primary{background:linear-gradient(180deg, var(--red), var(--red-2)); border-color:rgba(255,255,255,.15); color:#fff; font-weight:600}
.btn.glow:hover{box-shadow:0 0 24px rgba(210,30,30,.6)}

/* ====== Promo ====== */
.promo-banner{
  display:flex; justify-content:center; align-items:center; gap:8px;
  background:linear-gradient(90deg, rgba(210,30,30,.8), rgba(165,20,20,.8));
  border:1px solid rgba(255,255,255,.15); border-radius:18px; padding:10px 16px; margin-bottom:16px;
  box-shadow: var(--shadow); color:#fff; font-weight:700; letter-spacing:.3px
}
.promo-banner code{background:rgba(0,0,0,.3); padding:4px 8px; border-radius:10px; color:#fff}

/* ====== Products ====== */
.grid.products{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:16px;
}
.product{ overflow:hidden; transform:translateZ(0) }
.product img{
  width:100%; height:220px; object-fit:cover; border-radius:14px; transition: transform .35s ease;
}
.product:hover img{ transform: scale(1.06) }
.card-body{display:grid; gap:8px; text-align:center}
.price{font-weight:700; color:#fff}
.btn.add{background:linear-gradient(180deg, var(--red), var(--red-2)); color:#fff}

/* ====== Mini Cart & Checkout ====== */
.mini-cart{margin-top:18px; display:grid; gap:12px}
.cart-summary{
  display:flex; justify-content:space-between; align-items:center; padding:12px 16px;
  background:var(--panel); border:1px solid var(--border); border-radius:14px
}
.checkout .field{display:grid; gap:6px; margin:8px 0}
.checkout input{
  background:var(--panel); color:var(--txt); border:1px solid var(--border);
  padding:12px 14px; border-radius:12px; outline:none
}
.checkout input:focus{border-color:var(--red)}

/* ====== Cart page ====== */
.cart-list{display:grid; gap:10px}
.cart-item{display:flex; justify-content:space-between; align-items:center; padding:10px; border:1px dashed var(--border); border-radius:12px; background:var(--panel)}
.cart-item .title{font-weight:600}
.cart-item .qty{display:flex; gap:8px; align-items:center}
.qty button{width:28px;height:28px;border-radius:8px;background:var(--panel-2);border:1px solid var(--border);color:var(--txt);cursor:pointer}
.cart-totals{margin-top:12px; display:grid; gap:6px; font-weight:600}

/* ====== Reveal on scroll ====== */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease}
.reveal.visible{opacity:1; transform:none}

/* ====== Overlay confirmation ====== */
.confirm-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.65); display:none; place-items:center; z-index:100;
}
.confirm-overlay.show{display:grid}
.confirm-box{background:var(--panel); border:1px solid var(--border); padding:24px; border-radius:20px; text-align:center; width:min(420px,92%); box-shadow: var(--shadow)}
.checkmark{width:88px;height:88px;display:block;margin:0 auto 10px}
.checkmark__circle{stroke: #24d26a; stroke-width:3; stroke-miterlimit:10; animation: circle .6s ease-in-out forwards}
.checkmark__check{stroke:#24d26a; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; stroke-miterlimit:10; stroke-dasharray:48; stroke-dashoffset:48; animation: check .4s .6s ease forwards}

/* ====== Footer ====== */
.footer{
  border-top:1px solid var(--border); background:rgba(0,0,0,.7);
  padding:16px 14px; display:flex; justify-content:space-between; align-items:center;
}
.footer-right{display:flex; align-items:center; gap:10px}
.divider{opacity:.4}

/* ====== Keyframes ====== */
@keyframes fadeUp{from{opacity:0; transform: translateY(10px)} to{opacity:1; transform:none}}
@keyframes circle{to{stroke-dashoffset:0}}
@keyframes check{to{stroke-dashoffset:0}}

/* ====== Responsiveness ====== */
@media (max-width: 720px){
  .menu{gap:6px}
  .nav-link{padding:8px 10px}
  .logo{width:38px;height:38px}
  .hero-title{font-size:1.6rem}
}