/* ============================================================
   ZYNQ SHARED STYLES — used across all pages
   ============================================================ */
:root {
  --void: #0b0f1a;
  --deep: #0f1420;
  --surface: #141b28;
  --raised: #1a2235;
  --glass: rgba(255,255,255,0.05);
  --glass-border: rgba(255,255,255,0.09);
  --cyan: #00c8ff;
  --cyan-dim: rgba(0,200,255,0.12);
  --accent2: #7c6af7;
  --white: #edf1f8;
  --muted: rgba(237,241,248,0.52);
  --faint: rgba(237,241,248,0.14);
  --font-display: 'Space Grotesk', sans-serif;
  --font-mono: 'Space Mono', monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:var(--font-display); background:linear-gradient(135deg,#0b0f1a 0%,#0d1525 40%,#111828 70%,#0b0f1a 100%); color:var(--white); overflow-x:hidden; cursor:none; }
body::before { content:''; position:fixed; inset:0; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E"); pointer-events:none; z-index:1; opacity:0.25; }
#bgCanvas { position:fixed; inset:0; z-index:0; pointer-events:none; }
.wrap { max-width:1200px; margin:0 auto; padding:0 40px; position:relative; z-index:2; }
@media(max-width:768px){ .wrap{padding:0 24px;} }
/* Cursor */
.cursor-dot { width:8px; height:8px; background:var(--cyan); border-radius:50%; position:fixed; top:0; left:0; transform:translate(-50%,-50%); transition:width .2s,height .2s; pointer-events:none; z-index:9999; mix-blend-mode:screen; }
.cursor-ring { width:36px; height:36px; border:1.5px solid rgba(0,200,255,0.5); border-radius:50%; position:fixed; top:0; left:0; transform:translate(-50%,-50%); pointer-events:none; z-index:9998; transition:width .3s,height .3s,border-color .3s; }
body.hovering .cursor-dot { width:12px; height:12px; }
body.hovering .cursor-ring { width:56px; height:56px; border-color:var(--cyan); }
/* Nav */
nav { position:fixed; top:0; left:0; right:0; z-index:100; padding:24px 0; transition:background .4s,padding .4s,border-color .4s; }
nav.scrolled { padding:14px 0; background:rgba(11,15,26,0.9); backdrop-filter:blur(20px); border-bottom:1px solid var(--glass-border); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; }
.nav-logo { font-size:20px; font-weight:700; letter-spacing:-0.02em; color:var(--white); text-decoration:none; display:flex; align-items:center; gap:8px; }
.nav-logo-mark { width:28px; height:28px; border:1.5px solid var(--cyan); border-radius:6px; display:flex; align-items:center; justify-content:center; }
.nav-logo-mark::after { content:''; width:10px; height:10px; background:var(--cyan); border-radius:2px; animation:pulse-mark 2.5s ease infinite; display:block; }
@keyframes pulse-mark { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(0.7)} }
.nav-links { display:flex; gap:36px; list-style:none; align-items:center; }
.nav-links a { font-size:13px; font-weight:500; color:var(--muted); text-decoration:none; letter-spacing:.06em; text-transform:uppercase; transition:color .2s; position:relative; }
.nav-links a::after { content:''; position:absolute; left:0; bottom:-3px; width:0; height:1px; background:var(--cyan); transition:width .3s var(--ease); }
.nav-links a:hover { color:var(--white); }
.nav-links a:hover::after { width:100%; }
.nav-cta { background:var(--cyan-dim) !important; border:1px solid rgba(0,200,255,0.3); color:var(--cyan) !important; padding:10px 22px; border-radius:100px; transition:background .2s,box-shadow .2s !important; }
.nav-cta:hover { background:rgba(0,200,255,0.2) !important; box-shadow:0 0 24px rgba(0,200,255,0.2); }
.nav-cta::after { display:none !important; }
@media(max-width:768px){ .nav-links{display:none;} }
/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:16px 32px; border-radius:100px; font-size:14px; font-weight:600; font-family:inherit; cursor:none; border:none; text-decoration:none; transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s; position:relative; overflow:hidden; }
.btn:hover { transform:translateY(-3px); }
.btn-primary { background:var(--cyan); color:#0b0f1a; }
.btn-primary:hover { box-shadow:0 8px 40px rgba(0,200,255,0.4); }
.btn-ghost { background:var(--glass); border:1px solid var(--glass-border); color:var(--white); }
.btn-ghost:hover { background:rgba(255,255,255,0.08); }
/* Cart drawer */
.cart-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.6); backdrop-filter:blur(4px); z-index:200; opacity:0; pointer-events:none; transition:opacity .35s var(--ease); }
.cart-overlay.open { opacity:1; pointer-events:auto; }
.cart-drawer { position:fixed; top:0; right:0; height:100%; width:min(440px,92vw); background:var(--deep); border-left:1px solid var(--glass-border); z-index:201; transform:translateX(100%); transition:transform .4s var(--ease); display:flex; flex-direction:column; }
.cart-drawer.open { transform:translateX(0); }
.cart-head { display:flex; justify-content:space-between; align-items:center; padding:24px; border-bottom:1px solid var(--glass-border); }
.cart-head h3 { font-size:16px; font-weight:700; }
.cart-close { width:32px; height:32px; border:1px solid var(--glass-border); border-radius:50%; background:none; color:var(--muted); font-size:16px; cursor:none; display:flex; align-items:center; justify-content:center; transition:border-color .2s,color .2s; font-family:inherit; }
.cart-close:hover { border-color:rgba(255,255,255,0.2); color:var(--white); }
.cart-ship { padding:16px 24px; border-bottom:1px solid var(--glass-border); font-size:12px; }
.cart-ship-msg { margin-bottom:8px; color:var(--muted); }
.cart-ship-msg b { color:var(--cyan); }
.ship-bar { height:3px; background:var(--glass); border-radius:100px; overflow:hidden; }
.ship-bar-fill { height:100%; background:var(--cyan); border-radius:100px; transition:width .5s var(--ease); }
.cart-items { flex:1; overflow-y:auto; padding:16px 24px; }
.cart-empty { padding:60px 24px; text-align:center; color:var(--muted); font-size:14px; }
.cart-foot { padding:20px 24px 28px; border-top:1px solid var(--glass-border); }
.cart-total { display:flex; justify-content:space-between; font-size:15px; font-weight:700; margin-bottom:16px; }
.cart-note { text-align:center; font-size:11px; color:var(--muted); margin-top:12px; }
/* Toast */
.toast { position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--surface); border:1px solid var(--glass-border); backdrop-filter:blur(20px); color:var(--white); padding:14px 24px; border-radius:100px; font-size:13px; font-weight:500; z-index:300; opacity:0; transition:all .3s var(--ease); pointer-events:none; display:flex; align-items:center; gap:8px; }
.toast-dot { width:6px; height:6px; background:var(--cyan); border-radius:50%; flex-shrink:0; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
/* Sections */
section { padding:100px 0; position:relative; }
.section-tag { font-family:var(--font-mono); font-size:11px; color:var(--cyan); letter-spacing:.14em; text-transform:uppercase; margin-bottom:16px; display:block; }
.section-title { font-size:clamp(30px,4vw,48px); font-weight:700; letter-spacing:-.025em; line-height:1.08; }
/* Footer */
footer { background:var(--void); border-top:1px solid var(--glass-border); padding:56px 0 28px; position:relative; z-index:2; }
.footer-grid { display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:40px; margin-bottom:48px; }
@media(max-width:768px){ .footer-grid{grid-template-columns:repeat(2,1fr);} }
.footer-brand p { font-size:13px; color:var(--muted); line-height:1.65; margin-top:12px; max-width:220px; }
.footer-col h5 { font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:16px; }
.footer-col a { display:block; font-size:13px; color:rgba(237,241,248,0.45); text-decoration:none; margin-bottom:10px; transition:color .2s; }
.footer-col a:hover { color:var(--cyan); }
.footer-bottom { border-top:1px solid var(--glass-border); padding-top:22px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:12px; color:rgba(237,241,248,0.3); }
/* Reveal */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease),transform .8s var(--ease); }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-delay-1 { transition-delay:.1s; }
.reveal-delay-2 { transition-delay:.2s; }
.reveal-delay-3 { transition-delay:.3s; }
/* Scrollbar */
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:var(--void); }
::-webkit-scrollbar-thumb { background:var(--glass-border); border-radius:4px; }
::selection { background:var(--cyan); color:var(--void); }

