/* One header for the whole site.
 *
 * Marion, 2026-08-11: "The header changes when we click FAQ or Wholesale. When
 * we click Wholesale the header disappears entirely. When we click FAQ, Where,
 * About and such it reverts back to the old header."
 *
 * She was right on both counts. The homepage and product pages had the new
 * header; 31 other pages still had the old one, and the wholesale portal's nav
 * was a bare logo with no links at all, so it read as no header.
 *
 * Deliberately self-contained. It cannot use the new design's CSS variables
 * (--cream, --hairline, --display) because most pages load base.css instead,
 * which defines a different set. Every value is literal so the header looks the
 * same wherever it is dropped in. Scoped under .fm-header so it cannot collide
 * with a page's own nav styles.
 */
.fm-header {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 18px 40px;
  background: #F5EDDC;
  border-bottom: 1px solid #ECE4D4;
  position: sticky; top: 0; z-index: 60;
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
.fm-header a { text-decoration: none; }
.fm-header .fm-logo { display: inline-flex; align-items: center; line-height: 0; }
.fm-header .fm-logo img { height: 34px; width: auto; display: block; }

.fm-header .fm-links { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; }
.fm-header .fm-links a {
  font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase;
  color: #1C1208; transition: color .2s ease;
}
.fm-header .fm-links a:hover,
.fm-header .fm-links a[aria-current="page"] { color: #A84519; }

.fm-header .fm-right { display: flex; align-items: center; gap: 16px; }
.fm-header .fm-age {
  font-size: 11px; letter-spacing: 1.4px; color: #1C1208;
  border: 1px solid #ECE4D4; padding: 7px 10px;
}
.fm-header .fm-cart {
  font-size: 11px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase;
  background: #0E0B08; color: #F5EDDC; padding: 13px 22px;
  transition: background .2s ease;
}
.fm-header .fm-cart:hover { background: #A84519; }

.fm-header .fm-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; padding: 0;
  background: none; border: 1px solid #ECE4D4; cursor: pointer; order: -1;
}
.fm-header .fm-toggle span {
  display: block; width: 18px; height: 1.5px; background: #1C1208; margin: 0 auto;
  transition: transform .25s ease, opacity .2s ease;
}
.fm-header .fm-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.fm-header .fm-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.fm-header .fm-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 980px) {
  .fm-header { padding: 14px 20px; flex-wrap: wrap; }
  .fm-header .fm-toggle { display: flex; }
  .fm-header .fm-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: #F5EDDC; border-bottom: 1px solid #ECE4D4;
    padding: 8px 20px 20px;
  }
  .fm-header .fm-links.is-open { display: flex; }
  .fm-header .fm-links li { border-top: 1px solid #ECE4D4; }
  .fm-header .fm-links a { display: block; padding: 15px 0; font-size: 12px; }
  .fm-header .fm-cart { padding: 11px 16px; }
  .fm-header .fm-age { display: none; }
}