/* ============================================================================
   nav — see /DESIGN-SYSTEM.md. Tokens only, no invented values.

   Loaded after main.css, so the selectors below are deliberately scoped one
   level deeper (`.s3-nav .x`) wherever main.css still holds an older rule for
   the same element. Nothing here restyles anything outside the header.

   The rule that shapes everything else: the nav is identical at y=0 and at
   y=4000. main.js still toggles `.is-scrolled` on scroll — every declaration
   that class used to change is restated for it below, so the class is inert.
   ========================================================================== */

/* --------------------------------------------------------------- the bar -- */

.s3-nav,
.s3-nav.is-scrolled{
  --s3-nav-h: 68px;                 /* one height, at every scroll position */

  position: sticky;
  top: 0;
  z-index: 100;
  padding: 0;

  background: var(--glass-1);
  -webkit-backdrop-filter: var(--blur);
          backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--hairline);
  box-shadow: none;
  transition: none;                 /* nothing about the bar changes, ever */
}

/* Without backdrop-filter the 4% wash is not enough to sit over content. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .s3-nav,
  .s3-nav.is-scrolled{ background: var(--surface-1) }
}

/* The admin bar is fixed above 600px; keep the nav clear of it. */
body.admin-bar .s3-nav{ top: 32px }
@media screen and (max-width: 782px){ body.admin-bar .s3-nav{ top: 46px } }
@media screen and (max-width: 600px){ body.admin-bar .s3-nav{ top: 0 } }

.s3-nav-inner{
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--s3-nav-h);
  width: 100%;
  max-width: var(--w-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ------------------------------------------------------------------ logo -- */

.s3-nav .s3-logo{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  color: var(--text);
}
/* The mark is the mark — no gradient tile, no border, no hover lift. */
.s3-nav .s3-logo-mark{
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  background: none;
  border: 0;
  transform: none;
  transition: none;
}
.s3-nav .s3-logo:hover .s3-logo-mark{ transform: none; border-color: transparent }
.s3-nav .s3-logo-text{
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--text);
}

/* ------------------------------------------------------------------ menu -- */
/* 14px, muted, weight 500. Never white at rest, never 16px, no underline. */

.s3-nav .s3-nav-links{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: center;
}
.s3-nav .s3-menu{
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.s3-nav .s3-menu li{ position: relative }
.s3-nav .s3-menu a{
  display: block;
  padding: 8px 12px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--muted);
  background: none;
  white-space: nowrap;
  transition: color var(--t-quick) var(--ease);
}
.s3-nav .s3-menu a::after{ content: none }   /* main.css drew an accent underline */
.s3-nav .s3-menu a:hover,
.s3-nav .s3-menu a:focus-visible,
.s3-nav .s3-menu .current-menu-item > a,
.s3-nav .s3-menu .current-menu-parent > a,
.s3-nav .s3-menu .current-menu-ancestor > a,
.s3-nav .s3-menu .current_page_item > a{
  color: var(--text);
  background: none;
}

/* Depth-2 children, if the site owner adds any. */
.s3-nav .s3-menu .sub-menu{
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 190px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-quick) var(--ease), visibility var(--t-quick) var(--ease);
}
.s3-nav .s3-menu li:hover > .sub-menu,
.s3-nav .s3-menu li:focus-within > .sub-menu{ opacity: 1; visibility: visible }
.s3-nav .s3-menu .sub-menu a{ border-radius: var(--r-chip); white-space: normal }

/* --------------------------------------------------------------- actions -- */

.s3-nav .s3-nav-actions,
.s3-nav .s3-nav-auth{
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.s3-nav .s3-nav-auth{ order: 1 }   /* balance + cart first, then account + CTA */

/* Token balance — live product data, so this is the one accent in the nav. */
.s3-nav .s3-credits{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  background: var(--glass-1);
  border: 1px solid var(--hairline);
  transition: background var(--t-quick) var(--ease),
              border-color var(--t-quick) var(--ease);
}
.s3-nav .s3-credits:hover{ background: var(--glass-2); border-color: var(--hairline-2) }
.s3-nav .s3-credits-val{
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--accent);
}
.s3-nav .s3-credits-label{
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--faint);
}
.s3-nav .s3-credits-plus{
  display: inline-block;
  width: auto;
  height: auto;
  background: none;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: var(--faint);
  transition: color var(--t-quick) var(--ease);
}
.s3-nav .s3-credits:hover .s3-credits-plus{ color: var(--text) }

/* Cart. The count is not an accent — one accent per nav, and it is the balance. */
.s3-nav .s3-nav-icon{
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-pill);
  color: var(--muted);
  background: none;
  border: 0;
  transition: color var(--t-quick) var(--ease),
              background var(--t-quick) var(--ease);
}
.s3-nav .s3-nav-icon:hover{
  color: var(--text);
  background: var(--glass-1);
}
.s3-nav .s3-cart-count{
  position: absolute;
  top: 0;
  right: -1px;
  display: grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--glass-4);
  color: var(--text);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
}

/* Account. A 32px avatar in the bar; a labelled pill inside the mobile sheet. */
.s3-nav .s3-nav-avatar{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
  overflow: hidden;
  color: var(--muted);
  transition: border-color var(--t-quick) var(--ease), color var(--t-quick) var(--ease);
}
.s3-nav .s3-nav-avatar:hover{ border-color: var(--hairline-2); color: var(--text) }
.s3-nav .s3-nav-avatar img{
  width: 30px;
  height: 30px;
  border-radius: var(--r-pill);
  object-fit: cover;
  display: block;
}
.s3-nav .s3-nav-avatar-label{ display: none; font-size: 14px; font-weight: 500 }