/* ---- WISHLIST ---- */
.wishlist-btn {
  background:none; border:none; cursor:pointer;
  color:var(--muted); font-family:inherit; font-size:12px;
  display:flex; align-items:center; gap:6px;
  padding:8px 12px; border-radius:100px;
  border:1px solid var(--glass-border);
  transition:all .2s;
}
.wishlist-btn:hover { color:var(--white); border-color:rgba(255,255,255,0.2); }
.wishlist-btn.active { color:#ff6b9d; border-color:rgba(255,107,157,0.4); background:rgba(255,107,157,0.08); }
.wishlist-btn svg { width:14px; height:14px; stroke:currentColor; fill:none; }

/* ---- BACK TO TOP ---- */
.back-top {
  position:fixed; bottom:32px; right:32px; width:44px; height:44px;
  background:var(--surface); border:1px solid var(--glass-border);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:90; opacity:0; transform:translateY(16px);
  transition:all .3s var(--ease); pointer-events:none;
}
.back-top.show { opacity:1; transform:translateY(0); pointer-events:auto; }
.back-top:hover { background:var(--cyan-dim); border-color:rgba(0,200,255,0.3); }
.back-top svg { width:16px; height:16px; stroke:var(--cyan); fill:none; }

/* ---- SEARCH OVERLAY ---- */
.search-overlay {
  position:fixed; inset:0; background:rgba(11,15,26,0.95);
  backdrop-filter:blur(20px); z-index:300;
  display:flex; align-items:flex-start; justify-content:center;
  padding:100px 24px; opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
}
.search-overlay.open { opacity:1; pointer-events:auto; }
.search-inner { width:100%; max-width:640px; }
.search-input-wrap { position:relative; margin-bottom:32px; }
.search-field {
  width:100%; padding:20px 60px 20px 24px;
  background:var(--surface); border:1px solid var(--glass-border);
  border-radius:16px; font-family:inherit; font-size:18px;
  color:var(--white); outline:none; transition:border-color .2s;
}
.search-field:focus { border-color:rgba(0,200,255,0.4); }
.search-field::placeholder { color:var(--faint); }
.search-close {
  position:absolute; right:16px; top:50%; transform:translateY(-50%);
  background:none; border:none; color:var(--muted); cursor:pointer;
  font-size:20px; font-family:inherit; transition:color .2s;
}
.search-close:hover { color:var(--white); }
.search-results { display:flex; flex-direction:column; gap:10px; }
.search-result {
  display:flex; align-items:center; gap:16px; padding:14px 18px;
  background:var(--glass); border:1px solid var(--glass-border);
  border-radius:14px; text-decoration:none; color:inherit;
  transition:border-color .2s;
}
.search-result:hover { border-color:rgba(0,200,255,0.2); }
.search-result-img { width:48px; height:48px; background:var(--surface); border-radius:10px; flex-shrink:0; }
.search-result-name { font-size:14px; font-weight:600; }
.search-result-price { font-size:13px; color:var(--muted); }