/* Shared site header + footer — single source of truth.
   Every page includes this and injects markup via site-nav.js / site-footer.js.
   Edit here, not in individual page <style> blocks.

   Every selector below is scoped to nav#site-nav / footer#site-footer on
   purpose — a page's own local .btn/.lockup rule (e.g. a page's own CTA
   button) is a plain class selector, so an unscoped rule here can lose the
   cascade to it purely on declaration order, regardless of which loads
   first. Scoping under the ID guarantees these rules always win inside the
   nav/footer without needing every page to avoid reusing these class names
   (confirmed broken on /retailers/ 2026-07-17 — its own local .btn rule for
   "Check this shop" was silently flattening the nav's Claim-your-profile
   outline border because both were equal-specificity plain class selectors). */

nav#site-nav .mark, footer#site-footer .mark { display: block; flex: none; }
nav#site-nav .lockup, footer#site-footer .lockup { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
nav#site-nav .lockup .wm, footer#site-footer .lockup .wm { font-weight: 600; letter-spacing: -0.02em; font-size: 19px; color: var(--ink); white-space: nowrap; }
footer#site-footer .lockup .wm.light { color: var(--white); }

nav#site-nav .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: "Manrope"; font-weight: 600; font-size: 16px; letter-spacing: -0.01em; border-radius: 11px; padding: 14px 22px; cursor: pointer; border: 1px solid transparent; text-decoration: none; transition: transform .12s ease, background .15s ease, box-shadow .15s ease; }
nav#site-nav .btn-primary { background: var(--emerald); color: var(--white); box-shadow: 0 1px 2px rgba(20,25,31,0.10); }
nav#site-nav .btn-primary:hover { background: #0e9468; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(16,168,119,0.28); }
nav#site-nav .btn-outline { background: transparent; color: var(--emerald-deep); border-color: var(--emerald); }
nav#site-nav .btn-outline:hover { background: var(--emerald-wash); border-color: var(--emerald-deep); }
nav#site-nav .btn-ghost { background: transparent; color: var(--ink); border-color: var(--hairline); }
nav#site-nav .btn-ghost:hover { border-color: var(--n4); }
nav#site-nav .cta-sm { display: none; }

nav#site-nav { position: sticky; top: 0; z-index: 50; background: rgba(250,249,245,0.86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--hairline); }
nav#site-nav .inner { display: flex; align-items: center; justify-content: space-between; height: 70px; }
nav#site-nav .right { display: flex; align-items: center; gap: 22px; }
nav#site-nav .nav-link { color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 15px; white-space: nowrap; }
nav#site-nav .nav-link:hover { color: var(--ink); }

footer#site-footer { background: var(--ink); color: #aeb6c0; padding: 64px 0 50px; }
footer#site-footer .frow { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; flex-wrap: wrap; padding-bottom: 36px; border-bottom: 1px solid var(--hairline-ink); }
footer#site-footer .fnav { display: flex; gap: 24px; flex-wrap: wrap; }
footer#site-footer .fnav a { color: #aeb6c0; text-decoration: none; font-weight: 600; font-size: 15px; white-space: nowrap; }
footer#site-footer .fnav a:hover { color: var(--white); }
footer#site-footer .fsite { font-family: "DM Mono", monospace; font-size: 13px; color: var(--emerald); }
footer#site-footer .fine { margin-top: 30px; font-size: 12.5px; line-height: 1.65; color: #7d8794; max-width: 760px; }
footer#site-footer details.footer-dir { border: none; margin: 28px 0 0; }
footer#site-footer details.footer-dir > summary { list-style: none; cursor: pointer; font-size: 13px; font-weight: 600; color: #7d8794; user-select: none; display: inline-flex; align-items: center; gap: 6px; padding: 0; }
footer#site-footer details.footer-dir > summary::-webkit-details-marker { display: none; }
footer#site-footer details.footer-dir > summary .arrow { font-size: 10px; transition: transform .15s; }
footer#site-footer details.footer-dir[open] > summary .arrow { transform: rotate(180deg); }
footer#site-footer .footer-trade-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
footer#site-footer .footer-trade-grid a { color: #aeb6c0; text-decoration: none; font-size: 13px; font-weight: 600; padding: 6px 10px; border: 1px solid #2b3542; border-radius: 6px; }
footer#site-footer .footer-trade-grid a:hover { color: #ffffff; border-color: #3d4f63; }

@media (max-width: 620px) {
  nav#site-nav .lockup .wm, footer#site-footer .lockup .wm { font-size: 17px; }
  nav#site-nav .inner { height: 62px; }
  nav#site-nav .right { gap: 8px; }
  nav#site-nav .nav-link { display: none; }
  nav#site-nav .btn { font-size: 15px; padding: 12px 15px; }
  nav#site-nav .cta-lg { display: none; }
  nav#site-nav .cta-sm { display: inline; }
}