/* nav: item text never wraps; spacing flexes; below 1100px the links move into a menu button */
.logo{white-space:nowrap; flex-shrink:0;}
.nav-links{--ng:clamp(18px,2.2vw,40px); gap:var(--ng);}
.nav-links a,.nav-links button,.nav-cta{white-space:nowrap; flex-shrink:0;}
@media (max-width:1240px){
  .nav{padding:0 28px;}
  .nav-links{--ng:clamp(14px,1.6vw,40px);}
  .nav-links a{letter-spacing:0.08em;}
  .nav-links .nav-cta{padding:0 18px;}
}
/* thin dividers between the text links */
.nav-links > a:not(.nav-cta):not(.cart-icon-btn),.nav-links > .nav-contact-btn{position:relative;}
.nav-links > a:not(.nav-cta):not(.cart-icon-btn) ~ a:not(.nav-cta):not(.cart-icon-btn)::before,
.nav-links > a:not(.nav-cta):not(.cart-icon-btn) ~ .nav-contact-btn::before{content:""; position:absolute; left:calc(var(--ng) / -2); top:50%; width:1px; height:16px; margin-top:-8px; background:rgba(255,255,255,0.35);}
.nav-burger{display:none; width:48px; height:48px; border:1px solid rgba(255,255,255,0.5); align-items:center; justify-content:center; color:var(--white); background:transparent; cursor:pointer; flex-shrink:0; padding:0;}
.nav-burger svg{width:22px; height:22px;}
.nav-panel{display:none; position:absolute; top:100%; left:0; right:0; background:rgba(11,13,16,0.98); border-bottom:1px solid var(--line); padding:6px 48px 18px; flex-direction:column;}
.nav-panel a,.nav-panel button.nav-panel-link{display:block; width:100%; text-align:left; padding:16px 0; font-size:0.95rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--white); border-bottom:1px solid var(--line); opacity:1; white-space:nowrap; background:none; border-top:0; border-left:0; border-right:0; cursor:pointer;}
.nav-panel .panel-cta{display:none !important;}
header.menu-open .nav-panel{display:flex;}
header.nav-compact .nav{padding:0 24px;}
header.nav-compact .nav-links{gap:10px;}
header.nav-compact .nav-links > a:not(.cart-icon-btn){display:none !important;}
header.nav-compact .nav-links .nav-contact-btn{display:none !important;}
header.nav-compact .nav-burger{display:inline-flex;}
header.nav-compact .nav-panel{padding:6px 24px 18px;}
header.nav-compact{padding:22px 0;}
@media (max-width:520px){
  .logo{font-size:0.95rem; letter-spacing:0.03em;}
  .nav-links{gap:8px;}
  .nav-links .nav-cta{padding:0 12px; height:42px; font-size:0.66rem; letter-spacing:0.06em;}
  .cart-icon-btn,.nav-burger{width:42px; height:42px;}
}
@media (max-width:420px){
  .logo{font-size:0.82rem; letter-spacing:0.02em;}
  .nav-links .nav-cta{padding:0 9px; font-size:0.6rem; letter-spacing:0.03em;}
  .cart-icon-btn,.nav-burger{width:38px; height:38px;}
  .nav-links{gap:6px;}
}
@media (max-width:470px){
  .nav-links .nav-cta{display:none;}
  .nav-panel .panel-cta{display:block !important; color:var(--accent);}
}
/* account: Log in button / My account menu (built by site-nav.js) */
.nav-acct{position:relative; display:flex; align-items:center; flex-shrink:0;}
.nav-acct > button{background:transparent; border:0; padding:0; color:var(--white); font:inherit; font-size:0.78rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; cursor:pointer;}
.nav-acct > button:hover,.nav-acct.open > button{color:var(--accent);}
.nav-acct-menu{display:none; position:absolute; right:0; top:calc(100% + 22px); min-width:250px; background:rgba(11,13,16,0.98); border:1px solid var(--line); padding:6px 0; z-index:60;}
.nav-acct.open .nav-acct-menu{display:block;}
.nav-acct-menu .who{padding:12px 18px; font-size:0.74rem; color:var(--muted); border-bottom:1px solid var(--line); max-width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.nav-acct-menu a,.nav-acct-menu button{display:block; width:100%; text-align:left; padding:13px 18px; background:none; border:0; color:var(--white); font:inherit; font-size:0.76rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; cursor:pointer; white-space:nowrap;}
.nav-acct-menu a:hover,.nav-acct-menu button:hover{color:var(--accent);}
.nav-links > a:not(.nav-cta):not(.cart-icon-btn) ~ .nav-acct::before{content:""; position:absolute; left:calc(var(--ng,24px) / -2); top:50%; width:1px; height:16px; margin-top:-8px; background:rgba(255,255,255,0.35);}
@media (max-width:1240px){ .nav-acct > button{letter-spacing:0.08em;} }
header.nav-compact .nav-links .nav-acct{display:none !important;}
.nav-panel .panel-sub{padding-left:16px !important; font-size:0.85rem !important; color:var(--muted) !important;}
.nav-panel .panel-who{padding:14px 0 4px; font-size:0.75rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis;}
/* sign-in popup */
.wa-ov{position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,0.72); display:flex; align-items:center; justify-content:center; padding:20px; font-family:'Inter',sans-serif;}
.wa-box{position:relative; background:var(--ink-2,#151820); border:1px solid var(--line,rgba(255,255,255,0.14)); width:100%; max-width:420px; max-height:100%; overflow-y:auto; padding:30px 28px 26px; color:var(--white,#fff);}
.wa-box h2{margin:0 0 6px; font-family:'Bebas Neue',sans-serif; font-size:2rem; letter-spacing:0.03em; text-transform:uppercase; font-weight:400;}
.wa-sub{margin:0 0 12px; color:var(--muted,#A7ACB4); font-size:0.9rem;}
.wa-x{position:absolute; right:10px; top:8px; width:36px; height:36px; background:none; border:0; color:var(--muted,#A7ACB4); font-size:1.6rem; line-height:1; cursor:pointer;}
.wa-x:hover{color:var(--white,#fff);}
.wa-tabs{display:flex; margin:10px 0 4px;}
.wa-tabs button{flex:1; padding:11px; background:transparent; border:1px solid var(--line,rgba(255,255,255,0.14)); color:var(--white,#fff); font:inherit; font-size:0.74rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; cursor:pointer;}
.wa-tabs button.on{background:var(--accent,#70D8B5); border-color:var(--accent,#70D8B5); color:var(--ink,#0B0D10);}
.wa-box label{display:block; margin:14px 0 6px; font-size:0.72rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted,#A7ACB4);}
.wa-box input{width:100%; box-sizing:border-box; background:var(--ink,#0B0D10); border:1px solid var(--line,rgba(255,255,255,0.14)); color:var(--white,#fff); padding:13px 14px; font:inherit; font-size:1rem;}
.wa-box input:focus{outline:none; border-color:var(--accent,#70D8B5);}
.wa-pw{position:relative;}
.wa-pw input{padding-right:64px;}
.wa-pw button{position:absolute; right:0; top:0; height:100%; padding:0 14px; background:none; border:0; color:var(--muted,#A7ACB4); font:inherit; font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; cursor:pointer;}
.wa-msg{display:none; margin:14px 0 0; padding:11px 13px; font-size:0.88rem; border:1px solid;}
.wa-msg.ok{display:block; border-color:var(--accent,#70D8B5); color:var(--accent,#70D8B5);}
.wa-msg.err{display:block; border-color:#ff6b6b; color:#ff6b6b;}
.wa-go{width:100%; margin-top:18px; padding:15px; background:var(--accent,#70D8B5); border:1px solid var(--accent,#70D8B5); color:var(--ink,#0B0D10); font:inherit; font-size:0.78rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; cursor:pointer;}
.wa-go:hover:not(:disabled){background:transparent; color:var(--accent,#70D8B5);}
.wa-go:disabled{opacity:0.5; cursor:not-allowed;}
.wa-lnk{display:inline-block; margin-top:14px; background:none; border:0; padding:0; color:var(--muted,#A7ACB4); font:inherit; font-size:0.85rem; text-decoration:underline; cursor:pointer;}
.wa-fine{margin:14px 0 0; font-size:0.78rem; color:var(--muted,#A7ACB4);}
.wa-fine a{color:inherit; text-decoration:underline;}
/* every piece of clickable text turns aqua on hover */
.nav-links a:not(.nav-cta):not(.cart-icon-btn),.nav-links .nav-contact-btn,.nav-acct > button,a.logo,.nav-panel a,.nav-panel button,.nav-acct-menu a,.nav-acct-menu button,.foot-link,.foot-social,.back-link,.remove-btn,.faq-question,.modal-close,.review-cta,footer a,main p a,main li a,.modal-card a{transition:color .15s ease;}
.nav-links a:not(.nav-cta):not(.cart-icon-btn):hover,.nav-links .nav-contact-btn:hover,.nav-acct > button:hover,a.logo:hover,
.nav-panel a:hover,.nav-panel button:hover,.nav-acct-menu a:hover,.nav-acct-menu button:hover,
.foot-link:hover,.foot-social:hover,.back-link:hover,.remove-btn:hover,
.faq-question:hover,.faq-question:hover *,.modal-close:hover,.review-cta:hover,.review-cta:hover *,
footer a:hover,main p a:hover,main li a:hover,.modal-card a:hover{color:var(--accent,#70D8B5) !important; opacity:1 !important;}

.wa-gh{margin-top:6px;}
.wa-g{display:flex; justify-content:center; margin-top:12px; min-height:44px;}
.wa-or{margin:14px 0 0; text-align:center; font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted,#A7ACB4);}