:root { --gold-grad: linear-gradient(120deg, #f7ecbf 0%, #d4af37 45%, #a9812a 100%); }

html, body { background-color: #03110b; }
body { font-family: 'Jost', sans-serif; color: #e9e2cd; -webkit-font-smoothing: antialiased; overflow-x: hidden; }

::selection { background: rgba(212,175,55,0.35); color: #fff; }

::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: #03110b; }
::-webkit-scrollbar-thumb { background: linear-gradient(#a9812a,#d4af37); border-radius: 99px; border: 2px solid #03110b; }

.font-display { font-family: 'Cormorant Garamond', serif; }
.font-arabic  { font-family: 'Amiri', serif; }

.text-gold-gradient {
  background: var(--gold-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* Ambient luxury background */
.ambient {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 50% at 80% 0%, rgba(21,122,91,0.28), transparent 60%),
    radial-gradient(50% 45% at 12% 18%, rgba(212,175,55,0.10), transparent 60%),
    radial-gradient(70% 60% at 50% 110%, rgba(14,92,67,0.30), transparent 60%),
    #03110b;
}
.stars {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23d4af37' stroke-opacity='0.10' stroke-width='1'%3E%3Cpath d='M60 18 L72 48 L102 48 L78 68 L88 100 L60 80 L32 100 L42 68 L18 48 L48 48 Z'/%3E%3Crect x='30' y='30' width='60' height='60' transform='rotate(45 60 60)'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 240px 240px;
  -webkit-mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 80%);
  mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 80%);
}

/* Glass surfaces */
.glass {
  background: linear-gradient(160deg, rgba(244,236,214,0.07), rgba(6,35,26,0.35));
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(212,175,55,0.18);
}
.glass-strong {
  background: linear-gradient(160deg, rgba(244,236,214,0.10), rgba(3,17,11,0.55));
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(212,175,55,0.22);
}

/* Buttons */
.btn-gold {
  background: var(--gold-grad); color: #1a1205; position: relative; overflow: hidden;
  box-shadow: 0 10px 30px -12px rgba(212,175,55,0.7);
}
.btn-gold::after {
  content:''; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-20deg); transition: left .7s ease;
}
.btn-gold:hover::after { left: 140%; }
.btn-ghost { border: 1px solid rgba(212,175,55,0.45); color: #f1dd9c; }
.btn-ghost:hover { background: rgba(212,175,55,0.10); border-color: rgba(212,175,55,0.9); }

/* Hover lift */
.lift { transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s, border-color .5s; }
.lift:hover { transform: translateY(-8px); box-shadow: 0 30px 70px -34px rgba(0,0,0,.85); border-color: rgba(212,175,55,0.55); }
.product-visual { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.group:hover .product-visual { transform: scale(1.08) rotate(-1deg); }

/* Marquee */
.marquee { display:flex; gap:4rem; width:max-content; animation: scrollx 28s linear infinite; }
@keyframes scrollx { to { transform: translateX(-50%); } }

/* Float / spin */
@keyframes float { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-16px) } }
.float { animation: float 7s ease-in-out infinite; }
@keyframes spin-slow { to { transform: rotate(360deg); } }
.spin-slow { animation: spin-slow 60s linear infinite; }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }

.ornament { color: #d4af37; }

/* ---------------- Search overlay ---------------- */
.overlay-back {
  position: fixed; inset: 0; z-index: 60; background: rgba(3,17,11,0.72);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s;
}
.overlay-back.open { opacity: 1; visibility: visible; }

#searchPanel {
  transform: translateY(-24px) scale(.98); opacity: 0; transition: transform .4s cubic-bezier(.2,.7,.2,1), opacity .4s;
}
.overlay-back.open #searchPanel { transform: none; opacity: 1; }

#loginPanel {
  transform: translateY(16px) scale(.97); opacity: 0; transition: transform .4s cubic-bezier(.2,.7,.2,1), opacity .4s;
}
.overlay-back.open #loginPanel { transform: none; opacity: 1; }

/* ---------------- Cart drawer ---------------- */
#cartDrawer {
  position: fixed; top: 0; right: 0; height: 100%; width: 100%; max-width: 27rem; z-index: 70;
  transform: translateX(100%); transition: transform .45s cubic-bezier(.2,.7,.2,1);
  display: flex; flex-direction: column;
}
#cartDrawer.open { transform: none; }
.drawer-back {
  position: fixed; inset: 0; z-index: 65; background: rgba(3,17,11,0.6);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s;
}
.drawer-back.open { opacity: 1; visibility: visible; }

/* Toast */
#toast { transition: opacity .4s, transform .4s; }

/* Forms */
.field {
  width: 100%; border-radius: 1rem; border: 1px solid rgba(212,175,55,0.25);
  background: rgba(3,17,11,0.6); padding: 0.85rem 1.1rem; color: #f4ecd6; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.field::placeholder { color: rgba(244,236,214,0.4); }
.field:focus { border-color: #d4af37; box-shadow: 0 0 0 3px rgba(212,175,55,0.25); }

.qty-btn {
  display:grid; place-items:center; height:2rem; width:2rem; border-radius:9999px;
  border:1px solid rgba(212,175,55,0.3); color:#f1dd9c; transition: background-color .2s, border-color .2s;
}
.qty-btn:hover { background: rgba(212,175,55,0.12); border-color:#d4af37; }

@media (prefers-reduced-motion: reduce) {
  .marquee, .float, .spin-slow, .btn-gold::after { animation: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}