.buyer-nav { position: sticky; top: 0; z-index: 50; background: #fff; color: var(--sps-neutral-900); box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1); font-family: inherit; }
.buyer-nav, .buyer-nav * { box-sizing: border-box; }
.buyer-nav__inner { position: relative; display: flex; align-items: center; justify-content: space-between; max-width: 80rem; min-height: 4rem; margin: 0 auto; padding: .5rem 1.5rem; gap: 1rem; }
.buyer-nav__logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.buyer-nav__logo img { display: block; height: 3rem; width: auto; max-width: 100%; }
.buyer-nav a { color: inherit; text-decoration: none; }
.buyer-nav a:hover { color: var(--sps-primary); }
.buyer-nav button { color: inherit; background: transparent; border: 0; cursor: pointer; font: inherit; }
.buyer-nav a:focus-visible, .buyer-nav button:focus-visible { outline: 2px solid var(--sps-primary); outline-offset: 3px; border-radius: 3px; }
.buyer-nav [aria-current="page"] { color: var(--sps-primary); font-weight: 700; }
.buyer-nav__links { display: flex; align-items: center; gap: 1.25rem; }
.buyer-nav__links > a, .buyer-nav__group-heading > a { display: block; padding: .75rem .5rem; font-size: .875rem; font-weight: 500; text-transform: uppercase; }
.buyer-nav__group-heading { display: flex; align-items: center; }
.buyer-nav__group[data-active-section="true"] > .buyer-nav__group-heading > a { color: var(--sps-primary); font-weight: 700; }
.buyer-nav__submenu-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; padding: .5rem; }
.buyer-nav__submenu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.buyer-nav .buyer-nav__about-toggle { gap: .75rem; padding: .75rem .5rem; font-size: .875rem; font-weight: 500; text-transform: uppercase; }
.buyer-nav__group[data-active-section="true"] .buyer-nav__about-label { font-weight: 700; }
.buyer-nav__panel { position: absolute; top: 100%; right: 1.5rem; padding: 1.25rem; background: #fff; border: 1px solid var(--border); box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1); max-height: calc(100vh - 5rem); overflow-y: auto; }
.buyer-nav__panel[hidden] { display: none; }
.buyer-nav__products { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 1.25rem; width: min(58rem, calc(100vw - 3rem)); }
.buyer-nav__about { min-width: 15rem; }
.buyer-nav__panel ul { list-style: none; padding: 0; margin: 0; }
.buyer-nav__panel a { display: block; padding: .65rem .5rem; font-size: .875rem; line-height: 1.5; overflow-wrap: anywhere; }
.buyer-nav__sector-heading { font-weight: 700; text-transform: uppercase; border-bottom: 1px solid var(--border); margin-bottom: .3rem; }
.buyer-nav__mobile-toggle { display: none; }
@media (max-width: 767px) {
  .buyer-nav[data-mobile-open="true"] { z-index: 60; }
  .buyer-nav__inner { flex-wrap: wrap; gap: 0; padding: .5rem 1rem; }
  .buyer-nav__logo { min-width: 0; max-width: calc(100% - 6rem); }
  .buyer-nav__logo img { height: auto; max-height: 3rem; }
  .buyer-nav__mobile-toggle { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.75rem; min-width: 2.75rem; padding: .5rem; }
  .buyer-nav__links { display: none; flex-direction: column; align-items: stretch; gap: 0; width: 100%; border-top: 1px solid var(--border); margin-top: .5rem; max-height: calc(100vh - 5rem); max-height: calc(100dvh - 5rem); overflow-y: auto; overscroll-behavior: contain; }
  .buyer-nav[data-mobile-open="true"] .buyer-nav__links { display: flex; }
  .buyer-nav__group-heading { justify-content: space-between; }
  .buyer-nav__group-heading > a { flex: 1; }
  .buyer-nav .buyer-nav__about-toggle { width: 100%; justify-content: space-between; padding: .85rem .5rem; font-size: 1rem; }
  .buyer-nav__links > a, .buyer-nav__group-heading > a { padding: .85rem .5rem; font-size: 1rem; }
  .buyer-nav__panel { position: static; width: 100%; min-width: 0; max-height: none; padding: .25rem .5rem .75rem; border: 0; box-shadow: none; overflow: visible; }
  .buyer-nav__products { display: grid; grid-template-columns: 1fr; gap: .75rem; }
  .buyer-nav__panel a { min-height: 2.75rem; }
}