.s3-nav .s3-nav-login{
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  transition: color var(--t-quick) var(--ease);
}
.s3-nav .s3-nav-login:hover{ color: var(--text) }

/* The one button in the nav — .s3-btn-nav, restated here only because
   main.css still holds a `.s3-nav-cta` rule that would otherwise win.
   Glass, not lime: the filled accent CTA belongs to the hero. */
.s3-nav .s3-nav-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 18px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  background: var(--glass-3);
  color: var(--text);
  border: 1px solid var(--hairline);
  transition: background var(--t-quick) var(--ease),
              border-color var(--t-quick) var(--ease);
}
.s3-nav .s3-nav-cta:hover{ background: var(--glass-4); border-color: var(--hairline-2) }

.s3-nav .s3-nav-toggle{
  display: none;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
  background: var(--glass-1);
  color: var(--text);
  cursor: pointer;
  transition: background var(--t-quick) var(--ease);
}
.s3-nav .s3-nav-toggle:hover{ background: var(--glass-2) }

/* -------------------------------------------------------- the mobile sheet -- */
/* Above the breakpoint the group is `display:contents`, so the menu and the
   auth controls are direct children of the bar. Below it, the same markup —
   no duplicates — becomes the panel `[data-s3-nav-toggle]` opens. main.js
   keeps driving it: it toggles `.is-open` on `[data-s3-nav]` and closes on any
   `.s3-menu a` click. */

.s3-nav-sheet{ display: contents }

/* The balance reads fine as a bare figure once the row gets tight. */
@media (max-width: 1199px){
  .s3-nav .s3-credits-label{ display: none }
}

/* Six primary links plus the logo, balance, cart, account and CTA need ~1100px
   of row. Below that the menu and the auth controls fold into the sheet. */
@media (max-width: 1159px){
  .s3-nav-sheet{
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 10px var(--gutter) 16px;
    background: var(--surface-1);
    border-bottom: 1px solid var(--hairline);
    -webkit-backdrop-filter: var(--blur);
            backdrop-filter: var(--blur);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--t-base) var(--ease),
                transform var(--t-base) var(--ease),
                visibility var(--t-base) var(--ease);
  }
  .s3-nav.is-open .s3-nav-sheet{ opacity: 1; visibility: visible; transform: none }

  /* main.css still turns this into its own fixed drop-panel below 768px.
     Fold it back into normal flow so the sheet is the only panel. */
  .s3-nav .s3-nav-links{
    position: static;
    inset: auto;
    z-index: auto;
    flex: none;
    display: block;
    padding: 0;
    background: none;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    border-bottom: 0;
    transform: none;
    transition: none;
  }
  .s3-nav .s3-menu{ flex-direction: column; align-items: stretch; gap: 0 }
  .s3-nav .s3-menu li + li{ border-top: 1px solid var(--hairline) }
  .s3-nav .s3-menu a{ padding: 14px 2px; border-radius: 0 }

  .s3-nav .s3-menu .sub-menu{
    position: static;
    min-width: 0;
    margin: 0 0 8px;
    padding: 0 0 0 14px;
    background: none;
    border: 0;
    border-radius: 0;
    opacity: 1;
    visibility: visible;
  }
  .s3-nav .s3-menu .sub-menu li + li{ border-top: 1px solid var(--hairline) }
  .s3-nav .s3-menu .sub-menu a{ padding-block: 11px }

  .s3-nav .s3-nav-auth{
    order: 0;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--hairline);
  }
  .s3-nav .s3-nav-cta{ flex: 1 1 auto }
  .s3-nav .s3-nav-login{ height: 36px; padding-inline: 14px }

  /* Account becomes a labelled control now that it has the room. */
  .s3-nav .s3-nav-avatar{ height: 36px; padding: 0 14px 0 2px; color: var(--text) }
  .s3-nav .s3-nav-avatar img{ width: 30px; height: 30px }
  .s3-nav .s3-nav-avatar-label{ display: inline }

  .s3-nav .s3-nav-toggle{ display: grid }

  /* Below the breakpoint every control in the bar is driven by a thumb, so
     each one gets a 44px box. The bar is 68px tall, so nothing has to move to
     make room; the glyphs stay the size they were. */
  .s3-nav .s3-nav-toggle,
  .s3-nav .s3-nav-icon{ width: 44px; height: 44px }
  /* The mark is 26px tall and is the only way back to the homepage from a
     phone. It is already a centred inline-flex row inside a 68px bar, so a
     min-height moves nothing. */
  .s3-nav .s3-logo{ min-height: 44px }
  /* The badge is placed against the glyph, not against the box, so it follows
     the box growing from 36 to 44. */
  .s3-nav .s3-cart-count{ top: 4px; right: 3px }

  .s3-nav .s3-nav-cta,
  .s3-nav .s3-nav-login,
  .s3-nav .s3-nav-avatar,
  .s3-nav .s3-credits{ height: 44px }
}

@media (max-width: 420px){
  .s3-nav .s3-credits-plus{ display: none }
  .s3-nav-inner{ gap: 8px }
}