/* The one site header (tools/nav.mjs writes the markup into every page). Every size here is
   fixed so the bar is identical on every page: same height, same logo spot, same spacing.
   The active link is marked with a background, never a weight change, so nothing shifts. */
.sxnav { position: sticky; top: 0; z-index: 30; margin: 0; padding: env(safe-area-inset-top, 0px) 0 0;
  background: linear-gradient(var(--header-top, #f3f1e7), var(--header-bot, #c9c4b4));
  border: 0; border-bottom: 2px solid var(--bvl-hi, #ffffff); box-shadow: 0 2px 0 var(--bvl-lo, #808080);
  font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif; font-size: 15px; line-height: 1; }
.sxnav-in { box-sizing: border-box; max-width: 1080px; height: 64px; margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; gap: 16px; }
.sxnav-brand { flex: 0 0 auto; font-family: 'Press Start 2P', monospace; font-size: 14px; letter-spacing: 0;
  color: var(--title, #02007f); text-decoration: none; white-space: nowrap; }
.sxnav-links { flex: 1 1 auto; display: flex; justify-content: flex-end; align-items: center; gap: 4px; margin: 0; padding: 0; }
.sxnav-links a { flex: 0 0 auto; display: inline-flex; align-items: center; height: 36px; padding: 0 10px; border-radius: 6px;
  font: inherit; font-weight: 500; color: var(--muted, #4a4a3e); text-decoration: none; white-space: nowrap; border: 2px solid transparent; }
.sxnav-links a:hover { color: var(--ink, #161616); background: rgba(0, 0, 0, .05); }
.sxnav-links a[aria-current="page"] { color: var(--ink, #161616); background: rgba(0, 0, 0, .08); box-shadow: inset 0 -3px 0 var(--title, #02007f); }
.sxnav-links .sxnav-cta { margin-left: 6px; color: var(--panel-ink, var(--ink, #161616));
  background: linear-gradient(var(--bvl-hi, #ffffff), var(--win, #ece9d8));
  border-color: var(--bvl-hi, #ffffff) var(--bvl-lo, #808080) var(--bvl-lo, #808080) var(--bvl-hi, #ffffff); border-radius: 3px; }
.sxnav-links .sxnav-cta[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--title, #02007f); }
.sxnav-cart { flex: 0 0 auto; height: 36px; }
.sxfoot { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin-top: 8px; }

/* Phones: two fixed rows on every page. Brand and Cart on top, the links in one scrolling strip. */
@media (max-width: 860px) {
  .sxnav-in { height: auto; display: grid; grid-template-columns: 1fr auto; grid-template-rows: 52px 44px;
    column-gap: 12px; row-gap: 0; padding: 0 16px; }
  .sxnav-brand { grid-column: 1; grid-row: 1; align-self: center; }
  .sxnav-cart { grid-column: 2; grid-row: 1; align-self: center; }
  .sxnav-links { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; margin: 0 -16px; padding: 0 12px 6px; -webkit-overflow-scrolling: touch; }
  .sxnav-links::-webkit-scrollbar { display: none; }
  .sxnav-links a { height: 34px; font-size: 14px; }
}