/* Canonical site chrome — nav 9→5 consolidation, 2026-08-21 (PRD §3a).
 * Loaded LAST on every page that ships the canonical <nav class="top"> and
 * canonical <footer>, so pages whose inline <style> predates the 5-tab nav
 * (reserve: no nav menu styles at all; software: no ul styles; shop/account/
 * locations-index: no .foot-top footer styles) still render both correctly.
 * On pages that already define identical rules inline this is a no-op re-
 * declaration of the same values. Same fallback-token convention as
 * nav-responsive.css: var(--x, literal) so load order never breaks it. */

/* NAV (desktop base — mobile drawer behavior stays in nav-responsive.css) */
nav.top { position: sticky; top: 0; z-index: 60; background: rgba(5,5,5,0.85); backdrop-filter: blur(16px) saturate(1.2); border-bottom: 1px solid var(--rule, rgba(255,255,255,0.08)); }
/* 4 列:logo | tabs | 门店状态挂件(store-data.js 动态塞在 .cta 前)| 按钮区。
   旧 3 列网格会把 .cta 挤到第二行 —— 产线首页同款老毛病,统一导航时一并修掉。 */
nav.top .inner { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; padding: 14px var(--gutter, 40px); gap: 32px; max-width: var(--max, 1640px); margin: 0 auto; }
.yf-nav-status { justify-self: end; }
nav.top ul { display: flex; gap: 36px; list-style: none; margin: 0; padding: 0; }
nav.top ul a { font-family: var(--display, "Space Grotesk", sans-serif); font-size: 14px; font-weight: 500; color: var(--soft, rgba(233,231,226,0.62)); transition: color .15s; text-decoration: none; }
nav.top ul a:hover { color: var(--white, #fff); }
nav.top ul a.on { color: var(--ignite, #f4c542); }
nav.top .cta { display: flex; gap: 12px; align-items: center; }

/* Account icon (right corner, PRD §3a) */
.nav-account { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--rule-2, rgba(255,255,255,0.16)); border-radius: 50%; color: var(--soft, rgba(233,231,226,0.62)); transition: color .15s, border-color .15s; flex: 0 0 auto; }
.nav-account:hover { color: var(--white, #fff); border-color: var(--white, #fff); }
.nav-account svg { width: 16px; height: 16px; display: block; }
@media (max-width: 880px) {
  /* inside the drawer the icon reads as a row, not a floating circle */
  .nav-menu .cta .nav-account { width: auto; height: auto; border: none; border-radius: 0; padding: 10px 4px; justify-content: flex-start; gap: 10px; }
  .nav-menu .cta .nav-account::after { content: "Account"; font-family: var(--display, "Space Grotesk", sans-serif); font-size: 14px; font-weight: 500; }
}

/* FOOTER (canonical columns: brand / Products / Partner / Company / Contact) */
footer { background: var(--black, #0a0a0a); color: var(--bone, #e9e7e2); padding: 110px 0 32px; border-top: 1px solid var(--rule-2, rgba(255,255,255,0.16)); position: relative; }
footer .inner { max-width: var(--max, 1640px); margin: 0 auto; padding: 0 var(--gutter, 40px); }
.foot-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 56px; padding-bottom: 56px; border-bottom: 1px solid var(--rule, rgba(255,255,255,0.08)); }
.foot-big { font-family: var(--display, "Space Grotesk", sans-serif); font-weight: 700; font-size: clamp(60px, 8vw, 120px); color: var(--white, #fff); line-height: 0.9; letter-spacing: -0.04em; }
.foot-big .accent { color: var(--ignite, #f4c542); }
.foot-tag { margin-top: 24px; font-family: var(--body, "Inter", sans-serif); font-size: 14px; color: var(--soft, rgba(233,231,226,0.62)); max-width: 340px; line-height: 1.6; font-weight: 300; }
footer h5 { font-family: var(--mono, ui-monospace, monospace); font-size: 11px; letter-spacing: 0.18em; color: var(--soft, rgba(233,231,226,0.62)); text-transform: uppercase; margin: 0 0 18px; font-weight: 500; }
footer ul { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; }
footer ul a { font-family: var(--display, "Space Grotesk", sans-serif); font-weight: 500; font-size: 14.5px; color: var(--bone, #e9e7e2); text-decoration: none; }
footer ul a:hover { color: var(--ignite, #f4c542); }
.foot-bot { display: grid; grid-template-columns: 1fr 1fr 1fr; padding-top: 26px; font-family: var(--mono, ui-monospace, monospace); font-size: 11px; color: var(--faint, rgba(233,231,226,0.55)); align-items: center; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
.foot-bot a { color: inherit; text-decoration: none; }
.foot-bot a:hover { color: var(--ignite, #f4c542); }
.foot-bot .mid { text-align: center; }
.foot-bot .right { text-align: right; }
.foot-bot .right span { color: var(--signal, #a3d977); }
@media (max-width: 1100px) { .foot-top { grid-template-columns: 1fr 1fr; gap: 40px; } }
@media (max-width: 560px) { .foot-top { grid-template-columns: 1fr; } .foot-bot { grid-template-columns: 1fr; gap: 6px; } .foot-bot .mid, .foot-bot .right { text-align: left; } }