/* The homepage header is the shared storefront navigation. */
:root { --nav-h: 68px; }
html { scroll-padding-top: var(--nav-h); }
body.nav-offset { padding-top: var(--nav-h); }
.nav-shell {
  --nav-paper: #f4f1e8;
  --nav-ink: #101311;
  --nav-line: rgb(16 19 17 / .24);
  --nav-active: #a83224;
  position: fixed; inset: 0 0 auto; z-index: 30; height: var(--nav-h);
  display: grid; grid-template-columns: minmax(190px, 1fr) auto minmax(100px, 1fr);
  align-items: center; gap: 24px; padding: 0 2vw;
  color: var(--nav-ink); border-bottom: 1px solid var(--nav-line);
  background: var(--nav-paper); background: color-mix(in srgb, var(--nav-paper) 91%, transparent);
  backdrop-filter: blur(16px); font-family: Arial, Helvetica, sans-serif; color-scheme: light;
}
.nav-shell a { color: inherit; text-decoration: none; }
.nav-shell .wordmark { display: flex; align-items: center; gap: 13px; width: fit-content; min-height: 44px; }
.nav-shell .brand-name { font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: .13em; white-space: nowrap; }
.nav-shell .brand-glyph { position: relative; display: block; width: 45px; height: 27px; flex: 0 0 45px; margin: 0; transform: none; }
.nav-shell .brand-glyph b { position: absolute; inset: 0 auto auto 0; font-size: 26px; line-height: 1; letter-spacing: -.14em; }
.nav-shell .glyph-line { position: absolute; z-index: 1; left: 0; right: 0; top: 13px; height: 1px; background: currentColor; }
.nav-shell .glyph-eye { position: absolute; z-index: 2; right: 1px; top: 6px; width: 15px; height: 15px; border: 1.5px solid currentColor; border-radius: 50%; background: var(--nav-paper); box-shadow: inset 0 0 0 4px var(--nav-paper), inset 0 0 0 5px currentColor; }
.nav-shell .glyph-eye::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: currentColor; }
.nav-shell .nav-links { display: flex; align-items: center; gap: 30px; }
.nav-shell .nav-links a, .nav-shell .nav-actions > a, .nav-shell .menu { display: inline-flex; align-items: center; min-height: 44px; font: 11px/1.3 Arial, Helvetica, sans-serif; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.nav-shell .nav-links a { position: relative; min-height: var(--nav-h); }
.nav-shell a[aria-current] { color: var(--nav-active); }
.nav-shell .nav-links a[aria-current]::after { content: ''; position: absolute; bottom: 14px; left: 0; right: 0; height: 1px; background: currentColor; }
.nav-shell .nav-actions { display: flex; align-items: center; justify-self: end; gap: 20px; }
.nav-shell .nav-actions > a { justify-content: center; }
.nav-shell .menu { display: none; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.nav-shell .mobile-nav { display: none; }
.nav-shell a:hover { color: var(--nav-active); opacity: 1; }
.nav-shell :is(a, button):focus-visible { outline: 2px solid var(--nav-active); outline-offset: 4px; }
.skip:focus { z-index: 40; }
.nav-offset .product-hero { min-height: calc(100svh - var(--nav-h)); }
.catalog-toolbar { scroll-margin-top: 16px; }
.legal-page .nav-shell { background: color-mix(in srgb, var(--nav-paper) 91%, transparent); backdrop-filter: blur(16px); }

@media (max-width: 1000px) {
  :root { --nav-h: 60px; }
  .nav-shell { grid-template-columns: 1fr auto; gap: 16px; padding: 0 16px; }
  .nav-shell .nav-links { display: none; }
  .nav-shell .menu { display: inline-flex; min-width: 44px; justify-content: flex-end; }
  .nav-shell .mobile-nav { position: absolute; top: var(--nav-h); left: 0; right: 0; padding: 14px 16px 22px; max-height: calc(100dvh - var(--nav-h)); overflow-y: auto; background: var(--nav-paper); border-bottom: 1px solid var(--nav-line); }
  .nav-shell .mobile-nav:not([hidden]) { display: grid; gap: 0; }
  .nav-shell .mobile-nav a { display: flex; align-items: center; min-height: 48px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
  .nav-shell .mobile-nav a[aria-current] { text-decoration: underline; text-underline-offset: 6px; }
}
@media (max-width: 380px) {
  .nav-shell { gap: 10px; padding: 0 12px; }
  .nav-shell .wordmark { gap: 7px; }
  .nav-shell .brand-name { font-size: 10px; letter-spacing: .08em; }
  .nav-shell .nav-actions { gap: 12px; }
  .nav-shell .nav-actions > a, .nav-shell .menu { font-size: 10px; letter-spacing: .03em; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-shell a { transition: none; }
}