/* Flavor By Design – Additive pill nav (applies only when JS adds .fbd-header/.fbd-nav/.fbd-pill) */
.fbd-header{
  position: sticky; top: 0; z-index: 50;
  display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center;
  padding: .8rem 1rem;
  background: color-mix(in oklab, #121826, transparent 8%);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid #1a2232;
}
.fbd-nav{
  display: grid; gap: .5rem;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  align-items: stretch;
}
.fbd-nav .fbd-pill{
  display:block; text-align:center; text-decoration:none;
  padding:.8rem 1rem; border-radius:999px; font-weight:800; letter-spacing:.2px;
  background: color-mix(in oklab, #121826, transparent 12%);
  color: #9FB3C8; border:1px solid #263244;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .06s ease;
}
.fbd-nav .fbd-pill:hover{ background: color-mix(in oklab, #121826, #fff 2%); color: #E6EDF3; }
.fbd-nav .fbd-pill:active{ transform: translateY(1px); }
.fbd-nav .fbd-pill[aria-current="page"]{
  color:#0B0F14; background:#C08457; border-color: color-mix(in oklab, #C08457, #000 15%);
}

/* Mobile: convert to horizontal scrollable row */
@media (max-width: 760px){
  .fbd-header{ grid-template-columns: auto auto; grid-template-areas: 'brand toggle' 'nav nav'; }
  .fbd-header > :first-child{ grid-area: brand; }
  .fbd-header > :last-child{ grid-area: toggle; justify-self: end; }
  .fbd-nav{ grid-area: nav; grid-auto-flow: column; grid-auto-columns: max-content; overflow:auto; padding-bottom:.25rem; }
  .fbd-nav .fbd-pill{ white-space: nowrap; }
  .fbd-nav::-webkit-scrollbar{ height: 6px; }
}