/* Universal header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(243, 242, 237, .84);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.site-header.is-scrolled, .site-header.is-open { border-bottom-color: var(--line); }
.site-header.is-open { background: var(--bone); }

.header-inner { display: flex; align-items: center; gap: 16px; height: var(--header-h); }

/* Brand lockup (also used in the footer) */
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); flex: none; border-radius: 6px; }
.brand-cube { width: 44px; height: 44px; flex: none; }

.nav { display: flex; align-items: center; gap: 30px; margin-left: 40px; }
.nav-link {
  position: relative; font-size: 15px; font-weight: 500; color: var(--ink-2); text-decoration: none; padding: 6px 0; white-space: nowrap;
  transition: color .15s var(--ease);
}
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px;
  background: var(--lime); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease);
}
.nav-link:hover { color: var(--ink); }
.nav-link:hover::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.cta-short { display: none; }

.nav-toggle {
  display: none; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--paper); position: relative; flex: none;
}
.nav-toggle-bar {
  position: absolute; left: 11px; right: 11px; height: 1.75px; border-radius: 2px; background: var(--ink);
  transition: transform .25s var(--ease), top .25s var(--ease);
}
.nav-toggle-bar:nth-child(1) { top: 15px; }
.nav-toggle-bar:nth-child(2) { top: 22px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { top: 18.5px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { top: 18.5px; transform: rotate(-45deg); }

.mobile-nav { border-top: 1px solid var(--line); background: var(--bone); }
.mobile-nav-inner { display: grid; padding-block: 8px 20px; }
.mobile-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 2px; border-bottom: 1px solid var(--line);
  font-stretch: var(--semi); font-size: 19px; font-weight: 650; letter-spacing: -0.015em; text-decoration: none; color: var(--ink);
}
.mobile-link .ico { color: var(--ink-3); }
.mobile-nav .btn { margin-top: 20px; }

@media (max-width: 1100px) {
  .nav { gap: 22px; margin-left: 28px; }
}
@media (max-width: 920px) {
  .nav { display: none; }
  .nav-toggle { display: block; }
  .header-actions .nav-ext { display: none; }
}
@media (min-width: 921px) {
  .mobile-nav { display: none !important; }
}
@media (max-width: 420px) {
  .cta-long { display: none; }
  .cta-short { display: inline; }
  .header-actions { gap: 8px; }
  .header-cta { padding: 0 13px; }
  .site-header .wm { font-size: 20px; }
}
/* the open menu carries its own CTA, so the header one steps aside */
@media (max-width: 920px) { .site-header.is-open .header-cta { visibility: hidden; } }

/* Cart link: shown by main.js only while the cart holds something; the count sits in a small ink
   tag with a lime figure, like a part counter on a plate */
.nav-cart { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.nav-cart[hidden] { display: none; }
.nav-cart .ico { width: 20px; height: 20px; }
.cart-n {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 6px; display: inline-grid; place-items: center;
  background: var(--ink); color: var(--lime); font: 600 11.5px/1 var(--font-mono);
}
.mobile-link[hidden] { display: none; }

/* Account link: "Sign in" when signed out, avatar + "Account" when signed in (set by main.js) */
.nav-account { display: inline-flex; align-items: center; gap: 8px; }
.acct-avatar {
  width: 26px; height: 26px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; flex: none;
  background: var(--ink); color: var(--lime); font-stretch: var(--wide); font-size: 10.5px; font-weight: 800; letter-spacing: -.01em;
}
.acct-avatar[hidden] { display: none; }
.acct-avatar img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 920px) {
  .header-actions .nav-account { display: none; }
  .header-actions .nav-account.is-signed-in { display: inline-flex; padding: 0; }
  .header-actions .nav-account.is-signed-in [data-account-label] { display: none; }
  .header-actions .nav-account.is-signed-in .acct-avatar { width: 36px; height: 36px; font-size: 12.5px; }
  .header-actions .nav-account::after { display: none; }
}