@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&family=Amiri:ital@0;1&family=Cinzel:wght@400;600&display=swap');

:root {
  --gold:  #d4a853;
  --gold2: #c4915a;
  --rust:  #8b3a1f;
  --teal:  #1a3535;
  --deep:  #0e0804;
  --mid:   #1a1008;
  --cream: #f0e6d3;
  --text:  #c8b89a;
  --muted: rgba(192,168,130,.45);
  --border: rgba(212,168,83,.13);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:var(--deep);
  color:var(--text);
  font-family:'Cormorant Garamond',serif;
  overflow-x:hidden;
  cursor:none;
}

/* ── CURSOR ── */
#cur {
  position:fixed; z-index:99999;
  width:10px; height:10px;
  border-radius:50%;
  background:var(--gold);
  pointer-events:none;
  transform:translate(-50%,-50%);
  mix-blend-mode:difference;
  box-shadow:0 0 14px rgba(212,168,83,.5);
  transition:width .2s,height .2s;
}
body:has(a:hover) #cur,
body:has(button:hover) #cur { width:18px; height:18px; }

/* ── GRAIN ── */
#grain {
  position:fixed; inset:0; z-index:9998;
  pointer-events:none; opacity:.2;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.1'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
  animation:grn .45s steps(1) infinite;
}
@keyframes grn {
  0%,100%{background-position:0 0} 14%{background-position:-4% -7%}
  28%{background-position:7% 3%} 42%{background-position:-2% 9%}
  56%{background-position:5% -4%} 70%{background-position:-7% 5%}
  84%{background-position:3% -9%}
}

/* ── NAV ── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.2rem clamp(1.5rem,6vw,5rem);
  background:linear-gradient(180deg,rgba(14,8,4,.95) 0%,rgba(14,8,4,.7) 100%);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(212,168,83,.08);
  transition:all .3s;
}
nav.scrolled { background:rgba(10,5,2,.97); }

.nav-logo {
  font-family:'Amiri',serif;
  font-size:clamp(1.4rem,3vw,2rem);
  color:var(--gold);
  text-decoration:none;
  letter-spacing:.05em;
  text-shadow:0 0 30px rgba(212,168,83,.3);
}
.nav-links {
  display:flex; gap:clamp(1.5rem,3vw,3rem);
  list-style:none;
}
.nav-links a {
  font-family:'Cinzel',serif;
  font-size:.65rem;
  letter-spacing:.35em;
  text-transform:uppercase;
  color:var(--text);
  text-decoration:none;
  transition:color .3s;
  position:relative;
}
.nav-links a::after {
  content:'';
  position:absolute; bottom:-3px; left:0; right:0;
  height:1px;
  background:var(--gold);
  transform:scaleX(0);
  transition:transform .3s;
}
.nav-links a:hover,
.nav-links a.active { color:var(--gold); }
.nav-links a:hover::after,
.nav-links a.active::after { transform:scaleX(1); }

.nav-cart {
  position:relative;
  background:none; border:1px solid var(--border);
  color:var(--text);
  font-family:'Cinzel',serif;
  font-size:.6rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  padding:.5rem 1.2rem;
  cursor:pointer;
  transition:all .3s;
}
.nav-cart:hover { border-color:var(--gold); color:var(--gold); }
.cart-count {
  position:absolute; top:-6px; right:-6px;
  width:16px; height:16px;
  background:var(--rust);
  border-radius:50%;
  font-size:.55rem;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  opacity:0;
  transition:opacity .3s;
}
.cart-count.visible { opacity:1; }

/* ── CART DRAWER ── */
#cartDrawer {
  position:fixed; top:0; right:0; bottom:0;
  width:min(420px,95vw);
  background:var(--mid);
  border-left:1px solid var(--border);
  z-index:9000;
  transform:translateX(100%);
  transition:transform .4s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column;
  overflow:hidden;
}
#cartDrawer.open { transform:translateX(0); }

.cart-overlay {
  position:fixed; inset:0; z-index:8999;
  background:rgba(0,0,0,.5);
  opacity:0; pointer-events:none;
  transition:opacity .4s;
}
.cart-overlay.open { opacity:1; pointer-events:all; }

.cart-header {
  padding:1.5rem 1.8rem;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
}
.cart-header h3 {
  font-family:'Amiri',serif;
  font-size:1.4rem;
  color:var(--cream);
}
.cart-close {
  background:none; border:none;
  color:var(--text); font-size:1.4rem;
  cursor:pointer; line-height:1;
  transition:color .2s;
}
.cart-close:hover { color:var(--gold); }

.cart-items {
  flex:1; overflow-y:auto;
  padding:1.2rem 1.8rem;
  display:flex; flex-direction:column; gap:1rem;
}
.cart-items::-webkit-scrollbar { width:3px; }
.cart-items::-webkit-scrollbar-thumb { background:var(--border); }

