/* Shared header + footer styling for every page on the site.
   Linked from index.html, privacy.html, returns.html — and any page
   added later — so nav/branding/footer only ever need to change here.
   The homepage's ticker bar and interactive cart/wishlist behavior are
   NOT part of this file; only the visual chrome that's identical
   everywhere lives here. */

:root{
  --bg:#14140F;
  --panel:#1D1D17;
  --panel-2:#26261E;
  --orange:#FF6A13;
  --red:#E8322A;
  --yellow:#FFC93C;
  --ink:#F1EFE9;
  --muted:#9C9A8E;
  --line:rgba(241,239,233,0.1);
}

.topbar{position:sticky; top:0; z-index:20; background:rgba(20,20,15,0.92); backdrop-filter:blur(6px); border-bottom:1px solid var(--line);}
.topbar-inner{max-width:1180px; margin:0 auto; padding:16px 24px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;}
.brand{font-family:'Anton',sans-serif; font-size:1.15rem; letter-spacing:0.5px; color:var(--ink); text-decoration:none;}
.brand-accent{color:var(--orange);}
.brand-group{display:flex; flex-direction:column;}
.brand-tagline{font-size:0.68rem; color:var(--muted); margin-top:2px;}
.topnav{display:flex; align-items:center; gap:22px; font-size:0.92rem; flex-wrap:wrap;}
.topnav a{text-decoration:none; color:var(--muted); transition:color .15s;}
.topnav a:hover{color:var(--ink);}
.nav-link-btn{background:none; border:none; font:inherit; color:var(--muted); cursor:pointer; padding:0; transition:color .15s; text-decoration:none;}
.nav-link-btn:hover{color:var(--ink);}
.wishlist-pill{display:flex; align-items:center; gap:5px; font-family:'Rajdhani',sans-serif; font-weight:600; color:var(--red); background:none; border:1px solid rgba(232,50,42,0.4); padding:4px 10px; border-radius:20px; font-size:0.9rem; text-decoration:none; cursor:pointer; transition:background .15s ease;}
.wishlist-pill:hover{background:rgba(232,50,42,0.12);}
.cart-pill{display:flex; align-items:center; gap:8px; font-family:'Rajdhani',sans-serif; font-weight:700; color:var(--bg); background:var(--orange); border:2px solid var(--orange); padding:9px 18px; border-radius:24px; font-size:1.15rem; text-decoration:none; cursor:pointer; box-shadow:0 3px 10px rgba(255,106,19,0.3); transition:transform .15s ease;}
.cart-pill:hover{transform:translateY(-1px);}
.cart-pill.pop{animation:cartPop .45s cubic-bezier(.34,1.56,.64,1);}
@keyframes cartPop{ 0%{transform:scale(1);} 35%{transform:scale(1.22);} 100%{transform:scale(1);} }

footer{border-top:1px solid var(--line); margin-top:10px;}
.footer-inner{max-width:1180px; margin:0 auto; padding:44px 24px; display:grid; grid-template-columns:1.3fr 1fr 1.2fr; gap:34px;}
.footer-brand p{color:var(--muted); font-size:0.85rem; margin-top:10px; max-width:32ch;}
.footer-links h4, .footer-newsletter h4{font-size:0.85rem; text-transform:uppercase; letter-spacing:1px; color:var(--muted); margin:0 0 14px; font-weight:600;}
.footer-links{display:flex; flex-direction:column; gap:10px; font-size:0.9rem;}
.footer-links a{text-decoration:none; color:var(--ink);}
.footer-cart-link{color:var(--ink); text-align:left;}
.footer-links a:hover{color:var(--orange);}
#newsletterForm{display:flex; gap:8px;}
#newsletterEmail{flex:1; background:var(--panel-2); border:1px solid var(--line); color:var(--ink); padding:10px 12px; border-radius:5px; font-size:0.88rem;}
#newsletterForm button{background:var(--orange); color:var(--bg); border:none; font-weight:700; padding:10px 16px; border-radius:5px; cursor:pointer; font-size:0.85rem;}
.newsletter-msg{color:var(--yellow); font-size:0.85rem; margin-top:10px; min-height:1.2em;}
.footer-bottom{text-align:center; color:var(--muted); font-size:0.78rem; padding:20px 24px; border-top:1px solid var(--line);}

@media (max-width:900px){
  .footer-inner{grid-template-columns:1fr; gap:28px;}
}