/* ═══════════════════════════════════════════════════════════════
   nav.css  —  CCSHOP shared navigation styles
   ═══════════════════════════════════════════════════════════════ */

nav{position:fixed;top:0;left:0;right:0;z-index:500;height:68px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 32px;transition:background .4s,backdrop-filter .4s,border-color .4s}
nav.scrolled{background:rgba(6,4,15,0.85);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid var(--border)}

.nav-logo{font-family:'Orbitron',monospace;font-size:18px;font-weight:900;letter-spacing:.12em;cursor:pointer;background:linear-gradient(135deg,var(--purple-light),var(--red-light),var(--orange-light));background-size:200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradient-shift 6s ease infinite;justify-self:start;text-decoration:none}
@keyframes gradient-shift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

.nav-links{display:flex;gap:4px;justify-self:center}
.nav-link{background:none;border:none;color:var(--muted);font-size:13px;font-weight:400;letter-spacing:.03em;padding:8px 16px;cursor:pointer;border-radius:20px;transition:color .25s,background .25s;font-family:'Inter',sans-serif}
.nav-link:hover,.nav-link.active{color:var(--text);background:rgba(255,255,255,0.06)}
.nav-link.active{color:var(--purple-light)}

.nav-dropdown{position:relative;display:inline-flex}
.nav-dropdown-menu{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%) translateY(-4px);min-width:160px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px;z-index:500;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;box-shadow:0 8px 32px rgba(0,0,0,.4)}
.nav-dropdown-menu.open{opacity:1;pointer-events:all;transform:translateX(-50%) translateY(0)}
.nav-dropdown-item{display:block;width:100%;background:none;border:none;color:var(--text2);font-size:12px;font-family:'Inter',sans-serif;padding:8px 12px;text-align:left;cursor:pointer;border-radius:4px;transition:background .15s,color .15s;white-space:nowrap}
.nav-dropdown-item:hover{background:var(--purple-dim);color:var(--purple-light)}
.nav-dropdown-arrow{font-size:9px;margin-left:4px;opacity:.6;transition:transform .2s}
.nav-dropdown:hover .nav-dropdown-arrow{transform:rotate(180deg)}

/* Cart button (shared across shop / services) */
.cart-btn{background:none;border:none;font-size:20px;cursor:pointer;position:relative;padding:6px}
.cart-badge{position:absolute;top:0;right:-4px;background:var(--red);color:#fff;font-size:10px;font-weight:700;min-width:18px;height:18px;border-radius:99px;display:none;align-items:center;justify-content:center;font-family:'Space Mono',monospace;padding:0 4px}

/* Mobile hamburger */
.hamburger{display:none;background:none;border:1px solid var(--border);color:var(--text2);padding:6px 10px;border-radius:var(--radius-sm);cursor:pointer;font-size:16px;transition:all .2s}
.hamburger:hover{border-color:var(--purple-light);color:var(--purple-light)}
@media(max-width:768px){
  .hamburger{display:flex}
  .nav-links{display:none}
}