.cart-item {
  display:flex; gap:1rem; align-items:center;
  padding-bottom:1rem;
  border-bottom:1px solid rgba(212,168,83,.07);
}
.cart-item-info { flex:1; }
.cart-item-name {
  font-size:.95rem; color:var(--cream);
  margin-bottom:.2rem;
}
.cart-item-price { font-size:.8rem; color:var(--gold); }
.cart-item-qty {
  display:flex; align-items:center; gap:.6rem;
  margin-top:.5rem;
}
.qty-btn {
  background:none; border:1px solid var(--border);
  color:var(--text); width:22px; height:22px;
  font-size:.9rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all .2s;
}
.qty-btn:hover { border-color:var(--gold); color:var(--gold); }
.qty-num { font-size:.85rem; color:var(--cream); min-width:20px; text-align:center; }

.cart-footer {
  padding:1.5rem 1.8rem;
  border-top:1px solid var(--border);
}
.cart-total {
  display:flex; justify-content:space-between;
  margin-bottom:1.2rem;
  font-size:1rem; color:var(--cream);
}
.cart-total span:last-child { color:var(--gold); font-size:1.1rem; }
.cart-empty {
  text-align:center; padding:3rem 0;
  color:var(--muted); font-style:italic;
  font-size:.9rem;
}

/* ── BUTTONS ── */
.btn-gold {
  display:inline-block;
  background:linear-gradient(135deg,var(--rust),var(--gold2));
  color:var(--cream);
  font-family:'Cinzel',serif;
  font-size:.65rem;
  letter-spacing:.35em;
  text-transform:uppercase;
  padding:.9rem 2.2rem;
  border:none; cursor:pointer;
  text-decoration:none;
  transition:all .3s;
  position:relative; overflow:hidden;
}
.btn-gold::before {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(135deg,var(--gold2),var(--gold));
  opacity:0; transition:opacity .3s;
}
.btn-gold:hover::before { opacity:1; }
.btn-gold span { position:relative; z-index:1; }

.btn-outline {
  display:inline-block;
  background:none;
  border:1px solid var(--border);
  color:var(--text);
  font-family:'Cinzel',serif;
  font-size:.65rem;
  letter-spacing:.35em;
  text-transform:uppercase;
  padding:.9rem 2.2rem;
  cursor:pointer;
  text-decoration:none;
  transition:all .3s;
}
.btn-outline:hover { border-color:var(--gold); color:var(--gold); }

/* ── REVEAL ── */
.reveal {
  opacity:0; transform:translateY(24px);
  transition:opacity .9s ease, transform .9s ease;
}
.reveal.visible { opacity:1; transform:translateY(0); }

/* ── SECTION COMMON ── */
.section-label {
  font-family:'Cinzel',serif;
  font-size:.6rem; letter-spacing:.5em;
  text-transform:uppercase;
  color:var(--gold); opacity:.55;
  margin-bottom:.8rem;
}
.section-title {
  font-family:'Amiri',serif;
  font-size:clamp(2rem,4.5vw,3.5rem);
  color:var(--cream); line-height:1.2;
  margin-bottom:1.2rem;
}
.section-title em { color:var(--gold); font-style:italic; }
.section-body {
  font-size:clamp(.95rem,1.5vw,1.1rem);
  line-height:1.95; color:var(--text);
}
.gold-line {
  width:50px; height:1px;
  background:linear-gradient(90deg,var(--gold),transparent);
  margin-bottom:1.2rem;
}

/* ── FOOTER ── */
footer {
  background:#070401;
  border-top:1px solid var(--border);
  padding:clamp(3rem,6vw,5rem) clamp(1.5rem,6vw,5rem);
}
.footer-grid {
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:3rem;
  margin-bottom:3rem;
}
@media(max-width:700px){ .footer-grid{ grid-template-columns:1fr; gap:2rem; } }
.footer-brand .f-arabic {
  font-family:'Amiri',serif;
  font-size:2.4rem; color:var(--gold);
  opacity:.7; display:block; margin-bottom:.8rem;
}
.footer-brand p {
  font-size:.85rem; color:var(--muted);
  line-height:1.8; max-width:280px;
  font-style:italic;
}
.footer-col h4 {
  font-family:'Cinzel',serif;
  font-size:.6rem; letter-spacing:.4em;
  text-transform:uppercase;
  color:var(--gold); opacity:.5;
  margin-bottom:1.2rem;
}
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:.7rem; }
.footer-col a {
  font-size:.85rem; color:var(--muted);
  text-decoration:none; transition:color .2s;
}
.footer-col a:hover { color:var(--gold); }
.footer-bottom {
  border-top:1px solid rgba(212,168,83,.06);
  padding-top:1.5rem;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:1rem;
}
.footer-bottom p { font-size:.7rem; color:rgba(192,168,130,.25); letter-spacing:.15em; }