/* SITE BAR — styles for the shared top bar that site-bar.js draws into <nav data-chrome-nav>.
   Scoped to that attribute so pages that still carry their own bar are unaffected.
   Uses the variables in site-tokens.css. */
nav[data-chrome-nav] { position: fixed; top: 0; left: 0; right: 0; z-index: 80; height: var(--nav-h); background: var(--navbg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); padding: 0 20px; display: flex; align-items: center; gap: 12px; font-family: var(--font); }
@media (min-width: 701px) { nav[data-chrome-nav] { padding: 0 40px; } }
@media (min-width: 1100px) { nav[data-chrome-nav] { padding: 0 60px; } }
nav[data-chrome-nav] .nav-title { font-size: 19px; font-weight: 500; color: var(--ink); letter-spacing: 0.05em; text-transform: lowercase; white-space: nowrap; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-decoration: none; display: flex; align-items: center; height: 100%; }
nav[data-chrome-nav] .nav-links { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
nav[data-chrome-nav] .nav-btn { background: var(--accent); border: 1px solid var(--accent); border-radius: 22px; padding: 12px 26px; font-family: var(--font); font-size: 13px; font-weight: 500; letter-spacing: 0.12em; text-transform: lowercase; color: var(--on-accent); cursor: pointer; white-space: nowrap; transition: background 0.2s, border-color 0.2s; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; box-sizing: border-box; }
nav[data-chrome-nav] .nav-btn:hover { background: var(--accent-hi); border-color: var(--accent-hi); }
nav[data-chrome-nav] .nav-cart { position: relative; background: none; border: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; text-decoration: none; }
nav[data-chrome-nav] .nav-cart svg { width: 18px; height: 18px; stroke: var(--ink); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
nav[data-chrome-nav] .nav-cart-count { position: absolute; top: -5px; right: -5px; background: var(--accent); color: var(--on-accent); border-radius: 20px; font-size: 10px; font-weight: 600; padding: 1px 5px; display: none; min-width: 18px; text-align: center; }
nav[data-chrome-nav] .nav-cart-count.on { display: block; }
nav[data-chrome-nav] .btn-text-short { display: none; }
@media (max-width: 700px) { nav[data-chrome-nav] .nav-title { font-size: 17px; } }
@media (max-width: 500px) {
  nav[data-chrome-nav] .nav-title { font-size: 14px; letter-spacing: 0.03em; }
  nav[data-chrome-nav] .nav-btn { font-size: 11px; padding: 10px 22px; letter-spacing: 0.08em; }
  nav[data-chrome-nav] .btn-text-long { display: none; }
  nav[data-chrome-nav] .btn-text-short { display: inline; }
}
/* the menu panel follows the theme on pages that use the shared bar */
nav[data-chrome-nav] ~ #menu-panel { background: var(--panel); }