/* Review directions share the approved palette and compact gold CTA. */
.ivory-variation .fw-site-header[class*="nav-"] { width: min(1280px, calc(100% - 48px)); }
.fw-site-header.nav-floating .fw-main-nav { background: var(--theme-surface-raised); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; }
.nav-floating .fw-menu summary { border-radius: 999px; }
.nav-review { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 20px; padding: 24px; background: var(--theme-surface); }
.nav-review a { display: inline-flex; align-items: center; min-height: 44px; color: var(--theme-ink); font-size: 14px; text-decoration: none; }
.nav-review a[aria-current] { font-weight: 700; }
.nav-review a:focus-visible { outline: 2px solid var(--palette-holly-400); outline-offset: 4px; }
@media (min-width: 720px) {
 .ivory-variation .fw-site-header.nav-inline,
 .ivory-variation .fw-site-header.nav-floating { grid-template-columns: auto 1fr auto; column-gap: 24px; }
 .fw-site-header.nav-inline .fw-main-nav { justify-self: start; }
 .fw-site-header.nav-floating .fw-main-nav { justify-self: center; }
 .ivory-variation .fw-site-header.nav-floating { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 16px; }
}
@media (min-width: 1080px) {
 .ivory-variation .fw-site-header.nav-editorial { grid-template-columns: 1fr auto 1fr; column-gap: 24px; }
 .fw-site-header.nav-editorial .ivory-brand { grid-column: 2; grid-row: 1; justify-self: center; }
 .fw-site-header.nav-editorial .fw-main-nav { grid-column: 1; grid-row: 1; justify-self: start; gap: 22px; }
 .fw-site-header.nav-inline .fw-main-nav { gap: 28px; }
 .fw-site-header.nav-floating .fw-main-nav { gap: 24px; padding: 4px 24px; }
 .ivory-variation .fw-site-header.nav-inline { column-gap: 40px; }
}
@media (min-width: 1200px) {
 .fw-site-header.nav-editorial .fw-main-nav { gap: 28px; }
 .fw-site-header.nav-inline .fw-main-nav { gap: 32px; }
 .ivory-variation .fw-site-header.nav-inline { column-gap: 56px; }
}

/* The preview switcher stays available without entering the product navigation. */
body:has(.nav-review) { padding-bottom: 100px; }
.nav-review { position: fixed; z-index: 60; bottom: 16px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 24px); display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; padding: 6px; border: 1px solid var(--theme-line); border-radius: 18px; background: var(--theme-surface-raised); box-shadow: 0 8px 32px color-mix(in srgb, var(--palette-greyscale-950) 18%, transparent); }
.nav-review-label { display: none; font-size: 13px; color: var(--theme-ink-soft); padding-left: 10px; }
.nav-review-options { display: flex; gap: 4px; }
.nav-review a { justify-content: center; min-width: 76px; padding: 0 12px; border-radius: 12px; }
.nav-review a:hover { background: var(--theme-surface-raised-strong); }
.nav-review a[aria-current] { color: var(--palette-greyscale-950); background: var(--palette-golden-400); font-weight: 600; }
@media (min-width: 480px) { .nav-review-label { display: inline; } }
@media (min-width: 375px) { .fw-site-header[class*="nav-"] .ivory-wordmark { width: 110px; } }
@media (min-width: 720px) { .fw-site-header[class*="nav-"] .ivory-wordmark { width: 130px; } }

/* Keep the navigation readable over moving content without changing its layout. */
.ivory-variation .fw-site-header[class*="nav-"] { position: sticky; top: 0; z-index: 50; isolation: isolate; }
.ivory-variation .fw-site-header.is-stuck::before { content: ''; position: absolute; z-index: -1; inset: 0 auto 0 50%; width: 100vw; transform: translateX(-50%); background: var(--theme-surface); border-bottom: 1px solid var(--theme-line); }
.ivory-variation :where(h1,h2,h3,section,[id]) { scroll-margin-top: 196px; }
.fw-menu-panel { max-height: calc(100dvh - 160px); overflow-y: auto; }
@media (min-width: 720px) { .ivory-variation :where(h1,h2,h3,section,[id]) { scroll-margin-top: 140px; } }

/* All three destinations fit on tablet and larger screens. */
@media (min-width: 720px) {
 .fw-site-header.nav-floating .fw-main-nav .fw-nav-direct { display: inline-flex; }
 .fw-site-header.nav-floating .fw-main-nav .fw-menu { display: none; }
 .fw-site-header.nav-floating .fw-main-nav { padding: 6px 20px; gap: 24px; }
}